:root{
  --canvas:#FBF7EE; --card:#FFFDF8; --mist:#F4ECDA; --raised:#EDE2C9;
  --stone:#DED0AE; --ink:#0A1A26; --hero:#12222F; --hero-deep:#0B1620;
  --navy:#16304A; --navy-soft:#24465F; --slate:#4B5B6B; --fog:#5C6872;
  --fog-light:#A7B3BF; --inv:#FBF7EE;
  --ember:#E3C77E; --ember-deep:#84611F; --sand:#CBA14C;
  --teal:#00A8AE; --teal-deep:#00787E;
  --ok:#1B7F4D; --warn:#8A5A00; --err:#A4262C;
  --accent:#B98B2E;
  --maxw:1200px; --measure:68ch;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --r-xl:24px; --r-pill:999px;
  --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:'Inter', -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:400 17px/1.65 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)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.14;
  letter-spacing:.005em;margin:0 0 var(--s4);text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:.012em}
h2{font-size:clamp(27px,3.5vw,40px)}
h3{font-size:clamp(20px,2.1vw,25px)}
h4{font-size:19px}
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))}}
.sec{padding:var(--s9) 0}
@media (max-width:768px){.sec{padding:var(--s8) 0}}
.sec--tight{padding:var(--s8) 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,2vw,21px);line-height:1.6;color:var(--slate);max-width:60ch}
.sec--ink .lede{color:var(--fog-light)}

/* ---- header ---- */
.hd{position:sticky;top:0;z-index:100;background:rgba(11,22,32,.92);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid rgba(203,161,76,.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 .mk{height:40px;width:auto}
.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:rgba(203,161,76,.12)}
.nav__cta{background:var(--sand)!important;color:var(--hero-deep)!important;
  font-weight:600!important;padding:11px 19px!important}
.nav__cta:hover{background:var(--ember)!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 rgba(203,161,76,.22);
    max-height:calc(100dvh - 72px);overflow:auto}
  .nav a{padding:15px 13px;font-size:17px}
  .nav[hidden]{display:none}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:50px;padding:0 var(--s5);border-radius:var(--r-pill);border:1.5px solid transparent;
  font:600 16px/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(--ember);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:19px;height:19px}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ---- hero ---- */
.hero{position:relative;background:var(--hero-deep);color:var(--inv);overflow:clip;
  padding:var(--s9) 0 var(--s9)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.75}
/* 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(100deg,rgba(11,22,32,.96) 0%,rgba(11,22,32,.90) 40%,
  rgba(11,22,32,.46) 66%,rgba(11,22,32,.12) 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}

/* division 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 auto;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:600 18px/1.3 var(--display);margin:0 0 var(--s2)}
.svc__d{margin:0;font-size:15px;color:var(--slate);max-width:62ch}
.svc__m{text-align:right;white-space:nowrap}
@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 rgba(22,48,74,.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__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}
}

/* ---- 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}
}