/* ==========================================================================
   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);
}

* { 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: 17px;
  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: 1.12; color: var(--navy-900); letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.6rem); }
h3 { font-size: 1.16rem; 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: .95rem; 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: #FFD54F; }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-ghost-light { border-color: rgba(255, 255, 255, .45); color: #fff; 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: #0E4A55; color: #fff; border-color: #0E4A55;
  box-shadow: 0 14px 30px -14px rgba(6, 38, 44, .7); }
.btn-teal:hover { background: #14606E; border-color: #14606E; color: #fff; }
.btn-ghost-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }
.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 .88rem/1 var(--sans); letter-spacing: .045em; color: #EAF1F8;
  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: #DDE8F3; font-size: .88rem; 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 .82rem/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: #fff; }
.drop-pill-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.drop-pill { display: inline-flex; align-items: center; text-decoration: none;
  font: 600 .8rem/1 var(--sans); color: #DDE8F3; 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, #12457F 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, #0E3A6E 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: #E7EFF7; 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: linear-gradient(180deg,
    #0E3060 0%, #1A4478 16%, #2C5C94 32%, #57679E 42%, #8A6A94 50%,
    #B76C74 57%, #D97F55 62%, #F0A04B 66.5%, #FBC65B 69%, #FFE9A4 71%);
  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, #FFF8D9 0%, #FFE08A 34%, #FDC237 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: linear-gradient(180deg, #D08A42 0%, #7E6788 14%, #4C74A0 38%, #2B5586 70%, #1A426F 100%); }
.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: #1E3358; 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%, #050F1E 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 .78rem/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: #fff; margin: .9rem 0 1.1rem; max-width: 14ch; }
.lede { font-size: 1.08rem; color: #B9C9DA; max-width: 54ch; }
.hero .lede { color: #C6D4E2; }
.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: 2rem; color: var(--gold); line-height: 1; }
.hero-stats dd { font-size: .8rem; color: #C9D6E4; margin-top: .35rem; max-width: 17ch; }

/* page-load choreography */
.h-rise { opacity: 0; animation: hRise .95s var(--ease) forwards; animation-delay: var(--hd, 0s); }
@keyframes hRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ------------------------------ 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: clamp(3.4rem, 11.5vw, 10rem); line-height: 1; letter-spacing: -.02em;
  /* the sweep: a wide gold gradient clipped to the glyphs, panned slowly */
  background: linear-gradient(100deg,
    #C99A22 0%, #F0CB5A 18%, #FFF6D6 30%, #FDC929 42%, #B8861B 62%, #F0CB5A 84%, #C99A22 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: 1.05rem; color: #B9C9DA; 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: #C9D6E4; border-radius: 999px; padding: .55rem 1.25rem; cursor: pointer;
  font: 700 .76rem/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: #fff; }
.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: 1.12rem; font-weight: 600; color: #fff; }
.drip-ing { font: 600 .72rem/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: .82rem; line-height: 1.55; color: #A9BCCE;
  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: 1.4rem;
  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: .98rem; }
  /* 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 .8rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #9FB6CC; }
@keyframes marquee { to { transform: translateX(-50%); } }

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

.section { position: relative; padding: clamp(3.4rem, 8vh, 5.8rem) 1.2rem; }
.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: #DFE9F3; overflow: hidden; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { text-align: center; max-width: 780px; margin-bottom: 2.6rem; }
.section-head h2 { margin-top: .8rem; }
.section-sub { color: var(--muted); margin-top: .9rem; }
.section-dark .section-sub { color: #A9BCCE; }
.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: #fff; 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: #fff; 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: #E7EFF7; 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: .95rem; color: #C6D4E2; }
.price-list dd { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--gold); white-space: nowrap; }
.price-note { font-size: .82rem; line-height: 1.55; color: #A9BDD0; 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: .8rem; 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: #fff; 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: 1.12rem; font-weight: 600; color: var(--navy-900); line-height: 1.25; }
.subsvc-card > span { font-size: .93rem; 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 .8rem/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: 1.12rem; color: var(--navy-900); line-height: 1.3; }
.svc-body > span { font-size: .88rem; color: var(--muted); }
.svc-more { display: inline-flex; align-items: center; gap: .45rem; font: 700 .8rem/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: #fff; 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), #EAB61F); color: var(--navy-900); transform: scale(1.06) rotate(-3deg); }
.svc-tile strong { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; line-height: 1.28; color: var(--navy-900); }
.svc-tile-sub { font-size: .85rem; 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: .83rem; 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: 1.35rem; font-weight: 600; color: #fff; }
.doc-role { font: 800 .74rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.doc-bio { font-size: .87rem; color: #A9BCCE; }
.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 .7rem/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: #fff; margin-bottom: .3rem; }
.why-strip span { font-size: .84rem; color: #A9BCCE; }

/* ------------------------------ 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: clamp(1.25rem, 2.4vw, 1.75rem); 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 1.1rem/1 var(--serif); flex-shrink: 0; }
.quote-slide figcaption strong, .quote-card figcaption strong { display: block; font-size: .95rem; color: var(--navy-900); }
.quote-slide figcaption small, .quote-card figcaption small { color: var(--muted); font-size: .78rem; }
.quote-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.8rem; }
.quote-dots button { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--navy-800); background: transparent; cursor: pointer; padding: 0; transition: background .25s, transform .25s; }
.quote-dots button[aria-selected="true"] { background: var(--gold); border-color: var(--navy-800); transform: scale(1.25); }

.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.quote-card { background: #fff; 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: 1.05rem; 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 .74rem/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 .8rem/1.2 var(--sans); color: #DDE8F3; 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: .9rem; font-weight: 600; color: #C4D2E0; 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: #fff; 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); }
.post-tag { font: 800 .68rem/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: 1.08rem; line-height: 1.35; color: var(--navy-900); padding: 0 1.2rem; }
.post-date { font-size: .78rem; 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: #DFE9F3; 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: #fff; margin-bottom: .9rem; }
.cta-band p { color: #A9BCCE; 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: #E7EFF7;
  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: #fff; margin: .9rem 0 1rem; max-width: 22ch; }
.page-hero .lede { max-width: 62ch; }
.crumbs { margin-bottom: 1.4rem; font-size: .8rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: #64809C; }
.crumbs a { color: #A9BCCE; 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: .8rem 0 1.1rem; }
.svc-why .btn { margin-top: 1.4rem; }

.check-list { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.check-list li { padding-left: 1.9rem; position: relative; font-size: .95rem; }
.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: #fff; 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 2.2rem/1 var(--serif); color: transparent; -webkit-text-stroke: 1.3px #9C7A0E; display: block; margin-bottom: .7rem; }
.exp-card h3 { margin-bottom: .5rem; }
.exp-card p { font-size: .9rem; 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: #fff; 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 1.1rem/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: .9rem; color: var(--muted); }
.steps-light .step p { color: #A9BCCE; }

.cond-links { max-width: var(--wrap); margin: 0 auto; padding: 0 0 1rem; }
.cond-links h2 { font-size: 1.2rem; margin-bottom: .8rem; }
.cond-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.cond-links a { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem; font-size: .85rem; 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: .82rem; letter-spacing: .04em; color: var(--gold-soft); }
.provider-tagline { font-size: clamp(1.5rem, 2.6vw, 2.1rem); 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: 1.12rem; line-height: 1.5; color: var(--navy-900); }
.provider-quote cite { display: block; margin-top: .7rem; font: 700 .78rem/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 .74rem/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: .9rem; 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 1rem/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: 1.25rem; color: #fff; transition: color .25s; }
.pathway-name span { display: block; margin-top: .2rem; font-size: .85rem; color: #A9BCCE; }
.pathway:hover .pathway-name strong { color: var(--gold); }
.pathway-price { font: 800 .78rem/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: #fff; 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: .98rem; 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: .93rem; }

.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: #fff; 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 1rem/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: #fff; border-radius: 999px; padding: .5rem 1.05rem; font: 700 .8rem/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: 1.25rem; 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: #fff; 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: 1rem; line-height: 1.3; }
.sym-card { background: #fff; 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: 1.15rem; margin-bottom: .9rem; }
.sym-card .btn { margin-top: 1.2rem; width: 100%; }
.sym-call { font-size: .84rem; 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: .9rem; }
.loc-others a:hover { color: var(--bronze-text); }
.loc-hours { color: var(--muted); font-size: .88rem; margin-top: .6rem; }
.loc-map-link { display: inline-block; margin-top: .9rem; font-weight: 700; }
.loc-more { margin-top: 1.2rem; font-size: .92rem; color: var(--muted); }
address { font-style: normal; line-height: 1.5; }
.note-line { margin-top: 1.2rem; font-size: .9rem; 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 3rem/1 var(--serif); color: var(--gold); }
.team-tile figcaption { margin-top: .6rem; text-align: center; }
.team-tile figcaption strong { display: block; font-size: .92rem; color: inherit; }
.section-dark .team-tile figcaption strong { color: #fff; }
.team-tile figcaption span { font-size: .78rem; color: var(--muted); }
.section-dark .team-tile figcaption span { color: #A9BCCE; }
.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: .88rem; color: var(--muted); font-style: italic; }
.section-dark .team-hero figcaption { color: #A9BCCE; }
.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: #fff; 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: .87rem; 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 1.5rem/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: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem 1.6rem; position: relative; }
.res-num { font: 600 2.6rem/1 var(--serif); color: transparent; -webkit-text-stroke: 1.4px #9C7A0E; display: block; margin-bottom: .8rem; }
.res-card h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.res-card > p { color: var(--muted); font-size: .93rem; 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: #A9BCCE; 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 .72rem/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: 1.02rem; }
.contact-list a:hover { color: var(--bronze-text); }
.contact-note { margin-top: 1.8rem; }
.contact-note .btn { width: auto; }
.contact-form { background: #fff; 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: 1.5rem; }
.contact-form label { display: flex; flex-direction: column; gap: .35rem; font: 700 .8rem/1.3 var(--sans); letter-spacing: .04em; color: var(--navy-900); }
.contact-form input, .contact-form select, .contact-form textarea {
  font: 500 1rem/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: .78rem; 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: #B3261E; font: 700 .85rem/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: #A9BCCE; }

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

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

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

.site-footer { position: relative; background: var(--navy-950); color: #A9BCCE; 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: .86rem; 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: .86rem; text-decoration: none; }
.footer-ig:hover { color: var(--gold-soft); }
.footer-col h2 { font: 800 .74rem/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: #C4D2E0; text-decoration: none; font-size: .88rem; }
.footer-col a:hover { color: var(--gold); }
.footer-contact address a { color: #C4D2E0; text-decoration: none; font-size: .9rem; }
.footer-hours { font-size: .84rem; margin: .8rem 0; color: #8FA6BD; }
.footer-tel { color: var(--gold) !important; font-weight: 800; text-decoration: none; font-size: 1rem; }
.footer-tel span { color: #C4D2E0; font-weight: 600; font-size: .85rem; }
.footer-mail { color: #C4D2E0; text-decoration: none; font-size: .88rem; }
.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: .8rem; color: #8FA6BD; }
.footer-base a { color: #C4D2E0; 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 .95rem/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: #fff; font: 700 .85rem/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: 1.05rem; }
  .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; }
  .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; }
}