:root {
  --navy: #102b4d;
  --navy-2: #173b64;
  --mint: #69cec8;
  --mint-soft: #dff6f4;
  --yellow: #f4cf41;
  --purple: #9c6fae;
  --cta: var(--yellow);
  --cta-ink: var(--navy);
  --ink: #152033;
  --muted: #52606f;
  --line: #d9e3e8;
  --paper: #ffffff;
  --wash: #f4f8f8;
  --danger: #a33a2b;
  --shadow: 0 18px 50px rgba(16, 43, 77, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

#case,
#change,
#insights,
#resources,
#supporters {
  scroll-margin-top: 104px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.5;
}

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

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(16, 43, 77, 0.08);
  backdrop-filter: blur(14px);
}

.brand-lockup {
  display: flex;
  align-items: center;
}

.brand img {
  width: clamp(170px, 24vw, 248px);
  min-width: 170px;
}

.ascp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 188px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.ascp-brand img {
  width: clamp(150px, 15vw, 218px);
  height: auto;
}

.ascp-brand picture {
  display: block;
  line-height: 0;
}

.site-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
}

.site-nav a,
.button,
.text-button {
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.text-button:hover {
  color: var(--cta-ink);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button-primary {
  background: var(--cta);
  color: var(--cta-ink);
}

.button-secondary {
  background: white;
  color: var(--cta-ink);
  border-color: var(--cta);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.social-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
}

.social-share span {
  color: var(--muted);
  font-weight: 900;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--cta-ink);
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid var(--cta);
  border-radius: 6px;
  text-decoration: none;
}

.icon-button svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.icon-button:hover {
  background: var(--cta);
  border-color: var(--cta);
}

.icon-button-dark {
  color: white;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

.hero {
  position: relative;
  min-height: clamp(660px, 76vh, 800px);
  padding: clamp(62px, 8.5vh, 104px) clamp(22px, 6vw, 84px) 110px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 58%, rgba(223, 246, 244, 0.9) 100%),
    var(--wash);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--purple);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 840px;
  margin-bottom: 24px;
  color: var(--navy);
  font-size: clamp(3rem, 9vw, 7.6rem);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  color: var(--navy);
  /* Capped at 2.1rem so section headers stay clearly subordinate to the
     compact page-hero h1 (max 3rem) on resources/supporters/insights/
     download/thank-you. Still gives a strong scale step down from the
     homepage hero (max 7.6rem). */
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: 0;
}

h3 {
  color: var(--navy);
  font-size: 1.28rem;
  line-height: 1.2;
}

.hero-lede {
  max-width: 690px;
  color: #29394b;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.campaign-summary {
  position: relative;
  max-width: 760px;
  margin: 28px 0 0;
  padding: 22px 0 0 24px;
  color: #25364a;
  font-size: clamp(1.04rem, 1.4vw, 1.22rem);
  font-weight: 600;
}

.campaign-summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 3px;
  width: 5px;
  border-radius: 999px;
  background: var(--purple);
}

.hero-mark {
  position: absolute;
  right: -5vw;
  top: 4vh;
  width: min(48vw, 620px);
  opacity: 0.22;
  pointer-events: none;
}

.hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(130px, 12vw, 170px);
  object-fit: cover;
  object-position: center 45%;
  opacity: 0.62;
}

.signal-band {
  margin-top: -78px;
  padding: 0 clamp(18px, 5vw, 72px) 30px;
  position: relative;
  z-index: 4;
  scroll-margin-top: 80px;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* Card style mirrors the .case-item boxes further down the page —
   same soft wash background, same rounded corners — but uses a
   horizontal colour stripe across the top instead of a vertical
   stripe down the left. The stripe colour cycles through the brand
   palette in the same order as the case grid (mint, yellow, purple). */
.signal {
  position: relative;
  min-height: 184px;
  padding: 30px 24px 26px;
  background: var(--wash);
  border-radius: 8px;
  border-top: 6px solid var(--mint);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

.signal:nth-child(2),
.signal:nth-child(5) {
  border-top-color: var(--yellow);
}

.signal:nth-child(3) {
  border-top-color: var(--purple);
}

.signal strong {
  display: block;
  color: var(--navy);
  max-width: 100%;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@supports (font-size: 10cqw) {
  .signal strong {
    font-size: clamp(1.85rem, 19cqw, 3.4rem);
  }
}

.signal span {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1.5;
}

.content-band,
.insights-band,
.insights-list-band,
.resources-band,
.supporter-band {
  padding: clamp(58px, 7vw, 88px) clamp(22px, 6vw, 84px);
}

.section-heading {
  max-width: 860px;
  margin-bottom: 36px;
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  max-width: none;
}

.section-heading-row > div {
  max-width: 860px;
}

.section-heading-row .button {
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.section-heading-compact {
  margin-top: clamp(48px, 6vw, 72px);
  margin-bottom: 22px;
}

.section-heading p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.08rem;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.case-item {
  min-height: 260px;
  padding: 26px;
  border-left: 6px solid var(--mint);
  background: var(--wash);
  border-radius: 8px;
}

.case-item:nth-child(2) {
  border-color: var(--yellow);
}

.case-item:nth-child(3) {
  border-color: var(--purple);
}

.case-item p {
  color: var(--muted);
  margin-bottom: 0;
}

.change-band {
  position: relative;
  padding: clamp(58px, 7vw, 88px) clamp(22px, 6vw, 84px);
  color: white;
  background: var(--navy);
  overflow: hidden;
}

.change-band::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 115px;
  background: url("assets/skyline/skyline-green.png") center 45% / cover no-repeat;
  opacity: 0.26;
}

.change-inner {
  position: relative;
  z-index: 2;
}

.change-band h2,
.change-band h3 {
  color: white;
}

.change-band .eyebrow {
  color: var(--yellow);
}

.change-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: 60px;
}

.change-list div {
  min-height: 214px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.change-list span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--navy);
  background: var(--mint);
  border-radius: 50%;
  font-weight: 900;
}

.change-list p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
}

.ascp-band {
  position: relative;
  padding: clamp(60px, 7vw, 96px) clamp(22px, 6vw, 84px);
  background:
    linear-gradient(135deg, rgba(223, 246, 244, 0.74), rgba(255, 255, 255, 0.96) 48%, rgba(244, 207, 65, 0.18)),
    white;
  overflow: hidden;
}

.ascp-band::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -190px;
  width: 420px;
  height: 420px;
  background: url("assets/brand/a-cropped-green.png") center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
}

.ascp-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.84fr) minmax(320px, 1.16fr);
  gap: clamp(30px, 6vw, 72px);
  align-items: center;
  max-width: 1180px;
}

.ascp-logo-panel {
  position: relative;
  min-height: 220px;
  display: grid;
  align-items: center;
  padding: clamp(22px, 4vw, 42px) 0;
}

.ascp-logo-panel::before,
.ascp-logo-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: clamp(40px, 8vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, rgba(16, 43, 77, 0.28), rgba(16, 43, 77, 0));
}

.ascp-logo-panel::before {
  top: 0;
}

.ascp-logo-panel::after {
  bottom: 0;
}

.ascp-logo-panel img {
  width: min(100%, 560px);
  height: auto;
}

.ascp-copy {
  max-width: 680px;
}

.ascp-copy h2 {
  max-width: 620px;
  margin-bottom: 18px;
}

.ascp-copy p:not(.eyebrow) {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 1.12rem;
}

.resources-band {
  background: var(--wash);
}

.insights-band {
  background: white;
}

.insights-list-band {
  background: var(--wash);
  padding-top: clamp(30px, 4.5vw, 52px);
}

.page-hero.insights-hero,
.page-hero.compact-page-hero {
  min-height: 0;
  padding-top: clamp(42px, 6vw, 70px);
  padding-bottom: clamp(26px, 4vw, 42px);
}

.page-hero.insights-hero::after,
.page-hero.compact-page-hero::after {
  width: 240px;
  height: 240px;
  opacity: 0.1;
}

.page-hero.insights-hero h1,
.page-hero.compact-page-hero h1 {
  max-width: 680px;
  margin-bottom: 12px;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.02;
}

.featured-insight {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(320px, 1.22fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: stretch;
  max-width: 1180px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(16, 43, 77, 0.08);
}

.featured-insight-media {
  display: grid;
  place-items: center;
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(105, 206, 200, 0.3), rgba(244, 207, 65, 0.18)),
    var(--wash);
}

.featured-insight-media img {
  width: min(70%, 320px);
  max-height: 330px;
  object-fit: contain;
  opacity: 0.86;
}

/* When the editor has uploaded a real hero photograph, drop the brand
   wash + faded-decoration treatment and let the image fill the entire
   media tile edge-to-edge. The brand-decoration treatment above stays
   the default for posts without an uploaded image. */
.featured-insight-media--photo {
  background: none;
  padding: 0;
}

.featured-insight-media--photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 360px;
  object-fit: cover;
  opacity: 1;
}

/* Title and Read-insight links inside the hero/cards shouldn't look like
   default underlined link text — keep the heading colour, hover hints
   the affordance. */
.featured-insight-copy h2 a,
.insight-card h3 a {
  color: inherit;
  text-decoration: none;
}
.featured-insight-copy h2 a:hover,
.featured-insight-copy h2 a:focus-visible,
.insight-card h3 a:hover,
.insight-card h3 a:focus-visible {
  text-decoration: underline;
}

/* ---------- Insight detail page (/insights/<slug>) ---------- */

.insight-article-hero .insight-tag {
  margin-bottom: 12px;
}

.insight-article-hero .eyebrow a {
  color: inherit;
  text-decoration: none;
}
.insight-article-hero .eyebrow a:hover,
.insight-article-hero .eyebrow a:focus-visible {
  text-decoration: underline;
}

.insight-article-meta {
  color: var(--muted);
  margin-top: 12px;
}

.insight-article-band {
  background: var(--wash);
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 56px) clamp(60px, 8vw, 96px);
}

.insight-article-shell {
  max-width: 880px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(16, 43, 77, 0.08);
  overflow: hidden;
}

.insight-article-figure {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 320px;
  background:
    linear-gradient(135deg, rgba(105, 206, 200, 0.3), rgba(244, 207, 65, 0.18)),
    var(--wash);
}

.insight-article-figure--decoration img {
  width: min(60%, 280px);
  max-height: 280px;
  object-fit: contain;
  opacity: 0.86;
}

.insight-article-figure--photo {
  background: none;
}

.insight-article-figure--photo img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.insight-article-body {
  padding: clamp(28px, 5vw, 56px);
}

.insight-article-lede {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.insight-article-body h2,
.insight-article-body h3,
.insight-article-body h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.insight-article-body p,
.insight-article-body ul,
.insight-article-body ol,
.insight-article-body blockquote {
  margin-bottom: 1.1em;
  line-height: 1.65;
}

.insight-article-body ul,
.insight-article-body ol {
  padding-left: 1.4em;
}

.insight-article-body blockquote {
  border-left: 4px solid var(--accent, #69ceca);
  padding: 0.4em 1em;
  color: var(--muted);
  font-style: italic;
}

.insight-article-cta {
  margin-top: 2rem;
}

.insight-article-back {
  margin-top: 2.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}

.insight-article-status {
  color: var(--muted);
}

.featured-insight-copy {
  align-self: center;
  padding: clamp(24px, 5vw, 48px) clamp(24px, 5vw, 56px) clamp(24px, 5vw, 48px) 0;
}

.featured-insight-copy .eyebrow {
  margin-bottom: 10px;
}

.featured-insight-copy h2 {
  margin-bottom: 18px;
  /* Slightly larger than the global section h2 so the featured story
     reads as the heaviest in-card heading, but still subordinate to the
     compact page-hero h1 (max 3rem) above it. */
  font-size: clamp(1.6rem, 2.9vw, 2.4rem);
  line-height: 1.1;
}

.featured-insight-copy > p:not(.insight-tag):not(.eyebrow) {
  max-width: 660px;
  color: var(--muted);
  font-size: 1.12rem;
}

.insight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.featured-insight-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  margin-top: 6px;
}

.insight-meta span {
  padding: 7px 10px;
  color: var(--navy);
  background: var(--mint-soft);
  border-radius: 6px;
  font-weight: 900;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.insight-grid-preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insight-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  min-height: 268px;
  padding: 22px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

/* Cards with a hero image switch to a vertical stack: full-bleed
   media strip on top, then the date+copy block (which keeps the
   original 72px-date / copy two-column grid). */
.insight-card--with-media {
  grid-template-columns: 1fr;
  /* Pin the row tracks so the image is always its 16:9 height and the
     body fills whatever remains. Without this the implicit `auto auto`
     rows distribute stretch unpredictably across cards in a row, so
     the date pip in some cards drifts up or down vs its neighbours
     when the body content is shorter than the row height. */
  grid-template-rows: auto 1fr;
  padding: 0;
}

.insight-card--with-media .insight-card-body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  /* The single row stretches to fill the body height (which itself is
     the `1fr` row of the card grid). Items within the row are then
     individually controlled: date pip stays at top via `align-self`,
     while the text column stretches so its "Read insight" link can be
     pushed to the bottom with margin-top:auto. */
  align-items: stretch;
  gap: 18px;
  padding: 22px;
}

/* Date pip sticks to the top of the body, flush with the eyebrow row
   of the copy column, regardless of how tall the body has stretched. */
.insight-card--with-media .insight-date {
  align-self: start;
  align-content: start;
  padding-top: 6px;
}

/* Make the copy column a vertical flexbox so the "Read insight" link
   can be pinned to the bottom (margin-top:auto). This way the link
   aligns across all cards in a row even when titles wrap to a
   different number of lines. */
.insight-card--with-media .insight-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.insight-card--with-media .insight-card-cta {
  margin-top: auto;
  padding-top: 8px;
}

/* Cap excerpts at ~10 lines so an over-long intro doesn't push the
   "Read insight" link well below the fold of the card. The bottom
   fade is added by JS (markClampedExcerpts) only when the text is
   actually being truncated, so short excerpts stay crisp. */
.insight-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.insight-card-excerpt.is-clamped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent 100%);
}

.insight-card--with-media .insight-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--mint-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.insight-card--with-media .insight-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease-out;
}

.insight-card--with-media:hover .insight-card-media img,
.insight-card--with-media:focus-within .insight-card-media img {
  transform: scale(1.03);
}

.insights-list-band .insight-card {
  background: white;
}

/* Align the article grid with the featured-insight card above it: same
   1180px max-width and a 3-column track so 3 cards fill the row exactly
   and additional posts wrap to a new row. */
.insights-list-band .insight-grid,
.insights-list-band .featured-insight,
.insights-list-band .section-heading-compact {
  max-width: 1180px;
}

.insights-list-band .insight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insight-card h3 {
  margin-bottom: 10px;
}

.insight-card p:not(.insight-tag) {
  color: var(--muted);
}

.insight-date {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 72px;
  height: 72px;
  color: var(--navy);
  background: white;
  border: 1px solid var(--mint);
  border-radius: 8px;
}

.insights-list-band .insight-date {
  background: var(--mint-soft);
}

.insight-date span,
.insight-tag {
  color: var(--purple);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.insight-date strong {
  color: var(--navy);
  font-size: 1rem;
  line-height: 1;
}

/* The day number is the dominant element in the date pip — sized to
   fill the 72×72 square without changing the pip dimensions. The
   month abbreviation sits above it and the year below, both using
   the existing small uppercase treatment. */
.insight-date strong.insight-date-day {
  font-size: 1.55rem;
  font-weight: 500;
  margin: 1px 0;
}

.insight-tag {
  margin-bottom: 8px;
}

.support-cta-band {
  padding: clamp(58px, 7vw, 88px) clamp(22px, 6vw, 84px);
  background: white;
}

.support-cta-band .section-heading {
  margin-bottom: 0;
}

.support-cta-band .button {
  margin-top: 12px;
}

.page-hero {
  position: relative;
  padding: clamp(72px, 10vw, 118px) clamp(22px, 6vw, 84px) clamp(46px, 6vw, 76px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 62%, rgba(223, 246, 244, 0.88) 100%),
    var(--wash);
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 360px;
  height: 360px;
  background: url("assets/brand/a-cropped-green.png") center / contain no-repeat;
  opacity: 0.15;
}

.page-hero .section-heading {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

.page-hero h1 {
  margin-bottom: 18px;
}

.supporters-page .supporter-band {
  padding-top: clamp(26px, 4vw, 44px);
  grid-template-columns: minmax(0, 1920px);
  justify-content: start;
  gap: 28px;
}

.supporters-page .wall-wrap {
  max-width: 1920px;
}

.supporters-page .supporter-intro,
.supporters-page .wall-wrap {
  width: 100%;
}

.supporters-page .page-hero {
  padding-bottom: clamp(28px, 4vw, 42px);
}

.supporters-page .supporter-intro .section-heading {
  margin-bottom: 20px;
}

.supporters-page .wall-wrap {
  order: 1;
}

.supporters-page .supporter-intro {
  order: 2;
}

.support-actions {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}

.support-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 1180px;
  margin: 0 auto;
}

.support-action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mint-soft, #dff6f4);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 12px 35px rgba(16, 43, 77, 0.08);
  overflow: hidden;
}

.support-action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--mint, #69cec8);
}

.support-action-eyebrow {
  color: var(--navy, #102b4d);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.support-action-card h2 {
  color: var(--navy, #102b4d);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
}

.support-action-card > p:not(.support-action-eyebrow):not(.support-action-meta) {
  color: #29394b;
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 46ch;
}

#supportForm {
  scroll-margin-top: 96px;
}

.support-action-cta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.support-action-cta .button {
  min-height: 50px;
  padding-inline: 22px;
  font-weight: 800;
}

.support-action-meta {
  margin: 16px 0 0;
  color: var(--muted, #52606f);
  font-size: 0.92rem;
}

@media (max-width: 760px) {
  .support-actions-grid {
    grid-template-columns: 1fr;
  }
}

.lead-form,
.support-form,
.download-panel,
.wall-wrap {
  max-width: 1040px;
  padding: clamp(22px, 4vw, 34px);
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(16, 43, 77, 0.08);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--navy);
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--ink);
  background: white;
  border: 1px solid #b9c9d3;
  border-radius: 6px;
  font: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(244, 207, 65, 0.42);
  border-color: var(--cta);
}

textarea {
  min-height: 118px;
  resize: vertical;
}

fieldset {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
  padding: 0;
  border: 0;
}

legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--navy);
  font-weight: 900;
}

.check-row,
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
}

.check-row {
  min-height: 58px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

.check-row input,
.consent input {
  width: 19px;
  min-width: 19px;
  height: 19px;
  min-height: 19px;
  margin-top: 2px;
  accent-color: var(--cta);
}

.consent {
  margin-bottom: 24px;
  max-width: 900px;
  color: var(--muted);
  font-weight: 400;
}

.form-notice {
  margin: 8px 0 16px;
  max-width: 900px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.form-notice a {
  color: inherit;
  text-decoration: underline;
}

.form-status {
  min-height: 24px;
  margin: 16px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.form-status[data-state="error"] {
  color: var(--danger);
}

.download-panel {
  margin-top: 22px;
}

.resource-teaser-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(42px, 6vw, 72px);
}

.resource-teaser {
  display: grid;
  grid-template-rows: 180px minmax(0, 1fr);
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(16, 43, 77, 0.08);
  /* Cards are links down to the request form. Reset anchor defaults and
     add a clear interactive affordance so people know they're clickable. */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.resource-teaser:hover,
.resource-teaser:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(16, 43, 77, 0.16);
}

.resource-teaser:focus-visible {
  outline: 3px solid var(--mint, #69cec8);
  outline-offset: 3px;
}

.resource-teaser > div:last-child {
  padding: 22px;
}

.resources-form-heading {
  scroll-margin-top: 104px;
}

.resource-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--navy, #102b4d);
}

.resource-teaser:hover .resource-teaser-cta,
.resource-teaser:focus-visible .resource-teaser-cta {
  text-decoration: underline;
}

.resource-teaser h2 {
  margin-bottom: 12px;
  font-size: clamp(1.32rem, 2vw, 1.82rem);
  line-height: 1.08;
}

.resource-teaser p:not(.insight-tag) {
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 700;
}

.resource-teaser-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(105, 206, 200, 0.26), rgba(244, 207, 65, 0.2)),
    var(--wash);
}

.resource-teaser-media-light {
  background: white;
}

.resource-teaser-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resource-teaser-media:not(.resource-teaser-media-light) img {
  width: 72%;
  height: 72%;
}

/* Edge-to-edge photo treatment for admin-uploaded card images: mirrors
   the insight-card hover-zoom feel so admin-styled covers look editorial
   rather than letterboxed onto the default gradient wash. The default
   (.resource-teaser-media without this modifier) keeps contain + the
   centered brand-decoration look used by the legacy bundled defaults. */
/* Photo-card variant: admin-uploaded landscape compositions are shown at
   their natural aspect ratio with no crop, no letterbox bar, and no
   background colour bleeding through. We override the parent grid row
   (which is otherwise locked to 180px and forces cropping / strips on
   narrow viewports) and let the image dictate its own height. */
.resource-teaser:has(.resource-teaser-media--photo) {
  grid-template-rows: auto minmax(0, 1fr);
}

.resource-teaser-media--photo {
  background: transparent;
  display: block;
}

.resource-teaser-media--photo img,
.resource-teaser-media--photo:not(.resource-teaser-media-light) img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
  transition: transform 320ms ease-out;
}

.resource-teaser:hover .resource-teaser-media--photo img,
.resource-teaser:focus-within .resource-teaser-media--photo img {
  transform: scale(1.03);
}

.resources-form-heading {
  margin-bottom: 22px;
}

.download-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.download-link {
  min-height: 126px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
  text-decoration: none;
}

.download-link:hover {
  border-color: var(--cta);
  box-shadow: 0 12px 28px rgba(244, 207, 65, 0.2);
}

.download-link strong {
  display: block;
  color: var(--navy);
  font-size: 1.05rem;
}

.download-link span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.supporter-band {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  gap: 28px;
  align-items: start;
}

.support-form {
  display: grid;
  gap: 16px;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.logo-review {
  padding: 16px;
  background: var(--mint-soft);
  border: 1px solid var(--mint);
  border-radius: 8px;
}

.logo-review h3 {
  margin-bottom: 14px;
}

.logo-preview-frame {
  display: grid;
  place-items: center;
  width: 202px;
  height: 202px;
  margin-bottom: 16px;
  background:
    linear-gradient(45deg, #eef4f5 25%, transparent 25%),
    linear-gradient(-45deg, #eef4f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef4f5 75%),
    linear-gradient(-45deg, transparent 75%, #eef4f5 75%);
  background-color: white;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.logo-preview-frame img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  padding: 10px;
}

.logo-review[data-logo-treatment="navy-tint"] .logo-preview-frame {
  background: white;
}

.logo-review[data-logo-treatment="navy-tint"] .logo-preview-frame img,
.supporter-card[data-logo-treatment="navy-tint"] img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(58%) saturate(1051%) hue-rotate(178deg) brightness(85%) contrast(92%);
}

.logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.logo-candidates {
  margin-bottom: 16px;
}

.logo-candidates-hint {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--ink-soft, #4a5b66);
}

.logo-candidates-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.logo-candidate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: white;
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.logo-candidate:hover,
.logo-candidate:focus-visible {
  border-color: var(--mint, #6fbfb0);
  outline: none;
}

.logo-candidate[aria-pressed="true"] {
  border-color: var(--navy, #14304a);
  box-shadow: 0 0 0 2px var(--navy, #14304a) inset;
}

.logo-candidate img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background:
    linear-gradient(45deg, #eef4f5 25%, transparent 25%),
    linear-gradient(-45deg, #eef4f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef4f5 75%),
    linear-gradient(-45deg, transparent 75%, #eef4f5 75%);
  background-color: white;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
  border-radius: 4px;
}

.logo-candidate-meta {
  font-size: 0.72rem;
  color: var(--ink-soft, #4a5b66);
  line-height: 1.2;
}

.wall-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.wall-heading h3 {
  margin-bottom: 0;
}

.admin-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px 14px;
  color: var(--navy);
  background: #fff8d8;
  border: 1px solid var(--yellow);
  border-radius: 8px;
}

.admin-tools span {
  color: var(--muted);
  font-weight: 700;
}

.text-button {
  border: 0;
  border-bottom: 3px solid var(--cta);
  padding: 0 0 2px;
  background: transparent;
  color: var(--cta-ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.supporter-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.supporter-card {
  display: grid;
  place-items: center;
  min-height: 268px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: center;
  text-decoration: none;
}

.supporter-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.supporter-card img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.supporter-card span {
  margin-top: 10px;
  color: var(--navy);
  font-weight: 900;
}

.wall-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}

.wall-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  color: var(--cta-ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.wall-pagination button[aria-current="page"] {
  color: var(--cta-ink);
  background: var(--cta);
  border-color: var(--cta);
}

.wall-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.remove-supporter {
  min-height: 40px;
  margin-top: 16px;
  padding: 0 16px;
  color: white;
  background: var(--danger);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.remove-supporter:disabled {
  cursor: wait;
  opacity: 0.72;
}

.empty-wall {
  grid-column: 1 / -1;
  padding: 22px;
  color: var(--muted);
  background: var(--wash);
  border-radius: 8px;
}

.admin-band {
  padding: clamp(42px, 6vw, 78px) clamp(22px, 6vw, 84px);
  background: var(--wash);
}

.admin-hero {
  min-height: 320px;
}

.admin-login-actions {
  margin-top: 24px;
}

.admin-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-sidebar,
.admin-panel,
.admin-form,
.admin-card {
  padding: clamp(20px, 3vw, 28px);
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(16, 43, 77, 0.08);
}

.admin-dialog {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  width: min(520px, 92vw);
  box-shadow: 0 20px 60px rgba(16, 43, 77, 0.25);
}
.admin-dialog::backdrop {
  background: rgba(16, 32, 51, 0.45);
}
.admin-dialog .admin-form {
  box-shadow: none;
  border: 0;
  border-radius: 10px;
  display: grid;
  gap: 14px;
}
.admin-dialog .form-field {
  display: grid;
  gap: 4px;
}
.admin-dialog .form-field > span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}
.admin-dialog .form-field input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.admin-sidebar {
  position: sticky;
  top: 102px;
}

.admin-sidebar h2 {
  margin-bottom: 8px;
  font-size: 1.4rem;
}

.admin-sidebar p:not(.eyebrow) {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-main {
  min-width: 0;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-tab {
  min-height: 42px;
  padding: 0 16px;
  color: var(--cta-ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-tab.is-active {
  color: var(--cta-ink);
  background: var(--cta);
  border-color: var(--cta);
}

.admin-panel {
  display: none;
}

.admin-panel.is-active {
  display: block;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px 22px;
  margin-bottom: 14px;
}

.admin-filter {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-filter select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  font: inherit;
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0;
}

.admin-filter-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.admin-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.consent-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.consent-pill-yes {
  background: #e2f4ea;
  color: #0f6b3a;
  border-color: #b9e1c9;
}

.consent-pill-no {
  background: #fdeaea;
  color: #9b1c1c;
  border-color: #f5bcbc;
}

.consent-pill-unknown {
  background: var(--wash);
  color: var(--muted);
  border-color: var(--line);
}

/* "Not in CRM" badge — rendered next to the consent pill on supporter
   and download admin rows for anyone who didn't opt in to marketing
   (and therefore was deliberately NOT pushed to Zoho). Same pill shape
   as .consent-pill so the two read as a group; muted amber palette so
   it reads as informational, not error. */
.crm-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  margin-left: 4px;
  vertical-align: middle;
}

.crm-pill-skipped {
  background: #fdf3dc;
  color: #7a5300;
  border-color: #f0d28a;
}

/* Moderation status pills for the supporter wall — same shape as the
   consent pill, different palette so admins can pick out pending vs
   approved vs rejected at a glance. */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-pill-pending {
  background: #fff4d6;
  color: #8a5a00;
  border-color: #f0d68a;
}

.status-pill-approved {
  background: #e2f4ea;
  color: #0f6b3a;
  border-color: #b9e1c9;
}

.status-pill-rejected {
  background: #fdeaea;
  color: #9b1c1c;
  border-color: #f5bcbc;
}

.admin-table-wrap {
  max-width: 100%;
  margin-bottom: 26px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  background: white;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  /* ~2pt smaller than the page body so dense admin tables fit more on
     a row without needing horizontal scroll. */
  font-size: 0.82rem;
}

.admin-table th {
  color: var(--navy);
  background: var(--wash);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.admin-table td {
  color: var(--muted);
  /* Bold was visually heavy and ate horizontal space. Regular weight
     reads more cleanly for a dense listing. */
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* Compact, single-row action cluster used inside admin tables. Each
   button is small enough that 3-4 of them sit on one line without
   wrapping into a vertical stack like the old full-size .button
   variants did. The cell aligns to the right so the action column
   stays visually anchored to the edge of the table. */
.admin-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

/* Supporters table uses a 2x2 grid so Approve/Reject sit on the first
   row and Edit/Delete on the second, giving a tidy, predictable shape
   regardless of moderation status. */
.row-actions-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 6px;
  min-width: 168px;
}

.row-button[aria-current="true"],
.row-button[disabled][aria-current="true"] {
  opacity: 1;
  cursor: default;
  filter: none;
  /* Render the active-state button as a "current" pill so admins can
     read row state at a glance even without the status column. */
  background: var(--wash);
  color: var(--navy);
  border-color: var(--line);
  font-weight: 800;
}

.row-button {
  appearance: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: white;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.row-button:hover { filter: brightness(0.97); }
.row-button:disabled { cursor: wait; opacity: 0.55; }

.row-button-approve {
  background: #0f6b3a;
  color: white;
  border-color: #0f6b3a;
}

.row-button-reject {
  background: white;
  color: var(--navy);
  border-color: var(--line);
}

.row-button-edit {
  background: var(--wash);
  color: var(--navy);
  border-color: var(--line);
}

.row-button-delete {
  background: white;
  color: var(--danger);
  border-color: #f5bcbc;
}

.row-button-delete:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.admin-form {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.admin-form .form-hint {
  display: inline;
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
}

.admin-form-divider {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.admin-form-divider h4 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.admin-form-divider p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.admin-form .admin-textarea-compact {
  min-height: 64px;
}

.resource-image-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.resource-image-upload {
  flex: 1 1 260px;
  min-width: 240px;
}

.resource-image-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.resource-image-preview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  background: white;
  border: 1px solid var(--line);
}

.resource-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* Insights deliberately use a single-column list of wider rows instead of
   a tight grid. Editors need to read the title + excerpt at a glance and
   the hero thumbnail wants real estate. The card itself is a horizontal
   flex layout (thumb | content | actions) defined inline in admin.js. */
.insight-admin-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.insight-admin-list .admin-card {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 22px;
  align-items: stretch;
  padding: 18px;
}

.insight-admin-list .admin-card > .insight-admin-thumb {
  width: 200px;
  height: 130px;
  border-radius: 6px;
  background: var(--wash);
  object-fit: cover;
  flex-shrink: 0;
}

.insight-admin-list .admin-card > .insight-admin-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px dashed var(--line);
}

.insight-admin-list .admin-card > .insight-admin-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insight-admin-list .admin-card > .insight-admin-body h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.insight-admin-list .admin-card > .insight-admin-body .insight-admin-excerpt {
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.insight-admin-list .admin-card > .insight-admin-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
}

.insight-admin-publish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin-bottom: 4px;
}

.insight-admin-publish input {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
}

.insight-admin-publish input:disabled {
  cursor: progress;
  opacity: 0.5;
}

@media (max-width: 720px) {
  .insight-admin-list .admin-card {
    grid-template-columns: 1fr;
  }
  .insight-admin-list .admin-card > .insight-admin-thumb,
  .insight-admin-list .admin-card > .insight-admin-thumb--placeholder {
    width: 100%;
    height: 160px;
  }
  .insight-admin-list .admin-card > .insight-admin-actions {
    flex-direction: row;
    align-self: stretch;
  }
}

.admin-card {
  box-shadow: none;
}

.admin-card h3 {
  margin-bottom: 10px;
}

.admin-card p:not(.insight-tag),
.admin-card span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-card-meta {
  font-size: 0.85rem;
  margin-top: 4px;
}

.admin-card-meta strong {
  color: var(--ink);
  margin-right: 4px;
}

.admin-card-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(16, 43, 77, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}

.admin-empty {
  color: var(--muted);
  font-style: italic;
  padding: 12px 0;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr);
  gap: 36px;
  align-items: start;
  padding: 38px clamp(22px, 6vw, 84px);
  color: white;
  background: var(--navy);
}

.footer-brand img {
  width: min(100%, 292px);
  margin-bottom: 18px;
}

.site-footer p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.84);
}

.site-footer h2 {
  margin-bottom: 14px;
  color: var(--mint);
  font-size: 1rem;
  text-transform: uppercase;
}

.footer-contact,
.footer-social {
  display: grid;
  gap: 10px;
}

.footer-contact a,
.footer-social a,
.footer-contact address {
  color: rgba(255, 255, 255, 0.88);
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

.footer-contact a:hover,
.footer-social a:hover {
  color: var(--yellow);
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-banner {
  position: fixed;
  left: clamp(14px, 4vw, 28px);
  right: clamp(14px, 4vw, 28px);
  bottom: clamp(14px, 4vw, 28px);
  z-index: 80;
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(16, 43, 77, 0.22);
}

.cookie-banner h2 {
  margin-bottom: 6px;
  font-size: 1.2rem;
}

.cookie-banner p {
  margin-bottom: 0;
  color: var(--muted);
}

.cookie-banner a {
  color: var(--navy);
}

.cookie-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.cookie-settings-button {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 70;
  min-height: 34px;
  padding: 0 12px;
  color: var(--navy);
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(16, 43, 77, 0.12);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 980px) {
  .site-header {
    flex-wrap: wrap;
  }

  .site-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .signal-grid,
  .case-grid,
  .change-list,
  .insight-grid,
  .resource-teaser-grid,
  .download-list,
  .ascp-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-insight {
    grid-template-columns: 1fr;
  }

  .featured-insight-copy {
    padding: 0 clamp(24px, 5vw, 44px) clamp(26px, 5vw, 44px);
  }

  .section-heading-row {
    display: grid;
    align-items: start;
  }

  .section-heading-row .button {
    justify-self: start;
    margin-bottom: 0;
  }

  .support-form-grid {
    grid-template-columns: 1fr;
  }

  .supporter-band {
    grid-template-columns: 1fr;
  }

  fieldset {
    grid-template-columns: 1fr;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
  }

  .cookie-banner {
    display: grid;
    align-items: start;
  }

  .cookie-actions {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .site-header {
    position: static;
    gap: 14px;
  }

  .brand img {
    width: 190px;
  }

  .brand-lockup {
    width: auto;
  }

  .ascp-brand {
    min-width: 0;
    gap: 8px;
  }

  .ascp-brand img {
    width: 84px;
  }

  .hero {
    min-height: 720px;
    padding-top: 58px;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .signal-grid,
  .case-grid,
  .change-list,
  .insight-grid,
  .resource-teaser-grid,
  .form-grid,
  .support-form-grid,
  .download-list,
  .supporter-wall,
  fieldset,
  .ascp-inner {
    grid-template-columns: 1fr;
  }

  .campaign-summary {
    padding-left: 18px;
  }

  .ascp-logo-panel {
    min-height: 0;
    padding: 10px 0 22px;
  }

  .featured-insight-media {
    min-height: 240px;
  }

  .insight-card {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }
}

/* ---------- Scroll-reveal animation (paired with /scroll-reveal.js) ----- */

/* The .reveal class is added by JS to every element it intends to
   animate in. Hiding via a JS-applied class avoids a flash of
   invisible content for visitors with JS disabled. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-in-view {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   Email templates tab
   ===================================================================== */
.email-template-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.email-template-card {
  background: #ffffff;
  border: 1px solid #d9e3e8;
  border-radius: 10px;
  padding: 16px 18px;
}
.email-template-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.email-template-card-head h4 {
  margin: 0;
  font-size: 1rem;
  color: #102b4d;
}
.email-template-status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.email-template-status-default { background: #eef3f4; color: #52606f; }
.email-template-status-custom  { background: #d8efe9; color: #166d63; }
.email-template-meta {
  margin: 2px 0 10px;
  font-size: 0.78rem;
  color: #7a8896;
}

.email-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  margin-top: 12px;
}
@media (max-width: 920px) {
  .email-editor-grid { grid-template-columns: 1fr; }
}
.email-editor-main { display: flex; flex-direction: column; gap: 14px; }
.email-editor-main .form-field > span {
  display: block;
  font-size: 0.85rem;
  color: #102b4d;
  margin-bottom: 4px;
  font-weight: 600;
}
.email-editor-main .form-field input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9e3e8;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}
#emailEditorBody { background: #ffffff; min-height: 260px; }
#emailEditorBody .ql-editor {
  min-height: 220px;
  font-size: 0.95rem;
  font-family: inherit;
}

.email-editor-test {
  margin-top: 10px;
  padding: 14px 16px;
  background: #f4f8f8;
  border: 1px solid #d9e3e8;
  border-radius: 10px;
}
.email-editor-test h4 { margin: 0 0 4px; color: #102b4d; font-size: 0.95rem; }
.email-editor-test-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.email-editor-test-row input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d9e3e8;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}

.email-editor-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.email-editor-vars {
  background: #ffffff;
  border: 1px solid #d9e3e8;
  border-radius: 10px;
  padding: 14px 16px;
}
.email-editor-vars h4 { margin: 0 0 4px; color: #102b4d; font-size: 0.95rem; }
.email-editor-vars ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-var-chip {
  width: 100%;
  text-align: left;
  background: #f4f8f8;
  border: 1px solid #d9e3e8;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
}
.email-var-chip:hover { background: #e7eff0; }
.email-var-chip code {
  font-size: 0.78rem;
  color: #102b4d;
  background: transparent;
  padding: 0;
}
.email-var-chip span { font-size: 0.78rem; color: #52606f; }

.email-editor-preview {
  background: #ffffff;
  border: 1px solid #d9e3e8;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.email-editor-preview h4 {
  margin: 0 0 8px;
  color: #102b4d;
  font-size: 0.95rem;
}
.email-editor-preview iframe {
  width: 100%;
  height: 520px;
  border: 1px solid #e7eff0;
  border-radius: 6px;
  background: #f4f8f8;
}

.email-template-badges { display: flex; gap: 6px; align-items: center; }
.email-template-status-on  { background: #d8efe9; color: #166d63; }
.email-template-status-off { background: #fde7d8; color: #8a3a08; }
.email-template-card-off { opacity: 0.78; border-style: dashed; }

.email-editor-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #f4f8f8;
  border: 1px solid #d9e3e8;
  border-radius: 10px;
  cursor: pointer;
}
.email-editor-toggle.is-off {
  background: #fff5ec;
  border-color: #f1c89a;
}
.email-editor-toggle input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.email-editor-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.email-editor-toggle-text strong { color: #102b4d; font-size: 0.95rem; }
.email-editor-toggle-text small { color: #52606f; font-size: 0.82rem; line-height: 1.45; }

/* Inline kill-switch on the email templates list cards. */
.email-template-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.email-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.email-toggle-switch input { position: absolute; opacity: 0; pointer-events: none; }
.email-toggle-track {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: #c8d3da;
  border-radius: 999px;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.email-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.15s ease;
}
.email-toggle-switch input:checked + .email-toggle-track { background: #166d63; }
.email-toggle-switch input:checked + .email-toggle-track .email-toggle-thumb { transform: translateX(18px); }
.email-toggle-switch input:focus-visible + .email-toggle-track {
  box-shadow: 0 0 0 3px rgba(22, 109, 99, 0.35);
}
.email-toggle-label {
  font-size: 0.85rem;
  color: #52606f;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
   Email-my-MP wizard (Task #22). Constrained-width single-column
   form panel with a numbered progress strip across the top.
   The numbers are rendered via a CSS counter on the <ol>; the
   <li> text deliberately omits them so we never double up.
   ────────────────────────────────────────────────────────────── */
.wizard-shell {
  max-width: 720px;
  margin: 0 auto;
}

.wizard-progress {
  list-style: none;
  counter-reset: mp-step;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: #6a7682;
}

.wizard-progress li {
  counter-increment: mp-step;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wizard-progress li::before {
  content: counter(mp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #e6ebf0;
  color: #52606f;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

.wizard-progress li.is-active {
  color: #1f2a37;
  font-weight: 600;
}

.wizard-progress li.is-active::before {
  background: #1f6feb;
  color: #fff;
}

/* Radios in the "Are you writing as:" fieldset shouldn't wrap tightly —
   give the label text room to flow on a single line where possible, and
   wrap normally (not character-by-character) when it has to break.
   Fieldsets have a UA `min-inline-size: min-content` quirk that stops
   them filling their grid/flex parent; the `min-width:0` + `width:100%`
   override forces it to span the full wizard column. */
.role-fieldset {
  display: block;
  width: 100%;
  min-width: 0;
}
.role-fieldset .consent {
  align-items: center;
  max-width: none;
  line-height: 1.4;
  width: 100%;
}
.role-fieldset .consent span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* MP-emails admin tab: live / test-mode banner. Two state classes
   (live = green, test = amber) replace a pile of inline styles that
   used to ship with the markup. */
.mp-mode-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #f9fafb;
}
.mp-mode-banner-live {
  background: #f0fdf4;
  border-color: #86efac;
}
.mp-mode-banner-test {
  background: #fef3c7;
  border-color: #fbbf24;
}
.mp-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
}
/* Global `input { width:100%; min-height:48px }` rule turns this checkbox
   into a giant blue card, which then squashes the label text into one
   character per line. Force it back to a normal checkbox size. */
.mp-mode-toggle input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--cta);
}
.mp-mode-status {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.mp-mode-banner-live .mp-mode-status strong { color: #166534; }
.mp-mode-banner-test .mp-mode-status strong { color: #9a3412; }