/* ==========================================================================
   Fayetteville Children's Clinic — styles.css
   Fingerprint: Vollkorn / Work Sans · haymount brick / carolina blue / sage /
   magnolia cream / slate-teal ink · Historic Haymount porch motif ·
   porch-eave split hero · screen-door & swing interactions
   ========================================================================== */

/* ---------- 1. Color ramps + tokens ---------- */
:root {
  /* slate-teal ink (from the clinic's own wordmark, sampled #204855) */
  --ink-50:#EEF4F6; --ink-100:#DCE8EC; --ink-200:#B9D0D8; --ink-300:#8FB1BD;
  --ink-400:#5F8A9A; --ink-500:#3D6B7C; --ink-600:#2C5667; --ink-700:#204855;
  --ink-800:#16333D; --ink-900:#0F242C;
  /* haymount brick / soft coral */
  --brick-50:#FBF1EE; --brick-100:#F6E0DA; --brick-200:#ECC3B8; --brick-300:#DF9F8E;
  --brick-400:#CF7A64; --brick-500:#B85C45; --brick-600:#9C4936; --brick-700:#7E3A2B;
  --brick-800:#5F2C21; --brick-900:#471F17;
  /* carolina blue */
  --car-50:#F0F6FB; --car-100:#DEEBF5; --car-200:#BDD8EB; --car-300:#9CC4E0;
  --car-400:#7BAFD4; --car-500:#5793BE; --car-600:#3F76A0; --car-700:#325E80;
  --car-800:#264760; --car-900:#1B3346;
  /* sage */
  --sage-50:#F2F5F0; --sage-100:#E2EADE; --sage-200:#C6D5BF; --sage-300:#A4BC9B;
  --sage-400:#87A57D; --sage-500:#6B8C61; --sage-600:#54724C; --sage-700:#435C3D;
  --sage-800:#33462F; --sage-900:#253321;
  /* magnolia cream */
  --cream-page:#FAF6EC; --cream-card:#FFFDF7; --cream-deep:#F3ECDA; --cream-parch:#EFE6D0;
  /* brass (est. 1953 plaque) */
  --brass:#B8893B; --brass-deep:#8F6A2C; --brass-pale:#E8D5AE;

  /* surface + ink aliases (dark mode remaps these) */
  --surface-page:var(--cream-page);
  --surface-card:var(--cream-card);
  --surface-raised:#FFFFFF;
  --surface-band:var(--cream-deep);
  --surface-footer:var(--ink-800);
  --text-strong:var(--ink-800);
  --text-body:#2E4750;
  --text-soft:#4C6975;
  --text-invert:#F4EFE2;
  --accent-link:var(--car-700);
  --accent-brick:var(--brick-600);
  --accent-sage:var(--sage-600);
  --accent-brass:var(--brass-deep);
  --border-soft:#E5DCC6;
  --border-card:#EAE2CE;
  --shadow-card:0 2px 6px rgba(32,72,85,.07), 0 14px 34px -18px rgba(32,72,85,.25);
  --shadow-lift:0 4px 10px rgba(32,72,85,.10), 0 22px 44px -20px rgba(32,72,85,.32);
  --focus-ring:var(--car-600);

  --font-display:'Vollkorn', Georgia, 'Times New Roman', serif;
  --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* screen-door spring */
  --spring:cubic-bezier(.34,1.46,.54,1);
  --ease-soft:cubic-bezier(.25,.7,.3,1);

  --header-h:72px;
  --ctabar-h:74px;   /* real sticky Call/Portal bar is ~72px in default text (button content > 44px min) */

  /* illustrated neighborhood map (theme-aware so the SVG needs no night duplicates) */
  --map-land:#F3EAD4; --map-block:#EADFC4; --map-block2:#E5D8BB;
  --map-road:#FFFDF7; --map-edge:#E0D2AF; --map-road2:#FBF3DF;
  --map-green:#C2D5AC; --map-green2:#A7C09A; --map-greendk:#86A57C;
  --map-ink:#3D5963; --map-ink-soft:#6E8A92; --map-route:#B85C45; --map-water:#BBD7DC;

  /* a11y.css is the portable Display & Comfort stylesheet, shared across clinic
     builds. It reads these token names and falls back to a grey/olive palette
     when they're absent — which is what this site was doing. Aliasing them onto
     the FCC ramps themes the dialog in both light and dark for free. */
  --gray-100:var(--surface-band);  --gray-200:var(--border-card);
  --gray-300:var(--border-soft);   --gray-500:var(--text-soft);
  --gray-600:var(--text-soft);     --gray-700:var(--text-body);
  --gray-800:var(--text-body);     --gray-900:var(--text-strong);
  --green-50:var(--surface-band);  --green-600:var(--accent-brick);
  --green-700:var(--accent-brick); --orange-600:var(--accent-brass);
  --radius-sm:8px; --radius-lg:20px;
  --shadow-sm:0 1px 3px rgba(32,72,85,.08); --shadow-xl:var(--shadow-lift);
}

/* native form controls, scrollbars + UA chrome follow the active theme */
:root.theme-light { color-scheme: light; }
:root.theme-dark { color-scheme: dark; }

/* ---------- 2. Dark theme: "porch light at dusk" — var remap ---------- */
:root.theme-dark {
  --surface-page:#0E2129;
  --surface-card:#16323D;
  --surface-raised:#1C3D4A;
  --surface-band:#122A33;
  --surface-footer:#0A1A20;
  --text-strong:#F2ECDC;
  --text-body:#D6DFD9;
  --text-soft:#9FB6BB;
  --text-invert:#F2ECDC;
  --accent-link:#9CC4E0;
  --accent-brick:#DF9F8E;
  --accent-sage:#A4BC9B;
  --accent-brass:#D9B873;
  --border-soft:#27434E;
  --border-card:#2B4A56;
  --shadow-card:0 2px 6px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.55);
  --shadow-lift:0 4px 10px rgba(0,0,0,.36), 0 22px 44px -20px rgba(0,0,0,.6);
  --focus-ring:#9CC4E0;

  /* illustrated map — dusk palette */
  --map-land:#13303A; --map-block:#183843; --map-block2:#1C3D49;
  --map-road:#33555F; --map-edge:#21434E; --map-road2:#2C4E58;
  --map-green:#2C4636; --map-green2:#375240; --map-greendk:#45624D;
  --map-ink:#AFC4C9; --map-ink-soft:#7E9AA1; --map-route:#E2A492; --map-water:#1E4651;
}

/* ---------- 3. Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  scroll-padding-bottom:calc(var(--ctabar-h) + 16px);
  -webkit-text-size-adjust:100%;
}
html[data-motion="reduced"] { scroll-behavior:auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* Display & Comfort text sizes */
html[data-textsize="lg"] { font-size:112.5%; }
html[data-textsize="xl"] { font-size:125%; }
/* Readable text mode */
html[data-readable="on"] body {
  line-height:1.85; letter-spacing:.012em; word-spacing:.06em;
}
html[data-readable="on"] p { margin-bottom:1.25em; }
/* High contrast mode */
html[data-contrast="high"] {
  --text-body:#15272E; --text-soft:#2E4750; --border-soft:#9FB0A4; --border-card:#8FA39A;
}
html[data-contrast="high"].theme-dark, html[data-contrast="high"]:root.theme-dark {
  --text-body:#F7F3E8; --text-soft:#D9E2DC; --border-soft:#5E7E8A; --border-card:#6A8B97;
}
html[data-contrast="high"] a { text-decoration-thickness:2px; }
html[data-contrast="high"] .card, html[data-contrast="high"] .svc-card,
html[data-contrast="high"] .faq-item, html[data-contrast="high"] .testi-card,
html[data-contrast="high"] .sick-card, html[data-contrast="high"] .step,
html[data-contrast="high"] .doc-card, html[data-contrast="high"] .stat,
html[data-contrast="high"] .teach-card, html[data-contrast="high"] .helper-card,
html[data-contrast="high"] .fever-note, html[data-contrast="high"] .form-card,
html[data-contrast="high"] .res-card { border-width:2px; }
/* Hide decorations (calm mode) */
html[data-decor="off"] .decor { display:none !important; }

body {
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent-link); text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-skip-ink:auto; }
a:hover { color:var(--accent-brick); }
main { display:block; }

h1,h2,h3,h4 {
  font-family:var(--font-display); color:var(--text-strong);
  line-height:1.18; margin:0 0 .5em; font-weight:600;
  letter-spacing:-.012em; text-wrap:balance;
  padding-bottom:.08em; /* descender room for Vollkorn y/g/j at clamp extremes */
}
h1 { font-size:clamp(2.3rem, 5.1vw + .7rem, 4.1rem); font-weight:700; letter-spacing:-.022em; line-height:1.08; }
h2 { font-size:clamp(1.7rem, 3vw + .55rem, 2.9rem); letter-spacing:-.018em; line-height:1.12; }
h3 { font-size:clamp(1.2rem, 1.2vw + .8rem, 1.55rem); }
p { margin:0 0 1em; text-wrap:pretty; }

/* editorial drop-cap for a lede paragraph */
.story-lede::first-letter {
  float:left; font-family:var(--font-display); font-weight:700;
  font-size:3.5em; line-height:.72; padding:.04em .12em 0 0; margin-top:.02em;
  color:var(--accent-brick);
}
:root.theme-dark .story-lede::first-letter { color:var(--brick-300); }

/* two-tone heading accents (color play, zero clip risk) */
.tone-brick { color:var(--accent-brick); }
.tone-car { color:var(--car-600); }
:root.theme-dark .tone-car { color:#9CC4E0; }
.tone-sage { color:var(--accent-sage); }
/* single gradient word in hero, padded so paint never clips */
.tone-heritage {
  background:linear-gradient(96deg, var(--brick-600) 8%, var(--brass) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:.1em .15em; margin:-.1em -.15em;
}
:root.theme-dark .tone-heritage {
  background:linear-gradient(96deg, #E8B08A 8%, #E3C685 92%);
  -webkit-background-clip:text; background-clip:text;
}

.eyebrow {
  font-family:var(--font-body); font-size:.82rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-brick);
  display:flex; align-items:center; gap:.55rem; margin-bottom:.85rem;
}
.eyebrow::before { content:""; width:26px; height:2px; background:var(--accent-brass); border-radius:2px; }

.container { width:min(1140px, 92vw); margin-inline:auto; }
section { padding:clamp(3rem, 7vw, 5.5rem) 0; position:relative; }
.section-tight { padding:clamp(2rem, 4.5vw, 3.5rem) 0; }

/* branded text selection — a warm haymount-brick wash instead of the browser's
   default blue; forces both bg and text so it stays legible over dark cards too */
::selection { background:var(--brick-200); color:var(--ink-900); }
:root.theme-dark ::selection { background:var(--ink-500); color:var(--text-strong); }

/* ---------- 4. Focus + skip link + targets ---------- */
:focus-visible {
  outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px;
}
.skip-link {
  position:absolute; left:1rem; top:-100px; z-index:300;
  background:var(--ink-700); color:#fff; padding:.8rem 1.2rem; border-radius:10px;
  font-weight:600; transition:top .15s var(--ease-soft);
}
.skip-link:focus { top:1rem; color:#fff; }
button { font-family:inherit; }
button, .btn, .nav-link, .lang-option, .hc-dot { min-width:24px; min-height:24px; }

/* ---------- 5. Buttons — screen-door spring presses ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer;
  border-radius:14px; padding:.85rem 1.5rem; border:2px solid transparent;
  transition:transform .38s var(--spring), box-shadow .3s var(--ease-soft),
             background-color .2s, color .2s, border-color .2s;
  will-change:transform;
}
.btn:active { transform:scale(.96) translateY(1px); transition-duration:.08s; }
.btn-primary { background:var(--brick-600); color:#FFF8EE; box-shadow:var(--shadow-card); }
.btn-primary:hover { background:var(--brick-700); color:#FFF8EE; transform:translateY(-2px); box-shadow:var(--shadow-lift); }
:root.theme-dark .btn-primary { background:var(--brick-400); color:#27130D; }
:root.theme-dark .btn-primary:hover { background:var(--brick-300); color:#27130D; }
.btn-secondary { background:transparent; color:var(--ink-700); border-color:var(--ink-400); }
.btn-secondary:hover { border-color:var(--ink-600); background:var(--ink-50); color:var(--ink-800); transform:translateY(-2px); }
:root.theme-dark .btn-secondary { color:#DCE8EC; border-color:#5F8A9A; }
:root.theme-dark .btn-secondary:hover { background:#1C3D4A; color:#fff; }
.btn-portal { background:var(--car-600); color:#F4FAFF; }
.btn-portal:hover { background:var(--car-700); color:#F4FAFF; transform:translateY(-2px); box-shadow:var(--shadow-lift); }
:root.theme-dark .btn-portal { background:var(--car-400); color:#0E2129; }
:root.theme-dark .btn-portal:hover { background:var(--car-300); color:#0E2129; }

/* "Pay my bill" gets its own consistent colour on every page (targets the HealowPay link) */
.btn[href*="healowpay"] { background:var(--sage-600); color:#F4FAF0; border-color:transparent; }
.btn[href*="healowpay"]:hover { background:var(--sage-700); color:#F4FAF0; transform:translateY(-2px); box-shadow:var(--shadow-lift); }
:root.theme-dark .btn[href*="healowpay"] { background:var(--sage-400); color:#16240F; }
:root.theme-dark .btn[href*="healowpay"]:hover { background:var(--sage-300); color:#16240F; }

/* ---------- 6. Header ---------- */
.site-header {
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--surface-page) 86%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .28s var(--ease-soft), background-color .28s var(--ease-soft);
}
/* once you scroll off the very top, the header lifts off the page — a touch more
   opacity so content never ghosts through, plus a soft elevation shadow.
   `is-stuck` is toggled by an IntersectionObserver sentinel in app.js. */
.site-header.is-stuck {
  background:color-mix(in srgb, var(--surface-page) 93%, transparent);
  box-shadow:0 6px 22px -14px rgba(32,72,85,.30);
}
:root.theme-dark .site-header.is-stuck { box-shadow:0 8px 24px -14px rgba(0,0,0,.6); }
html[data-motion="reduced"] .site-header { transition:none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition:none; } }
.header-inner {
  display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h); padding-block:.4rem;
}
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.brand-logo { width:236px; max-width:54vw; height:auto; }
:root.theme-dark .brand-logo { filter:brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(420%) hue-rotate(15deg); }
.primary-nav { display:flex; align-items:center; gap:.2rem; }
.nav-link {
  display:inline-block; padding:.55rem .8rem; border-radius:10px;
  color:var(--text-strong); text-decoration:none; font-weight:550; font-size:.98rem;
  transition:background-color .18s, color .18s; white-space:nowrap;
}
.nav-link:hover { background:var(--ink-50); color:var(--ink-800); }
:root.theme-dark .nav-link:hover { background:#1C3D4A; color:#fff; }
.nav-link[aria-current="page"] {
  color:var(--accent-brick); font-weight:700;
  text-decoration:underline; text-decoration-thickness:2.5px; text-underline-offset:6px;
  text-decoration-color:var(--accent-brass);
}
.header-actions { display:flex; align-items:center; gap:.55rem; }
.btn-call-header { padding:.6rem 1.05rem; font-size:.95rem; white-space:nowrap; }

/* language + theme toggles */
.lang-toggle {
  display:inline-flex; border:1.5px solid var(--border-card); border-radius:12px;
  overflow:hidden; background:var(--surface-card);
}
.lang-option {
  appearance:none; border:0; background:transparent; padding:.5rem .7rem;
  font-weight:700; font-size:.85rem; color:var(--text-soft); cursor:pointer;
  transition:background-color .15s, color .15s;
}
.lang-option.lang-active { background:var(--ink-700); color:#FFF; }
:root.theme-dark .lang-option.lang-active { background:var(--car-400); color:#0E2129; }
.theme-toggle {
  appearance:none; border:1.5px solid var(--border-card); background:var(--surface-card);
  border-radius:12px; width:42px; height:38px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; color:var(--text-strong);
  transition:transform .38s var(--spring), background-color .2s;
}
.theme-toggle:hover { transform:translateY(-2px); }
.theme-toggle:active { transform:scale(.94); }
.theme-toggle .icon-moon { display:none; }
:root.theme-dark .theme-toggle .icon-sun { display:none; }
:root.theme-dark .theme-toggle .icon-moon { display:block; }

.hamburger {
  display:none; appearance:none; border:1.5px solid var(--border-card);
  background:var(--surface-card); border-radius:12px; width:46px; height:44px;
  cursor:pointer; align-items:center; justify-content:center; color:var(--text-strong);
}

/* ---------- 7. Mobile drawer (closed = display:none — the island-coast trap) ---------- */
.drawer-overlay {
  position:fixed; inset:0; background:rgba(15,36,44,.45); z-index:190;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease-soft);
}
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(340px, 88vw); z-index:200;
  background:var(--surface-card); box-shadow:-18px 0 50px rgba(15,36,44,.25);
  transform:translateX(102%); transition:transform .32s var(--ease-soft);
  padding:1.2rem 1.4rem 2rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:.4rem;
}
.mobile-drawer[hidden] { display:none; }
.mobile-drawer.open { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.drawer-close {
  appearance:none; border:1.5px solid var(--border-card); background:transparent;
  border-radius:10px; width:44px; height:44px; cursor:pointer; color:var(--text-strong);
  display:inline-flex; align-items:center; justify-content:center;
}
.drawer-link {
  display:block; padding:.85rem 1rem; border-radius:12px; text-decoration:none;
  color:var(--text-strong); font-weight:600; font-size:1.05rem;
}
.drawer-link:hover { background:var(--ink-50); }
:root.theme-dark .drawer-link:hover { background:#1C3D4A; }
.drawer-cta { margin-top:.6rem; }
.drawer-meta { margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--border-soft);
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

/* ---------- 8. Sticky mobile CTA bar ---------- */
.mobile-ctabar {
  position:fixed; left:0; right:0; bottom:0; z-index:110; display:none;
  gap:.5rem; padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface-card) 92%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--border-soft);
}
.mobile-ctabar .btn { flex:1; min-height:44px; padding:.7rem .4rem; font-size:.94rem; }
/* three quick actions (Call · Portal · Forms) get tight on the narrowest phones,
   and Spanish "Formularios" is long — drop the icons and shrink so all three
   labels stay uncramped rather than clipping. */
@media (max-width:360px) {
  .mobile-ctabar { gap:.4rem; padding-inline:.5rem; }
  .mobile-ctabar .btn { padding:.66rem .3rem; font-size:.85rem; }
  .mobile-ctabar .btn svg { display:none; }
}

/* ---------- 9. HERO — porch portrait + family carousel ---------- */
.hero { padding:clamp(1rem, 2.4vw, 1.9rem) 0 0; overflow:visible; position:relative; isolation:isolate; }
.hero-bg {
  position:absolute; inset:0 0 auto; width:100%; height:118%; z-index:-1;
  pointer-events:none; opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,#000 64%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 64%,transparent 100%);
}
.hero-sun { animation:heroSunBreathe 11s ease-in-out infinite; transform-origin:center; }
@keyframes heroSunBreathe { 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }
/* A swallow crossing the hero sky — the waypoint path carries it from the
   lower-left up to the upper-right, banking gently as it climbs. */
/* Base transform is the resting pose used whenever motion is off — parked
   mid-sky so calm mode still gets a gliding bird instead of an empty hero. */
.hero-fly { animation:heroFly 24s ease-in-out infinite; transform:translate(1010px,150px) rotate(4deg); }
@keyframes heroFly {
  0%   { transform:translate(-50px,260px) rotate(-6deg) scale(.9); opacity:0; }
  7%   { opacity:.95; }
  20%  { transform:translate(300px,168px) rotate(5deg) scale(1); }
  38%  { transform:translate(640px,226px) rotate(-5deg) scale(1); }
  56%  { transform:translate(980px,128px) rotate(6deg) scale(1); }
  76%  { transform:translate(1290px,182px) rotate(-3deg) scale(1); opacity:.95; }
  100% { transform:translate(1540px,108px) rotate(4deg) scale(.95); opacity:0; }
}
.bird-scale { transform:scale(0.92); }
/* Northern Cardinal plumage — layered crimson, black face mask, coral beak, cream catchlight. */
.card-body   { fill:#C0392B; }
.card-crest  { fill:#A82C22; }
.card-tail   { fill:#9A2A21; }
.card-wing-c { fill:#B23328; }  /* wing coverts */
.card-wing-p { fill:#7E2118; }  /* primary feathers (darker) */
.card-wing-far-p { fill:#6E1D15; opacity:.9; }
.card-mask   { fill:#26150F; }
.card-beak   { fill:#E68A3D; }
.card-eye    { fill:#26150F; }
.card-eye-hl { fill:#FBF1EE; }
/* Wing-beat: the wing pivots at the shoulder through a full arc (raised upstroke to a
   forward-down power stroke) while a subtle body bob rises on the downstroke — real flight,
   not a flutter. The far wing trails a beat behind for depth. Base pose (used when motion is
   off) keeps the wing gently raised. */
.hero-fly .bird-wing { transform-box:fill-box; transform-origin:right bottom; }
.hero-fly .card-wing     { transform:rotate(18deg); animation:cardFlap .85s ease-in-out infinite; }
.hero-fly .card-wing-far { transform:rotate(14deg); animation:cardFlapFar .85s ease-in-out infinite; animation-delay:-.05s; }
/* Positive rotation lifts the wing up-and-forward; the beat lifts it high then sweeps it
   back to a near-horizontal glide, so it never folds down into the tail. */
@keyframes cardFlap    { 0%,100% { transform:rotate(-6deg); } 46% { transform:rotate(43deg); } }
@keyframes cardFlapFar { 0%,100% { transform:rotate(-2deg); } 46% { transform:rotate(33deg); } }
.card-bob { animation:cardBob .9s ease-in-out infinite; }
@keyframes cardBob { 0%,100% { transform:translateY(0.7px); } 46% { transform:translateY(-0.7px); } }
/* On the dusk sky, brighten the red so the bird pops against the navy. */
:root.theme-dark .card-body   { fill:#D6473A; }
:root.theme-dark .card-crest  { fill:#C13A2E; }
:root.theme-dark .card-tail   { fill:#B8342A; }
:root.theme-dark .card-wing-c { fill:#CB4034; }
:root.theme-dark .card-wing-p { fill:#9A2C22; }
:root.theme-dark .card-wing-far-p { fill:#8A2820; }
:root.theme-dark .card-beak   { fill:#F0A24E; }
.hero-petals .petal { animation:heroPetal 14s linear infinite; opacity:0; }
.hero-petals .p1 { --px:420px; }
.hero-petals .p2 { --px:820px; animation-delay:-5s; }
.hero-petals .p3 { --px:1120px; animation-delay:-9s; }
@keyframes heroPetal {
  0%{ transform:translate(var(--px,600px),-20px) rotate(0); opacity:0; }
  12%{ opacity:.85; } 100%{ transform:translate(calc(var(--px,600px) - 90px),360px) rotate(220deg); opacity:0; }
}
.hero-grid {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center; position:relative; z-index:1;
}
.hero-copy { position:relative; padding-top:clamp(.7rem, 1.6vw, 1.2rem); }
.hero-eave { /* illustrated portico eave over the headline, fern hanging from its right end */
  position:absolute; top:-12px; left:-6px; width:min(320px, 66%); height:auto; opacity:.95;
  pointer-events:none; z-index:0;
}
/* Keep the headline (and the rest of the copy) above the hanging plant so the fronds
   never obscure the letters, whatever the heading length or viewport. */
.hero-copy h1, .hero-copy .hero-sub, .hero-copy .hero-ctas, .hero-copy .hero-underlinks { position:relative; z-index:1; }
.fern-sway { transform-origin:50% 6px; animation:fernSway 12s ease-in-out infinite alternate; }
@keyframes fernSway { from { transform:rotate(-2.4deg); } to { transform:rotate(2.6deg); } }

/* Extra top space drops the headline clear of the hanging plant (the eave stays anchored
   to the top, so this widens the gap). Scales with viewport so the fern — whose size is a
   % of the column — never reaches the letters. */
.hero h1 { margin-top:clamp(3rem, 4.8vw, 4.35rem); max-width:14ch; font-size:clamp(2.4rem, 4.7vw + .5rem, 3.9rem); }
.hero-sub { font-size:clamp(1.02rem, 1vw + .78rem, 1.24rem); line-height:1.5; max-width:48ch; color:var(--text-body); margin-top:.9rem; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.15rem; }
.hero-underlinks { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; margin-top:1.05rem; }
.hero-note { margin-top:1rem; font-size:.92rem; color:var(--text-soft); display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; width:fit-content; transition:color .2s; }
.hero-underlinks .hero-note { margin-top:0; }
a.hero-note:hover { color:var(--accent-brick); }
.hero-note-arrow { opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .25s var(--spring); }
a.hero-note:hover .hero-note-arrow, a.hero-note:focus-visible .hero-note-arrow { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .hero-note-arrow { transition:none; } }

/* photo in arched keepsake mat */
.hero-photo { position:relative; }
.hero-arch {
  position:relative; border-radius:200px 200px 22px 22px; overflow:hidden;
  border:10px solid var(--cream-card);
  outline:1.5px solid var(--border-card);
  box-shadow:var(--shadow-lift);
  background:var(--cream-card);
}
:root.theme-dark .hero-arch { border-color:#1C3D4A; outline-color:#2B4A56; background:#1C3D4A; }
.hero-arch img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.4; }
.hero-plaque {
  position:absolute; left:-14px; bottom:34px; z-index:3;
  display:inline-flex; align-items:center; gap:.55rem;
  background:linear-gradient(145deg, #C99A4B, #8F6A2C);
  color:#FFF7E2; border-radius:12px; padding:.6rem .95rem;
  font-family:var(--font-display); font-weight:700; letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(70,50,10,.35), inset 0 1px 0 rgba(255,247,226,.5);
  transition:transform .4s var(--spring);
}
.hero-plaque:hover { transform:translateY(-3px) rotate(-1deg); }
.hero-plaque .plaque-small { display:block; font-size:.62rem; font-family:var(--font-body); font-weight:700; letter-spacing:.16em; opacity:.92; }
.hero-plaque .plaque-year { display:block; font-size:1.25rem; line-height:1; padding-bottom:.05em; }
.hero-sprig { position:absolute; right:-18px; top:-20px; width:120px; z-index:3; }
.hero-caption { margin-top:.9rem; text-align:center; font-size:.9rem; color:var(--text-soft); }

/* ---------- 10. Trust strap — slow marquee, dogwood separators ---------- */
.trust-strap {
  margin-top:clamp(2rem, 5vw, 3.4rem);
  background:var(--surface-band); border-block:1px solid var(--border-soft);
  overflow:hidden; padding:.8rem 0;
}
.strap-track {
  display:flex; gap:2.6rem; width:max-content;
  animation:strapDrift 80s 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; gap:2.6rem; align-items:center; flex-shrink:0; }
.strap-item { display:flex; gap:2.6rem; align-items:center; white-space:nowrap;
  font-size:.95rem; font-weight:550; color:var(--text-soft); }
.strap-item::before {
  content:""; flex-shrink:0; width:15px; height:15px; background-color:var(--brick-400);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26'%3E%3Cpath d='M0-12C4.6-8.3 4.6-3.7 0-.9-4.6-3.7-4.6-8.3 0-12ZM12 0C8.3 4.6 3.7 4.6.9 0 3.7-4.6 8.3-4.6 12 0ZM0 12C-4.6 8.3-4.6 3.7 0 .9 4.6 3.7 4.6 8.3 0 12ZM-12 0C-8.3-4.6-3.7-4.6-.9 0-3.7 4.6-8.3 4.6-12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26'%3E%3Cpath d='M0-12C4.6-8.3 4.6-3.7 0-.9-4.6-3.7-4.6-8.3 0-12ZM12 0C8.3 4.6 3.7 4.6.9 0 3.7-4.6 8.3-4.6 12 0ZM0 12C-4.6 8.3-4.6 3.7 0 .9 4.6 3.7 4.6 8.3 0 12ZM-12 0C-8.3-4.6-3.7-4.6-.9 0-3.7 4.6-8.3 4.6-12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root.theme-dark .strap-item::before { background-color:var(--brick-300); }

/* static fallback under reduced motion / decor-off */
html[data-motion="reduced"] .strap-track,
html[data-decor="off"] .strap-track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
html[data-motion="reduced"] .strap-item, html[data-decor="off"] .strap-item { white-space:normal; }
html[data-motion="reduced"] .strap-set[aria-hidden="true"],
html[data-decor="off"] .strap-set[aria-hidden="true"] { display:none; }
@media (prefers-reduced-motion: reduce) {
  .strap-track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .strap-item { white-space:normal; }
  .strap-set[aria-hidden="true"] { display:none; }
}

/* ---------- 11. Section breaks — Haymount motif bands ---------- */
.band { display:block; width:100%; height:auto; margin:0; }
.band svg { display:block; width:100%; height:auto; }
.band-flip { transform:scaleY(-1); }
.light-sweep { animation:lightSweep 18s ease-in-out infinite; opacity:.55; }
@keyframes lightSweep { 0%,100% { transform:translateX(-12%);} 50% { transform:translateX(12%);} }
.cloud-a { animation:cloudDrift 44s linear infinite; }
.cloud-b { animation:cloudDrift 62s linear infinite; animation-delay:-20s; }
@keyframes cloudDrift { from { transform:translateX(-8%);} to { transform:translateX(108%);} }
.porch-swingline { transform-origin:top center; animation:fernSway 14s ease-in-out infinite alternate; }

html[data-motion="reduced"] .light-sweep, html[data-motion="reduced"] .cloud-a,
html[data-motion="reduced"] .cloud-b, html[data-motion="reduced"] .porch-swingline,
html[data-motion="reduced"] .hero-fly, html[data-motion="reduced"] .hero-fly .bird-wing, html[data-motion="reduced"] .card-bob,
html[data-motion="reduced"] .hero-petals .petal, html[data-motion="reduced"] .hero-sun,
html[data-motion="reduced"] .fern-sway { animation:none; }
@media (prefers-reduced-motion: reduce) {
  .light-sweep, .cloud-a, .cloud-b, .porch-swingline, .fern-sway { animation:none; }
}

/* theme-conditional motif layers inside inline SVGs */
.motif-day { opacity:1; } .motif-night { opacity:0; }
:root.theme-dark .motif-day { opacity:0; } :root.theme-dark .motif-night { opacity:1; }
.motif-day, .motif-night { transition:opacity .5s var(--ease-soft); }

/* ---------- 12. Heritage section + stat counters ---------- */
.heritage { background:var(--surface-band); }
.heritage-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem, 4vw, 3.2rem); align-items:center; }
.heritage-photo { border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); border:8px solid var(--cream-card); }
:root.theme-dark .heritage-photo { border-color:#1C3D4A; }
.stats-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:2rem; }
.stat {
  background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:16px;
  padding:1.1rem 1rem; text-align:center; box-shadow:var(--shadow-card);
  transition:transform .4s var(--spring), box-shadow .3s;
}
.stat:hover { transform:translateY(-5px) rotate(.4deg); box-shadow:var(--shadow-lift); }
.stat-num { font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--accent-brick); line-height:1.1; padding-bottom:.06em; font-variant-numeric:lining-nums tabular-nums; display:block; }
.stat-label { font-size:.85rem; color:var(--text-soft); font-weight:550; }

/* ---------- 13. Services grid ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.1rem; margin-top:1.6rem; }
.svc-card {
  background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:18px;
  padding:1.4rem 1.3rem 1.3rem; box-shadow:var(--shadow-card); position:relative;
  transition:transform .42s var(--spring), box-shadow .3s, border-color .2s;
  display:flex; flex-direction:column; gap:.45rem; text-decoration:none; color:inherit;
}
.svc-card:hover { transform:translateY(-6px) rotate(-.35deg); box-shadow:var(--shadow-lift); border-color:var(--car-300); color:inherit; }
.svc-card h3 { margin:0; }
.svc-card p { margin:0; font-size:.95rem; color:var(--text-soft); }
.svc-icon {
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--ink-50); color:var(--ink-700); margin-bottom:.4rem;
}
:root.theme-dark .svc-icon { background:#1C3D4A; color:#9CC4E0; }
.svc-more { margin-top:auto; font-weight:600; font-size:.92rem; color:var(--accent-link); display:inline-flex; align-items:center; gap:.3rem; }

/* ---------- 14. Photo feature (well-child / teaching) ---------- */
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem, 4vw, 3rem); align-items:center; }
.feature-photo { border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lift); border:8px solid var(--cream-card); position:relative; }
:root.theme-dark .feature-photo { border-color:#1C3D4A; }
.check-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.55rem; }
.check-list li { display:flex; gap:.6rem; align-items:flex-start; }
.check-list svg { flex-shrink:0; margin-top:.22rem; color:var(--accent-sage); }

/* ---------- 15. Testimonials ---------- */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.2rem; margin-top:1.8rem; align-items:stretch; }
.testi-card {
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:18px;
  padding:1.55rem 1.5rem 1.4rem; box-shadow:var(--shadow-card);
  transition:transform .42s var(--spring), box-shadow .3s;
}
/* slim brass keepsake accent at the top edge */
.testi-card::before {
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--brass), var(--brick-300)); opacity:.55;
}
.testi-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.testi-card .quote-mark { font-family:var(--font-display); font-size:3.1rem; line-height:.72; height:.5em; color:var(--brass); display:block; }
:root.theme-dark .testi-card .quote-mark { color:var(--brass-pale); }
.testi-card blockquote { margin:.5rem 0 0; font-size:1.02rem; line-height:1.5; color:var(--text-body); flex:1; text-wrap:pretty; }
.testi-who {
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink-700); font-size:.92rem;
}
.testi-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--car-100); color:var(--car-700); font-weight:700; font-size:.78rem; letter-spacing:.02em;
}
:root.theme-dark .testi-who { color:#C9D7DC; }
:root.theme-dark .testi-av { background:#1C3D4A; color:#9CC4E0; }

/* ---------- 16. FAQ accordion ---------- */
.faq-list { display:grid; gap:.8rem; margin-top:1.4rem; max-width:820px; }
.faq-item { background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:16px; overflow:hidden; }
.faq-q {
  width:100%; appearance:none; background:transparent; border:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.05rem 1.25rem; text-align:left; font-size:1.02rem; font-weight:650;
  color:var(--text-strong); font-family:var(--font-body); min-height:44px;
}
.faq-q:hover { background:var(--ink-50); }
:root.theme-dark .faq-q:hover { background:#1C3D4A; }
/* .faq-item is overflow:hidden to round the hover fill, which clipped the global
   outward focus ring off every question. Draw this one inside the button. */
.faq-q:focus-visible { outline-offset:-3px; border-radius:14px; }
.faq-q .chev { transition:transform .3s var(--spring); flex-shrink:0; color:var(--accent-brick); }
.faq-q[aria-expanded="true"] .chev { transform:rotate(180deg); }
/* max-height:0 hides a panel visually but leaves it in the accessibility tree —
   all eight answers were read out while every button reported aria-expanded="false".
   visibility flips at the end of the collapse so the slide still animates. */
.faq-a { padding:0 1.25rem; max-height:0; overflow:hidden; visibility:hidden;
         transition:max-height .34s var(--ease-soft), padding .25s, visibility 0s .34s; }
.faq-a.open { padding:0 1.25rem 1.15rem; max-height:30rem; visibility:visible; transition-delay:0s; }
html[data-motion="reduced"] .faq-a { transition:none; }
.faq-a p { margin-bottom:.5em; font-size:.98rem; }

/* ---------- 17. Contact / hours / map ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem, 3.5vw, 2.6rem); align-items:start; }
.hours-card, .visit-card {
  background:var(--surface-card); border:1.5px solid var(--border-card);
  border-radius:18px; padding:1.5rem 1.45rem; box-shadow:var(--shadow-card);
}
.hours-table { width:100%; border-collapse:collapse; margin-top:.6rem; }
.hours-table th, .hours-table td { text-align:left; padding:.5rem .25rem; border-bottom:1px dashed var(--border-soft); font-size:.98rem; font-variant-numeric:tabular-nums; }
.hours-table th { font-weight:600; color:var(--text-strong); }
.hours-note { font-size:.88rem; color:var(--text-soft); margin-top:.7rem; }
.status-pill {
  display:inline-flex; align-items:center; gap:.45rem; border-radius:999px;
  font-size:.85rem; font-weight:700; padding:.35rem .85rem; margin-left:.6rem; vertical-align:middle;
}
.status-pill::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.status-pill.open { background:var(--sage-100); color:var(--sage-800); }
.status-pill.closed { background:var(--brick-100); color:var(--brick-800); }
:root.theme-dark .status-pill.open { background:#21392B; color:#BCD9B4; }
:root.theme-dark .status-pill.closed { background:#42231C; color:#EFB7A9; }

.map-frame {
  border-radius:18px; overflow:hidden; border:1.5px solid var(--border-card);
  box-shadow:var(--shadow-card); background:var(--surface-card);
}
.map-frame svg { display:block; width:100%; height:auto; }
.map-actions { display:flex; gap:.7rem; margin-top:.9rem; flex-wrap:wrap; }
/* full-width location card: illustrated map beside the address */
.visit-card--map {
  display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; overflow:hidden;
  margin-top:clamp(1.4rem,3vw,2rem); align-items:stretch;
}
.visit-card--map .map-frame { border:0; border-radius:0; box-shadow:none; border-right:1.5px solid var(--border-card); }
.visit-card--map .map-frame svg { display:block; width:100%; height:auto; }
.visit-card--map .vc-info { padding:clamp(1.5rem,3.2vw,2.3rem); display:flex; flex-direction:column; justify-content:center; }
.visit-card--map .vc-info h3 { margin-bottom:.55rem; }
.visit-card--map .map-cap { font-style:italic; margin:.15rem 0 1.1rem; }
.visit-card--map .map-actions { margin-top:1.1rem; }
.contact-nap { font-style:normal; line-height:1.7; font-size:.96rem; color:var(--text-body); font-variant-numeric:tabular-nums; }
.contact-nap a { font-weight:600; color:var(--accent-link); }
@media (max-width:860px) {
  .visit-card--map { grid-template-columns:1fr; }
  .visit-card--map .map-frame { border-right:0; border-bottom:1.5px solid var(--border-card); }
  .visit-card--map .map-frame svg { height:auto; }
}
.alert-card {
  border-radius:16px; padding:1.05rem 1.2rem; margin-top:1rem;
  background:var(--car-50); border:1.5px solid var(--car-200); font-size:.95rem;
}
:root.theme-dark .alert-card { background:#16323D; border-color:#2B5A70; }

/* ==========================================================================
   18. Footer — "a warm afternoon in Historic Haymount"
   A) illustrated, living scene (reuses the homepage clinic watercolour)
   B) cream functional panel tucked under a curved seam + floral medallion
   ========================================================================== */
.site-footer { background:var(--surface-page); color:var(--text-body); margin-top:0; }

/* ---- A. Illustrated scene ---- */
.footer-scene {
  position:relative; width:100%; overflow:hidden; isolation:isolate;
  /* track the illustration's own aspect (~43vw) so the full scene — including the
     three-name sign near the bottom — shows with minimal cropping across widths */
  height:clamp(440px, 43vw, 660px);
  background:linear-gradient(180deg,#dce8ef 0%,#e7eee4 60%,#e3ead9 100%);
}
/* The sky behind the illustration shows while it loads and wherever cover
   letterboxes it — a daytime blue against the dusk footer without this. */
:root.theme-dark .footer-scene { background:linear-gradient(180deg,#12303B 0%,#14313A 60%,#132C33 100%); }
.footer-illust {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%; display:block; z-index:0;
  transition:filter .7s var(--ease-soft);
}
/* warm afternoon sky wash (peach high, fading to clear) */
.footer-sky {
  position:absolute; left:0; right:0; top:0; height:64%; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 86% at 82% 6%, rgba(255,193,143,.55), rgba(255,193,143,0) 52%),
    linear-gradient(180deg, rgba(255,208,166,.5) 0%, rgba(255,226,188,.16) 40%, rgba(208,228,238,0) 82%);
  mix-blend-mode:soft-light;
}
/* dappled sunlight filtering through the canopy — slow drift + breathe */
.footer-sunlight {
  position:absolute; left:0; right:0; top:0; height:72%; z-index:1; pointer-events:none;
  background:
    radial-gradient(20% 24% at 26% 16%, rgba(255,238,180,.62), rgba(255,238,180,0) 62%),
    radial-gradient(14% 18% at 46% 9%, rgba(255,244,200,.5), rgba(255,244,200,0) 64%),
    radial-gradient(18% 22% at 67% 20%, rgba(255,234,172,.6), rgba(255,234,172,0) 62%),
    radial-gradient(12% 16% at 84% 12%, rgba(255,240,190,.48), rgba(255,240,190,0) 64%);
  mix-blend-mode:screen; transform-origin:center top;
  animation:footSunDrift 24s ease-in-out infinite alternate;
}
@keyframes footSunDrift { 0% { transform:translateX(-1.5%) scale(1); opacity:.6; } 100% { transform:translateX(2%) scale(1.05); opacity:1; } }

/* window / porch glow over the cottage — pulses, brightens on hover */
.footer-glow {
  position:absolute; z-index:1; pointer-events:none;
  left:17%; top:48%; width:min(20vw,290px); aspect-ratio:3 / 2; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(255,214,138,.85), rgba(255,214,138,0) 68%);
  mix-blend-mode:screen; opacity:.3;
  transition:opacity .6s var(--ease-soft);
  animation:footGlow 7.5s ease-in-out infinite;
}
@keyframes footGlow { 0%,100% { opacity:.24; } 50% { opacity:.48; } }
/* the scene gently "wakes" when you lean in (desktop hover, progressive) */
.footer-scene:hover .footer-glow { opacity:.85; }
.footer-scene:hover .footer-illust { filter:brightness(1.045) saturate(1.06); }
.footer-scene:hover .foot-bf-body { animation-duration:.15s; }
.footer-scene:hover .foot-mote { animation-duration:3.4s; }

/* living overlay */
.footer-life { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.foot-cyclist { filter:drop-shadow(0 3px 2px rgba(40,30,18,.16)); }

/* cyclist — long, calm pass then a rest off-screen (no visible jump) */
.foot-cyclist { transform:translateX(-300px); animation:footRide 38s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes footRide {
  0%   { transform:translateX(-300px); }
  52%  { transform:translateX(2140px); }
  100% { transform:translateX(2140px); }
}
.foot-wheel { transform-box:fill-box; transform-origin:center; animation:footSpin 1.15s linear infinite; }
@keyframes footSpin { to { transform:rotate(360deg); } }
/* mobile: short local ride instead of the long cross-scene travel */
@keyframes footRideMobile {
  0%   { transform:translateX(40px); }    /* off-screen left */
  60%  { transform:translateX(1560px); }  /* forward across the path, off-screen right */
  100% { transform:translateX(1560px); }  /* rest off-screen, then reset (never rides backward) */
}

/* butterflies — irregular flutter + wing flap */
.foot-bf { pointer-events:auto; }
.foot-bf-body { transform-box:fill-box; transform-origin:center; animation:footFlap .26s ease-in-out infinite; }
@keyframes footFlap { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(.5); } }
.foot-bf1 { animation:footFly1 17s ease-in-out infinite; }
.foot-bf2 { animation:footFly2 21s ease-in-out infinite; }
.foot-bf2 .foot-bf-body { animation-duration:.3s; }
.foot-bf:hover .foot-bf-body { animation-duration:.14s; }
@keyframes footFly1 {
  0%   { transform:translate(300px,560px) rotate(-6deg); }
  25%  { transform:translate(372px,506px) rotate(9deg); }
  50%  { transform:translate(244px,540px) rotate(-4deg); }
  75%  { transform:translate(332px,602px) rotate(7deg); }
  100% { transform:translate(300px,560px) rotate(-6deg); }
}
@keyframes footFly2 {
  0%   { transform:translate(1520px,584px) rotate(5deg); }
  30%  { transform:translate(1436px,520px) rotate(-8deg); }
  60%  { transform:translate(1566px,560px) rotate(6deg); }
  100% { transform:translate(1520px,584px) rotate(5deg); }
}

/* distant drifting birds */
.foot-birds { animation:footDrift 26s ease-in-out infinite; }
@keyframes footDrift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(130px,-20px); } }

/* paper plane — one slow curved pass, then a long rest */
.foot-plane { animation:footPlane 32s ease-in-out infinite; }
@keyframes footPlane {
  0%   { transform:translate(1700px,150px) rotate(8deg); opacity:0; }
  5%   { opacity:1; }
  24%  { transform:translate(700px,232px) rotate(-10deg); opacity:1; }
  30%  { transform:translate(420px,300px) rotate(-20deg); opacity:0; }
  100% { transform:translate(420px,300px) rotate(-20deg); opacity:0; }
}

/* soft light motes (daytime fireflies) */
.foot-mote { transform-box:fill-box; transform-origin:center; animation:footMote 6s ease-in-out infinite; }
.foot-mote.m2 { animation-duration:7.6s; animation-delay:-2.4s; }
.foot-mote.m3 { animation-duration:5.3s; animation-delay:-3.7s; }
@keyframes footMote { 0%,100% { opacity:0; transform:translateY(6px); } 45% { opacity:.5; } 80% { opacity:0; transform:translateY(-14px); } }

/* dogwood blossoms drifting on the breeze */
.foot-petals { filter:drop-shadow(0 1.5px 1.5px rgba(74,52,34,.24)); }
.foot-petal { transform-box:fill-box; transform-origin:center; will-change:transform; }
.foot-petal.fp1 { animation:footPetal1 22s linear infinite; }
.foot-petal.fp2 { animation:footPetal2 27s linear infinite; animation-delay:-8s; }
.foot-petal.fp3 { animation:footPetal3 19s linear infinite; animation-delay:-14s; }
.foot-petal.fp4 { animation:footPetal4 25s linear infinite; animation-delay:-4s; }
@keyframes footPetal1 { 0% { transform:translate(300px,-60px) rotate(0deg); opacity:0; } 10% { opacity:1; } 86% { opacity:.92; } 100% { transform:translate(424px,800px) rotate(264deg); opacity:0; } }
@keyframes footPetal2 { 0% { transform:translate(820px,-60px) rotate(20deg); opacity:0; } 12% { opacity:.95; } 86% { opacity:.85; } 100% { transform:translate(700px,800px) rotate(-208deg); opacity:0; } }
@keyframes footPetal3 { 0% { transform:translate(1300px,-60px) rotate(-10deg); opacity:0; } 12% { opacity:1; } 86% { opacity:.9; } 100% { transform:translate(1446px,800px) rotate(236deg); opacity:0; } }
@keyframes footPetal4 { 0% { transform:translate(1650px,-60px) rotate(0deg); opacity:0; } 12% { opacity:.92; } 86% { opacity:.8; } 100% { transform:translate(1532px,800px) rotate(-262deg); opacity:0; } }

/* swaying foreground blooms */
.foot-sway { transform-box:fill-box; transform-origin:bottom center; animation:footSway 5s ease-in-out infinite; }
.foot-sway.sway-2 { animation-duration:6.2s; animation-delay:-1.5s; }
.foot-sway.sway-3 { animation-duration:5.6s; animation-delay:-2.8s; }
@keyframes footSway { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(2deg); } }

/* ---- B. Functional cream panel ---- */
.footer-panel {
  position:relative; z-index:3; background:var(--surface-page);
  border-radius:clamp(26px,4vw,50px) clamp(26px,4vw,50px) 0 0;
  margin-top:calc(-1 * clamp(26px,4vw,50px));
  box-shadow:0 -22px 42px -30px rgba(32,72,85,.55);
}
.footer-panel::before {
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--brick-400), var(--brass), var(--brick-400)); opacity:.5;
}
.footer-inner { padding:clamp(2.7rem,5vw,3.7rem) 0 1.7rem; position:relative; z-index:1; }
/* subtle botanical in the far bottom-right corner of the panel */
.footer-flora { position:absolute; right:clamp(8px,3vw,40px); bottom:6px; width:clamp(72px,7vw,104px); height:auto; opacity:.42; z-index:0; pointer-events:none; }

.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.5fr;
  gap:clamp(1.4rem,3vw,2.6rem); align-items:start;
}

/* brand column */
.footer-brand { max-width:34ch; }
.footer-brandmark { width:232px; max-width:78%; height:auto; display:block; }
.footer-tagline { color:var(--text-soft); font-size:.97rem; line-height:1.55; margin:.95rem 0 1.15rem; max-width:30ch; }
.footer-nap { font-style:normal; display:grid; gap:.55rem; font-size:.95rem; color:var(--text-body); font-variant-numeric:tabular-nums; }
.fn-row { display:flex; gap:.6rem; align-items:flex-start; line-height:1.45; }
.fn-row > svg { width:18px; height:18px; flex:0 0 18px; margin-top:.16rem; color:var(--accent-brick); }
.fn-row a { color:var(--text-body); font-weight:650; }
.fn-row a:hover { color:var(--accent-brick); }
.fn-fax { color:var(--text-soft); }
.footer-social {
  display:inline-grid; place-items:center; width:40px; height:40px; margin-top:1.15rem;
  border-radius:50%; background:var(--ink-50); color:var(--ink-700);
  transition:transform .35s var(--spring), background .25s, color .25s;
}
.footer-social svg { width:20px; height:20px; }
.footer-social:hover { background:var(--brick-600); color:#fff; transform:translateY(-3px) rotate(-4deg); }

/* nav columns (static headings on desktop, accordions on mobile) */
.footer-acc { border:0; }
.footer-acc > summary {
  list-style:none; cursor:default; display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.95rem;
}
.footer-acc > summary::-webkit-details-marker { display:none; }
.footer-acc > summary > span {
  position:relative; padding-bottom:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--text-strong);
}
.footer-acc > summary > span::after {
  content:""; position:absolute; left:0; bottom:0; width:30px; height:2.5px; border-radius:2px;
  background:var(--accent-brick);
}
.footer-chev { width:20px; height:20px; color:var(--accent-brick); display:none; flex:0 0 20px; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.96rem; }
.footer-links a { color:var(--text-body); text-decoration:none; transition:color .2s, padding .2s; }
.footer-links a:hover { color:var(--accent-brick); padding-left:.2rem; }
/* desktop: columns are headings, not collapsible (links always shown) */
@media (min-width:701px) {
  .footer-acc > summary { pointer-events:none; }
  .footer-acc > .footer-links { display:grid !important; }
}

/* action column */
.footer-action { position:relative; display:flex; flex-direction:column; gap:.7rem; }
.footer-pill { width:100%; padding:.85rem 1.2rem; border-radius:999px; font-size:1.02rem; }
/* footer portal CTA → muted gold (spec) */
.footer-action .btn-portal { background:#C9A24E; color:#3A2A12; }
.footer-action .btn-portal:hover { background:#B8893B; color:#27190A; }
:root.theme-dark .footer-action .btn-portal { background:#CFA855; color:#27190A; }
:root.theme-dark .footer-action .btn-portal:hover { background:#E0BD6E; color:#27190A; }
.footer-script {
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.2rem; line-height:1.3; color:var(--accent-brick); margin:.55rem 0 .25rem; text-wrap:balance;
}

/* privacy badge + legal strip */
.footer-privacy {
  margin:clamp(1.9rem,4vw,2.7rem) 0 0; padding:.82rem 1.1rem; border-radius:12px;
  background:var(--cream-deep); border:1px solid var(--border-card);
  font-size:.86rem; color:var(--text-soft); text-align:center; line-height:1.5;
}
.footer-meta {
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--border-soft);
  display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; align-items:center; font-size:.85rem; color:var(--text-soft);
}
.footer-legal { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; }
.footer-meta a { color:var(--text-soft); text-decoration:none; }
.footer-meta a:hover, .footer-meta a:focus-visible { color:var(--accent-brick); text-decoration:underline; text-underline-offset:3px; }
.footer-credit { margin-left:auto; }

/* footer dark-mode adjustments (cream cards + dark logo would clash) */
:root.theme-dark .footer-brandmark { filter:brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(420%) hue-rotate(15deg); }
:root.theme-dark .footer-privacy { background:var(--surface-card); border-color:var(--border-card); }
:root.theme-dark .footer-social { background:var(--surface-card); color:var(--text-strong); }
:root.theme-dark .footer-social:hover { background:var(--brick-400); color:#27130D; }

/* pause the whole scene while it's scrolled off-screen (JS-toggled; saves CPU/battery) */
.site-footer.footer-paused .footer-life *,
.site-footer.footer-paused .footer-glow,
.site-footer.footer-paused .footer-sunlight { animation-play-state:paused; }

/* reduced motion / decor-off → polished still illustration */
html[data-motion="reduced"] .footer-life *,
html[data-decor="off"] .footer-life * { animation:none !important; }
html[data-motion="reduced"] .footer-glow,
html[data-decor="off"] .footer-glow { animation:none; opacity:.34; }
html[data-motion="reduced"] .footer-sunlight { animation:none; opacity:.8; }
html[data-decor="off"] .footer-life { display:none; }
/* park the cyclist on the path when motion is off (still scene reads complete) */
html[data-motion="reduced"] .foot-cyclist { transform:translateX(360px); }
@media (prefers-reduced-motion: reduce) {
  .footer-life *, .footer-glow, .footer-sunlight { animation:none !important; }
  .footer-glow { opacity:.34; }
  .foot-cyclist { transform:translateX(360px); }
}

/* footer responsive */
@media (max-width:860px) {
  .footer-scene { height:clamp(330px,42vw,430px); }
  .footer-flora { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; max-width:none; }
  .footer-action { grid-column:1 / -1; }
  .footer-credit { margin-left:0; }
}
@media (max-width:700px) {
  .footer-scene { height:clamp(280px,62vw,340px); }
  .footer-illust { object-position:38% 50%; }
  .foot-cyclist { animation:footRideMobile 15s linear infinite; }
  .footer-grid { grid-template-columns:1fr; gap:0; }
  .footer-brand { text-align:center; margin-inline:auto; }
  .footer-brand .footer-brandmark { margin-inline:auto; }
  .footer-brand .footer-tagline { margin-inline:auto; }
  .footer-brand .footer-nap { justify-items:center; }
  .footer-brand .fn-row { justify-content:center; text-align:left; }
  .footer-social { margin-inline:auto; }
  .footer-acc { border-top:1px solid var(--border-soft); }
  .footer-acc > summary { cursor:pointer; padding:.95rem 0; margin-bottom:0; }
  .footer-acc > summary > span { padding-bottom:0; }
  .footer-acc > summary > span::after { display:none; }
  .footer-chev { display:block; transition:transform .3s var(--spring); }
  .footer-acc[open] .footer-chev { transform:rotate(180deg); }
  .footer-links { padding:0 0 1.05rem; }
  .footer-action { border-top:1px solid var(--border-soft); padding-top:1.15rem; margin-top:.2rem; }
  /* Centred + wrapping: without balancing, these strand a single word
     ("Terms", "reserved.") alone on a second line. */
  .footer-meta { justify-content:center; text-align:center; }
  .footer-meta .footer-copy { text-wrap:balance; }
  /* Four links wrap 3+1 at full width; capping the row forces a tidy 2+2.
     rem-based so it re-breaks sensibly at the larger Display & Comfort sizes. */
  .footer-legal { justify-content:center; width:100%; max-width:17rem; margin-inline:auto; }
  .footer-credit { width:100%; text-align:center; }
}
html[data-motion="reduced"] .footer-acc > summary,
html[data-motion="reduced"] .footer-chev { transition:none; }

/* ---------- 19. Reveals — lace-curtain entrances ---------- */
.reveal { opacity:0; transform:translateY(16px); }
.reveal-in {
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-soft), transform .7s var(--spring);
}
.reveal-grid > * { opacity:0; transform:translateY(16px); }
.reveal-grid.reveal-in > * { opacity:1; transform:none; transition:opacity .65s var(--ease-soft), transform .65s var(--spring); }
.reveal-grid.reveal-in > *:nth-child(2) { transition-delay:.08s; }
.reveal-grid.reveal-in > *:nth-child(3) { transition-delay:.16s; }
.reveal-grid.reveal-in > *:nth-child(4) { transition-delay:.24s; }
.reveal-grid.reveal-in > *:nth-child(5) { transition-delay:.32s; }
.reveal-grid.reveal-in > *:nth-child(6) { transition-delay:.4s; }
.reveal-grid.reveal-in > *:nth-child(7) { transition-delay:.48s; }
.reveal-grid.reveal-in > *:nth-child(8) { transition-delay:.56s; }
html[data-motion="reduced"] .reveal, html[data-motion="reduced"] .reveal-grid > * {
  opacity:1 !important; transform:none !important; transition:none !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-grid > * { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- 20. Page-head (subpages) + breadcrumbs ---------- */
.page-head { padding:clamp(2rem, 5vw, 3.4rem) 0 1rem; }
.breadcrumbs { font-size:.88rem; color:var(--text-soft); margin-bottom:1rem; }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:0; }
.breadcrumbs li + li::before { content:"›"; margin-right:.45rem; color:var(--text-soft); }

/* ---------- 21. Team cards ---------- */
/* Portrait-left roster card. The photo is a framed thumbnail rather than the
   headline, so the name and credentials lead — and the three source portraits'
   mismatched studio backdrops stop competing with each other. */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); gap:clamp(1rem, .7rem + 1vw, 1.5rem); margin-top:1.8rem; }
.doc-card {
  display:flex; gap:1.05rem; align-items:flex-start; padding:1.15rem;
  background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:20px;
  box-shadow:var(--shadow-card);
  transition:transform .45s var(--spring), box-shadow .3s, border-color .25s;
}
.doc-card:hover { transform:translateY(-5px) rotate(-.3deg); box-shadow:var(--shadow-lift); border-color:var(--car-300); }
.doc-photo {
  width:clamp(110px, 12vw, 142px); flex:none; aspect-ratio:3/4;
  border-radius:14px; overflow:hidden; background:var(--ink-100); border:1px solid var(--border-soft);
}
.doc-photo img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s var(--ease-soft); }
.doc-card:hover .doc-photo img { transform:scale(1.04); }
.doc-info { min-width:0; display:flex; flex-direction:column; align-self:stretch; padding-top:.15rem; }
.doc-info h3 { font-size:1.16rem; line-height:1.2; margin:0; }
.doc-cred {
  display:block; font-family:var(--font-body); font-size:.69rem; font-weight:750;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-brass); margin-top:.24rem;
}
:root.theme-dark .doc-cred { color:var(--brass-pale); }
.doc-role { color:var(--accent-brick); font-weight:650; font-size:.88rem; margin:.4rem 0 0; }
.doc-bio { font-size:.92rem; color:var(--text-soft); line-height:1.6; margin:.55rem 0 0; }
.doc-line { font-size:.88rem; color:var(--text-soft); line-height:1.55; margin:.5rem 0 0; }
/* Focus-area pills — the old hover-revealed .doc-chip made this content
   invisible until you hovered, and invisible entirely on touch. */
.doc-focus { list-style:none; padding:0; margin:.7rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.doc-focus li {
  font-size:.76rem; font-weight:650; padding:.3rem .62rem; border-radius:999px;
  background:var(--cream-deep); color:var(--ink-700); border:1px solid var(--border-soft);
}
:root.theme-dark .doc-focus li { background:rgba(184,137,59,.14); color:var(--brass-pale); border-color:rgba(184,137,59,.32); }
.doc-facts {
  list-style:none; margin:.85rem 0 0; padding:.85rem 0 0; border-top:1px solid var(--border-soft);
  display:grid; gap:.42rem; font-size:.85rem; color:var(--text-body);
}
.doc-facts li { display:flex; gap:.5rem; align-items:flex-start; }
.doc-facts strong { font-weight:650; color:var(--text-strong); }
.doc-facts svg { flex-shrink:0; margin-top:.2rem; color:var(--car-600); }
:root.theme-dark .doc-facts svg { color:#9CC4E0; }
.doc-actions { margin-top:auto; padding-top:.95rem; display:flex; gap:.45rem; }
.doc-act {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--surface-band); color:var(--ink-700); border:1.5px solid var(--border-card);
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--spring);
}
.doc-act:hover { background:var(--brick-500); color:#fff; border-color:var(--brick-500); transform:translateY(-2px); }
.doc-act svg { width:18px; height:18px; }
:root.theme-dark .doc-act { color:var(--ink-100); }
:root.theme-dark .doc-act:hover { background:var(--brick-400); color:#0E2129; border-color:var(--brick-400); }
/* Home-page preview: same anatomy, tighter, three across. */
.team-grid.is-compact { grid-template-columns:repeat(auto-fit, minmax(288px, 1fr)); }
.team-grid.is-compact .doc-card { gap:.95rem; padding:1rem; }
.team-grid.is-compact .doc-photo { width:clamp(96px, 9.5vw, 118px); }
.team-grid.is-compact .doc-info h3 { font-size:1.05rem; }
.doc-card .svc-more { padding-top:.85rem; }

/* ---------- 22. Forms / patients page ---------- */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1rem; margin-top:1.2rem; }
.form-card {
  display:flex; gap:.85rem; align-items:center; background:var(--surface-card);
  border:1.5px solid var(--border-card); border-radius:16px; padding:1rem 1.1rem;
  text-decoration:none; color:var(--text-strong); font-weight:600; font-size:.97rem;
  box-shadow:var(--shadow-card); transition:transform .4s var(--spring), box-shadow .3s, border-color .2s;
}
.form-card:hover { transform:translateY(-4px); border-color:var(--car-300); box-shadow:var(--shadow-lift); color:var(--text-strong); }
.form-card svg { flex-shrink:0; color:var(--brick-500); }
:root.theme-dark .form-card svg { color:var(--brick-300); }
.form-card .form-kind { display:block; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
.policy-block { background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:18px; padding:1.4rem 1.4rem .9rem; margin-top:1.1rem; box-shadow:var(--shadow-card); }
.policy-block h3 { display:flex; align-items:flex-start; gap:.6rem; }
.policy-block h3 svg { color:var(--accent-sage); flex-shrink:0; margin-top:.18rem; }

/* ---------- 23. Resources hub ---------- */
.filter-row { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 .4rem; }
.filter-chip {
  appearance:none; cursor:pointer; border:1.5px solid var(--border-card);
  background:var(--surface-card); color:var(--text-strong); border-radius:999px;
  padding:.5rem 1.05rem; font-weight:600; font-size:.92rem; min-height:38px;
  transition:transform .35s var(--spring), background-color .2s, color .2s, border-color .2s;
}
.filter-chip:hover { transform:translateY(-2px); border-color:var(--car-400); }
.filter-chip:active { transform:scale(.95); }
.filter-chip[aria-pressed="true"] { background:var(--ink-700); border-color:var(--ink-700); color:#FFF; }
:root.theme-dark .filter-chip[aria-pressed="true"] { background:var(--car-400); border-color:var(--car-400); color:#0E2129; }
.res-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.1rem; margin-top:1.2rem; }
.res-card {
  background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:18px;
  padding:1.3rem 1.25rem; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:.5rem;
  transition:transform .4s var(--spring), box-shadow .3s;
}
.res-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.res-card[hidden] { display:none; }
.res-topic { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-brick); }
.res-card h3 { margin:0; font-size:1.15rem; }
.res-card p { margin:0; font-size:.94rem; color:var(--text-soft); flex-grow:1; }
.res-src { font-size:.88rem; font-weight:600; }
.res-details { margin-top:.4rem; }
/* Was the browser's default ▶ marker, the only native disclosure triangle left
   on the site — the footer accordions already use a drawn chevron. */
.res-details summary {
  cursor:pointer; font-weight:600; color:var(--accent-link); font-size:.92rem;
  padding:.3rem 0; min-height:24px; list-style:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.res-details summary::-webkit-details-marker { display:none; }
.res-details summary::before {
  content:""; flex:none; width:.4em; height:.4em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .3s var(--spring);
}
.res-details[open] summary::before { transform:rotate(45deg); }
html[data-motion="reduced"] .res-details summary::before { transition:none; }
.res-details summary:hover { color:var(--accent-brick); }
.res-details table { width:100%; border-collapse:collapse; margin-top:.5rem; font-size:.9rem; }
.res-details th, .res-details td { text-align:left; padding:.35rem .3rem; border-bottom:1px dashed var(--border-soft); }
.res-details th { color:var(--text-strong); font-weight:600; }
.res-details ul { margin:.5rem 0 0; padding-left:1.1rem; font-size:.92rem; }
.res-details li { margin-bottom:.35rem; }
.res-links { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.2rem; font-size:.92rem; }
.emergency-block {
  background:var(--brick-50); border:2px solid var(--brick-300); border-radius:18px;
  padding:1.3rem 1.4rem; margin-top:1.6rem;
}
:root.theme-dark .emergency-block { background:#3A2019; border-color:#7E3A2B; }
.emergency-block h2 { color:var(--brick-700); font-size:1.3rem; }
:root.theme-dark .emergency-block h2 { color:#EFB7A9; }
.emergency-block ul { margin:.4rem 0 0; padding-left:1.2rem; }
.emergency-block li { margin-bottom:.35rem; }

/* ---------- 24. Legal pages ---------- */
.legal-wrap { max-width:820px; margin-inline:auto; padding:clamp(2rem,5vw,3.2rem) 0 4rem; }
.legal-wrap h1 { font-size:clamp(1.9rem, 3.5vw, 2.7rem); }
.legal-wrap h2 { font-size:1.45rem; margin-top:2.2rem; }
.legal-updated { color:var(--text-soft); font-size:.92rem; margin-bottom:2rem; }
.legal-wrap code { background:var(--surface-band); border:1px solid var(--border-soft); border-radius:6px; padding:.08em .4em; font-size:.88em; }

/* ---------- 25. 404 ---------- */
.nf-wrap { min-height:60vh; display:grid; place-items:center; text-align:center; padding:3rem 0; }
.nf-art { width:min(420px, 80vw); margin-inline:auto; }
.nf-actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }
/* twinkling stars in the 404 night illustration (.motif-night only) */
.star-tw { animation:starTw 4.5s ease-in-out infinite alternate; }
.star-tw.s2 { animation-delay:-1.6s; } .star-tw.s3 { animation-delay:-3.1s; }
@keyframes starTw { from { opacity:.25; } to { opacity:.95; } }
html[data-motion="reduced"] .star-tw { animation:none; }
@media (prefers-reduced-motion: reduce) { .star-tw { animation:none; } }

/* ---------- 26. Loading veil — porch line-draw (CSS-only, JS teardown backstop) ---------- */
.load-veil {
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  background:var(--surface-page);
  animation:veilFade .9s ease .55s forwards;
}
.load-veil svg path { stroke-dasharray:240; stroke-dashoffset:240; animation:lineDraw .8s ease-out forwards; }
@keyframes lineDraw { to { stroke-dashoffset:0; } }
@keyframes veilFade { to { opacity:0; visibility:hidden; } }
html[data-motion="reduced"] .load-veil { display:none; }
@media (prefers-reduced-motion: reduce) { .load-veil { display:none; } }

/* ---------- 27. Responsive ---------- */
@media (max-width: 1380px) {
  .nav-link { padding:.5rem .55rem; font-size:.93rem; }
  .header-inner { gap:.7rem; }
  .btn-call-header { padding:.55rem .8rem; font-size:.9rem; }
}
@media (max-width: 1020px) {
  .primary-nav { display:none; }
  .hamburger { display:inline-flex; }
  .btn-call-header { display:none; }
}
@media (max-width: 860px) {
  .hero-grid, .heritage-grid, .feature-grid, .contact-grid { grid-template-columns:1fr; }
  .hero-photo { order:-1; max-width:560px; margin-inline:auto; width:100%; }
  .hero-eave { width:min(300px, 78%); }
  .stats-row { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 700px) {
  body { padding-bottom:calc(var(--ctabar-h) + env(safe-area-inset-bottom)); }
  .mobile-ctabar { display:flex; }
  .brand-logo { width:200px; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .lang-toggle-header { display:none; }
}
@media (max-width: 380px) {
  .stats-row { grid-template-columns:1fr; }
}

/* iOS tap-swallow trap: closed overlay must never catch taps (also enforced inline) */
.drawer-overlay:not(.open) { pointer-events:none; }

/* ---------- 28. Dark-mode selector contrast sweep ---------- */
:root.theme-dark body { background:var(--surface-page); }
:root.theme-dark .eyebrow { color:var(--brick-300); }
:root.theme-dark .eyebrow::before { background:#D9B873; }
:root.theme-dark a { color:#9CC4E0; }
:root.theme-dark a:hover { color:#DF9F8E; }
:root.theme-dark .svc-more { color:#9CC4E0; }
:root.theme-dark .stat-num { color:#DF9F8E; }
:root.theme-dark .doc-role { color:#DF9F8E; }
:root.theme-dark .res-topic { color:#DF9F8E; }
:root.theme-dark .testi-card .quote-mark { color:var(--brass-pale); }
:root.theme-dark .check-list svg { color:#A4BC9B; }
:root.theme-dark .faq-q .chev { color:#DF9F8E; }
:root.theme-dark .form-card .form-kind { color:#9FB6BB; }
:root.theme-dark .skip-link { background:#9CC4E0; color:#0E2129; }
:root.theme-dark .hero-caption, :root.theme-dark .hours-note { color:#9FB6BB; }
:root.theme-dark .strap-item { color:#C9D7DC; }
:root.theme-dark .hero-arch { box-shadow:0 4px 10px rgba(0,0,0,.4), 0 26px 50px -20px rgba(0,0,0,.65); }
:root.theme-dark .load-veil svg path { stroke:#9CC4E0; }

/* ==========================================================================
   29. REDESIGN COMPONENTS
   ========================================================================== */

/* ---- screen-reader only ---- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- 29a. Hero family carousel — keepsake porch-portrait frame ---- */
.hero-carousel { position:relative; }
.hc-viewport {
  position:relative; aspect-ratio:4 / 3.7; overflow:hidden;
  border-radius:190px 190px 24px 24px;
  border:11px solid var(--cream-card); outline:1.5px solid var(--border-card);
  box-shadow:var(--shadow-lift); background:var(--cream-deep);
}
:root.theme-dark .hc-viewport {
  border-color:#1C3D4A; outline-color:#2B4A56; background:#16323D;
  box-shadow:0 4px 10px rgba(0,0,0,.4), 0 26px 50px -20px rgba(0,0,0,.65);
}
.hc-track { position:absolute; inset:0; }
.hc-slide {
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .85s var(--ease-soft), visibility .85s;
}
.hc-slide.is-active { opacity:1; visibility:visible; }
.hc-slide[hidden] { display:none; }
.hc-img { width:100%; height:100%; object-fit:cover; }
.hc-cap-in {
  position:absolute; left:0; right:0; bottom:0; margin:0; z-index:2;
  padding:1.8rem 1.2rem .95rem; color:#FFF8EE; font-weight:600;
  font-size:1.02rem; line-height:1.4; text-align:center;
  /* scrim handles the common case; the shadow guarantees legibility over any photo region */
  text-shadow:0 1px 3px rgba(15,36,44,.55);
  background:linear-gradient(180deg, rgba(15,36,44,0) 0%, rgba(15,36,44,.34) 45%, rgba(15,36,44,.74) 100%);
  /* Photos may dissolve through each other, but two different caption strings
     must not — that reads as garbled double text. The outgoing line clears out
     first, and the incoming one only arrives once it has gone. */
  opacity:0; transition:opacity .26s var(--ease-soft);
}
.hc-slide.is-active .hc-cap-in { opacity:1; transition:opacity .46s var(--ease-soft) .42s; }
.hero-carousel .hero-plaque { position:absolute; left:-16px; bottom:78px; z-index:4; }
.hc-dots { display:flex; gap:.4rem; justify-content:center; margin-top:1.05rem; }
.hc-dot {
  width:26px; height:26px; padding:0; border:0; background:transparent;
  cursor:pointer; display:inline-grid; place-items:center;
}
.hc-dot::before {
  content:""; width:10px; height:10px; border-radius:50%;
  border:2px solid var(--ink-400); background:transparent;
  transition:transform .35s var(--spring), background-color .2s, border-color .2s;
}
.hc-dot:hover::before { transform:scale(1.18); }
.hc-dot.is-active::before { background:var(--brick-500); border-color:var(--brick-500); }
:root.theme-dark .hc-dot::before { border-color:#5F8A9A; }
:root.theme-dark .hc-dot.is-active::before { background:var(--brick-300); border-color:var(--brick-300); }

/* ---- 29b. Establishing scene band — the real clinic (illustrated photo) ---- */
.band-photo {
  position:relative; line-height:0; isolation:isolate;
  height:clamp(430px, 34vw, 520px); overflow:hidden;
  background:var(--surface-band);
}
.band-photo-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 52%;
  transform-origin:center 60%; will-change:transform;
  animation:bandDrift 32s ease-in-out infinite alternate;
}
/* a very subtle, slow scale — "living still", never below 1 so cover never gaps */
@keyframes bandDrift { from { transform:scale(1.012); } to { transform:scale(1.05); } }
/* melt the bottom edge into the cream "Our Story" section; soften the top seam (theme-aware) */
.band-photo::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:32%; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0), var(--surface-band) 94%);
}
.band-photo::before {
  content:""; position:absolute; left:0; right:0; top:-1px; height:13%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,0), var(--surface-band) 96%);
}
@media (max-width:768px) {
  /* drive height from the mobile crop's own aspect so cover shows the whole
     scene — both the white entrance and the doctor sign stay fully visible */
  .band-photo { height:auto; aspect-ratio:1560 / 740; }
  .band-photo-img { object-position:center; }
}
/* respect reduced motion + calm mode: hold the image still, drop the scale */
html[data-motion="reduced"] .band-photo-img,
html[data-decor="off"] .band-photo-img { animation:none; transform:none; }
@media (prefers-reduced-motion: reduce) { .band-photo-img { animation:none; transform:none; } }

/* ---- 29c. Heritage: timeline + cottage keepsake seal ---- */
.timeline { list-style:none; margin:1.6rem 0 .4rem; padding:0; display:grid; gap:1.05rem; }
.tl-stop { position:relative; padding-left:2.1rem; }
.tl-stop::before { /* connector line */
  content:""; position:absolute; left:9px; top:1.5rem; bottom:-1.05rem; width:2px; background:var(--border-soft);
}
.tl-stop:last-child::before { display:none; }
.tl-stop::after { /* node */
  content:""; position:absolute; left:3px; top:.34rem; width:14px; height:14px; border-radius:50%;
  background:var(--surface-card); border:3px solid var(--brick-400);   /* was --cream-card: five cream dots on the dusk band */
}
.tl-now::after { background:var(--brick-500); border-color:var(--brass); box-shadow:0 0 0 4px var(--brick-100); }
:root.theme-dark .tl-now::after { box-shadow:0 0 0 4px #3A2019; }
.tl-year { display:block; font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--accent-brick); line-height:1.1; }
.tl-note { display:block; font-size:.96rem; color:var(--text-soft); }
.heritage-photo { position:relative; }
.heritage-seal { position:absolute; right:-16px; bottom:-16px; width:84px; height:84px; z-index:3;
  filter:drop-shadow(0 6px 16px rgba(32,72,85,.25)); }
.heritage-seal svg { width:100%; height:100%; }
@media (max-width:520px) { .heritage-seal { width:64px; height:64px; right:-8px; bottom:-8px; } }

/* ---- 29d. Services: accent line + utility card ---- */
.svc-card { overflow:hidden; }
.svc-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--brick-400), var(--brass));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-soft);
}
.svc-card:hover::before, .svc-card:focus-within::before { transform:scaleX(1); }
.svc-card:hover .svc-icon, .svc-card:focus-within .svc-icon { background:var(--brick-500); color:#FFF8EE; }
:root.theme-dark .svc-card:hover .svc-icon, :root.theme-dark .svc-card:focus-within .svc-icon { background:var(--brick-400); color:#27130D; }
.svc-icon { transition:background-color .25s, color .25s; }
.svc-utility {
  margin-top:1.3rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--ink-700), var(--ink-600));
  color:var(--text-invert); border-radius:18px; padding:1.3rem 1.5rem; box-shadow:var(--shadow-card);
}
:root.theme-dark .svc-utility { background:linear-gradient(120deg,#16323D,#1C3D4A); border:1.5px solid var(--border-card); }
.svc-utility-icon { flex-shrink:0; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:var(--brass-pale); }
.svc-utility-text { flex:1; min-width:200px; }
.svc-utility-text h3 { color:#FFF8EE; margin:0 0 .15em; }
.svc-utility-text p { color:#D9E5E9; margin:0; font-size:.97rem; }
.svc-utility .btn { flex-shrink:0; }

/* ---- 29e. Care journey — newborn to college, a path ---- */
.journey { background:var(--surface-band); overflow:hidden; }
.journey-glow {
  position:absolute; top:-80px; right:-80px; width:380px; height:380px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,213,140,.5), rgba(255,213,140,0) 68%);
  animation:journeyGlow 9s ease-in-out infinite;
}
:root.theme-dark .journey-glow { background:radial-gradient(circle, rgba(217,184,115,.28), rgba(217,184,115,0) 68%); }
@keyframes journeyGlow { 0%,100%{ opacity:.6; transform:scale(1); } 50%{ opacity:.95; transform:scale(1.06); } }
.journey-head { position:relative; z-index:1; max-width:60ch; }
.journey-intro { color:var(--text-body); }
.journey-path {
  list-style:none; margin:2.2rem 0 0; padding:0; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:1rem;
}
.journey-path::before { /* the road connecting the stops */
  content:""; position:absolute; top:48px; left:8%; right:8%; height:3px; z-index:-1;
  background:repeating-linear-gradient(90deg, var(--brass) 0 14px, transparent 14px 28px); opacity:.5;
}
.journey-stop { appearance:none; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; }
.journey-stop .journey-portrait { transition:transform .42s var(--spring), box-shadow .3s, border-color .25s; }
.journey-stop.is-sel .journey-portrait { border-color:var(--brick-400); box-shadow:0 0 0 4px var(--brick-100), var(--shadow-lift); }
:root.theme-dark .journey-stop.is-sel .journey-portrait { border-color:var(--brick-400); box-shadow:0 0 0 4px #3A2019, var(--shadow-lift); }
.journey-stop.is-sel .jp-stage { color:var(--accent-brick); }
.journey-stop:focus-visible { outline:none; }
.journey-stop:focus-visible .journey-portrait { outline:3px solid var(--focus-ring); outline-offset:3px; }
.journey-panels { position:relative; z-index:1; margin:1.7rem auto 0; max-width:760px; }
.journey-panel { background:var(--surface-card); border:1.5px solid var(--border-card); border-top:4px solid var(--brick-400); border-radius:18px; padding:1.5rem 1.7rem; box-shadow:var(--shadow-card); text-align:center; }
.journey-panel[hidden] { display:none; }
.journey-panel h3 { margin:0 0 .35em; color:var(--accent-brick); }
.journey-panel p { margin:0 auto; color:var(--text-body); max-width:58ch; }
.journey-panel:not([hidden]) { animation:jpFade .4s var(--ease-soft); }
@keyframes jpFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
html[data-motion="reduced"] .journey-panel { animation:none !important; }
@media (prefers-reduced-motion: reduce) { .journey-panel { animation:none !important; } }
.journey-portrait {
  width:96px; height:96px; border-radius:50%; overflow:hidden; position:relative;
  border:5px solid var(--cream-card); box-shadow:var(--shadow-card); background:var(--cream-deep);
  transition:transform .42s var(--spring), box-shadow .3s;
}
.journey-stop:hover .journey-portrait { transform:translateY(-5px); box-shadow:var(--shadow-lift); }
:root.theme-dark .journey-portrait { border-color:#1C3D4A; background:#16323D; }
.journey-portrait img { width:100%; height:100%; object-fit:cover; }
.jp-ph { position:absolute; inset:0; display:grid; place-items:center; }
.jp-ph svg { width:62%; height:auto; }
.jp-newborn { background:var(--brick-100); } .jp-toddler { background:var(--sage-100); }
.jp-school { background:var(--car-100); } .jp-teen { background:var(--brass-pale); }
.jp-college { background:var(--sage-200); }
:root.theme-dark .jp-newborn,:root.theme-dark .jp-toddler,:root.theme-dark .jp-school,
:root.theme-dark .jp-teen,:root.theme-dark .jp-college { background:#1C3D4A; }
.jp-stage { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text-strong); margin-top:.5rem; }
.jp-age { font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-brick); }
.jp-note { font-size:.9rem; color:var(--text-soft); max-width:22ch; }
.journey-cta { margin-top:2rem; display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap; position:relative; z-index:1; }
.journey-cta-note { font-size:.92rem; color:var(--text-soft); max-width:48ch; }

/* ---- 29f. Teaching credibility cards ---- */
.teach-cards { list-style:none; margin:1.2rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.teach-card {
  display:flex; gap:.8rem; align-items:center; background:var(--surface-card);
  border:1.5px solid var(--border-card); border-radius:14px; padding:.85rem 1rem;
  box-shadow:var(--shadow-card); transition:transform .4s var(--spring), box-shadow .3s, border-color .2s;
}
.teach-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--car-300); }
.teach-cap { flex-shrink:0; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--ink-50); color:var(--ink-700); }
:root.theme-dark .teach-cap { background:#1C3D4A; color:#9CC4E0; }
.teach-card-body { display:flex; flex-direction:column; }
.teach-name { font-weight:650; font-size:.96rem; color:var(--text-strong); line-height:1.25; }
.teach-kind { font-size:.82rem; color:var(--text-soft); }

/* ---- 29g. Two-column FAQ + helper card + motif ---- */
.faq-section { position:relative; overflow:hidden; }
.faq-motif { position:absolute; right:2%; bottom:0; width:min(260px,30vw); opacity:.5; z-index:0; pointer-events:none; }
.faq-motif svg { width:100%; height:auto; }
.faq-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.faq-aside { position:sticky; top:calc(var(--header-h) + 18px); }
.faq-intro { color:var(--text-soft); font-size:.98rem; }
.helper-card {
  margin-top:1.2rem; background:var(--surface-card); border:1.5px solid var(--border-card);
  border-radius:18px; padding:1.4rem 1.4rem 1.5rem; box-shadow:var(--shadow-card);
  border-top:4px solid var(--brick-400);
}
.helper-icon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--brick-100); color:var(--brick-600); margin-bottom:.7rem; }
:root.theme-dark .helper-icon { background:#3A2019; color:#DF9F8E; }
.helper-card p { font-size:1rem; color:var(--text-body); margin:0 0 1rem; }
.helper-card .btn { width:100%; }
.faq-list { margin-top:0; max-width:none; }

/* ---- 29h. Map pin pulse ---- */
.map-marker { transform-box:fill-box; transform-origin:50% 100%; }
.reveal-in .map-marker { animation:pinDrop .7s var(--spring) both; }
@keyframes pinDrop { 0%{ transform:translateY(-34px) scale(.7); opacity:0; } 55%{ opacity:1; } 100%{ transform:none; opacity:1; } }
html[data-motion="reduced"] .map-marker, html[data-decor="off"] .map-marker { animation:none !important; transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce) { .map-marker { animation:none !important; transform:none; opacity:1; } }
.map-pin-pulse .pulse-ring { transform-box:fill-box; transform-origin:center; opacity:0; animation:pinPulse 3s ease-out infinite; }
.map-pin-pulse .pr2 { animation-delay:1.5s; }
@keyframes pinPulse { 0%{ transform:scale(.4); opacity:.7; } 70%{ opacity:.12; } 100%{ transform:scale(1.7); opacity:0; } }

/* ---- 29j. Testimonials — warm note-card polish, tighter rhythm ---- */
.testi-card { background:linear-gradient(180deg, var(--cream-card), var(--surface-band)); }
:root.theme-dark .testi-card { background:linear-gradient(180deg,#16323D,#122A33); }
#testimonials .testi-note, #testimonials .hours-note { margin-top:1.3rem; text-align:center; }

/* ---- 29k. Reduced-motion gate for new decorative motion (OS-level) ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-sun, .hero-fly, .hero-fly .bird-wing, .card-bob, .hero-petals .petal, .journey-glow,
  .map-pin-pulse .pulse-ring, .hc-slide { animation:none; }
  .hc-slide, .hc-cap-in, .hc-slide.is-active .hc-cap-in { transition:none; }
  .map-pin-pulse .pulse-ring { opacity:.25; }
}
html[data-motion="reduced"] .hc-slide,
html[data-decor="off"] .hc-slide,
html[data-motion="reduced"] .hc-cap-in,
html[data-decor="off"] .hc-cap-in,
html[data-motion="reduced"] .hc-slide.is-active .hc-cap-in,
html[data-decor="off"] .hc-slide.is-active .hc-cap-in { transition:none; }
html[data-motion="reduced"] .map-pin-pulse .pulse-ring { opacity:.25; }

/* ---- 29l. Responsive ---- */
@media (max-width: 860px) {
  .faq-layout { grid-template-columns:1fr; }
  .faq-aside { position:static; }
  .helper-card .btn { width:auto; }
  .teach-cards { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .journey-path { grid-template-columns:repeat(2, 1fr); gap:1.4rem 1rem; }
  .journey-path::before { display:none; }
  /* Lift the EST-1953 plaque clear of the centered caption (was pinned into the
     caption band by a specificity-defeated dead rule); left:0 kills the ~3px
     left overhang that caused horizontal scroll at 320px. */
  .hero-carousel .hero-plaque { left:0; bottom:150px; }
  .hero-sprig { right:-4px; width:96px; }
  .heritage-seal { right:0; }
}
@media (max-width: 420px) {
  .svc-utility { flex-direction:column; align-items:flex-start; }
  .svc-utility .btn { width:100%; }
}

/* ==========================================================================
   30. CUTTING-EDGE MOTION — cursor trail · theme ripple · Ken Burns · parallax
   ========================================================================== */

/* themed cursor trail (dogwood petals + fireflies) */
.cursor-trail-layer { position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; }
.trail-petal { position:absolute; transform:translate(-50%,-50%); will-change:transform,opacity; }
.trail-petal svg { width:100%; height:100%; display:block; fill:currentColor; }

/* parallax layers get GPU hinting */
.hero-bg[data-parallax] { will-change:transform; }

/* Ken Burns on real carousel photos (no-op until photos drop in) */
.hc-slide.is-active .hc-img { animation:kenBurns 9s ease-out both; }
@keyframes kenBurns { from { transform:scale(1.002); } to { transform:scale(1.07); } }
html[data-motion="reduced"] .hc-slide.is-active .hc-img { animation:none; }

/* theme-toggle View Transitions ripple: clean clip reveal, no default cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-old(root) { z-index:0; }
::view-transition-new(root) { z-index:1; }

@media (prefers-reduced-motion: reduce) {
  .hc-slide.is-active .hc-img { animation:none; }
  .hero-bg[data-parallax] { transform:none !important; }
  .qb-petals { display:none; }
  .qb-glow, .qb-glow-2 { animation:none; }
}

/* ==========================================================================
   31. EDITORIAL POLISH — deep-teal promise band + film-grain texture
   ========================================================================== */
.quote-band {
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(130% 120% at 50% 118%, rgba(184,137,59,.12), transparent 58%),
    radial-gradient(120% 120% at 50% -10%, rgba(20,50,61,0), rgba(8,20,26,.5) 100%),
    linear-gradient(135deg, var(--ink-800) 0%, var(--ink-700) 55%, var(--ink-600) 100%);
  color:var(--text-invert);
}
:root.theme-dark .quote-band {
  background:
    radial-gradient(130% 120% at 50% 118%, rgba(217,184,115,.12), transparent 58%),
    radial-gradient(120% 120% at 50% -10%, rgba(0,0,0,0), rgba(0,0,0,.45) 100%),
    linear-gradient(135deg, #0B1B22 0%, #16323D 60%, #1C3D4A 100%);
}
/* engraved keepsake frame */
.quote-band::after {
  content:""; position:absolute; inset:clamp(13px, 2vw, 28px); pointer-events:none; z-index:1;
  border:1px solid rgba(214,182,131,.30); border-radius:5px;
}
.quote-inner { max-width:740px; position:relative; z-index:2; }
.qb-mark {
  display:block; font-family:var(--font-display); font-size:clamp(3.6rem, 5vw, 5.2rem);
  line-height:.38; height:.4em; color:var(--brass); opacity:.9;
}
:root.theme-dark .qb-mark { color:var(--brass-pale); }
.big-quote { margin:0; }
.big-quote p {
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(1.6rem, 2.5vw + 1rem, 2.8rem); line-height:1.3; color:#F6F1E4;
  margin:.5rem 0 0; text-wrap:balance; padding:0 .1em .1em;
}
.qb-divider { display:flex; align-items:center; justify-content:center; gap:clamp(.7rem,2vw,1.15rem); margin-top:clamp(1.3rem,3vw,1.9rem); }
.qb-divider .qb-rule { height:1px; width:clamp(34px, 9vw, 92px); background:linear-gradient(90deg, transparent, rgba(214,182,131,.75)); }
.qb-divider .qb-rule:last-child { background:linear-gradient(90deg, rgba(214,182,131,.75), transparent); }
.qb-divider svg { width:19px; height:19px; flex-shrink:0; }
/* Balanced so the cite doesn't break as "…CLINIC · IN / HAYMOUNT SINCE 1953" on a phone. */
.quote-cite { margin-top:clamp(1rem,2.4vw,1.4rem); font-size:.82rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-pale); text-wrap:balance; }
.qb-glow {
  position:absolute; left:50%; top:-40%; width:680px; height:680px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(184,137,59,.22), rgba(184,137,59,0) 65%); pointer-events:none;
  animation:journeyGlow 9s ease-in-out infinite;
}
.qb-glow-2 {
  left:auto; right:-12%; top:auto; bottom:-46%; width:560px; height:560px; transform:none;
  background:radial-gradient(circle, rgba(120,162,176,.16), rgba(120,162,176,0) 66%);
  animation:journeyGlow 12s ease-in-out infinite reverse;
}
/* dogwood corner flourishes on the engraved frame */
.qb-corner { position:absolute; width:clamp(58px, 7vw, 92px); height:auto; z-index:1; pointer-events:none; }
.qb-corner-tl { top:clamp(10px, 1.7vw, 24px); left:clamp(10px, 1.7vw, 24px); }
.qb-corner-br { bottom:clamp(10px, 1.7vw, 24px); right:clamp(10px, 1.7vw, 24px); transform:rotate(180deg); }
/* drifting petals */
.qb-petals { position:absolute; inset:0; pointer-events:none; z-index:1; }
.qb-petal { position:absolute; width:15px; height:15px; opacity:0; }
.qb-petal.qp1 { left:16%; top:-4%; animation:qbDrift 15s linear infinite; }
.qb-petal.qp2 { left:74%; top:-4%; width:11px; animation:qbDrift 19s linear infinite; animation-delay:-7s; }
.qb-petal.qp3 { left:46%; top:-4%; width:13px; animation:qbDrift 17s linear infinite; animation-delay:-12s; }
@keyframes qbDrift {
  0%   { transform:translateY(-30px) rotate(0); opacity:0; }
  12%  { opacity:.8; }
  85%  { opacity:.7; }
  100% { transform:translateY(560px) translateX(-46px) rotate(220deg); opacity:0; }
}
html[data-motion="reduced"] .qb-petals, html[data-decor="off"] .qb-petals { display:none; }

/* reading-progress bar */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:130; pointer-events:none; }
.scroll-progress span { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--brick-500), var(--brass)); box-shadow:0 0 8px rgba(184,137,59,.45); }

/* film-grain texture overlay — editorial tactility, calm-mode disables it */
body::after {
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
:root.theme-dark body::after { opacity:.06; }
html[data-decor="off"] body::after { display:none; }

/* ==========================================================================
   32. SICK-CHILD QUICK HELP — the "help me now" tool
   ========================================================================== */
.sickhelp { background:var(--car-50); }
:root.theme-dark .sickhelp { background:var(--surface-band); }
.sick-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem; margin-top:1.6rem; }
.sick-card {
  background:var(--surface-card); border:1.5px solid var(--border-card); border-top-width:4px;
  border-radius:18px; padding:1.5rem 1.4rem; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:.5rem;
  transition:transform .42s var(--spring), box-shadow .3s;
}
.sick-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.sick-card.urgent { border-top-color:var(--brick-500); }
.sick-card.nurse  { border-top-color:var(--ink-600); }
.sick-card.today  { border-top-color:var(--sage-500); }
.sick-icon { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:.2rem; }
.urgent .sick-icon { background:var(--brick-100); color:var(--brick-600); }
.nurse  .sick-icon { background:var(--ink-50); color:var(--ink-700); }
.today  .sick-icon { background:var(--sage-100); color:var(--sage-700); }
:root.theme-dark .urgent .sick-icon { background:#3A2019; color:#DF9F8E; }
:root.theme-dark .nurse  .sick-icon { background:#1C3D4A; color:#9CC4E0; }
:root.theme-dark .today  .sick-icon { background:#21392B; color:#A4BC9B; }
.sick-card h3 { margin:0; }
.sick-card p { margin:0; font-size:.95rem; color:var(--text-soft); flex-grow:1; }
.sick-card .btn { margin-top:.7rem; }
.fever-note {
  margin-top:1.4rem; display:flex; gap:.9rem; align-items:flex-start;
  background:var(--surface-card); border:1.5px solid var(--border-card); border-left:4px solid var(--brass);
  border-radius:14px; padding:1.05rem 1.25rem; box-shadow:var(--shadow-card);
}
.fever-note svg { flex-shrink:0; color:var(--brass-deep); margin-top:.15rem; }
:root.theme-dark .fever-note svg { color:var(--brass); }
.fever-note p { margin:0; font-size:.95rem; color:var(--text-body); }
.fever-note strong { color:var(--text-strong); }
@media (max-width: 820px) { .sick-grid { grid-template-columns:1fr; } }

/* ---- thin medicine-dosing utility band ---- */
.dose-band { background:var(--surface-band); padding:clamp(1.15rem, 3.2vw, 1.7rem) 0; }
.dose-band-inner {
  display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap;
  border-left:4px solid var(--brass); padding-left:1.2rem;
}
.dose-band-icon {
  flex-shrink:0; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--surface-card); border:1.5px solid var(--border-card); color:var(--brass-deep);
}
:root.theme-dark .dose-band-icon { color:var(--brass); }
.dose-band-text { flex:1; min-width:230px; }
.dose-band-text h2 { margin:0 0 .12em; font-size:1.18rem; line-height:1.22; }
.dose-band-text p { margin:0; font-size:.95rem; color:var(--text-body); max-width:66ch; }
.dose-band .btn { flex-shrink:0; }
@media (max-width: 640px) {
  .dose-band-inner { align-items:flex-start; }
  .dose-band .btn { width:100%; }
}

/* ---- new-family onboarding steps ---- */
.steps { list-style:none; margin:1.8rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
.step {
  background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:18px;
  padding:1.5rem 1.4rem 1.4rem; box-shadow:var(--shadow-card);
  transition:transform .42s var(--spring), box-shadow .3s;
}
.step:hover { transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.step-num {
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--sage-500); color:#FFF8EE; font-family:var(--font-display); font-weight:700;
  font-size:1.25rem; margin-bottom:.7rem; box-shadow:0 4px 10px rgba(67,92,61,.3);
}
:root.theme-dark .step-num { background:var(--sage-400); color:#10231A; }
.step h3 { margin:0 0 .3em; }
.step p { margin:0; font-size:.95rem; color:var(--text-soft); }
.newfam-cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; }
.newfam-forms-note { margin-top:.85rem; font-size:.92rem; color:var(--text-soft); max-width:54ch; }
@media (max-width: 820px) { .steps { grid-template-columns:1fr; } }

/* print sanity */
@media print {
  .site-header, .mobile-ctabar, .trust-strap, .load-veil, .cursor-trail-layer,
  .site-footer .footer-scene, .hero-bg, .band, .journey-glow, .faq-motif { display:none; }
  body::after { display:none; }
}

/* ==========================================================================
   31. MOBILE SWEEP — consolidated phone/touch refinements (2026-07)
   All additive; desktop/pointer behavior is unchanged.
   ========================================================================== */

/* Sticky Call/Portal bar grows with the Display & Comfort text sizes, so the
   body/scroll padding that clears it must grow too (was pinned at 64px). */
html[data-textsize="lg"] { --ctabar-h:82px; }
html[data-textsize="xl"] { --ctabar-h:92px; }

/* Single 44px comfortable-touch floor for controls that fell short on phones,
   plus reveal of hover-only affordances. Scoped to coarse pointers so the
   desktop hover choreography is untouched. */
@media (hover:none) {
  .hc-dot { width:44px; height:44px; margin-block:-9px; }   /* bigger hit area, same row height */
  .theme-toggle { width:44px; height:44px; }
  .filter-chip { min-height:44px; padding:.6rem 1.05rem; }
  .lang-option { min-height:44px; padding:.5rem .9rem; }
  .res-details summary { padding:.7rem 0; }
  .breadcrumbs a, .res-links a, a.res-src, .hero-note, .emergency-block a {
    display:inline-flex; align-items:center; min-height:44px;
  }
  .doc-act { width:44px; height:44px; }
  .doc-card:hover { transform:none; }   /* prevent the hover-lift latching after a tap on iOS */
}

/* Phone: shrink the portrait so the name and bio keep the width they need. */
@media (max-width:560px) {
  .doc-card, .team-grid.is-compact .doc-card { gap:.85rem; padding:.95rem; }
  .doc-photo, .team-grid.is-compact .doc-photo { width:92px; }
}

/* Patients: stack the Portal / Pay-bill buttons full-width instead of a ragged pair. */
@media (max-width:520px) {
  #portal .map-actions { flex-direction:column; align-items:stretch; }
  #portal .map-actions .btn { width:100%; }
}

/* Patients fees table: give the price column a clean, right-aligned rail so it
   doesn't collide with the wrapping description at 320px. */
#fees .hours-table td { text-align:right; white-space:nowrap; vertical-align:top; padding-left:.9rem; font-variant-numeric:tabular-nums; }

/* Privacy page: keep each wrapped inline <code> key visually whole. */
.legal-wrap code { -webkit-box-decoration-break:clone; box-decoration-break:clone; overflow-wrap:anywhere; }

/* ==========================================================================
   32. JOURNEY LAYER — linking to subsequent pages (2026-07)
   Drawer wayfinding + one-tap answers, "Where to next?" bands, on-page jump
   chips, instant-feel navigation, and print-safe reveals. All additive.
   ========================================================================== */

/* --- You-are-here in the mobile drawer (desktop nav already marks it) --- */
.drawer-link[aria-current="page"] {
  background:var(--ink-50); color:var(--accent-brick); position:relative;
}
.drawer-link[aria-current="page"]::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:1.15em; border-radius:3px; background:var(--accent-brick);
}
:root.theme-dark .drawer-link[aria-current="page"] { background:#1C3D4A; color:var(--brick-300); }
:root.theme-dark .drawer-link[aria-current="page"]::before { background:var(--brick-300); }

/* --- Drawer: one-tap answers (the tasks parents actually come for) --- */
.drawer-quick { margin-top:.9rem; padding-top:1rem; border-top:1px solid var(--border-soft); }
.drawer-quick-label {
  margin:0 0 .55rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-soft);
}
.drawer-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.drawer-quick-grid a {
  display:flex; align-items:center; min-height:44px; padding:.55rem .7rem;
  border:1.5px solid var(--border-card); border-radius:12px; text-decoration:none;
  color:var(--text-strong); font-weight:600; font-size:.86rem; line-height:1.25;
  background:transparent; transition:transform .22s var(--spring), background .2s, border-color .2s;
}
.drawer-quick-grid a:hover { background:var(--ink-50); border-color:var(--car-300); }
.drawer-quick-grid a:active { transform:scale(.97); transition-duration:.08s; }
:root.theme-dark .drawer-quick-grid a:hover { background:#1C3D4A; }

/* --- "Where to next?" band on subpages --- */
.page-next { padding:2.6rem 0 3rem; }
.page-next h2 { margin:.1rem 0 1.2rem; }
.next-grid { display:grid; gap:.7rem; }
@media (min-width:760px) { .next-grid { grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); } }
.next-row {
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem;
  background:var(--surface-card); border:1.5px solid var(--border-card); border-radius:16px;
  box-shadow:var(--shadow-card); text-decoration:none; color:inherit;
  transition:transform .42s var(--spring), box-shadow .3s, border-color .2s;
}
.next-row:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--car-300); color:inherit; }
.next-row:active { transform:scale(.99); transition-duration:.08s; }
.next-row-body { flex:1; min-width:0; }
.next-row-title { display:block; font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--text-strong); }
.next-row-desc { display:block; margin-top:.15rem; font-size:.88rem; color:var(--text-soft); line-height:1.4; }
.next-row-arrow {
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-50); color:var(--accent-link);
  transition:background .2s, color .2s, transform .42s var(--spring);
}
.next-row:hover .next-row-arrow, .next-row:focus-visible .next-row-arrow { background:var(--accent-brick); color:#FFF8EE; transform:translateX(2px); }
:root.theme-dark .next-row-arrow { background:#1C3D4A; color:#9CC4E0; }
:root.theme-dark .next-row:hover .next-row-arrow, :root.theme-dark .next-row:focus-visible .next-row-arrow { background:var(--brick-400); color:#27130D; }

/* --- On-page jump chips (Services / For Patients) --- */
.onpage { margin:1.1rem 0 .2rem; }
.onpage-label {
  display:block; margin:0 0 .5rem; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft);
}
.onpage-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.onpage-chip {
  display:inline-flex; align-items:center; padding:.45rem .95rem; border-radius:999px;
  border:1.5px solid var(--border-card); background:var(--surface-card);
  text-decoration:none; color:var(--text-strong); font-weight:600; font-size:.88rem;
  transition:transform .35s var(--spring), border-color .2s, background .2s;
}
.onpage-chip:hover { transform:translateY(-2px); border-color:var(--car-400); color:var(--text-strong); }
.onpage-chip:active { transform:scale(.96); }
/* Scroll-spy: the chip for the section you're reading lights up (same treatment
   as the resources filter chips, so the two "active pill" ideas read as one). */
.onpage-chip[aria-current="location"] { background:var(--ink-700); border-color:var(--ink-700); color:#FFF; }
:root.theme-dark .onpage-chip[aria-current="location"] { background:var(--car-400); border-color:var(--car-400); color:#0E2129; }
/* On phones the chip row becomes one swipeable line instead of a tall stack. */
@media (max-width:700px) {
  .onpage { margin-inline:calc(50% - 50vw); padding-inline:max(5vw, 15px); }
  .onpage-chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.45rem; scrollbar-width:none; scroll-behavior:smooth; }
  .onpage-chips::-webkit-scrollbar { display:none; }
  .onpage-chip { flex:none; scroll-margin-inline:15px; }
  /* Edge-fade tells the thumb there's more to swipe; JS sets data-scroll from
     the scroll position, so the fade only appears on the side with hidden chips. */
  .onpage-chips[data-scroll="start"]  { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); }
  .onpage-chips[data-scroll="middle"] { -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent); }
  .onpage-chips[data-scroll="end"]    { -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px); mask-image:linear-gradient(90deg,transparent,#000 26px); }
}
/* The strip is the only thing that scrolls itself, so calm it the same way the
   page is calmed — manual toggle and OS setting both. */
html[data-motion="reduced"] .onpage-chips { scroll-behavior:auto; }
@media (prefers-reduced-motion: reduce) { .onpage-chips { scroll-behavior:auto; } }
@media (hover:none) {
  .onpage-chip { min-height:44px; }
  /* Touch has no hover: without this the lift/arrow latch after a tap
     (and again on bfcache back), same trap already fixed for .doc-card. */
  .onpage-chip:hover { transform:none; }
  .next-row:hover { transform:none; }
  .next-row:hover .next-row-arrow { transform:none; }
}

/* --- Cross-page navigation feels like one app, not page reloads.
       Progressive enhancement: browsers without View Transitions ignore it. --- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.22s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-image-pair(*),
  ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}
html[data-motion="reduced"]::view-transition-group(*),
html[data-motion="reduced"]::view-transition-image-pair(*),
html[data-motion="reduced"]::view-transition-old(*),
html[data-motion="reduced"]::view-transition-new(*) { animation:none !important; }

/* --- Print: reveals must not print blank (no scroll = no IntersectionObserver),
       and app chrome has no business on paper. Parents print the dosing charts. --- */
@media print {
  .reveal, .reveal-grid > * { opacity:1 !important; transform:none !important; }
  .mobile-ctabar, .mobile-drawer, .drawer-overlay, .hamburger, .theme-toggle,
  .lang-toggle, .skip-link { display:none !important; }
  /* Wayfinding is for thumbs, not paper — a printed dosing chart shouldn't
     spend ink on jump chips or a "Where to next?" band. */
  .onpage, .page-next { display:none !important; }
  .site-header { position:static; }
  body { padding-bottom:0 !important; }
}

/* ---- Dosing chart dialogs (popup instead of PDF download) ---- */
.res-links .dose-open {
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--accent-link); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-skip-ink:auto;
}
.res-links .dose-open:hover { color:var(--accent-brick); }
button.form-card { font:inherit; text-align:left; cursor:pointer; width:100%; }
dialog.dose-modal {
  border:1.5px solid var(--border-card); border-radius:20px; padding:0;
  background:var(--surface-card); color:var(--text-body);
  width:min(620px, calc(100vw - 2rem)); max-height:85vh; overflow:hidden;
  box-shadow:var(--shadow-lift);
}
dialog.dose-modal::backdrop { background:rgba(32,42,48,.45); }
.dose-modal-in { padding:0 1.35rem 1.4rem; overflow-y:auto; max-height:85vh; }
.dose-modal-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  position:sticky; top:0; z-index:1; background:var(--surface-card);
  margin:0 -1.35rem .6rem; padding:1.1rem 1.35rem .55rem;
  border-bottom:1px solid var(--border-soft);
}
.dose-modal-head h3 { margin:0; font-size:1.22rem; }
.dose-modal-close {
  background:none; border:0; cursor:pointer; color:var(--text-soft);
  padding:.35rem; border-radius:9px; line-height:0; flex-shrink:0;
}
.dose-modal-close:hover, .dose-modal-close:focus-visible { color:var(--accent-brick); background:var(--surface-band); }
.dose-modal h4 { margin:1.15rem 0 .15rem; font-size:1.03rem; }
.dose-note {
  margin:.2rem 0 .6rem; font-size:.9rem; color:var(--text-body);
  background:var(--surface-band); border-left:3px solid var(--brass);
  padding:.6rem .8rem; border-radius:10px;
}
.dose-sub { margin:.2rem 0; font-size:.9rem; color:var(--text-soft); }
.dose-rule { margin:.3rem 0 .1rem; font-size:.92rem; font-weight:600; color:var(--text-strong); }
.dose-modal table { width:100%; border-collapse:collapse; margin:.45rem 0 .7rem; font-size:.92rem; }
.dose-modal th, .dose-modal td { text-align:left; padding:.42rem .45rem; border-bottom:1px dashed var(--border-soft); }
.dose-modal th { color:var(--text-strong); font-weight:600; }
.dose-modal tbody tr:nth-child(even) { background:var(--surface-band); }
.dose-dl { margin:.6rem 0 0; font-size:.9rem; }
html[data-contrast="high"] dialog.dose-modal { border-width:2px; }

/* ---- Clinic guidance articles + source-tag affordance ---- */
/* "From our clinic" is attribution, not a link: only the <a>.res-src variants
   (external sources) should look clickable. */
span.res-src { color:var(--text-soft); font-weight:500; }
.dose-modal .art-list { margin:.3rem 0 .2rem; padding-left:1.15rem; font-size:.93rem; }
.dose-modal .art-list li { margin-bottom:.35rem; }

/* ---- Resources search bar ---- */
.res-search {
  display:flex; align-items:center; gap:.6rem; margin:0 0 1rem;
  background:var(--surface-card); border:1.5px solid var(--border-card);
  border-radius:999px; padding:.58rem 1.05rem; max-width:440px;
  box-shadow:var(--shadow-card);
}
.res-search:focus-within { border-color:var(--car-300); box-shadow:var(--shadow-lift); }
.res-search svg { color:var(--text-soft); flex-shrink:0; }
.res-search input {
  border:0; background:none; font:inherit; color:var(--text-body);
  width:100%; outline:none; padding:0;
}
.res-search input::placeholder { color:var(--text-soft); }
.res-search-none { font-size:.94rem; color:var(--text-soft); margin:.1rem 0 1rem; }
html[data-contrast="high"] .res-search { border-width:2px; }

/* ---- New-patient packet CTA + richer form cards ---- */
.packet-cta {
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--cream-card),var(--cream-deep));
  border:1.5px solid var(--border-card); border-left:5px solid var(--brick-500);
  border-radius:18px; padding:1.15rem 1.35rem; margin-top:1.2rem; box-shadow:var(--shadow-card);
}
.packet-cta .pk-icon { flex-shrink:0; color:var(--brick-500); }
:root.theme-dark .packet-cta .pk-icon { color:var(--brick-300); }
.packet-cta .pk-body { flex:1 1 15rem; }
.packet-cta .pk-body h3 { margin:0 0 .12rem; font-size:1.16rem; }
.packet-cta .pk-body p { margin:0; font-size:.92rem; color:var(--text-soft); }
.packet-cta .pk-get {
  display:inline-flex; align-items:center; gap:.5rem; flex-shrink:0;
  background:var(--brick-500); color:#fff; text-decoration:none; font-weight:700;
  font-size:.95rem; padding:.7rem 1.2rem; border-radius:999px;
  transition:background .2s, transform .3s var(--spring), box-shadow .3s;
}
.packet-cta .pk-get:hover, .packet-cta .pk-get:focus-visible { background:var(--brick-600); transform:translateY(-2px); box-shadow:var(--shadow-lift); color:#fff; }
:root.theme-dark .packet-cta .pk-get { background:var(--brick-400); color:#27130D; }
:root.theme-dark .packet-cta .pk-get:hover { background:var(--brick-300); }

.form-card .form-desc { display:block; font-size:.82rem; font-weight:400; color:var(--text-soft); margin-top:.16rem; line-height:1.35; }
.form-card .form-official { display:inline-block; font-size:.72rem; font-weight:600; color:var(--accent-brass); margin-top:.22rem; }
.forms-note { font-size:.86rem; color:var(--text-soft); margin:1rem 0 0; }
html[data-contrast="high"] .packet-cta { border-width:2px; }

/* ---- Home announcement bar (time-limited: Saturday Clinics reopening 2026-09-12) ---- */
.announce-bar {
  position:relative; overflow:hidden; z-index:121;
  background:linear-gradient(96deg, var(--brick-600) 6%, var(--brass) 98%);
  color:#FFF8EE; border-bottom:1px solid rgba(0,0,0,.08);
}
.announce-inner {
  padding:.6rem 1.1rem; text-align:center;
}
.announce-text { margin:0; font-size:.98rem; line-height:1.45; letter-spacing:.01em; overflow-wrap:break-word; }
.announce-icon { display:inline-block; vertical-align:-.26em; margin-right:.45rem; color:#FFF8EE; }
.announce-text b { font-weight:800; }
.announce-detail { font-weight:500; opacity:.96; }
/* subtle sheen sweep to catch the eye — motion-gated */
.announce-bar::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.20) 50%, transparent 68%);
  transform:translateX(-100%); animation:announceSheen 7s ease-in-out 1.4s infinite;
}
@keyframes announceSheen { 0%{transform:translateX(-100%);} 26%,100%{transform:translateX(100%);} }
@media (prefers-reduced-motion: reduce) { .announce-bar::after { animation:none; } }
html[data-motion="reduced"] .announce-bar::after { animation:none; }
@media (max-width:560px) {
  .announce-inner { padding:.55rem .95rem; }
  .announce-text { font-size:.92rem; line-height:1.4; }
}
:root.theme-dark .announce-bar { border-bottom-color:rgba(0,0,0,.3); }