/* ==========================================================================
   GREENMIL — huisstijl-gedreven stylesheet
   Kleuren, typografie en kernwaarden volgen het merkdocument "Huisstijl Greenmil".
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Merkkleuren — exact uit de huisstijl */
  --green-900: #223E29;   /* primair, donkere vlakken, koppen */
  --green-500: #6F8D65;   /* accent — alleen groot/decoratief (3.26:1 op crème) */
  --green-200: #CEDDC7;   /* tint */
  --cream:     #F4F0E8;   /* papier */
  --charcoal:  #3D3D3D;   /* broodtekst — 10.9:1 op crème */

  /* Afgeleiden, uitsluitend voor contrast en dieptewerking.
     --green-500 haalt op crème 3.26:1 en is dus alleen toegestaan voor grote
     tekst (>=24px), lijnen en decoratie. Voor kleine tekst en interactiestaten
     gebruiken we --green-700, een donkerder variant uit dezelfde salietint. */
  --paper:      #FBFAF6;
  /* --green-200 op 18% over --cream: een nauwelijks waarneembare saliewas,
     uitsluitend bedoeld voor de zachte overgang tussen sectie 03 en 04. */
  --wash:       #EDEDE2;                      /* broodtekst haalt hier 9.2:1 */
  --green-700:  #4F6A48;                      /* 5.3:1 op crème */
  --muted:      #5A5A5A;                      /* 6.1:1 op crème */
  --rule:       rgba(34, 62, 41, .14);
  --rule-solid: rgba(34, 62, 41, .28);
  --rule-dark:  rgba(244, 240, 232, .18);
  --muted-dark: rgba(244, 240, 232, .72);     /* 7.4:1 op groen */

  /* Typografie */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Lato", "Segoe UI", system-ui, sans-serif;

  /* Ritme — 8pt */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 6rem;   --s-8: 8rem;  --s-9: 10rem;

  --wrap: 1240px;
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;              /* 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--green-900);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

::selection { background: var(--green-200); color: var(--green-900); }

/* ------------------------------------------------------- focus & skip-link */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--green-900);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--values :focus-visible,
.section--contact :focus-visible,
.site-footer :focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 200;
  background: var(--green-900); color: var(--cream);
  padding: .75rem 1.25rem; text-decoration: none;
  font-family: var(--font-display); font-size: .875rem;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--s-2); }

/* -------------------------------------------------------------- bouwstenen */
.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 2.5rem); } }

.section { padding-block: clamp(4.5rem, 10vw, 9rem); }

/* Ankerdoelen vrijhouden van de vaste header, anders valt de sectiekop erachter. */
:where(.section, .hero)[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Alleen voor schermlezers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Kantlijn-raster: label in de marge, inhoud rechts — als een technische tekening */
.grid-note { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 900px) {
  .grid-note { grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-6); }
  .note-col { padding-top: .55rem; }
}

/* Het merk-kenmerk: wijd gespatieerde kapitalen */
.label {
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--muted);
  margin: 0;
}
.label--accent { color: var(--green-900); }
.label--onDark { color: var(--green-200); }
.label--tiny   { font-size: .625rem; letter-spacing: .22em; }

.h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: var(--s-3); }
.h2--onDark { color: var(--cream); }

.prose p + p { margin-top: var(--s-2); }
.measure { max-width: 62ch; }
.prose { color: var(--charcoal); }

.footnote {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--muted);
  max-width: 68ch;
}

.link {
  color: var(--green-900);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-solid);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link:hover { border-bottom-color: var(--green-900); }
.link--onDark { color: var(--cream); border-bottom-color: var(--rule-dark); }
.link--onDark:hover { border-bottom-color: var(--cream); }

/* ------------------------------------------------------------------ knoppen */
.btn {
  --btn-bg: transparent; --btn-fg: var(--green-900); --btn-bd: var(--green-900);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.65rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-display); font-size: .875rem; font-weight: 500;
  letter-spacing: .04em; text-decoration: none; cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn--solid { --btn-bg: var(--green-900); --btn-fg: var(--cream); }
.btn--solid:hover { --btn-bg: #1a3020; --btn-bd: #1a3020; }
.btn--ghost:hover { --btn-bg: var(--green-900); --btn-fg: var(--cream); }
.btn--light {
  --btn-bg: var(--cream); --btn-fg: var(--green-900); --btn-bd: var(--cream);
}
.btn--light:hover { --btn-bg: var(--green-200); --btn-bd: var(--green-200); }
.btn--sm { min-height: 42px; padding: .55rem 1.2rem; font-size: .8125rem; }

/* =============================================================== header === */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(244, 240, 232, .94);
  border-bottom-color: var(--rule);
}
@supports (backdrop-filter: blur(6px)) {
  .site-header.is-stuck { backdrop-filter: blur(6px); }
}

.site-header__inner {
  width: min(100% - 3rem, var(--wrap));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
@media (max-width: 640px) { .site-header__inner { width: calc(100% - 2.5rem); } }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { width: auto; height: 34px; }
.brand__name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green-900);
}

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav__list { display: flex; align-items: center; gap: var(--s-3); }
.nav__list a {
  font-family: var(--font-display); font-size: .875rem; font-weight: 400;
  color: var(--green-900); text-decoration: none;
  padding: .5rem 0; position: relative;
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem;
  height: 1px; background: var(--green-900);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 48px; height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle__bar {
  display: block; width: 24px; height: 1.5px; background: var(--green-900);
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    padding: var(--s-2) 1.25rem var(--s-4);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .24s var(--ease), transform .24s var(--ease);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block; padding: 1rem 0; font-size: 1.0625rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__list a::after { display: none; }
  .nav__cta { margin-top: var(--s-3); align-self: flex-start; }
}

/* ================================================================= hero === */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100svh;
  padding-top: var(--header-h);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 52fr 48fr; align-items: stretch; }
}

.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-5);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 5rem) clamp(1.75rem, 3vw, 2.5rem);
  width: min(100%, calc(var(--wrap) / 2 + 3rem));
  margin-left: auto;
}
.hero__text-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero__text { width: 100%; margin-left: 0; }
}

.hero__title {
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -.035em;
  margin-top: var(--s-2);
}
.hero__lead {
  margin-top: var(--s-3);
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--charcoal);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s-3); }

.hero__foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding-top: var(--s-3); border-top: 1px solid var(--rule);
}
.hero__foot p {
  font-family: var(--font-display); font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* Het ringmotief — ontleend aan het kooiframe van de turbine */
.ring {
  width: 34px; height: 34px; flex: none;
  fill: none; stroke: var(--green-500); stroke-width: 2.2;
  animation: ring-spin 90s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

.hero__media { position: relative; background: var(--green-200); min-height: 58svh; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

@media (min-width: 900px) {
  /* De foto absoluut positioneren, zodat haar eigen hoogte de rasterrij niet
     opblaast; de tekstkolom bepaalt de hoogte van de hero. */
  .hero__media { min-height: 0; overflow: hidden; }
  .hero__media img { position: absolute; inset: 0; }
}

/* ================================================================ intro === */
.section--intro { padding-block: clamp(4rem, 9vw, 8rem); }
.signature {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-900);
}

/* ============================================================== turbine === */
.section--turbine { background: var(--paper); border-block: 1px solid var(--rule); }

.turbine__layout { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 900px) {
  .turbine__layout {
    grid-template-columns: 46fr 54fr; gap: var(--s-7); align-items: start;
  }
}
.turbine__figure { margin: 0; }
.turbine__figure img { width: 100%; }

.speclist__row {
  display: grid; gap: .35rem;
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule);
}
.speclist__row:last-child { border-bottom: 1px solid var(--rule); }
/* Pas naast elkaar zetten wanneer de omschrijving een leesbare regellengte houdt. */
@media (min-width: 1200px) {
  .speclist__row { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-3); }
}
.speclist dt {
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
  color: var(--green-900);
}
.speclist dd { margin: 0; color: var(--muted); }

.detail-pair { display: grid; gap: var(--s-4); margin-top: var(--s-7); }

@media (min-width: 780px) {
  /* Gelijke kolommen en één gedeelde beeldhoogte: de diameter van de ronde foto
     komt daarmee overeen met de hoogte van de rechthoekige foto, waardoor beide
     beelden even zwaar wegen en de bijschriften vanzelf op één lijn staan. */
  .detail-pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: start;
  }
  /* De hoogte volgt de kolombreedte, zodat de rechthoekige foto dicht bij haar
     eigen 3:2-verhouding blijft en object-fit nauwelijks hoeft bij te snijden. */
  .detail img {
    width: 100%;
    height: clamp(15rem, 29vw, 24rem);
    object-fit: cover;
  }
  .detail--round { display: grid; justify-items: center; }
  .detail--round img { width: auto; aspect-ratio: 1; margin-inline: auto; }
  .detail--round figcaption { text-align: center; }
}

.detail { margin: 0; }
.detail figcaption {
  margin-top: .85rem;
  font-family: var(--font-display); font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* De ronde uitsnede blijft bewust behouden, inclusief de omringende ruimte. */
.detail--round img { border-radius: 50%; }

/* Technische gegevens — zelfde haarlijn-idioom als de speclist, geen kaarten. */
.specs { margin-top: var(--s-7); }
.specs .label { margin-bottom: var(--s-3); }
.specgrid { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 780px) {
  .specgrid { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
}
.specgrid__row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-2);
  padding-block: .85rem; border-bottom: 1px solid var(--rule);
}
@media (max-width: 460px) { .specgrid__row { grid-template-columns: 1fr; gap: .15rem; } }
.specgrid dt {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.specgrid dd { margin: 0; color: var(--green-900); }

/* ============================================================== werking === */
.werking__layout { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 900px) {
  .werking__layout {
    grid-template-columns: 40fr 60fr; gap: var(--s-7); align-items: start;
  }
}
.werking__media { margin: 0; }
.werking__media figcaption {
  margin-top: .85rem;
  font-family: var(--font-display); font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* De stappen hangen aan één verticale lijn met drie ringen — de geometrie van
   de turbine zelf: een verticale as met gestapelde ringen eromheen. */
.steps { position: relative; display: grid; gap: var(--s-4); }
.steps::before {
  content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px;
  width: 1px; background: var(--rule-solid);
}
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); }

.step__num {
  position: relative; z-index: 1;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--rule-solid); border-radius: 50%;
  background: var(--cream);
  font-family: var(--font-display); font-weight: 400; font-size: .8125rem;
  color: var(--green-700); letter-spacing: .06em;
}
.step__title { font-size: 1.25rem; padding-top: .55rem; }
.step p { margin-top: .55rem; color: var(--muted); max-width: 46ch; }

/* Uitgelicht tekstblok (bv. zon + wind) — haarlijnen, geen kaart. */
.callout-block {
  margin-top: var(--s-6);
  padding: var(--s-3) 0 var(--s-3) var(--s-3);
  border-left: 2px solid var(--green-500);
  max-width: 68ch;
}
.callout-block__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
  color: var(--green-900); margin-bottom: .4rem;
}
.callout-block p { color: var(--muted); }
.callout-block p + p { margin-top: .7rem; }
.callout-block em { font-style: italic; color: var(--green-900); }

/* ============================================================ voordelen === */
/* Zachte overgang vanuit "Hoe het werkt". De gradient begint exact op --cream,
   de achtergrondkleur van sectie 03, zodat er geen zichtbare naad ontstaat, en
   zakt over de eerste 42% van deze sectie weg in --wash. De verloopband ligt
   bewust in sectie 04, zodat de opaque stapcirkels in sectie 03 op een vlakke
   achtergrond blijven staan. */
.section--voordelen {
  background: linear-gradient(
    to bottom,
    var(--cream) 0%,
    var(--wash) 42%,
    var(--wash) 100%
  );
}

.benefits { display: grid; gap: 0; margin-top: var(--s-5); }
@media (min-width: 700px) { .benefits { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
.benefits li { padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.benefits h3 { font-size: 1.125rem; }
.benefits p { margin-top: .45rem; color: var(--muted); max-width: 42ch; }
.benefits sup { font-size: .7em; line-height: 0; vertical-align: super; }

/* Voetnoot bij de opbrengstclaim — ingetogen, maar leesbaar (6.1:1). */
.benefits__note {
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  font-size: .875rem; color: var(--muted); max-width: 64ch;
  text-wrap: pretty;
}

/* =============================================================== waarden === */
.section--values { background: var(--green-900); color: var(--cream); }
.section--values .label { margin-bottom: var(--s-5); }

.values { display: grid; gap: 0; }
@media (min-width: 780px) { .values { grid-template-columns: repeat(3, 1fr); } }

.value { padding: var(--s-4) 0; border-top: 1px solid var(--rule-dark); }
@media (min-width: 780px) {
  .value { padding: var(--s-4) var(--s-5); border-top: 0; border-left: 1px solid var(--rule-dark); }
  .value:first-child { padding-left: 0; border-left: 0; }
  .value:last-child { padding-right: 0; }
}
.value__icon {
  width: 46px; height: 46px;
  fill: none; stroke: var(--green-200); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.value h3 { margin-top: var(--s-3); color: var(--cream); font-size: 1.375rem; }
.value p { margin-top: .6rem; color: var(--muted-dark); max-width: 34ch; }

/* ========================================================== ontwikkeling === */
.timeline { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 780px) {
  /* Bewust rechtlijnig raster: kaarten in dezelfde rij starten op één lijn.
     De rijafstand is ruimer dan de kolomafstand, zodat rijen duidelijk scheiden. */
  .timeline {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-6);
    row-gap: var(--s-7);
    align-items: start;
  }
}
/* align-content: start voorkomt dat automatische rijen uitrekken wanneer de
   naastgelegen kolom hoger is — anders ontstaat er een lege vlek onder de foto. */
.tl { display: grid; gap: var(--s-3); align-content: start; }
.tl__media { margin: 0; overflow: hidden; background: var(--green-200); }
.tl__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .7s var(--ease);
}
.tl:hover .tl__media img { transform: scale(1.03); }
.tl__body { display: grid; gap: .5rem; }
/* Laatste stap in de tijdlijn: een ingetogen markering dat de turbine leverbaar is. */
.tl__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--green-700); justify-self: start;
}
.tl__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500); flex: none;
}
.tl__body h3 { font-size: 1.25rem; }
.tl__body p { color: var(--muted); max-width: 44ch; }

/* ============================================================ toepassing === */
.section--use { background: var(--paper); border-block: 1px solid var(--rule); }
.use__layout { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .use__layout { grid-template-columns: 46fr 54fr; gap: var(--s-7); align-items: center; }
}
.use__media { margin: 0; }
.use__text .label { margin-bottom: var(--s-3); }
.use__text .h2 { margin-bottom: var(--s-3); }
.use__text .prose { max-width: 52ch; }
.callout {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-size: 1.0625rem; color: var(--green-900);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
}

/* =================================================================== faq === */
.faq { margin-top: var(--s-4); border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }

.faq__q {
  width: 100%; min-height: 64px; padding: 1.15rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--green-900); letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--green-700); }

/* Plus/min zonder icoonlettertype — twee lijnen, één draait weg */
.faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor;
  transition: transform .28s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__a { overflow: hidden; }
.faq__a p { padding-bottom: 1.4rem; color: var(--muted); max-width: 62ch; }

/* ================================================================ boeken === */
.section--boeken { background: var(--paper); border-block: 1px solid var(--rule); }

/* Op smalle schermen vullen de foto's bijna de volledige breedte. Het lichtere
   --paper vlak bleef dan als een smalle rand rond het beeld staan, waardoor de
   foto in een wit kaartje leek te zitten. Onder 780px krijgen de secties mét
   foto's daarom exact de paginakleur; de haarlijnen verzorgen de scheiding.
   Deze regel staat bewust ná de sectiedefinities, zodat hij door bronvolgorde
   wint. Sectie 09 (boeken) houdt --paper: de invoervelden zijn --cream en
   hebben dat contrastverschil nodig om herkenbaar te blijven. */
@media (max-width: 779px) {
  .section--turbine,
  .section--use { background: var(--cream); }
}

/* Prijsinformatie — sober blok met haarlijnen, bewust geen webshop-kaart. */
.pricebox {
  margin-top: var(--s-5);
  display: grid; gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule-solid);
  border-bottom: 1px solid var(--rule-solid);
}
@media (min-width: 700px) {
  .pricebox { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-6); }
}
.pricebox__product {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.pricebox__amount {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.25rem); line-height: 1.02;
  letter-spacing: -.03em; color: var(--green-900); margin-top: .45rem;
}
.pricebox__incl { margin-top: .5rem; font-size: .9375rem; color: var(--muted); }

.pricebox__title {
  font-family: var(--font-display); font-weight: 500; color: var(--green-900);
  margin-bottom: .7rem;
}
.pricebox__list { display: grid; gap: .5rem; }
.pricebox__list li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: .65rem;
  align-items: start; color: var(--charcoal);
}
.tick {
  width: 16px; height: 16px; margin-top: .42em;
  fill: none; stroke: var(--green-700); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Voorwaarden als compacte definitielijst — leest als een offerte, niet als proza. */
.pricebox__terms {
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  display: grid; gap: .5rem;
}
@media (min-width: 520px) { .pricebox__terms { grid-template-columns: 1fr 1fr; gap: .5rem var(--s-3); } }
.pricebox__terms dt {
  font-family: var(--font-display); font-size: .625rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.pricebox__terms dd { margin: .15rem 0 0; font-size: .9375rem; color: var(--charcoal); }

/* ------------------------------------------------------------- formulier -- */
.bookform { margin-top: var(--s-6); }
.bookform__hint { font-size: .875rem; color: var(--muted); margin-bottom: var(--s-3); }

/* Honeypot: buiten beeld, niet focusbaar, onzichtbaar voor schermlezers. */
.hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.bookform__summary {
  margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3);
  border-left: 2px solid #9B3B22; background: rgba(155, 59, 34, .05);
}
.bookform__summary-title {
  font-family: var(--font-display); font-weight: 500; color: #7E2F1B; margin-bottom: .3rem;
}
.bookform__summary ul { display: grid; gap: .2rem; }
.bookform__summary a { color: #7E2F1B; }

.field-grid { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .field-grid { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; }
.field--wide { margin-top: var(--s-3); }
.field label,
.fieldset legend {
  font-family: var(--font-display); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--rule-solid); border-radius: 0;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 0; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--green-700) 50%),
    linear-gradient(135deg, var(--green-700) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--green-700); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--green-900); outline-offset: 2px; border-color: var(--green-900);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #9B3B22; }

.field__error { font-size: .875rem; color: #7E2F1B; }

.fieldset { margin-top: var(--s-3); padding: 0; border: 0; }
.fieldset legend { padding: 0; margin-bottom: .55rem; }
.radiorow { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.radio { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
/* 24px voldoet aan de minimale doelgrootte (WCAG 2.2 AA). */
.radio input { width: 24px; height: 24px; flex: none; accent-color: var(--green-900); }
.radio label {
  font-family: var(--font-body); font-size: 1rem; letter-spacing: 0;
  text-transform: none; color: var(--charcoal); cursor: pointer;
}

.bookform__actions {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
}
.bookform__status { font-size: .9375rem; color: var(--muted); max-width: 46ch; }
.bookform__status[data-state="error"] { color: #7E2F1B; }

.bookform__privacy {
  margin-top: var(--s-3);
  font-size: .875rem; color: var(--muted); max-width: 62ch;
  text-wrap: pretty;
}

.directcontact {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.directcontact__lines {
  margin-top: .5rem;
  font-family: var(--font-display); font-size: 1.0625rem; color: var(--green-900);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
}
.directcontact__sep { color: var(--green-500); }

/* =============================================================== contact === */
.section--contact { background: var(--green-900); color: var(--cream); }
.contact__layout { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .contact__layout { grid-template-columns: 58fr 42fr; gap: var(--s-8); align-items: start; }
}
.contact__intro .h2 { margin-block: var(--s-3) var(--s-3); }
.contact__lead { color: var(--muted-dark); max-width: 46ch; }

.contactlist { display: grid; gap: 0; }
.contactlist > div {
  display: grid; gap: .25rem;
  padding-block: var(--s-2); border-top: 1px solid var(--rule-dark);
}
.contactlist > div:last-of-type { border-bottom: 1px solid var(--rule-dark); }
.contactlist dt {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--green-200);
}
.contactlist dd { margin: 0; font-size: 1.0625rem; color: var(--cream); }
.contactlist dd a { display: inline-block; padding-block: 3px; }
.contact__role {
  display: block; font-size: .875rem; color: var(--muted-dark); margin-top: .1rem;
}
.contact__details .btn { margin-top: var(--s-4); }

/* Sociale kanalen — inline SVG, geen extra pakket. */
.social { display: grid; gap: .35rem; margin-top: .2rem; }
.social__link {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 44px; padding-block: 2px;
  color: var(--cream); text-decoration: none;
  transition: color .2s var(--ease);
}
.social__icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: var(--green-200); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s var(--ease);
}
.social__link:hover .social__icon { stroke: var(--cream); }
.social__text { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.social__handle { color: var(--muted-dark); font-size: .9375rem; }
.social__link:hover .social__handle { color: var(--cream); }

.footer-handle { color: rgba(244, 240, 232, .55); }
.site-footer__nav a:hover .footer-handle { color: var(--muted-dark); }

/* ================================================================ footer === */
.site-footer {
  background: var(--green-900); color: var(--cream);
  border-top: 1px solid var(--rule-dark);
  padding-block: var(--s-6) var(--s-4);
}
.site-footer__top { display: grid; gap: var(--s-6); }
@media (min-width: 780px) {
  .site-footer__top { grid-template-columns: 1fr 1.15fr; gap: var(--s-7); }
}
.site-footer__brand img { width: 190px; height: auto; }
.site-footer__line {
  margin-top: var(--s-2);
  font-family: var(--font-display); font-size: .75rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green-200);
}

.site-footer__nav { display: grid; gap: var(--s-4); }
@media (min-width: 560px) { .site-footer__nav { grid-template-columns: repeat(3, 1fr); } }
.site-footer__nav .label { margin-bottom: var(--s-2); }
.site-footer__nav ul { display: grid; gap: .25rem; }
.site-footer__nav a {
  display: inline-block; padding-block: 5px;   /* aanraakdoel >= 24px (WCAG 2.2) */
  color: var(--muted-dark); text-decoration: none; font-size: .9375rem;
  transition: color .2s var(--ease);
}
.site-footer__nav a:hover { color: var(--cream); }

.site-footer__bottom {
  margin-top: var(--s-6); padding-top: var(--s-3);
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: .5rem var(--s-3); justify-content: space-between;
  font-size: .8125rem; color: var(--muted-dark);
}

/* ============================================================= beweging === */
/* Subtiel: alleen opkomen bij binnenkomst, niets meer. */
/* Alleen wanneer JavaScript draait; zonder JS blijft alles zichtbaar. */
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .ring { animation: none; }
  .tl__media img { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}