/* ============================================================
   Bouwteam Boost — stylesheet
   Huisstijl: "Bold structure" — geel, donker, crème + fasekleuren
   ============================================================ */

/* ---------- Fonts (self-hosted, AVG-proof) ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Variable.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Geomanist voor de koppen (klantwens). Drie losse gewichten, geen variabel bestand —
   elk gewicht krijgt een bereik zodat font-weight: 800 (overal in de koppen) automatisch
   de Bold-face pakt; Geomanist zelf heeft geen 800-snit. */
@font-face {
  font-family: 'Geomanist';
  src: url('../fonts/Geomanist-Book.woff2') format('woff2');
  font-weight: 200 399;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geomanist';
  src: url('../fonts/Geomanist-Regular.woff2') format('woff2');
  font-weight: 400 599;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geomanist';
  src: url('../fonts/Geomanist-Bold.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --color-primary: #FBCF0A;
  --color-dark: #2C292B;
  --color-cream: #F5EDE2;
  --color-text: #1a1a1a;
  --color-text-light: #5b5651;
  --color-white: #ffffff;

  /* Eén bron voor de headerhoogte: de header zelf, de hero-hoogte en alles wat eronder
     moet uitkomen rekenen hiermee. Anders lopen die getallen bij de eerste wijziging
     uit elkaar. */
  --header-inhoud: 5.5rem;
  --header-hoogte: calc(var(--header-inhoud) + 1px); /* + de onderlijn */

  --phase-1: #866452;
  --phase-2: #966170;
  --phase-3: #6E7852;
  --phase-4: #AD9844;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 3rem;
  --spacing-xl: 6rem;

  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Geomanist', 'Manrope', system-ui, sans-serif;
  --font-size-base: 1.0625rem;

  --radius: 0.875rem;
  --radius-lg: 1.5rem;
  /* Afronding van hele secties. Groter dan --radius-lg: op volle schermbreedte leest 24px
     als een slordigheidje in plaats van een vorm. */
  --radius-sectie: 2.5rem;
  /* Breedte van de donkere randen die de hero doortrekken (zie .herken__randen).
     Geen vast getal, want de tekst mag er nooit op landen. De inhoud begint op
     (venster - container) / 2 + padding; is het venster smaller dan de container, dan is
     dat gat 0 en blijft er maar 0,5rem over. Vandaar de min(): hij groeit mee tot 2,5rem
     zodra er ruimte naast de container is, en krimpt vanzelf als die er niet is.
     Met een vaste 2,5rem stond de kop tussen 769 en ~1290px op het donker. */
  --rand-breedte: min(2.5rem, calc(max(0px, (100vw - var(--maxw)) / 2) + 0.5rem));
  /* Hoe ver de randen de sectie "herken" in lopen — van boven de hero, van onder de gele
     grunge. Samen sluiten ze de sectie in als een kaart. main.js meet de sectiehoogte,
     want CSS kan dat niet: een procentuele marge rekent met de BREEDTE van de ouder.
     Deze 30rem is alleen de terugval zonder JS — dan raken ze elkaar niet, maar blijft
     het beeld heel. */
  --herken-hoogte: 30rem;
  /* Waar donker en geel elkaar raken, van boven af gemeten. Eén getal om aan te draaien;
     de twee randen tellen altijd samen op tot de volle hoogte, dus er kan geen gat of
     overlap ontstaan. 0.75 = de abrupte overgang zit op driekwart. */
  --rand-deel: 0.75;
  --rand-hoogte: calc(var(--herken-hoogte) * var(--rand-deel));                /* donker, van boven */
  --rand-hoogte-onder: calc(var(--herken-hoogte) * (1 - var(--rand-deel)));    /* geel, van onder */
  --maxw: 75rem;
  --shadow: 0 0.625rem 1.875rem rgba(44, 41, 43, 0.10);
  --shadow-lg: 0 1.375rem 3.125rem rgba(44, 41, 43, 0.18);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* DE SCHAALHEFBOOM VAN DE HELE PAGINA.
   Alle maten staan in rem, dus dit ene getal schaalt tekst, ruimte, kaarten én de
   container tegelijk. Onder ~1935px is 0.827vw kleiner dan 1rem en gebeurt er niets:
   daar blijft alles exact zoals ontworpen. Daarboven groeit de pagina mee tot 1,83x,
   waarna de bovengrens hem stopt (anders zou hij op een 5K-scherm doorgroeien).
   Waarom rem en niet px als ondergrens: zo blijft de browserinstelling van de bezoeker
   leidend. Iemand die zijn letters op 20px heeft staan, houdt dat.
   Breekpunten staan bewust in px: die horen fysiek te zijn, niet geschaald. */
html {
  font-size: clamp(1rem, 0.827vw, 1.833rem);
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--spacing-md); }
.section { padding-block: var(--spacing-xl); }
.section--dark   { background: var(--color-dark);  color: var(--color-white); }
.section--accent { background: var(--color-primary); color: var(--color-dark); }
/* Schermvullend vanaf tablet: sta je in zo'n sectie, dan zie je alleen die sectie. Met
   alleen ruimere padding kwamen de buren er onderaan nog net bij in beeld en bleef het
   een tussenblokje.
   De header eraf, want die plakt erboven: zonder die aftrek loopt de onderrand precies
   88px onder de vensterrand door en zie je alsnog het volgende blok.
   Hoogte via het VENSTER (dvh) en niet via een schaal-eenheid — breedte schaalt mee met
   de container, hoogte hoort bij het scherm.
   Het is een min-height, dus op een laag venster groeit de sectie gewoon mee met zijn
   inhoud in plaats van die in te drukken. Niet op mobiel: daar is het scherm te laag om
   kop plus kaarten kwijt te kunnen, dus zou het toch overlopen.
   Bijna geen buitenpadding: het centreren geeft de lucht al zodra er ruimte is. Een vaste
   96px (of 1,6× bij oplevert) duwde de sectie juist voorbij de schermhoogte — op 3440
   schaalt die mee tot 171 à 273px, en dan waren deze secties 200-300px te hoog.
   .section ervoor zodat dit zwaarder weegt dan de eigen padding van elke sectie, wat de
   volgorde in het bestand ook is. */
@media (min-width: 769px) {
  .section.section--vullend {
    min-height: calc(100dvh - var(--header-hoogte));
    display: grid;
    align-content: center;
    padding-block: var(--spacing-sm);
  }
}

/* ---------- Typografische helpers ---------- */
/* Blijven in de HTML voor SEO/screenreaders, maar zijn visueel verborgen */
.kicker, .step__tag {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kicker--light { color: var(--color-primary); }
/* Houdt een eigennaam of getal bij elkaar op een regel */
.nowrap { white-space: nowrap; }
.section__head { max-width: 47.5rem; margin-bottom: var(--spacing-lg); }
.section__head--center { max-width: 51.25rem; margin-inline: auto; text-align: center; }
.section__title { font-size: clamp(1.9rem, 4.5vw, 3rem); }
.section--dark .section__title, .section--dark .kicker { color: var(--color-white); }
.section--dark .kicker--light { color: var(--color-primary); }
.section__intro { margin-top: var(--spacing-md); font-size: 1.15rem; color: var(--color-text-light); max-width: 62ch; }
.section__intro--center { margin-inline: auto; }
/* Iets ruimer alleen hier: op 62ch viel "projecten" als los woord op een 4e regel.
   66ch trekt het naar de regel erboven (3 regels), nog binnen de leesregel-norm. */
.methode-intro .section__intro { max-width: 66ch; }
.section--dark .section__intro { color: var(--color-white); }
.hl { color: var(--color-primary); }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  padding: 0.875rem 1.625rem; border-radius: 999px; font-weight: 700; font-size: 0.98rem; line-height: 1.15;
  text-align: center;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
}
.btn--primary { background: var(--color-primary); color: var(--color-dark); }
.btn--primary:hover { transform: scale(1.02); box-shadow: 0 0.5rem 1.375rem rgba(251, 207, 10, 0.4); }
.btn--ghost { color: var(--color-white); border: 2px solid rgba(255, 255, 255, 0.45); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: scale(1.02); }
.btn:focus-visible { outline: 3px solid var(--color-dark); outline-offset: 3px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-dark);
  border-bottom: 1px solid rgba(245, 237, 226, 0.08);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; min-height: var(--header-inhoud); gap: var(--spacing-md);
}
.header__logo { display: flex; }
.header__logo img { height: 3.5rem; width: auto; }
.nav { display: flex; align-items: center; gap: var(--spacing-lg); }
.nav__list { display: flex; gap: var(--spacing-md); }
.nav__link { color: var(--color-white); font-weight: 600; font-size: 0.95rem; padding: 0.375rem 0.125rem; position: relative; }
.nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 0.125rem; background: var(--color-primary); transition: width 0.3s var(--ease); }
.nav__link:hover::after { width: 100%; }
.nav__cta { padding: 0.6875rem 1.25rem; font-size: 0.9rem; white-space: nowrap; }
/* Tussen het menubreekpunt en ~1023px past de knop niet meer naast vijf menu-items: hij
   brak dan midden in "verkenningsgesprek" af. De knoptekst is het laatste wat mag krimpen,
   dus haal de ruimte uit de tussenruimtes — nowrap hierboven zorgt dat het opvalt als dat
   ooit toch niet genoeg is. */
@media (min-width: 769px) and (max-width: 1023.98px) {
  .nav { gap: var(--spacing-md); }
  .nav__list { gap: var(--spacing-sm); }
}
.nav-toggle { display: none; flex-direction: column; gap: 0.3125rem; padding: 0.5rem; }
.nav-toggle span { width: 1.625rem; height: 0.125rem; background: var(--color-white); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* ============================================================
   1. HERO
   ============================================================ */
/* ---- Afgeronde secties ----
   Alleen waar een gekleurd blok de crème raakt: dan zie je de vorige achtergrond in de
   hoeken doorlopen. Tussen twee donkere secties (waarom -> methode) doet het niets, dus
   staat het daar niet. De crème komt van de body, niet van de sectie ernaast — die is
   doorzichtig. */
/* Op een breed scherm loopt de hero kaarsrecht door in "herken", waar twee donkere randen
   hem voortzetten; de bocht zit dan daar (zie .herken__randen).
   Gestapeld had de hero hier zijn eigen afgeronde onderkant — die kwam uit de tijd dat er
   crème onder lag. Sinds "Bouwteam Boost" sectie 2 is, ligt daar donker tegen donker: de
   twee uitgesneden hoeken lieten dan de crème van de bódy zien, als twee witte puntjes.
   Dit is dezelfde regel als elders op de pagina — afronden alleen waar een gekleurd blok
   crème raakt, want alleen dan is er iets om te onthullen. */
.hero {
  position: relative; background: var(--color-dark); color: var(--color-white); overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('../images/texture-grunge.webp') center/cover no-repeat;
  opacity: 0.22; mix-blend-mode: luminosity;
}
.hero::after {
  content: ''; position: absolute; right: -10%; top: 10%; width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgba(251,207,10,0.14), transparent 70%); pointer-events: none;
}
/* Geen eigen schaalmachinerie meer: de root-lettergrootte doet dit nu voor de hele
   pagina. Alles hieronder staat in rem en schaalt daar vanzelf mee. */
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--spacing-lg);
  /* Header + hero vullen samen precies het scherm. De hoogte hoort bij het VENSTER, niet
     bij de schaal — vandaar dvh. Was min(88vh, 780px): die 88vh negeerde de header
     erboven, en de 780px kapte het sowieso af zodra het scherm hoger was dan ~886px.
     dvh i.p.v. vh zodat een verdwijnende adresbalk op tablet geen sprong geeft. */
  min-height: calc(100dvh - var(--header-hoogte));
  padding-block: var(--spacing-lg);
}
.hero__title {
  font-size: clamp(3rem, 8vw, 5.5rem);
  margin-block: var(--spacing-xs) var(--spacing-md);
}
.hero__subtitle { font-size: 1.3rem; font-weight: 700; color: var(--color-white); max-width: 30ch; }
/* max-width in ch schaalt mee met de fontgrootte, dus de regellengte blijft gelijk */
.hero__text { margin-top: var(--spacing-md); font-size: 1.05rem; color: var(--color-white); max-width: 46ch; }
.hero__trust { margin-top: var(--spacing-lg); font-weight: 700; letter-spacing: 0.01em; color: var(--color-white); }
.hero__media { justify-self: center; align-self: center; width: 100%; }

/* Kaart uit slide 1 — kleuren exact uit het slidedeck (#393538 / #4d494c) */
.hero-card {
  position: relative;
  overflow: hidden;
  background: #393538;
  /* radius en padding komen uit de herschaalde tokens van .hero__inner en groeien dus mee */
  border-radius: var(--radius);
  padding: clamp(var(--spacing-md), 4vw, var(--spacing-lg));
  min-height: 21.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 1.5rem 3.125rem rgba(0, 0, 0, 0.45);
  will-change: opacity, transform;
}
/* Halve maan uit slide 1. Nagerekend uit het vectorpad in het slidedeck: een exacte halve
   cirkel (boog van 135° naar 315°), platte kant als diagonaal van linksboven naar
   rechtsonder, bolling naar linksonder. Cirkel + diagonale clip geeft precies dat.
   De maten komen uit dezelfde meting: 84,2% van de kaarthoogte, 5,2% van links, 6,9% van
   boven. Zo staat hij volledig BINNEN de kaart, net als in de slide — stak hij eroverheen,
   dan kapte de overflow van de kaart hem af en werd het een grijs hoekvlak. */
.hero-card__shape {
  position: absolute;
  left: 5.15%;
  top: 6.86%;
  height: 84.23%;
  width: auto;          /* volgt uit aspect-ratio; een tweede vaste maat maakt er een ovaal van */
  aspect-ratio: 1;
  background: #4d494c;
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.hero-card__text {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--color-white);
}
.hero-card__logo {
  position: relative;
  width: clamp(6.875rem, 20%, 9.375rem);
  height: auto;
  margin-top: var(--spacing-lg);
  align-self: flex-end;
}

/* --- Kaart ÍS de hero: vult het hele scherm, draagt de h1 --- */
.hero--kaart .hero__inner {
  grid-template-columns: 1fr;
  max-width: none;                 /* container-begrenzing opheffen: schermbreed */
  padding: 0;
  min-height: calc(100dvh - var(--header-hoogte));
}
.hero-card--groot {
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - var(--header-hoogte));
  border-radius: 0;                /* full-bleed, geen zwevende kaart meer */
  box-shadow: none;
  /* de elementen 'opgeknipt' over het vlak: tekst gecentreerd-links, logo rechtsonder,
     de halve cirkel als groot accent linksonder.
     Horizontaal 11,65%: dat is de inspringing van de tekst in slide 1, gemeten aan het
     tekstblok in het slidedeck. Een procent en geen vast getal, want de slide-indeling is
     zelf proportioneel — zo blijft de verhouding kloppen op elke schermbreedte. */
  padding: clamp(var(--spacing-lg), 6vw, 7rem) 11.65%;
  justify-content: center;
  align-items: flex-start;
}
.hero-card--groot .hero-card__text {
  margin: 0;
  max-width: 19ch;                 /* korte, krachtige regels — schaalt mee in ch */
  font-size: clamp(2.2rem, 6.2vw, 5rem);
  line-height: 1.06;
  text-align: left;
}
/* Subregel onder de kop. Bewust smaller dan de kop zelf: die mag over de volle breedte
   knallen, dit is leestekst en houdt zich aan een leesbare regellengte. */
.hero-card--groot .hero-card__sub {
  position: relative;
  margin-top: var(--spacing-md);
  max-width: 48ch;
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.hero-card--groot .hero-card__logo {
  position: absolute;
  right: clamp(var(--spacing-md), 6vw, 6rem);
  bottom: clamp(var(--spacing-md), 6vw, 5rem);
  width: clamp(8.5rem, 13vw, 15rem);
  margin: 0;
}

/* --- Sectie 2: het oude hero-introblok, nu onder de kaart-hero --- */
.hero-intro {
  position: relative; overflow: hidden;
  background: var(--color-dark); color: var(--color-white);
  /* Vult het scherm, zodat "Herken je dit?" er niet naast in beeld komt — dan leest
     niemand hier meer overheen. min-height en geen height: bij weinig hoogte (of grote
     letters) mag het blok gewoon meegroeien i.p.v. de tekst af te kappen.
     De header is sticky en dekt de bovenkant af, dus die hoogte komt er als padding bij:
     zo staat de inhoud optisch midden in het deel dat je écht ziet. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-hoogte) + var(--spacing-lg)) var(--spacing-xl);
}
.hero-intro::before {
  content: ''; position: absolute; inset: 0;
  background: url('../images/texture-grunge.webp') center/cover no-repeat;
  opacity: 0.22; mix-blend-mode: luminosity;
}
.hero-intro__inner { position: relative; z-index: 1; text-align: center; width: 100%; }
/* Foto links, tekst rechts. Hij kijkt in de foto naar rechts, dus naar de tekst toe —
   daarom staat hij links en niet andersom. Op mobiel staat de foto erboven en blijft
   alles gecentreerd: twee kolommen van 180px leest niet meer als een portret. */
.hero-intro__media { margin: 0 auto; max-width: 20rem; }
.hero-intro__media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 769px) {
  .hero-intro__inner {
    display: grid; grid-template-columns: 0.82fr 1fr;
    gap: var(--spacing-xl); align-items: center; text-align: left;
  }
  /* Geen auto-marges meer: een rasteritem met auto-marges rekt niet mee met zijn kolom
     maar krimpt naar zijn eigen inhoudsbreedte. */
  .hero-intro__media { margin: 0; max-width: none; }
}
/* Ruimer ademen nu het blok het hele scherm vult. De tussenruimtes rekken mee met de
   schermhoogte (vh) maar houden een onder- en bovengrens: op een lage laptop blijft het
   compact, op een hoog scherm valt het niet uit elkaar. De titel krijgt hieronder geen
   eigen ondermarge meer — anders bepaalt de grootste van twee marges de afstand en wordt
   het lastig te voorspellen. Eén element bepaalt één afstand. */
.hero-intro .hero__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-block: clamp(var(--spacing-sm), 3vh, var(--spacing-lg)) 0;
}
.hero-intro .hero__text {
  margin-top: clamp(var(--spacing-md), 5vh, var(--spacing-xl));
  margin-inline: auto;
}
/* De twee knoppen zijn hier weg (ze staan al in de header en onderaan de pagina). Deze
   regel komt op de plek waar de ONDERkant van die knoppen zat: dezelfde tussenruimte als
   eerst, plus de 3,125rem die de knoppen zelf hoog waren. */
/* Exact dezelfde tussenruimte als tussen de titel en de alinea erboven — één ritme in
   het hele blok, dus letterlijk dezelfde waarde en geen eigen variant. */
.hero-intro .hero__trust {
  margin-top: clamp(var(--spacing-md), 5vh, var(--spacing-xl));
}
@media (min-width: 769px) {
  .hero-intro .hero__text { margin-inline: 0; }
  /* Bovenmarge van de titel eraf. De kicker erboven is alleen voor screenreaders, dus
     die marge scheidde niets — hij maakte het tekstvak wél hoger dan de tekst die je
     ziet, en dan centreert align-items een vak met lucht erin i.p.v. de tekst zelf.
     Zonder die marge valt het vak samen met de tekst en staat hij exact op het midden
     van de foto. Op mobiel blijft hij staan: daar is het de ruimte onder de foto. */
  .hero-intro .hero__title { margin-top: 0; }
}

/* ============================================================
   2. HERKEN JE DIT — signaalkaarten + statement
   ============================================================ */
/* Alleen als symbool-drager voor de pijl — mag nooit ruimte innemen */
.is-hidden { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- De hero die doorloopt en abrupt afbreekt ----
   Het donker van de hero zet zich hier voort als twee randen langs links en rechts, tot
   halverwege deze sectie, en houdt daar recht op. De bocht van de hero is dus mee naar
   beneden verhuisd: die zit nu in de uitsparing hieronder, niet aan de onderkant van de
   hero zelf.
   Eén element met een uitsparing i.p.v. twee losse strookjes: zo is de bocht gegarandeerd
   even breed als de randen en kan er geen naad tussen vallen. */
/* z-index 1: "Techniek en contracten" schuift met een negatieve marge deze sectie in en
   zou de statement-regel afdekken. De inhoud hier gaat er dus overheen staan i.p.v. dat
   we hem met padding wegduwen — dat gaf een dood gat onderin en juist dat gat sloopte het
   insluitende effect. */
.herken { position: relative; z-index: 1; }
.herken__randen { display: none; }
@media (min-width: 769px) { .herken__randen { display: block; } }
.herken__randen {
  position: absolute; top: 0; left: 0; right: 0; height: var(--rand-hoogte);
  background: var(--color-dark);
  pointer-events: none;
}
/* Dezelfde grunge als in de hero, met exact dezelfde declaratie — en dat is precies wat
   het naadloos maakt. De textuur is 1280px breed en beide elementen zijn schermbreed, dus
   'cover' schaalt hier én daar op de breedte: de korrel wordt vanzelf even groot (gemeten
   1,113x in allebei). Zou de textuur op de hoogte schalen, dan liep dit mis. */
.herken__randen::before {
  content: ''; position: absolute; inset: 0;
  background: url('../images/texture-grunge.webp') center/cover no-repeat;
  opacity: 0.22; mix-blend-mode: luminosity;
}
.herken__randen::after {
  content: ''; position: absolute; inset: 0 var(--rand-breedte);
  background: var(--color-cream);
  border-radius: var(--radius-sectie) var(--radius-sectie) 0 0;
}
/* De inhoud eroverheen; de randen blijven achtergrond */
.herken > .container { position: relative; z-index: 1; }

/* Regelafbreking exact zoals het slidedeck. Smaller dan 900px laten we de tekst
   vrij lopen, anders steken de vaste regels buiten hun kolom. */
.br-deck { display: none; }
@media (min-width: 900px) { .br-deck { display: inline; } }

/* ---------- Marquee ---------- */
/* Kolom-voor-kolom vullen zoals slide 2: 1-2-3 links, 4-5-6 rechts */
.signals {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto);
  grid-auto-flow: column; gap: var(--spacing-md);
}
/* Bewust statisch: geen hover-reactie. Dit zijn geen klikbare kaarten maar een opsomming
   van herkenbare situaties — een oplichtend effect suggereert dat er iets achter zit. */
.signal {
  display: flex; align-items: center; gap: var(--spacing-md);
  background: var(--color-white); border-radius: var(--radius);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow);
}
.signal p { font-size: 1.05rem; color: var(--color-dark); }

/* Cirkel-icoon uit het slidedeck met de pijl erin (slide 2/4/8). Het vinkje van slide 5
   stond onder Jaspers foto; die labels zijn in okt 2026 op verzoek weggehaald. */
.pijl {
  flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  width: 2.375rem; height: 2.375rem;
}
.pijl svg { width: 1.25rem; height: 1.25rem; }
.pijl--donker { background: var(--color-dark); color: var(--color-primary); }
.pijl--geel { background: var(--color-primary); color: var(--color-dark); }
/* Bullet-formaat; margin-top lijnt de cirkel uit op de eerste tekstregel */
.pijl--klein { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }
.pijl--klein svg { width: 0.6875rem; height: 0.6875rem; }

/* Opsommingen zijn bewust volledig statisch: geen hover-beweging op de pijl of de tekst.
   Het zijn leesregels, geen knoppen — beweging suggereert dat er iets achter zit. */
/* Slide 2: geen kader, tweekleurig, rechts uitgelijnd onder de kaarten */
.statement {
  margin-top: var(--spacing-lg); text-align: right;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--color-dark);
}
.statement__hl { color: var(--color-primary); }

/* ============================================================
   3. TECHNIEK NIET GENOEG — wit paneel op gele textuur
   ============================================================ */
/* Bovenhoeken rond: hierboven ligt "herken", en die is crème */
/* Spiegelbeeld van de hero-randen, maar naar bóven: deze sectie schuift met een negatieve
   marge de vorige in, en een crème uitsparing laat er links en rechts een strook van staan.
   Bovenaan wordt hij recht afgesneden. Samen met de randen van de hero sluiten ze
   "Herken je dit?" in.
   Waarom de sectie zélf uitrekken i.p.v. een los strookje ernaast (zoals bij de hero):
   de gele grunge is 1600x992 en zou in een lage strook op de breedte schalen terwijl hij
   in deze hoge sectie op de hoogte schaalt — op ~1000px scheelt dat 60% in korrelgrootte
   en dat zie je als een naad. Eén element kan per definitie geen naad hebben. */
/* Beton en geen grunge, en dat volgt de branding zelf: het slidedeck zet de grunge alleen
   in als smal randje om een kaart (slide 4) en gebruikt beton zodra geel een heel vlak
   vult (slide 6). Hier is het geel ruim 400px aan weerszijden van het paneel; de grunge
   meet daar contrast 68 en wordt dan zwaar en vuil, beton 27 — gemeten in dezelfde band.
   Achtergrondkleur is merkgeel: de textuur heeft alfa, dus daar schijnt hij doorheen. */
.waarom {
  position: relative;
  background: var(--color-primary);
  background-image: url('../images/texture-beton-geel-vlak.avif');
  background-size: cover; background-position: center;
}
@media (min-width: 769px) {
  .waarom {
    margin-top: calc(var(--rand-hoogte-onder) * -1);
    /* Ruime aanloop boven het paneel: de statement hierboven moet uit beeld kunnen lopen
       voordat deze kaart in beeld komt, anders klapt de pagina van blok naar blok.
       De rand-compensatie blijft erin staan — die hoort bij de negatieve marge hierboven
       en heeft niets met deze tussenruimte te maken. */
    padding-top: calc(var(--spacing-xl) * 3 + var(--rand-hoogte-onder));
    /* Even ruim eronder, anders hangt de kaart scheef in zijn eigen vlak */
    padding-bottom: calc(var(--spacing-xl) * 3);
  }
  /* De uitsparing: crème tussen de twee randen, met de bocht onderaan */
  .waarom::before {
    content: ''; position: absolute;
    top: 0; left: var(--rand-breedte); right: var(--rand-breedte);
    height: var(--rand-hoogte-onder);
    background: var(--color-cream);
    border-radius: 0 0 var(--radius-sectie) var(--radius-sectie);
    pointer-events: none;
  }
  .waarom > .container { position: relative; z-index: 1; }
}
/* Gestapeld bestaan de randen niet; dan gewoon een afgeronde bovenkant, zoals de hero. */
@media (max-width: 768.98px) {
  .waarom { border-radius: var(--radius-sectie) var(--radius-sectie) 0 0; }
}
.panel {
  background: var(--color-white); border-radius: var(--radius-lg);
  /* Padding stopt op 64px: het paneel groeit niet mee boven 1040px, dus daarboven
     zou meer padding de kolommen alleen maar smaller maken. */
  padding: clamp(var(--spacing-lg), 5vw, 4rem);
  box-shadow: var(--shadow-lg); max-width: 65rem; margin-inline: auto;
}
.panel__head { margin-bottom: var(--spacing-lg); }
/* Gele streep onder de kop, even breed als de onderste kopregel.
   JS zet --streep-breedte; 72px is de terugval als JS uitstaat. */
.panel__head::after {
  content: ''; display: block; height: 0.3125rem; border-radius: 999px;
  width: var(--streep-breedte, 4.5rem); max-width: 100%;
  margin-top: var(--spacing-md); background: var(--color-primary);
}
/* Quote-kolom iets ruimer: die draagt de vaste regelafbrekingen uit het slidedeck.
   Twee kolommen op één rij: links de tekst, rechts de quote onderin uitgelijnd. */
.panel__body { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--spacing-lg); align-items: stretch; }
.panel__text { color: var(--color-text-light); margin-bottom: var(--spacing-md); }
.panel__lead { font-weight: 700; margin-bottom: var(--spacing-md); }
.pillars { display: grid; gap: var(--spacing-sm); }
.pillars li { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.05rem; }
/* Slide 4: quote rechts uitgelijnd onderin, tweekleurig, zonder kader */
.panel__quote {
  grid-column: 2;
  align-self: end; text-align: right;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--color-dark);
}
.panel__quote-hl { color: var(--color-primary); }
/* Dichter in de rechteronderhoek van het paneel, zoals slide 4. */
@media (min-width: 900px) {
  .panel__quote { margin-right: calc(var(--spacing-md) * -1); margin-bottom: calc(var(--spacing-md) * -1); }
}

/* ============================================================
   4. METHODE-BLOK — intro + de vier stappen onder één achtergrond
   ============================================================ */
/* Het blok draagt het donker; de twee secties erin zijn doorzichtig, anders zou hun
   eigen achtergrond de structuur erachter afdekken. */
/* De onderste padding compenseert de overlap van "meerwaarde" hieronder: die schuift met
   een negatieve marge over dit blok heen om zijn afgeronde bovenhoeken op het donker te
   laten vallen. Zonder deze ruimte eet die overlap de laatste stapkaart aan (gemeten: 6px
   op een telefoon, waar de sectiepadding kleiner is). */
/* Het blok schuift met een afgeronde bovenkant over .waarom heen, zodat de structuur tot
   aan de ronding zichtbaar blijft en in de hoeken de gele sectie erboven doorschijnt.
   clip-path (niet overflow) rondt achtergrond én structuurlaag in één keer af zonder de
   sticky stapkaarten te breken. padding-top compenseert de negatieve marge, zodat de
   inhoud precies op z'n plek blijft. */
.methode-blok {
  position: relative; background: var(--color-dark);
  margin-top: calc(var(--radius-sectie) * -1);
  padding-top: var(--radius-sectie);
  padding-bottom: var(--radius-sectie);
  clip-path: inset(0 round var(--radius-sectie) var(--radius-sectie) 0 0);
}
.methode-blok > .section--dark { background: transparent; position: relative; z-index: 1; }

/* Dezelfde structuurlaag als in het introblok bovenaan: zelfde bestand, zelfde dekking.
   Alleen GEEN mix-blend-mode: de combinatie sticky + blend binnen een clip-path laat
   Chrome de twee afgeronde bovenhoeken met crème vullen i.p.v. het geel erboven (elk
   van de drie los gaat goed, samen niet). Kost niets aan beeld: deze structuur is
   vrijwel grijs (verzadiging 0,05), en dan is luminosity op 22% hetzelfde als normaal.
   Eén verschil dat wél nodig is: dit blok is ~5600px hoog en daar zou
   `cover` de structuur 7x uitrekken — korrel van 7px i.p.v. 1px, en dan lijkt het in
   niets meer op het blok bovenaan. Vandaar een laag van precies één schermhoogte die
   meeplakt tijdens het scrollen: zo is de vergroting identiek aan daarboven (1,13x).
   De negatieve bovenmarge trekt hem over de padding heen tot aan de bovenrand — anders
   bleef daar een egale band van 40px zonder structuur. De ondermarge compenseert dat en
   haalt hem weer helemaal uit de stroom, anders zou hij het blok naar beneden duwen. */
.methode-blok::before {
  content: ''; display: block;
  position: sticky; top: 0; z-index: 0;
  height: 100dvh;
  margin-top: calc(var(--radius-sectie) * -1);
  margin-bottom: calc(var(--radius-sectie) - 100dvh);
  background: url('../images/texture-grunge.webp') center/cover no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

/* ============================================================
   4b. METHODE-INTRO — steps-nav
   ============================================================ */
.methode-intro__sub { margin-top: var(--spacing-sm); font-size: 1.2rem; font-weight: 700; color: var(--color-primary); }
/* Toelichting bij de tijden in de vier stappen. Rustiger dan de intro erboven: het is een
   voetnoot bij de methode, geen onderdeel van het verhaal. */
.methode-intro__tijd {
  max-width: 68ch; margin: var(--spacing-md) auto 0;
  font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72);
}
/* Tijdsinvestering per stap, in het gekleurde vlak onder de titel. Hier en niet in de
   kolommen ernaast: het is een kenmerk van de stap, net als de titel — geen inhoud.
   Het label staat op een eigen regel zodat het getal zelf de aandacht krijgt. */
/* Staat in de crème kolom en niet in de gekleurde zijkant: die zijkant is smal, dus daar
   maakte deze tekst de kaart een stuk hoger terwijl het brede vlak ernaast leeg bleef.
   Onderin de brede kolom kost hij nauwelijks hoogte en vult hij juist de ruimte die
   overbleef doordat alle vier de kaarten even hoog zijn. */
.step__tijd {
  grid-column: 1 / -1;
  align-self: end;
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(44, 41, 43, 0.16);
  font-size: 0.9rem; line-height: 1.45;
  color: var(--color-text-light);
}
/* Zelfde kop-stijl als "Wat ik doe" / "Wat het oplevert" hierboven — het is dezelfde
   soort labelregel, dus geen tweede vormgeving ervoor */
.step__tijd span {
  display: block; font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--phase-color) 74%, black); margin-bottom: 0.25rem;
}
/* clip (niet hidden) houdt de kaarten binnen beeld terwijl ze van opzij inschuiven,
   zonder een scrollcontainer te maken die de sticky header zou breken */
.steps-nav {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
  gap: var(--spacing-md); margin: var(--spacing-lg) 0 0; padding: 0; list-style: none;
  overflow-x: clip;
}
/* Grunge-structuur per fase, in de kleur van die fase — door de ontwerper aangeleverd.
   Deze paden staan hier en niet in een style-attribuut: een url() in een custom property
   wordt opgelost vanaf het CSS-bestand, dus inline zou het /css/images/ worden (404).

   --phase-neon is dezelfde tint als de fasekleur, maar op volle verzadiging — dus
   herkenbaar dezelfde kleur, alleen dan opgedraaid. Handmatig vastgelegd omdat CSS
   verzadiging niet kan ophogen; wit erdoor mengen maakt juist pasteller. */
.fase-1 { --phase-textuur: url('../images/texture-fase-1.avif'); --phase-neon: #FF7329; }
.fase-2 { --phase-textuur: url('../images/texture-fase-2.avif'); --phase-neon: #C7FF29; }
.fase-3 { --phase-textuur: url('../images/texture-fase-3.avif'); --phase-neon: #FF5283; }
.fase-4 { --phase-textuur: url('../images/texture-fase-4.avif'); --phase-neon: #FFD429; }

/* Stapkaart: link naar de uitgewerkte stap; height 100% vult de rastercel. */
.steps-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0.375rem;
  height: 100%; padding: var(--spacing-md); border-radius: var(--radius);
  /* Grunge-structuur op volle sterkte — geen witwas, die maakte de kaart flets. De
     leesbaarheid komt niet van de achtergrond maar van de gloed om icoon en label.
     De lichte waas dempt alleen de felste plekken in de structuur. */
  background: linear-gradient(rgba(44, 41, 43, 0.12), rgba(44, 41, 43, 0.12)),
    var(--phase-textuur) center / cover,
    var(--color-dark);
  box-shadow: var(--shadow);
  /* Rand staat er altijd al, alleen doorzichtig — anders springt de kaart bij hover */
  border: 2px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.steps-nav__item:hover {
  transform: translateY(-0.25rem);
  /* Halverwege de doffe fasekleur en het volle neon — zo blijft "half" ook echt half,
     zonder dat er een vierde set kleuren bijkomt om bij te houden. */
  border-color: color-mix(in srgb, var(--phase-neon) 50%, var(--phase-color));
  /* Gloed mee gehalveerd: 18px/55% -> 9px/28% */
  box-shadow: var(--shadow-lg), 0 0 0.5625rem color-mix(in srgb, var(--phase-neon) 28%, transparent);
}
.steps-nav__item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
/* Wit vlak achter de vorm, zoals het paneel in slide 7 van het slidedeck. Een afgerond
   vierkant en geen cirkel: de vormen zijn hoog en smal en bleven in een rondje klein en
   ogen daar afgesneden. De maat is 5,25rem vorm + 2x de padding, zodat het vlak eromheen
   groeit en de vorm zelf even groot blijft als hiervoor (border-box rekent padding mee). */
.steps-nav__item img {
  width: 6.5rem; height: 6.5rem; object-fit: contain;
  padding: 0.625rem;
  background: var(--color-white);
  border-radius: var(--radius);
}
.steps-nav__label {
  font-weight: 700; color: var(--color-white); min-height: 2.5em;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   5. STAPPEN uitgewerkt
   ============================================================ */
.steps { padding-top: 0; }
.step {
  display: grid; grid-template-columns: 18.75rem 1fr;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  /* Doelwit van de stapkaarten hierboven; houdt de stap vrij van de sticky header (88px) */
  scroll-margin-top: 6.5rem;
}
/* Raster i.p.v. losse marges: zo kunnen alle vier de kaarten even hoog worden.
   Alleen vanaf tablet — op mobiel zou de langste kaart de andere drie enorme
   lege vlakken geven. Dit is ook de weergave als JS uitstaat. */
.steps .container { display: grid; gap: var(--spacing-lg); }
@media (min-width: 769px) { .steps .container { grid-auto-rows: 1fr; } }
.step:hover { transform: translateY(-0.25rem); box-shadow: 0 1.625rem 3.375rem color-mix(in srgb, var(--phase-color) 34%, transparent); }
/* Op een aanraakscherm bestaat hover niet echt: een tik zet 'm aan en hij blijft daarna
   hangen tot je ergens anders tikt. Een kaart die scheef blijft staan dus. */
@media (hover: none) {
  .step:hover { transform: none; box-shadow: var(--shadow-lg); }
}
/* De vier stapkaarten doen NIET mee aan de fade-up. Ze zijn 942 tot 1203px hoog — hoger
   dan een telefoonscherm — en een effect dat afgaat zodra een element "in beeld komt" is
   bij die verhouding niet te vertrouwen: naar beneden scrollend bleven ze onzichtbaar,
   terugscrollend kwam een deel wel op.
   Op het podium verandert dit niets: daar staan ze door de regel hieronder al hard aan,
   want daar stuurt JS de beweging zelf. Dit dekt alles wat níet op het podium staat —
   telefoon staand en liggend, en een venster waar de kaart niet op past.
   De :not() is er om een reden: op het podium zet het blok hieronder juist wél een
   transform, en met een gewone .steps-selector zouden die twee elkaar op volgorde in het
   bestand bevechten. Zo sluiten ze elkaar uit en kan dat niet meer misgaan. */
.steps:not(.steps--podium) .step.reveal,
.steps:not(.steps--podium) .step.reveal.is-visible { opacity: 1; transform: none; transition: none; }

/* ---- Podium: de kaarten komen één voor één op dezelfde plek binnen ----
   JS zet .steps--podium aan vanaf tablet, als de kaart op het podium past en de bezoeker
   geen prefers-reduced-motion heeft. Anders blijft de gewone kaartenlijst hierboven staan.
   De sectie is de scrollweg, de container is het podium dat zolang vaststaat. */
@media (min-width: 769px) {
  .steps--podium {
    --podium-h: calc(100dvh - var(--header-hoogte));
    /* Eén podiumhoogte plus 3,4 aan scrollweg: per kaart 0,85 scherm, en na de laatste
       kaart nog een stuk om hem rustig te lezen voor de sectie verder schuift. */
    height: calc(var(--podium-h) * 4.4);
    padding-block: 0;
    /* De kaarten wachten een schermbreedte opzij. clip en niet hidden: hidden maakt een
       scrollcontainer, en dan staat het podium niet meer vast. */
    overflow-x: clip;
  }
  /* Groter dan in de lijst via een echte breedte, niet via scale(): dan staat de tekst
     scherp en landen de kaarten exact even groot op elkaar. */
  .steps--podium .container {
    position: sticky; top: var(--header-hoogte);
    height: var(--podium-h);
    max-width: min(98vw, 90rem);
    display: grid; grid-template: auto / 1fr; align-content: center;
    gap: 0;
  }
  /* Alle vier in dezelfde rastercel. De rij is zo hoog als de hoogste kaart en de rest
     rekt mee, dus er piept nooit een vorige kaart onder de volgende uit — zonder JS.
     Startstand: een schermbreedte opzij én 40% scherm omlaag, om-en-om links en rechts.
     Eén rechte lijn naar de eindplek: opzij en omhoog in dezelfde beweging.
     De .reveal-variant is geen dubbeling maar noodzaak: de kaarten dragen ook de fade-up,
     en .reveal.is-visible zet transform: none. Die staat verderop in het bestand en zou
     bij gelijke zwaarte winnen — dan kan een kaart die één keer in beeld is geweest nooit
     meer naar buiten. Met .step.reveal weegt deze regel zwaarder, wat de volgorde ook is. */
  .steps--podium .step,
  .steps--podium .step.reveal {
    grid-area: 1 / 1;
    transform: translate3d(-100vw, 40vh, 0);
    transition: transform 0.85s var(--ease), box-shadow 0.3s var(--ease);
    /* Zet JS als er in één scrollbeweging meerdere kaarten wisselen */
    transition-delay: var(--vertraging, 0s), 0s;
    will-change: transform;
  }
  .steps--podium .step:nth-of-type(even) { transform: translate3d(100vw, 40vh, 0); }
  /* Eindstand. Weegt even zwaar als de twee regels hierboven en staat erna, dus wint. Ook
     van .step:hover, dus zweven tilt de bovenste kaart niet van de stapel. */
  .steps--podium .step.is-binnen { transform: none; }
  /* Alleen de zichtbaarheid van de fade-up; de beweging is hier van het podium. */
  .steps--podium .reveal,
  .steps--podium .reveal.is-visible { opacity: 1; }
}
/* Laag scherm: de kaart moet op het podium passen, anders valt JS terug op de lijst. Een
   gewone laptop (1366×768 → ~657px venster) had 568px podium en de langste kaart was
   507px — met lucht erboven en eronder 3px te veel, dus daar stond het effect gewoon uit.
   Hier alleen de witruimte ín de kaart strakker (~80px winst), de tekst blijft gelijk.
   Boven de 800px hoog verandert er niets. */
@media (min-width: 769px) and (max-height: 800px) {
  .steps--podium .step__cols { padding-block: var(--spacing-md); row-gap: var(--spacing-md); }
}

/* Vlakke fasekleur, bewust ZONDER de grunge-structuur. Die structuur staat al op de vier
   kaartjes in de methode-intro hier vlak boven; twee keer achter elkaar wordt het onrustig.
   De kleur blijft wel, want dat is waaraan je de vier fases uit elkaar houdt.
   De donkere waas houdt witte tekst leesbaar op de lichtste fasekleur (de olijftint haalt
   zonder waas maar 2,9:1 — te weinig, ook voor grote tekst). */
.step__aside {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  /* Smallere zijkant-padding: geeft de titel breedte zodat hij groter mag zonder te breken */
  padding: var(--spacing-lg) var(--spacing-md); color: var(--color-white); overflow: hidden;
  background: linear-gradient(rgba(44, 41, 43, 0.22), rgba(44, 41, 43, 0.22)),
    var(--phase-color, var(--color-dark));
}
/* Groot wit vlak met de vorm erin, zoals slide 8 van het slidedeck. Afgerond vierkant en
   geen cirkel: de vormen zijn hoog en smal en ogen in een rondje afgesneden. De breedte
   volgt de kolom, zodat hij op het smalste breekpunt vanzelf meekrimpt. */
.step__icon {
  width: min(13rem, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 1rem;
  background: var(--color-white);
  border-radius: var(--radius);
  margin-bottom: var(--spacing-md);
}
/* Groter en meevullend. Grens is de langste titel ("Constructie opzetten"): bij de smalste
   aside (220px in de 769-1024 range) moet het langste woord nog op één regel passen. */
.step__title { font-size: clamp(1.6rem, 2.7vw, 2.5rem); color: var(--color-white); margin-top: 0.25rem; }

/* ---- Gedeeld door de stapkaarten bovenaan en de gekleurde vakken hieronder ---- */
/* Witte omtrek om het icoon: maakt de vormen los van de structuur eronder én vult de
   transparante scheidingslijnen ín het icoon weer met wit. */
/* De steps-nav staat hier bewust niet meer bij: die iconen hebben nu een echt wit vlak,
   en een gloed eromheen zou een halo om dat vlak trekken. */
/* Donkere halo achter witte tekst: op de lichtste strepen van de olijfstructuur haalt
   wit anders maar 2,6 — dit lost dat lokaal op zonder de kaart flets te maken. */
.steps-nav__label, .step__title,
.target__title, .target p { text-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.7), 0 0 0.625rem rgba(0, 0, 0, 0.5); }

/* Lichte zand-kaart met de inhoud */
/* Drie vaste rijen, want elke stap heeft dezelfde opbouw: doel, de twee blokken, tijd.
   De middelste rij pakt 1fr en duwt de tijdregel naar de onderrand — zo staat die bij
   alle vier de kaarten op dezelfde hoogte, ook al is de ene kaart voller dan de andere. */
.step__cols {
  background: var(--color-cream); color: var(--color-text);
  padding: clamp(var(--spacing-md), 3vw, var(--spacing-lg));
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto;
  gap: var(--spacing-lg); align-content: start;
}
.step__block--goal { grid-column: 1 / -1; }
.step__block h4 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-sm);
  color: color-mix(in srgb, var(--phase-color) 74%, black); font-weight: 800;
}
.step__block--goal p { font-size: 1.25rem; font-weight: 700; color: var(--color-dark); }
/* Slide 8: hier de branding-pijl i.p.v. het blokje. Zelfde component als bij "Herken je
   dit" en de drie pilaren, alleen kleiner — geen derde variant van dezelfde vorm. */
.step .ticklist li { color: var(--color-text-light); }
.step .ticklist li,
.oplevert .ticklist li,
.boost .ticklist li {
  display: flex; align-items: flex-start; gap: 0.625rem; padding-left: 0;
}
.step .ticklist li::before,
.oplevert .ticklist li::before,
.boost .ticklist li::before { content: none; }

/* Tick-lijsten (gedeeld) */
.ticklist li { position: relative; padding-left: 1.625rem; margin-bottom: 0.5rem; color: var(--color-white); font-size: 0.98rem; }
.ticklist li::before { content: ''; position: absolute; left: 0.25rem; top: 0.5625rem; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--phase-color, var(--color-primary)); }
.ticklist--light li { color: var(--color-white); }

/* ============================================================
   6. MEERWAARDE — figuur + 4 punten op gele textuur
   ============================================================ */
/* Rond aan alle vier de hoeken. Onderaan valt dat op crème ("oplevert"), bovenaan op het
   donkere methode-blok — maar alleen omdat hij daar met een negatieve marge overheen
   schuift. Zonder die overlap zouden de bovenhoeken de crème van de body laten zien: twee
   lichte kerven tussen het donker en het geel, en dat leest als een gat. De 40px eet in de
   onderpadding van het methode-blok, niet in de inhoud. */
.meerwaarde {
  position: relative;
  margin-top: calc(var(--radius-sectie) * -1);
  border-radius: var(--radius-sectie);
  background: var(--color-primary);
  /* Gele betonmuur, net als slide 6 — niet meer de steigerplank. De gele waas erover is
     geen smaakkwestie maar een meting: de structuur heeft echt donkere plekken (geen
     spikkels maar vlekken), en donkere tekst haalt daarop kaal 2,54:1. Gemeten op de
     schaal van een letterstreek, met de waas erbij: 40% is de ondergrens (4,63:1), 45%
     geeft 4,96:1 en laat de structuur nog goed zien. */
  background-image: linear-gradient(rgba(251,207,10,0.45), rgba(251,207,10,0.45)), url('../images/texture-beton-geel-vlak.avif');
  background-size: cover; background-position: center; color: var(--color-dark);
}
.meerwaarde .section__title { color: var(--color-dark); }
/* Aanhef linksboven zoals op de slide, niet als gecentreerde koptekst. Klein gehouden:
   het is een aanloop naar de vier punten, geen zelfstandige kop. */
.meerwaarde__head { max-width: none; text-align: left; }
.meerwaarde__head .section__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
/* Kop van deze sectie mag de volle container gebruiken: hij heeft 900px nodig voor één
   regel en er staat geen introtekst onder die baat heeft bij de 820px-leesgrens. */
.oplevert .section__head { max-width: none; }
.meerwaarde__stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.meerwaarde__col { display: flex; flex-direction: column; gap: var(--spacing-md); }
.meerwaarde__col--left  { text-align: right; }
.meerwaarde__col--right { text-align: left; }
.meerwaarde__figure { justify-self: center; }

/* Op de slide staan 1 en 3 op één lijn, en 2 en 4 op de volgende. Bij ons stonden de
   punten in twee losse kolommen die als blok verticaal gecentreerd werden — is de ene
   kolom hoger dan de andere (punt 2 loopt over twee regels), dan schuift die kolom als
   geheel omhoog en staan de rijen 16px uit elkaar. Dat zag de klant.
   Eén raster met vaste rijen lost dat definitief op: de rijen liggen dan vast, ongeacht
   hoe lang de teksten worden. display: contents haalt de twee kolom-divs uit de weg
   zodat de punten zélf rasteritems worden — zonder de HTML te veranderen. */
@media (min-width: 769px) {
  .meerwaarde__stage {
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: var(--spacing-lg);
    row-gap: var(--spacing-lg);
  }
  .meerwaarde__col { display: contents; }
  .meerwaarde__col--left  .value-point:nth-child(1) { grid-area: 1 / 1; }
  .meerwaarde__col--left  .value-point:nth-child(2) { grid-area: 2 / 1; }
  .meerwaarde__col--right .value-point:nth-child(1) { grid-area: 1 / 3; }
  .meerwaarde__col--right .value-point:nth-child(2) { grid-area: 2 / 3; }
  /* Jasper staat over beide rijen heen, verticaal gecentreerd tussen de punten */
  .meerwaarde__figure { grid-area: 1 / 2 / 3 / 3; align-self: center; }
}
/* Vaste hoogte i.p.v. max-height. In het raster spant deze foto over twee rijen, en met
   alleen een max-height krimpt hij mee met de kolom die zich naar hém voegt — dat liep uit
   op een kringetje waar hij veel te klein uit kwam (115px breed i.p.v. 154). Met een echte
   hoogte staat hij vast en groeien de rijen naar hem toe. De breedte volgt de verhouding
   van de uitsnede zelf: een staande figuur, dus smal. */
.meerwaarde__figure img { height: clamp(20rem, 30vw, 27.5rem); width: auto; filter: drop-shadow(0 1.25rem 2.125rem rgba(44,41,43,0.35)); }
/* Slide 6: geen kaartje, maar cijfer → streep → tekst los op de gele structuur.
   Beide kolommen wijzen naar Jasper toe: links rechts-uitgelijnd, rechts links.
   De streep loopt over de volle kolombreedte (zoals op de slide) en de tekst lijnt daar
   aan de binnenkant onder uit — vandaar stretch op het punt zelf en een aparte uitlijning
   voor het cijfer, want dat is een rondje en mag niet oprekken. */
.value-point { display: flex; flex-direction: column; align-items: stretch; }
.meerwaarde__col--left  .value-point { text-align: right; }
.meerwaarde__col--right .value-point { text-align: left; }
.meerwaarde__col--left  .value-point__num { align-self: flex-end; }
.meerwaarde__col--right .value-point__num { align-self: flex-start; }
.value-point__num {
  /* Meegegroeid met de tekst eronder, anders oogt het cijfer er ineens klein bij */
  flex-shrink: 0; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--color-dark); color: var(--color-white); font-weight: 800; font-size: 1.25rem;
}
/* Terug naar de opzet van de slide: donkere tekst rechtstreeks op het geel, met de
   stippellijn erboven. Hier stond een dekkend donker plaatje — dat was onze oplossing om
   witte tekst leesbaar te houden op de steigerplank, maar de slide doet het precies
   andersom en de klant wil dichter bij het brandbook. Met de gele waas op de sectie is
   donkere tekst hier gewoon leesbaar (4,96:1), dus het plaatje is niet meer nodig.
   De stippellijn wél overnemen: dat is een merkelement dat door het hele deck loopt.
   Elders op de pagina staat bewust een strakke lijn — dáár is het een kop, hier hoort
   het bij deze compositie. */
.value-point p {
  width: 100%; margin-top: var(--spacing-sm); padding-top: var(--spacing-sm);
  border-top: 2px dotted rgba(44, 41, 43, 0.5);
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--color-dark);
  /* Punt 2 is de enige die niet op één regel past (490px nodig, 452 beschikbaar) en liet
     "monitort" alleen achter. balance verdeelt de woorden gelijk over de regels, dus je
     krijgt "…de samenwerking en / voortgang monitort" — precies de afbreking van slide 6.
     Op de andere drie verandert er niets: die passen al op één regel. */
  text-wrap: balance;
}
/* Slotregel die de zin van de kop afmaakt. Op de slide is deze wit; hier donker, want wit
   haalt op deze muur 1,50:1 en dat is onleesbaar. Zie de opmerking bij .meerwaarde. */
.meerwaarde__slot {
  max-width: 60ch; margin: var(--spacing-lg) auto 0; text-align: center;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.25;
  color: var(--color-dark);
}
.meerwaarde__note { max-width: 72ch; margin: var(--spacing-md) auto 0; text-align: center; font-size: 1.1rem; font-weight: 500; }

/* ============================================================
   7. WAT JE KRIJGT / WAT JE MERKT
   ============================================================ */
/* Achtergrondmarkeringen zoals Post 15: grote merkvormen tint-op-tint die van de rand
   aflopen. Geen losse plaatjes — dezelfde halve-cirkel-techniek als de hero-kaart, dus
   de kleur blijft uit de variabelen komen. */
/* Ruimer dan de standaard sectiepadding. De klant merkte dat dit blok "onderbelicht"
   voelde: de secties erboven en eronder kwamen te snel in beeld, waardoor het geen eigen
   hoofdstuk leek. Anderhalf keer de gewone ruimte boven en onder, plus meer lucht tussen
   de kop en de twee kaarten. */
.oplevert { position: relative; overflow: hidden; padding-block: calc(var(--spacing-xl) * 1.6); }
.oplevert .section__head { margin-bottom: var(--spacing-lg); }
.oplevert__grid { margin-top: var(--spacing-lg); }
/* De zachte vormen in Post 15 zijn #E6D7D0: dat is geen neutraal grijs maar het paars
   op ~12% over de crème. De kleur komt dus uit de fasekleuren, niet uit --color-dark. */
.oplevert__mark { position: absolute; pointer-events: none; }
/* De vormen in Post 15 zijn de methode-iconen enorm uitvergroot — niet zomaar cirkels.
   Het icoon dient als masker, dus de kleur blijft uit de variabelen komen én de
   transparante snede ín het icoon laat de crème erdoorheen schijnen: precies het effect
   uit de post, zonder er een plaatje van te maken.
   Ze lopen alleen ZIJWAARTS van het scherm af: een vorm die op de sectiegrens stopt leest
   als een fout, want daaronder ligt dezelfde crème achtergrond. */
.oplevert__mark--boog {
  left: -7.5rem; top: 1.875rem; height: 36.25rem; aspect-ratio: 360 / 573;
  background: color-mix(in srgb, var(--phase-2) 14%, transparent);
  -webkit-mask: url('../images/methode-3.webp') no-repeat center / contain;
  mask: url('../images/methode-3.webp') no-repeat center / contain;
}
/* Kleuraccent rechts, zoals de paarse vorm in de post */
.oplevert__mark--accent {
  right: -4.375rem; bottom: 2.5rem; height: 18.75rem; aspect-ratio: 360 / 588;
  background: color-mix(in srgb, var(--phase-2) 18%, transparent);
  -webkit-mask: url('../images/methode-1.webp') no-repeat center / contain;
  mask: url('../images/methode-1.webp') no-repeat center / contain;
}
.oplevert .container { position: relative; z-index: 1; }
.oplevert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.oplevert__card { border-radius: var(--radius-lg); padding: clamp(var(--spacing-md), 4vw, var(--spacing-lg)); }
.oplevert__card h3 { font-size: 1.5rem; margin-bottom: var(--spacing-md); }
.oplevert__card--dark { background: var(--color-dark); color: var(--color-white); position: relative; overflow: hidden; }
/* Half rondje tegen de rechterrand: de cirkel staat half buiten de kaart en wordt door
   overflow afgeknipt, dus de platte kant valt exact op de rand. 10% wit is dezelfde
   verhouding die de hero-kaart tussen vorm en ondergrond gebruikt. */
.oplevert__card--dark::before {
  content: ''; position: absolute; top: 50%; right: 0;
  width: 42%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(50%, -50%);
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
  pointer-events: none;
}
/* Inhoud boven de vorm houden */
.oplevert__card--dark > * { position: relative; }
.oplevert__card--dark h3 { color: var(--color-white); }
.oplevert__card--light { background: var(--color-white); box-shadow: var(--shadow); }
.oplevert__card--light .ticklist li { color: var(--color-text-light); }
.oplevert__card--light .ticklist li::before { background: var(--color-primary); }
.oplevert__card--dark .ticklist li::before { background: var(--color-primary); }

/* ============================================================
   8. REFERENTIES
   ============================================================ */
/* Ligt tussen twee lichte vlakken (oplevert en het gele Jasper-paneel), dus de citaten
   zelf zijn donker: anders lost het blok op in de crème en leest het als een vervolg op
   de sectie erboven. Zelfde recept als het contact-eiland — donker met de betonstructuur
   erdoorheen, zodat het materiaal van de branding ook hier terugkomt. */
/* Mobile first: één kolom, vanaf tablet twee. Geen auto-fit — dat laat op brede schermen
   een lege derde spoor met goot achter, waardoor de twee kaarten scheef in de sectie
   komen te staan. */
.cards--2 { grid-template-columns: 1fr; align-items: stretch; margin-top: var(--spacing-lg); }
@media (min-width: 769px) { .cards--2 { grid-template-columns: 1fr 1fr; } }

/* Achtergrondvormen, om het egale crème op te breken. Zelfde device als bij "oplevert" en
   "voor wie" (methodevormen enorm uitvergroot als masker, fasekleur op ~10%), maar een eigen
   combinatie zodat het geen kopie van de buren wordt: vorm 4 staat hier LINKS (bij "voor
   wie" rechts), vorm 2 klein als accent, en één vlakke cirkel.
   Alleen zijwaarts van het scherm af, verticaal binnen de sectie: erboven ligt het gele
   Jasper-vlak en eronder kijkt het crème door de hoeken van het aanbod, dus een vorm die
   op de sectiegrens wordt afgezaagd zou je als fout zien. */
.referenties { position: relative; overflow: hidden; }
.referenties .container { position: relative; z-index: 1; }
.referenties__mark { position: absolute; pointer-events: none; }
.referenties__mark--boog {
  left: -6rem; top: 2.5rem; height: 24rem; aspect-ratio: 360 / 563;
  background: color-mix(in srgb, var(--phase-1) 10%, transparent);
  -webkit-mask: url('../images/methode-4.webp') no-repeat center / contain;
  mask: url('../images/methode-4.webp') no-repeat center / contain;
}
.referenties__mark--blok {
  right: 7rem; top: 3rem; height: 9rem; aspect-ratio: 1;
  background: color-mix(in srgb, var(--phase-4) 14%, transparent);
  -webkit-mask: url('../images/methode-2.webp') no-repeat center / contain;
  mask: url('../images/methode-2.webp') no-repeat center / contain;
}
.referenties__mark--cirkel {
  right: -6rem; bottom: 2.5rem; width: 22rem; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--phase-3) 8%, transparent);
}
.referentie {
  display: flex; flex-direction: column;
  margin: 0;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-dark);
  background-image: linear-gradient(rgba(44, 41, 43, 0.88), rgba(44, 41, 43, 0.88)),
    url('../images/texture-beton.avif');
  background-size: cover;
  box-shadow: var(--shadow);
  color: var(--color-white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.referentie:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lg); }
/* Het aanhalingsteken is een vorm en geen letter: decoratief, dus buiten de leesvolgorde */
.referentie blockquote {
  position: relative;
  flex: 1;
  margin: 0;
  font-size: 1.05rem; line-height: 1.6;
  color: rgba(245, 237, 226, 0.92);
}
.referentie blockquote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 3.5rem; line-height: 0.6;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}
.referentie figcaption {
  margin-top: var(--spacing-md); padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(245, 237, 226, 0.16);
  font-size: 0.9rem; color: rgba(245, 237, 226, 0.72);
}
.referentie__naam { display: block; font-weight: 800; color: var(--color-primary); }
/* Een citaat met twee alinea's (Gertjan) moet ook als twee alinea's lezen */
.referentie blockquote p + p { margin-top: var(--spacing-sm); }
/* Precies één scherm hoog vanaf tablet (.section--vullend), op elk formaat — ook een lage
   laptop en een ultrawide. Daarvoor drie dingen:
   1. Bijna geen vaste buitenpadding — staat in de gedeelde .section--vullend-regel.
   2. De binnenruimtes groeien mee met de schermhoogte (vh), met de ruime maten als plafond:
      kop → kaarten tot 96, in de kaart tot 48 opzij. Op 900px hoog en hoger is dat precies
      de ruime opzet; op een lage laptop krimpt het tot het past.
   3. Op echt lage schermen ook de citaattekst een stap kleiner — de witruimte alleen haalt
      het daar niet (1366×657: 568px beschikbaar).
   Op mobiel blijft het compact: daar is de sectie niet schermvullend en kost 48px opzij een
   derde van de leesbreedte. */
@media (min-width: 769px) {
  .referenties .cards--2 {
    margin-top: clamp(var(--spacing-lg), 10.5vh, var(--spacing-xl));
    gap: var(--spacing-lg);
  }
  .referentie { padding: clamp(var(--spacing-md), 5.3vh, var(--spacing-lg)); }
  .referentie blockquote { font-size: 1.15rem; }
}
@media (min-width: 769px) and (max-height: 760px) {
  .referentie blockquote { font-size: 1.05rem; }
}
@media (min-width: 769px) and (max-height: 660px) {
  .referentie blockquote { font-size: 1rem; }
  .referentie figcaption { margin-top: var(--spacing-sm); }
}

/* ============================================================
   7b. IK BEN JASPER
   ============================================================ */
/* Slide 5: wit paneel met een gele rand eromheen. De rand is daar egaal geel, geen
   structuur — nagemeten in de slide, dus hier ook geen textuur.
   Het geel zit op __vlak en niet op de sectie: zo is de rand simpelweg de padding van dit vlak — dus overal even breed,
   op elke schermbreedte. */
/* Rand groeit mee met het scherm. De vaste 1,6% uit slide 5 bleef op grote schermen te
   dun; deze formule loopt steiler op (de -12px drukt hem op kleine schermen terug), dus
   hij blijft bescheiden op tablet en wordt fors op een breed scherm. Ondergrens houdt
   hem zichtbaar op smalle telefoons. */
.jasper__vlak { background: var(--color-primary); padding: max(0.75rem, 3.4vw - 0.75rem); }
.jasper .panel { max-width: none; }
/* Twee rijen om-en-om: foto links met rol en kracht, dan ervaring links met de foto
   rechts. Kolomverhouding uit slide 5 (foto ~27% van het paneel, tekst ~58%), in de
   tweede rij gespiegeld. De tekst staat verticaal midden naast zijn foto. */
.jasper__inner { display: grid; gap: var(--spacing-xl); }
.jasper__rij { display: grid; grid-template-columns: 0.46fr 1fr; gap: var(--spacing-xl); align-items: center; }
.jasper__rij--om { grid-template-columns: 1fr 0.46fr; }
/* In de HTML staat deze foto vóór de tekst (dan leest het op mobiel om-en-om); hier gaat
   hij naar rechts. */
.jasper__rij--om .jasper__media { grid-column: 2; grid-row: 1; }
.jasper__rij--om .jasper__content { grid-column: 1; grid-row: 1; }
/* Geen ondermarge na het laatste blok: die telde mee in de hoogte van de tekstkolom en
   trok de tekst dan 24px boven het midden van de foto. */
.jasper__content > :last-child { margin-bottom: 0; }
/* De kaart groeit met het scherm mee, maar de leesregel mag niet meegroeien: boven de
   ~940px zou die richting 130 tekens gaan. Kop en inhoud krijgen dezelfde begrenzing,
   anders staat de titel links terwijl de tekst eronder gecentreerd staat. */
.jasper .panel__head,
.jasper .jasper__inner { max-width: 58.75rem; margin-inline: auto; }
.jasper__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; }
.jasper__blok { margin-bottom: var(--spacing-lg); }
.jasper__cta { margin-top: var(--spacing-md); }
.jasper__blok h3 { font-size: 1.15rem; margin-bottom: 0.375rem; }
/* pretty en niet balance: balance maakt álle regels even lang en is bedoeld voor koppen
   van een paar woorden. Hier gaat het om lopende tekst waar juist de LAATSTE regel
   misging — "werkt." en "én mens." stonden er als los woord onder. pretty rekent alleen
   de staart opnieuw uit en laat de rest van de alinea met rust. */
.jasper__blok p { color: var(--color-text-light); text-wrap: pretty; }

/* ============================================================
   9. AANBOD — boost-kaarten (donker)
   ============================================================ */
/* Metaalplaat-structuur op 35% (het metaal is van zichzelf donker).
   Alle vier de hoeken rond: erboven liggen nu de referenties en eronder "voor wie", allebei
   crème — en een afronding tegen crème laat precies die kleur in de hoek zien. (Tot okt
   2026 lag hier het gele Jasper-vlak boven; toen bleven de bovenhoeken recht, want daar
   zou de afronding crème kerven tussen geel en donker.) */
.aanbod {
  border-radius: var(--radius-sectie);
  background-color: var(--color-dark);
  background-image: linear-gradient(rgba(44, 41, 43, 0.65), rgba(44, 41, 43, 0.65)),
    url('../images/texture-metaalplaat.avif');
  background-size: cover; background-position: center;
}
/* Gecentreerde intro van vier regels: zonder balance bleef "Bouwteam Boost." als losse
   regel onder de rest hangen. balance maakt de regels even lang, en dat oogt bij
   gecentreerde tekst als één blok. */
.aanbod .section__intro { text-wrap: balance; }
/* Op een telefoon wordt het 7-8 regels, en balance werkt maar tot 6 (Chrome); daarboven
   valt hij stil terug op gewoon afbreken. pretty is gemaakt voor lange alinea's en houdt
   juist het laatste woord gezelschap. */
@media (max-width: 768.98px) { .aanbod .section__intro { text-wrap: pretty; } }
.cards { display: grid; gap: var(--spacing-md); }
.cards--3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
/* Tussen tablet en klein laptop passen 3 kaarten niet: de kolom wordt smaller dan
   de kaart zelf nodig heeft en duwt de pagina zijwaarts. Daar dus 2 kolommen. */
@media (min-width: 769px) and (max-width: 1000px) {
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
/* Zelfde recept als de stapkaarten: de structuur van de fase op volle sterkte, met de
   leesbaarheid uit de gloed om icoon en tekst. Was een doorzichtige kaart, maar die liet
   de metaalplaat van de sectie erdoorheen zien — daardoor stonden er drie grijze kaarten
   waarvan alleen de rand nog kleur had. */
/* De kaart zelf heeft geen achtergrond: alleen deel 1 draagt de structuur, deel 2 laat
   de metaalplaat van de sectie doorschemeren. Zo staat de fasestructuur niet onder het
   zwart mee te kleuren. Vandaar ook padding 0 — elke helft regelt zijn eigen ruimte.
   Rand en band zijn wit en niet geel: geel is op deze pagina de knop. Stond het hier ook
   in de rand en de band, dan wees het nergens meer naar. */
.boost {
  display: flex; flex-direction: column;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius); padding: 0; overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Deel 1: de structuur van de fase, inhoud gecentreerd.
   Onderaan liep hier een wit verloop, puur om de witte marquee-band eruit te laten opkomen.
   Die band is eruit, dus dat verloop ook — anders blijft het als een lichte veeg staan
   tussen de kleur en het zwarte vlak eronder. De haarlijn op .boost__body scheidt de twee
   helften nu. */
.boost__kop {
  position: relative;
  /* Bovenpadding 24 en niet 48: de cirkel is 128px, en die 40px extra komt hier en onder
     de subtitel vandaan — zo is de kaart even hoog als met de kleinere cirkel van eerst. */
  padding: var(--spacing-md);
  background: var(--color-white);
}
/* Zachte donkere waas achter de tekst, uitdovend naar de randen. Zo hoeft de structuur
   zelf niet donker gemaakt te worden om de gele tekst leesbaar te houden: aan de randen
   zie je het materiaal op volle sterkte, in het midden staat de tekst op een rustige
   ondergrond. Gemeten op de DONKERSTE plek achter de tekst: bij donkere tekst op een
   lichte kaart is dát de plek waar het misgaat, precies andersom als bij witte tekst. */
.boost__kop::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 72% at 50% 50%,
    rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 78%);
}
.boost__kop > * { position: relative; z-index: 1; }
/* Elke kaart een eigen materiaal uit de branding, alle drie de zwart-witvariant. Niet meer
   de fasestructuren: die horen bij de vier stappen van de methode, en hier gaat het om drie
   losse keuzes.
   De waas per kaart verschilt omdat de bronnen sterk in helderheid verschillen (steigerplank
   153, beton 229, grunge zwart met 64% dekking). Doel is niet dezelfde waas maar dezelfde
   eindtoon, zodat de drie kaarten even donker ogen.
   De waarden zijn gekozen op de LICHTSTE plek van elke structuur, niet op het gemiddelde:
   daar is het contrast met de gele tekst het laagst, en dat is waar tekst wegvalt. */
.boost:nth-of-type(1) .boost__kop {
  background: linear-gradient(rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.48)),
    url('../images/texture-steigerplank-zw.avif') center / cover,
    var(--color-white);
}
/* Beton is van zichzelf al bijna wit (helderheid 229), dus hier geen waas nodig. */
.boost:nth-of-type(2) .boost__kop {
  background: url('../images/texture-beton.avif') center / cover, var(--color-white);
}
/* Deze grunge is zwart mét 64% dekking, dus veruit de zwaarste van de drie; vandaar de
   forse witte waas om op dezelfde helderheid uit te komen als de andere twee. */
.boost:nth-of-type(3) .boost__kop {
  background: linear-gradient(rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.76)),
    url('../images/texture-grunge-zw.avif') center / cover,
    var(--color-white);
}
/* Deel 2: zwart vlak waar de sectie-achtergrond doorheen schemert — vandaar 0.78 en
   geen dekkend zwart. flex-1 duwt de knop naar de onderrand, ook als de ene kaart een
   regel meer heeft dan de andere. */
/* Onderpadding 24 en niet 48: de knop kreeg 24px lucht erboven (zie .boost__cta), en die
   komt hier vandaan — de knop zakt binnen de kaart, de kaart zelf wordt niet hoger. */
.boost__body {
  flex: 1; display: flex; flex-direction: column;
  padding: var(--spacing-md);
  background: rgba(18, 16, 17, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
/* De rand is al geel; "oplichten" doet de gloed eromheen, niet een tweede geel. */
.boost:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow-lg), 0 0 1.125rem rgba(251, 207, 10, 0.45);
}
/* Nu alle kaarten dezelfde rand hebben, kan de uitgelichte niet meer aan zijn rand te
   herkennen zijn: die staat permanent zwak aan, alsof hij al hover heeft. */
.boost--featured { box-shadow: var(--shadow), 0 0 0.75rem rgba(255, 255, 255, 0.3); }
/* Het teken van elk instapmoment in een witte cirkel met een donkere gloed eromheen.
   Wit, want de iconen zijn donkere blokken met geel: in een donkere cirkel verdwenen die
   blokken en bleef alleen het geel over. De gloed zet de witte cirkel los van de lichte
   kaartkop. Geen cijfers: het zijn drie losse ingangen, geen volgorde.
   De iconen zijn bewust geen methodevormen en geen fasekleuren — die horen bij de vier
   stappen, en dan zouden de drie kaarten als stappen lezen. */
.boost__mark {
  display: grid; place-items: center;
  width: 8rem; height: 8rem; border-radius: 50%;
  margin-bottom: var(--spacing-sm); margin-inline: auto;
  background: var(--color-white);
  box-shadow: 0 0 3rem 0.875rem rgba(44, 41, 43, 0.7);
}
/* Vast vak met contain: de drie iconen hebben elk een andere verhouding, zo blijven ze
   binnen de cirkel en ogen ze even groot. */
.boost__mark img { width: 6rem; height: 6rem; object-fit: contain; }
.boost__title { font-size: 1.5rem; color: var(--color-dark); text-align: center; }
/* Omvang van het pakket, tussen de opsomming en de knop. Bewust geen prijs maar een
   maat: de klant wil geen bedragen, maar wel gevoel bij hoe groot zo'n traject is.
   De haarlijn erboven scheidt het van de opsomming zonder er een kader omheen te zetten. */
/* De drie kaarten zijn even hoog, maar de vinklijstjes lopen niet even ver door. Zonder
   deze regel begint "Omvang" bij elke kaart op een andere hoogte en loopt de
   scheidingslijn niet door over de rij. De lijst pakt de overtollige hoogte, waardoor
   omvang en knop tegen de onderrand komen. Dit is de tweekoloms-variant; in drie
   kolommen doet subgrid hieronder het werk. */
.boost__body .ticklist { flex: 1; }
/* Drie kolommen: de vier onderdelen (kop, lijst, omvang, knop) krijgen elk een rij in
   het kaartenraster zelf, zodat ze bij alle drie de kaarten op dezelfde hoogte staan —
   ongeacht hoe lang de tekst per kaart is. Twee lagen subgrid, want __body ligt ertussen
   en moet zijn eigen zwarte vlak en padding houden.
   row-gap 0 mag hier: op deze breedte staat er precies één rij kaarten, dus die goot
   zou alleen bínnen de kaarten terechtkomen. */
/* Op .aanbod en niet op .cards--3 zelf: die klasse wordt ook bij "voor wie" gebruikt, en
   daar zorgden de vier vaste rijen voor drie lege rijen onder de kaarten. Zolang row-gap
   0 was zag je dat niet, maar zodra die sectie een ruimere goot kreeg stond er ineens
   144px lucht onder de kaarten. */
@media (min-width: 1001px) {
  .aanbod .cards--3 { grid-template-rows: repeat(4, auto); row-gap: 0; }
  .aanbod .boost { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
  .aanbod .boost__body { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
}
.boost__omvang {
  /* padding + labelregel + 4 tekstregels: de langste van de drie op deze breedte.
     Een min-height, dus loopt een kaart op een smaller scherm uit, dan groeit hij mee. */
  min-height: calc(var(--spacing-sm) + 1.5rem + 4lh);
  margin-top: var(--spacing-md); padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(245, 237, 226, 0.16);
  font-size: 0.9rem; line-height: 1.55; color: rgba(245, 237, 226, 0.82);
}
.boost__omvang span {
  display: block; font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 0.25rem;
}
/* Twee regels hoog, ook als de tekst er maar één nodig heeft: anders begint het zwarte
   vlak bij de ene kaart hoger dan bij de andere en loopt de scheidingslijn niet door.
   Zelfde truc als bij .steps-nav__label. */
.boost__for {
  color: var(--color-text-light); margin-block: var(--spacing-xs);
  font-weight: 600; text-align: center;
  min-height: 2lh; display: flex; align-items: center; justify-content: center;
}
/* Geen ondermarge: het omvang-blok eronder heeft zelf al 24px marge boven zijn streep, en
   samen gaf dat een dubbele tussenruimte (56px van laatste bullet tot streep). */
.boost .ticklist { flex: 1; }
/* margin-top: zonder die marge sloot de knop direct op het omvang-blok aan — bij de
   twee kaarten met de langste omvangtekst zat er 3px tussen tekst en knop. Op alle drie
   dezelfde marge, dus de knoppen blijven in de subgrid-rij op één lijn. */
.boost__cta { width: 100%; margin-top: var(--spacing-md); font-size: 0.9rem; padding: 0.75rem 1.125rem; }

/* ============================================================
   10. VOOR WIE — doelgroepkaarten
   ============================================================ */
/* Donkere kaart met de metaalplaat van de aanbod-sectie, maar doorzichtig: de crème
   sectie schemert erdoorheen. De sectie zelf blijft licht — die is de ademhaling tussen
   aanbod en contact, twee donkere secties.
   De structuur kan hier NIET in de background-shorthand: een foto is dekkend en zou elke
   doorzichtigheid ongedaan maken. Vandaar een eigen laag met opacity hieronder. */
.target {
  position: relative; overflow: hidden;
  background-color: var(--color-dark);
  background-image: linear-gradient(rgba(44, 41, 43, 0.65), rgba(44, 41, 43, 0.65)),
    url('../images/texture-metaalplaat.avif');
  background-size: cover; background-position: center;
  border-radius: var(--radius); padding: var(--spacing-lg);
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* De gele halve cirkel rechtsonder komt van slide 13: het merk zet op een witte kaart
   precies deze vorm achter de inhoud. Beton en niet Grunge: Grunge is van zichzelf
   donker en wordt op dit formaat een zwarte klodder i.p.v. een gele vorm.
   Metaalplaat viel om dezelfde reden af (bijna zwart). */
.target::after {
  content: ''; position: absolute; right: -2rem; bottom: -2.5rem;
  /* Basismaat als variabele: de mobiele verkleiningen hieronder passen zo ook op het
     gedraaide vierkant, dat zijn breedte hiervan afleidt. */
  --vorm: 9rem;
  width: var(--vorm); aspect-ratio: 1; border-radius: 50%;
  background: url('../images/texture-beton-geel.avif') center / cover, var(--color-primary);
  pointer-events: none;
}
/* Elke kaart zijn eigen vorm, uit hetzelfde repertoire als de methodevormen: cirkel,
   vierkant, halve cirkel. Alleen de vórm verschilt — kleur, structuur, formaat en plek
   blijven gelijk, zodat het één serie blijft en niet drie losse kaarten.
   De vormen moeten uit elkaar te houden zijn in het stuk dat je ziet: de kaart snijdt
   rechts en onder af, dus het verschil moet linksboven zitten. Vandaar een schuin
   vierkant (scherpe punt) en een halve cirkel met een platte bovenkant. */
.target:nth-of-type(2)::after {
  border-radius: 0;
  transform: rotate(-18deg);
  /* Draaien maakt de omhullende doos groter (breedte x (cos18 + sin18) = x1,26), en dan
     reikt de punt verder de tekst in dan de cirkel. Terugrekenen naar dezelfde voetafdruk:
     9rem / 1,26. Zo weegt elke vorm even zwaar in de hoek. */
  width: calc(var(--vorm) / 1.26);
}
/* Projectteams: was een halve cirkel met een platte bovenkant op de volle 9rem, en dat
   oogde als een lomp blok in de hoek. Nu de halve maan uit de hero — dezelfde vorm, dus
   hij komt uit hetzelfde repertoire — een slag kleiner en gekanteld, zodat het een accent
   blijft en geen vlak wordt. De offsets kleiner omdat de vorm zelf kleiner is: anders
   verdwijnt hij bijna helemaal buiten de kaart. */
.target:nth-of-type(3)::after {
  --vorm: 6.25rem;
  right: -1.25rem; bottom: -1.5rem;
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transform: rotate(-28deg);
}
/* Gestapeld is de kaart breed maar laag, dus staat de cirkel relatief hoger en loopt de
   tekst er alsnog overheen. Kleinere cirkel i.p.v. kortere tekst: de tekst is hier de
   inhoud, de cirkel de versiering.
   768.98 en niet 768: op een gebroken vensterbreedte (Windows-schaling, browserzoom) is
   het venster bijv. 768,5 breed. Dan matcht max-width 768 níét en min-width 769 óók niet,
   en valt de pagina terug op de bureaubladregels. Gemeten: op exact 768 sprong de footer
   naar drie kolommen. De .98 dicht dat gaatje. */
@media (max-width: 768.98px) {
  .target::after { --vorm: 6.5rem; }
}
/* De inhoud eroverheen; de vorm blijft achtergrond */
.target > * { position: relative; z-index: 1; }
.target:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lg); }
/* De partijnaam draagt het blok: die moet je lezen voor je de regel eronder leest.
   fit-content is hier de hele truc: daardoor is de kop precies zo breed als het woord en
   loopt de streep eronder exact even ver. Zonder dat zou de streep de kaart doorsnijden.
   Geen JS-meting nodig zoals bij .panel__head, want dit is altijd één woord. */
.target__title {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--color-white);
  width: fit-content; margin-bottom: var(--spacing-sm);
}
/* ---- Achtergrondvormen, paginadekkend ----
   Zelfde device als bij .oplevert (Post 15): de methode-iconen enorm uitvergroot, met het
   icoon als masker zodat de kleur uit de variabelen blijft komen. Hier vier vormen in vier
   fasekleuren i.p.v. twee in één kleur — vandaar de spreiding over de hoeken.
   Alle percentages liggen tussen 7 en 11: hoger en het wordt een vlak, lager en het is
   niet meer te zien. Ze mogen achter de kaarten door lopen; die zijn dekkend.
   overflow: hidden op de sectie houdt ze binnenboord — anders duwen ze de pagina zijwaarts. */
.voorwie { position: relative; overflow: hidden; }
/* Meer lucht tússen de onderdelen, niet alleen eromheen. De sectie is schermvullend, dus
   die ruimte was er al — hij stond alleen boven en onder het blok in plaats van erin.
   Alle drie de afstanden verdubbelen, zodat de onderlinge verhouding blijft kloppen:
   titel-intro 24→48, kop-kaarten 48→96, kaarten onderling 24→48. Alleen vanaf tablet:
   op mobiel is de sectie niet schermvullend, dus daar is die ruimte er niet gratis. */
/* De ruime maten groeien mee met de schermhoogte, met 48/96/48 als plafond: op 900px hoog
   en hoger is het precies de ruime opzet, op een lage laptop krimpt het tot de sectie op
   één scherm past (zelfde aanpak als de referenties). */
@media (min-width: 769px) {
  .voorwie .section__intro { margin-top: clamp(var(--spacing-md), 5.3vh, var(--spacing-lg)); }
  .voorwie .section__head { margin-bottom: clamp(var(--spacing-lg), 10.5vh, var(--spacing-xl)); }
  .voorwie .cards--3 { gap: var(--spacing-lg); }
  .voorwie .target { padding: clamp(var(--spacing-md), 5.3vh, var(--spacing-lg)); }
}
@media (min-width: 769px) and (max-height: 760px) {
  .voorwie .section__intro { font-size: 1.05rem; }
}
/* 1280×620 (1920×1080 op 150%): 531px beschikbaar. Kop + intro + kaarten nemen hier al
   ~460px in, dus ook de twee grootste ruimtes een vaste stap kleiner. */
@media (min-width: 769px) and (max-height: 660px) {
  .voorwie .section__intro { font-size: 1rem; }
  .voorwie .section__head { margin-bottom: var(--spacing-lg); }
  .voorwie .target { padding: var(--spacing-md); }
}
.voorwie__mark { position: absolute; pointer-events: none; }
.voorwie .container { position: relative; z-index: 1; }

/* Vlakke cirkels uit slide 3/12: die snijden daar de sectie in vanaf de rand */
.voorwie__mark--cirkel-groot {
  left: -11rem; top: -7rem; width: 32rem; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--phase-1) 9%, transparent);
}
/* Bleef eerst met bottom: -6rem onder de sectierand hangen. Zolang daar een volgende
   sectie tegenaan lag was die snede onzichtbaar; nu ligt daar de crème rond het eiland en
   zag je een cirkel die halverwege recht wordt afgezaagd. Vandaar een positieve bottom:
   hij loopt nog wel de rechterrand uit — dát is het device uit slide 3 — maar hij eindigt
   verticaal binnen de sectie. Zelfde reden bij --blok hieronder. */
.voorwie__mark--cirkel-klein {
  right: -5rem; bottom: 2rem; width: 20rem; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--phase-2) 8%, transparent);
}
/* De gemaskerde iconen, zoals in Post 15 */
.voorwie__mark--boog {
  right: 4rem; top: -3rem; height: 26rem; aspect-ratio: 360 / 563;
  background: color-mix(in srgb, var(--phase-4) 11%, transparent);
  -webkit-mask: url('../images/methode-4.webp') no-repeat center / contain;
  mask: url('../images/methode-4.webp') no-repeat center / contain;
}
.voorwie__mark--blok {
  left: 6rem; bottom: 1.5rem; height: 18rem; aspect-ratio: 360 / 360;
  background: color-mix(in srgb, var(--phase-3) 10%, transparent);
  -webkit-mask: url('../images/methode-2.webp') no-repeat center / contain;
  mask: url('../images/methode-2.webp') no-repeat center / contain;
}

/* Zelfde streep als onder de sectiekoppen (zelfde hoogte, zelfde ronding), maar met
   dezelfde betonstructuur als de cirkel rechtsonder. cover geeft hier ongeveer dezelfde
   vergroting als bij de cirkel (~0,25x), dus de korrel is even grof in beide vormen. */
.target__title::after {
  content: ''; display: block; height: 0.3125rem; border-radius: 999px;
  margin-top: var(--spacing-xs);
  background: url('../images/texture-beton-geel.avif') center / cover, var(--color-primary);
}
/* De regel houdt de linkerkolom vrij, zoals slide 13: tekst links, vorm rechts. Zonder
   deze grens loopt de laatste regel over de gele cirkel en zakt het contrast naar 3,5:1. */
.target p { font-size: 1.1rem; color: var(--color-white); max-width: 20ch; }

/* ============================================================
   11. CONTACT
   ============================================================ */
/* ---- Zone rond het eilandje ----
   Twee vormen die van de schermrand naar binnen komen, zodat de crème naast het eiland
   dezelfde laag draagt als de sectie erboven. Zonder deze vormen leest die strook als
   leegte in plaats van als achtergrond.
   overflow-x: clip en niet hidden — hidden dwingt óók verticaal een scrollcontainer af, en
   dan zou de schaduw van het eiland worden afgekapt. clip mag met visible op de andere as. */
/* Extra lucht vóór het eiland. De klant wil dat de overgang van "Voor wie" naar het
   contactblok voelt als een nieuw hoofdstuk in plaats van de volgende alinea. De ruimte
   staat hier en niet als padding op "voor wie": die sectie heeft overflow: hidden voor zijn
   achtergrondvormen, en extra padding daar zou die vormen mee oprekken. */
.contact-zone { position: relative; overflow-x: clip; margin-top: var(--spacing-xl); }
.contact-zone__mark { position: absolute; pointer-events: none; z-index: 0; }
.contact-zone > .contact { position: relative; z-index: 1; }
/* Verticaal blijven ze allebei binnen de zone: alleen zijwaarts lopen ze het beeld uit.
   Zou er iets boven- of onderlangs uitsteken, dan sneed de rand van de volgende sectie het
   af — precies de snede die we hierboven bij "voor wie" juist hebben weggehaald. */
.contact-zone__mark--links {
  left: -15rem; top: 15%; width: 28rem; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--phase-2) 9%, transparent);
}
.contact-zone__mark--rechts {
  right: -7rem; bottom: 12%; height: 20rem; aspect-ratio: 360 / 563;
  background: color-mix(in srgb, var(--phase-1) 11%, transparent);
  -webkit-mask: url('../images/methode-1.webp') no-repeat center / contain;
  mask: url('../images/methode-1.webp') no-repeat center / contain;
}

/* Beton-structuur op 12% (het beton is van zichzelf licht, dus subtiel).
   Eilandje: het blok loopt niet meer van rand tot rand, maar zweeft op de crème van
   "voor wie" hierboven — dus rond aan alle vier de hoeken en met crème eromheen.
   width en max-width samen: de max-width geeft hem op een breed scherm zijn maat (de
   container plus een rand van spacing-lg aan weerszijden), de width houdt op een smalle
   telefoon altijd een gootje over. Een vaste width zou daar overlopen. */
.contact {
  /* De goot is --spacing-lg en niet --spacing-md: hierin moeten de vormen van de zone
     zichtbaar zijn. Met 24px zie je onder 1344px alleen een streepje kleur; met 48px lees
     je een vorm die van de schermrand naar binnen komt. */
  width: calc(100% - var(--spacing-lg) * 2);
  max-width: calc(var(--maxw) + var(--spacing-lg) * 2);
  margin-inline: auto;
  /* Eigen binnenrand. Zonder deze regel vult de container het eiland op élk scherm onder
     1344px volledig en zit de tekst tegen de afronding aan — de container heeft immers
     zijn eigen max-width en die is bijna altijd ruimer dan het eiland. */
  padding-inline: var(--spacing-md);
  border-radius: var(--radius-sectie);
  background-color: var(--color-dark);
  background-image: linear-gradient(rgba(44, 41, 43, 0.88), rgba(44, 41, 43, 0.88)),
    url('../images/texture-beton.avif');
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-lg);
}
.contact__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--spacing-xl); align-items: start; }
.contact__details { margin-top: var(--spacing-md); font-size: 1.15rem; font-weight: 700; }
.contact__details li { margin-bottom: var(--spacing-xs); }
.contact__name { color: var(--color-white); }
.contact__details a { color: var(--color-primary); transition: opacity 0.3s var(--ease); }
.contact__details a:hover { opacity: 0.75; }
/* Direct contact in plaats van een formulier (zie de opmerking in index.html). Zelfde vlak
   als het formulier had, zodat het eiland zijn tweekoloms opbouw houdt. WhatsApp geel: de
   snelste route en de knop die het meest opvalt; de rest als lijnknop eronder. */
.contact__acties {
  display: grid; gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: rgba(245, 237, 226, 0.05);
  border: 1px solid rgba(245, 237, 226, 0.12);
  border-radius: var(--radius-lg);
}
.contact__acties-intro { margin-bottom: var(--spacing-xs); color: rgba(245, 237, 226, 0.82); text-align: center; }
/* Smallere zijpadding en geen afbreking: op 360px viel "Stuur een WhatsApp" anders net
   (2px) over twee regels en werd die knop hoger dan de rest */
.contact__actie { width: 100%; gap: var(--spacing-sm); padding-inline: var(--spacing-sm); white-space: nowrap; }
/* De lijnknoppen hebben een rand van 2px; zonder die rand was de gele knop 4px lager */
.contact__actie.btn--primary { border: 2px solid var(--color-primary); }
.contact__actie svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
/* De footer schoof eerst met een negatieve marge over de contactsectie heen, zodat zijn
   afgeronde hoeken het beton daarvan onthulden in plaats van de crème van de body — twee
   lichte kerven tussen twee donkere blokken lezen als een fout. Nu de contactsectie een
   eilandje is, is crème daar juist de bedoeling: de footer krijgt dus een echte marge en
   zijn hoeken laten dezelfde achtergrond zien als die om het eiland heen. */
.footer {
  position: relative;
  margin-top: var(--spacing-lg);
  border-radius: var(--radius-sectie) var(--radius-sectie) 0 0;
  background: #211f20; color: var(--color-white);
  padding-block: var(--spacing-lg);
}
/* De merkkolom is breder dan eerst: de baseline hoort op één regel te passen. De
   navigatie schuift daardoor naar rechts, wat mag. */
.footer__inner { display: grid; grid-template-columns: 1.8fr 0.8fr 1.1fr; gap: var(--spacing-lg); align-items: start; }
.footer__logo { display: inline-block; transition: transform 0.3s var(--ease); }
.footer__logo:hover { transform: scale(1.02); }
.footer__brand img { width: 10rem; height: auto; margin-bottom: var(--spacing-sm); display: block; }
/* Geen max-width in ch meer: die kapte de baseline af op twee regels. Hij telt 49
   tekens en blijft dus ruim binnen een leesbare regellengte. */
.footer__brand p { font-size: 0.95rem; }
.footer__nav { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.footer__nav a { transition: color 0.3s var(--ease); }
.footer__nav a:hover { color: var(--color-primary); }
.footer__meta { font-size: 0.9rem; line-height: 1.8; }

/* Drie ronde contactknoppen. Zelfde vorm en kleur als de merk-pijl elders op de pagina:
   geel rondje, donker teken. Geel betekent hier "klik", en dat klopt — dit zijn knoppen.
   De maat is 2.875rem (46px) en niet 2.75rem: dat laatste komt door de clamp op de root
   uit op 43,99px — net onder de 44px die een vingerdoel hoort te halen. */
.footer__contact {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--spacing-sm);
}
.footer__contact a {
  display: grid; place-items: center;
  width: 2.875rem; height: 2.875rem; border-radius: 50%;
  background: var(--color-primary); color: var(--color-dark);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.footer__contact svg { width: 1.375rem; height: 1.375rem; }
.footer__contact a:hover {
  transform: scale(1.02) translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.375rem rgba(251, 207, 10, 0.4);
}
.footer__contact a:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; }

.footer__credit { margin-top: var(--spacing-md); color: var(--color-white); line-height: 1.5; }
/* Dezelfde krappe zone waar .cards--3 naar twee kolommen gaat: in drie kolommen houdt de
   meta-kolom hier maar 182px over en breekt "Website door HansumDigital" (188px nodig).
   Het merk pakt de hele bovenrij, navigatie en contact staan eronder naast elkaar.
   Deze regel staat bewust ná .footer__inner hierboven: eerder in het bestand verliest hij
   de cascade van de basisregel. */
@media (min-width: 769px) and (max-width: 1000px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
/* Onderstreept, want een link in een lopende regel moet je kunnen zien zonder hover */
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s var(--ease); }
.footer__credit a:hover { color: var(--color-primary); }

/* ============================================================
   404-PAGINA
   ============================================================ */
/* Eén scherm donker met logo, kop en terugknop. Geen header/footer: wie hier landt
   moet maar één ding kunnen, terug naar de site. */
.notfound {
  display: grid; place-items: center; min-height: 100dvh;
  padding: var(--spacing-lg) var(--spacing-sm);
  background: var(--color-dark); color: var(--color-cream); text-align: center;
}
.notfound__inner { display: grid; justify-items: center; gap: var(--spacing-md); max-width: 40ch; }
.notfound__logo { width: 11.25rem; height: auto; margin-bottom: var(--spacing-sm); }
.notfound__title { color: var(--color-white); font-size: clamp(1.9rem, 4.5vw, 3rem); text-wrap: balance; }
.notfound__text { color: rgba(245, 237, 226, 0.82); }
.notfound .btn { margin-top: var(--spacing-xs); }

/* ============================================================
   SCROLL-ANIMATIES (fade-up)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(1.875rem); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.signals .reveal:nth-child(2), .cards .reveal:nth-child(2), .steps-nav .reveal:nth-child(2) { transition-delay: 0.08s; }
.signals .reveal:nth-child(3), .cards .reveal:nth-child(3), .steps-nav .reveal:nth-child(3) { transition-delay: 0.16s; }
.signals .reveal:nth-child(4), .steps-nav .reveal:nth-child(4) { transition-delay: 0.24s; }
.signals .reveal:nth-child(5) { transition-delay: 0.32s; }
.signals .reveal:nth-child(6) { transition-delay: 0.40s; }

/* Methodevormen: scroll-assemblage — schuiven om-en-om in de rij en vallen op hun plek.
   Alleen op desktop (horizontaal); op mobiel gewone fade-up zodat de kaarten altijd gecentreerd staan. */
.steps-nav .reveal:nth-child(1) { transition-delay: 0s; }
.steps-nav .reveal:nth-child(2) { transition-delay: 0.14s; }
.steps-nav .reveal:nth-child(3) { transition-delay: 0.28s; }
.steps-nav .reveal:nth-child(4) { transition-delay: 0.42s; }
@media (min-width: 769px) {
  .steps-nav .reveal { opacity: 0; transform: translateX(-4.5rem) scale(0.9); }
  .steps-nav .reveal:nth-child(even) { transform: translateX(4.5rem) scale(0.9); }
  .steps-nav .reveal.is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .steps-nav .reveal, .steps-nav .reveal.is-visible { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .btn, .step, .boost, .target, .card, .steps-nav__item { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .step { grid-template-columns: 13.75rem 1fr; }
  .contact__inner { gap: var(--spacing-lg); }
}

/* Het eiland kost 96px aan randen die de sectie op volle breedte niet had. Onder ~850px
   houdt het knoppenvlak daardoor minder dan 380px over en passen de knopteksten (die niet
   afbreken) er niet meer naast de gegevens. Dan is één kolom beter. */
@media (min-width: 769px) and (max-width: 899.98px) {
  .contact__inner { grid-template-columns: 1fr; }
}

@media (max-width: 768.98px) {
  :root { --spacing-xl: 4rem; }

  /* Mobiele navigatie */
  .nav {
    position: fixed; inset: 5.5rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-dark); padding: var(--spacing-md); border-bottom: 1px solid rgba(245, 237, 226, 0.1);
    transform: translateY(-120%); transition: transform 0.4s var(--ease); box-shadow: var(--shadow-lg);
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: 0.875rem 0.25rem; border-bottom: 1px solid rgba(245, 237, 226, 0.08); }
  .nav__cta { margin-top: var(--spacing-sm); }
  .nav-toggle { display: flex; }

  /* GEEN clip-path op dit blok op een telefoon. Het is hier ~5900px hoog, en clip-path
     dwingt de browser het als één laag uit te tekenen. Maal de pixeldichtheid van een
     telefoon (3x) is dat ruim 17.000 pixels hoog — boven de maximale textuurgrootte van
     mobiele browsers. Lukt dat niet, dan tekent hij de inhoud niet: je ziet alleen de
     achtergrondkleur en verder niets, precies wat er gebeurde.
     border-radius rondt de achtergrond van het blok zelf af zonder er een laag van te
     maken. De structuurlaag is een apart element en luistert daar niet naar, dus die
     krijgt `overflow: clip` als schaar. Clip en geen hidden: hidden maakt een
     scrollcontainer en breekt sticky. Dat mag hier sowieso, want de stapkaarten plakken
     op een telefoon niet. */
  .methode-blok {
    clip-path: none;
    border-radius: var(--radius-sectie) var(--radius-sectie) 0 0;
    overflow: clip;
  }

  /* Kaart-hero blijft schermvullend; alleen de padding krimpt op smalle schermen */
  .hero-card--groot { padding: var(--spacing-lg) var(--spacing-md); }
  /* Smalle, hoge kaart: op de hoogte gerekend wordt de maan breder dan de kaart zelf,
     dus hier op de breedte rekenen. Blijft een halve cirkel. */
  .hero-card__shape { height: auto; width: 74%; }
  .hero-card--groot .hero-card__logo { right: var(--spacing-md); bottom: var(--spacing-md); }

  /* Eén kolom: terug naar gewone volgorde, anders ontstaan er extra kolommen */
  .signals { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }

  /* Eén kolom: de vaste kolomplaatsing los, anders maakt grid-column: 2 een
     fantoomkolom naast de pagina. */
  .panel__body { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .panel__left, .panel__quote { grid-column: auto; }
  .panel__quote { padding-top: var(--spacing-md); }

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

  .step { grid-template-columns: 1fr; }
  .step__aside { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); }
  /* Naast elkaar op mobiel: kleiner wit vlak, geen ondermarge */
  .step__icon { width: 5rem; padding: 0.5rem; margin-bottom: 0; }
  /* Eén kolom: het vaste drie-rijenschema klopt hier niet meer (vier blokken onder
     elkaar) en er is toch geen overtollige hoogte om te verdelen. */
  .step__cols { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--spacing-md); }

  .meerwaarde__stage { grid-template-columns: 1fr; }
  .meerwaarde__col { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; }
  /* Zonder Jasper ertussen heeft naar-binnen-wijzen geen betekenis meer: alles links */
  .meerwaarde__col--left { text-align: left; }
  .meerwaarde__col--left .value-point,
  .meerwaarde__col--right .value-point { align-items: flex-start; text-align: left; }
  .value-point { flex: 1 1 16.25rem; }
  /* Geen order meer: de HTML staat al in de goede volgorde — punt 1 en 2, dan Jasper,
     dan punt 3 en 4. Dat is ook wat de twee kolommen op desktop doen (links wijst naar
     hem toe, rechts vanaf hem af), alleen uitgevouwen tot één kolom. De foto stond hier
     eerst bovenaan; dan opende de sectie met een portret en kwamen alle vier de punten
     er als een lijst achteraan. */
  .meerwaarde__figure img { max-height: 20rem; }

  .oplevert__grid { grid-template-columns: 1fr; }
  /* Eén kolom, in HTML-volgorde: foto, rol en kracht, foto, ervaring, knop */
  .jasper__inner { gap: var(--spacing-lg); }
  .jasper__rij,
  .jasper__rij--om { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .jasper__rij--om .jasper__media,
  .jasper__rij--om .jasper__content { grid-column: auto; grid-row: auto; }
  .jasper__media { max-width: 28.75rem; }
  /* De staande foto is anderhalf keer zo hoog als breed; op volle breedte wordt hij op een
     telefoon een heel scherm hoog. */
  .jasper__media--staand { max-width: 18rem; }
  .cards--3 { grid-template-columns: 1fr; }
  /* Smaller gootje om het eiland: met 24px eromheen plus de 16px van de container
     erbinnen begint de tekst op 40px, terwijl de rest van de pagina op 16px begint.
     Dat scheelt op een 360px-scherm ruim 10% breedte voor de contactknoppen. */
  .contact { width: calc(100% - var(--spacing-sm) * 2); padding-inline: 0; }
  /* Op mobiel is de goot naast het eiland 16px. Een reepje vorm van 16px leest niet als
     een vorm maar als een vlek, dus daar gaan ze uit. */
  .contact-zone__mark { display: none; }
  .contact__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: var(--spacing-md); }
}

@media (max-width: 420px) {
  .container { padding-inline: var(--spacing-sm); }
  .step, .boost, .contact__acties { padding: var(--spacing-md); }
  .steps-nav { grid-template-columns: 1fr; }
  .statement p { font-size: 1.3rem; }
  /* Op de smalste telefoons schuurt de tekst anders tegen de cirkel (gemeten op 320px) */
  .target::after { --vorm: 5.5rem; }
}