/* ============================================
   LIVING ON PURPOSE — COMPONENTS
   Reusable patterns: nav, footer, hero, buttons, cards, counter
   ============================================ */

/* ============================================
   SECTIONS — tonal backgrounds
   ============================================ */
.section {
  padding-block: var(--space-8);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}

/* Standard centered intro at the top of a section.
   Wide enough to use screen real estate; narrow enough to read.
   Headlines can extend full width; lead text constrains for readability. */
.section__intro {
  text-align: center;
  max-width: 1140px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.section__intro h2 {
  max-width: none;
}
.section__intro .lead {
  margin-top: var(--space-5);
  max-width: 880px;
  margin-inline: auto;
}

.section--cream      { background: var(--lop-cream);      color: var(--lop-brown); }
.section--cream-warm { background: var(--lop-cream-warm); color: var(--lop-brown); }
.section--forest     { background: var(--lop-forest);     color: var(--lop-cream); }
.section--sage       { background: var(--lop-sage);       color: var(--lop-forest); }
.section--brown      { background: var(--lop-brown);      color: var(--lop-cream); }
.section--white      { background: var(--lop-white);      color: var(--lop-brown); }
.section--orange     { background: var(--lop-orange);     color: var(--lop-cream); }

/* On orange sections, headings stay cream (default white-ish) */
.section--orange h1,
.section--orange h2,
.section--orange h3,
.section--orange h4 {
  color: var(--lop-cream);
}

/* On dark sections, headings flip to cream */
.section--forest h1, .section--forest h2, .section--forest h3,
.section--brown h1,  .section--brown h2,  .section--brown h3 {
  color: var(--lop-cream);
}

.section--forest a:not(.btn),
.section--brown a:not(.btn) {
  color: var(--lop-orange);
}

/* On dark sections, body and lead paragraphs need cream text
   (the .lead class explicitly sets brown, which is unreadable on forest/brown). */
.section--forest .lead,
.section--brown .lead,
.section--photo .lead,
.section--orange .lead,
.section--forest p,
.section--brown p {
  color: var(--lop-cream);
}

/* ============================================
   HEADER + NAVIGATION
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lop-cream);
  border-bottom: 1px solid var(--lop-grey-line);
}

/* Announcement bar above the nav */
.announcement {
  background: var(--lop-forest);
  color: var(--lop-cream);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-3) var(--space-4);
}
.announcement a {
  color: var(--lop-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.announcement a:hover {
  color: var(--lop-orange);
}

/* Main nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: var(--gutter);
  max-width: var(--container-wide);
  margin-inline: auto;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display); /* Optima for the wordmark */
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--lop-forest);
}
.nav__logo:hover { color: var(--lop-forest); }
.nav__logo__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}
.nav__logo__text {
  line-height: 1;
}

/* Desktop nav links */
.nav__links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .nav__links { display: flex; align-items: center; }
}

.nav__links > li { position: relative; }

.nav__link {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--lop-brown);
  font-family: var(--font-body); /* Gordita */
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav__link:hover { color: var(--lop-orange); }

/* Dropdown trigger — non-clickable parent label.
   No href because there is no hub page; the dropdown
   IS the navigation surface. Cursor stays as default
   so users don't expect a click to do something. */
.nav__link--parent {
  cursor: default;
  user-select: none;
}
.nav__link--parent:hover { color: var(--lop-orange); }

/* Dropdown */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--lop-white);
  border: 1px solid var(--lop-grey-line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  display: none;
}
.nav__links > li:hover .nav__dropdown,
.nav__links > li:focus-within .nav__dropdown {
  display: block;
}
.nav__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--lop-brown);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.nav__dropdown a:hover {
  background: var(--lop-cream);
  color: var(--lop-orange);
}

/* Mobile menu toggle */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
@media (min-width: 1024px) {
  .nav__toggle { display: none; }
}
.nav__toggle svg { width: 24px; height: 24px; }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--lop-cream);
  padding: var(--space-7) var(--space-5);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 60;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__list {
  list-style: none;
  margin: var(--space-7) 0 0 0;
  padding: 0;
}
/* All top-level mobile nav items: ALL CAPS Gordita 400. */
.mobile-nav__list > li > a,
.mobile-nav__parent {
  display: block;
  padding: var(--space-3) 0;
  color: var(--lop-brown);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--lop-grey-line);
  text-decoration: none;
}
/* Collapsible parent — toggles the sub-list on tap.
   Default state: sub-list hidden, plus icon rotates to × on open. */
.mobile-nav__parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  user-select: none;
}
.mobile-nav__parent::after {
  content: '+';
  font-size: 1.4em;
  font-weight: 300;
  color: var(--lop-orange);
  letter-spacing: 0;
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
  display: inline-block;
  line-height: 1;
}
.mobile-nav__parent.is-open::after {
  transform: rotate(45deg);
}
.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.65, 0, 0.35, 1);
}
.mobile-nav__sub.is-open {
  max-height: 400px;
}
.mobile-nav__sub a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--lop-brown);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--lop-grey-line);
  opacity: 0.85;
}
.mobile-nav__sub a:hover {
  opacity: 1;
  color: var(--lop-orange);
}
/* Mobile donate CTA — full width, prominent at the bottom of the drawer */
.mobile-nav__list .btn--primary {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-6);
  padding: var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
}
.mobile-nav__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 20, 16, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 55;
}
.mobile-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400; /* Rule 7: no bold/medium Gordita on buttons. */
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn--primary {
  background: var(--lop-orange);
  color: var(--lop-cream);
}
.btn--primary:hover {
  background: var(--lop-orange-hover);
  color: var(--lop-cream);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--lop-cream);
  border: 1.5px solid var(--lop-cream);
}
.btn--secondary:hover {
  background: var(--lop-cream);
  color: var(--lop-forest);
}

.btn--ghost {
  background: transparent;
  color: var(--lop-forest);
  border: 1.5px solid var(--lop-forest);
}
.btn--ghost:hover {
  background: var(--lop-forest);
  color: var(--lop-cream);
}

.btn--sage {
  background: var(--lop-sage);
  color: var(--lop-forest);
  border: 1.5px solid var(--lop-sage);
}
.btn--sage:hover {
  background: #7DA59F;
  border-color: #7DA59F;
  color: var(--lop-forest);
}

.btn--brown {
  background: var(--lop-brown);
  color: var(--lop-cream);
  border: 1.5px solid var(--lop-brown);
}
.btn--brown:hover {
  background: var(--lop-orange);
  border-color: var(--lop-orange);
  color: var(--lop-cream);
}

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: flex-end;
  padding: var(--space-9) 0 var(--space-8);
  overflow: hidden;
  background: var(--lop-forest);
  color: var(--lop-cream);
}

/* Border that hovers OVER the video, inset from the hero edges.
   Corner radius matches the program cards (--radius-lg) for visual consistency.
   Use --hero-border-color to override on light heros (e.g. sage). */
.hero::after {
  content: '';
  position: absolute;
  inset: var(--space-4);
  border: 1px solid var(--hero-border-color, rgba(245, 240, 232, 0.45));
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 1;
}

.hero--full {
  min-height: 88vh;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Top-right metadata label inside the hero */
.hero__location {
  position: absolute;
  top: calc(var(--space-4) + var(--space-3));
  right: calc(var(--space-4) + var(--space-3));
  color: var(--lop-cream);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  z-index: 3; /* above border + content */
  opacity: 0.92;
}

.hero__content {
  position: relative;
  z-index: 2; /* above the border overlay */
  width: 100%;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5.5vw, 5rem); /* fluid — smaller min on mobile so long titles never break */
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--lop-cream);
  margin: 0;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  /* Subtle text shadow to maintain legibility without a full overlay layer */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero__subtitle {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  max-width: 52ch;
  color: var(--lop-cream);
  opacity: 0.9;
}

.hero__cta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Compact hero for inner pages */
.hero--compact {
  min-height: 50vh;
}

/* ----------------------------------------------
   .hero--brown — brown-bg editorial hero
   For the Sponsor sub-page. Cream text on brown
   = 13:1 ✓ AAA. Used to give the money-page hero
   a sophisticated, anchored feel.
   ---------------------------------------------- */
.hero--brown {
  background: var(--lop-brown);
}

/* ----------------------------------------------
   .hero--light — light-bg editorial hero (cream-warm)
   For data-forward pages (Impact). Brown text on
   cream-warm = ~13:1 ✓ AAA. Inset frame becomes brown.
   ---------------------------------------------- */
.hero--light {
  background: var(--lop-cream-warm);
  color: var(--lop-brown);
}
.hero--light .hero__title {
  color: var(--lop-brown);
  text-shadow: none;
}
.hero--light .hero__location {
  color: var(--lop-brown);
  opacity: 0.7;
}
.hero--light::after {
  border-color: rgba(61, 48, 24, 0.22);
}

/* ----------------------------------------------
   .hero__breadcrumb — small "back to" link top-left
   of an event sub-page hero. Sits above all hero
   content with z-index 3, like .hero__location.
   ---------------------------------------------- */
.hero__breadcrumb {
  position: absolute;
  top: calc(var(--space-4) + var(--space-3));
  left: calc(var(--space-4) + var(--space-3));
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  z-index: 3;
}
.hero__breadcrumb a {
  color: var(--lop-cream);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 200ms ease;
}
.hero__breadcrumb a:hover {
  opacity: 1;
}
.hero--light .hero__breadcrumb a {
  color: var(--lop-brown);
}

/* ----------------------------------------------
   .hero--photo — still-image hero with black scrim
   for legibility on busy photos. Removes the inset
   bordered frame (which can read as a stray line on
   photos with strong horizontals like a gym ceiling).
   Black scrim is the ONE off-palette color allowed,
   used purely as a darkening filter for legibility.
   Image is sized at 130% with -15% top so parallax
   translation never exposes the hero bg color edges.
   ---------------------------------------------- */
.hero--photo::after {
  display: none;
}
/* Photo hero with the inset bordered frame re-enabled.
   Use when the photo/video bg is dark or busy enough that
   a thin cream frame reads as decorative rather than as a
   stray horizontal line. */
.hero--photo.hero--bordered::after {
  display: block;
}
.hero--photo .hero__media img,
.hero--photo .hero__media video {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
}
.hero--photo .hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.16) 35%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Title shadow tuned for photo legibility without subtitle */
.hero--photo .hero__title {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

/* ============================================
   PROGRAM CARDS
   ============================================ */
.cards-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--lop-cream);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: 4px solid var(--lop-orange);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--lop-forest);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.card__body {
  flex-grow: 1;
  font-size: var(--text-base);
}

.card__link {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--lop-orange);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.card__link:hover { gap: var(--space-3); }

/* ============================================
   COUNTER / STATS WIDGET
   Stat numbers in cream (or color of choice).
   Vertical dividers between stats on desktop.
   ============================================ */
.stats {
  display: grid;
  gap: var(--space-6) 0;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); gap: 0; }
}

.stat {
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  /* Vertical dividers between stats (not after last) */
  .stat:not(:last-child) {
    border-right: 1px solid rgba(245, 240, 232, 0.32);
  }
  /* If section is light, divider should be a darker tint */
  .section--cream .stat:not(:last-child),
  .section--cream-warm .stat:not(:last-child),
  .section--white .stat:not(:last-child) {
    border-right-color: rgba(61, 48, 24, 0.18);
  }
}

.stat__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: currentColor; /* inherit section text color */
  display: block;
}
@media (min-width: 768px) {
  .stat__number { font-size: var(--text-4xl); } /* 80px desktop, smaller than before */
}

.stat__label {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.85;
  line-height: 1.4;
}

/* ============================================
   LOGO GRID (advisory, sponsors)
   Logos display at full presence — no grayscale filter.
   Source files are already designed in restrained palette.
   ============================================ */
.logo-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
}
@media (min-width: 640px) {
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .logo-grid--sm { grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-6); }
}

.logo-grid img {
  width: 100%;
  max-width: 200px;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  transition: transform var(--transition);
  /* No filters — logos display at full presence in their natural colors. */
}
.logo-grid img:hover {
  transform: translateY(-2px);
}
/* On dark sections, give logos a cream tile so they remain legible */
.section--forest .logo-grid img,
.section--brown .logo-grid img {
  background: var(--lop-cream);
  padding: var(--space-3);
  border-radius: var(--radius);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--lop-brown);
  color: var(--lop-cream);
  padding: var(--space-9) 0 var(--space-5);
}
.footer a {
  color: var(--lop-cream);
}
.footer a:hover {
  color: var(--lop-orange);
}

.footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.footer__col h4 {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--lop-orange);
  margin-bottom: var(--space-4);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.footer__blurb {
  font-size: var(--text-sm);
  opacity: 0.85;
  line-height: var(--leading-relaxed);
  max-width: 38ch;
}

.footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(245, 240, 232, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  opacity: 0.75;
}

/* ============================================
   FOUNDER / TEAM CARD
   ============================================ */
.founder-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .founder-grid { grid-template-columns: repeat(3, 1fr); }
}

.founder {
  display: flex;
  flex-direction: column;
}
.founder__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.founder__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--lop-forest);
  margin-bottom: var(--space-1);
}
.founder__role {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--lop-orange);
  margin-bottom: var(--space-4);
}

/* Color accent — by founder */
.founder--orange .founder__photo { border-top: 4px solid var(--lop-orange); }
.founder--forest .founder__photo { border-top: 4px solid var(--lop-forest); }
.founder--sage   .founder__photo { border-top: 4px solid var(--lop-sage); }

/* ============================================
   SCROLL REVEAL
   ============================================ */
/* ============================================
   SCROLL REVEAL
   Fade-up for body. Zoom + fade for headlines
   (mimics Squarespace's heading-on-scroll effect).
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Headlines: pronounced zoom-in + fade.
   Headlines start at 80% scale and grow to full size on scroll-in.
   Zoom is the dominant motion — minimal Y-translation. */
h1[data-reveal],
h2[data-reveal],
[data-reveal-strong] {
  transform: translateY(12px) scale(0.82);
  transform-origin: center center;
  transition: opacity 1300ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
}
h1[data-reveal].is-revealed,
h2[data-reveal].is-revealed,
[data-reveal-strong].is-revealed {
  transform: translateY(0) scale(1);
}

/* ============================================
   CONTAINER SIZES (utility — additive to existing rules)
   ============================================ */
.container--xwide { max-width: var(--container-xwide); }

/* ============================================
   FEATURE ROW — alternating image + text layouts
   The heart of the editorial-style design language.
   Use multiple of these stacked for visual rhythm.
   ============================================ */
.feature-row {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .feature-row--wide-image { grid-template-columns: 1.4fr 1fr; }
  .feature-row--wide-text  { grid-template-columns: 1fr 1.3fr; }
}

.feature-row__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--lop-sage);
  aspect-ratio: 4 / 5;
}
.feature-row__media img,
.feature-row__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms ease;
}
.feature-row:hover .feature-row__media img {
  transform: scale(1.03);
}
@media (min-width: 900px) {
  .feature-row__media--landscape { aspect-ratio: 5 / 4; }
}

/* Reverse the image/text order */
@media (min-width: 900px) {
  .feature-row--reverse .feature-row__media { order: 2; }
}

.feature-row__content > * + * {
  margin-top: var(--space-5);
}
.feature-row__content h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.feature-row__content .lead {
  font-size: var(--text-md);
}

/* Decorative accent bar above headline */
.feature-row__content .eyebrow + h2 {
  margin-top: var(--space-3);
}

/* ============================================
   SECTION WITH IMAGE BACKGROUND
   Full-bleed photo with overlay for text legibility.
   ============================================ */
.section--photo {
  position: relative;
  color: var(--lop-cream);
  overflow: hidden;
  background: var(--lop-forest);
  padding-block: var(--space-10);
  isolation: isolate;
}
.section--photo > * { position: relative; z-index: 2; }

.section--photo .section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section--photo .section__bg img,
.section--photo .section__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--photo .section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(30, 77, 59, 0.85) 0%,
    rgba(30, 77, 59, 0.65) 50%,
    rgba(30, 77, 59, 0.4) 100%
  );
  z-index: 1;
}
.section--photo h1,
.section--photo h2,
.section--photo h3 { color: var(--lop-cream); }

/* Variant: dark from bottom (for hero-y content) */
.section--photo.section--photo-bottom .section__bg::after {
  background: linear-gradient(
    to top,
    rgba(30, 77, 59, 0.92) 0%,
    rgba(30, 77, 59, 0.55) 60%,
    rgba(30, 77, 59, 0.25) 100%
  );
}

/* Variant: minimal — no green tint, just slight darkening for text legibility */
.section--photo.section--photo-clean .section__bg::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* ============================================
   EVENT SPLIT — true 50/50 photo + solid color block
   For event/announcement sections like All-Star Impact House.
   Photo on one side, forest green text panel on the other.
   ============================================ */
.event-split {
  background: var(--lop-forest);
  position: relative;
  isolation: isolate;
}
/* Brown panel variant — text panel uses --lop-brown instead of forest */
.event-split--brown { background: var(--lop-brown); }
.event-split--brown .event-split__media { background: var(--lop-brown); }

/* Sage panel variant — text panel uses --lop-sage with forest text */
.event-split--sage { background: var(--lop-sage); }
.event-split--sage .event-split__media { background: var(--lop-sage); }
.event-split--sage .event-split__content,
.event-split--sage .event-split__content h2,
.event-split--sage .event-split__content h3,
.event-split--sage .event-split__content p,
.event-split--sage .event-split__content .eyebrow {
  color: var(--lop-forest);
}
.event-split--sage .event-split__content .eyebrow {
  /* Forest on sage = 6:1 ✓ AA. Orange-on-sage fails (1.4:1) so we mono-tone
     the sage variant in forest with weight + style for hierarchy. */
  color: var(--lop-forest);
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  font-weight: 500;
  opacity: 1;
}
.event-split--sage .flourish {
  /* Forest on sage = 6:1 contrast for the underline accent (orange would fail) */
  background-image: linear-gradient(var(--lop-forest), var(--lop-forest));
}
/* When an event-split content panel includes an .event-split__credit
   line at the bottom, switch the panel to top-anchored layout so the
   credit can float to the bottom via margin-top:auto. Also tighten
   eyebrow style to tracked-caps Gordita for consistency with credit. */
.event-split__content:has(.event-split__credit) {
  justify-content: flex-start;
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
}
.event-split__content:has(.event-split__credit) > .eyebrow {
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  font-weight: 500;
  opacity: 1;
  margin-bottom: var(--space-4);
}
.event-split--brown .event-split__content:has(.event-split__credit) > .eyebrow {
  color: var(--lop-sage);  /* sage on brown ≈ 5.5:1 ✓ AA */
}
.event-split--sage .event-split__content:has(.event-split__credit) > .eyebrow {
  color: var(--lop-forest);  /* forest on sage ≈ 6:1 ✓ AA */
}

/* Sage event-split: 3-color treatment — sage panel + forest text + brown
   accents on icons for warmth. Forest on sage = 6:1 (AA). Brown on sage
   = 3.5:1 — passes 3:1 minimum for the large +/× icons (text-2xl).
   Small caps labels stay forest to remain WCAG AA compliant. */
.event-split--sage .accordion {
  border-top-color: rgba(30, 77, 59, 0.28);
}
.event-split--sage .accordion__item {
  border-bottom-color: rgba(30, 77, 59, 0.28);
}
.event-split--sage .accordion__label,
.event-split--sage .accordion__title {
  color: var(--lop-forest);
}
.event-split--sage .accordion__icon {
  color: var(--lop-brown);  /* 3rd color — brown accent on the large icons */
}
.event-split--sage .accordion__content p {
  color: var(--lop-forest);
  opacity: 0.88;
}
.event-split--sage .accordion__trigger {
  color: var(--lop-forest);
}
/* Subtle brown highlight on the OPEN accordion item label,
   echoing the icon and reinforcing the 3-color hierarchy. */
.event-split--sage .accordion__item.is-open .accordion__label {
  color: var(--lop-brown);
}
.event-split::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--lop-orange);
  z-index: 3;
}
/* Variant without the orange top bar (for the mission split, etc.) */
.event-split--no-bar::before { display: none; }

/* Reverse layout — photo on RIGHT, forest panel on LEFT */
@media (min-width: 900px) {
  .event-split--reverse .event-split__media   { order: 2; }
  .event-split--reverse .event-split__content { order: 1; }
}

/* Compact variant — for long body-style headlines.
   Smaller H2 and tighter padding, but tall enough that portrait
   photos don't crop the subject's head. */
.event-split--compact .event-split__grid {
  min-height: clamp(440px, 60vh, 580px);
}
.event-split--compact .event-split__media {
  min-height: 380px;
}
.event-split--compact .event-split__content {
  padding: clamp(var(--space-7), 4vw, var(--space-8))
           clamp(var(--space-6), 4vw, var(--space-8));
  max-width: 720px;
}
.event-split--compact .event-split__content h2 {
  font-size: clamp(1.625rem, 2.6vw, 2.5rem); /* 26-40px */
  line-height: 1.25;
}
.event-split--compact .event-split__content .cta-row {
  margin-top: var(--space-6);
}
.event-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 480px;
}
@media (min-width: 900px) {
  .event-split__grid {
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
  }
}
.event-split__media {
  position: relative;
  background: var(--lop-cream);
  min-height: 340px;
  overflow: hidden;
}
.event-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* default object-position keeps the head/upper body visible for portrait shots */
  object-position: center 28%;
}

/* When parallax is active on the media, image is sized larger than
   container so it has room to translate without exposing edges.
   Active on all viewports — mobile parallax included. */
@media (prefers-reduced-motion: no-preference) {
  .event-split__media[data-parallax] img {
    height: 130%;
    top: -15%;
    will-change: transform;
  }
}
.event-split__content {
  padding: var(--space-8) var(--space-6);
  color: var(--lop-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
}
@media (min-width: 900px) {
  .event-split__content {
    padding: var(--space-9) clamp(var(--space-7), 5vw, var(--space-9));
  }
}
.event-split__content .eyebrow {
  color: var(--lop-cream);
  opacity: 0.85;
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-md);
  margin-bottom: var(--space-3);
}
.event-split__content h2 {
  color: var(--lop-cream);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.event-split__content p {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--lop-cream);
}
.event-split__content .highlight {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-style: italic;
  font-family: var(--font-display);
}
.event-split__content .cta-row {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ============================================
   MEDIA CARDS — cards with a header image
   Use for programs, events, etc.
   ============================================ */
.card--media {
  background: var(--lop-cream);
  border: 1px solid var(--lop-sage);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card--media:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--lop-forest);
}

.card--media .card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lop-sage);
}
.card--media .card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Parallax variant — image sized larger than container so it has
   room to translate vertically without exposing edges. Active on
   all viewports including mobile. */
@media (prefers-reduced-motion: no-preference) {
  .card--media .card__media[data-parallax] img {
    height: 130%;
    top: -15%;
    will-change: transform;
  }
}

/* Tinted overlay on each program card — subtle brand color wash */
.card--media .card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 77, 59, 0) 60%, rgba(30, 77, 59, 0.55) 100%);
  pointer-events: none;
}

.card--media .card__inner {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}

.card--media .card__eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--lop-orange);
  font-weight: 600;
}

.card--media .card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--lop-forest);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.card--media .card__body {
  flex-grow: 1;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Color accent strip per program */
.card--media.card--orange { box-shadow: inset 0 4px 0 var(--lop-orange); }
.card--media.card--forest { box-shadow: inset 0 4px 0 var(--lop-forest); }
.card--media.card--sage   { box-shadow: inset 0 4px 0 var(--lop-sage); }

/* ============================================
   PULLQUOTE
   ============================================ */
.quote {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--lop-orange);
  margin-bottom: var(--space-3);
}
.quote__text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-style: italic;
  color: var(--color-heading);
}
.quote__attr {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.75;
}

/* ============================================
   GALLERY STRIP — horizontal photo row
   ============================================ */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.gallery-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 600ms ease;
}
.gallery-strip img:hover {
  transform: translateY(-4px);
}

/* ============================================
   SPLIT — generic 2-column inside a section
   ============================================ */
.split {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--asymmetric { grid-template-columns: 0.45fr 0.55fr; gap: var(--space-9); }
}

/* ============================================
   SCROLL CUE — animated arrow at bottom of hero
   ============================================ */
.scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--lop-cream);
  opacity: 0.85;
  text-align: center;
  z-index: 2;
  transition: opacity var(--transition);
}
.scroll-cue:hover { opacity: 1; }
.scroll-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 36px;
  margin: var(--space-3) auto 0;
  background: var(--lop-cream);
  animation: scroll-cue-pulse 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scroll-cue-pulse {
  0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ============================================
   LOGO CAROUSEL — auto-scrolling marquee
   Continuous infinite scroll. Pause on hover.
   Section bg is cream so logos with cream backgrounds
   blend cleanly into the section.
   ============================================ */
.logo-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade edges so logos appear/disappear softly instead of hard cut */
  mask-image: linear-gradient(to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%);
}

.logo-carousel__track {
  display: flex;
  gap: var(--space-7);
  width: max-content;
  align-items: center;
  animation: logo-marquee 40s linear infinite;
}
.logo-carousel:hover .logo-carousel__track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-carousel__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 200px;
}
.logo-carousel__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}

@media (min-width: 768px) {
  .logo-carousel__item {
    height: 140px;
    width: 240px;
  }
}

/* Pause animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel__track {
    animation: none;
  }
}

/* ============================================
   PILLARS — numbered vertical list of program offerings
   Used on program detail pages ("What we provide").
   Each pillar: italic Optima orange number, Optima title,
   Gordita body, sage hairline dividers between rows.
   ============================================ */
.pillars {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
}

.pillar {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(61, 48, 24, 0.18);
  align-items: start;
  transition: padding-left 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.pillar:first-child {
  border-top: 1px solid rgba(61, 48, 24, 0.18);
}

.pillar:hover {
  padding-left: var(--space-3);
}

.pillar__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 400;
  line-height: 0.95;
  color: var(--lop-orange);
  letter-spacing: -0.01em;
}

.pillar__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  color: var(--lop-brown);
}

.pillar__body {
  margin: 0;
  max-width: 64ch;
  color: var(--lop-brown);
  opacity: 0.88;
}

/* Pillars on dark sections — invert text colors */
.section--forest .pillar,
.section--brown .pillar {
  border-color: rgba(245, 240, 232, 0.18);
}
.section--forest .pillar__title,
.section--brown .pillar__title,
.section--forest .pillar__body,
.section--brown .pillar__body {
  color: var(--lop-cream);
}
.section--forest .pillar__body,
.section--brown .pillar__body {
  opacity: 0.86;
}

/* Mobile: stack number above title */
@media (max-width: 640px) {
  .pillar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .pillar__number {
    font-size: var(--text-2xl);
  }
}

/* ============================================
   TRIPTYCH — editorial 3-column outcomes strip
   Used to showcase Benefit / Impact / Outcome with
   large italic Optima words as the primary visual.
   Hairline dividers between columns. New visual
   pattern (not pillars / cards / event-split).
   ============================================ */
.triptych {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(30, 77, 59, 0.28);
  border-bottom: 1px solid rgba(30, 77, 59, 0.28);
}

.triptych__col {
  padding: var(--space-7) var(--space-5);
  border-right: 1px solid rgba(30, 77, 59, 0.28);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background 400ms ease, padding-top 400ms ease;
}
.triptych__col:last-child {
  border-right: none;
}
.triptych__col:hover {
  background: rgba(30, 77, 59, 0.06);
  padding-top: calc(var(--space-7) - 4px);
}

.triptych__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-orange);
}

.triptych__head {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  font-style: italic;
  color: var(--lop-forest);
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.triptych__body {
  margin: 0;
  color: var(--lop-forest);
  opacity: 0.88;
  max-width: 32ch;
  font-size: var(--text-base);
}

/* Triptych footer — optional small stat or quote line */
.triptych-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--lop-forest);
  opacity: 0.82;
}

@media (max-width: 900px) {
  .triptych {
    grid-template-columns: 1fr;
    border-top: none;
    border-bottom: none;
  }
  .triptych__col {
    border-right: none;
    border-bottom: 1px solid rgba(30, 77, 59, 0.28);
    padding: var(--space-6) 0;
  }
  .triptych__col:first-child {
    border-top: 1px solid rgba(30, 77, 59, 0.28);
  }
  .triptych__col:last-child {
    border-bottom: 1px solid rgba(30, 77, 59, 0.28);
  }
  .triptych__head {
    font-size: var(--text-4xl);
  }
}

/* ============================================
   HACKATHON FEATURE — slideshow (left) + accordion (right)
   2-col layout for editorial showcase of past event:
   auto-playing image slideshow paired with an
   expandable narrative on Build / Show / Win.
   ============================================ */
/* ----- SLIDESHOW (used inside .event-split__media or standalone) ----- */
.slideshow {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--lop-sage);
}
.slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms ease;
  pointer-events: none;
}
.slideshow__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* When slideshow lives inside .event-split__media, fill the cell
   absolutely and override the default img object-position (28%) so
   the subjects in each slide sit closer to the visual center. */
.event-split__media--slideshow {
  padding: 0;
}
.event-split__media--slideshow .slideshow {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}
.event-split__media .slideshow__slide img {
  object-position: center 25%;
}

/* ============================================
   DETAIL-LIST — compact key/value list used inside
   event-split content panels for event details
   (date, schedule, location, etc.). Sits below
   the body paragraph, above the CTA row.
   ============================================ */
.detail-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.detail-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding-left: var(--space-3);
  position: relative;
  opacity: 0.92;
}
.detail-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  opacity: 0.55;
}
.detail-list li strong {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============================================
   ROOM-LIST — 2-column "Who's in the room"
   curation list. Used on the sponsor page below
   the Why Sponsor cards on the brown bg section.
   ============================================ */
.room-list {
  list-style: none;
  padding: 0;
  margin: var(--space-7) auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .room-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-6);
  }
}
.room-list li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-top: 1px solid rgba(245, 240, 232, 0.18);
  position: relative;
  opacity: 0.92;
}
.room-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: var(--space-3);
  color: var(--lop-sage);
  opacity: 0.7;
}

/* ============================================
   CALLOUT — distinct info block used inside
   event-split content panels. Visually breaks from
   the body copy with a sage left border + slight
   background tint. Currently used on the Youth
   "Now Enrolling" section for the future-cohort
   notice.
   ============================================ */
.callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--lop-sage);
  background: rgba(141, 181, 176, 0.12);
  border-radius: 4px;
}
.callout__label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-sage);
  margin-bottom: var(--space-2);
  opacity: 0.95;
}
.callout__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
  opacity: 0.95;
}
/* Inside light-bg panels (sage event-splits, brown), keep label readable. */
.event-split--sage .callout__label { color: var(--lop-forest); }
.event-split--sage .callout {
  background: rgba(30, 77, 59, 0.08);
  border-left-color: var(--lop-forest);
}
.event-split--brown .callout {
  background: rgba(245, 240, 232, 0.08);
}

/* ============================================
   INFO-CARDS — visual detail grid used on the
   Tip-Off Academy "details" section. Replaces a
   plain bulleted list with a 2-col (mobile 1-col)
   grid of cream-warm cards, each with an icon,
   tracked-caps label, large value (Optima italic
   moments), and a small sub-line. The 7th card
   (wide) spans both columns to feel intentional
   rather than orphaned.
   ============================================ */
.info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .info-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}
@media (min-width: 1100px) {
  .info-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.info-card {
  background: var(--lop-cream-warm);
  border: 1px solid rgba(30, 77, 59, 0.16);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(30, 77, 59, 0.12);
  border-color: var(--lop-orange);
}
.info-card--wide {
  grid-column: 1 / -1;
}

.info-card__icon {
  width: 36px;
  height: 36px;
  color: var(--lop-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.info-card__icon svg {
  width: 100%;
  height: 100%;
}

.info-card__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-forest);
  opacity: 0.65;
}

.info-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.15;
  color: var(--lop-brown);
  margin: 0;
}
.info-card__value em {
  color: var(--lop-orange);
  font-style: italic;
}

.info-card__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--lop-brown);
  opacity: 0.75;
  margin: 0;
}

/* ============================================
   SCHEDULE-TOGGLE — CSS-only tab switcher used on
   the hackathon page to show two views of "The Day":
   one for students, one for sponsors. Hidden radio
   inputs drive the toggle via sibling combinators —
   no JS required.
   ============================================ */
.schedule-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schedule-toggle__tabs {
  display: inline-flex;
  gap: 0;
  background: rgba(245, 240, 232, 0.08);
  border: 1px solid rgba(245, 240, 232, 0.22);
  border-radius: var(--radius-md);
  padding: 4px;
  margin: 0 0 var(--space-6);
}
.schedule-toggle__tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lop-cream);
  opacity: 0.7;
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
  user-select: none;
}
.schedule-toggle__tab:hover {
  opacity: 1;
}
/* Active-tab state — driven by which radio is :checked. */
#view-students:checked ~ .schedule-toggle__tabs label[for="view-students"],
#view-sponsors:checked ~ .schedule-toggle__tabs label[for="view-sponsors"] {
  background: var(--lop-orange);
  color: var(--lop-cream);
  opacity: 1;
}

/* View swap — only the selected view is visible. */
/* High-specificity so we win against .schedule-list { display: flex }
   which is declared later in the cascade. */
.schedule-toggle .schedule-toggle__view { display: none; }
.schedule-toggle #view-students:checked ~ .schedule-toggle__view--students,
.schedule-toggle #view-sponsors:checked ~ .schedule-toggle__view--sponsors {
  display: flex;
}

/* Force any data-reveal items inside a toggled view to show — the
   IntersectionObserver won't fire on display:none parents, so the
   items would be stuck at opacity 0 when revealed via the tab. */
.schedule-toggle__view [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   IN-KIND CARDS — visual-rich card grid for the
   sponsor page's "Monetary isn't the only way"
   section. Replaces the plain .opp-card pattern with
   cream-warm filled cards + icons so they actually
   read on the sage section background.
   ============================================ */
.in-kind-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (min-width: 720px) {
  .in-kind-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
  }
}
@media (min-width: 1100px) {
  .in-kind-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.in-kind-card {
  background: var(--lop-cream-warm);
  border: 1px solid rgba(30, 77, 59, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.in-kind-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30, 77, 59, 0.16);
  border-color: var(--lop-orange);
}

.in-kind-card__icon {
  width: 34px;
  height: 34px;
  color: var(--lop-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.in-kind-card__icon svg {
  width: 100%;
  height: 100%;
}

.in-kind-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: var(--lop-brown);
}

.in-kind-card__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  color: var(--lop-brown);
  opacity: 0.78;
}

/* ============================================
   PROVEN CARDS — two-column credibility block used
   on the hackathon page for Rhymes with Reason's
   Vallejo + Providence track-record data. Cream-warm
   section bg, white cards on top so the data pops.
   ============================================ */
.proven-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 900px) {
  .proven-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.proven-card {
  background: var(--lop-cream);
  border: 1px solid rgba(30, 77, 59, 0.16);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.proven-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30, 77, 59, 0.14);
  border-color: var(--lop-orange);
}

.proven-card__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-orange);
}

.proven-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--lop-brown);
  margin: 0;
}

.proven-card__count {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--lop-brown);
  opacity: 0.85;
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(30, 77, 59, 0.16);
}
.proven-card__count strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  font-weight: 400;
  color: var(--lop-orange);
  margin-right: var(--space-2);
}

.proven-card__intro {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--lop-brown);
  opacity: 0.82;
  margin: 0;
}

.proven-card__results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.proven-card__results li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--lop-brown);
  opacity: 0.88;
  padding-left: var(--space-4);
  position: relative;
}
.proven-card__results li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--lop-orange);
  opacity: 0.7;
}
.proven-card__results li strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--lop-orange);
}

/* ============================================
   LEGACY-STATS — horizontal 3-up stat strip used
   on the about page "Our Roots · Changing Faces"
   section. Sits between the H2 and the body copy
   as a quiet anchor for the heritage moment.
   ============================================ */
.legacy-stats {
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0 var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  border-top: 1px solid rgba(245, 240, 232, 0.2);
  border-bottom: 1px solid rgba(245, 240, 232, 0.2);
  padding-block: var(--space-5);
}
@media (min-width: 720px) {
  .legacy-stats {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}
.legacy-stats li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}
.legacy-stats__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--lop-orange);
}
.legacy-stats__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lop-cream);
  opacity: 0.78;
  max-width: 22ch;
  margin-inline: auto;
  line-height: 1.4;
}

/* ============================================
   LEGACY-BODY — two-column editorial body for the
   Changing Faces history paragraphs. Sits in a wide
   container with 2 columns on desktop so the text
   reads horizontally instead of stacking vertically.
   Single column on mobile.
   ============================================ */
.legacy-body {
  text-align: left;
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .legacy-body {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}
.legacy-body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--lop-cream);
  opacity: 0.92;
  margin: 0;
}
.legacy-body p strong {
  font-weight: 500;
  color: var(--lop-orange);
}

/* ============================================
   HOME-ORIGIN — short editorial blurb on the
   homepage orange section, above the "Recognized by"
   awards. The condensed version of the about page
   "Our Roots" section. Centered editorial column;
   H2 and body share the same max-width so the
   wrapping is balanced, not stair-stepped.
   ============================================ */
.home-origin {
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}
.home-origin h2 {
  max-width: 880px;
  margin-inline: auto;
}
.home-origin h2 em {
  color: var(--lop-cream);
  font-style: italic;
}
.home-origin__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--lop-cream);
  opacity: 0.94;
  margin: var(--space-5) auto 0;
  max-width: 68ch;
}
.home-origin__body strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  color: var(--lop-cream);
}
.home-origin__link {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--lop-cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 240, 232, 0.5);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.home-origin__link:hover {
  border-color: var(--lop-cream);
}

/* ============================================
   JOIN-CARDS — 2-up program enrollment grid used
   on the Youth page. Each card is a visually rich
   "door is open" feature: photo on top, content
   below with tag, title, lead, fact list, note,
   and a primary CTA. Replaces what used to be two
   separate event-splits (Now Enrolling + Tip-Off).
   ============================================ */
.join-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 900px) {
  .join-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.join-card {
  background: var(--lop-cream-warm);
  border: 1px solid rgba(30, 77, 59, 0.16);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.join-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30, 77, 59, 0.16);
  border-color: var(--lop-orange);
}

.join-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
/* Image is sized at 150% with -25% top offset — gives the parallax
   JS a 25% buffer top and bottom (vs JS max translation of 14% of
   container height), so the photo never exposes the card background
   even at the extremes of the scroll. The bigger size also produces
   a tighter, more zoomed-in crop on the visible photo. */
.join-card__media img {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
}

.join-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.join-card__tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lop-orange);
  display: inline-block;
}

.join-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--lop-brown);
  margin: 0;
}
.join-card__title em {
  color: var(--lop-orange);
  font-style: italic;
}

.join-card__lead {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--lop-brown);
  opacity: 0.92;
  margin: 0;
}
.join-card__lead strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--lop-orange);
}

.join-card__facts {
  list-style: none;
  padding: var(--space-3) 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  border-top: 1px solid rgba(30, 77, 59, 0.16);
  border-bottom: 1px solid rgba(30, 77, 59, 0.16);
}
.join-card__facts li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--lop-brown);
}
.join-card__facts li span {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-forest);
  opacity: 0.6;
  margin-bottom: 2px;
}

.join-card__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--lop-brown);
  opacity: 0.78;
  margin: 0;
}
.join-card__note strong {
  font-weight: 500;
  color: var(--lop-orange);
  opacity: 1;
}

.join-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Light-bg variant for the sponsor page (cream-warm section).
   Tab colors flip to forest text + sage border on light bg. */
.schedule-toggle--light .schedule-toggle__tabs {
  background: rgba(30, 77, 59, 0.06);
  border-color: rgba(30, 77, 59, 0.2);
}
.schedule-toggle--light .schedule-toggle__tab {
  color: var(--lop-forest);
}
.schedule-toggle--light #view-students:checked ~ .schedule-toggle__tabs label[for="view-students"],
.schedule-toggle--light #view-sponsors:checked ~ .schedule-toggle__tabs label[for="view-sponsors"],
.schedule-toggle--light input[type="radio"]:checked ~ .schedule-toggle__tabs label {
  background: var(--lop-orange);
  color: var(--lop-cream);
}

/* Sponsor / credit eyebrow at the bottom of the event-split content panel.
   Pushes itself to the bottom with margin-top:auto so the H2 and accordion
   stay near the top of the panel. Tracked-caps Gordita with section-appropriate
   accent color (sage on brown variant, orange on light variants). */
.event-split__credit {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  font-weight: 500;
  text-transform: uppercase;
  display: inline-block;
  font-family: var(--font-body);
  font-style: normal;
}
.event-split--brown .event-split__credit { color: var(--lop-sage); }
.event-split--sage .event-split__credit { color: var(--lop-forest); }  /* forest on sage = 6:1 ✓ AA */

/* Accordion colorway for dark event-split panels (forest default + brown).
   Both use cream titles and sage labels/icons for AA-AAA contrast. The
   sage variant overrides further down. */
.event-split .accordion {
  border-top-color: rgba(245, 240, 232, 0.22);
}
.event-split .accordion__item {
  border-bottom-color: rgba(245, 240, 232, 0.22);
}
.event-split .accordion__label {
  color: var(--lop-sage);  /* sage on forest/brown ≈ 5.5–6:1 ✓ AA */
}
.event-split .accordion__title {
  color: var(--lop-cream);  /* cream on forest = 11:1, on brown = 13:1 ✓ AAA */
}
.event-split .accordion__icon {
  color: var(--lop-sage);
}
.event-split .accordion__content p {
  color: var(--lop-cream);
  opacity: 0.92;
}
.event-split .accordion__trigger {
  color: var(--lop-cream);
}

/* The accordion when nested inside an event-split content panel:
   add some top margin so it doesn't crowd the H2; remove the
   align-self centering since the panel handles vertical layout. */
.event-split__content .accordion {
  margin-top: var(--space-5);
  align-self: stretch;
}

/* ----- ACCORDION (right side) ----- */
.accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(30, 77, 59, 0.28);
  align-self: center;
}
.accordion__item {
  border-bottom: 1px solid rgba(30, 77, 59, 0.28);
}
.accordion__trigger {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "title icon";
  column-gap: var(--space-4);
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-5) 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--lop-forest);
  transition: padding-left 400ms ease;
}
.accordion__trigger:hover {
  padding-left: var(--space-3);
}
.accordion__label {
  grid-area: label;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-orange);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.accordion__title {
  grid-area: title;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 400;
  margin: 0;
  line-height: 0.95;
  color: var(--lop-forest);
}
.accordion__icon {
  grid-area: icon;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--lop-orange);
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
  width: 28px;
  text-align: center;
  align-self: center;
  display: inline-block;
  line-height: 1;
}
.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
}
.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.accordion__item.is-open .accordion__content {
  max-height: 320px;
}
.accordion__content p {
  margin: 0;
  padding: 0 0 var(--space-5) 0;
  color: var(--lop-forest);
  opacity: 0.88;
  max-width: 38ch;
  font-size: var(--text-base);
}

/* ============================================
   HACKATHON GALLERY — editorial photo strip
   for showcasing past event programming.
   2-col asymmetric: panoramic full-width strips
   bookend two side-by-side portrait moments.
   Each tile: rounded corners, sage outline,
   parallax + hover scale on the image.
   ============================================ */
.hackathon-gallery {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.hackathon-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(30, 77, 59, 0.30);
  background: var(--lop-sage);
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1);
}

.hackathon-gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
}

.hackathon-gallery__item:hover {
  transform: translateY(-3px);
}

.hackathon-gallery__item:hover img {
  transform: scale(1.04);
}

/* Parallax variant — image sized larger so translation never exposes edges.
   Mirrors the .card--media[data-parallax] pattern. Active on all viewports. */
@media (prefers-reduced-motion: no-preference) {
  .hackathon-gallery__item[data-parallax] img {
    height: 130%;
    top: -15%;
    will-change: transform;
  }
}

/* Cell variants by aspect ratio */
.hackathon-gallery__item--pano {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}
.hackathon-gallery__item--portrait {
  aspect-ratio: 3 / 2;
}

@media (max-width: 700px) {
  .hackathon-gallery {
    grid-template-columns: 1fr;
  }
  .hackathon-gallery__item--portrait {
    grid-column: 1 / -1;
  }
  .hackathon-gallery__item--pano {
    aspect-ratio: 16 / 9;
  }
}

/* Sponsor / event credit line beneath the gallery */
.hackathon-credit {
  margin-top: var(--space-5);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--lop-forest);
  opacity: 0.8;
}
.hackathon-credit strong {
  font-weight: 500;
  color: var(--lop-forest);
  opacity: 1;
}

/* ============================================
   AWARDS LIST — editorial chronological list
   Year on left in italic Optima orange, title on right.
   Sage hairlines between rows. Used on Impact page.
   ============================================ */
.awards-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
  border-top: 1px solid rgba(245, 240, 232, 0.20);
}
.award {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(245, 240, 232, 0.20);
  align-items: baseline;
  transition: padding-left 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.award:hover {
  padding-left: var(--space-3);
}
.award__year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--lop-orange);
  letter-spacing: -0.01em;
}
.award__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  line-height: 1.3;
  color: var(--lop-cream);
  margin: 0;
}
.award__org {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--lop-cream);
  opacity: 0.7;
}

/* Awards on light backgrounds — invert text color */
.section--cream .awards-list,
.section--cream-warm .awards-list,
.section--sage .awards-list {
  border-top-color: rgba(30, 77, 59, 0.22);
}
.section--cream .award,
.section--cream-warm .award,
.section--sage .award {
  border-bottom-color: rgba(30, 77, 59, 0.22);
}
.section--cream .award__title,
.section--cream-warm .award__title,
.section--sage .award__title {
  color: var(--lop-brown);
}
.section--cream .award__org,
.section--cream-warm .award__org,
.section--sage .award__org {
  color: var(--lop-brown);
}

@media (max-width: 640px) {
  .award {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .award__year {
    font-size: var(--text-xl);
  }
}

/* ============================================
   TESTIMONIALS — 3-column quote grid
   Italic Optima quote with tracked-caps attribution.
   Used on Impact page over a sage section.
   ============================================ */
.testimonials {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.testimonial {
  margin: 0;
  padding: var(--space-5) 0 var(--space-5) var(--space-5);
  border-left: 2px solid var(--lop-orange);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonial__quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--lop-forest);
}
.testimonial__attribution {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lop-forest);
  font-weight: 500;
}
.testimonial__attribution span {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  opacity: 0.8;
}

@media (max-width: 900px) {
  .testimonials {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ============================================
   PULLQUOTE — large editorial quote moment
   Used for the founder pullquote on Impact.
   ============================================ */
.pullquote {
  margin: var(--space-6) auto var(--space-7);
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.4;
  color: var(--lop-brown);
  max-width: 60ch;
}
.pullquote::before { content: '\201C'; color: var(--lop-orange); margin-right: 0.05em; }
.pullquote::after  { content: '\201D'; color: var(--lop-orange); margin-left: 0.05em; }
.pullquote__attribution {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-brown);
  opacity: 0.65;
  font-weight: 500;
}

/* ============================================
   CHALLENGE GRID — asymmetric 2-col editorial layout
   Used on hackathon page Challenge section.
   Left column: eyebrow + giant H2 question.
   Right column: body + eligibility summary.
   Stacks on mobile.
   ============================================ */
.challenge-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-7) var(--space-9);
  align-items: start;
}
.challenge-grid__left .eyebrow {
  margin-bottom: var(--space-3);
}
.challenge-grid__left h2 {
  /* Section-specific override per Rule 3 — display titles should scale up */
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  line-height: 1.05;
  margin: 0;
}
.challenge-grid__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-3);
}
.challenge-grid__right .lead {
  margin: 0;
}
.challenge-grid__right p {
  margin: 0;
}
.challenge-grid__eligibility {
  margin-top: var(--space-3) !important;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(61, 48, 24, 0.18);
  padding-top: var(--space-4);
}
.challenge-grid__alignment {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
@media (max-width: 900px) {
  .challenge-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .challenge-grid__left h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* ============================================
   SCHEDULE LIST — editorial timeline (time + title)
   Used on event sub-pages to show a day's agenda.
   Uses italic Optima orange time on the left,
   Optima title on the right, sage hairline dividers.
   ============================================ */
.schedule-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
  border-top: 1px solid rgba(30, 77, 59, 0.22);
}
.schedule-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(30, 77, 59, 0.22);
  align-items: start;
  transition: padding-left 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.schedule-row:hover {
  padding-left: var(--space-3);
}
.schedule-row__time {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.1;
  color: var(--lop-orange);
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding-top: var(--space-1);
}
.schedule-row__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.schedule-row__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.25;
  color: var(--lop-brown);
  margin: 0;
}
.schedule-row__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--lop-brown);
  opacity: 0.82;
  margin: 0;
  max-width: 56ch;
}
.section--forest .schedule-row__body,
.section--brown .schedule-row__body {
  color: var(--lop-cream);
  opacity: 0.85;
}

/* Time accent color overrides per section bg. Orange on sage fails
   contrast (1.4:1) — use forest. On dark sections, use sage. */
.section--sage .schedule-row__time {
  color: var(--lop-forest);  /* 6:1 ✓ AA */
}
.section--forest .schedule-row__time,
.section--brown .schedule-row__time {
  color: var(--lop-sage);  /* sage on dark = 5.5–6:1 ✓ AA */
}

/* On dark sections — invert title color */
.section--forest .schedule-list,
.section--brown .schedule-list {
  border-top-color: rgba(245, 240, 232, 0.22);
}
.section--forest .schedule-row,
.section--brown .schedule-row {
  border-bottom-color: rgba(245, 240, 232, 0.22);
}
.section--forest .schedule-row__title,
.section--brown .schedule-row__title {
  color: var(--lop-cream);
}

@media (max-width: 640px) {
  .schedule-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ============================================
   SPEAKERS GRID — 3-col text-only speaker cards
   Used on event sub-pages. Tracked-caps role,
   Optima name, brief bio underneath.
   ============================================ */
.speakers-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .speakers-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .speakers-grid {
    grid-template-columns: 1fr;
  }
}

.speaker-card {
  border: 1px solid rgba(61, 48, 24, 0.20);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 400ms ease,
              background 400ms ease;
}
.speaker-card:hover {
  transform: translateY(-4px);
  border-color: rgba(61, 48, 24, 0.45);
  background: rgba(61, 48, 24, 0.04);
}
.speaker-card__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-orange);
}
.speaker-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  color: var(--lop-brown);
}
.speaker-card__bio {
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  color: var(--lop-brown);
  opacity: 0.78;
}
/* Optional dimmed "TBA" speaker variant */
.speaker-card--tba {
  border-style: dashed;
  background: transparent;
}
.speaker-card--tba .speaker-card__name {
  opacity: 0.6;
}

/* On dark sections, invert speaker card */
.section--forest .speaker-card,
.section--brown .speaker-card {
  border-color: rgba(245, 240, 232, 0.22);
}
.section--forest .speaker-card:hover,
.section--brown .speaker-card:hover {
  border-color: rgba(245, 240, 232, 0.45);
}
.section--forest .speaker-card__name,
.section--brown .speaker-card__name,
.section--forest .speaker-card__bio,
.section--brown .speaker-card__bio {
  color: var(--lop-cream);
}
.section--forest .speaker-card__role,
.section--brown .speaker-card__role {
  color: var(--lop-sage);
}

/* Sage section overrides — cream card bg makes cards POP off the sage
   panel. Brown text on cream = 13:1 AAA. Orange role accent on cream
   = 4.5:1 ✓ AA. Cards lift on hover with a subtle cream-warm shift. */
.section--sage .speaker-card {
  background: var(--lop-cream);
  border-color: rgba(30, 77, 59, 0.18);
}
.section--sage .speaker-card:hover {
  background: var(--lop-cream-warm);
  border-color: rgba(30, 77, 59, 0.40);
}
.section--sage .speaker-card__role {
  color: var(--lop-orange);  /* 4.5:1 on cream ✓ AA */
}
.section--sage .speaker-card__name {
  color: var(--lop-brown);
}
.section--sage .speaker-card__bio {
  color: var(--lop-brown);
  opacity: 0.78;
}
/* TBA cards on sage — semi-transparent cream */
.section--sage .speaker-card--tba {
  background: rgba(245, 240, 232, 0.45);
  border-style: dashed;
}
.section--sage .speaker-card--tba:hover {
  background: rgba(245, 240, 232, 0.65);
}

/* ============================================
   PULSE-BOUNCE — continuous gentle scale animation
   for editorial emphasis on a single phrase.
   Used on All-Star Impact hackathon page Reward section.
   ============================================ */
@keyframes pulse-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.bounce {
  display: inline-block;
  animation: pulse-bounce 2.6s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .bounce { animation: none; }
}

/* ============================================
   VOICES ROTATOR — auto-rotating quote container
   Single quote visible at a time, autonomous fade.
   Reuses the .slideshow JS via data-slideshow.
   Used on All-Star Impact hub for founder voices.
   ============================================ */
.voices-rotator {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: var(--space-6) auto 0;
  min-height: 180px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.voices-rotator .slideshow__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
}
.voices-rotator .pullquote {
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  max-width: 60ch;
}
.voices-rotator .pullquote__attribution {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
}
@media (max-width: 600px) {
  .voices-rotator {
    min-height: 240px;
  }
}

/* ============================================
   ACTS GRID — two-card layout for event Acts
   Used on All-Star Impact hub to present Act I + Act II
   side by side with their own CTAs.
   ============================================ */
.acts-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .acts-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.act-card {
  background: rgba(245, 240, 232, 0.05);
  border: 1px solid rgba(245, 240, 232, 0.20);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 400ms ease,
              background 400ms ease;
}
.act-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 240, 232, 0.40);
  background: rgba(245, 240, 232, 0.08);
}

.act-card__tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-orange);
}
.act-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--lop-cream);
  letter-spacing: var(--tracking-tight);
}
.act-card__credit {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  margin-top: calc(-1 * var(--space-2));
  color: var(--lop-cream);
  opacity: 0.7;
  letter-spacing: 0.01em;
}
.act-card__body {
  font-size: var(--text-base);
  line-height: 1.6;
  margin: 0;
  color: var(--lop-cream);
  opacity: 0.88;
}
/* Light section override for credit line */
.section--cream .act-card__credit,
.section--cream-warm .act-card__credit,
.section--sage .act-card__credit {
  color: var(--lop-brown);
  opacity: 0.75;
}
.act-card__ctas {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* On orange section, the default orange tag color is invisible —
   shift to cream tracked-caps for proper contrast. */
.section--orange .act-card__tag {
  color: var(--lop-cream);
}

/* On light section backgrounds (cream-warm/sage), invert act-card colors */
.section--cream .act-card,
.section--cream-warm .act-card,
.section--sage .act-card {
  background: rgba(30, 77, 59, 0.04);
  border-color: rgba(30, 77, 59, 0.22);
}
.section--cream .act-card:hover,
.section--cream-warm .act-card:hover,
.section--sage .act-card:hover {
  border-color: rgba(30, 77, 59, 0.40);
  background: rgba(30, 77, 59, 0.07);
}
.section--cream .act-card__title,
.section--cream-warm .act-card__title,
.section--sage .act-card__title {
  color: var(--lop-brown);
}
.section--cream .act-card__body,
.section--cream-warm .act-card__body,
.section--sage .act-card__body {
  color: var(--lop-brown);
}

/* ============================================
   FOUNDER VOICES — stacked pullquotes for hub pages
   Used on All-Star Impact hub for 3 founder notes.
   ============================================ */
.founder-voices {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  max-width: 760px;
  margin: var(--space-7) auto 0;
}
.founder-voices .pullquote {
  margin: 0;
}

/* Pullquote color overrides for dark sections */
.section--brown .pullquote,
.section--forest .pullquote {
  color: var(--lop-cream);
}
.section--brown .pullquote::before,
.section--brown .pullquote::after,
.section--forest .pullquote::before,
.section--forest .pullquote::after {
  color: var(--lop-sage);
}
.section--brown .pullquote__attribution,
.section--forest .pullquote__attribution {
  color: var(--lop-cream);
  opacity: 0.7;
}
.section--sage .pullquote {
  color: var(--lop-forest);
}
.section--sage .pullquote::before,
.section--sage .pullquote::after {
  /* Forest on sage = 6:1 ✓ AA. Orange-on-sage (1.4:1) would fail. */
  color: var(--lop-forest);
  opacity: 0.6;
}
.section--sage .pullquote__attribution {
  color: var(--lop-forest);
  opacity: 0.75;
}

/* ============================================
   WHY GRID — 2x2 reasons grid for sponsor pages
   Each card has italic Optima orange number,
   Optima title, Gordita body. Hover lifts card.
   ============================================ */
.why-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  border: 1px solid rgba(61, 48, 24, 0.20);
  border-radius: var(--radius-lg);
  background: transparent;
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 400ms ease,
              background 400ms ease;
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(61, 48, 24, 0.45);
  background: rgba(61, 48, 24, 0.04);
}
.why-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--lop-orange);
  letter-spacing: -0.01em;
}
.why-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: var(--lop-brown);
}
.why-card__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--lop-brown);
  opacity: 0.85;
}
@media (max-width: 800px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ============================================
   TIER LIST — vertical stacked sponsorship tiers
   Each tier is a wide card: name + price (left),
   branding + participation perks (right).
   Featured variant gets orange border highlight.
   ============================================ */
.tier-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.tier-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-6);
  border: 1px solid rgba(245, 240, 232, 0.20);
  border-radius: var(--radius-lg);
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 400ms ease;
}
.tier-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 240, 232, 0.50);
}
.tier-card--featured {
  border-color: var(--lop-orange);
  border-width: 2px;
}
.tier-card--featured:hover {
  border-color: var(--lop-orange-hover, var(--lop-orange));
}
.tier-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tier-card__name {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--lop-orange);
}
.tier-card__price {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--lop-cream);
  letter-spacing: -0.01em;
}
.tier-card__tickets {
  font-size: var(--text-sm);
  color: var(--lop-cream);
  opacity: 0.7;
  letter-spacing: 0.04em;
  margin-top: var(--space-2);
}
.tier-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tier-card__group h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-sage);
  margin: 0 0 var(--space-2) 0;
  font-weight: 500;
}
.tier-card__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tier-card__group li {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--lop-cream);
  opacity: 0.92;
  padding-left: var(--space-3);
  position: relative;
}
.tier-card__group li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--lop-sage);
  font-weight: 700;
}
@media (max-width: 800px) {
  .tier-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-6);
  }
}

/* ============================================
   OPPS GRID — 2-col compact sponsor opportunity cards
   Used for named sponsorship opportunities listing.
   ============================================ */
.opps-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.opp-card {
  padding: var(--space-5);
  border: 1px solid rgba(61, 48, 24, 0.18);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 400ms ease,
              background 400ms ease;
}
.opp-card:hover {
  transform: translateY(-2px);
  border-color: rgba(61, 48, 24, 0.40);
  background: rgba(61, 48, 24, 0.04);
}
.opp-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  color: var(--lop-brown);
}
.opp-card__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--lop-brown);
  opacity: 0.78;
}
@media (max-width: 700px) {
  .opps-grid { grid-template-columns: 1fr; }
}

/* ============================================
   EXPERIENCE CARDS — 3D-tilt on hover (RSVP page)
   Numbered cards with cinematic tilt + glow on hover.
   Pure CSS, no JS — static tilt for predictable motion.
   ============================================ */
.experience-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  perspective: 1200px;
}
@media (max-width: 900px) {
  .experience-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .experience-grid { grid-template-columns: 1fr; }
}

.experience-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border: 1px solid rgba(61, 48, 24, 0.20);
  border-radius: var(--radius-lg);
  background: transparent;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 400ms ease,
              background 400ms ease,
              box-shadow 600ms ease;
  position: relative;
  will-change: transform;
}
.experience-card:hover {
  transform: rotateY(-3deg) rotateX(2deg) translateY(-6px);
  border-color: var(--lop-orange);
  background: rgba(232, 83, 10, 0.04);
  box-shadow: 0 20px 40px -20px rgba(232, 83, 10, 0.35);
}
.experience-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--lop-orange);
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.experience-card:hover .experience-card__num {
  transform: translateZ(20px);
}
.experience-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  color: var(--lop-brown);
}
.experience-card__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--lop-brown);
  opacity: 0.78;
}

/* ============================================
   ATTENDEE MARQUEE — horizontal infinite scroll
   Used on RSVP "Who's in the room" section.
   Italic Optima attendee types scroll continuously,
   orange · separators between items, soft mask-fade
   at section edges. Pauses on hover.
   ============================================ */
.attendee-marquee {
  margin-top: var(--space-6);
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%);
}
.attendee-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  white-space: nowrap;
  width: max-content;
  animation: attendee-scroll 55s linear infinite;
}
.attendee-marquee:hover .attendee-marquee__track {
  animation-play-state: paused;
}
.attendee-marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  color: var(--lop-forest);
  flex-shrink: 0;
}
.attendee-marquee__sep {
  color: var(--lop-orange);
  font-style: normal;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  flex-shrink: 0;
  opacity: 0.85;
}
@keyframes attendee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .attendee-marquee__track { animation: none; }
}

/* ============================================
   PULSE-GLOW button — continuous orange glow halo
   For the RSVP CTA. Animated box-shadow ring expands
   and fades to draw the eye.
   ============================================ */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 83, 10, 0.55),
                0 0 0 0 rgba(232, 83, 10, 0);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(232, 83, 10, 0),
                0 0 32px 4px rgba(232, 83, 10, 0.25);
  }
}
.btn--glow {
  animation: pulse-glow 2.6s ease-out infinite;
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  .btn--glow { animation: none; }
}

/* ============================================
   SHIMMER — diagonal sweep across a single phrase
   Subtle gradient highlight that travels through
   the text continuously. Used on key emphasis words.
   ============================================ */
@keyframes shimmer-sweep {
  /* Sweep travels right-to-left across the text */
  0%   { background-position: 250% 0; }
  100% { background-position: -150% 0; }
}
.shimmer {
  display: inline-block;
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 40%,
    rgba(232, 83, 10, 0.95) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 4.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .shimmer {
    -webkit-text-fill-color: currentColor;
    background: none;
    animation: none;
  }
}

/* ============================================
   PAST EVENT — feature row + gallery strip
   Used on /events/past for archived events.
   Each event = one section with two parts:
   1. Feature row: photo + recap (event-split style)
   2. Gallery: 6-photo strip below the feature
   --reverse modifier flips photo to right.
   ============================================ */
.past-event {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.past-event__feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.past-event__feature--reverse .past-event__photo { order: 2; }
.past-event__feature--reverse .past-event__copy  { order: 1; }

.past-event__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--lop-cream);
}
.past-event__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .past-event__photo[data-parallax] img {
    height: 130%;
    top: -15%;
    will-change: transform;
  }
}

.past-event__copy h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-4) 0;
}
.past-event__copy p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
}

.past-event__gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
.past-event__gallery a,
.past-event__gallery .past-event__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 240, 232, 0.20);
  display: block;
  background: var(--lop-cream);
}
.past-event__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.past-event__gallery .past-event__thumb:hover img {
  transform: scale(1.06);
}

/* Light bg overrides for gallery border */
.section--cream .past-event__thumb,
.section--cream-warm .past-event__thumb,
.section--sage .past-event__thumb {
  border-color: rgba(61, 48, 24, 0.18);
}

@media (max-width: 900px) {
  .past-event__feature {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .past-event__feature--reverse .past-event__photo { order: 0; }
  .past-event__feature--reverse .past-event__copy  { order: 1; }
  .past-event__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   CONTACT INFO — direct-line block at the bottom
   of /get-involved. 3-col grid (email · phone · addr)
   on desktop, stacks on mobile.
   ============================================ */
.contact-info {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  border-top: 1px solid rgba(30, 77, 59, 0.22);
  padding-top: var(--space-7);
  text-align: left;
}
.contact-info__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-info__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lop-forest);
  font-weight: 500;
  opacity: 0.7;
}
.contact-info__value {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  color: var(--lop-forest);
  text-decoration: none;
  transition: color 200ms ease, transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
}
.contact-info__value:hover {
  color: var(--lop-brown);
}
@media (max-width: 700px) {
  .contact-info {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-top: var(--space-5);
  }
}

/* ============================================
   LEGAL BODY — long-form readable typography
   For privacy / terms / accessibility pages.
   Brown text on cream-warm = 13:1 ✓ AAA.
   ============================================ */
.legal-body {
  margin-top: var(--space-7);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--lop-brown);
}
.legal-body__effective {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--lop-brown);
  opacity: 0.65;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(61, 48, 24, 0.18);
}
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  margin: var(--space-7) 0 var(--space-3) 0;
  color: var(--lop-brown);
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body p {
  margin: 0 0 var(--space-4) 0;
}
.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-5);
}
.legal-body li {
  margin-bottom: var(--space-2);
  line-height: 1.65;
}
.legal-body strong {
  font-weight: 500;
}
.legal-body a {
  color: var(--lop-orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}
.legal-body a:hover {
  color: var(--lop-brown);
}

/* ============================================
   PRE-FOOTER CTA BANNER
   ============================================ */
.cta-banner {
  background: var(--lop-orange);
  color: var(--lop-cream);
  padding: var(--space-9) 0;
  text-align: center;
}
.cta-banner h2 {
  color: var(--lop-cream);
  font-size: var(--text-3xl);
}
.cta-banner .btn {
  font-weight: 400;
}
.cta-banner .btn--primary {
  background: var(--lop-cream);
  color: var(--lop-forest);
}
.cta-banner .btn--primary:hover {
  background: var(--lop-white);
  color: var(--lop-forest);
}
.cta-banner .btn--ghost {
  border-color: var(--lop-cream);
  color: var(--lop-cream);
}
.cta-banner .btn--ghost:hover {
  background: var(--lop-cream);
  color: var(--lop-orange);
}

/* ============================================
   STAT BLOCK — large editorial number + label
   Used in feature rows alongside copy.
   ============================================ */
.stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stat-block__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--lop-orange);
}
.stat-block__label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.85;
}

/* List rows: subtle scale-in alongside the fade-up.
   Applies to chronological/list rows so they "zoom in"
   as they scroll into view, matching the headline pattern. */
.award[data-reveal],
.schedule-row[data-reveal],
.pillar[data-reveal],
.opp-card[data-reveal],
.tier-card[data-reveal] {
  transform: translateY(24px) scale(0.96);
}
.award[data-reveal].is-revealed,
.schedule-row[data-reveal].is-revealed,
.pillar[data-reveal].is-revealed,
.opp-card[data-reveal].is-revealed,
.tier-card[data-reveal].is-revealed {
  transform: translateY(0) scale(1);
}

/* ============================================
   MOBILE: hero hardening — keep title within
   container, prevent breadcrumb/location overlap.
   ============================================ */
@media (max-width: 640px) {
  /* Title gets a max-width safety net + extra bottom padding.
     Hero content also sits with breathing room from the edges. */
  .hero__content .container,
  .hero__content .container--wide,
  .hero__content .container--narrow {
    padding-inline: var(--space-5);
  }
  .hero__title {
    max-width: 100%;
  }
  /* When BOTH breadcrumb and location are in the hero
     (sub-pages), hide the location on mobile so they
     don't collide. Pages without a breadcrumb keep
     their location label visible. */
  .hero__breadcrumb ~ .hero__location {
    display: none;
  }
}

/* ============================================
   CTA banner: truly uniform button widths site-wide.
   Targets BOTH .cta-row (program/event pages) AND
   .hero__cta (legacy, about page). Desktop: fixed
   200px buttons. Mobile: 2-column grid, equal cells.
   ============================================ */
.cta-banner .cta-row,
.cta-banner .hero__cta {
  align-items: stretch;
}
@media (min-width: 640px) {
  .cta-banner .cta-row .btn,
  .cta-banner .hero__cta .btn {
    flex: 0 0 200px;
    width: 200px;
    justify-content: center;
    padding-inline: var(--space-3);
  }
}
@media (max-width: 639px) {
  .cta-banner {
    padding: var(--space-7) 0;
  }
  .cta-banner .cta-row,
  .cta-banner .hero__cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) !important;
    flex-direction: row;
  }
  .cta-banner .cta-row .btn,
  .cta-banner .hero__cta .btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* Accordion labels (Benefit / Impact / Outcome) hidden globally —
   the H3 titles (Build / Show / Win, etc.) are sufficient identity. */
.accordion__label {
  display: none;
}
.accordion__trigger {
  grid-template-areas:
    "title icon" !important;
}

/* ============================================
   STAGGERED REVEAL — child elements appear in sequence
   Add data-stagger to a parent and data-reveal to children.
   ============================================ */
[data-stagger] [data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-stagger] [data-reveal]:nth-child(2) { transition-delay: 100ms; }
[data-stagger] [data-reveal]:nth-child(3) { transition-delay: 200ms; }
[data-stagger] [data-reveal]:nth-child(4) { transition-delay: 300ms; }
[data-stagger] [data-reveal]:nth-child(5) { transition-delay: 400ms; }
[data-stagger] [data-reveal]:nth-child(6) { transition-delay: 500ms; }

/* ============================================
   FLOURISH — animated underline on emphasized text
   Underline color is orange (different from text color).
   Animation: draws from left to right when the parent
   element scrolls into view OR on hover.
   Use: <span class="flourish">generational change.</span>
   ============================================ */
.flourish {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--lop-orange), var(--lop-orange));
  background-position: 0 calc(100% - 2px);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 1200ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
  padding-bottom: 2px;
}

/* Draws when parent (or self) is scrolled into view */
[data-reveal].is-revealed .flourish,
.flourish.is-revealed,
.flourish[data-reveal].is-revealed {
  background-size: 100% 2px;
}

/* Always show on hover */
.flourish:hover,
a:hover .flourish {
  background-size: 100% 2px;
}

/* On orange sections (where text is cream), use cream underline so it contrasts */
.section--orange .flourish,
.event-split__content .flourish,
.section--forest .flourish {
  background-image: linear-gradient(var(--lop-cream), var(--lop-cream));
}

/* On the brown event-split panel OR a brown section, use sage underline
   for accent contrast (orange-on-brown is borderline at 3.9:1). */
.event-split--brown .flourish,
.section--brown .flourish {
  background-image: linear-gradient(var(--lop-sage), var(--lop-sage));
}

/* Manual color overrides for flourish — opt-in per element when default
   contextual color isn't right (e.g. orange flourish on forest sections). */
.flourish.flourish--orange,
.section--forest .flourish.flourish--orange,
.section--orange .flourish.flourish--orange,
.event-split__content .flourish.flourish--orange,
.event-split--brown .flourish.flourish--orange {
  background-image: linear-gradient(var(--lop-orange), var(--lop-orange));
}
.flourish.flourish--cream,
.section--forest .flourish.flourish--cream {
  background-image: linear-gradient(var(--lop-cream), var(--lop-cream));
}
.flourish.flourish--sage,
.section--forest .flourish.flourish--sage {
  background-image: linear-gradient(var(--lop-sage), var(--lop-sage));
}

/* ============================================
   RECOGNIZED-BY BOX
   Brown rounded card on orange/light section.
   Used inside the impact section to highlight awards.
   ============================================ */
.recognized-box {
  background: var(--lop-brown);
  color: var(--lop-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  margin-top: var(--space-9);
  max-width: 1140px;
  margin-inline: auto;
  text-align: center;
  border: 1px solid rgba(245, 240, 232, 0.35);
}
.recognized-box__label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--lop-cream);
  margin-bottom: var(--space-5);
  letter-spacing: var(--tracking-tight);
}
.recognized-box__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--lop-cream);
  opacity: 0.92;
  max-width: 980px;
  margin-inline: auto;
  padding: 0;
}
.recognized-box__list .item {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
/* On mobile, allow long award titles to wrap so they
   don't escape the container ("Best Residential Treatment
   2023 / 2024 / 2025" is the offender). */
@media (max-width: 700px) {
  .recognized-box__list .item {
    white-space: normal;
    text-align: center;
  }
  .recognized-box {
    padding: var(--space-5) var(--space-4);
  }
  .recognized-box__list {
    font-size: var(--text-sm);
    gap: var(--space-2) var(--space-4);
  }
}
.recognized-box__list .item::before {
  content: '▸';
  color: var(--lop-cream);
  margin-right: 0.4em;
  opacity: 0.85;
}

/* Reduce motion: just show full underline immediately */
@media (prefers-reduced-motion: reduce) {
  .flourish {
    transition: none;
    background-size: 100% 2px;
  }
}

/* ============================================
   BOARD — chair feature + 4 department rows
   Used on the about page. Editorial masthead-style:
   tracked caps department label on the left, italic Optima
   names on the right, separated by middot on a single
   wrapping line. Horizontal hairlines between rows.
   ============================================ */
.board {
  max-width: 1140px;
  margin-inline: auto;
}

.board__chair {
  text-align: center;
  padding-block: var(--space-7) var(--space-8);
  border-bottom: 1px solid rgba(61, 48, 24, 0.18);
  margin-bottom: var(--space-3);
}
.board__chair__label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lop-orange);
  margin-bottom: var(--space-3);
}
.board__chair__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--lop-forest);
  margin: 0;
  line-height: 1;
}

.board__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: 1px solid rgba(61, 48, 24, 0.18);
}
.board__row:last-child {
  border-bottom: none;
}
@media (min-width: 768px) {
  .board__row {
    grid-template-columns: 220px 1fr;
    gap: var(--space-7);
    align-items: center; /* vertically center label with multi-line member rows */
  }
}

.board__row__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lop-orange);
  /* small upward nudge so the caps label sits slightly above the
     italic names — feels more editorial */
  padding-top: 5px;
}
.board__row__names {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--lop-brown);
  margin: 0;
}
.board__row__names .name {
  white-space: nowrap;
  display: inline-block;
}
/* Middot separator written directly in HTML between names */
.board__row__names .sep {
  font-style: normal;
  opacity: 0.45;
  margin: 0 0.15em;
}

/* Board members WITH small circular headshots */
.board__row__members {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
}
.board__member {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  white-space: nowrap;
  cursor: default;
  color: inherit;
  position: relative;
}

/* Title tooltip — appears above the member on hover.
   Cream rounded card matching the site's --radius style. */
.board__member[data-title]::after {
  content: attr(data-title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--lop-cream);
  color: var(--lop-brown);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  box-shadow: 0 8px 24px rgba(24, 20, 16, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 50;
  text-align: center;
}
.board__member[data-title]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Wrap the name text in <span class="board__member__name"> so we can
   scale it independently on hover (text nodes can't transform). */
.board__member__name {
  display: inline-block;
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              color 280ms ease;
}
.board__member:hover .board__member__name {
  transform: scale(1.12);
  color: var(--lop-orange);
}
.board__member__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.12); /* cream tint fallback */
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms ease;
}
.board__member:hover .board__member__avatar {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--lop-orange);
}
.board__member__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board__member__avatar--initials {
  background: var(--lop-orange);
  color: var(--lop-cream);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ============================================
   THEORY FLOW — typographic 5-step ladder with zoom stagger
   Each step + arrow zooms in sequentially on scroll-in.
   On desktop, stays on a single line (smaller type +
   max-width hugs container--wide). Wraps gracefully on mobile.
   ============================================ */
.theory-flow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.875rem, 1.15vw, 1.125rem);
  line-height: 1.5;
  text-align: center;
  color: inherit; /* picks up section text color (forest on sage, brown on cream) */
  max-width: 1400px;
  margin-inline: auto;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow-x: auto;
  padding-block: var(--space-3);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.theory-flow::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
  .theory-flow {
    white-space: normal;
    font-size: var(--text-md);
    line-height: 1.85;
    overflow-x: visible;
  }
}
.theory-flow .step,
.theory-flow .arrow {
  display: inline-block;
}
.theory-flow .arrow {
  color: var(--lop-orange);
  font-style: normal;
  margin: 0 0.4em;
}

/* Continuous rotating-focus animation.
   Each step pulses (enlarges + turns orange) for 1.6s, then idles
   while the next step pulses. 5 steps × 1.6s = 8s full cycle.
   Loops infinitely so the focus rotates continuously. */
.theory-flow .step,
.theory-flow .arrow {
  animation: theory-pulse 8s ease-in-out infinite;
  transform-origin: center center;
  display: inline-block;
}

@keyframes theory-pulse {
  0%, 20%, 100% {
    transform: scale(1);
    color: inherit;
  }
  10% {
    transform: scale(1.18);
    color: var(--lop-cream);
  }
}

/* Stagger each step's animation by 1.6s so they pulse in sequence.
   Arrows pulse with the step that comes after them. */
.theory-flow .step:nth-of-type(1)        { animation-delay:  0s;   }
.theory-flow .arrow:nth-of-type(1)       { animation-delay:  0.8s; }
.theory-flow .step:nth-of-type(2)        { animation-delay:  1.6s; }
.theory-flow .arrow:nth-of-type(2)       { animation-delay:  2.4s; }
.theory-flow .step:nth-of-type(3)        { animation-delay:  3.2s; }
.theory-flow .arrow:nth-of-type(3)       { animation-delay:  4.0s; }
.theory-flow .step:nth-of-type(4)        { animation-delay:  4.8s; }
.theory-flow .arrow:nth-of-type(4)       { animation-delay:  5.6s; }
.theory-flow .step:nth-of-type(5)        { animation-delay:  6.4s; }

/* Pause animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .theory-flow .step,
  .theory-flow .arrow {
    animation: none;
  }
}

/* ============================================
   FOUNDER MEDIA WRAPPER
   New wrapper around the founder photo for parallax support.
   ============================================ */
.founder__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  background: var(--lop-cream-warm);
}
.founder__media img,
.founder__media .founder__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  margin-bottom: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .founder__media[data-parallax] img,
  .founder__media[data-parallax] .founder__photo {
    height: 130%;
    top: -15%;
    will-change: transform;
  }
}

/* Color accent — top stripe per founder, applied to the media wrapper now */
.founder--orange .founder__media { border-top: 4px solid var(--lop-orange); }
.founder--forest .founder__media { border-top: 4px solid var(--lop-forest); }
.founder--sage   .founder__media { border-top: 4px solid var(--lop-sage); }

/* Hover: gently enlarge the founder photo wrapper.
   Scaling the wrapper (not the img) avoids conflict with the
   parallax JS that sets transform on the inner img. */
.founder {
  cursor: default;
}
.founder__media {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 500ms ease;
}
.founder:hover .founder__media {
  transform: scale(1.04);
  box-shadow: 0 12px 32px rgba(24, 20, 16, 0.18);
}

/* Forest section variant — flip text colors to cream */
.section--forest .board__chair__name {
  color: var(--lop-cream);
}
.section--forest .board__chair__label {
  color: var(--lop-orange);
}
.section--forest .board__chair {
  border-bottom-color: rgba(245, 240, 232, 0.18);
}
.section--forest .board__row__label {
  color: var(--lop-orange);
}
.section--forest .board__row__names {
  color: var(--lop-cream);
}
.section--forest .board__row {
  border-bottom-color: rgba(245, 240, 232, 0.14);
}

/* ============================================
   PLACEHOLDER / TBD MARKERS
   Highlights for areas still pending content.
   To remove all of these visually before launch, comment out this block.
   ============================================ */
.tbd {
  background: rgba(232, 83, 10, 0.08);
  border: 1px dashed var(--lop-orange);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--lop-brown);
}
.tbd::before {
  content: 'TBD — ';
  font-weight: 500;
  color: var(--lop-orange);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}