/* bidr.net: the Bidr group as a constellation over a living Earth.
   One space-black ground, ivory type, gold for the brand's lines, cyan only for live tracking. */
/* Fonts served from bidr.net (Latin subsets from Google Fonts, SIL Open Font License): no third-party connection before first paint. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 300 800; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plexmono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/sora-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/sora-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/sora-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --space: #07080a;
  --ink: #f4f2ec;
  --ink-soft: #c9cfd9;
  --ink-mute: #8d95a3;
  --gold: #efc874;
  --gold-line-rgb: 246 214 150;
  --gold-glow-rgb: 246 204 118;
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12.5l9-9M5.5 3.5h7v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
  --gold-rule: rgba(217, 166, 76, 0.38);
  --cyan: #4fe9f3;
  --cyan-text: #a7f6fa;
  --ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Sora", "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 3.47vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--space); color: var(--ink); -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: rgb(var(--gold-line-rgb) / 0.32) var(--space); caret-color: var(--gold); }
::selection { background: rgb(239 200 116 / 0.32); color: #ffffff; }
body {
  margin: 0;
  background: var(--space);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--space); text-decoration: none; border-radius: 3px;
  font-weight: 600;
}
.skip:focus-visible { top: 12px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }

/* ---------- header ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 30;
  pointer-events: none;
}
.brand {
  position: absolute; pointer-events: auto;
  left: 3.47vw; top: calc(3.78 * var(--vh, 1svh));
  width: 8.37vw; min-width: 104px;
}
.brand img { width: 100%; height: auto; }
.status {
  position: absolute; right: 2.85vw; top: calc(4.2 * var(--vh, 1svh));
  margin: 0; display: flex; align-items: center;
  font: 500 clamp(10px, 0.8vw, 14.5px)/1 var(--ui);
  font-stretch: 104%;
  letter-spacing: 0.165em; text-transform: uppercase;
  color: var(--ink-soft);
}
.status__dot {
  width: 0.9em; height: 0.9em; border-radius: 50%; margin-right: 0.95em;
  background: var(--cyan); box-shadow: 0 0 0.7em rgba(79, 233, 243, 0.85);
  animation: live 2.4s ease-in-out infinite;
}
.status__live { color: var(--ink); font-weight: 600; }
.status__sep { width: 1px; height: 1.05em; margin: 0 1.1em; background: rgba(244, 242, 236, 0.35); }
.capture .status__dot { animation: none; }
@keyframes live { 50% { opacity: 0.45; box-shadow: 0 0 0.25em rgba(79, 233, 243, 0.4); } }

/* ---------- hero ---------- */
.hero {
  /* the copy scales with the comp: by width, unless the screen is wider than the comp's 2592:1536,
     when height rules, so the headline and buttons always sit between the orbit and the planet */
  --k: min(1vw, calc(var(--vh, 1svh) * 1.6875));
  position: relative;
  height: 100svh; min-height: 640px; max-height: 1440px;
  overflow: hidden;
  isolation: isolate;
}
.stage { position: absolute; inset: 0; margin: 0; }
.stage canvas { position: absolute; left: 0; display: block; pointer-events: none; }
.stage__stars { top: 0; z-index: 0; }
.stage__earth { z-index: 1; }
.stage__lines { top: 0; z-index: 2; }
.stage__bodies { position: absolute; inset: 0; z-index: 3; }
.no-webgl .stage__earth { display: none; }

.sat {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  will-change: transform;
  --depth: 1;
}
.sat__pos {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 100%;
  container-type: inline-size;
  perspective: 700px;
}
/* a glass-framed photo: hairline gold edge, lens sheen, the photo's own colour glowing behind it */
.sat__card {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: 12px;
  text-decoration: none; color: var(--ink);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out), filter 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
  box-shadow:
    0 0 0 1px rgb(var(--gold-line-rgb) / 0.62),
    0 0 0 4px rgba(7, 8, 10, 0.55),
    0 0 0 5px rgb(var(--gold-line-rgb) / 0.14),
    0 22px 40px -14px rgba(0, 0, 0, 0.9),
    0 0 46px -10px var(--tint);
  filter: brightness(calc(0.72 + 0.28 * var(--depth))) saturate(calc(0.85 + 0.15 * var(--depth)));
  cursor: pointer;
}
.sat__card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 0.8s var(--ease-out); }
.sat__glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 26%, transparent 42%),
    radial-gradient(120% 90% at var(--gx, 30%) 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(to top, rgba(4, 6, 10, 0.95) 0%, rgba(4, 6, 10, 0.72) 34%, transparent 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 -30px 40px -30px rgba(0, 0, 0, 0.6);
}
/* a slow glint crosses each card in turn */
.sat__glass::after {
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 244, 220, 0.22) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: glint 9s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 1.1s + 2s);
}
@keyframes glint { 0% { transform: translateX(-70%); } 14%, 100% { transform: translateX(70%); } }
.sat__meta {
  position: absolute; left: 7.5cqi; right: 7.5cqi; bottom: 6.5cqi;
  display: grid; gap: 2.4cqi; pointer-events: none;
}
.sat__name {
  font: 650 clamp(11px, 9.2cqi, 16px)/1 var(--ui);
  font-stretch: 104%; white-space: normal; text-wrap: balance; line-height: 1.08;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.sat__sub {
  font: 500 clamp(10px, 6.6cqi, 12px)/1 var(--ui);
  letter-spacing: 0.01em; color: rgba(236, 240, 246, 0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.sat__card[href^="tel:"] .sat__sub::after { content: none; }
a.sat__card .sat__sub::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.32em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; color: var(--gold); }
.sat__card:hover, .sat.is-tracked .sat__card {
  box-shadow:
    0 0 0 1px rgba(255, 228, 170, 0.95),
    0 0 0 4px rgba(7, 8, 10, 0.55),
    0 0 0 5px rgb(var(--gold-line-rgb) / 0.3),
    0 26px 48px -14px rgba(0, 0, 0, 0.9),
    0 0 64px -8px var(--tint);
  filter: none;
}
.sat__card:hover img { transform: scale(1.1); }
.sat.is-tracked .sat__name { color: #fff3d6; }
.sat__tether {
  position: absolute; left: -0.5px; top: 0; width: 1px; height: 0;
  transform-origin: 50% 0; rotate: 180deg;
  background: linear-gradient(to top, rgb(var(--gold-line-rgb) / 0.9), rgb(var(--gold-line-rgb) / 0.2));
}
.sat__node {
  position: absolute; left: 0; top: 0;
  width: clamp(7px, 0.62vw, 12px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 38%, #fffbea 0 32%, #f6d27f 58%, #c88d32 100%);
  box-shadow: 0 0 0.6vw rgba(247, 205, 120, 0.75);
  transition: background 0.3s, box-shadow 0.3s;
}
.sat.is-tracked .sat__node {
  background: radial-gradient(circle at 40% 38%, #ffffff 0 30%, #8ff4fa 60%, #1fb8c6 100%);
  box-shadow: 0 0 0.8vw rgba(79, 233, 243, 0.9);
}
.sat__flag { display: none; }
.hero.is-aiming { cursor: crosshair; }
.readout.is-locked { border-color: var(--cyan); }
.readout.is-locked::after {
  content: attr(data-hint); position: absolute; left: 0; top: -1.9em; white-space: nowrap;
  font: 500 9.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan);
}
/* x-ray tags: what moves, and how it was made */
.xtag, html[data-view="xray"] .brand::after, .hero[data-mode="xray"] .copy::before, .sat__data {
  padding: 5px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cyan-text); background: rgba(4, 10, 18, 0.86); box-shadow: inset 0 0 0 1px rgba(79, 233, 243, 0.42);
}
.xtag { position: absolute; left: 0; top: 0; z-index: 7; opacity: 0; transition: opacity 0.4s var(--ease-out); }
.hero[data-mode="xray"] .xtag { opacity: 1; }
html[data-view="xray"] .brand::after { content: "Logo · brand asset"; position: absolute; left: 0; top: calc(100% + 10px); }
.hero[data-mode="xray"] .copy::before { content: "Live HTML text"; position: absolute; left: 50%; top: -38px; transform: translateX(-50%); }
.sat__data {
  position: absolute; left: 0; top: 14px; white-space: nowrap; transform: translateX(-50%); text-align: center; line-height: 1.5 !important;
  font-size: clamp(9px, 0.66vw, 11px); text-transform: none; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
html[data-motion="still"] .sat__glass::after, .capture .sat__glass::after { animation: none; transform: translateX(-70%); }

.readout {
  position: absolute; left: 0; top: 0; z-index: 4; margin: 0;
  display: flex; gap: 1.05em; align-items: center; justify-content: center;
  width: 11.15vw; height: calc(4.56 * var(--vh, 1svh)); min-height: 30px; padding: 0;
  font: 500 clamp(9px, 0.74vw, 13px)/1 var(--mono);
  letter-spacing: 0; color: var(--cyan-text);
  background:
    linear-gradient(var(--cyan), var(--cyan)) 0 0 / 1.15em 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 0 / 2px 1.15em no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 0 / 1.15em 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 0 / 2px 1.15em no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 100% / 1.15em 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 100% / 2px 1.15em no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 100% / 1.15em 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 100% / 2px 1.15em no-repeat,
    rgba(4, 13, 22, 0.86);
  border: 1px solid rgba(79, 233, 243, 0.38);
  white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums;
  will-change: transform;
}

.copy {
  position: absolute; z-index: 5;
  left: 50%; top: calc(26.55 * var(--vh, 1svh));
  width: calc(46 * var(--k)); transform: translateX(-50%);
  text-align: center;
}
.copy h1 {
  margin: 0;
  font: 700 calc(3.743 * var(--k))/1.06 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.copy h1 span { display: block; }
.lede {
  margin: calc(1.85 * var(--vh, 1svh)) auto 0;
  max-width: calc(32 * var(--k));
  font: 400 calc(1.23 * var(--k))/1.36 var(--ui);
  color: var(--ink-soft);
}
.actions { display: flex; align-items: center; gap: 1.6vw; }
.copy .actions {
  flex-direction: column; gap: calc(1.45 * var(--vh, 1svh));
  margin-top: calc(2.35 * var(--vh, 1svh));
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; height: calc(4.75 * var(--vh, 1svh)); min-width: 13.27vw; padding: 0 1.4em;
  font: 650 clamp(14px, 1.12vw, 19px)/1 var(--ui);
  color: #0b0c10; background: var(--ink); text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: background 0.2s, transform 0.2s var(--ease-out);
}
.btn:hover { background: #ffffff; }
.copy .btn { min-width: calc(13.27 * var(--k)); font-size: clamp(14px, calc(1.12 * var(--k)), 19px); }
.copy .link { font-size: clamp(14px, calc(1.08 * var(--k)), 18px); }
.link {
  display: inline-flex; align-items: center; min-height: 32px; text-decoration: none;
  font: 500 clamp(14px, 1.08vw, 18px)/1 var(--ui);
  color: var(--ink);
}
.link__label {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding-bottom: 0.62em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.3s var(--ease-out);
}
.link svg { width: 1.05em; height: 1.05em; transition: transform 0.25s var(--ease-out); }
.link:hover svg { transform: translate(2px, -2px); }

.modes {
  position: absolute; z-index: 6;
  left: 50%; top: calc(90.25 * var(--vh, 1svh));
  transform: translateX(-50%);
  display: flex; align-items: center;
  width: 17.3vw; justify-content: space-evenly;
  height: calc(4.2 * var(--vh, 1svh)); min-height: 34px; padding: 0;
  border: 1.5px solid rgba(236, 200, 124, 0.8); border-radius: 999px;
  background: rgba(5, 8, 14, 0.42);
}
.modes__btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 32px; padding: 0 0.4vw;
  font: 500 clamp(12.5px, 0.98vw, 17px)/1 var(--ui);
  color: var(--ink-soft); background: none; border: 0; cursor: pointer;
  transition: color 0.2s;
}
.modes__btn:hover { color: var(--ink); }
.modes__btn[aria-pressed="true"] { color: #f6d58e; font-weight: 600; }
.modes__dot {
  width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--ink-mute);
  transition: background 0.3s, box-shadow 0.3s;
}
.modes__btn[aria-pressed="true"] .modes__dot,
.hero[data-mode="live"] .modes__dot { background: var(--cyan); box-shadow: 0 0 0.6em rgba(79, 233, 243, 0.8); }
.hero:not([data-mode="live"]) .modes__dot { background: var(--ink-mute); box-shadow: none; }
.modes__sep { width: 1.5px; height: 1em; background: rgba(244, 242, 236, 0.55); }

.legend {
  position: absolute; z-index: 6; left: 3.47vw; bottom: calc(5 * var(--vh, 1svh));
  margin: 0; display: grid; gap: 0.6em; padding: 14px 16px; border-radius: 10px;
  background: rgba(4, 8, 14, 0.82); box-shadow: inset 0 0 0 1px rgba(79, 233, 243, 0.25);
  font: 500 clamp(9.5px, 0.72vw, 12.5px)/1.3 var(--mono);
  letter-spacing: 0.04em; color: var(--ink-soft);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s 0.45s;
}
.legend div { display: flex; gap: 1em; }
.legend dt { width: 7.5em; color: var(--cyan-text); text-transform: uppercase; }
.legend dd { margin: 0; }

/* x-ray: the photos step back, the machinery shows */
.hero[data-mode="xray"] .sat__card { opacity: 0.2; filter: grayscale(1); }
.hero[data-mode="xray"] .sat__data { opacity: 1; }
.hero[data-mode="xray"] .legend { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------- shared section grammar ---------- */
main > section:not(.hero) { position: relative; }
.head { margin: 0 var(--gutter); max-width: 64rem; }
.eyebrow {
  margin: 0 0 1.1rem;
  font: 500 12px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}
.head h2, .talk h2 {
  margin: 0;
  font: 700 clamp(2.1rem, 4.3vw, 5rem)/1.02 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.head__lede {
  margin: 1.4rem 0 0; max-width: 40em;
  font: 400 clamp(17px, 1.3vw, 21px)/1.55 var(--ui);
  color: var(--ink-soft);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgb(var(--gold-line-rgb) / 0.32);
  font: 500 13.5px/1 var(--ui); color: var(--ink);
  background: rgb(var(--gold-line-rgb) / 0.05);
}
.chips--quiet li { border-color: rgba(244, 242, 236, 0.18); background: none; color: var(--ink-soft); }
.sector__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.sector__link {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 32px;
  font: 500 15.5px/1 var(--ui); color: var(--ink); text-decoration: none;
  padding-bottom: 6px;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat;
}
.sector__link::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; color: var(--gold); transition: transform 0.25s var(--ease-out); }
.sector__link[href^="tel:"]::after { content: none; }
.sector__link:hover::after { transform: translate(2px, -2px); }

/* reveal on scroll (only once the script is running, so nothing hides without it) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- the Bidr group: an automated concave rail ---------- */
.group { padding: clamp(68px, 6.5vw, 120px) 0 clamp(56px, 5vw, 96px); border-top: 1px solid var(--gold-rule); overflow: hidden; }
.rail-wrap { position: relative; margin-top: clamp(48px, 5vw, 88px); perspective: 1700px; perspective-origin: 50% 40%; }
.rail {
  --card-w: clamp(230px, 19vw, 360px);
  --card-h: calc(var(--card-w) * 1.4);
  position: relative; height: calc(var(--card-h) * 1.32);
  transform-style: preserve-3d;
}
.rail__item {
  position: absolute; left: 50%; top: 4%;
  width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2);
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  border-radius: 14px;
  /* coverflow: the front card squares up to you, its neighbours swing back and recede */
  transform: translateX(var(--x, 0px)) translateZ(calc(var(--abs, 0) * -170px)) rotateY(calc(var(--dir, 0) * -36deg));
  transition: transform 0.75s var(--ease-out), opacity 0.5s var(--ease-out), box-shadow 0.4s;
  box-shadow: 0 0 0 1px rgb(var(--gold-line-rgb) / 0.45), 0 30px 60px -20px rgba(0, 0, 0, 0.85);
}
.rail__item.no-anim { transition: none; }
.rail__item.is-out { opacity: 0; pointer-events: none; }
.rail__item img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: filter 0.6s; filter: brightness(0.78) saturate(0.9); }
.rail__item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.18), transparent 34%), linear-gradient(to top, rgba(4, 6, 10, 0.9), transparent 42%);
}
.rail__item span {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 1; text-align: center;
  font: 650 clamp(11px, 0.86vw, 15px)/1 var(--ui); font-stretch: 108%;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold);
  opacity: calc(1 - clamp(0, var(--abs, 0) - 1, 1)); transition: opacity 0.4s var(--ease-out), color 0.4s;
}
.rail__item[aria-selected="true"] { box-shadow: 0 0 0 1.5px rgba(255, 232, 180, 0.95), 0 0 70px -12px rgb(var(--gold-glow-rgb) / 0.55), 0 30px 60px -20px rgba(0, 0, 0, 0.85); }
.rail__item[aria-selected="true"] img, .rail__item:hover img { filter: none; }
.rail__item img.rail__mirror {
  position: absolute; left: 0; top: calc(100% + 10px); height: 100%; pointer-events: none;
  transform: scaleY(-1); filter: brightness(0.7) saturate(0.9); opacity: 0.32;
  -webkit-mask: linear-gradient(to bottom, transparent 62%, #000 100%); mask: linear-gradient(to bottom, transparent 62%, #000 100%);
}
.rail__item[aria-selected="true"] span { color: #fff3d6; }

.sector-bar { display: flex; align-items: center; justify-content: center; gap: 28px; margin: clamp(28px, 3vw, 48px) var(--gutter) 0; }
.sector-bar__ticks { display: flex; gap: 6px; }
.sector-bar__ticks i { position: relative; width: 30px; height: 2px; background: rgba(244, 242, 236, 0.18); overflow: hidden; }
.sector-bar__ticks i.is-done { background: rgb(var(--gold-line-rgb) / 0.6); }
.sector-bar__ticks i.is-active::after {
  content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%;
  animation: tick var(--dwell, 6s) linear forwards;
}
.rail-paused .sector-bar__ticks i.is-active::after, html[data-motion="still"] .sector-bar__ticks i.is-active::after { animation-play-state: paused; }
@keyframes tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sector-bar__ctl { display: flex; gap: 8px; }
.ctl {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgb(var(--gold-line-rgb) / 0.45); background: rgba(7, 8, 10, 0.4);
  color: var(--ink); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.ctl:hover { border-color: var(--gold); background: rgb(var(--gold-line-rgb) / 0.08); }
.ctl svg { width: 14px; height: 14px; }
.ctl--play .i-play, .ctl--play[aria-pressed="true"] .i-pause { display: none; }
.ctl--play[aria-pressed="true"] .i-play { display: block; }

.sectors { margin: clamp(36px, 4vw, 64px) var(--gutter) 0; min-height: 300px; }
.sector { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 6vw; align-items: start; max-width: 1180px; margin: 0 auto; }
.js .sector { display: none; }
.js .sector.is-active { display: grid; animation: sectorIn 0.7s var(--ease-out); }
@keyframes sectorIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sector h3 { grid-column: 1; margin: 0; font: 700 clamp(2.2rem, 4vw, 4.4rem)/1 var(--display); letter-spacing: -0.03em; }
.sector h3 a { text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size 0.4s var(--ease-out); }
.sector h3 a::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.32em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; font-size: 0.45em; vertical-align: 0.9em; color: var(--gold); }
.sector h3 a:hover { background-size: 100% 2px; }
.sector > p, .sector > .chips, .sector > .sector__links { grid-column: 2; }
.sector > p { grid-row: 1 / span 2; margin: 0; font: 400 clamp(17px, 1.3vw, 21px)/1.6 var(--ui); color: var(--ink-soft); }
.sector > .chips { margin-top: 4px; }
.sector > .sector__links { margin-top: 10px; }

/* ---------- numbers ---------- */
.numbers { padding: clamp(56px, 5.5vw, 96px) var(--gutter); border-top: 1px solid var(--gold-rule); }
/* a ruled scale: one gold rule with minor ticks every 24px and a major tick where each figure is read */
.stats {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 56px); margin: 0;
  padding-top: 34px;
  background:
    linear-gradient(rgb(var(--gold-line-rgb) / 0.55), rgb(var(--gold-line-rgb) / 0.55)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgb(var(--gold-line-rgb) / 0.32) 0 1px, transparent 1px 24px) 0 1px / 100% 7px no-repeat;
}
.stat { position: relative; }
.stat::before { content: ""; position: absolute; left: 0; top: -34px; width: 1px; height: 18px; background: var(--gold); }
.stat dt { font: 500 15px/1.3 var(--ui); color: var(--ink-soft); }
.stat dd { margin: 12px 0 0; }
.stat__n { display: block; font: 700 clamp(3rem, 5.8vw, 6.6rem)/0.95 var(--display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat small { display: block; margin-top: 14px; font: 400 15px/1.5 var(--ui); color: var(--ink-mute); max-width: 22em; }

/* ---------- Sourcewell ---------- */
.sourcewell { padding: clamp(68px, 6.5vw, 120px) 0; border-top: 1px solid var(--gold-rule); }
.contracts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin: clamp(40px, 4vw, 72px) var(--gutter) 0; }
.contract {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(380px, 32vw, 520px); padding: clamp(26px, 2.6vw, 44px);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 14px;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgb(var(--gold-line-rgb) / 0.45), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.contract::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--photo) center 30% / cover no-repeat;
  transition: transform 1.4s var(--ease-out);
}
.contract::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5, 7, 11, 0.97) 8%, rgba(5, 7, 11, 0.78) 46%, rgba(5, 7, 11, 0.2) 100%), linear-gradient(118deg, rgba(255, 255, 255, 0.14), transparent 30%);
}
.contract:hover::before { transform: scale(1.04); }
.contract h3 { margin: 0; font: 700 clamp(2rem, 3.2vw, 3.4rem)/1 var(--display); letter-spacing: -0.03em; }
.contract h3 a { text-decoration: none; }
.contract h3 a::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.32em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; font-size: 0.5em; vertical-align: 0.8em; color: var(--gold); }
.contract > p:not([class]) { margin: 0; max-width: 34em; font: 400 16.5px/1.55 var(--ui); color: var(--ink-soft); }
.contract__vendor { margin: -4px 0 0; font: 500 14.5px/1.3 var(--ui); color: var(--gold); }
.contract__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.btn--sm { height: 44px; min-width: 0; padding: 0 20px; font-size: 14.5px; }
.term { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 14px; border-top: 1px solid rgba(244, 242, 236, 0.16); }
.term__label { font: 500 14px/1.3 var(--ui); color: var(--ink); }
.term__days { font: 500 13px/1 var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.buyers { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: clamp(28px, 3vw, 44px) var(--gutter) 0; }
.buyers__title { margin: 0; font: 600 16px/1.2 var(--ui); color: var(--ink); }

/* ---------- services ---------- */
.services { padding: clamp(68px, 6.5vw, 120px) 0; border-top: 1px solid var(--gold-rule); }
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 56px); margin: clamp(40px, 4vw, 72px) var(--gutter) 0; padding: 0; list-style: none; }
.svc li { padding: 28px 0 40px; border-top: 1px solid rgba(244, 242, 236, 0.14); transition: border-color 0.3s; }
.svc li:hover { border-top-color: var(--gold); }
.svc__n { display: block; font: 500 12.5px/1 var(--mono); color: var(--gold); letter-spacing: 0.12em; }
.svc h3 { margin: 18px 0 10px; font: 600 clamp(1.25rem, 1.6vw, 1.7rem)/1.15 var(--display); letter-spacing: -0.025em; }
.svc p { margin: 0; font: 400 16px/1.55 var(--ui); color: var(--ink-soft); max-width: 30em; }

/* ---------- leadership ---------- */
.team { padding: clamp(56px, 5.5vw, 96px) var(--gutter); border-top: 1px solid var(--gold-rule); }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 56px); margin: 22px 0 0; padding: 0; list-style: none; }
.people li { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid rgb(var(--gold-line-rgb) / 0.4); }
.people__name { font: 600 clamp(1.6rem, 2.5vw, 2.8rem)/1.05 var(--display); letter-spacing: -0.035em; }
.people__role { font: 500 12.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* ---------- talk ---------- */
.talk {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(110px, 12vw, 220px) var(--gutter) clamp(120px, 13vw, 240px);
  border-top: 1px solid var(--gold-rule);
  text-align: center;
}
.talk { padding-bottom: clamp(170px, 18vw, 320px); }
.talk__glow {
  position: absolute; z-index: -1; left: 50%; bottom: -129vw;
  width: 180vw; height: 140vw; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, #05070b 97.2%, transparent 100%);
  /* the atmosphere: a thin bright limb, and light that spills upward off it */
  box-shadow: 0 -1.5px 0 0 rgba(150, 205, 255, 0.95), 0 -10px 26px -6px rgba(64, 150, 255, 0.6), 0 -60px 120px -30px rgba(40, 110, 230, 0.35);
}
.talk h2 { font-size: clamp(3.2rem, 8.4vw, 9.5rem); letter-spacing: -0.035em; }
.talk__lede { margin: 22px auto 0; font: 400 clamp(17px, 1.35vw, 22px)/1.5 var(--ui); color: var(--ink-soft); }
.talk .actions { justify-content: center; flex-wrap: wrap; gap: 16px 28px; margin-top: clamp(40px, 3.6vw, 64px); }
.talk .btn { height: 54px; min-width: 0; padding: 0 28px; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.6); }
.btn--ghost:hover { background: rgb(var(--gold-line-rgb) / 0.08); }

/* ---------- borrowed motions, rebuilt in this world ---------- */
/* ambient light behind the rail takes the colour of the sector in front */
.group__ambient { position: absolute; inset: 18% -10% 10%; z-index: -1; pointer-events: none; }
.group__ambient i {
  position: absolute; inset: 0; background: center / cover no-repeat;
  filter: blur(90px) saturate(1.3); opacity: 0; transition: opacity 1.4s var(--ease-out);
}
.group__ambient i.is-on { opacity: 0.32; }
.group { isolation: isolate; }

/* spotlight: a soft light follows the pointer across a panel, with a lit edge */
.svc li, .people li {
  position: relative; isolation: isolate;
  padding: 26px 26px 34px; border-top: 0; border-radius: 16px;
  background: rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.16);
}
.svc { gap: clamp(14px, 1.6vw, 24px); }
.people { gap: clamp(14px, 1.6vw, 24px); }
.people li { padding: 0 26px 26px; overflow: hidden; }
/* portraits from bidrtech.com/team, framed to one head size; each figure fades into its card */
.people__photo {
  display: block; width: calc(100% + 52px); max-width: none; height: auto; aspect-ratio: 4 / 3; margin: 0 -26px 4px;
  object-fit: contain; object-position: 50% 100%;
  filter: saturate(0.92); transition: transform 0.8s var(--ease-out), filter 0.6s var(--ease-out), opacity 0.55s var(--ease-out);
  transform-origin: 50% 20%;
}
/* downlink: the dither sits exactly over the photo's box until the photo resolves through it */
.people__dither { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transition: opacity 0.55s var(--ease-out); }
.people li.is-armed .people__photo, .people li.is-downlink .people__photo, .people li.is-xray .people__photo { opacity: 0; }
.people li.is-downlink .people__dither, .people li.is-xray .people__dither { opacity: 1; transition: none; }
.people li.is-downlink.is-resolved .people__photo { opacity: 1; }
.people li.is-downlink.is-resolved .people__dither { opacity: 0; transition: opacity 0.55s var(--ease-out); }
.people li:hover .people__photo { transform: scale(1.03); filter: none; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--gold-line-rgb) / 0.10), transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 226, 160, 0.85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* a gold light travels the edge of each Sourcewell contract */
@property --edge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.contract { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.contract__edge {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: conic-gradient(from var(--edge), rgb(var(--gold-line-rgb) / 0.35) 0deg, rgb(var(--gold-line-rgb) / 0.35) 250deg, rgba(255, 236, 190, 1) 300deg, rgb(var(--gold-line-rgb) / 0.35) 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edge 7s linear infinite;
}
.contract:nth-child(2) .contract__edge { animation-delay: -3.5s; }
@keyframes edge { to { --edge: 360deg; } }
html[data-motion="still"] .contract__edge { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .contract__edge { animation: none; } .group__ambient i { transition: none; } }

/* the Bidr satellite */
.bot { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.bot__body { position: absolute; left: 0; top: 0; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); }
.bot__dish { position: absolute; transform-origin: 0% 50%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.bot__led {
  position: absolute; left: 56%; top: 36%; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(79, 233, 243, 0.85);
  animation: live 1.8s ease-in-out infinite;
}
.bot.is-pinging .bot__led { animation: ping 0.9s var(--ease-out); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(79, 233, 243, 0.9); } 100% { box-shadow: 0 0 0 26px rgba(79, 233, 243, 0); } }
.bot__hit { position: absolute; inset: 12% 22%; pointer-events: auto; background: none; border: 0; border-radius: 40%; cursor: pointer; }
.bot__say {
  position: absolute; left: 0; top: 0; z-index: 8; margin: 0; max-width: 280px; white-space: normal;
  padding: 9px 13px; border-radius: 10px;
  font: 500 12px/1.35 var(--mono); color: var(--cyan-text);
  background: rgba(4, 10, 18, 0.9); box-shadow: inset 0 0 0 1px rgba(79, 233, 243, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-out);
}
.bot__say.is-on { opacity: 1; }
.capture .bot__led { animation: none; }

/* cinematic word reveal */
.js .words .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(0.28em); transition: opacity 0.9s var(--ease-out), filter 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--wi) * 70ms + var(--wd, 0ms)); }
.js .words.is-in .w { opacity: 1; filter: none; transform: none; }
.capture .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.capture .words .w { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

/* rolling digits */
.roll { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; line-height: 1; }
.roll__strip { display: flex; flex-direction: column; transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--ri) * 110ms); }
.roll__strip span { height: 1em; line-height: 1; }
.stat__n { line-height: 1 !important; }

/* magnetic call buttons with a passing shine */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background 0.2s, transform 0.5s var(--ease-out); }
.btn::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 0s;
}
.btn--ghost::after { background: linear-gradient(105deg, transparent 35%, rgb(var(--gold-line-rgb) / 0.28) 50%, transparent 65%); }
.btn:hover::after { transform: translateX(120%); transition: transform 0.9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .js .words .w { opacity: 1; filter: none; transform: none; transition: none; }
  .roll__strip { transition: none; }
  .btn::after { display: none; }
}

/* Sourcewell awarded badge, used unaltered, with its contract number */
.sw-badge {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; text-decoration: none;
  font: 600 14.5px/1.2 var(--ui); color: var(--ink);
}
.sw-badge img { height: 46px; width: auto; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); transition: transform 0.3s var(--ease-out); }
.sw-badge span { padding-bottom: 5px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; }
.sw-badge span::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.32em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; color: var(--gold); }
.sw-badge:hover img { transform: translateY(-2px); }
.sector > .sw-badge { grid-column: 2; margin-top: 0; }
.contract .sw-badge { margin: 0 0 6px; align-self: flex-start; }
.contract .sw-badge img { height: 52px; }
/* the Sourcewell awards, bottom left of the hero: the badge and both contract numbers */
.hero-sw {
  position: absolute; z-index: 6; left: 3.47vw; bottom: calc(5 * var(--vh, 1svh));
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 16px 10px 10px; border-radius: 10px;
  background: rgba(4, 8, 14, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.28);
  transition: opacity 0.4s var(--ease-out), visibility 0s;
}
.hero-sw img { display: block; height: 44px; width: auto; border-radius: 4px; }
.hero-sw { text-decoration: none; color: var(--ink-soft); }
.hero-sw:hover { box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.6); }
.hero-sw__list { display: grid; gap: 6px; }
.hero-sw__list > span { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font: 500 12.5px/1.2 var(--ui); color: var(--ink-soft); }
.hero-sw__list b { color: var(--ink); font-weight: 600; }
.hero-sw__go { align-self: center; margin-left: 4px; padding-left: 14px; border-left: 1px solid rgb(var(--gold-line-rgb) / 0.22); font: 600 12.5px/1.2 var(--ui); color: var(--gold); white-space: nowrap; }
.hero[data-mode="xray"] .hero-sw { opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease-out), visibility 0s 0.3s; }

/* ---------- instruments (21st.dev picks, rebuilt in this world) ---------- */
/* lens: the coverflow's outer cards soften toward the edges, like the falloff of a long lens */
.rail-lens { position: absolute; top: 0; bottom: 0; width: 32%; z-index: 30; pointer-events: none; }
.rail-lens--l { left: 0; }
.rail-lens--r { right: 0; }
.rail-lens i { position: absolute; inset: 0; }
.rail-lens i:nth-child(1) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); --m: 58%; }
.rail-lens i:nth-child(n + 2) { display: none; }
.rail-lens--l i { -webkit-mask: linear-gradient(to right, #000 0%, transparent var(--m)); mask: linear-gradient(to right, #000 0%, transparent var(--m)); }
.rail-lens--r i { -webkit-mask: linear-gradient(to left, #000 0%, transparent var(--m)); mask: linear-gradient(to left, #000 0%, transparent var(--m)); }

/* identifier tape: the group's facts on one slow ticker */
.tape {
  position: relative; overflow: hidden; padding: 17px 0;
  border-top: 1px solid var(--gold-rule);
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tape__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: tape var(--tape-dur, 90s) linear infinite; }
.tape__track li {
  display: inline-flex; align-items: center; gap: 0.55em; padding-left: 1.5em; white-space: nowrap;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.tape__track li::after { content: ""; width: 5px; height: 5px; margin-left: 1.5em; background: var(--gold); opacity: 0.7; transform: rotate(45deg); }
.tape__track b { color: var(--gold); font-weight: 600; }
.tape:hover .tape__track, html[data-motion="still"] .tape__track, .capture .tape__track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }

/* contract terms ruled into the months they have left */
.term__ticks { position: relative; flex-basis: 100%; display: flex; height: 34px; margin-top: 4px; }
.term__ticks i { position: relative; flex: 1; }
.term__ticks i::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 8px; margin-left: -0.75px;
  background: rgb(var(--gold-line-rgb) / 0.55); transform-origin: 50% 0; transform: scaleY(0);
  transition: transform 0.5s var(--ease-out); transition-delay: calc(var(--k) * 16ms + 200ms);
}
.term__ticks i.is-year::before { height: 13px; background: rgb(var(--gold-line-rgb) / 0.9); }
.term__ticks i.is-end::before { height: 15px; background: var(--gold); }
.term__ticks i.is-now::before { height: 15px; width: 2px; background: var(--ink); }
.term__ticks.is-on i::before { transform: none; }
.term__ticks i[data-l]::after {
  content: attr(data-l); position: absolute; top: 19px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-mute);
}
.term__ticks i.is-now::after { left: 0; transform: none; color: var(--ink); }
.term__ticks i.is-end::after { left: auto; right: 0; transform: none; color: var(--gold); }

/* scroll caliper: desktop only, shown once the hero is behind you */
.caliper {
  position: fixed; z-index: 40; right: 26px; top: 50%; width: 24px; height: 52vh; transform: translateY(-50%);
  opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease-out), visibility 0s 0.5s;
}
.caliper.is-shown { visibility: visible; opacity: 0.5; transition: opacity 0.5s var(--ease-out); }
.caliper.is-shown.is-moving, .caliper.is-shown:hover, .caliper.is-shown:focus-within { opacity: 1; }
.caliper__rail { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: rgb(var(--gold-line-rgb) / 0.32); }
.caliper__view { position: absolute; right: -1px; top: 0; width: 3px; background: rgba(244, 242, 236, 0.5); border-radius: 2px; }
.caliper__jaw { position: absolute; right: 0; top: 0; width: 12px; height: 1.5px; background: var(--gold); will-change: transform; }
.caliper__jaw::after { content: ""; position: absolute; left: 0; width: 1.5px; height: 6px; background: var(--gold); }
.caliper__jaw--a::after { top: 0; }
.caliper__jaw--b::after { bottom: 0; }
.caliper__ticks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.caliper__ticks li { position: absolute; right: -8px; transform: translateY(-50%); }
.caliper__ticks button { position: relative; display: block; width: 30px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.caliper__ticks button::before { content: ""; position: absolute; right: 8px; top: 50%; width: 6px; height: 1px; background: rgba(244, 242, 236, 0.45); transition: width 0.3s var(--ease-out), background 0.3s; }
.caliper__ticks button[aria-current="true"]::before { width: 9px; background: var(--gold); }
.caliper__ticks button span {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  padding: 6px 9px; border-radius: 4px; background: rgba(5, 7, 11, 0.9); box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.35);
  font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity 0.2s;
}
.caliper__ticks button:hover span, .caliper__ticks button:focus-visible span { opacity: 1; }
.caliper__ticks button:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.caliper__read {
  position: absolute; right: -19px; top: 0; margin: 0; transform: translateY(-50%); writing-mode: vertical-rl;
  font: 500 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 1199px) { .caliper { display: none; } }

/* the close: a gold horizon above the heading, lit once */
.talk__lamp {
  position: absolute; z-index: -1; left: 50%; top: clamp(44px, 5vw, 96px);
  width: min(1100px, 86vw); height: clamp(260px, 26vw, 440px); transform: translateX(-50%); pointer-events: none;
}
.talk__line {
  position: absolute; left: 50%; top: 0; width: 62%; height: 1.5px;
  background: linear-gradient(90deg, transparent, #ffe2a6 16%, #fff5dc 50%, #ffe2a6 84%, transparent);
  box-shadow: 0 0 22px 3px rgb(var(--gold-glow-rgb) / 0.42);
  opacity: 0; transform: translateX(-50%) scaleX(0.22);
  transition: transform 1.5s var(--ease-out), opacity 0.8s var(--ease-out);
}
.talk__cone {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 34% 26% at 50% 0%, rgba(255, 238, 200, 0.13), transparent 70%),
    radial-gradient(ellipse 44% 90% at 50% 0%, rgb(var(--gold-glow-rgb) / 0.08), rgb(var(--gold-glow-rgb) / 0.025) 50%, transparent 76%);
  mix-blend-mode: screen;
  opacity: 0; transform: scaleY(0.6); transform-origin: 50% 0;
  transition: opacity 1.6s var(--ease-out) 0.25s, transform 1.6s var(--ease-out) 0.25s;
}
.talk.is-lit .talk__line { opacity: 1; transform: translateX(-50%) scaleX(1); }
.talk.is-lit .talk__cone { opacity: 1; transform: none; }
/* then one scanning pass across the heading, the hero's beam closing the page */
.talk h2 { position: relative; width: fit-content; margin-inline: auto; }
.talk h2::after {
  content: ""; position: absolute; top: -6%; bottom: -6%; left: -14%; width: 14%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(79, 233, 243, 0.16) 60%, rgba(190, 250, 253, 0.95) 96%, transparent);
  mix-blend-mode: plus-lighter;
}
.talk.is-scan h2::after { animation: scan 1.5s cubic-bezier(0.45, 0, 0.25, 1) forwards; }
@keyframes scan { 0% { left: -14%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* transmission log: true lines, typed once */
.txlog {
  width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin: clamp(36px, 3.4vw, 56px) auto 0; padding: 4px 0 4px 18px;
  display: grid; gap: 9px; list-style: none; text-align: left; border-left: 1px solid rgb(var(--gold-line-rgb) / 0.35);
}
.txlog li { display: flex; gap: 16px; font: 500 12.5px/1.35 var(--mono); letter-spacing: 0.03em; color: var(--ink-soft); white-space: nowrap; }
.txlog time { color: var(--ink-mute); font-variant-numeric: tabular-nums; min-width: 8.5em; }
.txlog b { color: var(--gold); font-weight: 600; }
.txlog__live span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; vertical-align: 1px;
  background: var(--cyan); box-shadow: 0 0 8px rgba(79, 233, 243, 0.8);
}
.txlog.is-armed li { clip-path: inset(0 100% 0 0); }
.txlog.is-armed.is-on li { animation: type 0.9s steps(34, end) forwards; animation-delay: calc(var(--i) * 0.5s); }
@keyframes type { to { clip-path: inset(0 0 0 0); } }

/* everything settles to its final state when motion is off */
html[data-motion="still"] .term__ticks i::before, .capture .term__ticks i::before { transition: none; transform: none; }
html[data-motion="still"] .txlog li, .capture .txlog li { clip-path: none !important; animation: none !important; }
html[data-motion="still"] .talk__line, html[data-motion="still"] .talk__cone, .capture .talk__line, .capture .talk__cone { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tape__track { animation: none; }
  .term__ticks i::before { transition: none; transform: none; }
  .txlog.is-armed li { clip-path: none; animation: none; }
  .talk__line, .talk__cone { transition: none; }
  .talk h2::after { display: none; }
  .txlog__live span::before { animation: none; }
}

/* ---------- the top bar: a floating island that arrives once the hero is behind you ---------- */
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.glass {
  background: rgba(10, 12, 17, 0.7); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.26), 0 16px 36px -16px rgba(0, 0, 0, 0.9);
}
.bar {
  position: fixed; z-index: 50; left: 0; right: 0; top: 14px; height: 48px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter);
  pointer-events: none; transform: translateY(-150%); opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease-out);
}
.bar > * { pointer-events: auto; }
.bar.is-shown, .bar:focus-within { transform: none; opacity: 1; }
.bar__brand { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border-radius: 999px; }
.bar__brand img { display: block; height: 24px; width: auto; }
.bar__island { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; height: 48px; padding: 4px; border-radius: 999px; }
/* the gold pill glides to the section you are in, and to whatever the pointer is over */
.bar__glide {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: rgb(var(--gold-line-rgb) / 0.12); box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.5), 0 0 18px -6px rgb(var(--gold-glow-rgb) / 0.5);
  transition: transform 0.45s cubic-bezier(0.2, 1, 0.3, 1), width 0.45s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s;
}
.bar__item {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 17px;
  border: 0; border-radius: 999px; background: none; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 500 14.5px/1 var(--ui); color: var(--ink-soft); transition: color 0.2s;
}
.bar__item:hover, .bar__item[aria-current], .bar__item[aria-expanded="true"] { color: var(--ink); }
.bar__item svg { width: 10px; height: 10px; transition: transform 0.3s var(--ease-out); }
.bar__group[aria-expanded="true"] svg { transform: rotate(180deg); }
.bar__call {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font: 650 14px/1 var(--ui); color: #0b0c10; background: var(--ink); text-decoration: none;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.9); transition: background 0.2s;
}
.bar__call:hover { background: #ffffff; }
.bar__menu { display: none; }
/* the group panel opens under the island */
.bar__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; width: min(620px, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%); padding: 10px; border-radius: 18px; background: rgba(8, 10, 14, 0.97);
  animation: panelIn 0.28s var(--ease-out);
}
.bar__panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; translate: 0 -8px; scale: 0.97; } }
.bar__sections { display: none; }
.bar__grp { margin: 4px 10px 6px; font: 600 12px/1 var(--ui); letter-spacing: 0.02em; color: var(--ink-mute); }
.bar__co + .bar__grp { margin-top: 12px; }
.bar__co { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bar__callrow { color: var(--gold) !important; }
.bar__co a { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background 0.2s; }
.bar__co a:hover, .bar__co a:focus-visible { background: rgb(var(--gold-line-rgb) / 0.08); }
.bar__co img { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px rgb(var(--gold-line-rgb) / 0.22); }
.bar__co b { display: block; font: 600 15px/1.2 var(--ui); }
.bar__co small { display: block; margin-top: 3px; font: 400 12.5px/1.2 var(--ui); color: var(--ink-mute); }
.bar__co b::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.32em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; color: var(--gold); opacity: 0.7; }
.bar__co a[href^="tel:"] b::after { content: none; }
.bar__status {
  display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; padding: 12px 6px 4px; border-top: 1px solid rgb(var(--gold-line-rgb) / 0.16);
  font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.bar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(79, 233, 243, 0.8); }
.bar__status a { margin-left: auto; font: 600 13px/1 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); text-decoration: none; }
.bar__status a::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.32em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .bar__panel { animation: none; } .bar__glide { transition: none; } }

/* ---------- footer: on the dark of the planet the close leaves behind ---------- */
.foot { padding: clamp(56px, 6vw, 96px) var(--gutter) 28px; background: #05070b; color: var(--ink-mute); }
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 72px); padding-bottom: clamp(40px, 4vw, 64px);
}
.foot__brand img { display: block; width: 132px; height: auto; }
.foot__brand p { margin: 18px 0 0; max-width: 14em; font: 700 clamp(1.2rem, 1.5vw, 1.6rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.foot__h { margin: 0 0 16px; font: 500 12px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.foot__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot__col a { color: var(--ink-soft); text-decoration: none; font: 500 15px/1.3 var(--ui); transition: color 0.2s; }
.foot__col a:hover { color: var(--ink); }
.foot__hint { color: var(--ink-mute); font-weight: 400; }
.foot__sw { display: grid; gap: 4px; margin-bottom: 14px; }
.foot__sw b { font: 600 15px/1.2 var(--ui); color: var(--ink); }
.foot__sw b::after { content: ""; display: inline-block; width: 0.66em; height: 0.66em; margin-left: 0.32em; vertical-align: -0.02em; background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; color: var(--gold); }
.foot__sw span { font: 400 13.5px/1.35 var(--ui); color: var(--ink-mute); }
.foot__badge { display: block; height: 44px; width: auto; margin-top: 4px; border-radius: 4px; }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding-top: 22px; border-top: 1px solid var(--gold-rule); font-size: 13.5px;
}
.foot__base p { margin: 0; }
.foot__top { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-soft); text-decoration: none; }
.foot__top::after { content: " \2191"; margin-left: 0.4em; color: var(--gold); }
.foot__top:hover { color: var(--ink); }

/* ---------- narrow screens ---------- */
@media (max-width: 1080px) and (not ((min-width: 900px) and (min-aspect-ratio: 4/3))) {
  .brand { left: var(--gutter); top: 20px; width: 112px; }
  .status { right: var(--gutter); top: 30px; font-size: 10px; letter-spacing: 0.2em; }
  .status__track, .status__sep { display: none; }
  /* phones: one screen. The copy on top, a caption line, the satellite over the orbit with the tracked
     body's photo inside it, the planet rising across the bottom; the view switch and Sourcewell follow */
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: 0 0 32px; }
  .stage { position: relative; inset: auto; order: 2; height: clamp(600px, 100svh, 940px); margin: 0; }
  .copy { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); top: 86px; width: auto; transform: none; }
  .copy h1 { font-size: clamp(1.8rem, 8.2vw, 3.4rem); letter-spacing: -0.035em; }
  .lede { max-width: 30em; font-size: clamp(15px, 2.1vw, 18px); line-height: 1.45; margin-top: 12px; }
  .copy .actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 20px; }
  .copy .btn, .copy .link { font-size: 16px; }
  .btn { height: 52px; min-width: 0; width: 100%; max-width: 360px; font-size: 16px; }
  .copy .btn { width: auto; height: 48px; padding: 0 20px; }
  .link { font-size: 16px; }
  .modes { position: relative; order: 3; left: auto; top: auto; transform: none; margin: 16px auto 0; width: auto; height: 46px; padding: 0 8px; }
  .modes__btn { padding: 0 14px; font-size: 14px; }
  .legend { display: none; }
  .hero-sw { position: relative; order: 4; left: auto; bottom: auto; margin: 14px auto 0; }
  .readout { font-size: 10px; width: auto; padding: 0 12px; height: 30px; }
  .sat__tether { display: none; }
  /* every card shares the slot inside the orbit; the tracked one resolves in, the last one blurs out */
  .sat__pos { transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out); }
  .sat:not(.is-tracked) .sat__pos { opacity: 0; filter: blur(10px); pointer-events: none; }
  .sat__card { filter: none; }
  .bot__say { max-width: calc(100vw - 2 * var(--gutter)); text-align: center; font-size: 11.5px; white-space: pre-line; }
  .readout.is-locked::after { content: none; }   /* phones: the caption line says how to let go */
  .sat__node { width: 9px; }
  .sat__flag {
    display: block; position: absolute; left: 0; top: 0; white-space: nowrap;
    font: 650 clamp(9.5px, 1.3vw, 12px)/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--gold-line-rgb) / 0.82);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    transition: color 0.3s; cursor: pointer;
  }
  .sat__flag::before { content: ""; position: absolute; inset: -14px -8px; }   /* a thumb-sized target around a small name */
  .sat.is-tracked .sat__flag { color: #fff3d6; }
  .rail-wrap { perspective: none; margin-top: 36px; }
  .rail { --card-w: 46vw; height: auto; display: grid; grid-auto-flow: column; grid-auto-columns: 46vw; gap: 12px; overflow-x: auto; padding: 48px var(--gutter) 72px; margin: -48px 0 -62px; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; transform-style: flat; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail__item { position: relative; left: auto; top: auto; width: auto; margin: 0; transform: none !important; opacity: 1 !important; scroll-snap-align: center; -webkit-box-reflect: none; }
  .rail__item span { opacity: 1; }
  .rail__item img.rail__mirror { display: none; }
  .sector-bar { position: relative; z-index: 2; }   /* above the rail's glow room, so its buttons take the tap */
  /* the scroller clips in straight lines: it carries room above and below so the selected card's light fades out before the edge */
  .rail__item[aria-selected="true"] { box-shadow: 0 0 0 1.5px rgba(255, 232, 180, 0.95), 0 0 48px -10px rgb(var(--gold-glow-rgb) / 0.5), 0 26px 44px -20px rgba(0, 0, 0, 0.8); }
  .link, .sector__link, .foot__col a, .foot__top { min-height: 44px; }
  .foot__col a { display: inline-flex; align-items: center; }
  .modes__btn { min-height: 44px; }
  .sector-bar__ticks { display: none; }
  .sector { grid-template-columns: 1fr; }
  .sector > p, .sector > .chips, .sector > .sector__links, .sector > .sw-badge { grid-column: 1; grid-row: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(n + 3)::before { display: none; }
  .contracts, .svc, .people { grid-template-columns: 1fr; }
  /* phones: one solid bar across the top. It steps aside while you scroll down to read and returns the moment you scroll up */
  .bar {
    top: 0; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0;
    justify-content: flex-start; gap: 8px;
    background: rgba(7, 8, 10, 0.94); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: inset 0 -1px 0 rgb(var(--gold-line-rgb) / 0.2), 0 12px 28px -18px rgba(0, 0, 0, 0.9);
    transform: translateY(-105%);
  }
  .bar__brand.glass, .bar__menu.glass { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }   /* the panel keeps its own solid ground */
  .bar__island { display: none; }
  .bar__brand { height: 44px; padding: 0 8px 0 0; border-radius: 6px; }
  .bar__brand img { height: 22px; }
  .bar__call { height: 40px; padding: 0 16px; margin-left: auto; font-size: 13.5px; }
  .bar__menu {
    display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
    color: var(--ink); font: 600 13.5px/1 var(--ui);
  }
  .bar .bar__menu { box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.35); }
  .bar .bar__menu[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--gold); }
  .bar__panel { top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); width: auto; transform: none; max-height: calc(100svh - 84px); overflow: auto; background: #080a0e; }
  .bar__sections { display: grid; gap: 2px; margin: 0 0 8px; padding: 0 0 8px; list-style: none; border-bottom: 1px solid rgb(var(--gold-line-rgb) / 0.16); }
  .bar__sections a { display: flex; align-items: center; min-height: 46px; padding: 0 10px; border-radius: 10px; font: 600 17px/1 var(--ui); color: var(--ink); text-decoration: none; }
  .bar__co { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .foot__brand { grid-column: 1 / -1; }
  .rail-lens { display: none; }
  .txlog li { white-space: normal; flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .status__dot, .sat__glass::after { animation: none; }
  .rail__item, .rail__item img, .btn, .link svg, .js .reveal { transition: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* the smallest phones: Call stays, as a word */
@media (max-width: 400px) {
  .bar__num { display: none; }
  .bar__call { padding: 0 14px; }
  .bar__brand { padding: 0 12px; }
}
@media (max-width: 480px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* hero card site lines drop on small cards rather than truncating */
@container (max-width: 140px) { .sat__sub { display: none; } }

/* tape: a tap or focus pauses it */
.tape:focus .tape__track, .tape.is-paused .tape__track { animation-play-state: paused; }
.tape:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* footer contract numbers keep their arrow */
.foot__sw b { white-space: nowrap; }

/* caliper reads the section's name */
.caliper__read { text-transform: uppercase; }

/* desktop calls: the number is copied, the phone app one click away */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; border-radius: 999px;
  background: rgba(10, 12, 17, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-line-rgb) / 0.35), 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  font: 500 14.5px/1 var(--ui); color: var(--ink-soft); opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast b { color: var(--ink); font-weight: 600; }
.toast a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #0b0c10; font-weight: 650; text-decoration: none; }

/* no WebGL: the planet still rises, as a still */
.no-webgl .stage { background: url("/assets/earth/fallback.webp") 50% 100% / cover no-repeat; }

/* Still and reduced motion reach every pulse */
html[data-motion="still"] .status__dot, html[data-motion="still"] .bot__led { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .bot__led { animation: none; }
  .js .sector.is-active { animation: none; }
}

/* narrower desktops: the Sourcewell panel keeps clear of the view switch (the whole panel is the link) */
@media (max-width: 1279px) { .hero-sw__go { display: none; } }