/* ============================================================================
   Dr. Indira Vemuri MD — Pediatric Care · Morgan Hill, CA
   Design fingerprint: Plus Jakarta Sans / Instrument Sans · poppy-jasper palette
   · El Toro & South Valley motif · jasper-pebble hero · topo & polish interactions
   MAX-CIPA: no external resources of any kind. WCAG 2.2 AA in both themes.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ----------------------------------------------------------------------------
   1. Color system — poppy-jasper ramps (light)
---------------------------------------------------------------------------- */
:root {
  /* jasper — brick & rust (primary) */
  --jasper-50:  #FBF1ED;
  --jasper-100: #F6DFD5;
  --jasper-200: #EBBFA9;
  --jasper-300: #DE9B7E;
  --jasper-400: #CE7454;
  --jasper-500: #B85436;
  --jasper-600: #A04428;
  --jasper-700: #7E351F;
  --jasper-800: #602817;
  --jasper-900: #451E12;

  /* poppy — golden orange (brand logo color) */
  --poppy-50:  #FFF8EB;
  --poppy-100: #FEEECC;
  --poppy-200: #FCDB94;
  --poppy-300: #F9C45C;
  --poppy-400: #F5AD30;
  --poppy-500: #EF9B1B;
  --poppy-600: #C97A0A;
  --poppy-700: #9E5F08;
  --poppy-800: #7C4A0B;
  --poppy-900: #5F390C;

  /* oak — valley-oak green (supporting) */
  --oak-50:  #F4F6EC;
  --oak-100: #E5EAD3;
  --oak-200: #CBD6A6;
  --oak-300: #ABBC76;
  --oak-400: #8DA050;
  --oak-500: #6F833A;
  --oak-600: #57672D;
  --oak-700: #465326;
  --oak-800: #37411F;
  --oak-900: #293018;

  /* sand — warm adobe cream (surfaces) */
  --sand-50:  #FDFAF4;
  --sand-100: #F9F2E5;
  --sand-200: #F2E5CE;
  --sand-300: #E6D2AE;
  --sand-400: #D5B988;
  --sand-500: #C09D63;

  /* warm ink */
  --ink-900: #2B1F19;
  --ink-700: #4F3E33;
  --ink-600: #5C4A3E;
  --ink-500: #71594A;
  --ink-400: #99836F;

  /* surface + role aliases (dark mode remaps these) */
  --surface-page:  var(--sand-50);
  --surface-card:  #FFFFFF;
  --surface-tint:  var(--sand-100);
  --surface-band:  var(--sand-200);
  --surface-raise: #FFFFFF;
  --ink-strong: var(--ink-900);
  --ink-body:   var(--ink-700);
  --ink-soft:   var(--ink-500);
  --accent:        var(--jasper-600);
  --accent-strong: var(--jasper-700);
  --accent-soft:   var(--jasper-100);
  --accent-2:      var(--poppy-500);
  --accent-2-deep: var(--poppy-700);
  --accent-3:      var(--oak-600);
  --line-soft: rgba(43, 31, 25, 0.12);
  --line-mid:  rgba(43, 31, 25, 0.22);
  --focus-ring: #9E5F08;
  --shadow-card: 0 1px 2px rgba(69, 30, 18, 0.05), 0 8px 28px -10px rgba(69, 30, 18, 0.18);
  --shadow-lift: 0 2px 6px rgba(69, 30, 18, 0.08), 0 18px 44px -12px rgba(69, 30, 18, 0.26);

  /* motif scene tokens */
  --sky-1: #FFF4DE;
  --sky-2: #FBE3BC;
  --hill-far:  #E9D5A8;
  --hill-mid:  #DDBE82;
  --hill-near: #C99F58;
  --eltoro:    #8A6A3E;
  --scene-line: rgba(69, 30, 18, 0.25);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --font-display: 'Plus Jakarta Sans', 'Avenir Next', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --header-h: 84px;
  color-scheme: light;
}

/* ----------------------------------------------------------------------------
   2. Dark theme — "jasper dusk" (var remap + contrast sweep below)
---------------------------------------------------------------------------- */
:root.theme-dark {
  --surface-page:  #221712;
  --surface-card:  #2D1F18;
  --surface-tint:  #281B15;
  --surface-band:  #33231B;
  --surface-raise: #36251D;
  --ink-strong: #F7ECE1;
  --ink-body:   #DFCCBD;
  --ink-soft:   #B59C8B;
  --accent:        var(--jasper-300);
  --accent-strong: var(--jasper-200);
  --accent-soft:   rgba(222, 155, 126, 0.16);
  --accent-2:      var(--poppy-400);
  --accent-2-deep: var(--poppy-300);
  --accent-3:      var(--oak-300);
  --line-soft: rgba(247, 236, 225, 0.14);
  --line-mid:  rgba(247, 236, 225, 0.26);
  --focus-ring: #F9C45C;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, 0.45), 0 20px 48px -12px rgba(0, 0, 0, 0.65);

  --sky-1: #3A2418;
  --sky-2: #54301C;
  --hill-far:  #4A3322;
  --hill-mid:  #3C2A1C;
  --hill-near: #2E2015;
  --eltoro:    #241A11;
  --scene-line: rgba(247, 236, 225, 0.2);
  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   3. Base
---------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: 92px; /* clears the mobile sticky CTA bar (2.4.11) */
}
html[data-textsize="lg"] { font-size: 112.5%; }
html[data-textsize="xl"] { font-size: 125%; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 700;
  /* breathing room so clamp() extremes never clip descenders */
  padding-bottom: 0.08em;
}
h1 { font-size: clamp(2.35rem, 4.6vw + 0.9rem, 3.9rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; }
h2 { font-size: clamp(1.7rem, 2.4vw + 0.7rem, 2.5rem); }
h3 { font-size: clamp(1.18rem, 1vw + 0.85rem, 1.45rem); }

p { max-width: 68ch; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--accent-strong); }
img { max-width: 100%; height: auto; display: block; }
ul[role="list"], ol[role="list"] { list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--poppy-200); color: var(--ink-900); }
:root.theme-dark ::selection { background: var(--jasper-700); color: #FFF8EB; }

*:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* readable-text panel pref */
html[data-readable="on"] body {
  line-height: 1.9;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
}
html[data-readable="on"] p { max-width: 60ch; }

/* high-contrast panel pref — genuinely stronger, not a no-op */
html[data-contrast="high"] {
  --ink-strong: #140C08;
  --ink-body: #241710;
  --ink-soft: #3D2B1F;
  --accent: #7E351F;
  --accent-strong: #602817;
  --accent-2-deep: #6E4205;
  --line-soft: rgba(20, 12, 8, 0.45);
  --line-mid: rgba(20, 12, 8, 0.7);
}
html[data-contrast="high"].theme-dark {
  --ink-strong: #FFFFFF;
  --ink-body: #FFF3E8;
  --ink-soft: #F0DCCB;
  --accent: #F0B9A0;
  --accent-strong: #F6D5C5;
  --accent-2-deep: #FCDB94;
  --line-soft: rgba(255, 255, 255, 0.5);
  --line-mid: rgba(255, 255, 255, 0.75);
}
html[data-contrast="high"] a { text-decoration-thickness: 2px; }
html[data-contrast="high"] .card,
html[data-contrast="high"] .qa-card,
html[data-contrast="high"] .faq-item { border-width: 2px; }

/* hide-decorations panel pref — motif bands, ambience, sprigs, all of it */
html[data-decor="off"] .decor,
html[data-decor="off"] .topo-field,
html[data-decor="off"] .motif-band,
html[data-decor="off"] .hero-rings,
html[data-decor="off"] .hero-sprig,
html[data-decor="off"] .footer-scene { display: none !important; }
html[data-decor="off"] .site-footer { background: var(--surface-band); }
html[data-decor="off"] .footer-inner { padding-top: 3rem; }

/* ----------------------------------------------------------------------------
   4. Motion gates — BOTH the OS query and the panel override kill everything
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ----------------------------------------------------------------------------
   5. Skip link
---------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 300;
  background: var(--accent-strong);
  color: #FFF8EB;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus-visible { top: 14px; color: #FFF8EB; }

/* ----------------------------------------------------------------------------
   6. Header
---------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--surface-page) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  max-width: 1220px;
  margin-inline: auto;
  padding: 10px clamp(16px, 2.4vw, 28px);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 22px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark { width: 64px; height: 58px; flex-shrink: 0; }
/* real clinic logo (her wordmark lockup) — light + dark variants per theme */
.brand-logo { height: 65px; width: auto; display: block; }
.brand-logo-dark { display: none; }
:root.theme-dark .brand-logo-light { display: none; }
:root.theme-dark .brand-logo-dark { display: block; }

/* drawer-top logo (theme-aware, self-contained toggle so header media queries don't reach it) */
.drawer-logo { height: 36px; width: auto; display: block; }
.drawer-logo.brand-logo-dark { display: none; }
:root.theme-dark .drawer-logo.brand-logo-light { display: none; }
:root.theme-dark .drawer-logo.brand-logo-dark { display: block; }

/* footer logo — always the dark variant (the footer is the dusk scene in both themes) */
.footer-logo { height: 58px; width: auto; display: block; margin-bottom: 0.7rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.38rem;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  white-space: nowrap;
}
.brand-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
}
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: clamp(2px, 0.5vw, 8px); list-style: none; }
.main-nav a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-body);
  text-decoration: none;
  padding: 9px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.main-nav a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.main-nav a[aria-current="page"],
.main-nav a.is-active { background: var(--accent-soft); color: var(--accent-strong); }

.header-tools { display: flex; align-items: center; gap: 10px; }

/* EN/ES toggle */
.lang-toggle {
  display: inline-flex;
  border: 1.5px solid var(--line-mid);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-card);
}
.lang-option {
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  padding: 7px 13px;
  min-width: 44px;
  min-height: 34px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-option.lang-active { background: var(--accent); color: #FFF8EB; }
:root.theme-dark .lang-option.lang-active { color: #2B1206; }

/* theme toggle (separate from the Display & Comfort panel by design) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line-mid);
  background: var(--surface-card);
  cursor: pointer;
  color: var(--ink-body);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root.theme-dark .theme-toggle .icon-sun { display: block; }
:root.theme-dark .theme-toggle .icon-moon { display: none; }

.btn-call-header { white-space: nowrap; }

.nav-burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line-mid);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  color: var(--ink-strong);
}

/* ----------------------------------------------------------------------------
   7. Buttons — "polish" sheen on hover, contour-echo ring on press
---------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius-full);
  padding: 14px 26px;
  min-height: 48px;
  border: 0;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn .btn-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.btn .btn-sheen::after {
  content: "";
  position: absolute;
  top: -40%; bottom: -40%;
  left: -70%;
  width: 36%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 248, 235, 0.34), transparent);
  transition: left 0.55s ease;
}
.btn:hover .btn-sheen::after { left: 145%; }
/* contour-echo press ring */
.btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
.btn:active::after { animation: contourEcho 0.5s ease-out; }
@keyframes contourEcho {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.12); }
}
.btn:active { transform: scale(0.975); }

.btn-primary { background: var(--jasper-600); color: #FFF8EB; box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--jasper-700); transform: translateY(-2px); box-shadow: var(--shadow-lift); color: #FFF8EB; }
:root.theme-dark .btn-primary { background: var(--jasper-400); color: #2B1206; }
:root.theme-dark .btn-primary:hover { background: var(--jasper-300); color: #2B1206; }

.btn-secondary {
  background: transparent;
  color: var(--accent-strong);
  border: 2px solid var(--accent);
}
.btn-secondary:hover { background: var(--accent-soft); transform: translateY(-2px); color: var(--accent-strong); }

.btn-soft {
  background: var(--surface-card);
  color: var(--accent-strong);
  border: 1.5px solid var(--line-mid);
}
.btn-soft:hover { border-color: var(--accent); transform: translateY(-2px); }

.btn-sm { padding: 10px 18px; min-height: 42px; font-size: 0.93rem; }

/* ----------------------------------------------------------------------------
   8. Layout helpers
---------------------------------------------------------------------------- */
.container { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.sr-h2, .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.section { padding-block: clamp(3.6rem, 7vw, 6.4rem); position: relative; }
.section-tint { background: var(--surface-tint); }
.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin-bottom: 14px;
}
.eyebrow .orb-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent-2) 0 4px, transparent 4.5px),
              radial-gradient(circle at 50% 50%, transparent 0 6px, var(--accent) 6.5px 7.5px, transparent 8px);
  flex-shrink: 0;
}
.lede { font-size: clamp(1.06rem, 0.6vw + 0.95rem, 1.22rem); color: var(--ink-body); }

/* gradient color-play on key heading words — padded so paint never clips */
.grad {
  --grad-base: linear-gradient(94deg, var(--jasper-500) 8%, var(--poppy-600) 92%);
  /* base brand gradient + a soft light band that glints across now and then */
  background:
    linear-gradient(100deg, transparent 40%, rgba(255, 246, 222, 0.78) 50%, transparent 60%),
    var(--grad-base);
  background-size: 250% 100%, 100% 100%;
  background-position: -35% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.1em 0.15em;
  margin: -0.1em -0.15em;
  animation: gradSheen 7.5s ease-in-out 1.4s infinite;
}
:root.theme-dark .grad { --grad-base: linear-gradient(94deg, var(--jasper-300) 8%, var(--poppy-400) 92%); }
@keyframes gradSheen {
  0%        { background-position: -35% 0, 0 0; }  /* sheen off-screen left */
  40%, 100% { background-position: 135% 0, 0 0; }  /* swept off-screen right, then rests */
}
html[data-contrast="high"] .grad {
  background: none;
  color: var(--accent-strong);
  padding: 0; margin: 0;
  animation: none;
}

/* ----------------------------------------------------------------------------
   9. Reveal on scroll — "elevation rise" (gated in JS too)
---------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.reveal-grid > * { opacity: 0; transform: translateY(26px); }
.reveal-grid.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.reveal-grid.is-in > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-grid.is-in > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-grid.is-in > *:nth-child(4) { transition-delay: 0.27s; }
.reveal-grid.is-in > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-grid.is-in > *:nth-child(6) { transition-delay: 0.45s; }
html.no-anim .reveal, html.no-anim .reveal-grid > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ----------------------------------------------------------------------------
   10. Topo ambience — drifting contour-line field (≤6% opacity, decor-gated)
---------------------------------------------------------------------------- */
.topo-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.topo-field svg {
  position: absolute;
  width: 1600px; height: 1600px;
  opacity: 0.055;
  color: var(--jasper-700);
  animation: topoDrift 90s linear infinite alternate;
}
:root.theme-dark .topo-field svg { opacity: 0.07; color: var(--jasper-300); }
.topo-a svg { top: -340px; right: -420px; }
.topo-b svg { bottom: -480px; left: -380px; animation-delay: -45s; }
@keyframes topoDrift {
  from { transform: translate3d(0, 0, 0) rotate(0.001deg); }
  to   { transform: translate3d(-70px, 46px, 0) rotate(0.001deg); }
}
.section > .container { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------
   11. Hero
---------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.6rem, 5vw, 5rem) clamp(3rem, 6vw, 5.6rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 4.5vw, 4.4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-copy h1 { margin-bottom: 1.1rem; max-width: 13ch; }
.hero-copy .lede { margin-bottom: 1.7rem; max-width: 44ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.5rem; }
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-full);
  padding: 8px 15px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-body);
  box-shadow: var(--shadow-card);
}
.chip svg { width: 17px; height: 17px; color: var(--accent-2-deep); flex-shrink: 0; }

/* the jasper-pebble scene */
.hero-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero-art > svg.hero-scene {
  width: min(100%, 560px);
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 24px 38px rgba(69, 30, 18, 0.22));
}
:root.theme-dark .hero-art > svg.hero-scene { filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55)); }
.hero-rings {
  position: absolute;
  inset: -8% -12%;
  z-index: 1;
  pointer-events: none;
}
.hero-rings svg { width: 100%; height: 100%; }
.hero-rings .ring { stroke: var(--jasper-300); opacity: 0.5; }
.hero-rings .ring-2 { stroke: var(--poppy-400); opacity: 0.34; }
.hero-rings .ring-3 { stroke: var(--jasper-200); opacity: 0.26; }
:root.theme-dark .hero-rings .ring { stroke: var(--jasper-400); opacity: 0.4; }
:root.theme-dark .hero-rings .ring-2 { stroke: var(--poppy-500); opacity: 0.26; }
:root.theme-dark .hero-rings .ring-3 { stroke: var(--jasper-500); opacity: 0.2; }
.hero-rings .ring, .hero-rings .ring-2, .hero-rings .ring-3 {
  animation: ringBreathe 18s ease-in-out infinite alternate;
  transform-origin: center;
}
.hero-rings .ring-2 { animation-delay: -6s; }
.hero-rings .ring-3 { animation-delay: -12s; }
@keyframes ringBreathe {
  from { transform: scale(0.985); }
  to   { transform: scale(1.02); }
}
.hero-sprig {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  color: var(--jasper-500);
}
.hero-sprig svg { width: 100%; height: 100%; }
.sprig-bl { width: clamp(90px, 12vw, 150px); left: -2%; bottom: -4%; }
.sprig-tr { width: clamp(70px, 9vw, 116px); right: -1%; top: -3%; transform: rotate(148deg); }

/* in-scene gentle animations (all behind both motion gates via §4) */
.sway { animation: poppySway 7s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }
.sway-2 { animation-delay: -2.4s; animation-duration: 8.4s; }
.sway-3 { animation-delay: -4.6s; animation-duration: 6.4s; }
@keyframes poppySway {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}
.cloud-shadow { animation: cloudSweep 26s ease-in-out infinite alternate; }
@keyframes cloudSweep {
  from { transform: translateX(-90px); }
  to   { transform: translateX(110px); }
}
.hawk { animation: hawkGlide 38s ease-in-out infinite alternate; }
@keyframes hawkGlide {
  0%   { transform: translate(0, 0) }
  50%  { transform: translate(-130px, 26px) }
  100% { transform: translate(-260px, 6px) }
}
.scene-dark-only { display: none; }
:root.theme-dark .scene-dark-only { display: block; }

/* ----------------------------------------------------------------------------
   11b. Hero photo carousel — circular aperture, fade + slow Ken Burns, dots only
---------------------------------------------------------------------------- */
.hero-carousel {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hc-circle {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-tint);
  box-shadow: 0 0 0 7px var(--surface-card),
              0 0 0 9px rgba(184, 84, 54, 0.20),
              var(--shadow-lift);
}
:root.theme-dark .hc-circle {
  box-shadow: 0 0 0 7px var(--surface-card),
              0 0 0 9px rgba(222, 155, 126, 0.28),
              var(--shadow-lift);
}
.hc-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}
.hc-slide.is-active { opacity: 1; z-index: 2; }
.hc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  will-change: transform;
}
/* slow Ken Burns on the active slide only; gentle, varied direction per slide */
.hc-slide.is-active img { animation: kenburns 17s ease-in-out forwards; }
.hc-slide:nth-child(2).is-active img { animation-name: kenburns2; }
.hc-slide:nth-child(3).is-active img { animation-name: kenburns3; }
@keyframes kenburns  { from { transform: scale(1.04) translate(0, 0); }      to { transform: scale(1.13) translate(-1.6%, -1.4%); } }
@keyframes kenburns2 { from { transform: scale(1.05) translate(1%, -0.5%); } to { transform: scale(1.13) translate(-1%, 1.4%); } }
@keyframes kenburns3 { from { transform: scale(1.04) translate(-1%, 1%); }   to { transform: scale(1.12) translate(1.4%, -1.2%); } }
.hc-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(125% 120% at 50% 32%, transparent 56%, rgba(69, 30, 18, 0.16) 100%),
    linear-gradient(to top, rgba(69, 30, 18, 0.14), transparent 28%);
}
:root.theme-dark .hc-vignette {
  background:
    radial-gradient(125% 120% at 50% 32%, transparent 52%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.34), transparent 30%);
}

.hc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.hc-dots { display: flex; align-items: center; gap: 6px; }
.hc-dot {
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
}
.hc-dot > span {
  display: block;
  width: 9px; height: 9px;
  border-radius: var(--radius-full);
  background: var(--line-mid);
  transition: width 0.3s ease, background 0.2s ease;
}
.hc-dot:hover > span { background: var(--accent); }
.hc-dot.is-current > span { background: var(--accent); width: 26px; border-radius: 5px; }
.hc-playpause {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line-mid);
  background: var(--surface-card);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.hc-playpause:hover { border-color: var(--accent); transform: translateY(-1px); }
.hc-playpause svg { width: 18px; height: 18px; }
.ic-play { display: none; }
.hero-carousel:not(.is-playing) .ic-play { display: block; }
.hero-carousel:not(.is-playing) .ic-pause { display: none; }

/* floating jasper sun-orb accent (preserves "the sun") */
.hero-sun {
  position: absolute;
  z-index: 3;
  width: clamp(64px, 8vw, 96px);
  top: 1%;
  right: 3%;
  pointer-events: none;
  animation: ringBreathe 20s ease-in-out infinite alternate;
}
.hero-sun svg { width: 100%; height: auto; }

/* decorations-off + reduced-motion: freeze Ken Burns and the sun, keep a clean static photo */
html[data-decor="off"] .hero-sun { display: none; }
html[data-decor="off"] .hc-slide.is-active img,
html[data-motion="reduced"] .hc-slide.is-active img { animation: none; transform: scale(1.04); }
:root.theme-dark .scene-light-only { display: none; }
.star { animation: starTwinkle 5s ease-in-out infinite alternate; }
.star-2 { animation-delay: -1.6s; animation-duration: 6.2s; }
.star-3 { animation-delay: -3.1s; animation-duration: 4.4s; }
@keyframes starTwinkle {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* ----------------------------------------------------------------------------
   12. Trust strap — slow marquee, poppy separators, static under gates
---------------------------------------------------------------------------- */
.trust-strap {
  background: var(--surface-band);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  padding-block: 14px;
}
.strap-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: strapDrift 75s linear infinite;
}
.trust-strap:hover .strap-track,
.trust-strap:focus-within .strap-track { animation-play-state: paused; }
@keyframes strapDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.strap-set { display: flex; align-items: center; }
.strap-item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-inline: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-body);
  white-space: nowrap;
}
.strap-item .poppy-sep { width: 17px; height: 17px; color: var(--jasper-500); flex-shrink: 0; }
:root.theme-dark .strap-item .poppy-sep { color: var(--jasper-300); }
/* static fallback under reduced motion / decor-off: wrap, hide duplicate set */
@media (prefers-reduced-motion: reduce) {
  .strap-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .strap-set[aria-hidden="true"] { display: none; }
  .strap-set { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}
html[data-motion="reduced"] .strap-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html[data-motion="reduced"] .strap-set[aria-hidden="true"] { display: none; }
html[data-motion="reduced"] .strap-set { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html[data-decor="off"] .strap-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html[data-decor="off"] .strap-set[aria-hidden="true"] { display: none; }
html[data-decor="off"] .strap-set { flex-wrap: wrap; justify-content: center; row-gap: 8px; }

/* ----------------------------------------------------------------------------
   13. Cards — contour-offset hover outline + lift
---------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface-card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: calc(var(--radius-lg) + 7px);
  border: 1.5px dashed var(--jasper-300);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--line-mid); }
.card:hover::before { opacity: 0.75; transform: scale(1); }
html[data-decor="off"] .card::before { display: none; }

.icon-tile {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: 1rem;
}
.icon-tile svg { width: 27px; height: 27px; }

/* quick access */
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.qa-card { display: block; text-decoration: none; color: inherit; }
.qa-card h3 { margin-bottom: 0.3rem; }
.qa-card p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.qa-card .qa-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   14. About / provider card
---------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.provider-card { text-align: center; position: sticky; top: calc(var(--header-h) + 24px); }
.provider-photo-wrap {
  position: relative;
  width: min(62%, 240px);
  margin: 0 auto 1.2rem;
}
.provider-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 38% 62% 56% 44% / 46% 42% 58% 54%; /* jasper-pebble echo */
  border: 4px solid var(--surface-card);
  box-shadow: var(--shadow-lift);
}
.provider-photo-wrap::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 42% 58% 52% 48% / 50% 46% 54% 50%;
  border: 1.5px dashed var(--jasper-300);
  opacity: 0.7;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: pebbleTurn 26s linear infinite;  /* organic ring gently orbits the portrait */
}
@keyframes pebbleTurn { to { transform: rotate(360deg); } }
.provider-card h3 { font-size: 1.4rem; }
.provider-role { color: var(--accent-2-deep); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; margin: 0 auto 0.9rem; }
.provider-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; }
.provider-badges .chip { font-size: 0.82rem; padding: 6px 12px; box-shadow: none; }
.about-body p + p { margin-top: 1rem; }
.about-points { margin-top: 1.6rem; display: grid; gap: 12px; list-style: none; }
.about-points li { display: flex; gap: 12px; align-items: flex-start; }
.about-points svg { width: 21px; height: 21px; color: var(--accent-2-deep); flex-shrink: 0; margin-top: 4px; }

/* ----------------------------------------------------------------------------
   15. Services
---------------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc-card h3 { margin-bottom: 0.4rem; }
.svc-card p { font-size: 0.95rem; color: var(--ink-soft); }
.svc-age {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  background: var(--poppy-100);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
:root.theme-dark .svc-age { background: rgba(245, 173, 48, 0.16); color: var(--poppy-300); }
.feature-row { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--surface-card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.feature-item svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.feature-item h4 { font-size: 0.99rem; margin-bottom: 2px; }
.feature-item p { font-size: 0.88rem; color: var(--ink-soft); }

/* ----------------------------------------------------------------------------
   16. Office gallery
---------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.035); }
.g-1 { grid-column: span 7; aspect-ratio: 16 / 11; }
.g-2 { grid-column: span 5; aspect-ratio: 4 / 3.14; }
.g-3 { grid-column: span 5; aspect-ratio: 4 / 3.14; }
.g-4 { grid-column: span 7; aspect-ratio: 16 / 11; }
.gallery-cap {
  position: absolute;
  left: 12px; bottom: 12px;
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  padding: 7px 15px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink-strong);
}

/* office teaser (homepage card linking to the Our Office page) */
.office-teaser {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: center;
  max-width: 940px;
  background: linear-gradient(135deg, var(--sand-50), var(--poppy-50));
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-card);
}
.office-teaser-photo {
  position: relative;
  margin: 0;
  padding: 8px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.office-teaser-photo::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: calc(var(--radius-md) + 7px);
  border: 1.5px dashed var(--jasper-300);
  opacity: 0.7;
  pointer-events: none;
}
html[data-decor="off"] .office-teaser-photo::after { display: none; }
.office-teaser-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 4px);
}
.office-teaser-body .eyebrow { margin-bottom: 0.5rem; }
.office-teaser-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 22ch; }
.office-teaser-points { margin-top: 1.2rem; display: grid; gap: 10px; list-style: none; }
.office-teaser-points li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-body); font-size: 0.98rem; }
.office-teaser-points svg { width: 21px; height: 21px; color: var(--accent-2-deep); flex-shrink: 0; margin-top: 2px; }
.office-teaser-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--accent);
  text-decoration: none;
}
.office-teaser-link svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.office-teaser-link:hover { color: var(--accent-strong); }
.office-teaser-link:hover svg { transform: translateX(4px); }
:root.theme-dark .office-teaser { background: linear-gradient(135deg, var(--surface-card), var(--surface-band)); }

/* ----------------------------------------------------------------------------
   16b. Ambient critters — tiny themed illustrations sprinkled into the hero,
   a mid-page section, and the footer dusk scene (injected by app.js so every
   page shares them). All carry `.decor`, so they vanish with the Comfort
   panel's "hide decorations" toggle; their CSS animations freeze under both
   reduced-motion gates (§4). Decorative + non-interactive throughout.
---------------------------------------------------------------------------- */
.critter { position: absolute; pointer-events: none; z-index: 2; }
.critter svg { width: 100%; height: auto; display: block; overflow: visible; }

/* a red-tailed hawk soaring on a golden-hour thermal */
.crit-hawk { color: var(--ink-400); opacity: 0.65; animation: hawkSoar 34s ease-in-out infinite alternate; }
:root.theme-dark .crit-hawk { color: var(--ink-soft); opacity: 0.5; }
@keyframes hawkSoar {
  0%   { transform: translate(0, 0) rotate(-3deg); }
  50%  { transform: translate(-48px, 16px) rotate(4deg); }
  100% { transform: translate(-90px, 2px) rotate(-2deg); }
}

/* a poppy-orange butterfly drifting + flapping */
.crit-bfly { animation: bflyDrift 13s ease-in-out infinite alternate; }
.crit-bfly .wings { transform-origin: 50% 50%; transform-box: fill-box; animation: bflyFlap 0.42s ease-in-out infinite alternate; }
@keyframes bflyDrift {
  0%   { transform: translate(0, 0) rotate(-5deg); }
  50%  { transform: translate(14px, -16px) rotate(7deg); }
  100% { transform: translate(24px, 4px) rotate(-3deg); }
}
@keyframes bflyFlap { from { transform: scaleX(1); } to { transform: scaleX(0.42); } }

/* placement per context (verified spots; tiny + non-interactive) */
.hero .crit-hawk      { width: clamp(40px, 5vw, 62px); top: 2%;  right: 27%; }
.hero .crit-bfly      { width: clamp(26px, 3.2vw, 38px); bottom: 30%; left: 51%; }
.page-hero .crit-hawk { width: clamp(34px, 4.5vw, 52px); top: 14%; right: 7%; }
.page-hero .crit-bfly { width: clamp(24px, 3vw, 34px); top: 40%; right: 16%; }
.section-tint .crit-bfly { width: clamp(24px, 3vw, 34px); top: 12%; right: 7%; }

/* dusk fireflies over the footer campfire scene */
.footer-fireflies { position: absolute; top: 0; left: 0; right: 0; height: clamp(140px, 24vw, 240px); overflow: hidden; pointer-events: none; z-index: 0; }
.crit-firefly {
  position: absolute;
  width: var(--sz, 6px); height: var(--sz, 6px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFF1C9 0%, #F9C45C 45%, rgba(245, 173, 48, 0) 72%);
  box-shadow: 0 0 7px 2px rgba(249, 196, 92, 0.55);
  opacity: 0;
  animation: fireflyFloat var(--dur, 10s) ease-in-out var(--d1, 0s) infinite alternate,
             fireflyGlow var(--glow, 3.4s) ease-in-out var(--d2, 0s) infinite;
}
@keyframes fireflyFloat { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 18px), var(--dy, -12px)); } }
@keyframes fireflyGlow { 0%, 100% { opacity: 0; } 14% { opacity: 0.2; } 50% { opacity: 0.95; } 86% { opacity: 0.2; } }

/* ----------------------------------------------------------------------------
   16c. Cursor trail — warm "golden pollen" motes that rise and fade behind the
   pointer (fine-pointer devices only). app.js spawns the dots and skips them
   entirely when reduced-motion or "hide decorations" is active, so there is no
   CSS gate to maintain here; the layer is inert (pointer-events none).
---------------------------------------------------------------------------- */
.cursor-trail { position: fixed; inset: 0; pointer-events: none; z-index: 9990; overflow: hidden; contain: strict; }
.trail-dot {
  position: absolute;
  width: var(--sz, 11px); height: var(--sz, 11px);
  margin-top: calc(var(--sz, 11px) / -2);
  margin-left: calc(var(--sz, 11px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFF4D6 0%, var(--hue, #F5AD30) 45%, rgba(245, 173, 48, 0) 72%);
  box-shadow: 0 0 8px 2px rgba(249, 196, 92, 0.45);
  opacity: 0;
  will-change: transform, opacity;
  animation: trailFade var(--life, 950ms) ease-out forwards;
}
@keyframes trailFade {
  0%   { opacity: 0.85; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -16px)) scale(0.25); }
}

/* ----------------------------------------------------------------------------
   16d. Footer peacock — small golden line-art bird perched on the ground just
   to the right of the ember sun. It sways gently to the left and fans its tail
   every ~3.5s with a very soft teal/gold shimmer. Injected by app.js into every
   footer. Under reduced motion (OS or Comfort panel) it is fully static
   (no sway, tail closed, no shimmer).
---------------------------------------------------------------------------- */
.peacock-stage {
  position: absolute; left: 0; right: 0;
  top: calc(13.6vw - 52px);          /* just below the sun's ground line, to its right */
  height: 52px;
  pointer-events: none; overflow: visible; z-index: 0;
}
.peacock { position: absolute; left: 77%; bottom: 0; height: 52px; width: auto; animation: peacockSway 4.5s ease-in-out infinite alternate; }
.peacock svg { height: 100%; width: auto; display: block; overflow: visible; }
.peacock-tail { transform-box: fill-box; transform-origin: 100% 95%; animation: peacockTail 3.5s ease-in-out infinite; }
.peacock-shimmer { opacity: 0; animation: peacockShimmer 3.5s ease-in-out infinite; }
@keyframes peacockSway {
  from { transform: translateX(0); }
  to   { transform: translateX(-8px); }
}
@keyframes peacockTail {
  0%, 12%   { transform: scale(0.14, 0.72); }   /* resting, tail closed */
  32%, 54%  { transform: scale(1, 1); }          /* fanned open + hold */
  74%, 100% { transform: scale(0.14, 0.72); }    /* closed again */
}
@keyframes peacockShimmer {
  0%, 24%   { opacity: 0; }
  34%, 52%  { opacity: 0.55; }   /* only while the tail is open */
  64%, 100% { opacity: 0; }
}
/* reduced motion → fully static peacock (no sway, tail closed, no shimmer) */
@media (prefers-reduced-motion: reduce) {
  .peacock { animation: none !important; transform: none !important; }
  .peacock-tail { animation: none !important; transform: scale(0.14, 0.72) !important; }
  .peacock-shimmer { animation: none !important; opacity: 0 !important; }
}
html[data-motion="reduced"] .peacock { animation: none !important; transform: none !important; }
html[data-motion="reduced"] .peacock-tail { animation: none !important; transform: scale(0.14, 0.72) !important; }
html[data-motion="reduced"] .peacock-shimmer { animation: none !important; opacity: 0 !important; }

/* ----------------------------------------------------------------------------
   17. Visit / contact / map
---------------------------------------------------------------------------- */
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: stretch;
}
.hours-table { width: 100%; border-collapse: collapse; margin-block: 1.1rem; }
.hours-table th, .hours-table td { text-align: left; padding: 9px 4px; border-bottom: 1px dashed var(--line-soft); font-size: 0.99rem; }
.hours-table th { font-family: var(--font-display); font-weight: 600; color: var(--ink-strong); }
.hours-table td { text-align: right; color: var(--ink-body); }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border: 1.5px solid var(--line-mid);
  color: var(--ink-body);
  background: var(--surface-card);
}
.status-pill .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-400); }
.status-pill.open { border-color: var(--oak-400); color: var(--oak-700); }
.status-pill.open .pip { background: var(--oak-500); }
:root.theme-dark .status-pill.open { color: var(--oak-200); border-color: var(--oak-500); }
.status-pill.open::after { content: none; }
.contact-rows { display: grid; gap: 14px; margin-top: 1.3rem; }
.contact-row { display: flex; gap: 13px; align-items: flex-start; }
.contact-row svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-row a { font-weight: 600; }
.contact-row .crow-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
}
.map-frame svg.map-art { width: 100%; height: auto; display: block; }
.map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1.5px solid var(--line-soft);
}
.map-foot .map-addr { font-size: 0.95rem; font-weight: 600; color: var(--ink-strong); font-style: normal; }

/* ----------------------------------------------------------------------------
   18. FAQ — disclosure cards, one open at a time
---------------------------------------------------------------------------- */
.faq-list { display: grid; gap: 14px; max-width: 780px; }
.faq-item {
  background: var(--surface-card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--ink-strong);
  min-height: 56px;
}
.faq-q .faq-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 20px 18px; color: var(--ink-body); }
.faq-a[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   19. Motif section breaks — illustrated, gently animated, never straight lines
---------------------------------------------------------------------------- */
.motif-band { display: block; width: 100%; line-height: 0; position: relative; z-index: 0; }
.motif-band svg { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------------------------
   20. Footer — dusk valley scene (themed motif moment)
---------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #482817 0%, #341C10 34%, #241509 100%);
  color: #F3E4D4;
  overflow: hidden;
}
:root.theme-dark .site-footer { background: linear-gradient(180deg, #2E1C12 0%, #20130B 40%, #150C06 100%); }
.footer-scene { position: absolute; inset: 0 0 auto 0; line-height: 0; pointer-events: none; }
.footer-scene svg { width: 100%; height: auto; display: block; }
.footer-inner { position: relative; z-index: 1; padding-top: clamp(7rem, 13vw, 11rem); padding-bottom: 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(243, 228, 212, 0.18);
}
.footer-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #FFF4E3; }
.footer-tag { color: #E8CFB6; font-size: 0.97rem; max-width: 34ch; margin-top: 0.5rem; }
.site-footer h4 { color: #FFD9A6; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.9rem; }
.footer-col ul { display: grid; gap: 9px; list-style: none; }
.site-footer a { color: #F3E4D4; text-decoration-color: rgba(243, 228, 212, 0.5); }
.site-footer a:hover { color: #FFD9A6; }
.footer-addr { font-style: normal; display: grid; gap: 9px; color: #E8CFB6; }
.footer-addr a { font-weight: 600; }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-block: 1.4rem 0.4rem;
  font-size: 0.92rem;
  color: #D9BD9F;
}
.footer-meta .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.footer-privacy-note { font-size: 0.88rem; color: #C9A983; max-width: none; }

/* a11y.js footer button inherits .footer-meta context; give it house style */
.site-footer .access-footer-btn {
  background: rgba(255, 244, 227, 0.12);
  border: 1.5px solid rgba(255, 244, 227, 0.4);
  color: #FFF4E3;
  border-radius: var(--radius-full);
  padding: 9px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 40px;
}
.site-footer .access-footer-btn:hover { background: rgba(255, 244, 227, 0.2); }

/* ----------------------------------------------------------------------------
   21. Mobile drawer + sticky CTA
---------------------------------------------------------------------------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 21, 9, 0.45);
  z-index: 180;
  opacity: 0;
  pointer-events: none; /* iOS tap-swallow trap: inert unless open */
  transition: opacity 0.25s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px);
  z-index: 200;
  background: var(--surface-page);
  box-shadow: -18px 0 50px rgba(36, 21, 9, 0.3);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 28px;
  overflow-y: auto;
}
.mobile-drawer[hidden] { display: none; } /* island-coast trap: closed = display none */
.mobile-drawer.open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-close {
  width: 46px; height: 46px;
  border: 1.5px solid var(--line-mid);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-strong);
}
.drawer-nav ul { list-style: none; display: grid; gap: 4px; }
.drawer-nav a {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--ink-strong);
  text-decoration: none;
  padding: 13px 10px;
  border-radius: var(--radius-sm);
}
.drawer-nav a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.drawer-ctas { display: grid; gap: 12px; margin-top: 20px; }
.drawer-meta { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 12px; }

.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: none;
  gap: 10px;
  padding: 10px clamp(12px, 4vw, 18px) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
}
.mobile-cta-bar .btn { flex: 1; min-height: 50px; }

/* ----------------------------------------------------------------------------
   22. Loading veil — CSS motif line-draw, sub-second, JS removal backstop
---------------------------------------------------------------------------- */
.load-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--surface-page);
  display: grid;
  place-items: center;
  animation: veilOut 0.9s ease 0.55s forwards;
  pointer-events: none;
}
.load-veil svg { width: 120px; height: auto; color: var(--jasper-500); }
.load-veil .veil-path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: veilDraw 0.7s ease-out forwards;
}
@keyframes veilDraw { to { stroke-dashoffset: 0; } }
@keyframes veilOut { to { opacity: 0; visibility: hidden; } }

/* ----------------------------------------------------------------------------
   23. Page-level (forms / resources / legal shells)
---------------------------------------------------------------------------- */
.page-hero { padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(1.6rem, 3vw, 2.6rem); position: relative; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-top: 0.9rem; }

.forms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.form-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.form-card h3 { font-size: 1.06rem; display: flex; gap: 10px; align-items: center; }
.form-card h3 svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.form-card p { font-size: 0.92rem; color: var(--ink-soft); }
.form-card .form-meta { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.8rem; }
.filter-chip {
  border: 1.5px solid var(--line-mid);
  background: var(--surface-card);
  color: var(--ink-body);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 9px 17px;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.filter-chip[aria-pressed="true"] { background: var(--jasper-600); border-color: var(--jasper-600); color: #FFF8EB; }
:root.theme-dark .filter-chip[aria-pressed="true"] { background: var(--jasper-400); border-color: var(--jasper-400); color: #2B1206; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.res-card { display: flex; flex-direction: column; }
.res-card h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.res-card p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0.9rem; }
.res-topic {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oak-700);
  background: var(--oak-100);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  margin-bottom: 0.8rem;
  align-self: flex-start;
}
:root.theme-dark .res-topic { background: rgba(171, 188, 118, 0.15); color: var(--oak-200); }
.res-src { margin-top: auto; font-size: 0.88rem; color: var(--ink-soft); }
.res-src a { font-weight: 600; }
.res-card[hidden] { display: none; }

.emergency-block {
  background: var(--jasper-50);
  border: 2px solid var(--jasper-300);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  margin-bottom: 2.2rem;
}
:root.theme-dark .emergency-block { background: rgba(222, 155, 126, 0.1); border-color: var(--jasper-500); }
.emergency-block h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.emergency-block h2 svg { width: 24px; height: 24px; color: var(--jasper-600); flex-shrink: 0; }
:root.theme-dark .emergency-block h2 svg { color: var(--jasper-300); }
.emergency-block ul { list-style: none; display: grid; gap: 6px; margin-top: 0.7rem; }
.emergency-block strong { color: var(--ink-strong); }

/* ----------------------------------------------------------------------------
   24. Dark-mode selector-level contrast sweep (accents re-pointed)
---------------------------------------------------------------------------- */
:root.theme-dark .eyebrow { color: var(--poppy-300); }
:root.theme-dark .brand-tag { color: var(--poppy-300); }
:root.theme-dark .chip svg { color: var(--poppy-300); }
:root.theme-dark .about-points svg { color: var(--poppy-300); }
:root.theme-dark .qa-card .qa-arrow { color: var(--jasper-300); }
:root.theme-dark .icon-tile { background: rgba(222, 155, 126, 0.14); color: var(--jasper-200); }
:root.theme-dark .provider-role { color: var(--poppy-300); }
:root.theme-dark .contact-row svg { color: var(--jasper-300); }
:root.theme-dark .feature-item svg { color: var(--jasper-300); }
:root.theme-dark .faq-q .faq-icon { color: var(--jasper-300); }
:root.theme-dark .form-card h3 svg { color: var(--jasper-300); }
:root.theme-dark .res-src a { color: var(--jasper-200); }
:root.theme-dark .hours-table th { color: var(--ink-strong); }
:root.theme-dark .gallery-cap { background: rgba(34, 23, 18, 0.82); color: #F7ECE1; }
:root.theme-dark .skip-link { background: var(--poppy-400); color: #2B1206; }

/* ----------------------------------------------------------------------------
   25. Responsive
---------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .btn-call-header { display: none; }
}
/* Spanish nav labels (Conózcanos, Nuestra Oficina, Formularios…) run ~25% wider
   than English, so the full ES nav + call button can't fit the 1220px header cap
   at any width, and the ES nav alone overflows the viewport below ~1260px. For ES
   we therefore drop the header call button (the number still lives in the hero,
   the contact section and the drawer) and fall back to the burger menu earlier.
   EN keeps its tighter breakpoints unchanged. */
:root[lang="es"] .btn-call-header { display: none; }
@media (max-width: 1260px) {
  :root[lang="es"] .main-nav { display: none; }
  :root[lang="es"] .nav-burger { display: inline-flex; }
}
@media (max-width: 1060px) {
  .main-nav { display: none; }
  .nav-burger { display: inline-flex; }
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: repeat(2, 1fr); }
  .forms-grid, .res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .brand-logo { height: 48px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 17ch; }
  .hero-art { order: -1; min-height: 0; }
  .hero-art > svg.hero-scene { width: min(100%, 440px); }
  .hc-circle { width: min(82vw, 420px); }
  .hero-sun { width: clamp(56px, 14vw, 80px); top: -2%; right: 6%; }
  .about-grid { grid-template-columns: 1fr; }
  .provider-card { position: static; max-width: 420px; margin-inline: auto; }
  .office-teaser { grid-template-columns: 1fr; }
  .office-teaser-photo { max-width: 360px; }
  .visit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 78px; }
}
@media (max-width: 620px) {
  .qa-grid, .svc-grid, .feature-row, .forms-grid, .res-grid { grid-template-columns: 1fr; }
  .hc-circle { width: min(86vw, 360px); }
  .hc-circle { box-shadow: 0 0 0 5px var(--surface-card), 0 0 0 7px rgba(184, 84, 54, 0.20), var(--shadow-card); }
  .gallery-grid { grid-template-columns: 1fr; }
  .g-1, .g-2, .g-3, .g-4 { grid-column: auto; aspect-ratio: 4 / 3; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-mark { width: 52px; height: 47px; }
  .brand-logo { height: 42px; }
  .brand-name { font-size: 1.13rem; white-space: normal; }
  .header-tools .lang-toggle { display: none; } /* drawer carries the toggle on phones */
}

/* print: calm */
@media print {
  .site-header, .mobile-cta-bar, .trust-strap, .load-veil, .topo-field, .hero-rings { display: none !important; }
}

/* ----------------------------------------------------------------------------
   26. Legal pages
---------------------------------------------------------------------------- */
.legal-wrap { max-width: 820px; margin-inline: auto; padding: clamp(2.4rem, 5vw, 4rem) clamp(16px, 4vw, 32px) clamp(3rem, 6vw, 5rem); }
.legal-wrap h1 { margin-bottom: 0.4rem; }
.legal-updated { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 2.2rem; }
.legal-wrap h2 { margin-top: 2.4rem; margin-bottom: 0.7rem; font-size: clamp(1.35rem, 1.4vw + 0.9rem, 1.7rem); }
.legal-wrap h3 { margin-top: 1.5rem; margin-bottom: 0.45rem; }
.legal-wrap p + p { margin-top: 0.85rem; }
.legal-wrap ul { margin: 0.85rem 0 0.85rem 1.4rem; display: grid; gap: 0.5rem; }
.legal-wrap li::marker { color: var(--accent); }
.legal-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; margin-top: 2.6rem; }
.legal-callout {
  background: var(--surface-tint);
  border: 1.5px solid var(--line-soft);
  border-left: 5px solid var(--accent-2);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
}