/* =============================================================================
   Boca Helping Hands — Homepage prototype
   Plain CSS, mobile-first. Breakpoints: 768px, 1200px.
   Token names mirror tiny-flamingo-theme (assets/css/colors.css) so the WP port
   is copy-paste. Figma reference: file IAPLRqOOjL71DUOlS4cDC3, node 192:194.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Brand (exact values — build-brief §4) */
  --agency-primary: #262262;   /* navy */
  --agency-accent: #EE1C23;    /* red */
  --agency-secondary: #90BFDD; /* sky blue */
  --agency-dark: #000000;
  --agency-light: #FFFFFF;

  /* Derived from the brand palette, as used in the Figma frames */
  --bhh-navy-deep: #110d49;      /* accreditation band, sign-up card */
  --bhh-navy-line: #342f6c;
  --bhh-blue: #2f8fd6;           /* highlight words on light surfaces */
  --bhh-sky-tint: #e8f3fb;
  --bhh-red-tint: #fff0f1;

  /* Surfaces */
  --surface-primary: #ffffff;
  --surface-secondary: #f4f8fc;
  --surface-elevated: #ffffff;

  /* Text */
  --text-primary: var(--agency-primary);
  --text-body: #16283d;
  --text-ink: #0b2a4a;
  --text-secondary: rgba(22, 40, 61, 0.8);
  --text-muted: rgba(38, 34, 98, 0.5);
  --text-meta: rgba(32, 35, 84, 0.8);

  /* Borders */
  --border-color: #dbe6f0;
  --border-color-strong: #c6d6e4;

  /* Type */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;
  --section-y: 64px;
  --gutter: 20px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 29px;
  --radius-pill: 999px;

  /* Depth: base → elevated → floating (navy-tinted, low opacity) */
  --shadow-elevated: 0 1px 2px rgba(38, 34, 98, 0.06), 0 12px 30px rgba(17, 13, 73, 0.12);
  --shadow-floating: 0 2px 6px rgba(38, 34, 98, 0.06), 0 12px 60px rgba(17, 13, 73, 0.12);
  --shadow-news: 0 4px 55px rgba(0, 0, 0, 0.2);

  /* Motion */
  --ease-spring: cubic-bezier(0.22, 1.24, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 700ms;

  --header-h: 96px;
}

@media (min-width: 768px) {
  :root { --section-y: 80px; --gutter: 24px; }
}
@media (min-width: 1200px) {
  :root { --section-y: 96px; }
}
/* between the phone header and the full desktop one, the logo sits on its own row above the nav */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --header-h: 126px; }
}
@media (min-width: 1440px) {
  :root { --header-h: 166px; }
}

/* ----------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--agency-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.bhh-skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--agency-primary); color: #fff; font-weight: 700;
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
}
.bhh-skip-link:focus-visible { transform: translateY(0); }

.bhh-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bhh-container--wide { max-width: 1600px; }

/* Placeholder for assets not yet provided */
.ph { background-color: #333; }

/* ----------------------------------------------------------------------------
   3. SHARED COMPONENTS
   ------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
}
@media (min-width: 768px) { .section-title { font-size: 44px; } }
@media (min-width: 1200px) { .section-title { font-size: 56px; line-height: 62.4px; letter-spacing: -1.04px; } }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}

/* Icon arrow — inline SVG so it inherits currentColor */
.icon-arrow { width: 16px; height: 16px; flex: none; }

/* Buttons (pill, 44px+ targets) */
.bhh-btn {
  --btn-bg: transparent;
  --btn-fg: var(--agency-primary);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 10px var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out);
}
@media (min-width: 1200px) { .bhh-btn { min-height: 55px; } }
.bhh-btn::after {
  /* sheen layer: animates opacity only */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.bhh-btn .icon-arrow { transition: transform var(--dur-med) var(--ease-spring); }
.bhh-btn:hover { transform: translateY(-2px); }
.bhh-btn:hover::after { opacity: 1; }
.bhh-btn:hover .icon-arrow { transform: translateX(3px); }
.bhh-btn:active { transform: translateY(0) scale(0.97); }
.bhh-btn:focus-visible { outline-offset: 4px; }

.bhh-btn--red   { --btn-bg: var(--agency-accent); --btn-fg: #fff; }
.bhh-btn--navy  { --btn-bg: var(--agency-primary); --btn-fg: #fff; }
.bhh-btn--sky   { --btn-bg: var(--agency-secondary); --btn-fg: #fff; } /* accepted contrast exception — build-brief §4 */
.bhh-btn--outline { box-shadow: inset 0 0 0 2px var(--agency-primary); }
.bhh-btn--outline::after { background: rgba(38, 34, 98, 0.06); }
.bhh-btn--lg { padding-inline: var(--space-7); font-weight: 700; font-size: 17px; }
.bhh-btn--block { width: 100%; }
.bhh-btn--white { --btn-bg: #fff; --btn-fg: var(--agency-accent); }
.bhh-btn--white::after { background: rgba(38, 34, 98, 0.08); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--agency-accent);
}
.link-arrow .icon-arrow { transition: transform var(--dur-med) var(--ease-spring); }
.link-arrow:hover .icon-arrow,
a:hover .link-arrow .icon-arrow,
a:focus-visible .link-arrow .icon-arrow { transform: translateX(4px); }
.link-arrow:active { opacity: 0.7; }
.link-arrow--white { color: #fff; }

/* Card lift used on clickable cards */
.lift {
  transition: transform var(--dur-med) var(--ease-spring);
}
.lift:hover { transform: translateY(-4px); }
.lift:active { transform: translateY(-1px) scale(0.99); }

/* ----------------------------------------------------------------------------
   4. SCROLL REVEAL (IntersectionObserver in scripts.js)
   ------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.is-static .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ----------------------------------------------------------------------------
   5. HEADER  (→ Global Element: header + mega-menu)
   ------------------------------------------------------------------------- */
.bhh-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--agency-primary);
}
.bhh-header__bg {
  position: absolute; inset: 0;
  background: var(--agency-primary);
  box-shadow: 0 10px 40px rgba(17, 13, 73, 0.25);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.bhh-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--gutter);
}
@media (min-width: 1440px) {
  .bhh-header__inner { padding: var(--space-4) 40px; gap: 32px; }
}
@media (min-width: 1800px) {
  .bhh-header__inner { padding: var(--space-4) 80px var(--space-4) 40px; gap: 40px; }
}

.bhh-logo {
  position: relative;
  display: block;
  flex: none;
  width: 84px;
  aspect-ratio: 156 / 134;
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-spring);
}
@media (min-width: 1440px) { .bhh-logo { width: 128px; } }
@media (min-width: 1800px) { .bhh-logo { width: 156px; } }
.bhh-logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity var(--dur-med) var(--ease-out);
}
.bhh-logo__white { opacity: 0; }

/* Scrolled state: transparent → dark */
.bhh-header.is-scrolled { color: #fff; }
.bhh-header.is-scrolled .bhh-header__bg { opacity: 1; }
.bhh-header.is-scrolled .bhh-logo__color { opacity: 0; }
.bhh-header.is-scrolled .bhh-logo__white { opacity: 1; }
@media (min-width: 1440px) {
  .bhh-header { transition: transform var(--dur-med) var(--ease-out); }
  .bhh-header.is-scrolled { transform: translateY(-34px); }
  .bhh-header.is-scrolled .bhh-logo { transform: translateY(17px) scale(0.62); }
  .bhh-header.is-scrolled .primary-nav { transform: translateY(17px); }
}

/* Desktop nav */
.primary-nav { display: none; }
@media (min-width: 1440px) {
  .primary-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    max-width: 1772px;
    margin-left: auto;
    transition: transform var(--dur-med) var(--ease-out);
  }
}
/* ---------------------------------------------------------------------------
   Header, in-between state (1024–1439): the whole menu is visible, but the logo
   takes its own row above a tightened nav instead of sitting beside it, so the
   jump from the full desktop header to the phone one isn't so abrupt (Bradley).
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .bhh-header__inner { flex-wrap: wrap; row-gap: var(--space-1); padding-block: var(--space-2); }
  .bhh-logo { width: 76px; }
  .bhh-header .header-actions { display: none; }   /* the phone Donate + Menu belong to the state below this one */
  .primary-nav {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .primary-nav .primary-nav__list { gap: 0; margin-right: var(--space-3); }
  .primary-nav .bhh-nav-link { font-size: 14px; min-height: 36px; }
  .primary-nav .bhh-nav-item__row { gap: 0; }
  .primary-nav .nav-toggle { width: 18px; height: 36px; }
  .primary-nav .bhh-nav-link::after { bottom: 4px; }
  /* the Donate button comes down to the size the rest of the row is using */
  .primary-nav .bhh-btn--lg { min-height: 40px; padding-inline: var(--space-5); font-size: 15px; }
  .dropdown { top: calc(100% + 2px); }
}

.primary-nav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: var(--space-1);
  margin-right: var(--space-6);
}
@media (min-width: 1800px) { .primary-nav__list { margin-right: 40px; } }
.bhh-nav-item { position: relative; }
.bhh-nav-item__row { display: flex; align-items: center; gap: 2px; }
.bhh-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  position: relative;
}
@media (min-width: 1800px) { .bhh-nav-link { font-size: 16px; } }
.bhh-nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--agency-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.bhh-nav-item:hover .bhh-nav-link::after,
.bhh-nav-link:focus-visible::after { transform: scaleX(1); }
.bhh-nav-link:active { opacity: 0.7; }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 44px;
  border-radius: 6px;
}
.nav-toggle svg { width: 10px; height: 5px; transition: transform var(--dur-med) var(--ease-spring); }
.nav-toggle:hover svg { transform: translateY(2px); }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-toggle:active { opacity: 0.7; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: -20px;
  /* Each panel takes its own natural width instead of a single narrow column, capped so the
     longest Workforce Development labels stop wrapping (Bradley, 2026-10-13): at 360px only
     one item in the whole nav still runs to two lines, against twelve at the old 260px. */
  min-width: 260px;
  width: max-content;
  max-width: 360px;
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  opacity: 0;
  visibility: hidden;
  /* while it fades out it must stop catching the pointer, or moving back over the space it occupied
     reopens it even though the cursor is nowhere near the nav item (Bradley, 2026-10-02) */
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) linear, transform var(--dur-med) var(--ease-spring), visibility 0s linear var(--dur-med);
}
.dropdown::before { /* hover bridge */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.bhh-nav-item:hover .dropdown,
.bhh-nav-item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.bhh-nav-item:last-child .dropdown { left: auto; right: -20px; }
.dropdown a {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--agency-primary);
  transition: transform var(--dur-med) var(--ease-spring);
}
/* a hairline between items, so a label that does run to two lines can't be mistaken for two
   items — the rule sits on the <li>, so the hover nudge moves the label and not the stroke */
.dropdown li + li { border-top: 1px solid var(--border-color); }
.dropdown a:hover { background: var(--bhh-sky-tint); transform: translateX(3px); }
.dropdown a:active { background: var(--border-color); }
.dropdown .dropdown__sub { padding-left: var(--space-6); font-weight: 400; font-size: 14px; color: var(--text-body); }

/* Mobile menu */
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  box-shadow: inset 0 0 0 2px currentColor;
  transition: transform var(--dur-med) var(--ease-spring);
}
.menu-button:hover { transform: translateY(-1px); }
.menu-button:active { transform: scale(0.96); }
.menu-button__bars { position: relative; width: 18px; height: 12px; }
.menu-button__bars span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) linear;
}
.menu-button__bars span:nth-child(1) { top: 0; }
.menu-button__bars span:nth-child(2) { top: 5px; }
.menu-button__bars span:nth-child(3) { top: 10px; }
.menu-button[aria-expanded="true"] .menu-button__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-button__bars span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-button__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-actions .bhh-btn { min-height: 44px; padding-inline: var(--space-4); font-size: 15px; }
@media (min-width: 1440px) { .header-actions { display: none; } }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: calc(var(--header-h) + var(--space-4)) var(--gutter) var(--space-10);
  overflow-y: auto;
  background: var(--agency-primary);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 1440px) { .mobile-menu { display: none; } }
.mobile-menu__list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.mobile-menu__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__row > a {
  flex: 1;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}
.mobile-menu__row > a:active { opacity: 0.7; }
.mobile-menu__toggle {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
}
.mobile-menu__toggle svg { width: 14px; height: 7px; transition: transform var(--dur-med) var(--ease-spring); }
.mobile-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__toggle:hover { background: rgba(255, 255, 255, 0.08); }
.mobile-menu__sub { padding: 0 0 var(--space-4) var(--space-3); }
.mobile-menu__sub a { display: block; padding: 10px 0; font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, 0.85); }
.mobile-menu__sub a:hover { color: #fff; }
.mobile-menu__sub .dropdown__sub { padding-left: var(--space-4); font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.mobile-menu .bhh-btn { margin-top: var(--space-8); }
body.menu-open { overflow: hidden; }
body.menu-open .bhh-header { color: #fff; }
body.menu-open .bhh-logo__color { opacity: 0; }
body.menu-open .bhh-logo__white { opacity: 1; }

/* ----------------------------------------------------------------------------
   6. HERO — "From help to hope"  (→ bhh-hero)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 600px;
  padding: calc(var(--header-h) + 56px) var(--gutter) 72px;
  overflow: hidden;
  text-align: center;
  background-color: #fbfbfd;
  background-image: url("../img/hero-hand-bg.webp");
  background-size: cover;
  background-position: center top;
}
@media (min-width: 768px) { .hero { min-height: 680px; padding-bottom: 96px; } }
@media (min-width: 1200px) { .hero { min-height: 800px; padding: 112px var(--gutter) 118px; } }

.hero__content { position: relative; width: 100%; max-width: 797px; }

.hero__eyebrow {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--agency-accent);
}
@media (min-width: 768px) { .hero__eyebrow { font-size: 16px; letter-spacing: 3px; } }

.hero__title {
  padding-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 54px;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--agency-primary);
}
.hero__title span { display: block; }
.hero__title em { font-style: normal; color: var(--agency-accent); }
@media (min-width: 768px) { .hero__title { font-size: 84px; padding-top: var(--space-7); } }
@media (min-width: 1200px) { .hero__title { font-size: 104px; line-height: 93.6px; letter-spacing: -2.6px; } }

.hero__lead {
  padding-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--agency-primary);
}
.hero__lead .hl-red { color: var(--agency-accent); }
.hero__lead .hl-blue { color: var(--bhh-blue); }
@media (min-width: 768px) { .hero__lead { font-size: 22px; padding-top: var(--space-7); } }
@media (min-width: 1200px) { .hero__lead { font-size: 24.8px; line-height: 34.8px; letter-spacing: -1.12px; } }

.hero__actions { display: flex; justify-content: center; padding-top: var(--space-7); }
@media (min-width: 1200px) { .hero__actions { padding-top: 36px; } }

/* Load-in stagger */
.js .hero__content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: rise var(--dur-slow) var(--ease-out) forwards;
}
.js .hero__content > :nth-child(2) { animation-delay: 90ms; }
.js .hero__content > :nth-child(3) { animation-delay: 180ms; }
.js .hero__content > :nth-child(4) { animation-delay: 270ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
.is-static .hero__content > * { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ----------------------------------------------------------------------------
   7. PROGRAM TILES — hover video + reveal  (→ bhh-program-tiles)
   ------------------------------------------------------------------------- */
.program-tiles { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .program-tiles { grid-template-columns: 1fr 1fr; } }

.program-tile {
  position: relative;
  display: block;
  height: 460px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
@media (min-width: 768px) { .program-tile { height: 520px; } }
@media (min-width: 1200px) { .program-tile { height: 693px; } }

.program-tile__media,
.program-tile__media img,
.program-tile__video,
.program-tile__tint,
.program-tile__shade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.program-tile__media img,
.program-tile__video { object-fit: cover; }
.program-tile__media { z-index: -3; transition: transform 1.2s var(--ease-out); }
.program-tile__video { z-index: -2; opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
/* Color treatment (Figma: red duotone for Food, blue for Workforce) — sits over still + video */
.program-tile__tint { z-index: -1; }
.program-tile--food .program-tile__tint { background: linear-gradient(180deg, rgba(232, 38, 39, 0.1) 0%, rgba(232, 38, 39, 0.28) 45%, rgba(232, 38, 39, 0.62) 100%); }
.program-tile--workforce .program-tile__tint { background: linear-gradient(180deg, rgba(47, 143, 214, 0.12) 0%, rgba(47, 143, 214, 0.3) 45%, rgba(47, 143, 214, 0.68) 100%); }
.program-tile__shade {
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 55%);
  opacity: 0.35;
  transition: opacity var(--dur-med) var(--ease-out);
}

.program-tile__body {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 36px;
  max-width: 553px;
  transform: translateY(var(--reveal-shift, 0px));
  transition: transform var(--dur-slow) var(--ease-spring);
}
@media (min-width: 1200px) { .program-tile__body { left: 48px; bottom: 54.4px; } }

.program-tile__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
@media (min-width: 768px) { .program-tile__title { font-size: 36px; } }
@media (min-width: 1200px) { .program-tile__title { font-size: clamp(36px, 2.9vw, 48px); line-height: 1; letter-spacing: -1.2px; } }
@media (min-width: 1440px) { .program-tile__title { white-space: nowrap; } }

.program-tile__reveal { opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.program-tile__text {
  padding-top: var(--space-4);
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
}
@media (min-width: 1200px) { .program-tile__text { padding-top: 19px; font-size: 17px; line-height: 23px; } }
.program-tile__cta { margin-top: var(--space-5); font-weight: 700; color: #fff; }
@media (min-width: 1200px) { .program-tile__cta { margin-top: 31px; } }

/* Revealed state: hover (fine pointers), keyboard focus, or no-hover devices */
.program-tile:hover .program-tile__body,
.program-tile:focus-visible .program-tile__body,
.program-tile.is-revealed .program-tile__body { transform: translateY(0); }
.program-tile:hover .program-tile__reveal,
.program-tile:focus-visible .program-tile__reveal,
.program-tile.is-revealed .program-tile__reveal { opacity: 1; }
.program-tile:hover .program-tile__shade,
.program-tile:focus-visible .program-tile__shade,
.program-tile.is-revealed .program-tile__shade { opacity: 1; }
.program-tile.is-playing .program-tile__video { opacity: 1; }
.program-tile:hover .program-tile__media { transform: scale(1.04); }
.program-tile:active .program-tile__body { transform: translateY(0) scale(0.99); }
.program-tile:hover .link-arrow .icon-arrow { transform: translateX(4px); }
.program-tile:focus-visible { outline-offset: -6px; outline-color: #fff; border-radius: 0; }

@media (hover: none) {
  .program-tile .program-tile__body { transform: none; }
  .program-tile .program-tile__reveal { opacity: 1; }
  .program-tile .program-tile__shade { opacity: 1; }
}

/* ----------------------------------------------------------------------------
   8. GET INVOLVED  (→ custom card-grid module)
   ------------------------------------------------------------------------- */
.involve { padding-block: var(--section-y); background: var(--surface-primary); }
.involve__intro { max-width: 1174px; }
.involve__text {
  padding-top: var(--space-4);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-body);
}
@media (min-width: 1200px) { .involve__text { font-size: 20px; line-height: 24.375px; max-width: 1174px; } }
.involve__intro .section-title { padding-top: var(--space-3); }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-top: var(--space-10);
}
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1200px) { .card-grid { gap: var(--space-6); padding-top: var(--space-12); } }

.involve-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.involve-card__media { position: relative; height: 240px; overflow: hidden; }
@media (min-width: 768px) { .involve-card__media { height: 200px; } }
@media (min-width: 1200px) { .involve-card__media { height: 336px; } }
.involve-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.involve-card:hover .involve-card__media img { transform: scale(1.05); }
.involve-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) var(--space-6) var(--space-7); }
@media (min-width: 1200px) { .involve-card__body { padding: 42px var(--space-8) var(--space-8); } }
.involve-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--agency-primary);
}
@media (min-width: 1200px) { .involve-card__title { font-size: 28px; } }
.involve-card__text {
  padding-top: var(--space-3);
  font-size: 16px;
  line-height: 24.375px;
  color: var(--text-body);
}
@media (min-width: 1200px) { .involve-card__text { min-height: 60.75px; font-size: 18px; max-width: 384px; } }
.involve-card__action { margin-top: auto; padding-top: var(--space-6); }
/* a long label ("View our Corporate Challenge Toolkit") wraps inside its card on phones instead of running past it */
.involve-card__action .bhh-btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; }
/* Accent card: the whole card is red (used for the primary action in a card row) */
.involve-card--accent { background: var(--agency-accent); }
.involve-card--accent .involve-card__title,
.involve-card--accent .involve-card__text { color: #fff; }
.involve-card--accent .involve-card__text { opacity: 0.92; }

/* ----------------------------------------------------------------------------
   9. UPCOMING EVENTS  (→ bhh-events-feed, data: bhh_event)
   ------------------------------------------------------------------------- */
.events { padding-block: var(--section-y); background: var(--surface-secondary); }
.events .section-title { padding-top: var(--space-3); }

.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-top: var(--space-8);
}
@media (min-width: 768px) { .event-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .event-grid { padding-top: var(--space-10); } }

.event-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(38, 34, 98, 0.03);
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.event-card:active { transform: translateY(-1px) scale(0.99); }
@media (min-width: 768px) and (max-width: 1199px) { .event-card { flex-direction: column; gap: var(--space-3); } }
@media (min-width: 1200px) { .event-card { min-height: 158px; } }

.date-badge {
  display: grid;
  place-content: center;
  flex: none;
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--agency-accent);
  color: #fff;
  text-align: center;
}
.date-badge__month {
  font-weight: 700;
  font-size: 12px;
  line-height: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.date-badge__day {
  padding-top: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}
.event-card__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.event-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 27.5px;
  color: var(--agency-primary);
}
.event-card__meta { display: block; padding-top: 2px; font-size: 14px; line-height: 20px; color: var(--text-meta); }
.event-card__more { min-height: 0; margin-top: var(--space-5); }

.annual-banner {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  margin-top: var(--space-8);
  background: var(--agency-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  color: #fff;
}
/* with the event cards switched off the banner is the whole section, so it loses the gap
   that sat between it and the grid (Bradley, 2026-10-13) */
.events--banner-only .annual-banner { margin-top: 0; }
.annual-banner__media { position: relative; height: 200px; overflow: hidden; }
.annual-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.annual-banner__body { padding: var(--space-6); }
.annual-banner__action { padding: 0 var(--space-6) var(--space-7); }
@media (min-width: 768px) {
  .annual-banner {
    grid-template-columns: 260px 1fr auto;
    align-items: center;
    min-height: 248px;           /* a touch taller than the 210px it was (Bradley) */
  }
  .annual-banner__media { align-self: stretch; height: auto; min-height: 246px; }
  .annual-banner__body { padding: var(--space-6) var(--space-8); }
  .annual-banner__action { padding: 0 var(--space-8) 0 0; }
}
@media (min-width: 1200px) {
  .annual-banner { grid-template-columns: 380px 469px auto; column-gap: 0; margin-top: var(--space-10); }
  .annual-banner__body { padding: 0 0 0 58.5px; }
  .annual-banner__action { padding: 0 0 0 55px; }
}
.annual-banner__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--bhh-blue);
}
@media (min-width: 1200px) { .annual-banner__eyebrow { font-size: 18px; } }
/* the event's own name under the eyebrow, then its line, then a text link (Bradley, 2026-10-02) */
.annual-banner__heading {
  padding-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
@media (min-width: 1200px) { .annual-banner__heading { font-size: 26px; } }
.annual-banner__text { padding-top: var(--space-2); font-size: 15px; line-height: 24.375px; color: #fff; }
.annual-banner__link { margin-top: var(--space-3); color: #fff; }
.annual-banner__link .icon-arrow { filter: none; }
.annual-banner .bhh-btn { min-height: 50.5px; padding-inline: var(--space-7); font-size: 15px; }

/* ----------------------------------------------------------------------------
   10. BHH IN THE NEWS  (→ bhh-news-feed, data: bhh_news)
   ------------------------------------------------------------------------- */
.news {
  position: relative;
  padding-block: var(--section-y);
  color: #fff;
  background: var(--agency-accent) url("../img/bhh-in-the-news-bg.webp") center / cover no-repeat;
}
.news .section-title { padding-top: var(--space-3); color: #fff; }

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  margin-top: var(--space-8);
  background: var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-news);
}
@media (min-width: 1200px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .news-grid { margin-top: var(--space-10); } }

/* the grid item stretches to the tallest card in the row; the card fills it */
.news-grid > li { display: flex; }
.news-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-7);
  background: #fff;
  color: var(--text-body);
  transition: background-color var(--dur-fast) linear;
}
.news-card:hover { background: #fbfdff; }
.news-card:active { background: var(--surface-secondary); }
.news-card:focus-visible { outline-offset: -4px; }
.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
}
.news-card__source { color: var(--text-muted); }
.news-card__dot { color: rgba(22, 40, 61, 0.3); }
.news-card__date { color: rgba(22, 40, 61, 0.5); }
.news-card__title {
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 27.5px;
  color: var(--agency-primary);
  max-width: 340px;
}
.news-card__more { min-height: 0; margin-top: var(--space-5); }

/* ----------------------------------------------------------------------------
   11. IMPACT BENTO — count-up stats  (→ bhh-impact-bento, static numbers)
   ------------------------------------------------------------------------- */
.impact { padding-block: var(--section-y); background: var(--surface-secondary); }
.impact .section-title { padding-top: var(--space-3); }
@media (min-width: 1200px) { .impact .section-title { line-height: 51.2px; letter-spacing: -1.28px; } }
.impact__eyebrow { display: block; padding-top: 3px; }

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 220px);
    gap: var(--space-4);
  }
  .stat--meals { grid-row: 1 / span 2; }
}
@media (min-width: 1200px) {
  .bento {
    column-gap: 21.5px;
    row-gap: 23px;
    grid-template-rows: repeat(2, 288.7px);
    margin-top: var(--space-12);
  }
}
.bento__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (min-width: 1200px) { .bento__pair { gap: 21px; } }

.stat {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: #fff;
}
@media (min-width: 768px) { .stat { min-height: 0; } }
@media (min-width: 1200px) { .stat { padding: 29px; border-radius: var(--radius-2xl); } }
.stat__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.stat::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.stat--meals { justify-content: flex-end; min-height: 320px; }
@media (min-width: 1200px) { .stat--meals { padding: 69.66px 38.66px; } }
.stat--meals::before    { background: linear-gradient(-70.87deg, rgba(38, 34, 98, 0.15) 10.4%, rgba(38, 34, 98, 0.85) 99.1%); }
.stat--kidspack::before { background: linear-gradient(147.64deg, rgba(224, 43, 53, 0.55) 7.7%, rgba(38, 34, 98, 0.55) 92.3%); }
.stat--volunteer::before { background: linear-gradient(127.56deg, rgba(224, 43, 53, 0.55) 7.7%, rgba(38, 34, 98, 0.667) 92.3%); }
.stat--students::before { background: linear-gradient(127.56deg, rgba(38, 34, 98, 0.85) 7.7%, rgba(38, 34, 98, 0.2) 92.3%); }
.stat--students .stat__img { transform: scaleX(-1); }
.bento__pair .stat { min-height: 180px; padding: var(--space-4); }
@media (min-width: 1200px) { .bento__pair .stat { padding: 29px; } }

.stat__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.bento__pair .stat__number { font-size: 34px; }
@media (min-width: 768px) {
  .stat__number { font-size: 56px; }
  .bento__pair .stat__number { font-size: 40px; }
}
@media (min-width: 1200px) {
  .stat__number { font-size: clamp(64px, 4.53vw, 96.644px); line-height: 1; letter-spacing: -0.025em; }
  .bento__pair .stat__number { font-size: clamp(48px, 4.2vw, 96.644px); }
}
@media (min-width: 1648px) {
  /* Figma: bento grid spans the full 1600px while the header row keeps 24px insets */
  .impact .bento { margin-inline: calc(var(--gutter) * -1); }
}
.stat__label {
  align-self: flex-start;
  margin-top: var(--space-4);
  padding: 4.832px 14.497px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(9.664px);
  backdrop-filter: blur(9.664px);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}
@media (min-width: 1200px) { .stat__label { margin-top: 24.161px; font-size: 14.497px; line-height: 19.329px; } }
.stat--students .stat__label { align-self: stretch; }

/* ----------------------------------------------------------------------------
   12. TESTIMONIALS  (→ testimonial module, carousel variant)
   ------------------------------------------------------------------------- */
.testimonials {
  padding-block: var(--section-y);
  color: #fff;
  background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat;
}
@media (min-width: 1200px) { .testimonials { min-height: 578.89px; padding-top: 120px; } }
.testimonials__inner { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }

.quote-stage { display: grid; }
.quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.quote.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.quote__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
}
@media (min-width: 768px) { .quote__text { font-size: 28px; } }
@media (min-width: 1200px) { .quote__text { font-size: 33.6px; line-height: 46.2px; } }
.quote__footer { padding-top: var(--space-6); }
.quote__name { display: block; font-weight: 600; font-size: 16px; line-height: 24px; font-style: normal; }
/* typed in mixed case ("volunteer and contributor", "Mayor of Boca Raton"), shown uniformly (Bradley) */
.quote__role {
  display: block;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* the dots sit between a prev and a next arrow (Bradley) */
.quote-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding-top: var(--space-5); }
.quote-arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color var(--dur-fast) linear, transform var(--dur-med) var(--ease-spring);
}
.quote-arrow svg { width: 20px; height: 20px; }
.quote-arrow:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }
.quote-arrow:active { transform: scale(0.94); }
.quote-arrow:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .quote-arrow:hover, .quote-arrow:active { transform: none; } }

/* Figma: 8px white dots, 8px apart; active = 22×8 red pill */
.quote-dots { display: flex; justify-content: center; }
.quote-dot {
  display: grid; place-items: center;
  width: 16px; height: 44px;       /* 8px dot + 4px each side → 8px visual gap */
}
.quote-dot[aria-current="true"] { width: 30px; }
.quote-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 4px;
  background: #fff;
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) linear;
}
.quote-dot:hover::before { transform: scale(1.3); }
.quote-dot:active::before { transform: scale(0.9); }
.quote-dot[aria-current="true"]::before { width: 22px; background: var(--agency-accent); transform: none; }
.quote-dot:focus-visible { outline-color: #fff; outline-offset: -12px; }

/* ----------------------------------------------------------------------------
   13. LOCATIONS — interactive map  (→ bhh-locations-map, data: bhh_location)
   ------------------------------------------------------------------------- */
.locations { padding: 40px 0 var(--section-y); background: var(--surface-primary); }
@media (min-width: 1200px) { .locations { padding-top: 104px; } }

/* The label and headline sit above the row; the card list and the map are two columns of the
   same height, so they line up top and bottom (Bradley, 2026-10-07). */
.locations__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: stretch; }
@media (min-width: 1200px) { .locations__grid { grid-template-columns: minmax(0, 539.53fr) minmax(0, 620.45fr); } }

.locations__head { display: flex; flex-direction: column; gap: 11px; padding: var(--space-3) 0 var(--space-8); }
@media (min-width: 1200px) { .locations__head { padding-bottom: 45px; } }
.locations__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.07;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--agency-primary);
}
@media (min-width: 768px) { .locations__title { font-size: 36px; } }
@media (min-width: 1200px) { .locations__title { width: 572px; font-size: 45px; line-height: 48px; letter-spacing: -1.2px; } }

.location-list { display: flex; flex-direction: column; gap: 10px; }
.location-btn {
  /* the services tag sits on the title's line; the host site and address run the card's full width beneath it */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(3, auto);   /* name / host site / address — so the tag can span them and centre */
  align-items: center;
  column-gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out);
}
.location-btn:hover { transform: translateX(4px); box-shadow: var(--shadow-elevated); }
.location-btn:active { transform: translateX(2px) scale(0.99); }
.location-btn[aria-pressed="true"] { background: var(--bhh-red-tint); border-color: var(--agency-accent); }
.location-btn__name { display: block; font-weight: 600; font-size: 17px; line-height: 24px; color: var(--text-ink); }
@media (min-width: 1200px) { .location-btn__name { font-size: 18px; } }
/* the host site reads above its street address (Bradley) */
.location-btn > span:first-child { display: contents; }   /* name / host / address become rows of the card's grid */
/* the tag sits on the host-site line — the card's middle row — so the name and the address keep the full width */
.location-btn__name, .location-btn__addr { grid-column: 1 / -1; }
.location-btn__org { grid-column: 1; }
.location-tag { grid-column: 2; grid-row: 2; }
/* phones: a card is too narrow to hold the longest tag beside the name, so it takes its own row */
@media (max-width: 767px) {
  .location-btn { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .location-tag { grid-column: 1; grid-row: 4; justify-self: start; margin-top: var(--space-2); }
}
.location-btn__org { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-secondary); }
.location-btn__addr { display: block; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.location-tag {
  flex: none;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bhh-sky-tint);
  font-weight: 600;
  font-size: 11px;
  line-height: 16.5px;
  color: var(--text-ink);
  text-align: center;
}
.location-btn[aria-pressed="true"] .location-tag { background: var(--agency-accent); color: #fdfeff; }
@media (max-width: 479px) {
  .location-btn { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

.map-card {
  position: relative;
  height: 380px;
  overflow: hidden;
  background: var(--bhh-sky-tint);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
}
/* Tablet: square card so the whole square map (all 5 sites) is visible by default */
@media (min-width: 768px) and (max-width: 1199px) { .map-card { height: auto; aspect-ratio: 1 / 1; } }
/* side by side the map takes the height of the card list beside it, so both columns end on the
   same line; the square map stage is sized to cover whatever height that is (scripts.js block 8) */
@media (min-width: 1200px) { .map-card { height: 100%; min-height: 520px; } }

/* Square stage sized in JS to "cover" the card, so % pin positions stay locked to the image */
.map-stage { position: absolute; inset: 0; }
.map-canvas {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transition: transform 900ms var(--ease-spring);
  will-change: transform;
}
.map-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

.map-pin {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
}
/* Each layer is centred on the pin box explicitly (the 68px ring must not resize the 44px box) */
.map-pin__dot, .map-pin__ring, .map-pin__active {
  position: absolute;
  left: 50%; top: 50%;
  max-width: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring);
}
.map-pin__dot { width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; }
.map-pin__ring { width: 68px; height: 68px; margin: -34px 0 0 -34px; opacity: 0; transform: scale(0.6); }
.map-pin__active { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0; transform: scale(0.6); }
.map-pin:hover .map-pin__dot { transform: scale(1.25); }
.map-pin:active .map-pin__dot { transform: scale(0.95); }
.map-pin.is-active .map-pin__dot { opacity: 0; }
.map-pin.is-active .map-pin__ring,
.map-pin.is-active .map-pin__active { opacity: 1; transform: none; }
.map-pin.is-active { z-index: 2; }
.map-pin.is-active .map-pin__ring { animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (min-width: 1200px) {
  .map-pin__ring { width: 68.25px; height: 68.25px; }
}

.map-info {
  position: absolute;
  z-index: 3;
  left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(17, 13, 73, 0.08);
}
.map-info__name { font-weight: 600; font-size: 20px; line-height: 24px; color: var(--text-ink); }
.map-info__org { padding-top: 4px; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.map-info__addr { padding-top: 4px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.map-info__org + .map-info__addr { padding-top: 0; }
.map-info .link-arrow { min-height: 0; margin-top: var(--space-3); }
.map-info.is-swapping { animation: info-swap var(--dur-med) var(--ease-out); }
@keyframes info-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------
   14. CONTACT — "Let's Talk"  (→ split module + Flamingo Forms)
   ------------------------------------------------------------------------- */
.contact {
  padding-block: var(--section-y);
  background: var(--surface-secondary);
  border-top: 1px solid var(--border-color);
}
.contact-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
}
@media (min-width: 768px) { .contact-card { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .contact-card { min-height: 495.5px; } }

.contact-card__media {
  position: relative;
  min-height: 340px;
  background: var(--bhh-sky-tint);
  color: #fff;
  isolation: isolate;
}
.contact-card__media img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.contact-card__media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(163.2deg, rgba(38, 34, 98, 0.2) 8.5%, rgba(38, 34, 98, 0.8) 91.5%);
}
.contact-card__media::after { /* color treatment */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--agency-primary);
  mix-blend-mode: multiply;
  opacity: 0.12;
}
.contact-card__copy { position: absolute; left: 0; bottom: 0; max-width: 448px; padding: var(--space-8) var(--space-6); }
@media (min-width: 1200px) { .contact-card__copy { padding: var(--space-8) var(--space-8) 45px; } }
.contact-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
@media (min-width: 1200px) { .contact-card__title { font-size: 41.6px; line-height: 52px; letter-spacing: 0; } }
.contact-card__text {
  max-width: 384px;
  padding-top: var(--space-3);
  font-size: 15px;
  line-height: 24.375px;
  color: rgba(255, 255, 255, 0.85);
}
.contact-card__pill {
  display: inline-flex;
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding: 4.832px 14.497px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(9.664px);
  backdrop-filter: blur(9.664px);
  font-weight: 600;
  font-size: 14.497px;
  line-height: 19.329px;
}
.contact-card__pill a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) linear; }
.contact-card__pill a:hover { text-decoration-color: currentColor; }
.contact-card__pill a:active { opacity: 0.75; }

.contact-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-6); background: #fff; }
@media (min-width: 1200px) { .contact-form { padding: var(--space-12); } }
.bhh-form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 480px) { .bhh-form-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-ink); }
.field input,
.field textarea {
  width: 100%;
  min-height: 48.5px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-body);
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.field textarea { height: 116px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--border-color-strong); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--agency-primary);
  box-shadow: 0 0 0 3px rgba(38, 34, 98, 0.18);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--agency-accent); }
.contact-form__submit { padding-top: var(--space-2); }
.contact-form .bhh-btn { font-size: 17px; line-height: 22.5px; }
.form-status { min-height: 0; font-size: 14px; line-height: 20px; color: var(--agency-primary); }
.form-status:empty { display: none; }

/* ----------------------------------------------------------------------------
   15. PARTNERS MARQUEE  (→ Global Element / logo-grid, data: bhh_partner)
   ------------------------------------------------------------------------- */
.partners {
  padding-block: 40px;
  background: #fff;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 1200px) { .partners { padding-block: var(--space-14); } }
/* the band's own headline — the section-title scale, one step down and centred */
.partners__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-primary);
}
@media (min-width: 768px) { .partners__title { font-size: 34px; } }
@media (min-width: 1200px) { .partners__title { font-size: 40px; } }
.partners .eyebrow { display: block; text-align: center; letter-spacing: 2.4px; }

.marquee { margin-top: var(--space-8); overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: var(--space-4); padding-right: var(--space-4); }
@keyframes marquee { to { transform: translateX(-50%); } }

.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 260px;
  height: 150px;
  padding: 0 var(--space-6);
  background: #fff;
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform var(--dur-med) var(--ease-spring);
}
@media (min-width: 1200px) { .partner-card { width: 320px; height: 174px; padding: 0 var(--space-8); } }
/* the logo lifts on hover — no shadow, now that it sits straight on the white band */
.partner-card:hover { transform: translateY(-4px); }
.partner-card:active { transform: translateY(-1px) scale(0.98); }
.partner-card:focus-visible { outline-offset: -4px; }
/* Name-only supporter cards (WD page) — not links, so no hover state */
.partner-card--name { transition: none; }
.partner-card--name:hover, .partner-card--name:active { transform: none; }
.partner-card--name .partner-card__label { white-space: normal; line-height: 1.55; }
.partner-card__icon { width: 96px; height: 83px; object-fit: contain; }
@media (min-width: 1200px) { .partner-card__icon { width: 116px; height: 100px; } }
.partner-card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.45px;
  text-transform: uppercase;
  color: rgba(32, 35, 84, 0.7);
  white-space: nowrap;
}
@media (min-width: 1200px) { .partner-card__label { font-size: 18px; } }
.partner-card__logo--cf { width: 200px; height: auto; }
.partner-card__logo--uw { width: 160px; height: auto; }
@media (min-width: 1200px) {
  .partner-card__logo--cf { width: 230px; }
  .partner-card__logo--uw { width: 196px; }
}

/* ----------------------------------------------------------------------------
   16. ACCREDITATION BAND  (→ Global Element)
   ------------------------------------------------------------------------- */
.accreditation {
  padding-block: var(--space-6);
  background: var(--bhh-navy-deep);
  border-top: 1px solid var(--bhh-navy-line);
  border-bottom: 1px solid var(--bhh-navy-line);
}
@media (min-width: 1200px) { .accreditation { padding-block: 26px; } }
.accreditation__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .accreditation__list { display: flex; justify-content: space-between; }
}
.accreditation__list img { height: auto; }
.badge--encore { position: relative; width: 128px; aspect-ratio: 176 / 197; }
.badge--encore img { position: absolute; }
.badge--encore .badge__shape { left: 14.77%; top: 18.41%; width: 71.02%; height: 70.05%; }
.badge--encore .badge__img { inset: 0; width: 100%; height: 100%; }
.badge--nf { width: 150px; }
.badge--cn { width: 104px; }
.badge--candid { width: 106px; }
@media (min-width: 1200px) {
  .badge--encore { width: 176px; }
  .badge--nf { width: 208px; }
  .badge--cn { width: 143px; }
  .badge--candid { width: 145px; }
}

/* ----------------------------------------------------------------------------
   17. FOOTER  (→ Global Element: footer)
   ------------------------------------------------------------------------- */
.bhh-footer {
  color: rgba(255, 255, 255, 0.8);
  background: var(--agency-primary) url("../img/footer-bg.webp") center / cover no-repeat;
}
.bhh-footer__inner { padding-block: var(--space-12); }
@media (min-width: 1200px) { .bhh-footer__inner { padding-block: var(--space-16); } }

.footer-top { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) {
  .footer-top { display: flex; align-items: flex-start; gap: 70px; min-height: 276px; }
}
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 767px) { .footer-cols > :nth-child(2) { grid-column: 1 / -1; } } /* Contact + socials full width on phones */
@media (min-width: 768px) { .footer-cols { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .footer-cols { display: flex; flex: 1; min-width: 0; gap: 40px; } .footer-cols > * { flex: 1 1 0; min-width: 0; max-width: 243.63px; padding-top: 30px; } }

.footer-logo { display: block; grid-column: 1 / -1; width: 130px; }
@media (min-width: 768px) { .footer-logo { grid-column: auto; } }
@media (min-width: 1200px) { .footer-logo { width: 166.69px; } .footer-logo-wrap { padding-top: 30px; } }

.bhh-footer-heading {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.bhh-footer-heading--social { padding-top: 36px; }
.footer-address { padding-top: var(--space-4); font-style: normal; font-size: 14px; line-height: 20px; }
.footer-address a, .footer-legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) linear;
}
.footer-address a:hover, .footer-legal a:hover { color: #fff; }
.footer-address a:active, .footer-legal a:active { opacity: 0.7; }
.footer-address .gap { display: block; height: 20px; }

.social-list { display: flex; flex-wrap: wrap; gap: 0; padding-top: var(--space-2); margin-left: -12px; }
.social-list a {
  display: grid; place-items: center;
  width: 38px; height: 44px;
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) linear;
}
.social-list img { width: 20.66px; height: 20.66px; }
.social-list a:hover { transform: translateY(-3px); }
.social-list a:active { transform: scale(0.9); opacity: 0.7; }

.bhh-footer-links { padding-top: var(--space-3); font-size: 14px; line-height: 20px; }
.bhh-footer-links a {
  display: inline-block;
  padding-block: 5px;
  transition: transform var(--dur-med) var(--ease-spring), color var(--dur-fast) linear;
}
.bhh-footer-links a:hover { color: #fff; transform: translateX(3px); }
.bhh-footer-links a:active { opacity: 0.7; }

.signup-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--space-8);
  background: var(--bhh-navy-deep);
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
@media (min-width: 768px) { .signup-card { align-self: start; } }
@media (min-width: 1200px) { .signup-card { width: 343.09px; flex: none; min-height: 207px; padding: var(--space-12); } }
.signup-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -1.04px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
@media (min-width: 1200px) { .signup-card__title { font-size: 26.6px; } }
.signup-card .bhh-btn { min-height: 50.5px; margin-top: var(--space-2); font-size: 17px; line-height: 22.5px; }

.footer-legal {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 1200px) { .footer-legal { margin-top: var(--space-14); font-size: 14px; } }
.footer-legal p + p { margin-top: 20px; }

/* ----------------------------------------------------------------------------
   18. SUBPAGES — Workforce Development + WD Programs
   Figma: 192:10673 / 192:19723. Header sits above the hero (not overlaid).
   ------------------------------------------------------------------------- */
.page-sub main { padding-top: var(--header-h); }

/* Page hero  (→ bhh-page-hero) */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: var(--space-12) var(--gutter);
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: var(--agency-primary);
}
@media (min-width: 768px) { .page-hero { min-height: 420px; } }
@media (min-width: 1200px) { .page-hero { min-height: 582px; padding-block: var(--space-16); } }
.page-hero__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% var(--hero-focus, 50%);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 42, 74, 0.55) 0%, rgba(30, 95, 147, 0.57) 50%, rgba(47, 143, 214, 0.6) 100%);
}
/* no photo: the brand halftone on navy, the same texture the homepage bands and the
   photo-less upcoming-event cards use — a page hero without a picture of anything */
.page-hero--plain { background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat; }
.page-hero--plain::before { background: linear-gradient(180deg, rgba(38, 34, 98, 0.72) 0%, rgba(38, 34, 98, 0.55) 55%, rgba(144, 191, 221, 0.28) 100%); }
.page-hero__content { width: 100%; max-width: 958px; }
@media (min-width: 1200px) { .page-hero__content { padding-top: var(--space-7); } }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
@media (min-width: 480px) { .page-hero__title { font-size: 48px; } }
@media (min-width: 768px) { .page-hero__title { font-size: 72px; } }
@media (min-width: 1200px) { .page-hero__title { font-size: 104px; line-height: 93.6px; letter-spacing: -2.6px; } }
.page-hero__subtitle {
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--agency-secondary);
}
@media (min-width: 1200px) { .page-hero__subtitle { padding-top: var(--space-5); font-size: 34.8px; line-height: 43.8px; letter-spacing: -1.12px; } }
/* over a photo the sky-blue subtitle disappears; this variant is white, bigger and carries a soft
   shadow so it reads on any image (Bradley, 2026-10-05). The WD Programs hero keeps the designed one. */
.page-hero__subtitle--strong {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(10, 8, 40, 0.45);
}
@media (min-width: 768px) { .page-hero__subtitle--strong { font-size: 30px; } }
@media (min-width: 1200px) { .page-hero__subtitle--strong { font-size: 40px; line-height: 48px; } }
.js .page-hero__content > * { opacity: 0; transform: translateY(20px); animation: rise var(--dur-slow) var(--ease-out) forwards; }
.js .page-hero__content > :nth-child(2) { animation-delay: 110ms; }
.is-static .page-hero__content > * { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Centered section heading used across the subpages */
.section-title--center { max-width: 672px; margin-inline: auto; text-align: center; }
@media (min-width: 1200px) { .section-title--sm { font-size: 51.2px; line-height: 51.2px; letter-spacing: -1.28px; } }

/* WD intro statement + cards  (→ bhh-lead-statement + card-grid) */
.wd-intro { padding: 40px 0 var(--section-y); background: #fff; }
@media (min-width: 1200px) { .wd-intro { padding-top: 60px; } }
.lead-statement {
  max-width: 1241px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--agency-primary);
}
@media (min-width: 768px) { .lead-statement { font-size: 28px; } }
@media (min-width: 1200px) {
  .lead-statement {
    width: min(1241px, calc(100% - 2 * var(--gutter)));
    padding-inline: 0;
    font-size: 34.8px; line-height: 43.8px; letter-spacing: -1.12px;
  }
}
.lead-statement .hl-red { color: var(--agency-accent); }
.lead-statement .hl-sky { color: var(--agency-secondary); } /* as designed — see build-brief §4 */
.lead-statement .hl-blue { color: var(--bhh-blue); }
.wd-intro .card-grid { padding-top: var(--space-8); }
.wd-intro .involve-card__action { margin-top: 0; }  /* Figma: button follows its text, not pinned to the card bottom */
@media (min-width: 1200px) {
  .wd-intro .card-grid { padding-top: 68px; }
  .wd-intro .involve-card__title { font-size: 27px; }
  .wd-intro .involve-card__text { max-width: none; }
}

/* How It Works heading + phase band  (→ bhh-phase-band) */
.how-head { padding: 48px var(--gutter) 32px; background: #fff; }
@media (min-width: 1200px) { .how-head { padding: 86px 0 46px; } }

.phases { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1200px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase { padding: var(--space-10) var(--gutter); color: #fff; }
@media (min-width: 768px) { .phase { padding: var(--space-12); } }
@media (min-width: 1200px) { .phase { min-height: 391px; padding: 108px 72px 62px; } }
.phase--red { background: var(--agency-accent); }
.phase--sky { background: var(--agency-secondary); color: var(--agency-primary); }
.phase--navy { background: var(--agency-primary); }
.phase__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.phase--sky .phase__eyebrow { color: var(--agency-primary); }
.phase__name {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  text-transform: uppercase;
}
@media (min-width: 1200px) {
  .phase__eyebrow { font-size: 16px; }
  .phase__name { font-size: 32px; line-height: 32px; }
}
.phase__text { padding-top: var(--space-3); font-size: 15px; line-height: 24.375px; color: rgba(255, 255, 255, 0.85); }
.phase--sky .phase__text { color: var(--agency-primary); }

/* Program cards grid  (→ bhh-program-grid, data: bhh_program) */
.programs { padding: 48px 0 var(--section-y); background: #fff; border-top: 1px solid var(--border-color); }
.apprenticeships { padding: 48px 0 var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
@media (min-width: 1200px) { .programs, .apprenticeships { padding-top: 86px; } }

.program-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding-top: var(--space-8);
}
@media (min-width: 1200px) { .program-grid { gap: 24px; padding-top: var(--space-12); } }

.program-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 501.33px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  color: #fff;
}
@media (min-width: 768px) { .program-card { width: calc((100% - var(--space-4)) / 2); } }
@media (min-width: 1200px) { .program-card { width: calc((100% - 48px) / 3); aspect-ratio: 501.33 / 500; } }
.program-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.program-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(38, 34, 98, 0.35) 0%, rgba(224, 43, 53, 0.75) 100%);
}
.program-card--sky::before { background: linear-gradient(180deg, rgba(38, 34, 98, 0.35) 0%, rgba(144, 191, 221, 0.75) 100%); }
.program-card__body { padding: var(--space-6); }
@media (min-width: 1200px) { .program-card__body { padding: 42px var(--space-8) var(--space-8); } }
.program-card__title {
  max-width: 340px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
}
@media (min-width: 1200px) {
  .program-card__title { max-width: 315px; font-size: 32px; line-height: 32px; }
  .program-card__title--wide { max-width: 415px; } /* Figma: Master Automotive Service Technology */
}
.program-card .bhh-btn { margin-top: var(--space-6); }

/* Info banner  (→ bhh-info-banner) */
.info-banner {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1027px;
  margin: var(--space-10) auto 0;
  overflow: hidden;
  background: var(--agency-primary);
  border-radius: var(--radius-xl);
  color: #fff;
}
.info-banner__media { position: relative; height: 220px; }
.info-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.info-banner__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); }
@media (min-width: 768px) {
  .info-banner { grid-template-columns: 284px 1fr; min-height: 267px; }
  .info-banner__media { height: auto; }
  .info-banner__body { padding: var(--space-10) var(--space-12) var(--space-10) var(--space-16); }
}
@media (min-width: 1200px) { .info-banner__body { padding: 0 99px 0 64px; } }
.info-banner__lead { font-weight: 600; font-size: 19px; line-height: 1.4; }
.info-banner__text { font-size: 16px; line-height: 1.6; }
@media (min-width: 1200px) {
  .info-banner__lead { font-size: 22px; line-height: 30.4px; }
  .info-banner__text { font-size: 18px; line-height: 28.4px; }
}

/* Success stories carousel  (→ bhh-success-stories, data: bhh_story) */
.stories { padding-block: var(--section-y); background: #fff; }
.stories__layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-8);
  max-width: 1240px;
  margin: var(--space-8) auto 0;
  padding-inline: var(--gutter);
}
@media (min-width: 1200px) {
  .stories__layout { grid-template-columns: minmax(0, 514.8fr) minmax(0, 629.2fr); column-gap: 48px; min-height: 556px; margin-top: 0; }
}
.story-media { display: grid; }
/* Copy area follows the active story's height so the controls sit right under the text (Figma) */
.story-copy { position: relative; }
.story:not(.is-active) { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; } /* fading-out story must not block the controls */
.story-media__item {
  grid-area: 1 / 1;
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
@media (min-width: 768px) { .story-media__item { height: 400px; } }
@media (min-width: 1200px) { .story-media__item { height: 440px; } }
.story-media__item.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.story-media__item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 71%; }
.story-media__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(162.7deg, rgba(11, 42, 74, 0.15) 8.5%, rgba(11, 42, 74, 0.6) 91.5%);
}
.story-media__item .ph { width: 100%; height: 100%; }
.story {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.story.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.story__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.5px;
  color: var(--agency-primary);
}
@media (min-width: 1200px) { .story__text { padding-top: var(--space-5); font-size: 20px; line-height: 32px; letter-spacing: -0.76px; } }
.story__footer { padding-top: var(--space-5); }
.story__name { display: block; font-weight: 600; font-size: 16px; line-height: 24px; color: var(--text-ink); }
.story__role { display: block; font-size: 14px; line-height: 20px; color: rgba(22, 40, 61, 0.6); }

.story-controls { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-8); }
.story-arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out);
}
.story-arrow img { width: 20px; height: 20px; }
.story-arrow:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.story-arrow:active { transform: scale(0.94); }
.story-dots { display: flex; }
.story-dot { display: grid; place-items: center; width: 16px; height: 40px; }
.story-dot[aria-current="true"] { width: 30px; }
.story-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 4px;
  background: #cfe6f6;
  transition: transform var(--dur-med) var(--ease-spring);
}
.story-dot:hover::before { transform: scale(1.3); }
.story-dot:active::before { transform: scale(0.9); }
.story-dot[aria-current="true"]::before { width: 22px; background: var(--agency-accent); transform: none; }
.story-dot:focus-visible { outline-offset: -10px; }

/* ----------------------------------------------------------------------------
   19. ABOUT PAGE — overview, sticky section nav, Our Story / Our Team / Our Impact
   No Figma frame: built from the homepage + WD design system.
   ------------------------------------------------------------------------- */
:root { --header-visible: 96px; --section-nav-h: 60px; }
@media (min-width: 1440px) { :root { --header-visible: 132px; } }

.about-intro .card-grid { padding-top: var(--space-10); }

/* Sticky in-page nav (→ bhh-section-nav) */
.section-nav {
  position: sticky;
  top: var(--header-visible);
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(17, 13, 73, 0.06);
}
.section-nav__inner { display: flex; justify-content: center; }
.section-nav__list { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.section-nav__list::-webkit-scrollbar { display: none; }
/* sideways-scrolling links on a phone: fade the edge that has more (classes set in scripts.js block 13) */
.section-nav__list.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.section-nav__list.has-more-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.section-nav__list.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.section-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--section-nav-h);
  padding: 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color var(--dur-fast) linear;
}
@media (max-width: 479px) { .section-nav__list { gap: 0; } .section-nav__link { padding: 0 var(--space-2); font-size: 13px; letter-spacing: 0.04em; } .section-nav__link::after { left: var(--space-2); right: var(--space-2); } }
@media (max-width: 359px) { .section-nav__link { font-size: 12px; letter-spacing: 0.02em; } }
@media (min-width: 768px) { .section-nav__link { padding: 0 var(--space-6); font-size: 15px; } }
.section-nav__link::after {
  content: "";
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--agency-accent);
  transform: scaleX(0);
  transition: transform var(--dur-med) var(--ease-spring);
}
.section-nav__link:hover { color: var(--agency-primary); }
.section-nav__link:hover::after { transform: scaleX(0.4); }
.section-nav__link:active { opacity: 0.7; }
.section-nav__link:focus-visible { outline-offset: -6px; }
.section-nav__link[aria-current="location"] { color: var(--agency-primary); }
.section-nav__link[aria-current="location"]::after { transform: scaleX(1); }

/* Shared About section rhythm */
.about-section {
  padding-block: var(--section-y);
  /* html already reserves 96px (scroll-padding-top); add the section nav so headings land just below it */
  scroll-margin-top: calc(var(--section-nav-h) + var(--header-visible) - 96px);
}
.about-section__head { max-width: 760px; margin: 0 auto var(--space-10); text-align: center; }
@media (min-width: 1200px) { .about-section__head { margin-bottom: var(--space-12); } }
.about-section__sub { padding-top: var(--space-3); font-size: 18px; line-height: 1.6; color: var(--text-body); }
@media (min-width: 1200px) { .about-section__sub { font-size: 20px; } }
.about-story .section-title { margin-bottom: var(--space-10); }
@media (min-width: 1200px) { .about-story .section-title { margin-bottom: var(--space-12); } }

.team-heading {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--agency-primary);
}
@media (min-width: 1200px) { .team-heading { font-size: 28px; margin-bottom: var(--space-8); } }
.team-heading--light { color: #fff; }

/* Mission / Vision (→ bhh-mission-vision) */
.mv-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .mv-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.mv-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  isolation: isolate;
}
@media (min-width: 1200px) { .mv-card { padding: 64px 56px; } }
.mv-card::before { /* quiet halftone texture, same family as the homepage bands */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/testimonials-bg.webp") right center / cover no-repeat;
  opacity: 0.35;
}
.mv-card--navy { background: var(--agency-primary); color: #fff; }
.mv-card--sky { background: var(--agency-secondary); color: var(--agency-primary); }
.mv-card--sky::before { opacity: 0.12; mix-blend-mode: multiply; }
.mv-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.mv-card--navy .mv-card__title { color: var(--agency-secondary); }
@media (min-width: 1200px) { .mv-card__title { font-size: 48px; } }
.mv-card__text {
  padding-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
@media (min-width: 1200px) { .mv-card__text { font-size: 24px; line-height: 1.4; } }

/* C.A.R.E.S values (→ bhh-values) */
.values { padding-top: var(--space-16); }
@media (min-width: 1200px) { .values { padding-top: var(--space-24); } }
.values__head { text-align: center; }
.values__eyebrow { display: block; }
.values__title {
  padding-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--agency-primary);
}
@media (min-width: 768px) { .values__title { font-size: 44px; } }
@media (min-width: 1200px) { .values__title { font-size: 56px; } }
.values__lead { padding-top: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--agency-accent); }
.values__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
@media (min-width: 768px) { .values__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 1200px) { .values__list { grid-template-columns: repeat(5, 1fr); margin-top: var(--space-12); } }
.value {
  --value-color: var(--agency-accent);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--space-4);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--value-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.value--navy { --value-color: var(--agency-primary); }
.value--sky { --value-color: var(--agency-secondary); }
@media (min-width: 1200px) {
  .value { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding: var(--space-8) var(--space-6); }
}
.value__letter {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--value-color);
}
@media (min-width: 1200px) { .value__letter { grid-row: auto; font-size: 96px; } }
.value--sky .value__letter { color: color-mix(in srgb, var(--agency-secondary) 70%, var(--agency-primary)); }
.value__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--agency-primary);
}
@media (min-width: 1200px) { .value__name { padding-top: var(--space-4); font-size: 19px; } }
.value__text { padding-top: var(--space-1); font-size: 15px; line-height: 1.55; color: var(--text-body); }
@media (min-width: 1200px) { .value__text { padding-top: var(--space-2); font-size: 16px; } }

/* Narrative (→ bhh-history) */
.history { display: grid; grid-template-columns: 1fr; gap: var(--space-10); padding-top: var(--space-16); }
@media (min-width: 1200px) { .history { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-14, 56px); align-items: start; padding-top: var(--space-24); } }
.history__media { position: relative; padding-bottom: 22%; }
@media (min-width: 1200px) { .history__media { position: sticky; top: calc(var(--header-visible) + var(--section-nav-h) + var(--space-8)); } }
.history__photo { overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-floating); }
.history__photo img { width: 100%; height: 100%; object-fit: cover; }
.history__photo--then { position: relative; width: 84%; aspect-ratio: 4 / 3; }
.history__photo--now {
  position: absolute; right: 0; bottom: 0;
  width: 68%;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px rgba(17, 13, 73, 0.28), 0 10px 20px rgba(17, 13, 73, 0.14);
}
.history__body { font-size: 17px; line-height: 1.75; color: var(--text-body); }
.history__body p + p { margin-top: var(--space-5); }
.history__lede { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.55; letter-spacing: -0.01em; color: var(--agency-primary); }
@media (min-width: 1200px) { .history__body { font-size: 18px; } .history__lede { font-size: 23px; } }

.accolade {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding: var(--space-6);
  background: var(--agency-primary);
  border-radius: var(--radius-xl);
  color: #fff;
  box-shadow: var(--shadow-floating);
}
@media (min-width: 768px) { .accolade { justify-content: center; padding: var(--space-8) var(--space-10); gap: var(--space-8); } }
@media (min-width: 1200px) { .accolade { margin-top: var(--space-16); padding: var(--space-10) var(--space-16); gap: var(--space-12); } }
.accolade__badge { flex: none; width: 84px; height: auto; }
@media (min-width: 768px) { .accolade__badge { width: 124px; } }
@media (min-width: 1200px) { .accolade__badge { width: 156px; } }
.accolade__text { text-wrap: balance; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; }
/* hyphenated words ("4-Star") never split across lines */
.accolade__text .nowrap { white-space: nowrap; }
@media (min-width: 1200px) { .accolade__text { font-size: 32px; letter-spacing: -0.02em; } }

/* Team (→ bhh-team) */
.about-team { background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
/* Flex (not grid) so a short last row centers under the heading */
.staff-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.staff-grid > li { width: calc((100% - var(--space-4)) / 2); }
@media (min-width: 768px) { .staff-grid { gap: var(--space-6); } .staff-grid > li { width: calc((100% - 2 * var(--space-6)) / 3); } }
@media (min-width: 1200px) { .staff-grid > li { width: calc((100% - 3 * var(--space-6)) / 4); } }
.about-team > .bhh-container > .team-heading { text-align: center; }
.staff-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 0 var(--space-5);
  overflow: hidden;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.staff-card:focus-visible { outline-offset: 4px; }
.staff-card__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bhh-sky-tint); }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1s var(--ease-out); }
.staff-card__photo::after { /* navy duotone lift on hover — opacity only */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38, 34, 98, 0) 55%, rgba(38, 34, 98, 0.35) 100%);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
}
.staff-card:hover .staff-card__photo img { transform: scale(1.04); }
.staff-card:hover .staff-card__photo::after { opacity: 1; }
.staff-card__name {
  display: block;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--agency-primary);
}
.staff-card__role { display: block; padding: 2px var(--space-4) 0; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.staff-card__more { min-height: 0; margin: auto var(--space-4) 0; padding-top: var(--space-3); font-size: 15px; }
@media (min-width: 1200px) {
  .staff-card__name { padding: var(--space-5) var(--space-6) 0; font-size: 18px; }
  .staff-card__role { padding: 4px var(--space-6) 0; font-size: 15px; }
  .staff-card__more { margin-inline: var(--space-6); font-size: 16px; }
}

.board { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-16); }
@media (min-width: 1200px) { .board { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-24); } }
.board__group { padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); }
@media (min-width: 1200px) { .board__group { padding: var(--space-12); } }
.board__group--directors { background: var(--agency-primary); color: #fff; box-shadow: var(--shadow-floating); }
.board__group--directors .team-heading { color: #fff; }
.board__group--honorary { background: #fff; border: 1px solid var(--border-color); box-shadow: var(--shadow-elevated); }
.board__group--honorary .team-heading { margin-bottom: var(--space-2); }
.board__note { margin-bottom: var(--space-6); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--agency-accent); }
.board__names { display: grid; grid-template-columns: 1fr; column-gap: var(--space-8); }
@media (min-width: 480px) { .board__group--directors .board__names { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .board__group--directors .board__names { grid-template-columns: repeat(3, 1fr); } }
.board__names li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}
.board__group--honorary .board__names li { border-color: var(--border-color); color: var(--agency-primary); }
@media (min-width: 1200px) { .board__names li { font-size: 17px; } }

/* Bio dialog */
.bio {
  width: min(960px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--space-6));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(17, 13, 73, 0.35);
  color: var(--text-body);
}
.bio::backdrop { background: rgba(17, 13, 73, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bio[open] { animation: bio-in var(--dur-med) var(--ease-spring); }
@keyframes bio-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.bio__inner { position: relative; display: grid; grid-template-columns: 1fr; max-height: inherit; overflow-y: auto; }
@media (min-width: 768px) { .bio__inner { grid-template-columns: 300px 1fr; overflow: hidden; } }
.bio__photo { position: relative; aspect-ratio: 4 / 3; background: var(--bhh-sky-tint); }
@media (min-width: 768px) { .bio__photo { aspect-ratio: auto; } }
.bio__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bio__body { padding: var(--space-8) var(--space-6); }
@media (min-width: 768px) { .bio__body { max-height: calc(100dvh - 2 * var(--space-6)); overflow-y: auto; padding: var(--space-12) var(--space-10); } }
.bio__name { text-transform: uppercase; padding-right: var(--space-10); font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: var(--agency-primary); }
.bio__role { padding-top: var(--space-1); font-weight: 600; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--agency-accent); }
.bio__text { padding-top: var(--space-6); font-size: 16px; line-height: 1.75; }
.bio__text p + p { margin-top: var(--space-4); }
.bio__contact { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-color); font-weight: 600; font-size: 15px; line-height: 1.6; color: var(--agency-primary); }
.bio__contact a { color: var(--agency-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color var(--dur-fast) linear; overflow-wrap: anywhere; }
.bio__contact a:hover { text-decoration-color: currentColor; }
.bio__close {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--agency-primary);
  box-shadow: var(--shadow-elevated);
  transition: transform var(--dur-med) var(--ease-spring);
}
.bio__close:hover { transform: rotate(90deg); }
.bio__close:active { transform: scale(0.92); }
body.bio-open { overflow: hidden; }

/* Impact statistics (→ bhh-impact-stats) */
.impact-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat;
  color: #fff;
}
/* soft red + sky glows behind the tiles */
.impact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 12% 18%, rgba(238, 28, 35, 0.22), transparent 70%),
    radial-gradient(45% 55% at 92% 88%, rgba(144, 191, 221, 0.2), transparent 70%);
  pointer-events: none;
}
.impact-band .team-heading--light { display: flex; align-items: center; gap: var(--space-4); }
.impact-band .team-heading--light::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent); }

.figures { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure--lead { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .figures { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
  .figure { grid-column: span 5; }
  .figure--lead { grid-column: 1 / span 7; grid-row: span 2; }
  .figures > .figure:nth-child(n + 4) { grid-column: span 6; }
}

.figure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 60%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px rgba(10, 8, 40, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (min-width: 1200px) { .figure { padding: var(--space-8); } }
.figure--lead {
  justify-content: center;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    linear-gradient(145deg, var(--agency-accent) 0%, color-mix(in srgb, var(--agency-accent) 78%, var(--agency-primary)) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 60px rgba(90, 8, 20, 0.35), 0 8px 18px rgba(10, 8, 40, 0.2);
}
@media (min-width: 1200px) { .figure--lead { padding: var(--space-12); } }
/* concentric rings, top right of the lead tile */
.figure--lead::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140px;
  right: -140px;
  width: 380px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 48px rgba(255, 255, 255, 0.04), 0 0 0 49px rgba(255, 255, 255, 0.12), 0 0 0 110px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.figure__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
/* label pinned top; year + number sit at the bottom when a tile stretches to its row */
/* label + year pill share the top row; the number sits at the bottom when a tile stretches to its row */
.figure__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
.figure:not(.figure--lead) > .figure__number,
.figure--pair > .figure__split { margin-top: auto; }
@media (max-width: 479px) { .figure__label { letter-spacing: 1.1px; } .figure__head { column-gap: var(--space-2); } .figure__year { padding: 4px 10px 3px; font-size: 12px; } }
.figure__label::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 3px; background: var(--agency-accent); }
.figure--lead .figure__label { color: #fff; }
.figure--lead .figure__label::before { background: #fff; }
@media (min-width: 1200px) { .figure--lead .figure__label { font-size: 15px; } }

.figure__year {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px 4px;
  border: 1px solid rgba(144, 191, 221, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(144, 191, 221, 0.12);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--agency-secondary);
  font-variant-numeric: tabular-nums;
}
.figure--lead .figure__year { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.14); color: #fff; }
@media (min-width: 1200px) { .figure--lead .figure__head { margin-bottom: var(--space-6); } .figure--lead .figure__year { font-size: 15px; padding: 7px 16px 6px; } }

.figure__number {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
@media (min-width: 1200px) { .figure__number { font-size: 56px; } }
.figure--lead .figure__number { font-size: clamp(48px, 13vw, 64px); text-shadow: 0 6px 30px rgba(90, 8, 20, 0.35); }
@media (min-width: 768px) { .figure--lead .figure__number { font-size: 88px; } }
@media (min-width: 1200px) { .figure--lead .figure__number { font-size: 108px; margin-top: var(--space-4); } }

/* The year picker above the tiles — one choice drives every figure (Bradley, 2026-10-02) */
.figures__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.figures__year { display: flex; align-items: center; gap: var(--space-3); }
.figures__year label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.figures__year select {
  min-height: 44px;
  padding: 0 var(--space-8) 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12) url("../img/icon-chevron-white.svg") no-repeat right var(--space-4) center;
  background-size: 12px 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.figures__year select:hover { background-color: rgba(255, 255, 255, 0.2); }
.figures__year select:focus-visible { outline-color: #fff; }
.figures__year select option { color: var(--text-primary); background: #fff; }

/* Two numbers side by side, split by a hairline */
.figure__split { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; margin-top: var(--space-3); }
.figure__split > span { display: flex; flex-direction: column; }
.figure__split > span + span { padding-left: var(--space-5); border-left: 1px solid rgba(255, 255, 255, 0.18); }
.figure__split > span:first-child { padding-right: var(--space-5); }
.figure__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(144, 191, 221, 0.24), rgba(144, 191, 221, 0.08));
  border: 1px solid rgba(144, 191, 221, 0.35);
  color: var(--agency-secondary);
}
.figure__icon svg { width: 28px; height: 28px; }
@media (min-width: 1200px) { .figure__icon { width: 60px; height: 60px; border-radius: var(--radius-lg); } .figure__icon svg { width: 34px; height: 34px; } }
.figure__caption { display: block; padding-top: var(--space-2); font-weight: 600; font-size: 13px; line-height: 1.35; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }

/* Annual report + documents (→ bhh-documents) */
.report {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--section-y);
}
.report + .report { margin-top: var(--space-10); }
@media (min-width: 768px) { .report { grid-template-columns: 260px 1fr; gap: var(--space-10); } }
@media (min-width: 1200px) { .report { grid-template-columns: 340px 1fr; gap: 72px; } }
.report__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 8.5 / 11;
  max-width: 300px;
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--agency-primary) url("../img/testimonials-bg.webp") 30% center / cover no-repeat;
  color: #fff;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.2) inset, 18px 24px 50px rgba(17, 13, 73, 0.28);
  isolation: isolate;
}
.report__cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(170deg, rgba(38, 34, 98, 0.95) 35%, rgba(38, 34, 98, 0.35) 100%); }
/* a report with no PDF yet: the same tile, but nothing to click (Bradley — links aren't ready) */
.report__cover--empty { cursor: default; }
.report__cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--agency-accent); }
.report__year { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 0.9; letter-spacing: -0.04em; color: #fff; }
@media (min-width: 1200px) { .report__year { font-size: 96px; } }
.report__meta { align-self: flex-start; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--agency-accent); font-weight: 700; font-size: 13px; letter-spacing: 1px; }
.report__cover:hover { transform: translateY(-6px) rotate(-1deg); }
.report__cover:focus-visible { outline-offset: 6px; }
.report__title { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--agency-primary); }
@media (min-width: 1200px) { .report__title { font-size: 44px; } }
.report__text { padding-top: var(--space-4); font-size: 17px; line-height: 1.75; color: var(--text-body); }

/* Earlier reports read as a document row, like the statements below them (Bradley) */
.report-earlier { margin-top: var(--space-6); }
.report__action { margin-top: var(--space-6); }
.doc-link--flat { cursor: default; }
@media (min-width: 1200px) { .report__text { font-size: 19px; } }

.documents { margin-top: var(--section-y); }
/* one column at every width, so every document row runs the section's full width (Bradley) */
.documents__groups { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 1200px) { .documents__groups { gap: var(--space-10); } }
.doc-group__title { margin-bottom: var(--space-3); font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.doc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.doc-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) linear;
}
.doc-link:hover { transform: translateX(4px); border-color: var(--border-color-strong); box-shadow: var(--shadow-elevated); }
.doc-link:active { transform: translateX(2px) scale(0.99); }
.doc-link__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bhh-red-tint);
  font-weight: 700; font-size: 11px; letter-spacing: 0.5px;
  color: var(--agency-accent);
}
.doc-link__label { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--agency-primary); }
@media (min-width: 1200px) { .doc-link__label { font-size: 16px; } }
.doc-link__meta { font-weight: 600; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }

/* ----------------------------------------------------------------------------
   20. PROGRAM PAGES — one template for every career training + apprenticeship page
       (→ bhh-theme/single-bhh_program.php, data: bhh_program fields)
   ------------------------------------------------------------------------- */
.prog-icon { flex: none; width: 20px; height: 20px; }
.prog-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--agency-primary);
}
@media (min-width: 1200px) { .prog-h2 { font-size: 40px; } }

/* Hero: photo + navy panel (split on desktop so long program names stay readable) */
.prog-hero { display: grid; grid-template-columns: 1fr; background: var(--agency-primary); color: #fff; }
.prog-hero__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.prog-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prog-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38, 34, 98, 0) 55%, rgba(38, 34, 98, 0.85) 100%);
}
.prog-hero__content {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--gutter) var(--space-12);
  background: var(--agency-primary) url("../img/testimonials-bg.webp") 20% center / cover no-repeat;
}
.prog-hero__content::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: -1;
  width: 72px; height: 6px; background: var(--agency-accent);
}
@media (min-width: 768px) {
  .prog-hero__media { aspect-ratio: 21 / 9; }
  .prog-hero__content { padding: var(--space-12) var(--space-12) var(--space-16); }
}
@media (min-width: 1200px) {
  .prog-hero { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 560px; }
  .prog-hero__media { order: 2; aspect-ratio: auto; }
  .prog-hero__media::after { background: linear-gradient(90deg, rgba(38, 34, 98, 0.55) 0%, rgba(38, 34, 98, 0) 35%); }
  .prog-hero__content { padding: var(--space-16) 72px var(--space-16) max(var(--gutter), calc((100vw - 1192px) / 2)); }
  .prog-hero__content::before { left: max(var(--gutter), calc((100vw - 1192px) / 2)); width: 96px; }
}

.prog-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: 14px; font-weight: 600; }
.prog-crumbs li { display: flex; align-items: center; gap: var(--space-2); }
.prog-crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, 0.4); }
.prog-crumbs a { color: rgba(255, 255, 255, 0.78); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) linear, color var(--dur-fast) linear; }
.prog-crumbs a:hover { color: #fff; text-decoration-color: currentColor; }
.prog-crumbs a:active { opacity: 0.7; }

.prog-hero__type {
  display: inline-flex;
  margin-top: var(--space-6);
  padding: 6px 14px 5px;
  border-radius: var(--radius-pill);
  background: var(--agency-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.prog--apprenticeship .prog-hero__type { background: var(--agency-secondary); color: var(--agency-primary); }
.prog-hero__title {
  margin-top: var(--space-4);
  max-width: 760px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) { .prog-hero__title { font-size: 48px; } }
@media (min-width: 1200px) { .prog-hero__title { font-size: 58px; } }
.prog-hero__cta { margin-top: var(--space-8); }
.js .prog-hero__content > * { opacity: 0; transform: translateY(18px); animation: rise var(--dur-slow) var(--ease-out) forwards; }
.js .prog-hero__content > :nth-child(2) { animation-delay: 60ms; }
.js .prog-hero__content > :nth-child(3) { animation-delay: 120ms; }
.js .prog-hero__content > :nth-child(4) { animation-delay: 180ms; }
.is-static .prog-hero__content > * { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Overview + school partner card */
.prog-overview { padding-block: var(--section-y); background: #fff; }
.prog-overview__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 1200px) { .prog-overview__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 88px; align-items: start; } }
.prog-overview__body { font-size: 17px; line-height: 1.75; color: var(--text-body); }
@media (min-width: 1200px) { .prog-overview__body { font-size: 18px; } }
.prog-overview__body > * + * { margin-top: var(--space-5); }
.prog-lead { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.55; letter-spacing: -0.01em; color: var(--agency-primary); }
@media (min-width: 1200px) { .prog-lead { font-size: 23px; } }
.prog-checks { display: grid; gap: var(--space-3); }
.prog-checks li { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; color: var(--agency-primary); }
.prog-checks .prog-icon { margin-top: 4px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bhh-red-tint); color: var(--agency-accent); }

.prog-callout { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); font-size: 16px; line-height: 1.6; }
.prog-callout .prog-icon { width: 24px; height: 24px; margin-top: 1px; }
.prog-callout p + p { margin-top: var(--space-3); }
/* ===== Notes: three jobs, three looks (Bradley, 2026-09-21) — markup from note() / bhh_note() ==========
   contact → the sentence, then email / phone as buttons       jump → the whole sentence is an arrow link row
   fine    → quiet fine print                                  closure → the red ⚠ line (same as a location's dates) */
/* contact and link notes read as highlighted blocks, centred on a sky tint, so they carry more
   weight than the copy around them (Bradley, 2026-10-05 — applied sitewide) */
.note-reach {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bhh-sky-tint);
  text-align: center;
}
.note-reach__text { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--agency-primary); }
@media (min-width: 1200px) { .note-reach__text { font-size: 19px; } }
.note-reach__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.note-reach__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  max-width: 100%;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--bhh-sky-tint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--agency-primary);
  overflow-wrap: anywhere;
  transition: background var(--dur-fast) linear, transform var(--dur-med) var(--ease-spring);
}
.note-reach__btn .prog-icon { flex: none; width: 20px; height: 20px; color: var(--agency-accent); }
.note-reach__btn:hover { background: color-mix(in srgb, var(--agency-secondary) 45%, #fff); transform: translateY(-2px); }
.note-reach__btn:active { transform: scale(0.98); }
.note-reach__btn:focus-visible { outline: 3px solid var(--agency-accent); outline-offset: 3px; }
/* on the light-blue bands the pill would vanish into the background — white there */
:is(.fa-cards, .fa-tint, .feat--tint, .ev-cols, .ev-tiers, .prog-reqs, .fa-locs, .vol-loc--tint, .ae-annual) :is(.note-reach, .note-jump) { background: #fff; }
:is(.fa-cards, .fa-tint, .feat--tint, .ev-cols, .ev-tiers, .prog-reqs, .fa-locs, .vol-loc--tint, .ae-annual) .note-reach__btn { background: #fff; box-shadow: 0 1px 2px rgba(38, 34, 98, 0.06), 0 0 0 1px var(--border-color); }
:is(.fa-cards, .fa-tint, .feat--tint, .ev-cols, .ev-tiers, .prog-reqs, .fa-locs, .vol-loc--tint, .ae-annual) .note-reach__btn:hover { background: var(--bhh-sky-tint); }
.note-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bhh-sky-tint);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--agency-primary);
  transition: color var(--dur-fast) linear;
}
.note-jump:hover { color: var(--agency-accent); }
.note-jump:active { opacity: 0.8; }
.note-jump:focus-visible { outline: 3px solid var(--agency-accent); outline-offset: 4px; }
.note-jump .icon-arrow { flex: none; transition: transform var(--dur-med) var(--ease-spring); }
.note-jump:hover .icon-arrow { transform: translateX(4px); }
.note-jump + .note-jump { margin-top: var(--space-3); }
.note-fine { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-6); font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.note-fine .prog-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--agency-secondary); }
.note-closure { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-6); font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.55; color: var(--agency-accent); }
.note-closure .prog-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.note-closure__rest { font-family: var(--font-body); font-weight: 400; color: var(--text-body); }
/* first thing in its own section: no gap above */
.fa-note .bhh-container > :first-child, .fa-locs__note > :first-child { margin-top: 0; }
.prog-reqs .note-fine { margin: 0 0 var(--space-6); }
.prog-callout--mandatory {
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--agency-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  box-shadow: var(--shadow-floating);
}
.prog-callout--mandatory .prog-icon { color: var(--agency-accent); width: 28px; height: 28px; }
@media (min-width: 1200px) { .prog-callout--mandatory { margin-top: var(--space-12); padding: var(--space-8) var(--space-10); font-size: 21px; } }

.prog-aside {
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 1200px) { .prog-aside { position: sticky; top: calc(var(--header-visible, 96px) + var(--space-8)); padding: var(--space-8); } }
.prog-aside__label { font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.prog-aside .bhh-btn { margin-top: var(--space-6); }
/* Partner logo: framed, capped height — present but never louder than the content */
.prog-logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border-color); }
.prog-logo__img { width: auto; height: auto; max-width: 100%; max-height: 96px; object-fit: contain; }
.prog-logo__placeholder { width: 180px; max-width: 100%; border-radius: var(--radius-sm); }

/* Requirements */
.prog-reqs { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.prog-reqs--white { background: #fff; border-block: 0; }
.prog-reqs .prog-h2 { margin-bottom: var(--space-8); }
.prog-reqs__list { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 768px) { .prog-reqs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1200px) { .prog-reqs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prog-reqs__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: var(--agency-primary);
}
.prog-reqs__list .prog-icon { width: 24px; height: 24px; padding: 4px; margin-top: -1px; border-radius: 50%; background: var(--agency-accent); color: #fff; }

/* Phases: editorial list — numeral + hairline rules, no boxes (phase lengths vary a lot between schools) */
.prog-phases { padding-block: var(--section-y); background: #fff; }
.prog-timeline { max-width: 1040px; margin-inline: auto; border-top: 1px solid var(--border-color); }
.prog-step { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-8); border-bottom: 1px solid var(--border-color); }
@media (min-width: 900px) { .prog-step { grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12); } }
.prog-step__marker {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--step-color, var(--agency-primary));
}
@media (min-width: 900px) { .prog-step__marker { font-size: 96px; } }
.prog-step--red { --step-color: var(--agency-accent); }
.prog-step--sky { --step-color: var(--bhh-blue); }
.prog-step--navy { --step-color: var(--agency-primary); }
.prog-step__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; color: var(--agency-primary); }
@media (min-width: 1200px) { .prog-step__title { font-size: 28px; } }
.prog-step__eyebrow { display: block; margin-bottom: var(--space-2); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--step-color, var(--agency-primary)); }
.prog-step__title:has(> .prog-step__eyebrow:only-child) .prog-step__eyebrow { margin-bottom: 0; }
.prog-step__meta { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-color); }
.prog-step__meta li { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.3; color: var(--text-body); }
.prog-step__meta strong { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.prog-step__schedule { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.prog-step__schedule li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text-body); }
.prog-step__schedule .prog-icon { margin-top: 2px; color: var(--step-color, var(--agency-accent)); }
.prog-step__text { margin-top: var(--space-4); font-size: 16px; line-height: 1.75; color: var(--text-body); }
@media (min-width: 1200px) { .prog-step__text { font-size: 17px; } }
.prog-step__text > * + * { margin-top: var(--space-4); }
/* Either/or choices: two columns split by a rule, not boxes */
.prog-options { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 900px) { .prog-options { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-8); align-items: stretch; } }
.prog-option { font-size: 15px; line-height: 1.7; color: var(--text-body); }
@media (max-width: 899px) { .prog-option + .prog-option-or + .prog-option { padding-top: var(--space-5); border-top: 1px solid var(--border-color); } }
.prog-option-or { display: grid; place-items: center; margin: 0 !important; }
@media (min-width: 900px) { .prog-option-or { position: relative; } .prog-option-or::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border-color); } }
.prog-option-or span { position: relative; padding: var(--space-2) 0; background: #fff; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; color: var(--text-muted); }

/* Shared WD subpage pieces (ESOL, Conversation Café, Alumni Give Back) */
.prog-hero__subtitle { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.35; letter-spacing: -0.02em; color: var(--agency-secondary); text-wrap: balance; }
@media (min-width: 1200px) { .prog-hero__subtitle { font-size: 28px; } }
@media (max-width: 767px) { .prog-lead { font-size: 18px; } }
.prog-schedule { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.prog-schedule li { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; font-size: 16px; line-height: 1.45; color: var(--agency-primary); }
.prog-schedule .prog-icon { margin-top: 1px; color: var(--agency-accent); }
.prog-aside .note-fine { margin-top: var(--space-5); font-size: 14px; }
.cafe__form-head .note-fine { color: rgba(255, 255, 255, 0.82); }
.cafe__form-head .note-fine .prog-icon { color: var(--agency-secondary); }
.prog-reqs__split { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 1200px) { .prog-reqs__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: start; } }
.prog-reqs__intro { margin-bottom: var(--space-6); font-size: 18px; line-height: 1.7; color: var(--text-body); }
.prog-reqs__list.prog-reqs__list--2 { grid-template-columns: 1fr; }

.prog-overview.cafe { background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.cafe__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 1200px) { .cafe__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; } }
.cafe__info .prog-checks { margin-top: var(--space-5); }
.cafe__req-title { margin: var(--space-10) 0 var(--space-5); }
.cafe__form { overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-floating); scroll-margin-top: calc(var(--header-visible, 96px) + var(--space-6)); }
.cafe__form-head { position: relative; padding: var(--space-8) var(--space-6) var(--space-6); background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat; color: rgba(255, 255, 255, 0.88); font-size: 15px; line-height: 1.6; }
@media (min-width: 1200px) { .cafe__form-head { padding: var(--space-10) var(--space-12) var(--space-8); } }
.cafe__form-head p + p { margin-top: var(--space-2); }
.cafe__form-head [lang="es"] { font-style: italic; color: rgba(255, 255, 255, 0.72); }
.cafe__form-title { margin-bottom: var(--space-4); font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
@media (min-width: 1200px) { .cafe__form-title { font-size: 30px; } }
.cafe__form-note { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 14px; }
.cafe__fields.contact-form { padding-top: var(--space-8); }

.field select {
  width: 100%;
  min-height: 48.5px;
  padding: 12px 40px 12px 14px;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23262262' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font: 400 16px/1.4 var(--font-body);
  color: var(--text-body);
}
.field select:hover { border-color: var(--border-color-strong); }
.field select:focus-visible { outline: none; border-color: var(--agency-primary); box-shadow: 0 0 0 3px rgba(38, 34, 98, 0.18); }
.field label { overflow-wrap: anywhere; }

.donate-embed__card { max-width: calc(860px - 2 * var(--gutter)); margin: 0 auto; padding: var(--space-6); border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-floating); }
@media (min-width: 768px) { .donate-embed__card { padding: var(--space-10); } }

/* Employer partners (optional) */
.prog-employers { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.prog-employers__head { max-width: 720px; margin: 0 auto; text-align: center; }
.prog-employers__head p { margin-top: var(--space-4); font-size: 17px; line-height: 1.7; }
.prog-employers__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-8); }
@media (min-width: 900px) { .prog-employers__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
.prog-employers__logos li { display: grid; place-items: center; height: 120px; padding: var(--space-4); background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
@media (min-width: 1200px) { .prog-employers__logos li { height: 150px; padding: var(--space-6); } }
.prog-employers__logos img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Apply band: full-width red section, white button */
.prog-cta {
  padding-block: var(--section-y);
  background:
    radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, var(--agency-accent) 0%, color-mix(in srgb, var(--agency-accent) 82%, var(--agency-primary)) 100%);
  color: #fff;
}
.prog-cta .prog-hero__type { background: #fff; color: var(--agency-accent); }
.prog-cta .bhh-btn--red { --btn-bg: #fff; --btn-fg: var(--agency-accent); }
.prog-cta .bhh-btn--red::after { background: rgba(38, 34, 98, 0.08); }
/* Apprenticeships use the sky tint from the programs grid (navy type + button for contrast) */
.prog--apprenticeship .prog-cta {
  background:
    radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(135deg, var(--agency-secondary) 0%, color-mix(in srgb, var(--agency-secondary) 82%, var(--agency-primary)) 100%);
  color: var(--agency-primary);
}
.prog--apprenticeship .prog-cta .prog-hero__type { background: var(--agency-primary); color: #fff; }
.prog--apprenticeship .prog-cta .bhh-btn--red { --btn-bg: var(--agency-primary); --btn-fg: #fff; }
.prog--apprenticeship .prog-cta .bhh-btn--red::after { background: rgba(255, 255, 255, 0.14); }
.prog-cta__band { display: grid; gap: var(--space-6); }
.prog-cta__band .prog-hero__type { margin-top: 0; }
.prog-cta__title { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
@media (min-width: 768px) {
  .prog-cta__band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-10); }
  .prog-cta__title { font-size: 34px; }
}
@media (min-width: 1200px) { .prog-cta__title { font-size: 42px; } }

/* ----------------------------------------------------------------------------
   21. FOOD ASSISTANCE — hub + program pages (reuses the program-page system above)
   ------------------------------------------------------------------------- */
/* Readable single column for text-only pages */
.fa-prose { max-width: 860px; }
/* a block under a full-width row: the row's left edge, a reading measure */
.fa-prose--left > * { max-width: calc(860px - 2 * var(--gutter)); margin-inline: 0; }
.prog-overview.fa-tight { padding-top: 0; }
.prog-overview.fa-tint { background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.prog-overview.fa-tint.fa-tight { border-top: 0; }  /* continues the tinted band above it */
.prog-overview.fa-attached { margin-top: calc(-1 * var(--section-y) + var(--space-10)); }  /* sits with the block above */
.prog-overview:is(.fa-attached, .fa-tight) .prog-overview__body > :first-child { margin-top: 0; }  /* a note that opens a tight block sits flush, like .fa-note */
.prog-overview.fa-tight-bottom { padding-bottom: var(--space-10); }
.prog-overview.fa-tight-sm { padding-top: var(--space-10); }  /* close to the block above, but not flush */
.fa-prose .prog-overview__body > * + * { margin-top: var(--space-5); }
.fa-heading { margin-bottom: var(--space-5); }
/* Text links inside paragraph copy (anywhere on the site): red, underline on hover.
   Only plain links (no class) — card links, buttons, arrow links, PDF rows, etc. keep their own styles — and not the
   ones that sit on their own surface: breadcrumbs, the Let's Talk contact pills, share icons. Nav/footer are outside <main>. */
main :is(p, li, dd) a:not([class]):not(:is(.prog-crumbs, .contact-card, .ev-share, .bio__contact) a) {
  color: var(--agency-accent);
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-fast) linear;
}
main :is(p, li, dd) a:not([class]):not(:is(.prog-crumbs, .contact-card, .ev-share, .bio__contact) a):hover { text-decoration-color: currentColor; }
main :is(p, li, dd) a:not([class]):not(:is(.prog-crumbs, .contact-card, .ev-share, .bio__contact) a):active { opacity: 0.7; }


/* Hub: four program cards — two across from tablet so the fourth never sits alone on its own row */
@media (min-width: 768px) { .card-grid--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1200px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card-grid--4 .involve-card__action { margin-top: auto; padding-top: var(--space-6); }
/* Accent card: the whole card is red (used for the primary action in a card row) */
.involve-card--accent { background: var(--agency-accent); }
.involve-card--accent .involve-card__title,
.involve-card--accent .involve-card__text { color: #fff; }
.involve-card--accent .involve-card__text { opacity: 0.92; }
.fa-cards { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }

/* Locations */
.fa-locs { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.fa-locs__list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .fa-locs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1200px) { .fa-locs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.fa-loc {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 1200px) { .fa-loc { padding: var(--space-8); } }
.fa-loc__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; color: var(--agency-primary); }
@media (min-width: 1200px) { .fa-loc__name { font-size: 23px; } }
/* closure dates under a location's name — red so they're caught at a glance */
.fa-loc__closed { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: 0.04em; color: var(--agency-accent); }
.fa-loc__closed .prog-icon { flex: none; width: 18px; height: 18px; }
.fa-loc__closed .nowrap { white-space: nowrap; }
.fa-loc__label { display: block; margin-top: var(--space-4); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.fa-loc__address { font-size: 16px; line-height: 1.55; color: var(--text-body); }
.fa-loc__sched { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-color); }
.fa-loc__sched-label { font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; color: var(--agency-primary); }
.fa-loc__sched ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.fa-loc__sched li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.fa-loc__sched .prog-icon { margin-top: 2px; color: var(--agency-accent); }
.fa-loc__note { margin-top: var(--space-4); font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.fa-loc__map { margin-top: auto; padding-top: var(--space-6); font-weight: 600; }
.fa-locs__note { margin-top: var(--space-8); }

/* Hot Meal sponsors */
.fa-sponsors { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.fa-sponsors__list { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 640px) { .fa-sponsors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fa-sponsors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.fa-sponsors__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.fa-sponsor__day { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.fa-sponsor__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--agency-primary); }

/* KidsPack logo + video */
.fa-logo { display: grid; place-items: center; padding: var(--space-8); }
.fa-logo img { width: 100%; max-width: 320px; height: auto; }
.fa-video { padding-bottom: var(--section-y); background: #fff; }
.fa-video__frame { position: relative; max-width: 960px; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-floating); background: var(--agency-primary); }
.fa-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fa-video.fa-video--band { padding-block: var(--section-y); background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat; }
.fa-video.fa-video--band .fa-video__frame { box-shadow: 0 30px 70px rgba(10, 8, 40, 0.45); }
.fa-video--wide .fa-video__frame { max-width: none; }   /* same width as the content above it */

/* One-page Food hub (client, 2026-09-21): each program is a photo + text row reached by the jump links. */
.fa-intro { padding-bottom: var(--space-10); }
.feat[id] { scroll-margin-top: calc(var(--section-nav-h) + var(--header-visible) - 96px); }
/* links to a program's subpages, under its text */
.feat__links { display: grid; gap: 0; margin-top: var(--space-6); border-top: 1px solid var(--border-color); }
.feat__links li { border-bottom: 1px solid var(--border-color); }
.feat__links .link-arrow {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--agency-primary);
  transition: color var(--dur-fast) linear;
}
.feat__links .link-arrow:hover { color: var(--agency-accent); }
.feat__links .link-arrow { padding-block: var(--space-3); }
.feat__link-copy { display: grid; gap: 2px; }
.feat__link-text { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.feat__links .link-arrow:focus-visible { outline-offset: 4px; }
/* a logo (KidsPack) sits whole on a white panel instead of being cropped like a photo */
.feat__media--logo { display: grid; place-items: center; background: #fff; }
/* doubled class: must outrank .feat__media img (cover) in §22, which comes later */
.feat__media.feat__media--logo img { width: 78%; height: 78%; object-fit: contain; }

/* Video under the photo (KidsPack) — a poster that opens the shared lightbox.
   The media column becomes a stack so the player sits directly under the logo panel. */
.feat__mediacol { display: grid; gap: var(--space-5); align-self: start; }
@media (min-width: 900px) {
  .feat--flip .feat__mediacol { order: 2; }
  /* the flip rule above targets .feat__media for the outer grid; inside the
     stack it would push the photo below the video, so reset it here */
  .feat .feat__mediacol .feat__media { order: 0; }
}
.feat__video-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--agency-primary);
  box-shadow: var(--shadow-floating);
  cursor: pointer;
}
.feat__video-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-spring); }
/* navy wash, so the play badge and caption stay legible over any frame */
.feat__video-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(38, 34, 98, 0.78), rgba(38, 34, 98, 0.10) 58%, rgba(38, 34, 98, 0.02));
}
.feat__video-play {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--agency-accent);
  box-shadow: 0 10px 28px rgba(38, 34, 98, 0.45);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-med) var(--ease-spring);
}
.feat__video-play svg { width: 30px; height: 30px; margin-left: 2px; fill: #fff; }
.feat__video-label {
  position: absolute; z-index: 1;
  right: var(--space-5); bottom: var(--space-4); left: var(--space-5);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  text-align: left;
  color: #fff;
}
@media (hover: hover) {
  .feat__video-btn:hover .feat__video-thumb { transform: scale(1.04); }
  .feat__video-btn:hover .feat__video-play { transform: translate(-50%, -50%) scale(1.09); }
}
.feat__video-btn:focus-visible { outline: 3px solid var(--agency-accent); outline-offset: 3px; }
.feat__video-btn:active .feat__video-play { transform: translate(-50%, -50%) scale(0.95); }

/* the video lightbox reuses .lightbox for its backdrop, animation and scroll lock */
.lightbox__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: #000; box-shadow: 0 30px 70px rgba(10, 8, 40, 0.5); }
.lightbox__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .feat__video-thumb, .feat__video-play { transition: none; }
}

/* Artwork beside the video (KidsPack: Packy) */
.fa-video__pair { display: grid; gap: var(--space-8); align-items: center; max-width: 1140px; margin-inline: auto; }
@media (min-width: 900px) { .fa-video__pair { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-10); } }
.fa-video__pair .fa-video__frame { max-width: none; margin: 0; }
.fa-video__aside { justify-self: center; width: 160px; }
@media (min-width: 900px) { .fa-video__aside { width: 100%; } }
.fa-video__aside img { display: block; width: 100%; height: auto; }
.fa-video__aside--placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: #333;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}
.fa-links { padding-bottom: var(--section-y); background: #fff; }
.fa-note { padding-bottom: var(--section-y); background: #fff; }
/* a note that belongs with the text above it */
.fa-note--tight { margin-top: calc(-1 * var(--section-y) + var(--space-8)); }
/* a note that introduces the block below it (KidsPack donation: the billing note sits right on the form) */
.fa-note--lead { padding-top: var(--section-y); padding-bottom: var(--space-8); }
.fa-note--lead .bhh-container > * { margin-top: 0; }
.fa-note--lead + section { padding-top: 0; }
/* …and the form it leads into takes the note's width (the .fa-prose column minus its gutters), so the edges line up */
.vol .fa-note { padding-bottom: var(--space-10); }
.donate-embed__card--wide { max-width: 1100px; }
.fa-partners__placeholder { padding-top: var(--space-8); text-align: center; font-weight: 600; color: var(--text-muted); }

/* ----------------------------------------------------------------------------
   22. VOLUNTEER — sign-up CTA, location accordions, group form
   ------------------------------------------------------------------------- */
.vol-cta { padding: var(--section-y) 0 0; background: #fff; text-align: center; }
.vol-cards__note { margin-top: var(--space-10); }
.vol-cta .bhh-btn { display: inline-flex; }
/* placement "under the text above": sits at the text's left edge instead of a centered band of its own */
.vol-cta.vol-cta--attached { margin-top: calc(-1 * var(--section-y) + var(--space-8)); padding: 0 0 var(--section-y); text-align: left; }

/* Location blocks */
.vol-loc { padding-block: var(--space-14, 56px); background: #fff; }
@media (min-width: 1200px) { .vol-loc { padding-block: var(--space-16); } }
.vol-loc--tint { background: var(--surface-secondary); border-block: 1px solid var(--border-color); }
.vol-loc__head { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-6); align-items: center; }
@media (min-width: 768px) { .vol-loc__head { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); } }
.vol-loc__head:not(:has(.vol-loc__media)) { grid-template-columns: 1fr; }
@media (min-width: 1200px) { .vol-loc__head { grid-template-columns: 280px minmax(0, 1fr); } }
.vol-loc__media { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); aspect-ratio: 4 / 3; }
.vol-loc__media img { width: 100%; height: 100%; object-fit: cover; }
.vol-loc__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.vol-loc__meta li { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--agency-primary); }
.vol-loc__address { margin-top: var(--space-3); font-size: 16px; line-height: 1.6; color: var(--text-body); }

/* Accordion (native <details>, so it works without JS and prints open) */
.acc { display: grid; gap: var(--space-3); }
.acc__item { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.acc__item[open] { border-color: var(--border-color-strong); box-shadow: var(--shadow-elevated); }
.acc__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--agency-primary);
  transition: background var(--dur-fast) linear;
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary:hover { background: var(--bhh-sky-tint); }
.acc__summary:focus-visible { outline: 3px solid var(--agency-accent); outline-offset: -3px; }
.acc__heads { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.acc__title { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 768px) { .acc__title { font-size: 19px; } }
.acc__subtitle { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.acc__chevron { flex: none; width: 20px; height: 20px; color: var(--agency-accent); transition: transform var(--dur-med) var(--ease-spring); }
.acc__item[open] .acc__chevron { transform: rotate(180deg); }
.acc__body { padding: 0 var(--space-6) var(--space-6); font-size: 16px; line-height: 1.7; color: var(--text-body); }
@media (min-width: 1200px) { .acc__body { padding-inline: var(--space-8); } }
.acc__body > * + * { margin-top: var(--space-4); }
.acc__body p + .acc__label { margin-top: var(--space-5); }
.acc__label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; color: var(--agency-primary); }
.acc__label + .acc__list { margin-top: var(--space-3); }
.acc__list { display: grid; gap: var(--space-2); }
.acc__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.acc__list .prog-icon { flex: none; width: 20px; height: 20px; margin-top: 3px; padding: 3px; border-radius: 50%; background: var(--bhh-red-tint); color: var(--agency-accent); }
.acc__when { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; color: var(--agency-primary); }
.acc__when .prog-icon { flex: none; margin-top: 2px; color: var(--agency-accent); }
.js .acc__item[open] .acc__body { animation: accIn var(--dur-med) var(--ease-out); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Shared requirements card between location blocks */
.vol-rules { padding-block: var(--section-y); background: #fff; }
.vol-rules__card { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat; color: #fff; box-shadow: var(--shadow-floating); }
@media (min-width: 1200px) { .vol-rules__card { padding: var(--space-10) var(--space-12); } }
.vol-rules__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
@media (min-width: 1200px) { .vol-rules__title { font-size: 26px; } }
.vol-rules__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 768px) { .vol-rules__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.vol-rules__card .acc__label { color: rgba(255, 255, 255, 0.72); }
.vol-rules__card .acc__list li { color: #fff; }
.vol-rules__card .acc__list .prog-icon { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Full-width navy band variant (declared after the base so it wins) */
.vol-rules.vol-rules--full { padding-block: 0; background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat; color: #fff; }
.vol-rules.vol-rules--full .vol-rules__card { background: none; box-shadow: none; border-radius: 0; padding: var(--space-16) 0; }
@media (min-width: 1200px) { .vol-rules.vol-rules--full .vol-rules__card { padding-block: var(--space-24); } }

/* Feature row: photo one side, details the other (alternating) */
.feat { padding-block: var(--space-16); background: #fff; }
.feat--tint { background: var(--surface-secondary); border-block: 1px solid var(--border-color); }
.feat__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .feat__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); } }
@media (min-width: 1200px) { .feat__grid { gap: 72px; } }
/* photo on the right only when the columns sit side by side; stacked, every row leads with its photo */
@media (min-width: 900px) { .feat--flip .feat__media { order: 2; } }
/* Full-bleed variant: the photo runs to the page edge (used to break up contained sections) */
@media (min-width: 900px) {
  /* the photo column runs to the page edge; the text column keeps the container gutter */
  .feat--bleed .feat__grid { max-width: none; width: 100%; padding-inline: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: stretch; }
  .feat--bleed .feat__media { aspect-ratio: auto; min-height: 460px; border-radius: 0; box-shadow: none; }
  .feat--bleed .feat__body { padding: var(--space-16) max(var(--gutter), calc((100% - 1192px) / 2)) var(--space-16) 0; }
  .feat--bleed.feat--flip .feat__body { padding: var(--space-16) 0 var(--space-16) max(var(--gutter), calc((100% - 1192px) / 2)); }
}
.feat--bleed { padding-block: 0; }
@media (max-width: 899px) { .feat--bleed { padding-block: var(--space-16); } }
.feat__media { overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-floating); aspect-ratio: 4 / 3; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; }
.feat__body { font-size: 16px; line-height: 1.7; color: var(--text-body); }
.feat__body > * + * { margin-top: var(--space-4); }
.feat__body p + .acc__label { margin-top: var(--space-5); }
.feat__title { margin-bottom: var(--space-5); }

/* Stacked form (single column) */
.cafe--stacked .cafe__info { max-width: 760px; margin-inline: auto; text-align: center; }
.cafe--stacked .cafe__form { max-width: 760px; margin: var(--space-8) auto 0; }

/* Group opportunities */
.vol-acc { padding-block: var(--section-y); background: #fff; }
.vol-acc.vol-loc--tint { background: var(--surface-secondary); border-block: 1px solid var(--border-color); }  /* Expandable List background "Light blue tint" */
.vol--group-opportunities .cafe__form-head { padding-bottom: var(--space-8); }
.field--full { grid-column: 1 / -1; }

/* ----------------------------------------------------------------------------
   24. EVENTS (/events/* — was /annual-events/)
   Event cards, stat band, sponsor tiers, numbered steps, ticket highlight,
   sponsorship prices, signage downloads, gallery placeholder.
   ------------------------------------------------------------------------- */

/* Two stacked card rows read as one grid */
.fa-cards--tight { padding-top: 0; border-top: 0; }
.fa-cards:has(+ .fa-cards--tight) { padding-bottom: var(--space-6); }
.ev-card__date,
.ev-cards .involve-card__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--agency-accent);
}
.ev--annual-events .involve-card__title { font-size: 22px; line-height: 30px; }
/* the date is a label, not a blurb — no blurb min-height, so the event description sits close under it */
.ev-card__date { min-height: 0; }

/* A ticked list that carries no heading of its own */
.prog-reqs--tight .prog-reqs__list { margin-top: 0; }

/* Button rows shared by the event pages */
.ev-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* When / Where pairs under the intro */
.ev-detail { margin-top: var(--space-6); }
.ev-detail .acc__label { margin-bottom: var(--space-1); }

/* --- Stat band (Thanksgiving Box Brigade) --------------------------------- */
.ev-stats .figures--3 { gap: var(--space-6); }
@media (min-width: 768px) { .ev-stats .figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .ev-stats .figures--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ev-stats .figures--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ev-stats .figures--4 > .figure { grid-column: auto; } }
@media (min-width: 1200px) {
  .ev-stats .figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .ev-stats .figures--3 > .figure { grid-column: auto; }
}
/* Without the cards the band needs less height to feel balanced. */
.ev-stats { padding-block: var(--space-16); }

/* No glass card here — the numbers sit straight on the band, split by hairlines. */
.ev-stats .figure {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (min-width: 768px) {
  .ev-stats .figure { padding-inline: var(--space-8); }
  .ev-stats .figure + .figure { border-left: 1px solid rgba(255, 255, 255, 0.24); }
  .ev-stats .figures--3 > .figure:first-child { padding-left: 0; }
}
.ev-stats .figure__head { margin-bottom: var(--space-3); }
.ev-stats .figure__number { margin-top: auto; }
/* Red variant — same gradient as the other red bands (Apply, Share). The tiles stay
   translucent white; only the label dash has to flip off red. */
.ev-stats--red {
  background:
    radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, var(--agency-accent) 0%, color-mix(in srgb, var(--agency-accent) 82%, var(--agency-primary)) 100%);
}
.ev-stats--red::before { display: none; }
.ev-stats--red .figure__label { color: rgba(255, 255, 255, 0.9); }
.ev-stats--red .figure__label::before { background: #fff; }

/* --- Sponsor tiers (logo + name per giving level) ------------------------- */
.ev-sponsors { padding-block: var(--section-y); border-top: 1px solid var(--border-color); }
.ev-sponsors .prog-h2 { margin-bottom: var(--space-10); text-align: center; }
/* hairline grid: the gap shows the background through, so there are no boxes */
.ev-sponsors__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-color);
  border-block: 1px solid var(--border-color);
}
@media (min-width: 600px) { .ev-sponsors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ev-sponsors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev-sponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: #fff;
  text-align: center;
}
.ev-sponsor__tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--agency-accent);
}
.ev-sponsor__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 88px; }
.ev-sponsor__logo img { max-width: 210px; max-height: 88px; width: auto; height: auto; object-fit: contain; }
.ev-sponsor__logo--text span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--agency-primary);
}
.ev-sponsor__logo--text + .ev-sponsor__name { display: none; }
.ev-sponsor__name { font-weight: 600; font-size: 17px; color: var(--text-primary); }
.ev-sponsor__site {
  font-size: 14px;
  color: var(--agency-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s var(--ease-out);
}
.ev-sponsor__site:hover { text-decoration-color: currentColor; }

/* --- Numbered steps (Fill a Box) ------------------------------------------ */
.ev-steps { padding-block: var(--section-y); }
.ev-steps__list { display: grid; grid-template-columns: 1fr; gap: var(--space-10); counter-reset: step; }
@media (min-width: 900px) { .ev-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }
.ev-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--space-6); }
/* the rule above each step continues the row across the grid */
.ev-step::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--agency-secondary);
}
.ev-step:first-child::before { background: var(--agency-accent); }
.ev-step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--agency-secondary) 65%, #fff);
}
@media (min-width: 1200px) { .ev-step__n { font-size: 64px; } }
.ev-step__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--agency-primary);
}
.ev-step__text { margin-top: var(--space-3); color: var(--text-secondary); }
.ev-step__address { margin-top: var(--space-4); font-weight: 600; line-height: 1.6; color: var(--agency-primary); }
.ev-step .bhh-btn { margin-top: var(--space-6); }

/* --- Ticket highlight band (Tackle Hunger) -------------------------------- */
.ev-highlight {
  padding-block: var(--space-16);
  background: var(--agency-primary);
  color: #fff;
}
.ev-highlight__inner { text-align: center; }
.ev-highlight__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
}
.ev-highlight__text { margin-top: var(--space-4); font-size: 18px; color: rgba(255, 255, 255, 0.82); }
.ev-highlight__when {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.ev-highlight__line { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--agency-secondary); }
.ev-highlight__line + .ev-highlight__line { color: #fff; }
/* Red variant — same gradient as the other red bands (Apply, Share, stat band) */
.ev-highlight--red {
  background:
    radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, var(--agency-accent) 0%, color-mix(in srgb, var(--agency-accent) 82%, var(--agency-primary)) 100%);
}
.ev-highlight--red .ev-highlight__line { color: rgba(255, 255, 255, 0.86); }
.ev-highlight--red .ev-highlight__line + .ev-highlight__line { color: #fff; }

/* --- Flyer beside copy ---------------------------------------------------- */
.feat__media--flyer {
  display: flex;
  justify-content: center;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
.feat__media--flyer img { width: auto; max-width: 100%; max-height: 720px; height: auto; object-fit: contain; box-shadow: var(--shadow-floating); }
.feat__subtitle {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--agency-accent);
}

/* --- Sponsorship prices (Bowling for Bread) ------------------------------- */
.ev-tiers { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.ev-tiers__intro { max-width: 68ch; margin-top: var(--space-4); color: var(--text-secondary); }
.ev-tiers__list { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-10); }
@media (min-width: 768px) { .ev-tiers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev-tier {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.ev-tier__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--agency-primary);
}
.ev-tier__text { margin-top: var(--space-3); color: var(--text-secondary); }
.ev-tier__price {
  margin-top: auto;
  padding-top: var(--space-6);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--agency-accent);
}
.ev-tier__status {
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- Sample social posts inside the toolkit ------------------------------- */
.ev-posts { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-block: var(--space-6); }
@media (min-width: 600px) { .ev-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-post { display: block; background: #fff; box-shadow: var(--shadow-elevated); }
.ev-post img { display: block; width: 100%; height: auto; }
.ev-post__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--agency-primary);
}
.ev-post__note { display: block; margin-top: var(--space-2); font-size: 14px; color: var(--text-secondary); }

/* --- Events page (client, 2026-09-21): Upcoming Events + Annual Events, kept visibly apart ------------
   Upcoming = dated rows on white (date first, soonest first); Annual = the photo-card grid on the tinted band. */
.ev-list-head { margin-bottom: var(--space-10); }
@media (min-width: 1200px) { .ev-list-head { margin-bottom: var(--space-12); } }
.ev-list-head__intro { max-width: 62ch; margin-top: var(--space-3); font-size: 18px; line-height: 1.6; color: var(--text-body); }
.up-events, .ae-annual { scroll-margin-top: var(--space-6); }
/* On a page with the sticky jump bar (Volunteer), anchored sections land just below it, like About's */
main:has(.section-nav) :is(.prog-overview, .ae-annual, .nw, .nl)[id] { scroll-margin-top: calc(var(--section-nav-h) + var(--header-visible) - 96px); }
.up-events { padding-block: var(--section-y); background: #fff; }
.ae-annual { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
/* Either events section can take the other's surface (Events puts Annual first, so the
   tint moves down to Upcoming). The hairline belongs to whichever band is tinted. */
.up-events--tint { background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.ae-annual--white { background: #fff; border-top: 0; }
.up-events__list { display: grid; gap: var(--space-6); }
.up-events__empty { padding: var(--space-8); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); font-weight: 600; color: var(--text-secondary); text-align: center; }
/* one row per event: the site card, photo on the left from 768 */
.up-event {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 768px) { .up-event { grid-template-columns: minmax(240px, 34%) minmax(0, 1fr); } }
.up-event__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--agency-primary); }
@media (min-width: 768px) { .up-event__media { aspect-ratio: auto; min-height: 240px; } }
.up-event__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* no photo yet: the brand halftone on navy, with the date badge standing in */
.up-event__noimg { position: absolute; inset: 0; background: var(--agency-primary) url("../img/testimonials-bg.webp") center / cover no-repeat; }
.up-event__badge { position: absolute; top: var(--space-4); left: var(--space-4); box-shadow: 0 8px 20px rgba(10, 8, 40, 0.28); }
.up-event__body { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-6); }
@media (min-width: 1200px) { .up-event__body { padding: var(--space-8) var(--space-10); } }
.up-event__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--agency-accent);
}
.up-event__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--agency-primary);
}
@media (min-width: 1200px) { .up-event__title { font-size: 28px; } }
.up-event__meta { margin-top: var(--space-2); font-weight: 600; font-size: 15px; color: var(--text-secondary); }
.up-event__text { margin-top: var(--space-4); font-size: 16px; line-height: 1.7; color: var(--text-body); text-wrap: pretty; }
.up-event__cta { margin-top: var(--space-6); }

/* --- Three columns (Corporate Challenge weight classes) -------------------- */
.ev-cols { padding-block: var(--section-y); background: var(--surface-secondary); border-block: 1px solid var(--border-color); }
.ev-cols .prog-h2 { margin-bottom: var(--space-8); }
.ev-cols__list { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .ev-cols__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the site's standard card (same build as the program / location / sponsorship cards) */
.ev-col {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
/* with a photo the card carries no padding of its own: the image runs to its edges, the text keeps the inset */
.ev-col--photo { padding: 0; overflow: hidden; }
.ev-col__media { aspect-ratio: 16 / 9; background: var(--surface-secondary); }
.ev-col__media img { width: 100%; height: 100%; object-fit: cover; }
.ev-col--photo .ev-col__body { padding: var(--space-7) var(--space-6) var(--space-8); }
.ev-col__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--agency-primary);
}
@media (min-width: 1200px) { .ev-col__title { font-size: 30px; } }
.ev-col__text { margin-top: var(--space-3); font-size: 17px; color: var(--text-secondary); }
.ev-cols .note-reach { margin-top: var(--space-10); }

/* --- Share band (Fill a Box): full-width red CTA around the hashtag --------- */
.ev-share {
  padding-block: var(--space-16);
  background:
    radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, var(--agency-accent) 0%, color-mix(in srgb, var(--agency-accent) 82%, var(--agency-primary)) 100%);
  color: #fff;
}
.ev-share__inner { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.ev-share__title { display: grid; gap: var(--space-3); justify-items: center; }
.ev-share__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.ev-share__tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 8vw, 68px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
/* the footer's icon row, centered and sized up for the band */
.ev-share .social-list { justify-content: center; gap: var(--space-2); padding-top: 0; margin-left: 0; }
.ev-share .social-list a { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.ev-share .social-list a:hover { background: rgba(255, 255, 255, 0.24); }
.ev-share .social-list img { width: 24px; height: 24px; }

/* --- Signage downloads (same rows as the statements + 990s on /about/) ----- */
/* a short utility band (a heading + a couple of file rows), so it sits tighter than a content
   section — full section padding left it reading as mostly empty space (Bradley, 2026-10-05) */
.ev-downloads { padding-block: calc(var(--section-y) * 0.6); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.ev-downloads .doc-list { margin-top: var(--space-6); }

/* --- Sponsor logo strip intro --------------------------------------------- */
.ev-partners__intro { max-width: 60ch; margin: var(--space-3) auto var(--space-8); text-align: center; color: var(--text-secondary); }

/* --- Gallery + lightbox --------------------------------------------------- */
.ev-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 768px) { .ev-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ev-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
.ev-gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  cursor: pointer;
}
.ev-gallery__btn img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ev-gallery__btn:hover img { transform: scale(1.05); }
.ev-gallery__btn:active { transform: scale(0.99); }
.ev-gallery__btn:focus-visible { outline: 3px solid var(--agency-accent); outline-offset: 3px; }
/* a big album arrives a batch at a time; the button sits in the grid as its own cell */
.ev-gallery__grid > li.is-extra[hidden] { display: none; }
.ev-gallery__more { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: var(--space-6); }
.ev-gallery__more-count { opacity: 0.75; font-weight: 600; }
.ev-gallery__action { display: flex; justify-content: center; margin-top: var(--space-10); }

/* the lightbox reuses the bio dialog's backdrop + scroll lock */
.lightbox {
  width: min(1100px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--space-8));
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}
.lightbox::backdrop { background: rgba(17, 13, 73, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox[open] { animation: bio-in var(--dur-med) var(--ease-spring); }
.lightbox__img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 2 * var(--space-16));
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--agency-primary);
}
.lightbox__bar { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.lightbox__count { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.82); }
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) linear, transform var(--dur-med) var(--ease-spring);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__btn:active { transform: scale(0.92); }
.lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lightbox__btn svg { width: 18px; height: 18px; }
.lightbox__close { position: absolute; top: calc(-1 * var(--space-12)); right: 0; }
@media (max-width: 767px) { .lightbox__close { top: calc(-1 * var(--space-10)); } }

/* --- Placeholder (awaiting client photos) --------------------------------- */
.ev-gallery { padding-block: var(--space-12) var(--section-y); }
.ev-gallery--tint { background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.ev-gallery .prog-h2 { margin-bottom: var(--space-6); }
.ev-gallery__placeholder {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: var(--space-8);
  background: var(--bhh-sky-tint);
  border: 2px dashed color-mix(in srgb, var(--agency-secondary) 70%, #fff);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: var(--agency-primary);
}

/* ----------------------------------------------------------------------------
   25. SUPPORT US — pieces the giving pages add to the shared system
   ------------------------------------------------------------------------- */
/* Text Block subheading (Legacy Giving: "Boca Helping Hands Endowment Fund") */
.prog-subhead { margin: calc(-1 * var(--space-2)) 0 var(--space-5); font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--agency-accent); }
@media (min-width: 1200px) { .prog-subhead { font-size: 24px; } }
/* a small logo beside the text (Legacy Society) — the supplied file is 175px, so it stays small */
.prog-aside--logo img { max-width: 160px; }

/* Qgiv card: optional heading, line and small print above the form */
.donate-embed__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; text-align: center; color: var(--agency-primary); }
@media (min-width: 1200px) { .donate-embed__title { font-size: 32px; } }
.donate-embed__intro { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 18px; text-align: center; color: var(--agency-accent); }
.donate-embed__card > .note-fine { margin: var(--space-4) auto 0; max-width: 520px; justify-content: center; text-align: center; }
.donate-embed__card > :is(.donate-embed__title, .donate-embed__intro, .note-fine) + .qgiv-embed-container { margin-top: var(--space-6); }

/* Numbered steps with a heading, and four steps (Give a Hand) */
.ev-steps--headed .prog-h2 { margin-bottom: var(--space-10); }
/* a headed steps block sits in the page's reading column, like the copy above and the form below */
.ev-steps--headed > .bhh-container > :is(.prog-h2, .ev-steps__list, .note-reach, .note-fine) { max-width: calc(860px - 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 900px) { .ev-steps__list:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); } }
@media (min-width: 1200px) {
  .ev-steps__list:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* in the reading column four across would leave ~185px a step, so a headed block stays two across */
  .ev-steps--headed .ev-steps__list:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ev-steps__list:has(> li:nth-child(4)) .ev-step__title { font-size: 20px; line-height: 1.3; }

/* Three Columns with a lead-in line and only two columns (Corporate Matching) */
.ev-cols__intro { max-width: 760px; margin-bottom: var(--space-8); }
@media (min-width: 768px) {
  .ev-cols__list:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns read as a block of copy, so they sit in the same 860px column as the sections above and below */
  .ev-cols:has(.ev-cols__list > li:nth-child(2):last-child) :is(.ev-cols__intro, .ev-cols__list) { max-width: calc(860px - 2 * var(--gutter)); margin-inline: auto; }
  /* ...unless the section has a heading of its own: then the two cards span the row under it */
  .ev-cols:has(.prog-h2):has(.ev-cols__list > li:nth-child(2):last-child) :is(.ev-cols__intro, .ev-cols__list) { max-width: none; margin-inline: 0; }
}

/* Embedded third-party tool (matching-gift search) */
.embed-block { padding-block: var(--section-y); }
.embed-block__intro { margin-top: var(--space-4); }
.embed-block__frame { margin-top: var(--space-8); overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-elevated); }
.embed-block__frame iframe { display: block; width: 100%; min-height: 500px; border: 0; }

/* Naming opportunities: name + price rows; sold ones struck through with a "Sold" tag */
.naming { padding-block: var(--section-y) var(--space-10); }
.naming-list { border-top: 1px solid var(--border-color); }
.naming-item { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border-color); }
.naming-item > .naming-item__name, .naming-item__line { flex: 1; }
.naming-item:not(.is-sold) { flex-wrap: wrap; justify-content: space-between; }
.naming-item__line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-6); text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-muted); }
.naming-item__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--agency-primary); }
.naming-item__price { font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap; color: var(--agency-accent); }
.naming-item.is-sold :is(.naming-item__name, .naming-item__price) { color: var(--text-muted); font-weight: 600; }
.naming-item__sold { flex: none; padding: 4px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--agency-primary) 8%, #fff); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--agency-primary); }
@media (min-width: 1200px) { .naming-item__name, .naming-item__price { font-size: 19px; } }
/* phones: price under the name (a long price like "$25,000 each (4 available)" would squeeze the name) */
@media (max-width: 599px) {
  .naming-item:not(.is-sold), .naming-item__line { flex-direction: column; align-items: flex-start; gap: 2px; }
  .naming-item__price { white-space: normal; }
}

/* Member list (Heart & Spirit Lifetime Members): newspaper columns; on phones it starts folded (scripts.js block 15) */
.name-list { padding-block: var(--section-y); background: var(--surface-secondary); border-block: 1px solid var(--border-color); }
.name-list__body { position: relative; display: grid; gap: var(--space-10); margin-top: var(--space-8); }
.name-list__label { margin-bottom: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--agency-accent); }
.name-list__names { columns: 2; column-gap: var(--space-8); font-size: 16px; line-height: 1.45; color: var(--text-primary); }
.name-list__names li { break-inside: avoid; padding-block: 5px; }
@media (min-width: 768px) { .name-list__names { columns: 3; } }
@media (min-width: 1200px) { .name-list__names { columns: 4; font-size: 17px; } }
.name-list__body.is-folded { max-height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.name-list__toggle { margin-top: var(--space-6); }
.name-list__toggle[hidden] { display: none; }  /* .bhh-btn's display would otherwise override [hidden] */
.name-list__after { margin-top: var(--space-12); }
.name-list__president { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--agency-primary); }
.name-list__after .note-reach { margin-top: var(--space-6); }

/* ----------------------------------------------------------------------------
   26. UTILITY PAGES (Contact Us, Job Openings, FAQ, Donor Privacy Policy)
   ------------------------------------------------------------------------- */

/* Contact Us: the site's details beside the enquiry form — the homepage Let's Talk card
   with a navy details panel in place of the photo. */
.contact--page { padding-block: var(--section-y); background: var(--surface-primary); }
.contact-card__details {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--agency-secondary) 26%, transparent), transparent 62%),
    var(--agency-primary);
  color: #fff;
}
@media (min-width: 1200px) { .contact-card__details { padding: var(--space-12); } }
.contact-card--details .contact-card__title { color: #fff; }
.contact-card__place { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.4; }
.contact-card__address { font-style: normal; font-size: 17px; line-height: 1.7; color: color-mix(in srgb, #fff 84%, var(--agency-primary)); }
.contact-card__dirs { align-self: flex-start; margin-top: var(--space-2); }
.contact-card__lines {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, #fff 26%, transparent);
}
.contact-card__lines > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.contact-card__lines dt {
  min-width: 56px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--agency-secondary);
}
.contact-card__lines dd { margin: 0; font-size: 17px; line-height: 1.5; color: #fff; }
.contact-card__lines a { color: #fff; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) linear; }
.contact-card__lines a:hover { text-decoration-color: currentColor; }
.contact-card__lines a:active { opacity: 0.75; }
/* phones: a long email would wrap to its own line and read as if it were centred, so the label sits above it */
@media (max-width: 599px) {
  .contact-card__lines > div { flex-direction: column; gap: 2px; }
  .contact-card__lines dt { min-width: 0; }
}

/* Job Openings: the positions the client adds in WP; the quiet line shows while there are none. */
.jobs { padding-block: var(--section-y); background: var(--surface-secondary); border-top: 1px solid var(--border-color); }
.jobs > .bhh-container > .prog-h2 { margin-bottom: var(--space-6); }
.jobs-empty {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--space-6);
  border: 1px dashed color-mix(in srgb, var(--agency-primary) 28%, transparent);
  border-radius: var(--radius-lg);
  background: #fff;
  font-size: 16px; line-height: 1.6; color: var(--text-secondary);
}
.jobs-empty .prog-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--agency-secondary); }
.jobs-list { display: grid; gap: var(--space-5); }
.job-card {
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 768px) { .job-card { padding: var(--space-8); } }
.job-card__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--agency-primary); }
.job-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--agency-accent); }
.job-card__body { margin-top: var(--space-4); font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.job-card__body > * + * { margin-top: var(--space-3); }
.job-card__body :is(ul, ol) { padding-left: 1.25em; list-style: disc; }
.job-card__body li { padding-block: 3px; }
.job-card__action { margin-top: var(--space-6); }

/* FAQ: the expandable list with a heading above it */
.vol-acc > .bhh-container > .prog-h2 { margin-bottom: var(--space-6); }

/* An expandable list or donation card under a text + logo row lines up with that text column rather than
   sitting centred on the page (Bradley, 2026-09-22 — "line things up with the section above"). */
.prog-overview:has(.prog-aside) + .vol-acc > .bhh-container { max-width: 1240px; }
.prog-overview:has(.prog-aside) + .vol-acc > .bhh-container > .acc { max-width: calc(860px - 2 * var(--gutter)); }
.donate-embed__card--wide { max-width: calc(1240px - 2 * var(--gutter)); }
/* the line that introduces a full-width donation form shares its width, so the two start at the same edge */
.prog-overview:not(.donate-embed):has(+ .donate-embed .donate-embed__card--wide) > .bhh-container.fa-prose { max-width: 1240px; }

/* ----------------------------------------------------------------------------
   27. NEWS (one page: media coverage + newsletters, and a page per article)
   ------------------------------------------------------------------------- */

/* --- In the News: the coverage and story cards the client keeps in WP ------ */
.nw { padding-block: var(--section-y); background: #fff; }
.nw-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 768px) { .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nw-card { display: block; }
.nw-card.is-extra { display: none; }
.nw-grid.is-open .nw-card.is-extra { display: block; }
/* category chips, the keyword search, and the row that holds them */
.nw-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.nw-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-1); margin-left: calc(var(--space-3) * -1); }
.nw-search { position: relative; flex: 1 1 260px; max-width: 320px; }
.nw-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
/* the site's global input[type=…] rule is more specific than a single class, so this one carries the
   container class too — otherwise the typed text runs under the magnifier */
.nw-search .nw-search__input {
  width: 100%; padding: 10px 16px 10px 42px;
  border: 1px solid var(--border-color); border-radius: var(--radius-pill);
  background: #fff; font-family: var(--font-body); font-size: 15px; color: var(--text-primary);
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.nw-search .nw-search__input::placeholder { color: var(--text-muted); }
.nw-search .nw-search__input:focus-visible {
  outline: none; border-color: var(--agency-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agency-primary) 22%, transparent);
}
.nw-count { margin-top: var(--space-5); font-size: 15px; color: var(--text-secondary); }
.nw-count[hidden] { display: none; }
/* the filters read as tabs, not bubbles — the sticky section nav's underline, same type and
   the same red stroke sliding in (Bradley, 2026-10-05) */
.nw-filter {
  position: relative;
  padding: 10px var(--space-3) 12px;
  border: 0; border-radius: 0;
  background: none;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-secondary); cursor: pointer;
  transition: color var(--dur-fast) linear;
}
.nw-filter::after {
  content: "";
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--agency-accent);
  transform: scaleX(0);
  transition: transform var(--dur-med) var(--ease-spring);
}
.nw-filter:hover { color: var(--agency-primary); }
.nw-filter:hover::after { transform: scaleX(0.4); }
.nw-filter:active { opacity: 0.7; }
.nw-filter:focus-visible { outline: 3px solid var(--agency-primary); outline-offset: -4px; }
.nw-filter.is-on { color: var(--agency-primary); }
.nw-filter.is-on::after { transform: scaleX(1); }
@media (max-width: 479px) { .nw-filter { padding-inline: var(--space-2); font-size: 13px; letter-spacing: 0.04em; } .nw-filter::after { left: var(--space-2); right: var(--space-2); } }
.nw-card__cat {
  align-self: flex-start;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--agency-secondary) 30%, #fff);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--agency-primary);
}
.nw-card.is-hidden { display: none; }

.nw-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  text-decoration: none;
}
.nw-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-secondary); }
.nw-card__media img { width: 100%; height: 100%; object-fit: cover; }
.nw-card__placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--agency-secondary) 30%, transparent), transparent 60%),
    var(--agency-primary);
}
.nw-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-6); }
.nw-card__meta {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--agency-accent);
}
.nw-card__title {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--agency-primary); text-wrap: pretty;
}
@media (min-width: 1200px) { .nw-card__title { font-size: 20px; } }
.nw-card__more { margin-top: auto; padding-top: var(--space-4); }
.nw-more { margin-top: var(--space-8); }
.nw-more[hidden] { display: none; }

/* --- E-Newsletter & Print Newsletters -------------------------------------- */
.nl { padding-block: var(--section-y); background: var(--surface-secondary); border-block: 1px solid var(--border-color); }
.nl-group { margin-top: var(--space-10); }
.nl-group:first-of-type { margin-top: var(--space-8); }
.nl-group__label {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--agency-accent);
}
.nl-links, .nl-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.nl-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--dur-fast) linear, transform var(--dur-med) var(--ease-spring);
}
.nl-link:hover { background: var(--bhh-sky-tint); }
.nl-link:active { transform: translateY(1px); }
.nl-link__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--agency-primary); }
.nl-link__date { font-size: 14px; color: var(--text-muted); }
.nl-issue.is-extra { display: none; }
.nl-list.is-open .nl-issue.is-extra { display: block; }
.nl-issue__box { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.nl-issue__summary {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  cursor: pointer; list-style: none;
  transition: background var(--dur-fast) linear;
}
.nl-issue__summary::-webkit-details-marker { display: none; }
.nl-issue__summary:hover { background: var(--bhh-sky-tint); }
.nl-issue__summary:focus-visible { outline: 3px solid var(--agency-primary); outline-offset: -3px; }
.nl-issue__cover { flex: none; width: 96px; height: 68px; object-fit: cover; object-position: top; border-radius: var(--radius-sm); }
.nl-issue__heads { flex: 1; }
.nl-issue__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--agency-primary); }
.nl-issue__note { font-size: 14px; color: var(--text-muted); }
.nl-issue__box[open] .acc__chevron { transform: rotate(180deg); }
.nl-issue__frame { padding: 0 var(--space-3) var(--space-3); }
.nl-issue__frame iframe { display: block; width: 100%; height: 480px; border: 0; border-radius: var(--radius-md); background: var(--surface-secondary); }
@media (min-width: 768px) { .nl-issue__frame iframe { height: 620px; } }

/* --- one article page ------------------------------------------------------ */
.nw-article { padding-block: var(--section-y); background: #fff; }
.prog-crumbs--dark a { color: var(--text-secondary); }
.prog-crumbs--dark a:hover { color: var(--agency-accent); }
.nw-article__kind {
  margin-top: var(--space-5);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--agency-accent);
}
.nw-article__title {
  margin-top: var(--space-3);
  font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--agency-primary); text-wrap: balance;
}
@media (min-width: 1200px) { .nw-article__title { font-size: 42px; } }
.nw-article__meta { margin-top: var(--space-3); font-size: 15px; color: var(--text-muted); }
.nw-article__media { margin-block: var(--space-8); }
.nw-article__media img {
  /* the photo shares the article's reading column, like every other block on the page */
  display: block; width: 100%; max-width: calc(860px - 2 * var(--gutter)); margin-inline: auto;
  aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-xl);
}
.nw-article__body > * + * { margin-top: var(--space-5); }
/* the opening paragraph reads as the lead, whether the markup carries a class (prototype) or not (WP) */
.nw-article__body > p:first-child { font-size: 19px; line-height: 1.7; color: var(--text-primary); }
@media (min-width: 1200px) { .nw-article__body > p:first-child { font-size: 21px; } }
.nw-article__body h2, .nw-article__body h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--agency-primary);
}
.nw-article__source { margin-top: var(--space-8); }
.nw-article__back { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-color); }

/* ----------------------------------------------------------------------------
   28. PARTNERS (sponsor cards + the long partner lists)
   ------------------------------------------------------------------------- */

/* Annual sponsors: a card each, logo when the client has added one */
.sponsors { padding-block: var(--section-y); background: #fff; }
.sponsor-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sponsor-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
/* one logo band per card, so three marks of different shapes still line up */
/* one band per card: a wordmark fills the width, a round mark fills the height */
.sponsor-card__logo { display: block; width: 100%; height: 96px; object-fit: contain; }
@media (min-width: 1200px) { .sponsor-card__logo { height: 112px; } }
.sponsor-card__name {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--agency-primary); text-wrap: balance;
}
/* the address only breaks when it truly cannot fit, so it never splits mid-word in a narrow card */
.sponsor-card__link { margin-top: auto; font-size: 15px; overflow-wrap: break-word; }
@media (min-width: 1200px) { .sponsor-card__link { font-size: 16px; } }

/* The long lists: newspaper columns, folded behind a button on phones (scripts.js block 15) */
.partner-list { padding-block: var(--section-y); background: #fff; }
/* every list carries its own padding, so the tinted bands space evenly — and the builder, which wraps each
   module in its own <section>, matches the prototype exactly */
.partner-list--tint { background: var(--surface-secondary); border-block: 1px solid var(--border-color); }
.partner-list__note {
  max-width: calc(860px - 2 * var(--gutter));
  margin-top: var(--space-3);
  font-size: 17px; line-height: 1.7; color: var(--text-secondary);
}
.partner-list__body { position: relative; margin-top: var(--space-6); }
.partner-list__body .name-list__names {
  columns: 1; column-gap: var(--space-8);
  font-size: 16px; line-height: 1.45; color: var(--text-primary);
}
@media (min-width: 560px) { .partner-list__body .name-list__names { columns: 2; } }
@media (min-width: 900px) { .partner-list__body .name-list__names { columns: 3; } }
@media (min-width: 1200px) { .partner-list__body .name-list__names { columns: 4; font-size: 17px; } }
.partner-list__body .name-list__names li { break-inside: avoid; padding-block: 5px; }
.partner-list__body.is-folded { max-height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.partner-list .name-list__toggle { margin-top: var(--space-6); }

/* ----------------------------------------------------------------------------
   23. REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__content > * { opacity: 1; transform: none; animation: none; }
  .program-tile__video { display: none; }
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .map-pin.is-active .map-pin__ring { animation: none; }
}