/* =============================================================
   Ganesh for Ward 21 — brand stylesheet
   Design language from the Uthish Ganesh brand guide:
   High Coral Red / Navy Blue / Floral White / Electric Mustard,
   hand-painted display type with hard offset shadows, brush
   script accents, marker highlights, subtle motion.
   ============================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{
  font-family:'Anton';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/anton-400.woff2') format('woff2');
}
@font-face{
  font-family:'Kaushan Script';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/kaushan-script-400.woff2') format('woff2');
}
@font-face{
  font-family:'Aileron';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/aileron-400.woff2') format('woff2');
}
@font-face{
  font-family:'Aileron';
  font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/aileron-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Aileron';
  font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/aileron-700.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --red:#FF3131;
  --red-dark:#d92222;
  --navy:#0C3F86;
  --navy-dark:#092f65;
  --navy-deep:#072451;
  --yellow:#FFCC00;
  --ink:#10203a;
  --muted:#4e5c72;
  --paper:#F7F7F7;
  --white:#ffffff;
  --line:#dfe3ea;

  --font-display:'Anton','Arial Black','Helvetica Neue',Arial,sans-serif;
  --font-script:'Kaushan Script','Brush Script MT',cursive;
  --font-body:'Aileron',Arial,'Helvetica Neue','Segoe UI',sans-serif;

  --shadow-pop:6px 6px 0 rgba(12,63,134,.14);
  --space-section:clamp(4.5rem,10vw,8rem);
  --radius:10px;
  --header-h:76px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
[hidden]{display:none !important;}

body{
  font-family:var(--font-body);
  font-size:1.125rem;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--navy);text-underline-offset:.15em;}
a:hover{color:var(--red);}

::selection{background:var(--yellow);color:var(--navy-deep);}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--yellow);
  color:var(--navy-deep);padding:.6rem 1rem;font-weight:700;z-index:200;
}
.skip-link:focus{left:8px;top:8px;}

/* ---------- Layout utilities ---------- */
.container{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
}
.container-narrow{max-width:760px;}

.section{padding-block:var(--space-section);position:relative;}
.section-tight{padding-block:clamp(3rem,6vw,4.5rem);}
.section-alt{background:var(--white);}
.section-navy{background:var(--navy-dark);color:#fff;}
/* .section-navy a{color:#fff;} */
.section-navy h2,.section-navy h3{color:#fff;}
.section-yellow{background:var(--yellow);color:var(--navy-deep);}
.section-yellow h2,.section-yellow h3{color:var(--navy-deep);}

/* G21 watermark backdrop (brand-guide tiled logo, very faint) */
.wm{position:relative;overflow:hidden;overflow:clip;}
/* .wm::before{
  content:"";
  position:absolute;inset:-8%;
  background-image:url('/assets/logo.webp');
  background-size:min(300px,38vw);
  background-repeat:round;
  opacity:.035;
  transform:rotate(-8deg);
  pointer-events:none;
} */
.section-navy.wm::before{opacity:.035;filter:brightness(0) invert(1);}
.wm > *{position:relative;}

/* ---------- Typography ---------- */
h1,h2,h3{color:var(--navy);line-height:1.05;}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.015em;
}

.display{
  transform:skew(-3deg);
  transform-origin:left bottom;
}

/* hard offset shadow — the brand's layered-print look */
.h-pop{text-shadow:.05em .05em 0 var(--yellow);}
.h-pop-red{text-shadow:.05em .05em 0 var(--red);}
.section-navy .h-pop{color:#fff;}

h1.display{font-size:clamp(2.75rem,8vw,5.5rem);margin-bottom:1.5rem;}
h2{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:1.4rem;}
h3{font-size:clamp(1.3rem,2.6vw,1.6rem);margin-bottom:.6rem;letter-spacing:.03em;}

/* brush script accent (kickers, taglines) */
.kicker{
  display:block;
  font-family:var(--font-script);
  font-size:clamp(1.35rem,2.8vw,1.75rem);
  color:var(--red);
  margin-bottom:.75rem;
  transform:rotate(-2deg);
  transform-origin:left center;
}
.section-navy .kicker{color:var(--yellow);}
.section-yellow .kicker{color:var(--red);}

.script{font-family:var(--font-script);}

/* marker highlight for slogans */
.hl{
  background:linear-gradient(104deg,transparent .35em,var(--yellow) .35em calc(100% - .35em),transparent calc(100% - .35em));
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:.08em .45em;
  color:var(--navy-deep);
  font-weight:700;
}
.hl-red{
  background:linear-gradient(104deg,transparent .35em,var(--red) .35em calc(100% - .35em),transparent calc(100% - .35em));
  color:#fff;
}
.section-navy .hl{color:var(--navy-deep);}

/* red brush underline */
.brush-u{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 4, 62 3, 117 6' stroke='%23FF3131' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left calc(100% - .14em);
  background-size:100% .16em;
  padding-bottom:.02em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
html.js .brush-u{
  background-size:0% .16em;
}
html.js .brush-u.is-in{
  animation:brush-sweep .75s cubic-bezier(.22,.61,.36,1) .2s both;
}
@keyframes brush-sweep{
  from{background-size:0% .16em;}
  to{background-size:100% .16em;}
}
.brush-u-yellow{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 4, 62 3, 117 6' stroke='%23FFCC00' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lead{
  font-size:clamp(1.2rem,2.4vw,1.45rem);
  line-height:1.55;
  color:var(--ink);
  max-width:34em;
}
.section-navy .lead{color:rgba(255,255,255,.94);}

.prose{max-width:65ch;font-size:1.125rem;}
.prose p{margin-bottom:1.15rem;}
.prose ul{margin:0 0 1.25rem;padding-left:0;list-style:none;}
.prose li{
  padding-left:1.5rem;
  position:relative;
  margin-bottom:.9rem;
}
.prose li::before{
  content:"";
  position:absolute;left:0;top:.52em;
  width:.6rem;height:.6rem;
  background:var(--red);
  transform:rotate(45deg);
}
.prose strong{color:var(--navy);}
.section-navy .prose strong{color:var(--yellow);}

.muted{color:var(--muted);}
.small{font-size:.9rem;}

/* big pull-quote slogan */
.pullquote{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.2;
  color:var(--navy);
  max-width:22em;
  margin-block:2.25rem;
  transform:skew(-3deg);
}
.section-navy .pullquote{color:#fff;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1.05rem;
  line-height:1;
  text-decoration:none;
  text-align:center;
  padding:1rem 1.7rem;
  border-radius:8px;
  border:2.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
.btn-primary{
  background:var(--red);color:#fff;
  box-shadow:4px 4px 0 var(--navy);
}
.btn-primary:hover{background:var(--red-dark);color:#fff;}
.btn-secondary{
  background:var(--white);color:var(--navy);border-color:var(--navy);
  box-shadow:4px 4px 0 var(--yellow);
}
.btn-secondary:hover{background:var(--navy);color:#fff;}
.btn-navy{
  background:var(--navy);color:#fff;
  box-shadow:4px 4px 0 var(--yellow);
}
.btn-navy:hover{background:var(--navy-dark);color:#fff;}
.btn:hover{transform:translate(-2px,-2px);}
.btn-primary:hover{box-shadow:6px 6px 0 var(--navy);}
.btn-secondary:hover{box-shadow:6px 6px 0 var(--yellow);}
.btn-navy:hover{box-shadow:6px 6px 0 var(--yellow);}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(9,47,101,.4);}

.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.section-yellow .btn:focus-visible,
.btn-secondary:focus-visible{outline-color:var(--navy);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
/* .btn-large{font-size:1.2rem;padding:1.15rem 2.2rem;} */

.cta-row{
  display:flex;flex-wrap:wrap;gap:1.1rem;
  margin-top:2.25rem;
  align-items:center;
}

.text-link{
  font-weight:700;color:var(--navy);text-decoration:none;
  border-bottom:3px solid var(--yellow);
  padding-bottom:.1em;
  font-size:1.1rem;
}
.text-link:hover{color:var(--red);border-bottom-color:var(--red);}

/* ---------- Header / nav ---------- */
.site-header{
  background:var(--white);
  border-bottom:3px solid var(--navy);
  position:sticky;top:0;z-index:100;
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{
  box-shadow:0 6px 24px rgba(9,47,101,.14);
}
.header-inner{
  display:flex;align-items:center;gap:1.5rem;
  padding-block:.7rem;
}
.wordmark{
  display:block;line-height:0;
  margin-right:auto;
}
.wordmark img{
  height:56px;width:auto;
  transition:height .25s ease;
}
.site-header.is-scrolled .wordmark img{height:44px;}
.wordmark:hover img{filter:brightness(1.06);}
.wordmark:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;}

.nav-toggle{
  display:none;
  background:var(--white);border:2.5px solid var(--navy);border-radius:8px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;
  font-size:.9rem;
  color:var(--navy);
  padding:.55rem .95rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--yellow);
}
.nav-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}

.site-nav{display:flex;align-items:center;gap:1.6rem;}
.site-nav ul{
  display:flex;align-items:center;gap:1.35rem;
  list-style:none;
}
.site-nav ul a{
  text-decoration:none;color:var(--ink);
  font-weight:700;font-size:1rem;
  padding-block:.3rem;
  border-bottom:3px solid transparent;
}
.site-nav ul a:hover{color:var(--red);border-bottom-color:var(--red);}
.site-nav ul a[aria-current="page"]{
  color:var(--navy);
  border-bottom-color:var(--yellow);
}
.nav-actions{display:flex;align-items:center;gap:.9rem;}
.nav-actions .btn{padding:.65rem 1.15rem;font-size:.95rem;box-shadow:3px 3px 0 var(--navy);}
.nav-actions .btn-secondary{box-shadow:3px 3px 0 var(--yellow);}

@media (max-width:1000px){
  .nav-toggle{display:inline-block;}
  .site-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--white);
    border-bottom:3px solid var(--navy);
    flex-direction:column;align-items:stretch;gap:0;
    padding:1rem clamp(1.25rem,5vw,2.5rem) 1.5rem;
  }
  .site-nav.is-open{display:flex;}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  .site-nav ul a{display:block;padding:.85rem 0;font-size:1.15rem;border-bottom:none;}
  .site-nav ul a[aria-current="page"]{color:var(--red);}
  .nav-actions{margin-top:1rem;flex-direction:column;align-items:stretch;}
  .nav-actions .btn{padding:.95rem 1.1rem;font-size:1.05rem;}
}

/* ---------- Hero (home) ---------- */
.hero{
  padding-block:clamp(3rem,7vw,5.5rem) 0;
  background:var(--yellow);
  overflow:clip;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
}
.hero-copy{padding-bottom:clamp(2.5rem,6vw,4.5rem);}
.hero h1{
  margin-bottom:1.5rem;
  font-size:clamp(2.9rem,7.6vw,5.6rem);
}
.hero h1 .line{display:block;}
.hero h1 .line-accent{color:var(--red);text-shadow:.05em .05em 0 var(--yellow);}
.hero .lead{margin-bottom:0;}

.hero-figure{
  position:relative;
  align-self:end;
  margin-inline:auto;
  width:max(100%,450px);
}
.hero-figure::before{
  content:"";
  position:absolute;
  inset:auto -6% -18% -6%;
  height:88%;
  background:var(--red);
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
  box-shadow:10px 10px 0 var(--navy);
}
.hero-photo{
  position:relative;
  width:100%;
  filter:drop-shadow(0 18px 32px rgba(9,47,101,.28));
}

/* ---------- Hero intro (load animation) ----------
   Opt-in via data-hero-intro on the hero section; reveal.js splits the
   h1 into .hi-word/.hi-letter spans and adds .is-intro. Without JS (or
   with reduced motion) none of these classes exist, so the hero simply
   renders as-is. Letter stagger (35ms) is mirrored in reveal.js. */
.hi-word{display:inline-block;}
.hi-letter{
  display:inline-block;
  opacity:0;
  transform:translateY(.55em);
}
.hero.is-intro .hi-letter{
  animation:hero-letter-in .55s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i) * 35ms);
}
.hero.is-intro .hero-figure::before{
  transform-origin:50% 100%;
  animation:hero-arch-in .55s cubic-bezier(.22,.61,.36,1) .45s both;
}
.hero.is-intro .hero-photo{
  animation:hero-photo-in .65s cubic-bezier(.22,.61,.36,1) .65s both;
}
@keyframes hero-letter-in{
  from{opacity:0;transform:translateY(.55em);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes hero-arch-in{
  from{opacity:0;transform:scale(.85);}
  to{opacity:1;transform:scale(1);}
}
@keyframes hero-photo-in{
  from{opacity:0;transform:translateY(42px);}
  to{opacity:1;transform:translateY(0);}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{padding-bottom:0;order:1;}
  .hero-figure{order:2;width:min(78%,360px);margin-top:2.5rem;}
  .hero .cta-row{margin-bottom:0;}
}

/* red marquee tagline band */
.tagline-band{
  display: none;
  background:var(--red);
  border-block:3px solid var(--navy);
  overflow:hidden;
  padding-block:.85rem;
}
.tagline-track{
  display:flex;gap:3rem;
  width:max-content;
  animation:band-scroll 28s linear infinite;
}
.tagline-track span{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  font-size:clamp(1.05rem,2.2vw,1.4rem);
  color:#fff;
}
.tagline-track .dot{color:var(--yellow);}
@keyframes band-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Page hero (interior pages) */
.page-hero{
  padding-block:clamp(3.5rem,8vw,5.5rem) clamp(1rem,3vw,2rem);
  overflow:clip;
}
.page-hero h1{margin-bottom:1.25rem;}
.page-hero .lead{color:var(--ink);}

/* ---------- Pillars / cards (home) ---------- */
.pillars{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,3vw,2.25rem);
  margin-top:3rem;
}
.pillar{
  background:var(--white);
  border:2.5px solid var(--navy);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  padding:clamp(1.5rem,3vw,2rem);
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pillar:hover{
  transform:translateY(-4px);
  box-shadow:8px 10px 0 rgba(12,63,134,.16);
}
.pillar .pillar-num{
  display:block;
  font-family:var(--font-display);
  font-size:2.4rem;
  line-height:1;
  color:var(--red);
  text-shadow:3px 3px 0 var(--yellow);
  margin-bottom:.9rem;
  transform:skew(-3deg);
}
.pillar h3{margin-bottom:.75rem;}
.pillar > p{font-size:1.02rem;margin-bottom:1.1rem;}
.pillar ul{list-style:none;font-size:1rem;}
.pillar li{padding-left:1.35rem;position:relative;margin-bottom:.8rem;}
.pillar li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:.55rem;height:.55rem;background:var(--red);transform:rotate(45deg);
}
.pillar strong{color:var(--navy);}


/* ---------- Accordions ---------- */
.acc{
  border:2.5px solid var(--navy);
  border-radius:var(--radius);
  background:var(--white);
  margin-top:auto;
}
.acc + .acc{margin-top:1rem;}
.acc summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1rem;
  color:var(--navy);
  padding:.85rem 1.1rem;
  user-select:none;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{
  content:"+";
  font-family:var(--font-display);
  font-size:1.5rem;
  line-height:1;
  color:var(--red);
  transition:transform .25s ease;
  flex-shrink:0;
}
.acc[open] summary::after{transform:rotate(45deg);}
.acc summary:hover{color:var(--red);}
.acc summary:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px;border-radius:calc(var(--radius) - 3px);}
.acc-body{
  padding:.25rem 1.1rem 1.2rem;
}
.acc[open] .acc-body{animation:acc-in .32s ease both;}
@keyframes acc-in{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}

/* bigger accordion variant (platform page) */
.acc-lg summary{font-size:1.15rem;padding:1.1rem 1.3rem;}
.acc-lg .acc-body{padding:.35rem 1.3rem 1.4rem;}

/* ---------- Platform page ---------- */
.subnav{
  position:sticky;
  top:calc(var(--header-h) - 6px);
  z-index:90;
  background:var(--paper);
  padding-block:.8rem;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.subnav ul{
  display:flex;gap:.6rem;list-style:none;
  width:max-content;
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
}
.subnav a{
  display:inline-block;
  white-space:nowrap;
  text-decoration:none;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.85rem;
  color:var(--navy);
  border:2px solid var(--navy);
  border-radius:999px;
  padding:.4rem .95rem;
  background:var(--white);
  transition:background-color .15s ease,color .15s ease,transform .15s ease;
}
.subnav a:hover{background:var(--navy);color:#fff;transform:translateY(-1px);}

.platform-item{
  padding-block:clamp(3rem,7vw,4.75rem);
  border-top:3px solid var(--navy);
  scroll-margin-top:8.5rem;
}
.platform-item:first-of-type{border-top:0;padding-top:1.5rem;}
.platform-item .platform-num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(3rem,7vw,4.5rem);
  line-height:1;
  color:var(--red);
  text-shadow:4px 4px 0 var(--yellow);
  transform:skew(-3deg);
  margin-bottom:.5rem;
}
.platform-item h2{margin-bottom:1.25rem;}
.platform-first-100{
  display:inline-block;
  margin-top:1.25rem;
  background:var(--yellow);
  color:var(--navy-deep);
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1rem;
  padding:.65rem 1.1rem;
  border:2.5px solid var(--navy);
  border-radius:8px;
  box-shadow:4px 4px 0 var(--navy);
  transform:rotate(-2deg);
}

/* ---------- Stats (Know Your Ward) ---------- */
.stats-table{
  width:100%;
  border-collapse:collapse;
  font-size:1rem;
}
.stats-table caption{
  text-align:left;font-size:.9rem;color:var(--muted);
  margin-bottom:.75rem;
}
.stats-table th,.stats-table td{
  text-align:left;
  padding:.8rem .5rem;
  border-bottom:1px solid var(--line);
}
.stats-table thead th{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:3px solid var(--navy);
}
.stats-table td.num{font-weight:700;color:var(--navy);}

.stat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,2.5rem);
  margin-block:2.75rem;
}
.stat .stat-value{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.6rem,6vw,4rem);
  color:var(--navy);
  text-shadow:.06em .06em 0 var(--yellow);
  line-height:1;
  margin-bottom:.5rem;
  transform:skew(-3deg);
}
.section-navy .stat .stat-value{color:#fff;}
.stat .stat-label{font-size:1rem;color:var(--muted);max-width:22ch;}
.section-navy .stat .stat-label{color:rgba(255,255,255,.85);}
@media (max-width:680px){
  .stat-grid{grid-template-columns:1fr 1fr;}
}

.lang-list{
  display:flex;flex-wrap:wrap;gap:.7rem;
  list-style:none;margin-top:1.5rem;
}
.lang-list li{
  background:var(--white);
  border:2px solid var(--navy);
  border-radius:999px;
  font-size:.95rem;
  padding:.45rem 1.05rem;
  box-shadow:3px 3px 0 rgba(12,63,134,.12);
}
.lang-list li strong{color:var(--navy);}

/* ---------- Ward map ---------- */
.ward-map{
  height:clamp(340px,55vw,540px);
  border-radius:var(--radius);
  border:2.5px solid var(--navy);
  box-shadow:var(--shadow-pop);
  z-index:0;
}
.ward-map-note{margin-top:1rem;margin-bottom:0;}
.leaflet-tooltip.ward-landmark{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.72rem;
  color:var(--navy);
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:none;
  padding:.15rem .45rem;
}

.postal-lookup{
  background:var(--white);
  border:2.5px solid var(--navy);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  padding:clamp(1.5rem,4vw,2.25rem);
  margin-bottom:2.75rem;
  max-width:760px;
}
.postal-lookup h3{margin-bottom:.4rem;}
.postal-lookup p{font-size:1rem;color:var(--muted);margin-bottom:1.1rem;}
.postal-lookup-row{display:flex;gap:.8rem;flex-wrap:wrap;}
.postal-lookup-row input{
  flex:1;min-width:180px;
  text-transform:uppercase;
}
.postal-result{margin-top:1.25rem;}
.postal-result[data-state="yes"]{color:var(--navy);}
.postal-result .cta-row{margin-top:1rem;}

/* ---------- Forms (shared) ---------- */
fieldset{border:none;margin-bottom:1.9rem;}
legend{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1rem;
  color:var(--navy);
  margin-bottom:1.1rem;
}

.field{margin-bottom:1.2rem;}
.field label{
  display:block;font-weight:700;font-size:.98rem;
  color:var(--ink);margin-bottom:.4rem;
}
.field label .optional{font-weight:400;color:var(--muted);}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field textarea,
.postal-lookup-row input{
  width:100%;
  border:2px solid #b8c2d2;
  border-radius:8px;
  font-family:var(--font-body);
  font-size:1.05rem;
  padding:.85rem 1rem;
  color:var(--ink);
  background:var(--white);
  transition:border-color .15s ease;
}
.field textarea{min-height:9rem;resize:vertical;}
.field input:focus,.field textarea:focus,.postal-lookup-row input:focus{
  outline:3px solid var(--yellow);outline-offset:0;
  border-color:var(--navy);
}
.field input[readonly]{background:var(--paper);color:var(--muted);}

.field-row{
  display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:1rem;
}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media (max-width:680px){
  .field-row,.field-row-2{grid-template-columns:1fr;}
}

.checkbox-field{
  display:flex;gap:.75rem;align-items:flex-start;
  margin-bottom:.85rem;
}
.checkbox-field input[type="checkbox"]{
  width:1.3rem;height:1.3rem;flex-shrink:0;margin-top:.18rem;
  accent-color:var(--navy);cursor:pointer;
}
.checkbox-field input[type="checkbox"]:focus-visible{
  outline:3px solid var(--yellow);outline-offset:2px;
}
.checkbox-field label{
  font-size:1rem;line-height:1.5;cursor:pointer;
}

.hint{font-size:.92rem;color:var(--muted);line-height:1.55;margin-bottom:1rem;}
.field .hint{margin-top:.35rem;margin-bottom:0;}

.field-error{
  font-weight:700;font-size:.95rem;
  color:var(--red-dark);
  margin-top:.6rem;
}
.status{
  min-height:1.6em;margin-top:1rem;
  font-weight:700;font-size:1rem;
}
.status.is-success{color:var(--navy);}
.status.is-error{color:var(--red-dark);}

.form-card{
  background:var(--white);
  border:2.5px solid var(--navy);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  padding:clamp(1.6rem,4vw,2.6rem);
}

.form-success{
  background:var(--white);
  border:2.5px solid var(--navy);
  border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--yellow);
  padding:clamp(1.5rem,4vw,2.25rem);
}
.form-success h3{margin-bottom:.6rem;}
.form-success:focus{outline:3px solid var(--yellow);outline-offset:2px;}

/* Radio pill group (frequency, sign type) */
.pill-group{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:440px;}
.pill-group input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;}
.pill-group label{
  display:flex;align-items:center;justify-content:center;
  border:2px solid #b8c2d2;border-radius:8px;
  font-weight:700;font-size:1.02rem;color:var(--ink);
  padding:.9rem .5rem;cursor:pointer;user-select:none;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.pill-group label:hover{border-color:var(--navy);}
.pill-group input:checked + label{
  background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:3px 3px 0 var(--yellow);
}
.pill-group input:focus-visible + label{
  outline:3px solid var(--yellow);outline-offset:2px;
}

/* ---------- Donate page ---------- */
.donate-layout{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:start;
}
@media (max-width:920px){
  .donate-layout{grid-template-columns:1fr;}
}

.rebate-note{
  font-size:.98rem;line-height:1.55;
  color:var(--navy-deep);
  background:var(--yellow);
  border-radius:8px;
  border:2px solid var(--navy);
  padding:.85rem 1.05rem;
  margin-bottom:1.2rem;
}

.amounts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
  margin-bottom:1.1rem;
}
@media (max-width:420px){
  .amounts{grid-template-columns:repeat(2,1fr);}
}
.amount-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;
  background:var(--white);color:var(--navy);
  font-family:var(--font-body);font-weight:700;
  font-size:1.2rem;
  padding:.9rem .4rem;cursor:pointer;
  border:2px solid #b8c2d2;border-radius:8px;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
  user-select:none;
}
.amount-btn:hover{border-color:var(--navy);}
.amount-btn[aria-pressed="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:3px 3px 0 var(--yellow);
}
.amount-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}
.amount-btn .amount-rebate{
  font-weight:400;font-size:.68rem;line-height:1.25;
  color:var(--muted);text-align:center;
}
.amount-btn[aria-pressed="true"] .amount-rebate{color:rgba(255,255,255,.88);}

.custom-row > label{
  display:block;font-weight:700;font-size:.98rem;margin-bottom:.4rem;
}
.custom-wrap{display:flex;align-items:stretch;max-width:320px;}
.custom-wrap .cur{
  display:flex;align-items:center;
  border:2px solid #b8c2d2;border-right:0;
  border-radius:8px 0 0 8px;
  background:var(--paper);color:var(--navy);
  font-weight:700;padding:0 .85rem;
}
.custom-wrap input{
  flex:1;min-width:0;
  border:2px solid #b8c2d2;
  border-radius:0 8px 8px 0;
  font-family:var(--font-body);font-weight:700;font-size:1.1rem;
  padding:.8rem .9rem;color:var(--ink);background:var(--white);
}
.custom-wrap input:focus{
  outline:3px solid var(--yellow);outline-offset:0;
  border-color:var(--navy);
}
.custom-rebate-hint{
  min-height:1.2em;margin-top:.5rem;
  font-size:.92rem;font-weight:700;color:var(--navy);
}

.payment-element:not(:empty){
  padding:1.1rem;
  border:2px solid var(--line);
  border-radius:8px;
}
.payment-placeholder{margin-bottom:0;}

.form-actions{display:flex;flex-direction:column;gap:.9rem;}
.btn-continue{width:100%;}
.btn-donate{width:100%;font-size:1.25rem;padding:1.1rem;}

.fineprint{
  margin-top:1.5rem;font-size:.85rem;color:var(--muted);line-height:1.6;
}

.donate-success{
  background:var(--white);
  border:2.5px solid var(--navy);
  border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--yellow);
  padding:1.6rem;margin-bottom:1.5rem;
}
.donate-success h3{margin-bottom:.5rem;}
.donate-success:focus{outline:3px solid var(--yellow);outline-offset:2px;}

.step-in{animation:step-in .5s cubic-bezier(.22,1,.36,1) both;}
@keyframes step-in{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

.dollar-list{list-style:none;margin-top:1.75rem;}
.dollar-list li{
  border-top:3px solid var(--navy);
  padding-block:1.2rem;
  font-size:1.05rem;
}
.dollar-list li:last-child{border-bottom:3px solid var(--navy);}
.dollar-list strong{
  color:var(--navy);
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:1.1rem;
}

/* ---------- Newsletter ---------- */
.newsletter-fields{
  display:grid;grid-template-columns:1.4fr 1fr auto;gap:1rem;
  align-items:end;
  max-width:860px;
}
.newsletter-fields .field{margin-bottom:0;}
@media (max-width:820px){
  .newsletter-fields{grid-template-columns:1fr;align-items:stretch;}
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:auto;
  background:var(--navy-dark);
  color:#fff;
  padding-block:clamp(3.5rem,7vw,5rem);
  border-top:6px solid var(--red);
}
.site-footer .footer-tagline{
  font-family:var(--font-script);
  font-size:clamp(1.9rem,4.5vw,2.8rem);
  color:var(--yellow);
  transform:rotate(-2deg);
  transform-origin:left center;
  margin-bottom:.75rem;
}
.site-footer .footer-pillars{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(1rem,2.2vw,1.25rem);
  color:#fff;
  margin-bottom:2.25rem;
}
.footer-nav{margin-bottom:2.25rem;}
.footer-nav ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
}
.footer-nav a{
  color:#fff;text-decoration:none;font-size:.95rem;font-weight:700;
  border-bottom:2px solid transparent;
}
.footer-nav a:hover{color:var(--yellow);border-bottom-color:var(--yellow);}
.footer-legal{
  font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.75);
  max-width:70ch;
  margin-bottom:.9rem;
}
.footer-legal:last-child{margin-bottom:0;}

/* ---------- Scroll reveal ---------- */
html.js [data-reveal]{
  opacity:0;
  translate:0 20px;
  transition:opacity .65s ease,translate .65s ease;
}
html.js [data-reveal].is-in{
  opacity:1;
  translate:0 0;
}
html.js [data-reveal="2"].is-in{transition-delay:.12s;}
html.js [data-reveal="3"].is-in{transition-delay:.24s;}

/* ---------- Misc ---------- */
.placeholder-note{
  background:#fff8dd;
  border:1px dashed #d8c25a;
  border-radius:6px;
  color:#6b5b0e;
  font-size:.85rem;
  padding:.4rem .7rem;
  display:inline-block;
}

.mt-0{margin-top:0;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mb-2{margin-bottom:2rem;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .step-in{animation:none;}
  .acc[open] .acc-body{animation:none;}
  .tagline-track{animation:none;flex-wrap:wrap;width:auto;}
  .tagline-track [aria-hidden="true"]{display:none;}
  .btn,.amount-btn,.pill-group label,.pillar,.site-header,.wordmark img,.subnav a{transition:none;}
  .btn:hover,.pillar:hover{transform:none;}
  .hi-letter{opacity:1;transform:none;animation:none;}
  .hero.is-intro .hero-figure::before,
  .hero.is-intro .hero-photo{animation:none;}
  html.js [data-reveal]{opacity:1;translate:none;transition:none;}
  html.js .brush-u{background-size:100% .16em;animation:none;}
}