/* ═══════════════════════════════════════════════════════════════════════════
   POPPINS — SELF-HOSTED. Latin subsets, exactly the weights this page uses.
   Served from assets/fonts/ beside this stylesheet, so the page has no external
   font request and renders the approved typography even if Google Fonts is
   blocked. Poppins is licensed under the SIL Open Font License 1.1 — see
   assets/fonts/POPPINS-OFL-LICENSE.txt.
   ═══════════════════════════════════════════════════════════════════════════ */
@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:italic;font-weight:700;font-display:swap;src:url(../assets/fonts/poppins-latin-700-italic.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 — BALLOT ACCESS + PETITION MANAGEMENT  |  DEDICATED SERVICE PAGE
   DESKTOP DESIGN REVIEW BUILD
   ═══════════════════════════════════════════════════════════════════════════
   Built on the approved VFO website system. Tokens, type primitives, button
   system, nav, ABOUT dropdown, photography placeholder frames, testimonial
   component and footer are carried over unchanged from the approved Homepage
   V4 desktop deployment and the approved About V3 desktop build. Everything
   below the FOOTER comment is page-specific and new.

   Poppins only. No Oswald. Type floor 11.5px. Red is the category accent.
   Accurate 1280px – 1920px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════ TOKENS — APPROVED, UNCHANGED ══════════════════ */
: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;

  /* Circular V mark — inlined once, reused by every mark instance. */
  --mark:url(../logos/vfo-mark-circular-v.png);
}

/* ══════════════════ RESET / BASE — APPROVED ══════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
  background:var(--black);
  overflow-x:clip;
}
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);
  overflow-x:clip;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
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:400;
  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 — APPROVED ── */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  line-height:1.4;
}
.eyebrow .sq{width:9px;height:9px;flex:0 0 9px;background:var(--red);}
.h-sec{
  font-size:clamp(34px,3.1vw,46px);
  font-weight:700;line-height:1.08;letter-spacing:-0.025em;
  text-transform:uppercase;margin-top:22px;
}
.lede{font-size:17px;line-height:1.8;max-width:660px;margin-top:20px;}
.lede + .lede{margin-top:16px;}
.sec-head{display:grid;grid-template-columns:1.08fr 1fr;gap:0 72px;align-items:end;}
.sec-head .head-l{grid-column:1;}
.sec-head .head-r{grid-column:2;padding-bottom:6px;}
.sec-head .head-r .lede{max-width:none;margin-top:0;}
.on-dark .h-sec{color:var(--offwhite);}
.on-dark .eyebrow{color:var(--muted-d);}
.on-dark .lede{color:var(--body-d);}
.on-dark .lede strong{color:#fff;font-weight:600;}
.on-light .h-sec{color:var(--black);}
.on-light .eyebrow{color:var(--muted-l);}
.on-light .lede{color:var(--body-l);}
.on-light .lede strong{color:var(--black);font-weight:600;}

/* ── Buttons — APPROVED SYSTEM, UNCHANGED ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 32px;border:1.5px solid transparent;line-height:1;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s;
}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);}
.btn-red:hover{background:#C9142A;border-color:#C9142A;transform:translateY(-2px);}
.btn-ink{background:var(--black);color:var(--offwhite);border-color:var(--black);}
.btn-ink:hover{background:#2A2A2A;border-color:#2A2A2A;transform:translateY(-2px);}
.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;}

/* ── Photography placeholder frames — APPROVED. Authentic VFO imagery only ── */
.ph{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(9,9,9,.04),rgba(9,9,9,.10)),
    repeating-linear-gradient(135deg,#EDE7E0 0 16px,#E7E0D8 16px 32px);
  border:1px solid rgba(9,9,9,.16);
}
.ph .mk{display:block;width:76px;aspect-ratio:420/430;background:var(--mark) center/contain no-repeat;opacity:.30;}
.ph .t{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  line-height:2;color:#8A837B;padding:0 22px;max-width:340px;
}
.ph.on-black{
  background:
    linear-gradient(180deg,rgba(247,241,235,.05),rgba(247,241,235,.02)),
    repeating-linear-gradient(135deg,#141416 0 16px,#101012 16px 32px);
  border-color:var(--line-d);
}
.ph.on-black .t{color:#7C7A78;}
.ph.on-black .mk{opacity:.34;}
/* A live photograph fills the frame; the placeholder treatment stays in the
   sheet for any slot still awaiting approved imagery. */
.ph img.live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ph.has-photo{border-color:var(--line-d);}

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

/* ── ABOUT dropdown — APPROVED ── */
.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;
}
.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);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC — BALLOT ACCESS + PETITION MANAGEMENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.crumb{background:var(--black);border-bottom:1px solid var(--line-d);}
.crumb-in{
  max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;gap:12px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.6;flex-wrap:wrap;
}
.crumb-in a{color:var(--muted-d);transition:color .2s;}
.crumb-in a:hover{color:#fff;}
.crumb-in .sep{color:rgba(247,241,235,.28);}
.crumb-in .now{color:var(--red);}

/* ══════════════════ 1 · HERO ══════════════════
   Category hero. The problem statement leads; QUALIFY. VERIFY. DEFEND. anchors
   it. One dominant conversion action, one restrained in-page text link. */
.hero{position:relative;background:var(--black);overflow:hidden;}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:76px var(--pad) 86px;}
.hero-grid{display:grid;grid-template-columns:1.16fr .84fr;gap:0 64px;align-items:start;}
.hero .cat{
  display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);line-height:1.4;
}
.hero .cat .rule{width:44px;height:3px;background:var(--red);flex:0 0 44px;}
.hero h1{
  margin-top:26px;color:#fff;text-transform:uppercase;
  font-size:clamp(38px,3.35vw,49px);line-height:1.05;letter-spacing:-0.035em;
}
.hero h1 .b{
  display:block;margin-top:20px;
  font-size:.66em;line-height:1.18;letter-spacing:-0.025em;color:var(--body-d);
}
.hero h1 .b em{color:var(--red);}
.qvd{
  margin-top:34px;padding:26px 0 0;border-top:3px solid var(--red);
  /* One punctuation system: the periods. No dots, squares, bullets, arrows or
     any other separator. Set as a single inline lockup with controlled optical
     spacing rather than flex distribution, so the three words read as one
     statement instead of three stranded pieces of text. */
}
.qvd span{
  display:inline-block;margin-right:.46em;
  font-size:clamp(23px,2.05vw,31px);font-weight:800;letter-spacing:.015em;
  text-transform:uppercase;line-height:1.15;
}
.qvd span:last-child{margin-right:0;}
.qvd .q{color:var(--red);}
.qvd .v{color:var(--teal);}
.qvd .d{color:var(--gold);}
.hero .lede{font-size:17.5px;max-width:620px;margin-top:26px;color:var(--body-d);}
.hero .lede strong{color:#fff;font-weight:600;}
.spine{
  margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;max-width:640px;
}
.spine span{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body-d);border:1px solid var(--line-d);padding:8px 13px;line-height:1.4;
}
.hero-cta{margin-top:38px;display:flex;align-items:center;gap:34px;flex-wrap:wrap;}
.hero-cta .tlink{color:var(--offwhite);}
.hero-cta .tlink:hover{color:#fff;}

/* PHOTO SLOT 1 — dominant hero frame. Authentic VFO petition-field photography. */
.hero-figure{position:relative;display:flex;flex-direction:column;min-height:560px;}
.hero-figure .ph{flex:1;}
.hero-figure .ph .mk{width:96px;}
/* ══════════════════════════════════════════════════════════════════════════
   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. This applies site-wide, not only to this page.
   The VFO colours remain in use elsewhere in the system.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-figure .ph{border:none;}
.hero-figure .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(180deg,rgba(9,9,9,0),rgba(9,9,9,.92) 46%);
  padding:64px 30px 26px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.9;
}

/* ══════════════════ 2 · THE REAL BALLOT-ACCESS PROBLEM ══════════════════
   Operational risk, stated plainly. No fear language, no claims about other
   firms, no industry accusations. */
.problem{background:var(--offwhite);padding:88px 0 92px;}
.problem h2 em{color:var(--red);}
.riskgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-l);border-left:1px solid var(--line-l);
  margin-top:48px;
}
.risk{
  padding:28px 26px 30px;
  border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  transition:background-color .24s;
}
.risk:hover{background:rgba(9,9,9,.035);}
.risk .n{font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--red);}
.risk h3{
  font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-0.005em;
  text-transform:uppercase;color:var(--black);margin-top:14px;min-height:44px;
}
.risk p{
  font-size:14px;line-height:1.75;color:var(--body-l);
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-l);
}
.problem .close{
  margin-top:40px;padding-top:30px;border-top:1px solid var(--line-l);
  display:grid;grid-template-columns:1.1fr .9fr;gap:0 60px;align-items:end;
}
.problem .close .t{
  font-size:clamp(23px,1.95vw,30px);font-weight:700;line-height:1.32;
  letter-spacing:-0.02em;text-transform:uppercase;color:var(--black);
}
.problem .close .t em{color:var(--red);}
.problem .close p{font-size:16px;line-height:1.8;color:var(--body-l);}
.problem .close p strong{color:var(--black);font-weight:600;}

/* ══════════════════ 3 · END-TO-END CAPABILITY ══════════════════
   The eight approved ballot-access capabilities, grouped into the three
   phases that carry the category positioning. */
.cap{position:relative;background:var(--black);padding:90px 0 96px;overflow:hidden;}
.cap-mark{position:absolute;top:-80px;right:-130px;width:430px;aspect-ratio:420/430;
  background:var(--mark) center/contain no-repeat;opacity:.045;pointer-events:none;}
.cap-in{position:relative;}
.cap h2 em{color:var(--red);}
.phgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
.phase{
  background:var(--card-d);border:1px solid var(--line-d);border-top:3px solid var(--red);
  padding:34px 30px 32px;display:flex;flex-direction:column;
  transition:transform .26s,background-color .26s,box-shadow .26s;
}
.phase:hover{transform:translateY(-6px);background:#17171A;box-shadow:0 24px 52px rgba(0,0,0,.62);}
.phase .n{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);
}
.phase .n .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.phase h3{
  font-size:clamp(26px,2.2vw,33px);color:#fff;margin-top:16px;
  text-transform:uppercase;letter-spacing:-0.025em;
}
.phase .s{
  font-size:14.5px;line-height:1.75;color:var(--body-d);margin-top:12px;
  padding-bottom:22px;border-bottom:1px solid var(--line-d);
}
.phase ul{margin-top:20px;display:flex;flex-direction:column;gap:16px;flex:1;}
.phase li .k{
  font-size:14.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:#fff;line-height:1.4;display:flex;align-items:baseline;gap:10px;
}
.phase li .k::before{
  content:'';width:6px;height:6px;flex:0 0 6px;background:var(--red);
  transform:translateY(-2px);
}
.phase li p{font-size:14px;line-height:1.7;color:var(--muted-d);margin-top:6px;padding-left:16px;}
.cap .oneline{
  margin-top:34px;padding:24px 0;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
}
.cap .oneline .t{
  font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:.01em;
  line-height:1.4;text-transform:uppercase;color:#fff;
}
.cap .oneline .t em{color:var(--red);}
.cap .oneline p{font-size:14.5px;line-height:1.8;color:var(--body-d);max-width:520px;}

/* ══════════════════ 4 · VFO³ APPLIED TO BALLOT ACCESS ══════════════════
   The approved site-wide framework, applied to this category. Four stages plus
   the return loop. No competing methodology. */
.system{background:var(--paper);padding:90px 0 96px;}
.system h2 em{color:var(--red);}
.system .sup{font-size:.58em;vertical-align:super;letter-spacing:0;}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px;}
.step{
  position:relative;background:var(--offwhite);border:1px solid var(--line-l);border-top:3px solid;
  padding:32px 26px 30px;transition:transform .26s,box-shadow .26s;
}
.step:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(9,9,9,.13);}
.step .n{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.step .n .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.step h3{
  font-size:clamp(20px,1.65vw,25px);color:var(--black);margin-top:16px;
  text-transform:uppercase;letter-spacing:-0.02em;
}
.step .imp{font-size:13.5px;font-weight:700;letter-spacing:.05em;line-height:1.6;margin-top:12px;color:var(--body-l);}
.step .lbl{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-l);margin-top:20px;padding-top:16px;border-top:1px solid var(--line-l);
}
.step ul{margin-top:12px;display:flex;flex-direction:column;gap:7px;}
.step li{
  font-size:14px;line-height:1.6;color:var(--body-l);
  display:flex;align-items:baseline;gap:9px;
}
.step li::before{content:'';width:5px;height:5px;flex:0 0 5px;background:currentColor;opacity:.5;transform:translateY(-2px);}
.step .arrow{position:absolute;right:-15px;top:56px;font-size:17px;font-weight:700;color:var(--muted-l);z-index:2;}
.loopback{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap;}
.loopback .k{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);white-space:nowrap;
}
.loopback .rline{
  position:relative;flex:1;min-width:120px;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--red));opacity:.85;
}
/* A single 9px marker travels the return line from the Better Strategy end back
   to the Strategy end, holds briefly, and repeats. Slow, no flash, no pulse. */
.loopback .rline .pip{
  position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 5px rgba(236,27,51,.14);
  animation:vfo3-return 6.4s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes vfo3-return{
  0%      {left:100%; opacity:0;}
  6%      {left:100%; opacity:1;}
  70%     {left:0;    opacity:1;}
  84%     {left:0;    opacity:1;}
  92%,100%{left:0;    opacity:0;}
}
.loopback .rarw{color:var(--orange);font-weight:700;margin-right:4px;}
.loopback .n{font-size:14.5px;line-height:1.8;color:var(--body-l);}
.sequence{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:28px;
  padding:24px 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
}
.sequence .s{
  font-size:14.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.sequence .s .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.sequence .arw{color:var(--muted-l);font-weight:700;font-size:16px;}
.sequence .rtn{
  margin-left:6px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);display:inline-flex;align-items:center;gap:8px;
}

/* ══════════════════ 5 · QUALITY AT SCALE ══════════════════ */
.qas{position:relative;background:var(--black);padding:86px 0 90px;overflow:hidden;}
.qas-in{position:relative;}
.qas h2 em{color:var(--red);}
.qas-head{max-width:900px;}
.qas-head .h-sec em{color:var(--red);}
.qas-lead{
  margin-top:40px;display:grid;grid-template-columns:1.04fr .96fr;gap:0 64px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid var(--line-d);
}
.qas-close{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line-d);
  font-size:clamp(17px,1.4vw,21px);font-weight:700;line-height:1.45;letter-spacing:-0.005em;
  text-transform:uppercase;color:#fff;
}
.qas-lead .big{
  font-size:clamp(23px,2vw,30px);font-weight:700;line-height:1.28;letter-spacing:-0.025em;
  text-transform:uppercase;color:#fff;
}
.qas-lead .big em{color:var(--red);}
.qas-lead p{font-size:16.5px;line-height:1.85;color:var(--body-d);}
.qas-lead p + p{margin-top:16px;}
.qas-lead p strong{color:#fff;font-weight:600;}
.standards{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.standards span{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body-d);border:1px solid var(--line-d);padding:8px 13px;line-height:1.4;
}
.wallgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-d);border-left:1px solid var(--line-d);
  margin-top:38px;
}
.wp{
  position:relative;padding:32px 28px 34px;
  border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  transition:background-color .24s;
}
.wp:hover{background:#121214;}
.wp .v{
  font-size:clamp(28px,2.5vw,36px);font-weight:700;line-height:1.05;letter-spacing:-0.035em;
  text-transform:uppercase;color:var(--red);
}
.wp .v.sm{font-size:clamp(22px,1.9vw,27px);letter-spacing:-0.02em;line-height:1.15;}
.wp .l{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-top:14px;line-height:1.75;min-height:40px;
}
.wp .c{
  font-size:14px;line-height:1.75;color:var(--body-d);margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-d);
}
/* PHOTO SLOT 2 — the frame follows the photograph's own proportion rather than
   forcing a wide crop on a portrait image. */
.qas-foot{
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line-d);
  display:grid;grid-template-columns:300px 1fr;gap:0 52px;align-items:center;
}
.qas-photo .ph{aspect-ratio:1/1;}
.qas-foot-copy{max-width:620px;}
.qas-foot-copy .note{margin-top:16px;}
.qas-foot-copy .note:first-of-type{margin-top:14px;}

.note{
  margin-top:26px;font-size:12.5px;line-height:1.9;letter-spacing:.03em;color:var(--muted-d);
  max-width:960px;
}

/* ══════════════════ 6 · VERIFICATION, FRAUD + DEFENSIBILITY ══════════════════ */
.verify{background:var(--offwhite);padding:86px 0 90px;}
.verify h2 em{color:var(--red);}
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px;}
.link{
  position:relative;background:var(--paper);border:1px solid var(--line-l);border-top:3px solid var(--red);
  padding:24px 20px 26px;
}
.link .n{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--red);}
.link h3{
  font-size:15px;font-weight:700;line-height:1.3;letter-spacing:0;
  text-transform:uppercase;color:var(--black);margin-top:12px;min-height:39px;
}
.link p{font-size:13.5px;line-height:1.7;color:var(--body-l);margin-top:12px;padding-top:12px;border-top:1px solid var(--line-l);}
.link .arrow{
  position:absolute;right:-12px;top:50%;transform:translateY(-50%);
  font-size:15px;font-weight:700;color:var(--muted-l);z-index:2;
}
.vbody{margin-top:44px;display:grid;grid-template-columns:1.06fr .94fr;gap:0 64px;align-items:start;}
.vbody p{font-size:16.5px;line-height:1.85;color:var(--body-l);}
.vbody p + p{margin-top:18px;}
.vbody p strong{color:var(--black);font-weight:600;}
.vbody .big{
  font-size:clamp(23px,1.95vw,29px);font-weight:700;line-height:1.32;letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--black);margin-bottom:20px;
}
.vbody .big em{color:var(--red);}
/* Compliance positioning. Leads with the discipline, not with the limitation. */
.counsel{
  margin-top:38px;border-left:3px solid var(--red);padding:30px 34px 32px;
  background:rgba(9,9,9,.03);
  display:grid;grid-template-columns:1.02fr .98fr;gap:0 56px;align-items:start;
}
.counsel-r{padding-top:2px;}
.counsel-l p:first-of-type{margin-top:16px;}
.counsel .h{
  font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:-0.015em;line-height:1.3;
  text-transform:uppercase;color:var(--black);
}
.counsel p{font-size:15px;line-height:1.8;color:var(--body-l);margin-top:14px;}
.counsel p strong{color:var(--black);font-weight:600;}
.reqchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:0;}
.reqchips span{
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--body-l);background:var(--paper);border:1px solid var(--line-l);
  padding:7px 11px;line-height:1.4;
}
.counsel .counsel-close{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line-l);
  font-size:14.5px;font-weight:700;letter-spacing:.02em;line-height:1.6;
  text-transform:uppercase;color:var(--black);
}
.vproof{display:flex;flex-direction:column;gap:16px;}
.vpf{background:var(--paper);border:1px solid var(--line-l);border-left:3px solid var(--red);padding:24px 26px;}
.vpf .v{font-size:clamp(24px,2vw,30px);font-weight:700;line-height:1.05;letter-spacing:-0.03em;text-transform:uppercase;color:var(--black);}
.vpf .l{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-top:10px;line-height:1.7;}
.vpf .c{font-size:14px;line-height:1.75;color:var(--body-l);margin-top:12px;padding-top:12px;border-top:1px solid var(--line-l);}
.vpf .v.sm{font-size:clamp(19px,1.55vw,23px);line-height:1.2;letter-spacing:-0.015em;}
.vpf .c.c2{margin-top:12px;padding-top:0;border-top:none;color:var(--muted-l);}

/* ══════════════════ 7 · PROOF / RESULTS ══════════════════ */
.proof{background:var(--black);padding:90px 0 94px;}
.proof h2 em{color:var(--red);}
.pgrid{display:grid;grid-template-columns:1.28fr 1fr 1fr;gap:22px;margin-top:50px;}
.pcard{
  display:flex;flex-direction:column;background:var(--card-d);
  border:1px solid var(--line-d);border-top:3px solid var(--red);
  transition:transform .26s,box-shadow .26s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(0,0,0,.62);}
.pcard-hd{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 28px;border-bottom:1px solid var(--line-d);
}
.pcard-hd .cat{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);white-space:nowrap;}
.pcard-hd .file{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d);white-space:nowrap;}
.pcard-bd{padding:32px 28px 30px;display:flex;flex-direction:column;flex:1;}
.headline{display:flex;flex-direction:column;gap:4px;}
.headline .r{
  font-size:clamp(27px,2.35vw,35px);font-weight:700;line-height:1.1;letter-spacing:-0.035em;
  text-transform:uppercase;color:#fff;
}
.headline .r.acc{color:var(--red);}
.pcard .did{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);margin-top:24px;}
.pcard ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.pcard li{font-size:14.5px;line-height:1.7;color:var(--body-d);display:flex;align-items:baseline;gap:10px;}
.pcard li::before{content:'';width:5px;height:5px;flex:0 0 5px;background:var(--red);transform:translateY(-2px);}
.pcard .copy{font-size:15px;line-height:1.8;color:var(--body-d);margin-top:12px;}
.pcard .proofline{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:26px;}
.pcard .proofline span{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body-d);border:1px solid var(--line-d);padding:7px 12px;
}

/* ══════════════════ 8 · TESTIMONIAL — APPROVED COMPONENT ══════════════════ */
.tstm{padding:64px 0;background:var(--paper);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);}
.tstm-in{display:grid;grid-template-columns:auto 1fr;gap:0 40px;align-items:start;}
.tstm .qm{font-size:96px;font-weight:800;line-height:.72;letter-spacing:-0.04em;color:var(--red);opacity:.9;}
.tstm .k{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l);}
.tstm .slot{
  margin-top:18px;border:1.5px dashed rgba(9,9,9,.24);padding:34px;
  display:flex;flex-direction:column;gap:12px;
}
.tstm .slot .h{
  font-size:clamp(19px,1.5vw,23px);font-weight:700;letter-spacing:.02em;line-height:1.4;
  text-transform:uppercase;color:var(--black);
}
.tstm .slot .s{font-size:14.5px;line-height:1.85;color:var(--body-l);max-width:820px;}
.tstm .slot .attr{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-l);padding-top:14px;border-top:1px solid var(--line-l);
}
/* ── Testimonial quote: excerpt by default, full text one control away ── */
.tq{max-width:900px;}
.tq p{
  font-size:16px;font-weight:400;line-height:1.75;color:var(--body-l);margin-top:14px;
}
.tq p:first-child{margin-top:0;}
.tq .pull{
  font-size:clamp(20px,1.7vw,26px);font-weight:600;line-height:1.45;letter-spacing:-0.015em;
  color:var(--black);margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid var(--line-l);
}
.tq .el{color:var(--muted-l);font-weight:600;margin-right:6px;}
#tq-full p:first-child{margin-top:0;}
.tq-toggle{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);padding-bottom:5px;border-bottom:2px solid currentColor;
  transition:gap .22s,color .22s;
}
.tq-toggle:hover{gap:16px;color:#C9142A;}
.tq-toggle .ico{transition:transform .22s;}
.tq-toggle[aria-expanded="true"] .ico{transform:rotate(-90deg);}
.tstm .cite{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line-l);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--black);
}
.tstm .cite .org{display:block;color:var(--muted-l);margin-top:6px;letter-spacing:.16em;}

/* ══════════════════ 9 · IDEAL CLIENT + BUYER TRIGGERS ══════════════════
   The petition-management-partner statement is one of the major visual moments
   on the page, so it is set at hero weight rather than as a section label.
   Individual capabilities are stated after the triggers, deliberately
   secondary. Nothing here characterises another firm. */
.when{background:var(--offwhite);padding:88px 0 92px;}
.partner-head{max-width:960px;}
.partner-h{
  font-size:clamp(34px,3.35vw,50px);font-weight:700;line-height:1.06;letter-spacing:-0.03em;
  text-transform:uppercase;color:var(--black);margin-top:22px;
}
.partner-h em{color:var(--red);}
.partner-body{
  margin-top:38px;display:grid;grid-template-columns:1.12fr .88fr;gap:0 64px;align-items:start;
  padding-bottom:26px;
}
.partner-body p{font-size:16.5px;line-height:1.8;color:var(--body-l);}
.partner-body p + p{margin-top:16px;}
.partner-lead-in{
  margin-top:20px !important;padding-top:18px;border-top:1px solid var(--line-l);
  font-weight:600;color:var(--black) !important;
}
.visibility{border-left:3px solid var(--red);padding:4px 0 4px 26px;}
.visibility .vh{
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--red);
}
.visibility ul{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
.visibility li{
  font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-0.005em;color:var(--black);
}
.visibility .vfoot{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-l);
  font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-l);
}

/* Peace of mind — one statement, one placement, full-width dark band. */
.pom{background:var(--black);padding:54px 0 56px;}
.pom-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1.16fr .84fr;gap:0 60px;align-items:end;
}
.pom-t{
  font-size:clamp(25px,2.25vw,34px);font-weight:700;line-height:1.32;letter-spacing:-0.025em;
  text-transform:uppercase;color:#fff;
}
.pom-t em{color:var(--red);}
.pom-s{font-size:15.5px;line-height:1.8;color:var(--body-d);}

/* Buyer triggers — situation to why, compact, two columns. Not a service menu. */
.triggers{padding-top:40px;}
.trig-h{
  font-size:clamp(24px,2vw,30px);font-weight:700;line-height:1.25;letter-spacing:-0.025em;
  text-transform:uppercase;color:var(--black);
}
.triggrid{
  margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;
  border-top:1px solid var(--line-l);
}
.trig{padding:17px 0;border-bottom:1px solid var(--line-l);}
.trig .s{
  font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.35;color:var(--black);
  display:flex;align-items:baseline;gap:10px;
}
.trig .s::before{
  content:'';width:7px;height:7px;flex:0 0 7px;background:var(--red);transform:translateY(-2px);
}
.trig .w{font-size:14.5px;line-height:1.7;color:var(--body-l);margin-top:7px;padding-left:17px;}
.trig-foot{
  margin-top:20px;font-size:15px;line-height:1.8;color:var(--body-l);max-width:900px;
}

/* ══════════════════ MID-PAGE CONVERSION POINTS ══════════════════
   Three of them, built entirely out of existing page furniture: the display type
   scale, the red 3px rule from the hero lockup, the red left edge used by the
   Visibility and compliance blocks, and the approved button. One dominant action
   throughout — START A CONVERSATION. Weight runs light → strong → light so none
   of them competes with the final close.
   ══════════════════════════════════════════════════════════════════════════ */
.ctainline{
  display:grid;grid-template-columns:1fr auto;gap:0 48px;align-items:center;
}
.ctainline .ct{
  font-size:clamp(21px,1.75vw,26px);font-weight:700;line-height:1.28;letter-spacing:-0.02em;
  text-transform:uppercase;
}
.ctainline .ct em{color:var(--red);}
.ctainline .cs{font-size:15px;line-height:1.7;margin-top:9px;max-width:620px;}
.ctainline .btn{white-space:nowrap;}

/* 1 · closes the three-phase section, on black */
.cta-dark{padding-top:30px;}
.cta-dark .ct{color:#fff;}
.cta-dark .cs{color:var(--body-d);}

/* 2 · after the proof. The red rule is the same 3px treatment as the hero lockup,
       which is what gives this one its extra weight. */
.cta-proof{
  margin-top:52px;padding-top:34px;border-top:3px solid var(--red);
}
.cta-proof .ct{
  font-size:clamp(26px,2.15vw,33px);letter-spacing:-0.028em;color:#fff;
}
.cta-proof .cs{font-size:15.5px;color:var(--body-d);margin-top:12px;}

/* 3 · inline and restrained, on off-white. No second red accent in the copy —
       the partner headline above already owns the red in this section. */
.cta-light{
  margin-top:44px;border-left:3px solid var(--red);padding:22px 0 22px 26px;
}
.cta-light .ct{font-size:clamp(19px,1.55vw,23px);color:var(--black);}
.cta-light .cs{color:var(--body-l);}

@media (max-width:1180px){
  .ctainline{grid-template-columns:1fr;gap:24px;align-items:start;}
}

/* ══════════════════ 10 · FINAL CTA ══════════════════ */
.final{position:relative;background:var(--black);border-top:1px solid var(--line-d);padding:104px 0 106px;overflow:hidden;}
.final-mark{position:absolute;top:-30%;right:-8%;width:52%;aspect-ratio:420/430;
  background:var(--mark) center/contain no-repeat;opacity:.05;pointer-events:none;}
.final-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.final h2{
  font-size:clamp(40px,4.2vw,56px);line-height:1.06;letter-spacing:-0.035em;
  color:#fff;text-transform:uppercase;margin-top:24px;max-width:860px;
}
.final h2 em{color:var(--red);}
.final p{font-size:17px;line-height:1.8;color:var(--body-d);max-width:640px;margin-top:24px;}
.final p strong{color:#fff;font-weight:600;}
.final .cta{margin-top:40px;display:flex;align-items:center;gap:34px;flex-wrap:wrap;}
.final .cta .tlink{color:var(--muted-d);}
.final .cta .tlink:hover{color:#fff;}

/* ══════════════════ DESKTOP RANGE TUNING (1280–1920) ══════════════════ */
@media (max-width:1500px){
  .pgrid{grid-template-columns:1.2fr 1fr 1fr;}
}
@media (max-width:1400px){
  :root{--pad:40px;}
  .hero-grid{gap:0 52px;}
  .hero-figure{min-height:470px;}
  .risk{padding:24px 22px 26px;}
  .wp{padding:28px 24px 30px;}
  .phase{padding:30px 26px 28px;}
  .step{padding:28px 22px 26px;}
  .chain{gap:12px;}
  .link{padding:22px 17px 24px;}
  .cap-mark{width:380px;right:-120px;}
}
/* Responsive fundamentals only — the intentional mobile design is a separate
   build (ballot-access-petition-mobile.html). */
@media (max-width:1180px){
  .sec-head{grid-template-columns:1fr;gap:26px;}
  .sec-head .head-r{padding-bottom:0;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-figure{margin-top:48px;min-height:400px;}
  .riskgrid,.wallgrid{grid-template-columns:1fr 1fr;}
  .phgrid,.flow{grid-template-columns:1fr 1fr;}
  .chain{grid-template-columns:1fr 1fr 1fr;}
  .link .arrow{display:none;}
  .step .arrow{display:none;}
  .pgrid,.whengrid{grid-template-columns:1fr;}
  .problem .close,.qas-lead,.vbody,.timing-in{grid-template-columns:1fr;gap:32px;}
  .fgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .nav-links a:not(.btn),.has-sub{display:none;}
  .riskgrid,.wallgrid,.phgrid,.flow,.chain{grid-template-columns:1fr;}
  .tstm-in{grid-template-columns:1fr;gap:18px;}
  .fdescriptor{white-space:normal;}
}

/* ══════════════════ FOOTER — APPROVED, CORRECTED TERMINOLOGY ══════════════════ */
footer{background:var(--black);border-top:1px solid var(--line-d);padding:66px 0 32px;}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:54px;}
.fbrand img{width:236px;}
.tagline{margin-top:26px;}
.tagline .l{display:block;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;line-height:1.9;white-space:nowrap;}
.tagline .r{color:var(--red);}
.tagline .b{color:var(--teal);}
.tagline .g{color:var(--gold);}
.fdescriptor{margin-top:18px;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--muted-d);line-height:1.6;}
.fcontact{margin-top:20px;font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-d);line-height:2.15;}
.fcontact a:hover{color:var(--offwhite);}
.fcol .h{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--offwhite);margin-bottom:20px;}
.fcol li{margin-bottom:12px;}
.fcol a{font-size:14px;color:var(--body-d);transition:color .2s;}
.fcol a:hover{color:#fff;}
.fcol a.current{color:var(--red);}
.legal{
  margin-top:52px;padding-top:26px;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);
}

.cap-under{
  margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.8;
}

/* ══════════════════ MOTION — APPROVED ══════════════════ */
.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;}
  /* The return marker rests at the Strategy end — the static equivalent of
     having completed the loop — fully visible. */
  .loopback .rline .pip{left:0;opacity:1;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIX IFRAME COMPATIBILITY — TECHNICAL ONLY, NO DESIGN CHANGE
   ═══════════════════════════════════════════════════════════════════════════ */
html{background:var(--black);overflow-x:clip;}
body{overflow-x:clip;max-width:100%;min-height:100vh;}
html.vfo-embed-tall .nav{position:static;}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO VISUAL — PETITION QUALIFICATION ENGINE  (review alternative only)
   ═══════════════════════════════════════════════════════════════════════════
   Occupies the same territory as the hero photograph it replaces. No divider
   rule between the panel and the black ground — the permanent VFO rule holds.
   Red dominant; teal for verification, orange for review, gold for validated
   and for the threshold. Nothing else.

   Every animation shares one 20s duration and encodes its timing in keyframe
   percentages, so the whole panel stays in phase without JavaScript.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-engine{min-height:560px;justify-content:flex-start;}
.hero-engine .qeng{
  position:relative;flex:1;display:flex;flex-direction:column;gap:16px;
  padding:22px 22px 20px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(236,27,51,.09), transparent 60%),
    linear-gradient(180deg,#0E0E11,#0A0A0C);
  border:1px solid var(--line-d);
}
/* Faint operational grid — texture only, never a focal element. */
.hero-engine .qeng::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, rgba(247,241,235,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,241,235,.045) 1px, transparent 1px);
  background-size:34px 34px;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.qeng-hd{
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  min-height:32px;padding-bottom:13px;border-bottom:1px solid var(--line-d);
}
.qeng-ttl{
  display:flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.5;min-width:0;
}
.qeng-ttl .dot{
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--red);
  animation:qe-beat 20s linear infinite;
}
@keyframes qe-beat{
  0%,100%{opacity:.35;} 4%{opacity:1;} 20%{opacity:.5;} 24%{opacity:1;}
  46%{opacity:.5;} 50%{opacity:1;} 72%{opacity:.5;} 80%{opacity:1;}
}
.qeng-phase{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;line-height:1.5;flex:0 0 auto;
}

/* ── stage rail: COLLECT → VERIFY → AUDIT → QUALIFY ─────────────────────── */
.qeng-rail{position:relative;padding:4px 0 2px;}
.rail-track{
  position:absolute;left:7%;right:7%;top:10px;height:2px;
  background:rgba(247,241,235,.11);overflow:hidden;
}
.rail-fill{
  position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--red),var(--teal) 42%,var(--orange) 70%,var(--gold));
  animation:qe-rail 20s linear infinite;
}
@keyframes qe-rail{
  0%{width:0;} 16%{width:22%;} 34%{width:42%;} 50%{width:52%;}
  64%{width:72%;} 80%{width:96%;} 88%,100%{width:100%;}
}
.rail-nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);}
.rail-nodes .node{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.3;transition:color .3s;
}
.rail-nodes .node i{
  width:11px;height:11px;border-radius:50%;
  background:#131317;border:1.5px solid rgba(247,241,235,.22);
}
.rail-nodes .n1 i{animation:qe-n1 20s linear infinite;}
.rail-nodes .n2 i{animation:qe-n2 20s linear infinite;}
.rail-nodes .n3 i{animation:qe-n3 20s linear infinite;}
.rail-nodes .n4 i{animation:qe-n4 20s linear infinite;}
.rail-nodes .n1{animation:qe-l1 20s linear infinite;}
.rail-nodes .n2{animation:qe-l2 20s linear infinite;}
.rail-nodes .n3{animation:qe-l3 20s linear infinite;}
.rail-nodes .n4{animation:qe-l4 20s linear infinite;}
@keyframes qe-n1{0%,2%{background:#131317;border-color:rgba(247,241,235,.22);}
  6%,100%{background:var(--red);border-color:var(--red);}}
@keyframes qe-n2{0%,17%{background:#131317;border-color:rgba(247,241,235,.22);}
  21%,100%{background:var(--teal);border-color:var(--teal);}}
@keyframes qe-n3{0%,46%{background:#131317;border-color:rgba(247,241,235,.22);}
  50%,100%{background:var(--orange);border-color:var(--orange);}}
@keyframes qe-n4{0%,74%{background:#131317;border-color:rgba(247,241,235,.22);}
  78%,100%{background:var(--gold);border-color:var(--gold);}}
@keyframes qe-l1{0%,2%{color:var(--muted-d);} 6%,100%{color:#fff;}}
@keyframes qe-l2{0%,17%{color:var(--muted-d);} 21%,100%{color:#fff;}}
@keyframes qe-l3{0%,46%{color:var(--muted-d);} 50%,100%{color:#fff;}}
@keyframes qe-l4{0%,74%{color:var(--muted-d);} 78%,100%{color:#fff;}}

/* ── records field ──────────────────────────────────────────────────────── */
.qeng-field{
  position:relative;flex:1;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:7px 8px;
}
/* Verification sweep — one slow pass, once per cycle. */
.sweep{
  position:absolute;top:-4px;bottom:-4px;left:0;width:38%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(15,168,185,.16) 45%,rgba(15,168,185,.42) 50%,rgba(15,168,185,.16) 55%,transparent);
  opacity:0;animation:qe-sweep 20s linear infinite;
}
@keyframes qe-sweep{
  0%,16%{transform:translateX(-100%);opacity:0;}
  19%{opacity:1;} 34%{transform:translateX(265%);opacity:1;}
  37%,100%{transform:translateX(265%);opacity:0;}
}
.rec{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:0 10px 0 13px;min-height:26px;
  background:rgba(247,241,235,.028);border:1px solid rgba(247,241,235,.09);
  opacity:0;animation:qe-rec 20s linear infinite;
  animation-delay:calc(var(--i) * .11s);
}
@keyframes qe-rec{
  0%{opacity:0;transform:translateY(9px);}
  9%,92%{opacity:1;transform:none;}
  99%,100%{opacity:0;transform:translateY(-6px);}
}
/* the abstract record lines — geometry only */
.rec .ln{display:block;height:2px;border-radius:1px;background:rgba(247,241,235,.20);}
.rec .ln.a{width:62%;}
.rec .ln.b{width:38%;background:rgba(247,241,235,.13);}
/* left edge carries the record's state: red collected, teal scanned, gold valid */
.rec .edge{
  position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);
  animation:qe-edge 20s linear infinite;
}
@keyframes qe-edge{
  0%,20%{background:var(--red);}
  26%,42%{background:var(--teal);}
  50%,100%{background:var(--gold);}
}
/* validated: one restrained gold breath, not a checkmark */
.rec::after{
  content:'';position:absolute;inset:-1px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(248,174,50,0);
  animation:qe-valid 20s linear infinite;
}
@keyframes qe-valid{
  0%,44%{box-shadow:inset 0 0 0 1px rgba(248,174,50,0);background:transparent;}
  50%{box-shadow:inset 0 0 0 1px rgba(248,174,50,.55);background:rgba(248,174,50,.05);}
  60%,100%{box-shadow:inset 0 0 0 1px rgba(248,174,50,.14);background:transparent;}
}

/* ── flagged records: held for audit review, then cleared or removed ─────── */
.rec.flagged .edge{animation:qe-edge-flag 20s linear infinite;}
@keyframes qe-edge-flag{
  0%,20%{background:var(--red);}
  26%,44%{background:var(--teal);}
  50%,70%{background:var(--orange);}
  76%,100%{background:var(--gold);}
}
.rec.flagged.removed .edge{animation:qe-edge-rm 20s linear infinite;}
@keyframes qe-edge-rm{
  0%,20%{background:var(--red);}
  26%,44%{background:var(--teal);}
  50%,100%{background:var(--orange);}
}
.rec.flagged::after{animation:qe-valid-flag 20s linear infinite;}
@keyframes qe-valid-flag{
  0%,46%{box-shadow:inset 0 0 0 1px rgba(240,117,33,0);}
  52%,70%{box-shadow:inset 0 0 0 1px rgba(240,117,33,.5);background:rgba(240,117,33,.05);}
  78%,100%{box-shadow:inset 0 0 0 1px rgba(248,174,50,.14);background:transparent;}
}
.rec.flagged .chip{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);background:rgba(240,117,33,.12);
  border:1px solid rgba(240,117,33,.42);padding:2px 5px;line-height:1.3;
  opacity:0;animation:qe-chip 20s linear infinite;
}
@keyframes qe-chip{
  0%,47%{opacity:0;transform:translateY(-50%) translateX(5px);}
  53%,68%{opacity:1;transform:translateY(-50%);}
  76%,100%{opacity:0;transform:translateY(-50%);}
}
.rec.flagged.cleared.d2 .chip{animation-delay:.5s;}
/* removed from the qualification count — fades out, does not vanish abruptly */
.rec.flagged.removed{animation:qe-rec-rm 20s linear infinite;}
@keyframes qe-rec-rm{
  0%{opacity:0;transform:translateY(9px);}
  9%,70%{opacity:1;transform:none;}
  80%,100%{opacity:.16;transform:none;filter:saturate(.2);}
}
.rec.flagged.removed .chip{animation:qe-chip-rm 20s linear infinite;}
@keyframes qe-chip-rm{
  0%,47%{opacity:0;} 53%,76%{opacity:1;} 86%,100%{opacity:0;}
}

/* ── qualification meter ────────────────────────────────────────────────── */
.qeng-qual{position:relative;padding-top:14px;border-top:1px solid var(--line-d);}
.qm-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;}
.qm-k{
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.5;max-width:150px;
}
.qm-v{
  font-size:clamp(30px,2.6vw,38px);font-weight:700;line-height:.95;letter-spacing:-0.035em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.qm-v .pc{font-size:.48em;margin-left:2px;letter-spacing:0;}

.bars{position:relative;margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.bar{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;}
.bar .bk{
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.3;
}
.bar .track{position:relative;height:9px;background:rgba(247,241,235,.07);overflow:hidden;}
.bar .fill{position:absolute;inset:0 auto 0 0;width:0;}
.f-col{background:linear-gradient(90deg,#8E1220,var(--red));animation:qe-col 20s linear infinite;}
.f-ver{background:linear-gradient(90deg,var(--teal),#7FD0DA);animation:qe-ver 20s linear infinite;}
.bar .track .f-buf{
  left:56%;right:auto;background:linear-gradient(90deg,var(--gold),#FFD98A);
  animation:qe-buf 20s linear infinite;
}
/* The requirement marker sits at 56% of the track. VERIFIED is drawn as a
   percentage OF that requirement, so the teal bar and the counter always agree:
   reaching the marker is exactly 100%. The gold segment continues from the
   marker — it is the buffer, not a separate quantity starting from zero. */
@keyframes qe-col{
  0%{width:0;} 12%{width:34%;} 30%{width:62%;} 52%{width:80%;} 74%{width:92%;} 86%,100%{width:96%;}
}
@keyframes qe-ver{
  0%,17%{width:0;} 37%{width:29.1%;} 47%{width:38.1%;} 71%{width:48.2%;} 79%,100%{width:56%;}
}
@keyframes qe-buf{
  0%,79%{width:0;} 90%,100%{width:4.5%;}
}
/* the requirement marker — the line the verified count has to clear */
.bars .req{
  position:absolute;left:calc(74px + (100% - 74px) * .56);top:-4px;bottom:-2px;
  display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none;
}
.bars .req i{
  flex:1;width:2px;background:repeating-linear-gradient(180deg,rgba(247,241,235,.62) 0 3px,transparent 3px 6px);
}
.bars .req em{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(247,241,235,.62);white-space:nowrap;font-style:normal;
}
.buf-note{
  margin-top:10px;padding-left:74px;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);line-height:1.4;opacity:0;
  animation:qe-bufnote 20s linear infinite;
}
@keyframes qe-bufnote{0%,78%{opacity:0;} 86%,100%{opacity:1;}}
.qeng-state{
  margin-top:15px;padding-top:12px;border-top:1px solid var(--line-d);
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);line-height:1.5;
}
.cap-eng{
  margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.8;
}

/* ── desktop range ──────────────────────────────────────────────────────── */
@media (max-width:1400px){
  .hero-engine{min-height:520px;}
  .hero-engine .qeng{padding:19px 18px 17px;gap:13px;}
  .bar{grid-template-columns:58px 1fr;}
  .bars .req{left:calc(68px + (100% - 68px) * .56);}
}
@media (max-width:1180px){
  .hero-engine{min-height:0;}
  .hero-engine .qeng{min-height:520px;}
}

/* ── reduced motion: the finished state, held still ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .qeng *,.qeng *::before,.qeng *::after{animation:none !important;}
  .qeng-ttl .dot{opacity:1;}
  .rail-fill{width:100%;}
  .rail-nodes .node{color:#fff;}
  .rail-nodes .n1 i{background:var(--red);border-color:var(--red);}
  .rail-nodes .n2 i{background:var(--teal);border-color:var(--teal);}
  .rail-nodes .n3 i{background:var(--orange);border-color:var(--orange);}
  .rail-nodes .n4 i{background:var(--gold);border-color:var(--gold);}
  .sweep{display:none;}
  .rec{opacity:1;transform:none;}
  .rec .edge{background:var(--gold);}
  .rec::after{box-shadow:inset 0 0 0 1px rgba(248,174,50,.14);}
  .rec.flagged .edge{background:var(--gold);}
  .rec.flagged .chip{opacity:1;}
  .rec.flagged.removed{opacity:.16;filter:saturate(.2);}
  .rec.flagged.removed .edge{background:var(--orange);}
  .f-col{width:96%;} .f-ver{width:56%;} .bar .track .f-buf{width:4.5%;}
  .buf-note{opacity:1;}
}