/* ============================================================================
   CLB REBUILD — chrome (header/footer) + global re-brand
   Hand-written, no build step. Loaded site-wide via inc/assets.php after the
   theme's compiled style. New semantic markup uses the .site-* namespace, so
   none of the old purple .clb__header / .clb__footer rules apply to it.

   Strangler conversion: this file also retargets the theme's --primary tokens
   so inherited (not-yet-rebuilt) sections shift from purple to CLB teal, making
   the page read as one brand while we rebuild section by section.

   North star: inform · retain · support · fund. Screen-reader FIRST.
   ============================================================================ */

/* ---- 1. CLB design system tokens ---------------------------------------- */
:root {
  --clb-teal:      #063e3e;
  --clb-teal-90:   #0a4f4f;
  --clb-teal-20:   #d6e0e0;
  --clb-ink:       #0d1321;
  --clb-beam:      #fee065;
  --clb-beam-ink:  #0d1321;
  --clb-cream:     #f8f6ee;
  --clb-cream-90:  #efece0;
  --clb-white:     #ffffff;
  --clb-fg-2:      #3a4151;
  --clb-fg-3:      #5b6472;
  --clb-line:      rgba(6, 62, 62, .14);

  --clb-font: "Verdana Pro", Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif;
  --clb-radius: 10px;
  --clb-shadow: 0 6px 24px rgba(6, 62, 62, .10);
  --clb-focus: 3px solid var(--clb-beam);
  --clb-header-h: 76px;
}

/* ---- 2. Strangler re-brand: retarget the theme's inherited purple -------- */
/*  Recolors not-yet-rebuilt sections so the whole page reads as CLB teal.    */
html:root {
  --primary:           #063e3e;
  --primary-1:         #d6e0e0;
  --primary-2:         #1b4f4f;
  --primary-3:         #c9d6d6;
  --primary-4:         #3a4151;
  --primary-alpha-75:  rgba(6, 62, 62, .75);
  --black-1:           #0d1321;
  --blue-1:            #063e3e;
}

/* ---- Prevent stray horizontal overflow (clip, not hidden, to keep sticky) -- */
body { overflow-x: clip; }

/* ---- 3. Global focus visibility (a11y floor) ---------------------------- */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.skip-link:focus {
  outline: var(--clb-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Visually-hidden (screen-reader only) ------------------------------- */
.clb-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 4. Skip link ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 1000;
  background: var(--clb-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font: 700 16px/1 var(--clb-font);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ============================================================================
   HEADER
   ========================================================================== */
.site-header {
  font-family: var(--clb-font);
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--clb-white);
  border-bottom: 1px solid var(--clb-line);
}

.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---- Utility bar (retain + support) ------------------------------------- */
.site-header__utility {
  background: var(--clb-teal);
  color: #fff;
}
.site-header__utility .site-header__inner {
  min-height: 40px;
  justify-content: space-between;
  font-size: 14.5px;
}
.site-header__help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 8px 0;
}
.site-header__help svg { flex: none; }
.site-header__help span { text-decoration: underline; text-underline-offset: 3px; }
.site-header__util-contact {
  display: flex;
  align-items: center;
  gap: 22px;
}
.site-header__util-contact a {
  color: var(--clb-cream);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
}
.site-header__util-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Main bar ----------------------------------------------------------- */
.site-header__main .site-header__inner { min-height: var(--clb-header-h); }

.site-header__brand { flex: none; display: flex; align-items: center; }
.site-header__brand img,
.site-header__brand .custom-logo-link img { max-height: 62px; width: auto; height: auto; display: block; }
.site-header__brand a { display: inline-flex; align-items: center; font-weight: 700; color: var(--clb-teal); text-decoration: none; font-size: 20px; }

/* nav fills the space between brand and right edge */
.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__item { position: relative; }

.site-nav__link,
.site-nav__disclosure {
  font-family: var(--clb-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--clb-ink);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.site-nav__link:hover,
.site-nav__disclosure:hover { background: var(--clb-cream); color: var(--clb-teal); }
.site-nav__disclosure svg { transition: transform .18s ease; }
.site-nav__item.is-open .site-nav__disclosure { background: var(--clb-cream); color: var(--clb-teal); }
.site-nav__item.is-open .site-nav__disclosure svg { transform: rotate(180deg); }

/* ---- Dropdown panels ---------------------------------------------------- */
.site-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--clb-line);
  border-radius: var(--clb-radius);
  box-shadow: var(--clb-shadow);
  padding: 10px;
  margin: 0;
  list-style: none;
  display: none;
}
.site-nav__panel--wide { min-width: 520px; columns: 2; column-gap: 8px; }
.site-nav__item.is-open .site-nav__panel { display: block; }
.site-nav__panel li { break-inside: avoid; }
.site-nav__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--clb-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.site-nav__panel a:hover { background: var(--clb-cream); color: var(--clb-teal); }
.site-nav__panel a small { display: block; font-weight: 400; color: var(--clb-fg-3); font-size: 13px; margin-top: 2px; }
.site-nav__panel-all {
  margin-top: 6px;
  border-top: 1px solid var(--clb-line);
  padding-top: 8px;
  column-span: all;
}

/* ---- CTAs --------------------------------------------------------------- */
.site-nav__cta { display: flex; align-items: center; gap: 10px; margin-left: 10px; }
.btn-clb {
  font-family: var(--clb-font);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn-clb:active { transform: translateY(1px); }
.btn-clb--beam { background: var(--clb-beam); color: var(--clb-beam-ink); }
.btn-clb--beam:hover { background: #ffd633; }
.btn-clb--ghost { background: #fff; color: var(--clb-teal); border-color: var(--clb-teal); }
.btn-clb--ghost:hover { background: var(--clb-teal); color: #fff; }

/* ---- Search ------------------------------------------------------------- */
.site-header__search-toggle {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--clb-line);
  background: #fff;
  color: var(--clb-teal);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.site-header__search-toggle:hover { background: var(--clb-cream); }
.site-header__search {
  display: none;
  background: var(--clb-cream);
  border-top: 1px solid var(--clb-line);
}
.site-header__search.is-open { display: block; }
.site-header__search form { max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 10px; }
.site-header__search input[type="search"],
.site-header__search input[type="text"] {
  flex: 1;
  font-family: var(--clb-font);
  font-size: 16px;
  padding: 13px 16px;
  border: 1px solid var(--clb-line);
  border-radius: 8px;
  background: #fff;
}
.site-header__search input:focus-visible { outline: var(--clb-focus); outline-offset: 1px; }

/* ---- Burger (mobile) ---------------------------------------------------- */
.site-header__burger {
  display: none;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 10px;
  border: 1px solid var(--clb-line);
  background: #fff;
  color: var(--clb-teal);
  cursor: pointer;
  align-items: center; justify-content: center;
}

/* ---- Responsive: off-canvas nav ---------------------------------------- */
@media (max-width: 980px) {
  .site-header__burger { display: inline-flex; }
  .site-header__util-contact { display: none; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 90vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    background: #fff;
    padding: 84px 18px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* visibility:hidden when closed removes the off-screen panel from rendering,
       hit-testing, the a11y tree, AND iOS's phantom scroll area */
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
    box-shadow: var(--clb-shadow);
    z-index: 950;
  }
  .site-nav.is-open { transform: translateX(0); visibility: visible; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .site-nav__link, .site-nav__disclosure { width: 100%; justify-content: space-between; font-size: 18px; padding: 14px 12px; }
  .site-nav__panel {
    position: static; display: none; box-shadow: none; border: 0; border-radius: 0;
    min-width: 0; columns: 1; padding: 2px 2px 8px 14px; background: var(--clb-cream);
  }
  .site-nav__panel--wide { columns: 1; }
  .site-nav__cta { margin: 14px 0 0; flex-direction: column; align-items: stretch; }
  .btn-clb { justify-content: center; padding: 16px 22px; font-size: 17px; }
  .site-nav__close { display: inline-flex; }
  .site-header__main .site-header__inner { justify-content: space-between; }
}
.site-nav__close {
  display: none;
  position: absolute; top: 18px; right: 16px;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--clb-line); background: #fff; color: var(--clb-teal);
  align-items: center; justify-content: center; cursor: pointer;
}
.site-nav__backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(13, 19, 33, .55);
  /* MUST sit below the header's z-index:900 stacking context, or it renders
     on top of the off-canvas menu (which lives inside the header) and greys it
     out. Backdrop dims the page (z:auto); header + menu stay above it. */
  z-index: 899;
}
.site-nav__backdrop.is-open { display: block; }

@media (min-width: 981px) {
  .site-nav { transform: none !important; }
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  font-family: var(--clb-font);
  background: var(--clb-teal);
  color: var(--clb-cream);
}
.site-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.site-footer__main .site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 48px;
}

/* brand column */
.site-footer__logo { display: inline-block; margin-bottom: 18px; }
.site-footer__logo img { max-height: 66px; width: auto; height: auto; display: block; }
.site-footer__tagline { font-size: 15px; line-height: 1.6; color: var(--clb-cream); opacity: .92; max-width: 34ch; margin: 0 0 22px; }

/* prominent social */
.site-footer__social { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0 0 24px; flex-wrap: wrap; }
.site-footer__social a {
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.site-footer__social svg { width: 22px; height: 22px; }
.site-footer__social a:hover { background: var(--clb-beam); color: var(--clb-ink); transform: translateY(-2px); }

.site-footer__righthear { display: inline-block; background: #fff; padding: 8px; border-radius: 8px; }
.site-footer__righthear img { display: block; width: 72px; height: auto; }

/* link columns */
.site-footer__heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clb-beam);
  margin: 4px 0 16px;
}
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li { margin-bottom: 4px; }
.site-footer__links a,
.site-footer__contact-list a,
.site-footer__addr {
  color: var(--clb-cream);
  text-decoration: none;
  font-size: 15.5px;
  line-height: 1.5;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  /* WCAG 2.2 (2.5.8) target size: ensure a >=24px tap target */
  padding: 4px 0;
  min-height: 24px;
}
.site-footer__legal a { display: inline-block; padding: 4px 0; min-height: 24px; }
.site-footer__links a:hover,
.site-footer__contact-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.site-footer__contact-list { list-style: none; padding: 0; margin: 0 0 22px; }
.site-footer__contact-list li { margin-bottom: 13px; }
.site-footer__contact-list svg, .site-footer__addr svg { flex: none; margin-top: 2px; color: var(--clb-beam); }
.site-footer__donate { color: var(--clb-beam-ink) !important; }

/* bottom bar */
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); }
.site-footer__bottom .site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.site-footer__bottom p { margin: 0; font-size: 14px; color: var(--clb-cream); opacity: .85; }
.site-footer__legal a { color: var(--clb-cream); text-decoration: none; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; }
.site-footer__legal span { margin: 0 8px; opacity: .6; }
.site-footer__credit { flex-basis: 100%; margin-top: 8px; font-size: 13px; opacity: .8; }
.site-footer__credit a { color: var(--clb-cream); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { color: #fff; }
.site-footer__inner--trust { justify-content: center; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 14px; margin-bottom: 6px; }
.site-footer__nonprofit { display: flex; gap: 10px; align-items: flex-start; max-width: 940px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--clb-cream); opacity: .92; }
.site-footer__nonprofit-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--clb-beam, #f5d15b); }
.site-footer__nonprofit strong { color: #fff; }

/* footer focus visibility */
.site-footer a:focus-visible { outline: var(--clb-focus); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 900px) {
  .site-footer__main .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .site-footer__main .site-footer__inner { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; }
  .site-footer__bottom .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   HOMEPAGE (front-page.php)  —  .home-*
   ========================================================================== */
.home-hero, .home-steps, .home-impact, .home-programs, .home-mission, .home-support {
  font-family: var(--clb-font);
  color: var(--clb-ink);
}
.home-section__inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.home-section__head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.home-section__head h2 { font-size: clamp(28px, 2vw + 18px, 42px); line-height: 1.1; letter-spacing: -.01em; margin: 14px 0 0; }
.home-section__sub { font-size: 18px; line-height: 1.6; color: var(--clb-fg-2); margin: 14px 0 0; }

/* eyebrow chip */
.clb-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 7px 14px; border-radius: 999px;
  background: var(--clb-beam); color: var(--clb-ink);
}
.clb-eyebrow--teal { background: var(--clb-teal); color: var(--clb-cream); }

/* extra button variant for light backgrounds */
.btn-clb--ghost-dark { background: transparent; color: var(--clb-teal); border-color: var(--clb-teal); }
.btn-clb--ghost-dark:hover { background: var(--clb-teal); color: #fff; }

/* ---- Hero ---- */
.home-hero { background: var(--clb-cream); overflow: hidden; }
.home-hero__inner {
  max-width: 1240px; margin: 0 auto; padding: clamp(40px, 5vw, 84px) 24px;
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 48px; align-items: center;
}
.home-hero__title { font-size: clamp(34px, 3.4vw + 16px, 60px); line-height: 1.03; letter-spacing: -.02em; margin: 18px 0 0; }
.home-hero__lead { font-size: clamp(17px, .5vw + 15px, 20px); line-height: 1.6; color: var(--clb-fg-2); margin: 22px 0 0; max-width: 52ch; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.home-hero__media { position: relative; }
.home-hero__media img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(6,62,62,.22); object-fit: cover;
}
.home-hero__media::after {
  content: ""; position: absolute; right: -14px; bottom: -14px; width: 120px; height: 120px;
  background: var(--clb-beam); border-radius: 16px; z-index: -1;
}

/* ---- First steps ---- */
.home-steps { padding: clamp(56px, 6vw, 96px) 0; background: #fff; }
.home-steps__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-step {
  background: var(--clb-cream); border: 1px solid var(--clb-line); border-radius: var(--clb-radius);
  padding: 32px 28px; display: flex; flex-direction: column;
}
.home-step__icon {
  width: 56px; height: 56px; border-radius: 14px; background: var(--clb-teal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.home-step__icon svg { width: 28px; height: 28px; }
.home-step h3 { font-size: 21px; margin: 0 0 10px; letter-spacing: -.01em; }
.home-step p { font-size: 16px; line-height: 1.6; color: var(--clb-fg-2); margin: 0 0 18px; flex: 1; }
.home-step__link { color: var(--clb-teal); font-weight: 700; text-decoration: none; }
.home-step__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Impact ---- */
.home-impact { background: var(--clb-teal); color: #fff; padding: clamp(48px, 5vw, 80px) 0; }
.home-impact__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.home-impact__num { display: block; font-size: clamp(40px, 3.2vw + 12px, 58px); font-weight: 700; color: var(--clb-beam); line-height: 1; letter-spacing: -.02em; }
.home-impact__label { display: block; margin-top: 12px; font-size: clamp(16.5px, 1.05vw + 12px, 21px); line-height: 1.55; color: var(--clb-cream); opacity: .97; }

/* ---- Programs ---- */
.home-programs { padding: clamp(56px, 6vw, 96px) 0; background: var(--clb-cream); }
.home-programs__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.home-programs__grid .home-prog { grid-column: span 3; }           /* remaining 10: four across (4/4/2) */
.home-programs__grid .home-prog:nth-child(-n+3) { grid-column: span 4; }  /* top 3 flagship: three across */
.home-prog__link { display: block; background: #fff; border: 1px solid var(--clb-line); border-radius: var(--clb-radius); overflow: hidden; text-decoration: none; color: var(--clb-ink); transition: transform .14s ease, box-shadow .14s ease; }
.home-prog__link:hover { transform: translateY(-4px); box-shadow: var(--clb-shadow); }
.home-prog__media { display: block; aspect-ratio: 3 / 2; background: var(--clb-teal-20) center/cover no-repeat; }
.home-prog__icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--clb-teal); color: var(--clb-beam); }
.home-prog__icon svg { width: 48px; height: 48px; }
.home-prog__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; font-size: 17.5px; font-weight: 700; }
.home-prog__arrow { color: var(--clb-teal); transition: transform .14s ease; }
.home-prog__link:hover .home-prog__arrow { transform: translateX(4px); }
.home-prog__link:focus-visible { outline: var(--clb-focus); outline-offset: 3px; border-radius: var(--clb-radius); }
.home-programs__all { text-align: center; margin-top: 40px; }

/* ---- Mission ---- */
.home-mission { background: var(--clb-ink); color: #fff; padding: clamp(64px, 7vw, 112px) 0; }
.home-mission__inner { max-width: 900px; margin: 0 auto; padding: 0 24px; text-align: center; }
.home-mission__quote { font-size: clamp(26px, 2.4vw + 16px, 44px); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; margin: 0; }
.home-mission__byline { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 24px auto 32px; max-width: 60ch; }

/* ---- Support ---- */
.home-support { padding: clamp(56px, 6vw, 96px) 0; background: #fff; }
.home-support__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-support__card { border: 1px solid var(--clb-line); border-radius: var(--clb-radius); padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.home-support__card h3 { font-size: 22px; margin: 0 0 12px; }
.home-support__card p { font-size: 16px; line-height: 1.6; color: var(--clb-fg-2); margin: 0 0 22px; flex: 1; }

/* ---- Where to start (audience routing) ---- */
.home-start { padding: clamp(56px,6vw,96px) 0; background: #fff; }
.home-start__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.home-start__card { display: flex; }
.home-start__card > a {
  display: flex; flex-direction: column; width: 100%;
  background: var(--clb-cream); border: 1px solid var(--clb-line); border-radius: var(--clb-radius);
  padding: 26px 22px; text-decoration: none; color: var(--clb-ink);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.home-start__card > a:hover { transform: translateY(-4px); box-shadow: var(--clb-shadow); border-color: var(--clb-teal-20); }
.home-start__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--clb-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.home-start__icon svg { width: 26px; height: 26px; }
.home-start__card h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.2; }
.home-start__card p { font-size: 14.5px; line-height: 1.55; color: var(--clb-fg-2); margin: 0 0 16px; flex: 1; }
.home-start__link { color: var(--clb-teal); font-weight: 700; font-size: 14.5px; }

/* ---- Featured story ---- */
.home-story { background: var(--clb-cream); padding: clamp(56px,6vw,96px) 0; }
.home-story__inner { max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; }
.home-story__quote { margin: 16px 0 0; }
.home-story__quote p { font-size: clamp(28px,2.6vw + 16px,46px); line-height: 1.18; letter-spacing: -.01em; font-weight: 700; color: var(--clb-teal); margin: 0; }
.home-story__body { font-size: 18px; line-height: 1.6; color: var(--clb-fg-2); margin: 24px auto 0; max-width: 60ch; }
.home-story__attr { margin: 26px 0 0; font-size: 15px; color: var(--clb-ink); }
.home-story__attr strong { display: block; font-size: 17px; }
.home-story__attr span { color: var(--clb-fg-3); }

/* ---- 125th anniversary band ---- */
/* Teal (not ink) so it divides cleanly from the ink mission band above and the
   white support band below: dark -> teal -> light. The beam 125 glows on teal. */
.home-anniv { position: relative; background: var(--clb-teal); color: #fff; padding: clamp(48px,5vw,80px) 0; overflow: hidden; }
/* celebratory burst overlay — fades in for the one-time play, then back to 0 */
.home-anniv__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .65s ease; }
.home-anniv__fx.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-anniv__fx { display: none !important; } }
.home-anniv__inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; }
.home-anniv__copy h2 { font-size: clamp(28px,2.2vw + 16px,44px); line-height: 1.1; letter-spacing: -.01em; margin: 14px 0 0; }
.home-anniv__copy p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 18px 0 0; max-width: 52ch; }
.home-anniv__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.home-anniv__badge { justify-self: center; text-align: center; margin: 0; color: var(--clb-beam); font-weight: 700; text-transform: uppercase; letter-spacing: .3em; font-size: 15px; }
.home-anniv__badge span {
  display: block; font-size: clamp(90px,8vw,150px); letter-spacing: -.04em; line-height: .9;
  /* lighthouse-beam glow on the 125 */
  text-shadow:
    0 0 18px rgba(254,224,101,.50),
    0 0 44px rgba(254,224,101,.32),
    0 0 90px rgba(254,224,101,.16);
}
/* Gentle "breathing" glow — animation only when the visitor allows motion
   (blindness org: prefers-reduced-motion is respected, glow stays static). */
@media (prefers-reduced-motion: no-preference) {
  .home-anniv__badge span { animation: clb-125-glow 3.4s ease-in-out infinite; }
  @keyframes clb-125-glow {
    0%, 100% {
      text-shadow:
        0 0 16px rgba(254,224,101,.42),
        0 0 40px rgba(254,224,101,.26),
        0 0 84px rgba(254,224,101,.13);
    }
    50% {
      text-shadow:
        0 0 26px rgba(254,224,101,.78),
        0 0 64px rgba(254,224,101,.46),
        0 0 120px rgba(254,224,101,.24);
    }
  }
}

.btn-clb--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-clb--ghost-light:hover { background: #fff; color: var(--clb-ink); border-color: #fff; }

/* ---- Why it matters (trust) ---- */
.home-why { padding: clamp(56px,6vw,96px) 0; background: #fff; }
.home-why__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; text-align: center; }
.home-why__num { display: block; font-size: clamp(54px,6vw + 20px,76px); font-weight: 700; color: var(--clb-teal); line-height: 1; letter-spacing: -.02em; }
.home-why__label { display: block; margin-top: 12px; font-size: clamp(16.5px, 1.05vw + 12px, 21px); line-height: 1.55; color: var(--clb-fg-2); }
.home-why__ref { font-size: .62em; font-weight: 700; line-height: 0; margin-left: 1px; }
.home-why__ref a { color: var(--clb-teal); text-decoration: none; }
.home-why__ref a:hover, .home-why__ref a:focus-visible { text-decoration: underline; }
.home-why__sources { text-align: center; margin: 26px auto 0; max-width: 74ch; font-size: clamp(13.5px, 0.5vw + 11px, 15.5px); line-height: 1.6; color: var(--clb-fg-3); }
.home-why__sources sup { font-weight: 700; color: var(--clb-teal); }
.home-why__trust { text-align: center; margin: 20px auto 0; max-width: 72ch; font-size: 14.5px; color: var(--clb-fg-3); border-top: 1px solid var(--clb-line); padding-top: 26px; }
@media (max-width: 760px) { .home-why__grid { grid-template-columns: 1fr; gap: 26px; } }

@media (max-width: 760px) {
  .home-anniv__inner { grid-template-columns: 1fr; gap: 20px; }
  .home-anniv__badge { display: none; }
}

/* ---- Newsletter (Lamplighter) ---- */
.home-newsletter { background: var(--clb-ink); color: #fff; padding: clamp(56px,6vw,88px) 0; }
.home-newsletter__inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.home-newsletter h2 { font-size: clamp(28px,2.4vw + 16px,42px); line-height: 1.1; letter-spacing: -.01em; margin: 14px 0 0; }
.home-newsletter__lead { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 16px auto 28px; max-width: 56ch; }
.home-newsletter__form { max-width: 520px; margin: 0 auto; }
.home-newsletter__row { display: flex; gap: 10px; }
.home-newsletter__input {
  flex: 1; min-width: 0; padding: 15px 16px; font-family: inherit; font-size: 16px; color: #fff;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.22); border-radius: var(--clb-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.home-newsletter__input::placeholder { color: rgba(255,255,255,.5); }
.home-newsletter__input:focus { outline: none; border-color: var(--clb-beam); box-shadow: 0 0 0 3px rgba(254,224,101,.25); }
.home-newsletter__submit { flex-shrink: 0; }
.home-newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.home-newsletter__status { margin: 14px 0 0; font-size: 15px; min-height: 1.25em; color: rgba(255,255,255,.8); }
.home-newsletter__status.is-ok { color: var(--clb-beam); }
.home-newsletter__status.is-err { color: #ffb3a8; }
@media (max-width: 560px) { .home-newsletter__row { flex-direction: column; } }

/* ---- Homepage responsive ---- */
@media (max-width: 900px) {
  .home-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .home-hero__media { order: -1; }
  .home-steps__grid, .home-programs__grid, .home-support__grid { grid-template-columns: 1fr 1fr; }
  .home-programs__grid .home-prog, .home-programs__grid .home-prog:nth-child(-n+3) { grid-column: auto; }
  .home-impact__grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
  .home-steps__grid, .home-programs__grid, .home-support__grid { grid-template-columns: 1fr; }
  .home-hero__cta .btn-clb { flex: 1; justify-content: center; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__disclosure svg, .btn-clb, .skip-link,
  .site-footer__social a, .home-prog__link, .home-prog__arrow { transition: none; }
}

/* ============================================================================
   HOMEPAGE — conversion IA rework (Rocksteady Consulting)
   The 125th band was moved above the teal impact band, a new Upcoming-events
   section was added, and Ways-to-support now holds a fourth (silent-auction)
   card. Reuses existing home-* tokens + patterns; no unrelated section is
   restyled. Appended last so the four-card support grid and its responsive
   breakpoints win the cascade cleanly.
   ========================================================================== */

/* 125th sits directly above the teal impact band. Both are the same teal, so
   no divider line between them (the hairline read as a stray floating line). */

/* ---- Upcoming events (compact card row) ---- */
.home-events { padding: clamp(56px,6vw,96px) 0; background: var(--clb-cream); }
.home-events__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-events__card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--clb-line); border-radius: var(--clb-radius);
  overflow: hidden;
}
.home-events__img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--clb-teal-20); }
.home-events__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.home-events__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--clb-fg-2); }
.home-events__when { margin: 0; font-size: 15px; line-height: 1.4; color: var(--clb-fg-2); font-weight: 600; }
.home-events__title { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; margin: 0; color: var(--clb-ink); }
.home-events__details { margin-top: auto; align-self: flex-start; color: var(--clb-teal); font-weight: 700; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.home-events__details:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-events__arrow { transition: transform .14s ease; }
.home-events__details:hover .home-events__arrow { transform: translateX(4px); }
.home-events__all { text-align: center; margin-top: 40px; }
@media (max-width: 900px) { .home-events__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .home-events__grid { grid-template-columns: 1fr; } }

/* ---- Ways to support: now four cards (silent-auction added) ---- */
.home-support__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .home-support__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .home-support__grid { grid-template-columns: 1fr; } }

/* ---- Reduced motion (new interactive bits) ---- */
@media (prefers-reduced-motion: reduce) {
  .home-events__details, .home-events__arrow { transition: none; }
}

/* ============================================================================
   HOMEPAGE — programs 3-3-3-2-2 grid (13 service cards)
   Rows of 3, 3, 3, then the final 4 split 2 + 2 and centered. Uses a 6-col
   grid so each card spans 2. Targets the real .home-prog item class and
   overrides the base 12-col flagship rules above.
   ========================================================================== */
.home-programs__grid--3-3-3-2-2 { grid-template-columns: repeat(6, 1fr); }
.home-programs__grid--3-3-3-2-2 .home-prog,
.home-programs__grid--3-3-3-2-2 .home-prog:nth-child(-n+3) { grid-column: span 2; }
.home-programs__grid--3-3-3-2-2 .home-prog:nth-child(10) { grid-column: 2 / span 2; }
.home-programs__grid--3-3-3-2-2 .home-prog:nth-child(11) { grid-column: 4 / span 2; }
.home-programs__grid--3-3-3-2-2 .home-prog:nth-child(12) { grid-column: 2 / span 2; }
.home-programs__grid--3-3-3-2-2 .home-prog:nth-child(13) { grid-column: 4 / span 2; }
@media (max-width: 900px) {
  .home-programs__grid--3-3-3-2-2 { grid-template-columns: repeat(4, 1fr); }
  .home-programs__grid--3-3-3-2-2 .home-prog,
  .home-programs__grid--3-3-3-2-2 .home-prog:nth-child(n) { grid-column: span 2 !important; }
}
@media (max-width: 560px) {
  .home-programs__grid--3-3-3-2-2 { grid-template-columns: repeat(2, 1fr); }
  .home-programs__grid--3-3-3-2-2 .home-prog,
  .home-programs__grid--3-3-3-2-2 .home-prog:nth-child(n) { grid-column: span 1 !important; }
}