/* =========================================================== 0 · tokens
   Dental Castle palette, taken straight from dentalcastle.css and pushed
   into a night register: the gold is the brand yellow, the greys are the
   brand sign-panel greys, the black is the page. */
:root{
  --ink:#08090b;            /* page black */
  --ink-2:#0d0f12;          /* raised black */
  --bone:#f2f0ea;           /* enamel white */
  --bone-dim:#b5b3ab;
  --muted:#7e7c76;
  --line:rgba(242,240,234,.13);
  --line-soft:rgba(242,240,234,.07);
  /* --gold is the site's accent: Dental Castle's brand yellow by default,
     overridden per site by the theme block each page carries in <head> */
  --gold:#f5d000;           /* --brand-yellow */
  --gold-rgb:245,208,0;
  --gold-deep:#e6c200;      /* --brand-yellow-deep */
  --gold-soft:#fff6bf;      /* --brand-yellow-soft */
  --panel:#8f8f8f;          /* --brand-panel-grey */
  --pad:clamp(20px,3.4vw,56px);
  --nav-h:82px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }
::selection{ background:var(--gold); color:#1a1a1a; }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:8px; left:8px; z-index:120; padding:10px 16px;
  background:var(--gold); color:#1a1a1a; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; transform:translateY(-200%); transition:transform .3s var(--ease);
}
.skip:focus{ transform:none }

/* =========================================================== 1 · layers
   #gl is the live world. Everything editorial sits in .page above it, and
   the grain / vignette / warm wash ride on top of both. The foreground
   silhouettes get their own plane (#fg-sky) so a cut-out can pass in front
   of the nav and the chapter rail. */
#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; background:#08090b; }
#glfallback{
  position:fixed; inset:0; z-index:0; display:none;
  background:
    radial-gradient(60% 42% at 50% 78%, rgba(var(--gold-rgb),.16), transparent 70%),
    radial-gradient(48% 40% at 50% 16%, rgba(255,246,191,.13), transparent 72%),
    linear-gradient(#05060a 0%, #0b0d11 46%, #15161a 100%);
}
body.no-gl #glfallback{ display:block }
body.no-gl #gl{ display:none }
#wash{
  position:fixed; inset:0; z-index:54; pointer-events:none; opacity:.55;
  mix-blend-mode:screen; transition:opacity 1.2s linear;
  background:radial-gradient(38% 30% at var(--wash-x,50%) var(--wash-y,34%), rgba(var(--gold-rgb),.16), transparent 72%);
}
#vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(124% 94% at 50% 42%, transparent 40%, rgba(3,3,5,.62) 100%);
}
#grain{
  position:fixed; inset:-1px; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:170px 170px;
}
.page{ position:relative; z-index:10 }

/* =========================================================== 2 · type */
.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); text-shadow:0 1px 16px rgba(3,3,5,.9);
}
h1,h2,h3{ font-weight:400; margin:0; letter-spacing:-.005em }
.display{
  font-family:var(--serif); text-transform:uppercase; line-height:1.04;
  letter-spacing:.005em; font-weight:500; text-shadow:0 2px 34px rgba(3,3,5,.74);
}
.h-hero{ font-size:clamp(34px,5.2vw,74px) }
.h-sec{ font-size:clamp(31px,4.4vw,66px) }
.gold{ color:var(--gold) }
.body-lg{ font-size:clamp(15px,1.12vw,18px); line-height:1.72; color:#dcdad2; text-shadow:0 1px 20px rgba(3,3,5,.88) }
.body{ font-size:15px; line-height:1.7; color:#bdbbb3; text-shadow:0 1px 18px rgba(3,3,5,.85) }
.num{ font-family:var(--serif); font-size:clamp(30px,2.8vw,44px); font-weight:500; letter-spacing:-.01em; color:var(--bone); font-variant-numeric:lining-nums tabular-nums }
.rule{ height:1px; background:var(--line); border:0; margin:0 }
.chapno{
  font-size:11px; font-weight:500; letter-spacing:.24em; color:var(--gold); text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* =========================================================== 3 · reveal */
[data-rv]{ opacity:0 }
[data-rv="up"]{ transform:translate3d(0,26px,0) }
[data-rv="fade"]{ transform:none }
[data-rv].rv-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
}
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top }
.word{
  display:inline-block; opacity:0; transform:translate3d(0,112%,0);
  will-change:transform,opacity;
  transition:transform .84s var(--ease-out), opacity .5s var(--ease-out);
  transition-delay:var(--word-delay,0ms);
}
.word-reveal.rv-in .word{ opacity:1; transform:none }

/* =========================================================== 4 · preloader */
#pre{
  position:fixed; inset:0; z-index:100; background:#08090b;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#pre.done{ opacity:0; visibility:hidden; pointer-events:none }
.pre-in{ width:min(420px,74vw); text-align:center }
.pre-mark{ margin:0 auto 24px; width:46px; height:46px; opacity:.92 }
.pre-word{ font-family:var(--serif); font-size:13px; letter-spacing:.44em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:20px }
.pre-bar{ position:relative; height:1px; background:rgba(242,240,234,.14); overflow:hidden }
.pre-bar i{ position:absolute; inset:0 100% 0 0; background:var(--gold); transition:right .35s linear }
.pre-meta{
  display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.pre-meta b{ font-weight:500; color:var(--bone-dim); font-variant-numeric:tabular-nums }

/* =========================================================== 5 · nav */
.nav{
  /* width from --vw, not right:0 — the page's own horizontal overflow makes
     the initial containing block wider than the screen and carries the
     burger off the right edge on a phone. */
  position:fixed; top:0; left:0; width:var(--vw,100%); height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:22px; padding:0 var(--pad);
  transition:transform .55s var(--ease);
}
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(8,9,11,.66);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; transition:opacity .5s linear;
}
.nav.stuck::before{ opacity:1 }
.nav::after{
  content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s;
}
.nav.stuck::after{ opacity:1 }
.nav.hide{ transform:translate3d(0,-101%,0) }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto }
.brand svg{ width:30px; height:30px; display:block }
.brand img{ width:30px; height:30px; display:block; object-fit:contain; border-radius:6px }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:4px }
.brand-tx b{ font-family:var(--serif); font-size:13px; font-weight:500; letter-spacing:.24em; text-transform:uppercase }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.3em; color:var(--muted); text-transform:uppercase }
.nav-links{ display:flex; gap:clamp(16px,2.4vw,42px); margin-left:auto }
.nav-link{
  position:relative; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); display:block; height:15px; line-height:15px; overflow:hidden;
}
.nav-link span{ display:block; height:15px; line-height:15px; transition:transform .55s var(--ease-out), color .3s }
.nav-link .alt{ position:absolute; inset:0; transform:translate3d(0,100%,0); color:var(--bone); letter-spacing:.3em }
.nav-link:hover span{ transform:translate3d(0,-100%,0) }
.nav-link:hover .alt{ transform:none }
.nav-link.on{ color:var(--bone) }
.nav-link.on::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold) }
.nav-cta{
  margin-left:clamp(14px,2vw,30px); padding:11px 20px; flex:0 0 auto;
  border:1px solid rgba(var(--gold-rgb),.5); color:var(--gold);
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.nav-cta:hover{ background:var(--gold); color:#1a1a1a }
.nav-burger{ display:none; margin-left:auto; width:26px; height:16px; position:relative; flex:0 0 auto }
.nav-burger i{ position:absolute; right:0; height:1.5px; background:var(--bone); transition:width .45s var(--ease-out), transform .45s var(--ease-out) }
.nav-burger i:nth-child(1){ top:4px; width:26px }
.nav-burger i:nth-child(2){ top:11px; width:17px }
.nav.menu-open .nav-burger i:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.nav.menu-open .nav-burger i:nth-child(2){ width:26px; transform:translateY(-3.5px) rotate(-45deg) }
.sheet{
  position:fixed; inset:0; z-index:49; background:rgba(8,9,11,.96);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:var(--nav-h) var(--pad) var(--pad);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.sheet.open{ opacity:1; visibility:visible }
.sheet a{
  font-family:var(--serif); font-size:clamp(28px,8vw,44px); text-transform:uppercase;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.sheet a small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:.24em; color:var(--gold); margin-bottom:4px }

/* =========================================================== 6 · hero */
.hero{ position:relative; min-height:100svh; padding:0 var(--pad); display:flex; flex-direction:column }
.hero::before{
  content:''; position:absolute; left:0; right:0; top:0; height:44%; pointer-events:none;
  background:linear-gradient(rgba(4,5,7,.74), rgba(4,5,7,.34) 46%, transparent);
}
/* the causeway is the brightest thing in the scene and it lands exactly
   where the chapter index sits — hold it back */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  background:linear-gradient(transparent, rgba(4,5,7,.42) 44%, rgba(4,5,7,.8));
}
.hero-top{ padding-top:calc(var(--nav-h) + clamp(10px,2.4vh,32px)); max-width:min(660px,52vw); position:relative; z-index:2 }
.hero-top .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:22px }
.hero-top .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold) }
.hero h1{ margin-bottom:20px }
.hero-sub{ max-width:400px; text-shadow:0 1px 26px rgba(3,3,5,.95) }
.hero-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn-gold{ background:var(--gold); color:#1a1a1a }
.btn-gold:hover{ background:var(--gold-soft) }
.btn-ghost{ border:1px solid var(--line); color:var(--bone) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold) }
.hero-spacer{ flex:1 1 auto; min-height:clamp(40px,8vh,120px) }
.hero-foot{ padding-bottom:clamp(22px,4.2vh,44px); position:relative; z-index:2 }
.hero-cue{
  display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:16px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--bone-dim);
}
.hero-cue .track{ width:54px; height:1px; background:var(--line); position:relative; overflow:hidden }
.hero-cue .track i{ position:absolute; inset:0; background:var(--bone); transform-origin:left; animation:cue 2.8s var(--ease-io) infinite }
@keyframes cue{ 0%{transform:scaleX(0)} 45%{transform:scaleX(1)} 100%{transform:scaleX(1);opacity:0} }
.chapters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2.2vw,38px);
  border-top:1px solid var(--line); padding-top:18px;
}
.chapter{ text-align:left; display:block }
.chapter b{ display:block; font-size:11px; letter-spacing:.24em; color:var(--gold); font-weight:500; margin-bottom:8px; font-variant-numeric:tabular-nums }
.chapter span{ display:block; font-family:var(--serif); font-size:clamp(13px,1.15vw,17px); text-transform:uppercase; color:var(--bone-dim); transition:color .4s }
.chapter:hover span{ color:var(--bone) }

/* ---- the hero logo (theme heroLogo): the brand's own mark, big enough
   to read, on the eyebrow's line */
.hero-brand{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-bottom:clamp(14px,2.4vh,24px) }
.hero-brand .eyebrow{ margin:0 }
/* the logo takes a line, so the title gives a little back */
.hero-brand ~ .h-hero{ font-size:clamp(32px,4.4vw,62px); max-width:11em }
.hero-logo{ display:block; width:auto; flex:none; box-shadow:0 14px 40px rgba(3,4,6,.45) }
.hero-logo--card{ height:clamp(60px,8.4vh,76px); border-radius:14px; background:#fff; padding:3px }
.hero-logo--plate{ height:clamp(38px,5.6vh,52px); border-radius:4px; border:1px solid rgba(236,232,222,.14) }
@media (max-width:760px){ .hero-logo--card{ height:58px; border-radius:12px } .hero-logo--plate{ height:36px } }

/* ---- the wordmark hero (theme heroWordmark): the brand's giant letters
   stand in the 3D world, a hedge in front of their feet, leaves drifting
   across; a vertical word and the work reel on the right */
.hero--wordmark .hero-top{ max-width:min(470px,40vw); z-index:3 }
.hero--wordmark .h-hero{ font-family:var(--sans); font-weight:400; font-size:clamp(26px,3vw,44px); line-height:1.12; letter-spacing:0; text-shadow:0 2px 30px rgba(3,4,6,.8) }
.hero--wordmark .hero-sub{ max-width:360px; font-size:15px }
.hero--wordmark .hero-acts{ margin-top:18px }
.hero--wordmark .hero-acts .btn{ padding:12px 20px }
.hero--wordmark .hero-foot{ z-index:3 }
.hero--wordmark .hero-cue{ justify-content:flex-start }
.hero--wordmark .chapters{ border-top-color:rgba(236,232,222,.14) }
.hero--wordmark .chapter b{ font-family:var(--sans); font-weight:300; font-size:clamp(26px,3vw,46px); letter-spacing:.02em; color:var(--bone); margin-bottom:2px }
.hero--wordmark .chapter span{ font-family:var(--sans); font-size:10px; letter-spacing:.24em; color:var(--bone-dim) }

.hero-word{
  position:absolute; left:-1.5vw; right:-1.5vw; top:52%; z-index:1; pointer-events:none;
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--sans); font-weight:600; font-size:min(31vw,56vh); line-height:.78; letter-spacing:-.02em;
}
/* with the grass: the word is laid out, not floated. It takes the room
   left between the copy and the chapter row (a size container, so the
   letters scale to that room), keeps clear of the reel, and stands in
   the grass. Nothing on the page sits on top of it. */
.hero--grass .hero-top{ order:1 }
.hero--grass .hero-spacer{ display:none }
.hero--grass .hero-foot{ order:3 }
.hero--grass .hero-word{
  position:relative; order:2; left:auto; right:auto; top:auto; display:block;
  flex:1 1 auto; min-height:90px;
  margin:clamp(14px,2.6vh,30px) calc(clamp(170px,17vw,240px) + 3vw) clamp(6px,1.4vh,16px) 0;
}
.hero-word-svg{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 16px 28px rgba(3,4,6,.6));
}
.hero-word-svg text{ font-family:inherit; font-weight:inherit; stroke:rgba(8,12,8,.35); stroke-width:1.2px; paint-order:stroke }
/* the chapter dots on the right already index the chapters; the grass
   hero gives that row's room to the letters */
.hero--grass .chapters{ display:none }
.hero--grass .hero-cue{ margin-bottom:0 }
.hero-word span{ color:var(--c,var(--bone)); filter:drop-shadow(0 26px 60px rgba(3,4,6,.55)) }
.hero-hedge{ position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2; pointer-events:none }
/* grass clumps (heroWordmark.grass): the back row stands behind the
   letters, the front row over their feet, and the ground darkens under
   the chapter row so it stays readable */
.hero-grass{ position:absolute; left:0; right:0; bottom:0; height:var(--gh); z-index:1; pointer-events:none; overflow:hidden }
.hero-grass img{
  position:absolute; left:var(--x); bottom:-9%; height:calc(100% * var(--k,1)); width:auto; max-width:none;
  transform:translateX(-50%) scaleX(var(--f,1)); transform-origin:50% 100%;
}
.hero-grass--back{ --gh:min(30vh,250px); z-index:1 }
.hero-grass--back img{ filter:brightness(.55) saturate(.85) }
.hero-grass--front{ --gh:min(17vh,140px); z-index:2 }
.hero-grass--front img{ filter:brightness(.92) drop-shadow(0 -6px 18px rgba(0,0,0,.35)) }
.hero-grass--front::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(to bottom, transparent, rgba(6,12,6,.6) 40%, rgba(4,8,4,.92));
}
.hero--grass .hero-foot{ text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.8) }
.hero--grass .hero-cue,.hero--grass .chapter span,.hero--grass .hero-reel-cap{ color:var(--bone) }
.hero--grass .hero-reel-cap{ text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.85) }
.hero--grass .hero-reel{ bottom:calc(clamp(22px,4.2vh,44px) + 44px) }
.hero-hedge svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 -8px 26px rgba(0,0,0,.35)) }
.hero-leaves{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none }
.hero-leaves i{
  position:absolute; top:-4%; left:var(--x); width:calc(15px * var(--s)); height:calc(9px * var(--s));
  border-radius:0 100% 0 100%; background:hsl(var(--h) 52% 44%); opacity:0;
  animation:hero-leaf var(--t) linear calc(var(--d) * -1) infinite;
}
@keyframes hero-leaf{
  0%{ transform:translate3d(0,0,0) rotate(0); opacity:0 }
  8%{ opacity:.9 }
  50%{ transform:translate3d(7vw,52vh,0) rotate(230deg) }
  90%{ opacity:.75 }
  100%{ transform:translate3d(-3vw,106vh,0) rotate(470deg); opacity:0 }
}
.hero-vert{
  position:absolute; right:calc(var(--pad) + 34px); top:calc(var(--nav-h) + 26px); z-index:3; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:.18em;
  font-weight:300; font-size:clamp(26px,2.7vw,42px); line-height:1.1;
  color:rgba(236,232,222,.8); text-shadow:0 2px 22px rgba(3,4,6,.7);
}
/* one syllable per line: stacked, each shaped normally (a vertical
   writing mode would split conjuncts such as చ్చ) */
.hero-vert span{ display:block }
.hero-reel{
  position:absolute; right:var(--pad); bottom:calc(clamp(22px,4.2vh,44px) + clamp(84px,11vh,112px)); z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.hero-reel-frame{
  position:relative; display:block; width:clamp(170px,17vw,240px); aspect-ratio:16/10; overflow:hidden;
  border:1px solid rgba(236,232,222,.16); box-shadow:0 18px 50px rgba(3,4,6,.55);
  background:radial-gradient(60% 70% at 70% 30%, rgba(var(--gold-rgb),.28), transparent), linear-gradient(135deg,#1f3b19,#0a1309);
}
.hero-reel-frame img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.hero-reel:hover .hero-reel-frame img{ transform:scale(1.05) }
.hero-reel-play{
  position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:rgba(8,10,12,.35); border:1px solid rgba(255,255,255,.7); backdrop-filter:blur(4px);
}
.hero-reel-play::after{ content:''; position:absolute; left:17px; top:13px; border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent #fff }
.hero-reel-cap{ max-width:220px; text-align:right; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim) }
.reel-box{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(3,4,6,.88); padding:var(--pad) }
.reel-box video{ width:min(1100px,100%); max-height:82vh; background:#000 }
.reel-box button{ position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); color:var(--bone); font-size:22px; line-height:1; background:transparent; cursor:pointer }
@media (max-width:760px){
  .hero--wordmark .hero-top{ max-width:100% }
  .hero-word{ top:56%; font-size:40vw }
  .hero--grass .hero-word{ margin:16px 0 26px; min-height:110px }
  .hero-grass--back{ --gh:120px }
  .hero-grass--front{ --gh:64px }
  .hero-hedge{ height:30% }
  .hero-vert,.hero-reel{ display:none }
  .hero--wordmark .chapter b{ font-size:24px }
}
@media (prefers-reduced-motion:reduce){ .hero-leaves{ display:none } }

/* =========================================================== 7 · sections */
.sec{ position:relative; padding:clamp(96px,17vh,210px) var(--pad); min-height:100svh; display:flex; flex-direction:column; justify-content:center }
/* A scrim on the reading side. The world behind is allowed to be bright —
   the copy is not allowed to become unreadable because of it. */
.sec::before,.foot::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(6,7,9,.92) 0%, rgba(6,7,9,.8) 36%, rgba(6,7,9,.42) 64%, rgba(6,7,9,.1) 100%);
}
.sec > *:not(.fg),.foot > *:not(.fg){ position:relative; z-index:2 }
/* theme.lightWorld: a white scene needs the copy's side held darker */
.world-light .hero::before{
  height:100%;
  background:
    linear-gradient(90deg, rgba(6,7,9,.86) 0%, rgba(6,7,9,.68) 32%, rgba(6,7,9,.22) 58%, transparent 76%),
    linear-gradient(rgba(4,5,7,.55), transparent 36%);
}
.world-light .sec::before,.world-light .foot::before{
  background:linear-gradient(90deg, rgba(6,7,9,.94) 0%, rgba(6,7,9,.86) 38%, rgba(6,7,9,.55) 66%, rgba(6,7,9,.22) 100%);
}
@media (max-width:760px){
  .world-light .hero::before{ height:100%; background:linear-gradient(rgba(4,5,7,.88), rgba(4,5,7,.72) 58%, rgba(4,5,7,.35)) }
  .world-light .sec::before,.world-light .foot::before{ background:linear-gradient(rgba(6,7,9,.7), rgba(6,7,9,.88) 16%, rgba(6,7,9,.88) 84%, rgba(6,7,9,.7)) }
}
.sec-head{ max-width:min(720px,58vw) }
.sec-head .chapno{ display:block; margin-bottom:16px }
.sec-head h2{ margin-bottom:22px }

/* chapter cards — the treatments */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,28px); margin-top:clamp(40px,6vh,76px) }
.card{ display:block; text-align:left }
.card-frame{
  display:block; position:relative; overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(72% 54% at 50% 42%, rgba(var(--gold-rgb),.1), transparent 70%),
    linear-gradient(#111317, #08090b);
}
.card-frame img{
  width:100%; height:100%; object-fit:contain; padding:8%;
  filter:saturate(.82) contrast(1.05) brightness(.86);
  transform:scale(1); transition:transform 1.1s var(--ease-out), filter .8s var(--ease-out);
}
.card:hover .card-frame img{ transform:scale(1.05); filter:saturate(1) contrast(1.03) brightness(1) }
/* no photo: a blueprint sheet in the accent, numbered, instead of an
   empty dark frame */
.card-frame.is-blank,.blog-frame.is-blank{
  background:
    linear-gradient(rgba(var(--gold-rgb),.14) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, rgba(var(--gold-rgb),.14) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(rgba(var(--gold-rgb),.28) 1px, transparent 1px) 0 0/110px 110px,
    linear-gradient(90deg, rgba(var(--gold-rgb),.28) 1px, transparent 1px) 0 0/110px 110px,
    linear-gradient(#0e1726, #080c14);
}
.card-frame.is-blank::before{
  content:attr(data-n); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:clamp(54px,6vw,96px); color:rgba(var(--gold-rgb),.55); letter-spacing:.04em;
}
/* photographic services (every site but the clinic's cut-out renders)
   fill the frame instead of floating in it */
.cards.is-photo .card-frame img{ object-fit:cover; padding:0 }
.card-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(8,9,11,0) 42%, rgba(8,9,11,.82));
}
.card-mark{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .45s var(--ease);
}
.card:hover .card-mark,.card:focus-visible .card-mark{ opacity:1 }
.card-mark i{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(242,240,234,.5);
  display:grid; place-items:center; backdrop-filter:blur(3px);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.card:hover .card-mark i{ background:rgba(var(--gold-rgb),.92); border-color:var(--gold) }
.card-mark svg{ width:12px; height:12px; fill:var(--bone); transition:fill .45s }
.card:hover .card-mark svg{ fill:#1a1a1a }
.card-cap{ padding-top:14px; display:flex; gap:12px; align-items:baseline }
.card-cap b{ font-size:10px; letter-spacing:.2em; color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums; flex:0 0 auto }
.card-cap > span{ display:block; font-family:var(--serif); font-size:clamp(14px,1.25vw,19px); text-transform:uppercase; color:var(--bone); line-height:1.2 }
.card-cap em{ display:block; font-style:normal; font-size:13px; line-height:1.5; color:#aeaca4; margin-top:4px; letter-spacing:.02em }

/* the blog — three notes from the doctors, not a full blog engine */
/* There's no per-post route in this prototype, so cards stay soft CTAs
   (href="#visit") like the treatment cards, rather than links to pages
   that don't exist here. Each card carries its own blurred dark backing
   (same technique as the specialists gallery) since the section runs
   full-width past where the reading scrim reaches. */
.blogs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.2vw,34px); margin-top:clamp(40px,6vh,76px) }
.blog-card{
  display:block; text-align:left; border:1px solid var(--line-soft);
  background:rgba(6,7,9,.58);
  backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.blog-card:hover{ border-color:rgba(var(--gold-rgb),.5); transform:translateY(-5px) }
.blog-frame{
  display:block; position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(160deg,#141519,#0a0b0d);
}
.blog-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.86) contrast(1.03) brightness(.9);
  transform:scale(1); transition:transform 1.1s var(--ease-out), filter .8s var(--ease-out);
}
.blog-card:hover .blog-frame img{ transform:scale(1.05); filter:saturate(1) contrast(1.01) brightness(1) }
.blog-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(8,9,11,0) 55%, rgba(8,9,11,.6));
}
.blog-cat{
  position:absolute; left:12px; top:12px; z-index:1;
  padding:5px 11px; border-radius:20px; background:rgba(6,7,9,.72); border:1px solid rgba(var(--gold-rgb),.42);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.blog-body{ padding:clamp(16px,1.8vw,20px) }
.blog-title{
  font-family:var(--serif); font-size:clamp(19px,1.6vw,23px); font-weight:500; line-height:1.25;
  margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-excerpt{
  font-size:14px; line-height:1.62; color:#b3b1a9; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-meta{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8f8d86;
  border-top:1px solid var(--line-soft); padding-top:12px;
}

/* the specialists — a portrait gallery of arched niches */
/* Each doctor stands in a pointed-arch niche cut to the gate's own
   profile, hung like a portrait gallery down the colonnade: a gold arch
   line that draws itself in on reveal, a roman-numeral keystone, a brass
   plaque underneath. Portraits wait in a muted, old-gallery grade and warm
   to full colour when approached; the bio rises inside the niche on hover
   or focus. The middle column hangs lower so the row reads as a colonnade
   rather than a grid. Every niche keeps its own blurred dark backing
   because the 3D colonnade stays bright behind this chapter. */
.people{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,40px);
  margin-top:clamp(44px,7vh,84px); padding-bottom:clamp(20px,4vh,48px);
}
.person{
  --arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V54C0 28 22 11 50 0c28 11 50 28 50 54v76z'/%3E%3C/svg%3E");
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  outline-offset:6px;
}
.person:nth-child(3n+2){ margin-top:clamp(40px,7vh,88px) }
.person-arch{
  position:relative; display:block; width:100%; aspect-ratio:10/13;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
/* the niche itself: dark stone, the portrait masked to the arch */
.person-window{
  position:absolute; inset:9px; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 12%,#23211b,#0b0c0e 70%);
  -webkit-mask:var(--arch) center/100% 100% no-repeat; mask:var(--arch) center/100% 100% no-repeat;
}
/* monogram, visible whenever the photograph is missing or still loading */
.person-window::before{
  content:attr(data-initials); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; padding-top:12%;
  font-family:var(--serif); font-size:clamp(46px,6vw,86px); letter-spacing:.06em;
  color:rgba(var(--gold-rgb),.32);
}
.person-window img{
  position:relative; width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  filter:grayscale(.62) sepia(.28) brightness(.78) contrast(1.06);
  transform:scale(1.02);
  transition:filter 1s var(--ease-out), transform 1.4s var(--ease-out);
}
/* lamplight falling from the crown of the arch */
.person-window::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 42% at 50% 0%,rgba(255,214,120,.34),rgba(255,214,120,0) 70%),
    linear-gradient(rgba(8,9,11,0) 48%,rgba(8,9,11,.82));
  opacity:.55; transition:opacity .9s var(--ease-out);
}
.person-frame{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.person-frame path{
  fill:none; stroke:var(--gold); stroke-width:.42; stroke-linejoin:round; opacity:.62;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.9s var(--ease-io) .15s, opacity .6s var(--ease);
}
.person-frame path + path{ stroke-width:.22; opacity:.28 }
.person.rv-in .person-frame path{ stroke-dashoffset:0 }
.person-no{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%) rotate(45deg);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--ink); border:1px solid rgba(var(--gold-rgb),.6);
}
.person-no b{
  transform:rotate(-45deg); font-family:var(--serif); font-weight:500; font-size:14px;
  letter-spacing:.04em; color:var(--gold); line-height:1;
}
/* the bio rises inside the niche */
.person-bio{
  position:absolute; left:9px; right:9px; bottom:9px;
  padding:clamp(56px,8vh,90px) clamp(16px,2vw,26px) clamp(18px,2.4vw,28px);
  background:linear-gradient(rgba(8,9,11,0),rgba(8,9,11,.86) 42%,rgba(8,9,11,.94));
  font-size:13px; line-height:1.55; color:var(--bone); text-align:left;
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.person-bio span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden }
/* the plaque */
.person-plaque{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:calc(100% - 18px); margin-top:-1px; padding:18px 14px 16px;
  background:linear-gradient(180deg,rgba(14,14,12,.9),rgba(6,7,9,.82));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(var(--gold-rgb),.22); border-top:0;
}
.person-plaque::before{
  content:''; position:absolute; left:14%; right:14%; top:0; height:1px;
  background:linear-gradient(90deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.75),rgba(var(--gold-rgb),0));
}
.person-nm{
  font-family:var(--serif); font-size:clamp(17px,1.55vw,22px); line-height:1.15;
  text-transform:uppercase; letter-spacing:.06em;
}
.person-sp{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); line-height:1.5 }
.person-meta{
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.person-meta span + span::before{ content:'◆'; margin-right:10px; font-size:6px; vertical-align:2px; opacity:.6 }
.person-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .4s var(--ease), gap .5s var(--ease-out);
}
.person-cta i{ font-style:normal; color:var(--gold) }
/* approached: colour, lamplight, bio, a brighter arch */
.person:hover .person-window img,.person:focus-visible .person-window img{
  filter:none; transform:scale(1.07);
}
.person:hover .person-window::after,.person:focus-visible .person-window::after{ opacity:1 }
.person:hover .person-frame path,.person:focus-visible .person-frame path{ opacity:1 }
.person:hover .person-bio,.person:focus-visible .person-bio{ opacity:1; transform:none; transition-delay:.08s }
.person:hover .person-cta,.person:focus-visible .person-cta{ color:var(--gold); gap:14px }
.people-hint{
  display:none; justify-content:flex-end; align-items:center; gap:10px; margin-top:12px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim);
  text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9);
}
.people-hint i{ font-style:normal; color:var(--gold) }
/* touch screens never hover: keep the portrait warm and skip the overlay */
@media (hover:none){
  .person-window img{ filter:saturate(.9) brightness(.92) }
  .person-window::after{ opacity:.8 }
  .person-bio{ display:none }
  .person-cta{ color:var(--gold) }
}

/* the outcome — stats + a held quote */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,34px); margin-top:clamp(40px,6vh,72px);
  padding:clamp(22px,3.2vh,36px) clamp(18px,2vw,32px); border:1px solid var(--line-soft); border-top-color:rgba(var(--gold-rgb),.35);
  background:rgba(7,8,10,.62); backdrop-filter:blur(12px) saturate(1.05); -webkit-backdrop-filter:blur(12px) saturate(1.05);
}
.stat b{ display:block; margin-bottom:8px }
.stat span{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold) }
.stat em{ display:block; font-style:normal; font-size:13px; line-height:1.5; color:#b3b1a9; margin-top:7px }
.quote{ max-width:min(700px,58vw); margin:clamp(40px,6vh,78px) 0 0 }
.quote p{ font-family:var(--serif); font-size:clamp(20px,2.5vw,38px); line-height:1.3; margin:0 0 18px }
.quote footer{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted) }
.quote .stars{ color:var(--gold); letter-spacing:.24em; font-size:12px; margin-bottom:18px }

/* Service mode reuses this same #outcomeStats slot (still a 4-column
   .stats grid) for the service's own benefits — a proper icon-card
   instead of a number, since a benefit is a claim, not a metric. */
.benefit-card{
  padding:clamp(16px,1.8vw,20px); border:1px solid var(--line-soft);
  background:rgba(6,7,9,.4);
}
.benefit-card i{
  display:block; width:34px; height:34px; margin-bottom:14px; border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.4); position:relative;
}
.benefit-card i::after{
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-style:normal; font-size:14px;
}
.benefit-card b{
  display:block; font-family:var(--serif); font-weight:400; font-size:clamp(15px,1.3vw,18px);
  text-transform:uppercase; color:var(--bone); margin-bottom:8px; letter-spacing:.01em;
}
.benefit-card em{ display:block; font-style:normal; font-size:12px; line-height:1.6; color:var(--muted) }

/* A price list for the service's own pricing.items — only shown (and
   only fetched) when ?service=<slug> resolves and that file actually has
   items; 4 of the 12 service files don't, so this stays display:none by
   default rather than rendering an empty card. */
.pricing-list{
  max-width:min(640px,54vw); margin:clamp(28px,4vh,44px) 0 0;
  border-top:1px solid var(--line);
}
.price-item{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  font-size:13px; color:#c2c0b8;
}
.price-item b{ font-weight:400; color:var(--bone) }
.price-item span{ color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap }
.pricing-list em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:12px }

/* =========================================================== 8 · footer
   The visit chapter (enquiry beside compact branch cards) sits over the
   world like every chapter; the site footer under it is solid, full
   width and never shows the 3D through — it reads as the end of the page. */
.foot{ position:relative; padding:clamp(80px,13vh,170px) var(--pad) 0 }
.foot .sec-head{ max-width:min(760px,62vw) }
.visit-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(18px,2.6vw,40px);
  align-items:start; margin-top:clamp(36px,6vh,64px); position:relative; z-index:2;
}
.visit-grid .enq-wrap{ margin-top:0; max-width:none }
.visit-grid.is-branches-only{ grid-template-columns:1fr }
.foot-grid{ display:grid; gap:14px; position:relative; z-index:2 }
.visit-grid.is-branches-only .foot-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)) }
.branch{
  display:grid; grid-template-columns:clamp(92px,10vw,140px) minmax(0,1fr); gap:6px 20px; align-content:start;
  padding:18px; border:1px solid var(--line); background:rgba(8,9,11,.74);
  backdrop-filter:blur(14px) saturate(1.05); -webkit-backdrop-filter:blur(14px) saturate(1.05);
}
.branch:not(:has(.branch-photo)){ grid-template-columns:minmax(0,1fr) }
.branch-photo{
  grid-row:1 / span 3; display:block; position:relative; width:100%; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--line-soft); background:linear-gradient(160deg,#141519,#0a0b0d);
}
.branch-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.04) brightness(.92);
  transform:scale(1); transition:transform 1.1s var(--ease-out), filter .8s var(--ease-out);
}
.branch:hover .branch-photo img{ transform:scale(1.05); filter:saturate(1) contrast(1.02) brightness(1) }
.branch h3{ font-family:var(--serif); font-weight:500; font-size:clamp(19px,1.6vw,24px); text-transform:uppercase; line-height:1.1; margin:2px 0 0 }
.branch p{ font-size:14px; color:#bdbbb3; line-height:1.6; margin:0 }
.branch-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.branch-links a{
  padding:8px 12px; border:1px solid rgba(var(--gold-rgb),.42); color:var(--gold);
  font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.branch-links a:hover{ background:var(--gold); color:#1a1a1a }

.site-foot{
  position:relative; z-index:3; margin:clamp(64px,10vh,120px) calc(-1 * var(--pad)) 0;
  padding:clamp(48px,7vh,80px) var(--pad) 0; background:#07080a; border-top:1px solid var(--line-soft);
}
.site-foot::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.65), transparent);
}
.sf-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,64px) }
.sf-brand .brand img{ width:40px; height:40px }
.sf-brand p{ margin:18px 0 0; font-size:14px; line-height:1.7; color:#a9a79f; max-width:42ch }
.sf-col h4{ margin:0 0 16px; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.sf-col ul,.sf-social{ list-style:none; margin:0; padding:0 }
.sf-col ul{ display:grid; gap:10px }
.sf-col a{ font-size:14px; color:#d2d0c8; transition:color .3s var(--ease) }
.sf-col a:hover,.sf-social a:hover{ color:var(--gold) }
.sf-contact li{ display:grid; gap:3px; font-size:14px; line-height:1.55; color:#d2d0c8 }
.sf-contact li + li{ margin-top:4px }
.sf-contact span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8a887f }
.sf-social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.sf-social a{ display:inline-block; padding:7px 12px; border:1px solid var(--line); font-size:12px; color:#d2d0c8; transition:color .3s, border-color .3s }
.sf-social a:hover{ border-color:var(--gold) }
.sf-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  margin-top:clamp(40px,6vh,64px); padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft); font-size:12px; color:#7d7b75;
}
.sf-bottom a{ color:var(--gold) }
@media (max-width:1040px){
  .visit-grid{ grid-template-columns:1fr }
  .sf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:560px){
  .sf-grid{ grid-template-columns:1fr }
  .branch{ grid-template-columns:84px minmax(0,1fr); gap:6px 14px; padding:14px }
}
.foot-note{ margin-top:20px; font-size:10px; line-height:1.9; letter-spacing:.06em; color:#5e5c57; max-width:70ch; position:relative; z-index:2; text-transform:none }

/* =========================================================== 9 · chapter rail */
.rail{
  position:fixed; right:calc(var(--pad) * .58); top:50%; transform:translateY(-50%);
  z-index:52; display:flex; flex-direction:column; gap:12px; align-items:center;
}
.rail button{ width:18px; height:18px; display:grid; place-items:center }
.rail i{ width:5px; height:5px; border-radius:50%; background:rgba(242,240,234,.26); transition:background .4s, transform .4s var(--ease-out) }
.rail button[aria-current="true"] i{ background:var(--gold); transform:scale(1.7) }

/* =========================================================== 10 · foreground
   Each chapter owns its silhouette stage. When the chapter goes live the
   stage is re-parented into #fg-sky and becomes a fixed lower-viewport
   plane; its predecessor stays there just long enough to blur and fade
   before it is handed back. */
/* kage lets its cut-outs pass in front of the navigation. Here the copy has
   to stay legible and clickable, so the plane sits above the world and
   below the page instead — the collage depth survives, the reading does too. */
#fg-sky{ position:fixed; inset:0; z-index:9; pointer-events:none }
.fg{ position:absolute; inset:0; pointer-events:none; opacity:0; z-index:0 }
.fg.fg-active,.fg.fg-retiring{ position:fixed; inset:0; opacity:1 }
.fg-el{ position:absolute; display:block; opacity:0; bottom:0 }
.fg-el > svg{
  display:block; width:100%; height:auto;
  /* the 1px upward gold shadow is a rim light: it catches every top edge of
     every silhouette at once, without hand-authoring highlights per path */
  filter:drop-shadow(0 -1px 0 rgba(var(--gold-rgb),.22)) drop-shadow(0 -2px 26px rgba(3,3,5,.9));
  transition:opacity 1.25s var(--ease-out), transform 1.35s var(--ease-out), filter 1.1s var(--ease-out);
}
[data-fg-in="up"]{ transform:translate3d(0,14%,0) }
[data-fg-in="left"]{ transform:translate3d(-11%,7%,0) }
[data-fg-in="right"]{ transform:translate3d(11%,7%,0) }
.fg.fg-active .fg-el{
  opacity:1; transform:none;
  transition:opacity 1.25s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay:var(--fg-delay,0ms);
}
.fg .fg-el:nth-child(2){ --fg-delay:95ms }
.fg .fg-el:nth-child(3){ --fg-delay:190ms }
.fg .fg-el:nth-child(4){ --fg-delay:285ms }
.fg.fg-retiring .fg-el{ opacity:0; transition:opacity .85s var(--ease-io), filter .85s var(--ease-io) }
.fg.fg-retiring .fg-el > svg{ filter:blur(9px) drop-shadow(0 -2px 26px rgba(3,3,5,.9)) }

/* Placement is keyed off [data-fg], never off the section it came from.
   Everything is anchored to the bottom band: a silhouette may crowd the
   lower third of the frame, never the middle of it. */
[data-fg="threshold"] .fg-wall   { left:-4%;  bottom:-30px;  width:clamp(380px,44vw,720px) }
[data-fg="threshold"] .fg-pillar { right:-2%; bottom:-118px; width:clamp(105px,12vw,190px) }
[data-fg="threshold"] .fg-hedge  { left:6%;   bottom:-116px; width:clamp(400px,56vw,960px) }

[data-fg="treatments"] .fg-sconce{ left:-2%;  bottom:-172px; width:clamp(96px,11vw,170px) }
[data-fg="treatments"] .fg-hedge { right:-6%; bottom:-62px;  width:clamp(330px,40vw,700px) }
[data-fg="treatments"] .fg-rail  { left:-8%;  bottom:-52px;  width:clamp(420px,52vw,900px) }

[data-fg="specialists"] .fg-wall  { right:-8%; bottom:-86px; width:clamp(360px,44vw,780px) }
[data-fg="specialists"] .fg-stones{ left:-4%;  bottom:-46px; width:clamp(250px,30vw,520px) }
[data-fg="specialists"] .fg-hedge { left:24%;  bottom:-84px; width:clamp(280px,33vw,580px) }

[data-fg="outcome"] .fg-ridge { left:-8%;  bottom:calc(-1 * min(19vh,15vw)); width:min(148vh,116%) }
[data-fg="outcome"] .fg-pillar{ left:-6%;  bottom:-176px; width:clamp(110px,13vw,205px) }
[data-fg="outcome"] .fg-hedge { right:-7%; bottom:-60px;  width:clamp(300px,36vw,660px) }

[data-fg="blogs"] .fg-sconce{ left:-3%;  bottom:-150px; width:clamp(90px,10vw,160px) }
[data-fg="blogs"] .fg-wall  { right:-6%; bottom:-70px;  width:clamp(340px,42vw,720px) }
[data-fg="blogs"] .fg-stones{ left:22%;  bottom:-58px;  width:clamp(240px,28vw,500px) }

[data-fg="visit"] .fg-hedge { left:-6%;  bottom:-104px; width:clamp(230px,28vw,470px) }
[data-fg="visit"] .fg-stones{ right:-5%; bottom:-92px;  width:clamp(250px,30vw,520px) }
[data-fg="visit"] .fg-rail  { left:32%;  bottom:-104px; width:clamp(300px,36vw,620px) }

/* =========================================================== 11 · cursor */
.cur-dot{
  position:fixed; left:0; top:0; z-index:90; width:22px; height:22px; margin:-11px 0 0 -11px;
  border:1px solid rgba(var(--gold-rgb),.6); border-radius:50%; pointer-events:none; display:none;
  transition:width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s;
}
.cur-dot.big{ width:54px; height:54px; margin:-27px 0 0 -27px; background:rgba(var(--gold-rgb),.14) }
@media (pointer:fine) and (hover:hover){
  body.has-cursor .cur-dot{ display:block }
}

/* =========================================================== 12 · responsive */
@media (max-width:1040px){
  .cards{ grid-template-columns:repeat(2,1fr) }
  .people{ grid-template-columns:repeat(2,1fr) }
  .person:nth-child(3n+2){ margin-top:0 }
  .person:nth-child(even){ margin-top:clamp(40px,7vh,72px) }
  .blogs{ grid-template-columns:repeat(2,1fr) }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:1fr }
  .hero-top,.sec-head,.foot .sec-head{ max-width:none }
}
@media (max-width:760px){
  :root{ --nav-h:70px }
  .sec::before,.foot::before{ background:linear-gradient(rgba(6,7,9,.5), rgba(6,7,9,.8) 16%, rgba(6,7,9,.8) 84%, rgba(6,7,9,.5)) }
  .hero::before{ height:72%; background:linear-gradient(rgba(4,5,7,.82), rgba(4,5,7,.6) 60%, transparent) }
  .nav-links,.nav-cta{ display:none }
  .nav-burger{ display:block }
  .chapters{ grid-template-columns:repeat(2,1fr); gap:20px 14px }
  .cards{ grid-template-columns:1fr }
  /* phones walk the gallery sideways, one niche at a time */
  .people{
    display:flex; gap:18px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    padding:22px var(--pad) 8px;
  }
  .people::-webkit-scrollbar{ display:none }
  .person,.person:nth-child(even),.person:nth-child(3n+2){ flex:0 0 min(78%,340px); margin-top:0; scroll-snap-align:center }
  .people-hint{ display:flex }
  .blogs{ grid-template-columns:1fr }
  .rail{ display:none }
  .hero-sub{ max-width:none }
  [data-fg="threshold"] .fg-pillar,
  [data-fg="treatments"] .fg-rail,
  [data-fg="specialists"] .fg-hedge,
  [data-fg="visit"] .fg-rail{ display:none }
  [data-fg="threshold"] .fg-wall{ left:-14%; bottom:-20px; width:min(84vw,430px) }
  [data-fg="threshold"] .fg-hedge{ left:auto; right:-10%; bottom:-70px; width:min(94vw,520px) }
  [data-fg="treatments"] .fg-sconce{ left:-4%; bottom:-54px; width:clamp(78px,20vw,124px) }
  [data-fg="outcome"] .fg-pillar{ left:-10%; width:clamp(110px,30vw,180px) }
}
@media (prefers-reduced-motion:reduce){
  .word{ opacity:1; transform:none; transition:none }
  [data-rv]{ opacity:1; transform:none }
  .hero-cue .track i{ animation:none; transform:scaleX(1) }
  .fg-el{ opacity:1; transform:none }
  .card-frame img{ transition:none }
  .person-frame path{ stroke-dashoffset:0; transition:none }
  .person-window img,.person-bio{ transition:none }
}

/* =========================================================== 13 · enquiry
   One form on every page (render.mjs enquiryForm, sent by enquiry.js).
   A dark glass panel so it reads over the 3D world and on detail pages. */
.enq-wrap{ position:relative; z-index:3; margin-top:clamp(36px,6vh,64px); max-width:880px }
.enq{
  padding:clamp(22px,3vw,36px); border:1px solid var(--line);
  background:rgba(8,9,11,.72);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
}
.enq-head h3{ font-family:var(--serif); font-size:clamp(22px,2.2vw,32px); text-transform:uppercase; line-height:1.1 }
.enq-head p{ margin:10px 0 0; font-size:14px; color:var(--bone-dim) }
.enq-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin-top:22px }
.enq-f{ display:flex; flex-direction:column; gap:7px; min-width:0 }
.enq-f.is-full{ grid-column:1 / -1 }
.enq-f label{ font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim) }
.enq-f label i{ font-style:normal; color:var(--gold) }
.enq input,.enq select,.enq textarea{
  width:100%; padding:13px 14px; font:inherit; font-size:15px; color:var(--bone);
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:0;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.enq select{ appearance:none; -webkit-appearance:none; padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat }
.enq select option{ background:#111317; color:var(--bone) }
.enq textarea{ resize:vertical; min-height:110px }
.enq input:focus,.enq select:focus,.enq textarea:focus{ outline:none; border-color:var(--gold); background:rgba(255,255,255,.06) }
.enq input[type="date"]{ color-scheme:dark }
.enq-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:22px }
.enq-foot .btn{ border:0; cursor:pointer }
.enq-foot .btn:disabled{ opacity:.55; cursor:progress }
.enq-note{ margin:0; font-size:12px; color:var(--muted); flex:1 1 220px }
.enq-status{ margin:14px 0 0; font-size:14px; min-height:1px; color:var(--bone-dim) }
.enq-status:empty{ margin:0 }
.enq-status.is-ok{ color:var(--gold) }
.enq-status.is-warn a{ color:var(--gold); border-bottom:1px solid rgba(var(--gold-rgb),.4) }
@media (max-width:640px){
  .enq-grid{ grid-template-columns:1fr }
}

/* =========================================================== 13 · garden tiles
   theme.tiles = "garden" (VRK Greens): the services and work tiles are
   smaller, landscape photos with leaf corners on a glass card, sans
   captions, the arrow in the corner. The clinic's tall frames stay the
   default. */
.cards.is-garden,.blogs.is-garden{ max-width:1120px; gap:clamp(14px,1.6vw,22px); margin-top:clamp(28px,4.5vh,56px) }
.blogs.is-garden{ max-width:1040px }
.is-garden .card,.is-garden .blog-card{
  padding:9px; border:1px solid rgba(var(--gold-rgb),.2); border-radius:26px 6px 26px 6px;
  background:rgba(6,11,7,.55); backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05);
  transition:border-color .4s var(--ease), border-radius .5s var(--ease), transform .4s var(--ease);
}
.is-garden .card:hover,.is-garden .blog-card:hover{ border-color:rgba(var(--gold-rgb),.55); border-radius:6px 26px 6px 26px; transform:translateY(-4px) }
.is-garden .card-frame,.is-garden .blog-frame{ aspect-ratio:3/2; border:0; border-radius:18px 4px 18px 4px; transition:border-radius .5s var(--ease) }
.is-garden .card:hover .card-frame,.is-garden .blog-card:hover .blog-frame{ border-radius:4px 18px 4px 18px }
.is-garden .card-frame::after{ background:linear-gradient(rgba(6,11,7,0) 60%, rgba(6,11,7,.45)) }
.is-garden .card-mark{ place-items:start end; padding:9px }
.is-garden .card-mark i{ width:34px; height:34px }
.is-garden .card-cap{ padding:12px 6px 5px; gap:10px; align-items:flex-start }
.is-garden .card-cap b{
  width:26px; height:26px; border-radius:50% 50% 50% 4px; display:grid; place-items:center;
  background:rgba(var(--gold-rgb),.15); font-size:10px; letter-spacing:.04em; margin-top:-2px;
}
.is-garden .card-cap > span{ font-family:var(--sans); font-size:15px; font-weight:500; text-transform:none; letter-spacing:.01em; line-height:1.3 }
.is-garden .card-cap em{
  font-size:12.5px; line-height:1.5; margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.is-garden .blog-cat{ left:10px; top:10px; padding:4px 10px; font-size:9px; background:rgba(6,11,7,.7) }
.blogs.is-garden .blog-card{ display:flex; flex-direction:column }
.is-garden .blog-body{ flex:1; display:flex; flex-direction:column; padding:12px 6px 5px }
.is-garden .blog-meta{ margin-top:auto }
.is-garden .blog-title{ font-family:var(--sans); font-size:16px; font-weight:500; margin-bottom:6px }
.is-garden .blog-excerpt{ font-size:13px; line-height:1.55; margin-bottom:10px; -webkit-line-clamp:2 }
.is-garden .blog-meta{ font-size:10px; padding-top:9px }
@media (max-width:1040px){
  .blogs.is-garden{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:760px){
  .cards.is-garden{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .is-garden .card-cap{ padding:10px 3px 3px }
  .is-garden .card-cap b{ display:none }
  .is-garden .card-cap > span{ font-size:14px }
  .is-garden .card-cap em{ font-size:12px }
  /* work: a row per project, the photo beside its words */
  .blogs.is-garden{ grid-template-columns:1fr; gap:12px }
  .blogs.is-garden .blog-card{ display:grid; grid-template-columns:38% minmax(0,1fr); gap:12px; align-items:center }
  .is-garden .blog-frame{ aspect-ratio:1/1 }
  .is-garden .blog-body{ padding:2px 4px 2px 0 }
  .is-garden .blog-excerpt{ margin-bottom:6px }
  .is-garden .blog-cat{ display:none }
}

/* =========================================================== 14 · icon tiles, device tiles
   A tile with no photo but an icon (render.mjs ICONS) draws the icon,
   stroked in the accent, on a soft glow. theme.tiles = "device" (the
   mobile store): tiles are small phone screens: rounded glass, a camera
   island at the top, the icon lighting up on hover. */
.is-icon{ display:grid !important; place-items:center }
.is-icon::before{ content:none !important }
.tile-icon{
  width:clamp(40px,4.4vw,58px); height:auto; fill:none; stroke:var(--gold); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1;
  filter:drop-shadow(0 0 14px rgba(var(--gold-rgb),.45));
  transition:transform .6s var(--ease-out), filter .6s var(--ease-out);
}
.card:hover .tile-icon,.blog-card:hover .tile-icon{ transform:scale(1.08); filter:drop-shadow(0 0 22px rgba(var(--gold-rgb),.8)) }

.cards.is-device{ max-width:1080px; gap:clamp(14px,1.6vw,22px); margin-top:clamp(28px,4.5vh,56px) }
.blogs.is-device{ max-width:1080px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); margin-top:clamp(28px,4.5vh,56px) }
.is-device .card-frame,.is-device .blog-frame{
  aspect-ratio:1/1; border-radius:24px; border:1px solid rgba(var(--gold-rgb),.22);
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(var(--gold-rgb),.2), transparent 70%),
    linear-gradient(160deg,#141a26,#07090d);
  box-shadow:inset 0 0 0 5px rgba(8,10,14,.9), inset 0 0 0 6px rgba(255,255,255,.06);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.is-device .blog-frame{ aspect-ratio:4/3 }
.is-device .card-frame::after,.is-device .blog-frame::after{
  content:''; position:absolute; left:50%; top:12px; width:30%; max-width:62px; height:9px; margin-left:min(-15%,-31px);
  border-radius:9px; background:#020305; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.is-device .card:hover .card-frame,.is-device .blog-card:hover .blog-frame{ border-color:rgba(var(--gold-rgb),.6); transform:translateY(-4px) }
.is-device .card-mark{ place-items:end end; padding:12px }
.is-device .card-mark i{ width:34px; height:34px }
.is-device .card-cap{ padding-top:12px; gap:10px }
.is-device .card-cap > span{ font-family:var(--sans); font-size:15px; font-weight:500; text-transform:none; letter-spacing:.01em; line-height:1.3 }
.is-device .card-cap em{ font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.blogs.is-device .blog-card{ display:flex; flex-direction:column; border:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none }
.blogs.is-device .blog-card:hover{ transform:none }
.is-device .blog-cat{ top:auto; bottom:10px; left:10px }
.is-device .blog-body{ flex:1; display:flex; flex-direction:column; padding:12px 2px 0 }
.is-device .blog-title{ font-family:var(--sans); font-size:15px; font-weight:500; margin-bottom:4px }
.is-device .blog-excerpt{ font-size:12.5px; margin-bottom:8px; -webkit-line-clamp:2 }
.is-device .blog-meta{ margin-top:auto; font-size:11px; padding-top:8px }
.is-device .blog-meta span:last-child{ color:var(--gold); font-weight:500; letter-spacing:.04em }
@media (max-width:1040px){
  .blogs.is-device{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:760px){
  .cards.is-device{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .blogs.is-device{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .is-device .card-cap b{ display:none }
  .is-device .card-cap > span{ font-size:14px }
  .is-device .card-frame,.is-device .blog-frame{ border-radius:20px }
}

/* =========================================================== 15 · student stories
   outcome.stories: each testimonial as a card in a row that scrolls
   sideways. The text is clamped; hovering or focusing a card opens it. */
.stories{
  display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:rgba(var(--gold-rgb),.4) transparent;
  margin:clamp(26px,4vh,48px) calc(var(--pad) * -1) 0; padding:4px var(--pad) 14px;
  scroll-padding-inline:var(--pad);
}
.story{
  flex:0 0 clamp(272px,27vw,360px); scroll-snap-align:start; margin:0;
  display:flex; flex-direction:column; gap:14px; padding:20px 22px 18px;
  border:1px solid rgba(var(--gold-rgb),.22); border-radius:6px;
  background:rgba(7,8,11,.78); backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05);
  transition:border-color .4s var(--ease); outline-offset:3px;
}
.story:hover,.story:focus-visible{ border-color:rgba(var(--gold-rgb),.6) }
.story-mark{ font-family:var(--serif); font-size:52px; line-height:.5; height:18px; color:var(--gold) }
.story-text{
  margin:0; font-size:14px; line-height:1.62; color:var(--bone);
  display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden;
}
.story:hover .story-text,.story:focus .story-text,.story:focus-within .story-text{
  display:block; max-height:15.5em; overflow-y:auto; scrollbar-width:thin;
}
.story-by{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft) }
.story-av{
  position:relative; flex:none; width:42px; height:42px; border-radius:50%; overflow:hidden;
  background:rgba(var(--gold-rgb),.14); border:1px solid rgba(var(--gold-rgb),.4);
}
.story-av::before{
  content:attr(data-initials); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:15px; letter-spacing:.04em; color:var(--gold);
}
.story-av img{ position:relative; width:100%; height:100%; object-fit:cover }
.story-who{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.story-who b{ font-weight:500; font-size:14px; color:var(--bone) }
.story-who span{ font-size:11.5px; line-height:1.4; color:var(--bone-dim) }
.story-tags{ display:flex; flex-wrap:wrap; gap:6px }
.story-tags i{
  font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; border:1px solid var(--line); color:var(--bone-dim);
}
.story-tags i.is-award{ border-color:rgba(var(--gold-rgb),.5); color:var(--gold) }
.stories-hint{ display:flex }
.stats[hidden]{ display:none }

/* =========================================================== 16 · compact tiles
   theme.tiles = "compact" (GEN Flyers): services and programs as small
   3:2 photos on a glass card with sans captions, and the destination
   gallery as one row of six small arches, so each chapter's words fit
   on the screen with it. */
.cards.is-compact,.blogs.is-compact{ max-width:1120px; gap:clamp(14px,1.6vw,22px); margin-top:clamp(28px,4.5vh,56px) }
.is-compact .card,.is-compact .blog-card{
  padding:8px; border:1px solid rgba(var(--gold-rgb),.2); border-radius:12px;
  background:rgba(7,8,11,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.is-compact .card:hover,.is-compact .blog-card:hover{ border-color:rgba(var(--gold-rgb),.55); transform:translateY(-4px) }
.is-compact .card-frame,.is-compact .blog-frame{ aspect-ratio:3/2; border:0; border-radius:8px }
.is-compact .card-frame::after{ background:linear-gradient(rgba(8,9,11,0) 60%, rgba(8,9,11,.45)) }
.is-compact .card-mark{ place-items:start end; padding:8px }
.is-compact .card-mark i{ width:32px; height:32px }
.is-compact .card-cap{ padding:11px 5px 4px; gap:9px }
.is-compact .card-cap > span{ font-family:var(--sans); font-size:14.5px; font-weight:500; text-transform:none; letter-spacing:.01em; line-height:1.3 }
.is-compact .card-cap em{ font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.blogs.is-compact .blog-card{ display:flex; flex-direction:column }
.is-compact .blog-body{ flex:1; display:flex; flex-direction:column; padding:11px 5px 4px }
.is-compact .blog-title{ font-family:var(--sans); font-size:15px; font-weight:500; margin-bottom:5px }
.is-compact .blog-excerpt{ font-size:12.5px; margin-bottom:8px; -webkit-line-clamp:2 }
.is-compact .blog-meta{ margin-top:auto; font-size:10px; padding-top:8px }
.is-compact .blog-cat{ left:9px; top:9px; padding:4px 10px; font-size:9px }
@media (min-width:1041px){
  .people.is-compact{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.3vw,20px); margin-top:clamp(28px,4.5vh,56px) }
  .people.is-compact .person:nth-child(3n+2){ margin-top:0 }
  .people.is-compact .person:nth-child(even){ margin-top:clamp(16px,3vh,32px) }
  .people.is-compact .person-arch{ aspect-ratio:10/11 }
}
@media (min-width:761px){
  .people.is-compact .person-window::before{ font-size:clamp(30px,3vw,46px) }
  .people.is-compact .person-plaque{ padding:12px 8px 11px; gap:5px }
  .people.is-compact .person-nm{ font-size:clamp(13px,1.1vw,16px) }
  .people.is-compact .person-sp{ font-size:9.5px; letter-spacing:.1em }
  .people.is-compact .person-meta{ font-size:9px; letter-spacing:.12em; gap:6px; flex-wrap:wrap; justify-content:center }
  .people.is-compact .person-bio{ padding:40px 10px 12px; font-size:11.5px }
  .people.is-compact .person-bio span{ -webkit-line-clamp:4 }
  .people.is-compact .person-no{ width:26px; height:26px }
  .people.is-compact .person-no b{ font-size:11px }
}
@media (max-width:760px){
  .cards.is-compact,.blogs.is-compact{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .is-compact .card-cap b{ display:none }
  .is-compact .card-cap > span{ font-size:13.5px }
  .story{ flex-basis:82% }
}
/* under the stories, the "why us" row is a footnote to them: smaller */
#outcomeStories ~ .stats{ margin-top:clamp(18px,3vh,32px) }
#outcomeStories ~ .stats .num{ font-size:clamp(22px,2vw,30px) }
#outcomeStories ~ .stats em{ font-size:12.5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }