/* =============================================================
   BioRevolution Coalition  |  Site styles (prototype)
   Tokens and primitives lifted from brandbook.html
   ============================================================= */

:root {
  /* Palette */
  --forest-ink:   #112717;
  --sage:         #596459;
  --leaf-green:   #24B101;
  --chartreuse:   #DBE801;
  --cream:        #FFF7E4;
  --amber:        #FFBF00;

  /* Fossil-contrast greys */
  --fossil-dark:  #2A2D2E;
  --fossil-mid:   #5C5F60;
  --fossil-light: #B8BABA;

  /* Semantic */
  --bg-default:    var(--cream);
  --bg-inverse:    var(--forest-ink);
  --text-default:  var(--forest-ink);
  --text-inverse:  var(--cream);
  --text-muted:    var(--sage);
  --cta-bg:        var(--leaf-green);
  --cta-text:      var(--forest-ink);
  --cta-hover-bg:  var(--chartreuse);
  --highlight:     var(--chartreuse);
  --hairline:      rgba(17,39,23,.14);
  --hairline-ink:  rgba(255,247,228,.18);

  /* Type */
  --font-sans:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-narrow: "Archivo Narrow", "Archivo", sans-serif;
  --font-meta:   "Inter", "Archivo", sans-serif;

  /* Motion */
  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);

  /* Structure */
  --gutter: clamp(24px, 4vw, 64px);
  --max:    1280px;
  --section-pad: 120px;

  /* Shared voronoi background for hex cards (ink tint) */
  --voronoi-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g stroke='%23DBE801' stroke-width='1.5' fill='none'><path d='M20 55 L 60 70 L 90 40 L 100 10'/><path d='M60 70 L 80 110 L 40 130 L 20 90'/><path d='M80 110 L 120 100 L 140 60 L 170 40'/><path d='M120 100 L 150 130 L 170 110 L 180 55'/><path d='M40 130 L 70 160 L 50 180 L 20 145'/><path d='M70 160 L 110 155 L 130 180 L 100 190'/><path d='M110 155 L 150 150 L 170 180 L 180 145'/><path d='M150 130 L 150 150'/></g></svg>");
  --voronoi-cream: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g stroke='%23112717' stroke-width='1.5' fill='none'><path d='M20 55 L 60 70 L 90 40 L 100 10'/><path d='M60 70 L 80 110 L 40 130 L 20 90'/><path d='M80 110 L 120 100 L 140 60 L 170 40'/><path d='M120 100 L 150 130 L 170 110 L 180 55'/><path d='M40 130 L 70 160 L 50 180 L 20 145'/><path d='M70 160 L 110 155 L 130 180 L 100 190'/><path d='M110 155 L 150 150 L 170 180 L 180 145'/><path d='M150 130 L 150 150'/></g></svg>");
  --mycelium-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g stroke='%2324B101' stroke-width='1.5' fill='none' stroke-linecap='round'><path d='M200 40 C 180 100, 220 160, 200 220 C 190 260, 160 300, 120 340'/><path d='M200 120 C 240 160, 280 180, 320 200'/><path d='M200 220 C 240 240, 280 280, 340 320'/><path d='M200 140 C 160 180, 120 200, 80 220'/><path d='M200 260 C 160 300, 120 320, 60 340'/><path d='M200 200 C 220 280, 240 360, 260 380'/></g></svg>");
}

/* --- Reset + base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-default);
  background: var(--bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* =============================================================
   Section shell
   ============================================================= */
section.bk {
  padding: var(--section-pad) var(--gutter);
  position: relative;
  overflow: hidden;
}
section.bk.dark  { background: var(--bg-inverse); color: var(--text-inverse); }
section.bk.light { background: var(--bg-default); color: var(--text-default); }

section.bk#situation,
section.bk#case-studies { padding-top: 0; }

.wrap { max-width: var(--max); margin: 0 auto; position: relative; }

/* Running header */
.running {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: clamp(15px, 2.25vh, 27px);
  opacity: .85;
}
.running .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--leaf-green);
  display: inline-block; margin: 0 10px 2px; vertical-align: middle;
}
.dark .running { color: var(--cream); }
.dark .running .dot { background: var(--chartreuse); }

/* Section label */
.label {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.dark .label { color: var(--chartreuse); }
.label::before {
  content: ""; width: 28px; height: 1px;
  background: currentColor; display: inline-block; opacity: .7;
}

/* =============================================================
   Typography primitives
   ============================================================= */
.h1 {
  font-weight: 900;
  font-size: clamp(40px, 5.6vw, 86px);
  line-height: .96; letter-spacing: -.02em;
  margin: 0 0 .4em;
}
.h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 .6em;
}
.h3 { font-weight: 600; font-size: 22px; line-height: 1.2; margin: 0 0 .4em; }
.lead {
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.4; max-width: 60ch; margin: 0 0 1em;
}
.body p { max-width: 64ch; margin: 0 0 1em; }
.body p:last-child { margin-bottom: 0; }
.muted { color: var(--text-muted); }
.dark .muted { color: rgba(255,247,228,.6); }
.caption {
  font-family: var(--font-meta);
  font-weight: 400; font-size: 13px;
  letter-spacing: .04em; color: var(--sage);
}
.dark .caption { color: rgba(255,247,228,.55); }
hr.rule { height: 1px; background: var(--hairline); border: 0; margin: clamp(40px, 6vh, 72px) 0; }
.dark hr.rule { background: var(--hairline-ink); }
.pad-t { padding-top: clamp(20px, 6vh, 72px); }
.pad-b { padding-bottom: clamp(40px, 6vh, 72px); }
.tight { max-width: 42ch; }
.tight.wider { max-width: 53ch; }
.tight.widest { max-width: 64ch; }
.small { font-size: 14px; }

/* Inline text link (used inside body copy where the URL is not yet wired up) */
.text-link {
  color: var(--leaf-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 150ms var(--ease-organic), text-decoration-color 150ms var(--ease-organic);
}
.text-link:hover { color: var(--forest-ink); text-decoration-color: var(--leaf-green); }
.dark .text-link { color: var(--chartreuse); }
.dark .text-link:hover { color: var(--cream); }

/* =============================================================
   Strapline lockup
   ============================================================= */
.lockup {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 14px;
}
.lockup .one {
  font-weight: 900;
  font-size: clamp(56px, 8vw, 120px);
  line-height: .9; letter-spacing: -.03em;
}
.lockup .rule-line {
  width: 40%; min-width: 120px; height: 1px;
  background: var(--sage);
}
.dark .lockup .rule-line { background: var(--chartreuse); }
.lockup .two-l {
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: .10em; text-transform: uppercase;
}
.dark .lockup .two-l { color: var(--chartreuse); }

/* =============================================================
   Button
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 16px;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--cta-bg);
  color: var(--cta-text);
  border: 0; border-radius: 4px;
  cursor: pointer; text-decoration: none;
  transition: background-color 150ms var(--ease-organic),
              color 150ms var(--ease-organic),
              transform 150ms var(--ease-organic);
}
.btn:hover { background: var(--cta-hover-bg); }
.btn:focus-visible { outline: 2px solid var(--chartreuse); outline-offset: 2px; }
.btn.secondary {
  background: transparent;
  border: 1.5px solid var(--leaf-green);
  color: var(--leaf-green);
}
.btn.secondary:hover { background: var(--leaf-green); color: var(--forest-ink); }
.dark .btn.secondary:hover { color: var(--forest-ink); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* =============================================================
   Sticky nav
   ============================================================= */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  background: var(--forest-ink);
  border-bottom: 1px solid transparent;
  pointer-events: auto;
  transition: background-color 250ms var(--ease-organic),
              backdrop-filter 250ms var(--ease-organic),
              border-color 250ms var(--ease-organic),
              padding 250ms var(--ease-organic);
}
.site-nav.is-solid {
  background: rgba(17, 39, 23, .92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--hairline-ink);
  padding: 14px var(--gutter);
}
.site-nav.is-solid .brand img { height: 44px; }
.site-nav .brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--cream);
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
}
.site-nav .brand img {
  height: 64px; width: auto; display: block;
  transition: height 250ms var(--ease-organic);
}
.site-nav .links { display: flex; align-items: center; gap: 28px; }
.site-nav .links a:not(.btn) {
  color: var(--cream);
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  opacity: .9;
  transition: opacity 150ms var(--ease-organic), color 150ms var(--ease-organic);
}
.site-nav .links a:not(.btn):hover { opacity: 1; color: var(--chartreuse); }
.site-nav .btn { padding: 10px 18px; font-size: 14px; opacity: 1; }
@media (max-width: 900px) {
  .site-nav .links a:not(.btn) { display: none; }
}
@media (max-width: 720px) {
  .site-nav .brand img { height: 48px; }
  .site-nav.is-solid .brand img { height: 36px; }
  .site-nav .btn { padding: 6px 6px; }
}

/* =============================================================
   S1  HERO
   ============================================================= */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(var(--section-pad) + 60px, 18vh, 200px) var(--gutter) clamp(var(--section-pad), 10vh, 120px);
  background: var(--forest-ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 550px;
}
@media (min-width: 1024px) {
  .hero-copy { max-width: 640px; }
}
.hero .eyebrow {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--chartreuse);
  margin-bottom: 32px;
  display: inline-flex; align-items: center; gap: 14px;
}
.hero .eyebrow::before {
  content: ""; width: 36px; height: 1px; background: var(--chartreuse);
}
.hero .deck {
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 22px);
  max-width: 42ch;
  color: rgba(255,247,228,.82);
  margin: 32px 0 0;
  line-height: 1.4;
}
.hero .cta-audiences {
  margin-top: clamp(40px, 6vh, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 640px;
}
.hero .cta-audiences a {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
  padding: 18px 20px;
  text-decoration: none;
  background: rgba(255,247,228,.03);
  border: 1px solid var(--hairline-ink);
  color: var(--cream);
  transition: background-color 200ms var(--ease-organic),
              border-color 200ms var(--ease-organic),
              transform 200ms var(--ease-organic);
  position: relative;
  overflow: hidden;
}
.hero .cta-audiences a::before {
  /* hex corner mark */
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 14px; height: 14px;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='20,2 36,11 36,29 20,38 4,29 4,11' fill='none' stroke='%23DBE801' stroke-width='2'/></svg>");
  opacity: .75;
}
.hero .cta-audiences a:hover {
  background: rgba(219,232,1,.05);
  border-color: var(--chartreuse);
  transform: translateY(-2px);
}
.hero .cta-audiences .who {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--chartreuse);
}
.hero .cta-audiences .action {
  font-weight: 800; font-size: 17px;
  letter-spacing: -.005em;
  line-height: 1.15;
}
@media (max-width: 880px) {
  .hero .cta-audiences { grid-template-columns: 1fr; }
}

.hero-art {
  position: absolute;
  top: -11%;
  right: -12%;
  width: 60%;
  height: 120%;
  pointer-events: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,.6) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,.6) 60%, transparent 100%);
}
.hero-art img {
  width: 110%;
  height: 110%;
  object-fit: contain;
  object-position: right center;
  opacity: .55;
}
@media (max-width: 880px) {
  .hero-art {
    position: absolute;
    top: 0; right: -20%; bottom: 0;
    width: 80%;
    height: 100%;
    opacity: .35;
    mask-image: linear-gradient(to left, rgba(0,0,0,.8) 0%, transparent 80%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.8) 0%, transparent 80%);
  }
}


/* =============================================================
   S2  PETITION
   ============================================================= */
.petition-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) { .petition-grid { grid-template-columns: 1fr; } }

.progress { margin-top: 8px; }
.progress .petition-status {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  opacity: .85;
  margin-bottom: 12px;
}
.progress .petition-status a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.progress .petition-status a:hover { color: var(--leaf-green); }
.dark .progress .petition-status { color: var(--cream); }
.dark .progress .petition-status a:hover { color: var(--chartreuse); }

.progress .count {
  font-weight: 900;
  font-size: clamp(48px, 6.8vw, 82px);
  line-height: 1;
  color: var(--leaf-green);
  letter-spacing: -.02em;
}

/* Petition h1 sized down a touch further than the global section header */
#petition .h1 { font-size: clamp(37px, 5.27vw, 82px); }
.dark .progress .count { color: var(--chartreuse); }
.progress .track {
  height: 24px;
  background: rgba(89,100,89,.2);
  border-radius: 4px;
  overflow: hidden; position: relative;
  margin-top: 18px;
}
.dark .progress .track { background: rgba(255,247,228,.08); }
.progress .fill {
  height: 100%; width: 64.23%;
  background: var(--leaf-green);
  transition: width 1200ms var(--ease-organic);
}
.progress .goal-tick {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .14em;
  color: var(--forest-ink);
  pointer-events: none;
}
.dark .progress .goal-tick { color: var(--cream); }
.progress .cap {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage);
  margin-top: 14px;
}

.share-strip {
  display: flex; flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  align-items: center;
}
.share-strip .lbl {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage);
  margin-right: 4px;
}
.share-strip a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  color: var(--forest-ink);
  text-decoration: none;
  transition: background-color 150ms var(--ease-organic),
              color 150ms var(--ease-organic),
              border-color 150ms var(--ease-organic);
}
.share-strip a:hover { background: var(--forest-ink); color: var(--cream); border-color: var(--forest-ink); }
.share-strip svg { width: 18px; height: 18px; }

/* Newsletter signup - sits beneath the share-strip in the petition column.
   Submits to Mailchimp via JSONP (script.js); double opt-in. */
.newsletter-signup { margin-top: 48px; max-width: 480px; }
.newsletter-title {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 10px;
}
.newsletter-blurb {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.5;
  color: var(--text-default);
  margin: 0 0 18px;
}
.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
/* Class selector beats the UA [hidden]{display:none}, so restore it for this form. */
.newsletter-form[hidden] { display: none; }
.newsletter-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--forest-ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.newsletter-form input[type="email"]::placeholder { color: var(--fossil-light); }
.newsletter-form input[type="email"]:focus-visible {
  outline: 2px solid var(--leaf-green); outline-offset: 1px; border-color: var(--leaf-green);
}
.newsletter-form .btn { flex: 0 0 auto; }
.newsletter-form .btn:disabled { opacity: .6; cursor: default; }
/* Honeypot - hidden from people, available to bots that auto-fill */
.newsletter-hp { position: absolute; left: -5000px; }
.newsletter-response {
  display: none;
  margin: 14px 0 0;
  font-family: var(--font-meta);
  font-size: 15px; font-weight: 500; line-height: 1.4;
}
.newsletter-response.is-visible { display: block; }
.newsletter-response.is-success { color: var(--forest-ink); }
.newsletter-response.is-error { color: #A62B1F; }
.newsletter-consent {
  margin: 12px 0 0;
  font-family: var(--font-meta);
  font-size: 13px; line-height: 1.5;
  color: var(--text-muted);
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Parliamentary Supporters / Supporting Organisations blocks
   sit beneath the share-strip in the petition right column */
.supporters-block { margin-top: 48px; }
.supporters-block + .supporters-block { margin-top: 40px; }

.supporters-title {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 18px;
}

.supporter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) { .supporter-grid { grid-template-columns: repeat(2, 1fr); } }

.supporter-card { display: flex; flex-direction: column; gap: 10px; }
.supporter-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(89,100,89,.12);
  border: 1px dashed rgba(17,39,23,.18);
  border-radius: 2px;
  overflow: hidden;
}
.supporter-photo.has-photo {
  border: 0;
  background: rgba(89,100,89,.06);
}
.supporter-photo.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.supporter-name {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--forest-ink);
  line-height: 1.25;
}
.supporter-seat {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--sage);
}

/* Logo band sitting below the two-column petition area. Eight per row,
   left-aligned — partial last row fills from the left edge. Width is capped
   so the eight cells pack tighter (≈30% less space between logos) and the
   band stops short of the full page width, leaving space on the right. */
.supporters-orgs { margin-top: clamp(56px, 7vw, 88px); max-width: 1012px; }

.org-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px 20px;
  row-gap: 24px;
  /* Logos are centred in cells wider than themselves, so the first column
     sits ~11px in from the band edge; nudge the whole grid left so the first
     logo of each row lines up with the heading/tag above. Reset on mobile,
     where cells are smaller and the offset differs. */
  margin-left: -14px;
}

.org-slot {
  flex: 0 0 calc((100% - 140px) / 8); /* 8 cols × 7 gaps × 20px = 140px */
  aspect-ratio: 5 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(89,100,89,.08);
  border: 1px dashed rgba(17,39,23,.18);
  border-radius: 2px;
}
.org-slot.has-logo {
  background: transparent;
  border: 0;
}
/* Campaign-lead tag: standalone label sitting above the grid, left-aligned
   to the BBIA column. Keeping it outside the grid means every cell — BBIA
   included — has the same single-child flex layout, so all logos share
   one centring rule. */
.org-lead-tag {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--leaf-green);
  margin: 0 0 8px;
  /* Visual nudge only — moves the tag down toward the BBIA logo without
     altering layout flow, so BBIA's position is unchanged. */
  position: relative;
  top: 8px;
}
/* Single canonical logo height keeps the visual baseline tight regardless of
   each logo's intrinsic aspect ratio. */
.org-slot.has-logo img {
  max-height: 30px;
  max-width: min(100%, 88px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 760px) {
  .org-slot { flex: 0 0 calc((100% - 100px) / 6); } /* 6 per row */
  .org-grid { margin-left: 0; }
}
@media (max-width: 480px) {
  .org-slot { flex: 0 0 calc((100% - 60px) / 4); } /* 4 per row */
}

/* =============================================================
   S3  CRITICAL FLAW  (dark)
   ============================================================= */
.flaw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(32px, 5vh, 48px);
}
@media (max-width: 720px) { .flaw-grid { grid-template-columns: 1fr; } }

.hex-card {
  position: relative;
  padding: 36px;
  background: transparent;
  border: 1.5px solid var(--leaf-green);
  overflow: hidden;
  min-height: 260px;
  color: var(--cream);
  transition: transform 250ms var(--ease-organic);
}
.hex-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--voronoi-ink);
  background-size: cover;
  opacity: .08;
  transition: opacity 250ms var(--ease-organic);
  pointer-events: none;
}
.hex-card:hover::before { opacity: .22; }
.hex-card:hover { transform: translateY(-3px); }

/* Organic growth vector variant (Flaw 01, Flaw 02) */
.hex-card.organic::before {
  background-image: none;
  background-color: var(--chartreuse);
  -webkit-mask-image: url("Images/Organic%20growth%20vector.svg");
          mask-image: url("Images/Organic%20growth%20vector.svg");
  -webkit-mask-size: 160% auto;
          mask-size: 160% auto;
  -webkit-mask-position: right 20%;
          mask-position: right 20%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: .09;
}
.hex-card.organic:hover::before { opacity: .16; }
.hex-card .n {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--chartreuse);
  margin-bottom: 14px;
}
.hex-card h4 {
  font-weight: 800; font-size: 24px;
  letter-spacing: -.005em;
  margin: 0 0 .5em; line-height: 1.15;
}
.hex-card p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,247,228,.78); }

/* =============================================================
   S4  PROBLEM  (light, long-read)
   ============================================================= */
.problem-body {
  max-width: 70ch;
  font-size: 18px; line-height: 1.65;
}
.problem-body p { margin: 0 0 1.1em; }
.pull-quote {
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 22ch;
  margin: clamp(48px, 6vh, 72px) 0;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 3px solid var(--leaf-green);
  color: var(--forest-ink);
}

.cycle-diagram {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin: clamp(48px, 6vh, 72px) 0;
}
@media (max-width: 720px) { .cycle-diagram { grid-template-columns: 1fr; } }
.cycle-diagram figure {
  margin: 0;
  padding: 32px;
  border: 1px solid var(--hairline);
  background: var(--cream);
}
.cycle-diagram figure.fossil {
  background: #F4F1E8;
  border-color: var(--fossil-light);
}
.cycle-diagram figcaption {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 18px;
}
.cycle-diagram .fossil figcaption { color: var(--fossil-mid); }
.cycle-diagram svg { width: 100%; height: auto; }

/* Accordion */
.accordion { margin-top: clamp(32px, 5vh, 48px); }
.accordion details {
  border-top: 1px solid var(--hairline);
  padding: 20px 0;
}
.accordion details:last-of-type { border-bottom: 1px solid var(--hairline); }
.accordion summary {
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -.005em;
  list-style: none;
  padding: 4px 0;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .hex {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 250ms var(--ease-organic);
}
.accordion summary .hex svg { width: 100%; height: 100%; }
.accordion summary .hex line { transition: opacity 200ms var(--ease-organic), stroke 200ms var(--ease-organic); }
.accordion details[open] summary .hex polygon { fill: var(--leaf-green); transition: fill 200ms var(--ease-organic); }
.accordion details[open] summary .hex line { stroke: var(--cream); }
.accordion details[open] summary .hex .hex-plus-v { opacity: 0; }
.accordion .answer {
  padding: 8px 0 0 48px;
  max-width: 62ch;
  color: var(--forest-ink);
  font-size: 17px; line-height: 1.6;
}

/* =============================================================
   S5  INNOVATION GAP  (dark)
   ============================================================= */
.gap-section {
  padding: var(--section-pad) var(--gutter);
  background: var(--forest-ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.gap-section .myc-bg {
  position: absolute;
  inset: 0;
  background-image: var(--mycelium-ink);
  background-size: cover;
  background-position: center;
  opacity: .15;
  pointer-events: none;
}
.gap-section .wrap { position: relative; max-width: 960px; }
.gap-section .label {
  color: var(--chartreuse);
  display: flex;
  justify-content: center;
}
.gap-section .gap-stat {
  font-weight: 900;
  font-size: clamp(70px, 14.4vw, 154px);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--chartreuse);
  margin: 24px 0 48px;
}
.gap-section .gap-quote {
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  max-width: 46ch;
  margin: 0 auto;
  color: var(--cream);
  position: relative;
  text-align: center;
}
.gap-section .gap-quote::before {
  content: "";
  display: block;
  width: 40px; height: 1px;
  background: var(--chartreuse);
  margin: 0 auto 24px;
}
.gap-section .gap-source {
  display: block;
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,247,228,.5);
  margin-top: 28px;
}

/* =============================================================
   S6  SOLUTION  (light, roadmap)
   ============================================================= */
.roadmap {
  margin: clamp(48px, 6vh, 72px) 0;
  position: relative;
  min-height: 240px;
}
.roadmap-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.roadmap .nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 40px 0;
}
@media (max-width: 880px) {
  .roadmap .nodes { grid-template-columns: repeat(1, 1fr); gap: 24px; padding: 0; }
  .roadmap-svg { display: none; }
}

.roadmap-node {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 16px;
}
.roadmap-node .hex-num {
  position: relative;
  width: 84px; height: 96px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 30px;
  color: var(--forest-ink);
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'><polygon points='50,4 94,28 94,84 50,108 6,84 6,28' fill='%23FFF7E4' stroke='%2324B101' stroke-width='3'/></svg>");
}
.roadmap-node h4 {
  margin: 0;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.005em;
  line-height: 1.2;
  max-width: 18ch;
}
.roadmap-node p {
  margin: 0;
  font-size: 14px;
  color: var(--sage);
  max-width: 22ch;
  line-height: 1.45;
}

.solution-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vh, 80px);
}
@media (max-width: 720px) { .solution-stats { grid-template-columns: 1fr; } }
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat .lbl {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage);
}
.dark .stat .lbl { color: var(--chartreuse); }
.stat .num {
  font-weight: 900;
  font-size: clamp(48px, 5.8vw, 84px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--leaf-green);
  word-break: keep-all;
}
.dark .stat .num { color: var(--chartreuse); }
.stat .desc { font-weight: 600; font-size: 19px; max-width: 28ch; }
.stat .src {
  font-family: var(--font-meta);
  font-size: 12px; color: var(--sage); opacity: .8;
}

/* =============================================================
   S7  CASE STUDIES
   ============================================================= */
.case-list { display: flex; flex-direction: column; gap: 24px; margin-top: clamp(32px, 5vh, 48px); }
.case {
  position: relative;
  border: 1.5px solid var(--forest-ink);
  background: var(--cream);
  overflow: hidden;
}
.case::before {
  content: "";
  position: absolute;
  top: -20%; right: -15%; bottom: -20%; left: -15%;
  background: url("Images/Organic-Lattice1.svg") no-repeat right center / cover;
  opacity: .05;
  pointer-events: none;
  transition: opacity 250ms var(--ease-organic);
}
.case:hover::before { opacity: .08; }

.case > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  cursor: pointer;
  list-style: none;
  position: relative;
  z-index: 1;
}
.case > summary::-webkit-details-marker { display: none; }
.case > summary .tag {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--leaf-green);
}
/* Mobile: number and label inline with a bullet separator */
.case > summary .tag-n::after {
  content: " · ";
}
/* Desktop: stack number on top, label underneath */
@media (min-width: 721px) {
  /* Fixed-width label column so every case title shares the same left edge */
  .case > summary .tag {
    width: clamp(150px, 15vw, 190px);
  }
  .case > summary .tag-n,
  .case > summary .tag-lbl {
    display: block;
  }
  .case > summary .tag-n {
    margin-bottom: 4px;
    opacity: .7;
  }
  .case > summary .tag-n::after { content: ""; }
}
.case > summary h3 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.case > summary .chev {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--forest-ink);
  transition: transform 250ms var(--ease-organic), background 250ms var(--ease-organic);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}
.case[open] > summary .chev {
  background: var(--leaf-green);
  color: var(--cream);
  border-color: var(--leaf-green);
  transform: rotate(45deg);
}
.case .case-body {
  padding: 8px 32px 36px;
  position: relative;
  z-index: 1;
  max-width: 72ch;
}
.case .case-body p { margin: 0 0 1em; font-size: 17px; line-height: 1.6; }

/* =============================================================
   S8  JOIN  (dark)
   ============================================================= */
.join-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(32px, 5vh, 48px);
}
@media (max-width: 880px) { .join-columns { grid-template-columns: 1fr; } }
.join-col {
  padding: 32px;
  background: rgba(255,247,228,.025);
  border: 1px solid var(--hairline-ink);
  display: flex; flex-direction: column; gap: 16px;
}
.join-col .hex-mark {
  width: 48px; height: 48px;
  margin-bottom: 8px;
}
.join-col .hex-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.join-col h3 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 26px);
  color: var(--cream);
  letter-spacing: -.005em;
}
.join-col .who {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--chartreuse);
}
.join-col p {
  margin: 0;
  font-size: 16px;
  color: rgba(255,247,228,.78);
  line-height: 1.55;
}
.join-col .btn { margin-top: 8px; align-self: flex-start; }

.join-form {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.join-form .field { display: flex; flex-direction: column; gap: 6px; }
.join-form label {
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,247,228,.6);
}
.join-form input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 8px 0;
  outline: none;
  transition: border-color 150ms var(--ease-organic);
}
.join-form input::placeholder { color: rgba(255,247,228,.35); }
.join-form input:focus { border-color: var(--chartreuse); }
.join-form .hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}
.join-consent {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,247,228,.55);
  margin: 4px 0 0;
}
.join-submit { margin-top: 10px; align-self: flex-start; }
.join-submit[disabled] { opacity: .5; cursor: not-allowed; }
.join-thanks {
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px solid var(--hairline-ink);
  background: rgba(255,247,228,.04);
}
.join-thanks h4 {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--chartreuse);
  margin: 0 0 6px;
}
.join-thanks p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,247,228,.8);
  margin: 0;
}

/* =============================================================
   S9  FOOTER
   ============================================================= */
.site-footer {
  background: var(--forest-ink);
  color: var(--cream);
  padding: 0 var(--gutter) 40px;
}
.site-footer .wrap { max-width: var(--max); margin: 0 auto; }
.site-footer .foot-lockup {
  margin-bottom: clamp(48px, 6vh, 72px);
}
.site-footer .sub-strap {
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  max-width: 36ch;
  color: var(--cream);
  margin: 0 0 16px;
  letter-spacing: -.005em;
}
.site-footer .secretariat-note {
  font-size: 13px;
  line-height: 1.55;
  max-width: 60ch;
  color: rgba(255,247,228,.55);
  margin: 0 0 clamp(48px, 6vh, 72px);
  text-wrap: pretty; /* avoid a single-word widow on the last line */
}
.site-footer .secretariat-note a {
  color: rgba(255,247,228,.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer .secretariat-note a:hover { color: var(--chartreuse); }
.coalition-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  padding: 28px 0;
  border-top: 1px solid var(--hairline-ink);
  border-bottom: 1px solid var(--hairline-ink);
  margin-bottom: 40px;
}
@media (max-width: 720px) { .coalition-strip { grid-template-columns: repeat(3, 1fr); row-gap: 32px; } }
.coalition-strip .logo-slot {
  min-height: 110px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-narrow);
  font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,247,228,.4);
  border: 1px dashed rgba(255,247,228,.2);
  filter: grayscale(100%);
  transition: filter 200ms var(--ease-organic),
              color 200ms var(--ease-organic),
              opacity 200ms var(--ease-organic);
}
.coalition-strip .logo-slot:hover { filter: grayscale(0); color: var(--cream); }

/* Real-logo variant: cream backplate so brand colours survive on dark footer */
.coalition-strip .logo-slot.has-logo {
  border: 0;
  background: var(--cream);
  padding: 10px 14px;
  filter: none;
  opacity: .92;
}
.coalition-strip .logo-slot.has-logo:hover { opacity: 1; filter: none; }
.coalition-strip .logo-slot.has-logo img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin: auto 0;
}

.foot-meta {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
}
.foot-meta .links { display: flex; flex-wrap: wrap; gap: 24px; }
.foot-meta .links a {
  color: var(--sage);
  text-decoration: none;
  font-size: 14px;
  transition: color 150ms var(--ease-organic);
}
.foot-meta .links a:hover { color: var(--chartreuse); }
.foot-meta .social { display: flex; gap: 14px; }
.foot-meta .social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  border: 1px solid var(--hairline-ink);
  transition: background-color 150ms var(--ease-organic), border-color 150ms var(--ease-organic);
}
.foot-meta .social a:hover { background: var(--cream); color: var(--forest-ink); border-color: var(--cream); }
.foot-meta .social svg { width: 16px; height: 16px; }

.foot-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-ink);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-family: var(--font-meta);
  font-size: 12px;
  color: rgba(255,247,228,.5);
}

/* =============================================================
   Carbon-compare diagram (Two ways we use carbon)
   ============================================================= */
.carbon-compare {
  margin: clamp(48px, 6vh, 80px) 0 0;
  padding: 0;
}
.carbon-compare-title {
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin-bottom: clamp(24px, 3vh, 32px);
  color: var(--forest-ink);
}
.carbon-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 880px) {
  .carbon-compare-grid { grid-template-columns: 1fr; }
}
.carbon-side {
  border: 1px solid var(--hairline);
  background: var(--cream);
  display: flex;
  flex-direction: column;
}
.carbon-side-head {
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--hairline);
}
.carbon-side-tag {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 4px;
}
.carbon-side.bio .carbon-side-tag { color: var(--leaf-green); }
.carbon-side-sub {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.005em;
  margin-bottom: 10px;
  color: var(--forest-ink);
}
.carbon-side-cap {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sage);
  margin: 0;
  max-width: 48ch;
}
.carbon-side-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================
   BioSolutions explainer section (S4.5)
   ============================================================= */
.biosol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 720px) {
  .biosol-grid { grid-template-columns: 1fr; }
}
/* Elevated feature stat — sits between the BioSolutions intro and the four cards */
.biosol-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(28px, 4vh, 44px) clamp(28px, 4vw, 48px);
  margin: clamp(32px, 4vh, 48px) 0 0;
  background: var(--forest-ink);
  color: var(--cream);
  border-left: 4px solid var(--chartreuse);
  overflow: hidden;
}
.biosol-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--mycelium-ink);
  background-size: cover;
  background-position: right center;
  opacity: .12;
  pointer-events: none;
}
.biosol-feature-num {
  position: relative;
  font-weight: 900;
  font-size: clamp(56px, 7vw, 88px);
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--chartreuse);
  flex-shrink: 0;
}
.biosol-feature-desc {
  position: relative;
  font-weight: 500;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.45;
  max-width: 50ch;
  color: rgba(255, 247, 228, .92);
}
@media (max-width: 600px) {
  .biosol-feature { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Four-card explainer grid */
.biosol-block {
  position: relative;
  padding: 36px 28px 28px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  transition: transform 220ms var(--ease-organic),
              box-shadow 220ms var(--ease-organic),
              border-color 220ms var(--ease-organic);
}
.biosol-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--leaf-green);
}
.biosol-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(17, 39, 23, .08);
  border-color: transparent;
}
.biosol-block h3 {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.005em;
  margin: 0 0 14px;
  color: var(--forest-ink);
}
.biosol-block p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
}
.biosol-block p:last-child { margin-bottom: 0; }
.biosol-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.biosol-list li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 15px;
  line-height: 1.5;
  border-top: 1px solid var(--hairline);
}
.biosol-list li:first-child { border-top: 0; padding-top: 2px; }
.biosol-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 8px; height: 8px;
  background: var(--leaf-green);
  transform: rotate(45deg);
}
.biosol-list li:first-child::before { top: 10px; }

/* Brand-colour accents per card */
.biosol-block.accent-leaf::before  { background: var(--leaf-green); }
.biosol-block.accent-amber::before { background: var(--amber); }
.biosol-block.accent-sage::before  { background: var(--sage); }
.biosol-block.accent-ink::before   { background: var(--chartreuse); }

.biosol-block.accent-amber .biosol-list li::before { background: var(--amber); }
.biosol-block.accent-sage  .biosol-list li::before { background: var(--sage); }

/* Card 4 ("Why they matter") flips dark — visual finale */
.biosol-block.accent-ink {
  background: var(--forest-ink);
  color: var(--cream);
  border-color: transparent;
}
.biosol-block.accent-ink h3 { color: var(--chartreuse); }
.biosol-block.accent-ink .biosol-list li {
  border-top-color: rgba(255, 247, 228, .12);
}
.biosol-block.accent-ink .biosol-list li::before { background: var(--chartreuse); }
.biosol-block.accent-ink:hover { box-shadow: 0 10px 32px rgba(0, 0, 0, .25); }

/* =============================================================
   Innovation Gap — GVA treatment
   ============================================================= */
.gap-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  justify-content: center;
}
.gap-stat-unit {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: .18em;
  color: var(--chartreuse);
  margin-left: 0.3em;
  text-transform: uppercase;
  align-self: baseline;
}
.gap-subline {
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--cream);
  opacity: .88;
  margin: 0 auto 40px;
  max-width: 36ch;
}

/* =============================================================
   Case study body — sub-heads + lists
   ============================================================= */
.case .case-body h4 {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--leaf-green);
  margin: 24px 0 10px;
}
.case .case-body h4:first-child { margin-top: 0; }
.case .case-body p {
  font-size: 16px;
  line-height: 1.6;
}
.case-dl { margin: 12px 0 0; }
.case-dl dt {
  font-weight: 800;
  font-size: 16px;
  color: var(--forest-ink);
  margin-top: 12px;
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
.case-dl dd {
  margin: 0 0 8px;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--forest-ink);
}
.case-bullets {
  margin: 8px 0 12px;
  padding-left: 18px;
}
.case-bullets li {
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.55;
}

/* =============================================================
   Dark-mode overrides for Status quo section (was light, now dark)
   ============================================================= */
section.bk.dark .pull-quote {
  color: var(--cream);
  border-left-color: var(--chartreuse);
}
section.bk.dark .carbon-compare-title { color: var(--cream); }

/* =============================================================
   Coalition role labels (Campaign Lead / Coalition member)
   Layout: label pinned to top of slot, logo/text centered below
   ============================================================= */
.coalition-strip .logo-slot {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  padding-top: 0;
}
.coalition-strip .logo-slot .role-label {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 247, 228, .55);
  line-height: 1;
  margin-bottom: 16px;
  flex: 0 0 auto;
}
.coalition-strip .logo-slot.lead .role-label { color: var(--chartreuse); }

/* Real-logo (cream backplate) variant — image area fills below the label */
.coalition-strip .logo-slot.has-logo {
  padding: 0;
}
.coalition-strip .logo-slot.has-logo .role-label {
  color: rgba(255, 247, 228, .55);
  margin: 0 0 16px;
}
.coalition-strip .logo-slot.has-logo.lead .role-label { color: var(--chartreuse); }
.coalition-strip .logo-slot.has-logo img {
  flex: 0 1 auto;
  background: var(--cream);
  padding: 8px 14px;
  margin: auto 0;
  width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  box-sizing: border-box;
}

/* White-on-transparent logo variant — sits directly on dark footer */
.coalition-strip .logo-slot.has-logo-white {
  border: 0;
  background: transparent;
  padding: 0;
  filter: none;
  opacity: .92;
  transition: opacity 200ms var(--ease-organic);
}
.coalition-strip .logo-slot.has-logo-white:hover {
  opacity: 1;
  background: transparent;
  filter: none;
}
.coalition-strip .logo-slot.has-logo-white img {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  max-height: 64px;
  height: auto;
  object-fit: contain;
  margin: auto 0;
}
.coalition-strip .logo-slot.has-logo-white.lead .role-label {
  color: var(--chartreuse);
  opacity: 1;
}

/* =============================================================
   Section-pad steps — fixed vertical padding per breakpoint
   ============================================================= */
@media (max-width: 880px) {
  :root { --section-pad: 88px; }
}
@media (max-width: 560px) {
  :root { --section-pad: 64px; }
}

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =============================================================
   S10  KLARO CONSENT MANAGER  - BioRevolution theme
   Klaro 0.7's stylesheet reads CSS custom properties (each with a
   hard-coded fallback), so most of the palette is themed simply by
   defining those variables on .klaro. A few hard-coded rules (the
   toggle slider, button text) are overridden explicitly.
   Surfaces = forest-ink, text = cream, accents = leaf-green.
   ============================================================= */
.klaro {
  --dark1:  #112717;   /* main surface: notice + modal background (forest-ink) */
  --dark2:  #cfc9b8;   /* NB Klaro uses --dark2/3 as TEXT on the dark surface */
  --dark3:  #b6b0a0;   /* so these must stay light/readable, not dark */
  --light1: #FFF7E4;   /* primary text (cream) */
  --light2: #ece5d2;
  --light3: #cfc9b8;
  --green1: #24B101;   /* primary accept button (leaf-green) */
  --green2: #24B101;   /* accept-all on the notice */
  --green3: #1c8a02;
  --blue1:  #24B101;   /* info / learn-more -> brand green, not blue */
}
.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal.cm-klaro { font-family: var(--font-meta); }

/* Force notice body text to cream (Klaro doesn't set it from --light1 here) */
.klaro .cookie-notice,
.klaro .cookie-notice p,
.klaro .cookie-notice .cn-body { color: var(--light1); }

/* Base button: un-themed buttons (e.g. the close X) get a quiet dark style,
   since --dark2 (their default bg) is now a light text colour. */
.klaro .cm-btn { background-color: rgba(255, 247, 228, .12); color: var(--light1); }

/* Accept buttons: leaf-green with forest-ink text, chartreuse on hover */
.klaro .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var { color: #112717; font-weight: 700; }
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-success-var:hover { background-color: var(--chartreuse); }

/* Decline + learn-more: quiet ghost buttons on the dark surface */
.klaro .cm-btn.cn-decline,
.klaro .cookie-notice .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-info {
  background-color: transparent;
  color: #FFF7E4;
  box-shadow: inset 0 0 0 1px rgba(255, 247, 228, .45);
}
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-info:hover { background-color: rgba(255, 247, 228, .12); }

/* Close (X) button in the modal header: transparent with cream icon.
   Extra .cm-modal in the selector outranks Klaro's runtime-injected rule. */
.klaro .cookie-modal .cm-modal .cm-btn.cm-btn-close {
  background-color: transparent;
  color: var(--light1);
  box-shadow: none;
}
.klaro .cookie-modal .cm-modal .cm-btn.cm-btn-close:hover { color: var(--chartreuse); }

/* Toggle slider when enabled (hard-coded #1a936f in the base stylesheet) */
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: var(--leaf-green); }

/* Links inside the notice/modal */
.klaro .cookie-notice a,
.klaro .cookie-modal a { color: var(--chartreuse); text-decoration: underline; }