/* bio-grond — layout & componenten (fase 2, blok A)
   Bouwt uitsluitend op tokens.css. Referentie: rustig, typografie-gedreven,
   witruimte doet het werk (zie design/TOKENS.md). */

/* ── Container & banden ─────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.band {
  padding-block: var(--space-2xl);
}
.band--alt {
  background: var(--color-surface-alt);
}
.band--grond {
  background: var(--color-grond);
  color: var(--color-on-grond);
}
.band--grond a {
  color: inherit;
}

/* ── Header & navigatie (bewust géén hamburger: wrapt op mobiel) ── */
/* Sticky: opake achtergrond is de veilige no-JS-basis; header.js voegt bij
   scroll een frosted-achtergrond + subtiele schaduw toe (.scrolled). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  transition: background var(--dur-micro) var(--ease-out-soft),
              box-shadow var(--dur-micro) var(--ease-out-soft);
}
html.scrolled .site-header {
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgb(32 27 22 / 0.05), 0 6px 20px rgb(32 27 22 / 0.07);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* was baseline; de logo-lockup lijnt op het midden */
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-m);
}
/* .site-brand is nu de lockup (spruit + woordmerk) — typografie zit in
   brand.css (.bg-wordmark); hier alleen nog de link-reset. */
.site-brand {
  color: var(--color-ink);
  text-decoration: none;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--color-ink-zacht);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}
.site-nav a:hover {
  color: var(--color-primary-text);
}

/* ── Skip-link: onzichtbaar tot focus ───────────────────────────── */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  /* bio-diep i.p.v. merkgroen: witte tekst haalt zo AA (5.8:1 vs 4.12:1),
     zelfde afweging als .btn */
  background: var(--color-bio-diep);
  color: var(--color-on-primary);
  padding: var(--space-xs) var(--space-m);
}
.skip-link:focus {
  left: 0;
  z-index: 30; /* boven de sticky header (z-index 20) */
}

/* ── Hero (fotolaag: video-achtergrond) ─────────────────────────── */
/* De loopende hero-video staat absoluut achter de tekst; de poster-img
   eronder vangt het laden, reduced motion en geblokkeerde autoplay op.
   De oude gradient blijft als allerlaatste fallback vóór het beeld er is.
   Hoogte is gereserveerd via min-height — de video verschuift geen layout. */
.hero {
  position: relative;
  isolation: isolate; /* houdt de z-index:-1 van de media binnen de hero */
  display: grid;
  align-items: center;
  min-height: clamp(30rem, 82vh, 46rem);
  min-height: clamp(30rem, 82svh, 46rem);
  padding-block: var(--space-3xl);
  color: var(--color-wit);
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--color-bio) 11%, var(--color-surface)) 100%
  );
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Overlay tussen video en tekst: warm getint (ink i.p.v. zwart), gemiddeld
   ~28% dekking en iets zwaarder aan de tekstzijde voor leesbaarheid. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-ink) 42%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 16%, transparent) 78%
  );
}
/* Reduced motion (of geen video-support): alleen het stilstaande posterbeeld */
@media (prefers-reduced-motion: reduce) {
  .hero-media video {
    display: none;
  }
}
.hero h1 {
  max-width: 20ch;
}
/* Contrast-fix (wit-op-wit-bug): .hero-intro wordt óók op lichte banden
   gebruikt (kosten-en-baten, contact, over-ons, wat-is-bio-grond). De lichte
   tekstkleur + schaduw horen alleen bij de donkere hero — daarom hier de
   leesbare default en de hero-variant expliciet gescoped. */
.hero h1,
.hero .hero-intro {
  text-shadow: 0 1px 24px rgb(32 27 22 / 0.35);
}
.hero-intro {
  margin-top: var(--space-l);
  font-size: var(--text-h3);
  color: var(--color-ink-zacht);
  line-height: var(--leading-body);
}
.hero .hero-intro {
  color: color-mix(in srgb, var(--color-wit) 90%, transparent);
}
/* Op donkere banden erft de intro gewoon de bandkleur (wit/crème) */
.band--grond .hero-intro,
.band--bio .hero-intro {
  color: inherit;
}
.hero-intro p {
  max-width: 45ch;
}

.hero-acties {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-l);
  flex-wrap: wrap;
}
.tekstlink {
  font-weight: var(--weight-medium);
}
.hero .tekstlink {
  color: var(--color-wit);
}
.hero .tekstlink:hover {
  color: var(--color-surface-alt);
}

/* ── Fotolaag: sectie-beelden ───────────────────────────────────── */
/* Alle stills krijgen dezelfde behandeling (radius, schaduw, 16:9-crop,
   zelfde top-ritme) zodat de beeldlaag als één systeem leest. Vaste
   width/height-attributen in de markup voorkomen layout shift. */
.beeld {
  margin: var(--space-xl) 0 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Secties & artikelen ────────────────────────────────────────── */
.section + .section {
  margin-top: var(--space-2xl);
}
.section h2 {
  margin-bottom: var(--space-m);
}
article > h1 {
  margin-block: var(--space-2xl) var(--space-xl);
}
main {
  padding-bottom: var(--space-3xl);
}

/* ── Grids & cards ──────────────────────────────────────────────── */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-xl);
}
.card {
  background: var(--color-wit);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: var(--space-l);
}
.card h2, .card h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-s);
}
.card .icon-maaiveld {
  width: 4.5rem;
  margin-bottom: var(--space-m);
}
/* Monochroom per icoon, strikt uit de tokens (spec design/TOKENS.md);
   per-icoon afwijken kan straks via data-section op de card */
.icon-maaiveld {
  color: var(--color-bio);
  display: block;
}
.card[data-section="akkerbouw"] .icon-maaiveld {
  color: var(--color-grond-bruin);
}

/* Processtappen (klaar voor blok B/D-content) */
.steps {
  --proces-icon: 144px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
  margin-top: var(--space-xl);
}
.step {
  position: relative;
}
.step .icon-maaiveld {
  width: var(--proces-icon);
  margin-bottom: var(--space-m);
}
/* Verbindingslijn: de maaiveldlijn loopt dóór van icoon naar icoon
   (reststroom -> verwerking -> levende grond). Uitgelijnd op de horizon
   ín het icoon: de witte luchtzone eindigt op 38% van de icoonhoogte. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--proces-icon) * 0.38);
  left: var(--proces-icon);
  right: calc(-1 * var(--space-l));
  height: 2px;
  background: color-mix(in srgb, var(--color-grond-bruin) 45%, transparent);
}
/* Proces-narratief in kleur: bruin (rest) -> antraciet (verwerking) -> groen */
.step[data-step="reststroom"] .icon-maaiveld { color: var(--color-grond-bruin); }
.step[data-step="verwerking"] .icon-maaiveld { color: var(--color-grond-antraciet); }

/* Gestapeld (smal): 1 kolom, geen horizontale connector */
@media (max-width: 48rem) {
  .steps {
    grid-template-columns: 1fr;
  }
  .step:not(:last-child)::after {
    display: none;
  }
}

/* ── Landing & maaiveldlijn (home) ──────────────────────────────── */
.landing {
  position: relative;
}
.landing > * {
  position: relative;
  z-index: 1;
}
.landing-lijn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.landing-lijn path {
  fill: none;
  stroke: var(--color-grond-bruin);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.6;
}

/* Teaser-cards zijn links; hover via transform (botst niet met de
   translate-property van de reveals) */
.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur-micro) var(--ease-out-soft),
              transform var(--dur-micro) var(--ease-out-soft);
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(32 27 22 / 0.08), 0 10px 24px rgb(32 27 22 / 0.1);
}

/* ── Knoppen & CTA ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  /* bio-diep i.p.v. merkgroen: witte knoptekst haalt zo AA (5.8:1 i.p.v.
     4.12:1). Merkgroen zelf blijft voor vlakken/iconen/grote koppen. */
  background: var(--color-bio-diep);
  color: var(--color-on-primary);
  font-weight: var(--weight-medium);
  padding: var(--space-s) var(--space-l);
  border: 0;
  border-radius: var(--radius-s);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out-soft);
}
.btn:hover {
  background: color-mix(in srgb, var(--color-bio-diep) 85%, #000);
  color: var(--color-on-primary);
}
.cta-band p {
  max-width: var(--measure);
}
.cta-band .btn {
  margin-top: var(--space-m);
  background: var(--color-wit);
  color: var(--color-grond);
}
.cta-band .btn:hover {
  background: var(--color-surface-alt);
}

/* ── Formulieren ────────────────────────────────────────────────── */
.contact-form {
  max-width: 36rem;
  margin-top: var(--space-xl);
}
.contact-form p {
  margin-bottom: var(--space-m);
}
.contact-form label {
  display: block;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2xs);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-wit);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  padding: var(--space-xs) var(--space-s);
}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--color-bio);
  outline-offset: 0;
  border-color: var(--color-bio);
}

/* Honeypot: buiten beeld voor mensen, aanwezig voor bots.
   NIET display:none — sommige bots slaan onzichtbare velden over. */
.hp-veld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  display: block;
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
}
.form-success {
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-bio);
  padding: var(--space-m) var(--space-l);
  max-width: var(--measure);
}

/* ── Footer ─────────────────────────────────────────────────────── */
/* ── Footer — meerkoloms (grond/antraciet basis, groene accenten) ─── */
.site-footer {
  background: var(--color-grond);
  color: var(--color-on-grond);
  padding-block: var(--space-2xl);
  font-size: var(--text-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr 1fr;
  gap: var(--space-xl) var(--space-l);
}
/* Groene accent-tint: lichter dan merkgroen zodat tekst op antraciet AA
   haalt (merkgroen zelf zou ~3.9:1 geven). */
.site-footer {
  --footer-accent: color-mix(in srgb, var(--color-bio) 60%, var(--color-wit));
}
/* .footer-brand is nu de donkere lockup-variant (06) — typografie in
   brand.css (.bg-wordmark.is-dark); hier alleen de link-reset. */
.footer-brand {
  color: var(--color-on-grond);
  text-decoration: none;
}
.footer-payoff {
  margin-top: var(--space-s);
  opacity: 0.8;
  max-width: 34ch;
}
.footer-kop {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--footer-accent);
  margin-bottom: var(--space-s);
}
.footer-col {
  min-width: 0; /* laat de kolom krimpen zodat lange strings wrappen i.p.v. overflowen */
  overflow-wrap: break-word;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}
.footer-col a {
  color: var(--color-on-grond);
  opacity: 0.85;
  text-decoration: none;
}
.footer-col a:hover {
  opacity: 1;
  color: var(--footer-accent);
}
.footer-rollen li {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-xs);
}
.footer-rollen span {
  opacity: 0.55;
}
.footer-concept {
  margin-top: var(--space-m);
  opacity: 0.6;
  font-style: italic;
}
.footer-col .btn {
  margin-top: var(--space-s);
}
.footer-onder {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid color-mix(in srgb, var(--color-on-grond) 15%, transparent);
  opacity: 0.7;
}
/* De juridische link staat op de DONKERE footer en moet dus de footer-kleur
   volgen, niet de globale linkkleur voor lichte achtergrond (--color-primary-text
   gaf hier 1.87:1 — onder de AA-drempel). Zelfde behandeling als .footer-col a. */
.footer-onder a {
  color: var(--color-on-grond);
}
.footer-onder a:hover {
  color: var(--footer-accent);
}

/* Footer stackt: 2 kolommen op tablet, 1 op mobiel */
@media (max-width: 60rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 34rem) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ══ Blok E — oreo-fix: bandritme & maaiveld-dividers ═══════════════
   Doel: max één donkere band per pagina (klimaat blijft --color-grond),
   zachte overgangen i.p.v. harde bandranden, en meer lucht rond de
   onderzoek-strook. */

/* Groene merk-band — vervangt de tweede donkere band (CTA).
   bio-diep i.p.v. merkgroen: witte tekst haalt zo AA (≈5.8:1). */
.band--bio {
  background: var(--color-bio-diep);
  color: var(--color-on-primary);
}
.band--bio a {
  color: inherit;
}

/* Maaiveld-divider: de grondlijn keert terug als sectie-scheiding —
   dunne horizonlijn + korte grond-tint eronder, zodat banden als
   bodemlagen in elkaar overlopen (zelfde maaiveld-taal als de illustraties).
   color-mix ontbreekt op oude browsers -> lijn valt gewoon weg (safe). */
.band--maaiveld {
  position: relative;
  isolation: isolate; /* eigen stacking-context: de ::before-bleed (z-index -1)
                         blijft binnen de band, ook op pagina's zonder .landing */
  border-top: 2px solid color-mix(in srgb, var(--color-grond-bruin) 38%, transparent);
}
.band--maaiveld::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--space-2xl);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-grond-bruin) 15%, transparent),
    transparent
  );
}

/* Landing eindigt in een full-bleed band: geen witte staart voor de footer */
main:has(> .landing) {
  padding-bottom: 0;
}

/* Ruimer ritme: koppen en tekst in de banden ademen. Bewust alleen
   tekst-paren — component-blokken (.steps/.grid-cards) houden hun marge. */
.band .container > h2 + p,
.band .container > p + p {
  margin-top: var(--space-m);
}

/* Onderzoek-strook: extra lucht rondom en tussen de regels (blok E) */
.band[data-section="onderzoek"] {
  padding-block: var(--space-3xl);
}
.band[data-section="onderzoek"] .container > * + * {
  margin-top: var(--space-l);
}

/* ── Blok E — toepassingen-teaser: 4-breed of bewust 2×2, nooit 3+1 ──
   auto-fit gaf een wees-kaart (Sierteelt alleen op rij 2). Expliciete
   kolom-aantallen garanderen 4×1 / 2×2 / 1×4 — nooit een orphan. */
/* Toepassingen-pagina: 4 kaarten, zelfde 4/2x2-garantie als de home-teaser,
   scoped op .toepassingen zodat de globale .grid-cards ongemoeid blijft. */
.toepassingen .grid-cards {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 52rem) {
  .toepassingen .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 34rem) {
  .toepassingen .grid-cards {
    grid-template-columns: 1fr;
  }
}

[data-section="toepassingen-teaser"] .grid-cards {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 52rem) {
  [data-section="toepassingen-teaser"] .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 34rem) {
  [data-section="toepassingen-teaser"] .grid-cards {
    grid-template-columns: 1fr;
  }
}

/* ── Blok E — klimaat-illustratie (op de donkere band: onder het maaiveld) ──
   Wit maaiveld + merkgroen oppervlak + wit wortel/bodemleven in het donker. */
.klimaat-illustratie {
  width: 100%;
  height: auto;
  display: block;
  margin-top: var(--space-xl);
}
.klimaat-illustratie .ki-maaiveld { stroke: var(--color-on-grond); stroke-width: 3; }
.klimaat-illustratie .ki-plant    { stroke: var(--color-bio); stroke-width: 5; }
.klimaat-illustratie .ki-wortel   { stroke: var(--color-on-grond); stroke-width: 2.5; opacity: 0.5; }
.klimaat-illustratie .ki-leven    { fill: var(--color-on-grond); opacity: 0.38; }

/* ── Klimaat-en-duurzaamheid ─────────────────────────────────────── */
/* Openingsband: h1 (paginatitel) en h2 (sectiekop) laten ademen. */
[data-section="klimaatadaptatie"] h2 {
  margin-top: var(--space-s);
}
/* Cijfer-band als stat-structuur: placeholder-slots waar Hensens
   geverifieerde getallen 1-op-1 in vallen. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
  margin-top: var(--space-xl);
}
@media (max-width: 40rem) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}
.stat {
  background: var(--color-wit);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--space-l);
  text-align: center;
}
.stat-cijfer {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-kop);
  line-height: 1;
  /* Was --color-line (bijna wit-op-wit, ~1.35:1) uit de placeholder-fase;
     er staan nu échte jaartallen in — bio-diep haalt ruim AA (5.8:1). */
  color: var(--color-bio-diep);
}
.stat-label {
  display: block;
  margin-top: var(--space-s);
  font-weight: var(--weight-kop);
  color: var(--color-ink);
}
.stat-noot {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-zacht);
}
.stat-caption {
  margin-top: var(--space-l);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-ink-zacht);
}

/* ── Over-ons: tijdlijn-scaffold + rollen-blok ───────────────────── */
/* Openingsband: h1 (paginatitel) -> h2 (sectiekop) laten ademen. */
[data-section="verhaal"] h2 {
  margin-top: var(--space-s);
}
/* Tijdlijn: lege structuur met placeholder-slots. De vorm staat klaar;
   Hensens bevestigde jaartallen/pilots vallen er later 1-op-1 in. */
.tijdlijn {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-left: 2px solid var(--color-line);
}
.tijdlijn-item {
  position: relative;
  padding: 0 0 var(--space-l) var(--space-l);
}
.tijdlijn-item:last-child {
  padding-bottom: 0;
}
.tijdlijn-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.35em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}
.tijdlijn-label {
  display: block;
  font-weight: var(--weight-kop);
  color: var(--color-ink-zacht);
}
.tijdlijn-noot {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-zacht);
}
/* Rollen: wat bio-grond zelf doet, als 3-koloms blok. Geen entiteiten
   of aandeelhouders (klantfeedback 21-07-2026). */
.rollen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
  margin-top: var(--space-xl);
}
@media (max-width: 40rem) {
  .rollen-grid {
    grid-template-columns: 1fr;
  }
}
.rol-kaart {
  background: var(--color-wit);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--space-l);
}
.rol-naam {
  display: block;
  font-weight: var(--weight-kop);
  color: var(--color-ink);
}
.rol-toelichting {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-zacht);
}

/* ── FAQ (wat-is-bio-grond) ──────────────────────────────────────── */
.faq-lijst {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-l);
}
.faq-item h3 {
  margin-bottom: var(--space-2xs);
}
.faq-item p {
  color: var(--color-ink-zacht);
}

/* ── Kosten & baten: doelgroep-cards bewust 2×2 (nooit 3+1) ──────── */
.grid-cards--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 40rem) {
  .grid-cards--2 {
    grid-template-columns: 1fr;
  }
}
/* Doorverwijs-regel onder een card-grid ademt mee met het bandritme */
.band .container > .grid-cards + p,
.toepassingen .grid-cards + .section {
  margin-top: var(--space-xl);
}

/* ── Contact: formulier + contactgegevens naast elkaar ───────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-2xl) var(--space-xl);
  align-items: start;
}
@media (max-width: 48rem) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}
/* Formulier boven-uitlijnen met het gegevens-blok (form houdt zijn eigen
   styling uit blok A; alleen de top-marge in deze layout weg). */
.contact-hoofd .contact-form {
  margin-top: 0;
}
.contact-gegevens dl {
  margin: var(--space-m) 0 0;
}
.contact-gegevens dt {
  font-weight: var(--weight-kop);
  color: var(--color-ink);
}
.contact-gegevens dd {
  margin: 0 0 var(--space-m);
  color: var(--color-ink-zacht);
}

/* ── SDG-hero ────────────────────────────────────────────────────────
   Hergebruikt bewust het bestaande hero-patroon (.hero + .hero-media +
   overlay); alleen de hoogte en de uitsnede zijn eigen. Lager dan de
   home-hero: op 375px staat de header al op ~214px, dus een compacte hero
   houdt de eerste tegels binnen bereik. De rest (fotolaag, overlay, witte
   tekst) komt uit .hero. */
.sdg-hero {
  min-height: clamp(19rem, 46vh, 28rem);
  min-height: clamp(19rem, 46svh, 28rem);
  padding-block: var(--space-2xl);
  align-items: end;
}
/* Uitsnede: de horizon van de foto op het bovenste derde, op ELK formaat.
   Procentuele object-position legt het punt op 29% van de AFBEELDING op het
   punt op 29% van de BOX, ongeacht de verhouding. Zonder deze regel bepaalt
   de toevallige hero-verhouding de uitsnede: dan staat de horizon op 11% op
   desktop (bijna alleen weiland, lucht weggesneden) en op 28% op mobiel —
   twee verschillende foto's. Met 29% blijft het dezelfde compositie: lucht en
   mist boven, weiland eronder waar de tekst staat. */
.sdg-hero .hero-media img {
  object-position: 50% 29%;
}
/* Het beeld is lichter (mistige lucht) dan de hero-video: meer inkt in de
   overlay, zodat witte tekst er ruim boven de AA-drempel op blijft. */
.sdg-hero .hero-media::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-ink) 30%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 70%, transparent) 38%,
    color-mix(in srgb, var(--color-ink) 84%, transparent) 100%
  );
}
.sdg-hero h1 {
  max-width: 20ch;
}
.sdg-hero-lead {
  margin-top: var(--space-s);
  max-width: 38ch;
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
}

/* ── SDG-pagina: tegels met eigen accentkleur ────────────────────────
   Bewust GEEN officiële VN-iconen of SDG-wiel (licentiegebonden voor
   commercieel gebruik): elke tegel is eigen vormgeving in de huisstijl.
   De accentkleur zit als SVG-fill in de markup — de CSP van de site staat
   geen inline styles toe — dus hier alleen maatvoering en ritme. */
.sdg-kop {
  max-width: var(--measure);
}
/* Kolommen expliciet in plaats van auto-fit. Reden: het sluitbeeld hieronder
   moet weten hoeveel plekken er op de laatste rij overblijven, en dat is
   kolommen min (doelen modulo kolommen). Met auto-fit is het kolomaantal pas
   na layout bekend en valt daar niets over te zeggen; met vaste drempels wel.
   De drempels zijn zo gekozen dat de layout blijft zoals hij was: 3 kolommen
   vanaf 64rem (daar gaf auto-fit met minmax(19rem) er ook 3), 2 kolommen vanaf
   44rem, daaronder 1. */
.sdg-grid {
  list-style: none;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .sdg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .sdg-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sdg-tegel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sdg-nummer {
  width: 3rem;
  height: 3rem;
  display: block;
  margin-bottom: var(--space-m);
  flex: none;
}
.sdg-tegel h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-xs);
}
/* Accentstreep onder de doelnaam. Ligt in de layout ALTIJD over de volle
   tekstbreedte; in rust is er maar 3.5rem van te zien doordat de rest is
   weggeknipt. Bij hover schuift de knip naar rechts weg en loopt de streep
   door tot de rechterrand van de kaartinhoud — hoe breed die ook is.
   Waarom clip-path en geen breedte- of scaleX-animatie:
     * `width` animeren zet elke frame de layout opnieuw op (schokkerig);
     * `scaleX` vraagt een vaste factor, en de kaarten zijn niet even breed
       (auto-fit-grid) en de koppen niet even lang — 1.75x liep bij de ene
       kaart tot de rand en bij de andere tot halverwege.
   clip-path rekent zelf met de werkelijke breedte en raakt de layout niet. */
.sdg-streep {
  display: block;
  width: 100%;
  height: 4px;
  margin-bottom: var(--space-s);
  border-radius: 2px;
  clip-path: inset(0 calc(100% - 3.5rem) 0 0 round 2px);
}
.sdg-tegel p {
  margin: 0;
}

/* Sluitbeeld in het grid. `grid-column: auto / -1` is hier het hele
   mechanisme: de tegel begint op de eerstvolgende vrije plek en loopt door tot
   de laatste kolomlijn. Blijven er twee plekken over, dan vult hij er twee;
   blijft er één over, dan één; komen de doelen precies uit, dan wordt het een
   volle rij eronder. Werkt daarmee bij elk aantal doelen (CMS-beheerd) en bij
   elk aantal kolommen (auto-fit), zonder JS en zonder telwerk in PHP.
   Geen padding: het beeld loopt tot de rand van de kaart. Geen hover: dit is
   geen doel, dus het reageert ook niet als een doel. */
.sdg-beeldtegel {
  grid-column: span 1;
  padding: 0;
  overflow: hidden;
  min-height: 14rem;
  /* base.css zet `p, li { max-width: var(--measure) }` voor leesbare
     regellengte. Dat is terecht voor tekst, maar knipt een beeldtegel die over
     meerdere kolommen loopt af op 65ch (733px). Hier dus uit; de tekst-tegels
     houden de cap gewoon. */
  max-width: none;
}
/* De span volgt het aantal doelen: PHP rekent per kolom-variant uit hoeveel
   plekken er overblijven, de media query kiest welke telt. */
@media (min-width: 44rem) and (max-width: 63.999rem) {
  .sdg-beeldtegel[data-vul2="1"] { grid-column: span 1; }
  .sdg-beeldtegel[data-vul2="2"] { grid-column: span 2; }
  /* Volle rij: hoogtekap, anders volgt het beeld zijn eigen 16:9 en wordt de
     afsluiting een halve schermhoogte hoog. Bij een DEEL van een rij juist
     geen kap: daar hoort de tegel even hoog te zijn als zijn buren. */
  .sdg-beeldtegel[data-vul2="2"] { max-height: 18rem; }
}
@media (min-width: 64rem) {
  .sdg-beeldtegel[data-vul3="1"] { grid-column: span 1; }
  .sdg-beeldtegel[data-vul3="2"] { grid-column: span 2; }
  .sdg-beeldtegel[data-vul3="3"] { grid-column: span 3; max-height: 18rem; }
}
.sdg-beeldtegel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Hover op de tegels ──────────────────────────────────────────────
   De tegels zijn GEEN links. De reactie mag dus niet lezen als "klik hier":
   geen cursor: pointer, en bewust minder verheffing en minder schaduw dan
   .card--link:hover (dat is op deze site de taal van een klikbare kaart).
   Wat er wél gebeurt is een leesteken: de kaart komt 2px op, de rand tekent
   zich iets scherper af en de accentstreep van dát doel groeit naar rechts
   uit. Die streep is het enige element dat de kleur van het doel draagt, dus
   het accent wordt letterlijk nadrukkelijker zonder dat de CSS de kleur hoeft
   te kennen — die staat als SVG-fill in de markup (CSP: style-src 'self').

   Alleen achter (hover: hover) en (pointer: fine): op touch bestaat er geen
   hover-toestand die weer weg kan, dus daar gebeurt niets en blijft er niets
   plakken. Duur uit --dur-micro, dezelfde token als de rest van de site. */
@media (hover: hover) and (pointer: fine) {
  .sdg-tegel {
    transition:
      transform var(--dur-micro) var(--ease-out-soft),
      box-shadow var(--dur-micro) var(--ease-out-soft),
      border-color var(--dur-micro) var(--ease-out-soft);
  }
  /* De streep krijgt tweemaal --dur-micro: hij legt nu de hele tekstbreedte
     af in plaats van 42px, en op 200ms schiet dat er te snel doorheen om als
     onderstrepen te lezen. Afgeleid van het bestaande token i.p.v. een nieuw
     getal, zodat reduced-motion (dat --dur-micro op 0 zet) hier vanzelf
     doorwerkt. */
  .sdg-tegel .sdg-streep {
    transition: clip-path calc(var(--dur-micro) * 2) var(--ease-out-soft);
  }
  .sdg-tegel:hover {
    /* Verder omhoog dan .card--link:hover (-3px), met een grotere en zachtere
       schaduw: veel vervaging, weinig dekking, geen tweede harde rand. De
       kaart komt daardoor los van de band zonder dat er een slagschaduw
       onder verschijnt. Kleur uit --color-ink via color-mix, geen nieuwe. */
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--color-line) 55%, var(--color-ink));
    /* Gemeten tegen de zandband (--color-surface-alt), niet tegen wit: daar
       viel de oude schaduw weg. Nabij-schaduw bewust laag gehouden (8%),
       want die tekent bij hogere dekking een zichtbare lijn onder de kaart en
       dan wordt het een slagschaduw. De diepte komt van de verre laag: 56px
       vervaging op 34%. Verschil met de band: delta L* 5.6 -> 17.5. */
    box-shadow:
      0 2px 6px color-mix(in srgb, var(--color-ink) 8%, transparent),
      0 28px 56px color-mix(in srgb, var(--color-ink) 34%, transparent);
  }
  .sdg-tegel:hover .sdg-streep {
    clip-path: inset(0 0 0 0 round 2px);
  }
}

/* Reduced motion: geen verplaatsing en geen groei, wel de rustige
   rand-/schaduwwissel. De duur-tokens staan dan al op 0ms (tokens.css), dus
   er valt sowieso niets te animeren; dit haalt ook de beweging zelf weg. */
@media (prefers-reduced-motion: reduce) {
  .sdg-tegel:hover {
    transform: none;
  }
}

/* ── Advies & Projectmanagement ──────────────────────────────────── */
.dienst-kaart .icon-maaiveld {
  width: 3.5rem;
  margin-bottom: var(--space-m);
}
.dienst-kaart h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-s);
}
/* Subkop (pay-off) onder de dienstnaam: kleiner dan de kop, merk-diepgroen en
   medium gewicht, zodat hij leest als ondertitel en niet als eerste bodyregel.
   Optioneel veld: zonder subkop rendert de kaart als vanouds. */
.dienst-kaart .dienst-subkop {
  color: var(--color-bio-diep);
  font-weight: var(--weight-medium);
  margin: calc(-1 * var(--space-2xs)) 0 var(--space-s);
}
/* Afsluiter boven de CTA-band; de slotregel is de losse accentregel uit de
   aangeleverde tekst en krijgt kop-gewicht in merk-diepgroen. */
.afsluiter-band p {
  max-width: var(--measure);
}
.afsluiter-band .afsluiter-slotregel {
  color: var(--color-bio-diep);
  font-weight: var(--weight-kop);
  font-size: var(--text-h3);
  margin-top: var(--space-m);
}
.werkwijze {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: var(--space-l);
}
.werkwijze-stap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  max-width: var(--measure);
}
.werkwijze-nummer {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-bio-diep);
  color: var(--color-on-primary);
  font-weight: var(--weight-kop);
}
.werkwijze-tekst h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2xs);
}
.werkwijze-tekst p {
  margin: 0;
  color: var(--color-ink-zacht);
}