/* ICS website styles. Visual system: DESIGN.md.
   World: real field footage plus engineering evidence, on white and navy.
   Order: tokens, base, header, page sections, components, page-specific blocks, motion. */

@import url("../fonts/fonts.css");

:root {
  /* Stand materials */
  --wall: oklch(0.985 0.004 250);
  --wall-2: oklch(0.955 0.008 250);
  --floor: oklch(0.93 0.01 250);
  --surface: oklch(0.995 0.002 250);
  --surface-side: oklch(0.9 0.01 250);
  --panel: oklch(0.94 0.008 250);
  --line-strong: oklch(0.82 0.012 250);
  --fascia: oklch(0.26 0.075 258);
  --fascia-2: oklch(0.32 0.08 258);

  /* Ink */
  --ink: oklch(0.21 0.035 258);
  --ink-2: oklch(0.38 0.035 258);
  --ink-on-dark: oklch(0.97 0.01 250);
  --ink-on-dark-2: oklch(0.84 0.03 250);
  --rule: oklch(0.86 0.012 250);

  /* Brand blue: every working control */
  --blue: oklch(0.52 0.17 256);
  --blue-hover: oklch(0.45 0.17 256);
  --blue-soft: oklch(0.94 0.03 250);

  /* Mission zones (carpet colours) */
  --zone-mapping: oklch(0.56 0.12 170);
  --zone-lidar: oklch(0.52 0.16 300);
  --zone-thermal: oklch(0.6 0.18 38);
  --zone-isr: oklch(0.62 0.13 75);
  --zone-tactical: oklch(0.47 0.07 140);

  /* Data marks, one rule for every chart (D-030): blue = ICS aircraft, orange = the multirotor reference.
     Pair validated with the dataviz palette check on the light wall and the navy panel. */
  --data-ics: var(--blue);
  --data-ics-on-dark: #2a9ee0;
  --data-ref: #c97f45;
  --data-track: color-mix(in oklch, var(--rule) 55%, transparent);
  --data-end: 4px;

  --warn-soft: oklch(0.96 0.04 85);
  --warn-ink: oklch(0.42 0.09 70);

  /* Type */
  --font-display: "Montserrat", "Prompt Display", system-ui, sans-serif;
  --font-body: "Montserrat", "Prompt", system-ui, "Leelawadee UI", sans-serif;
  --step--2: 0.8rem;
  --step--1: clamp(0.9rem, 0.88rem + 0.1vw, 0.95rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.33rem + 0.8vw, 1.95rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.8rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.6vw, 4rem);

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --max: 1320px;

  /* Depth: overhead stand lighting */
  --shadow-low: 0 18px 28px -18px oklch(0.25 0.05 258 / 0.35);
  --shadow-desk: 0 2px 4px oklch(0.25 0.05 258 / 0.06), 0 22px 40px -20px oklch(0.25 0.05 258 / 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-sticky: 10; --z-menu: 20; --z-toast: 40;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
:lang(en) body, body:lang(en) { line-height: 1.6; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 0; text-wrap: balance; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
li, dd, figcaption, .tile__tag { text-wrap: pretty; }
/* Any h2 without its own rule joins the section ladder (zero specificity, so every class rule wins). */
:where(h2) { font-size: var(--step-3); }
.nw { white-space: nowrap; }
a { color: var(--blue); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hover); }
::selection { background: oklch(0.85 0.08 250); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -4rem; background: var(--ink); color: #fff; padding: var(--s-2) var(--s-4); z-index: var(--z-toast); }
.skip:focus { top: var(--s-4); }
.skip:hover { color: #fff; }
/* Scrollbar: thin pill thumb, no arrow buttons. WebKit/Blink get the pseudo-elements; Firefox the standard props. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-2); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0.6em 1.3em;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); line-height: 1.2;
  border-radius: 3px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--wall); }
.btn--on-dark { border-color: var(--ink-on-dark-2); color: var(--ink-on-dark); }
.btn--on-dark:hover { background: var(--ink-on-dark); color: var(--fascia); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 1.1em; height: 1.1em; }

/* ── Header: one navy bar. Brand, text nav with drop panels, language, demo CTA. ── */
.fascia { background: var(--fascia); color: var(--ink-on-dark); position: sticky; top: 0; z-index: var(--z-sticky); }
.fascia__bar { display: flex; align-items: center; gap: var(--s-6); min-height: 68px; }
.brand { display: flex; align-items: center; gap: var(--s-2); color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand__mark { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: 0.06em; white-space: nowrap; line-height: 1; }
.brand__logo { display: block; height: 44px; width: auto; }
.brand__name { font-size: 1.1rem; font-weight: 500; color: var(--ink-on-dark); white-space: nowrap; }
@media (max-width: 1280px) { .brand__name { display: none; } }
.nav { flex: 1; display: flex; align-items: center; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-1); }
.nav__item { position: relative; }
.nav__link { display: flex; align-items: center; gap: 0.35em; min-height: 68px; padding: 0 var(--s-3); color: var(--ink-on-dark); text-decoration: none; font-weight: 500; font-size: var(--step--1); position: relative; }
.nav__link:hover { color: #fff; }
.nav__item--has > .nav__link::after { content: ""; width: 0.38em; height: 0.38em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -0.15em; opacity: 0.7; }
.nav__link[aria-current="page"]::before { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 14px; height: 2px; background: oklch(0.78 0.12 250); }
.nav__panel { position: absolute; top: calc(100% - 6px); left: 0; min-width: 22rem; padding: var(--s-3); background: var(--wall); color: var(--ink); border-radius: 10px; box-shadow: 0 24px 48px -16px oklch(0 0 0 / 0.4), 0 2px 6px oklch(0 0 0 / 0.12); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity 180ms var(--ease-out), translate 220ms var(--ease-out), visibility 0s 220ms; z-index: var(--z-menu); }
.nav__item--has:hover > .nav__panel, .nav__item--has:focus-within > .nav__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.nav__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav__panel a { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: 6px; color: var(--ink); text-decoration: none; }
.nav__panel a:hover, .nav__panel a:focus-visible { background: var(--blue-soft); }
.nav__panel strong { font-weight: 500; font-size: var(--step-0); }
.nav__panel span { font-size: var(--step--1); color: var(--ink-2); }
.nav__item:first-child .nav__panel ul { grid-template-columns: 1fr 1fr; min-width: 34rem; }
.nav__phone { display: none; }
.fascia__meta { display: flex; align-items: center; gap: var(--s-4); font-size: var(--step--1); margin-left: auto; }
.lang { display: inline-flex; border: 1px solid oklch(1 0 0 / 0.3); border-radius: 4px; overflow: hidden; }
.lang a { padding: 0.25em 0.65em; font-weight: 500; color: var(--ink-on-dark); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--ink-on-dark); color: var(--fascia); }
.btn--sm { min-height: 40px; padding: 0.4em 1em; font-size: var(--step--1); }
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; background: none; border: 1px solid oklch(1 0 0 / 0.3); border-radius: 6px; color: var(--ink-on-dark); cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { position: absolute; left: 12px; width: 18px; height: 1.5px; background: currentColor; content: ""; transition: rotate 200ms var(--ease-out), top 200ms var(--ease-out); }
.menu-toggle span { top: 21px; } .menu-toggle span::before { left: 0; top: -6px; } .menu-toggle span::after { left: 0; top: 6px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; rotate: 45deg; } .menu-toggle[aria-expanded="true"] span::after { top: 0; rotate: -45deg; }

@media (max-width: 1080px) {
  .brand__name { display: none; }
  .menu-toggle { display: inline-block; }
  .nav { position: fixed; inset: 68px 0 0 0; display: none; flex-direction: column; align-items: stretch; overflow-y: auto; background: var(--fascia); padding: var(--s-4) var(--gutter) var(--s-8); }
  .nav[data-open="true"] { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { min-height: 52px; font-size: var(--step-1); border-bottom: 1px solid oklch(1 0 0 / 0.12); padding: 0; }
  .nav__item--has > .nav__link::after, .nav__link[aria-current="page"]::before { display: none; }
  .nav__link[aria-current="page"] { color: oklch(0.8 0.11 245); }
  .nav__panel, .nav__item:first-child .nav__panel ul { position: static; opacity: 1; visibility: visible; translate: none; min-width: 0; background: none; box-shadow: none; padding: var(--s-2) 0 var(--s-3); grid-template-columns: 1fr; }
  .nav__panel a { color: var(--ink-on-dark-2); padding: var(--s-2) 0; }
  .nav__panel a:hover { background: none; color: #fff; }
  .nav__panel strong { font-size: var(--step-0); color: var(--ink-on-dark); }
  .nav__panel span { display: none; }
  .nav__phone { display: block; margin-top: var(--s-6); color: var(--ink-on-dark-2); }
  .nav__phone a { color: var(--ink-on-dark); }
}
@media (max-width: 520px) { .lang { display: none; } .nav[data-open="true"] ~ .fascia__meta .lang { display: inline-flex; } .fascia__cta { padding-inline: 0.8em; } }

/* ── The stand (home hero) ───────────────────────────────────────────── */
.stand { position: relative; background: var(--floor); }
.backwall { position: relative; min-height: clamp(380px, 56vh, 620px); overflow: hidden; background: var(--fascia-2); }

.backwall::after { /* print scrim so the backwall copy reads */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, oklch(0.2 0.06 258 / 0) 45%, oklch(0.2 0.06 258 / 0.85) 100%),
    linear-gradient(90deg, oklch(0.2 0.06 258 / 0.82) 0%, oklch(0.2 0.06 258 / 0.5) 45%, oklch(0.2 0.06 258 / 0) 72%);
}
.backwall__copy { position: relative; z-index: 1; padding-block: var(--s-8) calc(var(--s-9) + var(--s-6)); color: var(--ink-on-dark); }
/* Split hero: copy left, real flight footage framed right (no scrim over the video). */
.backwall--split { background: var(--fascia); }
.backwall--split::after { display: none; }
.backwall--split .backwall__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; }
.backwall__media .clip { border-radius: 6px; box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.6); }
@media (max-width: 900px) { .backwall--split .backwall__copy { grid-template-columns: 1fr; } }
.backwall__text { max-width: 42rem; }
.backwall__copy h1 { font-size: var(--step-4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.backwall__copy p { margin-top: var(--s-5); color: var(--ink-on-dark-2); max-width: 38rem; }
.made-in { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: var(--ink-on-dark); padding: 0.25em 0; }
.made-in svg { width: 1.3em; height: auto; }

.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s-3) var(--s-5); margin: var(--s-4) 0 0; }
.readout div { border-top: 1px solid var(--line-strong); padding-top: var(--s-2); }
.readout dt { font-size: var(--step--1); color: var(--ink-2); line-height: 1.4; }
.readout dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); font-variant-numeric: tabular-nums; line-height: 1.3; }
.readout dd small { font-size: 0.7em; font-weight: 500; margin-left: 0.15em; color: var(--ink-2); }
.readout sup, .spec sup { font-size: 0.65em; color: var(--blue); }
.condition { margin-top: var(--s-3); font-size: var(--step--2); color: var(--ink-2); line-height: 1.55; max-width: 75ch; }

/* Demo desk: the engineer's counter with a working calculator */
/* Square corners: it is a counter top, edged in the fascia navy. */
.desk { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-desk); padding: var(--s-5); border-top: 6px solid var(--fascia); }
.desk h2 { font-size: var(--step-1); }
.desk > p { color: var(--ink-2); font-size: var(--step--1); margin-top: var(--s-2); }
.field { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
.field label { font-weight: 600; font-size: var(--step--1); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--wall); border: 1px solid var(--line-strong); border-radius: 3px;
  min-height: 44px; padding: 0.45em 0.7em; width: 100%;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-2); }
.field .hint { font-size: var(--step--1); color: var(--ink-2); }
.field .error { font-size: var(--step--1); color: oklch(0.5 0.17 27); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }
.desk__result { margin-top: var(--s-5); padding: var(--s-4); background: var(--blue-soft); border-radius: 3px; }
.desk__result[hidden] { display: none; }
.desk__result h3 { font-size: var(--step-0); }
.desk__result dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0; }
.desk__result dt { color: var(--ink-2); font-size: var(--step--1); }
.desk__result dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.desk__result .basis { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.desk .btn { width: 100%; margin-top: var(--s-5); }

/* ── Zones: each section is a zone of the stand ──────────────────────── */
.zone { padding-block: clamp(3rem, 2.2rem + 2.4vw, 4.5rem) clamp(2.5rem, 2rem + 1.8vw, 3.75rem); }
/* Back-to-back sections on the same background read as one surface: the previous bottom padding is the gap. */
.zone--dark + .zone--dark:not(.spin-zone), .zone--wall-2 + .zone--wall-2:not(.spin-zone),
.zone:not(.zone--dark, .zone--wall-2) + .zone:not(.zone--dark, .zone--wall-2, .spin-zone) { padding-top: 0; }
.stand + .zone--dark { padding-top: var(--s-5); }
.zone__head > :empty { display: none; }
.zone--wall-2 { background: var(--wall-2); }
.zone--dark { background: var(--fascia); color: var(--ink-on-dark); }
.zone--dark a:not(.btn) { color: oklch(0.82 0.08 250); }
.zone--dark a:not(.btn):hover { color: var(--ink-on-dark); }
.zone--dark .desk a:not(.btn), .zone--dark .table-wrap a { color: var(--blue); }
.zone__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 60rem; }
.zone__head h2 { font-size: var(--step-3); letter-spacing: -0.015em; line-height: 1.2; }
.zone__head p { color: var(--ink-2); max-width: 62ch; font-size: var(--step-1); line-height: 1.6; text-wrap: balance; }
.zone--dark .zone__head p { color: var(--ink-on-dark-2); }
@media (max-width: 860px) { .zone__head p { font-size: var(--step-0); } }

/* Mission floor: carpet tiles per mission */
.missions { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.mission { display: grid; grid-template-columns: 2.6rem minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-6); border-bottom: 1px solid var(--rule); align-items: start; }

.mission h3 { font-size: var(--step-2); }
.mission h3 a { color: inherit; text-decoration: none; }
.mission h3 a:hover { color: var(--blue); }
.mission p { color: var(--ink-2); }
.chips { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Certification marks under the software chips on an aircraft page (CertMarks). */
.pdp-marks { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.pdp-marks img { display: block; width: auto; height: 5.75rem; }
.chips li { font-size: var(--step--1); border: 1px solid var(--rule); background: var(--wall); padding: 0.3em 0.75em; border-radius: 4px; line-height: 1.4; }
.chips--lg li { font-size: var(--step-0); padding: 0.45em 0.95em; }

@media (max-width: 960px) {
  .mission { grid-template-columns: 2.2rem 1fr; }

  .mission > :nth-child(n + 3) { grid-column: 2; }
}
[data-zone="mapping"] { --zone: var(--zone-mapping); }
[data-zone="lidar"] { --zone: var(--zone-lidar); }
[data-zone="thermal"] { --zone: var(--zone-thermal); }
[data-zone="isr"] { --zone: var(--zone-isr); }
[data-zone="tactical"] { --zone: var(--zone-tactical); }

/* Fleet line-up: every aircraft at one shared scale on one floor line */
/* --scale: width per mm of wingspan. The four fixed-wing aircraft (≈12.4 m) share one centred row and shrink to fit it down to 800px; the two multirotors sit on a second row at the same scale. Below 800px the rows wrap. */
.lineup { --scale: min(0.09px, calc((100vw - 180px) / 12400)); display: grid; gap: var(--s-7); padding-bottom: var(--s-4); }
.lineup__floor { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: var(--s-5) clamp(1rem, 2vw, 2rem); }
.lineup__item { flex: 0 0 auto; width: calc(var(--span) * var(--scale)); min-width: 80px; display: grid; text-decoration: none; color: inherit; }
@media (max-width: 800px) { .lineup { --scale: 0.05px; } }
.lineup__item img { width: 100%; filter: drop-shadow(0 16px 12px oklch(0.2 0.05 258 / 0.22)); transition: transform 400ms var(--ease-out); }
.lineup__item:hover img { transform: translateY(-6px); }
.lineup__label { margin-top: var(--s-3); text-align: center; white-space: nowrap; }
.lineup__label strong { display: block; font-family: var(--font-display); font-size: var(--step-0); }
.lineup__label span { font-size: var(--step--1); color: var(--ink-2); }
.lineup__item:hover strong { color: var(--blue); }
.ruler { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); font-size: var(--step--1); color: var(--ink-2); }
.ruler__bar { height: 8px; width: calc(1000 * var(--scale)); background: repeating-linear-gradient(90deg, var(--ink) 0 50%, var(--wall) 50% 100%); border: 1px solid var(--ink); }
@media (prefers-reduced-motion: reduce) { .lineup__item:hover img { transform: none; } }

/* System chain diagram */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); counter-reset: none; }
.chain li { position: relative; background: var(--fascia-2); border: 1px solid oklch(0.45 0.08 258); border-radius: 3px; padding: var(--s-4); text-align: center; }
.chain li strong { display: block; font-family: var(--font-display); font-size: var(--step-0); color: var(--ink-on-dark); }
.chain li span { font-size: var(--step--1); color: var(--ink-on-dark-2); line-height: 1.55; display: block; margin-top: var(--s-2); }
.chain li:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--s-3)); top: 50%; width: var(--s-3); height: 2px; background: oklch(0.7 0.1 250); }
.chain--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .chain, .chain--4 { grid-template-columns: 1fr; }
  .chain li:not(:last-child)::after { right: auto; left: 50%; top: 100%; width: 2px; height: var(--s-3); }
}
/* Software: product tour. Big name, a tagline with one highlighted phrase, a short checked
   feature list, and the real screen in a display frame with tabs that swap it. Alternates sides. */
.sw { display: grid; gap: var(--s-9); margin-top: var(--s-8); }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-8); align-items: center; }
.product--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.product--flip .product__copy { order: 2; }
.product__copy h2 { font-size: var(--step-3); color: var(--ink-on-dark); letter-spacing: -0.02em; line-height: 1.05; }
.product__subtitle { display: block; margin-top: var(--s-2); font-size: var(--step-1); font-weight: 500; letter-spacing: 0; color: var(--ink-on-dark-2); }
.product__tag { margin-top: var(--s-4); font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.3; color: var(--ink-on-dark); text-wrap: balance; }
.product__copy > p:not(.product__tag) { margin-top: var(--s-4); color: var(--ink-on-dark-2); max-width: 46ch; }
.product__feats { list-style: none; padding: 0; margin: var(--s-6) 0 0; border-top: 1px solid oklch(1 0 0 / 0.14); }
.product__feats li { position: relative; padding: 0.75em 0 0.75em 2em; border-bottom: 1px solid oklch(1 0 0 / 0.14); color: var(--ink-on-dark); font-size: var(--step--1); }
.product__feats li::before { content: ""; position: absolute; left: 0.35em; top: 0.95em; width: 0.4em; height: 0.75em; border: solid oklch(0.78 0.12 250); border-width: 0 2px 2px 0; rotate: 45deg; }
.stage { position: relative; }
.stage::before { content: ""; position: absolute; inset: 6% 4% 20%; background: radial-gradient(closest-side, oklch(0.55 0.17 256 / 0.5), transparent); filter: blur(40px); pointer-events: none; }
.stage__screen { position: relative; margin: 0; padding: 10px; background: oklch(0.15 0.03 258); border: 1px solid oklch(1 0 0 / 0.14); border-radius: 14px; box-shadow: 0 50px 90px -40px oklch(0 0 0 / 0.8); }
.stage__screen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; transition: opacity 250ms var(--ease-out); }
.stage__tabs { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.stage__tabs button { display: grid; gap: var(--s-2); align-content: start; padding: 6px; font: inherit; font-size: var(--step--1); line-height: 1.4; text-align: center; color: var(--ink-on-dark-2); background: transparent; border: 1px solid oklch(1 0 0 / 0.14); border-radius: 8px; cursor: pointer; transition: border-color 200ms, background 200ms, color 200ms; }
.stage__tabs button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; opacity: 0.55; transition: opacity 200ms; }
.stage__tabs button:hover, .stage__tabs button[aria-selected="true"] { color: var(--ink-on-dark); border-color: oklch(0.78 0.12 250); background: oklch(1 0 0 / 0.05); }
.stage__tabs button:hover img, .stage__tabs button[aria-selected="true"] img { opacity: 1; }

@media (max-width: 1000px) { .product, .product--flip { grid-template-columns: 1fr; gap: var(--s-6); } .product--flip .product__copy { order: 0; } }

/* Highlighted phrase: write *words* in copy; layout() turns it into <em class="hl">. */
.hl { font-style: normal; color: var(--blue); }
.hl--keep { white-space: nowrap; }
.zone--dark .hl, .backwall .hl, .page-head .hl, .tile .hl { color: oklch(0.8 0.11 245); }

/* Survey planner + coverage chart (dataviz: bars ≤24px, 4px data end, square at
   baseline, value at the tip in text ink, recessive axis, table view). */
.planner { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 2fr); gap: var(--s-7); align-items: start; }
.planner__controls { display: grid; gap: 0; background: var(--surface); padding: var(--s-5); border-top: 6px solid var(--fascia); box-shadow: var(--shadow-desk); }
.planner__camera { display: grid; gap: var(--s-1); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.planner__camera span { font-size: var(--step--1); color: var(--ink-2); }
.planner__camera strong { font-family: var(--font-display); font-weight: 600; }
.planner__controls label { display: flex; justify-content: space-between; gap: var(--s-3); }
.planner__controls output { font-weight: 600; color: var(--ink); }
.planner input[type="range"] { min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--blue); height: 28px; }
.planner__readout { margin-top: 0; }
.planner__readout dd { font-size: var(--step-2); }
.planner__table, .planner > .condition { grid-column: 1 / -1; }
.planner__table summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.planner__table .table-wrap { margin-top: var(--s-3); }
.planner__warn { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); background: var(--warn-soft); color: var(--warn-ink); border: 1px solid oklch(0.8 0.1 85); border-radius: 8px; font-size: var(--step--1); line-height: 1.55; max-width: 75ch; }
.planner__warn[hidden] { display: none; }
.planner__verdict { margin-top: var(--s-4); font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); min-height: 1.5em; }
@media (max-width: 960px) { .planner { grid-template-columns: 1fr; } }

.chart { margin: var(--s-6) 0 0; position: relative; }
.chart figcaption { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--s-3); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.bar { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; align-items: center; gap: var(--s-4); border-radius: 2px; outline-offset: 4px; }
.bar__label { font-size: var(--step--1); font-weight: 600; line-height: 1.35; }
.bar__track { display: flex; align-items: center; gap: var(--s-2); border-left: 1px solid var(--line-strong); min-height: 32px; }
.bar__fill { display: block; height: 18px; background: var(--data-ics); border-radius: 0 var(--data-end) var(--data-end) 0; min-width: 2px; transition: width 400ms var(--ease-out); }
.bar--ref .bar__fill { background: var(--data-ref); }
.bar--ref .bar__label { font-weight: 500; color: var(--ink-2); }
.bar__value { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar:hover .bar__fill, .bar:focus .bar__fill { background: var(--blue-hover); }
.bar--ref:hover .bar__fill, .bar--ref:focus .bar__fill { background: color-mix(in oklch, var(--data-ref) 85%, black); }
.chart__tip { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: var(--s-2) var(--s-3); border-radius: 3px; display: inline-block; }
.chart__tip[hidden] { display: none; }
@media (max-width: 520px) { .bar { grid-template-columns: 1fr; gap: var(--s-1); } }
@media (prefers-reduced-motion: reduce) { .bar__fill { transition: none; } }

/* Placeholder for media the owner still has to supply */
.pending {
  display: grid; place-content: center; text-align: center; gap: var(--s-1);
  border: 1.5px dashed var(--line-strong); border-radius: 3px; background: oklch(0.97 0.006 250 / 0.6);
  color: var(--ink-2); font-size: var(--step--1); padding: var(--s-5); min-height: 160px;
}
.zone--dark .pending { background: oklch(1 0 0 / 0.04); border-color: oklch(1 0 0 / 0.25); color: var(--ink-on-dark-2); }
.pending strong { font-family: var(--font-display); color: inherit; }

/* Safety layers */
.layers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-7) var(--s-6); }
.layer { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); align-content: start; }
.layer__n { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--blue); font-variant-numeric: tabular-nums; line-height: 1.3; }
.layer h3 { font-size: var(--step-1); }
.ph { display: inline-block; }
.chain li .ph { display: inline-block; margin-top: 0; }
.layer p { grid-column: 2; color: var(--ink-2); }
.layer details { grid-column: 2; font-size: var(--step--1); color: var(--ink-2); }
.layer summary { cursor: pointer; color: var(--blue); }

/* Build story: photo-led */
.story { display: grid; gap: var(--s-8); }
/* Text centred on the photo or clip beside it: short chapters left a blank block under the text when top-aligned. */
.chapter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.chapter:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.chapter:nth-child(even) figure { order: 2; }
.chapter figure { margin: 0; }
.chapter img, .chapter .clip { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.chapter figcaption { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--s-2); }
.chapter h3 { font-size: var(--step-2); }
.chapter p { margin-top: var(--s-4); color: var(--ink-2); max-width: 36rem; }
@media (max-width: 860px) { .chapter, .chapter:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-4); } .chapter:nth-child(even) figure { order: 0; } }

/* Heritage timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--ink); }
/* Narrow screens: the timeline scrolls sideways rather than squeezing seven steps. */
@media (max-width: 1000px) { .timeline { grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; } }
.timeline li { padding: var(--s-4) var(--s-4) var(--s-2) 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--wall); border: 2px solid var(--ink); border-radius: 50%; }
.timeline .yr { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline strong { display: block; margin-top: var(--s-1); }
.timeline span { font-size: var(--step--1); color: var(--ink-2); display: block; line-height: 1.5; text-wrap: balance; }
.philosophy { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s-3) var(--s-6); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }

/* Proof: deliveries */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger li { display: grid; grid-template-columns: 9rem 7rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); align-items: baseline; }
.ledger time { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ledger .type { font-size: var(--step--1); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--blue); }
.zone--dark .ledger { border-color: oklch(1 0 0 / 0.2); }
.zone--dark .ledger li { border-color: oklch(1 0 0 / 0.2); }
.zone--dark .ledger time { color: var(--ink-on-dark-2); }
.zone--dark .ledger .type { color: oklch(0.82 0.08 250); }
@media (max-width: 700px) { .ledger li { grid-template-columns: 1fr; gap: 0; } }

/* Home highlights: one row of chosen news cards, scrolls sideways (snap), arrows on wide screens. */
.hl-zone { padding-block: var(--s-8); }
.hl-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.hl-head h2 { margin: 0; font-size: var(--step-3); }
.hl-nav { display: flex; gap: var(--s-2); align-items: center; }
.hl-nav button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.hl-nav button:first-child svg { transform: scaleX(-1); }
.hl-nav button:hover { border-color: var(--blue); color: var(--blue); }
.hl-nav .btn { margin-left: var(--s-3); }
.hl-row { list-style: none; margin: 0; padding: 0 0 var(--s-3); display: grid; grid-auto-flow: column; grid-auto-columns: max(260px, calc((100% - 3 * var(--s-5)) / 4)); gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.hl-row li { scroll-snap-align: start; }
.hl-row a { display: grid; gap: var(--s-3); color: inherit; text-decoration: none; }
.hl-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.hl-row span { font-family: var(--font-display); font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hl-row a:hover span { color: var(--blue); }
@media (max-width: 760px) { .hl-nav button { display: none; } .hl-row { grid-auto-columns: 78%; } }

/* Awards on /company: photo cards on the dark zone; an award without a photo shows its year in the frame. */
.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-7) var(--s-6); }
.awards li { display: flex; flex-direction: column; gap: var(--s-2); }
.awards__img { margin: 0 0 var(--s-2); aspect-ratio: 3 / 2; border-radius: 2px; overflow: hidden; background: var(--fascia-2); display: grid; place-items: center; }
.awards__img img { width: 100%; height: 100%; object-fit: cover; }
.awards__img span { font-family: var(--font-display); font-size: var(--step-4); color: oklch(0.8 0.11 245); }
.awards time { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-on-dark-2); font-size: var(--step--1); }
.awards h3 { margin: 0; font-size: var(--step-1); line-height: 1.25; color: var(--ink-on-dark); }
.awards p { margin: 0; color: var(--ink-on-dark-2); font-size: var(--step--1); }
.awards a { margin-top: auto; padding-top: var(--s-2); color: oklch(0.8 0.11 245); font-size: var(--step--1); font-weight: 500; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.zone--dark .split { align-items: center; }
.split img { width: 100%; border-radius: 2px; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.quote { margin: var(--s-5) 0 0; padding: 0; font-size: var(--step-1); font-family: var(--font-display); font-weight: 500; }
.quote footer { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-2); margin-top: var(--s-2); }

/* ── Platform page ───────────────────────────────────────────────────── */
.crumbs { font-size: var(--step--1); color: var(--ink-2); padding-block: var(--s-4); }
.crumbs a { color: var(--ink-2); }

/* Spec tables: open sheet, no box. Hairline rows, quiet labels, the numbers carry the weight. */
.spec { width: 100%; border-collapse: collapse; font-size: var(--step-0); --sheet-rule: var(--rule); --label: var(--ink-2); --value: var(--ink); }
.spec caption { text-align: left; font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); padding-bottom: var(--s-4); }
.spec th, .spec td { text-align: left; padding: 0.75em 1em 0.75em 0; border-bottom: 1px solid var(--sheet-rule); vertical-align: baseline; }
.spec thead th { font-family: var(--font-body); font-weight: 500; font-size: var(--step--1); color: var(--label); letter-spacing: 0.02em; border-bottom: 2px solid var(--value); padding-bottom: 0.6em; }
.spec tbody th { font-weight: 500; color: var(--value); width: 42%; }
.spec td { font-weight: 400; color: var(--value); font-variant-numeric: tabular-nums; line-height: 1.5; }
@media (hover: hover) { .spec tbody tr:hover { background: color-mix(in oklch, var(--blue) 5%, transparent); } }
/* Value still being confirmed: a quiet dashed tag, not a yellow block. */
.spec .pending-cell { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--warn-ink); }
.spec .pending-cell::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: 50%; border: 1.5px dashed currentColor; vertical-align: 0.05em; }
/* Compare columns: a value that differs from the first column is marked in brand blue. */
.spec td.diff { color: var(--blue); }
.spec--models td { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--ink-2); }
.spec--models th[scope="row"] { color: var(--ink); font-weight: 500; width: 34%; }
.spec--models td:last-child { white-space: nowrap; font-weight: 500; }

/* Payload type cards: product shot on black, name under it */
.pl-cards { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.pl-card { display: grid; gap: var(--s-2); text-align: center; text-wrap: balance; font-size: var(--step--1); font-weight: 500; color: var(--ink); }
/* Product cut-outs (transparent PNG) on a light tile, so they sit in the page instead of in black boxes. */
.pl-card img, .pl-card__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--s-3); background: radial-gradient(ellipse at 50% 45%, var(--surface), var(--wall-2)); border: 1px solid var(--rule); border-radius: 10px; transition: translate 300ms var(--ease-out); }
@media (hover: hover) { .pl-card:hover img { translate: 0 -3px; } }
.pl-card__ph { display: block; background: radial-gradient(ellipse at 50% 40%, var(--fascia-2), var(--fascia)); }

.table-wrap { overflow-x: auto; --sticky-bg: var(--wall); }
.zone--wall-2 .table-wrap { --sticky-bg: var(--wall-2); }
.table-wrap .spec tbody th:first-child, .table-wrap .spec thead th:first-child { position: sticky; left: 0; background: var(--sticky-bg); }
/* On navy (Tactical) the sheet inverts. */
.zone--dark .spec { --sheet-rule: oklch(1 0 0 / 0.14); --label: var(--ink-on-dark-2); --value: var(--ink-on-dark); }
.zone--dark .table-wrap { --sticky-bg: var(--fascia); color: var(--ink-on-dark) !important; }
.zone--dark .spec td.diff { color: oklch(0.78 0.12 250); }
.zone--dark .spec .pending-cell { color: oklch(0.85 0.1 85); }
.notes { margin-top: var(--s-4); font-size: var(--step--2); color: var(--ink-2); padding-left: 1.2em; }
.notes li { margin-top: var(--s-1); }

.yes { color: oklch(0.44 0.11 170); font-weight: 600; }
.no { color: var(--ink-2); }
.unconfirmed { color: var(--warn-ink); }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 860px) { .two-up { grid-template-columns: 1fr; } }
.highlights { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); }
.highlights li { padding-left: 1.4em; position: relative; }
.highlights li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.6em; height: 0.6em; background: var(--blue); border-radius: 1px; }

/* Compare page */
.compare th[scope="col"] a { color: var(--ink); }
.zone--dark .compare th[scope="col"] a { color: var(--ink-on-dark); }

/* Generic page head */
.page-head { background: var(--fascia); color: var(--ink-on-dark); padding-block: var(--s-8) var(--s-7); }
.page-head h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
.page-head p { color: var(--ink-on-dark-2); max-width: 46rem; margin-top: var(--s-4); font-size: var(--step-1); }
.page-head .crumbs, .page-head .crumbs a { color: var(--ink-on-dark-2); padding-top: 0; }
.prose { max-width: 70ch; }
.prose p + p { margin-top: var(--s-4); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; }
.steps li::before { content: counter(step); font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--blue); }
.zone--dark .steps li::before { color: oklch(0.8 0.11 245); }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin-top: 0.3em; accent-color: var(--blue); flex: none; }
.hp { position: absolute; left: -9999px; }
.toast { margin-top: var(--s-4); padding: var(--s-4); border-radius: 3px; background: oklch(0.95 0.05 160); color: oklch(0.32 0.08 160); }
.toast[hidden] { display: none; }

/* Footer */
.footer { background: var(--fascia); color: var(--ink-on-dark-2); padding-block: var(--s-8) var(--s-6); font-size: var(--step--1); }
/* Footer links: quieter than headings, brighten and underline on hover so they read as links. */
.footer a { color: oklch(0.86 0.03 250); text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.18); text-underline-offset: 0.3em; transition: color 150ms var(--ease-out), text-decoration-color 150ms var(--ease-out); }
.footer a:hover, .footer a:focus-visible { color: #fff; text-decoration-color: oklch(0.8 0.11 245); }
.footer a:focus-visible { outline: 2px solid oklch(0.8 0.11 245); outline-offset: 3px; border-radius: 2px; }
.footer ul a { display: inline-block; padding-block: 0.15em; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.footer__grid h2 { font-size: var(--step-0); color: var(--ink-on-dark); margin-bottom: var(--s-3); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer__legal { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid oklch(1 0 0 / 0.15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } .footer ul a { padding-block: 0.4em; } }

/* Clips: muted field footage. Poster shows until site.js starts playback. */
.clip { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fascia); }
.clip-figure { margin: 0; }
.wrap.clip-figure { margin-inline: auto; }
.clip-figure figcaption { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-2); text-wrap: balance; }
.zone--dark .clip-figure figcaption, .clip-band figcaption { color: var(--ink-on-dark-2); }
.clip-band { padding-block: var(--s-7); }

/* Fleet mosaic: field photos edge to edge, name set low-left like a poster wall */
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.tile { position: relative; grid-column: span var(--span, 3); min-height: clamp(260px, 30vw, 460px); overflow: hidden; display: block; color: var(--ink-on-dark); text-decoration: none; background: radial-gradient(ellipse at 50% 40%, var(--fascia-2), var(--fascia)); border-radius: 2px; }
.tile:hover { color: var(--ink-on-dark); }
.tile > img, .tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--render > img { object-fit: contain; padding: 6% 4% 22%; }
.tile__pending { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-on-dark-2); font-size: var(--step--1); padding-bottom: 20%; }
.tile__video { opacity: 0; transition: opacity 500ms var(--ease-out); }
.tile.is-playing .tile__video { opacity: 1; }
/* Taller, darker scrim: white card text must read over bright sky footage too (vl340-pass). */
.tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 65%; background: linear-gradient(oklch(0.18 0.05 258 / 0), oklch(0.18 0.05 258 / 0.6) 45%, oklch(0.16 0.05 258 / 0.88)); pointer-events: none; }
.tile__label { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); z-index: 1; }
.tile__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.1; }
.tile__tag { display: block; margin-top: var(--s-1); font-size: var(--step--1); color: var(--ink-on-dark-2); max-width: 40ch; }
@media (prefers-reduced-motion: no-preference) {
  .tile > img { transition: scale 900ms var(--ease-out); }
  .tile:hover > img, .tile:focus-visible > img { scale: 1.04; }
}
@media (max-width: 760px) {
  .mosaic { grid-template-columns: 1fr; }
  .tile { grid-column: auto; min-height: 240px; }
}

/* Mission wall: mosaic tiles with the mission's zone colour as a light wash and a marker */
.mission-wall .tile { min-height: clamp(340px, 34vw, 480px); }
.tile--zone { background:
  radial-gradient(ellipse 70% 60% at 85% 15%, color-mix(in oklch, var(--zone) 55%, transparent), transparent 70%),
  radial-gradient(ellipse at 50% 40%, var(--fascia-2), var(--fascia)); }
.mission-wall__craft { object-fit: contain !important; inset: 6% 6% auto 6% !important; height: 50% !important; width: 88% !important; filter: drop-shadow(0 24px 22px oklch(0 0 0 / 0.45)); }
.mission-wall .tile::after { height: 75%; background: linear-gradient(oklch(0.18 0.05 258 / 0), oklch(0.16 0.05 258 / 0.88) 60%); }
.mission-wall__zone { display: block; width: 2.5rem; height: 6px; background: var(--zone); margin-bottom: var(--s-3); border-radius: 1px; }
/* One size for every mission tile, small enough that the narrow tiles never split a Thai word ("ตรวจจุดความ|ร้อน"). */
.mission-wall .tile__name { margin: 0; font-size: var(--step-2); line-height: 1.2; }
.mission-wall .tile__tag { margin-top: var(--s-3); font-size: var(--step-0); max-width: 46ch; color: var(--ink-on-dark); opacity: 0.86; }
.mission-wall__fleet { display: block; margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-on-dark-2); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .mission-wall__craft { transition: translate 600ms var(--ease-out); }
  .tile:hover .mission-wall__craft { translate: 0 -10px; }
}

/* News: photo, date, title, read more */
.news { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-8) var(--s-6); }
.news__item > img, .news__ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.news__ph { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, var(--fascia-2), var(--fascia)); color: var(--ink-on-dark-2); font-family: var(--font-display); font-size: var(--step-1); }
.news__meta { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); }
.news__title { margin-top: var(--s-3); font-size: var(--step-2); font-weight: 500; line-height: 1.3; }
.news__title a { color: var(--ink); text-decoration: none; }
.news__title a:hover { color: var(--blue); }
.news__more svg { width: 1em; height: 1em; flex: none; }
.news__more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ── Company-level pages (redesign 2026-11-01, D-016/D-018) ── */
.backwall--split .backwall__copy { padding-block: var(--s-7); }
.backwall__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.backwall .crumbs, .backwall .crumbs a { color: var(--ink-on-dark-2); padding-top: 0; }
.tile__go { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--step--1); font-weight: 500; color: var(--ink-on-dark); }
.tile__go svg { width: 1.1em; transition: translate 300ms var(--ease-out); }
.tile:hover .tile__go svg { translate: 4px 0; }
.doors .tile { min-height: clamp(300px, 30vw, 440px); }

/* Aircraft hero: field photo (or render on navy), name, key figures, actions. */
.pdp-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 70% 40%, var(--fascia-2), var(--fascia)); color: var(--ink-on-dark); min-height: clamp(520px, 78vh, 760px); display: flex; align-items: flex-end; }
.pdp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-hero:not(.pdp-hero--render)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.18 0.05 258 / 0.15) 0%, oklch(0.18 0.05 258 / 0.35) 45%, oklch(0.16 0.05 258 / 0.92) 100%); }
.pdp-hero--lift { padding-top: calc(var(--lift-pad) * 100vw); }
.pdp-hero--lift .pdp-hero__bg { inset: auto 0 auto 0; top: calc(var(--lift) * -100vw); height: auto; aspect-ratio: var(--ar, 2000 / 1125); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
/* Close-up photos: full width like the VL340 one, cropped to a band around the aircraft; on phones the whole photo sits above the text. */
.pdp-hero--crop .pdp-hero__bg { top: 0; height: calc(var(--crop-h) * 100vw); aspect-ratio: auto; object-fit: cover; object-position: 50% var(--crop-y); }
@media (max-width: 640px) {
  .pdp-hero--crop { padding-top: calc(var(--ar-h) * 100vw - 1.5rem); }
  .pdp-hero--crop .pdp-hero__bg { height: auto; aspect-ratio: var(--ar); }
}
.pdp-hero__render { position: absolute; right: 2%; top: 12%; width: min(62%, 980px); filter: drop-shadow(0 40px 40px oklch(0 0 0 / 0.45)); }
.pdp-hero__inner { position: relative; z-index: 1; padding-block: var(--s-8) var(--s-6); }
.pdp-hero .crumbs, .pdp-hero .crumbs a { color: var(--ink-on-dark-2); padding-top: 0; }
.pdp-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.2rem); letter-spacing: -0.025em; line-height: 1.02; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.badge { font-size: var(--step--1); font-weight: 500; letter-spacing: 0; padding: 0.3em 0.8em; border: 1px solid oklch(0.8 0.11 245); color: oklch(0.85 0.09 245); border-radius: 999px; }
.pdp-hero__tag { margin-top: var(--s-3); font-size: var(--step-1); color: var(--ink-on-dark-2); max-width: 40ch; }
.keyfigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--s-7) 0 0; max-width: 60rem; border-top: 1px solid oklch(1 0 0 / 0.22); }
.keyfigs > div { padding: var(--s-4) var(--s-4) 0 0; display: flex; flex-direction: column; }
.keyfigs dd { margin-top: auto !important; }
.keyfigs > div + div { padding-left: var(--s-4); border-left: 1px solid oklch(1 0 0 / 0.22); }
.keyfigs dt { font-size: var(--step--1); color: var(--ink-on-dark-2); }
.keyfigs dd { margin: var(--s-1) 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.keyfigs dd small { font-size: max(0.45em, 0.8rem); margin-left: 0.25em; color: var(--ink-on-dark-2); font-weight: 400; }
.keyfigs dd sup { font-size: 0.4em; color: oklch(0.8 0.11 245); }
.keyfigs .keyfigs__pending { font-size: var(--step--1); color: oklch(0.85 0.1 85); }
.pdp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 760px) {
  .keyfigs { grid-template-columns: 1fr 1fr; }
  .keyfigs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .keyfigs > div:nth-child(n+3) { border-top: 1px solid oklch(1 0 0 / 0.22); margin-top: var(--s-3); }
  .pdp-hero__render { position: relative; right: auto; top: auto; width: 100%; margin-bottom: var(--s-4); }
  .pdp-hero--render { flex-direction: column; justify-content: flex-end; padding-top: var(--s-7); }
}
.pdp-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); }
.pdp-intro h2 { font-size: var(--step-1); color: var(--ink-2); font-weight: 500; }
.pdp-intro__lead { margin-top: var(--s-2); font-family: var(--font-display); font-size: var(--step-3); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.pdp-intro p { color: var(--ink-2); }
.pdp-intro .pdp-intro__lead { color: var(--ink); }
.pdp-intro__note { margin-top: var(--s-4); font-size: var(--step--1); }
@media (max-width: 860px) { .pdp-intro { grid-template-columns: 1fr; gap: var(--s-5); } }
.pdp-specs { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.pdp-specs__h { font-size: var(--step-2); margin-bottom: var(--s-4); }
@media (max-width: 960px) { .pdp-specs { grid-template-columns: 1fr; } }
.spec--grouped .spec__group th { padding-top: var(--s-6); border-bottom: 2px solid var(--ink); font-family: var(--font-display); font-weight: 500; font-size: var(--step-0); color: var(--ink); }
.spec--grouped tbody:first-child .spec__group th { padding-top: 0; }
/* Sensor table under the spec table: same look; values are short (×2), so labels get more room on phones. */
.spec--grouped.spec--sensors tbody:first-child .spec__group th { padding-top: var(--s-6); }
@media (max-width: 600px) { .spec--sensors tbody th { width: 62%; } }
.pdp-models { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.pdp-models summary { cursor: pointer; padding: var(--s-4) 0; font-weight: 500; color: var(--blue); }

/* Single-flight footprint: squares to scale by area. */
.footprint { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-end; }
.footprint__item { margin: 0; display: grid; gap: var(--s-4); }
.footprint__box { width: min(var(--px), 78vw); aspect-ratio: 1; background: linear-gradient(135deg, oklch(0.62 0.12 170), oklch(0.48 0.1 200)); border-radius: 4px; }
.footprint__item:not(.footprint__item--ics) .footprint__box { background: var(--line-strong); }
.footprint figcaption { display: grid; gap: var(--s-1); color: var(--ink-2); font-size: var(--step--1); }
.footprint figcaption strong:first-child { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); color: var(--ink); }
@media (max-width: 700px) { .footprint { grid-template-columns: 1fr; } }

/* ISR range bars: operating band per aircraft on one km axis. */
.ranges { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.ranges li { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 8rem; gap: var(--s-4); align-items: center; }
.ranges__name { font-weight: 500; }
.ranges__track { position: relative; height: 12px; background: oklch(1 0 0 / 0.1); border-radius: var(--data-end); }
.ranges__bar { position: absolute; top: 0; bottom: 0; left: var(--lo); right: calc(100% - var(--hi)); background: var(--data-ics-on-dark); border-radius: var(--data-end); }
.ranges__v { white-space: nowrap; text-align: right; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); }
@media (max-width: 640px) { .ranges li { grid-template-columns: 1fr auto; } .ranges__track { grid-column: 1 / -1; grid-row: 2; } }

/* Services: photo and copy, alternating sides. */
.service > div:not(.service__media) { position: sticky; top: 6rem; align-self: start; }
.service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.service--flip img { order: 2; }
.service img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.service h2 { font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.15; }
.service__lead { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--step-1); max-width: 46ch; }
.service .product__feats { border-color: var(--rule); }
.service .product__feats li { color: var(--ink); border-color: var(--rule); }
.service .product__feats li::before { border-color: var(--blue); }
@media (max-width: 860px) { .service { grid-template-columns: 1fr; gap: var(--s-5); } .service--flip img { order: 0; } }

/* Dark theme page (defense): every zone sits on navy. */
.theme-dark main { background: var(--fascia); }

/* Motion */

@media print {
  .fascia, .desk, .footer, .lineup { display: none; }
  body { background: #fff; }
}

/* Safety highlight band (home, fleet, VTOL aircraft pages): the fail-safe layers are a selling point, not a footnote. */
.safe-feature__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-8); align-items: center; }
.safe-feature__n { font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 3rem + 8vw, 9rem); line-height: 0.85; color: oklch(0.8 0.11 245); letter-spacing: -0.04em; }
.safe-feature h2 { margin-top: var(--s-3); font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.safe-feature__lead { margin: var(--s-4) 0 var(--s-6); color: var(--ink-on-dark-2); font-size: var(--step-1); max-width: 40ch; }
@media (max-width: 860px) { .safe-feature__top { grid-template-columns: 1fr; gap: var(--s-6); } }
.layer:target { background: color-mix(in oklch, var(--blue) 7%, transparent); outline: 1px solid color-mix(in oklch, var(--blue) 35%, transparent); outline-offset: 8px; border-radius: 4px; }
.layer { scroll-margin-top: 110px; }

/* Compare: unit in the row label, numbers alone in cells, family column groups, filter. */
.compare__filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.compare__filter button { font: inherit; font-size: var(--step--1); font-weight: 500; padding: 0.55em 1.1em; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); cursor: pointer; transition: background 200ms var(--ease-out), color 200ms var(--ease-out); }
.compare__filter button:hover { color: var(--ink); border-color: var(--ink-2); }
.compare__filter button[aria-pressed="true"] { background: var(--fascia); border-color: var(--fascia); color: var(--ink-on-dark); }
.spec.compare { --sheet-rule: color-mix(in oklch, var(--rule) 70%, transparent); }
.spec.compare[data-compare] { min-width: 860px; }
.zone--dark .spec.compare { --sheet-rule: oklch(1 0 0 / 0.14); }
.zone--dark .compare__unit, .zone--dark .spec.compare td small { color: var(--ink-on-dark-2); }
.spec.compare tbody th { width: auto; min-width: 15rem; padding-right: var(--s-5); font-weight: 500; color: var(--value); vertical-align: middle; }
.spec.compare th, .spec.compare td { padding-block: 1em; }
.spec.compare thead th:not(:first-child) { text-align: center; padding-inline: var(--s-3); }
.spec.compare td { white-space: nowrap; text-align: center; padding-inline: var(--s-3); font-size: var(--step-0); font-weight: 400; vertical-align: middle; }
.spec.compare td small { font-size: 0.85em; color: var(--ink-2); font-weight: 400; margin-left: 0.15em; }
.spec.compare td .na { color: var(--rule); font-weight: 400; }
.spec.compare td.pending-cell { white-space: normal; font-size: 0.82rem; font-weight: 500; }
.compare__unit { display: block; margin-top: 0.2em; font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); }
.compare .fam-start { border-left: 1px solid var(--rule); padding-left: var(--s-4); }
.compare__fams td, .compare__fams th { border-bottom: 0 !important; padding-bottom: 0 !important; }
.compare__fams th { padding-top: 0; }
.compare__fams th span { display: inline-block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; color: var(--blue); background: color-mix(in oklch, var(--blue) 9%, transparent); padding: 0.3em 0.8em; border-radius: 999px; }
.spec.compare thead tr:last-child th { vertical-align: bottom; padding-top: var(--s-3); padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); }
.compare__ac { display: grid; justify-items: center; text-align: center; gap: var(--s-3); color: var(--ink) !important; text-decoration: none; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.compare__ac img, .compare__ph { width: 100%; max-width: 11rem; aspect-ratio: 16 / 10; object-fit: contain; padding: var(--s-2); background: var(--wall-2); border-radius: 10px; transition: translate 300ms var(--ease-out), background 300ms var(--ease-out); }
.compare__ph { display: block; border: 1px dashed var(--rule); }
.compare__ac > span { position: relative; }
.compare__ac > span::after { position: absolute; left: 100%; content: " →"; color: var(--blue); opacity: 0; transition: opacity 200ms var(--ease-out); }
.compare__ac:hover img { translate: 0 -4px; background: color-mix(in oklch, var(--blue) 8%, var(--wall-2)); }
.compare__ac:hover span { color: var(--blue); }
.compare__ac:hover > span::after { opacity: 1; }
.spec.compare .compare__group th { padding-top: var(--s-7); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); color: var(--ink); background: none; position: static; }
.spec.compare .compare__group th::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.6em; background: var(--blue); border-radius: 2px; vertical-align: 0.12em; }
.spec.compare tbody:first-of-type .compare__group th { padding-top: var(--s-5); }
.compare[data-show="multirotor"] [data-fam="vtol-fixed-wing"], .compare[data-show="vtol-fixed-wing"] [data-fam="multirotor"] { display: none; }
.compare[data-show="multirotor"] tbody tr:not(.has-multirotor):not(.compare__group), .compare[data-show="multirotor"] tbody:not(.has-multirotor),
.compare[data-show="vtol-fixed-wing"] tbody tr:not(.has-vtol-fixed-wing):not(.compare__group), .compare[data-show="vtol-fixed-wing"] tbody:not(.has-vtol-fixed-wing) { display: none; }
.compare[data-show]:not([data-show="all"]) .fam-start { border-left: 0; padding-left: 0; }
.compare__notes { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--step--2); color: var(--ink-2); }
.compare__notes sup { color: var(--blue); margin-right: 0.3em; }
/* Aircraft names stay under the header once the table's own head row has scrolled away (CompareStickyHead). */
.compare__float { position: fixed; z-index: calc(var(--z-sticky) - 1); display: flex; overflow: hidden; overflow: clip; background: var(--wall); border-bottom: 2px solid var(--ink); box-shadow: var(--shadow-low); opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease-out), visibility 0s 160ms; }
.compare__float[data-visible="true"] { opacity: 1; visibility: visible; transition: opacity 160ms var(--ease-out); }
.compare__float-label { flex: none; position: relative; z-index: 1; background: var(--wall); }
.compare__float-track { flex: none; display: flex; }
.compare__float-track button { font: inherit; border: 0; border-radius: 0; background: none; cursor: pointer; }
.compare__float-track .is-on { background: color-mix(in oklch, var(--blue) 7%, transparent); color: var(--blue); }
.compare__float-track a, .compare__float-track button { flex: none; display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-3); text-align: center; white-space: nowrap; font-family: var(--font-display); font-size: var(--step--1); font-weight: 400; color: var(--ink); text-decoration: none; }
.compare__float-track img, .compare__float-track .compare__ph { width: 100%; max-width: 5.5rem; aspect-ratio: 16 / 10; object-fit: contain; padding: 0.2rem; background: var(--wall-2); border-radius: 6px; }
.compare__float-track a:hover, .compare__float-track button:hover { color: var(--blue); }
.compare__float-track .fam-start { border-left: 1px solid var(--rule); }
.compare__float:not([data-show="all"]) .fam-start { border-left: 0; }
@media print { .compare__float { display: none; } }

/* Layer art (HUD scene with the VL260) on the safety page and in the safety band. */
.layer__art { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: var(--s-3); transition: translate 400ms var(--ease-out); }
.layer:hover .layer__art { translate: 0 -4px; }
.layers--art { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* VL260 cut-away: full-bleed on black, the image carries its own frame. */
.callout-band { background: #000; }
.callout-band img { display: block; width: 100%; max-width: 1920px; height: auto; margin-inline: auto; }

.workflow-figure { margin: 0 auto; max-width: 827px; }
.workflow-figure img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .layer:hover .layer__art, .safe-feature__list a:hover img { translate: none; } }
.layer__art--pending { display: grid; place-items: center; background: var(--fascia); color: var(--ink-on-dark-2); font-size: var(--step--1); border-radius: 8px; }
/* Smart-flight features: image at its own size (max 640px, never upscaled) beside the text */
.layers--smart { grid-template-columns: 1fr; }
.layers--smart .layer { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: var(--s-3) var(--s-7); align-content: center; }
.layers--smart .layer > * { grid-column: 2; }
.layers--smart .layer { grid-template-rows: 1fr repeat(3, auto) 1fr; }
.layers--smart .layer > .layer__art { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
.layers--smart .layer > h3 { grid-row: 2; }
.layers--smart .layer > p { grid-row: 3; }
.layers--smart .layer > details { grid-row: 4; }
@media (max-width: 860px) { .layers--smart .layer { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .layers--smart .layer > *, .layers--smart .layer > .layer__art { grid-column: 1; grid-row: auto; } }

/* Safety band, lower half: layer cards on a light sheet so the dark HUD art stands out. */
.safe-feature__head { padding-bottom: var(--s-8); }
.safe-feature__body { background: oklch(0.955 0.008 255); }
.safe-feature__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.safe-feature__list a { display: grid; justify-items: center; text-align: center; gap: var(--s-1); color: var(--ink); text-decoration: none; }
.safe-feature__list img, .safe-feature__ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: var(--s-3);
  filter: drop-shadow(0 14px 22px oklch(0.22 0.06 258 / 0.28)); transition: translate 400ms var(--ease-out), filter 400ms var(--ease-out); }
.safe-feature__ph { border: 1px dashed var(--rule); border-radius: 8px; filter: none; }
.safe-feature__list span { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--blue); font-variant-numeric: tabular-nums; }
.safe-feature__list strong { font-weight: 500; font-size: var(--step-0); line-height: 1.4; text-wrap: balance; }
.safe-feature__list a:hover img, .safe-feature__list a:focus-visible img { translate: 0 -6px; filter: drop-shadow(0 22px 28px oklch(0.22 0.06 258 / 0.35)); }
.safe-feature__list a:hover strong { color: var(--blue); }
.safe-feature__applies { margin-top: var(--s-7); font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 1100px) { .safe-feature__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .safe-feature__list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .safe-feature__list a:hover img { translate: none; } }
.concept-figure { margin: 0 0 var(--s-6); }
.concept-figure img { display: block; width: 100%; height: auto; border-radius: 6px; }
.concept-figure figcaption { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-2); }
.zone--dark .concept-figure figcaption, .theme-dark .concept-figure figcaption { color: var(--ink-on-dark-2); }

/* Terrain following comparison (mapping page). */
.tf-maps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.tf-maps figure { margin: 0; }
.tf-maps img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 28px oklch(0.25 0.05 258 / 0.14); }
.tf-maps figcaption { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.tf-maps figcaption strong { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); }
.tf-maps figcaption span { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.2; }
.tf-bad { color: oklch(0.6 0.19 30); }
.tf-good { color: var(--blue); }
.tf-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); }
.tf-key i { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 3px; }
.tf-key .k-gap { background: rgb(240 90 71); }
.tf-key .k-ramp { width: 5em; margin-left: var(--s-4); background: linear-gradient(90deg, rgb(214 230 250), rgb(16 62 150)); }
.tf-profile { margin: var(--s-7) 0 0; }
.tf-profile img { display: block; width: 100%; height: auto; }
.tf-profile figcaption { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--step--1); color: var(--ink-2); }
.k-line { display: inline-block; width: 2em; height: 0; vertical-align: middle; margin-right: var(--s-2); border-top: 3px solid; }
.k-line--const { border-top: 3px dashed rgb(240 90 71); }
.k-line--tf { border-color: rgb(26 95 208); }
.k-line--ground { border-top-width: 8px; border-color: rgb(207 214 226); }
.tf-note { margin-top: var(--s-4); font-size: var(--step--2); color: var(--ink-2); max-width: none; }
@media (max-width: 760px) { .tf-maps { grid-template-columns: 1fr; } }

/* Mapping scenarios: two line charts, eVTOL blue vs multirotor grey (same roles as the planner bars). */
.sc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s-7); }
.sc__item h3 { font-size: var(--step-2); line-height: 1.2; text-wrap: balance; }
.sc__item > p { margin-top: var(--s-3); color: var(--ink-2); max-width: 52ch; }
/* Scenario charts: navy HUD panel, same frame language as the safety art */
.sc__chart { --sc-ink: oklch(0.92 0.02 245); --sc-ink-2: oklch(0.76 0.04 245); --sc-rule: oklch(0.62 0.1 240 / 0.18);
  position: relative; margin: var(--s-5) 0 0; padding: var(--s-5) var(--s-5) var(--s-4); border-radius: 18px; color: var(--sc-ink);
  background: radial-gradient(130% 90% at 50% 110%, oklch(0.33 0.1 245) 0%, oklch(0.24 0.075 258) 55%, oklch(0.19 0.055 260) 100%);
  border: 1px solid oklch(0.62 0.14 235 / 0.5); box-shadow: inset 0 0 0 5px oklch(0.2 0.06 258), inset 0 0 0 6px oklch(0.62 0.14 235 / 0.22), inset 0 0 48px oklch(0.62 0.14 235 / 0.16); }
.sc__chart::before, .sc__chart::after { content: ""; position: absolute; top: 14px; width: 18px; height: 18px; border: 2px solid oklch(0.72 0.13 230 / 0.7); }
.sc__chart::before { left: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.sc__chart::after { right: 14px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.sc__chart figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--sc-ink); padding-left: var(--s-4); }
.sc__legend { list-style: none; margin: var(--s-2) 0 0; padding: 0 0 0 var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-size: var(--step--1); color: var(--sc-ink-2); }
.sc__legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.sc__legend i { width: 16px; height: 3px; border-radius: 2px; }
.sc__plot { position: relative; margin-top: var(--s-3); }
.sc__chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.sc__grid { stroke: var(--sc-rule); stroke-width: 1; stroke-dasharray: 2 4; }
.sc__axis { stroke: oklch(0.72 0.1 235 / 0.55); stroke-width: 1; }
/* SVG units: the 720-wide chart renders at ~600 px, so 17 reads as ~14 px. */
.sc__ytick, .sc__xtick, .sc__xlabel { font-size: 17px; fill: var(--sc-ink-2); font-variant-numeric: tabular-nums; }
.sc__ytick { text-anchor: end; }
.sc__xtick, .sc__xlabel { text-anchor: middle; }
.sc__label { font-size: 18px; font-weight: 600; fill: var(--sc-ink); }
.sc__note { font-size: 16px; fill: var(--sc-ink-2); text-anchor: middle; }
.sc__edge { stroke: var(--data-ref); stroke-opacity: .6; stroke-dasharray: 4 4; }
.sc__gap { stroke: var(--sc-ink); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 3 3; }
.sc__pill rect { fill: oklch(0.2 0.06 258); stroke: oklch(0.72 0.13 230 / 0.8); }
.sc__pill text { font-size: 17px; font-weight: 600; fill: var(--sc-ink); text-anchor: middle; }
.sc__cursor { opacity: 0; transition: opacity 150ms var(--ease-out); pointer-events: none; }
.sc__cursor circle { stroke: oklch(0.2 0.06 258); stroke-width: 2; }
.sc__cross { stroke: var(--sc-ink); stroke-opacity: .5; }
.sc__chart.is-hover .sc__cursor { opacity: 1; }
.sc__tip { position: absolute; top: 0; left: 0; min-width: 11rem; padding: var(--s-2) var(--s-3); border-radius: 8px; pointer-events: none; opacity: 0;
  background: oklch(0.17 0.05 260 / 0.94); border: 1px solid oklch(0.62 0.14 235 / 0.6); font-size: var(--step--1); color: var(--sc-ink-2); font-variant-numeric: tabular-nums; transition: opacity 150ms var(--ease-out); }
.sc__chart.is-hover .sc__tip { opacity: 1; }
.sc__tip b { display: block; color: var(--sc-ink); font-weight: 600; margin-bottom: 2px; }
.sc__tip span { display: flex; align-items: center; gap: var(--s-2); justify-content: space-between; }
.sc__tip span i { width: 10px; height: 3px; border-radius: 2px; margin-right: auto; }
.sc__tip span em { font-style: normal; margin-right: auto; }
.sc__tip strong { color: var(--sc-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sc__cursor, .sc__tip { transition: none; } }
.sc__data { margin-top: var(--s-6); }
.sc__data summary { cursor: pointer; color: var(--blue); font-weight: 500; }
.sc__data table { margin-top: var(--s-4); max-width: 40rem; }
.sc__data p { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); max-width: 75ch; }
/* Safety grid closing tile: "more layers in development", drawn in the HUD style, not clickable */
.layer__more-art { position: relative; display: grid; place-items: center; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, oklch(0.36 0.11 245) 0%, var(--fascia) 55%, oklch(0.2 0.06 258) 100%);
  border: 2px solid oklch(0.62 0.14 235 / 0.55); box-shadow: inset 0 0 0 6px oklch(0.2 0.06 258), inset 0 0 0 7px oklch(0.62 0.14 235 / 0.35), inset 0 0 40px oklch(0.62 0.14 235 / 0.25); }
.layer__more-art::before { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(oklch(0.7 0.12 235 / 0.25) 1px, transparent 1px), linear-gradient(90deg, oklch(0.7 0.12 235 / 0.25) 1px, transparent 1px); background-size: 32px 32px;
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.layer__more-plus { position: relative; width: 34%; aspect-ratio: 1; border: 2px dashed oklch(0.78 0.12 230 / 0.8); border-radius: 50%; }
.layer__more-plus::before, .layer__more-plus::after { content: ""; position: absolute; inset: 50% 28% auto; height: 3px; translate: 0 -50%; background: oklch(0.85 0.1 225); border-radius: 2px; box-shadow: 0 0 12px oklch(0.75 0.14 230); }
.layer__more-plus::after { rotate: 90deg; }
.layer__more-tag { position: absolute; bottom: 9%; font-family: var(--font-display); font-size: var(--step--1); letter-spacing: .12em; color: oklch(0.85 0.08 225); }
.layer--more:hover .layer__art { translate: none; }

/* Photo captions, one style site-wide: readable size, centred under the image */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 6px; }
.photo figcaption, .clip-figure figcaption, .concept-figure figcaption, .workflow-figure figcaption {
  margin-top: var(--s-3); font-size: var(--step-0); line-height: 1.5; text-align: center; text-wrap: balance; color: var(--ink-2); }
.zone--dark .photo figcaption, .theme-dark .photo figcaption, .zone--dark .clip-figure figcaption, .clip-band figcaption,
.zone--dark .concept-figure figcaption, .theme-dark .concept-figure figcaption { color: var(--ink-on-dark-2); }
/* Renders keep their own proportions (no 4:3 crop that zooms a wide aircraft until it blurs) */
.split img.render-free, img.render-free { aspect-ratio: auto; height: auto; object-fit: contain; border-radius: 0; }

/* 100 km² job story (.job; .story is the engineering chapters): days head-to-head, then flight → point cloud → ground → contours. */
.job { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
.job__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); align-items: center; }
.job__intro h3 { margin-top: var(--s-2); }
.job__eyebrow { font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.06em; color: var(--blue); }
.job h3 { font-size: var(--step-2); line-height: 1.2; }
.job h3 em { font-style: normal; color: var(--blue); }
.job__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.job__bar { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); align-items: center; font-weight: 500; }
.job__track { grid-column: 1 / -1; grid-row: 2; height: 18px; border-radius: var(--data-end); background: var(--data-track); overflow: hidden; }
.job__track i { display: block; height: 100%; border-radius: inherit; background: var(--data-ref); }
.job__bar--ics .job__track i { background: var(--data-ics); }
.job__bar b { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
.job__bar--ics b { color: var(--blue); }
.job__why { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.job__why li { font-size: var(--step--1); font-weight: 500; padding: 0.45em 1em; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); }
.job__lead { margin-top: var(--s-7); font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
.job__steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); counter-reset: none; }
.job__steps li { position: relative; display: grid; align-content: start; gap: var(--s-2); }
.job__steps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; border-radius: 10px; margin-bottom: var(--s-2); transition: scale 400ms var(--ease-out); }
.job__steps li:hover img { scale: 1.02; }
.job__n { position: absolute; top: var(--s-2); left: var(--s-2); font-weight: 600; font-size: var(--step--1); color: #fff; background: oklch(0.2 0.04 258 / 0.7); padding: 0.2em 0.6em; border-radius: 6px; }
.job__steps h4 { font-size: var(--step-1); font-weight: 500; }
.job__steps p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.job__steps li + li::before { content: "→"; position: absolute; left: calc(-1 * var(--s-4) / 2); top: 33%; translate: -50% -50%; color: var(--blue); font-weight: 600; }
.job .condition { margin-top: var(--s-5); }
@media (max-width: 960px) { .job__head { grid-template-columns: 1fr; } .job__steps { grid-template-columns: 1fr 1fr; } .job__steps li + li::before { display: none; } }
@media (max-width: 520px) { .job__steps { grid-template-columns: 1fr; } }

/* Field projects (fieldWork): photo cards with the headline figure on the image. */
.fw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s-6) var(--s-4); }
.fw__item { display: grid; align-content: start; gap: var(--s-2); }
/* Image, meta, title, body and customer tag share rows across each line of cards, so tags line up. */
@supports (grid-template-rows: subgrid) {
  .fw__item { grid-row: span 5; grid-template-rows: subgrid; }
  .fw__item > * { align-self: start; }
  .fw__client { grid-row: 5; }
}
.fw__item figure { position: relative; margin: 0 0 var(--s-2); overflow: hidden; border-radius: 10px; background: #000; }
.fw__item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: scale 500ms var(--ease-out); }
.fw__item:hover img { scale: 1.04; }
.fw__metric { position: absolute; left: var(--s-3); bottom: var(--s-3); font-weight: 600; font-size: var(--step-1); color: #fff; background: oklch(0.2 0.05 258 / 0.78); padding: 0.15em 0.6em; border-radius: 6px; backdrop-filter: blur(4px); }
.fw__meta { font-size: var(--step--1); font-weight: 500; color: var(--blue); }
.fw__item h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.fw__item > p:not(.fw__meta) { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.fw__client { justify-self: start; margin-top: var(--s-1); font-size: 0.82rem; font-weight: 500; padding: 0.25em 0.8em; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); }
.fw__client--pending { background: var(--warn-bg, oklch(0.95 0.06 90)); border-color: oklch(0.8 0.1 85); color: var(--warn-ink); }

/* Design → production → test strip (buildProcess). */
.bp { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.bp li { display: grid; align-content: start; justify-items: center; text-align: center; gap: var(--s-2); position: relative; }
.bp figure { width: 100%; }
.bp figure { margin: 0 0 var(--s-2); border-radius: 10px; overflow: hidden; background: #000; }
.bp img, .bp video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bp__n { font-weight: 600; font-size: var(--step--1); color: var(--blue); }
.bp h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.bp p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
@media (max-width: 1100px) { .bp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bp { grid-template-columns: 1fr 1fr; } }
/* Payloads page (/sensors) */
.pl-jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.pl-jump a { font-size: var(--step--1); font-weight: 500; padding: 0.5em 1.05em; border-radius: 999px; border: 1px solid oklch(1 0 0 / 0.35); color: var(--ink-on-dark); text-decoration: none; }
.pl-jump a:hover { border-color: var(--ink-on-dark); background: oklch(1 0 0 / 0.08); }
.pl-matrix { min-width: 760px; }
.pl-matrix thead th { vertical-align: bottom; border-bottom: 2px solid var(--ink); padding-bottom: var(--s-3); }
.pl-matrix thead button { font: inherit; font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; padding: 0.45em 0.9em; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.pl-matrix thead button:hover { border-color: var(--blue); color: var(--blue); }
.pl-matrix thead button[aria-pressed="true"] { background: var(--fascia); border-color: var(--fascia); color: var(--ink-on-dark); }
.pl-matrix td, .pl-matrix thead th:not(:first-child) { text-align: center; }
.pl-matrix tbody th { width: 34%; font-weight: 500; white-space: nowrap; color: var(--ink); }
.pl-matrix__vendor { color: var(--ink-2); font-size: var(--step--1); }
.pl-matrix__group th { padding-top: var(--s-6); font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); border-bottom: 1px solid var(--ink); }
.pl-matrix__group a { color: var(--ink); text-decoration: none; }
.pl-matrix__group a:hover { color: var(--blue); }
.pl-matrix__group th::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.6em; background: var(--blue); border-radius: 2px; vertical-align: 0.12em; }
.pl-matrix .yes { color: var(--blue); font-weight: 700; font-size: var(--step-1); }
.pl-matrix .na { color: var(--rule); }
.pl-matrix td.is-col, .pl-matrix th.is-col { background: color-mix(in oklch, var(--blue) 7%, transparent); }
.pl-matrix[data-ac] tbody tr:not(.pl-matrix__group):not(.is-fit) { opacity: 0.28; }
.pl-matrix tbody tr { transition: opacity 200ms var(--ease-out); }
.spec.pl-compare { min-width: 720px; }
.spec.pl-compare td { white-space: normal; font-size: var(--step-0); text-align: center; padding-inline: 0.5em; }
.spec.pl-compare thead th:not(:first-child) { text-align: center; padding-inline: 0.5em; }
.spec.pl-compare thead tr:last-child th { vertical-align: top; padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); }
.pl-col { display: grid; gap: 2px; justify-items: center; text-align: center; min-width: 9rem; max-width: 15rem; margin-inline: auto; }
.pl-col img { width: 100%; max-width: 12rem; height: 9rem; object-fit: contain; object-position: center bottom; margin-bottom: var(--s-3); filter: drop-shadow(0 10px 10px oklch(0.2 0.05 258 / 0.16)); }
.pl-col__vendor { font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }
.pl-col__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.pl-col__type { font-size: var(--step--1); color: var(--ink-2); font-weight: 400; }
.pl-col__blurb { margin-top: var(--s-2); font-size: var(--step--1); max-width: 30ch; color: var(--ink-2); font-weight: 400; line-height: 1.45; text-wrap: pretty; }
.pl-outputs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pl-outputs li { font-size: var(--step--1); font-weight: 500; padding: 0.35em 0.9em; border-radius: 999px; background: var(--blue-soft); color: var(--ink); }
.pl-fit td { font-size: var(--step-0) !important; font-weight: 500 !important; }
.pl-fit a { display: block; margin-block: 0.35em; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.pl-fit a:hover { color: var(--blue); }
.pl-notes { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); }
.pl-notes li { padding: var(--s-4) var(--s-5); border-radius: 10px; background: var(--blue-soft); color: var(--ink); max-width: 60ch; }
.pl-oblique { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); }
.pl-oblique li { display: grid; gap: var(--s-1); padding: var(--s-5); border: 1px solid var(--rule); border-radius: 10px; }
.pl-oblique strong { font-family: var(--font-display); font-size: var(--step-1); }
.pl-oblique span { color: var(--ink-2); }
.pl-oblique__fit { font-size: var(--step--1); color: var(--blue) !important; font-weight: 500; }

/* Mission deliverables: real output samples (missions.json > examples). */
.outputs__h { margin-top: var(--s-7); font-size: var(--step-1); font-weight: 500; }
.outputs__h + .outputs { margin-top: var(--s-4); }
.outputs { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: 0.55fr 1.4fr 1fr 1fr; gap: var(--s-4); align-items: stretch; }
.outputs figure { margin: 0; display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--s-3); }
.outputs img { display: block; width: 100%; height: clamp(220px, 24vw, 340px); object-fit: cover; border-radius: 10px; background: #000; }
.outputs figcaption { font-size: var(--step--1); font-weight: 500; color: var(--ink-2); line-height: 1.5; text-align: center; text-wrap: balance; padding-inline: var(--s-2); }
@media (max-width: 900px) { .outputs { grid-template-columns: 1fr 1fr; } .outputs img { height: 220px; } }
.pl-q { display: block; margin-top: 0.2em; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.news__summary { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.pl-col__ph { display: grid; place-items: center; width: 100%; max-width: 12rem; height: 9rem; margin-bottom: var(--s-3); border: 1px dashed var(--line-strong); border-radius: 8px; font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }
/* Text-only cases under the field cards: two-column list, title over one line of detail. */
.fw-more { list-style: none; margin: var(--s-7) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-4) var(--s-6); }
.fw-more li { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.fw-more strong { font-family: var(--font-display); font-weight: 500; font-size: var(--step-0); }
.fw-more span { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
/* FlightLync pre-flight check (systems page): clip beside the five checks. */
.pfc { align-items: center; }
.pfc video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; box-shadow: var(--shadow-desk); }
.pfc__steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); counter-reset: pfc; }
.pfc__steps li { counter-increment: pfc; font-size: var(--step--1); font-weight: 500; padding: 0.4em 0.9em; border-radius: 999px; background: color-mix(in oklch, var(--blue) 9%, transparent); color: var(--ink); }
.pfc__steps li::before { content: counter(pfc) "  "; color: var(--blue); font-weight: 600; }
/* Exhibitions strip (company page): portrait photos and one looping booth clip. */
.ev { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.ev figure { margin: 0; border-radius: 10px; overflow: hidden; background: #000; }
.ev img, .ev video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: scale 500ms var(--ease-out); }
.ev figure:hover img { scale: 1.04; }
.ev__cap { margin-top: var(--s-4); color: var(--ink-2); }
.ev__cap strong { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .ev { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev figure:nth-child(n+5) { display: none; } }
/* VL260 page: vertical 3D animation beside two feature renders. */
.vfeat { display: grid; grid-template-columns: minmax(220px, 0.42fr) 1fr; gap: var(--s-7); align-items: center; }
.vfeat__anim { margin: 0; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.7); }
.vfeat__anim video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 78vh; object-fit: cover; }
.vfeat__cards { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.vfeat__cards article { display: grid; align-content: start; justify-items: center; text-align: center; gap: var(--s-2); }
.vfeat__cards img, .vfeat__cards video { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 10px; background: #000; margin-bottom: var(--s-2); }
.vfeat__fig { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.1; color: oklch(0.8 0.11 245); }
.vfeat__cards h3 { font-size: var(--step-1); font-weight: 500; color: var(--ink-on-dark); }
.vfeat__cards p:not(.vfeat__fig) { font-size: var(--step--1); color: var(--ink-on-dark-2); line-height: 1.6; }
@media (max-width: 860px) { .vfeat { grid-template-columns: 1fr; } .vfeat__anim { max-width: 340px; margin-inline: auto; } .vfeat__cards { grid-template-columns: 1fr; } }
/* 360° turntable on aircraft pages: white render background multiplied into the wall. */
.spin-zone { padding-block: var(--s-5); }
.spin { margin: 0; cursor: grab; touch-action: pan-y; user-select: none; }
.spin.is-dragging { cursor: grabbing; }
.spin video { display: block; width: 100%; aspect-ratio: 1280 / 400; mix-blend-mode: multiply; pointer-events: none; }
.spin figcaption { text-align: center; font-size: var(--step--1); color: var(--ink-2); }
.spin figcaption::before { content: "⟲  "; color: var(--blue); }
/* Client logos (company page, D-027): round badges from the Drone Tech Brochure 2026 */
.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s-4); }
.clients li { display: grid; place-items: center; }
@media (min-width: 1100px) { .clients { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s-5); } }
.clients img { width: 100%; max-width: 88px; height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule), var(--shadow-low); transition: translate 250ms var(--ease-out); }
.clients li:hover img { translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) { .clients li:hover img { translate: none; } }

/* Mapping page: VTOL flight workflow, glowing icons (owner artwork, media/generated/workflow/) on HUD cards. */
.wf { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: none; }
.wf li { position: relative; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5) var(--s-4) var(--s-5); border-radius: 14px; background: linear-gradient(180deg, oklch(0.3 0.06 245 / 0.55), oklch(0.22 0.05 250 / 0.55)); border: 1px solid oklch(0.78 0.12 215 / 0.28); box-shadow: inset 0 -2px 0 oklch(0.78 0.14 215 / 0.45), 0 12px 30px -18px oklch(0.75 0.15 215 / 0.5); }
.wf img { height: 84px; width: 100%; object-fit: contain; margin-bottom: var(--s-3); filter: drop-shadow(0 0 6px oklch(0.8 0.14 215 / 0.55)); }
.wf__n { font-weight: 600; font-size: var(--step--1); color: oklch(0.82 0.13 215); }
.wf h3 { font-size: var(--step-1); font-weight: 500; color: var(--ink-on-dark); line-height: 1.3; }
.wf p { font-size: var(--step--1); color: var(--ink-on-dark-2); line-height: 1.55; }
.wf li:not(:nth-child(4n)):not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--s-5) / 2); top: 58px; translate: 50% 0; color: oklch(0.82 0.13 215); font-weight: 600; font-size: var(--step-2); line-height: 1; text-shadow: 0 0 8px oklch(0.8 0.14 215 / 0.6); }
@media (max-width: 960px) { .wf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wf li::after { display: none; } }
@media (max-width: 480px) { .wf { grid-template-columns: 1fr; } }
/* News (D-028): category tabs, post pages with gallery */
.news-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.news-tabs button { font: inherit; font-size: var(--step--1); font-weight: 500; padding: 0.55em 1.1em; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.news-tabs button:hover { color: var(--ink); border-color: var(--ink-2); }
.news-tabs button[aria-pressed="true"] { background: var(--fascia); border-color: var(--fascia); color: var(--ink-on-dark); }
.news__item[hidden] { display: none; }
.news__img { display: block; overflow: hidden; border-radius: 6px; }
.news__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: scale 500ms var(--ease-out); }
.news__item:hover .news__img img { scale: 1.04; }
.news__title { font-size: var(--step-1); text-wrap: pretty; }
.news__item { text-align: center; }
.news__lang { display: inline-block; margin-left: 0.4em; padding: 0.1em 0.5em; border: 1px solid var(--rule); border-radius: 4px; font-size: 0.7rem; font-weight: 500; color: var(--ink-2); vertical-align: middle; }
.news-post__head h1 { font-size: var(--step-4); max-width: 30ch; text-wrap: balance; }
.news-post { max-width: 960px; }
.news-post__cover { display: block; width: 100%; max-height: 640px; object-fit: cover; border-radius: 8px; }
.news-post__body { margin-top: var(--s-6); max-width: 68ch; }
.news-post__body p + p { margin-top: var(--s-4); }
.news-post__gallery { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); }
.news-post__gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; transition: opacity 200ms var(--ease-out); }
.news-post__gallery a:hover img { opacity: 0.85; }
.news-post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.news-post__nav a { display: grid; gap: var(--s-1); color: var(--ink); text-decoration: none; font-weight: 500; }
.news-post__nav a span { font-size: var(--step--1); color: var(--ink-2); font-weight: 400; }
.news-post__nav a:hover { color: var(--blue); }
.news-post__older { text-align: right; }
@media (prefers-reduced-motion: reduce) { .news__item:hover .news__img img { scale: none; } }
.news__title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Company page: group companies and partners, team portraits (D-028) */
.partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-4); }
.partners li { display: grid; gap: var(--s-1); align-content: start; justify-items: center; text-align: center; padding: var(--s-5); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; }
.partners img, .partners__mark { width: 56px; height: 56px; object-fit: contain; margin-bottom: var(--s-2); }
.partners__mark { display: grid; place-items: center; border-radius: 50%; background: var(--fascia); color: var(--ink-on-dark); font-family: var(--font-display); font-weight: 600; }
.partners strong { font-family: var(--font-display); font-size: var(--step-1); }
.partners span { font-size: var(--step--1); color: var(--ink-2); line-height: 1.55; }
.partners .partners__mark { font-size: var(--step-0); color: var(--ink-on-dark); line-height: 1; }
/* White logos (logoOnDark in data/team.json) sit on the navy tile. */
.partners img.on-dark { background: var(--fascia); border-radius: 12px; padding: 8px; }
/* Team cards: one row per group, four in view (two on phones), scrolled sideways with the arrows or a swipe (TeamRow). */
.team__head { max-width: 58rem; margin: var(--s-7) auto var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.team__group { margin: 0; font-size: var(--step-1); }
.team { list-style: none; margin: 0 auto; padding: 0 0 var(--s-2); max-width: 58rem; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--s-4)) / 4); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.team::-webkit-scrollbar { display: none; }
.team li { min-width: 0; scroll-snap-align: start; }
.hl-nav button:disabled { opacity: 0.35; cursor: default; border-color: var(--rule); color: var(--ink); }
.team li { display: grid; align-content: start; justify-items: center; text-align: center; gap: 2px; }
.team img { width: 100%; height: auto; aspect-ratio: 364 / 500; object-fit: cover; border-radius: 8px; margin-bottom: var(--s-2); }
/* Team card drawn around a plain cut-out photo (TeamCard, member.framed = false): frame-back, photo, frame-front, then the names. Positions are % of the 364 × 500 frame. */
.team-card { position: relative; width: 100%; aspect-ratio: 364 / 500; margin: 0 0 var(--s-2); container-type: inline-size; background: url("/images/about/team/frame-back.webp") 0 0 / 100% 100% no-repeat; }
.team .team-card__photo { position: absolute; left: 2.5%; top: 7%; width: 77%; height: 75%; aspect-ratio: auto; margin: 0; object-fit: cover; object-position: 50% 0; border-radius: 0; background: none; }
.team-card__front { position: absolute; inset: 0; background: url("/images/about/team/frame-front.webp") 0 0 / 100% 100% no-repeat; }
.team-card__side { position: absolute; top: 8%; left: 79%; width: 16%; height: 62%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5cqw; writing-mode: vertical-rl; overflow: hidden; white-space: nowrap; text-transform: uppercase; color: #f2f8fc; text-shadow: 0 0 2px oklch(0.3 0.05 240 / 0.45); }
.team-card__fullname { font-family: var(--font-display); font-size: 6cqw; font-weight: 500; letter-spacing: 0.08em; line-height: 1; }
.team-card__role { font-size: 2.3cqw; letter-spacing: 0.12em; line-height: 1; opacity: 0.9; }
.team-card__nick { position: absolute; left: 10%; width: 46%; top: 82%; height: 4%; display: grid; place-items: center; font-family: var(--font-display); font-size: 5.4cqw; font-weight: 500; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; color: #f2f8fc; text-shadow: 0 0 2px oklch(0.3 0.05 240 / 0.45); white-space: nowrap; }
.team strong { font-family: var(--font-display); font-size: var(--step-0); }
.team__name { font-size: var(--step--1); color: var(--ink); }
.team__role { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
/* Airosight survey services page (D-028) */
.ao-head__logo { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; background: #000; margin-bottom: var(--s-4); }
.ao-intro__photos { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s-3); }
.ao-intro__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.ao-intro__photos img:first-child { grid-row: 1 / 3; aspect-ratio: 3 / 4; }
.ao-svc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.ao-svc--flip > :first-child { order: 2; }
.ao-svc__media { display: grid; gap: var(--s-3); }
.ao-svc__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; }
.ao-svc__imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.ao-svc__imgs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.ao-svc h2 { font-size: var(--step-3); text-wrap: balance; }
.ao-svc h3 { margin-top: var(--s-5); font-size: var(--step-1); }
.ao-svc p { margin-top: var(--s-3); color: var(--ink-2); max-width: 62ch; }
.ao-svc__sub { margin: 0 0 var(--s-2) !important; font-size: var(--step--1); font-weight: 600; color: var(--blue) !important; }
.ao-svc__extra { margin-top: var(--s-5); }
.ao-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-4); }
.ao-steps li { counter-increment: s; padding: var(--s-4) var(--s-4) var(--s-5); border-top: 2px solid oklch(0.72 0.13 230 / 0.6); color: var(--ink-on-dark); font-weight: 500; line-height: 1.45; }
.ao-steps li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: var(--s-2); font-family: var(--font-display); font-size: var(--step-1); color: oklch(0.78 0.12 230); font-variant-numeric: tabular-nums; }
.ao-gallery { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: var(--s-3); }
.ao-gallery li { break-inside: avoid; margin-bottom: var(--s-3); }
.ao-gallery img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 860px) { .ao-svc { grid-template-columns: 1fr; } .ao-svc--flip > :first-child { order: 0; } }
/* Contact: office photo and map; company intro film (D-028) */
.office { display: block; width: 100%; height: auto; margin-top: var(--s-5); }
.office-map { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: var(--s-4); border: 0; border-radius: 8px; background: var(--wall-2); }
.intro-film { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
/* Mesh datalink scene: text-free photo, links and labels drawn on top (scripts/build/datalink.mjs) */
.dl { margin: 0; }
.dl__stage { position: relative; border-radius: 10px; overflow: hidden; container-type: inline-size; }
.dl__stage img { display: block; width: 100%; height: auto; }
.dl__links { position: absolute; inset: 0; width: 100%; height: 100%; }
.dl__link { fill: none; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px oklch(0.2 0.06 258 / 0.7)); }
.dl__link--lan { stroke: oklch(0.98 0 0); stroke-width: 3; stroke-dasharray: 4 7; }
.dl__link--mesh { stroke: oklch(0.8 0.13 230); stroke-width: 3.5; stroke-dasharray: 14 10; animation: dl-flow 1.6s linear infinite; }
.dl__dot { fill: oklch(0.8 0.13 230); stroke: oklch(0.98 0 0); stroke-width: 3; vector-effect: non-scaling-stroke; }
@keyframes dl-flow { to { stroke-dashoffset: -48; } }
.dl__tag { position: absolute; margin: 0; max-width: 26%; padding: 0.6em 0.95em; border-radius: 8px; background: oklch(0.2 0.06 258 / 0.86); color: var(--ink-on-dark-2); font-size: clamp(0.7rem, 1.3cqi, 1.05rem); line-height: 1.4; box-shadow: 0 6px 18px oklch(0 0 0 / 0.25); }
.dl__tag strong { display: block; color: var(--ink-on-dark); font-family: var(--font-display); font-weight: 600; font-size: 1.2em; }
/* Scene labels: a numbered name chip in open space beside each point; the descriptions are in the node cards below. */
.dl__pin { position: absolute; margin: 0; translate: -50% -50%; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.3em 0.75em 0.3em 0.3em; border-radius: 999px; background: oklch(0.2 0.06 258 / 0.78); backdrop-filter: blur(4px); color: var(--ink-on-dark); font: 600 clamp(0.68rem, 1.05cqi, 0.95rem)/1.2 var(--font-display); white-space: nowrap; box-shadow: 0 4px 12px oklch(0 0 0 / 0.22); }
.dl__pin b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--blue); font-size: 0.85em; }
.dl-scenes + .chain { margin-top: var(--s-6); }
.dl figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-size: var(--step-0); color: var(--ink-2); }
.zone--dark .dl figcaption { color: var(--ink-on-dark-2); }
.dl__key { display: inline-flex; align-items: center; gap: var(--s-2); }
.dl__key i { display: inline-block; width: 28px; height: 0; border-top: 3px dashed; }
.dl__key-lan { border-color: var(--ink-2) !important; border-top-style: dotted !important; }
.zone--dark .dl__key-lan { border-color: var(--ink-on-dark) !important; }
.dl__key-mesh { border-color: oklch(0.62 0.14 235) !important; }
.dl__note { margin-left: auto; }
@container (max-width: 640px) { .dl__tag span { display: none; } }
@media (prefers-reduced-motion: reduce) { .dl__link--mesh { animation: none; } }
.dl__link--direct { stroke: oklch(0.83 0.15 75); stroke-width: 3; stroke-dasharray: 2 9; animation: dl-flow 2.4s linear infinite reverse; }
.dl__key-direct { border-color: oklch(0.7 0.15 70) !important; border-top-style: dotted !important; }
@media (prefers-reduced-motion: reduce) { .dl__link--direct { animation: none; } }
/* Datalink scenarios: tabs, 4G/5G link, path strip to the command centre */
.dl-tabs { margin-bottom: var(--s-4); }
.zone--dark .dl-tabs button { background: transparent; color: var(--ink-on-dark-2); border-color: oklch(1 0 0 / 0.3); }
.zone--dark .dl-tabs button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.dl[hidden] { display: none; }
.dl__link--cell { stroke: oklch(0.82 0.17 150); stroke-width: 3.5; stroke-dasharray: 12 9; animation: dl-flow 1.4s linear infinite; }
.dl__key-cell { border-color: oklch(0.7 0.17 150) !important; }
.dl-path { list-style: none; margin: var(--s-4) 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-weight: 600; }
.dl-path li { padding: 0.5em 1em; border-radius: 999px; background: oklch(0.82 0.17 150 / 0.16); border: 1px solid oklch(0.7 0.17 150 / 0.6); }
.dl-path li + li::before { content: "→"; margin-right: var(--s-3); color: oklch(0.7 0.17 150); }
@media (prefers-reduced-motion: reduce) { .dl__link--cell { animation: none; } }

/* Datalink on phones: the chips shrink to their number and the names list sits below the photo (D-030).
   720 px, not 640: between them the chip font sits at its minimum and chips 2 and 3 touch. */
.dl__names { display: none; }
@media (max-width: 720px) {
  .dl__pin { padding: 0.2em; }
  .dl__pin span { display: none; }
  .dl__names { display: grid; gap: var(--s-2); list-style: none; margin: var(--s-4) 0 0; padding: 0; counter-reset: dl; }
  .dl__names li { counter-increment: dl; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 var(--s-3); align-items: baseline; font-size: var(--step--1); color: var(--ink-2); }
  .dl__names li::before { content: counter(dl); grid-row: span 2; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--fascia); color: var(--ink-on-dark); font: 600 0.75rem/1 var(--font-display); }
  .dl__names strong { color: var(--ink); font-weight: 500; }
  .zone--dark .dl__names li { color: var(--ink-on-dark-2); }
  .zone--dark .dl__names strong { color: var(--ink-on-dark); }
  .zone--dark .dl__names li::before { background: var(--blue); }
}

/* Compare table on phones: a narrower label column so two aircraft show beside it. */
@media (max-width: 600px) {
  .spec.compare tbody th { min-width: 8.5rem; padding-right: var(--s-3); font-size: var(--step--1); }
  .spec.compare td { font-size: var(--step-0); }
}

/* Payload tables on phones: narrow label column; product columns keep a readable minimum and scroll sideways. */
@media (max-width: 600px) {
  .pl-matrix tbody th { width: auto; min-width: 8.5rem; white-space: normal; font-size: var(--step--1); }
  .pl-matrix { min-width: 0; }
  .pl-matrix thead button { padding: 0.4em 0.7em; }
  .spec.pl-compare { min-width: 0; }
  .spec.pl-compare tbody th { width: auto; min-width: 7.5rem; font-size: var(--step--1); }
  .pl-col { min-width: 8rem; }
  .pl-col__blurb { display: none; }
}

/* 3D model (VL390): a still render with a load button until the visitor opens the model. */
.m3d { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, var(--fascia-2), var(--fascia)); border: 1px solid oklch(0.45 0.08 258); }
.m3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6% 8% 14%; transition: opacity 400ms var(--ease-out); }
.m3d__load { position: absolute; left: 50%; bottom: var(--s-5); translate: -50% 0; z-index: 1; }
.m3d__size { font-weight: 400; opacity: 0.75; margin-left: 0.4em; }
.m3d model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; opacity: 0; transition: opacity 400ms var(--ease-out); }
.m3d.is-live model-viewer { opacity: 1; }
.m3d.is-live .m3d__poster, .m3d.is-live .m3d__load { opacity: 0; pointer-events: none; }
.m3d__hint { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-on-dark-2); }
@media (max-width: 640px) { .m3d { aspect-ratio: 4 / 3; } }

/* Standard tests (/systems#tests): copy beside a lab photo grid, the first photo large. */
/* Certification marks level with the safety tests heading; under the lead on narrow screens. */
.tests__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: start; }
.tests__marks { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: flex; align-items: center; gap: var(--s-6); }
.tests__marks img { display: block; width: auto; height: 7.5rem; }
@media (max-width: 860px) {
  .tests__head { grid-template-columns: 1fr; gap: 0; }
  .tests__head .zone__head { margin-bottom: var(--s-5); }
  .tests__marks { margin-bottom: var(--s-6); gap: var(--s-5); }
  .tests__marks img { height: 5rem; }
}
.tests { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--s-7); align-items: start; }
.tests__copy h3 { font-size: var(--step-1); }
.tests__lab { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink-2); }
.tests__gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.tests__gallery li:first-child { grid-column: 1 / -1; }
.tests__gallery figure { margin: 0; }
.tests__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.tests__gallery li:first-child img { aspect-ratio: 16 / 9; }
.tests__gallery figcaption { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
@media (max-width: 900px) { .tests { grid-template-columns: 1fr; gap: var(--s-6); } }
@media (max-width: 560px) { .tests__gallery { grid-template-columns: 1fr 1fr; } .tests__gallery li:last-child { display: none; } }
/* /sensors: photos from payload test flights, 3 across (2 on phones) */
.pl-tests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.pl-tests img, .pl-tests .clip { display: block; aspect-ratio: 4 / 3; border-radius: 6px; }
@media (max-width: 860px) { .pl-tests { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-3); } }

/* Portrait clip (Airosight SLAM): phone-shaped frame in the media column, never stretched to 16:9. */
.ao-svc__media .ao-svc__portrait { margin: var(--s-3) 0 0; justify-self: center; width: min(100%, 340px); }
.ao-svc__media .ao-svc__portrait video { aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; }
.ao-svc__portrait figcaption { text-align: center; }

/* Service with a clip (training: simulator): photo above, clip below, in one column. */
.service__media { display: grid; gap: var(--s-4); }
.service--flip .service__media { order: 2; }
.service__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; }
.tests__clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.tests__clips video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #000; }
.tests__clips figcaption { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 700px) { .tests__clips { grid-template-columns: 1fr; } }
.tests__all { margin-top: var(--s-1); font-size: var(--step--1); color: var(--ink-2); }

/* Home hero: the VL260 hangar animation full-bleed behind the copy (owner, as on the old site, D-036). */
.backwall--video { min-height: clamp(520px, 80vh, 860px); display: grid; align-items: center; background: var(--fascia); }
.backwall__bg { position: absolute; inset: 0; }
.backwall__bg .clip { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.backwall--video::after {
  background:
    linear-gradient(90deg, oklch(0.18 0.06 258 / 0.92) 0%, oklch(0.18 0.06 258 / 0.7) 38%, oklch(0.18 0.06 258 / 0.1) 70%),
    linear-gradient(180deg, oklch(0.18 0.06 258 / 0) 60%, oklch(0.18 0.06 258 / 0.7) 100%);
}
.backwall--video .backwall__copy { padding-block: var(--s-9); }
@media (max-width: 760px) {
  .backwall--video::after { background: linear-gradient(180deg, oklch(0.18 0.06 258 / 0.3) 0%, oklch(0.18 0.06 258 / 0.82) 60%); }
  .backwall__bg .clip { object-position: 55% 30%; }
}

/* Call-out on the Xtrix page: numbered points on the render, names and notes as live text below. */
.co__fig { position: relative; margin: 0 auto var(--s-7); max-width: 1100px; }
.co__fig img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 20px oklch(0 0 0 / 0.4)); }
.co__pt { position: absolute; translate: -50% -50%; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--blue); border: 2px solid var(--ink-on-dark); color: #fff; font: 600 0.8rem/1 var(--font-display); }
.co__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-7); }
.co__lists h3 { font-size: var(--step-1); }
.co__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.co__list li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s-1) var(--s-3); align-items: baseline; }
ol.co__list { counter-reset: co; }
.co__list li { counter-increment: co; }
.co__list li::before { content: counter(co); grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--blue); color: #fff; font: 600 0.8rem/1 var(--font-display); }
.co__list--inside li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 0; margin: 0.45em auto 0; }
.co__list strong { grid-column: 2; font-weight: 500; color: var(--ink-on-dark); }
.co__list span { grid-column: 2; font-size: var(--step--1); line-height: 1.6; color: var(--ink-on-dark-2); }
@media (max-width: 640px) { .co__pt { width: 1.3rem; height: 1.3rem; font-size: 0.7rem; border-width: 1.5px; } }

/* Mapping: one real map cut to each aircraft's area per flight (same width, height ∝ area), then three figures. */
/* แถบแนวตั้งสูงเท่ากัน กว้างตามพื้นที่ต่อเที่ยว (--cover-cols) — ภาพตัดจากมุมเดียวกันของแผนที่ สเกลเท่ากัน */
.cover { display: grid; grid-template-columns: var(--cover-cols, 1fr); gap: var(--s-5); margin-top: var(--s-6); align-items: start; }
.cover__row { margin: 0; display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.cover__map { height: clamp(320px, 40vw, 520px); overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 18px 40px -24px oklch(0.25 0.06 258 / 0.6); }
.cover__map img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.cover__row:not(.cover__row--ics) .cover__map img { filter: saturate(0.75); }
.cover__row figcaption { display: grid; gap: var(--s-1); padding-top: var(--s-1); }
.cover__row figcaption svg { width: 40px; height: 40px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; margin-bottom: var(--s-1); }
.cover__row--ics figcaption svg { stroke: var(--blue); }
.cover__row figcaption strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--ink); }
.cover__row figcaption span { font-size: var(--step--1); color: var(--ink-2); }
.cover__stats { margin: var(--s-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.cover__stats div { display: grid; gap: var(--s-1); align-content: start; }
.cover__stats dt { font-size: var(--step--1); font-weight: 500; color: var(--ink-2); }
.cover__stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.cover__stats dd small { font-size: 0.4em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.cover__stats span { font-size: var(--step--1); color: var(--ink-2); }
.cover__stats div:last-child dd { color: var(--blue); }
.cover ~ .condition, .sc ~ .condition { max-width: none; }
.sc ~ .condition { margin-top: var(--s-5); }
@media (max-width: 720px) { .cover { grid-template-columns: 1fr; } .cover__map { height: auto; aspect-ratio: var(--cover-ratio); } .cover__row { grid-template-columns: 1fr; gap: var(--s-2); } .cover__row figcaption { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-3); } .cover__row figcaption svg { grid-row: span 2; margin: 0; } .cover__stats { grid-template-columns: 1fr; } }

/* Scenario charts: both panels start at the same line and end at the same height. */
@supports (grid-template-rows: subgrid) {
  .sc { grid-template-rows: auto auto 1fr; }
  .sc__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s-3); }
  .sc__item > .sc__chart { margin-top: var(--s-2); height: auto; align-self: stretch; }
}

/* Supported payloads on aircraft pages (D-037): model cards grouped by type; a tap opens a short spec card (popover). */
.plc-groups { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-5); }
.plc-group h3 { font-size: var(--step-0); font-weight: 500; color: var(--ink); margin-bottom: var(--s-2); }
.plc-group h3::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.6em; background: var(--blue); border-radius: 2px; vertical-align: 0.12em; }
.plc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-3); }
.plc__card { all: unset; box-sizing: border-box; display: grid; gap: 2px; width: 100%; text-align: center; text-wrap: balance; cursor: pointer; border-radius: 10px; }
.plc__card--type { cursor: default; }
.plc__card img, .plc__ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--s-3); margin-bottom: var(--s-2); background: radial-gradient(ellipse at 50% 45%, var(--surface), var(--wall-2)); border: 1px solid var(--rule); border-radius: 10px; transition: border-color 200ms var(--ease-out), translate 300ms var(--ease-out); }
.plc__ph { background: radial-gradient(ellipse at 50% 40%, var(--fascia-2), var(--fascia)); }
.plc__vendor { font-size: var(--step--1); color: var(--ink-2); line-height: 1.3; }
.plc__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--ink); line-height: 1.3; }
.plc__card--type .plc__name { font-weight: 500; font-size: var(--step--1); }
@media (hover: hover) { button.plc__card:hover img { border-color: var(--blue); translate: 0 -2px; } button.plc__card:hover .plc__name { color: var(--blue); } }
.plc__card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.plc__pop { width: min(92vw, 26rem); padding: var(--s-5); border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-desk); }
.plc__pop::backdrop { background: oklch(0.2 0.05 258 / 0.35); }
.plc__pop-h { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
.plc__pop-h span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--ink-2); }
.plc__pop-lead { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.plc__pop dl { margin: var(--s-4) 0 0; display: grid; }
.plc__pop dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding-block: 0.55em; border-top: 1px solid var(--rule); align-items: baseline; }
.plc__pop dt { font-size: var(--step--1); color: var(--ink-2); }
.plc__pop dd { margin: 0; font-family: var(--font-display); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.plc__pop dd small { font-size: 0.72em; color: var(--ink-2); font-weight: 500; }
.plc__q { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--ink-2); }
.plc__pop-foot { margin-top: var(--s-4); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--step--1); }
.plc__pop-foot button { font: inherit; padding: 0.4em 0.9em; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); cursor: pointer; }
.plc__pop-foot button:hover { color: var(--ink); border-color: var(--ink-2); }

/* Planner assumptions box (.basis): standard settings and per-aircraft figures as a compact grid, not a paragraph. */
.basis { grid-column: 1 / -1; margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.basis__h { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--ink); }
.basis__grid { margin: var(--s-4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-3) var(--s-5); }
.basis__grid div { display: grid; gap: 2px; padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.basis__grid dt::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; background: var(--data-ics); border-radius: 2px; vertical-align: 0.1em; }
.basis__grid .basis__ref dt::before { background: var(--data-ref); }
.basis__grid div:first-child dt::before { display: none; }
.basis__grid dt { font-size: var(--step--1); color: var(--ink-2); }
.basis__grid dd { margin: 0; font-weight: 600; font-size: var(--step-0); color: var(--ink); }
.basis__note { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.cover ~ .condition { margin-top: var(--s-5); }
.job .condition { max-width: none; }

/* Test equipment: one photo card per model (maker photos, credited below the grid). */
.te { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-5) var(--s-4); }
.te__item { display: grid; align-content: start; gap: var(--s-2); text-align: center; text-wrap: balance; }
.te__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); background: #fff; margin-bottom: var(--s-2); }
.te__item h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.te__item p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.te__item a { justify-self: center; display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--step--1); font-weight: 500; }
.te__item a svg { width: 1em; height: 1em; }
.te__credit { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); }

/* Planner chart: small print under the bars (settings are for comparing, real flights vary). */
.chart__note { margin: var(--s-3) 0 0; font-size: var(--step--2); color: var(--ink-2); line-height: 1.5; }

/* Copy beside a tall picture stack stays in view while the pictures scroll (no empty band under it). */
.ao-svc > div:not(.ao-svc__media), .tests__copy { position: sticky; top: 6rem; align-self: start; }
@media (max-width: 860px) { .service > div:not(.service__media), .ao-svc > div:not(.ao-svc__media), .tests__copy { position: static; } }
/* Phones: two cards and a sliver of the next, so the row reads as swipeable (the arrows are hidden there). */
@media (max-width: 600px) { .team { grid-auto-columns: 43%; } }

/* ── Phone fixes (mobile review 2026-11-02) ── */
/* Header at 360: the demo button never wraps; with the menu open it gives way to the language switch. */
@media (max-width: 520px) {
  .fascia__bar { gap: var(--s-3); }
  .fascia__meta { gap: var(--s-2); }
  .fascia__cta { white-space: nowrap; }
  .nav[data-open="true"] ~ .fascia__meta .fascia__cta { display: none; }
}
@media (max-width: 380px) { .fascia__cta { font-size: 0.78rem; padding-inline: 0.6em; } }
/* A grid or flex child holding a scrolling table must be allowed to shrink, or the whole page scrolls sideways. */
.planner > *, .two-up > *, .split > *, .pdp-specs > * { min-width: 0; }
/* A table wider than its box shows a soft shadow on the side that still has more to scroll. */
.table-wrap {
  background:
    linear-gradient(to right, var(--sticky-bg) 30%, transparent) 0 0 / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--sticky-bg) 30%, transparent) 100% 0 / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in oklch, currentColor 28%, transparent), transparent) 0 0 / 0.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in oklch, currentColor 28%, transparent), transparent) 100% 0 / 0.9rem 100% no-repeat scroll;
}
/* Names under pictures are centred on the safety page too. */
.tests__gallery figcaption { text-align: center; }
/* The 3D model button keeps its label on one line and stays inside the picture. */
.m3d__load { width: max-content; max-width: calc(100% - 2 * var(--s-4)); }