/* Hallmark · pre-emit critique: P5 H4 E5 S4 R4 V5
 * Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: custom · enrichment: Tier-A CSS-3D animated scene (scroll-driven) + real footage section · nav: N5 · footer: Ft5
 */
@import url("tokens.css?v=8");

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
}

img, video, canvas { max-width: 100%; display: block; }
a { color: var(--color-ink); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  min-width: 0;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

/* ============================================================
   3D warehouse scene — pure CSS, scroll-driven via --p (0..1)
   ============================================================ */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 950px;
  perspective-origin: 50% 42%;
  background:
    linear-gradient(to bottom,
      var(--scene-sky) 0%,
      var(--color-paper) 34%,
      var(--scene-fog) 78%,
      var(--color-scrim) 100%);
  --p: 0;
}
.scene__world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--p) * 1500px));
  will-change: transform;
}

/* ---- pallet scan stations (built by app.js) ---- */
.station {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 300px;
  margin: -110px 0 0 -170px;
  transform: translate3d(calc(var(--sx) * 1px), 30px, calc(var(--sd) * -1px)) rotateY(calc(var(--sr) * 1deg));
  transition: opacity 200ms var(--ease-in);
}
.station.is-passed { opacity: 0; }
/* rack frame: two steel uprights + two shelf beams */
.station__frame {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--station-steel) 0 10px, transparent 10px calc(100% - 10px), var(--station-steel) calc(100% - 10px)),
    linear-gradient(0deg, var(--station-steel-2) 0 8px, transparent 8px),
    linear-gradient(0deg, transparent 0 148px, var(--station-steel-2) 148px 156px, transparent 156px);
}
.station__pallet {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 210px;
  height: 118px;
  transform: translateX(-50%);
  background:
    /* wood pallet feet */
    linear-gradient(90deg, var(--station-wood) 0 26px, transparent 26px calc(50% - 13px), var(--station-wood) calc(50% - 13px) calc(50% + 13px), transparent calc(50% + 13px) calc(100% - 26px), var(--station-wood) calc(100% - 26px)) 0 100% / 100% 14px no-repeat,
    /* crate */
    linear-gradient(var(--station-crate-1), var(--station-crate-2)) 0 0 / 100% calc(100% - 14px) no-repeat;
}
.station__pallet--top {
  bottom: 160px;
  height: 104px;
  opacity: 0.85;
}
/* barcode plate on the crate front */
.station__label {
  position: absolute;
  left: 50%;
  bottom: 46px;
  width: 96px;
  height: 50px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg, var(--label-ink) 0 2px, transparent 2px 5px, var(--label-ink) 5px 6px, transparent 6px 10px) 8px 8px / calc(100% - 16px) 24px no-repeat,
    var(--label-paper);
  border-radius: 2px;
  opacity: 0.55;
  transition: opacity var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
  overflow: hidden;
}
.station__label::after {
  /* digits row under the bars */
  content: attr(data-code);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--label-ink);
}
.station__label::before {
  /* scanline sweep */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  left: -20px;
  background: linear-gradient(90deg, transparent, var(--beam-1), transparent);
}
.station.is-scanning .station__label {
  opacity: 1;
  box-shadow: 0 0 18px var(--glow-soft), 0 0 2px var(--glow-accent);
}
.station.is-scanning .station__label::before {
  animation: label-sweep 700ms var(--ease-in-out) 1 forwards;
}
@keyframes label-sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(120px); }
}
/* holographic SKU tag */
.station__tag {
  position: absolute;
  left: 50%;
  bottom: 285px;
  transform: translateX(-50%) translateY(10px) scale(0.8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.375rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
  color: var(--color-ink);
  background: var(--hud-bg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.station__tag .ok { color: var(--color-accent); }
.station.is-scanning .station__tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* racks — long planes receding into depth, pattern painted with gradients */
.wall {
  position: absolute;
  top: 4svh;
  height: 74svh;
  width: 4600px;
  backface-visibility: hidden;
  background:
    /* amber pallets — sparse */
    repeating-linear-gradient(90deg,
      transparent 0 690px,
      var(--scene-pallet-amber) 690px 800px,
      transparent 800px 1440px),
    /* navy pallets */
    repeating-linear-gradient(90deg,
      var(--scene-pallet) 0 150px,
      transparent 150px 240px),
    /* shelf beams */
    repeating-linear-gradient(0deg,
      var(--scene-shelf-beam) 0 7px,
      transparent 7px 150px),
    /* uprights */
    repeating-linear-gradient(90deg,
      var(--scene-upright) 0 9px,
      transparent 9px 240px),
    linear-gradient(var(--scene-rack-1), var(--scene-rack-2));
  background-size: auto, 240px 300px, auto, auto, auto;
  -webkit-mask-image: linear-gradient(90deg, #fff 0 55%, transparent 96%);
  mask-image: linear-gradient(90deg, #fff 0 55%, transparent 96%);
}
.wall--l { left: 13vw; transform-origin: left center; transform: rotateY(88deg); }
.wall--r { right: 13vw; transform-origin: right center; transform: rotateY(-88deg); }

.floor {
  position: absolute;
  left: -30vw;
  right: -30vw;
  top: 78svh;
  height: 4600px;
  transform-origin: center top;
  transform: rotateX(90deg);
  background:
    /* flight guideline */
    linear-gradient(90deg, transparent calc(50% - 2px), var(--scene-guide) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
    repeating-linear-gradient(0deg, var(--scene-grid-1) 0 3px, transparent 3px 220px),
    repeating-linear-gradient(90deg, var(--scene-grid-2) 0 2px, transparent 2px 260px),
    linear-gradient(var(--scene-floor-1), var(--scene-floor-2));
  -webkit-mask-image: linear-gradient(#fff 0 45%, transparent 92%);
  mask-image: linear-gradient(#fff 0 45%, transparent 92%);
}

/* drone — CSS-built quadcopter, front view */
.drone {
  position: absolute;
  left: 50%;
  top: 44svh;
  width: 240px;
  height: 90px;
  transform: translateX(-50%) translateY(calc(var(--p) * -5svh));
  animation: drone-bob 4.2s var(--ease-in-out) infinite alternate;
  filter: drop-shadow(0 22px 24px var(--drone-shadow));
}
/* the `translate` property composes with `transform`, and animates on the compositor */
@keyframes drone-bob {
  from { translate: 0 0; }
  to   { translate: 0 -10px; }
}
.drone__arm {
  position: absolute;
  top: 38px;
  left: 50%;
  width: 220px;
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(var(--drone-arm-1), var(--drone-arm-2));
}
.drone__arm--l { transform: translateX(-50%) rotate(9deg); }
.drone__arm--r { transform: translateX(-50%) rotate(-9deg); }
.drone__body {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 104px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 17px;
  background: linear-gradient(var(--drone-shell-1), var(--drone-shell-2) 70%);
  border: var(--rule-hair) solid var(--drone-edge);
}
.drone__body::after {
  /* canopy highlight */
  content: "";
  position: absolute;
  left: 18px;
  top: 5px;
  width: 44px;
  height: 9px;
  border-radius: 5px;
  background: var(--drone-canopy);
}
/* props — motion-blur discs (no spin animation needed; the blur IS the spin) */
.drone__prop {
  position: absolute;
  width: 78px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--drone-prop-1), var(--drone-prop-2) 62%, transparent);
}
.drone__prop--1 { left: -8px;  top: 12px; }
.drone__prop--2 { right: -8px; top: 12px; }
.drone__prop--3 { left: 26px;  top: 52px; transform: scale(0.82); opacity: 0.8; }
.drone__prop--4 { right: 26px; top: 52px; transform: scale(0.82); opacity: 0.8; }
.drone__eye {
  position: absolute;
  left: 50%;
  top: 56px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 14px var(--glow-accent);
}
/* scan beam — aims at the active station */
.drone__beam {
  position: absolute;
  left: 50%;
  top: 60px;
  width: 38vw;
  height: 130px;
  transform-origin: left top;
  transform: rotate(24deg);
  clip-path: polygon(0 0, 100% 18%, 100% 82%, 0 4px);
  background: linear-gradient(90deg, var(--beam-1), var(--beam-2));
  opacity: 0;
  transition: opacity 250ms var(--ease-out), transform 350ms var(--ease-out);
}
.scene.beam-r .drone__beam { opacity: 0.55; transform: rotate(16deg); }
.scene.beam-l .drone__beam { opacity: 0.55; transform: rotate(164deg) scaleY(-1); }

/* 3D-map wireframe — phase 2 */
.scan-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--scan-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--scan-line) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #fff, transparent 78%);
  mask-image: radial-gradient(60% 55% at 50% 45%, #fff, transparent 78%);
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
.scene.phase-2 .scan-grid { opacity: 1; }

/* ERP sync HUD + data packets — phase 3 */
.hud {
  position: absolute;
  top: 16svh;
  right: 7vw;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  padding: 0.375rem 0.75rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--hud-bg);
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
.hud__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--glow-soft);
}
.hud__count {
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  padding-left: var(--space-xs);
  border-left: var(--rule-hair) solid var(--color-rule);
}
.scene.hud-on .hud { opacity: 1; }

/* one packet fires per scan — drone → HUD */
.packet {
  position: absolute;
  left: 50%;
  top: 46svh;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--glow-soft);
  opacity: 0;
}
.packet.fly { animation: packet 900ms var(--ease-in-out) 1; }
@keyframes packet {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(38vw, -28svh); }
}

/* ceiling light shafts */
.shaft {
  position: absolute;
  top: -4%;
  width: 200px;
  height: 62%;
  background: linear-gradient(to bottom, var(--shaft), transparent);
  transform: skewX(-7deg);
  filter: blur(7px);
  pointer-events: none;
}
.shaft--1 { left: 16%; }
.shaft--2 { left: 47%; height: 70%; }
.shaft--3 { left: 78%; }

/* dust */
.dust { position: absolute; inset: 0; pointer-events: none; }

/* raking light cones — near-invisible alphas; they read as air, not as a stage light */
.cone {
  position: absolute;
  top: 0;
  width: 560px;
  height: 1380px;
  pointer-events: none;
  filter: blur(40px);
  will-change: transform;
}
.cone--l {
  left: -6%;
  background: radial-gradient(68% 69% at 55% 31%, var(--spot-navy) 0, transparent 72%);
  transform: rotate(-42deg) translateY(-340px);
  animation: cone-drift-l 9s var(--ease-in-out) infinite alternate;
}
.cone--r {
  right: -6%;
  width: 260px;
  background: radial-gradient(68% 69% at 45% 31%, var(--spot-amber) 0, transparent 72%);
  transform: rotate(40deg) translateY(-340px);
  animation: cone-drift-r 11s var(--ease-in-out) infinite alternate;
}
@keyframes cone-drift-l {
  to { transform: rotate(-42deg) translateY(-340px) translateX(90px); }
}
@keyframes cone-drift-r {
  to { transform: rotate(40deg) translateY(-340px) translateX(-70px); }
}

/* film grain */
.scene__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 90% at 50% 42%, transparent 55%, var(--scene-vignette-1)),
    linear-gradient(to top, var(--scene-vignette-2), transparent 32%);
  pointer-events: none;
}

/* static fallback (mobile + reduced motion): mid-flight freeze-frame */
.scene.is-static .scene__world { transform: translateZ(500px); }
.scene.is-static .drone { transform: translateX(-50%); }

/* hero entrance — one orchestrated sequence on load: focus-pull, not a slide */
.hero__inner { will-change: transform, opacity, filter; }
.hero__inner > * {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(12px);
  animation: focus-in 1100ms var(--ease-out) forwards;
}
.hero__inner > .hero__note { animation-delay: 260ms; }
.hero__inner > h1 { animation-delay: 400ms; }
.hero__inner > .hero__scrollcue { animation-delay: 760ms; }
@keyframes focus-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* the headline is exempt — its lines carry their own entrance below */
.hero__inner > h1 { opacity: 1; transform: none; filter: none; animation: none; }

/* each headline line rises out of its own clipping box, racking into focus */
.hero h1 .line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;   /* room for descenders so the clip never shaves them */
  margin-block: -0.06em;
}
.hero h1 .line > span {
  display: block;
  transform: translateY(110%);
  filter: blur(10px);
  opacity: 0;
  animation: line-in 1050ms var(--ease-out) forwards;
  animation-delay: calc(420ms + var(--i) * 110ms);
}
@keyframes line-in {
  to { transform: translateY(0); filter: blur(0); opacity: 1; }
}

/* the scroll cue keeps a slow breathing arrow so the fold reads as continuable */
.hero__scrollcue span:last-child {
  display: inline-block;
  animation: cue-drift 2.4s var(--ease-in-out) 1.6s infinite;
}
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* beats arrive with the same focus-pull language as the hero */
.beat__inner {
  transition: transform var(--dur-long) var(--ease-out), filter var(--dur-long) var(--ease-out);
}

/* ---------- nav — N5 floating pill ---------- */
.nav-pill {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 0.5rem 0.625rem 0.5rem 1rem;
  background: color-mix(in oklch, var(--color-paper) 72%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  z-index: var(--z-sticky);
  white-space: nowrap;
}
.nav-pill__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.nav-pill__mark img {
  height: 15px;
  width: auto;
  opacity: 0.92;
}
.nav-pill__links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}
.nav-pill__links a {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav-pill__links a:hover { color: var(--color-ink); }
.lang {
  display: flex;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.lang button {
  background: none;
  border: none;
  color: var(--color-muted);
  font: inherit;
  padding: 0.125rem 0.375rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.lang button[aria-pressed="true"] { color: var(--color-accent); }
.nav-pill__cta {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.nav-pill__cta:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.nav-pill__cta:active { transform: translateY(1px); }

/* ---------- hero — marquee ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--page-gutter) var(--space-2xl);
  z-index: var(--z-base);
}
.hero__note {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-bottom: var(--space-md);
  max-width: 44ch;
}
.hero h1 {
  font-size: var(--text-display);
  max-width: 12ch;
}
.hero__scrollcue {
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ---------- story zone — animated beats ---------- */
.story { position: relative; z-index: var(--z-base); }
.story__spacer { height: 300svh; }
.beat {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--page-gutter) 14svh;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-raised);
}
.beat:nth-of-type(even) { justify-content: flex-end; text-align: right; }
.beat__inner {
  max-width: 34ch;
  padding: var(--space-lg);
  background: var(--scene-scrim);
  border-radius: var(--radius-sm);
}
.beat h2 { font-size: var(--text-display-s); margin-bottom: var(--space-sm); }
.beat p { color: var(--color-ink-2); }

/* ---------- solid content below story ---------- */
.solid {
  position: relative;
  z-index: var(--z-raised);
  background: var(--color-paper);
}
/* technical grid substrate — two scales, faded away from the content spine */
.solid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-coarse) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-coarse) 1px, transparent 1px),
    linear-gradient(to right,  var(--grid-fine) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-fine) 1px, transparent 1px);
  background-size: 224px 224px, 224px 224px, 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 78% 42% at 50% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 78% 42% at 50% 0%, #000 20%, transparent 72%);
}
.solid > * { position: relative; }

section { padding: var(--space-3xl) var(--page-gutter); }

.section-title {
  font-size: var(--text-2xl);
  max-width: 20ch;
  margin-bottom: var(--space-xl);
}

/* what — prose, left-biased with mono margin note */
.what {
  border-top: var(--rule-hair) solid var(--color-rule);
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  padding-top: var(--space-4xl);
}
.what__aside {
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.08em;
}
.what__body { max-width: 62ch; }
.what__body h2 { font-size: var(--text-xl); margin-bottom: var(--space-lg); }
.what__body p + p { margin-top: var(--space-lg); }
.what__body p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.65; }

/* differentiators — hairline rows, asymmetric */
.diff { padding-top: var(--space-2xl); }
.diff ol {
  list-style: none;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.diff li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3.5rem) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-lg);
  align-items: baseline;
  padding: var(--space-lg) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}
/* the hairline brightens locally under the pointer: the surface paints to
   padding-box, the amber hotspot to border-box, so it shows only in the rule */
.diff li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(transparent 0 0) padding-box,
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                    var(--row-glow), transparent 70%) border-box;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .diff li:hover { background: var(--color-paper-2); }
  .diff li:hover::after { opacity: 1; }
  .diff li:hover .diff__n { color: var(--color-accent); }
}
.diff__n { transition: color var(--dur-short) var(--ease-out); }
.diff__n {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.diff h3 { font-size: var(--text-md); font-weight: 600; }
.diff p { color: var(--color-ink-2); }

/* components — F4 step sequence */
.comp { background: var(--color-paper-2); padding-block: var(--space-4xl) var(--space-3xl); }
.steps { list-style: none; display: grid; gap: var(--space-2xl); max-width: 46rem; }
.steps li { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-xl); }
.steps .stage {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
}
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.steps p { color: var(--color-ink-2); max-width: 58ch; }

/* footage — the real drone flight, given an editorial frame */
.footage { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-4xl) var(--space-3xl); }
.footage__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}
/* the frame starts tilted back and rotates flat as it enters — product
   cinematography rather than a video sitting in a box. --t is 0..1 from JS. */
.footage__grid { perspective: 1400px; }
.footage__media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 24rem;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  --t: 1;
  transform-origin: 50% 100%;
  transform:
    rotateX(calc((1 - var(--t)) * 20deg))
    scale(calc(0.9 + var(--t) * 0.1))
    translateY(calc((1 - var(--t)) * 32px));
  box-shadow: 0 calc(var(--t) * 40px) calc(var(--t) * 60px) calc(var(--t) * -40px) var(--drone-shadow);
}
.footage__media video {
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: cover;
  background: var(--color-scrim);
  display: block;
}
/* registration corners — reads as a framing reticle, not a fake device */
.footage__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-accent);
  opacity: 0.65;
}
.footage__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.footage__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.footage__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.footage__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.footage__side { max-width: 34rem; }
.footage__lede {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  max-width: 46ch;
}
.footage__specs {
  display: grid;
  gap: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.footage__specs > div {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.footage__specs dt {
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footage__specs dd { color: var(--color-ink-2); }

/* contact */
.contact { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-4xl) var(--space-3xl); }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.contact address {
  font-style: normal;
  color: var(--color-ink-2);
  line-height: 1.7;
}
.contact address strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.contact__line {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-xl);
}
.contact__line a { color: var(--color-ink-2); text-underline-offset: 3px; }
.contact__line a:hover { color: var(--color-ink); }
.cta-chip {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.cta-chip:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.cta-chip:active { transform: translateY(1px); }

/* footer — Ft5 statement */
.foot-stmt {
  background: var(--color-paper-2);
  padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-2xl);
  position: relative;
  z-index: var(--z-raised);
}
.foot-stmt__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 24ch;
  overflow-wrap: anywhere;
  min-width: 0;
}
.foot-stmt__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.foot-stmt__meta img { height: 2.5rem; width: auto; opacity: 0.9; }
.foot-stmt__meta a { color: var(--color-muted); white-space: nowrap; }
.foot-stmt__meta a:hover { color: var(--color-ink); }

/* footer legal row */
.foot-stmt__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-2);
  font-size: var(--text-sm);
}
.foot-stmt__legal a,
.foot-stmt__prefs {
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.foot-stmt__legal a:hover,
.foot-stmt__prefs:hover { color: var(--color-ink); border-bottom-color: var(--color-rule); }
.foot-stmt__prefs {
  background: none;
  border-width: 0 0 1px 0;
  border-style: solid;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

/* ---------- cookie consent ---------- */
.cc {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  padding: var(--space-md) var(--page-gutter) max(var(--space-md), env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--color-paper-2) 92%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(110%);
  transition: transform 520ms var(--ease-out);
}
.cc[hidden] { display: none; }
.cc.is-up { transform: translateY(0); }
.cc__inner {
  max-width: 78rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
  align-items: center;
  justify-content: space-between;
}
.cc__text { max-width: 62ch; }
.cc__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}
.cc__text p { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.55; }
.cc__links { display: flex; gap: var(--space-md); margin-top: var(--space-xs); }
.cc__links a { color: var(--color-muted); font-size: var(--text-sm); text-underline-offset: 3px; }
.cc__links a:hover { color: var(--color-ink); }
.cc__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.cc__btn {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  padding: 0.625rem 1.25rem;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule);
  background: none;
  color: var(--color-ink-2);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.cc__btn:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.cc__btn:active { transform: translateY(1px); }
.cc__btn--primary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.cc__btn--primary:hover { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

@media (max-width: 40rem) {
  .cc__inner { gap: var(--space-md); }
  .cc__actions { width: 100%; }
  .cc__btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
}

/* ---------- reveal (one-shot) — same focus-pull language as the hero ----------
   Content is visible by default. Only once JS has confirmed it can observe and
   restore it does the page opt into hiding — so a failed observer, a blocked
   script, or an unsupported browser can never strand a section at opacity 0. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 800ms var(--ease-out),
              transform 800ms var(--ease-out),
              filter 800ms var(--ease-out);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
/* siblings inside one revealed block cascade rather than snapping together */
.js-anim .reveal.is-in + .reveal { transition-delay: 90ms; }
.js-anim .reveal.is-in + .reveal + .reveal { transition-delay: 180ms; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .what { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-top: var(--space-3xl); }
  .diff li { grid-template-columns: minmax(0, 3rem) minmax(0, 1fr); }
  .diff li p { grid-column: 2; }
  .footage__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .footage__media { justify-self: start; max-width: 20rem; }
  .footage__side { max-width: none; }
}

@media (max-width: 40rem) {
  .nav-pill { gap: var(--space-md); }
  .nav-pill__links { display: none; }

  /* story beats flow inline on phones — no scroll-linked animation below 40rem */
  .story__spacer { display: none; }
  .beat {
    position: static;
    opacity: 1;
    pointer-events: auto;
    min-height: 46svh;
    padding: var(--space-2xl) var(--page-gutter);
  }
  .beat:nth-of-type(even) { justify-content: flex-start; text-align: left; }

  .hero h1 { font-size: var(--text-display-s); }
  .cone { display: none; }                    /* the blur cost is not worth it on a phone */
  .footage__media { --t: 1 !important; }      /* never leave the frame tilted below 40rem */
  .drone { width: 170px; transform: translateX(-50%) scale(0.72); }
  .wall--l { left: 6vw; }
  .wall--r { right: 6vw; }
}

/* touch targets */
@media (pointer: coarse) {
  .nav-pill__cta, .lang button, .cta-chip { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .drone { animation: none; }
  .hero__scrollcue span:last-child { animation: none; }
  /* no focus-pull, no line lift — the hero simply is there */
  .hero__inner > *,
  .hero__inner > h1,
  .hero h1 .line > span {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
  .footage__media { transform: none; }
  .scene.phase-3 .packet { animation: none; opacity: 0; }
  .story__spacer { display: none; }
  .beat {
    position: static;
    opacity: 1;
    pointer-events: auto;
    min-height: auto;
    padding: var(--space-2xl) var(--page-gutter);
  }
  .beat:nth-of-type(even) { justify-content: flex-start; text-align: left; }
  .reveal { opacity: 1; transform: none; }
}