/* =========================================================
   Bioinputs — Ambition Loop
   Palette: green, teal, cream, mustard (protagonist).
   Structure: 4 chapters, each split into "scenes" — one idea, one visual focus.
   NOTE: no plain vh units — the page lives in an auto-height iframe,
   where vh would grow with the iframe and loop forever.
   ========================================================= */

:root {
  --green: #4f6d41;
  --teal: #749695;
  --cream: #f1efe7;
  --accent: #d0ae43;            /* mustard — protagonist */

  /* derived shades (text needs a dark tone; it comes from the brand green) */
  --ink: #26351f;
  --green-deep: #3d5533;
  --green-light: #a9c08f;
  --teal-light: #a7c0bf;
  --cream-2: #e8e5d9;
  --paper: #f8f6f0;
  --accent-soft: rgba(208, 174, 67, .18);

  --ink-soft: rgba(38, 53, 31, .7);
  --line: rgba(38, 53, 31, .12);
  --light-soft: rgba(241, 239, 231, .82);

  --f-head: "Kumbh Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --radius: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* global scale: everything is in rem, so this one value sizes the whole page */
html { -webkit-text-size-adjust: 100%; font-size: 87.5%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--f-body); font-weight: 300; font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.narrow { max-width: 820px; }

.hl { color: var(--accent); }
.hl-under { box-shadow: inset 0 -.14em 0 var(--accent); }

.eyebrow {
  font-family: var(--f-head); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin-bottom: .9rem;
}
.eyebrow--light { color: var(--accent); }
.kicker { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.01em; line-height: 1.25; margin-bottom: 1rem; color: var(--ink); }
.kicker--light { color: var(--cream); }
.statement { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.statement--light { color: var(--cream); }
.lede { font-size: 1.1rem; color: var(--light-soft); max-width: 56ch; margin: 0; }
.lede--dark { color: var(--ink-soft); }
.body-soft { color: var(--ink-soft); max-width: 52ch; }
.note { font-size: .95rem; color: var(--light-soft); display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.hint { font-size: .85rem; color: var(--ink-soft); margin-top: 1.4rem; }

/* pending content marker */
.tag-pending {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--f-body); font-size: .66rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: #866b16; background: rgba(208, 174, 67, .16); border: 1px dashed var(--accent);
  padding: .12em .6em; border-radius: 99px; vertical-align: middle; white-space: nowrap;
}
.tag-pending::before { content: "●"; font-size: .6em; }
.hero .tag-pending, .scene--green .tag-pending, .scene--photo .tag-pending { color: var(--accent); background: rgba(208, 174, 67, .12); }

.btn {
  display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.5rem; border-radius: 99px;
  font-family: var(--f-head); font-weight: 600; text-decoration: none; font-size: .95rem; transition: background .3s, transform .3s var(--ease);
}
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--green); transform: translateY(-2px); }

/* reveal on scroll (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ========================================================= TOP NAV */
/* Standalone: fixed. Inside the iframe: absolute, moved by js (parent tells us its scroll). */
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--cream); transition: background .4s var(--ease), color .4s, box-shadow .4s; }
.in-iframe .topnav { position: absolute; will-change: transform; }
.topnav.is-solid {
  background: rgba(241, 239, 231, .92); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line);
}
.topnav-inner { display: flex; align-items: center; gap: 2rem; height: 62px; }
.topnav-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; font-family: var(--f-head); font-weight: 700; font-size: 1rem; }
.topnav-links { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: .2rem; }
.topnav-links a {
  position: relative; display: flex; align-items: baseline; gap: .4rem; padding: .45rem .75rem; border-radius: 99px;
  text-decoration: none; font-family: var(--f-head); font-weight: 600; font-size: .85rem; white-space: nowrap; opacity: .78; transition: opacity .3s, background .3s;
}
.topnav-links a:hover { opacity: 1; }
.tn-num { color: var(--accent); font-size: .72rem; }
.topnav-links a.is-current { opacity: 1; background: rgba(208, 174, 67, .18); }
.topnav.is-solid .topnav-links a.is-current { background: var(--accent); color: var(--ink); }
.topnav.is-solid .topnav-links a.is-current .tn-num { color: var(--ink); }
/* scene dots: only on the current chapter */
.tn-dots { display: none; gap: 4px; align-self: center; margin-left: .3rem; }
.is-current .tn-dots { display: inline-flex; }
.tn-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .3s; }
.tn-dots i.on { opacity: 1; }
.topnav-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ========================================================= HERO */
.hero {
  position: relative; overflow: hidden; color: var(--cream); background: var(--ink);
  /* fits one laptop screen; min() with svh is safe in the iframe because the clamp caps it */
  min-height: clamp(540px, 44vw, 720px); min-height: min(clamp(540px, 44vw, 720px), 100svh);
  display: flex; align-items: flex-end; padding-block: 96px clamp(40px, 5vw, 64px);
}
.hero-media { position: absolute; inset: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; max-width: none; }
.js .hero-img { animation: kenburns 22s ease-out both; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(38, 53, 31, .92) 0%, rgba(38, 53, 31, .6) 38%, rgba(38, 53, 31, 0) 70%),
    linear-gradient(0deg, rgba(38, 53, 31, .85) 0%, rgba(38, 53, 31, 0) 45%),
    linear-gradient(180deg, rgba(38, 53, 31, .55) 0%, rgba(38, 53, 31, 0) 22%);
}
.hero-spores { position: absolute; inset: 0; pointer-events: none; }
.spore { position: absolute; bottom: -10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 2px rgba(208, 174, 67, .55); opacity: 0; animation: rise linear infinite; }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .85; }
  85% { opacity: .5; }
  100% { transform: translate(var(--dx, 20px), -620px); opacity: 0; }
}
.hero-content { position: relative; }
.hero-eyebrow { margin-bottom: 1.1rem; }
.hero-title { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1.03; letter-spacing: -.035em; margin-bottom: clamp(24px, 3vw, 40px); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span { display: inline-block; }
.js .hero-title .line > span { animation: lineUp 1.1s var(--ease) both; animation-delay: calc(.25s + var(--i) * .14s); }
.hero-title em { font-style: normal; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.js .hero-bottom { animation: fadeUp 1s .9s var(--ease) both; }
.hero-sub { font-size: clamp(1rem, 1.25vw, 1.1rem); color: rgba(241, 239, 231, .86); margin: 0; max-width: 560px; }
.hero-box { border-left: 2px solid var(--accent); padding: .2rem 0 .2rem 1.1rem; font-size: .88rem; max-width: 300px; }
.hero-box p { margin: 0 0 .2rem; color: rgba(241, 239, 231, .86); }
.hero-box-label { font-size: .7rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) !important; }
.hero-box a { color: var(--accent); text-decoration: none; font-weight: 500; display: inline-block; margin-top: .4rem; }

/* ========================================================= SCENES */
.chapter { position: relative; }
.scene { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 128px); scroll-margin-top: 62px; background: var(--cream); }
.chapter { scroll-margin-top: 62px; }
.scene--tint { background: var(--cream-2); }
.scene--green { background: var(--green); color: var(--cream); }
.scene--green p { color: var(--light-soft); }
.scene--photo { background: var(--ink); color: var(--cream); }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.scene--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(38, 53, 31, .86) 0%, rgba(38, 53, 31, .66) 50%, rgba(38, 53, 31, .88) 100%);
}
.scene-inner { position: relative; z-index: 2; }
.scene--center { text-align: center; }
.scene--center .narrow { margin-inline: auto; }
.scene--center .note { justify-content: center; }
.scene-intro { margin-bottom: clamp(32px, 4vw, 52px); max-width: 720px; }

/* chapter opener */
.scene--opener { padding-block: clamp(80px, 10vw, 144px) clamp(40px, 5vw, 72px); }
.opener { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 44px); align-items: end; }
.opener-num {
  font-family: var(--f-head); font-weight: 700; font-size: clamp(4rem, 9vw, 8rem); line-height: .78; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
}
.opener .eyebrow { margin-bottom: .5rem; }
.opener h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); letter-spacing: -.03em; max-width: 20ch; }

/* two-column scene */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--photo-left { grid-template-columns: .8fr 1.2fr; }

/* --- 01.1 brand graphic */
.brand-graphic { position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; justify-self: center; }
.bg-circle { position: absolute; inset: 4% 10% 14% 4%; border-radius: 50%; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(38, 53, 31, .7); }
.bg-circle img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease-out; transform: scale(1.12); }
.brand-graphic.is-visible .bg-circle img { transform: scale(1); }
.bg-sun { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); right: 2%; top: 4%; animation: floaty 7s ease-in-out infinite alternate; }
.bg-dot { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--teal); right: 0; top: 30%; animation: floaty 5s -2s ease-in-out infinite alternate; }
.bg-platform { position: absolute; width: 34%; height: 7%; right: 4%; bottom: 6%; background: var(--accent); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.bg-person { position: absolute; width: 4.4%; right: 19%; bottom: 12.6%; fill: var(--ink); overflow: visible; }
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-14px); } }

.photo-circle { aspect-ratio: 1; border-radius: 50%; overflow: hidden; width: 100%; max-width: 360px; justify-self: center; box-shadow: 0 40px 80px -40px rgba(38, 53, 31, .6); }
.photo-circle img { width: 100%; height: 100%; object-fit: cover; }

/* --- 01.2 big quote */
.bigquote { margin: 0 auto; max-width: 860px; text-align: center; }
.bigquote::before { content: "“"; display: block; font-family: var(--f-head); font-weight: 700; font-size: 6rem; line-height: .6; color: var(--accent); margin-bottom: .6rem; }
.bigquote blockquote { margin: 0 0 1.2rem; font-family: var(--f-head); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.25; letter-spacing: -.02em; color: var(--green); }
.bigquote figcaption { font-size: .95rem; color: var(--ink-soft); display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; }

/* --- duo: two diagrams with a switch (01.3 and 02.3) */
.switch { display: inline-flex; padding: 4px; border-radius: 99px; background: rgba(38, 53, 31, .08); }
.switch button {
  border: 0; background: transparent; padding: .55rem 1.15rem; border-radius: 99px; font-family: var(--f-head); font-weight: 600;
  font-size: .9rem; color: var(--ink-soft); transition: background .35s var(--ease), color .35s;
}
.switch button[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.switch--light { background: rgba(241, 239, 231, .12); }
.switch--light button { color: rgba(241, 239, 231, .8); }

.duo { border-radius: 26px; padding: clamp(22px, 3.5vw, 44px); }
.duo .switch { margin-bottom: clamp(24px, 3vw, 40px); }
.glass { background: rgba(38, 53, 31, .5); border: 1px solid rgba(241, 239, 231, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.duo--light { background: var(--paper); border: 1px solid var(--line); }
.duo-stage { display: grid; align-items: center; }
.duo-panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1.15fr; grid-template-areas: "cap vis" "note vis";
  column-gap: clamp(24px, 5vw, 72px); align-items: center; align-content: center;
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.duo[data-mode="a"] [data-panel="b"], .duo[data-mode="b"] [data-panel="a"] { opacity: 0; transform: translateY(14px); visibility: hidden; }
.duo-caption { grid-area: cap; align-self: end; font-family: var(--f-head); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.22; letter-spacing: -.015em; margin: 0; }
.glass .duo-caption { color: var(--cream); }
.duo-panel > :not(.duo-caption):not(.duo-note) { grid-area: vis; }
.duo-panel:not(:has(.duo-note)) .duo-caption { grid-row: 1 / 3; align-self: center; }
.duo-note { grid-area: note; align-self: start; margin: 1.2rem 0 0; font-size: .92rem; color: rgba(241, 239, 231, .8); }
.duo-note span { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: .3rem; }

/* linear flow */
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(16px, 2.2vw, 26px); position: relative; }
.flow::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 1px; background: rgba(241, 239, 231, .45); }
.flow li { position: relative; display: flex; align-items: center; gap: 1.1rem; }
.flow-dot { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--cream); background: var(--green); position: relative; }
.flow li.is-end .flow-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 8px rgba(208, 174, 67, .2); }
.flow-label { font-family: var(--f-head); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.25; color: var(--cream); }
.flow li.is-end .flow-label { color: var(--accent); }
.flow-pulse {
  position: absolute; left: 5px; top: 10px; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px 3px rgba(208, 174, 67, .7); animation: travel 4.5s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes travel { 0% { top: 10px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }

/* circular cycle */
.cycle { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin-inline: auto; color: var(--cream); }
.cycle-ring { position: absolute; inset: 16%; border-radius: 50%; border: 1px solid rgba(241, 239, 231, .45); }
.orbit { position: absolute; inset: 16%; animation: spin 9s linear infinite; }
.orbit::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 3px rgba(208, 174, 67, .6); }
.cycle-center {
  position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; text-align: center; margin: 0;
  font-family: var(--f-head); font-weight: 700; font-size: clamp(.85rem, 1.6vw, 1.05rem); line-height: 1.3; color: var(--cream) !important;
  background: radial-gradient(circle, rgba(208, 174, 67, .22), transparent 70%);
}
.cycle-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; width: 30%; font-family: var(--f-head); font-weight: 600; font-size: .85rem; line-height: 1.2; transform: translate(-50%, -9px); }
.cycle-node i { width: 18px; height: 18px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 6px rgba(241, 239, 231, .15); flex: none; }
.c1 { left: 50%; top: 16%; } .c2 { left: 84%; top: 50%; } .c3 { left: 50%; top: 84%; } .c4 { left: 16%; top: 50%; }

/* complement: bars */
.mix { display: grid; gap: 1.1rem; }
.mix-row { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 1rem; }
.mix-name { font-family: var(--f-head); font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.mix-bar { display: flex; gap: 4px; height: 52px; }
.mix-bar i {
  display: flex; align-items: center; padding-inline: .9rem; border-radius: 10px; font-style: normal; font-size: .82rem; font-weight: 500;
  width: var(--w); white-space: nowrap; overflow: hidden; transform-origin: left; animation: grow 1.2s var(--ease) both;
}
.m-conv { background: var(--teal); color: var(--cream); }
.m-bio { background: var(--accent); color: var(--ink); animation-delay: .25s !important; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
.mix-note { font-size: .82rem; color: var(--ink-soft); margin: .2rem 0 0 7.5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* substitute: swap */
.swap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.swap-card { border-radius: 16px; padding: 1.4rem 1.2rem; font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; line-height: 1.25; text-align: center; }
.swap-card--old { background: rgba(38, 53, 31, .06); color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.swap-card--new { background: var(--accent); color: var(--ink); box-shadow: 0 16px 40px -20px rgba(208, 174, 67, .9); }
.swap-arrow { width: 56px; height: 2px; background: var(--ink); position: relative; }
.swap-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--ink); border-right: 0; }

/* --- 01.4 figures */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); }
.figure-item { padding: 0 clamp(16px, 3vw, 40px); border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.figure-item:first-child { border-left: 0; padding-left: 0; }
.big-num { font-family: var(--f-head); font-weight: 700; font-size: clamp(3.2rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.05em; margin: 0; color: var(--accent); }
.big-num small { font-size: .45em; letter-spacing: 0; }
.figure-label { font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; margin: .4rem 0 0; }

/* --- 01.5 opportunity */
.opp-lines { list-style: none; margin: 0; padding: 0; }
.opp-lines li { font-family: var(--f-head); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: rgba(38, 53, 31, .45); padding: .3em 0; }
.opp-lines strong { color: var(--ink); font-weight: 700; box-shadow: inset 0 -.18em 0 rgba(208, 174, 67, .7); }

/* --- 02.2 explorer */
.explorer { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.explorer-visual { border-radius: 26px; padding: clamp(10px, 2vw, 24px); background: radial-gradient(circle at 50% 28%, rgba(241, 239, 231, .14), rgba(38, 53, 31, .25) 70%); }
.soil-diagram { width: 100%; height: auto; }
.d-wasp { animation: buzz 3s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes buzz { from { transform: translate(-6px, 3px); } to { transform: translate(8px, -5px); } }
.d-microbes > * { transform-box: fill-box; transform-origin: center; animation: drift 5s ease-in-out infinite alternate; }
.d-microbes > *:nth-child(even) { animation-delay: -2.5s; }
.hotspot { cursor: pointer; outline: none; }
.hs-dot { fill: var(--cream); stroke: var(--accent); stroke-width: 3; transition: fill .3s; }
.hotspot text { font-family: var(--f-head); font-weight: 700; font-size: 15px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.hs-pulse { fill: var(--accent); opacity: .35; transform-box: fill-box; transform-origin: center; animation: ping 2.2s ease-out infinite; }
.hotspot.is-active .hs-dot, .hotspot:hover .hs-dot, .hotspot:focus-visible .hs-dot { fill: var(--accent); }
.hotspot:focus-visible .hs-dot { stroke: var(--cream); }
@keyframes ping { from { transform: scale(.7); opacity: .55; } to { transform: scale(1.8); opacity: 0; } }
.cat-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.8rem; }
.cat-tabs button { border: 1px solid rgba(241, 239, 231, .3); background: transparent; color: var(--light-soft); border-radius: 99px; padding: .4rem .95rem; font-size: .82rem; font-weight: 500; transition: all .3s; }
.cat-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.panel-num { font-family: var(--f-head); font-weight: 700; color: var(--accent) !important; font-size: 2.8rem; line-height: 1; margin: 0 0 .4rem; }
.panel-title { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.15; color: var(--cream); margin-bottom: 1rem; }
.panel-title--dark { color: var(--ink); }
.panel-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--accent) !important; margin: 1.3rem 0 .3rem; }
.examples { color: var(--cream) !important; font-family: var(--f-head); font-weight: 600; }
.panel-fade { animation: fadeUp .5s var(--ease); }

/* go deeper */
.deeper { margin-top: 1.6rem; }
.deeper summary { cursor: pointer; font-family: var(--f-head); font-weight: 600; list-style: none; display: flex; gap: .6rem; align-items: center; font-size: .95rem; }
.deeper summary::-webkit-details-marker { display: none; }
.deeper summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 700; line-height: 1; transition: transform .3s; }
.deeper[open] summary::before { transform: rotate(45deg); }
.deeper p { margin-top: .8rem; color: var(--ink-soft); }

/* --- 03.1 rings */
.rings { width: 100%; max-width: 400px; height: auto; margin-inline: auto; }
.ring { cursor: pointer; outline: none; }
.ring circle { fill: var(--cream-2); stroke: var(--cream); stroke-width: 4; transition: fill .4s var(--ease); }
.ring[data-ring="ecosystems"] circle { fill: #dcdccb; }
.ring[data-ring="farmers"] circle { fill: #cfd3bb; }
.ring text { font-family: var(--f-head); font-weight: 700; font-size: 16px; text-anchor: middle; fill: var(--ink); pointer-events: none; }
.ring:hover circle { fill: #eadca8; }
.ring.is-active circle { fill: var(--accent); }
.ring:focus-visible circle { stroke: var(--ink); }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding-left: 1.5rem; position: relative; margin-bottom: .5rem; color: var(--ink-soft); font-size: 1.05rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }

/* --- 03.2 economic case */
.eco { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 36px); }
.eco li { display: flex; flex-direction: column; gap: .4rem; }
.eco-icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--accent); font-weight: 700; font-size: 1.2rem; margin-bottom: .6rem; }
.eco strong { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; }
.eco span:not(.eco-icon) { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }

/* --- 03.3 market */
.market { display: flex; flex-direction: column; }
.bars { height: 260px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid rgba(241, 239, 231, .35); }
.bars span { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(var(--accent), rgba(208, 174, 67, .4)); transform-origin: bottom; transition: transform 1.2s var(--ease); }
.bars span:nth-child(2) { transition-delay: .08s; } .bars span:nth-child(3) { transition-delay: .16s; }
.bars span:nth-child(4) { transition-delay: .24s; } .bars span:nth-child(5) { transition-delay: .32s; }
.bars span:nth-child(6) { transition-delay: .4s; }  .bars span:nth-child(7) { transition-delay: .48s; }
.js .market:not(.is-visible) .bars span { transform: scaleY(0); }
.market-axis { display: flex; justify-content: space-between; font-size: .8rem; margin: .6rem 0 0; }
.market-note { font-size: .78rem; opacity: .7; margin: .2rem 0 0; }

/* --- 03.4 stories */
.stories-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.stories-head .kicker { margin: 0; }
.stories-nav { display: flex; align-items: center; gap: .7rem; }
.round-btn { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid rgba(38, 53, 31, .25); background: transparent; transition: all .3s; }
.round-btn:hover { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.stories-count { font-family: var(--f-head); font-weight: 600; min-width: 3rem; text-align: center; font-size: .95rem; }
.story { display: none; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 88px); align-items: center; }
.story.is-active { display: grid; animation: fadeUp .6s var(--ease); }
.story-country { font-family: var(--f-head); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.03em; margin-bottom: .5rem; }
.story-result { font-family: var(--f-head); font-weight: 600; font-size: 1.15rem; color: var(--green); display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* --- 04.1 network */
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; font-size: .85rem; }
.lg { display: inline-flex; align-items: center; gap: .5rem; color: var(--light-soft); }
.lg::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; }
.lg--cream::before { background: var(--cream); } .lg--accent::before { background: var(--accent); } .lg--teal::before { background: var(--teal-light); }
.network { position: relative; aspect-ratio: 16 / 8.5; min-height: 420px; }
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.net-lines line { stroke: rgba(241, 239, 231, .25); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; animation: flowLine 1.6s linear infinite; transition: stroke .3s; }
.net-lines line.is-hot { stroke: var(--accent); stroke-width: 2; }
@keyframes flowLine { to { stroke-dashoffset: -16; } }
.net-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8rem; height: 8rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center; background: var(--accent); color: var(--ink); font-family: var(--f-head);
  font-weight: 700; font-size: 1.05rem; line-height: 1.2; box-shadow: 0 0 0 12px var(--accent-soft), 0 0 0 26px rgba(208, 174, 67, .07);
}
.node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); max-width: 160px; width: max-content;
  padding: .5rem .95rem; border-radius: 99px; font-family: var(--f-head); font-weight: 600; font-size: .8rem; line-height: 1.2;
  background: var(--green-deep); color: var(--cream); border: 1.5px solid var(--c); transition: background .3s, color .3s, transform .3s var(--ease);
}
.node::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); margin-right: .45rem; vertical-align: .05em; }
.node:hover { transform: translate(-50%, -50%) scale(1.06); }
.node.is-active { background: var(--c); color: var(--ink); }
.node.is-active::before { background: var(--ink); }
.node--cream { --c: var(--cream); } .node--accent { --c: var(--accent); } .node--teal { --c: var(--teal-light); }
.node-detail { margin-top: 1.6rem; border-left: 2px solid var(--accent); padding: .3rem 0 .3rem 1.3rem; max-width: 640px; min-height: 7.5rem; }
.node-title { font-family: var(--f-head); font-weight: 700; font-size: 1.35rem; color: var(--cream) !important; margin-bottom: .3rem !important; }
.node-title--dark { color: var(--ink) !important; }

/* --- 04.2 policy */
.country { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 88px); align-items: center; animation: fadeUp .5s var(--ease); }
.country-law { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--green); line-height: 1.15; letter-spacing: -.02em; }
.dim-detail { margin-top: 1.4rem; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); min-height: 9rem; }
.dim-detail p:not(.node-title) { color: var(--ink-soft); }
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 380px); aspect-ratio: 1; margin-inline: auto; }
.q { border: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.15rem); color: var(--ink); transition: transform .35s var(--ease), filter .3s, box-shadow .3s; filter: saturate(.8); }
.q1 { background: var(--teal); border-radius: 100% 12px 12px 12px; color: var(--cream); }
.q2 { background: var(--green); border-radius: 12px 100% 12px 12px; color: var(--cream); }
.q3 { background: var(--accent); border-radius: 12px 12px 12px 100%; }
.q4 { background: var(--green-light); border-radius: 12px 12px 100% 12px; }
.q:hover, .q.is-active { filter: none; transform: scale(1.03); }
.q.is-active { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink); }
.measures { list-style: none; padding: 0; margin: 0; counter-reset: m; position: relative; }
.measures::before { content: ""; position: absolute; left: 1.15rem; top: 1rem; bottom: 1rem; width: 1px; background: var(--line); }
.measures li { counter-increment: m; }
.measures button { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .5rem 0; font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; color: var(--ink-soft); transition: color .3s; }
.measures button::before { content: counter(m); flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); color: var(--ink); font-size: .85rem; transition: all .3s; }
.measures button:hover, .measures button.is-active { color: var(--ink); }
.measures button.is-active::before { background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }

/* --- 04.3 closing statement */
.closing-statement { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.15; letter-spacing: -.025em; color: var(--cream); margin: 0; }

/* --- about */
.closing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.closing h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 1.1rem; }
.closing .kicker { margin-top: 2rem; }
.closing .reveal > .kicker:first-child { margin-top: 0; }
.link-arrow { font-family: var(--f-head); font-weight: 600; color: var(--green); text-decoration: none; box-shadow: inset 0 -2px 0 var(--accent); }
.list-lines { list-style: none; padding: 0; margin: 0; }
.list-lines li { padding: .75rem 0; font-family: var(--f-head); font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.list-lines li.is-pending { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.stay { margin-top: 2.2rem; padding: 1.5rem; background: var(--accent); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.stay p { margin: 0; }

.footer { background: var(--ink); color: var(--light-soft); font-size: .88rem; padding-block: 1.4rem; }
.footer-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer a { color: var(--accent); text-decoration: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(6px, -9px) rotate(25deg); } }

/* ========================================================= COMPACT LAYOUT (v3)
   Fewer, denser scenes; chapter title sits on top of its first scene. */
.scene { padding-block: clamp(48px, 6vw, 88px); }
.chapter-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.chapter-head .opener-num { font-size: clamp(3rem, 6vw, 5.2rem); }
.chapter-head .eyebrow { margin-bottom: .4rem; }
.chapter-head h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.03em; max-width: 24ch; }
.chapter-head--light h2 { color: var(--cream); }
.scene-intro { margin-bottom: clamp(24px, 3vw, 36px); }
.split { gap: clamp(28px, 5vw, 72px); }
.split--even { grid-template-columns: 1fr 1fr; align-items: stretch; }

.pullquote { margin: 1.6rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--accent); }
.pullquote blockquote { margin: 0 0 .4rem; font-family: var(--f-head); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.35; color: var(--green); }
.pullquote figcaption { font-size: .85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.brand-graphic { max-width: 380px; }

.big-num { font-size: clamp(2.8rem, 5vw, 4.4rem); }
.opp { margin-top: clamp(36px, 4.5vw, 56px); }
.opp-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); }
.opp-row li { font-size: 1rem; color: var(--ink-soft); line-height: 1.4; }
.opp-row strong { display: block; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--ink); letter-spacing: -.02em; margin-bottom: .2rem; box-shadow: none; }
.opp-row strong::after { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-top: .4rem; }

.explorer { grid-template-columns: .9fr 1.1fr; align-items: start; }
.definition { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.4; color: var(--cream) !important; margin-bottom: .5rem; }
.explorer-panel { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(241, 239, 231, .2); }
.cat-tabs { margin-bottom: 1.2rem; }
.panel-title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: .6rem; }
.examples .panel-label { display: inline; margin: 0 .5rem 0 0; }

.duo-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.duo-top .kicker { margin: 0; }
.duo-top .switch { margin: 0; }

.eco { grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.eco li { flex-direction: row; gap: .9rem; align-items: flex-start; }
.eco li div { display: flex; flex-direction: column; }
.eco-icon { flex: none; width: 2.4rem; height: 2.4rem; font-size: 1rem; margin: 0; }
.market { background: var(--green); color: var(--cream); border-radius: 22px; padding: clamp(20px, 3vw, 32px); }
.market .bars { height: 200px; }
.market .market-note { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; opacity: 1; color: var(--light-soft); }

.row-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.row-head .kicker { margin: 0; }
.photo-circle { max-width: 300px; }

.legend { margin: 0 0 1rem; }
.network { aspect-ratio: 16 / 7.4; min-height: 380px; }
.node-detail { margin-top: 1rem; min-height: 6.5rem; }

.scene--band { padding-block: clamp(44px, 5vw, 68px); text-align: center; }
.closing-statement { font-size: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 30ch; margin-inline: auto; }
.closing h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.list-lines li { padding: .6rem 0; }
.stay { margin-top: 1.6rem; padding: 1.2rem 1.3rem; }

.market .tag-pending { color: var(--accent); background: rgba(208, 174, 67, .12); }
.cycle { width: min(100%, 340px); }

/* duo v4: only the active diagram takes space, so the card is as tall as what you see */
.duo { padding: clamp(20px, 2.6vw, 34px); }
.duo-panel { transition: none; }
.duo[data-mode="a"] [data-panel="b"], .duo[data-mode="b"] [data-panel="a"] { display: none; }
.duo-panel { animation: fadeUp .5s var(--ease); }
.duo-top { align-items: flex-start; margin-bottom: clamp(18px, 2.4vw, 28px); }
.duo-top .kicker { margin-bottom: .3rem; }
.duo-top .lede { font-size: .95rem; }
.duo-caption { font-size: clamp(1.1rem, 1.7vw, 1.45rem); }
.flow { gap: clamp(10px, 1.4vw, 16px); }
.flow-label { font-size: clamp(.95rem, 1.25vw, 1.05rem); }
.flow-dot { width: 17px; height: 17px; }
.flow::before { left: 8px; }
.flow-pulse { left: 4px; }
.cycle { width: min(100%, 290px); }
.cycle-node { font-size: .78rem; }
.mix-bar { height: 44px; }

/* fit each scene in one laptop screen (~1000×570 window) */
.chapter-head { margin-bottom: clamp(24px, 3vw, 40px); }
.brand-graphic { max-width: 300px; }
.explorer-visual { max-width: 360px; justify-self: center; width: 100%; }
.rings { max-width: 300px; }
.quad { width: min(100%, 290px); }
.photo-circle { max-width: 260px; }
.net-wrap { display: grid; grid-template-columns: 1fr 240px; gap: clamp(20px, 3vw, 40px); align-items: center; }
.network { aspect-ratio: 16 / 8; min-height: 300px; }
.node { font-size: .74rem; max-width: 130px; padding: .42rem .8rem; }
.net-center { width: 6.6rem; height: 6.6rem; font-size: .95rem; }
.node-detail { margin: 0; min-height: 0; }
.legend { margin-bottom: .4rem; }

.scene { padding-block: clamp(40px, 5vw, 72px); }
.chapter-head .opener-num { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.chapter-head h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); max-width: none; }
.explorer-visual { max-width: 320px; }
.explorer { align-items: center; }
.definition { font-size: clamp(1rem, 1.4vw, 1.15rem); }
.explorer-panel { margin-top: 1rem; padding-top: 1rem; }
.rings { max-width: 280px; }

/* nav: bigger, easier to read */
.topnav-inner { height: 68px; gap: 1.5rem; }
.topnav-brand { font-size: 1.1rem; }
.topnav-links { gap: .1rem; }
.topnav-links a { font-size: .98rem; padding: .5rem .65rem; gap: .35rem; }
.tn-num { font-size: .8rem; }
.scene, .chapter { scroll-margin-top: 68px; }

/* nav v2: inside the hero it scrolls away with the photo; once past the hero it docks
   at the top with a solid background (slides in). */
.topnav { position: absolute; }
.topnav.is-solid { position: fixed; animation: navIn .35s var(--ease); }
.in-iframe .topnav, .in-iframe .topnav.is-solid { position: absolute; }
@keyframes navIn { from { transform: translateY(-100%); } to { transform: none; } }
.in-iframe .topnav.is-solid { animation: none; }

/* hero copy v2: tagline + two short paragraphs */
.hero-title { font-size: clamp(2rem, 3.3vw, 3.3rem); margin-bottom: clamp(16px, 2vw, 24px); }
.hero-lead { max-width: 540px; }
.hero-tagline { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--accent); letter-spacing: -.01em; margin-bottom: .8rem; }
.hero .hero-sub { font-size: clamp(.92rem, 1.1vw, 1rem); line-height: 1.6; margin: 0 0 .6rem; }
.hero .hero-sub:last-child { margin-bottom: 0; }
/* words still to be confirmed by the team */
.tbc { border-bottom: 1px dashed var(--accent); }
.hero { padding-top: 88px; }

/* v4 structure: 4 key figures with a short explanation */
.figures--4 { grid-template-columns: repeat(4, 1fr); }
.figure-desc { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.figures--4 .big-num { font-size: clamp(2.6rem, 4.4vw, 3.8rem); }
.market-text .statement { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

#why .brand-graphic { max-width: 250px; }
#why .opp { margin-top: clamp(28px, 3.4vw, 40px); }

/* hero fills exactly the first screen.
   Standalone: 100svh. Inside the iframe, vh would grow with the iframe, so the parent
   page tells us the real screen height and js stores it in --screen (fallback 640px). */
.hero { min-height: 100vh; min-height: 100svh; }
.in-iframe .hero { min-height: var(--screen, 640px); }
.hero { align-items: center; padding-block: 88px 48px; }

.def-lead { font-family: var(--f-head); font-weight: 600; font-size: .95rem; color: var(--light-soft); margin-bottom: .5rem; }

/* ---- living-soil diagram v2 ---- */
.explorer-visual { max-width: 380px; padding: 0; background: none; }
.soil-diagram { border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(20, 28, 14, .7); }
.soil-diagram .zone { transition: opacity .6s var(--ease), filter .6s var(--ease); }
.soil-diagram[data-active="growth"] .z-pest, .soil-diagram[data-active="growth"] .z-soil,
.soil-diagram[data-active="pest"] .z-growth, .soil-diagram[data-active="pest"] .z-soil,
.soil-diagram[data-active="soil"] .z-growth, .soil-diagram[data-active="soil"] .z-pest { opacity: .28; }
.soil-diagram .roots { transition: opacity .6s var(--ease); }
.soil-diagram[data-active="pest"] .roots { opacity: .55; }
.soil-diagram[data-active="growth"] .rhizo-glow { animation: breathe 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.js .explorer.is-visible .root-main { stroke-dasharray: 1; animation: draw 2.4s var(--ease) both; }
.js .explorer:not(.is-visible) .root-main { stroke-dasharray: 1; stroke-dashoffset: 1; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.js .explorer #fineRoots { opacity: 0; transition: opacity 1.6s 1s ease; }
.js .explorer.is-visible #fineRoots { opacity: 1; }
.sd-microbe { transform-box: fill-box; transform-origin: center; animation: drift 6s ease-in-out infinite alternate; }
.sd-twinkle { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.pheromone { animation: dashflow 2.5s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset: -14; } }
.wasp { animation: hover 3.4s ease-in-out infinite alternate; }
@keyframes hover { from { transform: translate(84px, 60px) rotate(-18deg) scale(1.9); } to { transform: translate(98px, 50px) rotate(-10deg) scale(1.9); } }
.wing { transform-box: fill-box; transform-origin: bottom center; animation: flap .12s linear infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.soil-diagram .hs-num { font-family: var(--f-head); font-weight: 700; font-size: 16px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.hs-label rect { fill: rgba(31, 22, 12, .72); stroke: rgba(241, 239, 231, .35); stroke-width: 1; transition: fill .3s, stroke .3s; }
.hs-label text { font-family: var(--f-head); font-weight: 600; font-size: 14px; fill: var(--cream); text-anchor: middle; pointer-events: none; }
.hotspot.is-active .hs-label rect { fill: var(--accent); stroke: var(--accent); }
.hotspot.is-active .hs-label text { fill: var(--ink); }

/* ---- living-soil diagram: "in action" effects ---- */
.plant { transform-box: view-box; transform-origin: 250px 210px; animation: sway 6s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
/* growth: nutrients flowing up the roots */
#flow { transition: opacity .6s; }
.soil-diagram:not([data-active="growth"]) #flow { opacity: 0; }
/* pest: the wasp hunts the aphids */
.soil-diagram[data-active="pest"] .wasp { animation: hunt 5s ease-in-out infinite; }
@keyframes hunt {
  0%   { transform: translate(84px, 60px) rotate(-18deg) scale(1.9); }
  40%  { transform: translate(150px, 132px) rotate(24deg) scale(1.9); }
  55%  { transform: translate(152px, 130px) rotate(18deg) scale(1.9); }
  100% { transform: translate(84px, 60px) rotate(-18deg) scale(1.9); }
}
@keyframes vanish { 0%, 42% { opacity: 1; } 52%, 88% { opacity: 0; } 100% { opacity: 1; } }
/* soil: a wave of light travels through the fungal network */
.soil-diagram[data-active="soil"] #hyphae path { animation: wave 3s ease-in-out infinite; }
@keyframes wave {
  0%, 100% { stroke: #c9dcdb; stroke-opacity: .45; stroke-width: .7; }
  15% { stroke: #f3dc8a; stroke-opacity: 1; stroke-width: 1.7; }
  35% { stroke: #c9dcdb; stroke-opacity: .45; stroke-width: .7; }
}


/* 01.1 on cream: the green/brown drawing pops */
.scene--explorer .def-lead { color: var(--ink-soft); }
.scene--explorer .definition { color: var(--ink) !important; }
.scene--explorer .explorer-panel { border-top-color: var(--line); }
.scene--explorer .cat-tabs button { border-color: rgba(38, 53, 31, .25); color: var(--ink-soft); }
.scene--explorer .cat-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.scene--explorer .panel-title { color: var(--ink); }
.scene--explorer .panel-body p { color: var(--ink-soft); }
.scene--explorer .examples { color: var(--ink) !important; }
.scene--explorer .panel-label { color: #9a7d1f !important; }
.scene--explorer .hl { color: #b8952c; }
.scene--explorer .soil-diagram { box-shadow: 0 40px 70px -34px rgba(38, 53, 31, .55); }

/* ================= category animations v2 ("super cool") =================
   .play-<key> is re-added on every click → one-shot intro plays again.
   [data-active] drives the loops. */

/* --- 1 · PLANT GROWTH --- */
.js .explorer .soil-diagram.play-growth .root-main { stroke-dasharray: 1; animation: draw 1.6s var(--ease) both; }
.js .explorer .soil-diagram.play-growth #fineRoots { animation: fadeIn 1.4s .8s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.soil-diagram[data-active="growth"] .roots { filter: brightness(1.25) drop-shadow(0 0 4px rgba(243, 215, 122, .55)); }
.soil-diagram[data-active="growth"] .sd-microbe { animation: swarm 2.6s ease-in-out infinite alternate; }
@keyframes swarm { from { transform: translate(0, 0); } to { transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(1.3); } }
.base-flash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.soil-diagram[data-active="growth"] .base-flash { animation: flash 1.4s ease-out infinite; }
@keyframes flash { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.4); } }
.soil-diagram[data-active="growth"] .plant { animation: sway 6s ease-in-out infinite alternate, thrive 2.8s ease-in-out infinite; }
@keyframes thrive { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) saturate(1.2); } }

/* --- 2 · PEST CONTROL --- */
.aphid { fill: #6b7f3a; }
.ripples circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.soil-diagram[data-active="pest"] .ripples circle { animation: ripple 2.4s ease-out infinite; }
.soil-diagram[data-active="pest"] .ripples circle:nth-child(2) { animation-delay: .8s; }
.soil-diagram[data-active="pest"] .ripples circle:nth-child(3) { animation-delay: 1.6s; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(4.5); } }
.soil-diagram[data-active="pest"] .wasp { animation: patrol 7s ease-in-out infinite; }
@keyframes patrol {
  0%   { transform: translate(84px, 60px) rotate(-10deg) scale(1.9); }
  15%  { transform: translate(126px, 118px) rotate(20deg) scale(1.9); }
  30%  { transform: translate(150px, 126px) rotate(8deg) scale(1.9); }
  45%  { transform: translate(176px, 134px) rotate(14deg) scale(1.9); }
  60%  { transform: translate(204px, 146px) rotate(10deg) scale(1.9); }
  80%  { transform: translate(150px, 80px) rotate(-20deg) scale(1.9); }
  100% { transform: translate(84px, 60px) rotate(-10deg) scale(1.9); }
}
.soil-diagram[data-active="pest"] .aphid { animation: parasitize 7s ease-in-out infinite; }
.soil-diagram[data-active="pest"] .aphid:nth-child(2) { animation-delay: .5s; }
.soil-diagram[data-active="pest"] .aphid:nth-child(3) { animation-delay: 1s; }
.soil-diagram[data-active="pest"] .aphid:nth-child(4) { animation-delay: 1.6s; }
.soil-diagram[data-active="pest"] .aphid:nth-child(5) { animation-delay: 2.2s; }
.soil-diagram[data-active="pest"] .aphid:nth-child(6) { animation-delay: 2.8s; }
.soil-diagram[data-active="pest"] .aphid:nth-child(7) { animation-delay: 3.3s; }
@keyframes parasitize {
  0%, 18% { fill: #6b7f3a; filter: none; }
  26%, 82% { fill: #e8c55a; filter: drop-shadow(0 0 3px #f3d77a); }
  100% { fill: #6b7f3a; filter: none; }
}

/* --- 3 · SOIL RESTORATION --- */
.js .explorer .soil-diagram.play-soil #hyphae path { stroke-dasharray: 1; animation: draw 2.2s var(--ease) both; }
.degraded { opacity: 0; filter: blur(3px); }
.soil-diagram[data-active="soil"] .degraded { animation: heal 6s ease-in-out infinite; }
@keyframes heal { 0% { opacity: .75; } 45% { opacity: .75; } 75%, 92% { opacity: 0; } 100% { opacity: .75; } }
@keyframes dissolve { 0%, 40% { opacity: .9; transform: scale(1) rotate(0deg); } 70% { opacity: 0; transform: scale(.2) rotate(90deg); } 100% { opacity: 0; } }

.definition-more { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; margin: .2rem 0 0; }

/* third diagram option (improve efficiency) */
.duo[data-mode="c"] [data-panel="a"], .duo[data-mode="c"] [data-panel="b"],
.duo[data-mode="a"] [data-panel="c"], .duo[data-mode="b"] [data-panel="c"] { display: none; }
.uptake { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; justify-items: center; }
.uptake .mix-note { grid-column: 1 / -1; margin: 0; justify-self: center; }
.ring-stat { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ring-stat figcaption { font-family: var(--f-head); font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.ring-stat .ring { --c: var(--teal); position: relative; width: 124px; aspect-ratio: 1; display: grid; place-items: center; }
.ring-stat .ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(38, 53, 31, .1) 0);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%);
  animation: ringIn 1.2s var(--ease) both;
}
.ring-stat--bio .ring { --c: var(--accent); }
.ring-num { position: relative; font-family: var(--f-head); font-weight: 700; font-size: 1.6rem; color: var(--ink); }
@keyframes ringIn { from { transform: rotate(-90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

.scene--explorer .explorer-panel { border-top: 0; padding-top: 0; margin-top: 1.6rem; }
.explore-prompt { font-family: var(--f-head); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #9a7d1f; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.explore-prompt::after { content: "↓"; font-size: .9rem; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ================= RULE: switching content never changes the size of a section =================
   All options are stacked in the same grid cell; the box takes the size of the largest one
   and only the visible one fades in. */
.duo .duo-panel { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; animation: none; }
.duo[data-mode="a"] [data-panel="a"], .duo[data-mode="b"] [data-panel="b"], .duo[data-mode="c"] [data-panel="c"] {
  visibility: visible; opacity: 1; pointer-events: auto; animation: fadeUp .5s var(--ease);
}
.country-stage { display: grid; }
.country-stage > .country { grid-area: 1 / 1; animation: none; }
.country-stage > .country.is-off { visibility: hidden; opacity: 0; pointer-events: none; }
.country-stage > .country:not(.is-off) { animation: fadeUp .5s var(--ease); }
.stories { display: grid; }
.stories .story { grid-area: 1 / 1; display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; animation: none; }
.stories .story.is-active { visibility: visible; opacity: 1; pointer-events: auto; animation: fadeUp .6s var(--ease); }

/* keep 02.1 within one screen now that its box takes the size of the circle */
#why .cycle { width: min(100%, 220px); margin-top: 26px; }
#why .cycle .c1 { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 9px)); }
#why .cycle-center { font-size: .8rem; }
#why .duo-top { align-items: center; }
#why .cycle-node { font-size: .72rem; width: 34%; }
#why .flow { gap: 9px; }

/* --- 3 · SOIL RESTORATION, brighter (v3) --- */
.soil-diagram[data-active="soil"] #hyphae { opacity: 1; filter: url(#sdGlow); }
.soil-diagram[data-active="soil"] #hyphae path { stroke: #e3f0ef; stroke-width: 1.1; animation: wave2 3s ease-in-out infinite; }
@keyframes wave2 {
  0%, 100% { stroke: #e3f0ef; stroke-opacity: .7; stroke-width: 1.1; }
  14% { stroke: #ffe08a; stroke-opacity: 1; stroke-width: 2.8; }
  32% { stroke: #e3f0ef; stroke-opacity: .7; stroke-width: 1.1; }
}
.deep-glow { transform-box: fill-box; transform-origin: center; }
.soil-diagram[data-active="soil"] .deep-glow { animation: breathe 3s ease-in-out infinite; opacity: 1; }

/* ================= How do they work: photo diagrams (brand-graphic style) ================= */
.pic { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; position: relative; }
.pic img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 40px -22px rgba(38, 53, 31, .65); }
.pic figcaption { font-family: var(--f-head); font-weight: 600; font-size: .92rem; line-height: 1.25; text-align: center; color: var(--ink); }
.pic figcaption small { font-family: var(--f-body); font-weight: 400; font-size: .78rem; color: var(--ink-soft); }

/* replace */
.swap2 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; }
.pic--old img { filter: grayscale(1) contrast(.9) brightness(1.05); opacity: .75; }
.pic--old::after { content: ""; position: absolute; left: 50%; top: 75px; width: 168px; height: 3px; margin-left: -84px; background: var(--teal); border-radius: 3px; transform: rotate(-40deg); }
.pic--old figcaption { color: var(--ink-soft); }
.pic--new img { width: 176px; height: 176px; box-shadow: 0 0 0 5px var(--accent), 0 24px 50px -20px rgba(208, 174, 67, .9); }
.swap2-arrow { height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px); background-size: 22px 2px; position: relative; animation: flowX 1s linear infinite; margin-bottom: 2.2rem; }
.swap2-arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 10px solid var(--ink); border-right: 0; }
@keyframes flowX { to { background-position: 22px 0; } }

/* complement */
.pic-duo { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "a plus b" "res res res"; justify-content: center; align-items: center; column-gap: .4rem; row-gap: 1.1rem; }
.pic--a { grid-area: a; } .pic--b { grid-area: b; } .pic-result { grid-area: res; }
.pic--a img { box-shadow: 0 0 0 4px var(--teal), 0 20px 40px -22px rgba(38, 53, 31, .65); }
.pic--b img { box-shadow: 0 0 0 4px var(--accent), 0 20px 40px -22px rgba(38, 53, 31, .65); }
.pic-plus { grid-area: plus; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-family: var(--f-head); font-weight: 700; font-size: 1.4rem; margin-bottom: 2.2rem; }
.pic-result { text-align: center; }
.pic-result-label { font-family: var(--f-head); font-weight: 600; font-size: .9rem; margin: 0 0 .4rem; }
.mini-bar { display: flex; gap: 3px; height: 14px; width: min(100%, 320px); margin: 0 auto; border-radius: 99px; overflow: hidden; background: rgba(38, 53, 31, .08); }
.mini-bar i { width: var(--w); transform-origin: left; animation: grow 1.2s var(--ease) both; }
.pic-result .mix-note { margin: .45rem 0 0; justify-content: center; }

/* improve efficiency */
.uptake2 { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 1rem 1.4rem; }
.uptake2 .mix-note { grid-column: 1 / -1; margin: 0; justify-self: center; }
.ring-pic { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.ring-pic-ring { --c: var(--teal); position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(38, 53, 31, .1) 0); }
.ring-pic--bio .ring-pic-ring { --c: var(--accent); }
.ring-pic-ring img { width: 142px; height: 142px; border-radius: 50%; object-fit: cover; border: 4px solid var(--paper); }
.ring-pic-ring img.is-dull { filter: grayscale(.85) brightness(.9); }
.ring-pic-num { font-family: var(--f-head); font-weight: 700; font-size: 1.7rem; color: var(--ink); margin: .5rem 0 0; line-height: 1; }
.ring-pic--bio .ring-pic-num { color: #a8871f; }
.ring-pic figcaption { font-family: var(--f-head); font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.duo[data-mode="c"] [data-panel="c"] .ring-pic-ring { animation: ringIn 1.1s var(--ease) both; }

/* complement: just a "+" sign, centred on the photos, with more space between circles */
.pic-duo { column-gap: 1.6rem; align-items: start; }
.pic-plus { background: none; width: auto; height: 150px; margin: 0; align-self: start; color: var(--accent); font-size: 2.2rem; font-weight: 600; line-height: 1; }

/* replace: both circles the same size, aligned on top so the captions line up */
.pic--new img { width: 150px; height: 150px; }
.swap2 { align-items: start; }
.swap2-arrow { margin: 74px 0 0; }

/* a bit more air between photo circles and their captions */
.pic { gap: 1.2rem; }

/* replace arrow in mustard */
.swap2-arrow { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); background-size: 22px 2px; }
.swap2-arrow::after { border-left-color: var(--accent); }

/* how do they work: example line, legend, equal visual sizes */
.duo-example { display: block; margin-top: .9rem; font-family: var(--f-body); font-weight: 300; font-size: .95rem; line-height: 1.55; letter-spacing: 0; color: var(--ink-soft); }
.mini-legend { display: flex; justify-content: center; gap: 1.2rem; margin: .5rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.mini-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.mini-legend span::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; }
.lg-conv::before { background: var(--teal); } .lg-bio::before { background: var(--accent); }
.ring-pic-ring { width: 150px; height: 150px; }
.ring-pic-ring img { width: 126px; height: 126px; }

/* ===== no invented data: empty placeholders until the team sends real figures ===== */
.data-needed { font-family: var(--f-head); font-weight: 600; font-size: .95rem; margin: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.big-num--sm { font-size: 1.8rem; color: transparent; -webkit-text-stroke: 1.2px var(--accent); }
.ring-pic--empty .ring-pic-ring { background: none; border: 2px dashed rgba(38, 53, 31, .25); }
.ring-pic--empty.ring-pic--bio .ring-pic-ring { border-color: var(--accent); }
.ring-pic--empty .ring-pic-num { color: transparent; -webkit-text-stroke: 1.2px var(--ink-soft); }
.ring-pic--empty.ring-pic--bio .ring-pic-num { -webkit-text-stroke-color: var(--accent); }
.market--empty .bars span { background: none; border: 1.5px dashed rgba(241, 239, 231, .35); border-bottom: 0; }

/* ===== 4 types: biostimulants zone + dimming rules for the 4th category ===== */
.z-stim { opacity: 0; }
.soil-diagram[data-active="stim"] .z-stim { opacity: 1; }
.soil-diagram[data-active="stim"] .z-growth, .soil-diagram[data-active="stim"] .z-pest, .soil-diagram[data-active="stim"] .z-soil { opacity: .28; }
.soil-diagram[data-active="stim"] .roots { opacity: .6; }
.soil-diagram[data-active="stim"] .plant { animation: sway 6s ease-in-out infinite alternate, vigour 2.4s ease-in-out infinite; }
@keyframes vigour { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.28) saturate(1.35) drop-shadow(0 0 8px rgba(255, 243, 196, .6)); } }
.soil-diagram[data-active="stim"] .sd-sun { animation: sunPulse 2.4s ease-in-out infinite; }
@keyframes sunPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.stim-glints path { transform-box: fill-box; transform-origin: center; }
.soil-diagram[data-active="stim"] .stim-glints path { animation: glint 2.2s ease-in-out infinite; }
.soil-diagram[data-active="stim"] .stim-glints path:nth-child(2) { animation-delay: .5s; }
.soil-diagram[data-active="stim"] .stim-glints path:nth-child(3) { animation-delay: 1s; }
.soil-diagram[data-active="stim"] .stim-glints path:nth-child(4) { animation-delay: 1.4s; }
.soil-diagram[data-active="stim"] .stim-glints path:nth-child(5) { animation-delay: 1.8s; }
@keyframes glint { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 70% { opacity: 0; transform: scale(.4) rotate(90deg); } }
.stim-dew ellipse { opacity: .85; filter: drop-shadow(0 0 2px #fff); }
.stim-flow { stroke-dasharray: .12 .88; opacity: .9; filter: drop-shadow(0 0 4px #fff3c4); }
.soil-diagram[data-active="stim"] .stim-flow { animation: sap 1.8s linear infinite; }
@keyframes sap { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
.definition-note { font-size: .82rem; line-height: 1.5; color: var(--ink-soft); opacity: .85; margin: .7rem 0 0; font-style: italic; }
.scene--explorer .cat-tabs button { padding: .38rem .8rem; font-size: .8rem; }

/* 01.1 definition scene */
.split--def { grid-template-columns: 1.25fr .75fr; }
.split--def .definition { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; color: var(--ink) !important; margin-bottom: .9rem; }
.split--def .definition-more { font-size: 1.02rem; }
.def-graphic { position: relative; justify-self: center; width: 100%; max-width: 280px; }
.def-graphic .photo-circle { max-width: 280px; }
.types-title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .6rem; }
.scene--explorer .explorer-panel { margin-top: 0; }

/* more air between the type buttons and the text */
.scene--explorer .cat-tabs { margin-bottom: 1.8rem; }

/* ================= 02.1 system diagrams (illustrated) ================= */
.scene--why::before { background: linear-gradient(180deg, rgba(25, 32, 20, .78), rgba(25, 32, 20, .9)); }
.scene-bg--seedling { object-position: 70% 40%; }
.duo-panel--wide { grid-template-columns: 1fr !important; grid-template-areas: "cap" "vis" !important; row-gap: 1rem; }
.duo-panel--wide .duo-caption { grid-row: auto !important; align-self: start; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.sys { width: 100%; height: auto; overflow: visible; }
.sys .ico { fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sys .ico-fill { fill: var(--cream); }
/* linear */
.lin-tube { stroke: rgba(241, 239, 231, .22); stroke-width: 8; stroke-linecap: round; fill: none; }
.lin-flow { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 3 16; stroke-linecap: round; fill: none; animation: linflow 1.4s linear infinite; }
@keyframes linflow { to { stroke-dashoffset: -19; } }
.lin-node > circle { fill: #2f4226; stroke: rgba(241, 239, 231, .55); stroke-width: 1.5; }
.lin-node--end > circle { fill: #4a3820; stroke: var(--accent); }
.lin-node--end .ico { stroke: #e9c98a; }
.lin-label { font-family: var(--f-head); font-weight: 600; font-size: 14px; fill: var(--cream); text-anchor: middle; }
.lin-node--end .lin-label { fill: var(--accent); }
.shock { opacity: 1; }
.sh-tag rect { fill: rgba(31, 40, 22, .85); stroke: rgba(208, 174, 67, .7); stroke-width: 1; }
.sh-tag text { font-family: var(--f-head); font-weight: 600; font-size: 12.5px; fill: var(--cream); text-anchor: middle; }
.sh-bolt { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.sh-hit { fill: #fff3c4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sh-tag { opacity: .35; transition: opacity .3s; }
.shock .sh-bolt { animation: bolt 7.5s ease-out infinite; }
.shock .sh-hit { animation: hit 7.5s ease-out infinite; }
.shock .sh-tag { animation: tagOn 7.5s ease-out infinite; }
.sh2 * { animation-delay: 1.5s !important; } .sh3 * { animation-delay: 3s !important; } .sh4 * { animation-delay: 4.5s !important; } .sh5 * { animation-delay: 6s !important; }
@keyframes bolt { 0%, 2% { opacity: 0; } 4% { opacity: 1; } 10% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes hit { 0%, 4% { opacity: 0; transform: scale(.4); } 7% { opacity: 1; transform: scale(1.2); } 18%, 100% { opacity: 0; transform: scale(3); } }
@keyframes tagOn { 0%, 2% { opacity: .35; } 5%, 22% { opacity: 1; } 32%, 100% { opacity: .35; } }
.shock .sh-tag rect { animation: tagGlow 7.5s ease-out infinite; }
@keyframes tagGlow { 0%, 2% { stroke: rgba(208, 174, 67, .5); } 5%, 22% { stroke: #ffe08a; } 32%, 100% { stroke: rgba(208, 174, 67, .5); } }
/* cycle */
.cyc-track { fill: none; stroke: rgba(241, 239, 231, .35); stroke-width: 2; stroke-dasharray: 2 6; }
.cyc-arrows path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cyc-node > circle { fill: #2f4226; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(208, 174, 67, .35)); }
.cyc-label { font-family: var(--f-head); font-weight: 600; font-size: 14px; fill: var(--cream); text-anchor: middle; }
.cyc-label--side { text-anchor: start; }
.cyc-label--end { text-anchor: end; }
.cyc-center { font-family: var(--f-head); font-weight: 700; font-size: 18px; fill: var(--cream); text-anchor: middle; }
.cyc-center--hl { fill: var(--accent); font-size: 20px; }
.cyc-dot { fill: #fff3c4; filter: drop-shadow(0 0 4px #ffe08a); }
.duo[data-mode="b"] .cyc-node > circle { animation: nodeGlow 3.2s ease-in-out infinite; }
.cyc-node:nth-of-type(2) > circle { animation-delay: .8s; } .cyc-node:nth-of-type(3) > circle { animation-delay: 1.6s; } .cyc-node:nth-of-type(4) > circle { animation-delay: 2.4s; }
@keyframes nodeGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(208, 174, 67, .25)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 224, 138, .9)); } }

/* 02.1 linear v2: calm — risks are static labels pointing to their link; only a slow flow moves */
.risk-line { fill: none; stroke: rgba(208, 174, 67, .65); stroke-width: 1.4; stroke-dasharray: 2 4; }
.risk-tag rect { fill: rgba(31, 40, 22, .85); stroke: rgba(208, 174, 67, .7); stroke-width: 1; }
.risk-tag text { font-family: var(--f-head); font-weight: 600; font-size: 12.5px; fill: var(--cream); text-anchor: middle; }
.lin-flow { animation-duration: 2.2s; }

/* 02.1 harmony: clear hierarchy title > caption, risks secondary, bigger icons, balanced air */
.scene--why .duo-top .kicker { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.scene--why .duo-panel--wide .duo-caption { font-family: var(--f-body); font-weight: 300; font-size: clamp(.98rem, 1.3vw, 1.08rem); color: rgba(241, 239, 231, .78); letter-spacing: 0; }
.risk-tag text { font-size: 11.5px; font-weight: 500; fill: rgba(241, 239, 231, .9); }
.risk-tag rect { stroke: rgba(208, 174, 67, .5); }
.scene--why .duo-panel--wide { grid-template-rows: auto 1fr; }
.scene--why .duo-panel--wide .sys { align-self: center; }

/* 02.1 second level: one sentence per step, in a fixed two-line slot (no resizing) */
.sys-step { cursor: pointer; outline: none; }
.sys-step > circle { transition: stroke .25s, fill .25s; }
.sys-step:hover > circle, .sys-step:focus-visible > circle, .sys-step.is-on > circle { stroke: #ffe08a; stroke-width: 2.5; fill: #3b5230; }
.sys-explain { min-height: 3.2em; margin: .2rem auto 0; max-width: 640px; text-align: center; font-size: .95rem; line-height: 1.6; color: rgba(241, 239, 231, .72); font-style: italic; transition: color .25s; }
.sys-explain.is-on { color: var(--cream); font-style: normal; }
.scene--why .duo-panel--wide { grid-template-rows: auto 1fr auto; grid-template-areas: "cap" "vis" "exp" !important; }
.duo-panel > .sys-explain { grid-area: exp !important; }

/* keep 02.1 within one screen with the explanation line */
.scene--why { padding-block: clamp(32px, 4vw, 56px); }
.scene--why .chapter-head { margin-bottom: clamp(16px, 2vw, 26px); }
.scene--why .duo-top { margin-bottom: 8px; }
.scene--why .duo-panel--wide { row-gap: .9rem; }
.scene--why .sys-explain { min-height: 3.1em; margin-top: 0; font-size: .9rem; }

/* 02.1 cycle v2: calm and smaller — no orbiting dots, no pulsing; only the dotted loop drifts slowly */
.cyc-dot { display: none; }
.duo[data-mode="b"] .cyc-node > circle { animation: none; filter: none; }
.cyc-node > circle { filter: none; }
.cyc-track { stroke-dasharray: 2 7; animation: cycDrift 4.2s linear infinite; }
@keyframes cycDrift { to { stroke-dashoffset: -36; } }
.cyc-center { font-size: 15px; }
.cyc-center--hl { font-size: 17px; }
.cyc-node .ico-fill, .cyc-node .ico { transform: scale(.85); }
.cyc-label { font-size: 13.5px; }

/* cycle: the good outcome mirrors "Degraded soils" in the linear chain */
.cyc-node > circle { stroke: rgba(241, 239, 231, .55); stroke-width: 1.5; }
.cyc-node--good > circle { fill: #4a5f2c; stroke: var(--accent); stroke-width: 2.5; }
.cyc-node--good .ico { stroke: #ffe08a; }
.cyc-node--good .cyc-label { fill: var(--accent); }
.cyc-center--hl { font-size: 19px; }

/* 02.1: more breathing room inside the card */
.scene--why .duo { padding: clamp(24px, 3.4vw, 44px) clamp(24px, 4vw, 52px); }
.scene--why .sys { margin-block: .4rem; }
/* card a bit wider than the text column so the diagrams keep their size and still breathe */
.scene--why .duo { margin-inline: calc(-1 * clamp(0px, 2.6vw, 32px)); }

/* 02.2 economic case: no dividers, tags aligned at the bottom.
   Intentionally minimal: a visual pause between the diagram scenes (balance, not every scene needs a graphic). */
.figure-item { border-left: 0 !important; }
.figures--4 .figure-item { padding-inline: 0 clamp(12px, 2vw, 28px); }
.figures--4 .figure-desc { flex: 1; }
.figures--4 .tag-pending { margin-top: .3rem; }

/* quote attribution: name + credential on two lines */
.pullquote figcaption { flex-direction: column; align-items: flex-start; gap: .15rem; }
.pullquote figcaption strong { font-family: var(--f-head); font-weight: 600; color: var(--ink); font-size: .92rem; }
.pullquote figcaption span { font-size: .82rem; line-height: 1.45; max-width: 46ch; }

/* 02.3: title → the quote as the main statement → who said it */
#why .pullquote { margin: 1.6rem 0 0; padding: 0; border-left: 0; }
#why .pullquote blockquote { font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.25; letter-spacing: -.015em; color: var(--ink); margin-bottom: 1.1rem; }
#why .pullquote figcaption strong { font-size: 1rem; }
#why .pullquote figcaption span { font-size: .88rem; }

/* 02.3 only the quote: larger, given room */
#why .pullquote { margin: 0; }
#why .pullquote blockquote { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; }

/* 02.3 quote alone, centred */
.scene--quote { padding-block: clamp(56px, 7vw, 96px) clamp(32px, 4vw, 52px); }
.scene--quote .bigquote { max-width: 860px; }
.scene--quote .bigquote::before { content: none; }
.scene--quote .q { color: var(--accent); font-family: var(--f-head); font-weight: 700; font-size: 1.9em; line-height: 0; vertical-align: -.32em; margin: 0 .06em; }
.scene--quote .bigquote blockquote { color: var(--ink); font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 1.4rem; }
.scene--quote .bigquote figcaption { flex-direction: column; gap: .2rem; }
.scene--quote .bigquote figcaption strong { font-family: var(--f-head); font-weight: 600; color: var(--ink); font-size: 1rem; }
.scene--quote .bigquote figcaption span { font-size: .9rem; color: var(--ink-soft); max-width: 52ch; }

/* bridge line: closes chapter 02 and leads into 03 */
.bridge { display: flex; width: fit-content; margin: clamp(22px, 2.6vw, 34px) auto 0; align-items: center; gap: .6rem;
  font-family: var(--f-head); font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.15rem); color: #a8871f; text-decoration: none; }
.bridge span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
.bridge:hover { color: var(--ink); }

/* benefits: subtitle under each group */
.ring-sub { font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; color: #a8871f; margin: -.5rem 0 1rem; }
.ring text { font-size: 15px; }

/* stepped tones so all three rings read on the tinted background */
.ring[data-ring="food"] circle { fill: #dcd9c6; }
.ring[data-ring="economies"] circle { fill: #cfcfb6; }
.ring[data-ring="farmers"] circle { fill: #c2c7a8; }
.ring:hover circle { fill: #eadca8 !important; }
.ring.is-active circle { fill: var(--accent) !important; }

/* ===== benefits: "ripple effect" photo rings ===== */
.rings--photo { max-width: 340px; overflow: visible; }
.rings--photo .ring image { filter: url(#ringGray); opacity: .6; transition: opacity .5s var(--ease); }
.rings--photo .ring:hover image { opacity: .75; }
.rings--photo .ring.is-active image { filter: none; opacity: 1; }
.rings--photo .ring circle { fill: none !important; }
.rings--photo .ring-edge { stroke: var(--cream); stroke-width: 4; transition: stroke .4s; }
.rings--photo .ring.is-active .ring-edge { stroke: var(--accent); stroke-width: 4; }
.rings--photo .ring-pill rect { fill: rgba(31, 40, 22, .78); transition: fill .3s; }
.rings--photo .ring-pill text { font-family: var(--f-head); font-weight: 600; font-size: 11.5px; fill: var(--cream); text-anchor: middle; pointer-events: none; }
.rings--photo .ring.is-active .ring-pill rect { fill: var(--accent); }
.rings--photo .ring.is-active .ring-pill text { fill: var(--ink); }
.ripple-c { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.rings--photo.is-rippling .ripple-c { animation: rippleOut 1.3s ease-out; }
@keyframes rippleOut { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }

/* ring labels outside the photos, with leader lines */
.rings--photo { max-width: 490px; }
.ring-label { cursor: pointer; outline: none; }
.ring-label rect { fill: rgba(31, 40, 22, .82); transition: fill .3s; }
.ring-label text { font-family: var(--f-head); font-weight: 600; font-size: 15px; fill: var(--cream); text-anchor: middle; pointer-events: none; }
.ring-lead { fill: none; stroke: rgba(38, 53, 31, .45); stroke-width: 1.2; transition: stroke .3s; }
.ring-lead-dot { fill: var(--cream); stroke: rgba(38, 53, 31, .6); stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.ring-label.is-active rect { fill: var(--accent); }
.ring-label.is-active text { fill: var(--ink); }
.ring-label.is-active .ring-lead { stroke: #a8871f; stroke-width: 1.6; }
.ring-label.is-active .ring-lead-dot { fill: var(--accent); stroke: var(--ink); }
.ring-label:hover rect { fill: #3d5533; }
.ring-label.is-active:hover rect { fill: var(--accent); }

.benefits-text .kicker { margin-bottom: .5rem; }
.benefits-text .explore-prompt { margin-bottom: 1.8rem; }

/* ===== 04.1 enablers v2: three sectors, spokes only, calm ===== */
.chapter-sub { margin: .4rem 0 0; font-size: .98rem; color: var(--light-soft); max-width: none; }
#scaling .chapter-head { align-items: start; }
#scaling .chapter-head .opener-num { margin-top: .9rem; }
#scaling .scene--green { padding-block: clamp(36px, 4.4vw, 60px); }
.network { aspect-ratio: 16 / 8.6; min-height: 300px; }
.net-lines line { animation: none; stroke: rgba(241, 239, 231, .2); stroke-dasharray: 2 5; }
.net-lines line.is-hot { stroke: var(--accent); stroke-dasharray: none; stroke-width: 1.8; }
.net-center { top: 58%; width: 6.2rem; height: 6.2rem; box-shadow: 0 0 0 10px rgba(208, 174, 67, .12); }
.net-group { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--f-head); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .45rem; }
.net-group::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.net-group--cream { color: var(--cream); } .net-group--accent { color: var(--accent); } .net-group--teal { color: var(--teal-light); }
.node { max-width: 150px; }
.net-wrap { grid-template-columns: 1fr 250px; gap: clamp(20px, 2.6vw, 34px); }
.node-side { align-self: center; }
.explore-prompt--light { color: var(--accent) !important; }
.node-detail { min-height: 0; }

/* country stories: adoption + policy in one card */
.story-policy { margin-top: 1.3rem; }
.story-policy .panel-label { color: #a8871f !important; margin: 0 0 .3rem; }
.policy-name { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; color: var(--green); margin: 0 0 .6rem; line-height: 1.3; }
.policy-chips { list-style: none; padding: 0; margin: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.policy-chips li { font-family: var(--f-head); font-weight: 600; font-size: .82rem; padding: .3rem .8rem; border-radius: 99px; background: var(--paper); border: 1px solid rgba(38, 53, 31, .15); }
.story-country { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* spokes take their group colour (soft at rest, full when selected) */
.net-lines line.g-cream { stroke: rgba(241, 239, 231, .35); }
.net-lines line.g-accent { stroke: rgba(208, 174, 67, .45); }
.net-lines line.g-teal { stroke: rgba(167, 192, 191, .5); }
.net-lines line.is-hot { stroke-dasharray: none; stroke-width: 2; }
.net-lines line.g-cream.is-hot { stroke: var(--cream); }
.net-lines line.g-accent.is-hot { stroke: var(--accent); }
.net-lines line.g-teal.is-hot { stroke: var(--teal-light); }

/* 04.1 polish: no side rule, smaller detail title, group colour, group hover, compact */
.node-detail { border-left: 0; padding: 0; }
.node-detail .node-title { font-size: 1.15rem; line-height: 1.3; margin-bottom: .4rem !important; }
.node-detail[data-group="cream"] .panel-label { color: var(--cream) !important; }
.node-detail[data-group="accent"] .panel-label { color: var(--accent) !important; }
.node-detail[data-group="teal"] .panel-label { color: var(--teal-light) !important; }
.net-group { cursor: default; pointer-events: auto; }
.network .node, .network .net-lines line { transition: opacity .3s, background .3s, color .3s; }
.network[data-focus="cream"] .node:not(.node--cream), .network[data-focus="accent"] .node:not(.node--accent), .network[data-focus="teal"] .node:not(.node--teal) { opacity: .3; }
.network[data-focus="cream"] .net-lines line:not(.g-cream), .network[data-focus="accent"] .net-lines line:not(.g-accent), .network[data-focus="teal"] .net-lines line:not(.g-teal) { opacity: .2; }
.network[data-focus="cream"] .net-group:not([data-group="cream"]), .network[data-focus="accent"] .net-group:not([data-group="accent"]), .network[data-focus="teal"] .net-group:not([data-group="teal"]) { opacity: .4; }
.network { aspect-ratio: 16 / 8; min-height: 280px; }
#scaling .scene--green { padding-bottom: clamp(28px, 3.4vw, 44px); }
#scaling .chapter-head { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* ===== 04.1 ecosystem: value chain + stakeholders (same system as 02.1) ===== */
.scene--eco .duo { margin-inline: calc(-1 * clamp(0px, 2.6vw, 32px)); padding: clamp(24px, 3.4vw, 44px) clamp(24px, 4vw, 52px); background: rgba(38, 53, 31, .45); }
.scene--eco .duo-top .kicker { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.scene--eco .chapter-sub { max-width: 70ch; }
.sys-chain .ico, .sys-actors .ico { fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-arrows path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-loop { fill: none; stroke: rgba(241, 239, 231, .45); stroke-width: 1.5; stroke-dasharray: 3 5; animation: cycDrift 4.2s linear infinite reverse; }
.fb-head { fill: none; stroke: rgba(241, 239, 231, .7); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fb-tag { fill: #2f4226; stroke: rgba(241, 239, 231, .35); }
.fb-text { font-family: var(--f-head); font-weight: 600; font-size: 12.5px; fill: var(--cream); text-anchor: middle; }
.lin-node--good > circle { fill: #4a5f2c; stroke: var(--accent); stroke-width: 2.5; }
.lin-node--good .ico { stroke: #ffe08a !important; }
.lin-node--good .lin-label { fill: var(--accent); }
.sys-actors .lin-label { font-size: 13px; }

/* ===== 04.2 enabling conditions ===== */
.enablers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.2vw, 30px); }
.enablers > li { display: flex; flex-direction: column; gap: .5rem; }
.en-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); margin-bottom: .3rem; }
.en-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enablers h4 { font-size: 1.02rem; line-height: 1.25; }
.enablers ul { list-style: none; padding: 0; margin: 0; }
.enablers ul li { position: relative; padding-left: 1rem; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: .35rem; }
.enablers ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }

/* 04.1 diagrams full width (no caption row) */
.scene--eco .duo-panel--wide { grid-template-areas: "vis" "exp" !important; grid-template-rows: 1fr auto; row-gap: .6rem; }
.scene--eco .duo-panel--wide > .sys { grid-area: vis !important; align-self: center; }
.scene--eco .sys-explain { min-height: 3.1em; font-size: .9rem; margin: 0 auto; }
.scene--eco { padding-block: clamp(32px, 4vw, 56px); }
.scene--eco .chapter-head { margin-bottom: clamp(16px, 2vw, 26px); }

/* 04.3 public support */
.split--support { grid-template-columns: .8fr 1.2fr; align-items: center; }
.big-num--support { font-size: clamp(3.4rem, 6.4vw, 5.6rem); }
.big-num--support small { font-size: .42em; margin-left: .1em; }
.support-figure .figure-desc { max-width: 32ch; margin-top: .3rem; }
.source { font-size: .78rem; color: var(--ink-soft); margin: .6rem 0 0; letter-spacing: .04em; }
.statement--sm { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.3; margin-bottom: 1rem; }
.stories-lede { font-size: .98rem; margin-top: .4rem; max-width: 62ch; }
.row-head { align-items: flex-start; }

.scene--eco .duo { padding-block: clamp(20px, 2.6vw, 32px); }
.scene--eco .duo-top { margin-bottom: 0; }
.scene--eco .chapter-sub { font-size: .92rem; }

/* enabling conditions support the chain: a thin arrow up over each column */
.en-up { display: block; width: 2px; height: 22px; background: linear-gradient(to top, transparent, rgba(208, 174, 67, .8)); position: relative; margin: 0 0 .5rem 25px; }
.en-up::before { content: ""; position: absolute; top: -2px; left: -4px; border: 5px solid transparent; border-bottom: 7px solid var(--accent); border-top: 0; }
.bridge--back { margin-top: clamp(26px, 3vw, 40px); font-size: .98rem; text-align: center; }
.bridge--back span { animation: nudgeUp 1.8s ease-in-out infinite; }
@keyframes nudgeUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ===== Stay connected: two forms ===== */
.connect-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.connect-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.form-card { background: var(--cream); color: var(--ink); border-radius: 22px; padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; gap: .8rem; }
.form-title { font-size: 1.25rem; }
.form-text { margin: -.3rem 0 .2rem; color: var(--ink-soft) !important; font-size: .92rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-family: var(--f-head); font-weight: 600; font-size: .82rem; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea { font: inherit; font-family: var(--f-body); font-weight: 400; font-size: .95rem; color: var(--ink); background: var(--paper);
  border: 1px solid rgba(38, 53, 31, .22); border-radius: 12px; padding: .7rem .9rem; outline: none; transition: border-color .2s, box-shadow .2s; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(208, 174, 67, .25); }
.field input:invalid.touched, .field textarea:invalid.touched { border-color: #c46a4a; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }
.check input { margin-top: .2rem; accent-color: var(--green); width: 16px; height: 16px; flex: none; }
.check a { color: var(--green); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn--accent { background: var(--accent); color: var(--ink); border: 0; align-self: flex-start; }
.btn--accent:hover { background: #ddbf5e; }
.btn--accent[disabled] { opacity: .6; cursor: wait; }
.form-status { margin: 0; font-size: .85rem; min-height: 1.3em; }
.form-status.is-ok { color: var(--green); font-weight: 500; }
.form-status.is-err { color: #a8452b; }
.form-status.is-info { color: #866b16; }

/* compact forms to fit one screen */
.connect { padding-block: clamp(36px, 4.4vw, 60px); }
.connect .scene-intro { margin-bottom: clamp(16px, 2vw, 24px); }
.form-card { gap: .6rem; padding: clamp(18px, 2.2vw, 26px); }
.field input, .field textarea { padding: .55rem .8rem; }
.connect-grid .form-card:first-child .form-status { margin-top: 0; }

.connect-grid > * { min-width: 0; }
.field input, .field textarea { width: 100%; min-width: 0; }

/* background system: photo only in the hero; solid green for the two system diagrams + forms; cream/tint alternate elsewhere.
   02.1 card matches 04.1 */
.scene--why .duo { background: rgba(38, 53, 31, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ========================================================= RESPONSIVE */
@media (max-width: 900px) {
  .topnav-inner { gap: 1rem; height: 56px; }
  .topnav-links { overflow-x: auto; scrollbar-width: none; }
  .topnav-links::-webkit-scrollbar { display: none; }
  .tn-name { display: none; }
  .split, .split--photo-left, .explorer, .story, .story.is-active, .country, .closing-grid { grid-template-columns: 1fr; }
  .brand-graphic { max-width: 360px; }
  .photo-circle { max-width: 280px; }
  .duo-panel { grid-template-columns: 1fr; grid-template-areas: "cap" "vis" "note"; row-gap: 1.6rem; }
  .duo-panel:not(:has(.duo-note)) .duo-caption { grid-row: auto; }
  .figures { grid-template-columns: 1fr; gap: 2.2rem; }
  .figure-item { border-left: 0; padding: 0; }
  .eco { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 600px; }
  .hero-img { object-position: 78% 30%; }
  .hero-shade { background: linear-gradient(0deg, rgba(38, 53, 31, .95) 0%, rgba(38, 53, 31, .82) 55%, rgba(38, 53, 31, .35) 100%); }
  /* network becomes grouped chips */
  .network { aspect-ratio: auto; min-height: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
  .net-lines, .net-center { display: none; }
  .node { position: static; transform: none; max-width: none; }
  .node:hover { transform: none; }
  .country .quad, .country .measures { order: 2; }
}
@media (max-width: 600px) {
  .opener { grid-template-columns: 1fr; gap: 12px; }
  .eco { grid-template-columns: 1fr; }
  .cycle-node { font-size: .7rem; width: 34%; }
  .cycle-ring, .orbit { inset: 20%; }
  .c1 { top: 20%; } .c2 { left: 80%; } .c3 { top: 80%; } .c4 { left: 20%; }
  .cycle-center { inset: 37%; font-size: .7rem; }
  .swap { grid-template-columns: 1fr; justify-items: center; }
  .swap-arrow { width: 2px; height: 40px; }
  .swap-arrow::after { right: auto; left: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-top: 9px solid var(--ink); border-bottom: 0; }
  .mix-row { grid-template-columns: 1fr; gap: .4rem; }
  .mix-note { margin-left: 0; }
  .switch button { padding: .5rem .8rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .market:not(.is-visible) .bars span { transform: none; }
}

@media (max-width: 900px) {
  .split--even, .explorer { grid-template-columns: 1fr; }
  .opp-row { grid-template-columns: 1fr; }
  .eco { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .chapter-head { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 900px) {
  .net-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 900px) { .figures--4 { grid-template-columns: 1fr 1fr; gap: 2rem 0; } .figures--4 .figure-item:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 600px) { .figures--4 { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .stories .story { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .pic img { width: 110px; height: 110px; } .pic--new img { width: 110px; height: 110px; }
  .pic--old::after { top: 55px; width: 124px; margin-left: -62px; }
  .ring-pic-ring { width: 130px; height: 130px; } .ring-pic-ring img { width: 108px; height: 108px; }
  .swap2 { grid-template-columns: 1fr; justify-items: center; } .swap2-arrow { width: 2px; height: 34px; margin: 0; background: var(--ink); animation: none; }
  .swap2-arrow::after { right: auto; left: -6px; top: auto; bottom: -2px; border: 7px solid transparent; border-top: 10px solid var(--ink); border-bottom: 0; }
}

@media (max-width: 600px) { .pic-plus { height: 110px; } .pic-duo { column-gap: .8rem; } }

@media (max-width: 600px) { .swap2-arrow { background: var(--accent); } .swap2-arrow::after { border-top-color: var(--accent); border-left-color: transparent; } }

@media (max-width: 900px) { .split--def { grid-template-columns: 1fr; } .def-graphic { max-width: 220px; } }

@media (max-width: 900px) { .net-group { position: static; transform: none; width: 100%; margin-top: .6rem; } }

@media (max-width: 900px) { .enablers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .enablers { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .connect-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* ========================================================= TEAM EDITS (30 Oct): new scenes */

/* narrative pauses: one big sentence, centred (02.2 statement, 03.2 question) */
.scene--statement { padding-block: clamp(56px, 7vw, 96px); text-align: center; }
.big-statement { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.4rem, 2.5vw, 2.05rem); line-height: 1.3; letter-spacing: -.02em;
  color: var(--ink); max-width: 34ch; margin: 0 auto; }
.big-statement .hl-under { box-shadow: inset 0 -.16em 0 rgba(208, 174, 67, .6); }
.big-statement--question { color: var(--green); max-width: 30ch; }
.bridge--arrow { width: 2.8rem; height: 2.8rem; border-radius: 50%; justify-content: center; background: var(--accent); color: var(--ink); font-size: 1.2rem; }
.bridge--arrow:hover { background: var(--ink); color: var(--accent); }

/* bigger scene titles (the team's new headings) */
.kicker--big { font-size: clamp(1.4rem, 2.3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.2; }
.scene-intro .eyebrow { margin-bottom: .35rem; }
.chapter-sub--dark { color: var(--ink-soft); max-width: 64ch; }

/* 02.3 beyond the farm */
.figures--4 .big-num { font-size: clamp(2.3rem, 3.8vw, 3.3rem); }
.figures .source { margin: .2rem 0 0; font-size: .74rem; color: #866b16; text-decoration: none; }
a.source:hover { color: var(--ink); text-decoration: underline; }
.eco-note { margin: clamp(22px, 2.8vw, 34px) 0 0; max-width: 88ch; font-size: .95rem; line-height: 1.65; color: var(--ink-soft); }
.eco-note a { color: var(--green); font-weight: 500; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* the quote now opens the page */
.scene--quote { padding-block: clamp(48px, 6vw, 84px) clamp(32px, 4vw, 52px); }

/* 04.4 countries: tabs + regulatory | results */
.country-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.country-tabs button { border: 1px solid rgba(38, 53, 31, .25); background: transparent; color: var(--ink-soft); border-radius: 99px; padding: .45rem 1.05rem;
  font-family: var(--f-head); font-weight: 600; font-size: .9rem; transition: all .3s; }
.country-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.country-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.stories .story { grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.story .story-country { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: .6rem; }
.story .panel-label { color: #9a7d1f !important; margin: 0 0 .35rem; }
.story-lead { font-family: var(--f-head); font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--ink); margin: 0 0 .8rem; }
.story-points { list-style: none; padding: 0; margin: 0; }
.story-points li { position: relative; padding-left: 1rem; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: .35rem; }
.story-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.story-points strong { font-weight: 600; color: var(--ink); }
.story-results { background: var(--paper); border-radius: 22px; padding: clamp(18px, 2.2vw, 26px); }
.story-num { font-size: clamp(2.3rem, 3.8vw, 3.2rem); margin-top: .2rem; }
.story-num-label { font-family: var(--f-head); font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--ink); margin: .45rem 0 .8rem; }
.story-text { font-size: .86rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.stories-lede { max-width: 58ch; }

/* 05.1 opener */
.fert-intro { font-size: 1.02rem; margin-bottom: 1.1rem !important; }
.key-statement { font-family: var(--f-head); font-weight: 700; font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.35;
  color: var(--green); padding-left: 1.1rem; box-shadow: inset 3px 0 0 var(--accent); margin: 0 0 1.2rem; }
.news-link { font-family: var(--f-head); font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }

/* 05.2 how fertilizer shocks travel through the economy */
.scene--shock { padding-block: clamp(32px, 4vw, 56px); }
.split--shock { grid-template-columns: .9fr 1.1fr; align-items: center; }
.shock-lead { font-family: var(--f-head); font-weight: 600; font-size: 1.15rem; color: var(--accent) !important; margin: 0; }
.shock-card { background: rgba(38, 53, 31, .45); border-radius: 26px; padding: clamp(18px, 2.4vw, 28px); }
.shock-title { font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--cream) !important; margin: 0 0 .8rem; text-align: center; }
.shock-flow { display: flex; flex-direction: column; align-items: stretch; }
.sh-box { background: #2f4226; border-radius: 14px; padding: .55rem .9rem; text-align: center; display: flex; flex-direction: column; gap: .1rem; }
.sh-box strong { font-family: var(--f-head); font-weight: 600; font-size: .86rem; line-height: 1.3; color: var(--cream); }
.sh-box span { font-size: .74rem; line-height: 1.35; color: rgba(241, 239, 231, .7); }
.sh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sh-box--hot { cursor: pointer; outline: none; box-shadow: inset 0 0 0 1.5px rgba(208, 174, 67, .6); transition: background .25s, box-shadow .25s; }
.sh-box--hot strong { color: var(--accent); }
.sh-box--hot:hover, .sh-box--hot:focus-visible, .sh-box--hot.is-on { background: #3b5230; box-shadow: inset 0 0 0 2px #ffe08a; }
.sh-box--end { background: var(--accent); }
.sh-box--end strong { color: var(--ink); }
.sh-box--end span { color: rgba(38, 53, 31, .75); }
.sh-arrow { display: block; width: 2px; height: 14px; margin: 3px auto; background: rgba(208, 174, 67, .7); position: relative; }
.sh-arrow::after { content: ""; position: absolute; left: -4px; bottom: -4px; border: 5px solid transparent; border-top: 6px solid var(--accent); border-bottom: 0; }
.shock-card .sys-explain { min-height: 3.1em; margin: .7rem auto 0; font-size: .86rem; }

/* 05.3 text scene */
.split--text { grid-template-columns: .7fr 1.3fr; align-items: start; }
.text-cols p { color: var(--ink-soft); font-size: .98rem; line-height: 1.65; margin-bottom: .9rem; }
.text-cols p:last-child { margin-bottom: 0; }
.text-cols strong { font-weight: 600; color: var(--ink); }

/* 05.4 two systems side by side */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(16px, 2vw, 24px); }
.cmp { border-radius: 22px; padding: clamp(16px, 2vw, 24px); }
.cmp--old { background: rgba(38, 53, 31, .06); }
.cmp--new { background: var(--green); }
.cmp-title { font-family: var(--f-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; color: var(--ink-soft); }
.cmp--new .cmp-title { color: var(--accent); }
.cmp-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.cmp-steps li { font-family: var(--f-head); font-weight: 600; font-size: .9rem; line-height: 1.3; color: var(--ink-soft); }
.cmp-steps li + li::before { content: "↓"; display: block; font-size: .8rem; line-height: 1; margin: .3rem 0; color: var(--teal); }
.cmp-steps li:last-child { color: var(--ink); }
.cmp--new .cmp-steps li { color: var(--light-soft); }
.cmp--new .cmp-steps li + li::before { color: var(--accent); }
.cmp--new .cmp-steps li:last-child { color: var(--accent); }
.cmp-foot { font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); text-align: center; margin: clamp(16px, 2vw, 22px) 0 .3rem; }
.cmp-formula { font-size: .86rem; line-height: 1.5; color: var(--ink-soft); text-align: center; max-width: 92ch; margin: 0 auto; }
.cmp-formula b { color: #a8871f; font-weight: 600; margin: 0 .15em; }
.cmp-note { text-align: center; margin-top: .5rem; }

/* 05.5 biological solutions in practice */
.practice { list-style: none; margin: clamp(18px, 2.4vw, 30px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 30px); }
.practice li { display: flex; flex-direction: column; gap: .5rem; }
.practice h4 { font-size: 1.02rem; line-height: 1.25; }
.practice p { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* 05.6 three sourced figures */
.figures--3 { grid-template-columns: repeat(3, 1fr); }
.figures--3 .figure-item { padding-inline: 0 clamp(12px, 2vw, 28px); }
.figures--3 .big-num { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.figures--3 .figure-desc { flex: 1; }

/* 05.7 global initiatives: buttons on the left, one initiative at a time */
.init-intro { max-width: 40ch; color: var(--ink); }
.initiatives { display: grid; grid-template-columns: 260px 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: clamp(12px, 1.6vw, 20px); }
.init-tabs { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }
.init-tabs button { text-align: left; border: 1px solid rgba(38, 53, 31, .2); background: transparent; color: var(--ink-soft); border-radius: 14px; padding: .6rem .95rem;
  font-family: var(--f-head); font-weight: 600; font-size: .92rem; transition: all .3s; }
.init-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.init-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.init-panel { background: var(--paper); border-radius: 22px; padding: clamp(18px, 2.4vw, 30px); }
.init-panel .panel-title { margin-bottom: .9rem; }
.init-panel .ticks li { font-size: .98rem; margin-bottom: .6rem; }

/* nav with five chapters: a little tighter so it fits one line at ~1000px */
.topnav-inner { gap: 1rem; }
.topnav-links a { padding: .5rem .55rem; font-size: .94rem; }

@media (max-width: 900px) {
  .stories .story, .split--shock, .split--text, .compare, .initiatives { grid-template-columns: 1fr; }
  .practice { grid-template-columns: 1fr 1fr; }
  .figures--3 { grid-template-columns: 1fr; gap: 1.6rem; }
  .init-tabs { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .practice { grid-template-columns: 1fr; }
  .sh-pair { grid-template-columns: 1fr; }
}

/* chapter heads with a subtitle: number aligned with the title, not the subtitle */
#deliver .chapter-head { align-items: start; }
#deliver .chapter-head .opener-num { margin-top: .9rem; }
#deliver .chapter-head { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* countries: compact head so the card fits one screen */
.stories-lede { max-width: 66ch; }
#scaling .row-head { margin-bottom: clamp(16px, 2vw, 24px); }
#scaling .row-head .country-tabs { margin-top: .2rem; }

/* --- 3 · BIOSTIMULANTS underground: roots and fine roots brighten, nutrients light up at the tips and travel into the roots --- */
.soil-diagram[data-active="stim"] .roots { opacity: 1; filter: brightness(1.15) drop-shadow(0 0 3px rgba(255, 224, 138, .5)); }
.soil-diagram[data-active="stim"] #fineRoots { stroke-opacity: .95; }
.stim-nutrient { transform-box: fill-box; transform-origin: center; }
.soil-diagram[data-active="stim"] .stim-nutrient { animation: nutrientGlow 2.6s ease-in-out infinite; }
@keyframes nutrientGlow { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.3); } }

/* 02.1 and 04.1 diagrams at the same scale: same node size (r=32), icons and labels at the same proportion */
.sys-linear .ico-wrap { transform: scale(.88); }
.sys-chain .lin-node > .ico, .sys-actors .lin-node > .ico { transform: scale(1.06); }
.sys-actors .lin-label { font-size: 14px; }
/* cycle nodes at the same size as the other system diagrams */
.cyc-node .ico-fill, .cyc-node .ico { transform: scale(1.09); }
.cyc-label { font-size: 14px; }
/* fertilizers infographics: same text size for boxes/steps in both */
.sh-box strong { font-size: .9rem; }
.sh-box span { font-size: .76rem; }

/* ========================================================= SCALE PASS (30 Oct): calmer titles and diagrams, a bit more readable small text */
/* titles */
.hero-title { font-size: clamp(1.8rem, 2.8vw, 2.9rem); }
.chapter-head h2 { font-size: clamp(1.3rem, 2.1vw, 1.85rem); }
.chapter-head .opener-num { font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
.scene--quote .bigquote blockquote { font-size: clamp(1.45rem, 2.6vw, 2.2rem); }
.kicker--big { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.scene--why .duo-top .kicker, .scene--eco .duo-top .kicker { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.big-statement { font-size: clamp(1.2rem, 2vw, 1.65rem); }
.statement--sm { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.story .story-country { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
/* big numbers */
.figures--4 .big-num, .figures--3 .big-num, .story-num { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.big-num--support { font-size: clamp(2.6rem, 4.4vw, 3.8rem); }
/* diagrams: don't stretch to the full card width; labels keep a readable size */
.sys { max-width: 760px; margin-inline: auto; }
.lin-label, .cyc-label { font-size: 16px; }
.sys-actors .lin-label { font-size: 16px; }
.cyc-center { font-size: 17px; } .cyc-center--hl { font-size: 20px; }
.risk-tag text { font-size: 12.5px; }
.fb-text { font-size: 14px; }
.explorer-visual { max-width: 340px; }
.rings--photo { max-width: 420px; }
/* small text a little bigger */
.figure-desc { font-size: .95rem; }
.story-points li { font-size: .92rem; }
.story-text { font-size: .9rem; }
.sys-explain { font-size: .95rem !important; }
.cmp-formula { font-size: .9rem; }

/* quote: the team's line now introduces it (static, no link) */
.quote-lead { font-family: var(--f-head); font-weight: 600; font-size: clamp(.95rem, 1.3vw, 1.1rem); color: #a8871f; margin: 0 0 1rem; }
.scene--quote { padding-block: clamp(48px, 6vw, 84px); }

/* 02.2 statement as a "turn": the old idea quiet, the new one big */
.scene--statement:has(.turn) { text-align: left; }
.turn { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 980px; margin-inline: auto; }
.turn p { margin: 0; }
.turn-not { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.35; color: var(--teal); }
.turn-but { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.turn-big { display: block; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.6rem, 2.9vw, 2.4rem); line-height: 1.12; letter-spacing: -.025em; color: var(--ink); margin-bottom: .7rem; }
.turn-big::first-letter { color: inherit; }
@media (max-width: 700px) { .turn { grid-template-columns: 1fr; } }
.turn { grid-template-columns: .75fr auto 1.25fr; grid-template-areas: "not arrow big" ". . but"; row-gap: .7rem; column-gap: clamp(18px, 2.6vw, 40px); align-items: center; }
.turn-not { grid-area: not; text-align: right; }
.turn-arrow { grid-area: arrow; font-family: var(--f-head); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: var(--accent); }
.turn-big { grid-area: big; margin: 0; }
.turn-but { grid-area: but; align-self: start; }
@media (max-width: 700px) { .turn { grid-template-columns: 1fr; grid-template-areas: "not" "arrow" "big" "but"; } .turn-not { text-align: left; } .turn-arrow { transform: rotate(90deg); justify-self: start; } }

/* 02.2 turn: everything appears at once; only the arrow keeps a slow push towards the new idea */
.turn-arrow { animation: arrowNudge 2.8s ease-in-out infinite; }
@keyframes arrowNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
/* the "through…" clause as its three ideas */
.turn-big { text-wrap: balance; }
.turn-but { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.turn-but li { position: relative; padding-left: 1.3rem; font-family: var(--f-head); font-weight: 500; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.35; color: var(--ink-soft); }
.turn-but li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.turn-but strong { font-weight: 700; color: var(--green); }
/* a bit faster flow in the system diagrams */
.lin-flow { animation-duration: 1.7s; }
.cyc-track { animation-duration: 3.2s; }

/* 02.3 beyond the farm: two small charts built from the team's figures */
.eco-charts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.eco-card { margin: 0; background: var(--paper); border-radius: 22px; padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: .35rem; }
.eco-card-label { font-family: var(--f-head); font-weight: 700; font-size: .95rem; color: var(--ink); margin: 0; }
.eco-card .big-num { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: .1rem 0 .1rem; }
.eco-card .figure-desc { margin: 0 0 .6rem; }
.eco-card .source { margin-top: auto; padding-top: .5rem; }
/* horizontal bars */
.hbars { display: flex; flex-direction: column; gap: .55rem; }
.hbar { display: grid; grid-template-columns: 7.2rem 1fr 3rem; align-items: center; gap: .6rem; }
.hbar-name { font-family: var(--f-head); font-weight: 600; font-size: .8rem; line-height: 1.2; color: var(--ink-soft); }
.hbar-track { height: 16px; }
.hbar-track i { display: block; height: 100%; width: var(--w); background: var(--teal); border-radius: 0 4px 4px 0; }
.hbar-track i.is-bio { background: var(--accent); }
.hbar-val { font-family: var(--f-head); font-weight: 700; font-size: .9rem; color: var(--ink); }
/* vertical bars */
.eco-market-head { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: end; }
.vbars { display: flex; gap: 14px; align-items: flex-end; height: 150px; }
.vbar { display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; width: 92px; height: 100%; text-align: center; }
.vbar-val { font-family: var(--f-head); font-weight: 700; font-size: .9rem; color: var(--ink); margin-bottom: .25rem; }
.vbar-col { width: 44px; height: 100%; display: flex; align-items: flex-end; }
.vbar-col i { display: block; width: 100%; height: var(--h); background: var(--accent); border-radius: 4px 4px 0 0; }
.vbar--proj .vbar-col i { background: repeating-linear-gradient(135deg, var(--accent) 0 6px, #e3cc85 6px 10px); }
.vbar-year { font-family: var(--f-head); font-weight: 700; font-size: .82rem; color: var(--ink); margin-top: .35rem; }
.vbar-name { font-size: .72rem; line-height: 1.25; color: var(--ink-soft); }
@media (max-width: 800px) { .eco-charts, .eco-market-head { grid-template-columns: 1fr; } }
/* bar values next to their bars; both columns share one baseline */
.hbar { grid-template-columns: 7.2rem 1fr; }
.hbar-track { display: flex; align-items: center; gap: .5rem; }
.hbar-track i { flex: none; }
.vbars { height: 170px; padding-top: 1.6rem; }
.vbar { grid-template-rows: 1fr auto 2.4em; }
.vbar-col i { position: relative; }
.vbar-val { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0 0 .3rem; }
.vbar-val { font-style: normal; }
/* turn centred on the page axis: arrow in the middle, both ideas balanced around it */
.turn { grid-template-columns: 1fr auto 1fr; max-width: none; }
.turn-big { text-wrap: balance; }
.turn-not { text-wrap: balance; }
/* unit after a big number (×, %, bn, M, +) gets a little air, the same everywhere */
.big-num small { margin-left: .12em; }
.big-num small.unit-x { font-size: .62em; }
/* the companies paragraph: two columns that line up with the two charts above */
.eco-note { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); max-width: none; padding-inline: clamp(18px, 2.2vw, 26px); }
.eco-note p { margin: 0; }
@media (max-width: 800px) { .eco-note { grid-template-columns: 1fr; gap: .8rem; } }
.eco-note { padding-inline: 0; }
.eco-note p { padding-inline: clamp(18px, 2.2vw, 26px); text-wrap: pretty; }
/* all units after big numbers at the same proportion as × and with the same air */
.big-num small, .big-num small.unit-x, .big-num--support small { font-size: .62em; margin-left: .16em; }
.big-num small.unit-x { font-size: 1em; font-weight: 600; margin-left: .1em; }
.big-num small.unit-x { font-size: 1.08em; }

/* 03.2 question: premise quiet, question big, an outlined "?" like the chapter numbers */
.scene--statement:has(.ask) { text-align: left; }
.ask { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: clamp(18px, 3vw, 44px); }
.ask p { margin: 0; }
.ask-mark { font-family: var(--f-head); font-weight: 700; font-size: clamp(5rem, 9vw, 8rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.ask-if { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--teal); margin-bottom: .4rem !important; }
.ask-q { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); max-width: 22ch; text-wrap: balance; }
.ask-mark { font-size: clamp(6.5rem, 12vw, 10rem); }

/* Beyond the farm: the bars grow once, when the charts first come into view, then stay still */
.eco-charts.play .hbar-track i { animation: barGrowX 1.1s var(--ease) .35s both; }
.eco-charts.play .hbar + .hbar .hbar-track i { animation-delay: .55s; }
.eco-charts.play .hbar-val { animation: fadeIn .5s ease 1.3s both; }
.eco-charts.play .vbar-col i { animation: barGrowY 1.1s var(--ease) .5s both; }
.eco-charts.play .vbar + .vbar .vbar-col i { animation-delay: .75s; }
.eco-charts.play .vbar-val { animation: fadeIn .5s ease 1.6s both; }
@keyframes barGrowX { from { width: 0; } }
@keyframes barGrowY { from { height: 0; } }
/* turn: centre the whole composition (by its content), not the arrow */
.turn { grid-template-columns: auto auto auto; justify-content: center; }
.turn-not { max-width: 19ch; }
.turn-big, .turn-but { max-width: 30rem; }
/* fixed line breaks so each block is exactly as wide as its text → the composition centres for real */
.turn-not, .turn-big, .turn-but li, .ask-if, .ask-q { white-space: nowrap; text-wrap: initial; max-width: none; }
@media (max-width: 900px) {
  .turn-not, .turn-big, .turn-but li, .ask-if, .ask-q { white-space: normal; }
  .turn-not br, .turn-big br, .ask-q br { display: none; }
}

/* quote in the same language as the other pauses: outlined mark, quiet intro, big line with a gold keyword */
.scene--quote { text-align: left; }
.quote-ask { margin: 0; }
.quote-mark { align-self: start; line-height: .9; margin-top: -.05em; }
.quote-q { margin: 0; }
.quote-by { margin-top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.quote-by strong { font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: var(--ink); }
.quote-by span { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 900px) { .quote-by span { white-space: normal; } .quote-by br { display: none; } }
.quote-mark { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(7rem, 13vw, 11rem); line-height: .75; -webkit-text-stroke-width: 1.5px; }
/* the three narrative pauses breathe more (a real pause between sections) */
.scene--quote, .scene--statement { padding-block: clamp(84px, 10.5vw, 150px); }
.examples .ex { white-space: nowrap; }
.panel-body p, .ring-body, .init-panel .ticks li, .story-text, .figure-desc { text-wrap: pretty; }

/* ========================================================= ONE AIR FOR EVERY SECTION
   Same space above and below every scene (content scenes and narrative pauses alike).
   Change --scene-air here to change it everywhere. */
:root { --scene-air: clamp(56px, 6.6vw, 96px); }
.scene, .scene--why, .scene--eco, .scene--shock, .scene--quote, .scene--statement, .connect, .closing,
#scaling .scene--green { padding-block: var(--scene-air) !important; }

/* 04.1 ecosystem with four views (chain, stakeholders, enabling conditions, outcomes): all stacked, size of the largest */
.duo[data-mode="d"] [data-panel="d"] { visibility: visible; opacity: 1; pointer-events: auto; animation: fadeUp .5s var(--ease); }
.scene--eco .duo-top { flex-wrap: wrap; row-gap: .8rem; }
.scene--eco .switch button { padding-inline: .9rem; }
.sys-explain { text-wrap: balance; }
/* 04.1 compact: title and selector closer, smaller buttons, less inner padding */
.scene--eco .duo { padding-block: clamp(16px, 2vw, 24px); }
.scene--eco .duo-top { row-gap: .55rem; margin-bottom: .2rem; }
.scene--eco .switch button { font-size: .85rem; padding: .42rem .8rem; }
.en-arrows path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sys-enab ~ .sys-explain:not(.is-on) { font-style: normal; color: var(--accent); }
.scene--eco .duo-stage { margin-top: .9rem; }

/* 04.3 public support: statement + data card on one row, the two paragraphs below (same format as Beyond the farm) */
.support-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: center; }
.support-top .statement--sm { margin: 0; }
.support-card .big-num--support { font-size: clamp(2.2rem, 3.6vw, 3rem); margin: 0; }
.support-card .eco-card-label { margin-bottom: .8rem; }
.share-bar { display: flex; gap: 2px; height: 30px; }
.share-bar i { display: flex; align-items: center; width: var(--w); font-style: normal; font-family: var(--f-head); font-weight: 700; font-size: .85rem; padding-inline: .6rem; overflow: hidden; white-space: nowrap; }
.share-harm { background: var(--teal); color: var(--cream); border-radius: 4px 0 0 4px; }
.share-rest { background: rgba(38, 53, 31, .12); color: var(--ink); border-radius: 0 4px 4px 0; padding-inline: .3rem !important; }
.share-legend { display: flex; gap: 1.2rem; margin: .5rem 0 0; font-size: .78rem; color: var(--ink-soft); }
.share-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.share-legend span::before { content: ""; width: .7rem; height: .7rem; border-radius: 2px; }
.lg-harm::before { background: var(--teal); } .lg-rest::before { background: rgba(38, 53, 31, .2); }
.share.play .share-harm { animation: barGrowX 1.1s var(--ease) .35s both; }
.share.play .share-rest { animation: fadeIn .6s ease 1.2s both; }
.share.play .share-bar span { animation: fadeIn .5s ease 1.3s both; }
#support-title ~ * , .support-top .kicker { margin-bottom: .8rem; }
@media (max-width: 800px) { .support-top { grid-template-columns: 1fr; } }
.support-top > div:first-child { padding-inline: clamp(18px, 2.2vw, 26px); }
.share-title { font-family: var(--f-head); font-weight: 600; font-size: .8rem; color: var(--ink-soft); margin: 0 0 .35rem; }

/* 04.4 countries: map + tabs on the left, the country's card on the right */
.countries { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.countries-side .stories-lede { font-size: .95rem; margin-bottom: 1rem; }
.map-box { aspect-ratio: 900 / 391; margin-bottom: 1rem; }
.world-map { width: 100%; height: auto; display: block; }
.map-c { fill: rgba(38, 53, 31, .13); stroke: var(--cream); stroke-width: .6; }
.map-focus { fill: var(--teal); cursor: pointer; outline: none; transition: fill .3s; }
.map-focus:hover, .map-focus:focus-visible { fill: #5d7c7b; }
.map-focus.is-active { fill: var(--accent); }
.countries .stories .story { grid-template-columns: 1fr; gap: 1rem; }
.countries .story-results { padding: clamp(14px, 1.8vw, 20px); }
.countries .story-num { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.countries .story-num-label { margin: .3rem 0 .5rem; }
@media (max-width: 900px) { .countries { grid-template-columns: 1fr; } }
/* countries card more compact: the four points in two columns */
.countries .story-points { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.4rem; }
.countries .story-points li { margin: 0; }
.countries .story-lead { margin-bottom: .7rem; }
.countries .story-text { font-size: .86rem; }
.countries { align-items: center; }

/* ========================================================= 04.4 countries v3: photo + policy + results with a visual */
.stories--photo .story { grid-template-columns: .82fr 1.18fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.story-photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; min-height: 100%; }
.story-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(25, 32, 20, .7), rgba(25, 32, 20, 0) 45%); }
.story-photo figcaption { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 1; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--cream); letter-spacing: -.02em; }
.stories--photo .story.is-active .story-photo img { animation: photoIn 1.2s var(--ease) both; }
@keyframes photoIn { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } }
.story-body .panel-label { color: #9a7d1f !important; margin: 0 0 .3rem; }
.stories--photo .story-lead { font-size: .95rem; margin-bottom: .6rem; }
.stories--photo .story-points { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.2rem; margin-bottom: .9rem; }
.stories--photo .story-points li { font-size: .84rem; margin: 0; }
.stories--photo .story-results { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; background: var(--paper); border-radius: 18px; padding: 14px 18px; }
.stories--photo .story-text { font-size: .82rem; line-height: 1.5; }
.res-visual { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 150px; text-align: center; }
.res-cap { font-size: .72rem; line-height: 1.3; color: var(--ink-soft); margin: 0; }
/* Brazil: ring */
.res-ring { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(38, 53, 31, .1) 0); -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%); position: relative; }
.res-ring span { font-family: var(--f-head); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.res-visual:has(.res-ring) { position: relative; }
/* India / China: two stacked figures */
.res-pair { display: flex; flex-direction: column; gap: .45rem; }
.res-pair p { margin: 0; display: flex; flex-direction: column; line-height: 1.05; }
.res-pair b { font-family: var(--f-head); font-weight: 700; font-size: 1.7rem; color: var(--accent); letter-spacing: -.03em; }
.res-pair b small { font-size: .62em; margin-left: .12em; }
.res-pair span { font-size: .75rem; color: var(--ink-soft); }
/* Kenya: growth bars */
.res-bars { display: flex; gap: 14px; align-items: flex-end; height: 104px; }
.res-bar { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; }
.res-bar i { align-self: end; display: block; width: 34px; height: var(--h); background: var(--accent); border-radius: 4px 4px 0 0; }
.res-bar:first-child i { background: var(--teal); }
.res-bar-val { font-family: var(--f-head); font-weight: 700; font-size: .78rem; color: var(--ink); }
.res-bar-year { font-family: var(--f-head); font-weight: 600; font-size: .75rem; color: var(--ink-soft); margin-top: .2rem; }
/* the result visual grows in each time a country is shown */
.story.is-active .res-ring { animation: ringIn 1.1s var(--ease) both; }
.story.is-active .res-bar i { animation: barGrowY 1s var(--ease) .2s both; }
.story.is-active .res-bar + .res-bar i { animation-delay: .45s; }
.story.is-active .res-pair p { animation: turnIn .7s var(--ease) both; }
.story.is-active .res-pair p + p { animation-delay: .25s; }
@keyframes turnIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .stories--photo .story { grid-template-columns: 1fr; } .story-photo { min-height: 220px; } }
/* ring drawn on a pseudo-element so the number in the middle is not masked away */
.res-ring { background: none; -webkit-mask: none; mask: none; }
.res-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(38, 53, 31, .1) 0);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%); }
.res-ring span { position: relative; }
.res-ring span small { font-size: .62em; margin-left: .08em; }
.story.is-active .res-ring { animation: none; }
.story.is-active .res-ring::before { animation: ringIn 1.1s var(--ease) both; }
/* smaller photo box: fixed proportion, narrower column */
.stories--photo .story { grid-template-columns: minmax(200px, 280px) 1fr; align-items: center; }
.story-photo { min-height: 0; aspect-ratio: 4 / 5; align-self: center; }
.story-photo figcaption { font-size: clamp(1.3rem, 2vw, 1.7rem); }

/* ========================================================= 04.4 countries as a book */
.book { position: relative; perspective: 2200px; margin-top: .4rem; }
.book .stories { display: grid; }
.spread { grid-area: 1 / 1; display: grid !important; grid-template-columns: 1fr 1fr; visibility: hidden; opacity: 0; pointer-events: none; }
.spread.is-active { visibility: visible; opacity: 1; pointer-events: auto; animation: none !important; }
/* paper, spine and the edge of the pages */
.book .stories { border-radius: 8px 16px 16px 8px; box-shadow: 0 34px 60px -34px rgba(38, 53, 31, .55), 3px 3px 0 #ebe7da, 6px 6px 0 #e3dfd0, 7px 7px 0 rgba(38, 53, 31, .08); }
.page { position: relative; background: #fbfaf5; padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.6vw, 34px) 2.2rem; }
.page--left { border-radius: 8px 0 0 8px; background: linear-gradient(to left, rgba(38, 53, 31, .1), rgba(38, 53, 31, 0) 9%), #fbfaf5; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-content: start; }
.page--right { border-radius: 0 16px 16px 0; background: linear-gradient(to right, rgba(38, 53, 31, .1), rgba(38, 53, 31, 0) 9%), #fbfaf5; }
.page-num { position: absolute; bottom: .7rem; left: 0; right: 0; text-align: center; font-family: var(--f-head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
/* left page: photo + result visual */
.page--left .story-photo { aspect-ratio: 4 / 5; min-height: 0; max-height: 360px; border-radius: 10px; }
.page--left .res-visual { width: 140px; align-self: center; }
/* right page: the law */
.page--right .panel-label { color: #9a7d1f !important; margin: 0 0 .3rem; }
.page--right .story-lead { font-size: .95rem; margin-bottom: .6rem; }
.page--right .story-points { display: block; margin-bottom: .9rem; }
.page--right .story-points li { font-size: .84rem; margin-bottom: .3rem; }
.page--right .story-text { font-size: .82rem; line-height: 1.5; margin: 0; }
/* page turn */
.book-overlay { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; overflow: hidden; }
.book-overlay.is-left { left: 0; } .book-overlay.is-right { right: 0; }
.book-overlay > .page { height: 100%; }
.book-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4; transform-style: preserve-3d; }
.book-leaf.is-forward { left: 50%; transform-origin: left center; }
.book-leaf.is-back { left: 0; transform-origin: right center; }
.book-leaf .book-overlay { width: 100%; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book-leaf .leaf-back { transform: rotateY(180deg); }
.book-leaf.is-forward.is-turning { animation: leafForward .9s cubic-bezier(.45, .05, .25, 1) both; }
.book-leaf.is-back.is-turning { animation: leafBack .9s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes leafForward { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes leafBack { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.book-leaf .leaf-front > .page::after, .book-leaf .leaf-back > .page::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: leafShade .9s ease both; }
@keyframes leafShade { 0% { background: rgba(38, 53, 31, 0); } 50% { background: rgba(38, 53, 31, .12); } 100% { background: rgba(38, 53, 31, 0); } }
/* arrows in the page corners */
.book-turn { position: absolute; bottom: .45rem; z-index: 5; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid rgba(38, 53, 31, .2); background: var(--paper); color: var(--ink); font-size: .95rem; transition: all .25s; }
.book-turn:hover { background: var(--accent); border-color: var(--accent); }
.book-turn--prev { left: .7rem; } .book-turn--next { right: .7rem; }
@media (max-width: 900px) { .spread { grid-template-columns: 1fr; } .page--left, .page--right { border-radius: 10px; } .book-leaf, .book-overlay { display: none; } }
/* book fixes: pages fill the spread, no gap at the spine, more compact */
.stories .story.spread { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 0; align-items: stretch; }
.spread > .page { height: 100%; }
.page { padding: clamp(16px, 2vw, 26px) clamp(16px, 2.2vw, 30px) 2.4rem; }
.page--left .story-photo { max-height: 300px; }
.page--left .res-visual { width: 128px; }
.page--right .story-lead { font-size: .9rem; }
.page--right .story-points li { font-size: .8rem; margin-bottom: .2rem; }
.page--right .story-text { font-size: .78rem; }

/* ===== the book starts closed (cover with the world map) and opens on page 1 when you arrive, like the charts ===== */
.book-cover { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 6; transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.45, .05, .25, 1) .25s, opacity .4s ease 1.45s, visibility 0s linear 1.85s; }
.cover-front, .cover-back { position: absolute; inset: 0; border-radius: 6px 16px 16px 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-front { background: linear-gradient(to right, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 7%), var(--green); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center;
  box-shadow: 0 34px 60px -30px rgba(38, 53, 31, .6), 4px 4px 0 #e3dfd0, 7px 7px 0 rgba(38, 53, 31, .1); }
.cover-front::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(208, 174, 67, .45); border-radius: 4px 10px 10px 4px; pointer-events: none; }
.cover-eyebrow { font-family: var(--f-head); font-weight: 600; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0; }
.cover-title { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; color: var(--cream); margin: 0; max-width: 14ch; }
.cover-map { width: 88%; height: auto; }
.cover-names { font-family: var(--f-head); font-weight: 600; font-size: .85rem; letter-spacing: .06em; color: var(--accent); margin: 0; }
.cover-back { transform: rotateY(180deg); border-radius: 16px 6px 6px 16px; background: linear-gradient(to left, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 8%), #dfe6d6; }
/* closed: only the cover shows, centred */
.book { transition: transform 1.1s cubic-bezier(.45, .05, .25, 1); }
.js .book:not(.play) { transform: translateX(-25%); }
.js .book:not(.play) .stories { box-shadow: none; }
.js .book:not(.play) .spread .page--left, .js .book:not(.play) .book-turn { visibility: hidden; }
/* open: the cover turns to the left and fades away, page 1 is there */
.book.play .book-cover { transform: rotateY(-180deg); opacity: 0; visibility: hidden; }
.js .book:not(.play) .book-cover { transition: none; }
@media (max-width: 900px) { .book-cover { display: none; } .js .book:not(.play) { transform: none; } .js .book:not(.play) .spread .page--left, .js .book:not(.play) .book-turn { visibility: visible; } }
/* the two faces of the cover a hair apart in depth, so the front always draws in front */
.cover-front { transform: translateZ(1px); }
.cover-back { transform: rotateY(180deg) translateZ(1px); }
/* faces swap exactly at the half of the turn (works even where backface-visibility is unreliable) */
.cover-back { opacity: 0; }
.book.play .cover-front { animation: faceOut 1.3s linear .25s both; }
.book.play .cover-back { animation: faceIn 1.3s linear .25s both; }
@keyframes faceOut { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes faceIn { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
/* the closed book is shown for a second, then it opens by itself */
.book.play { transition-delay: 1s; }
.book.play .book-cover { transition: transform 1.3s cubic-bezier(.45, .05, .25, 1) 1s, opacity .4s ease 2.2s, visibility 0s linear 2.6s; }
.book.play .cover-front { animation-delay: 1s; }
.book.play .cover-back { animation-delay: 1s; }
.book.play .spread .page--left, .book.play .book-turn { transition: visibility 0s linear 1.6s; }
/* opened by the reader: no waiting once they click */
.book.play { transition-delay: 0s; }
.book.play .book-cover { transition: transform 1.2s cubic-bezier(.45, .05, .25, 1) .05s, opacity .35s ease 1.15s, visibility 0s linear 1.5s; }
.book.play .cover-front, .book.play .cover-back { animation-delay: .05s; animation-duration: 1.2s; }
.book.play .spread .page--left, .book.play .book-turn { transition: visibility 0s linear .65s; }
/* the arrow on the cover, bottom right, like turning a page */
.book-open { bottom: 1.1rem; right: 1.1rem; z-index: 2; transform: translateZ(2px); background: var(--accent); border-color: var(--accent); color: var(--ink); width: 2.6rem; height: 2.6rem; font-size: 1.1rem; animation: nudgeX 2s ease-in-out infinite; }
.book-open:hover { background: var(--cream); border-color: var(--cream); }
@keyframes nudgeX { 0%, 100% { transform: translateZ(2px) translateX(0); } 50% { transform: translateZ(2px) translateX(4px); } }
.book.play .book-open { visibility: hidden; }
.js .book:not(.play) .book-cover .book-open { visibility: visible; }
/* closing: the cover turns back from the left onto the pages */
.js .book.closing:not(.play) .book-cover { transition: transform 1.1s cubic-bezier(.45, .05, .25, 1); }
.js .book.closing:not(.play) .cover-front { animation: faceIn 1.1s linear both; }
.js .book.closing:not(.play) .cover-back { animation: faceOut 1.1s linear both; }
.js .book.closing:not(.play) .spread.is-active .page--left { visibility: visible; }
/* while closing, the real left page is hidden: its copy is on the back of the turning cover */
.js .book.closing:not(.play) .spread.is-active .page--left { visibility: hidden; }
.cover-back { overflow: hidden; }
.cover-back > .page { height: 100%; border-radius: 8px 0 0 8px; }
.book.closing .book-open { visibility: hidden !important; }
.cover-back > .page--left { visibility: visible !important; }
.cover-back img { content-visibility: visible; }

/* ===== book motion v2: one movement at a time, flat perspective ===== */
.book { perspective: 6000px; }
/* opening: first the book slides into place, then the cover turns */
.book.play { transition: transform .5s cubic-bezier(.45, .05, .25, 1) 0s; }
.book.play .book-cover { transition: transform 1s cubic-bezier(.45, .05, .25, 1) .45s, opacity .3s ease 1.4s, visibility 0s linear 1.7s; }
.book.play .cover-front, .book.play .cover-back { animation-duration: 1s; animation-delay: .45s; }
.book.play .spread .page--left, .book.play .book-turn { transition: visibility 0s linear .95s; }
/* closing: first the cover turns back, then the book slides to the centre */
.js .book.closing:not(.play) { transition: transform .5s cubic-bezier(.45, .05, .25, 1) 1s; }
.js .book.closing:not(.play) .book-cover { transition: transform 1s cubic-bezier(.45, .05, .25, 1); }
.js .book.closing:not(.play) .cover-front { animation: faceIn 1s linear both; }
.js .book.closing:not(.play) .cover-back { animation: faceOut 1s linear both; }
/* the left page stays until the turning leaf covers it (the copy on the leaf starts exactly on top of it) */
.js .book.closing:not(.play) .spread.is-active .page--left { visibility: visible; animation: hideAt 1s linear both; }
@keyframes hideAt { 0%, 4% { opacity: 1; } 5%, 100% { opacity: 0; } }

/* ========================================================= 04.4 flipbook (rebuilt) */
.flip-wrap { position: relative; }
.flip-wrap > .stories { display: none; }
.fb { position: relative; perspective: 4200px; padding-bottom: 3.2rem; }
.fb-book { position: relative; width: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45, .05, .25, 1); }
.fb[data-state="0"] .fb-book { transform: translateX(-25%); }
.fb-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(calc((var(--n) - var(--i)) * 1px)); transition: transform .9s cubic-bezier(.45, .05, .25, 1); }
.fb-leaf.is-turned { transform: rotateY(-180deg) translateZ(calc((var(--n) - var(--i)) * 1px)); }
.fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.fb-front { border-radius: 0 14px 14px 0; background: linear-gradient(to right, rgba(38, 53, 31, .1), rgba(38, 53, 31, 0) 9%), #fbfaf5; box-shadow: 0 30px 50px -34px rgba(38, 53, 31, .5); }
.fb-back { transform: rotateY(180deg); border-radius: 14px 0 0 14px; background: linear-gradient(to left, rgba(38, 53, 31, .1), rgba(38, 53, 31, 0) 9%), #fbfaf5; box-shadow: 0 30px 50px -34px rgba(38, 53, 31, .5); }
.fb-face > .page, .fb-face > .story > .page { background: transparent; height: 100%; border-radius: 0; }
.fb-face > .story { height: 100%; }
.fb-back .page--left { display: grid; }
/* the cover */
.fb-cover { background: linear-gradient(to right, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 7%), var(--green); border-radius: 4px 14px 14px 4px; }
.cover-art { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; color: var(--cream); }
.cover-art::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(208, 174, 67, .45); border-radius: 3px 9px 9px 3px; pointer-events: none; }
.fb-open { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: var(--accent); color: var(--ink); font-size: 1.1rem; animation: nudgeX2 2s ease-in-out infinite; }
.fb-open:hover { background: var(--cream); }
@keyframes nudgeX2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* inside of the back cover */
.fb-leaf:last-child .fb-back { background: #e3e8db; }
/* arrows under the open book; hidden while closed (the cover has its own) */
.fb-arrow { position: absolute; bottom: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(38, 53, 31, .2); background: var(--paper); color: var(--ink); transition: background .25s, opacity .3s; }
.fb-arrow:hover { background: var(--accent); border-color: var(--accent); }
.fb-prev { left: 0; } .fb-next { right: 0; }
.fb[data-state="0"] .fb-arrow { opacity: 0; pointer-events: none; }
/* page numbers live inside the pages */
.fb .page-num { bottom: .7rem; }
@media (max-width: 900px) {
  .fb { display: none; }
  .flip-wrap > .stories { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .fb-book, .fb-leaf { transition: none; } }
/* flipbook v2: flat stacking, faces swapped at mid-turn */
.fb-book { perspective: 4200px; transform-style: flat; }
.fb { perspective: none; }
.fb-leaf { transform-style: flat; transform: rotateY(0deg); }
.fb-leaf.is-turned { transform: rotateY(-180deg); }
.fb-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
.fb-back { transform: scaleX(-1); visibility: hidden; }
.fb-leaf.show-back .fb-back { visibility: visible; }
.fb-leaf.show-back .fb-front { visibility: hidden; }
.fb .story { display: block !important; visibility: visible !important; opacity: 1 !important; height: 100%; animation: none !important; }
.fb .story { visibility: inherit !important; }
/* symmetric easing: at half the time the leaf is exactly edge-on, which is when its faces swap (no blink) */
.fb-leaf { transition: transform .9s cubic-bezier(.45, 0, .55, 1); }

/* 02.3 Beyond the farm: farm landscape behind, darkened in brand green so the cards and text read */
.scene--farm { position: relative; isolation: isolate; background: var(--ink); color: var(--cream); }
.scene-farm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; max-width: none; }
.scene--farm::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(38, 53, 31, .82) 0%, rgba(38, 53, 31, .55) 45%, rgba(38, 53, 31, .88) 100%); }
.scene--farm .eyebrow { color: var(--accent); }
.scene--farm .kicker { color: var(--cream); }
.scene--farm .eco-card { background: rgba(251, 250, 245, .96); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
.scene--farm .eco-note p { color: rgba(241, 239, 231, .88); }
.scene--farm .eco-note a { color: var(--accent); text-decoration-color: var(--accent); }
/* Beyond the farm: natural photo, neutral dark veil (no green tint) */
.scene--farm::before { background: linear-gradient(180deg, rgba(18, 20, 16, .68) 0%, rgba(18, 20, 16, .32) 45%, rgba(18, 20, 16, .72) 100%); }
/* Beyond the farm polish: darker only at the bottom where the paragraphs sit, sources on one line, a bit more compact */
.scene--farm::before { background: linear-gradient(180deg, rgba(18, 20, 16, .68) 0%, rgba(18, 20, 16, .3) 40%, rgba(18, 20, 16, .55) 65%, rgba(18, 20, 16, .86) 100%); }
.scene--farm .eco-note p { color: rgba(241, 239, 231, .94); font-weight: 400; }
.source--nowrap { white-space: nowrap; font-size: .7rem; }
.scene--farm .scene-intro { margin-bottom: clamp(16px, 2vw, 24px); }
.scene--farm .eco-note { margin-top: clamp(16px, 2vw, 24px); }
.scene--farm .eco-card { padding-block: clamp(16px, 1.9vw, 22px); }
.source--nowrap { white-space: normal; font-size: .66rem; text-wrap: balance; }

/* 05.1 Fertilizers opener over a photo (seedlings in dark soil), same natural treatment as Beyond the farm */
.scene--fert .scene-farm-bg { object-position: 60% 55%; }
.scene--fert::before { background: linear-gradient(90deg, rgba(18, 20, 16, .82) 0%, rgba(18, 20, 16, .6) 45%, rgba(18, 20, 16, .15) 80%); }
.scene--fert .eyebrow { color: var(--accent); }
.fert-open { max-width: 560px; }
.scene--fert .fert-intro { color: rgba(241, 239, 231, .92) !important; }
.scene--fert .key-statement { color: var(--cream); }
.scene--fert .news-link { color: var(--cream); }
.scene--fert .scene-farm-bg { left: -28%; width: 128%; object-position: 50% 50%; }
.fert-open { max-width: 520px; }
.scene--fert .scene-farm-bg { left: 0; width: 145%; }

/* the book reads as a policy casebook */
.cover-seal { width: 64px; height: 64px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cover-seal circle:first-child { stroke-width: 1; }
.cover-sub { font-family: var(--f-body); font-size: .88rem; color: rgba(241, 239, 231, .85); margin: -.4rem 0 0; max-width: 30ch; }
.cover-art { gap: .8rem; }
.cover-map { width: 78%; }
.policy-head { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 .9rem; padding-bottom: .8rem; box-shadow: inset 0 -1px 0 rgba(208, 174, 67, .45); }
.policy-head span { display: flex; flex-direction: column; font-family: var(--f-head); font-weight: 700; font-size: 1.12rem; line-height: 1.2; color: var(--green); letter-spacing: -.01em; }
.policy-head small { font-family: var(--f-head); font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #9a7d1f; margin-bottom: .2rem; }
.policy-ico { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: var(--green); fill: none; stroke: var(--cream); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: .1rem; }
/* no slide-in on first paint: the closed book is simply centred */
.fb:not(.is-ready) .fb-book, .fb:not(.is-ready) .fb-leaf { transition: none !important; }
.policy-head { box-shadow: none; padding-bottom: 0; margin-bottom: .8rem; }
.cover-seal { width: 52px; height: 52px; }
.cover-art { gap: .6rem; padding-block: 1.6rem; }
.policy-head .nw { display: inline; white-space: nowrap; font: inherit; color: inherit; }
/* policy title on the left page, above the photo; smaller photo; more air */
.page--left { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-content: start; row-gap: 1.1rem; column-gap: 1.2rem; }
.page--left .policy-head { grid-column: 1 / -1; margin: 0; }
.page--left .policy-head span { font-size: 1.2rem; line-height: 1.25; }
.page--left .policy-head small { margin-bottom: .35rem; }
.page--left .story-photo { max-height: 250px; max-width: 200px; aspect-ratio: 4 / 5; align-self: start; }
.page--left .res-visual { align-self: center; }
.page--right .story-lead { margin-top: .2rem; margin-bottom: .9rem; }
.page--right .panel-label { margin-top: 1rem; }
/* chart right next to the photo (photo column only as wide as the photo) */
.page--left { grid-template-columns: auto auto; justify-content: start; column-gap: clamp(18px, 2.4vw, 32px); }
.page--left .story-photo { width: 200px; }
.page--left { column-gap: clamp(32px, 4.2vw, 56px); }
.page--left { column-gap: clamp(46px, 6vw, 76px); }
/* one flat shadow under the book instead of one per (3D) leaf: no blocky artefacts */
.fb-front, .fb-back, .fb-cover { box-shadow: none !important; }
.fb-book::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 14px; z-index: 0; pointer-events: none;
  box-shadow: 0 30px 50px -30px rgba(38, 53, 31, .55); transition: left .9s cubic-bezier(.45, 0, .55, 1); }
.fb[data-state="0"] .fb-book::before { left: 50%; }
.fb-leaf { z-index: 1; }
/* keep every leaf pre-rendered on its own layer, so the page under the cover is already painted when it turns */
.fb-leaf { will-change: transform; }
.fb-face { will-change: transform; contain: paint; }
/* cover: the map adapts to the space left, so the seal on top is never cut off */
.cover-art { justify-content: center; overflow: hidden; }
.cover-art > * { flex: none; }
.cover-map { flex: 0 1 auto; min-height: 0; width: auto; max-width: 74%; max-height: 38%; object-fit: contain; }

/* back to the approved flipbook motion; the shadow lives outside the 3D book as one flat layer */
.fb-book::before { content: none !important; }
.fb-leaf { will-change: auto; }
.fb-face { will-change: auto; contain: none; }
.fb-shadow { position: absolute; top: 0; left: 0; width: 100%; border-radius: 14px; pointer-events: none; z-index: 0;
  box-shadow: 0 30px 50px -30px rgba(38, 53, 31, .55); transition: left .9s cubic-bezier(.45, .05, .25, 1), width .9s cubic-bezier(.45, .05, .25, 1); }
.fb[data-state="0"] .fb-shadow { left: 25%; width: 50%; }
.fb-book { z-index: 1; }
.fb:not(.is-ready) .fb-shadow { transition: none; }

/* book shadows exactly as in the approved version (one per page), but small and tight so they stay
   inside each page's own layer: no square edges */
.fb-shadow { display: none !important; }
.fb-front, .fb-back { box-shadow: 0 10px 14px -10px rgba(38, 53, 31, .45) !important; }
.fb-cover { box-shadow: 0 10px 14px -10px rgba(38, 53, 31, .5) !important; }
/* the question mark moves gently, like the arrow of the turn (same rhythm) */
.ask-mark:not(.quote-mark) { display: inline-block; animation: askNudge 2.8s ease-in-out infinite; }
@keyframes askNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 05.3 three ideas, three blocks */
.nutri-title { max-width: 30ch; margin-bottom: clamp(20px, 2.6vw, 34px); }
.nutri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 36px); counter-reset: nu; }
.nutri li { display: flex; flex-direction: column; gap: .6rem; }
.nutri .nutri-key { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--ink); margin: .2rem 0 0; }
.nutri p:not(.nutri-key) { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
@media (max-width: 800px) { .nutri { grid-template-columns: 1fr; } }

/* 05.6 three sourced figures as cards (same family as Beyond the farm) */
.shift-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.shift-card { gap: .3rem; }
.shift-card .big-num { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.shift-card .figure-desc { margin: 0 0 .5rem; }
.shift-card .source { margin-top: auto; padding-top: .6rem; }
.shift-viz, .shift-bars { height: 64px; margin-top: auto; }
.shift-viz .dots { display: block; height: 100%; background: radial-gradient(circle, var(--accent) 3.2px, transparent 3.6px) 0 0 / 14px 14px; -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent); opacity: .8; }
.shift-viz .field { display: block; height: 100%; border-radius: 10px; background: repeating-linear-gradient(100deg, var(--green) 0 6px, #6f8a5e 6px 12px); opacity: .85; }
.shift-bars { display: flex; gap: 12px; align-items: flex-end; }
.shift-bars div { display: flex; flex-direction: column; align-items: center; gap: .2rem; height: 100%; justify-content: flex-end; }
.shift-bars i { width: 34px; height: var(--h); background: var(--teal); border-radius: 4px 4px 0 0; }
.shift-bars i.is-gold { background: var(--accent); }
.shift-bars span { font-family: var(--f-head); font-weight: 600; font-size: .72rem; color: var(--ink-soft); }
/* grow once on arrival (re-armed above), like the other charts */
.shift-cards.play .shift-bars i { animation: barGrowY 1s var(--ease) .3s both; }
.shift-cards.play .shift-bars div + div i { animation-delay: .55s; }
.shift-cards.play .dots { animation: dotsIn 1.2s var(--ease) .2s both; }
.shift-cards.play .field { animation: barGrowX 1.2s var(--ease) .4s both; }
@keyframes dotsIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 800px) { .shift-cards { grid-template-columns: 1fr; } }
.shift-bars { margin-top: .4rem; }
/* Argentina: the two bars next to the figure, in true proportion (2023 = 1/1.689 of 2024) */
.shift-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.shift-bars { height: auto; margin: 0; gap: 8px; }
.shift-bars div { height: auto; }
.shift-bars b { display: flex; align-items: flex-end; height: 46px; }
.shift-bars i { width: 22px; }
.shift-card .source { margin-top: .4rem; }
.shift-cards { align-items: stretch; }
/* same layout in the three cards: figure on the same line, sources aligned at the bottom */
.shift-card { position: relative; }
.shift-head { display: block; }
.shift-head .shift-bars { position: absolute; top: clamp(18px, 2.2vw, 26px); right: clamp(18px, 2.2vw, 26px); }
.shift-card .source { margin-top: auto; padding-top: .8rem; }

/* 05.4 ending: one clear conclusion, the chain as steps, the caveat quiet */
.cmp-end { text-align: center; margin-top: clamp(18px, 2.2vw, 26px); }
.cmp-end .cmp-foot { font-size: 1.1rem; margin: 0 0 .8rem; }
.cmp-chain { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .5rem; max-width: 900px; }
.cmp-chain li { font-family: var(--f-head); font-weight: 600; font-size: .8rem; line-height: 1.3; color: var(--ink); background: var(--paper); border-radius: 99px; padding: .4rem .85rem; }
.cmp-chain li:last-child { background: var(--accent); }
.cmp-chain li + li::before { content: "→"; color: #a8871f; font-weight: 700; margin: 0 .55rem 0 -1.25rem; position: relative; }
.cmp-chain li + li { margin-left: .9rem; }
.cmp-end .cmp-note { font-size: .74rem; font-style: italic; color: var(--ink-soft); opacity: .8; margin: .7rem 0 0; }

/* 05.2 shocks: left text readable on green */
.scene--shock p { color: rgba(241, 239, 231, .92); font-weight: 400; }
.scene--shock .kicker { color: var(--cream); }
.cmp-chain { flex-wrap: nowrap; gap: 0; max-width: none; }
.cmp-chain li { position: relative; font-size: .74rem; padding: .38rem .75rem; white-space: nowrap; }
.cmp-chain li + li { margin-left: 1.7rem; }
.cmp-chain li + li::before { position: absolute; left: -1.3rem; top: 50%; transform: translateY(-50%); margin: 0; }
@media (max-width: 1000px) { .cmp-chain { flex-wrap: wrap; row-gap: .5rem; } .cmp-chain li { white-space: normal; } }
@media (max-width: 1000px) { .cmp-chain { flex-wrap: nowrap; } .cmp-chain li { white-space: nowrap; } }
@media (max-width: 1100px) { .cmp-chain li { font-size: .68rem; padding: .36rem .6rem; } .cmp-chain li + li { margin-left: 1.45rem; } .cmp-chain li + li::before { left: -1.1rem; } }
@media (max-width: 900px) { .cmp-chain { flex-wrap: wrap; row-gap: .5rem; } .cmp-chain li { white-space: normal; } }

/* 05.1: the key idea is part of the text, not a quote */
.scene--fert .key-statement { font-style: normal; box-shadow: none; padding-left: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--cream); margin: 0 0 1.4rem; }
/* Financial Times article card (the article links here, and this links back) */
.ft-card { display: inline-flex; align-items: center; gap: .9rem; padding: .7rem 1rem .7rem .75rem; border-radius: 14px; text-decoration: none;
  background: rgba(241, 239, 231, .1); border: 1px solid rgba(241, 239, 231, .25); color: var(--cream); transition: background .25s, border-color .25s; position: relative; }
.ft-card[href]:hover { background: rgba(241, 239, 231, .18); border-color: var(--accent); }
.ft-card[aria-disabled="true"] { cursor: default; }
.ft-mark { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 8px; display: grid; place-items: center; background: #fff1e5; color: #33302e; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1rem; letter-spacing: -.02em; }
.ft-text { display: flex; flex-direction: column; line-height: 1.25; }
.ft-text small { font-family: var(--f-head); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ft-text strong { font-family: var(--f-head); font-weight: 600; font-size: .95rem; color: var(--cream); }
.ft-cta { margin-left: .4rem; font-family: var(--f-head); font-weight: 600; font-size: .85rem; color: var(--ink); background: var(--accent); border-radius: 99px; padding: .4rem .85rem; white-space: nowrap; }
.ft-card[aria-disabled="true"] .ft-cta { opacity: .45; }
.ft-pending { position: absolute; top: -.7rem; right: .8rem; }
.ft-mark { background: rgba(241, 239, 231, .14); }
.ft-mark svg { width: 22px; height: 22px; fill: none; stroke: var(--cream); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ft-pending { position: static; margin-left: .2rem; color: var(--accent) !important; background: rgba(208, 174, 67, .16) !important; }
.ft-text small { white-space: nowrap; }

/* shock cascade: an icon per step (same line style as the rest of the site) */
.sh-box { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; text-align: left; padding: .6rem .9rem; }
.sh-box .sh-ico { grid-row: 1 / 3; }
.sh-pair .sh-box { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sh-pair .sh-box .sh-ico { grid-row: auto; margin-bottom: .1rem; }
.sh-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(241, 239, 231, .1); }
.sh-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--cream); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sh-ico svg .hot { stroke: var(--accent); }
.sh-box--hot .sh-ico svg { stroke: var(--accent); }
.sh-box--end .sh-ico { background: rgba(38, 53, 31, .14); }
.sh-box--end .sh-ico svg { stroke: var(--ink); }
.shock-card .sys-explain { min-height: 2.6em; margin-top: .6rem; }
.shock-card { padding-bottom: clamp(14px, 1.8vw, 20px); }
.sh-pair .sh-box { grid-template-columns: auto 1fr; text-align: left; justify-items: start; }
.sh-pair .sh-box .sh-ico { grid-row: 1 / 3; margin: 0; }
.sh-ico svg .hot { stroke-width: 2; }
.sh-box--end span { text-wrap: balance; }

/* the shock travels down once on arrival (re-armed above), then everything stays still */
.js .shock-flow:not(.play) > .sh-box, .js .shock-flow:not(.play) > .sh-pair, .js .shock-flow:not(.play) > .sh-arrow { opacity: .25; }
.shock-flow.play > * { animation: shockOn .5s ease both; }
.shock-flow.play > :nth-child(1) { animation-delay: .15s; }
.shock-flow.play > :nth-child(2) { animation-delay: .5s; }
.shock-flow.play > :nth-child(3) { animation-delay: .7s; }
.shock-flow.play > :nth-child(4) { animation-delay: 1.05s; }
.shock-flow.play > :nth-child(5) { animation-delay: 1.25s; }
.shock-flow.play > :nth-child(6) { animation-delay: 1.6s; }
.shock-flow.play > :nth-child(7) { animation-delay: 1.8s; }
@keyframes shockOn { from { opacity: .25; } to { opacity: 1; } }
.shock-flow.play .sh-box--end { animation: shockOn .5s ease 1.8s both, shockGlow 1.2s ease 2.1s both; }
@keyframes shockGlow { 0% { box-shadow: 0 0 0 0 rgba(208, 174, 67, .7); } 100% { box-shadow: 0 0 0 14px rgba(208, 174, 67, 0); } }
@media (prefers-reduced-motion: reduce) { .js .shock-flow > * { opacity: 1 !important; } }
/* faster cascade (~1s in total) */
.shock-flow.play > * { animation-duration: .3s; }
.shock-flow.play > :nth-child(1) { animation-delay: .05s; }
.shock-flow.play > :nth-child(2) { animation-delay: .22s; }
.shock-flow.play > :nth-child(3) { animation-delay: .32s; }
.shock-flow.play > :nth-child(4) { animation-delay: .5s; }
.shock-flow.play > :nth-child(5) { animation-delay: .6s; }
.shock-flow.play > :nth-child(6) { animation-delay: .78s; }
.shock-flow.play > :nth-child(7) { animation-delay: .88s; }
.shock-flow.play .sh-box--end { animation: shockOn .3s ease .88s both, shockGlow .9s ease 1.05s both; }

/* 05.3 as a path: Foundation → Approach → Goal */
.nutri { position: relative; }
.nutri li { position: relative; }
.nutri .en-ico { position: relative; z-index: 1; }
.nutri li:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 64px; right: calc(-1 * clamp(18px, 2.6vw, 36px) + 8px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); }
.nutri li:not(:last-child)::before { content: ""; position: absolute; top: 21px; right: calc(-1 * clamp(18px, 2.6vw, 36px) + 6px); border: 6px solid transparent; border-left: 9px solid var(--accent); border-right: 0; }
.nutri li:last-child .en-ico { background: var(--accent); }
.nutri li:last-child .en-ico svg { stroke: var(--ink); }
.nutri-step { font-family: var(--f-head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #9a7d1f; margin: .5rem 0 -.2rem; }
.nutri .nutri-key { font-size: 1.15rem; line-height: 1.3; }
.nutri p:not(.nutri-key):not(.nutri-step) { font-size: .86rem; }
/* the path draws once on arrival (re-armed above) */
.js .nutri:not(.play) li::after { transform: scaleX(0); }
.js .nutri:not(.play) li::before, .js .nutri:not(.play) li:not(:first-child) .en-ico { opacity: .3; }
.nutri li::after { transform-origin: left; transition: transform .45s ease; }
.nutri.play li:nth-child(1)::after { transition-delay: .15s; }
.nutri.play li:nth-child(2)::after { transition-delay: .65s; }
.nutri li::before, .nutri li .en-ico { transition: opacity .3s ease; }
.nutri.play li:nth-child(1)::before, .nutri.play li:nth-child(2) .en-ico { transition-delay: .55s; }
.nutri.play li:nth-child(2)::before, .nutri.play li:nth-child(3) .en-ico { transition-delay: 1.05s; }
@media (max-width: 800px) { .nutri li::after, .nutri li::before { display: none; } }
.nutri p.nutri-step { color: #9a7d1f; font-size: .7rem; }

/* ========================================================= 05.5 farm nutrient cycle */
.cycle-explorer { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.cycle-visual { max-width: 430px; width: 100%; justify-self: center; }
.farm-cycle { width: 100%; height: auto; border-radius: 26px; box-shadow: 0 30px 50px -30px rgba(38, 53, 31, .5); }
.fc-loop { fill: none; stroke: rgba(241, 239, 231, .75); stroke-width: 2; stroke-dasharray: 3 7; animation: cycDrift 6s linear infinite; }
.fc-arrows path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fc-zone, .fc-plant, .fc-roots { transition: opacity .5s var(--ease); }
.fc-glow { opacity: 0; transition: opacity .5s var(--ease); }
.farm-cycle[data-active="inoc"] .z-inoc .fc-glow, .farm-cycle[data-active="stim"] .z-stim .fc-glow,
.farm-cycle[data-active="comp"] .z-comp .fc-glow, .farm-cycle[data-active="soil"] .z-soil .fc-glow { opacity: 1; }
.farm-cycle:not([data-active="inoc"]) .fc-microbes { opacity: .35; }
.farm-cycle:not([data-active="comp"]) .z-comp > :not(.fc-glow) { opacity: .55; }
.farm-cycle:not([data-active="soil"]) .z-soil > :not(.fc-glow) { opacity: .5; }
.farm-cycle[data-active="stim"] .fc-plant { filter: brightness(1.18) saturate(1.2); }
.farm-cycle[data-active="inoc"] .fc-roots { filter: drop-shadow(0 0 3px rgba(255, 224, 138, .7)); }
.fc-steam path { animation: steam 3s ease-in-out infinite; }
.fc-steam path + path { animation-delay: 1.5s; }
@keyframes steam { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: .8; transform: translateY(-4px); } }
.fc-hot { cursor: pointer; outline: none; }
.fc-hot .hs-dot { fill: var(--cream); stroke: var(--accent); stroke-width: 3; transition: fill .3s; }
.fc-hot .hs-num { font-family: var(--f-head); font-weight: 700; font-size: 15px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.fc-hot.is-active .hs-dot, .fc-hot:hover .hs-dot, .fc-hot:focus-visible .hs-dot { fill: var(--accent); }
.fc-hot .hs-pulse { fill: var(--accent); opacity: .35; transform-box: fill-box; transform-origin: center; animation: ping 2.2s ease-out infinite; }
.sol-tabs button { font-size: .78rem; }
.sol-body p { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
@media (max-width: 900px) { .cycle-explorer { grid-template-columns: 1fr; } }
.farm-cycle:not([data-active="comp"]) .z-comp > :not(.fc-glow) { opacity: .8; }
.farm-cycle:not([data-active="soil"]) .z-soil > :not(.fc-glow) { opacity: .75; }
/* cascade: only the final yellow box animates (lights up with a glow on arrival); the rest is always on */
.js .shock-flow:not(.play) > .sh-box, .js .shock-flow:not(.play) > .sh-pair, .js .shock-flow:not(.play) > .sh-arrow { opacity: 1; }
.shock-flow.play > * { animation: none; }
.js .shock-flow:not(.play) > .sh-box--end { opacity: .35; }
.shock-flow.play .sh-box--end { animation: shockOn .4s ease .2s both, shockGlow .9s ease .45s both; }
/* path: icon, label and text centred in each column; the dashed line runs from icon to icon */
.nutri { --g: clamp(18px, 2.6vw, 36px); gap: var(--g); }
.nutri li { align-items: center; text-align: center; }
.nutri li:not(:last-child)::after { left: calc(50% + 34px); right: calc(-50% - var(--g) + 34px); }
.nutri li:not(:last-child)::before { right: calc(-50% - var(--g) + 30px); }
.nutri .nutri-key, .nutri p { text-wrap: balance; }

/* 05.5 v2: photo cycle (four photo circles on a loop, nutrients travelling round) */
.cycle-visual { max-width: 400px; }
.photo-cycle { position: relative; width: 100%; aspect-ratio: 1; }
.pc-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.photo-cycle .fc-loop { stroke: rgba(79, 109, 65, .45); stroke-width: 2; stroke-dasharray: 3 8; }
.photo-cycle .fc-arrows path { stroke: var(--accent); }
.pc-centre { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); }
.pc-centre svg { width: 34px; height: 34px; fill: none; stroke: #a8871f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.pc-node img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--cream), 0 14px 26px -14px rgba(38, 53, 31, .6); filter: saturate(.75) brightness(.95); transition: filter .35s, box-shadow .35s, transform .35s var(--ease); }
.pc-node b { position: absolute; top: -2px; left: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--ink); font-family: var(--f-head); font-size: .8rem; box-shadow: 0 0 0 2px var(--accent); transition: background .3s; }
.pc-node span { position: absolute; left: 50%; bottom: -1.5rem; transform: translateX(-50%); font-family: var(--f-head); font-weight: 600; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.pc-node:hover img { filter: none; }
.pc-node.is-active img { filter: none; box-shadow: 0 0 0 4px var(--accent), 0 0 0 10px rgba(208, 174, 67, .22), 0 18px 30px -14px rgba(38, 53, 31, .6); transform: scale(1.06); }
.pc-node.is-active b { background: var(--accent); }
.pc-node.is-active span { color: var(--ink); }
.pc-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.pc-node span { bottom: 10%; padding: .18rem .6rem; border-radius: 99px; background: rgba(251, 250, 245, .92); color: var(--ink); font-size: .74rem; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .5); }
.pc-node.is-active span { background: var(--accent); }
.pc-node { width: 31%; }
.sol-tabs { flex-wrap: nowrap; gap: .35rem; }
.sol-tabs button { padding: .38rem .7rem; white-space: nowrap; }
/* clean cycle icon; more air between title, prompt, buttons and text */
.pc-centre svg { width: 30px; height: 30px; stroke-width: 1.8; }
.cycle-explorer .types-title { margin-bottom: 1rem; }
.cycle-explorer .explore-prompt { margin-bottom: 1rem; }
.cycle-explorer .sol-tabs { margin-bottom: 2rem; }
.cycle-explorer .panel-title { margin-bottom: .8rem; }

/* country outline in each card (Natural Earth, static) */
.shift-map { position: absolute; top: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); width: 92px; height: 92px; }
.shift-map path { fill: rgba(208, 174, 67, .16); stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.shift-card .shift-bars { position: static; margin: .2rem 0 0; }
.shift-card .eco-card-label, .shift-card .big-num, .shift-card .figure-desc { position: relative; max-width: calc(100% - 96px); }
.shift-card .figure-desc { max-width: none; }
.shift-cards.play .shift-map path { animation: mapDraw 1.4s ease .15s both; }
@keyframes mapDraw { from { fill: rgba(208, 174, 67, 0); stroke-dasharray: 600; stroke-dashoffset: 600; } to { fill: rgba(208, 174, 67, .16); stroke-dasharray: 600; stroke-dashoffset: 0; } }
/* outlines smaller, in their own corner (no overlap with the text) */
.shift-map { width: 64px; height: 64px; top: clamp(16px, 2vw, 22px); }
.shift-card .eco-card-label, .shift-card .big-num { max-width: calc(100% - 70px); }
.photo-cycle .fc-arrows path { stroke-width: 2.4; }
/* even cards: bigger outlines, compact */
.shift-map { width: 84px; height: 84px; }
.shift-card .eco-card-label, .shift-card .big-num { max-width: calc(100% - 92px); }
/* header row tall enough for the outline, so the text always starts below it */
.shift-card .big-num { min-height: 3.6rem; display: flex; align-items: flex-end; }
.shift-card .figure-desc { margin-top: .5rem; }

/* 05.4 v2: each system as a line of steps (dots on a vertical line), no tiny ↓ */
.cmp-steps li + li::before { content: none; }
.cmp-steps { gap: .85rem; position: relative; padding-left: 1.6rem; }
.cmp-steps::before { content: ""; position: absolute; left: .42rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; }
.cmp-steps li { position: relative; }
.cmp-steps li::after { content: ""; position: absolute; left: -1.6rem; top: .3em; width: .85rem; height: .85rem; border-radius: 50%; }
/* input-dependent: the line fades, dots dim step by step */
.cmp--old .cmp-steps::before { background: linear-gradient(var(--teal), rgba(116, 150, 149, .15)); }
.cmp--old .cmp-steps li::after { background: var(--teal); box-shadow: 0 0 0 3px #dedcd0; }
.cmp--old .cmp-steps li:nth-child(2)::after { opacity: .75; } .cmp--old .cmp-steps li:nth-child(3)::after { opacity: .55; } .cmp--old .cmp-steps li:nth-child(4)::after { opacity: .4; }
.cmp--old .cmp-steps li:nth-child(2) { opacity: .9; } .cmp--old .cmp-steps li:nth-child(3) { opacity: .82; }
/* resilient: gold line, lit dots, the result highlighted */
.cmp--new .cmp-steps::before { background: var(--accent); }
.cmp--new .cmp-steps li::after { background: var(--accent); box-shadow: 0 0 0 3px var(--green); }
.cmp--new .cmp-steps li:last-child::after { width: 1.05rem; height: 1.05rem; left: -1.7rem; top: .22em; box-shadow: 0 0 0 3px var(--green), 0 0 0 7px rgba(208, 174, 67, .3); }
/* arrival: the green card's line grows and its dots light up in order (once, re-armed above) */
.js .compare:not(.play) .cmp--new .cmp-steps::before { transform: scaleY(0); }
.cmp--new .cmp-steps::before { transform-origin: top; transition: transform .9s ease .1s; }
.js .compare:not(.play) .cmp--new .cmp-steps li::after { opacity: .25; }
.js .compare:not(.play) .cmp--new .cmp-steps li { opacity: .55; }
.cmp--new .cmp-steps li, .cmp--new .cmp-steps li::after { transition: opacity .3s ease; }
.compare.play .cmp--new .cmp-steps li:nth-child(1), .compare.play .cmp--new .cmp-steps li:nth-child(1)::after { transition-delay: .1s; }
.compare.play .cmp--new .cmp-steps li:nth-child(2), .compare.play .cmp--new .cmp-steps li:nth-child(2)::after { transition-delay: .3s; }
.compare.play .cmp--new .cmp-steps li:nth-child(3), .compare.play .cmp--new .cmp-steps li:nth-child(3)::after { transition-delay: .5s; }
.compare.play .cmp--new .cmp-steps li:nth-child(4), .compare.play .cmp--new .cmp-steps li:nth-child(4)::after { transition-delay: .7s; }
.compare.play .cmp--new .cmp-steps li:nth-child(5), .compare.play .cmp--new .cmp-steps li:nth-child(5)::after { transition-delay: .9s; }
/* lighter ending so the comparison leads */
.cmp-end .cmp-foot { font-size: 1rem; }
.cmp-chain li { font-size: .7rem; padding: .32rem .7rem; }
@media (max-width: 1100px) { .cmp-chain li { font-size: .66rem; } }

/* ========================================================= 05.4 split soil (drag to compare) */
.soil-compare { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 3.4vw, 48px); align-items: center; margin-top: clamp(14px, 1.8vw, 22px); }
.ss-stage { position: relative; border-radius: 22px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; box-shadow: 0 26px 46px -30px rgba(38, 53, 31, .55); }
.soil-split { display: block; width: 100%; height: auto; }
.ss-tag { position: absolute; top: .8rem; font-family: var(--f-head); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 99px; pointer-events: none; }
.ss-tag--l { left: .8rem; background: rgba(241, 239, 231, .85); color: var(--ink-soft); }
.ss-tag--r { right: .8rem; background: var(--accent); color: var(--ink); }
.ss-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 0; outline: none; }
.ss-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--cream); box-shadow: 0 0 8px rgba(0, 0, 0, .35); }
.ss-handle span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--ink); font-family: var(--f-head); font-weight: 700; font-size: .95rem; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5), 0 0 0 4px rgba(241, 239, 231, .9); }
.ss-handle:focus-visible span { box-shadow: 0 0 0 4px var(--ink); }
/* living details */
.ss-leach { fill: #8fb0c9; animation: leach 2.8s ease-in infinite; animation-delay: var(--d); }
@keyframes leach { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(130px); opacity: 0; } }
.ss-wisps path { animation: steam 3s ease-in-out infinite; }
.ss-orbit { fill: #ffe08a; transform-box: view-box; animation: orbit 6s linear infinite; animation-delay: var(--d); filter: drop-shadow(0 0 3px rgba(255, 224, 138, .8)); }
@keyframes orbit { to { transform: rotate(360deg); } }
/* side panel: one system at a time, same size for both */
.ss-side .explore-prompt { margin-bottom: .8rem; }
.ss-panels { display: grid; }
.ss-panels .cmp { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility .35s; }
.ss-panels .cmp.is-shown { visibility: visible; opacity: 1; }
.js .ss-panels .cmp--new .cmp-steps::before { transform: none; }
.js .ss-panels .cmp--new .cmp-steps li, .js .ss-panels .cmp--new .cmp-steps li::after { opacity: 1; }
@media (max-width: 900px) { .soil-compare { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ss-leach, .ss-orbit, .ss-wisps path { animation: none; } }
.soil-compare { margin-top: .6rem; }
.soil-compare + .cmp-end { margin-top: 14px; }
/* split soil v2 details */
.ss-orbit { animation-duration: 7s; }
.ss-mic circle { animation: twinkle 3.4s ease-in-out infinite; }
.ss-mic circle:nth-child(3n) { animation-delay: -1.1s; } .ss-mic circle:nth-child(3n+1) { animation-delay: -2.2s; }
.ss-worm { animation: worm 5s ease-in-out infinite alternate; }
@keyframes worm { from { transform: translateX(0); } to { transform: translateX(-14px); } }
.ss-crop { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite alternate; }
.ss-deg .ss-crop { animation: none; }
@media (prefers-reduced-motion: reduce) { .ss-mic circle, .ss-worm, .ss-crop { animation: none; } }
/* more air: sky above the crops, between drawing and the closing line, inside the step lists */
.soil-compare { grid-template-columns: 1.08fr .92fr; }
.soil-compare + .cmp-end { margin-top: clamp(26px, 3vw, 38px); }
.ss-panels .cmp { padding: clamp(20px, 2.4vw, 30px); }
.ss-panels .cmp-title { margin-bottom: 1rem; }
.ss-panels .cmp-steps { gap: 1.05rem; padding-left: 1.9rem; }
.ss-panels .cmp-steps li::after { left: -1.9rem; }
.ss-panels .cmp--new .cmp-steps li:last-child::after { left: -2rem; }
.ss-spore { animation: twinkle 3s ease-in-out infinite; }
.ss-spore:nth-child(2n) { animation-delay: -1.2s; } .ss-spore:nth-child(3n) { animation-delay: -2.1s; }

/* split soil v3: microbes dance like in chapter 01, bees hover over the flowers */
.ss-dance { transform-box: fill-box; transform-origin: center; animation: swarm 2.8s ease-in-out infinite alternate; }
.ss-bee-in { animation: beeFly 3.2s ease-in-out infinite alternate; }
.ss-bee.b2 .ss-bee-in { animation-duration: 4s; animation-delay: -1.3s; }
.ss-bee.b3 .ss-bee-in { animation-duration: 3.6s; animation-delay: -2.2s; }
@keyframes beeFly { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, -6px); } 100% { transform: translate(-8px, 4px); } }
.ss-flower { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
.ss-flower:nth-of-type(2n) { animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) { .ss-dance, .ss-bee-in, .ss-flower { animation: none; } }

/* step lines drawn cleanly: one continuous line through the centre of every dot */
.ss-panels .cmp-steps { padding-left: 1.9rem; }
.ss-panels .cmp-steps::before { left: calc(.425rem - 1px); top: .65em; bottom: .65em; }
.ss-panels .cmp-steps li::after { left: -1.9rem; top: .25em; box-shadow: none; }
.ss-panels .cmp--old .cmp-steps li, .ss-panels .cmp--old .cmp-steps li::after { opacity: 1 !important; }
.ss-panels .cmp--old .cmp-steps::before { background: rgba(116, 150, 149, .45); }
.ss-panels .cmp--old .cmp-steps li:nth-child(1)::after { background: #6f8f8e; }
.ss-panels .cmp--old .cmp-steps li:nth-child(2)::after { background: #8aa4a3; }
.ss-panels .cmp--old .cmp-steps li:nth-child(3)::after { background: #a6b8b7; }
.ss-panels .cmp--old .cmp-steps li:nth-child(4)::after { background: #c2cdcc; }
.ss-panels .cmp--new .cmp-steps li:last-child::after { left: -2rem; top: .18em; box-shadow: 0 0 0 5px rgba(208, 174, 67, .3); }
/* readable chain: four equal steps, bigger text, each step may take two lines */
.cmp-chain { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 0 2rem; align-items: stretch; max-width: 980px; margin: 0 auto; }
.cmp-chain li, .cmp-chain li:last-child { display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal !important; text-wrap: balance;
  font-size: .9rem !important; line-height: 1.3; padding: .6rem 1rem !important; border-radius: 18px; margin: 0 !important; }
.cmp-chain li + li::before { left: -1.45rem !important; font-size: 1.05rem; }
@media (max-width: 800px) { .cmp-chain { grid-template-columns: 1fr; gap: 1.6rem 0; } .cmp-chain li + li::before { content: "↓"; left: 50% !important; top: -1.35rem !important; transform: translateX(-50%) !important; } }
.cmp-end .cmp-foot { margin-bottom: 1.4rem; }

/* 05.7 initiatives: where each one applies (small map), calmer card */
.init-intro { font-size: clamp(1.1rem, 1.7vw, 1.4rem); max-width: 46ch; line-height: 1.3; }
.init-head { display: grid; grid-template-columns: 1fr 190px; gap: 1.2rem; align-items: start; margin-bottom: 1rem; }
.init-panel .panel-title { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 0; }
.init-where { margin: 0; text-align: center; }
.init-map { width: 100%; height: auto; display: block; }
.init-map .im-c { fill: rgba(38, 53, 31, .14); stroke: var(--paper); stroke-width: .5; transition: fill .35s; }
.init-where[data-scope="br"] .im-br, .init-where[data-scope="eu"] .im-eu, .init-where[data-scope="af"] .im-af { fill: var(--accent); }
.init-where figcaption { font-family: var(--f-head); font-weight: 600; font-size: .74rem; color: var(--ink-soft); margin-top: .35rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.init-panel .ticks li { margin-bottom: .85rem; line-height: 1.55; }
@media (max-width: 700px) { .init-head { grid-template-columns: 1fr; } .init-where { max-width: 220px; } }
.init-head { grid-template-columns: 1fr 150px; }
.init-where figcaption { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.initiatives { margin-top: .4rem; }
/* the turn arrow and the question mark stay still */
.turn-arrow, .ask-mark, .ask-mark:not(.quote-mark) { animation: none !important; }
#fcFlow { display: none; }

/* About: lead sentence + a card that balances the text (calm, no motion) */
.about-grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
.about-lead { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.4; color: var(--ink); margin-bottom: 1rem; }
.about-card { background: var(--paper); border-radius: 22px; padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 1.4rem; margin-top: .4rem; }
.about-label { font-family: var(--f-head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #9a7d1f; margin: 0 0 .5rem; }
.about-name { font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 0; }
.about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.about-list li { font-family: var(--f-head); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
/* initiatives: an outline of the territory (or a globe for international ones) instead of the grey world map */
.init-head { grid-template-columns: 1fr 96px; }
.init-where { display: flex; flex-direction: column; align-items: center; }
.scope-ico { display: none; width: 76px; height: 76px; }
.init-where[data-scope="br"] .scope-ico[data-for="br"], .init-where[data-scope="eu"] .scope-ico[data-for="eu"],
.init-where[data-scope="af"] .scope-ico[data-for="af"], .init-where[data-scope="global"] .scope-ico[data-for="global"] { display: block; animation: fadeUp .4s var(--ease); }
.scope-ico path { fill: rgba(208, 174, 67, .16); stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.scope-globe { width: 64px; height: 64px; margin: 6px 0; }
.scope-globe circle, .scope-globe path { fill: none; stroke: var(--accent); stroke-width: 1.3; }
.scope-globe circle { fill: rgba(208, 174, 67, .16); }
/* one silhouette per territory: gold outline drawn underneath, opaque fill on top hides inner borders */
.scope-ico .sc-edge { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.scope-ico .sc-fill { fill: #f2ead2; stroke: none; }
.shift-cards.play .shift-map path, .shift-map path { animation: none !important; }

/* the little ↓ next to "Select… / Drag to compare" stays still */
.explore-prompt::after { animation: none !important; }
/* sections off screen pause their animations */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* About v3: title + lead on top, then three even columns (two paragraphs and the partners card) */
.about-top { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; margin-bottom: clamp(22px, 2.6vw, 34px); }
.about-top h2 { margin: 0; white-space: nowrap; }
.about-top .about-lead { margin: .2rem 0 0; max-width: 62ch; }
.about-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.about-row .body-soft { margin: 0; max-width: none; }
.about-row .about-card { margin: 0; }
@media (max-width: 860px) { .about-top, .about-row { grid-template-columns: 1fr; } .about-top h2 { white-space: normal; } }
.about-row .about-card .about-label { margin-bottom: .7rem; } .about-row .about-card { gap: 0; }
/* About: the two paragraphs stacked in one column, the partners card beside them */
.about-row { grid-template-columns: 2fr 1fr; }
.about-text .body-soft { margin: 0 0 .9rem; max-width: 70ch; }
.about-text .body-soft:last-child { margin-bottom: 0; }

/* About v4: everything stacked in one column; partners small and quiet on the right */
.about-v4 { display: grid; grid-template-columns: 1fr 200px; gap: clamp(28px, 5vw, 80px); align-items: start; }
.about-main h2 { margin-bottom: 1rem; }
.about-main .about-lead { max-width: 64ch; margin-bottom: 1rem; }
.about-main .body-soft { max-width: 72ch; margin: 0 0 .8rem; }
.about-partners { padding-top: .5rem; }
.about-partners .about-label { margin-bottom: .6rem; }
.about-partners .about-list { gap: .4rem; }
.about-partners .about-list li { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 800px) { .about-v4 { grid-template-columns: 1fr; } }

/* Hero box: only "About this work" link (3 Nov) */
.hero-box a { margin-top: 0; }

/* nav v3 (3 Nov): always fixed (transparent over the hero, solid after it) and larger */
.topnav, .topnav.is-solid { position: fixed; animation: none; }
.in-iframe .topnav, .in-iframe .topnav.is-solid { position: absolute; }
.topnav-inner { height: 76px; gap: 1.2rem; }
.topnav-brand { font-size: 1.3rem; }
.topnav-links a { font-size: 1.08rem; padding: .5rem .6rem; gap: .4rem; }
.tn-num { font-size: .85rem; }
@media (max-width: 1150px) {
  .topnav-inner { height: 70px; }
  .topnav-brand { font-size: 1.15rem; }
  .topnav-links a { font-size: .98rem; padding: .5rem .5rem; }
  .tn-num { font-size: .78rem; }
}
/* hero "About this work": larger and a little lower (3 Nov) */
.hero-box a { font-size: 1.12rem; }
/* 01 types diagram: softer root glow (3 Nov) */
.soil-diagram[data-active="stim"] .roots { filter: brightness(.95) drop-shadow(0 0 2px rgba(255, 224, 138, .28)); }
.soil-diagram[data-active="stim"] #fineRoots { stroke-opacity: .7; }
.soil-diagram[data-active="growth"] .roots { filter: brightness(1.05) drop-shadow(0 0 2px rgba(243, 215, 122, .3)); }
/* 3 · Biostimulants: roots step back (dimmer, no glow) so the soil nutrients are the focus (3 Nov) */
.soil-diagram[data-active="stim"] .roots { opacity: .55; filter: brightness(.85); }
.soil-diagram[data-active="stim"] #fineRoots { stroke-opacity: .45; }
/* 02.2 turn v2 (3 Nov): one sentence in the heading font, the rest below in the body font; stacked and centred */
.scene--statement:has(.turn) { text-align: center; }
.turn { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 28px); max-width: none; }
.turn-line { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.turn-but { align-items: flex-start; text-align: left; }
.turn-but li { font-family: var(--f-body); font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.5; }
.turn-but strong { font-weight: 600; }
@media (max-width: 900px) { .turn-line { white-space: normal; } .turn-line br { display: none; } }
.turn-but { align-self: center; max-width: none; }
/* hero "About this work": lower and a bit left, into the dark gap between the leaves (3 Nov) */
.hero-box { position: relative; top: 56px; left: -80px; }
@media (max-width: 900px) { .hero-box { top: 0; left: 0; } }
.turn-rest { margin: 0; text-align: center; font-family: var(--f-body); font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: var(--ink-soft); white-space: nowrap; }
.turn-rest strong { font-weight: 600; color: var(--green); }
@media (max-width: 900px) { .turn-rest { white-space: normal; } .turn-rest br { display: none; } }
/* 02.3 Beyond the farm v3 (3 Nov): each figure in its own card (the team felt the charts made unrelated numbers look connected) */
.eco-figs { grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.eco-figs .eco-card { border-radius: 18px; }
.eco-figs .figure-desc { font-size: .9rem; line-height: 1.5; }
.eco-note { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .eco-figs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .eco-figs { grid-template-columns: 1fr; } }
.eco-figs .source { white-space: nowrap; font-size: .72rem; }
.ss-tag-sub { font-weight: 500; opacity: .8; }
/* 05.4 resilient soil: water droplets held in the soil, a slow gentle shimmer (3 Nov) */
.ss-drop { fill: #8fb0c9; animation: dropShine 5s ease-in-out var(--d) infinite; }
@keyframes dropShine { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-drop { animation: none; } }
/* centring pass (3 Nov): side-by-side compositions start on the page margin so both outer edges match */
@media (min-width: 901px) {
  .explorer-visual, .cycle-visual { justify-self: start; }
  .cycle-visual { margin-left: 8px; }
  .support-top > div:first-child { padding-inline: 0; }
  section:has(#support-title) .eco-note p:first-child { padding-left: 0; }
}
@media (min-width: 901px) { .split--def .def-graphic { justify-self: end; display: flex; justify-content: flex-end; } }

/* ---------- Privacy dialog (short policy, opened from the form consent links) ---------- */
.privacy-dialog { width: min(92vw, 560px); border: 0; border-radius: var(--radius); padding: 2.4rem 2.2rem 2.2rem;
  background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 24px 60px rgba(38, 53, 31, .25); }
.in-iframe .privacy-dialog { margin-top: 0; }
.privacy-dialog::backdrop { background: rgba(38, 53, 31, .55); }
.privacy-dialog h2 { font-family: var(--f-head); font-size: 1.7rem; line-height: 1.15; margin: 0 1.5rem .9rem; }
.privacy-dialog p { margin: 0; line-height: 1.7; color: var(--ink-soft); }
.privacy-dialog a { color: var(--green); }
.privacy-close { position: absolute; top: .9rem; right: .9rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%;
  background: var(--cream-2); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.privacy-close:hover { background: var(--accent-soft); }

/* contact form: direct email line under the button */
.form-alt { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.form-alt a { color: var(--green); font-weight: 500; }

/* 05.7: China scope icon (doc 2.0) */
.init-where[data-scope="cn"] .scope-ico[data-for="cn"] { display: block; animation: fadeUp .4s var(--ease); }

/* 01.1 (doc 2.0, Renata): less space between the title and the definition, slightly larger text */
#what .chapter-head { margin-bottom: clamp(14px, 1.8vw, 22px); }
@media (min-width: 901px) { .split--def { align-items: start; } }
.split--def .definition { font-size: clamp(1.25rem, 1.85vw, 1.55rem); }
.split--def .definition-more { font-size: 1.12rem; }
.split--def .definition-note { font-size: .9rem; }
/* 02.1 cycle with 4 steps: labels above/below may sit slightly outside the viewBox */
.sys-cycle { overflow: visible; }
.duo-panel[data-panel="b"] > .sys-explain { margin-top: 18px; }

/* 05.2 cascade, 6 boxes (doc 2.0): one-line boxes centred, compact example text */
.shock-flow .sh-box strong { grid-row: 1 / 3; align-self: center; }
.shock-flow .sh-box { min-height: 0; }
.scene--shock .shock-card .sys-explain { font-size: .8rem; line-height: 1.45; }
.scene--shock .shock-card p.sys-explain { font-size: .8rem; line-height: 1.45; min-height: 5.8em; } /* fits the longest example (no resize on hover) */

/* ---------- 04.1 key stakeholders (doc 2.0): one diagram + detail card, no view buttons ---------- */
.eco-actors { padding: clamp(18px, 2.4vw, 30px) clamp(18px, 3vw, 40px); }
.eco-actors .kicker { margin: 0 0 .4rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.eco-actors .sys-actors { display: block; width: 100%; height: auto; }
.actor { cursor: pointer; outline: none; }
.actor-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(16px, 3vw, 44px); align-items: start;
  margin-top: .6rem; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(31, 44, 24, .55); }
.actor-name { font-family: var(--f-head); font-weight: 700; font-size: 1.12rem; line-height: 1.25; color: var(--accent); margin: 0 0 .35rem; }
.actor-role { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--light-soft); }
.actor-list li { font-size: .86rem; line-height: 1.45; margin-bottom: .3rem; color: var(--cream); }
.actor-list li::before { top: .5em; width: .45rem; height: .45rem; }
.actor-close { margin: clamp(12px, 1.6vw, 18px) auto 0; text-align: center; max-width: 52rem; font-family: var(--f-head); font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--cream); }
@media (max-width: 900px) {
  .actor-card { grid-template-columns: 1fr; }
  .eco-actors .sys-actors { overflow-x: auto; }
}
.eco-actors { border-radius: 28px; }
.eco-actors .sys-actors .lin-label { font-size: 13.5px; }
.scene--eco .chapter-head { margin-bottom: clamp(14px, 1.8vw, 22px); }
.actor-card { padding: .85rem 1.1rem; }
.scene--eco .actor-name { color: var(--accent); }
.actor.is-on .lin-label { fill: var(--accent); }
@media (min-width: 901px) { .actor-close { max-width: none; white-space: nowrap; font-size: clamp(.95rem, 1.3vw, 1.1rem); } }

/* ---------- 02.4 Beyond large corporations (doc 2.0): its own scene, three local opportunities feeding two outcomes ---------- */
.scene--local { background: var(--paper); }
.local { text-align: center; max-width: 960px; margin: 0 auto; }
.local .kicker { margin: 0 0 .7rem; }
.local-lead { max-width: 46rem; margin: 0 auto clamp(20px, 2.6vw, 32px); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.65; color: var(--ink-soft); }
.local-lead strong { color: var(--green-deep); font-weight: 600; }
.local-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); }
.local-tiles li { background: var(--cream); border-radius: 18px; padding: 1.1rem 1rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.local-ico { width: 54px; height: 54px; border-radius: 50%; background: var(--green); display: grid; place-items: center; margin-bottom: .3rem; }
.local-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.local-tiles strong { font-family: var(--f-head); font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.local-tiles span { font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
.local-join { display: block; width: 100%; height: 44px; }
.local-join path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: localFlow 2.4s linear infinite; }
@keyframes localFlow { to { stroke-dashoffset: -18; } }
.local-out { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; }
.local-out li { background: var(--accent); color: var(--ink); font-family: var(--f-head); font-weight: 700; font-size: 1rem; padding: .7rem 1.3rem; border-radius: 99px; }
.js .local:not(.is-visible) .local-tiles li, .js .local:not(.is-visible) .local-out li { opacity: 0; transform: translateY(10px); }
.local.is-visible .local-tiles li, .local.is-visible .local-out li { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.local.is-visible .local-tiles li:nth-child(2) { transition-delay: .12s; } .local.is-visible .local-tiles li:nth-child(3) { transition-delay: .24s; }
.local.is-visible .local-out li { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .local-join path { animation: none; } }
@media (max-width: 700px) { .local-tiles { grid-template-columns: 1fr; } .local-join { display: none; } .local-out { margin-top: 1rem; } }
.local-tiles li { padding: 1rem 1rem 1.05rem; }

/* 02.1 (doc 2.0, Leïla): title on the left, the system's one-line description on the right, switch centred below */
.scene--why .duo-top { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title cap" "sw sw"; align-items: center; column-gap: clamp(20px, 4vw, 56px); row-gap: clamp(14px, 1.8vw, 20px); }
.scene--why .duo-top > div:first-child { grid-area: title; }
.scene--why .duo-topcap { grid-area: cap; display: grid; margin: 0; font-size: clamp(.95rem, 1.25vw, 1.05rem); line-height: 1.55; color: rgba(241, 239, 231, .8); font-weight: 300; }
.scene--why .duo-topcap span { grid-area: 1 / 1; transition: opacity .35s var(--ease); }
.scene--why .duo[data-mode="a"] .duo-topcap [data-for="b"], .scene--why .duo[data-mode="b"] .duo-topcap [data-for="a"] { opacity: 0; visibility: hidden; }
.scene--why .duo-top .switch { grid-area: sw; justify-self: center; }
.scene--why .duo-panel .duo-caption { display: none; }
@media (max-width: 900px) { .scene--why .duo-top { grid-template-columns: 1fr; grid-template-areas: "title" "cap" "sw"; } }
/* 04.2 (doc 2.0): the share bar was removed, so the card closes up */
.support-card .source { margin-top: .9rem; }
.support-card { align-self: center; }
/* 02.4: the scene reads as one sentence, top to bottom (no repeated text) */
.local-lead { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink); margin-bottom: clamp(16px, 2vw, 24px); }
/* 02.4: pills sit under the two branch lines (centres at 1/4 and 3/4 of the row) */
.local-out { display: grid; grid-template-columns: 1fr 1fr; gap: 0; justify-items: center; }
.local-join path { stroke-linejoin: round; }
@media (max-width: 700px) { .local-out { grid-template-columns: 1fr; gap: .7rem; } }

/* 03.1 rings bigger (team request): more room for the diagram column */
@media (min-width: 901px) {
  #deliver .split:has(.rings-wrap) { grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3.5vw, 56px); }
  .rings--photo { max-width: 620px; }
}
/* 04.1 closing line: a statement, not a footnote (team request) */
.actor-close { font-weight: 700; line-height: 1.3; letter-spacing: -.01em; font-size: clamp(1.3rem, 2.2vw, 1.75rem) !important; white-space: normal !important; max-width: none; margin-top: clamp(18px, 2.4vw, 28px); }
@media (min-width: 901px) { .actor-close { white-space: nowrap !important; } }
@media (max-width: 900px) { .actor-close br { display: none; } }
.scene--eco .actor-close { color: var(--cream); }

/* ---------- 04.2 v2 (team: "super fea"): compact card level with the title, text flows evenly in two columns ---------- */
section:has(#support-title) .support-top { align-items: stretch; --g: clamp(16px, 2.4vw, 32px); gap: var(--g); }
section:has(#support-title) .support-card { align-self: stretch; justify-content: center; gap: .3rem; padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 26px); }
section:has(#support-title) .support-card .eco-card-label { margin: 0; font-size: 1.05rem; }
section:has(#support-title) .support-card .source { margin-top: .5rem !important; }
section:has(#support-title) .support-top > div:first-child { align-self: center; }
@media (min-width: 801px) {
  section:has(#support-title) .eco-note { display: block; columns: 2; column-gap: calc(clamp(16px, 2.4vw, 32px) + 2 * clamp(18px, 2.2vw, 26px)); }
  section:has(#support-title) .eco-note p { padding: 0 !important; margin: 0 0 .9rem; }
}
/* 04.2 card: content centred in the card (no empty right side) and air between the figure's letters */
section:has(#support-title) .support-card { align-items: center; text-align: center; }
section:has(#support-title) .support-card .big-num--support { letter-spacing: .01em; }
/* 02.3: only one note left (the other sentence became its own scene), so it runs across the whole width */
.scene--farm .eco-note { display: block; text-align: center; }
.scene--farm .eco-note p { max-width: none; padding-inline: 0; }
@media (max-width: 900px) { .br-desk { display: none; } }
/* 04.3 countries lede: always two lines on desktop */
@media (min-width: 901px) { .stories-lede { max-width: none; white-space: nowrap; } }
.story-text a { color: var(--green); text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* =========================================================
   Harmony pass (4 Nov 2026, after the full-page review)
   ========================================================= */
/* 1. one title scale: chapter titles = About / Stay connected; every scene title the same size; card titles stay smaller */
main .chapter-head h2, #about-title, #connect-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; }
main h3.kicker--big, #types-title, #practice-title { font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.2; }
.duo-top .kicker, .eco-actors .kicker, .scene--why .duo-top .kicker, .scene--eco .duo-top .kicker { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.init-lede { margin: .5rem 0 0; max-width: 62ch; font-size: 1rem; }

/* 2. one pill style for every chooser with more than two options (the 2-option switch keeps its own look) */
.cat-tabs button, .scene--explorer .cat-tabs button, .country-tabs button, .init-tabs button {
  border: 1px solid rgba(38, 53, 31, .25); background: transparent; color: var(--ink-soft); border-radius: 99px;
  padding: .42rem 1rem; font-size: .88rem; font-weight: 600; font-family: var(--f-body); line-height: 1.3; transition: background .25s, border-color .25s, color .25s; }
.cat-tabs button:hover, .country-tabs button:hover, .init-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.cat-tabs button[aria-selected="true"], .scene--explorer .cat-tabs button[aria-selected="true"], .country-tabs button[aria-selected="true"], .init-tabs button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--ink); }
.init-tabs button { text-align: left; padding: .5rem 1.1rem; }

/* 3. easier reading: regular weight and a darker soft ink for body text */
:root { --ink-soft: rgba(38, 53, 31, .8); --light-soft: rgba(241, 239, 231, .9); }
body { font-weight: 400; }

/* 4. first step is shown from the start, so the hint line is no longer a placeholder */
.sys-explain { font-style: normal; }

/* 5. Beyond the farm: the card with the long explanation gets more width, so the four cards end at similar heights */
@media (min-width: 901px) { .eco-figs { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
/* 05.4 pathway (team: "aire"): more breathing room inside the steps and around the row */
.cmp-end { margin-top: clamp(22px, 3vw, 36px); }
.cmp-end .cmp-foot { margin-bottom: 1.4rem; }
.cmp-end .cmp-chain li { padding: .85rem 1.4rem !important; line-height: 1.4; }
.cmp-end .cmp-note { margin-top: 1.2rem; }
/* title spacing (one rule): title → its text ≈ 10px; title → a diagram, photo or cards ≈ 24px */
main h3.kicker--big { margin-bottom: .75rem !important; }
#eff-title, #eco-title, #nutri-title { margin-bottom: clamp(18px, 2.4vw, 26px) !important; }
#stories-title + .stories-lede, .stories-lede { margin-top: .75rem; }

/* Types explorer: the four type pills stay on one line on desktop */
@media (min-width: 901px) {
  .scene--explorer .cat-tabs { flex-wrap: nowrap; }
  .scene--explorer .cat-tabs button { white-space: nowrap; padding: .42rem .8rem; font-size: .84rem; }
}

/* Stay connected: fact sheet download, on the title row */
.connect .scene-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.connect .scene-intro .connect-title { margin: 0; }
.fs-download { border: 1px solid var(--accent); background: var(--accent); color: var(--ink); white-space: nowrap;
  padding: .55rem 1.15rem; font-size: .9rem; font-weight: 600; transition: background .25s, border-color .25s, color .25s; }
.fs-download:hover { background: #ddbf5e; border-color: #ddbf5e; color: var(--ink); }
.fs-meta { font-size: .72rem; font-weight: 500; letter-spacing: .08em; opacity: .7; margin-left: .2rem; }
.connect .scene-intro { max-width: none; flex-wrap: nowrap; }
@media (max-width: 900px) { .connect .scene-intro { flex-wrap: wrap; } }
/* the green scene turns --ink-soft light; the form cards are cream, so their small print needs dark ink */
.connect .form-alt { color: rgba(38, 53, 31, .8); }

/* Hero: fact sheet download under the intro text, as an outlined pill (yellow outline, see-through so the photo shows) */
.hero-dl { display: flex; width: fit-content; align-items: center; gap: .45rem; margin: 1.1rem auto 0; border: 1.5px solid var(--accent); border-radius: 99px;
  padding: .65rem 1.5rem; background: transparent; color: var(--accent); font-family: var(--f-head); font-weight: 700; font-size: 1rem;
  text-decoration: none; white-space: nowrap; transition: background .25s, color .25s; }
.hero-dl:hover { background: var(--accent); color: var(--ink); }
/* About this work sits on the same line as the fact sheet pill (both at the bottom of the hero text) */
@media (min-width: 901px) { .hero-box { top: 0; margin-bottom: 6.3px; } }

/* 03 rings: the benefit list column is just wide enough for its short items to sit on one line */
@media (min-width: 901px) {
  #deliver .split:has(.rings-wrap) { grid-template-columns: minmax(0, 1.4fr) minmax(410px, 1fr); }
  #deliver .ticks li { font-size: 14px; }
}

/* 02.1 v3 (team mock-up, 5 Nov): no visible title; the switch goes on top and the system's sentence sits centred under it */
.scene--why .duo-top { grid-template-columns: 1fr; grid-template-areas: "sw" "cap"; justify-items: center; }
.scene--why .duo-top > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene--why .duo-topcap { text-align: center; max-width: 62ch; }
@media (max-width: 900px) { .scene--why .duo-top { grid-template-areas: "sw" "cap"; } }
/* FT card: Gonzalo's role under his name */
.ft-role { margin-top: .15rem; font-size: .78rem; line-height: 1.35; color: rgba(241, 239, 231, .75); max-width: 34ch; }
.ft-card { max-width: 100%; flex-wrap: wrap; row-gap: .6rem; }
.ft-text { flex: 1 1 240px; min-width: 0; }
.ft-role { max-width: none; }
@media (max-width: 600px) { .ft-text small { white-space: normal; } }

/* ===================== PHONE PASS (5 Nov): everything readable and inside the screen at ~390px ===================== */
@media (max-width: 700px) {
  /* 04.2: one column of text */
  section:has(#support-title) .eco-note { display: block; columns: auto; }
  section:has(#support-title) .eco-note p { padding: 0 !important; margin: 0 0 .9rem; }
  /* countries book: one page under the other, photo and figure side by side on the left page */
  .stories .story.spread { grid-template-columns: 1fr !important; grid-template-rows: auto; }
  .spread > .page { height: auto; }
  .page--left { grid-template-columns: 1fr 110px; column-gap: .9rem; }
  .page--left .story-photo { max-height: 220px; }
  .page--left .res-visual { width: 110px; }
  .page--left, .page--right { border-radius: 10px; }
  .page--right { margin-top: 10px; }
  /* 05.5 photo cycle: the circle fits the screen */
  .cycle-explorer { grid-template-columns: minmax(0, 1fr) !important; }
  .cycle-explorer > * { min-width: 0; }
  .photo-cycle { min-width: 0; }
  .cycle-visual { max-width: 100% !important; margin-left: 0 !important; justify-self: center !important; }
}
/* system diagrams: on desktop the wrapper is invisible; on a phone the drawing keeps a readable size and slides sideways */
.sys-scroll { min-width: 0; }
@media (max-width: 700px) {
  .sys-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .sys-scroll::-webkit-scrollbar { display: none; }
  .sys-scroll > svg.sys { display: block; width: 720px !important; max-width: none !important; }
  .sys-scroll::after { content: "Swipe to see more →"; display: block; position: sticky; left: 0; width: max-content; margin-top: .3rem;
    font-family: var(--f-head); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: .85; }
}
/* 03 rings: name tabs for phones only */
.ring-tabs { display: none; }
@media (max-width: 700px) {
  .ring-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 1rem; }
  .ring-tabs .ring-label.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .rings--photo g.ring-label { display: none; }
  .rings--photo { max-width: 300px; margin-inline: auto; display: block; }
  /* 05.3 compare: the drawing on top, the two lists below it */
  .soil-compare { grid-template-columns: minmax(0, 1fr) !important; }
  /* 05.5 solution tabs wrap instead of running off the screen */
  .scene--explorer .sol-tabs, .sol-tabs { flex-wrap: wrap !important; }
  /* 05 opener: a darker veil so the text reads over the seedling photo */
  .scene--fert::before { background: linear-gradient(180deg, rgba(18, 20, 16, .78) 0%, rgba(18, 20, 16, .62) 50%, rgba(18, 20, 16, .88) 100%) !important; }
}

/* Justified text blocks (team request, 6 Nov): every left-aligned paragraph of running text; centred lines, headings,
   figures and lists keep their alignment. Hyphenation keeps the word gaps even, mostly on phones. */
.hero-sub, .about-lead, .body-soft, .chapter-sub, .definition, .definition-more, .definition-note, .figure-desc,
.lede, .story-lead, .story-text, .actor-role, .panel-body p, .eco-note p, .split--shock > .reveal > p:not([class]) {
  text-align: justify; text-justify: inter-word; hyphens: manual; -webkit-hyphens: manual; text-wrap: wrap;
}
@media (max-width: 700px) {
  .hero-sub, .about-lead, .body-soft, .chapter-sub, .definition, .definition-more, .definition-note, .figure-desc,
  .lede, .story-lead, .story-text, .actor-role, .panel-body p, .eco-note p, .split--shock > .reveal > p:not([class]) {
    hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
  }
}
/* FT card: while the article link is missing, "Coming soon" sits where the button goes (the button comes back with the link) */
.ft-card[aria-disabled="true"] .ft-cta { display: none; }
.ft-card[aria-disabled="true"] .ft-pending { margin-left: .4rem; align-self: center; }
/* justified text in the narrow explorer panels: long words may break so the gaps stay even (desktop too) */
.panel-body p, .story-text, .figure-desc { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
/* About: Ambition Loop logo above the supporters */
.about-logo { display: block; width: 190px; max-width: 100%; height: auto; margin: 0 0 1.6rem; }
@media (max-width: 700px) { .about-logo { width: 160px; margin-bottom: 1.2rem; } }
/* About: Ambition Loop link, same thin gold underline as the source links */
.about-lead a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.about-lead a:hover { color: var(--green); }
.about-logo-link { display: inline-block; transition: opacity .25s; }
.about-logo-link:hover { opacity: .8; }
/* FT card: the button lines up with the name and role (not with the whole block incl. the label above) */
@media (min-width: 601px) { .ft-cta { position: relative; top: 11px; } }
.about-partners .about-logo { margin-bottom: 0; }