/* ============================================================================
   Oakline Partners — vertical landing pages (shared layout).
   Loaded AFTER theme.css by every "/<vertical>" page (commercial-contractors,
   agencies, saas). theme.css owns tokens + chrome (rail, header, nav, buttons,
   tlink, footer, reveal, kinetic states, activated by <body class="ledger-page">).
   This file owns the section layouts those pages share: hero (photo or eclipse
   canvas), problem, engine rows, image band, proof, process ledger, model /
   floor band, FAQ, beyond-pipeline, founder band, final CTA, responsive.
   Page-specific deltas stay inline in each page's own <style>, kept small.
   ============================================================================ */

/* ═══════════ HERO — Ledger eclipse hero ═══════════
   Sized so the FULL offer (headline → CTA → three-step through-line)
   fits one laptop viewport (~840px) without scrolling. */
.hero {
  padding-top: clamp(104px, 12vw, 136px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* amber-lit vertical "curtain" slats fading to near-black (ref: draped light) */
.hero-glow::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.06) 0 1.5px, transparent 1.5px 15px);
  -webkit-mask-image: radial-gradient(118% 82% at 27% 0%, #000 0%, rgba(0,0,0,0.5) 32%, transparent 64%);
  mask-image: radial-gradient(118% 82% at 27% 0%, #000 0%, rgba(0,0,0,0.5) 32%, transparent 64%);
  opacity: 0.85;
}
.hero-glow::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 56% at 26% -10%, rgba(232,114,44,0.40) 0%, rgba(232,114,44,0.12) 26%, rgba(232,114,44,0) 55%),
    radial-gradient(52% 52% at 15% 116%, rgba(232,114,44,0.13) 0%, rgba(232,114,44,0) 60%);
}
/* slow breath on the amber hero wash — atmosphere, not attention */
@media (prefers-reduced-motion: no-preference) {
  .hero-glow::after { animation: glow-breathe 9s ease-in-out infinite; }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}
.hero-inner { position: relative; z-index: 1; }
/* ── Hero photograph — real commercial jobsite, replaces the homepage
   eclipse canvas so this page reads as the contractors' own world.
   Static image on purpose: the animated canvas under the fixed header
   was the iOS compositing cost, and a photo carries more here. ── */
.hero-photo { position: absolute; inset: 0; display: block; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* biased left-of-centre so the lit structure sits clear of the copy
     column instead of competing with the body text for contrast */
  object-position: 44% 58%;
}
/* Two-stop scrim: heavy on the left so the headline always clears 4.5:1,
   releasing to nothing over the lit structure on the right. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.90) 34%, rgba(10,10,11,0.52) 62%, rgba(10,10,11,0.22) 100%),
    linear-gradient(180deg, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.10) 34%, rgba(10,10,11,0.55) 78%, var(--bg) 100%);
}
/* the amber wash rides over the photo, tying it to the accent */
.hero-glow.has-photo::before { display: none; }
.hero-glow.has-photo::after { opacity: 0.5; mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  .hero-glow.has-photo::after { animation: none; }
}
/* Narrow screens: the copy column spans the full width, so it crosses the
   lit structure instead of clearing it. Photo detail is mostly lost at this
   size anyway, so the scrim goes much heavier and the image works as
   texture. Measured: --text-3 body copy over the amber structure failed
   4.5:1 at the old 0.62 mid-stop. */
@media (max-width: 760px) {
  .hero-photo img { object-position: 62% 60%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(10,10,11,0.80) 0%, rgba(10,10,11,0.87) 38%, rgba(10,10,11,0.93) 72%, var(--bg) 100%);
  }
}
/* ═══════════ HERO — eclipse canvas variant (hero-wave.js) ═══════════
   Used by vertical pages without a photograph. The canvas paints the amber rim
   arc + stars; the fallback wash stays behind it. No-JS keeps the wash. */
.hero-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* lighter left scrim than the photo variant: the canvas is mostly black */
.hero-glow.has-wave .hero-scrim {
  background: linear-gradient(90deg, rgba(10,10,11,0.66) 0%, rgba(10,10,11,0.28) 34%, rgba(10,10,11,0) 60%);
}
.js .hero-glow.has-wave::before { display: none; }        /* curtain slats off */
.js .hero-glow.has-wave::after { opacity: 0.42; }          /* wash supports, arc leads */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-glow.has-wave::after { animation: none; }
}
@media (max-width: 760px) {
  /* At narrow widths the copy column spans the full screen, so the drifting rim
     arc passes behind the CTA and the note instead of clearing them. The canvas
     paints its own pixels, which no CSS contrast check can see, so the scrim
     goes heavier here and the arc reads as texture rather than as competition. */
  .hero-glow.has-wave .hero-scrim {
    background:
      linear-gradient(90deg, rgba(10,10,11,0.86) 0%, rgba(10,10,11,0.74) 55%, rgba(10,10,11,0.42) 100%),
      linear-gradient(180deg, rgba(10,10,11,0.42) 0%, rgba(10,10,11,0.30) 40%, rgba(10,10,11,0.62) 80%, var(--bg) 100%);
  }
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 30px);
}
.hero-meta .hm-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sharp);
  padding: 7px 13px;
}
.hero-meta .hm-id { color: var(--text-3); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; }
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -0.034em;
  line-height: 1.05;
  color: var(--text);
  max-width: 18ch;
  /* Balance the lines. Without it a long turn phrase orphans its last word onto
     a line of its own, and because .turn draws its underline per line via
     box-decoration-break, that orphan renders as a stub of amber rule that
     reads like a bug rather than emphasis. */
  text-wrap: balance;
}
/* Own line for the first sentence so the amber phrase always starts a new
   line. Without this the underline orphans a single word ("You") at the end
   of line 1, which reads as a rendering bug rather than emphasis. */
.hero h1 .h1-lead { display: block; }
.hero h1 .turn {
  color: var(--accent-text);
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.08em;
}
.hero-sub {
  margin-top: clamp(18px, 2.6vw, 26px);
  font-size: clamp(1.06rem, 1.85vw, 1.24rem);
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.58;
  text-wrap: pretty;
}
.hero-cta {
  margin-top: clamp(22px, 3vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
.hero-note {
  margin-top: clamp(16px, 2.2vw, 22px);
  font-size: 0.94rem;
  color: var(--text-3);
  max-width: 56ch;
  line-height: 1.56;
}
/* through-line: the engine promise as a three-cell spec readout */
.hero-throughline {
  margin-top: clamp(24px, 3.2vw, 38px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sharp);
  overflow: hidden;
  max-width: 760px;
}
.hero-throughline .htl-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-line) 0%, var(--accent) 50%, var(--accent-line) 100%);
  transform-origin: left center;
  z-index: 2;
  pointer-events: none;
}
.htl-cell {
  padding: 18px 22px;
  position: relative;
}
.htl-cell + .htl-cell { border-left: 1px solid var(--line-2); }
.htl-cell .htl-k { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.htl-cell .htl-v { font-size: 0.98rem; font-weight: 500; color: var(--text); letter-spacing: -0.01em; }

/* ═══════════ PROBLEM — editorial two-column (Slot 1) ═══════════ */
.problem { border-top: 1px solid var(--line); }
.problem-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.problem h2 {
  font-size: clamp(1.95rem, 4.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
  max-width: 14ch;
}
.problem h2 .hl { color: var(--accent-text); }
.problem-body p {
  font-size: clamp(1.06rem, 1.8vw, 1.22rem);
  color: var(--text-2);
  line-height: 1.64;
  max-width: 54ch;
}
.problem-body p + p { margin-top: 20px; }
.problem-body .em { color: var(--text); font-weight: 500; }

/* ═══════════ THE ENGINE — copy + hairline mechanism rows (Slot 2) ═══════════ */
.engine { border-top: 1px solid var(--line); }
.engine-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.engine-copy h2 {
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--text);
  max-width: 15ch;
}
.engine-copy h2 .hl { color: var(--accent-text); }
.engine-copy p {
  margin-top: 20px;
  font-size: clamp(1.0rem, 1.65vw, 1.12rem);
  color: var(--text-2);
  line-height: 1.64;
  max-width: 46ch;
}
.engine-copy p .em { color: var(--text); font-weight: 500; }
.engine-copy .tlink { margin-top: 26px; }
.eng-list {
  list-style: none;
  border-top: 1px solid var(--line-2);
}
.eng-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: baseline;
  padding: clamp(22px, 2.8vw, 30px) 4px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.25s var(--ease);
}
.eng-row:hover { background: var(--surface-soft); }
.eng-idx {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.eng-idx::before {
  content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none;
}
.eng-row h3 {
  font-size: clamp(1.08rem, 1.8vw, 1.24rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  margin-bottom: 8px;
}
.eng-row p { font-size: 0.98rem; color: var(--text-2); line-height: 1.58; max-width: 56ch; }

/* ═══════════ HOW IT WORKS — 4-step process ledger (Slot 3) ═══════════ */
.process { background: var(--bg-deep); border-top: 1px solid var(--line); }
.process-head h2 {
  font-size: clamp(1.95rem, 4.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 20ch;
  line-height: 1.08;
}
.process-head h2 .hl { color: var(--accent-text); }
.process-head p {
  margin-top: 18px;
  font-size: clamp(1.02rem, 1.7vw, 1.16rem);
  color: var(--text-2);
  max-width: 620px;
}
.ledger {
  margin-top: clamp(48px, 6vw, 72px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sharp);
  overflow: hidden;
}
.ledger-step {
  position: relative;
  padding: clamp(26px, 3vw, 36px) clamp(20px, 2.4vw, 28px) clamp(30px, 3.4vw, 40px);
  transition: background-color 0.25s var(--ease);
}
.ledger-step + .ledger-step { border-left: 1px solid var(--line-2); }
.ledger-step:hover { background: var(--surface-soft); }
.ledger-step .ls-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(28px, 3vw, 38px);
}
.ledger-step .ls-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.ledger-step .ls-node {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--bg-deep);
  display: grid; place-items: center;
  flex: none;
}
.ledger-step .ls-node span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px rgba(232,114,44,0.55);
}
.ledger-step h3 {
  font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 10px;
}
.ledger-step p { font-size: 0.94rem; color: var(--text-2); line-height: 1.56; }
.ledger-step .ls-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  padding: 6px 11px;
  background: var(--accent-soft);
}
/* the connecting amber rule across the node row */
.ledger::before {
  content: "";
  position: absolute;
  top: clamp(32px, 3.4vw, 43px);
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-line) 0%, var(--accent) 50%, var(--accent-line) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ═══════════ THE MODEL / FLOOR — inverted band (Slot 4) ═══════════ */
.model { background: var(--invert-bg); color: var(--invert-ink); border-top: 1px solid var(--line); }
.model .sec-head { border-bottom-color: rgba(10,10,11,0.14); }
.model .sec-head .sh-num { color: #B85316; }
.model .sec-head .sh-label, .model .sec-head .mono { color: var(--invert-soft); }
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.model-left h2 {
  font-size: clamp(1.95rem, 4.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--invert-ink);
  max-width: 14ch;
}
.model-left .ml-body {
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.7vw, 1.14rem);
  color: var(--invert-soft);
  line-height: 1.64;
  max-width: 46ch;
}
.descriptors {
  margin-top: clamp(28px, 3.6vw, 38px);
  border-top: 1px solid rgba(10,10,11,0.14);
}
.descriptor {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(10,10,11,0.1);
}
.descriptor .d-key {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--invert-ink);
}
.descriptor .d-val { font-size: 0.98rem; color: var(--invert-soft); line-height: 1.5; }

/* the floor card — a mini readout panel on the inverted band */
.floor-card {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sharp);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.floor-card .fc-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-deep);
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text);
}
.floor-card .fc-bar .fc-slash { color: var(--accent-text); }
.floor-card .fc-body { padding: clamp(22px, 2.8vw, 30px) clamp(18px, 2.4vw, 24px); }
.floor-card h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--text);
}
.floor-card h3 .hl { color: var(--accent-text); }
.floor-card .fc-body > p {
  margin-top: 14px;
  font-size: 0.99rem;
  color: var(--text-2);
  line-height: 1.6;
}
.fc-stats {
  margin-top: clamp(22px, 2.8vw, 28px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sharp);
  overflow: hidden;
}
.fc-stat { padding: 16px 18px; }
.fc-stat + .fc-stat { border-left: 1px solid var(--line-2); }
.fc-stat .fcs-k {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  line-height: 1;
}
.fc-stat .fcs-v {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.5;
}

/* ═══════════ BEYOND PIPELINE — editorial (Slot 5) ═══════════ */
.beyond { border-top: 1px solid var(--line); }
.beyond-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.beyond h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--text);
  max-width: 16ch;
}
.beyond h2 .hl { color: var(--accent-text); }
.beyond .by-body {
  font-size: clamp(1.04rem, 1.75vw, 1.18rem);
  color: var(--text-2);
  line-height: 1.66;
  max-width: 54ch;
}
.beyond .by-body .em { color: var(--text); font-weight: 500; }
.beyond .tlink { margin-top: 26px; }

/* ═══════════ FOUNDER BAND (Slot 6) ═══════════ */
.founder { background: var(--surface); border-top: 1px solid var(--line); }
.founder-grid {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
.founder-photo {
  position: relative;
  border-radius: var(--r-sharp);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-deep);
  aspect-ratio: 4 / 4.7;
  max-width: 340px;
  box-shadow: var(--shadow-float);
}
.founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  /* real photo, real skin tone, unedited */
}
.founder-tag {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,10,11,0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 11px;
}
.founder-tag .mono { color: var(--status); font-size: 0.6rem; }
.founder-copy h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--text);
}
.founder-copy h2 .turn { color: var(--accent-text); }
.founder-copy .f-body {
  margin-top: 22px;
  font-size: clamp(1.04rem, 1.7vw, 1.18rem);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 560px;
}
.founder-copy .f-signature {
  margin-top: clamp(24px, 3vw, 30px);
  display: flex; align-items: center; gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.founder-copy .f-signature .fs-name { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.founder-copy .f-signature .mono { color: var(--text-3); }
.founder-copy .tlink { margin-top: 24px; }

/* ═══════════ FINAL CTA (Slot 7) ═══════════ */
.final { background: var(--bg-deep); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.final::before {
  content: "";
  position: absolute;
  bottom: -10%; left: 50%;
  width: 880px; height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(56% 70% at 50% 100%, rgba(232,114,44,0.16) 0%, rgba(232,114,44,0.04) 42%, rgba(232,114,44,0) 72%);
  pointer-events: none;
}
.final .wrap { position: relative; z-index: 1; }
.final-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
.final h2 {
  font-size: clamp(2.15rem, 5.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--text);
  max-width: 16ch;
}
.final h2 .hl { color: var(--accent-text); }
.final p {
  margin-top: 20px;
  font-size: clamp(1.04rem, 1.7vw, 1.18rem);
  color: var(--text-2);
  max-width: 50ch;
}
.final-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.final-cta { display: flex; flex-wrap: wrap; gap: 13px; }
.final-note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 9px; }

/* ═══════════ FULL-BLEED IMAGE BAND — narrative divider ═══════════
   Atmosphere, not evidence. Deliberately carries no client attribution:
   nothing on this page implies a generated image is someone's project. */
.band {
  position: relative;
  isolation: isolate;
  min-height: clamp(300px, 42vw, 460px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-photo { position: absolute; inset: 0; z-index: -2; }
.band-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.20) 38%, rgba(10,10,11,0.88) 100%);
}
.band-inner { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(30px, 4vw, 44px); }
.band p {
  font-size: clamp(1.4rem, 3.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.22;
  color: var(--text);
  max-width: 26ch;
  text-wrap: balance;
}
.band p .hl { color: var(--accent-text); }

/* ═══════════ PROOF — quote + honest framing ═══════════ */
.proof { border-top: 1px solid var(--line); }
.proof-quote {
  max-width: 22ch;
  font-size: clamp(1.75rem, 4.4vw, 2.85rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.16;
  color: var(--text);
  text-wrap: balance;
}
.proof-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(36px, 6vw, 78px);
  align-items: start;
}
.proof-mark {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 0.7;
  color: var(--accent-text);
  display: block;
  margin-bottom: 10px;
}
.proof-attr {
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--text-3);
  line-height: 1.58;
  max-width: 46ch;
}
.proof-notes { display: grid; gap: clamp(24px, 3vw, 32px); }
.proof-note h3 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 11px;
}
.proof-note p { font-size: 1rem; color: var(--text-2); line-height: 1.62; max-width: 44ch; }
.proof-note p .em { color: var(--text); font-weight: 500; }

/* ═══════════ THE MODEL — scoping anchor rows ═══════════ */
/* Explicit placement: copy spans both rows on the left, floor card and the
   qualifying rows stack on the right. Auto-flow would drop .scoped into
   column 1 and reopen the same imbalance it exists to close. */
.model-grid > .model-left { grid-column: 1; grid-row: 1 / 3; }
.model-grid > .floor-card { grid-column: 2; grid-row: 1; }
.model-grid > .scoped     { grid-column: 2; grid-row: 2; }
.model-grid { row-gap: clamp(22px, 2.6vw, 30px); }
.scoped {
  display: grid;
  gap: 14px;
  align-content: start;
}
.scoped-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  font-size: 0.99rem;
  color: var(--invert-soft);
  line-height: 1.56;
}
.scoped-row .sr-tick { margin-top: 3px; color: #B85316; flex: none; }
.scoped-row .em { color: var(--invert-ink); font-weight: 500; }

/* ═══════════ FAQ — native details, works with JS off ═══════════ */
.faq { border-top: 1px solid var(--line); }
.faq-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}
.faq h2 {
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--text);
  max-width: 13ch;
}
.faq h2 .hl { color: var(--accent-text); }
.faq-lede { margin-top: 18px; font-size: 1.02rem; color: var(--text-2); line-height: 1.62; max-width: 34ch; }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(20px, 2.6vw, 26px) 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.04rem, 1.75vw, 1.17rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-text); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 2px; }
.faq-item .fq-q { flex: 1 1 auto; }
.faq-item .fq-sign {
  flex: none;
  width: 15px; height: 15px;
  position: relative;
  color: var(--accent-text);
}
.faq-item .fq-sign::before,
.faq-item .fq-sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 15px; height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.28s var(--ease);
}
.faq-item .fq-sign::after { transform: rotate(90deg); }
.faq-item[open] .fq-sign::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-item .fq-sign::before, .faq-item .fq-sign::after { transition: none; }
}
.faq-item .fq-a {
  padding: 0 4px clamp(22px, 2.8vw, 28px);
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.66;
  max-width: 62ch;
}
.faq-item .fq-a .em { color: var(--text); font-weight: 500; }
.faq-item .fq-a p + p { margin-top: 14px; }

/* ═══════════ RESPONSIVE (section-level) ═══════════ */
@media (max-width: 1080px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger-step:nth-child(3) { border-left: none; }
  .ledger-step:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  /* rule only makes sense on one row — hide it on the 2x2 grid */
  .ledger::before { display: none; }
  html.kinetic .ledger-page .ledger::before { display: none; }
}
@media (max-width: 920px) {
  .problem-grid, .engine-grid, .model-grid, .beyond-grid { grid-template-columns: 1fr; gap: 36px; }
  .proof-grid, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  /* single column: unwind the explicit model placement or the rows collide */
  .model-grid > .model-left,
  .model-grid > .floor-card,
  .model-grid > .scoped { grid-column: 1; grid-row: auto; }
  .proof-quote { max-width: 100%; }
  .faq h2, .faq-lede { max-width: 100%; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .founder-photo { max-width: 300px; }
  .final-grid { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .hero-throughline { max-width: 100%; }
}
@media (max-width: 760px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger-step { border-top: none !important; }
  .ledger-step + .ledger-step { border-left: none; border-top: 1px solid var(--line-2) !important; }
  .ledger::before {
    display: block;
    top: 0; bottom: 0; left: clamp(27px, 2.6vw, 35px); right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-line) 100%);
  }
  html.kinetic .ledger-page .ledger::before { display: block; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-throughline { grid-template-columns: 1fr; }
  .htl-cell + .htl-cell { border-left: none; border-top: 1px solid var(--line-2); }
  .final-grid { grid-template-columns: 1fr; }
  .descriptor { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 440px) {
  .hero h1 { font-size: clamp(2.05rem, 9.6vw, 2.55rem); }
  .btn { padding: 14px 20px; }
  .hero-cta .btn, .final-cta .btn { flex: 1 1 auto; justify-content: center; }
  .eng-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ═══════════ ENGINE SPEC — three-cell readout under the engine rows ═══════════
   Used by /agencies ("What we need from you") and /saas ("What an account has
   to clear"). Same panel language as the hero through-line and the floor card. */
.eng-spec {
  margin-top: clamp(40px, 5vw, 60px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sharp);
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-soft) 0%, transparent 100%);
}
.eng-spec .es-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-deep);
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text);
}
.eng-spec .es-bar .es-slash { color: var(--accent-text); }
.eng-spec .es-bar .es-note { margin-left: auto; font-weight: 500; letter-spacing: 0.08em; color: var(--text-3); text-align: right; }
.eng-spec .es-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.eng-spec .es-cell { padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2.4vw, 24px); }
.eng-spec .es-cell + .es-cell { border-left: 1px solid var(--line); }
.eng-spec .es-k { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.eng-spec .es-cell h3 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--text);
  margin-bottom: 8px;
}
.eng-spec .es-cell p { font-size: 0.95rem; color: var(--text-2); line-height: 1.56; }
@media (max-width: 760px) {
  .eng-spec .es-grid { grid-template-columns: 1fr; }
  .eng-spec .es-cell + .es-cell { border-left: none; border-top: 1px solid var(--line); }
  .eng-spec .es-bar { flex-wrap: wrap; row-gap: 6px; }
  .eng-spec .es-bar .es-note { margin-left: 0; width: 100%; text-align: left; }
}

/* ═══════════ TYPOGRAPHIC BAND — the no-photograph variant of .band ═══════════
   /commercial-contractors breaks its scroll with a full-bleed jobsite
   photograph. The other verticals have no honest photography to use (generated
   imagery here would imply a client project, which the repo bans), so they get
   a typographic band instead: one statement, full bleed, its own visual world.
   Same job as the photo band, different material. */
.band-type {
  position: relative;
  isolation: isolate;
  min-height: clamp(240px, 30vw, 340px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* the lattice from the hero, re-used at a larger gauge so the band reads as
   the same world without repeating the hero wholesale */
.band-type::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px);
  background-size: clamp(88px, 11vw, 140px) clamp(88px, 11vw, 140px);
  -webkit-mask-image: radial-gradient(120% 130% at 78% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 130% at 78% 50%, #000 0%, transparent 72%);
  opacity: 0.9;
  pointer-events: none;
}
.band-type .band-glow {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(58% 90% at 84% 50%, rgba(232,114,44,0.16) 0%, rgba(232,114,44,0.05) 38%, rgba(232,114,44,0) 70%);
  pointer-events: none;
}
.band-type .band-inner {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(44px, 6vw, 72px);
}
.band-type p {
  font-size: clamp(1.45rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: var(--text);
  max-width: 24ch;
  text-wrap: balance;
}
.band-type p .hl { color: var(--accent-text); }
/* a single hairline tick under the statement, the ledger's own punctuation */
.band-type .band-rule {
  display: block;
  width: 64px; height: 2px;
  margin-top: clamp(20px, 2.6vw, 28px);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-line) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .band-type .band-glow { opacity: 0.8; }
}
