/* ============================================================================
   Rantizo platform pages: /platform/, /platform/harvest-100/,
   /platform/titan/ and /platform/services/.
   Built on pages.css (.wrap, .phead, .sect, .stat, .facts, .linklist) and
   site.css. Page pieces only:
     .duo        the hub head: two airframes on one 12.5deg split. The
                 Harvest 100 is photographed, the Titan is drawn
     .pair       the two airframes side by side, row for row
     .swap       one airframe, four missions, on a shared datum line
     .paths      a numbered list of destinations (hub, services)
     .xray       the Harvest 100 exploded view with numbered hotspots
     .bom        its parts list
     .versus     Harvest 100 against the typical import
     .figs       big figures in a ruled grid
     .plist      a ruled list of short proof points
     .sheet      the Titan head, set as an engineering drawing sheet
     .dwg        drawing strokes, shared by the hub and the Titan sheet
     .alt        the Titan altimeter: scroll climbs past 150, 1,000, 4,500 m
     .caps       numbered capabilities
     .specs      the Titan specification sheet
     .order      the services work order: steps, choices and the ticket
     .cycle      own-and-operate stages
     .pclose     the closing call to action on every platform page
   ========================================================================== */

/* ================================================================== DUO ==
   One split cut on the deck's diagonal. The seam holds still; the aircraft
   respond to the reader instead: lean into the Harvest 100 and it lifts off
   its shadow, lean into the Titan and its drawing inks in. */
.duo {
  --duo-h: clamp(38rem, 100svh, 68rem);
  /* The content column's edge, so labels line up with the title on wide
     screens (.wrap caps at 96rem). */
  --edge: max(var(--sc-gutter), calc((100% - 96rem) / 2));
  --cut: calc(var(--duo-h) * var(--slash));
  position: relative; isolation: isolate; overflow: clip;
  height: var(--duo-h);
  display: grid;
}
.duo__panes { grid-area: 1 / 1; position: relative; z-index: 0; }
.duo__pane {
  position: absolute; inset: 0; display: block;
  color: var(--sc-ink); text-decoration: none; outline: none;
}
.duo__pane--a {
  clip-path: polygon(0 0, calc(50% + var(--cut) / 2) 0, calc(50% - var(--cut) / 2) 100%, 0 100%);
  background:
    radial-gradient(56% 44% at 26% 70%, rgb(255 120 40 / 0.16), transparent 72%),
    linear-gradient(to bottom, #0B0B0C 30%, #15110E);
}
.duo__pane--b {
  clip-path: polygon(calc(50% + var(--cut) / 2) 0, 100% 0, 100% 100%, calc(50% - var(--cut) / 2) 100%);
  background:
    linear-gradient(rgb(242 239 234 / 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(242 239 234 / 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    #09090A;
}
/* The deck's slash, once, in orange along the seam. */
.duo__pane--b::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--sc-accent);
  /* It starts under the nav bar, not through its links. */
  --top: calc(var(--nav-h) + 1.5rem);
  clip-path: polygon(calc(50% + var(--cut) / 2 - var(--top) * var(--slash)) var(--top), calc(50% + var(--cut) / 2 - var(--top) * var(--slash) + 2px) var(--top), calc(50% - var(--cut) / 2 + 2px) 100%, calc(50% - var(--cut) / 2) 100%);
}

/* Harvest 100: the photographed cutout, standing on its shadow. */
.duo__craft {
  position: absolute; z-index: 1;
  left: var(--edge); bottom: calc(clamp(1.75rem, 5vh, 3.25rem) + 10.5rem);
  width: min(35vw, calc(var(--duo-h) * 0.6));
  aspect-ratio: 2014 / 920;
}
.duo__craft img {
  position: relative; z-index: 1; width: 100%; height: 100%; max-width: none;
  transition: transform 900ms var(--sc-ease-out);
}
.duo__shadow {
  position: absolute; z-index: 0; left: 24%; right: 6%; bottom: -5%; height: 15%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.28) 55%, transparent);
  filter: blur(5px);
  transition: transform 900ms var(--sc-ease-out), opacity 900ms var(--sc-ease-out);
}
.duo__pane--a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 30% at 26% 66%, rgb(255 138 61 / 0.12), transparent 70%);
  opacity: 0; transition: opacity 900ms var(--sc-ease-out);
}
.duo[data-lean="a"] .duo__craft img { transform: translate3d(0, -7%, 0) scale(1.03); }
.duo[data-lean="a"] .duo__shadow { transform: scale(0.76); opacity: 0.45; }
.duo[data-lean="a"] .duo__pane--a::after { opacity: 1; }

/* Titan: the folded envelope, drawn. */
.duo__dwg {
  position: absolute; z-index: 1;
  left: calc(50% + var(--cut) / 2 + clamp(1.5rem, 3vw, 3.5rem)); right: var(--edge);
  top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3rem)); bottom: clamp(10.5rem, 23vh, 13.5rem);
  display: grid; place-items: center;
}
.duo__dwg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.duo__label {
  position: absolute; z-index: 3;
  bottom: clamp(1.75rem, 5vh, 3.25rem);
  display: grid; justify-items: start; gap: 0.4rem;
  max-width: 21rem;
}
.duo__pane--a .duo__label { left: var(--edge); }
.duo__pane--b .duo__label { left: calc(50% + var(--cut) / 2 + clamp(1.5rem, 3vw, 3.5rem)); }
.duo__name {
  font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(1.75rem, 2.4vw, 2.5rem); line-height: 1; text-transform: uppercase;
  padding-bottom: 0.5rem;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 2rem 2px no-repeat;
  transition: background-size 320ms var(--sc-ease-out);
}
.duo__text { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-mid); max-width: 30ch; }
.duo__go {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
  font-weight: 600; font-size: 0.9375rem;
}
.duo__go svg {
  width: 1rem; height: 1rem; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: square;
  transition: transform 160ms var(--sc-ease-out);
}
.duo[data-lean="a"] .duo__pane--a .duo__name,
.duo[data-lean="b"] .duo__pane--b .duo__name { background-size: 100% 2px; }
.duo[data-lean="a"] .duo__pane--a .duo__go svg,
.duo[data-lean="b"] .duo__pane--b .duo__go svg { transform: translateX(3px); }
/* clip-path swallows an outline, so keyboard focus is drawn inside. */
.duo__pane:focus-visible .duo__name { background-size: 100% 3px; }
.duo__pane:focus-visible .duo__go { text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.3em; }

.duo__copy {
  grid-area: 1 / 1; position: relative; z-index: 2; align-self: start;
  width: 100%;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4.5rem));
  pointer-events: none;
}
.duo__copy a { pointer-events: auto; }
.duo__title { font-size: clamp(3.25rem, 6.8vw, 7.5rem); line-height: 0.86; margin-top: clamp(0.875rem, 2vh, 1.25rem); }
.duo__title > span { display: block; }
.duo__lede {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0; max-width: 34ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; text-wrap: pretty;
}

/* Phone and portrait tablet: the two panes stack, cut apart by the slash
   turned on its side, and everything inside them runs in normal flow. */
@media (max-width: 860px) {
  .duo { height: auto; --mcut: calc(100vw * var(--slash)); }
  .duo__copy { grid-area: auto; order: -1; padding-top: calc(var(--nav-h) + 2.25rem); padding-bottom: 1.5rem; }
  .duo__panes { grid-area: auto; display: grid; }
  .duo__pane { position: relative; inset: auto; display: flex; flex-direction: column; align-items: flex-start; }
  .duo__pane--a {
    padding: 0.5rem var(--sc-gutter) calc(var(--mcut) + 1.5rem);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--mcut)), 0 100%);
  }
  .duo__pane--b {
    margin-top: calc(var(--mcut) * -1);
    padding: calc(var(--mcut) + 1.75rem) var(--sc-gutter) 2.5rem;
    clip-path: polygon(0 var(--mcut), 100% 0, 100% 100%, 0 100%);
  }
  .duo__pane--b::before { clip-path: polygon(0 var(--mcut), 100% 0, 100% 2px, 0 calc(var(--mcut) + 2px)); --top: 0px; }
  .duo__craft { position: relative; left: auto; bottom: auto; width: min(100%, 34rem); margin-left: -3vw; }
  .duo__dwg { position: relative; inset: auto; width: min(100%, 24rem); aspect-ratio: 516 / 660; }
  .duo__pane--a .duo__label, .duo__pane--b .duo__label { position: relative; left: auto; bottom: auto; margin-top: 1.5rem; }
}

/* ============================================================== DRAWING ==
   Strokes for the Titan drawings. Lines are drawn in on arrival (pathLength
   is 1 on every stroke that animates). */
.dwg { overflow: visible; }
.dwg text {
  font-family: var(--sc-font-mono); font-weight: 500; letter-spacing: 0.06em;
  fill: var(--sc-ink-soft); text-transform: uppercase;
}
.dwg .dwg__edge { fill: none; stroke: var(--sc-ink); stroke-width: 2; }
.dwg .dwg__fill { fill: rgb(242 239 234 / 0.025); }
.dwg .dwg__grid { fill: none; stroke: rgb(242 239 234 / 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dwg .dwg__thin { fill: none; stroke: rgb(242 239 234 / 0.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dwg .dwg__axis { fill: none; stroke: rgb(242 239 234 / 0.32); stroke-width: 1; stroke-dasharray: 14 4 2 4; vector-effect: non-scaling-stroke; }
.dwg .dwg__hidden { fill: none; stroke: rgb(242 239 234 / 0.2); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.dwg .dwg__dim { fill: none; stroke: var(--sc-accent); stroke-width: 1.5; }
.dwg .dwg__ext { fill: none; stroke: rgb(255 102 0 / 0.55); stroke-width: 1.25; }
.dwg .dwg__head { fill: var(--sc-accent); }
.dwg .dwg__hatch { fill: none; stroke: rgb(242 239 234 / 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dwg .dwg__num { fill: var(--sc-accent); font-weight: 600; letter-spacing: 0.02em; }
.dwg .dwg__note { fill: var(--sc-ink-soft); }
.dwg .dwg__ink { fill: var(--sc-ink); }

@media (prefers-reduced-motion: no-preference) {
  .dwg.is-drawing [pathLength] { stroke-dasharray: 1; animation: dwg-draw 1.1s var(--sc-ease-in-out) both; }
  .dwg.is-drawing .dwg__d1 { animation-delay: 0.1s; }
  .dwg.is-drawing .dwg__d2 { animation-delay: 0.45s; }
  .dwg.is-drawing .dwg__d3 { animation-delay: 0.8s; }
  .dwg.is-drawing .dwg__d4 { animation-delay: 1.1s; }
  .dwg.is-drawing text, .dwg.is-drawing .dwg__head, .dwg.is-drawing .dwg__fade { animation: dwg-fade 0.6s var(--sc-ease-out) 1.3s both; }
}
.dwg.is-held, .dwg.is-held * { animation-play-state: paused !important; }
@keyframes dwg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dwg-draw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dwg-fade { from { opacity: 0; } to { opacity: 1; } }

/* In the hub split the drawing rests in a quieter ink and lights fully when
   the reader leans into the Titan. */
.duo .dwg .dwg__edge { stroke: rgb(242 239 234 / 0.62); transition: stroke 600ms var(--sc-ease-out); }
.duo .dwg .dwg__dim, .duo .dwg .dwg__ext, .duo .dwg .dwg__head, .duo .dwg .dwg__num { transition: opacity 600ms var(--sc-ease-out); }
.duo .dwg .dwg__dim, .duo .dwg .dwg__head, .duo .dwg .dwg__num { opacity: 0.7; }
.duo[data-lean="b"] .dwg .dwg__edge { stroke: var(--sc-ink); }
.duo[data-lean="b"] .dwg .dwg__dim, .duo[data-lean="b"] .dwg .dwg__head, .duo[data-lean="b"] .dwg .dwg__num { opacity: 1; }
.duo .dwg .dwg__glow { fill: none; stroke: var(--sc-accent); stroke-width: 2.5; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.duo[data-lean="b"] .dwg .dwg__glow { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--sc-ease-in-out), opacity 200ms; }

/* ================================================================= PAIR ==
   Two airframes, row for row: each plate's rows sit on one shared grid, so
   "Payload" meets "Payload" across the gap at every width that has two. */
.sect__top { position: relative; padding-top: 1.25rem; }
.sect__top::before {
  content: ""; position: absolute; top: 0; height: 1px;
  left: var(--sc-gutter); right: var(--sc-gutter);
  background: var(--sc-hairline-strong);
}
.sect__top .sect__title { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 7rem);
}
.pair__plate {
  display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0;
  align-content: start;
}
.pair__head { padding-bottom: 1.5rem; }
.pair__name {
  margin: 0.875rem 0 0;
  font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 800;
  font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 0.86; text-transform: uppercase;
}
.pair__fig { display: flex; align-items: baseline; gap: 0.875rem; flex-wrap: wrap; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--sc-hairline-strong); }
.pair__fig .stat__num { font-size: clamp(2.75rem, 4.6vw, 4.5rem); }
.pair__fig .t-label { max-width: 22ch; line-height: 1.4; }
.pair__plate > dl { display: contents; }
.pair__row {
  display: grid; grid-template-columns: minmax(6.5rem, 0.36fr) 1fr; gap: 1rem;
  padding: 0.95rem 0; border-top: 1px solid var(--sc-hairline);
}
.pair__row dt { font: 500 0.75rem/1.6 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.pair__row dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.pair__go { padding-top: 1.5rem; border-top: 1px solid var(--sc-hairline); align-self: start; }
@media (max-width: 760px) {
  .pair { grid-template-columns: minmax(0, 1fr); row-gap: 3.5rem; }
  .pair__plate { grid-row: auto; grid-template-rows: none; }
}

/* ================================================================= SWAP ==
   Four missions, one airframe. Each photograph is shifted so the aircraft
   hangs at the same height in all four, under one datum line. */
.swap {
  position: relative; margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 0.875rem);
  --datum: 8%;
}
.swap__tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5;
  --cut: calc(125% * var(--slash) * 0.5);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  color: var(--sc-ink); text-decoration: none; outline: none;
  background: var(--sc-surface);
}
.swap__tile img {
  position: absolute; left: -4%; top: 0; width: 108%; height: auto; max-width: none;
  transform: translate3d(0, var(--dy, 0%), 0);
  transition: scale 420ms var(--sc-ease-out);
}
.swap__tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(11 11 12 / 0.92), rgb(11 11 12 / 0.45) 32%, transparent 52%);
}
.swap__label {
  position: absolute; z-index: 1; left: calc(var(--cut) * 0.25 + 0.75rem); right: calc(var(--cut) + 0.5rem); bottom: 1rem;
  display: grid; gap: 0.35rem;
}
.swap__name {
  font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(1.125rem, 1.4vw, 1.5rem); line-height: 1; text-transform: uppercase;
  padding-bottom: 0.4rem;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 1.5rem 2px no-repeat;
  transition: background-size 240ms var(--sc-ease-out);
}
.swap__text { min-height: 2.8em; font-size: 0.8125rem; line-height: 1.4; color: color-mix(in oklab, var(--sc-ink) 80%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .swap__tile:hover img { scale: 1.04; }
  .swap__tile:hover .swap__name { background-size: 100% 2px; }
}
.swap__tile:focus-visible .swap__name { background-size: 100% 3px; }
.swap__tile:focus-visible::after {
  background: linear-gradient(to top, rgb(11 11 12 / 0.92), rgb(11 11 12 / 0.45) 32%, transparent 52%),
              linear-gradient(var(--sc-accent), var(--sc-accent)) 0 0 / 100% 4px no-repeat;
}
/* The datum: one dashed line across all four, in the open sky just above
   the rotors, so neither the line nor its tags cross an airframe. */
.swap__datum {
  position: absolute; z-index: 2; left: 0; right: 0; top: var(--datum);
  height: 0; border-top: 1px dashed rgb(255 102 0 / 0.75);
  pointer-events: none;
}
.swap__datum span {
  position: absolute; top: 0; left: 0; transform: translateY(-50%);
  padding: 0.35rem 0.5rem;
  background: var(--sc-canvas); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgb(255 102 0 / 0.6);
  font: 500 0.6875rem/1 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sc-accent);
}
.swap__datum span + span { left: auto; right: 0; }
@media (max-width: 860px) {
  .swap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.75rem; }
  .swap__datum { display: none; }
}
@media (max-width: 560px) {
  .swap__text { display: none; }
  .swap__name { font-size: 1.0625rem; }
}

/* ================================================================ PATHS ==
   A numbered list of destinations: number, name, line, arrow. */
.paths { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); counter-reset: path; }
.paths li { counter-increment: path; }
.paths a {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1rem; align-items: baseline; gap: 0.25rem 1rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--sc-hairline);
  color: var(--sc-ink); text-decoration: none;
}
.paths a::before {
  content: counter(path, decimal-leading-zero);
  grid-row: 1 / span 2;
  font: 500 0.75rem/1.9 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent);
}
.paths__name {
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
  transition: color 160ms var(--sc-ease-out);
}
.paths__text { grid-column: 2; font-size: 0.9375rem; line-height: 1.5; color: var(--sc-ink-soft); }
.paths svg {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  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) {
  .paths a:hover .paths__name { color: var(--sc-accent); }
  .paths a:hover svg { transform: translateX(3px); }
}
/* In a row: three destinations side by side under a page head. */
.paths--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); border-top: 0; margin-top: clamp(0.5rem, 1.5vw, 1.25rem); }
.paths--row a { border-top: 1px solid var(--sc-hairline-strong); height: 100%; align-content: start; }
@media (max-width: 860px) {
  .paths--row { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--sc-hairline-strong); }
  .paths--row a { border-top: 0; }
}

/* ================================================================ XRAY ===
   The exploded view, full bleed. A numbered hotspot sits on each design
   point; picking one swings a light onto that part and dims the rest. */
@property --sx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --sy { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --sr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sa { syntax: "<number>"; inherits: false; initial-value: 0; }

.xray__stage {
  position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: #050506;
}
/* Feather the frame into the page ground above and below. */
.xray__stage::before, .xray__stage::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 12%; pointer-events: none;
}
.xray__stage::before { top: 0; background: linear-gradient(to bottom, var(--sc-canvas), transparent); }
.xray__stage::after { bottom: 0; background: linear-gradient(to top, var(--sc-canvas), transparent); }
.xray__frame {
  position: relative; margin-inline: auto;
  width: min(100%, calc((100svh - var(--nav-h)) * 16 / 9));
  aspect-ratio: 16 / 9;
}
.xray__frame picture { display: contents; }
.xray__frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.xray__dim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at var(--sx) var(--sy), rgb(255 138 61 / calc(var(--sa) * 0.1)), transparent var(--sr)),
    radial-gradient(circle at var(--sx) var(--sy), rgb(5 5 6 / 0) var(--sr), rgb(5 5 6 / calc(var(--sa) * 0.84)) calc(var(--sr) * 2.6));
  transition: --sx 640ms var(--sc-ease-out), --sy 640ms var(--sc-ease-out), --sr 640ms var(--sc-ease-out), --sa 420ms var(--sc-ease-out);
}
.xray__dim.is-snap { transition: --sa 420ms var(--sc-ease-out); }

.xray__spots { list-style: none; margin: 0; padding: 0; }
.xray__spot {
  position: absolute; z-index: 3; left: var(--x); top: var(--y);
  width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 0.75rem/1 var(--sc-font-mono);
  cursor: pointer;
  box-shadow: 0 0 0 5px rgb(255 102 0 / 0.16), 0 2px 10px rgb(0 0 0 / 0.5);
  transition: transform 240ms var(--sc-ease-out), opacity 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
/* A larger hit area than the disc. */
.xray__spot::before { content: ""; position: absolute; inset: -0.6rem; border-radius: 50%; }
.xray__spot::after {
  content: ""; position: absolute; inset: -0.55rem; border-radius: 50%;
  border: 1px solid var(--sc-accent); opacity: 0; transform: scale(0.6);
}
.xray__spot:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; border-radius: 50%; }
/* While a part is lit, the other markers step well back so the callout
   reads clean even where it crosses one. */
.xray.is-active .xray__spot { opacity: 0.2; }
.xray .xray__spot.is-on { opacity: 1; transform: scale(1.14); box-shadow: 0 0 0 7px rgb(255 102 0 / 0.24), 0 2px 12px rgb(0 0 0 / 0.5); }
.xray .xray__spot.is-on::after { opacity: 0.7; transform: none; transition: opacity 240ms, transform 320ms var(--sc-ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .xray.is-seen .xray__spot::after { animation: xray-ping 1.6s var(--sc-ease-out) calc(var(--i, 0) * 120ms + 300ms) 2; }
}
@keyframes xray-ping { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.9); } }

/* The callout beside the lit part. JS places it; it is a visual echo of the
   parts list below, which carries the same words for everyone. */
.xray__tip {
  position: absolute; z-index: 4; left: 0; top: 0;
  width: max-content; max-width: calc(17.5rem + var(--lead, 2.25rem) + 0.75rem);
  pointer-events: none; opacity: 0;
  transition: opacity 220ms var(--sc-ease-out);
  text-shadow: 0 1px 14px rgb(5 5 6 / 0.95), 0 0 2px rgb(5 5 6 / 0.9);
}
.xray__tip.is-on { opacity: 1; }
.xray__tip { --lead: 2.25rem; }
.xray__tip::before {
  content: ""; position: absolute; top: 0.95rem; width: var(--lead); height: 1px; background: rgb(242 239 234 / 0.62);
}
.xray__tip::after {
  content: ""; position: absolute; top: calc(0.95rem - 2px); width: 5px; height: 5px; border-radius: 50%; background: var(--sc-accent);
}
.xray__tip--right { padding-left: calc(var(--lead) + 0.75rem); }
.xray__tip--right::before { left: 0; }
.xray__tip--right::after { left: calc(var(--lead) - 2px); }
.xray__tip--left { padding-right: calc(var(--lead) + 0.75rem); text-align: right; }
.xray__tip--left::before { right: 0; }
.xray__tip--left::after { right: calc(var(--lead) - 2px); }
.xray__tip-num { display: block; font: 500 0.6875rem/1 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent); }
.xray__tip-name {
  display: block; margin-top: 0.5rem;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: 1.25rem; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase;
}
.xray__tip-text { display: block; margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.42; color: var(--ink-mid); }

.xray__hint {
  position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 0.625rem;
  transition: opacity 240ms var(--sc-ease-out);
}
.xray__hint i {
  width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--sc-accent);
  box-shadow: 0 0 0 4px rgb(255 102 0 / 0.18);
}
.xray.is-active .xray__hint { opacity: 0; }

@media (max-width: 640px) {
  .xray__frame { width: 100%; aspect-ratio: 9 / 16; }
  .xray__spot { left: var(--mx); top: var(--my); }
  /* The callout docks to the foot of the frame on a phone. */
  .xray__tip { left: var(--sc-gutter) !important; right: var(--sc-gutter); top: auto !important; bottom: 1.25rem; width: auto; max-width: none; padding: 0 !important; text-align: left !important; }
  .xray__tip::before, .xray__tip::after { display: none; }
  .xray__stage::after { height: 22%; }
}

/* ================================================================== BOM ==
   The parts list: number, point, detail. Rows answer the hotspots. */
.bom { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 4vw, 3rem); }
.bom thead th {
  padding: 0 0 0.75rem; text-align: left;
  font: 500 0.6875rem/1 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.bom tbody tr { border-bottom: 1px solid var(--sc-hairline); transition: background-color 200ms var(--sc-ease-out); }
.bom td, .bom tbody th { padding: 1rem 1.5rem 1rem 0; text-align: left; vertical-align: baseline; font-weight: 400; }
.bom__num { width: 4.5rem; font: 500 0.75rem/1.5 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent); }
.bom tbody th {
  width: 30%;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase;
  transition: color 200ms var(--sc-ease-out);
}
.bom__text { color: var(--ink-mid); font-size: 1rem; line-height: 1.5; }
.bom tbody tr.is-on th { color: var(--sc-accent); }
.bom tbody tr.is-on { background: linear-gradient(90deg, rgb(255 102 0 / 0.07), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .bom tbody tr { cursor: default; }
}
@media (max-width: 640px) {
  .bom thead { display: none; }
  .bom tbody tr { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); padding: 1rem 0; }
  .bom td, .bom tbody th { padding: 0; width: auto; }
  .bom__text { grid-column: 2; margin-top: 0.35rem; font-size: 0.9375rem; }
}

/* =============================================================== VERSUS ==
   The Harvest 100 column is lit; the import column stays in soft ink. */
.versus { width: 100%; border-collapse: collapse; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }
.versus th, .versus td { padding: 1.05rem 1rem 1.05rem 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--sc-hairline); }
.versus thead th {
  padding-top: 0; padding-bottom: 0.875rem;
  font: 500 0.6875rem/1 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft);
  border-bottom-color: var(--sc-hairline-strong);
}
.versus thead th.versus__us { color: var(--sc-accent); }
.versus tbody th { color: var(--sc-ink-soft); }
.versus td { width: 28%; color: var(--sc-ink-soft); }
.versus .versus__us { padding-left: 1rem; }
.versus td.versus__us {
  color: var(--sc-ink); font-weight: 600;
  background: linear-gradient(90deg, rgb(255 102 0 / 0.08), rgb(255 102 0 / 0.02));
}
.versus thead th.versus__us { box-shadow: inset 0 2px 0 var(--sc-accent); padding-top: 0.875rem; }
.versus thead th:not(.versus__us) { vertical-align: bottom; }
.versus .yes::before {
  content: ""; display: inline-block; width: 0.6em; height: 0.32em; margin: 0 0.6em 0.2em 0;
  border: solid var(--sc-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.versus .no::before {
  content: ""; display: inline-block; width: 0.6em; height: 0; margin: 0 0.6em 0.3em 0;
  border-top: 1.5px solid var(--sc-ink-soft);
}
.versus + .footnote { margin-top: 1rem; }
@media (max-width: 560px) {
  .versus { font-size: 0.9375rem; }
  .versus td { width: 30%; }
  .versus .versus__us { padding-left: 0.625rem; }
}

/* ================================================================= FIGS == */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; }
.figs > div { padding: 1.25rem 0 1.75rem; border-bottom: 1px solid var(--sc-hairline); }
.figs > div:nth-child(-n+2) { padding-top: 0.15rem; }
.figs dd { margin: 0; }
.figs dt { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.45; color: var(--sc-ink-soft); max-width: 24ch; }
.figs .stat__num { font-size: clamp(2.75rem, 5vw, 5rem); }
.figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.figs__word { font-size: clamp(2.25rem, 4.2vw, 4.25rem) !important; }

/* ================================================================ PLIST == */
.plist { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.plist li {
  position: relative; padding: 0.95rem 0 0.95rem 1.75rem; border-bottom: 1px solid var(--sc-hairline);
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty;
}
.plist li::before {
  content: ""; position: absolute; left: 0.1rem; top: 1.55rem;
  width: 0.6em; height: 0.32em;
  border: solid var(--sc-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}

/* A photograph cut on the deck's slash, with a caption under it. */
.cutimg { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.cutimg__media {
  position: relative; overflow: hidden; background: var(--sc-surface);
  aspect-ratio: 4 / 5;
  --cut: calc(125% * var(--slash) * 0.42);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}
.cutimg__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cutimg figcaption { margin-top: 0.875rem; }
/* A landscape photograph in the content column. */
.cutimg--wide { margin-top: 0; }
.cutimg--wide .cutimg__media { aspect-ratio: 4 / 3; --cut: calc(75% * var(--slash) * 0.5); }
@media (max-width: 860px) {
  .cutimg__media { aspect-ratio: 4 / 3; --cut: calc(75% * var(--slash) * 0.5); }
  .cutimg__media img { object-position: 50% 24%; }
}

/* ================================================================ SHEET ==
   The Titan head: a drawing sheet with a hairline frame, zone marks and a
   title block. The page title lives in the title block. */
.sheet { padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vh, 2.25rem)); }
.sheet__frame {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  min-height: min(calc(100svh - var(--nav-h) - clamp(2.5rem, 6vh, 4.5rem)), 54rem);
  border: 1px solid var(--sc-hairline-strong);
  background:
    linear-gradient(rgb(242 239 234 / 0.025) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(90deg, rgb(242 239 234 / 0.025) 1px, transparent 1px) 0 0 / 2rem 2rem;
}
/* Zone marks along the frame, like a drawing border. */
.sheet__zones { position: absolute; inset: 0; pointer-events: none; }
.sheet__zones span {
  position: absolute; font: 500 0.625rem/1 var(--sc-font-mono); letter-spacing: 0.08em; color: rgb(167 161 153 / 0.7);
}
.sheet__zones .zt { top: 0.45rem; }
.sheet__zones .zl { left: 0.5rem; }
.sheet__zones span::after { content: ""; position: absolute; background: var(--sc-hairline-strong); }
.sheet__zones .zt::after { width: 1px; height: 0.45rem; top: -0.45rem; left: -0.6rem; }
.sheet__zones .zl::after { height: 1px; width: 0.5rem; left: -0.5rem; top: -0.55rem; }
.sheet__dwg {
  position: relative; display: grid; place-items: center; margin: 0;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.sheet__dwg svg { width: 100%; height: 100%; max-height: min(calc(100svh - var(--nav-h) - 13rem), 46rem); }
.sheet__block {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--sc-hairline-strong);
}
.sheet__title {
  margin-top: 0.875rem;
  font-size: clamp(4.5rem, 11vw, 10.5rem); line-height: 0.8;
}
.sheet__sub {
  margin: 1rem 0 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1;
}
.sheet__lede { margin: 0.875rem 0 0; max-width: 34ch; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.sheet__tb { margin: clamp(1.5rem, 3vh, 2.25rem) calc(clamp(1.5rem, 3vw, 2.5rem) * -1) calc(clamp(1.5rem, 3vw, 2.5rem) * -1); border-top: 1px solid var(--sc-hairline-strong); }
.sheet__tb > div {
  display: grid; grid-template-columns: minmax(10.5rem, 0.5fr) 1fr; gap: 1rem;
  padding: 0.7rem clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--sc-hairline);
}
.sheet__tb > div:last-child { border-bottom: 0; }
.sheet__tb dt { font: 500 0.6875rem/1.6 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sheet__tb dd { margin: 0; font: 500 0.875rem/1.5 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.sheet__note { position: absolute; left: clamp(1.5rem, 4vw, 4rem); right: 1rem; bottom: 1rem; max-width: none; }

/* Tablet landscape: still side by side; the title block's rows stack. */
@media (max-width: 1080px) {
  .sheet__tb > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .sheet__dwg { padding-inline: 1rem; }
}
/* Phone and portrait tablet: title first, then the drawing, then the
   title block's rows, all inside the one frame. */
@media (max-width: 860px) {
  .sheet__frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sheet__block { display: contents; }
  .sheet__intro { order: -1; padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--sc-hairline-strong); }
  .sheet__tb { order: 1; margin: 0; }
  .sheet__tb > div { grid-template-columns: minmax(10.5rem, 0.5fr) 1fr; gap: 1rem; }
  .sheet__dwg { padding: 2.5rem 1.5rem 3.5rem; }
  .sheet__dwg svg { max-height: 40rem; }
  .sheet__dwg .dwg__num { font-size: 21px; }
  .sheet__dwg text { font-size: 15px; }
  .sheet__dwg text.dwg__ink { font-size: 14px; }
}
@media (max-width: 560px) {
  .sheet { padding-top: calc(var(--nav-h) + 1rem); }
  .sheet .wrap { padding-inline: 0.75rem; }
  .sheet__intro { padding: 2rem 1rem 1.75rem; }
  .sheet__tb > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 1rem; }
  .sheet__dwg { padding: 1.75rem 0.25rem 3.25rem; }
  .sheet__note { left: 1rem; }
  .sheet__zones .zt:nth-child(even) { display: none; }
}

/* ================================================================== ALT ==
   The altimeter. The section is tall; its stage sticks while the scroll
   climbs. Altitude maps onto the column in three linear bands, joined by
   axis breaks drawn as the deck's slash. */
.alt { position: relative; height: 340svh; margin-top: clamp(4.5rem, 9vw, 8rem); }
.alt__stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 4vh, 2.5rem));
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.alt__grid {
  height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: 2rem clamp(2rem, 6vw, 7rem);
  position: relative; padding-top: 1.25rem;
}
.alt__grid::before { content: ""; position: absolute; top: 0; left: var(--sc-gutter); right: var(--sc-gutter); height: 1px; background: var(--sc-hairline-strong); }
.alt__copy { display: flex; flex-direction: column; min-height: 0; }
.alt__title { font-size: clamp(2.25rem, 4.2vw, 4.25rem); margin-top: 1.5rem; }
.alt__title > span { display: block; }
.alt__read { margin-top: auto; padding-top: 2rem; }
.alt__readout {
  display: flex; align-items: baseline; gap: 0.75rem; margin: 0.75rem 0 0;
}
.odo {
  display: inline-flex; overflow: hidden;
  font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(4.5rem, 10vw, 10rem); line-height: 1; height: 1em; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
}
.odo__drum { display: block; height: 1em; overflow: hidden; }
.odo__strip { display: flex; flex-direction: column; transform: translate3d(0, calc(var(--v, 0) * -1em), 0); }
.odo__strip span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo__sep { display: block; width: 0.22em; text-align: center; }
.odo.is-lit { color: var(--sc-accent); }
.odo__drum.is-lead { color: rgb(167 161 153 / 0.28); }
.alt__unit { font: 500 1rem/1 var(--sc-font-mono); letter-spacing: 0.08em; color: var(--sc-ink-soft); }
.alt__say { margin: 1.25rem 0 0; min-height: 4.5em; max-width: 30ch; }
.alt__say-name {
  display: block;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase;
}
.alt__say-text { display: block; margin-top: 0.4rem; font-size: 1rem; line-height: 1.5; color: var(--ink-mid); }

.alt__col { position: relative; min-height: 0; }
.alt__scale {
  position: absolute; left: 0; right: 0; top: 0.5rem; bottom: 0.5rem;
  --h: 0; /* climb, 0..1 along the column */
}
.alt__axis { position: absolute; left: 3.75rem; top: 0; bottom: 0; width: 1px; background: var(--sc-hairline-strong); }
.alt__trail {
  position: absolute; left: calc(3.75rem - 0.5px); bottom: 0; width: 2px; height: calc(var(--h) * 100%);
  background: var(--sc-accent);
}
.alt__craft {
  position: absolute; left: 3.75rem; bottom: calc(var(--h) * 100%);
  width: 0; height: 0;
}
.alt__craft::before {
  content: ""; position: absolute; left: -0.5rem; top: -0.5rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--sc-accent); box-shadow: 0 0 0 5px rgb(255 102 0 / 0.2);
}
.alt__craft::after {
  content: ""; position: absolute; left: -1.1rem; top: -1.1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgb(255 102 0 / 0.5);
}
.alt__tick {
  position: absolute; left: 0; width: 3.75rem; bottom: var(--at);
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
  font: 500 0.6875rem/1 var(--sc-font-mono); letter-spacing: 0.04em; color: var(--sc-ink-soft);
  transform: translateY(50%); font-variant-numeric: tabular-nums;
}
.alt__tick::after { content: ""; width: 0.5rem; height: 1px; background: var(--sc-hairline-strong); }
/* Axis breaks, drawn as two short slashes across the axis. */
.alt__break { position: absolute; left: calc(3.75rem - 0.45rem); bottom: var(--at); width: 0.9rem; height: 0.55rem; transform: translateY(50%); background: var(--sc-canvas); }
.alt__break::before, .alt__break::after {
  content: ""; position: absolute; top: -0.15rem; width: 1px; height: 0.85rem; background: var(--sc-ink-soft);
  transform: skewX(-12.5deg);
}
.alt__break::before { left: 0.25rem; }
.alt__break::after { left: 0.6rem; }

/* The operating band: everything up to 1,000 m. */
.alt__band {
  position: absolute; left: 3.75rem; right: 0; bottom: 0; height: var(--at);
  background: linear-gradient(to top, rgb(255 102 0 / 0.07), rgb(255 102 0 / 0.025));
  border-top: 1px dashed rgb(255 102 0 / 0.35);
  opacity: 0; transition: opacity 500ms var(--sc-ease-out);
}
.alt.is-band .alt__band { opacity: 1; }

/* The high-rise, drawn to the 150 m line. */
.alt__tower { position: absolute; left: calc(3.75rem + 12%); bottom: 0; height: var(--at); width: auto; aspect-ratio: 70 / 300; }
.alt__tower svg { width: 100%; height: 100%; overflow: visible; }
.alt__tower .tw { fill: rgb(242 239 234 / 0.03); stroke: rgb(242 239 234 / 0.42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.alt__tower .tw-w { fill: none; stroke: rgb(242 239 234 / 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.alt__tower .tw-hot { fill: rgb(255 102 0 / 0.5); }

.alt__marks { list-style: none; margin: 0; padding: 0; }
.alt__mark {
  position: absolute; left: 3.75rem; right: 0; bottom: var(--at);
  border-top: 1px solid var(--sc-hairline-strong);
  transition: border-color 400ms var(--sc-ease-out);
}
.alt__mark-in {
  position: absolute; right: 0; bottom: 0.5rem;
  display: grid; justify-items: end; gap: 0.25rem; text-align: right;
  max-width: 22rem;
  color: var(--sc-ink-soft); transition: color 400ms var(--sc-ease-out);
}
.alt__mark-val {
  font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 0.9; text-transform: uppercase;
}
.alt__mark-name { font: 500 0.6875rem/1.4 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.alt__mark--top .alt__mark-in { bottom: auto; top: 0.5rem; }
.alt__mark.is-past { border-top-color: var(--sc-accent); }
.alt__mark.is-past .alt__mark-in { color: var(--sc-ink); }
.alt__mark.is-past .alt__mark-val { color: var(--sc-accent); }

@media (max-width: 860px) {
  .alt { height: 300svh; }
  .alt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 1rem; }
  .alt__title { font-size: clamp(1.875rem, 8vw, 2.75rem); margin-top: 1rem; }
  .odo { font-size: clamp(3.75rem, 19vw, 5.5rem); }
  .alt__say { min-height: 7.5em; }
  .alt__axis, .alt__trail, .alt__craft, .alt__band, .alt__mark { left: 2.75rem; }
  .alt__trail { left: calc(2.75rem - 0.5px); }
  .alt__tick { width: 2.75rem; font-size: 0.625rem; }
  .alt__break { left: calc(2.75rem - 0.45rem); }
  .alt__tower { left: calc(2.75rem + 14%); }
  .alt__mark-name { display: none; }
  .alt__mark-val { font-size: 1.25rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .alt__say-text { display: none; }
  .alt__say { min-height: 2.5em; }
}
/* Short windows (a phone held sideways): everything a size down. */
@media (max-height: 520px) {
  .alt__title { font-size: 1.75rem; margin-top: 0.75rem; }
  .odo { font-size: 3.25rem; }
  .alt__read { padding-top: 0.5rem; }
  .alt__say { margin-top: 0.5rem; min-height: 0; }
  .alt__say-text { display: none; }
}

/* Reduced motion, or no script: no climb. The column stands complete. */
.alt.is-static { height: auto; }
.alt.is-static .alt__stage { position: relative; height: auto; min-height: 44rem; }
.alt.is-static .alt__grid { min-height: 40rem; }
.alt.is-static .alt__band { opacity: 1; }
.alt.is-static .alt__scale { --h: 1; }

/* ================================================================= CAPS == */
.caps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem);
  counter-reset: cap;
}
.caps li { counter-increment: cap; padding: 1.25rem 0 1.75rem; border-bottom: 1px solid var(--sc-hairline); }
.caps li:nth-child(-n+2) { padding-top: 0; }
.caps h3 {
  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;
}
.caps h3::before {
  content: counter(cap, 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);
}
.caps p { margin: 0.6rem 0 0; color: var(--sc-ink-soft); line-height: 1.55; max-width: 40ch; }
@media (max-width: 560px) {
  .caps { grid-template-columns: 1fr; }
  .caps li:nth-child(2) { padding-top: 1.25rem; }
}

/* ================================================================ SPECS ==
   The full sheet. Three groups; every value set large in tabular figures,
   its unit small in mono beside it. */
.specs { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.specs__group h3 { margin: 0 0 0.25rem; }
.specs__group dl {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--sc-hairline-strong);
}
.specs__group dl > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.6rem;
  padding: 1.125rem 1.25rem 1.375rem 0;
  border-bottom: 1px solid var(--sc-hairline);
}
.specs__group dt { font: 500 0.6875rem/1.4 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.specs__group dd {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(1.875rem, 2.8vw, 2.75rem); line-height: 0.95; letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.specs__group dd small {
  margin-left: 0.3em;
  font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.06em; color: var(--sc-ink-soft);
  vertical-align: 0.35em;
}
.specs__group dd.specs__words { font-family: var(--sc-font-text); font-stretch: 100%; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; letter-spacing: 0; padding-top: 0.15rem; }
.specs__group dd .specs__sep { color: var(--sc-ink-soft); font-weight: 600; margin: 0 0.15em; }
.specs__wide { grid-column: span 2; }
@media (min-width: 1081px) {
  .specs__group--4 dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .specs__group dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .specs__group dd { font-size: 1.75rem; }
}

/* ================================================================ ORDER ==
   How it works, as a work order you fill in. The steps carry the choices;
   the ticket beside them types out each line as it is set. */
/* Steps 1 and 2 (the choices) and 3 to 5 (what follows) are two lists, so
   on one column the ticket sits between them, right under the choices. */
.order {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 7rem); align-items: start;
}
.steps--now { grid-column: 1; grid-row: 1; }
.steps--next { grid-column: 1; grid-row: 2; }
.order .ticket { grid-column: 2; grid-row: 1 / span 2; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps--next { counter-reset: step 2; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem;
  padding: 1.5rem 0 2rem; border-top: 1px solid var(--sc-hairline-strong);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font: 500 0.75rem/2 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent);
}
.step__body { min-width: 0; }
.step__title {
  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;
}
.step__text { margin: 0.625rem 0 0; max-width: 52ch; color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.step fieldset { border: 0; margin: 1.5rem 0 0; padding: 0; min-width: 0; }
.step legend { padding: 0; margin-bottom: 0.875rem; }
.svc { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.svc__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.svc__group > .t-label { margin-bottom: 0.625rem; display: block; }
.svc .choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 0.625rem; }
.svc .choice__face { min-height: 3.75rem; padding: 0.875rem 2.25rem 0.875rem 0.875rem; }
.svc .choice__name { font-size: 1rem; }
.svc .choice__text { font-size: 0.8125rem; line-height: 1.4; }
.seg__opt small { margin-left: 0.5em; font-size: 0.8125rem; opacity: 0.75; }
.step__choice { border: 0; margin: 1.75rem 0 0; padding: 0; min-width: 0; }
.step__choice legend { padding: 0; margin-bottom: 0.75rem; }

/* The ticket: a work order in mono, perforated above its stub. */
.ticket {
  position: sticky; top: calc(var(--nav-h) + 1.5rem);
  --notch: 0.625rem;
  background: var(--sc-surface);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.8125rem; line-height: 1.45;
}
.ticket__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--sc-hairline-strong);
}
.ticket__title { margin: 0; font: 600 0.8125rem/1 var(--sc-font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ticket__title b { color: var(--sc-accent); font-weight: 600; margin-right: 0.5em; }
.ticket__lines { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1.25rem; }
.ticket__line { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0; }
.ticket__k { letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ticket__dots { border-bottom: 1px dotted rgb(242 239 234 / 0.24); transform: translateY(-0.3em); }
.ticket__v { text-align: right; color: var(--sc-ink); max-width: 16ch; text-wrap: balance; }
.ticket__v.is-empty { color: rgb(167 161 153 / 0.75); }
.ticket__v.is-typing::after {
  content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.1em; vertical-align: -0.15em;
  background: var(--sc-accent);
}
.ticket__tear { position: relative; height: 0; border-top: 1px dashed rgb(242 239 234 / 0.28); margin: 0 calc(var(--notch) + 0.25rem); }
.ticket__tear::before, .ticket__tear::after {
  content: ""; position: absolute; top: calc(var(--notch) * -1 - 0.5px);
  width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%;
  background: var(--sc-canvas); box-shadow: inset 0 0 0 1px var(--sc-hairline);
}
.ticket__tear::before { left: calc(var(--notch) * -2 - 0.25rem); }
.ticket__tear::after { right: calc(var(--notch) * -2 - 0.25rem); }
.ticket__stub { padding: 1.25rem; display: grid; gap: 0.875rem; font-family: var(--sc-font-text); font-size: 0.875rem; }
.ticket__stub .link-arrow { justify-self: start; }
.ticket__stub p { margin: 0; color: var(--sc-ink-soft); line-height: 1.5; }
.ticket__stub a:not(.link-arrow) { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.22em; }
@media (max-width: 1080px) {
  .order { grid-template-columns: minmax(0, 1fr); }
  .steps--now, .steps--next, .order .ticket { grid-column: 1; grid-row: auto; }
  .order .ticket { position: relative; top: auto; max-width: 32rem; margin: 0.5rem 0 2.5rem; }
}

/* ================================================================ CYCLE ==
   Own and operate, in four stages on one ruled track. */
.cycle {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 2vw, 2rem);
  counter-reset: stage;
}
.cycle li { counter-increment: stage; position: relative; padding-top: 2.25rem; }
.cycle li::before {
  content: ""; position: absolute; top: 0.4rem; left: 0; right: calc(clamp(1rem, 2vw, 2rem) * -1);
  height: 1px; background: var(--sc-hairline-strong);
}
.cycle li:last-child::before { right: 0; }
.cycle li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 0.8125rem; height: 0.8125rem; border-radius: 50%;
  background: var(--sc-canvas); box-shadow: inset 0 0 0 1.5px var(--sc-accent);
}
.cycle h3 {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
}
.cycle h3::before {
  content: counter(stage, decimal-leading-zero);
  display: block; margin-bottom: 0.625rem;
  font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent);
}
.cycle ul { list-style: none; margin: 0.875rem 0 0; padding: 0; }
.cycle ul li { padding: 0.45rem 0; border-bottom: 1px solid var(--sc-hairline); color: var(--ink-mid); font-size: 0.9375rem; line-height: 1.45; }
.cycle ul li::before, .cycle ul li::after { content: none; }
.cycle ul li { counter-increment: none; }
.cycle__loop { margin-top: 1.5rem; }
@media (max-width: 860px) {
  .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .cycle > li:nth-child(2)::before { right: 0; }
}
@media (max-width: 420px) {
  .cycle { grid-template-columns: minmax(0, 1fr); }
  .cycle > li::before { right: 0; }
}

/* A short statement in the body column. */
.say {
  margin: 0; max-width: 26ch;
  font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 500;
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance;
}
.say + .facts { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.say ~ .link-arrow { margin-top: 1.75rem; }

/* =============================================================== PCLOSE ==
   Every platform page ends the same way: one line, contact, and where to
   go next. */
.pclose { padding-top: clamp(5rem, 10vw, 9rem); }
.pclose__grid {
  position: relative; padding-top: 1.25rem;
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2rem, 6vw, 7rem); align-items: end;
}
.pclose__grid::before { content: ""; position: absolute; top: 0; left: var(--sc-gutter); right: var(--sc-gutter); height: 1px; background: var(--sc-hairline-strong); }
.pclose__title { font-size: clamp(3rem, 7vw, 7.5rem); line-height: 0.86; margin-top: 1.25rem; }
.pclose__title > span { display: block; }
.pclose__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 860px) {
  .pclose__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------- H100 head variant -- */
.phead--wide-media .phead__media { width: 56%; }
.phead--wide-media .phead__media img { object-position: 54% 50%; }
.phead--wide-media .phead__media::after {
  background:
    linear-gradient(to bottom, rgb(11 11 12 / 0.5), transparent 22%),
    linear-gradient(to top, var(--sc-canvas), rgb(11 11 12 / 0.6) 12%, transparent 34%);
}
.phead--wide-media .phead__lede { max-width: 30ch; }
@media (max-width: 1080px) {
  .phead--wide-media .phead__media { width: 50%; }
}
/* On a phone the whole aircraft sits between the bar and the slash, never
   behind the wordmark. It is sized from the band's height (the aircraft is
   0.674 of the poster's width tall, its top 0.569 down) and capped at the
   phone's width. The poster's ground is pure black, so the band matches it;
   the mask feathers the rotor glow where it reaches the poster's edge. */
@media (max-width: 860px) {
  .phead--wide-media { --band: calc(var(--nav-h) + 40svh); padding-top: calc(var(--band) + 0.75rem); }
  .phead--wide-media .phead__media { width: auto; height: var(--band); background: #000; }
  .phead--wide-media .phead__media img {
    --w: min(100vw, (var(--band) * 0.8 - var(--nav-h) - 0.75rem) / 0.674);
    position: absolute; left: 50%; top: calc(var(--nav-h) + 0.75rem - var(--w) * 0.569);
    width: var(--w); height: auto;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .duo__craft img, .duo__shadow, .duo__pane--a::after { transition: none; }
  .xray__dim { transition: none; }
  .odo__strip { transition: none; }
}