/* ==========================================================================
   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:22px;
}
.nav-list a{
  text-decoration:none;
  font-size:.82rem;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;}
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing .section-inner{max-width:1180px;}
.pricing-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,64px) clamp(40px,6vw,72px);
  margin-top:8px;
}
@media (max-width:860px){
  .pricing-grid{grid-template-columns:1fr;gap:44px;}
}
.pricing-group > h3{margin-bottom:4px;}
.pricing-group .group-subhead{
  color:var(--text-secondary);font-size:.85rem;margin:0 0 22px;
}
.price-block{margin-top:26px;}
.price-block:first-of-type{margin-top:20px;}
.price-block-label{
  font-family:var(--font-sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:.74rem;color:var(--chrome-lo);
  margin:0 0 12px;
}
.price-note{
  text-transform:none;letter-spacing:0;font-weight:400;
  color:var(--text-secondary);
}
.price-block-sub{
  margin:16px 0 8px;font-size:.8rem;color:var(--text-secondary);
  font-style:italic;
}
.price-block-sub:first-of-type{margin-top:0;}
.price-block-text{
  color:var(--text-secondary);font-size:.9rem;max-width:52ch;margin:0;
}
.price-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:11px;
}
.price-row{
  display:flex;align-items:baseline;gap:8px;
}
.price-name{
  color:var(--text-secondary);font-size:.92rem;
  min-width:0;flex:0 1 auto;
}
.price-leader{
  flex:1 1 auto;min-width:12px;
  border-bottom:1px dotted var(--hairline-quiet);
  transform:translateY(-3px);
}
.price-amount{
  color:var(--text-primary);font-weight:500;font-size:.94rem;
  white-space:nowrap;text-align:right;flex:0 0 auto;
}
.price-row-wrap{display:block;}
.price-sub{
  margin:3px 0 0;text-align:right;
  font-size:.76rem;color:var(--chrome-lo);
}
@media (max-width:400px){
  .price-name{font-size:.88rem;}
  .price-amount{font-size:.9rem;}
}

/* ==========================================================================
   WEIGHT LOSS: cards up top, then a stacked narrative column. Deliberately
   not a repeat of the pricing two-column grid: cards carry their own panel
   background and border, and everything below reads as a single centered
   column rather than a second set of side-by-side lists.
   ========================================================================== */
.weightloss{background:var(--panel);}
.weightloss .section-inner{max-width:1180px;}
.wl-subhead{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  color:var(--chrome-mid);
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  margin:8px 0 0;
}
.wl-block{max-width:720px;margin:clamp(48px,7vw,72px) auto 0;}
.wl-block h3{margin-bottom:14px;}
.wl-block .body-copy + .body-copy{margin-top:16px;}

/* two treatment cards: the visual centrepiece, so they get their own panel
   surface instead of borrowing the plain price-list look from PRICING */
.wl-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  max-width:900px;margin:8px auto 0;
}
.wl-card{
  background:var(--panel-hi);
  border:1px solid var(--hairline-quiet);
  border-radius:16px;
  padding:clamp(24px,3vw,32px) clamp(22px,3vw,28px);
}
.wl-card h3{margin-bottom:6px;}
.wl-card-class{
  color:var(--chrome-lo);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 18px;
}
.wl-card-price{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,4vw,2.2rem);
  color:var(--text-primary);
  margin:0 0 16px;
}
.wl-card-price .per{
  font-family:var(--font-sans);font-weight:300;
  font-size:.85rem;color:var(--text-secondary);
  margin-left:4px;
}
.wl-card p.body-copy{max-width:none;}
@media (max-width:860px){
  .wl-cards{grid-template-columns:1fr;gap:20px;}
}

/* how they differ: a simple two-row comparison, not a grid of columns */
.wl-compare-list{
  margin:22px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--hairline-quiet);
}
.wl-compare-list li{
  display:grid;grid-template-columns:minmax(112px,auto) 1fr;
  gap:8px 18px;align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--hairline-quiet);
}
.wl-compare-name{color:var(--text-primary);font-weight:500;font-size:.95rem;}
.wl-compare-target{color:var(--text-secondary);font-size:.92rem;}

/* shared checklist treatment: inline SVG tick in the accent color, no emoji */
.wl-checklist{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}
.wl-checklist li{display:flex;gap:12px;align-items:flex-start;}
.wl-checklist .tick{
  flex:0 0 auto;width:19px;height:19px;margin-top:3px;
  color:var(--accent);
}
.wl-checklist li > span{color:var(--text-secondary);font-size:.92rem;max-width:52ch;}
.wl-checklist li strong{color:var(--text-primary);font-weight:500;}
.wl-included{max-width:820px;}
.wl-included .wl-checklist li > span{max-width:none;}
@media (min-width:640px){
  .wl-included .wl-checklist{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:32px;row-gap:14px;
  }
}

/* pull quotes: larger serif line, reused for the nutrition aside and the close */
.wl-pull{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(1.35rem,3.2vw,1.85rem);
  line-height:1.3;
  color:var(--chrome-mid);
  margin:24px 0;
  max-width:20ch;
}
.wl-close{text-align:center;max-width:640px;}
.wl-close .wl-pull{margin-left:auto;margin-right:auto;max-width:26ch;}

.wl-note{color:var(--text-secondary);font-size:.85rem;max-width:56ch;margin:18px 0 0;}

.wl-cta{text-align:center;}
.wl-cta .body-copy{margin:0 auto;}
.wl-cta .btn{margin-top:26px;}

.wl-legal{max-width:820px;margin:clamp(48px,7vw,72px) auto 0;}
.wl-legal .disclaimer:first-child{margin-top:0;}

/* ==========================================================================
   PEPTIDES: single split panel (not the weight-loss twin-card grid), plain
   educational name list, then two priced narrative blocks, a horizontal
   process sequence, then full disclaimer copy. Deliberately its own shape:
   no card grid, no vertical rail, no sticky split.
   ========================================================================== */
.peptides .section-inner{max-width:1180px;}

/* two offers as one bordered panel split unevenly, not two matching boxes */
.pep-offers{
  display:grid;grid-template-columns:1.3fr 1fr;
  max-width:980px;margin:8px auto 0;
  background:var(--panel-hi);
  border:1px solid var(--hairline-quiet);
  border-radius:16px;
  overflow:hidden;
}
.pep-offer{padding:clamp(26px,3.4vw,36px);}
.pep-offer-consult{border-right:1px solid var(--hairline-quiet);}
.pep-offer-therapy{background:var(--panel);}
.pep-offer-price{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,1.9rem);
  color:var(--text-primary);
  margin:6px 0 18px;
}
.pep-offer-price .per{
  font-family:var(--font-sans);font-weight:300;
  font-size:.82rem;color:var(--text-secondary);
  margin-left:4px;
}
.pep-offer-intro{color:var(--text-secondary);font-size:.92rem;margin:0 0 6px;}
.pep-offer-list{margin:10px 0 0;}
.pep-offer-list li{
  padding:11px 0;
  border-bottom:1px solid var(--hairline-quiet);
  color:var(--text-secondary);font-size:.92rem;
}
.pep-offer-list li:last-child{border-bottom:0;padding-bottom:4px;}
.pep-offer-therapy .body-copy{max-width:none;}
.pep-offer-therapy .body-copy + .body-copy{margin-top:14px;}
@media (max-width:760px){
  .pep-offers{grid-template-columns:1fr;}
  .pep-offer-consult{border-right:0;border-bottom:1px solid var(--hairline-quiet);}
}

/* educational name list: plain text, no tick marks, no pricing, no card */
.pep-names{max-width:820px;margin:clamp(48px,7vw,72px) auto 0;}
.pep-names-intro{color:var(--text-secondary);max-width:64ch;}
.pep-name-list{
  margin:18px 0 0;
  display:flex;flex-wrap:wrap;
  column-gap:28px;row-gap:10px;
}
.pep-name-list li{
  color:var(--chrome-mid);font-size:.95rem;
  position:relative;padding-left:16px;
}
.pep-name-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;
  background:var(--chrome-lo);
}
.pep-names-legal{margin-top:24px;}

/* Lipo-B and NAD+: same narrative shape as the educational block above so
   they read as one continuous column, not a new card treatment */
.pep-mod{max-width:820px;margin:clamp(48px,7vw,72px) auto 0;}
.pep-mod-sub{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  color:var(--chrome-mid);
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  margin:8px 0 0;
}
.pep-mod h3{margin-bottom:0;}
.pep-mod .body-copy{margin-top:16px;}
.pep-mod .price-list{margin-top:20px;max-width:420px;}
.pep-note{color:var(--text-secondary);font-size:.85rem;max-width:56ch;margin:16px 0 0;}
.pep-note + .pep-note{margin-top:8px;}

/* process strip: four steps in a horizontal sequence with a connecting
   line, the opposite orientation from the vertical numbered rail used on
   the aesthetics path */
.pep-process{max-width:900px;margin:clamp(48px,7vw,72px) auto 0;text-align:center;}
.pep-steps{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:8px;
}
.pep-step{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;flex:1 1 0;position:relative;
}
.pep-step-num{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--hairline-quiet);
  font-family:var(--font-display);font-style:italic;font-weight:700;
  color:var(--accent);font-size:1rem;
  background:var(--panel);
  flex-shrink:0;
}
.pep-step:not(:last-child)::after{
  content:"";position:absolute;top:20px;left:calc(50% + 32px);right:calc(-50% + 32px);
  height:1px;background:var(--hairline-quiet);
}
.pep-step-label{font-size:.88rem;color:var(--text-primary);letter-spacing:.02em;}
.pep-process .body-copy{margin:28px auto 0;}
@media (max-width:640px){
  .pep-steps{flex-direction:column;align-items:flex-start;gap:22px;}
  .pep-step{flex-direction:row;align-items:center;}
  .pep-step:not(:last-child)::after{
    top:auto;bottom:-14px;left:19px;right:auto;
    width:1px;height:14px;
  }
}

.peptides .disclaimer{color:var(--text-secondary);}
.pep-legal{max-width:820px;margin:clamp(48px,7vw,72px) auto 0;}
.pep-legal h3{margin-bottom:14px;}
.pep-legal .disclaimer:first-of-type{margin-top:0;}

/* ==========================================================================
   HORMONES: three peer blocks in a symmetric grid, not the weight-loss twin
   card plus narrative stack and not the peptides asymmetric split plus
   stacked pep-mod column. Same weight, same shape, side by side.
   ========================================================================== */
.hormones .section-inner{max-width:1180px;}
.horm-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin:8px auto 0;
}
.horm-group{
  background:var(--panel);
  border:1px solid var(--hairline-quiet);
  border-radius:16px;
  padding:clamp(24px,3vw,32px) clamp(22px,3vw,28px);
}
.horm-group h3{margin-bottom:16px;}
.horm-group .price-list{margin-bottom:0;}
.horm-highlight{
  margin-top:20px;padding:16px 18px;
  background:var(--panel-hi);
  border:1px solid var(--hairline);
  border-radius:12px;
}
.horm-highlight-label{
  font-family:var(--font-sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:.74rem;color:var(--chrome-lo);
  margin:0 0 8px;
}
.horm-highlight-price{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.6rem);
  color:var(--accent);
  margin:0;
}
.horm-highlight-price .per{
  font-family:var(--font-sans);font-weight:300;
  font-size:.8rem;color:var(--text-secondary);
  margin-left:4px;
}
.horm-note{color:var(--text-secondary);font-size:.85rem;max-width:56ch;margin:18px 0 0;}
.horm-note + .horm-note{margin-top:8px;}
@media (max-width:960px){
  .horm-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .horm-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   ELIZABETH: portrait + bio
   ========================================================================== */
.elizabeth .section-inner{
  display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(32px,5vw,72px);
  align-items:center;
}
/* portrait: the photo is left natural (a med spa cannot afford muddy skin), so
   the frame does the blending instead, fading its own edges into the section */
.portrait-frame{
  margin:0;
  aspect-ratio:4/5;
  border-radius:22px;
  border:1px solid var(--hairline-quiet);
  position:relative;
  overflow:hidden;
  background:#0a0a0c;
}
.portrait-frame .portrait{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;
  display:block;
}
.portrait-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,10,12,.30) 0%,rgba(10,10,12,0) 20%,rgba(10,10,12,0) 52%,rgba(10,10,12,.62) 100%),
    radial-gradient(ellipse 96% 96% at 50% 42%,rgba(10,10,12,0) 56%,rgba(10,10,12,.50) 100%);
}
@media (max-width:860px){ .portrait-frame{max-width:320px;margin:0 auto;} }

.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;
}

/* ==========================================================================
   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
   ========================================================================== */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft);
}
.js .reveal.in{opacity:1;transform:translateY(0);}

.js .stagger > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft);
}
.js .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(230px,42vw,460px);
  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);}

/* address doubles as a directions link: on a phone this opens the maps app */
.addr-link{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--hairline-quiet);}
.addr-link:hover{color:var(--accent);border-color:var(--accent);}

/* ==========================================================================
   CONSTANT CONTACT EMBED
   Their widget renders real DOM into .ctct-inline-form (only reCAPTCHA is an
   iframe), so the site's palette and type can be applied directly. Their own
   builder colours are overridden here on purpose, which keeps the form matched
   to the site even if someone changes a swatch in Constant Contact later.
   ========================================================================== */
.ctct-inline-form{max-width:560px;margin:28px auto 0;}
.ctct-inline-form .ctct-form-defaults,
.ctct-inline-form .ctct-form-container{
  background:transparent!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  font-family:var(--font-sans)!important;
}
/* Their header and description duplicate the section heading above, so they are
   hidden, but ONLY inside the form body. The success message is built from those
   same two classes, so hiding them globally blanked the thank-you on submit. */
.ctct-inline-form .ctct-form-custom > .ctct-form-header,
.ctct-inline-form .ctct-form-custom > .ctct-form-text,
.ctct-inline-form .ctct-form-defaults > .ctct-form-header,
.ctct-inline-form .ctct-form-defaults > .ctct-form-text{display:none!important;}
/* the confirmation must always be visible and readable */
.ctct-inline-form .ctct-form-success .ctct-form-header{
  display:block!important;
  font-family:var(--font-display)!important;font-style:italic;font-weight:700!important;
  font-size:clamp(1.4rem,3vw,2rem)!important;color:var(--text-primary)!important;
  margin:0 0 8px!important;
}
.ctct-inline-form .ctct-form-success .ctct-form-text{
  display:block!important;
  font-family:var(--font-sans)!important;font-size:.9rem!important;
  color:var(--text-secondary)!important;margin:0!important;
}

.ctct-inline-form .ctct-form-label{
  color:var(--text-secondary)!important;
  font-family:var(--font-sans)!important;
  font-weight:300!important;
  letter-spacing:.1em;text-transform:uppercase;font-size:.72rem!important;
}
.ctct-inline-form .ctct-form-label.ctct-form-required::before{color:var(--accent)!important;}

.ctct-inline-form input.ctct-form-element{
  background:var(--panel)!important;
  border:1px solid var(--hairline-quiet)!important;
  border-radius:999px!important;
  color:var(--text-primary)!important;
  font-family:var(--font-sans)!important;
  font-size:1rem!important;
  padding:14px 22px!important;
  height:auto!important;
  box-shadow:none!important;
}
.ctct-inline-form input.ctct-form-element::placeholder{color:var(--chrome-lo)!important;}
.ctct-inline-form input.ctct-form-element:focus{
  outline:2px solid var(--accent)!important;outline-offset:3px;
  border-color:var(--accent)!important;
}

.ctct-inline-form .ctct-form-button{
  background:var(--accent)!important;
  color:var(--btn-ink)!important;
  border:0!important;
  border-radius:999px!important;
  font-family:var(--font-sans)!important;
  font-weight:500!important;
  font-size:.95rem!important;
  letter-spacing:.02em;
  padding:14px 28px!important;
  /* their button is display:block at a fixed width, so the parent's text-align
     cannot centre it. Auto margins do. */
  display:block!important;
  width:auto!important;
  min-width:220px;
  margin:18px auto 0!important;
  cursor:pointer;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.ctct-inline-form .ctct-form-button:hover{
  background:var(--accent-deep)!important;transform:translateY(-2px);
}

/* The form body is a flex column so the consent block can be reordered below the
   button. It stays fully visible, which Constant Contact requires; only its
   position changes, so the eye goes field, button, fine print. */
.ctct-inline-form .ctct-form-custom{display:flex!important;flex-direction:column!important;}
.ctct-inline-form .ctct-form-custom .ctct-form-field{order:1;}
.ctct-inline-form .ctct-form-custom .ctct-form-button-container,
.ctct-inline-form .ctct-form-custom .ctct-form-button{order:2;}
/* the consent block sits in an unclassed wrapper div, so it is targeted
   structurally: any direct child of the form body that is not one of the known
   parts goes last, after the button */
.ctct-inline-form .ctct-form-custom > div:not([class]){order:3;margin-top:22px!important;}
.ctct-inline-form .ctct-form-custom > .ctct-gdpr-text{order:3;margin-top:22px!important;}
.ctct-inline-form .ctct-form-custom > .ctct-form-footer-link{order:4;}
.ctct-inline-form .ctct-form-custom > .g-recaptcha{order:5;}
.ctct-inline-form .ctct-form-custom > .ctct-form-error{order:0;}

/* consent and footer text: legally required, so keep it readable on black */
.ctct-inline-form .ctct-gdpr-text,
.ctct-inline-form .ctct-gdpr-text *,
.ctct-inline-form .ctct-form-footer-link,
.ctct-inline-form .ctct-form-footer-link *{
  color:var(--chrome-lo)!important;
  font-family:var(--font-sans)!important;
  font-size:.72rem!important;
  line-height:1.5!important;
}
.ctct-inline-form .ctct-gdpr-text a,
.ctct-inline-form .ctct-form-footer-link a{color:var(--text-secondary)!important;}

.ctct-inline-form .ctct-form-errorMessage,
.ctct-inline-form .ctct-form-error{color:var(--accent)!important;}
.ctct-inline-form .ctct-form-success{
  color:var(--text-primary)!important;
  font-family:var(--font-sans)!important;
  background:transparent!important;
}
.ctct-inline-form .grecaptcha-badge{display:none!important;}

@media (min-width:640px){
  .ctct-inline-form .ctct-form-field{margin-bottom:14px!important;}
}

.price-note-block{margin-top:10px;color:var(--chrome-lo);font-size:.78rem;line-height:1.5;}

/* sub-heading inside a peptide module, for "may include" and "important information" */
.pep-mod-sub2{
  margin:22px 0 10px;
  font-family:var(--font-sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;
  color:var(--text-secondary);
}
.pep-includes{margin:0;padding:0;list-style:none;}
.pep-includes li{
  position:relative;padding-left:20px;margin-bottom:8px;
  color:var(--text-secondary);font-size:.95rem;line-height:1.55;
}
.pep-includes li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* Hormone cards: the first heading is one line and the other two wrap, which
   pushed the price boxes out of alignment. Reserving two lines of heading height
   whenever the cards sit side by side lines the price boxes up across all three. */
.horm-group h3{line-height:1.25;}
@media (min-width:640px){
  /* two lines of heading at the tightened leading */
  .horm-group h3{min-height:2.5em;}
}

/* Same problem one level down: the women's program label wraps to two lines and
   the men's does not, so the two price boxes ended up different heights. Reserve
   two lines of label so the boxes match while the cards sit side by side. */
.horm-highlight-label{line-height:1.35;}
@media (min-width:640px){
  .horm-highlight-label{min-height:2.7em;}
}

/* ==========================================================================
   BOOK: Vagaro booking, popup mode
   ========================================================================== */
.book .section-inner{max-width:880px;}

/* Vagaro's calendar, embedded. Vagaro renders inside a cross-origin iframe, so
   page CSS cannot reach its interior; the frame around it and a filter on the
   iframe element itself are the two levers. invert + hue-rotate turns the white
   panel near-black, dark text light, and keeps brand pink as pink. Vagaro sets
   the frame's real height itself once the widget reports it. */
.book-frame{border:1px solid var(--hairline);border-radius:16px;overflow:hidden;background:#0f0f0f;box-shadow:0 24px 80px rgba(255,45,142,.10);}
.book-frame .vagaro,.book-frame .vagaro-container{width:100%!important;max-width:none!important;margin:0!important;}
.book-frame iframe{display:block;width:100%;border:0;min-height:620px;background:#fff;filter:invert(.94) hue-rotate(180deg);}
@media (max-width:640px){
  .book-frame{border-radius:12px;}
  .book-frame iframe{min-height:520px;}
}
/* The loader appends a "Powered by Vagaro" link row under the frame. */
.book-frame .vagaro-footer{display:none!important;}
/* Loading state while Vagaro's app boots inside the frame */
.book-frame{position:relative;}
.book-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f0f0f;z-index:2;transition:opacity .5s ease;pointer-events:none;}
.book-loading span{font-family:var(--font-sans);font-weight:300;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:var(--text-secondary);animation:bookPulse 1.6s ease-in-out infinite;}
.book-frame.is-ready .book-loading{opacity:0;}
@keyframes bookPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.book-loading span{animation:none;}}