:root{
  --canvas:#F9F5EE; --card:#FDFBF7; --mist:#EEE5DA; --raised:#E5DACD;
  --stone:#CEBFAF; --ink:#251A1B; --hero:#2E1C1E; --hero-deep:#1F1314;
  --navy:#5E2A2E; --navy-soft:#5E2A2E; --slate:#5A4748; --fog:#6B5A58;
  --fog-light:#C0AFA8; --inv:#F6EFE6;
  --ember:#CBB47C; --ember-deep:#6E5A2A; --sand:#CBB47C;
  --teal:#93B5A8; --teal-deep:#3A6659;
  --ok:#1B7F4D; --warn:#8A5A00; --err:#A4262C;
  --accent:#CBB47C; --fill-hover:#DCC898;
  --deep-rgb:31 19 20; --deep2-rgb:46 28 30; --ink-rgb:37 26 27;
  --fill-rgb:203 180 124; --accent-rgb:203 180 124;
  --orn:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2224%22%20viewBox%3D%220%200%2016%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M0%2012H16%22%2F%3E%3Cellipse%20fill%3D%22%23000%22%20cx%3D%226%22%20cy%3D%227.4%22%20rx%3D%224.6%22%20ry%3D%222%22%20transform%3D%22rotate%28-28%206%207.4%29%22%2F%3E%3Cellipse%20fill%3D%22%23000%22%20cx%3D%226%22%20cy%3D%2216.6%22%20rx%3D%224.6%22%20ry%3D%222%22%20transform%3D%22rotate%2828%206%2016.6%29%22%2F%3E%3C%2Fsvg%3E');
  --maxw:1120px; --measure:68ch;
  --r-sm:6px; --r-md:6px; --r-lg:10px;
  --r-xl:16px; --r-pill:999px; --r-btn:8px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --display:'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif; --body:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);
  font:300 19px/1.6 var(--body);font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:var(--ember-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
/* HEADINGS ARE SET IN THE SANS, AT WEIGHT 400, WITH NO TRACKING.
   That is the whole structural borrow from fountainlife.com: one face, light
   weights, line-height at or near 1.0, sentence case. Cinzel is no longer the
   heading face — it is the accent inside one, below. */
h1,h2,h3,h4{font-family:var(--body);font-weight:400;line-height:1.06;
  letter-spacing:-.004em;margin:0 0 var(--s4);text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,60px);line-height:1.0}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.02}
h3{font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.3}
h4{font-size:17px;font-weight:500;line-height:1.35}
/* THE GREEK GOLD TOUCH.
   Fountain Life's hero reads "Live longer, *live healthier*" — the second
   clause in an italic serif, tinted. `em` inside a heading is that clause
   here, set in Cinzel and in gold. It is `font-style:normal` because Cinzel
   has no italic; the contrast is serif-caps against light sans, plus colour,
   which is a stronger pairing than a faux-oblique would be. */
h1 em,h2 em,h3 em{font-family:var(--display);font-style:normal;font-weight:600;
  font-size:.94em;color:var(--ember-deep);letter-spacing:.012em}
.sec--ink h1 em,.sec--ink h2 em,.sec--ink h3 em,.hero h1 em,
.pstage--ink h1 em,.pstage--ink h2 em,.phero h1 em{color:var(--ember)}
/* The gold clause starts its own line. Inline, it wrapped wherever the line ran
   out: "Every service is labelled. THE / INVESTIGATIONAL ONES SAY SO." left one
   gold word stranded at the end of the sans line on every Lab. */
h1 em,h2 em{display:block;text-wrap:balance}
p{margin:0 0 var(--s4);max-width:var(--measure)}
ul,ol{margin:0 0 var(--s4);padding-left:1.15em;max-width:var(--measure)}
li{margin:0 0 var(--s2)}
small{font-size:14px}
hr{border:0;border-top:1px solid var(--stone);margin:var(--s7) 0}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s4);top:-60px;z-index:1000;background:var(--ink);
  color:var(--inv);padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  transition:top .18s var(--ease)}
.skip:focus{top:var(--s4)}

/* ---- layout ---- */
.wrap{width:min(100% - 2*var(--s5),var(--maxw));margin-inline:auto}
@media (min-width:1024px){.wrap{width:min(100% - 2*var(--s7),var(--maxw))}}
/* Their section rhythm, measured: 112px top, 160px bottom on a full section. */
.sec{padding:clamp(64px,8vw,112px) 0 clamp(72px,10vw,160px)}
@media (max-width:768px){.sec{padding:var(--s8) 0}}
.sec--tight{padding:clamp(56px,6vw,88px) 0}
.sec--ink{background:var(--hero-deep);color:var(--inv)}
.sec--ink h1,.sec--ink h2,.sec--ink h3{color:var(--inv)}
.sec--ink a{color:var(--ember)}
.sec--mist{background:var(--mist)}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.eyebrow{font:600 12px/1.3 var(--body);letter-spacing:.17em;text-transform:uppercase;
  color:var(--ember-deep);margin:0 0 var(--s3)}
.sec--ink .eyebrow{color:var(--ember)}
.lede{font-size:clamp(18px,1.6vw,20px);font-weight:300;line-height:1.6;
  color:var(--slate);max-width:60ch}
.sec--ink .lede{color:var(--fog-light)}
/* Dark sections step the body weight up from the page's 300. See premium.py:
   a 300 at reading sizes on a dark ground loses too much stem weight. */
.sec--ink,.sec--ink p,.sec--ink li,.hero,.hero p{font-weight:400}
.sec--ink .lede,.hero .lede{font-weight:300}

/* ---- header ---- */
.hd{position:sticky;top:0;z-index:100;background:rgb(var(--deep-rgb) / .92);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid rgb(var(--fill-rgb) / .22)}
.hd__in{display:flex;align-items:center;gap:var(--s5);min-height:72px}
.hd__mk{display:flex;align-items:center;flex:0 0 auto}
.hd__mk{gap:11px;text-decoration:none}
.hd__mk .mk{height:38px;width:38px}
.wm{display:flex;flex-direction:column;line-height:1}
.wm__a{font:600 17px/1 var(--display);letter-spacing:.2em;padding-left:.1em;
  background:linear-gradient(100deg,#B8913F 0%,#F0DCA0 48%,#C08C2E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wm__d{font:500 10.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);margin-top:6px;white-space:nowrap}
.wm--ft .wm__a{font-size:20px}
.wm--ft .wm__d{font-size:11px;letter-spacing:.16em;margin-top:8px;white-space:normal;
  line-height:1.35;max-width:22ch}
.ft__lk .wm{min-width:0}
/* Stacked in the footer: its column is ~200px wide, too narrow for the disc
   and the wordmark side by side. */
.ft__lk{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:var(--s4)}
.ft__lk .mk{height:56px;width:56px;margin:0;flex:none}
.ft__em{font-weight:500;color:var(--fog-light)}
/* Pause control for a hero video (WCAG 2.2.2). */
.vpause{position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(32px,4vw,44px);z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid rgb(255 255 255 / .35);
  background:rgb(var(--deep-rgb) / .55);color:#fff;display:grid;place-items:center;
  cursor:pointer;padding:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s var(--ease)}
.vpause:hover{background:rgb(var(--deep-rgb) / .85)}
.vpause:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.vpause .ic-play,.vpause[aria-pressed=true] .ic-pause{display:none}
.vpause[aria-pressed=true] .ic-play{display:block}
/* Honeypot: off-screen, not display:none, so simple bots still fill it in. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.nav a{color:var(--fog-light);font:500 15px/1 var(--body);padding:11px 13px;
  border-radius:var(--r-sm);text-decoration:none;transition:color .18s var(--ease),
  background .18s var(--ease)}
.nav a:hover{color:var(--inv);background:rgba(255,255,255,.07)}
.nav a[aria-current=page]{color:var(--ember);background:rgb(var(--fill-rgb) / .12)}
.nav__cta{background:var(--sand)!important;color:var(--hero-deep)!important;border-radius:var(--r-btn)!important;
  font-weight:600!important;padding:11px 19px!important}
.nav__cta:hover{background:var(--fill-hover)!important}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.22);
  color:var(--inv);width:46px;height:46px;border-radius:var(--r-sm);cursor:pointer;
  align-items:center;justify-content:center}
@media (max-width:1024px){
  .burger{display:flex}
  .nav{position:fixed;inset:72px 0 auto;background:var(--hero-deep);flex-direction:column;
    align-items:stretch;gap:0;padding:var(--s4);border-bottom:1px solid rgb(var(--fill-rgb) / .22);
    max-height:calc(100dvh - 72px);overflow:auto}
  .nav a{padding:15px 13px;font-size:17px}
  .nav[hidden]{display:none}
}

/* ---- buttons ---- */
/* Measured on the reference: padding 13.5px 31.5px, 18px/500, fully round,
   and NO nested icon circle — a plain pill with an optional inline arrow. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 30px;border-radius:var(--r-btn);
  border:1px solid transparent;
  font:500 17px/1 var(--body);text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),
  border-color .18s var(--ease),color .18s var(--ease)}
.btn:active{transform:scale(.975)}
.btn--p{background:var(--ink);color:var(--inv)}
.btn--p:hover{background:var(--navy);color:var(--inv)}
.sec--ink .btn--p,.hero .btn--p{background:var(--sand);color:var(--hero-deep)}
.sec--ink .btn--p:hover,.hero .btn--p:hover{background:var(--fill-hover);color:var(--hero-deep)}
.btn--s{background:transparent;color:var(--ink);border-color:var(--stone)}
.btn--s:hover{border-color:var(--ink);background:var(--mist);color:var(--ink)}
.sec--ink .btn--s,.hero .btn--s{color:var(--inv);border-color:rgba(255,255,255,.35)}
.sec--ink .btn--s:hover,.hero .btn--s:hover{background:rgba(255,255,255,.1);color:var(--inv)}
.btn .ic{width:17px;height:17px}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ---- hero ---- */
/* The reference's hero is 860px tall at 1440 and the picture is the loud
   thing on the screen. This one was ~390px — a banner, not a hero — because
   it was sized by its padding. Give it a height and sit the words at the
   bottom of it, as the reference does. */
.hero{position:relative;background:var(--hero-deep);color:var(--inv);overflow:clip;
  padding:clamp(72px,9vw,120px) 0}
/* The tall hero is ONLY for a hero that has a picture in it. Six Labs have no
   footage yet; giving those a 740px block of flat navy is worse than the short
   banner it replaced. `:has()` keys the height to the media actually being
   there, and a browser without `:has()` falls back to the short hero, which is
   the safe direction to fail in. */
.hero:has(.hero__bg){min-height:min(calc(100dvh - 72px),740px);
  display:flex;align-items:flex-end;
  padding:clamp(96px,14vw,180px) 0 clamp(56px,7vw,96px)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.85}
/* Banded scrim: dark where the words are, clear where the footage is. A flat
   inset-0 wash greys the whole picture out and makes expensive film look cheap. */
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,rgb(var(--deep-rgb) / .95) 0%,rgb(var(--deep-rgb) / .80) 34%,
  rgb(var(--deep-rgb) / .34) 70%,rgb(var(--deep-rgb) / .14) 100%),
  linear-gradient(100deg,rgb(var(--deep-rgb) / .82) 0%,rgb(var(--deep-rgb) / .54) 42%,
  rgb(var(--deep-rgb) / .10) 72%,rgb(var(--deep-rgb) / 0) 100%)}
.hero__in{position:relative;z-index:2}
.hero h1{color:var(--inv);max-width:17ch}
.hero .lede{color:var(--fog-light)}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--stone);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
/* Reset colour AND layout at the card boundary. Section-level rules such as
   .sec--ink p outrank card classes on specificity and quietly repaint card
   text; three separate defects on one earlier site came from exactly this. */
.sec--ink .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14)}
.sec--ink .card,.sec--ink .card p,.sec--ink .card li{color:var(--fog-light);max-width:none}
.sec--ink .card h3,.sec--ink .card h4{color:var(--inv)}
.card p,.card li{max-width:none}
.card__ic{color:var(--ember-deep);width:30px;height:30px}
.sec--ink .card__ic{color:var(--ember)}
.card--link{text-decoration:none;color:inherit;transition:border-color .18s var(--ease),
  transform .18s var(--ease)}
.card--link:hover{border-color:var(--sand);transform:translateY(-3px);color:inherit}

/* labs & clinics grid */
.dv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:var(--s4)}
.dv__i{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);text-decoration:none;color:var(--fog-light);
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.dv__i:hover{border-color:var(--sand);transform:translateY(-3px);color:var(--fog-light)}
.dv__mk{display:block;width:58px}
.dv__i .mk{width:58px;height:58px}
.dv__i h3{font-size:19px;margin:0;color:var(--inv)}
.dv__i p{margin:0;font-size:15px;max-width:none}
.dv__soon{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--hero-deep);background:var(--ember);padding:5px 9px;border-radius:var(--r-pill);
  align-self:flex-start}

/* ---- mode badges: online / concierge / clinic ---- */
.mode{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--body);
  letter-spacing:.07em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill);
  border:1px solid currentColor}
.mode .ic{width:14px;height:14px}
.mode--online{color:var(--teal-deep)}
.mode--concierge{color:var(--ember-deep)}
.mode--clinic{color:var(--navy)}
.sec--ink .mode--online{color:var(--teal)}
.sec--ink .mode--concierge{color:var(--ember)}
.sec--ink .mode--clinic{color:var(--fog-light)}
.modes{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3)}

/* ---- service table ---- */
.svc{border:1px solid var(--stone);border-radius:var(--r-lg);overflow:hidden;
  background:var(--card)}
/* Reset at the .svc boundary for the same reason .card does it: .sec--ink sets
   color on the SECTION, and .svc__n is a <p>, so inside a dark section every
   service name inherited cream and rendered cream-on-cream — invisible, with
   the description below it still readable, which is what made it hard to spot.
   Any surface that keeps its own background inside a dark section has to
   restate its own ink. */
.sec--ink .svc{background:var(--card);border-color:var(--stone)}
.sec--ink .svc,.sec--ink .svc__n,.sec--ink .svc p{color:var(--ink)}
.sec--ink .svc__d{color:var(--slate)}
.sec--ink .svc a{color:var(--ember-deep)}
.svc__r{display:grid;grid-template-columns:1fr minmax(200px,290px);gap:var(--s4);padding:var(--s5);
  border-bottom:1px solid var(--stone);align-items:start}
.svc__r:last-child{border-bottom:0}
.svc__n{font:500 17px/1.35 var(--body);letter-spacing:-.004em;
  margin:0 0 var(--s2)}
.svc__d{margin:0;font-size:15px;color:var(--slate);max-width:62ch}
/* The badge row must not wrap mid-badge, but the price and HSA lines MUST wrap.
   `white-space:nowrap` on the whole column pushed a 130-character price band
   out under .svc's overflow:hidden, so it rendered sliced off mid-word. */
.svc__m{text-align:right}
.svc__m .mode{white-space:nowrap}
.svc__price,.svc__hsa{display:block;margin:var(--s2) 0 0 auto;max-width:34ch;
  white-space:normal;color:var(--fog);line-height:1.45}
.svc__price{font-size:13px;text-wrap:pretty}
.mode--hold{color:var(--fog);border-style:dashed}
.mode--facility{color:var(--navy)}
.sec--ink .mode--facility{color:var(--fog-light)}
.ev--unapproved{background:#F7E3E4;color:#8E2026}
.svc__hsa{font-size:12px;margin-top:4px}
.sec--ink .svc__price,.sec--ink .svc__hsa{color:var(--fog)}
@media (max-width:768px){.svc__r{grid-template-columns:1fr}.svc__m{text-align:left}}
.ev{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.09em;
  text-transform:uppercase;padding:5px 9px;border-radius:var(--r-sm);margin-top:var(--s2)}
.ev--established{background:#DCEFE4;color:#14603B}
.ev--emerging{background:#FBF0D8;color:#7A5400}
.ev--investigational{background:#F7E3E4;color:#8E2026}
.ev--wellness{background:#E2EEF2;color:#14606B}

/* ---- stats / proof ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:var(--s5)}
.stat__n{font:600 clamp(32px,4vw,46px)/1 var(--display);color:var(--ember);
  font-variant-numeric:tabular-nums;display:block}
.stat__l{font-size:14px;color:var(--fog-light);margin-top:var(--s2);display:block}

/* ---- forms ---- */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.fld label{font:600 14px/1.3 var(--body)}
.fld input,.fld select,.fld textarea{min-height:50px;padding:13px var(--s4);
  border:1.5px solid var(--stone);border-radius:var(--r-md);background:var(--card);
  font:400 16px/1.4 var(--body);color:var(--ink);width:100%}
.fld textarea{min-height:128px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--navy);outline:0;
  box-shadow:0 0 0 3px rgb(var(--deep2-rgb) / .16)}
.fld .hint{font-size:13px;color:var(--fog)}
.fld .err{font-size:13px;color:var(--err);font-weight:600}
.fld input[aria-invalid=true],.fld textarea[aria-invalid=true]{border-color:var(--err)}

/* ---- disclosure ---- */
.disc{background:var(--mist);border-left:3px solid var(--sand);padding:var(--s4) var(--s5);
  border-radius:0 var(--r-md) var(--r-md) 0;font-size:15px;color:var(--slate)}
.disc p{max-width:none;margin:0 0 var(--s2)}
.disc p:last-child{margin:0}
.sec--ink .disc{background:rgba(255,255,255,.05);color:var(--fog-light)}

/* ---- footer ---- */
.ft{background:var(--hero-deep);color:var(--fog-light);padding:var(--s8) 0 var(--s6)}
.ft a{color:var(--fog-light);text-decoration:none}
.ft a:hover{color:var(--ember);text-decoration:underline}
.ft__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:var(--s6);margin-bottom:var(--s7)}
.ft .ft__h{font:600 12px/1.3 var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ember);margin:0 0 var(--s4)}
.ft ul{list-style:none;margin:0;padding:0;max-width:none}
.ft li{margin-bottom:var(--s3);font-size:15px}
.ft__mk > .mk{height:64px;width:auto;margin-bottom:var(--s4)}
.ft__soon{color:var(--fog-light);opacity:.7}
.ft__b{border-top:1px solid rgba(255,255,255,.13);padding-top:var(--s5);font-size:13.5px;
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}
.ft__b p{max-width:72ch;margin:0}


/* ---- reveal ----
   Fails VISIBLE. The hidden state is applied by script only when the script is
   running, so a JS error, a blocked bundle or a throttled observer leaves the
   content readable instead of blanking the page. A hidden-by-CSS, shown-by-JS
   reveal is a content-deletion bug waiting for its first bad deploy. */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .5s var(--ease),
  transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---- the Lab's ornament ----
   One classical Greek band per Lab (themes.py), used as a CSS mask so it takes
   the Lab's accent from currentColor on dark and light grounds alike. Three
   places only: a frieze along the foot of the hero, a frieze above the
   footer, and — for Labs whose eyebrow style is "ornament" — a short run
   before each eyebrow. Anywhere more and it stops being architecture and
   becomes wallpaper. */
.orn{display:block;height:16px;background:currentColor;
  -webkit-mask:var(--orn) repeat-x left center/auto 16px;
  mask:var(--orn) repeat-x left center/auto 16px;pointer-events:none}
.orn--hero{position:absolute;left:0;right:0;bottom:0;z-index:2;height:14px;
  -webkit-mask-size:auto 14px;mask-size:auto 14px;color:var(--ember);opacity:.55}
.orn--foot{color:var(--ember);opacity:.5;margin:0 0 var(--s7)}
/* The standard hero gets the same frieze from a pseudo-element, so the four
   page builders that write a .hero do not each have to remember the markup. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:14px;
  background:var(--ember);opacity:.55;pointer-events:none;
  -webkit-mask:var(--orn) repeat-x left center/auto 14px;mask:var(--orn) repeat-x left center/auto 14px}

/* ---- eyebrow character: rule, dot or a short run of the ornament ---- */
[data-eyebrow] .eyebrow,[data-eyebrow] .peyebrow{display:flex;align-items:center;gap:12px}
[data-eyebrow=rule] .eyebrow::before,[data-eyebrow=rule] .peyebrow::before{content:"";
  width:28px;height:1px;background:currentColor;opacity:.8;flex:none}
[data-eyebrow=dot] .eyebrow::before,[data-eyebrow=dot] .peyebrow::before{content:"";
  width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
[data-eyebrow=ornament] .eyebrow::before,[data-eyebrow=ornament] .peyebrow::before{content:"";
  width:48px;height:12px;background:currentColor;flex:none;
  -webkit-mask:var(--orn) left center/auto 12px;mask:var(--orn) left center/auto 12px;
  /* round, not repeat: tiles of any aspect scale to a whole number, so the last
     rosette is never sliced off at the right edge. */
  -webkit-mask-repeat:round no-repeat;mask-repeat:round no-repeat}

/* ---- logo animation ----
   Entry on load, then one very slow drift so the mark feels alive without
   pulling attention off the copy beside it.

   EVERY RULE IS SCOPED UNDER .js, which the inline script adds at parse time.
   That is not decoration. `animation-fill-mode: both` applies the FROM state
   before the animation starts, and a CSS animation does not advance in a
   background tab — so an unscoped version renders the entire logo at opacity 0
   for anyone who opens the site in a background tab, until they focus it.
   Measured: all seven parts sat at opacity 0 in a hidden tab.

   Scoped this way the mark's resting state is simply what the SVG draws. No
   stylesheet, no JS, a throttled tab, a failed asset — it is visible in every
   one of those cases, and the animation is the enhancement it should be. */
.js .mk .mk-ring,.mk .mk-motif,.mk .mk-a,.mk .mk-core,.mk .mk-node,
.js .mk .mk-word,.mk .mk-sub{transform-box:fill-box;transform-origin:50% 50%}
.js .mk .mk-ring{animation:mkRing 1100ms var(--ease) both}
.js .mk .mk-motif{animation:mkMotif 1100ms var(--ease) 120ms both,
  mkDrift 90s linear 1.4s infinite}
.js .mk .mk-a{animation:mkA 900ms var(--ease) 260ms both}
.js .mk .mk-core{animation:mkCore 800ms var(--ease) 440ms both,
  mkBreathe 5.5s ease-in-out 1.4s infinite}
.js .mk .mk-node{animation:mkNode 600ms var(--ease) 620ms both}
.js .mk .mk-word{animation:mkUp 800ms var(--ease) 120ms both}
.js .mk .mk-sub{animation:mkUp 800ms var(--ease) 300ms both}
@keyframes mkRing{from{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes mkMotif{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes mkA{from{opacity:0;transform:translateY(7%) scale(.97)}to{opacity:1;transform:none}}
@keyframes mkCore{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes mkNode{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes mkUp{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
@keyframes mkDrift{to{transform:rotate(360deg)}}
@keyframes mkBreathe{0%,100%{transform:none}50%{transform:scale(1.07)}}
/* The header mark is chrome, not a hero: it appears, it does not perform. */
.js .hd .mk .mk-motif{animation:mkMotif 700ms var(--ease) both}
.js .hd .mk .mk-core{animation:mkCore 600ms var(--ease) 200ms both}
@media (prefers-reduced-motion:reduce){
  .js .mk .mk-ring,.mk .mk-motif,.mk .mk-a,.mk .mk-core,.mk .mk-node,
  .js .mk .mk-word,.mk .mk-sub{animation:none}
}

/* ============ premium product layout ============
   One idea per screen, media between ideas, a great deal of air. Everything is
   scoped under `.prem` so it cannot leak into the standard Lab pages, and the
   two layouts can live in one stylesheet while only one Lab uses this. */
.prem{--pmax:1120px;--pease:cubic-bezier(.32,.72,0,1)}
.prem .pwrap{width:min(100% - 2*var(--s5),var(--pmax));margin-inline:auto}
@media (min-width:1024px){.prem .pwrap{width:min(100% - 2*var(--s8),var(--pmax))}}

.prem .pstage{padding:clamp(72px,8vw,112px) 0 clamp(80px,10vw,160px);
  background:var(--canvas)}
.prem .pstage--ink{background:var(--hero-deep);color:var(--inv)}
.prem .pstage--band{background:var(--mist)}
.prem .pstage--ink .phead{color:var(--inv)}
.prem .pstage--ink .plede{color:var(--fog-light)}
.prem .peyebrow{font:500 11px/1.3 var(--body);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-deep);margin:0 0 var(--s5)}
.prem .pstage--ink .peyebrow,.prem .phero .peyebrow{color:var(--ember)}
/* Set in the SANS at weight 400, line-height ~1.0, no tracking — the
   reference's heading spec. The gold Cinzel lives inside, in the `em`. */
.prem .phead{font-family:var(--body);font-weight:400;
  font-size:clamp(30px,4.2vw,52px);line-height:1.04;letter-spacing:-.006em;
  margin:0 0 var(--s5);max-width:22ch;text-wrap:balance}
.prem .plede{font-size:clamp(17px,1.5vw,20px);font-weight:300;line-height:1.6;
  color:var(--slate);max-width:62ch;margin:0 0 var(--s4)}
.prem .pnote{font-size:15px;line-height:1.65;color:var(--fog);max-width:70ch;
  margin:var(--s7) 0 0}
.prem .pstage--ink .pnote,.prem .pframe__cap{font-weight:400}
.prem .pstage--ink .pnote{color:var(--fog-light)}
.prem .pdisc{margin-top:var(--s7)}

/* ---- hero ----
   Sits under the 72px sticky header, so the height budget subtracts it rather
   than overflowing the first viewport by exactly the header's height. */
.prem .phero{position:relative;display:flex;align-items:flex-end;
  background:var(--hero-deep);color:var(--inv);overflow:clip;
  padding:clamp(72px,9vw,120px) 0}
/* Height only when there is a picture to be tall for — see engine.py. */
.prem .phero:has(.phero__bg){min-height:min(calc(100dvh - 72px),800px);
  padding:clamp(96px,14vw,180px) 0 clamp(56px,8vw,110px)}
.prem .phero__bg{position:absolute;inset:0;z-index:0}
.prem .phero__bg video,.prem .phero__bg img{width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;opacity:.86}
/* BANDED, not flat. A single flat scrim heavy enough for the words kills the
   photograph; a single light one leaves white text on a bright shoulder. Dense
   where the type sits, clear where the picture is. */
.prem .phero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,rgb(var(--deep-rgb) / .97) 0%,rgb(var(--deep-rgb) / .88) 26%,
  rgb(var(--deep-rgb) / .44) 62%,rgb(var(--deep-rgb) / .22) 100%),
  /* A second, left-to-right band: the type column sits over the left half, and
     on three Labs the photograph's subject reached into it. */
  linear-gradient(100deg,rgb(var(--deep-rgb) / .78) 0%,rgb(var(--deep-rgb) / .52) 38%,
  rgb(var(--deep-rgb) / .08) 66%,rgb(var(--deep-rgb) / 0) 100%)}
.prem .phero__in{position:relative;z-index:2}
/* Footage whose subject sits mid-frame, under the headline. Until it is
   reshot with the subject on the right, the picture starts a third of the way
   across and fades in from the hero ground, so the type column is clear. */
@media (min-width:900px){
  [data-lab=aesthetics] .prem .phero__bg,[data-lab=immune] .prem .phero__bg{left:32%}
  [data-lab=aesthetics] .prem .phero__bg::after,[data-lab=immune] .prem .phero__bg::after{
    content:"";position:absolute;inset:0 auto 0 0;width:30%;
    background:linear-gradient(90deg,var(--hero-deep),rgb(var(--deep-rgb) / 0))}
}
/* Their h1 is 60px at 1440 with line-height 1.0 — far smaller than the
   agency-maximal 96px this started at, and it reads as more confident, not
   less, because the picture is allowed to be the loud thing. */
.prem .phero__h{font-family:var(--body);font-weight:400;color:var(--inv);
  font-size:clamp(38px,4.6vw,62px);line-height:1.0;letter-spacing:-.01em;
  margin:0 0 var(--s5);max-width:19ch;text-wrap:balance}
.prem .phero__s{font-size:clamp(17px,1.5vw,20px);font-weight:300;line-height:1.6;
  color:var(--fog-light);max-width:56ch;margin:0}
.prem .phero__note{font-size:15px;line-height:1.55;color:var(--fog-light);
  margin:var(--s4) 0 0;max-width:62ch;text-wrap:pretty}
.prem .plede,.prem .pframe__cap{text-wrap:pretty}
.prem .pstat__l{text-wrap:balance}

/* ---- buttons ----
   The reference's pills carry NO nested icon circle: 13.5px/31.5px padding,
   18px weight 500, fully round, solid white or a 1px 30%-white outline. The
   arrow, where there is one, is a small inline glyph. Dropping the
   button-in-button is the single change that moved these from "agency
   showcase" to the reference's register. */
.prem .pbtns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.prem .pbtn{display:inline-flex;align-items:center;gap:9px;
  padding:13px 28px;border-radius:var(--r-btn);text-decoration:none;
  font:500 17px/1 var(--body);color:var(--inv);
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);
  transition:background .45s var(--pease),border-color .45s var(--pease),
    color .45s var(--pease),transform .45s var(--pease)}
.prem .pbtn .ic{width:16px;height:16px;transition:transform .45s var(--pease)}
.prem .pstage:not(.pstage--ink) .pbtn{color:var(--ink);
  border-color:rgb(var(--ink-rgb) / .22);background:transparent}
.prem .pbtn:hover{background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.55);color:var(--inv)}
.prem .pstage:not(.pstage--ink) .pbtn:hover{background:rgb(var(--ink-rgb) / .05);
  border-color:var(--ink);color:var(--ink)}
.prem .pbtn:hover .ic{transform:translateX(3px)}
.prem .pbtn:active{transform:scale(.985)}
/* The modifier must restate itself at the depth the section rule reaches it:
   `.prem .pstage:not(.pstage--ink) .pbtn` scores 0,4,0 and would otherwise win. */
.prem .pbtn--solid,
.prem .pstage:not(.pstage--ink) .pbtn--solid{background:var(--sand);
  color:var(--hero-deep);border-color:transparent}
.prem .pbtn--solid:hover,
.prem .pstage:not(.pstage--ink) .pbtn--solid:hover{background:var(--ember);
  color:var(--hero-deep);border-color:transparent}
@media (prefers-reduced-motion:reduce){
  .prem .pbtn,.prem .pbtn .ic{transition:none}
  .prem .pbtn:hover .ic{transform:none}
}

/* ---- hero bottom row: buttons left, facts right ---- */
.prem .phero__row{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s5) var(--s7);margin-top:var(--s6)}
.prem .pstats{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6)}
.prem .pstat{display:flex;flex-direction:column;gap:5px;max-width:22ch}
.prem .pstat__l{font:400 12px/1.3 var(--body);color:var(--fog-light);opacity:.8}
.prem .pstat__v{font:500 14.5px/1.35 var(--body);color:var(--inv)}
/* On a phone the three facts stacked one per line ran the hero ~200px past the
   fold. Two columns keeps them, at half the height. */
@media (max-width:560px){
  .prem .phero__row{gap:var(--s5)}
  .prem .pstats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;width:100%}
  .prem .pstat__v{font-size:13.5px}
}

/* ---- full-bleed frame: nested shell so it reads as hardware, not as a photo
   dropped on a background ---- */
.prem .pframe{margin:0;background:var(--hero-deep);padding:clamp(28px,4vw,48px) 0 clamp(40px,6vw,72px)}
.prem .pframe__shell{background:rgba(255,255,255,.06);padding:10px;
  border:1px solid rgba(255,255,255,.12)}
.prem .pframe__core{overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14)}
.prem .pframe__core img{display:block;width:100%;height:auto}
/* The caption aligns with the IMAGE's left edge. `max-width` plus `margin:auto`
   centred it instead, which read as a mistake sitting under a left-aligned
   photograph. Margin positions it; max-width only limits the measure. */
.prem .pframe__cap{margin:var(--s5) var(--s5) 0;font-size:15px;line-height:1.6;
  color:var(--fog-light);max-width:64ch}
@media (min-width:1024px){
  .prem .pframe__shell{margin-inline:var(--s8);border-radius:var(--r-xl)}
  .prem .pframe__core{border-radius:var(--r-lg)}
  .prem .pframe__cap{margin-inline:calc(var(--s8) + 10px)}
}

/* ---- two-layer split ---- */
.prem .psplit{display:grid;gap:var(--s4);margin-top:var(--s8);align-items:start}
@media (min-width:900px){.prem .psplit{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.prem .pcol__shell{background:rgba(255,255,255,.06);padding:8px;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl)}
.prem .pcol__core{background:var(--hero-deep);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,38px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.prem .pcol h3{font-family:var(--body);font-weight:400;
  font-size:clamp(20px,1.9vw,24px);margin:0 0 var(--s3);color:var(--inv)}
.prem .pcol--well h3{color:var(--ember)}
.prem .pcol--med h3{color:var(--teal)}
.prem .pcol__who{color:var(--fog-light);font-size:15.5px;font-weight:400;
  line-height:1.6;
  margin:0 0 var(--s5);padding-bottom:var(--s5);max-width:none;
  border-bottom:1px solid rgba(255,255,255,.12)}
.prem .pcol ul{list-style:none;margin:0;padding:0;max-width:none}
.prem .pcol li{margin:0 0 var(--s4);padding:0 0 var(--s4);
  border-bottom:1px solid rgba(255,255,255,.08)}
.prem .pcol li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.prem .pcol li strong{display:block;color:var(--inv);font-size:16.5px;
  line-height:1.35;margin-bottom:5px}
/* 400, not the page's 300. The reference runs weight 300 on black too, but at
   20px; at 15–16px a 300 on a dark ground loses enough stem weight to read as
   grey mush. Light weights are a large-size device. */
.prem .pcol li span{display:block;color:var(--fog-light);font-size:15.5px;
  font-weight:400;line-height:1.6}

/* ---- numbers ---- */
.prem .pnums{display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.prem .pnum__n{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(38px,4.8vw,60px);line-height:1;color:var(--ember-deep);
  font-variant-numeric:tabular-nums}
.prem .pnum__l{display:block;margin-top:var(--s3);font-size:15px;line-height:1.55;
  color:var(--slate)}

/* ---- how-it-works pillars: numbered double-bezel cards ---- */
.prem .ppils{display:grid;gap:var(--s4);margin-top:var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
/* Four cards read as a 2x2, never as 3+1 with an orphan. */
@media (min-width:900px){.prem .ppils[data-n="4"]{grid-template-columns:repeat(2,1fr)}
  .prem .ppils[data-n="5"]{grid-template-columns:repeat(6,1fr)}
  .prem .ppils[data-n="5"]>.ppil:nth-child(-n+3){grid-column:span 2}
  .prem .ppils[data-n="5"]>.ppil:nth-child(n+4){grid-column:span 3}}
.prem .ppil__shell{background:rgba(255,255,255,.06);padding:8px;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);height:100%}
.prem .ppil__core{background:var(--hero-deep);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);height:100%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.prem .ppil__n{display:block;font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:.08em;color:var(--ember);margin:0 0 var(--s4)}
.prem .ppil h3{font-family:var(--body);font-weight:400;font-size:clamp(19px,1.8vw,22px);
  line-height:1.25;margin:0 0 var(--s3);color:var(--inv)}
.prem .ppil p{color:var(--fog-light);font-size:15.5px;font-weight:400;line-height:1.6;
  margin:0;max-width:none}

/* ---- the folded rest of a long menu ---- */
.prem .pmore{margin-top:var(--s5)}
.prem .pmore>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;padding:13px 26px;border-radius:var(--r-btn);font:500 16px/1 var(--body);
  color:var(--ink);border:1px solid rgb(var(--ink-rgb) / .22)}
.prem .pmore>summary::-webkit-details-marker{display:none}
.prem .pmore>summary:hover{border-color:var(--ink);background:rgb(var(--ink-rgb) / .05)}
.prem .pmore>summary .ic{transition:transform .35s var(--pease)}
.prem .pmore[open]>summary .ic{transform:rotate(45deg)}
.prem .pmore[open]>summary{margin-bottom:var(--s4)}

/* ---- membership tiers ---- */
 /* Three plans read as a row of three, never 2 + an orphan. */
@media (min-width:1100px){.prem .ptiers:has(>.ptier:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}}
/* Between one column and three, a third card spans the row instead of leaving
   an empty cell beside it (iPad landscape showed the orphan). */
@media (max-width:1099px){.prem .ptiers>.ptier:nth-child(3):last-child{grid-column:1/-1}}
/* One plan alone ran 140 characters a line across the full container. */
.prem .ptiers:has(>.ptier:only-child){max-width:820px}
.prem .pdisc+.pbtns,.prem .disc+.pbtns{margin-top:var(--s6)}
.prem .ptiers{display:grid;gap:var(--s4);margin-top:var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.prem .ptier__shell{background:rgba(255,255,255,.06);padding:8px;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);height:100%}
.prem .ptier__core{background:var(--hero-deep);border-radius:var(--r-lg);
  padding:var(--s5);height:100%;display:flex;flex-direction:column;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.prem .ptier h3{font-family:var(--body);font-weight:400;font-size:21px;
  margin:0 0 6px;color:var(--inv)}
.prem .ptier p{color:var(--fog-light);font-size:15.5px;font-weight:400;
  line-height:1.6;max-width:none;margin:0 0 var(--s3)}
/* One class deeper than `.prem .ptier p`, which used to win and set the mode
   label, the sub-line and the note all to 15.5px body grey. */
.prem .ptier .ptier__mode{font:600 10px/1.3 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);margin:0 0 var(--s4);max-width:none;
  min-height:2.6em}
.prem .ptier .ptier__sub{color:var(--ember);font-size:14px;font-weight:600;
  margin:0 0 var(--s4);max-width:none}
.prem .ptier p strong{color:var(--inv)}
.prem .ptier .ptier__note{color:var(--fog-light);font-size:13.5px;line-height:1.55;
  margin-top:auto;padding-top:var(--s3);text-wrap:pretty}
.prem .pnotes{margin-top:var(--s6);display:grid;gap:var(--s3);max-width:76ch}
.prem .pnotes p{font-size:14px;line-height:1.6;color:var(--fog-light);margin:0}
.prem .pnotes strong{color:var(--inv);font-weight:500}

/* ---- timeline ---- */
.prem .psteps{list-style:none;margin:var(--s8) 0 0;padding:0;max-width:none}
.prem .psteps li{display:grid;gap:var(--s2);padding:var(--s5) 0;
  border-top:1px solid var(--stone);align-items:baseline}
@media (min-width:760px){
  .prem .psteps li{grid-template-columns:190px 1fr;gap:var(--s6)}
}
.prem .pstep__w{font-family:var(--display);font-weight:600;font-size:18px;
  letter-spacing:.02em;color:var(--ember-deep)}
.prem .pstep__t{font-size:17px;line-height:1.6;color:var(--ink);max-width:64ch}

/* ---- disclosure blocks ----
   The engine styles `.sec--ink .disc`. This layout never uses `.sec--ink`, so
   without the rule below a `.disc` inside a dark premium stage keeps the
   engine's cream `--mist` ground and inherits the section's cream ink: cream
   on cream, legally load-bearing text, invisible. Any element that paints its
   own background inside a themed section has to restate its own ink. */
.prem .pstage--ink .disc{background:rgba(255,255,255,.06);color:var(--fog-light);
  border-left-color:var(--sand)}
.prem .pstage--ink .disc strong{color:var(--inv)}
.prem .pstage--band .disc{background:var(--card);color:var(--ink)}
.prem .disc{margin-top:var(--s7);border-radius:0 var(--r-md) var(--r-md) 0}
.prem .disc p{font-size:15px;line-height:1.6}

/* ---- the menu table in the premium rhythm ---- */
.prem .pmenu{margin-top:var(--s8)}