@charset "UTF-8";
/* =================================================================
   MS Bright Spots of Hope — Homepage
   Design system + component styles
   Fonts: Fraunces (display serif) · Inter (humanist sans)
   ================================================================= */

/* -------- Design tokens -------- */
:root {
  /* Brand palette — matched to the MSBSLogo (crimson → orange → amber, charcoal).
     Token names kept from the original teal system so the whole site re-themes
     from here; every text/interactive value is WCAG-contrast checked. */
  --ink:        #000000;   /* primary text — black (was warm charcoal #2a2422) */
  --ink-soft:   #000000;   /* secondary text — black (was gray #6a5d55) */
  --ink-bg:     #2a2422;   /* dark surfaces (footer, dark panels) — stays warm charcoal; text tokens above are black */
  --teal-900:   #9e2a12;   /* deep crimson — dark anchors, gradients, hover */
  --teal:       #d2451b;   /* PRIMARY orange (buttons) — 4.56:1 on white */
  --teal-600:   #c0431e;   /* link/CTA text — 5.1:1 on white */
  --teal-tint:  #fde7da;   /* soft peach — accent chips/icons (not page bg) */
  --teal-tint2: #f8f4f1;   /* barely-there band for alternating sections */
  --coral:      #e5342a;   /* logo red — accent pop */
  --coral-deep: #b5271a;
  --sun:        #f5871b;   /* amber-orange — the "bright spot" / logo dot */
  --sun-deep:   #a85a08;   /* amber for small text on light — 4.5:1+ */
  --cream:      #ffffff;   /* page background — white */
  --sand:       #f6efe9;   /* soft warm band (impact, notes) */
  --line:       #ece2d9;   /* hairline */

  --white: #ffffff;

  /* Type — Euclid Circular B for body copy, nav and buttons; P22 Mackinac Pro
     for every heading and card title site-wide (per Figma node 41:129). */
  --sans:     "euclid-circular-b", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mackinac: "p22-mackinac", "euclid-circular-b", Georgia, serif;
  --serif:    var(--mackinac);

  /* Figma design tokens */
  --ink-hero:    #000000;   /* hero headline on the light scrim */
  --hero-scrim:  #f9f0e7;   /* cream hero wash */
  --edu-bg:      #e6f6f7;   /* Educate panel */
  --edu-ink:     #00a5ac;
  --emp-bg:      #fef2e9;   /* Empower panel */
  --emp-ink:     #f97821;
  --insp-bg:     #fdece6;   /* Inspire panel */
  --insp-ink:    #e93c02;

  /* Layout */
  --wrap: 1180px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(90, 40, 20, .07);
  --shadow-md: 0 12px 34px rgba(90, 40, 20, .12);
  --shadow-lg: 0 26px 60px rgba(158, 42, 18, .18);

  --header-h: 96px;
}

/* -------- Reset-ish -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-900); }
h1, h2, h3 { line-height: 1.12; margin: 0; font-weight: 600; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }

/* Accessible focus */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--teal-900); color: #fff; padding: .7rem 1.1rem;
  border-radius: 8px; z-index: 200; transition: top .2s ease; font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

/* -------- Shared type helpers -------- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--coral-deep);
  margin: 0 0 .9rem;
}
.eyebrow--teal { color: var(--teal-600); }
.eyebrow--sun  { color: var(--sun-deep); }

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-title--light { color: #fff; }

.u-hl {
  color: var(--teal-900);
  background: linear-gradient(180deg, transparent 62%, rgba(245,135,27,.45) 62%);
  padding: 0 .1em;
}

.section-head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
/* Home Programs intro — the heading needs 760px to fall on two lines instead
   of three; 820px gives headroom. Scoped by id so .programs sections on
   about.html and awards.html keep the standard 720px measure. */
#programs .section-head { max-width: 820px; }
#programs .section-head .section-title { text-wrap: balance; }
#programs .section-head .section-intro { max-width: 720px; margin-inline: auto; }
/* Eyebrow, heading and intro read as one block here — no gap under the eyebrow. */
#programs .section-head .eyebrow { margin-bottom: 0; }
.section-head--split {
  max-width: none; text-align: left; display: flex; gap: 2rem;
  align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
}
.section-head--split > div { max-width: 720px; }
.section-intro { color: var(--ink-soft); font-size: 1.06rem; margin: 0; }
.section-foot { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn {
  --btn-bg: var(--teal); --btn-fg: #fff; --btn-bd: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.35rem; border-radius: 999px;
  border: 2px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-align: center; line-height: 1.1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--solid { --btn-bg: var(--teal); --btn-fg:#fff; --btn-bd: var(--teal); }
.btn--solid:hover { --btn-bg: var(--teal-900); --btn-bd: var(--teal-900); }

.btn--sun { --btn-bg: var(--sun); --btn-fg: #43310c; --btn-bd: var(--sun); }
.btn--sun:hover { --btn-bg: var(--sun-deep); --btn-bd: var(--sun-deep); --btn-fg:#3a2a08; }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--teal-900); --btn-bd: var(--teal); }
.btn--outline:hover { --btn-bg: var(--teal); --btn-fg: #fff; }

.btn--outline-light { --btn-bg: transparent; --btn-fg:#fff; --btn-bd: rgba(255,255,255,.55); }
.btn--outline-light:hover { --btn-bg:#fff; --btn-fg: var(--teal-900); --btn-bd:#fff; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent; padding-inline: .6rem; }
.btn--ghost:hover { --btn-bg: var(--teal-tint); --btn-fg: var(--teal-900); box-shadow:none; }

.btn--text {
  background: none; border: none; padding: .4rem 0; color: var(--teal-600);
  border-radius: 4px; font-weight: 600;
}
.btn--text:hover { color: var(--teal-900); box-shadow: none; transform: none; text-decoration: underline; }

.btn--lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* =================================================================
   ANNOUNCEMENT BAR
   ================================================================= */
.announce {
  background: linear-gradient(90deg, var(--teal-900), var(--teal));
  color: #fff;
}
.announce.is-hidden { display: none; }
.announce__inner {
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; position: relative;
}
.announce__text { margin: 0; font-size: .9rem; text-align: center; padding: .5rem 2rem; }
.announce__spark { color: var(--sun); margin-right: .35rem; }
.announce__link { color: #fff; font-weight: 700; text-decoration: underline; margin-left: .5rem; white-space: nowrap; }
.announce__link:hover { color: var(--sun); }
.announce__close {
  position: absolute; right: 0; background: none; border: none; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .5rem; opacity: .8;
}
.announce__close:hover { opacity: 1; }

/* =================================================================
   HEADER
   ================================================================= */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.header.is-stuck { box-shadow: var(--shadow-sm); border-color: var(--line); }
.header__inner {
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--teal); }
.brand:hover { color: var(--teal-900); }

/* Actual logo image (MSBSLogo.png).
   Sized larger than the header bar and pulled in with negative margins so it
   overflows/overlaps the header (and slightly into the hero) without forcing
   the whole bar taller. */
.brand { position: relative; z-index: 2; }
.brand__logo { height: 168px; width: auto; display: block; margin: -38px 0; }
.brand--footer { z-index: auto; }
.brand--footer .brand__logo {
  height: 120px; margin: 0; background: #fff; border-radius: 16px; padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
  .brand__logo { height: 104px; margin: -22px 0; }
}
.brand__mark { display: inline-flex; color: var(--sun); flex: none; }
.brand__mark svg circle { fill: var(--teal); }
.brand__text { display: flex; flex-direction: column; line-height: 1; font-family: var(--serif); }
.brand__text strong { color: var(--ink); font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
.brand__text em { color: var(--teal-600); font-style: italic; font-size: .9rem; }

.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav__list { display: flex; align-items: center; gap: 1.4rem; }
.nav__list a,
.nav__parent { color: var(--ink); font-weight: 500; font-size: .95rem; padding: .4rem 0; position: relative; white-space: nowrap; }
.nav__parent { background: none; border: 0; font-family: inherit; line-height: inherit; cursor: pointer; display: inline-flex; align-items: center; }
.nav__parent:hover, .nav__has-sub:focus-within > .nav__parent { color: var(--teal-900); }
/* Just above the mobile-menu breakpoint the full menu is ~40px too wide for a
   single row; tighten spacing and type a touch so labels never wrap. */
@media (min-width: 901px) and (max-width: 1100px) {
  .header__inner { gap: .75rem; }
  .nav { gap: 1.1rem; }
  .nav__list { gap: 1rem; }
  .nav__list a, .nav__parent { font-size: .9rem; }
}
/* With the Contact Us button the row is tighter still just above the mobile
   breakpoint: keep the logo from being squeezed and trim spacing instead. */
.brand { flex: none; }
@media (min-width: 901px) and (max-width: 1040px) {
  .header__inner { gap: .5rem; }
  .brand__logo { height: 128px; margin: -18px 0; }
  .nav { gap: .7rem; }
  .nav__list { gap: .7rem; }
  .nav__list a, .nav__parent { font-size: .86rem; }
  .nav__actions { gap: .3rem; }
  .nav__actions .btn { padding-inline: .9rem; font-size: .86rem; }
}
@media (min-width: 901px) and (max-width: 980px) {
  .brand__logo { height: 104px; margin: -8px 0; }
  .nav__list { gap: .55rem; }
  .nav__list a, .nav__parent { font-size: .8rem; }
  .nav__actions .btn { padding-inline: .75rem; font-size: .8rem; }
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav__list a:hover { color: var(--teal-900); }
.nav__list a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: .6rem; }
.nav__actions .btn { white-space: nowrap; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; padding: 10px; border-radius: 10px;
}
.nav-toggle span { height: 2.5px; background: var(--ink-bg); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =================================================================
   HERO
   ================================================================= */
.hero {
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--teal-tint), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, var(--sand), transparent 55%),
    var(--cream);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.hero__grid {
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__heading {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.3rem, 5.4vw, 4rem); letter-spacing: -0.02em;
  margin: 0 0 1.3rem; color: var(--ink);
}
.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 40ch; }
.hero__sub { color: var(--ink-soft); max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1rem; }
.hero__startlink { font-size: .95rem; color: var(--ink-soft); }
.hero__startlink a { font-weight: 600; }

.hero__media { position: relative; }
.hero__photo {
  aspect-ratio: 4 / 4.4; border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-lg);
}
.hero__badge {
  position: absolute; top: 1.2rem; left: -0.6rem;
  background: #fff; color: var(--teal-900); font-weight: 700; font-size: .9rem;
  padding: .6rem 1rem; border-radius: 999px; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: .45rem;
}
.hero__badge-dot { color: var(--sun); }
.hero__stat {
  position: absolute; bottom: -1rem; right: -0.6rem;
  background: var(--teal-900); color: #fff; padding: .9rem 1.2rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; line-height: 1.1;
}
.hero__stat strong { font-family: var(--serif); font-size: 1.7rem; color: var(--sun); }
.hero__stat span { font-size: .82rem; opacity: .9; }

/* =================================================================
   WELCOME
   ================================================================= */
.welcome { padding: clamp(2.5rem, 4.5vw, 3.8rem) 0; border-bottom: 1px solid #f7f7f6; }
/* Photo on the left, text on the right; `order` keeps the text first in the
   markup so screen readers and the stacked mobile layout read it first. */
.welcome__grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.welcome__text .eyebrow { color: var(--ink-soft); }
.welcome__text .section-title {
  font-family: var(--mackinac); font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.625rem);    /* 42px at design width */
  line-height: 1.19; letter-spacing: -.03em; color: var(--ink);
  padding-bottom: 5px;
}
.welcome__text .section-title .u-accent { color: var(--teal); }
.welcome__text p { color: var(--ink); font-size: 1.125rem; line-height: 1.76; }
.welcome__text p strong { color: var(--ink); }
/* The testimonial quote is the first paragraph under the heading. */
.welcome__text .section-title + p { color: var(--teal); }
.welcome__cta { margin-top: 1.6rem; }
/* Standalone polaroid — the white frame and shadow are baked into
   the PNG, so it needs no card or framing of its own. */
.welcome__photo {
  display: block; width: 100%; max-width: 520px; height: auto;
  margin: 0 auto; justify-self: center;
  rotate: 3deg;   /* own property, so the .reveal transform can't reset it */
  order: -1;
}

/* =================================================================
   CARDS GRID (generic)
   ================================================================= */
.cards { display: grid; gap: 1.4rem; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

/* =================================================================
   QUICK PATHWAYS
   ================================================================= */
.pathways { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
/* Scoped to the Figma-rebuilt pillars section and the home events section —
   about.html reuses .pathways for its mission block and must keep the
   existing styling, and events.html uses .events-listing, not .events. */
.pathways--pillars .section-title,
.events .section-title {
  font-family: var(--mackinac); font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.625rem);    /* 42px at design width */
  line-height: 1.19; letter-spacing: -.03em; color: var(--ink);
}
.pathways--pillars .section-title .u-accent,
.events .section-title .u-accent,
.vstories .section-title .u-accent { color: var(--teal); }
.pathways--pillars .section-intro { color: var(--ink); font-size: 1.125rem; }

/* Mission pillars — three flush colour panels, 1px seam, square corners. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.pillar { padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.pillar__title {
  font-family: var(--mackinac); font-weight: 700;
  font-size: 1.75rem; line-height: 1.19; letter-spacing: -.03em; margin: 0;
  color: #fff;
}
.pillar__lead { font-weight: 700; color: #fff; font-size: 1.02rem; line-height: 1.72; margin: 0; }
.pillar p:last-child { color: #fff; font-size: 1.125rem; line-height: 1.76; margin: 0; }
.pillar--educate { background: #00A5AC; }
.pillar--empower { background: #F97821; }
.pillar--inspire { background: #E93C02; }

/* =================================================================
   EVENTS
   ================================================================= */
.events { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--teal-tint2); }
.events__topcta { flex: none; }
/* Calendar button sits at the right edge, level with the intro's last line. */
.events__head { max-width: none; text-align: left; }
.events__head .section-intro { max-width: 800px; }
.events__titlerow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
}
.events__grid { margin-top: 1rem; }
.toolbar .control[hidden] { display: none; }
.event {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .22s ease;
}
.event:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.event__media { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.event__body { padding: 1.2rem 1.2rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.event__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; }
.tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  /* Sentence case: lowercase the label, then lift only its opening letter. */
  text-transform: lowercase;
  padding: .28rem .6rem; border-radius: 999px; background: var(--teal-tint); color: var(--teal-900);
}
.tag::first-letter { text-transform: uppercase; }
.tag--coral { background: #fdeee9; color: var(--coral-deep); }
.tag--sun { background: #fdf1dc; color: var(--sun-deep); }
.tag--crimson { background: #fbe4dd; color: var(--teal-900); }
.event__status { font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.event__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.event__status--open { color: #2f7d5b; }
.event__status--soon { color: var(--sun-deep); }
.event__when { font-size: .85rem; color: var(--ink-soft); font-weight: 600; margin: 0 0 .3rem; }
.event__title { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; margin-bottom: .5rem; }
.event__desc { font-size: .9rem; color: var(--ink-soft); margin-bottom: .8rem; }
.event__facts { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.event__facts li { display: flex; gap: .45rem; align-items: flex-start; }
.event .btn { margin-top: auto; }
.event__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }
.event__actions .btn { flex: 1 1 110px; margin-top: 0; justify-content: center; }
.events__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; align-items: center; margin-top: 2.4rem; }

/* =================================================================
   PROGRAMS
   ================================================================= */
.programs { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.program {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .22s ease;
}
.program:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.program__media {
  aspect-ratio: 16 / 9; background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 1rem;
}
.program__badge {
  background: rgba(255,255,255,.92); color: var(--teal-900); font-weight: 700; font-size: .78rem;
  /* Sentence case: lowercase the label, then lift only its opening letter. */
  text-transform: lowercase; letter-spacing: .06em; padding: .35rem .75rem; border-radius: 999px;
}
.program__badge::first-letter { text-transform: uppercase; }
.program__badge--coral { color: var(--coral-deep); }
.program__badge--sun { color: var(--sun-deep); }
.program__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.program__title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin-bottom: .6rem; }
.program__body > p { color: var(--ink-soft); font-size: .96rem; }
.program__list {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 1.3rem;
}
.program__list li {
  font-size: .82rem; font-weight: 600; color: var(--teal-900);
  background: var(--teal-tint); padding: .35rem .7rem; border-radius: 999px;
}
.program__body .btn--text { margin-top: auto; align-self: flex-start; }

/* =================================================================
   SPOTLIGHT
   ================================================================= */
.spotlight {
  background: linear-gradient(155deg, var(--teal-900), var(--teal) 90%);
  color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; position: relative; overflow: hidden;
}
.spotlight::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,177,60,.22), transparent 70%);
  top: -120px; right: -80px;
}
.spotlight__grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; position: relative;
}
.spotlight__photo { aspect-ratio: 4 / 3.3; border-radius: var(--radius-lg); background-size: cover; background-position: center; box-shadow: var(--shadow-lg); }
.spotlight__text p { color: rgba(255,255,255,.9); }
.spotlight__tagline { font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--sun); margin: 1.2rem 0 1.6rem; }
.spotlight__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =================================================================
   IMPACT
   ================================================================= */
.impact { padding: clamp(3rem, 6vw, 5.5rem) 0; background: var(--sand); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stat {
  background: #fff; border-radius: var(--radius); padding: 1.8rem 1.5rem;
  box-shadow: var(--shadow-sm); border-top: 4px solid var(--sun);
}
.stat:nth-child(2) { border-top-color: var(--coral); }
.stat:nth-child(3) { border-top-color: var(--teal); }
.stat:nth-child(4) { border-top-color: var(--teal-900); }
.stat__num {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--teal-900); display: flex; flex-direction: column; line-height: 1; margin-bottom: .7rem;
}
.stat__num span { font-size: .82rem; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-top: .4rem; }
.stat__num--word { color: var(--coral-deep); }
.stat p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* =================================================================
   STORY / TESTIMONIAL
   ================================================================= */
.story { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.story__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.story__photo { aspect-ratio: 4 / 4.4; border-radius: var(--radius-lg); background-size: cover; background-position: center; box-shadow: var(--shadow-lg); }
.story__quote { margin: 0; }
.story__big { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ink); line-height: 1.25; margin: .4rem 0 1.4rem; }
.story__quote > p:not(.story__big):not(.eyebrow):not(.story__tag) { color: var(--ink-soft); }
.story__tag { font-family: var(--serif); font-style: italic; color: var(--teal-600); font-size: 1.15rem; }
.story__attr { display: flex; flex-direction: column; margin: 1.2rem 0 1.4rem; }
.story__attr strong { color: var(--ink); font-size: 1rem; }
.story__attr span { color: var(--ink-soft); font-size: .9rem; }
.story__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* =================================================================
   FOUNDER
   ================================================================= */
.founder { padding: clamp(3rem, 6vw, 5.5rem) 0; background: var(--teal-tint2); }
.founder__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.founder__text p { color: var(--ink-soft); font-size: 1.04rem; }
.founder__text .section-title { margin-bottom: 1.2rem; }
/* A founder quote (an all-italic first paragraph) is accented like the homepage
   testimonial; a plain-text opening paragraph keeps the body colour. */
.founder__text .section-title + p:has(> em:only-child) { color: var(--teal); }
.founder__text .btn { margin-top: .6rem; }
.founder__media { position: relative; }
.founder__photo { aspect-ratio: 4 / 4.6; border-radius: var(--radius-lg); background-size: cover; background-position: center top; box-shadow: var(--shadow-lg); }
.founder__cap {
  position: absolute; bottom: 1rem; left: 1rem; background: #fff; color: var(--teal-900);
  font-weight: 700; font-size: .85rem; padding: .5rem .9rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}

/* =================================================================
   GET INVOLVED
   ================================================================= */
.involve {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background: linear-gradient(160deg, var(--ink-bg) 0%, var(--teal-900) 100%);
  color: #fff;
}
.involve .section-intro { color: rgba(255,255,255,.85); }
.involve__card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 1.7rem 1.5rem; backdrop-filter: blur(4px);
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
}
.involve__card:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); border-color: rgba(251,177,60,.5); }
.involve__card--donate { background: rgba(251,177,60,.12); border-color: rgba(251,177,60,.4); }
.involve__tag {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--sun); margin-bottom: .7rem;
}
.involve__tag--sun { color: var(--sun); }
.involve__card h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: .5rem; color: #fff; }
.involve__card p { color: rgba(255,255,255,.82); font-size: .92rem; margin-bottom: 1.3rem; }
.involve__card .btn { margin-top: auto; }

/* Home "Help Create More Bright Spots" — flat cream panel instead of the dark
   gradient. Scoped so about.html keeps the original dark treatment. */
.involve--cream { background: #FEF5EC; color: var(--ink); }
.involve--cream .section-title--light { color: var(--ink); }
.involve--cream .section-intro { color: var(--ink-soft); }
/* All four cards sit flat on the cream — white, no tint, no hover motion. */
.involve--cream .involve__card,
.involve--cream .involve__card--donate {
  background: #fff; border-color: var(--line); backdrop-filter: none;
}
.involve--cream .involve__card:hover {
  transform: none; background: #fff; border-color: var(--line);
}
/* Sized down from the 54px .vm__icon — these cards are 4-up with smaller
   padding and titles, so the chip scales with them. */
.involve--cream .involve__icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--card-accent); margin: 0 0 1rem;
}
.involve--cream .involve__icon svg { width: 21px; height: 21px; stroke-width: 1.9; }
.involve--cream .involve__tag { color: var(--sun-deep); }
.involve--cream .involve__card h3 { color: var(--card-accent); }

/* Per-card accent — drives both the title and the icon. */
.involve--cream .involve__card:nth-child(1) { --card-accent: #00A5AC; }
.involve--cream .involve__card:nth-child(2) { --card-accent: #F97821; }
.involve--cream .involve__card:nth-child(3) { --card-accent: #E93C02; }
.involve--cream .involve__card:nth-child(4) { --card-accent: #D2451B; }
.involve--cream .involve__card:nth-child(1) .involve__icon { background: rgba(0,165,172,.12); }
.involve--cream .involve__card:nth-child(2) .involve__icon { background: rgba(249,120,33,.12); }
.involve--cream .involve__card:nth-child(3) .involve__icon { background: rgba(233,60,2,.12); }
.involve--cream .involve__card:nth-child(4) .involve__icon { background: rgba(210,69,27,.12); }
.involve--cream .involve__card p { color: var(--ink-soft); }
.involve--cream .btn--outline-light {
  --btn-bg: transparent; --btn-fg: var(--teal-600); --btn-bd: var(--teal-600);
}
.involve--cream .btn--outline-light:hover {
  --btn-bg: var(--teal); --btn-fg: #fff; --btn-bd: var(--teal);
}

/* =================================================================
   PARTNERS
   ================================================================= */
.partners { padding: clamp(3rem, 6vw, 5rem) 0; }
.partners__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 1rem;
}
.partners__logo {
  display: grid; place-items: center; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 96px; padding: 1rem; font-family: var(--serif); font-weight: 600;
  color: var(--teal-900); font-size: 1.05rem; box-shadow: var(--shadow-sm);
  filter: grayscale(1); opacity: .78; transition: filter .2s ease, opacity .2s ease, transform .18s ease;
}
.partners__logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px); }
.partners__logo--muted { color: var(--ink-soft); border-style: dashed; font-family: var(--sans); font-size: .9rem; }
.partners__grid > li > .partners__logo { height: 100%; }
a.partners__logo { text-decoration: none; }
/* Real logos stay in full colour; the grayscale treatment is for text names. */
.partners__logo--img { filter: none; opacity: 1; }
.partners__logo--img img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }

/* =================================================================
   NEWSLETTER
   ================================================================= */
.newsletter {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(251,177,60,.14), transparent 55%),
    linear-gradient(160deg, var(--teal-900), var(--teal));
  color: #fff;
}
/* Home page only — flat brand teal instead of the gradient. The widget can sit
   on any page, so this is scoped to the front page's body class. */
.home .newsletter { background: #39a2a9; }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.newsletter__intro p { color: rgba(255,255,255,.88); }
.newsletter__privacy { font-size: .85rem; color: rgba(255,255,255,.75); display: flex; gap: .4rem; align-items: center; }
.newsletter__form {
  background: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lg); color: var(--ink);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label, .field legend { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; color: var(--ink); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--cream); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,124,142,.18); }
.field input[aria-invalid="true"] { border-color: var(--coral-deep); }
.field--check { border: none; padding: 0; margin: 0 0 1.2rem; }
.field--check legend { padding: 0; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
.checks label { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .9rem; color: var(--ink-soft); margin: 0; cursor: pointer; }
.checks input { accent-color: var(--teal); width: 17px; height: 17px; }
.newsletter__msg { margin: .9rem 0 0; font-size: .9rem; font-weight: 600; min-height: 1.2rem; }
.newsletter__msg.is-error { color: var(--coral-deep); }
.newsletter__msg.is-ok { color: #2f7d5b; }

/* =================================================================
   FINAL CTA
   ================================================================= */
.finalcta { padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; background: var(--cream); }
.finalcta__inner { max-width: 720px; margin-inline: auto; }
.finalcta__heading { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--ink); margin-bottom: 1rem; }
.finalcta__inner > p { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 1.8rem; }
.finalcta__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.finalcta__link { color: var(--ink-soft); font-size: .95rem; }
.finalcta__link a { font-weight: 600; }

/* =================================================================
   FOOTER
   ================================================================= */
.footer { background: var(--ink-bg); color: rgba(255,255,255,.72); padding-top: clamp(2.5rem, 5vw, 4rem); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2.4rem; padding-bottom: 2.5rem; }
.brand--footer .brand__text strong { color: #fff; }
.brand--footer .brand__text em { color: var(--sun); }
.brand--footer .brand__mark svg circle { fill: var(--teal); }
.footer__desc { font-size: .9rem; margin: 1.1rem 0 1.2rem; max-width: 38ch; }
.footer__social { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer__social a { color: rgba(255,255,255,.75); font-size: .88rem; font-weight: 600; }
.footer__social a:hover { color: var(--sun); }
.footer__col h3 { font-family: var(--serif); font-size: 1.05rem; color: #fff; margin-bottom: 1rem; font-weight: 600; }
.footer__col ul { display: flex; flex-direction: column; gap: .55rem; }
.footer__col a { color: rgba(255,255,255,.72); font-size: .92rem; }
.footer__col a:hover { color: var(--sun); }
.footer__bar { border-top: 1px solid rgba(255,255,255,.12); }
.footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.3rem 0; }
.footer__bar p { margin: 0; font-size: .82rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__legal a { color: rgba(255,255,255,.72); font-size: .82rem; }
.footer__legal a:hover { color: var(--sun); }
/* Agency credit — its own full-width line under the copyright row. */
.footer__credit { flex: 1 0 100%; color: rgba(255,255,255,.6); }
.footer__credit a { color: rgba(255,255,255,.82); font-weight: 600; }
.footer__credit a:hover { color: var(--sun); }

/* =================================================================
   EVENTS LISTING PAGE
   ================================================================= */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-head {
  padding: clamp(2rem, 5vw, 3.5rem) 0 0;
  background:
    radial-gradient(900px 460px at 90% -20%, var(--teal-tint), transparent 60%),
    var(--cream);
}
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.crumbs a { color: var(--teal-600); font-weight: 600; }
.crumbs span:last-child { color: var(--ink); }
/* Event detail: breadcrumbs left, "Back to Event Calendar" button right. */
.detail__topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.detail__topbar .crumbs { margin-bottom: 0; min-width: 0; }
.detail__back { padding: .55rem 1.1rem; font-size: .85rem; white-space: nowrap; }
@media (max-width: 560px) {
  .detail__back { width: 100%; }
}
.page-head__title {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--ink); margin-bottom: .8rem;
}
.page-head__lede { color: var(--ink-soft); font-size: 1.08rem; max-width: none; }
.page-head__lede strong { color: var(--teal-900); }

.events-listing { padding: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(3rem, 6vw, 5rem); }
/* Search box + Program / Sort dropdowns share one row. */
.toolbar--search { margin-bottom: 1.2rem; }
.toolbar--search .events__search { flex: 1 1 280px; max-width: 460px; }
.toolbar--search .events__search input { padding-top: .6rem; padding-bottom: .6rem; font-size: .92rem; }
.toolbar--search:not(:has(.events__search)) { justify-content: flex-end; }
.events__count { margin: 0 0 1rem; }
.events__count:empty { display: none; }

.toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem;
  flex-wrap: wrap; padding-bottom: 1.4rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.toolbar__count { margin: 0; font-weight: 600; color: var(--ink); font-size: .95rem; }
.toolbar__controls { display: flex; gap: 1rem; flex-wrap: wrap; }
.control { display: flex; flex-direction: column; gap: .35rem; }
.control label {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft);
}
.control select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--ink);
  background-color: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: .6rem 2.4rem .6rem 1rem; cursor: pointer; min-width: 210px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23127c8e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.control select:hover { border-color: var(--teal); }
.control select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,124,142,.18); }

.empty-state {
  text-align: center; color: var(--ink-soft); font-size: 1.05rem;
  background: var(--teal-tint2); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 3rem 1.5rem; margin: 0;
}

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  flex-wrap: wrap; margin-top: 2.6rem;
}
.pager__btn, .pager__num {
  font-family: inherit; font-weight: 600; font-size: .92rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  min-width: 42px; height: 42px; padding: 0 .9rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.pager__num { padding: 0; }
.pager__btn:hover:not([disabled]), .pager__num:hover:not(.is-current) {
  border-color: var(--teal); color: var(--teal-900); transform: translateY(-1px);
}
.pager__num.is-current {
  background: var(--teal); border-color: var(--teal); color: #fff; cursor: default;
}
.pager__btn[disabled] { opacity: .4; cursor: not-allowed; }

@media (max-width: 620px) {
  .toolbar { align-items: stretch; }
  .toolbar__controls { flex-direction: column; }
  .control select { min-width: 0; width: 100%; }
  .toolbar--search .events__search { max-width: none; flex-basis: 100%; }
}

/* =================================================================
   EVENT CARD LINKS (media + title become links to the detail page)
   ================================================================= */
a.event__media { display: block; }
.event__title a { color: inherit; text-decoration: none; }
.event:hover .event__title a { color: var(--teal-900); }

/* =================================================================
   EVENT DETAIL PAGE
   ================================================================= */
.detail {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(900px 460px at 92% -20%, var(--teal-tint), transparent 60%),
    var(--cream);
}
.detail__loading { color: var(--ink-soft); padding: 2rem 0; }

.detail__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px;
  gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; margin-top: 1rem;
}
.detail__meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.detail__title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--ink); margin-bottom: .8rem;
}
.detail__lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; margin-bottom: 1.6rem; }
.detail__hero {
  aspect-ratio: 16 / 8; border-radius: var(--radius-lg); background-size: cover;
  background-position: center; box-shadow: var(--shadow-lg); margin-bottom: 2rem;
}
.detail__body h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink);
  margin: 2rem 0 .8rem;
}
.detail__body h2:first-child { margin-top: 0; }
.detail__body p { color: var(--ink-soft); font-size: 1.05rem; }
.detail__access { display: grid; gap: .6rem; margin: .4rem 0 1.6rem; }
.detail__access li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink); font-size: 1rem; }
.detail__access .ico {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-tint); color: var(--teal-900); font-size: .8rem; font-weight: 700; margin-top: 1px;
}
/* Event detail — "Before you go", speakers and published custom fields (MGT feed). */
.detail__info { margin: .4rem 0 1.6rem; }
.detail__info-row { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.detail__info-row:first-child { padding-top: 0; }
.detail__info dt { font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.detail__info dd { margin: 0; color: var(--ink-soft); }
.detail__info dd p { font-size: 1rem; margin: 0 0 .5rem; }
.detail__info dd p:last-child { margin-bottom: 0; }
.detail__speakers { display: grid; gap: 1rem; margin: .4rem 0 1.6rem; padding: 0; list-style: none; }
.speaker { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; background: #fff; }
.speaker p { margin: 0 0 .3rem; }
.speaker__name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.speaker__credentials { font-family: var(--sans); font-weight: 500; font-size: .9rem; margin-left: .35rem; color: var(--sun-deep); }
.speaker__role { font-weight: 500; }
.speaker__topic { font-style: italic; }
.detail__body .speaker__bio { font-size: 1rem; margin-top: .5rem; }
.speaker__links { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem !important; }
.speaker__links a { color: var(--teal); font-weight: 600; }
.detail__note {
  background: var(--sand); border-radius: var(--radius); padding: 1.1rem 1.3rem;
  color: var(--ink); font-size: .98rem;
}
.detail__note span { color: var(--sun-deep); }
.detail__waiver h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.detail__waiver p { margin: 0 0 .7rem; }
.detail__waiver p:last-child { margin-bottom: 0; }
.detail__waiver .btn { padding: .42rem .95rem; font-size: .85rem; }

/* Embedded registration card (Register button → "Embedded form") */
.reg-card {
  margin: 2.5rem 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.reg-card[hidden] { display: none; }
.reg-card.is-revealing { animation: regCardIn .35s ease both; }
@keyframes regCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.reg-card__head {
  position: relative; isolation: isolate; color: #fff;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.2rem) clamp(1.2rem, 2.5vw, 1.6rem);
  background: linear-gradient(125deg, var(--teal-900) 0%, var(--teal) 55%, var(--sun) 100%);
}
.reg-card__glow {
  position: absolute; z-index: -1; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 150, .55) 0%, rgba(255, 214, 150, 0) 70%);
}
.reg-card__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.reg-card .reg-card__eyebrow {
  margin: 0 0 .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.reg-card .reg-card__title { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 600; line-height: 1.1; color: #fff; }
.reg-card .reg-card__event { margin: .35rem 0 0; font-size: 1rem; color: rgba(255, 255, 255, .92); }
.reg-card__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.reg-card__close:hover { background: rgba(255, 255, 255, .25); transform: rotate(90deg); }
.reg-card__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; }
.reg-card .reg-card__chips li {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  font-size: .85rem; font-weight: 500; backdrop-filter: blur(4px);
}
.reg-card__chips svg, .reg-card__foot svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.reg-card__body { position: relative; padding: clamp(1.25rem, 3.5vw, 2.2rem) clamp(1rem, 3.5vw, 2.2rem) .6rem; min-height: 260px; }
.reg-card__frame { display: block; width: 100%; height: 520px; border: 0; background: transparent; transition: height .2s ease; }
.reg-card__loading { position: absolute; inset: 2.5rem 0 auto; display: flex; justify-content: center; gap: .45rem; }
.reg-card__loading span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--teal);
  animation: regDot 1s ease-in-out infinite;
}
.reg-card__loading span:nth-child(2) { animation-delay: .15s; background: var(--coral); }
.reg-card__loading span:nth-child(3) { animation-delay: .3s; background: var(--sun); }
.reg-card.is-loaded .reg-card__loading { display: none; }
@keyframes regDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-8px); opacity: 1; } }

.reg-card .reg-card__foot {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0;
  padding: 1rem clamp(1.25rem, 3.5vw, 2.2rem) 1.3rem; background: var(--sand);
  font-size: .82rem; line-height: 1.45; color: #5b4d45;
}
.reg-card__foot svg { margin-top: .1rem; color: var(--teal); }

@media (max-width: 640px) {
  .reg-card { margin: 1.75rem 0; border-radius: var(--radius); }
  .reg-card__chips li { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reg-card.is-revealing, .reg-card__loading span { animation: none; }
}

/* Sticky detail sidebar */
.detail__side { position: sticky; top: calc(var(--header-h) + 16px); }
.detail__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem; box-shadow: var(--shadow-md);
}
.detail__free {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .85rem;
  color: var(--teal-900); background: var(--teal-tint); padding: .4rem .8rem; border-radius: 999px;
  margin-bottom: 1.1rem;
}
.detail__free::before { content: "✦"; color: var(--sun-deep); }
.detail__facts { margin: 0 0 1.3rem; }
.detail__facts .fact { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.detail__facts .fact:first-child { padding-top: 0; }
.detail__facts dt {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin-bottom: .2rem;
}
.detail__facts dd { margin: 0; color: var(--ink); font-weight: 500; }
.detail__facts .muted { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }
.detail__back { display: block; text-align: center; margin-top: .9rem; }

.detail-notfound { text-align: center; padding: clamp(2rem, 6vw, 4rem) 0; }
.detail-notfound .page-head__title { margin: .4rem 0 1rem; }
.detail-notfound .page-head__lede { margin: 0 auto 1.6rem; max-width: 52ch; }

/* Related events */
.related { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); background: var(--teal-tint2); }

/* =================================================================
   REGISTRATION MODAL
   ================================================================= */
body.modal-open { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0; background: rgba(34, 25, 20, .55);
  backdrop-filter: blur(2px); animation: fadeIn .2s ease;
}
.modal__dialog {
  position: relative; background: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem); width: min(560px, 100%);
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg);
  animation: modalIn .22s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; top: .7rem; right: .9rem; background: none; border: none;
  font-size: 1.9rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: .2rem .4rem;
}
.modal__close:hover { color: var(--ink); }
/* Linked More Good Together form shown in the popup */
.modal__dialog--frame { width: min(820px, 100%); }
.modal__frame { display: block; width: 100%; height: 70vh; border: 0; transition: height .2s ease; }
.modal__title { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin: 0 0 .25rem; padding-right: 2rem; }
.modal__meta { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1.4rem; }
.modal .field { margin-bottom: 1rem; }
.modal textarea {
  width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--cream);
  resize: vertical; min-height: 74px; transition: border-color .15s ease, box-shadow .15s ease;
}
.modal textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,124,142,.18); }
.modal .field--check { display: flex; }
.modal .field--check label { display: flex; align-items: center; gap: .55rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; margin: 0; }
.modal .field--check input { accent-color: var(--teal); width: 17px; height: 17px; }
.modal__msg { margin: .9rem 0 0; font-weight: 600; font-size: .9rem; min-height: 1.1rem; }
.modal__msg.is-error { color: var(--coral-deep); }

.modal__success { text-align: center; padding: 1rem 0 .5rem; }
/* Program page with no upcoming session: message above the Notify Me button. */
.detail__none { background: var(--sand); border-radius: var(--radius-sm); padding: 1rem 1.15rem; margin-bottom: .9rem; }
.detail__none-title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin: 0 0 .25rem; }
.detail__none-text { color: var(--ink-soft); font-size: .92rem; margin: 0; }
#notifyDone:focus { outline: none; }
.modal__success-ico {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 1rem;
  display: grid; place-items: center; background: var(--teal-tint); color: var(--teal-900); font-size: 1.9rem;
}
.modal__success h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin-bottom: .6rem; }
.modal__success p { color: var(--ink-soft); margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__dialog { animation: none; }
}

@media (max-width: 900px) {
  .detail__grid { grid-template-columns: 1fr; }
  .detail__side { position: static; }
  .related .cards--3 { grid-template-columns: 1fr; }
}

/* =================================================================
   SCROLL REVEAL
   ================================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Mobile navigation
     .header carries backdrop-filter, which makes it the containing block for
     its position:fixed descendants — that trapped the drawer inside the 96px
     header instead of the viewport. Drop the filter here (and go fully opaque
     in its place) so .nav resolves against the viewport again. */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cream); }
  .nav {
    position: fixed; right: 0; bottom: 0; left: auto;
    /* Starts flush under the header. JS sets --drawer-top to the header's real
       bottom edge on open, so the announcement bar being present or dismissed
       doesn't leave a gap; --header-h is the no-JS fallback. */
    top: var(--drawer-top, var(--header-h));
    width: min(88vw, 360px);
    background: var(--cream); flex-direction: column; align-items: stretch;
    gap: 0; padding: 1.25rem 1.5rem 2rem;
    transform: translateX(100%); transition: transform .3s ease;
    box-shadow: -20px 0 60px rgba(34,48,58,.2);
    overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 90;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list a { display: block; padding: .95rem 0; font-size: 1.05rem; }
  .nav__list a::after { display: none; }
  .nav__actions { flex-direction: column-reverse; align-items: stretch; gap: .7rem; margin-top: 1.4rem; }
  .nav__actions .btn { width: 100%; }
  .nav-toggle { display: flex; z-index: 95; }
  body.nav-open { overflow: hidden; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(34,48,58,.5); z-index: 80;
    opacity: 0; visibility: hidden; transition: opacity .3s ease;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 480px; margin: 1rem auto 0; width: 100%; }
  .welcome__grid,
  .spotlight__grid,
  .story__grid,
  .founder__grid,
  .newsletter__inner { grid-template-columns: 1fr; }
  .story__portrait, .founder__media { max-width: 440px; }
  .welcome__photo { order: 0; }
  .cards--3 { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .section-head--split { align-items: flex-start; }
}

@media (max-width: 560px) {
  .cards--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .field-row, .checks { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .announce__text { font-size: .82rem; padding-inline: 1.6rem; }
  .announce__link { display: block; margin: .2rem 0 0; }
  .hero__actions .btn,
  .events__actions .btn,
  .finalcta__actions .btn,
  .spotlight__actions .btn { width: 100%; }
  .hero__stat { right: 0; }
  .hero__badge { left: 0; }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .pathway:hover, .event:hover, .program:hover, .involve__card:hover, .partners__logo:hover { transform: none; }
}

/* =================================================================
   ABOUT + LEADERSHIP PAGES
   ================================================================= */

/* Overlay hero — full-width image with overlaid text + dark scrim (About + Home) */
.hero--overlay {
  position: relative; padding: 0; background: none; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(375px, 57vh, 525px);
}
/* About hero — shorter than the home hero (less image height) */
.hero--overlay.hero--about { min-height: clamp(340px, 46vh, 440px); }
.hero--overlay.hero--about .hero__inner { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
/* About hero — text spans the full width */
.hero--overlay.hero--about .hero__content { max-width: none; }
.hero--overlay.hero--about .hero__lede,
.hero--overlay.hero--about .hero__sub { max-width: none; }
.hero--overlay.hero--about .hero__scrim {
  background:
    linear-gradient(90deg, rgba(42,25,20,.9) 0%, rgba(42,25,20,.74) 55%, rgba(42,25,20,.56) 100%),
    linear-gradient(0deg, rgba(42,25,20,.5), transparent 55%);
}
/* Interior hero — edge-to-edge 50/50 split: tinted copy panel on the left,
   photo filling the right half. The copy lines up with the page's content
   column; below 900px the photo stacks above the copy. */
.hero--split { padding: 0; background: #fdf8f1; }
.hero--split .hero__grid {
  width: 100%; margin: 0; gap: 0;
  grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: clamp(380px, 40vw, 560px);
}
.hero--split .hero__content {
  align-self: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: max(1.2rem, calc(50vw - var(--wrap) / 2)) clamp(1.5rem, 4vw, 4rem);
}
.hero--split .hero__heading { font-size: clamp(2.1rem, 4vw, 3.3rem); }
.hero--split .hero__lede,
.hero--split .hero__sub { max-width: 46ch; color: var(--ink); }
.hero--split .eyebrow { color: var(--sun-deep); }
.hero--split .hero__media { position: relative; }
.hero--split .hero__photo {
  position: absolute; inset: 0;
  aspect-ratio: auto; border-radius: 0; box-shadow: none;
}
@media (max-width: 900px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero--split .hero__media { order: -1; max-width: none; margin: 0; aspect-ratio: 16 / 10; }
  .hero--split .hero__content { padding-inline: 1.2rem; }
}

.hero--overlay .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  /* Set by the widget so the stacked layout below can swap in its own art. */
  background-image: var(--hero-img);
}
/* Home hero — the subjects sit on the right of the photo, so anchor the crop
   to the right edge. Any overflow is trimmed from the left, which the scrim
   covers anyway, and the people stay whole at every viewport width. */
.hero--overlay:not(.hero--about) .hero__bg { background-position: right center; }
.hero--overlay .hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(249,240,231,.92) 0%, rgba(249,240,231,.68) 42%, rgba(249,240,231,.3) 78%, rgba(249,240,231,.12) 100%),
    linear-gradient(0deg, rgba(249,240,231,.5), transparent 55%);
}
.hero--overlay .hero__inner {
  position: relative; z-index: 2;
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
/* Home hero — the banner sits 25% shorter than the interior heroes, so the
   band trims to the copy instead of leaving a tall run of photo above it. */
.hero--overlay:not(.hero--about) .hero__inner { padding-block: clamp(1.4rem, 2.8vw, 2rem); }
.hero--overlay .hero__content { max-width: 640px; }
/* Home hero — narrow text column so the copy stacks against the photo. */
.hero--overlay:not(.hero--about) .hero__content { max-width: clamp(430px, 34vw, 445px); }
.hero--overlay .crumbs { color: rgba(255,255,255,.8); }
.hero--overlay .crumbs a { color: #fff; }
.hero--overlay .crumbs span:last-child { color: rgba(255,255,255,.85); }
.hero--overlay .eyebrow { color: var(--sun); }
.hero--overlay .hero__heading { color: #fff; }
.hero--overlay .u-hl {
  color: #fff;
  background: linear-gradient(180deg, transparent 62%, rgba(245,135,27,.6) 62%);
}
.hero--overlay .hero__lede,
.hero--overlay .hero__sub { color: rgba(255,255,255,.9); max-width: 52ch; }
.hero--overlay .hero__trust { color: rgba(255,255,255,.85); }
.hero--overlay .hero__trust::before { color: var(--sun); }
.hero--overlay .hero__startlink { color: rgba(255,255,255,.85); }
.hero--overlay .hero__startlink a { color: var(--sun); }

/* -----------------------------------------------------------------
   Home hero — dark type on the cream scrim (Figma node 41:129).
   Scoped away from .hero--about, which keeps its dark scrim + white type.
   ----------------------------------------------------------------- */
/* The trimmed hero pulls the copy close to the header, so the eyebrow gets
   its own breathing room above the headline. */
.hero--overlay:not(.hero--about) .eyebrow { color: var(--sun); padding-top: clamp(1rem, 2vw, 1.75rem); }
.hero--overlay:not(.hero--about) .hero__heading {
  font-family: var(--mackinac); font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 3.25rem);   /* 52px at design width */
  line-height: 1.19; letter-spacing: -.025em;
  color: var(--ink-hero);
}
.hero--overlay:not(.hero--about) .u-hl { color: #e64c00; background: none; }
.hero--overlay:not(.hero--about) .hero__lede,
.hero--overlay:not(.hero--about) .hero__sub {
  color: var(--ink); font-size: 1.125rem; line-height: 1.76; max-width: 52ch;
}
.hero--overlay:not(.hero--about) .hero__startlink { color: var(--ink); }
.hero--overlay:not(.hero--about) .hero__startlink a { color: var(--teal); }
/* Design pairs a solid orange pill with a white pill, not a ghost outline. */
.hero--overlay:not(.hero--about) .btn--outline-light {
  --btn-bg: #fff; --btn-fg: var(--teal); --btn-bd: #fff;
}
.hero--overlay:not(.hero--about) .btn--outline-light:hover {
  --btn-bg: var(--teal-tint); --btn-fg: var(--teal-900); --btn-bd: var(--teal-tint);
}
/* Home hero — below 1024px the photo crop pushes the sunlit grass in under the
   copy column and the dark type stops reading against it. Rather than drop the
   photo, unstack the overlay the way petlink.net does: the image becomes a
   full-bleed band across the top and the card of copy sits beneath it, so
   nothing is set over the picture. Layout only — every colour is inherited
   from the desktop rules. Scoped to the homepage; .hero--about keeps its
   overlay at every width. */
@media (max-width: 1024px) {
  .hero--overlay:not(.hero--about) { display: block; min-height: 0; }
  /* Out of the absolute overlay and into the flow, as its own banner strip. */
  .hero--overlay:not(.hero--about) .hero__bg {
    position: relative; inset: auto;
    height: clamp(220px, 40vw, 400px);
    /* The page can supply its own art for this band. With none set both vars
       fall back and the band keeps the desktop right-edge crop, which is what
       hides the cream gradient baked into the left ~40% of the wide banner. */
    background-image: var(--hero-img-mobile, var(--hero-img));
    background-position: var(--hero-img-mobile-pos, right center);
  }
  .hero--overlay:not(.hero--about) .hero__scrim { display: none; }
  .hero--overlay:not(.hero--about) .hero__inner { padding-block: clamp(2rem, 5vw, 2.75rem); }
  /* The band replaces the header as what sits above the eyebrow. */
  .hero--overlay:not(.hero--about) .eyebrow { padding-top: 0; }
  /* The card spans the container now that it no longer shares the row with the
     photo, but the body copy still holds a readable measure. */
  .hero--overlay:not(.hero--about) .hero__content { max-width: none; }
  .hero--overlay:not(.hero--about) .hero__lede,
  .hero--overlay:not(.hero--about) .hero__sub { max-width: 62ch; }
  /* Not a restyle: the solid white pill has a white border, so off the photo it
     would have no visible edge. Border only — fill and label are untouched. */
  .hero--overlay:not(.hero--about) .btn--outline-light { --btn-bd: var(--teal); }
}
@media (max-width: 640px) {
  /* Interior heroes keep their photo at every width; on phones the scrim goes
     bottom-up so the copy still clears the image. */
  .hero--overlay .hero__scrim {
    background: linear-gradient(0deg, rgba(249,240,231,.92) 0%, rgba(249,240,231,.6) 55%, rgba(249,240,231,.4) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero--overlay .hero__bg { animation: none; transform: scale(1); }
}

/* Two-up card grid + trust line */
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.hero__trust {
  font-size: .9rem; color: var(--ink-soft); font-weight: 600;
  display: inline-flex; align-items: center; gap: .45rem; margin: 1rem 0 0;
}
.hero__trust::before { content: "✦"; color: var(--sun-deep); }

/* Introduction / belonging statement */
.intro { padding: clamp(3rem, 6vw, 5rem) 0; text-align: center; }
.intro__inner { max-width: 760px; margin-inline: auto; }
.intro .section-title { margin-bottom: 1.2rem; }
.intro p { color: var(--ink-soft); font-size: 1.08rem; }
.pullquote {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem); line-height: 1.35; color: var(--teal-900);
  margin: 1.8rem auto 0; max-width: 26ch;
}

/* Vision & Mission cards */
.vm {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.1rem 1.9rem; box-shadow: var(--shadow-sm); border-top: 4px solid var(--teal);
}
.vm:nth-child(2) { border-top-color: var(--sun); }
.vm__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--teal-tint); color: var(--teal-600); margin-bottom: 1.1rem;
}
.vm:nth-child(2) .vm__icon { background: #fdf1dc; color: var(--sun-deep); }
.vm__icon svg { width: 27px; height: 27px; }
.vm h3 { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; margin-bottom: .6rem; }
.vm p { color: var(--ink-soft); margin: 0; font-size: 1.04rem; }

/* Mission framework — Educate / Empower / Inspire */
.frame {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem 1.7rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}
.frame:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.frame__key {
  font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 1rem; color: var(--teal-900);
  display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem;
}
.frame__num {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-tint); color: var(--teal-900); font-size: 1.05rem; flex: none;
}
.frame:nth-child(2) .frame__num { background: #fdeee9; color: var(--coral-deep); }
.frame:nth-child(3) .frame__num { background: #fdf1dc; color: var(--sun-deep); }
.frame p { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* Values */
.values-sec { padding: clamp(3rem, 6vw, 5.5rem) 0; background: var(--teal-tint2); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.value {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm);
}
.value h3 {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem;
  display: flex; align-items: center; gap: .6rem;
}
.value h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); flex: none; }
.value:nth-child(3n+1) h3::before { background: var(--teal); }
.value:nth-child(3n+2) h3::before { background: var(--coral); }
.value p { color: var(--ink-soft); margin: 0; font-size: .95rem; }

/* Impact — three verified stats */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stats--3 .stat:nth-child(3) { border-top-color: var(--sun); }

/* Leadership preview cards */
.leader {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}
.leader:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal); color: var(--ink); }
.leader--lead { border-top: 4px solid var(--sun); }
.leader__photo { aspect-ratio: 4 / 3.4; background-size: cover; background-position: center top; }
.leader__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.leader__name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin-bottom: .15rem; }
.leader__role { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--teal-600); margin-bottom: .6rem; }
.leader p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.leader__cta { margin-top: .9rem; font-weight: 700; color: var(--teal-900); font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; }
.leader:hover .leader__cta { color: var(--coral-deep); }
.leader:hover .leader__cta span { transform: translateX(3px); transition: transform .18s ease; }

/* Highlight the profile a visitor jumps to from a leadership card */
.member:target { box-shadow: 0 0 0 3px var(--sun), var(--shadow-md); }
.leader-feature:target { box-shadow: 0 0 0 3px var(--sun), var(--shadow-md); }

/* Leadership page — founder feature */
.leadership-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.leader-feature {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.8rem, 4vw, 3rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-md); align-items: center;
}
.leader-feature__photo {
  aspect-ratio: 4 / 4.4; border-radius: var(--radius); background-size: cover;
  background-position: center top; box-shadow: var(--shadow-md);
}
.leader-feature__name { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; }
.leader-feature__role { color: var(--teal-600); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .85rem; margin: .25rem 0 1.1rem; }
.leader-feature p { color: var(--ink-soft); }
/* "Read Full Biography" toggle — founder feature and About story */
.leader-feature__more, .bio-more { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.leader-feature__more summary, .bio-more summary {
  cursor: pointer; font-weight: 700; color: var(--teal-600); font-size: .95rem;
  list-style: none; display: inline-flex; align-items: center; gap: .45rem;
}
.leader-feature__more summary::-webkit-details-marker, .bio-more summary::-webkit-details-marker { display: none; }
.leader-feature__more summary::after, .bio-more summary::after { content: "+"; font-size: 1.15rem; line-height: 1; }
.leader-feature__more[open] summary::after, .bio-more[open] summary::after { content: "–"; }
.leader-feature__more p, .bio-more p { margin-top: .8rem; }

/* Board member grid */
.members { padding: clamp(3rem, 6vw, 5rem) 0; }
.member {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.member__photo { aspect-ratio: 4 / 3.2; background-size: cover; background-position: center top; }
.member__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.member__name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-bottom: .15rem; }
.member__role { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--teal-600); margin-bottom: .7rem; }
.member p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
/* About page leader cards expand the full bio in place, styled like .member. */
.leaders__extra { margin-top: 1.4rem; }   /* matches the .cards gap */
.leaders__extra[hidden] { display: none; }
article.leader:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
.member details, .leader__more { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.leader__more summary,
.member summary {
  cursor: pointer; font-weight: 700; color: var(--teal-600); font-size: .84rem;
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
}
.member summary::-webkit-details-marker, .leader__more summary::-webkit-details-marker { display: none; }
.member summary::after, .leader__more summary::after { content: "+"; font-size: 1.05rem; line-height: 1; }
.member details[open] summary::after, .leader__more[open] summary::after { content: "–"; }
.member details p, .leader__more p { margin-top: .7rem; font-size: .88rem; }

/* Governance */
.governance { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--sand); }
.governance__inner { max-width: 820px; margin-inline: auto; }
.governance p { color: var(--ink-soft); font-size: 1.05rem; }
.governance__links { display: grid; gap: .6rem; margin-top: 1.3rem; }
.governance__links li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font-size: .98rem; }
.governance__links .ico {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-tint); color: var(--teal-900); font-size: .75rem; font-weight: 700; margin-top: 2px;
}

@media (max-width: 900px) {
  .cards--2 { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .leader-feature { grid-template-columns: 1fr; }
  .leader-feature__photo { max-width: 360px; }
}
@media (max-width: 760px) {
  .stats--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .values { grid-template-columns: 1fr; }
}

/* =================================================================
   PROGRAMS LISTING + DETAIL
   ================================================================= */

/* Hero action row on the programs listing page-head */
.page-head__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
/* Breathing room below the hero actions before the trust bar (Programs page only) */
.page-head:has(.page-head__actions) { padding-bottom: clamp(1.75rem, 4vw, 3rem); }
/* Extra space below the hero lede where a page-head has no action row (e.g. Awards) */
.page-head--spaced { padding-bottom: clamp(1.75rem, 4vw, 3rem); }

/* Trust bar */
.trustbar { padding: clamp(1.6rem, 3vw, 2.2rem) 0; background: var(--teal-tint2); border-top: 1px solid var(--line); }
.trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.trustbar__item { padding-left: 1rem; border-left: 3px solid var(--sun); }
.trustbar__item:nth-child(2) { border-left-color: var(--teal); }
.trustbar__item:nth-child(3) { border-left-color: var(--coral); }
.trustbar__item:nth-child(4) { border-left-color: var(--teal-900); }
.trustbar__label { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-900); margin: 0 0 .3rem; }
.trustbar__sub { color: var(--ink-soft); font-size: .9rem; margin: 0; }

/* Filter + search controls */
.pfilters { padding: clamp(1.6rem, 3vw, 2.4rem) 0 0; }
.pfilters__bar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pfilters__search { position: relative; flex: 1 1 300px; max-width: 460px; }
.pfilters__search-ico { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); opacity: .55; font-size: .95rem; }
.pfilters__search input {
  width: 100%; padding: .8rem 1rem .8rem 2.6rem; border: 1.5px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pfilters__search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(210,69,27,.16); }
.pfilters__tabs { display: inline-flex; gap: .3rem; background: var(--teal-tint2); padding: .3rem; border-radius: 999px; flex-wrap: wrap; }
.ptab {
  font-family: inherit; font-weight: 600; font-size: .9rem; color: var(--ink-soft);
  background: transparent; border: none; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ptab:hover { color: var(--teal-900); }
.ptab.is-active { background: #fff; color: var(--teal-900); box-shadow: var(--shadow-sm); }
.ptab__count { display: none; font-size: .74rem; font-weight: 700; color: var(--teal-600); margin-left: .12rem; font-variant-numeric: tabular-nums; }
.ptab.is-active .ptab__count { display: inline; }

.pfilters__more { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.pfilters__more > summary {
  list-style: none; cursor: pointer; padding: .9rem 1.2rem; font-weight: 700; color: var(--teal-900);
  display: flex; align-items: center; gap: .4rem;
}
.pfilters__more > summary::-webkit-details-marker { display: none; }
.pfilters__more[open] > summary { border-bottom: 1px solid var(--line); }
.pfilters__groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; padding: 1.2rem; }
.pfilters__group { border: none; margin: 0; padding: 0; min-width: 0; }
.pfilters__group legend { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); padding: 0; margin-bottom: .6rem; }
.pfilters__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fchip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  border: 1.5px solid var(--line); border-radius: 999px; padding: .4rem .8rem; background: #fff;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.fchip:hover { border-color: var(--teal); }
.fchip input { accent-color: var(--teal); width: 15px; height: 15px; }
.fchip:has(input:checked) { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-900); }

.pfilters__status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.pfilters__count { margin: 0; font-weight: 600; color: var(--ink); font-size: .95rem; }

/* Program groups + cards */
.programs-listing { position: relative; }
.pgroup { padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.pgroup[hidden] { display: none; }
.pgroup--tint { background: var(--teal-tint2); }
/* Wide enough that the group headings sit on one line at full width
   (the longest, "Signature experiences to look forward to.", needs ~825px);
   the intro keeps a 720px measure so body copy stays readable. */
.pgroup__head { max-width: 880px; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.pgroup__head .section-title { margin: .2rem 0 .5rem; }
.pgroup__head .section-intro { max-width: 720px; }

.pcard {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .22s ease;
}
.pcard.is-hidden { display: none; }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pcard__media {
  aspect-ratio: 16 / 10; background-size: cover; background-position: center; position: relative; display: block;
}
.pcard__flag {
  position: absolute; top: .8rem; left: .8rem; background: var(--sun); color: #43310c;
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem .7rem; border-radius: 999px;
}
.pcard__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pcard__labels { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; }
.pcard__free { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-900); background: var(--teal-tint); padding: .28rem .6rem; border-radius: 999px; }
.pcard__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: .5rem; }
.pcard__title a { color: var(--ink); }
.pcard:hover .pcard__title a { color: var(--teal-900); }
.pcard__summary { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1rem; }
.pcard__facts { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.pcard__facts li { display: flex; gap: .5rem; align-items: flex-start; }
.pcard__actions { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
/* Fundraiser cards without a banner image. */
.pcard__media:not([style]) { background: var(--teal-tint2); }
.fr-confirm__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.fr-confirm__actions .btn { flex: 1 1 180px; justify-content: center; }
.detail__note { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1rem; }

/* Who-it's-for callout on the detail page */
.pcallout { background: var(--sand); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.pcallout__label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-900); margin: 0 0 .4rem; }
.pcallout p:last-child { margin: 0; color: var(--ink); }

/* Video module (facade) */
.pvideo { margin: .4rem 0 1.6rem; }
.pvideo__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--ink-bg); }
.pvideo__play { position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 0; cursor: pointer; background: none; }
.pvideo__poster { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .3s ease; }
.pvideo__play:hover .pvideo__poster { transform: scale(1.04); }
.pvideo__btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--teal-900);
  display: grid; place-items: center; font-size: 1.4rem; padding-left: 4px; box-shadow: var(--shadow-md);
  transition: transform .18s ease, background .2s ease;
}
.pvideo__play:hover .pvideo__btn { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.pvideo__soon { position: absolute; bottom: .8rem; right: .8rem; background: rgba(42,25,20,.8); color: #fff; font-size: .78rem; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; }
.pvideo__soon.is-note { left: .8rem; right: .8rem; text-align: center; }
.pvideo__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pvideo__cap { margin: .9rem 0 0; }
.pvideo__title { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.pvideo__ctx { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .3rem; }
.pvideo__meta { color: var(--ink-soft); font-size: .84rem; margin: 0; display: flex; align-items: center; gap: .4rem; }

/* FAQ accordion */
.faq { border-top: 1px solid var(--line); margin: .4rem 0 1.2rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  list-style: none; cursor: pointer; padding: 1rem .2rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.02rem;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; color: var(--teal-600); font-size: 1.3rem; line-height: 1; flex: none; }
.faq__item[open] > summary::after { content: "–"; }
.faq__item[open] > summary { color: var(--teal-900); }
.faq__a { padding: 0 .2rem 1.1rem; }
.faq__a p { color: var(--ink-soft); margin: 0; }

/* Gallery */
.pgallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: .4rem 0 1rem; }
.pgallery__img { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background-size: cover; background-position: center; box-shadow: var(--shadow-sm); }

/* How to participate steps */
.psteps { counter-reset: step; display: grid; gap: .9rem; margin: .4rem 0 1.4rem; padding: 0; }
.psteps li {
  position: relative; list-style: none; padding-left: 3rem; color: var(--ink-soft); min-height: 2rem;
  display: flex; align-items: center;
}
.psteps li strong { color: var(--ink); }
.psteps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--teal-tint); color: var(--teal-900); font-weight: 700; font-family: var(--serif);
  display: grid; place-items: center;
}

/* Program finder panel */
.finder { padding: clamp(3rem, 6vw, 4.5rem) 0; background: linear-gradient(155deg, var(--teal-900), var(--teal) 90%); color: #fff; position: relative; overflow: hidden; }
.finder::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(251,177,60,.22), transparent 70%); top: -120px; right: -60px; }
.finder__inner { position: relative; display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.finder__text p { color: rgba(255,255,255,.9); margin: .6rem 0 0; }
.finder__actions { display: flex; flex-direction: column; gap: .8rem; }

@media (max-width: 900px) {
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .pfilters__groups { grid-template-columns: 1fr; }
  .finder__inner { grid-template-columns: 1fr; }
  .pgallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .trustbar__grid { grid-template-columns: 1fr; }
  .pfilters__bar { flex-direction: column; align-items: stretch; }
  .pfilters__search { max-width: none; }
  .pfilters__tabs { justify-content: center; }
}

/* Respect the hidden attribute on buttons (.btn sets display) */
.btn[hidden] { display: none; }

/* Our Story — pillar bullet lists + Who We Serve */
.frame__list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.frame__list li { position: relative; padding-left: 1.1rem; color: var(--ink-soft); font-size: .88rem; }
.frame__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); }

.serve { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--teal-tint2); }
.serve__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem 1.6rem; }
.serve__grid li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font-weight: 500; font-size: .98rem; }
.serve__grid li::before { content: "✓"; color: var(--teal-600); font-weight: 700; flex: none; }
.serve__note { max-width: 720px; margin: 1.8rem auto 0; text-align: center; color: var(--ink-soft); font-size: 1.05rem; }
.serve__note strong { color: var(--ink); }
@media (max-width: 760px) { .serve__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .serve__grid { grid-template-columns: 1fr; } }

/* =================================================================
   ARTICLE PAGES (About MS, Awards) — readable long-form
   ================================================================= */
.onthispage { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.95); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); }
.onthispage .wrap { display: flex; align-items: center; gap: 1rem; overflow-x: auto; scrollbar-width: thin; }
.onthispage__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); flex: none; }
.onthispage ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: .55rem 0; flex: none; }
.onthispage a { white-space: nowrap; font-size: .88rem; font-weight: 600; color: var(--ink-soft); padding: .4rem .75rem; border-radius: 999px; }
.onthispage a:hover { background: var(--teal-tint); color: var(--teal-900); }

.article { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.article__wrap { max-width: 800px; margin-inline: auto; }
.article__block { margin-bottom: clamp(2rem, 4vw, 3rem); }
.article__block--tint { background: var(--teal-tint2); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); }
.article__h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); margin-bottom: .8rem; letter-spacing: -.01em; }
.article__h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--ink); margin: 1.8rem 0 .6rem; }
.article__block > p { color: var(--ink-soft); font-size: 1.05rem; }
.article__block--tint > p { color: var(--ink-soft); }
.article__note { background: var(--sand); border-radius: var(--radius-sm); padding: .9rem 1.15rem; font-size: .98rem; color: var(--ink); }
.article__note strong { color: var(--teal-900); }

.checkgrid { list-style: none; margin: .7rem 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.6rem; }
.checkgrid li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font-size: 1rem; }
.checkgrid li::before { content: "✓"; color: var(--teal-600); font-weight: 700; flex: none; }

.deflist { display: grid; gap: .9rem; margin: .7rem 0 1.1rem; }
.deflist__item { border-left: 3px solid var(--teal); padding-left: 1rem; }
.deflist dt { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.08rem; }
.deflist dd { margin: .25rem 0 0; color: var(--ink-soft); }

.reslist { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .55rem; }
.reslist li { color: var(--ink-soft); }
.reslist a { font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.ext { font-size: .82em; color: var(--sun-deep); }
.extnote { color: var(--ink-soft); font-size: .88rem; font-style: italic; }

.disclaimer { border: 1.5px solid var(--line); border-left: 4px solid var(--sun-deep); background: #fff; border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-top: 1.5rem; box-shadow: var(--shadow-sm); }
.disclaimer__title { font-size: 1.08rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.disclaimer__title span { color: var(--sun-deep); }
.disclaimer p { color: var(--ink-soft); font-size: .95rem; }
.disclaimer strong { color: var(--ink); }

@media (max-width: 560px) {
  .checkgrid { grid-template-columns: 1fr; }
}

/* Awards & Recognition — featured award feature blocks */
.award { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.award--alt { background: var(--teal-tint2); }
.award__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.award__grid--rev .award__media { order: 2; }
.award__photo { aspect-ratio: 4 / 3.4; border-radius: var(--radius-lg); background-size: cover; background-position: center; box-shadow: var(--shadow-lg); }
.award__body .section-title { margin-bottom: .4rem; }
.award__body > p { color: var(--ink-soft); }
.award__tagline { font-family: var(--serif); font-style: italic; color: var(--teal-600); font-size: 1.15rem; margin-bottom: 1rem; }
.award__h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--ink); margin: 1.4rem 0 .5rem; }
.award__quote { border-left: 4px solid var(--sun); background: var(--sand); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.1rem; margin: 1.4rem 0; }
.award__elements { font-size: .9rem; color: var(--ink-soft); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-top: 1.2rem; }
.award__body .btn { margin-top: 1.3rem; }
@media (max-width: 900px) {
  .award__grid { grid-template-columns: 1fr; }
  .award__grid--rev .award__media { order: 0; }
  .award__media { max-width: 520px; }
}

/* Awards & Recognition — honors timeline */
.honors { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.honors__groups { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); max-width: 860px; margin-inline: auto; }
.honors__heading {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--ink);
  margin: 0 0 1.2rem; padding-bottom: .7rem; border-bottom: 2px solid var(--line);
  display: flex; align-items: center; gap: .6rem;
}
.honors__heading::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); flex: none; }
.honors__list {
  list-style: none; margin: 0; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
/* Year | timeline rail with a dot | award. The rail is each body's left border,
   so the rows join into one continuous line. */
.honor { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1.1rem; }
.honor__year { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--teal-600); text-align: right; }
.honor__body { position: relative; border-left: 2px solid var(--line); padding: 0 0 1.6rem 1.6rem; }
.honor:last-child .honor__body { padding-bottom: 0; }
.honor__body::before {
  content: ""; position: absolute; left: -8px; top: .35rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sun); box-shadow: 0 0 0 4px #fff;
}
.honor__title { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--ink); margin: 0; }
.honor__org { margin: .25rem 0 0; color: var(--sun-deep); font-weight: 500; font-size: .95rem; }
.honor__desc { margin: .45rem 0 0; color: var(--ink-soft); }
.honor__video { margin-top: .85rem; padding: .5rem 1rem; font-size: .9rem; gap: .45rem; }
.honors .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .honor { grid-template-columns: 3.4rem 1fr; column-gap: .8rem; }
  .honor__year { font-size: 1.05rem; }
  .honor__body { padding-left: 1.2rem; }
}

/* =================================================================
   ABOUT US NAV DROPDOWN (desktop) + accordion (mobile)
   ================================================================= */
.nav__has-sub { position: relative; }
.nav__caret { font-size: 1.05em; color: var(--teal-600); margin-left: .25rem; display: inline-block; line-height: 1; transition: transform .2s ease; }
.nav__has-sub:hover > .nav__parent .nav__caret,
.nav__has-sub:focus-within > .nav__parent .nav__caret,
.nav__has-sub.is-open > .nav__parent .nav__caret { transform: rotate(180deg); }
.nav__sub-toggle { display: none; }
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 236px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: .45rem; margin: 0; z-index: 120;
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub,
.nav__has-sub.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; }
/* Desktop: a click on an open "About Us" closes it, and it stays closed while
   the pointer or focus is still there (main.js clears this on leave). */
@media (min-width: 901px) {
  .nav__has-sub.is-dismissed > .nav__sub { opacity: 0; visibility: hidden; transform: translateY(6px); }
  .nav__has-sub.is-dismissed > .nav__parent .nav__caret { transform: none; }
}
.nav__sub li { border: none !important; }
.nav__sub a { display: block; padding: .6rem .8rem !important; border-radius: 9px; font-size: .92rem !important; color: var(--ink); white-space: nowrap; }
.nav__sub a::after { display: none !important; }
.nav__sub a:hover { background: var(--teal-tint); color: var(--teal-900); }

@media (max-width: 900px) {
  .nav__has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__has-sub > a { flex: 1; }
  /* The whole "About Us" row is the accordion toggle; caret sits at the right. */
  .nav__parent {
    flex: 1; justify-content: space-between; padding: .95rem 0; font-size: 1.05rem; text-align: left;
  }
  .nav__has-sub:hover > .nav__parent .nav__caret,
  .nav__has-sub:focus-within > .nav__parent .nav__caret { transform: none; }
  .nav__has-sub.is-open > .nav__parent .nav__caret { transform: rotate(180deg); }
  .nav__sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: none; cursor: pointer;
    color: var(--ink); font-size: 1rem; transition: transform .2s ease;
  }
  .nav__sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0; padding: 0 0 .4rem .8rem;
    width: 100%; display: none;
  }
  .nav__has-sub.is-open > .nav__sub { display: flex; }
  .nav__sub a { padding: .7rem 0 !important; font-size: 1rem !important; }
  .nav__sub a:hover { background: none; }
}

/* =================================================================
   ADDED FOR WORDPRESS — event cards with no photo
   -----------------------------------------------------------------
   Card photos are shown untinted (the gradient overlay was removed),
   so an event with no cover image would otherwise leave a blank gap.
   A flat neutral panel keeps the card's shape without reintroducing
   a gradient.
   ================================================================= */
.event__media--empty {
  background-color: var(--sand);
  background-image: none;
}

/* =================================================================
   RESOURCES PAGE (resources.html)
   New components only — everything else reuses the shared system.
   ================================================================= */

/* -------- Article rhythm tweaks -------- */
.article--tight { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.article--tight .article__block:last-child { margin-bottom: 0; }
.article__block .eyebrow { margin-bottom: .6rem; }

/* Question lists (open questions, not checklists) */
.qlist { list-style: none; margin: .7rem 0 1.1rem; padding: 0; display: grid; gap: .5rem; }
.qlist li {
  display: flex; gap: .6rem; align-items: flex-start;
  color: var(--ink); font-size: 1rem;
}
.qlist li::before { content: "?"; color: var(--sun-deep); font-weight: 700; flex: none; }

/* Negative lists ("this is NOT intended to…") — a checkmark would read as
   an affirmation, so use a neutral marker. */
.notlist { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
.notlist li {
  display: flex; gap: .6rem; align-items: flex-start;
  color: var(--ink-soft); font-size: .95rem;
}
.notlist li::before { content: "×"; color: var(--coral-deep); font-weight: 700; flex: none; }

/* -------- Highlighted resource callout -------- */
.rescall {
  background: #fff; border: 1.5px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: var(--radius); padding: 1.5rem 1.6rem; margin: 1.6rem 0 0;
  box-shadow: var(--shadow-sm);
}
.rescall--local { border-left-color: var(--sun); background: var(--sand); box-shadow: none; }
.rescall__label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--sun-deep); margin: 0 0 .45rem;
}
.rescall__title {
  font-family: var(--serif); font-weight: 600; font-size: 1.22rem;
  color: var(--ink); margin: 0 0 .55rem;
}
.rescall p { color: var(--ink-soft); font-size: .98rem; }
.rescall .btn { margin-top: .3rem; }
.rescall__fine { font-size: .87rem; color: var(--ink-soft); margin: .9rem 0 0; font-style: italic; }

/* -------- Quick resource categories -------- */
.rescat { padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--teal-tint2); }
.rescat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.rescat__card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.rescat__card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--card-accent);
}
.rescat__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 12%, transparent);
  margin-bottom: 1rem;
}
.rescat__icon svg { width: 22px; height: 22px; }
.rescat__card h3 {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600;
  color: var(--card-accent); margin-bottom: .5rem;
}
.rescat__card p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1.3rem; }
.rescat__card .btn { margin-top: auto; }
.rescat__card .btn--outline-light {
  --btn-bg: transparent; --btn-fg: var(--teal-600); --btn-bd: var(--teal-600);
}
.rescat__card .btn--outline-light:hover {
  --btn-bg: var(--teal); --btn-fg: #fff; --btn-bd: var(--teal);
}
/* Per-card accent, cycling the brand palette across six cards. */
.rescat__card:nth-child(1) { --card-accent: #00A5AC; }
.rescat__card:nth-child(2) { --card-accent: #F97821; }
.rescat__card:nth-child(3) { --card-accent: #E93C02; }
.rescat__card:nth-child(4) { --card-accent: #D2451B; }
.rescat__card:nth-child(5) { --card-accent: #A85A08; }
.rescat__card:nth-child(6) { --card-accent: #9E2A12; }
.rescat__note {
  max-width: 760px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; text-align: center;
  color: var(--ink-soft); font-size: .95rem;
}

/* -------- Trusted national organizations -------- */
.orgs { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.orgs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.orgcard {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.45rem; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.orgcard:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.orgcard__title {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  color: var(--ink); margin-bottom: .5rem;
}
.orgcard p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1.2rem; }
.orgcard .btn { margin-top: auto; }

/* -------- Downloadable resources -------- */
.dlsec { padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--sand); }
.dlsec__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.dlcard {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.45rem;
}
.dlcard__ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--teal-tint); color: var(--teal-900); margin-bottom: .9rem;
}
.dlcard__ico svg { width: 20px; height: 20px; }
.dlcard__title {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); margin-bottom: .45rem;
}
.dlcard p { color: var(--ink-soft); font-size: .92rem; margin-bottom: .9rem; }
.dlcard__flag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--sun-deep); background: rgba(245,135,27,.14);
  border-radius: 999px; padding: .25rem .6rem; margin-bottom: .9rem;
}
.dlcard .btn { margin-top: auto; }
.dlcard .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.dlsec__note {
  max-width: 760px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; text-align: center;
  color: var(--ink-soft); font-size: .9rem; font-style: italic;
}

/* -------- Newsletter consent checkbox --------
   Sits inside the white .newsletter__form card, so it needs ink, not white. */
.consent {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .92rem; color: var(--ink-soft); margin: 0 0 1.1rem; cursor: pointer;
}
.consent input { margin-top: .25rem; flex: none; accent-color: var(--sun); }

/* -------- Responsive -------- */
@media (max-width: 1000px) {
  .rescat__grid, .orgs__grid, .dlsec__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .rescat__grid, .orgs__grid, .dlsec__grid { grid-template-columns: 1fr; }
}

/* =================================================================
   SHARED FORM PRIMITIVES (from the donate page block)
   .giform on Get Involved reuses these, so they are ported ahead of the
   donate page itself.
   ================================================================= */

/* Multi-paragraph FAQ answers — .faq__a p zeroes the margin, which collapsed
   the donate FAQ's two-paragraph answers into one block. */
.faq__a p + p { margin-top: .7rem; }

/* -------- Donation form -------- */
.dsec { padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--teal-tint2); }
.dform,
.giform {
  max-width: 760px; margin-inline: auto; background: #fff;
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.dgroup { border: none; padding: 0; margin: 0 0 1.9rem; }
.dgroup__legend {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink);
  padding: 0; margin-bottom: .85rem;
}
.dgroup__note {
  margin: .9rem 0 0; font-size: .92rem; color: var(--ink-soft);
  background: var(--sand); border-radius: var(--radius-sm); padding: .7rem .95rem;
}
.dgroup__note strong { color: var(--teal-900); }
.opt { font-weight: 400; color: var(--ink-soft); }

/* Segmented control (frequency, tribute type) */
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.seg--3 { grid-template-columns: repeat(3, 1fr); }
.seg__opt { position: relative; margin: 0; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg__opt span {
  display: block; text-align: center; padding: .8rem .7rem;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-weight: 600; font-size: .93rem; color: var(--ink-soft);
  background: var(--cream); transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.seg__opt:hover span { border-color: var(--teal); color: var(--teal-900); }
.seg__opt input:checked + span {
  border-color: var(--teal); background: var(--teal); color: #fff;
}
.seg__opt input:focus-visible + span { outline: 3px solid rgba(210,69,27,.4); outline-offset: 2px; }

/* Amount chips */
.amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.amt { position: relative; margin: 0; cursor: pointer; }
.amt input { position: absolute; opacity: 0; width: 0; height: 0; }
.amt span {
  display: block; text-align: center; padding: .9rem .5rem;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-family: var(--serif); font-weight: 600; font-size: 1.08rem; color: var(--ink);
  background: var(--cream); transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.amt:hover span { border-color: var(--sun); }
.amt input:checked + span {
  border-color: var(--sun-deep); background: rgba(245,135,27,.14); color: var(--teal-900);
}
.amt input:focus-visible + span { outline: 3px solid rgba(245,135,27,.45); outline-offset: 2px; }

.field--other { margin-top: .9rem; }
.inputmoney { position: relative; }
.inputmoney__sym {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-weight: 600; pointer-events: none;
}
.inputmoney input { padding-left: 2rem !important; }

/* Selects and textareas — the shared .field rules only cover inputs. */
.field select,
.field textarea {
  width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--cream);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(210,69,27,.18);
}
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--coral-deep); }

.field-row--3 { grid-template-columns: repeat(3, 1fr); }
.checks--1 { grid-template-columns: 1fr; }

/* Conditional tribute block */
.tribute {
  margin-top: 1.1rem; padding: 1.2rem 1.2rem .3rem;
  background: var(--sand); border-radius: var(--radius);
}

.dform__msg,
.giform__msg { margin: .9rem 0 0; font-size: .92rem; font-weight: 600; min-height: 1.2rem; }
.dform__msg.is-error,
.giform__msg.is-error { color: var(--coral-deep); }
.dform__msg.is-ok,
.giform__msg.is-ok { color: #2f7d5b; }
.dform__secure {
  margin: 1rem 0 0; font-size: .86rem; color: var(--ink-soft);
  display: flex; gap: .5rem; align-items: flex-start;
}


/* =================================================================
   GET INVOLVED PAGE (get-involved.html)
   Form cards reuse the .dform primitives via the shared selectors above.
   ================================================================= */
.gisec { padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--teal-tint2); }
.gisec--alt { background: var(--sand); }
.gisec .section-intro { max-width: 620px; margin-inline: auto; }

/* The consent checkbox on a light form card needs ink, not the white
   used inside the dark newsletter band. */
.consent--ink { color: var(--ink-soft); }

/* Segmented controls sit inside .field--check fieldsets on this page, so
   they need the legend spacing the .field rules already provide. */
.giform .field--check .seg { margin-top: .15rem; }

/* -------- Why get involved -------- */
.brightspots { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.brightspots__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.6rem;
  max-width: 900px; margin-inline: auto; list-style: none; padding: 0;
}
.brightspots__grid li {
  display: flex; gap: .7rem; align-items: flex-start;
  color: var(--ink); font-size: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
}
.brightspots__grid li::before {
  content: "✦"; color: var(--sun-deep); font-weight: 700; flex: none;
}
.brightspots__note {
  max-width: 640px; margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; text-align: center;
  color: var(--ink-soft); font-size: 1rem;
}

@media (max-width: 680px) {
  .brightspots__grid { grid-template-columns: 1fr; }
}

/* -------- Giving options -------- */
.giveways { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.giveways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.giveways__wide { display: grid; gap: 1.4rem; margin-top: 1.4rem; }
.givecard {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.givecard:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.givecard--wide:hover { border-color: var(--line); box-shadow: none; }
.givecard__title {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); margin-bottom: .55rem;
}
.givecard p { color: var(--ink-soft); font-size: .93rem; }
.givecard .btn { margin-top: auto; }
.givecard--wide .btn { margin-top: .4rem; }
.givecard__fine { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.givecard__addr {
  font-style: normal; background: var(--sand); border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; margin: 0 0 1rem; color: var(--ink); line-height: 1.7;
}

@media (max-width: 1000px) {
  .giveways__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .giveways__grid { grid-template-columns: 1fr; }
}

/* =================================================================
   DONATE PAGE (donate.html)
   The form primitives and giving-option cards were ported with the Get
   Involved page; these are the components only this page uses.
   ================================================================= */

/* -------- Post-transaction status panels -------- */
.dstatus-wrap { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.dstatus {
  display: flex; gap: 1.2rem; align-items: flex-start;
  border: 1.5px solid var(--line); border-left: 5px solid var(--teal);
  border-radius: var(--radius); background: #fff;
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-md);
}
/* display:flex above would beat the hidden attribute — restore it, same as .modal. */
.dstatus[hidden] { display: none; }
.dstatus:focus { outline: none; }
.dstatus--ok { border-left-color: #2f7d5b; }
.dstatus--err { border-left-color: var(--coral-deep); }
.dstatus__ico {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.dstatus__ico svg { width: 24px; height: 24px; }
.dstatus--ok .dstatus__ico { background: rgba(47,125,91,.12); color: #2f7d5b; }
.dstatus--err .dstatus__ico { background: rgba(181,39,26,.12); color: var(--coral-deep); }
.dstatus__title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--ink); margin: 0 0 .6rem;
}
.dstatus__body p { color: var(--ink-soft); }
.dstatus__body strong { color: var(--ink); }
.dstatus__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }


/* -------- Impact tiers -------- */
.tiers { padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--sand); }
.tiers__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.tier {
  background: #fff; border-radius: var(--radius); padding: 1.6rem 1.3rem;
  border-top: 4px solid var(--sun); box-shadow: var(--shadow-sm);
}
.tier__amt {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--teal-900); line-height: 1; margin: 0 0 .6rem;
}
.tier p:last-child { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.tiers__note {
  max-width: 760px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; text-align: center;
  color: var(--ink-soft); font-size: .9rem; font-style: italic;
}

/* -------- Donor story -------- */
.donorquote { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.donorquote__inner { max-width: 780px; margin-inline: auto; }
.donorquote blockquote {
  margin: 0; border-left: 4px solid var(--sun); padding-left: clamp(1.2rem, 3vw, 2rem);
}
.donorquote__big {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.3; color: var(--ink); margin: 0 0 1.1rem;
}
.donorquote blockquote p { color: var(--ink-soft); }
.donorquote__attr { margin-top: 1rem; color: var(--ink-soft); font-size: .92rem; }
.donorquote__attr strong { color: var(--ink); display: block; }

/* -------- Financial trust + donation contact -------- */
.trustsec { padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--teal-tint2); }
.trustsec__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; align-items: start; }
.trustpanel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.trustpanel .section-title { text-align: left; font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 1rem; }
.trustpanel__title {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
  color: var(--ink); margin: 0 0 .7rem;
}
.trustpanel p { color: var(--ink-soft); font-size: .95rem; }
/* White card like the "Giving with confidence" panel beside it, with a
   serif heading and amber labels. */
.trustpanel--contact { background: #fff; color: var(--ink-soft); }
.trustpanel--contact .trustpanel__title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  color: var(--ink); letter-spacing: -.01em; margin-bottom: .8rem;
}
.trustpanel--contact p { color: var(--ink-soft); font-size: 1.05rem; }
.contactlist { display: grid; gap: .8rem; margin: 0 0 1.4rem; }
.contactlist__label {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--sun-deep); margin-bottom: .15rem;
}
.contactlist a { color: var(--teal-600); font-weight: 600; }
.contactlist a:hover { color: var(--teal-900); }


/* -------- Responsive -------- */
@media (max-width: 1000px) {
  .giveways__grid { grid-template-columns: repeat(2, 1fr); }
  .tiers__grid { grid-template-columns: repeat(3, 1fr); }
  .trustsec__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .giveways__grid { grid-template-columns: 1fr; }
  .tiers__grid { grid-template-columns: 1fr; }
  .amts { grid-template-columns: repeat(2, 1fr); }
  .seg, .seg--3 { grid-template-columns: 1fr; }
  .field-row--3 { grid-template-columns: 1fr; }
  .dstatus { flex-direction: column; }
}

/* Donate page video — .pvideo is sized for the 800px article column, so give
   it its own centred container between the hero and the intro copy. */
.dvideo { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.dvideo__inner { max-width: 860px; margin-inline: auto; }


/* =================================================================
   STORIES PAGE (a stack of the homepage's story section)
   Several stories in a row would read as one long block, so alternate
   which side the portrait sits on and tint every other band.
   ================================================================= */
.story--rev .story__grid { grid-template-columns: 1.15fr .85fr; }
.story--rev .story__portrait { order: 2; }
.story--tint { background: var(--sand); }

@media (max-width: 860px) {
  .story--rev .story__grid { grid-template-columns: 1fr; }
  .story--rev .story__portrait { order: 0; }
}

/* Video testimonials — a video takes the portrait's place. Landscape videos
   get the wider column; vertical reels keep the narrow one at 9:16. */
.story--video:not(.story--reel) .story__grid { grid-template-columns: 1.15fr .85fr; }
.story--video.story--rev:not(.story--reel) .story__grid { grid-template-columns: .85fr 1.15fr; }
.story__video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--ink-bg); box-shadow: var(--shadow-lg);
}
.story--reel .story__video { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
.story__video iframe,
.story__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.story__video--native { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }
.story__video--native blockquote { margin: 0 auto !important; }

@media (max-width: 860px) {
  .story--video .story__grid,
  .story--video.story--rev .story__grid { grid-template-columns: 1fr; }
  .story--video:not(.story--reel) .story__portrait { max-width: none; }
}

/* =================================================================
   Video Stories — a row of video / reel testimonials (Stories page).
   Reels sit four across; landscape videos take two reel widths.
   ================================================================= */
.vstories { padding: clamp(3rem, 6vw, 5.5rem) 0; background: var(--teal-tint2); }
/* The two video sections sit back to back, so alternate the band. */
.vstories--full { background: var(--cream); }
.vstories__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start;
}
.vstory { margin: 0; }
.vstory--wide { grid-column: span 2; }
.vstory__frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius);
  overflow: hidden; background: var(--ink-bg); box-shadow: var(--shadow-md);
}
.vstory--wide .vstory__frame { aspect-ratio: 16 / 9; }
.vstory__frame iframe,
.vstory__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vstory__frame--native { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }
.vstory__frame--native blockquote { margin: 0 auto !important; min-width: 0 !important; }

/* Placeholder card — shown only until the first real video is added. */
.vstory__frame--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  background: linear-gradient(160deg, var(--teal-tint) 0%, var(--sand) 100%);
  border: 2px dashed var(--line); box-shadow: none;
}
.vstory__play {
  width: 64px; height: 64px; border-radius: 50%; background: var(--teal);
  box-shadow: var(--shadow-md); position: relative;
}
.vstory__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff;
}
.vstory__soon { font-size: .85rem; font-weight: 600; color: var(--ink); }

.vstory__cap { display: flex; flex-direction: column; margin-top: .8rem; }
.vstory__cap strong { color: var(--ink); font-size: 1rem; }
.vstory__cap span { color: var(--ink-soft); font-size: .9rem; }

@media (max-width: 960px) {
  .vstories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .vstories__grid { grid-template-columns: 1fr; }
  .vstory--wide { grid-column: auto; }
  .vstory--reel .vstory__frame { max-width: 340px; margin-inline: auto; }
  .vstory--reel .vstory__cap { max-width: 340px; margin-inline: auto; }
}

/* =================================================================
   EVENTS CALENDAR VIEW  (/{events-page}/calendar/ — templates/events-calendar.php)
   ================================================================= */
.evcal { padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 5rem); }
.evcal .wrap { position: relative; }

/* Category colours — background / text pairs are 4.5:1+ */
.evcal-c0 { --c-bg: #fdeee9; --c-fg: #b5271a; --c-dot: #e5342a; }
.evcal-c1 { --c-bg: #fde7da; --c-fg: #9e2a12; --c-dot: #d2451b; }
.evcal-c2 { --c-bg: #fdf1dc; --c-fg: #864a06; --c-dot: #f5871b; }
.evcal-c3 { --c-bg: #e6f6f7; --c-fg: #00636a; --c-dot: #00a5ac; }
.evcal-c4 { --c-bg: #efe9f6; --c-fg: #5b3a87; --c-dot: #8a63c2; }
.evcal-c5 { --c-bg: #e7f4ea; --c-fg: #1d6b34; --c-dot: #2f9e4f; }
.evcal-c6 { --c-bg: #e8eef8; --c-fg: #284f8f; --c-dot: #3f72c4; }
.evcal-c7 { --c-bg: #f3efe9; --c-fg: #5c4a33; --c-dot: #8c7353; }

.evcal__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.evcal__nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.evcal__arrow, .evcal__today {
  height: 44px; border: 1.5px solid var(--line); background: #fff; color: var(--teal-900);
  border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}
.evcal__arrow { width: 44px; }
.evcal__today { padding: 0 1.1rem; color: var(--ink); }
.evcal__arrow:hover, .evcal__today:hover { border-color: var(--teal); }
.evcal__title { margin: 0 0 0 .4rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.evcal__controls { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.evcal__program[hidden] { display: none; }
.evcal__views { display: inline-flex; gap: .25rem; background: var(--teal-tint2); padding: .25rem; border-radius: 999px; }
.evcal__views button {
  height: 38px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent;
  font-family: inherit; font-weight: 600; font-size: .9rem; color: var(--ink); cursor: pointer;
}
.evcal__views button[aria-pressed="true"] { background: #fff; color: var(--teal-900); box-shadow: var(--shadow-sm); }

.evcal__meta { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap; margin: 1.2rem 0 1rem; font-size: .9rem; }
.evcal__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.evcal__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.evcal__back { font-weight: 600; color: var(--teal-600); }
.evcal__dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-dot); }

/* Month */
.evcal__month { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.evcal__weekdays, .evcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.evcal__weekdays { background: var(--teal-tint2); border-bottom: 1px solid var(--line); }
.evcal__weekdays div { padding: .7rem .75rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.evcal__day { min-height: 124px; padding: .45rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.evcal__day:nth-child(7n) { border-right: 0; }
.evcal__grid .evcal__day:nth-last-child(-n+7) { border-bottom: 0; }
.evcal__day.is-out { background: #fbf8f6; }
.evcal__num {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .9rem; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.evcal__day.is-out .evcal__num { color: #6b615a; }
.evcal__day.is-today .evcal__num { background: var(--teal); color: #fff; }
.evcal__num:focus-visible, .evcal__chip:focus-visible, .evcal__item:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.evcal__chips { display: flex; flex-direction: column; gap: .3rem; margin-top: .25rem; }
.evcal__chip {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  padding: .32rem .5rem; border-radius: 8px; background: var(--c-bg); color: var(--c-fg);
  font-family: inherit; font-size: .8rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evcal__chip:hover { filter: brightness(.96); }
.evcal__chip-time { font-weight: 700; }
.evcal__dots { display: none; }

/* Week */
.evcal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.evcal__wday { min-height: 320px; padding: .6rem; border-right: 1px solid var(--line); min-width: 0; }
.evcal__wday:last-child { border-right: 0; }
.evcal__wday-head { margin: 0 0 .5rem; font-family: var(--sans); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: .4rem; }
.evcal__wday-num { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; font-size: .95rem; letter-spacing: 0; }
.evcal__wday.is-today .evcal__wday-num { background: var(--teal); color: #fff; }
.evcal__wday .evcal__chip { white-space: normal; }
.evcal__wday-empty { margin: .4rem 0 0; color: #6b615a; }

/* List (and the phone day panel) */
.evcal__group + .evcal__group { margin-top: 1.2rem; }
.evcal__dayhead { margin: 0 0 .5rem; font-family: var(--sans); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.evcal__dayhead.is-today { color: var(--teal-600); }
.evcal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.evcal__item {
  display: flex; gap: .8rem; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  font-family: inherit; color: var(--ink); transition: border-color .15s ease;
}
.evcal__item:hover { border-color: var(--teal); }
.evcal__item .evcal__dot { width: 12px; height: 12px; margin-top: .35rem; }
.evcal__item-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.evcal__item-title { font-weight: 700; font-size: 1rem; }
.evcal__item-meta { font-size: .88rem; }
.evcal__daypanel { display: none; margin-top: 1rem; }
.evcal__empty { margin: 0; }

/* Event card */
.evcal__pop {
  position: absolute; z-index: 30; width: 340px; max-width: calc(100% - 2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1.2rem; display: flex; flex-direction: column; gap: .7rem;
}
.evcal__pop[hidden] { display: none; }
.evcal__pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.evcal__tag { background: var(--c-bg); color: var(--c-fg); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .65rem; border-radius: 999px; }
.evcal__close { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.evcal__close:hover { background: var(--teal-tint2); }
.evcal__pop-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.evcal__pop-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; }
.evcal__status { font-weight: 600; }
.evcal__status--open, .evcal__status--few { color: #15803d; }
.evcal__status--closed { color: var(--coral-deep); }
.evcal__pop-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.evcal__pop-actions .btn { padding: .65rem 1.1rem; font-size: .9rem; }
.evcal__note { margin: 1.2rem 0 0; font-size: .9rem; }

@media (max-width: 900px) {
  .evcal__chip-time { display: none; }
}

@media (max-width: 700px) {
  .evcal__bar { align-items: stretch; }
  .evcal__nav { justify-content: space-between; width: 100%; }
  .evcal__title { order: -1; width: 100%; margin: 0; text-align: center; }
  .evcal__controls { width: 100%; }
  .evcal__views { width: 100%; }
  .evcal__views button { flex: 1; }
  .evcal__program, .evcal__program select { width: 100%; min-width: 0; }

  /* Month on a phone: dots in the grid, the chosen day listed below. */
  .evcal__day { min-height: 64px; padding: .25rem; display: flex; flex-direction: column; align-items: center; }
  .evcal__num { width: 40px; height: 40px; }
  .evcal__day.is-selected .evcal__num { box-shadow: inset 0 0 0 2px var(--teal); }
  .evcal__weekdays div { padding: .6rem .2rem; text-align: center; font-size: .68rem; letter-spacing: .04em; }
  .evcal__month .evcal__chips { display: none; }
  .evcal__dots { display: flex; gap: 3px; margin-top: 2px; }
  .evcal__dots .evcal__dot { width: 7px; height: 7px; }
  .evcal__daypanel { display: block; }

  .evcal__week { grid-template-columns: 1fr; }
  .evcal__wday { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .evcal__wday:last-child { border-bottom: 0; }
  .evcal__chip-time { display: inline; }

  .evcal__pop {
    position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: auto; max-width: none; border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
  }
}

/* =================================================================
   CONTACT PAGE  (page-templates/contact.php)
   The form card reuses .giform / .field / .seg from the Get Involved forms.
   ================================================================= */
.contact { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); background: var(--teal-tint2); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.contact .giform { max-width: none; margin: 0; }
.contact__heading { font-size: 1.5rem; margin: 0 0 .4rem; }
.contact__intro { margin: 0 0 1.4rem; color: var(--ink-soft); }
.contact__privacy { margin: .6rem 0 0; font-size: .86rem; color: var(--ink-soft); }
.contact .field-row .field { min-width: 0; }
.field__error { margin: .35rem 0 0; font-size: .84rem; font-weight: 600; color: var(--coral-deep); }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.contact__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__done {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 3.5vw, 2.6rem); text-align: center;
}
.contact__done[hidden] { display: none; }
.contact__done:focus { outline: none; }
.contact__done-title { margin: 0 0 .6rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); }
.contact__done p { margin: 0; font-size: 1.05rem; }

.contact__aside {
  background: #fff; border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
}
.contact__aside-title { margin: 0 0 .8rem; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.contact__aside p { margin: 0 0 1rem; }
.contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact__list li { display: flex; flex-direction: column; gap: .15rem; }
.contact__label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.contact__list a { font-weight: 600; color: var(--teal-600); word-break: break-word; }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Donation provider embed (Donate page → 4. Donation form → Embed code) */
.dembed {
  max-width: 760px; margin-inline: auto; background: #fff;
  border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--shadow-md);
}
.dembed--wide { max-width: none; }
.dembed--bare { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.dsec--plain { background: #fff; }
.dembed iframe { display: block; width: 100%; max-width: 100%; border: 0; }
/* Providers (Kindful) put z-index: 99999 on their iframe, which slid it over the
   sticky header while scrolling. Keep every embed in its own layer below it. */
.dembed { position: relative; z-index: 0; isolation: isolate; }
.dembed iframe, .dembed [id^="kindful"] { z-index: auto !important; }
/* "Form height (px)" — beats the height a provider writes inline (Kindful: 1000px). */
.dembed--sized .kindful-embed-wrapper,
.dembed--sized > iframe { height: var(--embed-h) !important; }