.hero {
  padding-top: calc(var(--nav-height) + clamp(1.75rem, 3.5vw, 3rem));
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 92, 142, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 92, 142, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  pointer-events: none;
}

/* Single centred column. The old two-column hero (text left, photo right)
   was dropped — the group did not want to be obliged to supply a photo. */
.hero__inner {
  max-width: 780px;
  margin-inline: auto;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__headline {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.hero__headline em {
  color: var(--blue-deep);
  font-style: italic;
}

.hero__description {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 0;
}

.hero__actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Featured notice card — hero right panel */
.featured-notice {
  background: var(--paper-warm);
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--blue-deep);
  padding: 1.75rem;
  position: relative;
  box-shadow: var(--shadow);
  margin-top: 1rem;
}

.featured-notice__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
  display: block;
}

.featured-notice__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--charcoal);
  margin-bottom: 0.875rem;
}

.featured-notice__body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-mid);
  margin-bottom: 1.25rem;
  max-width: none;
}

.featured-notice__rule {
  width: 100%;
  height: 1px;
  background: var(--rule-mid);
  margin-block: 1.25rem;
}

.hero-strip {
  background: var(--blue-deep);
  padding-block: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.hero-strip__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Right-edge fade — visible when there's more content to the right */
.hero-strip__track::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: linear-gradient(to right, transparent, var(--blue-deep));
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1;
}

.hero-strip.strip-scrollable-end .hero-strip__track::after { opacity: 0; }

.hero-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
}

.hero-strip__inner::-webkit-scrollbar { display: none; }

.strip-arrow {
  flex-shrink: 0;
  z-index: 2;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  padding: 0;
}

.strip-arrow:hover { background: rgba(255,255,255,0.28); }

.strip-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.strip-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.strip-item__text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

.strip-item__link {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.90) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--transition);
  text-decoration: underline;
}

.strip-item__link:hover { color: var(--white) !important; }

/* ─── Hero strip as native wp:group/paragraph blocks ────────────────────── */
/* !important because the editor's generated layout CSS puts margin-block-start
   on every wp-block-group after the first at the same (0,2,0) specificity these
   selectors score. A tie falls through to load order and the editor's copy wins,
   which in a flex ROW pushes each item down the band instead of apart. */
.hero-strip.wp-block-group,
.hero-strip__inner.wp-block-group,
.strip-item.wp-block-group { margin: 0 !important; }
.hero-strip__inner > .wp-block-group,
.hero-strip .strip-item > * { margin-block: 0 !important; }
/* Preserve margin-inline: auto from .container so content centres on wide screens */
.hero-strip__track.wp-block-group { margin-top: 0; margin-bottom: 0; }
.hero-strip__inner.wp-block-group { justify-content: center; gap: 0 !important; }
.strip-item.wp-block-group { padding: 0 1.25rem; }
.strip-item.wp-block-group:first-child { padding-left: 0; }
.strip-item.wp-block-group:last-child { padding-right: 0; }
.strip-item.wp-block-group + .strip-item.wp-block-group { border-left: 1px solid rgba(255,255,255,0.15); }
.strip-item.wp-block-group::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.hero-strip .wp-block-paragraph { margin: 0 !important; max-width: none !important; white-space: nowrap; line-height: 1; }
.strip-item__text { color: rgba(255,255,255,0.85) !important; }

.strip-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.pathway-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto auto;
  gap: 1.5px;
  background: var(--rule-mid);
}

.pathway-block {
  background: var(--paper-warm);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  transition: background var(--transition);
  cursor: default;
  position: relative;
  overflow: hidden;
}

.pathway-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rule-mid);
  transition: background var(--transition);
}

.pathway-block:hover::before { background: var(--blue-deep); }
.pathway-block:hover { background: var(--paper); }

.pathway-block--accent {
  background: var(--blue-pale);
}

.pathway-block--accent:hover { background: #D9EDF6; }

.pathway-block__eyebrow { margin-bottom: 0.75rem; }

.pathway-block__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
}

.pathway-block__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 40ch;
  margin-bottom: 1.5rem;
}

.pathway-block__link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue-deep);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap var(--transition), color var(--transition);
  align-self: flex-start;
}

.pathway-block__link:hover { gap: 0.625rem; color: var(--charcoal); }

/* Span first column, full height of its row */
.pathway-block--large { grid-row: span 1; }

.mission-block {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--blue-deep);
  position: relative;
  overflow: hidden;
}

.mission-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  pointer-events: none;
}

.mission-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.mission-block__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  color: var(--white);
  padding-left: 1.5rem;
  border-left: 3px solid var(--green);
}

.mission-block__body {
  color: rgba(255,255,255,0.80);
  font-size: 0.9375rem;
  line-height: 1.8;
  max-width: none;
}

.mission-block__body p { color: rgba(255,255,255,0.80); max-width: none; }
.mission-block__body .eyebrow { color: rgba(255,255,255,0.80); margin-bottom: 1rem; }
.mission-block__body .eyebrow::before { background: var(--green); }

@media (max-width: 1023px) {
  .featured-notice { max-width: 480px; margin-top: 0; }

  .mission-block__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pathway-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

  .pathway-block { min-height: 200px; }

  /* Restore alternating white/blue pattern in single-column layout */
  .pathway-grid .pathway-block:nth-child(3) {
    background: var(--paper-warm);
  }
  .pathway-grid .pathway-block:nth-child(3):hover {
    background: var(--paper);
  }
  .pathway-grid .pathway-block:nth-child(4) {
    background: var(--blue-pale);
  }
  .pathway-grid .pathway-block:nth-child(4):hover {
    background: #D9EDF6;
  }

  .hero__actions { flex-direction: column; }
  .hero__actions .btn { align-self: flex-start; }
}

@media (max-width: 767px) {
  /* On narrow screens items may not all fit — start from left so scroll works naturally */
  .hero-strip__inner { justify-content: flex-start; }
  .hero-strip__inner.wp-block-group { justify-content: flex-start !important; }
}

@media (max-width: 479px) {
  .hero-strip__inner { gap: 1.25rem; }
  .strip-divider { display: none; }
}

/* ─── Hero native image blocks ──────────────────────────────────────────── */
.hero-logo { margin-bottom: 1.75rem; }
/* Pinned with !important and a class-heavy selector on purpose. Core ships
   `.wp-block-image img { height: auto }`, which is (0,1,1) — exactly the same
   specificity as a bare `.hero-logo img`. A tie is settled by load order, and
   the editor's stylesheet order is not the same on every install: locally the
   theme landed last and the logo was 80px, on the deployed site core landed
   last and the logo rendered at its natural 800px height. Specificity plus
   !important takes load order out of it. */
.wp-block-image.hero-logo img,
.hero-logo img {
  height: 80px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  margin-inline: auto;
}


/* ─── President message box ─────────────────────────────────────────────── */
.president-message { margin-top: 0.875rem; background: var(--paper-warm); border: 1px solid var(--rule-mid); border-top: 3px solid var(--blue-deep); padding: 1.5rem; }
.president-message__eyebrow { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 0.875rem; max-width: none !important; }
.president-message__quote { font-size: 0.9375rem; font-family: var(--font-serif); font-style: italic; line-height: 1.7; color: var(--charcoal) !important; max-width: none !important; }
.president-message__author { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--text-light) !important; max-width: none !important; }

/* ─── Featured resources (homepage) ────────────────────────────────────── */
.featured-resources-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.featured-resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.feat-res-card { background: var(--paper-warm); border: 1px solid var(--rule-mid); border-top: 2px solid var(--blue-deep); padding: 1.5rem; }
.feat-res-card--green { border-top-color: var(--green); }
.feat-res-card--lblue { border-top-color: var(--blue-light); }
.feat-res-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.feat-res-card__name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--charcoal) !important; max-width: none !important; margin: 0 !important; }
.feat-res-card__desc { font-size: 0.875rem; line-height: 1.65; color: var(--text-mid) !important; max-width: none !important; margin-bottom: 1rem !important; }
.feat-res-card__link { font-size: 0.875rem; font-weight: 500; color: var(--blue-deep); border-bottom: 1px solid var(--blue-mid); padding-bottom: 1px; text-decoration: none; }
.feat-res-card__link:hover { color: var(--charcoal); }
@media (max-width: 767px) { .featured-resources-header { flex-direction: column; align-items: flex-start; } }

/* Hero call-to-action buttons */
.hero__actions.wp-block-buttons { margin-top: 2rem; }

/* Workshop poster placeholders: until a poster is uploaded the image block is
   empty, which rendered as a broken gap. Hide the empty image and let the card
   read as a deliberate placeholder instead. */
.poster-card img[src=""], .poster-card img:not([src]) { display: none; }
.poster-card:has(img[src=""]) { border-style: dashed; min-height: 200px; }

/* ─── In the Spotlight (homepage, below the blue strip) ──────────────── */
/* A centred announcement card on the warm ground, using the same hairline +
   coloured-top-border language as .pdi-box / .award-panel / .feat-res-card.
   Centred rather than left-aligned because it sits directly under the hero and
   the blue strip, which are the two centred things on this site — a left-aligned
   band there read as a mistake.

   Single column on purpose: the client fills this with a paragraph, a poster,
   or both, and deleting either one has to still look deliberate. */
.spotlight__card {
  background: var(--paper);
  border: 1px solid var(--rule-mid);
  border-top: 3px solid var(--blue-deep);
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.spotlight__title { margin: 0 !important; }

/* The short green rule the eyebrows used to carry, kept as a mark rather than
   a label — the labels themselves were cut as noise. */
.spotlight__title::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: var(--green);
  margin: 1.125rem auto 0;
}

.spotlight__body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text-mid) !important;
  max-width: 58ch;
  margin: 1.5rem auto 0 !important;
}

.spotlight__poster { margin: 2.25rem 0 0 !important; }

/* Until the client sets a poster the image block is empty — WordPress still
   serialises a bare <img> with no src. Collapse the whole figure so the card
   ends cleanly under the text instead of leaving a 20px frame and a gap of
   dead space. The second rule is the fallback for browsers without :has(),
   which lose the margin but not the stray frame. */
.spotlight__poster:has(img:not([src])),
.spotlight__poster:has(img[src=""]) { display: none; }
.spotlight__poster img:not([src]),
.spotlight__poster img[src=""] { display: none; }

.spotlight__poster img {
  display: block;
  /* !important for the same reason as .hero-logo img above. */
  width: auto !important;
  /* Posters are usually portrait. Cap the width so a tall one reads as a poster
     instead of taking over the page, and the height so it cannot run away. */
  max-width: min(100%, 440px) !important;
  max-height: 620px !important;
  height: auto !important;
  margin-inline: auto;
  padding: 10px;
  background: var(--paper-warm);
  border: 1px solid var(--rule-mid);
}

.spotlight__poster figcaption {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-top: 0.75rem;
}

/* If she ever adds a button to the card, centre it with everything else. */
.spotlight .wp-block-buttons { justify-content: center; margin-top: 1.75rem; }