/*
Theme Name:   Hello Elementor — Tirmizi Campaign
Theme URI:    https://syedtirmizi.ca
Description:  Child theme of Hello Elementor for the Syed Tirmizi Ward 4 campaign site. Provides the header, footer and the full campaign design system.
Author:       Tirmizi Campaign
Template:     hello-elementor
Version:      7.26.1
Text Domain:  hello-elementor-tirmizi
*/

/* Hello Elementor resets a few things we want back */
.site-main{margin:0;max-width:none}
.site-header,.site-footer{display:none}

/* ============================================================
   Syed Tirmizi — Ward 4, Waterloo
   Waterloo blue / golden yellow / deep green / white.
   ============================================================ */
/* ============================================================
   THE THREE FACES                                      (6.0.0)
   Montserrat for anything that shouts — headings, titles, navigation,
   buttons. Inter for anything you read. Allura for the one script
   word, "Syed", which the brand sheet sets above TIRMIZI.

   Every rule in this file names these tokens rather than a family, so
   putting the old pairing back is three lines:
     --font-display : "Archivo","Arial Narrow",Arial,sans-serif
     --font-body    : "Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif
     --font-script  : "Kaushan Script",cursive
   and the Google Fonts URL in functions.php. The width-axis settings
   are left in place for that reason — Montserrat ignores them,
   Archivo would use them again.

   A full restore point is wordpress/style-BACKUP-5.10.3-archivo-publicsans.css.
   ============================================================ */
:root{
  --font-display:"Montserrat","Segoe UI",Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-script:"Allura","Kaushan Script",cursive;
}

:root{
  /* brand */
  --blue:#1B44C8;            /* strong Waterloo blue  — primary        */
  --blue-deep:#12309A;       /* hover / pressed                        */
  --blue-soft:rgba(27,68,200,.10);
  --yellow:#FFC20E;          /* bright golden yellow — attention       */
  --yellow-deep:#E8A800;
  --yellow-soft:rgba(255,194,14,.18);
  --on-yellow:#0A1F5C;       /* navy ink that sits on yellow           */
  --green:#0F6B3F;           /* deep green — secondary accent          */
  --green-deep:#0A5230;
  --green-soft:rgba(15,107,63,.12);
  --red:#1B44C8;
  --red-deep:#12309A;
  --red-soft:rgba(27,68,200,.10);
  --on-accent:#FFFFFF;
  --on-accent-dim:rgba(255,255,255,.82);

  --char:#0A1F5C;        /* deep navy — the second brand colour */
  --char-2:#122F73;      /* raised on navy */
  --char-3:#1B44C8;      /* navy hover */
  --footer:#071539;      /* footer keeps the dark slate */
  --footer-ink:#A2B3D8;
  --navy-solid:#0A1F5C;  /* solid navy buttons */
  --navy-solid-h:#152F7F;

  /* theme: light */
  --paper:#EAEFFA;       /* page ground the panels float on */
  --surface:#FFFFFF;
  --surface-2:#F3F6FD;
  --line:#D6DEF3;
  --line-soft:#E7ECF9;
  --ink:#0A1740;
  --ink-2:#48546E;
  --ink-3:#76829E;
  --on-dark:#EEF3FF;
  --on-dark-dim:#A9BAE2;

  --flag:#A32020;
  --flag-bg:#FDEBEB;

  /* radii — everything is round */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:34px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(3,24,66,.06), 0 4px 12px rgba(3,24,66,.06);
  --sh-2:0 2px 6px rgba(3,24,66,.07), 0 14px 34px rgba(3,24,66,.10);
  --sh-3:0 4px 10px rgba(3,24,66,.09), 0 26px 56px rgba(3,24,66,.15);
  --sh-red:0 10px 30px rgba(27,68,200,.30);

  --maxw:1200px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --blue:#3C6EFF;
    --blue-deep:#2A57E0;
    --blue-soft:rgba(60,110,255,.20);
    --yellow:#FFC733;
    --yellow-deep:#E8A800;
    --yellow-soft:rgba(255,199,51,.18);
    --on-yellow:#0A1F5C;
    --green:#2FA46B;
    --green-deep:#1C7A4C;
    --green-soft:rgba(47,164,107,.18);
    --red:#3C6EFF;
    --red-deep:#2A57E0;
    --paper:#030A1F;
    --surface:#0A1330;
    --surface-2:#111F45;
    --line:#22346B;
    --line-soft:#1A2A52;
    --ink:#EEF2FF;
    --ink-2:#BCC8E6;
    --ink-3:#8794BC;
    --char:#050F33;
    --char-2:#0D2050;
    --char-3:#2A57E0;
    --footer:#050C22;
    --footer-ink:#98A8CE;
    --navy-solid:#1B44C8;
    --navy-solid-h:#2A57E0;
    --red-soft:rgba(60,110,255,.20);
    --flag:#F3A3A3;
    --flag-bg:#3A1414;
    --sh-1:0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
    --sh-2:0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);
    --sh-3:0 4px 10px rgba(0,0,0,.55), 0 26px 56px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --blue:#3C6EFF;
  --blue-deep:#2A57E0;
  --blue-soft:rgba(60,110,255,.20);
  --yellow:#FFC733;
  --yellow-deep:#E8A800;
  --yellow-soft:rgba(255,199,51,.18);
  --on-yellow:#0A1F5C;
  --green:#2FA46B;
  --green-deep:#1C7A4C;
  --green-soft:rgba(47,164,107,.18);
  --red:#3C6EFF;
  --red-deep:#2A57E0;
  --paper:#030A1F;
  --surface:#0A1330;
  --surface-2:#111F45;
  --line:#22346B;
  --line-soft:#1A2A52;
  --ink:#EEF2FF;
  --ink-2:#BCC8E6;
  --ink-3:#8794BC;
  --char:#050F33;
  --char-2:#0D2050;
  --char-3:#2A57E0;
  --footer:#050C22;
  --footer-ink:#98A8CE;
  --navy-solid:#1B44C8;
  --navy-solid-h:#2A57E0;
  --red-soft:rgba(60,110,255,.20);
  --flag:#F3A3A3;
  --flag-bg:#3A1414;
  --sh-1:0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
  --sh-2:0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);
  --sh-3:0 4px 10px rgba(0,0,0,.55), 0 26px 56px rgba(0,0,0,.5);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.dsp{
  font-family:var(--font-display);
  font-variation-settings:"wdth" 84;font-weight:800;line-height:1;
  letter-spacing:-.01em;text-wrap:balance;margin:0;text-transform:uppercase;
}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:40px}
.narrow{max-width:900px}
.eyebrow{
  font-family:var(--font-display);font-variation-settings:"wdth" 92;
  font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g28{gap:28px}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-3);font-size:.92rem}
.rule{height:4px;width:52px;background:var(--red);border-radius:var(--r-pill)}
.shead{display:flex;flex-direction:column;gap:13px;max-width:58ch}
.shead h2{font-size:clamp(1.9rem,3.7vw,2.85rem)}
.h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}

.todo{background:var(--flag-bg);color:var(--flag);border-radius:var(--r-xs);padding:1px 7px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ============ SECTIONS (Elementor) ============ */
.elementor-section{position:relative;overflow:hidden}
.elementor-section.sec,
.elementor-section.sec-tight,
.elementor-section.hero{background:var(--surface)}
.elementor-section.sec{padding:104px 0}
.elementor-section.sec-tight{padding:76px 0}
.elementor-section.alt,
.elementor-section.news{background:var(--surface-2)}
.elementor-section.votestrip{background:var(--red);color:#fff}
/* the countdown shortcode brings its own .wrap — let the Elementor container do the width */
.votestrip .st-countdown-wrap{max-width:none;padding:0;width:100%}
.elementor-section.hr-top{border-top:1px solid var(--line-soft)}
/* the Elementor container plays the role of .wrap */
.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px !important;padding-inline:40px}
footer.site{position:relative;width:100%;overflow:hidden}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-variation-settings:"wdth" 92;
  font-weight:800;font-size:.9rem;letter-spacing:.045em;text-transform:uppercase;
  padding:16px 30px;border-radius:var(--r-pill);border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), background .16s, color .16s, border-color .16s, box-shadow .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);box-shadow:var(--sh-red)}
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.btn-dark{background:var(--navy-solid);color:#fff;border-color:var(--navy-solid);box-shadow:0 8px 24px rgba(3,24,66,.24)}
.btn-dark:hover{background:var(--navy-solid-h);border-color:var(--navy-solid-h);color:#fff}
.btn-light{background:#fff;color:var(--char);border-color:#fff}
.btn-light:hover{background:#fff;color:var(--red)}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.btn-sm{padding:11px 20px;font-size:.79rem}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;border-radius:var(--r-xs);
}

/* ============ TOP STRIP + HEADER ============ */
.topstrip{
  width:100%;background:var(--char);color:var(--on-dark-dim);
  font-size:.82rem;text-align:center;padding:12px 40px;letter-spacing:.01em;
}
.topstrip b{font-weight:800;color:#fff}

header.site{position:sticky;top:0;z-index:50;width:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(3,24,66,.03)}
header.site .bar{
  max-width:var(--maxw);margin:0 auto;position:relative;
  display:flex;align-items:center;gap:22px;color:var(--ink);padding:16px 40px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .mark{
  width:42px;height:42px;flex:none;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-variation-settings:"wdth" 78;
  font-weight:900;font-size:1.15rem;letter-spacing:.01em;
}
.brand .bn{display:block;font-family:var(--font-display);font-variation-settings:"wdth" 84;font-weight:800;font-size:1.18rem;letter-spacing:.005em;text-transform:uppercase;line-height:1}
.brand .bw{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:4px}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.main ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
nav.main li{display:block}
nav.main a{
  text-decoration:none;color:var(--ink-2);padding:9px 13px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-variation-settings:"wdth" 94;
  font-weight:700;font-size:.79rem;letter-spacing:.05em;text-transform:uppercase;
  transition:color .15s, background .15s;
}
nav.main a:hover{color:var(--ink);background:var(--surface-2)}
nav.main a.active{color:var(--red);background:var(--red-soft)}
nav.main a.btn{padding:11px 20px;font-size:.78rem}
nav.main a.btn-red,nav.main a.btn-red:hover{color:#fff;background:var(--red)}
nav.main a.btn-red:hover{background:var(--red-deep)}
.navcta{margin-left:8px}
#burger{display:none;margin-left:auto;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-pill);padding:10px 15px;cursor:pointer;font-size:1rem;line-height:1}

/* ============ HERO ============ */
.hero{background:var(--surface);color:var(--ink)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 520px at 88% 100%, var(--red-soft), transparent 62%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 46%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:end;padding-block:64px 0;min-height:540px}
.hero-copy{position:relative;z-index:3;padding-bottom:64px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-variation-settings:"wdth" 94;
  font-weight:800;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--red);
  background:var(--red-soft);border:1px solid rgba(27,68,200,.22);border-radius:var(--r-pill);padding:8px 18px;
}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--red);display:block;box-shadow:0 0 0 4px rgba(60,110,255,.20)}
.hero h1{font-size:clamp(2.9rem,6.4vw,5.3rem);font-variation-settings:"wdth" 78;letter-spacing:-.028em;color:var(--ink)}
.hero h1 .em{color:var(--red);display:block}
.hero .sub{font-size:1.08rem;color:var(--ink-2);max-width:50ch}
.hero-btns{display:flex;gap:13px;flex-wrap:wrap}
.pillrow{display:flex;gap:9px;flex-wrap:wrap;padding-top:6px}
.pill{
  display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;
  box-shadow:var(--sh-1);
}
.pill svg{flex:none;stroke:var(--red)}

/* the arch: a civic shape the candidate stands in, not a photo pasted on a gradient */
.hero-photo{position:relative;z-index:2;align-self:end;display:flex;align-items:flex-end;justify-content:center}
.hero-photo .arch{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:0;
  width:min(100%,480px);height:72%;
  background:linear-gradient(168deg,var(--red) 0%, var(--red-deep) 100%);
  border-radius:999px 999px 0 0;
}
.hero-photo .arch::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:calc(100% - 34px);height:calc(100% - 17px);
  border:1px solid rgba(255,255,255,.3);border-bottom:0;
  border-radius:999px 999px 0 0;
}
.hero-photo img{position:relative;z-index:1;width:100%;max-width:400px;margin:0 auto;filter:drop-shadow(0 24px 40px rgba(3,24,66,.34))}

@media (min-width:1100px){
  .hero-grid{position:static;grid-template-columns:minmax(0,640px);padding-block:88px 96px;min-height:660px}
  .hero-copy{padding-bottom:0}
  .hero-photo{
    position:absolute;top:0;right:max(16px,calc((100% - 1520px)/2));bottom:0;
    width:47%;max-width:660px;padding-top:40px;
  }
  .hero-photo .arch{width:min(100%,560px);height:74%}
  .hero-photo img{max-height:92%;width:auto;max-width:100%;margin:0}
}

/* ============ VOTE STRIP ============ */
.votestrip{background:var(--red);color:#fff}
.votestrip .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:18px 34px;align-items:center;padding-top:30px;padding-bottom:30px}
.cd{display:flex;gap:10px}
.cd .unit{background:var(--char);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:11px 14px;text-align:center;min-width:70px}
.cd .n{font-family:var(--font-display);font-variation-settings:"wdth" 84;font-weight:800;font-size:1.75rem;line-height:1;font-variant-numeric:tabular-nums;display:block}
.cd .l{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-top:6px;display:block}
.votestrip .cdtxt{font-family:var(--font-display);font-variation-settings:"wdth" 88;font-weight:800;text-transform:uppercase;font-size:1.12rem;letter-spacing:.01em;line-height:1.2}
.votestrip .cdtxt span{display:block;font-family:var(--font-body);text-transform:none;font-weight:500;font-size:.87rem;letter-spacing:0;opacity:.9;margin-top:5px}

/* ============ CARDS ============ */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:46px}
.pgrid.three{grid-template-columns:repeat(3,1fr)}
.pcard{
  position:relative;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:32px 28px 24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.alt .pcard{background:var(--surface)}
.pcard::before{
  content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(27,68,200,.13), rgba(27,68,200,0) 70%);
  pointer-events:none;
}
.pcard::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--line)}
.pcard:hover::after{transform:scaleX(1)}
.check{
  width:46px;height:46px;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 6px var(--red-soft);
}
.check svg{width:21px;height:21px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pcard h3{font-size:1.24rem;font-variation-settings:"wdth" 88;margin-top:4px}
.pgrid:not(.three) .pcard h3{min-height:2em}
.pcard p{color:var(--ink-2);font-size:.95rem}
.pcard .more{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--red);
  font-family:var(--font-display);font-variation-settings:"wdth" 94;font-weight:800;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.pcard .more span{transition:transform .18s ease;display:inline-block}
.pcard:hover .more span{transform:translateX(4px)}

/* ============ BAND ============ */
.band{background:var(--char);color:var(--on-dark)}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 340px at 50% 130%, rgba(56,104,255,.45), transparent 70%)}
.band .wrap{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.band .slogan{font-family:var(--font-display);font-variation-settings:"wdth" 80;font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.02}
.band .slogan em{font-family:var(--font-script);font-style:normal;text-transform:none;color:var(--red);font-weight:400;font-size:1.05em;padding-right:.1em}
.band .badge{
  font-family:var(--font-display);font-variation-settings:"wdth" 92;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  padding:9px 20px;border-radius:var(--r-pill);
}
.band .attrib{color:var(--on-dark-dim);font-size:.9rem}

/* ============ SPLIT ============ */
.split{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:center}
.split.even{grid-template-columns:1fr 1fr;align-items:start}
.split .ph img{border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.ticks{display:flex;flex-direction:column;gap:15px;margin:6px 0 0;padding:0;list-style:none}
.ticks li{display:flex;gap:14px;align-items:flex-start;color:var(--ink-2)}
.ticks .check{width:28px;height:28px}
.ticks .check svg{width:14px;height:14px}

/* ============ BALLOT CARD ============ */
.ballotwrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ballot{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.ballot .bhead{background:var(--char);color:var(--on-dark);padding:20px 26px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ballot .bhead h3{font-size:1.1rem;font-variation-settings:"wdth" 90}
.ballot .bhead span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim)}
.ballot ul{list-style:none;margin:0;padding:14px}
.ballot li{display:flex;align-items:center;gap:16px;padding:13px 14px;border-radius:var(--r-md)}
.ballot li+li{margin-top:2px}
.ballot li:not(.primary):hover{background:var(--surface-2)}
.ballot li.primary{background:var(--red-soft);border:1px solid rgba(27,68,200,.25)}
.ballot li .box{width:26px;height:26px;flex:none;border:2px solid var(--line);border-radius:var(--r-xs);display:grid;place-items:center;background:var(--surface)}
.ballot li.primary .box{background:var(--red);border-color:var(--red)}
.ballot li.primary .box svg{width:14px;height:14px;stroke:#fff;stroke-width:3.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ballot li .d{font-weight:600;font-size:.96rem}
.ballot li.primary .d{font-family:var(--font-display);font-variation-settings:"wdth" 88;font-weight:800;text-transform:uppercase;font-size:1.02rem;color:var(--red)}
.ballot li .t{margin-left:auto;font-size:.79rem;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.ballot li.primary .t{color:var(--red);font-weight:600}
.ballot .bfoot{padding:16px 26px 22px;border-top:1px solid var(--line-soft);background:var(--surface-2)}

/* ============ CTA CARDS ============ */
.cta2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ctacard{border-radius:var(--r-xl);padding:44px 40px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:relative;overflow:hidden}
.ctacard h3{font-size:1.65rem}
.ctacard.red{background:var(--red);color:#fff;box-shadow:var(--sh-red)}
.ctacard.red p{color:var(--on-accent-dim)}
.ctacard.darkc{background:var(--char);color:var(--on-dark);box-shadow:var(--sh-2)}
.ctacard.darkc p{color:var(--on-dark-dim)}
.ctacard::after{content:"";position:absolute;right:-70px;bottom:-110px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07)}

/* ============ EVENTS ============ */
.evgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.ev{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s}
.ev:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.alt .ev{background:var(--surface)}
.ev .date{display:flex;align-items:center;gap:12px;padding:18px 22px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.ev .date .dd{
  width:52px;height:52px;flex:none;border-radius:var(--r-md);background:var(--red);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-variation-settings:"wdth" 84;
  font-weight:800;font-size:1.5rem;line-height:1;
}
.ev .date .mm{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.ev .body{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.ev h3{font-size:1.06rem;font-variation-settings:"wdth" 90}
.ev .meta{font-size:.86rem;color:var(--ink-3)}

/* ============ FORMS ============ */
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:40px;box-shadow:var(--sh-2)}
.alt .formcard{background:var(--surface)}
.formcard.on-dark{background:var(--char);border-color:var(--char-3);color:var(--on-dark);box-shadow:var(--sh-3)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.on-dark .field label{color:var(--on-dark-dim)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.97rem;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;width:100%;
  transition:border-color .15s, background .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--surface);border-color:var(--red)}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.on-dark .field input:focus,.on-dark .field textarea:focus{background:rgba(255,255,255,.1);border-color:var(--red)}
.on-dark .field input::placeholder,.on-dark .field textarea::placeholder{color:rgba(255,255,255,.42)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cbx{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;cursor:pointer;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 14px;transition:border-color .15s,background .15s}
.cbx:hover{border-color:var(--red)}
.on-dark .cbx{color:var(--on-dark-dim);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.cbx input{margin-top:3px;accent-color:var(--red);width:16px;height:16px;flex:none}
.cbx.consent{background:transparent;border:0;padding:0;font-size:.86rem;color:var(--ink-3)}
.on-dark .cbx.consent{background:transparent;border:0;color:var(--on-dark-dim)}
.formnote{margin-top:16px;font-size:.85rem;color:var(--ink-3);background:var(--surface-2);border-radius:var(--r-md);padding:14px 18px;border-left:4px solid var(--red)}
.alt .formnote{background:var(--surface)}

/* ============ NEWSLETTER ============ */
.news{background:var(--surface-2)}
.news .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.inline-form{display:flex;gap:11px;flex-wrap:wrap}
.inline-form input{flex:1;min-width:230px;font:inherit;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink)}
.inline-form input:focus{border-color:var(--red)}

/* ============ DONATE ============ */
.donate{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.etransfer{background:var(--surface);border:2px dashed var(--red);border-radius:var(--r-xl);padding:34px;display:flex;flex-direction:column;gap:11px}
.alt .etransfer{background:var(--surface)}
.etransfer .addr{font-family:var(--font-display);font-variation-settings:"wdth" 94;font-weight:800;font-size:clamp(1rem,2.3vw,1.4rem);color:var(--red);word-break:break-all;text-transform:none}

/* ============ PAGE HEADS ============ */
.phead{background:var(--char);color:var(--on-dark);padding:84px 0 78px}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 340px at 88% 0%, rgba(56,104,255,.45), transparent 68%)}
.phead .wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px}
.phead h1{font-size:clamp(2.2rem,5.2vw,3.6rem);font-variation-settings:"wdth" 80;letter-spacing:-.02em}
.phead p{color:var(--on-dark-dim);max-width:60ch}
.phead .eyebrow{color:#fff;opacity:.7}

/* ============ PROSE ============ */
.prose{max-width:66ch;display:flex;flex-direction:column;gap:19px;color:var(--ink-2);font-size:1.02rem}
.prose h2,.prose h3{color:var(--ink)}
.prose h3{font-size:1.3rem;margin-top:14px}

/* ============ PLAN DETAIL ============ */
.pdetail{
  display:grid;grid-template-columns:auto 1fr;gap:28px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);
  padding:38px 40px;box-shadow:var(--sh-1);
}
.pdetail+.pdetail{margin-top:20px}
.pnum{width:64px;height:64px;border-radius:50%;background:var(--red-soft);display:grid;place-items:center;flex:none}
.pnum svg{width:30px;height:30px;stroke:var(--red);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pdetail h3{font-size:clamp(1.35rem,2.8vw,1.9rem)}
.pdetail .promise{color:var(--red);font-weight:700;font-size:1rem}
.pdetail ul{margin:10px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.pdetail ul li{display:flex;gap:12px;color:var(--ink-2);font-size:.97rem}
.pdetail ul li::before{content:"";width:7px;height:7px;flex:none;margin-top:9px;background:var(--red);border-radius:50%}

/* ============ VOTE PAGE ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:32px 30px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-1)}
.alt .step{background:var(--surface)}
.step .sn{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  font-family:var(--font-display);font-variation-settings:"wdth" 92;font-weight:800;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--red-soft);color:var(--red);border-radius:var(--r-pill);padding:7px 16px;
}
.step h3{font-size:1.18rem}
.step p{color:var(--ink-2);font-size:.95rem}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qa details{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.alt .qa details{background:var(--surface)}
.qa summary{cursor:pointer;padding:20px 24px;font-weight:700;font-size:.97rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.15rem;line-height:1;
}
.qa details[open] summary::after{content:"–"}
.qa .a{padding:0 24px 22px;color:var(--ink-2);font-size:.94rem}
.official{background:var(--surface-2);border-radius:var(--r-xl);padding:26px 30px;display:flex;flex-direction:column;gap:9px}
.alt .official{background:var(--surface)}

/* ============ FOOTER ============ */
footer.site{background:var(--footer);color:var(--footer-ink);padding:78px 0 0;border-top:4px solid var(--red)}
.fgrid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1fr;gap:38px}
/* 7.25.3 - the column headings read as grey because of opacity:.65,
   not because of their colour - they were already #fff. Opacity
   removed rather than the colour changed; there was nothing to
   change about the colour. */
footer.site h4{font-size:.72rem;letter-spacing:.17em;color:#fff;margin-bottom:16px;font-variation-settings:"wdth" 94}
footer.site a{color:var(--footer-ink);text-decoration:none;transition:color .15s}
footer.site a:hover{color:#fff}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:.93rem}
.socials{display:flex;gap:10px;margin-top:8px}
.socials a{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;transition:background .15s,border-color .15s,transform .15s}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.socials svg{width:17px;height:17px;fill:currentColor}
.socials a:hover svg{fill:#fff}
.legal{margin-top:52px;border-top:1px solid rgba(255,255,255,.12);padding:24px 0 30px;font-size:.8rem;display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}

/* ============ MOBILE ACTION BAR ============ */
#mbar{
  display:none;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;
  background:var(--char);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:9px;gap:9px;box-shadow:var(--sh-3);
  transform:translateY(160%);transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
#mbar.show{transform:none}
#mbar a{flex:1;padding:13px 8px;font-size:.75rem}

/* ============ RESPONSIVE ============ */
@media (max-width:1320px){
  nav.main a{padding:9px 10px;font-size:.76rem;letter-spacing:.03em}
  nav.main a.btn{padding:11px 16px}
  header.site .bar{gap:16px}
}
@media (max-width:1120px){
  nav.main a{padding:9px 8px;font-size:.72rem;letter-spacing:.02em}
  .wrap{padding-inline:34px}
}
@media (max-width:980px){
  .wrap{padding-inline:26px}
  header.site .bar{padding:13px 26px}
  .topstrip{padding:10px 26px}
  .pgrid,.pgrid.three,.steps{grid-template-columns:1fr 1fr}
  .evgrid{grid-template-columns:1fr}
  .split,.split.even,.ballotwrap,.cta2,.news .wrap,.donate,.qa,#forms-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;padding-top:40px}
  .hero-copy{padding-bottom:20px}
  .hero-photo img{max-width:290px;margin:0 auto}
  .votestrip .wrap{grid-template-columns:1fr;justify-items:start}
  .fgrid{grid-template-columns:1fr 1fr}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);
    flex-direction:column;align-items:stretch;padding:12px;gap:3px;
    border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-3);
    border-bottom:3px solid var(--red);
  }
  nav.main.open{display:flex}
  nav.main ul{flex-direction:column;align-items:stretch;width:100%;gap:3px}
  nav.main a{padding:14px 16px;font-size:.85rem;border-radius:var(--r-sm)}
  nav.main a.btn{margin-top:6px;border-radius:var(--r-pill)}
  .navcta{margin-left:0}
  #burger{display:block}
  #mbar{display:flex}
  footer.site{padding-bottom:88px}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .kicker{font-size:.6rem;letter-spacing:.1em;padding:7px 13px}
  header.site .bar{padding:12px 20px}
  .topstrip{padding-left:20px;padding-right:20px}
  .sec{padding:60px 0}
  .sec-tight{padding:48px 0}
  .pgrid,.pgrid.three,.steps,.f2,.checks,.fgrid{grid-template-columns:1fr}
  .formcard,.ctacard,.pdetail,.step,.etransfer{padding:26px 22px}
  .pdetail{grid-template-columns:1fr;gap:18px}
  .hero-photo img{max-width:225px}
  .hero h1{font-size:clamp(2.35rem,10vw,3.1rem)}
  .ballot li{flex-wrap:wrap;padding:12px}
  .ballot li .t{margin-left:42px;width:100%;text-align:left;margin-top:3px}
  .legal{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.pcard:hover,.ev:hover,.socials a:hover{transform:none}
}


/* ============================================================
   MOBILE (≤700px) — app-like: image header, full-width actions,
   single column everywhere, bigger tap targets
   ============================================================ */
@media (max-width:700px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .sec{padding:56px 0}
  .sec-tight{padding:44px 0}

  /* headings scale down so nothing wraps into a wall of caps */
  .shead h2{font-size:2rem}
  .h2{font-size:1.85rem}
  .shead{gap:11px}
  .lead{font-size:1.02rem}

  /* --- hero: photo becomes the screen header, message right under it --- */
  .hero-grid{display:flex;flex-direction:column;gap:0;padding-block:0}
  .hero-photo{
    order:-1;position:relative;width:calc(100% + 40px);margin:0 -20px 26px;
    height:330px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  }
  .hero-photo .arch{width:min(72%,268px);height:80%;border-radius:999px 999px 0 0}
  .hero-photo img{height:100%;width:auto;max-width:none;margin:0;filter:drop-shadow(0 14px 26px rgba(3,24,66,.3))}
  .hero-copy{padding:0 0 44px;gap:18px;align-items:stretch}
  .kicker{align-self:flex-start}
  .hero h1{font-size:clamp(2.3rem,10.5vw,3rem);letter-spacing:-.03em}
  .hero .sub{font-size:1rem;max-width:none}
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns .btn{width:100%}
  .pillrow{gap:8px}
  .pill{font-size:.79rem;padding:8px 13px}

  /* --- vote strip --- */
  .votestrip .wrap{grid-template-columns:1fr;gap:16px;padding-top:26px;padding-bottom:26px}
  .cd{width:100%}
  .cd .unit{flex:1;min-width:0}
  .votestrip .cdtxt{font-size:1.05rem}
  .votestrip .btn{width:100%}

  /* --- cards, grids: one column, comfortable padding --- */
  .pgrid,.pgrid.three,.steps,.evgrid,.cta2,.donate,.qa,.f2,.checks,#forms-grid{grid-template-columns:1fr!important}
  .pgrid{margin-top:30px;gap:14px}
  .pcard{padding:26px 22px 20px}
  .pgrid:not(.three) .pcard h3{min-height:0}
  .ctacard{padding:30px 24px;border-radius:var(--r-lg)}
  .ctacard h3{font-size:1.45rem}
  .ctacard .btn{width:100%}
  .step,.formcard,.etransfer,.pdetail,.official{padding:26px 22px;border-radius:var(--r-lg)}
  .pdetail{grid-template-columns:1fr;gap:16px}
  .pnum{width:52px;height:52px}
  .pnum svg{width:24px;height:24px}

  /* --- ballot --- */
  .ballotwrap{gap:28px}
  .ballot{border-radius:var(--r-lg)}
  .ballot ul{padding:10px}
  .ballot li{flex-wrap:wrap;padding:12px}
  .ballot li .t{margin-left:42px;width:100%;text-align:left;margin-top:2px}

  /* --- forms: full-width controls, thumb-sized targets --- */
  .field input,.field select,.field textarea{padding:15px 16px;font-size:1rem}
  .cbx{padding:13px 14px}
  form .btn{width:100%}
  .inline-form{flex-direction:column}
  .inline-form input{width:100%;min-width:0}
  .inline-form .btn{width:100%}
  .news .wrap{gap:22px}

  /* --- prose / split --- */
  .split,.split.even{gap:30px}
  .split .ph img{border-radius:var(--r-lg)}
  .prose{font-size:1rem}

  /* --- band --- */
  .band .slogan{font-size:2.1rem}
  .band .wrap{gap:16px}
  .band .hero-btns{width:100%}

  /* --- page heads --- */
  .phead{padding:52px 0 48px}
  .phead h1{font-size:2.2rem}
  .phead p{font-size:.98rem}

  /* --- footer: grouped, not four cramped columns --- */
  .fgrid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .fgrid > div:first-child{grid-column:1 / -1}
  footer.site{padding:52px 0 0}
  .legal{flex-direction:column;gap:10px;font-size:.76rem}

  /* --- FAQ --- */
  .qa summary{padding:17px 18px;font-size:.95rem}
  .qa .a{padding:0 18px 18px}
}

@media (max-width:420px){
  .wrap{padding-inline:16px}
  .hero-photo{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;height:300px}
  .cd .unit{padding:10px 8px;min-width:0}
  .cd .n{font-size:1.5rem}
  .fgrid{grid-template-columns:1fr}
}

/* ============================================================
   ELEMENTOR BRIDGE
   Maps native Elementor widgets onto the campaign design system,
   so the text stays editable in Elementor and the styling lives here.
   ============================================================ */

/* --- hero laid out as a two-column Elementor section --- */
.elementor-section.hero > .elementor-container{align-items:flex-end;min-height:600px;padding-block:80px 0}
.hero-copy-col > .elementor-widget-wrap{align-content:center;padding-bottom:80px !important;gap:0}
.hero-copy-col .elementor-widget:not(:last-child){margin-bottom:20px}
.hero-photo-col{position:relative;align-self:flex-end}
.hero-photo-col > .elementor-widget-wrap{padding:0 !important}
.hero-photo-col::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:0;
  width:min(100%,470px);height:72%;
  background:linear-gradient(168deg,var(--red) 0%, var(--red-deep) 100%);
  border-radius:999px 999px 0 0;pointer-events:none;
}
.hero-photo-col .elementor-widget-image{position:relative;z-index:1}
.hero-photo-col img{
  display:block;margin:0 auto;max-width:400px;width:100%;
  filter:drop-shadow(0 24px 40px rgba(3,24,66,.34));
}
@media (min-width:1100px){
  .elementor-section.hero > .elementor-container{min-height:660px}
  .hero-photo-col{margin-right:-40px}
  .hero-photo-col::before{width:min(100%,520px)}
  .hero-photo-col img{max-width:440px}
}

/* --- headings --- */
.st-h1 .elementor-heading-title{
  font-family:var(--font-display);font-variation-settings:"wdth" 78;
  font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.028em;
  font-size:clamp(2.9rem,6.4vw,5.3rem);color:var(--ink);text-wrap:balance;
}
.st-h1 .elementor-heading-title em,
.st-h1 .elementor-heading-title .em{font-style:normal;color:var(--red);display:block}
.st-h2 .elementor-heading-title{
  font-family:var(--font-display);font-variation-settings:"wdth" 84;
  font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.01em;
  font-size:clamp(1.9rem,3.7vw,2.85rem);color:var(--ink);text-wrap:balance;
}
.st-h3 .elementor-heading-title{
  font-family:var(--font-display);font-variation-settings:"wdth" 88;
  font-weight:800;text-transform:uppercase;line-height:1.05;font-size:1.24rem;color:var(--ink);
}
.st-eyebrow .elementor-heading-title{
  font-family:var(--font-display);font-variation-settings:"wdth" 92;
  font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.st-on-dark .elementor-heading-title{color:#fff}
.st-on-dark.st-eyebrow .elementor-heading-title{color:#fff;opacity:.72}
.st-rule{height:4px;width:52px;background:var(--red);border-radius:var(--r-pill)}
.st-rule .elementor-divider-separator{display:none}

/* --- body copy --- */
.st-text p{color:var(--ink-2)}
.st-text p+p{margin-top:1em}
.st-lead p{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.st-muted p{font-size:.92rem;color:var(--ink-3)}
.st-on-dark .st-lead p,.st-on-dark p{color:var(--on-dark-dim)}
.st-prose p{font-size:1.03rem;color:var(--ink-2)}
.st-prose p+p{margin-top:1.1em}
.st-prose strong{color:var(--ink)}
.st-note p{
  font-size:.85rem;color:var(--ink-3);background:var(--surface-2);
  border-radius:var(--r-md);padding:14px 18px;border-left:4px solid var(--red);
}
.todo{background:var(--flag-bg);color:var(--flag);border-radius:var(--r-xs);padding:1px 7px;font-weight:600}

/* --- buttons --- */
.st-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-variation-settings:"wdth" 92;
  font-weight:800;font-size:.9rem;letter-spacing:.045em;text-transform:uppercase;
  padding:16px 30px;border-radius:var(--r-pill);border:2px solid transparent;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),background .16s,color .16s,border-color .16s;
}
.st-btn .elementor-button:hover{transform:translateY(-2px)}
.st-btn-red .elementor-button{background:var(--red);color:#fff;border-color:var(--red);box-shadow:var(--sh-red)}
.st-btn-red .elementor-button:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.st-btn-navy .elementor-button{background:var(--navy-solid);color:#fff;border-color:var(--navy-solid);box-shadow:0 8px 24px rgba(3,24,66,.24)}
.st-btn-navy .elementor-button:hover{background:var(--navy-solid-h);border-color:var(--navy-solid-h);color:#fff}
.st-btn-outline .elementor-button{background:transparent;color:var(--ink);border-color:var(--line)}
.st-btn-outline .elementor-button:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.st-btn-ghost .elementor-button{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.st-btn-ghost .elementor-button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff}
.st-btnrow{display:flex;gap:13px;flex-wrap:wrap}

/* --- priority / commitment cards (Icon Box widget) --- */
.st-cards .elementor-column > .elementor-widget-wrap{height:100%}
.st-card{height:100%}
.st-card > .elementor-widget-container{
  height:100%;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:32px 28px 26px;box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s;
}
.st-card > .elementor-widget-container::before{
  content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,68,200,.13),rgba(27,68,200,0) 70%);pointer-events:none;
}
.st-card > .elementor-widget-container::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.st-card:hover > .elementor-widget-container{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--line)}
.st-card:hover > .elementor-widget-container::after{transform:scaleX(1)}
.st-card .elementor-icon-box-wrapper{display:flex;flex-direction:column;gap:14px;align-items:flex-start;text-align:left}
.st-card .elementor-icon-box-icon{margin:0}
.st-card .elementor-icon{
  width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:19px;box-shadow:0 0 0 6px var(--red-soft);
}
.st-card .elementor-icon svg{width:19px;height:19px;fill:#fff}
.st-card .elementor-icon-box-title{margin:0}
.st-card .elementor-icon-box-title,
.st-card .elementor-icon-box-title a{
  font-family:var(--font-display);font-variation-settings:"wdth" 88;font-weight:800;
  text-transform:uppercase;font-size:1.24rem;line-height:1.05;color:var(--ink);
}
.st-card .elementor-icon-box-description{color:var(--ink-2);font-size:.95rem;margin:0}

/* --- three numbered steps (How to vote) --- */
.st-step > .elementor-widget-container{
  height:100%;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);
  padding:32px 30px;box-shadow:var(--sh-1);
}
.st-step .elementor-icon-box-wrapper{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left}
.st-step .elementor-icon-box-icon{margin:0}
.st-step .elementor-icon{
  background:var(--red-soft);color:var(--red);border-radius:var(--r-pill);
  padding:7px 16px;width:auto;height:auto;font-size:.68rem;letter-spacing:.14em;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
}
.st-step .elementor-icon-box-title,
.st-step .elementor-icon-box-title a{
  font-family:var(--font-display);font-variation-settings:"wdth" 88;font-weight:800;
  text-transform:uppercase;font-size:1.18rem;line-height:1.05;color:var(--ink);
}
.st-step .elementor-icon-box-description{color:var(--ink-2);font-size:.95rem;margin:0}

/* --- tick lists (Icon List widget) --- */
.st-ticks .elementor-icon-list-items{display:flex;flex-direction:column;gap:14px}
.st-ticks .elementor-icon-list-item{align-items:flex-start}
.st-ticks .elementor-icon-list-icon{
  width:28px;height:28px;flex:none;border-radius:50%;background:var(--red);
  display:grid;place-items:center;margin-top:1px;
}
.st-ticks .elementor-icon-list-icon svg,
.st-ticks .elementor-icon-list-icon i{color:#fff;fill:#fff;font-size:12px;width:12px;height:12px}
.st-ticks .elementor-icon-list-text{color:var(--ink-2);font-size:.98rem;padding-left:13px}
.st-ticks.st-on-dark .elementor-icon-list-text{color:var(--on-dark-dim)}

/* --- bullet lists inside The Plan --- */
.st-bullets .elementor-icon-list-items{display:flex;flex-direction:column;gap:11px}
.st-bullets .elementor-icon-list-icon{width:7px;height:7px;background:var(--red);border-radius:50%;margin-top:9px;flex:none}
.st-bullets .elementor-icon-list-icon i,.st-bullets .elementor-icon-list-icon svg{display:none}
.st-bullets .elementor-icon-list-text{color:var(--ink-2);font-size:.97rem;padding-left:12px}

/* --- plan detail blocks --- */
.st-plan-block{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
}
.st-plan-block > .elementor-container{padding:38px 40px !important}
.st-plan-icon-col > .elementor-widget-wrap{padding:0 !important}
.st-plan-icon .elementor-icon{
  width:64px;height:64px;border-radius:50%;background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;font-size:28px;
}
/* 7.24.1 - the promise line under each plan heading is navy, not
   green. Changed in place: .st-promise exists only on The Plan's
   four cards, so there is nothing else to protect. It has to be CSS -
   the widget's Text Color lands on the wrapper, and this rule colours
   the <p> directly, so a direct rule beats the inherited one whatever
   Elementor sets. */
.st-promise p{color:#0A1F45;font-weight:700;font-size:1rem}

/* --- FAQ (Accordion widget) --- */
.st-faq .elementor-accordion{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-faq .elementor-accordion-item{
  background:var(--surface);border:1px solid var(--line-soft) !important;border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;height:fit-content;
}
.st-faq .elementor-tab-title{
  padding:20px 24px;font-weight:700;font-size:.97rem;color:var(--ink);
  border:0 !important;background:transparent;
}
.st-faq .elementor-tab-title .elementor-accordion-icon{color:var(--red);float:right}
.st-faq .elementor-tab-content{
  padding:0 24px 22px;color:var(--ink-2);font-size:.94rem;border:0 !important;background:transparent;
}

/* --- images --- */
.st-photo img{border-radius:var(--r-xl);box-shadow:var(--sh-2);width:100%}

/* --- e-transfer box (inner section) --- */
.st-etransfer{background:var(--surface);border:2px dashed var(--red);border-radius:var(--r-xl)}
.st-etransfer > .elementor-container{padding:30px 34px !important}
.st-addr p{
  font-family:var(--font-display);font-variation-settings:"wdth" 94;font-weight:800;
  font-size:clamp(1rem,2.3vw,1.4rem);color:var(--red);word-break:break-all;
}

/* --- event cards (inner section per event) --- */
.st-event{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;height:100%;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s;
}
.st-event:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.st-events .elementor-column > .elementor-widget-wrap{height:100%}
.st-event > .elementor-container{padding:24px !important;flex-direction:column;align-items:flex-start}
.st-event-date p{
  /* 7.16.0 - client: the date chip is navy, not green. Edited in place
     rather than stacked as an override. Elementor cannot reach this
     element: it is the <p> inside a text-editor widget, and the widget's
     own background control paints the full-width wrapper, not the pill. */
  display:inline-flex;align-items:center;gap:10px;background:#0A1F45;color:#fff;
  border-radius:var(--r-md);padding:9px 16px;
  font-family:var(--font-display);font-variation-settings:"wdth" 88;
  font-weight:800;text-transform:uppercase;font-size:.86rem;letter-spacing:.06em;
}
.st-event-meta p{font-size:.86rem;color:var(--ink-3)}

/* --- social icons widget --- */
.st-social .elementor-social-icon{
  background:transparent;border:1px solid var(--line);border-radius:50%;
  width:42px;height:42px;color:var(--ink-2);transition:background .15s,border-color .15s,transform .15s;
}
.st-social .elementor-social-icon:hover{background:#0A1F45;border-color:#0A1F45;color:#fff;transform:translateY(-2px)}
.st-social.st-on-dark .elementor-social-icon{border-color:rgba(255,255,255,.2);color:#fff}

/* --- slogan band --- */
.elementor-section.band{background:var(--char);color:var(--on-dark)}
.elementor-section.band::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 340px at 50% 130%,rgba(56,104,255,.45),transparent 70%)}
.elementor-section.band > .elementor-container{position:relative;z-index:2}
.st-badge p{
  display:inline-block;font-family:var(--font-display);font-variation-settings:"wdth" 92;
  font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  padding:9px 20px;border-radius:var(--r-pill);
}
.st-slogan .elementor-heading-title{
  font-family:var(--font-display);font-variation-settings:"wdth" 80;font-weight:800;
  text-transform:uppercase;font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.02;color:#fff;
}
.st-slogan .elementor-heading-title em{
  font-family:var(--font-script);font-style:normal;text-transform:none;
  color:var(--red);font-weight:400;font-size:1.05em;padding-right:.1em;
}

/* --- page headers --- */
.elementor-section.phead{background:var(--char);color:var(--on-dark);padding:84px 0 78px}
.elementor-section.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 340px at 88% 0%,rgba(56,104,255,.45),transparent 68%)}
.elementor-section.phead > .elementor-container{position:relative;z-index:2}
.elementor-section.phead .st-h1 .elementor-heading-title{font-size:clamp(2.2rem,5.2vw,3.6rem);color:#fff}

/* --- CTA cards (inner sections) --- */
.st-cta{border-radius:var(--r-xl);overflow:hidden;position:relative;height:100%}
.st-cta > .elementor-container{padding:44px 40px !important;position:relative;z-index:2}
.st-cta::after{content:"";position:absolute;right:-70px;bottom:-110px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07)}
.st-cta-red{background:var(--red);box-shadow:var(--sh-red)}
.st-cta-navy{background:var(--char);box-shadow:var(--sh-2)}
.st-cta .elementor-heading-title{color:#fff}
.st-cta p{color:rgba(255,255,255,.84)}
.st-ctarow .elementor-column > .elementor-widget-wrap{height:100%}

/* --- form plugin bridge (WPForms Lite / Fluent Forms) --- */
.st-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.st-form > .elementor-container{padding:40px !important}
.st-form-dark{background:var(--char);border-color:var(--char-2);box-shadow:var(--sh-3)}
.st-form-dark .elementor-heading-title{color:#fff}
.st-form-dark p{color:var(--on-dark-dim)}
.st-form input[type=text],.st-form input[type=email],.st-form input[type=tel],
.st-form input[type=url],.st-form select,.st-form textarea,
.st-form .frm-fluent-form input,.st-form .frm-fluent-form select,.st-form .frm-fluent-form textarea,
.st-form .wpforms-field input,.st-form .wpforms-field select,.st-form .wpforms-field textarea{
  font:inherit !important;font-size:.98rem !important;color:var(--ink) !important;
  background:var(--surface-2) !important;border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;padding:14px 16px !important;width:100% !important;box-shadow:none !important;
}
.st-form input:focus,.st-form select:focus,.st-form textarea:focus{border-color:var(--red) !important;background:var(--surface) !important;outline:none}
.st-form-dark input,.st-form-dark select,.st-form-dark textarea{
  background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.16) !important;color:#fff !important;
}
.st-form label,.st-form .wpforms-field-label,.st-form .ff-el-input--label label{
  font-size:.74rem !important;font-weight:700 !important;letter-spacing:.11em !important;
  text-transform:uppercase !important;color:var(--ink-3) !important;
}
.st-form-dark label,.st-form-dark .wpforms-field-label,.st-form-dark .ff-el-input--label label{color:var(--on-dark-dim) !important}
.st-form button[type=submit],.st-form input[type=submit],
.st-form .wpforms-submit,.st-form .ff-btn-submit{
  font-family:var(--font-display) !important;font-weight:800 !important;font-size:.9rem !important;
  letter-spacing:.045em !important;text-transform:uppercase !important;
  /* 7.17.0 - no !important on the colours: Fluent Forms has its own
     per-form button styler and !important here made it inert. Layout
     and typography stay forced; colour is the plugin's to own. */
  background:var(--red);color:#fff;border:0 !important;
  border-radius:var(--r-pill) !important;padding:16px 30px !important;width:100% !important;cursor:pointer;
}
.st-form button[type=submit]:hover,.st-form .wpforms-submit:hover,.st-form .ff-btn-submit:hover{background:var(--red-deep)}

/* --- ballot card and countdown shortcode output keep the prototype classes --- */

/* ============ RESPONSIVE BRIDGE ============ */
@media (max-width:1024px){
  .st-campaign .elementor-section > .elementor-container{flex-wrap:wrap}
  .st-faq .elementor-accordion{grid-template-columns:1fr}
}
@media (min-width:768px) and (max-width:1099px){
  .elementor-section.hero > .elementor-container{min-height:0;padding-block:56px 0}
  .hero-copy-col > .elementor-widget-wrap{padding-bottom:56px !important}
  .hero-photo-col{margin-right:0}
}
/* tablet: four-up card rows become two-up, three-up rows go full width */
@media (min-width:768px) and (max-width:1024px){
  .st-cardrow .elementor-column{width:50%}
  .st-eventsrow .elementor-column,
  .st-steps .elementor-column,
  .st-ctarow .elementor-column{width:100%}
}
/* mobile: everything stacks, no exceptions */
@media (max-width:767px){
  .st-campaign .elementor-column{width:100% !important}
  .elementor-section.hero > .elementor-container{min-height:0;padding-block:0}
  .hero-copy-col > .elementor-widget-wrap{padding-bottom:44px !important}
  .hero-photo-col{margin-right:0;order:-1}
}
@media (max-width:767px){
  .elementor-section.sec{padding:56px 0}
  .elementor-section.sec-tight{padding:44px 0}
  .elementor-section.phead{padding:52px 0 48px}
  .elementor-section.elementor-section-boxed > .elementor-container{padding-inline:20px}
  .st-h2 .elementor-heading-title{font-size:2rem}
  .st-h1 .elementor-heading-title{font-size:clamp(2.3rem,10.5vw,3rem)}
  .elementor-section.phead .st-h1 .elementor-heading-title{font-size:2.2rem}
  .st-slogan .elementor-heading-title{font-size:2.1rem}
  .st-btn .elementor-button{width:100%}
  .st-btnrow{flex-direction:column}
  .st-card > .elementor-widget-container,
  .st-step > .elementor-widget-container{padding:26px 22px}
  .st-cta > .elementor-container,.st-form > .elementor-container,
  .st-plan-block > .elementor-container,.st-etransfer > .elementor-container{padding:26px 22px !important}
  .hero-photo-col{width:calc(100% + 40px);margin-inline:-20px}
  .hero-photo-col::before{width:min(72%,268px);height:80%}
  .hero-photo-col img{max-width:250px}
}

/* ============================================================
   SECTION RHYTHM + REMAINING TEMPLATE CLASSES
   (headings and their card rows are separate Elementor sections,
   so their padding is coordinated here)
   ============================================================ */
.elementor-section.st-headonly{padding:104px 0 0}
.elementor-section.st-cardrow{padding:36px 0 0}
.elementor-section.st-cardrow-bottom{padding-bottom:104px}
.elementor-section.st-afterrow{padding:34px 0 104px}
.elementor-section.st-eventsrow{padding:32px 0 0}
.elementor-section.st-eventsnote{padding:22px 0 76px}
.elementor-section.st-planwrap{padding:0 0 20px}
.elementor-section.st-planwrap:first-of-type{padding-top:76px}
.elementor-section.st-planwrap:last-of-type{padding-bottom:76px}
.elementor-section.st-faqrow{padding:0 0 0}
.elementor-section.st-officialrow{padding:32px 0 76px}
.elementor-section.st-donaterow{padding:0 0 76px}
.elementor-section.st-steps{padding-top:76px}

/* button rows */
.st-btnrow-sec > .elementor-container{padding:0 !important}
.st-btnrow > .elementor-widget-wrap{flex-direction:row;flex-wrap:wrap;gap:13px;align-items:center;padding:0 !important}
.st-btnrow > .elementor-widget-wrap > .elementor-widget{width:auto;margin:0}

/* divider used as the short red rule */
.st-hr .elementor-divider{padding-block:0}
.st-hr .elementor-divider-separator{border-radius:2px}

/* hero kicker + tag pills come through a Text Editor widget */
.st-kicker p,.st-pills p{margin:0}
.st-pills .pillrow{margin:0}

/* three steps on the How to vote page */
.st-stepcol > .elementor-widget-wrap{
  height:100%;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-xl);padding:32px 30px !important;box-shadow:var(--sh-1);
  align-content:flex-start;gap:0;
}
.alt .st-stepcol > .elementor-widget-wrap{background:var(--surface)}
.st-stepcol .elementor-widget:not(:last-child){margin-bottom:11px}
.st-stepcol .st-eyebrow .elementor-heading-title{
  display:inline-block;background:var(--red-soft);color:var(--red);
  border-radius:var(--r-pill);padding:7px 16px;font-size:.68rem;letter-spacing:.14em;
}
.st-steps .elementor-column > .elementor-widget-wrap{height:100%}

/* source note box on the How to vote page */
.st-official > .elementor-widget-wrap{
  background:var(--surface-2);border-radius:var(--r-xl);padding:26px 30px !important;
}
.st-official .elementor-widget:not(:last-child){margin-bottom:9px}
.st-official a{color:var(--red)}

/* centred slogan band */
.st-center{text-align:center}
.st-center > .elementor-widget-wrap{align-items:center;justify-content:center}
.st-center .elementor-widget:not(:last-child){margin-bottom:18px}
.st-center .st-btnrow > .elementor-widget-wrap{justify-content:center}
.st-attrib p{color:var(--on-dark-dim);font-size:.9rem}

/* event cards keep equal height */
.st-eventcol > .elementor-widget-wrap{height:100%}
.st-event .elementor-widget:not(:last-child){margin-bottom:9px}

/* plan blocks */
.st-plan-icon-col{align-self:flex-start}
.st-plan-block .elementor-widget:not(:last-child){margin-bottom:12px}

/* donate + forms spacing */
.st-form .elementor-widget:not(:last-child){margin-bottom:14px}
.st-etransfer .elementor-widget:not(:last-child){margin-bottom:10px}

@media (max-width:767px){
  .elementor-section.st-headonly{padding:56px 0 0}
  .elementor-section.st-cardrow{padding:24px 0 0}
  .elementor-section.st-afterrow{padding:24px 0 56px}
  .elementor-section.st-cardrow-bottom{padding-bottom:56px}
  .elementor-section.st-eventsrow{padding:22px 0 0}
  .elementor-section.st-eventsnote{padding:18px 0 44px}
  .elementor-section.st-officialrow,.elementor-section.st-donaterow{padding-bottom:44px}
  .elementor-section.st-planwrap:first-of-type{padding-top:44px}
  .elementor-section.st-planwrap:last-of-type{padding-bottom:44px}
  .elementor-section.st-steps{padding-top:44px}
  .st-stepcol > .elementor-widget-wrap{padding:26px 22px !important}
  .st-official > .elementor-widget-wrap{padding:22px !important}
  .st-btnrow > .elementor-widget-wrap{flex-direction:column;align-items:stretch}
  .st-btnrow > .elementor-widget-wrap > .elementor-widget{width:100%}
}

/* ============================================================
   PALETTE v2 — WHO GETS WHICH COLOUR
   blue = primary · golden yellow = attention · deep green = secondary
   White stays the breathing room. Where blue and yellow meet, they
   meet at full strength — no tints, no apologies.
   ============================================================ */

/* --- 1. the countdown strip is the bold blue-on-yellow moment --- */
.votestrip{background:var(--yellow);color:var(--on-yellow)}
.votestrip .cdtxt span{opacity:.78}
.cd .unit{background:var(--char);color:#fff;border-color:rgba(255,255,255,.16)}
.votestrip .btn-dark{box-shadow:0 8px 22px rgba(10,31,92,.3)}

/* --- 2. hero kicker: solid yellow pill, navy ink --- */
.kicker{background:var(--yellow);border-color:var(--yellow-deep);color:var(--on-yellow)}
.kicker i{background:var(--on-yellow);box-shadow:0 0 0 4px rgba(10,31,92,.16)}

/* --- 3. yellow marks the eye: short rules, card hover line, footer edge --- */
.rule{background:var(--yellow);width:60px}
.pcard::after{background:var(--yellow);height:5px}
footer.site{border-top-color:var(--yellow)}

/* --- 4. green does the affirmative work: ticks, bullets, donations --- */
.check{background:var(--green);box-shadow:0 0 0 6px var(--green-soft)}
.pdetail ul li::before{background:var(--green)}
.etransfer{border-color:var(--green)}
.etransfer .addr{color:var(--green)}

/* --- 5. dark bands: navy ground, blue glow, yellow script --- */
.band::before{background:radial-gradient(680px 340px at 50% 130%,rgba(56,104,255,.5),transparent 70%)}
.band .slogan em{color:var(--yellow)}
.phead::before{background:radial-gradient(720px 340px at 88% 0%,rgba(56,104,255,.5),transparent 68%)}
.phead .eyebrow{color:var(--yellow);opacity:1}

/* --- 6. the second CTA card flips to yellow so the pair reads blue | yellow --- */
.ctacard.darkc{background:var(--yellow);color:var(--on-yellow);box-shadow:0 14px 34px rgba(255,194,14,.34)}
.ctacard.darkc h3{color:var(--on-yellow)}
.ctacard.darkc p{color:rgba(10,31,92,.8)}
.ctacard.darkc::after{background:rgba(10,31,92,.07)}

/* --- 7. election day is the highlighted row on the ballot card --- */
.ballot li.primary{background:var(--yellow-soft);border-color:rgba(255,194,14,.6)}
.ballot li.primary .box{background:var(--yellow);border-color:var(--yellow-deep)}
.ballot li.primary .box svg{stroke:var(--on-yellow)}
.ballot li.primary .d,.ballot li.primary .t{color:var(--on-yellow)}

/* --- 8. heavier display type, per the "make it bolder" note --- */
h1,h2,h3,h4,.dsp{font-weight:900}
.band .slogan{font-weight:900}
.band .slogan em{font-weight:400}
.btn{font-weight:900}
.hero h1{letter-spacing:-.032em}

/* ============================================================
   ELEMENTOR BRIDGE — v2
   Elementor loads each widget stylesheet AFTER the theme, and its
   defaults paint headings with --e-global-color-primary and buttons
   with --e-global-color-accent. Every colour rule below is therefore
   repeated one class stronger (.st-x.elementor-widget-y) so the
   campaign palette wins on its own, with no !important.
   ============================================================ */

/* --- headings --- */
.st-h1.elementor-widget-heading .elementor-heading-title,
.st-h2.elementor-widget-heading .elementor-heading-title,
.st-h3.elementor-widget-heading .elementor-heading-title{color:var(--ink);font-weight:900}
.st-h1.elementor-widget-heading .elementor-heading-title em,
.st-h1.elementor-widget-heading .elementor-heading-title .em{color:var(--red)}
.st-eyebrow.elementor-widget-heading .elementor-heading-title{color:var(--red)}
.st-on-dark.elementor-widget-heading .elementor-heading-title{color:#fff}
.st-on-dark.st-eyebrow.elementor-widget-heading .elementor-heading-title{color:var(--yellow);opacity:1}
.elementor-section.phead .st-h1.elementor-widget-heading .elementor-heading-title{color:#fff}
.st-slogan.elementor-widget-heading .elementor-heading-title{color:#fff;font-weight:900}
.st-slogan.elementor-widget-heading .elementor-heading-title em{color:var(--yellow);font-weight:400}

/* --- body copy --- */
.st-text.elementor-widget-text-editor p,
.st-lead.elementor-widget-text-editor p,
.st-prose.elementor-widget-text-editor p{color:var(--ink-2)}
.st-muted.elementor-widget-text-editor p{color:var(--ink-3)}
.st-on-dark.elementor-widget-text-editor p,
.st-on-dark.elementor-widget-text-editor .st-lead p{color:var(--on-dark-dim)}
.st-attrib.elementor-widget-text-editor p{color:var(--on-dark-dim)}

/* --- buttons --- */
.st-btn.elementor-widget-button .elementor-button{font-weight:900;border:2px solid transparent}
.st-btn-red.elementor-widget-button .elementor-button{background-color:var(--red);color:#fff;border-color:var(--red);box-shadow:var(--sh-red)}
.st-btn-red.elementor-widget-button .elementor-button:hover{background-color:var(--red-deep);border-color:var(--red-deep);color:#fff}
.st-btn-navy.elementor-widget-button .elementor-button{background-color:var(--navy-solid);color:#fff;border-color:var(--navy-solid);box-shadow:0 8px 24px rgba(10,31,92,.26)}
.st-btn-navy.elementor-widget-button .elementor-button:hover{background-color:var(--navy-solid-h);border-color:var(--navy-solid-h);color:#fff}
.st-btn-outline.elementor-widget-button .elementor-button{background-color:transparent;color:var(--ink);border-color:var(--line)}
.st-btn-outline.elementor-widget-button .elementor-button:hover{background-color:var(--red-soft);color:var(--red);border-color:var(--red)}
.st-btn-ghost.elementor-widget-button .elementor-button{background-color:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.st-btn-ghost.elementor-widget-button .elementor-button:hover{background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff}

/* --- icon boxes and icon lists --- */
.st-card.elementor-widget-icon-box .elementor-icon-box-title,
.st-card.elementor-widget-icon-box .elementor-icon-box-title a,
.st-step.elementor-widget-icon-box .elementor-icon-box-title,
.st-step.elementor-widget-icon-box .elementor-icon-box-title a{color:var(--ink);font-weight:900}
.st-card.elementor-widget-icon-box .elementor-icon-box-description,
.st-step.elementor-widget-icon-box .elementor-icon-box-description{color:var(--ink-2)}
.st-ticks.elementor-widget-icon-list .elementor-icon-list-text{color:var(--ink-2)}
.st-ticks.st-on-dark.elementor-widget-icon-list .elementor-icon-list-text{color:var(--on-dark-dim)}
.st-bullets.elementor-widget-icon-list .elementor-icon-list-text{color:var(--ink-2)}

/* --- the same colour roles as the prototype, on Elementor markup --- */
.elementor-section.votestrip{background:var(--yellow);color:var(--on-yellow)}
.elementor-section.votestrip .cd .unit{background:var(--char);color:#fff;border-color:rgba(255,255,255,.16)}
.st-kicker .kicker{background:var(--yellow);border-color:var(--yellow-deep);color:var(--on-yellow)}
.st-kicker .kicker i{background:var(--on-yellow);box-shadow:0 0 0 4px rgba(10,31,92,.16)}
.st-rule{background:var(--yellow);width:60px}
.st-hr .elementor-divider-separator{border-top-color:var(--yellow);border-top-width:5px}
.st-card > .elementor-widget-container::after{background:var(--yellow);height:5px}
.st-card .elementor-icon{background:var(--green);box-shadow:0 0 0 6px var(--green-soft)}
.st-ticks .elementor-icon-list-icon{background:var(--green)}
.st-bullets .elementor-icon-list-icon{background:var(--green)}
.st-etransfer{border-color:var(--green)}
.st-addr p{color:var(--green)}
.elementor-section.band::before{background:radial-gradient(680px 340px at 50% 130%,rgba(56,104,255,.5),transparent 70%)}
.elementor-section.phead::before{background:radial-gradient(720px 340px at 88% 0%,rgba(56,104,255,.5),transparent 68%)}
.st-cta-navy{background:var(--yellow);box-shadow:0 14px 34px rgba(255,194,14,.34)}
.st-cta-navy.st-cta::after{background:rgba(10,31,92,.07)}
.st-cta-navy .elementor-heading-title{color:var(--on-yellow)}
.st-cta-navy p{color:rgba(10,31,92,.8)}
.st-stepcol .st-eyebrow .elementor-heading-title{background:var(--yellow);color:var(--on-yellow)}
.st-plan-icon .elementor-icon{background:var(--red-soft);color:var(--red)}
.st-faq .elementor-tab-title .elementor-accordion-icon{color:var(--red)}
.st-official a{color:var(--red)}

/* --- Hello Elementor prints the page title above the content whenever a
       page has not been switched to a full-width Elementor template.
       The campaign pages never want it. --- */
.st-campaign .page-header,
.st-campaign .entry-header,
.st-campaign .site-main > .entry-title,
.st-campaign .page-header .entry-title{display:none}

/* --- 9. the second-tier button is yellow, so every call-to-action pair
       reads blue | yellow. On the yellow strip it flips back to navy. --- */
.btn-dark{background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow);box-shadow:0 8px 24px rgba(255,194,14,.34)}
.btn-dark:hover{background:var(--yellow-deep);border-color:var(--yellow-deep);color:var(--on-yellow)}
.votestrip .btn-dark{background:var(--char);color:#fff;border-color:var(--char);box-shadow:0 8px 22px rgba(10,31,92,.3)}
.votestrip .btn-dark:hover{background:var(--navy-solid-h);border-color:var(--navy-solid-h);color:#fff}
.ctacard.darkc .btn-dark{background:var(--char);color:#fff;border-color:var(--char)}
.ctacard.darkc .btn-dark:hover{background:var(--navy-solid-h);border-color:var(--navy-solid-h);color:#fff}

.st-btn-navy.elementor-widget-button .elementor-button{background-color:var(--yellow);color:var(--on-yellow);border-color:var(--yellow);box-shadow:0 8px 24px rgba(255,194,14,.34)}
.st-btn-navy.elementor-widget-button .elementor-button:hover{background-color:var(--yellow-deep);border-color:var(--yellow-deep);color:var(--on-yellow)}
.votestrip .st-btn-navy.elementor-widget-button .elementor-button,
.st-cta-navy .st-btn-navy.elementor-widget-button .elementor-button{background-color:var(--char);color:#fff;border-color:var(--char)}
.votestrip .st-btn-navy.elementor-widget-button .elementor-button:hover,
.st-cta-navy .st-btn-navy.elementor-widget-button .elementor-button:hover{background-color:var(--navy-solid-h);border-color:var(--navy-solid-h);color:#fff}

/* ============================================================
   ELEMENTOR 4 COMPATIBILITY
   Elementor 4 stopped wrapping each widget in .elementor-widget-container,
   so every rule that hung card chrome on that div silently did nothing —
   which is why the imported pages came out flat. The chrome now sits on
   the widget itself, and any container that ever reappears is neutralised
   so nothing doubles up.
   ============================================================ */
.st-card > .elementor-widget-container,
.st-step > .elementor-widget-container{
  background:none;border:0;padding:0;box-shadow:none;overflow:visible;transform:none;
}

/* --- priority / commitment cards --- */
.st-card.elementor-widget-icon-box{
  height:100%;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:32px 28px 26px;box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s;
}
.st-card.elementor-widget-icon-box::before{
  content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,68,200,.13),rgba(27,68,200,0) 70%);pointer-events:none;
}
.st-card.elementor-widget-icon-box::after{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.st-card.elementor-widget-icon-box:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--line)}
.st-card.elementor-widget-icon-box:hover::after{transform:scaleX(1)}
.st-card.elementor-widget-icon-box .elementor-icon-box-wrapper{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;text-align:left;
}
.st-card.elementor-widget-icon-box .elementor-icon-box-icon,
.st-card.elementor-widget-icon-box .elementor-icon-box-title,
.st-card.elementor-widget-icon-box .elementor-icon-box-description{margin:0}

/* --- three numbered steps (How to vote) --- */
.st-step.elementor-widget-icon-box{
  height:100%;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-xl);padding:32px 30px;box-shadow:var(--sh-1);
}
.st-step.elementor-widget-icon-box .elementor-icon-box-wrapper{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;
}
.st-step.elementor-widget-icon-box .elementor-icon-box-icon,
.st-step.elementor-widget-icon-box .elementor-icon-box-title,
.st-step.elementor-widget-icon-box .elementor-icon-box-description{margin:0}

@media (max-width:767px){
  .st-card.elementor-widget-icon-box,
  .st-step.elementor-widget-icon-box{padding:26px 22px}
}

/* --- the short rule under each heading.
       Its colour is stored per widget in the page's own Elementor stylesheet,
       which always loads last, so this one rule has to shout. --- */
.st-hr .elementor-divider-separator{
  border-top-color:var(--yellow) !important;border-top-width:5px !important;border-radius:3px;
}

/* --- the numbered plan icons --- */
.st-plan-icon.elementor-widget-icon .elementor-icon{background:var(--red-soft);color:var(--red)}
.st-plan-icon.elementor-widget-icon .elementor-icon svg{fill:var(--red)}

/* --- FAQ accordion: Elementor paints the titles and the +/- with its own
       global colours, so the campaign ink is restated one class stronger --- */
.st-faq.elementor-widget-accordion .elementor-tab-title{color:var(--ink)}
.st-faq.elementor-widget-accordion .elementor-tab-title.elementor-active{color:var(--red)}
.st-faq.elementor-widget-accordion .elementor-accordion-icon,
.st-faq.elementor-widget-accordion .elementor-accordion-icon i{color:var(--red)}
.st-faq.elementor-widget-accordion .elementor-accordion-icon svg{fill:var(--red)}
.st-faq.elementor-widget-accordion .elementor-tab-content{color:var(--ink-2)}

/* --- social icons: Elementor fills the glyph white, which vanished on the
       white pill this design uses --- */
.st-social.elementor-widget-social-icons .elementor-social-icon{
  background-color:transparent;border:1px solid var(--line);color:var(--ink-2);
}
.st-social.elementor-widget-social-icons .elementor-social-icon svg{fill:currentColor}
.st-social.elementor-widget-social-icons .elementor-social-icon:hover{
  background-color:#0A1F45;border-color:#0A1F45;color:#fff;
}
.st-social.st-on-dark.elementor-widget-social-icons .elementor-social-icon{
  border-color:rgba(255,255,255,.2);color:#fff;
}

/* --- plan bullets: Elementor sizes list icons from --icon-size, which
       swallowed the 7px dot --- */
.st-bullets.elementor-widget-icon-list .elementor-icon-list-icon{
  width:7px;height:7px;min-width:7px;flex:none;margin-top:9px;
  background:var(--green);border-radius:50%;
}
.st-bullets.elementor-widget-icon-list .elementor-icon-list-icon i,
.st-bullets.elementor-widget-icon-list .elementor-icon-list-icon svg{display:none}
.st-ticks.elementor-widget-icon-list .elementor-icon-list-icon{
  width:28px;height:28px;min-width:28px;flex:none;border-radius:50%;background:var(--green);
  display:grid;place-items:center;
}
.st-ticks.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:#fff;width:12px;height:12px}


/* ============================================================
   ELEMENTOR OVERRIDES THAT SHOUT
   Four places where Elementor's own widget stylesheet uses !important
   or lands a longer selector than anything a theme can write. These are
   the only !important rules in this file, and each one says why.
   ============================================================ */

/* icon boxes: Elementor forces `align-items:unset!important` on the
   block-start layout and re-centres the text after this file has loaded */
.st-card.elementor-widget-icon-box .elementor-icon-box-wrapper,
.st-step.elementor-widget-icon-box .elementor-icon-box-wrapper{
  align-items:flex-start !important;text-align:left !important;gap:14px;
}

/* accordion: the +/- glyph is filled from the global accent colour */
.st-faq.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon svg{fill:var(--red) !important}
.st-faq.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon i{color:var(--red) !important}

/* the plan icons are painted from the global primary colour.
   7.24.0 - the !important here made the widget's own Primary Color
   inert, the same trap as the Fluent Forms buttons in 7.17.0. Dropped
   so the tick colour is the client's to set in Elementor. */
.st-plan-icon.elementor-widget-icon .elementor-icon svg{fill:var(--red)}

/* The Plan's bullet lists were built with no icon on the list items, so
   there is nothing in the markup to colour — the dot is drawn here. */
.st-bullets.elementor-widget-icon-list .elementor-icon-list-item{position:relative;padding-left:20px}
.st-bullets.elementor-widget-icon-list .elementor-icon-list-item::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--green);
}


/* --- body copy on coloured panels.
       The .st-text rule above was strengthened to beat Elementor's global
       text colour, which also made it beat the on-panel rules. These win it
       back, by sitting later at the same weight. --- */
.st-cta .elementor-widget-text-editor p{color:rgba(255,255,255,.86)}
.st-cta-navy .elementor-widget-text-editor p{color:rgba(10,31,92,.82)}
.st-form-dark .elementor-widget-text-editor p{color:var(--on-dark-dim)}
.elementor-section.band .elementor-widget-text-editor p,
.elementor-section.phead .elementor-widget-text-editor p{color:var(--on-dark-dim)}
.st-cta .elementor-widget-text-editor .todo,
.elementor-section.band .elementor-widget-text-editor .todo{color:var(--flag)}


/* ============================================================
   ELEMENTOR GLOBAL TOKENS
   Elementor → Site Settings still holds the plugin's stock palette
   (#6EC1E4 sky blue, #61CE70 green, Roboto). Those tokens are what every
   NEW widget is born with, which is exactly how the first import came out
   sky-blue and green. Elementor prints them on .elementor-kit-N before
   this stylesheet loads, so restating them here — same weight, later in
   the cascade — makes the campaign palette the default for anything
   added from now on.

   If the campaign ever sets real values in Elementor → Site Settings,
   delete this block, or those settings will appear to do nothing.
   ============================================================ */
[class*="elementor-kit-"]{
  --e-global-color-primary:#0A1740;    /* headings   */
  --e-global-color-secondary:#0A1F5C;  /* deep navy  */
  --e-global-color-text:#48546E;       /* body copy  */
  --e-global-color-accent:#1B44C8;     /* Waterloo blue */
  --e-global-typography-primary-font-family:"Montserrat";
  --e-global-typography-primary-font-weight:900;
  --e-global-typography-secondary-font-family:"Montserrat";
  --e-global-typography-secondary-font-weight:800;
  --e-global-typography-text-font-family:"Inter";
  --e-global-typography-text-font-weight:400;
  --e-global-typography-accent-font-family:"Montserrat";
  --e-global-typography-accent-font-weight:800;
}

/* the placeholder text inside the dark form panel, until a real form
   shortcode replaces it */
.st-form-dark .elementor-widget-shortcode,
.st-form-dark .elementor-shortcode{color:var(--on-dark-dim)}


/* ============================================================
   PALETTE v3 — MATCHED TO THE PRINTED MASTER BANNER
   The lawn signs, door hangers and the master banner are navy, gold
   and forest green on white. A voter who sees the sign and then the
   site should not have to wonder whether it is the same campaign, so
   the gold and the green are sampled straight off that artwork:
       gold #E8A828 · green #0C3A11 · navy #05152F
   The blue stays as the action colour. What changes most is the
   rhythm — whole sections are painted now, the way the campaign
   sites the client liked do it, instead of one long white scroll.
   ============================================================ */
:root{
  --gold:#E8A828;
  --gold-deep:#C9891A;
  --gold-soft:rgba(232,168,40,.18);
  --on-gold:#05152F;
  --green:#14532A;
  --green-deep:#0C3A11;
  --green-soft:rgba(20,83,42,.12);
  --navy-band:#0A1F45;
  --navy-band-2:#05152F;
  --cream:#FBF6EA;
  --cream-2:#F4EEDD;
  --yellow:var(--gold);
  --yellow-deep:var(--gold-deep);
  --yellow-soft:var(--gold-soft);
  --on-yellow:var(--on-gold);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gold:#F0B942;--gold-deep:#D19A28;--gold-soft:rgba(240,185,66,.18);
    --green:#1D6B38;--green-deep:#14532A;--green-soft:rgba(29,107,56,.2);
    --cream:#141019;--cream-2:#1B1622;--navy-band:#081733;--navy-band-2:#050D20;
  }
}
:root[data-theme="dark"]{
  --gold:#F0B942;--gold-deep:#D19A28;--gold-soft:rgba(240,185,66,.18);
  --green:#1D6B38;--green-deep:#14532A;--green-soft:rgba(29,107,56,.2);
  --cream:#141019;--cream-2:#1B1622;--navy-band:#081733;--navy-band-2:#050D20;
}

/* ============================================================
   PAINTED SECTIONS
   Four grounds instead of one. Which block gets which is decided by
   the classes the templates already carry, so nothing has to be
   re-tagged in Elementor:
     cream  — the card rows, plan blocks, steps, events
     green  — every "alt" block (the explainers)
     gold   — the newsletter
     navy   — the slogan bands and page headers (already were)
   ============================================================ */
.elementor-section.st-headonly,
.elementor-section.st-cardrow,
.elementor-section.st-cardrow-bottom,
.elementor-section.st-afterrow,
.elementor-section.st-planwrap,
.elementor-section.st-steps,
.elementor-section.st-events,
.elementor-section.st-eventsrow,
.elementor-section.st-eventsnote,
.elementor-section.st-donaterow,
.elementor-section.st-faqrow,
.elementor-section.st-officialrow,
section.cream{background:var(--cream)}
.cream .pcard,.cream .ev,.cream .step,.cream .ballot,.cream .formcard,
.cream .etransfer,.cream .qa details,.cream .pdetail{background:var(--surface)}

.elementor-section.alt,section.green-sec{background:var(--green);color:var(--on-dark)}
.elementor-section.news,section.gold-sec{background:var(--gold);color:var(--on-gold)}

/* --- copy that sits directly on a painted ground --- */
:is(.elementor-section.alt,section.green-sec) :is(h2,h3,h4,.dsp),
:is(.elementor-section.alt,section.green-sec) .elementor-heading-title{color:#fff}
:is(.elementor-section.alt,section.green-sec) :is(p,.lead){color:rgba(255,255,255,.84)}
:is(.elementor-section.alt,section.green-sec) :is(.muted,.st-muted p){color:rgba(255,255,255,.64)}
:is(.elementor-section.alt,section.green-sec) :is(.eyebrow,.st-eyebrow .elementor-heading-title){color:var(--gold)}
:is(.elementor-section.alt,section.green-sec) :is(.rule,.st-rule){background:var(--gold)}
:is(.elementor-section.alt,section.green-sec) .st-hr .elementor-divider-separator{border-top-color:var(--gold) !important}

:is(.elementor-section.news,section.gold-sec) :is(h2,h3,h4,.dsp),
:is(.elementor-section.news,section.gold-sec) .elementor-heading-title{color:var(--on-gold)}
:is(.elementor-section.news,section.gold-sec) :is(p,.lead){color:rgba(5,21,47,.84)}
:is(.elementor-section.news,section.gold-sec) :is(.muted,.st-muted p){color:rgba(5,21,47,.62)}
:is(.elementor-section.news,section.gold-sec) :is(.eyebrow,.st-eyebrow .elementor-heading-title){color:rgba(5,21,47,.72)}
:is(.elementor-section.news,section.gold-sec) :is(.rule,.st-rule){background:var(--on-gold)}
:is(.elementor-section.news,section.gold-sec) .st-hr .elementor-divider-separator{border-top-color:var(--on-gold) !important}

/* --- and the panels floating on those grounds stand back down --- */
:is(.elementor-section.alt,.elementor-section.news,section.green-sec,section.gold-sec,section.navy-sec)
:is(.pcard,.ev,.step,.ballot,.formcard,.official,.etransfer,.pdetail,.qa details,.formnote,
   .st-card,.st-event,.st-stepcol,.st-plan-block,.st-form,.st-etransfer,.st-official){color:var(--ink)}
:is(.elementor-section.alt,.elementor-section.news,section.green-sec,section.gold-sec,section.navy-sec)
:is(.pcard,.ev,.step,.ballot,.formcard,.official,.etransfer,.pdetail,.qa details,
   .st-card,.st-event,.st-stepcol,.st-plan-block,.st-form,.st-etransfer,.st-official)
:is(h2,h3,h4,.elementor-heading-title,.elementor-icon-box-title){color:var(--ink)}
:is(.elementor-section.alt,.elementor-section.news,section.green-sec,section.gold-sec,section.navy-sec)
:is(.pcard,.ev,.step,.ballot,.formcard,.official,.etransfer,.pdetail,.qa details,
   .st-card,.st-event,.st-stepcol,.st-plan-block,.st-form,.st-etransfer,.st-official)
:is(p,.elementor-icon-box-description,.elementor-icon-list-text,.elementor-tab-content){color:var(--ink-2)}
:is(.elementor-section.alt,.elementor-section.news,section.green-sec,section.gold-sec,section.navy-sec)
:is(.pcard,.ev,.step,.ballot,.formcard,.official,.pdetail,.st-card,.st-event,.st-stepcol,.st-official)
:is(.muted,.meta,.bfoot,.bfoot p,.t,.st-muted p,.st-event-meta p){color:var(--ink-3)}
:is(.elementor-section.alt,.elementor-section.news,section.green-sec,section.gold-sec,section.navy-sec)
.ballot .bhead :is(h3,span){color:#fff}
:is(.elementor-section.alt,.elementor-section.news,section.green-sec,section.gold-sec,section.navy-sec)
.ballot li.primary :is(.d,.t){color:var(--on-gold)}
/* the plan blocks and step cards keep their own eyebrow pill */
:is(.elementor-section.alt,.elementor-section.news) .st-stepcol .st-eyebrow .elementor-heading-title{
  background:var(--gold);color:var(--on-gold);
}
:is(.elementor-section.alt,.elementor-section.news) .st-promise p{color:var(--red)}

/* --- buttons on painted grounds --- */
:where(.elementor-section.alt,section.green-sec) .st-btn-outline .elementor-button,
:where(.elementor-section.alt,section.green-sec) .btn-outline{color:#fff;border-color:rgba(255,255,255,.45)}
:where(.elementor-section.alt,section.green-sec) .st-btn-outline .elementor-button:hover,
:where(.elementor-section.alt,section.green-sec) .btn-outline:hover{background-color:rgba(255,255,255,.14);border-color:#fff;color:#fff}
:where(.elementor-section.news,section.gold-sec) .st-btn-navy .elementor-button,
:where(.elementor-section.news,section.gold-sec) .btn-dark{
  background-color:var(--navy-band);color:#fff;border-color:var(--navy-band);
}
:where(.elementor-section.news,section.gold-sec) .st-btn-navy .elementor-button:hover,
:where(.elementor-section.news,section.gold-sec) .btn-dark:hover{
  background-color:var(--navy-band-2);border-color:var(--navy-band-2);color:#fff;
}
:where(.elementor-section.news,section.gold-sec) .st-btn-outline .elementor-button,
:where(.elementor-section.news,section.gold-sec) .btn-outline{color:var(--on-gold);border-color:rgba(5,21,47,.3)}
:is(.elementor-section.news,section.gold-sec) .st-form input,
:is(.elementor-section.news,section.gold-sec) .inline-form input{background:#fff !important}

/* a painted section needs no hairline above it */
.elementor-section.alt,.elementor-section.news,
.elementor-section.st-headonly,.elementor-section.st-planwrap{border-top:0}

/* ============================================================
   HERO — THE MASTER BANNER, AS A PAGE
   ELECT / the name / the office badge / the ward rule / the promise /
   the three ticks, in the same order and weights as the printed piece.
   The name block and the tick row come through the two Text Editor
   widgets that used to hold the kicker pill and the tag pills.
   ============================================================ */
.elementor-section.hero{background:var(--surface)}
.hero::before,.elementor-section.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(760px 460px at 92% 88%, var(--gold-soft), transparent 62%),
    linear-gradient(180deg, var(--cream) 0%, var(--surface) 58%);
}
.elementor-section.hero > .elementor-container{position:relative;z-index:2;align-items:center}

/* Elementor 4 stopped honouring the legacy 58/42 split on this row, which
   is why the photo was rendering at about a third of its intended size */
@media (min-width:1025px){
  .elementor-section.hero > .elementor-container > .hero-copy-col{width:56%;flex:0 0 56%;max-width:56%}
  .elementor-section.hero > .elementor-container > .hero-photo-col{width:44%;flex:0 0 44%;max-width:44%}
}
.hero-photo-col > .elementor-widget-wrap{align-content:center}
.hero-photo-col img{
  width:100%;max-width:520px;height:auto;margin-inline:auto;display:block;
  filter:drop-shadow(0 26px 46px rgba(5,21,47,.3));
}

/* the copy column, in banner order */
.elementor-section.hero .hero-copy-col > .elementor-widget-wrap{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
.elementor-section.hero .hero-copy-col .elementor-widget{margin-bottom:0 !important;width:100%}
.elementor-section.hero .hero-copy-col .st-kicker{order:1}
.elementor-section.hero .hero-copy-col .st-h1{order:2}
.elementor-section.hero .hero-copy-col .st-pills{order:3}
.elementor-section.hero .hero-copy-col .st-lead{order:4}
.elementor-section.hero .hero-copy-col .st-btnrow-sec,
.elementor-section.hero .hero-copy-col .st-btnrow{order:5;margin-top:26px}

.elect{
  display:block;font-family:var(--font-display);font-variation-settings:"wdth" 88;
  font-weight:900;font-size:clamp(1.1rem,2.3vw,1.7rem);letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);line-height:1;margin-bottom:2px;
}
.hname{
  font-family:var(--font-display);font-variation-settings:"wdth" 72;
  font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.03em;
  color:var(--navy-band);font-size:clamp(2.6rem,7.2vw,5.6rem);margin:0;
}
.hname b{display:block;font-weight:900;font-size:1.32em;letter-spacing:-.04em}
.office{
  display:inline-block;margin-top:14px;background:var(--green-deep);color:#fff;
  font-family:var(--font-display);font-variation-settings:"wdth" 86;
  font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(.95rem,2vw,1.45rem);padding:7px 16px 8px;border-radius:4px;
}
.ward{
  display:flex;align-items:center;gap:14px;margin-top:12px;width:min(100%,520px);
  font-family:var(--font-display);font-variation-settings:"wdth" 86;
  font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.95rem,2vw,1.4rem);color:var(--green-deep);
}
.ward i{flex:1;height:3px;background:var(--gold);border-radius:2px}

/* the promise line is the page's h1 */
.elementor-section.hero .st-h1 .elementor-heading-title{
  margin-top:16px;font-variation-settings:"wdth" 78;font-weight:900;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:.98;letter-spacing:-.022em;
  color:var(--navy-band);
}
.elementor-section.hero .st-h1 .elementor-heading-title em,
.elementor-section.hero .st-h1 .elementor-heading-title .em{color:var(--gold);display:block}
.elementor-section.hero .st-lead p{margin-top:16px;font-size:1.02rem;color:var(--ink-2);max-width:48ch}

.tickrow{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:20px 0 0;padding:0;list-style:none}
.tickrow li{
  display:flex;align-items:center;gap:11px;padding:2px 20px 2px 0;
  font-family:var(--font-display);font-variation-settings:"wdth" 88;
  font-weight:900;text-transform:uppercase;line-height:1.08;letter-spacing:.01em;
  font-size:clamp(.78rem,1.5vw,.96rem);color:var(--navy-band);
}
.tickrow li+li{padding-left:20px;border-left:2px solid var(--gold)}
.tickrow .tk{width:30px;height:30px;flex:none;border-radius:50%;background:var(--green-deep);display:grid;place-items:center}
.tickrow .tk svg{width:15px;height:15px;stroke:#fff;stroke-width:3.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* the banner's slogan bar, as the strip under the hero */
.elementor-section.slogan-bar,section.slogan-bar{background:var(--navy-band);color:#fff}
.slogan-bar .sb{
  display:block;text-align:center;
  font-family:var(--font-display);font-variation-settings:"wdth" 82;
  font-weight:900;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(1.3rem,3.4vw,2.5rem);line-height:1;color:#fff;
}
.slogan-bar .sb em{
  font-family:var(--font-script);font-style:normal;text-transform:none;
  font-weight:400;color:var(--gold);font-size:1.08em;padding-right:.12em;
}
.slogan-bar .sb u{text-decoration:none;box-shadow:inset 0 -.14em 0 var(--gold)}

@media (max-width:900px){.tickrow li{padding-right:14px}.tickrow li+li{padding-left:14px}}
@media (max-width:640px){
  .tickrow{flex-direction:column;gap:10px}
  .tickrow li{padding:0;width:100%}
  .tickrow li+li{padding-left:0;border-left:0}
  .ward{width:100%}
}
@media (max-width:1024px){
  .elementor-section.hero .hero-photo-col img{max-width:360px}
}

/* ============================================================
   PHOTOGRAPHS ARE NEVER THUMBNAILS
   Every picture of the candidate on this site is a hero image. The
   column it sits in gets a floor so Elementor cannot shrink it, and
   the picture always fills that column.
   ============================================================ */
.st-photo img,.st-hero-img img,.elementor-widget-image img{
  width:100%;height:auto;max-width:100%;display:block;
}
.st-photo img{border-radius:var(--r-xl);box-shadow:var(--sh-3)}
@media (min-width:1025px){
  .elementor-column:has(.st-photo){min-width:36%;flex:1 0 36%}
  .elementor-column:has(.st-hero-img){min-width:40%}
  .st-photo img{max-width:none}
}

/* --- hero corrections -------------------------------------------------
   The old blue arch behind the photo belonged to the previous design and
   now swallows the picture, and the widget-width rule was reaching past
   the column's own children into the button row. --- */
.hero-photo-col::after{content:none !important;display:none !important}
.elementor-section.hero .hero-copy-col .elementor-widget{width:auto}
.elementor-section.hero .hero-copy-col > .elementor-widget-wrap > .elementor-widget{width:100%;margin-bottom:0 !important}
.elementor-section.hero .hero-copy-col > .elementor-widget-wrap > .st-btnrow-sec > .elementor-container{padding:0 !important}
.elementor-section.hero .st-btnrow > .elementor-widget-wrap{flex-direction:row;flex-wrap:wrap;gap:13px;align-items:center}
.elementor-section.hero .st-btnrow > .elementor-widget-wrap > .elementor-widget{width:auto;margin:0}
.elementor-section.hero .st-btn .elementor-button{width:auto}
.hero-photo-col{margin-right:0 !important}
.hero-photo-col > .elementor-widget-wrap{padding:0 !important;align-content:center;justify-content:center}

/* --- the hero name block and ticks come through Text Editor widgets, so
       they are spans and list items rather than headings and SVGs --- */
.hname{display:block}
.tickrow .tk{color:#fff;font-size:15px;font-weight:900;line-height:1}
.st-kicker p,.st-pills p,.st-pills ul{margin:0}
.st-pills .tickrow{padding-left:0}
.elementor-section.hero .st-pills .elementor-icon-list-items{display:none}

/* ============================================================
   FLUENT FORMS
   The field labels are the small uppercase campaign label; the
   individual checkbox and radio options are ordinary sentence case,
   or a six-item volunteer list reads like a ransom note.
   ============================================================ */
.st-form .ff-el-form-check-label,
.st-form .ff-el-form-check label,
.st-form .ff-el-form-check-label .ff-el-form-check-label{
  text-transform:none !important;letter-spacing:0 !important;
  font-size:.94rem !important;font-weight:500 !important;color:var(--ink-2) !important;
  line-height:1.45 !important;cursor:pointer;
}
.st-form-dark .ff-el-form-check-label,
.st-form-dark .ff-el-form-check label{color:var(--on-dark-dim) !important}
.st-form .ff-el-form-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 9px}
.st-form .ff-el-form-check input[type=checkbox],
.st-form .ff-el-form-check input[type=radio]{
  width:17px !important;height:17px !important;margin:3px 0 0 !important;flex:none;
  accent-color:var(--red);
}
.st-form .ff-el-group{margin-bottom:16px}
.st-form select.ff-el-form-control{
  appearance:auto;color:var(--ink) !important;background:var(--surface-2) !important;
}
.st-form-dark select.ff-el-form-control option{color:var(--ink)}
.st-form .ff-el-is-error .ff-el-form-control{border-color:#C0392B !important}
.st-form .error-text,.st-form .text-danger{color:#E06C6C;font-size:.84rem}
.st-form-dark .error-text,.st-form-dark .text-danger{color:#FFB4B4}
.st-form .ff-message-success{
  background:var(--green-soft);border:1px solid var(--green);color:var(--green);
  border-radius:var(--r-md);padding:16px 18px;
}
.st-form-dark .ff-message-success{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}

/* --- Fluent Forms outside a .st-form panel (the newsletter strip) still
       has to look like the rest of the campaign --- */
.st-campaign .fluentform .ff-el-form-control{
  font:inherit;font-size:.98rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;width:100%;box-shadow:none;
}
.st-campaign .fluentform .ff-el-form-control:focus{border-color:var(--red);outline:none}
.st-campaign .fluentform .ff-el-input--label label{
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.st-campaign .fluentform .ff-btn-submit{
  font-family:var(--font-display);font-weight:900;font-size:.9rem;letter-spacing:.045em;
  text-transform:uppercase;background:var(--red);color:#fff;border:0;
  border-radius:var(--r-pill);padding:16px 30px;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),background .16s;
}
.st-campaign .fluentform .ff-btn-submit:hover{background:var(--red-deep);transform:translateY(-2px)}

/* the newsletter strip: label hidden, field and button on one line */
.elementor-section.news .fluentform .ff-el-input--label{display:none}
.elementor-section.news .fluentform .ff-el-group{margin-bottom:12px}
.elementor-section.news .fluentform .ff-el-form-control{min-width:260px;border-radius:var(--r-pill);padding:16px 22px}
.elementor-section.news .fluentform .ff-btn-submit{background:var(--navy-band)}
.elementor-section.news .fluentform .ff-btn-submit:hover{background:var(--navy-band-2)}
@media (min-width:600px){
  .elementor-section.news .fluentform .ff-t-cell,
  .elementor-section.news .fluentform .frm-fluent-form{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
  .elementor-section.news .fluentform .ff-el-group{margin-bottom:0;flex:1;min-width:240px}
  .elementor-section.news .fluentform .ff_submit_btn_wrapper{margin:0}
}

/* a painted block is split across two or three Elementor sections, and the
   hairline that used to separate white sections now shows as a seam */
.elementor-section.cream,.elementor-section.alt,.elementor-section.news,
.elementor-section.st-headonly,.elementor-section.st-cardrow,
.elementor-section.st-cardrow-bottom,.elementor-section.st-afterrow,
.elementor-section.st-planwrap,.elementor-section.st-steps,
.elementor-section.st-events,.elementor-section.st-eventsrow,
.elementor-section.st-eventsnote,.elementor-section.st-donaterow,
.elementor-section.st-faqrow,.elementor-section.st-officialrow,
.elementor-section.hr-top.alt{border-top:0 !important}


/* ============================================================
   PALETTE v4 — THE BLUE IS GONE
   #1B44C8 is retired. The site now runs on exactly the three inks of
   the printed banner: navy, gold, forest green. Green takes over as
   the action colour (buttons, links, icons) and gold keeps attention
   duty. The old --red* / --blue* token names stay as aliases so none
   of the rules below have to be rewritten.
   ============================================================ */
:root{
  --green-act:#146B3A;        /* action green — buttons, links, icons  */
  --green-act-deep:#0F5029;   /* hover                                 */
  --green-act-soft:rgba(20,107,58,.12);

  --red:var(--green-act);
  --red-deep:var(--green-act-deep);
  --red-soft:var(--green-act-soft);
  --blue:var(--green-act);
  --blue-deep:var(--green-act-deep);
  --blue-soft:var(--green-act-soft);

  --char:#0A1F45;
  --char-2:#14305F;
  --char-3:#146B3A;
  --navy-solid:#0A1F45;
  --navy-solid-h:#14305F;
  --on-yellow:#05152F;
  --on-gold:#05152F;
  --sh-red:0 10px 30px rgba(20,107,58,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --green-act:#2E9C5B;--green-act-deep:#238049;--green-act-soft:rgba(46,156,91,.18);
    --char:#071634;--char-2:#0E2450;--char-3:#2E9C5B;
    --navy-solid:#0E2450;--navy-solid-h:#17346C;
    --sh-red:0 10px 30px rgba(46,156,91,.3);
  }
}
:root[data-theme="dark"]{
  --green-act:#2E9C5B;--green-act-deep:#238049;--green-act-soft:rgba(46,156,91,.18);
  --char:#071634;--char-2:#0E2450;--char-3:#2E9C5B;
  --navy-solid:#0E2450;--navy-solid-h:#17346C;
  --sh-red:0 10px 30px rgba(46,156,91,.3);
}

/* the handful of places that hard-coded the blue rather than the token */
.kicker{border-color:var(--gold-deep)}
.kicker i{box-shadow:0 0 0 4px rgba(5,21,47,.16)}
.pcard::before,.st-card.elementor-widget-icon-box::before,
.st-card > .elementor-widget-container::before{
  background:radial-gradient(circle,rgba(232,168,40,.16),rgba(232,168,40,0) 70%) !important;
}
.band::before,.elementor-section.band::before{
  background:radial-gradient(680px 340px at 50% 130%,rgba(232,168,40,.26),transparent 70%) !important;
}
.phead::before,.elementor-section.phead::before{
  background:radial-gradient(720px 340px at 88% 0%,rgba(232,168,40,.24),transparent 68%) !important;
}
.ballot li.primary{border-color:rgba(232,168,40,.6)}
.ballot li.primary .box{background:var(--gold);border-color:var(--gold-deep)}

/* green buttons need a different treatment where the ground is green */
:where(.elementor-section.alt,section.green-sec) .st-btn-red .elementor-button,
:where(.elementor-section.alt,section.green-sec) .btn-red{
  background-color:var(--gold);color:var(--on-gold);border-color:var(--gold);
  box-shadow:0 8px 24px rgba(232,168,40,.3);
}
:where(.elementor-section.alt,section.green-sec) .st-btn-red .elementor-button:hover,
:where(.elementor-section.alt,section.green-sec) .btn-red:hover{
  background-color:var(--gold-deep);border-color:var(--gold-deep);color:var(--on-gold);
}

/* ============================================================
   THE HERO STAR
   A filled gold asterisk sits behind the cut-out photograph, so the
   candidate stands inside a burst rather than on an empty white field.
   Drawn as an SVG so it stays crisp at any size.
   ============================================================ */
.hero-photo-col,.hero-photo{position:relative}
.hero-photo-col::before,.hero-photo::before{
  content:"" !important;display:block !important;
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(118%,660px);height:min(118%,660px);max-width:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23E8A828'%3E%3Crect x='83' y='4' width='34' height='192' rx='17'/%3E%3Crect x='83' y='4' width='34' height='192' rx='17' transform='rotate(45 100 100)'/%3E%3Crect x='83' y='4' width='34' height='192' rx='17' transform='rotate(90 100 100)'/%3E%3Crect x='83' y='4' width='34' height='192' rx='17' transform='rotate(135 100 100)'/%3E%3Ccircle cx='100' cy='100' r='42'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.hero-photo-col > .elementor-widget-wrap,
.hero-photo-col img,.hero-photo img{position:relative;z-index:1}

/* ============================================================
   SECTION RHYTHM
   The cream was so close to white that the join between two blocks
   was invisible, and a couple of rows ended with no floor at all, so
   the cards sat straight on the next band. Both fixed here.
   ============================================================ */
:root{--cream:#F6EDDA;--cream-2:#EFE4CB}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cream:#16121B;--cream-2:#1E1926}}
:root[data-theme="dark"]{--cream:#16121B;--cream-2:#1E1926}

/* a row that nothing continues still needs the block's bottom padding */
.elementor-section.st-eventsrow:not(:has(+ .elementor-section.st-eventsnote)),
.elementor-section.st-cardrow:not(:has(+ .elementor-section.st-afterrow)):not(.st-cardrow-bottom),
.elementor-section.st-faqrow:not(:has(+ .elementor-section.st-officialrow)),
.elementor-section.st-headonly:not(:has(+ .elementor-section)){padding-bottom:96px}
.elementor-section.st-faqrow{padding-top:34px}
.elementor-section.st-officialrow{padding-top:40px}

/* ============================================================
   RESPONSIVE — the hero and every band below it
   ============================================================ */
@media (max-width:1024px){
  .elementor-section.hero > .elementor-container{padding-block:56px 0}
  .hname{font-size:clamp(2.4rem,8vw,4rem)}
  .elementor-section.hero .hero-photo-col img{max-width:340px}
  .hero-photo-col::before{width:min(140%,460px);height:min(140%,460px)}
  .tickrow li{font-size:.84rem}
}

@media (max-width:767px){
  /* --- hero: the photograph inside its star first, then the banner --- */
  .elementor-section.hero > .elementor-container{
    flex-direction:column;padding-block:20px 0 !important;min-height:0;
  }
  .elementor-section.hero > .elementor-container > .hero-copy-col,
  .elementor-section.hero > .elementor-container > .hero-photo-col{
    width:100% !important;max-width:none !important;flex:0 0 auto !important;
  }
  .hero-photo-col{order:-1;margin-inline:0 !important}
  .hero-photo-col img,.hero-photo img{max-width:min(70vw,280px) !important;margin-inline:auto}
  .hero-photo-col::before,.hero-photo::before{width:min(165%,400px);height:min(165%,400px);top:47%}
  .hero-copy-col > .elementor-widget-wrap{padding-bottom:44px !important;align-items:flex-start}
  .elect{font-size:1rem}
  .hname{font-size:clamp(2.5rem,13.5vw,3.4rem);line-height:.88}
  .office{font-size:.95rem;padding:6px 12px;margin-top:12px}
  .ward{font-size:.95rem;gap:10px;margin-top:10px}
  .elementor-section.hero .st-h1 .elementor-heading-title,.promise{
    font-size:clamp(1.65rem,7.6vw,2.1rem);margin-top:14px;
  }
  .elementor-section.hero .st-lead p,.hero .sub{font-size:.97rem;margin-top:14px}
  .tickrow{flex-direction:column;gap:11px;margin-top:18px}
  .tickrow li,.tickrow li+li{padding:0;width:100%;border-left:0;font-size:.92rem}
  .tickrow .tk{width:27px;height:27px;font-size:14px}
  .elementor-section.hero .st-btnrow > .elementor-widget-wrap{flex-direction:column;align-items:stretch}
  .elementor-section.hero .st-btnrow > .elementor-widget-wrap > .elementor-widget,
  .elementor-section.hero .st-btn .elementor-button{width:100%}
  .hero-btns{flex-direction:column;align-items:stretch;width:100%}
  .hero-btns .btn{width:100%}

  /* --- the slogan bar and the countdown strip --- */
  .slogan-bar .wrap{padding-top:16px;padding-bottom:18px}
  .slogan-bar .sb{font-size:1.45rem;line-height:1.18}
  .votestrip .wrap,.elementor-section.votestrip .wrap{
    grid-template-columns:1fr;gap:16px;padding-top:26px;padding-bottom:26px;
  }
  .cd{gap:8px}
  .cd .unit{flex:1;min-width:0;padding:10px 6px}
  .cd .n{font-size:1.45rem}
  .votestrip .cdtxt{font-size:1rem}
  .votestrip .btn{width:100%;justify-content:center}

  /* --- block rhythm on a phone --- */
  .elementor-section.sec,section.sec{padding:56px 0}
  .elementor-section.sec-tight,section.sec-tight{padding:44px 0}
  .elementor-section.st-headonly{padding:56px 0 0}
  .elementor-section.st-cardrow{padding:22px 0 0}
  .elementor-section.st-afterrow{padding:22px 0 56px}
  .elementor-section.st-cardrow-bottom{padding-bottom:56px}
  .elementor-section.st-eventsrow{padding:22px 0 0}
  .elementor-section.st-eventsnote{padding:16px 0 48px}
  .elementor-section.st-faqrow{padding:22px 0 0}
  .elementor-section.st-officialrow{padding:26px 0 48px}
  .elementor-section.st-steps{padding-top:48px}
  .elementor-section.st-donaterow{padding-bottom:48px}
  .elementor-section.st-planwrap:first-of-type{padding-top:48px}
  .elementor-section.st-planwrap:last-of-type{padding-bottom:48px}
  .elementor-section.phead,section.phead{padding:48px 0 44px}
  .elementor-section.st-eventsrow:not(:has(+ .elementor-section.st-eventsnote)),
  .elementor-section.st-cardrow:not(:has(+ .elementor-section.st-afterrow)):not(.st-cardrow-bottom),
  .elementor-section.st-faqrow:not(:has(+ .elementor-section.st-officialrow)),
  .elementor-section.st-headonly:not(:has(+ .elementor-section)){padding-bottom:56px}

  /* --- everything else that was laid out in columns --- */
  .split,.ballotwrap,.cta2,.donate,.qa,.checks,.f2,.news .wrap,
  .pgrid,.pgrid.three,.evgrid,.steps{grid-template-columns:1fr !important;gap:18px}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px}
  .legal{flex-direction:column;gap:8px}
  .ballot .bhead{flex-direction:column;gap:4px}
  .ballot li{gap:12px;padding:12px 10px}
  .ballot li .t{font-size:.74rem}
  .etransfer .addr,.st-addr p{font-size:1rem;word-break:break-word}
  .elementor-section.elementor-section-boxed > .elementor-container{padding-inline:20px}
  .wrap{padding-inline:20px}
  .st-photo img{max-width:100%}
  .elementor-column:has(.st-photo),.elementor-column:has(.st-hero-img){min-width:0;flex:0 0 100%}
}

@media (max-width:480px){
  .fgrid{grid-template-columns:1fr;gap:22px}
  .cd .unit{padding:9px 4px}
  .cd .n{font-size:1.3rem}
  .cd .l{font-size:.52rem;letter-spacing:.1em}
  .slogan-bar .sb{font-size:1.25rem}
  .hname{font-size:clamp(2.2rem,13vw,2.9rem)}
}

/* ============================================================
   READABILITY
   Measured every run of text on the live pages against its real
   background. Three things were failing WCAG AA and are fixed here.
   ============================================================ */

/* 1. the muted ink was 3.85:1 on white — captions, times, the role line
      under the logo, the events meta. 5.3:1 now. */
:root{--ink-3:#606C88}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink-3:#94A2C6}}
:root[data-theme="dark"]{--ink-3:#94A2C6}

/* 2. the banner gold is a fill colour, not an ink. On white it reads at
      2.1:1, so gold *text* on a light ground uses a deeper cast of the
      same hue. Bands, buttons and the hero star keep the bright gold. */
:root{--gold-ink:#A66E06}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--gold-ink:#F0B942}}
:root[data-theme="dark"]{--gold-ink:#F0B942}
.elect{color:var(--gold-ink)}
.promise .em,
.elementor-section.hero .st-h1 .elementor-heading-title em,
.elementor-section.hero .st-h1 .elementor-heading-title .em{color:var(--gold-ink)}
.hero h1 .em{color:var(--gold-ink)}
.cream .elect,.cream .promise .em{color:var(--gold-ink)}

/* 3. the call-to-action cards paint their own ground, so their headings
      and copy must be set against that ground, not the page ink */
.st-cta-red .elementor-widget-heading .elementor-heading-title,
.st-cta-red .st-h3.elementor-widget-heading .elementor-heading-title,
.ctacard.red h3{color:#fff}
.st-cta-red .elementor-widget-text-editor p,.ctacard.red p{color:rgba(255,255,255,.88)}
.st-cta-navy .elementor-widget-heading .elementor-heading-title,
.st-cta-navy .st-h3.elementor-widget-heading .elementor-heading-title,
.ctacard.darkc h3{color:var(--on-gold)}
.st-cta-navy .elementor-widget-text-editor p,.ctacard.darkc p{color:rgba(5,21,47,.84)}
.st-cta-red .st-eyebrow .elementor-heading-title{color:var(--gold)}
.st-cta-navy .st-eyebrow .elementor-heading-title{color:rgba(5,21,47,.72)}

/* --- the star sat too low and its bottom arms were being clipped --- */
.hero-photo-col::before,.hero-photo::before{
  top:39%;width:min(104%,560px);height:min(104%,560px);
}
@media (max-width:1024px){.hero-photo-col::before{width:min(126%,420px);height:min(126%,420px)}}
@media (max-width:767px){
  .hero-photo-col::before,.hero-photo::before{width:min(150%,360px);height:min(150%,360px);top:44%}
}

/* --- last two readability failures found by re-measuring every page ---
   the role line under the logo kept page ink when the logo is repeated
   in the dark footer, and the amber note boxes keep a light panel of
   their own even inside a painted section. --- */
footer.site .brand .bw{color:var(--footer-ink)}
:is(.elementor-section.alt,.elementor-section.news,
    section.green-sec,section.gold-sec,section.navy-sec)
:is(.st-note,.st-note p,.formnote,p.formnote,.official,.official p){color:var(--ink-3)}
:is(.elementor-section.alt,.elementor-section.news,
    section.green-sec,section.gold-sec,section.navy-sec) .st-note p{background:var(--surface)}

/* --- on a phone, Elementor's column gutter inside a panel was eating
       about 60px of a 375px screen, so form fields and card copy sat in
       a narrow trough. The panel supplies its own padding already. --- */
@media (max-width:767px){
  :is(.st-form,.st-cta,.st-plan-block,.st-etransfer,.st-event,.st-official,.st-stepcol)
  > .elementor-container > .elementor-column > .elementor-widget-wrap{
    padding-left:0 !important;padding-right:0 !important;
  }
  .st-form .fluentform,.st-form .frm-fluent-form,
  .st-form .elementor-widget-shortcode,.st-form .elementor-shortcode{width:100%}
}


/* ============================================================
   THE WORDMARK
   The ST disc is gone. The logo is now type alone, cut the same way
   as the name on the master banner — heavy condensed Archivo — so the
   header, the footer and the hero all speak with one voice.
   ============================================================ */
.brand{gap:0;align-items:center}
.brand .mark{display:none}
.brand > span{display:block}
.brand .bn{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:"wdth" 74;
  font-weight:900;font-size:1.44rem;line-height:.92;
  letter-spacing:-.018em;text-transform:uppercase;
  color:var(--navy-band);
}
.brand .bw{
  display:block;margin-top:6px;
  font-family:var(--font-display);font-variation-settings:"wdth" 94;
  font-weight:800;font-size:.6rem;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-act);
}
header.site .brand:hover .bn{color:var(--green-act)}

footer.site .brand .bn{color:#fff}
footer.site .brand .bw{color:var(--gold)}
footer.site .brand:hover .bn{color:var(--gold)}

@media (max-width:767px){
  .brand .bn{font-size:1.18rem}
  .brand .bw{font-size:.55rem;letter-spacing:.16em;margin-top:5px}
}

/* ============================================================
   BUTTON SHADOWS
   Every button was carrying a 24–30px drop that read as a glow. One
   quiet shadow now, the same on all of them, a touch deeper on hover.
   ============================================================ */
:root{--sh-red:0 4px 14px rgba(20,107,58,.16)}
.btn,.btn-red,.btn-dark,.btn-light,.btn-outline,.btn-ghost,.btn-sm,
.votestrip .btn-dark,
:where(.elementor-section.alt,section.green-sec) .btn-red,
:where(.elementor-section.news,section.gold-sec) .btn-dark,
.ctacard.darkc .btn-dark,
nav.main a.btn-red,
.st-btn .elementor-button,
.st-btn-red.elementor-widget-button .elementor-button,
.st-btn-navy.elementor-widget-button .elementor-button,
.st-btn-outline.elementor-widget-button .elementor-button,
.st-btn-ghost.elementor-widget-button .elementor-button,
:where(.elementor-section.alt,section.green-sec) .st-btn-red .elementor-button,
:where(.elementor-section.news,section.gold-sec) .st-btn-navy .elementor-button,
.votestrip .st-btn-navy.elementor-widget-button .elementor-button,
.st-cta-navy .st-btn-navy.elementor-widget-button .elementor-button,
.st-campaign .fluentform .ff-btn-submit,
.st-form button[type=submit],.st-form input[type=submit],
.st-form .ff-btn-submit{
  box-shadow:0 1px 2px rgba(5,21,47,.08), 0 2px 5px rgba(5,21,47,.10);
}
.btn:hover,
.st-btn .elementor-button:hover,
.st-btn-red.elementor-widget-button .elementor-button:hover,
.st-btn-navy.elementor-widget-button .elementor-button:hover,
.st-campaign .fluentform .ff-btn-submit:hover{
  box-shadow:0 2px 4px rgba(5,21,47,.10), 0 5px 12px rgba(5,21,47,.14);
}


/* ============================================================
   BUTTON PAIRS SIT LEVEL
   In the slogan bands the two buttons are separate widgets, and the
   first one still carried the section's 18px widget gap. Inside a flex
   row centred on the cross axis that pushed it 9px above its partner.
   They are also given a shared minimum width so the pair reads as a
   pair rather than two nearly-equal shapes.
   ============================================================ */
.st-btnrow > .elementor-widget-wrap > .elementor-widget,
.st-center .st-btnrow .elementor-widget:not(:last-child),
.st-btnrow-sec .elementor-widget:not(:last-child){margin-bottom:0 !important}
.st-btnrow > .elementor-widget-wrap{align-items:stretch}
.st-btnrow > .elementor-widget-wrap > .elementor-widget{display:flex;align-items:center}
.st-btn .elementor-button{min-height:50px}
.elementor-section.band .st-btn .elementor-button,
.elementor-section.phead .st-btn .elementor-button,
section.band .btn{min-width:200px}
@media (max-width:767px){
  .elementor-section.band .st-btn .elementor-button,
  .elementor-section.phead .st-btn .elementor-button,
  section.band .btn{min-width:0;width:100%}
}

/* ============================================================
   THE NEWSLETTER ROW
   Fluent Forms wraps its groups in a fieldset, so making the form a
   flex container never reached them and the button dropped below the
   field. The fieldset is the row; both controls share one height.
   ============================================================ */
.elementor-section.news .fluentform fieldset,
section.gold-sec .fluentform fieldset{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  border:0;padding:0;margin:0;
}
.elementor-section.news .fluentform .ff-el-group,
section.gold-sec .fluentform .ff-el-group{flex:1 1 240px;margin:0}
.elementor-section.news .fluentform .ff-el-group.ff_submit_btn_wrapper,
section.gold-sec .fluentform .ff-el-group.ff_submit_btn_wrapper{flex:0 0 auto}
.elementor-section.news .fluentform .ff-el-form-control,
section.gold-sec .fluentform .ff-el-form-control{
  height:56px;padding:0 22px;border-radius:var(--r-pill);
}
.elementor-section.news .fluentform .ff-btn-submit,
section.gold-sec .fluentform .ff-btn-submit{
  height:56px;padding:0 32px;display:inline-flex;align-items:center;justify-content:center;
}
.elementor-section.news .fluentform,
section.gold-sec .fluentform{max-width:520px}
@media (min-width:1025px){
  .elementor-section.news .elementor-column:has(.elementor-widget-shortcode){
    flex:0 0 44%;max-width:44%;
  }
}
@media (max-width:600px){
  .elementor-section.news .fluentform .ff-el-group.ff_submit_btn_wrapper{flex:1 1 100%}
  .elementor-section.news .fluentform .ff-btn-submit{width:100%}
}

/* the countdown now carries a seconds box, so the four units share the row */
.cd .n{font-variant-numeric:tabular-nums}
@media (min-width:768px){.cd .unit{min-width:64px}}

/* --- the newsletter row, finished.
   Fluent Forms gives the submit wrapper a block width of its own, so even
   inside a flex fieldset the pair overflowed the line and the button
   dropped under the field. The wrapper is sized by its button now. --- */
.elementor-section.news .fluentform fieldset,
section.gold-sec .fluentform fieldset{display:flex !important}
.elementor-section.news .fluentform .ff-el-group,
section.gold-sec .fluentform .ff-el-group{flex:1 1 200px !important;min-width:0;margin:0 !important}
.elementor-section.news .fluentform .ff-el-group.ff_submit_btn_wrapper,
section.gold-sec .fluentform .ff-el-group.ff_submit_btn_wrapper{
  flex:0 0 auto !important;width:auto !important;
}
@media (max-width:600px){
  .elementor-section.news .fluentform .ff-el-group.ff_submit_btn_wrapper,
  section.gold-sec .fluentform .ff-el-group.ff_submit_btn_wrapper{flex:1 1 100% !important;width:100% !important}
}


/* ============================================================
   ONE LOOK, ALWAYS
   A campaign has one set of colours. A visitor whose phone or laptop is
   in dark mode must still see the navy, gold and green on the lawn sign,
   not a repainted version of it.

   `color-scheme: only light` stops the browser repainting form fields,
   dropdowns and scrollbars, and `data-theme="light"` on <html> (added in
   functions.php) switches off every dark block in this file. The media
   query below is the belt to that pair of braces: it restates the light
   values at the same weight as the dark rules and after them, so the
   palette holds even on a page served before that attribute existed.
   ============================================================ */
:root{color-scheme:only light}

@media (prefers-color-scheme: dark){
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"]{
    --gold:#E8A828;
    --gold-deep:#C9891A;
    --gold-soft:rgba(232,168,40,.18);
    --gold-ink:#A66E06;
    --on-gold:#05152F;
    --on-yellow:#05152F;
    --yellow:#E8A828;
    --yellow-deep:#C9891A;
    --yellow-soft:rgba(232,168,40,.18);

    --green:#14532A;
    --green-deep:#0C3A11;
    --green-soft:rgba(20,83,42,.12);
    --green-act:#146B3A;
    --green-act-deep:#0F5029;
    --green-act-soft:rgba(20,107,58,.12);

    --red:#146B3A;
    --red-deep:#0F5029;
    --red-soft:rgba(20,107,58,.12);
    --blue:#146B3A;
    --blue-deep:#0F5029;
    --blue-soft:rgba(20,107,58,.12);

    --navy-band:#0A1F45;
    --navy-band-2:#05152F;
    --char:#0A1F45;
    --char-2:#14305F;
    --char-3:#146B3A;
    --navy-solid:#0A1F45;
    --navy-solid-h:#14305F;

    --cream:#F6EDDA;
    --cream-2:#EFE4CB;
    --paper:#EAEFFA;
    --surface:#FFFFFF;
    --surface-2:#F3F6FD;
    --line:#D6DEF3;
    --line-soft:#E7ECF9;

    --ink:#0A1740;
    --ink-2:#48546E;
    --ink-3:#606C88;
    --on-dark:#EEF3FF;
    --on-dark-dim:#A9BAE2;

    --footer:#071539;
    --footer-ink:#A2B3D8;
    --flag:#A32020;
    --flag-bg:#FDEBEB;

    --sh-1:0 1px 2px rgba(3,24,66,.06), 0 4px 12px rgba(3,24,66,.06);
    --sh-2:0 2px 6px rgba(3,24,66,.07), 0 14px 34px rgba(3,24,66,.10);
    --sh-3:0 4px 10px rgba(3,24,66,.09), 0 26px 56px rgba(3,24,66,.15);
    --sh-red:0 4px 14px rgba(20,107,58,.16);
  }

  /* form controls the browser would otherwise re-skin */
  input,select,textarea,button{color-scheme:only light}
  .st-form .ff-el-form-control,
  .st-campaign .fluentform .ff-el-form-control{
    background:var(--surface-2);color:var(--ink);border-color:var(--line);
  }
  .st-form-dark .ff-el-form-control{
    background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.16);
  }
  .elementor-section.news .fluentform .ff-el-form-control,
  section.gold-sec .fluentform .ff-el-form-control{background:#fff}
  img,video{filter:none}
}


/* ============================================================
   THE BAR RIDES OVER THE HERO
   No announcement strip and no wordmark up here — the candidate's name
   should meet a visitor once, at full size, in the hero. What is left
   is the menu, floating clear over the picture and turning solid the
   moment the page scrolls.
   ============================================================ */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;box-shadow:none;
  transition:background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
header.site.scrolled{
  background:var(--surface);border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(10,31,69,.05);
}
header.site .bar{justify-content:center;gap:8px}
nav.main{margin-left:0}
#burger{margin-left:auto}

/* over the navy page headers the links have to be light until the bar solidifies */
body:not(.home) header.site:not(.scrolled) nav.main a{color:rgba(255,255,255,.88)}
body:not(.home) header.site:not(.scrolled) nav.main a:hover,
body:not(.home) header.site:not(.scrolled) nav.main a.active{
  color:#fff;background:rgba(255,255,255,.14);
}
body:not(.home) header.site:not(.scrolled) #burger{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.32);
}
body:not(.home) header.site:not(.scrolled) nav.main a.btn-red{color:#fff}

/* the first block on every page now starts under a floating bar */
.elementor-section.hero > .elementor-container{padding-block:132px 60px !important}
.elementor-section.phead,section.phead{padding-top:150px}
@media (max-width:767px){
  .elementor-section.hero > .elementor-container{padding-block:96px 0 !important}
  .elementor-section.phead,section.phead{padding-top:104px}
}

/* ============================================================
   THE HERO BANDS
   The asterisk read as a retailer's mark. In its place, the device the
   campaign already uses on the roll-up banner and the flyer: a slanted
   gold band with a thin navy one riding above it.
   ============================================================ */
.hero-photo-col::before,.hero-photo::before{
  content:"" !important;display:block !important;
  position:absolute;z-index:0;pointer-events:none;
  left:-9%;width:118%;height:23%;top:52%;
  transform:rotate(-7deg);transform-origin:center;
  background:var(--gold);border-radius:3px;
  box-shadow:0 18px 40px rgba(232,168,40,.22);
}
.hero-photo-col::after,.hero-photo::after{
  content:"" !important;display:block !important;
  position:absolute;z-index:0;pointer-events:none;
  left:-9%;width:118%;height:6%;top:43%;
  transform:rotate(-7deg);transform-origin:center;
  background:var(--navy-band);border-radius:3px;
}

/* ============================================================
   THE HERO MESSAGE
   "For a Waterloo you can afford" is the headline now, with WATERLOO
   picked out in gold exactly as it is on the printed piece, and the
   four priorities read as a plain row of ticks underneath.
   ============================================================ */
.elementor-section.hero .st-h1 .elementor-heading-title{
  font-size:clamp(2rem,4.4vw,3.3rem);line-height:.97;
}
.elementor-section.hero .st-h1 .elementor-heading-title em,
.elementor-section.hero .st-h1 .elementor-heading-title .em,
.promise .em{display:inline;color:var(--gold-ink)}

.tickrow li{align-items:center}
.tickrow li br{display:none}
@media (min-width:768px){
  .tickrow{gap:10px 0}
  .tickrow li{padding:2px 16px 2px 0;font-size:.9rem}
  .tickrow li+li{padding-left:16px}
}
@media (max-width:900px) and (min-width:768px){
  .tickrow li{padding-right:12px}
  .tickrow li+li{padding-left:12px;border-left-width:2px}
}

/* --- the fixed bar has to clear the WordPress admin bar --- */
body.admin-bar header.site{top:32px}
@media (max-width:782px){body.admin-bar header.site{top:46px}}

/* --- the bands read as one sweep behind him, not two floating tiles --- */
.hero-photo-col::before,.hero-photo::before{
  left:-30%;width:160%;height:20%;top:54%;transform:rotate(-6deg);
}
.hero-photo-col::after,.hero-photo::after{
  left:-30%;width:160%;height:5.5%;top:46.5%;transform:rotate(-6deg);
}

/* --- four priorities as a tidy 2 x 2 block; the dividers left a stray
       rule at the start of the second line once they wrapped --- */
.tickrow{
  display:grid;grid-template-columns:repeat(2,max-content);
  gap:12px 30px;justify-content:start;margin-top:18px;
}
.tickrow li,.tickrow li+li{padding:0;border-left:0;font-size:.92rem}
@media (max-width:900px) and (min-width:768px){
  .tickrow{gap:10px 20px}
  .tickrow li,.tickrow li+li{font-size:.84rem}
}
@media (max-width:767px){
  .tickrow{grid-template-columns:1fr;gap:11px}
}

/* --- the bands must start inside the photo column and sweep off to the
       right; running them left was carrying them over the copy --- */
.hero-photo-col::before,.hero-photo::before{left:4%;width:150%;top:55%;height:19%}
.hero-photo-col::after,.hero-photo::after{left:4%;width:150%;top:47.5%;height:5%}
@media (max-width:1024px){
  .hero-photo-col::before,.hero-photo::before{left:0;width:130%}
  .hero-photo-col::after,.hero-photo::after{left:0;width:130%}
}
@media (max-width:767px){
  .hero-photo-col::before,.hero-photo::before{left:-14%;width:128%;top:58%;height:17%}
  .hero-photo-col::after,.hero-photo::after{left:-14%;width:128%;top:51%;height:4.5%}
}

/* ============================================================
   HERO SYMMETRY
   The copy and the photograph now start on the same line — the top of
   the picture meets ELECT — and the hero stops as soon as they do,
   which pulls the countdown strip back up where it belongs. The lead
   paragraph has moved down to open the priorities block.
   ============================================================ */
.elementor-section.hero > .elementor-container{
  align-items:flex-start !important;padding-block:104px 0 !important;
}
.elementor-section.hero .hero-copy-col > .elementor-widget-wrap{
  align-content:flex-start;padding-bottom:64px !important;
}
.hero-photo-col > .elementor-widget-wrap{align-content:flex-start;padding-top:0 !important}
.hero-photo-col img{max-width:500px;margin-inline:auto}

/* one banded sweep instead of two shapes drifting apart: a single
   element, navy over gold, so the two tones can never separate */
.hero-photo-col::before,.hero-photo::before{
  content:"" !important;display:block !important;
  position:absolute;z-index:0;pointer-events:none;
  left:2%;width:152%;top:50%;height:27%;
  transform:rotate(-5deg);transform-origin:center;
  background:linear-gradient(to bottom,var(--navy-band) 0 17%,var(--gold) 17% 100%);
  border-radius:3px;box-shadow:none;
}
.hero-photo-col::after,.hero-photo::after{content:none !important;display:none !important}

@media (max-width:1024px){
  .elementor-section.hero > .elementor-container{padding-block:92px 0 !important}
  .hero-photo-col::before,.hero-photo::before{left:0;width:132%}
}
@media (max-width:767px){
  .elementor-section.hero > .elementor-container{padding-block:88px 0 !important}
  .elementor-section.hero .hero-copy-col > .elementor-widget-wrap{padding-bottom:44px !important}
  .hero-photo-col::before,.hero-photo::before{left:-14%;width:128%;top:55%;height:22%}
}

/* ============================================================
   THE HERO ARCH
   The band drifted and the asterisk read as a retailer mark. This is
   the shape a campaign portrait actually wants: a gold arch he stands
   inside, rooted to the floor of the hero with a fine white line
   following its curve. Nothing floats.
   ============================================================ */
.hero-photo-col::before,.hero-photo::before{
  content:"" !important;display:block !important;
  position:absolute;z-index:0;pointer-events:none;
  top:auto;bottom:0;left:50%;right:auto;
  transform:translateX(-50%);
  width:min(106%,520px);height:84%;
  background:var(--gold);
  border-radius:999px 999px 0 0;
  box-shadow:none;
}
.hero-photo-col::after,.hero-photo::after{
  content:"" !important;display:block !important;
  position:absolute;z-index:0;pointer-events:none;
  top:auto;bottom:0;left:50%;right:auto;
  transform:translateX(-50%);
  width:min(92%,452px);height:79%;
  background:none;
  border:2px solid rgba(255,255,255,.55);border-bottom:0;
  border-radius:999px 999px 0 0;
}
@media (max-width:1024px){
  .hero-photo-col::before,.hero-photo::before{width:min(104%,420px);height:82%}
  .hero-photo-col::after,.hero-photo::after{width:min(90%,364px);height:77%}
}
@media (max-width:767px){
  .hero-photo-col::before,.hero-photo::before{width:min(86%,320px);height:82%}
  .hero-photo-col::after,.hero-photo::after{width:min(74%,276px);height:77%}
}


/* ============================================================
   THE BAR AND THE HERO ON A SMALL SCREEN
   Three things were wrong. The bar was transparent, so on a phone all
   you saw was a hamburger floating on the picture with nothing under
   it. Opening it on an inner page drew white links onto its own white
   panel — invisible. And the hero began a long way down, leaving an
   empty band above the photograph.
   ============================================================ */
@media (max-width:1024px){
  header.site,header.site:not(.scrolled){
    background:var(--surface);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(10,31,69,.04);
  }
  header.site .bar{justify-content:flex-end;padding:8px 20px;min-height:58px;gap:0}

  #burger{
    display:grid;place-items:center;margin-left:auto;
    width:44px;height:44px;padding:0;font-size:1.15rem;line-height:1;
    background:var(--navy-band);border:1px solid var(--navy-band);color:#fff;
    border-radius:14px;
  }
  body:not(.home) header.site:not(.scrolled) #burger{
    background:var(--navy-band);border-color:var(--navy-band);color:#fff;
  }

  /* the dropdown is a white panel, so its links are page ink whatever
     the bar above happens to be doing */
  nav.main{
    padding:10px;max-height:calc(100vh - 76px);overflow-y:auto;
    border-bottom:3px solid var(--red);
  }
  nav.main a,
  body:not(.home) header.site:not(.scrolled) nav.main a{
    color:var(--ink-2);background:transparent;
  }
  nav.main a:hover,nav.main a.active,
  body:not(.home) header.site:not(.scrolled) nav.main a:hover,
  body:not(.home) header.site:not(.scrolled) nav.main a.active{
    color:var(--red);background:var(--red-soft);
  }
  nav.main a.btn-red,
  body:not(.home) header.site:not(.scrolled) nav.main a.btn-red{
    color:#fff;background:var(--red);
  }

  /* content begins directly under the bar */
  .elementor-section.hero > .elementor-container{padding-block:72px 0 !important}
  .elementor-section.phead,section.phead{padding-top:92px}
}

@media (max-width:767px){
  .elementor-section.hero > .elementor-container{padding-block:66px 0 !important}
  .elementor-section.phead,section.phead{padding-top:82px;padding-bottom:40px}
  .hero-photo-col img,.hero-photo img{max-width:min(78vw,306px) !important}
  .hero-photo-col::before,.hero-photo::before{width:min(94%,346px);height:83%}
  .hero-photo-col::after,.hero-photo::after{width:min(81%,298px);height:78%}
  .elementor-section.hero .hero-copy-col > .elementor-widget-wrap{padding-top:20px}
  .elementor-section.hero .st-h1 .elementor-heading-title,.promise{margin-top:12px}
}

/* ---- the in-between widths get a pass of their own ---- */
@media (min-width:768px) and (max-width:1024px){
  .elementor-section.hero > .elementor-container{flex-direction:row}
  .elementor-section.hero > .elementor-container > .hero-copy-col{width:58%;flex:0 0 58%;max-width:58%}
  .elementor-section.hero > .elementor-container > .hero-photo-col{width:42%;flex:0 0 42%;max-width:42%}
  .hero-photo-col{order:0}
  .hname{font-size:clamp(2.2rem,6.4vw,3.2rem)}
  .elementor-section.hero .st-h1 .elementor-heading-title{font-size:clamp(1.6rem,4vw,2.2rem)}
  .tickrow{grid-template-columns:repeat(2,max-content);gap:9px 18px}
  .tickrow li,.tickrow li+li{font-size:.78rem}
  .office{font-size:1rem}
  .ward{font-size:1rem}
}
@media (max-width:400px){
  .hname{font-size:clamp(2rem,12vw,2.6rem)}
  .office{font-size:.86rem;padding:5px 10px}
  .ward{font-size:.86rem}
  .elementor-section.hero .st-h1 .elementor-heading-title,.promise{font-size:1.5rem}
  .tickrow li,.tickrow li+li{font-size:.86rem}
  .hero-photo-col img,.hero-photo img{max-width:min(80vw,270px) !important}
}

/* the arch was wider than the phone, so both its shoulders were cut off
   by the screen edge and it read as a block rather than an arch */
@media (max-width:767px){
  .hero-photo-col::before,.hero-photo::before{width:min(86%,300px);height:84%}
  .hero-photo-col::after,.hero-photo::after{width:min(73%,256px);height:79%}
}
@media (max-width:400px){
  .hero-photo-col::before,.hero-photo::before{width:min(88%,268px)}
  .hero-photo-col::after,.hero-photo::after{width:min(75%,228px)}
}

/* ============================================================
   THE PHONE BAR IS INVISIBLE UNTIL YOU SCROLL
   No white strip across the top: the burger simply sits on the hero and
   reads as a button there. It only earns a bar once the page moves, or
   while the menu is open and the panel needs something to hang from.
   Over the navy page headers the button flips to white so it never
   disappears into the ground behind it.
   ============================================================ */
@media (max-width:1024px){
  header.site,header.site:not(.scrolled){
    background:transparent;border-bottom-color:transparent;box-shadow:none;
  }
  header.site.scrolled{
    background:var(--surface);border-bottom-color:var(--line);
    box-shadow:0 1px 0 rgba(10,31,69,.05);
  }
  header.site:has(nav.main.open){
    background:var(--surface);border-bottom-color:var(--line);
  }

  #burger{box-shadow:0 2px 10px rgba(5,21,47,.18)}
  body:not(.home) header.site:not(.scrolled) #burger{
    background:#fff;border-color:#fff;color:var(--navy-band);
  }
  body:not(.home) header.site:not(.scrolled):has(nav.main.open) #burger,
  body:not(.home) header.site.scrolled #burger{
    background:var(--navy-band);border-color:var(--navy-band);color:#fff;
  }

  /* nothing is holding a bar open, so the page can start higher */
  .elementor-section.hero > .elementor-container{padding-block:58px 0 !important}
  .elementor-section.phead,section.phead{padding-top:82px}
}
@media (max-width:767px){
  .elementor-section.hero > .elementor-container{padding-block:54px 0 !important}
  .elementor-section.phead,section.phead{padding-top:76px}
}

/* ============================================================
   KICKERS, BADGES AND THE REPEATED ATTRIBUTION
   Three notes from the client, in one place.
   ============================================================ */

/* 1. the section kicker was a whisper. It is the line that tells you what
      the block is about, so it gets weight and size. */
.st-eyebrow .elementor-heading-title,.eyebrow{
  font-size:.98rem;font-weight:900;letter-spacing:.13em;
  font-variation-settings:'wdth' 88;line-height:1.2;
}
/* inside a card it stays a label, not a headline */
.st-cta .st-eyebrow .elementor-heading-title,
.st-form .st-eyebrow .elementor-heading-title,
.st-stepcol .st-eyebrow .elementor-heading-title,
.ctacard .eyebrow{font-size:.76rem;letter-spacing:.16em}
@media (max-width:767px){
  .st-eyebrow .elementor-heading-title,.eyebrow{font-size:.86rem;letter-spacing:.11em}
}

/* 2. the slogan bands carried a pill that read as a button you could press.
      The words stay; the button shape goes. */
.st-badge p,.band .badge,section.navy-sec .badge{
  background:none;border:0;padding:0;border-radius:0;
  color:var(--gold);font-size:.88rem;letter-spacing:.2em;
}

/* 3. the candidate name and office are already in the hero, the menu and
      the footer. Repeating them under every slogan band was noise. */
.st-attrib,.band .attrib,.st-attrib.elementor-widget-text-editor{display:none}

/* the priorities intro is two paragraphs now, and they were running into
   each other without a gap */
.st-lead p + p{margin-top:.95em}



/* ============================================================
   COUNTDOWN CORNERS, OUTLINE BUTTONS, THE FINE PRINT   (5.7.0)
   Three small things the client caught, and one broken link.
   ============================================================ */

/* The countdown tiles were rounded like cards. At 8px they read as
   a clock face instead. */
.cd .unit,
.elementor-section.votestrip .cd .unit{border-radius:8px}

/* An outline button was drawing its edge in the divider colour, which
   on cream is all but invisible — READ THE FULL PLAN looked like a
   label that had lost its button. Give it a real 2px edge in the
   action green and let the hover fill it in. */
.st-btn-outline .elementor-button,
.st-btn-outline.elementor-widget-button .elementor-button,
.btn-outline{
  background-color:transparent;
  color:var(--green-act-deep);
  border:2px solid var(--green-act);
  box-shadow:none;
}
.st-btn-outline .elementor-button:hover,
.st-btn-outline.elementor-widget-button .elementor-button:hover,
.btn-outline:hover{
  background-color:var(--green-act);
  border-color:var(--green-act);
  color:#fff;
}

/* On a painted ground the same button is white, and fills white on
   hover with the section colour coming back as the label. */
:where(.elementor-section.alt,section.green-sec,.elementor-section.navy-sec,section.navy-sec)
  .st-btn-outline.elementor-widget-button .elementor-button,
:where(.elementor-section.alt,section.green-sec,.elementor-section.navy-sec,section.navy-sec)
  .st-btn-outline .elementor-button,
:where(.elementor-section.alt,section.green-sec,.elementor-section.navy-sec,section.navy-sec)
  .btn-outline{
  background-color:transparent;color:#fff;border:2px solid #fff;
}
:where(.elementor-section.alt,section.green-sec,.elementor-section.navy-sec,section.navy-sec)
  .st-btn-outline.elementor-widget-button .elementor-button:hover,
:where(.elementor-section.alt,section.green-sec,.elementor-section.navy-sec,section.navy-sec)
  .st-btn-outline .elementor-button:hover,
:where(.elementor-section.alt,section.green-sec,.elementor-section.navy-sec,section.navy-sec)
  .btn-outline:hover{
  background-color:#fff;color:var(--green-deep);border-color:#fff;
}

/* and on gold, the same idea in navy */
:where(.elementor-section.news,section.gold-sec)
  .st-btn-outline.elementor-widget-button .elementor-button,
:where(.elementor-section.news,section.gold-sec) .btn-outline{
  color:var(--on-gold);border:2px solid var(--on-gold);background-color:transparent;
}
:where(.elementor-section.news,section.gold-sec)
  .st-btn-outline.elementor-widget-button .elementor-button:hover,
:where(.elementor-section.news,section.gold-sec) .btn-outline:hover{
  background-color:var(--on-gold);color:var(--gold);border-color:var(--on-gold);
}

/* The last line of the footer said the candidate's name and his seat
   for the third time in one column. The authorization line has to
   stay — Ontario requires it on campaign advertising — so it becomes
   what it actually is: fine print, centred and quiet. The copyright
   beside it was carrying no information at all and is gone. */
.legal{
  justify-content:center;text-align:center;
  margin-top:38px;padding:18px 0 26px;
  font-size:.72rem;line-height:1.6;letter-spacing:.01em;
  color:rgba(162,179,216,.6);
}



/* ============================================================
   THE PHONE BAR HAS NO BAR                              (5.8.0)
   The sticky header was painting a white slab across the top of the
   screen the moment you scrolled. On a page built out of cream, white
   and green bands that slab reads as a mistake. So on a phone the
   header now has no ground of its own at any scroll position: what
   travels down the page is one button.

   For that to work the button has to survive every band it passes
   over — cream, white, green, navy, gold. A navy pill in a white ring
   does: the fill carries it on the light bands, the ring carries it on
   the dark ones. That also retires the old "flip it white on inner
   pages" special case.
   ============================================================ */
@media (max-width:1024px){
  header.site,
  header.site.scrolled,
  header.site:has(nav.main.open){
    background:transparent;
    border-bottom-color:transparent;
    box-shadow:none;
  }
  header.site .bar{padding:10px 16px;min-height:0}

  #burger,
  body:not(.home) header.site:not(.scrolled) #burger,
  body:not(.home) header.site.scrolled #burger,
  body:not(.home) header.site:not(.scrolled):has(nav.main.open) #burger{
    width:46px;height:46px;border-radius:15px;
    background:var(--navy-band);color:#fff;
    border:2px solid rgba(255,255,255,.92);
    box-shadow:0 4px 16px rgba(5,21,47,.3);
  }

  /* with nothing behind the menu, the panel has to be a card in its own
     right — inset from both edges, rounded on all four corners, and
     lifted off the page rather than glued to a bar that is not there */
  nav.main{
    top:calc(100% + 8px);left:14px;right:14px;
    padding:12px;gap:2px;
    background:var(--surface);
    border:1px solid var(--line);
    border-bottom:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 22px 50px rgba(5,21,47,.26);
    max-height:calc(100vh - 96px);overflow-y:auto;
  }
  /* a gold rule across the top ties the panel to the rest of the site */
  nav.main::before{
    content:"";display:block;height:4px;width:52px;border-radius:2px;
    background:var(--gold);margin:2px auto 10px;
  }

  /* the links read as a menu, not as body copy: campaign face, caps,
     and enough room to hit with a thumb */
  nav.main a,
  body:not(.home) header.site:not(.scrolled) nav.main a{
    font-family:var(--font-display);font-variation-settings:"wdth" 92;
    font-weight:800;text-transform:uppercase;letter-spacing:.07em;
    font-size:.9rem;padding:15px 16px;border-radius:12px;
    color:var(--ink);background:transparent;
  }
  nav.main a.active,
  body:not(.home) header.site:not(.scrolled) nav.main a.active{
    color:var(--green-act-deep);background:var(--green-act-soft);
  }
  nav.main a.btn-red,
  body:not(.home) header.site:not(.scrolled) nav.main a.btn-red{
    margin-top:8px;justify-content:center;text-align:center;
    color:#fff;background:var(--green-act);border-radius:var(--r-pill);
  }

  /* the page behind an open menu steps back so the card is legible over
     a photograph */
  header.site:has(nav.main.open)::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:rgba(5,21,47,.42);
  }
}

/* ============================================================
   THE KICKER CARRIES ITS SECTION
   It is the line that tells you what a block is about, so it gets the
   size to be read from across the room and a short gold rule to start
   it. Inside a card it stays a small label — a card is not a section.
   ============================================================ */
.st-eyebrow .elementor-heading-title,.eyebrow{
  font-size:1.06rem;font-weight:900;letter-spacing:.14em;
  font-variation-settings:'wdth' 86;line-height:1.15;
  display:inline-flex;align-items:center;gap:.62em;
}
.st-eyebrow .elementor-heading-title::before,.eyebrow::before{
  content:"";flex:0 0 24px;width:24px;height:4px;border-radius:2px;
  background:var(--gold);
}
.st-cta .st-eyebrow .elementor-heading-title,
.st-form .st-eyebrow .elementor-heading-title,
.st-stepcol .st-eyebrow .elementor-heading-title,
.ctacard .eyebrow{font-size:.78rem;letter-spacing:.16em}
.st-cta .st-eyebrow .elementor-heading-title::before,
.st-form .st-eyebrow .elementor-heading-title::before,
.st-stepcol .st-eyebrow .elementor-heading-title::before,
.ctacard .eyebrow::before{display:none}
@media (max-width:767px){
  .st-eyebrow .elementor-heading-title,.eyebrow{font-size:.95rem;letter-spacing:.12em}
  .st-eyebrow .elementor-heading-title::before,.eyebrow::before{flex-basis:18px;width:18px}
}

/* ============================================================
   TYPESETTING
   Archivo and Public Sans stay — the pairing is right for a campaign.
   What was missing was the fine tuning underneath them.
   ============================================================ */

/* headings break evenly instead of dropping one word onto a line of its
   own, which is what made DOOR-KNOCKING SATURDAY look broken */
h1,h2,h3,
.st-h1 .elementor-heading-title,.st-h2 .elementor-heading-title,
.st-h3 .elementor-heading-title,
.hname,.promise,.band .slogan{text-wrap:balance}
p,li,.elementor-icon-box-description,.elementor-icon-list-text{text-wrap:pretty}

/* Archivo is drawn for display use; at headline sizes it wants its
   tracking pulled in, or the words read as separate objects */
.st-h1 .elementor-heading-title,.hname,.band .slogan{letter-spacing:-.018em}
.st-h2 .elementor-heading-title{letter-spacing:-.012em}
.st-h3 .elementor-heading-title{letter-spacing:-.006em}

/* body copy: a little more room between the lines, and the ink is
   rendered rather than smeared */
body{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
}
.st-text p,.st-text.elementor-widget-text-editor p{line-height:1.72}
.st-lead p,.st-lead.elementor-widget-text-editor p{line-height:1.62}

/* figures line up wherever they are counted or compared */
.st-event-date p,.cd .n,.ballot .d,.st-stat .num{font-variant-numeric:tabular-nums}

/* A kicker that heads one column inside a section is a label, not the
   section's own name — Contact, Follow the campaign, Interac e-Transfer
   to. The gold rule and the full size belong to the section heading, so
   these keep the old small treatment. Tagged st-eyebrow-sm in Elementor. */
.st-eyebrow-sm .elementor-heading-title,
.st-etransfer .st-eyebrow .elementor-heading-title{
  font-size:.78rem;letter-spacing:.16em;
}
.st-eyebrow-sm .elementor-heading-title::before,
.st-etransfer .st-eyebrow .elementor-heading-title::before{display:none}

/* ============================================================
   NOTES TO THE EDITOR ARE NOT NOTES TO A VOTER      (5.8.2)
   Three build notes were being served to the public: "Sample events
   … no developer needed" on the home page, "Every bullet on this page
   is draft policy language" on the plan, and the reserved-for-quotes
   placeholder on the biography. They are addressed to whoever edits
   the site, so they now show only to a logged-in editor. Nothing is
   deleted — log in and they are all still there.

   st-draft does the same for a whole section: the testimonials block
   has no content yet, and an empty heading is worse than no heading.
   Take the class off in Elementor the day real quotes go in.
   ============================================================ */
body:not(.logged-in) .st-note,
body:not(.logged-in) .st-draft{display:none !important}



/* ============================================================
   THE BIOGRAPHY OPENS WITH PICTURES               (5.9.0)
   The page used to begin with a navy strip carrying the name, then a
   separate section that started the story next to one photograph.
   Those are now one block: three pictures on the left, the name, the
   line under it and the whole story on the right — open the page and
   you get a face and a few sentences, with the rest below.
   ============================================================ */
.elementor-section.meet-top > .elementor-container{padding-block:126px 64px !important}
@media (max-width:1024px){
  .elementor-section.meet-top > .elementor-container{padding-block:86px 44px !important}
}
@media (max-width:767px){
  .elementor-section.meet-top > .elementor-container{padding-block:72px 36px !important}
}

/* the collage: one tall frame carrying two wide ones, with a gold
   block set behind the corner so it sits on the page rather than
   floating on it */
.st-collage{
  position:relative;display:grid;gap:14px;
  grid-template-columns:1.22fr 1fr;grid-template-rows:auto auto;
}
.st-collage::before{
  content:"";position:absolute;z-index:0;
  left:-20px;bottom:-20px;width:132px;height:132px;
  border-radius:var(--r-lg);background:var(--gold);
}
.st-collage figure{
  position:relative;z-index:1;margin:0;overflow:hidden;
  border-radius:var(--r-lg);background:var(--cream-2);
  box-shadow:0 16px 38px rgba(10,31,69,.16);
}
.st-collage figure img{display:block;width:100%;height:100%;object-fit:cover}
.st-collage .a{grid-row:1 / 3}
.st-collage .b,.st-collage .c{aspect-ratio:16/10}

/* the story runs long and the pictures do not, so on a wide screen the
   collage travels with the reader instead of leaving a hole */
@media (min-width:1025px){
  .st-collage-w{position:sticky;top:96px}
}
@media (max-width:767px){
  .st-collage{grid-template-columns:1fr 1fr;gap:10px}
  .st-collage .a{grid-row:auto;grid-column:1 / 3;aspect-ratio:5/4}
  .st-collage .b,.st-collage .c{aspect-ratio:4/3}
  .st-collage::before{left:-12px;bottom:-12px;width:86px;height:86px}
}

/* ============================================================
   A MENU ITEM IS THE WHOLE BOX, NOT THE LETTERS
   The links were inline, so their vertical padding did nothing: the
   hit area and the highlight were both the height of the text and you
   had to aim at the word itself. They are flex boxes now — full
   height, a soft green ground on hover, and a gold rule that draws
   itself in from the left rather than snapping on.
   ============================================================ */
@media (min-width:1025px){
  nav.main ul{gap:4px}
  nav.main li{display:flex;align-items:stretch}
  nav.main a{
    display:flex;align-items:center;position:relative;
    min-height:42px;padding:0 16px;border-radius:12px;
    transition:color .18s ease, background-color .18s ease;
  }
  nav.main a::after{
    content:"";position:absolute;left:16px;right:16px;bottom:7px;height:2px;
    background:var(--gold);border-radius:2px;
    transform:scaleX(0);transform-origin:left center;
    transition:transform .24s cubic-bezier(.2,.7,.3,1);
  }
  nav.main a:hover::after,
  nav.main a:focus-visible::after,
  nav.main a.active::after{transform:scaleX(1)}
  nav.main a:hover{color:var(--ink);background:var(--green-act-soft)}
  nav.main a.active{color:var(--green-act-deep);background:var(--green-act-soft)}

  /* the volunteer button is a button, not a menu item */
  nav.main a.btn{min-height:42px;padding:0 22px;border-radius:var(--r-pill)}
  nav.main a.btn::after{display:none}

  /* over a navy page header the same states have to read light */
  body:not(.home) header.site:not(.scrolled) nav.main a:hover,
  body:not(.home) header.site:not(.scrolled) nav.main a.active{
    color:#fff;background:rgba(255,255,255,.14);
  }
}

/* ------------------------------------------------------------
   The biography no longer opens with a navy strip, so the light link
   treatment cannot be keyed off "not the home page" any more — white
   links were landing on cream and vanishing. Key it off whether a
   navy page header is actually on the page.                 (5.9.1)
   ------------------------------------------------------------ */
body:not(.home) header.site:not(.scrolled) nav.main a{color:var(--ink-2)}
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a{color:rgba(255,255,255,.88)}
@media (min-width:1025px){
  body:not(.home) header.site:not(.scrolled) nav.main a:hover{color:var(--ink);background:var(--green-act-soft)}
  body:not(.home) header.site:not(.scrolled) nav.main a.active{color:var(--green-act-deep);background:var(--green-act-soft)}
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a:hover,
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a.active{
    color:#fff;background:rgba(255,255,255,.14);
  }
}
body:not(.home) header.site:not(.scrolled) nav.main a.btn-red,
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a.btn-red{color:#fff}

/* ------------------------------------------------------------
   The merged block was carrying two top paddings — the section's own
   and the one added to clear the floating bar — which opened a hole
   above the pictures. The section gives up its padding and the
   container sets the whole distance.                        (5.9.2)
   ------------------------------------------------------------ */
.elementor-section.meet-top{padding-top:0 !important;padding-bottom:0 !important}
.elementor-section.meet-top > .elementor-container{padding-block:128px 64px !important}
@media (max-width:1024px){
  .elementor-section.meet-top > .elementor-container{padding-block:96px 44px !important}
}
@media (max-width:767px){
  .elementor-section.meet-top > .elementor-container{padding-block:80px 34px !important}
}
.elementor-section.meet-top .st-h2{margin-top:10px}

/* ------------------------------------------------------------
   When the two columns stack, the collage was taking a whole tablet
   screen before a word of the story appeared. Give it a ceiling in
   that range only; on a phone full width is right.          (5.9.3)
   ------------------------------------------------------------ */
@media (min-width:768px) and (max-width:1024px){
  .st-collage-w{max-width:540px;margin-inline:auto}
}



/* ============================================================
   HI SYED, AND ONE CALL TO ACTION                     (5.10.0)
   Two notes from the client. Set in the site's caps, "Hi" reads as
   shouting rather than as a greeting — the whole point of the name.
   So that one item and that one button drop out of uppercase and are
   set as written. They are the friendly words on the site; letting
   them look friendly is the idea.

   And the bar was making the same offer twice: a Volunteer button
   beside a Get Involved link that goes to the same page. The button
   is gone and Get Involved carries the call to action itself.
   ============================================================ */
nav.main a[href*="/meet-syed-tirmizi"],
.st-btn-natural .elementor-button,
.st-btn-natural.elementor-widget-button .elementor-button{
  text-transform:none;letter-spacing:.01em;
}

/* Get Involved is the button now, at both sizes */
nav.main a[href*="/get-involved"],
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"]{
  background:var(--green-act);color:#fff;border-radius:var(--r-pill);
}
nav.main a[href*="/get-involved"]:hover,
nav.main a[href*="/get-involved"].active,
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active{
  background:var(--green-act-deep);color:#fff;
}
nav.main a[href*="/get-involved"]::after{display:none}

@media (min-width:1025px){
  nav.main a[href*="/get-involved"]{min-height:42px;padding:0 22px;margin-left:10px}
}
@media (max-width:1024px){
  /* in the dropdown it is the full-width button the panel used to end with */
  nav.main a[href*="/get-involved"]{
    margin-top:8px;justify-content:center;text-align:center;
  }
}

/* ------------------------------------------------------------
   The dropdown links were still inline, exactly as the desktop ones
   had been: vertical padding did nothing, the rows sat 23px apart and
   the Get Involved pill bled outside the panel because an inline
   background does not respect its own box. Same fix as the bar — make
   them boxes.                                              (5.10.1)
   ------------------------------------------------------------ */
@media (max-width:1024px){
  nav.main li{display:block}
  nav.main a{
    display:flex;align-items:center;
    min-height:48px;padding:12px 16px;border-radius:12px;
  }
  nav.main a[href*="/get-involved"]{
    justify-content:center;min-height:48px;margin-top:10px;
  }
}

/* ------------------------------------------------------------
   The "white links over a navy page header" rule was written without
   a width, so it also reached the phone dropdown — which is a white
   panel. On The Plan and Get Involved the first two items were white
   on white. The dropdown's links are page ink whatever the bar above
   is doing; restate it last so it wins.                     (5.10.2)
   ------------------------------------------------------------ */
@media (max-width:1024px){
  nav.main a,
  body:not(.home) header.site:not(.scrolled) nav.main a,
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a{
    color:var(--ink);background:transparent;
  }
  nav.main a:hover,
  nav.main a.active,
  body:not(.home) header.site:not(.scrolled) nav.main a.active,
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a:hover,
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a.active{
    color:var(--green-act-deep);background:var(--green-act-soft);
  }
  nav.main a[href*="/get-involved"],
  nav.main a[href*="/get-involved"]:hover,
  nav.main a[href*="/get-involved"].active,
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"]{
    color:#fff;background:var(--green-act);
  }
}

/* ------------------------------------------------------------
   In the dropdown on an inner page, Hi Syed was still coming out as
   HI SYED: the mobile block sets uppercase through a long selector
   (body:not(.home) header.site:not(.scrolled) nav.main a) that
   outweighs a plain attribute match. Match its weight.      (5.10.3)
   ------------------------------------------------------------ */
@media (max-width:1024px){
  nav.main a[href*="/meet-syed-tirmizi"],
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/meet-syed-tirmizi"],
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/meet-syed-tirmizi"]{
    text-transform:none;letter-spacing:.01em;
  }
}



/* ============================================================
   SYED ABOVE TIRMIZI                                   (6.0.0)
   The brand sheet sets the given name as a script above the family
   name in solid caps, and the client is explicit that the family name
   is the mark: Allura is used sparingly, and almost always sitting
   next to TIRMIZI rather than on its own.

   Three places carry it, all paired: the hero, the wordmark in the
   footer, and the heading on the biography page. Nowhere does the
   script word appear alone.
   ============================================================ */
.hname{
  font-family:var(--font-script);
  font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--gold);line-height:.92;
  font-size:clamp(2.5rem,6.4vw,4.9rem);
}
.hname b{
  display:block;
  font-family:var(--font-display);
  font-weight:900;text-transform:uppercase;
  color:var(--navy-band);
  font-size:clamp(2.7rem,7.4vw,5.6rem);
  letter-spacing:-.028em;line-height:.9;
  margin-top:-.14em;
}

/* the same pairing in the footer wordmark and on the biography page */
.brand .bn .script,
.st-h1 .elementor-heading-title .script{
  font-family:var(--font-script);
  font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--gold);
}
.brand .bn .script{display:block;font-size:1.5em;line-height:.9;margin-bottom:-.12em}
.brand .bn b{display:block;font-weight:900;letter-spacing:.005em}
.st-h1 .elementor-heading-title .script{font-size:1.25em;padding-right:.06em}

/* ============================================================
   MONTSERRAT SETS WIDER
   Archivo was being pulled in on its width axis, sometimes as far as
   72. Montserrat has no width axis, so the same words come out wider;
   the biggest sizes come down a notch and the tracking tightens to
   keep the silhouette the design was drawn around.
   ============================================================ */
.band .slogan,
.st-slogan .elementor-heading-title{font-size:clamp(1.85rem,4.3vw,3.1rem);letter-spacing:-.015em}
.slogan-bar .sb{font-size:clamp(1.2rem,3.1vw,2.2rem);letter-spacing:-.012em}
.office{font-size:clamp(.85rem,1.75vw,1.25rem);letter-spacing:0}
.cd .n{font-size:1.6rem;letter-spacing:-.01em}
.votestrip .cdtxt{font-size:1.02rem}

/* Inter carries a larger x-height than Public Sans, so the same size
   reads bigger; the body comes back a hair and keeps its leading. */
body{font-size:1rem}
.st-lead p,.st-lead.elementor-widget-text-editor p{font-size:1.06rem}

/* ------------------------------------------------------------
   Two things Montserrat and Allura changed underfoot.       (6.0.1)
   Allura's "d" carries a long tail, so the script and the family name
   were touching on the biography heading. And the section kicker set
   in Montserrat is wider than it was in Archivo, so on a phone "My
   priorities for Ward 4" was breaking onto a second line.
   ------------------------------------------------------------ */
.st-h1 .elementor-heading-title .script{padding-right:.34em}
@media (max-width:767px){
  .st-eyebrow .elementor-heading-title,.eyebrow{font-size:.86rem;letter-spacing:.09em}
}



/* ============================================================
   WHERE THE WEIGHT GOES                                (6.1.0)
   Archivo carried 900 gracefully at every size because it could also
   be narrowed. Montserrat cannot: at 900 a small line of caps closes
   up into a dark bar. So the weight is now decided by size rather
   than applied everywhere.

     900  display type, 28px and up — the name, the headlines
     800  16–28px caps — kickers, the ward rule, the office chip,
          card titles, countdown figures
     700  under 16px caps — buttons, navigation, the action bar
     500  Inter where it has to hold its own beside heavy display type
     400  Inter reading text
   ============================================================ */
.elect,.ward,.office,
.st-card .elementor-icon-box-title,
.st-eyebrow .elementor-heading-title,.eyebrow,
.st-h3 .elementor-heading-title,
.cd .n{font-weight:800}

.elementor-button,.btn,.btn-red,.btn-dark,.btn-light,.btn-outline,.btn-ghost,.btn-sm,
nav.main a,#mbar a,.st-event-date p,.legal span{font-weight:700}

.cd .u,.st-badge p,.band .badge{font-weight:700}

/* Inter reads a little small next to Montserrat, and reading text was
   sitting at 14.4px. It comes up, and the two lines that carry weight
   — the lead and the tick list — go to 500. */
.st-text p,.st-text.elementor-widget-text-editor p{font-size:.97rem;font-weight:400}
.st-lead p,.st-lead.elementor-widget-text-editor p{font-weight:500}
.st-ticks .elementor-icon-list-text,
.st-bullets .elementor-icon-list-text{font-weight:500}
.st-prose p{font-size:.99rem;font-weight:400}

/* ============================================================
   THE ACTION BAR TAKES LESS OF THE SCREEN
   It was 9px of padding around 13px buttons at weight 900 — a slab
   across the bottom of a phone. Same bar, two thirds the height.
   ============================================================ */
#mbar{padding:6px;gap:6px;left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
#mbar a{padding:9px 8px;font-size:.7rem;letter-spacing:.04em;min-height:0}

/* ============================================================
   THE PHONE HERO IS ONE PICTURE WITH THE NAME ON IT
   The client's reference opens on a full-bleed photograph with the
   message written across it. On a phone the picture now runs edge to
   edge, and Syed / TIRMIZI / For Waterloo City Council sit on top of
   it over a scrim, so the message lands before anything is scrolled.
   Ward 4, the promise and the four priorities follow underneath.

   The overlay is its own widget inside the photo column (st-hero-overlay)
   rather than the name block from the copy column, because CSS cannot
   move an element between columns. The copy column's own name, ELECT
   line and office chip are hidden at this width so nothing is said twice.
   ============================================================ */
.st-hero-overlay{display:none}

@media (max-width:767px){
  .elementor-section.hero{overflow:hidden}
  .elementor-section.hero > .elementor-container{padding-block:0 0 !important}

  .elementor-section.hero > .elementor-container > .hero-photo-col{
    width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
  }
  .hero-photo-col > .elementor-widget-wrap{position:relative;padding:0 !important}

  .st-hero-img{margin:0}
  .hero-photo-col img,.hero-photo img{
    width:100% !important;max-width:100% !important;
    height:clamp(400px,62vh,580px);
    object-fit:contain;object-position:50% 100%;
  }

  /* the arch grows with the frame */
  .hero-photo-col::before,.hero-photo::before{width:min(74%,340px);height:74%}
  .hero-photo-col::after,.hero-photo::after{width:min(63%,290px);height:70%}

  .st-hero-overlay{
    display:block;position:absolute;left:0;right:0;bottom:0;z-index:4;
    margin:0;padding:64px 22px 22px;pointer-events:none;
    background:linear-gradient(to top,
      rgba(5,21,47,.94) 0%,rgba(5,21,47,.86) 34%,rgba(5,21,47,.55) 62%,rgba(5,21,47,0) 100%);
  }
  .st-hero-overlay .hname{
    color:var(--gold);font-size:clamp(2.3rem,12.5vw,3.3rem);line-height:.9;
  }
  .st-hero-overlay .hname b{
    color:#fff;font-size:clamp(2.4rem,13.5vw,3.5rem);letter-spacing:-.03em;
  }
  .st-hero-overlay .office{
    margin-top:12px;background:var(--gold);color:var(--on-gold);
    font-size:.84rem;font-weight:800;letter-spacing:.03em;padding:7px 13px;
  }

  /* said once, on the picture */
  .st-kicker .elect,.st-kicker .hname,.st-kicker .office{display:none}
  .st-kicker .ward{margin-top:0}
  .elementor-section.hero .hero-copy-col > .elementor-widget-wrap{padding-top:26px}
}

/* ------------------------------------------------------------
   The picture was still inset by a couple of dozen pixels each side:
   an Elementor column is a flex item, so width:100vw was being shrunk
   straight back to fit. Take it out of the shrink.          (6.1.1)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .elementor-section.hero > .elementor-container > .hero-photo-col{
    flex:0 0 100vw;
  }
  .st-hero-overlay .office{font-size:clamp(.72rem,3.4vw,.86rem);padding:6px 12px}
}

/* ------------------------------------------------------------
   Full bleed, properly this time.                          (6.1.2)
   Two things were in the way: Elementor's per-post stylesheet loads
   after the theme and sets the column's own width, so the rule needed
   !important; and 100vw plus a negative margin is scrollbar-sensitive.
   Simpler and exact: drop the container's side padding, let the photo
   column fill it, and give the copy column the padding back.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .elementor-section.hero > .elementor-container{padding-inline:0 !important}
  .elementor-section.hero > .elementor-container > .hero-photo-col{
    flex:0 0 100% !important;width:100% !important;max-width:100% !important;
    margin:0 !important;
  }
  .elementor-section.hero > .elementor-container > .hero-copy-col > .elementor-widget-wrap{
    padding-inline:20px !important;
  }
}

/* ------------------------------------------------------------
   Four of the weight rules lost.                           (6.1.3)
   Card titles, kickers and buttons are set through longer Elementor
   selectors than the ones written above, and Elementor's own per-post
   stylesheet lands after the theme. Restate them at full weight. And
   the legal line was swept into the 700 group by mistake — fine print
   is 400, whatever else happens.
   ------------------------------------------------------------ */
.st-card.elementor-widget-icon-box .elementor-icon-box-title,
.st-card.elementor-widget-icon-box .elementor-icon-box-title a,
.st-step.elementor-widget-icon-box .elementor-icon-box-title,
.st-step.elementor-widget-icon-box .elementor-icon-box-title a,
.st-eyebrow.elementor-widget-heading .elementor-heading-title,
.st-h3.elementor-widget-heading .elementor-heading-title,
.eyebrow{font-weight:800 !important}

.st-btn.elementor-widget-button .elementor-button,
.elementor-widget-button .elementor-button,
.btn,.btn-sm,#mbar a,nav.main a{font-weight:700 !important}

.st-ticks.elementor-widget-icon-list .elementor-icon-list-text,
.st-bullets.elementor-widget-icon-list .elementor-icon-list-text{font-weight:500 !important}

.legal span{font-weight:400 !important}



/* ============================================================
   THE PHONE HERO IS THE CAMPAIGN PHOTOGRAPH            (6.2.0)
   The client supplied a photograph made for this slot — Syed on a
   Waterloo street, room on the left, room at the bottom. On a phone
   that picture is the hero: full bleed, cropped tall on him, with the
   name, the office and Ward 4 written across the foot of it.

   The cut-out and its gold arch stay on the desktop hero, which the
   client already signed off; they simply step aside at this width.

   The picture is an ordinary Elementor image widget (st-hero-slide),
   so swapping it is Elementor → the widget → Choose Image — no code.
   If this becomes a real slider later, more slides go in the same
   column and the overlay stays where it is.
   ============================================================ */
.st-hero-slide{display:none}

@media (max-width:767px){
  .st-hero-slide{display:block;margin:0}
  .st-hero-slide img{
    display:block;width:100% !important;max-width:100% !important;
    height:clamp(420px,64vh,600px);
    object-fit:cover;object-position:72% 40%;
  }

  /* the cut-out and the arch belong to the desktop composition */
  .st-hero-img{display:none}
  .hero-photo-col::before,.hero-photo-col::after,
  .hero-photo::before,.hero-photo::after{display:none !important}

  /* Ward 4 moved up onto the picture, so it goes quiet below it */
  .st-kicker .ward{display:none}
  .st-kicker{display:none}

  .st-hero-overlay .ward{
    display:flex;margin-top:12px;width:100%;
    color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.06em;
  }
  .st-hero-overlay .ward i{background:var(--gold);opacity:.9}
}



/* ============================================================
   THE BANNER HERO                                      (6.3.0)
   A second version of the home page — /home-v2-photo-hero/ — where
   the campaign photograph is the hero at every width, not only on a
   phone. The live home page is untouched; this is the one to compare
   it against.

   On a desktop the picture becomes the section's ground and the whole
   copy block sits on it, left, where the street is empty. A scrim
   raked from the left carries the text without hiding him. Below
   768px nothing changes: the phone keeps the treatment already signed
   off, the same photograph with the name written across its foot.

   Everything here is scoped to .st-hero-banner, which is a CSS class
   on that page's hero section and nowhere else.
   ============================================================ */
@media (min-width:768px){
  .elementor-section.hero.st-hero-banner{
    position:relative;
    background-image:url(/wp-content/uploads/2026/08/syed-tirmizi-waterloo-street.webp);
    background-size:cover;background-position:68% 42%;background-repeat:no-repeat;
    min-height:min(86vh,760px);
  }
  .elementor-section.hero.st-hero-banner::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(100deg,
      rgba(5,21,47,.95) 0%,rgba(5,21,47,.9) 26%,
      rgba(5,21,47,.58) 48%,rgba(5,21,47,.14) 66%,rgba(5,21,47,0) 80%);
  }
  .elementor-section.hero.st-hero-banner > .elementor-container{
    position:relative;z-index:1;align-items:center;
    min-height:min(86vh,760px);padding-block:104px 92px !important;
  }

  /* the cut-out and its arch belong to the other version */
  .st-hero-banner .hero-photo-col{display:none !important}
  .st-hero-banner .hero-copy-col{
    width:62% !important;flex:0 0 62% !important;max-width:62% !important;
  }

  /* the copy is on a dark ground now */
  .st-hero-banner .elect,.st-hero-banner .hname{color:var(--gold)}
  .st-hero-banner .hname b{color:#fff}
  .st-hero-banner .office{background:var(--gold);color:var(--on-gold)}
  .st-hero-banner .ward{color:#fff}
  .st-hero-banner .ward i{background:var(--gold)}
  .st-hero-banner .st-h1 .elementor-heading-title{color:#fff}
  .st-hero-banner .st-h1 .elementor-heading-title em{color:var(--gold)}
  .st-hero-banner .st-pills,
  .st-hero-banner .st-pills p,
  .st-hero-banner .tickrow li,
  .st-hero-banner .tickrow li + li{color:#fff}
}
@media (min-width:1200px){
  .st-hero-banner .hero-copy-col{width:54% !important;flex:0 0 54% !important;max-width:54% !important}
}

/* the bar floats over a dark photograph here, so its links are light
   until the page scrolls — the same rule the navy page headers get */
body:has(.st-hero-banner) header.site:not(.scrolled) nav.main a{color:rgba(255,255,255,.88)}
@media (min-width:1025px){
  body:has(.st-hero-banner) header.site:not(.scrolled) nav.main a:hover,
  body:has(.st-hero-banner) header.site:not(.scrolled) nav.main a.active{
    color:#fff;background:rgba(255,255,255,.14);
  }
  body:has(.st-hero-banner) header.site:not(.scrolled) nav.main a[href*="/get-involved"]{
    background:var(--green-act);color:#fff;
  }
}

/* ------------------------------------------------------------
   The promise line stayed navy on a navy photograph — the theme's own
   hero rule and Elementor's per-post CSS both set that colour through
   longer selectors. Say it once, loudly.                    (6.3.1)
   ------------------------------------------------------------ */
@media (min-width:768px){
  .st-hero-banner .st-h1.elementor-widget-heading .elementor-heading-title,
  .st-hero-banner .st-h1 .elementor-heading-title,
  .elementor-section.hero.st-hero-banner .st-h1 .elementor-heading-title{
    color:#fff !important;
  }
  .st-hero-banner .st-h1 .elementor-heading-title em,
  .elementor-section.hero.st-hero-banner .st-h1 .elementor-heading-title em{
    color:var(--gold) !important;
  }
}

/* ------------------------------------------------------------
   Three fixes on the banner hero.                          (6.3.2)

   1. HIS HEAD. In the photograph the top of his hair sits about 2% down
      the frame, so any crop taken from the top cuts it. With cover, the
      vertical overflow is (scaled height − section height), and the
      crop is background-position-y × that overflow. At 1920×817 the
      overflow is 190px, so anything above ~8% cuts; at 2560 anything
      above ~5%; on an ultrawide, ~4%. 42% was cutting on every wide
      screen and 10% would still cut above 1920. The only value that is
      safe at every size is the top edge, so that is what it uses. Below
      about 1600 the scaling is height-driven and there is no vertical
      overflow at all, so the framing there is unchanged.

   2. The min-height cap is gone, as asked — a taller section means less
      of the picture is cropped.

   3. The four priorities were set at 14.7px on a busy photograph. They
      carry the promise, so they get size, a gold tick and a shadow to
      lift them off the pavement behind them. No box: boxes read as
      buttons, which is what the client asked to be rid of.
   ------------------------------------------------------------ */
@media (min-width:768px){
  .elementor-section.hero.st-hero-banner{
    background-position:68% 0%;
    min-height:86vh;
  }
  .elementor-section.hero.st-hero-banner > .elementor-container{min-height:86vh}

  .st-hero-banner .tickrow{gap:14px 34px}
  .st-hero-banner .tickrow li,
  .st-hero-banner .tickrow li + li{
    font-size:1.04rem;font-weight:800;letter-spacing:.05em;color:#fff;
    text-shadow:0 1px 4px rgba(3,14,34,.55);
  }
  .st-hero-banner .tickrow .tk{
    width:27px;height:27px;flex:0 0 27px;font-size:.86rem;
    background:var(--gold);color:var(--on-gold);border:0;
    box-shadow:0 2px 8px rgba(3,14,34,.35);
  }
}

/* ------------------------------------------------------------
   Allura's "y" has a long tail and TIRMIZI was pulled up under it, so
   the descender ran behind the T. The family name drops far enough to
   let the tail finish. Applies to both home pages.
   ------------------------------------------------------------ */
.hname{line-height:1}
.hname b{margin-top:.02em}



/* ============================================================
   THE FONT SHEET, APPLIED LITERALLY                    (6.4.0)
   The client's sheet says:
     Montserrat — headings, titles, navigation, buttons
     Inter      — body text, paragraphs, descriptions, smaller text

   An audit of every text element on the site found three places that
   did not obey it, in both directions.

   1. NAVIGATION IN INTER. The footer's Pages and Take action menus are
      navigation and were set in Inter. They are Montserrat now. The
      bar at the top was already right.

   2. SMALLER TEXT AND DESCRIPTIONS IN MONTSERRAT. Four items were
      display type when the sheet calls them reading text: the
      countdown's unit labels, the event date chips, the date cells in
      the voting-days table, and the hero's list of four priorities.
      All Inter now. The priorities keep their size and their gold
      ticks, so they stay as prominent as the client asked — the face
      changed, not the emphasis.

   3. A BUTTON IN THE WRONG WEIGHT. The newsletter Subscribe button is
      rendered by Fluent Forms, so it never matched the button rule and
      was still at 900.

   Deliberately left in Montserrat, because the sheet calls them titles
   rather than text: the countdown figures, UNTIL ELECTION DAY, the
   section kickers and badges, and WATERLOO COUNCIL · WARD 4, which is
   part of the wordmark.
   ============================================================ */

/* 1. navigation */
footer.site ul.menu a,
footer.site .fmenu a{
  font-family:var(--font-display);font-weight:600;letter-spacing:.01em;
}

/* 2. smaller text and descriptions */
.cd .l,
.st-event-date p,
.ballot .d,
.tickrow li,.tickrow li + li{font-family:var(--font-body)}
.cd .l{font-weight:500}
.st-event-date p{font-weight:700}
.ballot .d{font-weight:600}
.tickrow li,.tickrow li + li{font-weight:700;letter-spacing:.03em}
@media (min-width:768px){
  .st-hero-banner .tickrow li,
  .st-hero-banner .tickrow li + li{font-weight:700;letter-spacing:.03em}
}

/* 3. buttons */
.ff-btn-submit,
.fluentform .ff-btn-submit,
.frm-fluent-form button[type="submit"]{
  font-family:var(--font-display) !important;font-weight:700 !important;
}

/* ------------------------------------------------------------
   One item from the font-sheet sweep did not take: the election-day
   row in the voting-days table sets its date through
   `.ballot li.primary .d`, which outweighs a plain `.ballot .d`. It
   keeps every bit of its emphasis — heavier, uppercase, in the action
   colour — but the face is Inter, because a date in a table is data,
   not a title.                                              (6.4.1)
   ------------------------------------------------------------ */
.ballot li .d,
.ballot li.primary .d{font-family:var(--font-body)}
.ballot li.primary .d{font-weight:800;letter-spacing:.01em}



/* ============================================================
   NOTHING FALLS BACK TO ROBOTO                         (6.5.0)
   Elementor's Default Kit still names Roboto and Roboto Slab as its
   global typography, and its stylesheet sets them literally on the
   body, the headings, buttons and form fields. Every element this
   theme styles already wins that fight, but anything added later
   would land on Roboto without knowing it.

   So the kit's own selectors are answered directly: display face on
   headings and buttons, reading face on everything else. Elementor's
   Google Fonts printing is switched off in functions.php as well, so
   the two unused families stop being downloaded.
   ============================================================ */
[class*="elementor-kit-"],
[class*="elementor-kit-"] p,
[class*="elementor-kit-"] li,
[class*="elementor-kit-"] td,
[class*="elementor-kit-"] th,
[class*="elementor-kit-"] input,
[class*="elementor-kit-"] textarea,
[class*="elementor-kit-"] select,
[class*="elementor-kit-"] label{font-family:var(--font-body)}

[class*="elementor-kit-"] h1,
[class*="elementor-kit-"] h2,
[class*="elementor-kit-"] h3,
[class*="elementor-kit-"] h4,
[class*="elementor-kit-"] h5,
[class*="elementor-kit-"] h6,
[class*="elementor-kit-"] button,
[class*="elementor-kit-"] .elementor-button,
[class*="elementor-kit-"] input[type="submit"],
[class*="elementor-kit-"] input[type="button"]{font-family:var(--font-display)}

/* the menu button is a button */
#burger{font-family:var(--font-display)}


/* ============================================================
   THE COLLAGE, FULLER AND WITH FACES INTACT            (6.5.0)
   A fourth photograph joins it — the downtown portrait — and the
   arrangement changes so the block reads as one filled shape rather
   than three pictures with a hole under them:

        a d          the tall winter hike carries the left,
        a b          the square portrait and the mountain shot
        c c          stack beside it, the river runs full width.

   On a phone it becomes a plain two-by-two. What was cutting faces
   there was the crop, not the layout: a 1050×1400 portrait squeezed
   into a square box loses most of its height, and centring that crop
   takes the head off. Each picture now says where its subject is, so
   the crop keeps the face wherever the box goes.
   ============================================================ */
.st-collage{
  grid-template-columns:1.15fr 1fr;
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "a d"
    "a b"
    "c c";
}
.st-collage .a{grid-area:a;grid-row:auto}
.st-collage .b{grid-area:b;aspect-ratio:16/10}
.st-collage .c{grid-area:c;aspect-ratio:2.3/1}
.st-collage .d{grid-area:d;aspect-ratio:1/1}

/* where the face is in each frame */
.st-collage .a img{object-position:50% 12%}
.st-collage .b img{object-position:50% 46%}
.st-collage .c img{object-position:50% 36%}
.st-collage .d img{object-position:52% 18%}

@media (max-width:767px){
  .st-collage{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "a d"
      "b c";
    gap:10px;
  }
  .st-collage .a,
  .st-collage .b,
  .st-collage .c,
  .st-collage .d{aspect-ratio:1/1;grid-column:auto}
}

/* ------------------------------------------------------------
   The spanning version left a hole: one frame crossing two rows has
   to agree with the heights of the two frames beside it, and it
   cannot, because each picture sets its own aspect. So no spanning —
   a plain two-by-two, portraits on the top row, landscapes under
   them. Every cell is defined by its own ratio, the rows come out
   level, and there is nowhere for a gap to open at any width.
                                                            (6.5.1)
   ------------------------------------------------------------ */
.st-collage{
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  grid-template-areas:
    "a d"
    "b c";
}
.st-collage .a,.st-collage .d{aspect-ratio:3/4}
.st-collage .b,.st-collage .c{aspect-ratio:4/3}
.st-collage .a{grid-area:a}
.st-collage .d{grid-area:d}
.st-collage .b{grid-area:b}
.st-collage .c{grid-area:c}
@media (max-width:767px){
  .st-collage{gap:10px}
  .st-collage .a,.st-collage .d{aspect-ratio:3/4}
  .st-collage .b,.st-collage .c{aspect-ratio:4/3}
}



/* ============================================================
   THE COLLAGE AS A PACKED MOSAIC                       (6.6.0)
   The two-by-two was tidy but thin: four small frames in a 46% column
   with air around them. This is the same four photographs packed
   instead — laid out in CSS columns, which flow each picture under
   the last and let the browser balance the two stacks. Because the
   flow decides the break, no cell has to agree with a neighbour's
   height, so there is never a hole; and because each picture keeps
   its own ratio, the block staggers the way a real collage does
   rather than marching in a grid.

   The picture column also widens, so the photographs are simply
   bigger: 52% of the row on a desktop instead of 46%.
   ============================================================ */
.elementor-section.meet-top .hero-photo-col,
.elementor-section.meet-top > .elementor-container > .elementor-column:first-child{
  width:52% !important;flex:0 0 52% !important;max-width:52% !important;
}
.elementor-section.meet-top > .elementor-container > .elementor-column:last-child{
  width:48% !important;flex:0 0 48% !important;max-width:48% !important;
}

.st-collage{
  display:block;
  column-count:2;
  column-gap:12px;
  grid-template-columns:none;
  grid-template-areas:none;
}
.st-collage figure{
  display:block;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 12px;
  grid-area:auto !important;
}
/* each photograph keeps its own shape, which is what makes it stagger */
.st-collage .a{aspect-ratio:3/4}
.st-collage .d{aspect-ratio:1/1}
.st-collage .b,.st-collage .c{aspect-ratio:3/2}

/* the gold block sits under the packed shape, not under a grid cell */
.st-collage::before{left:-18px;bottom:-6px;width:120px;height:120px}

@media (max-width:767px){
  .st-collage{column-count:2;column-gap:9px}
  .st-collage figure{margin:0 0 9px}
  .st-collage::before{left:-12px;bottom:-4px;width:80px;height:80px}
}

/* ------------------------------------------------------------
   And the heading stacks like the hero does: the script name on its
   own line with the family name under it, rather than the two sitting
   side by side.
   ------------------------------------------------------------ */
.st-h1 .elementor-heading-title .script{
  display:block;
  font-size:1.15em;line-height:.92;
  padding-right:0;margin-bottom:-.04em;
}
.elementor-section.meet-top .st-h1 .elementor-heading-title{line-height:.96}

/* ------------------------------------------------------------
   The two stacks came out uneven — 3:4 + 3:2 on the left against
   3:2 + 1:1 on the right, which is a third of a column-width short
   and leaves a step at the foot. Giving the square portrait the same
   3:4 as the hiking shot makes both stacks exactly two column-widths
   tall, so the block ends flush on both sides.          (6.6.1)
   ------------------------------------------------------------ */
.st-collage .d{aspect-ratio:3/4}

/* ------------------------------------------------------------
   Widening the picture column to 52% was written without a width, so
   it also held on a phone and stopped Elementor stacking the two
   columns — the collage and the whole story ended up side by side in
   two narrow ribbons. The widths belong to the desktop layout only;
   below that the columns stack as they always did.        (6.6.2)
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .elementor-section.meet-top > .elementor-container > .elementor-column:first-child,
  .elementor-section.meet-top > .elementor-container > .elementor-column:last-child{
    width:100% !important;flex:0 0 100% !important;max-width:100% !important;
  }
}



/* ============================================================
   HE STANDS ON THE BAND, HE DOES NOT HANG ABOVE IT     (6.7.0)
   The cut-out was floating: the hero ended at the gold strip, the
   arch behind him reached that edge, but his photograph stopped 20px
   short of it, so his legs were cut in mid-air with a sliver of
   background under them.

   The 20px was mine. Elementor gives every widget that is not the
   last in its column a 20px bottom margin, and the phone-only slide
   and overlay widgets added after it turned the photograph into a
   middle child. It is the last thing in the column visually, so it
   loses the margin and lands flush on the boundary — the band below
   becomes the ground he is standing on.
   ============================================================ */
.elementor-section.hero .hero-photo-col .st-hero-img,
.elementor-section.hero .hero-photo-col .st-hero-img.elementor-widget{
  margin-bottom:0 !important;
}
.elementor-section.hero .hero-photo-col > .elementor-widget-wrap{
  padding-bottom:0 !important;align-content:flex-end;
}
.elementor-section.hero .st-hero-img img{display:block;margin-bottom:0}



/* ============================================================
   THE PHONE HERO IS VERSION ONE AS WELL                (6.8.0)
   Version 1 is the home page on every device now, so the phone stops
   running the photograph-as-banner treatment that was built for the
   version that has been retired. The slide and its overlay go, and
   the composition the desktop uses comes back: the cut-out standing
   in the gold arch, with ELECT, the name, the office chip and Ward 4
   read from the copy column exactly as they are on a wide screen.

   This unwinds the 6.1.x full-bleed work and the 6.2.0 slide in one
   place rather than unpicking them line by line — if the photograph
   hero is ever wanted back on phones, delete this block.
   ============================================================ */
@media (max-width:767px){
  .st-hero-slide,
  .st-hero-overlay{display:none !important}

  /* the name block is said in the copy column again */
  .st-kicker{display:block}
  .st-kicker .elect{display:block}
  .st-kicker .hname{display:block}
  .st-kicker .office{display:inline-block}
  .st-kicker .ward{display:flex;margin-top:14px}

  /* the cut-out and its arch come back */
  .st-hero-img{display:block;margin:0}
  .hero-photo-col::before,.hero-photo-col::after,
  .hero-photo::before,.hero-photo::after{display:block !important}

  /* and the column is a column again, not a full-bleed band */
  .elementor-section.hero > .elementor-container{
    padding-block:54px 0 !important;
    padding-inline:20px !important;
  }
  .elementor-section.hero > .elementor-container > .hero-photo-col{
    width:100% !important;max-width:100% !important;flex:0 0 100% !important;
    margin-left:0 !important;
  }
  .hero-photo-col > .elementor-widget-wrap{padding:0 !important}

  .hero-photo-col img,.hero-photo img{
    width:auto !important;max-width:min(78vw,306px) !important;
    height:auto !important;
    object-fit:contain;object-position:50% 100%;
    margin-inline:auto;
  }
  .hero-photo-col::before,.hero-photo::before{width:min(86%,300px);height:84%}
  .hero-photo-col::after,.hero-photo::after{width:min(73%,256px);height:79%}

  .elementor-section.hero .hero-copy-col > .elementor-widget-wrap{padding-top:18px}
}
@media (max-width:400px){
  .hero-photo-col img,.hero-photo img{max-width:min(80vw,270px) !important}
  .hero-photo-col::before,.hero-photo::before{width:min(88%,268px)}
  .hero-photo-col::after,.hero-photo::after{width:min(75%,228px)}
}



/* ============================================================
   THE NAME SITS ON THE PICTURE AGAIN, ON A PHONE       (6.9.0)
   The phone keeps version one's composition — the cut-out standing in
   the gold arch — but the name block moves back on top of it, the way
   it read in the slider version: Elect, the script name, TIRMIZI, the
   council chip and Ward 4, over a scrim raked up from the bottom so
   every line stays readable against whatever is behind it.

   The overlay is a widget inside the photo column, so it can be
   positioned over the picture; the copy column's own name block is
   hidden at this width so nothing is said twice.
   ============================================================ */
@media (max-width:767px){
  .hero-photo-col > .elementor-widget-wrap{position:relative}

  .st-hero-overlay{
    display:block !important;
    position:absolute;left:0;right:0;bottom:0;z-index:4;
    margin:0;padding:78px 20px 20px;pointer-events:none;
    background:linear-gradient(to top,
      rgba(5,21,47,.96) 0%,rgba(5,21,47,.9) 34%,
      rgba(5,21,47,.62) 62%,rgba(5,21,47,0) 100%);
  }
  .st-hero-overlay .elect{
    display:block;color:var(--gold);
    font-family:var(--font-display);font-weight:800;
    font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
    margin-bottom:2px;
  }
  .st-hero-overlay .hname{
    display:block;color:var(--gold);
    font-size:clamp(2rem,10.5vw,2.9rem);line-height:.92;
  }
  .st-hero-overlay .hname b{
    display:block;color:#fff;
    font-size:clamp(2.1rem,11.5vw,3.1rem);letter-spacing:-.03em;
  }
  .st-hero-overlay .office{
    display:inline-block;margin-top:11px;
    background:var(--gold);color:var(--on-gold);
    font-family:var(--font-display);font-weight:800;
    font-size:.79rem;letter-spacing:.02em;padding:7px 12px;border-radius:4px;
  }
  .st-hero-overlay .ward{
    display:flex;align-items:center;gap:10px;margin-top:11px;
    color:#fff;font-family:var(--font-display);font-weight:800;
    font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;
  }
  .st-hero-overlay .ward i{flex:1;height:2px;background:var(--gold);opacity:.9}

  /* said once, on the picture */
  .st-kicker{display:none}
  .elementor-section.hero .hero-copy-col > .elementor-widget-wrap{padding-top:22px}
}


/* ============================================================
   THE HERO'S BACKGROUND IS EDITABLE IN ELEMENTOR
   The section had two things fighting any colour set in the editor:
   the theme painted it with the `background` shorthand, which also
   wipes a background image; and a full-bleed ::before laid an opaque
   cream gradient over the whole thing, so a colour chosen in Elementor
   was simply hidden behind it.

   Now the theme only names a background *colour*, as a default, at a
   weight Elementor's own rule beats — and the decorative layer keeps
   just the soft gold glow, which is transparent and sits happily over
   any colour. Elementor → the hero section → Style → Background now
   works, including its separate desktop, tablet and mobile values.
   ============================================================ */
.elementor-section.hero{background:none;background-color:var(--surface)}
.hero::before,.elementor-section.hero::before{
  background:radial-gradient(760px 460px at 92% 88%, var(--gold-soft), transparent 62%);
}



/* ============================================================
   VERSION THREE: THE LAWN SIGN IN WATERLOO BLUE        (7.0.0)
   A third home page — /home-v3-blue/, page 229 — built to the printed
   sign the client showed: the candidate against a field of Waterloo
   blue, his name in solid white caps, the seat on a band beneath it
   and the promise line picking out AFFORD in gold.

   The gold arch stays. On blue it does more work than it did on
   cream: it lifts him off the ground and gives the block a centre.

   Everything is scoped to .st-hero-blue, a class on that page's hero
   section, so neither of the other two versions can be touched by it.
   ============================================================ */
:root{
  --wat-blue:#125BA4;
  --wat-blue-deep:#0A4180;
  --wat-blue-lift:#1E74C6;
}

.elementor-section.hero.st-hero-blue{
  background:none;
  background-color:var(--wat-blue);
}
.elementor-section.hero.st-hero-blue::before{
  background:
    radial-gradient(900px 620px at 62% 34%, var(--wat-blue-lift), transparent 64%),
    linear-gradient(146deg, var(--wat-blue-deep) 0%, var(--wat-blue) 52%, var(--wat-blue-deep) 100%);
}

/* the copy reads light on the blue */
.st-hero-blue .elect{color:var(--gold)}
.st-hero-blue .hname{color:var(--gold)}
.st-hero-blue .hname b{color:#fff}
.st-hero-blue .office{
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.34);
}
.st-hero-blue .ward{color:#fff}
.st-hero-blue .ward i{background:var(--gold)}

.st-hero-blue .st-h1 .elementor-heading-title,
.elementor-section.hero.st-hero-blue .st-h1 .elementor-heading-title{color:#fff !important}
.st-hero-blue .st-h1 .elementor-heading-title em,
.elementor-section.hero.st-hero-blue .st-h1 .elementor-heading-title em{color:var(--gold) !important}

.st-hero-blue .tickrow li,
.st-hero-blue .tickrow li + li{color:#fff}
.st-hero-blue .tickrow .tk{
  background:var(--gold);color:var(--on-gold);border:0;
  box-shadow:0 2px 8px rgba(3,20,44,.34);
}

/* the arch and its ring against the blue */
.st-hero-blue .hero-photo-col::before,
.st-hero-blue .hero-photo::before{background:var(--gold)}
.st-hero-blue .hero-photo-col::after,
.st-hero-blue .hero-photo::after{border-color:rgba(255,255,255,.6)}

/* the bar floats over blue here, so its links are light until scroll */
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a{color:rgba(255,255,255,.9)}
@media (min-width:1025px){
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a:hover,
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a.active{
    color:#fff;background:rgba(255,255,255,.16);
  }
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"]{
    background:var(--green-act);color:#fff;
  }
}
@media (max-width:1024px){
  body:has(.st-hero-blue) header.site:not(.scrolled) #burger{
    background:var(--navy-band);border-color:rgba(255,255,255,.92);color:#fff;
  }
}

/* on a phone the overlay already carries its own scrim, so it only
   needs to stop fighting the blue behind it */
@media (max-width:767px){
  .st-hero-blue .st-hero-overlay{
    background:linear-gradient(to top,
      rgba(6,38,74,.96) 0%,rgba(6,38,74,.88) 36%,
      rgba(6,38,74,.55) 64%,rgba(6,38,74,0) 100%);
  }
  .st-hero-blue .st-kicker{display:none}
}

/* ------------------------------------------------------------
   The name block on version three sat on a dark scrim, which read as
   a shaded panel dropped over the picture. It is gone. The blue field
   and his suit are dark enough to carry white and gold on their own;
   a soft shadow on the letters themselves does the protecting instead,
   which you cannot see as a shape.                          (7.0.1)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .st-hero-overlay{
    background:none;
    padding-top:26px;
  }
  .st-hero-blue .st-hero-overlay .elect,
  .st-hero-blue .st-hero-overlay .hname,
  .st-hero-blue .st-hero-overlay .hname b,
  .st-hero-blue .st-hero-overlay .ward{
    text-shadow:0 2px 12px rgba(4,26,54,.6), 0 1px 3px rgba(4,26,54,.45);
  }
  .st-hero-blue .st-hero-overlay .office{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.42);
    color:#fff;backdrop-filter:blur(2px);
  }
}

/* ------------------------------------------------------------
   Taking the scrim away put the gold ELECT and the gold script name
   straight onto the gold arch, where they vanish. The answer is not
   to shade them back in — it is to stop the picture and the words
   sharing the same ground. The photograph and its arch now finish
   above the name, and the name sits on plain blue, which is how the
   printed sign does it. Nothing is laid over anything.     (7.0.2)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .hero-photo-col > .elementor-widget-wrap{
    position:relative;
    padding-bottom:clamp(168px,46vw,214px) !important;
  }
  .st-hero-blue .hero-photo-col::before,
  .st-hero-blue .hero-photo::before,
  .st-hero-blue .hero-photo-col::after,
  .st-hero-blue .hero-photo::after{
    bottom:clamp(168px,46vw,214px);
  }
  .st-hero-blue .st-hero-overlay{
    padding:0 20px 4px;
  }
}

/* ------------------------------------------------------------
   Lifting the arch above the name without shortening it pushed its
   crown out of the top of the section, so it read as a cut-off
   rectangle. The picture zone is now the column height minus the band
   the name sits in, and the arch is sized to that.          (7.0.3)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .hero-photo-col::before,
  .st-hero-blue .hero-photo::before{height:52%}
  .st-hero-blue .hero-photo-col::after,
  .st-hero-blue .hero-photo::after{height:48%}
}

/* ------------------------------------------------------------
   Measured on the blue: white sits at 6.87:1, the gold script name at
   3.29:1 which is fine at its size, but ELECT is small bold caps and
   3.29:1 does not carry there. It joins the white lockup, which is
   also how the printed sign sets everything above the band.  (7.0.4)
   ------------------------------------------------------------ */
.st-hero-blue .elect,
.st-hero-blue .st-hero-overlay .elect{color:#fff}



/* ============================================================
   THE PHONE NAME BLOCK, SET IN BANDS                   (7.1.0)
   Two notes from the client, and they answer each other.

   The arch had been cut short and lifted so it would not sit behind
   the gold lettering. That solved the contrast but left a stunted
   shape stopping at his waist. It is a full arch again, standing on
   the bottom of the picture the way it does on a desktop.

   The lettering can go back over it because it no longer relies on
   the picture for contrast: each line carries its own band, the way
   the client mocked it up — Elect on blue, the script name in white
   over the join, TIRMIZI reversed out of gold, and the seat on blue
   underneath. Bands are tight to the words, so it reads as a lockup
   rather than a panel dropped over the photograph.
   ============================================================ */
@media (max-width:767px){
  /* the arch is whole again */
  .st-hero-blue .hero-photo-col > .elementor-widget-wrap{padding-bottom:0 !important}
  .st-hero-blue .hero-photo-col::before,
  .st-hero-blue .hero-photo::before{bottom:0;height:84%}
  .st-hero-blue .hero-photo-col::after,
  .st-hero-blue .hero-photo::after{bottom:0;height:79%}

  .st-hero-blue .st-hero-overlay{
    background:none;
    padding:0 18px 18px;
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
  }

  /* Elect — a small blue tag */
  .st-hero-blue .st-hero-overlay .elect{
    display:inline-block;width:auto;
    background:var(--wat-blue-deep);color:#fff;
    font-size:.78rem;letter-spacing:.2em;
    padding:5px 10px 4px;margin:0 0 -2px;
    text-shadow:none;
  }

  /* Syed — white script, riding over the join */
  .st-hero-blue .st-hero-overlay .hname{
    display:block;color:#fff;
    font-size:clamp(2.2rem,12vw,3.2rem);line-height:.86;
    margin:0 0 -.16em;padding-left:6px;
    text-shadow:0 3px 14px rgba(4,26,54,.5);
    position:relative;z-index:2;
  }

  /* TIRMIZI — reversed out of gold */
  .st-hero-blue .st-hero-overlay .hname b{
    display:inline-block;color:#fff;
    background:var(--gold);
    font-size:clamp(2.1rem,11.5vw,3.1rem);letter-spacing:-.02em;line-height:1;
    padding:6px 14px 8px;margin-top:0;
    text-shadow:none;
  }

  /* the seat, on blue */
  .st-hero-blue .st-hero-overlay .office{
    display:inline-block;margin-top:0;
    background:var(--wat-blue-deep);color:#fff;
    border:0;backdrop-filter:none;
    font-size:.8rem;font-weight:800;letter-spacing:.04em;
    padding:8px 13px;border-radius:0;
    text-shadow:none;
  }
  .st-hero-blue .st-hero-overlay .ward{display:none}
}

/* ------------------------------------------------------------
   The seat band broke onto two lines below 430, which turns a clean
   bar into a paragraph. It holds one line at any width now and scales
   down instead of wrapping.                                 (7.1.1)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .st-hero-overlay .office{
    white-space:nowrap;
    font-size:clamp(.6rem,3.05vw,.8rem);
    letter-spacing:.02em;
    padding:8px 12px;
  }
}

/* ------------------------------------------------------------
   Reading the client's mock-up properly: the seat band is **blue on
   white**, not white on blue — I had it inverted. That also gives the
   lockup its rhythm, dark / white / gold / white going down, instead
   of two blue bars either side of the gold one. The gold band and the
   family name grow to the weight they have in the mock-up.  (7.1.2)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .st-hero-overlay .office{
    background:#fff;
    color:var(--wat-blue-deep);
    font-size:clamp(.64rem,3.25vw,.86rem);
    letter-spacing:.03em;
    padding:9px 14px;
  }
  .st-hero-blue .st-hero-overlay .hname b{
    font-size:clamp(2.35rem,12.8vw,3.4rem);
    padding:8px 18px 10px;
  }
  .st-hero-blue .st-hero-overlay .hname{
    font-size:clamp(2.4rem,13vw,3.4rem);
  }
}

/* ------------------------------------------------------------
   The seat band stays as it is — blue on white, running the width of
   the lockup. Elect, the script name and TIRMIZI go back to the sizes
   they had before I enlarged them: at the bigger setting the gold band
   crowded the picture and pushed his face up out of the frame.
                                                            (7.1.3)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .st-hero-overlay .hname{
    font-size:clamp(2.2rem,12vw,3.2rem);
  }
  .st-hero-blue .st-hero-overlay .hname b{
    font-size:clamp(2.1rem,11.5vw,3.1rem);
    padding:6px 14px 8px;
  }
}



/* ============================================================
   THE LOCKUP IS FOUR WIDGETS NOW                       (7.2.0)
   Elect, Syed, TIRMIZI and the seat line used to be four spans inside
   one text widget, which meant Elementor offered one typography
   control for all of them. They are four heading widgets in an inner
   section now, so each one has its own Typography, Colour and
   Spacing panel and can be set independently in the editor.

   What is below is only a **default**. Every rule that touches type
   is deliberately written two classes deep — `.st-ov-x .elementor-
   heading-title` — while Elementor writes its own at three, so
   anything set in the editor wins without needing !important. The
   bands, padding and colours are here so the block looks right out of
   the box; change any of them in Elementor and the change sticks.

     st-ov-elect    the small blue tag
     st-ov-syed     the white script
     st-ov-tirmizi  reversed out of gold
     st-ov-seat     blue on white
   ============================================================ */
.st-hero-lockup{display:none}

@media (max-width:767px){
  .st-hero-blue .hero-photo-col > .elementor-widget-wrap{position:relative}

  .st-hero-blue .st-hero-lockup{
    display:block;
    position:absolute;left:0;right:0;bottom:0;z-index:4;
    margin:0;padding:0 18px 18px;
    width:auto;
  }
  .st-hero-blue .st-hero-lockup > .elementor-container{
    display:block;padding:0;
  }
  .st-hero-blue .st-hero-lockup .elementor-column,
  .st-hero-blue .st-hero-lockup .elementor-widget-wrap{
    width:100%;padding:0;display:block;
  }
  /* the widgets stack tight; Elementor's 20px gap would break the bands apart */
  .st-hero-blue .st-hero-lockup .elementor-widget{margin-bottom:0}

  /* each line is only as wide as its own words */
  .st-hero-blue .st-ov .elementor-heading-title{
    display:inline-block;
    font-family:var(--font-display);
    line-height:1;
  }

  .st-hero-blue .st-ov-elect .elementor-heading-title{
    background:var(--wat-blue-deep);color:#fff;
    font-size:.78rem;font-weight:800;letter-spacing:.2em;
    text-transform:uppercase;padding:5px 10px 4px;
  }
  .st-hero-blue .st-ov-syed .elementor-heading-title{
    font-family:var(--font-script);color:#fff;font-weight:400;
    font-size:clamp(2.2rem,12vw,3.2rem);line-height:.86;
    padding:0 0 0 6px;text-transform:none;
    text-shadow:0 3px 14px rgba(4,26,54,.5);
  }
  .st-hero-blue .st-ov-tirmizi .elementor-heading-title{
    background:var(--gold);color:#fff;
    font-size:clamp(2.1rem,11.5vw,3.1rem);font-weight:900;
    letter-spacing:-.02em;text-transform:uppercase;
    padding:6px 14px 8px;
  }
  .st-hero-blue .st-ov-seat .elementor-heading-title{
    background:#fff;color:var(--wat-blue-deep);
    font-size:clamp(.64rem,3.25vw,.86rem);font-weight:800;
    letter-spacing:.03em;text-transform:uppercase;
    padding:9px 14px;white-space:nowrap;
  }

  /* the script overlaps the gold band, as it does on the mock-up */
  .st-hero-blue .st-ov-syed{margin-bottom:-.16em;position:relative;z-index:2}
  .st-hero-blue .st-ov-elect{margin-bottom:-2px}

  /* the old single-widget overlay is gone; make sure nothing of it lingers */
  .st-hero-blue .st-hero-overlay{display:none !important}
  .st-hero-blue .st-kicker{display:none}
}

/* ------------------------------------------------------------
   On a 320px phone the seat band came out 281px wide against 239px of
   room and the section clipped it, so WARD 4 was cut off. Below 360
   it sets smaller and tightens its padding; above that it keeps the
   size it has.                                              (7.2.1)
   ------------------------------------------------------------ */
@media (max-width:360px){
  .st-hero-blue .st-ov-seat .elementor-heading-title{
    font-size:2.7vw;
    letter-spacing:.01em;
    padding:8px 10px;
  }
}

/* ------------------------------------------------------------
   Measured across widths, the seat band was still wider than its
   column at 390 (327 against 299) and 430 (353 against 339) — the
   clamp's middle term was not tracking the viewport closely enough,
   so it only looked right at one size. It is sized straight off the
   viewport now and measures inside its column at every width tested:
   320, 390, 430, 767.                                       (7.2.2)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .st-ov-seat .elementor-heading-title{
    font-size:clamp(.5rem,2.9vw,.82rem);
    letter-spacing:.02em;
    padding:8px 12px;
  }
}

/* ------------------------------------------------------------
   At 320 the clamp hits its floor, so the band cannot shrink any
   further on size alone — 240px against 229px of room. The last 11px
   come out of its padding and tracking instead.             (7.2.3)
   ------------------------------------------------------------ */
@media (max-width:360px){
  .st-hero-blue .st-ov-seat .elementor-heading-title{
    font-size:2.75vw;
    letter-spacing:0;
    padding:8px 8px;
  }
}



/* ============================================================
   FOUR NOTES ON THE PHONE LOCKUP                       (7.3.0)

   1. The "shadow" over FOR A WATERLOO YOU CAN AFFORD was not a shadow
      — nothing in the hero carries one, which is why it could not be
      found. It is the edge of the radial glow in the hero background:
      a 900×620 lift centred at 62%/34%, which on a wide screen sits
      behind his shoulder but on a phone lands exactly behind that
      heading, so its fade reads as a smudge. On phones the glow goes
      and the blue runs even.

   2. Elect is reversed — blue on white, matching the seat band, so the
      lockup is bookended the same way top and bottom.

   3. The script name sets larger.

   4. It also aligns hard left with Elect and TIRMIZI; it had a 6px
      indent that left the block looking untidy down its left edge.
   ============================================================ */
@media (max-width:767px){
  .elementor-section.hero.st-hero-blue::before{
    background:linear-gradient(168deg,
      var(--wat-blue-deep) 0%, var(--wat-blue) 46%, var(--wat-blue-deep) 100%);
  }

  .st-hero-blue .st-ov-elect .elementor-heading-title{
    background:#fff;
    color:var(--wat-blue-deep);
  }

  .st-hero-blue .st-ov-syed .elementor-heading-title{
    font-size:clamp(2.5rem,13.6vw,3.7rem);
    padding-left:0;
    text-shadow:none;
  }
}



/* ============================================================
   ELECT BESIDE SYED, AND ONE SEAT BAND ON DESKTOP      (7.4.0)

   On a phone Elect and the script name share a line, the way the
   client drew it: the white tag, then Syed beside it. They are two
   separate widgets, so they are set inline and the two below them
   stay full-width blocks.

   On a desktop the seat is one band instead of two devices — the
   council chip and the ruled WARD 4 line become a single white bar
   reading "For Waterloo City Council — Ward 4", matching the phone.
   The Ward 4 span is gone from the widget, so the rules that drew it
   have nothing to draw.
   ============================================================ */

/* ---- phone: Elect and Syed on one row ---- */
@media (max-width:767px){
  .st-hero-blue .st-hero-lockup .elementor-widget-wrap{display:block}

  .st-hero-blue .st-ov-elect,
  .st-hero-blue .st-ov-syed{
    display:inline-block;width:auto;vertical-align:middle;
    margin-bottom:0;
  }
  .st-hero-blue .st-ov-syed{margin-left:12px}
  .st-hero-blue .st-ov-syed .elementor-heading-title{
    line-height:1;
  }
  .st-hero-blue .st-ov-tirmizi,
  .st-hero-blue .st-ov-seat{display:block;width:100%}
  .st-hero-blue .st-ov-tirmizi{margin-top:-.06em}
}

/* ---- desktop: one white seat band ---- */
@media (min-width:768px){
  .st-hero-blue .office{
    display:inline-block;
    background:#fff;color:var(--wat-blue-deep);
    border:0;border-radius:0;
    font-family:var(--font-display);font-weight:800;
    letter-spacing:.03em;text-transform:uppercase;
    padding:10px 16px;
    margin-top:16px;
  }
  .st-hero-blue .ward{display:none}
}

/* ------------------------------------------------------------
   The desktop seat band keeps the ground it always had — translucent
   white over the blue with a light hairline — not the solid white the
   phone uses. Only the wording merged: one band reading "For Waterloo
   City Council — Ward 4" instead of a chip plus a ruled Ward 4 line.
                                                            (7.4.1)
   ------------------------------------------------------------ */
@media (min-width:768px){
  .st-hero-blue .office{
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1px solid rgba(255,255,255,.34);
    border-radius:4px;
  }
}

/* ------------------------------------------------------------
   The Elect/Syed row sat too far above TIRMIZI. Measured box to box
   the gaps were already equal, but Allura carries a lot of empty
   leading under its glyphs, so the space *looked* far bigger than the
   one between TIRMIZI and the seat band. Closing that leading pulls
   the row down, because the lockup is pinned to the bottom of the
   picture and grows upward. Syed also shifts a little further right
   of the tag.                                               (7.4.2)
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .st-ov-syed{margin-left:20px}
  .st-hero-blue .st-ov-tirmizi{margin-top:-11px}
}

/* ------------------------------------------------------------
   The seat band's size now comes from Elementor — 11px, set on the
   widget — which correctly beats the theme default. At 320 that is
   265px of text in 229px of room, and `nowrap` turned the overflow
   into a clipped word rather than a second line. Below 360 it may
   wrap: a band on two lines is readable, a band with WARD 4 sliced
   off is not. Lower the Mobile font size on that widget in Elementor
   if a single line matters more.                            (7.4.3)
   ------------------------------------------------------------ */
@media (max-width:360px){
  .st-hero-blue .st-ov-seat .elementor-heading-title{
    white-space:normal;
    line-height:1.25;
  }
}



/* ============================================================
   THE SAME LOCKUP ON THE DESKTOP                       (7.5.0)
   The phone treatment moves up to the wide layout: the white ELECT
   tag, the script name set beside and slightly below it so it laps
   over both the tag and the band under it, and TIRMIZI reversed out
   of gold. The seat band keeps the translucent ground the client
   asked to keep — it is the one part that does not go white.

   The widget's markup changed to carry it: Elect and Syed now sit in
   a row wrapper (.st-lock-row) and the family name is alone inside
   .hname, so the two can share a line while TIRMIZI still starts at
   the left edge. Everything here is scoped to .st-hero-blue.
   ============================================================ */
@media (min-width:768px){
  .st-hero-blue .st-lock-row{
    display:flex;align-items:center;gap:6px;
    margin-bottom:-.06em;
  }
  .st-hero-blue .st-lock-row .elect{
    display:inline-block;
    background:#fff;color:var(--wat-blue-deep);
    font-family:var(--font-display);font-weight:800;
    font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;
    padding:7px 13px 6px;margin:0;line-height:1;
  }
  .st-hero-blue .st-lock-row .fn{
    display:inline-block;
    font-family:var(--font-script);font-weight:400;
    color:#fff;text-transform:none;letter-spacing:0;
    font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:.9;
    position:relative;top:10px;z-index:3;
  }

  .st-hero-blue .hname{display:block;margin:0}
  .st-hero-blue .hname b{
    display:inline-block;
    background:var(--gold);color:#fff;
    font-family:var(--font-display);font-weight:900;
    text-transform:uppercase;letter-spacing:-.02em;line-height:1;
    padding:8px 18px 11px;margin-top:0;
  }

  .st-hero-blue .office{margin-top:14px}
}

/* ------------------------------------------------------------
   And on the phone the script laps the tag and the gold band the way
   the client's close-up shows, rather than floating clear of both.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .st-hero-blue .st-ov-syed{
    margin-left:4px;
    position:relative;top:9px;z-index:3;
  }
}

/* ------------------------------------------------------------
   The promise line is set to 70px on the widget in Elementor, which
   is wider than the column can take on one line. Combined with
   `text-wrap: balance` from the typography pass, the browser evened
   it into four short lines. Balance is right for headings that fit;
   here it fights the chosen size, so this one wraps normally and
   fills each line before breaking. Lower the widget's Desktop size to
   about 53px if two lines are wanted.                       (7.5.1)
   ------------------------------------------------------------ */
@media (min-width:768px){
  .st-hero-blue .st-h1 .elementor-heading-title{text-wrap:wrap}
}

/* ------------------------------------------------------------
   The desktop lockup is not a copy of the phone one after all. The
   client's setting: the white ELECT tag and the script name beside
   it, but the script in gold, and the family name plain white on the
   blue with no band behind it. The gold band belongs to the phone,
   where the picture sits behind the words and they need a ground of
   their own; on the wide layout the words sit on open blue and do
   not.                                                      (7.5.2)
   ------------------------------------------------------------ */
@media (min-width:768px){
  .st-hero-blue .st-lock-row .fn{color:var(--gold)}
  .st-hero-blue .hname b{
    background:none;
    color:#fff;
    padding:0;
  }
}



/* ============================================================
   NO RULE BEFORE THE KICKER                            (7.6.0)
   The short gold dash in front of every section kicker goes, site
   wide. It was added to give the kicker presence when it was too
   quiet; the kicker has since grown its own weight and size, and the
   dash now reads as a stray mark before the words. The kicker keeps
   everything else — the size, the weight, the tracking, the colour.
   ============================================================ */
.st-eyebrow .elementor-heading-title::before,
.eyebrow::before{content:none;display:none}
.st-eyebrow .elementor-heading-title,
.eyebrow{gap:0}


/* ============================================================
   THE DESKTOP NAME IS FOUR WIDGETS TOO                 (7.6.0)
   The wide layout's name block was one text widget holding Elect,
   Syed, TIRMIZI and the seat line, so Elementor offered a single
   typography control for all four. It is now an inner section
   (.st-hero-name) with four heading widgets, matching what the phone
   already had:

     st-dv-elect     the white tag
     st-dv-syed      the gold script, beside the tag
     st-dv-tirmizi   the family name, plain white
     st-dv-seat      the seat band, translucent

   As with the phone set, every type rule here is two classes deep so
   Elementor's own three-class rules beat it: set any of them in the
   editor and the editor wins.
   ============================================================ */
.st-hero-name{display:none}

@media (min-width:768px){
  .st-hero-blue .st-hero-name{display:block;margin-bottom:18px}
  .st-hero-blue .st-hero-name > .elementor-container{display:block;padding:0}
  .st-hero-blue .st-hero-name .elementor-column,
  .st-hero-blue .st-hero-name .elementor-widget-wrap{width:100%;padding:0;display:block}
  .st-hero-blue .st-hero-name .elementor-widget{margin-bottom:0}

  .st-hero-blue .st-dv .elementor-heading-title{
    display:inline-block;font-family:var(--font-display);line-height:1;
  }

  /* Elect and Syed share a row */
  .st-hero-blue .st-dv-elect,
  .st-hero-blue .st-dv-syed{display:inline-block;width:auto;vertical-align:middle}
  .st-hero-blue .st-dv-tirmizi,
  .st-hero-blue .st-dv-seat{display:block;width:100%}

  .st-hero-blue .st-dv-elect .elementor-heading-title{
    background:#fff;color:var(--wat-blue-deep);
    font-weight:800;font-size:.92rem;letter-spacing:.2em;
    text-transform:uppercase;padding:7px 13px 6px;
  }
  .st-hero-blue .st-dv-syed{margin-left:6px}
  .st-hero-blue .st-dv-syed .elementor-heading-title{
    font-family:var(--font-script);font-weight:400;
    color:var(--gold);text-transform:none;letter-spacing:0;
    font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:.9;
    position:relative;top:10px;z-index:3;
  }
  .st-hero-blue .st-dv-tirmizi .elementor-heading-title{
    color:#fff;font-weight:900;text-transform:uppercase;
    font-size:clamp(2.7rem,5.6vw,5.2rem);letter-spacing:-.028em;
  }
  .st-hero-blue .st-dv-tirmizi{margin-top:-.08em}
  .st-hero-blue .st-dv-seat{margin-top:14px}
  .st-hero-blue .st-dv-seat .elementor-heading-title{
    background:rgba(255,255,255,.14);color:#fff;
    border:1px solid rgba(255,255,255,.34);border-radius:4px;
    font-weight:800;font-size:.9rem;letter-spacing:.03em;
    text-transform:uppercase;padding:10px 16px;
  }
}



/* ============================================================
   THE COLLAGE, REDESIGNED AROUND THREE                 (7.7.0)
   The downtown portrait is out. What is left is arranged so the
   mountain shot — arms open, the widest and the most characterful of
   the three — runs the full width **uncropped**: its frame is set to
   the photograph's own 1500×729, so cover has nothing to cut. That is
   the point of the layout; everything else serves it.

        a   c        the winter hike and the river, a matched pair
        b b b        the mountain shot, whole, underneath

   The pair above are cropped to a shared 3:4 so their frames line up.
   The hike is a portrait already and loses nothing; the river is wide
   and gives up its edges, which it can afford — he is centred in it.

   CSS columns are dropped here: that flow was right for balancing
   four pictures of unequal shape, but this is a deliberate
   composition and wants a grid.
   ============================================================ */
.st-collage{
  display:grid;
  column-count:auto;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "a c"
    "b b";
  gap:12px;
}
.st-collage figure{margin:0;break-inside:auto}
.st-collage .a{grid-area:a;aspect-ratio:3/4}
.st-collage .c{grid-area:c;aspect-ratio:3/4}
.st-collage .b{grid-area:b;aspect-ratio:1500/729}
.st-collage .d{display:none}

/* with the frame matching the file, nothing is cropped — so the
   subject position only matters for the two above it */
.st-collage .b img{object-position:50% 50%}
.st-collage .a img{object-position:50% 12%}
.st-collage .c img{object-position:50% 40%}

@media (max-width:767px){
  .st-collage{gap:9px}
}

/* ------------------------------------------------------------
   The grid areas were being ignored: the CSS-columns version set
   `grid-area:auto !important` on every figure to stop stale grid
   placement leaking in, and that !important now outranks the new
   placement. Same weight, applied last.                     (7.7.1)
   ------------------------------------------------------------ */
.st-collage .a{grid-area:a !important}
.st-collage .c{grid-area:c !important}
.st-collage .b{grid-area:b !important}

/* ------------------------------------------------------------
   The blue hero's "light links over a dark ground" rule was written
   without a width, so it also reached the phone dropdown — which is a
   white panel. On the home page every item was white on white and the
   menu looked empty. Exactly the trap the navy page headers hit at
   5.10.2; the fix is the same. The light treatment belongs to the bar
   floating over the photograph, so it is scoped to the desktop, and
   the dropdown's links are page ink whatever is behind the bar.
                                                            (7.7.2)
   ------------------------------------------------------------ */
@media (max-width:1024px){
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a{
    color:var(--ink);
  }
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a:hover,
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a.active{
    color:var(--green-act-deep);background:var(--green-act-soft);
  }
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"]{
    color:#fff;background:var(--green-act);
  }
}



/* ============================================================
   THE PRIMARY BUTTON GOES WHITE, THE MENU BUTTON GOES GOLD (7.8.0)
   Two changes the client specified.

   The primary button (st-btn-red) is white with black lettering and
   no shadow, and turns gold on hover. Get Involved in the bar does
   the reverse — gold at rest, white on hover — so the two states
   trade places and the bar always has exactly one gold object in it.

   Note: the client gave #E8A828 for the hover gold. The site's own
   gold is #E8A828, a shade lighter. Both are used here as specified;
   say the word and they can be made one value.
   ============================================================ */
.st-btn-red .elementor-button,
.st-btn-red.elementor-widget-button .elementor-button{
  background-color:#ffffff;
  color:#000000;
  border-color:#ffffff;
  box-shadow:none;
}
.st-btn-red .elementor-button:hover,
.st-btn-red.elementor-widget-button .elementor-button:hover,
.st-btn-red .elementor-button:focus-visible,
.st-btn-red.elementor-widget-button .elementor-button:focus-visible{
  background-color:#E8A828;
  border-color:#E8A828;
  color:#000000;
  box-shadow:none;
}

/* ---- Get Involved in the bar: gold, going white on hover ---- */
nav.main a[href*="/get-involved"],
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"]{
  background:#E8A828;
  color:#000000;
  border-radius:var(--r-pill);
}
nav.main a[href*="/get-involved"]:hover,
nav.main a[href*="/get-involved"].active,
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover{
  background:#ffffff;
  color:#000000;
}

@media (max-width:1024px){
  nav.main a[href*="/get-involved"],
  nav.main a[href*="/get-involved"]:hover,
  nav.main a[href*="/get-involved"].active,
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"]{
    background:#E8A828;color:#000000;
  }
}

/* ============================================================
   7.8.1 — GET INVOLVED: the .active state on inner pages
   The 7.8.0 hover/active block missed the two long
   phead / st-hero-blue ".active" variants, so on the
   Get Involved page itself the old green rule still won.
   ============================================================ */
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active{
  background:#ffffff;
  color:#000000;
}

/* ============================================================
   7.8.2 — mobile dropdown: GET INVOLVED stays gold even when
   it is the current page. The 7.8.1 .active rule has no width
   scope, so without this it painted white-on-white inside the
   white dropdown panel. (Same class of bug as 5.10.2 / 7.7.2.)
   ============================================================ */
@media (max-width:1024px){
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
  nav.main a[href*="/get-involved"].active{
    background:#E8A828;
    color:#000000;
  }
}

/* ============================================================
   7.9.0 - ONE GOLD: #E8A828 EVERYWHERE
   Client rule: wherever the site shows a yellow, the code must be
   #E8A828 - the gold sampled off the printed lawn sign.

   A live audit of every rendered element on all four pages found
   only two golds that were not #E8A828:
     - the GET INVOLVED pill and the primary-button hover (one
       shade darker, given by the client last week)
     - #C9891A  --gold-deep, the 2px edge on the ballot checkbox
       and the hover cast for gold buttons
   Both are gone. The darker hexes were rewritten in place; the
   deep/ink/dark-mode casts are pinned below so no second yellow can
   creep back in through a token fallback.

   The ballot checkbox keeps a visible edge, but in navy instead of
   a darker gold - an outline, not another yellow.

   Consequence worth knowing: gold buttons no longer darken on hover,
   because the darkening WAS the second yellow.
   ============================================================ */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --gold:#E8A828;
  --gold-deep:#E8A828;
  --gold-ink:#E8A828;
  --gold-soft:rgba(232,168,40,.18);
  --yellow:#E8A828;
  --yellow-deep:#E8A828;
  --yellow-soft:rgba(232,168,40,.18);
}
@media (prefers-color-scheme: dark){
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"]{
    --gold:#E8A828;
    --gold-deep:#E8A828;
    --gold-ink:#E8A828;
    --gold-soft:rgba(232,168,40,.18);
    --yellow:#E8A828;
    --yellow-deep:#E8A828;
    --yellow-soft:rgba(232,168,40,.18);
  }
}

/* the ballot checkbox: navy edge, so the gold fill still reads as a box */
.ballot li.primary .box{
  background:var(--gold);
  border-color:rgba(5,21,47,.28);
}

/* ============================================================
   7.10.0 - THE STICKY BAR
   Once the bar solidifies (site.js adds .scrolled past 12px) it is a
   white bar on every page, so the menu needs its own ink rather than
   whatever the hero behind it called for:
     - every menu link      #0A1F45
     - GET INVOLVED         #0A1F45 ground, white label
   Un-scrolled stays exactly as each page already had it - all of the
   older rules are written with :not(.scrolled), so they simply stop
   matching the moment this state applies.

   Scoped to >=1025px on purpose. Below that the bar is transparent and
   there is no sticky menu to ink - only the burger and the white
   dropdown card, and an unscoped nav colour rule has leaked into that
   card three times now (5.10.2, 7.7.2, 7.8.2).
   ============================================================ */
@media (min-width:1025px){

  header.site.scrolled nav.main a,
  header.site.scrolled nav.main a:hover,
  header.site.scrolled nav.main a.active,
  header.site.scrolled nav.main a:focus-visible{
    color:#0A1F45;
  }

  header.site.scrolled nav.main a[href*="/get-involved"],
  header.site.scrolled nav.main a[href*="/get-involved"].active{
    background:#0A1F45;
    color:#ffffff;
    border-radius:var(--r-pill);
  }
  header.site.scrolled nav.main a[href*="/get-involved"]:hover,
  header.site.scrolled nav.main a[href*="/get-involved"]:focus-visible{
    background:#E8A828;
    color:#0A1F45;
  }
}

/* ============================================================
   7.11.0 - ONE HERO BLUE ACROSS THE SITE
   The home hero is Waterloo blue; the inner page heads were the old
   navy with a gold glow, so the site read as two different campaigns
   depending on which page you landed on. The pheads now take the
   home hero's exact treatment - same colour, same two gradient
   layers, same angles - so the band is identical everywhere:

       .elementor-section.hero.st-hero-blue   (home)
       .phead / .elementor-section.phead      (The Plan, Get Involved)

   !important on ::before is not decoration: the gold-glow rule that
   this replaces is itself !important, so nothing weaker would land.
   ============================================================ */
.phead,
.elementor-section.phead{
  background:none;
  background-color:var(--wat-blue);
}
.phead::before,
.elementor-section.phead::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 620px at 62% 34%, var(--wat-blue-lift), transparent 64%),
    linear-gradient(146deg, var(--wat-blue-deep) 0%, var(--wat-blue) 52%, var(--wat-blue-deep) 100%) !important;
}

/* ============================================================
   7.11.1 - the phead sub-line, now that the band is lighter
   --on-dark-dim (#A9BAE2) was mixed for the near-black navy the
   pheads used to be; on the Waterloo blue it lands at 3.53:1 and
   reads as washed out. Lifted to white inside .phead only, so the
   token stays correct on the green sections, the footer and every
   other dark ground that still uses it.
   ============================================================ */
.phead .st-on-dark.elementor-widget-text-editor p,
.phead .st-on-dark.elementor-widget-text-editor .st-lead p,
.elementor-section.phead .st-on-dark.elementor-widget-text-editor p,
.phead .st-on-dark p,
.phead .st-lead p,
.phead .st-ticks.st-on-dark.elementor-widget-icon-list .elementor-icon-list-text{
  color:rgba(255,255,255,.92);
}

/* ============================================================
   7.11.2 - GET INVOLVED on its own page
   7.8.1 gave the pill a white ".active" state so the current page
   would read as current. On /get-involved/ that made the resting
   colour identical to the hover colour, so the button looked dead -
   nothing happened on hover, and the pill did not match the gold it
   is on every other page.

   The current page is already marked by the nav underline, so the
   pill no longer needs its own state: .active is gold like everywhere
   else, and the hover rule is restated AFTER it so it still wins on
   the active item (equal specificity - order decides).
   ============================================================ */
nav.main a[href*="/get-involved"].active,
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active{
  background:#E8A828;
  color:#000000;
}
nav.main a[href*="/get-involved"]:hover,
nav.main a[href*="/get-involved"].active:hover,
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active:hover,
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active:hover,
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active:hover{
  background:#ffffff;
  color:#000000;
}

/* ============================================================
   7.11.3 - keep 7.11.2 off the mobile dropdown
   The 7.11.2 hover rule carries no width scope, so below 1024px it
   sat after the 7.8.2 block and turned the dropdown item white on
   hover - white on the white dropdown card. Fourth time this exact
   leak has happened (5.10.2, 7.7.2, 7.8.2), hence the guard.
   In the dropdown the pill is gold in every state.
   ============================================================ */
@media (max-width:1024px){
  nav.main a[href*="/get-involved"],
  nav.main a[href*="/get-involved"]:hover,
  nav.main a[href*="/get-involved"].active,
  nav.main a[href*="/get-involved"].active:hover,
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"]:hover,
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
  body:not(.home) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active:hover,
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active,
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active:hover,
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"],
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a[href*="/get-involved"].active{
    background:#E8A828;
    color:#000000;
  }
}

/* ============================================================
   7.12.0 - the phead sub-line becomes a gold band
   Client pattern for The Plan and Get Involved: kicker in gold,
   headline in white, and the sub-line sitting on a gold band in
   dark ink - the same device as the home hero's white seat band,
   in the campaign gold. Montserrat throughout the hero; the kicker
   and the H1 already were, only the sub-line was still Inter.

   display:inline + box-decoration-break:clone rather than
   inline-block on purpose: the Get Involved sub-line runs to two
   lines and every phead sub-line wraps on a phone. Clone gives each
   line its own band that hugs the text. inline-block would give one
   rectangle with a ragged gap trailing the last line.

   line-height has to clear 1 + 2x the vertical padding or the bands
   on wrapped lines overlap. .42em padding -> 1.84 minimum, 2 used.

   #05152F on #E8A828 is 8.71:1.
   ============================================================ */
.phead .st-lead.st-on-dark.elementor-widget-text-editor p,
.phead .st-lead.elementor-widget-text-editor p,
.elementor-section.phead .st-lead.st-on-dark.elementor-widget-text-editor p{
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background:var(--gold);
  color:var(--on-gold);
  font-family:var(--font-display);
  font-weight:600;
  line-height:2;
  padding:.42em .72em;
  border-radius:4px;
}

/* the widget itself must not stretch, or the band inherits its width */
.phead .st-lead.elementor-widget-text-editor > .elementor-widget-container,
.elementor-section.phead .st-lead.elementor-widget-text-editor > .elementor-widget-container{
  background:none;
}

/* ============================================================
   7.12.1 - balance the lines under the gold band
   With one band per line, a ragged break is now a visible shape,
   not just ragged text. On Get Involved the natural break gave
   1102px and 204px - a long bar with a stub under it. Balanced it
   is 675 / 631. Applied to the widget, since with the p set to
   display:inline the widget is the block that owns the line boxes.
   ============================================================ */
.phead .st-lead.elementor-widget-text-editor,
.elementor-section.phead .st-lead.elementor-widget-text-editor{
  text-wrap:balance;
}

/* ============================================================
   7.13.0 - drop the gold band, keep Montserrat
   Client looked at it and wants the sub-line plain again. The band
   from 7.12.0 is off; what stays from that pass is the typeface -
   the hero is Montserrat end to end - and the balanced line break.
   Ink returns to the 7.11.1 white (6.08:1 on the Waterloo blue).

   box-decoration-break is reset to slice as well: it is inherited
   through the p and would otherwise sit there as dead state waiting
   for the next background someone puts on this element.
   ============================================================ */
.phead .st-lead.st-on-dark.elementor-widget-text-editor p,
.phead .st-lead.elementor-widget-text-editor p,
.elementor-section.phead .st-lead.st-on-dark.elementor-widget-text-editor p{
  display:block;
  background:none;
  color:rgba(255,255,255,.92);
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.6;
  padding:0;
  border-radius:0;
  -webkit-box-decoration-break:slice;
  box-decoration-break:slice;
}

/* ============================================================
   7.13.1 - phead sub-line ink set to #0A1740 (client)
   Measured, because it is a big drop: #0A1740 on the Waterloo blue
   #125BA4 is 2.53:1. The white it replaces was 6.08:1 and AA for
   text this size is 4.5:1. Client asked for it explicitly with the
   band already removed, so it ships - flagged, not silently softened.
   ============================================================ */
.phead .st-lead.st-on-dark.elementor-widget-text-editor p,
.phead .st-lead.elementor-widget-text-editor p,
.elementor-section.phead .st-lead.st-on-dark.elementor-widget-text-editor p{
  color:#0A1740;
}

/* ============================================================
   7.14.0 - READ THE FULL PLAN becomes a filled navy button
   Client: #0A1F45 ground, #E8A828 on hover.

   Scoped to .st-afterrow, not to .st-btn-outline at large. The same
   class is on EVERYTHING YOU NEED TO VOTE, which sits on the green
   band (#14532A) as a white outline - filling that one navy would
   put a dark button on a dark ground.

   Specificity is deliberately (0,4,0): enough to beat the theme's
   own .st-btn-outline rules at (0,3,0), but level with Elementor's
   per-widget CSS, which loads later and so still wins. That keeps
   this button editable from Elementor.

   White on #0A1F45 is 16.2:1; #0A1F45 on the gold hover is 7.77:1.
   ============================================================ */
.st-afterrow .st-btn-outline .elementor-button,
.st-afterrow .st-btn-outline.elementor-widget-button .elementor-button{
  background-color:#0A1F45;
  color:#ffffff;
  border-color:#0A1F45;
  box-shadow:none;
}
.st-afterrow .st-btn-outline .elementor-button:hover,
.st-afterrow .st-btn-outline .elementor-button:focus-visible,
.st-afterrow .st-btn-outline.elementor-widget-button .elementor-button:hover,
.st-afterrow .st-btn-outline.elementor-widget-button .elementor-button:focus-visible{
  background-color:#E8A828;
  color:#0A1F45;
  border-color:#E8A828;
  box-shadow:none;
}

/* ============================================================
   7.15.0 - painted-ground button rules yield to Elementor
   Client set EVERYTHING YOU NEED TO VOTE to gold in Elementor and
   nothing happened. Cause was specificity, not the setting:

     :is(.elementor-section.alt, ...) .st-btn-outline.elementor-widget-button .elementor-button
       -> :is() takes the weight of its heaviest argument, so (0,5,1)

     .elementor-229 .elementor-element.elementor-element-ID .elementor-button
       -> what Elementor emits, (0,4,0)

   The theme was outranking the editor. Every painted-ground BUTTON
   rule now uses :where() instead of :is() - identical matching, zero
   specificity from the wrapper - which drops them to (0,3,1) and puts
   Elementor back on top. Section and form rules keep :is(); only the
   button defaults were rewritten.

   Rule for this theme: a default the client may want to override in
   Elementor belongs in :where(), never :is().
   ============================================================ */

/* ============================================================
   7.18.0 - the current-page menu item, on every device
   Client supplied the values against a min-width:1025px rule and then
   asked for them on every device, so the width scope is gone:

       color      #0A1740
       background #0A1F450F   (the navy at 6%)

   GET INVOLVED is excluded with :not([href*="/get-involved"]) - it
   keeps the gold pill, and its own mobile guard from 7.11.3.

   All four ancestor variants are spelled out because the widest of
   the rules being replaced sits at (0,5,4); the short selector alone
   would lose to it.
   ============================================================ */
nav.main a.active:not([href*="/get-involved"]),
body:not(.home) header.site:not(.scrolled) nav.main a.active:not([href*="/get-involved"]),
body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a.active:not([href*="/get-involved"]),
body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a.active:not([href*="/get-involved"]){
  color:#0A1740;
  background:#0A1F450F;
}

/* ============================================================
   7.19.0 - HI SYED TAKES THE SITE BLUE
   Client: this page's hero should be the same blue as everywhere
   else, and the layout is open to change.

   Hi Syed has no separate hero band - the hero and the story were
   merged into one section (.sec.meet-top) earlier at the client's
   request. Painting the whole thing blue would put four paragraphs
   of body copy on a saturated ground. So the section takes the blue,
   and the story from WHY I'M RUNNING down sits in a white card on
   top of it: identity on blue, reading matter on white.

   The gradient is the same two layers as .st-hero-blue and .phead,
   so all four heroes are literally the same treatment. It lives in
   CSS rather than Elementor because Elementor's background control
   cannot express the ::before overlay.
   ============================================================ */
.sec.meet-top,
.elementor-section.sec.meet-top{
  background:none;
  background-color:var(--wat-blue);
  position:relative;
}
.sec.meet-top::before,
.elementor-section.sec.meet-top::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 620px at 62% 34%, var(--wat-blue-lift), transparent 64%),
    linear-gradient(146deg, var(--wat-blue-deep) 0%, var(--wat-blue) 52%, var(--wat-blue-deep) 100%);
}
.sec.meet-top > .elementor-container{position:relative;z-index:1}

/* --- the identity block reads light on the blue --- */
/* "Syed" keeps the gold script; "TIRMIZI" is the adjacent sibling
   and goes white, the same pairing as the home hero. */
.meet-top .st-h1 .elementor-heading-title{color:var(--gold)}
.meet-top .st-h1 + .st-h1 .elementor-heading-title{color:#fff}
.meet-top .st-lead p{color:rgba(255,255,255,.92)}

/* --- the story becomes one white card ---
   Four separate widgets, so the card is assembled from them: every
   piece takes the white ground and zero margin, the first rounds the
   top, the last rounds the bottom, and the vertical rhythm moves
   from margins into padding so no blue shows through the seams. */
.meet-top .st-h2,
.meet-top .st-h3,
.meet-top .st-prose{
  background:#fff;
  margin-bottom:0 !important;
}
.meet-top .st-h2{
  margin-top:30px !important;
  padding:32px 32px 12px;
  border-radius:20px 20px 0 0;
}
.meet-top .st-prose{padding:0 32px 16px}
.meet-top .st-h3{padding:8px 32px 10px}
.meet-top .elementor-widget-wrap > .st-prose:last-child{
  padding-bottom:32px;
  border-radius:0 0 20px 20px;
}

@media (max-width:1024px){
  .meet-top .st-h2{margin-top:24px !important;padding:26px 22px 10px}
  .meet-top .st-prose{padding:0 22px 14px}
  .meet-top .st-h3{padding:6px 22px 8px}
  .meet-top .elementor-widget-wrap > .st-prose:last-child{padding-bottom:26px}

  /* 7.25.4 - the card was sitting 35px in from each edge on a phone
     (20px of section container padding + 15px of widget-wrap padding),
     which left it looking like a narrow strip on the blue. Pulled back
     out to a 15px gutter. -20px is the most it can take: it lands the
     card 15px from the section edge, so nothing overflows and no
     horizontal scrollbar appears. The identity block and the collage
     keep their original inset - only the card moves.

     Negative margins alone were not enough. The widget-wrap is a flex
     row and Elementor gives each widget width:100%, so the item has a
     resolved width - negative margins only slid it left and the card
     stayed 305px. The explicit width is what actually widens it; the
     margins then re-centre it. */
  .meet-top .st-h2,
  .meet-top .st-h3,
  .meet-top .st-prose{
    width:calc(100% + 40px) !important;
    max-width:none !important;
    margin-left:-20px !important;
    margin-right:-20px !important;
  }
}

/* ============================================================
   7.19.1 - the bar over the Hi Syed blue
   That page has no .phead and no .st-hero-blue, so it fell through
   to the default dark ink - #48546E links sitting on the new blue.
   It joins the same light-bar family as the other two heroes.
   GET INVOLVED and the current-page pill are left to their own
   rules (7.11.2 and 7.18.0).
   ============================================================ */
body:has(.sec.meet-top) header.site:not(.scrolled) nav.main a:not([href*="/get-involved"]){
  color:rgba(255,255,255,.9);
}
@media (min-width:1025px){
  body:has(.sec.meet-top) header.site:not(.scrolled) nav.main a:hover:not([href*="/get-involved"]){
    color:#fff;background:rgba(255,255,255,.16);
  }
}
@media (max-width:1024px){
  body:has(.sec.meet-top) header.site:not(.scrolled) #burger{
    background:var(--navy-band);border-color:rgba(255,255,255,.92);color:#fff;
  }
  /* the dropdown panel is white, so its links keep the dark ink */
  body:has(.sec.meet-top) header.site:not(.scrolled) nav.main.open a:not([href*="/get-involved"]){
    color:var(--ink);
  }
}

/* ============================================================
   7.20.0 - THE HI SYED NAME LOCKUP
   What was wrong, all of it Elementor per-widget settings rather
   than design: the kicker was a full-width gold bar in Roboto, the
   script sat 18px in, TIRMIZI was centre-aligned with a hardcoded
   margin-top:-43px, and both names were the same 84.8px - which
   makes a script face look small next to a 900-weight sans, because
   Allura's x-height is roughly half Montserrat's. On a phone the
   -43px pulled TIRMIZI up beside the script instead of under it and
   the two read as one crammed line.

   Those settings are cleared in Elementor. The lockup lives here
   because the pieces have to move together: three sizes and one
   overlap that all scale off the same viewport, which is clamp()
   work, not four independent Elementor breakpoint values.

   The overlap is em-based and the widget carries the matching
   font-size, so the tuck scales with the name instead of being a
   fixed pixel guess at one width.
   ============================================================ */

/* the kicker hugs its text instead of banding the column */
.meet-top .st-eyebrow{background:none !important}
.meet-top .st-eyebrow .elementor-heading-title{
  display:inline-block;
  background:var(--gold);
  color:var(--on-gold);
  font-family:var(--font-display);
  font-weight:800;
  font-size:.76rem;
  letter-spacing:.16em;
  line-height:1;
  padding:10px 18px;
  border-radius:999px;
}

/* Syed - the script, deliberately larger than the name it sits on */
/* the script paints OVER the name, so the overlap reads as one
   lockup instead of TIRMIZI slicing through Allura's descender */
.meet-top .st-h1{margin-bottom:0 !important;position:relative;z-index:2}
.meet-top .st-h1 .elementor-heading-title{
  font-size:clamp(58px,9.4vw,112px);
  line-height:.92;
  letter-spacing:0;
}

/* TIRMIZI - tucked under the script's tail */
.meet-top .st-h1 + .st-h1{
  font-size:clamp(46px,7.1vw,92px);
  margin-top:-.30em !important;
  position:relative;
  z-index:1;
}
.meet-top .st-h1 + .st-h1 .elementor-heading-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:inherit;
  line-height:.86;
  letter-spacing:-.02em;
}

/* the lead gets a readable measure and room under the name */
.meet-top .st-lead{margin-top:22px !important}
.meet-top .st-lead p{max-width:46ch}

@media (max-width:1024px){
  .meet-top .st-eyebrow .elementor-heading-title{font-size:.7rem;padding:9px 15px}
  .meet-top .st-h1 + .st-h1{margin-top:-.26em !important}
  .meet-top .st-lead{margin-top:18px !important}
  .meet-top .st-lead p{max-width:none}
}

/* ============================================================
   7.20.1 - one menu style on every blue hero
   The Plan and Get Involved were showing the current page in
   #0A1740 over the blue - the 7.18.0 ink, which is right on a white
   bar and about 2.5:1 on the hero. Hi Syed already read white there,
   but only by accident: its 7.19.2 rule ties 7.18.0 on specificity
   (0,6,4) and simply sits later in the file.

   Making that deliberate and identical on all three blue heroes.
   Scoped to :not(.scrolled), so the sticky bar keeps the dark ink,
   and to desktop, because the mobile dropdown is a white panel where
   dark ink is correct - it already matches across pages there.
   ============================================================ */
@media (min-width:1025px){
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a.active:not([href*="/get-involved"]),
  body:has(.st-hero-blue) header.site:not(.scrolled) nav.main a.active:not([href*="/get-involved"]),
  body:has(.sec.meet-top) header.site:not(.scrolled) nav.main a.active:not([href*="/get-involved"]){
    color:rgba(255,255,255,.9);
    background:rgba(10,31,69,.06);
  }
}

/* ============================================================
   7.20.2 - the last two pixels of difference
   Two leftovers that stopped the four pages being byte-identical:

   1. resting links on the phead pages were rgba(255,255,255,.88)
      against .9 on the other two heroes;
   2. 7.19.1's mobile-dropdown rule had no get-involved exclusion,
      so on Hi Syed the gold pill's label came out --ink rather than
      black. Fixed on the rule itself, above.

   Neither is visible to the eye. They are here so "the same menu
   everywhere" is true when measured, not just when looked at.
   ============================================================ */
@media (min-width:1025px){
  body:has(.elementor-section.phead) header.site:not(.scrolled) nav.main a:not([href*="/get-involved"]):not(.active){
    color:rgba(255,255,255,.9);
  }
}

/* ============================================================
   7.21.0 - ONE MENU TINT, ONE STICKY INK
   Client: "kahi kch aa rha ha kahi kch" - and they were right.
   Eight separate rules in this file were setting a nav background,
   each for its own case: --green-act-soft, --red-soft, --surface-2,
   rgba(255,255,255,.14) and .16, plus the per-hero variants. Hover
   and current-page therefore looked different depending on which
   page and which breakpoint you were on.

   All of it collapses to one value:

       hover            rgba(10,31,69,.06)
       current page     rgba(10,31,69,.06)   (the same, by request)

   on every page, every width, scrolled or not. In the sticky bar the
   ink is our dark blue.

   !important is used here deliberately and is safe: nav.main is theme
   markup from header.php, not an Elementor widget, so nothing in the
   editor loses control. It replaces what would otherwise be a dozen
   ancestor-chain selectors written to out-specify rules that are
   themselves at (0,6,4).

   GET INVOLVED is excluded throughout - it keeps the gold pill.
   ============================================================ */
nav.main a:not([href*="/get-involved"]):hover,
nav.main a:not([href*="/get-involved"]).active,
nav.main a:not([href*="/get-involved"]).active:hover{
  background:rgba(10,31,69,.06) !important;
}

@media (min-width:1025px){
  header.site.scrolled nav.main a:not([href*="/get-involved"]),
  header.site.scrolled nav.main a:not([href*="/get-involved"]):hover,
  header.site.scrolled nav.main a:not([href*="/get-involved"]).active{
    color:#0A1F45 !important;
  }
}

/* ============================================================
   7.22.0 - THE HI SYED CLOSING BAND GOES LIGHT
   STAGED LOCALLY - NOT YET PUSHED (wp-admin session expired).

   Two things the client asked for on this band:
     1. kill the yellow shade - it is .band::before, a
        radial-gradient(680px 340px at 50% 130%,
        rgba(232,168,40,.26), transparent 70%) glowing up from the
        bottom edge;
     2. give the section the same scheme as the closing section on
        Get Involved, which is rgba(10,31,69,.07) with navy ink.

   Scoped to body:has(.sec.meet-top) on purpose. The identical
   .band section also sits on the home page (7b86857e) and the
   client did not ask for that one to change - an unscoped .band
   rule would have taken both.

   The background itself is set in Elementor on 6f1ecbfe; only the
   pseudo-element and the re-inking are here, because Elementor has
   no control for either.
   ============================================================ */
body:has(.sec.meet-top) .band::before,
body:has(.sec.meet-top) .elementor-section.band::before{
  content:none !important;
}

/* navy ink to match the Get Involved contact block */
body:has(.sec.meet-top) .band .st-badge p,
body:has(.sec.meet-top) .band .st-badge .elementor-heading-title{
  color:#0A1740;
  border-color:rgba(10,31,69,.3);
}
body:has(.sec.meet-top) .band .st-slogan .elementor-heading-title{
  color:#0A1F45;
}

/* primary button fills navy, secondary becomes a navy outline */
body:has(.sec.meet-top) .band .st-btn-red .elementor-button{
  background-color:#0A1F45;
  color:#ffffff;
  border-color:#0A1F45;
}
body:has(.sec.meet-top) .band .st-btn-red .elementor-button:hover{
  background-color:#E8A828;
  color:#0A1F45;
  border-color:#E8A828;
}
body:has(.sec.meet-top) .band .st-btn-ghost .elementor-button{
  background-color:transparent;
  color:#0A1F45;
  border-color:rgba(10,31,69,.35);
}
body:has(.sec.meet-top) .band .st-btn-ghost .elementor-button:hover{
  background-color:#0A1F45;
  color:#ffffff;
  border-color:#0A1F45;
}

/* ============================================================
   7.24.0 - THE PLAN CARDS GO NAVY
   Client: the four plan cards take #11569c14, and the bullets and
   the check tick take our dark blue.

   Card backgrounds and the tick colour are set in Elementor - the
   sections have a background control and the icon widgets have a
   Primary Color. Card 1 was already #11569c14; the other three were
   a green wash. The tick's !important above had to go first or the
   Primary Color would have had nothing to override.

   Two things Elementor cannot reach, so they live here:
     - the bullet dot is a ::before, drawn in CSS because the list
       items were built with no icon in the markup;
     - the tick's circle is a background on .elementor-icon, which
       the widget's colour controls do not touch in default view.
   ============================================================ */
.st-bullets.elementor-widget-icon-list .elementor-icon-list-item::before,
.st-bullets .elementor-icon-list-icon{
  background:#0A1F45;
}

.st-plan-icon .elementor-icon,
.st-plan-icon.elementor-widget-icon .elementor-icon{
  background:rgba(10,31,69,.12);
  color:#0A1F45;
}

/* ============================================================
   THE MOBILE BAR ASKS FOR A LAWN SIGN                (7.25.0)
   "How to vote" now lives on the City of Waterloo's own page and
   in the countdown strip; the bar's free half is worth more as the
   ask that actually needs a phone in hand. The link is an anchor,
   so the fixed header must not land on top of the heading it
   scrolled to - that offset is the one thing Elementor's own
   anchor control cannot set. The jump is left instant on purpose:
   smooth scrolling here would be a site-wide behaviour change for
   one button, and the jump that matters happens on page load.
   ============================================================ */
#lawn-sign{scroll-margin-top:92px}
@media (max-width:620px){#lawn-sign{scroll-margin-top:78px}}

/* Fifteen characters where eleven used to fit: let the label shrink
   before it wraps onto a second line and grows the bar. */
#mbar a{white-space:nowrap}
@media (max-width:400px){#mbar a{font-size:.66rem;letter-spacing:.02em;padding-inline:4px}}

/* ============================================================
   7.25.2 - GET A LAWN SIGN hovers gold
   The button in the floating mobile bar. Text goes to the campaign
   gold on hover; the existing ghost hover (white 12% wash, brighter
   border) is left alone - the client asked for the text colour only.

   #mbar .btn-ghost is exactly this button: the bar holds two, and
   the other one (VOLUNTEER) is .btn-red. Scoping through the bar id
   keeps it off the .btn-ghost buttons elsewhere on the site.
   ============================================================ */
#mbar .btn-ghost:hover,
#mbar .btn-ghost:focus-visible{
  color:#E8A828;
}

/* ============================================================
   7.26.0 - FLOATING SOCIAL DOCK
   Facebook and Instagram, fixed to the right edge, on every
   breakpoint. Markup is in footer.php and reads the same
   $st_socials array the footer row uses, so the URLs live in one
   place and the two cannot drift apart.

   Sits at z-index 55: under the header (60) and under the mobile
   action bar (60), so nothing it overlaps can be blocked by it.
   On phones it is lifted clear of #mbar, which occupies the bottom
   12px + its own height - 84px of clearance, plus the safe-area
   inset so it does not sit under an iPhone home indicator.
   ============================================================ */
.st-float-social{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:55;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.st-float-social a{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  color:#fff;
  box-shadow:0 4px 14px rgba(5,21,47,.28);
  transition:filter .15s, transform .15s;
}

/* 7.26.1 - each platform in its own brand colour rather than the
   campaign navy. Facebook is its flat blue; Instagram has no flat
   brand colour, its identity is the corner-anchored gradient, so
   that is reproduced rather than approximated with a single hue.
   Hover lifts and brightens instead of recolouring - a hover colour
   would overwrite the very thing that identifies each icon. */
.st-float-social a[aria-label="Facebook"]{
  background:#1877F2;
}
.st-float-social a[aria-label="Instagram"]{
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.st-float-social a:hover,
.st-float-social a:focus-visible{
  filter:brightness(1.08);
  transform:translateY(-2px);
}
.st-float-social svg{
  width:20px;
  height:20px;
  fill:currentColor;
}

@media (max-width:1024px){
  .st-float-social{
    right:12px;
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    gap:8px;
  }
  .st-float-social a{width:42px;height:42px}
  .st-float-social svg{width:18px;height:18px}
}