/* ============================================================================
   Rantizo home: brand layer over the scrollcraft floor.
   Six colours and three faces from one superfamily pair. The deck owns the
   palette (near-black, one orange, white) and the 12.5deg diagonal slash.
   ========================================================================== */

:root {
  --sc-canvas:     #0B0B0C;
  --sc-surface:    #141416;
  --sc-ink:        #F2EFEA;
  --sc-ink-soft:   #A7A199;
  --sc-accent:     #FF6600;
  --sc-accent-ink: #0B0B0C;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* One radius for every control on the page: square, industrial. */
  --r: 2px;
  --sc-r-sm: var(--r); --sc-r-md: var(--r); --sc-r-lg: var(--r);

  --sc-shadow-color: 30 8% 2%;
  --accent-hover: #FF7A26;
  --ink-mid: color-mix(in oklab, var(--sc-ink) 78%, var(--sc-canvas));

  /* The deck's background slash runs 12.5deg off vertical. tan(12.5deg). */
  --slash: 0.2217;

  --nav-h: 68px;
  --sc-gutter: clamp(1.25rem, 4.4vw, 4.75rem);
}

/* ------------------------------------------------------------ type kit -- */
.t-display {
  font-family: var(--sc-font-display);
  font-stretch: 66%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.004em;
  margin: 0;
  text-wrap: balance;
}
.t-display > span { display: inline-block; }
.t-label {
  font-family: var(--sc-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}
.t-label--accent { color: var(--sc-accent); }
.wordmark {
  font-family: var(--sc-font-display);
  font-stretch: 125%;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--sc-accent);
  text-decoration: none;
  line-height: 1;
}
.wordmark sup { font-size: 0.32em; font-weight: 500; vertical-align: 1.5em; margin-left: 0.12em; }
.footnote { font-size: 0.8125rem; line-height: 1.5; color: var(--sc-ink-soft); margin: 0; max-width: 46ch; }
/* The hidden attribute always wins, whatever display a class sets. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 1.375rem;
  border-radius: var(--r); border: 0;
  font: 600 0.9375rem/1 var(--sc-font-text);
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out),
              box-shadow 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--sm { height: 40px; padding: 0 1rem; font-size: 0.875rem; }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 42%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: var(--accent-hover); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 0.9375rem/1.2 var(--sc-font-text);
  color: var(--sc-ink); text-decoration: none;
  padding-block: 0.375rem;
  border-bottom: 1px solid var(--sc-accent);
}
.link-arrow svg, .close__ir svg, .linklist 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);
}
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover svg, .close__ir a:hover svg, .linklist a:hover svg { transform: translateX(3px); }
}

a[href^="tel:"] { white-space: nowrap; }

.skip {
  position: fixed; left: var(--sc-gutter); top: 0.75rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; text-decoration: none; border-radius: var(--r);
  transform: translateY(-160%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* The deck's orange top rule becomes the scroll progress. */
[data-sc-progress] { height: 3px; z-index: 80; }

/* -------------------------------------------------------------------- nav -- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--sc-gutter);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.nav.is-solid {
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  box-shadow: 0 1px 0 var(--sc-hairline);
}
/* With a section open, the bar and its submenu read as one sheet. */
.nav.is-sub { background: var(--sc-canvas); box-shadow: none; transition: none; }
.nav__mark { font-size: 1.375rem; justify-self: start; }
.nav__list { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; display: flex; align-items: center; height: var(--nav-h); }
.nav__item > a {
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-mid);
  text-decoration: none; padding-block: 0.5rem;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 0 1px no-repeat;
  transition: color 160ms var(--sc-ease-out), background-size 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__item > a:hover { color: var(--sc-ink); background-size: 100% 1px; }
}
/* The section you are in keeps its rule, and so does the one you opened. */
.nav__item > a[aria-current],
.nav__item:has(.subnav [aria-current="page"]) > a,
.nav__item.is-open > a { color: var(--sc-ink); background-size: 100% 1px; }
/* While one is open, it alone carries the rule. */
.nav.is-sub .nav__item:not(.is-open) > a { color: var(--ink-mid); background-size: 0 1px; }
/* Keyboard way into a section's submenu. Pointers open it by hovering the link,
   so the chevron only shows when it has keyboard focus. */
.nav__more {
  position: absolute; left: 100%; top: 50%;
  width: 1.125rem; height: 1.5rem; margin: -0.75rem 0 0 0.125rem; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r); color: var(--sc-accent);
  opacity: 0; cursor: pointer;
}
.nav__more:focus-visible { opacity: 1; outline: 1px solid var(--sc-accent); outline-offset: 1px; }
.nav__more svg { width: 0.625rem; height: 0.625rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: rotate 200ms var(--sc-ease-out); }
.nav__more[aria-expanded="true"] svg { rotate: 180deg; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }
.ticker {
  display: inline-flex; align-items: center; gap: 0.4em;
  height: 40px; padding: 0 0.75rem;
  font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mid); text-decoration: none;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  transition: color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.ticker b { color: var(--sc-accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .ticker:hover { color: var(--sc-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 45%, transparent); }
}
.nav__menu {
  display: none;
  height: 40px; padding: 0 0.875rem;
  background: none; border: 0; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink); cursor: pointer;
}

/* ----------------------------------------------------------------- subnav --
   Each section's submenu: a sheet that drops from the bar. Lead on the left
   (the section's own headline and its overview link), the pages in a ledger,
   and a plate bleeding off the right edge that shows the page you point at.
   Every submenu takes the tallest one's height (--subnav-h, set by site.js), so
   moving between sections swaps the contents and never resizes the sheet.
   The sheet itself is the bar's ::before; the submenus are transparent on it. */
@property --wipe { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }

.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: var(--subnav-h, 0px);
  background: var(--sc-canvas);
  box-shadow: inset 0 1px 0 var(--sc-hairline), 0 1px 0 var(--sc-hairline);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 280ms var(--sc-ease-in-out);
  pointer-events: none;
}
.nav.is-sub::before { clip-path: inset(0 0 -1px 0); transition: clip-path 460ms var(--sc-ease-drawer); }
.nav.is-moved::before { transition: none; }

.subnav {
  --subnav-pt: clamp(2rem, 4.5vh, 2.75rem);
  --subnav-pb: clamp(2.25rem, 5vh, 3rem);
  --cut: calc(var(--subnav-h, 22rem) * var(--slash));
  position: fixed; left: 0; right: 0; top: var(--nav-h);
  min-height: var(--subnav-h, 0px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.4fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  padding: var(--subnav-pt) var(--sc-gutter) var(--subnav-pb);
  visibility: hidden; opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity 160ms var(--sc-ease-out), clip-path 280ms var(--sc-ease-in-out), visibility 0s linear 280ms;
}
.nav__item.is-open > .subnav {
  visibility: visible; opacity: 1; clip-path: inset(0);
  transition: opacity 200ms var(--sc-ease-out), clip-path 460ms var(--sc-ease-drawer), visibility 0s;
}
/* Moving between open sections: no curtain, just a quick crossfade. */
.nav.is-moved .subnav { clip-path: inset(0); transition: opacity 120ms var(--sc-ease-out), visibility 0s linear 120ms; }
.nav.is-moved .nav__item.is-open > .subnav { transition: opacity 200ms var(--sc-ease-out) 60ms, visibility 0s; }

.subnav__lead { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 2rem; }
.subnav__title { font-size: clamp(1.875rem, 2.8vw, 3.25rem); }
.subnav__title > span { display: block; }

.subnav__list { margin: 0; padding: 0; list-style: none; align-self: start; border-top: 1px solid var(--sc-hairline); }
.subnav__list a {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--sc-hairline);
  color: var(--sc-ink); text-decoration: none;
  outline: none;
}
.subnav__name {
  font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(1.25rem, 1.55vw, 1.625rem); line-height: 1; text-transform: uppercase;
  transition: transform 280ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.subnav__note {
  font: 500 0.75rem/1.2 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-align: right;
  transition: color 160ms var(--sc-ease-out);
}
/* The deck's slash marks the row on show: a short orange bar cut at 12.5deg. */
.subnav__list a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0.5rem; height: 1.25rem; margin-top: -0.625rem;
  background: var(--sc-accent);
  clip-path: polygon(calc(1.25rem * var(--slash)) 0, 100% 0, calc(100% - 1.25rem * var(--slash)) 100%, 0 100%);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 240ms var(--sc-ease-out);
}
.subnav__list a.is-shown::before, .subnav__list a:focus-visible::before { transform: none; }
.subnav__list a.is-shown .subnav__name, .subnav__list a:focus-visible .subnav__name { transform: translateX(1.125rem); }
.subnav__list a.is-shown .subnav__note, .subnav__list a:focus-visible .subnav__note { color: var(--ink-mid); }
.subnav__list a[aria-current] .subnav__name { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) {
  .subnav__list a:hover::before { transform: none; }
  .subnav__list a:hover .subnav__name { transform: translateX(1.125rem); }
  .subnav__list a:hover .subnav__note { color: var(--ink-mid); }
}
.subnav .link-arrow:focus-visible, .subnav__list a:focus-visible { outline: 1px solid var(--sc-accent); outline-offset: 2px; }

/* Contents arrive in a short stagger: rising when the submenu opens, sliding in
   from the side you came from when you move between sections. site.js sets
   --subnav-dx (-1, 0, 1) and --subnav-dy (0 or 1) on the bar. */
@media (prefers-reduced-motion: no-preference) {
  .nav__item.is-open .subnav__title > span,
  .nav__item.is-open .subnav__lead > .link-arrow,
  .nav__item.is-open .subnav__list > li { animation: subnav-in 520ms var(--sc-ease-out) both; animation-delay: calc(70ms + var(--i, 0) * 40ms); }
  .nav__item.is-open .subnav__title > span + span { --i: 1; }
  .nav__item.is-open .subnav__lead > .link-arrow { --i: 3; }
  .subnav__list > li:nth-child(2) { --i: 1; }
  .subnav__list > li:nth-child(3) { --i: 2; }
  .subnav__list > li:nth-child(4) { --i: 3; }
  .subnav__list > li:nth-child(5) { --i: 4; }
}
@keyframes subnav-in {
  from { opacity: 0; transform: translate3d(calc(var(--subnav-dx, 0) * 1.5rem), calc(var(--subnav-dy, 1) * 0.625rem), 0); }
}

/* The plate fills its column to the submenu's edges and is cut on the slash.
   A new picture wipes across it along the same 12.5deg line, an orange edge
   leading, over the one it replaces. */
.subnav__plate {
  position: relative; overflow: hidden;
  margin: calc(var(--subnav-pt) * -1) calc(var(--sc-gutter) * -1) calc(var(--subnav-pb) * -1) 0;
}
.subnav__plate::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: var(--sc-accent);
  clip-path: polygon(var(--cut) 0, calc(var(--cut) + 1.5px) 0, 1.5px 100%, 0 100%);
}
.subnav__layer {
  position: absolute; inset: 0;
  clip-path: polygon(var(--cut) 0, calc(var(--cut) + var(--wipe)) 0, var(--wipe) 100%, 0 100%);
  visibility: hidden;
}
.subnav__layer > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.subnav__layer.was-on { visibility: visible; z-index: 1; }
.subnav__layer.is-on { visibility: visible; z-index: 2; }
.subnav__edge {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--sc-accent);
  --wipe: 130%;
  clip-path: polygon(calc(var(--cut) + var(--wipe) - 3px) 0, calc(var(--cut) + var(--wipe)) 0, var(--wipe) 100%, calc(var(--wipe) - 3px) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .subnav__layer.is-on, .subnav__edge.is-on { animation: subnav-wipe 680ms var(--sc-ease-out) both; }
  .subnav__layer.is-on > img { animation: subnav-settle 1100ms var(--sc-ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .subnav__edge { display: none; }
  .nav::before, .nav.is-sub::before { transition: none; }
  .nav .subnav { transition: opacity 160ms var(--sc-ease-out), visibility 0s linear 160ms; }
  .nav .nav__item.is-open > .subnav { transition: opacity 160ms var(--sc-ease-out), visibility 0s; }
}
@keyframes subnav-wipe { from { --wipe: 0%; } to { --wipe: calc(100% + 4px); } }
@keyframes subnav-settle { from { scale: 1.07; } }

/* Platform: the Harvest 100 in its own light, as on the Platform page. */
.subnav__layer--craft {
  background:
    radial-gradient(56% 50% at 58% 74%, rgb(255 120 40 / 0.2), transparent 72%),
    linear-gradient(to bottom, #0B0B0C 30%, #17110D);
}
.subnav__layer--craft > img {
  inset: 10% -7% 6% auto;
  width: calc(104% - var(--cut) * 0.45); height: 84%;
  object-fit: contain; object-position: 0 55%;
}
/* Sheets: the drawing paper and the hatched plate from Leadership. */
.subnav__sheet {
  background:
    repeating-linear-gradient(102.5deg, transparent 0 21px, rgb(242 239 234 / 0.04) 21px 22px),
    radial-gradient(60% 70% at 62% 60%, rgb(255 138 61 / 0.1), transparent 72%),
    var(--sc-surface);
}
.subnav__sheet[data-layer="titan"] {
  display: flex; padding: 7% 6% 6% calc(var(--cut) + 3%);
  background:
    linear-gradient(rgb(242 239 234 / 0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgb(242 239 234 / 0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--sc-canvas);
}
.subnav__dwg { width: 100%; height: 100%; overflow: visible; }
.subnav__dwg text { font-family: var(--sc-font-mono); }
.subnav__dwg-edge { fill: rgb(242 239 234 / 0.025); stroke: var(--sc-ink); stroke-width: 1.5; }
.subnav__dwg-faint { fill: none; stroke: rgb(242 239 234 / 0.2); stroke-width: 1; stroke-dasharray: 4 5; }
.subnav__dwg-axis { fill: none; stroke: rgb(242 239 234 / 0.3); stroke-width: 1; stroke-dasharray: 14 4 2 4; }
.subnav__dwg-dim { fill: none; stroke: var(--sc-accent); stroke-width: 1.25; }
.subnav__dwg-head { fill: var(--sc-accent); }
.subnav__dwg-num { fill: var(--sc-accent); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.subnav__dwg-note { fill: var(--sc-ink-soft); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
/* Pointing at Titan inks the drawing in, as its page does. */
@media (prefers-reduced-motion: no-preference) {
  .subnav__layer.is-on .subnav__dwg [pathLength] { stroke-dasharray: 1; animation: subnav-ink 900ms var(--sc-ease-in-out) both; }
  .subnav__layer.is-on .subnav__dwg-dim { animation-delay: 420ms !important; }
  .subnav__layer.is-on .subnav__dwg text,
  .subnav__layer.is-on .subnav__dwg-head,
  .subnav__layer.is-on .subnav__dwg-faint,
  .subnav__layer.is-on .subnav__dwg-axis { animation: subnav-fade 500ms var(--sc-ease-out) 760ms both; }
}
@keyframes subnav-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes subnav-fade { from { opacity: 0; } }

/* Investors: the listing at a glance, and the way to a live quote. */
.subnav__ir {
  display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 1.75rem;
  padding: 0 var(--sc-gutter) 0 calc(var(--cut) + clamp(1.5rem, 3vw, 3rem));
}
.subnav__ir dl { margin: 0; display: grid; gap: 1.125rem; }
.subnav__ir dt { font: 500 0.75rem/1.2 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft); }
.subnav__ir dd { margin: 0.35rem 0 0; font-size: 1.0625rem; color: var(--sc-ink); }
.subnav__ir .link-arrow { white-space: nowrap; }
/* Leadership: the credential that stands in for a portrait. */
.subnav__marks {
  display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding: 0 calc(var(--sc-gutter) * 0.5) 0 var(--cut);
}
.subnav__marks > span { display: grid; gap: 0.625rem; }
.subnav__marks b {
  font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(2.5rem, 3.6vw, 4.25rem); line-height: 0.78; letter-spacing: -0.01em;
  color: var(--sc-accent);
}
.subnav__marks small { font: 500 0.75rem/1.2 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* Under an open submenu, the page dims. */
.nav__scrim {
  position: fixed; inset: 0; z-index: 59;
  background: rgb(6 6 7 / 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--sc-ease-out), visibility 0s linear 260ms;
}
.nav__scrim.is-on { opacity: 1; visibility: visible; transition: opacity 380ms var(--sc-ease-out), visibility 0s; }

@media (max-width: 1279px) {
  .subnav { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 1.2fr); }
  .subnav__note { display: none; }
}

/* ------------------------------------------------------------------- menu --
   Phones and tablets. The sheet sweeps in from the right along the deck's
   slash, an orange edge leading. Sections open in place, one at a time; the
   one you are in is open when the menu opens. */
@property --menu-r { syntax: "<number>"; inherits: true; initial-value: 0; }
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-rows: var(--nav-h) minmax(0, 1fr) auto;
  padding: 0 var(--sc-gutter) max(1.5rem, env(safe-area-inset-bottom));
  /* The slash's horizontal run over the full screen height. */
  --run: calc(100lvh * var(--slash));
  --x: calc((1 - var(--menu-r)) * 100% - var(--menu-r) * var(--run));
  transition: --menu-r 340ms var(--sc-ease-in-out);
}
.menu.is-open { --menu-r: 1; transition: --menu-r 620ms var(--sc-ease-drawer); }
.menu::before, .menu::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.menu::before {
  background: var(--sc-accent);
  clip-path: polygon(calc(var(--x) + var(--run) - 4px) 0, 100% 0, 100% 100%, calc(var(--x) - 4px) 100%);
}
.menu::after {
  background: var(--sc-canvas);
  clip-path: polygon(calc(var(--x) + var(--run)) 0, 100% 0, 100% 100%, var(--x) 100%);
}
.menu > * { opacity: 0; transition: opacity 140ms var(--sc-ease-out); }
.menu.is-open > * { opacity: 1; transition: opacity 360ms var(--sc-ease-out) 160ms; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; }
.menu__bar .wordmark { font-size: 1.375rem; }
.menu__bar .nav__menu { display: inline-flex; align-items: center; }
.menu__links { overflow-y: auto; overscroll-behavior: contain; margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); }
.menu__list { margin: 0; padding: clamp(1rem, 5svh, 3rem) 0 1.5rem; list-style: none; }
.menu__head, .menu__group > a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.3rem 0; margin: 0;
  background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 800;
  font-size: clamp(2.5rem, 12vw, 4.25rem); line-height: 1; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
  transition: opacity 260ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
/* A plus that closes to a minus. */
.menu__head::after {
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-right: 0.25rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--sc-ink-soft);
  transition: background-size 280ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.menu__head[aria-expanded="true"]::after { background-size: 100% 2px, 2px 0; color: var(--sc-accent); }
.menu__group:has([aria-current="page"]) > .menu__head,
.menu__group > a[aria-current] { color: var(--sc-accent); }
.menu__list:has([aria-expanded="true"]) .menu__head[aria-expanded="false"],
.menu__list:has([aria-expanded="true"]) .menu__group > a { opacity: 0.4; }
.menu__sub {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 360ms var(--sc-ease-in-out), visibility 0s linear 360ms;
}
.menu__head[aria-expanded="true"] + .menu__sub {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 480ms var(--sc-ease-drawer), visibility 0s;
}
.menu__sub > ul { min-height: 0; overflow: hidden; margin: 0 0 0 0.25rem; padding: 0; list-style: none; border-left: 1px solid var(--sc-hairline-strong); }
.menu__sub li:first-child { margin-top: 0.375rem; }
.menu__sub li:last-child { margin-bottom: 1.125rem; }
.menu__sub a {
  position: relative; display: flex; align-items: center; min-height: 2.875rem;
  padding-left: 1.25rem;
  font-size: 1.125rem; font-weight: 500; color: var(--ink-mid); text-decoration: none;
}
.menu__sub a[aria-current] { color: var(--sc-ink); }
.menu__sub a[aria-current]::before {
  content: ""; position: absolute; left: -0.3rem; top: 50%;
  width: 0.55rem; height: 1.25rem; margin-top: -0.625rem;
  background: var(--sc-accent);
  clip-path: polygon(calc(1.25rem * var(--slash)) 0, 100% 0, calc(100% - 1.25rem * var(--slash)) 100%, 0 100%);
}
.menu__foot { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; padding-top: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .menu.is-open .menu__list > li { animation: menu-in 560ms var(--sc-ease-out) both; animation-delay: calc(180ms + var(--i, 0) * 45ms); }
  .menu__list > li:nth-child(2) { --i: 1; }
  .menu__list > li:nth-child(3) { --i: 2; }
  .menu__list > li:nth-child(4) { --i: 3; }
  .menu__list > li:nth-child(5) { --i: 4; }
  .menu__head[aria-expanded="true"] + .menu__sub li { animation: menu-sub 420ms var(--sc-ease-out) both; animation-delay: calc(80ms + var(--j, 0) * 35ms); }
  .menu__sub li:nth-child(2) { --j: 1; }
  .menu__sub li:nth-child(3) { --j: 2; }
  .menu__sub li:nth-child(4) { --j: 3; }
  .menu__sub li:nth-child(5) { --j: 4; }
  .menu__sub li:nth-child(6) { --j: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open, .menu > *, .menu.is-open > * { transition: none; }
  .menu::before { display: none; }
}
@keyframes menu-in { from { opacity: 0; transform: translate3d(1.5rem, 0, 0); } }
@keyframes menu-sub { from { opacity: 0; transform: translate3d(0, -0.375rem, 0); } }

@media (max-width: 1080px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .nav__cta, .nav__scrim { display: none; }
  .nav__menu { display: inline-flex; align-items: center; }
}
@media (max-width: 420px) {
  .nav .ticker { display: none; }
}

/* =================================================================== HERO ==
   Planes, back to front: plate (z0), light (z1), scrim (z1), headline (z2),
   aircraft (z3), haze (z4), lower copy (z5), handoff fade (z6). The scene box
   is a cover-fit 16:9 frame with NO transform, so its children share the
   stage's stacking context with the headline that slides between them. */
.hero__stage {
  background: var(--sc-canvas);
  --sw: max(100vw, 177.7778svh);
  --sh: calc(var(--sw) * 0.5625);
  --ax: 0.5;
}
.hero__scene {
  position: absolute;
  width: var(--sw); height: var(--sh);
  left: calc((100% - var(--sw)) * var(--ax));
  top: calc((100% - var(--sh)) * 0.5);
}
.hero__plate {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform-origin: 30% 46%;
  will-change: transform;
}
.hero__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(22% 26% at 15% 40%, rgb(255 150 70 / 0.2), transparent 70%);
  mix-blend-mode: screen;
}
.hero__craft {
  position: absolute; z-index: 3;
  left: 13.75%; top: 33.9%; width: 78.67%;
  aspect-ratio: 2014 / 920;
  transform-origin: 58% 96%;
  will-change: transform;
}
.hero__drone { position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; }
.hero__shadow {
  position: absolute; z-index: 0; left: 26%; right: 4%; bottom: -4%; height: 16%;
  background: radial-gradient(closest-side, rgb(4 4 5 / 0.62), rgb(4 4 5 / 0.25) 55%, transparent);
  filter: blur(6px);
}
.hero__haze {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 22%, rgb(255 160 90 / 0.06) 34%, transparent 50%),
    linear-gradient(to top, rgb(11 11 12 / 0.7), transparent 18%);
  will-change: transform, opacity;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Density only where the type sits: the nav band, and a lower-left corner
     shaped to the headline and actions. The aircraft keeps its full contrast. */
  background:
    linear-gradient(to bottom, rgb(11 11 12 / 0.62), transparent 16%),
    radial-gradient(48% 34% at 18% 64%, rgb(11 11 12 / 0.62), transparent 72%),
    linear-gradient(28deg, rgb(11 11 12 / 0.93) 0%, rgb(11 11 12 / 0.8) 26%, rgb(11 11 12 / 0.42) 44%, transparent 60%);
}
.hero__copy {
  position: absolute;
  left: var(--sc-gutter); right: var(--sc-gutter);
  bottom: clamp(2.25rem, 8vh, 6.5rem);
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero__title {
  position: relative; z-index: 2;
  font-size: clamp(3.5rem, 9vw, 10.25rem);
  line-height: 0.84;
  letter-spacing: -0.002em;
}
.hero__title-in { display: block; will-change: transform; }
.hero__title-in > span { display: block; }
.hero__lower { position: relative; z-index: 5; margin-top: clamp(1.25rem, 3vh, 2rem); }
.hero__lede {
  margin: 0; max-width: 34ch;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); line-height: 1.5;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.25rem, 2.6vh, 1.75rem); }
.hero__fade {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--sc-canvas); opacity: 0;
}

/* Phone and portrait tablet: the portrait plate, the aircraft larger than the
   frame, the headline above it and the actions on the floor below. */
@media (max-aspect-ratio: 4/5) {
  .hero__stage { --sw: max(100vw, 56.25svh); --sh: calc(var(--sw) * 1.77778); }
  .hero__plate { transform-origin: 50% 30%; }
  .hero__glow {
    background: radial-gradient(44% 22% at 33% 30%, rgb(255 150 70 / 0.2), transparent 70%);
  }
  .hero__craft { left: -21%; top: 45.5%; width: 132%; transform-origin: 56% 96%; }
  /* Floor haze in front of the skids, so the lede never sits on bright metal. */
  .hero__haze {
    background: linear-gradient(to top, rgb(11 11 12 / 0.94), rgb(11 11 12 / 0.78) 19%, rgb(11 11 12 / 0.3) 30%, transparent 38%);
  }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgb(11 11 12 / 0.82), rgb(11 11 12 / 0.4) 26%, transparent 38%),
      linear-gradient(to top, rgb(11 11 12 / 0.92), rgb(11 11 12 / 0.6) 22%, transparent 40%);
  }
  .hero__copy {
    top: calc(var(--nav-h) + 2.5svh); bottom: max(1.5rem, 3svh);
    justify-content: space-between;
  }
  .hero__title { font-size: clamp(3.25rem, 18.5vw, 7rem); line-height: 0.86; }
  .hero__lede { max-width: 30ch; }
}
/* Near-square windows: bias the frame toward the aircraft so it stays whole. */
@media (max-aspect-ratio: 5/4) and (min-aspect-ratio: 4/5) {
  .hero__stage { --ax: 0.68; }
  .hero__title { font-size: clamp(3.25rem, 8vw, 8rem); }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .hero__title { font-size: clamp(2.75rem, 15vw, 5rem); }
  .hero__lede { font-size: 0.9375rem; }
  .hero__craft { left: -12%; top: 36%; width: 116%; }
}

/* ================================================================== WHY ==== */
.why__stage {
  display: flex; align-items: center;
  padding-inline: var(--sc-gutter);
  background: var(--sc-canvas);
}
.why__lines { max-width: 22ch; font-size: clamp(1.875rem, 1.2rem + 3vw, 4.25rem); }
.why__line {
  font-family: var(--sc-font-display);
  font-stretch: 100%; font-weight: 500;
  font-size: 1em; line-height: 1.04; letter-spacing: -0.022em;
  margin: 0 0 0.42em;
  text-wrap: balance;
  /* An earlier line settles to the soft ink as the next one arrives, so the
     argument reads as a sequence rather than a wall. Driven from --sc-p. */
  /* Plain rgb() between --sc-ink (242 239 234) and --sc-ink-soft (167 161 153),
     so the computed colour stays a format every contrast tool can read. */
  color: rgb(calc(242 - 75 * var(--dim, 0)) calc(239 - 78 * var(--dim, 0)) calc(234 - 81 * var(--dim, 0)));
}
.why__line:nth-child(1) { --dim: clamp(0, (var(--sc-p, 0) - 0.28) * 5, 1); }
.why__line:nth-child(2) { --dim: clamp(0, (var(--sc-p, 0) - 0.54) * 5, 1); }
.why__line--turn { font-weight: 700; margin-top: 0.15em; }
.why__line--turn em { font-style: normal; color: var(--sc-accent); }
.why__note { margin-top: 1.5rem; color: var(--sc-ink-soft); }
/* The hero is fully black for its last tenth of a screen. On phones that is
   dead scroll, so the argument starts rising over it instead. */
@media (max-width: 860px) {
  .why { margin-top: -10vh; }
}

/* ============================================================= TEARDOWN ==== */
.teardown__stage { background: #050506; }
.teardown__film {
  position: absolute; inset: 0;
  --g: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--g) * 22%));
          mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--g) * 22%));
  /* While it glides it also shrinks, so its top and bottom edges feather too. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--g) * 22%)),
                      linear-gradient(to bottom, transparent 0, #000 calc(var(--g) * 9%), #000 calc(100% - var(--g) * 9%), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--g) * 22%)),
                      linear-gradient(to bottom, transparent 0, #000 calc(var(--g) * 9%), #000 calc(100% - var(--g) * 9%), transparent 100%);
          mask-composite: intersect;
}
.teardown__film picture { display: contents; }
.teardown__still {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; pointer-events: none;
}
.teardown__still:not([src]) { display: none; }
.teardown__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgb(5 5 6 / 0.7), transparent 22%);
}
.teardown__leaders {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
.teardown__leaders line { stroke: rgb(242 239 234 / 0.62); stroke-width: 1; fill: none; }
.teardown__leaders .dot { fill: var(--sc-accent); }
.teardown__leaders .ring { fill: none; stroke: var(--sc-accent); stroke-opacity: 0.55; stroke-width: 1; }
.teardown__leaders .num { fill: var(--sc-accent-ink); font: 600 11px/1 var(--sc-font-mono); text-anchor: middle; dominant-baseline: central; }

/* Trail anchor: the aircraft arrives top-left, so the title holds the
   empty upper right until the parts start to move. */
.teardown__head {
  position: absolute; z-index: 5;
  right: var(--sc-gutter); top: calc(var(--nav-h) + clamp(1.5rem, 6vh, 4rem));
  text-align: right;
}
.teardown__title { font-size: clamp(3.25rem, 6.4vw, 7rem); margin-top: 0.875rem; }
.teardown__title > span { display: block; }

.parts { list-style: none; margin: 0; padding: 0; }
.part {
  position: absolute; z-index: 5; left: 0; top: 0;
  width: max-content; max-width: 16.5rem;
  text-shadow: 0 1px 14px rgb(5 5 6 / 0.9), 0 0 2px rgb(5 5 6 / 0.8);
}
.part--end { text-align: right; }
.part__num { display: none; }
.part__name {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: 1.0625rem; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sc-ink);
}
.part__text { margin: 0.3rem 0 0; font-size: 0.875rem; line-height: 1.42; color: var(--sc-ink-soft); }

.verdict {
  position: absolute; z-index: 5;
  left: var(--sc-gutter); top: 50%; translate: 0 -44%;
  width: min(29rem, 36vw);
}
.verdict__title { font-size: clamp(2.75rem, 5.2vw, 5.5rem); }
.verdict__table {
  width: 100%; margin: clamp(1.25rem, 3vh, 2rem) 0 1rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.verdict__table th, .verdict__table td {
  padding: 0.7rem 0; text-align: left; font-weight: 400;
  border-bottom: 1px solid var(--sc-hairline);
}
.verdict__table thead th {
  font: 500 0.6875rem/1 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sc-ink-soft); padding-bottom: 0.75rem;
}
.verdict__table thead th:nth-child(2) { color: var(--sc-accent); }
.verdict__table tbody th { color: var(--sc-ink-soft); padding-right: 1rem; }
.verdict__table td { width: 30%; color: var(--sc-ink-soft); }
.verdict__table td:nth-child(2) { color: var(--sc-ink); font-weight: 600; }
.verdict__table td.yes::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.3em; margin: 0 0.5em 0.18em 0;
  border: solid var(--sc-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.verdict .footnote { margin-bottom: 1.5rem; }

/* Phone: a numbered legend replaces the leader labels, and the verdict rides
   the lower half while the aircraft lifts out of its way. */
.is-compact .teardown__scrim {
  background:
    linear-gradient(to bottom, rgb(5 5 6 / 0.75), transparent 20%),
    linear-gradient(to top, rgb(5 5 6 / 0.94), rgb(5 5 6 / 0.7) 18%, transparent 34%);
}
.is-compact .teardown__film {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 calc(var(--g) * 30%)),
                      linear-gradient(to right, transparent 0, #000 calc(var(--g) * 12%), #000 calc(100% - var(--g) * 12%), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to top, transparent 0, #000 calc(var(--g) * 30%)),
                      linear-gradient(to right, transparent 0, #000 calc(var(--g) * 12%), #000 calc(100% - var(--g) * 12%), transparent 100%);
          mask-composite: intersect;
}
.is-compact .teardown__head { top: calc(var(--nav-h) + 2svh); left: var(--sc-gutter); right: auto; text-align: left; }
.is-compact .teardown__title { font-size: clamp(2.75rem, 14vw, 4.5rem); margin-top: 0.5rem; }
.is-compact .parts {
  position: absolute; z-index: 5;
  left: var(--sc-gutter); right: var(--sc-gutter); bottom: max(1.25rem, 3svh);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem;
}
.is-compact .part {
  position: relative; width: auto; max-width: none; text-align: left;
  display: flex; align-items: center; gap: 0.625rem;
  transform: none !important;
}
.is-compact .part__num {
  display: inline-grid; place-items: center; flex: none;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 0.6875rem/1 var(--sc-font-mono);
}
.is-compact .part__name { font-size: 0.9375rem; }
.is-compact .part__text { display: none; }
.is-compact .verdict {
  left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: max(1rem, 2.5svh);
  width: auto; translate: none;
}
.is-compact .verdict__title { font-size: clamp(2.25rem, 11vw, 3.5rem); }
.is-compact .verdict__table { font-size: 0.8125rem; margin: 0.75rem 0 0.5rem; }
.is-compact .verdict__table th, .is-compact .verdict__table td { padding: 0.45rem 0; }
.is-compact .verdict .footnote { font-size: 0.75rem; margin-bottom: 0.75rem; }

/* ============================================================== MISSION ==== */
.mission__stage { background: var(--sc-canvas); }
.mission__map {
  position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: 36%;
  overflow: hidden; background: #1a1712;
}
.mission__world {
  position: absolute; left: 0; top: 0;
  width: 2560px; height: 1440px;
  transform-origin: 0 0;
  /* No will-change: it pins Chrome's raster scale at the close-up zoom, and
     the region pull-back then needs more tiles at that scale than the GPU
     budget holds, so parts of the map paint as blank blocks. translate3d
     still composites the layer; without the hint it re-rasters as it zooms. */
}
/* The region aerial is a 2.5x pull-back with the wide aerial at its centre,
   so in the wide aerial's own coordinates it starts at -1945,-1000. It stays
   unpainted until the close-up hands over to the wide view. */
.mission__region {
  position: absolute; left: -1945px; top: -1000px; width: 6400px; height: 3600px; max-width: none;
  visibility: hidden;
}
.mission__wide {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  /* Feathered so it dissolves into the same ground in the region aerial. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent),
                      linear-gradient(to bottom, transparent, #000 4.4%, #000 95.6%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent),
                      linear-gradient(to bottom, transparent, #000 4.4%, #000 95.6%, transparent);
          mask-composite: intersect;
}
.mission__ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mission__close {
  position: absolute;
  left: 888px; top: 479px; width: 701px; height: 395px;
  /* Feathered on all four sides so the close aerial dissolves into the wide
     one during the pull-back instead of showing a hard rectangle. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
          mask-composite: intersect;
}
.mission__close img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.mission__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%;
}
.mission__map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px 10px rgb(11 11 12 / 0.55);
}
.mission__ov .plan { fill: none; stroke: rgb(242 239 234 / 0.5); stroke-width: 1.25; stroke-dasharray: 5 6; }
.mission__ov .track { fill: none; stroke: #FF8A3D; stroke-opacity: 0.9; stroke-width: 1.25; stroke-linejoin: round; }
.mission__ov .swath { fill: none; stroke: #FF6600; stroke-opacity: 0.36; stroke-linecap: butt; }
.mission__ov .ferry { fill: none; stroke: rgb(242 239 234 / 0.75); stroke-width: 1.5; stroke-dasharray: 3 5; }
.mission__ov .edge { fill: none; stroke: var(--sc-accent); stroke-width: 1.5; }
.mission__ov .base { fill: var(--sc-canvas); stroke: var(--sc-ink); stroke-width: 1.5; }
.mission__ov .marker-body { fill: var(--sc-accent); stroke: var(--sc-canvas); stroke-width: 1.5; }
.mission__ov .marker-ring { fill: none; stroke: var(--sc-accent); stroke-opacity: 0.5; stroke-width: 1.25; }

.mission__panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem);
  padding: 0 var(--sc-gutter);
}
.mission__title { display: grid; font-size: clamp(2.25rem, 3.9vw, 4.25rem); line-height: 0.9; }
/* One headline, two states: the swarm line replaces the single-drone line in
   the same cell as the camera pulls back over the region. */
.mission__say { grid-area: 1 / 1; display: block; }
.mission__say > span { display: block; }
.mission__say > span:first-child { color: var(--sc-accent); }
.mission__say--swarm { opacity: 0; }
.readout { border-left: 1px solid var(--sc-hairline); padding-left: clamp(1.25rem, 2.4vw, 2.5rem); }
.readout__num {
  margin: 0 0 0.5rem;
  font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(3.5rem, 7.2vw, 8rem); line-height: 0.82;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.readout__meta { margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.readout__meta > div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; }
.readout__meta dt { font: 500 0.6875rem/1.2 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft); }
.readout__meta dd { margin: 0; font-size: 0.9375rem; color: var(--sc-ink); }
.mission__side .footnote { margin-bottom: 1rem; }

@media (max-width: 860px) {
  .mission__map { bottom: 46%; }
  .mission__panel {
    height: 46%;
    grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    align-content: center; align-items: end; gap: 1rem 1.25rem;
    padding-block: 1rem max(1rem, 2svh);
  }
  .mission__title { grid-column: 1 / -1; font-size: clamp(2rem, 9vw, 3rem); }
  .readout { border: 0; padding: 0; }
  .readout__num { font-size: clamp(3.25rem, 17vw, 5rem); }
  .mission__side .footnote { display: none; }
  .readout__meta { gap: 0.375rem; margin-bottom: 0.75rem; }
  .readout__meta > div { grid-template-columns: 4.25rem 1fr; }
  .readout__meta dd { font-size: 0.875rem; }
}

/* ================================================================ FLEET ==== */
.fleet__stage { display: flex; align-items: center; background: var(--sc-canvas); }
.fleet__rail {
  display: flex; align-items: center;
  padding-inline: var(--sc-gutter);
  --slab-h: min(72svh, 46rem);
  --slab-w: clamp(16rem, 29vw, 28.5rem);
  --cut: calc(var(--slab-h) * var(--slash));
}
.fleet__lead { flex: none; width: clamp(18rem, 30vw, 29rem); padding-right: 3vw; }
.fleet__title { font-size: clamp(2.75rem, 5.2vw, 5.75rem); }
.fleet__title > span { display: block; }
.fleet__lead p { margin: 1.5rem 0 0; max-width: 30ch; color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.55; }
.slab {
  flex: none; position: relative; display: block;
  width: var(--slab-w); height: var(--slab-h);
  margin-left: calc(var(--cut) * -1 + 0.875rem);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  color: var(--sc-ink); text-decoration: none;
  background: var(--sc-surface);
  outline: none;
}
.fleet__lead + .slab { margin-left: 0; }
.slab__media { position: absolute; inset: 0 -14%; display: block; }
.slab__media img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: translate3d(calc((var(--sc-p, 0.5) - 0.5) * -9%), 0, 0) scale(1.02);
  transition: scale 420ms var(--sc-ease-out);
}
.slab::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(11 11 12 / 0.9), rgb(11 11 12 / 0.5) 26%, transparent 46%);
}
.slab__label {
  position: absolute; z-index: 1;
  /* The next slab overlaps this one's lower right along the diagonal, so the
     label stops where the visible face does. On the left it starts clear of
     the cut at the height of a two-line name. */
  left: calc(1.25rem + 6rem * var(--slash)); bottom: 1.375rem; right: calc(var(--cut) * 0.92 + 0.5rem);
  display: grid; gap: 0.4rem;
}
.slab__name {
  font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(1.375rem, 1.6vw, 1.75rem); line-height: 1; text-transform: uppercase;
  padding-bottom: 0.45rem;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 2rem 2px no-repeat;
  transition: background-size 240ms var(--sc-ease-out);
}
.slab__text { font-size: 0.875rem; line-height: 1.4; color: color-mix(in oklab, var(--sc-ink) 82%, transparent); max-width: 24ch; }
@media (hover: hover) and (pointer: fine) {
  .slab:hover .slab__media img { scale: 1.05; }
  .slab:hover .slab__name { background-size: 100% 2px; }
}
/* clip-path swallows an outline, so focus is drawn inside the shape. */
.slab:focus-visible .slab__name { background-size: 100% 3px; }
.slab:focus-visible::after {
  background: linear-gradient(to top, rgb(11 11 12 / 0.92), rgb(11 11 12 / 0.55) 30%, transparent 50%),
              linear-gradient(var(--sc-accent), var(--sc-accent)) 0 0 / 100% 4px no-repeat;
}
.fleet__end { flex: none; width: clamp(16rem, 24vw, 22rem); padding-left: calc(var(--cut) * 0.5 + 2.5rem); padding-right: 2vw; }
.fleet__end p { margin: 0 0 1.25rem; color: var(--sc-ink-soft); line-height: 1.55; }

/* Items arrive in sequence rather than sliding in as one sheet. The first
   slab is exempt so the act opens with content already present. */
@media (prefers-reduced-motion: no-preference) {
  .slab { opacity: clamp(0.55, calc(var(--sc-p, 0) * 4.2 - var(--i) * 0.7 + 1.15), 1); }
}

@media (max-width: 860px) {
  .fleet__rail { --slab-h: min(60svh, 34rem); --slab-w: 74vw; }
  .fleet__lead { width: 78vw; padding-right: 8vw; }
  .fleet__end { width: 72vw; }
}

/* ================================================================= DUSK ====
   The building at dusk, opening the close. The front plane is the photograph
   with its sky cut away along the roofline; the sky plane behind it is the
   same photograph. Only the front moves, so the sky always shows sky above
   the roof. Night closes in from the top, and the lot fades to black where
   the ticker lands. The fades are a mask, not an overlay, so no edge of the
   photograph can show at a fractional scroll position. */
.dusk { position: relative; margin: clamp(4rem, 8vw, 7rem) 0 0; }
.dusk__media {
  position: relative; overflow: hidden;
  height: max(26rem, min(100svh, 56.25vw));
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.55) 16%, #000 34% 50%, rgb(0 0 0 / 0.64) 62%, rgb(0 0 0 / 0.12) 76%, transparent 88%);
          mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.55) 16%, #000 34% 50%, rgb(0 0 0 / 0.64) 62%, rgb(0 0 0 / 0.12) 76%, transparent 88%);
}
.dusk__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 40%;
}
.dusk__front { transform: translate3d(0, calc(var(--sc-p, 0.5) * -14%), 0); will-change: transform; }
/* The ticker rises out of the lot. */
.dusk + .close { position: relative; padding-top: 0; margin-top: calc(-1 * clamp(6rem, 13vw, 12rem)); }
@media (max-width: 860px) {
  .dusk__media { height: 64svh; }
  .dusk__media img { object-position: 96% 50%; }
}

/* ================================================================ CLOSE ==== */
.close { padding-top: clamp(5rem, 12vw, 10rem); }
.close__wrap {
  max-width: calc(96rem + 2 * var(--sc-gutter)); margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  row-gap: clamp(4rem, 8vw, 7rem);
}
.close__main > .t-label { color: var(--sc-ink-soft); }
.close__ticker {
  margin: 0.5rem 0 0 !important;
  font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(5rem, 14vw, 13.5rem); line-height: 0.8; letter-spacing: -0.01em;
  color: var(--sc-accent);
}
.close__thesis {
  margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-family: var(--sc-font-display); font-weight: 500; font-stretch: 100%;
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem); line-height: 1.18; letter-spacing: -0.015em;
  max-width: 26ch; text-wrap: balance;
}
.close__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem !important; }
.close__ir { align-self: end; }
/* A list of destinations, one per ruled row. The home close uses it for the
   investor resources; interior pages use it as .linklist. */
.close__ir, .linklist { display: flex; flex-direction: column; border-top: 1px solid var(--sc-hairline-strong); }
.close__ir a, .linklist a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 0.75rem 0;
  border-bottom: 1px solid var(--sc-hairline);
  color: var(--sc-ink); text-decoration: none; font-size: 1rem;
  transition: color 160ms var(--sc-ease-out), padding 0ms;
}
@media (hover: hover) and (pointer: fine) {
  .close__ir a:hover, .linklist a:hover { color: var(--sc-accent); }
}
.close__facts, .close__people { border-top: 1px solid var(--sc-hairline-strong); padding-top: 1.25rem; }
.facts { margin: 1.25rem 0 0; }
.facts > div {
  display: grid; grid-template-columns: minmax(7rem, 0.38fr) 1fr; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.facts dt { font: 500 0.75rem/1.5 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.facts dd { margin: 0; font-size: 1rem; }
.people { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: grid; gap: 1.5rem; }
.people p { margin: 0; }
.people__name { font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800; font-size: 1.375rem; text-transform: uppercase; line-height: 1.1; word-spacing: 0.06em; }
.people__role { color: var(--sc-accent); font-size: 0.9375rem; margin-top: 0.2rem !important; }
.people__note { color: var(--sc-ink-soft); font-size: 0.9375rem; line-height: 1.5; margin-top: 0.4rem !important; max-width: 40ch; }

.foot { margin-top: clamp(6rem, 12vw, 10rem); padding-inline: var(--sc-gutter); overflow: hidden; --foot-w: min(100vw - 2 * var(--sc-gutter), 96rem); }
.foot__cols {
  max-width: 96rem; margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.foot__col { display: grid; align-content: start; gap: 0.7rem; }
.foot__col .t-label { margin-bottom: 0.4rem; }
.foot__col a { color: var(--ink-mid); text-decoration: none; font-size: 0.9375rem; width: fit-content; }
@media (hover: hover) and (pointer: fine) {
  .foot__col a:hover { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); }
}
/* Set so the wordmark spans the content width exactly: its advance is
   6.32em at this width and weight (measured in the browser). */
.foot__mark {
  margin: 0 auto; max-width: 96rem;
  font-size: calc(var(--foot-w) / 6.33);
  line-height: 0.78; letter-spacing: -0.005em;
  white-space: nowrap;
}
.foot__legal {
  max-width: 96rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.75rem 0 max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.8125rem; color: var(--sc-ink-soft);
}
.foot__legal p { margin: 0; }
.foot__legal nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot__legal a { color: var(--sc-ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .foot__legal a:hover { color: var(--sc-ink); }
}
/* 16px glyphs in 40px targets, 24px apart like the legal links. The end
   target overhangs by its padding so the glyph sits on the content edge. */
.foot__legal .foot__social { gap: 0; }
.foot__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); transition: color 160ms var(--sc-ease-out); }
.foot__social svg { width: 1rem; height: 1rem; fill: currentColor; }
.foot__social a:focus-visible { outline: 1px solid var(--sc-accent); outline-offset: -4px; }
/* One row while it fits: copyright left, legal links and icons right. */
@media (min-width: 1081px) {
  .foot__legal p + nav { margin-left: auto; }
  .foot__social a:last-child { margin-right: -12px; }
}
@media (max-width: 1080px) {
  .foot__legal .foot__social { flex-basis: 100%; margin-left: -12px; }
}

@media (max-width: 860px) {
  .close__wrap { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero__plate, .hero__craft, .hero__title-in, .hero__haze, .teardown__film { will-change: auto; }
  .slab__media img { transform: none; }
  .dusk__front { transform: none; will-change: auto; }
}