/* ============================================================================
   Rantizo missions: /missions/ and the mission pages. Built on pages.css
   (.phead, .sect, .stat, .facts, .choice, .seg); page pieces only:
     .hub / .range   the hub: the four sectors as one slab cut on the deck's
                     12.5deg slash. The panel under the pointer or focus opens
                     to the golden share; the others close to a spine with the
                     name run up the cut. Rows with slashed images on phones.
     .ways           ways to work with Rantizo, one ruled row each
     .mhead          per-page framing of the slashed head image
     .mrule          a ruled band for sections that are not .sect__grid
     .plot           agriculture: the illustrative field, targeted vs full
     .svc            agriculture: services, set large
     .steps          how it works: five waypoints on one route
     .proof / .specs big figures in a row
     .grounds        wildfire: one horizon, three fire grounds, morphing
     .hold           infrastructure: GPS and RTK hover accuracy, drawn live
     .caps           numbered capability rows
     .dplate         defense (page on hold): the Harvest 100 data plate
     .caution        defense (page on hold): capabilities, not contracts
     .decade         defense (page on hold): the forecast decade on a ruler
     .mcta           a mission page's close: contact, topic chosen
     .mnext          the other sectors
   ========================================================================== */

/* ================================================================== RULE ==
   The hairline every section opens on, spanning the content, not the gutters
   (same logic as .sect__grid in pages.css). */
.mrule { position: relative; padding-top: 1.25rem; }
.mrule::before {
  content: ""; position: absolute; top: 0; height: 1px;
  left: var(--sc-gutter); right: var(--sc-gutter);
  background: var(--sc-hairline-strong);
}
.mrule:not(.wrap)::before { left: 0; right: 0; }

/* ============================================================ HEAD IMAGE ==
   The portraits keep the aircraft in their upper third: frame on it. */
.mhead img { object-position: 50% 22%; }
.mhead--fire img { object-position: 50% 18%; }
.mhead--grid img { object-position: 38% 24%; }
.mhead--defense img { object-position: 50% 30%; }
.mhead__note {
  position: absolute; z-index: 1; right: var(--sc-gutter); bottom: 1.25rem;
  color: var(--ink-mid);
}
@media (max-width: 860px) {
  .mhead img { object-position: 50% 26%; }
  /* The band's foot is cut from 100% at the left to 78% at the right: the
     note sits just above the cut on the right, clear of the aircraft. */
  .mhead__note { bottom: calc(22% + 0.875rem); }
}

/* =================================================================== HUB ==
   The head and the range share one screen: the range takes what is left. */
.hub { display: flex; flex-direction: column; min-height: min(100svh, 68rem); }
.hub > .phead { flex: none; }
.hubhead {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 6vw, 7rem); align-items: end;
}
.hubhead .phead__lede { margin: 0; padding-bottom: 0.35rem; }
@media (max-width: 860px) {
  .hubhead { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- range --
   One slab, four cuts. Each cut runs 12.5deg off vertical: its offset is the
   range's height times tan(12.5deg), so the range is a size container and
   the panels read 100cqh. Neighbours overlap by the cut, less a hairline gap,
   so every seam is the same diagonal. */
/* The wrapper takes the flex share; the range fills it absolutely, so its
   height is definite when the panels resolve 100cqh. */
.hub__range { position: relative; flex: 1 0 auto; min-height: 26rem; }
.range {
  --gap: 0.625rem;
  position: absolute; inset: 0;
  container-type: size;
  display: flex; overflow: hidden;
}
.range__panel {
  --cut: calc(100cqh * var(--slash));
  position: relative; display: block; flex: 1 1 0; min-width: 0;
  margin-left: calc(var(--cut) * -1 + var(--gap));
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  background: var(--sc-surface);
  color: var(--sc-ink); text-decoration: none; outline: none;
}
.range__panel:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.range__panel:last-child { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); }
.range__panel.is-open { flex-grow: 2.618; }
/* A link to a panel (/missions/#government) opens it in place: the hub fits
   one screen, so the oversized margin keeps the page at the top. Phones get
   rows and scroll to the row. */
.range__panel { scroll-margin-top: 100vh; }

.range__media { position: absolute; inset: 0; display: block; }
.range__media img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 12%;
  filter: brightness(0.62) saturate(0.8);
  transform: scale(1.06);
}
.range__panel.is-open .range__media img { filter: none; transform: none; }
.range__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 46% at 18% 100%, rgb(11 11 12 / 0.55), transparent 80%),
    linear-gradient(to top, rgb(11 11 12 / 0.92), rgb(11 11 12 / 0.62) 32%, rgb(11 11 12 / 0.2) 54%, transparent 68%);
}
/* clip-path swallows an outline, so focus is drawn inside the shape. */
.range__panel:focus-visible::after {
  background:
    linear-gradient(var(--sc-accent), var(--sc-accent)) 0 0 / 100% 4px no-repeat,
    radial-gradient(70% 46% at 18% 100%, rgb(11 11 12 / 0.55), transparent 80%),
    linear-gradient(to top, rgb(11 11 12 / 0.92), rgb(11 11 12 / 0.62) 32%, rgb(11 11 12 / 0.2) 54%, transparent 68%);
}

/* The spine: the name run up the cut, parallel to it, reading upward.
   rotate(-77.5deg) is the slash itself (90 - 12.5). Its cap height faces the
   cut, so the origin sits one line in from the panel's lower left corner. */
.range__spine {
  position: absolute; z-index: 1; left: 3.4rem; bottom: 1.6rem;
  display: flex; align-items: baseline; gap: 0.9rem;
  transform-origin: 0 100%; transform: rotate(-77.5deg);
  white-space: nowrap; pointer-events: none;
  font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(1.5rem, 2.1vw, 2.125rem); line-height: 1; text-transform: uppercase;
}
.range__spine .t-label { color: var(--sc-accent); font-size: 0.75rem; }
.range__panel:first-child .range__spine { left: calc(var(--sc-gutter) + 2rem); }
.range__panel.is-open .range__spine { opacity: 0; }

/* The label: fixed width so it never reflows while the panel resizes; it
   arrives once the panel has opened and leaves at once when it closes. */
.range__label {
  position: absolute; z-index: 1;
  /* Clear the cut at the label's top: the slash's offset 17rem up, plus air. */
  left: calc(17rem * var(--slash) + 1.25rem); bottom: clamp(1.25rem, 3.4cqh, 2.25rem);
  width: min(25rem, 52cqw);
  display: grid; gap: 0.55rem; justify-items: start;
  opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
}
.range__panel:first-child .range__label { left: var(--sc-gutter); }
.range__panel.is-open .range__label { opacity: 1; visibility: visible; transform: none; }
/* Motion arrives with the first hover or focus (missions.js adds .is-live),
   so the range never animates on its own, at load or across a resize. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .range.is-live .range__panel { transition: flex-grow 720ms var(--sc-ease-out); }
  .range.is-live .range__media img { transition: filter 520ms var(--sc-ease-out), transform 1100ms var(--sc-ease-out); }
  .range.is-live .range__spine { transition: opacity 260ms var(--sc-ease-out); }
  .range.is-live .range__panel.is-open .range__spine { transition-duration: 160ms; }
  .range.is-live .range__label { transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out), visibility 0s linear 160ms; }
  .range.is-live .range__panel.is-open .range__label { transition: opacity 420ms var(--sc-ease-out) 300ms, transform 620ms var(--sc-ease-out) 300ms, visibility 0s linear 300ms; }
}
.range__name {
  font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 0.92; text-transform: uppercase;
}
.range__text { font-size: 1.0625rem; line-height: 1.45; color: var(--sc-ink); max-width: 30ch; text-wrap: pretty; }
.range__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  font-size: 0.9375rem; color: var(--ink-mid);
}
.range__meta .t-label { color: var(--sc-ink-soft); }
.range__go { margin-top: 0.6rem; }
@media (hover: hover) and (pointer: fine) {
  .range__panel.is-open:hover .range__go svg { transform: translateX(3px); }
}

/* Phone and portrait tablet: one row per mission, its image cut on the slash
   along its right edge, the words beside it. Every mission in one view. */
@media (max-width: 860px) {
  .hub { display: block; min-height: 0; }
  .hub__range { min-height: 0; }
  .range {
    position: static; container-type: normal; display: grid; overflow: visible;
    padding-right: var(--sc-gutter);
    border-top: 1px solid var(--sc-hairline);
  }
  .range__panel {
    --row: clamp(8.75rem, 36vw, 11rem);
    --cut: calc(var(--row) * var(--slash));
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center;
    gap: 1.25rem; min-height: var(--row); margin: 0;
    clip-path: none !important; background: none;
    border-bottom: 1px solid var(--sc-hairline);
  }
  .range__panel::after { display: none; }
  .range__panel { scroll-margin-top: var(--nav-h); }
  .range__panel:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; }
  .range__media {
    position: relative; inset: auto; align-self: stretch;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  }
  .range__media img { position: absolute; inset: 0; filter: none; transform: none; object-position: 50% 26%; }
  .range__spine { display: none; }
  .range__label, .range__panel:first-child .range__label {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    gap: 0.35rem; padding-block: 1rem;
  }
  .range__name { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .range__text { font-size: 0.9375rem; }
  .range__meta { font-size: 0.875rem; }
  .range__go { display: none; }
}

/* ================================================================== WAYS == */
.ways { list-style: none; margin: 0; padding: 0; }
.ways li:first-child .ways__row { padding-top: 0.15rem; }
.ways__row {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 1rem; align-items: center; gap: 0.25rem 1rem;
  padding: 1.375rem 0; border-bottom: 1px solid var(--sc-hairline);
  color: var(--sc-ink); text-decoration: none;
}
.ways__num { grid-row: 1 / span 2; align-self: start; font: 500 0.75rem/2.2 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent); }
.ways__name {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
  transition: color 160ms var(--sc-ease-out);
}
.ways__text { grid-column: 2; margin: 0; color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; text-wrap: pretty; }
.ways__row svg {
  grid-column: 3; grid-row: 1 / span 2;
  width: 1rem; height: 1rem; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: square;
  transition: transform 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ways__row:hover .ways__name { color: var(--sc-accent); }
  .ways__row:hover svg { transform: translateX(3px); }
}
@media (max-width: 560px) {
  .ways__row { grid-template-columns: minmax(0, 1fr) 1rem; }
  .ways__num { grid-row: auto; line-height: 1.5; }
  .ways__name, .ways__text { grid-column: 1; }
  .ways__row svg { grid-column: 2; grid-row: 1 / span 3; }
}

/* ================================================================== PLOT ==
   One aerial, a grid of cells, two treatments. missions.js draws the cells,
   the problem patches, the route and the marker into the SVG. */
.plot__head {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 1.25rem clamp(2rem, 5vw, 5.5rem); align-items: end;
}
.plot__head .sect__intro { margin: 0; }
@media (max-width: 860px) { .plot__head { grid-template-columns: 1fr; } }
.plot {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5.5rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.plot__fig { margin: 0; }
.plot__frame {
  position: relative; aspect-ratio: 1510 / 933; overflow: hidden;
  background: #1a1712; border-radius: var(--r);
}
.plot__frame img, .plot__frame svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.plot__frame img { filter: saturate(0.9) brightness(0.92); }
.plot__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px 6px rgb(11 11 12 / 0.5);
}
.plot__cap { margin-top: 0.875rem; max-width: 60ch; }

.plot svg .grid { fill: none; stroke: rgb(242 239 234 / 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot svg .patch { fill: rgb(242 239 234 / 0.13); }
.plot svg .edge { fill: none; stroke: rgb(242 239 234 / 0.82); stroke-width: 1.25; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.plot svg .hit { fill: url(#plot-swath); opacity: 0; transition: opacity 260ms var(--sc-ease-out); }
.plot svg .hit.is-on { opacity: 1; }
.plot svg .track { fill: none; stroke: #FFB27A; stroke-opacity: 0.7; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plot svg .ferry { fill: none; stroke: rgb(242 239 234 / 0.7); stroke-width: 1.25; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.plot svg .base { fill: var(--sc-canvas); stroke: var(--sc-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plot svg .m-body { fill: var(--sc-accent); stroke: var(--sc-canvas); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plot svg .m-ring { fill: none; stroke: var(--sc-accent); stroke-opacity: 0.55; stroke-width: 1.25; vector-effect: non-scaling-stroke; }

.plot__ctl { display: grid; gap: 1.5rem; align-content: start; }
.plot__modes { border: 0; margin: 0; padding: 0; min-width: 0; }
.plot__modes legend { padding: 0; margin-bottom: 0.875rem; }
.plot__modes .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plot__modes .choice__face { min-height: 5.25rem; }
.plot__say { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--sc-ink); text-wrap: pretty; min-height: 4.8em; }
.plot__read { margin: 0; }
.plot__read dd { font-variant-numeric: tabular-nums; }
.plot__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.plot__key li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.875rem; color: var(--ink-mid); }
.plot__key i { display: block; width: 0.875rem; height: 0.875rem; border-radius: 1px; }
.plot__key .k-hit { background: repeating-linear-gradient(to bottom, rgb(255 102 0 / 0.75) 0 3px, transparent 3px 4px); }
.plot__key .k-patch { background: rgb(242 239 234 / 0.13); outline: 1.25px dashed rgb(242 239 234 / 0.82); outline-offset: -1px; }
.plot__claim {
  margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--sc-hairline);
  font-size: 1.0625rem; line-height: 1.55; color: var(--ink-mid); text-wrap: pretty;
}
.plot__claim strong { color: var(--sc-accent); font-weight: 600; }
/* One column: choose the treatment above the field, read the result below
   it, so the field stays in view while you switch. The controls join the
   plot's own grid. */
@media (max-width: 1080px) {
  .plot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
  .plot__ctl { display: contents; }
  .plot__modes { grid-column: 1 / -1; order: -1; }
  .plot__fig, .plot__say, .plot__claim { grid-column: 1 / -1; }
  .plot__say { min-height: 3.1em; }
  .plot__read { grid-column: 1; }
  .plot__key { grid-column: 2; align-self: start; padding-top: 0.2rem; }
}
@media (max-width: 560px) {
  .plot { grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; gap: 1.25rem; }
  .plot__fig { margin-inline: calc(var(--sc-gutter) * -1); }
  .plot__frame { border-radius: 0; }
  .plot__cap { padding-inline: var(--sc-gutter); }
  .plot__read, .plot__key { grid-column: 1; }
  .plot__say { min-height: 4.65em; }
  .plot__modes .choice__face { padding: 0.875rem 2.25rem 0.875rem 0.875rem; min-height: 0; }
  .plot__modes .choice__name { font-size: 0.9375rem; }
}

/* =================================================================== SVC ==
   Services set large, in two ruled columns, like the company values. */
.svc { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.svc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.svc__group h3 { margin: 0 0 0.25rem; }
.svc__list { list-style: none; margin: 0; padding: 0; }
.svc__list li {
  padding: 0.9rem 0 0.8rem; border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 800;
  font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 0.95; text-transform: uppercase;
}
.svc .facts { margin: 0; }
@media (max-width: 560px) {
  .svc__cols { grid-template-columns: 1fr; }
}

/* ================================================================= STEPS ==
   Five waypoints on one route. The orange line is flown across once the
   steps scroll in, lighting each waypoint as it passes. */
.steps {
  --dot: 11px;
  grid-column: 1 / -1;
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2.4vw, 2.5rem);
  counter-reset: step;
}
.steps::before, .steps::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--dot) / 2 - 0.5px); height: 1px;
}
.steps::before { background: var(--sc-hairline-strong); }
.steps::after {
  height: 2px; margin-top: -0.5px; background: var(--sc-accent);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 1600ms var(--sc-ease-in-out) 150ms;
}
.steps.sc-in::after, .steps:not([data-sc-in])::after { transform: none; }
.steps li { position: relative; counter-increment: step; padding-top: calc(var(--dot) + 1.5rem); }
.steps li::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: 0;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--sc-canvas); box-shadow: inset 0 0 0 1.5px var(--sc-hairline-strong);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
  transition-delay: calc(150ms + var(--i, 0) * 330ms);
}
.steps.sc-in li::before, .steps:not([data-sc-in]) li::before { background: var(--sc-accent); box-shadow: 0 0 0 4px rgb(255 102 0 / 0.16); }
.steps__name {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: 1.25rem; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase;
}
.steps__name::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 0.75rem;
  font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent);
}
.steps p { margin: 0.6rem 0 0; color: var(--sc-ink-soft); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before, .steps::after { top: 0.2rem; bottom: 2.5rem; left: calc(var(--dot) / 2 - 0.5px); right: auto; width: 1px; height: auto; }
  .steps::after { width: 2px; margin: 0 0 0 -0.5px; transform-origin: 50% 0; transform: scaleY(0); }
  .steps.sc-in::after { transform: none; }
  .steps li { padding: 0 0 1.75rem calc(var(--dot) + 1.25rem); }
  .steps li:last-child { padding-bottom: 0; }
  .steps li::before { top: 0.2rem; }
  .steps__name::before { display: inline; margin: 0 0.75rem 0 0; }
}

/* ============================================================ FIGURES ====
   .proof: a short row of big figures. .specs: a spec sheet of them. */
.proof { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.proof__row, .specs {
  margin: 0; container-type: inline-size;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem;
}
.proof__row > div, .specs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.875rem; }
.proof__row dd, .specs dd { margin: 0; }
.proof__row dd { font-size: clamp(2.5rem, 9cqi, 5rem); }
.proof__row dt, .specs dt { max-width: 24ch; line-height: 1.5; }
.proof .facts { margin: 0; }
.specs { row-gap: 2.25rem; }
.specs > div { padding-top: 1rem; border-top: 1px solid var(--sc-hairline); }
.specs dd { font-size: clamp(2rem, 7cqi, 3.75rem); white-space: nowrap; }
.aircraft { display: grid; gap: clamp(2.25rem, 4.5vw, 3.25rem); }
.aircraft__lead { display: flex; flex-direction: column-reverse; gap: 0.875rem; margin: 0; }
.aircraft__lead dd { margin: 0; font-size: clamp(4.25rem, 10vw, 10rem); }
.aircraft .facts { margin: 0; }
@media (max-width: 560px) {
  .proof__row { grid-template-columns: 1fr; gap: 1.75rem; }
  .proof__row dd { font-size: clamp(3rem, 16cqi, 4.25rem); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .specs dd { font-size: clamp(1.75rem, 11cqi, 2.75rem); }
}

/* =============================================================== GROUNDS ==
   One horizon line, three fire grounds. missions.js samples a forest ridge,
   an industrial site and a skyline as height fields at the same x positions,
   so one path can morph between them; the fire, the aircraft marker and its
   water follow. Pick a ground, or let it cycle while it is on screen. */
.grounds { grid-column: 1 / -1; display: grid; gap: 1.5rem; margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.grounds__fig {
  margin: 0; position: relative; aspect-ratio: 2.618; overflow: hidden;
  border-radius: var(--r);
  background:
    radial-gradient(60% 70% at 62% 100%, rgb(255 102 0 / 0.1), transparent 70%),
    linear-gradient(to bottom, #0B0B0C, #131315 60%, #1C1B1F);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
}
.grounds__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grounds svg .far { fill: #19191C; stroke: rgb(242 239 234 / 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grounds svg .near { fill: url(#g-near); stroke: rgb(242 239 234 / 0.5); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.grounds svg .glow { fill: url(#g-glow); mix-blend-mode: screen; }
.grounds svg .smoke { fill: url(#g-smoke); }
.grounds svg .fire { fill: var(--sc-accent); }
.grounds svg .ferry { fill: none; stroke: rgb(242 239 234 / 0.55); stroke-width: 1.25; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.grounds svg .base { fill: var(--sc-canvas); stroke: var(--sc-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.grounds svg .water { fill: none; stroke: #CFE8FF; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.grounds svg .m-body { fill: var(--sc-accent); stroke: var(--sc-canvas); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.grounds svg .m-ring { fill: none; stroke: var(--sc-accent); stroke-opacity: 0.55; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .grounds svg .glow { animation: g-flicker 2.4s var(--sc-ease-in-out) infinite alternate; }
  .grounds svg .m-ring { animation: g-ping 2.2s var(--sc-ease-out) infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes g-flicker { 0% { opacity: 0.72; } 45% { opacity: 1; } 75% { opacity: 0.84; } 100% { opacity: 0.96; } }
@keyframes g-ping { 0% { opacity: 0.8; transform: scale(0.7); } 100% { opacity: 0; transform: scale(2); } }
.grounds__name {
  position: absolute; left: clamp(1rem, 2.4vw, 2rem); top: clamp(0.875rem, 2vw, 1.5rem);
  color: var(--ink-mid);
}
.grounds__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.25rem clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.grounds__pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.grounds__read { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0; }
.grounds__num { font-size: clamp(2.5rem, 4.6vw, 4.25rem); white-space: nowrap; }
.grounds__say { margin: 0; max-width: 40ch; color: var(--ink-mid); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.grounds__cap { margin: 0; }
@media (max-width: 1080px) {
  .grounds__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grounds__pick { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* Taller, so the slice crops in closer and the tree line keeps its rhythm. */
  .grounds__fig { aspect-ratio: 1.3; margin-inline: calc(var(--sc-gutter) * -1); border-radius: 0; box-shadow: none; border-block: 1px solid var(--sc-hairline); }
  .grounds__bar { grid-template-columns: 1fr; gap: 1rem; }
}

/* ================================================================== HOLD ==
   A hover target drawn at scale: the 1 m ring and the trace of a holding
   aircraft. The rings are SVG; missions.js draws the trace on the canvas. */
.hold { display: grid; gap: 1.25rem; justify-items: start; }
.hold__bar { width: min(100%, 34rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.hold__fig { margin: 0; width: min(100%, 34rem); }
.hold__plate {
  position: relative; aspect-ratio: 1; border-radius: var(--r);
  background:
    radial-gradient(closest-side, rgb(242 239 234 / 0.035), transparent),
    var(--sc-surface);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
}
.hold__plate svg, .hold__plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hold svg .ring { fill: none; stroke: rgb(242 239 234 / 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hold svg .ring--m { stroke: rgb(242 239 234 / 0.55); stroke-dasharray: 4 5; }
.hold svg .cross { stroke: rgb(242 239 234 / 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hold svg text { font: 500 13px/1 var(--sc-font-mono); letter-spacing: 0.08em; fill: var(--sc-ink-soft); }
.hold svg .lbl-m { fill: var(--sc-ink); }
.hold svg .cm { fill: none; stroke: var(--sc-accent); stroke-width: 1.25; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.hold svg .cm-lbl { fill: var(--sc-accent); opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.hold.is-rtk svg .cm, .hold.is-rtk svg .cm-lbl { opacity: 1; transition-delay: 500ms; }
.hold__mode {
  display: flex; align-items: baseline; gap: 0.6rem; margin: 0;
  font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.01em;
}
/* Set like the big figures, not uppercased: m is a meter, M is not. */
.hold__mode b { color: var(--sc-accent); font-weight: inherit; }
.hold__seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.hold__cap { max-width: 52ch; }

/* ================================================================== CAPS ==
   Numbered capability rows (infrastructure services, forestry). */
.caps { list-style: none; margin: 0; padding: 0; counter-reset: cap; }
.caps li {
  counter-increment: cap;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.caps li:first-child { padding-top: 0.15rem; }
.caps li::before { content: counter(cap, decimal-leading-zero); grid-row: 1 / span 2; font: 500 0.75rem/2.2 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent); }
.caps h3 {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
}
.caps p { margin: 0.55rem 0 0; max-width: 54ch; color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 560px) {
  .caps li { grid-template-columns: 1fr; padding: 1.375rem 0; }
  .caps li::before { grid-row: auto; line-height: 1.5; margin-bottom: 0.5rem; }
}

/* ================================================================ DPLATE ==
   The aircraft's data plate: black anodized aluminium, laser-etched, four
   rivets, its leading edge cut on the deck's slash with an orange anodized
   stripe. The light is the pointer: the plate tilts toward it and a brushed
   streak slides across the grain. All CSS; missions.js only moves --rx, --ry
   and --lx. Sizes are in container units of the plate's width, with floors
   so the etching stays legible on a phone. */
.dplate { margin: 0; width: min(100%, 44rem); perspective: 1400px; container-type: inline-size; }
.dplate__tilt {
  --rx: 3deg; --ry: -6deg; --lx: 30%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  filter: drop-shadow(0 18px 28px rgb(0 0 0 / 0.55)) drop-shadow(0 2px 3px rgb(0 0 0 / 0.6));
  will-change: transform;
}
.dplate__body {
  --ar: 1.618;
  --cut: calc(100cqi / var(--ar) * var(--slash));
  --pad: max(1.25rem, 6cqi);
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: var(--ar);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
  padding: var(--pad) var(--pad) calc(var(--pad) * 0.85) calc(var(--cut) + max(1rem, 3.5cqi));
  display: grid; grid-template-rows: auto 1fr auto; gap: max(0.875rem, 3cqi);
  color: #D9D4CC;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 7px),
    linear-gradient(178deg, #242427, #151517 55%, #0f0f11);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -1px 0 rgb(0 0 0 / 0.7);
}
/* The orange anodized stripe along the cut. */
.dplate__body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #FF7A26, #E85A00);
  clip-path: polygon(var(--cut) 0, calc(var(--cut) + max(10px, 2.2cqi)) 0, max(10px, 2.2cqi) 100%, 0 100%);
}
/* The brushed streak: anisotropic, so it runs across the grain, and it
   follows the light. */
.dplate__body::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, transparent calc(var(--lx) - 22%), rgb(255 255 255 / 0.07) calc(var(--lx) - 6%), rgb(255 255 255 / 0.12) var(--lx), rgb(255 255 255 / 0.055) calc(var(--lx) + 8%), transparent calc(var(--lx) + 24%)),
    radial-gradient(70% 90% at var(--lx) 0%, rgb(255 255 255 / 0.06), transparent 70%);
  mix-blend-mode: screen;
}
.dplate__rivet {
  --rv: max(9px, 2cqi);
  position: absolute; z-index: 1; width: var(--rv); height: var(--rv); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F5F2EC 0, #9C978F 28%, #3B3A38 62%, #1A1A1B 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(0 0 0 / 0.25);
}
.dplate__rivet:nth-of-type(1) { top: max(0.75rem, 3cqi); left: calc(var(--cut) + max(1.125rem, 3cqi)); }
.dplate__rivet:nth-of-type(2) { top: max(0.75rem, 3cqi); right: max(0.75rem, 3cqi); }
.dplate__rivet:nth-of-type(3) { bottom: max(0.75rem, 3cqi); left: max(1.375rem, 3.6cqi); }
.dplate__rivet:nth-of-type(4) { bottom: max(0.75rem, 3cqi); right: max(0.75rem, 3cqi); }

/* Laser-etched: the anodizing is cut away to bright metal, so the type sits
   a hair below the surface: dark lip above, light lip below. */
.dplate__body :is(p, dt, dd, li, span) { text-shadow: 0 -1px 0 rgb(0 0 0 / 0.75), 0 1px 0 rgb(255 255 255 / 0.07); }
.dplate__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; }
.dplate__mark {
  font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 900;
  font-size: max(1.375rem, 5.4cqi); line-height: 1; letter-spacing: 0.01em; color: var(--sc-accent);
}
.dplate__mark sup { font-size: 0.34em; vertical-align: 1.4em; margin-left: 0.1em; font-weight: 500; }
.dplate__kind { font: 500 max(0.625rem, 1.6cqi)/1.35 var(--sc-font-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: right; color: #A9A39A; }
.dplate__grid {
  margin: 0; align-self: center;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(0.75rem, 2.2cqi) max(1rem, 4cqi);
}
.dplate__grid > div { border-top: 1px solid rgb(217 212 204 / 0.26); padding-top: max(0.4rem, 1.1cqi); }
.dplate__grid dt { font: 500 max(0.625rem, 1.45cqi)/1.2 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9A958D; }
.dplate__grid dd {
  margin: max(0.25rem, 0.7cqi) 0 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: max(1rem, 3.4cqi); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase;
}
.dplate__grid .dplate__wide { grid-column: 1 / -1; }
.dplate__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: max(0.5rem, 1.1cqi) max(1rem, 3cqi); align-items: center; }
.dplate__checks li {
  display: inline-flex; align-items: center; gap: max(0.4rem, 1cqi);
  font: 500 max(0.625rem, 1.55cqi)/1 var(--sc-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.dplate__checks li::before {
  content: ""; width: max(9px, 2cqi); height: max(9px, 2cqi); flex: none;
  box-shadow: inset 0 0 0 1px rgb(217 212 204 / 0.55);
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) center / 50% 50% no-repeat;
}
.dplate__cap { margin-top: 1.5rem; max-width: 56ch; }
/* A narrow plate stands taller, so the etching keeps its size. */
@container (max-width: 33rem) {
  .dplate__body { --ar: 1.08; }
  .dplate__kind br { display: none; }
  .dplate__top { flex-direction: column; gap: 0.4rem; }
  .dplate__kind { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .dplate__tilt { will-change: auto; }
}

/* ================================================================ MARKET == */
.dmarket__num { margin-top: 1.5rem; font-size: clamp(4.25rem, 10vw, 10rem); }
.dmarket__cap { margin: 1.125rem 0 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.dmarket__cap sup, .dmarket__source span { font: 500 0.6875rem/1 var(--sc-font-mono); color: var(--sc-accent); }
.dmarket__cap sup a { color: inherit; text-decoration: none; padding: 0 0.15em; }
.dmarket__facts { margin: 0; }
.dmarket__source { margin-top: 1.5rem; max-width: 60ch; }

/* =============================================================== CAUTION ==
   Capabilities, not contracts. A note that reads as part of the page, not
   fine print: the deck's slash as its mark, set on the plate hatch. */
.caution {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: 1.25rem clamp(2rem, 6vw, 7rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 2.75rem) clamp(2.75rem, 5vw, 4.5rem);
  background:
    repeating-linear-gradient(102.5deg, transparent 0 21px, rgb(242 239 234 / 0.035) 21px 22px),
    var(--sc-surface);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
}
.caution::before {
  content: ""; position: absolute; left: clamp(1.25rem, 2.4vw, 2rem); top: clamp(1.75rem, 3.5vw, 2.75rem);
  width: 4px; height: 3.25rem; background: var(--sc-accent);
  transform: skewX(-12.5deg); transform-origin: 0 100%;
}
.caution__title {
  margin: 0.75rem 0 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase;
  text-wrap: balance;
}
.caution__text { margin: 0; max-width: 60ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-mid); text-wrap: pretty; }
.caution__text + .caution__text { margin-top: 1rem; }
.caution a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.2em; }
@media (max-width: 860px) {
  .caution { grid-template-columns: 1fr; }
}

/* ================================================================ DECADE ==
   The forecast window, 2024 to 2033, as ten year cells on a ruler, with the
   two dates that matter to this page pinned to it, one above, one below. */
.decade { margin: 0 0 2.25rem; }
.decade__event {
  position: relative; z-index: 1;
  margin: 0 0 0 var(--at); max-width: 16rem;
  padding: 0 0 1.25rem 0.75rem; margin-bottom: -0.875rem;
  border-left: 1px solid var(--sc-accent);
  font-size: 0.8125rem; line-height: 1.35; color: var(--ink-mid); text-wrap: pretty;
}
.decade__event--below { margin-bottom: 0; padding: 1.875rem 0 0 0.75rem; }
.decade__event time { display: block; font: 500 0.6875rem/1.4 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.decade__rule { position: relative; }
.decade__rule::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sc-accent); opacity: 0.85; }
.decade__years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.decade__years li { height: 0.875rem; border-left: 1px solid var(--sc-hairline-strong); position: relative; }
.decade__years li:last-child { border-right: 1px solid var(--sc-hairline-strong); }
.decade__years li:first-child::after, .decade__years li:last-child::after {
  position: absolute; top: calc(100% + 0.5rem);
  font: 500 0.6875rem/1 var(--sc-font-mono); letter-spacing: 0.08em; color: var(--sc-ink-soft);
}
.decade__years li:first-child::after { content: "2024"; left: 0; }
.decade__years li:last-child::after { content: "2033"; right: 0; }

/* ================================================================== MCTA ==
   A mission page closes on contact, with the sales topic chosen. */
.mcta__grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 7rem); align-items: end; }
.mcta__title { font-size: clamp(3rem, 7.4vw, 8rem); line-height: 0.86; margin-top: 1.25rem; }
.mcta__title > span { display: block; }
.mcta__text { margin: 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.55; }
.mcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
@media (max-width: 860px) {
  .mcta__grid { grid-template-columns: 1fr; }
}

/* ================================================================= MNEXT ==
   The other missions: the fleet's slashed images in miniature. */
.mnext { padding-top: clamp(4.5rem, 9vw, 8rem); }
.mnext__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.mnext__head .link-arrow { padding-block: 0.2rem; }
.mnext__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mnext__item { display: grid; gap: 0.875rem; color: var(--sc-ink); text-decoration: none; }
.mnext__media {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  --cut: calc(56.25% * var(--slash));
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  background: var(--sc-surface);
}
.mnext__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 14%; transition: scale 600ms var(--sc-ease-out); }
.mnext__name {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: 1.125rem; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase;
  transition: color 160ms var(--sc-ease-out);
}
.mnext__name svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: square; transition: transform 160ms var(--sc-ease-out); }
.mnext__item:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .mnext__item:hover .mnext__name { color: var(--sc-accent); }
  .mnext__item:hover svg { transform: translateX(3px); }
  .mnext__item:hover img { scale: 1.04; }
}
@media (max-width: 860px) {
  .mnext__list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--sc-hairline); }
  .mnext__item { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--sc-hairline); }
  .mnext__media { aspect-ratio: 16 / 10; --cut: calc(62.5% * var(--slash)); }
  .mnext__name { border: 0; padding: 0; }
}

/* ======================================================== REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  .steps::after, .steps li::before { transition: none; }
}