/* ==========================================================================
   RED LINE — v1 REFINED  ("The System", black)
   Implements shared/review/v1-critique.md on top of web/v1-black: same
   system, same identity, made clearer, shorter and more usable.

   DESIGN SYSTEM
   --------------------------------------------------------------------------
   GRID      20 columns x 5vw, no gutters (72px @1440, 19.5px @390). Content
             starts on col 3 (2u) on desktop and col 2 (1u) on mobile; the
             header is 1u tall; the CTA block is 3u, crisis cell 3u, lang 2u.
   TYPE      Inter Tight 400/500/600 + Instrument Serif (regular / italic).
               hero       min(11.667vw, 64svh-based)   lh .80  -0.045em
               founder    7vw    (100 @1440)            lh .82  -0.045em
               slide      min(6.4vw, 11.2svh) (92)     lh .86  -0.045em
               statement  3.75vw (54 @1440)             lh 1.0  -0.04em  balance
               h3         2.22vw (32)   lead 1.667vw (24)   body 1.11vw (16)
               small      1vw (14.4, min 13.5)          label .8vw (12-13) caps
             Floors: nothing below 12px; labels 12px/600/+.07em.
             Instrument Serif only for the one real number (20+), the
             practices' supporting lines and quiet emphasis — no list numerals.
   COLOUR    ground #0A0A0A, panels #0F0F0F-#191919, hairlines 13% white,
             text #F4F4F4 / #ECECEC, secondary #9B9B9B (7.3:1),
             inactive #8A8A8A (5.7:1 on ground, 5:1 on #1C1C1C),
             #FF0000 (logo red) is the ONLY accent: the line, the dot, the
             one real number, the crisis "recording" light; #FF3B30 when red
             has to be small text on black.
   SPACE     statements clamp(80,8.5vw,160) top / clamp(44,5vw,96) bottom;
             s1 = 5vw, s2 = 8vw. Target: <= 12 screens at 1440x900.
   TOUCH     every interactive element >= 44px on touch: padding + negative
             margin, so the visual rhythm stays as drawn.
   MOTION    GSAP + ScrollTrigger + Lenis. Slow expo easings, nothing bounces.
             Read-along statements run .55 -> 1 and are done by ~55% of the
             viewport (never unreadable). The red line draws, the dot lands;
             the crisis dot breathes like a recording light. Pinned practice
             slider: the red disc splits, then becomes the line + dot.
             prefers-reduced-motion: static and fully visible.
   IMAGE     B&W night tone, one red element per picture; cut-out objects sit
             BESIDE the type (never across it).
   ========================================================================== */

/* Self-hosted fonts (Google Fonts files, latin + latin-ext + cyrillic for Inter Tight) */
/* Instrument Serif italic latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif italic latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif normal latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif normal latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight normal cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter Tight normal cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter Tight normal latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight normal latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight normal cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter Tight normal cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter Tight normal latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight normal latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight normal cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter Tight normal cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter Tight normal latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight normal latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  color-scheme: dark;
  --bg: #0a0a0a;             /* page ground */
  --bg-1: #0f0f0f;
  --bg-2: #131313;
  --line: #262626;           /* card borders, media fill */
  --line-2: #333333;
  --mute: #666666;           /* input lines, inactive dots (3.5:1) */
  --grey: #9b9b9b;           /* secondary text — 7.3:1 */
  --grey-2: #8a8a8a;         /* inactive UI text — 5.7:1 */
  --ink: #f4f4f4;
  --charcoal: #ececec;
  --red: #ff0000;
  --red-text: #ff3b30;       /* small red text on black — 5.6:1 */
  --rule: rgba(255, 255, 255, .13);
  --rule-strong: rgba(255, 255, 255, .26);

  --u: 5vw;
  --hdr: max(5vw, 60px);
  --s1: clamp(40px, 5vw, 96px);
  --s2: clamp(64px, 8vw, 160px);
  --st-t: clamp(80px, 8.5vw, 160px);
  --st-b: clamp(44px, 5vw, 96px);

  --ff-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-serif: "Instrument Serif", "Times New Roman", Times, serif;

  --fs-hero: min(11.667vw, calc((64svh - 130px) / 2.4));
  --fs-slide: min(6.4vw, 11.2svh);
  --fs-statement: clamp(30px, 3.75vw, 76px);
  --fs-h3: clamp(22px, 2.222vw, 44px);
  --fs-lead: clamp(19px, 1.667vw, 32px);
  --fs-body: clamp(15px, 1.111vw, 20px);
  --fs-small: clamp(13.5px, 1vw, 18px);
  --fs-label: clamp(12px, .8vw, 13px);

  --expo-out: cubic-bezier(.16, 1, .3, 1);
  --expo-inout: cubic-bezier(.87, 0, .13, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11" 1;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
p { text-wrap: pretty; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200; min-height: 44px; padding: 12px 18px;
  background: var(--ink); color: var(--bg); font-size: 14px; transform: translateY(-160%);
  transition: transform .4s var(--expo-out);
}
.skip:focus { transform: none; }

/* ---------- grid ---------- */
.g { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); }

/* ---------- type ---------- */
.t-statement, .t-h3 { font-weight: 500; color: var(--charcoal); font-kerning: normal; }
.t-statement {
  font-size: var(--fs-statement); line-height: 1; letter-spacing: -.04em;
  text-wrap: balance; hanging-punctuation: first;
}
.t-h3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -.03em; }
.t-lead { font-size: var(--fs-lead); line-height: 1.22; letter-spacing: -.02em; font-weight: 400; color: var(--charcoal); }
.t-small { font-size: var(--fs-small); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.t-label {
  font-size: var(--fs-label); line-height: 1.25; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--grey);
}
.t-kicker { font-size: var(--fs-small); font-weight: 500; letter-spacing: -.01em; color: var(--grey); line-height: 1.2; }
.serif { font-family: var(--ff-serif); font-weight: 400; letter-spacing: -.01em; }
.serif-i { font-family: var(--ff-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.red-phrase { color: var(--red); }

/* underline link with wipe-through (JS drives --ulx). The box is 44px tall for touch,
   pulled back with negative margins so it sits in the text flow like a 22px link. */
.ul {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; margin: -11px -6px -11px 0; padding: 0 6px 0 0;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.5; letter-spacing: -.01em;
  overflow: hidden; color: var(--ink);
}
.ul::after {
  content: ""; position: absolute; left: 0; right: 6px; top: calc(50% + .78em); height: 1px;
  background: currentColor; transform: translateX(var(--ulx, 0%));
}
.no-js .ul:hover::after { transform: translateX(101%); transition: transform .6s var(--expo-out); }
.ul .arr { display: inline-block; transition: transform .6s var(--expo-out); }
.ul:hover .arr { transform: translateX(4px); }

/* primary button (white block + red dot that stretches into a line) */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 56px; padding: 0 22px 0 24px; background: #fff; color: #0a0a0a;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  transition: background-color .4s;
}
.btn:hover { background: #e6e6e6; }
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; transition: width .7s var(--expo-out), border-radius .7s var(--expo-out); }
.btn:hover .dot { width: 26px; border-radius: 4px; }

/* the crisis "recording light" */
.rec { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.motion .rec { animation: rec 2.8s ease-in-out infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* language switch — MK edition not live yet: visibly "soon", not interactive */
.lang {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; white-space: nowrap;
}
.lang__on { color: var(--ink); }
.lang__sep { color: var(--mute); font-weight: 400; }
.lang__soon { color: var(--grey-2); cursor: default; }
.lang__soon i { font-family: var(--ff-serif); font-style: italic; font-weight: 400; font-size: 1.25em; letter-spacing: 0; margin-left: 1px; }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: 0; height: 0; display: none; }
.has-cursor .cursor { display: block; }
.cursor__disc {
  position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%;
  background: var(--red); transform: scale(.09); transition: transform .7s var(--expo-out);
  display: grid; place-items: center;
}
.cursor__label { color: #fff; font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .5s var(--expo-out); }
.cursor.is-link .cursor__disc { transform: scale(.2); }
.cursor.is-view .cursor__disc { transform: scale(1); }
.cursor.is-view .cursor__label { opacity: 1; transform: none; transition-delay: .1s; }
.cursor.is-hidden .cursor__disc { transform: scale(0); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--hdr);
  display: grid; grid-template-columns: repeat(20, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
  transition: transform .9s var(--expo-out), background-color .5s ease, border-color .5s ease;
}
.hdr.is-solid { background: rgba(10, 10, 10, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hdr.is-hidden { transform: translateY(-101%); }
.hdr__logo { grid-column: 1 / span 3; display: flex; align-items: center; padding-left: calc(var(--u) * .5); }
.hdr__logo img { width: clamp(104px, 8.9vw, 170px); height: auto; }
.hdr__nav { grid-column: 4 / span 9; display: flex; align-items: center; justify-content: center; }
.hdr__nav ul { display: flex; gap: clamp(16px, 2vw, 40px); }
.hdr__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
}
.hdr__nav a::before {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .5s var(--expo-out);
}
.hdr__nav a[aria-current="true"]::before, .hdr__nav a:hover::before { transform: scale(1); }

.hdr__crisis {
  grid-column: 13 / span 3; border-left: 1px solid var(--rule);
  display: flex; align-items: center; gap: 12px; padding: 0 clamp(14px, 1.4vw, 26px);
  transition: background-color .4s;
}
.hdr__crisis:hover { background: rgba(255, 255, 255, .04); }
.hdr__crisis-t { display: grid; line-height: 1.22; }
.hdr__crisis .k { font-size: 12px; font-weight: 500; color: var(--grey); letter-spacing: 0; }
.hdr__crisis .n { font-size: var(--fs-small); font-weight: 500; color: var(--ink); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdr__lang { grid-column: 16 / span 2; border-left: 1px solid var(--rule); justify-content: center; }
.hdr__cta {
  grid-column: 18 / span 3; background: #fff; color: #0a0a0a;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: -.01em; position: relative; overflow: hidden;
}
.hdr__cta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; transition: width .7s var(--expo-out), border-radius .7s var(--expo-out); }
.hdr__cta:hover .dot { width: 26px; border-radius: 4px; }
.hdr__menu {
  display: none; grid-column: 17 / span 4; border-left: 1px solid var(--rule);
  align-items: center; justify-content: center; gap: 12px; font-size: var(--fs-small); font-weight: 500;
}
.hdr__menu .bars { width: 22px; height: 8px; position: relative; }
.hdr__menu .bars::before, .hdr__menu .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform .6s var(--expo-out), top .6s var(--expo-out);
}
.hdr__menu .bars::before { top: 0; }
.hdr__menu .bars::after { top: 6.5px; }
.menu-open .hdr__menu .bars::before { top: 3.25px; transform: rotate(45deg); }
.menu-open .hdr__menu .bars::after { top: 3.25px; transform: rotate(-45deg); }

/* mobile / tablet menu */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  padding: calc(var(--hdr) + 20px) var(--u) 24px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow-y: auto;
  visibility: hidden; opacity: 0; transition: opacity .5s var(--expo-out), visibility 0s .5s;
}
.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .5s var(--expo-out); }
.menu__list li { border-bottom: 1px solid var(--rule); overflow: hidden; }
.menu__list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0 11px; font-size: clamp(30px, 8.2vw, 56px); font-weight: 500; letter-spacing: -.045em; line-height: 1;
  transform: translateY(105%); transition: transform .9s var(--expo-out);
}
.menu-open .menu__list a { transform: none; }
.menu__list li:nth-child(2) a { transition-delay: .04s; }
.menu__list li:nth-child(3) a { transition-delay: .08s; }
.menu__list li:nth-child(4) a { transition-delay: .12s; }
.menu__list li:nth-child(5) a { transition-delay: .16s; }
.menu__list li:nth-child(6) a { transition-delay: .2s; }
.menu__list a::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .5s var(--expo-out); }
.menu__list a:hover::after, .menu__list a[aria-current="true"]::after { transform: scale(1); }
.menu__foot { display: grid; gap: 12px; }
.menu__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; color: var(--grey); }
.menu__mail { display: inline-flex; align-items: center; min-height: 44px; }
.menu__cta {
  display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 22px;
  background: #fff; color: #0a0a0a; font-size: 16px; font-weight: 500;
}
.menu__cta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* crisis row (menu, contact) */
.crisis-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  font-size: 16px; font-weight: 500; letter-spacing: -.01em; transition: border-color .4s;
}
.crisis-row__k { color: var(--grey); }
.crisis-row__n { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crisis-row:hover { border-color: var(--red); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--bg); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; transform-origin: 50% 64%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 70%, rgba(10,10,10,.85) 92%, #0a0a0a 100%);
}
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__title {
  position: absolute; left: 0; right: 0; bottom: calc(36% - .036em);
  font-size: var(--fs-hero); line-height: .8; letter-spacing: -.045em; font-weight: 500;
  color: var(--charcoal); white-space: nowrap;
}
.hero__title .hl { display: block; }
.hero__title .hl--1 { padding-left: calc(var(--u) * 2); }
.hero__title .hl--2 { padding-left: calc(var(--u) * 3); }
.hero__title .hl--3 { padding-left: calc(var(--u) * 4); }
.hero__title .serif-i { font-size: 1.06em; letter-spacing: -.035em; }
.hero__line { position: absolute; left: 0; width: calc(var(--u) * 19); top: 64%; height: 2px; margin-top: -1px; pointer-events: none; }
.hero__line-bar { position: absolute; left: 0; right: 6px; top: 0; bottom: 0; background: var(--red); transform-origin: 0 50%; }
.hero__line-dot { position: absolute; right: -7px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%; background: var(--red); }
.hero__lead { position: absolute; top: calc(64% + clamp(28px, 3vw, 56px)); left: calc(var(--u) * 14); width: calc(var(--u) * 5); }
.hero__lead p { margin-bottom: clamp(20px, 2vw, 34px); }
.hero__foot {
  position: absolute; left: var(--u); right: var(--u); bottom: clamp(22px, 2.5vw, 44px);
  display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); align-items: end;
}
.hero__loc { grid-column: 1 / span 7; color: var(--grey); }
.hero__loc b { color: var(--ink); font-weight: 500; display: block; }
.crisis-line {
  grid-column: 14 / span 4; justify-self: start;
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: -4px 0;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--grey);
}
.crisis-line__t { display: grid; }
.crisis-line b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s; }
.crisis-line:hover b { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.crisis-line .rec { align-self: flex-start; margin-top: .55em; }
.scroll-cue { grid-column: 18; justify-self: end; display: flex; align-items: center; gap: 12px; color: var(--grey); }
.scroll-cue__track { width: 1px; height: 44px; background: var(--rule-strong); position: relative; overflow: hidden; }
.scroll-cue__track::after {
  content: ""; position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--red);
  animation: cue 2.4s var(--expo-inout) infinite;
}
@keyframes cue { 0% { transform: translateY(-6px); } 60%, 100% { transform: translateY(46px); } }

/* ==========================================================================
   SECTIONS — shared
   ========================================================================== */
.sec { position: relative; }
.statement { text-align: center; padding: var(--st-t) 0 var(--st-b); }
.statement .t-kicker { margin-bottom: clamp(20px, 2.2vw, 40px); }
.statement .t-statement { width: calc(var(--u) * 12); margin: 0 auto; }
.statement--wide .t-statement { width: calc(var(--u) * 14); }

/* split helpers */
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }
.wr { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.wr > span { display: inline-block; }

/* media + LQIP */
.media { position: relative; overflow: hidden; background: var(--line); }
.media::before { content: ""; position: absolute; inset: -24px; background: var(--lqip, none) center / cover no-repeat; filter: blur(12px); transform: scale(1.05); }
.media img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.js .media img { opacity: 0; transition: opacity 1.1s var(--expo-out); }
.js .media.is-loaded img { opacity: 1; }

/* ---------- intro + credentials ---------- */
.intro { padding-bottom: var(--s1); }
.creds { row-gap: 48px; }
.creds__fact { grid-column: 3 / span 6; border-top: 1px solid var(--rule-strong); padding-top: clamp(24px, 2.2vw, 40px); }
.creds__num { font-size: clamp(120px, 13vw, 250px); line-height: .78; letter-spacing: -.02em; color: var(--red); margin-left: -.04em; }
.creds__cap { margin-top: clamp(18px, 1.8vw, 30px); font-size: clamp(17px, 1.4vw, 26px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; color: var(--charcoal); max-width: 15em; }
.creds__body { grid-column: 11 / span 8; border-top: 1px solid var(--rule-strong); padding-top: clamp(24px, 2.2vw, 40px); }
.creds__body .t-lead { max-width: 21em; }
.creds__bg { margin: clamp(28px, 2.8vw, 48px) 0 clamp(26px, 2.6vw, 44px); }
.creds__bg .t-label { margin-bottom: 12px; }
.dots { display: flex; flex-wrap: wrap; gap: 6px 1.5em; font-size: clamp(17px, 1.4vw, 26px); line-height: 1.35; letter-spacing: -.02em; color: var(--charcoal); }
.dots li { display: inline-flex; align-items: center; gap: .55em; white-space: nowrap; }
.dots li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex: none; }

/* ==========================================================================
   SERVICES — pinned slider. Title, supporting line and capabilities read as
   one column on the left; the object and the red shape live on the right.
   ========================================================================== */
.svc__pin { position: relative; }
.slide {
  position: relative; overflow: hidden; background: var(--bg, var(--bg-1));
  height: 100vh; height: 100svh; min-height: 620px;
  display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr;
  padding: calc(var(--hdr) + clamp(84px, 13vh, 130px)) 0 clamp(36px, 6vh, 72px);
}
.slide__index {
  position: absolute; left: var(--u); top: calc(var(--hdr) + clamp(20px, 2.2vw, 40px)); z-index: 5;
  display: grid; gap: 8px; font-size: var(--fs-small); font-weight: 500;
}
.slide__index li { color: var(--grey-2); display: flex; align-items: center; gap: 10px; }
.slide__index li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); transform: scale(0); }
.slide__index li.is-active { color: var(--ink); }
.slide__index li.is-active::before { transform: scale(1); }
.slide__head { grid-column: 2 / span 9; grid-row: 2; position: relative; z-index: 4; }
.slide__title {
  font-size: var(--fs-slide); line-height: .86; letter-spacing: -.045em; font-weight: 500; color: var(--charcoal);
  white-space: nowrap;
}
.slide__title .nl { display: block; }
.slide__line { margin-top: clamp(16px, 1.6vw, 28px); font-size: clamp(22px, 2.1vw, 40px); line-height: 1.08; color: var(--charcoal); }
.slide__body { grid-column: 2 / span 7; grid-row: 3; position: relative; z-index: 4; margin-top: clamp(26px, 3.6vh, 48px); }
.slide__caps .t-label { margin-bottom: 12px; }
.slide__caps ul { max-width: calc(var(--u) * 6); border-bottom: 1px solid var(--rule); }
.slide__caps li {
  border-top: 1px solid var(--rule); padding: .5em 0 .46em;
  font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; color: var(--ink);
}
.slide__body .ul { margin-top: clamp(18px, 2.6vh, 30px); }
.slide__visual { position: absolute; left: calc(var(--u) * 10); width: calc(var(--u) * 9); top: var(--hdr); bottom: 0; pointer-events: none; }
.slide__shape { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); overflow: visible; z-index: 1; }
.slide__shape path, .slide__shape rect { fill: var(--red); }
.slide__img { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); }
.slide__img img { width: 100%; height: auto; }
.slide--1 .slide__img { width: 64%; }
.slide--2 .slide__img { width: 94%; }
.slide--3 .slide__img {
  top: auto; bottom: 9%; transform: translateX(-46%); height: min(112%, calc(var(--u) * 14)); width: auto; aspect-ratio: 856 / 1400;
  -webkit-mask-image: linear-gradient(200deg, transparent 6%, #000 38%); mask-image: linear-gradient(200deg, transparent 6%, #000 38%);
}
.slide--3 .slide__img img { height: 100%; width: 100%; }

/* the wipe between practices is drawn as the red line */
.svc__edge { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--red); z-index: 7; opacity: 0; pointer-events: none; will-change: transform; }

/* pinned mode (desktop, JS) */
.svc.is-pinned .svc__pin { height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.svc.is-pinned .slide { position: absolute; inset: 0; height: auto; min-height: 0; }

/* ==========================================================================
   WHO WE WORK WITH
   ========================================================================== */
.who { padding-bottom: var(--s2); }
.who__intro { grid-column: 1 / -1; }
.who__cards { grid-column: 3 / span 16; display: grid; grid-template-columns: repeat(4, 1fr); }
.who-card {
  position: relative; border: 1px solid var(--line); margin-right: -1px;
  min-height: clamp(190px, 14.5vw, 290px); padding: clamp(18px, 1.6vw, 28px) clamp(18px, 1.6vw, 28px) clamp(20px, 1.8vw, 30px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  transition: background-color .6s var(--expo-out);
}
.who-card::after {
  content: ""; position: absolute; right: clamp(18px, 1.6vw, 28px); top: clamp(26px, 2.2vw, 38px);
  width: 9px; height: 9px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .6s var(--expo-out);
}
.who-card:hover { background: var(--bg-1); }
.who-card:hover::after { transform: scale(1); }
.who-card h3 { padding-right: 24px; text-wrap: balance; }
.who-card p { color: var(--grey); line-height: 1.4; max-width: 17em; }
.who__note { grid-column: 5 / span 12; text-align: center; margin-top: var(--s1); font-size: clamp(24px, 2.4vw, 46px); line-height: 1.08; color: var(--charcoal); text-wrap: balance; }

/* ==========================================================================
   HOW WE WORK — order is carried by the rail and its travelling red dot
   ========================================================================== */
.how { background: var(--bg-1); padding-bottom: var(--s2); }
.how__intro { grid-column: 1 / -1; }
.steps { grid-column: 3 / span 16; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.steps__rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.steps__progress { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.steps__head { position: absolute; top: -5px; left: calc(var(--p, 1) * 100%); width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--red); }
.step { position: relative; padding: clamp(30px, 2.8vw, 52px) clamp(14px, 1.6vw, 30px) 0 0; }
.step::before {
  content: ""; position: absolute; left: 0; top: -3.5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-1); border: 1px solid var(--mute); transition: background-color .4s, border-color .4s;
}
.step.is-on::before { background: var(--red); border-color: var(--red); }
.step h3 { margin-bottom: 12px; }
.step p { color: var(--grey); max-width: 15em; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { padding-bottom: var(--s2); }
.about__fig { margin-bottom: var(--s1); }
.about__media { grid-column: 3 / span 16; }
.about__media .media { aspect-ratio: 1536 / 600; }
.about__cap { display: flex; justify-content: space-between; margin-top: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--grey); }
.about__cols { row-gap: 28px; }
.about__a { grid-column: 3 / span 7; }
.about__b { grid-column: 12 / span 6; display: grid; gap: 1.1em; color: var(--charcoal); }
.about__b .ul { margin-top: 2px; justify-self: start; }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder { background: var(--bg-2); padding: var(--s2) 0; align-items: end; }
.founder__media { grid-column: 3 / span 6; }
.portrait { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #1a1a1a; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.04); }
.portrait__cap { display: flex; justify-content: space-between; margin-top: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--grey); }
.founder__body { grid-column: 10 / span 9; padding-bottom: calc(14px + var(--fs-small) * 1.3); }
.founder__body .t-kicker { margin-bottom: clamp(18px, 1.8vw, 30px); }
.founder__name { font-size: clamp(56px, 7vw, 140px); line-height: .82; letter-spacing: -.045em; font-weight: 500; color: var(--charcoal); margin-bottom: clamp(22px, 2.2vw, 40px); }
.founder__name .nl { display: block; }
.founder__name .nl + .nl { padding-left: var(--u); }
.founder__role { font-size: clamp(22px, 2vw, 38px); line-height: 1.1; color: var(--charcoal); margin-bottom: clamp(20px, 2vw, 36px); }
.founder__bio { max-width: 31em; color: var(--charcoal); }
.founder__bio + .founder__bio { margin-top: 1em; }
.founder__more { margin-top: clamp(28px, 2.6vw, 44px); padding-top: clamp(20px, 1.8vw, 28px); border-top: 1px solid var(--rule); max-width: 31em; }

/* ==========================================================================
   INSIGHTS — one live column as a feature, the rest visibly "in preparation"
   ========================================================================== */
.ins { padding: var(--s2) 0; align-items: start; }
.ins__head { grid-column: 12 / span 7; grid-row: 1; }
.ins__head .t-kicker { margin-bottom: 18px; }
.ins__head .t-statement { text-wrap: balance; }
.feat { grid-column: 3 / span 8; grid-row: 1 / span 2; }
.feat__link { display: block; }
.feat__media { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.feat__media img { object-position: 50% 40%; transition: transform 1.4s var(--expo-out), opacity 1s var(--expo-out); }
.feat__link:hover .feat__media img { transform: scale(1.03); }
.meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: var(--fs-small); font-weight: 500; color: var(--grey); margin-bottom: 12px; }
.meta__tag { color: var(--ink); }
.meta__tag::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: middle; transform: translateY(-1px); }
.feat__title { font-size: clamp(24px, 2.2vw, 42px); line-height: 1.06; letter-spacing: -.03em; font-weight: 500; color: var(--charcoal); margin-bottom: 14px; max-width: 16em; text-wrap: balance; }
.feat__ex { color: var(--grey); max-width: 30em; margin-bottom: 22px; }
.prep { grid-column: 12 / span 7; grid-row: 2; align-self: end; margin-top: var(--s1); }
.prep__label { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.prep__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; align-items: baseline; padding: 18px 0 19px; border-bottom: 1px solid var(--rule); }
.prep__title { font-size: clamp(17px, 1.39vw, 26px); line-height: 1.16; letter-spacing: -.02em; font-weight: 500; color: var(--grey); text-wrap: balance; max-width: 19em; }
.prep__meta { font-size: var(--fs-small); font-weight: 500; color: var(--grey-2); white-space: nowrap; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.contact__l { grid-column: 3 / span 7; }
.contact__l .t-kicker { margin-bottom: 20px; }
.contact__l .t-statement { margin-bottom: clamp(20px, 2vw, 36px); }
.contact__l .t-lead { margin-bottom: clamp(28px, 2.8vw, 48px); max-width: 16em; }
.crisis-row--lg { min-height: 72px; font-size: clamp(17px, 1.4vw, 24px); margin-bottom: clamp(26px, 2.6vw, 44px); }
.crisis-row--lg .rec { width: 8px; height: 8px; }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.spec dt { margin-bottom: 4px; }
.spec dd { font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }
.spec dd a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.spec dd a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.spec__sub { display: block; color: var(--grey); font-weight: 400; }
.spec__sep { color: var(--mute); margin: 0 .6em; }
.contact__r { grid-column: 11 / span 8; position: relative; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--u); }
.field { position: relative; grid-column: span 1; padding-top: 26px; margin-bottom: clamp(24px, 2.2vw, 38px); }
.field--full { grid-column: 1 / -1; }
.field label {
  position: absolute; left: 0; top: -15px; padding: 15px 0; z-index: 1;
  font-size: var(--fs-label); line-height: 1.2; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--grey);
}
.field label .req { color: var(--red-text); }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--mute); border-radius: 0; background: transparent;
  font: 500 var(--fs-lead) / 1.25 var(--ff-sans); letter-spacing: -.02em; color: var(--ink); caret-color: var(--red);
  padding: 8px 0 12px; outline: none; resize: none;
}
.field textarea { min-height: 3.9em; }
.field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--expo-out); }
.field input:focus ~ .field__line, .field textarea:focus ~ .field__line { transform: scaleX(1); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--red-text); }
.field__err { position: absolute; right: 0; top: 0; font-size: 12px; font-weight: 500; color: var(--red-text); opacity: 0; transition: opacity .3s; }
.field.is-invalid .field__err { opacity: 1; }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; margin-top: 4px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch__track { position: relative; width: 44px; height: 24px; border: 1px solid var(--mute); border-radius: 12px; transition: border-color .4s; flex: none; }
.switch__dot { position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--grey-2); transition: transform .6s var(--expo-out), background-color .4s; }
.switch input:checked + .switch__track { border-color: var(--ink); }
.switch input:checked + .switch__track .switch__dot { transform: translateX(20px); background: var(--red); }
.switch input:focus-visible + .switch__track { outline: 1px solid var(--red); outline-offset: 3px; }
.btn--form { width: calc(var(--u) * 3); min-width: 220px; min-height: max(var(--u), 60px); }
.form__urgent {
  grid-column: 1 / -1; display: none; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: var(--fs-small); font-weight: 500; color: var(--grey);
}
.form__urgent a { color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.form.is-urgent .form__urgent { display: flex; }
.form__note { grid-column: 1 / -1; margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--grey); max-width: 34em; }
.thanks { display: none; padding-top: 26px; }
.contact.is-sent .form { display: none; }
.contact.is-sent .thanks { display: block; }
.thanks__line { position: relative; height: 2px; margin: 0 0 clamp(30px, 3vw, 54px); width: calc(100% - 8px); }
.thanks__line i { position: absolute; inset: 0; background: var(--red); transform-origin: 0 50%; animation: draw 1.4s var(--expo-inout) both; }
.thanks__line b { position: absolute; right: -8px; top: -6.5px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); animation: pop .7s var(--expo-out) 1.1s both; }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes pop { from { transform: scale(0); } }
.thanks .t-statement { margin-bottom: 20px; }
.thanks p:not(.t-statement) { color: var(--grey); margin-bottom: 26px; max-width: 30em; }
.thanks p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--bg-2); }
.foot__close { text-align: center; padding: var(--st-t) 0 0; }
.foot__close .t-statement { width: calc(var(--u) * 14); margin: 0 auto clamp(24px, 2.4vw, 40px); }
.foot__close .t-statement .nl { display: block; }
.foot__line { position: relative; width: calc(var(--u) * 19); height: 1.5px; margin: var(--s1) 0 0; text-align: left; }
.foot__line i { position: absolute; left: 0; right: 7px; top: 0; bottom: 0; background: var(--red); transform-origin: 0 50%; }
.foot__line b { position: absolute; right: -6px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--red); }
.js.motion .foot__line i { transform: scaleX(0); }
.js.motion .foot__line b { transform: scale(0); }
.foot__row { align-items: center; padding: clamp(22px, 2.4vw, 44px) 0; }
.foot__logo { grid-column: 2 / span 4; display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.foot__logo img { width: clamp(120px, 11vw, 200px); height: auto; }
.foot__nav { grid-column: 7 / span 8; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(18px, 2vw, 36px); }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot__side { grid-column: 15 / span 5; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.sq { width: 44px; height: 44px; border: 1px solid var(--rule-strong); display: grid; place-items: center; color: var(--ink); transition: background-color .4s, color .4s, border-color .4s; }
.sq svg { width: 15px; height: 15px; }
.sq:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.foot__side .lang { margin-left: 18px; }
.foot__legal { border-top: 1px solid var(--rule); padding: 20px 0 24px; }
.foot__legal p { font-size: 13px; font-weight: 500; color: var(--grey); }
.foot__legal p:first-child { grid-column: 2 / span 8; }
.foot__legal p:last-child { grid-column: 12 / span 8; text-align: right; }

/* ==========================================================================
   ARTICLE + STORY (insight.html, story.html)
   ========================================================================== */
.art-hero { padding: calc(var(--hdr) + var(--s2)) 0 0; }
.art-hero__crumb { grid-column: 2 / span 18; display: flex; gap: 10px; align-items: center; color: var(--grey); font-size: var(--fs-small); font-weight: 500; margin-bottom: clamp(22px, 2.6vw, 48px); }
.art-hero__crumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.art-hero__crumb a:hover { color: var(--ink); }
.art-hero__crumb i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.art-hero__title { grid-column: 2 / span 17; font-size: clamp(44px, 6.7vw, 140px); line-height: .86; letter-spacing: -.045em; font-weight: 500; color: var(--charcoal); text-wrap: balance; }
.art-hero__title .serif-i { letter-spacing: -.03em; font-size: 1.04em; }
.hero__line.art-line { position: relative; top: auto; margin: clamp(30px, 3.4vw, 64px) 0 0; }
.art-meta { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(36px, 4vw, 76px); }
.art-meta > div { padding: 18px 0; grid-column: span 5; }
.art-meta > div:first-child { grid-column: 2 / span 6; }
.art-meta dt { margin-bottom: 6px; }
.art-meta dd { font-size: var(--fs-small); font-weight: 500; }
.art-fig { grid-column: 1 / -1; margin-top: 4px; }
.art-fig .media { aspect-ratio: 2 / 1; }
.art-body { padding: var(--s2) 0; align-items: start; }
.toc { grid-column: 2 / span 4; position: sticky; top: calc(var(--hdr) + 40px); display: grid; grid-template-columns: 1px 1fr; gap: 0 22px; }
.toc__rail { position: relative; background: var(--line); }
.toc__rail i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--red); transform-origin: 50% 0; transform: scaleY(var(--read, 0)); }
.toc__rail b { position: absolute; left: -4px; top: calc(var(--read, 0) * 100%); width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--red); }
.toc ol { display: grid; gap: 0; padding: 0; }
.toc .t-label { margin-bottom: 4px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: var(--fs-small); font-weight: 500; color: var(--grey-2); line-height: 1.3; transition: color .3s; }
.toc a:hover, .toc a.is-active { color: var(--ink); }
.prose { grid-column: 8 / span 10; }
.prose .t-lead { font-size: clamp(21px, 1.95vw, 36px); line-height: 1.22; margin-bottom: var(--s1); color: var(--charcoal); }
.prose h2 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -.03em; font-weight: 500; color: var(--charcoal); margin: clamp(40px, 4vw, 72px) 0 18px; scroll-margin-top: calc(var(--hdr) + 40px); text-wrap: balance; }
.prose p { font-size: clamp(16px, 1.25vw, 21px); line-height: 1.6; letter-spacing: -.012em; color: #c9c9c9; max-width: 36em; }
.prose p + p { margin-top: 1em; }
.prose blockquote { margin: clamp(48px, 5vw, 90px) 0; padding-top: 28px; position: relative; }
.prose blockquote::before { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--u) * 2); height: 2px; background: var(--red); }
.prose blockquote::after { content: ""; position: absolute; left: calc(var(--u) * 2); top: -6.5px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); margin-left: -7px; }
.prose blockquote p { font-family: var(--ff-serif); font-size: clamp(30px, 3.2vw, 60px); line-height: 1.02; letter-spacing: -.015em; color: var(--charcoal); max-width: 17em; text-wrap: balance; }
.prose .closing { margin-top: clamp(40px, 4vw, 72px); padding-top: 26px; border-top: 1px solid var(--rule); }
.cta-band__acts { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px 44px; margin-top: clamp(28px, 2.8vw, 48px); }
.cta-band .crisis-line { text-align: left; margin: 0; }
.ul--back:hover .arr { transform: translateX(-4px); }
.more { padding: var(--s2) 0; background: var(--bg-1); }
.more__head { align-items: end; margin-bottom: var(--s1); }
.more__head-l { grid-column: 2 / span 12; }
.more__head-l .t-kicker { margin-bottom: 18px; }
.more__head-r { grid-column: 14 / span 6; display: flex; justify-content: flex-end; }
.more .prep { grid-column: 2 / span 18; grid-row: auto; margin: 0; }
.more .prep__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 2vw, 40px); }
.more .prep__item { grid-template-columns: 1fr; align-content: start; }
.story__fig { grid-column: 2 / span 5; position: sticky; top: calc(var(--hdr) + 40px); margin: 0; }
.story__links { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: clamp(28px, 2.8vw, 48px); }

/* ==========================================================================
   INITIAL STATES (only when JS + motion are available)
   ========================================================================== */
.js.motion [data-split]:not(.is-split), .js.motion [data-rise]:not(.is-split) { visibility: hidden; }
.js.motion [data-split] .c { opacity: .05; }
.js.motion [data-rise] .wr > span { transform: translateY(110%); }
.js.motion .hero__line-bar { transform: scaleX(0); }
.js.motion .hero__line-dot { transform: scale(0); }
.js.motion [data-settle] { opacity: 0; }
.js.motion .hero__foot, .js.motion .hdr { opacity: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .hdr__nav, .hdr > .hdr__lang, .hdr__cta { display: none; }
  .hdr__menu { display: flex; }
  .hdr__logo { grid-column: 1 / span 6; padding-left: var(--u); }
  .hdr__crisis { grid-column: 12 / span 5; }
}

@media (max-width: 1100px) {
  .statement .t-statement { width: calc(var(--u) * 16); }
  .creds__fact { grid-column: 2 / span 7; }
  .creds__body { grid-column: 10 / span 10; }
  .who__cards { grid-column: 2 / span 18; grid-template-columns: repeat(2, 1fr); }
  .who-card { margin-bottom: -1px; }
  .steps { grid-column: 2 / span 18; }
  .about__media { grid-column: 2 / span 18; }
  .about__a { grid-column: 2 / span 8; }
  .about__b { grid-column: 11 / span 9; }
  .founder__media { grid-column: 2 / span 7; }
  .founder__body { grid-column: 10 / span 10; }
  .feat { grid-column: 2 / span 9; }
  .ins__head, .prep { grid-column: 12 / span 8; }
  .contact__l { grid-column: 2 / span 8; }
  .contact__r { grid-column: 11 / span 9; }
  .spec { grid-template-columns: 1fr; }
  .foot__logo { grid-column: 2 / span 18; margin-bottom: 18px; }
  .foot__nav { grid-column: 2 / span 12; justify-content: flex-start; }
  .foot__side { grid-column: 14 / span 6; }
  .toc { grid-column: 2 / span 5; }
  .prose { grid-column: 8 / span 12; }
  .more .prep__list { grid-template-columns: 1fr; }
  .prep__item { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .steps { grid-column: 2 / span 18; grid-template-columns: 1fr; padding-left: 28px; }
  .steps__rail { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps__progress { width: 1px; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
  .steps__head { left: -5px; top: calc(var(--p, 1) * 100%); margin: -5.5px 0 0; }
  .step { padding: 0 0 30px; }
  .step:last-child { padding-bottom: 0; }
  .step::before { left: -31.5px; top: 9px; }
  .step h3 { margin-bottom: 8px; }
  .hero__lead { left: calc(var(--u) * 9); width: calc(var(--u) * 10); }

@media (max-width: 767px) {
  :root {
    --fs-hero: 13.1vw;
    --fs-slide: 11.4vw;
    --fs-statement: clamp(29px, 8vw, 40px);
    --hdr: 60px;
    --st-t: 72px;
    --st-b: 40px;
    --s2: 64px;
  }
  .hdr__logo img { width: 112px; }
  .hdr__logo { grid-column: 1 / span 8; }
  .hdr__crisis { display: none; }
  .hdr__menu { grid-column: 15 / span 6; }
  .menu__meta { flex-wrap: wrap; }
  .hero__lead { left: calc(var(--u) * 5); width: calc(var(--u) * 14); }

  .hero { min-height: 640px; }
  .hero__title .hl--1 { padding-left: var(--u); }
  .hero__title .hl--2 { padding-left: calc(var(--u) * 1.2); }
  .hero__title .hl--3 { padding-left: calc(var(--u) * 2.2); }
  .hero__title { bottom: calc(43% - .036em); }
  .hero__line { top: 57%; width: calc(var(--u) * 18.6); height: 1.5px; margin-top: -.75px; }
  .hero__line-dot { width: 11px; height: 11px; margin-top: -5.5px; right: -5px; }
  .hero__bg img { object-position: 50% 57%; transform-origin: 50% 57%; }
  .hero__lead { top: calc(57% + 24px); left: calc(var(--u) * 5); width: calc(var(--u) * 14); }
  .hero__lead p { margin-bottom: 20px; }
  .hero__foot { grid-template-columns: 1fr auto; column-gap: 16px; }
  .hero__loc { grid-column: 1; font-size: 13px; }
  .crisis-line { grid-column: 2; justify-self: end; font-size: 13px; }
  .scroll-cue { display: none; }

  .statement .t-statement, .statement--wide .t-statement { width: calc(var(--u) * 18); }
  .creds { row-gap: 40px; }
  .creds__fact, .creds__body { grid-column: 2 / span 18; }
  .creds__num { font-size: 132px; }
  .dots { font-size: 18px; }



  .who__cards { grid-template-columns: 1fr; }
  .who-card { min-height: 0; gap: 14px; margin-right: 0; }
  .who__note { grid-column: 2 / span 18; }

  .about__a, .about__b { grid-column: 2 / span 18; }
  .about__media { grid-column: 1 / -1; }
  .about__media .media { aspect-ratio: 4 / 3; }
  .about__cap { padding: 0 var(--u); }
  .founder__media, .founder__body { grid-column: 2 / span 18; }
  .founder__media { margin-bottom: 40px; }
  .founder__body { padding-bottom: 0; }
  .ins__head, .feat, .prep { grid-column: 2 / span 18; grid-row: auto; }
  .ins__head { margin-bottom: 32px; }
  .feat__media { aspect-ratio: 4 / 4.2; }
  .prep { margin-top: 48px; }
  .prep__item { grid-template-columns: 1fr; }
  .prep__meta { font-size: 13px; }
  .contact__l, .contact__r { grid-column: 2 / span 18; }
  .contact__l { margin-bottom: 44px; }
  .form { grid-template-columns: 1fr; }
  .btn--form { width: 100%; }
  .foot__close .t-statement { width: calc(var(--u) * 18); }
  .foot__nav, .foot__side { grid-column: 2 / span 18; justify-content: flex-start; }
  .foot__nav { margin-bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; }
  .foot__side .lang { margin-left: auto; }
  .foot__legal p:first-child, .foot__legal p:last-child { grid-column: 2 / span 18; text-align: left; }
  .foot__legal p:last-child { margin-top: 6px; }
  .art-hero__title { grid-column: 2 / span 18; }
  .art-meta > div, .art-meta > div:first-child { grid-column: 2 / span 18; padding: 12px 0; }
  .art-meta > div + div { border-top: 1px solid var(--rule); }
  .art-fig .media { aspect-ratio: 4 / 3; }
  .toc { display: none; }
  .prose { grid-column: 2 / span 18; }
  .more__head-l, .more__head-r { grid-column: 2 / span 18; justify-content: flex-start; }
  .more__head-r { margin-top: 18px; }
  .story__fig { grid-column: 2 / span 18; position: static; max-width: 440px; margin-bottom: 44px; }
}


/* stacked practice slides: phones, and tablets held upright */
@media (max-width: 767px), (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  :root { --fs-slide: min(11.4vw, 84px); }
  .slide {
    height: auto; min-height: 0; display: flex; flex-direction: column;
    padding: 56px var(--u) 60px;
  }
  .slide__index { display: none; }
  .slide__title { white-space: normal; }
  .slide__line { font-size: 24px; margin-top: 12px; }
  .slide__visual { position: relative; left: auto; top: auto; bottom: auto; width: 100%; max-width: 640px; align-self: center; aspect-ratio: 1 / .82; margin: 20px 0 4px; }
  .slide--1 .slide__img { width: 62%; }
  .slide--2 .slide__img { width: 100%; }
  .slide--3 .slide__img { top: 50%; bottom: auto; transform: translate(-50%, -50%); height: 100%; }
  .slide__body { margin-top: 8px; }
  .slide__caps ul { max-width: none; }
  .slide__caps li { font-size: 20px; padding: 11px 0 10px; }
  .slide__body .ul { margin-top: 18px; }
}

}

@media (max-width: 1100px) and (min-width: 768px) {
  .story__fig { grid-column: 2 / span 6; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- cookie consent bar (js/consent.js) ---------- */
.consent {
  position: fixed; z-index: 400; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), 760px); transform: translate(-50%, 16px); opacity: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px;
  padding: 16px 16px 16px 22px; background: rgba(16, 16, 16, .96); border: 1px solid var(--rule-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: opacity .45s var(--expo-out), transform .6s var(--expo-out);
}
.consent.is-in { opacity: 1; transform: translate(-50%, 0); }
.consent[hidden] { display: none; }
.consent__t { font-size: var(--fs-small); line-height: 1.4; color: var(--ink); display: flex; gap: 12px; align-items: baseline; }
.consent__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform: translateY(-1px); }
.consent__a { display: flex; align-items: center; gap: 8px; flex: none; }
.consent__no, .consent__yes { min-height: 44px; padding: 0 20px; font-size: var(--fs-small); font-weight: 500; letter-spacing: -.01em; transition: background-color .3s, color .3s, border-color .3s; }
.consent__no { color: var(--grey); border: 1px solid var(--rule-strong); }
.consent__no:hover { color: var(--ink); border-color: var(--ink); }
.consent__yes { background: #fff; color: #0a0a0a; }
.consent__yes:hover { background: #e9e9e9; }
.foot__cookies { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; margin-left: 10px; display: inline-block; padding: 12px 0; margin-block: -12px; }
.foot__cookies:hover { color: var(--ink); }
@media (max-width: 767px) {
  .consent { flex-direction: column; align-items: stretch; padding: 16px; }
  .consent__a { justify-content: stretch; }
  .consent__no, .consent__yes { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* ---------- privacy page + consent link ---------- */
.prose code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em; color: var(--ink); background: var(--lighter); border: 1px solid var(--rule); padding: .08em .4em; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.consent__t a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; margin-left: 4px; display: inline-block; padding: 10px 0; margin-block: -10px; }
.consent__t a:hover { color: #fff; }
button.foot__cookies, .linkbtn { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.linkbtn { padding: 0; }
.linkbtn:hover, button.foot__cookies:hover { color: var(--ink); }

/* ---------- contact form: sending state, honeypot, error ---------- */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form.is-sending .btn--form { opacity: .7; cursor: progress; }
.form.is-sending .btn--form .dot { animation: rec 1s ease-in-out infinite alternate; }
.form__error { grid-column: 1 / -1; margin-top: 14px; font-size: var(--fs-small); color: var(--red-deep); }
.form__error a, .form__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }