/*
 * bms.css — Bull Moose Strategy · Design System v5 (2026-07 revamp)
 *
 * Shared stylesheet for the new page family: home, /wins, /wins/van-buren,
 * /services, /voter-intel, /pricing, /party-machine, /about, /contact.
 *
 * Source: mockups bms-homepage-mockup.html (v4) + bms-wins.html, merged,
 * plus additional components authored in the same visual language for
 * pages the mockups didn't cover (Results index, Services index, Voter
 * Intel, Pricing, Party Machine, About, Contact form).
 *
 * Loaded async (preload+swap) on every page in this family — see the
 * per-page inlined "critical" <style> block for the above-the-fold subset
 * that must render before this file arrives.
 *
 * ACCESSIBILITY NOTE: --dim was retuned from the mockup's authored value
 * (#7C8698 in both themes) to two theme-specific values so muted/caption
 * text hits WCAG AA (4.5:1) against --bg and --bg-soft in BOTH themes.
 * See report for the contrast math. All other tokens are verbatim.
 */

:root {
  --bg: #FDFCF9; --bg-soft: #F5F3EC; --ink: #141F33; --body: #3D4A61;
  --dim: #5C6B85; /* was #7C8698 — darkened for AA (was 3.58:1, now ~5:1 on --bg) */
  --line: #E5E2D8; --red: #C4212F; --red-dk: #9E1A26; --navy: #12203A; --navy-2: #1A2C4E;
  --gold: #B98A2F; --good: #177A50;
}
:root[data-theme="dark"] {
  --bg: #0F1828; --bg-soft: #152138; --ink: #F2F0E9; --body: #B9BFCC;
  --dim: #8B94A8; /* was #7C8698 — lightened for AA (was 4.38:1 on --bg-soft, now ~5.3:1) */
  --line: #26344F; --red: #E44B59; --red-dk: #C4212F; --navy: #0A1322; --navy-2: #132340;
  --gold: #D8AC55; --good: #3FBE85;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Segoe UI','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1120px; margin:0 auto; padding:0 28px }
.narrow{ max-width:720px; margin:0 auto; padding:0 28px }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.025em; line-height:1.1; text-wrap:balance }
p{ margin:0 }
img{ max-width:100%; display:block }
a{ color:inherit }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

.mono{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-variant-numeric:tabular-nums }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--red); background:color-mix(in srgb, var(--red) 8%, var(--bg)); border:1px solid color-mix(in srgb, var(--red) 22%, var(--bg)); border-radius:99px; padding:7px 16px; margin-bottom:22px }
.sub{ color:var(--body); font-size:19px; max-width:40em }
.micro{ font-size:13.5px; color:var(--dim) }

.btn{ display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; text-decoration:none; font-weight:600; font-size:16.5px; padding:15px 30px; border-radius:10px; border:none; cursor:pointer; transition:background .15s, transform .15s, box-shadow .15s; box-shadow:0 10px 24px -12px color-mix(in srgb, var(--red) 70%, transparent) }
.btn:hover{ background:var(--red-dk); transform:translateY(-1px) }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px }
.btn.sec{ background:var(--bg); color:var(--ink); border:1.5px solid var(--line); box-shadow:none }
.btn.sec:hover{ background:var(--bg-soft); transform:translateY(-1px) }

/* ============================================================
   Header / nav — identical markup+classes on every page in this
   family; hrefs vary by page (home anchors to its own sections,
   subpages link to real page URLs).
   ============================================================ */
header{ position:sticky; top:0; z-index:70; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.bar{ display:flex; align-items:center; justify-content:space-between; padding:15px 0; gap:18px }
.logo{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:21px; letter-spacing:-0.02em; color:var(--ink); text-decoration:none }
.logo .mk{ width:40px; height:40px; border-radius:9px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800 }
nav{ display:flex; gap:28px; align-items:center }
nav a{ color:var(--body); text-decoration:none; font-size:15px; font-weight:500 }
nav a:hover{ color:var(--ink) }
nav a.cta{ background:var(--red); color:#fff; padding:10px 20px; border-radius:8px; font-weight:600 }
nav a.cta:hover{ background:var(--red-dk) }
@media(max-width:840px){ nav a:not(.cta){ display:none } }

/* Staging banner (inline JS on each page prepends this if not on prod host) */
#bms-staging-banner{ position:fixed; top:0; left:0; right:0; z-index:9999; background:var(--red); color:#fff; text-align:center; padding:6px 12px; font-family:sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }

/* ============================================================
   Hero — homepage (centered, product-shot pattern)
   ============================================================ */
.hero{ padding:96px 0 0; text-align:center; position:relative; overflow:hidden }
.masthead{ display:inline-flex; align-items:center; gap:16px; margin-bottom:30px }
.masthead .mm{ width:56px; height:56px; border-radius:13px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; box-shadow:0 12px 28px -14px color-mix(in srgb, var(--red) 75%, transparent) }
.masthead .wm{ font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); line-height:1 }
.masthead .wm b{ color:var(--red) }
.hero .proofline{ font-size:14px; color:var(--body); margin-bottom:26px }
.hero .proofline b{ color:var(--red); font-weight:700 }
.hero h1{ font-size:clamp(40px,5.6vw,68px); max-width:16em; margin:0 auto 24px }
.hero h1 .r{ color:var(--red) }
.hero .sub{ margin:0 auto 36px }
.hero .ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:14px }
.trust{ display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap; color:var(--dim); font-size:13.5px; margin-top:22px }
.trust b{ color:var(--body); font-weight:600 }

/* ---------- inner-page hero variant (breadcrumbs + narrower h1) ---------- */
.crumbs{ padding:26px 0 0; font-size:13.5px; color:var(--dim) }
.crumbs a{ color:var(--red); text-decoration:underline } /* a11y: inline-text link, color alone isn't a sufficient affordance (WCAG 1.4.1) */
.whero{ padding:38px 0 60px; text-align:center }
.whero .eyebrow{ margin-bottom:20px }
.whero h1{ font-size:clamp(36px,5vw,58px); max-width:15em; margin:0 auto 20px }
.whero .dek{ font-size:20px; color:var(--body); max-width:34em; margin:0 auto }
.whero .meta{ display:flex; gap:8px 26px; justify-content:center; flex-wrap:wrap; margin-top:28px; color:var(--dim); font-size:13.5px; font-weight:500 }
.whero .meta b{ color:var(--body) }

/* ============================================================
   Hero product shot (homepage "browser mock")
   ============================================================ */
.shot{ margin:64px auto 0; max-width:980px; position:relative }
.shot::before{ content:""; position:absolute; inset:auto 8% -40px 8%; height:110px; background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--navy) 25%, transparent), transparent 75%); filter:blur(18px); z-index:0 }
.browser{ position:relative; z-index:1; background:var(--navy); border-radius:16px 16px 0 0; border:1px solid var(--navy-2); border-bottom:none; box-shadow:0 40px 90px -40px rgba(10,19,34,.55); overflow:hidden; text-align:left }
.b-top{ display:flex; align-items:center; gap:8px; padding:13px 18px; background:var(--navy-2); border-bottom:1px solid #223455 }
.b-top i{ width:11px; height:11px; border-radius:50%; background:#3A4E75; display:inline-block }
.b-top .url{ margin-left:14px; flex:1; background:#0E1B31; border-radius:7px; color:#8FA0BE; font-size:12px; padding:6px 14px; font-family:ui-monospace,Menlo,monospace }
.b-body{ display:grid; grid-template-columns:1.05fr .95fr; gap:0 }
.b-left{ padding:30px 32px; border-right:1px solid #223455 }
.b-left .bl-t{ color:#8FA0BE; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; font-family:ui-monospace,Menlo,monospace }
.rrow{ display:grid; grid-template-columns:104px 1fr 116px; gap:12px; align-items:center; margin-bottom:11px }
.rrow .nm{ font-size:13.5px; color:#8FA0BE }
.rrow.w .nm{ color:#F2F0E9; font-weight:600 }
.rtrk{ height:9px; border-radius:5px; background:#1B2C4A; overflow:hidden }
/* .rfill is a <span>, so it needs a block-level display for its width/height
   percentages to take effect — without this the bar never actually renders
   at its data-driven width (100% of track, always) on EITHER this card or
   the /wins/van-buren .chart bars, regardless of color. Bare selector so
   the fix benefits both usages; only the color of .rfill differs per page. */
.rfill{ display:block; height:100%; border-radius:5px; background:#6B7FB0 }
.rrow.w .rfill{ background:linear-gradient(90deg,#C4212F,#E44B59) }
/* Fixed-dark hero card: markup uses .pc (not .pcard, which is the unrelated
   pricing-card component below) — this selector previously never matched,
   so labels fell through to var(--ink), which is DARK in light theme and
   invisible on this always-navy card. Scoped to .b-left so it can never
   affect the light-background .chart rows on /wins/van-buren. */
.b-left .rrow .pc{ font-size:12.5px; text-align:right; color:#C4CFE3 }
.b-left .rrow.w .pc{ color:#fff; font-weight:600 }
.bl-src{ color:#5F6E86; font-size:11px; margin-top:16px }
.b-right{ padding:30px 32px; background:#0E1B31 }
.kgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.k{ background:#13284A; border:1px solid #223455; border-radius:10px; padding:16px }
.k .v{ font-size:24px; font-weight:700; color:#F2F0E9; letter-spacing:-0.02em }
.k .v.r{ color:#FF7581 }
.k .v.g{ color:#D8AC55 }
.k .k2{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5F6E86; margin-top:4px }
.heat{ display:grid; grid-template-columns:repeat(18,1fr); gap:3px; margin-top:14px }
.heat i{ aspect-ratio:1; border-radius:2.5px; background:#13284A }
.heat i.h1{ background:#513056 }
.heat i.h2{ background:#8F2740 }
.heat i.h3{ background:#C4212F }
.hcap{ color:#5F6E86; font-size:10.5px; margin-top:10px; letter-spacing:.06em; text-transform:uppercase; font-family:ui-monospace,Menlo,monospace }

.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); padding:20px 0 }
.strip .in{ display:flex; justify-content:center; gap:14px 34px; flex-wrap:wrap; color:var(--dim); font-size:13.5px; font-weight:500 }
.strip b{ color:var(--body) }

/* ============================================================
   Section rhythm
   ============================================================ */
section{ padding:100px 0 }
h2.h{ font-size:clamp(30px,3.8vw,46px); margin-bottom:16px }
.center{ text-align:center }
.center .sub{ margin-left:auto; margin-right:auto }
.section-soft{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.section-navy{ background:var(--navy); color:#F2F0E9 }
.section-navy h2.h{ color:#fff }
.section-navy .sub{ color:#B9BFCC }

/* prose (long-form narrative — used on case study + about + party-machine) */
.prose h2{ font-size:clamp(26px,3.2vw,36px); margin:0 0 16px }
.prose h3{ font-size:20px; margin:36px 0 10px }
.prose p{ margin:0 0 18px; color:var(--body); font-size:17.5px }
.prose p strong{ color:var(--ink) }
.prose .kicker{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin-bottom:8px }
.prose ul.plain{ margin:0 0 18px; padding-left:22px; color:var(--body); font-size:17.5px }
.prose ul.plain li{ margin-bottom:10px }
.prose ul.plain li::marker{ color:var(--red) }
/* a11y: any inline-text link inside narrative copy needs a non-color affordance
   (WCAG 1.4.1 / Lighthouse "links rely on color"). :not(.btn) exempts button-styled
   CTAs that happen to live inside a .prose block (e.g. the case-study "book a call" link). */
.prose a:not(.btn){ text-decoration:underline }

/* ============================================================
   Mentor grid (homepage) — reused for About founder card
   ============================================================ */
.mgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; margin-top:14px }
.pain{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:14px }
.pain li{ display:flex; gap:13px; color:var(--body); font-size:16.5px; align-items:flex-start }
.pain li::before{ content:"\2014"; color:var(--red); font-weight:700 }
.gcard{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -38px rgba(20,31,51,.35) }
:root[data-theme="dark"] .gcard{ background:var(--bg-soft) }
.gphoto{ aspect-ratio:16/9; background:linear-gradient(150deg,var(--bg-soft),var(--line)); display:flex; align-items:center; justify-content:center }
.gphoto span{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
.gphoto img{ width:100%; height:100%; object-fit:cover; object-position:center 20% }
.gbody{ padding:26px 28px }
.gbody h3{ font-size:21px; margin-bottom:8px }
.gbody p{ color:var(--body); font-size:15.5px }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px }
.chips span{ font-size:12.5px; font-weight:600; color:var(--body); background:var(--bg-soft); border:1px solid var(--line); border-radius:99px; padding:6px 14px }

/* ============================================================
   Step / plan grid (homepage "how it works" — reused on
   Voter Intel's 3-step + Contact's 3-step)
   ============================================================ */
.plan{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px }
.step{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px }
:root[data-theme="dark"] .step{ background:var(--bg-soft) }
.step .n{ font-size:13px; font-weight:700; color:var(--red); margin-bottom:12px; letter-spacing:.08em }
.step h3{ font-size:18.5px; font-weight:700; margin-bottom:8px }
.step p{ color:var(--body); font-size:15px }

/* ============================================================
   Services (3-up cards — homepage teaser + /services index)
   ============================================================ */
.svc3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px }
.svc{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; transition:box-shadow .2s, transform .2s }
:root[data-theme="dark"] .svc{ background:var(--bg-soft) }
.svc:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(20,31,51,.3) }
.svc .ic{ width:44px; height:44px; border-radius:11px; background:color-mix(in srgb, var(--red) 9%, #fff); border:1px solid color-mix(in srgb, var(--red) 25%, #fff); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px }
:root[data-theme="dark"] .svc .ic{ background:color-mix(in srgb, var(--red) 16%, var(--bg)) }
.svc h3{ font-size:20px; margin-bottom:8px }
.svc>p{ color:var(--body); font-size:15.5px; margin-bottom:14px }
.svc ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px }
.svc li{ color:var(--body); font-size:14.5px; display:flex; gap:9px }
.svc li::before{ content:"\2713"; color:var(--good); font-weight:700 }
.svc .fit{ margin-top:auto; padding-top:10px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim) }
.svc>p a{ text-decoration:underline } /* a11y: inline "see the deep dive" style links inside the card dek */

/* supplementary "every platform" link grid (services index — keeps the
   existing per-channel SEO pages linked from the new IA) */
.linkgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:28px }
.linkgrid a{ display:block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; text-decoration:none; color:var(--ink); font-size:14.5px; font-weight:600; transition:border-color .2s, box-shadow .2s }
:root[data-theme="dark"] .linkgrid a{ background:var(--bg-soft) }
.linkgrid a:hover{ border-color:var(--red); box-shadow:0 10px 24px -18px rgba(20,31,51,.4) }
.linkgrid a span{ display:block; font-weight:400; color:var(--dim); font-size:12.5px; margin-top:3px }

/* ============================================================
   Pricing (homepage + /pricing + /party-machine)
   ============================================================ */
.pricing{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.p3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; display:flex; flex-direction:column; gap:13px; position:relative }
:root[data-theme="dark"] .pcard{ background:var(--bg) }
.pcard.f{ border:2px solid var(--red); box-shadow:0 28px 60px -34px color-mix(in srgb, var(--red) 55%, transparent) }
.pcard .tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:5px 16px; white-space:nowrap }
.pcard h3{ font-size:18px }
.pcard .amt{ font-size:40px; font-weight:750; letter-spacing:-0.03em }
.pcard .amt small{ font-size:15px; font-weight:500; color:var(--dim) }
.pcard .fit{ font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--red) }
.pcard ul{ margin:4px 0 8px; padding:0; list-style:none; display:grid; gap:9px; flex:1 }
.pcard li{ color:var(--body); font-size:14.5px; display:flex; gap:9px }
.pcard li::before{ content:"\2713"; color:var(--good); font-weight:700 }
.pcard .btn{ justify-content:center }
.pmini2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px }
.pm{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px 26px; display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap }
:root[data-theme="dark"] .pm{ background:var(--bg) }
.pm .t{ font-weight:650 }
.pm .d{ color:var(--body); font-size:14px }
.pm .a{ font-size:21px; font-weight:750 }
.pnote{ text-align:center; margin-top:26px; color:var(--body); font-size:14.5px }

/* ============================================================
   Quotes + FAQ
   ============================================================ */
.q2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px }
.q{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px }
:root[data-theme="dark"] .q{ background:var(--bg-soft) }
.q p{ font-size:17.5px; color:var(--ink) }
.q .who{ margin-top:16px; font-size:14px; color:var(--body) }
.q .who b{ color:var(--ink) }
.q.slot{ display:flex; align-items:center; justify-content:center; min-height:150px }
.q.slot span{ color:var(--dim); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase }
details{ border-bottom:1px solid var(--line) }
summary{ cursor:pointer; padding:22px 0; font-size:17.5px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:18px }
summary::-webkit-details-marker{ display:none }
summary::after{ content:"+"; color:var(--red); font-size:22px; font-weight:400; line-height:1 }
details[open] summary::after{ content:"\2013" }
details .a{ padding:0 0 22px; color:var(--body); max-width:54em; font-size:16px }

/* ============================================================
   CTA band + footer
   ============================================================ */
.cta{ background:var(--navy); color:#F2F0E9; text-align:center; padding:110px 0 }
.cta .eyebrow{ color:#F2D8A8; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14) }
.cta h2{ font-size:clamp(32px,4.4vw,54px); color:#fff; margin-bottom:18px }
.cta .sub{ color:#B9BFCC; margin:0 auto 36px }
footer{ padding:36px 0 24px; color:var(--dim); font-size:14px; border-top:1px solid var(--line) }
.frow{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center }
.flinks{ padding:16px 0 44px; text-align:center; font-size:13px; color:var(--dim) }
.flinks a{ color:var(--dim); text-decoration:none; border-bottom:1px dotted var(--line) }
.flinks a:hover{ color:var(--red); border-color:var(--red) }
.flinks .sep{ margin:0 10px }

/* ============================================================
   Scroll reveal
   Progressive enhancement: .rv is only hidden once html.js confirms
   JS is running (see inline classList.add('js') at top of <head>).
   No-JS / pre-JS content stays fully visible.
   :where(html.js) keeps the qualifier from adding specificity, so
   .rv.on (opacity:1) still outranks the hidden state once JS reveals it.
   ============================================================ */
:where(html.js) .rv{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease }
.rv.on{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none } .rfill{ transition:none } }
@media (prefers-reduced-motion: no-preference){ .rfill{ transition:width 1.1s cubic-bezier(.2,.8,.2,1) .25s } }

/* ============================================================
   Case-study components (/wins/van-buren) — stat band, results
   chart, spend split, pull quote, timeline
   ============================================================ */
.band{ background:var(--navy); color:#F2F0E9; padding:44px 0 }
.band .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center }
.band .s .v{ font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-0.03em; line-height:1 }
.band .s .v.red{ color:#FF7581 }
.band .s .v.gold{ color:#D8AC55 }
.band .s .k{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8FA0BE; margin-top:10px }

.lead{ font-size:20px; color:var(--body) }
.chart{ background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:32px; margin:14px 0 }
.chart .ct{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:20px; font-family:ui-monospace,Menlo,monospace }
.chart .rrow{ display:grid; grid-template-columns:130px 1fr 130px; gap:14px; align-items:center; margin-bottom:13px }
.chart .rrow .nm{ font-size:15px; color:var(--body) }
.chart .rrow.w .nm{ color:var(--ink); font-weight:700 }
.chart .rtrk{ height:22px; border-radius:6px; background:var(--line) }
.chart .rfill{ height:100%; border-radius:6px; background:var(--dim) }
.chart .rrow.w .rfill{ background:linear-gradient(90deg,var(--red),var(--red-dk)) }
.chart .rrow .pc{ font-size:14px; text-align:right; color:var(--body) }
.chart .rrow.w .pc{ color:var(--ink); font-weight:700 }
.chart .src{ font-size:12px; color:var(--dim); margin-top:16px }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 }
.scell{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:24px }
.scell .p{ font-size:13px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px }
.scell .n{ font-size:30px; font-weight:800; letter-spacing:-0.02em }
.scell .d{ font-size:14px; color:var(--body); margin-top:6px }

.pull{ border-left:5px solid var(--red); padding:6px 0 6px 26px; margin:32px 0; font-size:23px; font-style:italic; color:var(--ink) }
.pull .att{ display:block; font-size:14px; font-style:normal; color:var(--dim); margin-top:12px; letter-spacing:.04em }

.tl{ list-style:none; margin:24px 0 0; padding:0; border-left:2px solid var(--line) }
.tl li{ position:relative; padding:0 0 26px 28px }
.tl li::before{ content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--red); border:2px solid var(--bg) }
.tl .wk{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red) }
.tl h3{ font-size:17px; font-weight:700; margin:3px 0 4px }
.tl p{ color:var(--body); font-size:15.5px; margin:0 }

/* ============================================================
   Results index (/wins) — race cards
   ============================================================ */
.rescards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:52px }
.rescard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:box-shadow .2s, transform .2s }
:root[data-theme="dark"] .rescard{ background:var(--bg-soft) }
a.rescard:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(20,31,51,.3) }
.rescard .tag{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red) }
.rescard h3{ font-size:20px }
.rescard p{ color:var(--body); font-size:15px }
.rescard .stats{ display:flex; gap:16px; flex-wrap:wrap; margin-top:6px }
.rescard .stats b{ display:block; font-size:20px; color:var(--ink) }
.rescard .stats span{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim) }
.rescard .arrow{ margin-top:auto; font-size:14px; font-weight:700; color:var(--red) }
.rescard.pending{ opacity:.85 }
.rescard.reserved{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:220px; border-style:dashed }
.rescard.reserved span{ color:var(--dim); font-size:13px; letter-spacing:.08em; text-transform:uppercase }

/* ============================================================
   About — tenets + trust stack + service ladder
   ============================================================ */
.tenet3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:52px }
.tenet{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; position:relative; overflow:hidden }
:root[data-theme="dark"] .tenet{ background:var(--bg-soft) }
.tenet::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s }
.tenet:hover::before{ transform:scaleX(1) }
.tenet .num{ font-size:24px; font-weight:800; color:var(--red); opacity:.3; margin-bottom:10px }
.tenet h3{ font-size:17px; font-weight:700; margin-bottom:8px }
.tenet p{ color:var(--body); font-size:14.5px }

.trust3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:52px }
.trustcard{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px 22px; text-align:center }
:root[data-theme="dark"] .trustcard{ background:var(--bg-soft) }
.trustcard .ic{ font-size:1.8em; margin-bottom:12px; display:block; line-height:1 }
.trustcard h3{ font-size:15px; font-weight:700; margin-bottom:6px }
.trustcard p{ color:var(--dim); font-size:13px; line-height:1.5 }
.trustcard a{ color:var(--red); text-decoration:none; border-bottom:1px dotted color-mix(in srgb, var(--red) 40%, transparent) }
.trustcard a:hover{ border-color:var(--red) }

.ladder{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:36px }
.ladder-mini{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 16px; text-align:center }
:root[data-theme="dark"] .ladder-mini{ background:var(--bg-soft) }
.ladder-mini.f{ border-color:var(--red); border-width:2px }
.ladder-mini .lab{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dim) }
.ladder-mini h3{ font-size:15px; font-weight:700; margin-top:6px }

/* photo slot — reserves space via aspect-ratio so a dropped-in photo
   never causes CLS. Reused wherever a headshot placeholder is needed. */
.photo-slot{ aspect-ratio:4/5; max-width:280px; border-radius:16px; background:linear-gradient(150deg,var(--bg-soft),var(--line)); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; overflow:hidden }
.photo-slot span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim) }
.photo-slot img{ width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:16px }
.photo-slot:has(img){ padding:0 }

/* ============================================================
   Voter Intel — capability + data-source supplemental grids
   ============================================================ */
.bignum{ text-align:center; margin:52px 0 0 }
.bignum .v{ font-size:clamp(48px,7vw,84px); font-weight:800; letter-spacing:-0.03em; color:var(--red); line-height:1 }
.bignum .k{ color:var(--body); font-size:15.5px; max-width:36em; margin:10px auto 0 }
.usegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:24px }
.usegrid a{ display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; text-decoration:none; color:inherit; transition:box-shadow .2s, transform .2s }
:root[data-theme="dark"] .usegrid a{ background:var(--bg-soft) }
.usegrid a:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -26px rgba(20,31,51,.32) }
.usegrid .lab{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:6px }
.usegrid h3{ font-size:15.5px; font-weight:700; margin-bottom:6px }
.usegrid p{ font-size:13.5px; color:var(--body) }

/* ============================================================
   Contact form
   ============================================================ */
.cform{ max-width:640px; margin:44px auto 0; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px }
:root[data-theme="dark"] .cform{ background:var(--bg-soft) }
.cform .fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.cform .ffull{ grid-column:1/-1 }
.cform input, .cform select, .cform textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:15px; transition:border-color .2s;
}
.cform input:focus, .cform select:focus, .cform textarea:focus{ outline:none; border-color:var(--red) }
.cform select{ color:var(--body) }
.cform button[type="submit"]{ width:100%; margin-top:6px }
.cf-turnstile{ min-height:78px; width:100% } /* reserves space so the widget doesn't shift layout on load (CLS) */
.cform .note{ font-size:12.5px; color:var(--dim); margin-top:14px; text-align:center }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:920px){
  .b-body, .mgrid, .q2, .pmini2, .cform .fgrid{ grid-template-columns:1fr }
  .b-left{ border-right:none; border-bottom:1px solid #223455 }
  .svc3, .p3, .plan{ grid-template-columns:1fr }
  section{ padding:72px 0 }
}
@media (max-width:820px){
  .band .row{ grid-template-columns:1fr 1fr; gap:28px 20px }
  .split{ grid-template-columns:1fr }
  .chart .rrow{ grid-template-columns:96px 1fr 96px }
}