/* ============================================================
   SECTIONS A — cta_banner / stats_strip / feature_grid /
   about_block / staff_grid / sponsors_strip / testimonials
   (ported from skp-3.0 templates_v1 partials, Tailwind → semantic).

   Depends on site.css custom properties (--color-*, --font-*,
   --text-*, --space-section*, --tracking-*, motion vars) and the
   shared .wrap / .reveal classes.

   Design rules from skp-3.0 brief-template-v1.md apply throughout:
   crisp edges (radius 0 everywhere except avatar circles / brand
   dots), neutral hairline borders (never brand-tinted), secondary-
   color overlays (never pure black), left-aligned asymmetric type.
   ============================================================ */

/* Shared eyebrow pattern (32px × 1px primary tick + tracked label),
   namespaced per section — same anatomy as .hero-eyebrow. */
.cta-banner-eyebrow,
.feature-grid-eyebrow,
.about-block-eyebrow,
.staff-grid-eyebrow,
.sponsors-strip-eyebrow,
.testimonials-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.cta-banner-eyebrow .tick,
.feature-grid-eyebrow .tick,
.about-block-eyebrow .tick,
.staff-grid-eyebrow .tick,
.sponsors-strip-eyebrow .tick,
.testimonials-eyebrow .tick {
  display: inline-block; width: 32px; height: 1px; flex: none;
  background: var(--color-primary);
}
.cta-banner-eyebrow > span:not(.tick),
.feature-grid-eyebrow > span:not(.tick),
.about-block-eyebrow > span:not(.tick),
.staff-grid-eyebrow > span:not(.tick),
.sponsors-strip-eyebrow > span:not(.tick),
.testimonials-eyebrow > span:not(.tick) {
  font: 500 var(--text-eyebrow)/1 var(--font-display);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
/* default eyebrow label color on light sections */
.feature-grid-eyebrow > span:not(.tick),
.about-block-eyebrow > span:not(.tick),
.staff-grid-eyebrow > span:not(.tick),
.sponsors-strip-eyebrow > span:not(.tick),
.testimonials-eyebrow > span:not(.tick) {
  color: var(--color-neutral-900); opacity: 0.55;
}

/* Shared section-header block (eyebrow + h2 + optional intro) */
.feature-grid-head,
.staff-grid-head,
.testimonials-head {
  max-width: 48rem; margin-bottom: 56px;
}
@media (min-width: 768px) {
  .feature-grid-head, .staff-grid-head, .testimonials-head { margin-bottom: 80px; }
}
.feature-grid-head h2,
.staff-grid-head h2,
.testimonials-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-section-head); line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--color-neutral-900);
}

/* ---- cta_banner ----------------------------------------------------------
   secondary-fill (default): brand secondary as full bg — the ONE allowed
   brand-as-blanket moment. image-anchored: photo + secondary-tinted
   gradient (reuses --hero-overlay; never pure-black rgba). */
.cta-banner {
  position: relative; overflow: hidden;
  background: var(--color-secondary); color: #fff;
  padding: 96px 0;
}
@media (min-width: 768px) { .cta-banner { padding: 144px 0; } }
.cta-banner-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.cta-banner-overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.cta-banner-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media (min-width: 768px) {
  .cta-banner-inner { grid-template-columns: 7fr 5fr; }
  .cta-banner-action { text-align: right; }
}
.cta-banner-eyebrow > span:not(.tick) { color: var(--color-accent); }
.cta-banner.image-anchored .cta-banner-eyebrow > span:not(.tick) { color: rgba(255,255,255,0.85); }
.cta-banner h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-section-head); line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.cta-banner-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-primary); color: var(--cta-text-on-primary);
  font: 600 16px/1 var(--font-display);
  padding: 16px 28px; text-decoration: none;
  transition: opacity var(--motion-hover) var(--ease-out);
}
.cta-banner-cta:hover { opacity: 0.9; }

/* ---- stats_strip ----------------------------------------------------------
   Oversized numbers, restrained labels. Hairline dividers are NEUTRAL —
   anti-pattern #1, never brand-tinted. Numbers use secondary so they
   punch without spending primary. */
.stats-strip {
  background: var(--color-neutral-50);
  border-top: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7;
  padding: 64px 0;
}
@media (min-width: 768px) { .stats-strip { padding: 96px 0; } }
.stats-strip-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px;
}
@media (min-width: 768px) {
  .stats-strip-grid { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); gap: 24px; }
}
.stats-strip-stat .value {
  font-family: var(--font-display); font-weight: 700;
  /* --text-stat isn't in site.css — hero-stat scale hardcoded per port notes */
  font-size: clamp(48px, 7vw, 88px); line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-secondary);
}
.stats-strip-stat .label {
  margin-top: 12px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.55;
}

/* ---- feature_grid ---------------------------------------------------------
   grid-of-three (default) or offset (middle card dropped 40px on desktop —
   the anti-pattern-#5 asymmetry). Line icons in primary; fallback brand dot
   is the ONE pill shape here. */
.feature-grid {
  background: var(--color-neutral-50);
  padding: var(--space-section) 0;
}
@media (max-width: 767px) { .feature-grid { padding: var(--space-section-mobile) 0; } }
.feature-grid-head .intro {
  margin-top: 24px; max-width: 42rem;
  font-size: var(--text-body-lg); line-height: 1.65;
  color: var(--color-neutral-900); opacity: 0.7;
}
.feature-grid-cards {
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 768px) {
  .feature-grid-cards { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .feature-grid.offset .feature-grid-card:nth-child(2) { transform: translateY(40px); }
  /* keep the offset once the reveal transition has landed */
  .feature-grid.offset .feature-grid-card.reveal:not(.in):nth-child(2) { transform: translateY(56px); }
}
.feature-grid-card .icon { margin-bottom: 24px; color: var(--color-primary); }
.feature-grid-dot {
  display: inline-block; width: 8px; height: 8px;
  background: var(--color-primary); border-radius: 9999px; /* dot — pill shape allowed */
}
.feature-grid-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.375; letter-spacing: -0.01em;
  color: var(--color-neutral-900); margin-bottom: 12px;
}
.feature-grid-card p {
  font-size: var(--text-body); line-height: 1.625;
  color: var(--color-neutral-900); opacity: 0.7;
}

/* ---- about_block ----------------------------------------------------------
   Heading + prose + 4:5 portrait image, position toggleable. Neutral
   placeholder behind the image while it loads. */
.about-block {
  background: var(--color-neutral-50);
  padding: var(--space-section) 0;
}
@media (max-width: 767px) { .about-block { padding: var(--space-section-mobile) 0; } }
.about-block-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media (min-width: 768px) {
  .about-block-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .about-block.image-right .about-block-media { order: 2; }
  .about-block.image-right .about-block-text { order: 1; }
}
.about-block-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: #E4E4E7;
}
.about-block-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.about-block-text h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px); line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--color-neutral-900); margin-bottom: 32px;
}
.about-block-body {
  max-width: 36rem;
  font-size: var(--text-body-lg); line-height: 1.625;
  color: var(--color-neutral-900); opacity: 0.75;
}
.about-block-body p + p { margin-top: 20px; }

/* ---- staff_grid ------------------------------------------------------------
   cards: 1 / 2 / 3-up grid of 4:5 portraits. editorial-rows: one member per
   row, image/text alternating, magazine-quality scale. Crisp edges — no
   radius on photos or cards. */
.staff-grid {
  background: var(--color-neutral-50);
  padding: var(--space-section) 0;
}
@media (max-width: 767px) { .staff-grid { padding: var(--space-section-mobile) 0; } }

.staff-grid .media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: #E4E4E7;
}
.staff-grid .media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* cards layout */
.staff-grid-cards {
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 640px) { .staff-grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .staff-grid-cards { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.staff-grid-card .media { margin-bottom: 20px; }
.staff-grid-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.375; letter-spacing: -0.01em;
  color: var(--color-neutral-900);
}
.staff-grid-card .role {
  margin-top: 4px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.025em;
  color: var(--color-primary);
}
.staff-grid-card .bio {
  margin-top: 16px;
  font-size: 14px; line-height: 1.625;
  color: var(--color-neutral-900); opacity: 0.65;
}

/* editorial-rows layout */
.staff-grid-rows { display: flex; flex-direction: column; gap: 80px; }
@media (min-width: 768px) { .staff-grid-rows { gap: 128px; } }
.staff-grid-row {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media (min-width: 768px) {
  .staff-grid-row { grid-template-columns: 5fr 7fr; gap: 64px; }
  .staff-grid-row.flip .media { order: 2; }
  .staff-grid-row.flip .text { order: 1; }
}
.staff-grid-row .role {
  margin-bottom: 16px;
  font: 500 var(--text-eyebrow)/1 var(--font-display);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-primary);
}
.staff-grid-row h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 3.5vw, 52px); line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--color-neutral-900); margin-bottom: 24px;
}
.staff-grid-row .bio {
  max-width: 36rem;
  font-size: var(--text-body-lg); line-height: 1.625;
  color: var(--color-neutral-900); opacity: 0.75;
}
.staff-grid-row blockquote {
  margin-top: 32px; max-width: 36rem;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-neutral-900);
}

/* ---- sponsors_strip ---------------------------------------------------------
   Anti-pattern #9: monochrome logos (grayscale + muted), full contrast on
   hover — consistent treatment across the strip. Centered on purpose (the
   source centered this section). */
.sponsors-strip {
  background: var(--color-neutral-50);
  padding: 80px 0;
}
@media (min-width: 768px) { .sponsors-strip { padding: 112px 0; } }
.sponsors-strip-eyebrow { justify-content: center; margin-bottom: 48px; }
.sponsors-strip-logos {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 32px 48px;
}
@media (min-width: 768px) { .sponsors-strip-logos { column-gap: 64px; } }
.sponsors-strip-logos a { display: inline-block; text-decoration: none; }
.sponsors-strip-logos img {
  height: 40px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.45;
  transition: filter var(--motion-hover) var(--ease-out),
              opacity var(--motion-hover) var(--ease-out);
}
@media (min-width: 768px) { .sponsors-strip-logos img { height: 48px; } }
.sponsors-strip-logos a:hover img,
.sponsors-strip-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ---- testimonials ------------------------------------------------------------
   Pull-quote editorial: oversized display-face quote body, restrained
   attribution row. No quote-mark icons, no shadowed rounded cards.
   Avatar circles are the allowed pill exception. */
.testimonials {
  background: var(--color-neutral-50);
  padding: var(--space-section) 0;
}
@media (max-width: 767px) { .testimonials { padding: var(--space-section-mobile) 0; } }
.testimonials-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 56px; }
  .testimonials-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}
.testimonials-quote blockquote {
  margin-bottom: 32px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px); line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-neutral-900);
}
.testimonials-quote figcaption { display: flex; align-items: center; gap: 16px; }
.testimonials-quote .avatar {
  width: 48px; height: 48px; flex: none;
  border-radius: 9999px; /* avatar circle — allowed pill shape */
  object-fit: cover;
}
.testimonials-quote .avatar-initial {
  display: grid; place-items: center;
  background: var(--color-secondary); color: var(--color-neutral-50);
  font: 700 12px/1 var(--font-display);
}
.testimonials-quote .who { line-height: 1.25; }
.testimonials-quote .author {
  font-size: 14px; font-weight: 500; color: var(--color-neutral-900);
}
.testimonials-quote .role {
  margin-top: 2px; font-size: 12px;
  color: var(--color-neutral-900); opacity: 0.6;
}