/* =========================================================
   Ryan Elijah for Congress — Florida's 7th District (2026)
   General election. Framework: Bilirakis CD12 → Bostock SB D6
   → Rutland HD60 lineage, restyled to the Elijah brand.
   Palette sampled from elijahforcongress.com:
   navy #004B93 · red #AB1919 · ink #272727
   Type: Montserrat throughout (matches the live site).
   ========================================================= */

:root {
  --navy:      #004B93;
  --navy-dark: #003A73;
  --navy-deep: #002B55;
  --red:       #AB1919;
  --red-dark:  #8C1313;
  --offwhite:  #FFFFFF;
  --bone:      #FFFFFF;
  --mist:      #EEF2F7;
  --ink:       #272727;
  --slate:     #55606E;
  --rule:      #D8DEE6;
  --max:       1100px;
  --gutter:    clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

h1, h2, .display {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--navy);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h1, .display {
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  margin: 0 0 0.4em;
}

h2 {
  font-weight: 800;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.18;
  margin: 0 0 0.5em;
}

h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; }

p { margin: 0 0 1em; font-weight: 300; }

.lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--slate);
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

section { padding: clamp(56px, 8vw, 100px) 0; }

.section-navy { background: var(--navy); color: #fff; }
.section-navy h1, .section-navy h2 { color: #fff; }
.section-navy .lede { color: rgba(255,255,255,.88); }
.section-offwhite { background: var(--offwhite); }
.section-red { background: var(--red); color: #fff; }
.section-red h1, .section-red h2 { color: #fff; }
.section-red .lede { color: rgba(255,255,255,.9); }

.section-pattern {
  background-color: #fff;
  background-image: radial-gradient(rgba(4, 46, 101, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}
.section-white { background: #fff; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand-logo { height: 64px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; }

.nav a {
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
}
.nav a:hover { color: var(--red); }

/* Mobile menu toggle (CSS-only checkbox hack) — hidden on desktop */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-toggle-label { display: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-dark); color: #fff; }

.btn-ghost-white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-ghost-white:hover { background: rgba(255,255,255,.12); color: #fff; }

.nav .btn { padding: 10px 22px; font-size: 15px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(86vh, 720px);
  padding: clamp(72px, 10vw, 130px) 0;
  background:
    linear-gradient(95deg, rgba(2,21,48,.86) 0%, rgba(2,21,48,.62) 34%, rgba(2,21,48,.18) 58%, rgba(4,46,101,0) 100%),
    url("../img/hero-ryan.webp") 72% center / cover no-repeat;
  color: #fff;
  text-align: left;
}

.hero-grid {
  position: relative;
}

.hero-copy {
  max-width: 56%;
}

.hero h1 { font-size: clamp(38px, 4.8vw, 58px); }

.hero h1 { color: #fff; margin-bottom: 0.3em; }

.hero .lede { max-width: 640px; color: #fff; }

.hero-logo {
  display: block;
  margin: 0 0 34px;
  height: clamp(110px, 14vw, 160px);
  width: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  justify-content: flex-start;
}

/* ---------- Full-width photo bands ---------- */

.photo-band {
  width: 100%;
  height: clamp(320px, 46vw, 620px);
  overflow: hidden;
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-band.pos-family img { object-position: center 32%; }
.photo-band.pos-bench  img { object-position: center 58%; }

/* ---------- Announcement ---------- */

.announce-body {
  max-width: 820px;
  margin: 0 auto;
}

.announce-date {
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--slate);
  margin-bottom: 14px;
  text-align: center;
}

.announce-title { text-align: center; }

.pull-quote {
  margin: 28px 0;
  padding: 4px 0;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--navy);
}

.pull-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
}

.check-back {
  text-align: center;
  margin: clamp(36px, 5vw, 60px) 0 0;
}

/* ---------- Endorsements ---------- */

.endorse-heading { text-align: center; margin-bottom: clamp(24px, 3.5vw, 38px); }

.endorser-list {
  max-width: 640px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  text-align: center;
}

.endorser {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.endorser:first-child { border-top: 1px solid rgba(255,255,255,.22); }

.endorser .e-name {
  display: block;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}

.endorser .e-office {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-top: 4px;
}

.endorse-cta { text-align: center; margin-top: clamp(28px, 4vw, 42px); }

/* ---------- CTA strip ---------- */

.cta-strip { text-align: center; }

.cta-strip .hero-actions { justify-content: center; }

/* ---------- Form ---------- */

.form-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(24px, 4vw, 44px);
  max-width: 720px;
  margin: 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full { grid-column: 1 / -1; }

.form-card label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bone);
}

.form-card input:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.form-card .btn { width: 100%; margin-top: 18px; }

.consent-block {
  margin-top: 18px;
  padding: 16px;
  background: var(--offwhite);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.consent-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.consent-checkbox input { margin-top: 3px; }

.consent-fineprint {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--slate);
}

.volunteer-block { margin-top: 18px; }

.volunteer-block .vol-heading {
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin: 0 0 10px;
}

.volunteer-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

.volunteer-check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  cursor: pointer;
}
.volunteer-check input { margin: 0; flex: none; }

.embed-note {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: 13.5px;
  color: var(--slate);
  text-align: center;
}

.thanks-panel { display: none; text-align: center; padding: 30px 0 0; }
.thanks-panel.show { display: block; }

/* ---------- Signup split layout ---------- */

/* (removed legacy #signup padding reset — combined section uses .intro-band padding) */

.signup-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.signup-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 56px) clamp(48px, 6vw, 80px) var(--gutter);
}

.signup-title { margin-bottom: .25em; }
.signup-lede { max-width: 520px; margin-bottom: 28px; }

.signup-left .form-card { margin: 0; max-width: none; width: 100%; }

.signup-image-wrap {
  position: sticky;
  top: 96px; /* clears the sticky header */
  align-self: start;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 40px) clamp(40px, 6vw, 80px) 0;
}

/* Whole photo always shown — the subject is never
   cropped at any breakpoint. */
.signup-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ---------- Social / Follow ---------- */

.social-section { text-align: center; }
.social-section .lede { max-width: 540px; margin: 0 auto; }

.social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(22px, 3vw, 32px);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  color: var(--navy);
  transition: background .15s ease, color .15s ease;
}
.social-link:hover { background: var(--navy); color: #fff; }
.social-link svg { width: 26px; height: 26px; display: block; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.85);
  padding: 44px 0 36px;
  font-size: 14.5px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.site-footer a { color: #fff; }
.site-footer a:hover { color: rgba(255,255,255,.7); }

.footer-legal-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.disclaimer-box {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
}

.disclaimer-box .paid-for {
  display: block;
  font-weight: 700;
  color: #fff;
}

/* ---------- Page hero banner (secondary pages) ---------- */

.page-hero {
  position: relative;
  padding: clamp(60px, 9vw, 110px) 0;
  background:
    linear-gradient(rgba(0,27,55,.62), rgba(0,75,147,.70)),
    url("../img/photo-rec-meeting.jpg") center 40% / cover no-repeat;
  color: #fff;
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: .22em; }
.page-hero .lede { color: rgba(255,255,255,.9); max-width: 620px; margin: 0 auto; }

/* ---------- Endorsement form ---------- */

.endorse-statement {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(22px, 2.7vw, 31px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
  text-align: center;
  margin: 0 0 10px;
}

.endorse-consent {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 26px;
}

.sig-field { margin-top: 4px; }

.sig-pad-wrap {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bone);
  overflow: hidden;
}

.sig-pad {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
}

.sig-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--slate);
  font-size: 14px;
  font-style: italic;
  pointer-events: none;
}

.sig-pad-wrap.signed .sig-hint { display: none; }

.sig-clear {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--red);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.sig-clear:hover { color: var(--red-dark); }

/* ---------- Legal pages ---------- */

.legal-body { background: #fff; }
.legal-body h2 { font-size: clamp(22px, 2.4vw, 30px); margin-top: 1.6em; }
.legal-body ul, .legal-body ol { margin: 0 0 1em; padding-left: 24px; }
.legal-body li { margin-bottom: .5em; }
.legal-body .updated { margin-top: 2em; color: var(--slate); font-size: 14.5px; }

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .hero {
    min-height: 0;
    background:
      linear-gradient(rgba(2,21,48,.68), rgba(2,21,48,.82)),
      url("../img/hero-ryan.webp") 70% center / cover no-repeat;
  }
  .hero-copy { max-width: 100%; }
}

@media (max-width: 700px) {
  .brand-logo { height: 52px; }
  .form-grid { grid-template-columns: 1fr; }
  .volunteer-options { grid-template-columns: 1fr; }

  /* Hamburger menu */
  .site-header .wrap { flex-wrap: wrap; }

  .nav-toggle-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: var(--navy);
  }
  .nav-bars { position: relative; }
  .nav-bars,
  .nav-bars::before,
  .nav-bars::after {
    content: "";
    display: block;
    width: 24px;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, background .2s ease;
  }
  .nav-bars::before { position: absolute; left: 0; top: -7px; }
  .nav-bars::after  { position: absolute; left: 0; top: 7px; }

  .nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    border-top: 1px solid var(--rule);
  }
  .nav-toggle:checked ~ .nav { display: flex; }

  .nav a:not(.btn) {
    padding: 13px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--rule);
  }
  .nav .btn { margin-top: 14px; text-align: center; }

  /* Hamburger morphs to an X when open */
  .nav-toggle:checked ~ .nav-toggle-label .nav-bars { background: transparent; }
  .nav-toggle:checked ~ .nav-toggle-label .nav-bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label .nav-bars::after  { top: 0; transform: rotate(-45deg); }
}

@media (max-width: 820px) {
  .signup-layout { grid-template-columns: 1fr; max-width: 640px; min-height: 0; }
  .signup-left { padding: clamp(40px, 8vw, 64px) var(--gutter) 0; }
  .signup-image-wrap { position: static; padding: clamp(28px, 6vw, 44px) var(--gutter) clamp(40px, 8vw, 64px); }
  .signup-image { height: auto; }
}

/* =========================================================
   FULL SITE COMPONENTS (v1) — added for multi-page build.
   Home, About, Issues, News, Vote, Contact.
   ========================================================= */

/* ---------- Small section eyebrow label ---------- */
.eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
}
.section-navy .eyebrow, .section-red .eyebrow { color: #fff; opacity: .9; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(30px,4vw,52px); }
.section-head .lede { margin: 0 auto; }

/* ---------- Tagline / spine band ---------- */
.tagline-band { text-align: center; }
.tagline-band .display {
  font-size: clamp(30px, 4.4vw, 52px);
  max-width: 900px;
  margin: 0 auto;
}
.tagline-band .kicker {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.3vw, 14px);
  color: rgba(255,255,255,.82);
  margin: 18px 0 0;
}

/* ---------- About preview (home) ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.about-portrait img { border-radius: 10px; width: 100%; }
.about-copy h2 { margin-bottom: .3em; }
.about-copy .btn { margin-top: 10px; }
.signature-quote {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  color: var(--navy);
  border-left: 3px solid var(--red);
  padding-left: 20px;
  margin: 0 0 22px;
}
.signature-quote cite {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 10px;
}

/* ---------- Stat band ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 40px);
  text-align: center;
}
.stat .stat-num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  color: #fff;
}
.stat .stat-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
}
.section-white .stat .stat-num { color: var(--navy); }
.section-white .stat .stat-label { color: var(--slate); }

/* ---------- Issues grid (home) ---------- */
.issue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.issue-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.issue-card:hover { transform: translateY(-3px); border-color: var(--navy); }
.issue-card .issue-photo { aspect-ratio: 3 / 2; overflow: hidden; }
.issue-card .issue-photo img { width: 100%; height: 100%; object-fit: cover; }
.issue-card .issue-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.issue-card h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 8px;
}
.issue-card p { font-size: 15.5px; margin: 0 0 16px; }
.issue-card .issue-link {
  margin-top: auto;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--red);
}
.issue-card .issue-link:hover { color: var(--red-dark); }

/* ---------- Issue stack (issues page, alternating) ---------- */
.issue-stack { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 84px); }
.issue-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  scroll-margin-top: 100px;
}
.issue-row .issue-img img { border-radius: 10px; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.issue-row:nth-child(even) .issue-img { order: 2; }
.issue-row h2 { margin-bottom: .35em; }
.issue-row .issue-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); display: block; margin-bottom: 6px;
}
.issue-row ul { margin: 14px 0 0; padding-left: 20px; }
.issue-row li { margin-bottom: 10px; font-weight: 300; }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery img { border-radius: 8px; aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.gallery .tall { grid-row: span 2; aspect-ratio: 3/4; height: 100%; }

/* ---------- Featured endorsement quote ---------- */
.featured-quote {
  max-width: 820px; margin: 0 auto clamp(30px,4vw,48px); text-align: center;
}
.featured-quote p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 500; font-style: italic; line-height: 1.3; color: #fff; margin: 0 0 16px;
}
.featured-quote cite {
  font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 14px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85);
}

/* ---------- Endorser grid (full list) ---------- */
.endorser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  overflow: hidden;
}
.endorser-grid .eg-item {
  background: var(--red);
  padding: 20px 16px;
  text-align: center;
}
.endorser-grid .eg-name {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600; line-height: 1.15; color: #fff;
}
.endorser-grid .eg-office {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.82); margin-top: 5px;
}
.endorse-note { text-align: center; margin-top: 26px; color: rgba(255,255,255,.9); }

/* ---------- VBM alert band ---------- */
.vbm-alert {
  background: var(--red); color: #fff; text-align: center;
  padding: 16px var(--gutter);
  font-weight: 600; font-size: clamp(15px, 1.7vw, 18px); letter-spacing: .01em;
}
.vbm-alert strong { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Voter cards ---------- */
.voter-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 26px);
}
.voter-card {
  background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--navy);
  border-radius: 8px; padding: 30px 26px; display: flex; flex-direction: column;
}
.voter-card h3 {
  font-family: 'Montserrat', sans-serif; color: var(--navy);
  font-size: clamp(23px, 2.2vw, 28px); font-weight: 600; margin: 0 0 12px;
}
.voter-card p { font-size: 15.5px; }
.voter-card .btn { margin-top: auto; align-self: flex-start; }
.voter-card .vc-num {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  color: var(--red); font-size: 30px; line-height: 1; margin-bottom: 6px;
}

/* ---------- Key dates ---------- */
.key-dates { max-width: 720px; margin: 0 auto; }
.date-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.22);
}
.date-row:first-child { border-top: 1px solid rgba(255,255,255,.22); }
.date-row .dr-label { font-weight: 300; font-size: clamp(16px,1.8vw,19px); color: #fff; }
.date-row .dr-date {
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px); color: #fff; white-space: nowrap; text-align: right;
}
.key-note { text-align: center; margin-top: 24px; font-size: 14px; color: rgba(255,255,255,.8); }
.key-note a { color: #fff; text-decoration: underline; }

/* ---------- Page-hero variants ---------- */
.page-hero.ph-photo {
  background: linear-gradient(rgba(2,21,48,.5), rgba(4,46,101,.62)),
    url("../img/hero-ryan.webp") center 28% / cover no-repeat;
}
.page-hero .eyebrow { color: #fff; opacity: .95; }

/* ---------- Responsive (full-site components) ---------- */
@media (max-width: 900px) {
  .issue-grid, .voter-grid { grid-template-columns: repeat(2, 1fr); }
  .endorser-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 460px; margin: 0 auto; }
  .issue-row { grid-template-columns: 1fr; gap: 22px; }
  .issue-row:nth-child(even) .issue-img { order: 0; }
}
@media (max-width: 600px) {
  .issue-grid, .voter-grid, .gallery { grid-template-columns: 1fr; }
  .gallery .tall { grid-row: auto; aspect-ratio: 3/2; }
  .date-row { flex-direction: column; gap: 2px; }
  .date-row .dr-date { text-align: left; }
}

/* ---------- Endorser headshot cards (palm-card style) ---------- */
.endorser-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.ec {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 16px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .15s ease, border-color .15s ease;
}
.ec:hover { transform: translateY(-4px); border-color: var(--navy); }
.ec-photo, .ec-avatar {
  width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; object-position: center 35%;
  margin: 0 0 15px;
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.ec-avatar {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy) 0%, var(--blue, #0a3f82) 100%);
  color: var(--offwhite);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 40px; letter-spacing: .02em;
}
.ec-name {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600; line-height: 1.12; margin: 0 0 5px;
}
.ec-office {
  font-family: 'Montserrat', sans-serif;
  color: var(--red);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.35;
}
.endorse-group-label {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 clamp(20px,2.6vw,30px);
}
.section-navy .endorse-group-label { color: var(--gold, #E4B44C); }
.endorse-groups { display: flex; flex-direction: column; gap: clamp(38px,5vw,60px); }

@media (max-width: 900px) { .endorser-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .endorser-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .endorser-cards { grid-template-columns: 1fr; } }

/* ---------- Split hero (full-color photo + signup form) ---------- */
.hero-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
}
.hero-split-media {
  min-height: 100%;
  background: var(--navy);
}
.hero-split-media img {
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 52vw, 640px);
  object-fit: cover;
  object-position: center 22%;
}
.hero-split-panel {
  background: var(--offwhite);
  padding: clamp(30px, 3.4vw, 52px) clamp(24px, 3.4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-panel-logo {
  height: clamp(64px, 7.5vw, 92px);
  width: auto;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.hero-split-panel h1 {
  color: var(--navy);
  font-size: clamp(27px, 2.9vw, 38px);
  line-height: 1.08;
  margin: 0 0 clamp(16px, 1.8vw, 22px);
}
.hero-split-panel .form-card {
  margin: 0;
  max-width: none;
  width: 100%;
  padding: clamp(18px, 2.2vw, 26px);
}
.hero-split-panel .form-card .btn { margin-top: 14px; }
.hero-form-intro {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
}

/* Intro band below hero (paragraph + buttons that moved out of the hero) */
.intro-band { text-align: center; }
.intro-band .lede { max-width: 760px; margin: 0 auto; color: var(--slate); }
.intro-band .hero-actions { justify-content: center; margin-top: 22px; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-media img { min-height: clamp(260px, 56vw, 420px); }
}

/* ---------- Credentials list + photo (replaces 2x2 stat grid) ---------- */
.cred-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.cred-photo img { border-radius: 10px; width: 100%; }
.cred-list { list-style: none; margin: 18px 0 0; padding: 0; }
.cred-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 18px;
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}
.cred-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--red);
}
.cred-list li strong { color: #fff; font-weight: 600; }
.section-white .cred-list li { color: var(--ink); }
.section-white .cred-list li strong { color: var(--navy); }
@media (max-width: 820px) {
  .cred-grid { grid-template-columns: 1fr; }
  .cred-photo { max-width: 520px; }
}

/* ---------- Full-width hero image ---------- */
.hero-full { padding: 0; line-height: 0; background: var(--navy); }
.hero-full > img {
  width: 100%;
  height: clamp(460px, 58vw, 760px);
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Intro band headline (moved out of hero) */
.intro-band h1 {
  font-size: clamp(30px, 4vw, 50px);
  margin: 0 0 .35em;
}

/* ---------- Horizontal signup form (one row) ---------- */
.form-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 14px;
  align-items: end;
  max-width: 1000px;
  margin: 0 auto;
}
.form-row .field { display: flex; flex-direction: column; text-align: left; }
.form-row label {
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-row input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}
.form-row input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.form-row .btn { white-space: nowrap; padding: 13px 26px; }
.form-consent { max-width: 1000px; margin: 16px auto 0; }
@media (max-width: 820px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-row .btn { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Hero overlay (white logo + buttons, left column) ---------- */
.hero-full { position: relative; }
.hero-overlay {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 32px);
  padding: 0 0 0 clamp(24px, 4vw, 64px);
}
.hero-overlay-logo {
  width: clamp(440px, 54vw, 720px);   /* ~2x larger */
  max-width: 92%;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));  /* minor drop shadow */
}
.hero-overlay-actions {
  display: flex;
  gap: 16px;
  width: calc(clamp(440px, 54vw, 720px) - 24px); /* sits just inside the logo width */
  max-width: 92%;
}
.hero-overlay-actions .btn {
  flex: 1;                 /* two buttons + gap == row width */
  padding: 28px 20px;      /* taller buttons */
  font-size: 18px;
  white-space: nowrap;   /* keep the button label on one line */
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
}
@media (max-width: 700px) {
  .hero-overlay { align-items: center; text-align: center; left: 0; right: 0; padding: 0 20px; }
  .hero-overlay-actions { justify-content: center; }
  .hero-overlay-logo { width: clamp(260px, 82vw, 460px); }
}

/* ---------- Yellowish-white -> white with subtle pattern ---------- */
.section-offwhite {
  background-color: #fff;
  background-image: radial-gradient(rgba(4,46,101,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.consent-block { background: var(--mist); }
.form-card input,
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"] { background: #fff; }
.sig-pad-wrap { background: #fff; }

/* ---------- Extra breathing room on combined signup section ---------- */
.intro-band {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

/* ---------- Latest News (white cards on navy) ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.news-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform .15s ease;
}
a.news-card:hover { transform: translateY(-4px); }
.news-card .news-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.news-card h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy); font-size: clamp(20px, 2vw, 25px);
  font-weight: 600; line-height: 1.16; margin: 0 0 10px;
}
.news-card p { font-size: 15px; color: var(--slate); margin: 0 0 18px; }
.news-card .news-link {
  margin-top: auto;
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--red);
}
a.news-card:hover .news-link { color: var(--red-dark); }
@media (max-width: 820px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- Affordability / lower-cost accent (underline, headers only) ---------- */
.accent {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.section-navy .accent { text-decoration-color: #E4B44C; }
.page-hero .accent { text-decoration-color: #E4B44C; }
.section-red .accent { text-decoration-color: #fff; }

.page-hero .accent { text-decoration-color: #E4B44C; }

/* ---------- Centered, larger credentials headline ---------- */
.cred-head {
  text-align: center;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.08;
  margin: 0 auto .7em;
}
.photo-band.pos-about img { object-position: center 30%; }
.photo-band.pos-cafe  img { object-position: center 45%; }

/* ---------- Yard-sign layout (form + photo) ---------- */
.yard-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.yard-layout .form-card { max-width: none; margin: 0; width: 100%; }
.yard-photo img { width: 100%; border-radius: 10px; display: block; }
@media (max-width: 820px) { .yard-layout { grid-template-columns: 1fr; } }

/* ---------- Campaign Kick-Off invite ---------- */
.invite-layout {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.invite-flyer img {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: block;
}
.invite-detail h2 { margin-bottom: .25em; }
.invite-meta { list-style: none; margin: 18px 0 24px; padding: 0; }
.invite-meta li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font-size: clamp(16px, 1.7vw, 18px);
}
.invite-meta .im-label {
  flex: 0 0 96px; font-weight: 600; color: var(--red);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.invite-note { font-size: 14px; color: var(--slate); margin-top: 16px; }
@media (max-width: 820px) { .invite-layout { grid-template-columns: 1fr; } }

/* ---------- Video embed (under hero) ---------- */
.video-embed { max-width: 900px; margin: 0 auto; }
.video-frame {
  position: relative;
  padding-top: 56.25%;   /* 16:9 */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #000;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Video + leadership card layout ---------- */
.video-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.video-card {
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  padding: clamp(28px, 3.4vw, 46px);
}
.video-card h2 { color: #fff; margin-bottom: .35em; }
.video-card p {
  color: rgba(255,255,255,.88);
  margin: 0;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
}
.video-head {
  font-size: clamp(23px, 2.5vw, 32px);
  margin-bottom: 16px;
}
@media (max-width: 820px) {
  .video-layout { grid-template-columns: 1fr; }
}

/* ---------- Tighter signup padding + full-width video section ---------- */
.intro-band {
  padding-top: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(24px, 3vw, 44px);
}
#video .wrap { max-width: none; }

/* ---------- Full-bleed left blue card + tighter/smaller form ---------- */
.video-card { border-radius: 0; }
#video .wrap { padding-left: 0; }            /* card runs to the left screen edge */
@media (max-width: 820px) { #video .wrap { padding-left: var(--gutter); } }

.intro-band {                                 /* even tighter around the form */
  padding-top: clamp(12px, 1.6vw, 24px);
  padding-bottom: clamp(12px, 1.6vw, 24px);
}
#signup .section-head { margin-bottom: clamp(12px, 1.6vw, 20px); }

.form-row { max-width: 840px; }               /* slightly smaller form */
.form-row label { font-size: 12px; margin-bottom: 4px; }
.form-row input { padding: 10px 12px; font-size: 15px; }
.form-row .btn { padding: 12px 22px; font-size: 15px; }

/* ---------- Blue card full section height + tighter top ---------- */
.video-layout { align-items: stretch; }
.video-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#video { padding-top: clamp(14px, 2vw, 28px); }

/* ---------- Vertically center columns + round right edges of blue card ---------- */
.video-col { display: flex; flex-direction: column; justify-content: center; }
.video-card { border-radius: 0 16px 16px 0; }

/* ---------- Seamless full-bleed card + video (no gap, no radius) ---------- */
.video-layout { gap: 0; }
#video .wrap { padding-left: 0; padding-right: 0; }   /* full-bleed both edges */
@media (max-width: 820px) {
  #video .wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
}
.video-card { border-radius: 0; }
.video-frame { border-radius: 0; border: 0; }
.video-card .video-head { margin-top: 22px; margin-bottom: 0; }

/* ---------- Upcoming Events (full-height photo left, details right) ---------- */
.events-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: stretch;
}
.events-photo { border-radius: 10px; overflow: hidden; }
.events-photo img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: center 25%; display: block; }
.events-detail { display: flex; flex-direction: column; justify-content: center; }
.event-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: clamp(22px, 3vw, 36px);
}
.event-card h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 6px;
}
.event-card .invite-meta { margin: 8px 0 18px; }
.event-flyer img { width: 100%; border-radius: 6px; border: 1px solid var(--rule); display: block; }
.event-flyer:hover img { opacity: .92; }
@media (max-width: 900px) { .event-card { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .events-layout { grid-template-columns: 1fr; }
  .events-photo img { min-height: 300px; }
}

/* ---------- Latest News background photo (navy overlay) ---------- */
#news {
  background-image:
    linear-gradient(rgba(2,21,48,.88), rgba(4,46,101,.86)),
    url("../img/photo-event-stage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Enlarged bio portrait + news bg heads in frame ---------- */
#about .about-grid { grid-template-columns: 1.55fr 0.85fr; }
#news { background-position: center 22%; }
@media (max-width: 820px) { #about .about-grid { grid-template-columns: 1fr; } }

/* ---------- Even out bio columns (wider text, cropped photo) ---------- */
#about .about-grid { grid-template-columns: 1fr 1.05fr; align-items: stretch; }
#about .about-portrait { height: 100%; }
#about .about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
@media (max-width: 820px) {
  #about .about-grid { grid-template-columns: 1fr; align-items: start; }
  #about .about-portrait { height: auto; }
  #about .about-portrait img { height: auto; }
}

/* ---------- Tighten gap between bio and Upcoming Events ---------- */
#about { padding-bottom: clamp(24px, 3vw, 44px); }
#events { padding-top: clamp(24px, 3vw, 44px); }

/* ---------- Hero slogan (under buttons) ---------- */
.hero-slogan {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.14;
  color: var(--navy);
  text-shadow: 0 1px 12px rgba(255,255,255,.65);
}

/* ---------- Platform cards: dark grey text + red Read More button ---------- */
.issue-card p { color: #3f434a; }
.issue-card .issue-link {
  align-self: flex-start;
  background: var(--red);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: background .15s ease;
}
.issue-card:hover .issue-link,
.issue-card .issue-link { color: #fff; }
.issue-card:hover .issue-link { background: var(--red-dark); }

/* ---------- Nav Chip In button: white text ---------- */
.nav a.btn-red, .nav a.btn-red:hover { color: #fff; }

/* ---------- Hero slogan: bigger + white ---------- */
.hero-slogan {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 46px);
  text-shadow: 0 2px 12px rgba(2,21,48,.6);
}

/* ---------- Minimize form terms/consent text ---------- */
.form-consent { margin-top: 10px; padding: 8px 10px; background: transparent; border: 0; }
.form-consent .consent-checkbox { font-size: 10px; line-height: 1.3; gap: 6px; color: var(--slate); }
.form-consent .consent-checkbox input { margin-top: 1px; transform: scale(.85); }

/* ---------- Bigger blue-card subtext + larger platform card headlines ---------- */
.video-card p { font-size: clamp(17px, 1.95vw, 22px); line-height: 1.5; }
.issue-card h3 { font-size: clamp(24px, 2.5vw, 31px); margin: 0 0 14px; }
.issue-card .issue-body { padding: 24px 24px 26px; }

/* ---------- Two photos per section ---------- */
.about-portrait img + img { margin-top: 16px; }
.two-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 820px;
  margin: clamp(26px, 3.5vw, 40px) auto 0;
}
.two-photos img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 560px) { .two-photos { grid-template-columns: 1fr; } }

/* ---------- Mobile hero: image full-width on top, logo/buttons below ---------- */
@media (max-width: 700px) {
  .hero-full { position: static; display: block; background: #fff; }
  .hero-full > img { position: static; width: 100%; height: auto; }
  .hero-overlay {
    position: static;
    inset: auto;
    max-width: none;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: clamp(20px, 5vw, 30px) var(--gutter) clamp(24px, 6vw, 36px);
    background: #fff;
  }
  .hero-overlay-logo { width: clamp(240px, 72vw, 380px); margin: 0 auto; filter: none; }
  .hero-overlay-actions { width: 100%; max-width: 420px; justify-content: center; }
  .hero-slogan { color: var(--navy); text-shadow: none; }
  /* center all button groups on mobile */
  .hero-actions { justify-content: center; }
}

/* ---------- Script heading ---------- */
.script-head {
  font-family: 'Caveat', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  color: var(--navy);
}
/* ---------- Video left + Get To Know navy card right ---------- */
.protecting-band {
  text-align: center;
  padding-top: clamp(18px, 2.4vw, 34px);
  padding-bottom: clamp(10px, 1.4vw, 20px);
}
.protecting-band .wrap { max-width: 900px; }
.protecting-band h2 { margin-bottom: .28em; }
#video .video-card .cred-list li { color: rgba(255,255,255,.9); }
#video .video-card .cred-list { margin-top: 22px; }

/* ---------- Current & Former Board Memberships logo band ---------- */
.boards-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  max-width: 1040px;
  margin: 0 auto;
}
.boards-logos img {
  max-height: clamp(46px, 5.4vw, 68px);
  max-width: clamp(140px, 17vw, 220px);
  width: auto;
  height: auto;
  object-fit: contain;
}
/* near-square marks read small at a shared height — nudge up */
.boards-logos img.logo-square { max-height: clamp(58px, 6.6vw, 86px); }

/* ---------- "Watch our first campaign ad!" cue + tighter bio top ---------- */
.watch-cue {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
}
.watch-arrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--red);
  margin-left: 6px;
  transform: translateY(2px);
}
/* pull the bio up so the quote sits close under the blue card */
#video { padding-bottom: 0; }
#about { padding-top: clamp(18px, 2.2vw, 32px); }

/* ---------- Upcoming Events: red band + top drop shadow ---------- */
#events {
  position: relative;
  /* shadow sits on the TOP edge so it separates from the section above */
  box-shadow: 0 -10px 22px -6px rgba(2, 21, 48, 0.30);
}
/* recolor contents for the red ground */
#events .invite-detail h2 { color: #fff; }
#events .invite-meta li {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.28);
}
#events .invite-meta .im-label { color: rgba(255,255,255,.82); }
#events .invite-note { color: rgba(255,255,255,.85); }
#events .invite-note a { color: #fff; text-decoration: underline; }
#events .invite-note a:hover { color: rgba(255,255,255,.8); }
#events .invite-flyer img { border-color: rgba(255,255,255,.35); }

/* ---------- Bolder intro-band body copy ---------- */
.protecting-band .lede { font-weight: 500; }

/* ---------- "FOUNDATION" caption under the Orlando Health / Bayfront mark ---------- */
.board-logo-stack {
  position: relative;
  display: inline-flex;   /* box stays the size of the logo so the row stays aligned */
  line-height: 0;
}
.board-logo-caption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #3B4650;   /* matches the "Bayfront Hospital" wordmark */
  white-space: nowrap;
}
/* leave room beneath the row so the hanging caption never collides */
.boards-logos { padding-bottom: 22px; }

/* ---------- Message band: bottom-aligned cutout + oversized quote ---------- */
#about { padding-top: clamp(20px, 2.6vw, 38px); padding-bottom: 0; }

#about .about-grid {
  grid-template-columns: 1fr 1fr;      /* symmetrical halves */
  align-items: end;                    /* cutout sits on the section floor */
  gap: clamp(24px, 4vw, 56px);
}

/* cutout: bigger, flush to the bottom, soft shadow that follows the alpha */
#about .about-portrait { height: auto; align-self: end; }
#about .about-portrait picture { display: block; }
#about .about-portrait img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;                 /* cancels the old cover-crop */
  object-position: center bottom;
  /* drop-shadow (not box-shadow) so it traces the cutout, not a rectangle */
  filter: drop-shadow(0 10px 12px rgba(2, 21, 48, 0.26));
}

/* quote column: centered against the figure, scaled up to match its mass */
#about .about-copy {
  align-self: center;
  padding-bottom: clamp(28px, 5vw, 74px);
}
#about .signature-quote {
  font-size: clamp(26px, 3.5vw, 45px);
  line-height: 1.22;
  border-left-width: 5px;
  padding-left: clamp(20px, 2.4vw, 30px);
  margin-bottom: clamp(22px, 3vw, 34px);
}
#about .signature-quote cite { font-size: clamp(13px, 1.2vw, 15px); margin-top: 14px; }

@media (max-width: 820px) {
  #about .about-grid { grid-template-columns: 1fr; align-items: start; }
  #about .about-copy { padding-bottom: 26px; order: -1; }   /* quote first on mobile */
  #about .about-portrait img { max-width: 420px; }
}

/* ---------- longer quote: rescale so it still balances the cutout ---------- */
#about .signature-quote {
  font-size: clamp(19px, 2.6vw, 33px);
  line-height: 1.26;
}

/* ---------- Home "A Message from Ryan" band: flag background ---------- */
#about {
  background-color: #EEF1F4;                     /* fallback while the image loads */
  background-image:
    linear-gradient(rgba(255,255,255,0.60), rgba(255,255,255,0.72)),
    url("../img/flag-band.webp");
  background-size: cover, cover;
  background-position: center bottom, center bottom;
  background-repeat: no-repeat, no-repeat;
}
/* deepen the wash behind the copy column only, so the quote stays crisp */
#about .about-copy .signature-quote { text-shadow: 0 1px 0 rgba(255,255,255,.55); }
@media (max-width: 820px) {
  /* text sits over the photo on mobile — lighten further */
  #about { background-image:
    linear-gradient(rgba(255,255,255,0.74), rgba(255,255,255,0.82)),
    url("../img/flag-band.webp"); }
}

/* ---------- card now on the left: give the video back the wider column ---------- */
.video-layout { grid-template-columns: 0.85fr 1.15fr; }

/* ---------- Message band: darker wash, white quote, no red rule ---------- */
#about {
  /* deeper navy wash so white type reads cleanly over the park */
  background-image:
    linear-gradient(rgba(2,21,48,0.58), rgba(2,21,48,0.70)),
    url("../img/flag-band.webp");
  /* roomier band top and bottom */
  padding-top: clamp(52px, 7vw, 104px);
  padding-bottom: clamp(44px, 6vw, 88px);
}
#about .signature-quote {
  color: #fff;
  border-left: 0;              /* red rule removed */
  padding-left: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
#about .signature-quote cite {
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
@media (max-width: 820px) {
  #about { background-image:
    linear-gradient(rgba(2,21,48,0.66), rgba(2,21,48,0.78)),
    url("../img/flag-band.webp"); }
}

/* ---------- roomier top, flush bottom (cutout back on the section floor) ---------- */
#about { padding-bottom: 0; }

/* ---------- Message band: white rules top & bottom + shadow for separation ---------- */
#about {
  border-top: 7px solid #fff;
  border-bottom: 7px solid #fff;
  /* lift above the following section so the downward shadow isn't painted over */
  position: relative;
  z-index: 2;
  box-shadow:
    0 -7px 18px -5px rgba(2, 21, 48, 0.32),   /* casts up onto the video section */
    0  7px 18px -5px rgba(2, 21, 48, 0.32);   /* casts down onto the events band */
}

/* ---------- About page: larger body copy + taller cropped photos ---------- */
.bio-page .about-copy p {
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.7;
}

/* crop the stacked photos taller so the column fills the copy height */
.bio-page .tall-pair img {
  height: clamp(300px, 31vw, 430px);
  object-fit: cover;
}
/* keep Ryan in frame as the crop narrows */
.bio-page .tall-pair img:nth-of-type(1) { object-position: 42% center; }
.bio-page .tall-pair img:nth-of-type(2) { object-position: 34% center; }

@media (max-width: 820px) {
  .bio-page .tall-pair img { height: clamp(260px, 58vw, 360px); }
}


/* =========================================================
   Elijah CD7 additions
   ========================================================= */

/* ---------- Brand logo sizing (wordmark lockup, 600x195) ---------- */
.brand-logo { height: 56px; }
@media (max-width: 640px) { .brand-logo { height: 44px; } }

/* Section heads read as all-caps on this brand; keep the lede sentence-case. */
.section-head .lede, .lede, .eyebrow-sub { text-transform: none; }

/* ---------- Eyebrow above a hero headline ---------- */
.eyebrow {
  display: block;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.section-navy .eyebrow, .page-hero .eyebrow, .section-red .eyebrow { color: #fff; opacity: .92; }

/* ---------- Social feed embeds (Facebook + X side by side) ---------- */
.feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}
.feed-col {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feed-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.feed-head svg { width: 18px; height: 18px; flex: none; }
.feed-head a { color: #fff; margin-left: auto; font-size: 12px; letter-spacing: .06em; opacity: .85; }
.feed-head a:hover { opacity: 1; color: #fff; }
.feed-body {
  height: 560px;
  overflow: hidden;
  background: var(--mist);
}
.feed-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.feed-body .twitter-timeline { width: 100% !important; }
/* Fallback shown until (or unless) the third-party widget paints. */
.feed-fallback {
  padding: 26px 22px;
  text-align: center;
  font-size: 15px;
  color: var(--slate);
}
@media (max-width: 900px) {
  .feed-grid { grid-template-columns: 1fr; }
  .feed-body { height: 480px; }
}

/* ---------- News page: outlet logo + headline rows ---------- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.press-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 24px 22px 26px;
  transition: transform .18s ease, border-color .18s ease;
}
a.press-card:hover { transform: translateY(-4px); border-color: var(--navy); }
.press-logo {
  height: 54px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 16px;
}
.press-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.press-card h3 {
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 14px;
  text-transform: none;
}
.press-card .news-link {
  margin-top: auto;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
a.press-card:hover .news-link { color: var(--red-dark); }
@media (max-width: 900px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .press-grid { grid-template-columns: 1fr; } }

/* ---------- Endorsement highlight cards (photo + caption) ---------- */
.endorse-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 30px);
}
.eh {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.eh img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; }
.eh-body { padding: 20px 20px 24px; }
.eh-name {
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 4px;
}
.eh-office { font-size: 14px; color: var(--slate); }
@media (max-width: 860px) { .endorse-highlights { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ---------- Volunteer checkbox group (Join the Team) ---------- */
.vol-group { margin-top: 20px; }
.vol-group > span {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.vol-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.vol-options label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
}
.vol-options input { margin-top: 3px; flex: none; }
@media (max-width: 600px) { .vol-options { grid-template-columns: 1fr; } }

/* ---------- Contact detail cards ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 30px);
}
.contact-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 24px;
}
.contact-card h3 {
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
}
.contact-card p { font-size: 15.5px; margin: 0 0 8px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Yard-sign photo crop ---------- */


/* ---------- Endorsement text card (no photo) ---------- */
.eh-text .eh-body { padding: 30px 24px; }
.eh-rule { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

/* =========================================================
   Elijah CD7 — layout corrections after first visual pass
   ========================================================= */

/* Hero: the wordmark was landing on Ryan's face. Shrink it and lay a
   left-side scrim so white type reads against the photo. */
.hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,20,44,.82) 0%, rgba(0,20,44,.55) 34%, rgba(0,20,44,0) 58%);
  pointer-events: none;
}
.hero-overlay { z-index: 2; }
.hero-overlay-logo {
  width: clamp(280px, 30vw, 420px);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.hero-overlay-actions {
  width: clamp(280px, 30vw, 420px);
}
.hero-overlay-actions .btn { padding: 16px 18px; font-size: 16px; }
@media (max-width: 820px) {
  .hero-full::after {
    background: linear-gradient(rgba(0,20,44,.42), rgba(0,20,44,.72));
  }
  .hero-overlay-logo, .hero-overlay-actions { width: clamp(240px, 74vw, 380px); }
}

/* Centre a lone trailing card in the 3-up issue grid (7 objectives). */
.issue-grid > .issue-card:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 940px) {
  .issue-grid > .issue-card:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* Signup band: the section centres its head, but form sub-blocks read left. */
#signup .consent-block, #signup .vol-group { text-align: left; }

/* Social feeds: the Facebook page plugin maxes out at 500px wide, so cap the
   columns to match instead of leaving a gap beside the iframe. */
.feed-grid {
  grid-template-columns: repeat(2, minmax(0, 500px));
  justify-content: center;
}
.feed-body iframe { max-width: 500px; margin: 0 auto; }
@media (max-width: 900px) {
  .feed-grid { grid-template-columns: minmax(0, 500px); }
}
/* Fallback swapped in by the watcher script when X's timeline never paints,
   so the panel is never just an empty box. */
.x-fallback { display: none; }
#x-feed.x-failed .x-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6px;
  padding: 30px 24px;
  text-align: center;
  font-size: 15px;
  color: var(--slate);
}
#x-feed.x-failed .twitter-timeline,
#x-feed.x-failed .twitter-timeline-rendered { display: none !important; }
.x-fallback p { margin: 0; }
.x-fallback .btn { margin-top: 8px; }
/* the un-upgraded anchor is just a link until widgets.js swaps it out */
#x-feed > .twitter-timeline { display: block; padding: 26px 24px; font-size: 14px; color: var(--slate); }

/* Voter Action Center */
.vac-alert {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto clamp(28px, 4vw, 42px);
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 6px solid var(--red);
  border-radius: 8px;
}
.vac-alert-label {
  flex: none;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  padding-top: 3px;
}
.vac-alert-body { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.vac-alert-body strong { color: var(--navy); font-weight: 700; }
@media (max-width: 640px) { .vac-alert { flex-direction: column; gap: 8px; } }

.vc-links { display: flex; gap: 10px; margin-top: auto; }
.vc-links .btn { flex: 1; padding: 12px 10px; font-size: 14px; }

/* Yard-sign photo: fill the column rather than floating at natural size. */

/* .voter-card pins a lone button to the card floor; inside a .vc-links row the
   row itself does the pinning, so reset the per-button rule. */
.voter-card .vc-links .btn { margin-top: 0; align-self: stretch; }

/* Page hero: the source photo has bright patches, so deepen the wash and add a
   shadow behind the lede rather than relying on the gradient alone. */
.page-hero {
  background:
    linear-gradient(rgba(0,20,44,.80), rgba(0,43,85,.86)),
    url("../img/photo-rec-meeting.jpg") center 40% / cover no-repeat;
}
.page-hero h1 { text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.page-hero .lede { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* Centre a lone trailing press card in the 3-up news grid. */
.press-grid > .press-card:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 900px) {
  .press-grid > .press-card:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* Mobile hero: the template stacked the photo above a WHITE panel, which makes
   the white-knockout wordmark disappear. Keep the panel navy instead. */
@media (max-width: 700px) {
  .hero-full { background: var(--navy); }
  .hero-full::after { display: none; }   /* no photo overlay when stacked */
  .hero-overlay { background: var(--navy); }
  .hero-overlay-logo { filter: none; }
  .hero-slogan { color: #fff; text-shadow: none; }
}

/* =========================================================
   Elijah CD7 — v2 revisions
   ========================================================= */

/* ---------- Hero: flag banner + cutout headshot ---------- */
.hero-banner {
  padding: 0;
  background:
    linear-gradient(90deg, rgba(0,20,44,.86) 0%, rgba(0,20,44,.62) 45%, rgba(0,20,44,.30) 100%),
    url("../img/flag-band.webp") center center / cover no-repeat;
  background-color: var(--navy);
}
.hero-banner-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: clamp(20px, 3vw, 48px);
  min-height: clamp(430px, 46vw, 620px);
}
.hero-banner-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 30px);
  padding: clamp(46px, 6vw, 78px) 0;
  align-self: center;
}
.hero-banner-logo {
  width: clamp(360px, 42vw, 620px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,.5));
}
.hero-banner .hero-slogan {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.hero-banner-actions {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  flex-wrap: wrap;
  width: 100%;
  max-width: clamp(360px, 42vw, 620px);
}
.hero-banner-actions .btn {
  flex: 1 1 0;
  padding: clamp(18px, 1.9vw, 26px) clamp(18px, 2vw, 30px);
  font-size: clamp(16px, 1.35vw, 21px);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.btn-white {
  background: #fff;
  color: var(--navy);
  border: 1px solid #fff;
}
.btn-white:hover { background: #E8EEF6; color: var(--navy); }
.hero-banner-photo { display: flex; align-items: flex-end; justify-content: center; }
.hero-banner-photo img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.42));
}
@media (max-width: 900px) {
  .hero-banner-inner {
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
    min-height: 0;
  }
  .hero-banner-copy { align-items: center; padding-bottom: 0; }
  .hero-banner-actions { justify-content: center; max-width: 460px; }
  .hero-banner-logo { width: clamp(280px, 80vw, 460px); }
  .hero-banner-photo img { max-width: 340px; }
}

/* ---------- Endorsements: full list, 3 across, with headshots ---------- */
.endorser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.endorser-grid > .ec:last-child:nth-child(3n + 1) { grid-column: 2; }
.endorser-grid .ec-photo, .endorser-grid .ec-avatar { width: 132px; height: 132px; }
.endorser-grid .ec-name { font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; }
/* the office line is a caption, not a red subhead */
.ec-office {
  color: var(--slate);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
  font-size: 13px;
}
.endorse-note {
  text-align: center;
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  font-size: 15px;
  color: var(--slate);
}
.endorse-note strong { color: var(--navy); }
@media (max-width: 860px) { .endorser-grid { grid-template-columns: repeat(2, 1fr); }
  .endorser-grid > .ec:last-child:nth-child(3n + 1) { grid-column: auto; } }
@media (max-width: 520px) { .endorser-grid { grid-template-columns: 1fr; } }

/* ---------- Voter Action Center on red ---------- */
#voter-action .vac-alert { border-left-color: var(--navy); }
#voter-action .vac-alert-label { color: var(--red); }
#voter-action .embed-note { color: rgba(255,255,255,.92); }
#voter-action .embed-note a { color: #fff; text-decoration: underline; }
#voter-action .btn-navy { background: var(--navy); border-color: var(--navy); }
#voter-action .btn-red { background: var(--navy); border-color: var(--navy); }
#voter-action .endorse-cta .btn-navy { background: #fff; color: var(--red); border-color: #fff; }
#voter-action .endorse-cta .btn-navy:hover { background: #F2E4E4; color: var(--red); }

/* ---------- Live X feed cards ---------- */
.feed-body { overflow-y: auto; }
.x-stream { padding: 4px 0; }
#x-feed.x-failed .x-stream { display: none; }
.x-loading { padding: 30px 24px; text-align: center; color: var(--slate); font-size: 14px; }
.xt {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.xt:last-child { border-bottom: 0; }
.xt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.xt-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.xt-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.xt-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.xt-check { color: var(--navy); font-size: 11px; }
.xt-handle { font-size: 12.5px; color: var(--slate); }
.xt-body { font-size: 14.5px; line-height: 1.5; color: var(--ink); word-wrap: break-word; }
.xt-body a { color: var(--navy); }
.xt-media {
  display: grid; gap: 3px; margin-top: 12px;
  border-radius: 10px; overflow: hidden;
}
.xt-media.n1 { grid-template-columns: 1fr; }
.xt-media.n2, .xt-media.n3, .xt-media.n4 { grid-template-columns: 1fr 1fr; }
.xt-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; }
.xt-media.n1 img { aspect-ratio: 16/9; }
.xt-media.n3 img:first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.xt-foot {
  display: block; margin-top: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate);
}
.xt-foot:hover { color: var(--navy); }

/* Outlets without a logo file on hand render as a styled wordmark. */
.press-outlet {
  display: flex;
  align-items: center;
  height: 54px;
  margin-bottom: 16px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
}

/* The red Voter Action Center sets color:#fff on the section; the cards inside
   are white, so re-assert dark type on them. */
#voter-action .voter-card { color: var(--ink); }
#voter-action .voter-card p { color: var(--ink); }
#voter-action .voter-card h3 { color: var(--navy); }
#voter-action .vac-alert, #voter-action .vac-alert-body { color: var(--ink); }

/* Yard-sign photo should fill the row beside the form. */
.yard-layout { align-items: stretch; }

/* The yard-sign shot is a two-photo collage on a light ground — cropping it
   loses the signs, so fit the whole thing inside the column instead. */

/* ---------- Hero: give the headshot real presence ----------
   The 1100px .wrap plus a 1.15/0.85 split capped the cutout around 400px wide,
   well under its 640x580 native size. Widen the hero band and even out the
   columns so Ryan renders at full resolution and stands the height of the band. */
.hero-banner-inner {
  max-width: 1340px;
  grid-template-columns: 1.02fr 0.98fr;
  min-height: clamp(470px, 48vw, 680px);
}
.hero-banner-photo img {
  max-width: 640px;          /* native width — no upscaling */
  width: 100%;
}
@media (max-width: 1100px) {
  .hero-banner-inner { grid-template-columns: 1.1fr 0.9fr; }
}
@media (max-width: 900px) {
  .hero-banner-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-banner-photo img { max-width: 420px; }
}

/* ---------- Intro band: photo left, copy right ---------- */
.intro-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.intro-split-photo img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 38%;
}
.intro-split-copy { text-align: left; }
.intro-split-copy h2 { margin-bottom: .4em; }
.intro-split-copy .lede { margin-bottom: 1.4em; }
@media (max-width: 860px) {
  .intro-split-grid { grid-template-columns: 1fr; }
  .intro-split-copy { text-align: center; }
  .intro-split-photo img { aspect-ratio: 16 / 10; }
}

/* Featured 5-up endorsement row on the home page. */
.endorser-grid.featured { grid-template-columns: repeat(5, 1fr); }
.endorser-grid.featured .ec-photo, .endorser-grid.featured .ec-avatar { width: 118px; height: 118px; }
.endorser-grid.featured .ec-name { font-size: clamp(16px, 1.5vw, 19px); }
@media (max-width: 1000px) { .endorser-grid.featured { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .endorser-grid.featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .endorser-grid.featured { grid-template-columns: 1fr; } }

/* Endorsements page: grouped sections */
.endorse-group-label { color: var(--navy); }

/* Endorsements page: groups vary from 2 to 4 people, so let each row size to
   its contents and centre, instead of leaving a stranded card under a 3-up. */
.endorse-group .endorser-grid {
  grid-template-columns: repeat(auto-fit, minmax(186px, 220px));
  justify-content: center;
}
.endorse-group .endorser-grid > .ec:last-child:nth-child(3n + 1) { grid-column: auto; }
.endorse-group-label {
  font-size: 12px;
  letter-spacing: .16em;
}

.endorse-group .endorser-grid .ec { padding: 22px 12px 20px; }
.endorse-group .endorser-grid .ec-photo,
.endorse-group .endorser-grid .ec-avatar { width: 116px; height: 116px; }
.endorse-group .endorser-grid .ec-name { font-size: 17px; }
.endorse-group .endorser-grid .ec-office { font-size: 12px; }

/* Intro band: the photo should run the full height of the copy beside it. */
.intro-split-grid { align-items: stretch; }
.intro-split-photo { display: block; }
.intro-split-photo img {
  height: 100%;
  aspect-ratio: auto;        /* height is driven by the copy column, not a ratio */
  object-fit: cover;
}
.intro-split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 860px) {
  .intro-split-grid { align-items: center; }
  .intro-split-photo img { height: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Endorsements section: photo background under a white wash ---------- */
#endorsements {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.93)),
    url("../img/endorsements-bg.jpg");
  background-size: cover, cover;
  background-position: center 28%, center 28%;
  background-repeat: no-repeat, no-repeat;
}
/* Cards need a touch of lift so they read against the washed photo. */
#endorsements .ec {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 20, 44, 0.07);
}
@media (max-width: 860px) {
  #endorsements {
    background-image:
      linear-gradient(rgba(255,255,255,0.93), rgba(255,255,255,0.95)),
      url("../img/endorsements-bg.jpg");
  }
}

/* Breathing room under the Newsmax embed before the next band. */
#video { padding-bottom: clamp(72px, 9vw, 128px); }

/* Stacking the copy column as flex made the CTA stretch full-width; size it to
   its label again. */
.intro-split-copy { align-items: flex-start; }
.intro-split-copy .btn { align-self: flex-start; }
@media (max-width: 860px) {
  .intro-split-copy { align-items: center; }
  .intro-split-copy .btn { align-self: center; }
}

/* ---------- Voter Action Center: podium photo under a red overlay ---------- */
#voter-action {
  background-color: var(--red);
  background-image:
    linear-gradient(rgba(171,25,25,0.90), rgba(140,19,19,0.93)),
    url("../img/voter-action-bg.jpg");
  background-size: cover, cover;
  background-position: center 32%, center 32%;
  background-repeat: no-repeat, no-repeat;
}
/* Lift the white cards off the photographic ground. */
#voter-action .voter-card,
#voter-action .vac-alert { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18); }
@media (max-width: 860px) {
  #voter-action {
    background-image:
      linear-gradient(rgba(171,25,25,0.93), rgba(140,19,19,0.95)),
      url("../img/voter-action-bg.jpg");
  }
}

/* ---------- Request a Yard Sign: bigger photo ----------
   The collage was rendering ~475x283 inside a 757px-tall column, letterboxed
   top and bottom. Widen the band, give the photo the larger column, and centre
   it at its natural ratio instead of stretching a half-width box. */
#yard-sign .wrap { max-width: 1320px; }
.yard-layout {
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
}
@media (max-width: 1000px) { .yard-layout { grid-template-columns: 0.9fr 1.1fr; } }
@media (max-width: 820px) {
  #yard-sign .wrap { max-width: var(--max); }
  .yard-layout { grid-template-columns: 1fr; }
}

/* =========================================================
   Volunteer page
   ========================================================= */

/* The parade photo is 966px native — cap the band so it never upscales. */
.volunteer-hero .wrap { max-width: 1040px; }
.volunteer-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.volunteer-ask {
  max-width: 860px;
  margin: clamp(30px, 4vw, 48px) auto 0;
  text-align: center;
}
.volunteer-ask h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  margin-bottom: .3em;
}
.volunteer-ask .lede {
  font-size: clamp(18px, 1.75vw, 22px);
  color: var(--ink);
}

/* Wider card — six fields plus five role checkboxes need the room. */
.volunteer-form { max-width: 880px; }
.volunteer-form .vol-group { margin-top: 26px; }
.volunteer-form .btn { width: 100%; margin-top: 22px; }

/* The template only styled text/email/tel inputs; the county picker needs to
   match them. */
.form-card select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2355606E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}
.form-card select:focus { outline: 2px solid var(--navy); outline-offset: 1px; }

/* =========================================================
   Family band (home) + mobile photo framing
   ========================================================= */

.family-band { padding-top: clamp(52px, 7vw, 96px); padding-bottom: clamp(52px, 7vw, 96px); }
.family-band .wrap { max-width: 1240px; }
.family-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.family-copy { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.family-copy h2 { margin-bottom: .4em; }
.family-copy .lede { margin-bottom: 1em; }
.family-copy p { margin-bottom: 1.4em; }
.family-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 6px 26px rgba(0, 20, 44, 0.14);
}
@media (max-width: 900px) {
  .family-grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
  .family-copy { text-align: center; align-items: center; order: 2; }
  .family-photo { order: 1; }
}

/* ---------- Issue-card framing ----------
   These sources are portrait (500x667-ish) dropped into a 3:2 landscape box, so
   a centred crop cuts the subjects' heads off — badly so on mobile where the
   cards go full width. Bias each crop to where the faces actually sit. */
img[src$="issue-affordability.jpg"]   { object-position: center 20%; }
img[src$="issue-healthcare.jpg"]      { object-position: center 15%; }
img[src$="issue-education.jpg"]       { object-position: center 12%; }
img[src$="issue-faith-family.jpg"]    { object-position: center 12%; }
img[src$="issue-veterans.jpg"]        { object-position: center 25%; }
img[src$="issue-law-enforcement.jpg"] { object-position: center 10%; }
img[src$="issue-immigration.jpg"]     { object-position: center 15%; }

/* Taller cards on mobile so a portrait photo isn't squeezed into a letterbox. */
@media (max-width: 700px) {
  .issue-card .issue-photo { aspect-ratio: 4 / 3; }
  .issue-row .issue-img img { aspect-ratio: 4 / 3; }
}

/* Yard-sign collage: let it size to its own ratio on mobile, no letterboxing. */


/* ---------- Request a Yard Sign photo (single authoritative rule) ----------
   Six layers of overrides had accumulated here; a stale `min-height: 320px`
   was letterboxing the collage on mobile. The image is a two-photo collage on a
   light ground, so it must never be cropped — size it to its own ratio and let
   the grid centre it. */
.yard-photo {
  display: block;
  height: auto;
  align-self: center;
  min-height: 0;
}
.yard-photo img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  display: block;
}

/* Endorsements page on phones: auto-fit capped the card at 220px and left dead
   space either side, so drop to an explicit 2-up that fills the column. */
@media (max-width: 560px) {
  .endorse-group .endorser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endorse-group .endorser-grid .ec { padding: 18px 8px 16px; }
  .endorse-group .endorser-grid .ec-photo,
  .endorse-group .endorser-grid .ec-avatar { width: 92px; height: 92px; }
  .endorse-group .endorser-grid .ec-name { font-size: 15px; }
  .endorse-group .endorser-grid .ec-office { font-size: 11px; }
}
/* Only the very narrowest phones drop to one card; 375px devices keep 2-up so
   16 endorsers stay scannable instead of becoming an endless scroll. */
@media (max-width: 340px) {
  .endorse-group .endorser-grid { grid-template-columns: 1fr; }
}