/* ==========================================================================
   RegenOrtho Palm Beach — design system
   Navy (#092D5C) + gold (#FDC929) from the brand mark, porcelain light field,
   Newsreader display serif + Manrope UI sans (self-hosted, variable).

   Newsreader replaced Fraunces: Fraunces' J and j carry a heavy ball terminal
   that hooks below the baseline, which read as eccentric on a clinical site.
   That shape is Fraunces' own design at every opsz and weight — it was not the
   WONK axis — so the only fix was a different face.

   Both files are instanced to wght 400–700 (the site only uses 500 and 600)
   with opsz PINNED at 20, because the design wants one consistent cut at every
   size rather than true optical sizing. Pinning the axis out rather than
   overriding it in CSS cuts each file by ~65%: the pair is 98KB, against 148KB
   for the Fraunces pair it replaced. If you ever need optical sizing back,
   re-instance from Google Fonts leaving opsz variable and expect ~250KB.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-950: #04101F;
  --navy-900: #071A38;
  --navy-850: #08234A;
  --navy-800: #092D5C;
  --navy-700: #12457F;
  --gold: #FDC929;
  --gold-soft: #F7DE8B;
  --bronze-text: #74590A;      /* gold family, AA on porcelain */
  --porcelain: #F9F7F2;
  --sand: #F0EBDF;
  --ink: #101826;
  --muted: #4A5A68;            /* AA on porcelain */
  --line: #DCD5C6;
  --line-dark: rgba(253, 201, 41, .18);
  --white: #FFFFFF;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --shadow-lg: 0 30px 60px -25px rgba(4, 16, 31, .35);
  --shadow-sm: 0 10px 30px -18px rgba(4, 16, 31, .35);
  --r-lg: 22px;
  --r-md: 14px;
  --wrap: 1200px;
  --header-h: 88px;
  --ease: cubic-bezier(.22, .61, .21, 1);

  /* ---- tints on navy -----------------------------------------------------
     Every one of these was a loose hex repeated through the file (#A9BCCE
     thirteen times, #C4D2E0 six). They are the text and rule colours that sit
     ON a navy field, named for the job rather than the value, so a palette
     change is one edit here instead of a hunt through 1,200 lines. */
  --on-navy:          #FFFFFF;
  --on-navy-strong:   #E7EFF7;
  --on-navy-soft:     #C4D2E0;   /* AA on navy-800 */
  --on-navy-muted:    #A9BCCE;   /* AA on navy-800 at >=16px */
  --on-navy-faint:    #8FA6BD;
  --on-navy-dim:      #64809C;   /* decorative separators only, not text */
  --rule-on-navy:     rgba(255, 255, 255, .14);
  --rule-on-navy-lo:  rgba(255, 255, 255, .08);
  --veil-navy:        rgba(4, 16, 31, .72);

  /* ---- gold ramp --------------------------------------------------------- */
  --gold-bright:      #FFD54F;
  --gold-deep:        #C99A22;
  --gold-ink:         #9C7A0E;
  --gold-wash:        rgba(253, 201, 41, .12);
  --gold-edge:        rgba(253, 201, 41, .34);
  --gold-lift:        #F0CB5A;
  --gold-flare:       #FFF6D6;
  --gold-shade:       #B8861B;
  --gold-deep-alt:    #EAB61F;

  /* ---- accents ----------------------------------------------------------- */
  --teal:             #0E4A55;
  --teal-hover:       #14606E;
  --danger:           #B3261E;
  --danger-deep:      #7C2913;
  --success:          #1F6B41;
  --success-strong:   #14512F;
  --success-soft:     #2F7D4F;
  --success-ink:      #2C4A3A;
  --slate:            #33465A;   /* neutral ink on the forms' pale panels */
  --slate-soft:       #2B3B48;
  --slate-faint:      #5C6C78;

  /* ---- the CSS golden-hour scene ----------------------------------------
     Palette of the coastline hero that stands in when no video plays. These
     are illustration stops, not UI colours — they belong to the scene and
     nothing else should consume them. */
  --sun-core:         #FFF8D9;
  --sun-mid:          #FFE08A;
  --sun-edge:         #FDC237;
  --scene-aurora:     #0E3A6E;
  --scene-dune:       #1E3358;
  --scene-night:      #050F1E;
  /* The two sunset ramps are single design decisions, so they are single
     tokens — sixteen individually-named stops would be noise, not a system. */
  --scene-sky: linear-gradient(180deg,
    #0E3060 0%, #1A4478 16%, #2C5C94 32%, #57679E 42%, #8A6A94 50%,
    #B76C74 57%, #D97F55 62%, #F0A04B 66.5%, #FBC65B 69%, #FFE9A4 71%);
  --scene-ocean: linear-gradient(180deg,
    #D08A42 0%, #7E6788 14%, #4C74A0 38%, #2B5586 70%, #1A426F 100%);

  /* ---- semantic surfaces ------------------------------------------------- */
  --surface:          var(--porcelain);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--sand);
  --surface-invert:   var(--navy-800);
  --text:             var(--ink);
  --text-muted:       var(--muted);
  --text-accent:      var(--bronze-text);
  --border:           var(--line);

  /* ---- type scale --------------------------------------------------------
     One ratio, eleven rungs. The file previously carried ~60 distinct
     font-size values, fourteen of them inside a 0.2rem band (.78 .8 .82 .83
     .84 .85 .86 .87 .88 .9 .92 .93 .95 .98) — differences no reader can see
     but every future edit has to guess between. Pick a rung; do not invent a
     value between two rungs. */
  --t-root: 17px;        /* body size; every --t-* rung is a ratio of the root */
  --t-3xs:  .72rem;
  --t-2xs:  .78rem;
  --t-xs:   .84rem;
  --t-sm:   .9rem;
  --t-base: 1rem;
  --t-md:   1.06rem;
  --t-lg:   1.15rem;
  --t-xl:   clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  --t-2xl:  clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --t-num:  clamp(2rem, 1.6rem + 1.4vw, 2.6rem);  /* outlined numerals */
  --t-3xl:  clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  --t-4xl:  clamp(2.4rem, 1.5rem + 3.6vw, 4.1rem);
  --t-5xl:  clamp(3.4rem, 1rem + 11.5vw, 10rem);

  /* Leading shortens as type grows — a display line at 1.6 looks unglued. */
  --lh-tight:  1.06;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* Optical tracking: tight on display, open on small caps-ish UI text. */
  --tr-display: -.02em;
  --tr-tight:   -.01em;
  --tr-normal:  0;
  --tr-wide:    .08em;
  --tr-caps:    .16em;

  /* ---- spacing scale ----------------------------------------------------- */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
}

/* --------------------------------------------------------------------------
   Photographs
   Every <picture> from build.py's photo() lands here. object-fit:cover with
   the default 50% 50% origin decapitates the staff portraits — the faces sit
   in the top third of all eleven — so photo() emits a per-image --focal read
   off the actual frame and this is the only place that consumes it.
   -------------------------------------------------------------------------- */
/* The only literal colours left in this file are the #000 stops inside
   mask-image, where black means "fully opaque" in the alpha channel rather
   than a palette choice. Everything else consumes a token. */

.photo-fit {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
picture { display: contents; }

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--t-root);
  line-height: 1.65;
  color: var(--ink);
  background: var(--porcelain);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* No font-variation-settings here on purpose. Optical size is baked into the
     Newsreader files (pinned at opsz 20 — see the @font-face note above), so
     the axis no longer exists at runtime and a CSS override would be dead
     weight. Weight is left to font-weight, which drives the wght axis. */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-800); }
ul, ol { list-style-position: inside; }

h1, h2, h3, .form-title {
  font-family: var(--serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--navy-900);
  letter-spacing: var(--tr-tight);
  /* balance keeps a two-line heading from leaving one orphaned word — it only
     applies up to six lines, which every heading here is well inside. */
  text-wrap: balance;
}
/* Display sizes need tighter tracking than a 20px h3: the same -.01em that
   steadies a small serif heading leaves a 4rem one looking gappy. */
h1 { letter-spacing: var(--tr-display); }
p, li, dd { text-wrap: pretty; }
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-lg); line-height: 1.3; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: inherit; }
.section-head h2 em, .hero h1 em, .cta-band h2 em { color: var(--gold); }
.section:not(.section-dark) .section-head h2 em { color: var(--navy-700); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--navy-900); padding: .7rem 1.2rem; font-weight: 700; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
/* keep keyboard focus from landing underneath the fixed header */
a, button, input, select, textarea, summary, [tabindex] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ------------------------------ buttons -------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 700; font-size: var(--t-base); letter-spacing: .01em;
  padding: .85rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy-900); box-shadow: 0 14px 30px -14px rgba(253, 201, 41, .55); }
.btn-gold:hover { background: var(--gold-bright); }
.btn-navy { background: var(--navy-800); color: var(--white); }
.btn-navy:hover { background: var(--navy-700); color: var(--white); }
.btn-ghost-light { border-color: rgba(255, 255, 255, .45); color: var(--white); background: rgba(255, 255, 255, .04); }
/* Hero's second CTA. A translucent white outline disappears over bright surf;
   solid deep teal holds its own against sand, water and sky alike. */
.btn-teal { background: var(--teal); color: var(--white); border-color: var(--teal);
  box-shadow: 0 14px 30px -14px rgba(6, 38, 44, .7); }
.btn-teal:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--white); }
.btn-ghost-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: .55rem 1.1rem; font-size: var(--t-xs); }
.btn-block { width: 100%; }

/* ------------------------------ header ---------------------------------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-stuck {
  background: rgba(11, 54, 108, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: rgba(253, 201, 41, .22);
  box-shadow: 0 14px 34px -22px rgba(4, 16, 31, .8);
}
.site-header.is-stuck .header-inner { padding-top: .62rem; padding-bottom: .62rem; }
/* mobile menu overlay must not be trapped by the header's backdrop-filter
   containing block (iOS + Chromium) */
body.nav-locked .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--navy-800); }

.header-inner { max-width: 1340px; margin: 0 auto; padding: .95rem 1.7rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.6rem; }
.brand { justify-self: start; display: block; }
.brand img { width: 184px; height: auto; }
.brand-light { display: none; }

.main-nav { justify-self: center; }
.header-cta { justify-self: end; white-space: nowrap; }
.nav-menu { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav-link, .drop-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 700 var(--t-sm)/1 var(--sans); letter-spacing: .045em; color: var(--on-navy-strong);
  padding: .85rem 1rem; background: none; border: 0; cursor: pointer; text-decoration: none; border-radius: 8px;
}
.nav-link:hover, .drop-btn:hover, .drop-btn[aria-expanded="true"] { color: var(--gold); }
.nav-cta-item { display: none; }
.nav-toggle { display: none; }

.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 260px; background: var(--navy-850); border: 1px solid rgba(253, 201, 41, .2);
  border-radius: 14px; padding: .55rem; list-style: none; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .22s var(--ease), translate .22s var(--ease), visibility .22s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop, .has-drop.is-open .drop { opacity: 1; visibility: visible; translate: 0 0; }
.drop li a {
  display: block; padding: .5rem .8rem; border-radius: 9px; text-decoration: none;
  color: var(--on-navy-strong); font-size: var(--t-sm); font-weight: 600; line-height: 1.35;
}
.drop li a:hover { background: rgba(253, 201, 41, .12); color: var(--gold); }
.drop-mega { min-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 .4rem; }
.drop-all a { color: var(--gold) !important; }
/* The five regenerative modalities get their own full-width shelf at the top
   of the mega panel — a labeled header link plus a wrapping row of pills —
   instead of a cramped, indented sub-list stacked inside one grid column
   (that lopsided the two columns and read as an afterthought). */
.drop-featured { grid-column: 1 / -1; background: rgba(253, 201, 41, .06);
  border: 1px solid rgba(253, 201, 41, .18); border-radius: 11px;
  padding: .7rem .8rem .75rem; margin-bottom: .5rem; }
.drop-featured-link { display: flex; align-items: center; gap: .4rem;
  font: 700 var(--t-xs)/1 var(--sans); letter-spacing: .03em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; padding: .1rem 0 .55rem; }
.drop-featured-link svg { flex: none; opacity: .85; }
.drop-featured-link:hover { color: var(--white); }
.drop-pill-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.drop-pill { display: inline-flex; align-items: center; text-decoration: none;
  font: 600 var(--t-2xs)/1 var(--sans); color: var(--on-navy-strong); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: .42rem .8rem;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.drop-pill:hover { background: rgba(253, 201, 41, .16); border-color: rgba(253, 201, 41, .4); color: var(--gold); }

/* ------------------------------ aurora / dark sections ------------------- */

.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.aurora span:nth-child(1) { width: 44vw; height: 44vw; left: -12vw; top: -14vw; background: radial-gradient(circle, var(--navy-700) 0%, transparent 65%); animation: drift1 26s var(--ease) infinite alternate; }
.aurora span:nth-child(2) { width: 36vw; height: 36vw; right: -10vw; top: 20%; background: radial-gradient(circle, rgba(253, 201, 41, .34) 0%, transparent 65%); animation: drift2 32s var(--ease) infinite alternate; }
.aurora span:nth-child(3) { width: 40vw; height: 40vw; left: 30%; bottom: -18vw; background: radial-gradient(circle, var(--scene-aurora) 0%, transparent 65%); animation: drift3 38s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-7vw, 9vh) scale(.92); } }
@keyframes drift3 { to { transform: translate(6vw, -8vh) scale(1.08); } }

/* ------------------------------ hero ------------------------------------ */

.hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; background: var(--navy-950); color: var(--on-navy-strong); overflow: hidden; }

/* -- living coastline scene (video drop-in: assets/video/hero-beach.mp4 + hero-poster.jpg) -- */
.hero-scene { position: absolute; inset: 0; animation: sceneIn 1.8s var(--ease) both; }
@keyframes sceneIn { from { opacity: 0; } }
.hero-video-slot, .hero-video-slot video { position: absolute; inset: 0; }
/* z-index 1 lifts the video above the CSS scene; the scene stays as the
   fallback while the poster/first frame loads and wherever autoplay is vetoed */
.hero-video-slot { z-index: 1; }
.hero-video-slot video { width: 100%; height: 100%; object-fit: cover; }
/* Once the video is confirmed playing (main.js adds this class on "playing"),
   the CSS scene underneath is fully covered, so its couple of dozen blurred
   keyframe animations are pure wasted work — park them.
   This used to be `display: none`, which was a bug: the scene is the fallback,
   and iOS suspends a playing video when the tab is backgrounded or memory runs
   short. Removing it from the render tree meant that once the video stopped
   painting the hero went flat navy with nothing behind it. Pausing keeps the
   fallback underneath at effectively no cost and cannot fail open. */
.hero.video-live .hero-scene,
.hero.video-live .hero-scene *,
.hero.video-live .hero-scene *::before,
.hero.video-live .hero-scene *::after { animation-play-state: paused; }
/* No scrim over the footage — kept fully bright per the client's request.
   Legibility comes entirely from .hero-copy's text-shadow below. */
.hero-video-scrim { position: absolute; inset: 0; pointer-events: none; background: none; }
@media (max-width: 767px) {
  .hero-copy { text-align: center; margin-inline: auto; max-width: 34ch;
    text-shadow: 0 1px 3px rgba(4, 16, 31, .9), 0 2px 22px rgba(4, 16, 31, .85), 0 0 44px rgba(4, 16, 31, .6); }
  .hero-copy h1 { max-width: none; margin-inline: auto; }
  .hero .lede { margin-inline: auto; }
  .hero-cta-row { justify-content: center; }
  .hero .hero-eyebrow::before { display: none; }   /* only reads as a lead-in when left-aligned */
  .hero-stats { justify-content: center; margin-inline: auto; text-align: center; }
  .hero-stats div:last-child { grid-column: 1 / -1; }
}
/* keep the copy above the video */
.hero-inner, .hero-marquee { position: relative; z-index: 2; }
.scene-sky { position: absolute; inset: 0;
  background: var(--scene-sky);
  animation: skyDrift 80s ease-in-out infinite alternate; }
@keyframes skyDrift { to { transform: translateY(-9px) scale(1.015); } }

/* atmospheric haze where the bands meet */
.scene-haze-violet { position: absolute; left: 0; right: 0; top: 28%; height: 24%;
  background: radial-gradient(ellipse at 58% 60%, rgba(122, 84, 140, .26), transparent 68%);
  filter: blur(16px); animation: hazePulse 17s ease-in-out -6s infinite; }
.scene-haze { position: absolute; left: 0; right: 0; top: 50%; height: 24%;
  background: radial-gradient(ellipse at 63% 100%, rgba(242, 148, 68, .36), transparent 66%);
  filter: blur(12px); animation: hazePulse 13s ease-in-out infinite; }
@keyframes hazePulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* high violet clouds + thin lit bands near the horizon */
.scene-clouds span { position: absolute; border-radius: 50%; filter: blur(30px);
  background: linear-gradient(90deg, rgba(110, 87, 140, .32), rgba(196, 110, 70, .22)); }
.scene-clouds span:nth-child(1) { width: 44vw; height: 6vw; left: 3%; top: 32%; animation: cloudDrift 56s ease-in-out infinite alternate; }
.scene-clouds span:nth-child(2) { width: 28vw; height: 4.5vw; right: 6%; top: 24%; animation: cloudDrift 70s ease-in-out -26s infinite alternate-reverse; }
.scene-clouds span:nth-child(3) { width: 34vw; height: 5vw; left: 34%; top: 43%; animation: cloudDrift 82s ease-in-out -44s infinite alternate; }
.scene-cloudband span { position: absolute; border-radius: 50%; filter: blur(13px);
  background: linear-gradient(90deg, rgba(255, 172, 92, .4), rgba(150, 90, 110, .3) 70%, transparent); }
.scene-cloudband span:nth-child(1) { width: 52vw; height: 2.4vmin; left: 30%; top: 63.5%; animation: cloudDrift 64s ease-in-out -12s infinite alternate; }
.scene-cloudband span:nth-child(2) { width: 34vw; height: 1.9vmin; left: 6%; top: 66.5%; animation: cloudDrift 74s ease-in-out -50s infinite alternate-reverse; }
@keyframes cloudDrift { to { transform: translateX(8vw); } }

/* god rays fanning up from the sun, very low opacity */
.scene-rays { position: absolute; left: 63%; top: 71.2%; width: 96vmin; height: 46vmin;
  translate: -50% -100%; mix-blend-mode: screen;
  background: repeating-conic-gradient(from -46deg at 50% 100%,
    rgba(255, 206, 112, .12) 0deg 2.4deg, transparent 2.4deg 12deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 16%, transparent 66%);
  mask-image: radial-gradient(ellipse at 50% 100%, #000 16%, transparent 66%);
  animation: raysBreathe 14s ease-in-out infinite; }
@keyframes raysBreathe { 0%, 100% { opacity: .3; } 50% { opacity: .62; } }

/* sun bloom + disc */
.scene-sunglow { position: absolute; left: 63%; top: 71%; width: 76vmin; height: 46vmin;
  translate: -50% -56%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 196, 88, .68) 0%, rgba(252, 172, 74, .26) 44%, transparent 72%);
  filter: blur(20px); animation: glowPulse 9s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05) translateX(4px); } }
.scene-sun { position: absolute; left: 63%; top: 71%; width: 12vmin; height: 12vmin;
  translate: -50% -56%; border-radius: 50%;
  background: radial-gradient(circle, var(--sun-core) 0%, var(--sun-mid) 34%, var(--sun-edge) 56%, rgba(253, 194, 55, .35) 74%, transparent 82%);
  filter: blur(.6px); animation: sunPulse 9s ease-in-out infinite; }
@keyframes sunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* crisp horizon, brightest under the sun */
.scene-horizon { position: absolute; left: 0; right: 0; top: 71%; height: 2px; translate: 0 -50%;
  background: linear-gradient(90deg, transparent 4%, rgba(255, 205, 110, .2) 32%, rgba(255, 238, 175, .95) 63%, rgba(255, 205, 110, .2) 86%, transparent 98%);
  filter: blur(.4px); }

/* ocean: reflected warmth falling to deep navy, drifting glints */
.scene-ocean { position: absolute; left: 0; right: 0; top: 71%; bottom: 0;
  background: var(--scene-ocean); }
.scene-ocean .wave { position: absolute; left: -22%; right: -22%; border-radius: 50%; filter: blur(1.8px);
  background: repeating-linear-gradient(90deg, transparent 0 64px, rgba(255, 205, 110, .26) 64px 67px, transparent 67px 150px); }
.scene-ocean .w1 { top: 1%; height: 15%; opacity: .6; animation: waveDrift 17s linear infinite; }
.scene-ocean .w2 { top: 19%; height: 18%; opacity: .32; animation: waveDrift 25s linear infinite reverse; }
.scene-ocean .w3 { top: 43%; height: 22%; opacity: .16; animation: waveDrift 34s linear infinite; }
@keyframes waveDrift { to { transform: translateX(150px); } }

/* the sun's reflection: feathered shimmer column of broken wave bands */
.scene-reflection { position: absolute; left: 63%; top: 71%; bottom: 4%; width: 24vmin; translate: -50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 66%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 66%, transparent 100%); }
.scene-reflection::before, .scene-reflection::after { content: ""; position: absolute; inset: -14px -6px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .45) 52%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .45) 52%, transparent 90%); }
.scene-reflection::before {
  background: repeating-linear-gradient(180deg,
      rgba(255, 214, 110, .5) 0 1.5px, rgba(255, 190, 90, .1) 1.5px 4px, transparent 4px 9px),
    repeating-linear-gradient(180deg,
      rgba(255, 224, 140, .3) 0 2px, transparent 2px 13px);
  filter: blur(.7px);
  animation: reflDrift 9s linear infinite, reflSway 6.5s ease-in-out infinite; }
.scene-reflection::after {
  background: repeating-linear-gradient(180deg,
      rgba(255, 206, 100, .34) 0 2.5px, transparent 2.5px 17px),
    repeating-linear-gradient(180deg,
      rgba(255, 234, 160, .22) 0 1px, transparent 1px 6px);
  filter: blur(1.4px); opacity: .8;
  animation: reflDrift 13s linear infinite reverse, reflSway 8.5s ease-in-out -2.5s infinite; }
@keyframes reflDrift { to { background-position: 0 26px, 0 15px; } }
@keyframes reflSway { 0%, 100% { transform: translateX(-2.5px) scaleX(1); } 50% { transform: translateX(2.5px) scaleX(1.07); } }

/* thin high cirrus streaks */
.scene-cirrus { position: absolute; left: 8%; right: 12%; top: 16%; height: 14%; opacity: .4; filter: blur(3px);
  background:
    linear-gradient(88deg, transparent 20%, rgba(235, 200, 180, .22) 34%, transparent 52%),
    linear-gradient(92deg, transparent 45%, rgba(214, 180, 200, .18) 62%, transparent 80%);
  animation: cloudDrift 95s ease-in-out -30s infinite alternate; }

/* distant gulls drifting across the upper sky */
.scene-birds { position: absolute; top: 20%; left: 0; width: 130px; height: 46px; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 46'%3E%3Cg stroke='%23081726' stroke-width='2.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M12 24 Q19 15 26 22 Q33 15 40 24'/%3E%3Cpath d='M66 12 Q71 6 76 11 Q81 6 86 12'/%3E%3Cpath d='M100 32 Q104 26 108 30 Q112 26 116 32'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  animation: birdsCross 75s linear infinite; }
@keyframes birdsCross {
  0% { transform: translate(-12vw, 0); opacity: 0; }
  6% { opacity: .5; }
  50% { transform: translate(48vw, -3vh); }
  94% { opacity: .5; }
  100% { transform: translate(108vw, -1vh); opacity: 0; } }

/* dark headland sliver on the far horizon */
.scene-headland { position: absolute; left: 0; top: 71%; width: 24vw; height: 1.5vmin; translate: 0 -96%;
  background: var(--scene-dune); opacity: .8; filter: blur(.6px);
  clip-path: polygon(0 100%, 0 42%, 9% 55%, 20% 30%, 32% 58%, 46% 40%, 62% 66%, 80% 55%, 100% 100%); }

/* swell crests rolling toward the viewer, spaced with perspective */
.scene-swells { position: absolute; left: 0; right: 0; top: 71%; bottom: 0; overflow: hidden; }
.scene-swells .sw { position: absolute; left: -4%; right: -4%; border-radius: 50%; }
.scene-swells .sw1 { top: 12%; height: 1.6px; filter: blur(.5px);
  background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(214, 228, 244, .28) 26px 58px, transparent 58px 92px);
  animation: swellRoll 11s linear infinite; }
.scene-swells .sw2 { top: 30%; height: 2.2px; filter: blur(.8px);
  background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(214, 228, 244, .22) 44px 98px, transparent 98px 150px);
  animation: swellRoll 14s linear -4s infinite; }
.scene-swells .sw3 { top: 52%; height: 3px; filter: blur(1.1px);
  background: repeating-linear-gradient(90deg, transparent 0 64px, rgba(214, 228, 244, .17) 64px 150px, transparent 150px 230px);
  animation: swellRoll 18s linear -9s infinite; }
.scene-swells .sw4 { top: 76%; height: 4px; filter: blur(1.6px);
  background: repeating-linear-gradient(90deg, transparent 0 90px, rgba(214, 228, 244, .13) 90px 220px, transparent 220px 330px);
  animation: swellRoll 24s linear -6s infinite; }
@keyframes swellRoll {
  0% { transform: translateY(-10px) scaleX(1); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: .85; }
  100% { transform: translateY(30px) scaleX(1.05); opacity: 0; } }

/* breakers rolling toward the shore */
.scene-rollers { position: absolute; left: 0; right: 0; top: 71%; bottom: 0; overflow: hidden; }
.roller { position: absolute; left: -5%; right: -5%; height: 26%; opacity: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(232, 242, 250, .4) 0%, rgba(170, 200, 224, .14) 24%, rgba(20, 44, 74, .22) 58%, transparent 100%);
  filter: blur(2px); transform-origin: center top; }
.roller.r1 { top: 3%; animation: rollerRoll 9.5s cubic-bezier(.33, .35, .58, 1) infinite; }
.roller.r2 { top: 6%; animation: rollerRoll 12s cubic-bezier(.33, .35, .58, 1) -4.5s infinite; opacity: 0; }
.roller.r3 { top: 4.5%; animation: rollerRoll 14.5s cubic-bezier(.33, .35, .58, 1) -9s infinite; }
@keyframes rollerRoll {
  0% { transform: translateY(-8%) scaleY(.22) scaleX(1.03); opacity: 0; }
  16% { opacity: .5; }
  62% { opacity: .75; }
  100% { transform: translateY(230%) scaleY(1.05) scaleX(1); opacity: 0; } }

/* foam sheet washing up the shore and retreating */
.scene-wash { position: absolute; left: -4%; right: -4%; bottom: -2%; height: 15%; opacity: .5;
  border-radius: 48% 52% 0 0 / 100% 88% 0 0;
  background: linear-gradient(180deg, rgba(236, 242, 246, .42) 0%, rgba(205, 220, 234, .14) 42%, transparent 85%);
  filter: blur(2.2px);
  animation: washCycle 9s ease-in-out infinite; }
@keyframes washCycle {
  0%, 100% { transform: translateY(62%) scaleX(1.02); opacity: .22; }
  52% { transform: translateY(14%) scaleX(1); opacity: .58; } }

/* fine distant-water texture right under the horizon */
.scene-ocean::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14%; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255, 245, 220, .07) 0 1px, transparent 1px 3px); }

/* twinkling sparkles on the sun's glitter path */
.scene-sparkles { position: absolute; left: 63%; top: 73%; width: 4px; height: 4px; translate: -50%; }
.scene-sparkles::before, .scene-sparkles::after { content: ""; position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: rgba(255, 236, 170, .9); }
.scene-sparkles::before { box-shadow:
  -34px 34px 0 0 rgba(255, 236, 170, .8), 22px 58px 0 .5px rgba(255, 236, 170, .7),
  -12px 92px 0 0 rgba(255, 230, 160, .65), 44px 120px 0 .5px rgba(255, 236, 170, .6),
  -52px 148px 0 0 rgba(255, 230, 160, .5), 12px 172px 0 1px rgba(255, 236, 170, .55);
  animation: sparkle 3.6s ease-in-out infinite; }
.scene-sparkles::after { box-shadow:
  30px 22px 0 0 rgba(255, 236, 170, .75), -26px 66px 0 .5px rgba(255, 230, 160, .6),
  8px 108px 0 0 rgba(255, 236, 170, .6), -40px 132px 0 .5px rgba(255, 230, 160, .5),
  52px 156px 0 0 rgba(255, 236, 170, .5), -6px 188px 0 1px rgba(255, 230, 160, .45);
  animation: sparkle 3.6s ease-in-out -1.8s infinite; }
@keyframes sparkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* soft shoreline suggestion */
.scene-shore { position: absolute; left: -2%; right: -2%; bottom: -1%; height: 10%;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 20, 36, .6) 34%, var(--scene-night) 78%); }
.scene-shore::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 12px; opacity: .2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12'%3E%3Cpath d='M0 7 Q25 3 50 7 T100 7 T150 7 T200 7' fill='none' stroke='%23E8DFC8' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x;
  animation: foamDrift 31s linear -8s infinite alternate-reverse; }
.scene-shore::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14'%3E%3Cpath d='M0 8 Q30 3 60 8 T120 8 T180 8 T240 8' fill='none' stroke='%23E8DFC8' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x;
  animation: foamDrift 26s linear infinite alternate; }
@keyframes foamDrift { to { transform: translateX(-120px); } }

 }

/* vignette + live film grain */
.scene-vignette { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 54%, transparent 58%, rgba(2, 8, 18, .2) 90%, rgba(2, 8, 18, .38) 100%); }
.scene-shimmer { position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  animation: grainShift 1.1s steps(1) infinite; }
@keyframes grainShift {
  0% { background-position: 0 0; } 20% { background-position: -42px 28px; }
  40% { background-position: 26px -34px; } 60% { background-position: -24px -18px; }
  80% { background-position: 38px 22px; } 100% { background-position: 0 0; } }
.hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 16, 31, .55) 0%, rgba(4, 16, 31, .12) 34%, rgba(4, 16, 31, .16) 58%, rgba(4, 16, 31, .68) 100%); }

.hero-inner { position: relative; flex: 1; display: flex; align-items: center; width: 100%;
  max-width: var(--wrap); margin: 0 auto; padding: calc(var(--header-h) + clamp(2rem, 6vh, 4rem)) 1.2rem 3rem; }
.hero-copy { max-width: 660px; text-shadow: 0 1px 3px rgba(4, 16, 31, .85), 0 2px 26px rgba(4, 16, 31, .8), 0 0 50px rgba(4, 16, 31, .55); }
.eyebrow { font: 800 var(--t-2xs)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-text); }
.section-dark .eyebrow, .page-hero .eyebrow, .hero .eyebrow, .cta-band .eyebrow { color: var(--gold); }
.hero-eyebrow::before { content: ""; display: inline-block; width: 34px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: .6rem; }
.hero h1 { color: var(--white); margin: .9rem 0 1.1rem; max-width: 14ch; }
.lede { font-size: var(--t-md); color: var(--on-navy-soft); max-width: 54ch; }
.hero .lede { color: var(--on-navy-soft); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.hero-stats {
  display: inline-flex; gap: 2.2rem; margin-top: 2.4rem; flex-wrap: wrap;
  background: rgba(4, 16, 31, .68);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(253, 201, 41, .22); border-radius: 18px;
  padding: 1.15rem 1.6rem;
}
.hero-stats div { min-width: 120px; }
.hero-stats dt { font-family: var(--serif); font-weight: 600; font-size: var(--t-2xl); color: var(--gold); line-height: 1; }
.hero-stats dd { font-size: var(--t-xs); color: var(--on-navy-soft); margin-top: .35rem; max-width: 17ch; }

/* page-load choreography */
/* The hero intro rises and wipes in rather than fading: an opacity ramp from 0
   puts the text through a long stretch of sub-AA contrast against the navy,
   which an auditor sampling mid-animation will (correctly) flag and a reader
   who starts reading early actually experiences. clip-path gets the same
   staggered entrance with the type at full strength in every frame. */
.h-rise {
  animation: hRise .95s var(--ease) both;
  animation-delay: var(--hd, 0s);
  will-change: transform, clip-path;
}
@keyframes hRise {
  from { transform: translateY(26px); clip-path: inset(0 0 100% 0); }
  to   { transform: none;             clip-path: inset(0 0 -20% 0); }
}

/* ------------------------------ the word ---------------------------------- */
/* One enormous serif word, gold gradient with a light sweep running through it,
   cross-fading to the next. An earlier build made the same words out of
   particles; at display size that read as confetti rather than typography. */

.section-word { overflow: hidden; }
.word-inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }

.word-stage { position: relative; margin: 1rem 0 1.6rem; height: clamp(4.5rem, 13vw, 11rem); }
.word-slot { display: block; position: relative; height: 100%; }
.word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600;
  font-size: var(--t-5xl); line-height: 1; letter-spacing: -.02em;
  /* the sweep: a wide gold gradient clipped to the glyphs, panned slowly */
  background: linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold-lift) 18%, var(--gold-flare) 30%, var(--gold) 42%, var(--gold-shade) 62%, var(--gold-lift) 84%, var(--gold-deep) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: 0; transform: translateY(.22em) scale(.985);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.word.is-on { opacity: 1; transform: none; animation: wordSweep 7s linear infinite; }
@keyframes wordSweep { from { background-position: 130% 50%; } to { background-position: -130% 50%; } }
.word.is-off { opacity: 0; transform: translateY(-.16em) scale(1.015); }

.word-lede { font-size: var(--t-md); color: var(--on-navy-soft); max-width: 60ch; margin: 0 auto; }
.word-cta { justify-content: center; margin-top: 1.9rem; }

@media (prefers-reduced-motion: reduce) {
  .word { transition: none; }
  .word.is-on { animation: none; background-position: 50% 50%; }
}

/* ------------------------------ the drip shelf --------------------------- */
/* The IV bags are the practice's own product renders — nobody else has them,
   and a luxury wellness menu is far closer to what this practice is than an
   anatomy diagram ever was. */

.section-drips { overflow: hidden; }

.drip-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 2rem auto 2.8rem; }
.drip-chip {
  border: 1px solid rgba(253, 201, 41, .3); background: rgba(255, 255, 255, .04);
  color: var(--on-navy-soft); border-radius: 999px; padding: .55rem 1.25rem; cursor: pointer;
  font: 700 var(--t-2xs)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s;
}
.drip-chip:hover { background: rgba(253, 201, 41, .14); color: var(--white); }
.drip-chip.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.drip-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.drip-shelf { list-style: none; margin: 0 auto; padding: 0; max-width: var(--wrap);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }

.drip-card { position: relative; opacity: 0; transform: translateY(20px); }
.drip-card.is-out { display: none; }
/* The shelf owns the reveal, not each card: per-card observers left rows two and
   three invisible whenever the whole grid was already on screen. */
.drip-shelf.is-in .drip-card { animation: dripIn .75s var(--ease) forwards var(--dd, 0s); }
@keyframes dripIn { to { opacity: 1; transform: none; } }
.drip-card > a {
  position: relative; display: flex; flex-direction: column; align-items: center;
  height: 100%; padding: 1.6rem 1.1rem 1.3rem; text-decoration: none; text-align: center;
  border: 1px solid rgba(253, 201, 41, .16); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  transition: transform .4s var(--ease), border-color .4s, background .4s, box-shadow .4s;
}
.drip-card > a:hover, .drip-card > a:focus-visible {
  transform: translateY(-8px); border-color: rgba(253, 201, 41, .7);
  background: linear-gradient(180deg, rgba(253, 201, 41, .12), rgba(255, 255, 255, .03));
  box-shadow: 0 28px 50px -30px rgba(253, 201, 41, .55);
}
.drip-card > a:focus { outline: none; }
.drip-card > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* each bag drifts on its own clock so the shelf is never a static grid */
.drip-bag { display: block; width: 100%; max-width: 118px; margin-bottom: 1rem;
  animation: dripFloat var(--df, 7s) ease-in-out infinite var(--dp, 0s); }
.drip-bag img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 18px 20px rgba(4, 16, 31, .7)) drop-shadow(0 0 26px rgba(253, 201, 41, .18)); }
@keyframes dripFloat { 0%, 100% { transform: translateY(0) rotate(-.6deg); }
                       50% { transform: translateY(-11px) rotate(.6deg); } }

.drip-body { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.drip-card strong { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; color: var(--white); }
.drip-ing { font: 600 var(--t-3xs)/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-soft); }
/* the full description stays out of the way until there is intent to read it */
.drip-desc { font-size: var(--t-xs); line-height: 1.55; color: var(--on-navy-muted);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease); }
.drip-card > a:hover .drip-desc, .drip-card > a:focus-visible .drip-desc {
  max-height: 8rem; opacity: 1; margin-top: .45rem; }

.drip-price { margin-top: 1rem; font-family: var(--serif); font-size: var(--t-xl);
  font-weight: 600; color: var(--gold); }

@media (max-width: 1160px) { .drip-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .drip-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .drip-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .drip-card > a { padding: 1.1rem .7rem 1rem; }
  .drip-bag { max-width: 78px; }
  .drip-card strong { font-size: var(--t-base); }
  /* on touch there is no hover, so the copy would never open — show it */
  .drip-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drip-bag { animation: none; }
  .drip-card { opacity: 1; transform: none; }
}

/* ------------------------------ hero marquee ----------------------------- */

.hero-marquee { position: relative; border-top: 1px solid rgba(253, 201, 41, .18); padding: .8rem 0; overflow: hidden;
  background: rgba(4, 16, 31, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
.marquee-track { display: flex; gap: 0; width: max-content; will-change: transform; animation: marquee 30s linear infinite; }
.marquee-track > * { margin-right: 2.2rem; flex-shrink: 0; }
.hero-marquee span { font: 700 var(--t-2xs)/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--on-navy-muted); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------ sections --------------------------------- */

.section { position: relative; padding: clamp(var(--s-7), 8vh, var(--s-9)) 1.2rem; }
.section-dark { padding-block: clamp(var(--s-8), 13vh, var(--s-10)); }
.section:not(.section-dark) + .section:not(.section-dark) { padding-top: var(--s-6); }
.section > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.section-tint { background: var(--sand); }
.section-dark { background: linear-gradient(178deg, var(--navy-900), var(--navy-950)); color: var(--on-navy-strong); overflow: hidden; }
.section-dark h2, .section-dark h3 { color: var(--white); }
/* Section heads used to be centred on every one of the fifty-six pages, which
   is what made the site read as one flat column: a centred multi-line heading
   moves the eye's return point on every line, and with a card grid under it
   there is no left edge anywhere on the page for the eye to anchor to.
   Left-aligned by default now; the hero and the CTA band opt back IN, because
   a short headline over a single action is exactly where centring belongs. */
.section-head {
  /* Stays the full wrap width so it aligns to the same left edge as the grid
     beneath it — the measure belongs on the text, not on the block, or the
     auto margins from `.section > *` re-centre the whole thing. */
  max-width: var(--wrap);
  margin-inline: auto;
  margin-bottom: var(--s-7);
  padding-left: var(--s-5);
  border-left: 3px solid var(--gold);
}
.section-head h2 { margin-top: var(--s-2); font-size: var(--t-4xl); max-width: 18ch; }
.section-head .section-sub { max-width: 54ch; }

/* Prose measure. Long-form columns were unconstrained, so a 1440px viewport
   gave them 80-90 characters a line — past the point where the eye reliably
   finds the start of the next one. */
.loc-main > p, .cond-body > p, .post-body > p, .svc-copy > p { max-width: 68ch; }

/* Centred only where it earns it. */
.section-head--center {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  padding-left: 0;
  border-left: 0;
}
.cta-band .section-head { max-width: 62ch; margin-inline: auto; text-align: center; padding-left: 0; border-left: 0; }
.section-sub { color: var(--muted); margin-top: var(--s-3); font-size: var(--t-lg); line-height: var(--lh-normal); }
.section-dark .section-sub { color: var(--on-navy-muted); }
.section-foot { text-align: center; margin-top: 2.4rem; }
.section-foot a:not(.btn) { font-weight: 700; color: var(--navy-800); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------ service cards ---------------------------- */

.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.svc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.svc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.svc-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}

/* ---- service page: conditions treated / inclusions + pricing / disclaimer -- */
.treats-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .6rem; max-width: var(--wrap); margin: 0 auto; padding: 0; }
.treats-grid li { position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .85rem 1rem .85rem 2.5rem; font-weight: 500; color: var(--ink); }
.treats-grid li::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 9px; height: 9px;
  margin-top: -4.5px; border-radius: 50%; background: var(--gold); }

.price-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.4rem; align-items: start;
  max-width: var(--wrap); margin: 0 auto; }
.price-card { background: var(--navy-800); color: var(--on-navy-strong); border-radius: var(--r-lg);
  padding: 1.9rem; box-shadow: var(--shadow-lg); }
.price-card .eyebrow { color: var(--gold); }
.price-list { margin: 1rem 0 1.1rem; }
.price-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid rgba(253, 201, 41, .22); }
.price-list > div:last-child { border-bottom: 0; }
.price-list dt { font-size: var(--t-base); color: var(--on-navy-soft); }
.price-list dd { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 600; color: var(--gold); white-space: nowrap; }
.price-note { font-size: var(--t-xs); line-height: 1.55; color: var(--on-navy-muted); margin-bottom: 1.2rem; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

.section-disclaimer { padding-top: 0; }
.disclaimer { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.disclaimer p:last-child { font-size: var(--t-xs); line-height: 1.65; color: var(--muted); }

/* Sub-service cards (the regenerative modalities on /services). Text-only —
   they sit under the parent tile grid, so a second row of photo cards would
   compete with it for the same attention. */
.subsvc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.subsvc-card {
  display: flex; flex-direction: column; gap: .45rem; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.25rem 1.35rem; border-left: 3px solid var(--gold);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.subsvc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.subsvc-card strong { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; color: var(--navy-900); line-height: 1.25; }
.subsvc-card > span { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .subsvc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .subsvc-grid { grid-template-columns: 1fr; } }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.svc-num {
  position: absolute; top: .7rem; left: .8rem; z-index: 2;
  font: 700 var(--t-2xs)/1 var(--sans); letter-spacing: .1em; color: var(--gold);
  background: var(--navy-800);
  padding: .38rem .6rem; border-radius: 8px; border: 1px solid rgba(253, 201, 41, .35);
}
.svc-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10.5; background: var(--sand); }
.svc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 45, 92, .06), rgba(9, 45, 92, .22)); pointer-events: none; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc-card:hover .svc-media img { transform: scale(1.06); }
.svc-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.25rem; }
.svc-body-pad { padding-top: 3rem; }
.svc-body strong { font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); color: var(--navy-900); line-height: 1.3; }
.svc-body > span { font-size: var(--t-sm); color: var(--muted); }
.svc-more { display: inline-flex; align-items: center; gap: .45rem; font: 700 var(--t-2xs)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-text); font-style: normal; margin-top: .4rem; }
.svc-card:hover .svc-more, .post-card:hover .svc-more, .treat-card:hover .svc-more { color: var(--navy-800); }
.svc-more svg { transition: transform .3s var(--ease); }
.svc-card:hover .svc-more svg, .treat-card:hover .svc-more svg { transform: translateX(4px); }

/* --------------------- home services tiles (no imagery) ------------------ */

.svc-tile {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem 3.4rem; text-decoration: none; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.svc-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.svc-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.svc-tile:hover::before { transform: scaleX(1); }
.svc-ico {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: var(--gold);
  box-shadow: 0 10px 22px -12px rgba(9, 45, 92, .55); margin-bottom: .5rem;
  transition: background .35s, color .35s, transform .35s var(--ease);
}
.svc-tile:hover .svc-ico { background: linear-gradient(150deg, var(--gold), var(--gold-deep-alt)); color: var(--navy-900); transform: scale(1.06) rotate(-3deg); }
.svc-tile strong { font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); line-height: 1.28; color: var(--navy-900); }
.svc-tile-sub { font-size: var(--t-xs); color: var(--muted); }
.svc-tile-list { list-style: none; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .42rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.svc-tile-list li { position: relative; padding-left: 1.05rem; font-size: var(--t-xs); font-weight: 600; color: var(--navy-800); }
.svc-tile-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; border-radius: 2px; background: var(--gold); }
.svc-tile-go {
  position: absolute; right: 1.2rem; bottom: 1.1rem; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--navy-800); border: 1.5px solid var(--line);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.svc-tile:hover .svc-tile-go { background: var(--navy-800); border-color: var(--navy-800); color: var(--gold); transform: translateX(3px); }

/* ------------------------------ doctors ---------------------------------- */

/* Three providers, one row — cards stack photo over copy so they stay legible
   at a third of the wrap. Below 1100px they revert to one wide horizontal card. */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; position: relative; }
.doc-card {
  display: flex; flex-direction: column; gap: 1rem; text-decoration: none;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(253, 201, 41, .2); border-radius: var(--r-lg);
  padding: 1.2rem; transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.doc-card:hover { transform: translateY(-5px); border-color: var(--gold); background: rgba(255, 255, 255, .075); }
.doc-photo { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: inset 0 0 0 1px rgba(253,201,41,.25); }
.doc-photo::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(253, 201, 41, .35); border-radius: var(--r-md); translate: 7px 7px; pointer-events: none; }
.doc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc-body { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.doc-body strong { font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; color: var(--white); }
.doc-role { font: 800 var(--t-3xs)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.doc-bio { font-size: var(--t-sm); color: var(--on-navy-muted); }
.doc-card .svc-more { color: var(--gold-soft); margin-top: auto; }
.doc-stats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.doc-stats span { border: 1px solid rgba(253, 201, 41, .38); border-radius: 999px; padding: .3rem .75rem;
  font: 700 var(--t-3xs)/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-soft); }

.why-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; position: relative; }
.why-strip div { border-top: 2px solid var(--gold); padding-top: .9rem; }
.why-strip strong { display: block; font-family: var(--serif); font-weight: 600; color: var(--white); margin-bottom: .3rem; }
.why-strip span { font-size: var(--t-xs); color: var(--on-navy-muted); }

/* ------------------------------ quotes ----------------------------------- */

.quote-stage { position: relative; max-width: 820px; min-height: 300px; }
.quote-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.quote-slide.is-active { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.quote-slide blockquote p { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--t-xl); line-height: 1.45; color: var(--navy-900); text-align: center; }
.quote-slide figcaption, .quote-card figcaption { display: flex; align-items: center; gap: .8rem; justify-content: center; margin-top: 1.4rem; }
.quote-init { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-800); color: var(--gold); display: grid; place-items: center; font: 700 var(--t-md)/1 var(--serif); flex-shrink: 0; }
.quote-slide figcaption strong, .quote-card figcaption strong { display: block; font-size: var(--t-base); color: var(--navy-900); }
.quote-slide figcaption small, .quote-card figcaption small { color: var(--muted); font-size: var(--t-2xs); }
.quote-dots { display: flex; gap: var(--s-1); justify-content: center; margin-top: 1.8rem; }
/* The dot stays 10px; the BUTTON is 24x24 so it meets WCAG 2.2 target-size
   (2.5.8). Drawing the dot in a ::before is what lets the hit area grow
   without the rotator turning into a row of fat circles. */
.quote-dots button {
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
}
.quote-dots button::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--navy-800); background: transparent;
  transition: background .25s, transform .25s;
}
.quote-dots button[aria-selected="true"]::before { background: var(--gold); transform: scale(1.25); }
.quote-dots button:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 2px; border-radius: 50%; }

.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.quote-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.quote-card blockquote p { font-family: var(--serif); font-style: italic; font-size: var(--t-md); color: var(--navy-900); line-height: 1.5; }
.quote-card figcaption { justify-content: flex-start; margin-top: 1.1rem; }

/* --------------------------- pathfinder band ------------------------------ */

.section-pathfinder { overflow: hidden; }
.path-grid { position: relative; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.05fr; gap: 2rem; max-width: var(--wrap); margin: 0 auto; }
.path-col h3 { font: 800 var(--t-3xs)/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.path-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.path-chips a {
  display: inline-block; padding: .42rem .85rem; border-radius: 999px; text-decoration: none;
  font: 700 var(--t-2xs)/1.2 var(--sans); color: var(--on-navy-strong); border: 1px solid rgba(148, 178, 210, .35);
  transition: border-color .25s, color .25s, background .25s, transform .2s;
}
.path-chips a:hover { border-color: var(--gold); color: var(--gold); background: rgba(253, 201, 41, .08); transform: translateY(-1px); }
.path-links { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.path-links a {
  position: relative; display: block; padding-left: 1.2rem; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--on-navy-soft); transition: color .25s, padding-left .25s;
}
.path-links a::before { content: "→"; position: absolute; left: 0; color: var(--bronze-text); color: var(--gold); transition: left .25s; }
.path-links a:hover { color: var(--gold); padding-left: 1.45rem; }

/* ------------------------------ social rail ------------------------------ */

/* Edge fade is an OVERLAY, not a mask. -webkit-mask-image over a child that
   carries will-change:transform (plus per-tile rotate) makes the whole rail
   render blank on iOS Safari — a compositing bug, and the reason the feed was
   invisible on iPhone while fine in Chromium. */
.social-rail { position: relative; overflow: hidden; margin: 0 auto; padding: .5rem 0 1.4rem; }
.social-rail::before, .social-rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 11%; z-index: 2; pointer-events: none;
}
.social-rail::before { left: 0; background: linear-gradient(90deg, var(--porcelain), transparent); }
.social-rail::after { right: 0; background: linear-gradient(270deg, var(--porcelain), transparent); }
.social-track { display: flex; align-items: center; width: max-content; will-change: transform; animation: marquee 46s linear infinite; }
.social-track > * { margin-right: 1.1rem; flex-shrink: 0; }
.social-rail:hover .social-track, .social-rail:focus-within .social-track { animation-play-state: paused; }
.social-tile { position: relative; height: 340px; border-radius: var(--r-md); overflow: hidden; display: block; text-decoration: none; box-shadow: var(--shadow-lg); }
.social-tile:nth-child(odd) { transform: rotate(-.6deg); }
.social-tile:nth-child(even) { transform: rotate(.6deg); }
.social-tile img { height: 100%; width: auto; display: block; transition: transform .5s var(--ease); }
.social-tile:hover img { transform: scale(1.07); }

/* Phones swipe the rail instead of watching it drift. Native scrolling also
   makes loading="lazy" work — Safari never updates the lazy viewport for
   content moved by a transform, so animated tiles simply never loaded. */
@media (max-width: 767px) {
  .social-rail { overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: 1.1rem; }
  .social-rail::-webkit-scrollbar { display: none; }
  .social-rail::before, .social-rail::after { display: none; }
  .social-track { animation: none; will-change: auto; }
  .social-track > * { scroll-snap-align: center; margin-right: .75rem; }
  .social-tile { height: 62vh; max-height: 420px; }
}

/* ------------------------------ associations ----------------------------- */

.section-assoc { padding-top: 2.6rem; padding-bottom: 2.6rem; border-top: 1px solid var(--line); }
.assoc-eyebrow { text-align: center; margin-bottom: 1.4rem; }
.assoc-row { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; align-items: center; justify-content: center; list-style: none; }
.assoc-row img { height: 54px; width: auto; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.assoc-row li:hover img { filter: none; opacity: 1; }

/* ------------------------------ blog cards ------------------------------- */

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.post-grid-3 { grid-template-columns: repeat(3, 1fr); }
.post-card {
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; padding-bottom: 1.2rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.post-media { overflow: hidden; aspect-ratio: 16 / 10; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-media img { transform: scale(1.06); }

/* Feature the newest post. An eleven-post index of identical cards gives the
   eye nowhere to land and no sense of what is current; the first card spans
   two columns and runs side-by-side, which is enough hierarchy to make the
   grid read as edited rather than dumped. Scoped to the blog index's own
   3-column grid so the 3-up "related posts" rails elsewhere keep equal cards.

   The media is positioned, not a grid or flex child. Two dead ends first:
   flex-direction:row makes each of the card's four loose text children its own
   column and wraps the title one word per line; grid with `grid-row: 1 / -1`
   silently collapses to a single row, because -1 counts back from the last
   EXPLICIT row line and this grid declares no rows. Absolute fill is the one
   that does not depend on how many children the card happens to have. */
@media (min-width: 900px) {
  .post-grid-3 > .post-card:first-child {
    grid-column: span 2;
    display: block;
    position: relative;
    padding: var(--s-6) var(--s-6) var(--s-6) calc(46% + var(--s-6));
  }
  .post-grid-3 > .post-card:first-child .post-media {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 46%;
    aspect-ratio: auto;
  }
  .post-grid-3 > .post-card:first-child .post-media img { height: 100%; }
  .post-grid-3 > .post-card:first-child > :not(.post-media) { padding-inline: 0; }
  .post-grid-3 > .post-card:first-child strong {
    display: block;
    font-size: var(--t-2xl);
    max-width: 20ch;
    margin: var(--s-3) 0;
  }
}
.post-tag { font: 800 var(--t-3xs)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-text); padding: .6rem 1.2rem 0; }
.post-card strong { font-family: var(--serif); font-weight: 600; font-size: var(--t-md); line-height: 1.35; color: var(--navy-900); padding: 0 1.2rem; }
.post-date { font-size: var(--t-2xs); color: var(--muted); padding: 0 1.2rem; }
.post-card .svc-more { padding: 0 1.2rem; }

/* ------------------------------ CTA band --------------------------------- */

.cta-band { position: relative; background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); color: var(--on-navy-strong); padding: clamp(3.4rem, 8vh, 5.5rem) 1.2rem; overflow: hidden; text-align: center; }
.cta-band-inner { position: relative; max-width: 760px; margin: 0 auto; }
.cta-mark { display: inline-block; margin-bottom: 1.2rem; filter: drop-shadow(0 8px 22px rgba(253, 201, 41, .4)); animation: figFloat 6s ease-in-out infinite; }
.cta-band h2 { color: var(--white); margin-bottom: .9rem; }
.cta-band p { color: var(--on-navy-muted); max-width: 52ch; margin: 0 auto; }
.cta-band .cta-row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* ------------------------------ page hero -------------------------------- */

.page-hero { position: relative; background: linear-gradient(178deg, var(--navy-900) 0%, var(--navy-950) 100%); color: var(--on-navy-strong);
  padding: calc(var(--header-h) + clamp(1.6rem, 4vh, 2.6rem)) 1.2rem clamp(2.8rem, 7vh, 4.6rem); overflow: hidden; }
/* A flat gradient plus three blurred aurora blobs read as an empty blue box
   next to the homepage's video hero — these rings and drifting light points
   borrow the same "gold treatment points, drifting threads" language as the
   homepage figure, at zero asset cost (pure CSS, nothing to preload). */
.page-hero .aurora span { opacity: .62; }
.page-hero-orbit { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ph-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(253, 201, 41, .16); }
.ph-ring-1 { width: 62vw; max-width: 720px; aspect-ratio: 1; right: -18vw; top: -22vw; animation: ph-spin 100s linear infinite; }
.ph-ring-2 { width: 40vw; max-width: 460px; aspect-ratio: 1; right: -6vw; top: -6vw;
  border-style: dashed; border-color: rgba(253, 201, 41, .24); animation: ph-spin-rev 75s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
@keyframes ph-spin-rev { to { transform: rotate(-360deg); } }
.ph-dot { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 16px 3px rgba(253, 201, 41, .55);
  opacity: .5; animation: ph-float 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ph-float { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-14px); opacity: 1; } }
.page-hero-inner { position: relative; max-width: var(--wrap); margin: 0 auto; }
.page-hero h1 { color: var(--white); margin: .9rem 0 1rem; max-width: 22ch; }
.page-hero .lede { max-width: 62ch; }
.crumbs { margin-bottom: 1.4rem; font-size: var(--t-xs); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: var(--on-navy-dim); }
.crumbs a { color: var(--on-navy-muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--gold); font-weight: 700; }

/* ------------------------------ service page ----------------------------- */

.svc-intro-grid, .provider-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.6rem; align-items: center; max-width: var(--wrap); margin: 0 auto; }
.svc-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.svc-photo::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(9, 45, 92, .18); border-radius: var(--r-lg); translate: 10px 10px; pointer-events: none; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-why h2 { margin: var(--s-2) 0 var(--s-4); }
.svc-why .btn { margin-top: var(--s-5); }
/* A paragraph and the list under it are separate groups, so the gap between
   them has to beat the gap *inside* the list (.65rem) or they read as one
   undifferentiated block — which is how this column looked. */
.svc-why > p { max-width: 62ch; line-height: var(--lh-normal); }
.svc-why > p + .check-list { margin-top: var(--s-5); }

.check-list { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.check-list li { padding-left: 1.9rem; position: relative; font-size: var(--t-base); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23092D5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 7.4 5.9 10 11 4.4'/%3E%3C/svg%3E") center/12px no-repeat;
}

.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.exp-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.4rem; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.exp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.exp-num { font: 600 var(--t-num)/1 var(--serif); color: transparent; -webkit-text-stroke: 1.3px var(--gold-ink); display: block; margin-bottom: .7rem; }
.exp-card h3 { margin-bottom: .5rem; }
.exp-card p { font-size: var(--t-sm); color: var(--muted); }

.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; counter-reset: step; max-width: var(--wrap); margin: 0 auto; }
.steps.steps-light { grid-template-columns: repeat(4, 1fr); position: relative; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.4rem; position: relative; }
.steps-light .step { background: rgba(255, 255, 255, .05); border-color: rgba(253, 201, 41, .2); }
.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-800); color: var(--gold); display: grid; place-items: center; font: 700 var(--t-md)/1 var(--serif); margin-bottom: .9rem; }
.steps-light .step-num { background: var(--gold); color: var(--navy-900); }
.step h3 { margin-bottom: .45rem; }
.step p { font-size: var(--t-sm); color: var(--muted); }
.steps-light .step p { color: var(--on-navy-muted); }

.cond-links { max-width: var(--wrap); margin: 0 auto; padding: 0 0 1rem; }
.cond-links h2 { font-size: var(--t-lg); margin-bottom: .8rem; }
.cond-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.cond-links a { display: inline-block; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem; font-size: var(--t-xs); font-weight: 700; text-decoration: none; color: var(--navy-800); transition: border-color .25s, background .25s; }
.cond-links a:hover { border-color: var(--gold); background: var(--gold-soft); }

/* --------------------- provider extras + pathway pricing ----------------- */

.provider-creds { display: block; margin-top: .5rem; font-size: var(--t-xs); letter-spacing: .04em; color: var(--gold-soft); }
.provider-tagline { font-size: var(--t-2xl); margin-bottom: 1rem; }
.provider-tagline em { color: var(--navy-700); }
.provider-quote { border-left: 3px solid var(--gold); padding: .2rem 0 .2rem 1.3rem; margin: 0 0 1.8rem; }
.provider-quote p { font-family: var(--serif); font-style: italic; font-size: var(--t-lg); line-height: 1.5; color: var(--navy-900); }
.provider-quote cite { display: block; margin-top: .7rem; font: 700 var(--t-2xs)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--bronze-text); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 1.8rem 0 .6rem; }
.spec-grid h3 { font: 800 var(--t-3xs)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-text); margin-bottom: .8rem; }
.spec-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.spec-list li { position: relative; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--ink); }
.spec-list li::before { content: "›"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
@media (max-width: 720px) { .spec-grid { grid-template-columns: 1fr; } }

.pathway-list { list-style: none; max-width: 940px; margin: 0 auto; counter-reset: pw; }
.pathway { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem;
  padding: 1.25rem .3rem; border-bottom: 1px solid rgba(253, 201, 41, .18); }
.pathway:first-child { border-top: 1px solid rgba(253, 201, 41, .18); }
.pathway-num { font: 600 var(--t-base)/1 var(--serif); color: var(--gold); opacity: .7; }
.pathway-name { text-decoration: none; display: block; }
.pathway-name strong { display: block; font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); color: var(--white); transition: color .25s; }
.pathway-name span { display: block; margin-top: .2rem; font-size: var(--t-xs); color: var(--on-navy-muted); }
.pathway:hover .pathway-name strong { color: var(--gold); }
.pathway-price { font: 800 var(--t-2xs)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
@media (max-width: 620px) { .pathway { grid-template-columns: auto 1fr; } .pathway-price { grid-column: 2; margin-top: .4rem; } }

/* ------------------------------ FAQ -------------------------------------- */

.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.faq-item[open] { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.05rem 3rem 1.05rem 1.3rem; position: relative;
  font-weight: 700; font-size: var(--t-base); color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 22px; height: 22px; translate: 0 -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.2' fill='none' stroke='%23092D5C' stroke-width='1.4'/%3E%3Cpath fill='none' stroke='%23092D5C' stroke-width='1.8' stroke-linecap='round' d='M11 6.5v9M6.5 11h9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 1.3rem 1.2rem; color: var(--muted); font-size: var(--t-sm); }

.faq-tools { max-width: 900px; margin: 0 auto 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.faq-search { display: flex; align-items: center; gap: .7rem; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .75rem 1.3rem; color: var(--muted); }
.faq-search input { flex: 1; border: 0; outline: none; font: 600 var(--t-base)/1.3 var(--sans); color: var(--ink); background: transparent; }
.faq-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.faq-chip { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: .5rem 1.05rem; font: 700 var(--t-2xs)/1 var(--sans); color: var(--navy-800); cursor: pointer; transition: background .25s, border-color .25s, transform .2s; }
.faq-chip:hover { transform: translateY(-1px); border-color: var(--gold); }
.faq-chip.is-active { background: var(--navy-800); color: var(--gold); border-color: var(--navy-800); }
.faq-panel { display: none; }
.faq-panel.is-active { display: block; }
.faq-cat-title { text-align: center; font-size: var(--t-xl); margin-bottom: 1.2rem; }
.faq-empty { text-align: center; color: var(--muted); margin-top: 1.4rem; }
.faq-section .faq-panel + .faq-panel { margin-top: .5rem; }
body.faq-searching .faq-panel { display: block; margin-bottom: 1.4rem; }
body.faq-searching .faq-item.faq-hide, body.faq-searching .faq-panel.faq-cat-empty { display: none; }

/* ------------------------------ condition pages -------------------------- */

.cond-grid, .loc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.4rem; max-width: var(--wrap); margin: 0 auto; align-items: start; }
.cond-main h2, .loc-main h2 { margin: 1.6rem 0 .8rem; }
.cond-main h2:first-child, .loc-main h2:first-child { margin-top: 0; }
.treat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.treat-card { display: flex; flex-direction: column; gap: .4rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.05rem 1.1rem; text-decoration: none; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.treat-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-sm); }
.treat-card strong { font-family: var(--serif); font-weight: 600; color: var(--navy-900); font-size: var(--t-base); line-height: 1.3; }
.sym-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm); }
.sym-card h2, .sym-card h3 { font-size: var(--t-lg); margin-bottom: .9rem; }
.sym-card .btn { margin-top: 1.2rem; width: 100%; }
.sym-call { font-size: var(--t-xs); color: var(--muted); margin-top: .8rem; text-align: center; }
.sym-call a { font-weight: 700; }
.cond-side, .loc-side { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: calc(var(--header-h) + 14px); }
.cond-photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.loc-others ul { list-style: none; columns: 2; }
.loc-others a { display: block; padding: .3rem 0; text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
.loc-others a:hover { color: var(--bronze-text); }
.loc-hours { color: var(--muted); font-size: var(--t-sm); margin-top: .6rem; }
.loc-map-link { display: inline-block; margin-top: .9rem; font-weight: 700; }
.loc-more { margin-top: 1.2rem; font-size: var(--t-sm); color: var(--muted); }
address { font-style: normal; line-height: 1.5; }
.note-line { margin-top: 1.2rem; font-size: var(--t-sm); color: var(--muted); border-left: 3px solid var(--gold); padding-left: .9rem; }

/* ------------------------------ providers -------------------------------- */

.provider-grid { align-items: start; }
.provider-photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: sticky; top: calc(var(--header-h) + 14px); }
.provider-photo img { width: 100%; object-fit: cover; }
.provider-bio h2 { margin: 1.8rem 0 .8rem; }
.provider-bio > p { margin-bottom: .9rem; }
.provider-card { margin-bottom: .6rem; }

/* ------------------------------ team / about ----------------------------- */

.team-strip { display: flex; gap: 1.2rem; justify-content: center; margin-top: 2.4rem; flex-wrap: wrap; position: relative; }
.team-tile { width: 200px; }
.team-photo { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--navy-850); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team-init { display: grid; place-items: center; width: 100%; height: 100%; font: 600 var(--t-num)/1 var(--serif); color: var(--gold); }
.team-tile figcaption { margin-top: .6rem; text-align: center; }
.team-tile figcaption strong { display: block; font-size: var(--t-sm); color: inherit; }
.section-dark .team-tile figcaption strong { color: var(--white); }
.team-tile figcaption span { font-size: var(--t-2xs); color: var(--muted); }
.section-dark .team-tile figcaption span { color: var(--on-navy-muted); }
.team-hero { max-width: 860px; margin: 0 auto 2.6rem; }
.team-hero img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.team-hero figcaption { margin-top: 1rem; text-align: center; font-size: var(--t-sm); color: var(--muted); font-style: italic; }
.section-dark .team-hero figcaption { color: var(--on-navy-muted); }
.team-gallery { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.team-gallery .team-tile { width: 152px; }

/* ------------------------------ IV page ---------------------------------- */

.iv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.iv-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem; display: flex; flex-direction: column; gap: .8rem; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.iv-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.iv-bag { display: flex; justify-content: center; padding: .6rem 0 0; }
.iv-bag img { width: 108px; height: 160px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(9, 45, 92, .18)); }
.iv-card-body h3 { margin-bottom: .4rem; }
.iv-card-body p { font-size: var(--t-sm); color: var(--muted); }
.iv-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-top: 1px dashed var(--line); padding-top: .9rem; }
.iv-price { font: 600 var(--t-xl)/1 var(--serif); color: var(--navy-800); }

/* ---------------------------- infusion-nurse credit ---------------------- */

.nurse-credit { display: grid; grid-template-columns: 280px 1fr; gap: 2.2rem; align-items: center; max-width: var(--wrap); margin: 0 auto; }
.nurse-photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.nurse-photo::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(9, 45, 92, .16); border-radius: var(--r-lg); translate: 9px 9px; pointer-events: none; }
.nurse-photo img { width: 100%; height: 100%; object-fit: cover; }
.nurse-copy h2 { margin: .7rem 0 .9rem; max-width: 22ch; }
.nurse-copy h2 em { color: var(--navy-700); }
.nurse-copy p { color: var(--muted); max-width: 56ch; }
.nurse-copy .btn { margin-top: 1.3rem; }
@media (max-width: 720px) { .nurse-credit { grid-template-columns: 1fr; } .nurse-photo { max-width: 260px; } }

/* ------------------------------ resources -------------------------------- */

.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.res-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem 1.6rem; position: relative; }
.res-num { font: 600 var(--t-num)/1 var(--serif); color: transparent; -webkit-text-stroke: 1.4px var(--gold-ink); display: block; margin-bottom: .8rem; }
.res-card h2 { font-size: var(--t-xl); margin-bottom: .6rem; }
.res-card > p { color: var(--muted); font-size: var(--t-sm); margin-bottom: 1rem; }
.guide-band { overflow: hidden; }
.guide-inner { position: relative; max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.guide-inner h2 { margin: .7rem 0; }
.guide-inner p { color: var(--on-navy-muted); max-width: 52ch; }

/* ------------------------------ contact ---------------------------------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.6rem; max-width: var(--wrap); margin: 0 auto; align-items: start; }
.contact-info h2 { margin-bottom: .8rem; }
.contact-info h2 em { color: var(--navy-700); }
.contact-list { list-style: none; margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; }
.contact-list li { display: flex; flex-direction: column; gap: .15rem; border-left: 3px solid var(--gold); padding-left: 1rem; }
.contact-list strong { font: 800 var(--t-3xs)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-text); }
.contact-list a { font-weight: 700; text-decoration: none; font-size: var(--t-base); }
.contact-list a:hover { color: var(--bronze-text); }
.contact-note { margin-top: 1.8rem; }
.contact-note .btn { width: auto; }
.contact-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.9rem; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 1rem; }
.form-title { font-size: var(--t-xl); }
.contact-form label { display: flex; flex-direction: column; gap: .35rem; font: 700 var(--t-2xs)/1.3 var(--sans); letter-spacing: .04em; color: var(--navy-900); }
.contact-form input, .contact-form select, .contact-form textarea {
  font: 500 var(--t-base)/1.4 var(--sans); color: var(--ink); background: var(--porcelain);
  border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; width: 100%;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-fine { font-size: var(--t-2xs); color: var(--muted); }
/* Sits directly under the message field so it is read before the box is filled in,
   rather than below the submit button where it arrives too late to matter. */
.form-fine-inline { margin-top: -.4rem; }
.form-error { color: var(--danger); font: 700 var(--t-xs)/1.4 var(--sans); }
.contact-success { align-items: flex-start; text-align: left; }
.contact-success p { color: var(--muted); }
.map-wrap { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); max-width: var(--wrap); margin: 0 auto; }
.map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ------------------------------ blog post -------------------------------- */

.post-body { max-width: 760px; margin: 0 auto; padding: clamp(2.4rem, 6vh, 4rem) 1.2rem; }
.post-figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: 2.2rem; }
.post-body h2 { margin: 2rem 0 .8rem; }
.post-body h3 { margin: 1.6rem 0 .6rem; }
.post-body p { margin-bottom: 1rem; }
.post-body ul, .post-body ol { margin: 0 0 1.2rem; padding-left: .2rem; display: flex; flex-direction: column; gap: .45rem; }
.post-cta { margin-top: 2.6rem; text-align: center; }
.post-cta .btn { width: auto; }
.post-hero .lede { color: var(--on-navy-muted); }

/* ------------------------------ legal / 404 ------------------------------ */

.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-inner h2 { margin: 1.8rem 0 .6rem; font-size: var(--t-xl); }
.hero-404 { min-height: 60vh; display: flex; align-items: center; }

/* ------------------------------ footer ----------------------------------- */

.site-footer { position: relative; background: var(--navy-950); color: var(--on-navy-muted); overflow: hidden; }
.footer-glow { position: absolute; width: 60vw; height: 30vw; left: 20vw; top: -18vw; border-radius: 50%; background: radial-gradient(circle, rgba(18, 69, 127, .5), transparent 65%); filter: blur(50px); }
.footer-inner {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: 3.6rem 1.2rem 2.4rem; display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.2fr; gap: 2.2rem;
}
.footer-brand img { width: 220px; }
.footer-brand p { font-size: var(--t-sm); margin-top: 1.1rem; max-width: 34ch; }
.footer-ig { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; color: var(--gold); font-weight: 700; font-size: var(--t-sm); text-decoration: none; }
.footer-ig:hover { color: var(--gold-soft); }
.footer-col h2 { font: 800 var(--t-3xs)/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.footer-col a { color: var(--on-navy-soft); text-decoration: none; font-size: var(--t-sm); }
.footer-col a:hover { color: var(--gold); }
.footer-contact address a { color: var(--on-navy-soft); text-decoration: none; font-size: var(--t-sm); }
.footer-hours { font-size: var(--t-xs); margin: .8rem 0; color: var(--on-navy-faint); }
.footer-tel { color: var(--gold) !important; font-weight: 800; text-decoration: none; font-size: var(--t-base); }
.footer-tel span { color: var(--on-navy-soft); font-weight: 600; font-size: var(--t-xs); }
.footer-mail { color: var(--on-navy-soft); text-decoration: none; font-size: var(--t-sm); }
.footer-mail:hover, .footer-contact address a:hover { color: var(--gold); }
.footer-base { position: relative; border-top: 1px solid rgba(253, 201, 41, .14); }
.footer-base { max-width: var(--wrap); margin: 0 auto; padding: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--t-xs); color: var(--on-navy-faint); }
.footer-base a { color: var(--on-navy-soft); text-decoration: none; }
.footer-base a:hover { color: var(--gold); }

/* sticky mobile call button — bottom-LEFT so it never collides with the
   assistant launcher (bottom-right) */
.mobile-call {
  display: none; position: fixed; left: 1rem; bottom: 1rem; z-index: 80;
  align-items: center; gap: .5rem; background: var(--gold); color: var(--navy-900);
  font: 800 var(--t-base)/1 var(--sans); padding: .9rem 1.4rem; border-radius: 999px;
  text-decoration: none; box-shadow: 0 12px 30px -8px rgba(4, 16, 31, .5);
}
body.nav-locked .mobile-call { display: none !important; }

/* ------------------------------ responsive ------------------------------- */

@media (max-width: 1260px) {
  .drop-mega { min-width: 480px; }
}

@media (max-width: 1160px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .55rem; margin-left: auto;
    background: none; border: 1px solid rgba(253, 201, 41, .4); border-radius: 999px;
    color: var(--white); font: 700 var(--t-xs)/1 var(--sans); padding: .6rem 1.05rem; cursor: pointer;
  }
  .nav-toggle-box { display: inline-flex; flex-direction: column; gap: 4px; }
  .nav-toggle-box span { width: 16px; height: 2px; background: var(--gold); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; }
  body.nav-locked .nav-toggle-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-locked .nav-toggle-box span:nth-child(2) { opacity: 0; }
  body.nav-locked .nav-toggle-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  :root { --header-h: 74px; }
  .header-inner { grid-template-columns: auto auto; padding: .7rem 1.1rem; gap: 1rem; }
  .header-cta { display: none; }
  .main-nav { justify-self: end; }
  .nav-cta-item { display: block; }
  .brand img { width: 165px; }
  .nav-menu {
    position: fixed; inset: 0; z-index: 95; background: var(--navy-950);
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 5.2rem 1.6rem 3rem; overflow-y: auto; overscroll-behavior: contain;
    /* flex-start: centered flex clips the top of an overflowing list unreachably */
    justify-content: flex-start;
  }
  body.nav-locked .nav-menu { display: flex; }
  body.nav-locked { overflow: hidden; }
  body.nav-locked .nav-toggle { position: relative; z-index: 96; }
  .nav-menu > li { border-bottom: 1px solid rgba(253, 201, 41, .12); }
  .nav-link, .drop-btn { width: 100%; justify-content: space-between; padding: 1.05rem .4rem; font-size: var(--t-md); }
  .drop {
    position: static; transform: none; opacity: 1; visibility: hidden; translate: 0;
    display: none; min-width: 0; box-shadow: none; border: 0; background: rgba(255, 255, 255, .04);
    border-radius: 10px; margin-bottom: .8rem;
  }
  /* tapped submenus must not inherit the desktop translateX(-50%) */
  .has-drop .drop { transform: none; }
  .has-drop.is-open .drop { display: block; visibility: visible; }
  .has-drop:hover .drop:not(.is-open) { }
  /* mega menu must obey the same collapsed/open rules as other dropdowns,
     or it reserves an invisible full-height block in the mobile drawer */
  .has-drop.is-open .drop-mega { display: block; }
  .nav-cta-item { border-bottom: 0 !important; padding-top: 1.2rem; }
  .nav-cta { width: 100%; margin: 0; }

  .hero h1 { max-width: none; }
  .anatomy-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .figure-stage { max-width: 420px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .exp-grid, .iv-grid, .post-grid, .post-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps.steps-light { grid-template-columns: 1fr 1fr; }
  .why-strip { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: 1fr; }
  .doc-card { flex-direction: row; gap: 1.4rem; }
  .doc-photo { flex: 0 0 240px; }
  .iv-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .path-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .svc-grid, .svc-grid-3, .svc-grid-2, .exp-grid, .iv-grid, .post-grid, .post-grid-3, .quote-grid, .res-grid, .treat-grid, .steps, .steps.steps-light, .drip-rail, .form-row { grid-template-columns: 1fr; }
  .cond-grid, .loc-grid, .contact-grid, .svc-intro-grid, .provider-grid { grid-template-columns: 1fr; }
  .cond-side, .loc-side, .provider-photo { position: static; }
  .why-strip { grid-template-columns: 1fr; }
  .doc-card { flex-direction: column; }
  .doc-photo { flex: none; max-width: 280px; }
  /* three stats, two columns — the lone third one centres across the full width */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }
  .hero-stats div { min-width: 0; }
  .hero-stats div:last-child { grid-column: 1 / -1; text-align: center; }
  .hero-stats div:last-child dd { margin-inline: auto; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .path-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; }
  .mobile-call { display: inline-flex; }
}

/* ------------------------------ reduced motion --------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .h-rise { animation: none; opacity: 1; clip-path: none; }
  .hero-scene { animation: none; }
  .bm-node { opacity: 1; transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .social-track { animation: none; }
  .social-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .quote-slide { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 1.4rem; }
  .quote-dots { display: none; }
}

@media print {
  .topbar, .site-header, .site-footer, .mobile-call, .cta-band, .hero-marquee { display: none; }
}

/* Clinic photograph on the location pages — see LOCATION_INTERIORS in build.py.
   Fixed aspect so the sidebar column does not jump while the image decodes. */
.loc-photo { margin: 0 0 var(--s-5); }
.loc-photo .photo-fit {
  aspect-ratio: 42 / 47;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.loc-photo figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* ==========================================================================
   Motion — scroll-driven composition
   All of it is CSS scroll-driven animation (animation-timeline), so it runs on
   the compositor rather than a scroll listener: no main-thread work, nothing
   to throttle, and no JS to load. Everything is inside @supports, so a browser
   without it simply gets the static layout — which is why none of these
   animations may carry meaning. They are emphasis, never content.

   The reduce-motion override sits at the bottom of this block and switches all
   of it off; it is not optional, because a slow scale on a full-bleed photo is
   exactly the kind of movement that triggers vestibular symptoms.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Photographs settle: a 1.04 crop eases to true scale as the figure comes
       into view. The overflow:clip on the wrapper is what keeps the oversized
       frame from widening the page while it plays. */
    .svc-photo, .post-figure, .cond-photo, .loc-photo, .team-photo, .doc-photo {
      overflow: clip;
    }
    .svc-photo .photo-fit,
    .post-figure .photo-fit,
    .cond-photo .photo-fit,
    .loc-photo .photo-fit {
      animation: photo-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    @keyframes photo-settle {
      from { transform: scale(1.04); }
      to   { transform: scale(1); }
    }

    /* The hero video recedes as the page scrolls off it, so the marquee band
       below reads as the next plane rather than a strip stuck to the frame. */
    .hero-video-slot {
      animation: hero-recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes hero-recede {
      from { transform: scale(1); opacity: 1; }
      to   { transform: scale(1.06); opacity: .62; }
    }

    /* Section headings rise a little later than the body beneath them, which
       is what gives a long page its cadence instead of one flat fade.
       TRANSFORM ONLY — no opacity. An opacity-from-0 scroll animation leaves
       the heading genuinely invisible whenever the range has not been entered
       (a print, a full-page capture, a browser that reports the timeline but
       mis-ranges it), and a heading you cannot read is a worse failure than a
       heading that does not move. Same reason .h-rise wipes instead of fading. */
    .section-head h2 {
      animation: head-rise var(--ease) both;
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }
    @keyframes head-rise {
      from { transform: translateY(var(--s-3)); }
      to   { transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-photo .photo-fit, .post-figure .photo-fit,
  .cond-photo .photo-fit, .loc-photo .photo-fit,
  .hero-video-slot, .section-head h2 { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* Contact page: the clinic is in a multi-suite building behind a restaurant, so
   a photograph of the actual interior does real wayfinding work here. */
.contact-photo { margin: 0 0 var(--s-5); }
.contact-photo .photo-fit {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.contact-photo figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}