/* Generated by scripts/build.mjs. Edit the files in src/ instead. */
/* ==========================================================================
   Ideal Systems. Design rules live in DESIGN.md.
   Dark only (Apple Pro page style), Ideal Sans + Monaspace Neon, 44pt targets,
   all motion gated behind prefers-reduced-motion.
   ========================================================================== */

/* ---------- Fonts ---------- */

/* Ideal Sans: a single-file Latvian subset of Mona Sans (OFL 1.1), renamed as the licence requires.
   One file keeps kerning across accented letters (Tā, Vē), which split unicode-range files lose. */
@font-face {
  font-family: "Ideal Sans";
  src: url("../fonts/IdealSans-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 112.5%;
  font-style: normal;
  font-display: swap;
}
/* Monaspace Neon (OFL 1.1): live data only, such as bearings, coordinates and timestamps */
@font-face {
  font-family: "Monaspace Neon";
  src: url("../fonts/MonaspaceNeon-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #000;
  --bg-2: #0a0a0b;
  --card: #0e0e10;
  --raise-1: #161618;
  --raise-2: #1c1c1e;
  --raise-3: #26262a;
  --glass: rgb(28 28 30 / 0.6);
  --glass-strong: rgb(28 28 30 / 0.78);

  /* Text */
  --label: #f5f5f7;
  --label-2: #a1a1a6;
  --label-3: #86868b;
  --label-4: #6e6e73;

  /* Lines */
  --hair: rgb(255 255 255 / 0.1);
  --hair-strong: rgb(255 255 255 / 0.16);
  --ring: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --ring-strong: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  --catch: linear-gradient(165deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.07) 32%, rgb(255 255 255 / 0.03) 64%, rgb(255 255 255 / 0.12));

  /* Meaning */
  --signal: #30d1d4;                       /* the Spotguard signal: dots, pings, bearings, icons */
  --signal-soft: rgb(48 209 212 / 0.14);
  --threat: #ff453a;                       /* jammer, theft, alarm */
  --ok: #30d158;                           /* recovered, confirmed */
  --amber: #ff9f0a;

  /* Depth */
  --shadow-contact: 0 30px 60px -40px rgb(0 0 0 / 0.9);
  --shadow-float: 0 1px 1px rgb(0 0 0 / 0.3), 0 4px 8px -2px rgb(0 0 0 / 0.4), 0 16px 32px -8px rgb(0 0 0 / 0.5), 0 40px 80px -24px rgb(0 0 0 / 0.6);
  --highlight: inset 0 1px rgb(255 255 255 / 0.16);

  /* White-speck grain: it only ever lightens, so it never muddies a dark surface */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Shape */
  --radius-xl: 28px;
  --radius-l: 20px;
  --radius-m: 14px;
  --radius-s: 10px;

  /* Type */
  --font: "Ideal Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --font-mono: "Monaspace Neon", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wide: 112.5%;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring-snappy: cubic-bezier(0.3, 1.2, 0.4, 1);

  /* Layout */
  --nav-h: 76px;
  --wrap: 1120px;
  --gutter-l: max(20px, env(safe-area-inset-left));
  --gutter-r: max(20px, env(safe-area-inset-right));
  --section-gap: clamp(96px, 10.5vw, 160px);

  /* Legacy names still used by sections that haven't been migrated yet */
  --brand: var(--signal);
  --brand-soft: var(--signal-soft);
  --tint: var(--signal);
  --tint-hover: #63dee0;
  --tint-ink: var(--signal);
  --on-tint: #00292b;
  --bg-alt: var(--bg-2);
  --surface: var(--raise-1);
  --surface-2: var(--raise-2);
  --fill: rgb(118 118 128 / 0.24);
  --fill-strong: rgb(118 118 128 / 0.36);
  --separator: var(--hair);
  --success: var(--ok);
  --danger: #ff6961;
  --signal-ok: var(--ok);
  --signal-bad: var(--threat);
  --signal-amber: var(--amber);
  --shadow: var(--shadow-float);
  --focus: 0 0 0 4px rgb(48 209 212 / 0.3);
}

/* Springs as linear() where supported (Safari 17.2+, Chrome 113+, Firefox 112+) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.082, 0.243, 0.413, 0.562, 0.682, 0.774, 0.841, 0.89, 0.925, 0.949, 0.965, 0.977, 0.984, 0.99, 0.993, 1);
    --spring-snappy: linear(0, 0.091, 0.276, 0.473, 0.642, 0.773, 0.866, 0.928, 0.967, 0.989, 1, 1.005, 1.006, 1.006, 1.005, 1.003, 1);
  }
}

@media (prefers-contrast: more) {
  :root {
    --label-2: #d1d1d6;
    --label-3: #c7c7cc;
    --label-4: #aeaeb2;
    --hair: rgb(255 255 255 / 0.28);
    --hair-strong: rgb(255 255 255 / 0.4);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  background: #000;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font: 400 1.0625rem/1.47 var(--font);
  font-stretch: 100%;
  font-feature-settings: "kern";
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }

a { color: var(--label); text-decoration: none; }
p a { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.2s var(--ease); }
p a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: rgb(48 209 212 / 0.32); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--label);
  color: #000;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 40px);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.wrap--narrow { max-width: calc(800px + 40px); }

/* ---------- Type ---------- */

/* Eyebrow: sentence case, grey, semibold. No caps, no letter-spacing, no colour. */
.eyebrow {
  margin-bottom: 14px;
  color: var(--label-3);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}

.hero__title, .section__title, .statement__text, .display {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-weight: 600;
  color: var(--label);
  text-wrap: balance;
}

.section__title {
  font-size: clamp(2.25rem, 1.45rem + 3.1vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.section__title--xl { font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem); line-height: 0.99; letter-spacing: -0.03em; }

/* Two-tone lead: one weight, two greys. The <strong> part carries the point. */
.section__lead, .lead {
  margin-top: 22px;
  max-width: 40em;
  color: var(--label-3);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.section__head--center .section__lead { margin-inline: auto; }
.section__lead strong, .lead strong, .two-tone strong { color: var(--label); font-weight: inherit; }

h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

/* Live data readout: bearings, coordinates, timestamps, plates */
.mono, .readout {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons & links ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.3s var(--ease), transform 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* Primary: a white pill with a soft bloom, the brightest object on any screen */
.btn--primary {
  background: var(--label);
  color: #000;
  box-shadow: inset 0 -1px rgb(0 0 0 / 0.12), 0 8px 28px -10px rgb(255 255 255 / 0.32);
}
.btn--primary:hover { background: #fff; box-shadow: inset 0 -1px rgb(0 0 0 / 0.12), 0 10px 34px -10px rgb(255 255 255 / 0.45); }

/* Secondary: glass with the light-catch edge */
.btn--secondary {
  background: var(--glass);
  color: var(--label);
  box-shadow: var(--highlight);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
.btn--secondary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--catch); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.btn--secondary:hover { background: var(--glass-strong); }

.btn--large { min-height: 52px; padding: 0 28px; }
.btn--block { width: 100%; }
.btn--small { min-height: 34px; padding: 0 16px; font-size: 0.875rem; }
.btn--small::after { content: ""; position: absolute; inset: -5px 0; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--label);
  font-size: 1.0625rem;
  font-weight: 600;
}
.link-arrow .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Signal icon: the accent appears at icon size only */
.tile-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--raise-1);
  box-shadow: var(--ring-strong), var(--highlight);
  color: var(--signal);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--raise-2);
  box-shadow: var(--ring);
  color: var(--label-2);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Live dot: a signal point with a ping */
.live-dot { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }
.live-dot--ok { background: var(--ok); }
.live-dot--threat { background: var(--threat); }
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after { animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
}
@keyframes ping { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }

/* Play / pause control for auto-playing motion (WCAG 2.2.2, as on apple.com) */
.motion-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  box-shadow: var(--highlight), var(--ring);
  color: var(--label);
  cursor: pointer;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transition: background-color 0.2s var(--ease);
}
.motion-toggle:hover { background: var(--glass-strong); }
.motion-toggle .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.motion-toggle .icon--play, .motion-toggle[aria-pressed="true"] .icon--pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon--play { display: block; }
.motion-toggle--light { background: rgb(0 0 0 / 0.55); }
.motion-toggle--light:hover { background: rgb(0 0 0 / 0.7); }

/* ---------- Sections ---------- */

.section { padding: var(--section-gap) 0; }
.section--alt { background: var(--bg-2); }
.section__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }

.split { display: grid; gap: clamp(48px, 6vw, 88px); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}

/* ---------- Surfaces ---------- */

/* Card: near-black, a 1px edge that catches light at the top-left, white-speck grain, a contact shadow */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-contact);
}
.card::before, .catch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: var(--catch);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.catch { position: relative; }
.card::after, .grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--noise) 0 0 / 160px 160px;
  opacity: 0.045;
  pointer-events: none;
}
.grain { position: relative; isolation: isolate; }

/* Glass: floating controls and overlays on photos */
.glass {
  background: var(--glass);
  box-shadow: var(--highlight), var(--ring);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn--secondary { background: var(--raise-2); }
}

/* Ruler: a tuning scale between major sections. Baseline, ticks every 12px and 60px, a centre index, faded ends. */
.ruler {
  position: relative;
  display: block;
  width: min(980px, calc(100% - 40px));
  height: 11px;
  margin: 0 auto;
  border: 0;
  background:
    linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.16)) 50% 100% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 29px, rgb(255 255 255 / 0.24) 29px 30px, transparent 30px) 50% 100% / 60px 7px repeat-x,
    linear-gradient(90deg, transparent 5px, rgb(255 255 255 / 0.13) 5px 6px, transparent 6px) 50% 100% / 12px 4px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32% 68%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32% 68%, transparent);
}
.ruler::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: rgb(255 255 255 / 0.75);
}
@media (prefers-reduced-motion: no-preference) {
  .js .ruler[data-reveal] { transform: scaleX(0.55); }
  .js .ruler[data-reveal].is-visible { transform: none; }
}

/* Photo frame: real photography with an optional legibility scrim on one side */
.photo { position: relative; overflow: hidden; background: var(--raise-1); }
.photo > img, .photo > picture > img { width: 100%; height: 100%; object-fit: cover; }
.photo--scrim-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.35) 40%, transparent 70%); pointer-events: none; }
.photo--scrim-t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.3) 40%, transparent 70%); pointer-events: none; }

/* Readout chip over photos: live data in glass */
.hud {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--label-2);
}
.hud strong { color: var(--label); font-weight: 500; }

/* ---------- Navigation: a floating glass pill ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: calc(env(safe-area-inset-top) + 12px) var(--gutter-r) 0 var(--gutter-l);
  pointer-events: none;
}

.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 980px;
  height: 52px;
  margin: 0 auto;
  padding: 0 8px 0 18px;
  border-radius: 26px;
  background: rgb(28 28 30 / 0.55);
  box-shadow: var(--highlight), 0 10px 30px -12px rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  pointer-events: auto;
  transition: background-color 0.3s var(--ease), border-radius 0.4s var(--ease);
}
.nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--catch);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.nav.is-scrolled .nav__bar { background: rgb(28 28 30 / 0.68); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__bar { background: rgb(22 22 24 / 0.97); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-right: auto;
  color: var(--label);
  border-radius: 8px;
}
.brand__mark { width: 18px; height: 24px; overflow: visible; }
.brand__word { width: 96px; height: 14px; margin-top: 2px; }

.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgb(245 245 247 / 0.8);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--label); }
/* The current section gets a signal dot, not a colour change */
.nav__links a[aria-current]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
}

.lang { display: inline-flex; padding: 2px; border-radius: 999px; background: rgb(255 255 255 / 0.06); box-shadow: var(--ring); }
.lang a {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--label-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lang a::after { content: ""; position: absolute; inset: -8px 0; }
.lang a:hover { color: var(--label); }
.lang a[aria-current] { background: rgb(255 255 255 / 0.14); color: var(--label); box-shadow: var(--highlight); }

.nav__cta { flex: none; }

.nav__toggle {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--label);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle-bar {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.nav__toggle-bar:first-child { transform: translateY(-3px); }
.nav__toggle-bar:last-child { transform: translateY(3px); }
.nav.is-open .nav__toggle-bar:first-child { transform: rotate(45deg); }
.nav.is-open .nav__toggle-bar:last-child { transform: rotate(-45deg); }

@media (min-width: 900px) {
  .nav__panel { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 20px; }
  .nav__links { display: flex; gap: 26px; margin-inline: auto; }
  .brand { margin-right: 0; }
}

/* Small screens: the pill keeps the logo, the call to action and a menu button. The menu drops down as a glass sheet. */
@media (max-width: 899.98px) {
  .nav__toggle { display: block; }
  .nav__bar { gap: 6px; padding-right: 4px; }
  .nav__panel { display: none; }
  .nav.is-open .nav__bar { background: #1c1c1e; }
  /* Dim the page behind the open menu */
  .nav.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fade-in 0.35s var(--ease-out);
  }
  .nav.is-open .nav__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100dvh - 100px);
    padding: 12px 20px 22px;
    overflow-y: auto;
    border-radius: 26px;
    /* Opaque: a backdrop blur can't work inside the bar's own backdrop blur */
    background: #161618;
    box-shadow: var(--highlight), var(--ring), var(--shadow-float);
    animation: sheet-in 0.45s var(--ease);
    transform-origin: top center;
  }
  .nav__links li + li { border-top: 1px solid var(--hair); }
  .nav__links a {
    width: 100%;
    min-height: 54px;
    color: var(--label);
    font-size: 1.375rem;
    font-weight: 600;
    font-stretch: var(--wide);
    letter-spacing: -0.015em;
  }
  .nav__links a[aria-current]::after { bottom: auto; top: calc(50% - 2px); left: auto; right: 4px; }
  .nav .lang { align-self: flex-start; }
  .has-menu-open { overflow: hidden; }
}
@media (max-width: 379.98px) {
  .brand__word { display: none; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---------- Brand motifs: animated logo, odometer ---------- */

/* Logo assembles itself on load: body settles, the chevron slides in, the flag lifts and pings */
.logo-anim use { transform-box: fill-box; }
.logo-anim .lm-body, .logo-anim .lm-chev { fill: currentColor; }
.lm-ping { fill: none; stroke: var(--brand); stroke-width: 22000; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .logo-anim .lm-body { animation: lm-body 0.9s var(--ease-out) 0.15s both; }
  .logo-anim .lm-chev { animation: lm-chev 0.9s var(--ease-out) 0.4s both; }
  .logo-anim .lm-flag { transform-origin: 50% 100%; animation: lm-flag 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both; }
  .logo-anim .lm-ping { animation: lm-ping 1.6s var(--ease-out) 1.35s; }
  .brand:hover .lm-ping, .brand:focus-visible .lm-ping { animation: lm-ping 1.4s var(--ease-out); }
}
@keyframes lm-body { from { opacity: 0; transform: translateY(12%); } }
@keyframes lm-chev { from { opacity: 0; transform: translateX(-28%); } }
@keyframes lm-flag { from { opacity: 0; transform: translateY(30%) scaleY(0.2); } }
@keyframes lm-ping { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(3.2); } }

/* Odometer: each digit is a reel of 0-9 twice; it rolls past one full turn and lands on its value */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.odo__digit { position: relative; display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -0.12em; -webkit-mask-image: linear-gradient(transparent, #000 10% 90%, transparent); mask-image: linear-gradient(transparent, #000 10% 90%, transparent); }
.odo__reel { display: flex; flex-direction: column; transform: translateY(0); }
.odo__reel span { height: 1em; line-height: 1; }
.odo__sep { display: inline-block; }
.odo.is-rolled .odo__reel { transform: translateY(calc(var(--to) * -1em)); }
@media (prefers-reduced-motion: no-preference) {
  .odo__reel {
    transition: transform 2.2s cubic-bezier(0.12, 0.8, 0.18, 1), filter 2.2s cubic-bezier(0.12, 0.8, 0.18, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
    filter: blur(0);
  }
  .odo:not(.is-rolled) .odo__reel { filter: blur(2.5px); }
}

/* ---------- 1 · Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  z-index: 1;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 80px));
  overflow: hidden;
  overflow: clip visible;
  text-align: center;
  background: var(--bg);
}
/* A soft black lip over the top of the next section, so the hero runs into it without a seam */
.hero::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: clamp(96px, 15vh, 150px);
  background: linear-gradient(#000, rgb(0 0 0 / 0.82) 22%, rgb(0 0 0 / 0.5) 48%, rgb(0 0 0 / 0.2) 74%, transparent);
  pointer-events: none;
}

.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero__eyebrow { color: var(--label-3); font-size: 1.0625rem; font-weight: 600; }
.hero__title {
  margin-top: 14px;
  font-size: clamp(2.875rem, 0.9rem + 6.2vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero__title span { display: inline-block; }
.hero__lead {
  max-width: 34em;
  margin-top: 24px;
  color: var(--label-3);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.hero__lead strong { color: var(--label); font-weight: inherit; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; margin-top: 34px; }
.hero__actions .btn--secondary { padding-right: 20px; }
.hero__actions .btn--secondary .icon { width: 16px; height: 16px; stroke-width: 2.25; margin-right: -4px; transition: transform 0.3s var(--ease-out); }
.hero__actions .btn--secondary:hover .icon { transform: translateX(2px); }

/* RF spectrum waterfall behind the headline (drawn by 20-hero.js): a faint instrument screen, frequency across and
   time flowing down. Its edges dissolve through a neutral mask; the canvas holds its own (low) intensities. */
.hero__spectrum {
  position: absolute;
  top: calc(var(--nav-h) + clamp(0px, 2vh, 24px));
  left: 50%;
  z-index: -1;
  width: min(92%, 1240px);
  height: clamp(260px, 42vh, 440px);
  translate: -50% 0;
  pointer-events: none;
}
.hero__wf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.4s var(--ease-out) 0.6s;
  -webkit-mask-image: linear-gradient(transparent, #000 30% 64%, transparent), linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 30% 64%, transparent), linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  mask-composite: intersect;
}
.hero__spectrum[data-ready] .hero__wf { opacity: 1; }

/* Frequency scale along the top edge: hairline ticks, three band names and the beacon's channel marker */
.hero__scale {
  position: absolute;
  inset: 0 0 auto;
  height: 22px;
  opacity: 0;
  transition: opacity 2.4s var(--ease-out) 1s;
}
.hero__spectrum[data-ready] .hero__scale { opacity: 1; }
.hero__scale::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.09) 1px, transparent 0) 0 100% / 12px 4px repeat-x,
    linear-gradient(90deg, rgb(255 255 255 / 0.16) 1px, transparent 0) 0 100% / 60px 8px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 26% 74%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 26% 74%, transparent 96%);
}
.hero__scale span {
  position: absolute;
  bottom: 9px;
  left: calc(var(--f) * 100%);
  translate: -50% 0;
  color: var(--label-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}
.hero__mark {
  position: absolute;
  bottom: 9px;
  left: calc(var(--f) * 100%);
  width: 5px;
  height: 5px;
  translate: -50% -3px;
  border-radius: 50%;
  background: var(--signal);
}

/* Stage: the 3D device on its bearing dial */
.hero__stage {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: min(100%, 1300px, 118vh);
  aspect-ratio: 2 / 1;
  margin: clamp(-190px, -14vh, -40px) auto 0;
  /* The dial dissolves into the page instead of being cut by the canvas edge */
  --fade-b: linear-gradient(#000 76%, rgb(0 0 0 / 0.55) 87%, rgb(0 0 0 / 0.15) 95%, transparent);
  --fade-x: linear-gradient(90deg, transparent, #000 11% 89%, transparent);
  -webkit-mask-image: var(--fade-b), var(--fade-x);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-b), var(--fade-x);
  mask-composite: intersect;
}
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster { object-fit: contain; transition: opacity 0.8s var(--ease); }
.hero__canvas { opacity: 0; transition: opacity 0.8s var(--ease); }
.hero__stage.is-live .hero__canvas { opacity: 1; }
.hero__stage.is-live .hero__poster { opacity: 0; }

.hero__toggle { position: absolute; right: var(--gutter-r); bottom: clamp(16px, 3vh, 28px); z-index: 3; }

/* Short, wide windows: tuck the empty back of the dial further under the buttons so the device clears the fold */
@media (min-width: 760px) and (max-height: 780px) {
  .hero__stage { margin-top: clamp(-190px, -19vh, -40px); }
}

@media (max-width: 759.98px) {
  .hero__stage { aspect-ratio: 4 / 3; width: 100%; margin-top: -8px; }
}

/* Intro choreography: copy, then the device */
@media (prefers-reduced-motion: no-preference) {
  .intro {
    opacity: 0;
    animation: intro 1s var(--spring) forwards;
    animation-delay: calc(var(--d, 0) * 100ms + 100ms);
  }
  .hero__stage.intro { animation-name: intro-stage; animation-duration: 1.8s; animation-timing-function: var(--ease-out); }
}
@keyframes intro { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes intro-stage { from { opacity: 0; transform: translateY(40px) scale(0.94); } to { opacity: 1; transform: none; } }

/* ---------- 2 · Statement ---------- */
/* A photograph, not a slide: the empty bay where the car stood. The problem lights up word by word while the
   frame holds still, the bay is marked like a still from a security camera, then the problem settles back to
   grey so the answer is the last thing left in white. Scroll values (--p lit, --b bay, --q settle, --v view)
   are written by 21-statement.js; without them the section shows its final, static state. */

.statement { position: relative; background: #000; }
.statement__pin {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(20px, 5.5vh, 64px)) 0 clamp(200px, 34vh, 340px);
  overflow: hidden;
  overflow: clip;
}

/* Scene: the photo sits on a frame with its own aspect ratio, so the bay overlay stays on the painted lines
   at every crop. --fx is the point kept in view across, --zoom crops tighter. */
.statement__scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; background: #000; }
.statement__frame {
  --ar: 1.4995;
  --sw: calc(max(100cqw, 100cqh * var(--ar)) * var(--zoom, 1.18));
  --sh: calc(var(--sw) / var(--ar));
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  left: clamp(100cqw - var(--sw), 50cqw - var(--fx, 0.5) * var(--sw), 0px);
  /* the bay's near corner (88% down the photo) sits just above the foot of the screen at every aspect ratio */
  top: clamp(100cqh - var(--sh), var(--foot, 95cqh) - 0.881 * var(--sh), 0px);
  transform: scale(calc(1.07 - var(--v, 1) * 0.07));
  transform-origin: 46% 82%;
}
/* Graded to match the rest of the page: the green sodium cast taken out, blacks kept deep */
.statement__frame img { width: 100%; height: 100%; filter: saturate(0.22) brightness(0.86) contrast(1.06); }
/* z-index 1: the graded img is its own stacking context (filter), so the scrims must sit a layer above it */
.statement__frame::before, .statement__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* black-only scrims: the top for the headline, the left edge, and a fade into the page at the foot */
.statement__frame::after {
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.45) 24%, rgb(0 0 0 / 0.12) 48%, rgb(0 0 0 / 0) 66%, rgb(0 0 0 / 0) 94%, #000),
    linear-gradient(90deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 55%);
}
/* As the problem settles to grey the lamp's glow dims behind it, so the grey words keep their contrast.
   The painted lines at the foot stay lit. Opacity only, so scrolling never repaints the photo. */
.statement__frame::before {
  background:
    radial-gradient(28% 26% at 50% 56%, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.3) 55%, rgb(0 0 0 / 0)),
    linear-gradient(to bottom, rgb(0 0 0 / 0.64), rgb(0 0 0 / 0.64) 54%, rgb(0 0 0 / 0) 80%);
  opacity: var(--q, 1);
}

/* The empty bay: a dashed outline on the painted lines, corner brackets, and a camera-still caption */
.statement__bay { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.statement__bay path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.statement__bay .bay__area { fill: rgb(255 255 255 / 0.05); opacity: var(--b, 1); }
.bay__edge { stroke: rgb(255 255 255 / 0.55); stroke-width: 1px; stroke-dasharray: 4 5; opacity: var(--b, 1); }
.bay__corners {
  stroke: var(--label);
  stroke-width: 1.75px;
  opacity: var(--b, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(calc(1.16 - var(--b, 1) * 0.16));
}

.statement__tag {
  position: absolute;
  left: 36.25%;
  top: 76.3%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 10px;
  border-radius: 10px;
  background: rgb(20 20 22 / 0.6);
  box-shadow: var(--highlight), var(--ring);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: var(--label);
  font-size: 0.6875rem;
  white-space: nowrap;
  translate: -18px calc(-100% - 22px);
  opacity: var(--b, 1);
}
/* hairline leader from the caption down to the bay's far corner */
.statement__tag::after {
  content: "";
  position: absolute;
  left: 17.5px;
  top: 100%;
  width: 1px;
  height: 22px;
  background: linear-gradient(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.2));
}
.statement__rec { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--threat); }

/* The words */
.statement__inner { position: relative; }
.statement__text {
  max-width: 18em;
  color: var(--label);
  /* bounded by the height too, so the whole statement fits the pinned frame on short and landscape screens */
  font-size: clamp(min(2rem, 5.6vh), 0.95rem + 3.2vw, min(4rem, 8.2vh));
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: pretty;
  /* an invisible scrim right behind the letters, so the grey half holds its contrast over the lamp's glow */
  text-shadow: 0 0 20px rgb(0 0 0 / 0.5), 0 0 56px rgb(0 0 0 / 0.35);
}
.statement__problem, .statement__answer { display: block; }
.statement__problem { color: var(--label-3); }
.statement__answer { margin-top: 0.55em; color: var(--label); }

@media (max-width: 599.98px) {
  .statement__pin { padding-bottom: 46vh; }
  .statement__frame { --zoom: 1.15; --fx: 0.462; }
  .statement__text { letter-spacing: -0.028em; }
}
/* Tall phones: the lamp sits below the words, so only the words' band is dimmed and the glow stays */
@media (max-width: 599.98px) and (min-height: 760px) {
  .statement__frame::before { background: linear-gradient(to bottom, rgb(0 0 0 / 0.64), rgb(0 0 0 / 0.64) 44%, rgb(0 0 0 / 0) 58%); }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .statement__frame { --zoom: 1.1; --fx: 0.5; }
}
/* Wide or short screens: less crop, and the bay's near edge runs off the foot so its caption clears the words */
@media (min-width: 600px) and (max-height: 780px), (min-aspect-ratio: 2 / 1) {
  .statement__frame { --zoom: 1; --foot: 104cqh; }
}
/* Landscape phones: no room for the caption under the words, the outlined bay says it alone */
@media (max-height: 500px) {
  .statement__tag { display: none; }
}

/* Scroll-scrubbed version (JS on, motion allowed): the frame pins while the words light up */
.statement.is-scrubbed { height: 250svh; }
.statement.is-scrubbed .statement__pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
.statement.is-scrubbed .statement__frame { will-change: transform; }
.statement.is-scrubbed .w {
  --a: clamp(0, (var(--p, 0) * (var(--n) + 3) - var(--i)) / 3, 1);
  color: color-mix(in srgb, #f5f5f7 calc(var(--a) * 100%), #3a3a3c);
}
.statement.is-scrubbed .statement__problem .w {
  color: color-mix(in srgb, color-mix(in srgb, #f5f5f7 calc(var(--a) * 100%), #3a3a3c) calc(100% - var(--q, 0) * 100%), #86868b);
}

/* ---------- 3 · Story: one night in Riga ----------
   A sticky map stage (the real OSM map of north Riga, a virtual camera, markers that stay screen-sized) with the five
   steps scrolling beside it (desktop) or under it (phones). Positions and states are written by 22-story.js.
   Colour keeps its meaning: --threat is the theft and the jammer, --signal is the Spotguard beacon and the bearings
   taken on it, --ok is the confirmed fix. Everything else on the map is white and grey. */

.story { position: relative; padding: var(--section-gap) 0 clamp(72px, 9vw, 128px); }

.story__body {
  --stage-top: calc(var(--nav-h) + 8px);
  --chip: rgb(24 24 27 / 0.9);
  position: relative;
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
}
.story__head { margin-bottom: clamp(40px, 6vw, 88px); }

/* ---------- Steps ---------- */

/* Its own stacking layer under the stage, so nothing inside a step (photo edges, captions) can paint over the map */
.story__steps { position: relative; z-index: 1; }
.story__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
}
.story__time {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--label-3);
  font-size: 0.8125rem;
  transition: color 0.5s var(--ease);
}
.story__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--label-4); transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.story__step.is-active .story__time { color: var(--label); }
.story__step.is-active .story__dot--threat { background: var(--threat); box-shadow: 0 0 0 4px rgb(255 69 58 / 0.2); }
.story__step.is-active .story__dot--signal { background: var(--signal); box-shadow: 0 0 0 4px rgb(48 209 212 / 0.2); }
.story__step.is-active .story__dot--ok { background: var(--ok); box-shadow: 0 0 0 4px rgb(48 209 88 / 0.2); }

/* Two-tone copy: the title in white runs straight into the grey body, one weight, one size. Steps that are not
   being read step back, but stay readable (label-3 on black is 5.9:1). */
.story__copy {
  max-width: 19em;
  color: var(--label-3);
  font-size: clamp(1.3125rem, 1.08rem + 0.6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.002em;
  text-wrap: pretty;
}
.story__copy h3, .story__copy p { display: inline; font: inherit; letter-spacing: inherit; }
.story__copy h3 { transition: color 0.5s var(--ease); }
.story__step.is-active .story__copy h3, html:not(.js) .story__copy h3 { color: var(--label); }

/* Photo inside each step: phones only (on desktop the photo card lives in the map) */
.story__shot { display: none; }

.story__note { max-width: 46em; margin-top: clamp(32px, 4vw, 56px); color: var(--label-3); font-size: 0.8125rem; line-height: 1.45; }

/* ---------- Stage ---------- */

.story__stage { position: relative; z-index: 2; }
.story__map {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background: #111113;           /* the map's land colour, so a zoomed-out frame never shows a seam */
  box-shadow: var(--shadow-contact);
  contain: layout paint;
}
/* Light-catch edge, as on cards */
.story__map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  padding: 1px;
  border-radius: inherit;
  background: var(--catch);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.story__scene { position: absolute; inset: 0; overflow: hidden; }
/* Lens falloff: the corners sink into the card so the map reads as a window onto the city, not a printout */
.story__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(130% 100% at 62% 46%, transparent 52%, rgb(0 0 0 / 0.5));
  pointer-events: none;
}

.story__cam {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  transform-origin: 0 0;
}
.story__cam.is-moving { will-change: transform; }
.story__base { display: block; width: 1000px; max-width: none; height: 1000px; user-select: none; }

/* Vector overlay: its viewBox is the camera window, so strokes stay hairline-sharp at every zoom */
.story__vec { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.story__vec path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.vec__trail-casing { stroke: rgb(0 0 0 / 0.75); stroke-width: 6.5; }
.vec__trail { stroke: #f5f5f7; stroke-width: 2.5; }
.vec__ghost-trail { stroke: rgb(245 245 247 / 0.42); stroke-width: 2.5; }
.vec__van-trail { stroke: rgb(48 209 212 / 0.55); stroke-width: 1.5; stroke-dasharray: 0.5 5; opacity: 0; transition: opacity 0.5s var(--ease); }
.vec__yard { stroke: rgb(245 245 247 / 0.34); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity 0.6s var(--ease); }
.story__vec .vec__target { fill: rgb(48 209 212 / 0.55); stroke: #f5f5f7; stroke-width: 1.5; opacity: 0; transition: opacity 0.5s var(--ease); }
.vec__bearing { stroke-width: 1.5; }
.vec__grad stop { stop-color: var(--signal); }
.vec__grad stop:nth-child(2) { stop-opacity: 0.9; }
.vec__grad stop:nth-child(3) { stop-opacity: 0; }
.vec__df { opacity: 0; transition: opacity 0.5s var(--ease); }

.story__body.has-search .vec__van-trail, .story__body.has-search .vec__df { opacity: 1; }
.story__body.is-found .vec__yard, .story__body.is-found .vec__target { opacity: 1; }

/* ---------- Place labels ---------- */

.story__labels, .story__marks { position: absolute; inset: 0; pointer-events: none; }
.story__labels { z-index: 3; }
.story__marks { z-index: 4; }
.map-label {
  position: absolute;
  top: 0;
  left: 0;
  color: #636368;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease);
}
.map-label > span { display: block; translate: -50% -50%; }
.map-label--water { color: #3e5664; font-weight: 500; letter-spacing: 0.26em; }
.map-label--green { color: #4c5a50; }
.map-label--poi { color: #7a7a80; letter-spacing: 0.1em; }
.map-label.is-off { opacity: 0; }

/* ---------- Markers (screen-sized, placed on map points) ---------- */

.mk { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.45s var(--ease); }
.mk.is-on { opacity: 1; }
.mk > * { position: absolute; }

.mk__chip {
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--chip);
  box-shadow: var(--highlight), var(--ring), 0 8px 18px -8px rgb(0 0 0 / 0.85);
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  translate: calc(-50% + var(--nx, 0px)) calc(-100% - 22px);
  transition: opacity 0.4s var(--ease);
}
.mk__chip .icon { width: 14px; height: 14px; stroke-width: 2; }
.mk__chip b { margin-left: 2px; color: var(--label-2); font-size: 0.6875rem; letter-spacing: 0.02em; }
.mk__chip.is-off { opacity: 0; }
.mk__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.mk__dot--threat { background: var(--threat); }
.mk__dot--signal { background: var(--signal); }
.mk__dot--ok { background: var(--ok); }
.mk__dot--off { box-shadow: inset 0 0 0 1.5px var(--label-3); }

/* The stolen car: an Apple Maps style puck with a heading beam, the jamming field around it and the beacon's pings */
.car__puck {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: #f5f5f7;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.7), inset 0 -1.5px 1px rgb(0 0 0 / 0.14);
  transition: opacity 0.5s var(--ease), scale 0.6s var(--ease);
}
.car__arrow { width: 14px; height: 14px; fill: #0b0b0d; rotate: var(--heading, 0deg); }
.car__beam {
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: conic-gradient(from -26deg, rgb(245 245 247 / 0) 0deg, rgb(245 245 247 / 0.42) 26deg, rgb(245 245 247 / 0) 52deg, transparent 0);
  -webkit-mask: radial-gradient(closest-side, #000 22%, transparent);
  mask: radial-gradient(closest-side, #000 22%, transparent);
  rotate: var(--heading, 0deg);
  transition: opacity 0.4s var(--ease);
}
/* Once the car is shut in the container, only the beacon is left to see */
.car__beacon {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 2px #0b0b0d, 0 0 0 3px rgb(48 209 212 / 0.45);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.4s var(--ease), scale 0.5s var(--spring-snappy);
}
.story__body.is-parked .car__puck { opacity: 0; scale: 0.4; }
.story__body.is-parked .car__beam { opacity: 0; }
.story__body.is-parked .car__beacon { opacity: 1; scale: 1; }
.story__body.is-found .car__beacon { opacity: 0; scale: 0.4; }
.car__chip { translate: calc(-50% + var(--nx, 0px)) calc(-100% - 22px); }

/* Jamming field: radio noise, not a glow. A faint red disc of static with a hairline edge and an inner dashed ring. */
.car__jam {
  width: 156px;
  height: 156px;
  margin: -78px 0 0 -78px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 69 58 / 0.2), rgb(255 69 58 / 0.08) 70%, rgb(255 69 58 / 0.03));
  box-shadow: inset 0 0 0 1px rgb(255 69 58 / 0.5);
  opacity: var(--jam, 0);
  scale: calc(0.35 + var(--jam, 0) * 0.65);
}
.car__jam::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--noise) 0 0 / 96px 96px;
  opacity: 0.2;
  -webkit-mask: radial-gradient(closest-side, #000 50%, transparent);
  mask: radial-gradient(closest-side, #000 50%, transparent);
}
.car__jam::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px dashed rgb(255 69 58 / 0.4);
  border-radius: 50%;
}
.jam__chip { color: #ff8a82; translate: 52px -50%; }
.jam__chip.is-left { translate: calc(-100% - 52px) -50%; }
.car__ping {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--signal);
  opacity: 0;
}

/* Where the car was parked: the start of the trail, an empty ring like a route origin in Maps */
.home__dot {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: #0b0b0d;
  box-shadow: inset 0 0 0 2.5px #f5f5f7, 0 0 0 2px rgb(0 0 0 / 0.55);
}

/* Ghost: where an ordinary tracker last saw the car. Grey, hollow and frozen. */
.ghost__dot {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #8e8e93;
  box-shadow: 0 0 0 2px #1c1c1e, 0 2px 6px rgb(0 0 0 / 0.6);
}
.ghost__ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px dashed rgb(142 142 147 / 0.7);
  border-radius: 50%;
  background: rgb(142 142 147 / 0.08);
}
.ghost__chip { color: var(--label-2); font-weight: 500; translate: calc(-50% + var(--nx, 0px)) 26px; }
.mk--ghost.is-on .ghost__dot { animation: story-drop 0.7s var(--spring-snappy) both; }

/* Receivers: the search car and the drone, each with its live bearing */
.rx__dot {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #0b0b0d;
  box-shadow: inset 0 0 0 2px var(--signal), 0 0 0 3px rgb(11 11 13 / 0.7);
  transition: background-color 0.3s var(--ease);
}
.rx__chip { translate: calc(-50% + var(--nx, 0px)) calc(-100% - 16px); transition: opacity 0.4s var(--ease), translate 0.35s var(--ease); }
.rx__chip.is-below { translate: calc(-50% + var(--nx, 0px)) 16px; }
.rx__chip b { min-width: 6.2ch; color: var(--label); text-align: right; }
.rx__chip .icon { color: var(--signal); }
.mk--rx.is-locked .rx__dot { background: var(--signal); }

/* Where the two bearings cross */
.cross__ring {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--signal), 0 0 0 3px rgb(0 0 0 / 0.35);
  transition: scale 0.5s var(--spring-snappy);
}
.mk--cross.is-locked .cross__ring { scale: 0.7; }

/* Fix: the container, found */
.fix__reticle {
  --c: rgb(245 245 247 / 0.95);
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 12px no-repeat;
  rotate: var(--yard-rot, 0deg);
  scale: 1.8;
  transition: scale 0.7s var(--spring-snappy);
}
.mk--fix.is-on .fix__reticle { scale: 1; }
.fix__ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--signal);
  opacity: 0;
}
.fix__chip { translate: calc(-50% + var(--nx, 0px)) calc(-100% - 42px); }
.fix__chip .icon { color: var(--ok); }

/* ---------- HUD ---------- */

.story__hud {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 6;
  width: 244px;
  padding: 16px 16px 8px;
  border-radius: var(--radius-l);
  background: rgb(22 22 24 / 0.7);
  box-shadow: var(--highlight), var(--ring), 0 24px 48px -28px #000;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.hud__clock {
  display: flex;
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hud__street {
  min-height: 1.3em;
  margin: 9px 0 12px;
  overflow: hidden;
  color: var(--label-2);
  font-size: 0.6875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 33px;
  border-top: 1px solid var(--hair);
  color: var(--label-3);
  font-size: 0.8125rem;
  font-weight: 500;
}
.hud__row b { display: inline-flex; align-items: center; gap: 7px; color: var(--label); font-size: 0.6875rem; transition: color 0.3s var(--ease); }
.hud__row i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--label-2); transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.hud__row[data-state="jammed"] b { color: #ff6961; }
.hud__row[data-state="jammed"] i { background: var(--threat); box-shadow: 0 0 0 3px rgb(255 69 58 / 0.24); }
.hud__row[data-state="tx"] b { color: var(--signal); }
.hud__row[data-state="tx"] i { background: var(--signal); box-shadow: 0 0 0 3px rgb(48 209 212 / 0.24); }
.hud__row[data-state="found"] b { color: var(--ok); }
.hud__row[data-state="found"] i { background: var(--ok); box-shadow: 0 0 0 3px rgb(48 209 88 / 0.24); }
.hud__row[data-state="idle"] b { color: var(--label-2); }
.hud__row[data-state="idle"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--label-3); }
.hud__unit { margin-left: -2px; color: var(--label-2); text-transform: none; }

/* Rolling readouts (clock and distance): each digit is a strip that turns, like a mechanical counter */
.roll { display: inline-flex; font-variant-numeric: tabular-nums; }
.roll__d {
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14% 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14% 86%, transparent);
}
.roll__strip { display: flex; flex-direction: column; line-height: 1.25; }
.roll__strip > span { display: block; height: 1.25em; }
.roll__sep { line-height: 1.25; }
.hud__clock .roll__d, .hud__clock .roll__strip > span { height: 1.12em; }
.hud__clock .roll__strip, .hud__clock .roll__sep { line-height: 1.12; }
@media (prefers-reduced-motion: no-preference) {
  .roll__strip { transition: transform 0.5s var(--ease-out); }
  .story__body.is-instant .roll__strip { transition: none; }
}

/* ---------- Map furniture: scale bar, attribution, pause ---------- */

.story__scale {
  position: absolute;
  right: 18px;
  bottom: 38px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  color: var(--label-2);
  font-size: 0.625rem;
}
.story__scale span { text-transform: none; }
/* A soft black corner under the scale bar and the credit, so a route line passing underneath never fights the text */
.story__scale::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -38px;
  z-index: -1;
  width: 300px;
  height: 110px;
  background: radial-gradient(farthest-side at 100% 100%, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.3) 55%, transparent);
  pointer-events: none;
}
.story__scale i {
  display: block;
  width: var(--w, 80px);
  height: 5px;
  border: 1px solid rgb(245 245 247 / 0.45);
  border-top: 0;
  transition: width 0.25s var(--ease);
}
.story__attrib {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 7;
  color: var(--label-2);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.story__attrib::after { content: ""; position: absolute; inset: -21px -8px -8px; } /* a 44px tall hit area inside the map */
.story__attrib:hover { color: var(--label); }
.story__attrib:focus-visible { border-radius: 4px; outline: 2px solid var(--label); outline-offset: 3px; }
.story__toggle { position: absolute; top: 14px; right: 14px; z-index: 7; }

/* ---------- Photo card: a picture-in-picture of the moment, inside the map ---------- */

.story__photo {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 6;
  width: clamp(220px, 20vw, 296px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--raise-1);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 48px -18px rgb(0 0 0 / 0.95);
}
.story__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: var(--catch);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* A true cross-dissolve: the incoming photo fades in on top while the outgoing one stays put underneath, then drops
   out once it is covered, so the card never dips to its background in between */
.shot { position: absolute; inset: 0; opacity: 0; transition: opacity 0s linear 0.8s; }
.shot.is-on { z-index: 1; opacity: 1; transition: opacity 0.8s var(--ease-out); }
.shot img { width: 100%; height: 100%; object-fit: cover; scale: 1.06; transition: scale 1.8s var(--ease-out); }
.shot.is-on img { scale: 1; }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.62), transparent 48%); pointer-events: none; }
.shot__cap {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 20px);
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(22 22 24 / 0.62);
  box-shadow: var(--highlight), var(--ring);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.shot__cap b { color: var(--label-2); font-size: 0.6875rem; }

/* ---------- Layouts ---------- */

/* Side by side: desktops, and phones held sideways (the stacked layout would leave no room under the map). The two
   queries below are exact complements; keep them in step with `side` in 22-story.js. */
@media (min-width: 960px), (min-width: 640px) and (orientation: landscape) {
  .story__body {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    column-gap: clamp(32px, 4.6vw, 80px);
    align-items: start;
    max-width: 1680px;
    margin: 0 auto;
    /* The copy column sits on the page grid (.wrap); the map runs on to a narrow right margin */
    padding-left: max(var(--gutter-l), calc((100% - var(--wrap)) / 2));
    padding-right: clamp(20px, 2.8vw, 48px);
  }
  .story__head { grid-column: 1 / -1; }
  .story__stage {
    grid-area: 2 / 2;
    position: sticky;
    top: var(--stage-top);
    height: min(calc(100svh - var(--stage-top) - 20px), 900px);
  }
  .story__steps { grid-area: 2 / 1; padding-bottom: 52svh; }
  /* The note stays in the copy column: the map is still pinned beside it when it scrolls in */
  .story__note { grid-column: 1; margin-top: 0; }
}
/* Short windows (phones held sideways, small laptop windows): the map takes all the height it can and more of the
   width, and the photo card gives way to it */
@media (min-width: 960px) and (max-height: 560px), (min-width: 640px) and (orientation: landscape) and (max-height: 560px) {
  .story__body { --stage-top: calc(var(--nav-h) - 4px); grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
  .story__stage { height: calc(100svh - var(--stage-top) - 12px); }
  .story__photo { display: none; }
  .story__copy { font-size: 1.125rem; line-height: 1.36; }
}

/* Stacked: the map sticks to the top, the steps scroll up under it. Each step is as tall as the room left under the
   map and centred in it, so the step being read is the one the map shows. */
@media (max-width: 639.98px), (max-width: 959.98px) and (orientation: portrait) {
  .story__body {
    --map-h: clamp(276px, 45svh, 480px);
    --stage-pad: calc(var(--nav-h) - 6px);
    --room: calc(100svh - var(--stage-pad) - var(--map-h) - 10px);
  }
  .story__head { margin-bottom: 32px; }
  .story__stage {
    position: sticky;
    top: 0;
    margin: 0 calc(var(--gutter-r) * -1) 0 calc(var(--gutter-l) * -1);
    padding: var(--stage-pad) var(--gutter-r) 10px var(--gutter-l);
    background: #000;
  }
  /* The steps slide under the map: a short fade so they don't end on a hard line */
  .story__stage::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(#000, rgb(0 0 0 / 0));
    pointer-events: none;
  }
  .story__map { height: var(--map-h); border-radius: var(--radius-l); }
  .story__photo { display: none; }
  .story__steps { padding-bottom: calc(var(--room) * 0.35); }
  .story__step { min-height: max(var(--room), 300px); padding: 30px 0 22px; }
  .story__time { margin-bottom: 10px; }
  .story__copy { max-width: 30em; font-size: 1.125rem; line-height: 1.36; }
  .story__shot {
    position: relative;
    display: block;
    max-width: 560px;
    aspect-ratio: 2 / 1;
    margin-top: 16px;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--raise-1);
  }
  .story__shot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: var(--catch);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .story__shot img { width: 100%; height: 100%; object-fit: cover; }
  .story__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 50%); }
  .story__shot .shot__cap { bottom: 8px; left: 8px; }
  .story__note { margin-top: 8px; }
}

/* A compact HUD on phones and in short windows: clock, street and distance on one line, the three signals under it */
@media (max-width: 639.98px), (max-width: 959.98px) and (orientation: portrait), (max-height: 560px) {
  .story__hud {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: 440px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 9px 12px 0;
    border-radius: var(--radius-m);
  }
  .hud__head { display: contents; }
  .hud__clock { grid-area: 1 / 1; font-size: 1.25rem; }
  .hud__street { grid-area: 1 / 2; margin: 0; font-size: 0.625rem; }
  .hud__row--dist { grid-area: 1 / 3; min-height: 0; border: 0; }
  .hud__row--dist > span { display: none; }
  .hud__signals {
    grid-area: 2 / 1 / 3 / 4;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    margin-top: 8px;
    border-top: 1px solid var(--hair);
  }
  /* Signals as an instrument strip: name over state, three columns, so a long state (TRANSMITTING) always fits */
  .hud__signals .hud__row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 0; padding: 8px 0 10px; border: 0; font-size: 0.6875rem; line-height: 1; }
  .hud__signals .hud__row b { gap: 5px; font-size: 0.625rem; line-height: 1; letter-spacing: 0.02em; }
  .hud__signals .hud__row i { width: 6px; height: 6px; }
  /* Map furniture moves to the bottom corners, out of the HUD's way */
  .story__scale { right: 12px; bottom: 30px; }
  .story__attrib { right: 12px; bottom: 8px; font-size: 0.625rem; }
  .story__toggle { top: auto; right: auto; bottom: 8px; left: 8px; }
  .map-label { font-size: 0.625rem; }
  .mk__chip { height: 24px; padding: 0 9px; font-size: 0.6875rem; }
  /* The receivers keep their icon and live bearing; the step copy names them */
  .rx__chip { gap: 5px; padding-inline: 8px 9px; }
  .rx__name { display: none; }
}

/* Narrow phones: a little less padding in the HUD */
@media (max-width: 379.98px) {
  .story__hud { padding-inline: 10px; column-gap: 8px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .story__body.is-tx .car__ping { animation: story-ping 2.4s var(--ease-out) infinite paused; }
  .story__body.is-tx .car__ping:nth-child(3) { animation-delay: 0.8s; }
  .story__body.is-tx .car__ping:nth-child(4) { animation-delay: 1.6s; }
  .story__body.is-found .fix__ring { animation: story-ping 2.6s var(--ease-out) infinite paused; }
  .story__body.is-found .fix__ring:nth-child(2) { animation-delay: 1.3s; }
  .car__jam::before { animation: story-static 0.6s steps(6) infinite paused; }
  .car__jam::after { animation: story-turn 30s linear infinite paused; }
  .story__body.is-live .car__ping,
  .story__body.is-live .fix__ring,
  .story__body.is-live .car__jam::before,
  .story__body.is-live .car__jam::after { animation-play-state: running; }
  .story__body.is-paused .car__ping,
  .story__body.is-paused .fix__ring,
  .story__body.is-paused .car__jam::before,
  .story__body.is-paused .car__jam::after { animation-play-state: paused; }
}
/* Reduced motion: each step is a still frame. Rings are drawn where an animation would have carried them. */
@media (prefers-reduced-motion: reduce) {
  .story__toggle { display: none; }
  .story__body.is-tx .car__ping:nth-child(2) { scale: 1.6; opacity: 0.6; }
  .story__body.is-tx .car__ping:nth-child(3) { scale: 2.6; opacity: 0.32; }
  .story__body.is-tx .car__ping:nth-child(4) { scale: 3.6; opacity: 0.14; }
  .story__body.is-found .fix__ring:nth-child(2) { scale: 1.6; opacity: 0.35; }
  .mk, .mk__chip, .shot, .shot img, .fix__reticle, .car__puck, .car__beacon, .story__copy, .story__copy h3 { transition-duration: 0.3s; }
  .mk--ghost.is-on .ghost__dot { animation: none; }
}
@keyframes story-ping { from { opacity: 0.9; scale: 0.7; } to { opacity: 0; scale: 4.4; } }
@keyframes story-static { to { background-position: 96px 48px; } }
@keyframes story-turn { to { rotate: 1turn; } }
@keyframes story-drop { from { opacity: 0; scale: 1.8; } }

/* ---------- 4 · Jammer demo ---------- */
/* An instrument, not an infographic: a real street at 02:16, a parked car carrying an ordinary GPS tracker and a
   Spotguard beacon, and a glass receiver panel with live traces. The switch is the only control. */

.jam__stage { display: flex; flex-direction: column; }

/* Scene: the photo is placed on a frame with the photo's own aspect ratio, so the car marker stays on the car
   at every crop. --fx/--fy is the point kept in view, --zoom crops tighter on small screens. */
.jam__scene { position: relative; z-index: 0; overflow: hidden; container-type: size; background: #000; }
.jam__frame {
  --ar: 1.4995;
  --sw: calc(max(100cqw, 100cqh * var(--ar)) * var(--zoom, 1));
  --sh: calc(var(--sw) / var(--ar));
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  left: clamp(100cqw - var(--sw), 50cqw - var(--fx, 0.5) * var(--sw), 0px);
  top: clamp(100cqh - var(--sh), 50cqh - var(--fy, 0.5) * var(--sh), 0px);
}
.jam__frame img { width: 100%; height: 100%; filter: saturate(0.8); }
.jam__frame::before, .jam__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* legibility scrim behind the glass panel and the tag, black only */
.jam__frame::after { background: linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0) 40%); }
/* Jammed: the street goes a stop darker, so the only thing still lit is the beacon's teal ping */
.jam__frame::before { background: rgb(0 0 0 / 0.42); opacity: 0; transition: opacity 0.7s var(--ease); }
.jam__stage[data-jammed="true"] .jam__frame::before { opacity: 1; }

/* The car: tracker dot at the front, Spotguard beacon rings at the rear */
.jam__car { position: absolute; left: 50.5%; top: 72.4%; z-index: 2; width: 0; height: 0; }
.jam__dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--label);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.45);
  transition: background-color 0.3s var(--ease);
}
.jam__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }
.jam__rf { position: absolute; left: 63.8%; top: 71.4%; z-index: 2; width: 0; height: 0; }
.jam__rf::before {
  content: "";
  position: absolute;
  left: -3.5px;
  top: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.4);
}
.jam__rf i {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--signal);
  opacity: 0;
}

/* Tag above the tracker: a hairline leader and a glass readout */
.jam__tag {
  position: absolute;
  left: 0;
  bottom: 22px;
  display: grid;
  gap: 3px;
  padding: 8px 11px 7px;
  border-radius: 10px;
  background: rgb(20 20 22 / 0.62);
  box-shadow: var(--highlight), var(--ring);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: var(--label);
  font-size: 0.6875rem;
  white-space: nowrap;
  translate: -50% 0;
}
.jam__tag::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.5px);
  top: 100%;
  width: 1px;
  height: 13px;
  background: linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.15));
}
.jam__tag-name { color: var(--label-3); }
.jam__tag-row { display: flex; gap: 8px; }
.jam__tag-row .swap > [data-when="on"], .jam__car[data-jammed="true"] .jam__clock { color: #ff6961; }
.jam__clock { transition: color 0.3s var(--ease); }
.jam__clock i { font-style: normal; }
.jam__car[data-jammed="true"] .jam__dot { background: var(--threat); }

/* Static: one short burst of grain over the photo when the jammer comes on */
.jam__static {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--noise) 0 0 / 140px 140px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Receiver panel ---------- */
.jam__hud { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 20px; }
.jam__meters { display: grid; align-content: start; }
.meter { position: relative; padding: 16px 0; }
.meter:first-child { padding-top: 0; }
.meter + .meter { border-top: 1px solid var(--hair); }
.meter__head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.meter__head .icon { width: 20px; height: 20px; color: var(--label-2); }
.meter--rf .meter__head .icon { color: var(--signal); }
.meter__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; }
.meter__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: var(--label-2);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.meter[data-jammed="true"] .meter__state { background: rgb(255 69 58 / 0.16); color: #ff6961; }
.meter__state .swap { justify-items: end; }

.meter__scope {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  margin: 10px 0 9px;
  padding-right: 12px;
  border-radius: 10px;
  background: rgb(0 0 0 / 0.34);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), inset 0 1px 2px rgb(0 0 0 / 0.4);
  transition: box-shadow 0.5s var(--ease);
}
.meter__trace {
  display: block;
  flex: 1;
  min-width: 0;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent);
}
.meter__bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; flex: none; }
.meter__bars i {
  width: 3px;
  height: calc(28% + var(--b) * 18%);
  border-radius: 1px;
  background: var(--label);
  transform-origin: 50% 100%;
  transition: background-color 0.25s var(--ease) calc((4 - var(--b)) * 50ms), transform 0.45s var(--spring) calc((4 - var(--b)) * 50ms);
}
.meter--rf .meter__bars i { background: var(--signal); }
.meter[data-jammed="true"] .meter__bars i { background: rgb(255 255 255 / 0.16); transform: scaleY(0.4); }
.meter[data-jammed="true"] .meter__bars i:first-child { background: var(--threat); transform: none; }
.jam__stage[data-jammed="true"] .meter--rf .meter__scope { box-shadow: inset 0 0 0 1px rgb(48 209 212 / 0.32), inset 0 1px 2px rgb(0 0 0 / 0.4); }

.meter__desc { color: var(--label-3); font-size: 0.875rem; line-height: 1.38; text-wrap: pretty; }

/* ---------- The switch row ---------- */
.jam__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.jam__control-text { display: grid; gap: 1px; }
.jam__label { font-size: 1.1875rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.jam__onoff { color: var(--label-3); font-size: 0.9375rem; font-weight: 500; }
.jam__onoff > [data-when="on"] { color: #ff6961; }

/* iOS-proportioned switch: 66 × 40 track inside a 44px target, thumb that stretches while pressed */
.switch {
  position: relative;
  flex: none;
  width: 66px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.switch__track {
  position: absolute;
  inset: 2px 0;
  border-radius: 999px;
  background: rgb(120 120 128 / 0.36);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), inset 0 1px 2px rgb(0 0 0 / 0.3);
  transition: background-color 0.3s var(--ease);
}
.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.28), 0 1px 1px rgb(0 0 0 / 0.16), inset 0 -1px rgb(0 0 0 / 0.06);
  transition: transform 0.55s var(--spring-snappy), width 0.25s var(--ease);
}
.switch[aria-checked="true"] .switch__track { background: var(--threat); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(26px); }
.switch:active .switch__thumb { width: 40px; }
.switch[aria-checked="true"]:active .switch__thumb { transform: translateX(20px); }
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch__track { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Blur swap: two states share one grid cell, so nothing reflows when the text changes */
.swap { display: inline-grid; }
.swap > * {
  grid-area: 1 / 1;
  transition: opacity 0.5s var(--ease-out) 0.12s, filter 0.5s var(--ease-out) 0.12s;
}
.swap:not([data-jammed="true"]) > [data-when="on"],
.swap[data-jammed="true"] > [data-when="off"] {
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.22s ease-in, filter 0.22s ease-in;
}

/* Verdict under the instrument: the two-tone lead, swapped in place */
.jam__verdict {
  display: grid;
  max-width: 40em;
  margin: clamp(28px, 4vw, 40px) auto 0;
  color: var(--label-3);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.005em;
  text-align: center;
  text-wrap: balance;
}
.jam__verdict strong { color: var(--label); font-weight: inherit; }

.jam__toggle { position: absolute; z-index: 3; }

/* ---------- Layout ---------- */
@media (min-width: 900px) {
  .jam__stage { display: grid; min-height: 580px; }
  .jam__scene { position: absolute; inset: 0; }
  .jam__frame { --zoom: 1.16; --fx: 0.3; --fy: 0.6; }
  .jam__hud {
    width: 392px;
    margin: 12px;
    padding: 22px 22px 18px;
    border-radius: 18px;
    background: rgb(22 22 24 / 0.58);
    box-shadow: var(--highlight), var(--ring), 0 24px 48px -24px rgb(0 0 0 / 0.8);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
  }
  .jam__control { margin-top: auto; }
  .jam__toggle { right: 14px; bottom: 14px; }
}
@media (max-width: 899.98px) {
  .jam__scene { aspect-ratio: 16 / 11; max-height: 64svh; }
  .jam__frame { --zoom: 1.85; --fx: 0.57; --fy: 0.69; }
  .jam__hud { padding: 0 20px 6px; }
  /* The switch comes first on small screens, so the car, the switch and the first trace share one view */
  .jam__control { order: -1; margin: 0 -20px 18px; padding: 14px 20px; border-top: 0; border-bottom: 1px solid var(--hair); background: rgb(255 255 255 / 0.03); }
  .jam__toggle { top: 12px; right: 12px; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .jam__scene { aspect-ratio: 16 / 9; }
  .jam__frame { --zoom: 1.2; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jam__dot::after { animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
  .jam__rf i { animation: jam-rf 2.7s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
  .jam__rf i:nth-child(2) { animation-delay: 0.9s; }
  .jam__rf i:nth-child(3) { animation-delay: 1.8s; }
  .jam__car[data-jammed="true"] .jam__dot::after { animation: none; }
  /* the tracker's clock colon blinks while it reports, and freezes on the last time it was seen */
  .jam__car:not([data-jammed="true"]) .jam__clock i { animation: jam-colon 1s steps(1, end) infinite; }
  .jam__stage.is-bursting .jam__static { animation: jam-static 0.6s steps(1, end) both; }
  .meter.is-bursting .meter__scope { animation: jam-shake 0.32s steps(1, end); }
  .jam__stage:is(.is-paused, .is-offscreen) :is(.jam__rf i, .jam__clock i),
  .jam__stage:is(.is-paused, .is-offscreen) .jam__dot::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .jam__rf i:nth-child(1) { opacity: 0.5; transform: scale(0.45); }
  .jam__rf i:nth-child(2) { opacity: 0.25; transform: scale(0.8); }
  .swap > *, .meter__bars i, .switch__thumb, .switch__track, .meter__state, .jam__dot { transition: none; }
}
@keyframes jam-colon { 50% { opacity: 0.25; } }
@keyframes jam-rf { from { transform: scale(0.12); opacity: 0.95; } to { transform: scale(1); opacity: 0; } }
@keyframes jam-static {
  0% { opacity: 0.55; background-position: 0 0; }
  12% { opacity: 0.42; background-position: 41px 87px; }
  24% { opacity: 0.5; background-position: 113px 19px; }
  36% { opacity: 0.3; background-position: 67px 131px; }
  52% { opacity: 0.2; background-position: 9px 53px; }
  70% { opacity: 0.1; background-position: 97px 101px; }
  100% { opacity: 0; }
}
@keyframes jam-shake {
  0% { transform: translate(1.5px, -1px); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, 1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: none; }
}

/* ---------- 5 · Device: the exploded view ---------- */
/* States on .xpl: none (no JS: heading, render, plain list), .is-static (labels and SVG leaders over the render),
   .is-live (sticky 3D scene scrubbed by scroll; .is-ready once the first frame is drawn, .is-open while the
   parts are apart, .is-dims while the dimension lines show).
   .is-compact (narrow screens): live, one caption at a time under the stack, its leader routed round the stack;
   static, numbered markers on the render and the numbered list under it.
   Label anatomy (after the USAvionix spec callouts): the title sits on the leader line, the detail hangs under it. */

.xpl { position: relative; }
.xpl__head { margin-bottom: clamp(8px, 2vw, 24px); }
.xpl__head .section__head { margin-bottom: 0; }
.xpl__head .section__lead { text-wrap: balance; }
.xpl__view { position: relative; width: min(100% - 32px, 1120px); margin-inline: auto; }
.xpl__still { display: block; width: min(100%, 440px); height: auto; margin-inline: auto; }
.xpl__canvas, .xpl__wires { display: none; }

/* No JS: the parts as a numbered list under the render, a hairline between each title and its detail */
.xpl__parts { display: grid; gap: 26px; max-width: 440px; margin: 40px auto 0; }
.xpl:not(.is-live) .xpl__d { max-width: none; }
.xpl__part { display: flex; flex-direction: column; }

.xpl__t {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--label);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.xpl__no {
  color: var(--label-3);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* 8px + 1px rule + 9px: the leader line runs exactly where this rule is (JS reads the title's height) */
.xpl__d {
  max-width: 17em;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--hair-strong);
  color: var(--label-3);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

.xpl__note { margin-top: 24px; color: var(--label-3); font-size: 0.8125rem; text-align: center; }

/* Labels laid over the scene (static and live). JS writes each label's position as a transform. */
.js .xpl.is-static:not(.is-compact) .xpl__parts, .js .xpl.is-live .xpl__parts {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  margin: 0;
  pointer-events: none;
}
.js .xpl.is-static:not(.is-compact) .xpl__part, .js .xpl.is-live .xpl__part {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  will-change: transform;
}
.js .xpl.is-static:not(.is-compact) .xpl__d, .js .xpl.is-live .xpl__d { border-top-color: transparent; }
/* Beside the stack every label has the same width, so the leaders end on one clean column edge */
.js .xpl.is-static:not(.is-compact) .xpl__part, .js .xpl.is-live:not(.is-compact) .xpl__part { width: 17.5rem; }
.xpl.is-static:not(.is-compact) .xpl__still { width: min(100%, 520px); }
.js .xpl.is-static:not(.is-compact) .xpl__d, .js .xpl.is-live:not(.is-compact) .xpl__d { max-width: none; }
.xpl:not(.is-compact) .xpl__part[data-side="l"] { align-items: flex-end; text-align: right; }

/* Leader lines and markers, drawn from the part outwards */
.xpl.is-static .xpl__wires, .xpl.is-live .xpl__wires {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* pathLength=1: a dash as long as the path and a gap twice that, so offset 1 hides it all, curves included */
.xpl__lead { fill: none; stroke: rgb(255 255 255 / 0.42); stroke-width: 1; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.xpl__halo { fill: rgb(0 0 0 / 0.45); stroke: rgb(255 255 255 / 0.34); stroke-width: 1; }
.xpl__dot { fill: var(--label); }
.xpl__wire[data-part="rf"] .xpl__dot { fill: var(--signal); }
.xpl__wire[data-part="rf"] .xpl__halo { stroke: rgb(48 209 212 / 0.55); }
.xpl__halo, .xpl__dot { transform-box: fill-box; transform-origin: center; }
.xpl__num { display: none; }

/* Static, compact: numbered markers on the render, the numbered list under it */
.xpl.is-static.is-compact .xpl__num {
  display: block;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
  fill: var(--label);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.xpl.is-static.is-compact .xpl__halo { fill: rgb(0 0 0 / 0.7); }

/* ---------- Live: a tall scroll track with the scene pinned inside it ---------- */

.xpl.is-live { height: 440vh; height: 440svh; }
/* Compact: a longer track, so each of the seven captions gets a comfortable stretch of scroll */
.xpl.is-live.is-compact { height: 600vh; height: 600svh; }
.xpl.is-live .xpl__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* The heading sits over the closed device and lifts away as the parts begin to separate (--hp, from JS) */
.xpl.is-live .xpl__head {
  position: absolute;
  top: calc(var(--nav-h) + clamp(12px, 4.5vh, 52px));
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 auto;
  opacity: calc(1 - var(--hp, 0));
  transform: translate3d(0, calc(var(--hp, 0) * -36px), 0);
}
.xpl.is-live .xpl__view { position: absolute; inset: var(--nav-h) 0 0; width: auto; margin: 0; }
.xpl.is-live .xpl__still { display: none; }
.xpl.is-live .xpl__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.xpl.is-ready .xpl__canvas { opacity: 1; }
.xpl.is-live .xpl__note { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.xpl.is-live.is-open .xpl__note { opacity: 1; }

/* Live labels arrive as their part separates: the dot, then the leader draws out of it, then the text rises */
.xpl.is-live .xpl__part > * { opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
.xpl.is-live .xpl__part.is-on > * { opacity: 1; transform: none; transition-delay: 0.3s; }
.xpl.is-live .xpl__part.is-on > .xpl__d { transition-delay: 0.42s; }
.xpl.is-live .xpl__lead { stroke-dashoffset: 1; transition: stroke-dashoffset 0.45s var(--ease-out); }
.xpl.is-live .xpl__halo, .xpl.is-live .xpl__dot { transform: scale(0); transition: transform 0.35s var(--ease-out); }
.xpl.is-live .xpl__wire.is-on .xpl__lead { stroke-dashoffset: 0; transition-duration: 0.6s; transition-delay: 0.1s; }
.xpl.is-live .xpl__wire.is-on .xpl__halo, .xpl.is-live .xpl__wire.is-on .xpl__dot { transform: none; transition-timing-function: var(--spring-snappy); }
.xpl.is-live .xpl__wire.is-on .xpl__dot { transition-delay: 0.04s; }

/* Compact live: one caption in a centred column under the stack; its leader comes round the stack on the part's own side */
.xpl.is-live.is-compact .xpl__part { width: min(100% - 40px, 32rem); }
.xpl.is-live.is-compact .xpl__d { max-width: 24em; }

/* Dimension lines round the closed device at the end: extension lines, the dimension with oblique ticks, the size */
.xpl__dims { opacity: 0; transition: opacity 0.4s var(--ease-out); }
.xpl.is-dims .xpl__dims { opacity: 1; }
.xpl__ext { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-width: 1; }
.xpl__dline { fill: none; stroke: rgb(255 255 255 / 0.62); stroke-width: 1; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease-out) 0.1s; }
.xpl.is-dims .xpl__dline { stroke-dashoffset: 0; }
.xpl__dlabel {
  fill: var(--label);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out) 0.45s;
}
.xpl.is-dims .xpl__dlabel { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .xpl__part > *, .xpl__lead, .xpl__halo, .xpl__dot, .xpl__dims, .xpl__dline, .xpl__dlabel { transition: none !important; }
}

/* ---------- Spec readout: odometer numbers on a hairline grid (odo stats row) ---------- */

.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px;
  margin: clamp(56px, 7vw, 96px) auto 0;
}
.spec { position: relative; padding: clamp(26px, 3vw, 40px) 12px; text-align: center; }
/* Vertical hairlines between columns, fading out at both ends */
.spec::before {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent, var(--hair-strong) 30% 70%, transparent);
}
.spec:nth-child(4n + 1)::before { display: none; }
/* Horizontal hairline between the rows */
.spec:nth-child(n + 5)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-strong) 25% 75%, transparent);
}
.spec__v {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--label);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.15rem + 1.9vw, 3rem);
  font-stretch: var(--wide);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.spec__vis { display: inline-flex; align-items: baseline; }
.spec__pre, .spec__u, .spec__x {
  color: var(--label-3);
  font-size: max(0.4em, 0.8125rem);
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: 0;
}
.spec__pre { margin-right: 0.4em; }
.spec__u { margin-left: 0.3em; }
.spec__x { margin: 0 0.14em; font-size: 0.46em; font-weight: 500; }
.spec__x--word { margin: 0 0.4em; font-size: max(0.4em, 0.8125rem); font-weight: 600; }
.spec__k { margin-top: 12px; color: var(--label-3); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; text-wrap: balance; }

.specs__source { max-width: 46em; margin: 32px auto 0; color: var(--label-3); font-size: 0.8125rem; line-height: 1.45; text-align: center; text-wrap: balance; }

@media (max-width: 1099.98px) {
  .spec__v { font-size: clamp(1.75rem, 0.9rem + 2.2vw, 2.375rem); }
}

@media (max-width: 759.98px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { padding: 24px 6px; }
  .spec__v { font-size: clamp(1.625rem, 0.85rem + 3.4vw, 2.25rem); }
  .spec__k { font-size: 0.9375rem; }
  .spec:nth-child(4n + 1)::before { display: block; }
  .spec:nth-child(2n + 1)::before { display: none; }
  .spec:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hair-strong) 25% 75%, transparent);
  }
}

/* Source line still used by the features section */
.device__source { margin-top: 20px; color: var(--label-2); font-size: 0.8125rem; text-align: center; }

/* ---------- 6 · Features: an odo-style bento on real photography ---------- */
/* One two-tone paragraph per card (bright h3 + grey text, same weight). Art is a real photo with glass UI on top,
   or a product-grade mockup drawn to scale. Teal only at icon size, where the beacon transmits. */

.ft-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) {
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft--car { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .ft-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .ft { grid-column: span 2; }
  .ft--w4 { grid-column: span 4; }
}

.ft {
  --pad: 32px;
  display: flex;
  flex-direction: column;
  min-height: 450px;
  padding: var(--pad);
}
@media (max-width: 699px) { .ft { --pad: 24px; min-height: 460px; } }

/* Title and description share one paragraph: an inline h3 in --label, the rest in --label-3 */
.ft__copy {
  position: relative;
  z-index: 2;
  max-width: 24em;
  color: var(--label-3);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.ft__copy h3, .ft__copy p { display: inline; font: inherit; letter-spacing: inherit; }
.ft__copy h3 { color: var(--label); }
.ft--w4 .ft__copy { max-width: 27em; }

.ft__art { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; min-height: 0; margin-top: 28px; }
.ft__art--end { justify-content: flex-end; }

/* Photo cards: the photo fills the card, a black scrim only where the copy sits */
.ft--photo { background: #000; }
.ft__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.ft__media img { width: 100%; height: 100%; object-fit: cover; }
.ft__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.86), rgb(0 0 0 / 0.62) 26%, rgb(0 0 0 / 0.12) 50%, rgb(0 0 0 / 0) 62%),
    linear-gradient(to top, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0) 28%);
}
.ft--photo .ft__copy { color: var(--label-2); }

/* Glass chip: UI laid over a photo */
.ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  color: var(--label);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.003em;
  white-space: nowrap;
}
.ft-chip__icon { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--label-2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ft-chip__state { margin-left: 2px; color: var(--signal); }
.ft-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* Signal dot: pings twice when its card arrives, then rests (no endless loops) */
.ft-dot { position: relative; display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgb(48 209 212 / 0.16); }
.ft-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }
.ft-dot--threat { background: var(--threat); box-shadow: 0 0 0 3px rgb(255 69 58 / 0.16); }
@media (prefers-reduced-motion: no-preference) {
  .ft.is-visible .ft-dot::after { animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) 1s 2; }
}

/* ---------- Battery: five-year ruler ---------- */

.batt { justify-content: flex-end; }
.batt__big { display: flex; align-self: flex-end; align-items: baseline; gap: 12px; margin: 0 -6px 18px 0; color: var(--label); }
.batt__num { font-size: clamp(88px, 8.4vw, 120px); font-stretch: var(--wide); font-weight: 600; line-height: 0.78; letter-spacing: -0.045em; }
.batt__unit { color: var(--label-3); font-size: 1.1875rem; font-weight: 600; }

.batt__scale { position: relative; --p: 1; padding: 46px 0 30px; }
.batt__comb {
  height: 26px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.13) 0 1px, transparent 1px 4px);
  -webkit-mask-image: linear-gradient(to top, #000, rgb(0 0 0 / 0.25));
  mask-image: linear-gradient(to top, #000, rgb(0 0 0 / 0.25));
}
.batt__ticks { display: block; width: 100%; height: 20px; margin-top: 8px; overflow: visible; }
.batt__ticks path { fill: none; stroke: rgb(255 255 255 / 0.26); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
/* The same comb and ticks, bright, revealed up to the needle */
.batt__lit { position: absolute; inset: 46px 0 30px; clip-path: inset(-2px calc((1 - var(--p)) * 100%) -2px -2px); }
.batt__lit .batt__comb { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.5) 0 1px, transparent 1px 4px); }
.batt__lit .batt__ticks path { stroke: rgb(255 255 255 / 0.85); }

.batt__needle { position: absolute; top: 0; bottom: 30px; left: 0; width: 100%; transform: translateX(calc(var(--p) * 100%)); pointer-events: none; }
.batt__line { position: absolute; top: 34px; bottom: -4px; left: -0.5px; width: 1px; background: var(--label); box-shadow: 0 0 10px rgb(255 255 255 / 0.35); }
.batt__chip {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 11px;
  border-radius: 999px;
  color: var(--label-2);
  white-space: nowrap;
  transform: translateX(calc(var(--p) * -100%));
}
.batt__chip b { color: var(--label); font-weight: 500; }
.batt__years { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; margin: 0; padding: 0; list-style: none; }
.batt__years li { position: absolute; top: 0; transform: translateX(-50%); color: var(--label-3); font-size: 0.8125rem; font-weight: 600; }
.batt__years li:nth-child(2) { left: 20%; }
.batt__years li:nth-child(3) { left: 40%; }
.batt__years li:nth-child(4) { left: 60%; }
.batt__years li:nth-child(5) { left: 80%; }
.batt__years li:nth-child(6) { left: 100%; }

/* ---------- No wires ---------- */

.ft--wires .ft__media img { object-position: 50% 60%; }
.ft--wires .ft-chip { max-width: 100%; white-space: normal; padding-block: 7px; line-height: 1.25; }

/* ---------- IP67: decode + operating range ---------- */

.ip { display: grid; gap: 16px; padding: 16px 18px 16px; border-radius: var(--radius-l); }
.ip__code { display: grid; grid-template-columns: auto 1fr 1fr; align-items: end; }
.ip__ip, .ip__digit b { color: var(--label); font-size: 2.375rem; font-stretch: var(--wide); font-weight: 600; line-height: 0.9; letter-spacing: -0.02em; }
.ip__ip { padding-right: 14px; }
.ip__digit { display: grid; gap: 7px; padding-left: 14px; box-shadow: inset 1px 0 rgb(255 255 255 / 0.12); }
.ip__digit small { color: var(--label-2); font-size: 0.8125rem; font-weight: 600; }
.ip__temp { display: grid; gap: 8px; padding-top: 14px; box-shadow: inset 0 1px rgb(255 255 255 / 0.12); }
.ip__label { color: var(--label-2); font-size: 0.8125rem; font-weight: 600; }
/* Scale from −40 to +80 °C, a tick every 10 °C; the working band is −20 to +60 */
.ip__scale {
  position: relative;
  height: 14px;
  background:
    linear-gradient(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.2)) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.32) 0 1px, transparent 1px calc(100% / 12)) 0 100% / 100% 7px no-repeat;
}
.ip__band { position: absolute; left: 16.667%; right: 16.667%; bottom: 0; height: 4px; border-radius: 2px; background: var(--label); transform-origin: left center; }
.ip__ends { position: relative; height: 16px; color: var(--label); font-size: 0.8125rem; font-weight: 600; }
.ip__ends span { position: absolute; top: 0; white-space: nowrap; }
.ip__ends span:first-child { left: 16.667%; transform: translateX(-50%); }
.ip__ends span:last-child { right: 16.667%; transform: translateX(50%); }

/* ---------- Size: plan view at true scale next to a bank card ---------- */

.size { position: relative; width: 100%; max-width: 340px; margin: 0 auto 4px; }
.size__svg { display: block; width: 100%; height: auto; overflow: visible; }
.size__card { stroke: rgb(255 255 255 / 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.size__chipline { fill: none; stroke: rgb(0 0 0 / 0.4); stroke-width: 0.35; }
.size__wave { fill: none; stroke: rgb(255 255 255 / 0.5); stroke-width: 0.8; stroke-linecap: round; }
.size__shadow { fill: #000; opacity: 0.75; }
.size__body { fill: #0b0c0e; stroke: rgb(255 255 255 / 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.size__lid { stroke: rgb(255 255 255 / 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.size__top { stroke: rgb(255 255 255 / 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.size__screws circle { fill: url(#ft-screw-g); }
.size__cross { fill: none; stroke: #2b2d31; stroke-width: 0.55; stroke-linecap: round; }
.size__led { fill: var(--signal); }
.size__shine { fill: none; stroke: rgb(255 255 255 / 0.32); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.size__dim { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.size__dim--end { stroke: rgb(255 255 255 / 0.55); }
.size__label, .size__name { position: absolute; color: var(--label-2); font-size: 0.8125rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.size__label--w { left: 62.05%; top: 4.85%; transform: translate(-50%, -50%); }
.size__label--h { left: 91.27%; top: 40.3%; transform: translate(-50%, -50%) rotate(-90deg); }
.size__label--d { left: 30.1%; top: 87.3%; transform: translate(-100%, -50%); }
.size__name { left: 5.4%; top: 59.7%; transform: translateY(-100%); color: var(--label-2); font-size: 0.6875rem; }

/* ---------- Four constellations ---------- */

.gnss { margin-top: 32px; }
.gnss__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gnss__lines path { fill: none; stroke: rgb(255 255 255 / 0.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gnss__sat, .gnss__rx { position: absolute; display: flex; align-items: center; gap: 8px; }
.gnss__sat { left: var(--x); top: var(--y); transform: translate(-4px, -50%); }
.gnss__sat--l { flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
.gnss__sat > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--label); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.14), 0 0 12px rgb(255 255 255 / 0.5); }
.gnss__sat .ft-chip { min-height: 30px; padding: 0 12px; font-size: 0.8125rem; }
.gnss__rx { left: 50%; top: 92%; transform: translate(-3.5px, -50%); }
.gnss__rx .ft-chip { min-height: 30px; padding: 0 12px 0 10px; color: var(--label-2); font-size: 0.8125rem; }

/* ---------- Motion alert: a notification over the night photo ---------- */

.notif-wrap { justify-content: center; padding-bottom: 22%; }
.notif { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 330px; margin-inline: auto; padding: 12px 14px 12px 12px; border-radius: 22px; box-shadow: var(--highlight), var(--ring), 0 18px 40px -18px rgb(0 0 0 / 0.9); }
.notif__icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 9px; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); color: var(--label); }
.notif__mark { width: 15px; height: 21px; overflow: visible; }
.notif__body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.notif__top { display: flex; justify-content: space-between; gap: 8px; color: var(--label-2); font-size: 0.8125rem; line-height: 1.3; }
.notif__top b { color: var(--label); font-size: 0.875rem; font-weight: 600; }
.notif__msg { display: flex; align-items: center; gap: 7px; color: var(--label); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.ft--motion .ft__media img { object-position: 50% 50%; }

/* ---------- A different spot in every car: photo + X-ray scan band ---------- */

.ft--car .ft__copy { text-shadow: 0 1px 24px rgb(0 0 0 / 0.6); }
.car { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; container-type: size; background: #000; }
.car__frame { position: absolute; left: 58%; top: 50%; width: max(100cqw, 100cqh * 1.5385); aspect-ratio: 1600 / 1040; transform: translate(-58%, -44%); }
/* Scrim: opaque behind the copy, clear over the car */
.car::after { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(to bottom, var(--card), rgb(14 14 16 / 0.82) 16%, rgb(14 14 16 / 0) 40%), linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 22%); pointer-events: none; }
.car__photo, .car__scan-in img { position: absolute; inset: 0; width: 100%; height: 100%; }
.car__scan { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 22%; overflow: hidden; transform: translateX(calc(var(--s) * 100%)); will-change: transform; }
.car__scan-in { position: absolute; top: 0; left: 0; width: calc(100% / 0.22); height: 100%; transform: translateX(calc(var(--s) * -22%)); will-change: transform; }
/* The band's edges read like a scanner window: hairlines with a tick scale top and bottom */
.car__scan::before, .car__scan::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 1px; background: rgb(255 255 255 / 0.55); }
.car__scan::before { left: 0; }
.car__scan::after { right: 0; }
.car__scan-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.4) 0 1px, transparent 1px 8px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.4) 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat;
}
.car__spot { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); opacity: 0; transition: opacity 0.6s var(--ease); }
.car__spot.is-past { opacity: 0.7; }
.car__beacon { position: absolute; left: var(--bx, 49.4%); top: var(--by, 39.4%); z-index: 3; display: flex; align-items: center; gap: 20px; transform: translate(-3.5px, -50%); opacity: 0; transition: opacity 0.35s var(--ease); }
.car__beacon.is-flip { flex-direction: row-reverse; transform: translate(calc(-100% + 3.5px), -50%); }
.car.is-found .car__beacon { opacity: 1; }
.car__lock {
  position: absolute;
  top: 50%;
  left: 4.5px;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  --c: rgb(255 255 255 / 0.9);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 8px no-repeat;
  transform: scale(1.9);
  opacity: 0;
  transition: transform 0.6s var(--spring), opacity 0.3s var(--ease);
}
.car__beacon.is-flip .car__lock { left: auto; right: 4.5px; margin: -15px -15px 0 0; }
.car.is-found .car__lock { transform: none; opacity: 1; }
.car__beacon .ft-dot { width: 9px; height: 9px; box-shadow: 0 0 0 4px rgb(48 209 212 / 0.2), 0 0 14px rgb(48 209 212 / 0.55); }
.car__tag { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: rgb(0 0 0 / 0.55); box-shadow: var(--ring-strong); color: var(--label-2); white-space: nowrap; }
.car__tag b { margin-left: 0.5ch; color: var(--label); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .car.is-found .car__beacon .ft-dot::after { animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
  .car.is-off .car__beacon .ft-dot::after { animation-play-state: paused; }
}
.car__note { position: absolute; left: 20px; bottom: 20px; z-index: 5; display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; background: rgb(0 0 0 / 0.6); box-shadow: var(--ring); color: var(--label-2); font-size: 0.75rem; font-weight: 600; }
.ft__toggle { position: absolute; right: 16px; bottom: 16px; z-index: 5; }

@media (max-width: 699px) {
  /* Phones: the photo sits under the copy, wider than the card so the car fills it */
  .ft--car { min-height: 0; padding-bottom: 0; }
  .car { position: relative; inset: auto; z-index: 0; width: calc(100% + 2 * var(--pad)); margin: 12px calc(-1 * var(--pad)) 0; aspect-ratio: 1.18; border-radius: 0; }
  .car__frame { left: 50%; width: 124cqw; transform: translate(-58%, -47%); }
  .car::after { background: linear-gradient(to bottom, var(--card), rgb(14 14 16 / 0.6) 14%, rgb(14 14 16 / 0) 34%), linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 22%); }
}

/* ---------- Source line ---------- */

.ft-source { max-width: 46em; margin: 28px auto 0; color: var(--label-3); font-size: 0.8125rem; line-height: 1.45; text-align: center; text-wrap: balance; }

/* ---------- Choreography (only with motion allowed and JS running) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .ft .ft-chip, .js .ft .ip, .js .ft .notif, .js .gnss__lines path, .js .gnss__sat, .js .gnss__rx, .js .size__label {
    opacity: 0;
    transition: opacity 0.7s var(--ease-out), transform 0.9s var(--spring);
  }
  .js .ft-stack .ft-chip, .js .ft .ip { transform: translateY(12px); }
  .js .ft .notif { transform: translateY(-18px) scale(0.96); }
  .js .ft.is-visible .ft-chip, .js .ft.is-visible .ip, .js .ft.is-visible .notif,
  .js .ft.is-visible .gnss__lines path, .js .ft.is-visible .gnss__sat, .js .ft.is-visible .gnss__rx, .js .ft.is-visible .size__label { opacity: 1; }
  .js .ft.is-visible .ft-stack .ft-chip, .js .ft.is-visible .ip { transform: none; }
  .js .ft.is-visible .notif { transform: none; transition-delay: 0.7s; }
  .js .ft.is-visible .ft-stack .ft-chip:nth-child(1) { transition-delay: 0.45s; }
  .js .ft.is-visible .ft-stack .ft-chip:nth-child(2) { transition-delay: 0.85s; }
  .js .ft.is-visible .ip { transition-delay: 0.45s; }
  .js .ft.is-visible .ip__band { animation: ft-band 1.2s var(--ease-out) 0.8s backwards; }
  .js .ft.is-visible .gnss__sat { transition-delay: calc(0.4s + var(--d) * 0.18s); }
  .js .ft.is-visible .gnss__lines path { transition-delay: 1.1s; transition-duration: 1.2s; }
  .js .ft.is-visible .gnss__rx { transition-delay: 1.5s; }
  .js .ft.is-visible .size__label { transition-delay: 0.6s; }
  /* These two sit absolutely positioned: fade only, their own transforms place them */
  .js .gnss__sat, .js .gnss__rx { transition-property: opacity; }
}
@keyframes ft-band { from { transform: scaleX(0); } }

/* ---------- 7 · MINI phone ---------- */
/* A real photograph of a hand holding a phone at night. The phone's own screen is covered exactly by an HTML
   phone (frame from layered shadows) showing the MINI app, so the UI stays sharp and translatable. */

.mini__card { margin: 0; }

/* Scene: the photo on a frame with its own aspect ratio, cropped around the phone at every width */
.mini__scene { position: relative; height: min(720px, 64vw); overflow: hidden; container-type: size; background: #000; }
.mini__frame {
  --ar: 1.768;
  --sw: calc(max(100cqw, 100cqh * var(--ar)) * var(--zoom, 1.22));
  --sh: calc(var(--sw) / var(--ar));
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  left: clamp(100cqw - var(--sw), 50cqw - 0.526 * var(--sw), 0px);
  top: clamp(100cqh - var(--sh), 50cqh - 0.432 * var(--sh), 0px);
  container-type: inline-size;
}
/* The bokeh is softened a touch and graded like the rest of the page (cool, slightly desaturated) */
.mini__frame > img { width: 100%; height: 100%; filter: blur(2px) saturate(0.45) brightness(0.74); }
/* falloff toward the edges, black only, so the eye lands on the phone */
.mini__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(34% 54% at 52.6% 43%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.6)); pointer-events: none; }

/* The phone: positioned on the photographed phone's screen (697,77 to 986,700 of 1600 × 905).
   The bezel and its edge are box-shadow rings, like a device frame drawn in light. */
.mini__phone {
  --px: calc(100cqw / 1600);
  position: absolute;
  left: 43.5625%;
  top: 8.508%;
  z-index: 2;
  width: 18.0625%;
  height: 68.84%;
  border-radius: calc(32 * var(--px));
  background: #000;
  box-shadow:
    0 0 0 calc(12 * var(--px)) #0b0b0c,
    0 0 0 calc(12 * var(--px) + 1px) rgb(255 255 255 / 0.13),
    0 0 0 calc(12 * var(--px) + 2px) rgb(0 0 0 / 0.6);
  overflow: hidden;
  container-type: size;
}
/* Glass: a faint sheen from the top-left, neutral white */
.mini__phone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 34%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
  pointer-events: none;
}

/* ---------- The app (all sizes in em, so it scales with the phone) ---------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0.95em;
  color: #f5f5f7;
  font-size: 4.25cqw;
  line-height: 1.25;
  letter-spacing: 0.005em;
}
.app__status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 4.2em; padding: 0 0.9em; }
.app__time { font-size: 1.2em; font-weight: 600; letter-spacing: -0.01em; }
.app__island { position: absolute; top: 1em; left: 50%; width: 8.4em; height: 2.4em; border-radius: 2em; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04); translate: -50% 0; }
.app__sys { display: flex; align-items: center; gap: 0.45em; }
.app__cell { display: flex; align-items: flex-end; gap: 0.14em; height: 0.85em; }
.app__cell b { width: 0.24em; border-radius: 0.06em; background: #f5f5f7; }
.app__cell b:nth-child(1) { height: 35%; } .app__cell b:nth-child(2) { height: 55%; } .app__cell b:nth-child(3) { height: 78%; } .app__cell b:nth-child(4) { height: 100%; }
.app__batt { position: relative; width: 1.9em; height: 0.92em; border-radius: 0.28em; box-shadow: inset 0 0 0 0.09em rgb(255 255 255 / 0.4); }
.app__batt::before { content: ""; position: absolute; inset: 0.17em 0.5em 0.17em 0.17em; border-radius: 0.12em; background: #f5f5f7; }
.app__batt::after { content: ""; position: absolute; top: 0.3em; right: -0.18em; width: 0.1em; height: 0.32em; border-radius: 0 0.1em 0.1em 0; background: rgb(255 255 255 / 0.4); }

/* Live status card, like a live activity: who, what, where */
.app__live {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 0.4em;
  padding: 0.85em 1em 0.85em 0.85em;
  border-radius: 1.45em;
  background: #1c1c1e;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px rgb(255 255 255 / 0.06);
}
.app__badge { display: grid; place-items: center; width: 2.7em; height: 2.7em; flex: none; border-radius: 50%; background: #f5f5f7; color: #000; }
.app__badge .icon { width: 1.45em; height: 1.45em; stroke-width: 2; }
.app__who { display: grid; gap: 0.1em; min-width: 0; }
.app__who b { font-size: 1.22em; font-weight: 600; letter-spacing: -0.01em; }
.app__who span { display: flex; align-items: center; gap: 0.45em; color: #a1a1a6; font-size: 0.95em; font-weight: 500; white-space: nowrap; }
.app__who i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #f5f5f7; box-shadow: 0 0 0 0.2em rgb(255 255 255 / 0.14); }
.app__updated { margin-left: auto; align-self: flex-start; padding-top: 0.1em; color: #86868b; font-size: 0.86em; font-weight: 500; }

/* Map tile: a real street map of north Riga (OpenStreetMap), the trip in white, the car with a soft halo */
.app__map { position: relative; flex: 1; min-height: 0; margin-top: 0.75em; overflow: hidden; border-radius: 1.45em; background: #121315; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.app__map svg { display: block; width: 100%; height: 100%; }
/* Street layers are styled by class alone (no ancestor), so the copies <use>d in the plan cards match in every browser */
.am__land { fill: #121315; }
.am__green { fill: #121814; }
.am__water { fill: #0e161b; }
.am__minor, .am__rail, .am__tram, .am__tertiary, .am__major, .am__trip-casing, .am__trip { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.am__minor { stroke: #222428; stroke-width: 1.5; }
.am__rail { stroke: #2a2c31; stroke-width: 1; stroke-dasharray: 3 3; stroke-linecap: butt; }
.am__tram { stroke: #1d1f22; stroke-width: 1; }
.am__tertiary { stroke: #2c2e33; stroke-width: 2.6; }
.am__major { stroke: #373a40; stroke-width: 4.4; }
.am__district { fill: #5a5a5f; font-size: 7.4px; font-weight: 600; letter-spacing: 0.16em; }
.am__label { fill: #8e8e93; font-size: 8.6px; font-weight: 600; letter-spacing: 0.01em; paint-order: stroke; stroke: #121315; stroke-width: 2.5px; }
.am__trip-casing { stroke: #000; stroke-width: 7; opacity: 0.55; }
.am__trip { stroke: #f5f5f7; stroke-width: 3.2; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.am__start { fill: #121315; stroke: #f5f5f7; stroke-width: 2.4; }
.am__dot { fill: #f5f5f7; stroke: #000; stroke-width: 2.4; }
.am__halo { fill: rgb(255 255 255 / 0.16); }
.app__coords {
  position: absolute;
  left: 0.8em;
  top: 0.8em;
  padding: 0.45em 0.7em;
  border-radius: 0.8em;
  background: rgb(20 20 22 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #a1a1a6;
  font-size: 0.72em;
  white-space: nowrap;
}
/* map data attribution, as a real map app shows it */
.app__osm { position: absolute; right: 0.9em; bottom: 0.7em; color: rgb(255 255 255 / 0.36); font-size: 0.56em; font-weight: 500; }

/* Trip numbers */
.app__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0.75em 0 0;
  padding: 0.95em 0.4em;
  border-radius: 1.45em;
  background: #1c1c1e;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  text-align: center;
}
.app__stats > div { display: grid; gap: 0.2em; }
.app__stats > div + div { box-shadow: -1px 0 rgb(255 255 255 / 0.08); }
.app__stats b { font-size: 1.55em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.app__stats small { margin-left: 0.18em; color: #a1a1a6; font-size: 0.55em; font-weight: 600; letter-spacing: 0; }
.app__stats > div > span { color: #86868b; font-size: 0.8em; font-weight: 500; }
.app__home { align-self: center; flex: none; width: 9.5em; height: 0.36em; margin: 1.1em 0 0.75em; border-radius: 1em; background: rgb(255 255 255 / 0.75); }

/* Caption: the honesty note, as a glass chip on the photo */
.mini__note {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgb(20 20 22 / 0.62);
  box-shadow: var(--highlight), var(--ring);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: var(--label-2);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Callouts (wide screens): glass chips on the photo with hairline leaders to the part of the app they describe */
.mini__callout { position: absolute; top: var(--y); z-index: 3; display: none; align-items: center; translate: 0 -50%; }
.mini__callout--l { right: 57.6%; }
.mini__callout--r { left: 62.8%; }
.mini__callout i { position: relative; width: clamp(28px, 4cqw, 64px); height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.55)); }
.mini__callout--r i { background: linear-gradient(90deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.2)); }
.mini__callout i::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: #f5f5f7; box-shadow: 0 0 0 3px rgb(0 0 0 / 0.5); }
.mini__callout--l i::after { right: -3px; }
.mini__callout--r i::after { left: -3px; }
.mini__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: rgb(22 22 24 / 0.6);
  box-shadow: var(--highlight), var(--ring), 0 12px 24px -12px rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: var(--label);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.mini__chip .icon { width: 18px; height: 18px; stroke-width: 1.75; color: var(--label-2); }
@media (min-width: 1100px) {
  .mini__callout { display: flex; }
  .mini__features { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Three capabilities under the photo, split by fading hairlines */
.mini__features {
  display: grid;
  gap: 18px;
  max-width: 980px;
  margin: clamp(32px, 4vw, 48px) auto 0;
}
.mini__features li { display: flex; align-items: center; gap: 14px; color: var(--label); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.005em; }
.mini__features .icon { width: 26px; height: 26px; stroke-width: 1.5; color: var(--label-2); }
@media (min-width: 760px) {
  .mini__features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .mini__features li { flex-direction: column; gap: 12px; padding: 4px 24px; text-align: center; }
  .mini__features li + li { border-left: 1px solid; border-image: linear-gradient(transparent, var(--hair-strong) 30% 70%, transparent) 1; }
}

@media (max-width: 899.98px) {
  .mini__scene { height: 640px; }
  .mini__frame { --zoom: 1.2; }
}
/* Phones: the phone in the photo fills the frame, the honesty note moves under the photo */
@media (max-width: 599.98px) {
  .mini__scene { height: 640px; }
  .mini__frame { --zoom: 1.27; }
  .mini__note { position: static; display: block; min-height: 0; padding: 14px 20px 16px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--label-3); text-align: center; }
}

/* Route draws in once, the car arrives and its halo breathes once; all motion is over within 5 s */
@media (prefers-reduced-motion: no-preference) {
  .js .mini__card:not(.is-visible) .am__trip { stroke-dashoffset: 1; }
  .js .mini__card .am__trip { transition: stroke-dashoffset 2.2s cubic-bezier(0.45, 0, 0.2, 1) 0.5s; }
  .am__halo { transform-box: fill-box; transform-origin: center; }
  .js .mini__card:not(.is-visible) .am__here { opacity: 0; transform: translate(252.5px, 295.3px) scale(0.4); }
  .js .mini__card .am__here { transition: opacity 0.4s var(--ease-out) 2.5s, transform 0.7s var(--spring-snappy) 2.5s; }
  .js .mini__card.is-visible .am__halo { animation: am-halo 2s var(--ease-out) 2.7s both; }
}
@keyframes am-halo { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.6); opacity: 0.25; } }

/* ---------- 8 · Plans ---------- */
/* Three cards whose rows line up (subgrid), so prices, buttons and inclusions read across at a glance.
   The complete plan is the one with the brighter edge and the white pill; the others use glass. */

.plans { display: grid; gap: 16px; max-width: 520px; margin-inline: auto; }
@media (min-width: 960px) {
  .plans { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 30px;
  background: linear-gradient(#121214, #0a0a0b);
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  }
}
.plan > :not(.plan__visual) { margin-inline: 16px; }

/* Visual well: a nested surface with a soft floor light, the hardware sitting on it */
.plan__visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 164px;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(55% 42% at 50% 80%, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 70%), #09090a;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.plan__device { width: 206px; height: auto; margin-top: 8px; filter: drop-shadow(0 18px 18px rgb(0 0 0 / 0.55)); }

/* A small phone with the app's map, built in HTML and SVG like the large one */
.plan__phone {
  position: relative;
  display: block;
  width: 60px;
  height: 120px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 12px;
  background: #141517;
  box-shadow: 0 0 0 4px #161618, 0 0 0 5px #3a3a3d, 0 22px 26px -14px #000;
}
.plan__phone::before { content: ""; position: absolute; top: 5px; left: 50%; z-index: 1; width: 18px; height: 5px; border-radius: 4px; background: #000; translate: -50% 0; }
.plan__phone svg { display: block; width: 100%; height: 100%; }
/* the same Riga street map as the large MINI phone, reused with <use> (it lives in the MINI section) */
.pp__bg { fill: #121315; }
.pp__trip { fill: none; stroke: #f5f5f7; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.pp__dot { fill: #f5f5f7; stroke: #000; stroke-width: 3.5; }
.plan__visual--total .plan__device { width: 190px; translate: -28px 12px; }
.plan__visual--total .plan__phone { position: absolute; left: calc(50% + 44px); top: 40px; margin: 0; width: 54px; height: 108px; border-radius: 11px; }

/* Identity */
.plan__id { position: static; margin-top: 24px; }
.plan__name { font-family: var(--font-display); font-size: 1.5rem; font-stretch: var(--wide); font-weight: 600; line-height: 1.1; letter-spacing: 0.005em; }
.plan__tagline { margin-top: 6px; color: var(--label-3); font-size: 0.9375rem; font-weight: 500; }
.plan__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgb(28 28 30 / 0.7);
  box-shadow: var(--highlight), var(--ring-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--label);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Price: wide display numerals, the currency set small and raised, the period quiet */
.plan__pricing { margin-top: 18px; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.5rem + 1.4vw, 3.75rem);
  font-stretch: var(--wide);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.plan__amount small { position: relative; top: -0.82em; margin: 0 0.06em; color: var(--label-2); font-size: 0.42em; font-weight: 600; letter-spacing: 0; }
.plan__period { color: var(--label-3); font-size: 1rem; font-weight: 500; }

.plan__desc { margin-top: 14px; color: var(--label-2); font-size: 1.0625rem; line-height: 1.47; text-wrap: pretty; }
.plan__desc strong { display: block; margin-top: 8px; color: var(--label); font-weight: 500; }
.plan__cta.btn--block { width: auto; margin-top: 24px; align-self: stretch; }

/* Inclusions: thin icons, included in white, excluded dimmed (with a spoken "not included") */
.plan__features {
  display: grid;
  align-content: start;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-size: 0.9375rem;
}
.plan__features li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; line-height: 1.4; }
.plan__features .icon { width: 18px; height: 18px; margin-top: 1px; stroke-width: 1.75; }
.is-included { color: var(--label); }
.is-excluded { color: var(--label-3); }
.is-excluded .icon { color: var(--label-4); }

/* The complete plan: a brighter light-catch edge and a slightly lifted surface */
.plan--featured { background: linear-gradient(#18181b, #0c0c0e); }
.plan--featured::before { background: linear-gradient(165deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.16) 30%, rgb(255 255 255 / 0.07) 62%, rgb(255 255 255 / 0.3)); }
.plan--featured .plan__visual { background: radial-gradient(55% 42% at 50% 80%, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0) 70%), #0b0b0c; }

.plans__note { margin-top: clamp(28px, 4vw, 40px); color: var(--label-3); font-size: 1.0625rem; text-align: center; }
.plans__note a { padding-block: 10px; color: var(--label); } /* inline padding: a 44px hit area without moving the line */

@media (max-width: 959.98px) {
  .plan { padding-bottom: 26px; }
  .plan__visual { height: 156px; }
  .plan__visual--total .plan__phone { top: 36px; }
  .plan__id { margin-top: 22px; }
  .plan__features { gap: 11px; margin-top: 22px; padding-top: 20px; }
}

/* ---------- 9 · Cases: an operations console with real case photos ---------- */

.cases { position: relative; }
.cases__ruler { position: absolute; top: 0; left: 0; right: 0; }

/* The console: one card holding the case switcher, the chart and the case file */
.console { padding: 10px; border-radius: var(--radius-xl); }

/* Case switcher: a segmented glass track with a thumb that springs to the selected case */
.console__tabs {
  position: relative;
  padding: 4px;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.035);
  box-shadow: var(--ring);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.console__tabs::-webkit-scrollbar { display: none; }
.console__track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(152px, 1fr)); gap: 4px; }
.console__thumb {
  position: absolute;
  top: 4px;
  left: 0;
  width: var(--w, 25%);
  height: calc(100% - 8px);
  border-radius: 16px;
  background: var(--raise-2);
  box-shadow: var(--highlight), var(--ring), 0 8px 18px -10px rgb(0 0 0 / 0.9);
  transform: translateX(var(--x, 4px));
  pointer-events: none;
}
.console__thumb.is-ready { transition: transform 0.7s var(--spring), width 0.7s var(--spring); }
.ctab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-height: 66px;
  padding: 10px 16px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--label-3);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s var(--ease);
}
.ctab:hover { color: var(--label-2); }
.ctab[aria-selected="true"] { color: var(--label); }
.ctab:focus-visible { outline-offset: -2px; }
.ctab__meta { color: var(--label-3); font-size: 0.6875rem; white-space: nowrap; }
.ctab[aria-selected="true"] .ctab__meta { color: var(--label-2); }
.ctab__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.15; white-space: nowrap; }
/* Without JS the selected tab still reads as selected */
.ctab[aria-selected="true"] { background: var(--raise-2); box-shadow: var(--highlight), var(--ring); }
.console.has-thumb .ctab[aria-selected="true"] { background: none; box-shadow: none; }
.console:not(.has-thumb) .console__thumb { display: none; }

.console__body { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 1000px) {
  .console__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---------- The chart ---------- */

.console__map { position: relative; display: flex; flex-direction: column; margin: 0; }
.cmap {
  position: relative;
  flex: 1;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: #020203;
  isolation: isolate;
}
@media (min-width: 1000px) { .cmap { aspect-ratio: auto; min-height: 560px; } }
/* inner ring and a faint top-left sheen: the chart sits under glass */
.cmap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 0 0, rgb(255 255 255 / 0.035), transparent 55%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  pointer-events: none;
}
.cmap__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#cmap-dots circle { fill: rgb(255 255 255 / 0.3); }
.cmap__grat { fill: none; stroke: rgb(255 255 255 / 0.065); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cmap__land { fill: url(#cmap-dots); stroke: rgb(255 255 255 / 0.3); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cmap__home { fill: rgb(255 255 255 / 0.07); stroke: rgb(255 255 255 / 0.55); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cmap__lake { fill: #020203; stroke: rgb(255 255 255 / 0.22); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cmap__border { fill: none; stroke: rgb(255 255 255 / 0.16); stroke-width: 1; stroke-dasharray: 3 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cmap__case { opacity: 0; transition: opacity 0.5s var(--ease); }
.cmap__case.is-active { opacity: 1; }
/* a find known only as an area: a dashed ring, drawn at its true size (it zooms with the chart) */
.cmap__area { fill: rgb(48 209 88 / 0.06); stroke: var(--ok); stroke-width: 1.25; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .cmap__case.is-found .cmap__area { animation: cmap-area 1.4s var(--spring) both; }
}
@keyframes cmap-area { from { opacity: 0; transform: scale(0.6); } }

/* Bezel scales along the top and left edges: ticks every 8px, longer every 40px. They slide with the chart
   (--sx/--sy from 28-cases.js), so a flight reads as movement under a fixed instrument. */
.cmap__scale { position: absolute; z-index: 3; pointer-events: none; }
.cmap__scale--x {
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(90deg, transparent 39px, rgb(255 255 255 / 0.34) 39px 40px, transparent 40px) var(--sx, 0) 0 / 40px 10px repeat-x,
    linear-gradient(90deg, transparent 7px, rgb(255 255 255 / 0.16) 7px 8px, transparent 8px) var(--sx, 0) 0 / 8px 5px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent);
}
.cmap__scale--y {
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  background:
    linear-gradient(transparent 39px, rgb(255 255 255 / 0.34) 39px 40px, transparent 40px) 0 var(--sy, 0) / 10px 40px repeat-y,
    linear-gradient(transparent 7px, rgb(255 255 255 / 0.16) 7px 8px, transparent 8px) 0 var(--sy, 0) / 5px 8px repeat-y;
  -webkit-mask-image: linear-gradient(transparent, #000 10% 90%, transparent);
  mask-image: linear-gradient(transparent, #000 10% 90%, transparent);
}
/* Crosshair through the fix: two hairlines across the chart with a gap around the pin */
.cmap__cross {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.6s var(--ease);
}
.cmap__cross.is-on { opacity: 1; }
.cmap__cross::before, .cmap__cross::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.13); }
.cmap__cross::before {
  left: -1600px;
  width: 3200px;
  top: 0;
  height: 1px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), #000 calc(50% + 22px));
  mask-image: linear-gradient(90deg, #000 calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), #000 calc(50% + 22px));
}
.cmap__cross::after {
  top: -1600px;
  height: 3200px;
  left: 0;
  width: 1px;
  -webkit-mask-image: linear-gradient(#000 calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), #000 calc(50% + 22px));
  mask-image: linear-gradient(#000 calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), #000 calc(50% + 22px));
}

/* HTML layer: pins and tags keep their size while the chart zooms (positioned by 28-cases.js) */
.cmap__layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cmap__layer { display: none; }
.js .cmap__layer { display: block; }
.cmap__pin, .cmap__tag { position: absolute; top: 0; left: 0; will-change: transform; }
.js .cmap__layer > * { visibility: hidden; }
.js .cmap__layer > .is-placed { visibility: visible; }
.cmap__pin[data-case], .cmap__tag[data-case] { opacity: 0; transition: opacity 0.45s var(--ease); }
.cmap__pin.is-active, .cmap__tag.is-active { opacity: 1; }
.cmap__tag--hq, .cmap__pin--hq { transition: opacity 0.45s var(--ease); }
.cmap.is-zoomed .cmap__tag--hq { opacity: 0; }

.cmap__pin--from { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--threat); box-shadow: 0 0 0 2px #000, 0 0 0 3px rgb(255 69 58 / 0.3); }
.cmap__pin--to { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1.5px var(--ok), 0 0 0 2px #000; }
.cmap__pin--to::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--ok); }
.cmap__pin--to::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ok); opacity: 0; }
.cmap__pin--hq { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.cmap__pin--hq::after { content: ""; position: absolute; inset: 0; background: var(--label); box-shadow: 0 0 0 2px #000; rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) {
  .cmap__pin--to.is-found::before { animation: cmap-found 1.8s var(--ease-out) 2; }
  .cmap__pin--from.is-ping::before { animation: cmap-found 1.6s var(--ease-out); }
}
.cmap__pin--from::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--threat); opacity: 0; }
@keyframes cmap-found { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

.cmap__tag {
  display: grid;
  gap: 2px;
  padding: 6px 9px 6px;
  border-radius: 10px;
  background: rgb(20 20 22 / 0.72);
  box-shadow: var(--highlight), var(--ring);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cmap__tag b { color: var(--label); font-weight: 500; }
.cmap__tag i { color: var(--label-2); font-style: normal; }

/* Fix readout: the selected case's position, top-left */
.cmap__fix {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--label-2);
}
.cmap__fix .mono { font-size: 0.6875rem; white-space: pre; }
/* the status dot pings twice when the fix changes, then rests (no endless loop) */
.cmap__fix .live-dot::after { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .cmap__fix.is-pinging .live-dot::after { animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) 2; }
}
.cmap__fix b { color: var(--label); font-weight: 500; }

/* Caption: the legend, and the honesty note about what the chart does not show */
.cmap__caption { display: grid; gap: 6px; padding: 12px 6px 4px; }
.cmap__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--label-2); font-size: 0.8125rem; font-weight: 500; }
.cmap__note { color: var(--label-3); font-size: 0.8125rem; font-weight: 500; }
@media (min-width: 1000px) {
  .cmap__caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    pointer-events: none;
  }
  .cmap__legend {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgb(20 20 22 / 0.7);
    box-shadow: var(--highlight), var(--ring);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
  .cmap__note { max-width: 24ch; text-align: right; text-shadow: 0 1px 8px #000; }
}
.cmap__legend > span { display: inline-flex; align-items: center; gap: 7px; }
.lg { display: inline-block; flex: none; }
.lg--from { width: 7px; height: 7px; border-radius: 50%; background: var(--threat); }
.lg--to { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ok); }
.lg--area { width: 12px; height: 12px; border: 1.25px dashed var(--ok); border-radius: 50%; }

/* ---------- The case file ---------- */

.console__panels { display: grid; }
/* Desktop: every case file shares one cell, so the console keeps its height when the case changes */
@media (min-width: 1000px) {
  .case { grid-area: 1 / 1; }
  .case[hidden] { display: flex !important; visibility: hidden; }
}
.case { display: flex; flex-direction: column; min-width: 0; padding-bottom: 6px; }
.case:focus-visible { outline-offset: -2px; border-radius: var(--radius-l); }
.case__media { position: relative; }
.case__photo { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-l); background: var(--raise-1); }
.case__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.case__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); pointer-events: none; }
.case__credit {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  box-shadow: var(--ring);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--label-2);
  font-size: 0.75rem;
  font-weight: 500;
}
.case__inset {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34%;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22), 0 0 0 3px rgb(0 0 0 / 0.5), 0 18px 30px -12px #000;
}
.case__inset img { width: 100%; height: 100%; object-fit: cover; }
.case__where { margin: 22px 12px 0; color: var(--label-3); font-size: 0.9375rem; font-weight: 600; }
.case__title { margin: 4px 12px 0; font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.01em; }
.case__story { margin: 10px 12px 0; color: var(--label-3); font-size: 1.0625rem; font-weight: 500; line-height: 1.45; letter-spacing: 0.005em; text-wrap: pretty; }
.case__story strong { color: var(--label); font-weight: inherit; }
.case__facts { display: flex; margin: auto 12px 0; padding-top: 22px; }
.case__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding-right: clamp(18px, 3vw, 28px); }
.case__facts > div + div { position: relative; padding-left: clamp(18px, 3vw, 28px); }
.case__facts > div + div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(transparent, rgb(255 255 255 / 0.16), transparent); }
.case__facts dt { color: var(--label-3); font-size: 0.875rem; font-weight: 500; }
.case__facts dd { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); white-space: nowrap; font-weight: 600; font-stretch: var(--wide); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .case.is-entering .case__photo { animation: case-photo 0.9s var(--ease-out) both; }
  .case.is-entering .case__inset { animation: case-inset 1s var(--spring) 0.15s both; }
  .case.is-entering > :not(.case__media) { animation: case-rise 0.8s var(--spring) both; animation-delay: calc(var(--n, 0) * 50ms + 80ms); }
}
@keyframes case-photo { from { opacity: 0; transform: scale(1.03); } }
@keyframes case-inset { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes case-rise { from { opacity: 0; transform: translateY(10px); } }

@media (min-width: 1000px) {
  .case__photo { aspect-ratio: 16 / 10; }
}

/* ---------- Track record: odometer readouts on tick scales, fading hairlines between them ---------- */

.stats { display: grid; margin-top: clamp(88px, 10vw, 136px); text-align: center; }
.stats li { position: relative; padding: 28px 16px; }
.stats li + li::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.14), transparent); }
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats li { padding: 8px 20px; }
  .stats li + li::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; background: linear-gradient(transparent, rgb(255 255 255 / 0.14), transparent); }
}
.stats strong {
  display: block;
  font-size: clamp(3rem, 1.9rem + 3.9vw, 4.75rem);
  font-weight: 600;
  font-stretch: var(--wide);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--label);
}
/* a short tuning scale under each figure: ticks every 6px, longer every 30px, a bright centre index */
.stats__tick {
  position: relative;
  display: block;
  width: 150px;
  height: 9px;
  margin: 22px auto 0;
  background:
    linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.16)) 50% 100% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 14.5px, rgb(255 255 255 / 0.26) 14.5px 15.5px, transparent 15.5px) 50% 100% / 30px 6px repeat-x,
    linear-gradient(90deg, transparent 2.5px, rgb(255 255 255 / 0.13) 2.5px 3.5px, transparent 3.5px) 50% 100% / 6px 3px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30% 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30% 70%, transparent);
}
.stats__tick::after { content: ""; position: absolute; left: calc(50% - 1px); bottom: 0; width: 2px; height: 9px; border-radius: 1px; background: rgb(255 255 255 / 0.8); }
.stats li > span:last-child { display: block; max-width: 22ch; margin: 16px auto 0; color: var(--label-3); font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.stats__note { margin-top: 32px; color: var(--label-3); font-size: 0.875rem; text-align: center; }

/* ---------- 10 · What it protects: photo bento (desktop), snap-scroller (phones) ---------- */

.protect__rail { position: relative; }
.protect__rail:focus-visible { outline-offset: -2px; border-radius: var(--radius-xl); }
.protect__grid { display: flex; gap: 12px; }

.pcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-xl);
  background: var(--raise-1);
  box-shadow: var(--shadow-contact);
}
.pcard__media { position: absolute; inset: 0; z-index: 0; transition: transform 1.2s var(--spring); }
/* one grade for every photo, whatever its source: cooler, quieter, a touch darker */
.pcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: saturate(0.68) contrast(1.05) brightness(0.86);
}
/* a soft vignette seats each photo in its card; an eased black scrim sits only under the label */
.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.03) 55%, rgb(0 0 0 / 0.11) 63%, rgb(0 0 0 / 0.24) 72%, rgb(0 0 0 / 0.39) 81%, rgb(0 0 0 / 0.55) 90%, rgb(0 0 0 / 0.68)),
    radial-gradient(130% 95% at 50% 42%, transparent 58%, rgb(0 0 0 / 0.38));
  pointer-events: none;
}

/* Lock-on reticle around the protected object, with the beacon's dot at its corner (placed by 29-protect.js) */
.pcard__lock {
  --c: rgb(255 255 255 / 0.82);
  --l: 13px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  width: var(--w, 0);
  height: var(--h, 0);
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.6));
  pointer-events: none;
}
.js .pcard__lock.is-placed { display: block; }
.pcard__dot { position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.55); }
.pcard__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--signal); opacity: 0; }
.pcard__tag {
  position: absolute;
  bottom: calc(100% + 9px);
  left: -3px;
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.8);
}
@media (prefers-reduced-motion: no-preference) {
  .pcard__lock { transition: opacity 0.5s var(--ease-out) 0.35s, scale 1.1s var(--spring-snappy) 0.35s; }
  .js .pcard:not(.is-locked) .pcard__lock { opacity: 0; scale: 1.22; }
  .pcard.is-locked .pcard__dot::after { animation: pcard-ping 1.6s var(--ease-out) 1.1s 2; }
}
@keyframes pcard-ping { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

/* light-catch edge, brightest at the top-left, as on every card */
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: var(--catch);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pcard__label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 1;
  color: var(--label);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pcard:hover .pcard__media { transform: scale(1.04); }
}

/* Phones and tablets: a horizontal snap-scroller that bleeds to the screen edges */
@media (max-width: 999.98px) {
  .protect__rail {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter-l) var(--gutter-r);
    scrollbar-width: none;
  }
  .protect__rail::-webkit-scrollbar { display: none; }
  .protect__grid { width: max-content; padding: 4px var(--gutter-r) 8px var(--gutter-l); }
  .pcard { flex: none; width: min(76vw, 340px); aspect-ratio: 4 / 5; scroll-snap-align: start; }
  /* cards clipped by the rail would never count as on screen, so the rail shows them all at once */
  .js .protect__rail .pcard[data-reveal] { opacity: 1; transform: none; }
}

/* Desktop: an asymmetric bento, one large card then three columns with a tall centre */
@media (min-width: 1000px) {
  .protect__rail { max-width: calc(var(--wrap) + 40px); margin-inline: auto; padding-inline: var(--gutter-l) var(--gutter-r); }
  .protect__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(4, clamp(180px, 15vw, 214px));
    gap: 16px;
  }
  .pcard--car { grid-column: 1 / 8; grid-row: 1 / 3; }
  .pcard--boat { grid-column: 8 / 13; grid-row: 1; }
  .pcard--outboard { grid-column: 8 / 13; grid-row: 2; }
  .pcard--tractor { grid-column: 1 / 5; grid-row: 3; }
  .pcard--atv { grid-column: 5 / 9; grid-row: 3 / 5; }
  .pcard--excavator { grid-column: 9 / 13; grid-row: 3; }
  .pcard--moto { grid-column: 1 / 5; grid-row: 4; }
  .pcard--trailer { grid-column: 9 / 13; grid-row: 4; }
  .pcard--car .pcard__label { left: 30px; bottom: 26px; font-size: 1.75rem; font-stretch: var(--wide); letter-spacing: -0.02em; }
}

.protect__foot { display: grid; justify-items: center; gap: 20px; margin-top: 28px; }
/* Scroll position on a tick ruler: the index slides along as the cards scroll (phones only) */
.protect__progress {
  position: relative;
  width: 168px;
  height: 9px;
  background:
    linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.16)) 50% 100% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 3.5px, rgb(255 255 255 / 0.22) 3.5px 4.5px, transparent 4.5px) 0 100% / 8px 5px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
}
.protect__progress i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 13px;
  border-radius: 1px;
  background: var(--label);
  box-shadow: 0 0 8px rgb(255 255 255 / 0.6);
  transform: translateX(calc(30px + var(--p, 0) * 106px));
}
@media (min-width: 1000px) { .protect__progress { display: none; } .protect__foot { margin-top: 40px; } }
.protect__more .link-arrow { text-decoration: none; }
.protect__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; color: var(--label-3); font-size: 1.0625rem; font-weight: 500; text-align: center; }

/* ---------- 11 · Trust: a real operation photo, two facts, three credentials ---------- */

.trust__top { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
@media (min-width: 1000px) {
  .trust__top { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}
.trust__intro .section__head { margin-bottom: 0; }

/* Facts in the stats style: big value, grey label, a hairline that fades at both ends */
.trust__facts { display: flex; margin: clamp(36px, 4vw, 52px) 0 0; }
.trust__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; flex: 1; padding-right: 24px; }
.trust__facts > div + div { position: relative; padding-left: 24px; }
.trust__facts > div + div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgb(255 255 255 / 0.16), transparent); }
.trust__facts dd { margin: 0; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); font-weight: 600; font-stretch: var(--wide); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.trust__facts dt { max-width: 22ch; color: var(--label-3); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }

.trust__photo { margin: 0; aspect-ratio: 4 / 3; }
.trust__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; filter: brightness(0.94); }
.trust__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  border-radius: 14px;
  color: var(--label);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}
@media (min-width: 560px) { .trust__caption { border-radius: 999px; } }
.trust__credit { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; min-height: 30px; margin: 0; padding: 0 12px; border-radius: 999px; color: var(--label-2); font-size: 0.75rem; font-weight: 500; }
@media (max-width: 559.98px) { .trust__hud-more { display: none; } }
/* live readout over the photo: the operation's state */
.trust__hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--label);
}
.trust__hud .mono { font-size: 0.6875rem; }
.trust__hud .live-dot::after { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .trust__photo.is-visible .trust__hud .live-dot::after { animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) 0.8s 2; }
}

/* Credentials: one card, three columns, each with a tick-ring seal */
.creds { display: grid; margin-top: clamp(40px, 5vw, 64px); padding: 8px clamp(22px, 3vw, 36px); }
.cred { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; align-content: start; padding: 26px 0; }
.cred + .cred::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.14) 20% 80%, transparent); }
.cred p { color: var(--label-3); font-size: 1.0625rem; font-weight: 500; line-height: 1.42; letter-spacing: 0.005em; text-wrap: pretty; }
.cred strong { color: var(--label); font-weight: inherit; }
@media (min-width: 900px) {
  .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 36px 0; }
  .cred { grid-template-columns: 1fr; gap: 22px; padding: 0 clamp(24px, 3vw, 40px); }
  .cred + .cred::before { top: 0; bottom: 0; right: auto; width: 1px; height: auto; background: linear-gradient(transparent, rgb(255 255 255 / 0.14) 20% 80%, transparent); }
}

/* Seal: a ring of 60 ticks (every fifth brighter) around a raised disc, like a bearing dial */
.seal { position: relative; display: grid; place-items: center; width: 60px; height: 60px; color: var(--label); }
.seal::before, .seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.seal::before {
  background:
    repeating-conic-gradient(from -0.8deg, rgb(255 255 255 / 0.75) 0 1.6deg, transparent 1.6deg 30deg),
    repeating-conic-gradient(from -0.7deg, rgb(255 255 255 / 0.28) 0 1.4deg, transparent 1.4deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
.seal::after {
  inset: 9px;
  background: var(--raise-1);
  box-shadow: var(--highlight), var(--ring-strong), 0 6px 14px -6px rgb(0 0 0 / 0.8);
}
.seal .icon { position: relative; z-index: 1; width: 20px; height: 20px; stroke-width: 1.6; }

/* ---------- 12 · FAQ: a quiet accordion on hairlines ---------- */

.faq-layout { display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .faq-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq-layout__head { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.faq-layout__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 22px; color: var(--label-3); font-size: 1.0625rem; font-weight: 500; }
.faq-layout__more .link-arrow { text-decoration: none; }

/* Hairlines that fade out at both ends, between every question */
.faq { position: relative; }
.faq__item { position: relative; }
.faq__item::after, .faq::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.14) 70%, transparent);
}
.faq::before { top: 0; }
.faq__item::after { bottom: 0; }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 24px 0;
  color: var(--label);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: 4px; border-radius: 8px; }
/* plus that turns into a minus: two hairline bars in a raised disc */
.faq__chev {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--raise-1);
  box-shadow: var(--highlight), var(--ring);
  color: var(--label-2);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.faq__chev::before, .faq__chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.55s var(--spring-snappy);
}
.faq__chev::after { transform: rotate(90deg); }
.faq__item[open] .faq__chev::before { transform: rotate(180deg); }
.faq__item[open] .faq__chev::after { transform: rotate(180deg); }
.faq__item summary:hover .faq__chev { background: var(--raise-2); color: var(--label); }
.faq__item[open] .faq__chev { background: var(--raise-2); color: var(--label); }
.faq__item summary > span { transition: color 0.25s var(--ease); }
.faq__item:not([open]) summary:not(:hover) > span { color: rgb(245 245 247 / 0.86); }
.faq__answer { padding: 0 56px 28px 0; }
.faq__answer p { max-width: 60ch; color: var(--label-2); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  /* Smooth height where the browser can animate to auto; elsewhere the answer simply fades in */
  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.5s var(--ease), content-visibility 0.5s allow-discrete;
    }
    .faq__item[open]::details-content { height: auto; }
  }
  .faq__item[open] .faq__answer { animation: faq-in 0.5s var(--ease-out) both; }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 13 · Contact: a bearing dial with the silver mark, then the request form ---------- */

.contact { position: relative; }
.contact__ruler { position: absolute; top: 0; left: 0; right: 0; }

/* The closing: a tick dial (every 2°, longer every 10°) whose needle sweeps and locks, the logo in silver */
@property --dial-sweep { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.closing { display: grid; justify-items: center; text-align: center; }
.dial {
  --to: 123deg;            /* where the needle locks: a bearing of 033° from the left horizon */
  --dial-sweep: var(--to);
  position: relative;
  width: min(640px, 92vw);
  aspect-ratio: 1000 / 620;
  margin-bottom: clamp(8px, 2vw, 24px);
}
.dial__face, .dial__lit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__minor, .dial__major, .dial__ring { fill: none; vector-effect: non-scaling-stroke; }
.dial__face .dial__minor { stroke: rgb(255 255 255 / 0.11); stroke-width: 1; }
.dial__face .dial__major { stroke: rgb(255 255 255 / 0.22); stroke-width: 1.4; }
.dial__face .dial__ring { stroke: rgb(255 255 255 / 0.07); stroke-width: 1; }
/* lit ticks between the left horizon and the needle: a conic mask that follows the sweep */
.dial__lit { position: absolute; inset: 0; -webkit-mask: conic-gradient(from 270deg at 50% 80.645%, #000 0deg var(--dial-sweep), transparent var(--dial-sweep)); mask: conic-gradient(from 270deg at 50% 80.645%, #000 0deg var(--dial-sweep), transparent var(--dial-sweep)); }
.dial__lit .dial__minor { stroke: rgb(255 255 255 / 0.4); stroke-width: 1; }
.dial__lit .dial__major { stroke: rgb(255 255 255 / 0.66); stroke-width: 1.4; }
/* the needle is a bearing line from the centre to a glowing tip on the tick ring */
.dial__needle {
  position: absolute;
  left: 50%;
  top: 80.645%;
  width: 49.4%;
  height: 0;
  transform-origin: 0 0;
  transform: rotate(calc(180deg + var(--dial-sweep)));
}
.dial__needle i { position: absolute; left: 38%; right: 0; top: -0.5px; height: 1px; background: linear-gradient(90deg, transparent, rgb(48 209 212 / 0.55) 70%, rgb(48 209 212 / 0.8)); }
.dial__needle i::after { content: ""; position: absolute; right: 0; top: -0.5px; width: 7%; height: 2px; border-radius: 1px; background: #fff; box-shadow: 0 0 6px rgb(255 255 255 / 0.55), 0 0 18px 2px rgb(255 255 255 / 0.18); }

.closing__logo { position: absolute; left: 50%; top: 21%; width: auto; height: 50%; translate: -50% 0; overflow: visible; filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.7)); }
.closing__logo .lm-body, .closing__logo .lm-chev { fill: url(#closing-silver); transform-box: fill-box; }
/* the flag keeps the brand's signal colour, as in the client's logo; the ping rises from it */
.closing__logo .lm-flag { fill: var(--signal); transform-box: fill-box; }
/* pivot and bearing readout under the mark, like the centre of a direction-finder's dial */
.dial__hub { position: absolute; left: 50%; top: 80.645%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.7); }
.dial__readout {
  position: absolute;
  left: 50%;
  top: calc(80.645% + 16px);
  translate: -50% 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  color: var(--label);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.dial__readout-k { margin-right: 0.6em; color: var(--label-3); }
.closing__logo .lm-ping { stroke-width: 9000; }

.dial__needle i::before { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--signal); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .dial.is-on .dial__needle i::before { animation: dial-lock 1.4s var(--ease-out) 2.75s 2; }
  .js .dial { --dial-sweep: 0deg; }
  .js .dial.is-on { --dial-sweep: var(--to); animation: dial-sweep 2.4s 0.35s backwards; }
  .js .dial:not(.is-on) .closing__logo { opacity: 0; }
  .closing__logo.logo-anim .lm-ping { animation-delay: 2.65s; }
}
@keyframes dial-lock { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
/* like a gauge at ignition: full sweep, then back to the bearing where it locks */
@keyframes dial-sweep {
  0% { --dial-sweep: 0deg; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  44% { --dial-sweep: 180deg; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  100% { --dial-sweep: var(--to); }
}

.closing__text { max-width: 820px; }
.closing__text .section__lead { margin-inline: auto; }

/* ---------- The form: dark fields with inner rings ---------- */

.form { width: 100%; max-width: 760px; margin: clamp(48px, 6vw, 72px) auto 0; padding: clamp(22px, 4vw, 40px); }
.form__fields { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 600px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field label { display: block; margin-bottom: 8px; color: var(--label-2); font-size: 0.9375rem; font-weight: 600; }
.field__optional { color: var(--label-3); font-weight: 400; }
.input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--radius-m);
  background: #050506;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 3px rgb(0 0 0 / 0.7);
  color: var(--label);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--label-3); opacity: 1; }
.input:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), inset 0 1px 3px rgb(0 0 0 / 0.7); }
.input:focus { outline: none; }
.input:focus-visible, .input:focus { background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 0 0 4px rgb(255 255 255 / 0.1); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--threat), 0 0 0 4px rgb(255 69 58 / 0.14); }
textarea.input { min-height: 128px; resize: vertical; }
.select { position: relative; }
.select .input { padding-right: 44px; cursor: pointer; }
.select select option { background: var(--raise-2); color: var(--label); }
.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 19px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.75px solid var(--label-2);
  border-bottom: 1.75px solid var(--label-2);
  transform: rotate(45deg);
  pointer-events: none;
}
.field__error, .form__error { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--threat); font-size: 0.875rem; font-weight: 500; }
.field__error .icon { width: 16px; height: 16px; stroke-width: 2; }
.form__error { margin-top: 0; justify-content: center; text-align: center; }
.form__privacy { color: var(--label-3); font-size: 0.8125rem; text-align: center; }
.form .btn--primary { margin-top: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__done { display: flex; flex-direction: column; align-items: center; padding: 32px 0; text-align: center; }
.form__done-icon { color: var(--ok); }
.form__done-icon .icon { width: 56px; height: 56px; stroke-width: 1.5; }
.form__done-title { margin-top: 16px; font-size: 1.75rem; font-weight: 600; font-stretch: var(--wide); letter-spacing: -0.02em; }
.form__done-title:focus { outline: none; }
.form__done-text { max-width: 34ch; margin: 8px 0 28px; color: var(--label-2); }
@media (prefers-reduced-motion: no-preference) {
  .form__done:not([hidden]) { animation: form-done 0.7s var(--spring) both; }
}
@keyframes form-done { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

.contact__mail { margin-top: 28px; color: var(--label-3); font-size: 1.0625rem; font-weight: 500; text-align: center; overflow-wrap: anywhere; }
.contact__mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--label); }

/* ---------- Footer: one quiet band. Brand and sections, a line about the company, credits in fine print ---------- */

.footer { position: relative; padding: 56px 0 32px; background: var(--bg-2); color: var(--label-3); font-size: 0.875rem; line-height: 1.45; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 20% 80%, transparent); }

.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 26px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--label-2); transition: color 0.2s var(--ease); }
.footer__nav a:hover { color: var(--label); }
@media (max-width: 559.98px) {
  .footer__nav ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 24px; }
}

.footer__mid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 40px;
  margin-top: 18px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--hair);
}
.footer__tagline { max-width: 56ch; text-wrap: pretty; }
.footer__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.footer__mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--label-2); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.25); text-underline-offset: 3px; overflow-wrap: anywhere; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.footer__mail a:hover { color: var(--label); text-decoration-color: currentColor; }

.footer__legal { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-top: 24px; }
.footer__fine { max-width: 112ch; font-size: 0.75rem; line-height: 1.55; }
.footer__fine p + p { margin-top: 4px; }
.footer__fine a { white-space: nowrap; color: var(--label-2); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.25); text-underline-offset: 2px; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.footer__fine a:hover { color: var(--label); text-decoration-color: currentColor; }

/* ---------- Scroll reveal ---------- */
/* Opacity on an ease-out, movement on a spring: the split is what makes it feel physical */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--ease-out), transform 1.2s var(--spring);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */

@media print {
  .nav, .hero__actions, .hero__stage, .form, .skip-link, .scene, .motion-toggle { display: none !important; }
  .dark { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}