/* ============================================================
   THE 3RD ACT — HOLDING SITE · v2 “premium editorial”
   Playfair Display + Inter · ink / paper / T3A red
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/assets/fonts/playfair-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 800;
  font-display: swap; src: url('/assets/fonts/playfair-italic-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/assets/fonts/inter-var.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;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #060606;
  --ink-soft: #111110;
  --char: #131211;
  --char-2: #1B1A18;
  --paper: #F6F2EB;
  --paper-2: #EFEAE0;
  --white: #FDFAF3;
  --red: #D90A0E;
  --red-lacquer: #BA1616;
  --red-lacquer-deep: #AC1414;
  --red-deep: #AE1524;
  --grey: #6E6A62;
  --grey-2: #9A968E;
  --grey-3: #B9B5AC;
  --line-dark: rgba(246, 242, 235, .13);
  --line-dark-2: rgba(246, 242, 235, .07);
  --line-paper: #D8D2C6;
  --line-paper-2: #C9C2B4;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0, 0, .2, 1);
  --gutter: clamp(1.25rem, calc(.1rem + 3.85vw), 3.5rem);
  /* interactive label sizes (provisional): 11px floor, ~12px from 1440px up; 11.84px floor where the label was already larger */
  --label-size: clamp(11px, calc(.545rem + .227vw), 12px);
  --label-size-dim: clamp(11px, calc(.545rem + .227vw), 11.5px);
  --label-size-lg: clamp(.74rem, calc(.545rem + .227vw), .75rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--paper);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2c2c2a; border-radius: 8px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 2147483646;
  background: var(--paper); color: var(--ink);
  padding: .7rem 1.1rem; font: 600 .8rem/1 var(--sans);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Film grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 2000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .038;
  animation: grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.4%); }
  50% { transform: translate(1.6%, -1%); }
  75% { transform: translate(-1%, -1.8%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Scroll progress ---------- */
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1200; pointer-events: none; }
#progress i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }

/* ---------- Custom cursor: red square + follow light ----------
   The square is the logo's red square, tracking the pointer exactly.
   The light is a follow spot: warm paper tone, screen-blended so it lifts ink
   and all but vanishes on paper, easing behind the square with a little inertia.
   Both only exist on fine pointers, and the native arrow is hidden only once JS
   has confirmed the elements are present (body.cursor-on). */
.cursor-sq, .cursor-light {
  position: fixed; top: 0; left: 0; pointer-events: none; display: none;
  opacity: 0; will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .cursor-sq, .cursor-light { display: block; }
  body.cursor-on { cursor: none; }
  body.cursor-on input, body.cursor-on textarea { cursor: auto; }
  body.cursor-on .intro-overlay { cursor: auto; }
}
.cursor-sq {
  z-index: 1300; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--red);
  transition: width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), opacity .35s var(--ease);
}
body.cursor-on .cursor-sq { opacity: 1; }
/* over a link the square stretches into the eyebrow rule: an underline arriving before the click */
body.link-hover .cursor-sq { width: 22px; height: 2px; margin: -1px 0 0 -11px; }
/* press: a quick contraction, no bounce */
body.cursor-down .cursor-sq { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
body.link-hover.cursor-down .cursor-sq { width: 14px; height: 2px; margin: -1px 0 0 -7px; }

.cursor-light {
  z-index: 1290; width: 400px; height: 400px; margin: -200px 0 0 -200px;
  border-radius: 50%; mix-blend-mode: screen;
  transition: opacity .6s var(--ease);
}
.cursor-light::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(246, 242, 235, .075) 0%,
    rgba(246, 242, 235, .03) 38%,
    rgba(246, 242, 235, 0) 100%);
  transition: transform .55s var(--ease), opacity .55s var(--ease);
  opacity: .9;
}
body.cursor-on .cursor-light { opacity: 1; }
body.link-hover .cursor-light::before { transform: scale(.82); opacity: 1; }
body.cursor-down .cursor-light::before { transform: scale(.7); }
/* pointer left the window, or is over a text field (native I-beam takes over) */
body.cursor-out .cursor-sq, body.cursor-out .cursor-light,
body.cursor-field .cursor-sq, body.cursor-field .cursor-light { opacity: 0; }

/* ---------- Chapter indicator ---------- */
.chapter {
  position: fixed; left: var(--gutter); bottom: 1.4rem; z-index: 1100;
  display: flex; align-items: center; gap: .9rem;
  font: 600 .6rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--grey-2); pointer-events: none;
  mix-blend-mode: difference; color: rgba(255, 255, 255, .55);
  opacity: 0; transform: translateY(10px);
  transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s;
}
body.is-live .chapter { opacity: 1; transform: none; }
.chapter .ch-num { color: #fff; font-weight: 700; transition: opacity .25s var(--ease); }
.chapter .ch-sep { width: 2.2rem; height: 1px; background: rgba(255, 255, 255, .3); }
.chapter .ch-name { transition: opacity .25s var(--ease); }
.chapter.swap .ch-num, .chapter.swap .ch-name { opacity: 0; }
.chapter.hide { opacity: 0 !important; transition-delay: 0s; }

/* ---------- Type utilities ---------- */
.eyebrow {
  font: 600 .66rem/1.6 var(--sans); letter-spacing: .34em; text-transform: uppercase;
  color: var(--grey-2); display: flex; align-items: center; gap: 1rem;
}
.eyebrow .rule { flex: 0 0 2.8rem; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .25s; }
.in .eyebrow .rule, .is-live .eyebrow .rule, .eyebrow.in .rule { transform: scaleX(1); }
.eyebrow--red { color: var(--red); }
.on-paper .eyebrow { color: var(--grey); }
.red-italic { font-family: var(--serif); font-style: italic; color: var(--red); font-weight: 500; }
.on-paper .red-italic { color: var(--red-deep); }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--wide { max-width: 104rem; margin: 0 auto; }
.wrap--inner { max-width: 82rem; margin: 0 auto; }

/* ---------- Line masks & reveals ---------- */
.lm { display: block; overflow: hidden; padding-bottom: .13em; margin-bottom: -.13em; }
.lm > span { display: inline-block; will-change: transform; }
.js .lm:not(.in) > span { transform: translateY(112%); }
.js .lm.in > span { transform: translateY(0); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * .12s); }

.js .rv { opacity: 0; transform: translateY(34px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * .09s); }

.js [data-stagger] > * { opacity: 0; transform: translateY(30px); }
.js [data-stagger].in > * { opacity: 1; transform: none; transition: opacity .95s var(--ease), transform .95s var(--ease); }
.js [data-stagger].in > *:nth-child(1) { transition-delay: .06s; }
.js [data-stagger].in > *:nth-child(2) { transition-delay: .15s; }
.js [data-stagger].in > *:nth-child(3) { transition-delay: .24s; }
.js [data-stagger].in > *:nth-child(4) { transition-delay: .33s; }
.js [data-stagger].in > *:nth-child(5) { transition-delay: .42s; }
.js [data-stagger].in > *:nth-child(6) { transition-delay: .51s; }

/* ============================================================
   FIXED HEADER — difference blend, inverts over paper
   ============================================================ */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter);
  color: #fff;
  opacity: 0; transform: translateY(-14px);
  transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s;
}
/* header ink/paper state is driven by JS sampling the surface beneath each side */
.head-nav a, .brand-name, .menu-toggle, .head-bar, .head-bar a { transition: color .45s var(--ease), border-color .45s var(--ease); }
body.nav-dark .head-nav a { color: #171512; }
body.nav-dark .menu-toggle { color: #171512; }
body.nav-dark .menu-toggle .bars i { background: #171512; }
body.brand-dark .brand-name { color: #171512; }
body.nav-dark .head-bar { color: rgba(23, 21, 18, .6); border-bottom-color: rgba(23, 21, 18, .14); }
body.nav-dark .head-bar a { color: #171512; border-bottom-color: rgba(23, 21, 18, .35); }
body.idx-open .brand-name, body.idx-open .menu-toggle { color: #fff; }
body.idx-open .menu-toggle .bars i { background: #fff; }
body.is-live .site-head { opacity: 1; transform: none; }
.site-head :focus-visible { outline-color: var(--red); }

/* transition bar lives inside the fixed chrome and folds away on scroll */
.head-bar {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: .62rem 0; flex-wrap: wrap; text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: .74rem; letter-spacing: .02em; color: rgba(255, 255, 255, .55);
  max-height: 4rem; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .45s var(--ease), padding .6s var(--ease), border-color .6s, color .45s var(--ease);
}
.head-bar a { color: #fff; font-weight: 550; font-size: var(--label-size-lg); white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 1px; transition: border-color .3s, color .45s var(--ease); }
.head-bar a:hover { border-bottom-color: #fff; }
body.scrolled .head-bar { max-height: 0; opacity: 0; padding: 0; border-bottom-color: transparent; }

.head-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 0;
  transition: padding .5s var(--ease);
}
body.scrolled .head-row { padding: .8rem 0; }

.brand { display: inline-flex; align-items: center; gap: .85rem; }
.brand-mark {
  height: 2.35rem; width: auto; flex: none; display: block;
  transition: transform .55s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.05); }
.brand-name { font: 600 .74rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.brand-name em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: .95rem; color: var(--red); }

.head-nav { display: flex; align-items: center; gap: 2.2rem; }
.head-nav a {
  font: 600 .68rem/1 var(--sans); font-size: var(--label-size); letter-spacing: .2em; text-transform: uppercase;
  opacity: .62; position: relative; padding-bottom: .35rem;
  transition: opacity .3s var(--ease), color .45s var(--ease);
}
.head-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.head-nav a:hover { opacity: 1; }
.head-nav a:hover::after, .head-nav a.act::after { transform: scaleX(1); transform-origin: left; }
.head-nav a.act { opacity: 1; }
.head-nav a.dim { font-size: var(--label-size-dim); opacity: .42; }
.head-nav a.dim:hover { opacity: .85; }

.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer; color: #fff;
  font: 600 .68rem/1 var(--sans); font-size: var(--label-size); letter-spacing: .26em; text-transform: uppercase;
  align-items: center; gap: .7rem; padding: .4rem 0;
}
.menu-toggle .bars { width: 1.4rem; height: .65rem; position: relative; }
.menu-toggle .bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: #fff; transition: transform .45s var(--ease), top .45s var(--ease), background .45s var(--ease); }
.menu-toggle .bars i:first-child { top: 0; }
.menu-toggle .bars i:last-child { top: .55rem; }
body.idx-open .menu-toggle .bars i:first-child { top: .28rem; transform: rotate(45deg); }
body.idx-open .menu-toggle .bars i:last-child { top: .28rem; transform: rotate(-45deg); }

/* ---------- Index overlay (menu) ---------- */
.index-overlay {
  position: fixed; inset: 0; z-index: 900; background: rgba(6, 6, 6, .985);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .8s var(--ease), visibility 0s .8s;
}
body.idx-open .index-overlay { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.idx-row {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line-dark-2);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, calc(.6rem + 5.181vw), 3.2rem); line-height: 1.15; color: var(--paper);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), color .3s;
}
.idx-row:hover { color: var(--red); }
.idx-row .in-n { font: 700 .62rem/1 var(--sans); font-size: var(--label-size); letter-spacing: .3em; color: var(--red); transform: translateY(-.6rem); }
.idx-row .in-d { margin-left: auto; font: 550 .64rem/1 var(--sans); font-size: var(--label-size); letter-spacing: .24em; text-transform: uppercase; color: var(--grey); }
body.idx-open .idx-row { opacity: 1; transform: none; }

/* ============================================================
   TRANSITION BAR (transition_public)
   ============================================================ */
.transition-bar {
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--line-dark-2);
  font-size: .76rem; letter-spacing: .02em; color: var(--grey-2);
  background: var(--ink);
}
.transition-bar__in {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: .62rem var(--gutter); text-align: center; flex-wrap: wrap;
}
.transition-bar a {
  color: var(--paper); font-weight: 550; white-space: nowrap;
  border-bottom: 1px solid var(--red); padding-bottom: 1px;
  transition: color .3s;
}
.transition-bar a:hover { color: var(--red); }

/* ============================================================
   HERO (landing)
   ============================================================ */
.hero {
  position: relative; min-height: calc(100vh - 2.1rem); min-height: calc(100svh - 2.1rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
}
/* the stage lighting: a follow-spot from the rig, footlights from the boards */
.hero::before {
  content: ''; position: absolute; inset: -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(217, 10, 14, .1), transparent 75%),
    radial-gradient(85% 72% at 76% -10%, rgba(217, 10, 14, .48), transparent 68%);
  opacity: 0; transition: opacity 1.9s var(--ease) .3s;
  will-change: transform, opacity;
}
.hero::after {
  content: ''; position: absolute; inset: -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 56% at 12% 118%, rgba(174, 21, 36, .34), transparent 68%);
  opacity: 0; transition: opacity 2.2s var(--ease) .9s;
  will-change: transform, opacity;
}
/* lights find their mark, then keep a slow perceptible drift */
body.is-live .hero::before { opacity: 1; animation: spot-rig 15s ease-in-out 2.2s infinite alternate; }
body.is-live .hero::after { opacity: 1; animation: spot-foot 19s ease-in-out 3.1s infinite alternate; }
@keyframes spot-rig {
  from { opacity: .48; transform: translate(2.2%, -1.6%); }
  to   { opacity: 1;   transform: translate(-1.6%, 1.2%); }
}
@keyframes spot-foot {
  from { opacity: .45; transform: translate(-2%, 1.4%); }
  to   { opacity: 1;   transform: translate(1.8%, -1.2%); }
}
/* the landing "3": scaled up c. 12% and set a touch further right and lower, so it carries
   more of the adviser watermark's weight without matching it — still bleeding off the
   bottom-right, still heavily ghosted, still behind the copy and the meta strip's rule */
.hero-ghost {
  position: absolute; z-index: 1; right: -4.5vw; bottom: -19vh;
  font-family: var(--serif); font-weight: 600; line-height: .78;
  font-size: min(126vh, 70rem);
  color: rgba(217, 10, 14, .115);
  pointer-events: none; user-select: none; will-change: transform;
}
/* the mark from the curtain is left behind on the stage — it fades in last */
.js .hero-ghost { opacity: 0; transition: opacity 2.4s var(--ease) 1s; }
.js body.is-live .hero-ghost { opacity: 1; }
.hero-in { position: relative; z-index: 2; padding-top: 8.5rem; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; will-change: transform, opacity; }
/* text block rides the optical centre between header and the anchored meta strip */
.hero-core { margin-block: auto; transform: translateY(-2.5vh); }
.hero .eyebrow { margin-bottom: clamp(1.6rem, 3.4vh, 2.6rem); }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3rem, min(8.6vw, 12vh), 8.4rem);
  line-height: .99; letter-spacing: -.015em; max-width: 14ch;
}
.hero-standfirst {
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem); max-width: 36rem;
  font-size: clamp(1rem, calc(.4rem + .831vw), 1.18rem); line-height: 1.75; color: var(--grey-3);
}
/* the strip's top rule crosses the ghost "3" by design: it sits above the glyph, drawn a
   shade firmer than the standard dark rule so it reads as one crisp, uninterrupted line
   over the red as much as over the ink */
.hero-meta {
  position: relative; z-index: 3;
  margin-top: clamp(2.6rem, 6.5vh, 4.8rem);
  border-top: 1px solid rgba(246, 242, 235, .16);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero-meta > div { padding: 1.25rem 1.5rem 1.4rem 0; border-right: 1px solid var(--line-dark-2); }
.hero-meta > div + div { padding-left: 1.5rem; }
.hero-meta > div:last-child { border-right: 0; }
.hero-meta dt { font: 600 .6rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--grey); margin-bottom: .5rem; }
.hero-meta dd { font: 500 .9rem/1.35 var(--sans); letter-spacing: .03em; color: var(--paper); }
.hero-meta dd.red { color: var(--red); }

/* hero entrance — driven by .is-live on body (post-curtain) */
.js .hero .hero-lm > span { transform: translateY(112%); }
.js body.is-live .hero .hero-lm > span, .js .is-live .hero .hero-lm > span {
  transform: translateY(0); transition: transform 1.2s var(--ease);
  transition-delay: calc(.1s + var(--i, 0) * .13s);
}
.js .hero .hero-rv { opacity: 0; transform: translateY(30px); }
.js .is-live .hero .hero-rv { opacity: 1; transform: none; transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); transition-delay: calc(.25s + var(--i, 0) * .12s); }

/* ============================================================
   THE SPLIT — two audiences, two surfaces, one hinge
   ============================================================ */
.split { position: relative; border-top: 1px solid var(--line-dark); background: var(--ink); }
.split__panes { display: flex; min-height: 100vh; min-height: 100svh; }

.pane {
  position: relative; flex: 1 1 50%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(5.5rem, 12vh, 9rem) clamp(1.75rem, calc(.35rem + 3.728vw), 4.75rem);
  overflow: hidden; isolation: isolate;
  transition: flex-grow 1.05s var(--ease);
}
.pane--advisers {
  background: radial-gradient(110% 90% at 0% 100%, rgba(217, 10, 14, .1), transparent 55%), var(--ink);
  color: var(--paper);
}
.pane--institutions {
  background: var(--paper); color: var(--ink);
  /* on approach the section reads as one dark surface in harmony with the hero;
     the paper side sweeps open from the hinge once the hinge has drawn */
  clip-path: inset(0 100% 0 0);
  transition: flex-grow 1.05s var(--ease), clip-path 1.4s var(--ease) .6s;
}
.split.in .pane--institutions { clip-path: inset(0 0 0 0); }
.no-js .pane--institutions { clip-path: none; }
/* the paper pane's content settles just after the wipe begins */
.pane--institutions .rv { transition-delay: calc(.55s + var(--i, 0) * .09s); }
.pane--institutions .lm > span { transition-delay: calc(.6s + var(--i, 0) * .12s); }
@media (hover: hover) and (min-width: 901px) {
  .split__panes:hover .pane { flex-grow: .84; }
  .split__panes .pane:hover, .split__panes .pane:focus-within { flex-grow: 1.16; }
}

/* the hinge: a red hairline that draws itself, squared off at centre */
.split__hinge {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; z-index: 4;
  background: rgba(217, 10, 14, .5);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.3s var(--ease) .15s;
}
.split__hinge::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; background: var(--red);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .6s var(--ease) 1.15s;
}
.split.in .split__hinge { transform: scaleY(1); }
.split.in .split__hinge::after { transform: translate(-50%, -50%) scale(1); }

/* ghosts: same treatment as the hero 3 — filled, bleeding, never outlined */
.pane__ghost {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--serif); font-weight: 600; line-height: .78;
  transition: color 1s var(--ease), transform 1.4s var(--ease);
}
.pane--advisers .pane__ghost { left: -7%; bottom: -11%; font-size: min(60vh, 34rem); color: rgba(217, 10, 14, .09); }
.pane--institutions .pane__ghost { right: -7%; top: -22%; font-size: min(54vh, 30rem); color: rgba(6, 6, 6, .045); }
.pane:hover .pane__ghost, .pane:focus-within .pane__ghost { transform: translateY(-2%); }
.pane--advisers:hover .pane__ghost { color: rgba(217, 10, 14, .15); }
.pane--institutions:hover .pane__ghost { color: rgba(6, 6, 6, .075); }

.pane__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }

.pane__eyebrow {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font: 600 .66rem/1.8 var(--sans); letter-spacing: .26em; text-transform: uppercase;
}
.pane--advisers .pane__eyebrow { color: var(--paper); }
.pane--institutions .pane__eyebrow { color: var(--ink); }
.pane__eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--red); flex: none; }
.pane__status { color: var(--red); }
.pane--institutions .pane__status { color: var(--red-deep); }

.pane__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3.4rem, calc(.6rem + 5.045vw), 6.2rem); line-height: .96; letter-spacing: -.02em;
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
}
.pane__promise {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.3rem, calc(.52rem + 1.19vw), 1.8rem); line-height: 1.32; letter-spacing: -.005em;
  margin-top: clamp(1.4rem, 2.6vh, 2rem); max-width: 24ch;
}
.pane--institutions .pane__promise .red-italic { color: var(--red-deep); }
.pane__body { margin-top: 1.3rem; max-width: 32rem; font-size: .95rem; line-height: 1.78; }
.pane--advisers .pane__body { color: var(--grey-3); }
.pane--institutions .pane__body { color: #4A463F; }
.pane__foot { margin-top: clamp(2.2rem, 4vh, 3.2rem); display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; }

/* buttons + micro links on the paper surface */
.pane--institutions .btn-arrow { color: var(--ink); border-color: var(--line-paper-2); }
.pane--institutions .btn-arrow::before { background: var(--red-deep); }
.pane--institutions .btn-arrow:hover, .pane--institutions .btn-arrow:focus-visible { color: #fff; border-color: var(--red-deep); }
.pane__micro {
  font-size: .82rem; letter-spacing: .02em;
  display: inline-flex; gap: .55rem; align-items: baseline;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .35s, border-color .35s;
}
.pane--advisers .pane__micro { color: var(--grey); }
.pane--advisers .pane__micro:hover { color: var(--paper); border-bottom-color: var(--red); }
.pane--institutions .pane__micro { color: var(--grey); }
.pane--institutions .pane__micro:hover { color: var(--ink); border-bottom-color: var(--red-deep); }
.pane__micro .arr { color: var(--red); transition: transform .4s var(--ease); display: inline-block; }
.pane--institutions .pane__micro .arr { color: var(--red-deep); }
.pane__micro:hover .arr { transform: translateX(4px); }

/* primary button — red flood on hover */
.btn-arrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font: 600 .76rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper); padding: 1.1rem 1.7rem; border: 1px solid var(--line-dark);
  position: relative; overflow: hidden; background: transparent; cursor: pointer;
  /* own stacking context so the red flood (::before, z-index -1) always paints above
     whatever section background sits behind the button */
  isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn-arrow::before {
  content: ''; position: absolute; inset: 0; background: var(--red); z-index: -1;
  transform: translateY(102%); transition: transform .55s var(--ease);
}
.btn-arrow:hover, .btn-arrow:focus-visible { border-color: var(--red); color: #fff; }
.btn-arrow:hover::before, .btn-arrow:focus-visible::before { transform: translateY(0); }
.btn-arrow .arr { transition: transform .5s var(--ease); }
.btn-arrow:hover .arr { transform: translateX(6px); }

.link-quiet {
  font: 600 .74rem/1 var(--sans); font-size: var(--label-size-lg); letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-3); border-bottom: 1px solid var(--line-dark); padding-bottom: .55rem;
  transition: color .35s, border-color .35s;
}
.link-quiet:hover { color: var(--paper); border-color: var(--red); }

/* ============================================================
   MARQUEE — capability strip with scroll-velocity glide
   ============================================================ */
.marquee {
  border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  padding: 1.35rem 0; overflow: hidden; position: relative; background: var(--ink);
}
.marquee-track { display: flex; align-items: center; white-space: nowrap; will-change: transform; width: max-content; list-style: none; }
.marquee-track li {
  font: 600 .7rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: var(--grey-3); display: flex; align-items: center;
}
.marquee-track li::after { content: ''; width: 5px; height: 5px; background: var(--red); margin: 0 2.2rem; flex: none; }
.marquee--serif .marquee-track li { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: .01em; font-size: 1.35rem; color: var(--grey-2); }
.marquee--serif { padding: 1.6rem 0; }

/* ============================================================
   BIG QUOTE / MANIFESTO
   ============================================================ */
.big-quote { text-align: center; position: relative; }
.big-quote::before {
  content: '\201C'; display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(5rem, calc(.6rem + 7.245vw), 9rem); line-height: .5; color: var(--red);
  margin-bottom: clamp(1.4rem, calc(.31rem + 2.458vw), 2.4rem);
}
.big-quote p {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, calc(.4rem + 3vw), 3.1rem); line-height: 1.28; letter-spacing: -.01em;
  max-width: 26ch; margin: 0 auto;
}
.big-quote p em { font-style: italic; color: var(--red); }
.big-quote p b { font-weight: 500; }
.big-quote .dim { color: var(--grey-3); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(5.5rem, 12vh, 9.5rem) 0; position: relative; }
.section--dark { background: var(--ink); }
.section--char { background: var(--char); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper-2 { background: var(--paper-2); color: var(--ink); }
.section__head { max-width: 54rem; margin-bottom: clamp(3rem, 6vh, 4.5rem); }
.section__head h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, calc(.6rem + 3.177vw), 3.5rem); line-height: 1.1; letter-spacing: -.012em;
  margin-top: 1.9rem;
}
.section__standfirst { margin-top: 1.7rem; color: var(--grey-3); font-size: 1.04rem; line-height: 1.8; max-width: 42rem; }
.section--paper .section__standfirst, .section--paper-2 .section__standfirst { color: #4A463F; }
.section--paper .eyebrow, .section--paper-2 .eyebrow { color: var(--grey); }
.section--paper .eyebrow .rule, .section--paper-2 .eyebrow .rule { background: var(--red-deep); }

/* ============================================================
   THE MODEL CHANGES — broken chain vs the accountable thread
   ============================================================ */
.creed {
  --mc-size: clamp(2rem, calc(.6rem + 2.977vw), 3.4rem);   /* headline size, shared so the body can align to it */
  --mc-lead: clamp(1.12rem, calc(.9rem + .45vw), 1.28rem); /* lead paragraph size */
  /* eyebrow line box (.66rem × 1.6) + headline margin-top */
  --mc-shoulder: calc(1.056rem + 1.9rem);
  /* cap-height alignment: Playfair cap sits .2475em below its 1.08 line box top,
     Inter cap sits .4867em below a 1.7 line box top */
  --mc-body-top: calc(var(--mc-shoulder) + .2475 * var(--mc-size) - .4867 * var(--mc-lead));
}
.mc-title {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--mc-size); line-height: 1.08; letter-spacing: -.013em;
  margin-top: 1.9rem; max-width: 15ch;
}
/* body starts level with the headline's first line (cap to cap), not at the eyebrow */
.creed .prose-cols__body {
  align-self: start; position: relative;
  padding-top: var(--mc-body-top); padding-left: 1.7rem;
}
/* a hairline runs the length of the argument, a red node marking where it starts —
   the same mark the thread below ends on */
.creed .prose-cols__body::before {
  content: ''; position: absolute; left: 0; width: 1px;
  top: calc(var(--mc-body-top) + .4867 * var(--mc-lead)); bottom: calc(1.2rem + .45rem);
  background: var(--line-dark);
  transform: scaleY(0); transform-origin: top; transition: transform 1.3s var(--ease) .35s;
}
.creed .prose-cols__body::after {
  content: ''; position: absolute; left: -2.5px; width: 6px; height: 6px;
  top: calc(var(--mc-body-top) + .4867 * var(--mc-lead) - 3px);
  background: var(--red);
  transform: scale(0); transition: transform .5s var(--ease) .3s;
}
.creed.in .prose-cols__body::before, .no-js .creed .prose-cols__body::before { transform: scaleY(1); }
.creed.in .prose-cols__body::after, .no-js .creed .prose-cols__body::after { transform: scale(1); }
/* tighter measure so the copy reads as a column rather than a wide strip */
.creed .prose-cols__body p { max-width: 40rem; }
/* the opening paragraph is the lead: brighter and larger, the eye's landing point */
.creed .prose-cols__body p:first-child {
  color: var(--paper); font-size: var(--mc-lead); line-height: 1.7; margin-bottom: 1.35rem;
}
.creed .prose-cols__body p strong { color: var(--paper); font-weight: 600; white-space: nowrap; }
.chain {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: clamp(2.6rem, 5.5vh, 4rem);
  padding: 1.6rem 0; border-top: 1px solid var(--line-dark-2); border-bottom: 1px solid var(--line-dark-2);
}
.chain__node {
  font: 600 .72rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: var(--grey-2); white-space: nowrap;
}
.chain__break {
  flex: 1 1 auto; min-width: 1.4rem; height: 1px; margin: 0 .95rem;
  background: repeating-linear-gradient(90deg, var(--grey) 0 6px, transparent 6px 11px);
  position: relative; opacity: .65;
}
.chain__break::after {
  content: '×'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -56%) scale(.3);
  color: var(--red); font: 500 .95rem/1 var(--sans);
  background: var(--char); padding: 0 .4rem;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--bd, 0s);
}
/* each hand-off severs in sequence as the band arrives */
.chain.in .chain__break::after { opacity: 1; transform: translate(-50%, -56%) scale(1); }
.chain.in .chain__break:nth-child(2)::after { --bd: .55s; }
.chain.in .chain__break:nth-child(4)::after { --bd: .72s; }
.chain.in .chain__break:nth-child(6)::after { --bd: .89s; }
.chain.in .chain__break:nth-child(8)::after { --bd: 1.06s; }
.chain.in .chain__break:nth-child(10)::after { --bd: 1.23s; }

/* the broken chain on paper */
.chain--paper .chain__node { color: #6E6A62; }
.chain--paper .chain__break { background: repeating-linear-gradient(90deg, #8A857B 0 6px, transparent 6px 11px); }
.chain--paper .chain__break::after { background: var(--paper-2); }

/* the four disciplines — one operating unit */
.disciplines { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); margin-top: clamp(2.6rem, 5vh, 3.8rem); }
.discipline { padding: 2.2rem 1.7rem 0 0; border-right: 1px solid var(--line-dark-2); }
.discipline + .discipline { padding-left: 1.7rem; }
.discipline:last-child { border-right: 0; }
.discipline__index { font: 700 .62rem/1 var(--sans); letter-spacing: .26em; color: var(--red); display: block; margin-bottom: 1.5rem; }
.discipline h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, calc(.5rem + 1.114vw), 1.6rem); letter-spacing: -.01em; line-height: 1.2; }
.discipline p { margin-top: .8rem; font-size: .88rem; line-height: 1.72; color: var(--grey-3); }

.model-notes {
  margin-top: clamp(2.4rem, 5vh, 3.6rem); padding-top: 1.7rem;
  border-top: 1px solid var(--line-dark-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem clamp(2rem, calc(.5rem + 3.371vw), 4rem);
}
.model-notes p { font-size: .92rem; line-height: 1.75; color: var(--grey-3); max-width: 36rem; }
.model-governance {
  margin-top: clamp(2.4rem, 5vh, 3.6rem); padding-top: 1.7rem;
  border-top: 1px solid var(--line-dark-2);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, calc(.42rem + .975vw), 1.3rem); line-height: 1.6; color: var(--grey-2); max-width: 48rem;
}

/* evidence-led proof */
.proof-card__stats {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem;
  margin: 1.9rem 0 1.3rem; padding: 1.3rem 0;
  border-top: 1px solid var(--line-dark-2); border-bottom: 1px solid var(--line-dark-2);
}
.proof-card__stats dt { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, calc(.6rem + 1.897vw), 2.5rem); line-height: 1; color: var(--red); }
.proof-card__stats dd { font: 600 .6rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--grey); margin-top: .35rem; }

.people__lead { margin-top: 2.3rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, calc(.5rem + 1.275vw), 1.6rem); letter-spacing: -.005em; color: #171512; max-width: 40rem; }
.people__lead + .people__grid { margin-top: 2.8rem; }

/* model section refinements */
.model-diagnosis { margin-top: 1.6rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, calc(.46rem + 1.025vw), 1.4rem); line-height: 1.5; color: var(--grey-3); max-width: 34rem; }
.section--compact { padding: clamp(4rem, 8vh, 6.5rem) 0; }

/* proof: categorical near-black after the charcoal model */
.section--pitch { background: #070505; }

@media (max-width: 1100px) {
  .disciplines { grid-template-columns: repeat(2, 1fr); }
  .discipline { padding-bottom: 2rem; border-bottom: 1px solid var(--line-dark-2); }
  .discipline:nth-child(2) { border-right: 0; }
  .model-notes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .disciplines { grid-template-columns: 1fr; }
  .discipline { border-right: 0; padding-left: 0 !important; }
}
/* one unbroken thread draws across, squared off at the end */
.thread { position: relative; height: 1px; margin-top: clamp(2.2rem, 4.5vh, 3.4rem); background: var(--line-dark-2); }
.thread i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 2.8s var(--ease) .55s; }
.thread::after {
  content: ''; position: absolute; right: -1px; top: -4.5px;
  width: 10px; height: 10px; background: var(--red);
  transform: scale(0); transition: transform .55s var(--ease) 3.2s;
}
.creed.in .thread i { transform: scaleX(1); }
.creed.in .thread::after { transform: scale(1); }

.mc-outcome {
  margin-top: clamp(2.4rem, 5vh, 3.8rem);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.85rem, calc(.6rem + 2.645vw), 3.2rem); line-height: 1.12; letter-spacing: -.012em;
  white-space: nowrap;
}
.mc-outcome .rs { color: var(--red); }
@media (max-width: 760px) {
  .mc-outcome { white-space: normal; }
}
.mc-coda {
  margin-top: clamp(1.6rem, 3vh, 2.2rem);
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, calc(.42rem + .975vw), 1.3rem); color: var(--grey-2);
}
.mc-coda::before { content: ''; width: 2.6rem; height: 1px; background: var(--red); flex: none; }
.mc-coda em { color: var(--paper); }

/* ============================================================
   CREED — belief → consequence → application, one composition
   ============================================================ */
.creed .wrap--inner { max-width: 72rem; }
.creed__quote {
  position: relative; margin-top: clamp(2.4rem, 5vh, 3.6rem);
  padding-left: clamp(2.6rem, calc(.35rem + 5.528vw), 5.5rem); max-width: 46rem;
}
.creed__mark {
  position: absolute; left: 0; top: -.12em;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(4.2rem, calc(.6rem + 6.745vw), 7.5rem); line-height: .6; color: var(--red);
}
.creed__quote p {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.45rem, calc(.58rem + 1.704vw), 2.2rem); line-height: 1.38; letter-spacing: -.005em;
  color: var(--grey-3);
}
.creed__quote p em { color: var(--red); font-weight: 500; }

/* the line of argument: draws down from the creed to its consequence */
.creed__link {
  position: relative; height: clamp(3rem, 7vh, 5rem); width: 1px;
  margin: clamp(1.8rem, 3.5vh, 2.8rem) 0 clamp(1.8rem, 3.5vh, 2.8rem) clamp(2.6rem, calc(.35rem + 5.528vw), 5.5rem);
  background: var(--line-dark-2);
}
.creed__link i {
  position: absolute; inset: 0; background: var(--red);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.3s var(--ease) .5s;
}
.creed__link::after {
  content: ''; position: absolute; bottom: -5px; left: -4.5px;
  width: 10px; height: 10px; background: var(--red);
  transform: scale(0); transition: transform .55s var(--ease) 1.6s;
}
.creed.in .creed__link i { transform: scaleY(1); }
.creed.in .creed__link::after { transform: scale(1); }

.creed__statement {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.1rem, calc(.35rem + 4.128vw), 4.2rem); line-height: 1.08; letter-spacing: -.014em;
  max-width: 21ch;
}

.creed__two {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, calc(.35rem + 4.028vw), 4.5rem);
  margin-top: clamp(2.8rem, 5.5vh, 4.2rem);
}
.creed__way { border-top: 1px solid var(--line-dark); padding-top: 1.4rem; }
.creed__way-label { font: 700 .62rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: .9rem; }
.creed__way p:last-child { color: var(--grey-3); line-height: 1.8; font-size: 1.01rem; }

/* statement (centered serif statement + support) */
.statement { padding: clamp(6rem, 14vh, 10.5rem) 0; text-align: center; }
.statement h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, calc(.35rem + 3.928vw), 4rem); line-height: 1.14; letter-spacing: -.012em;
  max-width: 24ch; margin: 0 auto;
}
.statement p { margin: 2.1rem auto 0; max-width: 44rem; color: var(--grey-3); font-size: 1.04rem; line-height: 1.8; }

/* ============================================================
   PEOPLE
   ============================================================ */
.people { background: var(--paper); color: var(--ink); padding: clamp(5.5rem, 12vh, 9rem) 0; position: relative; overflow: hidden; }
.people .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--line-paper-2); padding-bottom: 1.7rem; flex-wrap: wrap; }
.people h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, calc(.6rem + 2.377vw), 2.7rem); letter-spacing: -.01em; }
.people .eyebrow { color: var(--grey); }
.people__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1.8rem; }
.person { padding: 2.5rem 1.8rem 0 0; border-right: 1px solid var(--line-paper); position: relative; transition: transform .6s var(--ease); }
.person:last-child { border-right: 0; }
.person:hover { transform: translateY(-4px); }
.person__index { font: 700 .62rem/1 var(--sans); letter-spacing: .26em; color: var(--grey); display: block; margin-bottom: 1.4rem; transition: color .4s; }
.person:hover .person__index { color: var(--red); }

/* editorial line portraits — multiply-blended so they print onto the paper */
.person__portrait {
  margin: 0 0 1.6rem; aspect-ratio: 4 / 5; overflow: hidden;
  position: relative; background: var(--paper);
}
.person__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 10%;
  mix-blend-mode: multiply;
}
/* decode-aware entrance: rise + settle, only once the plate is ready */
.js .person__portrait img {
  opacity: 0; transform: translateY(26px) scale(1.045);
  transition: opacity 1.05s var(--ease) var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s);
}
.js .people__grid.in .person__portrait img.ready { opacity: 1; transform: none; }
.js .person:nth-child(2) .person__portrait img { --d: .13s; }
.js .person:nth-child(3) .person__portrait img { --d: .26s; }
.js .person:nth-child(4) .person__portrait img { --d: .39s; }
.js .people__grid.in .person:hover .person__portrait img.ready { transform: scale(1.03); transition: transform 1.2s var(--ease); }
.person h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.25rem, calc(.5rem + 1.114vw), 1.55rem); letter-spacing: -.01em; }
.person .role { display: block; margin-top: .65rem; font: 550 .7rem/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.person p { margin-top: 1.05rem; font-size: .88rem; line-height: 1.7; color: #4A463F; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); border-top: 1px solid var(--line-dark); padding: clamp(4.5rem, 10vh, 7.5rem) 0 2.2rem; position: relative; overflow: hidden; }
.site-footer .hero-ghost { font-size: min(88vh, 46rem); right: -4vw; bottom: -20vh; color: rgba(217, 10, 14, .055); }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; position: relative; z-index: 1; }
.site-footer__brand .fname { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, calc(.6rem + 3.177vw), 3.4rem); letter-spacing: -.015em; line-height: 1.05; }
.site-footer__brand .fname em { font-style: italic; color: var(--red); }
.site-footer__strap { margin-top: 1.3rem; font-family: var(--serif); font-style: italic; color: var(--grey-2); font-size: 1.02rem; line-height: 1.7; max-width: 24rem; }
.fcol h4 { font: 600 .6rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--grey); margin-bottom: 1.35rem; }
.fcol ul { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.fcol a { font-size: .88rem; color: var(--grey-3); transition: color .3s, padding-left .35s var(--ease); }
.fcol a:hover { color: var(--paper); padding-left: .45rem; }
.site-footer__bottom {
  margin-top: clamp(3rem, 7vh, 5rem); padding-top: 1.7rem; border-top: 1px solid var(--line-dark-2);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: .74rem; letter-spacing: .05em; color: var(--grey); position: relative; z-index: 1;
}
.site-footer__bottom .legal-note { max-width: 46rem; line-height: 1.7; }

/* ============================================================
   PAGE HERO (interior)
   ============================================================ */
.page-hero { position: relative; overflow: hidden; padding: clamp(5.5rem, 10vh, 7rem) 0 clamp(2rem, 4vh, 3rem); background: var(--ink); display: flex; min-height: 100vh; min-height: 100svh; }
.page-hero .hero-ghost { font-size: min(140vh, 72rem); right: -4.5vw; bottom: -20vh; top: auto; color: rgba(217, 10, 14, .14); }
.page-hero .wrap { position: relative; z-index: 2; width: 100%; }
.page-hero .hero-in { display: flex; flex-direction: column; flex: 1; }
/* content rides the optical centre; proof strip stays anchored at the base */
.page-hero-core { margin-block: auto; transform: translateY(-1.5vh); }
.page-hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, min(7vw, 9.2vh), 6.2rem); line-height: 1.02; letter-spacing: -.015em;
  max-width: 16ch; margin-top: 1.6rem;
}
.page-hero__standfirst { margin-top: 1.6rem; max-width: 40rem; color: var(--grey-3); font-size: clamp(1rem, calc(.4rem + .806vw), 1.14rem); line-height: 1.8; }
.page-hero__standfirst strong { color: var(--paper); font-weight: 550; }
.page-hero__standfirst + .page-hero__standfirst { margin-top: .9rem; }
.page-hero__ctas { display: flex; gap: 1.5rem; margin-top: 2.1rem; flex-wrap: wrap; align-items: center; }
.cta-primary { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.cta-note { font-size: .78rem; color: var(--grey); letter-spacing: .02em; padding-left: .2rem; }
.proof-strip { border-top: 1px solid var(--line-dark); margin-top: clamp(2.2rem, 4.5vh, 3.2rem); padding-top: 1.1rem; }
.page-hero__brand-line { font: 600 .64rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--grey); margin-bottom: 1.8rem; display: flex; align-items: center; gap: 1rem; }
.page-hero__brand-line::before { content: ''; width: 2.8rem; height: 1px; background: var(--red); }
.page-hero__support { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, calc(.48rem + 1.341vw), 1.7rem); color: var(--grey-3); margin-top: 1.5rem; }
.proof-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 0; }
.proof-strip li { font: 600 .62rem/1.8 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--grey-2); display: flex; align-items: center; }
.proof-strip li + li::before { content: ''; width: 4px; height: 4px; background: var(--red); margin: 0 1.2rem; }

/* interior hero entrance */
.js .page-hero .hero-lm > span { transform: translateY(112%); }
.js .is-live .page-hero .hero-lm > span { transform: translateY(0); transition: transform 1.2s var(--ease); transition-delay: calc(.08s + var(--i, 0) * .13s); }
.js .page-hero .hero-rv { opacity: 0; transform: translateY(28px); }
.js .is-live .page-hero .hero-rv { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(.2s + var(--i, 0) * .11s); }

/* ============================================================
   TRANSITION MODULE + ACCORDION
   ============================================================ */
.transition-module { border-top: 0; }
.transition-module__grid { display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; gap: clamp(2.5rem, calc(.35rem + 5.528vw), 6rem); }
.transition-module h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, calc(.6rem + 2.777vw), 3.2rem); line-height: 1.08; letter-spacing: -.012em; margin-top: 1.9rem; }
.transition-module__body p { color: #4A463F; line-height: 1.8; margin-bottom: 1.1rem; max-width: 46rem; }
.transition-module__body p strong { color: var(--ink); font-weight: 600; }

.accordion { margin-top: 2.4rem; border-top: 1px solid var(--line-paper-2); }
.accordion__item { border-bottom: 1px solid var(--line-paper-2); }
.accordion__btn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.55rem 0; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink);
  transition: color .35s var(--ease), padding-left .45s var(--ease);
}
.accordion__btn:hover { color: var(--red-deep); padding-left: .5rem; }
.accordion__icon { flex: none; width: 2rem; height: 2rem; border: 1px solid var(--line-paper-2); border-radius: 50%; position: relative; transition: transform .5s var(--ease), border-color .35s, background .35s; }
.accordion__icon::before, .accordion__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; }
.accordion__icon::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.accordion__icon::after { width: 1.5px; height: 10px; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.accordion__btn[aria-expanded="true"] .accordion__icon { transform: rotate(135deg); border-color: var(--red); }
.accordion__panel { overflow: hidden; max-height: 0; transition: max-height .6s var(--ease); }
.accordion__panel p { padding: 0 3.4rem 1.7rem 0; color: #4A463F; line-height: 1.75; font-size: .95rem; max-width: 40rem; }
/* declaration blocks inside designed answers */
.accordion__panel .ab { padding-right: 3.4rem; }
.accordion__panel .ab + .ab { margin-top: 1.7rem; padding-top: 1.7rem; border-top: 1px solid var(--line-paper); }
.accordion__panel p.ab__line {
  padding: 0 0 .75rem; max-width: 30rem;
  font-family: var(--serif); font-weight: 500;
  font-size: 1.4rem; line-height: 1.3; letter-spacing: -.008em;
  color: var(--ink);
}
.accordion__panel p.ab__line .rs { color: var(--red-deep); }
.accordion__panel p.ab__body { padding: 0; }
.accordion__panel .ab__link {
  color: var(--red-deep); font-weight: 600;
  border-bottom: 1px solid var(--red-deep); padding-bottom: 1px;
  transition: color .3s, border-color .3s;
}
.accordion__panel .ab__link:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 700px) {
  .accordion__panel .ab { padding-right: 0; }
}

/* ============================================================
   INSIDE T3A ADVISER — five editorial rows (advisers)
   Name & cadence in the margin; the benefit headline does the work.
   ============================================================ */
.inside { overflow: hidden; }
/* the introduction carries the section's own head-space (the gap down to the first rule),
   so its bottom edge IS the first divider — the ghost is anchored to it, not to the five rows */
.inside__intro { position: relative; padding-bottom: clamp(3rem, 6vh, 4.5rem);
  /* crop the decorative layer at the first rule only — open above and to the sides so the
     right-edge bleed survives and the ghost can drift on scroll without the cut line moving */
  clip-path: inset(-100% -100vw 0 -100vw); }
.inside__intro .section__head { position: relative; z-index: 1; margin-bottom: 0; }
/* the ghost "act" — the hero's oversized "3" carried into the section, set in the italic
   and left in the empty right-hand space. Bottom-right of the introduction, bleeding past the
   viewport edge; the bowls drop a fraction below the first rule and are cropped at it (by the
   introduction's clip-path), so the lettering is cut by the line rather than set on it. main.js
   gives it the hero ghost's ambient drift — a few dozen pixels of lag over the introduction, no
   sideways drift — and lets it recede a little as the first row takes the screen. The red is tuned by eye against the hero's
   mark: the hero sits on ink, this on charcoal, so the alpha is the one that reads with the same
   quiet weight on the warmer surface rather than a copied value. */
.inside__ghost {
  /* box-bottom offset that lands the bowls of "a" and "c" ~10% of their height below the divider
     (Playfair italic: glyph bottom sits .069em above the line box bottom; x-height is .547em) */
  --drop: .124em;
  position: absolute; z-index: 0; bottom: calc(-1 * var(--drop)); right: calc(50% - 50vw - .06em);
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: lowercase;
  font-size: clamp(18rem, calc(.6rem + 27.297vw), 33rem); line-height: 1; letter-spacing: -.015em; white-space: nowrap;
  color: rgba(217, 10, 14, .105); /* a shade under the top-right setting: the whole mark now shows */
  pointer-events: none; user-select: none; will-change: transform, opacity;
}
.inside .section__head { max-width: 58rem; }
.inside .section__head h2 { font-size: clamp(2.15rem, calc(.6rem + 2.845vw), 3.25rem); }
.inside .section__standfirst { max-width: 44rem; }
.inside__eyebrow-text { line-height: 1.9; }
.inside .eyebrow--red { white-space: normal; }

.inside__rows { list-style: none; margin: 0; padding: 0; }
.inside__row {
  position: relative;
  display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr;
  column-gap: clamp(2rem, calc(.5rem + 3.371vw), 4.5rem); align-items: start;
  padding: clamp(2.3rem, 4.2vh, 3.2rem) 0 clamp(2.5rem, 4.6vh, 3.5rem);
}
/* the rule above each row draws in from the left as the row arrives */
.inside__row::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line-dark); transform: scaleX(0); transform-origin: left;
  transition: transform 1.35s var(--ease) .08s;
}
.inside__row.in::before, .no-js .inside__row::before { transform: scaleX(1); }
.js .inside__row.rv { transform: translateY(22px); }
.js .inside__row.rv.in { transform: none; }

.inside__meta { padding-top: .55rem; }
.inside__name {
  font: 600 .78rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper); display: flex; align-items: center; gap: .85rem;
}
.inside__name::before {
  content: ''; width: 7px; height: 7px; background: var(--red); flex: none;
  transform: scale(0); transition: transform .6s var(--ease) .9s;
}
.inside__row.in .inside__name::before, .no-js .inside__name::before { transform: scale(1); }
.inside__when { margin-top: .7rem; font: 550 .68rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); padding-left: calc(7px + .85rem); }

.inside__body h3 {
  font-family: var(--serif); font-weight: 500; font-style: normal;
  font-size: clamp(1.5rem, calc(.6rem + 1.247vw), 1.85rem); line-height: 1.22; letter-spacing: -.012em;
  color: var(--paper); max-width: 34ch;
}
.inside__body > p {
  margin-top: 1.05rem; font-size: 1.0625rem; line-height: 1.72;
  color: var(--grey-3); max-width: 39rem;
}
.inside__body > p strong { color: var(--paper); font-weight: 600; }

/* The Brief: six subjects in a quiet three-by-two index */
.inside__topics {
  list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 39rem;
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.6rem;
}
.inside__topics li {
  font: 500 .86rem/1.4 var(--sans); letter-spacing: .01em; color: var(--grey-3);
  padding: .8rem 0; border-top: 1px solid var(--line-dark-2);
  display: flex; align-items: baseline; gap: .7rem;
}
.inside__topics li::before { content: ''; width: 4px; height: 4px; background: var(--red); flex: none; transform: translateY(-2px); }

/* one action to finish */
.inside__close {
  position: relative; margin-top: 0;
  padding-top: clamp(2.6rem, 5vh, 3.6rem);
  display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr;
  column-gap: clamp(2rem, calc(.5rem + 3.371vw), 4.5rem); align-items: center;
}
.inside__close::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line-dark); transform: scaleX(0); transform-origin: left;
  transition: transform 1.35s var(--ease) .08s;
}
.inside__close.in::before, .no-js .inside__close::before { transform: scaleX(1); }
.inside__close .btn-arrow { justify-self: start; white-space: nowrap; }
.inside__note { font-size: .86rem; line-height: 1.7; color: var(--grey-2); max-width: 36rem; }
.inside__note-em { color: var(--paper); font-weight: 600; }

@media (max-width: 1000px) {
  .inside__close { grid-template-columns: auto 1fr; column-gap: clamp(2rem, calc(.6rem + 3.177vw), 3.5rem); }
}
/* below this the standfirst runs under the mark — it goes rather than crowds the copy */
@media (max-width: 1100px) {
  .inside__ghost { display: none; }
}
@media (max-width: 760px) {
  .inside__row, .inside__close { grid-template-columns: 1fr; row-gap: 1.3rem; }
  .inside__meta { padding-top: 0; }
  .inside__body h3 { max-width: none; }
  .inside__topics { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
  .inside__close { row-gap: 1.6rem; }
}
@media (max-width: 340px) {
  .inside__topics { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .inside__row::before, .inside__close::before, .inside__name::before { transition: none; transform: none; }
}

/* ============================================================
   CARDS
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  padding: clamp(1.9rem, calc(.6rem + 2.245vw), 2.9rem); position: relative; overflow: hidden;
  transition: background .6s var(--ease);
}
.card::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.card:hover { background: var(--ink-soft); }
.card:hover::after { transform: scaleX(1); }
.card__index { font: 700 .62rem/1 var(--sans); letter-spacing: .26em; color: var(--grey); transition: color .4s; }
.card:hover .card__index { color: var(--red); }
.card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, calc(.54rem + 1.267vw), 1.8rem); margin: 1.5rem 0 .9rem; letter-spacing: -.01em; line-height: 1.2; }
.card p { color: var(--grey-3); font-size: .93rem; line-height: 1.78; }

/* conversion intro (firm proposition above the forms) */
.conv-intro { margin-bottom: clamp(3rem, 6.5vh, 4.8rem); }
.conv-intro .prose-cols__body { align-self: center; }
.section--paper .red-italic, .section--paper-2 .red-italic { color: var(--red-deep); }

/* ============================================================
   EDITORIAL STANDARD — the ledger of the standard
   ============================================================ */
.std-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, calc(.6rem + 2.577vw), 3rem); line-height: 1.1; letter-spacing: -.012em;
  margin-top: 1.9rem; max-width: 15ch;
}
.std-question {
  font-family: var(--serif); font-style: italic; color: var(--red);
  font-size: clamp(1.25rem, calc(.5rem + 1.275vw), 1.65rem); line-height: 1.38;
  margin-top: 1.7rem; max-width: 21ch;
}
.std-ledger { border-top: 1px solid var(--line-dark); }
.std-row {
  display: grid; grid-template-columns: 3.4rem 1fr 3rem;
  align-items: center; gap: 1.4rem;
  padding: 1.55rem 0; border-bottom: 1px solid var(--line-dark-2);
}
.std-row__num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, calc(.6rem + 1.697vw), 2.3rem); line-height: 1; color: rgba(217, 10, 14, .42); }
.std-row__label { display: block; font: 700 .62rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: .55rem; }
.std-row__headline { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, calc(.44rem + 1.034vw), 1.4rem); line-height: 1.3; color: var(--paper); }
.std-row__sub { margin-top: .5rem; font-size: .85rem; line-height: 1.68; color: var(--grey-3); max-width: 40rem; }
.std-row__tick {
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--line-dark); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; justify-self: end;
}
.std-row__tick svg { width: 1.05rem; height: 1.05rem; stroke: var(--red); stroke-dasharray: 24; stroke-dashoffset: 24; }
.manifesto.in .std-row:nth-child(1) .std-row__tick svg { animation: tick-draw .55s var(--ease) .55s forwards; }
.manifesto.in .std-row:nth-child(2) .std-row__tick svg { animation: tick-draw .55s var(--ease) .8s forwards; }
.manifesto.in .std-row:nth-child(3) .std-row__tick svg { animation: tick-draw .55s var(--ease) 1.05s forwards; }
.manifesto.in .std-row:nth-child(4) .std-row__tick svg { animation: tick-draw .55s var(--ease) 1.3s forwards; }
@media (max-width: 700px) {
  .std-row { grid-template-columns: 2.4rem 1fr 2.5rem; gap: 1rem; }
}

/* ============================================================
   MANIFESTO PANEL (editorial standard)
   ============================================================ */
.manifesto { background: var(--char); position: relative; overflow: hidden; }
.manifesto__in { max-width: 64rem; margin: 0 auto; text-align: center; }
.manifesto__body { margin: 2.5rem auto 0; color: var(--grey-3); font-size: 1.05rem; line-height: 1.8; max-width: 40rem; }
.manifesto__use { margin-top: 2.7rem; padding-top: 1.7rem; border-top: 1px solid var(--line-dark); font: 550 .72rem/1.8 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }

/* the beat of silence between the doctrine and the interrogation */
.scene-break { height: clamp(4.5rem, 9vh, 7rem); background: #040303; display: flex; align-items: center; padding: 0 var(--gutter); }
.scene-break i { width: clamp(4rem, calc(.35rem + 9.475vw), 9rem); height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .1s; }
.scene-break.in i { transform: scaleX(1); }

/* ============================================================
   ASK TONY TEASER
   ============================================================ */
.ask-tony {
  background: radial-gradient(75% 105% at 86% -5%, rgba(174, 21, 36, .26), transparent 62%), #030202;
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
}
.ask-tony__ghost {
  position: absolute; right: -2%; bottom: -34%; pointer-events: none; user-select: none;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(18rem, calc(.6rem + 35.245vw), 36rem); line-height: .8;
  color: rgba(217, 10, 14, .05); -webkit-text-stroke: 1px rgba(217, 10, 14, .2);
}
.ask-tony__in { position: relative; z-index: 1; max-width: 58rem; }
.ask-tony__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, calc(.35rem + 5.528vw), 6rem); align-items: center; }

/* ============================================================
   ASK TONY · SCENE 1 — the viewport is the case file
   ============================================================ */


/* ============================================================
   ASK TONY · SCENE 2 — the campaign, a black stage
   ============================================================ */
.at-campaign { background: #030202; position: relative; overflow: hidden; padding: clamp(4.5rem, 11vh, 7.5rem) 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
/* the transition hairline, grid-aligned */
.at-campaign__rule {
  position: absolute; top: 0; left: var(--gutter); width: clamp(3.75rem, calc(.6rem + 5.245vw), 6.25rem); height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease) .3s;
}
.at-campaign.in .at-campaign__rule { transform: scaleX(1); }
.at-campaign__in { position: relative; z-index: 1; }
.at-campaign__line {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, calc(.35rem + 5.528vw), 5.6rem); line-height: 1.03; letter-spacing: -.016em;
  color: var(--paper);
}
.at-campaign__support { margin-top: 2.1rem; font-family: var(--serif); font-style: italic; color: var(--grey-3); font-size: 1.15rem; }
/* the maker's mark: one axis, noticeably smaller than the philosophy */
.at-campaign__lockup {
  margin: clamp(1.8rem, 3.5vh, 2.3rem) 0;
  display: flex; flex-wrap: wrap;
  font: 700 .7rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--paper);
}
.at-campaign__lockup span { display: flex; align-items: center; }
.at-campaign__lockup span + span::before { content: ''; width: 4px; height: 4px; background: var(--red); margin: 0 1.1rem; }
.at-campaign__cta { margin-top: 2.7rem; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.at-campaign__micro { font-size: .82rem; color: var(--grey); max-width: 26rem; line-height: 1.7; }

.ask-tony__grid--case { grid-template-columns: 2fr 3fr; align-items: start; }
.ask-tony__last {
  margin-top: 2rem; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, calc(.6rem + 2.177vw), 2.6rem); line-height: 1.15; letter-spacing: -.01em;
  color: var(--red);
}
.casefile {
  border: 1px solid #E6DFCC;
  background: linear-gradient(180deg, #F7F3E9, #F4EEE0);
  color: #171512;
  padding: clamp(1.8rem, calc(.6rem + 2.245vw), 2.8rem);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .55);
}
.casefile__ref {
  font: 600 .62rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: #77746D; padding-bottom: 1.15rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid #E2DAC5;
}
.casefile__subject { font-family: var(--serif); font-size: clamp(1.05rem, calc(.42rem + .875vw), 1.25rem); line-height: 1.6; color: #171512; }
.casefile__objective { font-family: var(--serif); font-style: italic; color: #6E6A62; margin-top: .45rem; font-size: clamp(.95rem, calc(.38rem + .754vw), 1.1rem); line-height: 1.6; }

.casefile__route { margin-top: 1.9rem; }
.casefile__route-label { font: 700 .58rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: #8A857B; margin-bottom: .55rem; }
.casefile__route-text { position: relative; display: inline-block; font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; color: #4A463F; }
.casefile__route-text span { position: relative; transition: color .5s; }
.casefile__route-text i {
  position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px;
  background: var(--red-deep); transform: scaleX(0); transform-origin: left;
  transition: transform 1.15s var(--ease);
}
.casefile.struck .casefile__route-text span { color: #9A968E; }
.casefile.struck .casefile__route-text i { transform: scaleX(1); }

.casefile__intervention { margin-top: 2.2rem; padding-top: 1.7rem; border-top: 1px solid #E2DAC5; }
.casefile__clarify {
  display: flex; align-items: center; gap: .6rem;
  font: 700 .66rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--red-deep);
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.casefile__clarify i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-deep); flex: none; }
.casefile__missing {
  margin-top: .9rem; font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; color: #4A463F;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.casefile__asking {
  margin-top: .9rem;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, calc(.6rem + 1.577vw), 2.1rem); line-height: 1.15; color: var(--red-deep);
  opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.casefile__clarify.on, .casefile__missing.on, .casefile__asking.on { opacity: 1; transform: none; }

.casefile__proof {
  list-style: none; margin: 0; padding: 1.35rem 0 0; margin-top: 2rem;
  border-top: 1px solid #E2DAC5;
  display: flex; flex-wrap: wrap; gap: .5rem 2.2rem;
}
.casefile__proof li {
  font: 550 .78rem/1.6 var(--sans); letter-spacing: .04em; color: #77746D;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.casefile__proof li.on { opacity: 1; transform: none; }
.casefile__proof .ok { color: var(--red-deep); margin-left: .3rem; }
.casefile__proof .un { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #A86E14; margin-left: .45rem; }

/* the fears band */
.at-fears { margin-top: clamp(3rem, 6vh, 4.5rem); padding-top: 1.8rem; border-top: 1px solid var(--line-dark); }
.at-fears__list { display: flex; flex-wrap: wrap; font: 700 .68rem/1.8 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--paper); }
.at-fears__list span { display: flex; align-items: center; }
.at-fears__list span + span::before { content: ''; width: 5px; height: 5px; background: var(--red); margin: 0 1.2rem; }
.at-fears__line { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, calc(.46rem + 1.169vw), 1.5rem); color: var(--grey-2); }

/* the payoff — its own near-empty stage */
.ask-tony__payoff { margin-top: clamp(5rem, 12vh, 9rem); padding-bottom: clamp(1rem, 3vh, 2rem); }
.ask-tony__payoff-line {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, calc(.35rem + 5.528vw), 5.6rem); line-height: 1.03; letter-spacing: -.016em;
}
.ask-tony__payoff-cta { margin-top: 2.6rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.ask-tony__micro { font-size: .82rem; color: var(--grey); max-width: 24rem; line-height: 1.7; }

@media (max-width: 900px) {
  .ask-tony__grid--case { grid-template-columns: 1fr; gap: 3rem; }
  .casefile__frags { grid-template-columns: 1fr; }
  .ask-tony__payoff { flex-direction: column; align-items: flex-start; }
}

.ask-tony h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, calc(.35rem + 4.528vw), 4.6rem); line-height: 1.04; letter-spacing: -.015em; margin-top: 2rem; }
.ask-tony__body { margin-top: 1.9rem; color: var(--grey-3); font-size: 1.07rem; line-height: 1.8; max-width: 38rem; }
.ask-tony__support { margin-top: 1.3rem; font-family: var(--serif); font-style: italic; color: var(--grey-2); font-size: 1.15rem; }
.ask-tony__lockup { margin-top: 2.9rem; display: flex; flex-wrap: wrap; font: 700 .7rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--paper); }
.ask-tony__lockup span { display: flex; align-items: center; }
.ask-tony__lockup span + span::before { content: ''; width: 4px; height: 4px; background: var(--red); margin: 0 1.2rem; }
.ask-tony .btn-arrow { margin-top: 2.9rem; }

/* ============================================================
   FOUR TESTS — numerals ignite when lit
   ============================================================ */
.tests { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-paper-2); }
.test { padding: 2.3rem 1.8rem 2.5rem 0; border-right: 1px solid var(--line-paper); }
.test + .test { padding-left: 1.8rem; }
.test:last-child { border-right: 0; }
.test__numeral {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(2.8rem, calc(.6rem + 3.497vw), 3.8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(6, 6, 6, .28);
  transition: color 1s var(--ease), -webkit-text-stroke-color 1s var(--ease);
}
.test.lit .test__numeral { color: var(--red-deep); -webkit-text-stroke-color: var(--red-deep); }
.test h3 { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; margin: 1.5rem 0 .75rem; letter-spacing: -.01em; line-height: 1.25; }
.test p { font-size: .88rem; line-height: 1.72; color: #4A463F; }

/* ============================================================
   PROSE COLUMNS / FULL-WIDTH LINES
   ============================================================ */
.prose-cols { display: grid; grid-template-columns: minmax(16rem, 26rem) 1fr; gap: clamp(2.5rem, calc(.35rem + 5.528vw), 6rem); }
.prose-cols h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, calc(.6rem + 2.577vw), 3rem); line-height: 1.1; letter-spacing: -.012em; margin-top: 1.9rem; }
.prose-cols__body p { color: var(--grey-3); line-height: 1.85; margin-bottom: 1.2rem; max-width: 46rem; font-size: 1.01rem; }
.section--paper .prose-cols__body p, .section--paper-2 .prose-cols__body p { color: #4A463F; }
/* ============================================================
   SPLIT / PROOF / FINAL CTA
   ============================================================ */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); }
.split-2__col { padding: clamp(2.3rem, calc(.6rem + 3.245vw), 3.8rem); transition: background .6s var(--ease); }
.split-2__col:first-child { border-right: 1px solid var(--line-dark); }
.split-2__col:hover { background: var(--ink-soft); }
.split-2__eyebrow { font: 600 .63rem/1.7 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--red); }
.split-2__col h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, calc(.6rem + 1.645vw), 2.2rem); margin: 1.5rem 0 1.1rem; letter-spacing: -.01em; line-height: 1.22; }
.split-2__col p { color: var(--grey-3); font-size: .96rem; line-height: 1.8; }
.split-2__col .btn-arrow { margin-top: 2.2rem; }


.final-cta { background: var(--ink); position: relative; overflow: hidden; }
.final-cta__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, calc(.35rem + 5.528vw), 6rem); align-items: stretch; }
/* Card stretches to the bottom of the bullet list; spare height is shared evenly between the form rows. */
.final-cta .form-panel { display: flex; flex-direction: column; }
.final-cta .form-panel form { flex: 1; display: flex; flex-direction: column; }
.final-cta .form-panel .form-grid { flex: 1; align-content: space-between; }
.final-cta h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, calc(.5rem + 3.314vw), 3.6rem); line-height: 1.08; letter-spacing: -.014em; margin-top: 1.9rem; }
.final-cta__list { margin-top: 2.3rem; list-style: none; }
.final-cta__list li { padding: 1.15rem 0; border-bottom: 1px solid var(--line-dark-2); color: var(--grey-3); font-size: 1rem; display: flex; gap: 1rem; align-items: baseline; }
.final-cta__list li::before { content: ''; width: 5px; height: 5px; background: var(--red); flex: none; transform: translateY(-2px); }

/* ============================================================
   FORMS
   ============================================================ */
.forms-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, calc(.5rem + 3.371vw), 4rem); }
.form-panel { background: var(--white); border: 1px solid var(--line-paper); padding: clamp(1.9rem, calc(.6rem + 2.645vw), 3.2rem); position: relative; color: var(--ink); }
.form-panel::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.form-panel.in::before { transform: scaleX(1); }
.form-panel--dark { background: var(--char); border-color: var(--line-dark); color: var(--paper); }
.form-panel__eyebrow { font: 600 .62rem/1.7 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--red); }
.form-panel h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, calc(.6rem + 1.497vw), 2rem); margin: 1.1rem 0 .95rem; letter-spacing: -.01em; line-height: 1.22; }
.form-panel > p { font-size: .9rem; line-height: 1.72; color: #4A463F; margin-bottom: 1.9rem; }
.form-panel--dark > p { color: var(--grey-3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font: 600 .62rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); transition: color .3s; }
.field:focus-within label { color: var(--red); }
.field input, .field select, .field textarea {
  font: 500 .95rem/1.4 var(--sans); color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-paper-2);
  padding: .65rem 0; border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .35s;
}
.form-panel--dark .field input, .form-panel--dark .field select, .form-panel--dark .field textarea { border-bottom-color: var(--line-dark); color: var(--paper); }
.form-panel--dark .field select option { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--red); }
.field textarea { resize: vertical; min-height: 4.5rem; }
.field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6A62' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .2rem center; padding-right: 1.4rem; }
.field .error-msg { font-size: .74rem; color: var(--red); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: var(--red); }
.field.has-error .error-msg { display: block; }
.consent { font-size: .76rem; line-height: 1.65; color: var(--grey); margin-top: 1.5rem; }
.form-panel--dark .consent { color: var(--grey-2); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.btn-submit {
  margin-top: 1.9rem; width: 100%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font: 600 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding: 1.3rem 1.5rem; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  transition: color .45s var(--ease);
}
.btn-submit::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateY(102%); transition: transform .55s var(--ease); }
.btn-submit:hover::before, .btn-submit:focus-visible::before { transform: translateY(0); }
.btn-submit span, .btn-submit .arr { position: relative; z-index: 1; }
.form-panel--dark .btn-submit { background: var(--red); color: #fff; }
.form-panel--dark .btn-submit::before { background: var(--paper); }
.form-panel--dark .btn-submit:hover { color: var(--ink); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-success { display: none; text-align: left; padding: 2rem 0 1rem; }
.form-success.is-visible { display: block; }
.form-success__tick { width: 3rem; height: 3rem; border: 1px solid var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.form-success__tick svg { width: 1.2rem; height: 1.2rem; stroke: var(--red); stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick-draw .7s var(--ease) .15s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.form-success h4 { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; margin-bottom: .7rem; }
.form-success p { font-size: .92rem; line-height: 1.72; color: #4A463F; }
.form-panel--dark .form-success p { color: var(--grey-3); }

/* ============================================================
   UTILITY PAGES
   ============================================================ */
.utility-hero { padding: clamp(9rem, 18vh, 12rem) 0 6rem; min-height: 78vh; display: flex; align-items: center; }
.signin-card { max-width: 30rem; margin: 0 auto; width: 100%; }
.legal-page { padding: clamp(9rem, 18vh, 12rem) 0 6rem; }
.legal-page h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, calc(.45rem + 4.297vw), 4rem); margin: 1.7rem 0 2.4rem; letter-spacing: -.012em; }
.legal-page .prose p { color: var(--grey-3); line-height: 1.85; margin-bottom: 1.2rem; max-width: 46rem; }
.legal-page .prose h2 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 2.7rem 0 1rem; }

section[id], div[id] { scroll-margin-top: 5rem; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .cursor-light { display: none !important; }
  .js .rv, .js [data-stagger] > *, .js .hero .hero-rv, .js .page-hero .hero-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .lm > span, .js .hero .hero-lm > span, .js .page-hero .hero-lm > span { transform: none !important; transition: none !important; }
  .eyebrow .rule { transform: scaleX(1); }
  .form-panel::before { transform: scaleX(1); }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .hero-meta > div:nth-child(2) { border-right: 0; }
  .tests { grid-template-columns: repeat(2, 1fr); }
  .test { border-bottom: 1px solid var(--line-paper); }
  .test:nth-child(2) { border-right: 0; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .head-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand-mark { height: 2.05rem; }
  .chapter { display: none; }
  .grain { display: none; }
  .split__panes { flex-direction: column; min-height: 0; }
  /* stacked: the hinge becomes a flex item between the panes so it sits exactly on the
     ink/paper boundary, whatever height each pane ends up at */
  .split__hinge { position: relative; order: 1; inset: auto; width: auto; height: 1px; flex: 0 0 1px;
    transform: scaleX(0); transform-origin: left; }
  .pane--advisers { order: 0; }
  .pane--institutions { order: 2; }
  .split.in .split__hinge { transform: scaleX(1); }
  .split__hinge::after { top: 50%; }
  .pane { padding: clamp(3.5rem, 9vh, 5.5rem) var(--gutter); }
  /* stacked: the paper pane opens downward from the horizontal hinge */
  .pane--institutions { clip-path: inset(0 0 100% 0); }
  .split.in .pane--institutions { clip-path: inset(0 0 0 0); }
  .no-js .pane--institutions { clip-path: none; }
  .pane--advisers .pane__ghost { font-size: 66vw; left: auto; right: -14%; bottom: -10%; }
  .pane--institutions .pane__ghost { font-size: 60vw; top: -12%; }
  .cards, .cards--3 { grid-template-columns: 1fr; }

  .split-2 { grid-template-columns: 1fr; }
  .split-2__col:first-child { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .forms-duo { grid-template-columns: 1fr; }
  .final-cta__grid { grid-template-columns: 1fr; }
  .prose-cols { grid-template-columns: 1fr; }
  /* stacked: nothing to align to, so the body sits straight under the headline */
  .creed .prose-cols__body { padding-top: 0; }
  .creed .prose-cols__body::before { top: calc(.4867 * var(--mc-lead)); }
  .creed .prose-cols__body::after { top: calc(.4867 * var(--mc-lead) - 3px); }
  .transition-module__grid { grid-template-columns: 1fr; }
  .people__grid { grid-template-columns: 1fr 1fr; }
  .creed__two { grid-template-columns: 1fr; }
  .person { padding-bottom: 2.2rem; border-bottom: 1px solid var(--line-paper); }
  .person:nth-child(2) { border-right: 0; }
  .hero-ghost { font-size: 96vw; right: -18vw; bottom: -12vw; }
  .page-hero .hero-ghost { font-size: 96vw; right: -24vw; bottom: -16vw; }
  .press-desk .hero-ghost, .legal-page .hero-ghost { font-size: 92vw; right: -20vw; bottom: -14vw; }
  .lost-chain .chain { flex-wrap: wrap; gap: .9rem 0; }
  .lost-chain .chain__break { min-width: 1rem; }
  .hero { min-height: calc(100vh - 4.6rem); min-height: calc(100svh - 4.6rem); }
}
@media (max-width: 560px) {
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta > div { border-right: 0; border-bottom: 1px solid var(--line-dark-2); padding-left: 0 !important; }
  .hero-meta > div:last-child { border-bottom: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .people__grid { grid-template-columns: 1fr; }
  .person { border-right: 0; padding-left: 0 !important; }
  .tests { grid-template-columns: 1fr; }
  .test { border-right: 0; padding-left: 0 !important; }
  .site-footer__top { grid-template-columns: 1fr; gap: 2.2rem; }
  .proof-strip li + li::before { margin: 0 .7rem; }
}

/* ============ THE MODEL, APPLIED — evidence dossier ============ */
/* section opener demoted: a gallery wall label, not a second hero */
.section__head--quiet { max-width: none; margin-bottom: clamp(2.8rem, 5.5vh, 4.2rem); }
.sec-title--quiet { font-size: clamp(1.58rem, calc(.6rem + 1.597vw), 2.15rem); font-weight: 500; line-height: 1.28; max-width: 28em; }
.red-stop { color: var(--red); }

.case-tabs { display: flex; flex-wrap: wrap; gap: 0 clamp(1.8rem, calc(.6rem + 2.645vw), 3.2rem); border-bottom: 1px solid var(--line-dark); }
.case-tab { appearance: none; background: none; border: 0; cursor: pointer; position: relative; display: flex; align-items: baseline; gap: .7rem; padding: 1.1rem 0 1.2rem; font: 600 .72rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--grey); transition: color .45s var(--ease); }
.case-tab__no { font-size: .6rem; letter-spacing: .18em; color: var(--grey); transition: color .45s var(--ease); }
.case-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.case-tab:hover { color: var(--grey-3); }
.case-tab.is-active { color: var(--paper); }
.case-tab.is-active .case-tab__no { color: var(--red); }
.case-tab.is-active::after { transform: scaleX(1); }
.case-tab:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }
.case-tab__live { display: inline-flex; align-items: center; gap: .5rem; color: var(--red); margin-left: .2rem; }
.case-tab__live i, .case-live-badge i, .case-artefact__pulse { display: block; width: 6px; height: 6px; background: var(--red); animation: livePulse 2.6s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.case-panels { position: relative; }
.case-panel { position: relative; padding: clamp(2.4rem, 5vh, 3.6rem) 0 clamp(2.8rem, 6vh, 4.2rem); }
.case-panel[hidden] { display: none; }
.case-panel__grid { display: grid; grid-template-columns: minmax(0, 47.5%) minmax(0, 40%); justify-content: space-between; gap: clamp(2rem, calc(.6rem + 2.645vw), 3.6rem); align-items: start; }

.case-panel__client { font: 600 .66rem/1.7 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--grey-2); display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.1rem; }
.case-live-badge { display: inline-flex; align-items: center; gap: .55rem; color: var(--red); border: 1px solid rgba(217, 10, 14, .45); padding: .5rem .75rem; letter-spacing: .3em; }
.case-panel__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, calc(.6rem + 2.645vw), 3.3rem); line-height: 1.14; letter-spacing: -.01em; color: var(--paper); margin-top: 1.7rem; max-width: 15em; }
.case-panel__context { margin-top: 1.7rem; max-width: 33rem; color: var(--grey-3); font-size: .98rem; line-height: 1.85; }

/* the artefact — evidence, not watermark */
.case-artefact { border: 1px solid var(--line-dark); background: rgba(246, 242, 235, .015); padding: clamp(1.9rem, calc(.6rem + 2.097vw), 2.7rem); margin-top: .6rem; }
.case-artefact__label { font: 600 .6rem/1.7 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--grey-2); display: flex; align-items: center; gap: .6rem; }
.case-artefact__num { font-family: var(--serif); font-weight: 600; font-size: clamp(3.4rem, calc(.6rem + 4.845vw), 5.4rem); line-height: 1; letter-spacing: -.02em; color: var(--paper); margin-top: 1.5rem; }
.case-artefact__num small { font-size: .3em; font-weight: 500; color: var(--grey-2); margin-left: .18em; }
.case-artefact__num--red { color: var(--red); }
.case-artefact__caption { margin-top: 1.4rem; font-size: .8rem; line-height: 1.75; color: var(--grey-2); max-width: 24rem; }
.case-artefact__aside { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line-dark-2); font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--grey-3); }

/* confidence-index instrument */
.case-index__track { position: relative; height: 1px; background: var(--line-dark); margin-top: 2.1rem; }
.case-index__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 45.7%; background: var(--red); }
.case-index__fill::after { content: ''; position: absolute; right: -3.5px; top: 50%; width: 7px; height: 7px; background: var(--red); transform: translateY(-50%); }
.js .case-index__fill { width: 0; transition: width 1.6s var(--ease) .8s; }
.js .cases.is-live .case-panel.is-active .case-index__fill { width: 45.7%; }
.case-index__scale { display: flex; justify-content: space-between; gap: 1rem; margin-top: .85rem; font: 600 .55rem/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }

/* carried through — the red thread */
.case-thread { position: relative; width: 82%; margin-top: clamp(2.6rem, 5vh, 3.8rem); padding-top: 0; }
.case-thread::before { content: ''; position: absolute; top: 3.5px; left: 0; right: 0; height: 1px; background: var(--line-dark-2); }
.case-thread__draw { position: absolute; top: 3.5px; left: 0; height: 1px; width: 100%; background: var(--red); transform-origin: left; }
.js .case-thread__draw { transform: scaleX(0); }
.case-thread__nodes { list-style: none; position: relative; display: flex; justify-content: space-between; }
.case-thread__nodes li { display: flex; flex-direction: column; align-items: center; }
.case-thread__nodes li:first-child { align-items: flex-start; }
.case-thread__nodes li:last-child { align-items: flex-end; }
.case-thread__nodes li i { display: block; width: 7px; height: 7px; background: var(--red); }
.js .case-thread__nodes li i { transform: scale(0); }
.case-thread__nodes li span { margin-top: .85rem; font: 600 .58rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--grey-2); white-space: nowrap; }
.cases.is-live .case-panel.is-active .case-thread__draw { animation: threadDraw 1.9s var(--ease) .5s both; }
@keyframes threadDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cases.is-live .case-panel.is-active .case-thread__nodes li i { animation: nodePop .5s var(--ease) both; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(1) i { animation-delay: .5s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(2) i { animation-delay: .83s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(3) i { animation-delay: 1.16s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(4) i { animation-delay: 1.49s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(5) i { animation-delay: 1.82s; }
@keyframes nodePop { from { transform: scale(0); } to { transform: scale(1); } }

/* the disciplined second half */
.case-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2.5rem 4rem; margin-top: clamp(2.4rem, 5vh, 3.6rem); padding-top: 2rem; border-top: 1px solid var(--line-dark-2); }
.case-stats { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.case-stats dt { color: var(--paper); }
.case-proves { margin-top: 0; max-width: 27rem; flex: 0 1 27rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.08rem, calc(.432rem + .96vw), 1.28rem); line-height: 1.62; color: var(--paper); }
.case-proves span { display: block; font: 600 .6rem/1 var(--sans); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-bottom: .85rem; }

/* AJ Bell — refuses the retrospective */
.case-status { margin-top: 1.2rem; }
.case-status div { display: flex; align-items: baseline; gap: 1.3rem; padding: .95rem 0; border-top: 1px solid var(--line-dark-2); }
.case-status div:last-child { border-bottom: 1px solid var(--line-dark-2); }
.case-status dt { font-family: var(--serif); font-weight: 600; font-size: 1.85rem; line-height: 1; color: var(--paper); min-width: 3.4rem; }
.case-status dd { font: 600 .6rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.case-live-line { margin-top: clamp(2.4rem, 5vh, 3.4rem); font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, calc(.54rem + 1.459vw), 1.85rem); line-height: 1.4; color: var(--paper); }

/* entrance — replays each time a dossier is opened */
@keyframes caseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.cases.is-live .case-panel.is-active .case-panel__main > * { animation: caseIn .9s var(--ease) both; }
.cases.is-live .case-panel.is-active .case-panel__main > *:nth-child(2) { animation-delay: .08s; }
.cases.is-live .case-panel.is-active .case-panel__main > *:nth-child(3) { animation-delay: .16s; }
.cases.is-live .case-panel.is-active .case-artefact { animation: caseIn 1.1s var(--ease) .3s both; }
.cases.is-live .case-panel.is-active .case-bottom > *:nth-child(1) { animation: caseIn .9s var(--ease) .55s both; }
.cases.is-live .case-panel.is-active .case-bottom > *:nth-child(2) { animation: caseIn .9s var(--ease) .68s both; }
.cases.is-live .case-panel.is-active .case-live-line { animation: caseIn 1s var(--ease) .5s both; }
.cases.is-live .case-panel.is-active .case-thread__nodes li span { animation: caseIn .7s var(--ease) both; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(1) span { animation-delay: .55s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(2) span { animation-delay: .88s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(3) span { animation-delay: 1.21s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(4) span { animation-delay: 1.54s; }
.cases.is-live .case-panel.is-active .case-thread__nodes li:nth-child(5) span { animation-delay: 1.87s; }

@media (max-width: 900px) {
  .case-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .case-tabs::-webkit-scrollbar { display: none; }
  .case-tab { flex: 0 0 auto; }
  .case-panel__grid { grid-template-columns: 1fr; }
  .case-artefact { margin-top: 2.2rem; }
  .case-thread { width: 100%; }
  .case-thread::before { top: 0; bottom: 0; left: 3.5px; right: auto; width: 1px; height: auto; }
  .case-thread__draw { top: 0; left: 3.5px; width: 1px; height: 100%; transform-origin: top; }
  .case-thread__nodes { flex-direction: column; gap: 1.05rem; }
  .case-thread__nodes li, .case-thread__nodes li:first-child, .case-thread__nodes li:last-child { flex-direction: row; align-items: center; gap: 1.1rem; max-width: none; }
  .case-thread__nodes li span { margin-top: 0; white-space: nowrap; text-align: left; font-size: .58rem; }
  .cases.is-live .case-panel.is-active .case-thread__draw { animation-name: threadDrawY; }
  @keyframes threadDrawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .case-bottom { flex-direction: column; align-items: stretch; }
  .case-proves { flex: none; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cases.is-live .case-panel.is-active .case-panel__main > *,
  .cases.is-live .case-panel.is-active .case-artefact,
  .cases.is-live .case-panel.is-active .case-bottom > *,
  .cases.is-live .case-panel.is-active .case-live-line,
  .cases.is-live .case-panel.is-active .case-thread__draw,
  .cases.is-live .case-panel.is-active .case-thread__nodes li i,
  .cases.is-live .case-panel.is-active .case-thread__nodes li span { animation: none; }
  .js .case-thread__draw { transform: scaleX(1); }
  .js .case-thread__nodes li i { transform: scale(1); }
  .js .case-index__fill { transition: none; width: 45.7%; }
  .case-tab__live i, .case-live-badge i, .case-artefact__pulse { animation: none; }
}

/* ---- the tonal cut: evidence is near-absolute black ---- */
.section--pitch { background: #030202; }
.cases { padding-top: clamp(5rem, 10vh, 6.25rem); }

/* ================= PRESS DESK — the wire sheet ================= */
.press-desk { background: var(--paper); color: var(--ink); min-height: 84vh; padding: clamp(9.5rem, 20vh, 13rem) 0 clamp(6.5rem, 13vh, 9.5rem); }
.press-desk .eyebrow { color: #77746C; }
.press-desk .eyebrow .rule { background: var(--red-deep); }
.press-desk h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.7rem, calc(.6rem + 4.95vw), 4.6rem); line-height: 1.05; letter-spacing: -.015em; color: var(--ink); margin: 1.8rem 0 0; }
.press-desk .red-stop { color: var(--red-deep); }
.press-desk__intro { margin-top: 2rem; max-width: 33rem; font-size: 1rem; line-height: 1.8; color: #4A463F; }

.press-contact { margin-top: clamp(2.8rem, 6vh, 4.4rem); }
.press-contact__label, .press-facts__label { font: 600 .62rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #8A857B; }
.press-contact__email { display: inline-block; margin-top: 1.3rem; padding-bottom: .4rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.65rem, calc(.55rem + 2.541vw), 2.7rem); letter-spacing: -.01em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-paper-2); transition: color .4s var(--ease), border-color .4s var(--ease); }
.press-contact__email:hover { color: var(--red-deep); border-color: var(--red-deep); }
.press-contact__row { margin-top: 1.8rem; }
.press-contact__cta { display: inline-flex; align-items: center; gap: .7rem; font: 600 .68rem/1 var(--sans); font-size: var(--label-size); letter-spacing: .26em; text-transform: uppercase; color: var(--red-deep); text-decoration: none; }
.press-contact__cta span { transition: transform .45s var(--ease); }
.press-contact__cta:hover span { transform: translateX(6px); }

.press-facts, .press-latest, .press-resources { margin-top: clamp(3.4rem, 7vh, 5.2rem); padding-top: 2.2rem; border-top: 1px solid var(--line-paper); }
.press-facts ul, .press-resources ul { list-style: none; margin-top: 1.6rem; }
.press-facts li { max-width: 45rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line-paper-2); font-size: .95rem; line-height: 1.82; color: #4A463F; }
.press-facts li:first-child { padding-top: 0; }
.press-facts li:last-child { border-bottom: 0; }

.press-latest__item { margin-top: 1.7rem; }
.press-latest__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, calc(.54rem + 1.356vw), 1.7rem); color: var(--ink); letter-spacing: -.008em; }
.press-latest__date { margin-top: .5rem; font: 600 .62rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #8A857B; }

/* ---- the utility pages carry the mark: ghost 3 bleeding bottom-right, as on every other stage ---- */
.press-desk, .legal-page { position: relative; overflow: hidden; }
.press-desk > .wrap, .legal-page > .wrap { position: relative; z-index: 2; }
.press-desk .hero-ghost { font-size: min(104vh, 56rem); right: -5vw; bottom: -18vh; top: auto; color: rgba(217, 10, 14, .085); }
.legal-page .hero-ghost { font-size: min(96vh, 52rem); right: -5vw; bottom: -16vh; top: auto; color: rgba(217, 10, 14, .075); }

/* 404: the link severs in sequence, then one thread draws back to the way out */
.lost-chain { max-width: 45rem; }
.lost-chain .chain { border-top-color: var(--line-paper); border-bottom-color: var(--line-paper); }
.lost-chain .chain__break::after { background: var(--paper); }
.lost-chain .thread { background: var(--line-paper); margin-top: 1.6rem; }
.lost-chain .thread i { transition: transform 2s var(--ease) 1.25s; }
.lost-chain .thread::after { transition-delay: 3.1s; }
.thread.in i { transform: scaleX(1); }
.thread.in::after { transform: scale(1); }
.lost-chain + .press-facts { margin-top: clamp(2.4rem, 5vh, 3.6rem); border-top: 0; padding-top: 0; }

/* legal: the one line that matters is set as a pull, on the red rule */
.legal-page .prose p.pull {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, calc(.55rem + 1.4vw), 1.9rem); line-height: 1.4; letter-spacing: -.008em;
  color: var(--paper); max-width: 30rem; margin: 1.5rem 0 1.7rem;
  padding-left: 1.4rem; border-left: 1px solid var(--red);
}
.legal-page .prose p.pull .red-stop { font-style: normal; }
.legal-page .prose p.footnote { color: var(--grey); font-size: .85rem; margin-top: 2.5rem; }
.legal-page .prose a { text-decoration: underline; text-underline-offset: 2px; color: var(--paper); transition: color .3s; }
.legal-page .prose a:hover { color: var(--red); }
.press-resources li { padding: 1rem 0; border-bottom: 1px solid var(--line-paper-2); font: 550 .85rem/1.6 var(--sans); letter-spacing: .04em; color: #4A463F; }
.press-resources li:first-child { padding-top: 0; }

@media (max-width: 700px) {
  .press-contact__email { font-size: clamp(1.3rem, calc(.52rem + 4.296vw), 1.8rem); }
}

/* ================= CLOSER TO THE MARKET — the red interlude ================= */
.serve { position: relative; overflow: hidden; background: var(--red-lacquer); min-height: 40vh; display: flex; align-items: center; padding: clamp(5.6rem, 12vh, 6.9rem) 0; }
.serve::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(150% 150% at 88% 94%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 58%); }
.serve__copy { position: relative; z-index: 1; max-width: min(54%, 46rem); }
.serve__eyebrow { font: 600 .64rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: rgba(6, 6, 6, .78); display: flex; align-items: center; gap: 1rem; }
.serve__rule { flex: 0 0 2rem; height: 1px; background: rgba(6, 6, 6, .5); }
.serve__line { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, calc(.6rem + 2.597vw), 3.1rem); line-height: 1.16; letter-spacing: -.01em; color: var(--paper); margin-top: 1.7rem; }
.serve__italic { font-style: italic; color: #140203; }
.serve__body { margin-top: 1.6rem; max-width: 42rem; font-size: .97rem; line-height: 1.82; color: rgba(246, 242, 235, .9); }
.serve__ghost { position: absolute; z-index: 0; right: -.12em; bottom: -.33em; pointer-events: none; user-select: none; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(16rem, calc(.6rem + 29.245vw), 30rem); line-height: .8; color: rgba(6, 6, 6, .115); }

@media (max-width: 900px) {
  .serve { min-height: 0; display: block; padding: clamp(4.2rem, 9vh, 5.5rem) 0 clamp(6.5rem, 14vh, 8rem); }
  .serve__copy { max-width: 100%; }
    .serve__ghost { font-size: 76vw; right: -.38em; bottom: -.48em; }
}
.paper-italic { font-style: italic; color: var(--paper); }

/* ---- advisers hero: a resolved first screen — promise only ---- */
.page-hero--adviser { min-height: 100vh; min-height: 100svh; padding-top: clamp(2.2rem, 4.5vh, 3.2rem); padding-bottom: clamp(4.4rem, 8.5vh, 5.6rem); }
.page-hero--adviser .hero-in { padding-top: clamp(6.9rem, 14vh, 8.4rem); justify-content: flex-start; }
.page-hero--adviser .page-hero-core { margin-block: 0; transform: none; }
.page-hero--adviser h1 { margin-bottom: clamp(2.3rem, 4.4vh, 2.7rem); }
.page-hero--adviser .page-hero__standfirst { margin-top: 0; }
.page-hero--adviser .page-hero__ctas { margin-top: clamp(1.9rem, 3.6vh, 2.25rem); }
.page-hero--adviser .hero-ghost { bottom: -7vh; right: -5.5vw; color: rgba(217, 10, 14, .14);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 94%); mask-image: linear-gradient(to bottom, #000 76%, transparent 94%); }

/* ================= MY WORKSPACE — a glimpse of the adviser’s own record =================
   Compact strip: short copy left, one paper-like panel right. No controls, no chrome —
   a saved piece, a personal note and a quiet CPD line, on one sheet. */
.workspace { padding: clamp(3rem, 5.5vh, 3.4rem) 0; }
.workspace__grid {
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  column-gap: clamp(2.5rem, calc(.35rem + 5.528vw), 6.5rem); row-gap: 2.4rem; align-items: center;
}
.workspace__copy { max-width: 34rem; }
.workspace__title {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.9rem, calc(.6rem + 1.847vw), 2.5rem); line-height: 1.12; letter-spacing: -.012em;
  margin-top: 1.35rem;
}
.workspace__body { margin-top: 1.4rem; color: #4A463F; font-size: 1.02rem; line-height: 1.78; max-width: 30rem; }

/* the sheet */
.ws-panel {
  position: relative; margin: 0; width: 100%; max-width: 40rem; justify-self: end;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-paper);
  box-shadow:
    0 1px 0 rgba(6, 6, 6, .025),
    0 2px 6px -2px rgba(38, 30, 18, .07),
    0 18px 38px -24px rgba(38, 30, 18, .3);
  padding: clamp(1.35rem, calc(.54rem + 1.325vw), 1.7rem) clamp(1.6rem, calc(.6rem + 1.845vw), 2.4rem) clamp(1.25rem, calc(.5rem + 1.175vw), 1.55rem);
}
/* bookmark: a ribbon tucked over the top edge, deep red, with a notched foot */
.ws-panel__tab {
  position: absolute; top: -1px; right: clamp(1.5rem, calc(.6rem + 1.645vw), 2.2rem);
  width: 13px; height: 40px; display: block;
  background: linear-gradient(180deg, var(--red-deep) 0%, var(--red-lacquer-deep) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%);
  transform-origin: top; transition: transform .9s var(--ease) .35s;
}
.js .ws-panel:not(.in) .ws-panel__tab { transform: scaleY(0); }

.ws-panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-right: 3.2rem; padding-bottom: .95rem; border-bottom: 1px solid var(--line-paper);
}
.ws-panel__brand { font: 700 .6rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: .65rem; }
.ws-panel__brand::before { content: ''; width: 6px; height: 6px; background: var(--red-deep); flex: none; }
.ws-panel__status { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .84rem; letter-spacing: .01em; color: var(--grey); white-space: nowrap; }

.ws-panel__item { padding-top: 1.05rem; }
.ws-panel__label { display: block; font: 600 .58rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--grey); margin-bottom: .62rem; }

/* the saved piece — the strongest text on the sheet */
.ws-panel__title {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.25rem, calc(.5rem + .994vw), 1.55rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance;
}

/* the adviser’s own note — set on the section’s cream, beside a short red rule */
.ws-panel__note {
  margin-top: 1rem; padding: .85rem 1.15rem .9rem 1.2rem;
  background: var(--paper); border-left: 2px solid var(--red-deep);
}
.ws-panel__note .ws-panel__label { margin-bottom: .45rem; }
.ws-panel__note-text { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06rem; line-height: 1.5; color: #2A2723; }

/* the CPD line — quiet, beneath a hairline */
.ws-panel__cpd {
  margin-top: 1.15rem; padding-top: .95rem; border-top: 1px solid var(--line-paper);
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem 1.2rem; flex-wrap: wrap;
}
.ws-panel__cpd .ws-panel__label { margin-bottom: 0; }
.ws-panel__cpd-text { font: 500 .8rem/1.5 var(--sans); letter-spacing: .02em; color: var(--grey); }
.ws-panel__dot { color: var(--red-deep); margin: 0 .45rem; }

/* the sheet settles, then its three parts arrive in order */
.js .ws-panel__item { opacity: 0; transform: translateY(10px); }
.js .ws-panel.in .ws-panel__item { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .ws-panel.in .ws-panel__saved { transition-delay: .3s; }
.js .ws-panel.in .ws-panel__note { transition-delay: .45s; }
.js .ws-panel.in .ws-panel__cpd { transition-delay: .6s; }

@media (max-width: 900px) {
  .workspace { padding: clamp(3rem, 6.5vh, 3.4rem) 0; }
  .workspace__grid { grid-template-columns: 1fr; row-gap: 2.4rem; align-items: start; }
  .workspace__copy { max-width: 36rem; }
  .ws-panel { max-width: none; justify-self: stretch; }
}
@media (max-width: 560px) {
  .ws-panel { padding: 1.4rem 1.3rem 1.3rem; }
  .ws-panel__tab { right: 1.3rem; }
  .ws-panel__head { flex-wrap: wrap; gap: .5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ws-panel__item, .js .ws-panel:not(.in) .ws-panel__tab { opacity: 1; transform: none; transition: none; }
}

/* ================= WORKFLOW STRIP — the oxblood showcase ================= */
.flow-strip { background: var(--red-lacquer-deep); }
.flow-strip__in { min-height: clamp(14.5rem, 26vh, 17rem); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(3rem, 6vh, 4.2rem); padding-bottom: clamp(3rem, 6vh, 4.2rem); }
.flow-strip__eyebrow { font: 600 .68rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(6, 6, 6, .88); display: flex; align-items: center; gap: 1rem; }
.flow-strip__eyebrow::before { content: ''; flex: 0 0 2rem; height: 1px; background: rgba(6, 6, 6, .55); }

/* the route: five acts on one thread */
.flow-strip__steps { list-style: none; position: relative; margin-top: clamp(2.8rem, 5.5vh, 3.6rem); padding-top: 1.9rem; display: grid; grid-template-columns: repeat(5, 1fr); }
.flow-strip__steps::before { content: ''; position: absolute; top: 0; left: 0; right: 20%; height: 1px; background: rgba(6, 6, 6, .26); }
.flow-strip__draw { position: absolute; top: 0; left: 0; right: 20%; height: 1px; background: rgba(6, 6, 6, .92); transform-origin: left; }
.flow-strip__pulse { position: absolute; top: -3.5px; left: 0; width: 8px; height: 8px; background: rgba(6, 6, 6, .95); opacity: 0; pointer-events: none; }
.flow-strip__steps li { position: relative; padding-right: 2rem; }
.flow-strip__steps li i { position: absolute; top: calc(-1.9rem - 3px); left: 0; width: 6px; height: 6px; background: rgba(6, 6, 6, .9); display: block; }
.flow-strip__no { display: block; font: 600 .56rem/1 var(--sans); letter-spacing: .24em; color: rgba(6, 6, 6, .66); }
.flow-strip__stage { display: block; margin-top: .7rem; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, calc(.46rem + .961vw), 1.4rem); line-height: 1.3; letter-spacing: -.005em; color: var(--paper); }
.flow-strip__caps { display: block; margin-top: .65rem; font: 500 .62rem/1.75 var(--sans); letter-spacing: .04em; color: rgba(246, 242, 235, .7); }

/* the pass: one square travels the thread once, burning the line in behind it;
   each node flares as it arrives and its act rises. ~1.2s, then it stops. */
.js .flow-strip__draw { transform: scaleX(0); }
.js .flow-strip__steps li i { transform: scale(0); }
.js .flow-strip__steps li > span { opacity: 0; transform: translateY(12px); }
.flow-strip.is-live .flow-strip__draw { animation: flowDraw 1.15s cubic-bezier(.35, .05, .35, 1) .1s both; }
@keyframes flowDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.flow-strip.is-live .flow-strip__pulse { animation: flowPulse 1.15s cubic-bezier(.35, .05, .35, 1) .1s both; }
@keyframes flowPulse {
  0% { left: 0; opacity: 0; }
  5% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(80% - 4px); opacity: 0; }
}
.flow-strip.is-live .flow-strip__steps li i { animation: flowNode .45s var(--ease) both; }
.flow-strip.is-live .flow-strip__steps li:nth-child(3) i { animation-delay: .12s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(4) i { animation-delay: .4s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(5) i { animation-delay: .67s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(6) i { animation-delay: .95s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(7) i { animation-delay: 1.22s; }
@keyframes flowNode { 0% { transform: scale(0); } 55% { transform: scale(1.6); } 100% { transform: scale(1); } }
.flow-strip.is-live .flow-strip__steps li > span { animation: flowUp .55s var(--ease) both; }
.flow-strip.is-live .flow-strip__steps li:nth-child(3) > span { animation-delay: .17s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(4) > span { animation-delay: .45s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(5) > span { animation-delay: .72s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(6) > span { animation-delay: 1s; }
.flow-strip.is-live .flow-strip__steps li:nth-child(7) > span { animation-delay: 1.27s; }
@keyframes flowUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .flow-strip__in { min-height: 0; }
  .flow-strip__steps { grid-template-columns: 1fr; gap: 1.7rem; padding-top: 0; padding-left: 1.8rem; margin-top: 2.4rem; }
  .flow-strip__steps::before { top: 4px; bottom: 4px; left: 0; right: auto; width: 1px; height: auto; }
  .flow-strip__draw { top: 4px; bottom: 4px; left: 0; right: auto; width: 1px; height: auto; transform-origin: top; }
  .flow-strip.is-live .flow-strip__draw { animation: flowDrawY 1.15s cubic-bezier(.35, .05, .35, 1) .1s both; }
  @keyframes flowDrawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .flow-strip__pulse { display: none; }
  .flow-strip__steps li { padding-right: 0; }
  .flow-strip__steps li i { top: 6px; left: calc(-1.8rem - 3px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .flow-strip__draw { transform: none; animation: none; }
  .js .flow-strip__pulse { animation: none; opacity: 0; }
  .js .flow-strip__steps li i { transform: none; animation: none; }
  .js .flow-strip__steps li > span { opacity: 1; transform: none; animation: none; }
}

/* ---- landing audit: fixes + elevations ---- */
.m-br { display: none; }
.to-top { font: 600 .62rem/1 var(--sans); font-size: 11px; /* label floor only: at 12px the footer row wraps between 1440 and 1447px */ letter-spacing: .24em; text-transform: uppercase; color: var(--grey-2); text-decoration: none; display: inline-flex; gap: .6rem; align-items: baseline; transition: color .4s var(--ease); }
.to-top span { transition: transform .45s var(--ease); }
.to-top:hover { color: var(--paper); }
.to-top:hover span { transform: translateY(-4px); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; }
.site-footer .hero-ghost { color: rgba(217, 10, 14, .08); }

/* chapter tick: out rises, in settles */
.chapter .ch-num, .chapter .ch-name { transition: opacity .24s var(--ease), transform .24s var(--ease); }
.chapter.swap .ch-num, .chapter.swap .ch-name { opacity: 0; transform: translateY(-7px); }

@media (max-width: 700px) {
  .head-bar { max-height: 6.6rem; gap: .35rem 1rem; padding: .6rem 0; }
  .m-br { display: block; }
  .eyebrow .eyebrow-txt { display: inline-block; }
}
@media (max-width: 900px) {
  .chain { flex-wrap: wrap; justify-content: flex-start; row-gap: 1.05rem; }
  .chain__break { flex: 0 0 1.5rem; min-width: 1.5rem; margin: 0 .8rem; }
}
@media (max-width: 700px) {
  /* the transition bar wraps to three lines on small screens — clear it */
  .hero .hero-in { padding-top: 11.75rem; }
}

/* ---- advisers audit ---- */
/* 1 · never split the ASK Tony eyebrow mid-name */
.eyebrow--red { white-space: nowrap; }

/* 2 · case-file scene: furniture line anchored to a baseline, ghost a touch more present */
/* ---- institutions audit ---- */
/* the outcome select's longest option was forcing the brief section wide on mobile */
.field select { width: 100%; min-width: 0; max-width: 100%; }
.final-cta__grid > *, .form-grid > *, .forms-duo > * { min-width: 0; }

/* ---- press-desk audit: the sheet prints clean ---- */
@media print {
  html, body { background: var(--paper) !important; }
  .site-head, #progress, .grain, .cursor-sq, .cursor-light, .chapter, .index-overlay, .skip-link, .inside__ghost, .hero-ghost { display: none !important; }
  .press-desk { min-height: 0; padding-top: 2rem; }
  .site-footer { background: transparent; color: #111; }
}

/* ================= ASK TONY — difference, road, proof ================= */
.ask { position: relative; overflow: hidden; }
.js .ask__ghost { opacity: 0; transition: opacity 2s var(--ease) .4s; }
.ask.in .ask__ghost { opacity: 1; }
.ask__ghost { position: absolute; top: -6%; right: -3%; z-index: 0; pointer-events: none; user-select: none; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(15rem, calc(.6rem + 27.245vw), 28rem); line-height: .8; color: rgba(6, 6, 6, .045); }
.ask .wrap { position: relative; z-index: 1; }

.ask-diff h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, calc(.5rem + 3.971vw), 4.2rem); line-height: 1.06; letter-spacing: -.014em; color: var(--ink); margin-top: 1.9rem; }
.ask-diff__body { margin-top: 1.8rem; max-width: 35rem; font-size: 1.05rem; line-height: 1.8; color: #4A463F; }
.ask-diff__body strong { color: var(--red-deep); font-weight: 600; }

.ask-label { font: 600 .62rem/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--red-deep); }
.ask-label--grey { color: #8A857B; }

/* 02 · the road */
.ask-road { margin-top: clamp(3.6rem, 7.5vh, 5.2rem); }
.ask-road__no { display: block; margin-top: 1rem; font: 600 .56rem/1 var(--sans); letter-spacing: .22em; color: #8A857B; }
.ask-road__stage { display: block; margin-top: .5rem; font: 700 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #171512; }
.ask-road__desc { display: block; margin-top: .6rem; font-size: .8rem; line-height: 1.7; color: #6E6A62; }



/* 03 · the proof */

@media (max-width: 900px) {
  .ask__ghost { font-size: 60vw; top: -3%; right: -8%; }
}

/* ---- the road: one pass, icons ignite as the line reaches them ---- */
.ask-road__steps { list-style: none; position: relative; margin-top: 2.2rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; }
.ask-road__steps::before { content: ''; position: absolute; top: 19px; left: 0; right: 0; height: 1px; background: #DCD5C3; }
.ask-road__draw { position: absolute; top: 19px; left: 0; width: 100%; height: 1px; background: var(--red-deep); }
.ask-road__draw::after { content: ''; position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-deep); }
.js .ask-road__draw { width: 0; }
.ask-road.in .ask-road__draw { animation: roadTravel 2.8s cubic-bezier(.42, .05, .25, 1) .35s both; }
@keyframes roadTravel { from { width: 0; } to { width: 100%; } }
.ask-road__steps li { position: relative; }
.ask-road__steps li i { position: relative; z-index: 1; display: block; width: 30px; height: 30px; padding: 4px; margin-left: -4px; background: var(--paper); color: #171512; transition: color .35s var(--ease); }
.ask-road__steps li i svg { width: 100%; height: 100%; }
.ask-road__steps li i .acc, .ask-road__steps li i .accf { transition: stroke .45s var(--ease), fill .45s var(--ease); }
.ask-exit__icon .acc { stroke: var(--red-deep); }
.ask-road.in .ask-road__steps li:nth-child(2) i .acc { stroke: var(--red-deep); transition-delay: .55s; }
.ask-road.in .ask-road__steps li:nth-child(2) i .accf { fill: var(--red-deep); transition-delay: .55s; }
.ask-road.in .ask-road__steps li:nth-child(3) i .acc { stroke: var(--red-deep); transition-delay: 1.0s; }
.ask-road.in .ask-road__steps li:nth-child(3) i .accf { fill: var(--red-deep); transition-delay: 1.0s; }
.ask-road.in .ask-road__steps li:nth-child(4) i .acc { stroke: var(--red-deep); transition-delay: 1.5s; }
.ask-road.in .ask-road__steps li:nth-child(4) i .accf { fill: var(--red-deep); transition-delay: 1.5s; }
.ask-road.in .ask-road__steps li:nth-child(5) i .acc { stroke: var(--red-deep); transition-delay: 1.95s; }
.ask-road.in .ask-road__steps li:nth-child(5) i .accf { fill: var(--red-deep); transition-delay: 1.95s; }
.ask-road.in .ask-road__steps li:nth-child(6) i .acc { stroke: var(--red-deep); transition-delay: 2.4s; }
.ask-road.in .ask-road__steps li:nth-child(6) i .accf { fill: var(--red-deep); transition-delay: 2.4s; }
.ask-road.in .ask-road__steps li:nth-child(7) i .acc { stroke: var(--red-deep); transition-delay: 2.85s; }
.ask-road.in .ask-road__steps li:nth-child(7) i .accf { fill: var(--red-deep); transition-delay: 2.85s; }
.ask-road__no { display: block; margin-top: 1rem; font: 600 .56rem/1 var(--sans); letter-spacing: .22em; color: #8A857B; }
.ask-road__stage { display: block; margin-top: .5rem; font: 700 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #171512; }
.ask-road__desc { display: block; margin-top: .6rem; font-size: .8rem; line-height: 1.7; color: #6E6A62; }
.js .ask-road__steps li { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.ask-road.in .ask-road__steps li { opacity: 1; transform: none; }
.ask-road.in .ask-road__steps li:nth-child(2) { transition-delay: .2s; }
.ask-road.in .ask-road__steps li:nth-child(3) { transition-delay: .34s; }
.ask-road.in .ask-road__steps li:nth-child(4) { transition-delay: .48s; }
.ask-road.in .ask-road__steps li:nth-child(5) { transition-delay: .62s; }
.ask-road.in .ask-road__steps li:nth-child(6) { transition-delay: .76s; }
.ask-road.in .ask-road__steps li:nth-child(7) { transition-delay: .9s; }

/* exits: label column + two open exits, reference placement */
.ask-exits { margin-top: 2.9rem; padding-top: 1.9rem; border-top: 1px solid #DCD5C3; display: grid; grid-template-columns: minmax(13rem, 20rem) 1fr 1fr; gap: 1.5rem 2.5rem; align-items: start; }
.ask-exit { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; align-items: center; max-width: 24rem; }
.ask-exit__icon { width: 1.5rem; height: 1.5rem; color: #171512; }
.ask-exit__title { font: 700 .74rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #171512; }
.ask-exit__desc { grid-column: 2; font-size: .86rem; line-height: 1.65; color: #6E6A62; }

@media (max-width: 900px) {
  .ask-road__steps { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 2rem; }
  .ask-road__steps::before { top: 4px; bottom: 4px; left: 11px; right: auto; width: 1px; height: auto; }
  .ask-road__draw { top: 4px; bottom: auto; left: 11px; width: 1px; height: calc(100% - 8px); }
  .ask-road__draw::after { right: auto; top: auto; bottom: -4px; left: -3.5px; }
  .js .ask-road__draw { width: 1px; height: 0; }
  .ask-road.in .ask-road__draw { animation-name: roadTravelY; }
  @keyframes roadTravelY { from { height: 0; } to { height: calc(100% - 8px); } }
  .ask-road__steps li i { position: absolute; left: -2rem; top: 1px; width: 22px; height: 22px; padding: 3px; margin-left: 0; }
  .ask-road__no { margin-top: 0; }
  .ask-exits { grid-template-columns: 1fr; }
  .ask-exit { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ask-road__draw { width: 100%; height: auto; animation: none; }
  .js .ask-road__steps li { opacity: 1; transform: none; transition: none; }
  .ask-road__steps li i .acc { stroke: var(--red-deep) !important; transition-delay: 0s !important; }
  .ask-road__steps li i .accf { fill: var(--red-deep) !important; transition-delay: 0s !important; }
}
.person__email { display: block; width: fit-content; margin-top: .65rem; font: 500 .72rem/1.6 var(--sans); letter-spacing: .04em; color: var(--grey); text-decoration: none; border-bottom: 1px solid transparent; transition: color .35s var(--ease), border-color .35s var(--ease); }
.person__email:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); }

/* selected-work provenance line above the dossier tabs */
.case-provenance { font: 600 .62rem/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--grey-2); margin-top: clamp(1.2rem, 2.5vh, 1.8rem); }
.case-provenance + .case-tabs { margin-top: .9rem; }

/* ============================================================
   TOUCH TARGETS — every small interactive element gets an invisible,
   centred hit area of at least 44×44px. The pseudo-element is absolutely
   positioned so rendered text size, position and spacing are unchanged.
   ============================================================ */
.head-bar a, .head-nav a, .menu-toggle, .brand, .person__email, .fcol a, .press-facts li a,
.press-contact__cta, .press-contact__email, .link-quiet, .accordion__panel .ab__link, .to-top,
.transition-bar a, .prose a, .legal-page a, .press-desk__intro a, .site-footer__bottom a, .pane__micro, .consent a {
  position: relative;
}
.head-bar a::before, .head-nav a::before, .menu-toggle::before, .brand::before, .person__email::before,
.fcol a::before, .press-facts li a::before, .press-contact__cta::before, .press-contact__email::before,
.link-quiet::before, .accordion__panel .ab__link::before, .to-top::before, .transition-bar a::before,
.prose a::before, .legal-page a::before, .press-desk__intro a::before, .site-footer__bottom a::before, .pane__micro::before, .consent a::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
  background: transparent;
}

/* ============================================================
   SHORT VIEWPORTS — keep eyebrow, headline and primary CTA on the first
   screen. Height-gated only: nothing changes at 800px tall or above.
   ============================================================ */
/* short desktop/laptop windows (e.g. 1366×650): trim the interior hero's head-space */
@media (max-height: 700px) and (min-width: 700px) {
  .page-hero .hero-in { padding-top: 4rem; }
}
/* landscape phones (e.g. 844×390, 932×430): compact interior hero */
@media (max-height: 500px) and (orientation: landscape) {
  .page-hero, .page-hero--adviser { padding-top: 0; padding-bottom: 1.5rem; }
  .page-hero .hero-in, .page-hero--adviser .hero-in { padding-top: 4.6rem; }
  .page-hero-core { transform: none; }
  .page-hero h1 { font-size: clamp(2.2rem, 9.2vh, 6.2rem); margin-top: 1rem; }
  .page-hero--adviser h1 { margin-bottom: 1rem; }
  .page-hero__support { margin-top: .8rem; }
  .page-hero__standfirst { font-size: .92rem; line-height: 1.5; max-width: 52rem; }
  .page-hero__ctas, .page-hero--adviser .page-hero__ctas { margin-top: 1.1rem; }
}

/* ============================================================
   INTERIOR HERO EYEBROWS — one composed line on desktop; a shorter,
   deliberately set line on phones. The eyebrow copy is one flex item
   (.eyebrow-txt) so a status span can never float away from the rest.
   ============================================================ */
.eyebrow-mob { display: none; }
@media (max-width: 700px) {
  .page-hero .eyebrow .eyebrow-desk { display: none; }
  .page-hero .eyebrow .eyebrow-mob { display: inline; }
  /* advisers: the group sits a shade higher on phones */
  .page-hero--adviser .hero-in { padding-top: clamp(5.9rem, 12vh, 7.4rem); }
  /* institutions: the centred group rides a shade higher on phones */
  .page-hero:not(.page-hero--adviser) .page-hero-core { transform: translateY(-4vh); }
}
/* phones: "T3A Adviser · Opening February 2027" will not fit one line, so it is set as
   two — brand, then the red status — with the rule aligned to the first line */
@media (max-width: 480px) {
  .page-hero--adviser .eyebrow { align-items: flex-start; }
  .page-hero--adviser .eyebrow .rule { margin-top: calc(.8em - .5px); }
  .page-hero--adviser .eyebrow .eyebrow-sep { display: none; }
  .page-hero--adviser .eyebrow .eyebrow--red { display: block; }
}

/* ---- ASK Tony: commercial footnote — small, quiet, unequivocal ---- */
.ask-diff__avail {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .75rem;
  font: 600 .6rem/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--grey);
}
.ask-diff__avail::before { content: ''; width: 4px; height: 4px; background: var(--red-deep); flex: none; }

/* ASK Tony eyebrow: one unit, and on phones "Governed intelligence" — the word
   "technical" is desktop-only so the line wraps neatly beside the rule */
@media (max-width: 700px) {
  .ask-diff .eyebrow .eyebrow-desk { display: none; }
  /* when the line breaks beside the rule, the rule holds to the first line */
  .ask-diff .eyebrow { align-items: flex-start; }
  .ask-diff .eyebrow .rule { margin-top: calc(.8em - .5px); }
  .ask-diff__avail { align-items: flex-start; }
  .ask-diff__avail::before { margin-top: calc(.8em - 2px); }
}

/* ============================================================
   CONTENTS STRIP (adviser) — the page's own index, once, then gone.
   Sits exactly at the foot of the hero: turn the page, see the contents.
   ============================================================ */
.contents {
  position: relative; z-index: 2;
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--line-dark-2); border-bottom: 1px solid var(--line-dark-2);
}
.contents__in {
  display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 3.4rem);
  min-height: 3.9rem; padding-top: .9rem; padding-bottom: .9rem;
}
.contents__label {
  flex: none; display: flex; align-items: center; gap: .9rem;
  font: 600 .6rem/1 var(--sans); font-size: var(--label-size-dim); letter-spacing: .3em; text-transform: uppercase;
  color: var(--grey);
}
.contents__rule { flex: 0 0 2rem; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .15s; }
.contents.in .contents__rule { transform: scaleX(1); }
.contents__list {
  list-style: none; display: flex; align-items: center; gap: clamp(1.3rem, 2.3vw, 2.8rem);
  margin-left: auto;
}
.contents__link {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font: 600 .62rem/1 var(--sans); font-size: var(--label-size); letter-spacing: .22em; text-transform: uppercase;
  color: var(--grey-2); text-decoration: none; white-space: nowrap;
  position: relative; padding: .55rem 0;
  transition: color .45s var(--ease);
}
.contents__n { font-size: .84em; letter-spacing: .2em; color: var(--grey); transition: color .45s var(--ease); }
.contents__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .22rem; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.contents__link:hover, .contents__link:focus-visible { color: var(--paper); }
.contents__link:hover .contents__n, .contents__link:focus-visible .contents__n { color: var(--red); }
.contents__link:hover::after, .contents__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* the destination the page exists for is set a half-step brighter */
.contents__link--red .contents__t { color: var(--paper); }
.contents__link--red .contents__n { color: var(--red); }
/* touch targets, as elsewhere */
.contents__link::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); background: transparent;
}

/* arrival: the label settles, then each entry rises in sequence */
.js .contents__label, .js .contents__list li { opacity: 0; transform: translateY(10px); }
.js .contents.in .contents__label, .js .contents.in .contents__list li {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .contents.in .contents__list li:nth-child(1) { transition-delay: .14s; }
.js .contents.in .contents__list li:nth-child(2) { transition-delay: .2s; }
.js .contents.in .contents__list li:nth-child(3) { transition-delay: .26s; }
.js .contents.in .contents__list li:nth-child(4) { transition-delay: .32s; }
.js .contents.in .contents__list li:nth-child(5) { transition-delay: .38s; }
.js .contents.in .contents__list li:nth-child(6) { transition-delay: .44s; }
.js .contents.in .contents__list li:nth-child(7) { transition-delay: .5s; }

@media (max-width: 1100px) {
  .contents__list { gap: clamp(1.1rem, 2vw, 2rem); }
  .contents__link { letter-spacing: .18em; }
}
@media (max-width: 900px) {
  /* a rail: label above, entries glide horizontally, the far edge dissolves to hint at more */
  .contents__in { flex-direction: column; align-items: stretch; gap: .55rem; padding-top: 1.05rem; padding-bottom: .55rem; }
  .contents__list {
    margin-left: 0; margin-right: calc(-1 * var(--gutter)); padding-right: calc(var(--gutter) + 2.5rem);
    gap: 1.6rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 99%);
            mask-image: linear-gradient(90deg, #000 84%, transparent 99%);
  }
  .contents__list::-webkit-scrollbar { display: none; }
  .contents__list li { scroll-snap-align: start; flex: none; }
}

/* ============================================================
   CHAPTER NAVIGATION (adviser) — the marker becomes the index.
   The nav is a fixed stacking context, so a difference blend on the marker
   would only ever blend against the nav's own transparent backdrop and never
   invert over paper. Instead the JS samples the surface beneath the marker
   (as the header does) and sets .chapter--on-paper, which swaps the marker to
   brand ink / T3A red on paper. The panel that rises from it stays a solid
   ink plate so red can be used inside regardless of what lies beneath.
   ============================================================ */
.chapter--nav { display: block; mix-blend-mode: normal; pointer-events: auto; }
.chapter__cur {
  display: flex; align-items: center; gap: .9rem;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: .6rem 0 0; cursor: pointer; text-align: left;
  -webkit-appearance: none; appearance: none;
  mix-blend-mode: normal;
  transition: color .45s var(--ease);
}
.chapter--nav .ch-num, .chapter--nav .ch-name { transition: opacity .24s var(--ease), transform .24s var(--ease), color .45s var(--ease); }
.chapter__cur .ch-sep { transition: width .5s var(--ease), background-color .5s var(--ease); }
.chapter--nav:hover .chapter__cur .ch-sep, .chapter--nav.is-open .chapter__cur .ch-sep { width: 3.2rem; background: rgba(255, 255, 255, .7); }
.chapter__cur:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.chapter__hint {
  color: rgba(255, 255, 255, .42); font-weight: 600;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .45s var(--ease);
}
/* over a paper section: chapter number in the paper-safe T3A red, name in ink, hairline in the paper rule tone */
.chapter--nav.chapter--on-paper { color: var(--grey); }
.chapter--nav.chapter--on-paper .ch-num { color: var(--red-deep); }
.chapter--nav.chapter--on-paper .ch-name { color: #171512; }
.chapter--nav.chapter--on-paper .ch-sep { background: var(--line-paper-2); }
.chapter--nav.chapter--on-paper:hover .chapter__cur .ch-sep, .chapter--nav.chapter--on-paper.is-open .chapter__cur .ch-sep { background: var(--red-deep); }
.chapter--nav.chapter--on-paper .chapter__hint { color: var(--grey); }
.chapter--nav.chapter--on-paper .chapter__cur:focus-visible { outline-color: var(--red-deep); }
.chapter__hint::before { content: ''; display: inline-block; width: 3px; height: 3px; background: currentColor; margin: 0 .9rem 0 0; vertical-align: middle; transform: translateY(-1px); }
.chapter--nav:hover .chapter__hint { opacity: 1; transform: none; }
.chapter--nav.is-open .chapter__hint { opacity: 0; transform: translateX(-6px); transition-duration: .25s; }

.chapter__list {
  position: absolute; left: 0; bottom: 100%; z-index: 2;
  list-style: none; min-width: 15.5rem; margin: 0 0 .55rem;
  padding: .55rem 0 .75rem;
  background: var(--ink); border: 1px solid var(--line-dark);
  clip-path: inset(100% 0 0 0); visibility: hidden;
  transition: clip-path .6s var(--ease), visibility 0s .6s;
}
.chapter--nav.is-open .chapter__list { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.chapter__list::before {
  content: 'Chapters'; display: block; padding: .5rem 1.3rem .85rem;
  font: 700 .52rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--grey);
  border-bottom: 1px solid var(--line-dark-2); margin-bottom: .55rem;
}
.chapter__link {
  position: relative; display: flex; align-items: baseline; gap: .95rem;
  padding: .48rem 1.3rem; text-decoration: none;
  font: 600 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--grey-2);
  transition: color .4s var(--ease);
}
.chapter__n { flex: 0 0 1.35rem; color: var(--grey); font-weight: 700; transition: color .4s var(--ease); }
.chapter__t { display: inline-block; transition: transform .45s var(--ease), color .4s var(--ease); }
.chapter__link:hover, .chapter__link:focus-visible { color: var(--paper); outline: none; }
.chapter__link:hover .chapter__t, .chapter__link:focus-visible .chapter__t { transform: translateX(4px); }
.chapter__link:focus-visible .chapter__n { color: var(--red); }
.chapter__link[aria-current] { color: var(--paper); }
.chapter__link[aria-current] .chapter__n { color: var(--red); }
/* the current chapter carries a red hairline in the gutter */
.chapter__link::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--red);
  transform: translateY(-50%); transition: height .4s var(--ease);
}
.chapter__link[aria-current]::after { height: .95rem; }

/* entries rise in sequence as the plate opens; they leave together */
.chapter__list li { opacity: 0; transform: translateY(7px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.chapter--nav.is-open .chapter__list li { opacity: 1; transform: none; transition-duration: .55s; }
.chapter--nav.is-open .chapter__list li:nth-child(1) { transition-delay: .1s; }
.chapter--nav.is-open .chapter__list li:nth-child(2) { transition-delay: .135s; }
.chapter--nav.is-open .chapter__list li:nth-child(3) { transition-delay: .17s; }
.chapter--nav.is-open .chapter__list li:nth-child(4) { transition-delay: .205s; }
.chapter--nav.is-open .chapter__list li:nth-child(5) { transition-delay: .24s; }
.chapter--nav.is-open .chapter__list li:nth-child(6) { transition-delay: .275s; }
.chapter--nav.is-open .chapter__list li:nth-child(7) { transition-delay: .31s; }
.chapter--nav.is-open .chapter__list li:nth-child(8) { transition-delay: .345s; }

/* ============================================================
   MOBILE PILL (adviser) — one route to the Preview Edition, present from the
   moment the hero leaves until the form arrives. Square-cornered like every
   other button on the site; it flips ink/paper to sit on whatever is beneath.
   ============================================================ */
.pill-cta {
  position: fixed; left: 50%; bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px)); z-index: 850;
  display: none; align-items: center; gap: 1rem;
  padding: 1.05rem 1.45rem 1.05rem 1.6rem;
  font: 600 .66rem/1 var(--sans); font-size: var(--label-size); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--paper); border: 1px solid rgba(6, 6, 6, .1);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .12);
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform .75s var(--ease), opacity .6s var(--ease), background-color .55s var(--ease), color .55s var(--ease), border-color .55s var(--ease);
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
body.pill-on .pill-cta { transform: translate(-50%, 0); opacity: 1; }
body.pill-ink .pill-cta { color: var(--paper); background: var(--ink); border-color: var(--line-dark); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .85); }
body.idx-open .pill-cta { transform: translate(-50%, 140%); opacity: 0; }
.pill-cta__arr { color: var(--red); transition: transform .45s var(--ease); }
.pill-cta:hover .pill-cta__arr, .pill-cta:active .pill-cta__arr { transform: translateX(5px); }
.pill-cta:active { transform: translate(-50%, 0) scale(.985); transition-duration: .15s; }
.pill-cta:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (max-width: 900px) {
  .pill-cta { display: inline-flex; }
}
@media (max-width: 340px) {
  .pill-cta { padding: .95rem 1.15rem .95rem 1.3rem; letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .contents__label, .js .contents__list li { opacity: 1; transform: none; }
  .contents__rule { transform: scaleX(1); }
  .chapter__list li { opacity: 1; transform: none; }
  .chapter__list { clip-path: none; opacity: 0; transition: opacity .01ms, visibility 0s .01ms; }
  .chapter--nav.is-open .chapter__list { opacity: 1; }
}
@media (max-width: 900px) {
  .chapter--nav { display: none; }
}