/* =================================================================
   THERMAL COMPOST SYSTEMS — Stylesheet
   Style: Organic Biophilic, premium & professional
   Palette: deep forest green + warm ember accent on cream
   ================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Forest greens */
  --forest-900: #122019;
  --forest-800: #173028;
  --forest-700: #1B3A2C;
  --forest-600: #2F6B4F;
  --forest-100: #DDE7DF;

  /* Living greens (sprout/compost) */
  --green-500: #4E9F6E;
  --green-400: #6FBE8B;

  /* Ember / warmth (heat + CTA) */
  --ember-700: #8A4413;
  --ember-600: #A65015;
  --ember-500: #C56B1E;
  --ember-400: #E08A3A;
  --ember-100: #F4D9BC;

  /* Neutrals */
  --cream: #F7F2E8;
  --cream-card: #FCFAF4;
  --ink: #1A1F1B;
  --muted: #59685D;
  --line: rgba(27, 58, 44, .12);
  --line-strong: rgba(27, 58, 44, .22);
  --white: #ffffff;

  /* Semantic */
  --bg: var(--cream);
  --surface: var(--cream-card);
  --text: var(--ink);
  --text-muted: var(--muted);
  --primary: var(--ember-600);
  --primary-hover: var(--ember-700);
  --on-primary: #ffffff;
  --accent: var(--forest-700);

  /* Typography */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale (8pt) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;

  /* Radii */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(18, 32, 25, .06), 0 2px 8px rgba(18, 32, 25, .05);
  --sh-md: 0 4px 12px rgba(18, 32, 25, .08), 0 12px 32px rgba(18, 32, 25, .07);
  --sh-lg: 0 12px 28px rgba(18, 32, 25, .12), 0 28px 64px rgba(18, 32, 25, .12);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: 240ms;

  --container: 1140px;
  --header-h: 72px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

::selection { background: var(--ember-400); color: #2a160a; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.section { padding-block: clamp(36px, 4.5vw, 56px); }
.section--alt { background: linear-gradient(180deg, #F1EADC 0%, var(--cream) 100%); }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 1000;
  background: var(--forest-700); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { left: 16px; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember-600);
  margin-bottom: var(--sp-3);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--forest-800);
}

.section-lead {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: 1.075rem;
  max-width: 60ch;
}

.section-head { max-width: 760px; margin: 0 auto var(--sp-7); text-align: center; }
.section-head .section-lead { margin-inline: auto; }
.section-head--left { margin-inline: 0; text-align: left; }
/* lopende tekst hoort bij de kop erboven: dan is de volle sectie-afstand te veel */
.section-head--left:has(+ .case-prose) { margin-bottom: var(--sp-4); }
.section-head--left .section-lead { margin-inline: 0; }

.text-accent {
  color: var(--ember-600);
  font-style: italic;
}

.inline-link {
  color: var(--ember-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.inline-link:hover { color: var(--ember-700); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 1rem;
  padding: 14px 26px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-sm { padding: 10px 18px; font-size: .95rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 6px 18px rgba(166, 80, 21, .28);
}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(166, 80, 21, .34); }

.btn-ghost {
  background: transparent;
  color: var(--forest-700);
  border-color: var(--line-strong);
}
.btn-ghost svg { transition: transform var(--dur) var(--ease-out); }
.btn-ghost:hover { background: rgba(27,58,44,.05); border-color: var(--forest-600); }
.btn-ghost:hover svg { transform: translateX(4px); }

.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ember-400);
  outline-offset: 2px;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(247, 242, 232, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-4); width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-logo { height: 42px; width: auto; display: block; }
.brand-fallback { display: none; align-items: center; gap: 10px; }
.brand.no-logo .brand-fallback { display: inline-flex; }
.brand-mark { color: var(--forest-600); display: inline-flex; }
.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--forest-800);
}

.nav-links { display: flex; gap: var(--sp-4); margin-left: auto; }
.nav-links a {
  position: relative; font-weight: 500; font-size: .97rem; color: var(--forest-800);
  padding: 6px 2px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--ember-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ---- "Voor wie"-dropdown ---- */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop-trigger svg { transition: transform var(--dur) var(--ease-out); }
.nav-drop:hover .nav-drop-trigger svg,
.nav-drop:focus-within .nav-drop-trigger svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  min-width: 232px; padding: 8px; margin-top: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  display: grid; gap: 2px; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
/* onzichtbare brug, zodat de muis van knop naar menu kan zonder dat het sluit */
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-drop-menu a {
  padding: 9px 12px; border-radius: var(--r-sm); font-size: .93rem; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav-drop-menu a::after { display: none; }   /* geen onderstreping in het menu */
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible { background: var(--forest-100); color: var(--forest-800); }
@media (prefers-reduced-motion: reduce) { .nav-drop-menu { transition: none; } }

/* subitems in het mobiele menu */
.mobile-menu .mobile-sub { padding-left: var(--sp-4); font-size: .95rem; color: var(--text-muted); }

.nav-cta { margin-left: 4px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; background: none; border: 0; margin-left: auto;
  /* minstens 44px, anders is het met een duim lastig raken */
  width: 44px; height: 44px; padding: 0;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--forest-800); border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
  background: var(--cream-card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-md);
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-3) clamp(20px, 5vw, 40px) var(--sp-4);
}
.mobile-menu a { padding: 14px 4px; font-weight: 500; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
.mobile-menu a.btn { margin-top: var(--sp-3); border-bottom: 0; justify-content: center; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(44px, 6vw, 84px) clamp(32px, 4vw, 56px); }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(224, 138, 58, .16), transparent 70%),
    radial-gradient(55% 45% at 6% 92%, rgba(78, 159, 110, .18), transparent 70%),
    radial-gradient(70% 60% at 50% -10%, rgba(27, 58, 44, .06), transparent 60%);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--forest-800);
  margin-bottom: var(--sp-4);
}
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-muted); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.hero-points li { display: flex; align-items: center; gap: 8px; font-size: .96rem; font-weight: 500; color: var(--forest-800); }
.hero-points svg { color: var(--green-500); flex-shrink: 0; }

/* Hero visual */
.hero-visual { position: relative; }
.hero-figure { position: relative; }
.photo-slot--hero {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  background:
    linear-gradient(160deg, #EAF1EA 0%, #F6EFE2 100%);
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(255,255,255,.6);
  display: grid; place-items: center;
  overflow: hidden;
}
.photo-slot--hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-illustration { width: 92%; height: auto; }

.hero-badge {
  position: absolute; right: -8px; bottom: -18px;
  background: var(--forest-700); color: #fff;
  border-radius: var(--r-md);
  padding: 14px 18px; box-shadow: var(--sh-md);
  display: flex; flex-direction: column; line-height: 1.1;
}
.hero-badge-num { font-family: var(--font-serif); font-weight: 600; font-size: 1.7rem; }
.hero-badge-label { font-size: .78rem; opacity: .82; letter-spacing: .02em; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  z-index: 1;
}
.hero-scroll svg { animation: bob 1.8s var(--ease-in-out) infinite; }
/* Op telefoon staat de hero rechtop en komt het icoontje over de opsomming heen.
   Daar is het ook overbodig, want scrollen spreekt daar vanzelf. */
@media (max-width: 880px) { .hero-scroll { display: none; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Hero illustration animations */
.ill-heat .wave { opacity: 0; animation: rise 2.6s var(--ease-in-out) infinite; }
.ill-heat .w2 { animation-delay: .5s; }
.ill-heat .w3 { animation-delay: 1s; }
@keyframes rise {
  0% { opacity: 0; transform: translateY(8px); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}
.ill-pipe { stroke-dashoffset: 0; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.ill-sprout { transform-origin: 160px 214px; animation: sway 4s var(--ease-in-out) infinite; }
@keyframes sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* ---------- Trust strip ---------- */
.trust { padding-block: var(--sp-6); border-block: 1px solid var(--line); background: var(--cream-card); }
.trust-label { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: var(--sp-4); }
.trust-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-4) var(--sp-7);
}
.trust-logo {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem;
  color: var(--forest-700); opacity: .55;
  transition: opacity var(--dur) var(--ease-out);
}
.trust-logo:hover { opacity: 1; }

/* ---------- Steps ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  counter-reset: step;
}
.steps--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.step {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.step-num {
  font-family: var(--font-serif); font-weight: 600; font-size: .9rem;
  color: var(--ember-600); letter-spacing: .05em;
}
.step-icon {
  width: 52px; height: 52px; border-radius: 14px; margin: var(--sp-3) 0 var(--sp-3);
  display: grid; place-items: center;
  background: var(--forest-100); color: var(--forest-700);
}
.step h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; color: var(--forest-800); margin-bottom: 6px; }
.step p { font-size: .95rem; color: var(--text-muted); }

/* ---------- Value grid ---------- */
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.value-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.value-card--warmth { background: linear-gradient(165deg, #FBEFE0 0%, #FCFAF4 70%); }
.value-card--compost { background: linear-gradient(165deg, #E7F0E8 0%, #FCFAF4 70%); }
.value-icon {
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  margin-bottom: var(--sp-3);
}
.value-card--warmth .value-icon { background: var(--ember-100); color: var(--ember-700); }
.value-card--compost .value-icon { background: var(--forest-100); color: var(--forest-700); }
.value-card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.55rem; color: var(--forest-800); margin-bottom: 8px; }
.value-card > p { color: var(--text-muted); }
.value-list { margin-top: var(--sp-4); display: grid; gap: 10px; }
.value-list li {
  position: relative; padding-left: 28px; font-weight: 500; color: var(--forest-800); font-size: .97rem;
}
.value-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 9px;
  border-left: 2.5px solid var(--green-500); border-bottom: 2.5px solid var(--green-500);
  transform: rotate(-45deg);
}

/* ---------- Audience (image-led cards) ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.audience-card {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; padding: 0;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.audience-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.audience-card:focus-visible { outline: 3px solid var(--ember-400); outline-offset: 3px; }
.audience-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
}
/* De kaart moet passen op het scherm waar hij op staat, anders valt de regel
   "Bekijk deze toepassing" onder de vouw en ziet niemand dat de kaart aanklikbaar is.
   Hoe lager het scherm, hoe lager de foto. Boven de 940px past de staande foto. */
@media (min-width: 881px) and (max-height: 940px) {
  .audience-media { aspect-ratio: 1 / 1; }
}
@media (min-width: 881px) and (max-height: 820px) {
  .audience-media { aspect-ratio: 4 / 3; }
}
.audience-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.audience-card:hover .audience-media img { transform: scale(1.06); }
.audience-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,32,25,.82) 0%, rgba(18,32,25,.18) 45%, transparent 70%);
}
.audience-tag {
  position: absolute; left: 18px; bottom: 16px; z-index: 1;
  font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.audience-body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; }
.audience-body p { color: var(--text-muted); font-size: .96rem; }
.audience-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp-3);
  font-weight: 600; font-size: .92rem; line-height: 1; color: var(--ember-600);
}
.audience-more svg { display: block; flex-shrink: 0; transition: transform var(--dur) var(--ease-out); }
.audience-card:hover .audience-more svg { transform: translateX(4px); }

/* ---------- Het systeem ---------- */
/* start (niet center) zodat beide kolomlabels op dezelfde lijn beginnen */
.system-layout { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.system-media { position: relative; }
/* rechterkolom van "Het systeem": wat het aan werk kost */
.system-work { display: grid; gap: var(--sp-3); }
.system-work .step { padding: var(--sp-4); }
.system-work .step-icon { width: 42px; height: 42px; border-radius: 12px; margin: var(--sp-2) 0; }
.system-work .step h3 { font-size: 1.1rem; }
.system-photo { margin: 0; }
.system-photo--main { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 3 / 2; }
.system-photo--main img { width: 100%; height: 100%; object-fit: cover; }
.system-photo--main figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 16px;
  color: #fff; font-size: .9rem; font-weight: 500;
  background: linear-gradient(transparent, rgba(18,32,25,.82));
}
.system-photo--inset {
  position: absolute; right: -20px; bottom: -32px; width: 48%; aspect-ratio: 3 / 2;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-lg);
  border: 5px solid var(--cream);
}
.system-photo--inset img { width: 100%; height: 100%; object-fit: cover; }

.spec-list { margin: var(--sp-5) 0 var(--sp-5); border-top: 1px solid var(--line); }
.spec-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.spec-row dt { font-weight: 600; color: var(--forest-700); font-size: .95rem; }
.spec-row dd { color: var(--text-muted); font-size: .97rem; }

/* ---------- Stats band ---------- */
.stats { background: var(--forest-800); color: #fff; padding-block: clamp(48px, 7vw, 88px); position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 80% at 85% 20%, rgba(224,138,58,.18), transparent 70%);
}
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); text-align: center; }
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-num { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: #fff; display: block; white-space: nowrap; }
.stat-unit { font-size: .48em; font-weight: 600; margin-left: .1em; }
.stat-label { display: block; margin-top: 10px; font-size: .92rem; color: rgba(255,255,255,.72); }

/* ---------- Benefits ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.benefit {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: transparent; }
.benefit-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ember-100); color: var(--ember-700); margin-bottom: var(--sp-3);
}
.benefit h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.18rem; color: var(--forest-800); margin-bottom: 6px; }
.benefit p { font-size: .95rem; color: var(--text-muted); }

/* ---------- Quote ---------- */
.quote-section { background: linear-gradient(180deg, var(--cream) 0%, #F1EADC 100%); }
.quote { max-width: 820px; margin-inline: auto; text-align: center; }
.quote-mark { color: var(--ember-400); margin: 0 auto var(--sp-3); opacity: .85; }
.quote blockquote p {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.32; letter-spacing: -.01em;
  color: var(--forest-800);
}
.quote figcaption { margin-top: var(--sp-4); }
.quote-name { display: block; font-weight: 600; color: var(--forest-800); }
.quote-role { display: block; font-size: .92rem; color: var(--text-muted); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-list { display: grid; gap: var(--sp-3); }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 4px 22px; transition: box-shadow var(--dur), border-color var(--dur);
}
.faq-item[open] { box-shadow: var(--sh-sm); border-color: var(--line-strong); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; color: var(--forest-800);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  border-right: 2.5px solid var(--ember-600); border-bottom: 2.5px solid var(--ember-600);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease-out); margin-bottom: 4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.faq-body { overflow: hidden; }
.faq-body p { padding-bottom: 20px; color: var(--text-muted); }

/* ---------- Contact ---------- */
.contact { background: linear-gradient(180deg, #F1EADC 0%, var(--cream) 100%); padding-block: clamp(24px, 3vw, 44px); }
.contact .section-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.contact .section-lead { font-size: 1rem; }
.contact .contact-form { padding: clamp(18px, 2.5vw, 28px); }
.contact-form .field { margin-bottom: 9px; gap: 6px; }
.contact-form .field textarea { min-height: 72px; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
/* Het mailadres is één lang woord. Op smalle schermen duwde dat de kolom breder
   dan het scherm; hier mag het afbreken en mag de kolom krimpen. */
.contact-layout > * { min-width: 0; }
.contact-details a { overflow-wrap: anywhere; }
.contact-details { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.contact-details li { display: flex; align-items: center; gap: 12px; color: var(--forest-800); font-weight: 500; }
.contact-details svg { color: var(--ember-600); flex-shrink: 0; }
.contact-details a:hover { color: var(--ember-700); text-decoration: underline; text-underline-offset: 3px; }

.contact-person {
  display: flex; align-items: center; gap: 14px; margin-top: var(--sp-5);
  padding: 14px 16px; background: var(--cream-card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.contact-person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex-shrink: 0; }
.contact-person-name { display: block; font-weight: 600; color: var(--forest-800); }
.contact-person-role { display: block; font-size: .88rem; color: var(--text-muted); }

.contact-form {
  background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--sh-md);
}
.field { display: grid; gap: 7px; margin-bottom: var(--sp-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field label { font-weight: 600; font-size: .92rem; color: var(--forest-800); }
.req { color: var(--ember-600); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 13px 14px; width: 100%;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ember-500); box-shadow: 0 0 0 3px rgba(197,107,30,.16);
}
.field input.invalid, .field select.invalid { border-color: #C23B22; box-shadow: 0 0 0 3px rgba(194,59,34,.14); }
.field-error { color: #B0331C; font-size: .85rem; min-height: 0; }
.field-error:not(:empty) { min-height: 1.1em; }

.select-wrap { position: relative; min-width: 0; }
.select-wrap select { min-width: 0; text-overflow: ellipsis; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; }
.select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--forest-600); pointer-events: none; }

.contact-form .btn-primary { margin-top: var(--sp-2); position: relative; }
.btn-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  display: none;
}
.btn-primary.loading .btn-label { opacity: .7; }
.btn-primary.loading .btn-spinner { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-note { margin-top: var(--sp-3); font-size: .85rem; color: var(--text-muted); text-align: center; }
.form-success[hidden] { display: none; }
.form-success {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: var(--sp-4); padding: 16px; border-radius: var(--r-sm);
  background: var(--forest-100); color: var(--forest-700); font-weight: 600;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-900); color: rgba(255,255,255,.82); padding-block: var(--sp-7) var(--sp-4); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-mark { color: var(--green-400); }
.footer-tag { margin-top: 10px; color: rgba(255,255,255,.6); font-size: .95rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-content: start; }
.footer-nav a { color: rgba(255,255,255,.78); font-size: .95rem; transition: color var(--dur); }
.footer-nav a:hover { color: #fff; }
/* EU-subsidieblok: embleem op wit, want op donkergroen mag het niet staan */
.footer-eu {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-eu-badge { background: #fff; border-radius: var(--r-sm); padding: 10px 14px; flex-shrink: 0; }
.footer-eu-badge img { display: block; height: 38px; width: auto; }
.footer-eu p { font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.6); max-width: 62ch; margin: 0; }
@media (max-width: 620px) { .footer-eu { gap: var(--sp-3); } }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--sp-4); font-size: .85rem; color: rgba(255,255,255,.5); }
.footer-legal { font-size: .78rem; color: rgba(255,255,255,.42); }

/* ---------- Contactformulier: spamval, berekening, foutmelding ---------- */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-berekening {
  display: flex; gap: 9px; align-items: flex-start;
  margin-bottom: var(--sp-3); padding: 11px 14px;
  background: rgba(27,58,44,.05); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .85rem; line-height: 1.5; color: var(--text-muted);
}
.form-berekening strong { color: var(--forest-800); font-weight: 600; }
.form-error {
  margin-top: var(--sp-3); padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(180,83,31,.08); border: 1px solid rgba(180,83,31,.28);
  font-size: .88rem; line-height: 1.55; color: var(--forest-800);
}
.form-error a { color: var(--ember-600); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- De vijf instelbare grootheden ---------- */
.knoppen { margin-bottom: var(--sp-6); text-align: center; }
.knoppen-kop {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember-600); margin-bottom: var(--sp-3);
}
.knoppen-rij { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
/* eigen band tussen de kop en de onderbouwing: smallere marges dan een volle sectie */
.section--smal { padding-top: 0; }
.knoppen { margin-bottom: 0; }
.knop {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-2);
}
.knop-symbool {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: 2.1rem; line-height: 1; color: var(--forest-800);
}
.knop-symbool sub { font-size: .52em; font-weight: 600; }
.knop-label {
  display: block; margin-top: 8px; font-size: .88rem; font-weight: 500; color: var(--text-muted);
}
.knoppen-bij {
  margin: var(--sp-3) auto 0; max-width: 62ch;
  font-size: .88rem; line-height: 1.55; color: var(--text-muted);
}
@media (max-width: 880px) {
  .knoppen-rij { grid-template-columns: repeat(3, 1fr); }
  .knop-symbool { font-size: 1.8rem; }
}
@media (max-width: 480px) {
  .knoppen-rij { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Compostkwaliteit: claim met onderbouwing ---------- */
.claims { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.claim { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.claim h3 {
  position: relative; font-family: var(--font-serif); font-weight: 600;
  font-size: 1.24rem; line-height: 1.25; color: var(--forest-800); margin-bottom: var(--sp-2);
}
.claim h3::before {
  content: ""; position: absolute; top: calc(-1 * var(--sp-3) - 1px); left: 0;
  width: 34px; height: 2px; background: var(--ember-500);
}
.claim p { color: var(--text-muted); font-size: .96rem; }
/* plek voor een foto die nog aangeleverd moet worden */
.photo-slot--ph {
  display: grid; place-items: center; align-content: center; gap: 10px; text-align: center;
  padding: var(--sp-4); background: var(--forest-100); color: var(--forest-600);
  border: 1px dashed rgba(27,58,44,.24); border-radius: var(--r-lg);
}
.photo-slot--ph span { font-size: .88rem; font-weight: 500; max-width: 36ch; }
.system-photo--vier-drie { aspect-ratio: 4 / 3; }
/* onderkant van de foto op één lijn met de streep onder de laatste specificatie:
   dat is de knop plus zijn bovenmarge vanaf de onderkant van de tekstkolom */
.system-media--midden { align-self: end; margin-bottom: calc(var(--sp-5) + 56px); }
@media (max-width: 880px) { .system-media--midden { margin-bottom: 0; } }
.claim-figure { margin-bottom: var(--sp-6); }
.claim-figure .photo-slot { aspect-ratio: 21 / 9; border-radius: var(--r-lg); }
.claim-figure figcaption { margin-top: 10px; font-size: .88rem; color: var(--text-muted); }
@media (max-width: 880px) {
  .claims { grid-template-columns: 1fr; gap: var(--sp-4); }
  .claim-figure .photo-slot { aspect-ratio: 16 / 10; }
}

/* ---------- Juridische pagina's (privacy) ---------- */
.legal .legal-date { font-size: .85rem; color: var(--text-muted); margin-bottom: var(--sp-5); }
.legal h2 { font-family: var(--font-serif); font-size: 1.22rem; font-weight: 600; color: var(--forest-800); margin: var(--sp-5) 0 var(--sp-2); }
.legal h2:first-of-type { margin-top: var(--sp-4); }
.legal p { margin-bottom: var(--sp-3); }
.legal a { color: var(--ember-600); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Case modals (dialog) ---------- */
.btn-light {
  background: rgba(255,255,255,.94); color: var(--forest-800);
  box-shadow: var(--sh-md); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.btn-light:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-light svg { transition: transform var(--dur) var(--ease-out); }
.btn-light:hover svg { transform: translateX(4px); }

.case-modal {
  position: fixed; left: 50%; top: 50%; margin: 0;
  padding: 0; border: 0; background: transparent;
  width: min(940px, calc(100% - 32px)); max-height: min(92vh, 720px);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-lg);
  opacity: 0; transform: translate(-50%, -50%) translateY(16px) scale(.98);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out),
              overlay .28s var(--ease-out) allow-discrete, display .28s var(--ease-out) allow-discrete;
}
.case-modal[open] { opacity: 1; transform: translate(-50%, -50%); }
@starting-style { .case-modal[open] { opacity: 0; transform: translate(-50%, -50%) translateY(16px) scale(.98); } }

.case-modal::backdrop {
  background: rgba(18, 32, 25, 0);
  backdrop-filter: blur(0px);
  transition: background .28s var(--ease-out), backdrop-filter .28s var(--ease-out),
              overlay .28s var(--ease-out) allow-discrete, display .28s var(--ease-out) allow-discrete;
}
.case-modal[open]::backdrop { background: rgba(18, 32, 25, .55); backdrop-filter: blur(3px); }
@starting-style { .case-modal[open]::backdrop { background: rgba(18, 32, 25, 0); backdrop-filter: blur(0px); } }

.case-modal-inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--cream-card); border-radius: var(--r-xl); overflow: hidden;
  max-height: min(92vh, 720px);
}
.case-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(18,32,25,.08);
  background: rgba(255,255,255,.94); color: var(--forest-800);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(18,32,25,.25), 0 0 0 1px rgba(255,255,255,.5);
  transition: background var(--dur), transform var(--dur) var(--ease-out);
}
.case-close:hover { background: #fff; transform: rotate(90deg); }
.case-close:focus-visible { outline: 3px solid var(--ember-400); outline-offset: 2px; }

.case-media { position: relative; min-height: 360px; }
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,32,25,.4) 0%, transparent 40%);
}
.case-example {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  white-space: nowrap;
}
.case-example:hover { transform: translateX(-50%) translateY(-2px); }

.case-content {
  padding: clamp(28px, 3.4vw, 46px);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.case-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; color: var(--forest-800);
  margin-bottom: var(--sp-3);
}
.case-lead { color: var(--text-muted); font-size: 1rem; }
.case-bullets { margin: var(--sp-4) 0 var(--sp-5); display: grid; gap: 12px; }
.case-bullets li {
  position: relative; padding-left: 30px; font-weight: 500; color: var(--forest-800); font-size: .98rem;
}
.case-bullets li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 10px;
  border-left: 2.5px solid var(--green-500); border-bottom: 2.5px solid var(--green-500);
  transform: rotate(-45deg);
}
.case-contact { margin-top: auto; align-self: flex-start; }

@media (max-width: 720px) {
  .case-modal { left: 0; top: 0; margin: 0; width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 0; transform: translateY(16px); }
  .case-modal[open] { transform: none; }
  @starting-style { .case-modal[open] { transform: translateY(16px); } }
  .case-modal-inner { grid-template-columns: 1fr; max-height: 100dvh; grid-template-rows: auto 1fr; }
  .case-media { min-height: 220px; }
  .case-contact { align-self: stretch; text-align: center; }
}

/* ---------- Reveal animation ---------- */
/* Only hide when JS is active (.js on <html>) so content is always visible as a fallback. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* Stagger children inside grids */
.steps .step, .benefit-grid .benefit, .audience-grid .audience-card, .value-grid .value-card, .stats-grid .stat {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- Case / praktijkvoorbeeld pages ---------- */
.ph {
  background: rgba(197,107,30,.12); border-bottom: 1px dashed var(--ember-500);
  border-radius: 2px; padding: 0 3px; font-style: normal;
}
.breadcrumb { padding-top: var(--sp-4); font-size: .9rem; color: var(--text-muted); }
.breadcrumb a { color: var(--forest-700); font-weight: 500; }
.breadcrumb a:hover { color: var(--ember-600); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span { margin: 0 8px; opacity: .45; }

.case-hero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px); }
.case-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.case-hero h1 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em;
  color: var(--forest-800); margin: 10px 0 16px;
}
.case-result { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--forest-700); font-weight: 500; }
.case-intro { margin-top: var(--sp-3); color: var(--text-muted); max-width: 54ch; }
.case-hero-actions { margin-top: var(--sp-5); }
.case-hero-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 4 / 5; }
.case-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.case-prose { max-width: 70ch; }
.case-prose p { color: var(--text-muted); margin-bottom: var(--sp-3); }
.case-prose h3 { font-family: var(--font-serif); color: var(--forest-800); font-size: 1.4rem; margin: var(--sp-5) 0 var(--sp-2); }
.case-outcomes { margin-top: var(--sp-5); display: grid; gap: 12px; }
.case-outcomes li { position: relative; padding-left: 30px; font-weight: 500; color: var(--forest-800); }
.case-outcomes li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 10px;
  border-left: 2.5px solid var(--green-500); border-bottom: 2.5px solid var(--green-500);
  transform: rotate(-45deg);
}

.gallery { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.gallery-item {
  position: relative; padding: 0; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:focus-visible { outline: 3px solid var(--ember-400); outline-offset: 3px; }
.gallery-zoom {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--forest-800); display: grid; place-items: center;
  box-shadow: var(--sh-sm); opacity: 0; transform: scale(.9);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery-item:hover .gallery-zoom, .gallery-item:focus-visible .gallery-zoom { opacity: 1; transform: scale(1); }

.lightbox {
  position: fixed; left: 50%; top: 50%; margin: 0;
  width: min(94vw, 1100px); max-height: 94vh; padding: 0; border: 0; background: transparent;
  overflow: visible;
  opacity: 0; transform: translate(-50%, -50%) scale(.97);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out),
              overlay .28s var(--ease-out) allow-discrete, display .28s var(--ease-out) allow-discrete;
}
.lightbox[open] { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@starting-style { .lightbox[open] { opacity: 0; transform: translate(-50%, -50%) scale(.97); } }
.lightbox::backdrop { background: rgba(18,32,25,0); transition: background .28s var(--ease-out), overlay .28s allow-discrete, display .28s allow-discrete; }
.lightbox[open]::backdrop { background: rgba(18,32,25,.82); }
@starting-style { .lightbox[open]::backdrop { background: rgba(18,32,25,0); } }
.lightbox-img { width: 100%; max-height: 94vh; object-fit: contain; border-radius: var(--r-md); display: block; margin: auto; box-shadow: var(--sh-lg); }
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 2; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--forest-800);
  display: grid; place-items: center; box-shadow: var(--sh-md);
  transition: background var(--dur), transform var(--dur) var(--ease-out);
}
.lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; }
.lightbox-close:hover { background: #fff; transform: rotate(90deg); }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lightbox-nav:hover { background: #fff; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 3px solid var(--ember-400); outline-offset: 2px; }

@media (max-width: 560px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

.case-quote {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 36px); align-items: center;
  max-width: 900px; margin-inline: auto;
  background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px); box-shadow: var(--sh-sm);
}
.case-quote-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.case-quote-photo--ph { display: grid; place-items: center; background: var(--forest-100); color: var(--forest-600); }
.case-quote blockquote p { font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.35; color: var(--forest-800); }
.case-quote figcaption { margin-top: 12px; }
.case-quote-name { display: block; font-weight: 600; color: var(--forest-800); }
.case-quote-role { display: block; font-size: .9rem; color: var(--text-muted); }

.cta-band { background: var(--forest-800); color: #fff; text-align: center; padding-block: clamp(48px, 7vw, 88px); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 90% at 50% 0%, rgba(224,138,58,.2), transparent 70%); }
.cta-band > .container { position: relative; }
.cta-band h2 { font-family: var(--font-serif); font-weight: 500; color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.cta-band p { color: rgba(255,255,255,.78); margin-top: 12px; max-width: 52ch; margin-inline: auto; }
.cta-band .btn { margin-top: var(--sp-5); }

@media (max-width: 880px) {
  .case-hero-inner { grid-template-columns: 1fr; }
  .case-hero-media { order: -1; }
  .case-quote { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ---------- Team page ---------- */
.nav-links a[aria-current="page"] { color: var(--ember-600); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* Alle teamleden op één rij; breekt breder uit dan de container om te passen */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  gap: var(--sp-3); justify-content: center;   /* centreert, ongeacht het aantal leden */
  width: min(96vw, 1400px);
  margin-left: calc((100% - min(96vw, 1400px)) / 2);
}
@media (max-width: 1180px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); width: auto; margin-left: 0; gap: var(--sp-4); }
}
@media (max-width: 780px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card {
  display: flex; flex-direction: column;
  background: var(--forest-800); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.team-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--forest-100); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .5s var(--ease-out); }
.team-card:hover .team-photo img { transform: scale(1.05); }
.team-photo--ph { display: grid; place-items: center; height: 100%; color: var(--forest-600); }
.team-cap { padding: 12px 13px 14px; }
.team-name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1rem; line-height: 1.15; color: #fff; }
.team-role { display: block; font-size: .8rem; line-height: 1.3; color: rgba(255,255,255,.72); margin-top: 3px; }
.team-links { display: flex; gap: 10px; margin-top: 10px; }
.team-links a {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.team-links a:hover { background: var(--ember-600); transform: translateY(-2px); }

/* ---------- Over ons (about) ---------- */
.about-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-copy .section-title { margin: 10px 0 var(--sp-4); }
.about-copy p { color: var(--text-muted); margin-bottom: var(--sp-3); max-width: 60ch; }
.about-copy p:last-child { margin-bottom: 0; }
.about-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 4 / 3; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Over ons: tijdlijn ---------- */
.timeline { list-style: none; margin: var(--sp-7) 0 0; padding: 0; }
.timeline .step { position: relative; }
/* streepje tussen de stappen, alleen op breed scherm */
@media (min-width: 1025px) {
  .timeline .step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: calc(var(--sp-4) * -1);
    width: var(--sp-4); height: 1px; background: var(--line);
  }
}
.timeline .step--nu { border-color: var(--ember-500); }
.timeline .step--nu .step-num { color: var(--ember-600); }
.steps--4 { grid-template-columns: repeat(4, 1fr); }

.steps--3 { grid-template-columns: repeat(3, 1fr); }

/* aanklikbare tijdlijn: de kaarten blijven allemaal zichtbaar, alleen de foto wisselt */
/* slanke tabbladen in plaats van dikke kaarten: scheelt veel hoogte en
   houdt de tijdlijn van links naar rechts leesbaar */
.tl-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4); border-bottom: 1px solid var(--line); margin-top: var(--sp-6);
}
.tl-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0 0 14px; text-align: left; font: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur) var(--ease-out);
}
.tl-tab-datum {
  display: block; font-family: var(--font-serif); font-size: .86rem;
  color: var(--text-muted); transition: color var(--dur) var(--ease-out);
}
.tl-tab-kop {
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem;
  line-height: 1.25; color: var(--forest-800); margin-top: 4px;
  transition: color var(--dur) var(--ease-out);
}
.tl-tab.is-actief { border-bottom-color: var(--ember-500); }
.tl-tab.is-actief .tl-tab-datum { color: var(--ember-600); }
.tl-tab:hover .tl-tab-kop, .tl-tab:focus-visible .tl-tab-kop { color: var(--ember-600); }
.tl-tab:focus-visible { outline: 3px solid var(--ember-400); outline-offset: 4px; }
@media (max-width: 620px) { .tl-tabs { grid-template-columns: 1fr; gap: 0; } .tl-tab { padding: 12px 0; border-bottom: 1px solid var(--line); margin-bottom: 0; } }

/* het paneel dat meewisselt: foto links, korte tekst rechts */
.timeline-panel {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; margin-top: var(--sp-5);
}
.timeline-panel img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
#tl-tekst { font-size: 1.02rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
/* Opsomming in de tijdlijn: gewone bolletjes, zelfde gewicht als de lopende
   tekst erboven. Met vinkjes en vette letters trok de lijst alle aandacht. */
.tl-punten { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.tl-punten li {
  position: relative; padding-left: 17px;
  font-size: .98rem; line-height: 1.55; color: var(--text-muted);
}
.tl-punten li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--forest-600); opacity: .55;
}
.timeline-bij { margin: var(--sp-4) 0 0; font-size: .86rem; color: var(--text-muted); opacity: .75; }
@media (max-width: 880px) { .timeline-panel { grid-template-columns: 1fr; } }

/* ---------- Over ons: partners ---------- */
.partners {
  margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line);
  /* iets breder dan de tekstkolom, zodat er vijf logos op een rij passen */
  width: min(94vw, 1240px); margin-left: calc((100% - min(94vw, 1240px)) / 2);
}
.partners-title {
  font-family: var(--font-sans); font-weight: 600; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); text-align: center; margin-bottom: var(--sp-5);
}
/* 3 kolommen, niet 6: deze logo's bevatten tekst en worden onleesbaar als ze
   op een smalle strook worden geperst */
/* flexibel: rijen vullen zich en de laatste rij centreert, ongeacht het aantal logo's */
.partner-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4);
  max-width: 1200px; margin-inline: auto;
}
/* witte tegel: de aangeleverde logo's hebben deels een witte, deels een transparante
   achtergrond — op een tegel ogen ze als één set in plaats van los zwevend */
.partner-logo {
  display: grid; place-items: center; min-height: 92px;
  flex: 0 0 200px; max-width: 200px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 18px;
}
.partner-logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
a.partner-logo { transition: opacity var(--dur) var(--ease-out); }
a.partner-logo:hover { opacity: .7; }
.partner-logo--ph {
  font-size: .8rem; line-height: 1.25; text-align: center; color: var(--forest-700);
  background: rgba(197,107,30,.12); border: 1px dashed var(--ember-500);
  border-radius: var(--r-sm); padding: 10px 8px; width: 100%;
}
@media (max-width: 880px) {
  .about-shots { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-media { order: -1; }
}

/* ---------- Systeem-pagina: animatiediagram ---------- */
.flow-panel {
  width: min(96vw, 1340px); max-width: none;
  margin: var(--sp-6) 0 0; margin-left: calc((100% - min(96vw, 1340px)) / 2);
  background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 40px); box-shadow: var(--sh-sm);
}
.sysflow { width: 100%; height: auto; display: block; }
@keyframes sf-rise { 0% { opacity: 0; transform: translateY(7px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes sf-flow { to { stroke-dashoffset: -28; } }
@keyframes sf-glow { 0%, 100% { opacity: .12; } 50% { opacity: .3; } }
@keyframes sf-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.sf-wave { transform-box: fill-box; transform-origin: center; animation: sf-rise 2.6s ease-in-out infinite; }
.sf-wave.b { animation-delay: .55s; }
.sf-wave.c { animation-delay: 1.1s; }
.sf-flow { animation: sf-flow 1.3s linear infinite; }
.sf-flow.g { animation-duration: 1.9s; }
.sf-glow { animation: sf-glow 3.4s ease-in-out infinite; }
.sf-sprout { transform-box: fill-box; transform-origin: bottom center; animation: sf-sway 4s ease-in-out infinite; }
.sf-label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; fill: var(--muted); }

.component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }

/* Techniek: smalle widgets ver aan de zijkanten · grote staande foto dominant in het midden.
   Breekt breder uit dan de container (zelfde truc als de 3D-sectie) zodat de widgets naar de randen gaan. */
.tech-layout {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) minmax(190px, 240px);
  grid-template-areas: "left photo right";
  gap: var(--sp-6);
  align-items: stretch;
  width: min(94vw, 1360px);
  margin-left: calc((100% - min(94vw, 1360px)) / 2);
}
.tech-col { display: grid; grid-template-rows: 1fr 1fr; gap: var(--sp-5); min-width: 0; }
.tech-col--left { grid-area: left; }
.tech-col--right { grid-area: right; }
.tech-col .component { padding: var(--sp-4); }
.tech-col .component p { font-size: .9rem; }
/* De foto is even hoog als de twee kaarten ernaast en houdt zijn staande 4:5 formaat.
   De breedte volgt uit die hoogte, gecentreerd in de middenkolom. Is de kolom smaller dan
   dat, dan valt er hooguit een randje links en rechts af in plaats van het halve beeld. */
.tech-photo { grid-area: photo; aspect-ratio: 4 / 5; width: min(100%, 560px); height: auto;
  justify-self: center; align-self: center; }
@media (max-width: 1099px) {
  .tech-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "photo photo" "left right";
    width: auto; margin-left: 0; gap: var(--sp-4);
  }
  .tech-photo { height: auto; width: 100%; max-width: 420px;
    margin: 0 auto var(--sp-2); align-self: auto; }
}
@media (max-width: 560px) {
  .tech-layout { grid-template-columns: 1fr; grid-template-areas: "photo" "left" "right"; }
  .tech-col { grid-template-rows: auto auto; }
}
.component {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.component:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.component:focus-visible { outline: 3px solid var(--ember-400); outline-offset: 3px; }
.component-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--forest-100); color: var(--forest-700); margin-bottom: var(--sp-3); }
.component h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; color: var(--forest-800); margin-bottom: 6px; }
.component p { font-size: .95rem; color: var(--text-muted); margin-bottom: var(--sp-4); }
.component-more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-full); white-space: nowrap;
  border: 1.5px solid var(--ember-500); color: var(--ember-600);
  font-weight: 600; font-size: .86rem; background: transparent;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.component:hover .component-more, .component:focus-visible .component-more { background: var(--ember-600); color: #fff; border-color: var(--ember-600); }
.component-more svg { display: block; transition: transform var(--dur) var(--ease-out); }
.component:hover .component-more svg { transform: translateX(3px); }
/* eenmalige nudge zodra de kaart in beeld komt */
@keyframes tcs-nudge { 0% { transform: translateX(0); } 50% { transform: translateX(5px); } 100% { transform: translateX(0); } }
.component.in .component-more svg { animation: tcs-nudge 0.5s var(--ease-out) 0.35s 2; }
@media (prefers-reduced-motion: reduce) { .component.in .component-more svg { animation: none; } }
.case-media--tech { display: grid; place-items: center; background: linear-gradient(150deg, var(--forest-700), var(--forest-900)); }
.case-media--tech svg { width: 92px; height: 92px; color: var(--green-400); }
.case-media--tech::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sf-wave, .sf-flow, .sf-glow, .sf-sprout { animation: none; }
  .sf-wave { opacity: 1; }
}

/* ---------- 3D exploded view (three.js) ---------- */
.scene3d-track { position: relative; height: 160vh; margin-top: calc(-1 * var(--sp-5)); }
.scene3d-sticky { position: sticky; top: var(--header-h); height: 82vh; overflow: hidden; }
#scene3d-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
#scene3d-canvas:active { cursor: grabbing; }
.scene3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene3d-labels .lab {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--forest-800);
  background: rgba(252,250,244,.88); padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap; box-shadow: var(--sh-sm);
  transition: opacity .2s var(--ease-out);
}
.scene3d-progress { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); width: 180px; height: 4px; border-radius: 999px; background: rgba(27,58,44,.14); overflow: hidden; }
.scene3d-progress i { display: block; height: 100%; width: 0; background: var(--ember-500); border-radius: 999px; }
.scene3d-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans); font-weight: 600; font-size: .88rem; color: var(--forest-800);
  background: rgba(252,250,244,.92); padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line);
  box-shadow: var(--sh-sm); white-space: nowrap;
  transition: opacity .3s var(--ease-out);
}
.scene3d-hint .hint-scroll { display: inline-flex; align-items: center; gap: 7px; }
.scene3d-hint .hint-drag { display: none; font-weight: 500; color: var(--text-muted); }
/* na het openen is scrollen klaar en is draaien de logische volgende stap */
.scene3d-hint.is-open .hint-scroll { display: none; }
.scene3d-hint.is-open .hint-drag { display: inline; }
.hint-arrow { animation: hintBounce 1.6s var(--ease-out) infinite; color: var(--ember-500); }
@keyframes hintBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(4px); }
}
/* op touch is draaien uitgezet: dan verdwijnt de aanwijzing na het openen */
@media (pointer: coarse) {
  .scene3d-hint.is-open { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-arrow { animation: none; }
}
.scene3d-fallback { padding: var(--sp-6); text-align: center; color: var(--text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .steps, .steps--2, .steps--3, .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 460px; margin-inline: auto; }
  .hero-points { gap: var(--sp-2) var(--sp-4); }
  .value-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .audience-media { aspect-ratio: 16 / 10; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-3); }
  .stats-grid--3 .stat:last-child { grid-column: 1 / -1; }
  .faq-layout { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .system-layout { grid-template-columns: 1fr; }
  .system-media { margin-bottom: var(--sp-5); }
  .system-photo--inset { position: static; width: 60%; margin: 14px 0 0 auto; border-width: 0; }
  .system-photo--main figcaption { font-size: .85rem; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .steps, .steps--2, .steps--3, .steps--4 { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-badge { right: 8px; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- ROI / besparingscalculator ---------- */
.roi-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); align-items: start; }
/* Raster- en flexkinderen krimpen standaard niet onder hun inhoud. Een keuzelijst
   rekt op naar zijn langste optie, en duwde zo de hele pagina breder dan het scherm. */
.roi-grid > * { min-width: 0; }

.roi-form { display: grid; gap: var(--sp-4); }
.roi-block { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface); box-shadow: var(--sh-sm); }
.roi-block legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; margin-bottom: var(--sp-3);
  font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; color: var(--forest-800); }
.roi-step { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--forest-700); color: #fff; font-family: var(--font-sans); font-size: .82rem; font-weight: 700; }

.roi-block .field, .roi-block .field-row { margin-bottom: 0; }
.roi-block > .field + .field, .roi-block .roi-when { margin-top: var(--sp-3); }
.roi-when[hidden] { display: none; }

/* segment-chips */
.roi-seg { display: flex; flex-wrap: wrap; gap: 10px; }
.roi-chip { position: relative; }
.roi-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.roi-chip span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-full);
  font-weight: 600; font-size: .92rem; color: var(--forest-800); cursor: pointer; transition: all var(--dur) var(--ease-out); }
.roi-chip input:checked + span { background: var(--forest-700); color: #fff; border-color: var(--forest-700); }
.roi-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(197,107,30,.3); }
.roi-chip:hover span { border-color: var(--forest-600); }
.roi-opt { font-weight: 400; color: var(--text-muted); font-size: .82rem; }

/* aannames */
.roi-assumptions { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.roi-assumptions summary { cursor: pointer; font-weight: 600; color: var(--forest-800); }
.roi-assumptions summary::marker { color: var(--forest-600); }
.roi-assump-note { font-size: .85rem; color: var(--text-muted); margin: 10px 0 var(--sp-3); }
.roi-assump-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.roi-assump-grid label { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--forest-800); }
.roi-assump-grid input { font: inherit; font-size: .95rem; padding: 9px 11px; width: 100%;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; }
.roi-assump-grid input:focus { outline: none; border-color: var(--ember-500); box-shadow: 0 0 0 3px rgba(197,107,30,.16); }

/* uitkomst-paneel */
.roi-results { color: #fff; border-radius: var(--r-lg); padding: var(--sp-5);
  background: linear-gradient(160deg, var(--forest-800), var(--forest-900)); box-shadow: var(--sh-lg); }
/* Meeschuiven met het scrollen is alleen zinvol als het paneel ook echt past.
   Het is ongeveer 880px hoog; op een laptopscherm bleef de onderkant, met de
   CO₂-regel en de knop, daardoor buiten beeld. Dus pas vanaf een hoog venster. */
@media (min-height: 1000px) {
  .roi-results { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
}
.roi-label { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; color: var(--green-400); }
.roi-big { display: block; font-family: var(--font-serif); font-weight: 600; line-height: 1.03; margin: 6px 0 8px;
  font-size: clamp(2.3rem, 5vw, 3.1rem); font-variant-numeric: tabular-nums; }
.roi-badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-full); }
.roi-badge.hard { background: rgba(111,190,139,.22); color: var(--green-400); }
.roi-badge.ind { background: rgba(224,138,58,.2); color: var(--ember-100); }

.roi-warn { background: rgba(224,138,58,.16); border-radius: var(--r-sm); padding: 12px 14px;
  font-size: .9rem; line-height: 1.5; color: var(--ember-100); margin-top: var(--sp-4); }

.roi-lines { list-style: none; padding: 0; margin: var(--sp-4) 0; border-top: 1px solid rgba(255,255,255,.14); }
.roi-lines li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: .95rem; }
/* het bedrag mag niet afbreken, dus laat het label krimpen en over twee regels lopen */
.roi-lines li span:first-child { color: rgba(255,255,255,.82); min-width: 0; }
.roi-lines .roi-sub { display: block; margin-top: 2px; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.55); }
.roi-lines li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roi-lines li.neg span:last-child { color: var(--ember-100); }
.roi-lines li.total { border-bottom: none; padding-top: 14px; font-size: 1.08rem; }
.roi-lines li.total span { color: #fff; font-weight: 700; }

.roi-sec { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.roi-sec > div { background: rgba(255,255,255,.07); border-radius: var(--r-sm); padding: 12px 14px; }
.roi-sec dt { font-size: .76rem; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.roi-sec dd { font-family: var(--font-serif); font-size: 1.24rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.roi-sec .roi-sub { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.6); }

.roi-note { font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.68); margin-bottom: var(--sp-4); }
.roi-note strong { color: rgba(255,255,255,.9); }
.roi-results .btn-primary { width: 100%; }

@media (max-width: 900px) {
  .roi-grid { grid-template-columns: 1fr; }
  .roi-results { position: static; }
}
@media (max-width: 520px) {
  .roi-assump-grid { grid-template-columns: 1fr; }
  .roi-sec { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal, .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Video: klik om af te spelen ----------
   De YouTube-speler wordt pas ingeladen na een klik. Tot dat moment staat er
   alleen een afbeelding, dus de video kost niets aan laadtijd en YouTube zet
   geen cookies. */
.video-embed {
  position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); background: var(--forest-900);
}
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; display: block;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.video-play:hover img { transform: scale(1.03); }
.video-play::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 45%, rgba(18,32,25,.6));
}
.video-play-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--ember-600); box-shadow: var(--sh-md);
  transition: transform var(--dur) var(--ease-out);
}
.video-play-icon svg { margin-left: 4px; }   /* optisch gecentreerd */
.video-play:hover .video-play-icon, .video-play:focus-visible .video-play-icon { transform: translate(-50%,-50%) scale(1.07); }
.video-play-label {
  position: absolute; left: 22px; bottom: 18px; z-index: 1;
  color: #fff; font-weight: 600; font-size: .95rem;
}
.video-play:focus-visible { outline: 3px solid var(--ember-400); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .video-play img, .video-play-icon { transition: none; } }

.system-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Nieuws ---------- */
.news-list { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); max-width: 940px; }
.news-item {
  display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-5);
  align-items: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line);
}
.news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.news-media { display: block; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
.news-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.news-media:hover img { transform: scale(1.04); }
.news-meta { font-size: .85rem; color: var(--text-muted); margin-bottom: 6px; }
.news-credit::before { content: " · "; }
.news-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin-bottom: 8px; }
.news-title a { color: var(--forest-800); }
.news-title a:hover { color: var(--ember-600); }
.news-body p { color: var(--text-muted); margin-bottom: var(--sp-3); }
.news-more { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .93rem; color: var(--ember-600); }
.news-more svg { transition: transform var(--dur) var(--ease-out); }
.news-more:hover svg { transform: translateX(3px); }
@media (max-width: 720px) {
  .news-item { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) { .news-media img, .news-more svg { transition: none; } }

/* ---------- In de pers ---------- */
.press-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; max-width: 860px; display: grid; gap: 0; }
.press-item { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.press-item:last-child { border-bottom: 0; }
.press-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; color: var(--text-muted); margin-bottom: 6px; }
.press-bron { font-weight: 600; color: var(--forest-700); }
.press-bron::before { content: "·"; margin-right: 10px; color: var(--line-strong, #c9c0b0); }
.press-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.18rem; line-height: 1.3; margin-bottom: 6px; }
.press-title a { color: var(--forest-800); display: inline-flex; align-items: baseline; gap: 7px; }
.press-title a:hover { color: var(--ember-600); }
.press-title svg { flex-shrink: 0; opacity: .55; }
.press-item p { color: var(--text-muted); font-size: .96rem; margin: 0; }

/* Persvermelding: zelfde kaart als een nieuwsbericht, maar met de naam van het
   medium als beeld. Foto's van andere media nemen we niet over, en vijf artikelen
   gaan over dezelfde opstelling. */
.press-tile {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: var(--sp-4);
  border-radius: var(--r-md); background: var(--forest-100); color: var(--forest-800);
  text-align: center; border: 1px solid var(--line);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.press-tile span { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.press-tile:hover { background: var(--forest-800); color: #fff; }

/* per-logo formaat: sommige merken hebben veel witruimte in hun bestand,
   waardoor ze optisch kleiner ogen bij dezelfde maximale hoogte */
.partner-logo--groot { padding: 10px 10px; }
.partner-logo--groot img { max-height: 72px; }
.partner-logo--klein img { max-height: 40px; }

/* ---------- Taalknop ----------
   Platte tekst in de stijl van de menulinks: de huidige taal in de normale kleur,
   de andere gedempt, met een schuine streep ertussen. Geen pil eromheen, zodat hij
   niet met de gesprek-knop ernaast concurreert. */
.lang-switch {
  display: inline-flex; align-items: center;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}
.lang-switch > * {
  padding: 10px 3px;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.lang-switch .lang-actief { color: var(--forest-800); }
.lang-switch a { color: var(--forest-800); opacity: .45; }
.lang-switch a:hover, .lang-switch a:focus-visible { opacity: 1; }
/* de streep hoort bij het tweede deel, welke taal daar ook staat */
.lang-switch > * + *::before {
  content: "/";
  margin-right: 5px;
  color: var(--forest-800); opacity: .3;
  font-weight: 400;
}
.nav-inner .lang-switch { margin-left: 10px; }
.mobile-menu .lang-switch { align-self: flex-start; margin-top: 8px; }
/* Onder 880px vallen de menulinks en de gesprek-knop weg. Zonder deze regel
   schuift de taalknop naar de logo-kant in plaats van naast het menu-icoon. */
@media (max-width: 880px) { .nav-inner .lang-switch { margin-left: auto; } }

/* Extra regel in het bedankblok als Google nog niet heeft geantwoord, zie script.js */
.form-success-extra {
  display: block; width: 100%;
  margin-top: 6px; font-size: .88rem; line-height: 1.5;
  opacity: .8; font-weight: 400;
}

/* Terugzetknop in het aannameblok van de rekenhulp, zie roi.js */
.roi-reset {
  display: block; margin: var(--sp-3) 0 0 auto;
  background: none; border: 0; padding: 6px 2px;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--forest-600); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
.roi-reset:hover, .roi-reset:focus-visible { color: var(--ember-600, var(--forest-800)); }