/* ==========================================================================
   Vellum — the 2027 Femme Aesthetics theme.
   Shared by every page built on this design. Page-specific rules stay in the
   page. Fonts are self-hosted and subsetted (see scripts/build-fonts.py);
   paths here are site-absolute because this file is served from /css/.
   ========================================================================== */
/* Brand fonts, self-hosted (latin + latin-ext subsets of the Google Fonts builds) */
@font-face{font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-italic-latin.woff2) format('woff2'); 
}
@font-face{font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-normal-latin.woff2) format('woff2'); 
}
@font-face{font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/geist-normal-latin.woff2) format('woff2'); 
}
@font-face{font-family: 'Alex Brush'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/alexbrush-normal-latin.woff2) format('woff2'); 
}
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --black:#000;
  --white:#fff;
  --nude:#ECE7DF;
  --nude-2:#DDD6CB;
  --nude-deep:#A39381;
  --powder:#F7F5F1;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  /* The brand script, as used in the Femme logo itself */
  --font-script:"Alex Brush","Snell Roundhand","Apple Chancery",cursive;
  --pad:clamp(20px,5vw,72px);
  --wrap:1400px;
  --edge:max(var(--pad),calc((100vw - var(--wrap)) / 2));
  --ease:cubic-bezier(.16,1,.3,1);
  --fg:var(--black);
  --fg-2:#4F4B45;
  --bg:var(--nude);
  --line:rgba(0,0,0,.3);
  --hl:var(--nude-2);
  --dark-a:#000;
  --dark-b:#151311;
  --nav-fg:var(--black);
  --nav-inv:var(--nude);
  --nav-bg:rgba(236,231,223,.82);
  --nav-line:rgba(0,0,0,.12);
}
html[data-nav="dark"]{--nav-fg:var(--nude);--nav-inv:var(--black);--nav-bg:rgba(0,0,0,.72);--nav-line:rgba(236,231,223,.16)}
html[data-nav="light"]{--nav-fg:var(--black);--nav-inv:var(--white);--nav-bg:rgba(255,255,255,.78)}
html[data-nav="nude"]{--nav-fg:var(--black);--nav-inv:var(--nude);--nav-bg:rgba(236,231,223,.82)}
html[data-nav="powder"]{--nav-fg:var(--black);--nav-inv:var(--powder);--nav-bg:rgba(247,245,241,.82)}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black);scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:1.0625rem;line-height:1.55;font-weight:400;color:var(--black);background:var(--black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
html.menu-open,html.menu-open body{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,dl,dd,blockquote{margin:0}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sr-only{position:absolute!important;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(--pad);top:-100px;z-index:200;background:var(--black);color:var(--nude);padding:12px 18px;font-size:.875rem}
.skip:focus{top:16px}
@media (hover:hover) and (pointer:fine){
  body,a,button,summary,label{cursor:none}
  input[type=range]{cursor:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Type */
.display{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.display em{font-style:italic}
.h2{font-size:clamp(2.5rem,6vw,5.75rem);font-weight:340;font-variation-settings:"opsz" 144;letter-spacing:-.025em;line-height:.96}
.h3{font-size:clamp(1.55rem,2.5vw,2.3rem);line-height:1.08}
.lead{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.5;max-width:34em;text-wrap:pretty}
.small{font-size:.875rem;line-height:1.5}
.muted{color:var(--fg-2)}
.tnum{font-variant-numeric:tabular-nums}

/* Text link with drawn underline */
.tlink{position:relative;display:inline-block;font-weight:500;padding-bottom:3px}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:right;transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(0);transform-origin:right;animation:tl .7s var(--ease) forwards}
@keyframes tl{0%{transform:scaleX(1);transform-origin:right}50%{transform:scaleX(0);transform-origin:right}51%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:56px;padding:0 30px;font-size:.9375rem;font-weight:500;letter-spacing:.005em;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--fg);transition:color .4s var(--ease)}
.btn::before{content:"";position:absolute;left:-10%;right:-10%;top:0;bottom:0;z-index:-1;
  border-radius:50% 50% 0 0 / 22% 22% 0 0;
  transform:translateY(101%);transition:transform .62s var(--ease),border-radius .62s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{border-radius:0}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn--solid{background:var(--fg);color:var(--bg)}
.btn--solid::before{background:var(--bg)}
.btn--solid:hover,.btn--solid:focus-visible{color:var(--fg)}
.btn--ghost{background:transparent;color:var(--fg)}
.btn--ghost::before{background:var(--fg)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--bg)}
.btn--sm{height:44px;padding:0 20px;font-size:.875rem}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Sections & themes */
.section{position:relative;padding:clamp(88px,11vw,168px) var(--pad)}
[data-theme="dark"]{--fg:var(--nude);--fg-2:#C6C0B6;--bg:var(--black);--line:rgba(236,231,223,.28);--hl:#3B352E;background:var(--black);color:var(--nude)}
[data-theme="light"]{--fg:var(--black);--fg-2:#4A4844;--bg:var(--white);--line:rgba(0,0,0,.3);--hl:var(--nude-2);background:var(--white);color:var(--black)}
[data-theme="nude"]{--fg:var(--black);--fg-2:#4F4B45;--bg:var(--nude);--line:rgba(0,0,0,.3);--hl:var(--nude-2);background:var(--nude);color:var(--black)}
[data-theme="powder"]{--fg:var(--black);--fg-2:#4F4B45;--bg:var(--powder);--line:rgba(0,0,0,.3);--hl:var(--nude-2);background:var(--powder);color:var(--black)}
.wrap{max-width:var(--wrap);margin-inline:auto}
/* No page ever scrolls sideways on a phone: anything wider than the screen inside
   the content (a tilted card, an unwrapped table) is clipped here. clip, unlike
   hidden, makes no scroll container, so sticky headers and strips keep working. */
main{overflow-x:clip}
@media (min-width:1800px){html{font-size:18px}:root{--wrap:1520px}}
.section__head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px 64px;align-items:end;margin-bottom:clamp(40px,6vw,84px)}
.section__head .lead{padding-bottom:.35em}
.rule{height:1px;background:currentColor;opacity:.25}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:1000;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),opacity .3s;display:grid;place-items:center;font-size:.72rem;font-weight:600;letter-spacing:.02em;will-change:transform}
.cursor.vis{opacity:1}
.cursor::after{content:attr(data-label);opacity:0;transition:opacity .2s}
.cursor.is-label{width:84px;height:84px;background:var(--nude);mix-blend-mode:normal;color:var(--black)}
.cursor.is-label::after{opacity:1;transition-delay:.12s}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============================================================
   NAV
   ============================================================ */
/* The header is a full-width row at the top of the page. Thirty pixels down it
   condenses into a floating capsule — glass, hairline, pill CTA flush inside —
   and from there it steps out of the way while you read and returns the moment
   you scroll back up. Links carry a lamp: a solid pill that glides under the
   cursor and inverts the label it lands on. */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:0 var(--pad);color:var(--nav-fg);transition:color .5s,transform .65s var(--ease)}
.nav.is-hidden{transform:translateY(-130%)}
.nav__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;max-width:var(--wrap);margin-inline:auto;padding:20px 0;border-radius:999px;
  transition:max-width .6s var(--ease),padding .5s var(--ease),margin .5s var(--ease),background .5s,box-shadow .5s}
.nav.is-scrolled .nav__bar{max-width:75rem;margin-top:12px;padding:8px 8px 8px 26px;background:var(--nav-bg);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 0 0 1px var(--nav-line),0 18px 50px -26px rgba(0,0,0,.45)}
.nav__logo{display:block;line-height:0}
/* The logo never gives way: an SVG's min-content width is zero, so without
   max-width:none a crowded row squeezed it to a sliver (or nothing). */
.nav__logo .logo{height:36px;width:auto;max-width:none;fill:currentColor;display:block;transition:height .5s var(--ease)}
.nav.is-scrolled .nav__logo .logo{height:30px}
/* Regular weight with a hair of tracking: quieter than the headline type, still crisp on sand. */
.nav__links{position:relative;display:flex;gap:2px;justify-content:center;font-size:.9375rem;font-weight:400;letter-spacing:.01em}
.nav__links a{position:relative;z-index:1;padding:9px 13px;white-space:nowrap;border-radius:999px;transition:color .35s var(--ease)}
.nav__links.is-lit a.is-lit{color:var(--nav-inv)}
.nav__lamp{position:absolute;top:0;left:var(--x,0px);width:var(--w,0px);height:100%;border-radius:999px;background:currentColor;opacity:0;pointer-events:none;
  transition:left .5s var(--ease),width .5s var(--ease),opacity .3s var(--ease)}
.nav__links.is-lit .nav__lamp{opacity:1}
.nav__right{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);font-size:.9375rem;font-weight:400;letter-spacing:.01em}
.nav__lang{padding:6px 2px;position:relative}
.nav__lang::after,.nav__tel::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__lang:hover::after,.nav__tel:hover::after{transform:scaleX(1);transform-origin:left}
.nav__tel{position:relative;padding:6px 0;white-space:nowrap}
/* Live status from the clinic's hours, in Miami time */
.nav__open{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:400;letter-spacing:.01em;white-space:nowrap;opacity:.85}
.nav__open i{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;flex:none;transition:background .4s}
.nav__open.is-open i{background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,currentColor 0%,transparent)}}
.nav__cta{--fg:var(--nav-fg);--bg:var(--nav-inv);height:44px;padding:0 22px;font-size:.875rem}
.nav.is-scrolled .nav__cta{height:42px}
.burger{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:17px}
.burger span:last-child{top:26px}
html.menu-open .burger span:first-child{top:21px;transform:rotate(45deg)}
html.menu-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
html.menu-open .nav{color:var(--nude);transform:none}
html.menu-open .nav__bar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
html.menu-open .nav__cta{--fg:var(--nude);--bg:var(--black)}
.mmenu{position:fixed;inset:0;z-index:55;background:var(--black);color:var(--nude);padding:calc(84px + 4vh) var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden}
html.menu-open .mmenu{transform:none;visibility:visible}
.mmenu__n{position:absolute;left:0;top:1.1em;font-family:var(--font-sans);font-size:.75rem;font-weight:500;letter-spacing:.06em;opacity:.55}
.mmenu__links a{position:relative;display:block;padding-left:2.4rem!important;font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 144;font-size:clamp(2.4rem,9vw,4rem);line-height:1.05;letter-spacing:-.02em;padding:6px 0;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
html.menu-open .mmenu__links a:hover{transform:translateX(14px)}
.mmenu__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.mmenu__links a:hover::after{transform:scaleX(1);transform-origin:left}
html.menu-open .mmenu__links a{opacity:1;transform:none}
html.menu-open .mmenu__links a:nth-child(1){transition-delay:.15s}
html.menu-open .mmenu__links a:nth-child(2){transition-delay:.2s}
html.menu-open .mmenu__links a:nth-child(3){transition-delay:.25s}
html.menu-open .mmenu__links a:nth-child(4){transition-delay:.3s}
html.menu-open .mmenu__links a:nth-child(5){transition-delay:.35s}
html.menu-open .mmenu__links a:nth-child(6){transition-delay:.4s}
html.menu-open .mmenu__links a:nth-child(7){transition-delay:.45s}
.mmenu__foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;font-size:.9375rem;border-top:1px solid rgba(236,231,223,.25);padding-top:20px}
.mmenu__foot .btn{--fg:var(--nude);--bg:var(--black)}
.mmenu .nav__open{display:inline-flex;width:100%;opacity:.8}
/* Seven links now. The live status is the first thing to go: it never fits the
   compact capsule, nor the longer Spanish row at any width. */
.nav.is-scrolled .nav__bar .nav__open{display:none}
html[lang="es"] .nav__bar .nav__open{display:none}
@media (max-width:1599px){.nav__bar .nav__open{display:none}}
/* The capsule is always tight, and so is the band just above the burger, so
   both close their spacing up. Below 1280 the phone number gives way too — in
   the capsule for either language, and in the Spanish row, where the labels run
   longer. It stays in the menu, the hero and the footer. */
.nav.is-scrolled .nav__bar{gap:16px}
.nav.is-scrolled .nav__links a{padding-inline:8px}
.nav.is-scrolled .nav__right{gap:13px}
@media (max-width:1279px){.nav.is-scrolled .nav__tel{display:none}}
@media (min-width:1101px) and (max-width:1439px){
  .nav__bar{gap:16px}
  .nav__links a{padding-inline:8px}
  .nav__right{gap:13px}
}
@media (min-width:1101px) and (max-width:1279px){html[lang="es"] .nav__tel{display:none}}
@media (max-width:1100px){
  .nav__bar{grid-template-columns:auto auto;justify-content:space-between}
  .nav.is-scrolled .nav__bar{padding:6px 6px 6px 20px}
  .nav__links,.nav__tel,.nav__lang{display:none}
  .burger{display:block}
}
@media (max-width:480px){.nav__cta{display:none}.nav.is-scrolled .nav__bar{padding-right:12px}}

/* ============================================================
   HERO — "Aperture"
   ============================================================ */
/* The loader: first visit per session, large screens only (the head script
   decides). The script mark writes itself in, a hairline and the name settle
   beneath it, then vellum.js docks the mark into the nav logo while the field
   dissolves over the hero's own entrance. It sits under the grain so it keeps
   the page's texture. */
.loader{position:fixed;inset:0;z-index:899;display:grid;place-items:center;color:var(--black)}
.loader::before{content:"";position:absolute;inset:0;background:var(--nude);transition:opacity .85s cubic-bezier(.4,0,.2,1) .22s}
html[data-scheme="dark"] .loader{color:var(--nude)}
html[data-scheme="dark"] .loader::before{background:var(--black)}
.loader__lockup{position:relative;display:flex;flex-direction:column;align-items:center}
/* A soft-edged, slightly slanted wipe drawn left to right reads as the pen
   moving through the script. */
.loader__mark{height:clamp(62px,6.2vw,92px);width:auto;fill:currentColor;transform-origin:0 0;
  -webkit-mask:linear-gradient(104deg,#000 46%,transparent 54%) 100% 0/260% 100% no-repeat;
          mask:linear-gradient(104deg,#000 46%,transparent 54%) 100% 0/260% 100% no-repeat;
  animation:loaderInk 1.25s cubic-bezier(.5,.08,.3,1) .12s forwards}
@keyframes loaderInk{to{-webkit-mask-position:0 0;mask-position:0 0}}
.loader__rule{display:block;width:clamp(40px,3.4vw,52px);height:1px;margin:clamp(24px,2.4vw,32px) 0 clamp(15px,1.4vw,19px);
  background:currentColor;opacity:.32;transform:scaleX(0);animation:loaderRule .9s var(--ease) .7s forwards}
@keyframes loaderRule{to{transform:none}}
.loader__name{font-family:var(--font-sans);font-size:.6875rem;font-weight:400;line-height:1;letter-spacing:.36em;margin-right:-.36em;text-transform:uppercase;
  opacity:0;transform:translateY(5px);animation:loaderName .8s var(--ease) .82s forwards}
@keyframes loaderName{to{opacity:.6;transform:none}}
/* Leaving: the hairline draws back in, the name lifts away, the field fades. */
html.loader-out .loader{pointer-events:none}
html.loader-out .loader::before{opacity:0}
html.loader-out .loader__rule{animation:loaderRuleOut .5s cubic-bezier(.7,0,.3,1) forwards}
@keyframes loaderRuleOut{from{transform:none}to{transform:scaleX(0)}}
html.loader-out .loader__name{animation:loaderNameOut .4s cubic-bezier(.4,0,1,1) forwards}
@keyframes loaderNameOut{from{opacity:.6;transform:none}to{opacity:0;transform:translateY(-4px)}}
html.loader-out .loader__mark{transition:transform 1s cubic-bezier(.65,0,.2,1) .06s,opacity .5s ease .06s}
html.loader-lost .loader__mark{opacity:0}
/* The mark stands in for the nav logo until it lands there, so the two never
   show at once. If the script never runs, these clear the field and hand the
   logo back at 3.6s — just as the hero's own failsafe brings it in. Both are
   scoped to :not(.loader-out), so once the script starts the exit they stop
   applying and the choreographed version plays instead. */
html.has-loader:not(.loader-out) .loader{animation:loaderFailsafe .6s linear 3.6s forwards}
html.has-loader:not(.loader-done) .nav__logo .logo{opacity:0}
html.has-loader:not(.loader-out) .nav__logo .logo{animation:loaderFailsafeLogo 0s linear 4s forwards}
@keyframes loaderFailsafe{99%,to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes loaderFailsafeLogo{to{opacity:1}}
html.loader-done .loader,html.no-loader .loader{display:none}
/* The consent banner waits for the page to arrive, then follows it in. */
html.has-loader:not(.loader-done) .cc-banner{transform:translateY(calc(100% + clamp(16px,3vw,40px)))}
html.has-loader.loader-done .cc-banner--visible{transition-delay:.9s}
/* Phones get the same sequence on a tighter budget. */
@media (max-width:900px){
  .loader__mark{animation-duration:.95s}
  .loader__rule{animation:loaderRule .7s var(--ease) .55s forwards}
  .loader__name{animation:loaderName .6s var(--ease) .62s forwards}
}
html.has-loader{--hd:.3s}

.hero{position:relative;height:100svh;overflow:hidden;isolation:isolate;
  --hp:0;
  --hf:min(1,calc(var(--hp) * 1.3));
  --sw:clamp(0,(var(--hp) - .5) * 6,1);
  --wf:clamp(0,1 - var(--hp) * 3.4,1);
  --mx:0px;--my:0px;--S:2;--dmax:2400px;
  --cx:71%;--cy:52%;
  --d0:min(74svh,40vw)}
.hero__spacer{height:85svh;pointer-events:none}
.hero__film{position:absolute;z-index:1;left:var(--cx);top:var(--cy);
  width:calc(var(--d0) + (var(--dmax) - var(--d0)) * var(--hf));height:calc(var(--d0) + (var(--dmax) - var(--d0)) * var(--hf));
  transform:translate(calc(-50% + var(--mx) * (1 - var(--hf))),calc(-50% + var(--my) * (1 - var(--hf))));
  border-radius:50%;overflow:hidden;background:var(--nude-2);
  clip-path:circle(0% at 50% 50%);transition:clip-path 1.4s var(--ease) calc(var(--hd,0s) + .3s)}
html.is-ready .hero__film{clip-path:circle(75% at 50% 50%)}
html[data-scheme="dark"] .hero__film{background:#161412}
/* The footage is always laid out at full-bleed size. At rest the porthole is a
   window onto its centre (a light zoom); as the iris opens the footage slides
   to the viewport centre and the zoom eases out. Nothing is ever scaled past
   its own pixels, so the picture stays as sharp as the file allows. */
.hero{--z0:1.15;--zz:calc(var(--z0) - (var(--z0) - 1) * var(--hf));--tx:calc(-50% + var(--dx,0px) * var(--hf));--ty:calc(-50% + var(--dy,0px) * var(--hf) + var(--fy,0px) * (1 - var(--hf)))}
.hero__video{position:absolute;left:50%;top:50%;width:var(--vw,100vw);height:var(--vh,56.25vw);object-fit:cover;object-position:center 40%;
  transform:translate(var(--tx),var(--ty)) scale(var(--zz))}
.hero.no-video .hero__video{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:translate(var(--tx),var(--ty)) scale(calc(var(--zz) * 1.02))}to{transform:translate(var(--tx),var(--ty)) scale(calc(var(--zz) * 1.1))}}
.hero__still{display:none}
.hero__film::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--sw);
  background:linear-gradient(to right,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 42%,rgba(0,0,0,0) 68%),linear-gradient(to top,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 40%)}
.hero__copy{position:absolute;z-index:2;left:max(var(--pad),calc((100% - var(--wrap)) / 2));top:50%;width:min(46%,640px);
  transform:translate(calc(var(--mx) * -.5),calc(-50% + var(--my) * -.5 - var(--hp) * 24px));color:var(--fg)}
@supports (color:color-mix(in oklab,red 50%,blue)){.hero__copy{color:color-mix(in oklab,var(--nude) calc(var(--sw) * 100%),var(--fg))}}
.hero__where{font-size:.9375rem;line-height:1.45;margin-bottom:clamp(18px,3vh,30px);opacity:calc(var(--wf) * .75)}
.hero__title{font-size:clamp(3.2rem,6.3vw,7rem);font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.035em;line-height:.93;margin-bottom:clamp(20px,3vh,32px)}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero__title .ln > span{display:block;transform:translateY(112%);transition:transform 1.25s var(--ease);transition-delay:calc(var(--hd,0s) + .15s)}
.hero__title .ln:nth-child(2) > span{transition-delay:calc(var(--hd,0s) + .24s)}
.hero__title .ln:nth-child(3) > span{transition-delay:calc(var(--hd,0s) + .33s)}
html.is-ready .hero__title .ln > span{transform:none}
.hero__title .u{background:linear-gradient(currentColor,currentColor) 0 90%/0% .045em no-repeat;transition:background-size 1s var(--ease) calc(var(--hd,0s) + 1.5s)}
html.is-ready .hero__title .u{background-size:100% .045em}
.hero__lead{max-width:26em;margin-bottom:clamp(20px,3vh,30px);font-size:clamp(1rem,1.2vw,1.15rem);opacity:.92}
.hero .btn{--fg:var(--black);--bg:var(--nude)}
@supports (color:color-mix(in oklab,red 50%,blue)){.hero .btn{--fg:color-mix(in oklab,var(--nude) calc(var(--sw) * 100%),var(--black));--bg:color-mix(in oklab,var(--black) calc(var(--sw) * 100%),var(--nude))}}
.hero__stat{display:flex;gap:12px;align-items:baseline;margin-top:clamp(18px,3vh,28px);font-size:.9375rem}
.hero__stat b{font-family:var(--font-display);font-weight:300;font-size:2rem;line-height:1;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.hero__stat .stars{color:var(--nude-deep);letter-spacing:.12em}
.hero__cue{position:absolute;z-index:2;left:var(--cx);bottom:calc(var(--sheet) - 22px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.8125rem;color:var(--fg-2);opacity:var(--wf)}
.hero__cue i{width:1px;height:34px;background:currentColor;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__where,.hero__lead,.hero__copy .actions,.hero__stat{transition:opacity .9s var(--ease),transform .9s var(--ease)}
/* The hero is revealed by js (.is-ready). If the script is slow or never
   arrives, these bring it in anyway at 3.5s — behind the loader's own 3s cap,
   so a normal load still gets the choreographed entrance. The rules live on
   :not(.is-ready), so the moment js does arrive they stop applying. */
html:not(.is-ready) .hero__where,html:not(.is-ready) .hero__lead,html:not(.is-ready) .hero__copy .actions,html:not(.is-ready) .hero__stat{opacity:0;transform:translateY(14px);animation:heroFailsafe .7s var(--ease) 3.5s forwards}
html:not(.is-ready) .hero__title .ln > span{animation:heroLineFailsafe .9s var(--ease) 3.5s forwards}
html:not(.is-ready) .hero__film{animation:heroFilmFailsafe 1.2s var(--ease) 3.5s forwards}
@keyframes heroFailsafe{to{opacity:1;transform:none}}
@keyframes heroLineFailsafe{to{transform:none}}
@keyframes heroFilmFailsafe{to{clip-path:circle(75% at 50% 50%)}}
.hero__lead{transition-delay:calc(var(--hd,0s) + .45s)}
.hero__copy .actions{transition-delay:calc(var(--hd,0s) + .55s)}
.hero__stat{transition-delay:calc(var(--hd,0s) + .65s)}
.hero__where{transition-delay:calc(var(--hd,0s) + .1s)}
/* The aperture runs on every screen: the hero holds still while the spacer
   scrolls past, and the porthole opens to full bleed. */
.hero{position:sticky;top:0;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0}

/* Short landscape screens (a phone on its side, a small laptop window): the
   desktop composition, set tighter. */
@media (max-height:660px) and (orientation:landscape){
  .hero{--d0:min(72svh,38vw);--cy:56%}
  .hero__where,.hero__stat,.hero__cue{display:none}
  .hero__copy{top:calc(50% + 28px)}
  .hero__title{font-size:clamp(2rem,9.5svh,4.2rem);margin-bottom:12px}
  .hero__lead{font-size:.9375rem;margin-bottom:16px}
  .hero__copy .actions{flex-wrap:nowrap;gap:8px}
  .hero__copy .actions .btn{height:44px;padding:0 18px;font-size:.875rem}
}
@media (max-height:460px) and (orientation:landscape){
  .hero__lead{display:none}
  .hero__title{font-size:clamp(1.9rem,10svh,3rem)}
}
/* Tablets held upright: the same composition at a larger scale */
@media (min-width:600px) and (max-width:900px) and (orientation:portrait){
  .hero__title{font-size:clamp(3.2rem,9vw,4.8rem)}
  .hero__lead{font-size:1.125rem}
  .hero__copy .actions .btn{flex:0 1 auto;height:54px;padding:0 28px;font-size:.9375rem}
}

/* Where the phone footage plays (no desktop source matches), its still holds
   the frame until the clip is running. It is laid out exactly like the video. */
@media (max-width:900px),(max-height:660px){
  .hero__video,.hero__still{max-width:none}
  .hero__still{display:block;position:absolute;left:50%;top:50%;width:var(--vw,100vw);height:var(--vh,56.25vw);object-fit:cover;object-position:center;
    transform:translate(var(--tx),var(--ty)) scale(var(--zz))}
  .hero__video{opacity:0;transition:opacity .6s var(--ease)}
  .hero__film.film-on .hero__video{opacity:1}
  .hero__film.film-on .hero__still{opacity:0;transition:opacity .6s var(--ease)}
  .hero.no-video .hero__video{animation:none}
}

/* Phones and tablets held upright: the porthole sits above the headline and
   opens over it. Only transforms move — the film is laid out once at full
   size and scaled (--fs, set per frame), its footage counter-scaled (--fsi) —
   so the scroll never triggers layout and stays on the compositor. */
@media (max-width:900px) and (orientation:portrait){
  /* the footage reaches the headline sooner here, so the text turns light sooner */
  .hero{height:100svh;--sw:clamp(0,(var(--hp) - .18) * 5,1);--wf:clamp(0,1 - var(--hp) * 4,1)}
  .hero__spacer{height:72svh}
  .hero__copy{left:var(--pad);right:var(--pad);top:auto;bottom:calc(24px + env(safe-area-inset-bottom));width:auto;
    transform:translateY(calc(var(--hp) * -28px))}
  .hero__where,.hero__cue{display:none}
  .hero__title{font-size:clamp(2.45rem,10.8vw,3.6rem);margin-bottom:14px}
  .hero__lead{font-size:1rem;line-height:1.45;margin-bottom:18px;max-width:30em}
  .hero__copy .actions{gap:10px}
  .hero__copy .actions .btn{flex:1 1 auto;height:50px;padding:0 18px;font-size:.875rem}
  .hero__stat{margin-top:16px;font-size:.875rem}
  .hero__stat b{font-size:1.6rem}
  /* Pinned at the top-left corner and placed by transform alone, so nothing the
     script measures after first paint ever moves a box (no layout shift). The
     defaults are the script's answer for a typical phone. */
  .hero__film{left:0;top:0;width:var(--dmax,150lvh);height:var(--dmax,150lvh);transform-origin:0 0;
    transform:translate(var(--cx,50vw),var(--cy,calc(84px + 16svh))) scale(var(--fs,.2)) translate(-50%,-50%);
    clip-path:none;transition:none;will-change:transform}
  .hero__film::after{display:none}
  .hero__video,.hero__still{left:0;top:0;width:var(--vw,177.8lvh);height:var(--vh,100lvh);object-fit:cover;transform-origin:0 0;
    transform:translate(calc(var(--dmax,150lvh) / 2),calc(var(--dmax,150lvh) / 2)) scale(var(--fsi,5))
      translate(calc(var(--dx,0px) * var(--hf)),calc(var(--dy,0px) * var(--hf) + var(--fy,0px) * (1 - var(--hf)))) scale(var(--zz)) translate(-50%,-50%)}
  .hero::after{opacity:var(--sw);background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.12) 78%,rgba(0,0,0,0) 100%)}
  .hero__copy{z-index:2}
}
@media (max-width:900px) and (orientation:portrait) and (max-height:700px){
  .hero__stat{display:none}
  .hero__title{font-size:clamp(2.2rem,9.6vw,3rem)}
  .hero__lead{font-size:.9375rem;margin-bottom:14px}
}
@keyframes kenburnsM{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{padding-block:clamp(110px,15vw,210px)}
.manifesto__text{font-size:clamp(1.85rem,4.3vw,4.1rem);line-height:1.12;letter-spacing:-.02em;max-width:21em}
/* Resting words are dimmed, not hidden: at .45 the grey still clears 3:1
   against the section behind it, which is what a large-text contrast check
   (and a reader with low vision) needs. */
.manifesto__text .mw{transition:opacity .4s;opacity:.45}
.manifesto__text .mw.on{opacity:1}
.manifesto__sig{margin-top:40px;font-size:1rem;color:var(--fg-2)}

/* ============================================================
   TREATMENTS INDEX
   ============================================================ */
.menu__list{border-bottom:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:3.25rem minmax(0,1.2fr) minmax(0,.95fr) minmax(0,1.05fr) 40px;gap:20px 28px;align-items:baseline;padding:26px 14px;border-top:1px solid var(--line);isolation:isolate;transition:color .35s var(--ease)}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--black);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.row__num{font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.row__name{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(1.5rem,2.5vw,2.35rem);letter-spacing:-.02em;line-height:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.row__tag{font-family:var(--font-sans);font-size:.6875rem;font-weight:600;letter-spacing:.04em;padding:5px 9px 4px;border:1px solid currentColor;line-height:1;position:relative;top:-.15em}
.row__meta{font-size:1rem;color:var(--fg-2)}
.row__line{font-size:1rem}
.row__arrow{width:22px;height:22px;justify-self:end;align-self:center;transition:transform .5s var(--ease)}
.row__arrow path{stroke:currentColor;fill:none;stroke-width:1.5}
@media (hover:hover) and (pointer:fine){
  .row:hover{color:var(--nude);--fg-2:var(--nude-2)}
  .row:hover::before{transform:scaleY(1)}
  .row:hover .row__arrow{transform:translate(4px,-4px)}
}
.row:focus-visible{outline-offset:-4px}
.menu__more{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.preview{position:fixed;left:0;top:0;width:300px;aspect-ratio:3/4;pointer-events:none;z-index:40;opacity:0;transform:translate(0,-50%) scale(.9) rotate(-3deg);transition:opacity .35s var(--ease),transform .6s var(--ease);overflow:hidden;background:var(--nude-deep);display:none;will-change:left,top}
.preview.on{opacity:1;transform:translate(0,-50%) scale(1) rotate(0)}
.preview img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.preview.no-img img{opacity:0}
.preview::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:end start;padding:20px;color:var(--black);font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1;opacity:0;transition:opacity .3s}
.preview.no-img::after{opacity:1}
@media (hover:hover) and (pointer:fine){.preview{display:block}}
@media (max-width:900px){
  .section__head{grid-template-columns:1fr;gap:18px}
  .section__head .lead{padding-bottom:0}
}

/* ============================================================
   RESULTS — before / after
   ============================================================ */
.results__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,88px);align-items:center}
/* The film sits in a tall arch — the same frame the founders and visit sections
   use, just 9:16 so the portrait clip is never cropped. No native controls: one
   circular play/pause, the cursor names the action. */
/* The featured still sits in the site's arch, squared to 1:1 so a
   before/after composite is never cropped on either half. The rail below
   carries the rest. */
/* A composite is two photos side by side, so the frame must not eat into
   either one: a gentle radius instead of the dome (the dome cut the top
   corners off both faces) and no parallax zoom (1.12x cut 6% off each side). */
.results .arch.results__feature{aspect-ratio:1;max-width:600px;width:100%;margin-inline:auto;background:var(--hl);border-radius:28px 28px 18px 18px}
.results .arch.results__feature > img{transform:none;will-change:auto}
.results__copy .h3{margin-bottom:22px}
.results__quote{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.38;letter-spacing:-.01em;margin-bottom:26px}
.results__meta{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:.875rem;margin-bottom:34px;padding-top:18px;border-top:1px solid var(--line)}
.results__meta dt{color:var(--fg-2)}
@media (max-width:900px){.results__grid{grid-template-columns:1fr}}

/* The stills read as an index, not a grid: each one is a photograph with a
   hairline rule and a numbered caption in the treatment-row voice. No badges on
   the images — the section head says once which side is which. */
.results__rail{display:flex;gap:clamp(24px,3vw,44px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  padding:0 var(--edge) 6px;margin:clamp(56px,7vw,96px) calc(50% - 50vw) 0;scrollbar-width:none}
.results__rail::-webkit-scrollbar{display:none}
.results__rail.drag{scroll-snap-type:none}
.ba-still{flex:0 0 min(400px,80vw);scroll-snap-align:start;margin:0}
.ba-still figure,.ba-still .ba-still__img{margin:0}
.ba-still__img{position:relative;aspect-ratio:1;overflow:hidden;border-radius:18px 18px 4px 4px;background:var(--hl)}
.results__rail{user-select:none;-webkit-user-select:none}
/* No hover zoom: scaling a comparison crops its outer edges. */
.ba-still__img img{width:100%;height:100%;object-fit:contain;display:block;
  pointer-events:none;-webkit-user-drag:none;user-drag:none}
.ba-still__cap{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:0 14px;align-items:baseline;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ba-still__n{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--fg-2);transition:color .4s var(--ease)}
.ba-still:hover .ba-still__n{color:var(--fg)}
.ba-still__name{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:1.35rem;letter-spacing:-.015em;line-height:1}
.ba-still__view{font-size:.8125rem;color:var(--fg-2);white-space:nowrap}
.results__bar{height:1px;background:var(--line);margin:26px 0 0;position:relative}
.results__bar i{position:absolute;left:var(--x,0%);top:-1px;height:3px;width:var(--w,20%);background:var(--fg)}
@media (max-width:900px){.results__rail{margin-top:44px}}

/* Enlarge: every before/after opens full size in a dialog, whole image, never
   cropped, with the sides labelled. .ba-zoom is the keyboard and screen-reader
   way in; a pointer can click anywhere on the photo. */
.ba-zoom{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(12,11,10,.62);color:#fff;opacity:.9;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba-zoom:hover,.ba-zoom:focus-visible{opacity:1;transform:scale(1.06)}
.ba-zoom:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ba-zoom svg,.ba-box button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.results__feature{position:relative}
.results__feature .ba-zoom{right:18px;bottom:18px}
/* Each still is one file holding two photos (four for a 2x2) butted edge to
   edge. A hairline in the section colour marks the seam so the pair reads as
   before | after rather than one merged face. */
.ba-still__img::after,.results__feature::after,.ba-still__img[data-rows="2"]::before{content:"";position:absolute;z-index:1;pointer-events:none;background:var(--bg)}
.ba-still__img::after,.results__feature::after{top:0;bottom:0;left:50%;width:4px;margin-left:-2px}
.ba-still__img[data-rows="2"]::before{left:0;right:0;top:50%;height:4px;margin-top:-2px}
.results__feature::after{width:6px;margin-left:-3px;opacity:0;transition:opacity .6s var(--ease) .6s}
.results__feature.in::after,html.reduce .results__feature::after{opacity:1}
html.ba-open,html.ba-open body{overflow:hidden}
/* The dialog sits in the top layer, above the custom cursor dot, and the page
   hides the system pointer. So inside the viewer the system pointer comes back
   and the dot steps aside, or the mouse would vanish. */
.ba-box,.ba-box *{cursor:default}
.ba-box button,.ba-box button *{cursor:pointer}
html.ba-open .cursor,html.ba-open .cursor.vis{opacity:0}
.ba-box{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(10,9,8,.96);color:#ECE7DF;overflow:hidden}
.ba-box::backdrop{background:rgba(10,9,8,.94)}
.ba-box[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;padding:clamp(16px,3vw,40px) clamp(16px,6vw,96px) clamp(12px,2vw,24px)}
.ba-box__stage{display:grid;grid-template-columns:1fr 1fr;gap:var(--g,12px);align-self:center}
.ba-box__cell{position:relative;background-repeat:no-repeat;background-color:#221f1c;border-radius:10px}
.ba-box__side{position:absolute;top:12px;left:12px;line-height:1;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border-radius:99px;background:rgba(12,11,10,.62);color:#fff}
.ba-box__bar{display:flex;align-items:center;gap:18px;width:100%;max-width:1100px;padding-top:16px}
.ba-box__cap{flex:1;min-width:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ba-box__cap b{font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:-.015em}
.ba-box__cap span{font-size:.8125rem;color:#C6C0B6}
.ba-box button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,231,223,.35);background:transparent;color:inherit;display:grid;place-items:center;flex:none;transition:background .3s var(--ease)}
.ba-box button:hover{background:rgba(236,231,223,.12)}
.ba-box button:focus-visible{outline:2px solid #ECE7DF;outline-offset:2px}
.ba-box .ba-box__close{position:fixed;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);background:rgba(12,11,10,.5)}
@media (max-width:600px){.ba-box[open]{padding:64px 0 12px}.ba-box__bar{padding-inline:16px}}

/* ============================================================
   LEDGER
   ============================================================ */
.ledger__list{border-top:1px solid var(--fg)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:16px 40px;padding:30px 0;border-bottom:1px solid var(--fg);align-items:baseline}
.pair__no,.pair__yes{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(1.75rem,3.5vw,3.3rem);letter-spacing:-.02em;line-height:1.02}
.pair__no{opacity:.45}
.pair__no span{background-image:linear-gradient(var(--fg),var(--fg));background-size:0% 2px;background-position:0 58%;background-repeat:no-repeat;transition:background-size .7s var(--ease)}
.pair__yes{font-style:italic}
.pair__yes span{background-image:linear-gradient(var(--hl),var(--hl));background-size:0% 45%;background-position:0 92%;background-repeat:no-repeat;transition:background-size .7s var(--ease) .18s;padding:0 .06em;margin:0 -.06em}
.pair.on .pair__no span{background-size:100% 2px}
.pair.on .pair__yes span{background-size:100% 45%}
.pair__why{font-size:1rem;line-height:1.5;color:var(--fg-2);max-width:30em}
@media (max-width:800px){
  .pair{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .pair__why{margin-top:6px}
}

/* ============================================================
   FOUNDERS
   ============================================================ */
.founders{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,100px);align-items:center}
.founders__img{aspect-ratio:4/5;width:100%;object-fit:cover;background:var(--nude-2)}
.founders__names{display:flex;flex-wrap:wrap;gap:20px 48px;margin-top:40px;padding-top:24px;border-top:1px solid var(--fg)}
.founders__names a{display:block}
.founders__names b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;line-height:1.1;margin-bottom:4px}
.founders__names small{font-size:.875rem;color:var(--fg-2)}
@media (max-width:900px){.founders{grid-template-columns:1fr}.founders__img{max-height:70vh}}

/* ============================================================
   PROCESS
   ============================================================ */
.process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.process__head{position:sticky;top:120px}
.steps{border-top:1px solid var(--fg)}
.step{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:16px 24px;padding:36px 0;border-bottom:1px solid var(--fg)}
.step__n{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:2.2rem;line-height:1;letter-spacing:-.02em;color:var(--fg-2)}
.step h3{margin-bottom:12px}
.step p{max-width:36em}
@media (max-width:900px){.process{grid-template-columns:1fr}.process__head{position:static}}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews__track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 var(--edge) 10px;margin:0 calc(50% - 50vw);scroll-padding-inline:var(--edge);scrollbar-width:none}
.reviews__track::-webkit-scrollbar{display:none}
.reviews__track.drag{scroll-snap-type:none}
.review{flex:0 0 min(430px,82vw);scroll-snap-align:start;border:1px solid var(--line);padding:34px 32px 30px;display:flex;flex-direction:column;gap:22px;min-height:340px}
.review__stars{letter-spacing:.14em;color:var(--nude-deep);font-size:.9rem}
.review__q{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}
.review__who{margin-top:auto;font-size:.875rem;display:flex;justify-content:space-between;gap:16px}
.review__who span{color:var(--fg-2)}
.reviews__foot{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

/* ============================================================
   MEMBERSHIP
   ============================================================ */
.member{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center}
.member__card{background:var(--black);color:var(--nude);padding:clamp(28px,4vw,48px);--fg:var(--nude);--fg-2:#C6C0B6;--bg:var(--black);--line:rgba(236,231,223,.25)}
.member__price{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(4.2rem,8vw,7.2rem);line-height:.95;letter-spacing:-.04em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.member__price small{font-family:var(--font-sans);font-size:1rem;letter-spacing:0;color:var(--fg-2)}
.member__from{font-size:.9375rem;color:var(--fg-2);margin-bottom:8px}
.member__list{margin:30px 0 26px}
.member__list li{padding:13px 0;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.5}
.member__list li b{font-weight:600}
.member__fine{font-size:.875rem;color:var(--fg-2);margin-top:22px}
@media (max-width:900px){.member{grid-template-columns:1fr}}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq__head{position:sticky;top:120px}
.faq__list{border-top:1px solid var(--fg)}
.faq__list details{border-bottom:1px solid var(--fg)}
.faq__list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(1.25rem,1.9vw,1.7rem);letter-spacing:-.01em;line-height:1.2}
.faq__list summary::-webkit-details-marker{display:none}
.plus{width:26px;height:26px;position:relative;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.plus::before{width:100%;height:1px}
.plus::after{width:1px;height:100%}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__list details p{padding:0 0 28px;max-width:38em;animation:faqin .45s var(--ease)}
.faq__a{padding:0 0 28px;max-width:38em;animation:faqin .45s var(--ease)}
.faq__a > * + *{margin-top:.8em}
.faq__a p{padding:0}
.faq__a img{border-radius:14px;margin-top:12px;height:auto}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:900px){.faq{grid-template-columns:1fr}.faq__head{position:static}}

/* ============================================================
   VISIT
   ============================================================ */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.visit__img{aspect-ratio:4/5;width:100%;object-fit:cover;background:#111}
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.visit__grid h3{font-size:.875rem;font-weight:500;color:var(--fg-2);margin-bottom:12px}
.hours{display:grid;gap:6px;font-size:.9375rem}
.hours > div{display:flex;justify-content:space-between;gap:16px}
.hours dd{font-variant-numeric:tabular-nums;text-align:right}
/* Today, in Miami time: a quiet dot and full-strength type */
.hours [data-day]{position:relative}
.hours .is-today dt,.hours .is-today dd{color:var(--fg);font-weight:500}
.hours .is-today dt::before{content:"";position:absolute;left:-14px;top:.62em;width:6px;height:6px;border-radius:50%;background:currentColor}
.visit address{font-style:normal;font-size:.9375rem;line-height:1.55}
.visit .actions{margin-top:36px}
@media (max-width:900px){.visit{grid-template-columns:1fr}.visit__img{max-height:60vh}}
@media (max-width:520px){.visit__grid{grid-template-columns:1fr}}

/* ============================================================
   LOCAL
   ============================================================ */
.local__intro{max-width:44em;margin-bottom:56px}
.local__intro p{font-size:1.0625rem;line-height:1.6}
.local__intro a{border-bottom:1px solid currentColor}
.local__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px;padding-top:32px;border-top:1px solid var(--fg)}
.local__groups h3{font-size:.875rem;font-weight:500;color:var(--fg-2);margin-bottom:14px}
.local__groups li{padding:6px 0;font-size:.9375rem}
.local__groups a{border-bottom:1px solid var(--line);transition:border-color .3s}
.local__groups a:hover{border-color:var(--fg)}
.local__areas{margin-top:48px;padding-top:32px;border-top:1px solid var(--fg);font-size:.9375rem;line-height:1.7}
.local__areas b{display:block;font-weight:500;font-size:.875rem;color:var(--fg-2);margin-bottom:8px}
@media (max-width:800px){.local__groups{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.local__groups{grid-template-columns:1fr}}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{overflow:hidden;text-align:center;padding-top:clamp(120px,15vw,200px);padding-bottom:clamp(300px,32vw,460px)}
/* The footer slides up over this section by --sheet, so the marquee is lifted
   clear of that overlap and of its own descenders. */
.marquee{position:absolute;bottom:calc(var(--sheet) + .2em);left:0;right:0;white-space:nowrap;
  font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;
  font-size:clamp(6rem,18vw,19rem);line-height:1;letter-spacing:-.03em;
  user-select:none;z-index:0;pointer-events:none}
.marquee__inner{display:inline-block;animation:marquee 46s linear infinite;will-change:transform}
.marquee__inner i{font-style:italic}
/* At rest the letters are an outline. On hover a solid fill sweeps across them
   left to right — clipped to the glyphs, so it reads as ink flooding in rather
   than a block of colour fading up. */
.marquee__inner span{
  display:inline-block;
  /* line-height is 1, so descenders (every "y") and tall ascenders fall outside
     the box the gradient is painted in — and background-clip:text can only fill
     glyph pixels that sit over a painted background. Pad the box out to cover
     them and pull it back with an equal negative margin so nothing moves. */
  padding-block:.32em;margin-block:-.32em;
  color:transparent;
  -webkit-text-stroke:1px var(--marq-stroke,rgba(0,0,0,.34));
  background-image:linear-gradient(95deg,
    var(--marq-fill,rgba(0,0,0,.78)) 0 42%,
    var(--marq-fill,rgba(0,0,0,.78)) 46%,
    transparent 58%, transparent 100%);
  background-size:260% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  transition:background-position 1.5s var(--ease),-webkit-text-stroke-color .9s var(--ease)}
.cta:hover .marquee__inner span,
.cta:focus-within .marquee__inner span{
  background-position:0 0;
  -webkit-text-stroke-color:var(--marq-stroke-on,rgba(0,0,0,.6))}
@media (prefers-reduced-motion:reduce){
  .marquee__inner{animation:none}
  .marquee__inner span{transition-duration:.001ms}
}
@keyframes marquee{to{transform:translateX(-50%)}}
.cta__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta__inner .actions{justify-content:center;margin-top:12px}
.cta__tel{font-size:.9375rem;color:var(--fg-2)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:clamp(64px,8vw,110px) var(--pad) 40px;--fg:var(--nude);--bg:var(--black)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.footer__brand .footer__mark{height:40px;width:auto;fill:currentColor;display:block;margin-bottom:18px}
.footer__brand p{font-size:.9375rem;color:var(--fg-2);max-width:26em}
.footer__social{display:flex;gap:18px;margin-top:22px;font-size:.875rem}
.footer h3{font-size:.875rem;font-weight:500;color:var(--fg-2);margin-bottom:16px}
.footer li{padding:5px 0;font-size:.9375rem}
.footer li a{position:relative;display:inline-block;transition:transform .5s var(--ease)}
.footer li a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.footer li a:hover{transform:translateX(5px)}
.footer li a:hover::after{transform:scaleX(1);transform-origin:left}
.footer address{font-style:normal;font-size:.9375rem;line-height:1.55}
.footer__bar{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-top:28px;font-size:.875rem;color:var(--fg-2)}
.footer__legal{display:flex;flex-wrap:wrap;gap:6px 20px}
/* "Cookie settings" opens a dialog, so it is a button; it should still read and
   behave as one of the legal links beside it. */
.footer__legal a,.footer__legal button{font-size:inherit;line-height:inherit;color:inherit}
.footer__legal a:hover,.footer__legal button:hover{text-decoration:underline;text-underline-offset:4px}
/* The studio credit sits in the palette like everything else: the line is
   muted, the name is full-strength with the same drawn underline the rest of
   the footer uses. */
.footer__credit{color:var(--fg-2)}
.footer__credit a{position:relative;color:var(--fg);font-weight:500;padding-bottom:2px}
.footer__credit a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.45;transform-origin:right;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.footer__credit a:hover::after{opacity:1;transform:scaleX(1)}
.footer__side{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.scheme{display:inline-flex;border:1px solid var(--line);padding:3px;gap:2px;color:var(--fg)}
.scheme button{padding:7px 14px;line-height:1;font-size:.8125rem;font-weight:500;color:var(--fg-2);transition:background .3s var(--ease),color .3s var(--ease)}
.scheme button:hover{color:var(--fg)}
.scheme button[aria-checked="true"]{background:var(--fg);color:var(--bg)}
.scheme button:focus-visible{outline-offset:-2px}
@media (max-width:1000px){.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1 / -1}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
@media (max-width:767px){.footer{padding-bottom:110px}}
/* Touch: every stacked link is a full-height target */
@media (max-width:767px){
  .footer li,.local__groups li{padding:0}
  .footer li a,.local__groups li a{display:inline-block;padding:11px 0}
  .footer__legal{gap:0 24px}
  .footer__legal a,.footer__legal button{display:inline-block;padding:12px 0}
  .footer__social a{padding:12px 0}
  .finder__nav button{padding:14px 0}
  .scheme button{padding:12px 16px}
  .book__alt a,.reviews__foot .tlink{display:inline-block;padding:10px 0}
}

/* ============================================================
   DARK SCHEME
   ============================================================ */
html[data-scheme="dark"] body{color:var(--nude)}
html[data-scheme="dark"] main > section,
html[data-scheme="dark"] .footer{--fg:var(--nude);--fg-2:#C6C0B6;--bg:var(--dark-a);--line:rgba(236,231,223,.25);--hl:#3B352E;background:var(--bg);color:var(--fg)}
html[data-scheme="dark"] main > section:nth-of-type(even),
html[data-scheme="dark"] .footer{--bg:var(--dark-b)}
html.scheme-ready main > section,html.scheme-ready .footer,html.scheme-ready .member__card{transition:background-color .5s var(--ease),color .5s var(--ease)}
html[data-scheme="dark"] .hero .btn{--fg:var(--nude);--bg:var(--black)}
html[data-scheme="dark"] .row::before{background:var(--nude)}
@media (hover:hover) and (pointer:fine){html[data-scheme="dark"] .row:hover{color:var(--black);--fg-2:#4F4B45}}
html[data-scheme="dark"] .member__card{background:var(--dark-b);border:1px solid var(--line)}
html[data-scheme="dark"] .marquee{--marq-stroke:rgba(236,231,223,.38);--marq-stroke-on:rgba(236,231,223,.7);--marq-fill:rgba(236,231,223,.82)}

/* ============================================================
   V3 — depth, geometry, texture, motion
   ============================================================ */
:root{--sheet:clamp(28px,4.5vw,72px)}
main > .section,.footer{position:relative;z-index:1;border-radius:var(--sheet) var(--sheet) 0 0;margin-top:calc(var(--sheet) * -1)}
/* Everything past the first two screens is skipped until it is scrolled near,
   so the hero is not competing with eleven sections of layout work. The
   contain-intrinsic-size keeps the scrollbar honest before that happens. */
main > .section:nth-of-type(n+4),.footer{content-visibility:auto;contain-intrinsic-size:auto 1200px}
main > .section{padding-top:calc(clamp(88px,11vw,168px) + var(--sheet))}
.manifesto{padding-top:calc(clamp(110px,15vw,210px) + var(--sheet))}
.cta{padding-top:calc(clamp(120px,15vw,200px) + var(--sheet))}
.footer{padding-top:calc(clamp(64px,8vw,110px) + var(--sheet))}

.btn,.nav__cta,.row__tag,.scheme,.scheme button,.ba__lbl{border-radius:999px}
.btn{transition:color .4s var(--ease),transform .7s var(--ease)}
.nav__cta{transition:background .35s,color .35s,transform .7s var(--ease)}
.btn.is-mag,.nav__cta.is-mag{transition:transform .08s linear}
.ba{border-radius:32px}

.arch{display:block;overflow:hidden;border-radius:999px 999px 0 0;aspect-ratio:4/5;background:var(--nude-2)}
.arch img,.arch video{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;max-height:none;transform:translateY(var(--py,0)) scale(1.12);will-change:transform}
.visit .arch{background:#1a1816}
@media (max-width:900px){.founders .arch,.visit .arch{aspect-ratio:4/5;max-width:520px}.results .arch.results__feature{max-width:520px}}

.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:900;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-scheme="dark"] .grain{mix-blend-mode:screen;opacity:.07}
@media (hover:hover) and (pointer:fine){.grain{animation:grain 1.4s steps(5) infinite}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,-1%)}100%{transform:translate(-1.5%,-1.5%)}}

.h2 .sl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.h2 .sl > span{display:block;transform:translateY(112%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * .09s)}
.h2.in .sl > span{transform:none}
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) .25s,transform .9s var(--ease) .25s}
.fade.in{opacity:1;transform:none}

.menu__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(32px,6vw,96px);align-items:start}
.menu__head{position:sticky;top:120px}
.menu__head .lead{margin-top:24px}
.menu__hint{display:none;margin-top:18px;font-size:.9375rem}
@media (hover:hover) and (pointer:fine){.menu__hint{display:block}}
.row{grid-template-columns:2.75rem minmax(0,1.3fr) minmax(0,.9fr) 36px;grid-template-areas:"num name line arrow" "num meta line arrow";gap:4px 22px;align-items:start;padding:24px 12px 24px 8px}
.row__num{grid-area:num;padding-top:.65em}
.row__name{grid-area:name}
.row__meta{grid-area:meta}
.row__line{grid-area:line;padding-top:.5em}
.row__arrow{grid-area:arrow;align-self:center;justify-self:end}
.preview{width:min(340px,26vw);aspect-ratio:1;border-radius:50%}
.preview::after{place-items:center;text-align:center;font-size:1.7rem;padding:24px}
@media (max-width:900px){
  .menu__grid{grid-template-columns:1fr;gap:28px}
  .menu__head{position:static}
  .row{grid-template-columns:2.5rem minmax(0,1fr) 28px;grid-template-areas:"num name arrow" "num meta arrow" "num line arrow";padding:22px 6px}
  .row__line{padding-top:.35em}
  .row__arrow{align-self:start;padding-top:.55em}
}

.reviews__track{gap:clamp(40px,5vw,72px)}
.review{border:0;padding:3.4rem 0 0;position:relative;flex-basis:min(460px,84vw);min-height:0;gap:20px}
.review::before{content:"\201C";position:absolute;left:-.06em;top:-.16em;font-family:var(--font-display);font-size:6.5rem;line-height:1;color:var(--nude-deep);opacity:.65;pointer-events:none}
.review__stars{position:absolute;right:0;top:1.2rem}
.review__who{margin-top:8px}
.reviews__bar{height:1px;background:var(--line);margin-top:28px;position:relative}
.reviews__bar i{position:absolute;left:var(--x,0%);top:-1px;height:3px;width:var(--w,20%);background:var(--fg)}

.member__list{margin:34px 0 0}
.member__list li:last-child{border-bottom:1px solid var(--line)}
.member__fine{margin-top:16px}
.member__badge{position:relative;width:min(400px,72vw);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;color:var(--fg)}
.member__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 50s linear infinite;transform-origin:50% 50%;font-family:var(--font-sans);font-size:15.5px;font-weight:500;letter-spacing:.05em}
.member__ring text{fill:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}
.member__core{width:64%;aspect-ratio:1;border-radius:50%;background:var(--fg);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;transition:transform .8s var(--ease)}
.member__badge:hover .member__core{transform:scale(1.04)}
/* The wordmark, set in the brand script. Alex Brush sits high in its box and
   its descenders run long, so the optical centring is nudged by hand. The
   "aesthetics & health" line from the logo lockup is deliberately dropped —
   it is unreadable at this size. */
/* Alex Brush sits left and low in its em box — the f's entry stroke and the
   final e's exit are not symmetrical. Measured against the circle's true
   centre at 5.4rem: the ink landed 11px left and 2px low, so it is nudged
   back in em units and stays centred at every size. */
.member__core .member__mark{display:block;font-family:var(--font-script);font-weight:400;
  font-size:clamp(3.4rem,7.5vw,5.4rem);line-height:.82;letter-spacing:0;
  transform:translate(.107em,.009em)}
.member__core small{font-family:var(--font-sans);font-size:.8125rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:inherit;opacity:.72;margin-top:.5em}

/* ============================================================
   V4 — finder, interlude, numbers, prices, booking
   ============================================================ */
/* Image reveals: every arch wipes open as it enters. The clip lives on the
   image, not the observed frame: Chrome measures intersection through the
   target's own clip-path, so a fully clipped frame never "enters" and the
   photo never shows. */
.arch > img,.arch > video,.arch > picture > img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease),transform 1.1s var(--ease)}
.arch.in > img,.arch.in > video,.arch.in > picture > img{clip-path:inset(0 0 0 0)}
html.reduce .arch > img,html.reduce .arch > video,html.reduce .arch > picture > img{clip-path:none}
/* An arch may hold a <picture> (a different crop per screen shape); it fills the frame like a bare img. */
.arch > picture{display:block;width:100%;height:100%}

/* Interlude: one full-bleed photograph of the clinic, one line */
main > .section.interlude{padding:0;overflow:hidden}
.interlude .arch{border-radius:var(--sheet) var(--sheet) 0 0;aspect-ratio:auto;height:clamp(420px,78svh,820px);background:#151311}
.interlude .arch img{object-position:center 45%}
.interlude__line{position:absolute;left:max(var(--pad),calc((100% - var(--wrap)) / 2));right:max(var(--pad),calc((100% - var(--wrap)) / 2));bottom:clamp(40px,7vw,96px);z-index:2;color:var(--nude);font-size:clamp(2.6rem,7vw,7rem);letter-spacing:-.03em;line-height:.96;font-weight:300;font-variation-settings:"opsz" 144;text-shadow:0 2px 40px rgba(0,0,0,.25)}
.interlude::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);pointer-events:none;z-index:1}

/* Finder: three taps, one honest answer */
.finder__box{position:relative;min-height:360px}
.finder__bar{height:2px;background:var(--line);margin-bottom:44px;position:relative;overflow:hidden}
.finder__bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--fg);transition:width .6s var(--ease)}
.finder__step{display:none}
.finder__step.is-on{display:block;animation:finderIn .55s var(--ease)}
@keyframes finderIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.finder__q{font-size:clamp(1.8rem,3.4vw,3.2rem);margin-bottom:28px;max-width:20em}
.finder__opts{display:flex;flex-wrap:wrap;gap:10px 12px}
.finder__opts button{border:1px solid var(--fg);border-radius:999px;padding:14px 22px;font-size:1rem;font-weight:500;line-height:1.2;text-align:left;position:relative;isolation:isolate;overflow:hidden;transition:color .35s var(--ease)}
.finder__opts button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:translateY(101%);transition:transform .45s var(--ease)}
.finder__opts button:hover,.finder__opts button:focus-visible{color:var(--bg)}
.finder__opts button:hover::before,.finder__opts button:focus-visible::before{transform:none}
.finder__nav{display:flex;justify-content:space-between;align-items:center;margin-top:36px;font-size:.9375rem}
.finder__nav button{color:var(--fg-2)}
.finder__nav button:hover{color:var(--fg)}
.finder__result.is-on{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px 64px;align-items:start}
.finder__result .h3{font-size:clamp(2rem,4vw,3.6rem);margin:6px 0 18px}
.finder__kicker{font-size:.875rem;color:var(--fg-2)}
.finder__why{font-size:1.125rem;max-width:32em;margin-bottom:24px}
.finder__meta{display:grid;grid-template-columns:repeat(3,auto);gap:16px 32px;justify-content:start;margin-bottom:26px}
.finder__meta dt{font-size:.8125rem;color:var(--fg-2);margin-bottom:4px}
.finder__meta dd{font-family:var(--font-display);font-size:1.35rem;line-height:1.1}
.finder__skip{padding:22px 26px;background:var(--hl);color:var(--fg);font-size:1rem;line-height:1.5;max-width:30em;border-radius:18px}
.finder__skip b{display:block;font-weight:500;margin-bottom:6px}
@media (max-width:800px){.finder__result.is-on{grid-template-columns:1fr}.finder__meta{grid-template-columns:1fr 1fr}}

/* Numbers */
.numbers__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid var(--line);padding-top:40px}
.numbers__grid b{display:block;font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(3.6rem,7.5vw,8rem);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.numbers__grid span{display:block;margin-top:12px;font-size:1rem;color:var(--fg-2);max-width:14em}
.numbers__partners{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);font-size:1rem;line-height:1.6;max-width:52em;color:var(--fg-2)}
.numbers__partners b{color:var(--fg);font-weight:500}
@media (max-width:900px){.numbers__grid{grid-template-columns:1fr 1fr}}

/* Prices: the same figures as /pricing, with a member switch */
.prices__toggle{display:flex;align-items:center;gap:14px;font-size:.9375rem;margin-bottom:28px}
.switch{width:54px;height:30px;border-radius:999px;border:1px solid var(--fg);position:relative;background:transparent;transition:background .35s}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--fg);transition:transform .4s var(--ease),background .35s}
.switch[aria-checked="true"]{background:var(--fg)}
.switch[aria-checked="true"] i{transform:translateX(24px);background:var(--bg)}
.prices__toggle span{color:var(--fg-2)}
.prices__toggle.is-member span:last-child,.prices__toggle:not(.is-member) span:first-child{color:var(--fg);font-weight:500}
.prices__list{border-top:1px solid var(--fg);columns:2;column-gap:64px}
.prices__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;padding:18px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.prices__name{font-family:var(--font-display);font-size:1.4rem;line-height:1.1}
.prices__note{grid-column:1;font-size:.9375rem;color:var(--fg-2)}
.prices__amt{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--font-display);font-size:1.6rem;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s}
.prices__amt.is-member{color:#7A6A57}
html[data-scheme="dark"] .prices__amt.is-member{color:#CDBEAA}
.prices__fine{margin-top:28px;font-size:.9375rem;color:var(--fg-2);max-width:48em}
.prices__fine a{border-bottom:1px solid currentColor}
@media (max-width:800px){.prices__list{columns:1}}

/* Booking: a slide-over that holds the clinic's real scheduler (Aesthetic
   Record), loaded the first time it opens. Every Book button opens it; without
   JS they still go to /book/. */
.book{position:fixed;inset:0;z-index:80;visibility:hidden}
html.book-open .book{visibility:visible}
html.book-open,html.book-open body{overflow:hidden}
.book__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .5s var(--ease)}
html.book-open .book__scrim{opacity:1}
.book__panel{position:absolute;top:0;right:0;bottom:0;width:min(600px,100%);background:var(--nude);color:var(--black);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .7s var(--ease);--fg:var(--black);--bg:var(--nude);--fg-2:#4F4B45;--line:rgba(0,0,0,.3)}
html[data-scheme="dark"] .book__panel{background:var(--dark-b);color:var(--nude);--fg:var(--nude);--bg:var(--dark-b);--fg-2:#C6C0B6;--line:rgba(236,231,223,.25)}
html.book-open .book__panel{transform:none}
.book__head{padding:clamp(22px,3vw,36px) clamp(22px,3.5vw,44px) 20px;padding-right:calc(clamp(22px,3.5vw,44px) + 40px);border-bottom:1px solid var(--line);flex:none}
.book__close{position:absolute;top:18px;right:18px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);transition:background .3s,color .3s}
.book__close:hover{background:var(--fg);color:var(--bg)}
.book__close svg{width:16px;height:16px}
.book__close path{stroke:currentColor;stroke-width:1.5;fill:none}
.book__kicker{font-size:.875rem;color:var(--fg-2)}
.book__panel .h3{font-size:clamp(1.8rem,3vw,2.5rem);margin:6px 0 10px}
.book__alt{font-size:.875rem;color:var(--fg-2)}
.book__alt a{border-bottom:1px solid currentColor;color:var(--fg)}
.book__frame{flex:1;min-height:0;background:#fff;position:relative}
.book__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.book__frame::before{content:"Loading the scheduler\2026";position:absolute;inset:0;display:grid;place-items:center;font-size:.875rem;color:#6b6560}
.book__frame.is-loaded::before{display:none}



/* ============================================================
   INNER PAGES — opener, breadcrumb, group eyebrow
   The homepage has the aperture; every other page opens here: same
   column, same type, no pin.
   ============================================================ */
.opener{padding-top:calc(clamp(88px,11vw,168px) + var(--sheet) + 56px)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.8125rem;color:var(--fg-2);margin-bottom:clamp(28px,4vw,44px)}
.crumbs a{position:relative;padding-bottom:2px}
.crumbs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.crumbs a:hover::after{transform:scaleX(1);transform-origin:left}
.opener__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,88px);align-items:end}
.opener .h2{font-size:clamp(2.8rem,6.4vw,6rem)}
.opener .lead{margin-top:26px}
.group__eyebrow{font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin-bottom:18px}
@media (max-width:900px){.opener__grid{grid-template-columns:1fr;align-items:start}.opener .lead{margin-top:20px}}
/* Above the fold nothing waits on a script or a font. The opener rises in on
   its own clock from first paint; the scroll reveals take over below it.
   (Gated behind the reveal script, the opener paragraph was the largest paint
   on a phone and arrived after almost six seconds.) */
.opener .crumbs,.opener .h2,.opener .lead,.opener .proof,.opener .actions,.opener__index{animation:rise .8s var(--ease) both}
.opener .h2{animation-delay:.04s}
.opener .lead{animation-delay:.1s}
.opener .proof,.opener__index{animation-delay:.16s}
.opener .actions{animation-delay:.22s}
.opener .fade{opacity:1;transform:none;transition:none}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============================================================
   COMPARE — before and after on one face
   The clinic's before/after files are composites: before on the left
   half, after on the right (rha-ba is a 2x2 of two views). One image is
   drawn twice, each copy showing its half, and the "after" copy is
   clipped at the divider. --y picks the vertical crop, 0 top to 1 bottom;
   --ov is how much of the image overflows the frame, set by its shape.
   ============================================================ */
.cmp{--pos:50%;--p:50;--y:.35;--ov:.375;position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  border-radius:20px 20px 4px 4px;background:var(--hl);isolation:isolate;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.cmp--square{aspect-ratio:1;--ov:.5}
.cmp__img{position:absolute;top:0;width:200%;max-width:none;height:auto;pointer-events:none;-webkit-user-drag:none;
  transform:translateY(calc(var(--y) * var(--ov) * -100%))}
.cmp__img--before{left:0}
.cmp__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.cmp__img--after{left:-100%}
.cmp__line{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:1px;margin-left:-.5px;background:rgba(255,255,255,.92);pointer-events:none}
.cmp__knob{position:absolute;z-index:3;top:50%;left:var(--pos);width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  display:grid;place-items:center;background:rgba(236,231,223,.9);color:var(--black);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
  pointer-events:none;transition:transform .5s var(--ease)}
.cmp:hover .cmp__knob,.cmp.is-drag .cmp__knob{transform:scale(1.1)}
.cmp__knob svg{width:20px;height:20px}
.cmp__knob path{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cmp__lbl{position:absolute;z-index:2;bottom:14px;padding:7px 11px 6px;border-radius:999px;font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.cmp__lbl--b{left:14px;opacity:clamp(0,calc((var(--p) - 14) / 10),1)}
.cmp__lbl--a{right:14px;opacity:clamp(0,calc((86 - var(--p)) / 10),1)}
/* The range input is the keyboard and screen-reader control; the pointer drives the frame. */
.cmp__range{position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none}
.cmp:has(.cmp__range:focus-visible){outline:2px solid currentColor;outline-offset:5px}

/* Proof: a short row of verified figures under an opener */
.proof{display:flex;flex-wrap:wrap;gap:18px 40px;margin:34px 0 36px;padding-top:24px;border-top:1px solid var(--line)}
.proof li{display:flex;flex-direction:column;gap:4px}
.proof b{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(2.2rem,3.4vw,3rem);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof span{font-size:.875rem;color:var(--fg-2)}

/* Perks: a quiet list of named benefits (memberships, treatment pages) */
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,56px);border-top:1px solid var(--line)}
.perks li{padding:28px 0;border-bottom:1px solid var(--line)}
.perks b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.01em;margin-bottom:10px}
.perks span{color:var(--fg-2);max-width:26em;display:block}
@media (min-width:981px) and (max-width:1200px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.perks{grid-template-columns:1fr}}

/* Principles: three numbered columns (results, memberships, about) */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(28px,4vw,56px);border-top:1px solid var(--fg);padding-top:34px}
.principles__n{display:block;font-family:var(--font-display);font-style:italic;font-size:2rem;line-height:1;color:var(--fg-2);margin-bottom:22px}
.principles h3{margin-bottom:12px}
.principles p{max-width:30em;color:var(--fg-2)}
@media (max-width:900px){.principles{grid-template-columns:1fr}}

/* A case: a compare frame and its caption */
.case{margin:0}
.case__cap{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.case__n{font-size:.8125rem;color:var(--fg-2);font-variant-numeric:tabular-nums}
.case__name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.015em;line-height:1.1}
.case__view{font-size:.8125rem;color:var(--fg-2);text-align:right;white-space:nowrap}
.case__more{grid-column:2 / -1;justify-self:start;margin-top:10px;font-size:.875rem}

/* A clip: portrait patient video in a rail */
/* The clinic's clips are 9:16 letterboxes with the picture in the middle band.
   A square window over object-fit: cover shows that band and nothing else, and
   at this size a 360px-wide file is shown at its own resolution. */
.clip{flex:0 0 min(290px,70vw);scroll-snap-align:start;margin:0}
.clip__frame{position:relative;aspect-ratio:1;overflow:hidden;border-radius:18px 18px 4px 4px;background:#000}
.clip__frame video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.clip__tag{position:absolute;z-index:1;left:12px;bottom:12px;font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.clip .case__name{font-size:1.2rem}


/* ============================================================
   PRICE ROWS — /pricing/ and every treatment page
   ============================================================ */
.ptable__label{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);margin:0 0 6px}
.ptable + .ptable__label,.ptable + .ptable__cols{margin-top:40px}
.ptable__cols{display:grid;grid-template-columns:minmax(0,1fr) 7rem 9.5rem;gap:0 16px;padding:0 0 10px;font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.ptable__cols span:first-child{grid-column:2;text-align:right}
.ptable__cols span:last-child{text-align:right}
.ptable{border-top:1px solid var(--line)}
.ptable + .ptable{margin-top:40px}

.prow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line)}
.prow--m{grid-template-columns:minmax(0,1fr) 7rem 9.5rem}
.prow::before{content:"";position:absolute;inset:0 -14px;z-index:-1;border-radius:12px;background:var(--hl);opacity:0;transition:opacity .3s var(--ease)}
@media (hover:hover){.prow:hover::before{opacity:.45}}
.prow__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.prow__name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.12rem,1.5vw,1.3rem);letter-spacing:-.01em;line-height:1.2}
.prow__note{font-size:.8125rem;color:var(--fg-2)}
.prow__amt{font-family:var(--font-display);font-weight:400;font-size:clamp(1.12rem,1.5vw,1.3rem);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.prow__amt--m{color:#7A6A57}
html[data-scheme="dark"] .prow__amt--m{color:#CDBEAA}
.prow__badge{justify-self:end;font-size:.75rem;font-weight:500;letter-spacing:.01em;text-align:center;line-height:1.25;white-space:nowrap;padding:6px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg-2)}
.prow__more{grid-column:1 / -1;margin-top:4px}
.prow__q{list-style:none;display:inline-flex;align-items:center;gap:10px;font-size:.875rem;color:var(--fg-2);cursor:pointer;transition:color .3s}
.prow__q::-webkit-details-marker{display:none}
.prow__q:hover{color:var(--fg)}
.prow__q .plus{width:12px;height:12px}
.prow__a{margin:10px 0 4px;max-width:42em;font-size:.9375rem;line-height:1.6;color:var(--fg-2);animation:faqin .45s var(--ease)}

@media (max-width:560px){
  .prow--m,.ptable__cols{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px}
  .prow__badge{font-size:.6875rem;padding:5px 8px}
}

/* ============================================================
   ARTICLES — long-form reading
   ============================================================ */
.progress{position:fixed;left:0;top:0;z-index:70;width:100%;height:2px;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line)}
.article-open .opener__grid{grid-template-columns:minmax(0,1fr)}
.article-open .h2{font-size:clamp(2.4rem,5vw,4.8rem);max-width:17em;margin-top:22px}
.article-open .lead{max-width:40em}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:30px;animation:rise .8s var(--ease) .2s both}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.byline b{display:block;font-weight:500;font-size:.9375rem}
.byline span{font-size:.875rem;color:var(--fg-2)}
.feature{margin:clamp(40px,5vw,64px) 0 0;animation:rise .9s var(--ease) .24s both}
.feature img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:28px 28px 8px 8px;background:var(--hl)}

.read{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,43rem);gap:clamp(32px,7vw,120px);justify-content:center;align-items:start}
.toc{position:sticky;top:120px;max-height:calc(100svh - 160px);overflow:auto;scrollbar-width:none}
.toc__label{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);margin-bottom:14px}
.toc ol{border-left:1px solid var(--line)}
.toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:1px solid transparent;font-size:.875rem;line-height:1.35;color:var(--fg-2);transition:color .3s,border-color .3s}
.toc a:hover{color:var(--fg)}
.toc a.is-on{color:var(--fg);border-left-color:var(--fg)}
@media (max-width:1040px){.read{grid-template-columns:minmax(0,43rem)}.toc{display:none}}

.prose{font-size:1.125rem;line-height:1.75;color:color-mix(in srgb,var(--fg) 88%,var(--bg))}
.prose > * + *{margin-top:1.15em}
.prose h2{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(1.85rem,2.8vw,2.4rem);line-height:1.1;letter-spacing:-.02em;color:var(--fg);margin-top:2.1em;scroll-margin-top:110px;text-wrap:balance}
.prose h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--fg);margin-top:1.8em;text-wrap:balance}
.prose h4{font-size:1rem;font-weight:600;color:var(--fg);margin-top:1.6em}
.prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:.6em}
.prose a:not(.btn){color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .3s}
.prose a:not(.btn):hover{text-decoration-color:currentColor}
.prose strong,.prose b{font-weight:600;color:var(--fg)}
.prose ul{list-style:disc;padding-left:1.25em}
.prose ol{list-style:decimal;padding-left:1.35em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--fg-2)}
.prose figure{margin:2.2em 0}
.prose img{display:block;width:100%;height:auto;border-radius:18px;background:var(--hl)}
.prose figcaption{margin-top:10px;font-size:.8125rem;line-height:1.5;color:var(--fg-2)}
.fig__note{display:block;font-style:italic}
.prose figcaption .fig__note:not(:first-child){margin-top:2px}
.prose blockquote{padding-left:1.1em;border-left:2px solid var(--fg);font-family:var(--font-display);font-size:1.4rem;line-height:1.4;color:var(--fg)}
.prose table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.9375rem;line-height:1.45;font-variant-numeric:tabular-nums}
.prose th{padding:0 12px 10px 0;border-bottom:1px solid var(--fg);text-align:left;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.prose td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th:not(:first-child),.prose td:not(:first-child){text-align:right;white-space:nowrap}
.prose .table-wrap{overflow-x:auto}
.prose > p:last-child .btn{margin-top:8px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* The mid-article pause: one quiet card that points at the treatment */
.aside-cta{margin:2.6em 0;padding:clamp(24px,3vw,36px);border-radius:24px 24px 8px 8px;background:var(--black);color:var(--nude);--fg:var(--nude);--bg:var(--black);--fg-2:#C6C0B6}
html[data-scheme="dark"] .aside-cta{background:var(--nude);color:var(--black);--fg:var(--black);--bg:var(--nude);--fg-2:#4F4B45}
.aside-cta p{margin:0;color:var(--fg-2);font-size:1rem;line-height:1.55}
.aside-cta .aside-cta__title{font-family:var(--font-display);font-size:1.6rem;line-height:1.15;color:var(--fg);margin-bottom:8px}
.aside-cta .actions{margin-top:20px}
.aside-cta .btn{height:48px}
.aside-cta__label{font-size:.6875rem!important;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px!important}
.prose .aside-cta h2.aside-cta__title{margin:0 0 8px;font-size:1.6rem;line-height:1.15;color:var(--fg)}

/* A provider's note inside prose (treatment and article pages) */
.provider-note{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;margin:1.6em 0;padding-top:20px;border-top:1px solid var(--line);font-size:.875rem;color:var(--fg-2)}
.provider-note img{grid-row:1 / span 3;width:56px;height:56px;border-radius:50%;object-fit:cover}
.provider-note__label{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.provider-note__name{font-family:var(--font-display);font-size:1.15rem;color:var(--fg);margin:0}
.provider-note__text{grid-column:2;margin:0}

/* Author */
.author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 28px;align-items:start;max-width:52rem;margin-inline:auto;padding-top:28px;border-top:1px solid var(--fg)}
.author img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.author__label{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2)}
.author__name{font-family:var(--font-display);font-size:1.7rem;line-height:1.1;margin:6px 0 4px}
.author__role{font-size:.875rem;color:var(--fg-2);margin-bottom:12px}
.author__bio{color:var(--fg-2);max-width:40em}
.author .tlink{margin-top:14px}
@media (max-width:560px){.author{grid-template-columns:1fr}}

/* A list of links, each a name, a line and an arrow (related treatments, reading lists) */
.linklist{border-top:1px solid var(--fg)}
.linklist a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:2px 16px;align-items:center;padding:18px 2px;border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease)}
.linklist a:hover{padding-left:12px}
.linklist b{grid-column:1;font-family:var(--font-display);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.01em;line-height:1.15}
.linklist span{grid-column:1;font-size:.875rem;color:var(--fg-2)}
.linklist svg{grid-column:2;grid-row:1 / span 2;width:18px;height:18px;transition:transform .5s var(--ease)}
.linklist path{stroke:currentColor;fill:none;stroke-width:1.5}
.linklist a:hover svg{transform:translate(4px,-4px)}

/* Article cards: the blog index and "keep reading" */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(20px,3vw,40px)}
.card{display:flex;flex-direction:column;gap:14px}
.card__img{aspect-ratio:16/10;overflow:hidden;border-radius:20px 20px 4px 4px;background:var(--hl)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover){.card:hover .card__img img{transform:scale(1.045)}}
/* When an article's picture is missing, the card still holds its shape */
.card__img--none{display:grid;place-items:end start;padding:18px;background:linear-gradient(135deg,var(--hl),color-mix(in srgb,var(--hl) 55%,var(--bg)))}
.card__img--none span{font-family:var(--font-display);font-style:italic;font-size:1.5rem;line-height:1;color:var(--fg-2)}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.8125rem;color:var(--fg-2)}
.card__cat{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg)}
.card__title{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.card__title span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
@media (hover:hover){.card:hover .card__title span{background-size:100% 1px}}
.card__excerpt{font-size:.9375rem;line-height:1.55;color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* ============================================================
   COOKIE CONSENT — Vellum dress for /js/consent.js
   The markup comes from the shared consent manager (.cc-banner,
   .cc-modal, .cc-toggle). The site-wide css/consent.css still styles it on
   every other page; these rules load after it and restate the parts that
   carry the theme — a floating card rather than a full-width bar, pill
   buttons with the same fill-up hover as the rest of the page, and the
   preference switches drawn like the member-pricing switch. Move this block
   into css/consent.css on the day the whole site moves to this theme.
   ============================================================ */
.cc-banner{position:fixed;z-index:70;left:var(--pad);right:auto;bottom:clamp(16px,3vw,40px);
  width:min(560px,calc(100vw - var(--pad) * 2));
  background:var(--nude);color:var(--black);border:0;border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 26px 60px -30px rgba(0,0,0,.5);
  transform:translateY(calc(100% + clamp(16px,3vw,40px)));opacity:1;
  transition:transform .7s var(--ease),opacity .4s var(--ease)}
.cc-banner--visible{transform:none}
html[data-scheme="dark"] .cc-banner{background:var(--dark-b);color:var(--nude);
  box-shadow:inset 0 0 0 1px rgba(236,231,223,.16),0 26px 60px -30px rgba(0,0,0,.8)}
.cc-banner__inner{width:auto;margin:0;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:20px;align-items:stretch}
.cc-banner__title{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;
  font-size:1.5rem;letter-spacing:-.02em;line-height:1.1;color:inherit;margin-bottom:8px}
.cc-banner__desc{font-family:var(--font-sans);font-size:.9375rem;line-height:1.55;color:inherit;opacity:.78;margin-bottom:14px;max-width:38em}
.cc-banner__links{display:flex;flex-wrap:wrap;gap:8px 22px}
.cc-banner__links a{position:relative;font-size:.8125rem;font-weight:500;color:inherit;opacity:.72;text-decoration:none;padding-bottom:2px}
.cc-banner__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;transition:transform .45s var(--ease)}
.cc-banner__links a:hover{opacity:1}
.cc-banner__links a:hover::after{transform:scaleX(0)}
.cc-banner__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
@media (min-width:768px){.cc-banner__actions{flex-direction:row;min-width:0}}

/* Buttons: the page's own pills, including the fill that rises on hover */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  height:48px;padding:0 24px;font-family:var(--font-sans);font-size:.875rem;font-weight:500;
  letter-spacing:.005em;line-height:1;white-space:nowrap;border-radius:999px;
  position:relative;isolation:isolate;overflow:hidden;border:1px solid currentColor;
  transition:color .4s var(--ease)}
.cc-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .5s var(--ease)}
.cc-btn:hover::before,.cc-btn:focus-visible::before{transform:translateY(0)}
.cc-btn--primary{background:var(--black);color:var(--nude);border-color:var(--black)}
.cc-btn--primary::before{background:var(--nude)}
.cc-btn--primary:hover,.cc-btn--primary:focus-visible{color:var(--black);box-shadow:none;transform:none}
html[data-scheme="dark"] .cc-btn--primary{background:var(--nude);color:var(--black);border-color:var(--nude)}
html[data-scheme="dark"] .cc-btn--primary::before{background:var(--dark-b)}
html[data-scheme="dark"] .cc-btn--primary:hover,html[data-scheme="dark"] .cc-btn--primary:focus-visible{color:var(--nude)}
.cc-btn--secondary{background:transparent;color:inherit;border-color:currentColor}
.cc-btn--secondary::before{background:currentColor}
.cc-btn--secondary:hover,.cc-btn--secondary:focus-visible{color:var(--nude)}
html[data-scheme="dark"] .cc-btn--secondary:hover,html[data-scheme="dark"] .cc-btn--secondary:focus-visible{color:var(--dark-b)}
.cc-btn--link{height:auto;padding:10px 2px;border:0;border-radius:0;background:none;color:inherit;opacity:.72;text-decoration:none;overflow:visible}
.cc-btn--link::before{display:none}
.cc-btn--link:hover{opacity:1;color:inherit;text-decoration:underline;text-underline-offset:4px}
@media (max-width:520px){.cc-banner__actions .cc-btn--primary,.cc-banner__actions .cc-btn--secondary{flex:1 1 100%}}
@media (max-width:767px){.cc-banner{bottom:calc(60px + env(safe-area-inset-bottom) + 14px);left:14px;width:calc(100vw - 28px)}}

/* Preferences */
.cc-overlay{position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.5);opacity:0;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity .4s var(--ease)}
.cc-overlay--visible{opacity:1}
.cc-modal{position:fixed;z-index:95;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);
  width:min(600px,calc(100vw - var(--pad)));max-height:min(86svh,860px);overflow:auto;
  background:var(--nude);color:var(--black);border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 40px 90px -40px rgba(0,0,0,.6);
  opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.cc-modal--visible{transform:translate(-50%,-50%) scale(1);opacity:1}
html[data-scheme="dark"] .cc-modal{background:var(--dark-b);color:var(--nude);box-shadow:inset 0 0 0 1px rgba(236,231,223,.16),0 40px 90px -40px rgba(0,0,0,.9)}
.cc-modal__inner{padding:clamp(26px,3.5vw,42px)}
.cc-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border:0;padding:0;margin-bottom:10px}
.cc-modal__title{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(1.7rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1.05;color:inherit;margin:0}
.cc-modal__close{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid currentColor;background:none;color:inherit;font-size:1.25rem;line-height:1;opacity:.6;
  transition:opacity .3s,background .3s,color .3s}
.cc-modal__close:hover{opacity:1;background:currentColor;color:var(--nude)}
html[data-scheme="dark"] .cc-modal__close:hover{color:var(--dark-b)}
.cc-modal__desc{font-family:var(--font-sans);font-size:.9375rem;line-height:1.55;color:inherit;opacity:.78;margin:0 0 26px;max-width:42em}
.cc-pref__list{border-top:1px solid var(--line)}
.cc-pref__item{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--line);background:none}
.cc-pref__item-label{display:block;font-family:var(--font-sans);font-size:1rem;font-weight:500;color:inherit;margin-bottom:5px}
.cc-pref__item-desc{display:block;font-size:.875rem;line-height:1.5;color:inherit;opacity:.72;max-width:36em}
.cc-pref__always-on{flex:none;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:inherit;opacity:.6;padding:8px 12px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.cc-toggle{flex:none;display:block;position:relative}
.cc-toggle input{position:absolute;opacity:0;width:0;height:0}
.cc-toggle__track{display:block;width:54px;height:30px;border-radius:999px;border:1px solid currentColor;background:transparent;transition:background .35s var(--ease)}
.cc-toggle__knob{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:currentColor;transition:transform .4s var(--ease),background .35s var(--ease)}
.cc-toggle input:checked + .cc-toggle__track{background:currentColor}
.cc-toggle input:checked + .cc-toggle__track .cc-toggle__knob{transform:translateX(24px);background:var(--nude)}
html[data-scheme="dark"] .cc-toggle input:checked + .cc-toggle__track .cc-toggle__knob{background:var(--dark-b)}
.cc-toggle input:focus-visible + .cc-toggle__track{outline:2px solid currentColor;outline-offset:3px}
.cc-modal__footer{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;margin-top:28px}
@media (max-width:520px){.cc-modal__footer .cc-btn{flex:1 1 100%}}

/* ============================================================
   BACK TO TOP
   A small ring whose stroke fills with scroll progress, so it doubles as a
   position indicator. Appears once past the hero, sits clear of the mobile
   action bar.
   ============================================================ */
.totop{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:45;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--nude);color:var(--black);
  box-shadow:0 6px 28px -8px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease),background .4s,color .4s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
html[data-scheme="dark"] .totop{background:var(--nude);color:var(--black)}
.totop:hover{background:var(--black);color:var(--nude)}
html[data-scheme="dark"] .totop:hover{background:#2A2622;color:var(--nude)}
.totop svg.arrow{width:17px;height:17px;position:relative;z-index:1;transition:transform .45s var(--ease)}
.totop:hover svg.arrow{transform:translateY(-3px)}
.totop svg.arrow path{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.totop .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke-width:1.5}
.totop .ring .bg{stroke:currentColor;opacity:.16}
.totop .ring .fg{stroke:currentColor;stroke-linecap:round;
  stroke-dasharray:var(--c,161);stroke-dashoffset:calc(var(--c,161) - var(--c,161) * var(--p,0));
  transition:stroke-dashoffset .12s linear}
@media (max-width:767px){.totop{bottom:calc(60px + env(safe-area-inset-bottom) + 14px)}}
/* With Cherry's floating estimator in the corner (see vellum.js), back-to-top
   stacks above it on desktop; on phones the estimator sits bottom left at
   back-to-top's height, and this adds the notch's safe area that Cherry's
   pixel offsets cannot express. */
@media (min-width:768px){html.has-cherry .totop{right:32px;bottom:96px}}
@media (max-width:767px){[class*="floatingEstimator-floatingContainer"]{bottom:calc(74px + env(safe-area-inset-bottom))!important}}
@media (prefers-reduced-motion:reduce){.totop,.totop svg.arrow{transition-duration:.001ms}}

.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;grid-template-columns:1fr 1.4fr;background:var(--black);color:var(--nude);transform:translateY(100%);transition:transform .5s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.mbar.on{transform:none}
.mbar a{display:flex;align-items:center;justify-content:center;height:60px;font-size:.9375rem;font-weight:500}
.mbar a + a{background:var(--nude);color:var(--black)}
@media (max-width:767px){.mbar{display:grid}}

/* ============================================================
   SHARED PAGE PARTS
   Components that began on one page and are now used by several.
   ============================================================ */
/* Tiers: plan cards; the featured one is inverted and lifted (memberships, VIP) */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);border-radius:28px 28px 8px 8px;
  background:var(--powder);color:var(--black);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
@media (hover:hover){.tier:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 30px 60px -40px rgba(0,0,0,.45)}}
.tier--featured{background:var(--black);color:var(--nude);box-shadow:none;transform:translateY(-14px)}
@media (hover:hover){.tier--featured:hover{transform:translateY(-20px)}}
html[data-scheme="dark"] .tier{background:#1d1a17;color:var(--nude);box-shadow:inset 0 0 0 1px rgba(236,231,223,.14)}
html[data-scheme="dark"] .tier--featured{background:var(--nude);color:var(--black)}
.tier__badge{position:absolute;top:22px;right:22px;font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:7px 11px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor}
.tier__name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,2.4vw,2.2rem);letter-spacing:-.02em;line-height:1}
.tier__price{display:flex;align-items:baseline;gap:6px;margin:22px 0 26px;padding-bottom:24px;border-bottom:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent)}
.tier__price b{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(3.4rem,5.4vw,4.8rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tier__price span{font-size:.9375rem;opacity:.7}
.tier__list{display:grid;gap:12px;margin-bottom:32px}
.tier__list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;align-items:start;font-size:.9375rem;line-height:1.45}
.tier__tick{width:16px;height:16px;margin-top:.15em;opacity:.7}
.tier__tick path{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tier__join{margin-top:auto;width:100%}
.tier--featured .tier__join{--fg:var(--nude);--bg:var(--black)}
html[data-scheme="dark"] .tier--featured .tier__join{--fg:var(--black);--bg:var(--nude)}
.tier:not(.tier--featured) .tier__join{--fg:var(--black);--bg:var(--powder)}
html[data-scheme="dark"] .tier:not(.tier--featured) .tier__join{--fg:var(--nude);--bg:#1d1a17}
.tiers__more{margin-top:clamp(36px,4vw,52px);text-align:center;color:var(--fg-2);font-size:.9375rem}
/* Terms: three columns of the small print, made readable */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(28px,4vw,56px);border-top:1px solid var(--fg);padding-top:30px}
.terms__title{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin-bottom:16px}
.terms li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.55}
.terms li strong{font-weight:500}
@media (max-width:980px){
  .tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .tier--featured{transform:none}
  .terms{grid-template-columns:1fr}
}

/* Team: three portraits, the middle one dropped for rhythm */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(24px,4vw,56px);align-items:start}
@media (min-width:901px){.people > .person:nth-child(2){margin-top:clamp(40px,6vw,96px)}}
.person__photo{aspect-ratio:4/5;margin-bottom:22px}
.person__photo img{object-position:center 18%}
/* A team member whose photo hasn't been taken yet: initials in the same frame, never a stand-in photo. */
.person__photo--none{display:grid;place-items:center}
.person__initials{font-family:var(--font-display);font-weight:400;font-size:clamp(3.5rem,7vw,6rem);letter-spacing:.02em;color:var(--fg-2);opacity:.55}
.person__role{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);margin-bottom:8px}
.person__name{margin-bottom:14px}
.person__bio{color:var(--fg-2);margin-bottom:18px;max-width:30em}
/* Values: four large numbered lines */
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,80px);border-top:1px solid var(--line)}
.values li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:6px 12px;padding:30px 0;border-bottom:1px solid var(--line)}
.values__n{grid-row:1 / span 2;font-size:.8125rem;color:var(--fg-2);font-variant-numeric:tabular-nums;padding-top:.7em}
.values h3{font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(1.8rem,3.2vw,2.8rem);letter-spacing:-.025em;line-height:1.05}
.values p{color:var(--fg-2);max-width:30em}
@media (max-width:900px){.people,.values{grid-template-columns:1fr}}

/* Reach: the ways to get in touch, as large rows (contact, book) */
.reach{animation:rise .8s var(--ease) .16s both}
.reach__label{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);margin-bottom:10px}
.reach__list{border-top:1px solid var(--fg)}
.reach__list a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:2px 16px;align-items:center;padding:18px 2px;border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease)}
.reach__list a:hover{padding-left:12px}
.reach__k{grid-column:1;font-size:.8125rem;color:var(--fg-2)}
.reach__v{grid-column:1;font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere}
.reach__arrow{grid-column:2;grid-row:1 / span 2;width:20px;height:20px;transition:transform .5s var(--ease)}
.reach__arrow path{stroke:currentColor;fill:none;stroke-width:1.5}
.reach__list a:hover .reach__arrow{transform:translate(4px,-4px)}
.reach__note{margin-top:16px;font-size:.875rem;line-height:1.55;color:var(--fg-2);max-width:34em}
/* Map: a quiet cover until someone asks for Google */
.map__sub{margin-top:14px;color:var(--fg-2);max-width:34em}
.map{position:relative;overflow:hidden;border-radius:28px 28px 8px 8px;min-height:clamp(360px,48vw,560px);
  background:radial-gradient(120% 90% at 80% 10%,#2a2521 0%,#151311 55%,#0d0c0b 100%);box-shadow:inset 0 0 0 1px var(--line)}
.map::before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:linear-gradient(rgba(236,231,223,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(236,231,223,.5) 1px,transparent 1px);background-size:56px 56px;
  mask-image:radial-gradient(80% 70% at 70% 40%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(80% 70% at 70% 40%,#000 0%,transparent 75%)}
.map__cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;min-height:inherit;padding:clamp(28px,4vw,56px)}
.map__addr{font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(2.4rem,5.6vw,5rem);line-height:.95;letter-spacing:-.03em}
.map__note{font-size:.875rem;color:var(--fg-2)}
.map__btn{--fg:var(--nude);--bg:var(--black)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.02)}
.map.is-loaded .map__cover{display:none}
.map.is-loaded{background:#e9e5de}

/* A section strip that rides under the header (pricing, FAQ) */
.pnav{position:sticky;top:78px;z-index:20;display:flex;justify-content:center;margin:0 0 clamp(36px,5vw,64px);transition:top .6s var(--ease)}
.nav.is-hidden ~ main .pnav{top:14px}
.pnav__in{display:flex;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:6px;border-radius:999px;
  background:var(--nav-bg);box-shadow:inset 0 0 0 1px var(--nav-line),0 18px 50px -30px rgba(0,0,0,.35);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.pnav__in::-webkit-scrollbar{display:none}
.pnav a{flex:none;padding:9px 15px;border-radius:999px;font-size:.875rem;letter-spacing:.01em;white-space:nowrap;color:var(--fg);transition:background .35s var(--ease),color .35s var(--ease)}
.pnav a:hover{background:var(--hl)}
.pnav a.is-on{background:var(--fg);color:var(--bg)}
html[data-scheme="dark"] .pnav__in{background:rgba(21,19,17,.78)}
@media (max-width:900px){.pnav{top:70px}}

/* Financing cards (pricing, payment plans) */
.fin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.fin__card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:260px;padding:clamp(28px,3.5vw,44px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);transition:background .5s var(--ease)}
.fin__card:hover{background:rgba(236,231,223,.06)}
.fin__card .h3{font-size:clamp(1.8rem,3vw,2.6rem)}
.fin__card p{color:var(--fg-2);max-width:26em}
.fin__card .tlink{margin-top:auto;align-self:flex-start}
.fin__arrow{position:absolute;top:clamp(28px,3.5vw,44px);right:clamp(28px,3.5vw,44px);width:26px;height:26px;transition:transform .5s var(--ease)}
.fin__arrow path{stroke:currentColor;fill:none;stroke-width:1.4}
.fin__card:hover .fin__arrow{transform:translate(4px,-4px)}
@media (max-width:900px){.fin{grid-template-columns:1fr}}

/* Opener index: a short table of contents with a figure per line (pricing, packages) */
.pindex{border-top:1px solid var(--line);columns:1}
.pindex a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 2px;border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease)}
.pindex a:hover{padding-left:12px}
.pindex b{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;line-height:1.15}
.pindex i{font-style:normal;font-size:.8125rem;color:var(--fg-2);font-variant-numeric:tabular-nums}

/* ============================================================
   PROGRAMS, POLICIES, PEOPLE
   VIP, concierge, packages, payment plans, gift cards, shop, FAQ, reviews,
   booking, the policies, team profiles, sitemap and the 404.
   ============================================================ */
/* A portrait in the arch, with a caption rule under it */
.portrait{margin:0;justify-self:end;width:min(100%,460px);animation:rise .9s var(--ease) .12s both}
.portrait__frame{aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px 8px 8px;background:var(--hl)}
.portrait__frame img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.portrait figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--fg-2)}
@media (max-width:900px){.portrait{justify-self:stretch;width:100%;max-width:520px}}
.opener__grid--center{align-items:center}
.opener .lead + .actions{margin-top:34px}

/* Chips: a row of short true statements under an opener */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 34px;animation:rise .8s var(--ease) .16s both}
.chips li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:999px;font-size:.8125rem;color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line)}
.stars{color:var(--nude-deep);letter-spacing:.12em}
.rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:22px;font-size:.875rem;color:var(--fg-2);animation:rise .8s var(--ease) .26s both}
.rating a{position:relative;padding-bottom:2px}
.rating a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.4;transition:opacity .3s}
.rating a:hover::after{opacity:1}

/* Two reading columns under a larger first line (team profiles) */
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(28px,5vw,72px);margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--line);max-width:62em}
.cols2 p{font-size:1.0625rem;line-height:1.65;color:var(--fg-2)}
.perks--2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:900px){.cols2,.perks--2{grid-template-columns:1fr!important}}

/* Plan cards with more to say: a description, a note under the price, what
   is and is not included (VIP programs) */
.tier--detail .tier__badge{position:static;align-self:flex-start;margin-bottom:20px}
.tier__desc{margin-top:14px;font-size:.9375rem;line-height:1.55;opacity:.78;max-width:30em}
.tier--detail .tier__price{margin:26px 0 8px;padding-bottom:0;border-bottom:0}
.tier__note{font-size:.8125rem;opacity:.72;padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.tier__label{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.66;margin-bottom:14px}
.tier__list + .tier__label{margin-top:-6px}
.tier__list--no li{opacity:.6}
.tier__fine{font-size:.8125rem;line-height:1.55;opacity:.72;margin:-10px 0 28px}
.terms--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.terms--2{grid-template-columns:1fr}}

/* A definition list of named terms (concierge terms, event facts) */
.dlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);border-top:1px solid var(--fg)}
.dlist > div{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:6px 24px;padding:22px 0;border-bottom:1px solid var(--line)}
.dlist dt{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;line-height:1.2}
.dlist dd{margin:0;color:var(--fg-2)}
/* Profile pages: a pull quote in the person's own words, the framed diplomas
   shown whole (never cropped: they are the evidence), and two stacked lists. */
.profile__quote{margin-top:clamp(40px,5vw,64px);max-width:46em}
.profile__quote blockquote p{font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;letter-spacing:-.01em}
.profile__quote figcaption{margin-top:16px;font-size:.8125rem;color:var(--fg-2)}
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);align-items:start}
.creds__item{margin:0}
.creds__item img{display:block;width:100%;height:auto;border-radius:12px;background:var(--hl)}
.creds__item figcaption{display:grid;gap:4px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.creds__item figcaption b{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em}
.creds__item figcaption span{font-size:.875rem;color:var(--fg-2)}
.profile__lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px)}
.profile__listhead{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;color:var(--fg-2)}
.dlist--one{grid-template-columns:1fr}
@media (max-width:900px){.creds{grid-template-columns:1fr 1fr}.profile__lists{grid-template-columns:1fr}}
@media (max-width:600px){.creds{grid-template-columns:1fr}}
@media (max-width:900px){.dlist{grid-template-columns:1fr}}
@media (max-width:560px){.dlist > div{grid-template-columns:1fr}}

/* One price, said plainly, on an inverted band */
.priceband{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px clamp(28px,5vw,72px);align-items:center;margin-top:clamp(48px,6vw,80px);
  padding:clamp(28px,4vw,52px);border-radius:28px 28px 8px 8px;background:var(--black);color:var(--nude);--fg:var(--nude);--bg:var(--black);--fg-2:#C6C0B6;--line:rgba(236,231,223,.28)}
html[data-scheme="dark"] .priceband{background:var(--nude);color:var(--black);--fg:var(--black);--bg:var(--nude);--fg-2:#4F4B45;--line:rgba(0,0,0,.3)}
/* Inside a perks grid the band takes the last two cells of the row */
.perks--band .priceband{grid-column:span 2;grid-template-columns:auto minmax(0,1fr);align-self:center;margin:28px 0;padding:clamp(24px,3vw,40px);border-bottom:0}
.perks--band .priceband b{margin:0;font-size:clamp(3.6rem,6vw,5.6rem)}
.perks--band .priceband span{display:inline;max-width:none}
.perks--band .priceband h3{margin-bottom:6px}
@media (min-width:981px) and (max-width:1200px){.perks--band .priceband{grid-column:span 1;grid-template-columns:1fr}}
@media (max-width:980px){.perks--band .priceband{grid-column:auto;grid-template-columns:1fr}}
.priceband__amt{display:flex;align-items:baseline;gap:8px}
.priceband__amt b{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(4rem,8vw,7rem);line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.priceband__amt span{font-size:1rem;color:var(--fg-2)}
.priceband h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.01em;margin-bottom:8px}
.priceband p{color:var(--fg-2);max-width:34em}
@media (max-width:900px){.priceband{grid-template-columns:1fr;align-items:start}}

/* Packages: each bundle is a row — what it is, what is in it, what it costs */
.packs{border-top:1px solid var(--fg)}
.pack{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr) minmax(0,.55fr);gap:28px clamp(28px,5vw,80px);align-items:start;padding:clamp(44px,5vw,72px) 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.pack__n{display:block;font-size:.8125rem;color:var(--fg-2);font-variant-numeric:tabular-nums;margin-bottom:16px}
.pack__name{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(2.3rem,4.2vw,3.8rem);letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.pack__desc{color:var(--fg-2);max-width:36em}
.pack__desc a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .3s}
.pack__desc a:hover{text-decoration-color:currentColor}
.pack__label{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);margin:28px 0 8px}
.pack__list{border-top:1px solid var(--line)}
.pack__list li{padding:12px 0;border-bottom:1px solid var(--line)}
.pack__side{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pack__price{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(3rem,5vw,4.4rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media (max-width:980px){
  .pack{grid-template-columns:1fr;gap:22px}
  .pack__side{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%;padding-top:8px}
}

/* An embedded third-party tool, framed like the site's photographs */
.embed{position:relative;overflow:hidden;border-radius:28px 28px 8px 8px;background:#fff;color:#000;box-shadow:inset 0 0 0 1px var(--line)}
.embed iframe{position:relative;z-index:1;display:block;width:100%;height:clamp(720px,calc(100svh - 110px),1080px);border:0;background:transparent}
.embed__wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;font-size:.875rem;color:#4F4B45}
.embed__wait .btn{--fg:#000;--bg:#fff}
.embed.is-loaded .embed__wait{display:none}
.embed.is-loaded iframe{background:#fff}
.embed--widget{padding:clamp(12px,2vw,28px);min-height:560px}
.booking{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(28px,5vw,72px);align-items:start}
.booking__side{position:sticky;top:120px}
.booking__side .h3{margin-bottom:14px}
.booking__side p{color:var(--fg-2)}
.booking__side .actions{margin:26px 0 18px}
@media (max-width:980px){.booking{grid-template-columns:1fr}.booking__side{position:static}}

/* Financing partner cards: the simple pricing-page card, with a list */
.fin__card ul{display:grid;gap:10px;margin:6px 0 10px}
.fin__card li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;font-size:.9375rem;line-height:1.45}
.fin__card li svg{width:16px;height:16px;margin-top:.15em;opacity:.7}
.fin__card li path{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fin__tag{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.fin__card .actions{margin-top:auto;padding-top:14px}
.fin__note{font-size:.8125rem;color:var(--fg-2)}
/* Cherry is the clinic's primary financing partner: its card carries a solid
   badge on its top edge (out of the flow, so both cards' headings still line
   up) and a full-strength outline. */
.fin__card--primary{box-shadow:inset 0 0 0 1px var(--fg)}
.fin__badge{position:absolute;top:0;left:clamp(28px,3.5vw,44px);transform:translateY(-50%);font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1;padding:7px 11px 6px;border-radius:999px;background:var(--fg);color:var(--bg)}

/* Reviews, all of them at once: a wall rather than a rail */
.wall{columns:3 300px;column-gap:clamp(28px,4vw,64px)}
.wall .review{display:flex;break-inside:avoid;width:auto;margin:0 0 clamp(36px,4vw,56px);padding:3.4rem 0 26px;border-bottom:1px solid var(--line)}
.wall .review:nth-child(3n+1) .review__q{font-size:clamp(1.35rem,1.9vw,1.75rem)}
.score{display:flex;align-items:flex-end;gap:18px 26px;flex-wrap:wrap;margin:34px 0 36px;padding-top:24px;border-top:1px solid var(--line);animation:rise .8s var(--ease) .16s both}
.score b{font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(4.4rem,8vw,7rem);line-height:.8;letter-spacing:-.05em}
.score p{display:flex;flex-direction:column;gap:4px;padding-bottom:.35em;font-size:.9375rem;color:var(--fg-2)}
.score .stars{font-size:1.05rem}

/* Shop: product shots on white, laid onto a warm card */
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(20px,3vw,40px)}
.product{position:relative;display:flex;flex-direction:column;gap:8px}
.product__img{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;margin-bottom:14px;border-radius:22px 22px 6px 6px;background:#F3F0EB}
.product__img img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transition:transform 1.2s var(--ease)}
@media (hover:hover){.product:hover .product__img img{transform:scale(1.05)}}
.product__brand{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2)}
.product__name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.6rem);letter-spacing:-.01em;line-height:1.15}
.product__desc{font-size:.9375rem;line-height:1.55;color:var(--fg-2);max-width:30em}
.product .tlink{align-self:flex-start;margin-top:8px}
.product .tlink::before{content:"";position:absolute;inset:0}
.shop-hero{margin:0;justify-self:end;width:min(100%,480px);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:999px 999px 8px 8px;background:#F3F0EB;animation:rise .9s var(--ease) .12s both}
.shop-hero img{width:82%;height:auto;mix-blend-mode:multiply}
@media (max-width:1000px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.products{grid-template-columns:1fr}}
@media (max-width:900px){.shop-hero{justify-self:stretch;width:100%;max-width:520px}}

/* Gift card: the card itself, drawn in type */
.giftstack{position:relative;justify-self:center;width:min(100%,460px);aspect-ratio:1.586;animation:rise .9s var(--ease) .12s both}
.giftcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,34px);border-radius:22px;
  background:radial-gradient(130% 150% at 0% 0%,#2e2823 0%,#12100e 58%,#050505 100%);color:var(--nude);overflow:hidden;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.6);transform:rotate(-5deg);transition:transform 1s var(--ease)}
.giftcard--back{background:var(--nude-2);box-shadow:none;transform:rotate(4deg) translate(6%,4%)}
.giftcard::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(236,231,223,.12) 50%,transparent 60%);transform:translateX(-40%);transition:transform 1.4s var(--ease);pointer-events:none}
@media (hover:hover){.giftstack:hover .giftcard:not(.giftcard--back){transform:rotate(-1deg) translateY(-8px)}.giftstack:hover .giftcard::after{transform:translateX(40%)}}
.giftcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.giftcard__top svg{width:clamp(96px,11vw,132px);height:auto;fill:currentColor}
.giftcard__top span,.giftcard__meta{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.giftcard__script{font-family:var(--font-script);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1}
.giftcard__meta{display:flex;justify-content:space-between;gap:12px}
@media (max-width:900px){.giftstack{justify-self:center;width:min(100% - 32px,380px);margin:16px auto 28px}}

/* Search a long list (sitemap) */
.search{position:relative;max-width:560px;margin-top:34px;animation:rise .8s var(--ease) .16s both}
.search input{width:100%;height:56px;padding:0 52px 0 22px;border-radius:999px;border:0;background:var(--hl);color:var(--fg);font:inherit;font-size:1rem;outline:0;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s}
.search input:focus{box-shadow:inset 0 0 0 1px var(--fg)}
.search input::placeholder{color:var(--fg-2)}
.search svg{position:absolute;right:20px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none}
.search circle,.search path{stroke:currentColor;fill:none;stroke-width:1.5}
.search__count{margin-top:12px;font-size:.8125rem;color:var(--fg-2)}
.smap{columns:3 260px;column-gap:clamp(28px,4vw,64px)}
.smap__group{break-inside:avoid;margin-bottom:clamp(36px,4vw,56px)}
.smap__group--long{break-inside:auto}
.smap__title{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--fg);font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);break-after:avoid}
.smap__title i{font-style:normal;font-variant-numeric:tabular-nums}
.smap a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.35;break-inside:avoid;transition:padding-left .4s var(--ease)}
.smap a:hover{padding-left:8px}
.smap__part + .smap__part{margin-top:clamp(56px,7vw,96px)}
.smap__part > .display{margin-bottom:clamp(28px,3vw,40px)}

/* Policies: one reading column, with the contents alongside on a wide screen */
.doc-open .h2{font-size:clamp(2.6rem,5.6vw,5.2rem)}
.doc-open .chip{margin-top:26px;animation:rise .8s var(--ease) .16s both}
.read--solo{grid-template-columns:minmax(0,43rem)}
.prose button[data-cc-open]:not(.btn){font:inherit;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:0}
.prose .btn{margin-top:4px}

/* A code to copy (event offers) */
.code{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px;padding:10px 10px 10px 28px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.code__label{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2)}
.code__value{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.08em;line-height:1}
.code .btn{height:48px}
.code .btn.is-copied{pointer-events:none}
.offer__big{display:block;font-family:var(--font-display);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(5rem,15vw,13rem);line-height:.8;letter-spacing:-.055em}
.offer__sub{display:block;margin-top:18px;font-family:var(--font-display);font-style:italic;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.02em}
@media (max-width:560px){.code{border-radius:24px;padding:18px 20px}}

/* Two halves: a photograph and its words */
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,110px);align-items:center}
.halves .arch{max-width:560px}
.halves__text .h2{margin-bottom:24px}
.halves__text .lead + p,.halves__text p + p{margin-top:18px}
.halves__text p:not(.lead):not(.group__eyebrow){color:var(--fg-2);max-width:34em}
.halves__text .tlink{margin-top:26px}
@media (max-width:900px){.halves{grid-template-columns:1fr}.halves--flip .arch{order:0}}
@media (min-width:901px){.halves--flip .arch{order:2}}

/* Links inside running text, wherever a component carries a sentence */
:is(.principles p,.values p,.perks span,.faq__a,.dlist dd,.halves__text p,.cols2 p,.opener .lead,.fin__card li,.priceband p) a:not(.btn):not(.tlink){color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .3s}
:is(.principles p,.values p,.perks span,.faq__a,.dlist dd,.halves__text p,.cols2 p,.opener .lead,.fin__card li,.priceband p) a:not(.btn):not(.tlink):hover{text-decoration-color:currentColor}