/* ══════════════════════════════════════════════════════════════
   TALENT CAPITAL — an FDN Capital Partners platform
   Type: INTER, all roles, display weight 600 — the FDN family
   face since 2026-09-02 (client: "match the font of FDN").
   Layout language: the GateQ editorial system (Aery-derived) —
   hairline rows instead of cards, split ink/light canvas,
   square corners, the .glow halo.
   Accent: YELLOW, held to the 10% of 60/30/10 (client, 2026-09-04).
   That budget is why headings are white/near-black and the yellow
   lands on single words, numerals, rules and one fill.
   Retheme = change the four --accent* values, nothing else.
   ══════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:        #FFFFFF;
  --bg-soft:   #F6F6F8;
  --bg-ink:    #0A0A0B;   /* FDN's exact canvas */
  --bg-ink-2:  #101114;

  --txt-hi:    #121213;   /* headings on light */
  --txt:       #5A5A66;   /* body on light */
  --txt-dim:   #6B6B78;   /* micro-labels, captions — 5.2:1 on white */
  --txt-inv:   #F4F8FB;   /* headings on ink */
  --txt-inv-b: #D8DDE2;   /* body on ink */

  --line:        #E2E2E9;
  --line-ink:    rgba(244,248,251,.14);
  --line-bright: rgba(244,248,251,.30);

  /* The accent. Yellow reads at full strength on ink; on white it must
     drop to the deep ochre or it fails contrast as text. */
  --accent:      #FFD400;   /* on ink */
  --accent-deep: #7A5C00;   /* on light — 6.2:1 as text, passes AA */
  --accent-hov:  #FFE566;
  --accent-glow: rgba(255,212,0,.32);
  --accent-on:   #0A0A0B;   /* text sitting ON a yellow fill */

  /* Inter across every role, exactly as the FDN site resolves them. */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono:    'Inter', system-ui, sans-serif;
  --font-base:    'Inter', system-ui, sans-serif;

  --r: 0;   /* square everything — frames AND buttons */

  --gutter: clamp(20px, 5.5vw, 70px);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg-ink); }

body{
  font-family: var(--font-base);
  color: var(--txt);
  font-size: clamp(.94rem, 1.1vw, 1rem);
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

/* overflow-x:hidden on body silently kills page scrolling — clip the wrapper. */
.wrap{ overflow-x: clip; position: relative; background: var(--bg); }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ══════════════════ LAYOUT ══════════════════ */

.container{
  width:100%; max-width:1480px; margin-inline:auto;
  padding-inline: var(--gutter);
  position:relative; z-index:1;
}

.sec{ position:relative; padding-block: clamp(72px, 11.7vw, 150px); }
.sec--tight{ padding-block: clamp(56px, 7.8vw, 100px); }

.slab--ink{
  background: var(--bg-ink);
  color: var(--txt-inv-b);
  position: relative;
}
.slab--ink-2{ background: var(--bg-ink-2); }

/* Grain lives only on ink. */
.slab--ink::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.18; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ══════════════════ TYPE ══════════════════ */
/* Inter, display weight 600 — the FDN setting. Inter is a lower-contrast
   face than the Space Grotesk this replaced, so the tracking tightens to
   match FDN (-.028em on majors, -.032em on the hero).
   HEADINGS ARE NOT ACCENT. A 4rem heading in yellow is a field of colour,
   not a 10% highlight — so headings run white on ink / near-black on light
   and the yellow lands on the <em> word inside them. */

.h-hero{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.9rem, 7.6vw, 6.4rem);
  line-height: .96; letter-spacing: -.032em;
  color: var(--txt-inv); max-width: 12ch;
}
.h-hero em{ font-style: normal; color: var(--accent); }

.h-sec{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 4.45vw, 3.55rem);
  line-height: 1.0; letter-spacing: -.028em;
  color: var(--txt-hi); max-width: 20ch;
}
.on-ink .h-sec, .h-sec--inv{ color: var(--txt-inv); }
.h-sec em{ font-style: normal; color: var(--accent-deep); }
.on-ink .h-sec em, .h-sec--inv em{ color: var(--accent); }

.kicker{
  font-family: var(--font-mono); font-weight: 600;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: .6em;
  margin-bottom: 28px;
}
.on-ink .kicker{ color: var(--accent); }

.sechead{ margin-bottom: clamp(34px, 4.5vw, 60px); }

.h-major{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  line-height: .98; letter-spacing: -.028em;
  color: var(--txt-hi); max-width: 18ch;
}
.on-ink .h-major{ color: var(--txt-inv); }
.h-major em{ font-style: normal; color: var(--accent-deep); }
.on-ink .h-major em{ font-style: normal; color: var(--accent); }
.h-major--wide{ max-width: 26ch; }

.h-sub{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1.14; letter-spacing: -.022em;
  color: var(--txt); max-width: 30ch; margin-top: 18px;
}
.on-ink .h-sub{ color: var(--txt-inv-b); }
.h-sub--wide{ max-width: 42ch; }

.lede{
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.55; font-weight: 400;
  color: var(--txt); max-width: 60ch;
}
.on-ink .lede{ color: var(--txt-inv-b); }

.statement{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.45rem, 2.9vw, 2.4rem);
  line-height: 1.15; letter-spacing: -.018em;
  color: var(--txt-hi); max-width: 26ch;
}
.on-ink .statement{ color: var(--txt-inv); }
.statement em{ font-style: normal; color: var(--accent-deep); }
.on-ink .statement em{ color: var(--accent); }
.statement--accent{ color: var(--accent-deep); }
.on-ink .statement--accent{ color: var(--accent); }
.statement--big{
  font-size: clamp(1.9rem, 4.4vw, 3.7rem); line-height: 1.04;
  letter-spacing: -.022em; max-width: 22ch;
}

.note-mono{
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-dim);
}
.on-ink .note-mono{ color: var(--txt-inv-b); opacity: .7; }

.stack > * + *{ margin-top: 18px; }

.arr{ color: var(--accent-deep); font-family: var(--font-mono); }
.on-ink .arr{ color: var(--accent); }

/* ══════════════════ BUTTONS ══════════════════ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.92rem, 1.1vw, 1rem); letter-spacing: -.01em;
  padding: 18px 34px; border-radius: var(--r);
  border: 1px solid transparent;
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
  position: relative; isolation: isolate;
}
.btn__arrow{ transition: transform .28s ease; }
.btn:hover .btn__arrow{ transform: translateX(4px); }

.btn--primary{ background: var(--accent); color: var(--accent-on); }
.btn--primary:hover{ background: var(--accent-hov); }

.btn--ghost{ border-color: var(--line); color: var(--txt-hi); }
.btn--ghost:hover{ border-color: var(--txt-hi); }
.on-ink .btn--ghost{ border-color: var(--line-ink); color: var(--txt-inv); }
.on-ink .btn--ghost:hover{ border-color: var(--txt-inv); }

/* FDN's signature halo, retinted to the family accent. Protected treatment. */
.glow::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius: var(--r);
  opacity:0; transition: opacity .35s ease;
  box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 30px -6px var(--accent-glow),
              0 0 46px -10px var(--accent-glow);
}
.glow:hover::after{ opacity:1; }

.cta-set{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ══════════════════ HEADER ══════════════════ */

.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding-block: 18px;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
.hdr__inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }

.hdr--solid{
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 12px;
}

.brand{ display:inline-flex; align-items:baseline; gap:12px; min-width:0; }
.brand__mark{
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; letter-spacing: -.02em; color: var(--txt-inv);
  transition: color .3s ease; white-space: nowrap;
}
.brand__mark b{ font-weight:600; color: var(--accent); }
.hdr--solid .brand__mark{ color: var(--txt-hi); }
.hdr--solid .brand__mark b{ color: var(--accent-deep); }
.brand__by{
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-inv-b); opacity: .6;
  transition: color .3s ease; white-space: nowrap;
}
.hdr--solid .brand__by{ color: var(--txt-dim); opacity: 1; }
@media (max-width: 560px){ .brand__by{ display: none; } }

/* logo drop-in: assets/img/logo.svg takes over automatically when it exists */
.brand__img{ height: 30px; width:auto; display:none; }
.brand.has-logo .brand__img{ display:block; }
.brand.has-logo .brand__mark{ display:none; }

.nav{ display:none; align-items:center; gap: 4px; }
@media (min-width: 1060px){ .nav{ display:flex; } }

.nav__link{
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em; color: var(--txt-inv); opacity:.72;
  padding: 10px 16px; border-radius: var(--r);
  transition: opacity .25s ease, background .25s ease, color .25s ease;
}
.nav__link:hover{ opacity:1; background: rgba(244,248,251,.07); }
.hdr--solid .nav__link{ color: var(--txt-hi); opacity:.66; }
.hdr--solid .nav__link:hover{ opacity:1; background: var(--bg-soft); }

.hdr .btn{ padding: 12px 22px; font-size: .9rem; }
.hdr__cta{ display:none; }
@media (min-width: 720px){ .hdr__cta{ display:inline-flex; } }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 11px; border-radius: var(--r);
}
@media (min-width: 1060px){ .burger{ display:none; } }
.burger span{ display:block; height:1.5px; background: var(--txt-inv); transition: background .3s ease; }
.hdr--solid .burger span{ background: var(--txt-hi); }

.mobmenu{
  position: fixed; inset: 0; z-index: 80;
  background: var(--bg-ink); color: var(--txt-inv);
  display:flex; flex-direction:column; justify-content:center; gap: 6px;
  padding: var(--gutter);
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
}
.mobmenu.is-open{ opacity:1; visibility:visible; }
.mobmenu__link{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.6rem, 7vw, 2.6rem); letter-spacing:-.02em; line-height:1.5;
  border-bottom: 1px solid var(--line-ink); padding-block: 12px;
}
.mobmenu__close{
  position:absolute; top: var(--gutter); right: var(--gutter);
  font-size: 1.6rem; color: var(--txt-inv); line-height:1;
}

/* ══════════════════ 00. HERO ══════════════════ */
/* No photography yet — the ground is built from the accent bloom + grain.
   When the Seedance hero art arrives it slots into .hero__art (see
   .claude/talent-image-prompts.md); every layer above it already assumes it. */

.hero{
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(140px, 18vh, 210px);
  padding-bottom: clamp(48px, 6vw, 84px);
}
.hero__art{
  position:absolute; inset:0; z-index:0; background-size: cover;
  background-position: center; filter: grayscale(1) brightness(.34) contrast(1.06);
}
.hero__bloom{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 72% at 82% 78%, rgba(255,212,0,.16), transparent 62%),
    radial-gradient(42% 52% at 12% 8%, rgba(255,212,0,.07), transparent 60%),
    linear-gradient(180deg, rgba(10,10,11,.5), rgba(10,10,11,0) 30%, rgba(10,10,11,0) 62%, rgba(10,10,11,.72));
}
.hero__rule{
  position:absolute; left:0; right:0; bottom: clamp(118px, 14vh, 168px);
  height:1px; background: var(--line-ink); z-index:0; pointer-events:none;
}

.hero__grid{ display:grid; gap: clamp(36px, 5vw, 64px); width:100%; }
@media (min-width: 1000px){
  .hero__grid{ grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); align-items: end; }
}

.hero__lede{ margin-top: 30px; max-width: 52ch; }
.hero__cta{ margin-top: clamp(28px, 3.4vw, 44px); }

/* the three-beat progression — career / audience / influence */
.hero__say{ display:grid; gap: 8px; padding-bottom: 6px; }
.hero__say p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem); letter-spacing: -.012em;
  color: var(--txt-inv-b); line-height: 1.3;
}
.hero__say p em{ font-style:normal; color: var(--accent); }
@media (min-width: 1000px){
  .hero__say{ border-left: 1px solid var(--line-ink); padding-left: 26px; }
}

/* mini marquee riding the hero foot */
.hmq{ overflow:hidden; margin-top: clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hmq__track{ display:flex; width:max-content; gap:0; animation: mqscroll 26s linear infinite; }
.hmq__copy{
  display:flex; align-items:center; gap:.9em; padding-right:.9em;
  font-family: var(--font-mono); font-weight:500; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  color: var(--txt-inv-b); opacity:.66;
}
.hmq__copy i{ font-style:normal; color: var(--accent); }

/* ══════════════════ HAIRLINE ROWS ══════════════════ */
/* THE signature device: no cards, blocks separated by a 1px rule. */




.on-ink 



.row__body > * + *{ margin-top: 14px; }
.row__lead{ color: var(--txt-hi); font-weight: 500; }
.on-ink .row__lead{ color: var(--txt-inv); }
.row__note{ color: var(--txt); }
.on-ink .row__note{ color: var(--txt-inv-b); }

@media (max-width: 899px){  }


/* the case-study stat lines — the doc's multiples get display treatment */
.case__deal{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.02rem, 1.5vw, 1.26rem); letter-spacing:-.012em;
  color: var(--txt-hi); line-height: 1.35;
}
.case__mult{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); letter-spacing:-.02em;
  line-height: 1.05; color: var(--accent-deep);
}
.case__mult span{
  display:block; font-family: var(--font-base); font-weight:400;
  font-size: clamp(.86rem, 1vw, .95rem); letter-spacing:0;
  color: var(--txt-dim); margin-top: 6px;
}
.case__src{ font-size: .9rem; color: var(--txt-dim); }
.case__hot{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.14rem, 1.7vw, 1.45rem); letter-spacing:-.014em;
  color: var(--accent-deep); line-height: 1.25;
}

/* ══════════════════ SPLIT ══════════════════ */

.split{ display:grid; gap: clamp(32px, 4.5vw, 64px); }
@media (min-width: 980px){
  .split{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items:start; }
  .split--even{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split__aside{ position: sticky; top: 120px; }
}
.split__body > * + *{ margin-top: 20px; }

/* ══════════════════ MOTION ══════════════════ */

[data-fade]{
  opacity: 0;
  transform: translate3d(var(--fx, 0px), var(--fy, 26px), 0);
  transition: opacity var(--fd, .75s) cubic-bezier(.22,.61,.36,1) var(--fdelay, 0s),
              transform var(--fd, .75s) cubic-bezier(.22,.61,.36,1) var(--fdelay, 0s);
  will-change: opacity, transform;
}
[data-fade].in-view{ opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-fade]{ opacity:1; transform:none; transition:none; }
  .hmq__track, .mqband__track{ animation: none !important; }
}

/* ══════════════════ FIGBAND — full-bleed statement band ══════════════════ */
/* Scrim resolves to solid ink top AND bottom so the band butts seamlessly.
   .figband__img is the hook for the Seedance photography when it lands;
   until then the accent bloom carries the band. */

.figband{ position:relative; overflow:hidden; }
.figband__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: grayscale(1) brightness(.30) contrast(1.06);
}
.figband__bloom{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(55% 80% at 78% 50%, rgba(255,212,0,.13), transparent 64%),
    radial-gradient(40% 60% at 16% 84%, rgba(255,212,0,.07), transparent 60%);
}
.figband__scrim{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, var(--bg-ink) 0%, rgba(10,10,11,.42) 26%,
              rgba(10,10,11,.42) 74%, var(--bg-ink) 100%);
}
.figband .container{ display:grid; gap: clamp(26px, 3.4vw, 46px); }

/* the "Influence." reveal inside the first band */
.influword{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(3.4rem, 10vw, 8.6rem); line-height: .95;
  letter-spacing: -.03em; color: var(--accent);
}

/* ══════════════════ MARQUEE BAND ══════════════════ */
/* Three self-contained copies, gap:0, wrap at -33.3333% — no seam. */

.mqband{ overflow:hidden; padding-block: clamp(40px, 5vw, 76px); }
.mqband__track{
  display:flex; width:max-content; gap:0;
  animation: mqscroll 30s linear infinite;
}
.mqband:hover .mqband__track{ animation-play-state: paused; }
@keyframes mqscroll{ from{ transform: translateX(0); } to{ transform: translateX(-33.3333%); } }

.mqband__copy{
  display:flex; align-items:center; gap:.42em; padding-right:.42em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 8.4vw, 6.7rem);
  line-height: 1.12; letter-spacing: -.02em; white-space: nowrap;
  color: var(--txt-inv);
}
.mqband__sep{ color: var(--accent); font-weight: 400; }

/* ══════════════════ 02. INFLUENCE ══════════════════ */

/* the four assets — a plain hairline ledger */

/* the formula — Capital + Influence + Distribution + Ownership */

/* discover / grows / more valuable — three-beat chain */
.beats{ display:grid; gap: 4px; }
.beats p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.14rem, 1.9vw, 1.6rem); letter-spacing:-.014em;
  color: var(--txt-inv-b); line-height:1.3;
}
.beats p:last-child{ color: var(--txt-inv); }

/* ══════════════════ 04. THE PROBLEM ══════════════════ */


/* the four "who serves whom" contrast lines */
.gaps{ display:grid; gap: 12px; }
.gaps p{ color: var(--txt-inv-b); }
.gaps p:last-child{ color: var(--txt-inv); font-weight: 500; }





/* ══════════════════ 08. MANAGERS & AGENTS ══════════════════ */

.mathline{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.5rem, 3.6vw, 3.1rem); letter-spacing:-.022em;
  line-height:1.08; color: var(--txt-inv);
}
.mathline i{ font-style:normal; color: var(--accent); font-weight:400; }

.roster{ border-top: 1px solid var(--line-ink); margin-top: clamp(26px, 3.4vw, 42px); }
.roster__row{
  display:flex; align-items:baseline; justify-content:space-between; gap: 24px;
  padding-block: clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line-ink);
}
.roster__q{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem); letter-spacing:-.014em;
  color: var(--txt-inv-b);
}
.roster__a{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.9rem, 4.4vw, 3.8rem); letter-spacing:-.024em;
  color: var(--accent); line-height:1;
}
/* the count numerals ride in <b> hooks for the JS — weight stays 500,
   same reset as .pathway b / .creates p b (audit catch: UA bold = 700) */
.roster__a b{ font-weight: 600; }

/* ══════════════════ 09. FROM PERFORMER TO INVESTOR ══════════════════ */

.lifelines{ display:grid; gap: 6px; }
.lifelines p{ color: var(--txt-inv-b); }

.pathway{
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap: clamp(12px, 1.8vw, 24px); row-gap: 8px;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.4rem, 3.3vw, 2.9rem); letter-spacing:-.02em;
  line-height:1.1; color: var(--txt-inv);
}
.pathway i{ font-style:normal; color: var(--accent); font-family: var(--font-mono); font-weight:400; font-size:.7em; }
.pathway b{ font-weight:600; color: var(--accent); }

.creates{ display:grid; gap: 8px; }
.creates p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.08rem, 1.7vw, 1.5rem); letter-spacing:-.012em;
  color: var(--txt-inv-b); line-height:1.3;
}
.creates p b{ font-weight:600; color: var(--txt-inv); }

.dontpair{ display:grid; gap: clamp(20px, 2.6vw, 34px); }
.dontpair p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.5rem, 3vw, 2.6rem); letter-spacing:-.018em;
  line-height:1.1; color: var(--txt-inv);
}
.dontpair p em{ font-style:normal; color: var(--accent); display:block; }

/* ══════════════════ 10. VISION + CLOSE ══════════════════ */

.vision__mark{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2.2rem, 6vw, 5.2rem); letter-spacing:-.026em;
  line-height:1.0; color: var(--accent); max-width: 14ch;
}

.ccta{ text-align:center; overflow:hidden; }
.ccta__sky{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 46% at 50% 108%, rgba(255,212,0,.2), transparent 68%),
    radial-gradient(34% 30% at 50% 112%, rgba(255,229,102,.16), transparent 70%);
}
.ccta__inner{ display:grid; justify-items:center; gap: clamp(18px, 2.4vw, 28px); }
.ccta__inner .lede{ max-width: 64ch; }
.ccta__inner .statement--big{ max-width: none; }
.ccta__cta{ justify-content:center; margin-top: clamp(10px, 1.6vw, 22px); }

/* ══════════════════ FOOTER ══════════════════ */

.ftr{
  background: var(--bg-ink); color: var(--txt-inv-b);
  position:relative; overflow:hidden;
  padding-block: clamp(64px, 8vw, 110px) 34px;
}
.ftr__glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(46% 60% at 14% 0%, rgba(255,212,0,.1), transparent 62%);
}
.ftr__top{ display:grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 980px){ .ftr__top{ grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr); } }

.ftr__mark{ font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.ftr__fdn{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--txt-inv-b); opacity:.65; margin-top: 12px;
}
.ftr__tag{
  margin-top: 20px; max-width: 34ch;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); letter-spacing:-.01em;
  color: var(--txt-inv); line-height: 1.45;
}
.ftr__tag b{ font-weight:600; color: var(--accent); }
.ftr__mission{ margin-top: 18px; max-width: 46ch; font-size:.95rem; color: var(--txt-inv-b); opacity:.85; }

.ftr__cols{ display:grid; gap: clamp(30px, 4vw, 56px); align-content:start; }
@media (min-width: 640px){ .ftr__cols{ grid-template-columns: 1fr 1fr; } }
.ftr__h{
  font-family: var(--font-mono); font-weight:500; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--txt-inv);
  opacity:.55; margin-bottom: 18px;
}
.ftr__list{ display:grid; gap: 10px; }
.ftr__link{
  color: var(--txt-inv-b); font-size:.95rem;
  transition: color .25s ease;
}
.ftr__link:hover{ color: var(--accent); }

.ftr__bot{
  margin-top: clamp(48px, 6vw, 84px); padding-top: 22px;
  border-top: 1px solid var(--line-ink);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: 12px;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  color: var(--txt-inv-b); opacity:.6;
}

/* ══════════════════════════════════════════════════════════════════════
   2026-09-04 — CLIENT REVIEW PASS: Inter + yellow, imagery, and eight
   section rebuilds. Appended as one versioned block (FDN house rule).
   ══════════════════════════════════════════════════════════════════════ */

/* ── the photography layer, now that the images have landed ── */
.hero__art{ background-image: url('../assets/img/hero.jpg'); background-position: 68% 42%; }
@media (max-width: 900px){ .hero__art{ background-position: 74% 40%; } }

/* the hero subject sits right-of-centre, so the scrim leans left to keep
   the headline column readable without flattening her out of the frame */
.hero__bloom{
  background:
    radial-gradient(58% 72% at 84% 74%, rgba(255,212,0,.13), transparent 62%),
    linear-gradient(94deg, rgba(10,10,11,.93) 0%, rgba(10,10,11,.78) 34%,
                    rgba(10,10,11,.30) 62%, rgba(10,10,11,.34) 100%),
    linear-gradient(180deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,0) 26%,
                    rgba(10,10,11,0) 58%, rgba(10,10,11,.88) 100%);
}
.hero__art{ filter: grayscale(.72) brightness(.62) contrast(1.04); }

/* ── FIGBAND, split variant: statement left, photograph right ── */
.figband--split .container{
  display:grid; gap: clamp(30px, 4.4vw, 66px); align-items:center;
}
@media (min-width: 980px){
  .figband--split .container{ grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); }
}
.figband__fig{ position:relative; align-self:stretch; min-height: clamp(280px, 34vw, 460px); }
.figband__fig img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(.6) brightness(.78) contrast(1.05);
}
.figband__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--line-ink);
  background: linear-gradient(180deg, rgba(10,10,11,.34), rgba(10,10,11,.06) 42%, rgba(10,10,11,.42));
}
.figband--split .figband__img{ opacity:.28; }

/* the answer to "you bring something most investors do not:" — it now
   lands right under the colon at speaking size, not as a billboard */
.influword{
  font-size: clamp(2.1rem, 4.8vw, 3.7rem); font-weight: 500;
  line-height: 1.04; letter-spacing: -.028em;
  color: var(--txt-inv); margin-top: 6px;
}
.influword em{ font-style:normal; color: var(--accent); }

/* ══════════ 01 · WEALTH — three columns: thesis / argument / image ══════════ */

.w3{ display:grid; gap: clamp(34px, 4.4vw, 62px); align-items:start; }
@media (min-width: 1040px){
  .w3{ grid-template-columns: minmax(0,.92fr) minmax(0,1.18fr) minmax(0,.9fr);
       column-gap: clamp(34px, 4vw, 72px); }
  .w3__thesis{ position:sticky; top: 118px; }
}
.w3__thesis .h-major{ max-width: 13ch; }
.w3__thesis .h-sub{ max-width: 16ch; }
.w3__intro{
  margin-top: clamp(22px, 2.6vw, 34px); padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line); max-width: 40ch;
}
.w3__body > * + *{ margin-top: 20px; }
.w3__fig{ position:relative; min-height: clamp(320px, 38vw, 560px); }
.w3__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 62% 34%; }
.w3__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.w3__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: clamp(14px, 1.6vw, 20px);
  background: linear-gradient(180deg, transparent, rgba(10,10,11,.55) 42%, rgba(10,10,11,.94));
  color: #fff; font-family: var(--font-mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ══════════ 02 · INFLUENCE — the spine + band ══════════
   Won the design panel unanimously ("Demote the Stem" + Concept 1's band).
   The four assets repeat "You have" four times; demoting that stem to a
   right-aligned micro-label in the margin leaves the four NOUNS as the
   only display type, which is what the section is actually about. */

.inf{ --c1: clamp(84px, 11vw, 148px); display:grid; grid-template-columns: 1fr; }
@media (min-width: 900px){
  .inf{ grid-template-columns: var(--c1) minmax(0,1fr);
        column-gap: clamp(20px, 3vw, 42px); row-gap: 0; }
  .inf > *{ grid-column: 2; }
  .inf-ledger, .inf-band, .inf-rule{ grid-column: 1 / -1; }
}

.inf-ledger{ border-top: 1px solid var(--line-ink); }
.inf-asset{
  display:grid; grid-template-columns: 1fr; align-items:baseline;
  padding-block: clamp(16px, 2.1vw, 26px);
  border-bottom: 1px solid var(--line-ink);
  transition: opacity .28s ease;
}
@media (min-width: 900px){
  .inf-asset{ grid-template-columns: var(--c1) minmax(0,1fr); column-gap: clamp(20px, 3vw, 42px); }
}
.inf-asset__chrome{ display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
@media (min-width: 900px){
  .inf-asset__chrome{ justify-content:space-between; margin-bottom:0; }
}
.inf-asset__idx{
  font-style:normal; font-family: var(--font-mono); font-weight:500;
  font-size:.78rem; letter-spacing:.14em; color: var(--accent);
}
.inf-asset__stem{
  font-family: var(--font-mono); font-size:.74rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--txt-inv-b); opacity:.66;
}
.inf-asset__word{
  display:flex; align-items:baseline; gap: clamp(16px, 2vw, 28px);
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.9rem, 5.4vw, 4.9rem);
  line-height: 1.0; letter-spacing:-.032em; color: var(--txt-inv);
}
.inf-leader{
  flex: 1 1 auto; min-width: 32px; height:1px; align-self:center;
  margin-top:.34em; background: var(--line-ink);
  transform: scaleX(1); transform-origin: left center;
  transition: transform .62s cubic-bezier(.22,.61,.36,1) calc(var(--fdelay, 0s) + .18s),
              background .3s ease;
}
html.js .inf-asset:not(.in-view) .inf-leader{ transform: scaleX(0); }
.inf-asset:hover .inf-leader{ background: var(--accent); }
/* attention state — dim the siblings, no JS */
.inf-ledger:hover .inf-asset{ opacity:.58; }
.inf-ledger:hover .inf-asset:hover{ opacity:1; }

.inf-pivot{ margin-top: clamp(38px, 4.6vw, 66px); max-width: 52ch; }
.inf-eqlabel{ margin-top: clamp(28px, 3.4vw, 44px); padding-bottom: 14px; }

/* the formula breaks the container — the only edge-to-edge object here,
   so it reads as multiplication against an otherwise vertical spine */
.inf-band{
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink);
  padding-block: clamp(26px, 3.6vw, 54px);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-start;
  column-gap: clamp(10px, 3vw, 18px); row-gap: 6px;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.4rem, 4.4vw, 3.9rem); line-height:1.04; letter-spacing:-.03em;
  color: var(--txt-inv);
}
@media (min-width: 900px){
  .inf-band{ flex-wrap:nowrap; justify-content:space-between; column-gap: clamp(12px,1.4vw,24px); }
}
.inf-band span, .inf-band i{ display:inline-block; }
.inf-band i{ font-style:normal; font-weight:400; color: var(--accent); }

.inf-imagine{
  margin-top: clamp(34px, 4vw, 56px); max-width: 46ch;
  font-size: clamp(1.1rem, 1.6vw, 1.38rem); line-height:1.5; color: var(--txt-inv-b);
}
.inf-imagine em{ font-style:normal; color: var(--accent); }

.inf-beats{ margin-top: clamp(22px, 2.6vw, 34px); display:grid; row-gap: clamp(8px,1vw,14px); }
.inf-beats li{
  font-family: var(--font-display); font-weight:600; letter-spacing:-.02em;
  line-height:1.2; color: var(--txt-inv);
}
.inf-beats li::before{
  content:''; display:block; width: clamp(20px,2.6vw,40px); height:1px;
  background: var(--accent); opacity:.55; margin-bottom:10px;
}
.inf-beats li:nth-child(1){ font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: var(--txt-inv-b); }
.inf-beats li:nth-child(2){ font-size: clamp(1.35rem, 2.5vw, 1.95rem); }
.inf-beats li:nth-child(3){ font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing:-.024em; }
@media (min-width: 900px){
  .inf-beats li:nth-child(2){ margin-left: clamp(0px, 1.6vw, 26px); }
  .inf-beats li:nth-child(3){ margin-left: clamp(0px, 3.2vw, 52px); }
}

.inf-because{ margin-top: clamp(30px, 3.6vw, 48px); }
.inf-payoff{
  margin-top: 14px; max-width: 18ch;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.85rem, 4.1vw, 3.3rem); line-height:1.06;
  letter-spacing:-.028em; color: var(--txt-inv);
}
.inf-neg{
  margin-top: clamp(18px, 2vw, 26px); max-width: 40ch;
  border-left: 1px solid var(--line-ink); padding-left: clamp(14px, 1.6vw, 20px);
  font-size: clamp(.94rem, 1.1vw, 1.02rem); line-height:1.55;
  color: var(--txt-inv-b); opacity:.6;
}
.inf-rule{ height:1px; background: var(--line-ink); margin-top: clamp(30px, 3.6vw, 48px); }
.inf-final{
  margin-top: clamp(26px, 3vw, 40px); max-width: 16ch;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2rem, 4.6vw, 3.7rem); line-height:1.06;
  letter-spacing:-.03em; color: var(--txt-inv);
}
.inf-final em{ font-style:normal; color: var(--accent); }

/* ══════════ 03 · PROOF — the cast strip (port of FDN's team accordion) ══════════
   Hover expands one frame and blurs the rest; click opens the full dossier
   below. Every word of the client's copy is in the open panel — nothing is
   summarised, per the brief. */

.cast{ display:flex; flex-direction:column; gap:10px; margin-top: clamp(34px,4.4vw,56px); }
.cast__item{
  position:relative; overflow:hidden; cursor:pointer; min-width:0;
  border:1px solid var(--line); height: 240px; text-align:left; width:100%;
  transition: flex-grow .45s cubic-bezier(.5,.85,.25,1.05), border-color .3s ease;
}
.cast__item:hover, .cast__item.is-sel{ border-color: var(--accent-deep); }
.cast__item:focus-visible{ outline:3px solid var(--accent-deep); outline-offset:2px; }
@media (min-width: 820px){
  .cast{ flex-direction:row; height: clamp(320px, 30vw, 420px); }
  .cast__item{ flex:1 1 0; height:auto; }
  .cast:hover .cast__item{ flex-grow:.5; }
  .cast:hover .cast__item:hover{ flex-grow:2.3; }
  .cast__item.is-sel{ flex-grow:1.35; }
  .cast:hover .cast__item.is-sel{ flex-grow:.5; }
  .cast:hover .cast__item.is-sel:hover{ flex-grow:2.3; }
  .cast__item::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: rgba(10,10,11,.5);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity:0; transition: opacity .35s ease;
  }
  .cast:hover .cast__item:not(:hover)::after{ opacity:1; }
}
.cast__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
/* until licensed portraits land, an initials plate carries each name */
.cast__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(64% 54% at 70% 14%, rgba(255,212,0,.20), transparent 70%),
    linear-gradient(160deg, #1A1A12 0%, #0A0A0B 72%);
}
.cast__ph span{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2.2rem, 4.4vw, 3.9rem); letter-spacing:-.03em; color: var(--accent);
}
.cast__scrim{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 34%, rgba(10,10,11,.72) 66%, rgba(10,10,11,.97) 100%);
}
.cast__tag{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: clamp(14px,1.8vw,22px); }
.cast__name{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1rem, 1.4vw, 1.28rem); letter-spacing:-.02em; color: var(--txt-inv);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cast__role{
  margin-top:6px; font-family: var(--font-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color: var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* the FDN original hides these until hover because its frames are portraits;
   ours are initials plates, so the name has to stay on screen */
@media (min-width: 820px){
  .cast__tag{ opacity:.78; transition: opacity .3s ease; }
  .cast__item:hover .cast__tag, .cast__item.is-sel .cast__tag{ opacity:1; }
}

.cdet{ display:none; position:relative; margin-top: clamp(26px,3.2vw,42px); }
.cdet.is-on{ display:grid; grid-template-columns: 1fr; gap: clamp(24px,3vw,44px); }
@media (min-width: 940px){
  .cdet.is-on{ grid-template-columns: minmax(0,.52fr) minmax(0,1.48fr); }
}
.cdet__fig{ position:relative; min-height: 300px; border:1px solid var(--line); }
.cdet__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.cdet__fig--ph{
  display:grid; place-items:center;
  background:
    radial-gradient(64% 54% at 70% 14%, rgba(255,212,0,.18), transparent 70%),
    linear-gradient(160deg, #1A1A12 0%, #0A0A0B 72%);
}
.cdet__fig--ph span{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing:-.03em; color: var(--accent);
}
.cdet__role{
  font-family: var(--font-mono); font-weight:500; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color: var(--accent-deep);
}
.cdet__name{
  margin-top:10px; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing:-.03em;
  line-height:1.02; color: var(--txt-hi);
}
.cdet__body > * + *{ margin-top: 16px; }
.cdet__stats{
  display:grid; gap: clamp(18px,2.4vw,32px); margin-top: clamp(22px,2.8vw,32px);
  padding-top: clamp(20px,2.4vw,28px); border-top:1px solid var(--line);
}
@media (min-width: 700px){ .cdet__stats{ grid-template-columns: 1fr 1fr; } }

/* ══════════ 04 · THE PROBLEM — eight cells, four left four right ══════════ */

.probs{ display:grid; margin-top: clamp(30px,4vw,48px); border-top:1px solid var(--line-ink); }
@media (min-width: 820px){
  /* column-major fill: 01-04 land left, 05-08 right, WITHOUT interleaving the
     DOM (which broke the reading order once it collapsed to one column) */
  .probs{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
          grid-auto-flow: column; column-gap: clamp(30px,4vw,64px); }
}
.probs__cell{
  display:flex; align-items:baseline; gap: clamp(14px,2.2vw,26px);
  padding-block: clamp(18px,2.2vw,26px);
  border-bottom: 1px solid var(--line-ink);
  transition: background .3s ease;
}
.probs__cell:hover{ background: rgba(244,248,251,.03); }
.probs__cell i{
  font-style:normal; font-family: var(--font-mono); font-weight:500;
  font-size:.78rem; letter-spacing:.14em; color: var(--accent); flex:0 0 auto;
}
.probs__cell p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.02rem, 1.55vw, 1.32rem); letter-spacing:-.02em;
  line-height:1.28; color: var(--txt-inv);
}

.probsplit{ display:grid; gap: clamp(30px,4vw,58px); margin-top: clamp(40px,5vw,72px); }
@media (min-width: 900px){ .probsplit{ grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); } }
.probfig{ display:grid; gap: clamp(30px,4vw,60px); margin-top: clamp(40px,5vw,72px); align-items:center; }
@media (min-width: 900px){ .probfig{ grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }
.probfig__body > * + *{ margin-top: 18px; }
.probfig__fig{ position:relative; min-height: clamp(280px,32vw,430px); align-self:stretch; }
.probfig__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.probfig__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--line-ink);
  background: linear-gradient(180deg, rgba(10,10,11,.3), rgba(10,10,11,.05) 45%, rgba(10,10,11,.5));
}

/* ══════════ 05 · WHAT WE DO — the library carousel (port of FDN's) ══════════ */

.lib{ margin-top: clamp(14px,2vw,24px); }
.lib__arrows{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }
.lib__btn{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); color: var(--txt-hi);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.lib__btn:hover{ background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.lib__btn svg{ width:15px; height:15px; }
.lib__view{
  display:flex; gap:12px; height: clamp(300px, 32vw, 460px); overflow:hidden;
}
.lib__panel{
  position:relative; overflow:hidden; flex:0 0 auto; min-width:0;
  background:#0E0E10; border:1px solid var(--line);
  transition: width 1s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.lib__panel:hover{ border-color: var(--accent-deep); }
.lib__panel:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }
.lib__img{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:100%; max-width:none; object-fit:cover;
  filter: grayscale(1) brightness(.6); transition: filter .6s ease;
}
.lib__panel.is-open .lib__img{ filter: grayscale(0) brightness(.92); }
.lib__shade{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.18) 32%,
              rgba(10,10,11,.9) 100%);
}
.lib__idx{
  position:absolute; top: clamp(12px,1.4vw,18px); left: clamp(12px,1.4vw,18px); z-index:2;
  font-family: var(--font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; color: var(--accent);
}
.lib__tag{
  position:absolute; left: clamp(12px,1.4vw,18px); bottom: clamp(12px,1.4vw,18px); z-index:2;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1rem, 1.5vw, 1.4rem); letter-spacing:-.022em; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: calc(100% - 24px);
}
.lib__copy{ display:grid; margin-top: clamp(20px,2.6vw,30px); }
.lib__slide{
  grid-area:1/1; opacity:0; visibility:hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.lib__slide.is-on{ opacity:1; visibility:visible; transition-delay:.08s, 0s; }
.lib__text{
  font-size: clamp(1.02rem, 1.35vw, 1.24rem); line-height:1.6;
  color: var(--txt); max-width: 76ch;
}
.lib__text strong{
  font-weight:600; color: var(--txt-hi); font-family: var(--font-display);
  letter-spacing:-.02em; margin-right:.5em;
}
@media (max-width: 760px){
  .lib__view{ flex-direction:column; height:auto; gap:10px; }
  .lib__panel{ width:100% !important; height: 210px; }
  .lib__img{ width:100% !important; left:0; transform:none; }
}

/* ══════════ marquee band — yellow ground, black type (client) ══════════ */

.mqband{ background: var(--accent); padding-block: clamp(24px,3vw,44px); }
.mqband__copy{
  font-size: clamp(1.5rem, 4.6vw, 3.5rem); letter-spacing:-.03em;
  color: var(--accent-on); gap:.38em; padding-right:.38em;
}
.mqband__sep{ color: rgba(10,10,11,.58); font-weight:400; }

/* ══════════ 06 · NOT ANOTHER WEALTH MANAGER — the counterweight ledger ══════════
   Won the design panel unanimously. Each claim the client keeps is paired
   across a central spine with the burden it lifts; hovering a row lights
   that segment of the spine and brings its relief to full contrast. */

.nw{ --nw-idx: 34px; display:grid; gap: clamp(40px,5vw,72px); }
@media (min-width: 1000px){
  .nw{ --nw-idx: 62px; grid-template-columns: minmax(0,.9fr) minmax(0,2.6fr);
       column-gap: clamp(44px,5.4vw,92px); align-items:start; }
  .nw__rail{ position:sticky; top: clamp(96px,16vh,150px); }
}
.nw__rail .h-major{ font-size: clamp(2.1rem, 3.3vw, 3.05rem); max-width: 11ch; }
.nw__rail .h-sub{ max-width: 24ch; }
.nw__lede{ margin-top: clamp(20px,2.2vw,30px); max-width: 30ch; }

.nw-head, .nw-row{
  display:grid; column-gap:0; align-items:start;
  grid-template-columns: var(--nw-idx) minmax(0,1fr);
  border-bottom: 1px solid var(--line-ink);
}
@media (min-width: 1000px){
  .nw-head, .nw-row{ grid-template-columns: var(--nw-idx) minmax(0,1.62fr) minmax(0,1fr); }
}
.nw-head{ padding-block: 14px 16px; }
.nw-head__is{ grid-column: 2; }
.nw-head__not{ grid-column: 2; display:none; }
@media (min-width: 1000px){
  .nw-head__not{ grid-column: 3; display:block; padding-left: clamp(24px,3.2vw,48px); }
}

.nw-row{ padding-block: clamp(26px,3.3vw,46px); transition: background .35s ease; }
.nw-row:hover, .nw-row:focus-within{ background: rgba(244,248,251,.03); }
.nw-row:last-of-type{ border-bottom-color: var(--line-bright); }
.nw-row__idx{
  grid-column:1; font-family: var(--font-mono); font-weight:500; font-size:.8rem;
  letter-spacing:.14em; color: var(--accent); padding-top:.62em;
  transition: color .3s ease;
}
.nw-row__is{
  grid-column:2; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem); line-height:1.06; letter-spacing:-.026em;
  color: var(--txt-inv); text-wrap: balance;
}
.nw-row__not{
  grid-column:2; margin-top:16px; padding-left:16px;
  border-left: 1px solid var(--line-ink);
  font-size: clamp(.95rem, 1.12vw, 1.06rem); line-height:1.6;
  color: var(--txt-inv-b); opacity:.72;
  transition: opacity .35s ease, border-color .35s ease, box-shadow .35s ease;
}
@media (min-width: 1000px){
  .nw-row__not{ grid-column:3; margin-top:0; padding-top:.5em;
                padding-left: clamp(24px,3.2vw,48px); max-width:32ch; }
  .nw-row__is{ padding-right: clamp(24px,3.2vw,48px); }
}
.nw-row__lead{ font-size:.86em; letter-spacing:.04em; color: var(--txt-inv-b); }
.nw-row:hover .nw-row__not, .nw-row:focus-within .nw-row__not{
  opacity:1; border-left-color: var(--accent);
  box-shadow: -1px 0 20px -2px var(--accent-glow);
}
.nw-row:hover .nw-row__idx{ color: var(--accent-hov); }
@media (hover: none){ .nw-row__not{ opacity:1; } }

.nw-plinth{
  margin-left: var(--nw-idx); margin-top: clamp(26px,3vw,40px);
  border-left: 1px solid var(--accent); padding-left: clamp(22px,2.4vw,36px);
  font-size: clamp(1.02rem,1.42vw,1.2rem); line-height:1.5; letter-spacing:-.008em;
  color: var(--txt-inv); opacity:.9; max-width: 52ch;
}
@media (max-width: 999px){
  .nw-plinth{ margin-left:0; border-left:0; padding-left:0;
              border-top:1px solid var(--accent); padding-top:20px; }
}
.nw-close{ margin-top: clamp(58px,7.2vw,108px); }
.nw-close__rule{
  display:block; width:56px; height:1px; background: var(--accent);
  margin-bottom: clamp(20px,2.4vw,32px);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s cubic-bezier(.22,.61,.36,1) .12s;
}
.nw-close.in-view .nw-close__rule{ transform: scaleX(1); }

/* ══════════ section divider — separates the Vision from the close ══════════ */

.secdiv{ background: var(--bg-ink); padding-block: 0; }
.secdiv__line{
  height:1px; background: var(--line-ink); position:relative;
}
.secdiv__line::after{
  content:''; position:absolute; left:0; top:0; width: clamp(90px,12vw,180px);
  height:1px; background: var(--accent);
}

/* ══════════ close ══════════ */
.ccta__sky{
  background:
    radial-gradient(60% 46% at 50% 108%, rgba(255,212,0,.22), transparent 68%),
    radial-gradient(34% 30% at 50% 112%, rgba(255,229,102,.14), transparent 70%);
}

/* ══════════ ACCENT ON LIGHT — the marker, not the ink ══════════
   Yellow cannot carry display type on white; darkening it far enough to pass
   contrast turns it olive. So on light grounds the accent stops being the
   text colour and becomes a MARK behind or beside near-black type. On ink it
   stays solid yellow. Same 10% budget, legible in both directions. */

/* the mark sits UNDER the descenders — at 92% it cut through the p in
   "Talent Capital" (caught in the 1440 capture) */
.h-major em, .h-sec em, .h-sub em, .statement em{
  color: var(--txt-hi);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: 100% .14em; background-position: 0 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .05em; padding-bottom: .1em;
}
.on-ink .h-major em, .on-ink .h-sec em, .h-sec--inv em,
.on-ink .h-sub em, .on-ink .statement em{
  color: var(--accent); background-image: none; padding-inline: 0;
}

.h-sub em{ font-style: normal; }

/* big statement lines: a yellow rule above, near-black type */
.statement--accent{ color: var(--txt-hi); }
.statement--accent::before{
  content:''; display:block; width: clamp(48px,5vw,76px); height:2px;
  background: var(--accent); margin-bottom: clamp(14px,1.6vw,20px);
}
.on-ink .statement--accent{ color: var(--accent); }
.on-ink .statement--accent::before{ display:none; }

/* the case multiples and the hot lines — same treatment on light */
.case__mult{ color: var(--txt-hi); }
.case__mult span{ color: var(--txt-dim); }
.case__hot{
  color: var(--txt-hi);
  border-left: 2px solid var(--accent); padding-left: clamp(14px,1.6vw,20px);
}

/* the scrolled wordmark: ochre-on-white read muddy, so it goes monochrome —
   the solid-yellow CTA sitting beside it already carries the brand colour */
.hdr--solid .brand__mark b{ color: var(--txt-hi); }

/* keep the whole subject in frame in the tall wealth column */
.w3__fig img{ object-position: 78% 34%; }

/* closed slats: "Discover" was ellipsising at the default size */
.lib__panel:not(.is-open) .lib__tag{ font-size: clamp(.78rem, .95vw, .92rem); }

/* the page's thesis line — white, with only the word it argues for in yellow */
.vision__mark{ color: var(--txt-inv); }
.vision__mark em{ font-style: normal; color: var(--accent); }

@media (prefers-reduced-motion: reduce){
  .inf-leader{ transform:none !important; transition:none !important; }
  .nw-close__rule{ transform:none; transition:none; }
  .cast__item, .lib__panel{ transition:none; }
}


/* ══════════════════════════════════════════════════════════════════════
   2026-09-08 — CLIENT REVIEW PASS v3
   Hero relit, wealth column tightened, background images, hover states,
   centred close lines. Appended block (FDN house rule).
   ══════════════════════════════════════════════════════════════════════ */

/* ── HERO ── she is the subject: keep her bright and in colour, fade the
   photograph out under the header so she gains headroom, and carry the
   darkness on the LEFT where the headline sits (client). ── */
.hero__art{
  filter: saturate(.94) contrast(1.03) brightness(1.02);
  background-position: 72% 46%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 11%, #000 27%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 11%, #000 27%);
}
.hero__bloom{
  background:
    radial-gradient(48% 58% at 78% 60%, rgba(255,212,0,.10), transparent 66%),
    linear-gradient(96deg, rgba(10,10,11,.97) 0%, rgba(10,10,11,.93) 28%,
                    rgba(10,10,11,.62) 46%, rgba(10,10,11,.16) 64%, rgba(10,10,11,.04) 100%),
    linear-gradient(180deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.30) 18%,
                    rgba(10,10,11,0) 34%, rgba(10,10,11,0) 60%, rgba(10,10,11,.92) 100%);
}
@media (max-width: 900px){
  /* she sits behind the copy on a phone, so the veil has to close up */
  .hero__bloom{
    background:
      radial-gradient(60% 40% at 70% 24%, rgba(255,212,0,.10), transparent 68%),
      linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.42) 26%,
                      rgba(10,10,11,.72) 54%, rgba(10,10,11,.96) 100%);
  }
  .hero__art{ background-position: 66% 30%; }
}

/* ── 01 · WEALTH — the middle column ran long; every display line in it
   drops to one-liner scale and the leading between paragraphs closes up ── */
.w3__body > * + *{ margin-top: 13px; }
.w3__body .statement{
  font-size: clamp(1.12rem, 1.55vw, 1.46rem); line-height:1.2;
  letter-spacing:-.022em; max-width: none;
}
.w3__body .statement--accent{ font-size: clamp(1.05rem, 1.42vw, 1.34rem); }
.w3__body .statement--accent::before{ width: clamp(38px,3.4vw,52px); margin-bottom: 10px; }
.w3__body .row__lead{ margin-top: 18px; }
/* the four company names: one line, and genuinely yellow. Yellow cannot be a
   text colour on white, so the line inverts to a dark chip instead. */
.w3__brands{ margin-top: 20px; }
.w3__brands span{
  display:inline-block; background: var(--bg-ink); color: var(--accent);
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(.98rem, 1.34vw, 1.28rem); letter-spacing:-.022em;
  padding: .34em .62em; white-space: nowrap;
}

/* ── 02 · ONE INVESTMENT — full-bleed background, tighter band ── */
.figband--bg{ padding-block: clamp(56px, 7.4vw, 104px); }
.figband--bg .figband__img{
  opacity:1; filter: grayscale(.35) brightness(.5) contrast(1.05);
  background-position: 60% 42%;
}
.figband--bg .figband__scrim{
  background: linear-gradient(180deg, var(--bg-ink) 0%, rgba(10,10,11,.62) 22%,
              rgba(10,10,11,.66) 76%, var(--bg-ink) 100%);
}
.figband--bg .container{ display:block; }

/* ── 03 · INFLUENCE — the asset rows light up and lift on hover (client) ── */
.inf-asset{
  transition: opacity .28s ease, background .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  padding-inline: clamp(10px, 1.2vw, 18px);
  margin-inline: calc(-1 * clamp(10px, 1.2vw, 18px));
}
.inf-asset__word, .inf-asset__idx, .inf-asset__stem{
  transition: color .3s ease, transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
@media (hover: hover){
  .inf-ledger:hover .inf-asset:hover{
    background: rgba(255,212,0,.05); transform: translateX(6px);
  }
  .inf-ledger:hover .inf-asset:hover .inf-asset__word{ color: var(--accent); transform: translateY(-2px); }
  .inf-ledger:hover .inf-asset:hover .inf-asset__stem{ opacity:.9; }
  .inf-ledger:hover .inf-asset:hover .inf-leader{ background: var(--accent); }
}

/* the scenario moves right, the photograph takes the left (client) */
.infsplit{ display:grid; gap: clamp(28px,3.6vw,56px); align-items:center;
           margin-top: clamp(34px,4vw,56px); }
@media (min-width: 900px){
  .infsplit{ grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); }
}
.infsplit__fig{ position:relative; align-self:stretch; min-height: clamp(280px,30vw,430px); }
.infsplit__fig img{ position:absolute; inset:0; width:100%; height:100%;
                    object-fit:cover; object-position:50% 34%;
                    filter: grayscale(.4) brightness(.82) contrast(1.04); }
.infsplit__fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--line-ink);
  background: linear-gradient(180deg, rgba(10,10,11,.3), rgba(10,10,11,.04) 46%, rgba(10,10,11,.44));
}
.infsplit__body .inf-imagine{ margin-top: 0; }
/* the closing claim is centred on its own (client) */
.inf-final{
  max-width: 30ch; margin-left:auto; margin-right:auto; text-align:center;
  margin-top: clamp(30px,3.4vw,46px);
}
@media (min-width: 900px){ .inf .inf-final, .inf .inf-rule{ grid-column: 1 / -1; } }

/* ── 04 · PROOF — centred head, yellow standfirst, real portraits ── */
.sechead--center{ text-align:center; }
.sechead--center .h-major{ margin-inline:auto; }
.sechead--center .h-sub{ margin-inline:auto; }
.lede--center{ text-align:center; margin-inline:auto; }
/* yellow can't be a text colour on white — the standfirst inverts to a chip */
.h-sub--hot{
  display:inline-block;
  background: var(--bg-ink); color: var(--accent);
  padding: .26em .6em; letter-spacing:-.02em;
}
.on-ink .h-sub--hot{ background: transparent; color: var(--accent); padding: 0; }
/* same device for an <em> that must read yellow on a white ground */
.h-major em.hot{
  background: var(--bg-ink); color: var(--accent);
  background-image: none; padding: .04em .18em .1em;
}

/* ── 05 · PROBLEM — cells lift and light on hover, matching the ledger ── */
.probs__cell{
  transition: background .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  padding-inline: clamp(10px,1.2vw,16px);
  margin-inline: calc(-1 * clamp(10px,1.2vw,16px));
}
.probs__cell p, .probs__cell i{
  transition: color .3s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover){
  .probs__cell:hover{ background: rgba(255,212,0,.05); transform: translateX(6px); }
  .probs__cell:hover p{ color: var(--accent); transform: translateY(-2px); }
}
.probfig__fig img{ object-position: 50% 42%; }

/* ── 06 · NOT ANOTHER WEALTH MANAGER — image ground, bigger head ── */
.nwsec{ position:relative; overflow:hidden; }
.nwsec__img{
  position:absolute; inset:0; z-index:0;
  background: url("../assets/img/bg-different.jpg") center/cover no-repeat;
  filter: grayscale(.3) brightness(.44) contrast(1.05);
}
.nwsec__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, var(--bg-ink-2) 0%, rgba(16,17,20,.82) 20%,
              rgba(16,17,20,.86) 78%, var(--bg-ink-2) 100%);
}
.nw__rail .h-major.nw__h{ font-size: clamp(2.5rem, 4.3vw, 4rem); max-width: 10ch; }
.nw-close--center{ text-align:center; }
.nw-close--center .statement{ margin-inline:auto; }
.nw-close--center .nw-close__rule{ margin-inline:auto; transform-origin:center; }

/* ── 07 · VISION — centred stack; the "what they own" line is body scale ── */
.vision{ display:grid; justify-items:center; text-align:center;
         gap: clamp(16px,2vw,24px); }
.vision .lede{ max-width: 56ch; }
.vision__own{
  font-family: var(--font-base); font-weight:700;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height:1.55;
  color: var(--txt-inv); max-width: 46ch;
}
.vision__body{ max-width: 62ch; color: var(--txt-inv-b); }
.vision__mark{
  max-width: 18ch; margin-top: clamp(14px,1.8vw,24px);
  color: var(--txt-inv);
}
.vision__mark em{ font-style:normal; color: var(--accent); }

/* ── 08 · CLOSE — its own image-backed section (the divider is gone) ── */
.ccta--img{ overflow:hidden; }
.ccta__img{
  position:absolute; inset:0; z-index:0;
  background: url("../assets/img/bg-close.jpg") center/cover no-repeat;
  filter: grayscale(.34) brightness(.46) contrast(1.04);
}
.ccta__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, var(--bg-ink) 0%, rgba(10,10,11,.72) 24%,
              rgba(10,10,11,.78) 72%, rgba(10,10,11,.94) 100%);
}

@media (prefers-reduced-motion: reduce){
  .inf-asset, .probs__cell, .inf-asset__word, .probs__cell p{
    transition:none !important; transform:none !important;
  }
}


/* ══════════ 09 · PIPELINE — "The Turn" (client asked for a full redesign) ══════════
   The chain's rules step inward row by row so the funnel closes; then one
   full-container hairline reopens the page under the question that replaces the
   old one. Width, type size and vertical padding all step on the same index, so
   the narrowing is felt three ways. Zero JS — everything rides [data-fade]. */


.pipe-premise{ max-width: 58ch; margin-top: clamp(6px,1vw,14px); }

/* chapter marker: label, then a rule running out to the stage edge */
.pipe-marker{
  display:flex; align-items:center; gap: clamp(14px,1.8vw,24px);
  margin-top: clamp(42px,5.6vw,88px);
}
.pipe-marker::after{ content:''; flex:1 1 auto; height:1px; background: var(--line); }

/* ── the two engines, each wired into the chain a different way ── */
.pipe-engine{
  display:grid; grid-template-columns: minmax(0,1fr) auto; column-gap:16px;
  align-items:start; border-top:1px solid var(--line); padding-top:20px;
}
/* engine I builds the pipe: its rule is near-black and its left edge is the
   stage's left edge, which continues below as the chain's rail */
.pipe-engine:first-child{ border-top-color: var(--txt-hi); }
.pipe-engine__idx{
  grid-column:2; grid-row:1; justify-self:end;
  font-family: var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; color: var(--txt-dim);
}
.pipe-engine__name{
  grid-column:1; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.45rem,2.5vw,2.15rem); letter-spacing:-.016em;
  line-height:1.05; color: var(--txt-hi);
}
.pipe-engine__name b{
  font-weight:600; color: var(--txt-hi);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat; background-size:100% .14em; background-position:0 100%;
}
.pipe-engine__body{ grid-column:1; margin-top:13px; max-width:42ch; color: var(--txt); }

/* ── the narrowing ──
   The ROW stays full width so the index column and the tag gutter hold straight
   vertical lines; only the row's RULE shrinks, drawn by ::before. There is no
   right rail and no chain-level border — the staircase of shrinking rules IS
   the right wall, which is what keeps this a ledger rather than a box. */
.pipe-chain{
  list-style:none; position:relative; margin-top: clamp(22px,2.6vw,34px);
  border-left:1px solid var(--line); padding-left: clamp(16px,2.2vw,32px);
}
.pipe-step{
  position:relative; width:100%; display:grid;
  grid-template-columns: 3.4ch minmax(0,1fr) clamp(52px,5vw,76px);
  column-gap: clamp(12px,1.6vw,22px); align-items:baseline; padding-block: var(--pb);
}
/* the attribution tick sits AT the rule's terminus, so the five lit ticks
   trace the funnel wall themselves */


.pipe-step__idx{
  font-family: var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; color: var(--txt-dim); font-variant-numeric: tabular-nums;
}
.pipe-step__t{
  font-family: var(--font-display); font-weight:600; letter-spacing:-.016em;
  line-height:1.1; color: var(--txt-hi);
  font-size: calc(clamp(1.35rem,2.7vw,2.4rem) * var(--s));
}   /* the mouth */   /* the handover */     /* the throat */

/* ── the turn: a full-container hairline under the narrowest row ── */
/* the only yellow-family TEXT in the section — .8rem, 6.2:1 on white */
/* deliberately larger than .h-major: the payoff outranks the header. Do not
   "fix" this to match — the size inversion is the point of the section. */



/* CC BY / CC BY-SA on the proof portraits require visible attribution */
.ftr__credits{
  margin-top: clamp(38px,5vw,64px);
  font-size:.72rem; line-height:1.6; color: var(--txt-inv-b); opacity:.42;
  max-width: 96ch;
}


/* ══════════════════════════════════════════════════════════════════════
   2026-09-09 — CLIENT REVIEW PASS v4
   Paragraph spacing again, yellow sub-heads, the formula band on yellow,
   flush yellow beats, hover parity, and the pipeline split 3+3.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 01 · WEALTH ── */
/* the thesis column no longer sticks — the whole section scrolls together */
@media (min-width: 1040px){ .w3__thesis{ position: static; } }
/* paragraph spacing down again (client has asked twice) */
.w3__body > * + *{ margin-top: 9px; }
.w3__body .statement{ margin-top: 15px; }
.w3__body .row__lead{ margin-top: 15px; }
.w3__body > p[style*="margin-top:30px"]{ margin-top: 18px !important; }
/* the rule above "Ownership in the businesses of tomorrow." is gone (client) */
.w3__body .statement--accent{ color: var(--txt-hi); }
.w3__body .statement--accent::before{ display: none; }
/* the brands chip fills the column with its text centred (client) */
.w3__brands{ margin-top: 16px; }
.w3__brands span{
  display:block; width:100%; text-align:center;
  padding: .55em .62em; white-space: normal;
}

/* the sub-head is the yellow one now, and it stands out */
.w3__thesis .h-sub--hot{
  margin-top: 14px; font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  padding: .2em .46em;
}

/* ── 02 · ONE INVESTMENT — keep the subject's face in frame on the right ── */
.figband--bg .figband__img{ background-position: 74% 30%; }
@media (max-width: 900px){ .figband--bg .figband__img{ background-position: 70% 26%; } }

/* ── 03 · INFLUENCE ── */
/* the formula band: yellow ground, black type, white operators (client) */
.inf-band{
  background: var(--accent); color: var(--accent-on);
  border-top: 0; border-bottom: 0;
  padding-block: clamp(22px, 3vw, 44px);
}
.inf-band i{ color: #FFFFFF; }

/* the three beats: one size, all yellow, flush left, no stagger (client) */
.inf-beats li{ color: var(--accent); }
.inf-beats li:nth-child(1),
.inf-beats li:nth-child(2),
.inf-beats li:nth-child(3){
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin-left: 0;
  color: var(--accent);   /* beat 1 carried an older --txt-inv-b at this specificity */
}
.inf-beats li::before{ opacity:.85; }

/* payoff drops a step so the closing claim can sit under it in the same column */
.inf-payoff{ font-size: clamp(1.4rem, 2.6vw, 2.05rem); max-width: 24ch; }
.inf-final{
  max-width: 26ch; margin-left: 0; margin-right: 0; text-align: left;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
}
@media (min-width: 900px){ .inf .inf-final{ grid-column: 2; } }

/* ── 04 · PROBLEM — background image (client) ── */
.probsec{ position:relative; overflow:hidden; }
.probsec__img{
  position:absolute; inset:0; z-index:0;
  background: url("../assets/img/bg-problem.jpg") center/cover no-repeat;
  filter: grayscale(.4) brightness(.34) contrast(1.06);
}
.probsec__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, var(--bg-ink) 0%, rgba(10,10,11,.84) 18%,
              rgba(10,10,11,.88) 80%, var(--bg-ink) 100%);
}

/* ── 05 · WHAT WE DO — plain yellow, no chip (client, asked twice) ── */
.h-major em.hot--plain{
  background: transparent; color: var(--accent);
  background-image: none; padding: 0;
}

/* ── 06 · NOT ANOTHER WEALTH MANAGER ── */
.nw__rail .h-major.nw__h{ font-size: clamp(2.9rem, 5vw, 4.7rem); max-width: 9ch; }
/* claims tighten so each holds one line; reliefs drop to fit two */
.nw-row__is{ font-size: clamp(1.3rem, 2.25vw, 1.82rem); }
.nw-row__not{ font-size: clamp(.9rem, 1.02vw, .98rem); line-height:1.5; max-width: 34ch; }
/* the hover now matches the influence ledger: tint, shift, the claim goes yellow */
.nw-row{ padding-inline: clamp(10px,1.2vw,16px); margin-inline: calc(-1 * clamp(10px,1.2vw,16px)); }
.nw-row__is, .nw-row__idx{
  transition: color .3s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover){
  .nw-row:hover{ background: rgba(255,212,0,.05); transform: translateX(6px); }
  .nw-row:hover .nw-row__is{ color: var(--accent); transform: translateY(-2px); }
  .nw-row:hover .nw-row__not{ box-shadow: none; }
}
.nw-row{ transition: background .35s ease, transform .45s cubic-bezier(.22,.61,.36,1); }

/* ── 07 · PIPELINE v4 — centred head, engines side by side, stages 3+3 ── */
.pipe-premise{
  display:grid; justify-items:center; text-align:center; gap:10px;
  max-width: 68ch; margin-inline:auto; margin-top: clamp(4px,.8vw,10px);
}
.pipe-premise p{ font-size: clamp(.94rem, 1.1vw, 1.02rem); line-height:1.6; color: var(--txt); }
.pipe-premise p:last-child{ color: var(--txt-hi); font-weight:600; }

.pipe-cols{ display:grid; gap: clamp(34px,4.4vw,68px); margin-top: clamp(20px,2.4vw,30px); }
@media (min-width: 900px){ .pipe-cols{ grid-template-columns: 1fr 1fr; } }
.pipe-cols > *{ min-width:0; }
.pipe-cols--chain{ margin-top: clamp(18px,2.2vw,26px); gap: clamp(0px,4.4vw,68px); }
@media (max-width: 899px){ .pipe-cols--chain{ gap:0; } .pipe-cols--chain .pipe-chain:last-child{ margin-top:0; } .pipe-cols--chain .pipe-chain:last-child li:first-child{ border-top:0; } }

.pipe-engine{ border-top:1px solid var(--line); padding-top:20px; }
.pipe-cols > .pipe-engine:first-child{ border-top-color: var(--txt-hi); }
.pipe-engine__idx{
  font-family: var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; color: var(--txt-dim); margin-bottom: 10px;
}
.pipe-engine__name{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.4rem,2.4vw,2rem); letter-spacing:-.018em;
  line-height:1.05; color: var(--txt-hi);
}
.pipe-engine__name b{
  font-weight:600; color: var(--txt-hi);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat; background-size:100% .14em; background-position:0 100%;
}
.pipe-engine__body{ margin-top:12px; max-width:44ch; color: var(--txt); }

.pipe-chain{ list-style:none; margin-top: clamp(22px,2.8vw,34px); }
.pipe-step{
  display:grid; grid-template-columns: 3.4ch minmax(0,1fr);
  column-gap: clamp(12px,1.6vw,20px); align-items:baseline;
  padding-block: clamp(13px,1.7vw,19px);
  padding-inline: clamp(10px,1.2vw,16px);
  margin-inline: calc(-1 * clamp(10px,1.2vw,16px));
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.pipe-chain li:first-child{ border-top: 1px solid var(--line); }
.pipe-step__idx{
  font-family: var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; color: var(--accent-deep); font-variant-numeric: tabular-nums;
}
.pipe-step__t{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.15rem,1.85vw,1.5rem);
  letter-spacing:-.018em; line-height:1.15; color: var(--txt-hi);
  transition: color .3s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover){
  .pipe-step:hover{ background: rgba(255,212,0,.07); transform: translateX(6px); }
  .pipe-step:hover .pipe-step__t{ color: var(--accent-deep); transform: translateY(-2px); }
}

/* ── the question flip: its own centred band on ink ── */
.pipeflip{ position:relative; overflow:hidden; }
.pipeflip__img{
  position:absolute; inset:0; z-index:0;
  background: url("../assets/img/bg-close.jpg") center/cover no-repeat;
  filter: grayscale(.5) brightness(.3) contrast(1.05);
}
.pipeflip__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, var(--bg-ink) 0%, rgba(10,10,11,.86) 20%,
              rgba(10,10,11,.9) 80%, var(--bg-ink) 100%);
}
.pipeflip__inner{ display:grid; justify-items:center; text-align:center; }
.pipeflip__q{
  margin-top:12px; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.05rem,1.7vw,1.38rem); letter-spacing:-.014em;
  line-height:1.25; color: var(--txt-inv-b); opacity:.65; max-width:30ch;
}
.pipeflip__cue{ margin-top: clamp(28px,3.4vw,44px); color: var(--accent); opacity:1; }
.pipeflip__ask{
  margin-top:16px; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.5rem,3.1vw,2.6rem); line-height:1.12;
  letter-spacing:-.022em; color: var(--txt-inv); max-width: 26ch;
}
.pipeflip__ask em{ font-style:normal; color: var(--accent); }
.pipeflip__coda{
  margin-top: clamp(24px,3vw,36px); max-width:46ch; color: var(--txt-inv-b);
}

@media (prefers-reduced-motion: reduce){
  .nw-row, .nw-row__is, .pipe-step, .pipe-step__t{
    transition:none !important; transform:none !important;
  }
}


/* the beats are yellow text now — the UA list markers and the old ticks both
   fight the flush-left alignment the client asked for */
.inf-beats{ list-style: none; }
.inf-beats li::before{ display: none; }
.inf-beats li{ padding-left: 0; }


/* ══════════════════════════════════════════════════════════════════════
   2026-09-10 — CLIENT REVIEW PASS v5
   The black chips behind yellow text are GONE everywhere (client: "I never
   said that should be there. I just want the yellow text."). Pipeline gets
   framed placeholders; the question-flip becomes two coloured columns.
   ══════════════════════════════════════════════════════════════════════ */

/* ── plain yellow text on every ground — no chip, no padding, no underline ── */
.h-sub--hot,
.on-ink .h-sub--hot{
  display:block; background:transparent; color: var(--accent); padding:0;
}
.h-major em.hot, .h-major em.hot--plain{
  background:transparent; background-image:none; color: var(--accent); padding:0;
}
.w3__brands span{
  display:inline; width:auto; background:transparent; color: var(--accent);
  padding:0; text-align:left; white-space:nowrap;
  font-size: clamp(1.02rem, 1.42vw, 1.34rem);
}
.w3__thesis .h-sub--hot{ padding:0; }

/* ── PIPELINE: one-line head, one-line yellow sub, framed placeholders ── */
#pipeline .sechead--center .h-major{ max-width:none; }
#pipeline .sechead--center .h-sub{ max-width:none; margin-top:12px; }
@media (min-width: 900px){
  #pipeline .sechead--center .h-major,
  #pipeline .sechead--center .h-sub{ white-space:nowrap; }
}

/* each engine sits in its own frame; the text fills it instead of stopping
   short and leaving dead space on the right (client) */
.pipe-engine{
  border: 1px solid var(--line); padding: clamp(20px,2.4vw,30px);
  transition: border-color .3s ease, background .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.pipe-cols > .pipe-engine:first-child{ border-color: var(--line); border-top-color: var(--line); }
.pipe-engine__body{ max-width:none; }
@media (hover: hover){
  .pipe-engine:hover{ border-color: var(--accent); background: rgba(255,212,0,.05); transform: translateY(-3px); }
}

/* each of the six results in its own frame, still three left / three right */
.pipe-cols--chain{ gap: clamp(14px,1.8vw,24px); margin-top: clamp(18px,2.2vw,26px); }
.pipe-chain{ display:grid; gap: clamp(10px,1.2vw,14px); margin-top:0; }
.pipe-chain li:first-child{ border-top: 1px solid var(--line); }
.pipe-step{
  border: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(14px,1.8vw,20px) clamp(16px,2vw,24px);
  margin-inline: 0; align-items:center;
}
@media (hover: hover){
  .pipe-step:hover{
    background: rgba(255,212,0,.07); border-color: var(--accent);
    transform: translateY(-3px);
  }
  .pipe-step:hover .pipe-step__t{ transform:none; }
}
@media (max-width: 899px){
  .pipe-cols--chain{ gap: clamp(10px,1.2vw,14px); }
  .pipe-cols--chain .pipe-chain:last-child li:first-child{ border-top: 1px solid var(--line); }
}

/* ── QUESTION FLIP: two columns. Left = ink ground, white text.
   Right = yellow ground, black text. (Client is sending a sketch — refine then.) ── */
.pipeflip{ background: var(--bg); }
.pipeflip__img, .pipeflip__scrim{ display:none; }
.pipeflip__grid{ display:grid; gap:0; }
@media (min-width: 820px){ .pipeflip__grid{ grid-template-columns: 1fr 1fr; } }
.pipeflip__was, .pipeflip__now{
  padding: clamp(30px,4vw,60px) clamp(24px,3.4vw,52px);
  display:grid; align-content:center; min-height: clamp(220px,24vw,340px);
}
.pipeflip__was{ background: var(--bg-ink); color: var(--txt-inv); }
.pipeflip__was .note-mono{ color: var(--txt-inv-b); opacity:.7; }
.pipeflip__q{
  margin-top:14px; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.3rem,2.3vw,1.9rem); letter-spacing:-.02em;
  line-height:1.2; color: var(--txt-inv); opacity:1; max-width: 24ch;
}
.pipeflip__now{ background: var(--accent); color: var(--accent-on); }
.pipeflip__now .note-mono{ color: var(--accent-on); opacity:.72; }
.pipeflip__ask{
  margin-top:14px; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.3rem,2.3vw,1.9rem); letter-spacing:-.02em;
  line-height:1.2; color: var(--accent-on); max-width: 26ch;
}
.pipeflip__coda{
  margin-top: clamp(24px,3vw,40px); text-align:center;
  max-width:52ch; margin-inline:auto; color: var(--txt);
}


/* ══════════════════════════════════════════════════════════════════════
   2026-09-13 — CLIENT REVIEW PASS v6 (pre client-meeting)
   One-line close in the wealth-manager section, pipeline spacing, the
   full-bleed question band, and three rebuilt sections: Managers & Agents
   (image + two text columns), Performer (the four-stage line), Vision
   (image left, text right).
   ══════════════════════════════════════════════════════════════════════ */

/* ── NOT ANOTHER WEALTH MANAGER — "We help you become the owner." on one line ── */
@media (min-width: 900px){
  .nw-close--center .statement{ max-width:none; white-space:nowrap; }
}

/* ── PIPELINE — tighter gap between the engine frames and "The result:" ── */
.pipe-cols + .pipe-marker{ margin-top: clamp(22px, 2.6vw, 34px); }
#pipeline{ padding-bottom: clamp(36px, 4.4vw, 60px); }

/* ── QUESTION FLIP — full-bleed halves, normal spacing either side ── */
.pipeflip{ position:relative; background: var(--bg); padding-block: 0 clamp(40px, 5vw, 68px); }
.pipeflip__band{
  background: linear-gradient(90deg, var(--bg-ink) 0 50%, var(--accent) 50% 100%);
}
.pipeflip__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:0; }
.pipeflip__was, .pipeflip__now{
  background: transparent;
  min-height: clamp(220px, 22vw, 320px);
  padding-block: clamp(36px, 4.6vw, 64px);
}
.pipeflip__was{ padding-left: 0; padding-right: clamp(24px, 3.4vw, 56px); }
.pipeflip__now{ padding-right: 0; padding-left: clamp(24px, 3.4vw, 56px); }
.pipeflip__coda{ margin-top: clamp(22px, 2.6vw, 34px); }
@media (max-width: 819px){
  .pipeflip__band{ background: none; }
  .pipeflip__grid{ grid-template-columns: 1fr; padding-inline: 0; }
  .pipeflip__was{ background: var(--bg-ink); padding-inline: var(--gutter); }
  .pipeflip__now{ background: var(--accent); padding-inline: var(--gutter); }
}

/* ══════════ 08 · MANAGERS & AGENTS — picture / text / text ══════════ */
#managers .sechead{ margin-bottom: clamp(28px, 3.6vw, 48px); }

.mg3{ display:grid; gap: clamp(28px, 3.6vw, 52px); }
@media (min-width: 760px){
  .mg3{ grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; }
  .mg3__fig{ grid-column: 1 / -1; min-height: clamp(260px, 40vw, 380px); }
}
@media (min-width: 1100px){
  .mg3{
    grid-template-columns: minmax(0,.86fr) minmax(0,1.07fr) minmax(0,1.07fr);
    column-gap: clamp(34px, 3.4vw, 56px);
  }
  .mg3__fig{ grid-column: auto; min-height: 0; }
}

/* the picture fills the full row height, so its top and bottom are the row's */
.mg3__fig{ position:relative; margin:0; min-height: 300px; }
.mg3__fig img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: 50% 30%;
  filter: grayscale(.2) brightness(.9) contrast(1.03);
}
.mg3__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--line-ink);
}

/* text columns: flow from the top, closing statement pinned to the bottom —
   so both columns start and end on the same lines as the picture */
.mg3__col{ display:flex; flex-direction:column; gap: 12px; min-width:0; }
.mg3__col > *{ margin:0; }
.mg3__col > p:not([class]){
  font-size: clamp(.93rem, 1.02vw, 1rem); line-height:1.6; color: var(--txt-inv-b);
}
.mg3 .lede{
  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height:1.5;
  color: var(--txt-inv); max-width:none;
}
.mg3__col .mg3__stmt{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.12rem, 1.5vw, 1.36rem); line-height:1.22;
  letter-spacing:-.02em; color: var(--txt-inv);
}
.mg3__col .mg3__stmt--hot{ color: var(--accent); }
.mg3__col .mg3__lead{
  font-weight:600; font-size: clamp(.98rem, 1.1vw, 1.05rem);
  line-height:1.5; color: var(--txt-inv);
}
.mg3__beats{ display:grid; gap: 4px; }
.mg3__beats p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height:1.35;
  letter-spacing:-.012em; color: var(--txt-inv);
}
.mg3 .mathline{
  font-size: clamp(1.08rem, 1.5vw, 1.36rem); line-height:1.22;
  color: var(--txt-inv); margin-top: 4px;
}
.mg3 .roster{ margin-top: 0; }
.mg3 .roster__row{ padding-block: clamp(10px, 1.2vw, 14px); }
.mg3 .roster__q{ font-size: clamp(.98rem, 1.2vw, 1.12rem); color: var(--txt-inv-b); }
.mg3 .roster__a{ font-size: clamp(1.28rem, 1.9vw, 1.72rem); color: var(--accent); }
.mg3__col .mg3__end{ margin-top: auto; padding-top: 6px; }

/* ══════════ 09 · PERFORMER — the four stages on one straight line ══════════ */
.perf .container{ display:block; }
.perf .figband__img{ filter: grayscale(.45) brightness(.26) contrast(1.05); }
.perf .figband__scrim{
  background: linear-gradient(180deg, var(--bg-ink) 0%, rgba(10,10,11,.7) 18%,
              rgba(10,10,11,.72) 82%, var(--bg-ink) 100%);
}

.perf__head{ display:grid; gap: clamp(24px, 3.2vw, 44px); }
.perf__head .sechead{ margin-bottom: 0; }
@media (min-width: 980px){
  .perf__head{ grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items:end; }
}
.perf__intro{ display:grid; gap: 16px; }
@media (min-width: 640px){
  .perf__intro{
    grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
    align-items:end; gap: clamp(20px, 2.6vw, 36px);
  }
}
.perf__smart{ color: var(--txt-inv); max-width: 42ch; }

.perf__path{
  list-style:none; counter-reset: stage;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink);
}
.perf__stage{
  position:relative; counter-increment: stage;
  display:grid; align-content:start; gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(22px, 2.6vw, 36px) clamp(18px, 2vw, 30px) clamp(28px, 3.2vw, 44px);
  border-left: 1px solid var(--line-ink);
  transition: background .35s ease;
}
.perf__stage:first-child{ border-left: 0; padding-left: 0; }
.perf__stage::before{
  content: counter(stage, decimal-leading-zero);
  font-family: var(--font-mono); font-weight:500; font-size:.78rem;
  letter-spacing:.14em; color: var(--accent);
}
.perf__stage span, .perf__stage b{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.35rem, 2.25vw, 2.1rem); line-height:1.05;
  letter-spacing:-.028em; color: var(--txt-inv);
  transition: color .3s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.perf__stage--hot b{ color: var(--accent); }

/* the arrow sits ON the divider, carried by the later stage so it paints above
   the earlier one (each faded stage is its own stacking context) */
.perf__stage:not(:first-child)::after{
  content: '\2192'; position:absolute; left:0; top:50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; display:grid; place-items:center;
  background: var(--bg-ink); border: 1px solid var(--line-ink);
  color: var(--accent); font-size: .9rem; line-height:1;
}
@media (hover: hover){
  .perf__stage:hover{ background: rgba(255,212,0,.05); }
  .perf__stage:hover span, .perf__stage:hover b{ color: var(--accent); transform: translateY(-3px); }
  .perf__stage--hot:hover{ background: rgba(255,212,0,.09); }
}
@media (max-width: 899px){
  .perf__path{ grid-template-columns: 1fr; }
  .perf__stage{
    grid-template-columns: 3.4ch 1fr; align-items: baseline;
    border-left: 0; border-top: 1px solid var(--line-ink);
    padding: clamp(18px, 4vw, 24px) 0;
  }
  .perf__stage:first-child{ border-top: 0; }
  .perf__stage:not(:first-child)::after{
    content: '\2193'; left: auto; right: 0; top: 0; transform: translateY(-50%);
  }
}

.perf__foot{
  display:grid; gap: clamp(28px, 3.6vw, 52px);
  margin-top: clamp(36px, 4.6vw, 64px); align-items:start;
}
@media (min-width: 900px){ .perf__foot{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* ══════════ 10 · VISION — image left, text right ══════════ */
.vis2{ display:grid; gap: clamp(30px, 4vw, 60px); }
@media (min-width: 900px){
  .vis2{ grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: stretch; }
}
.vis2__fig{ position:relative; margin:0; min-height: clamp(300px, 38vw, 560px); }
.vis2__fig img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: 50% 35%;
  filter: grayscale(.15) brightness(.9) contrast(1.03);
}
.vis2__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--line-ink);
}
.vis2__body{
  display:flex; flex-direction:column; justify-content:center;
  gap: clamp(14px, 1.8vw, 22px); text-align:left;
}
.vis2__body .h-major{ margin-bottom: clamp(2px, .6vw, 8px); }
.vis2__body .lede{ max-width: 52ch; margin:0; }
.vis2__body .vision__own{ max-width: 46ch; margin:0; }
.vis2__body .vision__body{ max-width: 58ch; margin:0; }
.vis2__body .vision__mark{
  margin-top: clamp(6px, 1vw, 14px); max-width: 16ch;
  font-size: clamp(2rem, 3.8vw, 3.6rem); line-height:1.02;
}

@media (prefers-reduced-motion: reduce){
  .perf__stage span, .perf__stage b{ transition:none !important; transform:none !important; }
}


/* the v3 funnel left a 1px rail + indent on .pipe-chain: it drew a stray line
   beside the result frames and pushed them 32px off the engine frames above */
.pipe-chain{ border-left: 0; padding-left: 0; }


/* the six results split EXACTLY under the two engine frames: same column gap as
   the engines row, so frame edges line up (client: they "fit" CapitalQ and FDN) */
@media (min-width: 900px){
  .pipe-cols--chain{ column-gap: clamp(34px, 4.4vw, 68px); }
}


/* ══════════════════════════════════════════════════════════════════════
   2026-09-14 — CLIENT REVIEW PASS v7
   New photography across the page, Performer top restacked, and the Vision
   image side becomes an animated card stack (port of the client's
   AnimatedTestimonials reference).
   ══════════════════════════════════════════════════════════════════════ */

/* ── PERFORMER — right column: the smartest-talent line, lifelines under it ── */
@media (min-width: 640px){
  .perf__intro{ grid-template-columns: 1fr; align-items: start; gap: 18px; }
}
@media (min-width: 980px){
  .perf__head{ align-items: start; }
}
.perf__smart{ font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.55; max-width: 46ch; }

/* ── VISION — animated image stack ── */
.vstack{ position: relative; min-height: clamp(320px, 36vw, 520px); }
@media (min-width: 900px){ .vis2 .vstack{ align-self: stretch; } }
.vstack__card{
  position: absolute; inset: 0; margin: 0;
  transform-origin: 50% 100%;
  opacity: .7; scale: .95;
  transition: opacity .4s ease-in-out, scale .4s ease-in-out, rotate .4s ease-in-out;
  box-shadow: 0 22px 60px -24px rgba(0,0,0,.75);
}
.vstack__card img{
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.vstack__card::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-ink);
}
.vstack__nav{ display: flex; gap: 10px; margin-top: clamp(8px, 1.2vw, 16px); }
.vstack__btn{
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-ink); color: var(--txt-inv);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.vstack__btn svg{ width: 18px; height: 18px; transition: transform .3s ease; }
.vstack__btn:hover{ background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.vstack__prev:hover svg{ transform: rotate(12deg); }
.vstack__next:hover svg{ transform: rotate(-12deg); }
.vstack__btn:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  .vstack__card{ transition: none; }
}

/* ── HERO v7 — the handshake image. The two men sit centre-right, so the veil
   is no longer a flat left-half darkening (that would dim the left man's face):
   it is an ellipse pooled behind the copy block at bottom-left, plus a top fade
   for the header and a bottom fade for the marquee. Faces stay bright. ── */
.hero__art{
  background-image: url('../assets/img/hero-v7.jpg');
  background-size: cover;
  background-position: 100% 30%;
  filter: saturate(.97) contrast(1.03) brightness(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 13%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 13%);
}
.hero__bloom{
  background:
    radial-gradient(ellipse 66% 76% at 0% 80%, rgba(10,10,11,.95) 0%, rgba(10,10,11,.88) 40%,
                    rgba(10,10,11,.52) 70%, rgba(10,10,11,0) 100%),
    linear-gradient(90deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.28) 26%, rgba(10,10,11,0) 42%),
    linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.18) 12%, rgba(10,10,11,0) 22%,
                    rgba(10,10,11,0) 62%, rgba(10,10,11,.9) 100%);
}
@media (max-width: 900px){
  .hero__art{ background-position: 76% 30%; }
  .hero__bloom{
    background:
      linear-gradient(180deg, rgba(10,10,11,.8) 0%, rgba(10,10,11,.1) 18%, rgba(10,10,11,.25) 40%,
                      rgba(10,10,11,.84) 62%, rgba(10,10,11,.96) 100%);
  }
}

/* ── the new photography is warm and bright: drop the old grey knock-downs so
   the subjects read clearly (client: subjects shown fully and bright) ── */
.w3__fig img, .infsplit__fig img, .probfig__fig img, .mg3__fig img{
  filter: saturate(.98) contrast(1.02);
}
.infsplit__fig::after, .probfig__fig::after{
  background: none; box-shadow: inset 0 0 0 1px var(--line-ink);
}
/* object-position for every slot is set inline per image, computed from each
   subject's bounding box against the slot's measured shape at five widths */


/* ── MANAGERS — three columns only from 1200px. Between 1100 and 1199 the
   photo column squeezed to ~259x561, too narrow to hold the walking pair
   without cropping one of them. Tablet photo also gets taller so their full
   height survives the wide frame. ── */
@media (min-width: 1100px) and (max-width: 1199px){
  .mg3{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(28px,3.6vw,52px); }
  .mg3__fig{ grid-column: 1 / -1; }
}
@media (min-width: 760px) and (max-width: 1199px){
  .mg3__fig{ min-height: clamp(300px, 50vw, 520px); }
}

/* ── HERO on tablets/phones — at these widths the two men are wider than the
   screen, so "cover" can only ever show one of them. The photo instead sits in
   the top 62% of the hero at a size that holds both faces and the handshake,
   fading out at the top (header) and bottom (into the copy). ── */
@media (max-width: 900px){
  .hero__art{
    background-size: auto 62%; background-repeat: no-repeat;
    background-position: 79% 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 44%, transparent 62%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 44%, transparent 62%);
  }
}

/* white copy over the photograph without darkening the faces: a soft shadow
   carries legibility where the veil deliberately stops short of the subjects */
.hero .h-hero, .hero .hero__lede, .hero .kicker, .hero .hero__say p{
  text-shadow: 0 2px 22px rgba(10,10,11,.55), 0 1px 3px rgba(10,10,11,.35);
}


/* ── fixed frames where stretching to the text height made the photo too narrow
   to hold its people (measured: influence 434x553, vision stack 373x463 at
   900px). A 6:5 frame keeps both pairs and the group of four whole at every
   width; the photo centres against its text column instead. ── */
.infsplit__fig{ align-self: center; aspect-ratio: 6 / 5; min-height: 0; }
.vis2{ align-items: center; }
.vstack{ aspect-ratio: 6 / 5; min-height: 0; }
@media (min-width: 900px){ .vis2 .vstack{ align-self: center; } }


/* ══════════════════ 2026-09-19 — THE TALENT GALLERY (client, batch 7 · H1)
   "remove this image moving from left to right and right to left, that
    section after the hero... we are going to move it to this Talent Capital
    section, which should also come after the hero image part, and it should
    show more of celebrities, footballers, musicians, basically scrolling
    from left to right, that kind of gallery."

   Ported from the homepage marquee's motion (linear, endless, pause on
   hover) but rebuilt in the Talent Capital language: bigger panels, a
   portrait/landscape rhythm so it reads as a GALLERY WALL rather than a
   logo strip, and BOTH rows travelling LEFT → RIGHT at different rates so
   they never lock step. The gap lives on the TILES (margin-right), never
   as a track gap, so one set is exactly trackWidth/3 and the -33.333%
   keyframe loops seamlessly.

   Tone: the page's own yellow, not FDN's gold — a low-opacity var(--accent)
   wash in `overlay` over a desaturated base, so every photo carries the
   golden overlay the client keeps asking for without leaving the TC palette.
   ══════════════════════════════════════════════════════════════════════ */
.tcg{
  background: var(--bg-ink);
  overflow: hidden;
  padding-block: clamp(26px, 3.4vw, 46px);
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.1vw, 16px);
  position: relative;
}
/* hairline seam against the hero above and the light canvas below */
.tcg::before,
.tcg::after{
  content:''; position:absolute; left:0; right:0; height:1px; z-index:2;
  background: var(--line-ink); pointer-events:none;
}
.tcg::before{ top:0; }
.tcg::after{ bottom:0; }

/* 2026-09-19 FIX: the row used to `overflow:hidden`, which clipped the -6px
   hover lift AND the gold glow into nothing. Now the row clips HORIZONTALLY
   only — the edge mask is `no-repeat` at 100% x 260%, so it still fades the
   two ends and still cuts the travelling track at the row's sides, but it
   leaves vertical room for the lift and the halo. `padding-block` gives the
   tiles that room inside the row's own height. */
.tcg__row{
  overflow: visible;
  padding-block: clamp(10px, 1.1vw, 15px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-size: 100% 260%;     mask-size: 100% 260%;
  -webkit-mask-position: 50% 50%;   mask-position: 50% 50%;
}
.tcg__row--a{ height: clamp(258px, 27.7vw, 386px); }
.tcg__row--b{ height: clamp(174px, 18.7vw, 258px); }

.tcg__track{ display:flex; width:max-content; height:100%; will-change: transform; }
.tcg__set{ display:flex; height:100%; }

/* LEFT → RIGHT, both rows. The track starts one set to the left and walks
   back to 0, which reads as travel to the right. */
@keyframes tcgLTR{ from{ transform: translateX(-33.3333%); } to{ transform: translateX(0); } }
.tcg__row--a .tcg__track{ animation: tcgLTR 72s linear infinite; }
.tcg__row--b .tcg__track{ animation: tcgLTR 78s linear infinite; }
.tcg__row:hover .tcg__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .tcg__track{ animation: none !important; }
}

.tcg__tile{
  position: relative; flex: 0 0 auto; height: 100%;
  aspect-ratio: 3 / 2;                    /* landscape panel */
  margin-right: clamp(10px, 1.1vw, 16px);
  overflow: hidden; background: var(--bg-ink-2);
  transition: transform .55s cubic-bezier(.25,.1,.25,1), box-shadow .55s ease;
}
.tcg__tile--p{ aspect-ratio: 5 / 7; }     /* portrait panel — the rhythm break */

/* 2026-09-19 FIX: the old treatment was grayscale(.62) brightness(.74) on
   sources that were already near-black — half the band read as black
   rectangles. Lifted to a legible base, and the gold now comes from TWO
   layers: a sepia+hue-rotate pass here (which drags red and green sources
   onto the page's yellow) plus the ::before wash below. */
.tcg__tile img{
  width:100%; height:100%; object-fit: cover; object-position: 50% 45%;
  filter: grayscale(.35) sepia(var(--tcg-sepia, .35)) hue-rotate(-12deg)
          contrast(1.05) brightness(calc(.92 * var(--tcg-lift, 1))) saturate(1);
  transition: filter .6s cubic-bezier(.25,.1,.25,1), transform .8s cubic-bezier(.25,.1,.25,1);
}
/* Per-tile normalisation. Every tile declares its own --tcg-lift (and, where a
   source fought the gold, --tcg-sepia) inline next to its object-position, so
   the band's measured luminance sits in one band instead of an 8x spread. */

/* the golden overlay — the page's own yellow, held low */
.tcg__tile::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* 2026-09-19 FIX: rgba(255,212,0,.35) was a hard-coded yellow (G1). Now the
     token, mixed. Raised from .17 to .28 so saturated sources actually turn. */
  background: linear-gradient(168deg,
              var(--accent) 0%,
              color-mix(in srgb, var(--accent) 38%, transparent) 46%,
              transparent 100%);
  opacity:.28; mix-blend-mode: overlay;
  transition: opacity .6s ease;
}
/* base of the frame sinks into the ink so the band reads as one field */
.tcg__tile::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, transparent 62%, rgba(10,10,11,.34) 100%);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  transition: box-shadow .45s ease, background .45s ease;
}

.tcg__tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,.6), 0 0 34px 2px var(--accent-glow);
}
.tcg__tile:hover img{
  filter: grayscale(0) sepia(0) hue-rotate(0deg) contrast(1.03) brightness(1) saturate(1.04);
  transform: scale(1.055);
}
.tcg__tile:hover::before{ opacity:.06; }
.tcg__tile:hover::after{
  background: linear-gradient(180deg, transparent 60%, rgba(10,10,11,.38) 100%);
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (max-width: 880px){
  .tcg{ padding-block: clamp(20px, 5vw, 30px); gap: 8px; }
  .tcg__row{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  }
  .tcg__row{ padding-block: 7px; }
  .tcg__row--a{ height: 214px; }
  .tcg__row--b{ height: 146px; }
  .tcg__tile{ margin-right: 8px; }
  /* touch has no hover — keep the photographs readable without it */
  .tcg__tile img{
    filter: grayscale(.28) sepia(var(--tcg-sepia, .35)) hue-rotate(-12deg)
            contrast(1.04) brightness(calc(1 * var(--tcg-lift, 1))) saturate(1.02);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   2026-09-21 — CLIENT BATCH 8, track "tc-core" (TC-1, TC-5, TC-12, TC-16)
   Appended block. The SQUARE-CORNER GUARD below must stay last.
   Palette note: Talent Capital keeps ITS OWN yellow (--accent #FFD400).
   No FDN gold on this page.
   ══════════════════════════════════════════════════════════════════════ */

/* ── TC-1 · GALLERY — one tile size in both rows, opposite directions ──
   Client: "images on the top are bigger than images on the bottom… make sure
   all of them are the same size. One sliding left to right, another sliding
   right to left."
   Both rows now share ONE height and every tile shares ONE aspect ratio, so
   every tile is literally identical in size. The height sits between the two
   old ones so neither row collapses. */
.tcg__row--a,
.tcg__row--b{ height: clamp(212px, 22.2vw, 310px); }
.tcg__tile{ aspect-ratio: 3 / 2; }

/* row B reverses: the track walks from 0 to -33.3333%, which reads as travel
   to the LEFT while row A still reads as travel to the RIGHT. */
@keyframes tcgRTL{ from{ transform: translateX(0); } to{ transform: translateX(-33.3333%); } }
.tcg__row--b .tcg__track{ animation-name: tcgRTL; }

@media (max-width: 880px){
  .tcg__row--a,
  .tcg__row--b{ height: 176px; }
}

/* ── TC-5 · THE CAST — nothing shows until hover or click ──
   Client: "nobody should show. We don't want their details to show until you
   click on them… or hover. Once you remove your hover, their details does not
   show." Same behaviour as T-BIO on the FDN Team page: hover previews, click
   PINS (survives the pointer leaving), clicking the pinned one again clears it. */
.cast__scrim,
.cast__tag{
  opacity: 0;
  transition: opacity .32s cubic-bezier(.25,.1,.25,1);
}
.cast__item:hover .cast__scrim,
.cast__item:focus-visible .cast__scrim,
.cast__item.is-sel .cast__scrim,
.cast__item:hover .cast__tag,
.cast__item:focus-visible .cast__tag,
.cast__item.is-sel .cast__tag{ opacity: 1; }

.cast__item.is-sel{ border-color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce){
  .cast__scrim, .cast__tag{ transition: none; }
}

/* ── TC-12 · the coda moves INSIDE the black/yellow band ──
   Client: "move it into the black and yellow section, give it a white
   background, let it stay in the middle… the white space we currently have
   won't be there anymore." */
.pipeflip{ padding-block: 0; }
/* the band was sized for a coda that sat outside it — with the plate inside,
   the two columns no longer need the old min-height or the tall bottom pad */
.pipeflip__was, .pipeflip__now{
  min-height: clamp(176px, 16vw, 236px);
  padding-block: clamp(32px, 3.6vw, 50px) clamp(18px, 2vw, 26px);
}
.pipeflip__codawrap{
  position: relative; z-index: 1;
  padding-bottom: clamp(30px, 3.8vw, 56px);
  display: flex; justify-content: center;
}
.pipeflip__coda{
  margin: 0; max-width: 58ch; text-align: center;
  background: var(--bg); color: var(--txt-hi);
  border: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 30px) clamp(24px, 3.2vw, 46px);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.7vw, 1.34rem);
  letter-spacing: -.018em; line-height: 1.32;
  position: relative; isolation: isolate;
}
@media (max-width: 819px){
  /* the band drops its 50/50 gradient below 820px, so the coda strip carries
     the ink itself — otherwise the white plate lands on a white page and
     disappears, which is the opposite of what the client asked for. */
  .pipeflip__codawrap{
    background: var(--bg-ink);
    padding: clamp(26px,6vw,36px) var(--gutter) clamp(30px,7vw,42px);
  }
  .pipeflip__coda{ max-width: none; }
}

/* ── TC-16 · CONTACT MODAL ──
   Client: "add Contact Us to the header of Talent Capital… when people click
   it a pop-up form comes out, like the form on the FDN contact page."
   Fields, validation and endpoint are the FDN contact form's; the SKIN is
   Talent Capital's own palette. */
.mobmenu__link--btn{
  text-align: left; width: 100%; background: none;
  color: inherit; cursor: pointer;
}

.tcm{
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 40px);
}
.tcm[hidden]{ display: none; }
.tcm__backdrop{
  position: absolute; inset: 0;
  background: rgba(10,10,11,.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: tcmFade .22s ease;
}
@keyframes tcmFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes tcmRise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

.tcm__dialog{
  position: relative; z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100vh - 2 * clamp(16px, 3vw, 40px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.6);
  padding: clamp(26px, 3.4vw, 46px);
  animation: tcmRise .28s cubic-bezier(.25,.1,.25,1);
}
@media (prefers-reduced-motion: reduce){
  .tcm__backdrop, .tcm__dialog{ animation: none; }
}
.tcm__x{
  position: absolute; top: 12px; right: 12px;
  width: 42px; height: 42px; display: inline-flex;
  align-items: center; justify-content: center;
  background: none; border: 1px solid transparent;
  color: var(--txt-dim); font-size: 1.05rem; cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.tcm__x:hover{ color: var(--txt-hi); border-color: var(--line); }
.tcm__x:focus-visible{ outline: 3px solid var(--accent-deep); outline-offset: 2px; }

.tcm__kick{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-deep);
}
.tcm__title{
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: -.026em; line-height: 1.08; color: var(--txt-hi);
}
.tcm__lede{ margin-top: 12px; max-width: 54ch; color: var(--txt); }
.tcm__form{ margin-top: clamp(22px, 2.6vw, 30px); }

/* the fields — Talent Capital has no form styles of its own yet, so the FDN
   contact form's field language is rebuilt here in this page's palette. */
.frow{ display: grid; gap: 16px; }
@media (min-width: 620px){ .frow{ grid-template-columns: 1fr 1fr; } }
.tcm__form > * + *{ margin-top: 16px; }
.fld{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld__lbl{
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: -.005em; color: var(--txt-hi);
}
.fld__lbl i{ font-style: normal; color: var(--accent-deep); }
.fld__in{
  width: 100%; font: inherit; color: var(--txt-hi);
  background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.fld__in::placeholder{ color: var(--txt-dim); }
.fld__in:hover{ border-color: var(--txt-dim); }
.fld__in:focus{
  outline: none; background: var(--bg);
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.fld__in.is-bad{ border-color: #B3261E; background: #FDF3F2; }
.fld__area{ resize: vertical; min-height: 130px; line-height: 1.55; }
.fld__selwrap{ position: relative; }
.fld__sel{ appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.fld__caret{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--txt-dim); pointer-events: none; font-size: .8rem;
}
.tcm__act{ margin-top: 24px; }
.tcm__ok{
  margin-top: 16px; padding: 12px 16px;
  background: var(--bg-soft); border-left: 3px solid var(--accent);
  color: var(--txt-hi);
}
body.tcm-open{ overflow: hidden; }

@media (max-width: 620px){
  /* full-height sheet: stretch, never centre — centring a 100vh child inside a
     100vh flex parent can leave it a few px off the top on a real phone */
  .tcm{ padding: 0; align-items: stretch; }
  .tcm__dialog{
    width: 100%; max-height: 100vh; min-height: 100vh;
    border: 0; border-top: 3px solid var(--accent);
    padding: 58px var(--gutter) 40px;
  }
}

/* ── TC-16 FIX · the header ghost CTA on the TRANSPARENT header ──
   Defect found in review: .btn--ghost is a light-ground component
   (color: var(--txt-hi) = #121213). The header is NOT .on-ink, so at the top
   of the page the "Contact Us" label sat as near-black ink on the near-black
   hero photograph — measured 1.0:1 – 1.4:1, i.e. invisible until the visitor
   scrolled and .hdr--solid put a light glass ground behind it.
   The .hdr__cta--contact hook already existed in the markup with no rule.
   Fix: give the transparent state the same on-dark treatment the design
   system already defines in .on-ink .btn--ghost (#F4F8FB on ink ≈ 17:1).
   Deliberately NOT a yellow fill — "Visit FDN" is the primary header CTA and
   must keep that weight on its own. The scrolled .hdr--solid capsule is
   untouched and still carries the dark ink. */
.hdr:not(.hdr--solid) .hdr__cta--contact{
  color: var(--txt-inv);
  border-color: var(--line-ink);
}
.hdr:not(.hdr--solid) .hdr__cta--contact:hover,
.hdr:not(.hdr--solid) .hdr__cta--contact:focus-visible{
  border-color: var(--txt-inv);
  background: rgba(244,248,251,.08);
}

/* ── CORRECTION (client, 2026-09-21) · the two header actions are a PAIR ──
   "I expected this Visit FDN and Contact Us to be close to each other, but
   they are far apart." .hdr__inner is justify-content:space-between, so the
   two buttons were pushed 54px apart — exactly the same distance as every
   other gap in the bar, which is why they read as two separate items.
   An auto margin on the first CTA absorbs ALL the free space before
   space-between can distribute it, so the pair closes up to one small gap and
   sits together at the right. Nothing else about the bar changes. */
.hdr__inner{ gap: 12px; }
.hdr__cta--contact{ margin-left: auto; }

/* ══════════════════ SQUARE-CORNER GUARD — keep LAST ══════════════════ */
/* Client-wide taste, same standing rule as FDN + GateQ. Never fight it. */
*, *::before, *::after{ border-radius: 0 !important; }