@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/poppins-latin-300-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/poppins-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/poppins-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/poppins-latin-800-normal.woff2) format('woff2');}
/* ===========================================================================
   VFO HOMEPAGE V4 - WIX IFRAME DEPLOYMENT STYLESHEET
   ===========================================================================
   Everything from here down to the "WIX IFRAME COMPATIBILITY" fence at the
   bottom of this file is the APPROVED V4 homepage stylesheet, unmodified
   except for one asset path: the national map, which was an embedded data
   URI in the review build and is now url(../images/vfo-national-map.jpg).

   Do not edit the approved region. Design changes are out of scope for this
   deployment package.
   =========================================================================== */


/* ══════════════════ 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 all three sections */
  --map:none;
}

/* ══════════════════ 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);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── 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.
   Replaces the old single left-aligned stack that left the right half empty. */
.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;}
.sec-head .head-r .lede + .lede{margin-top:14px;}
.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 ── */
.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-ghost{border-color:rgba(247,241,235,.34);color:var(--offwhite);}
.btn-ghost:hover{border-color:var(--offwhite);background:rgba(247,241,235,.07);}
.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:82px;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%;}
/* The header CTA uses the SAME button system as every primary CTA on the page:
   identical type size, weight, letter-spacing, padding, edge treatment and hover.
   These overrides stop the generic .nav-links a styling from altering it. */
.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;}
.nav-in{height:96px;}

/* ── ABOUT dropdown ─────────────────────────────────────────────────────────
   A restrained two-item disclosure menu. Opens on hover AND on keyboard
   focus; ESC closes; outside click closes. Absolutely positioned, so it
   causes no layout shift, and it paints above page content because .nav is
   already a z-index:100 stacking context. */
.has-sub{position:relative;display:flex;align-items:center;}
.subtoggle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:.06em;
  color:var(--body-d);background:none;border:0;padding:6px 0;cursor:pointer;
  position:relative;line-height:inherit;transition:color .2s;
}
.subtoggle::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .25s;
}
.subtoggle:hover,.has-sub[data-open="true"] .subtoggle{color:#fff;}
.subtoggle:hover::after,.has-sub[data-open="true"] .subtoggle::after{width:100%;}
.subtoggle .caret{
  width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s;flex:0 0 7px;
}
.has-sub[data-open="true"] .subtoggle .caret{transform:rotate(-135deg) translate(-2px,-2px);}

.subm{
  position:absolute;top:100%;left:-20px;z-index:120;min-width:238px;
  margin-top:15px;padding:8px 0;
  background:#0B0B0D;border:1px solid var(--line-d);border-top:2px solid var(--red);
  box-shadow:0 24px 48px rgba(0,0,0,.62);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* Invisible bridge so the pointer can cross the gap from ABOUT to the menu
   without the menu closing. */
.subm::before{content:'';position:absolute;left:0;right:0;top:-15px;height:15px;}
.has-sub[data-open="true"] .subm{opacity:1;visibility:visible;transform:none;}
.subm li{margin:0;}
.subm a{
  display:block;padding:13px 24px;white-space:nowrap;
  font-size:13.5px;font-weight:500;letter-spacing:.06em;color:var(--body-d);
  border-left:2px solid transparent;transition:color .18s,background-color .18s,border-color .18s;
}
.subm a::after{content:none;}
.subm a:hover,.subm a:focus-visible{
  color:#fff;background:rgba(236,27,51,.10);border-left-color:var(--red);
}

/* ══════════════════ 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-map{
  position:absolute;top:-6%;right:-10%;width:74%;pointer-events:none;opacity:.82;
}
.hero-scrim-x{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--black) 30%,rgba(9,9,9,.90) 52%,rgba(9,9,9,.34) 78%,rgba(9,9,9,.62) 100%);
}
.hero-scrim-y{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,9,.42) 0%,rgba(9,9,9,0) 30%,rgba(9,9,9,.92) 84%,var(--black) 100%);
}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:86px var(--pad) 0;}
.hero h1{
  font-size:clamp(40px,3.85vw,56px);
  line-height:1.06;letter-spacing:-0.035em;color:#fff;
  margin-top:24px;max-width:1080px;text-transform:uppercase;
}
.hero h1 em{color:var(--gold);}
.hero .lede{font-size:17px;max-width:640px;margin-top:22px;color:var(--body-d);}
.hero .lede strong{color:#fff;font-weight:600;}
.hero-ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}

/* Restrained node pulse over the map hubs */
.pulses{position:absolute;inset:0;pointer-events:none;}
.pulse{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;}
.pulse::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1px solid currentColor;opacity:0;
  animation:hubpulse 5.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes hubpulse{
  0%{transform:scale(.6);opacity:.55;}
  55%{transform:scale(3.6);opacity:0;}
  100%{transform:scale(3.6);opacity:0;}
}

/* ══════════════════ 2 · PROOF BAR ══════════════════ */
.proof{position:relative;max-width:var(--maxw);margin:44px auto 0;padding:0 var(--pad);}
.proof-line{border-top:1px solid var(--line-d);display:flex;}
.pf{flex:1;padding:26px 30px 0 0;border-right:1px solid var(--line-d);margin-right:30px;}
.pf:last-child{border-right:none;margin-right:0;padding-right:0;}
.pf .v{font-size:36px;font-weight:700;line-height:1;letter-spacing:-0.035em;}
.pf .l{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-d);margin-top:11px;line-height:1.55;
}
.pf .q{
  font-size:11.5px;font-weight:500;letter-spacing:.09em;
  color:#6F6D6B;margin-top:6px;text-transform:uppercase;
}

/* ══════════════════ 3 · FAST ROUTING ══════════════════ */
.routing{position:relative;max-width:var(--maxw);margin:52px auto 0;padding:0 var(--pad) 88px;}
.routing-h{
  font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);
}
.lanegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px;}
.lane{
  position:relative;display:flex;flex-direction:column;
  background:var(--card-d);border:1px solid var(--line-d);border-top:3px solid;
  padding:26px 26px 24px;min-height:250px;
  transition:transform .26s,box-shadow .26s,background-color .26s;
}
.lane .nd{width:11px;height:11px;border-radius:50%;position:relative;flex:0 0 auto;}
.lane .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;}}
.lane h3{
  font-size:17px;font-weight:700;line-height:1.25;letter-spacing:.01em;
  color:#fff;margin-top:18px;text-transform:uppercase;
}
.lane .desc{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:9px;
}
.lane .copy{
  font-size:14.5px;line-height:1.7;color:var(--body-d);margin-top:14px;flex:1;
  opacity:.82;transition:opacity .24s;
}
.lane .go{
  margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  opacity:.72;transition:opacity .24s;line-height:1.45;
}
.lane .track{position:absolute;left:0;bottom:0;height:2px;width:0;transition:width .42s ease;}
.lane:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.6);background:#17171A;}
.lane:hover .copy,.lane:hover .go{opacity:1;}
.lane:hover .track{width:100%;}

/* ══════════════════ 4 · WHY VFO / QUALITY AT SCALE ══════════════════ */
.why{background:var(--offwhite);padding:104px 0;}
.why h2 em{color:var(--red);}
.qas{
  margin-top:52px;background:var(--black);border-left:5px solid var(--red);
  padding:38px 44px;display:flex;align-items:center;gap:44px;
}
.qas .t{
  font-size:29px;font-weight:700;letter-spacing:-0.015em;text-transform:uppercase;
  color:#fff;line-height:1.12;flex:0 0 auto;
}
.qas .t em{color:var(--gold);}
.qas .s{font-size:15.5px;line-height:1.75;color:var(--body-d);max-width:560px;}
.qas .s strong{color:#fff;font-weight:600;}

/* ══════════════════ 5 · VFO³ SYSTEM ══════════════════ */
.system{position:relative;background:var(--black);padding:110px 0 104px;overflow:hidden;}
.system-mark{
  position:absolute;top:50%;right:-90px;transform:translateY(-50%);
  width:520px;opacity:.07;pointer-events:none;
}
.system-in{position:relative;}
.system h2 em{color:var(--teal);}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;position:relative;}
.step{
  position:relative;background:var(--card-d);border:1px solid var(--line-d);
  border-left-width:0;border-top:3px solid;padding:34px 30px 32px;
  display:flex;flex-direction:column;
}
.step:first-child{border-left-width:1px;}
.step .n{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.step .n .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 9px;}
.step h3{
  font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;
  color:#fff;margin-top:16px;line-height:1.15;
}
.step .imp{font-size:14.5px;font-weight:600;line-height:1.6;margin-top:12px;}
.step .s{font-size:14px;line-height:1.72;color:var(--muted-d);margin-top:10px;}
.step .arrow{
  position:absolute;right:-14px;top:50%;transform:translateY(-50%);z-index:3;
  width:28px;height:28px;border-radius:50%;background:var(--offwhite);color:var(--black);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
.loopback{
  display:flex;align-items:center;gap:20px;
  border:1px solid var(--line-d);border-top:none;background:#0E0E10;padding:20px 30px;
}
.loopback .k{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);
  white-space:nowrap;
}
.loopback .rline{flex:1;height:0;border-top:2px dashed rgba(236,27,51,.5);position:relative;}
/* Return arrow. Points LEFT at all times — "better strategy returns to
   strategy" — and travels the dashed line, pausing at each end.
   Rest position (and the prefers-reduced-motion position) is the left end,
   exactly where the approved static design places it. */
.loopback .rarrow{
  position:absolute;left:0;top:-11px;
  width:16px;height:22px;line-height:22px;text-align:center;
  color:var(--red);font-size:13px;
  animation:vfo3-return 4.6s ease-in-out infinite;
}
@keyframes vfo3-return{
  0%,4%     {left:calc(100% - 16px);opacity:.6;}
  12%       {opacity:1;}
  46%,54%   {left:0;opacity:1;}
  88%       {opacity:1;}
  96%,100%  {left:calc(100% - 16px);opacity:.6;}
}
.loopback .n{
  font-size:13px;color:var(--muted-d);white-space:nowrap;letter-spacing:.04em;
}
.sequence{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:44px;
  padding-top:34px;border-top:1px solid var(--line-d);
}
.sequence .s{
  font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;
}
.sequence .s .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.sequence .arw{color:#5A5856;font-weight:700;font-size:15px;}
.system-cta{margin-top:40px;}

/* ══════════════════ 6 · RESULTS ══════════════════ */
.results{background:var(--offwhite);padding:104px 0;}
.results h2 em{color:var(--red);}
.resgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px;}
.brief{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line-l);border-top:3px solid;
  padding:0;transition:transform .26s,box-shadow .26s;
}
.brief:hover{transform:translateY(-5px);box-shadow:0 22px 48px -22px rgba(9,9,9,.30);}
.brief-hd{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 32px;border-bottom:1px solid var(--line-l);background:#FBF8F5;
}
.brief-hd .cat{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;}
.brief-hd .file{
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#9C9893;
}
.brief-bd{padding:34px 32px 30px;display:flex;flex-direction:column;flex:1;}
.brief .result{
  font-size:35px;font-weight:700;line-height:1.06;letter-spacing:-0.035em;
  text-transform:uppercase;color:var(--black);
}
.brief .result em{color:inherit;}
.brief .result.solo{font-size:76px;line-height:1;}
.brief .sub{
  font-size:14px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--body-l);margin-top:12px;line-height:1.5;
}
.brief .copy{font-size:15px;line-height:1.78;color:var(--body-l);margin-top:18px;flex:1;}
.brief .proofline{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:24px;
}
.brief .proofline span{
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body-l);background:var(--offwhite);border:1px solid var(--line-l);padding:7px 12px;
  line-height:1.3;
}
.brief .go{margin-top:26px;align-self:flex-start;}

/* ══════════════════ 7 · NATIONAL CAPACITY ══════════════════ */
.national{position:relative;background:var(--black);padding:104px 0;overflow:hidden;}
.national-map{position:absolute;bottom:-30%;left:-14%;width:66%;pointer-events:none;opacity:.5;}
.national-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,9,9,.42) 0%,rgba(9,9,9,.88) 42%,var(--black) 66%);
}
.national-in{
  position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:72px;
}
.nbox .lede{max-width:none;}
.nphoto{
  flex:0 0 40%;aspect-ratio:4/4.6;position:relative;overflow:hidden;
  border:1px solid var(--line-d);background:#111;
}
.nphoto img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
.nbox{flex:1;}
.national h2 em{color:var(--gold);}
.nchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;}
.nchip{
  border:1px solid #35343A;background:var(--card-d);padding:10px 16px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--body-d);
}

/* ══════════════════ 8 · BUILT BY OPERATORS ══════════════════ */
.operators{background:var(--paper);padding:100px 0;}
/* Two-column composition: copy left, leadership portrait right.
   Replaces the earlier layout where copy sat alone in the left half. */
.op-in{display:grid;grid-template-columns:1fr .84fr;gap:80px;align-items:center;}
.opbody{min-width:0;}
.opbody .lede{max-width:none;}
.operators h2 em{color:var(--red);}

/* Portrait frame — sized for an approved VFO leadership headshot (4:5). */
.opportrait{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border:1px solid #DCD6CC;background:var(--offwhite);
}
.opportrait > img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;}
.opportrait .ph{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#EDE8E1,#EDE8E1 15px,#E5DFD6 15px,#E5DFD6 30px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:34px;
}
.opportrait .ph .t{
  font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:#8B857C;line-height:2.1;
}
.opportrait .ph .mk{width:74px;height:auto;flex:0 0 auto;opacity:.42;}
.opportrait .cap{
  position:absolute;left:0;bottom:0;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 18px;line-height:1;
}

/* Full trademarked lockup. The three-part descriptor must hold ONE line at
   desktop widths — sized and tracked to fit the content column, never wrapped. */
.op-lock{margin-top:40px;padding-top:30px;border-top:1px solid var(--line-l);}
.op-lock img{width:212px;}
.op-lock .n{
  margin-top:16px;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  color:var(--muted-l);line-height:1.6;
}
.op-cta{margin-top:34px;}

/* ══════════════════ 9 · VFO INSIGHTS ══════════════════ */
.insights{background:var(--offwhite);padding:100px 0;}
.insights h2 em{color:var(--teal);}
.insgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;}
.ins{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-l);
  padding:30px 30px 26px;transition:transform .26s,box-shadow .26s;
}
.ins:hover{transform:translateY(-5px);box-shadow:0 22px 48px -22px rgba(9,9,9,.28);}
.ins .k{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-l);}
.ins h4{
  font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;
  margin-top:12px;line-height:1.2;color:var(--black);
}
.ins p{font-size:14.5px;line-height:1.72;color:var(--body-l);margin-top:12px;flex:1;}
.ins .rule{width:34px;height:3px;margin-top:20px;}
.ins-cta{margin-top:40px;}

/* ══════════════════ 10 · FINAL CTA ══════════════════ */
.final{position:relative;background:var(--black);padding:118px 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:560px;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 .flogo{display:inline-block;}
.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);}
.fcontact{
  margin-top:26px;font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-d);line-height:2.15;
}
.fcontact a{transition:color .2s;}
.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;}
  .system-mark{width:420px;right:-120px;}
}
@media (max-width:1180px){
  .lanegrid{grid-template-columns:repeat(2,1fr);}
  .flow{grid-template-columns:repeat(2,1fr);}
  .step{border-left-width:1px;}
  .step .arrow{display:none;}
  .insgrid{grid-template-columns:1fr;}
  .national-in{flex-wrap:wrap;}
  .op-in{grid-template-columns:1fr;gap:48px;}
  .sec-head{grid-template-columns:1fr;gap:26px;}
  .sec-head .head-r{padding-bottom:0;}
  .qas{flex-wrap:wrap;gap:24px;}
}
@media (max-width:900px){
  .resgrid{grid-template-columns:1fr;}
  .proof-line{flex-wrap:wrap;}
  .pf{flex:1 1 44%;margin-bottom:20px;}
  .fgrid{grid-template-columns:1fr 1fr;}
  .nav-links a:not(.btn){display:none;}
}

/* ══════════════════ 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, ADDED FOR THIS DEPLOYMENT
   ===========================================================================
   Nothing in this block changes the approved design. Every rule here exists
   to make the approved page behave correctly inside a cross-origin Wix
   HTML/Embed-Site iframe. Remove this whole block to get back to the exact
   approved stylesheet.
   =========================================================================== */

/* 1 -- Background must fill the ENTIRE embedded document, not just <body>.
        An iframe paints its own root; without this a Wix iframe taller than
        the content shows a white strip below the footer. */
html{
  background:var(--black);
}

/* 2 -- Horizontal overflow guard.
        The approved page has no horizontal overflow at 1280-1920 (verified).
        This is a safety net for the odd fractional widths Wix hands an iframe
        (e.g. 1279.6px) and for the scrollbar-width differences between the
        Wix editor preview and the live site.
        overflow-x:clip is used INSTEAD OF overflow-x:hidden on purpose --
        `hidden` turns the root into a scroll container and breaks the sticky
        navigation in Chrome and Safari. `clip` does not. */
html{
  overflow-x:clip;
}
body{
  overflow-x:clip;
  max-width:100%;
}

/* 3 -- The iframe document is its own scrolling context. Guarantee the body
        can always fill it so short-viewport embeds still paint black. */
body{
  min-height:100vh;
}

/* 4 -- Sticky navigation inside an iframe.
        position:sticky is measured against the iframe's own viewport. That is
        correct and desirable in the recommended VIEWPORT-HEIGHT embed mode.
        In FULL-HEIGHT embed mode the iframe never scrolls internally, so the
        nav cannot stick to the real browser viewport from inside a
        cross-origin frame. js/homepage-wix.js detects that case and adds
        .vfo-embed-tall to <html>; the nav then renders statically at the top
        of the page rather than appearing frozen mid-scroll. */
html.vfo-embed-tall .nav{
  position:static;
}

/* 5 -- NOTE FOR THE IMPLEMENTER
        scrollbar-gutter:stable was trialled here and REMOVED. At exactly
        1280px viewport width the reserved gutter narrows the 1280px content
        column, re-wraps three headlines and makes the page 22px taller than
        the approved master. Reserving the gutter is a layout change, and
        layout changes are out of scope. Do not re-add it. */

/* ===========================================================================
   CAMPAIGNS + FIELD PROGRAMS — page components  (v2)
   Built on the approved VFO homepage stylesheet above. Nothing above this
   fence was altered. Teal is this page's service accent; red, gold and
   orange appear only where the site-wide system already assigns them
   (the VFO3 stages, the PERSUADE / MOBILIZE / WIN lockup, the audit layer
   of the field view, and the footer brand tagline).

   PERMANENT VFO WEBSITE DESIGN RULE — Do not place a vertical multicolour
   red / teal / gold / orange dividing line, or any substitute line, gradient,
   rule or decorative border, between photography and a black background.
   The photograph meets the black environment cleanly. Site-wide.

   NOTE: this page carries no photography and no empty photo frames.
   The hero field-view visualisation replaces the hero photograph.
   =========================================================================== */

:root{ --map:none; }

/* The navigation is sticky at 96px. Without this, in-page anchors land the
   target section underneath it. */
#accountable,#main{scroll-margin-top:112px;}

/* ── Service-colour overrides for shared primitives ───────────────────────── */
.svc .eyebrow .sq{background:var(--teal);}

/* Parent-section marker in the primary navigation. This page is a child of
   Services, so the nav item is highlighted but carries no aria-current. */
.nav-links a.current{color:#fff;}
.nav-links a.current::after{width:100%;background:var(--teal);}

/* Repeating conversion strip. One action, used at four points on the page. */
.ctastrip{
  margin-top:56px;padding-top:30px;border-top:1px solid var(--line-d);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.ctastrip p{
  font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-0.01em;
  color:#fff;max-width:660px;
}
.ctastrip.light{border-top-color:var(--line-l);}
.ctastrip.light p{color:var(--black);}

/* ══════════════════ 1 · HERO ══════════════════ */
.chero{position:relative;background:var(--black);overflow:hidden;padding:0 0 92px;}
.chero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:44px var(--pad) 0;}
.crumb{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);margin-bottom:34px;
}
.crumb a{transition:color .2s;}
.crumb a:hover{color:var(--offwhite);}
.crumb .sep{color:#4A4845;margin:0 10px;}

.hero-grid{display:grid;grid-template-columns:1.04fr 1fr;gap:0 60px;align-items:stretch;}
.hero-copy{min-width:0;}
.chero h1{
  font-size:clamp(33px,2.95vw,43px);
  line-height:1.08;letter-spacing:-0.032em;color:#fff;
  margin-top:20px;text-transform:uppercase;
}
.chero h1 em{color:var(--teal);}
.chero .lede{font-size:16.5px;max-width:none;color:var(--body-d);margin-top:22px;}
.chero .lede strong{color:#fff;font-weight:600;}
.chero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

/* Locked positioning line. The three words sit close enough to read as one
   statement; each carries its VFO brand colour. */
.pmw{margin-top:34px;border-top:3px solid var(--teal);padding-top:18px;display:block;}
.pmw .w{
  font-size:clamp(27px,2.4vw,35px);font-weight:800;text-transform:uppercase;
  letter-spacing:-0.022em;line-height:1.08;display:inline-block;margin-right:11px;
}
.pmw .w:last-child{margin-right:0;}
.pmw .wr{color:var(--red);}
.pmw .wt{color:var(--teal);}
.pmw .wg{color:var(--gold);}

/* ══════════════════ 2 · FAST PROOF ══════════════════ */
.fastproof{background:var(--black);padding:0 0 88px;}
.fastproof .proof-line{border-top:1px solid var(--line-d);display:flex;}
.fastproof .pf{flex:1;padding:28px 26px 0 0;border-right:1px solid var(--line-d);margin-right:26px;}
.fastproof .pf:last-child{border-right:none;margin-right:0;padding-right:0;}
.fastproof .pf .v{font-size:38px;font-weight:700;line-height:1;letter-spacing:-0.035em;color:var(--teal);}
.fastproof .pf .l{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--offwhite);margin-top:12px;line-height:1.55;
}
.fastproof .pf .q{
  font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--muted-d);margin-top:10px;line-height:1.65;
}

/* ══════════════════ 3 · BUYERS + THE PROBLEM ══════════════════ */
.buyers{background:var(--offwhite);padding:96px 0 92px;}
.buyers h2 em{color:var(--teal);}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:50px;background:var(--line-l);border:1px solid var(--line-l);}
.bcell{background:var(--offwhite);padding:26px 26px 24px;transition:background-color .24s;}
.bcell:hover{background:var(--paper);}
.bcell .n{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--teal);}
.bcell h3{
  font-size:16.5px;font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;
  color:var(--black);margin-top:12px;line-height:1.22;
}
.bcell p{font-size:13.5px;line-height:1.68;color:var(--body-l);margin-top:10px;}

/* the enemy, carried on a dark inset inside the light section */
.blackbox{margin-top:56px;background:var(--black);padding:54px 48px 48px;}
.bb-head .eyebrow{color:var(--muted-d);}
.bb-head .eyebrow .sq{background:var(--teal);}
.bb-h{
  font-size:clamp(30px,2.75vw,40px);font-weight:700;line-height:1.1;letter-spacing:-0.028em;
  text-transform:uppercase;color:#fff;margin-top:20px;
}
.bb-h em{color:var(--teal);}
.bb-lede{font-size:16px;line-height:1.8;color:var(--body-d);margin-top:20px;max-width:720px;}

.bbrows{margin-top:44px;border-top:1px solid var(--line-d);}
.bbrow{
  display:grid;grid-template-columns:1fr 34px 1.15fr;align-items:center;gap:0 24px;
  border-bottom:1px solid var(--line-d);padding:20px 0;
}
.bbrow .a{
  font-size:15.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-d);
  text-transform:uppercase;line-height:1.4;
}
.bbrow .m{width:34px;height:1px;background:rgba(15,168,185,.55);position:relative;}
.bbrow .m::after{
  content:'';position:absolute;right:0;top:-3px;
  border-left:6px solid rgba(15,168,185,.75);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
.bbrow .b{
  font-size:17.5px;font-weight:700;letter-spacing:-0.008em;color:#fff;
  text-transform:uppercase;line-height:1.32;
}
.bbrow .b em{color:var(--teal);}
.risks{margin-top:32px;}
.risks .rs{font-size:15.5px;line-height:1.8;color:var(--body-d);max-width:860px;}
.risks .rs strong{color:#fff;font-weight:600;}

/* ══════════════════ 4 · ACCOUNTABLE FIELD EXECUTION ══════════════════ */
.accountable{position:relative;background:var(--black);padding:100px 0 96px;overflow:hidden;}
.acc-mark{position:absolute;top:90px;right:-100px;width:440px;opacity:.055;pointer-events:none;}
.acc-in{position:relative;}
.accountable h2 em{color:var(--teal);}

/* W-2 — deliberately unmissable to a scanning reader */
.w2{
  margin-top:54px;display:grid;grid-template-columns:auto 1fr;gap:0 52px;align-items:center;
  background:var(--card-d);border:1px solid var(--line-d);border-left:5px solid var(--teal);
  padding:38px 44px;
}
.w2-mark{text-align:left;}
.w2-big{
  font-size:clamp(74px,7vw,104px);font-weight:800;line-height:.86;letter-spacing:-0.055em;
  color:var(--teal);
}
.w2-lab{
  font-size:15px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--offwhite);margin-top:14px;
}
.w2-copy{min-width:0;}
.w2-line{
  font-size:clamp(20px,1.75vw,25px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.015em;color:#fff;line-height:1.22;
}
.w2-copy p{font-size:15.5px;line-height:1.78;color:var(--body-d);margin-top:15px;}
.w2-copy p strong{color:#fff;font-weight:600;}
.w2-note{
  font-size:13.5px !important;line-height:1.7 !important;color:var(--muted-d) !important;
  margin-top:14px !important;padding-top:13px;border-top:1px solid var(--line-d);
}

/* five standing accountability layers */
.layers{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:22px;background:var(--line-d);border:1px solid var(--line-d);}
.layer{background:var(--black);padding:26px 22px 24px;}
.layer .n{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--teal);}
.layer h3{
  font-size:15.5px;font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;
  color:#fff;margin-top:13px;line-height:1.24;
}
.layer p{font-size:13.5px;line-height:1.66;color:var(--body-d);margin-top:11px;}
.layer p em{color:#fff;font-weight:600;}

/* what happens to one door — a mechanic, not a second framework */
.chain{margin-top:56px;padding-top:44px;border-top:1px solid var(--line-d);}
.chain-h{
  font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
}
.chain-rail{
  position:relative;height:2px;background:rgba(247,241,235,.10);margin-top:30px;overflow:hidden;
}
.chain-run{
  position:absolute;left:0;top:0;bottom:0;width:26%;
  background:linear-gradient(90deg,rgba(15,168,185,0),var(--teal),rgba(15,168,185,0));
  animation:chainRun 7.2s cubic-bezier(.45,0,.35,1) infinite;
}
@keyframes chainRun{0%{transform:translateX(-100%)}70%,100%{transform:translateX(400%)}}
.chain-steps{
  list-style:none;   /* the reset only clears <ul> */
  display:grid;grid-template-columns:repeat(6,1fr);gap:0 18px;margin-top:-7px;
}
.chain-steps li{position:relative;padding-top:22px;}
.chain-steps .d{
  position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--black);border:2px solid var(--teal);
}
.chain-steps .k{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--muted-d);
}
.chain-steps .t{
  display:block;font-size:14.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:-0.005em;color:#fff;margin-top:8px;line-height:1.28;
}
.chain-note{font-size:14px;line-height:1.72;color:var(--muted-d);margin-top:28px;max-width:760px;}
.chain-note em{color:var(--offwhite);font-weight:600;}

.closer{
  margin-top:50px;border-left:4px solid var(--teal);padding:4px 0 4px 30px;
  display:grid;grid-template-columns:auto 1fr;gap:0 44px;align-items:start;
}
.closer .ct{
  font-size:clamp(22px,1.95vw,28px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.02em;color:#fff;line-height:1.16;max-width:230px;
}
.closer .cs{font-size:15.5px;line-height:1.8;color:var(--body-d);}
.closer .cs strong{color:#fff;font-weight:600;}

/* ══════════════════ 5 · FIELD VERIFICATION (BURRILL) ══════════════════ */
.verify{background:var(--paper);padding:98px 0 94px;}
.vgrid{display:grid;grid-template-columns:1.02fr 1fr;gap:0 68px;align-items:start;}
.vlead .k{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);}
.vlead .pull{
  font-size:clamp(29px,2.6vw,38px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.028em;line-height:1.1;color:var(--black);margin-top:20px;
}
.vlead .pull em{color:var(--teal);}
.vlead .said{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line-l);
  font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--body-l);
  line-height:1.85;
}
.vlead .said span{display:block;}
.vlead .said .hit{color:var(--black);}
.vquote{border-left:3px solid var(--teal);padding-left:34px;}
.vquote p{font-size:15.5px;line-height:1.86;color:var(--body-l);}
.vquote p + p{margin-top:15px;}
.vquote .mark{font-size:52px;line-height:.6;color:var(--teal);font-weight:700;display:block;margin-bottom:12px;}
.vattr{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-l);}
.vattr .nm{font-size:15px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--black);}
.vattr .ro{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-l);margin-top:7px;}

/* ══════════════════ 6 · THE PLAN — VFO³ + CAPABILITIES ══════════════════ */
.oper{background:var(--black);padding:100px 0 96px;position:relative;overflow:hidden;}
.oper-in{position:relative;}
.oper h2 em{color:var(--teal);}
.vfo3-head{margin-top:66px;padding-top:52px;border-top:1px solid var(--line-d);}
.vfo3-t{
  font-size:clamp(28px,2.5vw,36px);font-weight:700;line-height:1.1;letter-spacing:-0.026em;
  text-transform:uppercase;color:var(--offwhite);margin-top:20px;
}
.vfo3-t em{color:var(--teal);}
.oper .flow{margin-top:44px;}
.oper .step h4{
  font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;
  color:#fff;margin-top:16px;line-height:1.15;
}

.measures-h{
  margin-top:56px;font-size:12.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);
}
.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:20px;}
.mcell{
  background:var(--black);padding:18px 16px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body-d);line-height:1.5;
}

.capblock{margin-top:56px;padding-top:44px;border-top:1px solid var(--line-d);}
.cap-h{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);}
.caps{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.cap{
  background:var(--card-d);border:1px solid #35343A;border-left:3px solid var(--teal);
  padding:12px 16px;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--offwhite);line-height:1.3;
}

/* ══════════════════ 7 · PROOF ══════════════════ */
.proofsec{background:var(--offwhite);padding:98px 0 94px;}
.proofsec h2 em{color:var(--teal);}

.case{margin-top:52px;background:var(--black);border-top:4px solid var(--teal);display:grid;grid-template-columns:1fr 1.32fr;gap:0;}
.case-l{padding:38px 40px 36px;border-right:1px solid var(--line-d);}
.case-l .k{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);}
.case-l .anon{
  display:inline-block;margin-top:16px;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-d);border:1px solid #35343A;padding:6px 11px;
}
.case-l .big{font-size:62px;font-weight:800;line-height:.98;letter-spacing:-0.045em;color:#fff;margin-top:24px;}
.case-l .big em{color:var(--teal);}
.case-l .bl{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--body-d);margin-top:12px;line-height:1.6;}
.case-l .second{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-d);}
.case-l .second .v{font-size:32px;font-weight:700;line-height:1;letter-spacing:-0.035em;color:#fff;}
.case-l .second .l{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);margin-top:10px;}
.case-r{padding:38px 40px 36px;}
.cblock + .cblock{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-d);}
.cblock .h{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);}
.cblock p{font-size:15px;line-height:1.8;color:var(--body-d);margin-top:11px;}
.cblock p strong{color:#fff;font-weight:600;}
.crounds{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.crounds span{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(15,168,185,.34);color:var(--body-d);padding:8px 12px;line-height:1.25;
}
.cfoot{
  padding:18px 40px;border-top:1px solid var(--line-d);grid-column:1 / -1;
  font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--muted-d);line-height:1.7;
}

.ptiles{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px;}
.ptile{background:var(--paper);border:1px solid var(--line-l);border-top:3px solid var(--teal);padding:28px 28px 26px;}
.ptile .v{font-size:42px;font-weight:800;line-height:1;letter-spacing:-0.04em;color:var(--black);}
.ptile .l{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);margin-top:13px;line-height:1.5;}
.ptile p{font-size:14.5px;line-height:1.76;color:var(--body-l);margin-top:13px;}
.ptile .imp{
  font-size:14px;line-height:1.7;color:var(--black);font-weight:600;
  margin-top:13px;padding-top:13px;border-top:1px solid var(--line-l);
}

/* ══════════════════ 8 · FINAL CTA ══════════════════ */
.cfinal{position:relative;background:var(--black);padding:110px 0;overflow:hidden;}
.cfinal::before{
  content:'';position:absolute;top:-20%;right:-8%;width:56%;height:140%;
  background-image:
    linear-gradient(rgba(15,168,185,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,168,185,.13) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 60% 56% at 74% 42%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 60% 56% at 74% 42%,#000 0%,transparent 72%);
  pointer-events:none;
}
.cfinal-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.cfinal h2{
  font-size:clamp(42px,4.3vw,57px);line-height:1.06;letter-spacing:-0.035em;
  color:#fff;text-transform:uppercase;margin-top:24px;max-width:760px;
}
.cfinal h2 em{color:var(--teal);}
.cfinal p{font-size:17px;line-height:1.8;color:var(--body-d);max-width:600px;margin-top:22px;}
.cfinal .cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.cfinal .tlink{color:var(--muted-d);}
.cfinal .tlink:hover{color:var(--offwhite);}

/* Current-page marker in the footer service list. */
.fcol a[aria-current="page"]{color:var(--teal);font-weight:600;}

/* ══════════════════ DESKTOP RANGE TUNING (1280–1920) ══════════════════ */
@media (max-width:1400px){
  .case-l .big{font-size:54px;}
  .acc-mark{width:360px;right:-120px;}
  .blackbox{padding:48px 38px 42px;}
}
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .fieldview{max-width:560px;}
  .bgrid{grid-template-columns:repeat(2,1fr);}
  .layers{grid-template-columns:repeat(3,1fr);}
  .chain-steps{grid-template-columns:repeat(3,1fr);gap:26px 18px;}
  .chain-rail{display:none;}
  .mgrid{grid-template-columns:repeat(3,1fr);}
  .vgrid{grid-template-columns:1fr;gap:44px;}
  .w2{grid-template-columns:1fr;gap:28px;}
  .closer{grid-template-columns:1fr;gap:18px;}
  .closer .ct{max-width:none;}
  .case{grid-template-columns:1fr;}
  .case-l{border-right:none;border-bottom:1px solid var(--line-d);}
  .fastproof .proof-line{flex-wrap:wrap;}
  .fastproof .pf{flex:1 1 44%;margin-bottom:22px;}
}
@media (max-width:900px){
  .bgrid{grid-template-columns:1fr;}
  .ptiles{grid-template-columns:1fr;}
  .layers{grid-template-columns:1fr;}
  .chain-steps{grid-template-columns:repeat(2,1fr);}
  .mgrid{grid-template-columns:repeat(2,1fr);}
  .bbrow{grid-template-columns:1fr;gap:10px;}
  .bbrow .m{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO FIELD VIEW — animated precinct visualisation
   ═══════════════════════════════════════════════════════════════════════════
   One 18s cycle drives everything: doors are worked left to right, a gold
   audit pass sweeps the precinct and verifies a sample, two irregularities
   surface and are then cleared, and the status bars fill as it happens.

   Every moving part is a CSS animation and nothing here is SMIL, so the
   global prefers-reduced-motion rule stops all of it. The resting state is
   painted explicitly at the foot of this block — the visualisation reads as
   a COMPLETED program rather than an empty grid.

   Nothing in this panel represents a real client, a real program or a real
   dataset. It is labelled ILLUSTRATIVE in the panel header.
   ═══════════════════════════════════════════════════════════════════════════ */

.fieldview{
  position:relative;background:#0B0B0E;border:1px solid var(--line-d);
  display:flex;flex-direction:column;overflow:hidden;min-height:596px;
}
/* faint grid bed so the panel does not read as a flat box */
.fieldview::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,168,185,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,168,185,.055) 1px,transparent 1px);
  background-size:33px 33px;
}

/* ── panel header ── */
.fv-bar{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--line-d);background:#0E0E12;
}
.fv-id{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--offwhite);
}
.fv-live{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:0 0 7px;position:relative;}
.fv-live::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--teal);
  animation:fvLive 2.6s ease-out infinite;
}
@keyframes fvLive{0%{transform:scale(.5);opacity:.7}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}
.fv-tag{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#6B6966;border:1px solid #2E2D32;padding:5px 9px;line-height:1;white-space:nowrap;
}

/* ── map ── */
.fv-map{position:relative;flex:1;min-height:0;padding:14px 16px 6px;}
.fv-svg{display:block;width:100%;height:100%;}

.fv-blocks rect{fill:rgba(247,241,235,.022);}
.fv-streets line{stroke:rgba(15,168,185,.32);stroke-width:1.15;}
.fv-streets .fv-minor{stroke:rgba(247,241,235,.11);stroke-dasharray:3 5;stroke-width:1;}

.fv-heat circle{transform-origin:center;}
.fv-heatA{animation:fvHeat 11s ease-in-out infinite;}
.fv-heat-b{animation-delay:-5.5s;}
.fv-heatB{animation:fvHeat 13s ease-in-out infinite;animation-delay:-3s;}
@keyframes fvHeat{0%,100%{opacity:.45}50%{opacity:1}}

/* households -------------------------------------------------------------- */
.fv-h{fill:#232327;}
.fv-idle{fill:#1D1D21;}
.fv-attempt{animation:fvAttempt 18s linear infinite;}
.fv-contact{animation:fvContact 18s linear infinite;}
@keyframes fvAttempt{
  0%      {fill:#232327;r:2.6;}
  3%      {fill:#0FA8B9;r:3.4;}
  88%     {fill:#0FA8B9;r:3.4;}
  97%,100%{fill:#232327;r:2.6;}
}
@keyframes fvContact{
  0%      {fill:#232327;r:2.6;}
  3%      {fill:#0FA8B9;r:3.4;}
  9%      {fill:#FFFFFF;r:4;}
  88%     {fill:#FFFFFF;r:4;}
  97%,100%{fill:#232327;r:2.6;}
}
/* the moment of contact */
.fv-ping{fill:none;stroke:#FFFFFF;stroke-width:1.1;opacity:0;animation:fvPing 18s linear infinite;}
@keyframes fvPing{
  0%,4%   {r:3;opacity:0;}
  9%      {r:3.4;opacity:.8;}
  19%     {r:13;opacity:0;}
  100%    {r:13;opacity:0;}
}

/* audit verification ------------------------------------------------------ */
.fv-ring{fill:none;stroke:#F8AE32;stroke-width:1.3;opacity:0;animation:fvRing 18s ease-out infinite;}
@keyframes fvRing{
  0%,4%   {opacity:0;r:10;}
  10%     {opacity:1;r:6.5;}
  46%     {opacity:1;r:6.5;}
  56%,100%{opacity:0;r:6.5;}
}

/* an irregularity surfaces, is investigated, and clears ------------------- */
.fv-flag{fill:none;stroke:var(--red);stroke-width:1.6;opacity:0;animation:fvFlag 18s linear infinite;}
@keyframes fvFlag{
  0%,42%  {opacity:0;r:10;}
  46%     {opacity:1;r:7;}
  50%     {opacity:.45;r:9.5;}
  54%     {opacity:1;r:7;}
  58%     {opacity:.45;r:9.5;}
  62%     {opacity:1;r:7;}
  70%     {opacity:1;r:7;}
  75%,100%{opacity:0;r:7;}
}
.fv-cleared{fill:none;stroke:#F8AE32;stroke-width:1.6;opacity:0;animation:fvCleared 18s ease-out infinite;}
@keyframes fvCleared{
  0%,70%  {opacity:0;r:11;}
  77%     {opacity:1;r:7;}
  92%     {opacity:1;r:7;}
  98%,100%{opacity:0;r:7;}
}

/* canvasser routes -------------------------------------------------------- */
.fv-route{
  fill:none;stroke:#2FD3E4;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:700;stroke-dashoffset:700;opacity:0;
  animation:fvDraw 18s cubic-bezier(.42,0,.32,1) infinite;
}
@keyframes fvDraw{
  0%      {stroke-dashoffset:700;opacity:0;}
  4%      {opacity:.85;}
  46%     {stroke-dashoffset:0;opacity:.85;}
  78%     {stroke-dashoffset:0;opacity:.42;}
  90%,100%{stroke-dashoffset:0;opacity:0;}
}
.fv-walk{fill:#FFFFFF;opacity:0;animation:fvWalk 18s cubic-bezier(.42,0,.32,1) infinite;}
.fv-walkhalo{
  fill:none;stroke:#0FA8B9;stroke-width:1.2;opacity:0;
  animation:fvWalk 18s cubic-bezier(.42,0,.32,1) infinite,fvHalo 2.2s ease-out infinite;
}
@keyframes fvWalk{
  0%      {offset-distance:0%;opacity:0;}
  4%      {opacity:1;}
  46%     {offset-distance:100%;opacity:1;}
  53%,100%{offset-distance:100%;opacity:0;}
}
@keyframes fvHalo{0%{r:4.5}70%{r:11}100%{r:11}}

/* audit pass -------------------------------------------------------------- */
.fv-sweep{opacity:0;animation:fvSweep 18s cubic-bezier(.36,0,.28,1) infinite;}
@keyframes fvSweep{
  0%,50%  {transform:translateY(0);opacity:0;}
  55%     {opacity:1;}
  86%     {transform:translateY(700px);opacity:1;}
  91%,100%{transform:translateY(700px);opacity:0;}
}

/* ── legend + status bars ── */
.fv-foot{position:relative;border-top:1px solid var(--line-d);background:#0E0E12;padding:15px 18px 17px;}
.fv-key{display:flex;flex-wrap:wrap;gap:9px 20px;}
.fv-key span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#7E7C79;
  line-height:1.3;
}
.fv-key i{width:7px;height:7px;border-radius:50%;flex:0 0 7px;}
.fv-key .k-att{background:#0FA8B9;}
.fv-key .k-con{background:#FFFFFF;}
.fv-key .k-ver{background:none;border:1.4px solid #F8AE32;}
.fv-key .k-flg{background:none;border:1.4px solid #EC1B33;}

.fv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:15px;}
.fv-stat .t{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8C8A88;
}
.fv-stat .t b{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--offwhite);}
.fv-stat .rail{height:3px;background:#232327;margin-top:8px;position:relative;overflow:hidden;}
.fv-stat .fill{position:absolute;left:0;top:0;bottom:0;width:0;}
.fv-s1 .fill{background:#0FA8B9;animation:fvFill1 18s cubic-bezier(.42,0,.32,1) infinite;}
.fv-s2 .fill{background:#FFFFFF;animation:fvFill2 18s cubic-bezier(.42,0,.32,1) infinite;}
.fv-s3 .fill{background:#F8AE32;animation:fvFill3 18s cubic-bezier(.36,0,.28,1) infinite;}
@keyframes fvFill1{0%{width:0}48%{width:92%}88%{width:92%}97%,100%{width:0}}
@keyframes fvFill2{0%,4%{width:0}52%{width:34%}88%{width:34%}97%,100%{width:0}}
@keyframes fvFill3{0%,52%{width:0}86%{width:16%}92%{width:16%}98%,100%{width:0}}

/* ═══════════════════════════════════════════════════════════════════════════
   RESTING STATE — prefers-reduced-motion
   The global rule kills every animation above. Without these overrides the
   panel would render as an empty grid, which reads as broken rather than
   still. Here it renders as a finished program: doors worked, a sample
   verified, routes complete, bars at their final position.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .fv-attempt{fill:#0FA8B9;r:3.4;}
  .fv-contact{fill:#FFFFFF;r:4;}
  .fv-ping{opacity:0;}
  .fv-ring{opacity:1;r:6.5;}
  .fv-flag{opacity:0;}
  .fv-cleared{opacity:1;r:7;}
  .fv-route{stroke-dashoffset:0;opacity:.55;}
  .fv-walk,.fv-walkhalo{offset-distance:100%;opacity:1;}
  .fv-walkhalo{r:8;opacity:.5;}
  .fv-sweep{opacity:0;}
  .fv-heat circle{opacity:.8;}
  .fv-s1 .fill{width:92%;}
  .fv-s2 .fill{width:34%;}
  .fv-s3 .fill{width:16%;}
  .fv-live::after{opacity:0;}
}

/* generated by fieldviz.py — route geometry for the walker markers */
.fv-walk0{offset-path:path("M 40 70 L 178 70 L 178 158 L 412 158 L 412 256");}
.fv-walk1{offset-path:path("M 72 496 L 72 356 L 296 356 L 296 452 L 510 452");}
.fv-walk2{offset-path:path("M 514 256 L 296 256 L 296 158 L 72 158");}