/* ============================================================ tokens */
:root{
  color-scheme: light;

  /* their tokens, lifted from customizer-less.css on cosmeticdentistryofsj.com */
  --slate:   #213240;   /* their dark slate            */
  --steel:   #3F617C;   /* their deep teal-blue        */
  --sky:     #65A1D3;   /* their light blue            */
  --mist:    #BBD7EE;   /* their pale blue             */
  --tint:    #EEF5FB;   /* their palest blue wash      */

  /* the deep ground, pulled a little cooler and darker than their slate so
     slate itself can still read as a distinct surface on top of it */
  --ink:    #0E1821;
  --ink-2:  #16222C;
  --ink-3:  #1E2E3B;
  --ink-4:  #2A3D4C;

  /* text and hairlines on the deep ground */
  --light:   #EEF3F7;
  --light-m: #A9B9C6;
  --light-f: #74848F;

  /* the accent, deepened from their #65A1D3 so it holds contrast on white */
  --accent:   #2C7CB4;
  --accent-2: #225F8B;
  --accent-soft: #65A1D3;

  /* greys and whites */
  --off:    #FFFFFF;
  --grey-1: #F2F6FA;
  --grey-2: #E2E9EF;
  --grey-3: #C6D0D9;
  --grey-4: #8A97A3;

  --disp: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;
  --mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* semantic — light by default, re-pointed inside .dark */
  --bg:     #FFFFFF;
  --fg:     #16222C;
  --fg-m:   #4B5B68;
  --fg-f:   #8A97A3;
  --line:   rgba(22,34,44,.15);
  --line-s: rgba(22,34,44,.07);
  --raise:  var(--grey-1);
  --fill-bg: #2C7CB4;
  --fill-fg: #FFFFFF;

  --gut: clamp(20px, 4.6vw, 64px);
  --max: 1420px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,.84,.32,1);
}

/* a pale blue wash, and a slightly cooler grey, for alternating chapters */
.tint{ --bg: var(--tint); --raise: #E3EEF8; background:var(--bg); color:var(--fg); }
.mistbg{ --bg: var(--grey-1); --raise: var(--grey-2); background:var(--bg); color:var(--fg); }

/* the deep ground: heroes, statements, the CTA band, the footer, and any
   chapter that wants to carry weight */
.dark, .hero, .stmt, .cta, .ft, .tick, .drop, .mbar, .drawer, .inst{
  --bg:     var(--ink);
  --fg:     var(--light);
  --fg-m:   var(--light-m);
  --fg-f:   var(--light-f);
  --line:   rgba(232,239,245,.14);
  --line-s: rgba(232,239,245,.07);
  --raise:  var(--ink-2);
  --accent: var(--sky);
  --accent-2: var(--mist);
  --fill-bg: var(--sky);
  --fill-fg: #0E1821;
}
.dark{ background:var(--bg); color:var(--fg); }

/* The deep ground is never one flat navy. A cool light source high on the right,
   a warmer steel bloom low on the left, and a vertical lift through the middle —
   enough that large areas read as material rather than as a filled rectangle. */
.dark, .hero, .stmt, .cta, .ft, .bleed{
  background-color: var(--ink);
  background-image:
    radial-gradient(120% 78% at 78% -6%,  rgba(101,161,211,.15), transparent 58%),
    radial-gradient(86% 62% at -6% 104%,  rgba(63,97,124,.26),  transparent 62%),
    linear-gradient(176deg, #101E28 0%, #0E1821 48%, #0B141C 100%);
}
/* and the light ground is never flat white either */
.sec:not(.dark):not(.tint):not(.mistbg){
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 62%, #F7FAFC 100%);
}
.tint{ background-image: linear-gradient(180deg, #F2F8FD 0%, #EAF2FA 100%); }
.mistbg{ background-image: linear-gradient(180deg, #F6F9FC 0%, #EFF3F7 100%); }

/* ============================================================ reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:#FFFFFF; color:#16222C;
  font-family:var(--body); font-optical-sizing:auto;
  font-size:18px; line-height:1.68; font-weight:380;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--disp); font-weight:620;
  font-variation-settings:"wdth" 96; letter-spacing:-.022em; line-height:1.03; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--accent); color:#16222C; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent);
  color:#16222C; padding:12px 20px; font-family:var(--mono); font-size:12px; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* grain + instrument grid, applied to the page shell */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ============================================================ layout */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap.n{ max-width:960px; }
.wrap.w{ max-width:1660px; }
.sec{ background:var(--bg); color:var(--fg); position:relative; z-index:2;
  padding-block:clamp(84px, 12.5vw, 212px); }
.sec.tight{ padding-block:clamp(56px, 6.4vw, 104px); }
.sec + .sec{ }
.rule-top{ border-top:1px solid var(--line); }

/* ============================================================ type */
.eye{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent); margin:0 0 28px;
  display:flex; align-items:center; gap:16px;
}
.eye::before{ content:""; width:42px; height:1px; background:currentColor; flex:none; opacity:.7; }
.eye.c{ justify-content:center; }

h1, .h1{ font-size:clamp(44px, 7vw, 102px); font-variation-settings:"wdth" 91; font-weight:660;
  letter-spacing:-.04em; line-height:.98; }
h2, .h2{ font-size:clamp(33px, 4.9vw, 72px); letter-spacing:-.034em; font-weight:620; line-height:1.0; }
h3, .h3{ font-size:clamp(20px, 1.6vw, 25px); letter-spacing:-.016em; font-weight:650; line-height:1.18; }
h4{ font-size:14px; letter-spacing:.02em; }
h1 em, h2 em, .h1 em, .h2 em{ font-style:normal; color:var(--accent); }
h1 .it, h2 .it{ font-style:italic; font-family:var(--body); font-weight:360; letter-spacing:-.012em; }
h1 i, h2 i, h1 .ln, h2 .ln{ font-style:normal; font-family:inherit; font-weight:inherit; }

.lede{ font-size:clamp(19px, 1.62vw, 24px); line-height:1.58; color:var(--fg-m);
  max-width:44ch; font-weight:350; letter-spacing:-.004em; }
.lede.big{ font-size:clamp(20px, 1.85vw, 27px); line-height:1.5; color:var(--fg); }

.prose p{ font-size:18.4px; line-height:1.74; color:var(--fg-m); margin-bottom:1.22em; max-width:68ch; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--fg); font-weight:600; }
.prose em{ font-style:italic; }
.prose h3{ margin:2.3em 0 .75em; color:var(--fg); }
.prose h3:first-child{ margin-top:0; }
.prose a{ color:var(--fg); text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1px; transition:background-size .35s var(--ease), color .25s; }
.prose a:hover{ color:var(--accent); background-size:100% 2px; }

.prose > ul{ margin:0 0 1.4em; max-width:68ch; }
.prose > ul > li{ position:relative; padding-left:30px; margin-bottom:.72em;
  color:var(--fg-m); font-size:17.4px; line-height:1.6; }
.prose > ul > li::before{ content:""; position:absolute; left:0; top:.72em;
  width:14px; height:1px; background:var(--accent); }

.drop > p:first-of-type::first-letter{
  font-family:var(--disp); font-weight:700; font-size:4.1em; line-height:.78;
  float:left; margin:.06em .14em 0 0; color:var(--accent);
  font-variation-settings:"wdth" 86;
}

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:400; letter-spacing:-.02em; }
.mono{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; }

/* ============================================================ buttons */
.btn{
  --bc: var(--fg);
  display:inline-flex; align-items:center; gap:12px; position:relative;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none; padding:19px 34px;
  border:1px solid var(--bc); border-radius:999px; color:var(--fg);
  overflow:hidden; isolation:isolate; transition:color .4s var(--ease), border-color .4s var(--ease),
    box-shadow .5s var(--ease);
  min-height:58px;
}
.btn span.t{ position:relative; z-index:2; }
.btn::after{ content:""; position:absolute; inset:0; z-index:1; background:var(--fg);
  transform:translateY(101%); transition:transform .52s var(--slow); }
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:var(--bg); }
.btn .ar{ position:relative; z-index:2; transition:transform .45s var(--slow); }
.btn:hover .ar{ transform:translateX(5px); }

.btn.fill{ background:var(--fill-bg); border-color:var(--fill-bg); color:var(--fill-fg);
  box-shadow:0 10px 30px -12px rgba(44,124,180,.6); }
.btn.fill:hover{ box-shadow:0 16px 40px -14px rgba(44,124,180,.5); }
.btn.fill::after{ background:var(--fg); }
.btn.fill:hover{ color:var(--bg); border-color:var(--fg); }
.btn.ghost{ --bc: var(--line); }
.btn.ghost:hover{ border-color:var(--fg); }

.lnk{ display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent); padding-bottom:7px; border-bottom:1px solid currentColor;
  transition:gap .4s var(--slow), color .3s; }
.lnk:hover{ gap:18px; }

/* ============================================================ header */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:90; height:76px;
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s, height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hd.stuck{ background:rgba(22,34,44,.72); backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:var(--rule, rgba(232,239,245,.11)); height:64px; }
.hd-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

.mark{ display:flex; align-items:baseline; gap:12px; text-decoration:none; color:var(--light); }
.mark b{ font-family:var(--disp); font-weight:760; font-variation-settings:"wdth" 100;
  font-size:21px; letter-spacing:.2em; text-transform:uppercase; line-height:1; }
.mark s{ width:1px; height:17px; background:rgba(232,239,245,.3); display:inline-block;
  text-decoration:none; align-self:center; }
.mark span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-m); line-height:1; white-space:nowrap; }

.hd-r{ display:flex; align-items:center; gap:clamp(12px,1.6vw,26px); }
.hd-tel{ font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-decoration:none;
  color:var(--light); white-space:nowrap; transition:color .3s; }
.hd-tel:hover{ color:var(--accent); }
.hd .btn{ padding:13px 21px; min-height:44px; font-size:11px; white-space:nowrap; flex:none; }
.hd-in > nav{ flex:1 1 auto; display:flex; justify-content:flex-end; min-width:0; }
.hd .mark{ flex:none; }
.hd-r{ flex:none; }

/* ---------------------------------------------------------- the menu */
.menu{ display:flex; align-items:center; gap:clamp(12px,1.5vw,26px); }
.menu > li{ position:static; }
.menu a.top, .menu button.top{
  display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--light);
  font-family:var(--disp); font-weight:540; font-size:15px; letter-spacing:-.004em;
  padding:10px 0; position:relative; white-space:nowrap; transition:color .3s var(--ease);
}
.menu a.top::after, .menu button.top::after{
  content:""; position:absolute; left:0; right:100%; bottom:4px; height:1px;
  background:var(--accent); transition:right .45s var(--slow);
}
.menu a.top:hover, .menu button.top:hover,
.menu li.open > button.top, .menu a.top.on{ color:var(--accent); }
.menu a.top:hover::after, .menu button.top:hover::after,
.menu li.open > button.top::after, .menu a.top.on::after{ right:0; }
.menu .cv{ width:7px; height:7px; border-right:1.3px solid currentColor;
  border-bottom:1.3px solid currentColor; transform:translateY(-2px) rotate(45deg);
  transition:transform .4s var(--slow); flex:none; margin:0; }
.menu li.open .cv{ transform:translateY(1px) rotate(-135deg); }

/* ---------------------------------------------------------- the panel */
.drop{
  position:absolute; left:0; right:0; top:100%; z-index:-1;
  background:rgba(22,34,44,.97); backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border-top:1px solid rgba(232,239,245,.12); border-bottom:1px solid rgba(232,239,245,.12);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .34s var(--ease), transform .44s var(--slow), visibility .34s;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}
.menu li.open > .drop{ opacity:1; visibility:visible; transform:none; }
.drop-in{ display:grid; grid-template-columns:clamp(190px,21%,280px) minmax(0,1fr);
  gap:clamp(22px,4vw,64px); padding-block:clamp(26px,3vw,42px); align-items:start; }
.drop-side .eye{ margin-bottom:14px; }
.drop-side p.d{ font-size:14.6px; line-height:1.55; color:var(--light-f); max-width:30ch; }
.drop-side .all{ margin-top:20px; }
.drop-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.drop-grid.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.drop-grid a{ padding:16px 22px; text-decoration:none; color:var(--light); display:block;
  border-top:1px solid rgba(232,239,245,.11); border-left:1px solid rgba(232,239,245,.11);
  transition:background .35s var(--ease); }
.drop-grid a:hover{ background:rgba(232,239,245,.05); }
.drop-grid a strong{ display:block; font-family:var(--disp); font-weight:580; font-size:16px;
  letter-spacing:-.012em; transition:color .3s, transform .45s var(--slow); }
.drop-grid a:hover strong{ color:var(--accent); transform:translateX(5px); }
.drop-grid a small{ display:block; margin-top:4px; font-size:13.2px; line-height:1.45;
  color:var(--light-f); }

/* ---------------------------------------------------------- burger + drawer */
.burger{ display:none; width:44px; height:44px; position:relative; flex:none; margin-right:-9px; }
.burger::before, .burger::after{ content:""; position:absolute; left:9px; right:9px; height:1.6px;
  background:var(--light); transition:transform .5s var(--slow), width .4s var(--ease); }
.burger::before{ top:15px; } .burger::after{ bottom:15px; width:44%; }
.burger:hover::after{ width:calc(100% - 18px); }
body.dr-open .burger::before{ transform:translateY(7px) rotate(45deg); }
body.dr-open .burger::after{ transform:translateY(-7px) rotate(-45deg); width:calc(100% - 18px); }

.drawer{ position:fixed; inset:0 0 0 auto; width:min(460px, 92vw); z-index:88;
  background:var(--ink); border-left:1px solid rgba(232,239,245,.13);
  transform:translateX(102%); transition:transform .62s var(--slow);
  overflow-y:auto; overscroll-behavior:contain; padding:88px var(--gut) 40px; }
body.dr-open .drawer{ transform:none; }
body.dr-open{ overflow:hidden; }
.scrim{ position:fixed; inset:0; z-index:86; background:rgba(13,22,29,.6);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
body.dr-open .scrim{ opacity:1; visibility:visible; }
.drawer h4{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:400; margin:34px 0 4px; }
.drawer h4:first-child{ margin-top:0; }
.drawer a.dl{ display:block; text-decoration:none; color:var(--light); padding:13px 0;
  border-bottom:1px solid var(--line); font-family:var(--disp); font-weight:540; font-size:17.5px;
  letter-spacing:-.014em; transition:color .3s, padding-left .4s var(--slow); }
.drawer a.dl:hover{ color:var(--accent); padding-left:6px; }
.drawer .dtel{ display:block; margin-top:34px; font-family:var(--mono); font-size:13px;
  letter-spacing:.06em; color:var(--light-m); text-decoration:none; }
.drawer .btn{ margin-top:18px; width:100%; justify-content:center; }
.drawer .daddr{ margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.75; color:var(--light-f); }
.drawer-x{ position:absolute; top:26px; right:var(--gut); width:30px; height:30px; }
.drawer-x span{ position:absolute; left:3px; right:3px; top:50%; height:1.6px; background:var(--light); }
.drawer-x span:first-child{ transform:rotate(45deg); }
.drawer-x span:last-child{ transform:rotate(-45deg); }
.drawer-x:hover span{ background:var(--accent); }
body.dr-open .hd .btn, body.dr-open .burger{ opacity:0; pointer-events:none; transition:opacity .25s; }

/* ============================================================ hero */
.hero{ position:relative; background:var(--ink); color:var(--light); overflow:clip;
  padding-top:clamp(104px,13vh,150px); padding-bottom:0; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(24px,4vw,64px);
  align-items:center; min-height:min(78vh, 760px); }
.hero.sub{ padding-top:clamp(96px,11vh,128px); }
.hero.sub .hero-grid{ min-height:0; align-items:center; padding-bottom:clamp(44px,6vw,86px); }
.hero.sub h1{ font-size:clamp(38px,5.9vw,80px); }

.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-bg .gr{ position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(101,161,211,.16), transparent 58%),
    radial-gradient(90% 70% at 10% 90%, rgba(63,97,124,.26), transparent 60%); }
.hero-bg .gl{ position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(to right, rgba(232,239,245,.055) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(to bottom, rgba(232,239,245,.028) 0 1px, transparent 1px 110px);
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); }

.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--light-f); margin:0 0 26px; }
.crumb a{ text-decoration:none; color:var(--light-m); }
.crumb a:hover{ color:var(--accent); }

.hero h1{ margin:0 0 30px; }
.hero .lede{ max-width:49ch; }
.acts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,30px);
  margin-top:clamp(42px,5vw,66px); border-top:1px solid var(--line); padding-top:26px; }
.stats > div b{ display:block; font-family:var(--mono); font-weight:400;
  font-size:clamp(25px,2.7vw,38px); color:var(--accent); letter-spacing:-.03em; line-height:1; }
.stats > div span{ display:block; margin-top:11px; font-size:13.2px; line-height:1.45;
  color:var(--light-f); font-family:var(--body); }
.stats em{ font-style:italic; }

/* the portrait plate */
.plate{ position:relative; justify-self:end; width:min(100%, 520px); }
.plate .frame{ position:absolute; inset:28px -26px -26px 28px; border:1px solid rgba(101,161,211,.42);
  border-radius:2px; }
.plate .glow{ position:absolute; left:50%; top:46%; width:118%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(101,161,211,.22), transparent 62%); filter:blur(14px); }
.plate img.por{ position:relative; width:100%; filter:drop-shadow(0 34px 60px rgba(0,0,0,.55));
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 76%, transparent 99%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 76%, transparent 99%); }
.plate .sig{ position:absolute; left:-16px; bottom:16px; width:min(45%, 210px); opacity:.92;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.plate .sig svg, .plate .sig img{ width:100%; height:auto; }
.plate .tag{ position:absolute; right:-18px; top:54px; writing-mode:vertical-rl;
  font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--light-f); }

/* ticker */
.tick{ position:relative; z-index:2; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink); overflow:hidden; padding:17px 0; }
.tick-in{ display:flex; gap:0; width:max-content; animation:tk 46s linear infinite; }
.tick:hover .tick-in{ animation-play-state:paused; }
.tick-g{ display:flex; gap:0; flex:none; }
.tick-i{ display:flex; align-items:center; gap:13px; padding-inline:30px; flex:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--light-m); white-space:nowrap; }
.tick-i::before{ content:""; width:4px; height:4px; background:var(--accent); border-radius:50%; flex:none; }
.tick-i b{ color:var(--light); font-weight:500; }
@keyframes tk{ to{ transform:translateX(-50%); } }

.cue{ display:none; position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:grid;
  justify-items:center; gap:9px; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--light-f); pointer-events:none; }
.cue i{ display:block; width:1px; height:36px; background:linear-gradient(var(--accent), transparent);
  animation:cuep 2.6s var(--ease) infinite; transform-origin:top; }
@keyframes cuep{ 0%{ transform:scaleY(0); opacity:0 } 35%{ transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(1); opacity:0 } }

/* sub-page hero card */
.hcard{ border:1px solid var(--line); border-radius:3px; padding:clamp(22px,2.4vw,34px);
  background:linear-gradient(180deg, rgba(232,239,245,.045), rgba(232,239,245,.012)); }
.hcard p.t{ margin:0 0 18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); }
.hcard li{ position:relative; padding-left:26px; margin-bottom:13px; font-size:15.6px;
  line-height:1.5; color:var(--light-m); }
.hcard li:last-child{ margin-bottom:0; }
.hcard li::before{ content:""; position:absolute; left:0; top:.66em; width:12px; height:1px; background:var(--accent); }

/* ============================================================ section heads */
.head{ display:grid; grid-template-columns:1fr clamp(300px,34%,480px); gap:clamp(20px,4.5vw,88px);
  align-items:end; margin-bottom:clamp(44px,5.6vw,96px); position:relative; }
.head.solo{ grid-template-columns:1fr; }
.head h2{ max-width:17ch; }
.head .lede{ padding-bottom:8px; }
@media (max-width:900px){ .head{ grid-template-columns:1fr; align-items:start; gap:18px; } }

/* ============================================================ chapter rail */
.chap{ display:grid; grid-template-columns:clamp(150px,19%,250px) minmax(0,1fr);
  gap:clamp(22px,4vw,74px); align-items:start; }
.chap-rail{ position:sticky; top:104px; }
.chap-rail .n{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--accent);
  text-transform:uppercase; }
.chap-rail h4{ margin:16px 0 0; font-family:var(--disp); font-weight:600; font-size:19px;
  letter-spacing:-.014em; color:var(--fg); line-height:1.2; }
.chap-rail hr{ border:0; border-top:1px solid var(--line); margin:20px 0 0; }
.chap-rail p{ margin-top:16px; font-size:14px; line-height:1.55; color:var(--fg-f); }
@media (max-width:900px){ .chap{ grid-template-columns:1fr; } .chap-rail{ position:static; } }

/* ============================================================ index rows (tiles) */
.rowlist{ border-top:1px solid var(--line); }
.rowx{ display:grid; grid-template-columns:70px minmax(0,1.05fr) minmax(0,1.25fr) 48px;
  gap:clamp(14px,2.6vw,42px); align-items:center; padding:clamp(22px,2.9vw,40px) 0;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg);
  position:relative; isolation:isolate; }
.rowx::before{ content:""; position:absolute; inset:0 calc(var(--gut) * -.4); z-index:-1;
  background:var(--raise); opacity:0; transition:opacity .45s var(--ease); }
.rowx:hover::before{ opacity:1; }
.rowx .i{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em;
  transition:transform .5s var(--slow); }
.rowx:hover .i{ transform:translateX(6px); }
.rowx h3{ transition:transform .5s var(--slow); }
.rowx:hover h3{ transform:translateX(6px); }
.rowx p{ font-size:16px; line-height:1.55; color:var(--fg-m); }
.rowx .go{ justify-self:end; width:44px; height:44px; border:1px solid var(--line);
  border-radius:50%; display:grid; place-items:center; flex:none;
  transition:background .4s var(--ease), border-color .4s, color .4s, transform .5s var(--slow); }
.rowx:hover .go{ background:var(--accent); border-color:var(--accent); color:#FFFFFF;
  transform:rotate(-45deg); }
.rowx .meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-f); display:block; margin-top:9px; }
@media (max-width:820px){
  .rowx{ grid-template-columns:44px minmax(0,1fr) 40px; row-gap:10px; }
  .rowx p{ grid-column:2/4; }
  .rowx .go{ width:38px; height:38px; }
}

/* ============================================================ hairline card grid */
.grid{ display:grid; gap:1px; background:var(--line-s); border:1px solid var(--line-s); }
.grid.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cell{ background:var(--bg); padding:clamp(28px,3vw,52px); position:relative;
  transition:background .45s var(--ease), box-shadow .45s var(--ease); }
.cell:hover{ background:var(--raise); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.dark .cell:hover{ box-shadow:inset 0 1px 0 rgba(232,239,245,.09); }
.cell .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent);
  display:block; margin-bottom:20px; }
.cell h3{ margin-bottom:14px; }
.cell p{ font-size:16.2px; line-height:1.62; color:var(--fg-m); }
@media (max-width:980px){ .grid.c3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .grid.c3, .grid.c2{ grid-template-columns:minmax(0,1fr); } }

/* ============================================================ steps rail */
.steps{ display:grid; gap:clamp(18px,2vw,30px); position:relative; }
.steps.s3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.steps.s4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.steps.s5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.step{ padding-top:30px; border-top:1px solid var(--line); position:relative; }
.step::after{ content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:var(--accent); transition:width 1.1s var(--slow); }
.step.in::after{ width:100%; }
.step b.n{ display:block; font-family:var(--mono); font-size:11.5px; color:var(--accent);
  letter-spacing:.16em; margin-bottom:18px; }
.step h3{ font-size:19.5px; margin-bottom:12px; }
.step p{ font-size:15.6px; line-height:1.58; color:var(--fg-m); }
.step .when{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:10px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--fg-f);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
@media (max-width:1100px){ .steps.s5, .steps.s4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){ .steps.s3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns:minmax(0,1fr) !important; } }

/* ============================================================ split */
.split{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(26px,5vw,96px); align-items:center; }
.split.flip > .txt{ order:2; }
.split h2{ font-size:clamp(27px,3.05vw,43px); margin:18px 0 26px; max-width:19ch; }
.split .art-col{ position:relative; }

@media (max-width:900px){ .split{ grid-template-columns:minmax(0,1fr); }
  .split.flip > .txt{ order:0; } }

/* figures */
.fig{ margin:0; position:relative; }
.fig img{ width:100%; border-radius:2px; box-shadow:0 26px 60px -34px rgba(14,24,33,.55); }
.fig .shade{ position:absolute; inset:0; background:linear-gradient(190deg, rgba(101,161,211,.1), rgba(22,34,44,.2));
  mix-blend-mode:multiply; pointer-events:none; opacity:0; transition:opacity .6s var(--ease); border-radius:2px; }
.fig:hover .shade{ opacity:1; }
.fig figcaption{ margin-top:15px; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-f); line-height:1.6; }
.fig.clip img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.25s var(--slow); }
.fig.clip.in img{ clip-path:inset(0 0 0 0); }

.photorow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,44px); align-items:start; }
.photorow .fig:nth-child(2){ margin-top:clamp(26px,5vw,80px); }
@media (max-width:760px){ .photorow{ grid-template-columns:minmax(0,1fr); }
  .photorow .fig:nth-child(2){ margin-top:0; } }

/* line art */
.art{ margin:0; position:relative; padding:clamp(26px,3.4vw,52px); border:1px solid var(--line-s);
  border-radius:3px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.9), rgba(255,255,255,0) 58%),
    var(--raise);
  box-shadow:0 24px 60px -40px rgba(14,24,33,.5), inset 0 1px 0 rgba(255,255,255,.6);
  --ink:var(--fg); --ink-mute:var(--fg-m); --ink-faint:var(--fg-f);
  --sky:var(--accent-soft); }
.art svg{ width:100%; height:auto; overflow:visible; }
.art figcaption{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line-s);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-f); line-height:1.6; }
.art .drawn{ transition:stroke-dashoffset 1.5s var(--slow); }
.art .fadein{ opacity:0; transition:opacity .8s ease .55s; }
.art.drew .fadein{ opacity:1; }

/* ============================================================ checks */
.checks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-s);
  border:1px solid var(--line-s); }
.check{ background:var(--bg); padding:clamp(30px,3.4vw,58px); }
.check.hi{ background:var(--raise); }
.check .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--fg-f); margin-bottom:14px; }
.check.hi .tag{ color:var(--accent); }
.check h3{ margin-bottom:26px; }
.check li{ position:relative; padding-left:30px; margin-bottom:15px; font-size:16px;
  line-height:1.56; color:var(--fg-m); }
.check li:last-child{ margin-bottom:0; }
.check li::before{ content:""; position:absolute; left:0; top:.6em; width:16px; height:1px;
  background:var(--fg-f); }
.check.hi li::before{ background:var(--accent); }
@media (max-width:760px){ .checks{ grid-template-columns:minmax(0,1fr); } }

/* ============================================================ faq */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:22px;
  padding:clamp(22px,2.4vw,32px) 0; font-family:var(--disp); font-weight:580;
  font-size:clamp(18px,1.6vw,23px); letter-spacing:-.016em; line-height:1.3; color:var(--fg);
  transition:color .3s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary .pm{ margin-left:auto; flex:none; width:22px; height:22px; position:relative; margin-top:4px; }
.faq summary .pm::before, .faq summary .pm::after{ content:""; position:absolute; background:var(--accent);
  left:50%; top:50%; transition:transform .45s var(--slow); }
.faq summary .pm::before{ width:16px; height:1.5px; transform:translate(-50%,-50%); }
.faq summary .pm::after{ width:1.5px; height:16px; transform:translate(-50%,-50%); }
.faq details[open] summary .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq .ans{ padding:0 clamp(0px,6vw,80px) clamp(24px,2.6vw,36px) 0; }
.faq .ans p{ font-size:17.2px; max-width:72ch; }

/* ============================================================ records timeline */
.recs{ position:relative; padding-left:clamp(0px,3vw,36px); }
.rec{ display:grid; grid-template-columns:clamp(96px,14%,170px) minmax(0,1fr);
  gap:clamp(16px,3vw,48px); padding:clamp(22px,2.6vw,34px) 0; border-top:1px solid var(--line);
  position:relative; }
.rec:last-child{ border-bottom:1px solid var(--line); }
.rec::before{ content:""; position:absolute; left:-18px; top:calc(clamp(22px,2.6vw,34px) + 9px);
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--bg); }
.recs::after{ content:""; position:absolute; left:-15px; top:12px; bottom:12px; width:1px;
  background:linear-gradient(var(--accent), transparent); opacity:.35; }
@media (max-width:620px){ .recs{ padding-left:22px; } .rec{ grid-template-columns:minmax(0,1fr); row-gap:8px; } }
.rec .when{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); padding-top:5px; }
.rec h3{ margin-bottom:11px; }
.rec p{ font-size:16.2px; line-height:1.62; color:var(--fg-m); max-width:68ch; }

/* ============================================================ table */
.tbl{ width:100%; overflow-x:auto; border-top:1px solid var(--line); }
.tbl table{ min-width:620px; }
.tbl th, .tbl td{ text-align:left; padding:17px 22px 17px 0; border-bottom:1px solid var(--line);
  vertical-align:top; }
.tbl thead th{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-f); font-weight:400; padding-bottom:14px; }
.tbl tbody th{ font-family:var(--disp); font-weight:580; font-size:16.4px; letter-spacing:-.01em;
  color:var(--fg); line-height:1.35; width:46%; }
.tbl tbody td{ font-size:15px; color:var(--fg-m); }
.tbl tbody td:first-of-type{ font-family:var(--mono); font-size:12.5px; color:var(--accent);
  white-space:nowrap; letter-spacing:.04em; }
.tbl tbody tr{ transition:background .35s; }
.tbl tbody tr:hover{ background:var(--raise); }

/* ============================================================ vlinks */
.vlinks{ border-top:1px solid var(--line); }
.vlink{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;
  gap:clamp(14px,3vw,44px); align-items:center; padding:clamp(20px,2.4vw,32px) 0;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg); }
.vlink b{ font-family:var(--disp); font-weight:600; font-size:clamp(19px,1.8vw,26px);
  letter-spacing:-.018em; transition:color .3s, transform .5s var(--slow); }
.vlink:hover b{ color:var(--accent); transform:translateX(8px); }
.vlink span{ font-size:15.4px; color:var(--fg-m); line-height:1.5; }
.vlink em{ font-family:var(--mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase;
  font-style:normal; color:var(--fg-f); white-space:nowrap; transition:color .3s; }
.vlink:hover em{ color:var(--accent); }
@media (max-width:760px){ .vlink{ grid-template-columns:minmax(0,1fr) auto; }
  .vlink span{ grid-column:1/3; } }

/* ============================================================ specimen strip */
.spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--line); border-block:1px solid var(--line); }
.spec > div{ background:var(--bg); padding:clamp(20px,2.2vw,30px) clamp(16px,2vw,26px); }
.spec b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.spec span{ display:block; font-size:15.2px; line-height:1.48; color:var(--fg-m); }

/* ============================================================ quote */
.quote{ margin:0; position:relative; padding-top:50px; }
.quote::before{ content:"“"; position:absolute; top:-18px; left:-6px; font-family:var(--disp);
  font-size:140px; line-height:1; color:var(--accent); opacity:.5; }
.quote p{ font-family:var(--disp); font-weight:520; font-size:clamp(23px,2.9vw,40px);
  line-height:1.26; letter-spacing:-.022em; color:var(--fg); }
.quote cite{ display:block; margin-top:28px; font-family:var(--mono); font-size:11px;
  letter-spacing:.17em; text-transform:uppercase; font-style:normal; color:var(--fg-f); }

/* ============================================================ rail (horizontal) */
.rail-wrap{ position:relative; }
.rail{ display:flex; gap:clamp(14px,2vw,26px); overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:26px; scrollbar-width:thin; cursor:grab;
  padding-inline:var(--gut); margin-inline:calc(var(--gut) * -1); }
.rail.drag{ cursor:grabbing; scroll-snap-type:none; }
.rail::-webkit-scrollbar{ height:2px; }
.rail::-webkit-scrollbar-track{ background:var(--line); }
.rail::-webkit-scrollbar-thumb{ background:var(--accent); }
.rail > *{ scroll-snap-align:start; flex:0 0 clamp(268px, 29vw, 380px); }
.rcard{ border:1px solid var(--line); border-radius:3px; padding:clamp(22px,2.3vw,32px);
  background:var(--raise); display:flex; flex-direction:column; gap:14px; min-height:100%;
  transition:border-color .4s, transform .5s var(--slow); }
.rcard:hover{ border-color:var(--accent); transform:translateY(-4px); }
.rcard .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent); }
.rcard h3{ font-size:20px; }
.rcard p{ font-size:15.4px; line-height:1.58; color:var(--fg-m); }
.rail-hint{ display:flex; align-items:center; gap:12px; margin-top:4px; font-family:var(--mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-f); }

/* ============================================================ the instrument */
.inst{ display:grid; grid-template-columns:minmax(0,1fr) clamp(260px,30%,380px);
  gap:clamp(22px,4vw,60px); align-items:center; border:1px solid var(--line);
  border-radius:3px; background:var(--raise); padding:clamp(22px,3vw,44px); }
@media (max-width:900px){ .inst{ grid-template-columns:minmax(0,1fr); } }
.inst canvas{ width:100%; height:auto; display:block; border-radius:2px; }
.inst-side h3{ margin-bottom:16px; }
.inst-side p{ font-size:15.8px; line-height:1.6; color:var(--fg-m); }
.inst-read{ margin-top:26px; border-top:1px solid var(--line); padding-top:20px; display:grid; gap:12px; }
.inst-read div{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-f); }
.inst-read div b{ color:var(--accent); font-weight:400; font-size:14px; letter-spacing:0; }
.inst-ctl{ display:flex; align-items:center; gap:16px; margin-top:24px; }
.inst-ctl input[type=range]{ flex:1; -webkit-appearance:none; appearance:none; height:1px;
  background:var(--line); outline:none; }
.inst-ctl input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer;
  box-shadow:0 0 0 4px rgba(101,161,211,.18); }
.inst-ctl input[type=range]::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%;
  background:var(--accent); cursor:pointer; }
.inst-ctl button{ font-family:var(--mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--fg-f); border:1px solid var(--line); border-radius:999px; padding:9px 15px;
  transition:color .3s, border-color .3s; white-space:nowrap; }
.inst-ctl button:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================ doctor feature */
.doc{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,5vw,84px); align-items:start; }
@media (max-width:900px){ .doc{ grid-template-columns:minmax(0,1fr); } }
.doc-por{ position:relative; }
.doc-por img{ width:100%; border-radius:2px; filter:grayscale(.12) contrast(1.03); }
.doc-por .bar{ position:absolute; left:-1px; bottom:-1px; right:34%;
  background:var(--ink-2); color:var(--light); padding:16px 20px; }
.doc-por .bar b{ display:block; font-family:var(--disp); font-weight:680; font-size:17px;
  letter-spacing:-.012em; }
.doc-por .bar span{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.17em;
  text-transform:uppercase; margin-top:5px; opacity:.78; }
.cv{ margin-top:clamp(28px,3vw,42px); border-top:1px solid var(--line); }
.cv div{ display:grid; grid-template-columns:clamp(104px,20%,180px) minmax(0,1fr); gap:clamp(12px,2vw,28px);
  padding:15px 0; border-bottom:1px solid var(--line); }
.cv dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-f); padding-top:3px; }
.cv dd{ margin:0; font-size:16px; line-height:1.5; color:var(--fg); }
@media (max-width:560px){ .cv div{ grid-template-columns:minmax(0,1fr); row-gap:4px; } }

/* ============================================================ cta band */
.cta{ position:relative; overflow:clip; background:var(--ink); color:var(--light);
  padding-block:clamp(78px,10vw,150px); z-index:2; }
.cta .bgx{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 120% at 82% 50%, rgba(101,161,211,.22), transparent 62%),
    repeating-linear-gradient(to right, rgba(232,239,245,.05) 0 1px, transparent 1px 22%); }
.cta h2{ font-size:clamp(34px,5.4vw,78px); max-width:15ch; }
.cta .lede{ margin-top:26px; max-width:52ch; color:var(--light-m); }

/* ============================================================ contact */
.ct{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,80px); align-items:start; }
@media (max-width:900px){ .ct{ grid-template-columns:minmax(0,1fr); } }
.form{ display:grid; gap:clamp(18px,2vw,26px); }
.frow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
@media (max-width:560px){ .frow{ grid-template-columns:minmax(0,1fr); } }
.fld{ position:relative; }
.fld label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-f); margin-bottom:9px; }
.fld input, .fld select, .fld textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--fg); font-family:var(--body); font-size:17px; padding:10px 0; border-radius:0;
  transition:border-color .35s; }
.fld textarea{ min-height:112px; resize:vertical; }
.fld select{ font-family:var(--body); }
.fld select option{ background:var(--ink); color:var(--light); }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.fld input::placeholder, .fld textarea::placeholder{ color:var(--fg-f); opacity:.65; }
.okmsg{ display:none; border-left:2px solid var(--accent); padding:14px 18px; background:var(--raise);
  font-size:15.5px; color:var(--fg); }
.okmsg.on{ display:block; }
.fineprint{ font-size:13.4px; line-height:1.55; color:var(--fg-f); max-width:60ch; }

.deets{ border-top:1px solid var(--line); }
.deets div{ padding:20px 0; border-bottom:1px solid var(--line); }
.deets dt{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-f); margin-bottom:9px; }
.deets dd{ margin:0; font-size:17px; line-height:1.5; color:var(--fg); }
.deets dd a{ text-decoration:none; }
.deets dd a:hover{ color:var(--accent); }
.hours{ display:grid; gap:7px; }
.hours span{ display:flex; justify-content:space-between; gap:18px; font-family:var(--mono);
  font-size:12.5px; color:var(--fg-m); letter-spacing:.03em; }

/* ============================================================ related */
.rel{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line);
  border-block:1px solid var(--line); }
@media (max-width:820px){ .rel{ grid-template-columns:minmax(0,1fr); } }
.rel a{ background:var(--bg); padding:clamp(22px,2.6vw,36px); text-decoration:none; color:var(--fg);
  display:flex; flex-direction:column; gap:12px; transition:background .45s var(--ease); }
.rel a:hover{ background:var(--raise); }
.rel a .k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); }
.rel a h3{ font-size:21px; transition:transform .5s var(--slow); }
.rel a:hover h3{ transform:translateX(6px); }
.rel a p{ font-size:15.2px; line-height:1.55; color:var(--fg-m); }

/* ============================================================ footer */
.ft{ background:var(--ink); color:var(--light); position:relative; z-index:2;
  border-top:1px solid rgba(232,239,245,.13); padding-top:clamp(56px,7vw,100px); overflow:clip; }
.ft-top{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,.84fr));
  gap:clamp(24px,3.5vw,56px); padding-bottom:clamp(44px,6vw,80px); }
@media (max-width:1180px){ .ft-top{ grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){ .ft-top{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ft-top{ grid-template-columns:minmax(0,1fr); } }
.ft-blurb{ font-size:15.4px; line-height:1.6; color:var(--light-m); max-width:40ch; margin-top:22px; }
.ft-addr{ margin-top:22px; font-family:var(--mono); font-size:12.5px; line-height:2; color:var(--light-m); }
.ft-addr a{ text-decoration:none; }
.ft-addr a:hover{ color:var(--accent); }
.ft h4{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-f); font-weight:400; margin-bottom:20px; }
.ft li{ margin-bottom:11px; }
.ft li a{ text-decoration:none; font-size:15px; color:var(--light-m); transition:color .3s, padding-left .4s var(--slow); }
.ft li a:hover{ color:var(--accent); padding-left:5px; }
.ft-mark{ border-top:1px solid rgba(232,239,245,.13); padding-top:clamp(26px,3vw,40px); }
.ft-mark .big{ font-family:var(--disp); font-weight:760; font-variation-settings:"wdth" 100;
  font-size:clamp(56px,15.6vw,232px); line-height:.82; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(232,239,245,.2);
  text-align:center; margin:0; user-select:none; }
.ft-fine{ display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  padding-block:26px 30px; border-top:1px solid rgba(232,239,245,.13); margin-top:clamp(20px,3vw,36px);
  font-size:12.4px; line-height:1.6; color:var(--light-f); }
.ft-fine a{ color:var(--light-m); }
.ft-disc{ flex:1 1 100%; max-width:none; font-size:11.8px; line-height:1.65; }

/* mobile sticky bar */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  grid-template-columns:1fr 1fr; border-top:1px solid rgba(232,239,245,.14);
  background:rgba(22,34,44,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.mbar a{ padding:17px 10px; text-align:center; text-decoration:none; font-family:var(--mono);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--light); }
.mbar a.b{ background:var(--fill-bg); color:var(--fill-fg); }
@media (max-width:860px){ .mbar{ display:grid; } body{ padding-bottom:56px; } }

/* progress */
.prog{ position:fixed; left:0; top:0; height:2px; width:0; background:var(--accent); z-index:95; }

/* ============================================================ motion */
.js .rise{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--slow), transform .9s var(--slow); }
.js .rise.in{ opacity:1; transform:none; }
.js .stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--slow), transform .8s var(--slow); }
.js .stagger.in > *{ opacity:1; transform:none; }
.js .stagger.in > *:nth-child(1){ transition-delay:.02s }
.js .stagger.in > *:nth-child(2){ transition-delay:.08s }
.js .stagger.in > *:nth-child(3){ transition-delay:.14s }
.js .stagger.in > *:nth-child(4){ transition-delay:.2s }
.js .stagger.in > *:nth-child(5){ transition-delay:.26s }
.js .stagger.in > *:nth-child(6){ transition-delay:.32s }
.js .stagger.in > *:nth-child(n+7){ transition-delay:.38s }

.js .wordup{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.js .wordup > .ln{ display:inline-block; transform:translateY(103%);
  transition:transform .95s var(--slow); }
.js .wordup.in > .ln{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .rise, .js .stagger > *, .js .wordup > .ln{ opacity:1 !important; transform:none !important; transition:none !important; }
  .fig.clip img{ clip-path:none !important; }
  .tick-in{ animation:none !important; }
  .cue i{ animation:none; }
  .step::after{ transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* ============================================================ responsive */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:46px; padding-bottom:40px; }
  .plate{ justify-self:start; width:min(100%, 420px); }
  .hero.sub .hero-grid{ align-items:start; }
}
@media (max-width:860px){
  .hd .btn{ display:none; }
  .hd-tel{ font-size:11.5px; }
  .stats{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .stats > div{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; }
  .stats > div span{ margin-top:0; }
  .cue{ display:none; }
}
@media (max-width:620px){
  body{ font-size:17px; }
  .plate .sig{ width:40%; left:-6px; }
  .plate .tag{ display:none; }
  .plate .frame{ inset:20px -14px -14px 20px; }
  .btn{ width:100%; justify-content:center; padding-inline:18px; }
  .acts{ gap:10px; }
  .quote::before{ font-size:92px; top:-6px; }
  .drop > p:first-of-type::first-letter{ font-size:3.2em; }
}

/* ============================================================ statement */
.stmt{ position:relative; overflow:clip; background:var(--ink); color:var(--light);
  min-height:min(82vh, 720px); display:grid; align-items:center; z-index:2;
  padding-block:clamp(72px,9vw,130px); }
.stmt .bgx{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 90% at 16% 24%, rgba(101,161,211,.17), transparent 60%),
    repeating-linear-gradient(to right, rgba(232,239,245,.05) 0 1px, transparent 1px 16.6667%),
    repeating-linear-gradient(to bottom, rgba(232,239,245,.028) 0 1px, transparent 1px 140px); }
.stmt .wrap{ position:relative; }
.stmt q{ quotes:none; display:block; font-family:var(--disp); font-weight:600;
  font-variation-settings:"wdth" 90; font-size:clamp(34px,6.1vw,92px); line-height:1.02;
  letter-spacing:-.034em; max-width:17ch; }
.stmt q em{ font-style:normal; color:var(--accent); }
.stmt .by{ margin-top:clamp(34px,4.4vw,62px); display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:0;
  border-top:1px solid var(--line); max-width:1000px; }
.stmt .by span{ display:block; padding:22px clamp(16px,2vw,30px) 4px 0;
  border-right:1px solid var(--line); font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; line-height:1.9; text-transform:uppercase; color:var(--light-f); }
.stmt .by span:last-child{ border-right:0; }
.stmt .by span + span{ padding-left:clamp(16px,2vw,30px); }
.stmt .by b{ display:block; color:var(--light); font-weight:500; font-size:11px; margin-bottom:5px; }
@media (max-width:620px){ .stmt .by span{ border-right:0; border-bottom:1px solid var(--line);
  padding-left:0 !important; padding-bottom:16px; } }

/* ============================================================ figure numbers */
.fignum{ position:absolute; right:var(--gut); top:clamp(26px,4vw,54px); font-family:var(--mono);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-f);
  pointer-events:none; }

/* ============================================================ small-screen chrome */
@media (max-width:1040px){
  .mark span{ display:none; }
  .mark s{ display:none; }
}
@media (max-width:760px){
  .hd{ height:62px; } .hd.stuck{ height:56px; }
  .drawer{ padding-top:76px; }
  .mark b{ font-size:18px; letter-spacing:.17em; }
  .hd-tel{ display:none; }
  .hd .btn{ display:inline-flex; padding:11px 17px; font-size:10px; min-height:40px; }
  .hd .btn svg{ display:none; }
  .hero{ padding-top:96px; }
}
@media (max-width:420px){
  .hd .btn{ padding:10px 13px; letter-spacing:.12em; }
}
/* the crumb names the section, not the page — the eyebrow already does that */
.crumb span{ color:var(--light-m); }

/* ============================================================ nav breakpoints */
@media (max-width:1340px){ .hd-tel{ display:none; } }
@media (max-width:1240px){
  .menu a.top, .menu button.top{ font-size:14px; }
  .menu{ gap:clamp(10px,1.1vw,17px); }
}
@media (max-width:1120px){
  .menu{ display:none; }
  .burger{ display:block; }
}
@media (min-width:1121px){
  .drawer, .scrim{ display:none; }
}

/* ============================================================ hero, refined */
.hero{ padding-top:clamp(104px,12.5vh,146px); }
.hero-grid{ min-height:min(74vh, 720px); gap:clamp(28px,4.5vw,80px); }
.hero h1{ margin:0 0 30px; }
.hero .lede{ max-width:42ch; font-size:clamp(18.5px,1.42vw,21.5px); line-height:1.6; }
.acts{ margin-top:40px; gap:14px; }

/* a quiet rule of facts under the headline, the way a masthead carries a dateline */
.datum{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  margin-bottom:34px; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--light-f); }
.datum b{ color:var(--light-m); font-weight:500; }
.datum i{ width:3px; height:3px; border-radius:50%; background:var(--sky); font-style:normal; opacity:.8; }

.stats{ margin-top:clamp(48px,5.4vw,76px); padding-top:30px; gap:clamp(18px,2.4vw,40px); }
.stats > div b{ font-size:clamp(27px,3vw,44px); font-weight:300; }
.stats > div span{ font-size:13.4px; margin-top:13px; }

/* the portrait stands on something, instead of floating with a frame behind it */
.plate{ width:min(100%, 560px); }
.plate .frame{ display:none; }
.plate .glow{ left:50%; top:48%; width:132%; filter:blur(22px);
  background:radial-gradient(circle, rgba(101,161,211,.26), transparent 64%); }
.plate .pedestal{ position:absolute; left:50%; bottom:6px; width:86%; height:64px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(101,161,211,.26), transparent 70%); }
.plate .base{ position:absolute; left:-6%; right:-6%; bottom:14px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(187,215,238,.55) 22%,
             rgba(187,215,238,.55) 78%, transparent); }
.plate img.por{ filter:drop-shadow(0 40px 70px rgba(0,0,0,.55)) saturate(.95) contrast(1.03);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 80%, transparent 99%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 80%, transparent 99%); }
.plate .sig{ left:-10px; bottom:34px; width:min(44%, 218px); opacity:.95; }
.plate .tag{ right:-14px; top:40px; letter-spacing:.3em; font-size:9.5px; }

/* ============================================================ the cinematic band */
.bleed{ position:relative; overflow:clip; z-index:2; isolation:isolate;
  min-height:clamp(400px, 54vh, 620px); max-height:720px; display:grid; align-items:end; }
.bleed .ph{ position:absolute; inset:0; z-index:-2; }
.bleed .ph img{ width:100%; height:100%; object-fit:cover; object-position:62% 30%; }
.bleed .ph::after{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
.bleed .scrim{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(10,18,25,.96) 0%, rgba(10,18,25,.66) 40%, rgba(10,18,25,.26) 100%),
    linear-gradient(to right, rgba(10,18,25,.94) 0%, rgba(10,18,25,.74) 30%,
                    rgba(10,18,25,.24) 62%, rgba(10,18,25,.08) 100%); }
.bleed .wrap{ padding-block:clamp(44px,6vw,86px); }
.bleed q{ quotes:none; display:block; font-family:var(--disp); font-weight:580;
  font-variation-settings:"wdth" 90; font-size:clamp(28px,3.9vw,58px); line-height:1.04;
  letter-spacing:-.03em; max-width:19ch; color:var(--light); }
.bleed q em{ font-style:normal; color:var(--sky); }
.bleed .cap{ margin-top:26px; max-width:44ch; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; line-height:1.9; text-transform:uppercase; color:var(--light-m); }

/* ============================================================ section index marks */
.head .mk{ position:absolute; right:0; top:-6px; font-family:var(--mono); font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--fg-f); opacity:.7; }
@media (max-width:900px){ .head .mk{ display:none; } }

/* ============================================================ rails + records, roomier */
.rcard{ padding:clamp(26px,2.7vw,40px); box-shadow:0 18px 50px -34px rgba(14,24,33,.6); }
.rec{ padding:clamp(26px,3vw,42px) 0; }
.rowx{ padding:clamp(26px,3.3vw,48px) 0; }
.spec > div{ padding:clamp(24px,2.6vw,38px) clamp(18px,2.2vw,30px); }
.faq summary{ padding:clamp(24px,2.7vw,36px) 0; }

/* ============================================================ quotes, bigger */
.quote p{ font-size:clamp(25px,3.3vw,46px); }
.stmt q{ font-size:clamp(36px,6.6vw,104px); line-height:.99; letter-spacing:-.038em; }
.cta h2{ font-size:clamp(36px,6vw,88px); }

@media (max-width:1100px){
  .hero-grid{ min-height:0; }
  .plate{ width:min(100%, 440px); }
}
@media (max-width:620px){
  .plate .sig{ bottom:28px; }
  .datum{ gap:5px 0; font-size:9.5px; letter-spacing:.2em; flex-direction:column;
    align-items:flex-start; }
  .datum i{ display:none; }
}

/* the art panel on the deep ground wants the opposite treatment */
.dark .art, .inst{
  background:
    linear-gradient(165deg, rgba(232,239,245,.055), rgba(232,239,245,0) 58%),
    var(--raise);
  box-shadow:0 30px 70px -44px rgba(0,0,0,.8), inset 0 1px 0 rgba(232,239,245,.07);
}
/* the credential strip, given a little more presence */
.spec{ border-block:0; background:transparent; gap:0; }
.spec > div{ background:transparent; border-right:1px solid var(--line); }
.spec > div:last-child{ border-right:0; }
.spec b{ letter-spacing:.26em; margin-bottom:16px; }
.spec span{ font-size:15.6px; color:var(--light-m); }
@media (max-width:760px){ .spec > div{ border-right:0; border-bottom:1px solid var(--line); } }