/* ═══════════════════════════════════════════════════════════════════════════
   VFO — CORPORATE + FIELD INTELLIGENCE  ·  SERVICE CATEGORY PAGE
   Desktop V1 stylesheet
   ═══════════════════════════════════════════════════════════════════════════
   Tokens, type scale, nav, button system, section rhythm, node language and
   footer are inherited UNCHANGED from the approved Homepage / Services Hub /
   About V3 / Start a Conversation files. Everything below the "PAGE-SPECIFIC
   COMPONENTS" divider is new to this page only.

   This page leans on ORANGE (the locked Corporate + Field Intelligence colour)
   with TEAL as the supporting accent. Red and gold still appear so the page
   reads as VFO, not as a sub-brand.

   TYPOGRAPHY  Poppins only. No Oswald anywhere.
   TYPE FLOOR  Nothing below 11.5px. Body 16px. Labels 11.5–13px. Buttons 13px.
   SCOPE       Desktop, accurate 1280–1920px. Mobile is a later pass.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════ 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;

  /* Accessible on-light variants of the brand colours.
     The pure brand hues are kept for rules, dots, borders and large
     display figures; running text on a light surface uses these. */
  --orange-ink:#A8460B;
  --teal-ink:#0A6E7A;
  --red-ink:#C9142A;

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

  --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;}

.sec-head{display:grid;grid-template-columns:1.08fr 1fr;gap:0 72px;align-items:end;}
/* Long-headline variant: more room on the left, slightly smaller display type,
   so multi-line section headlines break where the copy intends them to. */
.sec-head.wide{grid-template-columns:1.38fr 1fr;gap:0 64px;}
.h-sec.long{font-size:clamp(28px,2.5vw,36px);line-height:1.14;}
.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;}

/* Restrained scroll cue — the hero's ONLY secondary action. Not a button. */
.slink{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--body-d);transition:color .22s,gap .22s;
}
.slink:hover{color:#fff;gap:16px;}
.slink .ar{color:var(--teal);font-weight:700;}

/* ══════════════════ 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;}

/* ══════════════════ BREADCRUMB ══════════════════ */
.crumbs{background:var(--black);border-bottom:1px solid var(--line-d);}
.crumbs ol{
  max-width:var(--maxw);margin:0 auto;padding:15px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-d);
}
.crumbs a{transition:color .2s;}
.crumbs a:hover{color:#fff;}
.crumbs .sep{color:#7A7876;}
.crumbs [aria-current]{color:var(--orange);}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════ 1 · HERO ══════════════════
   Deliberately NOT the Homepage national map. The hero carries a purpose-built
   community-intelligence composition: households resolve into structured
   records, records resolve into signal, signal resolves into a decision.
   Abstract by design — no dashboard, no metrics, no real project geography. */
.hero{position:relative;background:var(--black);overflow:hidden;}
.hero-in{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:96px var(--pad) 104px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:0 64px;align-items:center;
}
.hero h1{
  font-size:clamp(42px,4.05vw,58px);
  line-height:1.04;letter-spacing:-0.038em;color:#fff;
  margin-top:26px;text-transform:uppercase;
}
.hero h1 em{color:var(--orange);}
.hero .lede{font-size:17px;max-width:610px;margin-top:24px;color:var(--body-d);}
.hero .lede strong{color:#fff;font-weight:600;}
.hero .pos{
  display:flex;align-items:center;gap:14px;margin-top:30px;
  font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);
}
.hero .pos .rule{height:1px;width:56px;background:var(--orange);opacity:.55;flex:0 0 56px;}
.hero-ctas{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:38px;}
.hero-glow{
  position:absolute;top:-18%;right:-12%;width:760px;height:760px;pointer-events:none;
  background:radial-gradient(circle,rgba(240,117,33,.16) 0%,rgba(240,117,33,0) 62%);
}
.hero-vis{position:relative;}
.hero-vis svg{width:100%;height:auto;display:block;overflow:visible;}
.hero-vis .vcap{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line-d);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);
}
.hero-vis .vcap .a{color:#5E5C5A;}
.hero-vis .vcap .s1{color:var(--teal);}
.hero-vis .vcap .s2{color:var(--gold);}
.hero-vis .vcap .s3{color:var(--orange);}
.hero-vis .vcap .s4{color:#fff;}

/* Drifting field nodes and the flow along the connectors */
@keyframes nodeglow{
  0%,100%{opacity:.35;}
  50%{opacity:1;}
}
@keyframes dash{ to{ stroke-dashoffset:-220; } }
.hero-vis .fnode{animation:nodeglow 5.2s ease-in-out infinite;}
.hero-vis .flowline{stroke-dasharray:5 13;animation:dash 9s linear infinite;}

/* ══════════════════ 2 · THE BLIND SPOT ══════════════════ */
.blind{background:var(--offwhite);padding:104px 0 108px;}
.blind h2 em{color:var(--orange-ink);}
.blind-grid{display:grid;grid-template-columns:1.38fr 1fr;gap:0 64px;align-items:start;margin-top:12px;}
.blind .rcol{padding-top:14px;}
.blind .rcol .lede{max-width:none;}
.blind .close{
  margin-top:46px;padding-top:26px;border-top:2px solid var(--orange);
  font-size:clamp(21px,1.75vw,27px);font-weight:700;line-height:1.4;
  letter-spacing:-0.015em;text-transform:uppercase;color:var(--black);
}

/* Visibility bands — what the room can see vs what it cannot */
.bands{margin-top:54px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.band{background:var(--paper);border:1px solid var(--line-l);border-left:3px solid;padding:30px 32px 32px;}
.band .k{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-l);
}
.band .h{
  font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--black);margin-top:12px;
}
.band ul{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;}
.band li{
  font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:var(--body-l);background:var(--offwhite);
  border:1px solid var(--line-l);padding:7px 13px;line-height:1.4;
}
.band.unseen{background:#111113;border-color:rgba(247,241,235,.14);}
.band.unseen .k{color:var(--muted-d);}
.band.unseen .h{color:#fff;}
.band.unseen li{color:var(--body-d);background:rgba(247,241,235,.05);border-color:var(--line-d);}

/* ══════════════════ 3 · GROUND TRUTH ══════════════════ */
.ground{background:var(--paper);padding:100px 0 106px;border-top:1px solid var(--line-l);}
.ground h2 em{color:var(--teal-ink);}
.qgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-l);border-left:1px solid var(--line-l);
  margin-top:56px;
}
.qq{
  position:relative;padding:30px 28px 34px;
  border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  transition:background-color .24s;
}
.qq:hover{background:var(--offwhite);}
.qq .nd{width:10px;height:10px;border-radius:50%;display:block;}
.qq .k{
  font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--black);margin-top:18px;
}
.qq .s{font-size:14.5px;line-height:1.75;color:var(--body-l);margin-top:12px;}
.ground .note{
  margin-top:26px;font-size:12.5px;line-height:1.9;letter-spacing:.03em;
  color:var(--muted-l);max-width:900px;
}

/* ══════════════════ 4 · NOT ANOTHER POLL ══════════════════ */
.layers{position:relative;background:var(--black);padding:100px 0 108px;overflow:hidden;}
.layers h2 em{color:var(--teal);}
.laystack{margin-top:56px;border-top:1px solid var(--line-d);}
.lay{
  display:grid;grid-template-columns:250px 1fr 300px;gap:0 40px;align-items:center;
  padding:26px 0 27px;border-bottom:1px solid var(--line-d);
  transition:background-color .24s;
}
.lay:hover{background:#111113;}
.lay .m{
  display:flex;align-items:center;gap:13px;
  font-size:14px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff;
}
.lay .m .nd{width:9px;height:9px;border-radius:50%;flex:0 0 9px;}
.lay .d{font-size:15px;line-height:1.7;color:var(--body-d);}
.lay .t{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);text-align:right;
}
.lay.vfo{background:rgba(240,117,33,.07);border-left:3px solid var(--orange);padding-left:24px;margin-left:-3px;}
.lay.vfo:hover{background:rgba(240,117,33,.11);}
.lay.vfo .t{color:var(--orange);}
.layers .stack-note{
  margin-top:30px;font-size:14px;line-height:1.85;color:var(--body-d);max-width:820px;
}
.layers .stack-note strong{color:#fff;font-weight:600;}
.layers .caveat{
  margin-top:22px;font-size:12.5px;line-height:1.9;letter-spacing:.03em;
  color:var(--muted-d);max-width:900px;
}

/* ══════════════════ 5 · AN EXTENSION OF YOUR TEAM ══════════════════ */
.partner{background:var(--offwhite);padding:100px 0 104px;}
.partner h2 em{color:var(--teal-ink);}
.prow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0 20px;align-items:stretch;margin-top:56px;}
.pcard{background:var(--paper);border:1px solid var(--line-l);border-top:3px solid;padding:30px 30px 32px;}
.pcard .k{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-l);
}
.pcard .h{
  font-size:19px;font-weight:700;line-height:1.28;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--black);margin-top:12px;
}
.pcard .s{font-size:14.5px;line-height:1.78;color:var(--body-l);margin-top:14px;}
.pjoin{
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:#B9B1A8;padding-top:52px;
}
.partner .pstate{
  margin-top:44px;padding:32px 36px;background:var(--paper);
  border:1px solid var(--line-l);border-left:3px solid var(--orange);
}
.partner .pstate .h{
  font-size:clamp(20px,1.7vw,26px);font-weight:700;line-height:1.35;
  letter-spacing:-0.015em;text-transform:uppercase;color:var(--black);
}
.partner .pstate .s{font-size:15.5px;line-height:1.8;color:var(--body-l);margin-top:16px;max-width:900px;}
.partner .ploop{
  margin-top:40px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;
  padding:26px 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
}
.partner .ploop .s{
  font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.partner .ploop .s .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.partner .ploop .arw{color:#A9A39B;font-weight:700;font-size:16px;}

/* ══════════════════ 6 · FROM FIELD TO DECISION ══════════════════ */
.flow{position:relative;background:var(--paper);padding:100px 0 106px;border-top:1px solid var(--line-l);}
.flow h2 em{color:var(--orange-ink);}
.stagegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px;}
.stage{
  position:relative;background:var(--offwhite);border:1px solid var(--line-l);border-top:3px solid;
  padding:32px 32px 34px;transition:transform .26s,box-shadow .26s;
}
.stage:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(9,9,9,.10);}
.stage .n{
  display:flex;align-items:center;gap:11px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.stage .n .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 9px;}
.stage h3{
  font-size:23px;font-weight:700;line-height:1.15;letter-spacing:-0.015em;
  text-transform:uppercase;color:var(--black);margin-top:16px;
}
.stage .s{font-size:14.5px;line-height:1.78;color:var(--body-l);margin-top:14px;}
.stage .arrow{
  position:absolute;right:-15px;top:50%;transform:translateY(-50%);
  font-size:17px;color:#B9B1A8;z-index:2;
}
.stage:nth-child(3) .arrow,.stage:nth-child(6) .arrow{display:none;}

/* ══════════════════ 7 · POWERED BY VFO³ ══════════════════ */
.osys{position:relative;background:var(--offwhite);padding:96px 0 100px;overflow:hidden;}
.osys-mark{position:absolute;top:50%;right:-90px;transform:translateY(-50%);width:440px;opacity:.06;pointer-events:none;}
.osys-in{position:relative;}
.osys h2 em{color:var(--teal-ink);}
.sequence{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:50px;
  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;}
.osys .loopback{
  margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-l);
}
.osys .loopback .rline{height:1px;width:120px;background:var(--line-l);flex:0 0 120px;}
.osys .loopback .n{font-weight:500;letter-spacing:.04em;text-transform:none;font-size:14px;}
.osys-cta{margin-top:38px;}

/* ══════════════════ 8 · DATA CENTERS + CRITICAL INFRASTRUCTURE ══════════════════ */
.infra{background:var(--paper);padding:100px 0 106px;border-top:1px solid var(--line-l);}
.infra h2 em{color:var(--orange-ink);}
.infra .sectors{
  margin-top:44px;padding:22px 0;display:flex;flex-wrap:wrap;gap:10px;
  border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
}
.infra .sectors span{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body-l);border:1px solid var(--line-l);padding:9px 15px;line-height:1.3;
}
.ucgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
.uc{
  position:relative;background:var(--offwhite);border:1px solid var(--line-l);
  padding:28px 26px 30px;transition:transform .24s,box-shadow .24s,background-color .24s;
}
.uc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(9,9,9,.09);background:var(--paper);}
.uc .nd{width:9px;height:9px;border-radius:50%;display:block;}
.uc h3{
  font-size:14px;font-weight:700;letter-spacing:.14em;line-height:1.4;
  text-transform:uppercase;color:var(--black);margin-top:16px;
}
.uc p{font-size:14px;line-height:1.75;color:var(--body-l);margin-top:12px;}
.infra .guard{
  margin-top:40px;padding:26px 30px;background:var(--offwhite);
  border-left:3px solid var(--teal);font-size:14.5px;line-height:1.85;color:var(--body-l);
}
.infra .guard strong{color:var(--black);font-weight:600;}

/* ══════════════════ 9 · COMMUNITY PARTICIPATION ══════════════════ */
.cpart{position:relative;background:var(--black);padding:100px 0 108px;overflow:hidden;}
.cpart h2 em{color:var(--gold);}
.cpart-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0 68px;align-items:start;margin-top:54px;}
.cpart .lead{font-size:16.5px;line-height:1.85;color:var(--body-d);}
.cpart .lead + .lead{margin-top:16px;}
.cpart .lead strong{color:#fff;font-weight:600;}
.standard{
  margin-top:32px;padding:28px 30px;background:rgba(15,168,185,.08);
  border-left:3px solid var(--teal);
}
.standard .k{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
}
.standard p{font-size:15px;line-height:1.85;color:var(--body-d);margin-top:14px;}
.standard p strong{color:#fff;font-weight:600;}
.plist{background:var(--card-d);border:1px solid var(--line-d);padding:32px 34px 34px;}
.plist .k{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-d);padding-bottom:18px;border-bottom:1px solid var(--line-d);
}
.plist ul{margin-top:6px;}
.plist li{
  display:flex;gap:14px;align-items:flex-start;
  padding:13px 0;border-bottom:1px solid var(--line-d);
  font-size:14.5px;line-height:1.65;color:var(--body-d);
}
.plist li:last-child{border-bottom:none;}
.plist li .nd{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:9px;background:var(--gold);}
.moments{
  margin-top:52px;padding-top:36px;border-top:1px solid var(--line-d);
  display:grid;grid-template-columns:1fr 1.35fr;gap:0 68px;align-items:start;
}
.moments h3{
  font-size:clamp(22px,1.85vw,28px);font-weight:700;line-height:1.2;
  letter-spacing:-0.02em;text-transform:uppercase;color:#fff;
}
.moments .s{font-size:15px;line-height:1.8;color:var(--body-d);margin-top:16px;}
.mchips{display:flex;flex-wrap:wrap;gap:10px;}
.mchips span{
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body-d);border:1px solid var(--line-d);padding:9px 14px;line-height:1.3;
}

/* ══════════════════ 10 · WHAT VFO DELIVERS ══════════════════ */
.deliver{background:var(--offwhite);padding:100px 0 106px;}
.deliver h2 em{color:var(--orange-ink);}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
.dcol{background:var(--paper);border:1px solid var(--line-l);border-top:3px solid;padding:30px 30px 32px;}
.dcol .k{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-l);
}
.dcol .h{
  font-size:18px;font-weight:700;line-height:1.28;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--black);margin-top:12px;
}
.dcol ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-l);}
.dcol li{
  display:flex;gap:12px;align-items:flex-start;padding:8px 0;
  font-size:14.5px;line-height:1.65;color:var(--body-l);
}
.dcol li .nd{width:6px;height:6px;border-radius:50%;flex:0 0 6px;margin-top:9px;}
.deliver .dnote{
  margin-top:36px;font-size:14px;line-height:1.85;color:var(--body-l);max-width:940px;
  padding-left:20px;border-left:2px solid var(--line-l);
}
.deliver .dnote strong{color:var(--black);font-weight:600;}

/* ══════════════════ 11 · PROOF ══════════════════ */
.wall{position:relative;background:var(--black);padding:100px 0 106px;overflow:hidden;}
.wall-mark{position:absolute;top:-70px;right:-120px;width:420px;opacity:.045;pointer-events:none;}
.wall-in{position:relative;}
.wall h2 em{color:var(--gold);}
.wallgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-d);border-left:1px solid var(--line-d);
  margin-top:56px;
}
.wp{
  position:relative;padding:32px 30px 34px;
  border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  transition:background-color .24s;
}
.wp:hover{background:#121214;}
.wp .v{
  font-size:clamp(28px,2.5vw,36px);font-weight:700;line-height:1.05;letter-spacing:-0.035em;
  text-transform:uppercase;
}
.wp .v.sm{font-size:clamp(21px,1.8vw,26px);letter-spacing:-0.02em;line-height:1.15;}
.wp .l{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-top:14px;line-height:1.75;min-height:40px;
}
.wp .c{
  font-size:14px;line-height:1.75;color:var(--body-d);margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-d);
}
.wall .note{
  margin-top:26px;font-size:12.5px;line-height:1.9;letter-spacing:.03em;color:var(--muted-d);
  max-width:940px;
}

/* ══════════════════ 12 · QUALITY AT SCALE ══════════════════ */
.qas{background:var(--offwhite);padding:100px 0 104px;}
.qas h2 em{color:var(--orange-ink);}
.qasgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;align-items:start;margin-top:54px;}
/* The statement tracks the nine controls as they scroll past. */
.qasgrid > .qas-state{position:sticky;top:128px;}
.controls{border-top:1px solid var(--line-l);}
.ctl{
  display:grid;grid-template-columns:34px 1fr;gap:0 18px;align-items:start;
  padding:19px 0;border-bottom:1px solid var(--line-l);
}
.ctl .n{
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted-l);padding-top:3px;
}
.ctl .h{
  font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--black);
}
.ctl .s{font-size:14.5px;line-height:1.7;color:var(--body-l);margin-top:6px;}
.qas .statement{
  margin-top:8px;padding:36px 38px;background:var(--black);border-left:3px solid var(--orange);
}
.qas .statement p{font-size:16px;line-height:1.85;color:var(--body-d);}
.qas .statement p strong{color:#fff;font-weight:600;}
.qas .statement p + p{margin-top:16px;}
.qas .stamp{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line-d);
  font-size:clamp(26px,2.3vw,34px);font-weight:700;line-height:1.1;
  letter-spacing:-0.03em;text-transform:uppercase;color:#fff;
}
.qas .stamp em{color:var(--orange);}

/* ══════════════════ CLIENT PROOF MOMENTS ══════════════════
   Four approved client testimonials, distributed through the page at the
   point each one is most persuasive. Four DELIBERATELY DIFFERENT treatments —
   they belong to the same site but must not read as four instances of one
   component. Do not consolidate them back into a single testimonial block.

     A · .cons   Consequence proof   — dark, dramatic          (Call Them Earlier)
     B · .endo   Credibility proof   — executive split         (Corporate Infrastructure)
     C · .valid  Validation proof    — light editorial deck    (Economic Development)
     D · .outc   Outcome proof       — mini results story      (We Won It at the Doors)

   CLIENT VOICE: every quoted line lives inside <blockquote> with visible
   attribution. Never lift these statements into VFO's own voice. */

/* ── A · CONSEQUENCE PROOF — dark ── */
.cons{position:relative;background:var(--black);padding:94px 0 98px;overflow:hidden;}
.cons-glow{
  position:absolute;top:-34%;left:-10%;width:760px;height:760px;pointer-events:none;
  background:radial-gradient(circle,rgba(248,174,50,.13) 0%,rgba(248,174,50,0) 62%);
}
.cons-in{position:relative;display:grid;grid-template-columns:1.06fr 1fr;gap:0 68px;align-items:start;margin:0;}
.cons .stmt{
  font-size:clamp(30px,2.95vw,44px);font-weight:700;line-height:1.08;letter-spacing:-0.03em;
  text-transform:uppercase;color:#fff;margin-top:26px;
}
.cons .stmt em{color:var(--gold);}
.cons blockquote{margin:0;}
.cons .rule{display:block;width:64px;height:2px;background:var(--gold);margin-top:34px;}
.cons .body p{font-size:16.5px;line-height:1.88;color:var(--body-d);max-width:560px;}
.cons .body p + p{margin-top:18px;}
.cons .body p.punch{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line-d);max-width:none;
  font-size:clamp(21px,1.8vw,27px);font-weight:700;line-height:1.24;letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--gold);
}
.cons figcaption{
  margin-top:26px;font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#fff;
}

/* ── B · CREDIBILITY PROOF — executive split ── */
.endo{background:var(--paper);padding:92px 0 96px;border-top:1px solid var(--line-l);}
.endo-in{display:grid;grid-template-columns:.94fr 1.06fr;gap:0 72px;align-items:start;margin:0;}
/* The pull quote travels with the testimonial. top clears the 96px sticky nav. */
.endo .rail{position:sticky;top:118px;}
.endo .mark{
  font-size:96px;font-weight:800;line-height:.6;letter-spacing:-0.04em;
  color:var(--orange);opacity:.24;
}
.endo .pull{
  font-size:clamp(25px,2.35vw,35px);font-weight:700;line-height:1.16;letter-spacing:-0.028em;
  text-transform:uppercase;color:var(--black);margin-top:26px;
}
.endo .pull em{color:var(--orange-ink);}
.endo .k{
  margin-top:30px;padding-top:20px;border-top:2px solid var(--orange);
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-l);line-height:1.85;
}
.endo blockquote{margin:0;}
.endo blockquote p{font-size:16.5px;line-height:1.88;color:var(--body-l);max-width:610px;}
.endo blockquote p + p{margin-top:19px;}
.endo figcaption{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--line-l);max-width:610px;
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--black);
}

/* ── C · VALIDATION PROOF — light editorial deck ── */
.valid{background:var(--offwhite);padding:90px 0 94px;}
.valid figure{margin:0;}
.valid .deck{padding-bottom:34px;border-bottom:1px solid var(--line-l);}
.valid .stmt{
  font-size:clamp(25px,2.4vw,37px);font-weight:700;line-height:1.14;letter-spacing:-0.028em;
  text-transform:uppercase;color:var(--teal-ink);max-width:1040px;margin-top:22px;
}
.valid .body{margin:36px 0 0;columns:2;column-gap:58px;max-width:1060px;}
.valid .body p{
  font-size:16px;line-height:1.86;color:var(--body-l);
  break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:17px;
}
.valid figcaption{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line-l);
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--black);
}

/* ── D · OUTCOME PROOF — mini results story ──
   The headline is the client's own sentence, in quotation marks, with the
   attribution directly beneath it. It is never presented as a VFO claim. */
.outc{background:var(--paper);padding:92px 0 96px;border-top:1px solid var(--line-l);}
.outc figure{margin:0;}
.outc .hd{display:grid;grid-template-columns:1.16fr 1fr;gap:0 64px;align-items:end;}
.outc .claim{
  font-size:clamp(30px,3.05vw,46px);font-weight:700;line-height:1.06;letter-spacing:-0.032em;
  text-transform:uppercase;color:var(--black);margin:20px 0 0;
}
.outc .claim .qk{color:var(--red);}
.outc .src{
  padding-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-l);line-height:1.9;
}
.outc .src strong{display:block;color:var(--red-ink);font-weight:700;letter-spacing:.22em;}
.outc .beats{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:50px;
  border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
}
.outc .beat{padding:30px 34px 32px;border-right:1px solid var(--line-l);}
.outc .beat:first-child{padding-left:0;}
.outc .beat:last-child{border-right:none;padding-right:0;}
.outc .beat .lbl{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red-ink);
}
.outc .beat blockquote{margin:15px 0 0;}
.outc .beat blockquote p{font-size:15px;line-height:1.8;color:var(--body-l);}
.outc .beat blockquote p + p{margin-top:14px;}
.outc .close{margin-top:34px;display:grid;grid-template-columns:1.16fr 1fr;gap:0 64px;align-items:start;}
.outc .close blockquote{margin:0;}
.outc .close blockquote p{font-size:16.5px;line-height:1.85;color:var(--body-l);max-width:640px;}
.outc figcaption{
  padding-top:18px;border-top:1px solid var(--line-l);
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--black);
}

/* ══════════════════ CONVERSION BANDS ══════════════════
   One dominant action site-wide on this page: BOOK A STRATEGY CALL.
   Five variants so the repeated ask never reads as the same widget stamped
   down the page. Keep them compact — these are conversion moments, not
   sections. Do not add a competing primary button to any of them. */
.cband .h{font-weight:700;text-transform:uppercase;letter-spacing:-0.025em;line-height:1.12;}
.cband p{font-size:16px;line-height:1.8;}
.cband .act{margin-top:24px;}

/* v1 · sand split */
.cband--sand{background:var(--offwhite);padding:58px 0 62px;border-bottom:1px solid var(--line-l);}
.cband--sand .in{display:grid;grid-template-columns:.86fr 1.14fr;gap:0 60px;align-items:center;}
.cband--sand .h{font-size:clamp(25px,2.25vw,33px);color:var(--black);}
.cband--sand .h em{color:var(--orange-ink);}
.cband--sand p{color:var(--body-l);max-width:660px;}
.cband--sand .act{margin-top:26px;}

/* v2 · dark inline strip */
.cband--strip{background:var(--black);padding:46px 0 48px;}
.cband--strip .in{display:flex;align-items:center;justify-content:space-between;gap:36px 48px;flex-wrap:wrap;}
.cband--strip .txt{flex:1 1 520px;}
.cband--strip .h{font-size:clamp(21px,1.75vw,27px);color:#fff;}
.cband--strip .h em{color:var(--orange);}
.cband--strip p{color:var(--body-d);max-width:640px;margin-top:13px;font-size:15px;line-height:1.78;}
.cband--strip .act{margin-top:0;flex:0 0 auto;}

/* v3 · centered focus — the strongest mid-page conversion moment */
.cband--focus{background:var(--offwhite);padding:80px 0 82px;border-top:1px solid var(--line-l);text-align:center;}
.cband--focus .h{font-size:clamp(29px,2.85vw,41px);color:var(--black);}
.cband--focus .h em{color:var(--red);}
.cband--focus p{color:var(--body-l);max-width:700px;margin:20px auto 0;}
.cband--focus .act{margin-top:34px;}
.cband--focus .alt{
  margin-top:28px;font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-l);
}
.cband--focus .alt a{color:var(--black);border-bottom:1px solid rgba(9,9,9,.32);padding-bottom:2px;}
.cband--focus .alt a:hover{border-bottom-color:var(--red);}

/* v4 · paper split, oversized headline */
.cband--split{background:var(--paper);padding:68px 0 72px;}
.cband--split .in{display:grid;grid-template-columns:1.08fr 1fr;gap:0 64px;align-items:center;}
.cband--split .h{font-size:clamp(26px,2.45vw,36px);color:var(--black);}
.cband--split .h em{color:var(--orange-ink);}
.cband--split p{color:var(--body-l);}

/* v5 · ruled ledger */
.cband--ruled{background:var(--paper);padding:56px 0 62px;}
.cband--ruled .in{
  border-top:3px solid var(--black);padding:32px 0 0;
  display:grid;grid-template-columns:1fr auto;gap:0 56px;align-items:center;
}
.cband--ruled .h{font-size:clamp(22px,1.95vw,29px);color:var(--black);}
.cband--ruled p{color:var(--body-l);max-width:660px;margin-top:14px;font-size:15.5px;}
.cband--ruled .act{margin-top:0;}

/* ══════════════════ RESULTS BRIDGE ══════════════════
   Compact. This is no longer a testimonial section — the client proof is
   distributed through the page. Its only job is to say documented results
   exist and route a visitor who wants more. One outbound link: /results/. */
.rbridge{background:var(--offwhite);padding:74px 0 78px;}
.rbridge-in{display:grid;grid-template-columns:1.05fr 1fr;gap:0 64px;align-items:center;}
.rbridge h2 em{color:var(--red);}
.rbridge .lede{max-width:none;margin-top:20px;}
.rbridge .act{margin-top:28px;}
.rbridge .conf{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line-l);
  font-size:12.5px;line-height:1.9;letter-spacing:.03em;color:var(--muted-l);max-width:960px;
}

/* ══════════════════ 14 · 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:.40;
  background:var(--map) no-repeat center center;background-size:100% auto;aspect-ratio:1640/959;
}
.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(40px,4.2vw,56px);line-height:1.06;letter-spacing:-0.035em;
  color:#fff;text-transform:uppercase;margin-top:24px;max-width:760px;
}
.final h2 em{color:var(--orange);}
.final p{font-size:17px;line-height:1.8;color:var(--body-d);max-width:600px;margin-top:22px;}
.final .cta{margin-top:40px;}
.final .xlinks{
  margin-top:46px;padding-top:26px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:12px 30px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);
}
.final .xlinks a{transition:color .2s;}
.final .xlinks a:hover{color:#fff;}

/* ══════════════════ 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;}
  .osys-mark{width:380px;right:-110px;}
  .hero-in{gap:0 48px;}
  .lay{grid-template-columns:220px 1fr 250px;gap:0 28px;}
}
@media (max-width:1180px){
  .sec-head{grid-template-columns:1fr;gap:26px;}
  .sec-head .head-r{padding-bottom:0;}
  .hero-in{grid-template-columns:1fr;gap:56px 0;padding-top:76px;}
  .hero-vis{order:2;}
  .blind-grid{grid-template-columns:1fr;gap:30px;}
  .blind .rcol{padding-top:0;}
  .bands{grid-template-columns:1fr;}
  .qgrid{grid-template-columns:repeat(2,1fr);}
  .lay{grid-template-columns:1fr;gap:10px;padding:22px 0;}
  .lay .t{text-align:left;}
  .prow{grid-template-columns:1fr;gap:16px;}
  .pjoin{padding-top:0;transform:rotate(90deg);}
  .stagegrid{grid-template-columns:repeat(2,1fr);}
  .stage .arrow{display:none;}
  .ucgrid{grid-template-columns:repeat(2,1fr);}
  .cpart-grid{grid-template-columns:1fr;gap:36px;}
  .moments{grid-template-columns:1fr;gap:26px;}
  .dgrid{grid-template-columns:1fr;}
  .wallgrid{grid-template-columns:repeat(2,1fr);}
  .qasgrid{grid-template-columns:1fr;gap:36px;}
  /* Proof moments and conversion bands collapse to a single column. */
  .cons-in{grid-template-columns:1fr;gap:34px 0;}
  .cons .body p{max-width:none;}
  .endo-in{grid-template-columns:1fr;gap:36px 0;}
  .endo .rail{position:static;}
  .endo blockquote p,.endo figcaption{max-width:none;}
  .valid .body{columns:1;}
  .outc .hd,.outc .close{grid-template-columns:1fr;gap:24px 0;}
  .outc .src{padding-bottom:0;}
  .outc .beats{grid-template-columns:1fr;}
  .outc .beat{border-right:none;border-bottom:1px solid var(--line-l);padding-left:0;padding-right:0;}
  .outc .beat:last-child{border-bottom:none;}
  .cband--sand .in,.cband--split .in{grid-template-columns:1fr;gap:26px 0;}
  .cband--ruled .in{grid-template-columns:1fr;gap:26px 0;}
  .cband--ruled .act{margin-top:4px;}
  .rbridge-in{grid-template-columns:1fr;gap:26px 0;}
}
@media (max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr;}
  .nav-links a:not(.btn){display:none;}
  .fdescriptor{white-space:normal;}
  .qgrid{grid-template-columns:1fr;}
  .ucgrid{grid-template-columns:1fr;}
  .wallgrid{grid-template-columns:1fr;}
  .stagegrid{grid-template-columns:1fr;}
}

/* ══════════════════ 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;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   WIX IFRAME COMPATIBILITY — TECHNICAL ONLY
   ═══════════════════════════════════════════════════════════════════════════
   Nothing in this block changes the approved design. Every rule exists to make
   the page behave correctly inside a cross-origin Wix HTML/Embed iframe.

   overflow-x:clip is used INSTEAD OF hidden on purpose: hidden turns the root
   into a scroll container and breaks sticky navigation in Chrome and Safari.
   clip does not.
   ═══════════════════════════════════════════════════════════════════════════ */
html{background:var(--black);overflow-x:clip;}
body{overflow-x:clip;max-width:100%;min-height:100vh;}

/* FULL-HEIGHT embed mode has no internal scroll range, so the sticky nav has
   nothing to stick to. The script detects that case and adds .vfo-embed-tall;
   the bar then renders statically at the top instead of appearing frozen. */
html.vfo-embed-tall .nav{position:static;}
html.vfo-embed-tall .endo .rail{position:static;}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATED COMMUNITY INTELLIGENCE MAP — APPROVED HERO VISUAL
   ═══════════════════════════════════════════════════════════════════════════
   APPROVED PRODUCTION HERO VISUAL. Scoped entirely to the hero's visual
   column: it adds nothing to, and overrides nothing in, the approved page
   above or below the hero.

   Everything here is SVG + CSS transitions with a small phase clock in JS.
   No animation library, no canvas, no video, no GIF, no external asset.

   NOTHING IN THE VISUAL IS REAL DATA. Issue labels, signal categories and the
   executive read-out are generic examples of the KIND of intelligence the
   service produces. There are no percentages, counts or client references.
   ═══════════════════════════════════════════════════════════════════════════ */

.viz{
  --muted:#8C8A88;
  --neutral:#4E4B48;
  width:100%;height:auto;display:block;overflow:visible;
}
.viz text{font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;}

/* ── Depth · very restrained parallax. Interaction is never required. ── */
.viz .l-geo,.viz .l-hh,.viz .l-clu,.viz .l-route{transform-origin:310px 208px;}
.viz .l-geo   {transform:translate3d(calc(var(--px,0) * -3px),calc(var(--py,0) * -3px),0) scale(var(--mz,1));}
.viz .l-clu   {transform:translate3d(calc(var(--px,0) * -6px),calc(var(--py,0) * -6px),0) scale(var(--mz,1));}
.viz .l-hh    {transform:translate3d(calc(var(--px,0) * -8px),calc(var(--py,0) * -8px),0) scale(var(--mz,1));}
.viz .l-route {transform:translate3d(calc(var(--px,0) * -10px),calc(var(--py,0) * -10px),0) scale(var(--mz,1));}
.viz .l-chip  {transform:translate3d(calc(var(--px,0) * -12px),calc(var(--py,0) * -12px),0);}
.viz .l-intel {transform:translate3d(calc(var(--px,0) * -4px),calc(var(--py,0) * -4px),0);}
.viz .l-geo,.viz .l-clu,.viz .l-hh,.viz .l-route,.viz .l-chip,.viz .l-intel{
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1);
}

/* ── Households · unknown → engaged → categorised → shifted ────────────── */
.viz .hh{
  fill:var(--neutral);opacity:.40;
  transition:fill 1s ease var(--d),opacity 1s ease var(--d);
}
.viz.ph-conv  .hh{fill:var(--teal);opacity:.88;}
.viz.ph-sig   .hh[data-cat="gold"]{fill:var(--gold);}
.viz.ph-sig   .hh[data-cat="red"]{fill:var(--red);}
.viz.ph-sig   .hh[data-cat="orange"]{fill:var(--orange);}
.viz.ph-move  .hh[data-shift="1"][data-cat2="gold"]{fill:var(--gold);}
.viz.ph-move  .hh[data-shift="1"][data-cat2="teal"]{fill:var(--teal);}
.viz.ph-move  .hh[data-shift="1"][data-cat2="red"]{fill:var(--red);}
.viz.ph-move  .hh[data-shift="1"][data-cat2="orange"]{fill:var(--orange);}
/* Soft cross-fade back to the unknown state — no hard reset. */
.viz.ph-fade .hh{fill:var(--neutral);opacity:.40;transition-delay:0s;transition-duration:1.1s;}

/* ── Field routes · trained teams moving through the neighbourhoods ────── */
.viz .route{stroke-dasharray:1400;stroke-dashoffset:1400;opacity:0;transition:opacity .6s ease var(--d);}
.viz.ph-deploy .route{opacity:1;animation:vizDraw 2.8s cubic-bezier(.33,.72,.31,1) forwards var(--d);}
.viz.ph-conv   .route{stroke-dasharray:4 15;stroke-dashoffset:0;animation:vizFlow 7s linear infinite var(--d);}
.viz.ph-pat    .route{stroke-opacity:.2;}
.viz.ph-int    .route{stroke-opacity:.12;}
.viz.ph-fade   .route{opacity:0;}
@keyframes vizDraw{to{stroke-dashoffset:0;}}
@keyframes vizFlow{to{stroke-dashoffset:-190;}}

.viz .fdot{fill:#fff;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 5px rgba(15,168,185,.9));}
.viz.ph-deploy .fdot,.viz.ph-conv .fdot,.viz.ph-sig .fdot{opacity:.95;}
.viz.ph-pat .fdot{opacity:0;}

/* ── Issue clusters · geographic patterns becoming visible ─────────────── */
.viz .clu{opacity:0;transition:opacity 1s ease var(--d);}
.viz.ph-pat .clu{opacity:1;}
.viz.ph-fade .clu{opacity:0;transition-delay:0s;}
.viz .clu .bloom{animation:vizBreathe 9s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.viz .clu .ring{animation:vizSpin 34s linear infinite;transform-box:fill-box;transform-origin:center;}
@keyframes vizBreathe{0%,100%{transform:scale(.94);opacity:.85;}50%{transform:scale(1.06);opacity:1;}}
@keyframes vizSpin{to{transform:rotate(360deg);}}
.viz .clab{
  font-size:12.5px;font-weight:700;letter-spacing:1.7px;fill:#fff;fill-opacity:.9;
  transition:opacity .7s;
  /* keeps a label legible where it crosses household nodes */
  paint-order:stroke;stroke:#090909;stroke-width:3.5px;stroke-linejoin:round;stroke-opacity:.85;
}
.viz .clab.b{opacity:0;}
.viz.cyc-b .clab.a{opacity:0;}
.viz.cyc-b .clab.b{opacity:1;}

/* ── Micro-labels · restrained, a few at a time ────────────────────────── */
.viz .chip{opacity:0;transform:translateY(5px);transition:opacity .55s ease,transform .55s ease;}
.viz .ctext{font-size:11px;font-weight:700;letter-spacing:1.5px;fill:#fff;fill-opacity:.9;}
.viz .ctext.big{font-size:14px;letter-spacing:2.2px;fill:var(--gold);}
.viz.ph-start  #c-limited{opacity:1;transform:none;}
.viz.ph-deploy #c-limited{opacity:0;transform:translateY(-4px);}
.viz.ph-conv   #c-conv{opacity:1;transform:none;transition-delay:1.5s;}
.viz.ph-sig    #c-conv{opacity:0;}
.viz.ph-sig    #c-qa{opacity:1;transform:none;transition-delay:1.1s;}
.viz.ph-pat    #c-qa{opacity:0;}
.viz.ph-move   #c-move{opacity:1;transform:none;transition-delay:.4s;}
.viz.ph-int    #c-move{opacity:0;}
.viz.ph-truth  #c-truth{opacity:1;transform:none;transition-delay:.2s;}
.viz.ph-fade   .chip{opacity:0;transition-delay:0s;}

/* ── Intelligence layer · the signal coming back ───────────────────────── */
.viz .l-intel{opacity:.26;transition:opacity 1s ease;}
.viz.ph-int .l-intel,.viz.ph-truth .l-intel{opacity:1;}
.viz .flow{stroke-dasharray:3 11;opacity:0;transition:opacity .7s ease var(--d);}
.viz.ph-int .flow{opacity:1;animation:vizFlow2 3.4s linear infinite var(--d);}
@keyframes vizFlow2{to{stroke-dashoffset:-140;}}
.viz .sdot{fill:#fff;opacity:0;transition:opacity .5s;}
.viz.ph-int .sdot,.viz.ph-truth .sdot{opacity:.9;}
.viz .ir{opacity:.35;}
.viz.ph-int .ir,.viz.ph-truth .ir{animation:vizRing 3.8s ease-out infinite var(--d);transform-box:fill-box;transform-origin:center;}
@keyframes vizRing{0%{transform:scale(.62);opacity:.55;}70%{transform:scale(1.12);opacity:0;}100%{opacity:0;}}
.viz .core{transition:r .8s ease;}
.viz.ph-int .core,.viz.ph-truth .core{r:10;}
.viz .ilab{font-size:11px;font-weight:700;letter-spacing:2.2px;fill:var(--orange);fill-opacity:.85;
  paint-order:stroke;stroke:#090909;stroke-width:3px;stroke-linejoin:round;stroke-opacity:.8;}

.viz .readout .ro{opacity:0;transform:translateY(7px);transition:opacity .6s ease var(--d),transform .6s ease var(--d);}
.viz.ph-int .readout .ro,.viz.ph-truth .readout .ro{opacity:1;transform:none;}
.viz .rk{font-size:10.5px;font-weight:700;letter-spacing:1.8px;fill:var(--muted);}
.viz .rv{font-size:15px;font-weight:700;letter-spacing:.2px;fill:#fff;}
.viz.ph-fade .readout .ro{opacity:0;transition-delay:0s;}

/* ── Phase read-out under the visual ──────────────────────────────────── */
.vhead{
  margin-top:20px;padding-top:15px;border-top:1px solid var(--line-d);
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.vhead .vdot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(240,117,33,.55);animation:vizBeat 2.6s ease-out infinite;}
@keyframes vizBeat{0%{box-shadow:0 0 0 0 rgba(240,117,33,.5);}70%{box-shadow:0 0 0 9px rgba(240,117,33,0);}100%{box-shadow:0 0 0 0 rgba(240,117,33,0);}}
.vhead .vlbl{color:#fff;white-space:nowrap;}
.vhead .vtrack{flex:1 1 auto;height:1px;background:var(--line-d);position:relative;min-width:40px;}
.vhead .vtrack i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--orange);opacity:.85;}
.vhead .vrnd{color:var(--muted-d);white-space:nowrap;}
.vnote{
  margin-top:12px;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.8;color:#6E6B67;
}

/* ── Reduced motion · a polished static composed state, no movement ────── */
@media (prefers-reduced-motion:reduce){
  .viz *,.vhead *{animation:none !important;transition:none !important;}
  .viz .l-geo,.viz .l-clu,.viz .l-hh,.viz .l-route,.viz .l-chip,.viz .l-intel{transform:none !important;}
}
.viz.rm *{animation:none !important;transition:none !important;}
.viz.rm .route{stroke-dasharray:4 15;stroke-dashoffset:0;opacity:1;stroke-opacity:.16;}
.viz.rm .fdot,.viz.rm .sdot{opacity:0;}