/* ============================================================================
   KRUSH PLATINUM — SECTIONS v2
   ----------------------------------------------------------------------------
   Section-by-section overrides. Loaded AFTER hero-v2.css.
   Brand-locked palette: cream #F8F5F0, cream-deep #F0EBE0, white #FFFFFF,
   brand green #629D42, honey-yellow #ECC656 (bonus only), black #1F1E19 text.
   No dark greens, no platinum/gunmetal, no invented colours.
   ============================================================================ */


/* ============================================================================
   §4 — PRESS BAND (As Seen In)
   ----------------------------------------------------------------------------
   Cream bg (NOT dark green). Real press logos in single horizontal row,
   muted greyscale treatment so they read calmly. Hairline rules above and
   below. Eyebrow "AS SEEN IN" in brand green caps.
   ============================================================================ */

.s-press {
  background: var(--color-surface-cream);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-border-hairline);
  border-bottom: 1px solid var(--color-border-hairline);
}

.s-press__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.s-press__inner .t-eyebrow {
  color: var(--color-brand-green);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.s-press__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  max-width: 1000px;
}

.s-press__logos img {
  height: 32px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--duration-fast) var(--ease-default);
}

.s-press__logos img:hover {
  filter: grayscale(1) opacity(0.85);
}

@media (min-width: 768px) {
  .s-press__logos img { height: 36px; max-width: 200px; }
}

@media (min-width: 1024px) {
  .s-press {
    padding: var(--space-12) 0;
  }
  .s-press__logos img { height: 40px; max-width: 220px; }
}

/* Mobile — wrap to 2x2 grid for legibility */
@media (max-width: 640px) {
  .s-press__logos { gap: var(--space-6); }
  .s-press__logos img { height: 28px; max-width: 140px; }
}


/* ============================================================================
   §5 — INTRO (Editorial story hook)
   ----------------------------------------------------------------------------
   Asymmetric 2-column. Image left on cream-deep panel, text right.
   Headline sentence-case (not all-caps), brand-green eyebrow, 3 inline stats.
   ============================================================================ */

.s-intro {
  background: var(--color-surface-cream);
  padding: var(--space-16) 0;
}

.s-intro__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  /* Override the v1 centred flex layout */
  text-align: left;
  flex-direction: row;
}

@media (min-width: 1024px) {
  .s-intro {
    padding: var(--space-20) 0;
  }
  .s-intro__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    max-width: 1200px;
  }
}

/* Image panel — cream-deep frame, rounded, soft shadow */
.s-intro__media {
  background: var(--color-surface-cream-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(31, 30, 25, 0.04),
    0 12px 32px rgba(31, 30, 25, 0.06);
}
.s-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .s-intro__media {
    aspect-ratio: 4 / 5;
    max-height: 620px;
  }
}

/* Body column */
.s-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  text-align: left;
}

.s-intro__body .t-eyebrow {
  color: var(--color-brand-green);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.s-intro__h {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);  /* 32 → 52px */
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--color-text-high);
  text-wrap: balance;
  margin: 0;
  max-width: 18ch;
}

.s-intro__lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);  /* 16 → 18px */
  line-height: 1.6;
  color: var(--color-text-body);
  max-width: 52ch;
  margin: 0;
}

/* Inline stats row */
.s-intro__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  width: 100%;
  max-width: 480px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-hairline);
  margin-top: var(--space-2);
}

.s-intro__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s-intro__stat-num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);  /* 26 → 36px */
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-brand-green);
}

.s-intro__stat-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-mid);
  line-height: 1.3;
}

/* Hide the v1 centred ornament + payoff text wrap */
.s-intro__ornament,
.s-intro__payoff { display: none !important; }



/* ============================================================================
   §6 — MECHANISM (interactive ECS map)
   ----------------------------------------------------------------------------
   Cream-deep stage. 3-column layout: 3 cards | body diagram + hotspots | 3 cards.
   Hover/tap a hotspot OR a card to highlight the matching pair.
   Idle state: hotspots gently pulse in brand green.
   ============================================================================ */

.s-mechanism {
  background: var(--color-surface-cream-deep);
  padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
  .s-mechanism { padding: var(--space-20) 0; }
}

.s-mechanism__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.s-mechanism__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}

.s-mechanism__header .t-eyebrow {
  color: var(--color-brand-green);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.s-mechanism__h {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);  /* 32 → 48px */
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-high);
  text-wrap: balance;
  margin: 0;
  max-width: 22ch;
}

.s-mechanism__lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-body);
  max-width: 56ch;
  margin: 0;
}

/* Three-column layout */
.s-mechanism__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .s-mechanism__layout {
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: var(--space-10);
  }
}

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

/* Node card */
.s-mechanism__node {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-default),
    box-shadow 0.3s var(--ease-default),
    border-color 0.3s var(--ease-default),
    opacity 0.3s var(--ease-default);
  position: relative;
}

.s-mechanism__node:hover,
.s-mechanism__node:focus-visible,
.s-mechanism__node.is-active {
  border-color: var(--color-brand-green);
  box-shadow:
    0 1px 2px rgba(98, 157, 66, 0.06),
    0 12px 28px rgba(98, 157, 66, 0.12);
  transform: translateY(-2px);
  outline: none;
}

.s-mechanism__node.is-dimmed {
  opacity: 0.45;
  transform: none;
}

.s-mechanism__node-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-brand-green);
  color: var(--color-surface-white);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: transform 0.3s var(--ease-default);
}

.s-mechanism__node:hover .s-mechanism__node-num,
.s-mechanism__node.is-active .s-mechanism__node-num {
  transform: scale(1.08);
}

.s-mechanism__node-body { flex: 1; min-width: 0; }

.s-mechanism__node-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-text-high);
  margin: 0 0 var(--space-2);
}

.s-mechanism__node-desc {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0;
}

/* Diagram frame — cream-white card with body image */
.s-mechanism__diagram {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.s-mechanism__diagram-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  background: var(--color-surface-tint-green);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(31, 30, 25, 0.04),
    0 16px 40px rgba(31, 30, 25, 0.08);
  margin: 0 auto;
}




.s-mechanism__diagram-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hotspots — circular pulsing dots positioned over the body image */
.s-mechanism__hotspot {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(98, 157, 66, 0.15);
  border: 2px solid var(--color-brand-green);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s var(--ease-default),
    transform 0.3s var(--ease-default),
    box-shadow 0.3s var(--ease-default);
}

.s-mechanism__hotspot span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-brand-green);
  position: relative;
}

/* Idle pulse animation */
@keyframes mechanism-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(98, 157, 66, 0.45);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(98, 157, 66, 0);
  }
}

.s-mechanism__hotspot {
  animation: mechanism-pulse 2.4s ease-out infinite;
}

.s-mechanism__hotspot:hover,
.s-mechanism__hotspot:focus-visible,
.s-mechanism__hotspot.is-active {
  background: var(--color-brand-green);
  transform: translate(-50%, -50%) scale(1.25);
  outline: none;
  animation: none;
  box-shadow:
    0 0 0 6px rgba(98, 157, 66, 0.18),
    0 0 0 14px rgba(98, 157, 66, 0.08);
}

.s-mechanism__hotspot:hover span,
.s-mechanism__hotspot.is-active span {
  background: var(--color-surface-white);
}

.s-mechanism__hotspot.is-dimmed {
  opacity: 0.4;
  animation-play-state: paused;
}

/* Mobile — hide hotspots, cards become primary interaction */
@media (max-width: 1023px) {
  .s-mechanism__hotspot {
    width: 28px;
    height: 28px;
  }
  .s-mechanism__hotspot span { width: 8px; height: 8px; }
  .s-mechanism__diagram-frame {
    max-width: 360px;
    aspect-ratio: 3 / 4;
  }
  .s-mechanism__lead {
    text-align: center;
    max-width: 90%;
  }
}


/* ============================================================================
   §7 — STATS (Big confident numerals, no rings)
   ----------------------------------------------------------------------------
   Cream bg. 3 stats: small | hero | small. Massive brand-green numerals,
   bold black label below. Thin green hairline above each numeral.
   ============================================================================ */

.s-stats {
  background: var(--color-surface-cream);
  padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
  .s-stats { padding: var(--space-20) 0; }
}

.s-stats__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.s-stats__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}

.s-stats__header .t-eyebrow {
  color: var(--color-brand-green);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.s-stats__header .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-high);
  text-wrap: balance;
  margin: 0;
}

.s-stats__header .t-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0;
}

.s-stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  text-align: center;
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .s-stats__grid {
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: var(--space-10);
    align-items: end;
  }
}

/* Single stat block */
.s-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  position: relative;
}

.s-stat::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-brand-green);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.s-stat__num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(3.5rem, 2rem + 4vw, 5.5rem);   /* 56 → 88px */
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--color-brand-green);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}

.s-stat__suffix {
  font-size: 0.55em;
  font-weight: var(--weight-bold);
  margin-left: 2px;
  letter-spacing: -0.02em;
}

/* Hero stat — larger, dominant */
.s-stat--hero .s-stat__num {
  font-size: clamp(4.5rem, 2.5rem + 5vw, 7rem);   /* 72 → 112px */
}

.s-stat__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);  /* 15 → 17px */
  line-height: 1.4;
  color: var(--color-text-high);
  max-width: 28ch;
  margin: 0;
}

.s-stats__footnote {
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-mid);
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-hairline);
  max-width: 720px;
  margin-inline: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   §8 — TIMELINE (v2 rebuild)
   Cream bg, 3-col grid, dashed brand-green connector, numbered circles.
   Hyro's "Grip it / Rip it / Sip it" pattern.
   ════════════════════════════════════════════════════════════════════════════ */

.s-timeline {
  background-color: var(--color-surface-warm);
  padding-block: clamp(72px, 9vw, 120px);
}

.s-timeline__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.s-timeline__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}

.s-timeline .s-timeline__header .t-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--color-brand-green);
}

.s-timeline .s-timeline__header .t-h2 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-high);
  text-transform: none;
  margin: 0 0 16px;
}

.s-timeline .s-timeline__header .t-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-mid);
  margin: 0 auto;
}

/* The rail — relative for the dashed connector pseudo-element */
.s-timeline__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
}

/* Dashed brand-green connector line — horizontal on desktop.
   Sits behind the numbered circles (z-index 0; circles z-index 1).
   Heavy resets to defeat v1 page.css gradient connector. */
.s-timeline .s-timeline__rail::before {
  content: '' !important;
  position: absolute !important;
  top: 23px !important; /* aligns with the centre of a 48px node */
  /* Pull line in so it terminates inside the outer circles (1/6 width = column centre, +24px = circle edge) */
  left: calc(100% / 6 + 24px) !important;
  right: calc(100% / 6 + 24px) !important;
  bottom: auto !important;
  width: auto !important;
  height: 0 !important;
  background: none !important;
  border: none !important;
  border-top: 2px dashed var(--color-brand-green) !important;
  opacity: 0.55 !important;
  z-index: 0 !important;
}

.s-timeline__milestone {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 8px;
  transition: transform 220ms ease;
}

.s-timeline__milestone:hover .s-timeline__node {
  transform: scale(1.05);
}

/* Numbered circle — brand green, white digit, sits on the dashed line.
   Heavy overrides to defeat the v1 page.css `position:absolute` rules. */
.s-timeline .s-timeline__node,
.s-timeline__milestone > .s-timeline__node {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 48px !important;
  height: 48px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--color-brand-green) !important;
  background-color: var(--color-brand-green) !important;
  color: #ffffff !important;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 18px;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(31, 30, 25, 0.04), 0 8px 20px rgba(98, 157, 66, 0.18);
  transition: transform 220ms ease;
}

/* Also kill the v1 milestone padding so the centred flex layout reads cleanly */
.s-timeline .s-timeline__milestone {
  padding-left: 0 !important;
  padding-top: 0 !important;
  gap: 0 !important;
}

/* Kill any v1 SVG sizing inside node — defensive in case markup regresses */
.s-timeline__node svg {
  display: none;
}

.s-timeline__when {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-green);
  margin-bottom: 10px;
}

.s-timeline__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: clamp(20px, 2vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-text-high);
  text-transform: none;
  margin: 0 0 12px;
}

.s-timeline__desc {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-mid);
  max-width: 28ch;
  margin: 0 auto;
}

/* Mobile — stack to a single column; rotate the dashed line vertical */
@media (max-width: 768px) {
  .s-timeline__rail {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 56px);
  }
  .s-timeline__rail::before {
    top: 24px;
    bottom: 24px;
    left: 50%;
    right: auto;
    width: 0;
    height: auto;
    border-top: none;
    border-left: 2px dashed var(--color-brand-green);
  }
}