/* ==========================================================================
   Orbit — night hero, the dive from space, passes, the change-detection
   loop, confirming with a drone, the orbital layer, use cases, the hand-off
   to Air and Land, principles.
   The change console lives in css/demos/orbit.css.
   ========================================================================== */

/* Artwork colour: the black of space in the dive film, so the film's edges
   disappear into the frame. */
.page-orbit { --dive-space: #020508; }

/* A section that follows a seam: the seam already carries the space above */
.page-orbit .section.is-seamed { padding-top: var(--section-y-sm); }

/* ------------------------------------------------------------------ Hero */
.page-orbit .orbit-hero { padding-bottom: clamp(36px, 4.4vw, 64px); }
.page-orbit .orbit-hero .bg-glow { top: -52%; opacity: 0.8; }
.page-orbit .orbit-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.page-orbit .orbit-hero__title { max-width: 12ch; font-size: clamp(3rem, 0.9rem + 6.3vw, 7.4rem); }
.page-orbit .orbit-hero__slash { width: 16px; height: 1px; background: rgb(255 255 255 / 0.32); }
.page-orbit .orbit-hero__side { padding-bottom: 10px; }
.page-orbit .orbit-hero__lead { max-width: 440px; }
.page-orbit .orbit-hero__actions { margin-top: 32px; }

/* The orbit track: two hairline arcs across the upper right, with the
   three passes of the story marked on the inner one */
.page-orbit .orbit-hero__track { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-orbit .orbit-hero__arc {
  fill: none;
  stroke: rgb(255 255 255 / 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.page-orbit .orbit-hero__arc--2 { stroke: rgb(255 255 255 / 0.08); }
.js .page-orbit .orbit-hero__arc { stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-out) 250ms; }
.js .page-orbit .orbit-hero__arc--2 { transition-delay: 450ms; }
.is-ready .page-orbit .orbit-hero__arc { stroke-dashoffset: 0; }
.page-orbit .orbit-hero__pass {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid rgb(255 255 255 / 0.7);
  background: var(--night);
  transform: rotate(45deg);
}
.page-orbit .orbit-hero__pass em {
  position: absolute;
  left: 16px;
  top: -3px;
  transform: rotate(-45deg);
  transform-origin: left top;
  white-space: nowrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}
.page-orbit .orbit-hero__pass.is-now { border-color: var(--crimson-300); background: var(--crimson); box-shadow: none; }
.page-orbit .orbit-hero__pass.is-now em { color: #fff; }
.js .page-orbit .orbit-hero__pass { opacity: 0; transition: opacity 800ms var(--ease-soft); }
.js .page-orbit .orbit-hero__pass:nth-of-type(1) { transition-delay: 1100ms; }
.js .page-orbit .orbit-hero__pass:nth-of-type(2) { transition-delay: 1500ms; }
.js .page-orbit .orbit-hero__pass:nth-of-type(3) { transition-delay: 1900ms; }
.is-ready .page-orbit .orbit-hero__pass { opacity: 1; }

@media (max-width: 1100px) {
  .page-orbit .orbit-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-orbit .orbit-hero__side { padding-bottom: 0; }
  .page-orbit .orbit-hero__lead { margin-top: 28px; max-width: 560px; }
}
@media (max-width: 900px) {
  .page-orbit .orbit-hero__pass { display: none; }
}
@media (max-width: 600px) {
  .page-orbit .orbit-hero__track { opacity: 0.6; }
  .page-orbit .orbit-hero__actions { --cluster-gap: 10px; }
}

/* ------------------------------------------------------------------ Dive
   orbit.js sets, per scroll frame:
   --it/--is/--ib/--ir  the frame's inset (top, sides, bottom) and radius
   --k                  0 → 1 as the frame opens to full bleed
   --fw/--fh, --ds/--dy the film box (covers the stage at 16:9) and its framing
   --ground, --hud-g, --scan, --landing, --depth, --scale-a
   ------------------------------------------------------------------------ */
.page-orbit .dive { position: relative; background: var(--night); }
.page-orbit .dive__runway { position: relative; height: 440vh; }
.page-orbit .dive__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  /* The card's first frame, the same numbers orbit.js sets on load (layout()), so the
     script taking over never moves it (it shifted 20px sideways on load, CLS 0.002) */
  --it: 86px;
  --is: max(clamp(16px, 4.2%, 56px), calc((100% - 1240px) / 2));
  --ib: 24px;
  --ir: 44px;
  --k: 0;
  --ds: 0.82;
  --dy: 0px;
  --ground: 0;
  --hud-g: 0;
  --scan: 0;
  --scan-a: 0;
  --landing: 0;
  --depth: 0;
  --scale-a: 0;
  --hud-pt: 16px;
}

.page-orbit .dive__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--dive-space);
  clip-path: inset(var(--it) var(--is) var(--ib) var(--is) round var(--ir));
}
/* The hairline and glow of the frame while it is still a card on the page */
.page-orbit .dive__edge {
  position: absolute;
  top: var(--it);
  left: var(--is);
  right: var(--is);
  bottom: var(--ib);
  border-radius: var(--ir);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 60px 120px -60px rgb(0 0 0 / 0.6);
  opacity: calc(1 - var(--k));
  pointer-events: none;
  z-index: 4;
}

/* The film box always has the video's 16:9 shape and covers the stage, so
   scaling it never crops the Earth. */
.page-orbit .dive__film {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fw, 100%);
  height: var(--fh, 100%);
  transform: translate3d(-50%, -50%, 0) translate3d(0, var(--dy), 0) scale(var(--ds));
  transform-origin: 50% 50%;
  will-change: transform;
}
.page-orbit .dive__video { width: 100%; height: 100%; object-fit: cover; background: var(--dive-space); }
.page-orbit .dive__vignette {
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle closest-side at 50% 50%, rgb(2 5 8 / 0) 88%, var(--dive-space) 100%);
  opacity: calc(1 - var(--k));
  pointer-events: none;
}
.page-orbit .dive__ground {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fw, 100%);
  height: var(--fh, 100%);
  transform: translate3d(-50%, -50%, 0);
  opacity: var(--ground);
  pointer-events: none;
}
.page-orbit .dive__ground img { width: 100%; height: 100%; object-fit: cover; }

/* Shade keeps copy legible over cloud and canopy */
.page-orbit .dive__shade { position: absolute; inset: 0; pointer-events: none; }
.page-orbit .dive__shade::before,
.page-orbit .dive__shade::after { content: ""; position: absolute; inset: 0; }
.page-orbit .dive__shade::before {
  background:
    linear-gradient(180deg, rgb(2 5 8 / 0.5) 0%, rgb(2 5 8 / 0) 22%),
    linear-gradient(90deg, rgb(2 5 8 / 0.62) 0%, rgb(2 5 8 / 0.24) 40%, rgb(2 5 8 / 0) 62%);
  opacity: var(--k);
}
.page-orbit .dive__shade::after {
  background: linear-gradient(0deg, rgb(5 5 6 / 0.9) 0%, rgb(5 5 6 / 0.6) 22%, rgb(5 5 6 / 0.14) 50%, rgb(5 5 6 / 0) 66%);
  opacity: var(--landing);
}

/* Instrument layer — it rides the frame's inset; the top readouts stay at
   the same height on screen while the frame opens beneath the header */
.page-orbit .dive__hud {
  position: absolute;
  top: var(--it);
  left: var(--is);
  right: var(--is);
  bottom: var(--ib);
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono);
  color: #fff;
  --edge: 16px;
}
.page-orbit .dive__corner { position: absolute; width: 20px; height: 20px; border: 0 solid rgb(255 255 255 / 0.6); }
.page-orbit .dive__corner--tl { top: var(--hud-pt); left: var(--edge); border-top-width: 1.5px; border-left-width: 1.5px; }
.page-orbit .dive__corner--tr { top: var(--hud-pt); right: var(--edge); border-top-width: 1.5px; border-right-width: 1.5px; }
.page-orbit .dive__corner--bl { bottom: var(--edge); left: var(--edge); border-bottom-width: 1.5px; border-left-width: 1.5px; }
.page-orbit .dive__corner--br { bottom: var(--edge); right: var(--edge); border-bottom-width: 1.5px; border-right-width: 1.5px; }
.page-orbit .dive__read {
  position: absolute;
  top: calc(var(--hud-pt) + 8px);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.66);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}
.page-orbit .dive__read b { font-weight: 500; color: #fff; }
.page-orbit .dive__read--tl { left: calc(var(--edge) + 14px); }
.page-orbit .dive__read--tr { right: calc(var(--edge) + 14px); text-align: right; }

/* Descent scale: orbit to tree line */
.page-orbit .dive__scale {
  position: absolute;
  right: calc(var(--edge) + 14px);
  top: 50%;
  height: min(38vh, 320px);
  transform: translateY(-44%);
  display: flex;
  align-items: stretch;
  gap: 14px;
  opacity: var(--scale-a);
}
.page-orbit .dive__scale ol {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.page-orbit .dive__scale li {
  position: relative;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgb(255 255 255 / 0.5);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.85), 0 0 12px rgb(0 0 0 / 0.5);
  transition: color var(--t-med) var(--ease-soft);
}
.page-orbit .dive__scale li.is-on { color: #fff; }
.page-orbit .dive__scale::after { /* rail with ticks */
  content: "";
  width: 9px;
  border-right: 1px solid rgb(255 255 255 / 0.32);
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.3) 0 1px, transparent 1px 10%);
  background-size: 6px 100%;
  background-repeat: no-repeat;
  background-position: right top;
}
.page-orbit .dive__marker {
  position: absolute;
  right: -3px;
  top: calc(var(--depth) * 100%);
  width: 15px;
  height: 2px;
  margin-top: -1px;
  background: var(--crimson-300);
  box-shadow: none;
}
.page-orbit .dive__marker::after {
  content: "";
  position: absolute;
  right: 17px;
  top: -4px;
  border: 5px solid transparent;
  border-right: 0;
  border-left-color: var(--crimson-300);
}

/* Ground hand-off overlays */
.page-orbit .dive__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.16) 1px, transparent 1px);
  background-size: 12.5% 20%;
  opacity: var(--hud-g);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 40%, transparent 90%);
}
.page-orbit .dive__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--scan) * 100%);
  width: 2px;
  background: linear-gradient(transparent, var(--crimson-300) 20%, var(--crimson-300) 80%, transparent);
  box-shadow: none;
  opacity: var(--scan-a);
}
.page-orbit .dive__reticle {
  position: absolute;
  left: 62%;
  top: 40%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  opacity: var(--hud-g);
  transform: scale(calc(1.4 - var(--hud-g) * 0.4));
}
.page-orbit .dive__reticle::before, .page-orbit .dive__reticle::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.6); }
.page-orbit .dive__reticle::before { left: 50%; top: -12px; bottom: -12px; width: 1px; }
.page-orbit .dive__reticle::after { top: 50%; left: -12px; right: -12px; height: 1px; }
.page-orbit .dive__base {
  position: absolute;
  left: 62%;
  top: calc(40% + 62px);
  display: inline-flex;
  align-items: stretch;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: var(--hud-g);
}
.page-orbit .dive__base b { padding: 5px 7px; font-weight: 500; background: #fff; color: var(--night); }
.page-orbit .dive__base span { padding: 5px 8px; color: #fff; background: rgb(5 5 6 / 0.62); border: 1px solid rgb(255 255 255 / 0.22); border-left: 0; }

/* Copy — rides the frame too, so it always sits inside the picture */
.page-orbit .dive__copy {
  position: absolute;
  top: var(--it);
  left: var(--is);
  right: var(--is);
  bottom: var(--ib);
  z-index: 3;
  pointer-events: none;
  --pad: clamp(24px, 4vw, 64px);
}
.page-orbit .dive__cap,
.page-orbit .dive__landing {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(72px, 15vh, 150px);
  max-width: 620px;
}
.page-orbit .dive__cap {
  opacity: var(--a, 0);
  transform: translate3d(0, calc((1 - var(--a, 0)) * var(--dir, 1) * 28px), 0);
}
.page-orbit .dive__cap.is-hidden, .page-orbit .dive__landing.is-hidden { visibility: hidden; }
.page-orbit .dive__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.74);
}
.page-orbit .dive__kicker span { color: var(--crimson-300); }
.page-orbit .dive__kicker span::after { content: ""; display: inline-block; width: 18px; height: 1px; margin-left: 12px; vertical-align: middle; background: rgb(255 255 255 / 0.35); }
.page-orbit .dive__line {
  margin-top: 16px;
  max-width: 13ch;
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 1rem + 3.4vw, 4.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 8px 40px rgb(0 0 0 / 0.4);
}
.page-orbit .dive__sub {
  margin-top: 18px;
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.016em;
  color: rgb(255 255 255 / 0.84);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
}
.page-orbit .dive__landing {
  max-width: 700px;
  opacity: var(--landing);
  transform: translate3d(0, calc((1 - var(--landing)) * 36px), 0);
  pointer-events: auto;
}
.page-orbit .dive__landing .eyebrow { color: rgb(255 255 255 / 0.78); }
.page-orbit .dive__title {
  margin-top: 18px;
  max-width: 12ch;
  font-family: var(--font-sans);
  font-size: min(clamp(2.7rem, 1rem + 5vw, 6.2rem), 12vh);
  font-weight: 750;
  line-height: 0.94;
  letter-spacing: var(--tracking-mega);
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 10px 50px rgb(0 0 0 / 0.45);
}
.page-orbit .dive__lead {
  max-width: 540px;
  margin-top: 22px;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.016em;
  color: rgb(255 255 255 / 0.86);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}
.page-orbit .dive__next { margin-top: 24px; color: #fff; }
.page-orbit .dive__next:hover { color: #fff; }

/* orbit.js's narrow card (a stage under 760px wide) */
@media (max-width: 759.98px) {
  .page-orbit .dive__stage { --it: 80px; --is: 12px; --ib: 12px; --ir: 28px; }
}
@media (max-width: 760px) {
  .page-orbit .dive__runway { height: 380vh; }
  .page-orbit .dive__hud { --edge: 12px; }
  .page-orbit .dive__corner { width: 14px; height: 14px; }
  .page-orbit .dive__read { font-size: 9px; letter-spacing: 0.12em; }
  .page-orbit .dive__read--tl { left: calc(var(--edge) + 10px); }
  .page-orbit .dive__read--tr { right: calc(var(--edge) + 10px); }
  .page-orbit .dive__scale { display: none; }
  .page-orbit .dive__copy { --pad: 22px; }
  .page-orbit .dive__cap, .page-orbit .dive__landing { bottom: 44px; }
  .page-orbit .dive__sub { font-size: 1.02rem; }
  .page-orbit .dive__lead { margin-top: 16px; font-size: 1.02rem; }
  .page-orbit .dive__shade::before {
    background:
      linear-gradient(180deg, rgb(2 5 8 / 0.5) 0%, rgb(2 5 8 / 0) 22%),
      linear-gradient(0deg, rgb(2 5 8 / 0.82) 0%, rgb(2 5 8 / 0.46) 34%, rgb(2 5 8 / 0) 58%);
  }
  .page-orbit .dive__reticle { left: 50%; top: 34%; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .page-orbit .dive__base { left: 50%; top: calc(34% + 50px); }
}

/* Without JS the stage is a plain black frame with the first line */
html:not(.js) .page-orbit .dive__runway { height: auto; }
html:not(.js) .page-orbit .dive__stage { position: relative; height: 100svh; min-height: 560px; }
html:not(.js) .page-orbit .dive__cap:first-of-type { --a: 1; }
html:not(.js) .page-orbit .dive__landing { display: none; }

/* Reduced motion: no film and no zoom — the frame stays a card, the poster
   crossfades to the ground */
@media (prefers-reduced-motion: reduce) {
  .page-orbit .dive__runway { height: 260vh; }
  .page-orbit .dive__shade::before { opacity: 1; }
  .page-orbit .dive__cap, .page-orbit .dive__landing { transform: none; }
}

/* ------------------------------------------------------------ Passes */
.page-orbit .orbit-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.page-orbit .orbit-intro__title { margin-top: 18px; font-size: clamp(2.5rem, 1rem + 4.2vw, 5.2rem); }
.page-orbit .orbit-intro__copy > * + * { margin-top: 20px; }
.page-orbit .orbit-intro__copy > p:not(.lead) { color: var(--ink-3); }
.page-orbit .orbit-intro__chips { margin-top: 30px; --cluster-gap: 8px; }
@media (max-width: 900px) { .page-orbit .orbit-intro__grid { grid-template-columns: minmax(0, 1fr); } }

/* Three passes on one ground track; the track fills as you read along it */
.page-orbit .passes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(56px, 7vw, 104px);
  padding-top: 40px;
  --fill: clamp(0, (var(--p, 0) - 0.18) * 2.6, 1);
}
.page-orbit .passes::before,
.page-orbit .passes::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  height: 1px;
  z-index: 0;
}
.page-orbit .passes::before { right: 0; background: var(--line-2); }
.page-orbit .passes::after { width: calc(var(--fill) * 100%); background: var(--crimson); }
.page-orbit .pass { position: relative; z-index: 1; }
.page-orbit .pass__node {
  position: absolute;
  top: -40px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-right: 14px;
  background: var(--paper); /* masks the track behind the label */
}
.page-orbit .pass__node::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink-3);
  background: var(--paper);
  transform: rotate(45deg);
}
.page-orbit .pass__node span { color: var(--ink); font-weight: 500; }
.page-orbit .pass--change .pass__node::before { border-color: var(--crimson-300); background: var(--crimson); box-shadow: none; }
.page-orbit .pass--change .pass__node span { color: var(--accent-text); }

.page-orbit .pass__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--night-1);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgb(0 0 0 / 0.55);
}
.page-orbit .pass__media > img,
.page-orbit .pass__sar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.8s var(--ease-out);
}
.page-orbit .pass.is-in .pass__media > img, .page-orbit .pass.is-in .pass__sar img { transform: scale(1); }
.page-orbit .pass:hover .pass__media > img, .page-orbit .pass:hover .pass__sar img { transform: scale(1.03); }
.page-orbit .pass__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.42));
  pointer-events: none;
  z-index: 2;
}
.page-orbit .pass__corner { position: absolute; z-index: 3; width: 14px; height: 14px; border: 0 solid rgb(255 255 255 / 0.72); }
.page-orbit .pass__corner--tl { top: 12px; left: 12px; border-top-width: 1.5px; border-left-width: 1.5px; }
.page-orbit .pass__corner--tr { top: 12px; right: 12px; border-top-width: 1.5px; border-right-width: 1.5px; }
.page-orbit .pass__corner--br { bottom: 12px; right: 12px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.page-orbit .pass__read {
  position: absolute;
  z-index: 3;
  left: 24px;
  top: 17px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.75);
}
.page-orbit .pass__state {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 20px;
  padding: 4px 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(5 5 6 / 0.6);
  border: 1px solid rgb(255 255 255 / 0.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.page-orbit .pass__state.is-alert { background: var(--crimson); border-color: transparent; }
/* Pass 2: the readout sits over the radar half, clear of the cloud */
.page-orbit .pass--radar .pass__read { left: auto; right: 24px; text-align: right; }

/* Pass 2: cloud over the optical half, radar through it on the other */
.page-orbit .pass__cloud {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 50% 0 0);
  background:
    radial-gradient(38% 30% at 18% 30%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 70%),
    radial-gradient(42% 34% at 40% 58%, rgb(245 246 248 / 0.95), rgb(245 246 248 / 0) 72%),
    radial-gradient(30% 26% at 12% 78%, rgb(236 238 242 / 0.9), rgb(236 238 242 / 0) 70%),
    radial-gradient(36% 30% at 34% 14%, rgb(250 250 252 / 0.85), rgb(250 250 252 / 0) 70%),
    linear-gradient(rgb(220 224 230 / 0.55), rgb(220 224 230 / 0.55));
  filter: blur(2px);
}
.page-orbit .pass__sar { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 0 0 50%); background: #0c0c0e; }
.page-orbit .pass__sar img { filter: grayscale(1) contrast(1.9) brightness(0.78); mix-blend-mode: luminosity; }
.page-orbit .pass__sar::after { /* speckle */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.page-orbit .pass__split {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
}
.page-orbit .pass__split em {
  position: absolute;
  top: 50%;
  padding: 3px 6px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(5 5 6 / 0.66);
  white-space: nowrap;
  transform: translateY(-50%);
}
.page-orbit .pass__split em:first-child { right: 8px; }
.page-orbit .pass__split em:last-child { left: 8px; }

/* Pass 3: the four clearings */
.page-orbit .pass__box {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1.5px solid var(--crimson-300);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  opacity: 0;
  transform: scale(1.6);
  transition: opacity 400ms var(--ease-soft), transform 800ms var(--ease-spring);
}
.page-orbit .pass.is-in .pass__box { opacity: 1; transform: none; transition-delay: 900ms; }
.page-orbit .pass.is-in .pass__box:nth-of-type(2) { transition-delay: 1020ms; }
.page-orbit .pass.is-in .pass__box:nth-of-type(3) { transition-delay: 1140ms; }
.page-orbit .pass.is-in .pass__box:nth-of-type(4) { transition-delay: 1260ms; }

.page-orbit .pass h3 { margin-top: 24px; font-size: var(--fs-h4); }
.page-orbit .pass > p:not(.pass__node) { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); max-width: 42ch; }

@media (max-width: 900px) {
  .page-orbit .passes { grid-template-columns: minmax(0, 1fr); padding-top: 0; row-gap: 56px; max-width: 620px; }
  .page-orbit .passes::before, .page-orbit .passes::after { display: none; }
  .page-orbit .pass__node { position: static; margin-bottom: 16px; transform: none; }
}

/* ------------------------------------------------------------- Loop */
.page-orbit .orbit-loop-section { padding-top: clamp(24px, 4vw, 64px); }
.page-orbit .orbit-loop__head { margin-bottom: clamp(36px, 5vw, 64px); padding-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
.page-orbit .orbit-loop__title { max-width: 780px; margin-top: 18px; font-size: var(--fs-h2); }
.page-orbit .orbit-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.page-orbit .orbit-step { position: relative; }
.page-orbit .orbit-step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--night-1);
  box-shadow: 0 0 0 1px var(--line), 0 26px 50px -34px rgb(0 0 0 / 0.55);
}
.page-orbit .orbit-step__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.8s var(--ease-out);
}
.page-orbit .orbit-step.is-in .orbit-step__media > img { transform: scale(1); }
.page-orbit .orbit-step:hover .orbit-step__media > img { transform: scale(1.03); }
.page-orbit .orbit-step__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.4));
  pointer-events: none;
}
.page-orbit .orbit-step__media--compare > img { object-position: 100% 50%; transform-origin: 100% 50%; }

.page-orbit .orbit-step__track { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.page-orbit .orbit-step__track path {
  fill: none;
  stroke: rgb(255 255 255 / 0.8);
  stroke-width: 1.3;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}
.page-orbit .orbit-step__tick {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid #fff;
  background: rgb(0 0 0 / 0.45);
  transform: rotate(45deg);
}
.page-orbit .orbit-step__tick.is-now { border-color: var(--crimson-300); background: var(--crimson); box-shadow: none; }
.page-orbit .orbit-step__tick em {
  position: absolute;
  left: 18px;
  top: -6px;
  transform: rotate(-45deg);
  transform-origin: left top;
  white-space: nowrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 2px 6px;
  background: rgb(0 0 0 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.25);
}
.page-orbit .orbit-step__tick.is-now em { background: var(--crimson); border-color: transparent; }

.page-orbit .orbit-step__box {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1.5px solid var(--crimson-300);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  opacity: 0;
  transform: scale(1.6);
  transition: opacity 400ms var(--ease-soft), transform 800ms var(--ease-spring);
}
.page-orbit .orbit-step.is-in .orbit-step__box { opacity: 1; transform: none; transition-delay: 700ms; }
.page-orbit .orbit-step.is-in .orbit-step__box:nth-of-type(2) { transition-delay: 820ms; }
.page-orbit .orbit-step.is-in .orbit-step__box:nth-of-type(3) { transition-delay: 940ms; }
.page-orbit .orbit-step.is-in .orbit-step__box:nth-of-type(4) { transition-delay: 1060ms; }
.page-orbit .orbit-step__box em {
  position: absolute;
  left: -1.5px;
  bottom: 100%;
  margin-bottom: 4px;
  white-space: nowrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--crimson);
  color: #fff;
}

.page-orbit .orbit-step__media--alert {
  display: grid;
  place-items: center;
  padding: 5% 6%;
  background:
    radial-gradient(90% 80% at 100% 0%, rgb(var(--crimson-rgb) / 0.3), transparent 60%),
    linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--night-1);
}
.page-orbit .orbit-alert {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: rgb(18 18 22 / 0.92);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.8);
  color: var(--night-ink);
  font-size: 11px;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 900ms var(--ease-spring), opacity 500ms var(--ease-soft);
  transition-delay: 450ms;
}
.page-orbit .orbit-step.is-in .orbit-alert { transform: none; opacity: 1; }
.page-orbit .orbit-alert__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--night-ink-3); text-transform: uppercase; }
.page-orbit .orbit-alert__tag { padding: 2px 6px; background: var(--crimson); color: #fff; letter-spacing: 0.14em; }
.page-orbit .orbit-alert__title { margin-top: 8px; font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em; color: #fff; line-height: 1.25; }
.page-orbit .orbit-alert__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--night-ink-3); text-transform: uppercase; }
.page-orbit .orbit-alert__meta i { width: 1px; height: 9px; background: rgb(255 255 255 / 0.2); }
.page-orbit .orbit-alert__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.page-orbit .orbit-alert__pair span { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; }
.page-orbit .orbit-alert__pair img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 22%; transform: scale(2.2); transform-origin: 78% 22%; }
.page-orbit .orbit-alert__pair em { position: absolute; left: 4px; bottom: 3px; font-style: normal; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.8); }
.page-orbit .orbit-alert__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6px; margin-top: 8px; }
.page-orbit .orbit-alert__actions span { display: grid; place-items: center; height: 24px; border-radius: 7px; background: rgb(255 255 255 / 0.08); font-size: 10.5px; font-weight: 600; color: rgb(255 255 255 / 0.9); }
.page-orbit .orbit-alert__actions .is-primary { background: var(--crimson); color: #fff; }
.page-orbit .orbit-step__media--alert { container-type: inline-size; }
@container (max-width: 270px) {
  .page-orbit .orbit-alert { padding: 9px 10px; }
  .page-orbit .orbit-alert__title { margin-top: 6px; font-size: 11.5px; }
  .page-orbit .orbit-alert__pair { margin-top: 6px; }
  .page-orbit .orbit-alert__pair span { aspect-ratio: 2 / 1; }
  .page-orbit .orbit-alert__actions { margin-top: 6px; }
  .page-orbit .orbit-alert__actions span { height: 22px; font-size: 10px; }
}

.page-orbit .orbit-step__reticle {
  position: absolute;
  z-index: 1;
  left: 43%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1.5);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 50%;
  opacity: 0;
  transition: transform 1s var(--ease-out) 500ms, opacity 600ms var(--ease-soft) 500ms;
}
.page-orbit .orbit-step.is-in .orbit-step__reticle { transform: translate(-50%, -50%); opacity: 1; }
.page-orbit .orbit-step__reticle::before, .page-orbit .orbit-step__reticle::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.7); }
.page-orbit .orbit-step__reticle::before { left: 50%; top: -10px; bottom: -10px; width: 1px; }
.page-orbit .orbit-step__reticle::after { top: 50%; left: -10px; right: -10px; height: 1px; }
.page-orbit .orbit-step__read {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
}

.page-orbit .orbit-step__num {
  position: relative;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--accent-text);
}
.page-orbit .orbit-step__num span { margin-left: 8px; text-transform: uppercase; color: var(--ink-3); }
.page-orbit .orbit-step__num::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-enter, 600ms) var(--ease-out);
  transition-delay: calc(min(var(--d, 0), 4) * var(--stagger, 60ms));
}
.page-orbit .orbit-step.is-in .orbit-step__num::after { transform: none; }
.page-orbit .orbit-step h3 { margin-top: 10px; font-size: var(--fs-h4); }
.page-orbit .orbit-step > p:not(.orbit-step__num) { margin-top: 8px; color: var(--ink-3); font-size: var(--fs-small); }
@media (max-width: 1024px) { .page-orbit .orbit-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 600px) { .page-orbit .orbit-loop { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------ Confirm (night, sticky) */
.page-orbit .orbit-confirm { overflow: clip; }
.page-orbit .orbit-confirm__head { max-width: 860px; margin-bottom: clamp(40px, 6vw, 88px); }
.page-orbit .orbit-confirm__title { margin-top: 18px; font-size: clamp(2.4rem, 1rem + 4vw, 5rem); }
.page-orbit .orbit-confirm__head .lead { margin-top: 22px; max-width: 640px; }
.page-orbit .orbit-confirm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.page-orbit .orbit-confirm__sticky { position: sticky; top: calc(50vh - min(19vw, 250px) - 24px); z-index: 2; }

.page-orbit .ocf {
  position: relative;
  aspect-ratio: 1600 / 905;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--night-2);
  box-shadow: 0 0 0 1px var(--night-line), 0 60px 110px -60px rgb(0 0 0 / 0.95);
  --route: 0;
}
.page-orbit .ocf__world { position: absolute; inset: 0; transition: transform 1.6s var(--ease-out); transform-origin: 77.8% 22%; }
.page-orbit .ocf__world img { width: 100%; height: 100%; object-fit: cover; }
.page-orbit .ocf[data-step="2"] .ocf__world { transform: scale(1.08); }
.page-orbit .ocf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.5));
  pointer-events: none;
  z-index: 1;
}
.page-orbit .ocf__box {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1.5px solid rgb(255 72 99 / 0.7);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
  transition: opacity var(--t-med) var(--ease-soft), border-color var(--t-med);
}
.page-orbit .ocf__box:not(.is-target) { opacity: 0.55; }
.page-orbit .ocf__box.is-target { border-color: var(--crimson-300); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 0 22px rgb(255 72 99 / 0.6), inset 0 0 18px rgb(255 72 99 / 0.2); }
.page-orbit .ocf[data-step="2"] .ocf__box.is-target { border-color: #fff; }
.page-orbit .ocf__box em {
  position: absolute;
  right: -1.5px;
  bottom: 100%;
  margin-bottom: 5px;
  padding: 3px 7px;
  white-space: nowrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--crimson);
  color: #fff;
}

.page-orbit .ocf__route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.page-orbit .ocf__path {
  fill: none;
  stroke: rgb(255 255 255 / 0.75);
  stroke-width: 1.4;
  stroke-dasharray: 0.006 0.008;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-soft);
}
.page-orbit .ocf__trail {
  fill: none;
  stroke: var(--crimson-300);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--route));
  vector-effect: non-scaling-stroke;
}
.page-orbit .ocf:not([data-step="0"]) .ocf__path { opacity: 1; }

.page-orbit .ocf__uav {
  position: absolute;
  z-index: 3;
  left: var(--ux, -5%);
  top: var(--uy, 70%);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-soft);
}
.page-orbit .ocf__uav i {
  position: absolute;
  inset: 0;
  border: 1.5px solid #fff;
  background: rgb(0 0 0 / 0.4);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 0 14px rgb(255 255 255 / 0.35);
}
.page-orbit .ocf__uav em {
  position: absolute;
  left: 22px;
  top: -4px;
  padding: 3px 7px;
  white-space: nowrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(0 0 0 / 0.6);
  border: 1px solid rgb(255 255 255 / 0.25);
}
.page-orbit .ocf:not([data-step="0"]) .ocf__uav { opacity: 1; }
.page-orbit .ocf__uav em, .page-orbit .ocf__box em { transition: opacity var(--t-med) var(--ease-soft); }
/* On station the reticle takes over: the labels step aside */
.page-orbit .ocf[data-step="2"] .ocf__uav em,
.page-orbit .ocf[data-step="2"] .ocf__box em { opacity: 0; }

.page-orbit .ocf__hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-family: var(--font-mono); color: #fff; }
.page-orbit .ocf__corner { position: absolute; width: 18px; height: 18px; border: 0 solid rgb(255 255 255 / 0.72); }
.page-orbit .ocf__corner--tl { top: 16px; left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.page-orbit .ocf__corner--tr { top: 16px; right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }
.page-orbit .ocf__corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.page-orbit .ocf__corner--br { bottom: 16px; right: 16px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.page-orbit .ocf__read {
  position: absolute;
  top: 24px;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-med) var(--ease-soft), transform var(--t-med) var(--ease-out);
}
.page-orbit .ocf__read--tl { left: 30px; }
.page-orbit .ocf__read--tr { right: 30px; text-align: right; }
.page-orbit .ocf[data-step="0"] .ocf__read[data-for="0"],
.page-orbit .ocf[data-step="1"] .ocf__read[data-for="1"],
.page-orbit .ocf[data-step="2"] .ocf__read[data-for="2"] { opacity: 1; transform: none; transition-delay: 120ms; }
.page-orbit .ocf__reticle {
  position: absolute;
  left: 77.75%;
  top: 22%;
  width: 11%;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.8);
  transition: opacity var(--t-med) var(--ease-soft), transform 900ms var(--ease-out);
}
.page-orbit .ocf__reticle::before, .page-orbit .ocf__reticle::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.8); }
.page-orbit .ocf__reticle::before { left: 50%; top: -12px; bottom: -12px; width: 1px; }
.page-orbit .ocf__reticle::after { top: 50%; left: -12px; right: -12px; height: 1px; }
.page-orbit .ocf[data-step="2"] .ocf__reticle { opacity: 1; transform: translate(-50%, -50%); transition-delay: 250ms; }

/* The drone's camera: close, current imagery of the clearing */
.page-orbit .ocf__cam {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 16px;
  width: 34%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.7), 0 0 0 6px rgb(5 5 6 / 0.55), 0 24px 48px -16px rgb(0 0 0 / 0.95);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: 100% 100%;
  transition: opacity var(--t-med) var(--ease-soft), transform 700ms var(--ease-spring);
}
.page-orbit .ocf[data-step="2"] .ocf__cam { opacity: 1; transform: none; transition-delay: 500ms; }
.page-orbit .ocf__cam-img { position: absolute; inset: 0; overflow: hidden; }
.page-orbit .ocf__cam-img img {
  position: absolute;
  width: 460%;
  max-width: none;
  height: auto;
  left: -307.6%;   /* centres the clearing at 77.75% 22% of the image */
  top: -41.6%;
  filter: saturate(1.08) contrast(1.05);
}
.page-orbit .ocf__cam::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 8px; pointer-events: none; }
.page-orbit .ocf__cam-read { position: absolute; left: 14px; top: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.page-orbit .ocf__cam-tag { position: absolute; right: 12px; bottom: 12px; padding: 3px 7px; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--crimson); }

/* Step marks under the figure: thin lines, not dots */
.page-orbit .ocf__steps { display: flex; gap: 8px; margin-top: 18px; }
.page-orbit .ocf__steps li { flex: 0 0 40px; height: 2px; background: rgb(255 255 255 / 0.16); transition: background-color var(--t-med), flex-basis var(--t-slow) var(--ease-out); }
.page-orbit .ocf__steps li.is-on { flex-basis: 72px; background: var(--crimson-300); }

.page-orbit .ocs { display: grid; }
.page-orbit .ocs__step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 40px;
}
.page-orbit .ocs__step:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 12px; }
.page-orbit .ocs__step:last-child { min-height: 52vh; }
/* The step in view is bright; the others recede by colour, never below AA contrast. */
.page-orbit .ocs__step h3 { transition: color 560ms var(--ease-soft); }
.page-orbit .ocs__step:not(.is-active) h3 { color: var(--ink-3); }
.page-orbit .ocs__num {
  position: relative;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--accent-text);
}
.page-orbit .ocs__num span { margin-left: 8px; text-transform: uppercase; color: var(--ink-3); }
.page-orbit .ocs__num::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--crimson-300); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-enter, 600ms) var(--ease-out); }
.page-orbit .ocs__step.is-active .ocs__num::after { transform: none; }
.page-orbit .ocs__step h3 { margin-top: 20px; font-size: var(--fs-h3); }
.page-orbit .ocs__step > p:not(.ocs__num) { margin-top: 12px; color: var(--ink-3); max-width: 40ch; }
.page-orbit .ocs__more { margin-top: 24px; }

@media (max-width: 960px) {
  .page-orbit .orbit-confirm__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-orbit .orbit-confirm__sticky {
    top: calc(var(--header-h-compact) + 22px);
    padding-bottom: 18px;
    background: var(--night);
    box-shadow: 0 -40px 0 var(--night);
  }
  .page-orbit .orbit-confirm__sticky::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; background: linear-gradient(var(--night), rgb(5 5 6 / 0)); pointer-events: none; }
  .page-orbit .ocf { border-radius: var(--r-lg); }
  .page-orbit .ocs__step, .page-orbit .ocs__step:first-child, .page-orbit .ocs__step:last-child { min-height: 54vh; justify-content: flex-start; padding-top: 56px; }
}
/* Landscape phones: the pinned film is taller than the screen and would hide every step, so it scrolls with the page */
@media (max-width: 960px) and (max-height: 560px) {
  .page-orbit .orbit-confirm__sticky { position: relative; top: auto; }
}
/* Very short screens: the top-left read-out would print over the step kicker, which names the same step */
@media (max-height: 420px) {
  .page-orbit .dive__read--tl { display: none; }
}
@media (max-width: 600px) {
  .page-orbit .ocf__corner { width: 12px; height: 12px; }
  .page-orbit .ocf__corner--tl, .page-orbit .ocf__corner--tr { top: 10px; }
  .page-orbit .ocf__corner--bl, .page-orbit .ocf__corner--br { bottom: 10px; }
  .page-orbit .ocf__corner--tl, .page-orbit .ocf__corner--bl { left: 10px; }
  .page-orbit .ocf__corner--tr, .page-orbit .ocf__corner--br { right: 10px; }
  .page-orbit .ocf__read { top: 15px; font-size: 8px; letter-spacing: 0.1em; }
  .page-orbit .ocf__read--tl { left: 18px; }
  .page-orbit .ocf__read--tr { display: none; }
  .page-orbit .ocf__box em { font-size: 8px; padding: 2px 5px; }
  .page-orbit .ocf__uav em { font-size: 8px; }
  .page-orbit .ocf__cam { right: 10px; bottom: 10px; width: 40%; border-radius: 10px; }
  .page-orbit .ocf__cam-read { font-size: 7.5px; left: 10px; top: 9px; }
  .page-orbit .ocf__cam-tag { font-size: 7.5px; right: 8px; bottom: 8px; }
  .page-orbit .ocf__cam::after { inset: 5px; border-radius: 6px; }
}

/* ---------------------------------------------------- Orbital layer */
.page-orbit .orbit-layer { overflow: hidden; overflow: clip; }
.page-orbit .orbit-layer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.page-orbit .orbit-layer__art { position: relative; aspect-ratio: 1 / 0.92; }
@media (min-width: 961px) {
  .page-orbit .orbit-layer__grid { align-items: start; }
  .page-orbit .orbit-layer__art { position: sticky; top: max(104px, calc(50vh - 22vw)); }
}
.page-orbit .orbit-layer__fig {
  position: absolute;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--night-2);
  box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgb(0 0 0 / 0.6);
}
.page-orbit .orbit-layer__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.1 - var(--p, 0.5) * 0.1)); }
.page-orbit .orbit-layer__fig--sat { left: 0; top: 0; width: 78%; }
.page-orbit .orbit-layer__fig--gs { right: 0; bottom: 0; width: 62%; box-shadow: 0 0 0 1px var(--line), 0 0 0 8px var(--paper), 0 50px 90px -40px rgb(0 0 0 / 0.6); }
.page-orbit .orbit-layer__hud { position: absolute; inset: 0; pointer-events: none; }
.page-orbit .orbit-layer__hud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.45)); }
.page-orbit .orbit-layer__read {
  position: absolute;
  left: 18px;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
}
.page-orbit .orbit-layer__fig--gs .orbit-layer__read { left: auto; right: 18px; text-align: right; }
.page-orbit .orbit-layer__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid var(--crimson-300);
  background: var(--crimson);
  box-shadow: none;
  transform: rotate(45deg);
}
.page-orbit .orbit-layer__link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.page-orbit .orbit-layer__link path {
  fill: none;
  stroke: var(--crimson-300);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 6;
  animation: orbit-flow 1.2s linear 4; /* under five seconds, then still */
  animation-play-state: paused;
}
.page-orbit .orbit-layer__art.is-live .orbit-layer__link path { animation-play-state: running; }
@keyframes orbit-flow { to { stroke-dashoffset: -22; } }
.page-orbit .orbit-layer__copy > * + * { margin-top: 22px; }
.page-orbit .orbit-layer__copy .eyebrow + .display { margin-top: 18px; }
.page-orbit .orbit-layer__title { font-size: clamp(2.3rem, 1rem + 3.4vw, 4.4rem); }
.page-orbit .orbit-feats { margin-top: 36px; border-top: 1px solid var(--line); }
.page-orbit .orbit-feats li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.page-orbit .orbit-feats vm-icon { color: var(--accent-text); margin-top: 2px; }
.page-orbit .orbit-feats h3 { font-size: var(--fs-h4); }
.page-orbit .orbit-feats p { margin-top: 4px; color: var(--ink-3); font-size: var(--fs-small); }
.page-orbit .orbit-layer__more { margin-top: 28px; }
@media (max-width: 960px) {
  .page-orbit .orbit-layer__grid { grid-template-columns: minmax(0, 1fr); }
  .page-orbit .orbit-layer__art { max-width: 640px; width: 100%; }
}
@media (max-width: 600px) {
  .page-orbit .orbit-layer__fig { border-radius: var(--r-lg); }
  .page-orbit .orbit-layer__fig--gs { box-shadow: 0 0 0 1px var(--line), 0 0 0 5px var(--paper), 0 40px 70px -40px rgb(0 0 0 / 0.6); }
  .page-orbit .orbit-layer__read { font-size: 8.5px; left: 12px; top: 10px; }
  .page-orbit .orbit-layer__fig--gs .orbit-layer__read { right: 12px; }
}

/* ------------------------------------------------------------ Demo head */
.page-orbit .orbit-demo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.page-orbit .orbit-demo__title { margin-top: 18px; font-size: clamp(2.4rem, 1rem + 3.8vw, 4.8rem); }
.page-orbit .orbit-demo__try { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.page-orbit .orbit-demo__try vm-icon { color: var(--accent-text); }
@media (max-width: 900px) { .page-orbit .orbit-demo__head { grid-template-columns: minmax(0, 1fr); } }

.page-orbit .orbit-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(56px, 7vw, 96px);
}
.page-orbit .orbit-fact { padding-top: 24px; border-top: 1px solid var(--line-2); }
.page-orbit .orbit-fact vm-icon { color: var(--accent-text); }
.page-orbit .orbit-fact h3 { margin-top: 18px; font-size: var(--fs-h4); }
.page-orbit .orbit-fact p { margin-top: 8px; color: var(--ink-3); font-size: var(--fs-small); }
@media (max-width: 800px) { .page-orbit .orbit-facts { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Use cases */
.page-orbit .orbit-uses__grid { grid-auto-rows: auto; }
.page-orbit .use-card { gap: 10px; }
.page-orbit .use-card__media {
  position: relative;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 14px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--night-2);
}
.page-orbit .use-card.span-2 .use-card__media { aspect-ratio: 16 / 11; }
.page-orbit .use-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.page-orbit .use-card:hover .use-card__media img { transform: scale(1.03); }
.page-orbit .use-card.span-3 .use-card__media img { transform-origin: 70% 40%; }
.page-orbit .use-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 0.42), transparent 45%); pointer-events: none; }
.page-orbit .use-card__box {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1.5px solid var(--crimson-300);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 400ms var(--ease-soft), transform 800ms var(--ease-spring);
}
.page-orbit .use-card.is-in .use-card__box { opacity: 1; transform: none; transition-delay: 600ms; }
.page-orbit .use-card__tag {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(0 0 0 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.page-orbit .use-card__tag::before { content: ""; width: 6px; height: 6px; background: var(--crimson-300); }
.page-orbit .use-card__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--accent-text); }
.page-orbit .use-card h3 { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); }
.page-orbit .use-card > p:not(.use-card__num) { font-size: var(--fs-small); color: var(--ink-3); }
.page-orbit .use-card .card__link { padding-top: 10px; }

/* ------------------------------------------------- Across domains (crimson) */
.page-orbit .orbit-chain { overflow: hidden; }
.page-orbit .orbit-chain .bg-mark { right: -10%; bottom: -24%; width: min(860px, 90vw); }
.page-orbit .orbit-chain .section-head .lead { color: rgb(255 255 255 / 0.86); }
.page-orbit .chain {
  --gap: clamp(18px, 2.6vw, 36px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.page-orbit .chain__item { position: relative; display: flex; }
.page-orbit .chain__item + .chain__item::before { /* connector */
  content: "";
  position: absolute;
  top: 26%;
  left: calc(var(--gap) * -1 + 4px);
  width: calc(var(--gap) - 8px);
  height: 1px;
  background: rgb(255 255 255 / 0.6);
}
.page-orbit .chain__item + .chain__item::after {
  content: "";
  position: absolute;
  top: calc(26% - 4px);
  left: -8px;
  border: 4.5px solid transparent;
  border-right: 0;
  border-left-color: rgb(255 255 255 / 0.8);
}
.page-orbit .chain__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px 12px 26px;
  border-radius: var(--r-xl);
  color: #fff;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform var(--t-slow) var(--ease-out), background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.page-orbit .chain__item.is-here .chain__card { background: rgb(40 0 8 / 0.22); border-color: rgb(255 255 255 / 0.36); }
.page-orbit .chain__link:hover { transform: translateY(-6px); background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.42); }
.page-orbit .chain__link:focus-visible { border-radius: var(--r-xl); }
.page-orbit .chain__media { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--r-xl) - 10px); overflow: hidden; margin-bottom: 8px; }
.page-orbit .chain__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.page-orbit .chain__link:hover .chain__media img { transform: scale(1.03); }
.page-orbit .chain__here {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #fff;
  color: var(--crimson);
}
.page-orbit .chain__num,
.page-orbit .chain__card h3,
.page-orbit .chain__card p:not(.chain__num),
.page-orbit .chain__card .link-arrow { padding-inline: 12px; }
.page-orbit .chain__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: rgb(255 255 255 / 0.72); }
.page-orbit .chain__num span { margin-left: 8px; text-transform: uppercase; color: #fff; }
.page-orbit .chain__card h3 { font-size: var(--fs-h3); color: #fff; }
.page-orbit .chain__card p:not(.chain__num) { font-size: var(--fs-small); color: rgb(255 255 255 / 0.86); }
.page-orbit .chain__card .link-arrow { margin-top: auto; padding-top: 10px; color: #fff; }
.page-orbit .orbit-chain__cta { margin-top: clamp(40px, 5vw, 72px); --cluster-gap: 12px; }
@media (max-width: 900px) {
  .page-orbit .chain { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .page-orbit .chain__item + .chain__item::before { top: calc(var(--gap) * -1 + 4px); left: 50%; width: 1px; height: calc(var(--gap) - 8px); }
  .page-orbit .chain__item + .chain__item::after { top: -8px; left: calc(50% - 4px); border: 4.5px solid transparent; border-bottom: 0; border-top-color: rgb(255 255 255 / 0.8); }
}

/* ------------------------------------------------ Principles + questions */
.page-orbit .orbit-trust { overflow: hidden; }
.page-orbit .orbit-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.page-orbit .orbit-principle { padding: 30px 26px 34px 0; border-bottom: 1px solid var(--line); }
.page-orbit .orbit-principle + .orbit-principle { padding-left: 26px; border-left: 1px solid var(--line); }
.page-orbit .orbit-principle vm-icon { color: var(--accent-text); }
.page-orbit .orbit-principle h3 { margin-top: 18px; font-size: var(--fs-h4); }
.page-orbit .orbit-principle p { margin-top: 8px; color: var(--ink-3); font-size: var(--fs-small); }
@media (max-width: 1024px) {
  .page-orbit .orbit-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-orbit .orbit-principle:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .page-orbit .orbit-principles { grid-template-columns: minmax(0, 1fr); }
  .page-orbit .orbit-principle + .orbit-principle { padding-left: 0; border-left: 0; }
}
.page-orbit .orbit-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  gap: clamp(24px, 5vw, 72px);
  margin-top: clamp(72px, 9vw, 128px);
}
.page-orbit .orbit-faq__title { font-size: var(--fs-h2); }
.page-orbit .orbit-faq .accordion__body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 800px) {
  .page-orbit .orbit-faq { grid-template-columns: minmax(0, 1fr); }
  .page-orbit .orbit-faq .accordion .accordion__body { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-orbit .orbit-layer__fig img { transform: none; }
  .page-orbit .orbit-layer__link path { animation: none; }
  .page-orbit .ocf__world { transition: none; }
}

/* In dark mode paper and night are the same black, so a paper/night seam has
   nothing to blend: keep it short so the rhythm does not stall */
:root[data-theme="dark"] .page-orbit .seam--paper-night,
:root[data-theme="dark"] .page-orbit .seam--night-paper { height: clamp(24px, 4vw, 64px); }