/* ═══════════════════════════════════════════════════════════════════════
   CONVERGE INTELLIGENCE — "SIGNAL / DEPLOYED"
   The brand stylesheet. Dark, institutional, editorial-technical.
   Reference register: Palantir gravitas × Nike decisiveness.
     · Near-black canvas, active negative space, hairline structure.
     · Inter (400/600) carries the voice at display scale, tight tracking.
     · Newsreader is a deliberate editorial accent, not the default heading.
     · IBM Plex Mono is the technical register: eyebrows, indices, data, price.
     · One signal accent — the brand's emerald "lit point": verified · online · go.
   Preserves the class vocabulary + the motion/JS contract of the prior build:
     .rv/.in reveals, the .hero entrance, the HOLD still-surfaces, the .lw-track
     marquee, .puzzle-figure/.dropped, [data-*] hooks, forms. CSS only touches paint
     and composition; every functional hook is left intact.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fonts (self-hosted, latin subset) ──────────────────────────────── */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 600;
  font-display: swap; src: url(/fonts/newsreader-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 600;
  font-display: swap; src: url(/fonts/newsreader-600italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fonts/inter-regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url(/fonts/inter-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fonts/ibm-plex-mono-regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* metric-tuned local fallbacks (hold CLS while webfonts swap) */
@font-face {
  font-family: 'Inter Fallback'; src: local('Arial');
  size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Fallback'; src: local('Georgia');
  size-adjust: 96.12%; ascent-override: 76.47%; descent-override: 27.57%; line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback'; src: local('Courier New');
  size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%;
}

/* ── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
img, svg, iframe, video { max-width: 100%; }
[hidden] { display: none !important; }

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* the deep canvas — near-black, faint cool undertone */
  --bg:      #0A0B0D;        /* base ink canvas */
  --bg-1:    #0E1013;        /* raised band / alternating surface */
  --bg-2:    #14171B;        /* cards, inputs, plates */
  --bg-3:    #1B1F24;        /* hover / elevated card */

  --ink:     #F3F5F7;        /* primary text, near-white cool */
  --dim:     #AEB6BF;        /* secondary copy */
  --mute:    #798290;        /* tertiary: labels, legal, captions */
  --faint:   #545C67;        /* quietest register */

  --line:    rgba(255,255,255,.09);   /* hairline */
  --line-2:  rgba(255,255,255,.15);   /* firmer rule / rest edge */
  --line-3:  rgba(255,255,255,.28);   /* hover edge */

  /* the signal — the brand mark's lit point. verified · online · go. */
  --accent:      #34E29B;
  --accent-soft: #6FF0BE;
  --accent-deep: #0E6B49;
  --accent-ink:  #05130D;    /* dark text that rides on the accent */
  --accent-glow: rgba(52,226,155,.16);
  --accent-line: rgba(52,226,155,.42);

  --error:   #FF6B6B;

  --font-display: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-text:    'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif:   'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, 'SF Mono', Consolas, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);      /* entrance settle */
  --ease-out: cubic-bezier(.165, .84, .44, 1);

  /* layout frame */
  --frame: min(92vw, 74rem);
  --read:  40rem;             /* prose measure */
  --pad:   1.4rem;
}

/* ── base type ──────────────────────────────────────────────────────── */
body {
  font: 400 1.0625rem/1.65 var(--font-text);
  color: var(--dim);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.wrap { max-width: var(--frame); margin: 0 auto; padding: 0 var(--pad); }
main { display: block; padding: 0 0 5rem; }
main .wrap > section { margin: 4.5rem 0; }
section.hero { margin-top: 2.4rem; }

h1, h2, h3, h4 { color: var(--ink); }
h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4rem);
  line-height: 1.03; letter-spacing: -0.03em;
  text-wrap: balance; margin: 0 0 1.1rem;
}
h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.5rem);
  line-height: 1.08; letter-spacing: -0.022em;
  text-wrap: balance; margin: 0 0 1rem;
}
h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.28rem; line-height: 1.25; letter-spacing: -0.012em;
  margin: 2.2rem 0 .5rem;
}
h2 .mut, h3 .mut { font-weight: 400; color: var(--mute); letter-spacing: -0.01em; }
p { margin: 1rem 0; }
main p { max-width: var(--read); }
ul { margin: 1rem 0; padding-left: 1.15rem; }
li { margin: .5rem 0; max-width: var(--read); }
li::marker { color: var(--accent); }
strong, b { font-weight: 600; color: var(--ink); }
em { font-family: var(--font-serif); font-style: italic; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

.mut { color: var(--mute); }
.small { font-size: .875rem; line-height: 1.62; }
.opt { font-weight: 400; color: var(--mute); }
.why { font-weight: 400; color: var(--mute); font-size: .92em; }
code {
  font: 400 .85em/1.4 var(--font-mono);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 4px; padding: .1em .38em; color: var(--dim);
}

a { color: var(--ink); text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 1px; background-position: 0 1.15em; background-repeat: no-repeat;
    transition: background-size .3s var(--ease), color .18s var(--ease); }
main p a, main li a, .faq-a a, footer.site a, .lw-record a {
  color: var(--accent); background-size: 100% 1px;
  background-image: linear-gradient(var(--accent-line), var(--accent-line));
}
main p a:hover, main li a:hover, .faq-a a:hover, footer.site a:hover {
  color: var(--accent-soft); background-image: linear-gradient(var(--accent), var(--accent));
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ── the eyebrow / kicker — the technical label register ────────────── */
.eyebrow, .rec-kicker, .kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 400 .74rem/1.4 var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mute); margin: 0 0 1.4rem;
}
.eyebrow .tick, .kicker .tick {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow);
}
.eyebrow.accent, .rec-kicker { color: var(--accent); }
.rec-kicker { display: block; }

/* section index — the mono ordinal (01 / 02) that structures the read */
.ix { font: 400 .78rem/1 var(--font-mono); letter-spacing: .12em; color: var(--faint); }

/* ── header ─────────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
header.site .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 1rem; padding-top: .6rem; padding-bottom: .6rem; min-height: 60px;
}
.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.01em; color: var(--ink); text-decoration: none;
  margin-right: auto; min-height: 44px; white-space: nowrap; background: none;
}
.logo:hover { color: var(--ink); }
svg.mk { width: 22px; height: 22px; color: var(--ink); --lit: var(--accent); flex: none; }
svg.mk path[stroke] { stroke: currentColor; }
nav.main { display: contents; font-size: .875rem; }
nav.main a:not(.btn) { order: 2; margin-right: 1.1rem; background: none; }
nav.main .btn { order: 1; }
nav.main a:not(.btn) {
  color: var(--dim); text-decoration: none; letter-spacing: -.005em;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .1rem;
  position: relative;
}
nav.main a:not(.btn):hover { color: var(--ink); }
nav.main a[aria-current="true"] { color: var(--ink); }
nav.main a[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px;
  background: var(--accent);
}
@media (min-width: 720px) {
  header.site .wrap { padding-top: .7rem; padding-bottom: .7rem; }
  .logo { font-size: 1.12rem; }
  nav.main { display: flex; align-items: center; gap: 0 1.5rem; }
  nav.main a:not(.btn) { order: 0; margin-right: 0; }
  nav.main .btn { order: 0; margin-left: .4rem; }
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--accent); color: var(--accent-ink);
  font: 600 1rem/1.1 var(--font-text); letter-spacing: -.01em;
  border: 1px solid var(--accent); border-radius: 8px;
  min-height: 50px; padding: .8rem 1.5rem;
  text-decoration: none; cursor: pointer; background-image: none;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-line), 0 10px 30px -12px var(--accent-glow); transform: translateY(-1px); }
.btn:focus-visible { outline-offset: 3px; }
.btn:active { transform: translateY(0) scale(.99); }
.btn.sec, .btn.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn.sec:hover, .btn.ghost:hover {
  background: rgba(255,255,255,.04); border-color: var(--line-3); color: var(--ink);
  box-shadow: none; transform: translateY(-1px);
}
.btn.small { min-height: 44px; padding: .5rem 1rem; font-size: .85rem; border-radius: 7px; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }
main p .btn { margin: .35rem .55rem .35rem 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; }

/* ── HERO (general) ─────────────────────────────────────────────────── */
section.hero { position: relative; }
.hero h1 { margin-bottom: 1.2rem; }
.hero .lede, .hero > :nth-child(2):not(.receipt):not([data-s]) {
  color: var(--dim); font-size: clamp(1.08rem, 1rem + .5vw, 1.35rem);
  line-height: 1.55; max-width: 38rem;
}
.hero .lede { margin: 0 0 .4rem; }
.hero-note { color: var(--mute); font-size: .95rem; margin-top: 1.6rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 34rem; }

/* ── HERO (home) — the split: statement + the person who is the offer ── */
.hero-home { padding-top: 1rem; }
.hero-home .hero-copy { max-width: 42rem; }
/* the founder emerges from the canvas — fully edge-less (the rectangle dissolves
   entirely into the near-black page, no box, no halo), and lifted toward the
   viewer in 3D so he grows out of the page. Reduced-motion still gets the static
   3D-seated, edge-less portrait (the transform + mask are motion-free). */
.hero-portrait { margin: 0; position: relative; perspective: 1500px; }
.hero-portrait img {
  display: block; width: 100%; height: auto; border: 0; border-radius: 0;
  filter: contrast(1.05) saturate(.98) drop-shadow(0 34px 60px rgba(0,0,0,.62));
  /* dissolve the whole rectangle — the fade completes well inside the frame so no
     edge and no tonal halo ever meets the page */
  -webkit-mask-image: radial-gradient(74% 95% at 50% 38%, #000 28%, rgba(0,0,0,.4) 62%, transparent 87%);
  mask-image: radial-gradient(74% 95% at 50% 38%, #000 28%, rgba(0,0,0,.4) 62%, transparent 87%);
  transform: perspective(1500px) translateZ(44px) scale(1.04);
  transform-origin: 50% 40%;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  will-change: transform;
}
.hero-portrait figcaption {
  display: flex; flex-direction: column; gap: .1rem; margin-top: .55rem; text-align: left;
}
.hero-portrait .name { font-weight: 600; color: var(--ink); font-size: 1rem; letter-spacing: -.01em; }
.hero-portrait .cred { font: 400 .72rem/1.5 var(--font-mono); letter-spacing: .04em; color: var(--mute); text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .hero-portrait:hover img {
    transform: perspective(1500px) rotateY(-6deg) rotateX(3deg) translateZ(74px) scale(1.075);
    filter: contrast(1.06) saturate(1.02) drop-shadow(-20px 40px 70px rgba(0,0,0,.68));
  }
}
/* the credential ticker under the home hook */
.creds {
  display: flex; flex-wrap: wrap; gap: .55rem .5rem; margin: 1.7rem 0 0; padding: 0; list-style: none;
}
.creds li {
  margin: 0; font: 400 .74rem/1 var(--font-mono); letter-spacing: .02em; color: var(--dim);
  border: 1px solid var(--line); border-radius: 100px; padding: .5rem .8rem; background: var(--bg-1);
}

@media (min-width: 900px) {
  .hero-home > .wrap, .hero-home {}
  .hero-home {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center; margin-top: 3.2rem;
  }
  .hero-home .hero-copy { max-width: none; }
  .hero-portrait { max-width: 25rem; margin-left: auto; }
}
@media (max-width: 899.98px) {
  .hero-portrait { max-width: 20rem; margin: 2.4rem 0 0; }
}

/* ── the client register (logo wall) ────────────────────────────────── */
.logowall {
  display: flex; gap: 3rem; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.7rem 0; margin: 1.6rem 0 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.lw-track {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.6rem 3rem; min-width: 0;
}
.lw-track[aria-hidden="true"] { display: none; }
.lw-m {
  display: block; flex: none;
  height: calc(26px * var(--s, 1)); aspect-ratio: var(--ar, 4);
  background-color: var(--dim);
  opacity: .78;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.lw-record { font-size: .9rem; margin-top: .3rem; }
.lw-record a { color: var(--mute); background-image: linear-gradient(var(--line-2), var(--line-2)); background-size: 100% 1px; }
.lw-record a:hover { color: var(--accent); }

/* ── doors — indexed deployment panels ──────────────────────────────── */
.doors { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.8rem 0; }
@media (min-width: 720px) { .doors { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.door {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 1.6rem 1.6rem 1.5rem; text-decoration: none; color: var(--ink);
  overflow: hidden; background-image: none;
  transition: border-color .22s var(--ease), background-color .22s var(--ease), transform .22s var(--ease);
}
.door::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: 0 0;
  transition: transform .3s var(--ease);
}
.door strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.12; letter-spacing: -.02em; color: var(--ink);
  margin-bottom: .55rem;
}
.door .mut { display: block; color: var(--dim); font-size: 1rem; line-height: 1.5; }
.door .go {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.4rem;
  font: 600 .92rem/1 var(--font-text); letter-spacing: -.01em; color: var(--mute);
  transition: color .2s var(--ease), gap .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .door:hover { border-color: var(--line-3); background: var(--bg-2); transform: translateY(-2px); }
  .door:hover::before { transform: scaleY(1); }
  .door:hover .go { color: var(--accent); gap: .8rem; }
}

/* ── the thesis moment + convergence figure ─────────────────────────── */
.thesis-moment { position: relative; }
.thesis-moment h2 { letter-spacing: -.02em; }
.thesis-moment h2 em { font-size: 1.05em; color: var(--accent); font-style: italic; }
.thesis-moment > p { color: var(--dim); max-width: 34rem; }
/* enterprise + who-we-are pull-quote register — the serif speaks */
.thesis-moment.ent { border-left: 2px solid var(--accent); padding-left: 1.6rem; }
.thesis-moment.ent p {
  color: var(--ink); font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.42; max-width: 44rem;
}
.mk-thesis { display: block; width: 30px; height: 30px; margin: 0 0 1.3rem; color: var(--accent); }

/* the convergence figure — a blueprint panel (replaces the clip-art puzzle).
   Two intelligences (AI + HI) ascend and meet at the apex, where the lit point
   sits. Echoes the brand mark. Reveals when it scrolls in (.dropped), seats
   complete under reduced-motion / no-JS. Class kept as .puzzle-figure so the
   existing motion observer tags it. */
.puzzle-figure {
  margin: 0; position: relative;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, var(--line-2), transparent 60%) border-box;
  border: 1px solid transparent; border-radius: 14px;
  padding: 1.6rem; overflow: hidden;
}
.puzzle-figure::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 30%, #000, transparent 78%);
  mask-image: radial-gradient(120% 120% at 50% 30%, #000, transparent 78%);
}
.puzzle-figure svg { display: block; width: 100%; height: auto; position: relative; }
.puzzle-figure .cv-label { font: 400 12px/1 var(--font-mono); letter-spacing: .12em; fill: var(--mute); text-transform: uppercase; }
.puzzle-figure .cv-label.lit { fill: var(--accent); }
.puzzle-figure .cv-stroke { stroke: var(--line-3); stroke-width: 1.75; fill: none; }
.puzzle-figure .cv-flow { stroke: var(--accent); stroke-width: 2.6; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--accent-glow)); }
.puzzle-figure .cv-node { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.puzzle-figure .cv-node-glow { fill: var(--accent-glow); }
.puzzle-figure .cv-packet { fill: var(--accent-soft); filter: drop-shadow(0 0 6px var(--accent)); opacity: 0; }
.puzzle-figure .cv-flash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.puzzle-figure .cv-base { transition: opacity .3s var(--ease); }
.puzzle-figure { max-width: 30rem; margin-inline: auto; }

/* ── split layout — a main column + a composed data-annotation rail ──── */
.split-main > :first-child { margin-top: 0; }
.rail { margin-top: 2rem; }
.stat {
  border: 1px solid var(--line-2); border-left: 2px solid var(--accent);
  border-radius: 10px; padding: 1.25rem 1.35rem; background: var(--bg-1);
}
.stat-n { display: block; font: 400 2.5rem/1 var(--font-mono); letter-spacing: -.04em; color: var(--ink); }
.stat-l { display: block; margin-top: .8rem; font-size: .92rem; line-height: 1.55; color: var(--mute); }
.stat-src { display: block; margin-top: .7rem; font: 400 .7rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
@media (min-width: 900px) {
  section.split { display: grid; grid-template-columns: 1fr 19rem; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  section.split .split-main :is(p, ul) { max-width: 38rem; }
  section.split .rail { margin-top: .35rem; position: sticky; top: 6rem; }
  section:has(.puzzle-figure) > .slot {
    display: grid; grid-template-columns: 1fr .82fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  }
  section:has(.puzzle-figure) .thesis-moment h2 { font-size: clamp(1.5rem, 1.05rem + 1.15vw, 2rem); max-width: none; }
  section:has(.puzzle-figure) .thesis-moment > p { max-width: none; }
}

/* ── pricing — the rate card ────────────────────────────────────────── */
.price-card {
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 12px;
  padding: .4rem 1.3rem 1.1rem; margin: 1.6rem 0; max-width: var(--read);
}
table.tiers { width: 100%; border-collapse: collapse; }
table.tiers th, table.tiers td {
  text-align: left; vertical-align: baseline;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
table.tiers tr:first-child th, table.tiers tr:first-child td { border-top: 0; }
table.tiers th { font-weight: 400; color: var(--dim); font-size: .95rem; line-height: 1.5; padding-right: 1rem; }
table.tiers td { text-align: right; white-space: nowrap; }
.amt {
  font: 400 1.5rem/1.1 var(--font-mono); letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; display: inline-block;
}
.amt-i {
  font-family: var(--font-mono); font-size: .92em; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.price-card .small { margin-bottom: .35rem; color: var(--mute); }

/* provenance chips — small mono stamps */
.draft {
  display: inline-block; max-width: 100%;
  font: 400 .66rem/1.45 var(--font-mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--mute); background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 4px; padding: .18em .55em; vertical-align: .1em;
  white-space: normal; box-decoration-break: clone;
}
table.tiers .draft { display: block; margin: .3rem 0 0 auto; width: fit-content; }

/* ── the contract plate (terms / guarantee) ─────────────────────────── */
.terms {
  position: relative; background: var(--bg-1);
  border: 1px solid var(--line-2); border-left: 2px solid var(--accent);
  border-radius: 10px; margin: 2.4rem 0; padding: 1.6rem 1.6rem 1.7rem; max-width: var(--read);
}
.terms p { font-size: 1rem; line-height: 1.68; margin: 1rem 0; color: var(--dim); }
.terms p:first-child { margin-top: 0; }
.terms p:last-child { margin-bottom: 0; }
.terms strong { color: var(--ink); font-weight: 600; }

/* ── FAQ accordion ──────────────────────────────────────────────────── */
#faq { margin-top: 2rem; }
.faq { border-top: 1px solid var(--line); }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 1.5rem; padding: 1.3rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.18rem;
  letter-spacing: -.015em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font: 400 1.5rem/1 var(--font-mono); color: var(--accent);
  transition: transform .2s var(--ease);
}
.faq[open] summary::after { content: "\2212"; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent); } }
.faq .faq-a { padding: 0 0 1.5rem; }
.faq .faq-a p { margin: 0; max-width: 60rem; color: var(--dim); }

/* ── forms — the reply card ─────────────────────────────────────────── */
form.lead {
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 1.5rem 1.3rem 1.6rem; margin: 1.7rem 0; max-width: var(--read);
}
form.lead label {
  display: block; font-size: .85rem; font-weight: 600; color: var(--ink);
  margin: 1.15rem 0 .45rem;
}
form.lead label:first-of-type { margin-top: 0; }
form.lead .row > div > label { margin-top: 1.15rem; }
form.lead input[type=text], form.lead input[type=email], form.lead input[type=tel],
form.lead select, form.lead textarea {
  width: 100%; font: 400 1rem/1.4 var(--font-text); color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  min-height: 50px; padding: .75rem .85rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
form.lead input::placeholder, form.lead textarea::placeholder { color: var(--faint); }
form.lead select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23798290' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem;
  color: var(--ink);
}
form.lead select option { background: var(--bg-2); color: var(--ink); }
form.lead textarea { min-height: 5.6rem; resize: vertical; }
form.lead input:focus, form.lead select:focus, form.lead textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-3);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
form.lead .row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 560px) { form.lead .row { grid-template-columns: 1fr 1fr; } }
form.lead button[type=submit] { width: 100%; margin-top: 1.5rem; min-height: 54px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
[data-form-error] { color: var(--error); font-size: .92rem; margin-top: .7rem; }
[data-upnote] { display: block; margin-top: .5rem; }
.check {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .95rem; margin: 1.1rem 0 0; font-weight: 400; color: var(--dim);
}
.check input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; }
input, select, textarea { accent-color: var(--accent); }

/* ── the receipt — a notarized timestamp ────────────────────────────── */
.receipt {
  background: var(--bg-1); border: 1px solid var(--accent-line); border-radius: 10px;
  padding: 1.1rem 1.2rem; margin: 1.4rem 0; font-size: .95rem; color: var(--dim); max-width: var(--read);
}
.receipt code { color: var(--accent); }
.receipt .ms, .ms {
  font: 400 1.4rem/1.2 var(--font-mono); color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── the record ledger (/about/) ────────────────────────────────────── */
dl.wall { margin: 1.9rem 0; border-top: 1px solid var(--line-2); }
dl.wall .rec { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
dl.wall dt {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -.015em; color: var(--ink);
}
dl.wall dd { margin: .45rem 0 0; color: var(--dim); font-size: .98rem; line-height: 1.62; }
.rec-logo {
  flex: none; height: 17px; aspect-ratio: var(--ar, 4);
  background-color: var(--accent); opacity: .85;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
}

/* ── founder set-piece (/about/) ────────────────────────────────────── */
.founder { margin: 0 0 1.6rem; max-width: 18rem; }
.founder picture { display: block; }
.founder img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: 0;
  filter: contrast(1.05) saturate(.98) drop-shadow(0 26px 46px rgba(0,0,0,.6));
  -webkit-mask-image: radial-gradient(76% 96% at 50% 40%, #000 32%, rgba(0,0,0,.4) 64%, transparent 90%);
  mask-image: radial-gradient(76% 96% at 50% 40%, #000 32%, rgba(0,0,0,.4) 64%, transparent 90%);
  transform: perspective(1400px) translateZ(28px) scale(1.03);
  transform-origin: 50% 40%;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .founder:hover img {
    transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) translateZ(48px) scale(1.055);
    filter: contrast(1.06) saturate(1.02) drop-shadow(-14px 32px 56px rgba(0,0,0,.66));
  }
}

@media (min-width: 900px) {
  /* the founder set-piece — the portrait holds (sticky) as the bio scrolls beside it */
  section.founder-sec { display: grid; grid-template-columns: 20rem 1fr; column-gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
  section.founder-sec .founder { grid-column: 1; grid-row: 1 / 99; max-width: none; margin: 0; }
  section.founder-sec .founder picture { position: sticky; top: 6rem; display: block; }
  section.founder-sec > h2, section.founder-sec > .slot, section.founder-sec > p { grid-column: 2; max-width: none; }
  section.founder-sec > h2 { margin-top: 0; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem); }
  section.founder-sec > .slot p { max-width: 40rem; }
}

/* ── the crowd photograph (/who-we-are/) ────────────────────────────── */
.crowd-figure { margin: 2.2rem 0 0; }
.crowd-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2); border-radius: 12px;
  filter: saturate(.9) contrast(1.03);
}
.crowd-figure figcaption {
  margin-top: .9rem; font-size: .95rem; color: var(--mute); line-height: 1.55;
}
.crowd-figure figcaption em {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: 1.08rem; color: var(--ink);
}

/* ── footer ─────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--line); margin-top: 4rem; background: var(--bg-1); }
footer.site .wrap { padding-top: 2.2rem; padding-bottom: 2.4rem; }
.creed {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: 1.25rem; color: var(--ink); margin: 0 0 1.3rem;
}
svg.mk-creed { width: 18px; height: 18px; color: var(--accent); }
footer.site .links { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; margin-bottom: .8rem; }
footer.site .links a {
  font-size: .875rem; color: var(--dim); text-decoration: none; background: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
footer.site .links a:hover { color: var(--accent); }
footer.site p { font-size: .82rem; color: var(--mute); margin: 0; }
footer.site p a { color: var(--mute); background: none; }
footer.site p a:hover { color: var(--accent); }

/* ── landings (/go/*) ───────────────────────────────────────────────── */
body[data-landing] header.site { position: static; }
body[data-landing] header.site .wrap { padding-top: .9rem; padding-bottom: .9rem; }
body[data-landing] section.hero { margin-top: 2.2rem; }
body[data-landing] footer.site .wrap { padding: 1.6rem var(--pad); }

/* ── deck — the gray sub-headline under a hero H1 ────────────────────── */
.hero .deck {
  color: var(--dim); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); letter-spacing: -.015em;
  line-height: 1.2; margin: .2rem 0 1.1rem;
}

/* ── hero split (owner/enterprise): statement + an offer-summary aside ── */
.hero-aside { margin-top: 2.2rem; }
@media (min-width: 940px) {
  .hero-split { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .hero-split .hero-copy { max-width: none; }
  .hero-split .hero-copy :is(h1, p, .deck) { max-width: none; }
  .hero-split .hero-aside { position: sticky; top: 6rem; margin-top: .4rem; }
}

/* the path card — the offer at a glance */
.pathcard { border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-1); padding: 1.5rem; }
.pathcard .pc-h { font: 400 .74rem/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin: 0 0 .3rem; }
.pc-step { display: grid; grid-template-columns: auto 1fr auto; gap: 0 .9rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--line); }
.pc-step .pc-ix { font: 400 .8rem/1 var(--font-mono); color: var(--accent); }
.pc-step .pc-t { color: var(--ink); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.pc-step .pc-p { font: 400 1.05rem/1 var(--font-mono); color: var(--ink); letter-spacing: -.03em; white-space: nowrap; }
.pc-step .pc-d { grid-column: 2 / 4; color: var(--mute); font-size: .85rem; line-height: 1.5; margin-top: .3rem; }
.pathcard .pc-note { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--mute); }

/* ── pull-quote band — a full-width thesis line ──────────────────────── */
.pullquote { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 2.3rem 0; margin: 3.2rem 0; }
.pullquote p { max-width: 54rem; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); line-height: 1.4; color: var(--ink); margin: 0; }
.pullquote p strong, .pullquote p em { color: var(--accent); }
.pullquote .pq-sub { font-family: var(--font-text); font-weight: 400; font-size: 1.05rem; color: var(--mute); margin-top: .9rem; max-width: 42rem; }

/* ── the lanes module — numbered install lanes ───────────────────────── */
.lanes { border-top: 1px solid var(--line-2); margin: 1.8rem 0; }
.lane { border-bottom: 1px solid var(--line); padding: 1.9rem 0; }
.lane-ix { font: 400 .78rem/1 var(--font-mono); letter-spacing: .12em; color: var(--accent); }
.lane-head h3 { margin: .55rem 0 0; font-size: 1.4rem; }
.lane .hook { color: var(--ink); margin: 0 0 .9rem; font-size: 1.06rem; line-height: 1.5; }
.lane .install { color: var(--dim); margin: 0; }
.lane .install strong, .lane .install b { color: var(--ink); }
.lane .proof { color: var(--mute); font-size: .9rem; line-height: 1.55; margin: .85rem 0 0; }
.lane .proof a { color: var(--accent); }
@media (min-width: 820px) {
  .lane { display: grid; grid-template-columns: 15rem 1fr; gap: 2.5rem; align-items: start; }
  .lane-head { position: sticky; top: 6rem; }
  .lane-body :is(p) { max-width: 40rem; }
}

/* ── deliverables grid (the four things you walk away with) ───────────── */
.grid-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.7rem 0; }
@media (min-width: 620px) { .grid-cards { grid-template-columns: 1fr 1fr; } }
.dcard { border: 1px solid var(--line-2); border-radius: 10px; padding: 1.3rem 1.35rem; background: var(--bg-1); }
.dcard .dc-ix { font: 400 .74rem/1 var(--font-mono); color: var(--accent); letter-spacing: .12em; }
.dcard h3 { margin: .65rem 0 .4rem; font-size: 1.12rem; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.dcard p { margin: 0; font-size: .93rem; color: var(--mute); line-height: 1.55; max-width: none; }

/* ── callouts / two-up (buying direct, capacity + founding five) ──────── */
.two-up { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.7rem 0; }
@media (min-width: 760px) { .two-up { grid-template-columns: 1fr 1fr; } }
.callout { border: 1px solid var(--line-2); border-radius: 12px; padding: 1.6rem; background: var(--bg-1); max-width: var(--read); }
.two-up .callout { max-width: none; }
.callout.lit { border-left: 2px solid var(--accent); }
.callout h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.callout p { margin: .7rem 0 0; font-size: .97rem; color: var(--dim); max-width: none; }
.callout p:first-of-type { margin-top: 0; }
.railquote { font-family: var(--font-serif); font-weight: 600; font-style: italic; font-size: 1.45rem; line-height: 1.36; color: var(--ink); margin: 0; max-width: none; }

/* ── wide-split: pair a content block with a data/summary rail (inner pages) */
@media (min-width: 960px) {
  .wide-split { display: grid; grid-template-columns: 1fr 20rem; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .wide-split .rail { position: sticky; top: 6rem; margin-top: .35rem; }
}

/* slots are structural: zero visual styling */

/* ═══ MOTION — every hidden/animated state lives ONLY here. Reduced-motion
   visitors get the full static page by construction. ══════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* the masthead rule scores in */
  @keyframes b-rule { from { transform: scaleX(0); } }
  header.site { border-bottom-color: transparent; position: sticky; }
  header.site::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--line); transform-origin: 0 50%; animation: b-rule .9s var(--ease-out) both;
  }

  /* the mark draws itself in on load — the peak resolves alongside the wordmark decode */
  @keyframes mk-draw { from { stroke-dashoffset: 190; } }
  header.site .logo .mk path { stroke-dasharray: 190; stroke-dashoffset: 0; animation: mk-draw .95s var(--ease) both; }

  /* scroll reveals — a calm rise + fade (motion.js tags .rv → .in) */
  .rv { opacity: 0; transform: translateY(22px); }
  .rv.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .rv .doors > .door { opacity: 0; transform: translateY(18px); }
  .rv.in .doors > .door { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .rv.in .doors > .door:nth-child(2) { transition-delay: .1s; }
  .rv dl.wall > .rec { opacity: 0; transform: translateY(14px); }
  .rv.in dl.wall > .rec { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .rv.in dl.wall > .rec:nth-child(2) { transition-delay: .05s; }
  .rv.in dl.wall > .rec:nth-child(3) { transition-delay: .1s; }
  .rv.in dl.wall > .rec:nth-child(4) { transition-delay: .15s; }
  .rv.in dl.wall > .rec:nth-child(n+5) { transition-delay: .2s; }

  /* hero entrance — copy rises, portrait settles. Legible in every frame. */
  @keyframes b-rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes b-fade { from { opacity: 0; } }
  .hero .eyebrow { animation: b-rise .6s var(--ease) both; }
  .hero h1 { animation: b-rise .7s var(--ease) .06s both; }
  .hero .lede, .hero > :nth-child(2):not(.receipt):not([data-s]) { animation: b-rise .7s var(--ease) .14s both; }
  .hero .cta-row, .hero .creds, .hero-note { animation: b-rise .7s var(--ease) .22s both; }
  @keyframes b-portrait-in { from { opacity: 0; transform: perspective(1500px) translateZ(0) scale(.94); } }
  .hero-portrait img { animation: b-portrait-in 1s var(--ease) .2s both; }

  /* the client register marquee — one seamless slow pass, dual track */
  @keyframes lw-scroll { to { transform: translateX(calc(-100% - 3rem)); } }
  .lw-track {
    flex-wrap: nowrap; justify-content: flex-start; gap: 3rem; min-width: max-content;
    animation: lw-scroll 40s linear infinite;
  }
  .lw-track[aria-hidden="true"] { display: flex; }
  @media (any-hover: hover) { .logowall:hover .lw-track { animation-play-state: paused; } }

  /* the convergence figure draws its flow + lights the apex when it scrolls in */
  .puzzle-figure .cv-flow {
    stroke-dasharray: 320; stroke-dashoffset: 320;
    transition: stroke-dashoffset 1.3s var(--ease) .1s;
  }
  .puzzle-figure.dropped .cv-flow { stroke-dashoffset: 0; }
  .puzzle-figure .cv-node, .puzzle-figure .cv-node-glow { opacity: 0; transition: opacity .5s var(--ease) 1s; }
  .puzzle-figure.dropped .cv-node, .puzzle-figure.dropped .cv-node-glow { opacity: 1; }
  .puzzle-figure .cv-label.lit { opacity: 0; transition: opacity .5s var(--ease) 1.1s; }
  .puzzle-figure.dropped .cv-label.lit { opacity: 1; }
  /* the convergence moment, on a loop: packets rise from both intelligences, meet at
     the apex and flash — AI + HI converging, made visible. Starts after the draw-in. */
  .puzzle-figure .cv-left  { offset-path: path("M120 235 L 210 66"); }
  .puzzle-figure .cv-right { offset-path: path("M300 235 L 210 66"); }
  @keyframes cv-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 78% { offset-distance: 100%; opacity: 1; } 90%, 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes cv-flash { 0%, 68% { opacity: 0; transform: scale(.35); } 78% { opacity: .95; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.7); } }
  @keyframes cv-basepulse { 0%, 66%, 100% { opacity: .55; } 6% { opacity: 1; } }
  .puzzle-figure.dropped .cv-packet { animation: cv-travel 3.8s cubic-bezier(.5, .02, .35, 1) 1.2s infinite; }
  .puzzle-figure.dropped .cv-right { animation-delay: 1.28s; }
  .puzzle-figure.dropped .cv-flash { animation: cv-flash 3.8s cubic-bezier(.5, .02, .35, 1) 1.2s infinite; }
  .puzzle-figure.dropped .cv-base { animation: cv-basepulse 3.8s ease-in-out 1.2s infinite; }

  /* the mark's lit point breathes (very restrained) */
  @keyframes sig { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

  @media (hover: hover) and (pointer: fine) { .btn:active { transform: scale(.985); } }
}

/* ═══ DESKTOP composition (≥1024) — the centered frame, feature bands ═══ */
@media (min-width: 1024px) {
  :root { --frame: min(92vw, 74rem); --read: 42rem; --pad: clamp(1.5rem, 3vw, 2.5rem); }
  body { font-size: 1.15rem; }

  main .wrap > section { margin: 6rem 0; }
  main .wrap > section:first-child { margin-top: 3.4rem; }

  /* section indices + eyebrows read at a comfortable scale on the spine */
  main .wrap > section > .eyebrow, main .wrap > section > .rec-kicker { margin-bottom: 1.6rem; }

  /* headings anchor the page; body reads beneath at measure */
  main .wrap > section :is(p, ul) { max-width: var(--read); }
  main .wrap > section h2 { max-width: 20ch; }
  section.hero :is(h1, h2, p) { max-width: none; }

  /* the doors + logo wall + record + thesis earn full-frame width */
  .doors { gap: 1.6rem; }
  .door { padding: 2rem 2rem 1.8rem; }
  .door strong { font-size: 1.65rem; }

  .logowall { padding: 2.1rem 0; }
  .lw-m { height: calc(30px * var(--s, 1)); }
  /* optical-mass normalization so no mark dominates or vanishes mid-scroll */
  .lw-m[aria-label="Simon & Schuster"] { --s: .62 !important; }
  .lw-m[aria-label="Viacom"] { --s: .66 !important; }
  .lw-m[aria-label="U.S. Chamber of Commerce"] { --s: .92 !important; }
  .lw-m[aria-label="U.S. Department of Energy"] { --s: 1.26 !important; }
  .lw-m[aria-label="Nike"] { --s: 1.0 !important; }
  .lw-m[aria-label="Lockheed Martin"] { --s: 1.06 !important; }
  .lw-m[aria-label="Intersil"] { --s: 1.03 !important; }
  .lw-m[aria-label="Boeing"] { --s: 1.04 !important; }

  /* the record ledger — two columns */
  dl.wall { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
  dl.wall .rec { break-inside: avoid; }

  /* the FAQ — two columns */
  section:has(> .slot > h3), section:has(> h3) {}
  #faq .faq { break-inside: avoid; }
}

@media (min-width: 1440px) {
  :root { --frame: min(90vw, 78rem); --read: 44rem; }
}

/* ── mobile header (<720): logo on row one, the nav on a clean single second
      row, and static so a two-row bar never eats the phone viewport ────── */
@media (max-width: 719.98px) {
  header.site { position: static; }
  header.site .wrap { row-gap: .15rem; }
  nav.main { display: flex; flex-basis: 100%; width: 100%; align-items: center; flex-wrap: wrap; gap: 0 1.15rem; }
  nav.main a:not(.btn) { order: 0; margin: 0; }
  nav.main .btn { order: 1; margin-left: auto; }
}

/* ── MOBILE finish ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --pad: 1.15rem; }
  main .wrap > section { margin: 3.4rem 0; }
  header.site .wrap { column-gap: .7rem; }
  nav.main a:not(.btn) { font-size: .82rem; margin: 0; }
  .hero-note { max-width: none; }
  .door { padding: 1.4rem; }
}
@media (max-width: 380px) {
  nav.main a:not(.btn) { font-size: .78rem; margin-right: .7rem; }
}

/* ── PRINT ──────────────────────────────────────────────────────────── */
@media print {
  header.site nav.main, footer.site .creed, .btn, .logowall { display: none !important; }
  *, *::before, *::after { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  a { text-decoration: underline; }
  .wrap { max-width: 100%; }
  .rv { opacity: 1 !important; transform: none !important; }
  section { margin: 1.4rem 0; }
}