: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}
}