/* ==============================================================
   Grace To Change — Site Styles

   Design principles:
     - User-first: someone in crisis is our primary reader
     - Warm, empathic, calm — not clinical, not sales-y
     - Poppins throughout
     - Real space photos as visual warmth
     - Generous whitespace, clear one-primary-CTA hierarchy
   ============================================================== */

/* Poppins, self-hosted (latin subset from Google Fonts, SIL OFL).
   Was a Google Fonts <link>, which held up first paint by about 0.75 s
   on mobile. Pages preload 400 and 700. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800.woff2') format('woff2');
}

:root {
  /* Height of the pinned .site-top (header + pre-header). Anchor
     jumps and sticky elements below it offset by this. Measured:
     194px desktop/tablet, 170px phone (smaller logo). */
  --site-top-h: 194px;
  /* Palette — sampled from the current gracetochange.org brand:
     dark navy for backgrounds/CTAs, burnt orange for accents. */
  --color-primary: #2E3D4E;
  --color-primary-dark: #1F2B38;
  --color-primary-light: #435668;

  --color-accent: #C0603F;
  --color-accent-dark: #A04F30;

  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F5F5;
  --color-dark: #1F2B38;
  --color-text: #2A2A2A;
  --color-muted: #6B7280;
  --color-border: #E5E7EB;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --max-w: 1160px;

  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shadow-sm: 0 2px 4px rgba(31, 43, 56, 0.06);
  --shadow-md: 0 8px 20px rgba(31, 43, 56, 0.08);
  --shadow-lg: 0 20px 40px rgba(31, 43, 56, 0.12);
}

/* ---- Reset -------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-primary-dark);
}

a:hover {
  color: var(--color-primary);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-dark);
  line-height: 1.2;
}

p {
  margin: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: #fff;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
}

.eyebrow--small {
  font-size: 0.6875rem;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-sm);
}

.eyebrow--light {
  color: var(--color-accent);
}

/* ---- Pre-header ---------------------------------------------- */
/* Orange strip under the main header with the two asks: Volunteer
   and Donate, so Donate appears once, at every width. Pinned with
   the header via .site-top. Chosen by the client over a navy strip
   above the header (2026-10-12). On the brand orange, white text
   only reaches about 4.2:1, so Volunteer is solid white with navy
   text and Donate is solid navy. Hover swaps each to the other's
   colours. */
.pre-header {
  background: var(--color-accent);
}

.pre-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 8px var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Two equal columns, each as wide as the longer label, so both
   buttons are the same width. */
.pre-header__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.pre-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pre-header__btn--volunteer,
.pre-header__btn--donate:hover,
.pre-header__btn--donate:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-primary-dark);
}

.pre-header__btn--donate,
.pre-header__btn--volunteer:hover,
.pre-header__btn--volunteer:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #ffffff;
}

/* Navy ring: a white one would vanish against the white button. */
.pre-header__btn:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* Phones: the two buttons split the width. */
@media (max-width: 640px) {
  .pre-header__inner {
    padding: 8px var(--space-md);
  }

  .pre-header__actions {
    width: 100%;
  }
}

/* ---- Site header ------------------------------------------- */
/* .site-top wraps the header and the pre-header so both stay pinned
   to the top as one block. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 10;
}

html {
  scroll-padding-top: var(--site-top-h);
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* 3-column grid on desktop: logo (auto) | nav (centered 1fr) |
   actions (auto). The nav is justify-self:center so it visually
   centers in the header regardless of nav-item count, while the
   phone stays pinned to the right. */
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
}

.site-header__logo {
  /* Source logo is 2000x2000 square with the "From Pain and
     Addiction..." slogan arced around the mark. At 104px tall the
     slogan text is fully legible in the header. */
  height: 104px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  justify-self: center; /* centered in its grid column */
}

/* Right-hand actions cluster: phone (Donate is in the pre-header) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-nav a {
  text-decoration: none;
  color: var(--color-dark);
  font-weight: 500;
  font-size: 0.9375rem;
}

.site-nav a:hover {
  color: var(--color-primary);
}

/* Programs dropdown: Treatment / Education / Resources (sections of
   /programs). Opens on hover and on keyboard focus (:focus-within), so
   tabbing onto "Programs" reveals the three links next. */
.site-nav__group {
  position: relative;
}

.site-nav__parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-nav__caret {
  transition: transform 0.2s ease;
}

.site-nav__group:hover .site-nav__caret,
.site-nav__group:focus-within .site-nav__caret {
  transform: rotate(180deg);
}

.site-nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 20;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Invisible bridge over the 12px gap so the menu stays open while the
   pointer moves down to it. */
.site-nav__menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.site-nav .site-nav__menu-link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.site-nav .site-nav__menu-link:hover,
.site-nav .site-nav__menu-link:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-primary);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__caret,
  .site-nav__menu {
    transition: none;
  }
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-dark) !important;
  font-weight: 600 !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

/* No underline, so the colour change is the hover cue. */
.site-header__phone:hover {
  color: var(--color-accent) !important;
}

.site-header__phone-icon {
  font-size: 0.875rem;
}

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9375rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.btn--lg {
  padding: 16px 30px;
  font-size: 1rem;
}

.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn--donate {
  background: var(--color-accent);
  color: #ffffff !important;
}

.btn--donate:hover {
  background: var(--color-accent-dark);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn--ghost:hover {
  background: var(--color-primary-dark);
  color: #ffffff;
}

.btn--ghost-light {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost-light:hover {
  background: #ffffff;
  color: var(--color-primary-dark);
  border-color: #ffffff;
}

/* ---- Hero — full-bleed photo slideshow -------------------- */
.hero--slider {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 0;
  overflow: hidden;
  color: #ffffff;
  background: var(--color-primary-dark); /* shows until the first photo loads */
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Crossfade plus a slow zoom-out on the photo that is showing. The
   outgoing photo keeps its zoom until it has faded, then resets. */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.2s ease, transform 0s linear 1.2s;
}

.hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.2s ease, transform 7s ease-out;
}

.hero--slider.is-paused .hero__slide.is-active {
  transform: scale(1);
}

/* Dark scrim gradient — darker on the left (where copy sits) fading
   to lighter on the right so the photos show through the right half
   of the frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(15, 22, 33, 0.88) 0%,
      rgba(15, 22, 33, 0.72) 40%,
      rgba(15, 22, 33, 0.4) 75%,
      rgba(15, 22, 33, 0.35) 100%
    );
}

/* Pause button + dots, bottom right. 44px touch targets. */
.hero__controls {
  position: absolute;
  z-index: 3;
  right: var(--space-lg);
  bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 4px;
}

.hero__dots {
  display: flex;
}

.hero__dot,
.hero__pause {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 1;
  display: grid;
  place-items: center;
  color: #ffffff;
}

.hero__dot::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  transition: width 0.3s ease, background 0.3s ease;
}

.hero__dot:hover::before {
  background: rgba(255, 255, 255, 0.85);
}

.hero__dot.is-active::before {
  width: 26px;
  background: #ffffff;
}

.hero__pause {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(15, 22, 33, 0.35);
}

.hero__pause:hover {
  background: rgba(15, 22, 33, 0.6);
}

.hero__dot:focus-visible,
.hero__pause:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.hero__play-icon,
.hero--slider.is-paused .hero__pause-icon {
  display: none;
}

.hero--slider.is-paused .hero__play-icon {
  display: block;
}

@media (max-width: 767px) {
  .hero__controls {
    right: 50%;
    transform: translateX(50%);
    bottom: var(--space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide.is-active {
    transform: none;
    transition: opacity 0.01s linear;
  }
}

.hero--slider .hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.hero__copy {
  max-width: 620px;
}

.hero__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 var(--space-md);
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero__title-em {
  color: var(--color-accent);
  position: relative;
  white-space: nowrap;
}

.hero__lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-xl);
  max-width: 540px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.hero__reassure {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--space-sm);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* ---- Section rhythm ---------------------------------------- */
.section {
  padding: var(--space-3xl) 0;
}

.section--alt {
  background: var(--color-surface-alt);
}

.section--dark {
  background: var(--color-primary-dark);
  color: #ffffff;
}

.section-head {
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
}

.section-head--center {
  text-align: center;
}

.section-head__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

.section-head__title--light {
  color: #ffffff;
}

.section-head__lead {
  font-size: 1.0625rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

.section--dark .section-head__lead {
  color: rgba(255, 255, 255, 0.8);
}

/* ---- About video (homepage #our-story) ----------------------- */
.about-video__head {
  margin-bottom: var(--space-xl);
}

.about-video__frame {
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000000;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  aspect-ratio: 16 / 9;
}

.about-video__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-video__meta {
  margin: var(--space-md) 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
  .about-video__frame {
    border-radius: var(--radius-md);
  }
}

/* ---- Steps (How we help) ----------------------------------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.step__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.step__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.step__body {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

/* ---- Programs grid ----------------------------------------- */
.programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.program-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.program-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md);
}

.program-card__body {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-lg);
}

.program-card__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.program-card__link:hover {
  color: var(--color-primary-dark);
}

/* ---- Team section ------------------------------------------ */
.team-section {
  background: var(--color-bg);
}

.team-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.team-lead__media {
  margin: 0;
  min-width: 0;
}

.team-lead__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.team-lead__caption {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: var(--space-sm);
  text-align: center;
  font-style: italic;
}

.team-lead__name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

.team-lead__quote {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-dark);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: 0 0 var(--space-md);
  font-style: italic;
}

.team-lead__note {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

/* ---- Trust signals ----------------------------------------- */
.trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.trust-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.trust-item__year {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 var(--space-xs);
}

.trust-item__title {
  color: #ffffff;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* ---- Community involvement --------------------------------- */
.community-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.community-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.community-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.community-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.community-card__body {
  padding: var(--space-xl);
}

.community-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md);
}

.community-card__text {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-lg);
}

/* ---- Bottom CTA band --------------------------------------- */
.cta-band {
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-2xl) 0;
}

.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.cta-band__title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: #ffffff;
  margin: 0 0 var(--space-sm);
}

.cta-band__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.0625rem;
  margin: 0;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.cta-band .btn--primary {
  background: var(--color-accent);
  color: #ffffff;
}

.cta-band .btn--primary:hover {
  background: var(--color-accent-dark);
}

/* ---- Site footer ------------------------------------------- */
.site-footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-2xl) 0 var(--space-lg);
}

.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.site-footer__brand img {
  margin-bottom: var(--space-md);
  filter: brightness(0) invert(1);
}

.site-footer__tag {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 320px;
  margin: 0;
}

/* Social icons under the footer tagline: round 40px buttons. */
.site-footer__social {
  display: flex;
  gap: var(--space-sm);
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: #ffffff;
  background-color: var(--color-accent, #C0603F);
  border-color: var(--color-accent, #C0603F);
}

.site-footer__social-icon {
  display: block;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-xl);
}

.site-footer__nav h3 {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}

.site-footer__nav a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: var(--space-sm);
  font-size: 0.9375rem;
}

.site-footer__nav a:hover {
  color: #ffffff;
}

/* Street address in the footer Contact column. <address> is italic by
   default; the link inside picks up the column's link styles. */
.site-footer__address {
  font-style: normal;
}

.site-footer__nav .site-footer__address-link {
  line-height: 1.5;
}

.site-footer__legal {
  max-width: var(--max-w);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-lg) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__credit a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.site-footer__credit a:hover {
  color: var(--color-accent, #C0603F);
}

/* Mobile: center both lines, stacked. */
@media (max-width: 640px) {
  .site-footer__legal {
    justify-content: center;
    text-align: center;
  }
}

/* ---- Newsletter pre-footer --------------------------------- */
/* On every page, directly above the footer. A warm tint of the
   accent keeps it distinct from the navy CTA band above it and the
   dark footer below it. */
.newsletter-band {
  background: #F8ECE6;
  padding: var(--space-2xl) 0;
}

.newsletter-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.newsletter-band__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.newsletter-band__lead {
  color: var(--color-text);
  margin: 0;
  max-width: 560px;
}

.newsletter-form {
  position: relative;
}

.newsletter-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: end;
}

@media (min-width: 640px) {
  .newsletter-form__fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .newsletter-form__fields {
    grid-template-columns: 1fr 1fr 1.4fr auto;
  }
}

.newsletter-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.newsletter-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
}

.newsletter-form__input {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid #E3CFC5;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-form__input::placeholder {
  color: #A1A5AC;
}

.newsletter-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(46, 61, 78, 0.12);
}

/* Compound selector so it beats .btn--lg's padding: the button
   matches the input height and lines up with them. */
.newsletter-form .newsletter-form__submit {
  white-space: nowrap;
  padding-top: 11px;
  padding-bottom: 11px;
}

.newsletter-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Email + button share the second row on tablet. */
@media (min-width: 640px) and (max-width: 1023px) {
  .newsletter-form__submit {
    justify-self: start;
  }
}

.newsletter-form__honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.newsletter-form__status {
  margin: var(--space-sm) 0 0;
  font-size: 0.9375rem;
  min-height: 1.25em;
}

.newsletter-form__status[data-state='error'] {
  color: #B91C1C;
}

.newsletter-form__status[data-state='success'] {
  color: var(--color-primary);
  font-weight: 600;
}

/* ==============================================================
   About Page — full-bleed hero, dark founder feature, timeline,
   compact board list. Deliberately varies layout + background from
   section to section to avoid the "same card, different section"
   feel.
   ============================================================== */

/* Full-bleed hero with facility photo + dark navy scrim */
.about-hero-v2 {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 0 var(--space-2xl);
  color: #ffffff;
  overflow: hidden;
}

.about-hero-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-hero-v2__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-v2__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(31, 43, 56, 0.92) 0%,
      rgba(31, 43, 56, 0.78) 55%,
      rgba(31, 43, 56, 0.55) 100%);
}

.about-hero-v2__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.about-hero-v2__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-lg);
}

.about-hero-v2__title-em {
  color: var(--color-accent);
  display: block;
  margin-top: var(--space-xs);
  font-weight: 700;
  font-size: 0.88em;
}

.about-hero-v2__lead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  margin: 0;
  max-width: 600px;
}

/* Values strip */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(192, 96, 63, 0.15), rgba(192, 96, 63, 0.06));
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.value-card__icon svg {
  width: 26px;
  height: 26px;
}

.value-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.value-card p {
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

/* Founder feature — dark navy magazine-style section */
.founder-feature {
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

.founder-feature::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(192, 96, 63, 0.15), transparent 65%);
  pointer-events: none;
}

.founder-feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.founder-feature__media {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  min-width: 0; /* prevent wide image from blowing out grid track */
}

.founder-feature__media img {
  width: 100%;
  height: auto;
  display: block;
}

.founder-feature__media figcaption {
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  font-style: italic;
  text-align: center;
}

.eyebrow--accent {
  color: var(--color-accent);
}

.founder-feature__name {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.founder-feature__cred {
  color: var(--color-accent);
  font-weight: 700;
}

.founder-feature__role {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 var(--space-xl);
}

.founder-feature__quote {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #ffffff;
  margin: 0 0 var(--space-lg);
  padding: 0;
  position: relative;
  font-style: italic;
  font-weight: 500;
}

.founder-feature__q-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  line-height: 0;
  color: var(--color-accent);
  vertical-align: -0.3em;
  margin-right: 4px;
  font-style: normal;
}

.founder-feature__text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 var(--space-lg);
}

.founder-feature__tagline {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.0625rem;
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Approach cards */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.approach-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.approach-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.approach-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
}

.approach-card h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.approach-card p {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

.approach-card__link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--color-accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.approach-card__link:hover {
  text-decoration: underline;
}

/* ==============================================================
   About, lower half. Each section has its own shape so they do not
   blur into one run of cards (see the About note on varying layout):
     Outcomes    split header, stat cards, icon cards (grey)
     Our impact  navy band of big results
     Partners    logo wall, no boxes (white)
     Milestones  sticky heading + open timeline (grey)
   ============================================================== */

/* ---- Outcomes ------------------------------------------------ */
.outcomes-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 900px) {
  .outcomes-head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--space-2xl);
  }
}

.outcomes-head__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin: 0;
}

.outcomes-head__lead {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* The need: short paragraph, then the four numbers as one row of cards
   (James's call, 2026-09-29). */
.need {
  padding-top: var(--space-xl);
  border-top: 2px solid var(--color-dark);
}

.need__intro {
  max-width: 720px;
  margin-bottom: var(--space-xl);
}

.need__title,
.difference__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.need__text {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.need-stats,
.difference-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .need-stats,
  .difference-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .need-stats,
  .difference-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.need-stat,
.difference-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

/* Stat cards are navy (James, 2026-09-29): light orange figures and
   light text, the same pairing as the "Our impact" band. */
.need-stat {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* One size for the whole figure: "1 in 10" and "Only 20%" read as
   one even phrase, sized so the longest ("Only 20%") fits a card on
   one line at 4 across. */
.need-stat__figure {
  margin: 0 0 var(--space-sm);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #E08A66;
}

.need-stat__num {
  font-size: 1em;
}

.need-stat__num small {
  font-size: 1em;
  font-weight: 400;
}

.need-stat__pre {
  font-size: 1em;
}

.need-stat__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* The difference: cards, icon top-centre (same grid as the numbers). */
.difference {
  margin-top: var(--space-2xl);
}

.difference__title {
  margin-bottom: var(--space-lg);
}


/* Icons cropped from the client's flier (black circles). The crop is
   square, so border-radius trims the flier's cream corners. */
.difference-item__icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
}

.difference-item__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

.difference-item__text {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

/* ---- Our impact ---------------------------------------------- */
.impact-band {
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-3xl) 0;
}

.impact-band__title {
  text-align: center;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 var(--space-2xl);
}

.impact-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl) var(--space-md);
}

@media (min-width: 640px) {
  .impact-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .impact-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.impact-stat {
  text-align: center;
  padding: 0 var(--space-md);
}

@media (min-width: 1024px) {
  .impact-stat + .impact-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
}

.impact-stat__num {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #E08A66;
}

.impact-stat__label {
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.impact-stat__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}

/* ---- Community partners: logo wall ---------------------------- */
.logo-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
  align-items: start;
}

@media (min-width: 768px) {
  .logo-wall {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .logo-wall {
    grid-template-columns: repeat(5, 1fr);
  }

  .logo-wall--small {
    grid-template-columns: repeat(4, 1fr);
    max-width: 900px;
    margin: 0 auto;
  }
}

/* Two columns on phones: centre an odd last logo instead of leaving it
   stranded on the left. */
@media (max-width: 767px) {
  .logo-wall__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
  }
}

.logo-wall__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.logo-wall__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Every logo gets the same 72px-tall box, scaled to fit inside it, so
   the logos line up and the names beneath sit on one line. */
.logo-wall__img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-wall__link:hover .logo-wall__img,
.logo-wall__link:focus-visible .logo-wall__img {
  filter: none;
  opacity: 1;
}

/* White-only logos: flipped dark so they show on white. They have no
   colour version to reveal, so they stay grey on hover. */
.logo-wall__img--invert,
.logo-wall__link:hover .logo-wall__img--invert,
.logo-wall__link:focus-visible .logo-wall__img--invert {
  filter: invert(1) grayscale(1);
}

.logo-wall__link:hover .logo-wall__img--invert,
.logo-wall__link:focus-visible .logo-wall__img--invert {
  opacity: 1;
}

.logo-wall__name {
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  color: var(--color-muted);
}

.logo-wall--small .logo-wall__img {
  height: 56px;
}

.member-strip {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.member-strip__title {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 var(--space-lg);
}

@media (prefers-reduced-motion: reduce) {
  .logo-wall__img {
    transition: none;
  }
}

/* ---- Recognition & milestones: sticky heading + open timeline --- */
.milestones__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .milestones__inner {
    grid-template-columns: 300px 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }

  .milestones__head {
    position: sticky;
    top: calc(var(--site-top-h) + var(--space-xl));
  }
}

.milestones__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

.milestones__lead {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.milestone-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.milestone {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

@media (min-width: 640px) {
  .milestone {
    grid-template-columns: 150px 1fr;
    gap: var(--space-lg);
  }

  /* Right-aligned so each year sits next to its dot on the line. */
  .milestone__year {
    text-align: right;
  }
}

/* Year, dot and title share one centre line, 12px down the row: the
   24px line puts the year's figures there, matching the title's
   capitals and the dot (top 5px + half of 14px). Measured, not guessed:
   Poppins sits its capitals low in the line box. */
.milestone__year {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 24px;
  color: var(--color-accent-dark);
}

.milestone__month {
  display: block;
  line-height: 1.3;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2px;
}

/* The line runs down the left of each entry; the dot marks it. */
.milestone__body {
  position: relative;
  padding: 0 0 var(--space-xl) var(--space-lg);
  border-left: 2px solid #D5D9DF;
}

.milestone:last-child .milestone__body {
  padding-bottom: 0;
}

.milestone__body::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-surface-alt);
}

.milestone__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

.milestone__text {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

/* Homepage Recognition band: link through to the About section. */
.trust-more {
  margin: var(--space-xl) 0 0;
  text-align: center;
}

.trust-more__link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}

.trust-more__link:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Team v2 — Shannon featured, other two supporting */
.team-v2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.team-v2-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-v2-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* A real photograph where we have one. The initials tile below is no longer
   the default — it is the pending state for anyone not yet photographed, so
   both variants sit in the same grid without special-casing the layout.
   Sized in one place: change --team-avatar and both follow.

   object-fit: cover matters because the source headshots are 5:4 landscape
   pre-cropped to square; cover guarantees a circle stays a circle if a future
   photo arrives at some other shape. */
.team-v2-card {
  --team-avatar: 112px;
}

.team-v2-card__photo {
  display: block;
  width: var(--team-avatar);
  height: var(--team-avatar);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-md);
  /* Visible while the image decodes, so the card does not jump. */
  background: var(--color-surface-alt);
}

.team-v2-card__avatar {
  width: var(--team-avatar);
  height: var(--team-avatar);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  letter-spacing: 1px;
}

.team-v2-card h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

.team-v2-card__role {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0;
}

.team-v2-card__bio {
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: var(--space-md) 0 0;
}

.team-v2-card--lead {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #ffffff;
  border-color: transparent;
}

.team-v2-card--lead h3 {
  color: #ffffff;
}

.team-v2-card--lead .team-v2-card__role {
  color: var(--color-accent);
}

.team-v2-card--lead .team-v2-card__bio {
  color: rgba(255, 255, 255, 0.85);
}

.team-v2-card--lead .team-v2-card__avatar {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
}

/* Full bios run several lines, and centred paragraphs that long are hard to
   read, so the bio text is left-aligned under the centred photo and name. */
.team-v2-card .team-v2-card__bio {
  text-align: left;
}

/* Every bio is capped at the same six lines so the cards match in height
   until one is opened. The fade at the cut uses a mask, so it works on the
   navy lead card and the white cards alike. script.js toggles .is-expanded
   and hides the button on any bio short enough to fit. */
.team-v2-card__bio-wrap {
  --team-bio-lines: 6;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-height: calc(var(--team-bio-lines) * 1.6em);
  margin-top: var(--space-md);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.2em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3.2em), transparent);
}

.team-v2-card__bio-wrap.is-expanded {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Paragraph spacing only once the full bio is showing, so the closed
   six lines are pure text. */
.team-v2-card__bio-wrap .team-v2-card__bio {
  margin: 0;
}

.team-v2-card__bio-wrap.is-expanded .team-v2-card__bio + .team-v2-card__bio {
  margin-top: 0.75em;
}

.team-v2-card__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-md);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.team-v2-card__more-toggle[hidden] {
  display: none;
}

.team-v2-card__more-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.team-v2-card__more-toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

.team-v2-card__more-close,
.team-v2-card__more-toggle[aria-expanded="true"] .team-v2-card__more-open {
  display: none;
}

.team-v2-card__more-toggle[aria-expanded="true"] .team-v2-card__more-close {
  display: inline;
}

.team-v2-card__more-toggle:hover {
  text-decoration: underline;
}

.team-v2-card__more-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.team-v2-card--lead .team-v2-card__more-toggle {
  color: #ffffff;
}

/* Board of directors: same cards and 112px photos as Meet the team
   (.team-v2-card), 4 across on desktop. Title on the orange role line,
   organisation beneath it. */
.board-v2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .board-v2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .board-v2-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.board-v2-card__org {
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: var(--space-xs) 0 0;
}

/* ---- /team page ----------------------------------------------
   Staff and board cards are the .team-v2-card / .board-v2-card kit
   above, rendered on the server from /admin/people. The page head is a
   compact navy band (About keeps the big photo hero), so the two pages
   do not open the same way. */
.team-page-hero {
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-2xl) 0;
}

/* Same 720px column as .section-head, so the hero text lines up with
   the Staff and Board headings below it. */
.team-page-hero__inner {
  max-width: calc(720px + 2 * var(--space-lg));
}

.team-page-hero .eyebrow {
  color: var(--color-accent);
}

.team-page-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

.team-page-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-lg);
  max-width: 620px;
}

.team-page-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.team-page-hero__jump-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-lg);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* color is restated: the global a:hover (navy) outranks the base rule,
   which left navy text on the navy band. */
.team-page-hero__jump-link:hover,
.team-page-hero__jump-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* A shared link like /team#josh-dupree rings that person's card. */
.team-page-card:target {
  box-shadow: 0 0 0 3px var(--color-accent);
}

.team-page-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  margin: 0;
}

/* ---- About > Meet the team strip -----------------------------
   Short version of /team: a row of photos with name and role, each
   linking to that person's card. Open layout with no cards, so it does
   not repeat the card grids further down About. */
.about-team-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.about-team-strip__title {
  margin: 0;
}

.about-team-strip__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.about-team-strip__board-link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}

.about-team-strip__board-link:hover {
  color: var(--color-accent);
}

.about-team-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

@media (min-width: 640px) {
  .about-team-strip__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-team-strip__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

.about-team-strip__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.about-team-strip__photo,
.about-team-strip__initials {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: var(--space-md);
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px transparent;
  transition: box-shadow 0.2s ease;
}

.about-team-strip__photo {
  object-fit: cover;
  background: var(--color-surface-alt);
}

.about-team-strip__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
}

.about-team-strip__link:hover .about-team-strip__photo,
.about-team-strip__link:hover .about-team-strip__initials,
.about-team-strip__link:focus-visible .about-team-strip__photo,
.about-team-strip__link:focus-visible .about-team-strip__initials {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-accent);
}

.about-team-strip__link:focus-visible {
  outline: none;
}

.about-team-strip__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-dark);
  line-height: 1.35;
}

.about-team-strip__role {
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.4;
}

/* Commitment split section */
.about-commitment__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-commitment__copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

.about-commitment__copy p {
  color: var(--color-muted);
  line-height: 1.7;
  font-size: 1.0625rem;
  margin: 0 0 var(--space-md);
}

.about-commitment__copy p:last-child {
  margin-bottom: 0;
}

.about-commitment__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about-commitment__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Founder story */
.about-founder__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.about-founder__media {
  margin: 0;
}

.about-founder__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.about-founder__media figcaption {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-align: center;
  font-style: italic;
  margin-top: var(--space-sm);
}

.about-founder__body h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

.about-founder__role {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 var(--space-lg);
}

.about-founder__quote {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-dark);
  border-left: 3px solid var(--color-accent);
  padding: 0 0 0 var(--space-md);
  margin: 0 0 var(--space-lg);
  font-style: italic;
}

.about-founder__body p {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
}

.about-founder__body p:last-child {
  margin-bottom: 0;
  color: var(--color-dark);
  font-weight: 500;
}

/* Approach cards */
.about-approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.about-approach__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.about-approach__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.about-approach__num {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.about-approach__card h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.about-approach__card p {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

/* Team full grid — larger cards than the homepage teaser */
.team-full-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.team-full-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-full-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.team-full-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  letter-spacing: 1px;
}

.team-full-card__name {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

.team-full-card__role {
  color: var(--color-muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* Board of directors */
.board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.board-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.board-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.board-item__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

.board-item__role {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  margin: 0 0 2px;
}

.board-item__affil {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin: 0;
}

/* ==============================================================
   Programs Page — full-bleed hero, quick-nav strip, session-dot
   visualizations for IOP/SOP, weekly schedule grid, aftercare
   dark-feature, individual counseling split, drug testing price
   feature. Aims for real visual variety section-to-section.
   ============================================================== */

/* Hero */
.programs-hero {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.programs-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.programs-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}

.programs-hero__orb--a {
  width: 480px;
  height: 480px;
  background: var(--color-accent);
  top: -140px;
  right: -120px;
}

.programs-hero__orb--b {
  width: 420px;
  height: 420px;
  background: var(--color-primary-light);
  bottom: -180px;
  left: -80px;
}

.programs-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.programs-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
}

.programs-hero__title-em {
  color: var(--color-accent);
  display: inline-block;
}

.programs-hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-xl);
  max-width: 620px;
}

.programs-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Program quick-nav strip */
.program-nav {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
  margin-top: -60px;
  position: relative;
  z-index: 2;
}

.program-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.program-nav__card {
  display: block;
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.program-nav__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.program-nav__card--accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border-color: transparent;
  color: #ffffff;
}

.program-nav__card--accent:hover {
  border-color: transparent;
}

.program-nav__label {
  font-weight: 700;
  color: var(--color-dark);
  font-size: 1.25rem;
  margin: 0 0 var(--space-xs);
}

.program-nav__card--accent .program-nav__label {
  color: #ffffff;
}

.program-nav__meta {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin: 0;
}

.program-nav__card--accent .program-nav__meta {
  color: rgba(255, 255, 255, 0.85);
}

/* Education card: a div holding two links (programs.html). The title link
   stretches over the whole card; the speaker link sits above it. */
.program-nav__card--split {
  position: relative;
}

.program-nav__card-link {
  display: block;
  text-decoration: none;
}

.program-nav__card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.program-nav__speaker-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-sm);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.program-nav__speaker-link:hover,
.program-nav__speaker-link:focus-visible {
  background: var(--color-dark);
  color: #ffffff;
}

/* Tailored intro band */
.tailored {
  max-width: 720px;
}

.tailored__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

.tailored__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;
}

/* Intensive vs Supportive, side by side. Client: same curriculum,
   only frequency differs, so the facts line up row for row. */
.program-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .program-compare {
    grid-template-columns: 1fr 1fr;
  }
}

.program-compare__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
}

.program-compare__tag {
  align-self: flex-start;
  margin: 0 0 var(--space-sm);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.program-compare__title {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-lg);
}

.program-compare__facts {
  margin: 0 0 var(--space-xl);
}

.program-compare__facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.program-compare__facts > div:last-child {
  border-bottom: 1px solid var(--color-border);
}

.program-compare__facts dt {
  color: var(--color-text);
  font-weight: 500;
}

.program-compare__facts dd {
  margin: 0;
  text-align: right;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.program-compare__aside {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
}

.program-compare__cta {
  align-self: flex-start;
  margin-top: auto;
}

.program-compare__note {
  margin: var(--space-lg) 0 0;
  text-align: center;
  color: var(--color-text);
}

/* Supportive Outpatient day-choice note under the schedule legend. */
.schedule-note {
  max-width: 720px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-text);
}

/* Education: three short lists, then the booking form. */
.education-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .education-lists {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Each column's title and chips are centred in the column. */
.education-list {
  text-align: center;
}

.education-list__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.education-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.education-list__items li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text);
}

.booking {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

@media (min-width: 1024px) {
  .booking {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
  }
}

.booking__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.booking__text {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.booking__text a {
  color: var(--color-accent-dark);
  font-weight: 600;
}

.booking-form {
  position: relative;
}

.booking-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
  .booking-form__grid {
    grid-template-columns: 1fr 1fr;
  }

  .booking-form__field--wide {
    grid-column: 1 / -1;
  }
}

.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.booking-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
}

.booking-form__optional {
  font-weight: 400;
  color: var(--color-muted);
}

.booking-form__input {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-form__input::placeholder {
  color: #A1A5AC;
}

.booking-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(46, 61, 78, 0.12);
}

textarea.booking-form__input {
  resize: vertical;
  min-height: 110px;
}

.booking-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.booking-form__honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.booking-form__status {
  margin: var(--space-sm) 0 0;
  font-size: 0.9375rem;
  min-height: 1.25em;
}

.booking-form__status[data-state='error'] {
  color: #B91C1C;
}

.booking-form__status[data-state='success'] {
  color: var(--color-primary);
  font-weight: 600;
}

/* Resources: three open items in a row, then the drug-testing card. */
.resources .section-head__lead a {
  color: var(--color-accent-dark);
  font-weight: 600;
}

.resource-list {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .resource-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.resource-item {
  padding-top: var(--space-md);
  border-top: 3px solid var(--color-accent);
}

.resource-item__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.resource-item__text {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.resource-item__text a {
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* Weekly schedule grid */
.schedule-grid {
  display: grid;
  grid-template-columns: 120px repeat(5, 1fr);
  gap: 8px;
  margin: var(--space-xl) 0 var(--space-md);
}

.schedule-header {
  padding: var(--space-md) var(--space-sm);
  background: var(--color-primary-dark);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.schedule-header--day {
  background: transparent;
}

.schedule-row-label {
  padding: var(--space-md) var(--space-sm);
  font-weight: 700;
  color: var(--color-dark);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

/* Age range under "Adolescents" (client: 12 to 16). */
.schedule-row-label__ages {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
}

.schedule-slot {
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.15s ease;
}

.schedule-slot:hover {
  transform: translateY(-2px);
}

.schedule-slot strong {
  font-size: 0.9375rem;
  font-weight: 700;
}

.schedule-slot span {
  font-size: 0.75rem;
  opacity: 0.85;
}

.schedule-slot--teens {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #ffffff;
}

.schedule-slot--adults {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #ffffff;
}

.schedule-slot--empty {
  background: var(--color-surface-alt);
  color: var(--color-muted);
}

.schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.schedule-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.schedule-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}

.schedule-legend__swatch--teens {
  background: var(--color-primary);
}

.schedule-legend__swatch--adults {
  background: var(--color-accent);
}

.schedule-legend__item--note {
  color: var(--color-dark);
  font-weight: 500;
  margin-left: auto;
}

/* Aftercare feature — dark section, big statement */
.aftercare {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.aftercare__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(192, 96, 63, 0.15), transparent 55%),
    radial-gradient(circle at bottom right, rgba(67, 86, 104, 0.35), transparent 55%);
  pointer-events: none;
}

.aftercare__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.aftercare__badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: var(--space-lg);
}

.aftercare__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 auto var(--space-lg);
  max-width: 780px;
}

.aftercare__title-em {
  color: var(--color-accent);
  display: inline-block;
}

.aftercare__lead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  margin: 0 auto var(--space-2xl);
  max-width: 640px;
}

.aftercare-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  text-align: left;
}

.aftercare-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.aftercare-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(192, 96, 63, 0.4);
}

.aftercare-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(192, 96, 63, 0.2);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.aftercare-card__icon svg {
  width: 26px;
  height: 26px;
}

.aftercare-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 var(--space-sm);
}

.aftercare-card p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  margin: 0;
  font-size: 0.9375rem;
}

/* Individual counseling — split section */
.individual__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.individual__copy h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

.individual__copy p {
  color: var(--color-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 var(--space-xl);
}

.individual__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.individual__meta > div {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.individual__meta-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 4px;
}

.individual__meta-value {
  color: var(--color-dark);
  font-weight: 600;
  margin: 0;
}

.individual__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.individual__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Drug testing — big price feature */
.drug-testing__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.drug-testing__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1;
  background: linear-gradient(135deg, var(--color-bg), var(--color-surface-alt));
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.drug-testing__currency {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-accent);
  margin-right: 4px;
  align-self: flex-start;
  padding-top: var(--space-md);
}

.drug-testing__amount {
  font-size: clamp(5rem, 12vw, 8rem);
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.drug-testing__body h2,
.drug-testing__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

.drug-testing__body p {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-lg);
}

.drug-testing__notes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.drug-testing__notes li {
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.drug-testing__notes strong {
  color: var(--color-dark);
  font-weight: 600;
}

/* ==============================================================
   Volunteer Page
   ============================================================== */

/* Hero — matches Programs/Blog dark-with-orbs pattern */
.volunteer-hero {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.volunteer-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.volunteer-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}

.volunteer-hero__orb--a {
  width: 460px;
  height: 460px;
  background: var(--color-accent);
  top: -120px;
  right: -100px;
}

.volunteer-hero__orb--b {
  width: 400px;
  height: 400px;
  background: var(--color-primary-light);
  bottom: -160px;
  left: -80px;
}

.volunteer-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.volunteer-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
}

.volunteer-hero__title-em {
  color: var(--color-accent);
  display: inline-block;
}

.volunteer-hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-xl);
  max-width: 620px;
}

.volunteer-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Opportunity card grid */
.opp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .opp-grid--list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.opp-card {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.section--alt .opp-card {
  background: var(--color-bg);
}

.opp-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.opp-card__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(192, 96, 63, 0.15), rgba(192, 96, 63, 0.06));
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.opp-card__icon svg {
  width: 26px;
  height: 26px;
}

.opp-card__body {
  flex: 1;
}

.opp-card__body h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 4px;
}

.opp-card__body p {
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-md);
}

.opp-card__body p:last-child {
  margin-bottom: 0;
}

.btn--sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* How to get started — dark section, reuses .steps but on dark bg */
.how-start {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.how-start__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(192, 96, 63, 0.15), transparent 55%),
    radial-gradient(circle at bottom right, rgba(67, 86, 104, 0.35), transparent 55%);
  pointer-events: none;
}

.how-start__inner {
  position: relative;
  z-index: 1;
}

.steps--dark {
  margin-top: var(--space-xl);
}

.step--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.step--dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(192, 96, 63, 0.4);
}

.step--dark .step__title {
  color: #ffffff;
}

.step--dark .step__body {
  color: rgba(255, 255, 255, 0.8);
}

/* ==============================================================
   Blog Listing Page
   ============================================================== */

/* Hero — dark with ambient orbs (same treatment family as Programs) */
.blog-hero {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.blog-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.blog-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.3;
}

.blog-hero__orb--a {
  width: 460px;
  height: 460px;
  background: var(--color-accent);
  top: -120px;
  left: -100px;
}

.blog-hero__orb--b {
  width: 380px;
  height: 380px;
  background: var(--color-primary-light);
  bottom: -160px;
  right: -80px;
}

.blog-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.blog-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
}

.blog-hero__title-em {
  color: var(--color-accent);
  display: inline-block;
}

.blog-hero__lead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  margin: 0 0 var(--space-xl);
  max-width: 600px;
}

/* Post grid */
.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.post-card {
  display: block;
}

.post-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.post-card__inner:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.post-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.post-card__inner:hover .post-card__media img {
  transform: scale(1.05);
}

.post-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.post-card__tag {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

.post-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
}

.post-card__excerpt {
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.post-card__meta {
  color: var(--color-muted);
  font-size: 0.8125rem;
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* Sample content notice */
.posts-grid__notice {
  margin: var(--space-2xl) auto 0;
  padding: var(--space-md) var(--space-lg);
  max-width: 640px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-style: italic;
  background: rgba(192, 96, 63, 0.06);
  border: 1px dashed rgba(192, 96, 63, 0.35);
  border-radius: var(--radius-md);
}

/* Follow / stay-in-know band */
.follow {
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-2xl) 0;
  position: relative;
  overflow: hidden;
}

.follow::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(192, 96, 63, 0.2), transparent 65%);
  pointer-events: none;
}

.follow__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.follow__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: #ffffff;
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
  font-weight: 700;
}

.follow__lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0;
}

.follow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ==============================================================
   Contact Page
   ============================================================== */
.contact-hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  background:
    radial-gradient(circle at top right, rgba(46, 61, 78, 0.06), transparent 55%),
    var(--color-bg);
}

.contact-hero__inner {
  max-width: 720px;
}

.contact-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

.contact-hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
  max-width: 600px;
}

.contact-body {
  padding-top: var(--space-2xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Contact form card */
.contact-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.contact-form-card__head {
  margin-bottom: var(--space-xl);
}

.contact-form-card__head h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.contact-form-card__head p {
  color: var(--color-muted);
  margin: 0;
  line-height: 1.6;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 400;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #A1A5AC;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(46, 61, 78, 0.1);
}

.contact-form textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form button[type='submit'] {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.contact-form__status {
  margin: 0;
  font-size: 0.9375rem;
  min-height: 1.25em;
}

.contact-form__status[data-state='error'] {
  color: #B91C1C;
}

.contact-form__status[data-state='success'] {
  color: var(--color-primary);
  font-weight: 600;
}

/* Contact info sidebar */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-info__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.contact-info__card--dark {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.contact-info__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.contact-info__title--light {
  color: #ffffff;
}

.contact-info__phone {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  margin: var(--space-sm) 0;
  letter-spacing: -0.01em;
}

.contact-info__phone:hover {
  color: var(--color-accent-dark);
}

.contact-info__note {
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}

.contact-info__note--light {
  color: rgba(255, 255, 255, 0.85);
}

.contact-info__note--light strong {
  color: #ffffff;
}

.contact-info__address {
  font-style: normal;
  color: var(--color-text);
  margin: var(--space-sm) 0;
  line-height: 1.6;
}

.contact-info__map-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.contact-info__map-link:hover {
  text-decoration: underline;
}


/* Contact space section */
.contact-space__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.contact-space__copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

.contact-space__copy p {
  color: var(--color-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 var(--space-lg);
}

.contact-space__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.contact-space__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Tablet + ---------------------------------------------- */
@media (min-width: 768px) {
  /* Tablet portrait — 520px so next section peeks below the fold.
     Bumped to 720px at desktop (1024+) below. */
  .hero--slider {
    min-height: 520px;
  }

  /* .steps stays stacked on tablet portrait — see
     @media (min-width: 1024px) below. 3-column at 768px was too
     narrow for the step body copy. */

  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* .team-lead stays stacked on tablet portrait — see
     @media (min-width: 1024px) below. 440px+1fr at 768px squeezed
     the quote to ~180px wide. */
  .team-lead {
    padding: var(--space-2xl);
  }

  .trust-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .community-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-band__inner {
    grid-template-columns: 1fr auto;
    text-align: left;
  }

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

  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .contact-space__inner {
    grid-template-columns: 1fr 1fr;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* .founder-feature__grid stays single-column on tablet portrait
     — see @media (min-width: 1024px) rule below. iPad-portrait width
     squeezes the 0.9fr:1.1fr split too tight for the wide landscape
     Shannon photo + quote text to coexist. */

  .program-nav__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .aftercare-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .individual__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .drug-testing__card {
    grid-template-columns: 320px 1fr;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
  }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .follow__inner {
    grid-template-columns: 1fr auto;
  }

  /* Tablet portrait — 2 up. 3 up at ≥1024px (below). Going straight
     to 3-up at 768px squeezed each card to ~230px, wrapping card
     copy to one word per line. */
  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-v2-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .team-v2-card--lead {
    grid-column: span 1;
  }
}

@media (min-width: 1024px) {
  .trust-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-2xl);
  }

  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .program-nav__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .program-nav__grid--three {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .founder-feature__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-2xl);
  }

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



  .team-lead {
    grid-template-columns: 440px 1fr;
  }

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

  .hero--slider {
    min-height: 720px;
  }
}

/* ==============================================================
   Mobile Slide-Out Menu

   Hamburger button visible mobile only. Panel slides in from the
   right with a backdrop. Body scroll locks while open. Escape and
   backdrop tap both close.
   ============================================================== */

.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.mobile-toggle:hover,
.mobile-toggle:focus-visible {
  background: rgba(46, 61, 78, 0.06);
  outline: none;
}

.mobile-toggle__bar {
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--color-dark);
  border-radius: 3px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Backdrop + panel wrapper. Hidden by default, revealed with
   .is-open. visibility toggle allows CSS transitions AND keeps the
   panel out of the tab order when closed. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 36, 0.55);
  cursor: pointer;
}

/* The panel itself — slides in from the right. */
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(340px, 88vw);
  height: 100vh;
  height: 100dvh;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-lg);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}

.mobile-menu__close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  font-family: inherit;
}

.mobile-menu__close:hover,
.mobile-menu__close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.mobile-menu__close-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.mobile-menu__brand img {
  filter: brightness(0) invert(1);
  height: 46px;
  width: auto;
}

/* Prominent phone card at the top — most important CTA on this
   panel for someone in crisis. */
.mobile-menu__phone {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mobile-menu__phone:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.mobile-menu__phone-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.mobile-menu__phone-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu__phone-label {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.mobile-menu__phone-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.01em;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-md) 0;
}

.mobile-menu__nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.125rem;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  transition: background 0.2s ease, color 0.2s ease;
}

/* Programs sub-links in the phone menu, indented under "Programs". */
.mobile-menu__nav .mobile-menu__sublink {
  font-size: 1rem;
  padding: 10px var(--space-sm) 10px calc(var(--space-sm) + 20px);
  color: rgba(255, 255, 255, 0.8);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.mobile-menu__nav a[aria-current='page'] {
  color: var(--color-accent);
  background: rgba(192, 96, 63, 0.15);
}

.mobile-menu__donate {
  width: 100%;
  justify-content: center;
}

.mobile-menu__note {
  margin: auto 0 0;
  padding-top: var(--space-lg);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.6;
}

.mobile-menu__note strong {
  color: #ffffff;
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Body scroll lock when menu open (JS adds this class to <body>) */
body.mobile-menu-open {
  overflow: hidden;
}

/* ---- Mobile + tablet portrait (max 1023px) — hamburger nav --- */
/* iPad portrait (768–1023px) can't fit logo + nav + phone
   horizontally, so the slide-out menu is used up to true desktop
   width. The .pre-header keeps Volunteer + Donate visible there. */
@media (max-width: 1023px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .mobile-toggle {
    display: flex;
    justify-self: end;
  }

  .site-nav,
  .site-header__actions {
    display: none;
  }
}

/* ---- Phone-only tweaks (max 767px) ------------------------- */
@media (max-width: 767px) {
  :root {
    --site-top-h: 170px;
  }

  /* Phone logo: 80px square (doubled from previous 40px). iPad
     portrait keeps the larger 104px desktop logo from the base rule. */
  .site-header__logo {
    height: 80px;
  }

  /* Schedule grid — tighten on phones so all 6 columns still fit */
  .schedule-grid {
    grid-template-columns: 84px repeat(5, 1fr);
    gap: 4px;
    font-size: 0.75rem;
  }


  .schedule-row-label__ages {
    font-size: 0.5625rem;
  }

  .schedule-header {
    padding: var(--space-sm) 4px;
    font-size: 0.6875rem;
  }

  /* 0.625rem keeps "Adolescents" (~86px at 0.75rem) inside the 84px
     label column, so the day columns keep their width. */
  .schedule-row-label {
    padding: var(--space-sm) 4px;
    font-size: 0.625rem;
  }

  .schedule-slot {
    padding: var(--space-sm) 2px;
    font-size: 0.6875rem;
  }

  .schedule-slot strong {
    font-size: 0.75rem;
  }

  .schedule-slot span {
    display: none;
  }
}

/* ---- Desktop (min 1024px) — hide the mobile UI --------------- */
@media (min-width: 1024px) {
  .mobile-toggle,
  .mobile-menu {
    display: none !important;
  }
}

/* ==============================================================
   Donate Page
   ============================================================== */

/* Hero — matches Programs/Blog/Volunteer dark-with-orbs pattern */
.donate-hero {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.donate-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.donate-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}

.donate-hero__orb--a {
  width: 460px;
  height: 460px;
  background: var(--color-accent);
  top: -120px;
  right: -100px;
}

.donate-hero__orb--b {
  width: 400px;
  height: 400px;
  background: var(--color-primary-light);
  bottom: -160px;
  left: -80px;
}

.donate-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.donate-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
}

.donate-hero__title-em {
  color: var(--color-accent);
  display: inline-block;
}

.donate-hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-xl);
  max-width: 620px;
}

.donate-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Ways to give grid */
.donate-ways__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (min-width: 640px) {
  .donate-ways__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .donate-ways__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.donate-ways__card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.donate-ways__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.donate-ways__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23, 210, 194, 0.15), rgba(23, 210, 194, 0.05));
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.donate-ways__card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs);
}

.donate-ways__card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

/* Links in card text (Corporate Giving: email + one-pager PDF). The
   email is long for a narrow card, so it may break anywhere. */
.donate-ways__card a {
  color: var(--color-accent-dark);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Qgiv form frame */
/* ==============================================================
   Admin auth — modal + user menu + toast
   Injected on demand by client/assets/script.js when someone
   clicks an Admin Login link. Not tied to any one page.
   ============================================================== */

.admin-modal,
.admin-usermenu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.admin-modal.is-open,
.admin-usermenu.is-open {
  display: flex;
}

.admin-modal__backdrop,
.admin-usermenu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 20, 0.72);
  backdrop-filter: blur(4px);
}

.admin-modal__panel,
.admin-usermenu__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: var(--space-xl);
  animation: admin-modal-in 0.18s ease-out;
}

@keyframes admin-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

.admin-modal__close,
.admin-usermenu__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 6px;
}

.admin-modal__close:hover,
.admin-usermenu__close:hover {
  color: var(--color-dark);
  background: rgba(0, 0, 0, 0.04);
}

.admin-modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 6px;
}

.admin-modal__sub {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0 0 var(--space-lg);
}

.admin-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.admin-modal__form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-modal__form input {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-dark);
  outline: none;
  transition: border-color 0.15s ease;
}

.admin-modal__form input:focus {
  border-color: var(--color-primary);
}

.admin-modal__submit {
  margin-top: 4px;
}

.admin-modal__status {
  margin: 0;
  min-height: 1em;
  font-size: 13px;
  color: var(--color-muted);
}

.admin-modal__status[data-state='error'] {
  color: var(--color-accent);
  font-weight: 600;
}

/* User menu shown when an admin is already logged in */
.admin-usermenu__hello {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 var(--space-md);
}

.admin-usermenu__hello strong {
  color: var(--color-dark);
  font-weight: 700;
}

.admin-usermenu__dash,
.admin-usermenu__logout {
  width: 100%;
  margin-bottom: var(--space-sm);
  justify-content: center;
}

.admin-usermenu__logout:last-child {
  margin-bottom: 0;
}

/* Lock body scroll while either overlay is open */
body.admin-modal-open {
  overflow: hidden;
}

/* Toast confirmation for login/logout */
.admin-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1100;
  background: var(--color-dark);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.admin-toast.is-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==============================================================
   Events Page
   ============================================================== */

/* Hero — matches Programs/Volunteer/Donate dark-with-orbs pattern */
.events-hero {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.events-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.events-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}

.events-hero__orb--a {
  width: 460px;
  height: 460px;
  background: var(--color-accent);
  top: -120px;
  right: -100px;
}

.events-hero__orb--b {
  width: 400px;
  height: 400px;
  background: var(--color-primary-light);
  bottom: -160px;
  left: -80px;
}

.events-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.events-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
}

.events-hero__title-em {
  color: var(--color-accent);
  display: inline-block;
}

.events-hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-xl);
  max-width: 620px;
}

/* ==============================================================
   News & Events (/events): upcoming (white), news (grey), past
   events (white). Each section is filled by the page's own script.
   ============================================================== */

/* Jump links under the hero title. */
.events-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.events-jump__link {
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.events-jump__link:hover,
.events-jump__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

.events-status {
  color: var(--color-muted);
  margin: 0;
}

/* Upcoming: the soonest event, large. Flyer shown whole. */
.event-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
  .event-feature {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-2xl);
    padding: var(--space-xl);
  }

  .event-feature--no-image {
    grid-template-columns: 1fr;
  }
}

.event-feature__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.event-feature__img {
  display: block;
  width: 100%;
  height: auto;
}

.event-info__date {
  margin: 0 0 var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.event-info__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.event-card-sm .event-info__title {
  font-size: 1.25rem;
}

.event-info__subtitle {
  margin: 0 0 var(--space-md);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text);
}

.event-info__desc {
  margin: 0 0 var(--space-md);
  color: var(--color-muted);
  line-height: 1.7;
}

.event-info__location {
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
  line-height: 1.6;
}

.event-info__directions {
  display: inline-block;
  color: var(--color-accent-dark);
  font-weight: 600;
  white-space: nowrap;
}

/* Further upcoming events, smaller. */
/* Flex rather than grid so 1 or 2 cards sit centred under the
   feature card instead of hugging the left of a 3-column grid. */
.upcoming-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.upcoming-grid > * {
  flex: 0 1 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .upcoming-grid > * {
    flex-basis: calc((100% - var(--space-lg)) / 2);
  }
}

@media (min-width: 1024px) {
  .upcoming-grid > * {
    flex-basis: calc((100% - 2 * var(--space-lg)) / 3);
  }
}

.event-card-sm {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.event-card-sm__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--color-surface-alt);
}

.event-card-sm .event-info {
  padding: var(--space-lg);
}

.upcoming-empty {
  max-width: 620px;
  padding: var(--space-xl);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
}

.upcoming-empty__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.upcoming-empty__text {
  margin: 0;
  color: var(--color-text);
  line-height: 1.7;
}

.upcoming-empty__text a {
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* News: list grouped by year (left) + a slim sticky sidebar (right,
   desktop only). */
.news-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.news-aside {
  display: none;
}

@media (min-width: 1024px) {
  .news-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .news-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: calc(var(--site-top-h) + var(--space-lg));
  }
}

.news-aside__block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.news-aside__block[hidden] {
  display: none;
}

.news-aside__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm);
}

.news-aside__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.news-aside__text a,
.news-aside__link {
  color: var(--color-accent-dark);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.news-aside__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
}

.news-aside__years {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.news-aside__year {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.news-aside__year:hover,
.news-aside__year:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.news-year + .news-year {
  margin-top: var(--space-xl);
}

.news-year__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-xs);
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid #D5D9DF;
}

.news-item:last-child {
  border-bottom: 1px solid #D5D9DF;
}

@media (min-width: 640px) {
  .news-item--image {
    grid-template-columns: 1fr 180px;
    align-items: start;
  }
}

.news-item__meta {
  margin: 0 0 var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
}

.news-item__title {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin: 0;
}

.news-item__link {
  color: inherit;
  text-decoration: none;
}

.news-item__link:hover,
.news-item__link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.news-item__summary {
  margin: var(--space-sm) 0 0;
  color: var(--color-text);
  line-height: 1.65;
}

.news-item__more {
  display: inline-block;
  margin-top: var(--space-sm);
  color: var(--color-accent-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}

.news-item__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.news-more {
  margin-top: var(--space-xl);
}

/* Past events: date badge + heading, then a photo grid. */
.past-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.past-event__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.past-event__date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #ffffff;
  line-height: 1;
}

.past-event__month {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #E08A66;
}

.past-event__day {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 2px;
}

.past-event__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

.past-event__meta {
  margin: 2px 0 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.past-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .past-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .past-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.past-gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
  cursor: zoom-in;
}

.past-gallery__btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.past-gallery__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.past-gallery__btn:hover .past-gallery__img {
  transform: scale(1.04);
}

.past-event__more {
  margin-top: var(--space-md);
}

/* Photo viewer (native <dialog>). */
.lightbox {
  width: min(1100px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(15, 20, 28, 0.88);
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-md);
}

.lightbox__caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}

.lightbox__close {
  top: 16px;
  right: 16px;
}

.lightbox__nav--prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .past-gallery__img {
    transition: none;
  }

  .past-gallery__btn:hover .past-gallery__img {
    transform: none;
  }
}

/* Trim the .donate-form section's bottom padding so the gray
   section--alt background doesn't leave a large empty band between
   the Qgiv frame's rounded corner and the next section (CTA band).
   Screenshot showed ~300px of empty gray space — that was section
   padding-bottom (var(--space-3xl)), not iframe internal whitespace. */
.donate-form {
  padding-bottom: var(--space-md);
}

.donate-form__inner {
  max-width: 740px;
}

.donate-form__frame {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Qgiv's own script injects the iframe. Force it responsive and
   center it inside the frame. */
.donate-form__frame .qgiv-embed-container {
  margin: 0 auto;
  max-width: 100%;
}

/* min-height ensures the iframe is tall enough to display the
   entire donation form without an internal scrollbar. Qgiv's
   embed.js initially sets the iframe to 1000px, then auto-resizes
   via postMessage handshake once the form content loads — but
   before/if that handshake completes, the form is taller than
   1000px and the iframe scrolls internally. min-height overrides
   the fixed initial height without capping Qgiv's later auto-resize
   (which uses height, not min-height). Page scroll still works
   normally — only the iframe's internal scrollbar goes away. */
.donate-form__frame iframe {
  width: 100% !important;
  max-width: 100%;
  min-height: 2800px !important;
  border: 0;
  display: block;
}

/* ==============================================================
   Event banner — homepage strip under the hero. Dynamically
   populated with the next upcoming event via /api/events.
   ============================================================== */

.event-banner {
  /* Warm cream that bridges the dark hero above into the white
     "How we help" section below. Burnt-orange rule on top +
     bottom ties it to the brand accent without shouting. */
  background: #FBF6F0;
  border-top: 3px solid var(--color-accent, #C0603F);
  border-bottom: 1px solid rgba(192, 96, 63, 0.2);
  padding: var(--space-lg) 0;
}

.event-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.event-banner__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent, #C0603F);
  color: #ffffff;
  border-radius: 12px;
}

.event-banner__icon svg {
  width: 26px;
  height: 26px;
}

.event-banner__text {
  flex: 1 1 300px;
  min-width: 0;
}

.event-banner__eyebrow {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent, #C0603F);
}

.event-banner__title {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-strong, #1a2635);
  line-height: 1.3;
}

.event-banner__meta {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.event-banner__cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mobile: stack, center-align text, full-width CTA */
@media (max-width: 640px) {
  .event-banner__inner {
    text-align: center;
    justify-content: center;
  }
  .event-banner__text {
    flex: 1 1 100%;
  }
  .event-banner__cta {
    width: 100%;
    text-align: center;
  }
}

/* ==============================================================
   Blog post — /blog/:slug template + supporting sections
   ============================================================== */

.blog-post {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.blog-post__inner {
  max-width: 780px;
}

.blog-post__eyebrow {
  margin: 0 0 var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
}

.blog-post__eyebrow a {
  color: var(--color-muted);
  text-decoration: none;
}

.blog-post__eyebrow a:hover {
  color: var(--color-primary);
}

.blog-post__title {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-strong, #1a2635);
}

.blog-post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-md);
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.blog-post__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.blog-post__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(46, 61, 78, 0.08);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-post__hero {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: 14px;
  margin: var(--space-lg) 0 var(--space-xl);
}

.blog-post__body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text, #2E3D4E);
}

.blog-post__body h2 {
  margin: var(--space-xl) 0 var(--space-md);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-strong, #1a2635);
  letter-spacing: -0.01em;
}

.blog-post__body h3 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text-strong, #1a2635);
}

.blog-post__body p {
  margin: 0 0 var(--space-md);
}

.blog-post__body ul,
.blog-post__body ol {
  margin: 0 0 var(--space-md) 0;
  padding-left: 1.5em;
}

.blog-post__body li {
  margin-bottom: 6px;
}

.blog-post__body a {
  color: var(--color-accent, #C0603F);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}

.blog-post__body a:hover {
  color: var(--color-primary);
}

.blog-post__body blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-accent, #C0603F);
  background: rgba(192, 96, 63, 0.05);
  font-style: italic;
  color: var(--color-text-strong, #1a2635);
}

.blog-post__body blockquote p {
  margin: 0;
}

/* FAQ section */
.blog-faq {
  padding: var(--space-xl) 0;
  background: #f4f5f7;
}

.blog-faq__title {
  margin: 0 0 var(--space-lg);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-strong, #1a2635);
  text-align: center;
}

.blog-faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-faq__item {
  background: #ffffff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: var(--space-md) var(--space-lg);
}

.blog-faq__q {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary);
}

.blog-faq__a {
  margin: 0;
  color: var(--color-text, #2E3D4E);
  line-height: 1.65;
}

/* Related-reading */
.blog-related {
  padding: var(--space-xl) 0;
}

.blog-related__title {
  margin: 0 0 var(--space-md);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-strong, #1a2635);
  text-align: center;
}

.blog-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.blog-related__link {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.blog-related__link:hover {
  background: rgba(46, 61, 78, 0.06);
  border-color: var(--color-primary);
}

/* ==============================================================
   FAQ: /faq page, plus the short FAQ sections on Programs, Donate
   and Volunteer. Each question is a native <details>, so it opens
   and closes without JavaScript and works with the keyboard.
   ============================================================== */
.faq-hero {
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.faq-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #ffffff;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 var(--space-md);
}

.faq-hero__lead {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.faq-hero__lead a {
  color: #ffffff;
  font-weight: 600;
}

.faq-body__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .faq-body__inner {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }

  .faq-jump {
    position: sticky;
    top: calc(var(--site-top-h) + 16px);
  }
}

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (min-width: 900px) {
  .faq-jump {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }
}

.faq-jump__label {
  width: 100%;
  margin: 0 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.faq-jump__link {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.faq-jump__link:hover {
  background: var(--color-surface-alt);
}

@media (min-width: 900px) {
  .faq-jump__link {
    border: 0;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
  }
}

.faq-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}


.faq-group__title {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq-item[open] {
  border-color: #D5D9DF;
  box-shadow: var(--shadow-sm);
}

.faq-item__q {
  position: relative;
  padding: 18px 56px 18px 20px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

/* Plus sign that turns into a minus when open. */
.faq-item__q::before,
.faq-item__q::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.faq-item__q::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-item__q::after {
  transform: rotate(0deg);
}

.faq-item__q:hover {
  color: var(--color-primary);
}

.faq-item__q:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.faq-item__a {
  padding: 0 20px 20px;
  color: var(--color-text);
  line-height: 1.7;
}

.faq-item__a p {
  margin: 0;
}

/* Answers with more than one paragraph, or a list. */
.faq-item__a p + p,
.faq-item__a p + ul,
.faq-item__a ul + p {
  margin-top: var(--space-sm);
}

.faq-item__a ul {
  margin: var(--space-xs) 0 0;
  padding-left: 1.25rem;
}

.faq-item__a a {
  color: var(--color-accent-dark);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__q::before,
  .faq-item__q::after {
    transition: none;
  }
}

/* Short FAQ section on Programs / Donate / Volunteer. */
.faq-inline__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .faq-inline__inner {
    grid-template-columns: 1fr 2fr;
    align-items: start;
  }
}

.faq-inline__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
}

.faq-inline__more {
  margin: 0;
}

.faq-inline__more a {
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* ?review in the URL: highlight answers the client still has to
   confirm, with the note of what is missing. */
.is-review .faq-item[data-review] {
  border: 2px dashed #D97706;
  background: #FFFBEB;
}

.is-review .faq-item[data-review]::after {
  content: 'NEEDS CLIENT ANSWER: ' attr(data-review);
  display: block;
  padding: 10px 20px 14px;
  color: #92400E;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ==========================================================
   GALLERY (/gallery): album covers, then one album's photo grid.
   Filled by the inline script in gallery.html from /api/albums.
   ========================================================== */
.gallery-page__status {
  margin: 0;
  text-align: center;
  color: var(--color-muted);
}

.gallery-albums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 600px) {
  .gallery-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .gallery-albums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gallery-albums .gallery-albums__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gallery-albums .gallery-albums__link:hover,
.gallery-albums .gallery-albums__link:focus-visible {
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.gallery-albums__cover {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
}

.gallery-albums__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-albums__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.gallery-albums__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.gallery-albums__meta {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.gallery-album .gallery-album__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.gallery-album .gallery-album__back:hover {
  color: var(--color-accent-dark);
}

.gallery-album__head {
  margin: var(--space-sm) 0 var(--space-lg);
}

.gallery-album__title {
  margin: 0 0 var(--space-xs);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--color-primary-dark);
}

.gallery-album__meta {
  margin: 0;
  color: var(--color-muted);
}

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (min-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
}

@media (min-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gallery-grid__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-alt);
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
}

.gallery-grid__btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.gallery-grid__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-grid__btn:hover .gallery-grid__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-albums .gallery-albums__link,
  .gallery-grid__img { transition: none; }
  .gallery-grid__btn:hover .gallery-grid__img,
  .gallery-albums .gallery-albums__link:hover { transform: none; }
}

/* Homepage programs: 2x2 through tablet landscape (iPad 1024-1279px
   squeezed 4 cards to ~260px each), 4 across from 1280px. */
@media (min-width: 1280px) {
  .programs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}