/* Additions on top of the prototype design system (styles.css) for generated pages. */
.prose{font-size:17px;line-height:1.7;color:var(--ink-soft)}
.prose p{margin:0 0 1.1em}
.prose h2,.prose h3{color:var(--ink);letter-spacing:-.02em;margin:1.6em 0 .6em}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em}
.prose li{margin:.35em 0}
.prose img{max-width:100%;border-radius:var(--r);margin:24px 0}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose-wrap{max-width:820px}
.prose-wrap>h2{margin-bottom:18px}
.cream .prose{color:var(--ink-dark-soft)} .cream .prose h2,.cream .prose h3{color:var(--ink-dark)}
.two-col.flip>div:first-child{order:2} @media(max-width:900px){.two-col.flip>div:first-child{order:0}}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 28px}
.checklist li{position:relative;padding-left:26px;color:var(--ink-soft);line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--gold)}
.sub-card.svc-link{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.sub-card .card-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);margin:0 0 18px;display:block}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gal-cell{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r);background:#111}
.gal-cell img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal-cell:hover img{transform:scale(1.05)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.review-grid .review{height:auto}
.blog-grid .sub-card h3{font-size:20px;line-height:1.25}
.blog-body{max-width:760px}
.map-frame{aspect-ratio:4/3} .map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2) contrast(1.05)}
.ba-row-2 .ba-slider{aspect-ratio:4/3}
.detail-hero .hero-meta{margin-top:40px}
.team-card a{color:inherit}
.checklist-prose{grid-template-columns:1fr;gap:14px}
.checklist-prose li{padding-left:28px;line-height:1.6}
.prose .checklist{margin:18px 0 4px}

/* ============ Home: kinetic statement ============ */
.kinetic-sec{ padding-top:clamp(70px,9vw,130px); padding-bottom:clamp(50px,6vw,90px); }
.kinetic{
  font-family:var(--font-disp); font-weight:300; letter-spacing:-0.04em;
  font-size:clamp(34px,6.4vw,86px); line-height:1.02; max-width:16ch; margin:0;
}
.kinetic span{ display:inline-block; }
.kinetic span:nth-child(n+9){ transition-delay:.5s; }
.kinetic span:last-child{ color:var(--gold); font-style:italic; }
.kinetic-sub{ margin-top:26px; max-width:46ch; color:var(--ink-mute); font-size:clamp(15px,1.5vw,18px); }

/* ============ Home: conditions ============ */
.cond-wrap{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.cond{
  display:inline-flex; align-items:center; padding:12px 20px; border-radius:999px;
  border:1px solid rgba(0,0,0,.14); color:var(--ink-dark); text-decoration:none;
  font-size:clamp(14px,1.35vw,17px); line-height:1; background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cond:hover{ background:var(--ink-dark); color:var(--bg-cream); border-color:var(--ink-dark); transform:translateY(-2px); }
.cond-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* ============ Home: pricing / financing ============ */
.price-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.price-card{
  display:flex; flex-direction:column; padding:34px 30px 30px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.price-card:hover{ transform:translateY(-6px); border-color:rgba(201,166,107,.45); }
.price-card.feat{ background:linear-gradient(170deg,rgba(201,166,107,.14),rgba(201,166,107,.03)); border-color:rgba(201,166,107,.42); }
.price-card .kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.price-card h3{ font-family:var(--font-disp); font-weight:300; letter-spacing:-0.03em; font-size:clamp(21px,2.2vw,27px); margin:12px 0 0; }
.price-card .price{ font-family:var(--font-disp); font-weight:300; letter-spacing:-0.04em; font-size:clamp(38px,4.4vw,54px); line-height:1; margin:18px 0 0; }
.price-card .price em{ font-style:normal; font-size:.36em; color:var(--ink-mute); letter-spacing:0; }
.price-card .blurb{ color:var(--ink-mute); font-size:14px; line-height:1.6; margin:14px 0 0; }
.price-list{ list-style:none; margin:22px 0 28px; padding:0; display:flex; flex-direction:column; gap:11px; }
.price-list li{ position:relative; padding-left:22px; font-size:14px; color:var(--ink-soft); line-height:1.5; }
.price-list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.price-card .btn{ margin-top:auto; justify-content:center; }
.price-note{ margin-top:26px; max-width:74ch; font-size:12.5px; line-height:1.7; color:var(--ink-mute); }

/* ============ Home: location ============ */
.loc-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:22px; align-items:stretch; margin-top:8px; }
.loc-card{ display:flex; flex-direction:column; padding:34px 32px; border:1px solid var(--line-dark); border-radius:var(--r-lg); background:rgba(255,255,255,.5); }
.loc-card .kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); }
.loc-card h3{ font-family:var(--font-disp); font-weight:300; letter-spacing:-0.03em; font-size:clamp(23px,2.4vw,30px); margin:12px 0 18px; color:var(--ink-dark); }
.loc-card .addr{ color:var(--ink-dark-soft); font-size:15px; line-height:1.75; margin:0 0 14px; }
.loc-card .addr a{ color:var(--ink-dark); text-decoration:underline; text-underline-offset:3px; }
.loc-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:18px; }
.loc-map{ border-radius:var(--r-lg); overflow:hidden; min-height:340px; border:1px solid var(--line-dark); }
.loc-map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.25) contrast(1.05); }

/* ============ Home: signup ============ */
.signup{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:38px 36px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(201,166,107,.10),rgba(255,255,255,.02));
}
.signup h3{ font-family:var(--font-disp); font-weight:300; letter-spacing:-0.03em; font-size:clamp(22px,2.6vw,32px); margin:10px 0 8px; }
.signup p{ color:var(--ink-mute); font-size:14.5px; max-width:52ch; margin:0; }

@media(max-width:900px){
  .price-row{ grid-template-columns:1fr; }
  .loc-grid{ grid-template-columns:1fr; }
  .signup{ padding:30px 24px; }
}
/* before/after: one panel of the collage shows at a time, so cards take the panel's own ~4:3 ratio */
.ba-feature .ba-slider{aspect-ratio:4/3}
.ba-row-2 .ba-slider{aspect-ratio:4/3}
.results-hub .card-img{aspect-ratio:4/3;object-position:100% 50%}  /* the "after" panel as the thumbnail */

/* ============ Home: the proof wall ============ */
.pw-sec{padding-bottom:clamp(48px,6vw,90px)}
.pw-filters{display:flex;gap:8px;flex-wrap:wrap;margin:-24px 0 26px}
.pw-filter{font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pw-filter:hover{border-color:rgba(201,166,107,.5);color:var(--ink)}
.pw-filter.on{background:var(--gold);border-color:var(--gold);color:var(--ink-dark)}
.pw-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 18px;scroll-padding-left:var(--pad)}
.pw-row::-webkit-scrollbar{display:none}
.pw-card{flex:0 0 auto;width:clamp(230px,20vw,290px);scroll-snap-align:start;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:9px;transition:transform .45s var(--ease)}
.pw-card:hover{transform:translateY(-4px)}
.pw-card.out{display:none}
.pw-shot{display:flex;flex-direction:column;gap:2px;border-radius:var(--r);overflow:hidden;background:#15151A;
  border:1px solid var(--line);transition:border-color .35s var(--ease)}
.pw-card:hover .pw-shot{border-color:rgba(201,166,107,.55)}
.pw-half{position:relative;display:block;background-size:200% 100%;background-repeat:no-repeat}
.pw-half.b{background-position:0% center}
.pw-half.a{background-position:100% center}
.pw-half i{position:absolute;left:8px;bottom:7px;font-style:normal;font-size:9px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.6);
  border:1px solid rgba(255,255,255,.16);padding:3px 8px;border-radius:999px;backdrop-filter:blur(6px)}
.pw-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px}
.pw-meta b{font-size:13.5px;font-weight:500;color:var(--ink)}
.pw-meta span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.pw-conds{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.pw-sec .cond{border-color:var(--line);color:var(--ink-soft);font-size:13.5px;padding:10px 17px}
.pw-sec .cond:hover{background:var(--ink);color:var(--ink-dark);border-color:var(--ink)}
.pw-sec .cond-cta{margin-top:26px}



/* ============================================================
   Motion — the page moves the way the reference does: weighted
   scroll, the hero holding while the page rises over it, and
   media that settles as it arrives. All of it is enhancement:
   with JavaScript off, or reduced motion on, the page is static
   and complete.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* the hero stays put and the first section slides over it — and lets go
     again at the end of the stage, so the video is not left painting behind
     the whole page */
  .hero-stage{ position:relative; }
  .hero{ position:sticky; top:0; }
  .kinetic-sec{ position:relative; z-index:2; background:var(--bg); }
  .kinetic-sec::before{
    content:""; position:absolute; left:0; right:0; bottom:100%; height:120px;
    background:linear-gradient(to top, var(--bg), transparent); pointer-events:none;
  }
}

/* media settles into place as it scrolls in — native scroll timeline, so
   there is no scroll handler behind it */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pw-card figure, .ba-feature, .ba-row-2 > *, .price-card figure, .loc-card figure{
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
    @keyframes settle{
      from{ opacity:.55; transform:scale(.955) translateY(18px); }
      to{ opacity:1; transform:none; }
    }
  }
}

/* Lenis owns the scroll position; these are its required styles */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }


/* ============================================================
   Header + hero — Great Many's layout, Eternal's colours.
   ============================================================ */
:root{
  --band: 36px;
  --nav-h: 76px;
  --cream: #EFE6D2;
  /* the emphasis voice: the same grotesk, light and slanted, no serif */
  --font-accent: 'Inter Tight', var(--font-sans);
}

/* the promo band: solid, full width, above everything */
.topband{position:relative;z-index:51;display:flex;align-items:center;justify-content:center;gap:6px;
  height:var(--band);padding:0 16px;background:var(--gold);color:var(--ink-dark);
  font-size:13px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;overflow:hidden}
.topband u{text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.topband:hover u{text-decoration-thickness:2px}

/* header: sits under the band, then pins to the top once the page moves */
.nav{top:var(--band);display:block;padding:0 var(--pad);border-bottom:0;
  transition:top .35s var(--ease),background .4s var(--ease)}
.nav.scrolled{top:0;padding:0 var(--pad);border-bottom:1px solid var(--line)}
.nav-in{max-width:calc(var(--max) - var(--pad) * 2);margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);
  border-bottom:1px solid rgba(239,230,210,.24);transition:height .35s var(--ease)}
.nav.scrolled .nav-in{height:62px;border-bottom-color:transparent}
.nav-logo img{height:52px}
.nav.scrolled .nav-logo img{height:44px}
.nav-links{gap:clamp(18px,2vw,30px);font-size:12.5px;letter-spacing:.06em;font-weight:500;text-transform:uppercase}
.nav-links a{color:var(--cream)}
.nav-links a:hover{color:var(--gold-hi)}
.nav-links .has-sub-arrow{display:none}
.nav-cta{margin-left:auto;gap:14px}
.nav-quiz{font-size:12.5px;letter-spacing:.06em;font-weight:500;text-transform:uppercase;color:var(--cream);
  white-space:nowrap}
.nav-quiz:hover{color:var(--gold-hi)}
.nav-book,.btn-gm,.gm-gold{display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--ink-dark);border:1px solid var(--gold);border-radius:5px;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  padding:11px 14px;transition:background .25s var(--ease),border-color .25s var(--ease)}
.nav-book:hover,.btn-gm:hover,.gm-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.nav-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:7px;
  border:1px solid rgba(239,230,210,.55);color:var(--cream);transition:border-color .25s var(--ease),color .25s var(--ease)}
.nav-icon svg{width:18px;height:18px}
.nav-icon:hover{border-color:var(--gold);color:var(--gold)}
.nav-cta .nav-quiz{padding-right:14px;border-right:1px solid rgba(239,230,210,.24)}
.nav-cta .nav-icon{margin-left:0}
/* two lines, like the reference, not three */
.nav-burger{border:0;width:36px;height:36px;gap:7px}
.nav-burger span{width:28px;height:1.5px;background:var(--cream)}
.mega{top:calc(var(--band) + var(--nav-h))}
.nav.scrolled ~ .mega{top:62px}
@media(max-width:1100px){
  .nav-quiz,.nav-icon{display:none}
}
@media(max-width:700px){
  :root{--nav-h:64px}
  .nav-book{display:none}
  .nav-logo img{height:44px}
  .topband{font-size:12px}
}

/* ---------- the hero ---------- */
.hero-gm{min-height:calc(100svh - var(--band));padding-top:calc(var(--nav-h) + 22px);
  padding-bottom:calc(var(--gm-bar-h, 0px) + 30px);align-items:stretch}
.hero-gm .hero-inner{display:flex;flex-direction:column;min-height:0;flex:1}
.hero-gm .hero-media::after{background:
  linear-gradient(100deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.42) 38%, rgba(10,10,10,.14) 70%, rgba(10,10,10,.22) 100%),
  linear-gradient(180deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,0) 26%, rgba(10,10,10,0) 58%, rgba(10,10,10,.72) 100%)}
.hero-gm .hero-h{font-family:var(--font-sans);font-weight:400;color:var(--cream);
  font-size:clamp(44px,5.2vw,92px);line-height:.94;letter-spacing:-.045em;max-width:none;
  text-wrap:balance}
.hero-gm .hero-h em{font-family:var(--font-accent);font-style:italic;font-weight:300;color:var(--cream);
  letter-spacing:-.04em}

/* the bottom band: hairline, pitch left, rule, proof right */
.hero-foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(239,230,210,.28)}
.hero-pitch{padding:26px 28px 0 0;border-right:1px solid rgba(239,230,210,.28)}
.hero-gm .hero-sub{margin:0;max-width:30ch;color:var(--cream);font-size:clamp(17px,1.45vw,22px);
  line-height:1.25;letter-spacing:-.01em}
.hero-gm .hero-ctas{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.btn-gm{padding:12px 14px;font-size:14px}
.hero-link{font-size:14px;letter-spacing:.04em;font-weight:500;text-transform:uppercase;color:var(--cream)}
.hero-link:hover{color:var(--gold-hi)}
.hero-proof{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:10px;
  padding-top:26px;width:auto;text-align:right}
.hero-count{font-size:14px;letter-spacing:0;text-transform:none;color:rgba(239,230,210,.82)}
/* one patient at a time, sliding left every few seconds */
.hp-view{--sq:clamp(86px,7.4vw,118px);width:calc(var(--sq) * 2 + 8px);overflow:hidden;border-radius:6px}
.hp-track{display:flex;transition:transform .9s cubic-bezier(.65,0,.25,1)}
.hp-track.snap{transition:none}
.hp-pair{flex:0 0 100%;display:flex;gap:8px;border:0;border-radius:0;background:none;backdrop-filter:none}
.hp-sq{display:block;width:var(--sq);aspect-ratio:1;border-radius:6px;background-color:#1a1713;
  background-size:auto 100%;background-repeat:no-repeat}
.hp-sq.b{background-position:10% 50%}
.hp-sq.a{background-position:90% 50%}
.hp-now{transition:opacity .35s var(--ease)}
.hp-now.out{opacity:0}
@media (prefers-reduced-motion:reduce){.hp-track{transition:none}}
.hp-cap{display:flex;justify-content:space-between;align-items:center;gap:14px;
  width:calc(clamp(86px,7.4vw,118px) * 2 + 8px);font-size:12px;color:rgba(239,230,210,.72);text-align:left}
.hp-cap a{color:var(--cream);font-size:14px}
.hp-cap a:hover{color:var(--gold-hi)}

@media(max-width:820px){
  /* one left edge, top to bottom: pitch, actions side by side, then the results */
  .hero-foot{grid-template-columns:1fr}
  .hero-pitch{border-right:0;padding:22px 0 0}
  .hero-gm .hero-sub{font-size:19px;max-width:24ch}
  .hero-gm .hero-ctas{margin-top:20px;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:18px}
  .btn-gm{padding:15px 16px;font-size:14px}
  .hero-link{font-size:13px;white-space:nowrap}
  .hero-proof{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:end;
    justify-items:start;text-align:left;margin-top:24px;padding:20px 0 0;border-top:1px solid rgba(239,230,210,.2)}
  .hero-proof .hp-view{--sq:78px;grid-column:1;grid-row:1 / 3}
  .hero-count{grid-column:2;grid-row:1;font-size:13px}
  .hp-cap{grid-column:2;grid-row:2;align-self:start;width:auto;justify-content:flex-start;gap:10px}
}

/* ---------- Great Many's bottom bar, on desktop ---------- */
.gm-bar{display:none}
@media(min-width:801px){
  :root{--gm-bar-h:52px}
  .gm-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;height:var(--gm-bar-h);
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:0 clamp(14px,1.2vw,20px);background:var(--bg-cream);color:var(--ink-dark);
    border-top:1px solid rgba(0,0,0,.08)}
  .gm-bar p{margin:0;font-size:16px;letter-spacing:-.01em}
  .gm-bar em{font-family:var(--font-accent);font-style:italic;font-weight:300}
  .gm-bar-acts{display:flex;gap:10px}
  .gm-out{display:inline-flex;align-items:center;padding:9px 12px;border:1px solid var(--ink-dark);
    border-radius:5px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-dark);transition:background .25s var(--ease),color .25s var(--ease)}
  .gm-out:hover{background:var(--ink-dark);color:var(--bg-cream)}
  .gm-gold{padding:9px 12px}
  body{padding-bottom:var(--gm-bar-h)}
  .float-bar{bottom:calc(var(--gm-bar-h) + 18px)}
}
/* the consultation is its own full-screen app */
.fh-app .topband,.fh-app .gm-bar{display:none!important}
.fh-app body{padding-bottom:0!important}

/* chat: a round bubble in the corner on desktop, as on the reference */
.float-pill svg{width:22px;height:22px;flex:none;display:none}
@media(min-width:801px){
  .float-bar{right:16px}
  .float-pill{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%;
    background:#1F1B16;border-color:rgba(201,166,107,.45);position:relative}
  .float-pill svg{display:block;color:var(--gold)}
  .float-pill .fp-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .float-pill .dot{position:absolute;top:9px;right:9px;width:9px;height:9px;border:2px solid #1F1B16}
  .float-pill:hover svg{color:var(--ink-dark)}
}
@media(min-width:801px){
  /* where the page gutter is narrower than the bubble, the proof steps in to clear it */
  .hero-proof{padding-right:max(0px, calc(86px - var(--pad)))}
}
@media(max-width:800px){
  /* the phone's own Call / Book / WhatsApp bar is fixed along the bottom */
  .hero-gm{padding-bottom:calc(var(--bottom-bar-h, 64px) + var(--safe-bottom, 0px) + 20px)}
}

/* ============================================================
   Home, second screen — Great Many's intro, Eternal's content.
   A light section that rises over the hero video.
   ============================================================ */
.intro-gm{position:relative;z-index:2;background:var(--bg-cream);color:var(--ink-dark);
  padding:clamp(28px,3vw,40px) 0 clamp(80px,9vw,140px)}
.intro-kick{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dark)}
.intro-kick svg{width:18px;height:13px;color:var(--ink-dark)}
.intro-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);
  margin-top:clamp(48px,6vw,86px);align-items:stretch}
.intro-copy{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.intro-gm h2{font-size:clamp(34px,3.4vw,56px);font-weight:400;line-height:1;letter-spacing:-.04em;
  max-width:14ch;color:var(--ink-dark);text-wrap:balance}
.intro-gm h2 em{font-family:var(--font-accent);font-style:italic;font-weight:300;
  letter-spacing:-.02em;color:var(--ink-dark)}
.in-rows{display:grid}
.in-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;
  border-bottom:1px solid var(--line-dark)}
.in-row:first-child{padding-top:0}
.in-row:last-child{border-bottom:0;padding-bottom:0}
.in-row p{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.18;letter-spacing:-.015em;color:var(--ink-dark)}
.in-stat{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:3px}
.in-stat b{font-family:var(--font-accent);font-style:italic;font-weight:300;font-size:clamp(22px,1.8vw,28px);
  letter-spacing:-.01em;color:var(--ink-dark);line-height:1;white-space:nowrap}
.in-stat span{font-size:13px;color:var(--ink-dark-soft)}
.in-stat .stars{font-family:var(--font-sans);font-style:normal;font-size:.62em;letter-spacing:.08em;
  color:var(--ink-dark);vertical-align:.15em}
.intro-pics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.intro-pics figure{margin:0;border-radius:10px;overflow:hidden;background:#e6ddcd;aspect-ratio:4/5}
.intro-pics img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:900px){
  .intro-grid{grid-template-columns:1fr;margin-top:clamp(56px,14vw,96px);gap:36px}
  .intro-copy{display:contents}
  .intro-gm h2{order:1;max-width:none;font-size:clamp(32px,8.6vw,44px)}
  .intro-pics{order:2;gap:8px}
  .intro-pics figure{aspect-ratio:6/7}
  .in-rows{order:3}
  .in-row{padding:24px 0}
}

/* ============================================================
   Home, third screen — before-and-after wall.
   Two rows of real cases drift in opposite directions; a
   pointer over a row slows it to a crawl, never a stop.
   ============================================================ */
.growth-gm{background:var(--bg-cream);color:var(--ink-dark);padding:clamp(70px,8vw,130px) 0 clamp(70px,8vw,120px);
  position:relative;z-index:2;overflow:hidden}
.growth-gm h2{font-size:clamp(38px,4.2vw,68px);font-weight:400;line-height:.98;letter-spacing:-.045em;
  color:var(--ink-dark);max-width:14ch;text-wrap:balance}
.growth-gm h2 em{font-family:var(--font-accent);font-style:italic;font-weight:300;letter-spacing:-.02em}
.gw-dup{display:contents}

/* the conditions ticker */
.gw-help{display:flex;align-items:center;gap:18px;margin-top:clamp(40px,4.5vw,64px);padding-top:26px;
  border-top:1px solid var(--line-dark)}
.gw-label{flex:none;font-size:clamp(15px,1.15vw,18px);letter-spacing:-.01em;color:var(--ink-dark);white-space:nowrap}
.gw-label span{color:var(--ink-dark-soft);margin-left:4px}
.gw-ticker{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gw-ticker-track{display:flex;width:max-content;animation:gwX var(--dur,60s) linear infinite}
.gw-ticker-track a{flex:none;margin-right:26px;font-size:clamp(15px,1.15vw,18px);letter-spacing:-.01em;
  color:var(--ink-dark);white-space:nowrap;transition:color .25s var(--ease)}
.gw-ticker-track a:hover{color:#8A5D27}

/* the two rows of cases */
.gw-rows{display:grid;gap:12px;margin-top:clamp(34px,3.5vw,52px)}
.gw-row{overflow:hidden}
.gw-track{display:flex;width:max-content;animation:gwX var(--dur,90s) linear infinite}
.gw-row.rev .gw-track{animation-direction:reverse}
@keyframes gwX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gw-card{flex:none;margin-right:12px;display:flex;flex-direction:column;gap:8px;padding:6px;
  background:#fff;border-radius:10px;color:var(--ink-dark);text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .3s var(--ease)}
.gw-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.10)}
.gw-pics{display:flex;gap:4px}
.gw-sq{display:block;width:clamp(104px,8.4vw,128px);aspect-ratio:1;border-radius:6px;background-color:#e9e3d8;
  background-size:auto 100%;background-repeat:no-repeat}
.gw-cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px 3px;
  font-size:12.5px;color:var(--ink-dark)}
.gw-cap svg{width:15px;height:11px;flex:none;color:var(--ink-dark-soft)}
.gw-cta{margin-top:clamp(36px,4vw,56px)}

@media (prefers-reduced-motion:reduce){
  .gw-track,.gw-ticker-track{animation:none}
  .gw-row,.gw-ticker{overflow-x:auto}
  .gw-dup{display:none}
}

@media(max-width:800px){
  .growth-gm h2{text-align:center;margin:0 auto;font-size:clamp(34px,9vw,44px)}
  /* on a phone the conditions roll upward beside the label, as on the reference */
  .gw-help{align-items:flex-start;gap:14px;padding-top:22px}
  .gw-label{font-size:16px;line-height:26px}
  .gw-ticker{height:78px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 62%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 30%,#000 62%,transparent);text-align:right}
  .gw-ticker-track{flex-direction:column;width:auto;animation-name:gwY}
  .gw-ticker-track a{margin:0;line-height:26px;font-size:16px;display:block}
  @keyframes gwY{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  .gw-sq{width:120px}
  .gw-cta{display:flex;width:100%;padding:17px 16px;font-size:15px}
}

/* ============================================================
   Home, fourth screen — Great Many's treatment card, one of it.
   ============================================================ */
.treat-gm{position:relative;z-index:2;background:var(--bg-cream);color:var(--ink-dark);
  padding:clamp(40px,5vw,80px) 0 clamp(80px,8vw,130px)}
.treat-gm h2{text-align:center;font-size:clamp(38px,4.4vw,72px);font-weight:400;line-height:.98;
  letter-spacing:-.045em;color:var(--ink-dark);text-wrap:balance}
.treat-gm h2 em{font-family:var(--font-accent);font-style:italic;font-weight:300;letter-spacing:-.02em}
.tr-card{max-width:1120px;margin:clamp(40px,4.5vw,64px) auto 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(22px,2.4vw,36px);
  padding:12px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tr-pic{position:relative;margin:0;border-radius:10px;overflow:hidden;background:#e9e3d8;min-height:320px}
.tr-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.tr-badge{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:999px;background:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dark)}
.tr-body{display:flex;flex-direction:column;padding:clamp(8px,1.4vw,22px) clamp(4px,1vw,14px) clamp(8px,1vw,14px) 0}
.tr-kick{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8A5D27}
.tr-card h3{margin-top:10px;font-size:clamp(24px,2vw,32px);font-weight:400;letter-spacing:-.03em;color:var(--ink-dark)}
.tr-price{display:flex;align-items:baseline;gap:6px;margin-top:14px}
.tr-price b{font-size:clamp(34px,3vw,46px);font-weight:400;letter-spacing:-.03em;line-height:1;color:var(--ink-dark)}
.tr-price span{font-size:15px;color:var(--ink-dark-soft)}
.tr-sub{margin:6px 0 0;font-size:14.5px;color:var(--ink-dark-soft)}
.tr-cta{margin-top:20px;width:100%;padding:15px 16px;font-size:14.5px}
.tr-lede{margin:20px 0 0;padding-top:20px;border-top:1px solid var(--line-dark);font-size:15px;line-height:1.55;
  color:var(--ink-dark-soft);max-width:60ch}
.tr-inc{margin-top:18px}
.tr-inc h4{font-size:14.5px;font-weight:500;color:var(--ink-dark)}
.tr-inc ul{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.tr-inc li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.35;color:var(--ink-dark)}
.tr-inc svg{width:17px;height:17px;flex:none;color:var(--ink-dark-soft);margin-top:1px}
.tr-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-dark)}
.tr-tag{padding:7px 13px;border:1px solid var(--line-dark);border-radius:999px;font-size:13px;color:var(--ink-dark-soft)}
.tr-tag.hi{border-color:rgba(138,93,39,.45);color:#8A5D27;background:rgba(201,166,107,.10)}
.tr-info{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:13px;color:var(--ink-dark-soft);
  align-self:flex-start}
.tr-info svg{width:15px;height:15px}
.tr-info:hover{color:var(--ink-dark)}
.tr-strip{max-width:1120px;margin:12px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;
  padding:12px 16px;background:rgba(255,255,255,.55);border-radius:10px;font-size:13px;color:var(--ink-dark-soft)}
.tr-strip span{display:inline-flex;align-items:center;gap:6px}
.tr-strip svg{width:15px;height:15px}

@media(max-width:860px){
  .tr-card{grid-template-columns:1fr;padding:10px;border-radius:14px}
  .tr-pic{min-height:0;aspect-ratio:16/10}
  .tr-body{padding:6px 8px 10px}
  .tr-inc ul{grid-template-columns:1fr}
  .treat-gm h2{font-size:clamp(34px,9vw,44px)}
}

/* ============================================================
   Home, fifth screen — the physician on camera, step by step.
   ============================================================ */
.irl-gm{position:relative;z-index:2;background:#141414;color:var(--cream);
  padding:clamp(34px,3.4vw,48px) 0 clamp(80px,8vw,130px)}
.irl-gm .intro-kick,.irl-gm .intro-kick svg{color:var(--cream)}
.irl-gm h2{margin-top:clamp(60px,7vw,110px);font-size:clamp(40px,4.6vw,76px);font-weight:400;line-height:.98;
  letter-spacing:-.045em;color:var(--cream);max-width:16ch;text-wrap:balance}
.irl-gm h2 em{font-family:var(--font-accent);font-style:italic;font-weight:300;letter-spacing:-.02em}
.irl-rule{display:flex;align-items:center;gap:0;margin-top:clamp(40px,4.5vw,64px);color:var(--gold)}
.irl-rule span{flex:1;height:1px;background:rgba(239,230,210,.24)}
.irl-rule svg{width:30px;height:20px;margin-left:4px}
.irl-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,3.4vw,56px);
  margin-top:clamp(40px,4.5vw,60px);align-items:start}
.irl-media{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/5;max-height:78vh;
  width:100%}
.irl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.irl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(239,230,210,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--cream);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.irl-play:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(239,230,210,.3)}
.irl-play[hidden]{display:none}

.irl-steps{display:flex;flex-direction:column}
.irl-step{border-bottom:1px solid rgba(239,230,210,.2)}
.irl-step summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 20px;align-items:center;
  gap:6px;padding:22px 0;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;color:var(--cream)}
.irl-step summary::-webkit-details-marker{display:none}
.irl-step:first-child summary{padding-top:4px}
.irl-step .n{font-size:.92em}
.irl-step i{position:relative;width:14px;height:14px;justify-self:end}
.irl-step i::before,.irl-step i::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.3px;
  background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.irl-step i::after{transform:rotate(90deg)}
.irl-step[open] i{opacity:0}
.irl-step summary:hover .t{color:var(--gold-hi)}
.irl-step p{margin:-8px 0 0 54px;padding-bottom:22px;max-width:44ch;font-size:15.5px;line-height:1.5;
  color:rgba(239,230,210,.78)}
.irl-cta{align-self:flex-start;margin-top:40px;padding:14px 16px;border-radius:6px;background:var(--cream);
  color:var(--ink-dark);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  transition:background .25s var(--ease)}
.irl-cta:hover{background:var(--gold-hi)}

@media(max-width:860px){
  .irl-gm h2{margin-top:36px;font-size:clamp(38px,10vw,48px)}
  .irl-grid{grid-template-columns:1fr}
  .irl-media{max-height:none}
  .irl-cta{align-self:stretch;text-align:center}
}
/* corner controls on the physician clips */
.irl-video{cursor:pointer}
.irl-ctrl{position:absolute;right:14px;bottom:14px;display:flex;gap:8px;z-index:2}
.irl-ctrl button{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(10,10,10,.55);color:var(--cream);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease),transform .25s var(--ease)}
.irl-ctrl button:hover{background:rgba(10,10,10,.8);transform:scale(1.06)}
.irl-ctrl button[hidden]{display:none}
.irl-ctrl svg{width:19px;height:19px}
.irl-mute .i-on,.irl-mute.on .i-off{display:none}
.irl-mute.on .i-on{display:block}
.irl-pause .i-play,.irl-pause.paused .i-pause{display:none}
.irl-pause.paused .i-play{display:block}
.irl-play{z-index:2}

/* ============================================================
   Home, sixth screen — real Google reviews and real cases,
   in columns that drift sideways. Slows under the pointer.
   ============================================================ */
.rv-gm{position:relative;z-index:2;background:var(--bg-cream);color:var(--ink-dark);
  padding:clamp(80px,8vw,130px) 0 clamp(80px,8vw,130px);overflow:hidden}
.rv-gm h2{text-align:center;font-size:clamp(38px,4.4vw,72px);font-weight:400;line-height:.98;
  letter-spacing:-.045em;color:var(--ink-dark);max-width:15ch;margin:0 auto;text-wrap:balance}
.rv-gm h2 em{font-family:var(--font-accent);font-style:italic;font-weight:300;letter-spacing:-.02em}
.rv-score{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 0;width:max-content;
  font-size:14px;color:var(--ink-dark-soft)}
.rv-score b{font-family:var(--font-accent);font-style:italic;font-weight:300;font-size:24px;color:var(--ink-dark)}
.rv-score:hover span{color:var(--ink-dark);text-decoration:underline;text-underline-offset:3px}

.rv-row{margin-top:clamp(40px,4.5vw,64px);overflow:hidden}
.rv-track{display:flex;width:max-content;animation:gwX var(--dur,140s) linear infinite}
.rv-col{flex:none;width:clamp(260px,21vw,300px);height:clamp(540px,42vw,600px);margin-right:12px;
  display:flex;flex-direction:column;gap:12px}

.rv-card{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:18px;background:#fff;
  border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.rv-card header{display:flex;align-items:center;gap:11px}
.rv-av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#1F1B16;color:var(--gold);font-size:16px;font-weight:500}
.rv-av svg{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;padding:2px;background:#fff;border-radius:50%}
.rv-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.rv-who b{font-size:15px;font-weight:500;color:var(--ink-dark)}
.rv-who span{font-size:11.5px;color:var(--ink-dark-soft)}
.rv-stars{color:#E8A93A;font-size:15px;letter-spacing:2px;line-height:1}
.rv-card p{margin:0;flex:0 0 auto;font-size:14px;line-height:1.45;color:var(--ink-dark);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.rv-more{margin-top:auto;font-size:12.5px;color:var(--ink-dark);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.rv-more:hover{color:#8A5D27}

.rv-case{position:relative;flex:1;display:grid;grid-template-rows:1fr 1fr;gap:4px;padding:6px 6px 58px;
  background:#fff;border-radius:12px;color:var(--ink-dark);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.rv-half{position:relative;border-radius:8px;background-color:#e9e3d8;background-size:auto 100%;background-repeat:no-repeat}
.rv-half i{position:absolute;left:8px;top:8px;font-style:normal;font-size:10.5px;padding:4px 9px;border-radius:999px;
  background:rgba(255,255,255,.88);color:var(--ink-dark)}
.rv-cap{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;gap:2px}
.rv-cap b{font-size:14px;font-weight:500}
.rv-cap span{font-size:11.5px;color:var(--ink-dark-soft)}

@media (prefers-reduced-motion:reduce){
  .rv-track{animation:none}
  .rv-row{overflow-x:auto}
}
@media(max-width:700px){
  .rv-gm h2{font-size:clamp(34px,9vw,44px)}
  .rv-col{width:264px;height:520px}
  .rv-card p{-webkit-line-clamp:5}
}

/* ============================================================
   Home, seventh screen — the invitation: a card and a mosaic.
   ============================================================ */
.tg-gm{position:relative;z-index:2;background:var(--bg-cream);color:var(--ink-dark);
  padding:clamp(34px,3.4vw,48px) 0 clamp(80px,8vw,130px)}
.tg-gm .intro-kick,.tg-gm .intro-kick svg{color:var(--ink-dark)}
.tg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:10px;
  margin-top:clamp(48px,6vw,90px);height:clamp(520px,42vw,600px)}
.tg-card{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2vw,30px);
  background:#fff;border-radius:16px}
.tg-card h2{font-size:clamp(38px,4vw,64px);font-weight:400;line-height:.96;letter-spacing:-.045em;
  color:var(--ink-dark);max-width:11ch;text-wrap:balance}
.tg-card h2 em{font-family:var(--font-accent);font-style:italic;font-weight:300;letter-spacing:-.02em}
.tg-card p{margin:18px 0 0;font-size:16px;color:var(--ink-dark)}
.tg-acts{display:flex;flex-wrap:wrap;gap:10px;padding-top:20px;border-top:1px solid var(--line-dark)}
.tg-acts .btn-gm{padding:13px 16px}
.tg-out{display:inline-flex;align-items:center;padding:12px 16px;border:1px solid var(--ink-dark-soft);border-radius:6px;
  font-size:14px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-dark);
  transition:background .25s var(--ease),color .25s var(--ease)}
.tg-out:hover{background:var(--ink-dark);color:var(--bg-cream)}

.tg-mosaic{position:relative;display:grid;grid-template-columns:.8fr 1.1fr 1.3fr 1fr;gap:7px;
  border-radius:16px;overflow:hidden}
.tg-col{display:flex;flex-direction:column;gap:7px;min-height:0}
.tg-tile{margin:0;flex:1 1 0;min-height:0;border-radius:8px;overflow:hidden;background:#e6ddcd}
.tg-tile img{width:100%;height:100%;object-fit:cover;display:block}
.tg-after{background-size:auto 100%;background-position:90% 50%;background-repeat:no-repeat}
.tg-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:7px;padding:14px 18px;border-radius:12px;background:rgba(22,19,15,.62);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--cream);font-size:13px;
  text-align:center;white-space:nowrap;transition:background .25s var(--ease)}
.tg-badge:hover{background:rgba(22,19,15,.8)}
.tg-stars{color:var(--gold-hi);letter-spacing:3px}
.tg-faces{display:flex;margin-top:2px}
.tg-faces span{width:34px;height:34px;border-radius:50%;border:2px solid var(--cream);margin-left:-8px;
  background-size:auto 100%;background-position:90% 50%;background-color:#333}
.tg-faces span:first-child{margin-left:0}

@media(max-width:900px){
  .tg-grid{grid-template-columns:1fr;height:auto}
  .tg-card{gap:40px}
  .tg-card h2{font-size:clamp(36px,10vw,48px)}
  .tg-mosaic{height:440px}
  .tg-acts{flex-direction:column}
  .tg-acts a{justify-content:center;padding:16px}
}

/* ============================================================
   Footer — after the 21st.dev footer-section component.
   ============================================================ */
.footer.ft{position:relative;z-index:2;background:#0C0B09;color:var(--cream);border-top:1px solid var(--line);
  padding:clamp(56px,6vw,90px) 0 calc(28px + var(--gm-bar-h, 0px))}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(32px,4vw,56px)}
.ft h2{font-size:clamp(28px,2.6vw,36px);font-weight:500;letter-spacing:-.03em;color:var(--cream);margin-bottom:14px}
.ft h3{font-size:16px;font-weight:500;letter-spacing:.01em;color:var(--cream);margin-bottom:16px}
.ft p{color:rgba(239,230,210,.66);font-size:14.5px;line-height:1.55;margin:0}
.ft-news{position:relative}
.ft-news>p{margin-bottom:22px;max-width:36ch}
.ft-form{position:relative;max-width:380px}
.ft-form input{width:100%;font:inherit;font-size:15px;color:var(--cream);background:rgba(255,255,255,.04);
  border:1px solid rgba(239,230,210,.18);border-radius:8px;padding:12px 52px 12px 14px;
  backdrop-filter:blur(4px);transition:border-color .25s var(--ease)}
.ft-form input::placeholder{color:rgba(239,230,210,.42)}
.ft-form input:focus{outline:none;border-color:var(--gold)}
.ft-form input[aria-invalid]{border-color:#C9584F}
.ft-form button{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;background:var(--gold);color:var(--ink-dark);
  transition:transform .25s var(--ease),background .25s var(--ease)}
.ft-form button:hover{transform:translateY(-50%) scale(1.07);background:var(--gold-hi)}
.ft-form button:disabled{opacity:.5;cursor:wait}
.ft-form button svg{width:16px;height:16px}
.ft-msg{margin-top:10px!important;font-size:13px!important;color:var(--gold-hi)!important;max-width:38ch}
.ft-msg.bad{color:#E0A49D!important}
.ft-glow{position:absolute;right:-10px;top:-10px;width:110px;height:110px;border-radius:50%;
  background:rgba(201,166,107,.14);filter:blur(34px);pointer-events:none}
.ft-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ft-links{display:grid;gap:9px;font-size:14.5px}
.ft-links a,.ft-addr a{color:rgba(239,230,210,.82);transition:color .25s var(--ease)}
.ft-links a:hover,.ft-addr a:hover{color:var(--gold-hi)}
.ft-addr{font-style:normal;display:grid;gap:8px}
.ft-social{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.ft-soc{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(239,230,210,.22);color:var(--cream);transition:border-color .25s var(--ease),color .25s var(--ease)}
.ft-soc svg{width:18px;height:18px}
.ft-soc:hover,.ft-soc:focus-visible{border-color:var(--gold);color:var(--gold-hi)}
/* the tooltip the component shows on hover */
.ft-soc::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,4px);white-space:nowrap;padding:6px 10px;border-radius:6px;font-size:12px;
  background:var(--cream);color:var(--ink-dark);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.ft-soc:hover::after,.ft-soc:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.ft-book{font-size:14px;color:var(--gold-hi)}
.ft-book:hover{text-decoration:underline;text-underline-offset:3px}
.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(40px,4.5vw,64px);padding-top:26px;border-top:1px solid rgba(239,230,210,.14)}
.ft-bottom p{font-size:13px}
.ft-bottom nav{display:flex;gap:20px;font-size:13px}
.ft-bottom a{color:rgba(239,230,210,.72)}
.ft-bottom a:hover{color:var(--gold-hi)}
@media(max-width:1000px){ .ft-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){
  .ft-grid{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;align-items:flex-start}
  .footer.ft{padding-bottom:calc(28px + var(--bottom-bar-h, 64px) + var(--safe-bottom, 0px))}
}

/* ---------- the press, running along the foot of the hero video ---------- */
.hero-gm{flex-direction:column}
.hero-press{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(22px,2.6vw,36px);padding:18px 0 0 var(--pad);
  border-top:1px solid rgba(239,230,210,.16)}
.hero-press-label{flex:none;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,230,210,.62);white-space:nowrap}
.hero-press-view{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hero-press-track{display:flex;align-items:center;width:max-content;animation:gwX 48s linear infinite}
.hero-press-track img{flex:none;height:22px;width:auto;margin-right:clamp(40px,4.4vw,72px);opacity:.72;
  transition:opacity .3s var(--ease)}
.hero-press-track img:hover{opacity:1}
/* stop short of the chat bubble in the corner */
@media(min-width:821px){.hero-press{padding-right:86px}}
@media (prefers-reduced-motion:reduce){
  .hero-press-track{animation:none}
  .hero-press-view{overflow-x:auto}
}
@media(max-width:820px){
  .hero-press{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0 0;margin-top:26px}
  .hero-press-label{padding-left:var(--pad)}
  .hero-press-view{width:100%}
  .hero-press-track img{height:19px;margin-right:40px}
}

/* ---------- the phone's sticky bar, in the desktop bar's cream ---------- */
.mobile-bar.mb-gm{background:var(--bg-cream);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-top:1px solid var(--line-dark);padding:10px var(--pad) calc(10px + var(--safe-bottom));gap:10px;align-items:center}
.mb-gm a{flex:none;flex-direction:row;gap:0;padding:0;box-shadow:none;letter-spacing:0}
.mb-gm a:active{transform:scale(.97)}
.mb-gm .mb-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(10,10,10,.26);color:var(--ink-dark);background:transparent}
.mb-gm .mb-ico:active{background:rgba(10,10,10,.06)}
.mb-gm .mb-ico svg{width:19px;height:19px}
.mb-gm .mb-book{flex:1;height:44px;display:flex;align-items:center;justify-content:center;border-radius:6px;
  background:var(--gold);color:var(--ink-dark);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.mb-gm .mb-book:active{background:var(--gold-hi)}

/* ============================================================
   Service pages — Great Many's treatment page, section by
   section, in Eternal's cream, ink and gold.
   ============================================================ */
.sv-page{--paper:#FBF8F3;--gold-ink:#8A5D27;--dark:#141414;color:var(--ink-dark)}
body:has(.sv-page) .nav{background:var(--bg)}
.sv-page h1,.sv-page h2{font-weight:400;text-wrap:balance;color:inherit}
.sv-page h1 em,.sv-page h2 em,.sv-state p em{font-family:var(--font-accent);font-style:italic;font-weight:300}
.sv-page .intro-kick{color:inherit}
.sv-page .intro-kick svg{color:inherit}
.sv-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-dark);color:var(--ink-dark)}
.sv-ico svg{width:18px;height:18px}
.sv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sv-out{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border:1px solid var(--ink-dark);
  border-radius:5px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dark);
  white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
.sv-out:hover{background:var(--ink-dark);color:var(--bg-cream)}
.sv-link{display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:inherit;border-bottom:1px solid currentColor;padding-bottom:2px}
.sv-link:hover{color:var(--gold-ink)}
.pm{position:relative;flex:none;width:14px;height:14px}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.3px;margin-top:-.65px;
  background:currentColor;transition:transform .3s var(--ease)}
.pm::after{transform:rotate(90deg)}
details[open]>summary .pm::after{transform:rotate(0)}

/* 1. hero: copy left, photograph right */
.sv-hero{background:var(--bg-cream);padding:calc(var(--band) + var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(56px,6vw,90px)}
.sv-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,80px);align-items:stretch}
.sv-hero-copy{display:flex;flex-direction:column}
.sv-hero h1{margin-top:clamp(22px,2.6vw,36px);font-size:clamp(40px,4.4vw,74px);line-height:.98;letter-spacing:-.045em}
.sv-bullets{list-style:none;margin:clamp(28px,3vw,40px) 0 40px;padding:0;display:grid;gap:14px}
.sv-bullets li{display:flex;align-items:center;gap:14px;font-size:15.5px;line-height:1.3;color:var(--ink-dark-soft);max-width:44ch}
.sv-hero-copy .sv-acts{margin-top:auto;padding-top:24px;border-top:1px solid var(--line-dark)}
.sv-hero-pic{position:relative;margin:0;border-radius:12px;overflow:hidden;min-height:clamp(380px,36vw,560px);background:#e6ddcd}
.sv-hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* 2. targeted areas: a rail of cards that runs off the right edge */
.sv-areas{background:var(--bg-cream);padding:clamp(40px,5vw,70px) 0 clamp(70px,8vw,120px)}
.sv-areas h2,.sv-how h2,.sv-price-sec h2,.sv-why h2,.sv-faq h2{letter-spacing:-.04em;line-height:1}
.sv-areas h2{font-size:clamp(36px,3.8vw,60px);max-width:16ch}
.sv-rail{margin-top:clamp(30px,3.6vw,52px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  --inset:max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));scroll-padding-left:var(--inset)}
.sv-rail::-webkit-scrollbar{display:none}
.sv-rail-track{display:flex;gap:10px;list-style:none;margin:0;padding:0 var(--inset);width:max-content}
.sv-area{flex:0 0 clamp(210px,19vw,290px);scroll-snap-align:start;background:#fff;border-radius:10px;padding:6px;
  display:flex;flex-direction:column;gap:8px}
.sv-area-pic{display:block;aspect-ratio:1/1.05;border-radius:6px;overflow:hidden;background:#e9e3d8}
.sv-area-pic img{width:100%;height:100%;object-fit:cover;display:block}
.sv-before{background-size:auto 100%;background-position:10% 50%;background-repeat:no-repeat}
.sv-area-cap{text-align:center;font-size:13px;padding:2px 4px 6px;color:var(--ink-dark)}
.sv-area-cap small{display:block;margin-top:2px;font-size:12px;color:var(--ink-dark-soft)}
.sv-areas-foot{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.sv-arrows{display:flex;gap:8px}
.sv-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(10,10,10,.24);
  background:transparent;color:var(--ink-dark);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.sv-arrow:hover{background:var(--ink-dark);color:var(--bg-cream)}
.sv-arrow svg{width:18px;height:18px}

/* 3. how it works: headline, the drawing, the steps */
.sv-how{background:var(--paper);padding:clamp(70px,8vw,120px) 0}
.sv-how-grid{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,48px);align-items:start}
.sv-how h2{font-size:clamp(28px,2.6vw,42px);line-height:1.06;letter-spacing:-.035em}
.sv-art svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.sv-steps{border-left:1px solid var(--line-dark);padding-left:clamp(18px,2vw,30px)}
.sv-steps ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sv-steps li{display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.35;color:var(--ink-dark-soft)}
.sv-steps .sv-link{margin-top:26px}
.sv-art-svg path,.sv-art-svg rect,.sv-art-svg circle,.sv-art-svg ellipse{vector-effect:non-scaling-stroke}
.f-top{fill:#FFFDF9}.f-left{fill:#F4EDE2}.f-right{fill:#EAE1D2}
.f-top,.f-left,.f-right{stroke:rgba(23,21,18,.16);stroke-width:1}
.sv-art-svg .epi{fill:rgba(201,166,107,.14)}
.sv-art-svg .lines path{fill:none;stroke:rgba(23,21,18,.09);stroke-width:1}
.sv-art-svg .sheath{fill:#FBF6EE;stroke:rgba(23,21,18,.22);stroke-width:1}
.sv-art-svg .shaft,.sv-art-svg .bulb{fill:#2B241D}
.sv-art-svg .hair{fill:none;stroke:#2B241D;stroke-width:6;stroke-linecap:round}
.sv-art-svg .hair.thin{stroke-width:4}
.sv-art-svg .gold{fill:none;stroke:var(--gold);stroke-width:1.6}
.sv-art-svg .fat circle{fill:#FBF1E0;stroke:rgba(23,21,18,.14);stroke-width:1}
.sv-art-svg .muscle{fill:rgba(184,80,66,.10)}
.sv-art-svg .fiber{stroke:rgba(184,80,66,.28);stroke-width:1}
.sv-art-svg .pore{fill:rgba(23,21,18,.2)}
.sv-art-svg .pulse,.sv-art-svg .collagen{transform-box:fill-box;transform-origin:center;animation:svPulse 3.2s ease-in-out infinite}
.sv-art-svg .d2{animation-delay:1.6s}
.sv-art-svg .collagen{stroke-width:1.8}
.sv-art-svg .flow{stroke-width:1.4;stroke-dasharray:5 9;animation:svFlow 1.8s linear infinite}
@keyframes svPulse{0%,100%{opacity:.3;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@keyframes svFlow{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){.sv-art-svg .pulse,.sv-art-svg .collagen,.sv-art-svg .flow{animation:none;opacity:1}}

/* 4. pricing: one card, photograph left */
.sv-price-sec{background:var(--paper);padding:clamp(40px,5vw,70px) 0 clamp(70px,8vw,120px)}
.sv-price-sec h2{margin:clamp(40px,5vw,72px) auto 0;text-align:center;font-size:clamp(36px,3.8vw,60px);max-width:14ch}
.sv-price{max-width:880px;margin:clamp(34px,4vw,56px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:8px;border-radius:14px;background:var(--bg-cream)}
.sv-price figure{margin:0;border-radius:10px;overflow:hidden;min-height:380px}
.sv-price figure img{width:100%;height:100%;object-fit:cover;display:block}
.sv-price-body{padding:clamp(16px,2vw,26px) clamp(14px,1.6vw,22px);display:flex;flex-direction:column}
.sv-rating{font-size:13px;color:var(--ink-dark)}
.sv-rating span{letter-spacing:2px}
.sv-price h3{margin:10px 0 16px;font-size:clamp(26px,2.3vw,34px);font-weight:400;letter-spacing:-.03em;line-height:1.05}
.sv-amt{display:flex;align-items:baseline;gap:6px}
.sv-amt b{font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1}
.sv-amt span{font-size:13px;color:var(--ink-dark-soft)}
.sv-amt-note{margin:6px 0 0;font-size:13px;color:var(--ink-dark-soft)}
.sv-inc{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-dark)}
.sv-inc h4{margin:0 0 10px;font-size:13.5px;font-weight:600}
.sv-inc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sv-inc li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.35;color:var(--ink-dark-soft)}
.sv-inc li svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ink-dark)}
.sv-price .sv-acts{margin-top:auto;padding-top:24px}
.sv-fine{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:8px 18px;
  font-size:12px;color:var(--ink-dark-soft)}
.sv-fine span,.sv-fine a{display:inline-flex;align-items:center;gap:6px}
.sv-fine a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:3px}
.sv-fine svg{width:15px;height:15px}

/* 5. why it's the smart choice: four photographs with words on them */
.sv-why{background:var(--paper);padding:0 0 clamp(70px,8vw,120px)}
.sv-why h2{text-align:center;font-size:clamp(36px,3.8vw,60px);max-width:16ch;margin:0 auto;
  padding-bottom:clamp(30px,3.4vw,46px);border-bottom:1px solid var(--line-dark)}
.sv-why-grid{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sv-why-card{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;color:#fff;background:#2b241d;isolation:isolate}
.sv-why-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sv-why-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.08) 30%,rgba(10,10,10,.78) 100%)}
.sv-why-card:hover img{transform:scale(1.04)}
.sv-why-ico{position:absolute;z-index:1;top:12px;left:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sv-why-ico svg{width:17px;height:17px}
.sv-why-txt{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;display:grid;gap:4px}
.sv-why-txt b{font-size:16px;font-weight:500;letter-spacing:-.01em}
.sv-why-txt span{font-size:13px;line-height:1.3;color:rgba(255,255,255,.86)}
.sv-note{margin-top:18px;border-bottom:1px solid var(--line-dark)}
.sv-note summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 0;font-size:15px}
.sv-note summary::-webkit-details-marker{display:none}
.sv-note ul{margin:0;padding:0 0 18px 18px;display:grid;gap:6px;font-size:14.5px;color:var(--ink-dark-soft)}

/* 6. timeline: dark, photographs left, the months right */
.sv-time{background:var(--dark);color:var(--cream);padding:clamp(70px,8vw,120px) 0}
.sv-time h2{margin-top:clamp(40px,5vw,70px);padding-bottom:clamp(30px,3.4vw,46px);border-bottom:1px solid rgba(239,230,210,.16);
  font-size:clamp(40px,4.4vw,70px);line-height:.98;letter-spacing:-.045em;max-width:16ch;color:var(--cream)}
.sv-time-grid{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(20px,3vw,44px)}
.sv-time-pics{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));border-radius:12px;overflow:hidden;height:clamp(440px,40vw,620px)}
.sv-time-pics img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.sv-phases{list-style:none;margin:0;padding:0 0 0 clamp(18px,2vw,28px);border-left:2px solid var(--gold);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.sv-tag{display:inline-block;padding:5px 10px;border-radius:999px;font-size:11.5px;background:rgba(239,230,210,.1);color:rgba(239,230,210,.82)}
.sv-phases h3{margin:12px 0 8px;font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.02em;color:var(--cream)}
.sv-phases p{margin:0;font-size:14px;line-height:1.45;color:rgba(239,230,210,.72);max-width:40ch}
.sv-phases dl{margin:16px 0 0}
.sv-phases dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid rgba(239,230,210,.12)}
.sv-phases dt{font-size:14px;color:var(--cream)}
.sv-phases dd{margin:0;font-size:12.5px;color:rgba(239,230,210,.6);text-align:right}

/* 8. questions: the page's own copy, as answers */
.sv-faq{background:var(--bg-cream);padding:clamp(70px,8vw,120px) 0}
.sv-faq-grid{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(32px,6vw,100px)}
.sv-faq h2{font-size:clamp(40px,4.4vw,70px);letter-spacing:-.045em;line-height:.98;margin-bottom:clamp(28px,3vw,44px)}
.sv-q{border-bottom:1px solid var(--line-dark)}
.sv-q:first-child{border-top:1px solid var(--line-dark)}
.sv-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 0;font-size:16px;line-height:1.3;transition:color .2s var(--ease)}
.sv-q summary::-webkit-details-marker{display:none}
.sv-q summary:hover{color:var(--gold-ink)}
.sv-a{padding:0 36px 22px 0;font-size:15px;line-height:1.6;color:var(--ink-dark-soft);max-width:68ch}
.sv-a p{margin:0}.sv-a p+p{margin-top:10px}
.sv-a h4{margin:16px 0 4px;font-size:14px;font-weight:600;color:var(--ink-dark)}
.sv-a ul{margin:10px 0 0;padding-left:18px}.sv-a li{margin:5px 0}
.sv-help{position:sticky;top:110px;align-self:start}
.sv-help-h{margin:0;font-size:18px;font-weight:500}
.sv-help p{margin:4px 0 0;font-size:14px;color:var(--ink-dark-soft)}
.sv-help a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:3px}
.sv-help figure{margin:18px 0 0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#e6ddcd}
.sv-help img{width:100%;height:100%;object-fit:cover;display:block}

/* 9. one line, said large */
.sv-state{background:var(--paper);padding:clamp(90px,11vw,170px) 0;text-align:center}
.sv-state p{margin:0 auto clamp(26px,3vw,38px);max-width:18ch;font-size:clamp(34px,3.8vw,60px);line-height:1.02;
  letter-spacing:-.04em;color:var(--gold-ink);text-wrap:balance}

/* 10. the closing card, and the clinic beside it */
.sv-final{background:var(--bg-cream);padding:clamp(40px,5vw,70px) clamp(10px,1.2vw,18px) clamp(14px,1.4vw,20px)}
.sv-final-kick{padding-left:max(0px, calc(var(--pad) - clamp(10px,1.2vw,18px)))}
.sv-final-grid{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px;min-height:clamp(440px,42vw,640px)}
.sv-final-card{background:var(--paper);border-radius:12px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.sv-final h2{margin:0 0 18px;font-size:clamp(34px,3.4vw,54px);line-height:1;letter-spacing:-.04em}
.sv-final-pic{position:relative;margin:0;border-radius:12px;overflow:hidden;min-height:320px;background:#2b241d}
.sv-final-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-final .sv-badge{left:auto;top:auto;right:18px;bottom:18px;transform:none}

/* 11. where we are */
.sv-loc{background:var(--dark);color:var(--cream);padding:clamp(70px,8vw,120px) 0}
.sv-loc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(16px,2vw,28px);align-items:stretch}
.sv-loc h2{margin:0 0 34px;font-size:clamp(30px,2.8vw,44px);line-height:1.04;letter-spacing:-.035em;color:var(--cream)}
.sv-loc-item{padding-top:20px;border-top:1px solid rgba(239,230,210,.2)}
.sv-loc-item h3{margin:0 0 10px;font-size:18px;font-weight:500}
.sv-loc-item p{margin:6px 0;font-size:14px;line-height:1.5;color:rgba(239,230,210,.72)}
.sv-loc-item a{color:var(--cream)}
.sv-loc-item .sv-link{margin-top:14px}
.sv-loc-map{border-radius:12px;overflow:hidden;min-height:380px;background:#2b241d}
.sv-loc-map iframe{display:block;width:100%;height:100%;min-height:380px;border:0;
  filter:invert(.9) hue-rotate(180deg) saturate(.35) brightness(.95) contrast(.95)}
.sv-loc-pic{margin:0;border-radius:12px;overflow:hidden;min-height:380px}
.sv-loc-pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- phones: one column, one left edge ---------- */
@media(max-width:900px){
  .sv-hero-in{display:flex;flex-direction:column;gap:0}
  .sv-hero-copy{display:contents}
  .sv-hero .intro-kick{order:1}
  .sv-hero h1{order:2;font-size:clamp(36px,10vw,46px)}
  .sv-hero-pic{order:3;margin-top:26px;min-height:0;aspect-ratio:4/3.4}
  .rs-hero-pic{aspect-ratio:auto}
  .sv-bullets{order:4;margin:26px 0 28px}
  .sv-hero-copy .sv-acts{order:5}
  .sv-areas h2,.sv-price-sec h2,.sv-why h2{font-size:clamp(32px,8.6vw,42px)}
  .sv-price-sec h2,.sv-why h2,.sv-state{text-align:left;margin-left:0}
  .sv-state p{margin-left:0;font-size:clamp(30px,8.4vw,40px)}
  .sv-area{flex-basis:62vw}
  .sv-arrows{display:none}
  .sv-how-grid{grid-template-columns:1fr;gap:28px}
  .sv-steps{border-left:0;padding-left:0}
  .sv-price{grid-template-columns:1fr}
  .sv-price figure{min-height:0;aspect-ratio:4/3}
  .sv-why-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-left:var(--pad)}
  .sv-why-grid::-webkit-scrollbar{display:none}
  .sv-why-card{flex:0 0 72vw;scroll-snap-align:start}
  .sv-time h2,.sv-faq h2{font-size:clamp(36px,10vw,46px)}
  .sv-time-grid{grid-template-columns:1fr}
  .sv-time-pics{grid-template-rows:none;grid-template-columns:1fr 1fr;height:auto;gap:6px;border-radius:0;overflow:visible}
  .sv-time-pics img{aspect-ratio:1/1.1;border-radius:10px}
  .sv-faq-grid{grid-template-columns:1fr}
  .sv-help{position:static}
  .sv-help figure{aspect-ratio:16/10}
  .sv-final-grid{grid-template-columns:1fr;min-height:0}
  .sv-final-pic{aspect-ratio:1/1}
  .sv-loc-grid{grid-template-columns:1fr}
  .sv-loc-pic{order:2;min-height:0;aspect-ratio:4/3}
  .sv-loc-map{order:3;min-height:300px}
  .sv-loc-map iframe{min-height:300px}
}

/* ============================================================
   Hubs, results, location, about, contact — same parts, same
   cream, one left edge on a phone.
   ============================================================ */
.sv-lede{margin:18px 0 0;max-width:44ch;font-size:clamp(16px,1.3vw,19px);line-height:1.35;color:var(--ink-dark-soft)}
.sv-bullets a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:3px}
.sv-page h2 em{letter-spacing:-.02em}

/* treatment cards on the hubs */
.hub-sec{background:var(--paper);padding:clamp(70px,8vw,120px) 0}
.hub-sec h2,.rs-sec h2,.cm-sec h2,.vr-sec h2,.dr-sec h2{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(36px,3.8vw,60px);
  line-height:1;letter-spacing:-.04em;max-width:16ch}
.hub-grid{margin-top:clamp(30px,3.4vw,50px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hub-card{display:flex;flex-direction:column;background:#fff;border-radius:12px;padding:6px;color:var(--ink-dark);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.hub-card:hover{box-shadow:0 14px 36px rgba(0,0,0,.09);transform:translateY(-2px)}
.hub-pic{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#e9e3d8}
.hub-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.hub-card:hover .hub-pic img{transform:scale(1.04)}
.hub-body{display:flex;flex-direction:column;gap:6px;padding:14px 10px 12px;flex:1}
.hub-body small{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dark-soft)}
.hub-body b{font-size:19px;font-weight:500;letter-spacing:-.02em}
.hub-body>span:not(.hub-go){font-size:14px;line-height:1.35;color:var(--ink-dark-soft)}
.hub-go{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}

/* results: filter chips over a grid of drag-to-compare cases */
.rs-sec{background:var(--paper);padding:clamp(70px,8vw,120px) 0}
.rs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rs-chips{display:flex;flex-wrap:wrap;gap:8px}
.rs-chip{font:inherit;font-size:13px;padding:9px 14px;border-radius:999px;border:1px solid rgba(10,10,10,.2);
  background:transparent;color:var(--ink-dark);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.rs-chip[aria-pressed="true"]{background:var(--ink-dark);border-color:var(--ink-dark);color:var(--bg-cream)}
.rs-grid{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rs-card{background:#fff;border-radius:12px;padding:6px}
.rs-card[hidden]{display:none}
.rs-card .ba-slider,.rs-hero-pic .ba-slider{aspect-ratio:4/3;border-radius:8px;box-shadow:none}
.rs-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 8px 8px;font-size:13px}
.rs-cap b{font-weight:500}
.rs-cap span{color:var(--ink-dark-soft);text-align:right}
.rs-note{margin:22px 0 0;font-size:13px;color:var(--ink-dark-soft)}
.rs-hero-pic{min-height:0;background:none;overflow:visible;align-self:center}
.rs-hero-pic figcaption{margin-top:10px;font-size:13px;color:var(--ink-dark-soft)}

/* the clinic, room by room */
.cm-sec{background:var(--bg-cream);padding:clamp(70px,8vw,120px) 0}
.cm-grid{margin-top:clamp(30px,3.4vw,50px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(200px,20vw,300px);gap:10px}
.cm-tile{position:relative;margin:0;border-radius:10px;overflow:hidden;background:#2b241d}
.cm-tile:nth-child(1),.cm-tile:nth-child(5){grid-row:span 2}
.cm-tile img{width:100%;height:100%;object-fit:cover;display:block}
.cm-tile figcaption{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;font-size:12px;
  background:rgba(22,19,15,.6);color:var(--cream);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* plan your visit */
.vr-sec{background:var(--paper);padding:clamp(70px,8vw,120px) 0}
.vr-grid{margin-top:clamp(30px,3.4vw,50px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,48px)}
.vr{display:flex;gap:14px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line-dark)}
.vr b{display:block;font-size:15px;font-weight:500}
.vr p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-dark-soft)}
.vr a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:3px}

/* about: the numbers, then the physicians */
.ab-facts{background:var(--bg-cream);padding:0 0 clamp(50px,6vw,90px)}
.ab-facts-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.ab-fact{padding:24px 18px 0 0;display:grid;gap:4px}
.ab-fact b{font-size:clamp(26px,2.6vw,40px);font-weight:400;letter-spacing:-.03em}
.ab-fact span{font-size:13px;color:var(--ink-dark-soft)}
.dr-sec{background:var(--paper);padding:clamp(70px,8vw,120px) 0}
.dr-grid{margin-top:clamp(30px,3.4vw,50px);display:grid;gap:12px}
.dr-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,44px);background:#fff;
  border-radius:12px;padding:8px;align-items:center}
.dr-card figure{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/5;background:#e9e3d8}
.dr-card img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.dr-card>div{padding:clamp(10px,2vw,28px) clamp(10px,2vw,28px) clamp(10px,2vw,28px) 0}
.dr-card small{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.dr-card h3{margin:8px 0 14px;font-size:clamp(26px,2.4vw,36px);font-weight:400;letter-spacing:-.03em}
.dr-card p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--ink-dark-soft);max-width:62ch}

/* contact: the form in a card, then every other way in */
.lead-card{background:#fff;border-radius:12px;padding:clamp(18px,2.2vw,30px);align-self:start}
.lead-card .lead{max-width:none}
.lead-card .btn-gm{justify-content:center;padding:15px 16px}
.lead-card .lead-done .sv-out{padding:13px 14px}
.way-sec{background:var(--paper);padding:clamp(50px,6vw,80px) 0}
.way-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.way{display:grid;gap:6px;align-content:start;padding:18px;border-radius:12px;background:var(--bg-cream);color:var(--ink-dark);
  transition:background .25s var(--ease)}
.way:hover{background:#efe6d8}
.way .sv-ico{margin-bottom:8px}
.way b{font-size:17px;font-weight:500}
.way>span:last-child{font-size:14px;color:var(--ink-dark-soft)}

@media(max-width:1000px){
  .hub-grid,.rs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .way-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .sv-lede{order:3;margin-top:14px}
  .hub-sec h2,.rs-sec h2,.cm-sec h2,.vr-sec h2,.dr-sec h2{font-size:clamp(32px,8.6vw,42px)}
  /* on a phone the treatments read as a list: picture left, words right */
  .hub-grid{grid-template-columns:1fr;gap:8px}
  .hub-card{flex-direction:row;align-items:stretch;gap:12px}
  .hub-pic{flex:0 0 104px;aspect-ratio:auto;min-height:104px}
  .hub-body{padding:8px 6px 8px 0;gap:4px}
  .hub-body b{font-size:17px}
  .hub-body>span:not(.hub-go){font-size:13.5px}
  .hub-go{padding-top:6px;font-size:11.5px}
  .rs-grid{grid-template-columns:1fr}
  .rs-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);width:calc(100% + var(--pad) * 2)}
  .rs-chips::-webkit-scrollbar{display:none}
  .rs-chip{flex:none}
  .cm-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44vw;gap:6px}
  .cm-tile:nth-child(1),.cm-tile:nth-child(5){grid-row:span 1}
  .cm-tile:nth-child(1),.cm-tile:nth-child(10){grid-column:span 2}
  .vr-grid{grid-template-columns:1fr}
  .ab-facts-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .dr-card{grid-template-columns:1fr}
  .dr-card>div{padding:6px 10px 14px}
  .way-grid{grid-template-columns:1fr 1fr;gap:8px}
  .lead-card{order:6;margin-top:28px;width:100%}
}

.lead-done[hidden],.lead[hidden]{display:none!important}

/* ---------- the graft estimate, over the page ---------- */
.fh-modal{padding:0;border:0;margin:auto;width:min(1200px,calc(100vw - 40px));height:min(920px,calc(100dvh - 40px));
  max-width:none;max-height:none;border-radius:16px;overflow:hidden;background:var(--bg);
  box-shadow:0 40px 100px rgba(0,0,0,.55)}
.fh-modal::backdrop{background:rgba(10,8,6,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fh-modal[open]{animation:fhIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fhIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.fh-modal iframe{display:block;width:100%;height:100%;border:0;background:var(--bg)}
html.fh-open{overflow:hidden}
@media(max-width:800px){.fh-modal{width:100vw;height:100dvh;border-radius:0}}
@media (prefers-reduced-motion:reduce){.fh-modal[open]{animation:none}}

/* ---------- home intro: one real case, drag to compare ---------- */
.in-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.in-cta .btn-gm,.in-cta .sv-out{padding:14px 16px}
.intro-gm .sv-out{border-color:var(--ink-dark);color:var(--ink-dark)}
.ba2-fig{margin:0;align-self:start;display:flex;flex-direction:column;gap:12px}
.ba2{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#e6ddcd;touch-action:pan-y;
  --pos:50%;user-select:none}
.ba2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba2-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba2-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.25);pointer-events:none}
.ba2-knob{position:absolute;top:50%;left:var(--pos);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  display:grid;place-items:center;border:2px solid #fff;color:#fff;background:rgba(22,19,15,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;transition:transform .2s var(--ease)}
.ba2-knob svg{width:26px;height:26px}
.ba2:hover .ba2-knob,.ba2-range:focus-visible ~ .ba2-knob{transform:scale(1.08)}
.ba2-range:focus-visible ~ .ba2-knob{outline:2px solid var(--gold);outline-offset:3px}
.ba2-lab{position:absolute;top:22px;display:flex;align-items:flex-end;gap:6px;padding:7px 12px;border-radius:999px;
  font-size:13px;font-weight:500;color:var(--ink-dark);background:rgba(255,255,255,.88);pointer-events:none}
.ba2-lab svg{width:34px;height:20px}
.ba2-lab.b{left:18px}
.ba2-lab.b svg{transform:scaleX(-1) rotate(8deg)}
.ba2-lab.a{right:18px}
.ba2-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba2-fig figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-dark-soft)}
.ba2-fig figcaption a{color:var(--ink-dark);font-weight:500}
@media(max-width:900px){
  .ba2-fig{order:2}
  .in-cta{order:4}
  .in-cta .btn-gm,.in-cta .sv-out{flex:0 1 auto}
}

/* ============================================================
   The rest of the site: reading pages, galleries, plans.
   ============================================================ */
.sv-hero-in.solo{grid-template-columns:minmax(0,1fr)}
.sv-hero-in.solo .sv-hero-copy{max-width:820px}
.sv-hero-in.solo .sv-acts{margin-top:32px}
.sv-hero-in.solo h1{max-width:20ch}

/* a page's own sections */
.st-sec{background:var(--paper);padding:clamp(60px,7vw,110px) 0}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;
  padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--line-dark)}
.st-row:first-child{border-top:0;padding-top:0}
.st-row.flip figure{order:2}
.st-row.solo{grid-template-columns:minmax(0,1fr)}
.st-row figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#e6ddcd}
.st-row figure img{width:100%;height:100%;object-fit:cover;display:block}
.st-text{max-width:68ch}
.st-text h2{font-size:clamp(26px,2.4vw,38px);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}
.st-body,.st-prose{font-size:16px;line-height:1.65;color:var(--ink-dark-soft)}
.st-body p,.st-prose p{margin:0 0 12px}
.st-body h4{margin:18px 0 6px;font-size:15px;font-weight:600;color:var(--ink-dark)}
.st-body ul,.st-prose ul,.st-prose ol{margin:8px 0 14px;padding-left:20px}
.st-body li,.st-prose li{margin:5px 0}
.st-prose{max-width:72ch}
.st-prose h3{margin:34px 0 10px;font-size:clamp(21px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--ink-dark)}
.st-prose h3:first-child{margin-top:0}
.st-prose h4{margin:22px 0 6px;font-size:16px;font-weight:600;color:var(--ink-dark)}
.st-prose a{color:var(--ink-dark);text-decoration:underline;text-underline-offset:3px}
.st-prose strong{color:var(--ink-dark);font-weight:600}
.st-prose img{max-width:100%;height:auto;border-radius:10px;margin:14px 0}
.st-prose figure{margin:0 0 18px}
.st-prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.st-prose td,.st-prose th{border-bottom:1px solid var(--line-dark);padding:9px 8px;text-align:left;vertical-align:top}
.st-prose blockquote{margin:16px 0;padding:14px 18px;border-radius:10px;background:var(--bg-cream);color:var(--ink-dark)}
.bl-body>div>div>figure:first-child{margin-top:0}

/* results galleries */
.rs-still{margin:0;border-radius:8px;overflow:hidden;background:#fff}
.rs-still img{width:100%;height:auto;display:block}
.tl-sec{background:var(--paper);padding:clamp(60px,7vw,110px) 0}
.tl{list-style:none;margin:0;padding:0 0 0 clamp(18px,2vw,28px);border-left:2px solid var(--gold);display:grid;gap:clamp(28px,3vw,44px)}
.tl li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:center}
.tl figure{margin:0;border-radius:12px;overflow:hidden;background:#fff}
.tl figure img{width:100%;height:auto;display:block}
.tl h3{margin:10px 0 8px;font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.02em}
.tl p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-dark-soft)}
.tl .sv-tag{background:var(--bg-cream);color:var(--ink-dark)}

/* testimonials */
.tm-sec{background:var(--paper);padding:clamp(60px,7vw,110px) 0}
.tm-sec h2{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-.04em;max-width:16ch}
.tm-grid{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tm-card{background:#fff;border-radius:12px;padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:12px}
.tm-card .tg-stars{color:var(--gold-ink)}
.tm-body{font-size:15px;line-height:1.6;color:var(--ink-dark-soft)}
.tm-body p{margin:0 0 10px}

/* gallery, with a lightbox */
.gl-sec{background:var(--paper);padding:clamp(60px,7vw,110px) 0}
.gl-sec.dark{background:var(--dark);color:var(--cream)}
.gl-sec h2{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-.04em}
.gl-sec.dark h2{color:var(--cream)}
.gl-grid{margin-top:clamp(28px,3vw,44px);columns:3 280px;column-gap:10px}
.gl-tile{position:relative;display:block;margin:0 0 10px;border-radius:10px;overflow:hidden;break-inside:avoid;background:#e6ddcd}
.gl-tile img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
.gl-tile:hover img{transform:scale(1.03)}
.gl-tile span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;font-size:12px;color:var(--cream);
  background:rgba(22,19,15,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gl-vids{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gl-vid{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:#000}
.lb{padding:0;border:0;background:transparent;max-width:92vw;max-height:92vh;overflow:visible}
.lb::backdrop{background:rgba(10,8,6,.86)}
.lb img{display:block;max-width:92vw;max-height:88vh;border-radius:10px}
.lb-x{position:absolute;top:-46px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:transparent;color:#fff;font-size:24px;cursor:pointer}

/* press */
.pr-logos{background:var(--dark);padding:clamp(26px,3vw,40px) 0}
.pr-logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.pr-logo-row img{height:22px;width:auto;opacity:.8}
.pr-sec{background:var(--paper);padding:clamp(60px,7vw,110px) 0}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pr-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:12px;background:#fff;color:var(--ink-dark);transition:box-shadow .3s var(--ease)}
.pr-card:hover{box-shadow:0 14px 36px rgba(0,0,0,.08)}
.pr-card small{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.pr-card b{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.pr-card span{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}

/* plans: HisHair supply, memberships */
.plan-sec{background:var(--paper);padding:clamp(60px,7vw,110px) 0}
.plan-sec h2{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-.04em}
.plan-grid{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.plan-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
.plan{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,30px);border-radius:14px;background:#fff;border:1px solid transparent}
.plan.hi{background:var(--dark);color:var(--cream)}
.plan small{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.plan.hi small{color:var(--gold-hi)}
.plan h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.02em}
.plan>b{font-size:clamp(32px,3vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1}
.plan>b small{font-size:14px;letter-spacing:0;text-transform:none;color:inherit;opacity:.7}
.plan p{margin:0;font-size:14px;color:var(--ink-dark-soft)}
.plan.hi p{color:rgba(239,230,210,.75)}
.plan ul{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:9px}
.plan li{display:flex;gap:9px;font-size:14px;line-height:1.35}
.plan li svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--gold)}
.plan .btn-gm,.plan .sv-out{margin-top:auto;justify-content:center}
.plan.hi .sv-out{border-color:var(--cream);color:var(--cream)}
.hh-pack{display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 20%,#2e2e2e 0%,#141414 70%)}
.hh-pack-in{display:grid;gap:10px;padding:clamp(24px,3vw,44px);color:var(--cream);max-width:420px}
.hh-pack-in small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.hh-pack-in b{font-size:clamp(46px,5vw,76px);font-weight:400;letter-spacing:-.04em;line-height:1}
.hh-pack-in>span{font-size:16px;color:rgba(239,230,210,.82)}
.hh-pack-in ul{list-style:none;margin:8px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hh-pack-in li{font-size:12.5px;padding:6px 10px;border-radius:999px;border:1px solid rgba(239,230,210,.28)}
.hh-pack-in em{font-style:normal;font-size:13px;color:rgba(239,230,210,.6)}
.hh-pack img{display:none}

/* financing offer band */
.fin-offer{background:var(--dark);color:var(--cream);padding:clamp(40px,5vw,70px) 0}
.fin-offer-in{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.fin-offer .intro-kick{color:var(--cream)}
.fin-offer h2{margin:18px 0 8px;font-size:clamp(34px,3.6vw,56px);letter-spacing:-.04em;line-height:1;color:var(--cream)}
.fin-offer p{margin:0;max-width:52ch;color:rgba(239,230,210,.75)}
.fin-offer .sv-out{border-color:var(--cream);color:var(--cream)}
.fin-offer .sv-out:hover{background:var(--cream);color:var(--ink-dark)}

/* patient journey videos */
.yt-sec{background:var(--paper);padding:clamp(60px,7vw,110px) 0}
.yt-sec h2{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-.04em}
.yt-grid{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.yt{display:grid;gap:8px}
.yt iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}
.yt span{font-size:13px;color:var(--ink-dark-soft)}

/* sign-up consent */
.lead-check{display:flex!important;grid-template-columns:none;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--ink-dark-soft)}
.lead-check input{width:18px!important;height:18px;flex:none;margin-top:2px;padding:0!important}
.lead-check span{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important}

@media(max-width:1000px){
  .pr-grid,.plan-grid,.yt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl-vids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .st-row{grid-template-columns:1fr;gap:18px}
  .st-row.flip figure{order:0}
  .tl li{grid-template-columns:1fr;gap:12px}
  .tm-grid,.pr-grid,.plan-grid,.plan-grid.two,.yt-grid{grid-template-columns:1fr}
  .gl-grid{columns:2 140px;column-gap:6px}
  .gl-tile{margin-bottom:6px}
  .pr-logo-row{justify-content:flex-start;gap:18px 28px}
  .pr-logo-row img{height:18px}
  .fin-offer-in{flex-direction:column;align-items:flex-start}
}

/* ---------- header phone: the number on a desktop, an icon to tap on a phone ---------- */
.nav-tel{font-size:12.5px;letter-spacing:.06em;font-weight:500;color:var(--cream);white-space:nowrap;
  padding:11px 14px;border:1px solid rgba(239,230,210,.55);border-radius:5px;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.nav-tel:hover{border-color:var(--gold);color:var(--gold)}
.nav-cta .nav-icon{display:none}
@media(max-width:1100px){
  .nav-tel{display:none}
  .nav-cta .nav-icon{display:grid;width:40px;height:40px}
}

/* a lighter cream where two cream sections would otherwise run together */
.treat-gm,.tg-gm{background:#FBF8F3}

/* ---------- phone bottom bar: no band, just the buttons, floating ---------- */
.mobile-bar.mb-gm{background:transparent;border-top:0;pointer-events:none;
  padding:0 var(--pad) calc(12px + var(--safe-bottom))}
.mb-gm a{pointer-events:auto;box-shadow:0 8px 24px rgba(27,24,20,.16)}
.mb-gm .mb-ico{background:#FFFFFF;color:var(--ink);border:1px solid var(--line)}
.mb-gm .mb-ico:active{background:var(--bg-2)}

/* ============================================================
   The free AI hair scan: one name and one icon wherever it is
   offered, and its own section on the home page.
   ============================================================ */
.i-scan{width:1.25em;height:1.25em;flex:none;margin-right:.5em;vertical-align:-.28em}
.nav-quiz,.hero-link{display:inline-flex;align-items:center}
@media(max-width:700px){.nav-quiz{display:none}}   /* no room beside the logo on a phone */
.nav-quiz .i-scan,.hero-link .i-scan,.tr-info .i-scan{color:var(--gold)}
.drawer-cta-row .btn{display:inline-flex;align-items:center;justify-content:center}

/* the $199 pop-up: the scan sits under booking, as the other way in */
.modal-pills a.scan{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(201,166,107,.16);border:1px solid rgba(201,166,107,.75)}
.modal-pills a.scan:hover{background:rgba(201,166,107,.3)}
.modal-pills a.scan b{display:inline-flex;align-items:center;font-weight:600}
.modal-pills a.scan b .i-scan{color:#9a7640}
.modal-pills a.scan span{font-size:12.5px;color:var(--ink-dark-soft)}

.scan-gm{position:relative;z-index:2;overflow:hidden;background:#141414;color:var(--cream);
  padding:clamp(80px,9vw,140px) 0}
.scan-gm .intro-kick,.scan-gm .intro-kick svg{color:var(--cream)}
.sc-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,7vw,120px);align-items:center}
.sc-head{grid-column:1;grid-row:1;align-self:end}
.sc-body{grid-column:1;grid-row:2;align-self:start}
.sc-fig{grid-column:2;grid-row:1 / 3;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.scan-gm h2{margin-top:clamp(28px,3vw,44px);font-size:clamp(38px,4.2vw,68px);font-weight:400;line-height:.98;
  letter-spacing:-.045em;color:var(--cream);max-width:13ch;text-wrap:balance}
.scan-gm h2 em{font-family:var(--font-accent);font-style:italic;font-weight:300;letter-spacing:-.02em}
.sc-lede{margin:22px 0 0;max-width:40ch;font-size:clamp(17px,1.35vw,21px);line-height:1.35;letter-spacing:-.01em;
  color:rgba(239,230,210,.8)}
.sc-steps{list-style:none;counter-reset:s;margin:40px 0 0;padding:0;border-top:1px solid rgba(239,230,210,.16)}
.sc-steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:4px 10px;padding:18px 0;
  border-bottom:1px solid rgba(239,230,210,.16)}
.sc-steps li::before{content:counter(s,decimal-leading-zero);grid-row:1 / 3;font-family:var(--font-accent);
  font-style:italic;font-weight:300;font-size:22px;line-height:1.05;color:var(--gold)}
.sc-steps b{font-size:18px;font-weight:500;letter-spacing:-.01em}
.sc-steps span{font-size:14.5px;line-height:1.45;color:rgba(239,230,210,.66)}
.sc-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.sc-cta .btn-gm{padding:16px 20px;font-size:14px}
.sc-fine{font-size:13px;color:rgba(239,230,210,.55)}

/* the phone: a scan of a real before photo, running */
.sc-phone{width:min(310px,78vw);aspect-ratio:9/18.6;padding:9px;border-radius:46px;background:#0a0a0a;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),inset 0 0 0 1px rgba(239,230,210,.16)}
.sc-screen{height:100%;display:flex;flex-direction:column;padding:18px 14px 16px;border-radius:38px;background:#1c1c1c}
.sc-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 14px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(239,230,210,.7)}
.sc-live{display:inline-flex;align-items:center;gap:7px;color:var(--gold)}
.sc-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);animation:scBlink 1.4s steps(2) infinite}
@keyframes scBlink{50%{opacity:.2}}
.sc-shot{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#262626}
.sc-shot img{width:100%;height:100%;object-fit:cover;object-position:48% 50%;display:block}
.sc-arc{position:absolute;inset:0;width:100%;height:100%;color:#fff;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55))}
.sc-tag{position:absolute;left:50%;top:19%;transform:translateX(-50%);padding:4px 9px;border-radius:999px;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--ink-dark);background:var(--gold)}
.sc-frame{position:absolute;inset:10px;--c:var(--gold);background:
  linear-gradient(var(--c),var(--c)) 0 0/20px 2px,linear-gradient(var(--c),var(--c)) 0 0/2px 20px,
  linear-gradient(var(--c),var(--c)) 100% 0/20px 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px 20px,
  linear-gradient(var(--c),var(--c)) 0 100%/20px 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px 20px,
  linear-gradient(var(--c),var(--c)) 100% 100%/20px 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px 20px;
  background-repeat:no-repeat;opacity:.9}
.sc-line{position:absolute;left:0;right:0;top:-40%;height:40%;
  background:linear-gradient(180deg,rgba(201,166,107,0),rgba(201,166,107,.22) 82%,rgba(221,190,130,.95) 100%);
  animation:scSweep 3.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes scSweep{0%{transform:translateY(0)}60%,100%{transform:translateY(350%)}}
.sc-read{margin:10px 0 14px;display:grid}
.sc-read div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 6px;
  border-bottom:1px solid rgba(239,230,210,.12)}
.sc-read dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(239,230,210,.55)}
.sc-read dd{margin:0;font-size:15px;color:var(--cream);white-space:nowrap}
.sc-read div:nth-child(3) dd{color:var(--gold-hi)}
.sc-go{margin-top:auto;flex:none;display:flex;justify-content:center;padding:13px 10px;border-radius:999px;font-size:11.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dark);background:var(--gold)}
.sc-fig figcaption{max-width:30ch;font-size:12.5px;line-height:1.45;text-align:center;color:rgba(239,230,210,.55)}

@media(max-width:900px){
  .sc-grid{grid-template-columns:1fr}
  .sc-head,.sc-fig,.sc-body{grid-column:1;grid-row:auto}
  .sc-fig{margin-top:44px}
  .sc-body{margin-top:8px}
  .scan-gm h2{font-size:clamp(34px,9vw,46px)}
}
@media (prefers-reduced-motion:reduce){
  .sc-line{display:none}
  .sc-live::before{animation:none}
}
.tr-info .i-scan{margin-right:0}

/* ============================================================
   Light theme, Eternal family. The structure is the one we built;
   the face is Eternal's own and borrows from Eternal Longevity:
   white and milk instead of cream, one soft signature colour
   (Hair's is peach; Longevity's is butter), rounded shells, pill
   buttons with a round arrow, bold headlines with one phrase
   marked, faint pastel glows. Gold stays in the logo.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-2:#F5F5F3;          /* milk */
  --bg-cream:#FFFFFF;
  --bg-cream-2:#F5F5F3;
  --ink:#151515;
  --ink-soft:#5C5C61;
  --ink-mute:#8C8C92;
  --ink-dark:#151515;
  --ink-dark-soft:#48484C;
  --line:rgba(21,21,21,.09);
  --line-dark:rgba(21,21,21,.09);
  --accent:#FFD2B6;        /* Eternal Hair peach */
  --accent-deep:#F7B68F;
  --accent-ink:#8A4520;    /* peach as text on white */
  --gold-ink:#8A4520;
  --shell:26px;
  --font-sans:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-disp:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-accent:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --arrow-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 16L16 8M9 8h7v7'/%3E%3C/svg%3E");
  --arrow-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 16L16 8M9 8h7v7'/%3E%3C/svg%3E");
}
.sv-page{--dark:#F5F5F3;--paper:#FFFFFF}

/* faint glows behind the page, as on Eternal Longevity */
body{background:#fff}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:
  radial-gradient(38% 32% at 88% 12%,rgba(255,210,182,.30),transparent 70%),
  radial-gradient(34% 30% at 6% 70%,rgba(207,196,246,.22),transparent 70%),
  radial-gradient(30% 26% at 60% 104%,rgba(191,224,245,.26),transparent 70%)}

/* headlines: bold, no italic tail; the phrase that was italic is marked in peach instead */
.hero-gm .hero-h,.intro-gm h2,.growth-gm h2,.treat-gm h2,.irl-gm h2,.rv-gm h2,.tg-gm h2,.scan-gm h2,
.sv-page h1,.sv-page h2,.fh-hero h1,.st-sec h2{font-weight:650!important;letter-spacing:-.04em}
:is(h1,h2,h3) em{font-family:inherit!important;font-style:normal!important;font-weight:inherit!important;
  letter-spacing:inherit!important;color:inherit}
:is(h1,h2) em{background:linear-gradient(transparent 60%,var(--accent) 60% 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .05em}
.hero-gm :is(h1,h2) em{background:none;padding:0}

/* the hero video sits in a rounded shell with a white frame, not edge to edge */
.hero-gm{margin:0 12px;border-radius:var(--shell);overflow:hidden}
.hero-gm .hero-media::after{background:
  linear-gradient(100deg,rgba(15,12,10,.55) 0%,rgba(15,12,10,.26) 42%,rgba(15,12,10,.05) 74%,rgba(15,12,10,.12) 100%),
  linear-gradient(180deg,rgba(15,12,10,.28) 0%,rgba(15,12,10,0) 26%,rgba(15,12,10,0) 60%,rgba(15,12,10,.5) 100%)}
.hero-gm .hero-foot{border-top-color:rgba(255,255,255,.28)}
.hero-pitch{border-right-color:rgba(255,255,255,.28)}
.hp-sq,.hero-proof .hp-view{border-radius:16px}
@media(max-width:700px){.hero-gm{margin:0 8px;border-radius:22px}}

/* the top band: light, not a gold stripe */
.topband{background:var(--bg-2);color:var(--ink)}

/* buttons: pills in sentence case, with a round arrow */
.nav-book,.btn-gm,.gm-gold,.mb-gm .mb-book,.btn-gold,.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--ink);
  border-radius:999px;text-transform:none;letter-spacing:0;font-weight:600;font-size:14.5px;gap:10px;padding:8px 8px 8px 18px}
.nav-book:hover,.btn-gm:hover,.gm-gold:hover,.btn-gold:hover,.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.nav-book::after,.btn-gm::after,.gm-gold::after,.mb-gm .mb-book::after,.btn-gold::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--ink) var(--arrow-white) center/12px no-repeat}
.sv-out,.gm-out,.tg-out,.btn-ghost{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:600;font-size:14.5px;
  border:1px solid var(--line);background:#fff;color:var(--ink);gap:8px}
.sv-out:hover,.gm-out:hover,.tg-out:hover,.btn-ghost:hover{background:var(--bg-2);color:var(--ink);border-color:var(--line)}
.hero-link,.nav-links,.nav-links a,.nav-quiz,.nav-tel,.sv-link,.tr-info,.irl-cta,.fh-go .btn{text-transform:none;letter-spacing:0}
.nav-links{font-size:14.5px;font-weight:600}
.nav-quiz{font-size:14.5px}
.hero-link{font-size:15px;font-weight:600;padding:9px 16px;border-radius:999px;background:rgba(20,16,12,.34);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28)}
.nav-tel,.nav-icon{border-radius:999px}
.irl-cta{border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.irl-cta:hover{background:var(--accent);color:var(--ink)}

/* header: glass over the hero, a light bar everywhere else */
.nav.scrolled,body:has(.sv-page) .nav{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.nav.scrolled .nav-links a,body:has(.sv-page) .nav-links a,.nav.scrolled .nav-quiz,body:has(.sv-page) .nav-quiz,
.nav.scrolled .nav-tel,body:has(.sv-page) .nav-tel,.nav.scrolled .nav-icon,body:has(.sv-page) .nav-icon{color:var(--ink)}
.nav.scrolled .nav-links a:hover,body:has(.sv-page) .nav-links a:hover{color:var(--accent-ink)}
.nav.scrolled .nav-icon,body:has(.sv-page) .nav-icon,.nav.scrolled .nav-tel,body:has(.sv-page) .nav-tel{border-color:var(--line)}
.nav.scrolled .nav-burger span,body:has(.sv-page) .nav-burger span{background:var(--ink)}
.nav.scrolled .nav-cta .nav-quiz,body:has(.sv-page) .nav-cta .nav-quiz{border-right-color:var(--line)}
.nav-in,body:has(.sv-page) .nav-in{border-bottom-color:transparent}
.nav-quiz .i-scan,.hero-link .i-scan,.tr-info .i-scan{color:var(--accent-deep)}
.mega{background:rgba(255,255,255,.96)}
.drawer{background:rgba(21,21,21,.3)}
.drawer-panel{background:#fff}
.drawer-section[open]{background:var(--bg-2)}
.drawer-section[open] summary,.drawer-section[open] summary::after,.drawer-link-flat:hover,.drawer-meta a:hover,
.mega ul a:hover,.mega-feature .kicker{color:var(--accent-ink)}

/* the desktop bar: a floating glass pill instead of a full-width strip */
@media(min-width:801px){
  .gm-bar{left:50%;right:auto;bottom:14px;transform:translateX(-50%);width:min(760px,calc(100% - 28px));height:auto;
    padding:7px 7px 7px 22px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid var(--line);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 14px 40px -18px rgba(21,21,21,.3)}
  .gm-bar p{font-size:15px;font-weight:500}
}

/* sections: white, alternating with milk; the one that slides over the hero stays solid */
.intro-gm{background:#fff}
.growth-gm,.treat-gm,.rv-gm,.tg-gm{background:transparent}
.scan-gm,.irl-gm,.sv-time,.sv-loc,.sv-faq,.footer.ft{background:var(--bg-2);color:var(--ink)}
.scan-gm .intro-kick,.scan-gm .intro-kick svg,.irl-gm .intro-kick,.irl-gm .intro-kick svg,
.scan-gm h2,.irl-gm h2,.sc-steps b{color:var(--ink)}
.sc-lede,.sc-steps span,.sc-fine{color:var(--ink-soft)}
.sc-steps,.sc-steps li{border-color:var(--line)}
.sc-steps li::before{color:var(--accent-ink)}
.sc-fig figcaption{color:var(--ink-mute)}
.irl-rule{color:var(--accent-deep)}
.irl-rule span{background:var(--line)}
.irl-step{border-bottom-color:var(--line)}
.irl-step summary{color:var(--ink)}
.irl-step summary:hover .t{color:var(--accent-ink)}
.irl-step p{color:var(--ink-soft)}
.sv-time h2,.sv-loc h2,.sv-phases h3,.sv-phases dt,.sv-loc-item a{color:var(--ink)}
.sv-time h2{border-bottom-color:var(--line)}
.sv-phases{border-left-color:var(--accent-deep)}
.sv-tag{background:#fff;color:var(--ink-soft)}
.sv-phases p,.sv-loc-item p,.sv-phases dd{color:var(--ink-soft)}
.sv-phases dl div,.sv-loc-item{border-top-color:var(--line)}
.sv-loc-map iframe{filter:none}
.sv-final-pic,.sv-loc-map{background:var(--bg-2)}

/* rounded shells for every photo surface */
.ba2,.tr-card,.tr-pic,.irl-media,.sv-hero-pic,.sv-final-pic,.sv-time-pics,.sv-loc-map,.tg-card,.tg-mosaic,.cm-tile,
.gw-card .gw-pics,.intro-pics figure,.sv-why-card,.rs-card,.gl-item,.sc-shot{border-radius:var(--shell)}
.gw-sq{border-radius:18px}

/* footer */
.footer.ft{border-top-color:var(--line)}
.ft h2,.ft h3{color:var(--ink)}
.ft p{color:var(--ink-soft)}
.ft-form input{color:var(--ink);background:#fff;border-color:var(--line);border-radius:999px}
.ft-form input::placeholder{color:var(--ink-mute)}
.ft-form button{background:var(--accent);color:var(--ink)}
.ft-msg{color:var(--accent-ink)!important}
.ft-links a,.ft-addr a,.ft-bottom a{color:var(--ink-soft)}
.ft-links a:hover,.ft-addr a:hover,.ft-bottom a:hover,.ft-book{color:var(--accent-ink)}
.ft-soc{color:var(--ink);border-color:var(--line);background:#fff}
.ft-soc:hover,.ft-soc:focus-visible{color:var(--accent-ink);border-color:var(--accent-deep)}

/* phone bar */
.mb-gm .mb-ico{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* weight: the old display face was set at 300; Plus Jakarta Sans at 300
   reads thin and grey, so every place that used it steps up */
h1,h2,h3,h4,.modal h2,.faq summary,.svc-row-title,.journey-step h3,.price-card h3,.loc-card h3,.signup h3,
.lead-done h3,.mega-feature h4,.team-card-content .nm,.svc-card-content .title{font-weight:600}
.hero-meta .stat .num,.stat-cell .num,.trust-cell .num,.price-card .price,.in-stat b,.rv-score b,.calc-out b,
.journey-step .step-meta strong{font-weight:600}
.test-quote,.press-quote blockquote,.big-moment .pull,.review-body,.kinetic{font-weight:400}
.footer .brand{font-weight:500}

/* menus: solid ink at a readable weight */
.mega h5{color:var(--accent-ink);font-weight:600}
.mega ul a{font-family:var(--font-sans);font-size:16.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.mega-feature h4{color:#fff}
.mega-feature p{color:rgba(255,255,255,.82)}
.mega-feature .kicker{color:var(--accent)}
.drawer-section summary,.drawer-link-flat{font-weight:600;letter-spacing:-.02em}
.drawer-sub a{font-weight:500;color:var(--ink)}
.nav-tel{font-weight:600}

/* ---------- inner pages: they move with the reader ---------- */
/* the page's sections, as a pill bar that sticks under the header */
.sv-jump{position:sticky;top:calc(var(--nav-h) - 6px);z-index:40;display:flex;justify-content:center;
  padding:10px var(--pad);margin-top:-30px;pointer-events:none}
.sv-jump-in{pointer-events:auto;display:flex;gap:2px;padding:5px;border-radius:999px;max-width:100%;overflow-x:auto;
  scrollbar-width:none;background:rgba(255,255,255,.8);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px -16px rgba(21,21,21,.25)}
.sv-jump-in::-webkit-scrollbar{display:none}
.sv-jump a{flex:none;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  transition:background .3s var(--ease),color .3s var(--ease)}
.sv-jump a:hover{color:var(--ink);background:var(--bg-2)}
.sv-jump a.on{background:var(--ink);color:#fff}
.sv-page section[id]{scroll-margin-top:124px}
@media(max-width:800px){
  .sv-jump{top:calc(var(--nav-h) - 4px);padding:8px 10px;margin-top:-22px}
  .sv-jump a{padding:8px 13px;font-size:13px}
}

/* hub filters sit beside the heading */
.hub-sec .rs-head{align-items:flex-end}
.hub-sec .rs-head h2{margin-bottom:0}
.rs-chip{font-weight:600;border-color:var(--line);background:#fff}
.rs-chip:hover{background:var(--bg-2)}
.rs-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* cards answer the pointer */
.hub-card{border:1px solid var(--line);border-radius:22px;padding:8px}
.hub-pic{border-radius:16px}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(21,21,21,.3)}
.hub-card:hover .hub-pic img{transform:scale(1.06)}
.hub-body b{font-weight:650}
.hub-go{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
.hub-go::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--accent) var(--arrow-ink) center/12px no-repeat;
  transition:transform .35s var(--ease)}
.hub-card:hover .hub-go::after{transform:translateX(4px) rotate(45deg)}
.sv-why-card img,.sv-area-pic img{transition:transform .9s var(--ease)}
.sv-why-card:hover img,.sv-area:hover .sv-area-pic img{transform:scale(1.06)}
.sv-why-card,.sv-area{transition:transform .35s var(--ease)}
.sv-why-card:hover,.sv-area:hover{transform:translateY(-4px)}

/* the timeline: the line fills as you read down it, the phase in view lights up */
.sv-time{background:var(--bg-2);color:var(--ink)}
.sv-phases{position:relative;border-left-color:var(--line)}
.sv-phases::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--accent-deep);
  transform-origin:top}
@supports (animation-timeline: view()){
  .sv-phases::before{animation:fill-down linear both;animation-timeline:view();animation-range:entry 30% contain 55%}
  @keyframes fill-down{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
.sv-phases li{position:relative;transition:opacity .5s var(--ease)}
.sv-phases li::before{content:"";position:absolute;left:calc(clamp(18px,2vw,28px) * -1 - 7px);top:4px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:2px solid var(--accent-deep);transition:background .4s var(--ease),transform .4s var(--ease)}
.js-phases .sv-phases li:not(.on){opacity:.42}
.sv-phases li.on::before{background:var(--accent-deep);transform:scale(1.25)}
.sv-phases li.on .sv-tag{background:var(--accent);color:var(--ink)}
.sv-phases h3{color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .sv-phases::before{animation:none}
  .hub-card,.sv-why-card,.sv-area,.hub-card .hub-pic img,.sv-why-card img,.sv-area-pic img{transition:none;transform:none!important}
}
.hub-card[hidden]{display:none}

/* long reads: photos open as they arrive, and a line at the top shows how far along you are */
.st-row figure{border-radius:var(--shell)}
@supports (animation-timeline: view()){
  .st-row figure{animation:open-up linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .st-row figure img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes open-up{from{clip-path:inset(10% 7% round var(--shell))}to{clip-path:inset(0 round var(--shell))}}
  @keyframes settle{from{transform:scale(1.14)}to{transform:scale(1)}}
}
@supports (animation-timeline: scroll()){
  body:has(.st-prose)::after{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
    background:var(--accent-deep);transform-origin:left;animation:read-on linear both;animation-timeline:scroll(root)}
  @keyframes read-on{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media(prefers-reduced-motion:reduce){
  .st-row figure,.st-row figure img{animation:none}
}
/* headings inside an article read as article headings, not page titles */
.st-prose h2{font-size:clamp(24px,2.2vw,32px);line-height:1.15;letter-spacing:-.03em;margin:40px 0 12px;color:var(--ink)}
.st-prose h2:first-child{margin-top:0}

/* ---------- hubs: the treatment explorer ----------
   A list to run down instead of a wall of cards. On a wide screen the
   treatment under the pointer opens beside it; on a phone each row
   carries its own photo and goes straight to the page. */
.tx{margin-top:clamp(30px,3.4vw,50px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,64px);align-items:start}
.tx-list{display:flex;flex-direction:column}
.tx-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:22px 18px;
  border-top:1px solid var(--line);border-radius:18px;color:var(--ink);
  transition:background-color .35s var(--ease),opacity .35s var(--ease),border-color .35s var(--ease)}
.tx-row:first-child{border-top-color:transparent}
.tx-row[hidden]{display:none}
.tx-thumb{display:none}
.tx-name{display:grid;gap:5px;min-width:0}
.tx-name b{font-size:clamp(20px,1.7vw,26px);font-weight:650;letter-spacing:-.025em;line-height:1.1}
.tx-name span{font-size:14.5px;line-height:1.35;color:var(--ink-soft)}
.tx-who{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--bg-2);color:var(--ink-soft);white-space:nowrap}
.tx-go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff var(--arrow-ink) center/14px no-repeat;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease)}
.tx-row:hover .tx-go,.tx-row:focus-visible .tx-go{background-color:var(--accent);border-color:var(--accent);transform:rotate(45deg)}

.tx-view{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;aspect-ratio:4/5;width:100%;max-height:calc(100vh - var(--nav-h) - 130px);border:1px solid var(--line);
  border-radius:var(--shell);overflow:hidden;background:var(--bg-2)}
.tx-pane{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s}
.tx-pane.on{opacity:1;visibility:visible}
.tx-pane>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 1.4s var(--ease)}
.tx-pane.on>img{transform:none}
.tx-info{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:12px;padding:22px 22px 20px;border-radius:20px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:translateY(14px);transition:transform .7s var(--ease)}
.tx-pane.on .tx-info{transform:none}
.tx-info small{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.tx-h{margin:0;font-size:clamp(22px,1.9vw,30px);font-weight:650;letter-spacing:-.03em;line-height:1.08;color:var(--ink);text-wrap:balance}
.tx-h em{font-style:normal;background:linear-gradient(transparent 60%,var(--accent) 60% 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .05em}
.tx-info ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tx-info li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;color:var(--ink-soft)}
.tx-info .sv-ico{width:30px;height:30px}
.tx-info .sv-ico svg{width:15px;height:15px}
.tx-info .btn-gm{justify-self:start;margin-top:4px}

@media(min-width:901px){
  .tx-row.on{background:var(--bg-2);border-top-color:transparent}
  .tx-row.on+.tx-row{border-top-color:transparent}
  .tx-row.on .tx-who{background:#fff}
  .tx-row.on .tx-go{background-color:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
  .tx-list:hover .tx-row:not(.on){opacity:.5}
}
@media(max-width:900px){
  .tx{grid-template-columns:1fr}
  .tx-view{display:none}
  .tx-row{grid-template-columns:68px minmax(0,1fr) auto;gap:14px;padding:12px 4px;border-radius:0}
  .tx-thumb{display:block;width:68px;height:80px;border-radius:14px;object-fit:cover}
  .tx-who{display:none}
  .tx-name b{font-size:18px}
  .tx-name span{font-size:13.5px}
  .tx-go{width:34px;height:34px;background-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .tx-pane,.tx-pane>img,.tx-info,.tx-go{transition:none}
}

/* ---------- inner page headers: the home page's frame ----------
   The photo fills a rounded shell edge to edge, the headline sits on it in
   white, and a card floats beside it: a real patient to drag across on the
   surgical pages, what patients say on Google everywhere else. */
.sv-hero:has(.sv-hero-pic){background:transparent;padding:calc(var(--band) + var(--nav-h) + 10px) 0 clamp(26px,3vw,40px)}
.sv-hero-in:has(>.sv-hero-pic){position:relative;isolation:isolate;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(24px,4vw,60px);
  max-width:none;margin:0 12px;min-height:min(calc(100svh - var(--band) - var(--nav-h) - 120px),820px);
  padding:clamp(28px,4.4vw,72px);border-radius:var(--shell);color:#fff}
.sv-hero-in>.sv-hero-pic{position:absolute;inset:0;z-index:-1;margin:0;min-height:0;border-radius:0}
.sv-hero-in>.sv-hero-pic img{animation:hero-drift 16s cubic-bezier(.16,1,.3,1) both;
  object-position:50% 28%!important}   /* the new photos are of people: keep heads in the wide frame */
@keyframes hero-drift{from{transform:scale(1.09)}to{transform:scale(1)}}
.sv-hero-in>.sv-hero-pic::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(15,12,10,.74) 0%,rgba(15,12,10,.5) 38%,rgba(15,12,10,.14) 70%,rgba(15,12,10,.06) 100%),
  linear-gradient(0deg,rgba(15,12,10,.6) 0%,rgba(15,12,10,0) 48%)}
.sv-hero-in:has(>.sv-hero-pic) .sv-hero-copy{max-width:680px}
.sv-hero-in:has(>.sv-hero-pic) .intro-kick{color:rgba(255,255,255,.86)}
.sv-hero-in:has(>.sv-hero-pic) h1{color:#fff;font-size:clamp(44px,5.4vw,88px);line-height:.96;max-width:13ch}
.sv-hero-in:has(>.sv-hero-pic) h1 em{background:none;padding:0;color:var(--accent)}
.sv-hero-in:has(>.sv-hero-pic) .sv-lede{color:rgba(255,255,255,.86);max-width:46ch}
.sv-hero-in:has(>.sv-hero-pic) .sv-bullets{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,2.4vw,32px) 0 clamp(22px,2.4vw,30px)}
.sv-hero-in:has(>.sv-hero-pic) .sv-bullets li{gap:8px;padding:6px 14px 6px 6px;border-radius:999px;font-size:14px;color:#fff;max-width:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sv-hero-in:has(>.sv-hero-pic) .sv-bullets .sv-ico{width:28px;height:28px;border:0;background:rgba(255,255,255,.18);color:#fff}
.sv-hero-in:has(>.sv-hero-pic) .sv-bullets .sv-ico svg{width:14px;height:14px}
.sv-hero-in:has(>.sv-hero-pic) .sv-acts{margin-top:0;padding-top:0;border-top:0}
.sv-hero-in:has(>.sv-hero-pic) .sv-out{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sv-hero-in:has(>.sv-hero-pic) .sv-out:hover{background:#fff;color:var(--ink)}

.ph-card{width:clamp(280px,25vw,360px);padding:10px;border-radius:22px;background:rgba(255,255,255,.9);color:var(--ink);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px -24px rgba(0,0,0,.5);
  animation:card-in .9s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes card-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ph-case .ba-slider{aspect-ratio:4/3;border-radius:14px;box-shadow:none}
.ph-case p{margin:0;padding:12px 8px 4px;display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-soft)}
.ph-case p b{color:var(--ink);font-weight:650}
.ph-rate{padding:20px 22px}
.ph-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;color:var(--ink)}
.ph-score span:first-child{color:#E8A33D;letter-spacing:2px;font-size:15px}
.ph-score b{font-size:26px;font-weight:650;letter-spacing:-.03em}
.ph-score span:last-child{font-size:13px;color:var(--ink-soft)}
.ph-rate blockquote{margin:14px 0 10px;font-size:15.5px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.ph-rate cite{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.sv-hero:has(.sv-hero-pic)+.sv-jump{margin-top:-14px}

@media(max-width:900px){
  .sv-hero-in:has(>.sv-hero-pic){display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:22px;
    margin:0 8px;min-height:calc(100svh - var(--band) - var(--nav-h) - 110px);padding:26px 20px 22px;border-radius:22px}
  .sv-hero-in:has(>.sv-hero-pic) .sv-hero-copy{display:flex;flex-direction:column}
  .sv-hero-in>.sv-hero-pic{order:0;margin:0;aspect-ratio:auto}
  /* the photo gets the top of the frame to itself; the copy reads on the dark below it */
  .sv-hero-in:has(>.sv-hero-pic){padding-top:min(42svh,330px)}
  .sv-hero-in>.sv-hero-pic::after{background:linear-gradient(180deg,rgba(15,12,10,.05) 0,rgba(15,12,10,.2) 180px,
    rgba(15,12,10,.8) 360px,rgba(15,12,10,.88) 100%)}
  .sv-hero-in:has(>.sv-hero-pic) h1{font-size:clamp(38px,10.4vw,50px)}
  .sv-hero-in:has(>.sv-hero-pic) .sv-bullets{margin:18px 0 20px}
  .sv-hero-in:has(>.sv-hero-pic) .sv-bullets li{font-size:13px}
  .ph-card{width:auto}
  .ph-rate{padding:16px 18px}
}
@media(prefers-reduced-motion:reduce){
  .sv-hero-in>.sv-hero-pic img,.ph-card{animation:none}
}