/* ============================================================
   Turner & Barnett — Variant 2 "Midnight Authority"
   Dark cinematic editorial. Bodoni Moda display over deep navy,
   restrained gold, hairline rules, full-bleed vertical acts.
   ============================================================ */

/* ---------- font swap (V2 ONLY) ----------
   Midnight Authority evolves off Bodoni Moda onto Playfair Display.
   The --font-serif-bodoni token is redefined here, scoped to this
   page only (shared/ stays frozen) — every one of the 19 rules below
   that reference the token pick up Playfair automatically. */
:root {
  --font-serif-bodoni: var(--font-serif);
}

/* ---------- canvas-wide ---------- */

body {
  background: var(--navy);
  color: var(--off-white);
}

::selection {
  background: var(--gold);
  color: var(--navy-deep);
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

section[id] { scroll-margin-top: 2rem; }

/* Film grain — tiny repeating SVG noise tile via data URI, sits over
   everything at 4% so the dark plates read as photographic film. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- shared vocabulary ---------- */

.eyebrow {
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.32em;
}

.section-head {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}

.section-title {
  font-family: var(--font-serif-bodoni);
  font-weight: 560;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  color: var(--off-white);
  margin-top: 1.6rem;
}

.section-intro {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(248, 247, 244, 0.78);
}

.rule {
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(197, 160, 84, 0.55), rgba(197, 160, 84, 0.12));
}

.rule--short {
  width: 3.25rem;
  margin-inline: auto;
  background: var(--gold);
  opacity: 0.75;
}

.tnum,
.hero__est,
.hero__support,
.footer__legal,
.act__numeral {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

.btn--gold {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}

.btn--gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.btn--hairline {
  border-color: rgba(197, 160, 84, 0.5);
  color: var(--off-white);
  background: transparent;
}

.btn--hairline:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.btn:focus-visible {
  outline-color: var(--gold-light);
  outline-offset: 5px;
}

/* Press feedback — C4. Pure CSS, no JS needed. */
.btn:active {
  transform: scale(0.97);
  transition: transform 0.12s var(--ease-out);
}

/* Cursor-attracted lean underline — C11. Nav + footer text links only,
   never buttons. --lean is set by JS (pointer:fine only); the base
   state is a hidden hairline that scales in on hover/focus and always
   leans a little toward the cursor's X position. */
.site-nav a,
.footer__privacy {
  position: relative;
}

.site-nav a::after,
.footer__privacy::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0) translateX(var(--lean, 0px));
  transform-origin: center;
  transition: transform 0.3s var(--ease-out);
  pointer-events: none;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.footer__privacy:hover::after,
.footer__privacy:focus-visible::after {
  transform: scaleX(1) translateX(var(--lean, 0px));
}

.footer__privacy {
  text-decoration: none;
}

/* ---------- header ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-block: 1.6rem;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.brand {
  text-decoration: none;
  flex: none;
}

.brand__word {
  position: relative;
  font-family: var(--font-serif-bodoni);
  font-weight: 540;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--off-white);
  white-space: nowrap;
}

/* Wordmark hover acknowledgment — C10 */
.brand__word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s var(--ease-out);
}

.brand:hover .brand__word::after,
.brand:focus-visible .brand__word::after {
  transform: scaleX(1);
}

.amp {
  color: var(--gold);
  font-style: italic;
  font-weight: 460;
  transition: color 0.2s var(--ease-out);
}

.brand:hover .amp,
.brand:focus-visible .amp {
  color: var(--gold-light);
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
}

.site-nav a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, 0.72);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.site-nav a:hover {
  color: var(--off-white);
  border-color: var(--gold);
}

.header-cta {
  padding: 0.72rem 1.25rem;
  flex: none;
}

/* ---------- editorial menu trigger + full-bleed overlay (C1) ----------
   Native <details>/<summary>: the closed state is pure CSS (browsers
   already hide non-summary children of a closed <details>), so the
   trigger and the section links work with zero JS. JS only enhances:
   staggered entrance, Esc-to-close, focus trap, scroll lock. */
.mobile-menu { display: none; }

@media (max-width: 1120px) {
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .mobile-menu { display: block; }
}

.mobile-menu > summary.menu-trigger {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--off-white);
  padding: 0.5rem 0.15rem;
  transition: color 0.25s var(--ease-out);
}

.mobile-menu > summary.menu-trigger::-webkit-details-marker,
.mobile-menu > summary.menu-trigger::marker { display: none; content: ""; }

.mobile-menu > summary.menu-trigger:hover,
.mobile-menu > summary.menu-trigger:focus-visible { color: var(--gold-light); }

.menu-trigger__close { display: none; }
.mobile-menu[open] .menu-trigger__open { display: none; }
.mobile-menu[open] .menu-trigger__close { display: inline; }

.mobile-menu[open] > summary.menu-trigger {
  position: fixed;
  top: 1.4rem;
  right: var(--gutter);
  z-index: 41;
  color: var(--gold-light);
}

.mobile-menu__panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: 2rem;
  text-align: center;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.mobile-menu__nav a {
  font-family: var(--font-serif-bodoni);
  font-weight: 550;
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  color: var(--off-white);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(197, 160, 84, 0.35);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible { color: var(--gold-light); border-color: var(--gold); }

/* Under reduced motion / no motion-ready, entrance is instant (no JS
   stagger runs) — this rule only ever gets a stagger when JS adds the
   .is-open class inside TBMotion.init's territory. Default: fully
   visible, so no-JS and reduced-motion visitors see the menu at once. */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__nav a, .mobile-menu__cta { opacity: 1 !important; transform: none !important; }
}

/* ---------- pinned header return (C2) ----------
   A compact fixed bar that fades/translates in once the hero scrolls
   past. Hidden by default (JS sets the visible state); if JS never
   runs the visitor still has the full in-flow header at the top of
   the page, so nothing is ever unreachable. */
.pinned-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(197, 160, 84, 0.32);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.pinned-bar.is-visible { pointer-events: auto; }

.pinned-bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.85rem;
}

.pinned-bar .brand__word { font-size: 1.05rem; }

.pinned-bar .header-cta {
  padding: 0.6rem 1.1rem;
  font-size: 0.7rem;
}

/* Progress-linked ampersand monogram — replaces the old detached
   scroll-progress line; one progress signal, live in the pinned bar. */
.pinned-bar__monogram {
  position: relative;
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  font-size: 1.1rem;
  line-height: 1;
  font-family: var(--font-serif-bodoni);
  font-style: italic;
  margin-right: 0.2rem;
}

.pinned-bar__monogram-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pinned-bar__monogram-glyph--track {
  color: transparent;
  -webkit-text-stroke: 1px rgba(197, 160, 84, 0.32);
}

.pinned-bar__monogram-glyph--fill {
  color: var(--gold);
  clip-path: inset(0% 100% 0% 0%);
}

@media (max-width: 480px) {
  .site-header { padding-block: 1.15rem; }
  .header-inner { gap: 0.75rem; }
  .brand__word { font-size: 1.05rem; }
  .header-cta {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    padding: 0.55rem 0.8rem;
  }
  .pinned-bar__inner { gap: 0.6rem; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
  padding-block: clamp(7.5rem, 18vh, 11rem) clamp(4.5rem, 10vh, 7rem);
}

.hero__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 18, 38, 0.88) 0%,
    rgba(15, 27, 53, 0.7) 46%,
    rgba(10, 18, 38, 0.95) 100%
  );
}

/* The monogram stage: a static hairline '&' by default; when motion is
   live the canvas replaces it and the particles draw the same glyph. */
.hero__mark {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(82vmin, 680px);
  aspect-ratio: 500 / 600;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 1;
}

/* A quiet gold glow behind the locked mark — a glow, not a blob:
   soft, low-opacity, concentrated near the glyph's optical centre. */
.hero__mark::before {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(
    circle at 50% 52%,
    rgba(197, 160, 84, 0.22) 0%,
    rgba(197, 160, 84, 0.09) 38%,
    transparent 70%
  );
  pointer-events: none;
}

/* A very soft navy scrim behind the hero copy so the larger, brighter
   mark never fights the headline for legibility. */
.hero__content::before {
  content: "";
  position: absolute;
  inset: -6% -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 48%, rgba(10, 18, 38, 0.4), transparent 72%);
}

.hero__monogram {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__monogram-glyph {
  font-family: var(--font-serif-bodoni);
  font-size: 540px;
  font-weight: 600;
  fill: none;
  stroke: var(--gold);
  stroke-opacity: 0.55;
  stroke-width: 1.25;
}

.hero__canvas {
  display: none;
  width: 100%;
  height: 100%;
}

html.motion-ready .hero__canvas { display: block; }
html.motion-ready .hero__monogram { display: none; }

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.hero__layer { will-change: transform; }

.hero__eyebrow { font-size: 0.72rem; }

.hero__layer--title { margin-top: 1.8rem; }

.hero__title {
  font-family: var(--font-serif-bodoni);
  font-weight: 600;
  font-size: clamp(2.55rem, 7vw, 5.9rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--off-white);
}

/* Hero headline reveal — per-line clip-path unveil, driven entirely by
   GSAP JS inside TBMotion.init (see js/variant.js). The raw text is
   always fully visible in the DOM; no CSS here can hide it, so no-JS
   and reduced-motion visitors see plain, complete text by default. */
.hero-line {
  display: block;
}

.hero__layer--est { margin-top: 1.7rem; }

.hero__est {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, 0.66);
}

.hero__est::before,
.hero__est::after {
  content: "";
  height: 1px;
  width: clamp(1.75rem, 6vw, 3.5rem);
  background: rgba(197, 160, 84, 0.45);
}

.hero__layer--subline { margin-top: 2rem; }

.hero__subline {
  font-size: var(--fs-lead);
  line-height: 1.72;
  color: rgba(248, 247, 244, 0.86);
  max-width: 42rem;
  margin-inline: auto;
}

.hero__layer--actions { margin-top: 2.7rem; }

.hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__layer--support { margin-top: 1.6rem; }

.hero__support {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(248, 247, 244, 0.6);
  overflow-wrap: anywhere;
}

.hero__support a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(197, 160, 84, 0.35);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.hero__support a:hover {
  color: var(--gold-light);
  border-color: var(--gold);
}

/* ---------- the firm: title card ---------- */

/* A quiet full-width act on near-black — the "who we are" title card
   between the opening shot and the three acts. A soft pool of light
   sits behind the type so the panel reads as lit set, not dead slab. */
.firm {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 68% 52% at 50% 44%, rgba(26, 45, 82, 0.5), transparent 72%),
    var(--navy-deep);
  padding-block: clamp(6rem, 15vh, 10.5rem);
  text-align: center;
}

/* Quiet gold data-line texture behind the firm title card — kept low
   enough that it reads as ambient ground, not artwork competing with
   the copy. The scroll drift lives in js/variant.js (§12), gated
   inside TBMotion.init so reduced-motion/no-JS visitors just see the
   static plate. */
.firm__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.1;
  pointer-events: none;
  will-change: transform;
}

.firm__inner { position: relative; z-index: 1; }

/* Letterspaced gold eyebrow between flanking hairlines — same
   grammar as the EST line in the hero. */
.firm__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: 0.72rem;
}

.firm__eyebrow::before,
.firm__eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(1.75rem, 6vw, 3.5rem);
  background: rgba(197, 160, 84, 0.45);
}

.firm__title { margin-top: 1.7rem; }

.firm__body {
  margin-top: clamp(1.9rem, 4.5vh, 2.6rem);
  max-width: 41rem;
  margin-inline: auto;
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  line-height: 1.9;
  color: rgba(248, 247, 244, 0.88);
}

/* The closing beat, set like the systems' kill lines: Bodoni italic
   in gold. Dark ground, so --gold-light keeps its contrast. */
.firm__flare {
  font-family: var(--font-serif-bodoni);
  font-style: italic;
  font-weight: 480;
  font-size: 1.06em;
  color: var(--gold-light);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .firm__eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    gap: 0.7rem;
  }
  .firm__eyebrow::before,
  .firm__eyebrow::after { width: 1.1rem; }
  .firm__flare { white-space: normal; }
}

/* ---------- the stakes: verified stat ledger ---------- */

/* A ruled ledger spread ported from V1's "Private Bank" annual-report
   treatment, re-set in gold-on-navy: box rules like a printed table,
   not a startup metrics wall. */
.stakes {
  position: relative;
  background:
    radial-gradient(ellipse 60% 46% at 50% 0%, rgba(197, 160, 84, 0.06), transparent 70%),
    var(--navy);
  /* A touch more breathing room pre-pin (choreography audit) */
  padding-block: clamp(7rem, 17vh, 11.5rem);
}

.stakes__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: 0.72rem;
}

.stakes__eyebrow::before,
.stakes__eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(1.75rem, 6vw, 3.5rem);
  background: rgba(197, 160, 84, 0.45);
}

.rule--gold { background: var(--gold); opacity: 0.55; }

.stats-rule {
  max-width: 40rem;
  margin: clamp(2.4rem, 5vh, 3.5rem) auto;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 54rem;
  margin-inline: auto;
  border-top: 1px solid rgba(197, 160, 84, 0.35);
  border-left: 1px solid rgba(197, 160, 84, 0.35);
}

.stat {
  position: relative;
  border-right: 1px solid rgba(197, 160, 84, 0.35);
  border-bottom: 1px solid rgba(197, 160, 84, 0.35);
  padding: clamp(2rem, 4vw, 2.8rem) clamp(1.5rem, 3.5vw, 2.6rem);
  text-align: left;
}

.stat__figure {
  display: block;
  font-family: var(--font-serif-bodoni);
  font-weight: 560;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: color 0.3s var(--ease-out);
}

.stat:hover .stat__figure { color: var(--gold-light); }

.stat__line {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(248, 247, 244, 0.86);
  max-width: 34ch;
}

.stat__source {
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, 0.58); /* ≥5.6:1 on navy — 0.42 measured 3.87:1, an a11y fail */
  line-height: 1.5;
}

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; max-width: 30rem; }
}

/* ---------- the six-percent takeover ----------
   Static panel in normal flow by default — the whole story (kicker,
   heading, line) is legible with no JS and no scroll trick. When
   TBMotion boots, variant.js adds .six--overlay and pins #stakes to
   scroll-zoom this panel from the "6%" cell above until it fills the
   frame, then releases into #how-it-works. */
.six {
  position: relative;
  width: 100%;
  max-width: none;
  margin-top: clamp(4rem, 9vh, 6rem);
  padding: clamp(3.25rem, 9vh, 5.5rem) clamp(1.5rem, 6vw, 4rem);
  text-align: center;
  border: 1px solid rgba(197, 160, 84, 0.32);
  background:
    radial-gradient(ellipse 68% 62% at 50% 38%, rgba(197, 160, 84, 0.1), transparent 72%),
    var(--navy-deep);
}

.six__figure {
  font-family: var(--font-serif-bodoni);
  font-weight: 620;
  font-size: clamp(6rem, 17vw, 12.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.six__copy {
  margin-top: clamp(1rem, 3vh, 1.8rem);
  max-width: 38rem;
  margin-inline: auto;
}

.six__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: 0.72rem;
}

.six__kicker::before,
.six__kicker::after {
  content: "";
  height: 1px;
  width: clamp(1.5rem, 5vw, 3rem);
  background: rgba(197, 160, 84, 0.45);
}

.six__heading {
  margin-top: 1.1rem;
  font-family: var(--font-serif-bodoni);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--off-white);
}

.six__line {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: rgba(248, 247, 244, 0.88);
}

/* JS-only state: converts the static panel into a full-bleed overlay
   during the pinned scroll. Class is only ever added inside
   TBMotion.init, so the page under reduced motion / no-JS never
   reaches this rule.
   `.six` (not `#stakes`) is now the element GSAP pins directly, so it
   becomes `position: fixed` itself for the duration of the pin — no
   absolute-positioned-relative-to-a-different-ancestor trick needed.
   Height needs no special handling: this class already forces
   100vh/100dvh regardless of position, so it's correct both before
   and during the pin. Width/left are trickier — see .six--pin-active
   below. */
.six--overlay {
  /* Fixed to one viewport height so the panel always fills the frame
     it's pinned in, on any screen — including once the stat ledger
     (already scrolled past by the time this engages) drops to one
     column on mobile. */
  height: 100vh;
  height: 100dvh;
  z-index: 8;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none;
  background: var(--navy-deep);
}

/* GSAP's pin snapshots the element's box via getBoundingClientRect()
   at setup time — while `.six` still sits at its normal in-flow
   position inside `.container` (centred, gutter padding) — and
   freezes that exact px left/width/max-width as INLINE styles, applied
   whether or not the pin is currently active, so plain CSS can never
   win against them (only `!important` does — and only once we know
   the pin is genuinely active; applying `width: 100vw` at all times
   would blow the layout out while `.six` is still in normal flow,
   since `left` acts as a *relative* offset there, not a viewport
   coordinate). variant.js toggles this class in the pin's
   onEnter/onEnterBack/onLeave/onLeaveBack callbacks, exactly bracketing
   the window where GSAP has actually swapped `.six` to
   `position: fixed`. */
.six--overlay.six--pin-active {
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Traveling "6%" figure — the true FLIP subject for the takeover (Part
   A). Fixed-position, sits above the backdrop while it flies from the
   ledger cell to the panel's centre; hidden by default (opacity 0,
   only ever made visible by JS inside the pin timeline). Reduced
   motion / no-JS visitors never see this element move — the static
   ledger and the static .six panel already tell the whole story. */
.six-travel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  margin: 0;
  font-family: var(--font-serif-bodoni);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

/* A short vertical hairline that draws from the six panel's lower
   edge as the next section head enters — the post-climax handoff
   (choreography gap 3), instead of a hard cut into #how-it-works. */
.six__handoff {
  display: block;
  width: 1px;
  height: clamp(3rem, 8vh, 5rem);
  margin: clamp(1.5rem, 5vh, 3rem) auto 0;
  background: linear-gradient(180deg, var(--gold), transparent);
  transform: scaleY(0);
  transform-origin: top center;
}

.stakes__close {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-serif-bodoni);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  color: var(--off-white);
}

/* ---------- how it works: full-bleed acts ---------- */

.how {
  background: var(--navy);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

.acts { margin-top: clamp(1rem, 4vh, 3rem); }

.act {
  position: relative;
  min-height: 88vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.act > * { grid-area: 1 / 1; }

.act__numeral {
  font-family: var(--font-serif-bodoni);
  font-weight: 500;
  font-size: clamp(11rem, 34vw, 30rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy-light);
  opacity: 0.32;
  user-select: none;
  pointer-events: none;
  justify-self: center;
  align-self: center;
}

.act__body {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  padding-inline: var(--gutter);
  text-align: center;
}

.act__title {
  font-family: var(--font-serif-bodoni);
  font-weight: 550;
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  line-height: 1.12;
  color: var(--off-white);
}

.act__text {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: rgba(248, 247, 244, 0.8);
}

.how__closewrap {
  text-align: center;
  max-width: 46rem;
  margin-top: clamp(1rem, 4vh, 3rem);
}

.how__close {
  margin-top: 1.8rem;
  font-family: var(--font-serif-bodoni);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.5;
  color: var(--off-white);
}

/* ---------- section-seam hairlines (C7) ----------
   One gold line per background-tone boundary — draws as the seam
   itself crosses ~85% viewport, handing off instead of a hard cut.
   Sits right at the section's top edge, not inside the padded
   section-head content below it. */
.seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 160, 84, 0.65) 50%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  pointer-events: none;
}

/* ---------- the first three systems ---------- */

.systems {
  position: relative;
  background: var(--navy-mid);
}

.systems__list {
  list-style: none;
  padding: 0;
  margin-top: clamp(3rem, 8vh, 5rem);
}

.system { padding-top: clamp(2.5rem, 6vh, 4rem); }

.system__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding-block: clamp(1.5rem, 4vh, 2.5rem) clamp(2.5rem, 6vh, 4rem);
}

/* Thin gold schematic icons, one per system — engineering-drawing
   register: hairline stroke, no fill, no rounded/playful shapes. */
.system__icon {
  display: block;
  width: clamp(40px, 5vw, 52px);
  height: clamp(40px, 5vw, 52px);
  margin-bottom: 0.9rem;
  overflow: visible;
}

.system__icon path,
.system__icon circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.system__numeral {
  display: block;
  font-family: var(--font-serif-bodoni);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  transition: color 0.25s var(--ease-out);
}

.system:hover .system__numeral,
.system:focus-within .system__numeral { color: var(--gold-light); }

.system__name {
  margin-top: 1rem;
  font-family: var(--font-serif-bodoni);
  font-weight: 560;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--off-white);
}

.system__kill {
  position: relative;
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-serif-bodoni);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--gold-light);
}

/* Thin gold underline draws under the kill line on hover/focus — same
   scaleX grammar as the founders' name-rule (C6). */
.system__kill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}

.system:hover .system__kill::after,
.system:focus-within .system__kill::after { transform: scaleX(1); }

.system__desc {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(248, 247, 244, 0.82);
  align-self: center;
}

@media (max-width: 780px) {
  .system__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .system__desc { align-self: start; }
}

/* ---------- who we work with ---------- */

.who { position: relative; overflow: hidden; background: var(--navy); }

/* Sparse gold contour band behind "who we work with" — same quiet
   ground treatment as .firm__bg, tuned slightly lower since this
   section carries more body copy end to end. */
.who__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0.08;
  pointer-events: none;
  will-change: transform;
}

#who-its-for > .container { position: relative; z-index: 1; }

.who__body {
  margin-top: clamp(2rem, 5vh, 3rem);
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--off-white);
  text-align: center;
}

.who__niches {
  margin-top: 1.6rem;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(248, 247, 244, 0.78);
  text-align: center;
}

.who__buyer {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  font-family: var(--font-serif-bodoni);
  font-weight: 540;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.4;
  color: var(--off-white);
  text-align: center;
}

.who__not {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  border: 1px solid rgba(197, 160, 84, 0.28);
  background: rgba(10, 18, 38, 0.45);
  padding: 1.7rem 2rem;
  text-align: center;
}

.who__not p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(248, 247, 244, 0.68);
}

/* ---------- proof ---------- */

.proof { position: relative; background: var(--navy-deep); }

.proof__panel {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
  border: 1px solid rgba(197, 160, 84, 0.42);
  outline: 1px solid rgba(197, 160, 84, 0.14);
  outline-offset: 7px;
  padding: clamp(2.5rem, 7vw, 5rem);
  background: linear-gradient(180deg, rgba(15, 27, 53, 0.4), rgba(10, 18, 38, 0.1));
  text-align: center;
}

/* Gold frame draws in on scrub through who-its-for/proof — fills the
   55–73% depth dead zone with the page's existing rule-draw vocabulary
   (C6). Top/bottom hairlines only, kept restrained. */
.proof__frame-line {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
}

.proof__frame-line--top { top: -1px; transform-origin: left center; }
.proof__frame-line--bottom { bottom: -1px; transform-origin: right center; }

.proof__title { margin-top: 0; }

.proof__text {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  line-height: 1.9;
  color: var(--off-white);
  text-align: left;
}

.proof__figure {
  font-family: var(--font-serif-bodoni);
  font-weight: 600;
  font-size: 1.85em;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--gold-light);
  padding-inline: 0.06em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .proof__figure { font-size: 1.4em; white-space: normal; }
}

/* ---------- founders: two-voice unveil ----------
   Ported from V4's asymmetric 12-column layout: Michael unveils from
   the left with a right-hand vertical tag, Marcus mirrors from the
   right with everything reading right-aligned. Dark-adapted: navy
   host behind each portrait, gold name-rules, off-white ink at
   reduced opacity for tags/titles/bio. */
.founders { position: relative; background: var(--navy); }

.founders__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 9vh, 6rem);
  max-width: 68rem;
  margin-inline: auto;
  margin-top: clamp(3rem, 8vh, 5rem);
}

.founder {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
}

.founder__frame { margin: 0; min-width: 0; }

.founder__unveil {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  /* Lifted a notch off navy-deep so the clip-path wipe front has a
     tone to reveal against (Part B: the wipe was dark-on-dark and
     unreadable before this). */
  background: var(--navy-mid);
  border: 1px solid rgba(197, 160, 84, 0.4);
}

/* Contained overscan crop: the img renders ~115% of its frame so a
   slow scrub-driven translateY reads as living depth as you pass the
   portrait, without ever showing the frame edge (Part B). The crop
   wrapper clips; GSAP animates the img's own y, so no CSS transform
   is declared here for it to fight with. */
.founder__unveil-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.founder__unveil img {
  position: absolute;
  inset: -7.5% 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.03);
  transition: filter 0.4s var(--ease-out);
}

.founder:hover .founder__unveil img,
.founder:focus-within .founder__unveil img {
  filter: saturate(1.02) contrast(1.03);
}

/* Travelling gold leading edge on the wipe front — a thin bright line
   that rides the clip-path boundary so the reveal is readable on dark
   (Part B). Positioned by JS as the clip-path animates; hidden until
   motion starts the unveil. */
.founder__wipe-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-light), transparent);
  box-shadow: 0 0 12px 1px rgba(212, 176, 106, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.founder--michael .founder__wipe-edge { right: 0; }
.founder--marcus .founder__wipe-edge { left: 0; }

.founder--michael .founder__frame { grid-column: 1 / 7; grid-row: 1; }
.founder--michael .founder__tag   { grid-column: 7 / 8; grid-row: 1; }
.founder--michael .founder__text  { grid-column: 8 / 13; grid-row: 1; }

.founder--marcus .founder__text  { grid-column: 1 / 6; grid-row: 1; text-align: right; }
.founder--marcus .founder__tag   { grid-column: 6 / 7; grid-row: 1; }
.founder--marcus .founder__frame { grid-column: 7 / 13; grid-row: 1; }

.founder__tag {
  writing-mode: vertical-rl;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: rgba(248, 247, 244, 0.58);
  justify-self: center;
  align-self: center;
  white-space: nowrap;
}

.founder--michael .founder__tag { transform: rotate(180deg); }

.founder__name {
  font-family: var(--font-serif-bodoni);
  font-weight: 580;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--off-white);
}

.founder__name-rule {
  display: block;
  width: min(100%, 9rem);
  height: 2px;
  background: var(--gold);
  margin-top: 0.85rem;
  transform: scaleX(1);
  transform-origin: left center;
}

.founder--marcus .founder__name-rule {
  margin-left: auto;
  transform-origin: right center;
}

.founder__meta {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, 0.58);
  line-height: 1.8;
}

.founder__bio {
  margin-top: 1.2rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(248, 247, 244, 0.86);
  max-width: 34rem;
}

.founder--marcus .founder__bio { margin-left: auto; }

@media (max-width: 860px) {
  .founder { display: block; }
  .founder__frame { max-width: 28rem; }

  .founder__tag {
    writing-mode: horizontal-tb;
    justify-self: start;
    margin-top: 1.6rem;
  }

  .founder--michael .founder__tag { transform: none; }

  .founder__text { margin-top: 0.9rem; }

  .founder--marcus .founder__text { text-align: left; }
  .founder--marcus .founder__name-rule { margin-left: 0; }
  .founder--marcus .founder__bio { margin-left: 0; }
}

/* ---------- faq ---------- */

.faq { position: relative; background: var(--navy-mid); }

.faq__list {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid rgba(197, 160, 84, 0.3);
}

.faq__item { border-top: 1px solid rgba(197, 160, 84, 0.3); }

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.55rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif-bodoni);
  font-weight: 530;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.3;
  color: var(--off-white);
  transition: color 0.25s var(--ease-out);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q:hover { color: var(--gold-light); }

.faq__mark {
  flex: none;
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  align-self: center;
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform 0.3s var(--ease-out);
}

.faq__mark::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.faq__mark::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.faq__item[open] .faq__mark::after { transform: scaleY(0); }

/* Animated open/close (C3) — pure CSS grid-rows technique, no JS
   required. Native <details> semantics stay intact; this wrapper is
   what animates while [open] toggles the row template. Asymmetric
   timing: opening is the slower, eased "reveal" (350ms power2.out),
   closing is quicker (260ms power2.in) — expressed as two rules keyed
   off the [open] attribute so each direction gets its own duration. */
.faq__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s cubic-bezier(0.55, 0, 1, 0.45);
}

.faq__item[open] .faq__a-wrap {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__a {
  /* padding-block is 0 while closed (not just opacity 0) — a 0fr
     grid row can't fully collapse past a child's own padding, so the
     padding itself has to animate out too, or a several-px sliver of
     empty space would persist between closed questions. */
  min-height: 0;
  overflow: hidden;
  padding: 0 0;
  max-width: 40rem;
  line-height: 1.78;
  color: rgba(248, 247, 244, 0.78);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out), padding-block 0.26s cubic-bezier(0.55, 0, 1, 0.45);
}

.faq__item[open] .faq__a {
  padding: 0.2rem 0 1.9rem;
  opacity: 1;
  transition: opacity 0.2s var(--ease-out) 0.15s, padding-block 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .faq__a-wrap { transition: none; }
  .faq__a { transition: none; }
}

/* ---------- cta ---------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  text-align: center;
  padding-block: clamp(7rem, 18vh, 11rem);
}

.cta__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 38, 0.72);
}

/* A quiet callback to the momentum rings from the Experience chapter
   — sits above the scrim so it reads as its own faint texture rather
   than being crushed into the silk plate's darkening. */
.cta__momentum {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.12;
  pointer-events: none;
  will-change: transform;
}

.cta__content {
  position: relative;
  z-index: 1;
}

.cta__title {
  font-family: var(--font-serif-bodoni);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--off-white);
}

.cta__body {
  margin-top: 1.8rem;
  font-size: var(--fs-lead);
  line-height: 1.78;
  color: rgba(248, 247, 244, 0.88);
  overflow-wrap: anywhere;
}

.cta__body a {
  color: var(--off-white);
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 84, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease-out);
}

.cta__body a:hover { color: var(--gold-light); }

.cta__action { margin-top: 2.6rem; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid rgba(197, 160, 84, 0.25);
  padding-block: 3.2rem;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  text-align: center;
}

.footer__brand {
  font-family: var(--font-serif-bodoni);
  font-weight: 540;
  font-size: 1.15rem;
  color: var(--off-white);
}

.footer__legal {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(248, 247, 244, 0.55);
  overflow-wrap: anywhere;
}

.footer__privacy {
  font-size: 0.8rem;
  color: rgba(248, 247, 244, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 84, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.25s var(--ease-out);
}

.footer__privacy:hover { color: var(--gold-light); }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .hero__mark { opacity: 0.62; }
  .hero__est {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    gap: 0.7rem;
  }
  .hero__est::before,
  .hero__est::after { width: 1.1rem; }
  .hero__actions .btn {
    width: 100%;
    max-width: 21rem;
    text-align: center;
  }
  .act { min-height: 72vh; }
  .who__not { padding: 1.4rem 1.3rem; }
}

@media (max-height: 620px) {
  .act { min-height: auto; padding-block: 4.5rem; }
}