:root {
  --coastal-navy: #0B3D91;
  --ocean-blue: #1976D2;
  --coastal-teal: #0F766E;
  --coastside-green: #2E7D32;
  --coastal-orange: #F57C00;
  --coastal-orange-dark: #D96E00;
  --sunset-gold: #FFC107;
  --sand: #B3D9FF;
  --slate: #607D8B;
  --seafoam: #F1F7F4;
  --white: #FFFFFF;

  --font-headline: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, sans-serif;

  --radius: 10px;
  --max-width: 1160px;
}

* { box-sizing: border-box; }
/* Force light mode explicitly. Without this, dark-mode-aware mobile browsers
   (Firefox in particular) paint unstyled areas — the overscroll/rubber-band
   region above and below the page, and anywhere shorter than the viewport —
   with a black default canvas when the OS is in dark mode, instead of falling
   back to white. Chrome doesn't do this as aggressively, which is why the two
   looked different on the same phone. */
html { scroll-behavior: smooth; background: #FFFFFF; color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: #1c2b3a;
  background: var(--white);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-headline); color: var(--coastal-navy); margin: 0 0 0.5em; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: var(--ocean-blue); }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }
.section-seafoam { background: var(--seafoam); }
.section-navy { background: var(--coastal-navy); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coastal-teal);
  margin-bottom: 10px;
  display: block;
}
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.section-head p { color: var(--slate); font-size: 1.05rem; margin: 0; }
.section-head.left { text-align: left; margin: 0 0 36px; }

/* Buttons — three tiers: Orange primary, Teal secondary, Slate ghost tertiary,
   plus a calm Sand/Navy style reserved for the persistent nav Donate button. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--coastal-orange);
  color: var(--white);
  border-color: var(--coastal-orange-dark);
  box-shadow: 0 4px 12px rgba(245,124,0,0.28);
}
.btn-primary:hover {
  background: var(--coastal-orange-dark);
  border-color: var(--coastal-orange-dark);
  box-shadow: 0 8px 20px rgba(245,124,0,0.4);
  transform: translateY(-1px);
}
.btn-blue {
  background: var(--ocean-blue);
  color: var(--white);
  border-color: #145ea8;
  box-shadow: 0 4px 12px rgba(25,118,210,0.28);
}
.btn-blue:hover {
  background: #145ea8;
  border-color: #145ea8;
  box-shadow: 0 8px 20px rgba(25,118,210,0.4);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--coastal-teal);
  color: var(--white);
  border-color: var(--coastal-teal);
  box-shadow: 0 4px 12px rgba(15,118,110,0.22);
}
.btn-secondary:hover {
  background: #0b5c56;
  border-color: #0b5c56;
  box-shadow: 0 8px 20px rgba(15,118,110,0.32);
  transform: translateY(-1px);
}
.btn-tertiary {
  background: transparent;
  color: var(--slate);
  border-color: #cdd6db;
}
.btn-tertiary:hover { border-color: var(--slate); color: var(--coastal-navy); background: #f4f6f7; }
.section-navy .btn-tertiary, .hero .btn-tertiary, .page-hero .btn-tertiary { color: var(--sand); border-color: rgba(255,255,255,0.4); }

/* Nav Donate button — Option A: Sand fill, Navy border. Deliberately calmer than the primary orange. */
.btn-donate {
  background: var(--sand);
  color: var(--coastal-navy);
  border-color: var(--coastal-navy);
  padding: 10px 20px;
  font-size: 0.9rem;
  box-shadow: none;
}
.btn-donate:hover { background: #9dccfa; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Header */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #e7ecef;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--max-width); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark-link, .brand-text-link { display: flex; align-items: center; text-decoration: none; }
.brand-mark-link:hover, .brand-text-link:hover { opacity: 0.82; }
/* Reserve the logo's full square footprint so it never gets squeezed by max-width:100% on
   narrow/portrait headers; the site name next to it shrinks instead. */
.brand-mark-link { flex: 0 0 36px; width: 36px; height: 36px; flex-shrink: 0; }
.brand-text-link { min-width: 0; }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; display: block; object-fit: contain; }
.brand-text .kicker { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); font-weight: 700; }
.brand-text .name { font-family: var(--font-headline); font-weight: 700; color: var(--coastal-navy); font-size: 1.15rem; line-height: 1.1; }
nav.primary-nav { display: flex; align-items: center; gap: 24px; }
nav.primary-nav a:not(.btn) { color: #1c2b3a; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
nav.primary-nav a:not(.btn):hover { color: var(--coastal-orange); }
nav.primary-nav a.active { color: var(--coastal-orange); }
.nav-links { display: flex; gap: 20px; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; }

/* Hero (homepage) */
.hero {
  background: linear-gradient(160deg, var(--coastal-navy) 0%, #0a3277 60%, #082a63 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 64px 0 0;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sunset-gold); font-weight: 700; margin-bottom: 14px; }
.hero h1 { color: var(--white); font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 8px; }
.hero .role { font-size: 1.15rem; color: var(--sand); font-weight: 600; margin-bottom: 20px; }
.hero p.lede { font-size: 1.15rem; color: #dce8f7; max-width: 46ch; margin-bottom: 32px; }
.hero-photo-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  aspect-ratio: 4 / 5;
}
.hero-photo-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; pointer-events: none; }
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-tab {
  position: absolute; top: 18px; left: -10px; z-index: 3;
  background: var(--coastal-orange); color: var(--white);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px 6px 20px; border-radius: 0 20px 20px 0;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}
.hero-wave { display: block; width: 100%; margin-top: 56px; }

/* Page hero (interior pages) — lighter-weight version of the homepage hero */
.page-hero {
  background: linear-gradient(160deg, var(--coastal-navy) 0%, #0a3277 60%, #082a63 100%);
  color: var(--white);
  padding: 48px 0 60px;
  position: relative;
  overflow: hidden;
}
.breadcrumb { font-size: 0.8rem; color: var(--sand); margin-bottom: 14px; }
.breadcrumb a { color: var(--sand); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 10px; }
.page-hero .page-lede { font-size: 1.08rem; color: #dce8f7; max-width: 60ch; margin-bottom: 0; }
.page-hero-wave { display: block; width: 100%; margin-top: 40px; margin-bottom: -6px; }

/* Intro / stats */
.intro-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.intro-grid h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.stat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.stat-card { background: var(--seafoam); border-radius: var(--radius); padding: 22px 16px; text-align: center; }
.stat-num { font-family: var(--font-headline); font-size: 2rem; color: var(--coastal-orange); font-weight: 700; line-height: 1; }
.stat-label { font-size: 0.85rem; color: var(--slate); margin-top: 6px; }

/* Priority cards */
.priority-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.priority-card {
  background: var(--white);
  border: 1px solid #e7ecef;
  border-radius: var(--radius);
  padding: 26px 22px;
  display: flex; flex-direction: column;
}
.priority-icon { width: 42px; height: 42px; margin-bottom: 14px; color: var(--coastal-teal); }
.priority-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.priority-card p { color: var(--slate); font-size: 0.92rem; flex-grow: 1; }
.priority-card .learn-link { font-weight: 700; font-size: 0.88rem; color: var(--coastal-orange); text-decoration: none; margin-top: 12px; }
.priority-card .learn-link:hover { text-decoration: underline; }

/* Photo placeholder */
.photo-placeholder {
  border: 2px dashed var(--slate);
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, #f6f8f9, #f6f8f9 10px, #eef2f3 10px, #eef2f3 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px 20px; color: var(--slate);
  min-height: 260px;
}
.photo-placeholder svg { width: 34px; height: 34px; margin-bottom: 10px; color: var(--slate); }
.photo-placeholder .ph-title { font-weight: 700; color: var(--coastal-navy); margin-bottom: 6px; font-size: 0.92rem; }
.photo-placeholder .ph-detail { font-size: 0.82rem; line-height: 1.5; max-width: 32ch; }
.photo-placeholder .ph-badge {
  margin-top: 12px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--sunset-gold); color: #4a3600; padding: 4px 10px; border-radius: 20px;
}

/* Featured Result */
.featured-result { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.featured-photo { border-radius: 14px; overflow: hidden; }
.featured-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.role-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--seafoam); color: var(--coastal-teal); padding: 5px 12px; border-radius: 20px; margin-bottom: 14px; }

/* Results overview / grid */
.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.results-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.result-card { background: var(--white); border-radius: var(--radius); border: 1px solid #e7ecef; padding: 22px; }
.result-card .status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--coastside-green); margin-bottom: 8px; display: block; }
.result-card h3 { font-size: 1rem; margin-bottom: 8px; }
.result-card p { color: var(--slate); font-size: 0.88rem; margin-bottom: 0; }

/* Professional experience */
.experience { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.experience-photo { border-radius: 14px; overflow: hidden; }
.experience-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5/4; object-position: 50% 20%; }
.caption { font-size: 0.82rem; color: var(--slate); margin-top: 10px; font-style: italic; }

/* Endorsement */
.endorsement-card {
  max-width: 640px; margin: 0 auto; background: var(--white); border-radius: 16px;
  padding: 40px; display: flex; gap: 28px; align-items: center; box-shadow: 0 10px 30px rgba(11,61,145,0.08);
}
.endorsement-photo { width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0; }
.endorsement-quote { font-family: var(--font-headline); font-size: 1.15rem; color: var(--coastal-navy); font-style: italic; margin-bottom: 10px; }
.endorsement-name { font-weight: 700; }
.endorsement-title { color: var(--slate); font-size: 0.9rem; }
.pending-tag { display: inline-block; margin-top: 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8a5a00; background: #fff3e0; padding: 4px 10px; border-radius: 20px; }

/* Endorsement grid (Endorsements page) */
.endorser-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.endorser-card { text-align: center; width: calc(33.333% - 12px); }
.endorser-card .endorser-photo {
  width: 100%; aspect-ratio: 3/4; border-radius: 12px; margin-bottom: 12px;
}
.endorser-card .endorser-name { font-weight: 700; font-size: 0.94rem; color: var(--coastal-navy); }
.endorser-card .endorser-title { font-size: 0.8rem; color: var(--slate); }
.endorser-card .endorser-quote { font-family: var(--font-headline); font-style: italic; font-size: 0.88rem; color: #3b4a56; line-height: 1.5; margin: 10px 0 0; text-align: left; }

/* Long-form testimonial (for endorsement letters too long for a featured card) */
.testimonial-card {
  max-width: 760px; margin: 0 auto; background: var(--white); border-radius: 16px;
  padding: 40px 44px; box-shadow: 0 10px 30px rgba(11,61,145,0.08); border-left: 4px solid var(--coastal-orange);
}
.testimonial-card p { color: #3b4a56; font-size: 1.02rem; line-height: 1.7; }
.testimonial-card p:last-of-type { margin-bottom: 0; }
.testimonial-attribution { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.testimonial-attribution .name { font-weight: 700; color: var(--coastal-navy); }
.testimonial-attribution .role { font-size: 0.86rem; color: var(--slate); }

.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.logo-cell {
  background: var(--seafoam); border: 1px solid rgba(96,125,139,0.22); border-radius: var(--radius);
  padding: 26px 20px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; color: var(--coastal-navy); font-size: 0.95rem; min-height: 96px;
  text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.logo-cell:hover { box-shadow: 0 8px 20px rgba(11,61,145,0.1); transform: translateY(-1px); }
.logo-cell.placeholder { color: var(--slate); font-weight: 600; }

/* Grid (not CSS multicol) so each column gets an equal number of names —
   multicol balances by height, which looks lopsided when titles vary in length.
   Row count = ceil(item count / column count); update if the roster size changes. */
.supporter-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; grid-template-rows: repeat(11, auto); column-gap: 32px; }
.supporter-list div { padding: 6px 0; border-bottom: 1px solid #eef1f3; font-size: 0.92rem; }
.supporter-list span { color: var(--slate); font-size: 0.82rem; display: block; }

/* Two-col generic (events/gathering/volunteer) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }
.activity-list { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.activity-list li { font-size: 0.92rem; padding-left: 22px; position: relative; }
.activity-list li::before { content: "—"; position: absolute; left: 0; color: var(--coastal-orange); }

.empty-state { background: var(--white); border: 1px solid #e7ecef; border-radius: var(--radius); padding: 32px; text-align: center; }

/* Donate banner — soft card treatment, not a full-bleed orange block */
.donate-banner {
  background: var(--white); border: 1px solid #e7ecef; border-left: 4px solid var(--coastal-orange);
  border-radius: 16px; padding: 40px 44px; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; align-items: center;
}
.donate-banner h2 { color: var(--coastal-navy); }
.donate-banner p { color: var(--slate); }
.disclaimer-note { font-size: 0.75rem; color: var(--slate); margin-top: 14px; }

/* Stay informed */
.subscribe-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; margin: 0 auto; }
.subscribe-form input { flex: 1; min-width: 200px; padding: 13px 16px; border-radius: 8px; border: 1px solid #cdd6db; font-family: var(--font-body); font-size: 0.95rem; }
.consent { font-size: 0.78rem; color: var(--slate); max-width: 560px; margin: 14px auto 0; text-align: center; }

/* Contact panel */
.contact-panel { max-width: 640px; margin: 0 auto; text-align: center; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; margin: 0 auto; }
.contact-card { background: var(--white); border: 1px solid #e7ecef; border-radius: var(--radius); padding: 26px; }
.contact-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.contact-card p { color: var(--slate); font-size: 0.9rem; }

/* Sister Cities legend */
.legend-photo { background: var(--white); border: 1px solid #e7ecef; border-radius: 16px; padding: 20px; }
.legend-photo img { border-radius: 8px; }
.legend-list { list-style: none; padding: 0; margin: 20px 0 0; }
.legend-list li { padding: 10px 0; border-bottom: 1px solid #eef1f3; font-size: 0.92rem; }
.legend-list li:last-child { border-bottom: none; }
.legend-list strong { color: var(--coastal-navy); }

/* Events timeline */
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.event-card { background: var(--white); border: 1px solid #e7ecef; border-radius: var(--radius); padding: 26px 24px; }
.event-card.featured { border-left: 4px solid var(--coastal-orange); box-shadow: 0 10px 24px rgba(11,61,145,0.07); }
.event-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--seafoam); color: var(--coastal-teal); padding: 4px 10px; border-radius: 20px; margin-bottom: 12px; }
.event-date { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--coastal-teal); margin-bottom: 8px; }
.event-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.event-meta { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--slate); margin-bottom: 4px; }
.event-meta svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--slate); }
.milestone-badge { display: inline-block; margin-bottom: 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--sunset-gold); color: #4a3600; padding: 4px 10px; border-radius: 20px; }

/* Donate page — contribution limits box, check-by-mail steps, info panel */
.limits-box {
  background: var(--seafoam); border-radius: var(--radius); padding: 26px 28px; margin-top: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center;
}
.limits-box .limit-amount { font-family: var(--font-headline); font-size: 1.5rem; color: var(--coastal-navy); font-weight: 700; line-height: 1; }
.limits-box .limit-label { font-size: 0.82rem; color: var(--slate); margin-top: 6px; }
.step-list { list-style: none; padding: 0; margin: 22px 0; counter-reset: step; }
.step-list li { position: relative; padding: 10px 0 10px 44px; font-size: 0.98rem; }
.step-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--coastal-navy); color: var(--white); font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.mail-block { background: var(--white); border: 1px solid #e7ecef; border-radius: var(--radius); padding: 22px 26px; margin-top: 18px; }
.mail-block .mail-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--coastal-teal); margin-bottom: 4px; display: block; }
.mail-block p { margin-bottom: 4px; font-size: 0.95rem; }
.info-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.info-list li { font-size: 0.92rem; padding-left: 20px; position: relative; }
.info-list li::before { content: "—"; position: absolute; left: 0; color: var(--coastal-orange); }

/* FAQ / accordion */
.faq-item { border-bottom: 1px solid #e7ecef; padding: 18px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; color: var(--coastal-navy); font-size: 1rem; }
.faq-item p { margin-top: 12px; color: var(--slate); }

/* Content page (long-form issue pages) */
.content-page { max-width: 760px; margin: 0 auto; }
.content-page h2 { margin-top: 1.6em; font-size: 1.4rem; }
.content-page h2:first-child { margin-top: 0; }
.proof-list { list-style: none; padding: 0; margin: 0 0 1.4em; }
.proof-list li { padding: 14px 0 14px 30px; position: relative; }
.proof-list li::before { content: "✓"; position: absolute; left: 0; top: 14px; color: var(--coastside-green); font-weight: 700; }
.proof-list .proof-title { font-weight: 700; color: var(--coastal-navy); display: block; margin-bottom: 3px; }
.proof-list .proof-desc { color: var(--slate); font-size: 0.94rem; }

/* Project grid — like proof-list, but for sections where some items have a photo.
   Cards keep a consistent photo crop/aspect ratio; cards without a photo just start
   at the title, so mixed photo/no-photo items still read as one consistent set
   instead of interrupting a plain checklist. */
.conservancy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 4px 0 1.4em; }
.conservancy-card { background: var(--white); border: 1px solid #e7ecef; border-radius: var(--radius); overflow: hidden; }
.conservancy-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.conservancy-card-body { padding: 18px 20px; }
.conservancy-card h3 { font-size: 1rem; color: var(--coastal-navy); margin: 0 0 6px; }
.conservancy-card p { color: var(--slate); font-size: 0.88rem; margin: 0; }

/* Timeline */
.timeline { border-left: 3px solid var(--seafoam); margin: 24px 0; padding-left: 28px; }
.timeline-item { position: relative; margin-bottom: 26px; }
.timeline-item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--coastal-orange); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--seafoam); }
.timeline-item .t-year { font-weight: 700; color: var(--coastal-teal); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.timeline-item h3 { font-size: 1.05rem; margin: 4px 0 6px; }

/* Related priorities strip */
.related-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card { background: var(--white); border: 1px solid #e7ecef; border-radius: var(--radius); padding: 20px; text-decoration: none; display: block; }
.related-card h4 { color: var(--coastal-navy); font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; margin: 0 0 6px; }
.related-card p { color: var(--slate); font-size: 0.86rem; margin: 0; }
.related-card:hover { border-color: var(--coastal-teal); }

/* Footer */
footer { background: #071f45; color: #b7c6dc; padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
footer a { color: #b7c6dc; text-decoration: none; font-size: 0.92rem; }
footer a:hover { color: var(--white); }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list { display: block; column-count: 2; column-gap: 20px; }
.footer-nav-list li { break-inside: avoid; margin-bottom: 10px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 0.78rem; color: #8296b3; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.social-row { display: flex; gap: 12px; margin-top: 6px; }
.social-row a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; }
.social-row svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .hero-grid, .intro-grid, .featured-result, .experience, .two-col, .donate-banner, .contact-grid { grid-template-columns: 1fr; }
  .two-col.reverse { direction: ltr; }
  .hero-photo-frame { max-width: 340px; margin: 0 auto; }
  .priority-grid, .results-grid, .event-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .endorser-card { width: calc(50% - 9px); }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .supporter-list { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(17, auto); }
  .related-strip { grid-template-columns: 1fr; }
  .stat-list { grid-template-columns: 1fr; }
  .limits-box { grid-template-columns: 1fr; }
  .info-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  nav.primary-nav .nav-links { display: none; }
  .menu-toggle { display: block; }
  .endorsement-card { flex-direction: column; text-align: center; padding: 28px; }
}
@media (max-width: 600px) {
  .priority-grid, .results-grid, .results-grid.cols-3, .logo-grid, .event-grid, .conservancy-grid { grid-template-columns: 1fr; }
  .endorser-card { width: 100%; }
  .activity-list { grid-template-columns: 1fr; }
  .supporter-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .footer-nav-list { column-count: 1; }
  section { padding: 52px 0; }
}