/* ================================================================
   MUVOpt visualizations
   Mission → Swarm → Agent zoom, task allocation included  (#toolchain)
   Pipeline integration                                    (#muv-integration)
   Uses the site's tokens from main.css (--c-navy-deep, --c-cyan, ...).
   ================================================================ */

:root {
  --muv-teal: #0088AA;
  --muv-ice:  #AAEEFF;
  --muv-nfz:  #ff6b6b;
  --muv-panel: #11161b;
}

/* No backdrop-filter anywhere on this page: re-blurring the fixed map under
   every panel on each scroll frame was a big GPU cost, and at 2px under an
   ~80% dark fill it was barely visible. Panels are a touch more opaque instead. */

/* ---------- Mission → Swarm → Agent ---------- */
.muv-zoom {
  position: relative;
  /* one screen: the visible one. svh (the smallest, address bar shown) left
     an empty band on phones once the bar slid away; dvh follows the bar */
  height: 100vh;
  height: 100dvh;
  background: var(--c-navy-deep);
}
.muv-zoom__sticky {
  position: sticky;
  top: 0;
  height: 100%;
  overflow: hidden;
  /* Promote to its own compositor layer: without this, some Chromium builds
     partially skip repainting the WebGL canvas inside a sticky ancestor
     after a scroll-driven reposition, leaving stale/blank tiles. */
  transform: translateZ(0);
}
.muv-swarm-error {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 24rem;
  text-align: center;
  font-size: 0.85em;
  color: var(--c-muted);
  background: rgba(10, 13, 16, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.muv-swarm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.muv-zoom__sticky::after {           /* scrim so the copy stays readable over the scene */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(20deg, rgba(10, 13, 16, 0.92) 0%, rgba(10, 13, 16, 0.6) 28%, rgba(10, 13, 16, 0) 52%);
}
.muv-zoom.is-static .muv-zoom__sticky::after { display: none; }
.muv-zoom__copy {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 6vh, 3.5rem);
  z-index: 1;
  max-width: 26rem;
  pointer-events: none;
}
.muv-live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.muv-live-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--muv-nfz);
  box-shadow: 0 0 6px var(--muv-nfz);
  animation: muv-live-blink 1.4s steps(1, end) infinite;
}
@keyframes muv-live-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
.muv-zoom__copy h2 {
  font-size: 1.55em;
  margin: 0 0 1.4rem;
  color: var(--c-white);
}
.muv-zoom__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: muv-step;
}
.muv-zoom__steps li {
  counter-increment: muv-step;
  position: relative;
  padding: 0.8rem 0 0.8rem 4rem;
  margin: 0;
  color: var(--c-muted);
  transition: color 0.35s var(--ease), opacity 0.35s var(--ease);
  opacity: 0.55;
  pointer-events: auto;              /* the copy block itself lets clicks through to the scene */
  line-height: 1.25;
}
.muv-zoom__steps li::before {        /* square index tags, 01 02 03 */
  content: counter(muv-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.muv-zoom__steps strong {
  display: block;
  font-size: 2.6em;
  letter-spacing: -0.015em;
  color: var(--c-white);
  font-weight: 800;
  margin-bottom: 0.15rem;
}
.muv-zoom__steps span { font-size: 0.88em; }
.muv-caption {
  margin: 1rem 0 0;
  font-size: 0.72em;
  color: var(--c-muted);
  max-width: 24rem;
}
.muv-zoom__steps li.is-active { opacity: 1; color: var(--c-text); }
.muv-zoom__steps li:not(.is-active):hover { opacity: 0.85; }
/* each stage is a button: the tour jumps to it */
.muv-zoom__go, .muv-zoom__go:hover {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  border: 0 !important; height: auto !important; white-space: normal !important;
  text-transform: none !important; letter-spacing: normal !important; color: inherit !important;
}
.muv-zoom__go::after { display: none !important; }
.muv-zoom__go::before {               /* the whole row, index tag included, is the hit area */
  content: ""; position: absolute; inset: 0;
}
.muv-zoom__go:focus-visible { outline: 1px solid var(--c-cyan); outline-offset: 4px; }
/* guided tour (muv-swarm.js init): "Start the mission", then each next
   stage pulses until clicked; the rest of the page is held back meanwhile */
html.muv-gated #toolchain ~ * { display: none !important; }
.muv-zoom__start, .muv-zoom__start:hover {
  all: unset; box-sizing: border-box; cursor: pointer; pointer-events: auto;
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%);       /* the middle of the screen: can't be missed */
  display: inline-flex; align-items: center; gap: 1rem; white-space: nowrap !important; width: auto !important;
  margin: 0; padding: 1.3rem 2.4rem; height: auto !important; line-height: 1.2 !important;
  background: var(--c-cyan) !important; color: var(--c-navy-deep) !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(0, 207, 207, 0.5);
  animation: muv-call 1.8s ease-out infinite;
}
.muv-zoom__start::after { content: "\25B6"; position: static; display: inline; opacity: 1; transform: none; background: none; font-size: 0.85em; }
.muv-zoom__start:hover { background: #fff !important; }
.muv-zoom__start:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.muv-zoom__start[hidden], .muv-zoom__skip[hidden], .muv-zoom__continue[hidden] { display: none !important; }
/* until Start: the scene and the copy dimmed behind the button */
.muv-zoom__copy, .muv-hud { transition: opacity 0.6s ease; }
.muv-zoom.is-idle .muv-swarm-canvas { filter: brightness(0.55); }
.muv-zoom.is-idle .muv-zoom__copy, .muv-zoom.is-idle .muv-hud { opacity: 0.35; }
@keyframes muv-call {
  0%   { box-shadow: 0 0 0 0 rgba(0, 207, 207, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(0, 207, 207, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 207, 207, 0); }
}
/* the stage waiting for its click */
.muv-zoom__steps li.is-next { opacity: 1; color: var(--c-text); }
.muv-zoom__steps li.is-next::before {
  border-color: var(--c-cyan); color: var(--c-cyan);
  animation: muv-call 1.8s ease-out infinite;
}
.muv-zoom__steps li.is-next strong::after {
  content: "Next \2192";
  display: inline-block; vertical-align: middle; white-space: nowrap; margin-left: 0.9rem; padding: 0.3rem 0.55rem;
  border: 1px solid var(--c-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.24em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-cyan);
}
/* during the guided part only the waiting stage takes clicks */
.muv-zoom.is-guided .muv-zoom__steps li:not(.is-next) { pointer-events: none; }
.muv-zoom.is-guided .muv-zoom__steps li:not(.is-next):not(.is-active) { opacity: 0.4; }
/* skip, after "Live flight" */
.muv-zoom__skip, .muv-zoom__skip:hover {
  all: unset; box-sizing: border-box; cursor: pointer; pointer-events: auto;
  margin-left: 0.9rem; padding: 0.25rem 0.6rem; height: auto !important; line-height: 1.2 !important;
  border: 1px solid rgba(196, 210, 220, 0.3) !important; border-radius: 0 !important;
  font: inherit; font-size: 1em; letter-spacing: 0.14em; color: var(--c-muted) !important;
}
.muv-zoom__skip::after { display: none !important; }
.muv-zoom__skip:hover { color: #fff !important; border-color: var(--c-cyan) !important; }
.muv-zoom__skip:focus-visible { outline: 1px solid var(--c-cyan); outline-offset: 2px; }
.muv-zoom.is-static .muv-zoom__skip, .muv-zoom.is-static .muv-zoom__start { display: none !important; }
.muv-zoom__continue { z-index: 3; }
/* computers: the copy sits further in, about centred on the height, and larger
   (the camera frames the scene in whatever room it leaves, see freeArea) */
@media screen and (min-width: 1100px) {
  .muv-zoom__copy {
    left: clamp(3rem, 7vw, 8rem);
    /* about centred on the height, but from a fixed top: centring on the
       block's own height made the text shift when the Start button went */
    bottom: auto; top: clamp(4.5rem, 50vh - 19rem, 12rem);
    max-width: 31rem;
    font-size: 1.12em;
  }
  .muv-zoom__copy h2 { font-size: 1.9em; }
  .muv-zoom__steps strong { font-size: 2.9em; }
  .muv-zoom__steps span { font-size: 0.95em; }
  .muv-zoom__sticky::after {          /* the scrim follows: a band down the left */
    background: linear-gradient(90deg, rgba(10, 13, 16, 0.92) 0%, rgba(10, 13, 16, 0.7) 30%, rgba(10, 13, 16, 0) 52%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .muv-zoom__start, .muv-zoom__steps li.is-next::before { animation: none; }
}
@media screen and (max-width: 736px) {
  /* over the scene, above the copy (:hover listed too: a tap is a hover on
     phones, and the base rule's :hover half would move the button away
     from under the finger mid-tap) */
  .muv-zoom__start, .muv-zoom__start:hover { top: 38%; padding: 1.1rem 1.7rem; font-size: 0.85rem; }
  .muv-zoom__steps li.is-next strong::after { font-size: 0.42em; padding: 0.2rem 0.4rem; margin-left: 0.6rem; }
  .muv-zoom__continue { bottom: auto; top: 4.5rem; }   /* clear of the stacked copy */
}
/* cut between two far-apart moments (loop restart, jumping back) */
.muv-swarm-canvas { transition: opacity 0.28s ease, filter 0.6s ease; }
.muv-swarm-canvas.is-cut { opacity: 0; }
.muv-zoom__steps li.is-active::before {
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  color: var(--c-navy-deep);
}
/* HUD readout over the scene (muv-swarm.js updateHud): mission clock, a
   scale bar, unit count — bottom right; on phones, top left */
.muv-hud {
  position: absolute;
  right: clamp(3rem, 6vw, 5rem);
  bottom: clamp(1.5rem, 6vh, 3.5rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(196, 210, 220, 0.75);
}
.muv-hud [data-hud=clock] { color: #fff; font-size: 0.82rem; }
.muv-hud [data-hud=scale] { display: flex; align-items: center; gap: 0.55rem; }
.muv-hud [data-hud=scale] i {          /* the bar, with end ticks */
  display: block; height: 6px; min-width: 8px;
  border: 1px solid rgba(196, 210, 220, 0.75); border-top: 0;
  transition: width 0.15s linear;
}
.muv-zoom.is-static .muv-hud { display: none; }
.muv-zoom__progress {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 30vh;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}
.muv-zoom__progress i {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: var(--c-cyan);
  transform-origin: top;
  transform: scaleY(0);
}

/* Reduced motion: three still frames instead of the scroll zoom */
.muv-zoom.is-static { height: auto; padding: 4rem clamp(1.5rem, 4vw, 3.5rem); }
.muv-zoom.is-static .muv-zoom__sticky { position: static; height: auto; overflow: visible; }
.muv-zoom.is-static .muv-zoom__frames {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.muv-zoom.is-static .muv-zoom__frames svg,
.muv-zoom.is-static .muv-zoom__frames canvas {
  position: static;              /* cancel .muv-swarm-canvas's absolute/inset:0 */
  flex: 1 1 240px;
  width: 100%; height: 220px;
  border-radius: var(--radius); background: var(--muv-panel); display: block;
}
.muv-zoom.is-static .muv-zoom__copy { position: static; max-width: none; }
.muv-zoom.is-static .muv-zoom__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.muv-zoom.is-static .muv-zoom__steps li { opacity: 1; color: var(--c-text); }
.muv-zoom.is-static .muv-zoom__progress { display: none; }

/* ---------- Pipeline integration, embedded as a spotlight picture ---------- */
.image.muv-pipeline {
  background: var(--muv-panel) !important;
}
.muv-pipeline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .muv-zoom__steps li, .muv-zoom__steps li::before { transition: none; }
  .muv-live-dot { animation: none; }
}
@media screen and (max-width: 736px) {
  /* small, so the scene keeps most of the screen (the camera frames the
     scene above the copy, see freeArea) */
  .muv-zoom__copy h2 { font-size: 1.02em; margin-bottom: 0.5rem; }
  .muv-live { margin-bottom: 0.5rem; font-size: 0.6em; }
  /* Phones stack the copy under the scene: instead of the desktop's corner
     scrim, a band behind the copy itself (so it follows the copy on any
     screen height), fading in just above it — the scene keeps the top. */
  .muv-zoom__sticky::after { display: none; }
  .muv-zoom__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -50vw;
    width: 200vw;
    top: -5.5rem;
    bottom: -100vh;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(10, 13, 16, 0) 0, rgba(10, 13, 16, 0.88) 5.5rem, rgba(10, 13, 16, 0.94) 100%);
  }
  .muv-zoom__steps li { padding: 0.3rem 0 0.3rem 2.4rem; }
  .muv-zoom__steps li::before { top: 0.35rem; width: 1.6rem; height: 1.6rem; font-size: 0.68em; }
  .muv-zoom__steps strong { font-size: 1.3em; margin-bottom: 0.05rem; }
  .muv-zoom__steps span { font-size: 0.78em; line-height: 1.35; display: block; }
  /* only the stage on screen (or waiting for its click) keeps its line */
  .muv-zoom__steps li:not(.is-active):not(.is-next) span { display: none; }
  /* the copy hangs from a fixed top, so a line showing or hiding never
     moves the scene above it (the camera frames the room above the copy) */
  .muv-zoom__copy { top: max(50svh, 100svh - 21rem); bottom: auto; }
  .muv-zoom__progress { display: none; }
  /* phones: one line, top left, clear of the menu button */
  .muv-hud { right: auto; bottom: auto; left: 1rem; top: 1.45rem; flex-direction: row; align-items: center; gap: 0.9rem; font-size: 0.6rem; }
  .muv-hud [data-hud=clock] { font-size: 0.68rem; }
  .muv-hud [data-hud=units] { display: none; }
}

/* ================================================================
   Tactical map behind the sections after the visualization, down to
   the partners (.muv-tactical): the same terrain contours, grid, hatched
   no-fly zones and flight lines (images/topo-map.svg, written by
   sim/export.py from the same data), fixed while the content scrolls
   over it, and the sections' panels made translucent dark to match.
   ================================================================ */
.muv-tactical {
  position: relative;
  background-color: #0a0d10;
  isolation: isolate;
  clip-path: inset(0);  /* clips the fixed map layer below to this wrapper */
}
/* The map is a fixed, screen-sized layer rather than a fixed background:
   phones ignore background-attachment: fixed (iOS Safari stretches the map
   over the whole multi-screen wrapper, or the old fallback tiled it), so
   this way it looks and behaves the same on every device. */
.muv-tactical::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../../images/topo-map.svg") center / cover no-repeat;
  opacity: 0.7;  /* a backdrop: body text stays easy to read over the hatching */
}
.muv-tactical .wrapper,
.muv-tactical .wrapper.style2,
.muv-tactical .wrapper.style3 {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.78);
}
.muv-tactical h1, .muv-tactical h2, .muv-tactical h3 { color: #ffffff; }

/* ---------- Toolchain ---------- */
.muv-toolchain > .inner { padding-top: 5rem; padding-bottom: 4rem; }
.muv-kicker {
  margin: 0 0 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cyan, #00cfcf);
}
.muv-toolchain h2 { margin-bottom: 1rem; }
.muv-lede { max-width: 46rem; color: rgba(255, 255, 255, 0.72); }
.muv-pipeline--wide {
  position: relative;
  margin: 2.5rem 0 0;
  aspect-ratio: 700 / 70;
  border: 1px solid rgba(196, 210, 220, 0.14);
  background: rgba(10, 13, 16, 0.8);
}
.muv-pipeline--wide::before,
.muv-pipeline--wide::after {          /* corner ticks on the frame */
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--c-cyan, #00cfcf);
}
.muv-pipeline--wide::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.muv-pipeline--wide::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }

/* ---------- spotlights over the map ---------- */
.muv-tactical .spotlights > section { background-color: transparent; }
.muv-tactical .spotlights > section > .content {
  background: rgba(10, 13, 16, 0.86);
  border-left: 1px solid rgba(196, 210, 220, 0.14);
}
.muv-tactical .spotlights > section > .content p { color: rgba(255, 255, 255, 0.74); }
.muv-tactical .spotlight-question {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  color: var(--c-cyan, #00cfcf);
}

/* ---------- "What we do" cards over the map ---------- */
.muv-tactical .features section {
  background: rgba(10, 13, 16, 0.85) !important;
  border: 1px solid rgba(196, 210, 220, 0.14) !important;
  box-shadow: none !important;
  border-radius: 2px;
}
.muv-tactical .features section li,
.muv-tactical .features section p { color: rgba(255, 255, 255, 0.72); }

/* The template's light-theme rules for .wrapper.style2 / .style3 are
   !important (main.css, "Arctic Frost" and "FEATURE CARDS"); inside the
   tactical section these more specific ones win. */
.muv-tactical .wrapper.style2,
.muv-tactical .wrapper.style3 { background: transparent !important; }
.muv-tactical .wrapper.style2 h2, .muv-tactical .wrapper.style2 h3,
.muv-tactical .wrapper.style3 h2, .muv-tactical .wrapper.style3 h3,
.muv-tactical .wrapper.style3 .features > section h3 { color: #ffffff !important; }
.muv-tactical .wrapper.style2 p, .muv-tactical .wrapper.style2 li,
.muv-tactical .wrapper.style3 p, .muv-tactical .wrapper.style3 li { color: rgba(255, 255, 255, 0.74) !important; }
.muv-tactical .wrapper.style3 .features > section .icon.major,
.muv-tactical .wrapper.style3 .features > section ul li::before { color: var(--c-cyan, #00cfcf) !important; }
.muv-tactical .wrapper.style3 .features > section {
  background: rgba(10, 13, 16, 0.8) !important;
  border: 1px solid rgba(196, 210, 220, 0.14) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.muv-pipeline--wide.is-vertical { aspect-ratio: 240 / 450; max-width: 18rem; margin-left: auto; margin-right: auto; }

/* ---------- Hero: "Scroll" cue at the bottom of the title screen ---------- */
.muv-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  border: 0 !important;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(196, 210, 220, 0.8) !important;
}
.muv-scroll-cue:hover { color: var(--c-cyan, #00cfcf) !important; }
.muv-scroll-cue i {                     /* a thin track with a cyan dash running down it */
  position: relative;
  display: block;
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  background: rgba(196, 210, 220, 0.18);
}
.muv-scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 40%;
  background: var(--c-cyan, #00cfcf);
  animation: muv-scroll-cue 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes muv-scroll-cue {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .muv-scroll-cue i::after { animation: none; top: 30%; }
}

/* ---------- Hero: bare terrain (contours + grid, no zones) behind the title ---------- */
#intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../../images/topo-terrain.svg") center / cover no-repeat;
  opacity: 0.95;
  /* fade out toward the centre, so the logo and title sit on calm ground */
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0, 0, 0, 0.25) 0%, #000 75%);
          mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0, 0, 0, 0.25) 0%, #000 75%);
}

/* ================================================================
   "Our Mission" — capability table ([data-muv-tabs])
   Left: numbered rows, thin rules, a cyan marker on the open one.
   Right: the open capability in a framed panel — image with a HUD
   tag and grid overlay, text, and a small spec sheet.
   ================================================================ */
.muv-mission > .inner { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.muv-mission h2 { margin-bottom: 0.6rem; }
.muv-mission__motto { margin: 0 0 2rem; font-size: 1.15em; color: rgba(255, 255, 255, 0.72); }
.muv-mission__motto strong { color: var(--c-cyan, #00cfcf); }
.muv-tabs.is-ready {
  display: grid;
  grid-template-columns: minmax(15rem, 0.9fr) 2fr;
  gap: 0;
  border: 1px solid rgba(196, 210, 220, 0.14);
  background: rgba(10, 13, 16, 0.85);
  position: relative;
}
.muv-tabs.is-ready::before,
.muv-tabs.is-ready::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--c-cyan, #00cfcf); pointer-events: none;
}
.muv-tabs.is-ready::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.muv-tabs.is-ready::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }

.muv-tabs__list { display: flex; flex-direction: column; border-right: 1px solid rgba(196, 210, 220, 0.14); }
.muv-tabs:not(.is-ready) .muv-tabs__list { display: none; }   /* no JS: just the panels */
.muv-tabs__tab {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.4rem;
  padding: 1.35rem 1.4rem 1.35rem 1.2rem;
  border-bottom: 1px solid rgba(196, 210, 220, 0.1);
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}
.muv-tabs__tab:last-child { border-bottom: 0; }
.muv-tabs__tab::before {               /* active marker */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--c-cyan, #00cfcf); transform: scaleY(0); transform-origin: top;
  transition: transform 0.25s ease;
}
.muv-tabs__tab:hover { background: rgba(196, 210, 220, 0.04); }
.muv-tabs__tab[aria-selected="true"] { background: rgba(0, 207, 207, 0.07); }
.muv-tabs__tab[aria-selected="true"]::before { transform: scaleY(1); }
.muv-tabs__tab:focus-visible { outline: 1px solid var(--c-cyan, #00cfcf); outline-offset: -3px; }
.muv-tabs__idx {
  grid-row: 1 / span 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75em; letter-spacing: 0.08em; color: rgba(196, 210, 220, 0.45);
  padding-top: 0.2rem;
}
.muv-tabs__tab[aria-selected="true"] .muv-tabs__idx { color: var(--c-cyan, #00cfcf); }
.muv-tabs__name { font-weight: 700; color: rgba(255, 255, 255, 0.8); line-height: 1.3; }
.muv-tabs__tab[aria-selected="true"] .muv-tabs__name { color: #ffffff; }
.muv-tabs__q {
  margin-top: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62em; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38); line-height: 1.5;
}

.muv-tabs__panel {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 24rem;
}
.muv-tabs:not(.is-ready) .muv-tabs__panel { margin-bottom: 2rem; border: 1px solid rgba(196, 210, 220, 0.14); }
.muv-tabs__panel[hidden] { display: none; }
.muv-tabs__panel.is-in .muv-tabs__media img { animation: muv-tab-in 0.5s ease both; }
.muv-tabs__panel.is-in .muv-tabs__body { animation: muv-tab-in 0.5s 0.08s ease both; }
@keyframes muv-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.muv-tabs__media { position: relative; margin: 0; overflow: hidden; border-right: 1px solid rgba(196, 210, 220, 0.1); }
.muv-tabs__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.55) contrast(1.05) brightness(0.85);
}
.muv-tabs__media::before {             /* grid + tint over the image */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(196, 210, 220, 0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(196, 210, 220, 0.07) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, rgba(10, 13, 16, 0.1), rgba(10, 13, 16, 0.55));
}
.muv-tabs__media::after {              /* HUD tag */
  content: attr(data-tag);
  position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6em; letter-spacing: 0.14em; color: var(--c-cyan, #00cfcf);
  padding: 0.25rem 0.5rem; border: 1px solid rgba(0, 207, 207, 0.45); background: rgba(10, 13, 16, 0.7);
}
.muv-tabs__body { padding: 2rem 2.2rem; }
.muv-tabs__body h3 { margin: 0 0 1rem; font-size: 1.35em; }
.muv-tabs__body p:not(.muv-kicker) { font-size: 0.92em; line-height: 1.7; }
.muv-tabs__specs { margin: 1.6rem 0 0; border-top: 1px solid rgba(196, 210, 220, 0.12); }
.muv-tabs__specs > div {
  display: grid; grid-template-columns: 6rem 1fr; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid rgba(196, 210, 220, 0.08);
}
.muv-tabs__specs dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65em; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(196, 210, 220, 0.5);
  padding-top: 0.15rem;
}
.muv-tabs__specs dd { margin: 0; font-size: 0.85em; color: rgba(255, 255, 255, 0.85); }

@media screen and (max-width: 980px) {
  .muv-tabs.is-ready { grid-template-columns: 1fr; }
  .muv-tabs__list { border-right: 0; border-bottom: 1px solid rgba(196, 210, 220, 0.14); }
  .muv-tabs__panel { grid-template-columns: 1fr; min-height: 0; }
  .muv-tabs__media { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid rgba(196, 210, 220, 0.1); }
  .muv-tabs__body { padding: 1.5rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .muv-tabs__panel.is-in .muv-tabs__media img, .muv-tabs__panel.is-in .muv-tabs__body { animation: none; }
}
/* the template styles every <button> as a pill (an !important border and a
   white ::after glow on hover); the tab rows are table rows, not buttons */
.muv-tabs__tab,
.muv-tabs__tab:hover {
  border: 0 !important;
  border-bottom: 1px solid rgba(196, 210, 220, 0.1) !important;
  border-radius: 0 !important;
  height: auto !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.muv-tabs__tab:last-child { border-bottom: 0 !important; }
.muv-tabs__tab::after { display: none !important; }

/* ================================================================
   "What we do" — modules hanging off the Toolchain flowchart
   A rail drops from the flowchart frame to a row of four modules;
   each says which part of the pipeline it covers (→ SOLVER …) and
   lights that part up on hover / focus.
   ================================================================ */
.muv-modules { position: relative; margin-top: 0; padding-top: 3rem; }
.muv-modules::before {                 /* rail from the flowchart down to the modules */
  content: ""; position: absolute; left: 50%; top: 0; height: 3rem; width: 1px;
  background: linear-gradient(to bottom, rgba(0, 207, 207, 0.55), rgba(0, 207, 207, 0.15));
}
.muv-modules__title {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1.4rem; font-size: 1.15em; font-weight: 700; color: #fff;
}
.muv-modules__title .muv-kicker { margin: 0; }
.muv-modules__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0, 207, 207, 0.35);
  position: relative;
}
.muv-module {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  border-right: 1px solid rgba(196, 210, 220, 0.1);
  background: rgba(10, 13, 16, 0.55);
  transition: background-color 0.2s ease;
  outline: none;
}
.muv-module:last-child { border-right: 0; }
.muv-module::before {                  /* tick dropping from the rail */
  content: ""; position: absolute; left: 1.4rem; top: -1px; width: 1.6rem; height: 2px;
  background: var(--c-cyan, #00cfcf); transform: scaleX(0.4); transform-origin: left;
  transition: transform 0.25s ease;
}
.muv-module:hover, .muv-module:focus-visible { background: rgba(0, 207, 207, 0.07); }
.muv-module:hover::before, .muv-module:focus-visible::before { transform: scaleX(1); }
.muv-module:focus-visible { box-shadow: inset 0 0 0 1px rgba(0, 207, 207, 0.6); }
.muv-module__at {
  margin: 0 0 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62em; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(196, 210, 220, 0.55);
}
.muv-module__at span { color: var(--c-cyan, #00cfcf); margin-right: 0.35rem; }
.muv-module h4 {
  margin: 0 0 0.9rem; font-size: 1em; line-height: 1.35; color: #fff;
  display: flex; align-items: center; gap: 0.6rem;
}
.muv-module h4 .icon { color: var(--c-cyan, #00cfcf); font-size: 0.85em; width: 1.1em; text-align: center; }
.muv-module h4 .icon:before { line-height: 1; }
.muv-module ul { list-style: none; margin: 0; padding: 0; }
.muv-module li {
  position: relative; padding: 0 0 0 1rem; margin: 0 0 0.55rem;
  font-size: 0.8em; line-height: 1.55; color: rgba(255, 255, 255, 0.68);
}
.muv-module li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 1px;
  background: rgba(0, 207, 207, 0.7);
}

/* the pipeline part a hovered module covers */
.muv-pipeline .muv-node rect { transition: stroke 0.2s ease, fill 0.2s ease; }
.muv-pipeline.is-hot .muv-node:not(.is-hot) text,
.muv-pipeline.is-hot .muv-node:not(.is-hot) path { opacity: 0.4; transition: opacity 0.2s ease; }
.muv-pipeline.is-hot .muv-node:not(.is-hot) rect { stroke: rgba(196, 210, 220, 0.2); }
.muv-pipeline .muv-node.is-hot rect { stroke: #00cfcf; fill: #0b2a2d; }  /* opaque: links run behind the nodes */
.muv-pipeline .muv-link { transition: stroke-width 0.2s ease; }
.muv-pipeline .muv-link.is-hot { stroke-width: 3.5; }

@media screen and (max-width: 980px) {
  .muv-modules__grid { grid-template-columns: repeat(2, 1fr); }
  .muv-module:nth-child(2) { border-right: 0; }
  .muv-module:nth-child(-n + 2) { border-bottom: 1px solid rgba(196, 210, 220, 0.1); }
}
@media screen and (max-width: 560px) {
  .muv-modules__grid { grid-template-columns: 1fr; }
  .muv-module { border-right: 0; border-bottom: 1px solid rgba(196, 210, 220, 0.1); }
  .muv-module:last-child { border-bottom: 0; }
}

/* protocol tags: only while "Pipeline integration" is hovered / focused */
.muv-pipeline .muv-tag { opacity: 0; transition: opacity 0.25s ease; }
.muv-pipeline.show-tags .muv-tag { opacity: 1; }
.muv-module > p:last-child { margin: 0; font-size: 0.82em; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }
.muv-toolchain h2 { margin-bottom: 0; }

/* ================================================================
   Navigation — no sidebar: the menu button and drawer (index.html,
   #mobile-nav-*) at every width, in the tactical style. main.css only
   shows them on phones; these rules make them global.
   ================================================================ */
#wrapper { margin-left: 0 !important; }
#mobile-nav-toggle {
  display: flex !important;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  position: fixed; top: 1rem; right: 1.2rem; z-index: 9999;
  width: 2.6rem; height: 2.6rem; padding: 0.6rem;
  background: rgba(10, 13, 16, 0.92) !important;
  border: 1px solid rgba(0, 207, 207, 0.35) !important;
  border-radius: 2px !important;
  cursor: pointer;
}
#mobile-nav-toggle::after { display: none !important; }
#mobile-nav-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 0; transition: all 0.3s ease; }
#mobile-nav-drawer {
  display: block;
  position: fixed; top: 0; right: 0; z-index: 9998;
  width: 75vw; max-width: 320px; height: 100%;
  padding: 5rem 2rem 2rem;
  background: rgba(10, 13, 16, 0.97) !important;
  border-left: 1px solid rgba(0, 207, 207, 0.25);
  transform: translateX(100%); transition: transform 0.3s ease;
}
#mobile-nav-drawer.open { transform: translateX(0); }
#mobile-nav-drawer ul { list-style: none; margin: 0; padding: 0; }
#mobile-nav-drawer ul li { border-bottom: 1px solid rgba(196, 210, 220, 0.1); padding: 0; }
#mobile-nav-drawer ul li a {
  display: block; padding: 0.95rem 0; border: none; text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
#mobile-nav-drawer ul li a:hover { color: var(--c-cyan, #00cfcf) !important; }
#mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 9997; background: rgba(0, 0, 0, 0.5); }
#mobile-nav-overlay.open { display: block; }

/* ================================================================
   "Our Missions" — operations ([data-muv-ops])
   Titles across the top (OP-01 …), the open one's video below as a
   sensor feed, and a three-line brief beside it.
   ================================================================ */
.muv-ops.is-ready { border: 1px solid rgba(196, 210, 220, 0.14); background: rgba(10, 13, 16, 0.8); position: relative; }
.muv-ops.is-ready::before, .muv-ops.is-ready::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--c-cyan, #00cfcf); pointer-events: none; z-index: 2;
}
.muv-ops.is-ready::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.muv-ops.is-ready::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.muv-ops:not(.is-ready) .muv-ops__list { display: none; }

.muv-ops__list { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(196, 210, 220, 0.14); }
.muv-ops__tab, .muv-ops__tab:hover {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 0 !important; border-right: 1px solid rgba(196, 210, 220, 0.1) !important; border-radius: 0 !important;
  height: auto !important; text-transform: none !important; letter-spacing: normal !important;
  transition: background-color 0.2s ease;
}
.muv-ops__tab:last-child { border-right: 0 !important; }
.muv-ops__tab::after { display: none !important; }
.muv-ops__tab::before {               /* open marker along the bottom */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-cyan, #00cfcf); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.muv-ops__tab:hover { background: rgba(196, 210, 220, 0.04) !important; }
.muv-ops__tab[aria-selected="true"] { background: rgba(0, 207, 207, 0.07) !important; }
.muv-ops__tab[aria-selected="true"]::before { transform: scaleX(1); }
.muv-ops__tab:focus-visible { outline: 1px solid var(--c-cyan, #00cfcf); outline-offset: -3px; }
.muv-ops__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem; letter-spacing: 0.16em; color: rgba(196, 210, 220, 0.45);
}
.muv-ops__tab[aria-selected="true"] .muv-ops__code { color: var(--c-cyan, #00cfcf); }
.muv-ops__name { font-weight: 700; font-size: 0.95rem; line-height: 1.3; color: rgba(255, 255, 255, 0.72); }
.muv-ops__tab[aria-selected="true"] .muv-ops__name { color: #fff; }

.muv-ops__panel { display: grid; grid-template-columns: 2.3fr 1fr; }
.muv-ops__panel[hidden] { display: none; }
.muv-ops:not(.is-ready) .muv-ops__panel { margin-bottom: 2rem; border: 1px solid rgba(196, 210, 220, 0.14); }
.muv-ops__panel.is-in .muv-ops__feed video, .muv-ops__panel.is-in .muv-ops__stealth { animation: muv-tab-in 0.45s ease both; }
.muv-ops__panel.is-in .muv-ops__brief { animation: muv-tab-in 0.45s 0.08s ease both; }

.muv-ops__feed { position: relative; margin: 0; background: #050709; aspect-ratio: 16 / 9; overflow: hidden;
  border-right: 1px solid rgba(196, 210, 220, 0.1); }
.muv-ops__feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.muv-ops__stealth { position: absolute; inset: 0; margin: auto; width: 38%; max-width: 200px; aspect-ratio: 1;
  mix-blend-mode: screen; opacity: 0.9; display: block; }   /* black jpeg background drops out against the feed */
.muv-ops__feed::before {              /* faint scanlines over the feed */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px);
}
.muv-ops__tag {                        /* feed tag, top left: icon · OP-0n · STEALTH */
  position: absolute; left: 0.8rem; top: 0.7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; color: var(--c-cyan, #00cfcf);
  padding: 0.3rem 0.55rem; border: 1px solid rgba(0, 207, 207, 0.45); background: rgba(10, 13, 16, 0.78);
}
.muv-ops__tag i {                      /* images/stealth-mask.png, inlined (CSS masks can't load from file://), tinted cyan */
  display: block; width: 0.95rem; height: 0.75rem; background: currentColor;
  -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAAEK0lEQVR42tWYW4hVVRjHf2vPeGYmMW+EkWNGVFSTEgWhTIkYlRVEQtBFMy2zqIeo6OKNLgb1XBH50JP0UCAlYWg99FD0UG/1EFG9SIkPolENMs6c8+vl27TZnjNnn7l15g+Lfc7hrLX///Vd1vctmEGow+owcxHqUvUH9Sf14rlGPlMP+B8+UHvmkoCH1PGCgDH14blC/gr1uOfjd3Wo28nX1E9sjS/U+d0sYJft8Wy3kt+gjlYQ8Kt6dbeRH4x02Q7j6oh6SL2wW8j3qAethhH1lPqX+lK3CNhRkfyoeibGafUP9db/m/z16smKAv4pCfhb/VpdPhUO2RTI9wNvA8sq/H0cOAckoB6/jQI3AC+rvbMuANgK3FLxv2fjXY14pniOAfcBd8+qAPVyoGo+H4vRAMyXiHcL1IDN6qWzIkAdAPYCV1WdUiBrSUQKYcuBbWrfbFhgO7Ap/LoKaiW3yT/naMRzGLh3RgWoa4DngZ4SiXboK7yr6EoUYkPgfnXVjAhQLwL2AJdERml08J5awY2yJi6WC1sI7FAXzYQFngM2ACOx+3YwNwEXlAi3CvhrgS1qmjYB6j2RNscL81KH7toTrmSFrHU7sG5aBER62wssiEMolYKvE/RXtNw84BF1xZQEqPOAfWHWesEFJkO+bIWs4F6UUmsGrAQebZda21lgW6TM+hRIlzFQOguaxcu5GGuBOyclQL0ReCEySGOKZUfZCgMRT6nFwZcKh95m9bqOBKhLgFfjhBwrnaCpMKZihWyCjFW8glkMPKYu6MQCz0ShNtqEaJoGK6RCLNjEAkUXGwOGgK3NUmvWZPfvAnaWdmEm0N/BZhip9eYJBUTK3AMsiiByBgWkENEuthphhYEo+AabClBrwC5gddTvPU0WT9Msqhbr1UslRfmdKYL+snClvmYW2AI8EGpp4Z+NEDY+TUJS7GxeVjdauFUqdHHriw1Qlve2wIslv3cCf6zFmA7MDxG9FTelHlXrNQCZuhh4DVjRwnzFXclT3Mk4oQ/GrkwWo7HGu8DpQtU6UbZrAEuB7erCpL4JPFlouFOTbqoRO5QB3wL7UkrfhfU2Ars76I9zfAO8lVI6EutcCTwRMZjHRdaiAsgbo8NZwWz1FkGbkz8LHAC25OQBUkpHI8U9DvxcgfhvQXRjTj7W+QXYDxyKOOxt0vwU3SgBPUldGmZcF6mzLKAGHI/FP0op1ScoP5YBTwNPhZmLOBUb8F5K6USbInJ91GGDTTg1orf4EXgjnzAcd/pnCuPPuHw6rK7usPVcpX4Yd6Fj8XmowzVWqPvVo+ox9Yj6eXz/TL2pPGF3ED4VzxPq61EXTebqJVPvUG9TJ3t9M6A+qH6qfhkijqk7zysr1CWhbFT9Xt1El0Bdo76vfqW+07Jnjjv+j+Nc6CqoK9VX1LXF3/8Fyo2ujsfYpv4AAAAASUVORK5CYII=") center / contain no-repeat;
          mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAAEK0lEQVR42tWYW4hVVRjHf2vPeGYmMW+EkWNGVFSTEgWhTIkYlRVEQtBFMy2zqIeo6OKNLgb1XBH50JP0UCAlYWg99FD0UG/1EFG9SIkPolENMs6c8+vl27TZnjNnn7l15g+Lfc7hrLX///Vd1vctmEGow+owcxHqUvUH9Sf14rlGPlMP+B8+UHvmkoCH1PGCgDH14blC/gr1uOfjd3Wo28nX1E9sjS/U+d0sYJft8Wy3kt+gjlYQ8Kt6dbeRH4x02Q7j6oh6SL2wW8j3qAethhH1lPqX+lK3CNhRkfyoeibGafUP9db/m/z16smKAv4pCfhb/VpdPhUO2RTI9wNvA8sq/H0cOAckoB6/jQI3AC+rvbMuANgK3FLxv2fjXY14pniOAfcBd8+qAPVyoGo+H4vRAMyXiHcL1IDN6qWzIkAdAPYCV1WdUiBrSUQKYcuBbWrfbFhgO7Ap/LoKaiW3yT/naMRzGLh3RgWoa4DngZ4SiXboK7yr6EoUYkPgfnXVjAhQLwL2AJdERml08J5awY2yJi6WC1sI7FAXzYQFngM2ACOx+3YwNwEXlAi3CvhrgS1qmjYB6j2RNscL81KH7toTrmSFrHU7sG5aBER62wssiEMolYKvE/RXtNw84BF1xZQEqPOAfWHWesEFJkO+bIWs4F6UUmsGrAQebZda21lgW6TM+hRIlzFQOguaxcu5GGuBOyclQL0ReCEySGOKZUfZCgMRT6nFwZcKh95m9bqOBKhLgFfjhBwrnaCpMKZihWyCjFW8glkMPKYu6MQCz0ShNtqEaJoGK6RCLNjEAkUXGwOGgK3NUmvWZPfvAnaWdmEm0N/BZhip9eYJBUTK3AMsiiByBgWkENEuthphhYEo+AabClBrwC5gddTvPU0WT9Msqhbr1UslRfmdKYL+snClvmYW2AI8EGpp4Z+NEDY+TUJS7GxeVjdauFUqdHHriw1Qlve2wIslv3cCf6zFmA7MDxG9FTelHlXrNQCZuhh4DVjRwnzFXclT3Mk4oQ/GrkwWo7HGu8DpQtU6UbZrAEuB7erCpL4JPFlouFOTbqoRO5QB3wL7UkrfhfU2Ars76I9zfAO8lVI6EutcCTwRMZjHRdaiAsgbo8NZwWz1FkGbkz8LHAC25OQBUkpHI8U9DvxcgfhvQXRjTj7W+QXYDxyKOOxt0vwU3SgBPUldGmZcF6mzLKAGHI/FP0op1ScoP5YBTwNPhZmLOBUb8F5K6USbInJ91GGDTTg1orf4EXgjnzAcd/pnCuPPuHw6rK7usPVcpX4Yd6Fj8XmowzVWqPvVo+ox9Yj6eXz/TL2pPGF3ED4VzxPq61EXTebqJVPvUG9TJ3t9M6A+qH6qfhkijqk7zysr1CWhbFT9Xt1El0Bdo76vfqW+07Jnjjv+j+Nc6CqoK9VX1LXF3/8Fyo2ujsfYpv4AAAAASUVORK5CYII=") center / contain no-repeat;
}
.muv-ops__brief { padding: 1.8rem 1.6rem; display: flex; flex-direction: column; }
.muv-ops__brief h3 { margin: 0 0 0.8rem; font-size: 1.25em; line-height: 1.25; color: #fff; }
.muv-ops__brief p:not(.muv-kicker) { margin: 0; font-size: 0.85em; line-height: 1.6; color: rgba(255, 255, 255, 0.66) !important; }
.muv-ops__specs { margin: auto 0 0; padding-top: 1.4rem; }
.muv-ops__specs > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid rgba(196, 210, 220, 0.1); }
.muv-ops__specs dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(196, 210, 220, 0.5); padding-top: 0.15rem;
}
.muv-ops__specs dd { margin: 0; font-size: 0.82em; color: #fff; }

@media screen and (max-width: 980px) {
  .muv-ops__list { grid-template-columns: 1fr 1fr; }
  .muv-ops__tab:nth-child(2) { border-right: 0 !important; }
  .muv-ops__tab:nth-child(-n + 2) { border-bottom: 1px solid rgba(196, 210, 220, 0.1) !important; }
  .muv-ops__panel { grid-template-columns: 1fr; }
  .muv-ops__feed { border-right: 0; border-bottom: 1px solid rgba(196, 210, 220, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .muv-ops__panel.is-in .muv-ops__feed video, .muv-ops__panel.is-in .muv-ops__brief { animation: none; }
}

/* picked module (click / tap): stays lit */
.muv-module[aria-pressed="true"] { background: rgba(0, 207, 207, 0.1); }
.muv-module[aria-pressed="true"]::before { transform: scaleX(1); }
.muv-modules__detail { display: none; }

/* ---------- phones: flowchart + modules on one screen ----------
   compact full-width vertical flowchart; modules as a 2x2 grid of
   tap targets right under it; the picked one's line below the grid */
@media screen and (max-width: 560px) {
  .muv-pipeline--wide.is-vertical { aspect-ratio: 300 / 332; max-width: none; margin-top: 1.5rem; }
  .muv-modules { padding-top: 0.9rem; }
  .muv-modules::before { display: none; }
  .muv-modules__grid { grid-template-columns: 1fr 1fr; border-top: 0; gap: 0.4rem; }
  .muv-module, .muv-module:last-child {
    padding: 0.7rem 0.75rem; border: 1px solid rgba(196, 210, 220, 0.14) !important; background: rgba(10, 13, 16, 0.8);
  }
  .muv-module::before { display: none; }
  .muv-module__at, .muv-module > p:last-child { display: none; }
  .muv-module h4 { margin: 0; font-size: 0.74em; line-height: 1.25; gap: 0.5rem; }
  .muv-module[aria-pressed="true"] { border-color: #00cfcf !important; background: rgba(0, 207, 207, 0.12); }
  .muv-modules__detail:not([hidden]) {
    display: block; margin: 0.6rem 0 0; padding: 0.6rem 0.75rem;
    border-left: 2px solid #00cfcf; background: rgba(0, 207, 207, 0.06);
    font-size: 0.8em; line-height: 1.5; color: rgba(255, 255, 255, 0.8);
  }
  .muv-modules__detail span {
    display: block; margin-bottom: 0.15rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em; letter-spacing: 0.12em; text-transform: uppercase; color: #00cfcf;
  }
}

/* ---------- phones: the chain as stacked HTML boxes (built by muv-viz.js) ---------- */
.muv-chain { display: none; }
@media screen and (max-width: 560px) {
  .muv-pipeline--wide { display: none; }
  .muv-chain {
    display: flex; flex-direction: column; list-style: none;
    margin: 1.4rem 0 0; padding: 1rem 0.9rem;
    border: 1px solid rgba(196, 210, 220, 0.14); background: rgba(10, 13, 16, 0.8);
    position: relative;
  }
  .muv-chain::before, .muv-chain::after {
    content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid #00cfcf; pointer-events: none;
  }
  .muv-chain::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
  .muv-chain::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
  .muv-chain__node {
    margin: 0; padding: 0.6rem 0.8rem; text-align: center;
    font-size: 1rem; font-weight: 700; line-height: 1.3; color: #fff;
    border: 1px solid rgba(196, 210, 220, 0.4); background: #0a0d10;
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  }
  .muv-chain__link { position: relative; height: 1.7rem; margin: 0; padding: 0; }
  .muv-chain__link::before {          /* the connector */
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #00cfcf;
    transition: width 0.2s ease, margin-left 0.2s ease;
  }
  .muv-chain__link::after {           /* a packet running down it */
    content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; background: #aaeeff;
    animation: muv-chain-packet 1.6s linear infinite;
  }
  .muv-chain__link:nth-child(4)::after { animation-delay: 0.4s; }
  .muv-chain__link:nth-child(6)::after { animation-delay: 0.8s; }
  .muv-chain__link:nth-child(8)::after { animation-delay: 1.2s; }
  .muv-chain__link span {             /* protocol tag, beside the connector */
    position: absolute; left: calc(50% + 0.75rem); top: 50%; transform: translateY(-50%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
    color: #00cfcf; opacity: 0; transition: opacity 0.25s ease;
  }
  .muv-chain.show-tags .muv-chain__link span { opacity: 1; }
  .muv-chain__node.is-hot { border-color: #00cfcf; background: #0b2a2d; }
  .muv-chain.is-hot .muv-chain__node:not(.is-hot) { opacity: 0.45; }
  .muv-chain__link.is-hot::before { width: 4px; margin-left: -2px; }
}
@keyframes muv-chain-packet { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 5px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .muv-chain__link::after { animation: none; display: none; } }

/* ---------- Founders (#founders): dossier cards, no photos ---------- */
.muv-crew > .inner { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.muv-crew h2 { margin-bottom: 0.6rem; }
.muv-crew__lede { max-width: 46rem; margin: 0 0 2.2rem; color: rgba(255, 255, 255, 0.72); }
.muv-crew__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0, 207, 207, 0.35);
}
.muv-crew__card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.6rem 1.4rem 1.2rem;
  border-right: 1px solid rgba(196, 210, 220, 0.1);
  background: rgba(10, 13, 16, 0.55);
  transition: background-color 0.2s ease;
}
.muv-crew__card:last-child { border-right: 0; }
.muv-crew__card::before {              /* same tick as the modules */
  content: ""; position: absolute; left: 1.4rem; top: -1px; width: 1.6rem; height: 2px;
  background: var(--c-cyan, #00cfcf); transform: scaleX(0.4); transform-origin: left;
  transition: transform 0.25s ease;
}
.muv-crew__card:hover { background: rgba(0, 207, 207, 0.07); }
.muv-crew__card:hover::before { transform: scaleX(1); }
.muv-crew__id {
  margin: 0 0 1.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62em; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(196, 210, 220, 0.55);
}
.muv-crew__id span { color: var(--c-cyan, #00cfcf); margin-right: 0.6rem; }
.muv-crew__badge {                     /* initials in place of a photo */
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0 0 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; color: var(--c-cyan, #00cfcf);
  border: 1px solid rgba(0, 207, 207, 0.45);
  background:
    linear-gradient(rgba(0, 207, 207, 0.08) 1px, transparent 1px) 0 0 / 100% 0.4rem,
    rgba(10, 13, 16, 0.78);
}
.muv-crew__card h3 { margin: 0 0 0.4rem; font-size: 1.02em; line-height: 1.35; color: #fff; }
.muv-crew__specs { margin: 0; padding-top: 1rem; }
.muv-crew__specs > div {
  display: grid; grid-template-columns: 6.4rem 1fr; gap: 0.6rem;
  padding: 0.55rem 0; border-top: 1px solid rgba(196, 210, 220, 0.1);
}
.muv-crew__specs dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(196, 210, 220, 0.5); padding-top: 0.15rem;
}
.muv-crew__specs dd { margin: 0; font-size: 0.8em; line-height: 1.5; color: #fff; }
.muv-crew__specs ul { list-style: none; margin: 0; padding: 0; }
.muv-crew__specs li { position: relative; margin: 0 0 0.3rem; padding: 0 0 0 0.9rem; }
.muv-crew__specs li:last-child { margin-bottom: 0; }
.muv-crew__specs li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 0.45rem; height: 1px;
  background: rgba(0, 207, 207, 0.7);
}

@media screen and (max-width: 980px) {
  .muv-crew__grid { grid-template-columns: repeat(2, 1fr); }
  .muv-crew__card:nth-child(2) { border-right: 0; }
  .muv-crew__card:nth-child(-n + 2) { border-bottom: 1px solid rgba(196, 210, 220, 0.1); }
}
@media screen and (max-width: 560px) {
  .muv-crew__grid { grid-template-columns: 1fr; }
  .muv-crew__card { border-right: 0; border-bottom: 1px solid rgba(196, 210, 220, 0.1); }
  .muv-crew__card:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .muv-crew__card, .muv-crew__card::before { transition: none; }
}

/* ---------- Partners strip: undisclosed for now ---------- */
.muv-partners { border-top: 0 !important; }      /* sits right under "Supported by" */
.muv-partners .inner { padding-top: 0.5rem !important; }
/* undisclosed partners: one line, no names, no logos */
.partners-tba {
  margin: 1.2rem 0 0.4rem; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(22, 47, 71, 0.6);
}
.muv-ops__list:has(> .muv-ops__tab:only-child) { grid-template-columns: 1fr; }
.muv-ops__list:has(> .muv-ops__tab:only-child) .muv-ops__tab { border-bottom: 0 !important; }

/* ---------- Get in touch: a framed panel, intro + call to action on the
   left, contact channels on the right (one column on phones) ---------- */
.muv-contact { background-color: #0a0d10 !important; }
.muv-contact .inner { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.muv-contact__panel {
  position: relative;
  display: grid; grid-template-columns: 1.4fr 1fr;
  border: 1px solid rgba(196, 210, 220, 0.14);
  background: rgba(17, 22, 27, 0.6);
}
.muv-contact__panel::before, .muv-contact__panel::after {     /* corner ticks, as on the missions box */
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--c-cyan, #00cfcf);
}
.muv-contact__panel::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.muv-contact__panel::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.muv-contact__intro { padding: 2.4rem 2.4rem 2.6rem; border-right: 1px solid rgba(196, 210, 220, 0.1); }
.muv-contact__intro h2 {
  margin: 0 0 0.7rem; font-size: 1.45rem; font-weight: 500; line-height: 1.3;
  letter-spacing: -0.005em; text-transform: none; color: #fff;
}
.muv-contact__intro p:not(.muv-kicker) { margin: 0 0 1.8rem; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
.muv-contact__cta, .muv-contact__cta:hover {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.4rem; border: 1px solid var(--c-cyan, #00cfcf) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-cyan, #00cfcf) !important; text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.muv-contact__cta::after { content: "\2192"; }
.muv-contact__cta:hover { background: var(--c-cyan, #00cfcf); color: #0a0d10 !important; }
.muv-contact__channels { margin: 0; padding: 1.4rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.muv-contact__channels > div { padding: 1.1rem 0; border-top: 1px solid rgba(196, 210, 220, 0.1); }
.muv-contact__channels > div:first-child { border-top: 0; }
.muv-contact__channels dt {
  margin: 0 0 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(196, 210, 220, 0.6);
}
.muv-contact__channels dd { margin: 0; font-size: 1.05rem; }
.muv-contact__channels a { color: #fff !important; border-bottom: 1px solid rgba(0, 207, 207, 0.4) !important; text-decoration: none; }
.muv-contact__channels a:hover { color: var(--c-cyan, #00cfcf) !important; border-bottom-color: var(--c-cyan, #00cfcf) !important; }
@media screen and (max-width: 736px) {
  .muv-contact .inner { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .muv-contact__panel { grid-template-columns: 1fr; }
  .muv-contact__intro { padding: 1.8rem 1.4rem 2rem; border-right: 0; border-bottom: 1px solid rgba(196, 210, 220, 0.1); }
  .muv-contact__intro h2 { font-size: 1.2rem; }
  .muv-contact__intro p:not(.muv-kicker) { font-size: 0.92rem; }
  .muv-contact__channels { padding: 0.6rem 1.4rem; }
}