/* StratoData website v20, "the census".
   Navy owns the page head and every close; off-white is for reading.
   Tokens come from colors_and_type.css (--sd-*). No new colors. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
p { margin: 0 0 var(--sd-s-4); }
ul, ol { margin: 0 0 var(--sd-s-4); padding-left: 1.2em; }
li { margin-bottom: var(--sd-s-2); line-height: 1.55; }
h1, h2, h3 { color: inherit; text-wrap: balance; }
h2 { margin-top: var(--sd-s-8); }
h3 { margin-top: var(--sd-s-6); }

:root {
  --on: var(--sd-fg-on-dark);
  --on-2: var(--sd-fg-on-dark-2);
  --on-3: rgba(244,241,234,0.62); /* v23: 0.48 failed AA for small text on navy (4.4:1); 0.62 is 6.3:1 */
  --rule-dark: rgba(244,241,234,0.14);
  --gutter: clamp(16px, 4vw, 48px);
  --wide: 1320px;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 68ch; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--sd-off-white); color: var(--sd-navy); padding: 10px 14px; z-index: 100; border-radius: var(--sd-r-2); }
.skip-link:focus { left: 16px; top: 16px; }

/* draft marks (never present in a release build) */
.draft-banner { background: var(--sd-amber); color: var(--sd-off-white); font-family: var(--sd-font-mono); font-size: 0.72rem; letter-spacing: 0.03em; padding: 6px 0; }
.pending { font-family: var(--sd-font-mono); font-size: 0.78rem; font-weight: 400; letter-spacing: 0; color: var(--sd-amber); background: var(--sd-amber-soft); border: 1px dashed rgba(180,83,9,0.5); border-radius: var(--sd-r-1); padding: 1px 5px; white-space: normal; display: inline-block; line-height: 1.4; vertical-align: middle; }
mark.flag-restate { background: var(--sd-amber-soft); color: var(--sd-navy); border-bottom: 1px dashed var(--sd-amber); padding: 0 2px; }

/* ---------- navigation ---------- */
.site-nav { position: absolute; inset: 0 0 auto 0; z-index: 40; color: var(--on); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sd-s-6); height: 84px; }
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--on); }
.wordmark svg { width: 17px; height: 20px; display: block; }
.wordmark span { font-family: var(--sd-font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.3px; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a { font-family: var(--sd-font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--on); border-bottom-color: var(--on-3); }
.nav-links a.cta { color: var(--sd-navy); background: var(--sd-off-white); padding: 11px 18px; border-radius: var(--sd-r-2); border: 0; letter-spacing: 0.14em; }
.nav-links a.cta:hover { background: #fff; color: var(--sd-navy); }
.nav-toggle { display: none; }
@media (max-width: 960px) {
  .nav-toggle { display: block; background: none; border: 1px solid var(--rule-dark); border-radius: var(--sd-r-2); padding: 12px 14px; font: 600 0.75rem/1 var(--sd-font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on); cursor: pointer; }
  .nav-links { display: none; position: absolute; top: 84px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--sd-navy); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); padding: 8px var(--gutter) 20px; }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--rule-dark); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; padding: 15px 0; }
  .nav-links a.cta { margin-top: 16px; text-align: center; }
}

/* ---------- navy page head (every interior page) ---------- */
.head { background: var(--sd-navy); color: var(--on); padding: calc(84px + clamp(56px, 9vw, 120px)) 0 clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.head::after { /* stratification: the census edge, quiet */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background:
  repeating-linear-gradient(to bottom, rgba(244,241,234,0.07) 0 1px, transparent 1px 6px); }
.head .kicker { font-family: var(--sd-font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-3); margin: 0 0 var(--sd-s-5); }
.head .kicker a { color: var(--on-3); text-decoration: none; }
.head .kicker a:hover { color: var(--on); }
.head h1 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; margin: 0; color: var(--on); }
.head .lede { font-family: var(--sd-font-sans); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--on-2); max-width: 54ch; margin: var(--sd-s-6) 0 0; }
.head .byline { font-family: var(--sd-font-mono); font-size: 0.75rem; color: var(--on-3); margin-top: var(--sd-s-6); }
.head .byline span + span::before { content: "  /  "; white-space: pre; }

/* ---------- reading body ---------- */
.body { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 980px) { .cols { grid-template-columns: 1fr; } }
.body h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; }
.body > .wrap > .measure > h2:first-child, article > h2:first-child { margin-top: 0; }
aside.side { position: sticky; top: 32px; font-size: 0.9rem; color: var(--sd-fg-2); border-top: 1px solid var(--sd-navy); padding-top: var(--sd-s-4); }
aside.side h2 { font-family: var(--sd-font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-gray-500); margin: 0 0 var(--sd-s-3); }
aside.side dl { margin: 0; }
aside.side dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); margin-top: var(--sd-s-4); }
aside.side dd { margin: 3px 0 0; color: var(--sd-fg-1); }
aside.side ul { list-style: none; padding: 0; }
aside.side li a { text-decoration: none; }
aside.side li a:hover { text-decoration: underline; }

/* figures */
.figure-block { display: grid; grid-template-columns: auto 1fr; gap: var(--sd-s-6); align-items: end; padding: var(--sd-s-5) 0 var(--sd-s-6); border-bottom: var(--sd-border); }
.figure-block .big { font-family: var(--sd-font-sans); font-weight: 500; font-size: clamp(4rem, 10vw, 7.5rem); line-height: 0.86; letter-spacing: -0.055em; color: var(--sd-navy); }
.figure-block .unit { font-size: 1.05rem; color: var(--sd-fg-2); max-width: 34ch; }
.figure-block .unit b { color: var(--sd-fg-1); font-weight: 600; }
.figure-block .counts { font-family: var(--sd-font-mono); font-size: 0.78rem; color: var(--sd-gray-500); margin-top: var(--sd-s-3); }
@media (max-width: 600px) { .figure-block { grid-template-columns: 1fr; gap: var(--sd-s-3); } }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: var(--sd-s-5) 0; border-top: var(--sd-border); }
.stat { padding: var(--sd-s-5) var(--sd-s-5) var(--sd-s-5) 0; border-bottom: var(--sd-border); }
.stat .v { font-family: var(--sd-font-sans); font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--sd-navy); }
.stat .l { font-size: 0.875rem; color: var(--sd-fg-2); margin-top: 6px; }

/* tables */
.table-wrap { overflow-x: auto; margin: var(--sd-s-5) 0; }
table.sd-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.sd-table th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--sd-navy); vertical-align: bottom; }
table.sd-table td { padding: 10px 14px 10px 0; border-bottom: var(--sd-border); vertical-align: top; }
table.sd-table .n { text-align: right; white-space: nowrap; }
table.sd-table tbody tr:hover td { background: var(--sd-off-white-2); }
.source { font-size: 0.82rem; color: var(--sd-gray-500); }

/* charts */
figure { margin: var(--sd-s-6) 0; }
figcaption { font-size: 0.82rem; color: var(--sd-gray-500); margin-top: var(--sd-s-2); max-width: 68ch; }
figcaption b { color: var(--sd-fg-1); font-weight: 600; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .c-bar { fill: var(--sd-navy); }
svg.chart .c-bar--muted { fill: var(--sd-gray-300); }
svg.chart .c-bar:hover { fill: var(--sd-amber); }
svg.chart .c-grid { stroke: var(--sd-hairline); stroke-width: 1; }
svg.chart .c-axis { stroke: var(--sd-navy); stroke-width: 1; }
svg.chart .c-tick { stroke: var(--sd-gray-400); stroke-width: 1; }
svg.chart .c-ref { stroke: var(--sd-amber); stroke-width: 1; stroke-dasharray: 4 3; }
svg.chart .c-line { fill: none; stroke: var(--sd-navy); stroke-width: 2.25; }
svg.chart .c-line.alt { stroke: var(--sd-gray-400); stroke-width: 1.5; }
svg.chart .c-line--dash { stroke-dasharray: 5 4; }
svg.chart .c-label { font-family: var(--sd-font-mono); font-size: 11px; fill: var(--sd-gray-500); }
svg.chart .c-label--ref { fill: var(--sd-amber); }
svg.chart .c-label--series { fill: var(--sd-navy); font-family: var(--sd-font-sans); font-weight: 600; font-size: 12px; }
svg.chart .c-label--series.alt { fill: var(--sd-gray-500); }
.share-strip { display: block; border-radius: var(--sd-r-1); }
.share-strip .c-share, .swatch { fill: var(--sd-navy); background: var(--sd-navy); }
.share-strip .c-share.m2, .swatch.m2 { fill: var(--sd-gray-400); background: var(--sd-gray-400); }
.share-strip .c-share.m3, .swatch.m3 { fill: var(--sd-gray-200); background: var(--sd-gray-200); }
.share-key { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; margin: var(--sd-s-3) 0 0; font-size: 0.875rem; color: var(--sd-fg-2); }
.share-key b { color: var(--sd-fg-1); font-weight: 600; }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 1px; }

/* lists */
.index-list { list-style: none; padding: 0; margin: var(--sd-s-5) 0; border-top: 1px solid var(--sd-navy); }
.index-list li { border-bottom: var(--sd-border); margin: 0; }
.index-list a { display: grid; grid-template-columns: 1fr auto; gap: var(--sd-s-4); align-items: baseline; padding: var(--sd-s-5) 0; text-decoration: none; color: var(--sd-navy); }
.index-list .t { font-family: var(--sd-font-serif); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -0.01em; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.index-list a:hover .t { transform: translateX(6px); }
.index-list .meta { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-gray-500); }

.rows { margin: var(--sd-s-5) 0; border-top: 1px solid var(--sd-navy); }
.rows > div { display: grid; grid-template-columns: 240px 1fr; gap: var(--sd-s-5); padding: var(--sd-s-5) 0; border-bottom: var(--sd-border); }
.rows .k { font-family: var(--sd-font-serif); font-size: 1.15rem; font-weight: 500; color: var(--sd-navy); line-height: 1.3; }
.rows > div > span:last-child { color: var(--sd-fg-2); }
.rows b { color: var(--sd-fg-1); }
@media (max-width: 680px) { .rows > div { grid-template-columns: 1fr; gap: 6px; } }

.note { border-top: 1px solid var(--sd-navy); padding-top: var(--sd-s-4); color: var(--sd-fg-2); font-size: 0.95rem; margin: var(--sd-s-6) 0; }
blockquote { font-family: var(--sd-font-serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; margin: var(--sd-s-7) 0; padding: 0; color: var(--sd-navy); }
blockquote cite { display: block; font-family: var(--sd-font-sans); font-style: normal; font-size: 0.8rem; color: var(--sd-gray-500); margin-top: var(--sd-s-3); }

/* ---------- home ---------- */
.census { background: var(--sd-navy); color: var(--on); position: relative; min-height: min(100svh, 980px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.census .plot { position: absolute; top: 120px; bottom: 110px; right: var(--gutter); left: 46%; }
.census canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.census .axis { position: absolute; left: 0; right: 0; bottom: -26px; height: 14px; font-family: var(--sd-font-mono); font-size: 0.7rem; color: var(--on-3); }
.census .tip { position: absolute; top: 0; pointer-events: none; font-family: var(--sd-font-mono); font-size: 0.72rem; color: var(--on); background: var(--sd-navy); border: 1px solid var(--rule-dark); padding: 6px 8px; border-radius: var(--sd-r-1); white-space: nowrap; opacity: 0; transition: opacity .15s; }
@media (max-width: 900px) { .census .plot { position: relative; top: auto; bottom: auto; left: auto; right: auto; height: 300px; margin: 0 var(--gutter) 40px; } }
.census-copy { position: relative; z-index: 2; align-self: center; width: 100%; padding-top: 120px; padding-bottom: 56px; }
.census-copy > * { max-width: 40%; }
@media (max-width: 900px) { .census-copy > * { max-width: none; } }
.census h1 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(3rem, 7.4vw, 6rem); line-height: 0.96; letter-spacing: -0.035em; max-width: 9ch; margin: 0; color: var(--on); }
.census .lede { font-size: clamp(1.05rem, 1.45vw, 1.28rem); line-height: 1.5; color: var(--on-2); max-width: 36ch; margin: var(--sd-s-6) 0 0; }
.census .lede b { color: var(--on); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sd-s-7); }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 0.78rem/1 var(--sd-font-sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 22px; border-radius: var(--sd-r-2); text-decoration: none; transition: background .15s, color .15s, border-color .15s; border: 1px solid transparent; }
.btn .arr { transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arr { transform: translateX(4px); }
.btn--light { background: var(--sd-off-white); color: var(--sd-navy); }
.btn--light:hover { background: #fff; }
.btn--line { border-color: var(--on-3); color: var(--on); }
.btn--line:hover { border-color: var(--on); }
.btn--dark { background: var(--sd-navy); color: var(--sd-off-white); }
.btn--dark:hover { background: var(--sd-navy-2); }
.readout { position: relative; z-index: 2; border-top: 1px solid var(--rule-dark); }
.readout .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; font-family: var(--sd-font-mono); font-size: 0.74rem; color: var(--on-3); }
.readout b { color: var(--on); font-weight: 500; }
.readout .key i { display: inline-block; width: 14px; height: 2px; background: var(--on-3); vertical-align: middle; margin: 0 6px 2px 0; }
.readout .key i.ev { width: 5px; height: 5px; border-radius: 1px; background: var(--sd-amber); margin-left: 16px; }

.scale { background: var(--sd-navy); color: var(--on); border-top: 1px solid var(--rule-dark); }
.scale .wrap { display: grid; grid-template-columns: repeat(5, 1fr); }
.scale .cell { padding: clamp(28px, 4vw, 48px) clamp(12px, 2vw, 28px) clamp(32px, 4vw, 56px) 0; border-right: 1px solid var(--rule-dark); }
.scale .cell + .cell { padding-left: clamp(12px, 2vw, 28px); }
.scale .cell:last-child { border-right: 0; }
.scale .v { font-family: var(--sd-font-sans); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -0.045em; line-height: 1; color: var(--on); }
.scale .l { font-size: 0.85rem; line-height: 1.4; color: var(--on-2); margin-top: 12px; max-width: 18ch; }
@media (max-width: 900px) { .scale .wrap { grid-template-columns: 1fr 1fr; } .scale .cell { border-right: 0; border-bottom: 1px solid var(--rule-dark); padding-left: 0 !important; } }

.band { padding: clamp(72px, 10vw, 140px) 0; }
.band--alt { background: var(--sd-off-white-2); }
.band--navy { background: var(--sd-navy); color: var(--on); }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.band-head h2 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; max-width: 14ch; }
.band-head p { color: var(--sd-fg-2); font-size: 1.08rem; max-width: 46ch; margin: 0; }
.band--navy .band-head p { color: var(--on-2); }
@media (max-width: 860px) { .band-head { grid-template-columns: 1fr; } }

/* the hub: four doors */
.doors { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sd-navy); }
.doors li { margin: 0; border-bottom: 1px solid var(--sd-navy); }
.doors a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 48px; gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(24px, 3.4vw, 40px) 0; text-decoration: none; color: var(--sd-navy); position: relative; }
.doors a::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--sd-navy); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.2,.7,.2,1); z-index: 0; }
.doors a > * { position: relative; z-index: 1; transition: color .25s; }
.doors a:hover::before, .doors a:focus-visible::before { transform: scaleY(1); }
.doors a:hover > *, .doors a:focus-visible > * { color: var(--on); }
.doors .t { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing: -0.03em; line-height: 1; }
.doors .d { font-size: 1.02rem; line-height: 1.5; color: var(--sd-fg-2); }
.doors .go { justify-self: end; font-size: 1.5rem; }
@media (max-width: 760px) { .doors a { grid-template-columns: 1fr 32px; } .doors .d { grid-column: 1 / 2; grid-row: 2; } .doors .go { grid-row: 1; grid-column: 2; } }

/* record teaser */
.record-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.record-teaser .big { font-family: var(--sd-font-sans); font-weight: 500; font-size: clamp(6rem, 16vw, 13rem); letter-spacing: -0.06em; line-height: 0.8; color: var(--sd-navy); }
.record-teaser .unit { font-size: 1.1rem; color: var(--sd-fg-2); margin-top: var(--sd-s-5); max-width: 30ch; }
.record-teaser .unit b { color: var(--sd-navy); }
.record-teaser .counts { font-family: var(--sd-font-mono); font-size: 0.78rem; color: var(--sd-gray-500); margin-top: var(--sd-s-3); }
.record-teaser p.claim { font-family: var(--sd-font-serif); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--sd-navy); }
@media (max-width: 860px) { .record-teaser { grid-template-columns: 1fr; } }

/* people */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.people.four { grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 6vw, 80px); }
.person { border-top: 1px solid currentColor; padding-top: var(--sd-s-4); }
.person h3 { font-family: var(--sd-font-serif); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 6px; }
.person .role { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; margin-bottom: var(--sd-s-3); }
.person p { font-size: 0.95rem; opacity: 0.8; }
.person a { font-size: 0.8rem; color: inherit; }
.people.four .person h3 { font-size: 1.3rem; }
@media (max-width: 980px) { .people, .people.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .people, .people.four { grid-template-columns: 1fr; } }

/* ---------- close (every page) ---------- */
.close { background: var(--sd-navy); color: var(--on); padding: clamp(80px, 11vw, 160px) 0; position: relative; overflow: hidden; }
.close::before { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: repeating-linear-gradient(to bottom, rgba(244,241,234,0.045) 0 1px, transparent 1px 7px); pointer-events: none; }
.close .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.close h2 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -0.035em; margin: 0; max-width: 13ch; }
.close p { color: var(--on-2); font-size: 1.05rem; max-width: 40ch; }
.close .mail { display: block; font-family: var(--sd-font-mono); font-size: 0.9rem; color: var(--on-2); margin-top: var(--sd-s-4); }
@media (max-width: 860px) { .close .wrap { grid-template-columns: 1fr; } }

/* footer */
footer.site-footer { background: var(--sd-navy); color: var(--on-2); border-top: 1px solid var(--rule-dark); padding: var(--sd-s-7) 0 var(--sd-s-6); }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sd-s-6); }
.foot .wm { font-family: var(--sd-font-serif); font-weight: 500; font-size: 1.5rem; color: var(--on); letter-spacing: -0.02em; }
.foot .tag { font-size: 0.95rem; color: var(--on-3); margin-top: 6px; }
.foot h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-3); margin: 0 0 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 0 0 9px; font-size: 0.88rem; }
.foot a { color: var(--on-2); text-decoration: none; }
.foot a:hover { color: var(--on); }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--rule-dark); padding-top: var(--sd-s-4); margin-top: var(--sd-s-5); font-size: 0.8rem; color: var(--on-3); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }

/* signup */
.signup { border-top: 1px solid var(--sd-navy); padding-top: var(--sd-s-4); margin: var(--sd-s-6) 0; }
.signup .t { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-gray-500); }
.signup form { display: flex; gap: var(--sd-s-2); flex-wrap: wrap; margin-top: var(--sd-s-3); }
.signup input[type=email] { flex: 1 1 220px; font: inherit; padding: 12px; border: 1px solid #d7d4cb; border-radius: var(--sd-r-2); background: var(--sd-paper); color: var(--sd-navy); }

/* page-load: one authored moment, content visible by default */
@media (prefers-reduced-motion: no-preference) {
  .census h1, .census .lede, .census .actions { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
  .census .lede { animation-delay: .12s; } .census .actions { animation-delay: .22s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

.census .axis span { position: absolute; transform: translateX(-50%); }
.band--navy p, .close p, .person p { color: inherit; }
.band--navy .person p { color: var(--on-2); opacity: 1; }
@media (max-width: 900px) {
  .census { display: flex; flex-direction: column; min-height: 0; }
  .census-copy { order: 1; padding-top: 128px; padding-bottom: 32px; }
  .census .plot { order: 2; height: 280px; margin: 8px var(--gutter) 48px; }
  .census .readout { order: 3; }
  .readout .wrap { flex-direction: column; gap: 6px; }
}

/* v21: the pair */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--sd-navy); border-bottom: 1px solid var(--sd-navy); }
.panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 48px); text-decoration: none; color: var(--sd-navy); position: relative; transition: background .3s, color .3s; }
.panel + .panel { border-left: 1px solid var(--sd-navy); }
.panel:hover { background: var(--sd-navy); color: var(--on); }
.panel .tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.panel .name { font-family: var(--sd-font-sans); font-weight: 500; font-size: clamp(4rem, 9vw, 7.5rem); letter-spacing: -0.06em; line-height: 0.85; }
.panel .what { font-size: 1.05rem; line-height: 1.5; max-width: 40ch; opacity: 0.85; }
.panel .list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.panel .list span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px; padding: 7px 10px; opacity: 0.8; }
.panel .go { margin-top: auto; padding-top: 18px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 820px) { .pair { grid-template-columns: 1fr; } .panel + .panel { border-left: 0; border-top: 1px solid var(--sd-navy); } }

.sample-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.sample-band .sheet { display: block; transform: rotate(-1.2deg); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sample-band .sheet:hover { transform: rotate(0deg) translateY(-4px); }
.sample-band .sheet img { width: 100%; display: block; border: 1px solid var(--sd-hairline); border-radius: 2px; box-shadow: var(--sd-shadow-cover); }
.sample-band h2 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 32px; max-width: 14ch; }
.callouts { list-style: none; padding: 0; margin: 0; counter-reset: c; border-top: 1px solid var(--sd-navy); }
.callouts li { counter-increment: c; position: relative; padding: 18px 0 18px 44px; border-bottom: var(--sd-border); margin: 0; color: var(--sd-fg-2); }
.callouts li::before { content: "0" counter(c); /* numbering for the stacked layout; the pins carry it on wide screens */ position: absolute; left: 0; top: 21px; font-family: var(--sd-font-mono); font-size: 0.78rem; color: var(--sd-gray-500); }
.callouts b { color: var(--sd-navy); font-weight: 600; display: block; }
@media (max-width: 860px) { .sample-band { grid-template-columns: 1fr; } }

.record-teaser.dark .big { color: var(--on); }
.record-teaser.dark .unit { color: var(--on-2); }
.record-teaser.dark .unit b { color: var(--on); }
.record-teaser.dark p.claim { color: var(--on); }

.record-teaser .big mark.flag-restate { background: transparent; color: inherit; border-bottom: 3px dashed var(--sd-amber); }
.record-teaser .unit { margin-top: 28px; }

/* v22: the hero, fleet to one aircraft */
.census .plot { display: flex; flex-direction: column; gap: 14px; }
.plot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.plot-title { margin: 0; font-family: var(--sd-font-sans); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--on); }
.plot-key { margin: 0; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--sd-font-mono); font-size: 0.7rem; color: var(--on-2); }
.plot-key i { display: inline-block; width: 16px; height: 2px; background: var(--on-2); vertical-align: middle; margin: 0 7px 2px 0; }
.plot-key i.ev { width: 7px; height: 7px; background: var(--sd-amber); border-radius: 1px; }
.stage { position: relative; flex: 1; min-height: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .9s ease; }
.census .axis { transition: opacity .6s; }
.dossier { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.is-dossier .dossier { opacity: 1; transform: none; pointer-events: auto; }
.is-dossier .stage canvas { opacity: 0.1; }
.is-dossier .axis { opacity: 0; }
.dossier svg { width: 100%; height: auto; overflow: visible; }
.d-label { margin: 0; font-family: var(--sd-font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--on-3); text-transform: uppercase; }
.d-axis { stroke: var(--on-3); stroke-width: 1; }
.d-tick { stroke: var(--on-3); stroke-width: 1; }
.d-yr, .d-small { font-family: var(--sd-font-mono); font-size: 11px; fill: var(--on-3); }
.d-band.d-old { fill: rgba(244,241,234,0.2); }
.d-band.d-new { fill: rgba(244,241,234,0.85); }
.d-cap { font-family: var(--sd-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--on-2); }
.d-cap--new { fill: var(--on); }
.d-owner { stroke: var(--on-2); stroke-width: 1.5; }
.d-cert { fill: var(--on); }
.d-acc { fill: var(--sd-amber); }
.d-lead { stroke: var(--sd-amber); stroke-width: 1.5; }
.d-acc-t { font-family: var(--sd-font-sans); font-size: 13px; font-weight: 600; fill: var(--on); }
.d-hit { opacity: 0; transition: opacity .6s ease .7s; }
.is-dossier .d-hit { opacity: 1; }
.d-read { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-dark); }
.d-read p { margin: 0; padding: 14px 16px 0 0; font-size: 1rem; line-height: 1.4; color: var(--on-2); }
.d-read p > span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-3); margin-bottom: 6px; }
.d-read p.hit { color: var(--on); padding-left: 16px; border-left: 2px solid var(--sd-amber); opacity: 0; transition: opacity .6s ease 1.3s; }
.is-dossier .d-read p.hit { opacity: 1; }
.d-actions { display: flex; gap: 24px; align-items: center; font-size: 0.85rem; }
.d-actions a { color: var(--on); }
.d-actions .replay { background: none; border: 1px solid var(--rule-dark); color: var(--on-2); border-radius: var(--sd-r-2); padding: 7px 12px; font: 600 0.66rem/1 var(--sd-font-sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.d-actions .replay:hover { color: var(--on); border-color: var(--on-3); }
@media (max-width: 900px) {
  .census .plot { height: auto; }
  .stage { height: 440px; flex: none; }
  .d-read { grid-template-columns: 1fr; }
  .d-read p.hit { border-left: 0; padding-left: 0; border-top: 2px solid var(--sd-amber); margin-top: 12px; }
}

/* v22: three steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: clamp(20px, 3vw, 40px); counter-reset: none; }
.steps li { margin: 0; border-top: 1px solid var(--sd-navy); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; position: relative; color: var(--sd-fg-2); }
.steps li + li::before { content: "\2192"; position: absolute; left: calc(clamp(20px, 3vw, 40px) * -0.5 - 8px); top: -13px; font-size: 1.1rem; color: var(--sd-navy); background: var(--sd-bg); padding: 0 2px; }
.steps .n { font-family: var(--sd-font-mono); font-size: 0.75rem; color: var(--sd-gray-500); }
.steps b { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; color: var(--sd-navy); line-height: 1.05; }
.steps .thumb { display: block; margin-top: 8px; max-width: 280px; transform: rotate(-1deg); transition: transform .3s; }
.steps .thumb:hover { transform: none; }
.steps .thumb img { width: 100%; display: block; border: 1px solid var(--sd-hairline); box-shadow: var(--sd-shadow-cover); border-radius: 2px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .steps li + li::before { display: none; } }

.band--slim { padding: clamp(36px, 5vw, 56px) 0; }
.one-line { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.one-line .kick { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-gray-500); }
.one-line a { font-family: var(--sd-font-serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -0.015em; color: var(--sd-navy); text-decoration: none; }
.one-line a:hover { text-decoration: underline; }
.one-line a.more { margin-left: auto; font-family: var(--sd-font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

.tm { font-size: 0.5em; vertical-align: 0.9em; line-height: 0; margin-left: 0.04em; letter-spacing: 0; font-weight: inherit; }
.panel .name .tm { font-size: 0.22em; vertical-align: 2.6em; }

/* v22.1: view tabs */
.plot-head { row-gap: 10px; }
.views { display: inline-flex; border: 1px solid var(--rule-dark); border-radius: var(--sd-r-2); overflow: hidden; }
.views button { background: none; border: 0; color: var(--on-2); font: 600 0.75rem/1 var(--sd-font-sans); min-height: 36px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; }
.views button + button { border-left: 1px solid var(--rule-dark); }
.views button[aria-pressed="true"] { background: var(--sd-off-white); color: var(--sd-navy); }
.views button:hover:not([aria-pressed="true"]) { color: var(--on); }
.plot-key { flex-basis: 100%; }
.panel .list span.soon { border-style: dashed; opacity: 0.65; }

.scale.scale--3 .wrap { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .scale.scale--3 .wrap { grid-template-columns: 1fr; } }

/* =====================================================================
   v23 (29 Sep 2026). Structure borrowed, never color or font:
   IBM Carbon (4px grid, hairline-and-surface separation, 2px focus),
   WIRED (display serif / reading sans / metadata roles; ruled story rows),
   Coinbase (96px section rhythm, figures in one numeric face, calm display).
   See DESIGN.md. Tokens only; the one non-token alpha is --on-3 above.
   ===================================================================== */

/* focus: visible on navy as well as on paper */
.site-nav :focus-visible, .hero :focus-visible, .head :focus-visible, .close :focus-visible,
footer.site-footer :focus-visible, .band--navy :focus-visible { outline-color: var(--sd-off-white); }
.btn:focus-visible { outline-offset: 3px; }

/* nav: hairline under the bar; underline that draws in (after 21st.dev "Underlined Navigation Menu") */
.site-nav { border-bottom: 1px solid var(--rule-dark); }
.nav-inner { height: 76px; }
.nav-links a:not(.cta) { position: relative; border-bottom: 0; padding: 10px 0; }
.nav-links a:not(.cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--on); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.nav-links a:not(.cta):hover::after, .nav-links a:not(.cta):focus-visible::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a.cta { padding: 12px 18px; }
@media (max-width: 960px) {
  .nav-links { top: 76px; }
  .nav-links a:not(.cta) { padding: 16px 0; }
  .nav-links a:not(.cta)::after { display: none; }
}
.head { padding-top: calc(76px + clamp(56px, 9vw, 120px)); }

/* buttons */
.btn--outline { border-color: var(--sd-navy); color: var(--sd-navy); background: transparent; }
.btn--outline:hover { background: var(--sd-navy); color: var(--sd-off-white); }
.btn:active { transform: translateY(1px); }
.actions--tight { margin-top: 0; }

/* shared section heads: headline over a short line, stacked (no split headers) */
.proof h2, .gap h2, .systems h2, .start h2, .serve h2 { font-family: var(--sd-font-serif); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; color: var(--sd-navy); margin: 0; }
.systems h2, .start h2, .serve h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); max-width: 18ch; }
.sub { font-size: 1.1rem; line-height: 1.5; color: var(--sd-fg-2); max-width: 56ch; margin: 20px 0 0; }

/* ---------- hero ---------- */
.hero { background: var(--sd-navy); color: var(--on); padding-top: 76px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); align-items: center; min-height: min(calc(100svh - 76px - 112px), 720px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 5vw, 72px); }
.hero h1 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(2.8rem, 5.4vw, 5.1rem); line-height: 0.98; letter-spacing: -0.035em; margin: 0; color: var(--on); }
.hero h1 span { white-space: nowrap; display: inline-block; }
.hero .lede { font-size: clamp(1.08rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--on-2); max-width: 34ch; margin: 28px 0 0; }
.hero .actions { margin-top: 40px; }
.hero .plot { position: relative; display: flex; flex-direction: column; gap: 14px; height: clamp(440px, 60vh, 600px); }
.plot .axis { position: absolute; left: 0; right: 0; bottom: -26px; height: 16px; font-family: var(--sd-font-mono); font-size: 0.75rem; color: var(--on-3); transition: opacity .6s; }
.plot .axis span { position: absolute; transform: translateX(-50%); }
.plot .axis::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 5px; background: repeating-linear-gradient(to right, var(--on-3) 0 1px, transparent 1px calc(100% / 19)); opacity: 0.6; } /* horizon ticks, one per year */
.plot > .plot-key { margin: 34px 0 0; flex: none; }
.plot-key { font-size: 0.75rem; color: var(--on-2); }
.plot-title { font-size: 1.05rem; }
.plot .tip { position: absolute; top: 8px; left: 8px; pointer-events: none; font-family: var(--sd-font-mono); font-size: 0.75rem; color: var(--on); background: var(--sd-navy); border: 1px solid var(--rule-dark); padding: 6px 8px; border-radius: var(--sd-r-1); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.plot .scrub { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--on-2); opacity: 0; pointer-events: none; transition: opacity .15s; }
.stage canvas { cursor: crosshair; }
.d-label { font-size: 0.75rem; color: var(--on-2); letter-spacing: 0.04em; }
.d-read p { font-size: 1.02rem; }
.d-actions { margin: 0; font-size: 0.95rem; }
.d-actions a { color: var(--on); display: inline-block; padding: 6px 0; }
.hero-readout { border-top: 1px solid var(--rule-dark); }
.hero-readout dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; }
.hero-readout dl > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 22px 24px 26px 0; }
.hero-readout dl > div + div { border-left: 1px solid var(--rule-dark); padding-left: 24px; }
.hero-readout dd { margin: 0; font-family: var(--sd-font-sans); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; line-height: 1; color: var(--on); }
.hero-readout dt { font-size: 0.85rem; color: var(--on-2); }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero .actions { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
  .hero .lede { animation-delay: .12s; } .hero .actions { animation-delay: .22s; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 48px; padding-top: 48px; }
  .hero .plot { height: 520px; }
  .d-read { grid-template-columns: 1fr; }
  .d-read p.hit { border-left: 0; padding-left: 0; border-top: 2px solid var(--sd-amber); margin-top: 12px; padding-top: 12px; }
}
@media (max-width: 600px) {
  .hero .plot { height: 560px; }
  .hero-readout dl { grid-template-columns: 1fr; }
  .hero-readout dl > div, .hero-readout dl > div + div { border-left: 0; padding: 16px 0; }
  .hero-readout dl > div + div { border-top: 1px solid var(--rule-dark); }
}

/* ---------- proof: the sample brief, annotated ---------- */
.proof { --gap: clamp(40px, 6vw, 96px); padding: clamp(80px, 9vw, 128px) 0; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; }
.proof-doc { position: relative; margin: 0; align-self: start; }
.proof-doc a { display: block; }
.proof-doc img { display: block; width: 100%; height: auto; background: var(--sd-paper); border: 1px solid var(--sd-hairline); border-radius: var(--sd-r-1); box-shadow: var(--sd-shadow-cover); }
.pin { position: absolute; right: -13px; transform: translateY(-50%); font-family: var(--sd-font-mono); font-size: 0.75rem; line-height: 1; color: var(--sd-off-white); background: var(--sd-navy); padding: 5px 6px; border-radius: var(--sd-r-1); }
.proof-copy { display: flex; flex-direction: column; }
.proof h2 { font-size: clamp(2.1rem, 3.6vw, 3.25rem); max-width: 13ch; }
.callouts { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: c; border-top: 1px solid var(--sd-navy); }
.callouts li { counter-increment: c; position: relative; margin: 0; padding: 18px 0 20px 48px; border-bottom: 1px solid var(--sd-hairline); color: var(--sd-fg-2); line-height: 1.5; }
.callouts li::before { content: "0" counter(c); /* numbering for the stacked layout; the pins carry it on wide screens */ position: absolute; left: 0; top: 21px; font-family: var(--sd-font-mono); font-size: 0.8rem; color: var(--sd-gray-500); }
.callouts b { display: block; color: var(--sd-navy); font-weight: 600; font-size: 1.08rem; margin-bottom: 4px; }
.proof .actions { margin-top: 40px; }
@media (min-width: 1200px) {
  .proof-copy { position: relative; }
  .callouts { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; border: 0; pointer-events: none; }
  .callouts li { position: absolute; left: 0; right: 0; top: var(--y); transform: translateY(-31px); border: 0; padding: 20px 0 0 48px; pointer-events: auto; }
  .callouts li::before { top: 22px; }
  .callouts li::after { content: ""; position: absolute; top: 31px; right: 100%; width: calc(var(--gap) - 14px); height: 1px; background: var(--sd-navy); opacity: 0.55; } /* callout rule to the pin */
  .proof .actions { margin-top: auto; }
}
@media (max-width: 1199px) { .pin { right: 8px; } }
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } .proof-copy { order: -1; } }

/* ---------- gap: what the submission leaves out ---------- */
.gap { background: var(--sd-off-white-2); padding: clamp(80px, 9vw, 128px) 0; }
.gap h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 24ch; }
.gap-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); margin-top: 56px; border-top: 2px solid var(--sd-navy); padding-top: 40px; align-items: start; }
.gap-fig .big { margin: 0; font-family: var(--sd-font-sans); font-weight: 500; font-size: clamp(4.2rem, 8.5vw, 7.5rem); letter-spacing: -0.055em; line-height: 0.88; color: var(--sd-navy); }
.gap-fig .big span { font-size: 0.42em; letter-spacing: -0.03em; color: var(--sd-gray-500); }
.gap-fig p:not(.big) { margin-top: 24px; font-size: 1.05rem; color: var(--sd-fg-2); max-width: 38ch; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.compare h3 { font-family: var(--sd-font-sans); font-size: 1rem; font-weight: 600; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--sd-gray-300); color: var(--sd-fg-2); }
.compare .with h3 { color: var(--sd-navy); border-bottom: 2px solid var(--sd-navy); }
.compare ul { list-style: none; padding: 0; margin: 0; }
.compare li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--sd-gray-200); color: var(--sd-fg-2); }
.compare .with li { color: var(--sd-navy); }
@media (max-width: 860px) { .gap-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .compare { grid-template-columns: 1fr; } }

/* ---------- systems ---------- */
.systems { padding: clamp(80px, 9vw, 128px) 0; }
.systems .pair { margin-top: 56px; }

/* ---------- start: the offer ledger ---------- */
.start { background: var(--sd-off-white-2); padding: clamp(80px, 9vw, 128px) 0; scroll-margin-top: 24px; }
.ledger { margin-top: 48px; border-top: 2px solid var(--sd-navy); }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, 1.3fr) 252px; gap: clamp(16px, 2.4vw, 36px); align-items: start; padding: 30px 0; border-bottom: 1px solid var(--sd-gray-300); color: var(--sd-fg-2); line-height: 1.5; }
.ledger-head { padding: 14px 0; align-items: end; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); }
.ledger-name { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.95rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--sd-navy); }
.ledger-row .btn { width: 100%; justify-content: center; white-space: nowrap; padding: 15px 14px; letter-spacing: 0.1em; }
.ledger-k { display: none; font-style: normal; }
.ledger-foot { margin: 24px 0 0; color: var(--sd-fg-2); }
.ledger-foot a { color: var(--sd-navy); }
.ledger-foot a.addr { font-family: var(--sd-font-mono); font-size: 0.95rem; margin-left: 4px; }
.close-walk { margin: 16px 0 0; }
.close-walk a { color: var(--on); display: inline-block; padding: 8px 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1080px) {
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 18px; }
  .ledger-name { grid-column: 1 / -1; }
  .ledger-k { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); margin-bottom: 4px; }
  .ledger-row > span:last-child { grid-column: 1 / -1; }
  .ledger-row .btn { width: auto; }
}
@media (max-width: 600px) { .ledger-row { grid-template-columns: 1fr; } .ledger-row .btn { width: 100%; } }

/* ---------- who we serve ---------- */
.serve { padding: clamp(80px, 9vw, 128px) 0; }
.serve .doors { margin-top: 56px; }

/* ---------- close (every page) ---------- */
.close .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
.close-l p { margin-top: 28px; }
.close-k { margin: 28px 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-2); }
.offer-mini { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--rule-dark); }
.actions--tight + .close-k + .offer-mini { margin-top: 12px; }
.offer-mini li { margin: 0; border-bottom: 1px solid var(--rule-dark); }
.offer-mini a { display: grid; grid-template-columns: minmax(0, 1fr) 28px; column-gap: 16px; align-items: center; padding: 16px 0; min-height: 44px; text-decoration: none; color: var(--on); }
.offer-mini .t { font-family: var(--sd-font-serif); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.015em; line-height: 1.15; }
.offer-mini .d { grid-column: 1; font-size: 0.9rem; color: var(--on-2); margin-top: 4px; }
.offer-mini .go { grid-column: 2; grid-row: 1 / span 2; justify-self: end; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.offer-mini a:hover .go, .offer-mini a:focus-visible .go { transform: translateX(4px); }
.offer-mini a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.close-foot { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 0; }
.close-foot a { color: var(--on-2); display: inline-block; padding: 10px 0; }
.close-foot a:hover { color: var(--on); }
.close .mail { display: inline-block; margin: 0; font-size: 0.9rem; }
@media (max-width: 860px) { .close .wrap { grid-template-columns: 1fr; } }

/* ---------- footer tap targets ---------- */
.foot li { margin: 0; }
.foot li a { display: inline-block; padding: 5px 0; }
@media (max-width: 860px) { .foot li a { padding: 12px 0; } }

/* v23 fixes after the first render */
.tm { font-size: 0.6em; vertical-align: 0.72em; }
.nav-links .tm { font-size: 0.7em; vertical-align: 0.5em; }
.is-dossier .plot-key { opacity: 0; }
.plot-key { transition: opacity .6s; }
@media (min-width: 1200px) { .callouts li { padding-left: 0; } .callouts li::before { display: none; } }
@media (max-width: 600px) {
  .hero .plot { height: 500px; }
  .dossier .d-yr, .dossier .d-small { font-size: 17px; }
  .dossier .d-cap { font-size: 17px; letter-spacing: 0.08em; }
  .dossier .d-acc-t { font-size: 18px; }
}
.cols > * { min-width: 0; } /* v23: grid children could not shrink below their widest table at 390 */
.site-nav { background: var(--sd-navy); } /* the bar always sits on navy; stated so it holds if a page head changes */
.ledger-head, .ledger-k { color: var(--sd-fg-2); } /* 12px labels on the alt surface: gray-500 was 4.3:1 */
sup { font-size: 0.75rem; }
.person a { display: inline-block; padding: 8px 0; }
/* cards in a row share one height; the link sits on a common baseline whatever the bio length */
.person { display: flex; flex-direction: column; }
.person p { flex: 1 0 auto; }
.person a { align-self: flex-start; }
aside.side p > a:not(.btn) { display: inline-block; padding: 6px 0; }
/* the hidden view leaves the tab order: visibility flips after the fade out, before the fade in */
.dossier { visibility: hidden; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), visibility 0s linear .9s; }
.is-dossier .dossier { visibility: visible; transition-delay: 0s; }

/* ---------- v23.1: the model section (Andrew, 29 Sep 2026: lead with the models) ---------- */
.hero .lede b { color: var(--on); font-weight: 600; }
.model { background: var(--sd-navy); color: var(--on); padding: clamp(80px, 9vw, 128px) 0; }
.model h2 { font-family: var(--sd-font-serif); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); color: var(--on); max-width: 16ch; }
.model .sub { color: var(--on-2); }
.model-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.method { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(24px, 3vw, 44px); margin-top: 48px; }
.method > div { border-top: 1px solid var(--rule-dark); padding-top: 16px; }
.method h3 { font-family: var(--sd-font-sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; color: var(--on); }
.method p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--on-2); }
.model .actions { margin-top: 44px; }
.losscard { margin: 0; background: var(--sd-off-white); color: var(--sd-navy); border-radius: var(--sd-r-2); padding: clamp(24px, 3vw, 36px); }
.lc-k { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); }
.lc-v { margin: 14px 0 0; font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(2.5rem, 4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--sd-navy); }
.lc-v span { font-family: var(--sd-font-sans); font-size: 1rem; letter-spacing: 0; color: var(--sd-fg-2); }
.lc-scale { margin: 32px 0 24px; }
.lc-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 100px; column-gap: 12px; align-items: center; padding: 9px 0; }
.lc-l { font-size: 0.875rem; color: var(--sd-fg-2); }
.lc-n { font-size: 0.875rem; text-align: right; color: var(--sd-navy); font-weight: 500; }
.lc-track { position: relative; height: 12px; }
.lc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--sd-gray-300); }
.lc-band { position: absolute; top: 0; height: 12px; border-radius: 1px; }
.lc-class { background: var(--sd-gray-300); }
.lc-this { background: var(--sd-navy); }
.lc-axis { position: relative; height: 18px; margin: 6px 112px 0 124px; font-family: var(--sd-font-mono); font-size: 0.75rem; color: var(--sd-gray-500); }
.lc-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.lc-why { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--sd-fg-2); }
.lc-why b { color: var(--sd-navy); font-weight: 600; }
.lc-cap { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--sd-hairline); font-size: 0.8rem; color: var(--sd-gray-500); }
@media (max-width: 960px) { .model-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .method { grid-template-columns: 1fr; }
  .lc-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .lc-track { grid-column: 1 / -1; grid-row: 2; }
  .lc-axis { margin: 6px 0 0; }
}
/* loss card: label and value on one line, the scale full width beneath (the 3-column row left the scale 166px wide) */
.lc-row { grid-template-columns: 1fr auto; row-gap: 8px; padding: 10px 0; }
.lc-track { grid-column: 1 / -1; grid-row: 2; }
.lc-axis { margin: 4px 0 0; }
.lc-axis span:first-child { transform: none; }
.lc-axis span:last-child { transform: translateX(-100%); }
.lc-v span { margin-left: 8px; }

/* =====================================================================
   v23.2 (29 Sep 2026): the home page on paper, run by scroll-craft.
   Andrew: "cream or white background with more intention"; "add animation".
   Engine tokens mapped to ours; engine globals reset where they fight the site.
   ===================================================================== */
body.home {
  --sc-canvas: var(--sd-off-white); --sc-surface: var(--sd-off-white-2);
  --sc-ink: var(--sd-navy); --sc-ink-soft: var(--sd-gray-700);
  --sc-accent: var(--sd-amber); --sc-accent-ink: var(--sd-off-white);
  --sc-font-display: var(--sd-font-serif); --sc-font-text: var(--sd-font-sans); --sc-font-mono: var(--sd-font-mono);
  font-size: 1rem; line-height: 1.5; letter-spacing: 0; background: var(--sd-off-white); color: var(--sd-navy);
}
body.home :focus-visible { outline: 2px solid var(--sd-navy); outline-offset: 3px; border-radius: var(--sd-r-2); }
body.home footer.site-footer :focus-visible { outline-color: var(--sd-off-white); }
body.home img.tm, body.home .tm { display: inline; }

/* nav on paper */
.home .site-nav { background: var(--sd-off-white); color: var(--sd-navy); border-bottom: 1px solid var(--sd-gray-200); }
.home .wordmark { color: var(--sd-navy); }
.home .nav-links a { color: var(--sd-fg-2); }
.home .nav-links a:hover, .home .nav-links a[aria-current="page"] { color: var(--sd-navy); }
.home .nav-links a:not(.cta)::after { background: var(--sd-navy); }
.home .nav-links a.cta { background: var(--sd-navy); color: var(--sd-off-white); }
.home .nav-links a.cta:hover { background: var(--sd-navy-2); color: var(--sd-off-white); }
.home .nav-toggle { border-color: var(--sd-gray-300); color: var(--sd-navy); }
@media (max-width: 960px) { .home .nav-links { background: var(--sd-off-white); border-color: var(--sd-gray-200); } .home .nav-links li { border-color: var(--sd-gray-200); } }

/* title page */
.lhero { background: var(--sd-off-white); padding: calc(76px + clamp(40px, 5vw, 72px)) 0 clamp(64px, 7vw, 104px); }
.lhero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.lhero h1 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(3.1rem, 7.2vw, 7rem); line-height: 0.94; letter-spacing: -0.04em; margin: 0; color: var(--sd-navy); }
.lhero h1 span { white-space: nowrap; display: inline-block; }
.lhero .lede { font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.5; color: var(--sd-fg-2); margin: 0 0 28px; max-width: 38ch; }
.lhero .lede b { color: var(--sd-navy); font-weight: 600; }
.lhero .actions { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lhero h1, .lhero .lede, .lhero .actions { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
  .lhero .lede { animation-delay: .1s; } .lhero .actions { animation-delay: .18s; }
}

.lhero .plot { --census-ink: 11,18,32; --census-paper: 250,248,244; --census-live: 0.62; --census-gone: 0.34; --census-mark: 0.72; --census-mark-alpha: 0.85;
  position: relative; display: block; height: auto; margin-top: clamp(56px, 6vw, 88px); }
.lhero .plot-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lhero .plot-title { margin: 0; font-family: var(--sd-font-sans); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -0.01em; color: var(--sd-navy); }
.lhero .views { display: inline-flex; border: 1px solid var(--sd-gray-300); border-radius: var(--sd-r-2); overflow: hidden; }
.lhero .views a { font: 600 0.75rem/1 var(--sd-font-sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 14px; color: var(--sd-fg-2); text-decoration: none; }
.lhero .views a + a { border-left: 1px solid var(--sd-gray-300); }
.lhero .views a[aria-current="true"] { background: var(--sd-navy); color: var(--sd-off-white); }
.lhero .views a:not([aria-current]):hover { color: var(--sd-navy); background: var(--sd-off-white-2); }

.anns { list-style: none; margin: 28px 0 0; padding: 0; position: relative; height: 76px; }
.ann { position: absolute; bottom: 0; left: var(--x); margin: 0; width: max-content; max-width: 30ch; padding: 0 0 26px; font-size: 0.92rem; line-height: 1.4; color: var(--sd-fg-2); opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.ann b { color: var(--sd-navy); font-weight: 600; }
.ann::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 20px; background: var(--sd-navy); }
.ann::before { content: ""; position: absolute; left: -2px; bottom: -3px; width: 5px; height: 5px; background: var(--sd-navy); border-radius: 1px; }
.ann--end { transform: translate(-100%, 6px); text-align: right; }
.ann--end::after { left: auto; right: 0; } .ann--end::before { left: auto; right: -2px; }
.anns-in .ann { opacity: 1; transform: none; }
.anns-in .ann--end { transform: translateX(-100%); }
.anns-in .ann:nth-child(2) { transition-delay: .25s; } .anns-in .ann:nth-child(3) { transition-delay: .5s; }
.lhero .stage { position: relative; height: clamp(300px, 33vw, 470px); flex: none; }
.lhero .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lhero .axis { position: relative; left: auto; right: auto; bottom: auto; height: 34px; margin-top: 10px; border-top: 1px solid var(--sd-navy); font-family: var(--sd-font-mono); font-size: 0.8rem; color: var(--sd-gray-500); }
.lhero .axis span { position: absolute; top: 12px; transform: translateX(-50%); }
.lhero .axis::before { top: 0; height: 6px; background: repeating-linear-gradient(to right, var(--sd-navy) 0 1px, transparent 1px calc(100% / 19)); opacity: 0.55; }
.lhero .plot > .plot-key { margin: 16px 0 0; color: var(--sd-fg-2); font-family: var(--sd-font-sans); font-size: 0.85rem; display: flex; gap: 24px; flex-wrap: wrap; }
.lhero .plot-key i { background: var(--sd-navy); } .lhero .plot-key i.ev { background: var(--sd-amber); }
.lhero .tip { background: var(--sd-paper); color: var(--sd-navy); border-color: var(--sd-gray-300); }
.lhero .scrub { background: var(--sd-navy); }
@media (max-width: 860px) {
  .lhero-top { grid-template-columns: 1fr; align-items: start; }
  .anns { height: auto; display: grid; gap: 10px; margin-top: 20px; }
  .ann, .ann--end, .anns-in .ann--end { position: static; transform: none; text-align: left; padding: 0 0 0 14px; max-width: none; }
  .ann::after, .ann--end::after { left: 0; right: auto; top: 3px; bottom: 3px; height: auto; }
  .ann::before { display: none; }
  .lhero .stage { height: 300px; margin-top: 16px; }
}

/* the peak: the fleet folds into one aircraft (signature move, driven from --sc-p) */
.onea { background: var(--sd-off-white-2);
  --q1: clamp(0, (var(--sc-p, 1) - 0.10) / 0.24, 1);
  --q2: clamp(0, (var(--sc-p, 1) - 0.32) / 0.08, 1);
  --q3: clamp(0, (var(--sc-p, 1) - 0.38) / 0.24, 1);
  --q4: clamp(0, (var(--sc-p, 1) - 0.62) / 0.08, 1);
  --q5: clamp(0, (var(--sc-p, 1) - 0.72) / 0.08, 1);
  --q6: clamp(0, (var(--sc-p, 1) - 0.82) / 0.08, 1); }
.onea.is-static { --q1: 1; --q2: 1; --q3: 1; --q4: 1; --q5: 1; --q6: 1; }
.onea-stage { height: 100vh; height: 100svh; display: flex; align-items: center; background: var(--sd-off-white-2); overflow: hidden; }
.onea.is-static .onea-stage { height: auto; padding: clamp(80px, 9vw, 128px) 0; }
.onea-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; }
.onea h2 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; color: var(--sd-navy); max-width: 12ch; }
.onea-lede { margin: 20px 0 0; color: var(--sd-fg-2); font-size: 1.05rem; max-width: 34ch; }
.onea-read { margin-top: 32px; border-top: 1px solid var(--sd-gray-300); }
.onea-read p { margin: 0; padding: 14px 0; font-size: 1.05rem; line-height: 1.4; color: var(--sd-fg-2); }
.onea-read p > span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); margin-bottom: 4px; }
.onea-read .r1 { opacity: var(--q5); transform: translateY(calc((1 - var(--q5)) * 10px)); }
.onea-read .r2 { opacity: var(--q6); transform: translateY(calc((1 - var(--q6)) * 10px)); color: var(--sd-navy); border-left: 2px solid var(--sd-amber); padding-left: 14px; }
.onea-read .r3 { opacity: 1; } /* a link is never invisible while focusable */
.onea-read .r3 a { color: var(--sd-navy); display: inline-block; padding: 4px 0; }
.onea-fig { margin: 0; position: relative; height: clamp(320px, 52vh, 520px); }
.onea-squeeze { position: absolute; inset: 0; transform-origin: 50% 58%; transform: scaleY(calc(1 - var(--q1) * 0.992)); opacity: calc(1 - var(--q3) * 0.9); }
.onea-squeeze canvas { width: 100%; height: 100%; display: block; }
.onea-drawing { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); opacity: var(--q2); }
.onea-label { margin: 0 0 18px; font-family: var(--sd-font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--sd-gray-500); }
.onea-drawing svg { width: 100%; height: auto; overflow: visible; display: block; }
.onea .d-axis, .onea .d-tick { stroke: var(--sd-gray-400); }
.onea .d-yr, .onea .d-small { fill: var(--sd-gray-500); }
.onea .d-band.d-old { fill: rgba(11,18,32,0.22); }
.onea .d-band.d-new { fill: var(--sd-navy); }
.onea .d-cap { fill: var(--sd-fg-2); } .onea .d-cap--new { fill: var(--sd-navy); }
.onea .d-owner { stroke: var(--sd-fg-2); } .onea .d-cert { fill: var(--sd-navy); }
.onea .d-acc, .onea .d-lead { fill: var(--sd-amber); stroke: var(--sd-amber); }
.onea .d-acc-t { fill: var(--sd-navy); }
.onea .ot-draw { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--q3)); }
.onea .ot-labels { opacity: clamp(0, (var(--q3) - 0.6) / 0.4, 1); }
.onea .d-hit { opacity: var(--q4); transition: none; }
@media (max-width: 860px) {
  .onea-grid { grid-template-columns: 1fr; gap: 20px; }
  .onea h2 { font-size: 1.9rem; }
  .onea-lede { display: none; }
  .onea-fig { height: 240px; order: -1; }
  .onea-read { margin-top: 12px; } .onea-read p { padding: 10px 0; font-size: 0.98rem; }
  .onea .d-yr, .onea .d-small { font-size: 17px; } .onea .d-cap { font-size: 16px; } .onea .d-acc-t { font-size: 18px; }
}

/* paper versions of the dark sections on the home page */
.home .model { background: var(--sd-off-white); color: var(--sd-navy); }
.home .model h2 { color: var(--sd-navy); }
.home .model .sub { color: var(--sd-fg-2); }
.home .method > div { border-top-color: var(--sd-gray-300); }
.home .method h3 { color: var(--sd-navy); }
.home .method p { color: var(--sd-fg-2); }
.home .losscard { background: var(--sd-paper); border: 1px solid var(--sd-gray-200); box-shadow: var(--sd-shadow-cover); }
.home .lc-band { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.16,1,.3,1) .35s; }
.home .lc-this { transition-delay: .6s; }
.home .model-grid.sc-in .lc-band, .home .model-grid > .sc-in .lc-band, html:not(.sc-ready) .home .lc-band { transform: none; }
.home .proof { background: var(--sd-off-white-2); }
.home .gap { background: var(--sd-off-white); }
.home .systems { background: var(--sd-off-white-2); }
.home .start { background: var(--sd-off-white); }
.home .serve { background: var(--sd-off-white-2); }
.home .close { background: var(--sd-off-white); color: var(--sd-navy); border-top: 2px solid var(--sd-navy); }
.home .close::before { background: repeating-linear-gradient(to bottom, rgba(11,18,32,0.05) 0 1px, transparent 1px 7px); }
.home .close h2 { color: var(--sd-navy); }
.home .close p { color: var(--sd-fg-2); }
.home .offer-mini { border-top-color: var(--sd-gray-300); }
.home .offer-mini li { border-bottom-color: var(--sd-gray-300); }
.home .offer-mini a { color: var(--sd-navy); }
.home .offer-mini .d { color: var(--sd-fg-2); }
.home .close-walk a, .home .close-foot a { color: var(--sd-navy); }
.home .close :focus-visible { outline-color: var(--sd-navy); }
@media (prefers-reduced-motion: reduce) { .ann, .home .lc-band { transition: none; } }

.onea .d-cert, .onea .d-owner { opacity: clamp(0, (var(--q3) - 0.6) / 0.4, 1); }
@media (max-width: 860px) { .ann, .ann--end, .anns-in .ann--end { width: auto; max-width: none; } }

/* v23.3: annotated aircraft. Lines draw and notes rise on the act's scroll progress (--sc-p); with no engine the fallback of 1 shows it finished. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home .annot { background: var(--sd-off-white); padding: clamp(56px, 7vw, 104px) 0 0; }
.annot-fig { margin: 0; }
.annot-stage { position: relative; max-width: 1600px; margin: 0 auto; }
.annot-stage img { display: block; width: 100%; height: auto; }
.annot-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.al { fill: none; stroke: var(--sd-off-white); stroke-width: 2.2; stroke-linecap: square; stroke-dasharray: 1; filter: drop-shadow(0 0 1.5px rgba(11, 18, 32, .7)); }
.ad { fill: var(--sd-off-white); stroke: var(--sd-navy); stroke-width: 2; }
.al1 { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 1) - 0.28) / 0.16, 1)); }
.al2 { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 1) - 0.34) / 0.20, 1)); }
.al3 { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 1) - 0.40) / 0.20, 1)); }
.ad1 { opacity: clamp(0, (var(--sc-p, 1) - 0.42) * 12, 1); }
.ad2 { opacity: clamp(0, (var(--sc-p, 1) - 0.52) * 12, 1); }
.ad3 { opacity: clamp(0, (var(--sc-p, 1) - 0.58) * 12, 1); }
.annot-note { position: absolute; left: 5%; top: var(--y); margin: 0; transform: translateY(calc(-100% - 8px + (1 - var(--o, 1)) * 10px)); opacity: var(--o, 1); background: var(--sd-navy); color: var(--sd-off-white); padding: 9px 14px 10px; border-radius: var(--sd-r-1); max-width: 34%; line-height: 1.25; font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(1rem, 1.7vw, 1.55rem); letter-spacing: -0.01em; }
.annot-note b { display: block; font-family: var(--sd-font-mono); font-weight: 400; font-size: clamp(0.62rem, 0.85vw, 0.76rem); letter-spacing: 0.04em; color: var(--sd-gray-400, #9ca3af); margin-bottom: 3px; }
.an1 { --o: clamp(0, (var(--sc-p, 1) - 0.26) * 10, 1); }
.an2 { --o: clamp(0, (var(--sc-p, 1) - 0.32) * 10, 1); }
.an3 { --o: clamp(0, (var(--sc-p, 1) - 0.38) * 10, 1); }
.annot-cap { padding-top: 14px; padding-bottom: 28px; font-family: var(--sd-font-mono); font-size: 0.74rem; color: var(--sd-gray-500); }
@media (prefers-reduced-motion: reduce) { .al { stroke-dashoffset: 0 !important; } .ad { opacity: 1 !important; } .annot-note { --o: 1 !important; } }
@media (max-width: 820px) {
  .annot-lines { display: none; }
  .annot-note { position: static; transform: none; opacity: 1; max-width: none; border-radius: 0; margin: 0; border-top: 1px solid rgba(250, 248, 244, .18); padding: 12px var(--gutter); font-size: 1.1rem; }
  .annot-stage { display: block; }
  .annot-note.an1 { margin-top: 0; }
}

/* =====================================================================
   v24 (29 Sep 2026): photographic hero, layered for depth (scroll-craft).
   Back plane: sky and airport (parallax). Headline between planes.
   Front plane: the jet on its own wet ramp (planted, never moves).
   Callouts draw onto the aircraft on load, in the order of the story.
   ===================================================================== */
.home .site-nav { position: sticky; top: 0; transition: box-shadow .3s ease; }
.home .site-nav.is-quiet { box-shadow: 0 1px 0 var(--sd-gray-200), 0 6px 18px rgba(11,18,32,0.05); }

.phero { --band: 188px; --ph-h: clamp(460px, calc(100svh - 76px - var(--band)), 880px); --fx: 0.56;
  --sw: max(100%, calc(var(--ph-h) * 1.7778));
  position: relative; height: var(--ph-h); overflow: hidden; background: var(--sd-navy); isolation: isolate; }
.ph-layer, .ph-lines, .ph-notes { position: absolute; width: var(--sw); aspect-ratio: 2720 / 1530;
  left: clamp(calc(100% - var(--sw)), calc(50% - var(--fx) * var(--sw)), 0px);
  top: calc(50% - var(--sw) * 0.28125); margin: 0; }
.ph-layer img { display: block; width: 100%; height: 100%; }
.ph-back { z-index: 0; }
.ph-front { z-index: 2; pointer-events: none; }
.ph-title { position: absolute; z-index: 1; left: var(--gutter); top: clamp(28px, 8%, 80px); margin: 0;
  font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(3rem, 7.4vw, 7.4rem); line-height: 0.94; letter-spacing: -0.04em; color: var(--sd-navy); }
.ph-title span { display: block; white-space: nowrap; }
.ph-lines { z-index: 3; overflow: visible; pointer-events: none; }
.ph-lines path { fill: none; stroke: var(--sd-off-white); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ph-lines circle { fill: var(--sd-off-white); stroke: var(--sd-navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ph-lines .pl1 circle { fill: var(--sd-amber); stroke: var(--sd-off-white); }
.ph-lines { filter: drop-shadow(0 0 1px rgba(11,18,32,0.75)); } /* keeps a 1.5px line legible on white paint and on sky */
.ph-notes { z-index: 4; list-style: none; padding: 0; pointer-events: none; }
.pn { position: absolute; left: var(--x); top: var(--y); transform: translate(0, calc(-100% - 6px)); margin: 0; pointer-events: auto;
  max-width: 17rem; padding: 9px 12px 10px; background: var(--sd-off-white); color: var(--sd-navy); border-radius: var(--sd-r-1);
  font-size: 0.95rem; line-height: 1.3; box-shadow: 0 1px 2px rgba(11,18,32,0.18), 0 6px 18px rgba(11,18,32,0.14); }
.pn span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); margin-bottom: 3px; }
.pn--r { transform: translate(-100%, calc(-100% - 6px)); }
.pn--hit { border-left: 3px solid var(--sd-amber); }
.ph-cap { position: absolute; z-index: 4; right: var(--gutter); top: 16px; margin: 0; padding: 5px 9px; background: var(--sd-off-white); color: var(--sd-fg-2);
  font-size: 0.75rem; border-radius: var(--sd-r-1); }
@media (prefers-reduced-motion: no-preference) {
  .ph-title span { animation: rise 1s cubic-bezier(.16,1,.3,1) both; } .ph-title span + span { animation-delay: .12s; }
  .ph-lines path { stroke-dashoffset: 1; animation: draw .7s cubic-bezier(.4,0,.2,1) forwards; }
  .ph-lines circle { opacity: 0; animation: pop .3s ease forwards; }
  .pn { opacity: 0; animation: note .55s cubic-bezier(.16,1,.3,1) forwards; }
  .pl4 path, .pl4 circle { animation-delay: .7s; } .pn4 { animation-delay: 1.2s; }
  .pl1 path, .pl1 circle { animation-delay: 1.5s; } .pn1 { animation-delay: 2.0s; }
  .pl2 path, .pl2 circle { animation-delay: 2.3s; } .pn2 { animation-delay: 2.8s; }
  .pl3 path, .pl3 circle { animation-delay: 3.0s; } .pn3 { animation-delay: 3.5s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop { to { opacity: 1; } }
  @keyframes note { from { opacity: 0; margin-top: 8px; } to { opacity: 1; margin-top: 0; } }
}

/* the band under the photo: what we do, the two actions, the scale of the record */
.pband { background: var(--sd-off-white); border-bottom: 1px solid var(--sd-gray-200); }
.pband-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px clamp(24px, 4vw, 64px); align-items: center; padding-top: 26px; padding-bottom: 22px; }
.pband-lede { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.45; color: var(--sd-fg-2); max-width: 52ch; }
.pband-lede b { color: var(--sd-navy); font-weight: 600; }
.pband-actions { margin: 0; flex-wrap: nowrap; }
.pband-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding-top: 14px; border-top: 1px solid var(--sd-gray-200); }
.pband-facts > div { display: flex; align-items: baseline; gap: 10px; padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--sd-gray-200); }
.pband-facts > div:last-child { border-right: 0; }
.pband-facts dd { order: -1; margin: 0; font-weight: 600; font-size: 1.05rem; color: var(--sd-navy); letter-spacing: -0.01em; }
.pband-facts dt { font-size: 0.875rem; color: var(--sd-fg-2); }

@media (max-width: 900px) {
  .phero { --ph-h: 58svh; --fx: 0.6; min-height: 380px; }
  .ph-title { font-size: clamp(2.6rem, 11vw, 4rem); top: 22px; }
  .ph-lines { display: none; }
  .ph-cap { top: auto; bottom: 12px; }
  .ph-notes { position: static; width: auto; aspect-ratio: auto; }
  .pband-grid { grid-template-columns: 1fr; }
  .pband-actions { flex-wrap: wrap; }
  .pband-facts > div { border-right: 0; margin-right: 0; padding-right: 20px; }
}
/* on phones the findings leave the photo and sit under it as a short list */
.ph-notes-m { display: none; }
@media (max-width: 900px) {
  .phero { overflow: hidden; }
  .phero .ph-notes { display: none; }
  .ph-notes-m { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; list-style: none; margin: 0; padding: 14px var(--gutter) 4px; background: var(--sd-off-white); }
  .ph-notes-m li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--sd-gray-200); font-size: 0.92rem; line-height: 1.3; color: var(--sd-navy); }
  .ph-notes-m li span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-gray-500); margin-bottom: 2px; }
  .ph-notes-m li.hit { border-left: 3px solid var(--sd-amber); padding-left: 10px; }
}

/* the record act: the photo gives way to the aircraft's registration history */
.onea-fig { border-radius: var(--sd-r-2); overflow: hidden; background: var(--sd-off-white-2); }
.onea-photo { position: absolute; inset: 0; transform: scale(calc(1.04 - var(--q1) * 0.04)); opacity: calc(1 - var(--q1) * 0.9); filter: grayscale(var(--q1)); }
.onea-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.onea-drawing { left: 5%; right: 5%; }
.onea h2 { max-width: 16ch; }

/* people and standards */
.people-band { background: var(--sd-off-white); padding: clamp(80px, 9vw, 128px) 0; }
.people-band h2 { font-family: var(--sd-font-serif); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); color: var(--sd-navy); max-width: 18ch; }
.pb-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); margin-top: 48px; align-items: start; }
.pb-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 40px); border-top: 2px solid var(--sd-navy); }
.pb-people li { margin: 0; padding: 18px 0 20px; border-bottom: 1px solid var(--sd-gray-200); color: var(--sd-fg-2); font-size: 0.95rem; line-height: 1.5; }
.pb-people b { display: block; font-family: var(--sd-font-serif); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.015em; color: var(--sd-navy); }
.pb-people .role { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); margin: 4px 0 8px; }
.pb-std { margin: 0; border-top: 2px solid var(--sd-navy); }
.pb-std > div { padding: 18px 0; border-bottom: 1px solid var(--sd-gray-200); }
.pb-std dt { font-weight: 600; color: var(--sd-navy); }
.pb-std dd { margin: 4px 0 0; color: var(--sd-fg-2); font-size: 0.95rem; }
.pb-more { margin: 28px 0 0; } .pb-more a { color: var(--sd-navy); display: inline-block; padding: 6px 0; }
@media (max-width: 860px) { .pb-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pb-people { grid-template-columns: 1fr; } }
.home .people-band { background: var(--sd-off-white-2); } .home .start { background: var(--sd-off-white); } .home .serve { background: var(--sd-off-white-2); }

/* micro-interactions: one consistent hover language (tint + 4px travel) */
.ledger-row:not(.ledger-head) { transition: background-color .2s ease; }
.ledger-row:not(.ledger-head):hover { background: var(--sd-off-white-2); }
.ledger-name { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.ledger-row:not(.ledger-head):hover .ledger-name { transform: translateX(4px); }
.pb-people li, .pb-std > div { transition: background-color .2s ease; }

/* grain: faint, alive, off for reduced motion and touch */
.sc-grain { z-index: 60; opacity: 0.035; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .sc-grain::before { animation: grain 1s steps(6) infinite; }
  @keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
}
/* v24 geometry fix: container units so the scene scales the same way for width and height */
.phero { container-type: size; --ph-h: clamp(560px, calc(100svh - 76px), 1000px); --sw: max(100cqw, calc(100cqh * 1.7778)); }
.ph-layer, .ph-lines, .ph-notes { left: clamp(calc(100cqw - var(--sw)), calc(50cqw - var(--fx) * var(--sw)), 0px); top: calc(50cqh - var(--sw) * 0.28125); }
.ph-panel { position: absolute; z-index: 5; left: var(--gutter); bottom: clamp(20px, 4cqh, 44px); width: min(560px, 44cqw); padding: 24px 26px 26px;
  background: var(--sd-off-white); border-radius: var(--sd-r-2); box-shadow: 0 1px 2px rgba(11,18,32,0.2), 0 12px 32px rgba(11,18,32,0.18); }
.ph-panel .pband-lede { font-size: clamp(1.02rem, 1.2vw, 1.15rem); }
.ph-panel .pband-actions { margin-top: 20px; flex-wrap: wrap; }
.pfacts { background: var(--sd-off-white); border-bottom: 1px solid var(--sd-gray-200); }
.pfacts .pband-facts { border-top: 0; padding: 18px 0; }
@media (max-width: 900px) {
  .phero { --ph-h: 58svh; container-type: size; }
  .ph-panel { position: static; width: auto; box-shadow: none; border-radius: 0; padding: 20px var(--gutter) 24px; }
}
@media (max-width: 900px) {
  .phero { height: auto; container-type: normal; overflow: visible; }
  .phero::before { content: ""; display: block; height: 58svh; min-height: 360px; }
  .phero .ph-layer { --pw: max(100vw, calc(max(58svh, 360px) * 1.7778)); width: var(--pw); left: clamp(calc(100vw - var(--pw)), calc(50vw - var(--fx) * var(--pw)), 0px); top: calc(max(58svh, 360px) / 2 - var(--pw) * 0.28125); }
  .phero .ph-layer, .phero .ph-title { clip-path: none; }
  .phero > .phero-scene { display: contents; }
  .phero { overflow: hidden; }
}
.pn { width: max-content; max-width: 19rem; }
.ph-cap { top: auto; bottom: 16px; right: var(--gutter); }
@media (max-width: 900px) { .ph-cap { bottom: auto; top: calc(max(58svh, 360px) - 38px); right: 12px; } }
.ph-lines, .ph-layer img { max-width: none; } /* the engine caps svg/img at 100%; the scene is wider than the viewport by design */
@media (min-width: 901px) and (max-width: 1239px) { .phero { --fx: 0.8; } .ph-title { font-size: clamp(3rem, 6.4vw, 5rem); } }
@media (min-width: 901px) and (max-width: 1239px) { .pl2, .pn2 { display: none; } .ph-panel { width: 380px; } }
/* v24.1: the trademark sits on the cap line (top of the mark level with the tops of the capitals), close to the word, at every size */
.tm { font-size: 0.5em; vertical-align: baseline; position: relative; top: -0.72em; line-height: 0; margin-left: 0.06em; letter-spacing: 0; font-weight: 500; }
.panel .name .tm { font-size: 0.2em; vertical-align: baseline; top: -2.9em; margin-left: 0.18em; letter-spacing: 0; }
.nav-links .tm { font-size: 0.6em; vertical-align: baseline; top: -0.55em; margin-left: 0.02em; }

/* v24.2: the findings open on request. Four quiet marks on the aircraft; hover, focus or tap opens one; nothing moves on its own. */
.ph-spots { position: absolute; z-index: 5; width: var(--sw); aspect-ratio: 2720 / 1530; pointer-events: none;
  left: clamp(calc(100cqw - var(--sw)), calc(50cqw - var(--fx) * var(--sw)), 0px); top: calc(50cqh - var(--sw) * 0.28125); }
.hs { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 50%; }
.hs i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sd-off-white); box-shadow: 0 0 0 2px var(--sd-navy), 0 0 0 7px rgba(250,248,244,0.35); font-size: 0; font-style: normal; transition: transform .2s ease, box-shadow .2s ease; }
.hs--hit i { background: var(--sd-amber); box-shadow: 0 0 0 2px var(--sd-off-white), 0 0 0 7px rgba(250,248,244,0.35); }
.hs:hover i, .hs[aria-expanded="true"] i { transform: scale(1.25); box-shadow: 0 0 0 2px var(--sd-navy), 0 0 0 9px rgba(250,248,244,0.5); }
.hs--hit:hover i, .hs--hit[aria-expanded="true"] i { box-shadow: 0 0 0 2px var(--sd-off-white), 0 0 0 9px rgba(250,248,244,0.5); }
.hs:focus-visible { outline: 2px solid var(--sd-off-white); outline-offset: 0; }
/* lines and notes are closed until their mark is opened; the old on-load draw is retired */
.ph-lines circle { display: none; }
.ph-lines .pl { opacity: 0; transition: opacity .2s ease; }
.ph-lines path { stroke-dashoffset: 1; animation: none; transition: stroke-dashoffset .45s cubic-bezier(.4,0,.2,1); }
.ph-notes .pn { opacity: 0; animation: none; margin-top: 6px; pointer-events: none; transition: opacity .25s ease .15s, margin-top .35s cubic-bezier(.16,1,.3,1) .15s; }
.phero[data-active="1"] .pl1, .phero[data-active="2"] .pl2, .phero[data-active="3"] .pl3, .phero[data-active="4"] .pl4 { opacity: 1; }
.phero[data-active="1"] .pl1 path, .phero[data-active="2"] .pl2 path, .phero[data-active="3"] .pl3 path, .phero[data-active="4"] .pl4 path { stroke-dashoffset: 0; }
.phero[data-active="1"] .pn1, .phero[data-active="2"] .pn2, .phero[data-active="3"] .pn3, .phero[data-active="4"] .pn4 { opacity: 1; margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hs { opacity: 0; animation: pop .5s ease forwards; }
  .hs4 { animation-delay: .9s; } .hs1 { animation-delay: 1.05s; } .hs2 { animation-delay: 1.2s; } .hs3 { animation-delay: 1.35s; }
}
@media (prefers-reduced-motion: reduce) { .ph-lines path, .ph-notes .pn { transition: none; } }
.ph-cap .cap-touch { display: none; }
@media (hover: none) { .ph-cap .cap-hover { display: none; } .ph-cap .cap-touch { display: inline; } }
@media (min-width: 901px) and (max-width: 1239px) { .hs2 { display: none; } }
/* phones: marks carry their number, the findings list under the photo carries the same numbers, a tap lights the matching line */
@media (max-width: 900px) {
  .phero .ph-spots { --pw: max(100vw, calc(max(58svh, 360px) * 1.7778)); width: var(--pw); left: clamp(calc(100vw - var(--pw)), calc(50vw - var(--fx) * var(--pw)), 0px); top: calc(max(58svh, 360px) / 2 - var(--pw) * 0.28125); }
  .hs i { width: 22px; height: 22px; margin: -11px 0 0 -11px; font: 700 12px/22px var(--sd-font-sans); color: var(--sd-navy); text-align: center; }
  .hs--hit i { color: var(--sd-off-white); }
  .ph-cap { max-width: calc(100vw - 24px); }
  .ph-notes-m li { position: relative; padding-left: 30px; transition: background-color .2s ease; }
  .ph-notes-m li i { position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--sd-navy); font: 700 11px/17px var(--sd-font-sans); font-style: normal; text-align: center; color: var(--sd-navy); }
  .ph-notes-m li.hit { border-left: 0; padding-left: 30px; } .ph-notes-m li.hit i { background: var(--sd-amber); border-color: var(--sd-amber); color: var(--sd-off-white); }
  .ph-notes-m li.is-on { background: var(--sd-off-white-2); }
}

/* v24.3: the record section scrolls normally. The figure shows the photo; pointing at it, tapping it or choosing "The record" draws the history.
   The stage variables are registered so they can transition. */
@property --q1 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --q2 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --q3 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --q4 { syntax: '<number>'; inherits: true; initial-value: 0; }
.onea { --q1: 0; --q2: 0; --q3: 0; --q4: 0; --q5: 1; --q6: 1;
  transition: --q1 .5s ease, --q2 .3s ease .25s, --q3 .75s cubic-bezier(.4,0,.2,1) .35s, --q4 .3s ease 1.05s; }
.onea[data-view="record"] { --q1: 1; --q2: 1; --q3: 1; --q4: 1; }
.onea[data-view="photo"] { transition: --q1 .45s ease .1s, --q2 .2s ease, --q3 .3s ease, --q4 .15s ease; }
.onea-stage { height: auto; min-height: 0; display: block; padding: clamp(80px, 9vw, 128px) 0; }
.onea-side { display: flex; flex-direction: column; gap: 14px; }
.onea-views { align-self: flex-end; display: inline-flex; border: 1px solid var(--sd-gray-300); border-radius: var(--sd-r-2); overflow: hidden; }
.onea-views button { font: 600 0.75rem/1 var(--sd-font-sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 14px; border: 0; background: none; color: var(--sd-fg-2); cursor: pointer; }
.onea-views button + button { border-left: 1px solid var(--sd-gray-300); }
.onea-views button[aria-pressed="true"] { background: var(--sd-navy); color: var(--sd-off-white); }
.onea-views button:not([aria-pressed="true"]):hover { color: var(--sd-navy); background: var(--sd-off-white); }
.onea-fig { cursor: pointer; }
.onea-read .r1, .onea-read .r2 { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .onea, .onea[data-view="photo"] { transition: none; } }
@media (max-width: 860px) { .onea-views { align-self: stretch; } .onea-views button { flex: 1; } .onea-side { order: -1; } }
/* v24.3 phones: headline on paper above the photo; the photo shows the whole aircraft so every mark is on screen */
@media (max-width: 900px) {
  .phero { --mh: clamp(250px, 36svh, 330px); --mw: calc(var(--mh) * 1.7778);
    display: grid; grid-template-columns: 100%; grid-template-rows: auto var(--mh) auto; height: auto; overflow: hidden; background: var(--sd-off-white); container-type: normal; }
  .phero::before { content: none; }
  .phero .ph-title { position: static; grid-row: 1; grid-column: 1; padding: 20px var(--gutter) 18px; font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .phero .ph-layer, .phero .ph-spots { grid-row: 2; grid-column: 1; position: absolute; width: var(--mw); height: var(--mh); aspect-ratio: auto; left: calc(100% - var(--mw)); top: 0; }
  .phero .ph-lines, .phero .ph-notes { display: none; }
  .phero .ph-cap { grid-row: 2; grid-column: 1; position: absolute; top: auto; bottom: 8px; right: 8px; left: auto; }
  .phero .ph-panel { grid-row: 3; grid-column: 1; }
  .phero .ph-layer img { object-fit: cover; }
  .hs4 { margin-left: -30px; } /* keep the aft mark's tap target inside the screen edge */
}
@media (max-width: 900px) {
  .phero { grid-template-rows: auto var(--mh) auto auto; }
  .phero .ph-cap { grid-row: 3; position: static; margin: 0; padding: 10px var(--gutter) 0; background: none; box-shadow: none; border-radius: 0; color: var(--sd-gray-500); max-width: none; }
  .phero .ph-panel { grid-row: 4; padding-top: 14px; }
}
@media (max-width: 900px) { .phero .ph-cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* one line in either font, so the font swap cannot shift the page */
.onea-read p > span { color: var(--sd-fg-2); } /* 12px labels on the alt surface: gray-500 was 4.3:1 */
/* v24.5 phones: a tapped mark shows its finding on the photo */
.ph-readout { display: none; }
@media (max-width: 900px) {
  .phero .ph-readout { display: block; grid-row: 2; grid-column: 1; position: absolute; z-index: 6; left: 10px; right: 10px; top: calc(var(--mh) - 12px); transform: translateY(-100%);
    margin: 0; padding: 10px 12px; background: var(--sd-off-white); color: var(--sd-navy); border-radius: var(--sd-r-1); font-size: 0.95rem; line-height: 1.3;
    box-shadow: 0 1px 2px rgba(11,18,32,0.2), 0 8px 24px rgba(11,18,32,0.2); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .phero .ph-readout.is-on { opacity: 1; }
  .phero .ph-readout.is-hit { border-left: 3px solid var(--sd-amber); }
  .phero .ph-readout span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-gray-500); margin-bottom: 2px; }
}

/* =====================================================================
   v25 (29 Sep 2026): the cinematic hero. One scroll-scrubbed camera move
   (kie.ai Kling, pinned to our two frames), then the aircraft's record.
   Timeline on the act's --sc-p: the headline hands off to the record,
   the record builds layer by layer, the final frame settles and the marks arrive.
   ===================================================================== */
.chero { position: relative; background: var(--sd-navy);
  --t:  clamp(0, (var(--sc-p, 0) - 0.24) / 0.12, 1);
  --r0: clamp(0, (var(--sc-p, 0) - 0.38) / 0.08, 1);
  --r1: clamp(0, (var(--sc-p, 0) - 0.46) / 0.08, 1);
  --r2: clamp(0, (var(--sc-p, 0) - 0.55) / 0.08, 1);
  --r3: clamp(0, (var(--sc-p, 0) - 0.64) / 0.08, 1);
  --r4: clamp(0, (var(--sc-p, 0) - 0.73) / 0.08, 1);
  --m:  clamp(0, (var(--sc-p, 0) - 0.81) / 0.05, 1); }
.chero-stage { top: 76px; height: calc(100vh - 76px); height: calc(100svh - 76px); overflow: hidden; container-type: size; --fx: 0.62;
  --sw: max(100cqw, calc(100cqh * 1.7778)); }
.ch-scene { position: absolute; width: var(--sw); aspect-ratio: 16 / 9; left: clamp(calc(100cqw - var(--sw)), calc(50cqw - var(--fx) * var(--sw)), 0px); top: calc(50cqh - var(--sw) * 0.28125); }
.ch-scene img, .ch-scene video { max-width: none; }
.ch-still { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--m); z-index: 2; }
.ch-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--m); }
.chero:not(.is-static) .ch-marks .hs { pointer-events: none; }
.chero.at-end .ch-marks .hs { pointer-events: auto; }
.ch-marks .hs { animation: none; opacity: 1; }
.hs-tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 6px); width: max-content; max-width: 17rem; padding: 9px 12px 10px;
  background: var(--sd-off-white); color: var(--sd-navy); border-radius: var(--sd-r-1); font: 400 0.95rem/1.3 var(--sd-font-sans); text-align: left;
  box-shadow: 0 1px 2px rgba(11,18,32,0.2), 0 8px 24px rgba(11,18,32,0.2); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.hs-tip > span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-gray-500); margin-bottom: 3px; }
.hs-tip--l { left: auto; right: -8px; transform: translate(0, 6px); }
.hs--hit .hs-tip { border-left: 3px solid var(--sd-amber); }
.hs[aria-expanded="true"] .hs-tip { opacity: 1; transform: translate(-50%, 0); }
.hs--hit[aria-expanded="true"] .hs-tip, .hs[aria-expanded="true"] .hs-tip--l { transform: translate(0, 0); }
.hs[aria-expanded="true"] .hs-tip:not(.hs-tip--l) { transform: translate(-50%, 0); }

.ch-title { position: absolute; z-index: 4; left: var(--gutter); top: clamp(24px, 7cqh, 72px); margin: 0; font-family: var(--sd-font-serif); font-weight: 500;
  font-size: clamp(3rem, 7.2vw, 7.2rem); line-height: 0.94; letter-spacing: -0.04em; color: var(--sd-navy); opacity: calc(1 - var(--t)); transform: translateY(calc(var(--t) * -24px)); }
.ch-title span { display: block; white-space: nowrap; }
.ch-record { position: absolute; z-index: 4; left: var(--gutter); top: clamp(24px, 8cqh, 80px); width: min(460px, 32cqw); color: var(--sd-navy); pointer-events: none; }
.ch-rec-h { margin: 0 0 18px; font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--sd-navy);
  opacity: var(--r0); transform: translateY(calc((1 - var(--r0)) * 14px)); }
.ch-strata { list-style: none; margin: 0; padding: 0; }
.st { margin: 0 0 6px; padding: 12px 14px 13px; background: var(--sd-off-white); border-radius: var(--sd-r-1); box-shadow: 0 1px 2px rgba(11,18,32,0.16), 0 8px 22px rgba(11,18,32,0.14);
  display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 12px; row-gap: 2px; font-size: 0.95rem; line-height: 1.3; }
.st b { font-family: var(--sd-font-mono); font-weight: 500; font-size: 0.8rem; color: var(--sd-gray-500); padding-top: 2px; }
.st em { grid-column: 2; font-style: normal; font-weight: 600; color: var(--sd-amber); }
.st1 { border-left: 3px solid var(--sd-amber); opacity: var(--r1); transform: translateX(calc((1 - var(--r1)) * -28px)); }
.st2 { margin-left: 18px; opacity: var(--r2); transform: translateX(calc((1 - var(--r2)) * -28px)); }
.st3 { margin-left: 36px; opacity: var(--r3); transform: translateX(calc((1 - var(--r3)) * -28px)); }
.ch-rec-today { margin: 14px 0 0; padding: 10px 14px; background: var(--sd-navy); color: var(--sd-off-white); border-radius: var(--sd-r-1); font-size: 0.95rem; opacity: var(--r4); }
.ch-rec-today span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-2); margin-bottom: 2px; }
.ch-panel { position: absolute; z-index: 5; left: var(--gutter); bottom: clamp(18px, 4cqh, 40px); width: min(540px, 42cqw); padding: 22px 24px 24px; background: var(--sd-off-white);
  border-radius: var(--sd-r-2); box-shadow: 0 1px 2px rgba(11,18,32,0.2), 0 12px 32px rgba(11,18,32,0.18); }
.ch-panel .pband-lede { font-size: clamp(1rem, 1.15vw, 1.12rem); margin: 0; }
.ch-panel .pband-actions { margin-top: 18px; flex-wrap: wrap; }
.ch-cap { position: absolute; z-index: 5; right: var(--gutter); bottom: 14px; margin: 0; padding: 5px 9px; background: var(--sd-off-white); color: var(--sd-fg-2); font-size: 0.75rem; border-radius: var(--sd-r-1); }
.ch-cap .cap-touch { display: none; } @media (hover: none) { .ch-cap .cap-hover { display: none; } .ch-cap .cap-touch { display: inline; } }
.chero .ph-readout { display: none; }
@media (min-width: 901px) and (max-width: 1239px) { .ch-record { width: min(400px, 40cqw); } .ch-panel { width: 400px; } }

/* static (reduced motion on desktop): the final frame, the headline and the marks; the record lives in the marks */
.chero.is-static { --t: 0; --r0: 0; --r1: 0; --r2: 0; --r3: 0; --r4: 0; --m: 1; }
.chero.is-static .chero-stage { position: relative; top: 0; }
.chero.is-static .ch-record { display: none; }
.chero.is-static .ch-marks .hs { pointer-events: auto; }

/* phones: headline on paper, the whole aircraft with numbered marks, a tapped finding shows on the photo, then the panel */
@media (max-width: 900px) {
  .chero { background: var(--sd-off-white); }
  .chero .chero-stage { position: relative; top: 0; height: auto; container-type: normal; overflow: hidden; display: grid; grid-template-columns: 100%;
    --mh: clamp(250px, 36svh, 330px); --mw: calc(var(--mh) * 1.7778); grid-template-rows: auto var(--mh) auto auto; }
  .chero .ch-title { position: static; grid-row: 1; padding: 20px var(--gutter) 18px; font-size: clamp(2.5rem, 11vw, 3.6rem); opacity: 1; transform: none; }
  .chero .ch-scene { grid-row: 2; grid-column: 1; position: relative; width: var(--mw); height: var(--mh); aspect-ratio: auto; left: calc(100% - var(--mw)); top: 0; }
  .chero .ch-poster { display: none; }
  .chero .ph-readout { display: block; grid-row: 2; grid-column: 1; position: relative; align-self: end; z-index: 6; margin: 0 10px 10px; padding: 10px 12px; background: var(--sd-off-white); color: var(--sd-navy);
    border-radius: var(--sd-r-1); font-size: 0.95rem; line-height: 1.3; box-shadow: 0 1px 2px rgba(11,18,32,0.2), 0 8px 24px rgba(11,18,32,0.2); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .chero .ph-readout.is-on { opacity: 1; } .chero .ph-readout.is-hit { border-left: 3px solid var(--sd-amber); }
  .chero .ph-readout span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-gray-500); margin-bottom: 2px; }
  .chero .hs-tip { display: none; }
  .chero .ch-cap { grid-row: 3; position: static; margin: 0; padding: 10px var(--gutter) 0; background: none; border-radius: 0; color: var(--sd-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chero .ch-panel { grid-row: 4; position: static; width: auto; box-shadow: none; border-radius: 0; padding: 14px var(--gutter) 24px; }
  .chero .hs4 { margin-left: -30px; }
}
/* v25.1: record heading breaks on the sentence, never on a widow */
.ch-rec-h > span { display: block; }
/* v25.1: on narrower or shorter desktops the record needs the room; once it is on screen the panel keeps only its two asks */
@media (min-width: 901px) and (max-width: 1239px), (min-width: 901px) and (max-height: 820px) {
  .ch-panel .pband-lede { max-height: calc((1 - var(--m, 0)) * 9em); opacity: calc(1 - var(--m, 0)); overflow: hidden; }
  .ch-panel .pband-actions { margin-top: calc(18px * (1 - var(--m, 0))); }
  .ch-panel { padding-top: calc(22px - 4px * var(--m, 0)); padding-bottom: calc(24px - 6px * var(--m, 0)); }
}

/* 2 Oct 2026: flown-for-hire finding under the 168 of 451 figure; both sides of the class figure; lighter close. */
.gap-also { margin-top: 56px; border-top: 1px solid var(--sd-navy); padding-top: 32px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.gap-also h3 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--sd-navy); margin: 0; max-width: 16ch; }
.gap-also p { margin: 0; font-size: 1.05rem; color: var(--sd-fg-2); max-width: 56ch; }
.model-sides { margin-top: clamp(56px, 7vw, 96px); border-top: 2px solid var(--sd-navy); padding-top: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.model-sides .ms-copy h3 { font-family: var(--sd-font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--sd-navy); margin: 0; }
.model-sides .ms-copy p { margin-top: 20px; font-size: 1.05rem; color: var(--sd-fg-2); max-width: 44ch; }
@media (max-width: 860px) { .gap-also, .model-sides { grid-template-columns: 1fr; } }
.close-r .actions { align-items: center; }
.home .close .btn--light { background: var(--sd-navy); color: var(--sd-off-white); }
.home .close .btn--light:hover { background: var(--sd-navy-2); }
.home .close .btn--line { border-color: var(--sd-navy); color: var(--sd-navy); }