/* self-hosted so there is no third-party handshake on the critical path.
   Outfit ships as one variable file for 300-500; the weights were identical. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(/web/fonts/outfit-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(/web/fonts/outfit-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(/web/fonts/instrumentserif-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(/web/fonts/instrumentserif-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(/web/fonts/instrumentserif-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(/web/fonts/instrumentserif-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ═══════════════════════════════════════════════════════════
   ART OF DENTISTRY INSTITUTE — design system
   ═══════════════════════════════════════════════════════════ */
:root{
  /* ink + paper */
  --ink:#100E0A;  --ink-2:#1A1712;  --ink-3:#2A2620;
  --paper:#FBF8F2; --paper-2:#F1EADC; --paper-3:#E4D9C3;
  --bone:#FFFDF8;
  --nav-ink:#E8E1D6;
  --mute:#5E5951;  --mute-2:#8C8375;
  /* brand gold — sampled from the Art of Dentistry peacock mark */
  --g-1:#F5E2B4; --g-2:#F0D89C; --g-3:#E4A860; --g-4:#C9821E; --g-5:#8A5A18;
  --gold-grad:linear-gradient(105deg,#8A5A18 0%,#C9821E 16%,#F0D89C 42%,#F5E9CE 52%,#E4A860 66%,#C9821E 84%,#9A6620 100%);
  --line:rgba(16,14,10,.10);
  --line-2:rgba(16,14,10,.18);
  --shadow:0 1px 2px rgba(16,14,10,.02),0 10px 26px -20px rgba(16,14,10,.10);
  --shadow-lg:0 1px 3px rgba(16,14,10,.03),0 24px 52px -34px rgba(16,14,10,.18);
  --line-d:rgba(245,226,180,.12);
  /* type */
  --serif:"Instrument Serif",'Times New Roman',serif;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* scale — capped editorial. d1 tops out ~74px, d2 ~56px, d3 ~37px */
  --d1:clamp(3.125rem,5.9vw,5.875rem);  /* hero  50 → 94px */
  --d2:clamp(2.6rem,4.4vw,4.25rem);     /* editorial pause → 68px */
  --d3:clamp(2.4rem,3.6vw,3.625rem);    /* section title   → 58px */
  --d4:clamp(1.9rem,2.7vw,2.625rem);    /* secondary       → 42px */
  --card:clamp(1.3rem,1.55vw,1.5625rem);/* card title      → 25px */
  --lead:clamp(1.0625rem,1.2vw,1.25rem);/* body large      → 20px */
  --body:clamp(1rem,1.05vw,1.0625rem);  /* body            → 17px */
  --small:clamp(.875rem,.95vw,.9375rem);/* supporting      → 15px */
  --kick:clamp(.72rem,.78vw,.75rem);    /* eyebrow         → 12px */
  /* ── widths: wide editorial / standard / reading ── */
  --gut:clamp(22px,3.4vw,64px);         /* 22 → 64px */
  --pad:var(--gut);                      /* alias for older rules */
  --max:1440px;                          /* standard container */
  --max-wide:1480px;                     /* header + full-bleed sections */
  --text:680px;                          /* reading measure */
  /* ── vertical rhythm ── */
  --sec:clamp(4.5rem,7vw,7rem);         /* per side → 72-112px */
  --sec-sm:clamp(3.25rem,5vw,5rem);     /* per side → 52-80px */
  --gap:clamp(1.5rem,1.9vw,2rem);       /* 24 → 32px card gap */
  --head-gap:clamp(3rem,4.4vw,4.5rem);  /* heading group → content */
  --r-card:8px; --r-img:6px; --r-btn:6px; --r-tag:4px;
  --r:var(--r-card);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--body);font-weight:300;
  line-height:1.62;letter-spacing:-.008em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
figure{margin:0}   /* UA default is 1em 40px — it pushes floated plates off the grid */
ul.menu,ul.mq-row{margin:0;padding:0}  /* UA ul margin was adding 32px to the header */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--g-3);color:var(--ink)}

/* ── shared primitives ─────────────────────────────────── */
.wrap{width:min(var(--max),calc(100% - var(--gut)*2));margin-inline:auto}
header.nav .wrap,.topbar .wrap{width:min(var(--max-wide),calc(100% - clamp(24px,4vw,64px)*2))}
.sec{padding-block:var(--sec);position:relative}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.022em;line-height:.98}
.serif em{font-style:italic}
.d1{font-family:var(--serif);font-size:var(--d1);line-height:.94;letter-spacing:-.032em;font-weight:400;margin:0}
.d2{font-family:var(--serif);font-size:var(--d2);line-height:1.0;letter-spacing:-.028em;font-weight:400;margin:0}
.d3{font-family:var(--serif);font-size:var(--d3);line-height:1.06;letter-spacing:-.022em;font-weight:400;margin:0}
.lead{font-size:var(--lead);line-height:1.58;font-weight:300;color:var(--ink-3);letter-spacing:-.011em;max-width:62ch}
.kick{
  font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;font-weight:500;
  color:var(--g-5);display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.5rem
}
.kick::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55;flex:none}
.on-dark .kick{color:var(--g-2)}
.gold-t{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%}

/* buttons */
.btn{
  --bg:var(--ink);--fg:var(--bone);--bd:transparent;
  display:inline-flex;align-items:center;gap:.8em;position:relative;
  padding:clamp(.88rem,1.2vw,1.08rem) clamp(1.45rem,2.1vw,1.95rem);
  border-radius:var(--r-btn);background:var(--bg);color:var(--fg);
  font-size:clamp(.82rem,.88vw,.875rem);font-weight:400;letter-spacing:-.004em;line-height:1;
  border:1px solid var(--bd);
  transition:background .42s var(--ease),color .42s var(--ease),border-color .42s var(--ease),
             translate .42s var(--ease),box-shadow .42s var(--ease)}
.btn i{display:grid;place-items:center;width:1.05em;height:1.05em;flex:none;
  transition:transform .48s var(--ease)}
.btn i svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
/* leading icon (the phone on the call buttons) — sits still, unlike `.btn i` */
.btn--tel{gap:.6em}
.btnic{display:grid;place-items:center;width:1.2em;height:1.2em;flex:none}
.btnic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.btn:hover{translate:0 -1px}
.btn:hover i{transform:translate(2px,-2px)}
/* primary — solid espresso */
.btn:hover{background:var(--ink-3)}
/* secondary — bone on dark, hairline on light */
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn--ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.on-dark .btn--ghost{--fg:var(--bone);--bd:rgba(245,226,180,.38)}
.on-dark .btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
/* accent — solid bone (used on dark) */
.btn--gold{--bg:var(--bone);--fg:var(--ink);--bd:transparent}
.btn--gold:hover{background:var(--g-2);color:var(--ink)}
/* compact variant for the header bar */
.navcta .btn{height:44px;padding-block:0;padding-inline:clamp(1.05rem,1.5vw,1.45rem)}
header.nav .btn{--bg:var(--bone);--fg:var(--ink);--bd:transparent}
header.nav .btn:hover{background:var(--g-2);color:var(--ink)}

/* text link with gold underline wipe */
.tlink{display:inline-flex;align-items:center;gap:.5em;position:relative;padding-bottom:.28em;
  font-size:clamp(.82rem,.92vw,.92rem);letter-spacing:.005em}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.28;
  transform-origin:right;transition:transform .5s var(--ease)}
.tlink::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--g-4);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) .06s}
.tlink:hover::after{transform:scaleX(0)}
.tlink:hover::before{transform:scaleX(1)}
.tlink svg{width:.85em;height:.85em;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .5s var(--ease)}
.tlink:hover svg{transform:translate(3px,-3px)}

/* dark blocks */
.on-dark{background:var(--ink);color:var(--paper)}
.on-dark .lead{color:rgba(247,243,235,.68)}

/* grain + paper texture */
.grain{position:fixed;inset:-120%;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:var(--noise);background-size:190px 190px;animation:grainshift 7s steps(6) infinite}
@keyframes grainshift{
  0%{transform:translate(0,0)}17%{transform:translate(-3%,-4%)}34%{transform:translate(4%,-2%)}
  50%{transform:translate(-2%,3%)}67%{transform:translate(3%,4%)}84%{transform:translate(-4%,2%)}100%{transform:translate(0,0)}
}

/* reveal primitives (GSAP-driven, CSS fallback safe) */
[data-rise]{opacity:0;transform:translateY(clamp(16px,1.6vw,22px))}
[data-fade]{opacity:0}
.no-motion [data-rise],.no-motion [data-fade]{opacity:1!important;transform:none!important}
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:top}
.wsplit .w>span{display:inline-block;will-change:transform}

/* ══════════ 01 NAV ══════════ */
.topbar{position:relative;z-index:60;background:#0D0C0A;color:rgba(232,225,214,.66);
  font-size:var(--kick);letter-spacing:.14em;text-transform:uppercase}
.topbar .wrap{display:flex;gap:1.6rem;align-items:center;justify-content:center;
  padding-block:.62rem;flex-wrap:wrap;text-align:center}
.topbar b{color:var(--g-2);font-weight:400}
.topbar .dot{width:4px;height:4px;border-radius:50%;background:var(--g-4);flex:none}
@media(max-width:767px){.topbar{display:none}}

header.nav{position:sticky;top:0;z-index:70;color:var(--nav-ink);
  transition:transform .55s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  background:#0D0C0A;border-bottom:1px solid transparent}
header.nav.up{transform:translateY(-100%)}
header.nav.stuck{background:rgba(13,12,10,.94);backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border-bottom-color:rgba(255,255,255,.08)}
.navin{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,2vw,2.5rem);height:clamp(64px,5.4vw,82px)}
.brand{display:flex;align-items:center;gap:.62rem;flex:none}
.brand img{width:clamp(150px,11.5vw,175px);height:auto}
.menu{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,1.1vw,.9rem);margin:0;padding:0}
.menu>li{list-style:none;position:relative}
.menu>li>a{display:flex;align-items:center;gap:.4em;padding:.65rem clamp(.4rem,.6vw,.6rem);position:relative;
  font-size:clamp(.845rem,.92vw,.875rem);font-weight:400;color:var(--nav-ink);opacity:.84;
  transition:color .35s,opacity .35s;white-space:nowrap}
.menu>li>a:hover,.menu>li:focus-within>a{color:#B57A35;opacity:1}
/* a hairline that wipes in, not a button background */
.menu>li>a::after{content:"";position:absolute;left:clamp(.4rem,.6vw,.6rem);right:clamp(.4rem,.6vw,.6rem);
  bottom:.34rem;height:1px;background:var(--g-4);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
.menu>li:hover>a::after,.menu>li:focus-within>a::after{transform:scaleX(1)}
.menu .car{width:.5em;height:.5em;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .4s var(--ease)}
.menu>li:hover .car{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + .5rem);left:50%;translate:-50% 0;min-width:max-content;
  background:#12100D;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);padding:.7rem;
  box-shadow:0 24px 54px -26px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .38s var(--ease);
  display:grid;gap:.08rem}
.mega.two{grid-template-columns:1fr 1fr}
.menu>li:hover .mega,.menu>li:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:block;padding:.58rem .95rem;border-radius:var(--r-img);font-size:.875rem;
  color:var(--nav-ink);opacity:.8;transition:background .3s,color .3s,opacity .3s,padding-left .3s}
.mega a:hover{background:rgba(255,255,255,.06);color:#D9A45C;opacity:1;padding-left:1.2rem}
.navcta{display:flex;align-items:center;gap:.6rem;flex:none;justify-self:end}
.navtel{display:inline-flex;align-items:center;gap:.5em;height:44px;padding:0 1.05rem;border-radius:var(--r-btn);
  font-size:clamp(.82rem,.9vw,.875rem);color:var(--nav-ink);
  border:1px solid rgba(255,255,255,.18);transition:border-color .35s,background .35s,color .35s}
.navtel:hover{border-color:rgba(181,122,53,.7);background:rgba(181,122,53,.12);color:#fff}
.navtel svg{width:.95em;height:.95em;stroke:currentColor;fill:none;stroke-width:1.5}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  place-items:center;flex:none}
.burger i{display:block;width:17px;height:1.3px;background:var(--nav-ink);position:relative;transition:.35s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.3px;background:var(--nav-ink);
  transition:.35s var(--ease)}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}
body.menuopen .burger i{background:transparent}
body.menuopen .burger i::before{top:0;transform:rotate(45deg)}
body.menuopen .burger i::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:65;background:var(--ink);color:var(--paper);
  padding:calc(var(--pad) + 4.6rem) var(--pad) var(--pad);overflow-y:auto;
  clip-path:circle(0% at calc(100% - 46px) 46px);transition:clip-path .75s var(--ease);visibility:hidden}
body.menuopen .drawer{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible}
.dnav{display:grid;border-top:1px solid var(--line-d)}
.ditem{border-bottom:1px solid var(--line-d)}
/* one row of the accordion: a link, or a toggle with its panel underneath */
.dlink{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:.92rem 0;margin:0;background:0;border:0;text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:clamp(1.3rem,5.4vw,1.65rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--nav-ink);transition:color .3s}
.dlink:hover,.dtog[aria-expanded="true"]{color:var(--g-2)}
.dchev{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  transition:rotate .45s var(--ease),opacity .3s}
.dtog[aria-expanded="true"] .dchev{rotate:180deg;opacity:1}
/* the panel's height is driven from script so it can animate from nothing */
.dsub{height:0;overflow:hidden;transition:height .45s var(--ease)}
.dsub > ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.dsub--two > ul{grid-template-columns:1fr 1fr;column-gap:clamp(1rem,4vw,1.6rem)}
.dsub a{display:block;padding:.4rem 0;font-size:var(--small);line-height:1.5;
  color:rgba(247,243,235,.62);transition:color .3s,padding-left .3s}
.dsub a:hover{color:var(--g-2);padding-left:.25rem}
.dsub > ul > li:first-child a,.dsub--two > ul > li:nth-child(2) a{padding-top:.15rem}
.dsub > ul > li:last-child a,.dsub--two > ul > li:nth-last-child(2) a{padding-bottom:1.05rem}
.drawer .dcta{display:grid;gap:.6rem;margin-top:1.8rem}
@media(max-width:1180px){
  .menu,.navtel{display:none}
  .burger{display:grid}
}
@media(max-width:640px){
  .navcta > .btn{display:none}            /* sticky bottom bar carries the CTA */
  .brand img{height:32px;width:auto}
  .navin{height:68px;grid-template-columns:auto 1fr auto}
}
@media(min-width:1181px){.drawer{display:none}}

/* ══════════ 02 HERO ══════════ */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  min-height:clamp(640px,calc(100svh - 110px),820px);display:flex;align-items:center;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(94deg,rgba(8,7,8,.86) 0%,rgba(8,7,8,.52) 34%,transparent 66%),
             linear-gradient(to top,var(--ink) 0%,transparent 26%)}
.hero-plate{position:absolute;inset:0;z-index:1;
  background:#0A0809 url('/web/hero-plate.webp') center/cover no-repeat;
  transform:scale(1.04);will-change:transform}
.hero-fig{position:absolute;z-index:2;pointer-events:none;
  /* left edge sits at 38% of the container, so the headline column is his
     clear space and the card lands beside him, never across his face */
  --cw:min(var(--max),100% - var(--gut)*2);
  --cx:max(var(--gut),(100% - var(--max))/2);
  left:calc(var(--cx) + var(--cw) * .38);right:auto;
  bottom:0;width:min(46%,660px);height:auto;
  /* dissolve every edge so no rectangle survives against the black */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 80%,transparent 99%),
                     linear-gradient(to right,transparent 0%,#000 16%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 80%,transparent 99%),
             linear-gradient(to right,transparent 0%,#000 16%,#000 88%,transparent 100%);
  mask-composite:intersect}
.hero-fig img{width:100%;height:auto;display:block;filter:contrast(1.04) saturate(.94)}
.hero-in{position:relative;z-index:5;width:100%;
  --hero-pb:clamp(4.2rem,9vh,6rem);
  padding-block:clamp(2rem,5vh,3.6rem) var(--hero-pb)}
.hpill{display:inline-flex;align-items:center;gap:.6em;padding:.5rem 1rem .5rem .72rem;border-radius:var(--r-tag);
  border:1px solid rgba(245,226,180,.24);background:rgba(245,226,180,.07);backdrop-filter:blur(10px);
  font-size:var(--kick);letter-spacing:.12em;text-transform:uppercase;color:var(--g-2);margin-bottom:clamp(1rem,2.2vh,1.6rem)}
/**/ .hpill .live{width:7px;height:7px;border-radius:50%;background:var(--g-3);box-shadow:0 0 0 0 rgba(228,168,96,.7);
  animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(228,168,96,.55)}70%{box-shadow:0 0 0 11px rgba(228,168,96,0)}100%{box-shadow:0 0 0 0 rgba(228,168,96,0)}}
.htitle{max-width:min(16ch,90%)}
.hrot{display:block;height:1.3em;margin-block:-.14em;overflow:hidden;position:relative}
.htitle > .gold-t{display:block}
.hrot ul{list-style:none;margin:0;padding:0;position:absolute;inset:0;
  transition:transform .95s var(--ease-io)}
.hrot li{height:1.3em;line-height:1.02;display:flex;align-items:center;white-space:nowrap}
.hsub{max-width:520px;margin:clamp(1.4rem,2.6vh,1.6rem) 0 clamp(1.75rem,3.2vh,2rem);
  color:rgba(247,243,235,.72);font-size:var(--lead);line-height:1.6;font-weight:300}
.hsub b{color:var(--g-2);font-weight:400}
.hcta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.hcards{position:absolute;right:max(var(--gut),calc((100% - var(--max))/2));
  bottom:var(--hero-pb);z-index:6;
  display:grid;gap:.9rem;width:clamp(320px,23vw,342px)}
.htitle{max-width:620px}
.gcard{padding:clamp(1.4rem,1.9vw,1.75rem);border-radius:var(--r-card);
  background:rgba(255,255,255,.04);color:var(--nav-ink);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);box-shadow:none}
.gcard .t{font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;color:rgba(232,225,214,.62);margin-bottom:.6rem}
.gcard .n{font-family:var(--serif);font-size:clamp(1.45rem,1.8vw,1.75rem);line-height:1;letter-spacing:-.022em;
  display:flex;align-items:baseline;gap:.45rem;color:var(--bone)}
.gcard .n small{font-size:var(--small);font-family:var(--sans);color:rgba(232,225,214,.6);letter-spacing:0}
.gcard p{margin:.7rem 0 0;font-size:var(--small);line-height:1.6;color:rgba(232,225,214,.62)}
.gcard .stars{color:var(--g-4)}
.stars{display:inline-flex;gap:.14em;color:var(--g-3);font-size:.85em;letter-spacing:.06em}
.scroll-cue{position:absolute;left:max(var(--gut),calc((100% - var(--max))/2));
  bottom:clamp(1rem,2.4vh,1.6rem);z-index:6;
  display:flex;align-items:center;gap:.65rem;font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;
  color:rgba(247,243,235,.42)}
.scroll-cue i{display:block;width:34px;height:1px;background:rgba(245,226,180,.3);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--g-3);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* ── 992-1439: .hero stops being a flex row so the cards can sit under the
      copy; he keeps the right side, top-anchored so his head never crops ── */
@media(max-width:1439px){
  .hero{display:block;min-height:clamp(620px,74vh,780px);
    padding-bottom:clamp(1.8rem,4vh,3rem)}
  .hero-in{padding-block:clamp(2.6rem,6vh,4rem) clamp(1.4rem,3vh,2rem)}
  .htitle{max-width:min(56%,560px)}
  .hsub{max-width:min(52%,460px)}
  .hero-fig{left:auto;right:max(var(--gut),calc((100% - var(--max))/2));
    top:clamp(18px,3vh,40px);bottom:auto;
    width:min(46%,560px);height:auto}
  .hcards{position:static;width:min(560px,calc(100% - var(--gut)*2));
    margin:0 0 0 max(var(--gut),calc((100% - var(--max))/2));
    grid-template-columns:1fr 1fr;gap:.9rem}
  .scroll-cue{display:none}
}
/* ── 768-991: tablet keeps the editorial split, a little tighter ── */
@media(max-width:991px){
  .hero{min-height:clamp(580px,70vh,700px)}
  .htitle{max-width:min(58%,460px)}
  .hsub{max-width:min(54%,400px)}
  .hero-fig{width:min(44%,420px);top:clamp(14px,2.4vh,30px)}
  .hcards{width:min(520px,calc(100% - var(--gut)*2))}
}
/* ── under 768: the hero fills the screen ──
   He sits behind the copy on the right, exactly like desktop.
   Order: eyebrow → headline → lead → the two boxes → the buttons.
   display:contents flattens .hero-in/.wrap so all five can be ordered
   as siblings without touching the desktop DOM. */
@media(max-width:767px){
  .hero{display:flex;flex-direction:column;justify-content:center;align-items:stretch;
    overflow:hidden;min-height:calc(100svh - var(--head-h,96px));
    padding-inline:var(--gut);
    padding-block:clamp(1.2rem,3vh,2rem) clamp(1.2rem,3vh,1.8rem)}
  .hero-in,.hero-in .wrap{display:contents}
  .hpill,.htitle,.hsub,.hcards,.hcta{position:relative;z-index:5}
  .hpill{order:1;margin-bottom:clamp(1rem,2.4vh,1.5rem);align-self:flex-start}
  .htitle{order:2;--col:calc((100vw - var(--gut)*2) * .60);
    max-width:var(--col);font-size:min(3.125rem,calc(var(--col) / 5.25))}
  .hsub{order:3;max-width:54%;
    margin:clamp(1.1rem,2.6vh,1.6rem) 0 clamp(1.6rem,4vh,2.5rem);
    font-size:var(--body);line-height:1.6}
  /* the two boxes, then the buttons underneath them */
  .hcta{order:4;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;width:100%}
  .hcards{order:5;position:static;width:100%;
    margin:clamp(1.25rem,10vh,5.5rem) 0 0;
    grid-template-columns:1fr 1fr;gap:.7rem}
  .hcta .btn{justify-content:center;padding-inline:.55rem;height:52px;
    font-size:clamp(.72rem,3vw,.85rem);text-align:center}
  .hcta .btn i{display:none}
  /* portrait: a right-anchored background layer, behind everything */
  .hero-fig{order:0;position:absolute;z-index:2;left:auto;bottom:auto;
    right:-20%;top:calc(37svh - var(--head-h,96px));translate:0 -50%;
    width:min(79%,420px);height:auto;margin:0;flex:none;min-height:0;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 84%,transparent 99%),
                       linear-gradient(to right,transparent 0%,#000 22%,#000 92%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 84%,transparent 99%),
               linear-gradient(to right,transparent 0%,#000 22%,#000 92%,transparent 100%);
    mask-composite:intersect}
  .hero-fig img{position:static;width:100%;height:auto;object-fit:fill}
  /* keep the left column legible over him */
  .hero::after{background:linear-gradient(105deg,rgba(8,7,8,.94) 0%,rgba(8,7,8,.72) 38%,rgba(8,7,8,.18) 72%,transparent 100%),
                          linear-gradient(to top,var(--ink) 16%,transparent 52%)}
  .gcard{padding:clamp(.95rem,3.6vw,1.2rem)}
  .gcard .t{margin-bottom:.3rem;letter-spacing:.1em}
  .gcard .n{font-size:clamp(1.1rem,5.2vw,1.4rem)}
  .gcard .n small{font-size:.7rem}
  .gcard p{margin-top:.35rem;font-size:clamp(.68rem,2.8vw,.76rem);line-height:1.4}
  .gcard .stars{font-size:.68em}
  .scroll-cue{display:none}
}
/* short phones (SE, 8, mini): drop the eyebrow and tighten */
@media(max-width:767px) and (max-height:730px){
  .hpill{display:none}
  .hsub{margin:.85rem 0 1.15rem;font-size:.9375rem;line-height:1.5}
  .hcta .btn{height:46px}
  .gcard{padding:.8rem .85rem}
  .gcard p{margin-top:.3rem}
  .hcards{margin-top:clamp(.9rem,4vh,1.8rem)}
  .hero-fig{top:calc(36svh - var(--head-h,96px))}
  .hsub{max-width:52%}
}

/* ══════════ 03 TICKER ══════════ */
.ticker{background:var(--ink);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  min-height:84px;display:flex;align-items:center;overflow:hidden;position:relative;z-index:8}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:clamp(50px,9vw,150px);z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.mq{display:flex;width:max-content;will-change:transform}
.mq-row{display:flex;align-items:center;gap:clamp(2rem,4.4vw,4.2rem);padding-right:clamp(2rem,4.4vw,4.2rem)}
.mq-row span{display:inline-flex;align-items:center;gap:.8em;white-space:nowrap;
  font-size:var(--lead);letter-spacing:.01em;color:rgba(247,243,235,.68);font-weight:300}
.mq-row span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--g-4);flex:none;margin-left:.3em}
.mq-row b{font-weight:400;color:var(--g-2)}

/* ══════════ 04 MANIFESTO ══════════ */
.manifesto{background:var(--paper);position:relative;overflow:hidden;text-align:center}
.mplate{position:absolute;width:clamp(150px,17vw,300px);border-radius:var(--r-img);overflow:hidden;z-index:1;
  box-shadow:var(--shadow)}
.mplate img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.mplate.l{left:max(var(--gut),calc((100% - var(--max))/2));top:26%}
.mplate.r{right:max(var(--gut),calc((100% - var(--max))/2));top:46%;width:clamp(180px,20vw,360px)}
.mbody{position:relative;z-index:2;max-width:min(880px,100%);margin-inline:auto}
.mbody .big{font-family:var(--serif);font-size:var(--d2);line-height:1.08;letter-spacing:-.025em;
  max-width:19ch;margin:0 auto}
.mbody .big .w>span{color:rgba(16,14,10,.17);transition:color .1s linear}
.mstat{max-width:var(--text);margin:clamp(2.4rem,4vw,3.4rem) auto 0}
.mstat p{color:var(--mute);font-size:var(--lead);line-height:1.6;margin:0 0 1.8rem}
.mstat p b{color:var(--ink);font-weight:400}
@media(max-width:900px){.mbody .big{max-width:100%}}

/* ══════════ 05 BENTO ══════════ */
.bento{background:var(--paper)}
.bhead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  margin-bottom:var(--head-gap)}
.bhead .d3{max-width:16ch}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.bx{background:var(--bone);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.25rem,1.75vw,1.7rem);display:flex;flex-direction:column;
  min-height:clamp(178px,16vw,238px);position:relative;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.bx:hover{transform:translateY(-2px);border-color:rgba(201,130,30,.3)}
/* card header row — icon tile + label + meta (Glowdent pattern) */
.bxh{display:flex;align-items:center;gap:.72rem;margin-bottom:clamp(1rem,1.5vw,1.35rem)}
.bxh .ic{width:38px;height:38px;border-radius:var(--r-img);background:var(--paper-2);flex:none;
  display:grid;place-items:center}
.bxh .ic svg{width:17px;height:17px;stroke:var(--mute);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.bxh h3{margin:0;font-size:var(--small);font-weight:400;letter-spacing:-.008em;line-height:1.2}
.bxh .meta{margin-left:auto;font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;color:var(--mute-2)}
.bxb{margin-top:auto}
.bx .bn{font-family:var(--serif);font-size:clamp(3rem,4.4vw,4rem);line-height:.86;letter-spacing:-.042em;
  display:flex;align-items:flex-start;gap:.06em;color:var(--ink)}
.bx .bn sup{font-family:var(--sans);font-size:.2em;font-weight:400;letter-spacing:0;translate:0 .8em;color:var(--g-4)}
.bx .bl{font-size:clamp(.875rem,.98vw,.9375rem);line-height:1.65;color:var(--mute);margin:.9rem 0 0;max-width:26ch}
.bx .bl b{color:var(--ink);font-weight:400}
.bx--wide{grid-column:span 2}
/* progress rail */
.rail{height:5px;border-radius:5px;background:var(--paper-2);overflow:hidden;margin-top:1rem;position:relative}
.rail i{display:block;height:100%;width:0;border-radius:5px;background:var(--g-4)}
.railx{display:flex;justify-content:space-between;font-size:var(--kick);color:var(--mute-2);margin-top:.5rem;
  letter-spacing:.06em}
/* vertical tick chart */
.ticks{display:flex;align-items:flex-end;gap:3px;height:52px;margin-top:1rem}
.ticks i{flex:1;border-radius:2px;background:var(--paper-3);transform-origin:bottom;transform:scaleY(0);align-self:flex-end}
.ticks i.on{background:var(--g-4)}
/* dark gold card */
.bx--gold{grid-column:span 2;grid-row:span 3;background:var(--ink);color:var(--bone);
  min-height:clamp(330px,34vw,486px);justify-content:flex-start;box-shadow:none}
.bx--gold .bxh .ic{background:rgba(245,226,180,.12)}
.bx--gold .bxh .ic svg{stroke:var(--g-2)}
.bx--gold .bxh .meta{color:rgba(251,248,242,.42)}
#gl-bento{position:absolute;right:-6%;bottom:-8%;width:96%;height:74%;z-index:1;pointer-events:none}
.bx--gold>*{position:relative;z-index:2}
.bx--gold .bq{font-family:var(--serif);font-size:var(--card);line-height:1.25;letter-spacing:-.02em;
  max-width:15ch;margin:0 0 1.1rem}
.bx--gold .bs{font-size:clamp(.875rem,.98vw,.9375rem);color:rgba(251,248,242,.62);line-height:1.68;max-width:31ch;margin:0 0 1.6rem}
.bx--gold .btn{align-self:flex-start}
.avstack{display:flex;align-items:center;gap:.8rem;margin-top:1rem}
.avstack .avs{display:flex}
.avstack img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:2px solid var(--bone);margin-left:-10px;background:var(--paper-3)}
.avstack img:first-child{margin-left:0}
.gmark{display:inline-flex;align-items:center;gap:.4em;font-size:var(--kick);color:var(--mute)}
.gmark svg{width:14px;height:14px}
@media(max-width:1000px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .bx--gold{grid-column:span 2;grid-row:span 1;min-height:380px}
  #gl-bento{width:70%;height:70%;right:-4%;bottom:-6%}
}
@media(max-width:560px){
  .bgrid{grid-template-columns:1fr}
  .bx--wide,.bx--gold{grid-column:span 1}
}

/* ══════════ 06 TREATMENTS ══════════ */
.tx{background:var(--paper);padding-bottom:calc(var(--sec)*.82)}
.txgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.txc{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--bone);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.txc:hover{border-color:rgba(201,130,30,.34);transform:translateY(-2px)}
/* the photograph is the card — always visible, not a hover reveal */
.txshot{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.txshot img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease),filter .6s var(--ease);filter:saturate(.94)}
.txc:hover .txshot img{transform:scale(1.025);filter:saturate(1)}
.txshot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,8,9,.52),transparent 52%)}
.txnum{position:absolute;left:1rem;bottom:.85rem;z-index:2;
  font-size:var(--kick);letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.78)}
.txarrow{position:absolute;top:.9rem;right:.9rem;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(251,248,242,.92);color:var(--ink);
  transition:.5s var(--ease)}
.txarrow svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.txc:hover .txarrow{background:var(--g-3);transform:translate(4px,-4px)}
.txbody{padding:clamp(1.3rem,1.7vw,1.5rem) clamp(1.4rem,1.9vw,1.75rem) clamp(1.6rem,2.1vw,2rem)}
.txflip{display:block;position:relative;overflow:hidden;margin-bottom:.4rem}
.txflip r{font-size:.52em;vertical-align:.5em;letter-spacing:0}
.txflip span{display:block;font-family:var(--serif);font-size:var(--card);line-height:1.18;
  letter-spacing:-.02em;transition:transform .5s var(--ease)}
.txflip span+span{position:absolute;top:100%;left:0;right:0;color:var(--g-5)}
.txc:hover .txflip span{transform:translateY(-100%)}
.txp{font-size:clamp(.875rem,.98vw,.9375rem);line-height:1.6;color:var(--mute);margin:0}
@media(max-width:940px){.txgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.txgrid{grid-template-columns:1fr}}

/* ══════════ 06b INSIDE THE INSTITUTE — photo band ══════════ */
.inside{background:var(--ink);color:var(--bone);overflow:hidden;
  padding-bottom:calc(var(--sec)*.55)}
.igrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,13.5vw,220px);
  gap:clamp(.9rem,1.1vw,1.15rem)}
.igrid figure{margin:0;border-radius:var(--r-img);overflow:hidden;position:relative;background:var(--ink-2)}
.igrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease);filter:saturate(.9)}
.igrid figure:hover img{transform:scale(1.025)}
.igrid figcaption{position:absolute;left:1rem;bottom:.95rem;font-size:var(--kick);text-transform:uppercase;
  letter-spacing:.16em;color:rgba(251,248,242,.82);opacity:0;transform:translateY(6px);
  transition:.5s var(--ease)}
.igrid figure::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(to top,rgba(10,8,9,.72),transparent 55%)}
.igrid figure:hover figcaption{opacity:1;transform:none}
.igrid figure:hover::after{opacity:1}
.i-a{grid-column:span 2;grid-row:span 2}
.i-b{grid-column:span 1;grid-row:span 2}
.i-c{grid-column:span 1;grid-row:span 1}
.i-d{grid-column:span 2;grid-row:span 1}
@media(max-width:820px){
  .igrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(100px,26vw,150px)}
  .i-a{grid-column:span 2;grid-row:span 2}.i-b{grid-row:span 2}.i-d{grid-column:span 2}
}

/* ══════════ 07 TRANSFORMATIONS ══════════ */
.work{background:var(--ink);color:var(--paper);overflow:hidden;padding-top:calc(var(--sec)*.55)}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border:1px solid var(--line-d);border-radius:var(--r-card);padding:5px;
  margin:clamp(1.6rem,2.4vw,2rem) 0 var(--head-gap);max-width:840px;position:relative}
.tab{padding:.78rem 1rem;border-radius:var(--r-btn);position:relative;z-index:2;
  font-size:var(--small);color:rgba(251,248,242,.6);
  transition:color .45s var(--ease);white-space:nowrap;text-align:center}
.tab+.tab::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;
  background:rgba(245,226,180,.16);transition:opacity .3s}
.tab:hover{color:var(--bone)}
.tab.on{color:var(--ink)}
.tab.on::before,.tab.on+.tab::before{opacity:0}
.tabpill{position:absolute;z-index:1;top:5px;bottom:5px;border-radius:var(--r-btn);background:var(--bone);
  transition:left .55s var(--ease),width .55s var(--ease);pointer-events:none}
@media(max-width:700px){
  .tabs{grid-auto-flow:column;grid-auto-columns:1fr;border-radius:var(--r-card);gap:2px;padding:4px}
  .tab{padding:.6rem .25rem;font-size:clamp(.62rem,2.5vw,.75rem);letter-spacing:-.01em;
    border-radius:var(--r-btn);hyphens:auto}
  .tab+.tab::before{display:none}
}
.wpanel{display:none;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(2rem,3.6vw,4rem);align-items:center}
.wpanel.on{display:grid;animation:wfade .7s var(--ease)}
@keyframes wfade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.wpanel .wtxt h3{font-family:var(--serif);font-size:var(--d4);line-height:1.14;letter-spacing:-.022em;
  font-weight:400;margin:0 0 1rem}
.wpanel .wtxt p{color:rgba(247,243,235,.6);font-size:var(--lead);line-height:1.6;margin:0 0 1.5rem;max-width:42ch}
.wspecs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(245,226,180,.14);
  border:1px solid var(--line-d);border-radius:var(--r-card);overflow:hidden;margin-bottom:1.7rem}
.wspecs div{background:var(--ink);padding:.95rem 1rem}
.wspecs b{display:block;font-family:var(--serif);font-size:var(--card);line-height:1;
  letter-spacing:-.02em;font-weight:400;margin-bottom:.32rem;color:var(--g-2)}
.wspecs small{font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;color:rgba(247,243,235,.5)}
/* before/after drag */
.ba{position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line-d);cursor:ew-resize;user-select:none;touch-action:none;background:var(--ink-2)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold-grad);z-index:3;
  translate:-50% 0;pointer-events:none}
.ba .knob{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:4;width:48px;height:48px;border-radius:50%;
  background:var(--gold-grad);display:grid;place-items:center;pointer-events:none;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.7)}
.ba .knob svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6}
.ba .lbl{position:absolute;bottom:1rem;z-index:4;padding:.4rem .85rem;border-radius:var(--r-tag);
  font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;pointer-events:none;
  background:rgba(16,14,10,.62);backdrop-filter:blur(8px);border:1px solid var(--line-d)}
.ba .lbl.b{left:1rem}.ba .lbl.a{right:1rem;color:var(--g-2)}
.result{margin:0;position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line-d);background:var(--ink-2)}
.result img{width:100%;height:100%;object-fit:cover;object-position:top center}
.result figcaption{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.55rem;align-items:center;
  padding:.45rem .95rem;border-radius:var(--r-tag);background:rgba(16,14,10,.62);backdrop-filter:blur(8px);
  border:1px solid var(--line-d);font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em}
.result figcaption span+span{color:var(--g-2)}
.result figcaption span+span::before{content:"\2022";margin-right:.6em;color:rgba(247,243,235,.4)}
/* case marquee */
.cases{margin-top:var(--head-gap);overflow:hidden;position:relative}
/* the fade only needs to cover the gutter, so it starts solid and clears
   fast — and it sits 1px outside the edge so no sliver shows through */
.cases::before,.cases::after{content:"";position:absolute;top:-1px;bottom:-1px;
  width:clamp(28px,var(--gut),72px);z-index:3;pointer-events:none}
.cases::before{left:-1px;background:linear-gradient(90deg,var(--ink) 55%,transparent)}
.cases::after{right:-1px;background:linear-gradient(270deg,var(--ink) 55%,transparent)}
.cmq{display:flex;gap:var(--gap);width:max-content;will-change:transform}
.cmq figure{margin:0;width:clamp(122px,10.5vw,156px);border-radius:var(--r-img);overflow:hidden;position:relative;flex:none;
  border:1px solid var(--line-d)}
.cmq img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top center;
  filter:grayscale(.15) contrast(1.02);transition:filter .6s,transform .9s var(--ease)}
.cmq figure:hover img{filter:none;transform:scale(1.02)}
.cmq figcaption{position:absolute;left:.85rem;bottom:.85rem;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.16em;color:rgba(251,248,242,.82);background:rgba(16,14,10,.55);backdrop-filter:blur(6px);
  padding:.32rem .7rem;border-radius:var(--r-tag)}
@media(max-width:920px){.wpanel.on{grid-template-columns:1fr}}

/* ══════════ 08 DOCTOR ══════════ */
.doc{background:var(--paper);overflow:hidden}
.docgrid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(2.4rem,5vw,6rem);align-items:center}
.docimg{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--ink)}
.docimg img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%}
.docimg .badge{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;gap:.55rem;flex-wrap:wrap}
.docimg .badge span{font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;padding:.45rem .8rem;
  border-radius:var(--r-tag);background:rgba(16,14,10,.6);backdrop-filter:blur(10px);color:var(--g-2);
  border:1px solid var(--line-d)}
blockquote{margin:0}
.docq{font-family:var(--serif);font-size:var(--d4);line-height:1.26;letter-spacing:-.02em;
  margin:clamp(1.4rem,2.6vw,2.2rem) 0;padding-left:clamp(1rem,1.6vw,1.6rem);border-left:2px solid var(--g-3)}
.creds{display:grid;gap:0;margin:clamp(1.4rem,2.6vw,2.2rem) 0;border-top:1px solid var(--line)}
.creds div{display:flex;gap:1.4rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line)}
.creds b{font-family:var(--serif);font-size:var(--lead);font-weight:400;color:var(--g-5);flex:none;
  width:5.4rem;letter-spacing:.03em}
.creds p{margin:0;font-size:clamp(.9rem,.98vw,.9375rem);line-height:1.65;color:var(--mute)}
.creds p i{font-style:normal;color:var(--ink)}
.credchips{list-style:none;margin:clamp(1.3rem,2.4vw,2rem) 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.credchips li{background:var(--bone);padding:.95rem 1.05rem}
.credchips b{display:block;font-family:var(--serif);font-size:var(--card);font-weight:400;
  letter-spacing:.01em;color:var(--g-5);margin-bottom:.22rem}
.credchips span{font-size:var(--small);line-height:1.45;color:var(--mute);display:block}
@media(max-width:560px){.credchips{grid-template-columns:repeat(2,1fr)}}
.docbtns{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:900px){.docgrid{grid-template-columns:1fr}
  .creds div{flex-direction:column;gap:.35rem}.creds b{width:auto}}

/* ══════════ 09 THE VISIT ══════════ */
.visit{background:var(--paper)}
.visitwrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:var(--gap);margin-top:var(--head-gap);align-items:stretch}
.visitshot{margin:0;border-radius:var(--r-img);overflow:hidden;position:relative;min-height:clamp(320px,34vw,520px)}
.visitshot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.visitshot figcaption{position:absolute;left:1.15rem;bottom:1.1rem;z-index:2;
  font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;color:rgba(251,248,242,.82);
  background:rgba(10,8,9,.55);backdrop-filter:blur(8px);padding:.42rem .9rem;border-radius:var(--r-tag)}
.visitshot::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,8,9,.6),transparent 55%)}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.step{background:var(--bone);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.3rem,2vw,1.9rem);
  position:relative;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.step:hover{transform:translateY(-2px);border-color:rgba(201,130,30,.3)}
.step .sn{font-family:var(--serif);font-size:var(--d4);line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(201,130,30,.42);margin-bottom:clamp(1.6rem,3vw,2.6rem);display:block}
.step h3{font-family:var(--serif);font-size:var(--card);font-weight:400;letter-spacing:-.016em;
  line-height:1.16;margin:0 0 .55rem}
.step p{margin:0;font-size:clamp(.875rem,.98vw,.9375rem);line-height:1.65;color:var(--mute)}
.offerbar{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  margin-top:clamp(1.4rem,2.4vw,2rem);padding:clamp(1.1rem,1.8vw,1.6rem) clamp(1.3rem,2.2vw,2rem);
  border-radius:var(--r-card);background:var(--ink);color:var(--paper)}
.offerbar .ov{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);flex-wrap:wrap}
.offerbar .ov span{display:flex;align-items:center;gap:.55em;font-size:.855rem;color:rgba(247,243,235,.7)}
.offerbar .ov svg{width:15px;height:15px;stroke:var(--g-3);fill:none;stroke-width:1.6;flex:none}
.offerbar .ov b{color:var(--g-2);font-weight:400}
@media(max-width:1000px){.visitwrap{grid-template-columns:1fr}.visitshot{min-height:260px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ══════════ 10 TRAVEL ══════════ */
.travel{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.travel .tgrid{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(2.4rem,5vw,6rem);align-items:center}
.timg{border-radius:var(--r-img);overflow:hidden;position:relative}
.timg img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;filter:saturate(.82) contrast(1.04)}
.timg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,14,10,.6),transparent 55%)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:clamp(1.3rem,2.4vw,2rem) 0}
.chips span{display:inline-flex;align-items:center;gap:.5em;padding:.5rem .95rem;border-radius:var(--r-tag);
  border:1px solid var(--line-d);font-size:.8rem;color:rgba(247,243,235,.72)}
.chips b{color:var(--g-2);font-weight:400}
@media(max-width:900px){.travel .tgrid{grid-template-columns:1fr}}

/* ══════════ 11 REVIEWS ══════════ */
.rev{background:var(--paper);overflow:hidden}
.revhead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:var(--head-gap)}
.rscore{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.4rem,2.2vw,2rem)}
.rscore .rn{font-family:var(--serif);font-size:clamp(2.2rem,3vw,2.8rem);line-height:.9;letter-spacing:-.03em;color:var(--g-5)}
.rscore .rd{font-size:var(--small);color:var(--mute);line-height:1.5}
.rscore .rd b{display:block;color:var(--ink);font-weight:400}
.rfeat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(2.4rem,5vw,5.5rem);align-items:end}
.rfeat figure{margin:0;border-radius:var(--r-img);overflow:hidden;position:relative}
.rfeat figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top center}
.rfeat figure figcaption{position:absolute;left:1rem;bottom:1rem;right:1rem;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.16em;color:rgba(251,248,242,.82);background:rgba(16,14,10,.58);backdrop-filter:blur(8px);
  padding:.45rem .85rem;border-radius:var(--r-tag);text-align:center}
.rquote{font-family:var(--serif);font-size:var(--d4);line-height:1.2;letter-spacing:-.025em;
  max-width:20ch;margin:0}
@media(max-width:820px){.rfeat{grid-template-columns:1fr}.rfeat figure{display:none}}
.rquote .w>span{color:rgba(16,14,10,.16);transition:color .08s linear}
.rby{display:flex;align-items:center;gap:.85rem;margin-top:clamp(1.4rem,2.6vw,2.2rem)}
.rby .rline{width:clamp(28px,4vw,54px);height:1px;background:var(--g-4)}
.rby b{font-weight:400;font-size:var(--lead)}
.rby small{color:var(--mute);font-size:var(--small)}
.rwrap{margin-top:var(--head-gap);border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--bone);display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.rcard{padding:clamp(1.35rem,2vw,1.95rem);position:relative;cursor:default;
  transition:background .55s var(--ease)}
.rcard+.rcard::before{content:"";position:absolute;left:0;top:clamp(1.2rem,2vw,1.9rem);
  bottom:clamp(1.2rem,2vw,1.9rem);width:1px;background:var(--line)}
.rwrap .rcard:nth-child(3n+1)::before{display:none}
.rcard.on{background:var(--paper-2)}
.rcard.on+.rcard::before,.rcard.on::before{opacity:0}
.rtop{display:flex;align-items:center;gap:.8rem;margin-bottom:1.05rem}
.rmono{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-size:1.15rem;line-height:1;color:var(--g-5);
  background:var(--paper-2);border:1px solid var(--line);
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease)}
.rcard.on .rmono{background:var(--g-4);color:var(--bone);border-color:transparent}
.rdots{display:flex;gap:5px}
.rdots i{width:7px;height:7px;border-radius:50%;background:var(--paper-3);transition:background .55s var(--ease)}
.rcard.on .rdots i{background:var(--g-4)}
.rcard blockquote{margin:0}
.rquo{font-family:var(--serif);font-size:2.4rem;line-height:.55;color:var(--paper-3);display:block;margin-bottom:.45rem}
.rcard p{margin:0 0 1.4rem;font-size:clamp(.9rem,.98vw,.9375rem);line-height:1.72;color:var(--mute);transition:color .55s var(--ease)}
.rcard.on p{color:var(--ink-3)}
.rcard .rname{font-size:var(--small);display:block;margin-bottom:.35rem;color:var(--mute);transition:color .55s var(--ease)}
.rcard.on .rname{color:var(--g-5)}
.rcard .stars{font-size:.8em;color:var(--mute-2);transition:color .55s var(--ease)}
.rcard.on .stars{color:var(--g-4)}
@media(max-width:860px) and (min-width:768px){.rwrap{grid-template-columns:1fr}
  .rcard+.rcard::before{left:clamp(1.2rem,2vw,1.9rem);right:clamp(1.2rem,2vw,1.9rem);
    top:0;bottom:auto;width:auto;height:1px}}

/* ══════════ 12 OFFER ══════════ */
.offer{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);
  padding-block:var(--sec-sm);min-height:340px;display:flex;align-items:center}
.offer .omq{overflow:hidden;position:absolute;left:0;right:0;top:50%;translate:0 -50%;
  z-index:0;opacity:.1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.offer .omq .mq-row span{font-family:var(--serif);font-size:clamp(2.4rem,7vw,6.5rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(245,226,180,.55);text-transform:none}
.offer .omq .mq-row span::after{display:none}
.oin{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:end}
.oin p{color:rgba(247,243,235,.66);font-size:var(--lead);line-height:1.6;max-width:44ch;margin:1.2rem 0 0}
.oin p b{color:var(--g-2);font-weight:400}
.octa{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:880px){.oin{grid-template-columns:1fr}.octa{justify-content:flex-start}}

/* ══════════ 13 CONTACT ══════════ */
.contact{background:var(--paper)}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,620px);
  gap:clamp(2.4rem,5vw,6rem);align-items:stretch}
/* the info column stretches so its photo can bottom-align with the form */
.cinfo{display:flex;flex-direction:column}
.cshot{margin:clamp(1.6rem,2.4vw,2.2rem) 0 0;border-radius:var(--r-img);overflow:hidden;
  /* absorbs the leftover height so its bottom edge meets the form's */
  flex:1 1 0;min-height:170px}
.cshot img{width:100%;height:100%;object-fit:cover;display:block}
.cinfo dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.cinfo .row{display:grid;grid-template-columns:minmax(96px,.28fr) 1fr;gap:1.4rem;padding:1.15rem 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.cinfo dt{font-size:var(--small);letter-spacing:0;color:var(--mute);margin:0;
  display:flex;align-items:center;gap:.6em}
.cinfo dt svg{width:15px;height:15px;flex:none;stroke:var(--g-4);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cinfo dd{margin:0;font-size:var(--lead);line-height:1.6}
.cinfo dd a:hover{color:var(--g-4)}
.cinfo dd span{display:block;color:var(--mute);font-size:var(--small);margin-top:.15rem}
.form{background:var(--bone);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.75rem,2.6vw,2.6rem);align-self:start}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.5vw,1.35rem)}
.field{position:relative;margin-bottom:clamp(1rem,1.5vw,1.35rem)}
.field label{display:block;font-size:var(--small);letter-spacing:0;
  color:var(--mute);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;min-height:54px;padding:1rem 0;background:none;border:0;border-bottom:1px solid var(--line);
  font:inherit;font-size:var(--lead);color:var(--ink);border-radius:0;transition:border-color .4s}
.field textarea{resize:vertical;min-height:168px}
.field select{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7466' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;background-size:15px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--g-4)}
.fnote{font-size:var(--small);color:var(--mute);line-height:1.6;margin:1.1rem 0 1.4rem}
.fok{display:none;padding:1rem 1.2rem;border-radius:var(--r-btn);background:rgba(228,168,96,.16);
  border:1px solid rgba(201,130,30,.4);font-size:.88rem;margin-bottom:1rem}
.fok.on{display:block}
@media(max-width:860px){.cgrid{grid-template-columns:1fr}}
@media(max-width:520px){.frow{grid-template-columns:1fr}}

/* ══════════ 14 FOOTER ══════════ */
footer{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,4.2vw,4rem) 0;
  position:relative;overflow:hidden}
.flogo{filter:none}
.fbrand{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;
  padding-bottom:clamp(1.8rem,2.6vw,2.2rem);border-bottom:1px solid var(--line-d);flex-wrap:wrap}
.fbrand img{width:clamp(160px,14vw,180px);height:auto}
.fbrand p{color:rgba(247,243,235,.58);font-size:var(--small);max-width:40ch;margin:.85rem 0 0;line-height:1.65}
.fsoc{display:flex;gap:.5rem}
.fsoc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;
  color:var(--nav-ink);opacity:.72;transition:.4s var(--ease)}
.fsoc a:hover{background:var(--g-4);border-color:transparent;color:var(--ink);opacity:1;translate:0 -2px}
.fsoc svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.fcols{display:grid;grid-template-columns:1fr 1.7fr 1fr 1.05fr;gap:clamp(1.5rem,2.6vw,2.6rem);
  padding-block:clamp(1.9rem,2.8vw,2.5rem)}
/* the long treatments list runs two-up so it stops setting the footer height */
.fcols .fcol--wide ul{display:block;columns:2;column-gap:clamp(1.2rem,2vw,2rem)}
.fcols .fcol--wide li{break-inside:avoid}
/* source order is Institute · Patients · Treatments · Visit (for the phone's
   column flow); on a grid we put them back to the order they read in */
.fcol--inst{order:1}.fcol--wide{order:2}.fcol--pat{order:3}.fcol--visit{order:4}
.fcol h3{font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;color:var(--g-3);
  font-weight:500;margin:0 0 1rem}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fcol a{display:block;padding:.2rem 0;font-size:var(--small);line-height:1.6;color:rgba(247,243,235,.62);transition:color .35s,padding-left .35s}
.fcol--visit a{position:relative;display:block;padding-left:1.5em;
  overflow-wrap:anywhere}
.fcol--visit a:hover{padding-left:1.7em}
.fcol--visit svg{position:absolute;left:0;top:.5em;width:14px;height:14px;
  fill:none;stroke:var(--g-4);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.fcol a:hover{color:var(--g-2);padding-left:.35rem}
.fareas{padding-block:clamp(1.3rem,2vw,1.7rem);border-top:1px solid var(--line-d)}
.fareas h3{font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;color:var(--g-3);font-weight:500;margin:0 0 .8rem}
.fareas div{display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.fareas a{font-size:var(--small);color:rgba(247,243,235,.5);padding:.36rem .85rem;border-radius:var(--r-tag);
  border:1px solid var(--line-d);transition:.4s var(--ease)}
.fareas a:hover{color:var(--ink);background:var(--g-2);border-color:transparent}
.flegal{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;align-items:center;
  margin-top:0;
  padding-block:clamp(1.1rem,1.7vw,1.5rem) clamp(1.5rem,2.2vw,2rem);border-top:1px solid var(--line-d);
  font-size:var(--small);color:rgba(247,243,235,.45)}
.flegal nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.flegal a:hover{color:var(--g-2)}
/* the closing statement: bronze, whole, and sitting above the legal row */
@media(max-width:960px){.fcols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}.fbrand{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE LADDER
   1600+ · 1200-1599 · 992-1199 · 768-991 · 576-767 · 0-575
   Every collapse below is a decision, not a default stack.
   ═══════════════════════════════════════════════════════════ */

/* ── 992-1199 · tablet landscape ───────────────────────── */
@media(max-width:1199px){
  .txgrid{grid-template-columns:repeat(2,1fr)}          /* services 3 → 2 */
  .rwrap{grid-template-columns:repeat(2,1fr)}           /* testimonials 3 → 2 */
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .bx--gold{grid-column:span 2;grid-row:span 1;min-height:340px}
  .cgrid{grid-template-columns:minmax(0,1fr) minmax(300px,54%)}
  .docgrid{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
  .travel .tgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ── 768-991 · tablet portrait ─────────────────────────── */
@media(max-width:991px){
  .visitwrap{grid-template-columns:1fr}
  .wpanel.on{grid-template-columns:minmax(0,40%) minmax(0,60%)}
  .igrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(130px,20vw,190px)}
  .i-a{grid-column:span 2;grid-row:span 2}.i-b{grid-column:span 1;grid-row:span 1}
  .i-c{grid-column:span 1;grid-row:span 1}.i-d{grid-column:span 2;grid-row:span 1}
  .fcols{grid-template-columns:repeat(3,1fr)}
  .fcols .fcol--wide ul{columns:1}
  .fcol--wide{grid-column:span 1}
}

/* ── 576-767 · large mobile ────────────────────────────── */
@media(max-width:767px){
  .txgrid{grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,2.6vw,1rem)}
  .txshot{aspect-ratio:4/3}
  .txbody{padding:clamp(.75rem,3vw,1rem) clamp(.8rem,3.2vw,1.05rem) clamp(1rem,3.6vw,1.2rem)}
  .txflip span{font-size:clamp(1rem,4.2vw,1.15rem);line-height:1.2}
  .txp{font-size:clamp(.72rem,2.9vw,.8rem);line-height:1.45}
  .txarrow{width:28px;height:28px;top:.6rem;right:.6rem}
  .txarrow svg{width:11px;height:11px}
  .txnum{left:.7rem;right:.7rem;bottom:.6rem;letter-spacing:.08em;
    font-size:clamp(.58rem,2.3vw,.66rem)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .rwrap{grid-template-columns:repeat(2,1fr);border:0;background:none;gap:.6rem}
  .rcard{padding:clamp(.9rem,3.4vw,1.15rem);
    border:1px solid var(--line);border-radius:var(--r-card);background:var(--bone)}
  .rcard+.rcard::before{display:none}
  .rcard p{font-size:clamp(.74rem,3vw,.82rem);line-height:1.55;margin-bottom:.85rem}
  .rcard .rname{font-size:clamp(.7rem,2.8vw,.78rem)}
  .rtop{gap:.5rem;margin-bottom:.7rem}
  .rtop img{width:34px;height:34px}
  .rquo{font-size:1.5rem;margin-bottom:.25rem}
  .rcard .stars{font-size:.7em}
  .rfeat{grid-template-columns:1fr}
  .rfeat figure{display:block;max-width:420px;margin-inline:auto;order:-1}
  .wpanel.on{grid-template-columns:1fr}
  .docgrid{grid-template-columns:1fr}
  .docimg{width:min(82vw,420px);margin-inline:auto}
  .travel .tgrid{grid-template-columns:1fr}
  .timg img{aspect-ratio:3/2}
  .cgrid{grid-template-columns:1fr}
  .cinfo{order:1}.form{order:2}
  .frow{grid-template-columns:1fr}                      /* one field per row */
  .oin{grid-template-columns:1fr}.octa{justify-content:flex-start}
  /* both plates come back: one above the statement, one below, centred */
  .manifesto{display:flex;flex-direction:column;align-items:center}
  .manifesto .wrap{order:2}
  .mplate{position:static;order:1;width:min(62%,260px);margin:0 auto clamp(1.6rem,5vw,2.4rem);
    transform:none!important}
  .mplate.r{order:3;margin:clamp(1.8rem,5.5vw,2.6rem) auto 0;width:min(70%,300px)}
  /* history: four cards become a vertical timeline */
  .step{border:0;background:none;padding:0 0 0 clamp(2.4rem,7vw,3.2rem);position:relative}
  .steps{gap:clamp(1.6rem,5vw,2.2rem)}
  .step::before{content:"";position:absolute;left:clamp(.5rem,2vw,.8rem);top:.4em;bottom:-1.6rem;
    width:1px;background:var(--line)}
  .step:last-child::before{display:none}
  /* two-up: only the second of each pair carries the rule, so it reads as a
     divider between 1|2 and 3|4 rather than a bar down the left edge */
  .steps{grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,4vw,1.8rem)}
  .step{padding:0 0 0 clamp(.9rem,3.5vw,1.3rem)}
  .step::before{left:0;top:.2em;bottom:.2em}
  .step:nth-child(odd){padding-left:0}
  .step:nth-child(odd)::before{display:none}
  .step:nth-child(even)::before{display:block}
  .step .sn{margin-bottom:.5rem;font-size:var(--card);color:var(--g-5);-webkit-text-stroke:0}
  .step:hover{transform:none}
  /* credentials: one headline stat, then a compact 2x2 of metrics.
     the 2-up cards get the gutter back as width. */
  .bgrid{grid-template-columns:repeat(2,1fr);gap:clamp(.55rem,2.2vw,.85rem)}
  .bx--wide,.bx--gold{grid-column:span 2}
  .bx{min-height:0;padding:clamp(1.1rem,4vw,1.4rem)}
  .bgrid > .bx:not(.bx--wide):not(.bx--gold){padding-inline:clamp(.85rem,3.2vw,1.15rem)}
  .bx .bn{font-size:clamp(2.2rem,11vw,3rem)}
  .bx .bxh .meta{display:none}          /* secondary label, clips at 2-up */
  .bx .bxh{gap:.55rem;margin-bottom:.9rem}
  .bx .bxh .ic{width:30px;height:30px}
  .bx .bxh .ic svg{width:14px;height:14px}
  /* inside the institute: all six visible, one dominant frame on top */
  .igrid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;
    gap:clamp(.5rem,2.2vw,.8rem);overflow:visible}
  .igrid figure{aspect-ratio:4/3}
  .igrid .i-a{grid-column:span 2;aspect-ratio:16/10}
  .igrid .i-b,.igrid .i-c,.igrid .i-d{grid-column:span 1;grid-row:auto}
  .igrid figcaption{opacity:1;transform:none;left:.7rem;bottom:.6rem}
  /* patient portraits: a real scroll rail, not a squeezed grid */
  .cmq{width:max-content}
  .cmq figure{width:clamp(120px,36vw,150px)}
  .fcols{display:block;columns:2;column-gap:clamp(1.2rem,4vw,1.8rem)}
  .fcol{break-inside:avoid;margin-bottom:clamp(1.2rem,4vw,1.8rem)}
  .fcol--pat,.fcol--visit{margin-bottom:0}
  /* Institute + Patients hold the left column, Treatments + Visit the right */
  .fcol--wide{break-before:column}
  .fbrand{grid-template-columns:1fr}
}

/* ── 0-575 · mobile ────────────────────────────────────── */
@media(max-width:575px){
  .bgrid{grid-template-columns:repeat(2,1fr)}   /* 2x2 metrics stays readable */
  .credchips{grid-template-columns:repeat(2,1fr)}
  .fcol--wide ul{columns:1}
}

/* ── desktop footer fills the screen, content spread top to bottom ── */
@media(min-width:992px){
  footer{min-height:100svh;display:flex;flex-direction:column;
    padding-block:clamp(3.5rem,5vw,5rem) 0}
  footer > .wrap{flex:1;display:flex;flex-direction:column;justify-content:space-between}
  .fcols{padding-block:clamp(2.4rem,4vw,3.6rem)}
  .fareas{padding-block:clamp(1.6rem,2.6vw,2.2rem)}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .mq,.cmq{transform:none!important}
}
/* ═══════════════════════════════════════════════════════════
   INTERIOR PAGES — page head, breadcrumb, prose, related rail.
   Additive only: nothing above is redefined, so the homepage
   renders exactly as before.
   ═══════════════════════════════════════════════════════════ */
.phead{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  padding-block:clamp(3.2rem,7vw,6rem) clamp(2.8rem,6vw,5rem)}
.phead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 0%,rgba(245,226,180,.10),transparent 62%)}
.phead > .wrap{position:relative;z-index:2}
.phead .kick{color:var(--g-2)}
.phead h1{margin:.7rem 0 0;max-width:19ch}
.phead .lead{color:rgba(247,243,235,.70);margin:clamp(1rem,2vw,1.4rem) 0 0;max-width:58ch}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  font-size:var(--small);color:rgba(247,243,235,.52)}
.crumb a{color:inherit;transition:color .3s}
.crumb a:hover{color:var(--g-2)}
.crumb span[aria-current]{color:rgba(247,243,235,.82)}
.crumb i{font-style:normal;opacity:.45}

.pcta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.5rem,3vw,2.2rem)}

/* the article body */
.prose{max-width:74ch}
.prose > * + *{margin-top:1.15em}
.prose h2{font-family:var(--serif);font-size:var(--d3);line-height:1.08;letter-spacing:-.022em;
  font-weight:400;margin:clamp(2.2rem,4vw,3.2rem) 0 0}
.prose h3{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;
  letter-spacing:-.016em;font-weight:400;margin:clamp(1.7rem,3vw,2.4rem) 0 0}
.prose p{font-size:var(--body);line-height:1.72;color:var(--ink-3);margin:0}
.prose h2 + p,.prose h3 + p{margin-top:.85em}
.prose ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.prose li{position:relative;padding-left:1.45rem;font-size:var(--body);
  line-height:1.65;color:var(--ink-3)}
.prose li::before{content:"";position:absolute;left:.15rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--g-3)}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:var(--g-3)}

/* two-up: copy on the left, a sticky contact card on the right */
.pbody{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,25%,340px);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.paside{position:sticky;top:calc(var(--head-h,96px) + 1.5rem);display:grid;gap:1rem}
.pcard{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.3rem,2vw,1.7rem);
  background:var(--paper-2)}
.pcard h3{font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;
  color:var(--mute);font-weight:500;margin:0 0 .9rem}
.pcard ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pcard a{display:block;padding:.35rem 0;font-size:var(--small);line-height:1.55;
  color:var(--ink-3);transition:color .3s,padding-left .3s}
.pcard a:hover{color:var(--ink);padding-left:.25rem}
.pcard a[aria-current]{color:var(--ink);font-weight:500}
.pcard .btn{width:100%;justify-content:center;margin-top:.9rem}

/* the hub page's index of treatments */
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.3rem);
  margin-top:var(--head-gap)}
.hubcard{display:block;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.25rem,2vw,1.6rem);background:var(--paper);
  transition:border-color .4s var(--ease),translate .4s var(--ease),box-shadow .4s var(--ease)}
.hubcard:hover{border-color:var(--g-3);translate:0 -3px;
  box-shadow:0 18px 40px -30px rgba(0,0,0,.45)}
.hubcard h3{font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.15;
  letter-spacing:-.016em;font-weight:400;margin:0;color:var(--ink)}
.hubcard p{margin:.55rem 0 0;font-size:var(--small);line-height:1.6;color:var(--mute)}
.hubcard .go{margin-top:.9rem;display:flex;align-items:center;gap:.4rem;
  font-size:var(--kick);text-transform:uppercase;letter-spacing:.14em;color:var(--g-4)}

/* the sitemap page */
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem);
  margin-top:var(--head-gap)}
.smap h2{font-size:var(--kick);text-transform:uppercase;letter-spacing:.16em;color:var(--mute);
  font-weight:500;margin:0 0 1rem;font-family:var(--sans)}
.smap ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.smap a{display:block;padding:.3rem 0;font-size:var(--small);line-height:1.6;color:var(--ink-3);
  transition:color .3s,padding-left .3s}
.smap a:hover{color:var(--ink);padding-left:.25rem}

/* serving-area chips are a statement, not navigation */
.fareas span{display:inline-block;font-size:var(--small);color:rgba(247,243,235,.55);
  padding:.28rem .8rem;border:1px solid var(--line-d);border-radius:var(--r-tag)}

@media(max-width:991px){
  .pbody{grid-template-columns:1fr}
  .paside{position:static;grid-template-columns:1fr 1fr;display:grid}
  .hubgrid,.smap{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .phead h1{max-width:100%}
  .paside{grid-template-columns:1fr}
  .hubgrid{grid-template-columns:1fr 1fr}
  .smap{grid-template-columns:1fr}
  .pcta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .pcta .btn{justify-content:center;padding-inline:.55rem;text-align:center}
}
@media(max-width:575px){
  .hubgrid{grid-template-columns:1fr}
}