/* =====================================================================
   ENTHUSIAST POWER CORPORATION — enthusiastpower.com
   main.css · v3.3 · May 2026
   ---------------------------------------------------------------------
   Inherited from umbrella site: Fraunces / Geist / JetBrains Mono ·
   ink / cream / gold · editorial-industrial system.
   Departure: deck-style scroll-snap rhythm · density · numbers.
   ===================================================================== */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --ink:        #0c1018;
  --ink-2:      #1a1f2a;
  --ink-soft:   rgba(12, 16, 24, 0.78);
  --cream:       #f4ebd9;
  --cream-2:     #ece2cd;
  --cream-dim:   #e0d4ba;
  --gold:      #c9a227;
  --gold-soft: rgba(201, 162, 39, 0.55);
  --gold-line: rgba(201, 162, 39, 0.20);
  --gold-faint:rgba(201, 162, 39, 0.10);
  --brand-blue:      #1e4f6e;
  --brand-blue-soft: rgba(30, 79, 110, 0.70);
  --brand-blue-line: rgba(30, 79, 110, 0.32);
  --cream-on-ink: #f4ebd9;
  --ink-mute:    rgba(244, 235, 217, 0.62);
  --ink-faint:   rgba(244, 235, 217, 0.30);

  --serif:       'Fraunces', 'Times New Roman', serif;
  --sans:        'Geist', system-ui, -apple-system, sans-serif;
  --mono:        'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  --hairline:    1px solid var(--gold-line);
  --rule-ink:   1px solid rgba(12, 16, 24, 0.18);

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x:       max(28px, 4vw);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- DECK LAYOUT — continuous scroll ----------
   Was scroll-snap-type:y mandatory with scroll-snap-stop:always. Eight of the
   eleven sections run taller than one screen (#solution is 4.1x), and mandatory
   snapping jumps from one section start to the next — so everything past the
   first screenful of a tall section got scrolled straight past. Snap removed;
   the document scrolls normally and every section is readable end to end. */
.deck {
  scroll-snap-type: none;
  height: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-soft) transparent;
}
.deck::-webkit-scrollbar { width: 6px; }
.deck::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.deck::-webkit-scrollbar-track { background: transparent; }

.slide {
  scroll-snap-align: none;
  min-height: auto;
  position: relative;
  padding: 80px var(--pad-x) 56px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: free-scroll, no snap (snap is hostile to phone reading per brief Q10) */
@media (max-width: 768px) {
  .deck { scroll-snap-type: none; height: auto; overflow: visible; }
  .slide { min-height: auto; padding: 64px var(--pad-x) 48px; scroll-snap-align: none; }
}

/* ---------- ALTERNATING PALETTE — slides cream / ink ---------- */
.slide.dark  { background: var(--ink);  color: var(--cream); }
.slide.light { background: var(--cream); color: var(--ink);  }

/* ---------- PERSISTENT NAV BAR ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  mix-blend-mode: difference;
  pointer-events: none;
}
.topbar a, .topbar button { pointer-events: auto; }
/* The bar is mix-blend-mode:difference with no backdrop, so headings scrolling
   under it overprint the wordmark. A scrim behind the bar (its own stacking
   context, outside the blend) separates them without losing the invert look. */
.topbar-scrim {
  position: fixed; top: 0; left: 0; right: 0; height: 92px; z-index: 99;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,11,16,.72) 0%, rgba(8,11,16,.42) 55%, rgba(8,11,16,0) 100%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.topbar .brand { font-family: var(--serif); font-style: italic; font-size: 18px; letter-spacing: -0.01em; text-transform: none; font-weight: 400; }
.topbar .brand b { font-weight: 600; }
.brand-suffix {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: 4px;
  vertical-align: 2px;
  opacity: 0.85;
}
.topbar .nav-right { display: flex; gap: 28px; align-items: center; }
.topbar .nav-right a { opacity: 0.85; transition: opacity 0.2s var(--ease); }
.topbar .nav-right a:hover { opacity: 1; color: var(--gold); }
@media (max-width: 640px) {
  .topbar { padding: 14px var(--pad-x); }
  .topbar .nav-right { display: none; }
}

/* ---------- PROGRESS RAIL ---------- */
.rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  mix-blend-mode: difference;
  color: var(--cream);
}
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.45;
  transition: opacity 0.25s var(--ease);
}
.rail a::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.25s var(--ease);
}
.rail a.is-active { opacity: 1; }
.rail a.is-active::before { width: 36px; background: var(--gold); }
.rail a:hover { opacity: 1; }
.rail .label { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .rail { display: none; } }

/* ---------- AXIS MARKS — corner-pinned plate labels ---------- */
.axis {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  line-height: 1.5;
}
.axis.tl { top: 80px;    left: var(--pad-x); }
.axis.tr { top: 80px;    right: var(--pad-x); text-align: right; }
.axis.bl { bottom: 56px; left: var(--pad-x); }
.axis.br { bottom: 56px; right: var(--pad-x); text-align: right; }
.axis b { color: var(--gold); font-weight: 400; }

@media (max-width: 768px) {
  .axis { font-size: 9px; letter-spacing: 0.18em; }
  .axis.tl, .axis.tr { top: 64px; }
  .axis.bl, .axis.br { bottom: 32px; }
}

/* ---------- PLATE LABEL — small chip with gold rule ---------- */
.plate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.plate::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--gold);
}
.slide.light .plate { color: var(--gold); }

/* ---------- TYPE SCALE ---------- */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 0.96;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.display em { font-style: italic; color: var(--gold); font-weight: 300; }

h1.display { font-size: clamp(48px, 7.6vw, 120px); }
h2.display { font-size: clamp(40px, 5.6vw, 84px); }
h3.display { font-size: clamp(28px, 3.4vw, 48px); }

.subhead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 56ch;
  opacity: 0.85;
}

.body-copy {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  max-width: 58ch;
}
.body-copy + .body-copy { margin-top: 1em; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- HERO (Slide 01) ---------- */
.hero {
  background: var(--ink);
  color: var(--cream);
  padding-bottom: 110px; /* room below stats for bottom axis marks */
}
.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 48px;
  align-items: end;
  margin-top: 60px;
}
.hero-asset {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}
.hero-content h1 { margin-bottom: 28px; }
.hero-content .subhead { margin-bottom: 56px; }

.hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: 0;
  border-top: var(--hairline);
  padding-top: 24px;
}
.hero-stat {
  padding: 0 28px 0 0;
  margin-right: 28px;
  border-right: var(--hairline);
}
.hero-stat:last-child { margin-right: 0; }
.hero-stat:last-child { border-right: 0; padding-right: 0; }
.hero-stat .value {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.hero-stat .value em {
  color: var(--gold);
  font-style: normal;
}
.hero-stat .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}
/* Tighten the gutters before the row is forced to break. The values and the
   labels both stay on one line as long as four will fit at all. */
@media (max-width: 1440px) {
  .hero-stat { padding: 0 12px 0 0; margin-right: 12px; }
}
/* Below that four across can no longer hold a single line each, so 2 x 2. */
@media (max-width: 1240px) {
  .hero-stats { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 24px 0; }
  .hero-stat { padding: 0 18px 0 0; margin-right: 0; }
  .hero-stat:nth-child(2n) { border-right: 0; padding-right: 0; }
  .hero-stat:nth-child(odd) { border-right: var(--hairline); }
  .hero-stat:nth-child(3), .hero-stat:nth-child(4) { padding-top: 18px; border-top: var(--hairline); }
}
@media (max-width: 768px) {
  .hero-stats { padding-top: 18px; }
}

.hero-cta { display: flex; gap: 14px; margin-top: 48px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn::after { content: '→'; transition: transform 0.25s var(--ease); }
.btn:hover { background: var(--gold); color: var(--ink); }
.btn:hover::after { transform: translateX(4px); }
.btn.primary { background: var(--gold); color: var(--ink); }
.btn.primary:hover { background: transparent; color: var(--cream); }
.slide.light .btn { color: var(--ink); }
.slide.light .btn:hover { background: var(--gold); color: var(--cream); }
.slide.light .btn.primary { background: var(--gold); color: var(--cream); }
.slide.light .btn.primary:hover { background: transparent; color: var(--ink); }

/* ---------- TURBINE GLYPH (CSS-rendered placeholder for hero asset) ---------- */
.turbine {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: min(980px, 74vw);
  aspect-ratio: 900 / 506;
  opacity: 0.62;
}
/* cover, not contain — the hero photo is 5:4 and would letterbox to a stamp
   inside this wide frame. Cover fills it and the mask below feathers the crop. */
.turbine picture, .turbine img { display:block; width:100%; height:100%; object-fit:cover; }
/* photographic backdrop — feathered so hero type stays legible over it */
.turbine img{ -webkit-mask-image:radial-gradient(ellipse 74% 74% at 60% 50%, #000 40%, transparent 84%);
              mask-image:radial-gradient(ellipse 74% 74% at 60% 50%, #000 40%, transparent 84%); }
@media (max-width: 900px) {
  .turbine { right: -30%; opacity: 0.32; width: 110vw; }
}

/* ---------- TWO-COL SLIDE LAYOUT (Problem, Solution) ---------- */
.split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
  margin-top: 40px;
}
.split-content { display: flex; flex-direction: column; justify-content: center; max-width: 56ch; }
.split-content h2 { margin-bottom: 24px; }
.split-content .body-copy { margin-bottom: 36px; }

.split-asset {
  position: relative;
  border: var(--rule-ink);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  overflow: hidden;
}
.slide.dark .split-asset { border: 1px solid rgba(244,235,217,0.18); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-asset { min-height: 280px; order: 2; }
  .split-content { order: 1; }
}

/* ---------- FIGURE-CAP : caption-over-asset framing ---------- */
.figure {
  position: relative;
  width: 100%; height: 100%;
}
.figure-cap {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(12, 16, 24,0.8), transparent);
  width: 100%;
  bottom: 0;
}
.figure-cap b { color: var(--gold); font-weight: 500; }

/* ---------- PROBLEM ASSET ---------- */
.problem-asset {
  width: 100%;
  height: 100%;
  position: relative;
  background:
    radial-gradient(circle at 30% 70%, rgba(201, 162, 39,0.18), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(201, 162, 39,0.10), transparent 60%),
    var(--ink);
}
.problem-asset picture { position:absolute; inset:0; display:block; }
.problem-asset img { width:100%; height:100%; object-fit:cover; display:block; }
.problem-asset .figure-cap { position:absolute; left:0; right:0; bottom:0; z-index:2;
  margin:0; padding:14px 16px; background:linear-gradient(180deg, rgba(10,20,32,0), rgba(10,20,32,.86)); }

/* ---------- SOLUTION : exploded-view CSS rendering ---------- */
.solution-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  margin-top: 40px;
  align-items: center;
}
.solution-content { display: flex; flex-direction: column; justify-content: center; max-width: 56ch; }
.solution-content h2 { margin-bottom: 24px; }
.solution-content .body-copy { margin-bottom: 0; }

.solution-asset {
  width: 100%;
  position: relative;
  border: 1px solid rgba(244,235,217,0.18);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 162, 39,0.08), transparent 70%),
    var(--ink);
  min-height: 56vh;
  overflow: hidden;
}
.exploded {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exploded svg { width: 90%; height: 90%; }

@media (max-width: 900px) {
  .solution-layout { grid-template-columns: 1fr; gap: 36px; }
  .solution-asset { min-height: 280px; order: 1; }
  .solution-content { order: 2; }
}

/* ---------- DATA-DENSE SPEC TABLE (Slide 04) ---------- */
.spec-block {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 64px;
  margin-top: 40px;
  align-items: start;
}
.spec-meta { padding-top: 8px; }
.spec-meta h2 { margin-bottom: 24px; }
.spec-meta .body-copy { margin-bottom: 36px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--gold);
}
.spec-table tr { border-bottom: var(--rule-ink); }
.slide.dark .spec-table tr { border-bottom: 1px solid rgba(244,235,217,0.12); }
.spec-table td {
  padding: 16px 12px;
  vertical-align: baseline;
}
.spec-table td.label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  width: 30%;
}
.spec-table td.value {
  font-family: var(--mono);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.01em;
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.spec-table td.note {
  font-family: var(--sans);
  font-size: 12.5px;
  opacity: 0.68;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .spec-block { grid-template-columns: 1fr; gap: 32px; }
  .spec-table td { padding: 12px 8px; }
  .spec-table td.label { width: 50%; font-size: 13px; }
  .spec-table td.value { font-size: 16px; }
  .spec-table td.note { display: none; }
}

/* ---------- VARIANT ROSTER (Slide 03) ---------- */
.variants {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.variant {
  padding: 28px 28px 32px;
  border-right: var(--rule-ink);
}
.slide.dark .variant { border-right: 1px solid rgba(244,235,217,0.18); }
.variant:last-child { border-right: 0; }
.variant.active { background: rgba(201, 162, 39,0.08); }
.variant .vstatus {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.variant .vstatus::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
}
.variant.active .vstatus::before { opacity: 1; box-shadow: 0 0 0 4px rgba(201, 162, 39,0.18); }
.variant .vname {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1;
}
.variant .vclass {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  opacity: 0.72;
  margin-bottom: 18px;
}
.variant .vnote {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.78;
}
@media (max-width: 768px) {
  .variants { grid-template-columns: 1fr; }
  .variant { border-right: 0; border-bottom: var(--rule-ink); }
  .slide.dark .variant { border-bottom: 1px solid rgba(244,235,217,0.18); }
  .variant:last-child { border-bottom: 0; }
}

/* ---------- DEPLOYMENT MAP (Slide 05) ---------- */
.deploy {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 56px;
  margin-top: 40px;
  align-items: stretch;
}
.deploy-meta { display: flex; flex-direction: column; padding-top: 8px; }
.deploy-meta h2 { margin-bottom: 24px; }
.deploy-meta .body-copy { margin-bottom: 32px; }

.phase-list { margin-top: auto; border-top: var(--rule-ink); }
.slide.dark .phase-list { border-top: 1px solid rgba(244,235,217,0.18); }
.phase {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: var(--rule-ink);
  align-items: baseline;
}
.slide.dark .phase { border-bottom: 1px solid rgba(244,235,217,0.18); }
.phase .ph-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}
.phase .ph-geo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
}
.phase .ph-target {
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.75;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.deploy-map {
  position: relative;
  border: var(--rule-ink);
  background: var(--ink);
  min-height: 60vh;
  overflow: hidden;
}
.slide.dark .deploy-map { border: 1px solid rgba(244,235,217,0.18); }
.deploy-map svg { width: 100%; height: 100%; position: absolute; inset: 0; }

@media (max-width: 900px) {
  .deploy { grid-template-columns: 1fr; gap: 32px; }
  .deploy-map { min-height: 320px; order: 2; }
  .phase { grid-template-columns: 48px 1fr 1fr; gap: 12px; padding: 12px 0; }
  .phase .ph-geo { font-size: 15px; }
  .phase .ph-target { font-size: 11px; }
}

/* ---------- TEAM GRID (Slide 06) ---------- */
.team-block { flex: 1; display: flex; flex-direction: column; margin-top: 40px; }
.team-block h2 { margin-bottom: 18px; max-width: 18ch; }
.team-block .body-copy { margin-bottom: 48px; max-width: 60ch; }

.team {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 18px;
  margin-bottom: 40px;
}
.member { display: flex; flex-direction: column; }
.portrait {
  aspect-ratio: 1;
  max-height: 200px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--rule-ink);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.slide.light .portrait { border: 1px solid rgba(12, 16, 24,0.18); }
.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(201, 162, 39,0.18), transparent 70%);
  pointer-events: none;
}
.portrait .initials {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 4.5vw, 64px);
  color: var(--cream);
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
}
.member .role {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.member .name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 4px;
}
.member .affil {
  font-family: var(--sans);
  font-size: 11.5px;
  opacity: 0.72;
  line-height: 1.4;
}

.cross-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  align-self: flex-start;
  transition: gap 0.25s var(--ease);
}
.cross-link::after { content: '→'; transition: transform 0.25s var(--ease); }
.cross-link:hover::after { transform: translateX(6px); }

@media (max-width: 1100px) {
  .team { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
  .portrait { max-height: 240px; }
  .portrait .initials { font-size: clamp(48px, 5vw, 72px); }
  .member .name { font-size: 19px; }
  .member .affil { font-size: 13px; }
}
@media (max-width: 640px) {
  .team { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .portrait { max-height: none; }
}
@media (max-width: 420px) {
  .team { grid-template-columns: 1fr; }
}

/* ---------- CONTACT FORM (Slide 07) ---------- */
.contact-block {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 64px;
  margin-top: 40px;
  align-items: start;
}
.contact-meta { padding-top: 8px; }
.contact-meta h2 { margin-bottom: 24px; }
.contact-meta .body-copy { margin-bottom: 24px; }
.contact-meta .meta-list {
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.9;
  opacity: 0.78;
}
.contact-meta .meta-list b { color: var(--gold); font-weight: 400; }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  background: rgba(244,235,217,0.04);
  border: 1px solid rgba(244,235,217,0.18);
  color: var(--cream);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}
.slide.light .field input, .slide.light .field select, .slide.light .field textarea {
  background: rgba(12, 16, 24,0.04);
  border: 1px solid rgba(12, 16, 24,0.18);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background: rgba(201, 162, 39,0.06);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23c9a227' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.honeypot { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }

.form-submit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.form-msg {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.form-msg.show { opacity: 1; }
.form-msg.ok { color: var(--gold); }
.form-msg.err { color: #d4593c; }

@media (max-width: 900px) {
  .contact-block { grid-template-columns: 1fr; gap: 36px; }
  .form { grid-template-columns: 1fr; }
}

/* ---------- FOOTER (Slide 08) ---------- */
.foot {
  background: var(--ink);
  color: var(--cream);
  min-height: auto;
  padding-top: 80px;
  padding-bottom: 32px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  border-top: var(--hairline);
  padding-top: 56px;
  margin-top: 40px;
}
.foot-brand { display: flex; flex-direction: column; gap: 18px; max-width: 36ch; }
.foot-brand .mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.foot-brand .mark b { font-weight: 600; }
.foot-brand .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.62;
  text-transform: uppercase;
  line-height: 1.7;
}
.foot-col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  font-weight: 400;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 9px; font-size: 13px; }
.foot-col a {
  opacity: 0.78;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.foot-col a:hover { opacity: 1; color: var(--gold); }

.foot-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  margin-top: 56px;
  border-top: var(--hairline);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  flex-wrap: wrap;
  gap: 16px;
}
.foot-rule a { transition: opacity 0.2s var(--ease); }
.foot-rule a:hover { opacity: 1; color: var(--gold); }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-rule { flex-direction: column; align-items: flex-start; }
}

/* ---------- REVEAL ANIMATIONS — slowed timing for deck pacing ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .deck { scroll-behavior: auto; }
  html { scroll-behavior: auto; }
}

/* ---------- SELECTION ---------- */
::selection { background: var(--gold); color: var(--ink); }

/* ====================================================================
   v1.3 ADDITIONS — Power site polish for Cortado-grade readability
   ==================================================================== */

/* ---------- PORTRAIT PHOTO (Brian's headshot in team) ---------- */
.portrait.portrait-photo { padding: 0; }
.portrait.portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.6) contrast(1.05);
}
.portrait.portrait-photo::after {
  background: linear-gradient(to top, rgba(12,16,24,0.55), transparent 40%);
}

/* ---------- STRATEGIC PARTNERS STRIP (under team grid) ---------- */
.partners-strip {
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(12, 16, 24, 0.12);
}
.partners-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.partner-card {
  border: 1px solid rgba(12, 16, 24, 0.16);
  padding: 18px 16px;
  background: rgba(244, 235, 217, 0.45);
  display: flex;
  flex-direction: column;
}
.partner-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}
.partner-role {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.partner-detail {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.72;
}
@media (max-width: 900px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .partners-grid { grid-template-columns: 1fr; }
}

/* ---------- WHY THIS WORKS (slide 04) — pillars + CFD band ---------- */
.why-block {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
  margin-top: 24px;
  margin-bottom: 20px;
}
.why-meta { max-width: 50ch; }
.why-meta h2 { margin-bottom: 18px; font-size: clamp(36px, 4vw, 56px); }
.why-meta .body-copy { margin-bottom: 0; }

/* ---------- DISPATCHABLE BAND — full width, under the pillars ---------- */
.dispatch-note {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start;
  margin-top: 40px; padding: 28px 30px 26px;
  border: 1px solid var(--gold-line, rgba(201,162,39,.28));
  border-left: 3px solid var(--gold, #C9A227);
  background: rgba(201,162,39,.05);
}
.dn-k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
        text-transform: uppercase; color: var(--gold, #C9A227); }
.dn-t { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15;
        margin: 0 0 14px; color: var(--paper, #F4EBD9); }
.dn-t em { font-style: italic; color: var(--gold, #C9A227); }
.dn-b { font-size: .95rem; line-height: 1.7; color: var(--paper-dim, rgba(244,235,217,.72)); margin: 0; }
.dn-rows { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
           background: var(--gold-line, rgba(201,162,39,.20)); border: 1px solid var(--gold-line, rgba(201,162,39,.20)); }
.dn-rows > div { background: var(--ink, #0A1420); padding: 16px 14px; }
.dn-rows b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
             text-transform: uppercase; color: var(--gold, #C9A227); margin-bottom: 7px; font-weight: 500; }
.dn-rows span { display:block; font-size: .86rem; line-height: 1.6; color: var(--paper-dim, rgba(244,235,217,.68)); }
@media (max-width: 1000px) {
  .dispatch-note { grid-template-columns: 1fr; gap: 24px; }
  .dn-rows { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .why-block { grid-template-columns: 1fr; gap: 28px; }
}

.pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1280px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .pillars { grid-template-columns: 1fr; } }

.pillar {
  border: 1px solid rgba(244, 235, 217, 0.18);
  padding: 14px 12px;
  background: rgba(244, 235, 217, 0.025);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 168px;
}
.pillar:hover { border-color: var(--gold-soft); }
.p-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--gold);
  margin-bottom: 10px;
}
.p-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 8px;
}
.p-body {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.78;
  flex: 1;
}

/* ---------- CFD VALIDATION BAND (bottom of slide 04) ---------- */
.cfd-band {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 8px;
  border-top: 1px solid rgba(244,235,217,0.18);
  padding-top: 20px;
  min-height: 0;
}
@media (max-width: 1100px) {
  .cfd-band { grid-template-columns: 1fr; gap: 20px; }
}
.cfd-asset {
  position: relative;
  border: 1px solid rgba(244,235,217,0.18);
  background: rgba(244, 235, 217, 0.02);
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cfd-asset svg { width: 100%; height: auto; max-height: 220px; }
.cfd-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cfd-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.cfd-numbers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.cn-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(244,235,217,0.10);
}
.cn-label {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--cream);
  opacity: 0.75;
}
.cn-value {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.cfd-foot {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--cream);
  opacity: 0.55;
  line-height: 1.5;
}

/* ====================================================================
   v1.4 ADDITIONS — watermarks + why-now beat + footer heritage line
   ==================================================================== */

/* ---------- WATERMARKS — section background sketches (low opacity) ---------- */
.watermark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.085;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Slide content sits above the watermark */
.slide > .split,
.slide > .why-block,
.slide > .cfd-band,
.slide > .cfd-triptych,
.slide > .why-now,
.slide > .solution-layout,
.slide > .variants,
.slide > .deploy,
.slide > .spec-block,
.slide > .team-block,
.slide > .contact-block {
  position: relative;
  z-index: 1;
}
/* Axis labels keep absolute positioning, just stack above watermark */
.axis { z-index: 2; }

.wm-wellpad {
  background-image: url('assets/img/wm-wellpad.svg');
  width: 380px;
  height: 380px;
  bottom: 8%;
  right: 4%;
  opacity: 0.10;
}
.wm-rotor {
  background-image: url('assets/img/wm-rotor_perspective.svg');
  width: 420px;
  height: 420px;
  top: 18%;
  right: 3%;
  opacity: 0.08;
}
.wm-bench {
  background-image: url('assets/img/wm-drafting_bench.svg');
  width: 380px;
  height: 380px;
  top: 8%;
  right: 4%;
  opacity: 0.10;
}
.wm-hq {
  background-image: url('assets/img/wm-hq_building.svg');
  width: 380px;
  height: 380px;
  bottom: 4%;
  left: 4%;
  opacity: 0.07;
}
@media (max-width: 900px) {
  .watermark { display: none; }
}

/* ---------- WHY NOW STRIP (under §02 Problem split) ---------- */
.why-now {
  margin-top: 20px;
  padding-top: 18px;
  padding-bottom: 56px; /* clearance for .axis.bl/.br at section bottom */
  border-top: 1px solid rgba(12, 16, 24, 0.16);
}
.why-now-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.why-now-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.wn-card {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 12px;
  align-items: start;
}
.wn-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
  padding-top: 2px;
  border-top: 1px solid var(--gold);
  margin-top: 0;
  text-align: center;
}
.wn-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
  grid-row: 1;
  grid-column: 2;
}
.wn-body {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.72;
  grid-row: 2;
  grid-column: 2;
}
@media (max-width: 900px) {
  .why-now-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- FOOTER HERITAGE MICRO-LINK ---------- */
.foot-brand .tag.heritage {
  font-style: italic;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
}
.foot-brand .tag.heritage a:hover {
  color: var(--cream) !important;
  border-bottom-color: var(--cream) !important;
}

/* ====================================================================
   v1.5 ADDITIONS — bench cards (no portraits), CFD triptych
   ==================================================================== */

/* ---------- BENCH CARDS (replaces .team grid + portraits) ---------- */
.bench-strip {
  margin-top: 32px;
  margin-bottom: 28px;
}
.bench-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.bench-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .bench-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bench-grid { grid-template-columns: 1fr; } }
/* A lone card in the final row reads as an orphan — centre it.
   3-col: fires when the count leaves one over. 2-col: same for odd counts. */
@media (min-width: 1101px) {
  .bench-grid > .bench-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .bench-grid > .bench-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 9px); margin: 0 auto; }
}

.bench-card {
  border: 1px solid rgba(12, 16, 24, 0.16);
  padding: 18px 16px;
  background: rgba(244, 235, 217, 0.45);
  display: flex;
  flex-direction: column;
}
.bench-role {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.bench-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.bench-detail {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.74;
}

/* ---------- CFD TRIPTYCH (replaces single CFD band) ---------- */
.cfd-triptych {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid rgba(244,235,217,0.18);
  padding-top: 16px;
  min-height: 0;
}
.cfd-tri-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cfd-tri-foot {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--cream);
  opacity: 0.55;
}

.cfd-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1100px) { .cfd-panels { grid-template-columns: 1fr; } }

.cfd-panel {
  border: 1px solid rgba(244,235,217,0.18);
  background: rgba(244, 235, 217, 0.02);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.cfd-panel svg {
  width: 100%;
  height: auto;
  flex: 1;
  display: block;
}
.cfd-panel-cap {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.78;
  padding: 8px 12px;
  background: rgba(12, 16, 24, 0.55);
  border-top: 1px solid rgba(244,235,217,0.10);
}
.cfd-panel-cap b { color: var(--gold); font-weight: 500; }

.cfd-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-top: 12px;
  border: 1px solid rgba(244,235,217,0.18);
  background: rgba(244, 235, 217, 0.02);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--cream);
  flex-wrap: wrap;
}
.cfd-strip span {
  white-space: nowrap;
  opacity: 0.78;
}
.cfd-strip b {
  color: var(--gold);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
@media (max-width: 1100px) {
  .cfd-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ====================================================================
   v1.12 ADDITIONS — Operator value section (§05)
   ==================================================================== */
.op-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
  margin-bottom: 24px;
  min-height: 0;
}
.op-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.op-meta-head h2 { margin-bottom: 0; font-size: clamp(36px, 4vw, 56px); max-width: 14ch; }
.op-meta-head .plate { margin-bottom: 18px; }
.op-meta .body-copy { margin-bottom: 0; max-width: 56ch; padding-top: 18px; }
@media (max-width: 1100px) {
  .op-meta { grid-template-columns: 1fr; gap: 24px; }
  .op-meta .body-copy { padding-top: 0; }
}

.op-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .op-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .op-pillars { grid-template-columns: 1fr; } }

.op-card {
  border: 1px solid rgba(12, 16, 24, 0.16);
  background: rgba(244, 235, 217, 0.45);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
}
.op-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--gold);
  margin-bottom: 10px;
}
.op-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.op-body {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.74;
}

.op-band {
  border-top: 1px solid rgba(12, 16, 24, 0.16);
  padding-top: 18px;
}
.op-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.op-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) { .op-modes { grid-template-columns: 1fr; gap: 16px; } }
.op-mode {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(12, 16, 24, 0.10);
}
.op-mode:last-child { border-bottom: 0; }
.op-mode-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.op-mode-detail {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
}
@media (max-width: 700px) {
  .op-mode { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================================
   V3 ADDITIONS — Rev 26.08 · imagery, lineage, cost moat
   ========================================================================= */
.pfig { margin: 0; }
.pfig img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border: 1px solid var(--gold-line); }
.pfig.wide img { aspect-ratio: 21/9; }
.pfig figcaption { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; line-height: 1.7;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 12px; }
.pfig figcaption b { color: var(--gold); font-weight: 500; }
.slide.light .pfig img { border-color: rgba(12,16,24,0.18); }
.slide.light .pfig figcaption { color: var(--ink-soft); }
.slide.light .pfig figcaption b { color: var(--brand-blue); }
.fig-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; }
.fig-row.two { grid-template-columns: 1fr 1fr; }
.fig-row.one { grid-template-columns: 1fr; }
/* A trailing caption ends flush with the section's 56px bottom padding —
   exactly where the absolutely-positioned .axis.bl / .axis.br corner labels
   sit, so the two overprint. Padding (not margin) creates the clearance:
   margin grows the section and drags the axis down with it. */
#solution, #economics, #deploy, #operator, #network-map { padding-bottom: 132px; }
@media (max-width: 700px) { #solution, #economics, #deploy, #operator, #network-map { padding-bottom: 150px; } }
@media (max-width: 780px) { .fig-row, .fig-row.two { grid-template-columns: 1fr; } }

/* lineage */
.lineage { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--gold-line);
  border: 1px solid var(--gold-line); margin-top: 40px; }
.lin-cell { background: var(--ink); padding: 26px 22px; }
.lin-cell.next { background: var(--ink-2); }
.lin-gen { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; }
.lin-name { font-family: var(--serif); font-size: 27px; color: var(--cream); line-height: 1; margin-bottom: 10px; }
.lin-cell.next .lin-name { color: var(--gold); font-style: italic; }
.lin-detail { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); }
.lin-status { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-soft); margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--gold-line); }
@media (max-width: 900px) { .lineage { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .lineage { grid-template-columns: 1fr; } }

/* cost comparison */

/* ============================================================================
   V3.1 — LAUNCH · hand-off rail · tagline close
   ========================================================================= */
.handoff { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--gold-line); border: 1px solid var(--gold-line); margin-top: 48px; }
.handoff-cell { background: var(--ink); padding: 26px 22px; text-decoration: none; display: block; transition: background .3s; }
.handoff-cell:hover { background: var(--ink-2); }
.ho-role { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.ho-name { font-family: var(--serif); font-size: 1.28rem; color: var(--cream); line-height: 1.15; margin-bottom: 10px; }
.ho-why { font-size: 13.5px; line-height: 1.6; color: var(--ink-mute); }
.ho-dom { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--gold-soft);
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gold-line); }
@media (max-width: 940px) { .handoff { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .handoff { grid-template-columns: 1fr; } }

.tagline-block { text-align: center; max-width: 820px; margin: 72px auto 0; }
.tagline-block .tg-line { font-family: var(--serif); font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.08; color: var(--cream); }
.tagline-block .tg-line em { font-style: italic; color: var(--gold); }
.tagline-block .tg-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 26px; }
.network-block { max-width: 1180px; margin: 0 auto; width: 100%; }


/* ============================================================================
   FORMATTING PASS — native aspect ratios
   Forcing every photo into one frame was cropping 18–58% of the source.
   Images now display at their own proportions; grids align to the top so
   rows sit cleanly with mixed portrait/landscape. Deliberate wide bands keep
   their crop via .wide / .hero-wide / .field-band.
   ========================================================================= */
.pfig img, .story-fig img, .field-fig img, .dispatch-fig img, .inventor img {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
}
.fig-strip, .story-strip, .field-pair, .slot-pair, .dispatch-media,
.racing-cars + .story-strip, .lineage-three {
  align-items: start;
}
/* intentional cinematic bands keep a fixed frame */
.pfig.wide img, .story-fig.wide img, .field-fig.hero-wide img,
.racing-hero img, .field-band img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* Near-square sources were losing 36–47% inside 21:9 bands. Bands now sit at
   16:9, and .field-band follows its source. */
.pfig.wide img, .story-fig.wide img, .field-fig.hero-wide img, .racing-hero img {
  aspect-ratio: 16 / 9;
}
.field-band img { aspect-ratio: auto; object-fit: fill; }

/* Final: no forced frames anywhere. Every photo shows at its own proportions.
   Sources range from 3.17:1 panoramic to 0.75:1 portrait — no single frame
   serves them, and cropping to force one was the original complaint. */
.pfig img, .story-fig img, .field-fig img, .dispatch-fig img, .inventor img,
.pfig.wide img, .story-fig.wide img, .field-fig.hero-wide img,
.racing-hero img, .field-band img {
  aspect-ratio: auto !important;
  object-fit: fill !important;
  height: auto !important;
}


/* ============================================================================
   REVEAL — FAILSAFE
   Content is visible by default. The fade-in only applies once JS has
   confirmed it can drive it (html.js-reveal). If the script is missing,
   blocked, or fails, the text still shows.
   Previous bug: threshold 0.12 meant any block taller than the viewport
   could never reach 12% visibility and stayed at opacity 0 forever.
   ========================================================================= */
.reveal, .reveal-stagger { opacity: 1; transform: none; }
html.js-reveal .reveal:not(.in),
html.js-reveal .reveal-stagger:not(.in) {
  opacity: 0;
  transform: translateY(16px);
}
html.js-reveal .reveal, html.js-reveal .reveal-stagger {
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal:not(.in),
  html.js-reveal .reveal-stagger:not(.in) { opacity: 1; transform: none; }
}


/* ============================================================================
   INVENTION LINEAGE — moved here from the founder site.
   Tesla + Wankel = MDRG. Three columns, one shared row grid so portraits,
   names, body copy and both diagrams line up across all three.
   ========================================================================= */
.engine-block { max-width: 1180px; margin: 0 auto; width: 100%; }
.engine-block .body-copy { max-width: 900px; }
.engine-block .body-copy + .body-copy { margin-top: 16px; }

.rule-mark { color: var(--gold); margin: 4px 0 22px; }
.rule-mark svg { width: 200px; height: 13px; display: block; }

h2.stagger em, h2.stagger span {
  display: block; font-style: italic; color: var(--gold);
  margin-left: clamp(28px, 5vw, 104px);
}

.inventors {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows: repeat(8, min-content);
  grid-auto-rows: min-content;
  gap: 0; margin-top: 44px;
  border: 1px solid var(--gold-line);
  align-items: stretch;
}
.inv {
  margin: 0; padding: 22px 18px 24px;
  display: grid; grid-template-rows: subgrid; grid-row: span 8; gap: 0;
}
.inv > figcaption { display: grid; grid-template-rows: subgrid; grid-row: span 7; gap: 0; }
.inv.terminal { background: rgba(201,162,39,.06); }

.inv-portrait { margin-bottom: 20px; align-self: start; }
.inv-portrait img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3/4; object-fit: cover; object-position: center top;
  border: 1px solid var(--gold-line); filter: none;
}
/* This whole block sat on a .slide.light section but coloured its text with
   var(--cream) and var(--ink-mute) — and --ink-mute is defined as
   rgba(244,235,217,.62), i.e. cream despite the name. Fourteen elements were
   invisible: both inventor names, all three role lines, all three notes
   (including the Charles Fletcher Peck line) and six diagram captions. */
.inv-name {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.15;
  min-height: 1.15em; color: var(--ink);
  display: flex; align-items: flex-end; align-self: end;
}
.inv.terminal .inv-name { color: var(--gold); font-style: italic; }
.inv-life {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: var(--gold); margin-top: 7px;
}
.inv-role {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(12,16,24,0.60);
  margin: 12px 0 14px; padding-top: 12px;
  border-top: 1px solid var(--gold-line); align-self: start;
}
.inv figcaption p {
  font-size: .84rem; line-height: 1.62; color: var(--ink-soft);
  margin: 0; align-self: start;
}
.inv-inset { margin: 20px 0 0; align-self: start; }
.inv-inset + .inv-inset { margin-top: 14px; }
.inv-inset img { width: 100%; height: auto; display: block; border: 1px solid var(--gold-line); background: var(--ink); }
.inv-inset figcaption {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(12,16,24,0.60); margin-top: 8px; text-align: center;
}
.inv-link {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-line); padding-bottom: 3px;
}
.inv-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.inv-note {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  line-height: 1.8; color: rgba(12,16,24,0.60);
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--gold-line);
}
.inv-tail {
  align-self: end; padding-top: 4px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.inv-op {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.5rem; color: var(--gold);
  padding: 0 8px;
  border-left: 1px solid var(--gold-line); border-right: 1px solid var(--gold-line);
  background: rgba(201,162,39,.05);
}

.honesty {
  margin-top: 48px; border-left: 2px solid var(--gold);
  padding: 22px 0 22px 24px; max-width: 900px;
}
.honesty-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.honesty p { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
/* Was var(--cream) on a .slide.light section — identical to the background,
   so "not yet been fired under load" and "not drilled" rendered invisible. */
.honesty strong { color: var(--ink); font-weight: 600; }
.slide.dark .honesty strong, .slide:not(.light) .honesty strong { color: var(--cream); }

@media (max-width: 1180px) {
  .inventors { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
}
@media (max-width: 900px) {
  .inventors { grid-template-columns: 1fr; grid-template-rows: none; }
  .inv, .inv > figcaption { display: block; grid-row: auto; }
  .inv-op { border: 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); padding: 12px 0; }
}
@supports not (grid-template-rows: subgrid) {
  .inv, .inv > figcaption { display: block; }
  .inv figcaption p { min-height: 11.5em; }
}

/* ============================================================================
   GLOBAL FOOTER — one founder, a family of ventures
   Identical markup on all five properties. Each site supplies its own
   --ecf-ground / --ecf-accent / --ecf-text below; everything else is shared.
   ========================================================================= */
.ec-footer {
  background: var(--ecf-ground, #0a1828);
  color: var(--ecf-text, #e6dcc6);
  padding: 88px 0 40px;
  margin-top: 0;
  border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
  position: relative; z-index: 2;
}
.ec-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  text-align: center;
}
.ec-mark { display: inline-block; margin-bottom: 30px; }
.ec-mark img { width: 300px; max-width: 78vw; height: auto; display: block; }

.ec-line {
  font-family: var(--ecf-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.08; margin: 0 0 26px;
  color: var(--ecf-text, #e6dcc6); font-weight: 500;
}
.ec-line em { font-style: italic; color: var(--ecf-accent, #c9744f); }

.ec-lede {
  max-width: 780px; margin: 0 auto;
  font-size: 1.02rem; line-height: 1.7;
  color: var(--ecf-muted, rgba(230,220,198,.72));
}
.ec-call {
  font-family: var(--ecf-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(17px, 2.1vw, 23px); font-style: italic;
  color: var(--ecf-accent, #c9744f);
  margin: 26px auto 0; max-width: 720px;
}

.ec-ventures {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin: 46px 0 0; text-align: left;
}
.ec-venture {
  display: block; text-decoration: none;
  background: var(--ecf-card, rgba(255,255,255,.045));
  border: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
  border-top: 2px solid var(--ecf-accent, #c9744f);
  padding: 24px 22px 20px;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.ec-venture:hover { background: var(--ecf-card-hi, rgba(255,255,255,.08)); transform: translateY(-2px); }
.ec-venture img {
  width: 100%; max-width: 210px; height: auto; display: block;
  margin-bottom: 18px;
  background: #f4ebd9; padding: 9px 11px; border-radius: 2px;
}
.ec-venture p {
  font-size: .88rem; line-height: 1.65;
  color: var(--ecf-muted, rgba(230,220,198,.72)); margin: 0;
}
.ec-venture p b { color: var(--ecf-text, #e6dcc6); font-weight: 500; }
.ec-dom {
  display: block; margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
  font-family: var(--ecf-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ecf-accent, #c9744f);
}

.ec-net {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 46px 0 0; padding-top: 32px;
  border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
}
.ec-net a {
  font-family: var(--ecf-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ecf-muted, rgba(230,220,198,.72)); text-decoration: none;
  padding: 9px 15px; border: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
  transition: color .2s ease, border-color .2s ease;
}
.ec-net a:hover { color: var(--ecf-accent, #c9744f); border-color: var(--ecf-accent, #c9744f); }
.ec-net a[aria-current="page"] {
  color: var(--ecf-accent, #c9744f);
  border-color: var(--ecf-accent, #c9744f);
  background: var(--ecf-card, rgba(255,255,255,.045));
}

.ec-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--ecf-rule, rgba(255,255,255,.12));
  font-family: var(--ecf-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .1em;
  color: var(--ecf-faint, rgba(230,220,198,.42));
  text-align: left;
}

@media (max-width: 860px) { .ec-ventures { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .ec-footer { padding-top: 62px; }
  .ec-base { justify-content: center; text-align: center; }
}

/* footer theme for this property */
.ec-footer {
  --ecf-ground: #0c1018;
  --ecf-accent: #c9a227;
  --ecf-text:   #f4ebd9;
  --ecf-muted:  rgba(244,235,217,.72);
  --ecf-faint:  rgba(244,235,217,.42);
  --ecf-rule:   rgba(244,235,217,.14);
  --ecf-card:   rgba(244,235,217,.05);
  --ecf-card-hi:rgba(244,235,217,.09);
  --ecf-serif:  var(--serif, 'Fraunces', Georgia, serif);
  --ecf-mono:   var(--mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* Unit economics: the prose reads after the numbers, full width under the table */
.econ-note { margin-top: 40px; max-width: 900px; }
.econ-note .body-copy + .body-copy { margin-top: 18px; }
.econ-fine { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
             line-height: 1.7; opacity: 0.6; }

/* #why carries the lineage on its own now, so it needs the top and bottom
   clearance the differentiator block used to provide around the axis labels */
#why .lineage-head { margin-top: 56px; }
#why .lineage { margin-bottom: 56px; }

/* ---------- GO RAIL : the three ways off the home page ---------- */
.go-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.go-card {
  display: block; text-decoration: none; color: inherit;
  background: rgba(12, 16, 24, 0.04);
  border: var(--rule-ink); border-top: 2px solid var(--gold);
  padding: 26px 26px 22px;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.slide.dark .go-card { background: rgba(244,235,217,0.04); border: 1px solid rgba(244,235,217,0.16); border-top: 2px solid var(--gold); }
.go-card:hover, .go-card:focus-visible {
  background: rgba(201,162,39,0.08); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(12,16,24,0.10);
}
.go-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.go-k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
        text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.go-t { display: block; font-family: var(--serif); font-size: clamp(19px, 2vw, 25px);
        line-height: 1.25; }
.go-d { display: block; font-size: 0.93rem; line-height: 1.65; margin-top: 10px; opacity: 0.78; }
.go-a { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
        text-transform: uppercase; color: var(--gold); margin-top: 20px; }
@media (max-width: 860px) { .go-rail { grid-template-columns: 1fr; gap: 16px; } }

.see-more { display: inline-block; margin-top: 26px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--gold-line); padding-bottom: 4px;
  transition: border-color .2s var(--ease); }
.see-more:hover { border-bottom-color: var(--gold); }

/* The short caption that rides beside the number in a hero stat */
.hero-stat .value .cap {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}

/* ==========================================================================
   MOBILE PASS — 2026-08-23
   The desktop layout leaned on fixed-width type and corner stamps that a
   390px screen cannot hold. Everything below is phone-only.
   ========================================================================== */
@media (max-width: 768px) {

  /* The per-section corner stamps repeat a header and a footer on every
     screen and collide with the fixed bar. They are editorial furniture for
     a wide canvas, so they come off the phone entirely. */
  .axis { display: none !important; }

  /* The bar is mix-blend-mode:difference over a scrim built for dark slides.
     Over the cream sections that reads as a smear, so on a phone it becomes
     an ordinary solid bar. */
  .topbar-scrim { display: none; }
  .topbar {
    mix-blend-mode: normal;
    background: rgba(9, 13, 20, 0.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(240, 233, 217, 0.10);
    flex-wrap: wrap;
    row-gap: 9px;
    padding: 12px var(--pad-x) 10px;
  }
  .topbar .brand { flex: 0 0 100%; font-size: 17px; }

  /* Without this the four pages are unreachable from a phone — the links
     were display:none and there is no menu button to replace them. */
  .topbar .nav-right {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    gap: 0;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: 0.10em;
  }
  .topbar .nav-right a { opacity: 0.9; }
  .topbar .nav-right a[aria-current] { color: var(--gold); opacity: 1; }

  /* The hero art was floating as a hard-edged rectangle across the buttons.
     Full-bleed and further back, it reads as the texture it was meant to be. */
  .turbine {
    top: 0; bottom: 0; right: 0; left: 0;
    width: 100%; height: 100%;
    transform: none;
    aspect-ratio: auto;
    opacity: 0.14;
  }
  /* cover on a portrait screen crops hard; push the frame off the wordmark so
     the panel type never competes with the headline */
  .turbine img {
    object-position: 100% center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 78%, transparent 100%);
  }

  /* Wide tracking on a long eyebrow overran the screen. */
  .plate { font-size: 9.5px; letter-spacing: 0.12em; }

  /* Four buttons at desktop width ran off the right edge. */
  .hero-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 36px;
  }
  .hero-cta .btn {
    min-width: 0;
    padding: 14px 10px;
    font-size: 9.5px;
    letter-spacing: 0.10em;
    text-align: center;
    justify-content: center;
  }

  /* nowrap keeps "1 yr SERVICE INTERVAL" on one line on a laptop; on a phone
     it is what pushed the fourth stat off the screen. */
  .hero-stat .value { white-space: normal; }
  .hero-stat .value .cap { display: block; margin-top: 3px; }

  .figure-cap { font-size: 9px; letter-spacing: 0.08em; padding: 12px 12px; }
}

@media (max-width: 400px) {
  .topbar .nav-right { font-size: 9px; letter-spacing: 0.06em; }
  .hero-cta .btn { font-size: 9px; letter-spacing: 0.06em; padding: 13px 6px; }
}

@media (max-width: 480px) {
  /* the nowrap that keeps "2 wk · 2 days" on one line runs the table past the
     screen edge on a small phone */
  .spec-table td.value { white-space: normal; }
  .spec-table td.label { width: auto; }
}

/* ---------- THE MACHINE — give the spec table room ----------
   The table sits inside .split-content, which is capped at 56ch. Half a
   1440 screen minus that cap left the note column so narrow that every
   note broke with one or two words stranded on a second line. */
#machine .split { grid-template-columns: 1.18fr 0.82fr; gap: 48px; }
#machine .split-content { max-width: none; }
#machine .spec-table td.label { width: 24%; }
#machine .spec-table td.note { font-size: 12px; line-height: 1.4; }
@media (max-width: 900px) {
  #machine .split { grid-template-columns: 1fr; }
}

/* the revenue block on Home borrows the machine split's proportions */
#revenue .split { grid-template-columns: 1.18fr 0.82fr; gap: 48px; }
#revenue .split-content { max-width: none; }
#revenue .spec-table td.label { width: 26%; }
#revenue .spec-table td.note { font-size: 12px; line-height: 1.4; }
@media (max-width: 900px) {
  #revenue .split { grid-template-columns: 1fr; }
}

/* ---------- THE MACHINE — show the whole frame on desktop ----------
   .split-asset stretches to the text column's height (min-height 60vh,
   align-items: stretch), so a landscape photo gets cropped to a tall slab.
   On a phone the single-column layout gives it a short wide band and the
   full frame reads. Matching the frame to the image's own ratio gives the
   desktop the same thing. */
#machine .split { align-items: center; }
#machine .split-asset {
  min-height: 0;
  aspect-ratio: 1568 / 1264;
  align-self: center;
}

/* ── Source attribution. The research is only worth as much as its sourcing,
      so citations sit visibly with the claim rather than in a footnote. ── */
.src-note{
  margin-top:14px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.06em; line-height:1.85;
  color:rgba(255,255,255,.45);
}
.slide.light .src-note{ border-top-color:rgba(0,0,0,.14); color:rgba(0,0,0,.5); }
.src-inline{
  display:block; margin-top:9px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px; letter-spacing:.05em; line-height:1.8;
  color:rgba(0,0,0,.48);
}
.slide.dark .src-inline{ color:rgba(255,255,255,.42); }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER LEGIBILITY OVER LIGHT SECTIONS
   The topbar is cream text on a transparent bar, relying on .topbar-scrim
   for contrast. That works on index/technology/contact, which all open on a
   dark slide. business.html opens on `.slide light` — cream #f4ebd9 text on
   a cream #f4ebd9 ground, measured at 1.69:1 against 14.61:1 on index.
   The bar now carries its own opaque backdrop so it is legible over any
   section, light or dark, at landing and while scrolling.
   ═══════════════════════════════════════════════════════════════════════ */
.topbar{
  background: rgba(10, 13, 19, .92);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(244,235,217,.10);
}
.topbar-scrim{ display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   WHY-NOW GRID
   Four cards in a 3-column grid left one orphaned on its own row, and the
   cards stretched to the tallest, so short cards pushed their body text to
   the bottom (grid align-content defaults to stretch on auto rows).
   Two columns takes four cards as an even 2x2, and start-alignment keeps
   each card's text at its top.
   ═══════════════════════════════════════════════════════════════════════ */
.why-now-grid{
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 26px 34px;
}
.wn-card{ align-content: start; }
@media (max-width: 900px){
  .why-now-grid{ grid-template-columns: 1fr; gap: 22px; }
}

/* why-now now opens with a display heading like every other section */
.why-now .plate{ margin-bottom: 14px; }
.why-now h2.display{ margin: 0 0 34px; }

/* network-map: the plate duplicated the corner label and collided with it.
   Removing it also removed the spacer that kept the heading clear of the
   axis, so the block carries that offset itself. */
#network-map .network-block{ padding-top: 46px; }

/* The no-market split is a two-column grid whose right column held nothing —
   1,559 px of dead space beside the argument. The deployment examples now sit
   there, stacked, which also removes the trailing block that left the operator
   section running long. */
.fig-row.stack{
  display:flex; flex-direction:column; gap:22px;
  align-self:start; position:sticky; top:96px;
}
.fig-row.stack figure{ margin:0; }
.fig-row.stack img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(244,235,217,.12);
}
.fig-row.stack figcaption{
  margin-top:9px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.08em; line-height:1.7;
  color:rgba(244,235,217,.5); text-transform:uppercase;
}
@media (max-width:900px){
  .fig-row.stack{ position:static; }
}