/* WASID landing — the benchmark build (BENCHMARK.md §1c–§1h). White core, ink chrome, one accent and
   one field per domain (palette.py is the source; tests/test_domain_accents.py holds this file to it).
   Nothing from the Blue Hour site: no old token, hex, class or component. Families live ONLY behind
   the three --font-* variables and in @font-face, so the owner's replacement is one edit. */

/* ── type — set A (Bricolage Grotesque · Instrument Sans · JetBrains Mono), OFL, self-hosted.
      Set B is the commented block; swap the three variables to move.            ────────────── */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("/static/fonts/bricolage-grotesque.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/static/fonts/instrument-sans.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/static/fonts/jetbrains-mono.woff2") format("woff2");}
/* type audit 2026-10-07: set B's three @font-face rules are no longer served (nothing used them). To move to set B,
   add back @font-face for instrument-serif.woff2, public-sans.woff2 and space-mono.woff2 (still in static/fonts),
   then swap the three variables below. */

:root {
  /* the neutral system — BENCHMARK §1h */
  --base: #FFFFFF;
  --ink: #0A0A0A;
  --muted: #5A6472;
  --line: rgba(10,10,10,.12);
  --pill-rest: rgba(10,10,10,.04);
  /* GDACS alert rings (zones layer) — status only, never chrome */
  --alert-red: #D93A2B;
  --alert-orange: #E8622C;

  /* one accent per domain (strokes, eyebrows, rules — never a fill behind text) — FINAL unless vetoed */
  --accent-satellite: #4FC3E8;   /* decorative only; satellite text is ink */
  --accent-airspace: #3D6B99;
  --accent-seas: #0B5E8C;
  --accent-desert: #9A5B2F;     /* held to the clay family (owner brief) */
  --accent-forestry: #1F7A4D;
  --accent-land: #9A5B2F;
  --accent-radio: #5F4B8B;
  --accent-royalties: #7A5C9E;

  /* one field per domain — the fill behind the video only, so a loading loop shows no seam */
  --field-satellite: #000000;
  --field-airspace: #ADD0E7;
  --field-seas: #0B2D4C;
  --field-desert: #CABDB6;      /* the desert poster's edge, measured 2026-10-13 */
  --field-forestry: #FFFFFF;
  --field-land: #A67A55;
  --field-radio: #040307;      /* A1's radio hero loop field (RENDER-LOG §7) */
  --field-royalties: #221D2E;

  /* set A */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* set B — the one-line swap:
  --font-display: "Instrument Serif", Georgia, serif;
  --font-text: "Public Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace; */

  /* the type scale (type audit 2026-10-07, owner pick A). Every font-size on the public pages is one of these;
     tests/test_public_type.py holds bm.css, site.css and legal.css to the list. Fluid steps: px at 1440 / 390. */
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-26: 1.625rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-49: clamp(2.5rem, 3.4vw, 3.25rem);      /* section h2: 49 / 40 */
  --fs-64: clamp(2.5rem, 4.45vw, 4rem);        /* film-stop h2: 64 / 40 */
  --fs-hero: clamp(2.5rem, 4.7vw, 4.5rem);     /* h1, the largest heading: 67.68 / 40 */
  --fs-giant: clamp(6rem, min(16vw, 17.5vh), 18rem);   /* the WASID word only: 157.5 at 1440x900 / 96 */

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* P1.4: the stop index owns this column; its widest entry ("[[ 05 ]] LAND TITLE") is 168 px, plus a 24 px gap.
     At 6.5rem it covered the copy on 29 of 46 scroll steps at 1280 and 28 of 44 at 1024. */
  --rail: 12rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── domain scoping: a surface reads its own accent and field, nothing else ─────────────────── */
[data-domain="satellite"] { --domain-accent: var(--accent-satellite); --domain-field: var(--field-satellite); }
[data-domain="airspace"]  { --domain-accent: var(--accent-airspace);  --domain-field: var(--field-airspace); }
[data-domain="seas"]      { --domain-accent: var(--accent-seas);      --domain-field: var(--field-seas); }
[data-domain="desert"]    { --domain-accent: var(--accent-desert);    --domain-field: var(--field-desert); }
[data-domain="forestry"]  { --domain-accent: var(--accent-forestry);  --domain-field: var(--field-forestry); }
[data-domain="land"]      { --domain-accent: var(--accent-land);      --domain-field: var(--field-land); }
[data-domain="radio"]     { --domain-accent: var(--accent-radio);     --domain-field: var(--field-radio); }
[data-domain="royalties"] { --domain-accent: var(--accent-royalties); --domain-field: var(--field-royalties); }

/* ── base ────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-17);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, th, strong, b { font-weight: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.bm-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.bm-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; }
.bm-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-hero); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
/* owner 2026-10-07 (type audit pick A): section h2 49 px at 1440, 40 at 390; the film-stop h2 is 64 (below) */
.bm-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-49); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; max-width: 20ch; }
.bm-eyebrow { color: var(--muted); margin-bottom: 1rem; }
.bm-body, .bm-lead { max-width: var(--measure); color: var(--muted); }
.bm-lead { font-size: var(--fs-20); line-height: 1.875rem; }   /* the lede: 20/30 */
.bm-lead strong, .bm-body strong { color: var(--ink); font-weight: 400; }
.bm-copy a, .bm-body a, .bm-segments a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.bm-copy a:hover, .bm-body a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bm-skip { position: absolute; left: var(--gutter); top: -3rem; z-index: 40; background: var(--base); color: var(--ink); padding: .5rem 1rem; border: 1px solid var(--ink); font-family: var(--font-mono); font-size: var(--fs-12); }
.bm-skip:focus { top: .75rem; }

/* ── chrome: wordmark, two pills, menu, rail, cue ────────────────────────────────────────────── */
.bm-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  mix-blend-mode: normal;
  transition: transform .32s var(--ease);
}
/* owner 2026-10-07 (P1.4): text ran under the transparent header on 43 of 69 scroll steps at 390 and 34 of
   62 at 1440. The header leaves while reading down (data-away) and comes back frosted (data-frost). The frost
   is a pseudo-element so the header never becomes the containing block of the fixed menu panel. */
.bm-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(10, 10, 10, 0.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  opacity: 0; transition: opacity .24s var(--ease);
}
html[data-chrome="light"] .bm-header::before { background: rgba(6, 8, 12, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
.bm-header[data-frost]::before { opacity: 1; }
.bm-header[data-away] { transform: translateY(-100%); }
/* 44 px is the smallest comfortable tap target on a phone (P1.4 measured the pills at 39 px) */
@media (max-width: 720px) { .bm-pill { min-height: 44px; } }
/* the brand: hive cell + WASID in Instrument Sans 700 at +.14em (owner ask 2026-10-10, 44-homepage-film PLAN §8) */
.bm-wordmark { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-text); font-weight: 700; font-size: var(--fs-26); line-height: 1; letter-spacing: .14em; color: var(--ink); text-decoration: none; }
.bm-cell { width: 2rem; height: 2rem; flex: none; }
.bm-cell-top { fill: none; stroke: #8FD6FF; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.bm-cell-w { fill: none; stroke: currentColor; stroke-width: 17.6; stroke-linecap: round; stroke-linejoin: round; }
.bm-cell-pt { fill: #8FD6FF; }
@media (max-width: 720px) { .bm-wordmark { font-size: var(--fs-20); } .bm-cell { width: 1.5rem; height: 1.5rem; } }
.bm-pills { display: flex; gap: .5rem; }
.bm-pill {
  display: inline-flex; align-items: center;
  background: var(--pill-rest); color: var(--ink);
  border: 1px solid transparent; border-radius: 999px;
  padding: .55rem 1rem; font: inherit; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.bm-pill:hover, .bm-pill:active, .bm-pill[aria-expanded="true"] { background: var(--ink); color: #FFFFFF; }
.bm-pill--action { background: var(--ink); color: #FFFFFF; }
.bm-pill--action:hover { background: var(--pill-rest); color: var(--ink); border-color: var(--line); }
html[data-chrome="light"] .bm-wordmark { color: #FFFFFF; text-shadow: 0 0 10px rgba(143,214,255,.35); }
html[data-chrome="light"] .bm-pill { background: rgba(255,255,255,.14); color: #FFFFFF; }
html[data-chrome="light"] .bm-pill:hover, html[data-chrome="light"] .bm-pill[aria-expanded="true"] { background: #FFFFFF; color: var(--ink); }
html[data-chrome="light"] .bm-pill--action { background: #FFFFFF; color: var(--ink); }
.bm-nav {
  position: fixed; top: 4.25rem; right: var(--gutter); z-index: 30;
  width: min(26rem, calc(100vw - 2 * var(--gutter)));
  background: var(--base); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 24px 64px rgba(10,10,10,.12);
}
.bm-nav[hidden] { display: none; }
.bm-nav-list { list-style: none; display: grid; gap: .1rem; }
.bm-nav-list > li > a, .bm-nav-toggle { display: block; width: 100%; text-align: left; padding: .6rem .5rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--fs-20); font-weight: 400; border-radius: 6px; background: none; border: 0; cursor: pointer; }
.bm-nav-list > li > a:hover, .bm-nav-toggle:hover { background: var(--pill-rest); }
.bm-nav-sub { list-style: none; padding: 0 0 .5rem 1.25rem; }
.bm-nav-sub[hidden] { display: none; }
.bm-nav-sub a { display: block; padding: .35rem .5rem; color: var(--muted); text-decoration: none; font-size: var(--fs-17); }
.bm-nav-sub a:hover { color: var(--ink); }
.bm-nav-card { display: block; margin-top: 1rem; padding: 1rem; background: var(--ink); color: #FFFFFF; border-radius: 8px; text-decoration: none; font-size: var(--fs-14); line-height: 1.45; }
.bm-rail { position: fixed; top: 0; right: 0; width: 2px; height: 100vh; background: var(--line); z-index: 25; pointer-events: none; }
.bm-rail-fill { display: block; width: 100%; height: calc(var(--bm-progress, 0) * 100%); background: var(--ink); transition: height .08s linear; }
.bm-cue { position: absolute; right: var(--gutter); bottom: 1.25rem; color: var(--muted); letter-spacing: .24em; font-size: var(--fs-12); }
/* on a phone the cue sits bottom-left (owner 2026-10-14: nothing else is on the orbit) */
@media (max-width: 720px) { .bm-cue { left: var(--gutter); right: auto; bottom: calc(1.25rem + 0.125rem); } }

/* ── the descent: every stop a full-viewport takeover (owner 2026-09-25) ────────────────────────
   100vh of footage per stop, the copy overlaid on a scrim at the foot of the frame — a dark scrim and
   white copy over a dark field (data-ink="light"), a white scrim and ink copy over a light one. One
   focal element per screen; no white band after a panel. */
.bm-main { display: block; }
.bm-descent-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.descent-stop {
  position: relative; z-index: 1;
  overflow: clip;               /* the footage's 1.08 settle and the globe's framing stay inside the stop */
  background: var(--base);
  min-height: 100vh;
  display: block;
}
.video-panel {
  position: relative;
  width: 100%;
  background: var(--domain-field);
  overflow: hidden;
}
.descent-stop .video-panel { position: absolute; inset: 0; height: 100%; }
.bm-video, .bm-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-poster { z-index: 1; }
.bm-video { z-index: 2; }
/* the loop is shown only once it can play; until then the poster and the field are the picture */
.video-panel[data-playing="1"] .bm-poster { opacity: 0; transition: opacity .4s var(--ease); }
/* the scrim: the foot of the frame, under the copy — toned by the panel's own data-ink */
.video-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, rgba(6,8,12,.82) 0%, rgba(6,8,12,.62) 26%, rgba(6,8,12,.18) 50%, rgba(6,8,12,0) 64%);
}
.video-panel[data-ink="dark"]::after {
  background: linear-gradient(to top, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 26%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 64%);
}
/* at phone width the copy block is taller and climbs into the thin part of the scrim (B2 gate z at 390:
   3.78:1) — the scrim climbs with it */
@media (max-width: 720px) {
  .video-panel[data-ink="dark"]::after { background: linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.93) 48%, rgba(255,255,255,.55) 66%, rgba(255,255,255,0) 82%); }
  .video-panel[data-ink="light"]::after { background: linear-gradient(to top, rgba(6,8,12,.9) 0%, rgba(6,8,12,.8) 48%, rgba(6,8,12,.3) 66%, rgba(6,8,12,0) 82%); }
}
/* a scene of the sequence carries one glass name and no copy: nothing on the picture (owner 2026-10-14; seen in Chrome:
   the wash hid the foot of Kotoka, Aflao, Elubo, Paga, the desert, the forest, Damang and the land plot) */
.video-panel[data-clip]::after { display: none; }
.video-panel[data-domain="satellite"]::after { content: none; }     /* stop 01 has no foot copy */
.bm-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  max-width: 80rem; margin: 0 auto; width: 100%;
  padding: 0 var(--gutter) clamp(3rem, 10vh, 6.5rem) calc(var(--gutter) + var(--rail));
  display: grid; gap: 1.25rem;
  color: #FFFFFF;
}
.descent-stop[data-ink="dark"] .bm-copy { color: var(--ink); }
/* the lede: 20/30 */
.bm-copy p:not(.bm-eyebrow) { max-width: var(--measure); font-size: var(--fs-20); line-height: 1.875rem; color: rgba(255,255,255,.88); }
.descent-stop[data-ink="dark"] .bm-copy p:not(.bm-eyebrow) { color: var(--muted); }
/* the owner's second line under a stop headline (OWNER-COPY.md): one step up from the body, full ink */
.bm-copy p.bm-standfirst { font-size: var(--fs-26); line-height: 1.3; letter-spacing: -.01em; color: #FFFFFF; margin-top: 1rem; }
.descent-stop[data-ink="dark"] .bm-copy p.bm-standfirst { color: var(--ink); }
.bm-copy code { font-family: var(--font-mono); font-size: var(--fs-17); }
.bm-stopname { color: var(--ink); }
/* accents: a rule over the eyebrow; eyebrow text in the accent only where it reads (4.5:1 on white,
   so only over a white scrim) — over a dark scrim it is white */
/* coordinator 2026-09-25: a stop's headline is a display moment — clamp(56px, 6vw, 96px) */
.descent-stop .bm-h2 { font-size: var(--fs-64); line-height: 1; letter-spacing: -.025em; max-width: 18ch; }
.bm-owner--label { text-transform: uppercase; letter-spacing: -.01em; }
/* owner 2026-10-13/14: ONE small glass name per scene — a frosted tag over the picture, bottom-left; no pill bar, no
   accent rule, no colour. Its backing holds 4.5:1 in the WORST case the footage can put beneath it (white under the
   dark glass, black under the light glass) — computed from these two rules in tests/test_eyebrow_backing.py */
.descent-stop .bm-eyebrow { width: max-content; margin-bottom: 0; padding: .5rem .75rem .45rem; border-radius: 3px;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.descent-stop[data-ink="light"] .bm-eyebrow { color: #FFFFFF; }
.descent-stop[data-ink="light"] .bm-eyebrow { background: rgba(6, 8, 12, 0.64); }
.descent-stop[data-ink="dark"] .bm-eyebrow { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.descent-stop[data-ink="dark"] .bm-eyebrow { background: rgba(255, 255, 255, 0.72); }
.bm-link { display: inline-flex; gap: .4rem; align-items: baseline; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; }
.bm-link:hover { text-decoration-color: var(--ink); }
/* type audit 2026-10-07: arrows are drawn (an inline SVG in the text colour), so no glyph falls back to a system face */
.bm-arrow { display: inline-block; flex: none; width: .95em; height: .95em; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bm-link .bm-arrow, .bm-button .bm-arrow, .nav-console .bm-arrow { align-self: center; }
.bm-arrow--down { transform: rotate(90deg); }
.bm-arrow--back { transform: rotate(180deg); }
/* figures set tabular: the ledger, dates, stop numbers, computed counts and prices */
.bm-ledger, .bm-hud, .bm-footer-trademark, .bm-footer-entity, .sourced span, .bm-body, time { font-variant-numeric: tabular-nums; }
.descent-stop[data-ink="light"] .bm-copy a { color: #FFFFFF; text-decoration-color: rgba(255,255,255,.5); }
.descent-stop[data-ink="light"] .bm-copy a:hover { text-decoration-color: #FFFFFF; }

/* stop 01 — the full-viewport scene mount */
.descent-stop--scene { min-height: 100vh; }   /* owner 2026-10-13/14: the live scene alone — no word, no name, no buttons */
/* B2 gate z: the hero copy keeps 4.5:1 over whatever the scene draws behind its left column — a left-edge
   scrim under the copy (the globe sits right, so the scrim never dims the subject) */
/* 2026-10-07 (type audit pick D): z-index 3, not 2 — at 2 the film (.bm-video, z 2, later in the tree) painted over
   it, so the copy sat on the bare film (measured p95: h1 1.43, lead 1.00). The dark plateau holds past the lead's
   right edge (49.5% at 1440) and fades out before the globe's centre (73%). Gate: hero_type_probe.mjs */
.descent-stop--scene::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.84) 0%, rgba(0,0,0,.76) 52%, rgba(0,0,0,0) 76%); }
@media (max-width: 900px) { .descent-stop--scene::before { background: linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.74) 62%, rgba(0,0,0,.35) 80%, rgba(0,0,0,.2) 100%); } }
.descent-stop--scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,0) 100%); }
/* coordinator 2026-10-07: the cue was muted grey over the dark hero (near-invisible); white over the scrim, with
   the name's soft shadow, held to 4.5:1 by hero_type_probe.mjs */
.descent-stop--scene .bm-cue { z-index: 4; color: rgba(255,255,255,.88); text-shadow: 0 0 .5rem rgba(0,0,0,.5); }
.bm-marks { position: absolute; left: 0; right: 0; top: 50%; display: flex; justify-content: space-between; padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--rail)); pointer-events: none; z-index: 3; }
.bm-mark { width: 12px; height: 12px; stroke: #FFFFFF; stroke-width: 1; fill: none; opacity: .55; }
/* 00 loading (owner 2026-10-13): black, the mark alone; lifts in .9 s once the planets are ready (bm.js) */
.bm-loading { position: fixed; inset: 0; z-index: 60; background: #050B18; transition: opacity .9s ease; }
.bm-loading[data-opening="1"] { background: transparent; }
.bm-loading[data-done="1"] { opacity: 0; pointer-events: none; }
.bm-loading-emblem { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the live flight's map credit (owner 2026-10-07: "small tiny and faint ... no colors", then "put back a small grey
   logo"): the film credit's corner. Cesium ion's logo grey and 14 px tall (69 x 14 drawn from its 138 x 28 PNG, so it
   stays sharp to DPR 2) at .9, readable for its terms; the text grey, 9 px, half opacity. Specific enough to outrank
   the stylesheet Cesium injects (white links, blue on hover). Gate: flight_credit_probe.mjs */
.flight-credit { position: absolute; right: var(--gutter); bottom: calc(2.75rem + env(safe-area-inset-bottom)); z-index: 5; pointer-events: auto; }
/* owner 2026-10-13: the map credit mounts in the page's credit strip (#bm-credit-map), not on the video */
.bm-credit-map .flight-credit { position: static; }
.bm-credit-map .flight-credit ~ .flight-credit { display: none; }   /* the hold and the source globe credit the same providers: one line, not two */
.bm-credit-map .flight-credit .cesium-widget-credits { position: static; padding: 0; text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-12); line-height: 1.5; letter-spacing: .06em; color: var(--muted); text-shadow: none; }
.bm-credit-map .flight-credit a, .bm-credit-map .flight-credit .cesium-credit-text, .bm-credit-map .flight-credit .cesium-credit-expand-link { color: inherit; }
.bm-credit-map .flight-credit img { height: 14px; width: auto; vertical-align: middle; filter: grayscale(1); opacity: .9; }
.bm-credit-map .flight-credit .cesium-credit-expand-link { padding: 0; padding-inline-start: .6em; }
.bm-credit-map .flight-credit-view { position: fixed; inset: 4.25rem 0 0 0; z-index: 40; pointer-events: none; }
.bm-credit-map .flight-credit-view .cesium-credit-lightbox-overlay { pointer-events: auto; }
.bm-credit-map:empty { display: none; }
.video-panel .flight-credit .cesium-widget-credits { position: static; padding: 0; white-space: nowrap; text-align: right;
  font: 400 .5625rem/1.4 var(--font-mono); letter-spacing: .06em; color: #B8B8B8; text-shadow: none; }
.video-panel .flight-credit .cesium-credit-textContainer, .video-panel .flight-credit .cesium-credit-expand-link { opacity: .5; }
.video-panel .flight-credit a, .video-panel .flight-credit a:visited, .video-panel .flight-credit a:hover,
.video-panel .flight-credit .cesium-credit-text, .video-panel .flight-credit .cesium-credit-expand-link,
.video-panel .flight-credit .cesium-credit-expand-link:hover { color: inherit; text-decoration-color: currentColor; }
.video-panel .flight-credit .cesium-credit-delimiter { padding: 0 .35em; }
.video-panel .flight-credit .cesium-credit-expand-link { padding: 0; padding-inline-start: .6em; }   /* along the line, upright or vertical */
.video-panel .flight-credit .cesium-credit-textContainer .cesium-credit-wrapper:first-of-type { padding: 0; }
.video-panel .flight-credit .cesium-credit-logoContainer { opacity: .9; }
/* grey, never coloured; a thin dark halo keeps its white letters readable over bright cloud */
.video-panel .flight-credit img { height: 14px !important; width: auto !important; vertical-align: middle !important;
  filter: grayscale(1) drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 2px rgba(0,0,0,.6)); }
/* the provider list opens over the stop, below the fixed header, and stays grey */
.flight-credit-view { position: absolute; left: 0; right: 0; bottom: 0; top: 4.25rem; z-index: 7; pointer-events: none; }
.flight-credit-view .cesium-credit-lightbox-overlay { pointer-events: auto; }
.video-panel .flight-credit-view .cesium-credit-lightbox a:hover, .video-panel .flight-credit-view .cesium-credit-lightbox-close:hover { color: inherit; }
.video-panel .flight-credit-view .cesium-credit-lightbox img { filter: grayscale(1); }
@media (max-width: 720px) { .flight-credit { bottom: max(1rem, env(safe-area-inset-bottom)); right: max(.5rem, env(safe-area-inset-right)); writing-mode: vertical-rl; transform: rotate(180deg); }
  /* phones: the text runs up the edge; the logo stays upright at its foot (the line's turn, undone) */
  .video-panel .flight-credit img { transform: rotate(180deg); }
  .video-panel .flight-credit .cesium-credit-logoContainer { display: inline-block !important; } }
.bm-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.bm-button { display: inline-flex; align-items: center; gap: .4rem; background: var(--ink); color: #FFFFFF; border: 1px solid var(--ink); border-radius: 999px; padding: .8rem 1.4rem; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.bm-button:hover { background: #FFFFFF; color: var(--ink); }
.bm-button--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.bm-button--ghost:hover { background: #FFFFFF; color: var(--ink); }
.bm-pillars { color: var(--ink); list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.bm-pillars li { position: relative; padding-left: 1rem; }
.bm-pillars li::before { content: ""; position: absolute; left: 0; top: .45em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* scrub canvas above the poster and loop; the placeholder panel is the field alone */
.bm-scrub { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; display: block; }
.video-panel[data-placeholder="1"] { background: var(--domain-field); }

/* stop 01: lane A2's module frames the globe itself (disc ≈ 90% of the viewport height, centre at
   73% / 56%, the limb just past the right edge) — no CSS shift on top of it; the copy keeps to the left */

/* ── CTA reprise: inside the last stop's copy ── */
.descent-stop[data-ink="light"] .bm-copy .bm-button { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; text-decoration: none; }
.descent-stop[data-ink="light"] .bm-copy .bm-button:hover { background: transparent; color: #FFFFFF; }
.descent-stop[data-ink="dark"] .bm-copy .bm-button { color: #FFFFFF; text-decoration: none; }
.bm-button--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.bm-button--outline:hover { background: var(--ink); color: #FFFFFF; }

/* ── sector stations (owner 2026-10-14: "EACH SECTOR HAVE ONE SCROLL") ─────────────────────────────
   One full-viewport stop per sector. The stage holds a panel per card; the chosen card's clip is the picture, the
   others fade. The cards ride the foot of the frame, 16:9 posters titled without the sector word; they tilt and
   sheen to the cursor (--mx/--my from bm-stations.js) and the chosen one glows in the sector's own field token
   (--station-field, from the [data-domain] rules above = palette.FIELDS). The glass name sits top-left so the
   cards keep the foot. */
.bm-station { --station-field: var(--domain-field); background: var(--station-field); }
/* a station whose sector is not one of the eight domains carries its own token (palette.STATION_FIELDS, SCENES.md
   S3/S6/S7/S9); the rule reaches the stage's panels too, so a loading loop shows no seam against the stage */
.bm-station[data-station="ports"],  .bm-station[data-station="ports"] [data-domain]  { --domain-field: #0B2D4C; }
.bm-station[data-station="lakes"],  .bm-station[data-station="lakes"] [data-domain]  { --domain-field: #0B2D4C; }
.bm-station[data-station="mining"], .bm-station[data-station="mining"] [data-domain] { --domain-field: #4A3B2C; }
.bm-station[data-station="roads"],  .bm-station[data-station="roads"] [data-domain]  { --domain-field: #1A2230; }
.bm-stage { position: absolute; inset: 0; }
.bm-stage .video-panel { opacity: 0; transition: opacity .6s var(--ease); }
.bm-stage .video-panel[data-active="1"] { opacity: 1; }
/* the dock is one row that scrolls sideways (Forestry holds 16 cards, Ports 10): a card keeps a readable width and
   the row never shrinks it; the scrollbar is hidden, the row snaps card by card; the top padding leaves the tilt
   (scale 1.03) room above the dock's clip */
.bm-cards { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; box-sizing: border-box; width: 100%; max-width: 80rem; margin: 0 auto;
  display: flex; flex-flow: row nowrap; gap: .75rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  padding: .75rem var(--gutter) clamp(1.5rem, 5vh, 3rem) calc(var(--gutter) + var(--rail)); }
.bm-cards::-webkit-scrollbar { display: none; }
.bm-card { --mx: .5; --my: .5; position: relative; flex: 0 0 clamp(10rem, 15vw, 15rem); scroll-snap-align: start; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  overflow: hidden; background: var(--station-field); color: #FFFFFF; font: inherit; text-align: left; cursor: pointer;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.bm-card-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease);
  background: radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,255,255,.3), rgba(255,255,255,0) 55%); }
.bm-card[data-tilt="1"] { transform: perspective(900px) rotateX(calc((.5 - var(--my)) * 12deg)) rotateY(calc((var(--mx) - .5) * 12deg)) scale(1.03); transition: box-shadow .25s var(--ease); }
.bm-card[data-tilt="1"]::after { opacity: 1; }
.bm-card[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 36px 2px var(--station-field); }
.bm-card:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.bm-card-title { position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); padding: .35rem .55rem .3rem; border-radius: 3px;
  background: rgba(6, 8, 12, 0.64); color: #FFFFFF; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25;   /* a place name wraps to a second line, never an ellipsis */
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.bm-station .bm-copy { top: clamp(6.5rem, 16vh, 9rem); bottom: auto; }
@media (max-width: 720px) { .bm-card { flex-basis: 10rem; } }

/* a wide child never widens a section's track */
.bm-section { grid-template-columns: minmax(0, 1fr); }

/* ── the stack ───────────────────────────────────────────────────────────────────────────────── */
/* coordinator 2026-09-25: the stack's spacing doubled; artistically finished & garnished (owner 2026-10-16) */
.bm-section {
  position: relative; z-index: 1; background: var(--base);
  max-width: 72rem; margin: 0 auto;
  padding: clamp(5.5rem, 13vh, 9.5rem) var(--gutter);
  border-top: 1px solid var(--line);
  display: grid; gap: 1.85rem;
}
/* P1.4: the stack starts clear of the stop index too (at 1280 and 1024 it covered Sentinel and Method on 20 and 18 steps) */
.bm-section { padding-left: max(var(--gutter), calc(var(--gutter) + var(--rail) - max(0px, (100vw - 72rem) / 2))); }
.bm-section::before {
  content: ""; position: absolute; top: -1px;
  left: max(var(--gutter), calc(var(--gutter) + var(--rail) - max(0px, (100vw - 72rem) / 2)));
  width: 4.5rem; height: 3px;
  background: linear-gradient(90deg, #0B5E8C 0%, #4FC3E8 100%);
  border-radius: 0 0 2px 2px;
}
.bm-section > .bm-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; width: max-content;
  margin-bottom: .25rem; padding: .42rem .95rem .38rem;
  color: #0B5E8C; background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
  border: 1px solid rgba(11, 94, 140, 0.22); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(7, 16, 32, 0.05), inset 0 1px 0 #FFFFFF;
}
.bm-section > .bm-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #0B5E8C; box-shadow: 0 0 0 3px rgba(11, 94, 140, 0.16);
}
.bm-section > .bm-link {
  display: inline-flex; align-items: center; gap: .55rem; width: max-content;
  padding: .65rem 1.25rem; margin-top: .25rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
  color: var(--ink); border: 1px solid rgba(10, 10, 10, 0.18); border-radius: 999px;
  text-decoration: none; box-shadow: 0 4px 12px rgba(7, 16, 32, 0.05);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.bm-section > .bm-link:hover {
  background: var(--ink); color: #FFFFFF; border-color: var(--ink); transform: translateX(3px);
}
.bm-section .bm-pillars { gap: .75rem 1rem; margin-top: .25rem; }
.bm-section .bm-pillars li {
  padding: .5rem 1.05rem .48rem 1.95rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
  border: 1px solid rgba(10, 10, 10, 0.12); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(7, 16, 32, 0.04);
}
.bm-section .bm-pillars li::before {
  left: .85rem; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; background: #1F7A4D; box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.16);
}
/* the stack's two giant type moments, one per screen (~110 px at 1440) */
.bm-section--moment { min-height: 82vh; align-content: center; border-top: 0; }
/* pick A: the hero h1 stays the largest heading, so the ethic h2 steps down from 109 to the film-stop 64 */
.bm-h2--giant { font-size: var(--fs-64); line-height: .98; letter-spacing: -.03em; max-width: 15ch; }
/* the verticals grid after Method: three picture cards (coordinator 2026-09-25) */
.bm-section--wide { max-width: 88rem; padding-left: calc(var(--gutter) + var(--rail)); }
.bm-verticals { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.bm-vertical {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%);
  border: 1px solid rgba(10, 10, 10, 0.1); border-radius: 14px;
  padding: .85rem .85rem 1.4rem;
  box-shadow: 0 14px 36px rgba(7, 16, 32, 0.06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bm-vertical:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(7, 16, 32, 0.11); }
.bm-vertical-link { display: grid; gap: 1.1rem; color: var(--ink); text-decoration: none; }
.bm-vertical-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #000000; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.bm-vertical-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.bm-vertical-link:hover .bm-vertical-media img { transform: scale(1.04); }
.bm-vertical-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-32); line-height: 1.1; letter-spacing: -.01em; padding: 0 .4rem; }
.bm-vertical .bm-link { margin: 0 .4rem; }
@media (max-width: 720px) { .bm-verticals { grid-template-columns: 1fr; } .bm-section--wide { padding-left: var(--gutter); } .bm-vertical-media { aspect-ratio: 4 / 3; } }

/* S3 — The problem / audience segments plaque (sky blue with clouds & Earth horizon) */
.bm-segments {
  font-family: var(--font-display); font-size: var(--fs-26); line-height: 1.45;
  max-width: 50rem; color: #F2F8FF;
  background-color: #0D3559;
  background-image:
    linear-gradient(135deg, rgba(9, 44, 78, 0.84) 0%, rgba(21, 78, 126, 0.76) 52%, rgba(12, 50, 84, 0.88) 100%),
    url("/static/video/airspace-poster.webp");
  background-size: cover; background-position: center 38%;
  padding: 2rem 2.35rem; border-radius: 14px;
  border: 1px solid rgba(173, 208, 231, 0.48); border-left: 4px solid #8FD6FF;
  box-shadow: 0 20px 48px rgba(9, 40, 77, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
#segments p:not(.bm-eyebrow):not(.bm-segments) {
  font-size: var(--fs-20); line-height: 1.65; color: var(--ink); max-width: 50rem;
  border-left: 3px solid #0B5E8C; padding: .35rem 0 .35rem 1.5rem;
}
#segments p strong {
  color: #0B5E8C; text-decoration: underline; text-decoration-color: rgba(11, 94, 140, 0.45);
  text-underline-offset: .2em; font-weight: 600;
}

/* S5 — Method cards (.bm-verbs) & Measured/Reported diptych (.bm-split) */
.bm-verbs {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem; background: transparent; border: 0;
  counter-reset: bm-verb-step;
}
.bm-verbs li {
  counter-increment: bm-verb-step; position: relative;
  background-color: #EAF4FB;
  background-image:
    linear-gradient(180deg, rgba(244, 250, 255, 0.88) 0%, rgba(212, 234, 248, 0.84) 100%),
    url("/static/video/airspace-poster.webp");
  background-size: cover; background-position: center;
  border: 1px solid rgba(61, 107, 153, 0.28); border-top: 3px solid #0B5E8C; border-radius: 12px;
  padding: 2.35rem 1.6rem 1.75rem;
  box-shadow: 0 14px 32px rgba(11, 62, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bm-verbs li:nth-child(2) { border-top-color: #1F7A4D; background-position: 35% 40%; }
.bm-verbs li:nth-child(3) { border-top-color: #3D6B99; background-position: 65% 55%; }
.bm-verbs li:nth-child(4) { border-top-color: #9A5B2F; background-position: 80% 30%; }
.bm-verbs li:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(11, 62, 107, 0.16); }
.bm-verbs li::before {
  content: "0" counter(bm-verb-step);
  position: absolute; top: 1.15rem; right: 1.15rem;
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em;
  color: #0B3D66; background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(61, 107, 153, 0.26); border-radius: 999px;
  padding: .18rem .55rem; line-height: 1.2;
}
.bm-verbs p { color: #16324F; margin-top: .75rem; line-height: 1.55; }
.bm-verb { color: #071E36; font-size: var(--fs-14); font-weight: 600; }

.bm-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; background: transparent; border: 0; margin-top: .25rem;
}
.bm-split-col {
  background-color: #E6F2FA;
  background-image:
    linear-gradient(145deg, rgba(242, 249, 255, 0.86) 0%, rgba(199, 226, 245, 0.82) 100%),
    url("/static/video/airspace-poster.webp");
  background-size: cover; background-position: center 35%;
  border: 1px solid rgba(61, 107, 153, 0.3); border-left: 4px solid #0B5E8C; border-radius: 12px;
  padding: 2rem 2.25rem;
  box-shadow: 0 14px 34px rgba(11, 62, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.bm-split-col h3 { font-size: var(--fs-14); font-weight: 600; color: #0B5E8C; }
.bm-split-col p { color: #0D253D; margin-top: .75rem; line-height: 1.6; }
.bm-split-col:last-child {
  background-color: #0B2D4E;
  background-image:
    linear-gradient(145deg, rgba(8, 36, 66, 0.84) 0%, rgba(15, 58, 98, 0.8) 100%),
    url("/static/video/satellite-poster.webp");
  background-size: cover; background-position: center 45%;
  color: #F2F8FF; border-color: rgba(143, 214, 255, 0.42); border-left-color: #8FD6FF;
  box-shadow: 0 18px 44px rgba(8, 36, 66, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bm-split-col:last-child h3 { color: #ADD0E7; }
.bm-split-col:last-child p { color: rgba(242, 248, 255, 0.94); }

/* Illustrative Verdict Dossier Card (.bm-verdict) — Orbital Earth & Sky Clouds */
.bm-verdict {
  background-color: #0A2744;
  background-image:
    linear-gradient(155deg, rgba(7, 30, 56, 0.86) 0%, rgba(13, 52, 88, 0.82) 55%, rgba(8, 34, 62, 0.9) 100%),
    url("/static/video/satellite-poster.webp");
  background-size: cover; background-position: center 35%;
  color: #F2F8FF;
  border: 1px solid rgba(173, 208, 231, 0.42); border-radius: 14px;
  padding: 2.25rem 2.5rem; max-width: 48rem;
  display: grid; gap: 1.15rem;
  box-shadow: 0 24px 60px rgba(7, 30, 56, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bm-verdict figcaption {
  color: #C4DEF2; padding-bottom: .75rem;
  border-bottom: 1px dashed rgba(173, 208, 231, 0.3);
}
.bm-verdict-head {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  padding-bottom: 1.15rem; border-bottom: 1px solid rgba(173, 208, 231, 0.26);
}
.bm-verdict-word {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 600; letter-spacing: .16em;
  color: #4CC38A; background: rgba(31, 122, 77, 0.28);
  border: 1px solid rgba(76, 195, 138, 0.55); border-radius: 999px;
  padding: .45rem 1.15rem;
  box-shadow: 0 0 24px rgba(76, 195, 138, 0.2);
}
.bm-verdict-word::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4CC38A; box-shadow: 0 0 10px #4CC38A;
}
.bm-signals { width: 100%; border-collapse: collapse; }
.bm-signals th, .bm-signals td { text-align: left; font-weight: 400; padding: .7rem .75rem .7rem 0; border-bottom: 1px solid var(--line); }
.bm-signals tr:last-child th, .bm-signals tr:last-child td { border-bottom: 0; }
.bm-verdict .bm-signals th, .bm-verdict .bm-signals td {
  padding: .85rem .75rem .85rem 0;
  border-bottom: 1px solid rgba(173, 208, 231, 0.18);
  color: #F2F8FF;
}
.bm-verdict .bm-signals th { text-transform: capitalize; }
.bm-verdict .bm-signals tr:last-child th, .bm-verdict .bm-signals tr:last-child td { border-bottom: 0; }
.bm-stance { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em; color: var(--muted); }
.bm-stance--true { color: var(--ink); }
.bm-verdict .bm-stance { text-align: right; color: #C4DEF2; }
.bm-verdict .bm-stance--true { color: #4CC38A; font-weight: 600; text-shadow: 0 0 14px rgba(76, 195, 138, 0.35); }
.bm-verdict .bm-stance--true::before { content: "● "; color: #4CC38A; font-size: var(--fs-12); }
.bm-verdict-foot { color: #C4DEF2; border-top: 1px solid rgba(173, 208, 231, 0.26); padding-top: 1rem; }

/* S6 — Coverage & Live-Firing News Telemetry Ledger (.bm-ledger) */
.bm-ledger-note {
  margin: .25rem 0 .25rem; font-size: var(--fs-12); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.bm-ledger {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.15rem; border-top: 0;
}
.bm-ledger-row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: .4rem;
  padding: 1.45rem 1.55rem;
  background-color: #E8F3FB;
  background-image:
    linear-gradient(180deg, rgba(244, 250, 255, 0.88) 0%, rgba(208, 231, 247, 0.82) 100%),
    url("/static/video/airspace-poster.webp");
  background-size: cover; background-position: center 42%;
  border: 1px solid rgba(61, 107, 153, 0.32); border-top: 3px solid #0B5E8C; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(11, 62, 107, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  align-items: start;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.bm-ledger-row:nth-child(2n) {
  border-top-color: #1F7A4D;
  background-image:
    linear-gradient(180deg, rgba(242, 249, 255, 0.88) 0%, rgba(204, 229, 246, 0.84) 100%),
    url("/static/video/satellite-poster.webp");
  background-position: center 25%;
}
.bm-ledger-row:nth-child(3n) { border-top-color: #3D6B99; }
.bm-ledger-row:nth-child(4n) { border-top-color: #9A5B2F; }
.bm-ledger-row:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(11, 62, 107, 0.15); }
.bm-ledger-row::after {
  content: ""; position: absolute; top: 1.15rem; right: 1.15rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: #1F7A4D;
  box-shadow: 0 0 0 0 rgba(31, 122, 77, 0.55);
  animation: bm-counter-fire 1.8s ease-out infinite;
}
.bm-ledger-row[data-firing="1"] {
  border-color: rgba(11, 94, 140, 0.68);
  box-shadow: 0 16px 38px rgba(11, 94, 140, 0.22), inset 0 1px 0 #FFFFFF;
}
@keyframes bm-counter-fire {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(31, 122, 77, 0.65); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(31, 122, 77, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(31, 122, 77, 0); }
}
.bm-ledger-row dt {
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .1em;
  text-transform: uppercase; color: #08233E; font-weight: 600; margin-top: .15rem;
}
.bm-ledger-figure {
  order: -1; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-40); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; text-align: left; color: #061A30;
  transition: transform .18s ease, color .18s ease;
}
.bm-ledger-row[data-firing="1"] .bm-ledger-figure {
  color: #0B5E8C; transform: translateY(-1px);
}
.bm-ledger-source {
  grid-column: 1 / -1; color: #2B4C6F;
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .06em;
  padding-top: .55rem; margin-top: .2rem;
  border-top: 1px dashed rgba(11, 62, 107, 0.2);
}
.bm-lang-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; max-width: 60rem; }
.bm-lang { border: 1px solid rgba(61, 107, 153, 0.28); border-radius: 999px; background: #EEF6FC; padding: .3rem .85rem; color: var(--ink); font-size: var(--fs-14); display: inline-flex; align-items: center; gap: .45rem; }
.bm-lang--deep::before, .bm-lang--group::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; border: 1px solid var(--ink); display: inline-block; }
.bm-lang--deep::before { background: var(--ink); }
.bm-lang-legends { display: grid; gap: .35rem; }
.bm-lang-legend { color: var(--muted); display: flex; gap: .5rem; align-items: center; font-size: var(--fs-14); }
.bm-lang-legend a { color: var(--ink); }
.bm-lang-dot { width: .4rem; height: .4rem; border-radius: 50%; border: 1px solid var(--ink); display: inline-block; }
.bm-lang-dot--deep { background: var(--ink); }

/* S7 — Access tiers with Sky Blue & Clouds (airspace-poster.webp) and Orbital Earth (satellite-poster.webp) */
.bm-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; background: transparent; border: none; }
.bm-tier {
  padding: 2.15rem 1.95rem; border-radius: 14px;
  position: relative; overflow: hidden;
  background-color: #0B2E52;
  background-image:
    linear-gradient(155deg, rgba(8, 38, 68, 0.82) 0%, rgba(17, 68, 114, 0.76) 55%, rgba(7, 32, 58, 0.88) 100%),
    url("/static/video/airspace-poster.webp");
  background-size: cover; background-position: center 40%;
  border: 1px solid rgba(173, 208, 231, 0.45); border-top: 3px solid #8FD6FF;
  box-shadow: 0 16px 38px rgba(8, 38, 68, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.bm-tier:hover {
  transform: translateY(-4px);
  border-color: rgba(173, 208, 231, 0.85);
  box-shadow: 0 22px 50px rgba(8, 38, 68, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Tier 1: Stratosphere Sky Blue & Clouds */
.bm-tier:nth-child(1),
.bm-tier[data-step="trial"],
.bm-tier[data-gate-name="Tier card Signal"] {
  background-image:
    linear-gradient(155deg, rgba(9, 44, 78, 0.8) 0%, rgba(22, 82, 134, 0.74) 55%, rgba(8, 36, 66, 0.86) 100%),
    url("/static/video/airspace-poster.webp");
  background-position: center 32%;
  border-top-color: #8FD6FF;
}
.bm-tier:nth-child(1) .bm-tier-name,
.bm-tier[data-step="trial"] .bm-tier-name,
.bm-tier[data-gate-name="Tier card Signal"] .bm-tier-name {
  color: #ADD0E7;
}

/* Tier 2: Orbital Earth & Cloud Canopy */
.bm-tier:nth-child(2),
.bm-tier[data-step="pilot"],
.bm-tier[data-gate-name="Tier card Watch"] {
  background-image:
    linear-gradient(155deg, rgba(7, 36, 62, 0.82) 0%, rgba(16, 66, 104, 0.76) 55%, rgba(8, 42, 58, 0.86) 100%),
    url("/static/video/satellite-poster.webp");
  background-position: center 30%;
  border-top-color: #4CC38A;
}
.bm-tier:nth-child(2) .bm-tier-name,
.bm-tier[data-step="pilot"] .bm-tier-name,
.bm-tier[data-gate-name="Tier card Watch"] .bm-tier-name {
  color: #8FD6FF;
}

/* Tier 3: Horizon Earth & Deep Sky Clouds */
.bm-tier:nth-child(3),
.bm-tier[data-step="annual"],
.bm-tier[data-gate-name="Tier card Advisory"] {
  background-image:
    linear-gradient(155deg, rgba(10, 42, 74, 0.82) 0%, rgba(24, 76, 122, 0.76) 55%, rgba(12, 38, 66, 0.88) 100%),
    url("/static/video/satellite-poster.webp");
  background-position: center 65%;
  border-top-color: #ADD0E7;
}
.bm-tier:nth-child(3) .bm-tier-name,
.bm-tier[data-step="annual"] .bm-tier-name,
.bm-tier[data-gate-name="Tier card Advisory"] .bm-tier-name {
  color: #ADD0E7;
}

/* Shared typography across all tier cards */
.bm-tier-name { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-14); letter-spacing: .12em; text-transform: uppercase; color: #ADD0E7; }
.bm-tier-what { color: #F5FAFF; margin: .65rem 0 1rem; line-height: 1.6; font-size: var(--fs-17); font-family: var(--font-display); }
.bm-tier p:last-child { color: rgba(240, 248, 255, 0.9); font-size: var(--fs-14); line-height: 1.6; }

/* S8 — The Ethic & Operational Boundaries (.bm-limits) */
#ethic {
  background-color: #E8F3FB;
  background-image:
    linear-gradient(155deg, rgba(244, 250, 255, 0.9) 0%, rgba(212, 234, 248, 0.84) 100%),
    url("/static/video/airspace-poster.webp");
  background-size: cover; background-position: center 45%;
  border: 1px solid rgba(61, 107, 153, 0.3); border-left: 5px solid #0B5E8C;
  border-radius: 16px;
  padding: clamp(3.5rem, 8vh, 5.5rem) clamp(2rem, 5vw, 4.5rem);
  margin: clamp(2rem, 5vh, 4rem) auto;
  box-shadow: 0 24px 60px rgba(11, 62, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-height: auto;
}
#ethic::before { display: none; }
#ethic .bm-body { font-size: var(--fs-20); line-height: 1.65; color: #082038; max-width: 52rem; }
.bm-limits {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem; max-width: 56rem; color: var(--ink); margin-top: .5rem;
}
.bm-limits li {
  padding: 1.15rem 1.35rem 1.15rem 2.25rem; position: relative;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(61, 107, 153, 0.24);
  border-left: 3px solid #0B5E8C; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(11, 62, 107, 0.06);
  font-size: var(--fs-14); line-height: 1.55;
}
.bm-limits li::before {
  content: ""; position: absolute; left: .95rem; top: 1.55rem;
  width: 6px; height: 6px; border-radius: 50%; background: #0B5E8C;
}

/* S9 — Request Access Form (.bm-form) */
#request-access .bm-form {
  background-color: #EAF4FB;
  background-image:
    linear-gradient(180deg, rgba(246, 251, 255, 0.92) 0%, rgba(218, 237, 250, 0.86) 100%),
    url("/static/video/airspace-poster.webp");
  background-size: cover; background-position: center 35%;
  border: 1px solid rgba(61, 107, 153, 0.28); border-top: 3px solid #0B5E8C;
  border-radius: 14px; padding: 2.25rem 2.5rem;
  box-shadow: 0 18px 44px rgba(11, 62, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.bm-form { display: grid; gap: 1.15rem; max-width: 42rem; }
.bm-form label { display: grid; gap: .45rem; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.bm-form input, .bm-form select, .bm-form textarea {
  font-family: var(--font-text); font-size: var(--fs-17); color: var(--ink);
  background: #FFFFFF; border: 1.5px solid rgba(11, 45, 76, 0.28); border-radius: 8px;
  padding: .8rem 1rem; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bm-form input:focus, .bm-form select:focus, .bm-form textarea:focus {
  outline: none; border-color: #0B5E8C; box-shadow: 0 0 0 3px rgba(11, 94, 140, 0.16);
}
.bm-form textarea { resize: vertical; min-height: 3.6rem; }
.bm-form .bm-button { justify-self: start; margin-top: .25rem; }
.bm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── footer (owner 2026-10-16: "well arranged", not "bulky and clustered") ─────────────────────────
   One rule, four columns: the brand | Pages (from NAV) | Policies | The desk; the credit strip on its own rule;
   a foot row with the trademark left and the entity right. Figma 01b Home — benchmark · F1 Footer. ── */
.bm-footer {
  position: relative; z-index: 1; background: var(--base);
  max-width: 72rem; margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
  padding-left: max(var(--gutter), calc(var(--gutter) + var(--rail) - max(0px, (100vw - 72rem) / 2)));
  color: var(--muted); display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
.bm-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 4rem); padding: 3.5rem 0; }
.bm-footer-brand { display: grid; gap: .75rem; align-content: start; max-width: 30rem; }
.bm-footer-name { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-26); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.bm-footer-line { color: var(--ink); font-size: var(--fs-17); }
.bm-footer-creed { color: var(--muted); }
.bm-footer-col { display: grid; gap: .6rem; align-content: start; font-size: var(--fs-17); }
.bm-footer-head { color: var(--muted); margin-bottom: .35rem; }
.bm-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bm-footer-links a, .bm-footer-legal a, .bm-footer-contact-link a { color: var(--ink); text-decoration: none; }
.bm-footer-links a:hover, .bm-footer-legal a:hover, .bm-footer-contact-link a:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
.bm-footer-legal { display: grid; gap: .5rem; }
.bm-footer-contact { color: var(--ink); line-height: 1.5; }
.bm-footer-contact-link a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
.bm-footer-contact-link a:hover { text-decoration-color: var(--ink); }
.bm-footer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.bm-footer-trademark { font-size: var(--fs-12); max-width: 64ch; line-height: 1.55; }
.bm-footer-entity { color: var(--muted); white-space: nowrap; }
@media (max-width: 960px) { .bm-footer-grid { grid-template-columns: 1fr 1fr; } .bm-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .bm-footer-grid { padding: 2.5rem 0; gap: 1.75rem 1.25rem; } .bm-footer-col:last-child { grid-column: 1 / -1; } .bm-footer-entity { white-space: normal; } }

/* ── the credit strip (owner 2026-10-13): every imagery and data source slides at the foot of the page, the royalties
   strip's pattern (static/site.css .marks); nothing on the video. Still and wrapped under prefers-reduced-motion.
   2026-10-16: on its own rule inside the footer, no card. ── */
.bm-credits { display: grid; gap: .9rem; max-width: 100%; padding: 2rem 0 2.25rem; border-top: 1px solid var(--line); }
.bm-credits-label { color: var(--muted); font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; }
.bm-credits-row { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.bm-credits-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bm-credits-track { display: flex; width: max-content; animation: bm-credits-drift 60s linear infinite; will-change: transform; }
.bm-credits-row:hover .bm-credits-track, .bm-credits-row:focus-within .bm-credits-track { animation-play-state: paused; }
.bm-credits-list { list-style: none; display: flex; align-items: center; gap: 2.75rem; padding: 0 2.75rem 0 0; margin: 0; }
.bm-credit-mark { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bm-credit-mark img { width: 24px; height: 24px; opacity: .85; }
.bm-credit-map { display: none; }
@keyframes bm-credits-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── the royalty coverage strip (owner 2026-10-16: "make them colorful and vivid, and increase speed, make them in 3 or
   4 horizontal lines"): FOUR horizontal rows of colorful brand SVGs over the Royalties station, between the stage and
   the card dock, alternating directions at a fast pace. ── */
.bm-coverage { position: absolute; left: 0; right: 0; width: 100%; z-index: 4; box-sizing: border-box;
  display: grid; gap: .75rem; padding: 0; background: none; border: 0; box-shadow: none;
  bottom: calc(clamp(10rem, 15vw, 15rem) * 9 / 16 + clamp(1.5rem, 5vh, 3rem) + 1rem); }
.bm-coverage .marks-row { overflow: hidden; border: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.bm-coverage .marks-row:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.bm-coverage .marks-track { display: flex; width: max-content; animation: bm-credits-drift 26s linear infinite; will-change: transform; }
.bm-coverage .marks-row.marks-rev .marks-track { animation-direction: reverse; animation-duration: 22s; }
.bm-coverage .marks-row:nth-child(3) .marks-track { animation-duration: 20s; }
.bm-coverage .marks-row:nth-child(4) .marks-track { animation-duration: 24s; }
.bm-coverage .marks-row:hover .marks-track, .bm-coverage .marks-row:focus-within .marks-track { animation-play-state: paused; }
.bm-coverage .marks-list { list-style: none; display: flex; align-items: center; gap: 2.25rem; padding: 0 2.25rem 0 0; margin: 0; }
.bm-coverage .mark { display: inline-flex; align-items: center; line-height: 0; border: 0; background: none; }
.bm-coverage .mark img { height: 32px; width: auto; max-width: 112px; object-fit: contain; flex: none; opacity: 1; border: 0; filter: saturate(1.35) brightness(1.15) drop-shadow(0 2px 8px rgba(0,0,0,.78)); }
.bm-coverage .marks-legal { display: none; }
@media (max-width: 720px) {
  .bm-coverage { left: 0; right: 0; width: 100%; gap: .5rem; bottom: calc(10rem * 9 / 16 + clamp(1.5rem, 5vh, 3rem) + .75rem); }
  .bm-coverage .marks-list { gap: 1.5rem; padding-right: 1.5rem; }
  .bm-coverage .mark img { height: 24px; width: auto; max-width: 88px; }
  .bm-coverage .marks-legal { display: none; }   /* the notice stands on /royalties; the phone keeps the picture */
}

/* ── motion: finished state is the default; the animation is the enhancement ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* when GSAP runs (html.bm-gsap), it owns the motion and the CSS reveals stand down */
  html.bm-gsap .bm-copy, html.bm-gsap .bm-section > * { animation: none; }
  @supports (animation-timeline: view()) {
    .bm-copy, .bm-section > * { animation: bm-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
  html.bm-io .bm-copy, html.bm-io .bm-section > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  html.bm-io .bm-in, html.bm-io .bm-in > * { opacity: 1; transform: none; }
  .bm-decode { transition: opacity .2s; }
}
@keyframes bm-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* reduced motion = the static stack: poster shown, loop hidden, no rail motion */
@media (prefers-reduced-motion: reduce) {
  .bm-card[data-tilt="1"] { transform: none; }
  html { scroll-behavior: auto; }
  /* the composed static page: nothing eases, not even a hover */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bm-video { display: none; }
  .video-panel .bm-poster { opacity: 1 !important; }
  /* the coverage strip stands still, cut at the edge (its full wrapped list is on /royalties) */
  .bm-coverage .marks-track { animation: none; }
  .bm-coverage .marks-row { -webkit-mask-image: none; mask-image: none; }
  /* the credit strip stands still and wraps */
  .bm-credits-row { -webkit-mask-image: none; mask-image: none; }
  .bm-credits-track { animation: none; width: auto; }
  .bm-credits-list { flex-wrap: wrap; gap: .75rem 2rem; padding-right: 0; }
  .bm-credits-list[aria-hidden="true"] { display: none; }
  .bm-sound[aria-pressed="true"] .bm-sound-dot { animation: none; }
}

/* ── responsive ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) { .bm-verbs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .descent-stop, .descent-stop--scene { min-height: 100vh; min-height: 100svh; }
  .bm-split, .bm-tiers, .bm-limits { grid-template-columns: 1fr; }
  .bm-verbs { grid-template-columns: 1fr; gap: 1rem; }
  .bm-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .bm-ledger-row { grid-template-columns: 1fr; padding: 1.15rem 1.05rem; min-height: 6.75rem; }
  .bm-ledger-figure { text-align: left; font-size: var(--fs-32); }
  .bm-section { padding: 3.5rem var(--gutter); gap: 1.35rem; }
  .bm-segments { padding: 1.35rem 1.35rem; font-size: var(--fs-20); }
  .bm-verbs li { padding: 1.85rem 1.35rem 1.4rem; }
  .bm-split-col { padding: 1.45rem 1.35rem; }
  .bm-verdict { padding: 1.35rem 1.2rem; }
  .bm-tier { padding: 1.5rem 1.35rem; }
  #ethic { padding: 2.25rem 1.35rem; margin: 1.25rem 0; }
  #ethic .bm-h2--giant { font-size: var(--fs-40); }
  #request-access .bm-form { padding: 1.4rem 1.2rem; }
  .bm-form .bm-button { width: 100%; justify-content: center; }
  /* 56 px cannot hold "encroachments," in a 342 px column (probe: no copy cut by the side edges) */
  .descent-stop .bm-h2 { font-size: var(--fs-40); }
  .bm-copy p:not(.bm-eyebrow) { font-size: var(--fs-17); line-height: 1.6; }
  .bm-vertical-title { font-size: var(--fs-20); }
  .bm-copy p.bm-standfirst { font-size: var(--fs-20); line-height: 1.35; }
  .bm-nav { left: var(--gutter); width: auto; }
  .bm-marks { display: none; }          /* at phone width the mid-line crosses the lead paragraph */
  .bm-footer-links { gap: .75rem 1.25rem; }
  /* the progress rail becomes a 2px top bar */
  .bm-rail { top: 0; right: 0; left: 0; width: 100%; height: 2px; }
  .bm-rail-fill { width: calc(var(--bm-progress, 0) * 100%); height: 100%; transition: width .08s linear; }
  :root { --rail: 0rem; }
}
@media (max-width: 390px) {
  .bm-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .bm-ledger-row { padding: 1rem .9rem; min-height: 6.2rem; }
}

/* ── the LIVE SOURCE MAP (row 5, owner 2026-10-14: not heat): a built scene on a dark field, full-bleed like a panel.
   bm-sources.js draws the sources, the firings and the traces on the canvas; without JS the dark field stands. ── */
.bm-sources { position: absolute; inset: 0; height: 100%; width: 100%; background: #05070C; overflow: hidden; }
.bm-sources-canvas, .bm-sources-dark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #05070C; }
.bm-sources-stop { background: #05070C; }
/* the 3D globe (static/live/sources-globe.js) over the canvas: the visitor's pointer is the only hint — grab to orbit,
   a press arms the wheel (is-armed) so the page's scroll is never taken unasked */
.bm-sources-globe { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.bm-sources-globe.is-armed { cursor: all-scroll; }
.bm-sources-globe:active { cursor: grabbing; }
.bm-sources-globe .cesium-widget, .bm-sources-globe .cesium-widget canvas { width: 100%; height: 100%; display: block; }
.bm-sources .flight-credit { position: absolute; right: var(--gutter); bottom: calc(2.75rem + env(safe-area-inset-bottom)); z-index: 5; pointer-events: auto; }

/* ── Sound: the one control for the natural sound beds (static/bm-sound.js). Dark glass like the scene names; a dot
   that breathes while sound is on; bottom left, clear of the station docks and the request button. ── */
.bm-sound { position: fixed; left: 1.25rem; bottom: 0.75rem; z-index: 40; display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .8rem .5rem .7rem; border: 0; border-radius: 3px; cursor: pointer; color: #FFFFFF; background: rgba(6, 8, 12, 0.64);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.bm-sound:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.bm-sound-dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.38); transition: background .3s; }
.bm-sound[aria-pressed="true"] .bm-sound-dot { background: #FFFFFF; animation: bm-sound-breathe 2.4s ease-in-out infinite; }
.bm-sound--armed .bm-sound-dot { background: rgba(255,255,255,.7); }
@keyframes bm-sound-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }