/* =================================================================
   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:        #2a2422;   /* primary text — warm charcoal (from logo type) */
  --ink-soft:   #6a5d55;   /* secondary text */
  --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:    #383230;   /* 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; }
.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 { color: var(--ink); font-weight: 500; font-size: .95rem; padding: .4rem 0; position: relative; }
.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-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); 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; }
.welcome__grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.welcome__text .eyebrow { color: #6a5d55; }
.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: #2a2422;
  padding-bottom: 5px;
}
.welcome__text .section-title .u-accent { color: var(--teal); }
.welcome__text p { color: rgba(0,0,0,.9); font-size: 1.125rem; line-height: 1.76; }
.welcome__text p strong { color: #2a2422; }
.welcome__cta { margin-top: 1.6rem; }
/* Standalone polaroid — the white frame, tilt 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;
}

/* =================================================================
   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: #2a2422;
}
.pathways--pillars .section-title .u-accent,
.events .section-title .u-accent { color: var(--teal); }
.pathways--pillars .section-intro { color: rgba(0,0,0,.9); 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; }
.events__grid { margin-top: 1rem; }
.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; text-transform: uppercase; letter-spacing: .06em;
  padding: .28rem .6rem; border-radius: 999px; background: var(--teal-tint); color: var(--teal-900);
}
.tag--coral { background: #fdeee9; color: var(--coral-deep); }
.tag--sun { background: #fdf1dc; color: var(--sun-deep); }
.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; }
.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;
  text-transform: uppercase; letter-spacing: .06em; padding: .35rem .75rem; border-radius: 999px;
}
.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; }
.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) 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; }

/* =================================================================
   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;
}
.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); 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); }
.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); }

.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%; }
}

/* =================================================================
   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;
}
.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); }

/* 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); }
.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; }
.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; }
  .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(500px, 76vh, 700px);
}
/* 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%);
}
.hero--overlay .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  animation: heroKenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
.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);
}
.hero--overlay .hero__content { max-width: 640px; }
.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.
   ----------------------------------------------------------------- */
.hero--overlay:not(.hero--about) .eyebrow { color: var(--sun); }
.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: rgba(0,0,0,.9); font-size: 1.125rem; line-height: 1.76; max-width: 52ch;
}
.hero--overlay:not(.hero--about) .hero__startlink { color: rgba(0,0,0,.9); }
.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);
}
@media (max-width: 640px) {
  .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); }

/* 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; }
.member details { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.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 { display: none; }
.member summary::after { content: "+"; font-size: 1.05rem; line-height: 1; }
.member details[open] summary::after { content: "–"; }
.member details 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; }

/* 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); }
.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; }
}

/* =================================================================
   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 > a .nav__caret,
.nav__has-sub:focus-within > a .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 { opacity: 1; visibility: visible; 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; }
  .nav__caret { display: none; }
  .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;
}