/* ============================================================
   LUMEN — homepage stylesheet
   Direction: Dusk (cream-on-near-black + warm amber accent)
   ============================================================ */

/* Fraunces — self-hosted variable display face (opsz/SOFT/WONK/wght).
   The editorial-luxury serif used when you want Canela/Ogg-tier
   character without the license. opsz set high + WONK 0 + slight
   SOFT reads as a refined modern Didone, not a quirky free serif. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-vf.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-vf-italic.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}
/* Self-hosted Geist (body) + Geist Mono (labels) — variable woff2,
   no Google Fonts API call. Matches the Fraunces setup above. */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Metric-compatible fallbacks (CLS prevention) ─────────────
   These map system fallbacks to the same vertical metrics as
   the real fonts so the swap from fallback → loaded face is
   visually invisible (no reflow, no jumping baseline).
   Calibrated from typical fontaine output for these faces. */
@font-face {
  font-family: "Fraunces fallback";
  src: local("Georgia"), local("Times New Roman"), local("serif");
  size-adjust: 105%;
  ascent-override: 94%;
  descent-override: 28%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: "Geist fallback";
  src: local("Helvetica Neue"), local("Arial"), local("sans-serif");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 27%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono fallback";
  src: local("SF Mono"), local("Menlo"), local("Consolas"), local("monospace");
  size-adjust: 98%;
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  font-display: swap;
}

:root {
  /* Type — fallback families inserted right after the real font
     so the system never shows a metric-mismatched serif/sans
     during the swap window. */
  --f-display: "Fraunces", "Fraunces fallback", "Instrument Serif", "Times New Roman", serif;
  --f-body: "Geist", "Geist fallback", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", "Geist Mono fallback", ui-monospace, "SF Mono", Menlo, monospace;

  /* Luxury palette — cream serif on rich near-black, gilt-gold accent.
     Pushed from "dusk amber" toward a more saturated "precious-metal"
     gold, with a deeper warm near-black for that Rolex / Real Estate
     Fund / Cartier presentation-case feel. */
  --ink: #14110e;            /* deeper warm near-black (was #1a1714) */
  --ink-dim: rgba(20, 17, 14, 0.70);
  --ink-faint: rgba(20, 17, 14, 0.34);
  --paper: #f5f0e6;          /* ivory cream — slightly warmer */
  --paper-2: #ebe4d2;        /* dropped section bg */
  --rule: rgba(20, 17, 14, 0.14);
  --rule-strong: rgba(20, 17, 14, 0.34);

  /* Gilt gold — deeper, more saturated, less "harvest amber" and more
     "leaf gold." Reads as wealth, not autumn. */
  --accent: oklch(0.74 0.16 78);
  --accent-soft: oklch(0.74 0.16 78 / 0.18);
  --accent-ink: #14110e;

  /* A second deeper "antique" gold for secondary luxury moments — used
     on dividers, monograms, and the founder portrait corner ticks */
  --accent-2: oklch(0.62 0.13 78);

  /* A deep "evergreen" — Real-Estate-Fund / Rolex luxury green — used
     as a subtle background tint on selected dark sections */
  --evergreen: oklch(0.22 0.04 165);

  --inverse-paper: #14110e;
  --inverse-ink: #f5f0e6;

  /* Scale */
  --hero-scale: 1;
  /* Editorial-luxury margins: at 1920px viewport this gives ~120px gutters
     (~6.25% — closer to the ≥10% spec target without breaking the system).
     Mobile end stays tight (28px) so phones don't waste horizontal space. */
  --gutter: clamp(28px, 6vw, 120px);
  --section-pad: clamp(96px, 12vh, 200px);
  --max: 1440px;

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --ease-micro: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

/* ── Direction variants ─────────────────────────────────────── */
/* Nightfall — the dark alternate (the original Dusk values). */
body.theme-nightfall {
  --ink: #f2ede3;
  --ink-dim: rgba(242, 237, 227, 0.66);
  --ink-faint: rgba(242, 237, 227, 0.32);
  --paper: #0f0e0c;
  --paper-2: #18160f;
  --rule: rgba(242, 237, 227, 0.14);
  --rule-strong: rgba(242, 237, 227, 0.32);
  --accent: oklch(0.82 0.13 75);
  --accent-ink: #0f0e0c;
  --inverse-paper: #f2ede3;
  --inverse-ink: #0f0e0c;
}
body.theme-atrium {
  --ink: #e9e4d3;
  --ink-dim: rgba(233, 228, 211, 0.62);
  --ink-faint: rgba(233, 228, 211, 0.32);
  --paper: #18221c;
  --paper-2: #0f1814;
  --rule: rgba(233, 228, 211, 0.14);
  --rule-strong: rgba(233, 228, 211, 0.32);
  --accent: oklch(0.82 0.11 88);           /* warm gold */
  --inverse-paper: #e9e4d3;
  --inverse-ink: #18221c;
}
body.theme-aperture {
  --ink: #1a1714;
  --ink-dim: rgba(26, 23, 20, 0.62);
  --ink-faint: rgba(26, 23, 20, 0.32);
  --paper: #fafaf6;
  --paper-2: #f1f0ea;
  --rule: rgba(26, 23, 20, 0.10);
  --rule-strong: rgba(26, 23, 20, 0.28);
  --inverse-paper: #1a1714;
  --inverse-ink: #fafaf6;
}

/* ── Accent variants ────────────────────────────────────────── */
body[data-accent="cream"]   { --accent: oklch(0.94 0.05 95);  --accent-ink: #1a1714; }
body[data-accent="cobalt"]  { --accent: oklch(0.62 0.14 255); }
body[data-accent="none"]    { --accent: var(--ink); }

/* ── Display font: Fraunces (all data-display variants resolve here) ── */
body[data-display="instrument"],
body[data-display="newsreader"],
body[data-display="cormorant"],
body[data-display="dm-serif"] {
  --f-display: "Fraunces", "Instrument Serif", serif;
  --display-weight: 380;
}

/* opsz follows font-size automatically (the elegant variable-font way);
   WONK 0 kills the quirk, slight SOFT softens the terminals → refined,
   not gimmicky. Geist/Geist Mono aren't variable so they ignore this. */
html { font-optical-sizing: auto; }
body  { font-variation-settings: "SOFT" 50, "WONK" 0; }

/* Display headlines: heavier optical weight + tighter tracking so
   Fraunces reads as a commissioned editorial face, not a default. */
.hero-h, .sec-h, .page-h, .teaser-h, .manifesto-h,
.work-thumb-name, .footer-mark-text, .letter-hi, .fpo-label {
  font-variation-settings: "SOFT" 40, "WONK" 0;
  letter-spacing: -0.02em;
}

/* ── Density ────────────────────────────────────────────────── */
body[data-density="spacious"] { --section-pad: clamp(96px, 12vh, 200px); }
body[data-density="chunky"]   { --section-pad: clamp(64px, 8vh, 120px); }
body[data-density="mixed"]    { --section-pad: clamp(96px, 12vh, 200px); }

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* No CSS scroll-behavior: Lenis owns smoothing; the two together
     double-smooth and produce the laggy/delayed feel. */
  scroll-behavior: auto;
  /* Root-level clip kills the phantom horizontal scroll that decorative
     fixed/animated elements add. body{overflow-x:hidden} cannot clip a
     position:fixed element (its containing block is the viewport). */
  overflow-x: clip;
}
body {
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
  transition: background 900ms var(--ease-out), color 900ms var(--ease-out);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--accent-ink); }

.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.nav.scrolled {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: color-mix(in oklab, var(--paper) 72%, transparent);
  border-bottom: 1px solid var(--rule);
}
.nav.scrolled { padding-top: 16px; padding-bottom: 16px; }

.wordmark {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
body[data-wordmark="LUMEN"] .wordmark { text-transform: uppercase; font-family: var(--f-body); font-weight: 600; letter-spacing: 0.18em; font-size: 16px; }
body[data-wordmark="Lumen"] .wordmark { text-transform: none; }
body[data-wordmark="lumen"] .wordmark { text-transform: lowercase; }
body[data-wordmark="lumen-nyc"] .wordmark::after { content: " / nyc"; color: var(--ink-faint); font-size: 0.7em; }

.nav-links {
  display: flex;
  gap: 6px;
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  border: 1px solid var(--rule);
  padding: 6px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body[data-nav="inline"] .nav-links {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 28px;
  backdrop-filter: none;
}
body[data-nav="bare"] .nav-links { display: none; }

.nav-links a {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-dim);
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.nav-links a::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  border-radius: 999px;
  transform: scaleY(0.05);
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 200ms var(--ease-out);
  z-index: -1;
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::before { transform: scaleY(1); opacity: 1; }

/* Active page — filled pill, like Instrument's current-page treatment */
.nav-links a[aria-current="page"] { color: var(--paper); }
.nav-links a[aria-current="page"]::before { transform: scaleY(1); opacity: 1; }

body[data-nav="inline"] .nav-links a { padding: 4px 0; }
body[data-nav="inline"] .nav-links a::before { display: none; }
body[data-nav="inline"] .nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
body[data-nav="inline"] .nav-links a:hover { color: var(--ink); }
body[data-nav="inline"] .nav-links a:hover::after { transform: scaleX(1); }

/* ============================================================
   CTA (used in nav, hero, offer, final)
   ============================================================ */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 900ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
  isolation: isolate;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 900ms var(--ease-out);
  z-index: -1;
}
.cta:hover::before { transform: translateY(0); }
.cta:hover { color: var(--accent-ink); }

.cta svg { transition: transform 900ms var(--ease-out); }
.cta:hover svg { transform: translateX(4px); }

.cta-sm { padding: 10px 16px; font-size: 13px; }
.cta-lg { padding: 18px 28px; font-size: 15px; }
.cta-xl { padding: 24px 36px; font-size: 17px; }

.cta-invert {
  background: var(--inverse-paper);
  color: var(--inverse-ink);
}
.cta-invert::before { background: var(--accent); }
.cta-invert:hover { color: var(--accent-ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: calc(var(--section-pad) + 60px) var(--gutter) var(--section-pad);
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(40px, 6vh, 80px);
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.eyebrow.mono { color: var(--ink-faint); }
.eyebrow.on-dark { color: rgba(15,14,12,0.7); }
.eyebrow.on-dark.right { margin-left: auto; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
.dot-amber { background: var(--accent); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent) 0%, transparent); }
}

.hero-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(clamp(96px, 17.5vw, 320px) * var(--hero-scale));
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
}
.hero-h .line {
  display: block;
  overflow: hidden;
  padding-top: 0.20em;
  padding-bottom: 0.34em;
}
.hero-h em {
  font-style: italic;
  color: var(--accent);
  font-family: var(--f-display);
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.hero-sub {
  max-width: 56ch;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0;
}

.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  align-self: end;
  justify-self: start;
}
.hero-scroll svg { animation: scrollHint 2.4s var(--ease-in-out) infinite; }
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ── Photographic plates (now wraps an image-slot drop zone + caption below) ── */
.plate {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plate image-slot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-faint);
  font-size: 12px;
}
.plate-hero {
  grid-column: 1 / -1;
  width: 100%;
}
.plate-hero image-slot { aspect-ratio: 16 / 9; min-height: 70vh; }

/* Stacked hero gallery plates (slots 02-04) */
.plate-hero-stack {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.plate-hero-stack image-slot {
  aspect-ratio: 16 / 9;
  min-height: 70vh;
  width: 100%;
}
.plate-hero-stack image-slot {
  display: block;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-faint);
  font-size: 12px;
  height: auto;
}
.hero-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vh, 120px);
  padding: var(--section-pad) 0;
}

.plate-pillar {
  margin-top: 28px;
}
.plate-pillar image-slot { aspect-ratio: 4 / 5; }

.plate-cap-below {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 4px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
}
.plate-cap-below span:first-child { color: var(--ink-dim); letter-spacing: 0.14em; }
.plate-cap-below span:last-child { text-transform: none; letter-spacing: 0.02em; text-align: right; max-width: 40ch; }

/* ============================================================
   BROKERAGE STRIP (marquee)
   ============================================================ */
.strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px var(--gutter) 32px;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.strip-label { color: var(--ink-faint); max-width: 80ch; }

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  /* Locomotive signature: the strip leans into your scroll momentum.
     --vel is fed by Lenis velocity in enhance.js (skew only on the
     non-animated parent so it never fights the marquee keyframes). */
  transform: skewX(calc(var(--vel, 0) * -4deg));
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .marquee { transform: none; }
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  will-change: transform;
  animation: marquee 25s linear infinite;
}
.marquee-track i {
  font-style: normal;
  color: var(--accent);
  font-size: 0.7em;
  line-height: 1;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--gutter);
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  align-items: start;
}
.sec-num {
  color: var(--ink-faint);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.sec-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 20ch;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   SAMPLE BUILD — a fictional team site rendered in browser chrome.
   Sits between strip + pillars to give "what does Lumen actually
   make" a concrete answer, pre-launch.
   ============================================================ */
.sample {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.sample-cap-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
.sample-cap-row .mono { color: var(--ink-faint); }
.sample-frame {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: 0 32px 80px -32px rgba(26, 23, 20, 0.32);
}
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: color-mix(in oklab, var(--paper) 70%, var(--ink) 5%);
  border-bottom: 1px solid var(--rule);
}
.browser-chrome .dots { display: flex; gap: 7px; }
.browser-chrome .dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(26, 23, 20, 0.18);
  display: block;
}
.browser-chrome .addr {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  text-transform: none;
}
.sample-canvas {
  background: var(--paper);
  padding: 36px 48px 44px;
  display: grid;
  gap: 28px;
}
.sample-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.sample-wm {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sample-nav nav {
  display: flex;
  gap: 22px;
  font-size: 13px;
  color: var(--ink-dim);
}
.sample-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: end;
  padding: 32px 0 16px;
}
.sample-hero h3 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}
.sample-hero p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  border-left: 1px solid var(--rule);
  padding-left: 18px;
  max-width: 28ch;
}
.sample-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sample-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sample-tile image-slot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-faint);
  font-size: 11px;
}
.sample-tile .plate-cap-below {
  font-size: 10px;
}
.sample-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-faint);
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars { padding: var(--section-pad) 0; }
.pillar-grid {
  list-style: none;
  margin: 80px auto 0;
  padding: 0 var(--gutter);
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.pillar-num { color: var(--ink-faint); }
.pillar h3 {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 8px 0 4px;
}
.pillar p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  max-width: 34ch;
}

/* ============================================================
   FOUNDING OFFER (high-contrast colorblock — most distinct)
   ============================================================ */
.offer {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.offer-frame {
  position: relative;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  padding: clamp(56px, 8vw, 120px) clamp(40px, 6vw, 100px);
  overflow: hidden;
}
.offer-frame::before {
  /* light leak in the top right corner — reinforces lumen motif */
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 70%; height: 140%;
  background: radial-gradient(ellipse, color-mix(in oklab, var(--accent) 70%, white 30%) 0%, transparent 60%);
  filter: blur(40px);
  opacity: 0.65;
  pointer-events: none;
}

.offer-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(15,14,12,0.18);
  padding-bottom: 16px;
  margin-bottom: 48px;
}
.offer-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(48px, 7.5vw, 124px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 64px;
  color: var(--accent-ink);
}
.offer-h .line { display: block; overflow: hidden; padding-top: 0.20em; padding-bottom: 0.34em; }
.offer-h em { font-style: italic; color: var(--accent-ink); opacity: 0.8; }

.offer-terms {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 56px;
  max-width: 80ch;
}
.offer-terms li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  font-size: 17px;
  line-height: 1.4;
  padding-top: 14px;
  border-top: 1px solid rgba(15,14,12,0.18);
  color: var(--accent-ink);
}
.t-num { color: rgba(15,14,12,0.55); padding-top: 4px; }

.offer-cta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  /* No bottom margin — the slot cards that used to sit below were
     removed; .offer-frame's padding handles the section bottom. */
  margin-bottom: 0;
}
.offer-aside { color: rgba(15,14,12,0.55); }

/* ============================================================
   WHY
   ============================================================ */
/* Full-bleed evergreen surface — color-block moment, Instrument-style */
.why {
  background: var(--evergreen);
  color: color-mix(in oklab, var(--paper) 92%, transparent);
  padding: calc(var(--section-pad) * 1.1) 0;
  position: relative;
  isolation: isolate;
}
.why .sec-num.mono {
  color: color-mix(in oklab, var(--accent) 72%, transparent);
  border-top-color: color-mix(in oklab, var(--paper) 18%, transparent);
}
.why .sec-h {
  color: color-mix(in oklab, var(--paper) 96%, transparent);
  border-top-color: color-mix(in oklab, var(--paper) 18%, transparent);
}
.why-grid {
  list-style: none;
  padding: 0 var(--gutter);
  margin: 80px auto 0;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: color-mix(in oklab, var(--paper) 14%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
}
.why-grid li {
  background: var(--evergreen);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
}
.why-stat {
  font-family: var(--f-display);
  font-size: clamp(56px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in oklab, var(--paper) 22%, transparent);
}
.why-stat b {
  font-weight: inherit;
  color: var(--accent);
  font-style: italic;
}
.why-grid p {
  font-size: 16px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--paper) 78%, transparent);
  margin: 0;
  max-width: 32ch;
}
.why-foot { color: color-mix(in oklab, var(--paper) 48%, transparent); margin-top: auto; }

/* ============================================================
   FOUNDER LETTER
   ============================================================ */
.founder {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}
.founder-letter { max-width: 56ch; }
.founder-letter .sec-num { display: block; margin-bottom: 56px; padding-top: 18px; border-top: 1px solid var(--rule); }

.founder-letter p.letter-hi {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(72px, 9vw, 140px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.04em;
  margin: 0 0 32px !important;
  padding-top: 0.12em;
  color: var(--ink);
}
.founder-letter p {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: pretty;
}
.u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.u.link:hover { color: var(--accent); }

.letter-sig {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 17px !important;
}
.letter-sig .mono { color: var(--ink-faint); }

.founder-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.founder-aside image-slot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
}

.founder-meta {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
.founder-meta div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.founder-meta dt { color: var(--ink-faint); margin: 0; }
.founder-meta dd { color: var(--ink); margin: 0; text-transform: none; letter-spacing: 0.02em; font-size: 12px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: var(--section-pad) 0; }
.faq-list {
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 80px auto 0;
}
.faq-item {
  border-top: 1px solid var(--rule);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  transition: background 200ms var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .q-num { color: var(--ink-faint); padding-top: 8px; }
.faq-item .q-text {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0.1em 0;
}
.faq-item:hover .q-text { color: var(--accent); }
.q-toggle {
  position: relative;
  width: 20px; height: 20px;
  margin-top: 12px;
  justify-self: end;
}
.q-toggle::before,
.q-toggle::after {
  content: "";
  position: absolute;
  background: var(--ink);
  top: 50%; left: 0;
  width: 100%; height: 1px;
  transform-origin: center;
  transition: transform 200ms var(--ease-out);
}
.q-toggle::after { transform: rotate(90deg); }
.faq-item[open] .q-toggle::after { transform: rotate(0); }

.faq-body {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 24px;
  padding: 0 0 36px;
}
.faq-body p {
  grid-column: 2;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 64ch;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
  background: var(--paper-2);
  color: var(--ink);
  padding: var(--section-pad) var(--gutter);
  position: relative;
  overflow: hidden;
}
.final::before {
  /* warm light leak from bottom — illumination motif */
  content: "";
  position: absolute;
  left: 50%; bottom: -40%;
  width: 80%; height: 80%;
  background: radial-gradient(ellipse, color-mix(in oklab, var(--accent) 50%, transparent) 0%, transparent 70%);
  filter: blur(60px);
  transform: translateX(-50%);
  pointer-events: none;
}

.final-head {
  display: flex;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto 60px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.final-head .eyebrow.on-dark { color: var(--ink-dim); }

.ghost-word {
  position: relative;
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(140px, 28vw, 460px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-align: center;
  margin: 0;
  padding-top: 0.18em;
  padding-bottom: 0.12em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-dim);
  z-index: 1;
  user-select: none;
}
.ghost-word span { font-style: italic; }

.final-cta {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 60px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--rule);
  padding-top: 40px;
}
.final-sub {
  max-width: 40ch;
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0;
  text-align: right;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 60px var(--gutter) 28px;
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.wordmark-sm { font-size: 22px; }
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.footer-bot { border-bottom: 0; padding-bottom: 0; color: var(--ink-faint); }
.footer-bot { display: grid; grid-template-columns: repeat(3, 1fr); }
.footer-bot span:nth-child(2) { text-align: center; }
.footer-bot span:nth-child(3) { text-align: right; }
.footer-mid a { font-family: var(--f-display); font-size: clamp(32px, 4vw, 64px); letter-spacing: -0.02em; transition: color 200ms; }
.footer-mid a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 18px; align-items: center; font-family: var(--f-body); font-size: 15px; }
.footer-social span { color: var(--ink-faint); }

/* ============================================================
   WORD REVEAL (motion)
   ============================================================ */
/* Whole-element clip-path wipe. No per-word DOM splitting, so text
   wraps natively (text-wrap: balance works, no leading-space orphan,
   no descender clipping — bottom inset goes slightly negative). */
.reveal-words {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 900ms var(--ease-reveal), opacity 900ms var(--ease-reveal);
  will-change: transform, opacity;
}
.reveal-words.in {
  transform: none;
  opacity: 1;
}

.reveal-up {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 900ms var(--ease-reveal), opacity 900ms var(--ease-reveal);
}
.reveal-up.in { transform: translateY(0); opacity: 1; }

/* Cursor orb REMOVED — custom cursor takeover violates editorial spec.
   Magnetic CTA hover transform is preserved on the button itself. */

/* ============================================================
   Motion off / reduced motion
   ============================================================ */
body.skip-reveal .reveal-words,
body.skip-reveal .reveal-up,
body.skip-reveal .light-reveal .plate-fill,
body.skip-reveal .light-reveal img {
  transform: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  transition: none !important;
}

body[data-motion="off"] .marquee-track,
body[data-motion="off"] .dot,
body[data-motion="off"] .hero-scroll svg { animation: none !important; }
body[data-motion="off"] .reveal-words,
body[data-motion="off"] .reveal-up { transform: none; opacity: 1; transition: none; }
body[data-motion="off"] .light-reveal .plate-fill { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-words, .reveal-up { transform: none; opacity: 1; clip-path: none; }
  .light-reveal .plate-fill { clip-path: none; }
}

/* ============================================================
   image-slot tuning (founder portrait)
   ============================================================ */
image-slot {
  height: auto;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-faint);
}

/* ============================================================
   PHOTOGRAPHY-LED HERO OVERRIDE
   When the hero has class .hero-photo-led, the photo becomes the
   full-bleed background and the type sits on top with a gradient
   overlay for legibility. This is the "buildings are art" hero.
   ============================================================ */
.hero.hero-photo-led {
  position: relative;
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg image-slot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  background: var(--ink);
  aspect-ratio: auto;
  min-height: 100vh;
}
.hero-bg image-slot img,
.hero-bg image-slot canvas,
.hero-bg image-slot .image-slot-image,
.hero-bg image-slot > * {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: 0 !important;
}
.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15,14,12,0.55) 0%,
      rgba(15,14,12,0.10) 18%,
      rgba(15,14,12,0.05) 50%,
      rgba(15,14,12,0.92) 100%),
    linear-gradient(90deg, rgba(15,14,12,0.42) 0%, rgba(15,14,12,0) 55%);
  pointer-events: none;
}
.hero-photo-led .hero-overlay {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(40px, 6vh, 80px);
  padding: calc(var(--section-pad) + 60px) var(--gutter) calc(var(--section-pad) - 40px);
  max-width: var(--max);
  margin: 0 auto;
  color: var(--paper);
}
.hero-photo-led .hero-meta {
  border-top: 1px solid rgba(244, 239, 229, 0.22);
  border-bottom: 1px solid rgba(244, 239, 229, 0.22);
}
.hero-photo-led .eyebrow { color: rgba(244, 239, 229, 0.86); }
.hero-photo-led .eyebrow.mono { color: rgba(244, 239, 229, 0.62); }
.hero-photo-led .hero-h {
  color: var(--paper);
  font-size: calc(clamp(72px, 9.5vw, 156px) * var(--hero-scale));
  max-width: 18ch;
}
.hero-photo-led .hero-h em { color: var(--accent); }
.hero-photo-led .hero-bottom {
  border-top: 1px solid rgba(244, 239, 229, 0.22);
}
.hero-photo-led .hero-sub { color: rgba(244, 239, 229, 0.88); max-width: 52ch; }
.hero-photo-led .hero-scroll { color: rgba(244, 239, 229, 0.6); }
.hero-photo-led .cta { background: var(--paper); color: var(--ink); }
.hero-photo-led .cta:hover { color: var(--accent-ink); }
.hero-photo-led .cta::before { background: var(--accent); }
.hero-photo-led .nav { background: transparent; }

/* Subtle "rising from black" arrival vignette */
.hero-photo-led .hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%,
    color-mix(in oklab, var(--accent) 40%, transparent) 0%,
    transparent 55%);
  opacity: 0.35;
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   MANIFESTO — the studio's position, in Baraa's voice
   Sits between hero and arch gallery
   ============================================================ */
.manifesto {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.manifesto-body {
  max-width: 60ch;
  margin: 56px 0 0 calc(80px + var(--gutter));
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.manifesto-body p {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(22px, 1.85vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.manifesto-body p em {
  font-style: italic;
  color: var(--accent);
}
.manifesto-sig {
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  margin-top: 16px !important;
  line-height: 1.4 !important;
}

/* ============================================================
   ARCHITECTURE GALLERY HEAD — was hero-gallery, repurposed
   Lead photo + 2-up pair. Tighter heights, varied rhythm.
   ============================================================ */
.arch-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 56px);
  padding: var(--section-pad) 0;
}
.plate-arch-lead {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.plate-arch-lead image-slot {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-faint);
  font-size: 12px;
  aspect-ratio: 21 / 9;
  min-height: 0;
  height: auto;
  max-height: 64vh;
}
.arch-pair {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.plate-arch-half image-slot {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-faint);
  font-size: 12px;
  aspect-ratio: 4 / 5;
  min-height: 0;
  height: auto;
  max-height: 64vh;
}
@media (max-width: 900px) {
  .arch-pair { grid-template-columns: 1fr; }
}

/* Suppress the old plate-hero-stack styles' tall min-height — they aren't
   used in this layout anymore, but keep the rule for safety */
.plate-hero-stack image-slot { min-height: 0; }
.arch-gallery-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--gutter);
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  align-items: start;
  padding-bottom: 24px;
}
.arch-gallery-head .sec-num {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.arch-gallery-lead {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  max-width: 36ch;
  text-wrap: pretty;
}

/* ============================================================
   MORE SAMPLES — two additional sample team mockups
   ============================================================ */
.more-samples {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.more-samples-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
.more-samples-lead {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.35;
  margin: 0;
  color: var(--ink-dim);
  max-width: 48ch;
  text-align: right;
  text-wrap: pretty;
}
.more-samples-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}

/* Shared frame restyle for medium samples */
.sample-frame-md {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 32px 80px -32px rgba(26, 23, 20, 0.32);
}
.sample-cap-md {
  margin-bottom: 0;
  padding: 14px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
}
.sample-cap-md .mono { color: var(--ink-faint); }
.sample-canvas-md {
  padding: 28px 32px 32px;
  gap: 20px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.sample-canvas-md .sample-nav {
  padding-bottom: 12px;
}
.sample-canvas-md .sample-nav nav { gap: 18px; font-size: 12px; }
.sample-hero-md { padding: 16px 0 8px; display: block; }
.sample-hero-md h3 {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}
.sample-hero-md p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 14px 0 0;
  border-left: 1px solid var(--rule);
  padding-left: 14px;
  max-width: 36ch;
}
.sample-tile-solo {
  margin: 8px 0 0;
}
.sample-tile-solo image-slot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-faint);
}

/* Dark variant — Aubin / type-led modern */
.sample-frame-dark {
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(244, 239, 229, 0.12);
}
.sample-cap-dark {
  border-bottom-color: rgba(244, 239, 229, 0.12);
}
.sample-cap-dark .mono { color: rgba(244, 239, 229, 0.5); }
.browser-chrome-dark {
  background: rgba(244, 239, 229, 0.04);
  border-bottom-color: rgba(244, 239, 229, 0.12);
}
.browser-chrome-dark .dots i { background: rgba(244, 239, 229, 0.2); }
.browser-chrome-dark .addr { color: rgba(244, 239, 229, 0.5); }
.sample-canvas-dark {
  background: var(--ink);
  padding: 28px 32px 32px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sample-nav-dark {
  border-bottom-color: rgba(244, 239, 229, 0.12);
}
.sample-wm-dark, .sample-canvas-dark .sample-wm {
  color: var(--paper);
}
.sample-nav-dark nav { color: rgba(244, 239, 229, 0.62); }
.sample-hero-type {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 24px 0;
}
.sample-hero-type h3 {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(32px, 3.4vw, 56px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
  text-wrap: pretty;
}
.sample-hero-type h3 em {
  font-style: italic;
  color: var(--accent);
}
.sample-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 239, 229, 0.12);
  color: rgba(244, 239, 229, 0.55);
  gap: 16px;
}

/* Aubin — ghost word behind the headline, gives the type-led panel visual weight */
.sample-hero-type {
  position: relative;
  overflow: hidden;
}
.sample-hero-type h3 {
  position: relative;
  z-index: 2;
}
.sample-ghost-word {
  position: absolute;
  right: -10px;
  bottom: -28px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 239, 229, 0.14);
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

/* Aubin — recent-listings list */
.sample-listings {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(244, 239, 229, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sample-listings li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244, 239, 229, 0.08);
}
.sample-listings li:last-child { border-bottom: 0; }
.sl-num { color: rgba(244, 239, 229, 0.4); }
.sl-title {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.sl-meta {
  color: rgba(244, 239, 229, 0.5);
  font-size: 10px;
  text-align: right;
}

/* ============================================================
   POLISH — hero subhead contrast, scroll cue visibility,
   manifesto-sig spacing, tightened section padding so we
   don't get blank dead zones between sections.
   ============================================================ */

/* Hero overlay: stronger bottom gradient so subhead reads cleanly */
.hero-photo-led .hero-bg-gradient {
  background:
    linear-gradient(180deg,
      rgba(15,14,12,0.62) 0%,
      rgba(15,14,12,0.14) 15%,
      rgba(15,14,12,0.04) 42%,
      rgba(15,14,12,0.78) 88%,
      rgba(15,14,12,0.94) 100%),
    linear-gradient(90deg, rgba(15,14,12,0.5) 0%, rgba(15,14,12,0) 60%);
}
.hero-photo-led .hero-sub {
  color: rgba(244, 239, 229, 0.94);
  font-weight: 400;
  text-shadow: 0 1px 24px rgba(0,0,0,0.4);
}
.hero-photo-led .hero-scroll { color: rgba(244, 239, 229, 0.78); }
.hero-photo-led .hero-meta .eyebrow.mono { color: rgba(244, 239, 229, 0.78); }
.hero-photo-led .hero-meta .eyebrow { text-shadow: 0 1px 12px rgba(0,0,0,0.4); }

/* Manifesto sig — sits closer to last paragraph */
.manifesto-sig {
  margin-top: 8px !important;
}

/* Tighten spacious density so we don't get blank gaps.
   Reduced from the original to give sections breathing room without
   feeling like dead zones between them. */
body[data-density="spacious"] {
  --section-pad: clamp(96px, 12vh, 200px);
}

/* Manifesto — tighten the bottom so it flows into arch-gallery cleanly */
.manifesto {
  padding-top: clamp(64px, 7vh, 96px);
  padding-bottom: clamp(40px, 4vh, 64px);
}
.manifesto-body {
  margin-top: 28px;
}
.manifesto-rule {
  margin: 8px 0 4px;
}

/* Pillars — pull lead closer to headline */
.pillars-lead {
  margin-top: 14px !important;
  padding-top: 12px !important;
}
.pillars .pillar-grid {
  margin-top: 36px;
}

/* More-samples — slightly tighter top padding so it doesn't feel disconnected from .sample */
.more-samples {
  padding-top: clamp(28px, 4vh, 56px);
}
.sample {
  padding-bottom: clamp(24px, 3vh, 48px);
}

/* Why grid — slightly less min-height on stat cells */
.why-grid li { min-height: 280px; }

/* Founder — pull aside up a touch */
.founder { padding-top: clamp(64px, 8vh, 112px); }
.founder-letter .sec-num { margin-bottom: 40px; }

/* ============================================================
   LEVEL 6 — DEEPER POLISH PASS
   Footer, FAQ, pillar numbers, sample hover, divider marquee,
   on-brand light leaks, custom underlines, etc.
   ============================================================ */

/* ── Footer (full redesign — colophon style) ─────────────── */
.footer {
  padding: clamp(80px, 10vh, 140px) var(--gutter) 28px;
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.footer-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.footer-email {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(32px, 4.2vw, 64px);
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.footer-email::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.footer-email:hover { color: var(--accent); }
.footer-email:hover::after { transform: scaleX(1); }
.footer-locator { color: var(--ink-faint); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  padding: 48px 0 80px;
  border-bottom: 1px solid var(--rule);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col-h {
  color: var(--ink-faint);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
}
.footer-col a {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-dim);
  transition: color 200ms var(--ease-out), padding-left 200ms var(--ease-out);
  display: inline-block;
  padding-left: 0;
  width: fit-content;
  position: relative;
}
.footer-col a:hover {
  color: var(--ink);
  padding-left: 14px;
}
.footer-col a::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.footer-col a:hover::before { opacity: 1; }
.footer-col span {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.footer-mark {
  padding: 56px 0 28px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.footer-mark-text {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(160px, 22vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-faint);
  display: inline-block;
  user-select: none;
  transition: -webkit-text-stroke-color 900ms var(--ease-out), color 900ms var(--ease-out);
}
.footer:hover .footer-mark-text {
  -webkit-text-stroke-color: var(--accent);
  color: color-mix(in oklab, var(--accent) 14%, transparent);
}

.footer-bot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
}
.footer-bot span:nth-child(2),
.footer-bot span:nth-child(3) { text-align: center; }
.footer-bot span:last-child { text-align: right; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 48px; }
  .footer-bot { grid-template-columns: 1fr; gap: 6px; }
  .footer-bot span:nth-child(n) { text-align: left; }
  .footer-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── FAQ polish — refined hover + on-brand toggle ───────── */
.faq-item summary {
  position: relative;
  transition: background 200ms var(--ease-out);
}
.faq-item:not([open]) summary:hover {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.faq-item summary::after {
  /* subtle amber tick that animates in on hover (closed items) */
  content: "";
  position: absolute;
  left: var(--gutter, 28px);
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 900ms var(--ease-out);
  transform: translateY(-50%);
  margin-left: -16px;
}
.faq-item:not([open]) summary:hover::after { width: 8px; }

/* Re-style the + indicator: more deliberate, with rotation */
.q-toggle {
  transition: transform 900ms var(--ease-out);
}
.faq-item[open] .q-toggle { transform: rotate(45deg) translateY(-12px); }
.faq-item summary:hover .q-toggle::before,
.faq-item summary:hover .q-toggle::after {
  background: var(--accent);
}

/* FAQ body — magazine-answer styling */
.faq-body p {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
  text-wrap: pretty;
}

/* ── Pillar numbers — bigger, more typographic ──────────── */
.pillar-num {
  font-family: var(--f-mono);
  font-size: 18px !important;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding-bottom: 16px;
  position: relative;
}
.pillar-num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.pillar h3 {
  margin-top: 18px !important;
}

/* ── Sample mockup hover state — inner content comes alive ─ */
.sample-frame {
  transition: box-shadow 900ms var(--ease-out);
}
.sample-frame:hover {
  box-shadow: 0 40px 100px -32px rgba(26, 23, 20, 0.42);
}
.sample-frame .sample-nav .sample-wm {
  transition: color 200ms var(--ease-out);
}
.sample-frame:hover .sample-wm,
.sample-frame:hover .sample-wm-dark {
  color: var(--accent);
}
.sample-frame .sample-nav nav a {
  transition: color 200ms var(--ease-out);
}
.sample-frame:hover .sample-nav nav a {
  color: var(--ink);
}
.sample-frame-dark:hover .sample-nav nav a {
  color: var(--paper);
}
/* Browser-chrome dots brighten subtly on hover */
.sample-frame .browser-chrome .dots i {
  transition: background 200ms;
}
.sample-frame:hover .browser-chrome .dots i:nth-child(1) {
  background: #e8694a;
}
.sample-frame:hover .browser-chrome .dots i:nth-child(2) {
  background: #f4c244;
}
.sample-frame:hover .browser-chrome .dots i:nth-child(3) {
  background: #5fc164;
}

/* ── Divider marquee — secondary ticker between offer & why ── */
.divider-marquee {
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 96%, var(--ink) 4%);
}
.marquee-track-sm {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.015em;
  color: var(--ink-dim);
  animation-duration: 38s;
}
.marquee-track-sm i {
  font-style: normal;
  color: var(--accent);
  font-size: 0.6em;
}

/* ── Light leaks on key sections (manifesto, offer already has one, final) ── */
.manifesto {
  position: relative;
  overflow: hidden;
}
.manifesto::after {
  content: "";
  position: absolute;
  top: -15%; right: -8%;
  width: 50%; height: 60%;
  background: radial-gradient(ellipse,
    color-mix(in oklab, var(--accent) 28%, transparent) 0%,
    transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.manifesto > * { position: relative; z-index: 1; }

/* ── Custom underline on founder-letter links ──────────── */
.u {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 200ms var(--ease-out), color 200ms;
}
.u.link:hover {
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
}

/* ── Plate caption refinement — amber dot before label ─── */
.plate-cap-below span:first-child::before {
  content: "·";
  color: var(--accent);
  margin-right: 6px;
  font-weight: 700;
}

/* ── Magnetic CTA hover icon also receives the orb ── */
.magnetic { transition: transform 900ms var(--ease-out); }

/* ── Hero scroll cue refinement ── */
.hero-scroll {
  padding: 6px 12px;
  border: 1px solid rgba(244, 239, 229, 0.22);
  border-radius: 999px;
  background: rgba(15, 14, 12, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-self: end !important;
}

/* ── Offer block — additional amber-glow flourish on hover ─ */
.offer-frame:hover::before {
  opacity: 0.85;
  transition: opacity 900ms var(--ease-out);
}

/* ── FAQ item — glass-morphism background on open state ── */
.faq-item[open] {
  background: color-mix(in oklab, var(--paper) 75%, var(--accent) 4%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms;
}

/* ============================================================
   FOUNDER PORTRAIT — designed empty state
   Shows a deliberate "portrait scheduled" frame with corner ticks,
   meta label, and shoot date. When a real image is dropped into
   the image-slot, the overlay automatically fades out (CSS uses
   the [data-has-image] attribute set by image-slot.js, but we
   also fade based on the presence of a non-empty src).
   ============================================================ */
.founder-portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
}
.founder-portrait-frame image-slot {
  width: 100%;
  height: 100%;
  display: block;
}
.founder-portrait-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--paper-2) 80%, var(--ink) 8%) 0%,
    color-mix(in oklab, var(--paper-2) 88%, var(--ink) 12%) 100%);
  pointer-events: none;
  transition: opacity 900ms var(--ease-out);
}
/* When the image-slot has uploaded data, the overlay fades.
   image-slot.js sets data-has-image on the host element. */
.founder-portrait-frame image-slot[data-has-image] ~ .founder-portrait-overlay {
  opacity: 0;
}

/* Corner ticks (like a film frame guide) */
.fpo-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
}
.fpo-tl { top: 14px; left: 14px;     border-top-width: 1px; border-left-width: 1px; }
.fpo-tr { top: 14px; right: 14px;    border-top-width: 1px; border-right-width: 1px; }
.fpo-bl { bottom: 14px; left: 14px;  border-bottom-width: 1px; border-left-width: 1px; }
.fpo-br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

.fpo-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 28px;
}
.fpo-eyebrow {
  color: var(--accent);
  letter-spacing: 0.12em;
}
.fpo-label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 32px);
  color: var(--ink-dim);
  letter-spacing: -0.005em;
  line-height: 1.2;
  max-width: 22ch;
}
.fpo-shoot {
  color: var(--ink-faint);
  margin-top: 6px;
}

/* Founder meta — small refinement on hover */
.founder-meta div {
  transition: background 200ms var(--ease-out);
}
.founder-meta div:hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* ============================================================
   BACK-TO-TOP FLOATING BUTTON
   Appears after scrolling past the hero (added via JS .visible class)
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 92%, transparent);
  color: var(--paper);
  font-size: 11px;
  border: 1px solid color-mix(in oklab, var(--paper) 16%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), background 200ms;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--accent);
  color: var(--accent-ink);
}
.back-to-top svg {
  transition: transform 200ms var(--ease-out);
}
.back-to-top:hover svg {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 200ms; }
  .back-to-top:hover svg { transform: none; }
}

/* ============================================================
   FINAL POLISH — small things I noticed in the last pass
   ============================================================ */

/* Hero subhead — push contrast just a touch more */
.hero-photo-led .hero-sub {
  color: rgba(244, 239, 229, 0.96);
  text-shadow: 0 1px 2px rgba(0,0,0,0.32), 0 1px 24px rgba(0,0,0,0.5);
}

/* Section eyebrows — refine spacing under the bracket label */
.sec-num.mono {
  letter-spacing: 0.06em;
}

/* Plate captions — ensure they don't compete with content typography */
.plate-cap-below {
  font-size: 10.5px;
  padding-top: 8px;
}
.plate-cap-below span:first-child {
  font-weight: 500;
}

/* Ensure the FAQ rotation is centered and clean */
.faq-item[open] .q-toggle::after { transform: rotate(0); }
.faq-item[open] .q-toggle { transform: rotate(45deg); }

/* The "Hi." in the founder letter now actually lands at hero size — verify */
.founder-letter > .letter-hi { display: block; }

/* Final polish — kill any orphaned bullet that might appear after our list adds */
.footer-col span::before { content: none; }
.fpo-center > * { display: block; }

/* ============================================================
   MOUSE-FOLLOWING LIGHT — premium 21st.dev-style hover effect
   Driven by motion.js setting --mx and --my custom properties on
   the element being hovered. The amber light tracks the cursor
   position inside CTAs and across sample/pillar cards.
   This is the "light follows your mouse" effect Chase AI calls
   out as the #1 craft detail that signals premium in his Top 10
   video. Ties perfectly to the lumen=light brand.
   ============================================================ */

/* CTA buttons — a soft amber light spot tracks the cursor */
.cta {
  --mx: 50%;
  --my: 50%;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 100px at var(--mx) var(--my),
    color-mix(in oklab, var(--accent) 28%, transparent) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.cta:hover::after { opacity: 1; }
.cta > * { position: relative; z-index: 1; }
/* On inverted CTAs the light is brighter cream so it stays visible on dark */
.cta-invert::after {
  background: radial-gradient(circle 100px at var(--mx) var(--my),
    color-mix(in oklab, var(--paper) 38%, transparent) 0%,
    transparent 60%);
}

/* Sample frames + pillar plates — a larger soft amber wash tracks
   the cursor across the card surface */
.sample-frame,
.plate-pillar {
  --mx: 50%;
  --my: 50%;
}
.sample-frame::before,
.plate-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 320px at var(--mx) var(--my),
    color-mix(in oklab, var(--accent) 14%, transparent) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.sample-frame:hover::before,
.plate-pillar:hover::before { opacity: 1; }
.sample-frame, .plate-pillar { position: relative; }
.sample-frame > *, .plate-pillar > * { position: relative; z-index: 1; }

/* On the dark Aubin frame the light wash is warmer, more luminous */
.sample-frame-dark::before {
  background: radial-gradient(circle 320px at var(--mx) var(--my),
    color-mix(in oklab, var(--accent) 26%, transparent) 0%,
    transparent 60%);
  mix-blend-mode: screen;
}

/* ============================================================
   AUBIN — 2-column split: type on left, photo on right.
   Adds a real visual to the type-led sample without losing
   the editorial typography lead. Includes a continuous
   "scan line" sweep across the photo for subtle motion.
   ============================================================ */
.sample-canvas-split {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 520px;
}
.aubin-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: stretch;
  flex: 1;
}
.aubin-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0;
}
.aubin-text .sample-hero-type {
  padding: 8px 0 12px;
  flex: 0 0 auto;
}
.aubin-text .sample-hero-type h3 {
  font-size: clamp(24px, 2.6vw, 38px);
}
.aubin-text .sample-listings {
  margin: 0;
  padding: 12px 0 0;
  flex: 1;
}

.aubin-photo {
  margin: 0;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 229, 0.14);
  background: #0a0a08;
  min-height: 320px;
}
.aubin-photo image-slot {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.aubin-photo image-slot img,
.aubin-photo image-slot canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: contrast(1.04) brightness(0.94);
}
.aubin-photo-cap {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: rgba(244, 239, 229, 0.78);
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
  font-size: 10px;
  z-index: 3;
}
/* Subtle scan line that drifts vertically across the photo */
.aubin-photo-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 40%,
    color-mix(in oklab, var(--accent) 18%, transparent) 49%,
    color-mix(in oklab, var(--accent) 26%, transparent) 50%,
    color-mix(in oklab, var(--accent) 18%, transparent) 51%,
    transparent 60%,
    transparent 100%);
  animation: aubin-scan 9s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}
@keyframes aubin-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 700px) {
  .aubin-split { grid-template-columns: 1fr; }
  .aubin-photo { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .aubin-photo-scan { display: none; }
}

/* Animate the SoHo ghost word — slow horizontal drift */
.sample-ghost-word {
  animation: ghost-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ghost-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-18px, -4px) rotate(-0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sample-ghost-word { animation: none; }
}

/* ============================================================
   SAMPLE ENTRY ANIMATIONS — when a sample frame scrolls into
   view, the frame, inner mockup, and meta stagger up.
   Adds the "this is alive" feel across all three samples.
   ============================================================ */
.sample-frame {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out);
}
.sample-frame.in-view {
  opacity: 1;
  transform: translateY(0);
}
.sample-frame.in-view .sample-nav { animation: sample-fade 900ms var(--ease-out) 200ms both; }
.sample-frame.in-view .sample-hero { animation: sample-fade 900ms var(--ease-out) 200ms both; }
.sample-frame.in-view .sample-hero-md { animation: sample-fade 900ms var(--ease-out) 200ms both; }
.sample-frame.in-view .sample-hero-type { animation: sample-fade 1100ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-tiles { animation: sample-fade 1100ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-tile-solo { animation: sample-fade 1100ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-listings { animation: sample-fade 1100ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-listings li:nth-child(1) { animation: sample-fade-up 900ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-listings li:nth-child(2) { animation: sample-fade-up 900ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-listings li:nth-child(3) { animation: sample-fade-up 900ms var(--ease-out) 900ms both; }
.sample-frame.in-view .aubin-photo { animation: sample-fade 900ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-footer { animation: sample-fade 900ms var(--ease-out) 900ms both; }
.sample-frame.in-view .sample-meta-row { animation: sample-fade 900ms var(--ease-out) 900ms both; }
.sample-frame.in-view .browser-chrome .dots i:nth-child(1) { animation: dot-pop 900ms var(--ease-out) 200ms both; }
.sample-frame.in-view .browser-chrome .dots i:nth-child(2) { animation: dot-pop 900ms var(--ease-out) 200ms both; }
.sample-frame.in-view .browser-chrome .dots i:nth-child(3) { animation: dot-pop 900ms var(--ease-out) 200ms both; }

@keyframes sample-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sample-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dot-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sample-frame { opacity: 1; transform: none; transition: none; }
  .sample-frame * { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cta::after, .sample-frame::before, .plate-pillar::before { display: none; }
}

/* ============================================================
   TYPOGRAPHY DIET — consolidating size scale so the page reads
   as one disciplined system, not eight variations of "lead text"
   and four sizes of mono.
   ============================================================ */

/* All "lead" classes share one display-serif size — the
   sub-headline below a section header. Was 3 variants. */
.pillars-lead,
.page-lead,
.more-samples-lead,
.work-teaser-lead,
.arch-gallery-lead,
.teaser-card .teaser-lead {
  font-family: var(--f-display) !important;
  font-weight: var(--display-weight, 400) !important;
  font-size: clamp(18px, 1.4vw, 22px) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
  text-wrap: pretty;
}

/* All mono labels — lock to one size, one weight, one letter-spacing.
   Was a mess of 10px / 10.5px / 11px / 12px / 13px. */
.mono,
span.mono,
.eyebrow.mono,
.footer-col-h,
.footer-col-h.mono,
.sample-cap-row .mono,
.sample-cap-md .mono,
.sample-listings .sl-num,
.sample-listings .sl-meta,
.sample-meta-row .mono,
.sample-footer .mono,
.sample-footer-dark .mono,
.fpo-eyebrow,
.fpo-shoot {
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}
/* The two intentional non-uppercase mono moments — keep them readable */
.addr.mono,
.browser-chrome .addr {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 11px !important;
}

/* Body font weights — Geist 400 (body) + 500 (links/nav active).
   We dropped 300 and 600 from the loaded fonts so nothing falls back. */
body { font-weight: 400; }

/* ============================================================
   MULTI-PAGE LAYOUT — page-hero, page-outro, work-teaser,
   teaser-row, work-thumb. Used by /work, /about, /faq and the
   teaser blocks on /.
   ============================================================ */

/* Page hero — used at the top of secondary pages */
.page-hero {
  padding: clamp(120px, 16vh, 200px) var(--gutter) clamp(80px, 10vh, 140px);
  max-width: var(--max);
  margin: 0 auto;
}
.page-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: 16ch;
}
.page-h em {
  font-style: italic;
  color: var(--accent);
}
.page-lead {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.42;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 12px 0 0;
  text-wrap: pretty;
}

/* Page outro — used at the bottom of secondary pages, before footer */
.page-outro {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.page-outro-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}
.page-outro-lead {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
}
.page-outro-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.page-outro-back {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-dim);
  padding: 8px 0;
  position: relative;
}
.page-outro-back:hover {
  color: var(--ink);
}
.page-outro-back::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.page-outro-back:hover::after { transform: scaleX(1); }

/* Work teaser on homepage — 2-column intro that links to /work */
.work-teaser {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.work-teaser-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.work-teaser-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.work-teaser-text .sec-h {
  margin: 0;
  border: 0;
  padding: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.work-teaser-text .eyebrow {
  color: var(--ink-faint);
}
.work-teaser-lead {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 50ch;
  margin: 0;
}
.work-teaser-thumbs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.work-thumb {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 22px 24px;
  background: var(--paper);
  transition: background 200ms var(--ease-out), padding-left 200ms var(--ease-out);
  position: relative;
}
.work-thumb:hover {
  background: color-mix(in oklab, var(--accent) 8%, var(--paper));
  padding-left: 34px;
}
.work-thumb::before {
  content: "→";
  position: absolute;
  left: 8px;
  top: 22px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 200ms;
}
.work-thumb:hover::before { opacity: 1; }
.work-thumb-num { color: var(--ink-faint); }
.work-thumb-name {
  font-family: var(--f-display);
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.work-thumb-loc { color: var(--ink-faint); }
.work-thumb-dark {
  background: var(--ink);
  color: var(--paper);
}
.work-thumb-dark .work-thumb-num,
.work-thumb-dark .work-thumb-loc { color: rgba(244, 239, 229, 0.5); }
.work-thumb-dark .work-thumb-name { color: var(--paper); }
.work-thumb-dark:hover { background: color-mix(in oklab, var(--accent) 20%, var(--ink)); }

@media (max-width: 900px) {
  .work-teaser-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Teaser row on homepage — about + faq side by side */
.teaser-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.teaser-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(36px, 4vw, 56px);
  background: var(--paper-2);
  border-radius: 6px;
  transition: background 900ms var(--ease-out), transform 900ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.teaser-card:hover {
  background: color-mix(in oklab, var(--accent) 10%, var(--paper-2));
  transform: translateY(-2px);
}
.teaser-card .eyebrow {
  color: var(--ink-faint);
}
.teaser-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.teaser-card .teaser-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  max-width: 38ch;
}
.teaser-cta {
  color: var(--accent);
  margin-top: 8px;
  transition: letter-spacing 200ms var(--ease-out);
}
.teaser-card:hover .teaser-cta {
  letter-spacing: 0.12em;
}

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

/* Founder + FAQ standalone pages — adjust padding so they're not hero-tall */
.founder-page {
  padding-top: clamp(48px, 6vh, 96px) !important;
}
.faq-page {
  padding-top: clamp(48px, 6vh, 96px) !important;
}
.founder-page .founder-letter .sec-num,
.faq-page .faq-list {
  margin-top: 0 !important;
}

/* Ensure all sec-h get a balanced wrap so single words don't orphan
   (this fixes the "them." offset Baraa flagged) */
.sec-h,
.page-h,
.teaser-h,
.hero-h {
  text-wrap: balance;
}

/* ============================================================
   AI-SLOP REDUCTION (per Chase's Top 10 video, 2026)
   He calls out glass-morphism as becoming the new AI slop in 2026.
   We have it in multiple places. Trimming the ones that read most
   "generic AI" while keeping the ones that genuinely help legibility.
   ============================================================ */

/* Remove glass-morphism from .strip (brokerage marquee) —
   it doesn't need a backdrop blur, the marquee is already on cream */
.strip::before {
  display: none;
}

/* Keep nav-scrolled glass — that's a functional readability thing
   when scrolling over photography. Trim opacity slightly for restraint. */
.nav.scrolled {
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  background: color-mix(in oklab, var(--paper) 78%, transparent);
}

/* Trim FAQ glass-morphism — the tint was too "AI demo." Keep open
   state slightly distinguished but drop the blur effect. */
.faq-item[open] {
  background: color-mix(in oklab, var(--paper) 92%, var(--accent) 3%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Architecture gallery — reduce vertical breathing between the 3 plates */
.arch-gallery {
  gap: clamp(32px, 5vh, 64px);
  padding: var(--section-pad) 0;
}

/* Hero-stack plates — slightly smaller min-height so the gallery doesn't feel padded */
.plate-hero-stack image-slot {
  min-height: 56vh;
}

/* Sample sections — reduce padding between back-to-back sample frames */
.sample {
  padding-bottom: clamp(40px, 6vh, 80px);
}
.more-samples {
  padding-top: clamp(40px, 6vh, 80px);
}

/* ============================================================
   LEVEL 6 CRAFT — scroll progress, light sweep on hero,
   glass marquee, count-up stats, page-load reveal
   ============================================================ */

/* Scroll progress indicator — thin amber line at viewport top */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  background: rgba(26, 23, 20, 0.04);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: width 200ms linear;
}

/* Hero — a single warm-light sweep passing over the headline on first load */
.hero-photo-led .hero-h {
  position: relative;
  isolation: isolate;
}
.hero-photo-led .hero-h::after {
  content: "";
  position: absolute;
  inset: -0.2em -10% -0.2em -10%;
  background: linear-gradient(105deg,
    transparent 35%,
    color-mix(in oklab, var(--accent) 50%, transparent) 50%,
    transparent 65%);
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-30%);
  animation: hero-light-sweep 1400ms cubic-bezier(.2,.7,.2,1) 900ms 1 forwards;
}
@keyframes hero-light-sweep {
  0%   { opacity: 0;   transform: translateX(-30%); }
  18%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateX(40%); }
}

/* Glass morphism for the brokerage marquee — subtle backdrop blur band */
.strip {
  position: relative;
}
.strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  z-index: -1;
  border-radius: 2px;
}

/* Counter — stat numbers animate from 0 → target on intersection.
   Use tabular-nums so digits don't jitter as they tick. */
.count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  min-width: 2.4ch;
}

/* Page-load reveal — body fades up slightly on first paint */
body {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
body.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Motion-off respect */
body[data-motion="off"] .hero-photo-led .hero-h::after { display: none; }
body[data-motion="off"] .scroll-progress { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo-led .hero-h::after { display: none; }
  .scroll-progress { display: none; }
  body { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PILLARS — section header tightening + lead line
   Pulls the headline closer to the content below.
   ============================================================ */
.sec-head-pillars {
  padding-bottom: 0;
}
.pillars-lead {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.42;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 24px auto 0;
  padding: 18px var(--gutter) 0 calc(80px + var(--gutter));
  max-width: calc(var(--max) - 80px);
  text-wrap: pretty;
}
.pillars .pillar-grid {
  margin-top: 48px;
}

/* ============================================================
   MANIFESTO — tighter rhythm, eyebrow + sig divider
   ============================================================ */
.sec-head-manifesto {
  align-items: end;
}
.manifesto-body {
  margin-top: 36px;
}
.manifesto-eyebrow {
  color: var(--ink-faint);
  margin: 0 0 12px;
  padding: 0;
}
.manifesto-rule {
  height: 1px;
  background: var(--rule);
  margin: 12px 0 6px;
  width: 80px;
}
.manifesto-sig {
  margin-top: 0 !important;
}

/* ============================================================
   HERO — Ken Burns zoom on the background photo.
   Subtle, infinite, alternating. CSS-only so it works without
   any video. Once you drop a Higgsfield/Seedance video in, the
   <video> takes over and this is hidden.
   ============================================================ */
@keyframes hero-ken-burns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.2%, -0.8%); }
}
.hero-bg image-slot,
.hero-bg image-slot img,
.hero-bg image-slot canvas {
  animation: hero-ken-burns 32s ease-in-out infinite alternate;
  will-change: transform;
}

/* ============================================================
   HERO — video background layer.
   Hidden until <video> has a real src. When it does, it covers
   the photo. Ken Burns disabled in that case (real motion takes
   over). Stick a Higgsfield loop in data-src and it'll mount.
   ============================================================ */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  pointer-events: none;
}
.hero-bg-video.ready {
  opacity: 1;
}
/* When video is playing, stop the Ken Burns on the photo underneath */
.hero-bg:has(.hero-bg-video.ready) image-slot,
.hero-bg:has(.hero-bg-video.ready) image-slot img {
  animation: none !important;
}

/* The gradient sits ABOVE the video too */
.hero-bg-gradient { z-index: 2; }

/* Cursor trail dots REMOVED — custom cursor takeover violates editorial spec. */

/* ============================================================
   SECTION NAV-LINK TRANSITIONS — when a nav link is clicked,
   fade the target section's content in briefly. The scroll
   itself already uses scroll-behavior: smooth.
   ============================================================ */
section[data-nav-flash] {
  animation: nav-flash 1100ms var(--ease-out) 1;
}
@keyframes nav-flash {
  0%   { opacity: 0.65; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  section[data-nav-flash] { animation: none; }
}

/* ============================================================
   COHORT STRIP — fixed thin band at very top, dismissible
   ============================================================ */
.cohort-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 250;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  gap: 12px;
  min-height: 32px;
  transition: transform 900ms var(--ease-out), opacity 200ms;
}
.cohort-strip.dismissed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.cohort-strip-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Desktop shows the full message; the short one is mobile-only. */
.cohort-msg-short { display: none; }
.cohort-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
  animation: pulse 2.4s var(--ease-in-out) infinite;
  display: inline-block;
}
.cohort-cta {
  margin-left: 8px;
  padding: 2px 10px;
  border: 1px solid rgba(244, 239, 229, 0.32);
  border-radius: 999px;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.cohort-cta:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.cohort-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(244, 239, 229, 0.5);
  font-size: 16px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 999px;
  transition: color 200ms, background 200ms;
}
.cohort-close:hover { color: var(--paper); background: rgba(244, 239, 229, 0.08); }

/* Push the nav + scroll-progress down to make room for the strip */
.nav { top: 32px; transition: top 900ms var(--ease-out); }
.scroll-progress { top: 32px; transition: top 900ms var(--ease-out); }
body.cohort-dismissed .nav,
body.cohort-dismissed .scroll-progress { top: 0; }

@media (max-width: 700px) {
  .cohort-strip { font-size: 10px; padding: 6px 36px 6px 12px; }
  .cohort-cta { display: none; }
  /* Keep the strip exactly ONE line on phones. A wrapped two-line
     strip grew taller than its 32px slot, and the nav (pinned at
     top:32px) collided with it — that's what threw "lumen." out of
     place. Shorter copy + nowrap guarantees a predictable height. */
  .cohort-strip-inner { white-space: nowrap; }
  .cohort-msg-full { display: none; }
  .cohort-msg-short { display: inline; }
}

/* PAGE-ENTRY SWEEP — REMOVED. The 1400ms decorative intro
   animation exceeded the 900ms cap in the editorial spec and
   served no signal — pure decoration. */

/* ============================================================
   PHOTO HOVER — subtle zoom + caption highlight on figure hover
   ============================================================ */
.plate, .sample-tile {
  cursor: pointer;
}
.plate image-slot,
.sample-tile image-slot {
  display: block;
  overflow: hidden;
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}
.plate:hover image-slot,
.sample-tile:hover image-slot {
  transform: scale(1.025);
}
.plate-cap-below {
  transition: color 200ms var(--ease-out), border-color 200ms;
}
.plate:hover .plate-cap-below,
.sample-tile:hover .plate-cap-below {
  color: var(--ink);
  border-color: var(--rule-strong);
}
.plate:hover .plate-cap-below span:first-child,
.sample-tile:hover .plate-cap-below span:first-child {
  color: var(--accent);
}
/* Hero background photo is decorative, not a content figure */
.hero-bg, .hero-bg image-slot {
  cursor: default;
}
.hero-bg image-slot { transition: none; }
.hero-bg:hover image-slot { transform: none !important; }

/* ============================================================
   SCROLL PARALLAX — architecture gallery photos drift slower than scroll
   Driven by motion.js setting --parallax-y on the image-slot
   ============================================================ */
.arch-gallery .plate image-slot {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform 200ms linear;
}
.arch-gallery .plate:hover image-slot {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.025);
  transition: transform 900ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .arch-gallery .plate image-slot { transform: none !important; }
}

/* ============================================================
   SECTION-EDGE HORIZON LINES — a single thin amber gradient mark
   between major sections, signals a section break
   ============================================================ */
.manifesto > header.sec-head::before,
.arch-gallery > .arch-gallery-head::before,
.sample::before,
.more-samples::before,
.pillars > header.sec-head::before,
.why > header.sec-head::before,
.faq > header.sec-head::before,
.final::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: min(560px, 70%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 50%, transparent) 50%,
    transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}
.manifesto > header.sec-head,
.arch-gallery > .arch-gallery-head,
.pillars > header.sec-head,
.why > header.sec-head,
.faq > header.sec-head { position: relative; }
.sample, .more-samples, .final { position: relative; }

/* ============================================================
   AUBIN — sample-footer-dark variant
   ============================================================ */
.sample-footer-dark {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 239, 229, 0.12);
  font-size: 12px;
  color: rgba(244, 239, 229, 0.5);
  margin-top: 12px;
}

/* Responsive: stack the two extra samples on small screens */
@media (max-width: 900px) {
  .more-samples-grid { grid-template-columns: 1fr; }
  .more-samples-head { flex-direction: column; gap: 16px; }
  .more-samples-lead { text-align: left; }
  .manifesto-body { margin-left: 0; }
  .arch-gallery-head { grid-template-columns: 1fr; gap: 12px; }
  .hero-photo-led .hero-overlay { padding-top: 120px; }
  .hero-photo-led .hero-h { font-size: clamp(48px, 12vw, 96px); max-width: none; }

  /* Work page: .more-samples + .page-outro stacked their full
     section-pad (96–180px bottom + 80–140px top = 176–320px of
     dead space between the last sample card and the closing
     CTA). Collapse the join — keep the rhythm tight without
     crowding the cards or the lead line. The .page-outro border-top
     stays as the visual divider. */
  .more-samples { padding-bottom: clamp(28px, 4vh, 48px); }
  .more-samples + .page-outro { padding-top: clamp(56px, 7vh, 80px); }
}

/* ============================================================
   Responsive — desktop-first; gentle phone fallback
   ============================================================ */
@media (max-width: 900px) {
  .nav { padding: 18px 20px; }
  .nav-links { display: none; }
  .hero { min-height: auto; padding-top: 120px; }
  .hero-bottom { grid-template-columns: 1fr; gap: 28px; }
  .hero-bottom .cta { align-self: start; }
  .strip { grid-template-columns: 1fr; }
  .pillar-grid, .why-grid { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder-aside { position: static; }
  .sec-head { grid-template-columns: 1fr; gap: 12px; }
  .offer-terms { grid-template-columns: 1fr; }
  .final-cta { flex-direction: column; align-items: start; }
  .final-sub { text-align: left; }
  .footer-bot { grid-template-columns: 1fr; gap: 6px; }
  .footer-bot span:nth-child(n) { text-align: left; }
  .faq-item summary, .faq-body { grid-template-columns: 40px 1fr 30px; }
}

/* ============================================================
   REAL IMAGES (.ph-img) — replaces the Claude-Design image-slot
   web component. object-fit:cover so photos fill their figure
   edge-to-edge with no letterbox; captions sit flush beneath.
   This block is last so it wins the cascade. Fixes the
   "detached caption / empty grey slot" defect site-wide.
   ============================================================ */
img.ph-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

/* Hero fallback (sits behind the looping video) — full bleed */
.hero-bg .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  z-index: 0;
}

/* Architecture gallery — one cinematic lead, then a matched 2-up
   pair. Fixed aspect ratios make the photos fill the section so
   it never reads as empty, and captions sit directly under. */
.plate-arch-lead .ph-img { aspect-ratio: 40 / 17; max-height: 64vh; }
.arch-pair { align-items: stretch; }
.plate-arch-half { height: 100%; }
.plate-arch-half .ph-img { aspect-ratio: 4 / 5; height: 100%; }

/* Pillars — vertical editorial crop */
.plate-pillar .ph-img { aspect-ratio: 4 / 5; }

/* Work-page sample tiles */
.sample-tile .ph-img { aspect-ratio: 4 / 3; }
.sample-tile-solo .ph-img { aspect-ratio: 3 / 4; }
.aubin-photo .ph-img { aspect-ratio: 1 / 1; height: 100%; border-radius: 0; border: 0; }

/* Captions flush to the image — no dead gap */
.plate { gap: 12px; }
.plate-cap-below { padding-top: 10px; margin-top: 0; }

/* Founder portrait — empty state until a real photo lands.
   Empty: corner-marks + "to be shot" treatment (honest, not filler).
   Filled: <picture> fills the frame edge-to-edge, overlay hides.   Loaded: fade-in once the lazy <img> decodes (no pop). */
.founder-portrait-frame {
  margin: 0;
  background:
    radial-gradient(120% 90% at 70% 20%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 55%),
    color-mix(in oklab, var(--paper-2) 78%, var(--ink) 7%);
}
.founder-portrait-frame picture,
.founder-portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.founder-portrait-frame[data-loaded] .founder-portrait-img {
  opacity: 1;
}
.founder-portrait-frame[data-state="filled"] .founder-portrait-overlay {
  display: none;
}

/* ============================================================
   LAUNCH POLISH — kills the remaining "sparse / broken" reads.
   Last in the file so it wins the cascade.
   ============================================================ */

/* Offer headline: the per-line padding (0.20em+0.34em at 124px) was
   blowing a ~130px gap between lines so it looked broken/empty.
   Tight, confident, no clipped descenders. */
.offer-h {
  line-height: 1.0;
  margin: 0 0 48px;
}
.offer-h .line {
  padding-top: 0.02em;
  padding-bottom: 0.12em;
}

/* Manifesto: this is the brand thesis — it should command the section,
   not float as a timid indented column in an ocean of cream. */
.manifesto-body {
  margin-left: clamp(0px, 4vw, 64px);
  max-width: 30ch;
  gap: 22px;
}
.manifesto-body p {
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.28;
}
.manifesto-body p:last-of-type,
.manifesto-body p em {
  /* the closing "Lumen brings the light back." lands with weight */
}
.manifesto-sig { margin-top: 18px !important; opacity: 0.7; }
.manifesto { padding-bottom: clamp(56px, 6vh, 88px); }

/* Final "Apply." — a confident outlined statement, not a faint smudge.
   Visible stroke + a warm interior glow so the closing section reads
   finished and intentional. */
.ghost-word {
  -webkit-text-stroke: 1.5px var(--ink);
  color: color-mix(in oklab, var(--accent) 12%, transparent);
  padding-top: 0.16em;
  padding-bottom: 0.06em;
}

/* ============================================================
   LUXURY SYSTEM — final GTM pass.
   Reference vocabulary: Aristide / Locomotive / Bureau Borsché /
   Cartier-Loro Piana digital. Principles applied:
   - antique gilt, not harvest mustard (depth + lower chroma)
   - the manifesto reads as a framed centred *statement*, the way
     luxury houses set a credo — no lopsided dead margin
   - whitespace is rhythmic and framed by hairlines, never a vacuum
   - slow, weighted motion easing
   Last in the file so it wins the cascade.
   ============================================================ */

/* — Antique-gilt offer block. A full bleed of the bright UI accent
   read cheap; a deep tonal gold gradient reads expensive. The small
   accent (links, stat numerals, dots) stays bright on purpose. */
.offer-frame {
  background:
    radial-gradient(120% 140% at 78% 18%,
      oklch(0.78 0.135 82) 0%,
      oklch(0.70 0.135 79) 46%,
      oklch(0.60 0.125 76) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.86 0.10 85 / 0.5),
    0 40px 120px -48px oklch(0.45 0.10 70 / 0.55);
}
.offer-h, .offer-h em { color: #1c1407; }
.offer-terms li, .offer-head .eyebrow.on-dark { color: oklch(0.30 0.06 60); }
.offer-aside { color: oklch(0.34 0.06 60); }

/* slightly deepen the global accent so gilt details aren't fluorescent */
body[data-accent="amber"] {
  --accent: oklch(0.71 0.142 80);
  --accent-2: oklch(0.60 0.12 78);
}

/* — Manifesto as a framed luxury statement (kills the persistent
   lopsided dead-right band). Centred editorial interlude, top &
   bottom hairlines, generous symmetric breathing. */
.manifesto {
  text-align: center;
  padding: var(--section-pad) var(--gutter);
  border-top: 1px solid var(--rule);
}
.manifesto .sec-head,
.manifesto .sec-head-manifesto {
  display: block;
  grid-template-columns: none;
  max-width: none;
  margin: 0 auto;
  text-align: center;
}
.manifesto .sec-num {
  border-top: 0;
  padding-top: 0;
  display: block;
  margin-bottom: 22px;
  color: var(--accent-2);
}
.manifesto .sec-h {
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 auto;
  max-width: 15ch;          /* "Light, applied / to real estate." — 2 lines */
  text-wrap: balance;
}
.manifesto-body {
  margin: 40px auto 0;
  max-width: 34ch;
  align-items: center;
  text-align: center;
  gap: 26px;
}
.manifesto-body p {
  font-size: clamp(23px, 2.05vw, 34px);
  line-height: 1.34;
}
.manifesto-rule {
  width: 44px;
  height: 1px;
  margin: 14px auto 6px;
  background: var(--accent-2);
}
.manifesto-sig {
  margin: 6px auto 0 !important;
  opacity: 0.62;
}

/* — Evergreen "why": kill the dead green bands above/below the stats
   so the luxury bracket-gold moment is framed, not adrift. */
.why {
  padding: clamp(76px, 9vh, 124px) 0 !important;
}
.why-grid { margin-bottom: 0; }
.why-grid li { padding-bottom: 18px; }

/* — Editorial consistency: section headlines hang left on the grid,
   never centred (the work-teaser is the quality bar; match it). */
.pillars .sec-h,
.why .sec-h,
.manifesto-adjacent .sec-h { text-align: left; }
.sec-h { text-align: left; }
.manifesto .sec-h { text-align: center; } /* the credo is the one deliberate exception */

/* — Slow, weighted luxury motion. Reveals settle instead of snapping;
   also shrinks the ugly mid-animation window. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* — Refined final ghost word: lighter, more elegant hairline, less
   crude. Luxury ghost type whispers. */
.ghost-word {
  -webkit-text-stroke: 1px color-mix(in oklab, var(--ink) 64%, transparent);
  color: color-mix(in oklab, var(--accent) 8%, transparent);
  font-size: clamp(120px, 24vw, 380px);
}

/* ============================================================
   LEVEL 7 — the layer that separates Awwwards/FWA work from
   "a nice site." Film grain, a unified photographic grade,
   native cross-document view transitions. Smooth scroll +
   scroll-velocity reactivity live in enhance.js.
   ============================================================ */

/* — Film grain + vignette. Every editorial-luxury house (Aristide,
   Bureau Borsché, Cartier campaign sites) lays a fine grain over
   everything — it's the single cheapest "shot on film, not exported
   from Figma" signal. SVG fractal noise, soft-light, barely there. */
/* PERF: a fixed overlay with any mix-blend-mode != normal forces the
   browser to re-blend the whole viewport against scrolling content
   EVERY frame → the scroll jank. Static + normal blend + its own
   compositor layer = effectively free, still reads as film grain. */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.05;
  /* SVG fractal-noise tile (64x64 was the spec; 150 reads gentler at this opacity). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  /* `multiply` makes the noise read on cream surfaces (where it
     darkens to a subtle film-grain) but disappear over dark
     photographic content (dark × midgray ≈ dark — invisible).
     This is the cream-only spec without a per-section pseudo-element. */
  mix-blend-mode: multiply;
  transform: translateZ(0);   /* own compositor layer; no repaint on scroll */
  /* Subtle drift — 8s loop, alternates between two micro-positions.
     Animating background-position keeps it cheap; the box never moves. */
  animation: grain-drift 8s steps(2, end) infinite alternate;
}
@keyframes grain-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 1.5px 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}
.page-vignette {
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  /* multiply blend = ONE light envelope across every section.
     Darkens edges of cream and dark sections alike — same room, same lamp. */
  mix-blend-mode: multiply;
  background: radial-gradient(120% 90% at 50% 18%,
    transparent 55%,
    rgba(20, 17, 14, 0.16) 100%);
}

/* — One photographic grade across every still so a pile of
   different-temperature Unsplash shots reads as a single
   commissioned shoot. Warm, a touch desaturated, lifted. */
img.ph-img {
  filter: saturate(0.92) contrast(1.045) brightness(1.015) sepia(0.05) hue-rotate(-4deg);
}
.hero-bg-video, .hero-bg .ph-img {
  filter: saturate(0.95) contrast(1.05) brightness(1.0) sepia(0.04);
}

/* — Native cross-document view transitions. Same-origin multipage
   is the textbook case; this is the 2024+ way to get the soft
   page-morph that used to need Barba.js/Swup. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-out 900ms cubic-bezier(0.16,1,0.3,1) both;
}
::view-transition-new(root) {
  animation: vt-in 900ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); } }

/* Keep the persistent chrome (nav/wordmark) stable across the morph */
.nav, .wordmark { view-transition-name: nav; }
::view-transition-group(nav) { animation-duration: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   HERO TYPE — connected & even (fixes the "funky / disconnected"
   overlay). Root cause: .hero-h .line had 0.20em/0.34em asymmetric
   padding (for the word-reveal mask) while line-height was 0.94 —
   so block-gaps were huge and wrapped-line-gaps were cramped.
   Now: even leading, minimal symmetric mask padding, a confident
   left margin, and a soft scrim so the top line reads over sky.
   ============================================================ */
.hero-photo-led .hero-h {
  font-size: calc(clamp(54px, 7.4vw, 118px) * var(--hero-scale));
  line-height: 1.08;
  letter-spacing: -0.032em;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(10,8,6,0.30), 0 4px 36px rgba(10,8,6,0.42);
}
.hero-photo-led .hero-h .line {
  display: block;
  overflow: hidden;
  /* tiny, symmetric — just enough that the reveal mask doesn't clip
     ascenders/descenders. No more giant uneven block gap. */
  padding-top: 0.06em;
  padding-bottom: 0.12em;
  margin: 0;
}
/* Even rhythm between the two .line blocks == the wrapped-line rhythm */
.hero-photo-led .hero-h .line + .line { margin-top: 0.04em; }

/* Stronger, cleaner scrim so "These buildings are art." holds over the
   bright part of the skyline without a cheap hard shadow. */
.hero-photo-led .hero-bg-gradient {
  background:
    linear-gradient(180deg,
      rgba(12,10,8,0.58) 0%,
      rgba(12,10,8,0.30) 30%,
      rgba(12,10,8,0.10) 52%,
      rgba(12,10,8,0.66) 82%,
      rgba(12,10,8,0.92) 100%),
    linear-gradient(90deg,
      rgba(12,10,8,0.42) 0%,
      rgba(12,10,8,0.10) 42%,
      rgba(12,10,8,0) 70%);
}

/* A confident left margin so the headline never bleeds to the edge. */
.hero-photo-led .hero-overlay {
  padding-left: clamp(32px, 6vw, 104px);
  padding-right: clamp(28px, 4vw, 72px);
}
.hero-photo-led .hero-sub { max-width: 46ch; }

@media (max-width: 640px) {
  .hero-photo-led .hero-h {
    font-size: calc(clamp(40px, 11vw, 64px) * var(--hero-scale));
    max-width: 18ch;
  }
  .hero-photo-led .hero-overlay { padding-left: clamp(22px, 7vw, 40px); }
}

/* Hero rag: a deliberate left-aligned stack, not a balance-staggered
   zigzag. balance was centring each wrapped line → arbitrary indents. */
.hero-photo-led .hero-h {
  text-wrap: pretty;
  text-align: left;
  max-width: 22ch;
  font-size: calc(clamp(52px, 6.8vw, 108px) * var(--hero-scale));
}
.hero-photo-led .hero-h .line { text-align: left; }
@media (max-width: 640px) {
  .hero-photo-led .hero-h {
    max-width: 17ch;
    font-size: calc(clamp(38px, 10.5vw, 60px) * var(--hero-scale));
  }
}

/* ============================================================
   SECTION HEADERS — eyebrow stacked ABOVE the headline, the way
   the hero & manifesto already do it. The 80px side-rail was too
   narrow and wrapped "[ § 02 · / APPROACH ]" — that was the
   "positioning isn't there" you flagged. One consistent treatment.
   ============================================================ */
.sec-head:not(.sec-head-manifesto) {
  display: block;
  grid-template-columns: none;
  max-width: var(--max);
}
.sec-head:not(.sec-head-manifesto) .sec-num {
  display: inline-block;
  white-space: nowrap;
  border-top: 0;
  padding-top: 0;
  margin: 0 0 clamp(18px, 2.2vw, 30px);
  color: var(--accent-2);
  letter-spacing: 0.14em;
}
.why .sec-head .sec-num { color: color-mix(in oklab, var(--accent) 76%, transparent); }

/* Sentence-per-line headlines = deliberate beats, even leading
   (same discipline as the hero — nothing reads disjointed). */
.sec-h .line { display: block; }
.sec-h {
  line-height: 1.06;
  text-wrap: pretty;
}
.sec-h .line + .line { margin-top: 0.02em; }

/* ============================================================
   "THE GAP" — was a 3-stat lecture (the boring-info offender).
   Now one felt gut-punch on the evergreen: emotion concealing
   the "why", not teaching it. Journey, not assignment.
   ============================================================ */
.why-statement {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(32px, 6vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.why-statement .sec-num {
  color: color-mix(in oklab, var(--accent) 78%, transparent);
  border-top: 0;
  padding-top: 0;
  margin: 0 0 clamp(22px, 3vw, 40px);
  letter-spacing: 0.16em;
}
.why-line {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(40px, 6vw, 104px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  color: color-mix(in oklab, var(--paper) 96%, transparent);
  max-width: 18ch;
}
.why-line .line { display: block; }
.why-line .line + .line { margin-top: 0.04em; }
.why-line em {
  font-style: italic;
  color: var(--accent);
}
.why-sub {
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  max-width: 44ch;
  font-family: var(--f-display);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.42;
  color: color-mix(in oklab, var(--paper) 60%, transparent);
}
@media (max-width: 640px) {
  .why-line { font-size: clamp(34px, 9.5vw, 52px); max-width: 14ch; }
  .why-statement { padding: 0 clamp(22px, 7vw, 40px); }
}

/* ============================================================
   NAV — cinematic two-state. No cream slab over the dusk hero.
   at-top: transparent + dark text (bright sky behind).
   on-hero (scrolled, hero still behind nav): soft dark vignette
   + light text — cohesive with the dusk video, no hard edge.
   scrolled (past hero, cream content): cream glass + dark text.
   All three crossfade smoothly via the .nav transition.
   ============================================================ */
.nav {
  transition: background-color 900ms var(--ease-out),
              backdrop-filter 900ms var(--ease-out),
              border-color 900ms var(--ease-out),
              padding 900ms var(--ease-out);
}
.nav .wordmark,
.nav .nav-links a { transition: color 900ms var(--ease-out), background 200ms var(--ease-out); }

/* Over the hero, scrolled: a top-down scrim (gradient, not a bar) */
.nav.on-hero:not(.at-top) {
  background: linear-gradient(180deg,
    rgba(20,17,14,0.46) 0%,
    rgba(20,17,14,0.16) 58%,
    rgba(20,17,14,0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav.on-hero:not(.at-top) .wordmark { color: var(--paper); }
.nav.on-hero:not(.at-top) .nav-links a { color: color-mix(in oklab, var(--paper) 82%, transparent); }
.nav.on-hero:not(.at-top) .nav-links a:hover { color: var(--paper); }
.nav.on-hero:not(.at-top) .nav-links a::before { background: color-mix(in oklab, var(--paper) 20%, transparent); }
.nav.on-hero:not(.at-top) .nav-links a::after { background: var(--paper); }
body[data-nav="inline"] .nav.on-hero:not(.at-top) .nav-links a:hover { color: var(--paper); }

/* At the very top: fully transparent, no scrim (matches the clean
   look you already liked); keep the default dark text. */
.nav.at-top {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

/* ============================================================
   HEADLINE WRAP — balance every reveal headline so no line is
   left a short widow. Applies per .line block when present.
   ≤6 lines, cheap, well-supported. The single polish that
   makes wraps read as intentional, not accidental.
   ============================================================ */
.reveal-words,
.reveal-words .line,
.why-line,
.why-line .line,
.offer-h .line,
.sec-h,
.sec-h .line,
.page-h,
.teaser-h { text-wrap: balance; }

/* ============================================================
   MOBILE TYPE — AUTHORITATIVE. Consolidates the 6+ conflicting
   .hero-h / .sec-h font-size rules into one final cap so display
   headlines never exceed the phone viewport. Cold-email clicks
   land here first — nothing may clip. (cascade-last wins.)
   ============================================================ */
@media (max-width: 640px) {
  .hero-photo-led .hero-h {
    font-size: calc(clamp(40px, 11.5vw, 60px) * var(--hero-scale)) !important;
    max-width: 14ch !important;
    line-height: 1.04 !important;
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
  }
  .sec-h, .sec-h .line,
  .why-line, .why-line .line,
  .offer-h, .offer-h .line,
  .manifesto-h, .page-h {
    font-size: clamp(30px, 8.5vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
  }
  .footer-mark-text { font-size: clamp(72px, 26vw, 132px) !important; }
}

/* Mobile: neutralise desktop editorial left-rail offsets that push
   text off a phone screen. AUTHORITATIVE TYPE SCALE (cascade-last —
   final word): a commanding, meaningfully-varied hierarchy —
   hero ≫ section ≫ teaser ≫ body — not the timid near-equal scale
   that flattened it. wrap + break-word keep it from ever clipping
   even at the larger sizes. */
@media (max-width: 640px) {
  .hero-photo-led .hero-h {
    font-size: calc(clamp(40px, 11.5vw, 60px) * var(--hero-scale)) !important;
    max-width: 14ch !important;
    line-height: 1.04 !important;
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
  }
  .sec-h, .sec-h .line,
  .why-line, .why-line .line,
  .offer-h, .offer-h .line,
  .manifesto-h, .page-h {
    font-size: clamp(30px, 8.5vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
  }
  .teaser-h {
    font-size: clamp(23px, 6vw, 30px) !important;
    line-height: 1.16 !important;
    text-wrap: pretty !important;
  }
  .pillars { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  .pillars .sec-head, .pillars-lead {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; max-width: none !important;
  }
  .manifesto-body { margin-left: 0 !important; }
  .arch-gallery-head { grid-template-columns: 1fr !important; }
}

/* ============================================================
   THE THESIS — three cinematic full-bleed acts. The photography
   carries the argument: the art, the waste (shown via a built
   embarrassing template site), the light. Replaces the centred
   text column + purposeless FIG gallery.
   ============================================================ */
.thesis { display: block; background: var(--ink); }
.act {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.act-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.92) contrast(1.04) brightness(0.92);
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out);
}
.act.in-view .act-bg { transform: scale(1.0); }
.act-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.46) 0%, rgba(10,8,6,0.12) 34%,
      rgba(10,8,6,0.30) 62%, rgba(10,8,6,0.86) 100%),
    linear-gradient(90deg, rgba(10,8,6,0.62) 0%, rgba(10,8,6,0.14) 46%, rgba(10,8,6,0) 72%);
}
.act-scrim-heavy {
  background:
    linear-gradient(180deg, rgba(8,7,5,0.66) 0%, rgba(8,7,5,0.50) 45%,
      rgba(8,7,5,0.90) 100%),
    linear-gradient(90deg, rgba(8,7,5,0.74) 0%, rgba(8,7,5,0.30) 55%, rgba(8,7,5,0.10) 100%);
}
.act-body {
  position: relative; z-index: 3;
  max-width: 60ch;
  padding: clamp(48px, 9vh, 132px) clamp(28px, 7vw, 132px);
  color: var(--paper);
}
.act-kicker {
  display: inline-block;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
}
.act-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(44px, 6.4vw, 116px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.42);
}
.act-h em { font-style: italic; color: var(--accent); }
.act-sub {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.7vw, 27px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--paper) 86%, transparent);
  max-width: 46ch;
  margin: 26px 0 0;
  text-wrap: pretty;
}
.act-sig {
  display: block;
  margin-top: 30px;
  color: color-mix(in oklab, var(--paper) 56%, transparent);
  letter-spacing: 0.1em;
  font-size: 12px;
}

/* ACT II — the embarrassing template site, built in HTML so the
   contrast IS the argument. Deliberately ugly: system serif, blue
   underlined links, stretched photo, garish badge, dead grey. */
.waste-site {
  position: absolute;
  z-index: 2;
  top: clamp(56px, 12vh, 150px);
  right: clamp(20px, 5vw, 110px);
  width: min(46vw, 540px);
  background: #d9d9d6;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
  transform: rotate(2.4deg);
  font-family: "Times New Roman", Times, serif;
  filter: saturate(0.7);
}
.waste-bar {
  display: flex; align-items: center; gap: 10px;
  background: #c2c2bd; padding: 7px 12px;
  font-family: Arial, sans-serif; font-size: 11px; color: #555;
}
.waste-dots { display: inline-flex; gap: 5px; }
.waste-dots i { width: 9px; height: 9px; border-radius: 50%; background: #9a9a93; display: block; }
.waste-url {
  background: #efefe9; color: #777; padding: 3px 10px; border-radius: 3px;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.waste-page { background: #ececea; padding: 14px 16px 18px; }
.waste-nav { font-size: 14px; color: #1a1a1a; margin-bottom: 12px; }
.waste-nav b { color: #1f3a8a; }
.waste-nav a {
  color: #1414cc; text-decoration: underline; margin-left: 8px; font-size: 13px; cursor: pointer;
}
.waste-shot { position: relative; line-height: 0; }
.waste-shot img {
  width: 100%; height: 150px; object-fit: fill;   /* deliberately stretched */
  filter: saturate(0.55) contrast(0.9);
}
.waste-badge {
  position: absolute; left: 8px; bottom: 8px;
  background: #ffe14d; color: #b00000; font-family: Arial, sans-serif;
  font-weight: 700; font-size: 12px; padding: 4px 8px; line-height: 1.2;
  border: 2px solid #b00000;
}
.waste-badge em { font-style: normal; background: #b00000; color: #fff; padding: 1px 5px; margin-left: 6px; }
.waste-copy { font-size: 13px; color: #333; margin: 12px 0 0; line-height: 1.4; }
.waste-foot { font-family: Arial, sans-serif; font-size: 10px; color: #999; margin: 10px 0 0; }

/* Mobile: acts shorten, the template card drops below the line as a
   small inset (still legible), headline sizes via the global cap. */
@media (max-width: 640px) {
  .act { min-height: auto; padding: 14vh 0; align-items: center; }
  .act-body { padding: 0 var(--gutter); max-width: none; }
  .waste-site {
    position: relative; top: auto; right: auto;
    width: auto; margin: 26px var(--gutter) 0; transform: rotate(-1.2deg);
  }
  .act-waste { flex-direction: column; align-items: stretch; }
  .act-waste .act-body { order: 1; }
  .act-waste .waste-site { order: 2; }
  .act-h {
    font-size: clamp(30px, 8.4vw, 46px) !important;
    line-height: 1.08 !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.55);
  }
  .act-sub { font-size: clamp(16px, 4.4vw, 19px) !important; }
}

/* ============================================================
   PILLARS HEADER — composed asymmetric grid (matches the
   work-teaser quality bar). Kills the accidental right-side
   void: the space is now an intentional numbered précis that
   orients the prospect before the full cards. Cascade-last.
   ============================================================ */
.pillars-head {
  display: grid;
  grid-template-columns: 1fr 0.58fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: end;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.pillars-head-l { display: flex; flex-direction: column; align-items: flex-start; }
.pillars-head-l .sec-num { margin-bottom: 22px; }
.pillars-head-l .sec-h { margin: 0; }
/* override the desktop 80px-rail .pillars-lead rule inside the grid */
.pillars-head .pillars-lead {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.5 !important;
  color: var(--ink-dim) !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  max-width: 46ch !important;
  text-wrap: pretty;
}
.pillars-index {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.pillars-index li {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 900ms var(--ease-out), color 200ms var(--ease-out);
}
.pillars-index li:hover { padding-left: 8px; }
.pi-n {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.14em;
}
.pi-t {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(19px, 1.7vw, 27px);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
}

@media (max-width: 900px) {
  .pillars-head { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .pillars-index { margin-top: 4px; }
}
@media (max-width: 640px) {
  .pillars-head { padding-left: var(--gutter); padding-right: var(--gutter); }
  .pillars-index li { padding: 14px 0; }
  .pi-t { font-size: 18px; }
}

/* ============================================================
   THE GAP — compose the dead right half into the argument.
   Left: the gut-punch line. Right: a diptych that IS the gap —
   the same frame shot like a listing vs cheapened like the
   website it usually lives on. Negative space now carries meaning.
   ============================================================ */
.why-inner {
  display: grid;
  grid-template-columns: 1fr 0.66fr;
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.why-statement { max-width: none; }
.why-statement .why-line { max-width: 16ch; }
.why-statement .why-sub { max-width: 34ch !important; }
.why-proof {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.why-shot {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #0c0f0c;
}
.why-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-shot figcaption {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 80%, transparent);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  z-index: 2;
}
/* the listing — luminous, the site's commissioned grade */
.why-shot-pro { aspect-ratio: 16 / 10; }
.why-shot-pro img {
  filter: saturate(1.02) contrast(1.06) brightness(1.0);
}
.why-shot-pro::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8,10,8,0.55) 100%);
}
.why-shot-pro figcaption { color: color-mix(in oklab, var(--accent) 88%, var(--paper)); }
/* the website it lives on — flat, oversaturated, stretched, cheap chrome */
.why-shot-cheap { aspect-ratio: 16 / 7; border: 1px solid rgba(244,239,229,0.14); }
.why-shot-cheap img {
  object-fit: fill;                       /* deliberate distortion */
  filter: saturate(1.9) contrast(0.8) brightness(1.12);
}
.why-cheap-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: #c9c9c4; color: #6a6a64;
  font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 0;
  text-transform: none; padding: 5px 9px;
}
.why-cheap-bar i { width: 7px; height: 7px; border-radius: 50%; background: #9a9a93; display: inline-block; }
.why-cheap-bar i:first-child { margin-left: 0; }
.why-shot-cheap figcaption {
  color: color-mix(in oklab, #e88 70%, var(--paper));
}

@media (max-width: 900px) {
  .why-inner { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .why-statement { max-width: none; }
  .why-proof { max-width: 520px; }
}
@media (max-width: 640px) {
  .why-inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .why-shot-pro { aspect-ratio: 16 / 11; }
  .why-shot-cheap { aspect-ratio: 16 / 8; }
}

/* ============================================================
   THESIS — scroll-authored cinematic sequence. Default (mobile,
   reduced-motion, no-JS): wrappers are inert, the 3 acts stack
   as full-bleed panels (the verified fallback). Desktop + motion:
   a sticky stage cross-dissolves the acts as you scroll a tall
   track — one continuous cinematic journey, no fragile timeline.
   ============================================================ */
.thesis-track, .thesis-stage { display: block; }

/* THESIS PIN — REMOVED per editorial spec.
   The desktop scroll-jack (sticky stage + tall track + scroll-
   controlled cross-dissolve) is replaced by the natural mobile
   layout: three acts stack as full-viewport sections, scrolled
   past naturally. The narrative still reads (art → waste → light),
   the scroll feels native. */

/* ============================================================
   PAGE-HERO — compose the right-side void on work/about/faq.
   The page word, set as a quiet oversized ghost (the site's
   existing ghost-word motif), becomes the intentional
   counterweight. Desktop only — on a phone the headline
   already fills the viewport, so no dead space to fill.
   ============================================================ */
@media (min-width: 901px) {
  .page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) auto;
    align-items: center;
    column-gap: clamp(32px, 5vw, 96px);
    overflow: hidden;
  }
  .page-hero-inner { min-width: 0; }
  .page-ghost {
    justify-self: end;
    align-self: center;
    font-family: var(--f-display);
    font-weight: var(--display-weight, 400);
    font-style: italic;
    font-size: clamp(110px, 14vw, 260px);
    line-height: 0.78;
    letter-spacing: -0.05em;
    color: color-mix(in oklab, var(--accent) 7%, transparent);
    -webkit-text-stroke: 1px color-mix(in oklab, var(--ink) 42%, transparent);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    transform: translateZ(0);
  }
}
@media (max-width: 900px) {
  .page-ghost { display: none; }
}

/* THESIS RAIL + bg parallax — REMOVED with the pin (no longer needed). */
.thesis-rail { display: none !important; }

/* ============================================================
   ACT I — background video (Veo prewar building, watermark
   cropped). Inherits .act-bg so it participates in the thesis
   pin transform. Fallback still shows if no <video> support
   or under reduced-motion. Cascade-last.
   ============================================================ */
.act .act-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.act:has(.act-video) .act-bg-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .act .act-video { display: none; }
  .act:has(.act-video) .act-bg-fallback { display: block; }
}

/* ============================================================
   CURSOR LIGHT-BLOOM — a soft warm glow tracking the cursor
   over the dark imagery. Compositor-only: fixed element,
   transform via custom props, bounded blend region (NOT a
   full-screen blend layer — that caused the prior grain
   regression). Fine-pointer + motion only. Cascade-last.
   ============================================================ */
/* Cursor bloom REMOVED — custom cursor takeover violates editorial spec. */

/* ============================================================
   TEASER ROW — composed, not flat. A faint outlined index
   numeral is the asymmetric counterweight (ghost-word motif,
   cohesive with the subpage heroes + pillars index). FAQ card
   gets a scannable topic précis instead of a generic lead;
   About card gets a real signature line. Every element earns
   its place; the lower-right is intentional, not dead. Cascade-last.
   ============================================================ */
.teaser-card {
  min-height: clamp(300px, 34vw, 420px);
  justify-content: flex-start;
  isolation: isolate;
}
.teaser-card > * { position: relative; z-index: 1; }
.teaser-card .teaser-cta { margin-top: auto; padding-top: 22px; }

.teaser-index {
  position: absolute;
  right: clamp(18px, 2.2vw, 36px);
  bottom: clamp(-12px, -0.6vw, -4px);
  z-index: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-style: italic;
  font-size: clamp(120px, 15vw, 240px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--accent) 6%, transparent);
  -webkit-text-stroke: 1px color-mix(in oklab, var(--ink) 26%, transparent);
  user-select: none;
  pointer-events: none;
  transition: -webkit-text-stroke-color 900ms var(--ease-out), color 900ms var(--ease-out);
}
.teaser-card:hover .teaser-index {
  -webkit-text-stroke-color: color-mix(in oklab, var(--accent) 55%, transparent);
  color: color-mix(in oklab, var(--accent) 12%, transparent);
}

.teaser-meta {
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: 14px;
}

.teaser-topics {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  max-width: 30ch;
  border-top: 1px solid var(--rule);
}
.teaser-topics li {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.25vw, 20px);
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  transition: color 200ms var(--ease-out), padding-left 200ms var(--ease-out);
}
.teaser-card:hover .teaser-topics li { color: var(--ink); }
.teaser-topics li::before {
  content: "— ";
  color: var(--accent);
}

@media (max-width: 900px) {
  .teaser-card { min-height: 0; }
  .teaser-index { font-size: clamp(96px, 26vw, 150px); bottom: -6px; }
}

/* ============================================================
   FOUNDER PORTRAIT — composed pending state. Was a flat beige
   box reading as accidental/incomplete. Now a deliberate
   editorial plate: a faint ghost "lumen." monogram (the footer
   wordmark motif → system cohesion) + a gallery-plate caption.
   Intentional now; the real photo still slots in later (the
   [data-has-image] fade is preserved untouched). Cascade-last.
   ============================================================ */
.founder-portrait-frame {
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.founder-portrait-overlay {
  background:
    radial-gradient(120% 90% at 50% 38%,
      color-mix(in oklab, var(--paper) 60%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--paper-2) 86%, var(--ink) 6%) 0%,
      color-mix(in oklab, var(--paper-2) 80%, var(--ink) 14%) 100%);
}
.fpo-center {
  gap: 16px;
  padding: 0 22px;
}
.fpo-monogram {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-style: italic;
  font-size: clamp(58px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--accent) 7%, transparent);
  -webkit-text-stroke: 1px color-mix(in oklab, var(--ink) 30%, transparent);
  user-select: none;
}
.fpo-rule {
  display: block;
  width: 34px;
  height: 1px;
  background: color-mix(in oklab, var(--accent) 60%, transparent);
}
.fpo-label {
  font-family: var(--f-mono) !important;
  font-style: normal !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--ink-faint) !important;
  max-width: 24ch;
  line-height: 1.5 !important;
}
@media (max-width: 640px) {
  .fpo-monogram { font-size: clamp(44px, 13vw, 68px); }
}

/* ============================================================
   PRE-LAUNCH — touch-target compliance (mobile tap ≥44px).
   Cohort dismiss was 20×16; footer links 32×22. Enlarge the
   HIT AREA without changing the visual marks. Cascade-last.
   ============================================================ */
.cohort-close {
  min-width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}
@media (max-width: 640px) {
  .footer-col a { padding-top: 11px; padding-bottom: 11px; }
  .footer-col { gap: 2px; }
  .nav-links a { padding-top: 11px; padding-bottom: 11px; }
}

/* ============================================================
   HERO DAY-CYCLE — deterministic, on the high-res still.
   Replaces the Veo dusk video. One 64s seamless loop:
   pre-dawn → dawn → morning → midday → golden → dusk → night
   → midnight → pre-dawn. Normal-blend rgba layers only (no
   full-screen mix-blend — avoids the prior grain perf
   regression); compositor-cheap (bg-color + opacity + a single
   transform). Scrim (z2) stays above so headline text is
   readable in every phase. Cascade-last.
   ============================================================ */
.hero-photo-led .hero-bg .ph-img { z-index: 0; }
.hero-photo-led .hero-bg-gradient { z-index: 2; }
.hero-daycycle {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: rgba(214,150,74,0.12);
  animation: hero-day 64s linear infinite;
  will-change: background-color;
}
@keyframes hero-day {
  0%   { background-color: rgba(14,18,38,0.80); }   /* pre-dawn  */
  14%  { background-color: rgba(58,52,74,0.52); }   /* dawn      */
  30%  { background-color: rgba(176,196,214,0.30); }/* morning, cool lift */
  44%  { background-color: rgba(198,214,226,0.34); }/* midday, brightest cool */
  56%  { background-color: rgba(214,150,74,0.16); } /* golden    */
  66%  { background-color: rgba(150,68,58,0.34); }  /* dusk      */
  78%  { background-color: rgba(18,26,52,0.74); }   /* night     */
  90%  { background-color: rgba(8,12,28,0.86); }    /* midnight  */
  100% { background-color: rgba(14,18,38,0.80); }   /* = pre-dawn */
}
.hero-daycycle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(42% 52% at 30% 70%,
    rgba(255,196,120,0.55) 0%, rgba(255,170,90,0.16) 36%, transparent 62%);
  opacity: 0;
  animation: hero-sun 64s linear infinite;
  will-change: opacity, transform;
}
@keyframes hero-sun {
  0%   { opacity: 0;   transform: translate3d(-6%,14%,0) scale(.9); }
  14%  { opacity: .50; transform: translate3d(-4%,8%,0)  scale(1); }
  30%  { opacity: .55; transform: translate3d(0,-4%,0)   scale(1.05); }
  44%  { opacity: .38; transform: translate3d(3%,-10%,0) scale(1.10); }
  56%  { opacity: .82; transform: translate3d(2%,6%,0)   scale(1.05); }
  66%  { opacity: .48; transform: translate3d(7%,12%,0)  scale(.95); }
  76%  { opacity: 0;   transform: translate3d(9%,16%,0)  scale(.9); }
  100% { opacity: 0;   transform: translate3d(-6%,14%,0) scale(.9); }
}
.hero-daycycle::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(214,150,74,0.18) 0%, rgba(214,150,74,0.05) 22%, transparent 42%),
    linear-gradient(180deg, rgba(10,14,30,0.32) 0%, transparent 40%);
  opacity: 0;
  animation: hero-night 64s linear infinite;
  will-change: opacity;
}
@keyframes hero-night {
  0%{opacity:.85} 14%{opacity:.40} 30%{opacity:0} 44%{opacity:0}
  56%{opacity:0} 66%{opacity:.15} 78%{opacity:.90} 90%{opacity:1} 100%{opacity:.85}
}
@media (prefers-reduced-motion: reduce) {
  .hero-daycycle { animation: none; background-color: rgba(214,150,74,0.12); }
  .hero-daycycle::before { animation: none; opacity: .7; transform: translate3d(2%,6%,0) scale(1.05); }
  .hero-daycycle::after { animation: none; opacity: 0; }
  /* Defensive: the filmed loop never shows under reduced-motion
     (JS also skips loading it) — the frozen golden grade above stands. */
  .hero-bg-video { display: none; }
}

/* When the filmed loop is live it carries its own baked day-cycle grade,
   so the CSS grade hands off (fades out as the video fades in). The
   scrim (z2) still sits above both for headline legibility. */
.hero-bg:has(.hero-bg-video.ready) .hero-daycycle {
  opacity: 0;
  transition: opacity 1100ms var(--ease-out);
}

/* ============================================================
   MOBILE HERO — content-driven, zero dead space.
   History: a 16:9 crop showed empty sky → fixed with an
   art-directed portrait still (<picture> in markup). Then a
   100svh + flex-end block stranded a big contentless band ABOVE
   the eyebrow — looked framed at landing but became an ugly void
   the moment you scrolled. FIX: drop the forced full height. The
   hero is now exactly nav-clearance + the eyebrow→headline→sub→CTA
   signature + a bottom breath. No oversized empty band anywhere;
   it flows straight into the next section on scroll. Cascade-last.
   ============================================================ */
@media (max-width: 640px) {
  /* Kill the forced full-viewport height (base rule sets 100vh) —
     this is what created the scrollable void. */
  .hero.hero-photo-led,
  .hero-photo-led .hero-overlay { min-height: 0; }

  /* REAL-iOS BULLETPROOF FIX (verified failing on real iPhones
     across multiple devices despite emulation looking fine):
     Stop using the <picture> element on mobile — real iOS Safari
     has flaky behavior with query-string srcsets and was loading
     the landscape fallback instead of the portrait crop, leaving
     only buildings visible. CSS background-image with media
     queries is rock-solid on iOS (zero quirks). The portrait crop
     is loaded as a CSS background, positioned so the sun (upper
     ~28% of the image) is locked into the upper third of the
     frame no matter how any real device crops it. */
  .hero-photo-led .hero-bg {
    background-image: url('images/hero-photo-01-mobile-2x.webp?v=11');
    background-size: cover;
    /* The mobile image is re-cropped with the SUN at dead-centre.
       cover-crop always preserves an image's centre on every device
       and aspect ratio — so 50% 50% guarantees the sun is visible,
       no matter the phone or URL-bar state. This is the bulletproof
       version of the earlier 30% attempt. */
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #14110e;
  }
  .hero-photo-led .hero-bg picture,
  .hero-photo-led .hero-bg .ph-img {
    display: none !important;
  }

  /* Match the desktop video's lively pace. Mobile shows no video, so
     the CSS light-cycle IS the animation — at 64s it felt dead next
     to the 5.3s desktop loop. Sped ~7x. It cycles ~8 day-phases, so
     going faster than this turns a smooth light-shift into a strobe;
     9s is the tasteful match. */
  .hero-daycycle,
  .hero-daycycle::before,
  .hero-daycycle::after {
    animation-duration: 9s !important;
  }

  /* Pull the eyebrow rule up so it sits ~8px under the nav and
     reads as a connected masthead divider — NOT a line floating in
     a 42px void. Nav padding is left at its default so "lumen."
     stays clear of the cohort strip above it. */
  .hero-photo-led .hero-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    /* env(safe-area-inset-top) respects the iPhone notch — real
       devices push the fixed nav down by the notch height, which
       desktop emulation never simulates. Without this the meta
       gets shoved behind the nav on real iPhones. */
    padding-top: calc(116px + env(safe-area-inset-top));
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }
  /* Strip dismissed → nav rises to top:0, so the hero rides up
     with it and keeps the same tight nav→eyebrow relationship. */
  body.cohort-dismissed .hero-photo-led .hero-overlay {
    padding-top: calc(76px + env(safe-area-inset-top));
  }
  .hero-photo-led .hero-meta { margin: 0 0 22px; }
  .hero-photo-led .hero-h { align-self: auto; margin: 0 0 22px; }
  .hero-photo-led .hero-bottom {
    padding-top: 0;
    border-top: 0;
    margin: 0;
    gap: 16px;
  }
  /* The scroll cue is desktop polish — on a phone it's clutter
     stacked under the CTA. */
  .hero-photo-led .hero-scroll { display: none; }
}

/* ============================================================
   OFFER LADDER — the 5-spot founding ladder.
   Single-column rows: # · price · trade.  Cascade-last so it
   wins over the earlier .offer-terms two-column rule.
   ============================================================ */
.offer-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.55;
  color: rgba(15, 14, 12, 0.62);
  max-width: 60ch;
  margin: -20px 0 36px;
}
.offer-terms.offer-ladder {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  margin-bottom: 56px;
}
.offer-terms.offer-ladder li {
  grid-template-columns: 56px minmax(180px, 1.1fr) 2fr;
  align-items: baseline;
  gap: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid rgba(15, 14, 12, 0.18);
  font-size: clamp(15px, 1.1vw, 18px);
}
.offer-terms.offer-ladder li:last-child {
  border-bottom: 1px solid rgba(15, 14, 12, 0.18);
}
.offer-terms.offer-ladder .t-num {
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  opacity: 0.55;
  padding-top: 0;
}
.offer-terms.offer-ladder .t-price {
  font-size: clamp(17px, 1.3vw, 20px);
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  white-space: nowrap;
}
.offer-terms.offer-ladder .t-price i {
  font-style: normal;
  font-size: 0.78em;
  color: rgba(15, 14, 12, 0.5);
  letter-spacing: 0.08em;
  margin-left: 2px;
}
.offer-terms.offer-ladder .t-trade {
  color: rgba(15, 14, 12, 0.72);
  line-height: 1.45;
  text-wrap: pretty;
}
/* First row gets accent — it's the free one */
.offer-terms.offer-ladder li:first-child .t-price {
  color: var(--accent);
  font-weight: 500;
}

/* Mobile: tighten ladder so the trade column wraps cleanly under */
@media (max-width: 720px) {
  .offer-terms.offer-ladder li {
    grid-template-columns: 44px 1fr;
    gap: 6px 16px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .offer-terms.offer-ladder .t-price { grid-column: 2; }
  .offer-terms.offer-ladder .t-trade {
    grid-column: 2;
    font-size: 14px;
    color: rgba(15, 14, 12, 0.6);
  }
}

/* ============================================================
   LCP FIX — above-the-fold reveals must paint at first paint.
   Reveal-on-scroll is for elements that scroll INTO view;
   the hero is IN view at page load. Hiding it behind
   opacity:0 → IO → fade-in pushed LCP to 5.7s on mobile and
   produced NO_LCP on desktop (Lighthouse measurement window
   closes before JS fires). Higher specificity than .reveal-*.
   ============================================================ */
.hero .reveal-words,
.hero .reveal-up {
  clip-path: none !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto;
}

/* ============================================================
   LCP FIX (v2) — THE REAL ROOT CAUSE.
   Earlier in the file: body { opacity: 0; transform: translateY(8px) }
   then body.loaded sets opacity:1. That "page-load reveal" hides
   EVERY element until JS finishes and adds .loaded — so Lighthouse
   can't see any LCP candidate (desktop NO_LCP error, mobile LCP 5.7s).
   Override unconditionally; the entrance was decoration, not signal.
   ============================================================ */
body {
  opacity: 1 !important;
  transform: none !important;
  transition: background 900ms var(--ease-out), color 900ms var(--ease-out) !important;
}

/* ============================================================
   LEAD CAPTURE — "Get the brief instead." section sits between
   teaser-row and final CTA. Catches the 97% who aren't ready
   to book the 15-min call yet. Buttondown form action; user
   replaces LUMENSTUDIO_BUTTONDOWN with their handle.
   ============================================================ */
.capture {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.capture-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}
.capture-text { max-width: 44ch; }
.capture-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 18px 0 18px;
  text-wrap: balance;
}
.capture-lead {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  text-wrap: pretty;
}
.capture-lead em {
  font-style: italic;
  color: var(--accent-2, var(--ink-faint));
}
.capture-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.capture-form input[type="email"] {
  font: inherit;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 18px 0 14px;
  margin: 0;
  outline: none;
  transition: border-color 200ms var(--ease-out);
  width: 100%;
}
.capture-form input[type="email"]::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.capture-form input[type="email"]:focus {
  border-bottom-color: var(--accent);
}
.capture-form button.cta {
  align-self: flex-start;
  margin-top: 6px;
}
.capture-fine {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 4px 0 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (max-width: 900px) {
  .capture-inner { grid-template-columns: 1fr; gap: 32px; }
  .capture-text { max-width: none; }
}

/* ============================================================
   OFFER GUARANTEES — per Lumen playbook, two stacked promises
   that remove buyer risk. Sit inside .offer-frame between the
   price ladder and the apply CTA. Designed to feel like a
   document insert, not a marketing pitch.
   ============================================================ */
.offer-guarantees {
  margin: 32px 0 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(15, 14, 12, 0.18);
}
.og-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 14, 12, 0.62);
  margin-bottom: 28px;
}
.og-eyebrow .dot {
  background: var(--accent-ink);
  animation: none;
  box-shadow: none;
}
.og-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.og-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: start;
}
.og-num {
  color: rgba(15, 14, 12, 0.45);
  padding-top: 6px;
  letter-spacing: 0.06em;
}
.og-body { display: flex; flex-direction: column; gap: 8px; }
.og-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
  margin: 0;
}
.og-h em {
  font-style: italic;
  color: var(--accent-ink);
  opacity: 0.78;
}
.og-p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  color: rgba(15, 14, 12, 0.72);
  margin: 0;
  max-width: 38ch;
}
@media (max-width: 720px) {
  .og-list { grid-template-columns: 1fr; gap: 28px; }
  .offer-guarantees { margin: 24px 0 36px; padding-top: 24px; }
}

/* Four-way guarantee fine print — sits under the 2x2 grid */
.og-fine {
  margin: 32px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 14, 12, 0.18);
  color: rgba(15, 14, 12, 0.52);
  font-size: 10px !important;
  line-height: 1.55;
  letter-spacing: 0.06em !important;
  max-width: 80ch;
}

/* ============================================================
   LUXURY RESTRAINT PASS — per 2026 research (Vide Infra +
   Aristide / Locomotive / Bonsoir Paris). Quiet-luxury rule:
   gold must be <5% of any viewport surface or it tips kitsch.
   Replaces the full gold panel with a deep warm near-black
   tearsheet + gold ONLY as typographic accent (em-italics, dots,
   the "FREE" price, hairline dividers). Cascade-last.
   ============================================================ */
.offer-frame {
  background:
    radial-gradient(125% 95% at 75% 10%,
      oklch(0.20 0.025 65) 0%,
      oklch(0.16 0.020 60) 50%,
      oklch(0.12 0.018 55) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.40 0.04 75 / 0.18),
    0 50px 140px -56px oklch(0.10 0.02 60 / 0.65);
  border: 1px solid oklch(0.35 0.05 75 / 0.22);
}
.offer-frame::before {
  /* warm gold light leak in top right corner — subtle, not a wash */
  background: radial-gradient(ellipse, var(--accent) 0%, transparent 70%);
  opacity: 0.22;
  filter: blur(60px);
}

/* Type — cream on near-black */
.offer-h, .offer-h .line { color: var(--paper); }
.offer-h em { color: var(--accent); opacity: 1; font-style: italic; }
.offer-sub { color: rgba(244, 239, 229, 0.62); }
.offer-head { border-bottom-color: rgba(244, 239, 229, 0.18); }
.offer-head .eyebrow.on-dark { color: rgba(244, 239, 229, 0.72); }

/* Ladder — cream on dark with gold accent on #1 FREE */
.offer-terms.offer-ladder li {
  border-top-color: rgba(244, 239, 229, 0.16);
}
.offer-terms.offer-ladder li:last-child {
  border-bottom-color: rgba(244, 239, 229, 0.16);
}
.offer-terms.offer-ladder .t-num { color: rgba(244, 239, 229, 0.48); opacity: 1; }
.offer-terms.offer-ladder .t-price { color: var(--paper); }
.offer-terms.offer-ladder .t-price i { color: rgba(244, 239, 229, 0.48); }
.offer-terms.offer-ladder .t-trade { color: rgba(244, 239, 229, 0.66); }
/* Spot #1 — gold accent (the one gold moment in the ladder) */
.offer-terms.offer-ladder li:first-child .t-price { color: var(--accent); font-weight: 500; }

/* Guarantees inside offer — match the dark tearsheet */
.offer-guarantees {
  border-top-color: rgba(244, 239, 229, 0.18);
}
.og-eyebrow { color: rgba(244, 239, 229, 0.62); }
.og-eyebrow .dot { background: var(--accent); }
.og-num { color: rgba(244, 239, 229, 0.40); }
.og-h { color: var(--paper); }
.og-h em { color: inherit; opacity: 0.78; font-style: italic; }
.og-p { color: rgba(244, 239, 229, 0.66); }
.og-fine {
  border-top-color: rgba(244, 239, 229, 0.18);
  color: rgba(244, 239, 229, 0.46);
}

/* Offer aside (under the CTA) */
.offer-aside { color: rgba(244, 239, 229, 0.48); }

/* CTA on dark panel — cream button, gold hover sweep */
.offer-frame .cta-invert {
  background: var(--paper);
  color: var(--ink);
}
.offer-frame .cta-invert::before { background: var(--accent); }
.offer-frame .cta-invert:hover { color: var(--accent-ink); }

/* ============================================================
   SAMPLE MOCKUPS — MOBILE FIX. The fake team-site cards on /work
   had no mobile breakpoints — desktop padding + 2-col grids were
   overflowing/clipping on phones. Stacks everything to one column,
   reduces padding, scales chrome down. Cascade-last.
   ============================================================ */
@media (max-width: 640px) {
  /* Sample canvas — tighten padding so content has room */
  .sample-canvas { padding: 22px 18px 24px; gap: 18px; }
  .sample-canvas-md { padding: 18px 16px 22px; gap: 14px; min-height: 0; }
  .sample-canvas-dark { padding: 18px 16px 22px; min-height: 0; gap: 14px; }
  .sample-canvas-split { padding: 16px 14px 20px; min-height: 0; }

  /* Browser chrome — shrink so URL fits */
  .browser-chrome { padding: 8px 10px; gap: 8px; }
  .browser-chrome .dots i { width: 8px; height: 8px; }
  .browser-chrome .addr { font-size: 9px; padding: 2px 6px; }

  /* Sample nav — drop the link list on mobile (fictional anyway), keep wordmark */
  .sample-nav { padding-bottom: 8px; flex-wrap: wrap; gap: 8px; }
  .sample-nav nav { display: none; }
  .sample-nav-dark nav { display: none; }
  .sample-wm, .sample-wm-dark { font-size: 17px; }

  /* Sample hero — stack to one column, smaller type */
  .sample-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 0 8px;
  }
  .sample-hero h3 { font-size: clamp(22px, 7vw, 30px) !important; }
  .sample-hero p {
    font-size: 11px;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 10px;
    max-width: none;
  }
  .sample-hero-md h3 { font-size: clamp(20px, 6.5vw, 28px) !important; }
  .sample-hero-md p { font-size: 11px; padding-left: 0; border-left: 0; max-width: none; }

  /* Sample tiles — stack to one column */
  .sample-tiles { grid-template-columns: 1fr; gap: 14px; }
  .sample-tile .ph-img { aspect-ratio: 4 / 3; }

  /* Aubin split (Sample 03) — stack the type + photo */
  .aubin-split { grid-template-columns: 1fr; gap: 16px; }
  .aubin-photo { min-height: 200px; }
  .aubin-text .sample-hero-type h3 { font-size: clamp(20px, 6.5vw, 28px) !important; }
  .sample-listings li { gap: 8px; padding: 8px 0; }
  .sl-title { font-size: 14px; }

  /* Footer of each sample — tighter type, stacked */
  .sample-footer, .sample-footer-dark, .sample-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 10px;
    padding-top: 10px;
  }
  .sample-footer .mono, .sample-footer-dark .mono, .sample-meta-row .mono {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4;
  }

  /* The cap row above each sample (eyebrow + "sample · fictional team") */
  .sample-cap-row, .sample-cap-md {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 0;
  }

  /* The whole .sample and .more-samples sections — reduce L/R padding so frame fits */
  .sample { padding-left: 18px; padding-right: 18px; }
  .more-samples { padding-left: 18px; padding-right: 18px; }

  /* The frames themselves — slightly less aggressive border-radius */
  .sample-frame, .sample-frame-md { border-radius: 6px; }

  /* Aubin ghost word — shrink so it doesn't overflow */
  .sample-ghost-word { font-size: clamp(72px, 22vw, 120px); }

  /* Aubin photo scan overlay — keep but lighter */
  .aubin-photo-cap { font-size: 9px; left: 8px; bottom: 6px; }
}

/* ============================================================
   EDITORIAL REBUILD (Phase 11) — homepage restructured to
   Modern House / Inigo / Bonsoir Paris pattern: light cream,
   centered wordmark, image-led hero, 6 sections, massive
   whitespace. Cascade-last so it wins over earlier dark rules.
   ============================================================ */

/* SOFT GRAIN — much subtler on light backgrounds */
.grain.grain-soft { opacity: 0.025; mix-blend-mode: multiply; }

/* Page bg lock-in for light theme */
body[data-layout="editorial"] {
  background: var(--paper);
  color: var(--ink);
}

/* ============================================================
   EDITORIAL NAV — centered wordmark, split links L/R
   ============================================================ */
.nav.nav-editorial {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-content: stretch;
  padding: 24px clamp(28px, 5vw, 80px);
  top: 0;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  pointer-events: auto;
}
.nav.nav-editorial .wordmark-centered {
  justify-self: center;
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav.nav-editorial .nav-links {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.nav.nav-editorial .nav-links-left { justify-self: start; }
.nav.nav-editorial .nav-links-right { justify-self: end; }
.nav.nav-editorial .nav-links a {
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 4px 0;
  position: relative;
}
.nav.nav-editorial .nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.nav.nav-editorial .nav-links a:hover { color: var(--ink); }
.nav.nav-editorial .nav-links a:hover::after { transform: scaleX(1); }
.nav.nav-editorial .link-apply {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.nav.nav-editorial .link-apply::after { display: none; }
.nav.nav-editorial .link-apply:hover { background: var(--ink); color: var(--paper); }

/* Push main content below the fixed nav */
body[data-layout="editorial"] main#top { padding-top: 0; }

/* ============================================================
   HERO EDITORIAL — full-bleed photograph + minimal overlay
   ============================================================ */
.hero.hero-editorial {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 600px;
  max-height: 1080px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--paper-2);
}
.hero-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero-figure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.95) contrast(1.04);
}
.hero-editorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(28px, 6vw, 120px) clamp(48px, 8vh, 96px);
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.12) 65%,
    rgba(0,0,0,0.55) 100%);
  color: var(--paper);
}
.hero-editorial-overlay .hero-eyebrow {
  color: rgba(245, 240, 230, 0.78);
  margin-bottom: 18px;
  letter-spacing: 0.12em;
}
.hero-italic-h1 {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-style: normal;
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 28px;
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,0,0,0.32);
}
.hero-italic-h1 em {
  font-style: italic;
  color: var(--accent);
}
.cta-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper);
  width: fit-content;
  transition: gap 200ms var(--ease-out);
}
.cta-text:hover { gap: 16px; }

/* ============================================================
   MANIFESTO EDITORIAL — single pull quote, generous space
   ============================================================ */
.manifesto-editorial {
  padding: var(--section-pad) clamp(28px, 6vw, 120px);
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.pull-quote {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(36px, 5.6vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
.pull-quote em {
  font-style: italic;
  color: var(--accent-2, var(--accent));
}
.pull-quote-meta {
  margin: 28px 0 0;
  color: var(--ink-faint);
}

/* ============================================================
   FEATURED WORK — 3 sample sites as mixed-aspect editorial features
   ============================================================ */
.featured-work {
  padding: var(--section-pad) clamp(28px, 6vw, 120px);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.featured-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(64px, 9vh, 120px);
  max-width: 56ch;
}
.featured-lead {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.42;
  color: var(--ink-dim);
  margin: 0;
  text-wrap: pretty;
}
.work-feature {
  margin: 0 0 clamp(80px, 12vh, 160px);
}
.work-feature:last-of-type { margin-bottom: clamp(56px, 8vh, 96px); }
.work-feature-link {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.work-feature-lead .work-feature-link {
  grid-template-columns: 1fr;
}
.work-feature-right .work-feature-link {
  grid-template-columns: 1.6fr 1fr;
  direction: rtl;
}
.work-feature-right .work-feature-link > * { direction: ltr; }
.work-feature-left .work-feature-link {
  grid-template-columns: 1.6fr 1fr;
}
.work-feature-fig {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
}
.work-feature-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1100ms var(--ease-out);
}
.work-feature-link:hover .work-feature-img { transform: scale(1.018); }
.work-feature-cap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 36ch;
}
.work-feature-lead .work-feature-cap {
  margin-top: 24px;
  max-width: 64ch;
}
.work-feature-num {
  color: var(--ink-faint);
  letter-spacing: 0.12em;
}
.work-feature-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.work-feature-p {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0;
  text-wrap: pretty;
}
.work-feature-p em { font-style: italic; color: var(--ink); }
.featured-foot {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: right;
}

/* Generic link with arrow that grows on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 4px 0;
  width: fit-content;
  transition: gap 200ms var(--ease-out);
}
.link-arrow:hover { gap: 16px; }

/* ============================================================
   ABOUT PREVIEW — 2-col split with portrait
   ============================================================ */
.about-preview {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: clamp(48px, 7vw, 120px);
  padding: var(--section-pad) clamp(28px, 6vw, 120px);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  align-items: center;
}
.about-preview-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 52ch;
}
.about-preview-quote {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 12px 0 0;
}
.about-preview-quote em { font-style: italic; color: var(--accent-2, var(--accent)); }
.about-preview-meta {
  margin: 0;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.about-preview-portrait {
  width: 100%;
  aspect-ratio: 4/5;
  margin: 0;
  background:
    radial-gradient(120% 90% at 50% 38%,
      color-mix(in oklab, var(--paper) 60%, transparent) 0%,
      transparent 70%),
    var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.portrait-corner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   FIELD NOTES — Modern House / Inigo "Almanac" pattern
   ============================================================ */
.field-notes {
  padding: var(--section-pad) clamp(28px, 6vw, 120px);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.field-notes-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(56px, 7vh, 88px);
  max-width: 56ch;
}
.field-notes-lead {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}
.note-feature {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 64ch;
}
.note-feature-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--ink-faint);
}
.note-feature-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.note-feature-p {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  max-width: 56ch;
}

/* ============================================================
   COHORT FINAL — clean editorial offer block
   ============================================================ */
.cohort-final {
  padding: clamp(96px, 14vh, 180px) clamp(28px, 6vw, 120px) clamp(120px, 16vh, 200px);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.cohort-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: clamp(56px, 8vh, 96px);
}
.cohort-head .dot { background: var(--accent); }
.cohort-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.cohort-h em { font-style: italic; color: var(--accent-2, var(--accent)); }
.cohort-sub {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.cohort-ladder {
  list-style: none;
  margin: 0 0 clamp(48px, 7vh, 80px);
  padding: 0;
  border-top: 1px solid var(--rule);
}
.cohort-row {
  display: grid;
  grid-template-columns: 56px minmax(180px, 1fr) 2fr;
  align-items: baseline;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.cohort-num {
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.cohort-price {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cohort-price i {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-left: 6px;
}
.cohort-trade {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.cohort-row-free .cohort-price { color: var(--accent); }
.cohort-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.cohort-aside { color: var(--ink-faint); }
.cohort-guarantees-link {
  margin: clamp(40px, 6vh, 72px) 0 0;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
}
.cohort-guarantees-link a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

/* ============================================================
   FOOTER — editorial light variant
   ============================================================ */
.footer.footer-editorial {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding: clamp(80px, 12vh, 160px) clamp(28px, 6vw, 120px) 32px;
  margin-top: 0;
}
.footer-editorial .footer-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: clamp(48px, 7vh, 80px);
  border-bottom: 1px solid var(--rule);
}
.footer-editorial .footer-email {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ============================================================
   GLOBAL EDITORIAL — overrides on shared elements
   ============================================================ */
body[data-layout="editorial"] .back-to-top {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  color: var(--ink);
  border: 1px solid var(--rule);
}

/* Light-theme aperture: ensure dot dot-amber renders properly */
body[data-layout="editorial"] .dot.dot-amber {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
}

/* ============================================================
   MOBILE — collapse to clean single column
   ============================================================ */
@media (max-width: 900px) {
  .nav.nav-editorial {
    grid-template-columns: 1fr auto 1fr;
    padding: 16px 18px;
    gap: 0;
  }
  .nav.nav-editorial .nav-links-left { gap: 16px; }
  .nav.nav-editorial .nav-links-left a:nth-child(n+3) { display: none; }
  .nav.nav-editorial .wordmark-centered { font-size: 20px; }
  .nav.nav-editorial .link-apply { padding: 6px 12px; font-size: 10px; }

  .hero.hero-editorial { height: 78vh; min-height: 480px; }
  .hero-italic-h1 { font-size: clamp(28px, 7vw, 44px) !important; }

  .pull-quote { font-size: clamp(30px, 9vw, 52px); max-width: 14ch; }

  .work-feature-right .work-feature-link,
  .work-feature-left .work-feature-link {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 20px;
  }
  .work-feature-h { font-size: clamp(34px, 9vw, 52px) !important; }
  .work-feature-cap { max-width: none; }

  .about-preview {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-preview-portrait { max-width: 360px; margin: 0 auto; }

  .note-feature-h { font-size: clamp(24px, 7vw, 36px); }
  .note-feature-meta { gap: 12px; }

  .cohort-h { font-size: clamp(36px, 11vw, 64px) !important; }
  .cohort-row {
    grid-template-columns: 44px 1fr;
    gap: 6px 16px;
    padding: 18px 0;
  }
  .cohort-price { grid-column: 2; }
  .cohort-trade { grid-column: 2; font-size: 13px; }

  .footer-editorial .footer-email { font-size: clamp(28px, 8vw, 48px); }
}

/* ============================================================
   LOCKED ART-DIRECTION SYSTEM — Phase 12 cascade-last
   Per spec: 62ch reading max + spec-locked easing tokens already in :root.
   ============================================================ */
/* 62ch reading max — only for body-prose paragraphs (not display/eyebrow/utility) */
.hero-sub, .pillar p, .why-sub, .offer-sub, .work-teaser-lead, .pillars-lead,
.faq-body p, .founder-letter p, .manifesto-body p, .act-sub, .strip-label,
.note-feature-p, .page-lead, .about-preview-quote {
  max-width: 62ch;
}
/* Stagger helper for grids/lists — apply via class .stagger-children */
.stagger-children > * { transition-delay: 0ms; }
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 200ms; }
.stagger-children > *:nth-child(3) { transition-delay: 200ms; }
.stagger-children > *:nth-child(4) { transition-delay: 200ms; }
.stagger-children > *:nth-child(5) { transition-delay: 900ms; }
.stagger-children > *:nth-child(6) { transition-delay: 900ms; }

/* Underline-wipe links — 200ms micro */
a.link, a.u, .footer-col a, .nav-links a {
  transition: color 200ms var(--ease-micro);
}

/* prefers-reduced-motion guard for the new reveal system */
@media (prefers-reduced-motion: reduce) {
  .reveal-words, .reveal-up, .stagger-children > * {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   ATMOSPHERIC ELEVATION — sense-of-place pass.
   Late in the cascade so it overrides earlier rules. Additive,
   restrained, on-system: cream / ink / single gold, no new hues.
   ============================================================ */

/* 1. Tokens — one ink, easeOutQuint for cinematic settle, spacing scale */
:root {
  --ink-deep: #100d0b;
  --ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1);
  --space-held: clamp(120px, 16vh, 200px);
  --space-dense: clamp(72px, 9vh, 104px);
}

/* 2. WORLD-PERSISTENCE — retire evergreen on .why; same warm family,
      just a hair deeper than --ink so it reads as "shadow before light". */
section.why {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ink) 92%, #000) 0%,
    var(--ink) 100%) !important;
  color: color-mix(in oklab, var(--paper) 94%, transparent);
}
.why-grid {
  background: color-mix(in oklab, var(--paper) 14%, transparent) !important;
  border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
}
.why-grid li {
  background: var(--ink) !important;
}
.why .sec-num.mono {
  color: color-mix(in oklab, var(--accent) 88%, transparent) !important;
}
.why .sec-h {
  color: color-mix(in oklab, var(--paper) 96%, transparent);
}

/* 3. FELT LIGHT on cream sections — atmospheric substrate.
      Three layered radials: tiny gold wash + soft paper lift + warm edge vignette.
      Bleeds full-vw via the 100vw + translateX trick (body has overflow-x: clip). */
.lit-paper {
  position: relative;
  isolation: isolate;
}
.lit-paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(140% 90% at 50% -15%,
      color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 62%),
    radial-gradient(120% 120% at 50% 38%,
      rgba(255, 251, 243, 0.55) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 45%,
      transparent 55%, rgba(20, 17, 14, 0.05) 100%);
}
.lit-paper.lit-tr::before {
  background:
    radial-gradient(140% 90% at 80% -10%,
      color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 62%),
    radial-gradient(120% 120% at 70% 38%,
      rgba(255, 251, 243, 0.50) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 45%,
      transparent 55%, rgba(20, 17, 14, 0.05) 100%);
}
.lit-paper.lit-tl::before {
  background:
    radial-gradient(140% 90% at 20% -10%,
      color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 62%),
    radial-gradient(120% 120% at 30% 38%,
      rgba(255, 251, 243, 0.50) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 45%,
      transparent 55%, rgba(20, 17, 14, 0.05) 100%);
}

/* 4. NUMBERED KICKER motif — 40px gold hairline below the eyebrow.
      The doorway marker that signals "you've entered a new chapter." */
.eyebrow-numbered {
  position: relative;
  padding-bottom: 14px;
  display: inline-block;
  letter-spacing: 0.22em !important;
}
.eyebrow-numbered::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--accent);
}
/* thesis chapter eyebrows — same motif on dark */
.act-kicker.mono {
  position: relative;
  padding-bottom: 14px;
  display: inline-block;
  letter-spacing: 0.22em;
}
.act-kicker.mono::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--accent);
}

/* 5. LEGIBILITY for 55+: kickers on cream were rgba(20,17,14,0.34) — too low.
      Bumped to color-mix 62% ink for AA contrast at small sizes. */
section.work-teaser .eyebrow.mono,
section.pillars .sec-num.mono,
section.capture .eyebrow.mono,
section.teaser-row .eyebrow.mono {
  color: color-mix(in oklch, var(--ink) 62%, transparent) !important;
}
.eyebrow.mono.on-dark {
  color: color-mix(in oklab, var(--paper) 78%, transparent) !important;
}
section.thesis .act-kicker.mono {
  color: color-mix(in oklab, var(--paper) 72%, transparent) !important;
}

/* 6. PHOTOGRAPHY — one house grade. Warm sepia hairline + contrast lift.
      Tune sepia by eye — 0.05 is "Polaroid 600 indoor", not "old yellow." */
.img-graded {
  filter: saturate(0.92) contrast(1.04) brightness(0.98) sepia(0.05);
}
.img-graded-wrap {
  position: relative;
  isolation: isolate;
}
.img-graded-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%,
    transparent 60%, rgba(20, 17, 14, 0.18) 100%);
}

/* 7. THRESHOLD BAND — eases the eye across cream→dark and back.
      Inserted between sections; keeps section internals untouched. */
.threshold-band {
  display: block;
  height: clamp(80px, 12vh, 160px);
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.threshold-band.to-dark {
  background: linear-gradient(to bottom, var(--paper) 0%, var(--ink) 100%);
}
.threshold-band.to-cream {
  background: linear-gradient(to bottom, var(--ink) 0%, var(--paper) 100%);
}
.threshold-band.to-ink-deep {
  background: linear-gradient(to bottom, var(--ink) 0%, var(--ink-deep) 100%);
}

/* 8. ARRIVAL v2 — The Carlyle vestibule.
      Sequence (first-load only, sessionStorage-gated):
        0     ms : page paints. wordmark/nav/poster all at opacity 0.
        200   ms : wordmark fades up over 800ms.
        320   ms : nav links fade up over 800ms.
        440   ms : nav apply pill fades up over 800ms.
        1000  ms : poster fades in + scales 1.04 → 1.0 over 1600ms.
        2200  ms : scroll-cue fades in.
        2400  ms : cohort strip slides down from top.
      Total ~2.8s. Hold is the room you've entered.
      motion.js extends the cleanup timeout to 3000ms to match.
      transform + opacity + filter only — never layout. CLS ~0. */
@keyframes lumen-arrive-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lumen-arrive-poster {
  from { opacity: 0; transform: scale(1.04); filter: brightness(0.7) saturate(0.85); }
  to   { opacity: 1; transform: scale(1.0);  filter: none; }
}
@keyframes lumen-arrive-cue {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}
@keyframes lumen-arrive-strip {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.html-arriving .descent-video {
  animation: lumen-arrive-poster 1600ms 1000ms var(--ease-cinematic) both;
}
html.html-arriving .wordmark {
  animation: lumen-arrive-up 800ms 200ms var(--ease-reveal) both;
}
html.html-arriving .nav-links {
  animation: lumen-arrive-up 800ms 320ms var(--ease-reveal) both;
}
html.html-arriving header.nav > a.cta {
  animation: lumen-arrive-up 800ms 440ms var(--ease-reveal) both;
}
html.html-arriving .cohort-strip {
  animation: lumen-arrive-strip 700ms 2400ms var(--ease-reveal) both;
}
html.html-arriving .descent-cue {
  animation: lumen-arrive-cue 800ms 2200ms var(--ease-reveal) both;
}
@media (prefers-reduced-motion: reduce) {
  html.html-arriving .descent-video,
  html.html-arriving .wordmark,
  html.html-arriving .nav-links,
  html.html-arriving header.nav > a.cta,
  html.html-arriving .cohort-strip,
  html.html-arriving .descent-cue {
    animation: none !important;
  }
}

/* 9. READING COMFORT for 55+. Body copy at 17-18px / 1.6 line height. */
section.pillars .pillar p,
section.work-teaser .work-teaser-lead,
section.capture .capture-lead,
section.why .why-sub,
section.offer .offer-sub {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
}

/* 10. DISPLAY MEASURE — cap h2 so it never spans a page-wide row. */
section.work-teaser .sec-h,
section.pillars .sec-h,
section.why .why-line,
section.capture .capture-h {
  max-width: 22ch;
}

/* 11. SPACING ALTERNATION — at least one held breath in the cream zone. */
section.work-teaser {
  padding-top: var(--space-held);
  padding-bottom: var(--space-dense);
}
section.pillars {
  padding-top: var(--space-dense);
  padding-bottom: var(--space-dense);
}
section.capture {
  padding-top: var(--space-held);
  padding-bottom: var(--space-held);
}
section.teaser-row {
  padding-top: var(--space-dense);
  padding-bottom: var(--space-dense);
}

/* End — atmospheric elevation pass. */


/* ============================================================
   FELT-IDENTITY PASS (The Carlyle vestibule).
   Three repeatable tics that compound into one signature:
     1. Italicized leading glyph (Fraunces, gold) on display headlines.
     2. Whisper caption (italic mono small-caps, 50%, 0.18em) under photos.
     3. One easing curve (var(--ease-reveal)) on every reveal.
   Walked back: numbered chapter eyebrows (deleted in HTML).
   Goal: a broker who's visited twice should recognize a screenshot
         in 200ms by the italic glyph alone.
   ============================================================ */

/* 12. WHISPER CAPTION — the Modlin gesture on every photograph.
       Sits below the image, never above. Italic mono small-caps. */
.whisper-caption,
.plate-cap-below.mono,
section.why .why-shot figcaption {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 400;
  color: color-mix(in oklch, var(--ink) 50%, transparent) !important;
  margin-top: 22px;
  line-height: 1.5;
}
.plate-cap-below.mono {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
section.why .why-shot figcaption,
.whisper-caption.on-dark {
  color: color-mix(in oklab, var(--paper) 60%, transparent) !important;
}

/* 13. ITALICIZED LEADING GLYPH — the Patek Calatrava-cross of Lumen.
       Every chapter h2's first character set in Fraunces italic gold.
       The single most-encodable signature on the page. */
section.work-teaser .sec-h::first-letter,
section.pillars .sec-h::first-letter,
section.offer .offer-h::first-letter,
section.why .why-line::first-letter,
section.capture .capture-h::first-letter {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
/* descent fragment headlines already use <em> italic gold inside the line —
   ::first-letter would conflict. Leave them alone. */

/* 14. DENSITY CUT — increase breath, give every section a held pause.
       Specific section overrides; existing spacing tokens stay valid. */
section.work-teaser {
  padding-top: calc(var(--space-held) * 1.25);
  padding-bottom: var(--space-held);
}
section.pillars {
  padding-top: var(--space-held);
  padding-bottom: var(--space-held);
}
section.offer {
  padding-top: var(--space-held);
  padding-bottom: var(--space-held);
}
section.capture {
  padding-top: calc(var(--space-held) * 1.25);
  padding-bottom: calc(var(--space-held) * 1.25);
}
section.teaser-row {
  padding-top: var(--space-held);
  padding-bottom: var(--space-dense);
}
section.final {
  padding-top: var(--space-held);
  padding-bottom: var(--space-dense);
}
.footer.footer.footer { /* specificity bump over earlier .footer rule */
  padding-top: var(--space-held);
}

/* 15. COHORT STRIP — quieter after arrival. Just present. */
.cohort-strip { opacity: 0.94; }

/* 16. MONUMENT TYPE — offer/final closers get the press-release scale.
       Italic-glyph leading character does the rest. */
section.offer .offer-h {
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.025em;
  line-height: 0.98;
}

/* 17. The kicker hairline rule (from atmospheric pass) ONLY applies to
       thesis acts now. Cream-section eyebrows go quiet — letter-spacing,
       color, no hairline. The whisper caption carries the visual identity. */
section.work-teaser .eyebrow.mono,
section.pillars .sec-num.mono,
section.why .sec-num.mono,
section.capture .eyebrow.mono,
section.final .eyebrow.mono.on-dark,
section.offer .eyebrow.mono.on-dark {
  padding-bottom: 0 !important;
}
section.work-teaser .eyebrow.mono::after,
section.pillars .sec-num.mono::after,
section.why .sec-num.mono::after,
section.capture .eyebrow.mono::after,
section.final .eyebrow.mono.on-dark::after,
section.offer .eyebrow.mono.on-dark::after {
  display: none !important;
  content: none !important;
}
/* but thesis act-kicker keeps its 40px gold hairline — that's the chapter
   marker for the dark zone, which is the only place numbered chapters survive. */

/* End — felt-identity pass. */


/* ============================================================
   FRAUNCES KERNING FIX — opsz axis, kerning, sane tracking.

   Diagnosis: Fraunces VF is loaded correctly (woff2-variations,
   opsz 9–144, WONK 0 pinned on body). font-optical-sizing: auto
   on html cascades. The actual bug was per-heading letter-spacing
   at -0.025em to -0.05em — aggressive enough to crash glyph pairs
   at display sizes (the "T" in "These", "F" in "Five", "Y" in
   "Your", "G" in "Get").

   Fix per Undercase Type's recommended range:
   - large display (>60px): letter-spacing between -0.015em and -0.008em
   - mid display (30–60px): -0.008em to 0
   - explicit kerning + ligatures + opsz on every Fraunces display
   - WONK pinned to 0 at the heading level so the leaning glyphs
     don't re-emerge when opsz crosses 18.
   ============================================================ */

/* Belt — enable opsz, kerning, ligatures on every Fraunces display heading.
   font-variation-settings here re-pins WONK 0 + SOFT 0 (display cut),
   leaving opsz free for font-optical-sizing: auto to drive it. */
.descent-frag-h,
.hero-descent .descent-frag-h,
.sec-h,
section.work-teaser .sec-h,
section.pillars .sec-h,
section.why .sec-h,
.offer-h,
section.offer .offer-h,
.why-line,
section.why .why-line,
.capture-h,
section.capture .capture-h,
.ghost-word,
.ghost-word span,
.hero-h,
.page-h,
.teaser-h,
.teaser-card .teaser-h,
.manifesto .sec-h,
.wordmark {
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-ligatures: common-ligatures;
}

/* Suspenders — per-heading letter-spacing relaxed.
   Higher specificity than the base rules so this wins the cascade. */
.hero-descent .descent-frag-h {
  letter-spacing: -0.008em;
}
.sec-h,
section.work-teaser .sec-h,
section.pillars .sec-h,
section.why .sec-h,
.work-teaser-text .sec-h {
  letter-spacing: -0.012em;
}
.offer-h,
section.offer .offer-h {
  letter-spacing: -0.012em;
}
.why-line,
section.why .why-line {
  letter-spacing: -0.012em;
}
.capture-h,
section.capture .capture-h {
  letter-spacing: -0.008em;
}
.ghost-word {
  letter-spacing: -0.015em;
}
.teaser-card .teaser-h {
  letter-spacing: -0.008em;
}
.manifesto .sec-h {
  letter-spacing: -0.012em;
}

/* For the very largest cut (.ghost-word at 140–460px), some browsers don't
   apply font-optical-sizing reliably when font-variation-settings is also
   present. Wire opsz at the spec max (144) so the display cut is locked in. */
.ghost-word,
.ghost-word span {
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0, "WONK" 0;
}

/* End — Fraunces kerning fix. */


/* ============================================================
   COHESION PASS — one continuous lit place, top to bottom.

   Builds on: atmospheric pass (--ink-deep, --lit-paper, threshold
   bands), felt-identity pass (arrival v2, whisper captions, italic
   first-glyph), Fraunces kerning fix.

   This pass: stronger felt light on cream, page-wide vignette via
   multiply, numbered chapter eyebrows restored as the wayfinding
   motif, body comfort at ≥18px / line-height ≥1.5.
   ============================================================ */

/* 18. CREAM = LIT PAPER. Override the prior .lit-paper substrate
       with the spec's three-layer stack: top-center light source +
       edge falloff + paper base. Same lamp every cream section. */
.lit-paper {
  position: relative;
  isolation: isolate;
}
.lit-paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    /* top-center implied light */
    radial-gradient(100% 70% at 50% 0%,
      rgba(255, 250, 240, 0.55) 0%, transparent 60%),
    /* foot-of-section warm shadow */
    linear-gradient(180deg,
      transparent 70%, rgba(20, 17, 14, 0.06) 100%),
    /* paper base — single source of truth for cream */
    var(--paper);
}
/* Vary light origin so each room feels individually lit, not tiled */
.lit-paper.lit-tr::before {
  background:
    radial-gradient(95% 65% at 78% 0%,
      rgba(255, 250, 240, 0.50) 0%, transparent 60%),
    linear-gradient(180deg,
      transparent 70%, rgba(20, 17, 14, 0.06) 100%),
    var(--paper);
}
.lit-paper.lit-tl::before {
  background:
    radial-gradient(95% 65% at 22% 0%,
      rgba(255, 250, 240, 0.50) 0%, transparent 60%),
    linear-gradient(180deg,
      transparent 70%, rgba(20, 17, 14, 0.06) 100%),
    var(--paper);
}
/* The trailing ::after edge vignette layer from the atmospheric pass
   would now compete with the page-vignette multiply layer. Remove it
   so the page-vignette is the single edge envelope. */
.lit-paper::after { content: none !important; background: none !important; }

/* 19. NUMBERED CHAPTER EYEBROW — the wayfinding motif.
       Same component every section: mono kicker + 40px gold tick rule. */
.eyebrow-numbered {
  position: relative;
  padding-bottom: 14px;
  display: inline-block;
  letter-spacing: 0.22em !important;
  font-size: 11px;
  line-height: 1.4;
}
.eyebrow-numbered::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--accent);
}
/* Re-enable the kicker hairline I'd disabled in the felt-identity pass —
   the numbered eyebrows are back, so the hairline tick is back too. */
section.work-teaser .eyebrow.mono.eyebrow-numbered::after,
section.pillars .sec-num.mono.eyebrow-numbered::after,
section.why .sec-num.mono.eyebrow-numbered::after,
section.capture .eyebrow.mono.eyebrow-numbered::after,
section.final .eyebrow.mono.on-dark.eyebrow-numbered::after,
section.offer .eyebrow.mono.on-dark.eyebrow-numbered::after {
  display: block !important;
  content: '' !important;
}
section.work-teaser .eyebrow.mono.eyebrow-numbered,
section.pillars .sec-num.mono.eyebrow-numbered,
section.capture .eyebrow.mono.eyebrow-numbered {
  padding-bottom: 14px !important;
}
section.offer .eyebrow.mono.on-dark.eyebrow-numbered,
section.final .eyebrow.mono.on-dark.eyebrow-numbered,
section.why .sec-num.mono.eyebrow-numbered {
  padding-bottom: 14px !important;
}

/* 20. BODY COMFORT for 55+ — every body paragraph that carries weight
       sits at 18-19px / 1.55. AA contrast everywhere on cream/dark.
       Body color floor: --ink at 88% on cream (well above 4.5:1). */
section.work-teaser .work-teaser-lead,
section.pillars .pillar p,
section.capture .capture-lead,
section.why .why-sub,
section.offer .offer-sub,
section.teaser-row .teaser-lead {
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.55;
  color: color-mix(in oklch, var(--ink) 88%, transparent);
}
section.why .why-sub {
  /* on-dark variant */
  color: color-mix(in oklab, var(--paper) 86%, transparent);
}
section.offer .offer-sub {
  /* offer is amber background — keep accent-ink for contrast */
  color: color-mix(in oklab, var(--accent-ink) 92%, transparent);
}

/* 21. PREFERS-REDUCED-MOTION — collapse new layered animation to
       opacity-only / instant. Vignette + lit-paper stay (they're
       static gradients, motion-free). */
@media (prefers-reduced-motion: reduce) {
  .lit-paper::before { transition: none !important; }
  /* arrival animations already covered in their own media query */
}

/* 22. SECTION-TO-SECTION TONAL BRIDGES (recap):
       The threshold-band utility from the atmospheric pass already
       handles cream↔dark transitions. Reaffirm here so this block
       can travel with the cohesion pass:
       - .threshold-band.to-dark   = paper → ink gradient
       - .threshold-band.to-cream  = ink → paper gradient
       Two inserted in HTML: offer→why and why→teaser-row. */

/* End — cohesion pass. */


/* ============================================================
   IMAGERY PASS — kill duplicates, add work mockups, warm the hero.
   Builds on cohesion + felt-identity + atmospheric work.
   ============================================================ */

/* 23. WORK THUMB MOCKUP — actual site preview at the top of each tile.
       Validates the premium price by showing actual craft, not a stock photo. */
.work-thumb-mockup {
  margin: 0 0 18px;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in oklab, var(--paper) 90%, var(--ink) 10%);
  position: relative;
  isolation: isolate;
}
.work-thumb-mockup > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 900ms var(--ease-out);
}
.work-thumb:hover .work-thumb-mockup > img {
  transform: scale(1.015);
}
/* the .img-graded-wrap ::after vignette already applies via the inherited
   class — no double declaration needed. */

/* 24. HERO RE-GRADE — warm cream/gold tonal axis, away from coral/magenta.
       sepia 0.35 = strong warm wash that pulls coral sky toward amber.
       hue-rotate POSITIVE rotates toward yellow (the previous pass had
       this WRONG and was pushing coral toward pink). saturate 0.82 takes
       the edge off so the sky doesn't scream. brightness 0.95 reads
       evening-Carlyle, not daytime-tourist.

       HERO LOCK: changes only the rendered filter, NOT the poster src,
       NOT the preload attribute, NOT the scroll-scrub logic. */
.descent-video {
  filter: sepia(0.35) hue-rotate(18deg) saturate(0.82) brightness(1.02);
}
/* arrival keyframe end state matches the new base grade so the entry
   settles INTO the warm grade, not out of it. */
@keyframes lumen-arrive-poster {
  from { opacity: 0; transform: scale(1.04);
         filter: sepia(0.55) hue-rotate(22deg) saturate(0.65) brightness(0.7); }
  to   { opacity: 1; transform: scale(1.0);
         filter: sepia(0.35) hue-rotate(18deg) saturate(0.82) brightness(1.02); }
}

/* 25. ONE-HAND GRADING — every <img> on homepage carries .img-graded.
       Provide a fallback so any image without the class still gets the grade. */
section.work-teaser img:not([class*="img-graded"]),
section.pillars img:not([class*="img-graded"]),
section.why img:not([class*="img-graded"]),
.thesis img.act-bg-fallback {
  filter: saturate(0.92) contrast(1.04) brightness(0.98) sepia(0.05);
}

/* 26. WHY-SHOT-CHEAP — the skyline-on-cheap-website moment. Make sure the
       swap from pillar-01-photo to hero-photo-01-mobile-2x sizes correctly. */
.why-shot.why-shot-cheap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* End — imagery pass. */


/* ============================================================
   27. WORK TILES — HIERARCHY FIX (v38) + DEAD-SPACE RESOLVE (v39)
        v38 made the MOCKUP dominant (full tile width, 4:3, house-graded,
        cover from the top) and demoted the name to a small caption.
        v39 resolves the desktop dead space: the left-aligned 640px image
        left a large void to its right. Fix — on desktop each tile is a
        CENTERED two-column unit (mockup 640 | caption vertically centered
        beside it), so the negative space is balanced and deliberate.
        Mobile stays full-width stacked, caption below. The image is never
        shown above 640px (source-capped — blurs past it). CLS reserved by
        the mockup's aspect-ratio. Cream/ink/Geist only — no new tokens.
   ============================================================ */

/* Section: intro on top, work below — the work owns the stage. */
.work-teaser-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
  grid-template-columns: none;   /* drop the old 1.6fr 1fr text|thumbs split */
  align-items: stretch;          /* override the old grid's align-items:start so the
                                    thumbs column spans full width and tiles can center */
}

/* Tile column: a clean centered stack, no list-container chrome.
   Centering keeps the negative space balanced (not left-skewed). */
.work-teaser-thumbs {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 72px);
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* The tile: mockup stacked over caption. Kills the 56px / baseline grid
   that shrank the mockup. max-width 640px keeps every source sharp —
   marlow's 620w-native portrait is the ceiling (see build report). */
.work-thumb {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  padding: 0;
  background: none;
  position: relative;
  transition: transform 200ms var(--ease-out);
}
.work-thumb:hover {
  background: none;
  padding-left: 0;
  transform: translateY(-2px);
}
.work-thumb::before { content: none; display: none; }   /* drop the row arrow */

/* The mockup is the hero: full tile width, 4:3, cover from the top.
   (Builds on rule 23; restated so the stack wins the cascade.) */
.work-thumb-mockup {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
}
.work-thumb-mockup > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 900ms var(--ease-out);
}
.work-thumb:hover .work-thumb-mockup > img { transform: scale(1.02); }

/* Caption: secondary. Name in Geist (≤1.5rem), meta in Geist Mono. */
.work-thumb-cap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.work-thumb-name {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(18px, 1.3vw, 22px);   /* ≤1.5rem — demoted from display */
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.work-thumb-loc {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* Desktop (≥1024px): each tile becomes a two-column unit — the mockup
   (capped 640) stays flush-left, aligned with the section intro, and the
   team name + meta move into the column beside it, vertically centered.
   That fills the former right-side void with the caption while keeping the
   page's left-anchored rhythm (content left, whitespace right) — no lone
   image with a dead gap. Mockup never exceeds 640px (source-capped). */
@media (min-width: 1024px) {
  .work-teaser-thumbs { align-items: stretch; gap: var(--space-dense); }
  .work-thumb {
    max-width: none;
    display: grid;
    grid-template-columns: 640px minmax(160px, 260px);
    column-gap: clamp(40px, 4vw, 72px);
    justify-content: start;
    align-items: center;
  }
  .work-thumb-mockup { max-width: 640px; }
  .work-thumb-cap { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-thumb,
  .work-thumb-mockup > img { transition: none; }
  .work-thumb:hover,
  .work-thumb:hover .work-thumb-mockup > img { transform: none; }
}

/* End — work tiles hierarchy fix (v38). */