/* ══════════════════════════════════════════════════════════════════════════
   VFO SERVICES HUB — APPROVED DESKTOP STYLESHEET
   Extracted verbatim from the approved desktop page. The only change is the
   --map token, which now points at images/vfo-national-map.jpg instead of an
   embedded data URI. No design values were touched.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════ TOKENS ══════════════════ */
:root{
  /* Official VFO digital HEX values */
  --red:#EC1B33;
  --teal:#0FA8B9;
  --gold:#F8AE32;
  --orange:#F07521;
  --offwhite:#F7F1EB;
  --black:#090909;

  /* Working neutrals derived only for surface / opacity / contrast */
  --ink:#141414;
  --card-d:#131315;
  --line-d:rgba(247,241,235,.13);
  --line-l:rgba(9,9,9,.13);
  --body-d:#C6C4C1;
  --muted-d:#8C8A88;
  --body-l:#4A4845;
  --muted-l:#6E6B67;
  --paper:#FFFFFF;

  --maxw:1280px;
  --pad:48px;

  /* National map asset — embedded once, reused by hero + final CTA */
    --map:url('../images/vfo-national-map.jpg');
}

/* ══════════════════ RESET / BASE ══════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  background:var(--black);
  color:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-weight:700;line-height:1.1;letter-spacing:-0.02em;}
em{font-style:normal;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--black);padding:12px 20px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ── Shared type primitives ── */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  line-height:1.4;
}
.eyebrow .sq{width:9px;height:9px;flex:0 0 9px;background:var(--red);}
.h-sec{
  font-size:clamp(34px,3.1vw,46px);
  font-weight:700;line-height:1.08;letter-spacing:-0.025em;
  text-transform:uppercase;margin-top:22px;
}
.lede{font-size:17px;line-height:1.8;max-width:660px;margin-top:20px;}
.lede + .lede{margin-top:16px;}

/* Two-column section head: title block left, supporting copy right. */
.sec-head{display:grid;grid-template-columns:1.08fr 1fr;gap:0 72px;align-items:end;}
.sec-head .head-l{grid-column:1;}
.sec-head .head-r{grid-column:2;padding-bottom:6px;}
.sec-head .head-r .lede{max-width:none;margin-top:0;}
.on-dark .h-sec{color:var(--offwhite);}
.on-dark .eyebrow{color:var(--muted-d);}
.on-dark .lede{color:var(--body-d);}
.on-dark .lede strong{color:#fff;font-weight:600;}
.on-light .h-sec{color:var(--black);}
.on-light .eyebrow{color:var(--muted-l);}
.on-light .lede{color:var(--body-l);}
.on-light .lede strong{color:var(--black);font-weight:600;}

/* ── Buttons — identical system to the approved Homepage ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 32px;border:1.5px solid transparent;line-height:1;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s;
}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);}
.btn-red:hover{background:#C9142A;border-color:#C9142A;transform:translateY(-2px);}
.btn-ink{background:var(--black);color:var(--offwhite);border-color:var(--black);}
.btn-ink:hover{background:#2A2A2A;border-color:#2A2A2A;transform:translateY(-2px);}

/* Text link with accent rule */
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:2px solid currentColor;transition:gap .22s;
}
.tlink:hover{gap:15px;}

/* ══════════════════ NAV ══════════════════ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(9,9,9,.90);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-d);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:96px;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.nav-logo img{height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:13.5px;font-weight:500;letter-spacing:.06em;
  color:var(--body-d);transition:color .2s;position:relative;padding:6px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .25s;
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after{width:100%;}
.nav-links a.current{color:#fff;}
.nav-links a.current::after{width:100%;}
.nav-links a.btn{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 32px;color:#fff;
}
.nav-links a.btn::after{content:none;}
.nav-links a.btn:hover{color:#fff;}

/* ══════════════════ 1 · HERO ══════════════════ */
.hero{position:relative;background:var(--black);overflow:hidden;}
.mapimg{
  background:var(--map) no-repeat center center;
  background-size:100% auto;
  aspect-ratio:1640/959;
}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:104px var(--pad) 118px;}
.hero h1{
  font-size:clamp(44px,4.3vw,62px);
  line-height:1.04;letter-spacing:-0.038em;color:#fff;
  margin-top:26px;max-width:900px;text-transform:uppercase;
}
.hero h1 em{color:var(--gold);}
.hero .lede{font-size:17px;max-width:660px;margin-top:24px;color:var(--body-d);}
.hero .lede strong{color:#fff;font-weight:600;}
.hero-cta{margin-top:40px;}

/* ══════════════════ 2 · FOUR CAPABILITY AREAS ══════════════════ */
.paths{position:relative;background:var(--black);border-top:1px solid var(--line-d);padding:96px 0 112px;overflow:hidden;}
.paths h2 em{color:var(--teal);}
.pathgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:60px;}
.path{
  position:relative;display:flex;flex-direction:column;
  background:var(--card-d);border:1px solid var(--line-d);border-top:3px solid;
  padding:42px 44px 38px;min-height:400px;
  transition:transform .26s,box-shadow .26s,background-color .26s;
}
.path:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(0,0,0,.62);background:#17171A;}
.path .nd{width:11px;height:11px;border-radius:50%;position:relative;flex:0 0 auto;}
.path .nd::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid currentColor;opacity:.35;
  animation:lanepulse 3.4s ease-out infinite;
}
@keyframes lanepulse{0%{transform:scale(.55);opacity:.5;}75%{transform:scale(1.8);opacity:0;}100%{opacity:0;}}
.path h3{
  font-size:clamp(24px,1.9vw,29px);font-weight:700;line-height:1.14;letter-spacing:-0.015em;
  color:#fff;margin-top:22px;text-transform:uppercase;
}
.path .pos{
  font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-top:12px;
}
.path .copy{font-size:16px;line-height:1.75;color:var(--body-d);margin-top:20px;}
.path .caps{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-d);flex:1;}
.path .caps .k{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-d);
}
.path .caps .v{
  font-size:13.5px;font-weight:500;line-height:1.85;letter-spacing:.035em;
  color:var(--body-d);margin-top:10px;
}
.path .go{margin-top:30px;align-self:flex-start;}
.path .track{position:absolute;left:0;bottom:0;height:2px;width:0;transition:width .42s ease;}
.path:hover .track{width:100%;}

/* ══════════════════ 3 · VFO³ BRIDGE ══════════════════ */
.bridge{position:relative;background:var(--offwhite);padding:104px 0;overflow:hidden;}
.bridge-mark{
  position:absolute;top:50%;right:-90px;transform:translateY(-50%);
  width:480px;opacity:.06;pointer-events:none;
}
.bridge-in{position:relative;}
.bridge h2 em{color:var(--teal);}
.sequence{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:52px;
  padding:30px 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
}
.sequence .s{
  font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.sequence .s .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.sequence .arw{color:#A9A39B;font-weight:700;font-size:16px;}
.bridge-cta{margin-top:38px;}

/* ══════════════════ 4 · PROOF BRIDGE ══════════════════ */
.receipts{background:var(--paper);border-top:1px solid var(--line-l);padding:78px 0;}
.receipts-in{display:flex;align-items:center;justify-content:space-between;gap:64px;flex-wrap:wrap;}
.receipts .rbody{flex:1;min-width:420px;}
.receipts .line{
  font-size:clamp(24px,2.1vw,31px);font-weight:700;line-height:1.35;letter-spacing:-0.02em;
  color:var(--black);margin-top:20px;text-transform:uppercase;
}
.receipts .line em{white-space:nowrap;}
.receipts .rcta{flex:0 0 auto;}

/* ══════════════════ 5 · FINAL CTA ══════════════════ */
.final{position:relative;background:var(--black);padding:122px 0;overflow:hidden;}
.final-map{position:absolute;top:-38%;right:-14%;width:74%;pointer-events:none;opacity:.44;}
.final-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--black) 38%,rgba(9,9,9,.80) 66%,rgba(9,9,9,.52) 100%);
}
.final-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.final h2{
  font-size:clamp(42px,4.4vw,58px);line-height:1.06;letter-spacing:-0.035em;
  color:#fff;text-transform:uppercase;margin-top:24px;max-width:720px;
}
.final h2 em{color:var(--gold);}
.final p{font-size:17px;line-height:1.8;color:var(--body-d);max-width:580px;margin-top:22px;}
.final .cta{margin-top:40px;}

/* ══════════════════ FOOTER ══════════════════ */
footer{background:var(--black);border-top:1px solid var(--line-d);padding:76px 0 34px;}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:54px;}
.fbrand img{width:236px;}
.tagline{margin-top:26px;}
.tagline .l{
  display:block;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  line-height:1.9;white-space:nowrap;
}
.tagline .r{color:var(--red);}
.tagline .b{color:var(--teal);}
.tagline .g{color:var(--gold);}
.fdescriptor{
  margin-top:18px;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.6;
}
.fcontact{
  margin-top:20px;font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-d);line-height:2.15;
}
.fcontact a:hover{color:var(--offwhite);}
.fcol .h{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--offwhite);margin-bottom:20px;
}
.fcol li{margin-bottom:12px;}
.fcol a{font-size:14px;color:var(--body-d);transition:color .2s;}
.fcol a:hover{color:#fff;}
.legal{
  margin-top:64px;padding-top:28px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);
}

/* ══════════════════ DESKTOP RANGE TUNING (1280–1920) ══════════════════ */
@media (max-width:1400px){
  :root{--pad:40px;}
  .bridge-mark{width:400px;right:-110px;}
  .path{padding:38px 38px 34px;}
}
/* Responsive fundamentals only — the intentional mobile redesign is a later pass. */
@media (max-width:1180px){
  .sec-head{grid-template-columns:1fr;gap:26px;}
  .sec-head .head-r{padding-bottom:0;}
  .pathgrid{grid-template-columns:1fr;}
  .path{min-height:0;}
  .receipts-in{gap:34px;}
  .receipts .rbody{min-width:0;}
}
@media (max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr;}
  .nav-links a:not(.btn){display:none;}
  .fdescriptor{white-space:normal;}
}

/* ══════════════════ MOTION ══════════════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal{opacity:1;transform:none;}
}

/* ══════════════════ HERO — "FIELD IN MOTION" ══════════════════════════════
   A new hero concept. Nothing from the previous hub/spoke visual survives.

   What it is: an abstract operational landscape, full-bleed behind the hero —
   fragments of street grid across six separate areas, canvass routes running
   out through them, household points lighting as they are worked, verification
   completing behind the activity, heat patterns emerging where engagement has
   happened, and intelligence travelling back inward toward the decision point.

   Structure — four depth layers:
     lyr-bg     geographic contours + (per zone) street-grid fragments
     lyr-mid    routes, crews moving out, returning signals
     lyr-fore   household points, verification nodes / rings / marks
     lyr-intel  aggregated intelligence drifting inward

   Timing — one 28s clock. Six zones each hold a ~10.4s operation, staggered
   0.6 / 4.2 / 8.0 / 11.8 / 15.6 / 19.4s, so three or four areas are always
   live at once and the peak reads as multiple simultaneous operations. Every
   zone begins and ends at the same resting state, so the cycle closes with no
   reset. Contours drift on their own much slower alternating cycle.

   SVG + CSS only. No canvas, no video, no GIF, no library, no Lottie.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;background:var(--black);overflow:hidden;}
.hero-field{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  --px:0px;--py:0px;
}
.hero-field .fieldsvg{
  position:absolute;top:50%;left:50%;
  width:112%;height:112%;min-width:1180px;
  transform:translate(-50%,-50%);
}
/* The headline sits over the calm left side: this scrim keeps the type at full
   contrast and lets the activity read on the right. */
.hero-field::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--black) 6%,rgba(9,9,9,.92) 28%,rgba(9,9,9,.44) 47%,rgba(9,9,9,.06) 66%,rgba(9,9,9,.26) 100%),
    linear-gradient(180deg,rgba(9,9,9,.5) 0%,rgba(9,9,9,0) 20%,rgba(9,9,9,0) 66%,rgba(9,9,9,.82) 95%,var(--black) 100%);
}

/* ── depth layers: extremely subtle pointer parallax, set by js/services.js ── */
.lyr{transition:transform 1.1s cubic-bezier(.22,.61,.36,1);}
.lyr-bg   {transform:translate3d(calc(var(--px) * .18),calc(var(--py) * .18),0);}
.lyr-mid  {transform:translate3d(calc(var(--px) * .5),calc(var(--py) * .5),0);}
.lyr-intel{transform:translate3d(var(--px),var(--py),0);}

/* ── background: geographic contours ── */
.contour{
  fill:none;stroke:var(--offwhite);stroke-width:1;stroke-opacity:.07;
  animation:drift 74s ease-in-out infinite alternate;
}
.contour.c2{stroke-opacity:.055;animation-duration:88s;animation-delay:-14s;}
.contour.c3{stroke-opacity:.045;animation-duration:104s;animation-delay:-31s;}
@keyframes drift{from{transform:translate3d(-14px,0,0);}to{transform:translate3d(16px,-8px,0);}}

/* ── scattered field points: quiet texture of populated ground ── */
.dust{
  fill:var(--offwhite);fill-opacity:.07;
  animation:dustbreathe 26s ease-in-out infinite alternate;
}
.u2{animation-duration:31s;animation-delay:-4s;} .u3{animation-duration:37s;animation-delay:-9s;}
.u4{animation-duration:29s;animation-delay:-14s;} .u5{animation-duration:34s;animation-delay:-19s;}
.u6{animation-duration:41s;animation-delay:-24s;} .u7{animation-duration:24s;animation-delay:-11s;}
@keyframes dustbreathe{from{fill-opacity:.05;}to{fill-opacity:.13;}}

/* ── street-grid fragments ── */
.street{
  fill:none;stroke:var(--offwhite);stroke-width:1;stroke-opacity:.1;
  animation-duration:28s;animation-timing-function:linear;animation-iteration-count:infinite;
}

/* ── routes and the crews working them ── */
.route{
  fill:none;stroke:var(--c);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);opacity:0;
  filter:drop-shadow(0 0 7px var(--c));
  animation-duration:28s;animation-timing-function:linear;animation-iteration-count:infinite;
}
/* crew + returning signal ride the route itself: a 1px dash on the same path
   geometry, so no offset-path support is required anywhere. */
.crew,.rtn{
  fill:var(--c);opacity:0;
  animation-duration:28s;animation-timing-function:cubic-bezier(.4,0,.55,1);animation-iteration-count:infinite;
}
.crew{r:2.8;filter:drop-shadow(0 0 6px var(--c));}
.rtn{fill:var(--offwhite);}

/* ── household / stakeholder points ── */
.door{
  fill:var(--c);fill-opacity:.24;
  animation-duration:28s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.d2{animation-delay:.18s;} .d3{animation-delay:.36s;} .d4{animation-delay:.54s;}
.d5{animation-delay:.72s;} .d6{animation-delay:.9s;}

/* ── verification: the mark that follows completed work ── */
.vnode{fill:var(--offwhite);opacity:0;filter:drop-shadow(0 0 7px rgba(247,241,235,.55));animation-duration:28s;animation-timing-function:ease-out;animation-iteration-count:infinite;}
.vring{
  fill:none;stroke:var(--offwhite);stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation-duration:28s;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-iteration-count:infinite;
}
.vmark{
  fill:none;stroke:var(--offwhite);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16;opacity:0;
  animation-duration:28s;animation-timing-function:ease-out;animation-iteration-count:infinite;
}
.v2 .vring,.vring.v2{animation-delay:1.15s;}
.vnode.v2{animation-delay:1.15s;} .vmark.v2{animation-delay:1.15s;}
.route.r2,.crew.cr2,.rtn.rt2{animation-delay:1.15s;}

/* ── heat pattern where engagement has happened ── */
.heat{opacity:0;animation-duration:28s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;mix-blend-mode:screen;}

/* ── intelligence coming back ── */
.feedwrap{
  opacity:0;
  animation-duration:28s;animation-timing-function:cubic-bezier(.35,0,.5,1);animation-iteration-count:infinite;
}
.feed{fill:var(--c);}
.feedtrail{stroke:var(--c);stroke-width:1;stroke-opacity:.45;stroke-linecap:round;}
.feedwrap.k2{animation-delay:.55s;} .feedwrap.k3{animation-delay:1.1s;}

/* ══════════ per-zone keyframes on the shared 28s clock (generated) ══════════ */
/* zone 1 — operation window 0.6s → 11.0s */
@keyframes route-1{
  0%,4.29%      {stroke-dashoffset:var(--len);opacity:0;}
  5.71%         {opacity:.95;}
  17.86%         {stroke-dashoffset:0;opacity:.95;}
  32.14%         {stroke-dashoffset:0;opacity:.8;}
  39.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-1{
  0%,4.64%      {opacity:0;stroke-dashoffset:var(--len);}
  6.07%         {opacity:1;}
  17.86%         {opacity:1;stroke-dashoffset:0;}
  19.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-1{
  0%,22.14%      {opacity:0;stroke-dashoffset:0;}
  23.57%         {opacity:1;}
  33.57%         {opacity:1;stroke-dashoffset:var(--len);}
  35.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-1{
  0%,7.14%      {fill-opacity:.14;}
  13.57%         {fill-opacity:1;}
  27.14%         {fill-opacity:.55;}
  39.29%,100%    {fill-opacity:.14;}
}
@keyframes vnode-1{
  0%,17.14%      {opacity:0;}
  19.29%         {opacity:1;}
  35.71%         {opacity:.9;}
  39.29%,100%    {opacity:0;}
}
@keyframes vring-1{
  0%,18.57%      {opacity:0;transform:scale(.4);}
  20.0%         {opacity:.75;}
  25.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-1{
  0%,21.43%      {stroke-dashoffset:16;opacity:0;}
  22.5%         {opacity:1;}
  25.0%         {stroke-dashoffset:0;opacity:1;}
  35.71%         {stroke-dashoffset:0;opacity:.8;}
  39.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-1{
  0%,19.29%      {opacity:0;}
  28.57%         {opacity:1;}
  36.43%         {opacity:.7;}
  41.43%,100% {opacity:0;}
}
@keyframes street-1{
  0%,3.57%      {stroke-opacity:.1;}
  11.43%         {stroke-opacity:.24;}
  32.86%         {stroke-opacity:.16;}
  42.14%,100% {stroke-opacity:.1;}
}
@keyframes feed-1{
  0%,25.0%      {opacity:0;transform:translate(0,0);}
  26.79%         {opacity:.95;}
  33.93%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  38.57%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z1 .route{animation-name:route-1;}
.z1 .crew{animation-name:crew-1;}
.z1 .rtn{animation-name:rtn-1;}
.z1 .door{animation-name:door-1;}
.z1 .vnode{animation-name:vnode-1;}
.z1 .vring{animation-name:vring-1;}
.z1 .vmark{animation-name:vmark-1;}
.z1 .heat{animation-name:heat-1;}
.z1 .street{animation-name:street-1;}
.feedwrap.f1{animation-name:feed-1;}
/* zone 2 — operation window 3.4s → 13.8s */
@keyframes route-2{
  0%,14.29%      {stroke-dashoffset:var(--len);opacity:0;}
  15.71%         {opacity:.95;}
  27.86%         {stroke-dashoffset:0;opacity:.95;}
  42.14%         {stroke-dashoffset:0;opacity:.8;}
  49.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-2{
  0%,14.64%      {opacity:0;stroke-dashoffset:var(--len);}
  16.07%         {opacity:1;}
  27.86%         {opacity:1;stroke-dashoffset:0;}
  29.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-2{
  0%,32.14%      {opacity:0;stroke-dashoffset:0;}
  33.57%         {opacity:1;}
  43.57%         {opacity:1;stroke-dashoffset:var(--len);}
  45.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-2{
  0%,17.14%      {fill-opacity:.14;}
  23.57%         {fill-opacity:1;}
  37.14%         {fill-opacity:.55;}
  49.29%,100%    {fill-opacity:.14;}
}
@keyframes vnode-2{
  0%,27.14%      {opacity:0;}
  29.29%         {opacity:1;}
  45.71%         {opacity:.9;}
  49.29%,100%    {opacity:0;}
}
@keyframes vring-2{
  0%,28.57%      {opacity:0;transform:scale(.4);}
  30.0%         {opacity:.75;}
  35.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-2{
  0%,31.43%      {stroke-dashoffset:16;opacity:0;}
  32.5%         {opacity:1;}
  35.0%         {stroke-dashoffset:0;opacity:1;}
  45.71%         {stroke-dashoffset:0;opacity:.8;}
  49.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-2{
  0%,29.29%      {opacity:0;}
  38.57%         {opacity:1;}
  46.43%         {opacity:.7;}
  51.43%,100% {opacity:0;}
}
@keyframes street-2{
  0%,13.57%      {stroke-opacity:.1;}
  21.43%         {stroke-opacity:.24;}
  42.86%         {stroke-opacity:.16;}
  52.14%,100% {stroke-opacity:.1;}
}
@keyframes feed-2{
  0%,35.0%      {opacity:0;transform:translate(0,0);}
  36.79%         {opacity:.95;}
  43.93%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  48.57%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z2 .route{animation-name:route-2;}
.z2 .crew{animation-name:crew-2;}
.z2 .rtn{animation-name:rtn-2;}
.z2 .door{animation-name:door-2;}
.z2 .vnode{animation-name:vnode-2;}
.z2 .vring{animation-name:vring-2;}
.z2 .vmark{animation-name:vmark-2;}
.z2 .heat{animation-name:heat-2;}
.z2 .street{animation-name:street-2;}
.feedwrap.f2{animation-name:feed-2;}
/* zone 3 — operation window 6.2s → 16.6s */
@keyframes route-3{
  0%,24.29%      {stroke-dashoffset:var(--len);opacity:0;}
  25.71%         {opacity:.95;}
  37.86%         {stroke-dashoffset:0;opacity:.95;}
  52.14%         {stroke-dashoffset:0;opacity:.8;}
  59.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-3{
  0%,24.64%      {opacity:0;stroke-dashoffset:var(--len);}
  26.07%         {opacity:1;}
  37.86%         {opacity:1;stroke-dashoffset:0;}
  39.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-3{
  0%,42.14%      {opacity:0;stroke-dashoffset:0;}
  43.57%         {opacity:1;}
  53.57%         {opacity:1;stroke-dashoffset:var(--len);}
  55.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-3{
  0%,27.14%      {fill-opacity:.14;}
  33.57%         {fill-opacity:1;}
  47.14%         {fill-opacity:.55;}
  59.29%,100%    {fill-opacity:.14;}
}
@keyframes vnode-3{
  0%,37.14%      {opacity:0;}
  39.29%         {opacity:1;}
  55.71%         {opacity:.9;}
  59.29%,100%    {opacity:0;}
}
@keyframes vring-3{
  0%,38.57%      {opacity:0;transform:scale(.4);}
  40.0%         {opacity:.75;}
  45.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-3{
  0%,41.43%      {stroke-dashoffset:16;opacity:0;}
  42.5%         {opacity:1;}
  45.0%         {stroke-dashoffset:0;opacity:1;}
  55.71%         {stroke-dashoffset:0;opacity:.8;}
  59.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-3{
  0%,39.29%      {opacity:0;}
  48.57%         {opacity:1;}
  56.43%         {opacity:.7;}
  61.43%,100% {opacity:0;}
}
@keyframes street-3{
  0%,23.57%      {stroke-opacity:.1;}
  31.43%         {stroke-opacity:.24;}
  52.86%         {stroke-opacity:.16;}
  62.14%,100% {stroke-opacity:.1;}
}
@keyframes feed-3{
  0%,45.0%      {opacity:0;transform:translate(0,0);}
  46.79%         {opacity:.95;}
  53.93%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  58.57%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z3 .route{animation-name:route-3;}
.z3 .crew{animation-name:crew-3;}
.z3 .rtn{animation-name:rtn-3;}
.z3 .door{animation-name:door-3;}
.z3 .vnode{animation-name:vnode-3;}
.z3 .vring{animation-name:vring-3;}
.z3 .vmark{animation-name:vmark-3;}
.z3 .heat{animation-name:heat-3;}
.z3 .street{animation-name:street-3;}
.feedwrap.f3{animation-name:feed-3;}
/* zone 4 — operation window 9.0s → 19.4s */
@keyframes route-4{
  0%,34.29%      {stroke-dashoffset:var(--len);opacity:0;}
  35.71%         {opacity:.95;}
  47.86%         {stroke-dashoffset:0;opacity:.95;}
  62.14%         {stroke-dashoffset:0;opacity:.8;}
  69.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-4{
  0%,34.64%      {opacity:0;stroke-dashoffset:var(--len);}
  36.07%         {opacity:1;}
  47.86%         {opacity:1;stroke-dashoffset:0;}
  49.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-4{
  0%,52.14%      {opacity:0;stroke-dashoffset:0;}
  53.57%         {opacity:1;}
  63.57%         {opacity:1;stroke-dashoffset:var(--len);}
  65.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-4{
  0%,37.14%      {fill-opacity:.14;}
  43.57%         {fill-opacity:1;}
  57.14%         {fill-opacity:.55;}
  69.29%,100%    {fill-opacity:.14;}
}
@keyframes vnode-4{
  0%,47.14%      {opacity:0;}
  49.29%         {opacity:1;}
  65.71%         {opacity:.9;}
  69.29%,100%    {opacity:0;}
}
@keyframes vring-4{
  0%,48.57%      {opacity:0;transform:scale(.4);}
  50.0%         {opacity:.75;}
  55.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-4{
  0%,51.43%      {stroke-dashoffset:16;opacity:0;}
  52.5%         {opacity:1;}
  55.0%         {stroke-dashoffset:0;opacity:1;}
  65.71%         {stroke-dashoffset:0;opacity:.8;}
  69.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-4{
  0%,49.29%      {opacity:0;}
  58.57%         {opacity:1;}
  66.43%         {opacity:.7;}
  71.43%,100% {opacity:0;}
}
@keyframes street-4{
  0%,33.57%      {stroke-opacity:.1;}
  41.43%         {stroke-opacity:.24;}
  62.86%         {stroke-opacity:.16;}
  72.14%,100% {stroke-opacity:.1;}
}
@keyframes feed-4{
  0%,55.0%      {opacity:0;transform:translate(0,0);}
  56.79%         {opacity:.95;}
  63.93%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  68.57%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z4 .route{animation-name:route-4;}
.z4 .crew{animation-name:crew-4;}
.z4 .rtn{animation-name:rtn-4;}
.z4 .door{animation-name:door-4;}
.z4 .vnode{animation-name:vnode-4;}
.z4 .vring{animation-name:vring-4;}
.z4 .vmark{animation-name:vmark-4;}
.z4 .heat{animation-name:heat-4;}
.z4 .street{animation-name:street-4;}
.feedwrap.f4{animation-name:feed-4;}
/* zone 5 — operation window 11.8s → 22.2s */
@keyframes route-5{
  0%,44.29%      {stroke-dashoffset:var(--len);opacity:0;}
  45.71%         {opacity:.95;}
  57.86%         {stroke-dashoffset:0;opacity:.95;}
  72.14%         {stroke-dashoffset:0;opacity:.8;}
  79.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-5{
  0%,44.64%      {opacity:0;stroke-dashoffset:var(--len);}
  46.07%         {opacity:1;}
  57.86%         {opacity:1;stroke-dashoffset:0;}
  59.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-5{
  0%,62.14%      {opacity:0;stroke-dashoffset:0;}
  63.57%         {opacity:1;}
  73.57%         {opacity:1;stroke-dashoffset:var(--len);}
  75.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-5{
  0%,47.14%      {fill-opacity:.14;}
  53.57%         {fill-opacity:1;}
  67.14%         {fill-opacity:.55;}
  79.29%,100%    {fill-opacity:.14;}
}
@keyframes vnode-5{
  0%,57.14%      {opacity:0;}
  59.29%         {opacity:1;}
  75.71%         {opacity:.9;}
  79.29%,100%    {opacity:0;}
}
@keyframes vring-5{
  0%,58.57%      {opacity:0;transform:scale(.4);}
  60.0%         {opacity:.75;}
  65.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-5{
  0%,61.43%      {stroke-dashoffset:16;opacity:0;}
  62.5%         {opacity:1;}
  65.0%         {stroke-dashoffset:0;opacity:1;}
  75.71%         {stroke-dashoffset:0;opacity:.8;}
  79.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-5{
  0%,59.29%      {opacity:0;}
  68.57%         {opacity:1;}
  76.43%         {opacity:.7;}
  81.43%,100% {opacity:0;}
}
@keyframes street-5{
  0%,43.57%      {stroke-opacity:.1;}
  51.43%         {stroke-opacity:.24;}
  72.86%         {stroke-opacity:.16;}
  82.14%,100% {stroke-opacity:.1;}
}
@keyframes feed-5{
  0%,65.0%      {opacity:0;transform:translate(0,0);}
  66.79%         {opacity:.95;}
  73.93%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  78.57%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z5 .route{animation-name:route-5;}
.z5 .crew{animation-name:crew-5;}
.z5 .rtn{animation-name:rtn-5;}
.z5 .door{animation-name:door-5;}
.z5 .vnode{animation-name:vnode-5;}
.z5 .vring{animation-name:vring-5;}
.z5 .vmark{animation-name:vmark-5;}
.z5 .heat{animation-name:heat-5;}
.z5 .street{animation-name:street-5;}
.feedwrap.f5{animation-name:feed-5;}
/* zone 6 — operation window 14.6s → 25.0s */
@keyframes route-6{
  0%,54.29%      {stroke-dashoffset:var(--len);opacity:0;}
  55.71%         {opacity:.95;}
  67.86%         {stroke-dashoffset:0;opacity:.95;}
  82.14%         {stroke-dashoffset:0;opacity:.8;}
  89.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-6{
  0%,54.64%      {opacity:0;stroke-dashoffset:var(--len);}
  56.07%         {opacity:1;}
  67.86%         {opacity:1;stroke-dashoffset:0;}
  69.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-6{
  0%,72.14%      {opacity:0;stroke-dashoffset:0;}
  73.57%         {opacity:1;}
  83.57%         {opacity:1;stroke-dashoffset:var(--len);}
  85.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-6{
  0%,57.14%      {fill-opacity:.14;}
  63.57%         {fill-opacity:1;}
  77.14%         {fill-opacity:.55;}
  89.29%,100%    {fill-opacity:.14;}
}
@keyframes vnode-6{
  0%,67.14%      {opacity:0;}
  69.29%         {opacity:1;}
  85.71%         {opacity:.9;}
  89.29%,100%    {opacity:0;}
}
@keyframes vring-6{
  0%,68.57%      {opacity:0;transform:scale(.4);}
  70.0%         {opacity:.75;}
  75.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-6{
  0%,71.43%      {stroke-dashoffset:16;opacity:0;}
  72.5%         {opacity:1;}
  75.0%         {stroke-dashoffset:0;opacity:1;}
  85.71%         {stroke-dashoffset:0;opacity:.8;}
  89.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-6{
  0%,69.29%      {opacity:0;}
  78.57%         {opacity:1;}
  86.43%         {opacity:.7;}
  91.43%,100% {opacity:0;}
}
@keyframes street-6{
  0%,53.57%      {stroke-opacity:.1;}
  61.43%         {stroke-opacity:.24;}
  82.86%         {stroke-opacity:.16;}
  92.14%,100% {stroke-opacity:.1;}
}
@keyframes feed-6{
  0%,75.0%      {opacity:0;transform:translate(0,0);}
  76.79%         {opacity:.95;}
  83.93%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  88.57%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z6 .route{animation-name:route-6;}
.z6 .crew{animation-name:crew-6;}
.z6 .rtn{animation-name:rtn-6;}
.z6 .door{animation-name:door-6;}
.z6 .vnode{animation-name:vnode-6;}
.z6 .vring{animation-name:vring-6;}
.z6 .vmark{animation-name:vmark-6;}
.z6 .heat{animation-name:heat-6;}
.z6 .street{animation-name:street-6;}
.feedwrap.f6{animation-name:feed-6;}
/* zone 7 — operation window 17.4s → 27.8s */
@keyframes route-7{
  0%,64.29%      {stroke-dashoffset:var(--len);opacity:0;}
  65.71%         {opacity:.95;}
  77.86%         {stroke-dashoffset:0;opacity:.95;}
  92.14%         {stroke-dashoffset:0;opacity:.8;}
  99.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-7{
  0%,64.64%      {opacity:0;stroke-dashoffset:var(--len);}
  66.07%         {opacity:1;}
  77.86%         {opacity:1;stroke-dashoffset:0;}
  79.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-7{
  0%,82.14%      {opacity:0;stroke-dashoffset:0;}
  83.57%         {opacity:1;}
  93.57%         {opacity:1;stroke-dashoffset:var(--len);}
  95.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-7{
  0%,67.14%      {fill-opacity:.14;}
  73.57%         {fill-opacity:1;}
  87.14%         {fill-opacity:.55;}
  99.29%,100%    {fill-opacity:.14;}
}
@keyframes vnode-7{
  0%,77.14%      {opacity:0;}
  79.29%         {opacity:1;}
  95.71%         {opacity:.9;}
  99.29%,100%    {opacity:0;}
}
@keyframes vring-7{
  0%,78.57%      {opacity:0;transform:scale(.4);}
  80.0%         {opacity:.75;}
  85.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-7{
  0%,81.43%      {stroke-dashoffset:16;opacity:0;}
  82.5%         {opacity:1;}
  85.0%         {stroke-dashoffset:0;opacity:1;}
  95.71%         {stroke-dashoffset:0;opacity:.8;}
  99.29%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-7{
  0%,79.29%      {opacity:0;}
  88.57%         {opacity:1;}
  96.43%         {opacity:.7;}
  100.0%,100% {opacity:0;}
}
@keyframes street-7{
  0%,63.57%      {stroke-opacity:.1;}
  71.43%         {stroke-opacity:.24;}
  92.86%         {stroke-opacity:.16;}
  100.0%,100% {stroke-opacity:.1;}
}
@keyframes feed-7{
  0%,85.0%      {opacity:0;transform:translate(0,0);}
  86.79%         {opacity:.95;}
  93.93%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  98.57%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z7 .route{animation-name:route-7;}
.z7 .crew{animation-name:crew-7;}
.z7 .rtn{animation-name:rtn-7;}
.z7 .door{animation-name:door-7;}
.z7 .vnode{animation-name:vnode-7;}
.z7 .vring{animation-name:vring-7;}
.z7 .vmark{animation-name:vmark-7;}
.z7 .heat{animation-name:heat-7;}
.z7 .street{animation-name:street-7;}
.feedwrap.f7{animation-name:feed-7;}
/* zone 8 — operation window 20.2s → 30.6s */
@keyframes route-8{
  0%,74.29%      {stroke-dashoffset:var(--len);opacity:0;}
  75.71%         {opacity:.95;}
  87.86%         {stroke-dashoffset:0;opacity:.95;}
  100.0%         {stroke-dashoffset:0;opacity:.8;}
  100.0%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes crew-8{
  0%,74.64%      {opacity:0;stroke-dashoffset:var(--len);}
  76.07%         {opacity:1;}
  87.86%         {opacity:1;stroke-dashoffset:0;}
  89.29%,100%    {opacity:0;stroke-dashoffset:0;}
}
@keyframes rtn-8{
  0%,92.14%      {opacity:0;stroke-dashoffset:0;}
  93.57%         {opacity:1;}
  100.0%         {opacity:1;stroke-dashoffset:var(--len);}
  100.0%,100%    {opacity:0;stroke-dashoffset:var(--len);}
}
@keyframes door-8{
  0%,77.14%      {fill-opacity:.14;}
  83.57%         {fill-opacity:1;}
  97.14%         {fill-opacity:.55;}
  100.0%,100%    {fill-opacity:.14;}
}
@keyframes vnode-8{
  0%,87.14%      {opacity:0;}
  89.29%         {opacity:1;}
  100.0%         {opacity:.9;}
  100.0%,100%    {opacity:0;}
}
@keyframes vring-8{
  0%,88.57%      {opacity:0;transform:scale(.4);}
  90.0%         {opacity:.75;}
  95.71%         {opacity:0;transform:scale(3.4);}
  100%                 {opacity:0;transform:scale(3.4);}
}
@keyframes vmark-8{
  0%,91.43%      {stroke-dashoffset:16;opacity:0;}
  92.5%         {opacity:1;}
  95.0%         {stroke-dashoffset:0;opacity:1;}
  100.0%         {stroke-dashoffset:0;opacity:.8;}
  100.0%,100%    {stroke-dashoffset:0;opacity:0;}
}
@keyframes heat-8{
  0%,89.29%      {opacity:0;}
  98.57%         {opacity:1;}
  100.0%         {opacity:.7;}
  100.0%,100% {opacity:0;}
}
@keyframes street-8{
  0%,73.57%      {stroke-opacity:.1;}
  81.43%         {stroke-opacity:.24;}
  100.0%         {stroke-opacity:.16;}
  100.0%,100% {stroke-opacity:.1;}
}
@keyframes feed-8{
  0%,95.0%      {opacity:0;transform:translate(0,0);}
  96.79%         {opacity:.95;}
  100.0%         {opacity:.5;transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55));}
  100.0%,100%   {opacity:0;transform:translate(var(--dx),var(--dy));}
}
.z8 .route{animation-name:route-8;}
.z8 .crew{animation-name:crew-8;}
.z8 .rtn{animation-name:rtn-8;}
.z8 .door{animation-name:door-8;}
.z8 .vnode{animation-name:vnode-8;}
.z8 .vring{animation-name:vring-8;}
.z8 .vmark{animation-name:vmark-8;}
.z8 .heat{animation-name:heat-8;}
.z8 .street{animation-name:street-8;}
.feedwrap.f8{animation-name:feed-8;}

/* ── the strongest frame, held still, for reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .contour,.street,.route,.crew,.rtn,.door,.vnode,.vring,.vmark,.heat,.feedwrap,.dust,.lyr{
    animation:none !important;transition:none !important;
  }
  .street{stroke-opacity:.16 !important;}
  .route{opacity:.9 !important;stroke-dashoffset:0 !important;}
  .crew,.rtn{opacity:0 !important;}
  .door{fill-opacity:.75 !important;}
  .vnode{opacity:1 !important;}
  .vring{opacity:0 !important;}
  .vmark{opacity:1 !important;stroke-dashoffset:0 !important;}
  .heat{opacity:.85 !important;}
  .feedwrap{opacity:.6 !important;}
  .dust{fill-opacity:.1 !important;}
}