/* ─────────────────────────────────────────────────────────────
   Anshul Grover — pitch site
   Two palettes, chosen with data-theme on <body>:
     "dark"  — LeadsIcon black and gold (default)
     "light" — the pale periwinkle / navy of the layout reference
   All type, artwork and code original. Gold is the LeadsIcon mark.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Archivo Expanded";
  src: url("../assets/fonts/archivo-expanded.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter var";
  src: url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
}

:root {
  --gold:    #D3B169;          /* constant across both palettes */

  --display: "Archivo Expanded", "Arial Black", system-ui, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:    "Inter var", -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease:    cubic-bezier(.7, .6, 0, 1);
  --pad:     clamp(1.1rem, 2.6vw, 2.4rem);
}

/* LeadsIcon — black ground, near-white type, gold accent */
body[data-theme="dark"] {
  --ground:    #0A0A0A;
  --fg:        #FAFAFA;
  --muted:     rgba(250, 250, 250, .52);
  --panel:     #151515;        /* overlay + hero media well */
  --panel-fg:  #FAFAFA;
  --hairline:  rgba(250, 250, 250, .14);
  --card-bg:   rgba(250, 250, 250, .05);
  --card-bg-h: rgba(250, 250, 250, .1);
  --motif:     rgba(250, 250, 250, .2);
}

/* the layout reference's own palette */
body[data-theme="light"] {
  --ground:    #C8CDDD;
  --fg:        #1F2B5E;
  --muted:     #626C95;
  --panel:     #1F2B5E;
  --panel-fg:  #FFFFFF;
  --hairline:  rgba(255, 255, 255, .14);
  --card-bg:   rgba(255, 255, 255, .05);
  --card-bg-h: rgba(255, 255, 255, .1);
  --motif:     rgba(255, 255, 255, .24);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--ground);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* ── preloader ──────────────────────────────────────────────── */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ground);
  transition: opacity .7s var(--ease), visibility .7s;
}
body.is-ready #preloader { opacity: 0; visibility: hidden; }

.preloader__count {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ── page shell ─────────────────────────────────────────────── */

.page {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--pad);
  gap: clamp(.8rem, 2vh, 2rem);
}

/* ── nav ────────────────────────────────────────────────────── */

.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.wordmark {
  grid-column: 2;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.72rem, 1.15vw, .95rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-link {
  grid-column: 3;
  justify-self: end;
  font-size: .82rem;
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.28em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* reveal choreography — held back until the preloader clears */
.site-nav, .site-footer {
  opacity: 0;
  transition: opacity .9s var(--ease) .1s;
}
body.is-ready .site-nav,
body.is-ready .site-footer { opacity: 1; }

/* ── hero ───────────────────────────────────────────────────── */

.hero {
  display: grid;
  place-items: center;
  min-height: 0;
}
.hero-stack {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  width: 100%;
  min-height: 0;
}
.hero-stack > * { grid-area: stack; }

.marquee { width: 100%; text-align: center; overflow: hidden; }
.marquee__text {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 14.5vw, 15rem);
  line-height: 1.04;   /* not .9 — .marquee clips overflow, and caps would shear */
  letter-spacing: -.03em;
  white-space: nowrap;
  transform: translateY(102%);
  transition: transform 1.1s var(--ease) .15s;
}
body.is-ready .marquee__text { transform: translateY(0); }

.hero-visual {
  z-index: 2;
  width: clamp(130px, 19vw, 300px);
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 1.15s var(--ease) .35s;
}
body.is-ready .hero-visual { clip-path: inset(0 0 0 0); }

.hero-visual video,
.hero-visual img,
.hero-visual__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* stand-in until the motion graphic lands */
.hero-visual__placeholder {
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--motif);
}
.hero-visual__motif { width: 58%; animation: drift 24s linear infinite; }
@keyframes drift { to { transform: rotate(360deg); } }

/* ── footer: mark left, sphere dead centre ──────────────────── */

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
}
.footer-mark {
  grid-column: 1;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.explore {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.explore__orb {
  width: clamp(54px, 6vw, 84px);
  height: auto;
  animation: float 5.5s ease-in-out infinite;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  will-change: transform;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.explore__label {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  transition: color .4s var(--ease);
}
.explore:hover .explore__orb,
.explore:focus-visible .explore__orb {
  transform: scale(1.09);
  filter: drop-shadow(0 8px 26px rgba(211, 177, 105, .5));
}
.explore:hover .explore__label { color: var(--gold); }
.explore:focus-visible { outline: 1px solid var(--gold); outline-offset: 10px; }

/* ── selection overlay ──────────────────────────────────────── */

#selection-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  gap: clamp(.9rem, 2.4vh, 2rem);
  background: var(--panel);
  color: var(--panel-fg);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  /* hidden by opacity + [inert], not visibility: focus cannot move into a
     visibility:hidden subtree, which broke moving focus to the close button */
  transition: opacity .65s var(--ease);
}
body.menu-open #selection-menu { opacity: 1; pointer-events: auto; }

.selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.selection-head__title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}
.selection-close {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.selection-close:hover { background: var(--card-bg-h); border-color: var(--gold); }
.selection-close:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.selection-cards {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 1.6vh, 1.4rem);
  min-height: 0;
}

/* three labelled bands over the same eight cards — the sequence stays 01→08,
   and Acts I and II run 2-up so the deepest work is simply bigger */
.act { display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.act--wide { flex: 1.25 1 0; }
.act--tight { flex: 1 1 0; }

.act__label {
  display: flex;
  align-items: baseline;
  gap: .8em;
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  flex: 0 0 auto;
}
.act__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.act__name { color: var(--muted); letter-spacing: .14em; }

.act__row {
  flex: 1 1 auto;
  display: grid;
  gap: clamp(.5rem, 1vw, 1rem);
  min-height: 0;
}
.act--wide  .act__row { grid-template-columns: repeat(2, 1fr); }
.act--tight .act__row { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--card-bg);
  transition: background .5s var(--ease);
  opacity: 0;
  transform: translateY(14px);
}
body.menu-open .card {
  opacity: 1;
  transform: none;
  transition: background .5s var(--ease),
              opacity .6s var(--ease) calc(.08s + var(--i, 0) * .055s),
              transform .6s var(--ease) calc(.08s + var(--i, 0) * .055s);
}
.card:hover { background: var(--card-bg-h); }
.card:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }

.card__cover {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  color: var(--motif);
  overflow: hidden;
}
.card__cover svg {
  width: min(52%, 150px);
  height: auto;
  transition: transform .7s var(--ease), color .5s var(--ease);
}
.card:hover .card__cover svg { transform: scale(1.12) rotate(6deg); }
.card:hover .card__cover { color: var(--gold); }

.card__body {
  flex: 0 0 auto;
  padding: clamp(.8rem, 1.2vw, 1.3rem);
  border-top: 1px solid var(--hairline);
}
.card__index {
  display: block;
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: .7em;
}
.card__title {
  display: block;
  font-size: clamp(.82rem, 1.05vw, 1rem);
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: .45em;
}
.card__desc {
  display: block;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--muted);
}

/* the one card that already has something live behind it */
.card--live .card__index::after {
  content: "· live";
  margin-left: .8em;
  letter-spacing: .1em;
}

/* stubs read as deliberate, not broken */
.card[data-stub] { cursor: default; }
.card[data-stub] .card__index::after {
  content: "· soon";
  margin-left: .8em;
  letter-spacing: .1em;
  color: var(--muted);
}

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .selection-cards { overflow-y: auto; }
  .act--wide, .act--tight { flex: 0 0 auto; }
  .act--wide .act__row, .act--tight .act__row { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(180px, 1fr); }
}

@media (max-width: 640px) {
  body { overflow: auto; }
  .page { min-height: 100svh; height: auto; }
  .marquee__text { font-size: 17vw; }
  .hero-visual { width: 44vw; }
  .act--wide .act__row, .act--tight .act__row { grid-template-columns: 1fr; grid-auto-rows: minmax(150px, auto); }
  .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 1.8rem; }
  .footer-mark { grid-column: 1; order: 2; }
  .explore { grid-column: 1; order: 1; }
}

/* if the script never runs, show the finished state rather than a blank page */
@media (scripting: none) {
  #preloader { display: none; }
  .site-nav, .site-footer { opacity: 1; }
  .marquee__text { transform: none; }
  .hero-visual { clip-path: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee__text { transform: none; }
  .hero-visual { clip-path: none; }
}

/* ═════════════════════════════════════════════════════════════
   CARD PAGES
   Written against real content, not as an empty template.
   Every section leads with its claim in display type; evidence
   sits underneath. Skim the big lines and you have the argument.
   ═════════════════════════════════════════════════════════════ */

body.card-page { overflow: auto; height: auto; }
.wrap { max-width: 1060px; margin: 0 auto; padding: var(--pad); }

/* ── header + act rail ──────────────────────────────────────── */

.top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-block: .4rem 3rem; }
.top__home { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.top__home:hover { color: var(--fg); }

.railing { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.railing__act { display: flex; align-items: center; gap: .4rem; }
.railing__tag { font-size: .55rem; letter-spacing: .2em; color: var(--muted); margin-right: .2rem; }
.dot {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  font-size: .56rem; letter-spacing: .04em;
  border: 1px solid var(--hairline); border-radius: 50%;
  color: var(--muted);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.dot:hover { color: var(--fg); border-color: var(--fg); }
.dot[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: #0A0A0A; font-weight: 600; }

/* ── the opening claim ──────────────────────────────────────── */

.open { padding-bottom: clamp(2rem, 6vh, 4rem); }
.open__eyebrow { font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0; }
.open__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; margin: .55em 0 0; }
.open__claim {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 2.5vw, 1.9rem);
  line-height: 1.3; letter-spacing: -.02em;
  margin: 1.1em 0 0; max-width: 24ch;
}
.open__claim em { font-style: normal; color: var(--gold); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin-top: clamp(2rem, 5vh, 3rem); background: var(--hairline); border: 1px solid var(--hairline); }
.tile { background: var(--ground); padding: 1.15rem 1.2rem; }
.tile__v { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2.1rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile__l { display: block; margin-top: .55em; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }

/* ── sections ───────────────────────────────────────────────── */

.sec { border-top: 1px solid var(--hairline); padding-block: clamp(2.2rem, 6vh, 3.6rem); }
.sec__n { font-size: .6rem; letter-spacing: .22em; color: var(--gold); margin: 0; }
.sec__claim { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.7rem); line-height: 1.28; letter-spacing: -.02em; margin: .75em 0 0; max-width: 26ch; }
.sec__body { margin-top: 1.3em; max-width: 66ch; font-size: .93rem; line-height: 1.68; color: var(--muted); }
.sec__body p { margin: 0 0 1em; }
.sec__body p:last-child { margin-bottom: 0; }
.sec__body strong { color: var(--fg); font-weight: 500; }

/* ── bars: single hue, emphasis on the bar that carries the story ── */

.chart { margin-top: 2rem; }
.chart__cap { font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.bars { display: grid; gap: .5rem; }
.bar { display: grid; grid-template-columns: minmax(90px, 9.5rem) 1fr 2.6rem; align-items: center; gap: .9rem; }
.bar__l { font-size: .75rem; color: var(--muted); line-height: 1.3; }
.bar__track { height: 10px; background: var(--card-bg); border-radius: 5px; overflow: hidden; }
.bar__fill { display: block; height: 100%; width: calc(var(--pct) * 1%); background: var(--muted); border-radius: 0 4px 4px 0; }
.bar__v { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.bar--lead .bar__l, .bar--lead .bar__v { color: var(--fg); }
.bar--lead .bar__fill { background: var(--gold); }

/* ── verbatim evidence ──────────────────────────────────────── */

.quote { margin: 1.8rem 0 0; padding: 1.15rem 1.3rem; border-left: 2px solid var(--gold); background: var(--card-bg); font-size: .92rem; line-height: 1.6; }
.quote cite { display: block; margin-top: .7em; font-style: normal; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.lines { margin-top: 1.8rem; display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.line { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; padding: .85rem 1.1rem; background: var(--ground); font-size: .84rem; line-height: 1.5; }
.line__id { color: var(--gold); font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .06em; }

/* ── audit trail ────────────────────────────────────────────── */

.trail { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-top: 1.8rem; }
.trail__i { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: var(--ground); transition: background .35s var(--ease); }
.trail__i:hover { background: var(--card-bg-h); }
.trail__n { font-size: .9rem; }
.trail__m { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.trail__i:hover .trail__m { color: var(--gold); }
a.trail__i .trail__n { border-bottom: 1px solid transparent; }
a.trail__i:hover .trail__n { border-color: var(--gold); }

/* ── chain + prev/next ──────────────────────────────────────── */

.chain { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; padding: 1.15rem 1.3rem; border-left: 2px solid var(--gold); background: var(--card-bg); margin-block: clamp(2rem, 5vh, 3rem); }
.chain__t { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.chain__b { font-size: .92rem; line-height: 1.55; }
.chain__b a { border-bottom: 1px solid var(--hairline); }
.chain__b a:hover { border-color: var(--gold); color: var(--gold); }

.pn { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-block: 2rem 3.5rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.pn a { color: var(--muted); }
.pn a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .bar { grid-template-columns: minmax(74px, 7rem) 1fr 2.2rem; gap: .6rem; }
  .line { grid-template-columns: 1fr; gap: .3rem; }
}

.sec__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  padding: .1em .4em;
  background: var(--card-bg);
  border-radius: 3px;
  color: var(--fg);
}

/* ── awareness-stage selector: five stages, two chosen ───────── */

.stages { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.8rem; }
.stage {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .55em .9em;
  border: 1px solid var(--hairline); border-radius: 100px;
  color: var(--muted);
}
.stage--on { border-color: var(--gold); color: var(--gold); }
.stage--off { text-decoration: line-through; opacity: .5; }

/* ── the two segments, side by side ─────────────────────────── */

.pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-top: 2rem; }
.seg { background: var(--ground); padding: 1.4rem 1.4rem 1.5rem; }
.seg__n { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0; }
.seg__block { font-family: var(--display); font-weight: 600; font-size: clamp(.92rem, 1.5vw, 1.1rem); line-height: 1.35; letter-spacing: -.015em; margin: 1em 0 0; }
.seg__dl { margin: 1.3em 0 0; font-size: .8rem; line-height: 1.55; }
.seg__dl dt { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 1em; }
.seg__dl dt:first-child { margin-top: 0; }
.seg__dl dd { margin: .35em 0 0; color: var(--fg); }

/* ── traceability: a claim and where it shipped ─────────────── */

.trace { margin-top: 2rem; display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.trace__r { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 1.4rem; padding: 1.15rem 1.25rem; background: var(--ground); }
.trace__k { font-size: .82rem; font-weight: 500; line-height: 1.4; }
.trace__k span { display: block; margin-top: .5em; font-size: .78rem; font-weight: 400; color: var(--muted); line-height: 1.55; }
.trace__v { font-size: .78rem; line-height: 1.55; color: var(--muted); }
.trace__v strong { color: var(--gold); font-weight: 500; display: block; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .5em; }

.pull {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 1.55rem);
  line-height: 1.35; letter-spacing: -.02em;
  margin: 2.2rem 0 0; padding-left: 1.3rem;
  border-left: 2px solid var(--gold);
  max-width: 32ch;
}
.pull cite { display: block; margin-top: .9em; font-family: var(--sans); font-style: normal; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 720px) {
  .pair { grid-template-columns: 1fr; }
  .trace__r { grid-template-columns: 1fr; gap: .9rem; }
}

/* ── document blocks — the research, shown not described ────── */

.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1vw, .9rem); margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.doc-block {
  display: flex; flex-direction: column;
  min-height: 190px;
  padding: 1.05rem 1.05rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.doc-block:hover { background: var(--card-bg-h); transform: translateY(-3px); }
.doc-block__n { font-size: .58rem; letter-spacing: .2em; color: var(--gold); }
.doc-block__t { font-family: var(--display); font-weight: 600; font-size: .86rem; line-height: 1.25; letter-spacing: -.015em; margin: .85em 0 0; }
.doc-block__d { margin: .7em 0 0; font-size: .72rem; line-height: 1.5; color: var(--muted); }
.doc-block__o { margin-top: auto; padding-top: 1rem; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.doc-block:hover .doc-block__o { color: var(--gold); }

/* ── the checklist — what was actually covered ──────────────── */

.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(2rem, 5vh, 3.2rem); }
.checks__g { min-width: 0; }
.checks__h { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 1em; padding-bottom: .7em; border-bottom: 1px solid var(--hairline); }
.checks__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.checks__l li { display: grid; grid-template-columns: 1em 1fr; gap: .6em; font-size: .78rem; line-height: 1.4; color: var(--fg); }
.checks__l li::before { content: "✓"; color: var(--gold); font-size: .78rem; line-height: 1.4; }
.checks__l li span { color: var(--muted); }

/* ── the reading view for a rendered document ───────────────── */

.wrap--doc { max-width: 820px; }
.doc { font-size: .92rem; line-height: 1.7; color: var(--muted); padding-bottom: 3rem; }
.doc h2, .doc h3, .doc h4, .doc h5 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  color: var(--fg); line-height: 1.22;
}
.doc h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); margin: 2.4em 0 .7em; padding-top: 1.6rem; border-top: 1px solid var(--hairline); }
.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h3 { font-size: clamp(1.02rem, 1.9vw, 1.22rem); margin: 2em 0 .6em; }
.doc h4, .doc h5 { font-size: .92rem; margin: 1.7em 0 .5em; color: var(--gold); }
.doc p { margin: 0 0 1.15em; }
.doc strong { color: var(--fg); font-weight: 500; }
.doc em { color: var(--fg); font-style: italic; }
.doc ul, .doc ol { margin: 0 0 1.3em; padding-left: 1.25em; }
.doc li { margin-bottom: .55em; }
.doc li::marker { color: var(--gold); }
.doc blockquote { margin: 1.6em 0; padding: .9em 1.2em; border-left: 2px solid var(--gold); background: var(--card-bg); color: var(--fg); }
.doc hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.4em 0; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; padding: .1em .4em; background: var(--card-bg); border-radius: 3px; color: var(--fg); }
.doc a { color: var(--gold); border-bottom: 1px solid var(--hairline); }
.doc a:hover { border-color: var(--gold); }
.doc__scroll { overflow-x: auto; margin: 0 0 1.5em; border: 1px solid var(--hairline); }
.doc table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.doc th, .doc td { text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.doc th { color: var(--gold); font-weight: 500; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.doc tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 1024px) {
  .docs   { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .docs   { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .doc-block { min-height: 0; }
}

/* ── three numbered steps ───────────────────────────────────── */

.steps { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.step { display: grid; grid-template-columns: 3.4rem 1fr; gap: clamp(1rem, 2.5vw, 2rem); padding: clamp(1.3rem, 3vw, 2rem) clamp(1.2rem, 2.5vw, 1.8rem); background: var(--ground); align-items: start; }
.step__n { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--gold); letter-spacing: -.02em; line-height: 1.1; }
.step__t { font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 2vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; margin: 0; }
.step__d { margin: .85em 0 0; font-size: .86rem; line-height: 1.6; color: var(--muted); max-width: 58ch; }
.step__d strong { color: var(--fg); font-weight: 500; }
.step__link { display: inline-block; margin-top: .9em; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--hairline); }
.step__link:hover { border-color: var(--gold); }

/* ── the library: the page's real destination ───────────────── */

.big {
  display: block;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding: clamp(2rem, 5vw, 3.6rem);
  background: var(--card-bg);
  border: 1px solid var(--gold);
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.big:hover { background: var(--card-bg-h); transform: translateY(-3px); }
.big__k { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin: 0; }
.big__t {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.03em;
  margin: .45em 0 0;
}
.big__d { margin: 1.1em 0 0; font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.big__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(1.6rem, 4vw, 2.4rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--hairline); }
.big__facts { display: flex; gap: clamp(1.4rem, 4vw, 3rem); flex-wrap: wrap; }
.big__f { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.big__f b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.6rem); letter-spacing: -.02em; color: var(--fg); margin-bottom: .35em; text-transform: none; }
.big__cta {
  display: inline-flex; align-items: center; gap: .7em;
  padding: .9em 1.6em;
  background: var(--gold); color: #0A0A0A;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.big:hover .big__cta { gap: 1.1em; }
.big__cta span { transition: transform .4s var(--ease); }
.big:hover .big__cta span { transform: translateX(3px); }

@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .big__row { flex-direction: column; align-items: flex-start; }
}

/* ── three deliverables side by side ────────────────────────── */

.bigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); margin-top: clamp(2rem, 5vh, 3.4rem); }
.bigs .big { margin-top: 0; padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; }
.bigs .big__t { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.bigs .big__d { font-size: .82rem; margin-top: .9em; }
.bigs .big__row { margin-top: auto; padding-top: 1.4rem; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.bigs .big__cta { padding: .8em 1.3em; font-size: .68rem; }
.bigs .big__f b { font-size: clamp(1.4rem, 2.6vw, 2rem); }

@media (max-width: 900px) { .bigs { grid-template-columns: 1fr; } }

/* ── lander showcase ────────────────────────────────────────── */

.landers { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1vw, .9rem); margin-top: clamp(2rem, 5vh, 3.2rem); }
.lander {
  display: flex; flex-direction: column;
  padding: 1.2rem 1.15rem 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.lander:hover { background: var(--card-bg-h); border-color: var(--gold); transform: translateY(-3px); }
.lander__k { display: flex; align-items: baseline; gap: .7em; }
.lander__l { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--gold); letter-spacing: -.02em; }
.lander__tag { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lander__t { font-family: var(--display); font-weight: 600; font-size: .92rem; line-height: 1.25; letter-spacing: -.015em; margin: .7em 0 0; }
.lander__w { margin: .7em 0 0; font-size: .76rem; line-height: 1.5; color: var(--muted); }
.lander__o { margin-top: auto; padding-top: 1.1rem; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lander:hover .lander__o { color: var(--gold); }

@media (max-width: 900px) { .landers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .landers { grid-template-columns: 1fr; } }

/* ── radar output ───────────────────────────────────────────── */

.stories { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-bottom: 3rem; }
.story { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.2rem; padding: 1.2rem 1.3rem; background: var(--ground); }
.story__s { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.story__t { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--fg); }
.story__t a:hover { color: var(--gold); }
.story__m { margin: .5em 0 0; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.story__a { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: .45em; }
.story__a li { font-size: .82rem; line-height: 1.45; padding-left: 1.1em; position: relative; color: var(--fg); }
.story__a li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }
.story__a li.none { color: var(--muted); font-style: italic; }
.story__a li.none::before { content: "—"; }

/* ── a module that is designed but not yet built ────────────── */

.lander--soon, .big--soon { border-style: dashed; }
.lander--soon:hover, .big--soon:hover { transform: none; border-color: var(--hairline); background: var(--card-bg); }
.soon { color: var(--muted); }
.status { display: inline-block; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; padding: .4em .7em; border: 1px solid var(--hairline); color: var(--muted); }
.status--live { border-color: var(--gold); color: var(--gold); }

/* a card that links to a page for work still being built */
.card--soon .card__index::after {
  content: "· soon";
  margin-left: .8em;
  letter-spacing: .1em;
  color: var(--muted);
}


/* ── hero inset: the film, looping silently ─────────────────── */

button.hero-visual { padding: 0; border: 0; background: none; cursor: pointer; display: block; position: relative; }
.hero-visual__v { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the play control is always on — watching the film is the first thing to do */
.hero-visual__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .9em;
  color: var(--ground);
  background: linear-gradient(to bottom, rgba(6,6,6,.1), rgba(6,6,6,.55));
}
.hero-visual__btn {
  display: grid; place-items: center;
  width: clamp(48px, 5.4vw, 68px);
  aspect-ratio: 1;
  padding-left: .18em;                 /* optically centre the triangle */
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 0 rgba(211,177,105,.55);
  animation: ping 2.6s cubic-bezier(.4,0,.6,1) infinite;
  transition: transform .5s var(--ease);
}
@keyframes ping {
  0%   { box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 0   rgba(211,177,105,.5); }
  70%  { box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 18px rgba(211,177,105,0); }
  100% { box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 0   rgba(211,177,105,0); }
}
.hero-visual__cap {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--panel-fg);
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.hero-visual:hover .hero-visual__btn,
.hero-visual:focus-visible .hero-visual__btn { transform: scale(1.09); }
.hero-visual:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }

/* ── the film, full screen ──────────────────────────────────── */

#film {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: #060606;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
body.film-open #film { opacity: 1; pointer-events: auto; }
.film__frame { width: min(100%, 1280px); aspect-ratio: 16 / 9; background: #000; }
.film__v { width: 100%; height: 100%; display: block; }
.film__x {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: none; color: var(--panel-fg); cursor: pointer;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.film__x:hover { border-color: var(--gold); background: rgba(255,255,255,.08); }
.film__x:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* ── About: a dialog that layers over whatever is already open ─ */

.about-open-btn {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none; border: 0; padding: 0;
  cursor: pointer; font-family: inherit;
  transition: color .4s var(--ease);
}
.about-open-btn:hover { color: var(--gold); }
.about-open-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* sits above the work overlay (50) and the film (80) so neither has to close */
#about {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(4, 4, 4, .72);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
body.about-open #about { opacity: 1; pointer-events: auto; }

.about__sheet {
  position: relative;
  width: min(100%, 580px);
  display: grid;
  grid-template-columns: 170px 1fr;
  background: var(--panel);
  border: 1px solid var(--hairline);
  transform: translateY(10px) scale(.985);
  transition: transform .45s var(--ease);
}
body.about-open .about__sheet { transform: none; }

.about__media { background: var(--card-bg); display: grid; place-items: center; overflow: hidden; }
/* stretch explicitly: the parent sets place-items:center, which would otherwise
   shrink-wrap the image instead of filling the column. 20% keeps the face in
   frame when the panel goes 16/10 on narrow screens. */
.about__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 20%;
  align-self: stretch; justify-self: stretch;
}
.about__fallback {
  font-family: var(--display); font-weight: 600;
  font-size: 2rem; letter-spacing: -.02em; color: var(--gold);
}

.about__body { padding: clamp(1.4rem, 3vw, 2rem); }
.about__k { font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin: 0; }
.about__n {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: -.025em; line-height: 1.1;
  margin: .45em 0 0; color: var(--panel-fg);
}
.about__l { list-style: none; margin: 1.3em 0 0; padding: 0; display: grid; gap: .7em; }
/* NOT grid: a grid li turns every inline child (<b>, each <a>) into its own
   grid item, so "$10M+" and the fun links each broke onto their own row.
   An absolutely positioned dash keeps the line as one normal text flow. */
.about__l li {
  position: relative; padding-left: 1.6em;
  font-size: .85rem; line-height: 1.5; color: var(--panel-fg);
}
.about__l li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--gold); }
.about__l b { font-weight: 500; color: var(--gold); }

.about__x {
  position: absolute; top: .7rem; right: .7rem;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: var(--panel); color: var(--panel-fg);
  cursor: pointer;
  transition: border-color .4s var(--ease);
}
.about__x:hover { border-color: var(--gold); }
.about__x:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

@media (max-width: 520px) {
  .about__sheet { grid-template-columns: 1fr; }
  .about__media { aspect-ratio: 16 / 10; }
}

/* the last About line links out — a small joke, so keep it quiet until hover */
.about__fun a {
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.about__fun a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.about__fun a:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
/* keep each emoji with its word */
.about__fun a { white-space: nowrap; }

/* Contact left the nav, so the dialog carries it */
.about__cta {
  display: inline-flex; align-items: center; gap: .6em;
  margin-top: 1.6em; padding: .8em 1.3em;
  background: var(--gold); color: #0A0A0A;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}
.about__cta span { transition: transform .4s var(--ease); }
.about__cta:hover span { transform: translateX(3px); }
.about__cta:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* the one-line claim above the facts */
.about__c { margin: 1em 0 0; font-size: .85rem; line-height: 1.55; color: var(--panel-fg); opacity: .72; }

/* About sits opposite Contact so the wordmark stays centred */
.site-nav .about-open-btn { grid-column: 1; justify-self: start; }
.top__left { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); }

/* the mark is an inline SVG while the Leads Icon sphere is swapped out */
svg.explore__orb { aspect-ratio: 1; display: block; }