/* ==========================================================================
   JR SERVICES — Control-room design system
   1. Tokens        5. Header / nav      9.  Zones (showpiece)
   2. Reset/base    6. Hero             10.  Data / industries / why
   3. Utilities     7. Intro / signal   11.  About / contact / footer
   4. Components    8. Services         12.  Responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* surfaces */
  --bg:        #05080E;
  --bg-2:      #070B12;
  --panel:     #0A101A;
  --panel-2:   #0D1522;
  --panel-3:   #111B2A;

  /* lines */
  --line:      #17212F;
  --line-2:    #212E40;
  --line-3:    #2E3F56;

  /* text */
  --txt:       #E7EEF8;
  --txt-2:     #93A2B8;
  --txt-3:     #5D6C81;
  --txt-4:     #3B4759;

  /* signals */
  --blue:      #4D8BFF;
  --blue-2:    #86B2FF;
  --blue-deep: #17325F;
  --orange:    #FF8A3C;
  --orange-2:  #FFB27A;
  --orange-deep:#4A2A11;
  --green:     #2FC98A;

  --accent:    var(--blue);
  --accent-soft: rgba(77,139,255,.14);

  /* type */
  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* metrics */
  --wrap: 1320px;
  --gut: 32px;
  --r: 3px;
  --hdr-h: 68px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ------------------------------------------------------------ 2. RESET/BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:800; line-height:1.02; letter-spacing:-.03em; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
::selection{ background:rgba(77,139,255,.32); color:#fff; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#04070D; padding:10px 16px; font-family:var(--f-mono); font-weight:500; font-size:12px;
}
.skip:focus{ left:12px; top:12px; }

/* ------------------------------------------------------- background system */
.bg-system{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(120,150,190,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,190,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}
.bg-glow{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.5; }
.bg-glow--a{ width:820px; height:820px; top:-360px; right:-220px; background:radial-gradient(circle,rgba(31,74,150,.55),transparent 68%); }
.bg-glow--b{ width:700px; height:700px; top:44%; left:-300px; background:radial-gradient(circle,rgba(20,52,110,.4),transparent 70%); }
.bg-noise{
  position:absolute; inset:0; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 3. UTILITIES */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.mono{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
main{ position:relative; z-index:1; }

.sec{ position:relative; padding:120px 0; }
.sec::before{
  content:""; position:absolute; top:0; left:var(--gut); right:var(--gut);
  height:1px; background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}

.eyebrow{ color:var(--blue); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--blue); opacity:.6; }

.h2{ font-size:clamp(30px,4.2vw,54px); }
.h2--sm{ font-size:clamp(26px,3vw,38px); }
.lead{ color:var(--txt-2); font-size:clamp(15px,1.15vw,17px); line-height:1.65; max-width:62ch; }
.hl{ color:var(--txt); font-weight:600; }

.sechead{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end;
  margin-bottom:56px; padding-bottom:32px; border-bottom:1px solid var(--line);
}
.sechead__note{ color:var(--txt-3); font-size:14.5px; max-width:46ch; justify-self:end; }

/* corner ticks */
.corner{ position:absolute; width:9px; height:9px; border:1px solid var(--line-3); pointer-events:none; opacity:.85; }
.corner--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.corner--tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.corner--bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.corner--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal[data-d="1"]{ transition-delay:.09s } .reveal[data-d="2"]{ transition-delay:.18s }
.reveal[data-d="3"]{ transition-delay:.27s } .reveal[data-d="4"]{ transition-delay:.36s }
.reveal.in{ opacity:1; transform:none; }

/* ----------------------------------------------------------- 4. COMPONENTS */
.btn{
  --bg-btn:transparent; --bd:var(--line-2); --fg:var(--txt);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:0 22px; height:46px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  color:var(--fg); background:var(--bg-btn); border:1px solid var(--bd); border-radius:var(--r);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  overflow:hidden; white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0; transform:translateX(-101%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transition:transform .6s var(--ease);
}
.btn:hover::after{ transform:translateX(101%); }
.btn--primary{ --bg-btn:var(--blue); --bd:var(--blue); --fg:#04070E; font-weight:700; }
.btn--primary:hover{ --bg-btn:#5F99FF; box-shadow:0 0 0 1px rgba(77,139,255,.35), 0 12px 34px -12px rgba(77,139,255,.7); transform:translateY(-1px); }
.btn--ghost:hover{ --bd:var(--line-3); background:rgba(120,160,220,.06); color:#fff; transform:translateY(-1px); }
.btn--sm{ height:38px; padding:0 16px; font-size:11px; }
.btn--lg{ height:54px; padding:0 28px; font-size:12px; }
.btn--block{ display:flex; justify-content:center; width:100%; }
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateY(2px); }

.panel{
  position:relative; background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r);
}
.panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(120,160,220,.025);
}
.panel__title{ display:flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt); }
.panel__tools{ display:flex; align-items:center; gap:12px; color:var(--txt-3); }
.panel__split{ height:1px; background:var(--line); }
.panel__note{ padding:0 18px 18px; color:var(--txt-3); font-size:13.5px; line-height:1.6; }

.tag{
  display:inline-block; padding:3px 7px; border:1px solid var(--line-2); border-radius:2px;
  color:var(--txt-3); font-size:9.5px; letter-spacing:.14em;
}

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  border:1px solid currentColor; border-radius:2px; font-size:9.5px; letter-spacing:.12em; font-weight:500;
}
.chip::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.chip--ok{ color:var(--green); background:rgba(47,201,138,.07); }
.chip--warn{ color:var(--orange); background:rgba(255,138,60,.08); }
.chip--info{ color:var(--blue); background:rgba(77,139,255,.08); }
.chip--done{ color:var(--txt-3); background:rgba(140,160,190,.05); }

.pulse-dot{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; box-shadow:0 0 10px rgba(47,201,138,.9); }
.pulse-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--green); opacity:.6; animation:ping 2.4s var(--ease) infinite; }
.pulse-dot--sm{ width:6px; height:6px; }
@keyframes ping{ 0%{ transform:scale(.5); opacity:.8 } 70%,100%{ transform:scale(1.9); opacity:0 } }

.sw{ display:inline-block; width:8px; height:8px; border-radius:1px; flex:none; }
.sw--ok{ background:var(--green); box-shadow:0 0 8px rgba(47,201,138,.6); }
.sw--info{ background:var(--blue); box-shadow:0 0 8px rgba(77,139,255,.6); }
.sw--warn{ background:var(--orange); box-shadow:0 0 8px rgba(255,138,60,.6); }
.sw--done{ background:var(--txt-3); }

/* ------------------------------------------------------------- 5. HEADER */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--hdr-h);
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease);
}
.hdr.scrolled{ background:rgba(5,8,14,.78); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); }
.hdr__inner{ height:var(--hdr-h); display:flex; align-items:center; justify-content:space-between; gap:28px; }
.hdr__rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent); opacity:0; transition:opacity .3s var(--ease); }
.hdr.scrolled .hdr__rule{ opacity:1; }

/* ---- FMJR radar mark ----------------------------------------------------
   Her "Radar Disk" logo rebuilt as vector. Every proportion was measured off
   the original render and normalised to the disk diameter, so it is the same
   drawing at any size. The disk carries the wordmark inside it, which stops
   being readable below ~90px -- so the header shows the mark alone beside
   HTML type and the footer shows the full lockup.                          */
.logo{ display:block; overflow:visible; flex:none; }
.logo__ring,
.logo__tick{ fill:none; stroke:var(--blue); stroke-width:.9; }
.logo__grid{ fill:none; stroke:#26334A; stroke-width:.7; }
.logo__arm { fill:none; stroke:var(--blue); stroke-width:.7; }
.logo__dot { fill:var(--blue); }
.logo__wedge{ fill:url(#fmjrSweep); }
.logo__name{ fill:var(--txt); font-family:var(--f-display); font-weight:900; font-size:21.2px; }
.logo__rule{ fill:none; stroke:#6E7A8B; stroke-width:.6; }
.logo__sub { fill:var(--txt-3); font-family:var(--f-display); font-weight:600; font-size:5.87px; letter-spacing:.42em; }

/* rotate about the DISK centre. transform-box:fill-box would use the wedge's
   own bounding box and swing it around in a circle instead of spinning it. */
.logo__sweep{
  transform-box:view-box; transform-origin:60px 60px;
  animation:radarSweep 6s linear infinite;
}
@keyframes radarSweep{ to{ transform:rotate(360deg); } }

/* at 30px the hairlines vanish, so the small mark carries its own weights */
.logo--sm .logo__ring{ stroke-width:3.4; }
.logo--sm .logo__grid{ stroke-width:2.2; stroke:#2E3F56; }
.logo--sm .logo__arm { stroke-width:2.4; }

.brand .logo{ width:30px; height:30px; align-self:center; margin-right:11px; }
.brand--disk{ display:block; }
.ftr__brand .logo--full{ width:180px; height:180px; margin:-8px 0 4px -6px; }

.brand{ display:flex; align-items:baseline; font-family:var(--f-display); font-weight:900; font-size:16px; letter-spacing:.02em; }
.brand__mark{ color:var(--txt); }
.brand__slash{ color:var(--blue); margin:0 1px; }
.brand__word{ color:var(--txt); letter-spacing:.06em; font-weight:700; }

.nav{ display:flex; gap:30px; }
.nav a{
  position:relative; font-size:13.5px; color:var(--txt-2); font-weight:500;
  transition:color .25s var(--ease); padding:6px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--blue);
  transition:right .3s var(--ease);
}
.nav a:hover{ color:var(--txt); } .nav a:hover::after{ right:0; }

.hdr__right{ display:flex; align-items:center; gap:16px; }
.hdr__clock{ color:var(--txt-3); font-size:10.5px; }

.burger{ display:none; width:38px; height:38px; border:1px solid var(--line-2); border-radius:var(--r); position:relative; }
.burger span{ position:absolute; left:11px; width:16px; height:1.5px; background:var(--txt); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger span:nth-child(1){ top:16px } .burger span:nth-child(2){ top:21px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(2.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg) }

.mobnav{
  position:fixed; top:var(--hdr-h); left:0; right:0; z-index:99;
  background:rgba(5,8,14,.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:18px var(--gut) 28px; display:flex; flex-direction:column; gap:2px;
}
/* author `display` beats the UA [hidden] rule — restore it explicitly */
.mobnav[hidden]{ display:none; }
@media (min-width:961px){ .mobnav{ display:none; } }
.mobnav a:not(.btn){ padding:14px 0; border-bottom:1px solid var(--line); font-size:17px; font-family:var(--f-display); font-weight:600; }
.mobnav .btn{ margin-top:18px; }

/* --------------------------------------------------------------- 6. HERO */
.hero{ position:relative; padding-top:calc(var(--hdr-h) + 78px); padding-bottom:0; }
.hero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center; min-height:clamp(520px,70vh,740px); }

.oplabel{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  padding:7px 13px 7px 11px; border:1px solid var(--line-2); border-radius:100px;
  background:rgba(77,139,255,.05); color:var(--txt-2);
}
.hero__title{ font-size:clamp(40px,5.5vw,74px); font-weight:900; letter-spacing:-.042em; }
.hero__sub{ margin-top:26px; color:var(--txt-2); font-size:clamp(15px,1.2vw,17.5px); line-height:1.62; max-width:53ch; }
.hero__cta{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }

.hero__meta{ margin-top:52px; display:grid; grid-template-columns:repeat(3,auto); gap:0 40px; justify-content:start; padding-top:26px; border-top:1px solid var(--line); }
.hero__meta dt{ color:var(--txt-3); margin-bottom:7px; }
.hero__meta dd{ margin:0; font-size:14px; color:var(--txt); font-weight:500; }

/* live feed panel */
.panel--feed{ box-shadow:0 40px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(77,139,255,.05); }
.panel--feed::before{
  content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:radial-gradient(90% 60% at 80% 0%, rgba(77,139,255,.09), transparent 62%);
}
.feed{ position:relative; overflow:hidden; }
.feed__row{
  display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.feed__row:hover{ background:rgba(120,160,220,.035); }
.feed__row.flash{ background:rgba(77,139,255,.09); }
.feed__id{ color:var(--blue-2); font-size:11.5px; letter-spacing:.06em; }
.feed__route{ font-size:13.5px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed__route i{ color:var(--txt-4); font-style:normal; margin:0 5px; }
.feed__scan{
  position:absolute; left:0; right:0; height:64px; top:-64px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(77,139,255,.07),transparent);
  animation:scan 6s linear infinite;
}
@keyframes scan{ 0%{ transform:translateY(0) } 100%{ transform:translateY(340px) } }

/* position block */
.posblock{ padding:16px; }
.posblock__head{ display:flex; justify-content:space-between; align-items:center; color:var(--txt-3); margin-bottom:12px; }
.posblock__eta b{ color:var(--orange); }

.posmap{ position:relative; height:132px; border:1px solid var(--line); border-radius:2px; background:rgba(5,9,16,.55); overflow:hidden; }
.posmap__svg{ width:100%; height:100%; }
.posmap__grid path{ stroke:rgba(120,150,190,.09); stroke-width:1; fill:none; }
.posmap__ghost{ fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:3 5; }
.posmap__line{ fill:none; stroke-width:2; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520; animation:draw 4.5s var(--ease) forwards .5s, flow 9s linear infinite 5s; }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes flow{ 0%{ stroke-dasharray:8 6; stroke-dashoffset:0 } 100%{ stroke-dasharray:8 6; stroke-dashoffset:-140 } }
.posmap__nodes circle{ fill:var(--bg); stroke:var(--blue); stroke-width:1.5; }
/* position is driven from JS along the SVG path (see main.js) */
.posmap__truck{
  position:absolute; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,138,60,.18), 0 0 14px rgba(255,138,60,.9);
  transform:translate(250px,68px); will-change:transform;
}
.posmap__label{ position:absolute; color:var(--txt-3); font-size:9px; }
.posmap__label--a{ left:10px; bottom:8px; }
.posmap__label--b{ right:10px; top:8px; }

.posbar{ margin-top:14px; }
.posbar__track{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.posbar__fill{ height:100%; width:var(--p); background:linear-gradient(90deg,var(--blue-deep),var(--blue)); box-shadow:0 0 12px rgba(77,139,255,.6); animation:grow 2.2s var(--ease) forwards; transform-origin:left; }
@keyframes grow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.posbar__legend{ display:flex; justify-content:space-between; margin-top:9px; color:var(--txt-3); font-size:9.5px; }

/* ticker */
.ticker{ margin-top:88px; border-block:1px solid var(--line); background:rgba(10,16,26,.5); overflow:hidden; }
.ticker__track{ display:flex; align-items:center; gap:0; padding:11px 0; width:max-content; animation:marquee 46s linear infinite; }
.ticker__track span{ color:var(--txt-3); font-size:10px; white-space:nowrap; }
.ticker__track i{ display:inline-block; width:6px; height:6px; margin:0 34px; background:var(--line-3); transform:rotate(45deg); flex:none; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ------------------------------------------------------ 7. INTRO / SIGNAL */
.sec--intro{ padding-top:104px; }
.intro__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.intro__line{ margin-top:24px; font-family:var(--f-display); font-size:clamp(18px,1.8vw,24px); font-weight:600; color:var(--txt-3); letter-spacing:-.02em; }

.signal{ margin-top:44px; border:1px solid var(--line); border-radius:var(--r); background:rgba(10,16,26,.5); }
.signal__cap{ padding:12px 18px; border-bottom:1px solid var(--line); color:var(--txt-3); }
.signal__list li{
  display:grid; grid-template-columns:auto 108px 1fr; align-items:center; gap:14px;
  padding:13px 18px; border-bottom:1px solid var(--line);
}
.signal__list li:last-child{ border-bottom:0; }
.signal__list b{ font-size:10.5px; letter-spacing:.14em; color:var(--txt); }
.signal__list span:last-child{ color:var(--txt-3); font-size:13.5px; }

/* ----------------------------------------------------------- 8. SERVICES */
/* ---- the core service panel -------------------------------------------
   Track & Trace is the base everything else attaches to, so it gets a panel
   of its own above the module grid and shares its hairline border with it. */
.core{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-bottom:0; }
.core__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 26px; border-bottom:1px solid var(--line); color:var(--txt-3); font-size:9.5px;
}
.core__tag{ display:flex; align-items:center; gap:9px; color:var(--txt-2); }
.core__head i{ display:inline-block; width:3px; height:3px; margin:0 8px; background:var(--line-3);
               transform:rotate(45deg); vertical-align:middle; }
.core__body{ display:grid; grid-template-columns:1.2fr 1fr; gap:44px; padding:34px 26px 36px; }
.core__icon{ width:40px; height:40px; margin-bottom:22px; }
.core__title{ font-family:var(--f-display); font-size:26px; font-weight:800; letter-spacing:-.025em;
              margin-bottom:14px; }
.core__copy{ color:var(--txt-2); font-size:15px; line-height:1.65; max-width:54ch; }
.core__list{ display:grid; grid-template-columns:1fr 1fr; gap:11px 24px; align-content:start; }
.core__list li{ color:var(--txt-3); font-size:10px; letter-spacing:.09em; text-transform:none;
                line-height:1.5; padding-left:15px; position:relative; }
.core__list li::before{ content:""; position:absolute; left:0; top:6px; width:4px; height:4px;
                        background:var(--blue); transform:rotate(45deg); }

.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  position:relative; display:flex; flex-direction:column; background:var(--bg-2); padding:30px 26px 32px;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease); pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(77,139,255,.13), transparent 66%);
}
.card:hover{ background:var(--panel); }
.card:hover::before{ opacity:1; }
.card .corner{ opacity:0; transition:opacity .35s var(--ease); }
.card:hover .corner{ opacity:1; }

.card__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.card__idx{ color:var(--blue); font-size:11px; font-weight:700; }
.card__stat{ color:var(--txt-4); font-size:9px; }
.card__icon{ width:34px; height:34px; margin-bottom:24px; fill:none; stroke:var(--txt-3); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s var(--ease); }
.card__icon .ink{ stroke:var(--blue); }
.card__icon .dot{ fill:var(--blue); stroke:none; }
.card:hover .card__icon{ stroke:var(--txt-2); }
.card__title{ font-size:19px; font-weight:700; letter-spacing:-.02em; margin-bottom:12px; }
.card__copy{ color:var(--txt-2); font-size:14px; line-height:1.6; margin-bottom:26px; }
.card__list{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:9px; }
.card__list li{ color:var(--txt-3); font-size:9.5px; letter-spacing:.09em; padding-left:14px; position:relative; text-transform:none; line-height:1.5; }
.card__list li::before{ content:""; position:absolute; left:0; top:6px; width:4px; height:4px; background:var(--line-3); transform:rotate(45deg); }
.card--warn .card__idx{ color:var(--orange); }
.card--warn .card__icon .ink{ stroke:var(--orange); }
.card--warn .card__icon .dot{ fill:var(--orange); }
.card--warn::before{ background:radial-gradient(120% 80% at 50% 0%, rgba(255,138,60,.12), transparent 66%); }

/* =========================================================== 9. ZONES
   Cinematic scroll scene. The rig holds still at 50% of the viewport and the
   world is translated past it. Every moving layer is transform-only.

   World geometry (see main.js):
     · each zone is 1600 world-units wide, checkpoints at 0/1600/…/6400
     · --ws scales world units to CSS px (1 on desktop, ~0.52 on phones)
     · --ground is the road line, measured up from the bottom of the pin
   ------------------------------------------------------------------------ */
.zones{
  position:relative; z-index:2;
  --z-accent:var(--blue);
  --z-accent-rgb:77,139,255;
  --ws:1;          /* world unit -> css px */
  --tx:.56;        /* where the rig sits across the viewport */
  --ground:180px;
  --rigW:440px;
  --spd:0;
  border-block:1px solid var(--line);
  background:#04070C;
}
.zones[data-zone="3"]{ --z-accent:var(--orange); --z-accent-rgb:255,138,60; }
.zones[data-zone="4"]{ --z-accent:var(--green);  --z-accent-rgb:47,201,138; }

.zones__scroll{ height:760vh; }
.zones__stick{ position:sticky; top:0; height:100vh; min-height:600px; overflow:hidden; }

/* ---------------------------------------------------------- scene + camera */
.scene{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  transform-origin:50% 74%;
  will-change:transform;
}

/* sky ------------------------------------------------------------------- */
.sky{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,#060B14 0%,#0A1424 40%,#0D1C30 68%,#070C14 100%);
  transition:background 1.2s var(--ease);
}
.zones[data-zone="1"] .sky{ background:linear-gradient(180deg,#070C14 0%,#0C1526 40%,#14202E 68%,#080D15 100%); }
.zones[data-zone="3"] .sky{ background:linear-gradient(180deg,#08080E 0%,#140F0A 44%,#1C1409 70%,#08090F 100%); }
.zones[data-zone="4"] .sky{ background:linear-gradient(180deg,#050D14 0%,#08161F 42%,#0A1E2A 68%,#05090F 100%); }

.sky__aurora{
  position:absolute; left:0; right:0; bottom:var(--ground); height:46vh; z-index:1;
  background:radial-gradient(120% 100% at 50% 100%, rgba(var(--z-accent-rgb),.20), transparent 62%);
  transition:background 1.2s var(--ease);
}

/* parallax strips ------------------------------------------------------- */
.lyr{ position:absolute; will-change:transform; pointer-events:none; }

.lyr--far{
  left:-1000px; right:-1000px; bottom:var(--ground); height:calc(260px * var(--ws)); z-index:2;
  background:url("../img/parallax/far.svg") repeat-x;
  background-size:calc(1000px * var(--ws)) calc(260px * var(--ws));
  opacity:.7;
}
.lyr--mid{
  left:-900px; right:-900px; bottom:var(--ground); height:calc(360px * var(--ws)); z-index:3;
  background:url("../img/parallax/mid.svg") repeat-x;
  background-size:calc(900px * var(--ws)) calc(360px * var(--ws));
  opacity:.85;
}

/* road + lane markings -------------------------------------------------- */
.road{
  position:absolute; left:0; right:0; bottom:0; height:var(--ground); z-index:4;
  background:linear-gradient(180deg,#0B111A 0%,#080C13 55%,#04070C 100%);
}
.road::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--z-accent-rgb),.5) 20%,rgba(var(--z-accent-rgb),.5) 80%,transparent);
}
.lyr--dash{
  left:-400px; right:-400px; bottom:calc(var(--ground) * .44); height:5px; z-index:5;
  background:repeating-linear-gradient(90deg, rgba(150,180,220,.26) 0 calc(64px * var(--ws)), transparent calc(64px * var(--ws)) calc(150px * var(--ws)));
}

/* the five environments ------------------------------------------------- */
.lyr--env{
  left:0; bottom:calc(var(--ground) - 180px * var(--ws));
  width:calc(11200px * var(--ws)); height:calc(700px * var(--ws)); z-index:6;
  display:flex;
}
.env{
  position:relative; flex:none;
  width:calc(1600px * var(--ws)); height:100%;
  background-repeat:no-repeat;
  background-size:calc(1600px * var(--ws)) calc(700px * var(--ws));
}
.env[data-e="0"]{ background-image:url("../img/zones/z1-dispatch.svg"); }
.env[data-e="1"]{ background-image:url("../img/zones/z2-pickup.svg"); }
.env[data-e="2"]{ background-image:url("../img/zones/z3-transit.svg"); }
.env[data-e="3"]{ background-image:url("../img/zones/z4-exception.svg"); }
.env[data-e="4"]{ background-image:url("../img/zones/z5-delivery.svg"); }
/* run-in / run-out tiles keep the strip wider than any viewport */
.env--pad{ background-image:url("../img/zones/z0-approach.svg"); }

/* live lamps layered over the static art (SVG animation is inert in bg-image) */
.beacon{
  position:absolute; width:9px; height:9px; border-radius:50%; margin:-4.5px 0 0 -4.5px;
  left:calc(var(--x) * var(--ws)); top:calc(var(--y) * var(--ws));
}
.beacon--ok{   background:#7FE3B8; box-shadow:0 0 0 4px rgba(47,201,138,.16), 0 0 18px 4px rgba(47,201,138,.8);  animation:beaconSoft 3.1s var(--ease) infinite; }
.beacon--warm{ background:#FFD9A0; box-shadow:0 0 0 5px rgba(255,158,77,.16), 0 0 26px 8px rgba(255,158,77,.75); animation:beaconSoft 4.2s var(--ease) infinite; }
.beacon--done{ background:#9BF3CE; box-shadow:0 0 0 4px rgba(47,201,138,.18), 0 0 20px 5px rgba(47,201,138,.85); animation:beaconSoft 2.4s var(--ease) infinite; }
.beacon--haz{  background:#FFC48A; box-shadow:0 0 0 5px rgba(255,138,60,.22), 0 0 26px 7px rgba(255,138,60,.95); animation:beaconBlink 1.05s steps(1,end) infinite; }
.beacon[data-d="1"]{ animation-delay:.35s; }
.beacon[data-d="2"]{ animation-delay:.7s; }
@keyframes beaconSoft{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
@keyframes beaconBlink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:.08 } }

/* ------------------------------------------------------------------ THE RIG */
.rig{
  position:absolute; z-index:7;
  left:calc(var(--tx) * 100%); bottom:var(--ground);
  width:var(--rigW); margin-left:calc(var(--rigW) / -2);
  transform-origin:22% 100%;          /* pitch pivots about the drive axle */
  will-change:transform;
  --wd:0deg; --cabY:0px; --trlY:0px;  /* written once per frame from main.js */
}
/* one property write spins all five wheels; fill-box puts the pivot at the hub */
.rig .whl{ transform:rotate(var(--wd)); transform-box:fill-box; transform-origin:50% 50%; }
.rig .rig-cab{     transform:translateY(var(--cabY)); }
.rig .rig-trailer{ transform:translateY(var(--trlY)); }
.rig__svg{
  width:100%; height:auto; display:block;
  color:var(--z-accent);
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.85));
}

/* headlight cone thrown forward onto the road */
.rig__beam{
  position:absolute; left:100%; bottom:6%; z-index:-1;
  width:calc(var(--rigW) * .72); height:calc(var(--rigW) * .30);
  margin-left:calc(var(--rigW) * -.04);
  background:linear-gradient(90deg, rgba(var(--z-accent-rgb),.26), rgba(var(--z-accent-rgb),.05) 55%, transparent 80%);
  clip-path:polygon(0 34%, 100% 0%, 100% 100%, 0 66%);
  pointer-events:none;
}

/* truck ink -------------------------------------------------------------- */
.rig .body{    fill:rgba(7,12,20,.95);  stroke:var(--z-accent); stroke-width:2.6; stroke-linejoin:round; }
.rig .rib{     fill:none; stroke:rgba(var(--z-accent-rgb),.28); stroke-width:1.6; }
.rig .edge{    fill:none; stroke:rgba(var(--z-accent-rgb),.45); stroke-width:1.2; }
.rig .frame{   fill:#0A121C; stroke:var(--z-accent); stroke-width:2; stroke-linejoin:round; }
.rig .glass{   fill:url(#rigGlass); stroke:var(--z-accent); stroke-width:2; }
.rig .deflect{ fill:rgba(9,16,26,.92); stroke:var(--z-accent); stroke-width:2.2; stroke-linejoin:round; }
.rig .grille{  fill:rgba(var(--z-accent-rgb),.32); stroke:none; }
.rig .stack{   fill:#0C1620; stroke:var(--z-accent); stroke-width:1.8; }
.rig .chrome{  fill:#16232F; stroke:rgba(var(--z-accent-rgb),.8); stroke-width:2; stroke-linejoin:round; }
.rig .flap{    fill:#080E16; stroke:rgba(var(--z-accent-rgb),.4); stroke-width:1.2; }
.rig .lamp--head{ fill:#FFEFD2; }
.rig .lamp--rear{ fill:#FF5A3C; }
.rig .lamp--mark rect{ fill:rgba(255,196,138,.7); }
.rig .beaconDot{ fill:var(--z-accent); animation:rigBeacon 1.25s var(--ease) infinite; }
@keyframes rigBeacon{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }

.rig .tyre{  fill:#080D14; stroke:#33475E; stroke-width:3; }
.rig .rim{   fill:#101B27; stroke:rgba(var(--z-accent-rgb),.5); stroke-width:1.6; }
.rig .spoke{ fill:none; stroke:rgba(var(--z-accent-rgb),.5); stroke-width:1.8; }
.rig .hub{   fill:var(--z-accent); }

/* speed cues ------------------------------------------------------------- */
/* sits above the readout strip so the speed cue stays visible */
.rig__streaks{ position:absolute; right:98%; bottom:50%; width:58%; height:36%; pointer-events:none; }
.rig__streaks i{
  position:absolute; right:0; height:1.5px; border-radius:2px;
  background:linear-gradient(270deg, rgba(var(--z-accent-rgb),.85), transparent);
  opacity:calc(var(--spd) * var(--spd));
  transition:opacity .12s linear;
}
.rig__streaks i:nth-child(1){ top:12%; width:64%; animation:streak 620ms linear infinite; }
.rig__streaks i:nth-child(2){ top:34%; width:92%; animation:streak 480ms linear infinite .1s; }
.rig__streaks i:nth-child(3){ top:56%; width:52%; animation:streak 700ms linear infinite .2s; }
.rig__streaks i:nth-child(4){ top:74%; width:78%; animation:streak 540ms linear infinite .05s; }
.rig__streaks i:nth-child(5){ top:90%; width:44%; animation:streak 660ms linear infinite .3s; }
@keyframes streak{ from{ transform:translateX(14%) } to{ transform:translateX(-42%) } }

.rig__dust{ position:absolute; right:6%; left:6%; bottom:-6px; height:26px; pointer-events:none; }
.rig__dust i{
  position:absolute; bottom:0; width:5px; height:5px; border-radius:50%;
  background:rgba(150,180,215,.5);
  opacity:calc(var(--spd) * .55);
  transition:opacity .12s linear;
}
.rig__dust i:nth-child(1){ left:12%; animation:kick 700ms ease-out infinite; }
.rig__dust i:nth-child(2){ left:22%; animation:kick 820ms ease-out infinite .15s; }
.rig__dust i:nth-child(3){ left:66%; animation:kick 760ms ease-out infinite .3s; }
.rig__dust i:nth-child(4){ left:78%; animation:kick 900ms ease-out infinite .05s; }
@keyframes kick{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-34px,-16px) scale(.2); } }

/* ------------------------------------------------------------ TRACKING HUD */
.track{
  position:absolute; z-index:9;
  left:calc(var(--tx) * 100%); bottom:calc(var(--ground) - 14px);
  width:calc(var(--rigW) + 46px); height:calc(var(--rigW) * .46);
  margin-left:calc((var(--rigW) + 46px) / -2);
  pointer-events:none;
  transition:transform .5s var(--ease);
}
.zones.locked .track{ transform:scale(.97); }
.track__c{ position:absolute; width:16px; height:16px; border:1.5px solid var(--z-accent); opacity:.9; }
.track__c--tl{ top:0; left:0; border-right:0; border-bottom:0; }
.track__c--tr{ top:0; right:0; border-left:0; border-bottom:0; }
.track__c--bl{ bottom:0; left:0; border-right:0; border-top:0; }
.track__c--br{ bottom:0; right:0; border-left:0; border-top:0; }
.track__lead{
  position:absolute; left:50%; top:-16px; width:1px; height:16px;
  background:linear-gradient(0deg,var(--z-accent),rgba(var(--z-accent-rgb),.2));
}
.track__card i{ width:3px; height:3px; background:var(--line-3); transform:rotate(45deg); flex:none; }
.track__card{
  position:absolute; left:50%; bottom:calc(100% + 16px); transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; padding:7px 12px;
  background:rgba(6,11,19,.82); border:1px solid rgba(var(--z-accent-rgb),.32); border-radius:2px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--txt-3); font-size:9px; letter-spacing:.11em; white-space:nowrap;
}
.track__card b{ color:var(--txt); font-weight:500; font-variant-numeric:tabular-nums; }
.track__id{ color:var(--z-accent); font-weight:700; }

/* ------------------------------------------------------------------ scene fx */
.lyr--near{
  left:-400px; right:-400px; bottom:-34px; height:calc(300px * var(--ws)); z-index:8;
  background:url("../img/parallax/near.svg") repeat-x;
  background-size:calc(360px * var(--ws)) calc(300px * var(--ws));
  opacity:.9;
}
.scene__rain{
  position:absolute; inset:-10% -10% 0; z-index:10; opacity:0; pointer-events:none;
  background:repeating-linear-gradient(104deg, rgba(170,200,235,.16) 0 1px, transparent 1px 7px);
  transition:opacity .8s var(--ease);
  animation:rainFall .55s linear infinite;
}
.zones[data-zone="3"] .scene__rain{ opacity:.5; }
@keyframes rainFall{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-28px,110px,0) } }

.scene__flash{
  position:absolute; inset:0; z-index:11; pointer-events:none; opacity:0;
  background:radial-gradient(70% 55% at 62% 76%, rgba(255,138,60,.3), transparent 62%);
  transition:opacity .5s var(--ease);
}
.zones.alerting .scene__flash{ animation:alertPulse 1.9s var(--ease) infinite; }
@keyframes alertPulse{ 0%,100%{ opacity:0 } 50%{ opacity:1 } }

.scene__vig{
  position:absolute; inset:0; z-index:12; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,8,14,.96) 0%, rgba(5,8,14,.88) 24%, rgba(5,8,14,.42) 40%, transparent 56%),
    linear-gradient(180deg, rgba(5,8,14,.9) 0%, rgba(5,8,14,.25) 18%, transparent 34%),
    radial-gradient(130% 84% at 50% 52%, transparent 52%, rgba(4,7,12,.72) 100%);
}

/* static fallback (reduced motion): no pin, zones stack and read as a list */
.zones.static .zones__scroll{ height:auto; }
.zones.static .zones__stick{ position:relative; height:auto; min-height:0; }
.zones.static .scene{ display:none; }
.zones.static .zones__ui{ padding-block:88px; pointer-events:auto; }
.zones.static .zones__body{ display:block; padding-top:30px; }
.zones.static .zones__panels{ min-height:0; display:grid; }
.zones.static .zones__side,
.zones.static .rail,
.zones.static .zones__hint{ display:none; }
.zones.static .zone{
  position:relative; inset:auto; opacity:1; transform:none; max-width:none;
  padding:32px 0; border-top:1px solid var(--line);
}
.zones.static .zone__log li{ opacity:1; transform:none; }

/* ------------------------------------------------------------- UI overlay */
.zones__ui{
  position:relative; z-index:20; height:100%;
  display:flex; flex-direction:column;
  padding-top:calc(var(--hdr-h) + 18px); padding-bottom:18px;
  pointer-events:none;
}
.zones__ui a,.zones__ui button{ pointer-events:auto; }
.zones__head{ position:relative; }
.zones__head .eyebrow{ margin-bottom:14px; }
.zones__hint{ position:absolute; right:0; bottom:4px; color:var(--txt-3); display:flex; gap:8px; align-items:center; transition:opacity .5s var(--ease); }
.zones__hint span{ animation:bob 2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
.zones__hint.hide{ opacity:0; }

.zones__body{ flex:1; display:block; padding-top:26px; min-height:0; }
.zones__panels{ position:relative; height:100%; }

.zone{
  position:absolute; inset:0; opacity:0; transform:translateY(26px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events:none; max-width:520px;
}
.zone.on{ opacity:1; transform:none; }
.zone.out{ transform:translateY(-22px); }
.zone__meta{ display:flex; align-items:center; gap:12px; color:var(--z-accent); margin-bottom:16px; }
.zone__meta i{ width:22px; height:1px; background:currentColor; opacity:.5; }
.zone__title{ font-size:clamp(28px,3.1vw,40px); margin-bottom:14px; text-shadow:0 2px 24px rgba(4,7,12,.9); }
.zone__copy{ color:var(--txt-2); font-size:14.5px; line-height:1.6; max-width:46ch; text-shadow:0 1px 14px rgba(4,7,12,.9); }

.zone__log{ margin-top:20px; border-top:1px solid var(--line-2); padding-top:13px; display:grid; gap:2px; max-width:414px; }
.zone__log li{
  display:grid; grid-template-columns:50px 1fr; gap:12px; align-items:center;
  padding:6px 10px; border:1px solid transparent; border-radius:2px;
  background:rgba(6,10,17,.5);
  opacity:0; transform:translateX(-10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.zone__log li.on{ opacity:1; transform:none; }
.zone__log li.on:last-child{ background:rgba(var(--z-accent-rgb),.1); border-color:rgba(var(--z-accent-rgb),.26); }
.zone__log .t{ color:var(--txt-4); font-size:10px; }
.zone__log .m{ color:var(--txt-2); font-size:10.5px; letter-spacing:.08em; }
.zone--alert .zone__log li.on .m{ color:var(--orange-2); }
.zone--alert .zone__log li.ok.on .m{ color:var(--green); }
.zone__log li.ok.on:last-child{ background:rgba(47,201,138,.1); border-color:rgba(47,201,138,.28); }

/* --- readout + zone counter */
.zones__side{ display:grid; gap:9px; max-width:512px; margin-top:auto; padding-bottom:14px; }
.readout{ position:relative; background:rgba(8,13,21,.9); border:1px solid var(--line-2); border-radius:var(--r); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.readout__head{ display:flex; justify-content:space-between; align-items:center; padding:11px 13px; border-bottom:1px solid var(--line); color:var(--txt-3); font-size:9.5px; }
.readout__head span:first-child{ display:flex; align-items:center; gap:8px; color:var(--txt); }
.readout__id{ color:var(--blue-2); }
.readout__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.readout__grid > div{ padding:9px 13px; border-right:1px solid var(--line); }
.readout__grid > div:last-child{ border-right:0; }
.readout__grid dt{ color:var(--txt-4); font-size:9px; margin-bottom:5px; }
.readout__grid dd{ margin:0; color:var(--txt); font-size:10px; letter-spacing:.06em; transition:color .4s var(--ease); }
.readout__grid dd.hot{ color:var(--orange); }
.readout__grid dd.good{ color:var(--green); }
.readout__wave{ display:none; }
.readout__wave span{ flex:1; background:rgba(var(--z-accent-rgb),.5); height:20%; border-radius:1px; animation:wv 1.6s var(--ease) infinite; }
.readout__wave span:nth-child(2n){ animation-duration:2.1s } .readout__wave span:nth-child(3n){ animation-duration:1.3s }
.readout__wave span:nth-child(4n){ animation-duration:2.6s } .readout__wave span:nth-child(5n){ animation-delay:.4s }
@keyframes wv{ 0%,100%{ height:14% } 50%{ height:92% } }

.zdots{ display:flex; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:rgba(9,15,24,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.zdots li{
  flex:1; text-align:center; padding:8px 0; font-size:9px; color:var(--txt-4);
  border-right:1px solid var(--line); transition:color .4s var(--ease), background .4s var(--ease);
}
.zdots li:last-child{ border-right:0; }
.zdots li.on{ color:var(--z-accent); background:rgba(var(--z-accent-rgb),.12); }

/* --- telemetry rail */
.rail{ position:relative; height:62px; margin-top:auto; flex:none; padding-top:26px; }
.rail__line{ position:absolute; left:0; right:0; top:26px; height:1px; background:var(--line-2); }
.rail__fill{ position:absolute; left:0; top:0; height:1px; width:100%; background:var(--z-accent); box-shadow:0 0 14px rgba(var(--z-accent-rgb),.9); transform:scaleX(0); transform-origin:left; transition:background .6s var(--ease); }
.rail__line::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:3px;
  background:repeating-linear-gradient(90deg, rgba(120,150,190,.2) 0 1px, transparent 1px 22px);
}
.rail__cursor{
  position:absolute; top:26px; left:0; width:2px; height:11px; margin:-5px 0 0 -1px;
  background:var(--z-accent); box-shadow:0 0 12px rgba(var(--z-accent-rgb),.9);
  will-change:transform;
}
.rnode{ position:absolute; left:var(--x); top:26px; transform:translateX(-50%); text-align:center; }
.rnode__dot{
  display:block; width:10px; height:10px; margin:-4.5px auto 0; border-radius:50%;
  background:var(--bg); border:1px solid var(--line-3);
  transition:border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.rnode__lbl{ display:block; margin-top:12px; color:var(--txt-4); font-size:9px; white-space:nowrap; transition:color .45s var(--ease); }
.rnode.past .rnode__dot{ border-color:var(--z-accent); background:rgba(var(--z-accent-rgb),.35); }
.rnode.past .rnode__lbl{ color:var(--txt-3); }
.rnode.active .rnode__dot{ border-color:var(--z-accent); background:var(--z-accent); box-shadow:0 0 0 4px rgba(var(--z-accent-rgb),.16), 0 0 18px rgba(var(--z-accent-rgb),.9); transform:scale(1.2); }
.rnode.active .rnode__lbl{ color:var(--txt); }
/* ------------------------------------------------------------- 10. DATA */
.sec--data::before{ display:none; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ position:relative; background:var(--bg-2); padding:32px 26px 30px; overflow:hidden; }
.stat::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg,var(--blue),transparent); opacity:.35; }
.stat__k{ color:var(--txt-3); margin-bottom:18px; }
.stat__v{ font-family:var(--f-display); font-weight:800; font-size:clamp(38px,4.4vw,58px); letter-spacing:-.04em; line-height:1; color:var(--txt); font-variant-numeric:tabular-nums; }
.stat__n{ margin-top:14px; color:var(--txt-4); font-size:9.5px; letter-spacing:.09em; text-transform:none; }
.stat--warn .stat__v{ color:var(--orange); }
.stat--warn::after{ background:linear-gradient(90deg,var(--orange),transparent); }

/* ---- LOAD TIMELINE -------------------------------------------------------
   Six nodes on one rail: five milestones plus the exception, which is an
   orange diamond rather than a circle so it never reads as a normal step.
   Each <li> draws its own connector to the next one (::before = track,
   ::after = fill) instead of one absolutely-positioned rail guessing where
   the dots are — that is why the line can no longer overshoot the last dot,
   at any column count or padding.                                          */
.process{ margin-top:64px; border:1px solid var(--line); background:rgba(10,16,26,.4); border-radius:var(--r); position:relative; }

.process__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:11px 26px; border-bottom:1px solid var(--line); color:var(--txt-3); font-size:9.5px;
}
.process__title{ color:var(--txt-2); }
/* separators carry the spacing, so the gap stays at 0 and every divider in the
   strip sits at the same rhythm */
.process__lane{ display:flex; align-items:center; flex-wrap:wrap; column-gap:0; row-gap:6px; }
.process__head i{ display:inline-block; width:3px; height:3px; margin:0 8px; background:var(--line-3); transform:rotate(45deg); vertical-align:middle; }
.process__head .chip{ margin-left:14px; font-size:9px; }

.process__steps{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); padding:44px 26px 30px; }
.process__steps li{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }

/* connector: from this dot's centre to the next dot's centre */
.process__steps li::before,
.process__steps li::after{
  content:""; position:absolute; left:5.5px; right:-5.5px; top:5px; height:1px;
}
.process__steps li::before{ background:var(--line-2); }
.process__steps li::after{
  background:var(--blue); transform:scaleX(0); transform-origin:left center;
  transition:transform .42s var(--ease-io);
}
.process__steps li:last-child::before,
.process__steps li:last-child::after{ display:none; }
.process__steps li:nth-last-child(2)::after{ background:var(--green); }
.process.in .process__steps li::after{ transform:scaleX(1); }

/* the line arrives at each dot exactly when that dot lights */
.process.in li:nth-child(1)::after{ transition-delay:.28s }
.process.in li:nth-child(2)::after{ transition-delay:.70s }
.process.in li:nth-child(3)::after{ transition-delay:1.12s }
.process.in li:nth-child(4)::after{ transition-delay:1.54s }
.process.in li:nth-child(5)::after{ transition-delay:1.96s }

.process__dot{
  width:11px; height:11px; border-radius:50%; background:var(--bg); border:1px solid var(--line-3);
  position:relative; z-index:1; flex:none;
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.process.in li:nth-child(1) .process__dot{ transition-delay:.28s }
.process.in li:nth-child(2) .process__dot{ transition-delay:.70s }
.process.in li:nth-child(3) .process__dot{ transition-delay:1.12s }
.process.in li:nth-child(4) .process__dot{ transition-delay:1.54s }
.process.in li:nth-child(5) .process__dot{ transition-delay:1.96s }
.process.in li:nth-child(6) .process__dot{ transition-delay:2.38s }
.process.in .process__dot{ border-color:var(--blue); background:var(--blue); box-shadow:0 0 0 4px rgba(77,139,255,.14), 0 0 16px rgba(77,139,255,.7); }
.process.in li:last-child .process__dot{ border-color:var(--green); background:var(--green); box-shadow:0 0 0 4px rgba(47,201,138,.14), 0 0 16px rgba(47,201,138,.7); }

/* duration sits centred on the connector it belongs to */
.process__dur{
  position:absolute; left:5.5px; right:-5.5px; top:-17px; text-align:center;
  color:var(--txt-4); font-size:9px; letter-spacing:.12em;
}
.process__steps li:last-child .process__dur{ display:none; }

.process__i{ margin:20px 0 9px; color:var(--txt-4); font-size:9px; letter-spacing:.14em; }
.process__steps b{ font-family:var(--f-display); font-size:15px; font-weight:700; letter-spacing:-.01em; }
.process__t{ margin-top:7px; color:var(--txt-2); font-size:11px; font-variant-numeric:tabular-nums; }
.process__d{ margin-top:11px; padding-right:18px; color:var(--txt-3); font-size:12.5px; line-height:1.5; max-width:24ch; }

/* the exception — a diamond, not a milestone */
/* the wash has to reach zero before both column edges or it leaves a seam:
   centred at 40% with a 48% radius, transparent by 70% -> spans 6%..74% */
.process__steps li.is-exc{ background:radial-gradient(48% 72% at 40% 0%, rgba(255,138,60,.08), transparent 70%); }
/* the leg out of the exception stays orange until the load is on the dock */
.process__steps li.is-exc::after{ background:var(--orange); }
/* 9px square rotated 45° = 11px tall footprint, so the column below it still
   lines up with the circular nodes */
.process__steps li.is-exc .process__dot{ width:9px; height:9px; border-radius:1px; margin:1px 0 1px 1px; transform:rotate(45deg); }
.process.in li.is-exc .process__dot{ border-color:var(--orange); background:var(--orange); box-shadow:0 0 0 4px rgba(255,138,60,.14), 0 0 14px rgba(255,138,60,.7); }
.process__steps li.is-exc .process__i,
.process__steps li.is-exc b{ color:var(--orange); }

/* --------------------------------------------------------- INDUSTRIES */
.inds{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.ind{ position:relative; background:var(--bg-2); padding:34px 26px 38px; transition:background .4s var(--ease); }
.ind:hover{ background:var(--panel); }
.ind__num{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border:1px solid var(--line-2); border-radius:2px; color:var(--blue); font-size:11px; font-weight:700;
  margin-bottom:26px; transition:border-color .4s var(--ease), background .4s var(--ease);
}
.ind:hover .ind__num{ border-color:var(--blue); background:var(--accent-soft); }
.ind h3{ font-size:17px; font-weight:700; margin-bottom:12px; letter-spacing:-.015em; }
.ind p{ color:var(--txt-3); font-size:13.5px; line-height:1.6; }

/* --------------------------------------------------------------- WHY */
.why__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:start; }
.why__list{ margin-top:44px; display:grid; gap:2px; }
.why__list li{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line); }
.why__list li:last-child{ border-bottom:1px solid var(--line); }
.why__n{ color:var(--blue); font-size:11px; font-weight:700; padding-top:3px; }
.why__list h3{ font-size:17.5px; font-weight:700; margin-bottom:8px; letter-spacing:-.015em; }
.why__list p{ color:var(--txt-3); font-size:14px; line-height:1.6; max-width:46ch; }

.panel--load{ position:sticky; top:calc(var(--hdr-h) + 32px); }
.loadbars{ padding:26px 18px 24px; display:grid; gap:26px; }
.loadbar__top{ display:flex; justify-content:space-between; color:var(--txt-3); margin-bottom:11px; font-size:9.5px; }
.loadbar__track{ height:12px; background:var(--panel-3); border:1px solid var(--line); border-radius:2px; overflow:hidden; }
/* the fill used to start at --blue-deep, which is nearly black: at 34% width the
   bar spent its opening in shadow and the whole comparison went unread */
.loadbar__fill{
  height:100%; width:var(--w); transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--blue-2)); box-shadow:0 0 16px rgba(77,139,255,.5);
  transition:transform 1.4s var(--ease);
}
.delta{ display:flex; align-items:baseline; gap:13px; }
.delta__v{ font-family:var(--f-display); font-weight:800; font-size:27px; letter-spacing:-.035em;
           color:var(--blue); line-height:1; flex:none; }
.delta__l{ color:var(--txt-3); font-size:12.5px; line-height:1.45; }

/* ---- 24h coverage band ---- */
.cover{ padding:20px 18px 22px; }
.cover__head{ display:flex; justify-content:space-between; color:var(--txt-3); font-size:9.5px; margin-bottom:15px; }
.cover__row{ display:grid; grid-template-columns:74px 1fr; align-items:center; margin-bottom:9px; }
.cover__row--scale{ margin-bottom:5px; }
.cover__scale{ display:flex; justify-content:space-between; color:var(--txt-4); font-size:9px; }
.cover__lbl{ color:var(--txt-4); font-size:9px; }
.cover__track{ position:relative; height:11px; background:var(--panel-3); border:1px solid var(--line);
               border-radius:2px; overflow:hidden; }
.cover__seg{ position:absolute; top:0; bottom:0; left:var(--a); width:var(--b);
             transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease); }
.cover__seg--own{ background:var(--line-3); }
.cover__seg--us{ background:linear-gradient(90deg,var(--blue),var(--blue-2)); box-shadow:0 0 14px rgba(77,139,255,.45); }
.reveal.in .cover__seg{ transform:scaleX(1); }
.reveal.in .cover__seg--own{ transition-delay:1s; }
.reveal.in .cover__seg--us{ transition-delay:1.25s; }
.cover__note{ margin-top:14px; color:var(--txt-3); font-size:12.5px; line-height:1.55; }
.loadbar__fill--muted{ background:repeating-linear-gradient(45deg,var(--line-2) 0 5px,var(--panel-3) 5px 10px); box-shadow:none; }
.reveal.in .loadbar__fill{ transform:scaleX(1); }
.reveal.in .loadbar:nth-child(2) .loadbar__fill{ transition-delay:.5s; }

.minigrid > div{ display:flex; justify-content:space-between; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); }
.minigrid > div:last-child{ border-bottom:0; }
.minigrid dt{ color:var(--txt-4); font-size:9.5px; }
.minigrid dd{ margin:0; color:var(--txt-2); font-size:10px; letter-spacing:.06em; text-align:right; text-transform:none; }

/* ------------------------------------------------------------- ABOUT */
.gallery{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.slot{ position:relative; margin:0; background:var(--bg-2); overflow:hidden; }
/* Each drawing's aspect ratio matches its column's share (1.4 : 1 : 1), so the
   three render at identical height with nothing cropped, at any viewport width. */
.slot__art{
  position:relative; aspect-ratio:1/1;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.slot--a .slot__art{ aspect-ratio:1.4/1; }
.slot:hover .slot__art{ transform:scale(1.04); filter:saturate(1.05) brightness(1.08); }
/* vignette + fine scanline texture; kept light so the art still reads */
.slot__art::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(5,8,14,.06) 0%, rgba(5,8,14,0) 38%, rgba(5,8,14,.56) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 54%, rgba(5,8,14,.34) 100%);
}
/* Placeholder scenes. To use a real photo, point this at your file:
   .slot__art[data-art="terminal"]{ background-image:url("../img/your-photo.jpg"); } */
.slot__art[data-art="terminal"]{ background-color:#070C14; background-image:url("../img/about/wide-terminal.svg"); }
.slot__art[data-art="dock"]{     background-color:#070C14; background-image:url("../img/about/mid-dock.svg"); }
.slot__art[data-art="scanner"]{  background-color:#05080E; background-image:url("../img/about/detail-scanner.svg"); }

.slot figcaption{
  position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between;
  padding:12px 14px; color:var(--txt-3); font-size:9px; background:linear-gradient(0deg,rgba(4,7,12,.9),transparent);
}

.about__facts{ margin-top:1px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-top:0; }
.fact{ background:var(--bg-2); padding:28px 26px; }
.fact span{ color:var(--blue); display:block; margin-bottom:14px; }
.fact p{ color:var(--txt-3); font-size:13.5px; line-height:1.6; }


/* ----------------------------------------------------------- CONTACT */
.sec--contact{ padding-bottom:130px; }
.cta{
  position:relative; border:1px solid var(--line-2); border-radius:var(--r);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(77,139,255,.11), transparent 58%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:0 50px 110px -60px rgba(0,0,0,1);
}
.cta__bar{ display:flex; justify-content:space-between; align-items:center; padding:13px 22px; border-bottom:1px solid var(--line); color:var(--txt-3); font-size:9.5px; }
.cta__bar span:first-child{ display:flex; align-items:center; gap:9px; color:var(--txt); }
.cta__bar-right{ color:var(--blue); }
.cta__body{ display:grid; grid-template-columns:1.25fr .75fr; }
.cta__left{ padding:56px 48px 56px 44px; }
.cta__left .lead{ margin-top:22px; }
.cta__btns{ margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; }
.cta__right{ border-left:1px solid var(--line); display:flex; flex-direction:column; }

.contactlist{ flex:1; }
.contactlist > div{ padding:22px 26px; border-bottom:1px solid var(--line); }
.contactlist dt{ color:var(--txt-4); font-size:9.5px; margin-bottom:8px; }
.contactlist dd{ margin:0; color:var(--txt); font-size:13px; letter-spacing:.04em; text-transform:none; }
.contactlist a{ transition:color .25s var(--ease); border-bottom:1px solid transparent; }
.contactlist a:hover{ color:var(--blue); border-bottom-color:var(--blue); }

.statusbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 26px; color:var(--txt-3); font-size:9px; }
.statusbar span{ display:flex; align-items:center; gap:7px; }

/* ------------------------------------------------------------ FOOTER */
.ftr{ position:relative; z-index:1; border-top:1px solid var(--line); padding-top:70px; background:linear-gradient(180deg,transparent,rgba(8,12,20,.7)); }
.ftr__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:48px; padding-bottom:56px; }
.ftr__tag{ margin-top:22px; color:var(--txt-3); font-family:var(--f-display); font-size:16px; font-weight:600; line-height:1.35; letter-spacing:-.015em; }
.ftr__col{ display:flex; flex-direction:column; gap:13px; }
.ftr__col p{ color:var(--txt-4); margin-bottom:5px; }
.ftr__col a{ color:var(--txt-3); font-size:13.5px; transition:color .25s var(--ease); width:fit-content; }
.ftr__col a:hover{ color:var(--txt); }
.ftr__bottom{ display:flex; justify-content:space-between; gap:20px; padding-block:22px; border-top:1px solid var(--line); color:var(--txt-4); font-size:9.5px; }
.ftr__micro{ color:var(--txt-4); }

/* ====================================================== 12. RESPONSIVE */
@media (max-width:1180px){
  .zones__body{ grid-template-columns:1fr 280px; gap:32px; }
  .zdots{ display:none; }
  .cards, .inds, .stats{ grid-template-columns:repeat(2,1fr); }
  .core__body{ grid-template-columns:1fr; gap:28px; }
  .card__copy{ min-height:0; }

  /* ---- LOAD TIMELINE: the rail turns vertical ----
     Six columns would fall to ~186px here. Rather than a broken middle state
     (or a 3x2 grid the connectors cannot cross), the whole thing rotates:
     dots in a left gutter, connectors running down between them. Same six
     nodes, same stagger, same story. */
  .process__steps{ display:block; padding:26px 26px 6px; }
  .process__steps li{
    display:grid; grid-template-columns:auto 1fr auto; column-gap:18px;
    align-items:start; padding-bottom:26px;
  }
  .process__steps li:last-child{ padding-bottom:20px; }

  /* dot centre sits 8.5px down and 5.5px in, so the connector runs exactly
     centre-to-centre just as it does horizontally */
  .process__steps li::before,
  .process__steps li::after{ left:5px; right:auto; top:8.5px; bottom:-8.5px; width:1px; height:auto; }
  .process__steps li::after{ transform:scaleY(0); transform-origin:top center; }
  .process.in .process__steps li::after{ transform:scaleY(1); }

  .process__dot{ grid-column:1; grid-row:1/4; margin-top:3px; }
  .process__steps li.is-exc .process__dot{ margin:4px 0 0 1px; }

  .process__i{ display:none; }
  .process__steps b{ grid-column:2/4; grid-row:1; font-size:14.5px; }
  .process__t{ grid-column:2; grid-row:2; margin-top:4px; }
  .process__d{ grid-column:2/4; grid-row:3; margin-top:6px; padding-right:0; max-width:56ch; }

  /* duration leaves the rail and sits at the end of the time row */
  .process__dur{
    position:static; grid-column:3; grid-row:2; margin-top:5px;
    justify-self:end; text-align:right;
  }
}

@media (max-width:960px){
  :root{ --gut:22px; }
  .nav, .hdr__clock{ display:none; }
  .burger{ display:block; }
  .sec{ padding:88px 0; }
  .sechead{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .sechead__note{ justify-self:start; }

  .hero{ padding-top:calc(var(--hdr-h) + 52px); }
  .hero__grid{ grid-template-columns:1fr; gap:52px; min-height:0; }
  .hero__meta{ grid-template-columns:1fr; gap:20px; }
  .hero__meta div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:1px solid var(--line); padding-bottom:14px; }
  .hero__meta dt{ margin-bottom:0; }
  .ticker{ margin-top:64px; }

  .intro__grid, .why__grid{ grid-template-columns:1fr; gap:38px; }
  /* static would drop the corner brackets onto a distant positioned ancestor;
     relative unsticks it while keeping it their containing block */
  .panel--load{ position:relative; top:auto; }
  .cta__body{ grid-template-columns:1fr; }
  .cta__left{ padding:40px 26px; }
  .cta__right{ border-left:0; border-top:1px solid var(--line); }
  .ftr__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .ftr__bottom{ flex-direction:column; gap:8px; }
  .process__head{ padding:11px 20px; row-gap:8px; }
  .process__steps{ padding:24px 20px 6px; }
  .process__steps li{ column-gap:15px; }

  /* ---- ZONES: pin kept, scene simplified ---- */
  .zones{ --ws:.40; --tx:.34; --ground:104px; --rigW:186px; }
  .zones__scroll{ height:430vh; }
  .zones__stick{ height:100svh; min-height:520px; }
  .lyr--far, .lyr--near, .rig__streaks, .rig__dust{ display:none; }
  /* pill keeps only ID + speed so it never runs off a phone screen */
  .track__card{ font-size:8px; padding:5px 8px; gap:6px; bottom:calc(100% + 2px); }
  .track__card > :nth-child(n+4){ display:none; }
  .lyr--mid{ opacity:.5; }

  .zones__ui{ padding-top:calc(var(--hdr-h) + 12px); padding-bottom:12px; }
  .zones__hint{ position:static; margin-top:12px; }
  .zones__body{ grid-template-columns:1fr; padding-top:18px; }
  .zones__side{ display:none; }
  .zones__panels{ min-height:270px; }

  .zone{ max-width:none; }
  .zone__title{ font-size:clamp(24px,6.4vw,32px); }
  .zone__copy{ font-size:13.5px; max-width:none; }
  .zone__log{ max-width:none; margin-top:16px; padding-top:11px; }
  .zone__log li{ padding:5px 9px; }

  .track{ bottom:calc(var(--ground) - 10px); width:calc(var(--rigW) + 30px); margin-left:calc((var(--rigW) + 30px) / -2); }
  .track__c{ width:12px; height:12px; }

  .scene__vig{
    background:
      linear-gradient(180deg, rgba(5,8,14,.95) 0%, rgba(5,8,14,.82) 34%, rgba(5,8,14,.2) 56%, transparent 68%),
      radial-gradient(130% 80% at 50% 60%, transparent 48%, rgba(4,7,12,.72) 100%);
  }
  .rail{ height:54px; padding-top:22px; }
  .rail__line, .rail__cursor, .rnode{ top:22px; }
  .rnode__lbl{ font-size:8px; }
  .rnode:nth-child(2) .rnode__lbl, .rnode:nth-child(4) .rnode__lbl{ opacity:0; }
}

@media (max-width:760px){
  .gallery{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .cards, .inds, .stats, .about__facts{ grid-template-columns:1fr; }
  /* three stacked nav columns made the footer 1193px tall on a phone */
  .ftr__grid{ grid-template-columns:1fr 1fr; gap:30px 24px; }
  .ftr__brand{ grid-column:1/-1; }
  .feed__row{ grid-template-columns:1fr auto; row-gap:6px; }
  .feed__id{ grid-column:1; } .feed__route{ grid-column:1; grid-row:2; } .feed__row .chip{ grid-column:2; grid-row:1/3; align-self:center; }
  .signal__list li{ grid-template-columns:auto 1fr; row-gap:4px; }
  .signal__list span:last-child{ grid-column:1/-1; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  .cta__btns .btn{ width:100%; justify-content:center; }
  /* the clamp floors at 40px, which stops scaling below 727px and breaks the
     headline mid-phrase on a 360px screen. Scale it on phones instead. */
  .hero__title{ font-size:clamp(29px,8.4vw,40px); }
  .stat{ padding:26px 22px; }
  /* stacked cards each carried desktop-sized padding; four of them made the
     services section the tallest thing on the page */
  .card{ padding:24px 22px 26px; }
  .core__head{ padding:11px 22px; }
  .core__body{ padding:26px 22px 28px; gap:22px; }
  .core__title{ font-size:22px; }
  .core__copy{ font-size:14px; }
  .core__list{ grid-template-columns:1fr; gap:9px; }
  .card__copy{ margin-bottom:20px; }
  .card__icon{ margin-bottom:18px; }
  .ind{ padding:26px 22px 28px; }
  .ind__num{ margin-bottom:18px; }
  /* the 1:1 ratio exists so the three-across desktop row lines up without
     cropping. Single-column on a phone there is no row to match, and two
     square images cost 172px of scrolling for a centred subject. */
  .slot__art[data-art="dock"], .slot__art[data-art="scanner"]{ aspect-ratio:4/3; }

  /* the lane wraps mid-phrase on a phone — the ID and the figures carry it */
  .process__route{ display:none; }
  .process__figs i:first-child{ display:none; }

  /* ---- HEADER ---------------------------------------------------------
     .hdr__inner needed 416px inside 390px. body{overflow-x:hidden} clipped
     the excess instead of showing a scrollbar, so the burger sat off-screen
     and the menu could not be tapped on any phone at or below 414px. The CTA
     already appears in the menu, twice in the hero and in the contact block,
     so it is the one that goes.                                          */
  .hdr__right .btn{ display:none; }
  .burger{ width:44px; height:44px; }
  .burger span{ left:14px; }
  .burger span:nth-child(1){ top:19px } .burger span:nth-child(2){ top:24px }
  .brand{ padding-block:7px; }

  /* ---- tap targets: padding, so the layout and the hover rule hold ---- */
  .ftr__col{ gap:0; }
  .ftr__col a{ padding:12px 0; }
  /* the contact links carry an underline on hover, so the hit area is grown
     with a pseudo-element instead of padding, which would drop the rule */
  .contactlist a{ position:relative; }
  .contactlist a::after{ content:""; position:absolute; inset:-13px 0; }

  /* ---- sections: tighter, to cut the 21.5 screens of scrolling ---- */
  .sec{ padding:66px 0; }
  .feed .feed__row:nth-of-type(n+5){ display:none; }

  /* ---- type: labels that carry information. The truck scene's telemetry
     (track__id, rnode__lbl, posmap__label) stays small on purpose. ---- */
  .chip,
  .card__list li, .card__stat,
  .stat__n,
  .loadbar__top, .tag,
  .cover__head, .cover__scale,
  .process__dur, .process__title, .process__figs,
  .statusbar, .cta__bar,
  .contactlist dt,
  .posbar__legend,
  .core__head, .core__list li,
  .ftr__bottom, .ftr__micro{ font-size:11px; }
  .ticker__track span, .signal__list b,
  .minigrid dt, .minigrid dd,
  .process__head .chip{ font-size:11px; }
  /* axis and frame labels stay a notch down — they annotate, they aren't read */
  .cover__lbl, .posmap__label, .slot figcaption{ font-size:10.5px; }
  .cover__row{ grid-template-columns:80px 1fr; }
  .zone__log .t{ font-size:11px; }
  .zone__log .m{ font-size:11.5px; }
  /* short footer links were only 38px wide; full-width rows are easier to hit */
  .ftr__col a{ width:auto; }
}

/* ------------------------------------- short viewports: the zones scene
   The copy block is anchored to the TOP of the sticky frame and has a nearly
   fixed height; the truck is anchored to the BOTTOM (--ground up from it). So
   a short viewport drives them into each other, and it is height that decides
   it, not width — a 1024x600 tablet in landscape was worse than any phone.
   Measured overlap before this block: 18px on a 667px phone, 93px at 1024x600.
   Nothing here applies above 700px, so tall phones and normal laptops are
   untouched.                                                              */
@media (max-height:700px){
  .zones__ui{ padding-top:calc(var(--hdr-h) + 8px); padding-bottom:8px; }
  .zones__head .eyebrow{ margin-bottom:7px; }
  .zones__head .h2--sm{ font-size:clamp(20px,2.1vw,26px); }
  .zones__body{ padding-top:12px; }
  .zone__meta{ margin-bottom:9px; }
  .zone__title{ font-size:clamp(21px,2.3vw,28px); margin-bottom:9px; }
  .zone__copy{ font-size:13px; line-height:1.5; }
  .zone__log{ margin-top:12px; padding-top:8px; }
  .zone__log li{ padding:3px 10px; }
  .rail{ height:48px; padding-top:18px; }
  /* a 440px rig on a 600px-tall screen leaves the copy nowhere to go */
  .zones{ --ground:120px; --rigW:330px; }
}
/* below 640px tall the scene has to give more ground; min-width keeps this
   off phones, which get their own values in the block underneath */
@media (min-width:961px) and (max-height:640px){
  .zones{ --ground:92px; --rigW:280px; }
  .zone__copy{ font-size:12.5px; }
}
/* on a short WIDE screen the log's last row grazed the truck's left flank.
   There is width to spare here, so move the rig right rather than shrink type.
   main.js re-reads --tx in measure(), which snap() runs on resize. */
@media (min-width:961px) and (max-height:700px){
  .zones{ --tx:.70; }
}
@media (max-width:960px) and (max-height:700px){
  .zones__ui{ padding-top:calc(var(--hdr-h) + 6px); }
  .zone__title{ font-size:clamp(19px,5.2vw,23px); }
  .zone__copy{ font-size:12.5px; }
  .zone__log li{ padding:3px 8px; }
  .zones{ --ground:84px; --rigW:164px; }
}
/* Below 460px tall — a phone held sideways — the frame is 375px and the header
   takes 68 of it. There is no arrangement that fits the copy and the truck, so
   the scene steps aside and the story is read instead of watched. The pin and
   the scrub still work; only the drawing is dropped. */
@media (max-height:460px){
  .zones .scene{ display:none; }
  .zones__ui{ padding-top:calc(var(--hdr-h) + 6px); padding-bottom:6px; }
  .zones__hint{ display:none; }
  .rail{ height:38px; padding-top:12px; }
}

/* under 620px tall on a phone the five-row alert zone still had nowhere to go */
@media (max-width:960px) and (max-height:620px){
  .zones__head .h2--sm{ font-size:20px; }
  .zone__title{ font-size:19px; margin-bottom:7px; }
  .zone__copy{ font-size:12px; line-height:1.45; }
  .zone__log{ margin-top:9px; padding-top:6px; }
  .zone__log li{ padding:2px 8px; }
  .zone__log .t{ font-size:9.5px; }
  .zone__log .m{ font-size:10px; }
}

/* ------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .zone__log li{ opacity:1; transform:none; }
  /* the timeline draws itself instantly and all at once — transition-duration
     is clamped above, but transition-delay is not, so the stagger has to go */
  .process__steps li::after{ transform:none !important; transition-delay:0s !important; }
  .process .process__dot{ transition-delay:0s !important; }
  .loadbar__fill, .cover__seg{ transform:scaleX(1); }
}