/* Home page styles */

/* --- Hero: headline on green, the photograph whole beside it ---
   The photograph sits in a 3:4 frame (its own shape, so nothing is cropped) on
   the right edge, as tall as the screen allows but never wider than half of it.
   A light green tint sits over it, and its left, top and bottom edges fade into
   the Digestate Green ground, so the photo melts into the headline side rather
   than ending on a hard line. The headline sits on solid green, not on the
   photo, so it holds contrast whatever the photograph does. */
.hero {
  --hero-photo-w: min(calc(100vh * 0.75), 50vw);
  --hero-photo-w: min(calc(100dvh * 0.75), 50vw);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--dark-surface-deep);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* An <img> rather than a CSS background so the preload scanner can find it and
   fetchpriority actually applies. */
.hero__media {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  display: block;
  width: var(--hero-photo-w);
  aspect-ratio: 3 / 4;
  transform: translateY(-50%);
}
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Tint: a light wash of Sprout Green, multiplied, so whites read faintly green
   and the blue bucket and grey sky sit closer to the palette. */
.hero__media::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  background-color: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.28;
  pointer-events: none;
}
/* Fade: the left, top and bottom edges dissolve into the ground colour. The
   overlays run 1px past the frame: the frame is centred with a transform, so its
   edges can land on a half pixel and leave a light seam otherwise. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  background:
    linear-gradient(to right,  rgb(21, 33, 22) 0%, rgba(21, 33, 22, 0.55) 18%, rgba(21, 33, 22, 0) 42%),
    linear-gradient(to bottom, rgb(21, 33, 22) 0%, rgba(21, 33, 22, 0) 20%),
    linear-gradient(to top,    rgb(21, 33, 22) 0%, rgba(21, 33, 22, 0) 18%);
  pointer-events: none;
}

/* Copy on the left, clear of the photograph. Not centred in .container: the
   right padding reserves the photo's width, the left lines up with every
   full-bleed band below. */
.hero__container {
  position: relative;
  z-index: 3;
  max-width: none;
  padding: 120px calc(var(--hero-photo-w) + clamp(24px, 3vw, 56px)) 150px var(--bleed-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: left;
  width: 100%;
}
.hero__content {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__eyebrow {
  color: var(--inverse-primary);
  display: block;
  margin-bottom: 24px;
}
.hero__headline {
  color: var(--primary-fixed);
  font-size: clamp(2.4rem, 4.8vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero__sub {
  color: rgba(218,225,222,0.82);
  max-width: 540px;
  margin-bottom: 0;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hero__actions .btn { justify-content: center; }

/* --- Scroll cue --- */
/* Under the copy on the left, not centred: the centre of the screen is the
   photograph's edge. */
.hero__scroll {
  position: absolute;
  z-index: 3;
  left: var(--bleed-pad);
  bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
  color: rgba(238,241,240,0.82);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__scroll:hover { color: var(--cloud-white); }
.hero__scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(238,241,240,0.35);
  border-radius: 50%;
  animation: hero-bob 2.1s ease-in-out infinite;
}
.hero__scroll:hover .hero__scroll-arrow { border-color: rgba(238,241,240,0.75); }
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow { animation: none; }
}

/* --- Our Approach ---
   Headline row on top, then three figures as full-width columns with hairlines
   running to both screen edges. */
.intro__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px 64px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.intro__headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--on-surface);
  margin-bottom: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* --- Stat blocks ---
   Each figure is a button. Hover (pointer), focus (keyboard) or tap (touch)
   floods its column Forest Green and fades the label out while the provenance
   panel fades in over the lower part of the same column. The panel is laid
   over the column rather than pushed below it, so opening one never moves the
   rest of the page. Revealed by CSS on :hover/:focus-within (and .is-open from
   home.js for touch) so it still works with JS off. */
.intro__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--outline);
  border-bottom: 1px solid var(--outline);
}
.stat-block {
  position: relative;
  border-left: 1px solid var(--outline-variant);
}
.stat-block:first-child { border-left: 0; }
.stat-block__trigger {
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 24vw, 340px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 44px);
  text-align: left;
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.stat-block:first-child .stat-block__trigger,
.stat-block:first-child .stat-block__detail { padding-left: var(--bleed-pad); }
.stat-block:last-child .stat-block__trigger,
.stat-block:last-child .stat-block__detail { padding-right: var(--bleed-pad); }

.stat-block__trigger .stat__value {
  font-size: clamp(2.6rem, 5.4vw, 4.75rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.stat-block__trigger .stat__label { max-width: 32ch; margin-top: auto; }
.stat-block__trigger .stat__label,
.stat-block__trigger .stat__basis { transition: opacity var(--transition-base); }

.stat-block__detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 clamp(24px, 3vw, 44px) clamp(32px, 4vw, 52px);
  color: var(--on-primary-container);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.stat-block__detail p {
  margin: 0;
  max-width: 40ch;
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
}

.stat-block:focus-within .stat-block__trigger,
.stat-block.is-open .stat-block__trigger { background-color: var(--dark-surface); }
.stat-block:focus-within .stat__value,
.stat-block.is-open .stat__value { color: var(--inverse-primary); }
.stat-block:focus-within .stat__label,
.stat-block:focus-within .stat__basis,
.stat-block.is-open .stat__label,
.stat-block.is-open .stat__basis { opacity: 0; }
.stat-block:focus-within .stat-block__detail,
.stat-block.is-open .stat-block__detail {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (hover: hover) {
  .stat-block:hover .stat-block__trigger { background-color: var(--dark-surface); }
  .stat-block:hover .stat__value { color: var(--inverse-primary); }
  .stat-block:hover .stat__label,
  .stat-block:hover .stat__basis { opacity: 0; }
  .stat-block:hover .stat-block__detail { opacity: 1; visibility: visible; transform: none; }
}
.stat-block__trigger:focus-visible { outline-color: var(--inverse-primary); outline-offset: -6px; }

/* One column: each figure gets the full width, so the panel always fits. */
@media (max-width: 1024px) {
  .intro__stats { grid-template-columns: 1fr; }
  .stat-block { border-left: 0; border-top: 1px solid var(--outline-variant); }
  .stat-block:first-child { border-top: 0; }
  .stat-block__trigger,
  .stat-block__detail,
  .stat-block:first-child .stat-block__trigger,
  .stat-block:first-child .stat-block__detail,
  .stat-block:last-child .stat-block__trigger,
  .stat-block:last-child .stat-block__detail { padding-left: var(--bleed-pad); padding-right: var(--bleed-pad); }
  .stat-block__trigger { min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-block__detail { transition: none; transform: none; }
}

/* --- Products grid --- */
.product-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--outline-variant);
}
.spec { display: flex; flex-direction: column; gap: 3px; }
.spec span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}
.spec strong {
  font-family: var(--font-subhead);
  font-size: 15px;
  font-weight: var(--weight-subhead);
  color: var(--primary);
}

/* --- Impact --- */
.impact-grid { border-top: 1px solid rgba(101,151,106,0.2); padding-top: 60px; }
.impact-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 24px;
  border: 1px solid rgba(101,151,106,0.15);
  border-radius: 0;
}

/* --- Tech diagram --- */
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px;
  align-items: center;
}
.tech-pillars { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; }
.tech-pillar {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.tech-pillar__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bio-moss);
  background-color: var(--primary-fixed);
  width: 32px;
  height: 32px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tech-pillar__title {
  font-family: var(--font-subhead);
  font-size: 15px;
  font-weight: var(--weight-subhead);
  color: var(--on-surface);
  margin-bottom: 4px;
}
.tech-pillar__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-surface-variant);
}

.tech-diagram {
  background-color: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 0;
  padding: 32px;
}
.diag-node--top {
  text-align: center;
  padding: 12px 20px;
  background-color: var(--surface-container);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
  margin-bottom: 20px;
  border: 1px dashed var(--outline-variant);
}
.diag-flow { display: flex; flex-direction: column; gap: 4px; }
.diag-module {
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--transition-fast);
}
.diag-module:hover { border-color: var(--primary-fixed-dim); }
.diag-module strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bio-moss);
}
.diag-module p { font-size: 13px; color: var(--on-surface-variant); }
.diag-arrow {
  text-align: center;
  color: var(--bio-moss);
  font-size: 18px;
  line-height: 1.2;
  padding: 2px 0;
}
.diag-outputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 16px;
}
.diag-output {
  text-align: center;
  padding: 10px 8px;
  background-color: var(--primary-fixed);
  border-radius: 0;
}
.diag-output span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

/* --- Ecosystem --- */
.ecosystem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ecosystem-features { display: flex; flex-direction: column; gap: 28px; }
.eco-feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.eco-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background-color: rgba(101,151,106,0.12);
  border: 1px solid rgba(101,151,106,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--inverse-primary);
}
.eco-feature h4 {
  font-family: var(--font-subhead);
  font-size: 15px;
  font-weight: var(--weight-subhead);
  color: var(--primary-fixed);
  margin-bottom: 6px;
}
.eco-feature p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-primary-container);
}

/* --- CTA --- */
/* Centred in the page, not just centre-aligned text, it had a max-width with
   no auto margins, which pinned the whole block to the left. */
.cta-inner { max-width: 680px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .tech-grid { grid-template-columns: 1fr; }
  .tech-diagram { display: none; }
  .ecosystem-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  /* Stacked: the copy first, then the photograph whole at full width (capped so
     a tablet does not get a screen-and-a-half of photo), fading in from above. */
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__container { padding: 112px var(--bleed-pad) 32px; }
  .hero__media {
    order: 2;
    position: relative;
    top: auto;
    transform: none;
    width: min(100%, 560px);
    margin-inline: auto;
  }
  /* Under the copy now: every edge fades into the ground, so the frame never
     shows as a hard line where it stops short of the screen edge. */
  .hero__media::after {
    background:
      linear-gradient(to bottom, rgb(21, 33, 22) 0%, rgba(21, 33, 22, 0) 22%),
      linear-gradient(to top,    rgb(21, 33, 22) 0%, rgba(21, 33, 22, 0) 16%),
      linear-gradient(to right,  rgb(21, 33, 22) 0%, rgba(21, 33, 22, 0) 10%),
      linear-gradient(to left,   rgb(21, 33, 22) 0%, rgba(21, 33, 22, 0) 10%);
  }
  .hero__scroll { display: none; }
}
@media (max-width: 768px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* --- Product Split Blocks --- */
.product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.product-split--flip { direction: rtl; }
.product-split--flip > * { direction: ltr; }
.product-split__image {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background-size: cover;
  background-position: center;
}
.product-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
  background-color: var(--surface);
}
.product-split__label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: 16px;
}
.product-split__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--on-surface);
  margin-bottom: 20px;
}
.product-split__body {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--on-surface-variant);
  margin-bottom: 24px;
}
.product-split__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--outline-variant);
}

/* --- Dot Timeline --- */
.timeline { margin-top: 56px; }
.timeline__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-bottom: 0;
  margin-bottom: 48px;
}
.timeline__track::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--outline-variant);
}
.timeline__dot {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}
.timeline__dot::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--outline-variant);
  background: var(--surface);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}
.timeline__dot:hover::before,
.timeline__dot.is-active::before {
  border-color: var(--primary);
  background-color: var(--primary);
  transform: scale(1.4);
}
.timeline__dot-num {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  transition: color var(--transition-fast);
}
.timeline__dot.is-active .timeline__dot-num { color: var(--primary); }
.timeline__panels { position: relative; min-height: 120px; }
.timeline__panel {
  display: none;
  max-width: 680px;
  animation: panelFade 0.3s ease;
}
.timeline__panel.is-active { display: block; }
@keyframes panelFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.timeline__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 16px;
}
.timeline__text {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--on-surface-variant);
}

/* --- Long-Term Vision accordion --- */
.vision-section { }
.vision__headline {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--primary-fixed);
  margin: 20px 0 48px;
}
.vision-values {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--dark-border);
}
.vision-value {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--dark-border);
  cursor: pointer;
  text-align: left;
  padding: 28px 0;
  transition: color var(--transition-fast);
}
.vision-value__head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.vision-value__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-dim);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.vision-value__title {
  font-family: var(--font-subhead);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: var(--weight-subhead);
  color: var(--on-dark-dim);
  flex: 1;
  transition: color var(--transition-fast);
}
.vision-value__chevron {
  font-size: 24px;
  font-weight: 300;
  color: var(--on-dark-dim);
  transition: transform var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}
.vision-value[aria-expanded="true"] .vision-value__icon,
.vision-value[aria-expanded="true"] .vision-value__title,
.vision-value[aria-expanded="true"] .vision-value__chevron {
  color: var(--accent);
}
.vision-value[aria-expanded="true"] .vision-value__chevron { transform: rotate(45deg); }
.vision-value__body {
  max-height: 0;
  overflow: hidden;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--on-dark-dim);
  padding-left: 56px;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding-top 0.3s ease;
  padding-top: 0;
}
.vision-value[aria-expanded="true"] .vision-value__body {
  max-height: 200px;
  padding-top: 16px;
}

/* --- Get Started CTA ---
   Headline sized to span the screen; name, email and button join into one bar
   across the full width. .signup takes the same side padding as a full-bleed
   band, so it lines up with the container content above it. */
.signup { padding: 0 var(--bleed-pad); }
.cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8.6vw, 9.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--on-surface);
  margin-bottom: 0;
  text-wrap: balance;
}
.cta-tagline {
  margin-top: 20px;
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  font-style: italic;
}
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  margin-top: clamp(28px, 3vw, 44px);
  border: 1.5px solid var(--on-surface);
  background-color: var(--surface-container-lowest);
}
.newsletter-form input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--on-surface);
  background-color: transparent;
  border: 0;
  border-right: 1.5px solid var(--on-surface);
  border-radius: 0;
  padding: 22px 24px;
  min-width: 0;
  outline: none;
}
.newsletter-form input::placeholder { color: #6B6560; }
.newsletter-form .btn { border-radius: 0; padding-left: 40px; padding-right: 40px; }
.newsletter-form.is-hidden { display: none; }
.newsletter-success,
.newsletter-error {
  display: none;
  margin-top: 20px;
}
.newsletter-success.is-visible { display: block; }
.newsletter-error.is-visible { display: block; }
.newsletter-success {
  color: var(--primary);
  font-weight: 500;
}
.newsletter-error {
  color: var(--error, #8C2F27);
}
.newsletter-error a { color: inherit; text-decoration: underline; }
@media (max-width: 768px) {
  .newsletter-form { grid-template-columns: 1fr; }
  .newsletter-form input { border-right: 0; border-bottom: 1.5px solid var(--on-surface); }
  .newsletter-form .btn { justify-content: center; }
}

/* --- Responsive additions --- */
@media (max-width: 1024px) {
  .product-split { grid-template-columns: 1fr; min-height: auto; }
  .product-split--flip { direction: ltr; }
  .product-split__image { min-height: 300px; }
  .product-split__content { padding: 48px 32px; }
}
@media (max-width: 768px) {
  .product-split__specs { grid-template-columns: 1fr; }
  .timeline__track { gap: 0; }
  .vision__headline { font-size: clamp(2rem, 9vw, 3rem); }
}

/* --- Why EvE Waste: one pillar per screen ---
   Each pillar is a full-viewport panel. position: sticky with top: 0 pins each
   one while the next scrolls up over it, so the four read as chapters turning.
   No scroll script. The text colours are the dark-surface tokens, all of which
   clear AA on every one of the four grounds (the lightest, --bio-moss, still
   gives Clay Blue 5.6:1). */
.chapters__intro {
  background-color: var(--dark-surface);
  padding: var(--section-padding) 0 0;
}
.chapters__intro .section__eyebrow { color: var(--on-primary-container); }
.chapters__intro .section__title { color: var(--primary-fixed); margin-bottom: 0; }

.chapters__list { list-style: none; margin: 0; padding: 0; }
.chapter {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding: calc(var(--header-h) + 32px) var(--bleed-pad) 0;
  overflow: hidden;
  color: var(--on-primary-container);
}
.chapter:nth-child(1) { background-color: var(--dark-surface); }
.chapter:nth-child(2) { background-color: var(--dark-surface-deep); }
.chapter:nth-child(3) { background-color: var(--dark-surface-mid); }
.chapter:nth-child(4) { background-color: var(--bio-moss); }

.chapter__num {
  align-self: end;
  font-family: var(--font-headline);
  font-size: clamp(9rem, 24vw, 22rem);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: 0.01em;
  color: var(--inverse-primary);
  margin-bottom: -0.04em;
}
@supports (-webkit-text-stroke: 1px black) {
  .chapter__num { color: transparent; -webkit-text-stroke: 2px var(--inverse-primary); }
  .chapter:nth-child(4) .chapter__num { -webkit-text-stroke-color: var(--primary-fixed); }
}
.chapter__text { padding-bottom: calc(var(--header-h) / 2); }
.chapter__count {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--primary-fixed);
  margin-bottom: 20px;
}
.chapter__title {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--primary-fixed);
  margin: 0 0 24px;
  max-width: 18ch;
  text-wrap: balance;
}
.chapter__body {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 768px) {
  /* No pinning on phones: a 100vh panel per pillar is a lot of thumb travel. */
  .chapter {
    position: static;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 56px var(--bleed-pad) 0;
  }
  .chapter__num { font-size: clamp(6rem, 32vw, 9rem); order: 2; }
  .chapter__text { padding-bottom: 0; }
}

/* --- Landfill vs EvE, paired rows ---
   A two-column table, edge to edge: each landfill line sits directly across
   from the EvE line that answers it. Both sides are full-contrast. */
.pairs {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pairs th,
.pairs td {
  width: 50%;
  text-align: left;
  vertical-align: top;
  padding: 20px clamp(24px, 3vw, 48px);
}
.pairs th:first-child,
.pairs td:first-child { padding-left: var(--bleed-pad); }
.pairs th:last-child,
.pairs td:last-child { padding-right: var(--bleed-pad); }
.pairs th {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(20px, 2vw, 28px);
}
.pairs th:first-child,
.pairs td:first-child {
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
}
.pairs th:last-child,
.pairs td:last-child {
  background-color: var(--primary);
  color: var(--cloud-white);
}
.pairs td {
  font-size: 16px;
  line-height: 1.6;
  border-top: 1px solid var(--outline-variant);
  transition: background-color var(--transition-fast);
}
.pairs td:last-child { border-top-color: rgba(255, 255, 255, 0.2); }
.pairs tbody tr:hover td:first-child { background-color: var(--surface-container-low); }
.pairs tbody tr:hover td:last-child { background-color: var(--dark-surface); }
.pairs__cell { display: flex; gap: 12px; align-items: baseline; }
.pairs__mark { flex-shrink: 0; width: 14px; font-weight: 700; }
.pairs td:first-child .pairs__mark { color: var(--on-surface-variant); }
/* --inverse-primary is tuned for Forest Green and only reaches 2.20:1 on the
   lighter --primary ground. --primary-fixed (Clay Blue) clears AA here. */
.pairs td:last-child .pairs__mark { color: var(--primary-fixed); }

.versus__sources {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-surface-variant);
}
.versus__sources a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .pairs th,
  .pairs td { padding: 14px 12px; }
  .pairs th:first-child, .pairs td:first-child { padding-left: var(--bleed-pad); }
  .pairs th:last-child, .pairs td:last-child { padding-right: var(--bleed-pad); }
  .pairs td { font-size: 14px; }
  .pairs__cell { gap: 8px; }
}