/* ===========================================================================
   VFO PUBLIC AFFAIRS + ADVOCACY - DESKTOP STYLESHEET
   Part 1: the APPROVED VFO desktop chrome stylesheet, unmodified.
   Part 2: this page's components.
   =========================================================================== */

/* ===========================================================================
   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. */



/* ===========================================================================
   PUBLIC AFFAIRS + ADVOCACY — page components
   Built on the approved VFO homepage stylesheet above. Nothing above this
   fence was altered. GOLD #F8AE32 is this page's locked service accent;
   red, teal and orange appear only where the site-wide system already
   assigns them (the four VFO3 stages 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.
   Site-wide. (This page carries no photography.)
   =========================================================================== */

:root{ --map:none; --gold-d:#9A6B10; }

/* The navigation is sticky. Without this the in-page anchor lands the
   section heading underneath it. */
#system,#main{scroll-margin-top:112px;}

/* ── Service-colour overrides for shared primitives ───────────────────────── */
.svc .eyebrow .sq{background:var(--gold);}
.btn-gold{background:var(--gold);color:#2A1B00;border-color:var(--gold);}
.btn-gold:hover{background:#E39B1C;border-color:#E39B1C;transform:translateY(-2px);}

/* 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(--gold);}
/* Current-page marker in the footer service list. */
.fcol a[aria-current="page"]{color:var(--gold);font-weight:600;}

/* ══════════════════ 1 · HERO ══════════════════ */
.phero{position:relative;background:var(--black);overflow:hidden;padding-top:82px;}
.phero-in{
  position:relative;max-width:var(--maxw);margin:0 auto;padding:70px var(--pad) 0;
  display:grid;grid-template-columns:1.02fr .98fr;gap:0 56px;align-items:center;
}
.crumb{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);margin-bottom:26px;
}
.crumb a{transition:color .2s;}
.crumb a:hover{color:var(--offwhite);}
.crumb .sep{color:#4A4845;margin:0 10px;}
.phero h1{
  font-size:clamp(37px,3.35vw,49px);
  line-height:1.08;letter-spacing:-0.035em;color:#fff;
  margin-top:22px;text-transform:uppercase;
}
.phero h1 em{color:var(--gold);}
.phero .lede{max-width:600px;color:var(--body-d);}
.phero .lede strong{color:#fff;font-weight:600;}
.phero-ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;align-items:center;}

/* Locked positioning line — the page's anchor.
   The three words are one statement, not three columns: an inline-flex row
   with a tight em-relative gap so the spacing holds at every desktop width.
   Colours are the three approved VFO accents, gold last because gold is
   this page's service family. */
.pmw{
  margin-top:38px;border-top:3px solid var(--gold);padding-top:20px;
  display:inline-flex;flex-wrap:wrap;align-items:baseline;
  font-size:clamp(25px,2.2vw,32px);gap:0 .2em;
}
.pmw .w{
  font-size:1em;font-weight:700;text-transform:uppercase;
  letter-spacing:-0.014em;line-height:1.1;
}
.pmw .w1{color:var(--teal);}
.pmw .w2{color:var(--red);}
.pmw .w3{color:var(--gold);}

/* Hero proof line — scan-speed credibility. Every figure is expanded with
   full context and implication in section 8. */
.pproof{position:relative;max-width:var(--maxw);margin:60px auto 0;padding:0 var(--pad) 96px;}
.pproof .proof-line{border-top:1px solid var(--line-d);display:flex;}
.pproof .pf{flex:1;padding:26px 26px 0 0;border-right:1px solid var(--line-d);margin-right:26px;}
.pproof .pf:last-child{border-right:none;margin-right:0;padding-right:0;}
.pproof .pf .v{font-size:33px;font-weight:700;line-height:1;letter-spacing:-0.035em;color:var(--gold);}
.pproof .pf .v.sm{font-size:25px;letter-spacing:-0.02em;padding-top:7px;}
.pproof .pf .l{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--offwhite);margin-top:11px;line-height:1.55;
}
.pproof .pf .q{
  font-size:11.5px;font-weight:400;letter-spacing:.02em;text-transform:none;
  color:var(--muted-d);margin-top:8px;line-height:1.6;
}

/* ══════════════════ HERO VISUAL — COMMUNITY PARTICIPATION SYSTEM ══════════
   An abstract community environment moving from unknown to understood and
   engaged. Diagrammatic and proprietary-looking on purpose: it is not a map
   product, not a voter file, not a CRM screen and not a government portal.
   Every animation is a staged reveal from a neutral start to the resting
   state below, so prefers-reduced-motion simply shows the resting state. */
.cps{position:relative;margin-top:8px;}
.cps svg{width:100%;height:auto;display:block;overflow:visible;}
.cps-cap{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line-d);
}
.cps-cap span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);
}
.cps-cap i{width:9px;height:9px;flex:0 0 9px;display:inline-block;}
.cps-cap i.su{background:var(--gold);}
.cps-cap i.un{background:transparent;border:2px solid #6A6870;}
.cps-cap i.op{background:transparent;border:2px solid var(--red);}

/* resting state = engaged / classified. Keyframes animate FROM neutral. */
.hh{fill:#2A2A2E;}
.hh.su{fill:var(--gold);animation:hhSu 1.1s ease-out backwards;}
.hh.te{fill:var(--teal);animation:hhSu 1.1s ease-out backwards;}
.hh.op{fill:none;stroke:var(--red);stroke-width:1.6;animation:hhOp 1.1s ease-out backwards;}
.hh.nu{fill:none;stroke:#56545A;stroke-width:1.4;animation:hhOp 1.1s ease-out backwards;}
@keyframes hhSu{from{fill:#2A2A2E;transform:scale(.6);}to{transform:scale(1);}}
@keyframes hhOp{from{stroke:#2A2A2E;transform:scale(.6);}to{transform:scale(1);}}

.ring{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0;transform-origin:center;
      animation:ripple 3.6s cubic-bezier(.25,.8,.3,1) infinite;}
@keyframes ripple{
  0%{opacity:0;r:2;}
  12%{opacity:.7;}
  60%{opacity:0;r:40;}
  100%{opacity:0;r:40;}
}
.tie{stroke:rgba(248,174,50,.55);stroke-width:1;fill:none;
     stroke-dasharray:var(--len);stroke-dashoffset:0;
     animation:draw 1.3s ease-out backwards;}
@keyframes draw{from{stroke-dashoffset:var(--len);}to{stroke-dashoffset:0;}}
.stk{fill:#0F0F12;stroke:var(--gold);stroke-width:1.6;animation:hhOp 1s ease-out backwards;}
.lyr{fill:none;stroke:rgba(247,241,235,.20);stroke-width:1;}
.lyrlab{fill:#8C8A88;font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;}
.lyrlab.on{fill:var(--gold);}
.tiny{fill:#8C8A88;font-size:12px;font-weight:500;letter-spacing:.03em;}
.tiny.lt{fill:#8C8A88;}
.tiny.hd{fill:#F7F1EB;font-weight:600;letter-spacing:.06em;}
.tiny.fbl{fill:#0FA8B9;font-weight:600;letter-spacing:.1em;}
.panel{fill:#101013;stroke:rgba(248,174,50,.26);stroke-width:1;}
.pmark{fill:var(--gold);animation:rise 3.1s ease-in-out infinite;}
@keyframes rise{
  0%{opacity:0;transform:translateY(0);}
  16%{opacity:1;}
  72%{opacity:1;transform:translateY(var(--ry));}
  88%,100%{opacity:0;transform:translateY(var(--ry));}
}
.fb{stroke:rgba(15,168,185,.6);stroke-width:1;fill:none;stroke-dasharray:4 5;
    animation:march 2.4s linear infinite;}
.fbhead{stroke:rgba(15,168,185,.85);stroke-width:1.2;fill:none;}
@keyframes march{to{stroke-dashoffset:-18;}}
.grid-l{stroke:rgba(248,174,50,.13);stroke-width:1;}
.parcel{fill:none;stroke:rgba(247,241,235,.07);stroke-width:1;}

@media (prefers-reduced-motion:reduce){
  .hh,.hh.su,.hh.te,.hh.op,.hh.nu,.tie,.stk,.ring,.pmark,.fb{animation:none!important;}
  .pmark{transform:translateY(var(--ry));}
  .ring{opacity:.22;}
  .pmark{opacity:1;}
}

/* ══════════════════ 2 · WHO THIS IS FOR ══════════════════ */
.buyers{background:var(--offwhite);padding:96px 0 92px;}
.buyers h2 em{color:var(--gold-d);}
.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:28px 28px 26px;transition:background-color .24s;}
.bcell:hover{background:var(--paper);}
.bcell .n{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--gold-d);}
.bcell h3{
  font-size:16.5px;font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;
  color:var(--black);margin-top:13px;line-height:1.22;
}
.bcell p{font-size:14px;line-height:1.7;color:var(--body-l);margin-top:11px;}
.already{
  margin-top:38px;background:var(--paper);
  border:1px solid var(--line-l);border-left:4px solid var(--gold);
  padding:30px 34px;display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;align-items:center;
}
.already .k{
  font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-0.012em;
  color:var(--black);line-height:1.24;
}
.already p{font-size:15px;line-height:1.78;color:var(--body-l);}
.already p strong{color:var(--black);font-weight:600;}

/* ══════════════════ 3 · THE VISIBILITY GAP ══════════════════ */
.gap{background:var(--black);padding:100px 0 96px;}
.gap h2 em{color:var(--gold);}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px;align-items:stretch;}
.tcard{border:1px solid var(--line-d);background:var(--card-d);padding:32px 32px 30px;display:flex;flex-direction:column;}
.tcard.a{background:#0D0D0F;}
.tcard.b{border-top:3px solid var(--gold);}
.tcard .k{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);}
.tcard.b .k{color:var(--gold);}
.tcard h3{
  font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-0.015em;
  color:#fff;margin-top:14px;line-height:1.2;
}
.tcard ul{margin-top:20px;}
.tcard li{
  font-size:14.5px;line-height:1.6;color:var(--body-d);padding:11px 0 11px 22px;
  border-bottom:1px solid var(--line-d);position:relative;
}
.tcard li:last-child{border-bottom:none;}
.tcard li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--muted-d);}
.tcard.b li::before{background:var(--gold);}
.tcard.b li{color:#E9E6E2;}

.connect{
  margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  border-left:4px solid var(--gold);padding:26px 30px;background:var(--card-d);
}
.connect .t{
  font-size:clamp(23px,2vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.018em;color:#fff;line-height:1.14;flex:0 0 auto;
}
.connect .t em{color:var(--gold);}
.connect .s{font-size:15px;line-height:1.75;color:var(--body-d);max-width:600px;}

.risks{margin-top:48px;padding-top:34px;border-top:1px solid var(--line-d);}
.risks .rh{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.risks .rs{font-size:15px;line-height:1.78;color:var(--body-d);margin-top:12px;max-width:760px;}
.rchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.rchip{
  border:1px solid #35343A;background:var(--card-d);padding:10px 15px;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--body-d);line-height:1.35;
}

/* ══════════════════ 4 · THE PARTICIPATION GAP ══════════════════ */
.part{background:var(--paper);padding:104px 0 96px;}
.part .big{
  font-size:clamp(42px,4.5vw,62px);font-weight:800;text-transform:uppercase;
  letter-spacing:-0.042em;line-height:1.02;color:var(--black);margin-top:24px;max-width:1000px;
}
.part .big em{color:var(--gold-d);}
.part .sub{font-size:17px;line-height:1.8;color:var(--body-l);max-width:660px;margin-top:26px;}
.part .sub strong{color:var(--black);font-weight:600;}

.ladder{margin-top:56px;border-top:1px solid var(--line-l);}
.lrow{
  display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;gap:0 24px;
  border-bottom:1px solid var(--line-l);padding:21px 0;
}
.lrow .a{font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--black);text-transform:uppercase;line-height:1.32;}
.lrow .m{width:42px;height:1px;background:rgba(154,107,16,.55);position:relative;}
.lrow .m::after{
  content:'';position:absolute;right:0;top:-3px;
  border-left:6px solid rgba(154,107,16,.8);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
.lrow .b{font-size:16px;font-weight:500;letter-spacing:.01em;color:var(--muted-l);line-height:1.5;}

.second{
  margin-top:64px;padding-top:52px;border-top:1px solid var(--line-l);
  display:grid;grid-template-columns:1.06fr 1fr;gap:0 64px;align-items:start;
}
.second .k{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);}
.second .pull{
  font-size:clamp(28px,2.6vw,38px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.03em;line-height:1.08;color:var(--black);margin-top:18px;
}
.second .pull em{color:var(--gold-d);}
.second .bd p{font-size:16px;line-height:1.86;color:var(--body-l);}
.second .bd p + p{margin-top:15px;}
.second .bd p strong{color:var(--black);font-weight:600;}

.honest{
  margin-top:34px;border-left:3px solid var(--gold);padding:4px 0 4px 26px;
}
.honest .h{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);}
.honest p{font-size:14.5px;line-height:1.78;color:var(--body-l);margin-top:10px;}
.honest p strong{color:var(--black);font-weight:600;}

/* ══════════════════ COMPACT CONVERSION STRIP ══════════════════
   Deliberately not a full section: a compact band at the foot of the section
   it follows, keeping the visitor within reach of the one conversion action. */
.strip{
  margin-top:56px;display:grid;grid-template-columns:1fr auto;gap:20px 44px;align-items:center;
  border-left:4px solid var(--gold);padding:26px 32px;
}
.strip.on-black{background:var(--card-d);border:1px solid var(--line-d);border-left:4px solid var(--gold);}
.strip.on-paper{background:var(--offwhite);border:1px solid var(--line-l);border-left:4px solid var(--gold);}
.strip .t{
  font-size:clamp(19px,1.72vw,25px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.018em;line-height:1.16;
}
.strip.on-black .t{color:#fff;}
.strip.on-paper .t{color:var(--black);}
.strip .t em{color:var(--gold);}
.strip.on-paper .t em{color:var(--gold-d);}
.strip .btn{white-space:nowrap;}

/* ══════════════════ 5 · VFO3 + CAPABILITIES ══════════════════ */
.system{background:var(--black);padding:100px 0 0;position:relative;overflow:hidden;}
.system-mark{position:absolute;top:120px;right:-90px;width:460px;opacity:.06;pointer-events:none;}
.system-in{position:relative;}
.system h2 em{color:var(--gold);}
.system .flow{margin-top:50px;}
.system .sequence{margin-bottom:0;}
.system-tail{padding-bottom:100px;}

.capwrap{margin-top:84px;padding-top:58px;border-top:1px solid var(--line-d);}
.capwrap .h-sec em{color:var(--gold);}
.caps{display:flex;flex-wrap:wrap;gap:9px;margin-top:40px;}
.cap{
  background:var(--card-d);border:1px solid #35343A;border-left:3px solid var(--gold);
  padding:13px 18px;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--offwhite);line-height:1.3;
}
.capnote{font-size:14.5px;line-height:1.78;color:var(--muted-d);margin-top:24px;max-width:820px;}
.capnote strong{color:#fff;font-weight:600;}

.acct{margin-top:54px;padding-top:44px;border-top:1px solid var(--line-d);
      display:grid;grid-template-columns:1fr 1.22fr;gap:0 60px;align-items:start;}
.acct .k{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.acct .t em{color:var(--gold);}
.acct .t{
  font-size:clamp(23px,2vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.02em;color:#fff;line-height:1.14;margin-top:15px;
}
.acct p{font-size:15px;line-height:1.8;color:var(--body-d);}
.acct p + p{margin-top:13px;}
.acct p strong{color:#fff;font-weight:600;}
.achips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.achips span{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(248,174,50,.32);padding:9px 13px;color:var(--body-d);line-height:1.3;
}

/* Small cross-service bridge. Navigation, not conversion. */
.bridge{
  margin-top:56px;border-top:1px solid var(--line-d);padding-top:32px;
  display:grid;grid-template-columns:1fr auto;gap:18px 44px;align-items:center;
}
.bridge .k{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);}
.bridge .t{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:-0.012em;color:#fff;margin-top:11px;line-height:1.24;}
.bridge p{font-size:14.5px;line-height:1.75;color:var(--muted-d);margin-top:10px;max-width:700px;}
.bridge .tlink{color:var(--orange);white-space:nowrap;}
.bridge .tlink:hover{color:#fff;}

/* ══════════════════ 6 · COALITION BUILDING ══════════════════ */
.coal{background:var(--offwhite);padding:100px 0 96px;}
.coal h2 em{color:var(--gold-d);}
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);margin-top:50px;}
.ccell{
  background:var(--offwhite);padding:20px 18px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body-l);line-height:1.5;
}
.coalnote{
  margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;align-items:start;
  background:var(--paper);border:1px solid var(--line-l);border-left:4px solid var(--gold);padding:28px 32px;
}
.coalnote .k{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:-0.012em;color:var(--black);line-height:1.24;}
.coalnote p{font-size:15px;line-height:1.8;color:var(--body-l);}
.coalnote p strong{color:var(--black);font-weight:600;}

/* ══════════════════ 7 · THE PUBLIC PROCESS ══════════════════ */
.proc{background:var(--black);padding:100px 0 96px;}
.proc h2 em{color:var(--gold);}
.owner{margin-top:52px;display:grid;grid-template-columns:1fr 1.1fr;gap:22px;align-items:stretch;}
.local{margin-top:56px;padding-top:46px;border-top:1px solid var(--line-d);
       display:grid;grid-template-columns:1fr 1.22fr;gap:0 60px;align-items:start;}
.local .k{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.local .t{
  font-size:clamp(23px,2vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.02em;color:#fff;line-height:1.14;margin-top:15px;
}
.local .t em{color:var(--gold);}
.local p{font-size:15px;line-height:1.8;color:var(--body-d);}
.local p + p{margin-top:13px;}
.local p strong{color:#fff;font-weight:600;}
.lchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.lchips span{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid #35343A;background:var(--card-d);padding:9px 13px;color:var(--body-d);line-height:1.3;
}
.clear{
  margin-top:30px;border-left:3px solid var(--gold);padding:4px 0 4px 26px;
}
.clear p{font-size:14.5px;line-height:1.8;color:var(--body-d);}
.clear p strong{color:#fff;font-weight:600;}

/* ══════════════════ 8 · PROOF ══════════════════ */
.proofsec{background:var(--offwhite);padding:100px 0 96px;}
.proofsec h2 em{color:var(--gold-d);}

.case{margin-top:52px;background:var(--black);border-top:4px solid var(--gold);display:grid;grid-template-columns:1fr 1.32fr;gap:0;}
.case-l{padding:40px 40px 38px;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(--gold);}
.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:64px;font-weight:800;line-height:.98;letter-spacing:-0.045em;color:#fff;margin-top:24px;}
.case-l .big em{color:var(--gold);}
.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 .sec2{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-d);}
.case-l .sec2 .v{font-size:34px;font-weight:700;line-height:1;letter-spacing:-0.035em;color:#fff;}
.case-l .sec2 .l{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);margin-top:10px;}
.case-r{padding:40px 40px 38px;}
.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(--gold);}
.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(248,174,50,.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:26px;}
.ptile{background:var(--paper);border:1px solid var(--line-l);border-top:3px solid var(--gold);padding:30px 30px 28px;}
.ptile .v{font-size:44px;font-weight:800;line-height:1;letter-spacing:-0.04em;color:var(--black);}
.ptile .v.sm{font-size:32px;letter-spacing:-0.03em;padding-top:9px;}
.ptile .l{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-d);margin-top:13px;line-height:1.5;}
.ptile p{font-size:14.5px;line-height:1.76;color:var(--body-l);margin-top:14px;}
.ptile .imp{font-size:14px;line-height:1.7;color:var(--black);font-weight:600;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-l);}
.pnote{font-size:13.5px;line-height:1.75;color:var(--muted-l);margin-top:24px;max-width:860px;}

/* ══════════════════ 9 · FINAL CTA ══════════════════ */
.pfinal{position:relative;background:var(--black);padding:112px 0;overflow:hidden;}
.pfinal::before{
  content:'';position:absolute;top:-20%;right:-8%;width:58%;height:140%;
  background-image:
    linear-gradient(rgba(248,174,50,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,174,50,.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;
}
.pfinal-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.pfinal h2{
  font-size:clamp(41px,4.1vw,55px);line-height:1.06;letter-spacing:-0.035em;
  color:#fff;text-transform:uppercase;margin-top:24px;max-width:820px;
}
.pfinal h2 em{color:var(--gold);}
.pfinal p{font-size:17px;line-height:1.8;color:var(--body-d);max-width:620px;margin-top:22px;}
.pfinal .cta{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.pfinal .tlink{color:var(--muted-d);}
.pfinal .tlink:hover{color:var(--offwhite);}

/* ══════════════════ DESKTOP RANGE TUNING (1280–1920) ══════════════════ */
@media (max-width:1400px){
  .case-l .big{font-size:56px;}
  .system-mark{width:380px;right:-110px;}
  .cgrid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1180px){
  .phero-in{grid-template-columns:1fr;gap:52px;}
  .cps{max-width:640px;}
  .bgrid{grid-template-columns:repeat(2,1fr);}
  .cgrid{grid-template-columns:repeat(3,1fr);}
  .twocol,.owner{grid-template-columns:1fr;}
  .second,.acct,.local{grid-template-columns:1fr;gap:34px;}
  .already,.coalnote{grid-template-columns:1fr;gap:16px;}
  .case{grid-template-columns:1fr;}
  .case-l{border-right:none;border-bottom:1px solid var(--line-d);}
  .bridge{grid-template-columns:1fr;}
  .pproof .proof-line{flex-wrap:wrap;}
  .pproof .pf{flex:1 1 44%;margin-bottom:22px;}
}
@media (max-width:900px){
  .bgrid{grid-template-columns:1fr;}
  .ptiles{grid-template-columns:1fr;}
  .cgrid{grid-template-columns:repeat(2,1fr);}
  .lrow{grid-template-columns:1fr;gap:8px;}
  .lrow .m{display:none;}
  .strip{grid-template-columns:1fr;}
}