/* ==========================================================================
   The Fix Health + Aesthetics: styles.css
   Single source of truth. Plain CSS, no build step.
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
input{font:inherit;}

/* ---------- Overflow guard (never let the page scroll sideways) ---------- */
html{overflow-x:hidden;overflow-x:clip;}
body{overflow-x:hidden;overflow-x:clip;}

/* ---------- Tokens ---------- */
:root{
  --void:#000000;
  --canvas:#0A0A0C;
  --panel:#131316;
  --panel-hi:#1B1B20;
  --chrome-hi:#FFFFFF;
  --chrome-mid:#C9C9D2;
  --chrome-lo:#8A8A93;
  --accent:#FF2D8E;
  --accent-deep:#C21D6E;
  --accent-muted:rgba(255,45,142,.22);
  --text-primary:#EDEAEE;
  --text-secondary:#A9A5AD;
  --btn-ink:#14060D;
  --hairline:rgba(255,45,142,.35);
  --hairline-quiet:rgba(169,165,173,.18);

  --font-display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --font-sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --font-script:'Great Vibes',cursive;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --header-h:76px;
  --gutter:clamp(20px,6vw,64px);
  --stagger:80ms;
}

/* ---------- Base ---------- */
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

::selection{background:var(--accent-muted);color:var(--chrome-hi);}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1000;
  background:var(--accent);color:var(--btn-ink);
  padding:12px 18px;border-radius:6px;
  font-family:var(--font-sans);font-weight:500;text-decoration:none;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:12px;}

/* ---------- Focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,.exam-hold:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--font-sans);font-weight:300;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;color:var(--accent);
  margin:0 0 14px;
}
.script-tag{
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--chrome-mid);
  margin:10px 0;
}
h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem,4vw,2.6rem);
  line-height:1.15;
  color:var(--text-primary);
}
h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.2rem,2.4vw,1.5rem);
  color:var(--text-primary);
}
p.lede{
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--text-secondary);
  max-width:52ch;
}
.body-copy{
  color:var(--text-secondary);
  font-size:1rem;
  max-width:64ch;
}

/* chrome gradient headline: gradient clip on the element, a text-shadow-only
   duplicate on ::after (attr(data-text), set by JS) carries the magenta rim
   so the glow never fights the background-clip. */
.chrome-text{
  position:relative;
  display:inline-block;
  background:linear-gradient(180deg,var(--chrome-hi) 0%,var(--chrome-mid) 55%,var(--chrome-lo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.chrome-text::after{
  content:attr(data-text);
  position:absolute;inset:0;
  color:transparent;
  text-shadow:0 0 1px rgba(255,45,142,.5),0 0 20px rgba(255,45,142,.35);
  z-index:-1;
  pointer-events:none;
}

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

/* placeholder facts flagged for swap before launch. outline (not border-bottom)
   on purpose: several todo-swap hosts (.btn-ghost, .btn-outline, .contact-tile)
   already set the `border` shorthand, which would silently win over a
   border-bottom and hide the flag. outline never collides with border. */
.todo-swap{
  outline:1px dashed var(--accent);
  outline-offset:3px;
  border-radius:inherit;
  cursor:help;
}
/* on a solid pink button the pink dashed outline nearly disappears against the
   fill color it sits next to; swap to a dark dash so the flag stays legible. */
.btn-primary.todo-swap{
  outline-color:var(--btn-ink);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-sans);font-weight:500;
  font-size:.95rem;letter-spacing:.02em;
  text-decoration:none;
  transition:transform .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  text-shadow:none;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);
  color:var(--btn-ink);
  box-shadow:0 0 0 rgba(255,45,142,0);
}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  color:var(--chrome-hi);
  border:1px solid rgba(255,255,255,.5);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn-outline{
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--hairline-quiet);
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-small{padding:10px 20px;font-size:.85rem;}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ---------- Fixed background environment ---------- */
.env{
  position:fixed;inset:0;z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 18% 20%, rgba(255,45,142,.05) 0%, rgba(255,45,142,0) 60%),
    radial-gradient(ellipse 80% 60% at 85% 80%, rgba(255,45,142,.04) 0%, rgba(255,45,142,0) 60%),
    var(--canvas);
  background-size:200% 200%,200% 200%,100% 100%;
  animation:envDrift 120s ease-in-out infinite;
}
@keyframes envDrift{
  0%{background-position:0% 0%,100% 100%,0 0;}
  50%{background-position:30% 20%,70% 60%,0 0;}
  100%{background-position:0% 0%,100% 100%,0 0;}
}
.env .mote{
  position:absolute;border-radius:50%;
  background:var(--accent);
  opacity:.35;
  filter:blur(.5px);
  animation:moteDrift 100s linear infinite;
  animation-delay:calc(var(--d,0s));
}
@keyframes moteDrift{
  0%{transform:translate(0,0);opacity:0;}
  10%{opacity:.4;}
  50%{transform:translate(var(--mx,20px),var(--my,-40px));}
  90%{opacity:.4;}
  100%{transform:translate(0,0);opacity:0;}
}

/* one true pause switch: hidden tab pauses every animation on the page */
body.paused *,body.paused *::before,body.paused *::after{
  animation-play-state:paused!important;
}
/* off-screen pause for the environment layer, toggled by an IntersectionObserver */
.env:not(.env-visible){animation-play-state:paused;}
.env:not(.env-visible) .mote{animation-play-state:paused;}

/* ---------- Section dividers ---------- */
.divider{
  display:flex;align-items:center;justify-content:center;
  padding:0;height:1px;
  background:linear-gradient(90deg,rgba(255,45,142,0) 0%,var(--hairline) 50%,rgba(255,45,142,0) 100%);
  position:relative;
}
.divider .diamond{
  position:absolute;left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--accent);
  box-shadow:0 0 10px rgba(255,45,142,.6);
}

/* ---------- Layout primitives ---------- */
main{display:block;}
.section{
  position:relative;
  padding:clamp(64px,11vw,140px) var(--gutter);
}
.section-inner{max-width:1180px;margin:0 auto;}
.section-head{margin-bottom:clamp(32px,6vw,56px);}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.section-head h2{max-width:20ch;}
.section-head.center h2{margin-left:auto;margin-right:auto;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  width:100%;
  max-width:1280px;margin:0 auto;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
/* the supplied logo is baked on pure black, so screen blending drops its
   ground out against the near-black canvas instead of showing a dark plate */
/* no wordmark in the header (client request): the nav centres in the space
   left of the CTA so the bar stays balanced without a left-hand mark */
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;}
.header-inner nav{grid-column:2;justify-self:center;}
.header-inner > .btn{grid-column:3;justify-self:end;}
/* header CTA hides while the hero's CTA is on screen, returns once scrolled past;
   .cta-armed is set by JS so a no-JS visitor always sees the button */
.site-header.cta-armed:not(.cta-visible) > .header-inner > .btn{animation:none!important;opacity:0!important;visibility:hidden!important;transition:none!important;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s;}
.site-header.cta-armed.cta-visible > .header-inner > .btn{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .35s var(--ease),visibility 0s;}
@media (max-width:767px){ .site-header .header-inner > .btn{display:none;} }  /* the bottom bar has Book */
.nav-list{
  display:flex;gap:32px;
}
.nav-list a{
  text-decoration:none;
  font-size:.9rem;letter-spacing:.03em;
  color:var(--text-secondary);
  position:relative;
  padding:4px 0;
  transition:color .25s var(--ease);
}
.nav-list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);
  transition:right .3s var(--ease);
}
.nav-list a:hover{color:var(--text-primary);}
.nav-list a:hover::after{right:0;}
.nav-list a[aria-current="page"]{color:var(--accent);}
@media (max-width:768px){
  .nav-list{display:none;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:var(--void);}
.hero-pin{height:400vh;}
.hero-stage{
  position:sticky;top:0;
  height:100vh;
  overflow:hidden;
  background:var(--void);
}
.poster{
  position:absolute;inset:0;
  background-image:
    image-set(url('hero-poster.jpg') 1x),
    radial-gradient(ellipse 90% 55% at 50% 98%, rgba(255,45,142,.30) 0%, rgba(255,45,142,.10) 30%, rgba(0,0,0,0) 62%),
    radial-gradient(ellipse 130% 110% at 50% 0%, #0d0d11 0%, #000 55%);
  background-color:#000;
  background-size:cover;background-position:center 42%;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity .8s var(--ease);
  will-change:transform;
  transform:translateZ(0);
}
.hero-stage.video-ready .hero-video{opacity:1;}
.hero-stage.video-failed .hero-video{display:none;}

.ring{
  position:absolute;left:50%;top:50%;
  width:48px;height:48px;
  transform:translate(-50%,-50%) rotate(-90deg);
  color:var(--accent);
  opacity:.9;
}
.ring circle{transition:stroke-dashoffset .2s linear;}
.hero-stage.video-ready .ring,.hero-stage.video-failed .ring{display:none;}

.scroll-chevron{
  position:absolute;left:50%;bottom:14vh;
  transform:translateX(-50%);
  width:22px;height:22px;
  border-right:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.55);
  transform-origin:center;
  animation:chevronFloat 2.4s ease-in-out infinite;
}
@keyframes chevronFloat{
  0%,100%{transform:translateX(-50%) rotate(45deg) translateY(0);}
  50%{transform:translateX(-50%) rotate(45deg) translateY(8px);}
}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%);
}

.hero-bands{position:absolute;inset:0;}
.band{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:0 var(--gutter);
  opacity:0;
  text-shadow:var(--tshadow);
  pointer-events:none;
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,.66) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%);
}
.band .btn{text-shadow:none;pointer-events:auto;}

.band-line{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,4.4vw,2.5rem);
  color:var(--text-primary);
  max-width:20ch;
  position:relative;
}

/* band 1: blur-to-sharp */
.band-1 .line-wrap{position:relative;display:inline-block;}
.band-1 .line-soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));}
.band-1 .line-sharp{opacity:var(--k,0);}

/* band 2: drift-down (word split) */
.band-2 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  display:inline-block;
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-24px));
}

/* band 3: word-punch, "nurse practitioner" emphasized */
.band-3 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  display:inline-block;
  opacity:var(--kc);
  transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.band-3 .w.em{--ov:.24;--sd:.16;--ss:2.6;color:var(--accent);}

/* band 4: settle, word-by-word rise, then subline, then CTA */
.band-settle{gap:2px;}
.band-settle .eyebrow{opacity:1;color:var(--chrome-hi);}   /* client request: white, not pink */
.band-settle .rise-word{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  display:inline-block;
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*20px));
  /* background-clip:text on the ancestor .hero-h1 only clips against text painted
     directly by that box, not nested inline-block descendants, so each word
     carries its own copy of the same gradient clip. */
  background:linear-gradient(180deg,var(--chrome-hi) 0%,var(--chrome-mid) 55%,var(--chrome-lo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-h1{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(2.2rem,6.4vw,4.4rem);
  margin:2px 0 6px;
}
/* the band's legibility text-shadow paints OVER background-clipped text and
   turns the chrome gradient charcoal; shadow duty moves to the filter above */
.band-settle .rise-word{text-shadow:none;}
.band-settle .script-tag{
  --kc:clamp(0,(var(--k,0) - .32)*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*14px));
}
.band-settle .hero-sub{
  --ks:clamp(0,(var(--k,0) - .66)*4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*10px));
  color:var(--text-secondary);
  font-size:1.05rem;
  max-width:44ch;
  margin:6px 0 0;
}
.band-settle .cta-row{
  --kb:clamp(0,(var(--k,0) - .78)*5,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*10px));
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  margin-top:28px;
  pointer-events:auto;
}
.hero .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}
.hero .btn-ghost:hover{background:transparent;color:#fff;border-color:var(--accent);}

/* ==========================================================================
   STATIC HERO (five gates, must match main.js GATES exactly)
   1. (max-width: 720px)
   2. (orientation: portrait) and (max-width: 1024px)
   3. (orientation: portrait) and (pointer: coarse)
   4. (orientation: landscape) and (pointer: coarse) and (max-height: 560px)
   5. (prefers-reduced-motion: reduce)
   ========================================================================== */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero-pin{height:auto;}
  .hero-stage{position:relative;top:auto;height:100svh;min-height:560px;}
  .band-1,.band-2,.band-3{display:none;}
  .band-settle{
    position:relative;inset:auto;opacity:1!important;
    padding-top:calc(var(--header-h) + 24px);
  }
  .band-settle::before{opacity:.6;}
  /* Portrait cover-crop shows the frame's centre column, which puts the floating
     droplet directly behind the brand mark and makes both unreadable. Anchor the
     poster to its bottom and overscale it so the droplet crops away entirely:
     the chrome ripples become a horizon band and the mark sits on clean black. */
  .poster{
    background-size:auto 172%;
    background-position:50% 100%;
  }
  .hero-stage::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(180deg,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.92) 38%,
      rgba(0,0,0,.78) 58%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.22) 88%, rgba(0,0,0,.05) 100%);
  }
  .hero-bands{position:relative;z-index:2;}
  .band-settle .rise-word,
  .band-settle .script-tag,
  .band-settle .hero-sub,
  .band-settle .cta-row{
    opacity:1!important;transform:none!important;
  }
  /* the static hero has no scroll drive, so the settle mark opens arrived */
  .band-settle .hero-logo{
    --kc:1;opacity:1;transform:none;
    filter:drop-shadow(0 0 30px rgba(255,45,142,.34));
  }
  .ring,.scroll-chevron{display:none;}
}

@media (max-height:560px){
  .scroll-chevron{display:none;}
}

/* ==========================================================================
   TWO PATHS
   ========================================================================== */
.paths-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hairline-quiet);
  border:1px solid var(--hairline-quiet);
  border-radius:18px;
  overflow:hidden;
}
.path-card{
  background:var(--panel);
  padding:clamp(28px,4vw,48px);
  display:flex;flex-direction:column;gap:14px;
}
.path-card .kicker{
  font-family:var(--font-sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;
  color:var(--chrome-lo);
}
.path-card h3{font-size:clamp(1.3rem,2.6vw,1.7rem);max-width:16ch;}
.path-card p{color:var(--text-secondary);max-width:36ch;}
.path-card .path-link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);text-decoration:none;font-weight:500;
  font-size:.92rem;
}
.path-card .path-link svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.path-card .path-link:hover svg{transform:translateX(4px);}
@media (max-width:720px){
  .paths-grid{grid-template-columns:1fr;}
}

/* ---------- Positioning band ---------- */
.positioning{text-align:center;}
.positioning .section-inner{max-width:760px;}
.chip-row{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:28px;
}
.chip{
  background:rgba(8,8,15,.55);
  border:1px solid rgba(96,96,126,.3);
  border-radius:999px;
  padding:9px 18px;
  font-size:.82rem;letter-spacing:.02em;
  color:var(--text-secondary);
  backdrop-filter:blur(10px);
}

/* ==========================================================================
   AESTHETICS PATH, numbered rail
   ========================================================================== */
.aesthetics{background:var(--canvas);}
.rail{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px 28px;
  margin-top:40px;
}
.rail-item{display:contents;}
.rail-num{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1.6rem;color:var(--chrome-lo);
  position:relative;
}
.rail-item:not(:last-child) .rail-num::after{
  content:"";position:absolute;left:50%;top:2.4em;bottom:-1.6em;
  width:1px;background:var(--hairline-quiet);
  transform:translateX(-50%);
}
.rail-body h3{font-size:1.15rem;margin-bottom:6px;}
.rail-body p{color:var(--text-secondary);max-width:56ch;}
.rail-item:not(:last-child) .rail-body{padding-bottom:24px;}

/* ==========================================================================
   WELLNESS PATH, split panel, opposite skeleton from aesthetics
   ========================================================================== */
.wellness{background:var(--panel);}
.wellness .section-inner{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);
  align-items:start;
}
.wellness-intro{position:sticky;top:calc(var(--header-h) + 24px);}
.wellness-list{display:flex;flex-direction:column;gap:28px;}
.wellness-item{
  border-left:1px solid var(--hairline-quiet);
  padding-left:22px;
  position:relative;
}
.wellness-item::before{
  content:"";position:absolute;left:-4px;top:6px;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
}
.wellness-item h3{font-size:1.1rem;margin-bottom:6px;}
.wellness-item p{color:var(--text-secondary);max-width:52ch;}
@media (max-width:860px){
  .wellness .section-inner{grid-template-columns:1fr;}
  .wellness-intro{position:relative;top:auto;}
}

/* ==========================================================================
   ELIZABETH: portrait + bio
   ========================================================================== */
.elizabeth .section-inner{
  display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(32px,5vw,72px);
  align-items:center;
}
.monogram-frame{
  aspect-ratio:4/5;
  border-radius:22px;
  background:radial-gradient(ellipse 120% 90% at 50% 100%,rgba(255,45,142,.16),rgba(255,45,142,0) 60%),
             linear-gradient(160deg,#161619,#0a0a0c 70%);
  border:1px solid var(--hairline-quiet);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.monogram-frame .monogram{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(4rem,10vw,7rem);
  letter-spacing:-.02em;
}
.monogram-frame .frame-note{
  position:absolute;bottom:14px;left:14px;right:14px;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--chrome-lo);
  text-align:center;
}
.bio h2{margin-bottom:6px;}
.bio .role-sub{color:var(--text-secondary);font-size:1rem;margin-bottom:18px;}
.name-flourish{display:block;width:min(280px,60%);height:26px;margin:4px 0 18px;}
.name-flourish path{
  fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-linecap:round;
}
.bio p.body-copy{margin-bottom:20px;}
@media (max-width:860px){
  .elizabeth .section-inner{grid-template-columns:1fr;}
  .monogram-frame{max-width:320px;margin:0 auto;}
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:40px;
}
.testimonial-card{
  background:var(--panel);
  border:1px solid var(--hairline-quiet);
  border-radius:16px;
  padding:28px 24px;
  position:relative;
}
.testimonial-card .quote-mark{
  font-family:var(--font-display);font-style:italic;
  font-size:2.6rem;line-height:1;color:var(--accent);
  display:block;margin-bottom:8px;
  filter:drop-shadow(0 0 10px rgba(255,45,142,.35));
}
.testimonial-card p{color:var(--text-secondary);font-size:.94rem;}
.testimonial-card .attribution{
  display:block;margin-top:16px;
  font-family:var(--font-sans);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:.72rem;color:var(--chrome-mid);
}
.testimonial-card:nth-child(4),.testimonial-card:nth-child(5){grid-column:span 1;}
@media (max-width:960px){
  .testimonials-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .testimonials-grid{grid-template-columns:1fr;}
}
.disclaimer{
  margin-top:28px;color:var(--chrome-lo);font-size:.8rem;max-width:70ch;
}

/* ==========================================================================
   EXAM SECTION: conversion, syringe interactive
   ========================================================================== */
.exam{
  background:radial-gradient(ellipse 90% 70% at 50% 100%,rgba(255,45,142,.08),rgba(255,45,142,0) 60%),var(--void);
  border-top:1px solid var(--hairline-quiet);
  border-bottom:1px solid var(--hairline-quiet);
}
.exam .section-inner{
  display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,80px);
  align-items:center;
}
.exam-copy{max-width:56ch;}
.exam-copy .body-copy{margin-bottom:16px;}
.exam-copy .script-tag{margin:4px 0 20px;}
.reassure{
  color:var(--chrome-lo);
  transition:color .5s var(--ease),text-shadow .5s var(--ease);
}
.reassure.lit{
  color:var(--accent);
  text-shadow:0 0 16px rgba(255,45,142,.5);
}
.exam-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;}

.syringe-wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  justify-self:center;
}
.exam-hold{
  cursor:pointer;
  border:0;background:none;padding:20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  border-radius:20px;
}
.syringe{width:min(210px,44vw);height:auto;overflow:visible;
  filter:drop-shadow(0 0 26px rgba(255,45,142,.22));}
.syringe-draw line,.syringe-draw rect,.syringe-draw path{
  fill:none;stroke:var(--chrome-mid);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.syringe-draw .accent-part{stroke:var(--accent);stroke-width:2.4;}
.syringe-fill{
  fill:var(--accent);
  opacity:.85;
  transform:scaleY(0);
  transition:transform .1s linear;
}
.hold-hint{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chrome-lo);
}
.exam-hold.holding .hold-hint,.exam-hold.filled .hold-hint{color:var(--accent);}
.exam-hold.filled .syringe-fill{transition:transform .4s var(--ease-soft);}
.exam-hold:not(.holding):not(.filled) .syringe-fill{transition:transform .8s var(--ease-soft);}

/* ==========================================================================
   SERVICE AREA: minimal centered
   ========================================================================== */
.service-area{text-align:center;}
.service-area .section-inner{max-width:640px;}

/* ==========================================================================
   CONTACT: tile row
   ========================================================================== */
.contact-tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:36px;
}
.contact-tile{
  background:var(--panel);
  border:1px solid var(--hairline-quiet);
  border-radius:14px;
  padding:26px 20px;
  text-align:center;
  text-decoration:none;
  color:var(--text-primary);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.contact-tile:hover{border-color:var(--accent);transform:translateY(-3px);}
.contact-tile svg{width:26px;height:26px;margin:0 auto 12px;color:var(--accent);}
.contact-tile .tile-label{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chrome-lo);margin-bottom:6px;
}
.contact-tile .tile-value{font-size:1rem;}
.contact-meta{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;
  margin-top:32px;color:var(--text-secondary);font-size:.92rem;
}
.contact-meta strong{color:var(--text-primary);font-weight:500;}
@media (max-width:720px){
  .contact-tiles{grid-template-columns:1fr;}
}

/* ==========================================================================
   SIGNUP: narrow centered form
   ========================================================================== */
.signup{text-align:center;}
.signup .section-inner{max-width:560px;}
.signup-form{
  display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center;
}
.signup-form input[type="email"]{
  flex:1 1 260px;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--hairline-quiet);
  border-radius:999px;
  padding:14px 20px;
  color:var(--text-primary);
  transition:border-color .3s var(--ease);
}
.signup-form input[type="email"]::placeholder{color:var(--chrome-lo);}
.signup-form input[type="email"]:focus{border-color:var(--accent);outline:none;}
.signup-success{
  margin-top:20px;color:var(--accent);font-size:1rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:var(--void);
  padding:56px var(--gutter) calc(56px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hairline-quiet);
}
.footer-inner{
  max-width:1180px;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
}
.footer-brand{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1.2rem;
}
.footer-line{color:var(--text-secondary);font-size:.88rem;max-width:70ch;}
.footer-social{display:flex;gap:16px;margin-top:6px;}
.footer-social a{
  color:var(--chrome-lo);text-decoration:none;
  border:1px solid var(--hairline-quiet);
  border-radius:50%;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.footer-social a:hover{color:var(--accent);border-color:var(--accent);}
.footer-social svg{width:16px;height:16px;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--hairline-quiet);
  color:var(--chrome-lo);font-size:.78rem;
}

/* padding at the very bottom of the page so the sticky mobile bar never
   covers the footer's last line */
@media (max-width:767px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
}

/* ==========================================================================
   STICKY MOBILE BAR
   ========================================================================== */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:rgba(10,10,12,.92);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
  padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
}
.mobile-bar-inner{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:520px;margin:0 auto;
}
.mobile-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  min-height:44px;
  padding:6px 4px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text-primary);
  font-size:.72rem;letter-spacing:.03em;
  transition:background-color .25s var(--ease);
}
.mobile-bar a svg{width:18px;height:18px;color:var(--accent);}
.mobile-bar a:active{background:rgba(255,45,142,.12);}
.mobile-bar a.bar-book{color:var(--btn-ink);background:var(--accent);}
.mobile-bar a.bar-book svg{color:var(--btn-ink);}
@media (max-width:767px){
  .mobile-bar{display:block;}
}

/* ==========================================================================
   ENTRANCE CHOREOGRAPHY
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft);
}
.reveal.in{opacity:1;transform:translateY(0);}

.stagger > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft);
}
.stagger.in > *{opacity:1;transform:translateY(0);}
.stagger.in > *:nth-child(1){transition-delay:0ms;}
.stagger.in > *:nth-child(2){transition-delay:calc(var(--stagger)*1);}
.stagger.in > *:nth-child(3){transition-delay:calc(var(--stagger)*2);}
.stagger.in > *:nth-child(4){transition-delay:calc(var(--stagger)*3);}
.stagger.in > *:nth-child(5){transition-delay:calc(var(--stagger)*4);}
.stagger.in > *:nth-child(6){transition-delay:calc(var(--stagger)*5);}
/* retire the stagger delays once the entrance has played, so later hovers
   never inherit the stagger lag. Matches/beats the nth-child specificity. */
.stagger.in.settled > *:nth-child(1),
.stagger.in.settled > *:nth-child(2),
.stagger.in.settled > *:nth-child(3),
.stagger.in.settled > *:nth-child(4),
.stagger.in.settled > *:nth-child(5),
.stagger.in.settled > *:nth-child(6){
  transition-delay:0ms!important;
}

/* self-drawing SVG lines (syringe, name flourish) share this pattern:
   JS sets stroke-dasharray/offset inline at full length, then toggles .drawn
   which transitions dashoffset to 0. */
.draw-line{transition:stroke-dashoffset 1.1s var(--ease-soft);}

/* one living element per section: whisper glows */
.cta-glow{position:relative;}
.cta-glow::after{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(255,45,142,.35),rgba(255,45,142,0) 70%);
  opacity:.5;
  animation:glowPulse 5s ease-in-out infinite;
  animation-delay:-2.4s;
  z-index:-1;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{opacity:.25;}
  50%{opacity:.55;}
}

/* ==========================================================================
   REDUCED MOTION: complete, both directions
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.stagger > *{opacity:1!important;transform:none!important;}
  .env,.env .mote{animation:none!important;}
  .draw-line{stroke-dashoffset:0!important;}
  html{scroll-behavior:auto;}
}

/* JS also applies this class live when the media query flips mid-session,
   so the reduced-motion pin works without a reload. */
body.reduced-motion .reveal,body.reduced-motion .stagger > *{
  opacity:1!important;transform:none!important;
}
body.reduced-motion .env,body.reduced-motion .env .mote{animation:none!important;}
body.reduced-motion .draw-line{stroke-dashoffset:0!important;}
body.reduced-motion .exam-hold .syringe-fill{transform:scaleY(1)!important;}
body.reduced-motion .reassure{color:var(--accent)!important;}

html{scroll-behavior:smooth;}
:target,[id]{scroll-margin-top:calc(var(--header-h) + 16px);}

/* ---------- Responsive base ---------- */
@media (max-width:768px){
  .section{padding:56px var(--gutter);}
}


/* ---- hero brand mark: the journey settles on the real logo ---- */
.hero-h1{margin:14px 0 14px;line-height:0;}
.hero-logo{
  --kc:clamp(0,var(--k,0)*2.2,1);
  width:clamp(205px,38vw,415px);
  height:auto;display:block;margin:0 auto;
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px)) scale(calc(.965 + .035*var(--kc)));
  filter:drop-shadow(0 0 28px rgba(255,45,142,calc(.34*var(--kc))));
}
@media (prefers-reduced-motion:reduce){
  .hero-logo{--kc:1;opacity:1;transform:none;}
}

/* Phones carry the sticky Call / Text / Book bar, so the hero's own buttons are
   the same actions twice. Hide them there; desktop and tablets keep them. */
@media (max-width:767px){ .band-settle .cta-row{display:none;} }

/* Phones: the header has nothing left in it (no mark, nav hidden, CTA in the
   bar), so it collapses. --header-h goes to 0 so every offset that used it
   (hero padding, anchor scroll margin) collapses with it. */
@media (max-width:767px){
  :root{--header-h:0px;}
  .site-header{display:none;}
}

/* back-to-top in the footer: the header has no home mark any more, and on phones
   the header is collapsed entirely, so this is the way up on every device */
.to-top{
  display:inline-block;margin-bottom:14px;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chrome-lo);text-decoration:none;
  border-bottom:1px solid var(--hairline-quiet);padding-bottom:2px;
}
.to-top:hover{color:var(--accent);border-color:var(--accent);}