/* Hallmark · macrostructure: Split Studio (home) · genre: editorial · tone: industrial, technical · anchor hue: 150 (SBM green)
 * theme: custom (vibe: "graphite datasheet, SBM green, recycling plant" · paper oklch(97.5% 0.006 140) · accent oklch(50% 0.13 150) green
 *   · Bricolage Grotesque + IBM Plex Sans, JetBrains Mono outlier for spec data only · axes: light / display-heavy sans / chromatic-other green)
 * nav: N12 banner + docked bar · footer: Ft1 mast-headed · enrichment: real SBM photography, no illustration
 * audit fixes (2026-10-17): hanging stage heads → stacked; side-stripe cards → hairline + accent square; AI nav → N12;
 *   eyebrows capped at 1 per page; scroll-reveal on every section → one opening entrance; raw colours → tokens; roadmap cards → index list
 * contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 */
@import url("../tokens.css");


*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 var(--s-4); max-width: 65ch; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: var(--step-4); letter-spacing: -0.03em; }
h3 { font-size: var(--step-2); line-height: 1.15; }
h4 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.01em; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: var(--color-paper); padding: var(--s-3) var(--s-4); z-index: 50; }
.skip:focus { left: var(--s-4); top: var(--s-4); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ── data labels (mono role: technical data + stage numbers) ── */
.label {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.label::before {
  content: ""; width: 0.6rem; height: 0.6rem; background: var(--color-signal);
  box-shadow: inset 0 0 0 1px var(--color-signal-edge);
}
.num { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--step-0);
  white-space: nowrap;
  padding: var(--s-3) var(--s-5); min-height: var(--control-h); border-radius: var(--radius);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn-primary { background: var(--color-accent); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-accent-ink); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.btn-ghost:hover { background: var(--color-ink); color: var(--color-paper); }
.on-deep .btn-ghost { border-color: var(--color-on-deep); color: var(--color-on-deep); }
.on-deep .btn-ghost:hover { background: var(--color-on-deep); color: var(--color-deep); }
.btn .arrow { transition: transform 160ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.link {
  color: var(--color-accent-ink); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.link:hover { color: var(--color-ink); }

/* ── nav ── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklch, var(--color-paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--color-rule);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 4.75rem; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-right: auto; }
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav a:not(.btn) {
  text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--color-muted); white-space: nowrap;
  padding-block: var(--s-2); border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--color-ink); }
.nav a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.nav .btn { padding: var(--s-2) var(--s-4); min-height: 2.75rem; font-size: 0.92rem; }
.menu-btn {
  display: none; background: none; border: 1.5px solid var(--color-ink); border-radius: var(--radius);
  font: 600 0.9rem var(--font-body); color: var(--color-ink); padding: var(--s-2) var(--s-3); min-height: 2.75rem; cursor: pointer;
}
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-paper); border-bottom: 1px solid var(--color-rule);
    padding: var(--s-2) var(--gutter) var(--s-5); display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding-block: var(--s-4); border-bottom: 1px solid var(--color-rule); font-size: 1.05rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--color-rule); color: var(--color-accent-ink); }
  .nav .btn { margin-top: var(--s-5); justify-content: center; padding: var(--s-3) var(--s-5); font-size: 1rem; }
}

/* ── sections ── */
section { padding-block: var(--s-9); }
.section-tight { padding-block: var(--s-8); }
.on-deep { background: var(--color-deep); color: var(--color-on-deep); }
.on-deep .label { color: var(--color-on-deep-muted); }
.on-deep p { color: var(--color-on-deep-muted); }
.on-deep .link { color: var(--color-accent-on-deep); }
.on-deep .link:hover { color: var(--color-on-deep); }
.band { background: var(--color-paper-2); }

.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6) var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.section-head .label { margin-bottom: var(--s-4); }
.section-head p { font-size: var(--step-1); line-height: 1.5; color: var(--color-muted); }
.on-deep .section-head p { color: var(--color-on-deep-muted); }
@media (max-width: 820px) { .section-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s-7); } }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--color-muted); }

/* ── hero ── */
.hero { padding-block: var(--s-7) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
.hero h1 { margin-block: var(--s-5) var(--s-6); }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero .lede { margin-bottom: var(--s-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-figure { margin: 0; position: relative; }
.hero-figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: var(--radius); }
.hero-figure figcaption {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  background: var(--color-deep); color: var(--color-on-deep);
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--s-2) var(--s-3); border-radius: 2px;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero-figure img { aspect-ratio: 16 / 10; }
}

/* spec strip — the datasheet row */
.specs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-rule);
  margin-top: var(--s-8);
}
.spec { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-right: 1px solid var(--color-rule); }
.spec + .spec { padding-left: var(--s-5); }
.spec:last-child { border-right: 0; }
.spec dt { font-family: var(--font-data); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-neutral); margin-bottom: var(--s-2); }
.spec dd { margin: 0; }
.spec .big { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.03em; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.spec .small { display: block; margin-top: var(--s-2); color: var(--color-muted); font-size: 0.92rem; line-height: 1.45; }
@media (max-width: 900px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { padding: var(--s-5) var(--s-4) var(--s-5) 0; }
  .spec:nth-child(2n) { border-right: 0; padding-left: var(--s-4); }
  .spec:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .spec:nth-child(3) { padding-left: 0; }
}
@media (max-width: 440px) {
  .specs { grid-template-columns: minmax(0, 1fr); }
  .spec, .spec + .spec, .spec:nth-child(2n), .spec:nth-child(3) { padding: var(--s-4) 0; border-right: 0; }
  .spec + .spec { border-top: 1px solid var(--color-rule); }
}

/* ── stages (narrative workflow) ── */
.stage { padding-block: var(--s-9); }
.on-deep.stage { border-top-color: var(--color-accent-on-deep); }
.stage-head { margin-bottom: var(--s-8); max-width: 52rem; }
.stage-num {
  font-family: var(--font-body); font-weight: 500; font-size: var(--step-1); color: var(--color-accent);
  font-variant-numeric: tabular-nums; padding-top: 0.4em;
}
.on-deep .stage-num { color: var(--color-accent-on-deep); }
.stage-num span { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral); margin-top: var(--s-1); }
.on-deep .stage-num span { color: var(--color-on-deep-muted); }
.stage-head h2 { margin-bottom: var(--s-5); }
@media (max-width: 820px) { .stage-head { margin-bottom: var(--s-7); } }

/* problem list — numbered facts with hairlines */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); }
.facts li { padding: var(--s-5) 0; border-top: 1px solid var(--color-rule); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); }
.facts .num { color: var(--color-neutral); font-size: 0.85rem; padding-top: 0.2em; }
.facts h4 { margin-bottom: var(--s-2); }
.facts p { color: var(--color-muted); font-size: 0.98rem; }
.facts li.highlight h4 { color: var(--color-accent-ink); }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); } }

.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.split figure { margin: 0; }
.split figure img { width: 100%; border-radius: var(--radius); object-fit: cover; }
.split figcaption, .fig-cap { font-size: 0.85rem; color: var(--color-neutral); margin-top: var(--s-3); line-height: 1.45; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* ── feedstock / outputs ── */
.materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.material { border-top: 2px solid var(--color-ink); padding-top: var(--s-4); }
.material .swatch { aspect-ratio: 4 / 3; background: var(--color-paper-3); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; margin-bottom: var(--s-4); }
.material .swatch img { width: 78%; height: 78%; object-fit: contain; }
.material .swatch.photo img { width: 100%; height: 100%; object-fit: cover; }
.material h4 { margin-bottom: var(--s-2); }
.material p { font-size: 0.95rem; color: var(--color-muted); }
@media (max-width: 760px) { .materials { grid-template-columns: minmax(0, 1fr); } .material .swatch { aspect-ratio: 16 / 9; } }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding: 0; list-style: none; }
.chips li { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: var(--s-1) var(--s-2); border: 1px solid var(--color-rule); border-radius: 2px; color: var(--color-muted); background: var(--color-paper); }
.chips li.on { border-color: var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent-soft); }

/* ── benefit ledger ── */
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--color-ink); }
.ledger > div { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-right: 1px solid var(--color-rule); }
.ledger > div + div { padding-left: var(--s-5); }
.ledger > div:last-child { border-right: 0; }
.ledger h4 { margin-bottom: var(--s-4); }
.ledger ul { margin: 0; padding: 0; list-style: none; }
.ledger li { padding: var(--s-2) 0; border-top: 1px solid var(--color-rule); font-size: 0.95rem; color: var(--color-muted); }
.ledger li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 980px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div:nth-child(2n) { border-right: 0; }
  .ledger > div:nth-child(3) { padding-left: 0; }
  .ledger > div:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
}
@media (max-width: 560px) {
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger > div, .ledger > div + div, .ledger > div:nth-child(3) { padding: var(--s-5) 0; border-right: 0; }
  .ledger > div + div { border-top: 1px solid var(--color-rule); }
}

/* ── staged approach ── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: var(--s-6); border-top: 1px solid var(--color-deep-rule); }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; top: calc(-0.8rem); left: 0;
  font-family: var(--font-body); font-size: 0.8rem; background: var(--color-deep); color: var(--color-accent-on-deep); padding-right: var(--s-3);
}
.band .steps li, .steps.light li { border-top-color: var(--color-rule); }
.band .steps li::before { background: var(--color-paper-2); color: var(--color-accent-ink); }
.steps.light li::before { background: var(--color-paper); color: var(--color-accent-ink); }
.steps h4 { margin-bottom: var(--s-2); }
.steps p { font-size: 0.95rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ── pipeline (future / pilot) ── */
.tag {
  display: inline-block; font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--s-1) var(--s-2); border-radius: 2px; font-weight: 600;
}
.tag.now { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.tag.pilot { background: var(--color-pilot-soft); color: var(--color-pilot); }
.tag.future { background: var(--color-paper-3); color: var(--color-muted); }

.pipeline { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.pipe { padding: var(--s-5); border: 1px dashed var(--color-neutral); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--s-3); }
.pipe.now { border: 2px solid var(--color-accent); background: var(--color-paper); }
.pipe h4 { margin-top: var(--s-2); }
.pipe p { font-size: 0.95rem; color: var(--color-muted); }
.pipe a { margin-top: auto; }
@media (max-width: 980px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pipeline { grid-template-columns: minmax(0, 1fr); } }

/* ── CTA ── */
.cta { background: var(--color-deep); color: var(--color-on-deep); padding-block: var(--s-9); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
.cta h2 { margin-block: var(--s-4) var(--s-5); }
.cta p { color: var(--color-on-deep-muted); }
.cta-side { border-left: 1px solid var(--color-deep-rule); padding-left: var(--s-6); }
.cta-side ul { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.cta-side li { padding: var(--s-2) 0; border-bottom: 1px solid var(--color-deep-rule); color: var(--color-on-deep-muted); font-size: 0.95rem; display: flex; gap: var(--s-3); }
.cta-side li .num { color: var(--color-accent-on-deep); font-size: 0.8rem; padding-top: 0.15em; }
.cta-side .note { font-size: 0.85rem; margin-top: var(--s-4); }
@media (max-width: 900px) { .cta-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } .cta-side { border-left: 0; padding-left: 0; } }

/* ── page heroes (inner pages) ── */
.page-hero { padding-block: var(--s-8) var(--s-8); border-bottom: 1px solid var(--color-rule); }
.page-hero h1 { font-size: var(--step-4); margin-block: var(--s-5) var(--s-5); max-width: 18ch; }
.page-hero .lede { max-width: 60ch; }
.page-hero.on-deep { border-bottom: 0; }
.page-hero.on-deep .lede { color: var(--color-on-deep-muted); }

.statement {
  border: 1px solid var(--color-accent); border-radius: var(--radius); padding: var(--s-4) var(--s-5); background: var(--color-accent-soft);
  font-size: var(--step-0); max-width: none;
}
.statement p { max-width: 70ch; color: var(--color-ink); }
.statement strong { color: var(--color-accent-ink); }

/* process flow strip */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; }
.flow li { padding: var(--s-5); border-right: 1px solid var(--color-rule); position: relative; background: var(--color-paper); }
.flow li:last-child { border-right: 0; background: var(--color-accent-soft); }
.flow .num { font-size: 0.78rem; color: var(--color-accent-ink); display: block; margin-bottom: var(--s-3); }
.flow h4 { margin-bottom: var(--s-2); }
.flow p { font-size: 0.93rem; color: var(--color-muted); }
.flow li:not(:last-child)::after {
  content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; background: var(--color-paper);
  border-top: 1px solid var(--color-rule); border-right: 1px solid var(--color-rule); transform: translateY(-50%) rotate(45deg); z-index: 1;
}
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .flow li:last-child { border-bottom: 0; }
  .flow li:not(:last-child)::after { right: auto; left: var(--s-5); top: auto; bottom: -7px; transform: rotate(135deg); }
}

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.spec-table th, .spec-table td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-top: 1px solid var(--color-rule); vertical-align: top; }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 2px solid var(--color-ink); }
.spec-table th { font-family: var(--font-data); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-neutral); width: 34%; padding-top: calc(var(--s-4) + var(--s-1)); }
.spec-table td { font-variant-numeric: tabular-nums; }
.spec-table td strong { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -0.01em; }
@media (max-width: 560px) {
  .spec-table th, .spec-table td { display: block; width: 100%; padding-right: 0; }
  .spec-table td { border-top: 0; padding-top: 0; }
  .spec-table tr:first-child td { border-top: 0; }
}

/* deployment options */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.option { padding: var(--s-6) var(--s-5) var(--s-5); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius); position: relative; }
.option .diagram { height: 4.5rem; margin-bottom: var(--s-5); display: flex; align-items: flex-end; gap: var(--s-2); }
.option .diagram svg { height: 100%; width: auto; }
.option h3 { margin-bottom: var(--s-3); }
.option p { color: var(--color-muted); font-size: 0.97rem; }
@media (max-width: 860px) { .options { grid-template-columns: minmax(0, 1fr); } }

/* two-col lists */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
.check { list-style: none; margin: 0; padding: 0; }
.check li { padding: var(--s-3) 0 var(--s-3) 1.75rem; border-top: 1px solid var(--color-rule); position: relative; }
.check li::before { content: ""; position: absolute; left: 0.1rem; top: 1.05rem; width: 0.7rem; height: 0.35rem; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg); }
.check.dash li::before { width: 0.7rem; height: 0; border-left: 0; border-bottom: 2px solid var(--color-neutral); transform: none; top: 1.3rem; }
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* pilot zone — visually separated from commercial content */
.pilot-zone { background: var(--color-pilot-soft); border-top: 1px dashed var(--color-pilot); border-bottom: 1px dashed var(--color-pilot); }
.pilot-zone .label::before { background: var(--color-pilot); box-shadow: none; }
.pilot-zone .label { color: var(--color-pilot); }
.pilot-banner { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); border: 1px solid var(--color-pilot); border-radius: var(--radius); background: var(--color-paper); margin-bottom: var(--s-8); }
.pilot-banner p { margin: 0; font-size: 0.97rem; }
.chain { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.chain li { font-size: 0.92rem; font-weight: 500; padding: var(--s-2) var(--s-3); background: var(--color-paper); border: 1px solid var(--color-pilot-rule); border-radius: 2px; white-space: nowrap; }
.chain li.sep { background: none; border: 0; padding: 0; color: var(--color-pilot); }
.evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.evidence figure { margin: 0; background: var(--color-paper); border: 1px solid var(--color-pilot-rule); border-radius: var(--radius); padding: var(--s-4); }
.evidence img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-paper); }
.evidence figcaption { font-size: 0.85rem; color: var(--color-muted); margin-top: var(--s-3); line-height: 1.45; }
.evidence figcaption strong { display: block; color: var(--color-ink); margin-bottom: var(--s-1); }
@media (max-width: 900px) { .evidence { grid-template-columns: minmax(0, 1fr); } }

/* team / about */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--color-ink); }
.pillars > div { padding: var(--s-6) var(--s-6) var(--s-6) 0; border-right: 1px solid var(--color-rule); }
.pillars > div + div { padding-left: var(--s-6); }
.pillars > div:last-child { border-right: 0; }
.pillars .num { color: var(--color-accent-ink); font-size: 0.8rem; display: block; margin-bottom: var(--s-4); }
.pillars h3 { margin-bottom: var(--s-3); }
.pillars p { color: var(--color-muted); font-size: 0.98rem; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars > div, .pillars > div + div { padding: var(--s-6) 0; border-right: 0; }
  .pillars > div + div { border-top: 1px solid var(--color-rule); }
}

/* ESS */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.apps > div { border-top: 2px solid var(--color-ink); padding-top: var(--s-4); }
.apps h4 { margin-bottom: var(--s-3); }
@media (max-width: 760px) { .apps { grid-template-columns: minmax(0, 1fr); } }
.qa { border-top: 2px solid var(--color-ink); }
.qa details { border-bottom: 1px solid var(--color-rule); }
.qa summary {
  list-style: none; cursor: pointer; padding: var(--s-5) 2.5rem var(--s-5) 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: 1.4rem; color: var(--color-accent); }
.qa details[open] summary::after { content: "−"; }
.qa details p { padding-bottom: var(--s-5); color: var(--color-muted); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: var(--s-2); }
.field label .opt { font-weight: 400; color: var(--color-neutral); font-size: 0.85rem; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem var(--font-body); color: var(--color-ink); background: var(--color-paper);
  border: 1px solid var(--color-neutral); border-radius: var(--radius); padding: var(--s-3); min-height: var(--control-h); outline: 2px solid transparent; outline-offset: 1px;
  transition: border-color 140ms var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-neutral); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field .err { color: var(--color-error-ink); font-size: 0.85rem; margin-top: var(--s-1); min-height: 1.2em; }
.field .hint { color: var(--color-neutral); font-size: 0.85rem; margin-top: var(--s-1); }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-weight: 600; font-size: 0.92rem; margin-bottom: var(--s-2); padding: 0; }
.radios { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.radios label { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 500; font-size: 0.92rem; padding: var(--s-2) var(--s-3); min-height: 2.75rem; border: 1px solid var(--color-neutral); border-radius: var(--radius); cursor: pointer; margin: 0; background: var(--color-paper); }
.radios input { accent-color: var(--color-accent); margin: 0; }
.radios label:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.form-status { grid-column: 1 / -1; font-size: 0.95rem; padding: var(--s-4); border-radius: var(--radius); display: none; }
.form-status.show { display: block; background: var(--color-accent-soft); border: 1px solid var(--color-accent); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.form-actions small { color: var(--color-neutral); }
@media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); } }
.aside-card { background: var(--color-paper-2); padding: var(--s-6); border-radius: var(--radius); border: 1px solid var(--color-rule); }
.aside-card h3::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; background: var(--color-accent); margin-right: 0.45em; vertical-align: 0.12em; }
.aside-card h3 { margin-bottom: var(--s-4); }
.aside-card ol { margin: 0 0 var(--s-6); padding: 0; list-style: none; counter-reset: n; }
.aside-card ol li { counter-increment: n; padding: var(--s-3) 0 var(--s-3) 2.25rem; border-top: 1px solid var(--color-rule); position: relative; font-size: 0.97rem; }
.aside-card ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: var(--s-3); font-family: var(--font-body); font-size: 0.8rem; color: var(--color-accent-ink); padding-top: 0.15em; }
.aside-card ol li strong { display: block; }
.aside-card ol li span { color: var(--color-muted); }

/* ── footer ── */
.site-foot { background: var(--color-deep); color: var(--color-on-deep); padding-block: var(--s-8) var(--s-6); border-top: 1px solid var(--color-deep-rule); }
.foot-mast { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: end; padding-bottom: var(--s-7); border-bottom: 1px solid var(--color-deep-rule); }
.foot-mast .word { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); letter-spacing: -0.04em; line-height: 0.95; }
.foot-mast p { color: var(--color-on-deep-muted); margin-top: var(--s-4); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: flex-end; }
.foot-links a { color: var(--color-on-deep); text-decoration: none; font-weight: 500; white-space: nowrap; }
.foot-links a:hover { color: var(--color-accent-on-deep); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-5); font-size: 0.85rem; color: var(--color-on-deep-muted); }
.foot-base a { color: var(--color-on-deep); }
@media (max-width: 760px) { .foot-mast { grid-template-columns: minmax(0, 1fr); } .foot-links { justify-content: flex-start; } }


.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.muted { color: var(--color-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section-head h2 { font-size: var(--step-3); margin-top: var(--s-4); }

/* deployment diagrams */
.d-fac { fill: var(--color-paper-3); stroke: var(--color-ink); stroke-width: 1.5; }
.d-line { fill: var(--color-accent); }
.d-road { stroke: var(--color-neutral); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.d-ground { stroke: var(--color-rule); stroke-width: 1.5; }
.d-text { font-family: var(--font-body); font-size: 9px; fill: var(--color-muted); letter-spacing: 0.04em; }

/* layout modifiers */
.h-sub { font-size: var(--step-3); }
.facts.one { grid-template-columns: minmax(0, 1fr); }
.materials.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.materials.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .materials.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .materials.two, .materials.four { grid-template-columns: minmax(0, 1fr); } }
.steps.two { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
@media (max-width: 520px) { .steps.two { grid-template-columns: minmax(0, 1fr); } }
.ledger.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger.three > div:nth-child(3) { padding-left: var(--s-5); border-top: 0; }
.ledger p { font-size: 0.97rem; }
@media (max-width: 860px) {
  .ledger.three { grid-template-columns: minmax(0, 1fr); }
  .ledger.three > div, .ledger.three > div + div, .ledger.three > div:nth-child(3) { padding: var(--s-5) 0; border-right: 0; }
  .ledger.three > div + div { border-top: 1px solid var(--color-rule); }
}
.flow.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flow.five h4 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
@media (max-width: 900px) { .flow.five { grid-template-columns: minmax(0, 1fr); } }
.page-hero figure { margin: 0; }
.page-hero figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.page-hero .split { align-items: center; }
.cta-side img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.lede-deep { color: var(--color-on-deep-muted); }
.small-note { font-size: 0.92rem; }
.stage.first { margin-top: var(--s-9); }
.facts li.wide { grid-column: 1 / -1; }
figure.cta-side { margin: 0; }
.radios label { white-space: nowrap; }

/* brand logo */
.brand img { height: 3.3rem; width: auto; }
@media (max-width: 900px) { .brand img { height: 2.8rem; } }
.foot-logo { display: block; width: min(100%, 22rem); height: auto; }

/* round 2 — Jingli feedback */
.geo { margin-top: var(--s-5); font-size: 0.95rem; color: var(--color-muted); max-width: none; }
.callout { border: 1px solid var(--color-rule); padding: var(--s-6); background: var(--color-paper); border-radius: var(--radius); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4) var(--s-8); align-items: start; }
.callout h3::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; background: var(--color-accent); margin-right: 0.45em; vertical-align: 0.12em; }
@media (max-width: 760px) { .callout { grid-template-columns: minmax(0, 1fr); } }
.callout h3 { margin: 0; }
.callout p { color: var(--color-muted); font-size: var(--step-1); line-height: 1.5; }
.feed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.feed img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--color-paper-3); }
@media (max-width: 760px) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feed + .fig-cap { margin-top: var(--s-4); }
.ledger.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ledger.two > div:nth-child(2n) { border-right: 0; }
.ledger.two > div:nth-child(3) { padding-left: 0; }
.ledger.two > div:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
@media (max-width: 560px) {
  .ledger.two { grid-template-columns: minmax(0, 1fr); }
  .ledger.two > div, .ledger.two > div + div, .ledger.two > div:nth-child(3) { padding: var(--s-5) 0; border-right: 0; }
  .ledger.two > div + div { border-top: 1px solid var(--color-rule); }
}
.options.stack { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-content: start; }
.options.stack .option { padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: var(--s-5); }
.options.stack .option .diagram { height: 3rem; margin: 0; flex: none; }
.options.stack .option h3 { font-size: var(--step-1); margin: 0; }

/* ── N12 banner (region line) above the docked nav — scrolls away, dismissible ── */
.banner { background: var(--color-deep); color: var(--color-on-deep); font-size: 0.88rem; }
.banner .wrap { display: flex; align-items: center; gap: var(--s-4); min-height: var(--banner-h); padding-block: var(--s-2); }
.banner p { margin: 0; max-width: none; flex: 1; color: var(--color-on-deep-muted); }
.banner a { color: var(--color-accent-on-deep); font-weight: 600; white-space: nowrap; margin-left: var(--s-2); }
.banner a:hover { color: var(--color-on-deep); }
.banner-x { flex: none; width: 2.75rem; height: 2.75rem; margin-right: calc(var(--s-3) * -1); background: none; border: 0; color: var(--color-on-deep-muted); font: 500 1.25rem/1 var(--font-body); cursor: pointer; border-radius: var(--radius); }
.banner-x:hover { color: var(--color-on-deep); background: var(--color-deep-2); }
.banner[hidden] { display: none; }

/* ── Split Studio: every block a diptych, direction alternates ── */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7) var(--s-9); align-items: start; }
.duo-head h2 { margin-bottom: var(--s-5); }
.duo.rev .duo-head { grid-column: 2; grid-row: 1; }
.duo.rev .duo-body { grid-column: 1; grid-row: 1; }
@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .duo.rev .duo-head, .duo.rev .duo-body { grid-column: auto; grid-row: auto; }
}
.duo .facts { grid-template-columns: minmax(0, 1fr); }
.steps.v { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
.steps.v li { padding-top: var(--s-5); }

/* ── roadmap as an index list, not a card row ── */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-ink); }
.index-list li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: var(--s-2) var(--s-6); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--color-rule); }
.index-list h4 { margin-bottom: var(--s-1); }
.index-list p { color: var(--color-muted); font-size: 0.97rem; }
.index-list li.now h4 { color: var(--color-accent-ink); }
.index-list .link { white-space: nowrap; }
@media (max-width: 700px) { .index-list li { grid-template-columns: minmax(0, 1fr); } }

/* ── About principles as rows ── */
.pillars.rows { grid-template-columns: minmax(0, 1fr); }
.pillars.rows > div, .pillars.rows > div + div { display: grid; grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-2) var(--s-6); padding: var(--s-6) 0; border-right: 0; border-bottom: 1px solid var(--color-rule); }
.pillars.rows .num { margin: 0; padding-top: 0.5em; }
@media (max-width: 760px) { .pillars.rows > div, .pillars.rows > div + div { grid-template-columns: minmax(0, 1fr); } }

/* ── varied section rhythm ── */
.pad-l { padding-block: var(--s-10); }
.pad-s { padding-block: var(--s-7); }

/* ── one orchestrated entrance: the opening statement only ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-grid > div:first-child > *, .page-hero .wrap > *, .page-hero .split > div:first-child > * { animation: rise 640ms var(--ease-out) both; }
  .hero-grid > div:first-child > :nth-child(2), .page-hero .wrap > :nth-child(2), .page-hero .split > div:first-child > :nth-child(2) { animation-delay: 70ms; }
  .hero-grid > div:first-child > :nth-child(3), .page-hero .wrap > :nth-child(3), .page-hero .split > div:first-child > :nth-child(3) { animation-delay: 140ms; }
  .hero-grid > div:first-child > :nth-child(n+4), .page-hero .wrap > :nth-child(n+4), .page-hero .split > div:first-child > :nth-child(n+4) { animation-delay: 210ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.first-after-hero { margin-top: var(--s-6); }

/* ── full state coverage ── */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; background: var(--color-paper-2); }
.link:focus-visible, .nav a:focus-visible, .foot-links a:focus-visible, .banner a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.label { font-weight: 600; letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* gate 44: home hero fits a 1280×800 fold — 41-char headline steps down one rung, long lede reads smaller */
.hero .hero-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-7); align-items: center; }
.hero h1 { font-size: var(--step-4); margin-block: var(--s-4) var(--s-5); }
.hero .lede { font-size: var(--step-0); line-height: 1.55; max-width: 62ch; }
.hero-figure img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .hero .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.index-list .tag { justify-self: start; }

/* ── phone polish ── */
.b-short { display: none; }
@media (max-width: 640px) {
  .b-long, .hide-s { display: none; }
  .b-short { display: inline; }
  .banner { font-size: 0.8rem; }
  .banner .wrap { gap: var(--s-2); padding-block: var(--s-1); }
  .banner p { line-height: 1.35; }
  .banner a { display: none; }

  .site-head .wrap { min-height: 3.75rem; }
  .brand img { height: 2.4rem; }

  section, .stage, .cta { padding-block: var(--s-8); }
  .pad-l { padding-block: var(--s-8); }
  .pad-s, .section-tight { padding-block: var(--s-7); }
  .first-after-hero { margin-top: var(--s-5); }
  .page-hero { padding-block: var(--s-7); }
  .section-head, .stage-head { margin-bottom: var(--s-6); }
  .duo { gap: var(--s-5); }

  .hero { padding-top: var(--s-6); }
  .hero h1 { margin-block: var(--s-3) var(--s-4); }
  .hero .lede { font-size: 0.98rem; }
  .hero-grid { gap: var(--s-6); }
  .hero-figure img { aspect-ratio: 3 / 2; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-6); }
  .spec, .spec + .spec, .spec:nth-child(2n), .spec:nth-child(3) { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-top: 0; }
  .spec:nth-child(2n) { padding-left: var(--s-3); padding-right: 0; border-right: 0; }
  .spec:nth-child(odd) { border-right: 1px solid var(--color-rule); }
  .spec:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .spec .big { font-size: var(--step-2); }
  .spec .small { font-size: 0.82rem; }

  .facts li { padding: var(--s-4) 0; grid-template-columns: 2rem minmax(0, 1fr); }
  .steps.v { row-gap: var(--s-5); }
  .index-list li { gap: var(--s-2); padding: var(--s-4) 0; }
  .callout { padding: var(--s-5); }
  .callout p { font-size: var(--step-0); }

  .foot-mast { gap: var(--s-6); padding-bottom: var(--s-6); }
  .foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); }
  .foot-links a { padding-block: var(--s-1); }
  .foot-logo { width: min(100%, 17rem); }
}
@media (max-width: 360px) {
  .specs { grid-template-columns: minmax(0, 1fr); }
  .spec, .spec + .spec, .spec:nth-child(2n), .spec:nth-child(3) { padding: var(--s-4) 0; border-right: 0; }
  .spec + .spec { border-top: 1px solid var(--color-rule); }
}
@media (max-width: 640px) {
  .pilot-banner { flex-direction: column; gap: var(--s-3); padding: var(--s-4); margin-bottom: var(--s-6); }
  .chain { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: var(--s-6); }
  .chain li { white-space: normal; }
  .chain li.sep { text-align: center; transform: rotate(90deg); line-height: 1; padding: var(--s-1) 0; }
  .ledger.two > div h4 { margin-bottom: var(--s-3); }
  .ledger.two > div, .ledger.two > div + div, .ledger.two > div:nth-child(3) { padding: var(--s-4) 0; }
}
@media (max-width: 640px) {
  .materials, .materials.four, .materials.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .materials:not(.four):not(.two) > .material:first-child { grid-column: 1 / -1; }
  .material { padding-top: var(--s-3); }
  .material .swatch, .material .swatch.photo { aspect-ratio: 4 / 3; margin-bottom: var(--s-3); }
  .materials:not(.four):not(.two) > .material:first-child .swatch { aspect-ratio: 16 / 9; }
  .material h4 { font-size: var(--step-0); }
  .material p { font-size: 0.9rem; }
}
@media (max-width: 640px) {
  .flow li { padding: var(--s-4); }
  .flow.five li { display: flex; align-items: baseline; gap: var(--s-3); }
  .flow.five .num { margin: 0; }
}
.form-actions small strong { color: var(--color-ink); font-weight: 600; }
@media (max-width: 640px) {
  .radios { flex-direction: column; gap: var(--s-2); }
  .radios label { width: 100%; }
  .form { gap: var(--s-4); }
  .form-actions { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .form-actions .btn { justify-content: center; }
  .aside-card { padding: var(--s-5); }
  .contact-grid { gap: var(--s-7); }
}
.wide-fig { margin: 0 0 var(--s-8); }
.wide-fig img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 640px) { .wide-fig { margin-bottom: var(--s-6); } .wide-fig img { aspect-ratio: 16 / 10; } }