/* ---------------------------------------------------------------------------
   nexthealth-labs / style.css

   Matched to the site we built for them: nexthealth-v2, live at
   nexthealth-redesign.vercel.app. Tokens taken from its own :root.

     --cyan #17C4FF   --navy #054990   --ink #0B1622
     --grey #808891   --line #DDE5EC
     Fjalla One headings, Lato body, black pill CTAs, dark hero on white body.

   Earlier passes: style-teal.css.bak, style-emil.css.bak, style-gold.css.bak
--------------------------------------------------------------------------- */

:root{
  --cyan:#17c4ff;
  --navy:#054990;
  --ink:#0b1622;
  --ink-deep:#0a0e10;
  --grey:#808891;
  --line:#dde5ec;
  --paper:#ffffff;
  --wash:#f4f6f7;
  --lav:#e7eafb;
  --display:'Fjalla One',Impact,'Arial Narrow',sans-serif;
  --sans:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --shell:1200px;
  --ease:cubic-bezier(.4,0,.2,1);
  --fade:linear-gradient(to bottom,#000 78%,transparent);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.5px}
h1{font-size:clamp(42px,5.4vw,64px)}
h2{font-size:clamp(30px,3.4vw,44px)}
h3{font-size:21px;letter-spacing:-.2px}
p{margin:0}

.shell{width:var(--shell);max-width:calc(100% - 48px);margin:0 auto}
.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--cyan);margin-bottom:16px;
}
.eyebrow.dark{color:var(--navy)}
.lede{color:var(--grey);font-size:17px;line-height:1.75;max-width:60ch}

/* ---------------------------------- CTA ----------------------------------- */
.cta{
  display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:999px;
  padding:15px 30px;font-weight:700;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  transition:background .15s var(--ease);
}
.cta:hover{background:#1d2b3a}
.cta.light{background:#fff;color:var(--ink)}
.cta.light:hover{background:#e9edf0}
.cta.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.cta.ghost:hover{background:var(--wash)}
.cta:disabled{background:#aeb6bd;cursor:not-allowed}

/* -------------------------------- draft ----------------------------------- */
.draftbar{
  background:var(--ink-deep);color:#9fb0bd;font-size:12.5px;letter-spacing:.3px;
  text-align:center;padding:9px 24px;
}
.draftbar b{color:var(--cyan);letter-spacing:1.6px;text-transform:uppercase;font-size:11.5px}

/* -------------------------------- header ---------------------------------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(231,234,251,.94);
  border-bottom:0;backdrop-filter:saturate(160%) blur(8px);
}
header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
header .mark img{height:38px;width:auto}
header nav{display:flex;gap:30px;align-items:center}
header nav a{font-size:15px;font-weight:700;color:var(--ink);transition:color .15s var(--ease)}
header nav a:hover{color:var(--navy)}
header .cta{padding:12px 22px}

/* --------------------------------- hero -----------------------------------
   Modelled on the Dr. James layout: pale lavender panel, giant ghosted
   surname behind a cut-out of the doctor, floating proof chips, pitch column
   on the right.
--------------------------------------------------------------------------- */
.hero{background:var(--lav);color:var(--ink);position:relative;overflow:hidden;padding-top:34px}
.hwrap{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:end;min-height:560px;
}

/* the surname, set huge and barely there, behind him */
.ghost{
  position:absolute;left:-1%;top:28%;z-index:1;pointer-events:none;
  font-family:var(--display);font-size:clamp(110px,14vw,210px);line-height:.8;
  letter-spacing:-3px;color:#fff;opacity:.72;white-space:nowrap;
}

.cutout{position:relative;z-index:2;align-self:end;justify-self:center;max-width:430px;margin-left:4%}
.cutout img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 40px rgba(26,34,84,.18));
}
/* placeholder only: the current asset is a rectangular studio photo, not a
   keyed cut-out. Drop the class once assets/hero/ lands. */


/* floating chips */
.chip{
  position:absolute;z-index:3;background:#fff;border-radius:14px;
  padding:16px 18px;box-shadow:0 14px 34px -18px rgba(26,34,84,.42);
  max-width:220px;
}
.chip .big{font-family:var(--display);font-size:30px;line-height:1;color:var(--ink)}
.chip .k{font-size:12px;font-weight:700;color:var(--ink);margin-top:5px}
.chip .s{font-size:11.5px;color:var(--grey);line-height:1.45;margin-top:5px}
.chip-top{top:4%;right:34%}
.chip-rate{left:0;bottom:4%;background:none;box-shadow:none;padding:0;max-width:236px}
.chip-rate .score{font-size:15px;font-weight:700;color:var(--ink)}
.chip-rate .score i{color:var(--cyan);font-style:normal}
.chip-rate .s{margin-top:4px}

/* the pitch */
.pitch{position:relative;z-index:3;padding:0 0 92px 8px}
.pitch .hey{color:var(--grey);font-size:15px;margin-bottom:10px}
.pitch h1{font-size:clamp(40px,4.6vw,60px);color:var(--ink);margin-bottom:12px}
.pitch .sub{color:var(--grey);font-size:15.5px;margin-bottom:26px;max-width:40ch;line-height:1.6}
.pitch .cta{background:var(--navy)}
.pitch .cta:hover{background:#073a70}

.social{display:flex;align-items:center;gap:12px;margin-top:26px}
.faces{display:flex}
.faces span{
  width:30px;height:30px;border-radius:999px;border:2px solid var(--lav);
  margin-left:-9px;display:block;background-size:cover;background-position:center 18%;
}
.faces span:first-child{margin-left:0}
.sn b{font-family:var(--display);font-size:19px;color:var(--ink);display:block;line-height:1}
.sn i{font-style:normal;font-size:12px;color:var(--grey)}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  padding:0 0 46px;position:relative;z-index:3;
}
.stats .v{
  font-family:var(--display);font-size:28px;color:var(--ink);
  border-top:1px solid rgba(11,22,34,.14);padding-top:13px;
}
.stats .k{color:var(--grey);font-size:12.5px;margin-top:4px;line-height:1.4}

/* ------------------------------- sections --------------------------------- */
section{padding:88px 0}
section.wash{background:var(--wash)}
section.dark{background:var(--ink-deep);color:#fff}
section.dark .lede{color:#b9c4cc}
section.dark h2{color:#fff}
.sec-head{margin-bottom:44px;max-width:66ch}
.sec-head h2{margin-bottom:14px}

/* ------------------------- panels: sliding carousel ------------------------ */
.carousel{position:relative;min-width:0;max-width:100%}
.track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.track::-webkit-scrollbar{display:none}
.panel{
  flex:0 0 320px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;
  text-align:left;position:relative;overflow:hidden;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.panel .pbody{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}

/* the photograph strip at the top of each card */
.pshot{
  position:relative;margin:0;overflow:hidden;background:var(--wash);
  border-bottom:1px solid var(--line);
}
.pshot img{
  display:block;width:100%;height:168px;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform .5s var(--ease),filter .3s var(--ease);
}
/* a whisper of the brand cyan over the monochrome, so the strip belongs here */
.pshot:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,73,144,.14) 0%,rgba(5,73,144,0) 40%,rgba(11,22,34,.30) 68%,rgba(11,22,34,.74) 100%);
}
.pshot-cat{
  position:absolute;left:16px;bottom:12px;z-index:1;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(11,22,34,.9),0 2px 14px rgba(11,22,34,.6);
}
.panel:hover .pshot img{transform:scale(1.045);filter:grayscale(.55) contrast(1.04)}
.panel:hover{border-color:var(--navy);box-shadow:0 10px 30px rgba(11,22,34,.08)}
.panel.featured{border-color:var(--cyan)}
.panel .badge{
  position:absolute;top:0;right:0;z-index:2;background:var(--cyan);color:var(--ink);
  font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  padding:6px 12px;border-radius:0 14px 0 14px;
}
.panel .cat{
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--grey);margin-bottom:10px;
}
.panel h3{margin-bottom:10px}
.panel .desc{color:var(--grey);font-size:15px;margin-bottom:20px}
.panel .amt{font-family:var(--display);font-size:38px;color:var(--navy);line-height:1}
.panel .amtnote{color:var(--grey);font-size:12px;margin:6px 0 20px}
.panel .inc{
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);
  border-top:1px solid var(--line);padding-top:18px;margin-bottom:12px;
}
.panel ul{list-style:none;margin:0 0 24px;padding:0;font-size:14.5px;color:var(--grey);flex:1}
.panel li{padding:5px 0 5px 20px;position:relative}
.panel li:before{content:'';position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--cyan);border-radius:2px}
.panel .cta{width:100%;text-align:center}

.rail{display:flex;align-items:center;gap:14px;margin-top:22px}
.arrow{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:17px;
  transition:background .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease);
}
.arrow:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.arrow[disabled]{opacity:.32;cursor:not-allowed}
.arrow[disabled]:hover{background:#fff;color:var(--ink);border-color:var(--line)}
.dots{display:flex;gap:7px;margin-left:auto}
.dot{
  width:7px;height:7px;border-radius:999px;background:var(--line);border:0;padding:0;
  transition:background .15s var(--ease),width .15s var(--ease);
}
.dot.on{background:var(--navy);width:22px}

/* ------------------------------- doctor ----------------------------------- */
.doc{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start}
.doc > *{min-width:0}
.doc .shot img{border-radius:14px}
.doc h2{margin-bottom:6px}
.doc .role{
  color:var(--navy);font-weight:700;font-size:14px;letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:22px;
}
.doc p{color:var(--grey);line-height:1.8;margin-bottom:14px}
.creds{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.creds li{padding-left:26px;position:relative;color:var(--ink);font-size:15px}
.creds li:before{content:'';position:absolute;left:0;top:10px;width:13px;height:2px;background:var(--cyan);border-radius:2px}

/* ----------------------------- testimonials -------------------------------- */
.ratings{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.rating .sc{font-family:var(--display);font-size:30px;color:var(--ink)}
.rating .cl{color:var(--grey);font-size:13.5px;margin-top:2px}
.reviews{columns:3;column-gap:22px}
.review{
  break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;margin:0 0 22px;
}
.review q{quotes:none;display:block;color:var(--ink);font-size:15px;line-height:1.7}
.review q:before{content:'\201C'}
.review q:after{content:'\201D'}
.review .by{display:flex;align-items:center;gap:12px;margin-top:16px}
.review .av{
  width:36px;height:36px;border-radius:999px;background:var(--wash);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  color:var(--navy);flex:none;
}
.review .nm{font-weight:700;font-size:14px}
.review .mt{color:var(--grey);font-size:12.5px}
.provenance{color:var(--grey);font-size:13px;margin-top:8px;line-height:1.7}

/* -------------------------------- facts ----------------------------------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.fact .k{
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--navy);margin-bottom:9px;
}
.fact .v{color:var(--grey);font-size:15.5px;line-height:1.7}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{padding-left:26px;position:relative;color:var(--grey)}
.checks li:before{content:'';position:absolute;left:0;top:11px;width:13px;height:2px;background:var(--cyan);border-radius:2px}

/* -------------------------------- close ----------------------------------- */
.close-cta{text-align:center}
.close-cta .lede{margin:0 auto 30px}

/* -------------------------------- footer ---------------------------------- */
footer{background:var(--ink-deep);color:#8e9aa4;padding:56px 0;font-size:14.5px;line-height:1.85}
footer img{height:32px;margin-bottom:22px;filter:brightness(0) invert(1);opacity:.9}
footer a{color:#c3cdd4;border-bottom:1px solid rgba(255,255,255,.2)}
footer a:hover{color:var(--cyan);border-color:var(--cyan)}
footer .fine{margin-top:22px;font-size:12.5px;max-width:80ch;color:#6f7a83}

.todo{color:#8a6f31;background:#fbf5e7;border-bottom:1px dotted #b9a267;padding:0 2px;border-radius:2px}
section.dark .todo,.hero .todo{background:rgba(255,214,120,.14);color:#e7c98a;border-bottom-color:#8d7a4e}

/* =========================================================================
   ORDER FLOW
   ========================================================================= */
dialog{
  width:660px;max-width:calc(100% - 32px);border:0;padding:0;border-radius:16px;
  background:#fff;color:var(--ink);max-height:92vh;overflow:hidden;
}
dialog::backdrop{background:rgba(10,14,16,.6)}
.dhead{padding:24px 36px;border-bottom:1px solid var(--line);position:relative;background:var(--wash)}
.dhead .who{color:var(--grey);font-size:14.5px}
.dhead .who b{color:var(--ink)}
.close{
  position:absolute;right:20px;top:20px;background:none;border:0;font-size:19px;
  line-height:1;color:var(--grey);padding:4px 8px;transition:color .15s var(--ease);
}
.close:hover{color:var(--ink)}
.dbody{padding:32px 36px 36px;overflow-y:auto;max-height:calc(92vh - 82px)}
.step[hidden]{display:none}
.step h3{font-size:26px;margin-bottom:10px}
.step .sub{color:var(--grey);margin-bottom:28px;line-height:1.7}

.choices{display:grid;gap:14px}
.choice{
  display:block;cursor:pointer;border:1px solid var(--line);border-radius:12px;
  padding:19px 21px;background:#fff;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.choice:hover{border-color:var(--grey)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .row{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.choice .nm{font-weight:700;font-size:16.5px}
.choice .amt{font-family:var(--display);font-size:19px;color:var(--navy);white-space:nowrap}
.choice .bl{color:var(--grey);font-size:14.5px;margin-top:9px;line-height:1.65}
.choice ul{list-style:none;margin:11px 0 0;padding:0;color:var(--grey);font-size:13.5px}
.choice li{padding:3px 0 3px 18px;position:relative}
.choice li:before{content:'';position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--cyan);border-radius:2px}
.choice:has(input:checked){border-color:var(--navy);background:#f5f9fd}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column}
.field.wide{grid-column:1 / -1}
.field label{
  font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink);margin-bottom:8px;
}
.field .hint{font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15.5px;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;width:100%;transition:border-color .15s var(--ease);
}
.field textarea{resize:vertical;min-height:76px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy)}
.field input::placeholder,.field textarea::placeholder{color:#aab3ba}
.field.bad input,.field.bad select{border-color:#c0392b;background:#fdf7f6}
.err{color:#c0392b;font-size:13px;margin-top:7px}
.err:empty{display:none}

.review-box{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rrow{
  display:flex;justify-content:space-between;gap:18px;padding:12px 18px;
  border-bottom:1px solid var(--line);font-size:14.5px;
}
.rrow:last-child{border-bottom:0}
.rrow span{color:var(--grey)}
.rrow b{font-weight:700;text-align:right}
.rrow.total{background:var(--wash)}
.rrow.total b{font-family:var(--display);font-size:21px;color:var(--navy);font-weight:400}
.tests-line{
  color:var(--grey);font-size:13.5px;padding:12px 18px;
  border-bottom:1px solid var(--line);line-height:1.65;
}
.fine{color:var(--grey);font-size:13px;line-height:1.65;margin-top:18px}
.actions{display:flex;align-items:center;gap:22px;margin-top:28px;flex-wrap:wrap}
.back{
  background:none;border:0;color:var(--grey);padding:0;font-weight:700;font-size:14px;
  transition:color .15s var(--ease);
}
.back:hover{color:var(--ink)}
.done .mark{
  font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--navy);margin-bottom:12px;
}
.done .summary{
  margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:12px;
  background:var(--wash);color:var(--grey);line-height:1.7;
}
.done .summary b{color:var(--ink)}

/* ------------------------------ responsive -------------------------------- */
@media(max-width:1080px){
  .hero .inner{padding-top:64px;min-height:440px}
  .hero .shot{width:62%;opacity:.5}
  .stats{grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
  .doc{grid-template-columns:1fr;gap:30px}
  .doc .shot{max-width:300px}
  .reviews{columns:2}
}
@media(max-width:760px){
  .shell{max-width:calc(100% - 36px)}
  section{padding:60px 0}
  header nav{display:none}
  header .cta{padding:11px 16px;font-size:12px}
  .sec-head{margin-bottom:30px}
  .panel{flex-basis:270px}
  .reviews{columns:1}
  .ratings{gap:26px}
  dialog{width:100%;max-width:100%;max-height:100vh;border-radius:0}
  .dhead{padding:20px 22px}
  .dbody{padding:26px 22px 34px;max-height:calc(100vh - 74px)}
  .fields{grid-template-columns:1fr}
  .actions .cta{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{scroll-behavior:auto}
  *{transition:none!important}
}

/* =========================================================================
   VIDEO TESTIMONIALS
   4:5 portrait cards like nexthealth-v2. Posters are 16:9, so the image is
   sized to the card height and panned to a per-card focal point via --fx/--fy,
   with --vz zooming past YouTube letterbox bars on the smaller posters.
   ========================================================================= */
.vidwrap{margin-bottom:56px}
.vtrack{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 16px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.vtrack::-webkit-scrollbar{display:none}
.vcard{
  flex:0 0 252px;scroll-snap-align:start;position:relative;display:block;
  aspect-ratio:4/5;border:0;padding:0;margin:0;border-radius:12px;overflow:hidden;
  background:var(--wash);cursor:pointer;text-align:left;
  box-shadow:0 1px 2px rgba(10,14,16,.06),0 14px 28px -20px rgba(10,14,16,.45);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vcard:hover{transform:translateY(-5px);box-shadow:0 2px 5px rgba(10,14,16,.08),0 26px 46px -24px rgba(10,14,16,.55)}
.vmedia{position:absolute;inset:0;overflow:hidden;display:block;transition:transform .5s var(--ease)}
.vcard:hover .vmedia{transform:scale(1.05)}
.vmedia img{
  position:absolute;left:50%;top:50%;
  height:calc(var(--vz,1) * 100%);width:auto;max-width:none;
  transform:translate(calc(var(--fx,.5) * -100%),calc(var(--fy,.5) * -100%));
}
.vscrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,14,16,.94) 0%,rgba(10,14,16,.74) 26%,rgba(10,14,16,.28) 52%,rgba(10,14,16,0) 72%),
    linear-gradient(to bottom,rgba(10,14,16,.3) 0%,rgba(10,14,16,0) 30%);
}
.vtime{
  position:absolute;top:12px;right:12px;z-index:2;
  background:rgba(10,14,16,.78);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.4px;padding:4px 9px;border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.vplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:999px;background:rgba(255,255,255,.94);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:17px;padding-left:3px;transition:transform .25s var(--ease),background .25s var(--ease);
}
.vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.09);background:#fff}
.vmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 16px 16px;display:block}
.vline{display:block;color:#fff;font-family:var(--display);font-size:17px;line-height:1.16;letter-spacing:-.2px}
.vname{display:block;color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-top:8px}
.vtreat{display:block;color:rgba(255,255,255,.66);font-size:12px;line-height:1.45;margin-top:5px}

.vbox{
  position:fixed;inset:0;z-index:200;background:rgba(10,14,16,.92);
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.vbox[hidden]{display:none}
.vframe{width:min(1000px,100%);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vclose{
  position:absolute;top:22px;right:26px;background:none;border:0;color:#fff;
  font-size:22px;padding:8px 12px;cursor:pointer;
}
.vclose:hover{color:var(--cyan)}

@media(max-width:760px){
  .vcard{flex-basis:215px}
  .vbox{padding:16px}
}

/* =========================================================================
   CORPORATE MEMBERS + CURVED SECTION EDGES
   The hero is a lavender panel, the corporate rail sits on it, and the white
   body rises into it with a curved top edge.
   ========================================================================= */
.corp{background:var(--lav);padding:0 0 52px;position:relative;z-index:3}
.corp-label{
  font-size:11.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--navy);text-align:center;margin-bottom:22px;
}
.corp-note{color:var(--grey);font-size:13px;text-align:center;margin-top:20px}
.railbox{position:relative;overflow:hidden}
/* edge fades painted in the panel colour, so no masking is needed */
.railbox:before,.railbox:after{
  content:'';position:absolute;top:0;bottom:0;width:88px;z-index:2;pointer-events:none;
}
.railbox:before{left:0;background:linear-gradient(to right,var(--lav),rgba(231,234,251,0))}
.railbox:after{right:0;background:linear-gradient(to left,var(--lav),rgba(231,234,251,0))}
.rail-logos{
  display:flex;gap:64px;align-items:center;width:max-content;
  animation:railslide 32s linear infinite;
}
.railbox:hover .rail-logos{animation-play-state:paused}
.clogo{flex:none;display:flex;align-items:center;justify-content:center;height:38px}
.clogo img{max-height:38px;width:auto;object-fit:contain;opacity:.6;filter:grayscale(1);transition:opacity .2s var(--ease),filter .2s var(--ease)}
.clogo img:hover{opacity:1;filter:grayscale(0)}
@keyframes railslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .rail-logos{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px}
}

/* the curved lip where the white body meets the lavender hero */
.curve{position:relative;background:#fff;border-radius:40px 40px 0 0;margin-top:-40px;z-index:4;padding-top:76px}
footer{border-radius:40px 40px 0 0;margin-top:-40px;position:relative;z-index:4}

@media(max-width:760px){
  .curve{border-radius:26px 26px 0 0;margin-top:-26px;padding-top:56px}
  footer{border-radius:26px 26px 0 0;margin-top:-26px}
  .rail-logos{gap:40px}
  .clogo,.clogo img{height:30px;max-height:30px}
  .railbox:before,.railbox:after{width:48px}
}

/* =========================================================================
   VIDEO LIGHTBOX: story panel beside the player
   ========================================================================= */
.vstage{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:stretch;
  width:min(1180px,100%);background:#000;border-radius:16px;overflow:hidden;max-height:86vh;
}
/* the player cell is black so the space around a 16:9 frame reads as letterbox
   rather than as a white gap under the video */
.vcell{display:flex;align-items:center;justify-content:center;background:#000;min-height:0}
.vframe{aspect-ratio:16/9;width:100%;background:#000;border-radius:0}
.vside{padding:30px 28px;overflow-y:auto;background:#fff;display:flex;flex-direction:column}
.vside .who{font-family:var(--display);font-size:28px;color:var(--ink);line-height:1.05}
.vside .role{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--navy);margin-top:7px}
.vside .lbl{font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--grey);margin:26px 0 9px}
.vside .treat{color:var(--ink);font-size:15.5px;line-height:1.6}
.vside blockquote{
  margin:0;padding:16px 18px;background:var(--wash);border-radius:12px;
  border-left:3px solid var(--cyan);color:var(--ink);font-size:15px;line-height:1.7;
}
.vside .out{color:var(--grey);font-size:14.5px;line-height:1.7}
.vside .run{margin-top:auto;padding-top:22px;color:var(--grey);font-size:12.5px}

@media(max-width:1000px){
  .vstage{grid-template-columns:1fr;max-height:92vh}
  .vside{padding:22px 20px}
  .vside .who{font-size:23px}
}
/* Testimonial cards component (vanilla CSS)
   Ported from a React/shadcn pattern. Uses host page tokens defined on
   :root; fallbacks are included so the block still renders sanely if a
   token is ever missing. */

/* Scope box-sizing so card padding/width math is predictable no matter
   what (or whether) the host page resets box-sizing globally. */
.tc-section,
.tc-section *,
.tc-section *::before,
.tc-section *::after {
  box-sizing: border-box;
}

.tc-section {
  font-family: var(--sans, 'Lato', sans-serif);
}

.tc-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}

.tc-title {
  font-family: var(--display, 'Fjalla One', sans-serif);
  color: var(--ink, #0b1622);
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: .02em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.tc-desc {
  font-family: var(--sans, 'Lato', sans-serif);
  color: var(--grey, #808891);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.tc-wrap {
  position: relative;
}

.tc-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* The clipped state approximates "maxDisplayed" cards worth of height.
   Every card is already in the DOM; Load More just lifts the cap. */
.tc-list-clipped {
  max-height: 720px;
  overflow: hidden;
  transition: max-height .4s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.tc-card {
  position: relative;
  width: 320px;
  padding: 20px;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #dde5ec);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tc-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  color: var(--cyan, #17c4ff);
  opacity: .85;
  pointer-events: none;
}

.tc-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px; /* keep name/meta clear of the corner badge */
}

.tc-avatar {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--wash, #f4f6f7);
  border: 1px solid var(--line, #dde5ec);
  color: var(--navy, #054990);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tc-who {
  min-width: 0;
}

.tc-name {
  font-weight: 600;
  color: var(--ink, #0b1622);
  font-size: 15px;
  line-height: 1.3;
}

.tc-meta {
  font-weight: 400;
  color: var(--grey, #808891);
  font-size: 13px;
  margin-top: 2px;
}

.tc-quote {
  font-weight: 500;
  color: var(--ink, #0b1622);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Fade sits over the clipped edge of the list, white to transparent
   because the section this ships into has a white background (not a
   token, since it must match the page background exactly, not a color
   token that could differ). */
.tc-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  pointer-events: none;
  transition: opacity .3s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.tc-loadmore {
  pointer-events: auto;
  background: var(--navy, #054990);
  color: #fff;
  border: none;
  font-family: var(--sans, 'Lato', sans-serif);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(5, 73, 144, .25);
  transition: background .2s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.tc-loadmore:hover {
  background: var(--cyan, #17c4ff);
}

.tc-loadmore:focus-visible {
  outline: 2px solid var(--cyan, #17c4ff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tc-list-clipped,
  .tc-fade {
    transition: none;
  }
}

@media (max-width: 480px) {
  .tc-card {
    width: 100%;
  }
}

/* ------------------------- the outcome bars ------------------------------- */
.out-tile-label{
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--navy);margin-bottom:24px;
}
.bars{display:grid;gap:20px;max-width:760px}
.bar .bk{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.bar .bk span{font-size:15.5px;color:var(--ink);font-weight:700}
.bar .bk b{font-family:var(--display);font-size:26px;color:var(--navy);font-weight:400}
.btrack{height:6px;border-radius:999px;background:#e3e8ec;overflow:hidden}
.btrack i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--navy),var(--cyan));
}
#outcome .provenance{margin-top:26px;max-width:70ch}

/* --------------------- generic snap scroller ------------------------------
   Sits still on desktop when the row already fits, swipes on a phone.
--------------------------------------------------------------------------- */
.scroller{
  /* min-width:0 stops a flex row of fixed-width cards from forcing its grid
     column wider than the viewport */
  min-width:0;max-width:100%;
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 2px 14px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.scroller::-webkit-scrollbar{display:none}
.scroller > *{scroll-snap-align:start}
.fact.card{
  flex:0 0 280px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;
}
.wash .fact.card{background:#fff}
.creds.scroller{display:flex;gap:16px;margin-top:26px}
.creds.scroller li{
  flex:0 0 260px;padding:16px 18px 16px 32px;background:#fff;
  border:1px solid var(--line);border-radius:12px;font-size:14.5px;
}
.creds.scroller li:before{left:16px;top:26px}
.arrow[hidden]{display:none}
@media(max-width:760px){
  .fact.card{flex-basis:250px}
  .creds.scroller li{flex-basis:230px}
}

/* =========================================================================
   THE DOCTOR: glass panel, real clinic photography, numbered credentials
   ========================================================================= */
#doctor{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#eef1fc 0%,#f7f9fb 52%,#eaf6fd 100%);
}
/* soft colour pools behind the glass, so the blur has something to pick up */
#doctor:before,#doctor:after{
  content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;
}
#doctor:before{width:520px;height:520px;top:-140px;left:-120px;background:rgba(23,196,255,.30)}
#doctor:after{width:560px;height:560px;right:-160px;bottom:-200px;background:rgba(5,73,144,.20)}
#doctor .shell{position:relative;z-index:1}

#doctor .doc{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;padding:38px;
  box-shadow:0 22px 60px -30px rgba(11,22,34,.34), inset 0 1px 0 rgba(255,255,255,.85);
}
#doctor .shot .doc-portrait,#doctor .shot img#docImg{border-radius:16px}
.shot-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.shot-strip img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 22px -14px rgba(11,22,34,.4);
  transition:transform .25s var(--ease);
}
.shot-strip img:hover{transform:translateY(-3px)}

/* numbered credentials, replacing the dash marker */
.creds.scroller li{
  padding:18px 18px 16px;display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 10px 26px -20px rgba(11,22,34,.32);
}
.creds.scroller li:before{content:none}
.creds .cn{
  font-family:var(--display);font-size:15px;color:var(--cyan);line-height:1.2;
  flex:none;padding-top:1px;letter-spacing:.5px;
}
.creds .ct{color:var(--ink);font-size:14.5px;line-height:1.5}

@media(max-width:1080px){
  #doctor .doc{padding:26px}
  .shot-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  #doctor .doc{padding:20px;border-radius:18px}
  #doctor:before,#doctor:after{filter:blur(60px)}
}
/* ==========================================================================
   Results bento grid, vanilla CSS.
   Pairs with /tmp/bento.js -> renderResultsBento(rootEl, data)

   Expects these tokens already on :root
   --cyan --navy --ink --grey --line --wash --display --sans --ease

   Animation contract:
   .nhb            base rules describe the FINAL state, so the section is
                   correct with JS off or under reduced motion
   .nhb-armed      added by JS only when motion is allowed, sets start state
   .is-in          added once by the IntersectionObserver, plays everything
   --d             per element stagger delay, set inline by JS
   ========================================================================== */

.nhb {
  font-family: var(--sans), Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.nhb *,
.nhb *::before,
.nhb *::after { box-sizing: border-box; }

.nhb-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- section head ---------- */

.nhb-head { max-width: 42ch; margin: 0 0 22px; }
.nhb-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.nhb-title {
  margin: 0;
  font-family: var(--display), var(--sans), sans-serif;
  font-weight: 400;
  font-size: clamp(27px, 3.3vw, 44px);
  line-height: 1.06;
  letter-spacing: -.005em;
  color: var(--ink);
}

/* ---------- grid ---------- */

.nhb-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.nhb-card {
  grid-column: 1 / -1;          /* mobile default, every card full width */
  min-width: 0;                 /* lets SVG and text shrink instead of overflowing */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
@media (min-width: 700px) {
  .nhb-grid { gap: 14px; }
  .nhb-s2 { grid-column: span 3; }
  .nhb-s3 { grid-column: span 6; }
}
/* tablet tier: the chart card goes full width so it does not leave a hole
   next to the full width split cards below it */
@media (min-width: 700px) and (max-width: 1023px) {
  .nhb-c { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .nhb-card { padding: 24px; }
  .nhb-s2 { grid-column: span 2; }
  .nhb-s3 { grid-column: span 3; }
}

/* ---------- shared type ---------- */

.nhb-h3 {
  margin: 0 0 8px;
  font-family: var(--display), var(--sans), sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--ink);
}
.nhb-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  opacity: .74;
}
/* regulatory lines, held darker and never smaller than 12.5px */
.nhb-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  opacity: .82;
}

/* ---------- shared line art ---------- */

.nhb-art { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nhb-art-accent { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nhb-art-dot { fill: var(--cyan); stroke: none; }

/* ---------- badges ---------- */

.nhb-badge {
  position: relative;
  flex: 0 0 auto;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--wash);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.nhb-badge::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.nhb-badge svg { display: block; width: 34px; height: 34px; }
.nhb-badge.-sm { width: 46px; height: 46px; }
.nhb-badge.-sm::before { inset: -6px; }
.nhb-badge.-sm svg { width: 23px; height: 23px; }

@keyframes nhb-ring {
  0%   { transform: scale(1);    opacity: .95; }
  55%  { transform: scale(1.12); opacity: .2; }
  100% { transform: scale(1);    opacity: .95; }
}
@keyframes nhb-ring-in {
  0%   { transform: scale(.94); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(.94); }
}
.nhb-armed.is-in .nhb-badge::before { animation: nhb-ring 3.4s var(--ease) .45s infinite; }
.nhb-armed.is-in .nhb-badge > svg   { animation: nhb-ring-in 3.4s var(--ease) .45s infinite; }

/* ---------- card A, scribbled stat ---------- */

.nhb-a { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.nhb-statwrap { position: relative; align-self: flex-start; padding: 8px 24px 12px; }
/* sizer and live number share one grid cell so counting digits cannot reflow
   the card or slide the scribble sideways */
.nhb-statline { display: grid; justify-items: start; }
.nhb-statline > span { grid-area: 1 / 1; }
.nhb-sizer { visibility: hidden; }
.nhb-sizer,
.nhb-stat {
  font-family: var(--display), var(--sans), sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 6.6vw, 82px);
  line-height: .95;
  color: var(--navy);
}
.nhb-scribble {
  position: absolute;
  left: -2px; top: -4px;
  width: calc(100% + 4px);
  height: calc(100% + 8px);
  overflow: visible;
  pointer-events: none;
}
.nhb-scribble path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nhb-cap {
  font-family: var(--display), var(--sans), sans-serif;
  font-size: 21px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 6px;
}

.nhb-armed .nhb-scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nhb-armed.is-in .nhb-scribble path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.15s var(--ease) .22s;
}

/* ---------- card B, centred badge ---------- */

.nhb-b { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.nhb-b .nhb-h3 { margin-top: 4px; }

/* ---------- card C, line and area chart ---------- */

.nhb-chart { display: block; width: 100%; height: auto; margin: 0 0 18px; }
.nhb-axis { stroke: var(--line); stroke-width: 1; }
.nhb-stem { fill: var(--line); transform-box: fill-box; transform-origin: bottom; }
.nhb-line { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nhb-pt { fill: #fff; stroke: var(--cyan); stroke-width: 2.4; transform-box: fill-box; transform-origin: center; }
.nhb-cval { font-family: var(--sans), sans-serif; font-size: 15px; font-weight: 700; fill: var(--navy); }
.nhb-clab { font-family: var(--sans), sans-serif; font-size: 10.5px; font-weight: 400; fill: var(--grey); }

.nhb-armed .nhb-area { opacity: 0; }
.nhb-armed .nhb-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nhb-armed .nhb-stem { transform: scaleY(0); }
.nhb-armed .nhb-pt   { transform: scale(0); }
.nhb-armed .nhb-cval,
.nhb-armed .nhb-clab { opacity: 0; }

.nhb-armed.is-in .nhb-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.05s var(--ease) .18s; }
/* the fill only reads as "under the line" once the line exists, so it waits */
.nhb-armed.is-in .nhb-area { opacity: 1; transition: opacity .75s var(--ease) 1.02s; }
.nhb-armed.is-in .nhb-stem { transform: scaleY(1); transition: transform .55s var(--ease) var(--d, 0s); }
.nhb-armed.is-in .nhb-pt   { transform: scale(1);  transition: transform .5s var(--ease) var(--d, 0s); }
.nhb-armed.is-in .nhb-cval,
.nhb-armed.is-in .nhb-clab { opacity: 1; transition: opacity .5s var(--ease) var(--d, 0s); }

/* ---------- cards D and E, two column split ---------- */

.nhb-split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.nhb-split-l { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.nhb-split-r { min-width: 0; }
@media (min-width: 700px) {
  .nhb-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: center; }
  .nhb-e .nhb-split { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
}

/* ---------- card D, inset panel with diverging tracks ---------- */

.nhb-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--wash);
  padding: 11px 12px 10px;
}
.nhb-dots { display: flex; gap: 5px; margin: 0 0 8px; }
.nhb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.nhb-dot.-on { background: var(--cyan); }
.nhb-panel-head {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
}
.nhb-tracks { display: block; width: 100%; height: auto; }
.nhb-track { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nhb-track.-good { stroke: var(--cyan); }
.nhb-track.-bad  { stroke: var(--navy); opacity: .45; }
.nhb-track-start { fill: var(--navy); }
.nhb-tval { font-family: var(--sans), sans-serif; font-size: 14px; font-weight: 700; }
.nhb-tval.-good { fill: var(--cyan); }
.nhb-tval.-bad  { fill: var(--navy); }
.nhb-tval.-now  { fill: var(--grey); }

.nhb-armed .nhb-track { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nhb-armed .nhb-tval:not(.-now) { opacity: 0; }
.nhb-armed .nhb-track-start { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.nhb-armed.is-in .nhb-track { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s var(--ease) .3s; }
.nhb-armed.is-in .nhb-tval:not(.-now) { opacity: 1; transition: opacity .5s var(--ease) 1.25s; }
.nhb-armed.is-in .nhb-track-start { transform: scale(1); transition: transform .45s var(--ease) .18s; }

/* ---------- card E, alternating name chips ---------- */

.nhb-rail { position: relative; padding: 4px 0; }
.nhb-rail::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.nhb-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.nhb-row + .nhb-row { margin-top: 9px; }
.nhb-row::after {           /* node where the chip meets the rail */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cyan);
}
.nhb-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px 4px 4px;
}
.nhb-row.-l .nhb-chip { grid-column: 1; justify-self: end; margin-right: 9px; }
.nhb-row.-r .nhb-chip { grid-column: 2; justify-self: start; margin-left: 9px; }
.nhb-name {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
/* monogram avatars, drawn in CSS, no image requests anywhere */
.nhb-mono {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--navy);
  color: #fff;
}
.nhb-mono.-alt { background: var(--ink); }
.nhb-mono.-accent { background: var(--cyan); color: var(--ink); }

.nhb-armed .nhb-rail::before { transform: scaleY(0); transform-origin: top; }
.nhb-armed .nhb-chip { opacity: 0; }
.nhb-armed .nhb-row::after { opacity: 0; }
.nhb-armed .nhb-row.-l .nhb-chip { transform: translateX(-10px); }
.nhb-armed .nhb-row.-r .nhb-chip { transform: translateX(10px); }
.nhb-armed.is-in .nhb-rail::before { transform: scaleY(1); transition: transform .7s var(--ease) .12s; }
.nhb-armed.is-in .nhb-chip {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .5s var(--ease) var(--d, 0s), transform .5s var(--ease) var(--d, 0s);
}
.nhb-armed.is-in .nhb-row::after { opacity: 1; transition: opacity .4s var(--ease) var(--d, 0s); }

/* ---------- reduced motion, final state, zero movement ---------- */

@media (prefers-reduced-motion: reduce) {
  .nhb, .nhb *, .nhb *::before, .nhb *::after {
    animation: none !important;
    transition: none !important;
  }
  /* JS skips .nhb-armed under reduced motion, this covers a stale class */
  .nhb-armed .nhb-scribble path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .nhb-armed .nhb-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .nhb-armed .nhb-track { stroke-dasharray: none; stroke-dashoffset: 0; }
  .nhb-armed .nhb-area,
  .nhb-armed .nhb-cval,
  .nhb-armed .nhb-clab,
  .nhb-armed .nhb-chip,
  .nhb-armed .nhb-row::after,
  .nhb-armed .nhb-tval { opacity: 1; }
  .nhb-armed .nhb-stem,
  .nhb-armed .nhb-pt,
  .nhb-armed .nhb-track-start,
  .nhb-armed .nhb-rail::before,
  .nhb-armed .nhb-chip { transform: none; }
}

/* the bento renders its own label and heading, so the intro sits under it */
#outcome .out-intro{margin:0 0 34px}
#outcome .nhb-head,#outcome [class*="nhb"] h2{margin-bottom:10px}

/* ===================== corporate strip, richer ============================ */
.corp-headline{
  font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,30px);
  color:var(--ink);text-align:center;margin:0 auto 28px;max-width:22ch;line-height:1.12;
}
.corp .rail-logos{gap:78px}
.clogo{height:46px}
.clogo img{max-height:46px;opacity:.72}
.corp-note{max-width:56ch;margin-left:auto;margin-right:auto}

/* ===================== how it works, as a timeline ======================== */
.steps-line{
  list-style:none;margin:0 0 56px;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
/* the rule the numbers sit on */
.steps-line:before{
  content:'';position:absolute;left:22px;right:22px;top:23px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--navy));opacity:.28;
}
.stp{position:relative;padding-right:8px}
.stp-n{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;background:var(--navy);color:#fff;
  font-family:var(--display);font-size:17px;letter-spacing:.5px;
  box-shadow:0 0 0 6px var(--paper);
}
.stp-b{margin-top:20px}
.stp-b h3{font-size:19px;margin-bottom:9px;color:var(--ink)}
.stp-b p{color:var(--grey);font-size:15px;line-height:1.65}
.stp-m{
  display:inline-block;margin-top:12px;font-size:11px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--navy);
  background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}

/* ===================== paying, compact row ================================ */
.payrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pay{
  background:var(--wash);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;display:flex;align-items:flex-start;gap:12px;
}
.pay:before{
  content:'';flex:none;width:9px;height:9px;border-radius:999px;
  background:var(--cyan);margin-top:7px;
}
.pay-t{color:var(--ink);font-size:15px;line-height:1.55}

@media(max-width:1080px){
  .steps-line{grid-template-columns:repeat(2,1fr);gap:34px 26px}
  .steps-line:before{display:none}
  .payrow{grid-template-columns:1fr}
}
@media(max-width:760px){
  .steps-line{grid-template-columns:1fr;gap:28px;margin-bottom:40px}
  .corp .rail-logos{gap:48px}
  .clogo,.clogo img{height:34px;max-height:34px}
}

/* ================= practical detail cards, with icons ===================== */
.fact.card{
  flex:0 0 288px;padding:24px 22px 22px;position:relative;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.fact.card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 14px 32px -22px rgba(11,22,34,.4)}
.fact-ico{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:rgba(23,196,255,.12);color:var(--navy);margin-bottom:16px;
}
.ico{width:21px;height:21px;display:block}
.fact.card .k{margin-bottom:8px}
.fact.card .v{font-size:15px}

/* ======================= book your visit ================================== */
.bookblock{
  margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:38px 36px;box-shadow:0 18px 46px -32px rgba(11,22,34,.35);
}
.bb-head{max-width:58ch;margin-bottom:28px}
.bb-head h3{font-size:clamp(22px,2.2vw,28px);color:var(--ink);margin-bottom:10px}
.bb-note{color:var(--grey);font-size:15px;line-height:1.65}
.bb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bb-card{
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:var(--wash);
  display:flex;flex-direction:column;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.bb-card:hover{border-color:var(--navy);background:#fff}
.bb-ico{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--navy);margin-bottom:16px;
}
.bb-card h4{font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink);margin:0 0 10px}
.bb-addr{color:var(--ink);font-size:14.5px;line-height:1.55;margin-bottom:6px}
.bb-hours{color:var(--grey);font-size:14px;margin-bottom:22px}
.bb-go{margin-top:auto;width:100%;text-align:center;background:var(--navy)}
.bb-go:hover{background:#073a70}

@media(max-width:760px){
  .bookblock{padding:26px 22px;border-radius:16px;margin-top:40px}
  .bb-grid{grid-template-columns:1fr}
  .fact.card{flex-basis:258px}
}

/* A bracketed placeholder inside the featured badge keeps the dotted "not
   approved" cue but must not drag the amber panel onto the cyan chip. */
.panel .badge .todo{
  background:none;color:inherit;padding:0;border-radius:0;
  border-bottom:1px dotted rgba(11,22,34,.5);
}
.tests-line .tl-k{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--grey);margin-bottom:7px;
}

/* ==========================================================================
   MOBILE: turn the vertical stacks into swipeable rails.

   On a phone every grid in this page collapsed to one column, which turned
   the page into roughly twelve screens of scrolling. Anything that is a set
   of peer items now slides sideways instead: the bento, the reviews, the
   clinic cards, the how-it-works steps, the trust line and the hero stats.

   One shared recipe, .m-rail, so they all scroll and snap identically. The
   rail bleeds into the 18px shell gutter on both sides so the next card
   peeks in and the gesture is discoverable without an arrow.
   ========================================================================== */
@media(max-width:760px){

  .m-rail{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:-18px;margin-right:-18px;
    padding:2px 18px 14px;
    /* without this the snapport starts at the padding box and the browser
       silently scrolls each rail 18px on load, clipping the first card */
    scroll-padding-left:18px;scroll-padding-right:18px;
    /* .tc-list centres its cards, which with nowrap pushes the first one a
       thousand pixels left of the origin */
    justify-content:flex-start !important;
    align-items:stretch;
  }
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail > *{flex:0 0 79%;scroll-snap-align:start;min-width:0}

  /* the outcome bento: five spanning cards become five equal slides.
     The nhb-s2 / nhb-s3 column spans mean nothing once the grid is a flex
     rail, so the cards simply stretch to the tallest of the five. */
  .nhb-grid > .nhb-card{height:auto;grid-column:auto;grid-row:auto}

  /* tighter rhythm everywhere, the single biggest scroll saving after the rails */
  section{padding:44px 0}
  .sec-head{margin-bottom:24px}

  /* hero */
  .stats > *{padding-right:6px}

  /* testimonials: the component clips itself vertically and fades, which is
     the wrong gesture once the cards are side by side */
  #reviews .tc-list-clipped{max-height:none}
  #reviews .tc-fade{display:none}
  #reviews .tc-section{margin:0}
  .ratings{gap:20px;margin-bottom:24px}

  /* how it works */
  .steps-line{margin-bottom:28px}
  .steps-line > .stp{padding-right:4px}

  /* before you book */
  .bookblock{margin-top:32px}
  .bb-grid{gap:14px}
  .bb-card{padding:22px 20px}

  /* a rail that sits inside a padded white card should not bleed past it */
  .bookblock .m-rail{
    margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px;
    scroll-padding-left:22px;scroll-padding-right:22px;
  }

  /* Nobody taps a 44px arrow on a phone when the card is right there to be
     pushed, and the three arrow rails cost about 200px of pure scroll. The
     half card peeking past the right edge is the affordance instead. Dots
     stay: they say how far along you are, which the peek does not. */
  .rail .arrow{display:none}
  .rail{margin-top:0;min-height:0}
  .rail .dots{margin-left:0;margin-top:2px}
  .carousel .rail:not(:has(.dots)){display:none}

  /* the doctor: his portrait and the three clinic shots were stacked, which
     cost half a screen on its own. display:contents lifts the strip's three
     images into the same rail so all four slide as one set. */
  #doctor .doc{gap:22px}
  #doctor .shot{
    display:flex;max-width:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -18px;padding:0 18px 12px;
  }
  #doctor .shot::-webkit-scrollbar{display:none}
  #doctor .shot-strip{display:contents}
  #doctor .shot > img{flex:0 0 62%;scroll-snap-align:start}
  #doctor .shot-strip img{flex:0 0 44%;scroll-snap-align:start}
  #doctor .shot img{height:250px;object-fit:cover;border-radius:14px;width:auto}

  /* the nine reviews are verbatim Google text and some run long. Side by side
     they only need to be equal, so clamp the quote and let the card open on
     tap rather than making every card as tall as the longest one. */
  #reviews .tc-card{padding:20px 20px 18px}
  #reviews .tc-quote{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;
    overflow:hidden;
  }
  #reviews .tc-card.open .tc-quote{-webkit-line-clamp:unset;overflow:visible}

}

/* ==========================================================================
   The second price on a panel card. The client sells every panel twice, once
   with labs alone and once with a consultation, so the card states both
   rather than making someone reach the next step to find out.
   ========================================================================== */
.panel .amt2{
  margin:-12px 0 20px;color:var(--navy);font-size:15px;font-weight:700;
  padding-top:12px;border-top:1px dashed var(--line);
}
.panel .amt2 span{color:var(--grey);font-weight:400;font-size:13.5px}

/* ======================= consultation, sold on its own ==================== */
.conly{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:40px 44px;box-shadow:0 18px 46px -34px rgba(11,22,34,.35);
}
.conly-copy h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.conly-copy .lede{margin:0;max-width:56ch}
.conly-buy{text-align:right;min-width:230px}
.conly-amt{font-family:var(--display);font-size:46px;color:var(--navy);line-height:1}
.conly-note{color:var(--grey);font-size:13px;margin:8px 0 18px}
.conly-buy .cta{width:100%;text-align:center}

/* ============================ conditions chips =========================== */
.chipgrid{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px;
}
.chip-item{
  border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:11px 20px;font-size:14.5px;color:var(--ink);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.chip-item:hover{border-color:var(--cyan);background:var(--wash)}

/* ============================== services ================================= */
.svcrail{display:flex;gap:14px}
.svc.card{
  flex:0 0 232px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px;display:flex;align-items:center;min-height:92px;
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.svc.card:hover{border-color:var(--cyan);transform:translateY(-3px)}
.svc-n{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);line-height:1.25}
.svc-n sup{color:var(--cyan);font-size:13px;margin-left:2px}
.svc-notes{
  list-style:none;margin:26px 0 0;padding:0;display:grid;gap:9px;max-width:80ch;
}
.svc-notes li{color:var(--grey);font-size:13.5px;line-height:1.65}
.svc-notes b{color:var(--ink);font-weight:700}
.svc-mark{color:var(--cyan);font-weight:700;margin-right:4px}

@media(max-width:1080px){
  .conly{grid-template-columns:1fr;gap:26px;padding:32px 30px}
  .conly-buy{text-align:left;min-width:0}
  .conly-buy .cta{width:auto;padding-left:34px;padding-right:34px}
}
@media(max-width:760px){
  .conly{padding:26px 22px;border-radius:16px}
  .conly-amt{font-size:38px}
  .conly-buy .cta{width:100%}
  .chip-item{padding:9px 16px;font-size:13.5px}
  .svc.card{flex-basis:200px;min-height:80px;padding:18px}
  .svc-n{font-size:17px}
  .svc-notes{margin-top:20px}
  .panel .amt2{margin:-10px 0 16px;font-size:14px}
}

/* a long test list splits into two columns so it stops setting the height of
   every other card in the carousel */
.panel ul.two{columns:2;column-gap:16px}
.panel ul.two li{break-inside:avoid;padding-left:16px;font-size:13.5px}
.panel ul.two li:before{width:7px;top:11px}
@media(max-width:760px){ .panel ul.two{columns:1} .panel ul.two li{font-size:14.5px;padding-left:20px} }


/* ==========================================================================
   Review cards.

   Two things were wrong on desktop. The "read the full review" button was
   being created for every card but only styled under 760px, so nine unstyled
   browser buttons rendered full width. And the component clips its list to a
   fixed 720px, which fell in the middle of the second row and sliced three
   reviews through the sentence.

   Fixed by clamping every quote to the same number of lines at every width,
   which makes the cards a predictable height, and then clipping to a whole
   number of rows instead of an arbitrary pixel value.
   ========================================================================== */
#reviews .tc-quote{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;
}
#reviews .tc-card.open .tc-quote{-webkit-line-clamp:unset;overflow:visible}
#reviews .tc-more{
  align-self:flex-start;margin-top:auto;padding:4px 0 0;background:none;border:0;
  color:var(--navy);font-size:12.5px;font-weight:700;letter-spacing:.6px;cursor:pointer;
}
#reviews .tc-more:hover{text-decoration:underline}
#reviews .tc-card.open .tc-more{display:none}

@media(max-width:760px){
  #reviews .tc-card{cursor:pointer;padding:20px 20px 18px}
  #reviews .tc-quote{-webkit-line-clamp:7}
}

/* The component clips its list with a fixed max-height, which lands wherever
   it lands and cut the third row through the middle. Hiding whole cards
   instead means the boundary can never fall inside one, at any column count.
   Load More still works: its handler drops the .tc-list-clipped class. */
/* Desktop only. Below 760px the same element is a side-scrolling rail, and
   these overrides would beat .m-rail on specificity and kill its overflow,
   which stretched the page 2257px wide. */
@media(min-width:761px){
  #reviews .tc-list-clipped{max-height:none;overflow:visible}
  #reviews .tc-list-clipped > .tc-card:nth-child(n+7){display:none}
  #reviews .tc-fade{
    position:static;height:auto;padding-top:26px;background:none;
    display:flex;justify-content:center;
  }
}
@media(max-width:760px){
  /* every card stays in the rail, and the Load More affordance is pointless
     when the gesture is a swipe */
  #reviews .tc-fade{display:none}
}