/* ===== Milkshake marketing =====
   Huisstijl: Huisstijlsheet 24-02-2026 · maten gemeten op popcornprojecten.nl */

/* Gewichten exact zoals de huidige site ze koppelt (gecontroleerd in de live CSS):
   300 Light · 350 Book · 400 Roman · 500 Medium · 700 Heavy · 900 Black.
   Let op: 'vet' is dus 700, niet 800 — 800 zou naar Black springen.

   Hieronder staan alleen de drie gewichten die de site daadwerkelijk aanroept.
   Light (300), Book (350), Black (900) en Pecita stonden hier wel gedeclareerd
   maar werden nergens gebruikt: dode regels. De woff2-bestanden blijven in
   assets/fonts/ staan — zet de @font-face terug op het moment dat een gewicht
   écht ergens wordt aangeroepen, anders synthetiseert de browser hem. */
@font-face { font-family: 'Avenir'; src: url('../assets/fonts/Avenir-Roman.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Avenir'; src: url('../assets/fonts/Avenir-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Avenir'; src: url('../assets/fonts/Avenir-Heavy.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --magenta: #FF178B;
  --magenta-dark: #D4006F;
  --ink: #2F4050;
  --ink-deep: #243240;
  --near-black: #141414;
  --body-text: #2E2D2D;
  /* Gedempte tekst (introregel casekaarten). De referentiesite meet #6B7280,
     maar dat haalt 4,2:1 op --grey; verdonkerd tot 5,1:1. */
  --text-muted: #5F6670;
  --grey: #F0EFF0;
  --white: #FFFFFF;
  /* Leeslaag over beeld: --ink-deep verder verdiept (#141C24). Als losse
     kanalen genoteerd, zodat één kleur meerdere dekkingen kan voeden. */
  --scrim-rgb: 20, 28, 36;
  /* --ink als losse kanalen, zelfde reden als --scrim-rgb hierboven: de
     overlays op de casekaarten zijn een gevuld vlak van --ink met een
     dekking. Dat mag niet met --scrim-rgb — die is alleen voor verlopen. */
  --ink-rgb: 47, 64, 80;
  --radius-s: 12px;
  --radius: 20px;
  --radius-hero: 60px;
  --container: 1508px;    /* content 1420px + 2×44px randmarge, zoals live */
  --indent: 350px;        /* inspringing content t.o.v. zijlabel */
  --transition: 200ms ease;
  --ease-smooth: cubic-bezier(.22, .61, .36, 1);
  --acc-duration: 520ms;
  /* Hoogte van de vaste header: logo 76px + 2×20px padding. main.js overschrijft
     dit met de gemeten waarde; de waardes hier (en per breekpunt verderop) zijn
     de fallback voor het moment vóór de JS draait en voor pagina's zonder JS. */
  --header-h: 116px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* JS neemt het scrollen over (zie main.js): CSS-smooth zou dat tegenwerken */
html.js-smooth { scroll-behavior: auto; }
/* Ankerlinks niet onder de vaste header laten landen. De offset rekent met de
   echte hoogte van de balk in plaats van een vast getal — 100px was minder dan
   de 116px die de header op desktop hoog is, dus de kop van een sectie viel er
   net achter. `[id]:target` vangt daarbij het landen op een URL mét hash
   (diensten.html#strategie): die doelen zijn <div>'s, geen <section>, en werden
   door de opsomming hiervoor niet geraakt. */
section[id], main[id], footer[id], [id]:target {
  scroll-margin-top: calc(var(--header-h) + 12px);
}
/* Programmatische focus na een ankersprong mag geen kader tonen */
[tabindex="-1"]:focus { outline: none; }
body {
  font-family: 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  /* gemeten was 14px/1.85; op verzoek vergroot omdat het te klein aanvoelde */
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-text);
  background: var(--grey);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3 { color: var(--ink); line-height: 1.15; }
h2 { font-size: clamp(2rem, 3.6vw, 52px); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }

/* Groot koppenschema (gemeten op origineel) */
.h-giant { font-size: clamp(2.6rem, 5.6vw, 80px); font-weight: 500; line-height: 1.1; }
/* Ondergrens 2,75rem i.p.v. 3rem: bij 48px paste "ANTWOORD" net niet meer
   binnen een 320px-scherm. Boven 603px viewport verandert er niets. */
.h-upper { text-transform: uppercase; font-size: clamp(2.75rem, 6.9vw, 100px); font-weight: 700; line-height: 1.05; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 44px; }
.section { padding-block: clamp(64px, 8vw, 110px); }
.section-grey { background: var(--grey); }
.diensten { background: var(--white); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ===== Zijlabel-layout ===== */
.label-layout { display: grid; grid-template-columns: var(--indent) 1fr; gap: 24px; }
.label-layout.indent-l { --indent: 553px; }
.team .label-layout { --indent: 330px; }
.side-label { color: var(--magenta); font-weight: 500; font-size: 16px; padding-top: .6em; }

/* Terug-naar-boven knop (zoals live: witte cirkel rechtsonder) */
.back-to-top {
  position: fixed; right: 50px; bottom: 30px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--near-black);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 16px rgba(3, 4, 28, .3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.label-content { min-width: 0; }
.section-intro { font-size: 18px; max-width: 36em; }

/* ===== Knoppen (gemeten: 15px/600, 21px 33px, radius 100px) ===== */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 20px 33px;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background var(--transition), color var(--transition);
}
/* Hover = kleurwissel, geen schaduw of beweging (zelfde gedrag als .footer-pill) */
.btn-primary { background: var(--magenta); color: var(--white); }
.btn-primary:hover { background: var(--ink); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--magenta); color: var(--white); }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--magenta); outline-offset: 3px;
}

/* ===== Header ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background var(--transition), box-shadow var(--transition);
}
/* Leeslaag achter de witte navigatie zolang de header transparant over de hero
   ligt. Zit op de header en niet in de hero, zodat hij precies zo hoog is als
   de balk zelf en meteen verdwijnt als de header wit wordt. Op de subpagina's
   is de header vanaf de eerste frame al wit; die krijgen hem dus nooit te zien
   (regel via body.header-solid, dus zonder flits vóór het laden van de JS). */
.site-header::before {
  content: "";
  /* 150px = de balk (116px) plus een korte uitloop. Kort houden is bewust: zo
     leest het als een zachte rug ónder de header, niet als een band over het
     beeld. Gemeten: bij dekking .70 ter hoogte van de links haalt witte tekst
     van 16px/700 de 4,5:1 ook op het lichtste frame van de video. */
  position: absolute; top: 0; left: 0; right: 0; height: 150px;
  background: linear-gradient(to bottom,
    rgba(var(--scrim-rgb), .82) 0%,
    rgba(var(--scrim-rgb), .70) 50%,
    rgba(var(--scrim-rgb), 0) 100%);
  pointer-events: none;
  transition: opacity var(--transition);
}
.site-header.is-solid::before,
body.header-solid .site-header::before { opacity: 0; }
/* z-index 1: de leeslaag hierboven is absoluut gepositioneerd en zou anders
   over de logo's en de navigatie heen vallen. */
.header-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-block: 20px; }
.brand img { height: 76px; width: auto; }
.brand .logo-dark { display: none; }
.site-nav ul { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  text-decoration: none; color: var(--white);
  font-weight: 700; font-size: 16px; letter-spacing: .02em; text-transform: uppercase;
  padding: 10px 16px;
  transition: color var(--transition);
}
.site-nav a:hover { color: var(--magenta); }

/* Contact is de hoofdactie en staat daarom als bureaublauwe pil in het menu.
   Geen rand: de vulling doet het werk. Hover is magenta — hetzelfde gedrag als
   .btn-dark elders op de site, dus de knop gedraagt zich zoals elke andere
   bureaublauwe knop. 12px verticale padding houdt hem op 46px hoog — ruim
   boven de 44px die een tikvlak nodig heeft — zonder de header hoger te maken:
   die wordt bepaald door het logo van 76px. 20px zijpadding en 6px marge, niet ruimer: bij 22px
   hield de rij op 1101px (de smalste stand vóór het hamburgerpaneel) nog maar
   12px over tussen logo en menu. */
.site-nav a.nav-cta {
  background: var(--ink); color: var(--white);
  border-radius: 100px;
  padding: 12px 20px; margin-left: 6px;
  transition: background var(--transition), color var(--transition);
}
.site-nav a.nav-cta:hover { background: var(--magenta); color: var(--white); }

.site-header.is-solid { background: rgba(255, 255, 255, .96); box-shadow: 0 2px 20px rgba(47, 64, 80, .08); }
.site-header.is-solid .site-nav a { color: var(--ink); }
.site-header.is-solid .site-nav a:hover { color: var(--magenta); }
/* De twee regels hierboven wegen zwaarder dan `.site-nav a.nav-cta` en zouden
   de knoptekst anders bureaublauw kleuren op een bureaublauwe vulling — en bij
   hover magenta op bureaublauw (2,9:1). Vandaar deze override. `body.header-solid`
   staat erbij naast de JS-klasse `.is-solid`, zodat het op een subpagina ook al
   klopt vóórdat main.js draait. */
.site-header.is-solid .site-nav a.nav-cta,
body.header-solid .site-nav a.nav-cta { background: var(--ink); color: var(--white); }
.site-header.is-solid .site-nav a.nav-cta:hover,
body.header-solid .site-nav a.nav-cta:hover { background: var(--magenta); color: var(--white); }
.site-header.is-solid .logo-light { display: none; }
.site-header.is-solid .logo-dark { display: block; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 10px;
  width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform var(--transition), opacity var(--transition), background var(--transition); }
.site-header.is-solid .nav-toggle span { background: var(--ink); }

/* Achtergrond staat stil zolang het mobiele menu open is. `overflow: hidden` op
   html én body is bewust gekozen boven de `position: fixed`-truc: de
   scrollpositie blijft zo intact, er is geen sprong bij het sluiten en
   ScrollTrigger ziet niets veranderen. Het wiel wordt daarnaast in main.js
   geblokkeerd — `overflow: hidden` houdt programmatisch scrollen namelijk niet
   tegen, en onze eigen smooth scroll is dat. --sbw compenseert de breedte van
   de schuifbalk die hierdoor verdwijnt op een smal desktopvenster; op mobiel
   is die 0px en gebeurt er niets. */
html.nav-open, html.nav-open body { overflow: hidden; }
html.nav-open body, html.nav-open .site-header { padding-right: var(--sbw, 0px); }

/* ===== Hero (gemeten: h 82vh, op verzoek 90vh; hoeken 60px, H1 90px/800/lh .9, kicker 22px) ===== */
.hero {
  position: relative;
  min-height: max(560px, 90svh);
  display: flex; align-items: flex-end;
  border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  overflow: hidden;
}
/* Geldt voor zowel een <img> als de <video> die er nu staat; de donkere
   achtergrond voorkomt een witte flits voordat de poster geladen is. */
.hero-bg {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: var(--near-black);
}
/* Leeslaag onder de kop. Alleen de onderste helft wordt verzwaard: daar staan
   kicker en H1, en daarboven blijft het beeld onaangeraakt. De navigatie heeft
   een eigen laag in de header (zie .site-header::before) — die verdwijnt zodra
   de header wit wordt, dus daar hoort geen band in de hero voor.
   Waardes zijn gemeten, niet geschat: het lichtste beeldpunt in de video onder
   de kop is bijna wit (~252), en pas vanaf dekking .46 haalt witte tekst daar
   3:1. De stops hieronder houden .58 of meer aan over de hele tekstband. */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(var(--scrim-rgb), .80) 0%,
    rgba(var(--scrim-rgb), .72) 22%,
    rgba(var(--scrim-rgb), .58) 42%,
    rgba(var(--scrim-rgb), .22) 58%,
    rgba(var(--scrim-rgb), 0) 74%);
}
.hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(40px, 5.5vw, 72px); }
.hero-kicker { color: var(--white); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); margin-bottom: 6px; }
.hero h1 {
  color: var(--white);
  text-transform: uppercase;
  /* Ondergrens 1,55rem i.p.v. 1,9rem: "MARKETINGBUREAU" was op 30,4px
     34px breder dan een 320px-scherm. Boven 382px viewport ongewijzigd. */
  font-size: clamp(1.55rem, 6.5vw, 90px);
  font-weight: 700;
  line-height: .92;
}

/* ===== Aanpak (kop 60px, licht deel rgba .83) ===== */
/* Gemeten was -.057em; teruggezet naar de vloer van -.04em uit DESIGN.md.
   Op 57px raakten de letters elkaar — dat leest als krap, niet als strak. */
.two-tone { font-size: clamp(1.8rem, 4vw, 57px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; max-width: 18em; }
/* De aanpakkop op de homepage zet elke zin op zijn eigen regel (<br> in de HTML),
   met de eerste twee zinnen donker en de derde lichter. Dat lukt alleen als de
   langste van de twee donkere zinnen op één regel past, en dat vraagt een kleinere
   maat dan de 57px van .two-tone. Uitgerekend, niet geschat: "We vragen door tot we
   je echt begrijpen." is 17,90x de fontmaat, en de kolom is het smalst vlak bóven
   1200px - daar staat het zijlabel nog op 350px terwijl de container al krimpt
   (gemeten: 702px op een venster van 1201px). 702 / 17,90 = 39,2px, oftewel 3,26vw.
   De bovengrens is de kolom van 975px vanaf 1508px: 975 / 17,90 = 54,5 -> 54px.
   Zin 3 is 22,92x en past bij geen enkele maat op één regel; die valt dus altijd
   over twee regels, allebei in de lichte kleur. Dat is de bedoeling. */
.two-tone.two-tone-perzin { font-size: clamp(1.8rem, 3.26vw, 54px); }
.tone-dark { color: var(--ink); }
.tone-light { color: rgba(47, 64, 80, .83); }
.aanpak-sub { max-width: 420px; margin: 52px auto 0 32%; }
.aanpak-sub p { margin-bottom: 24px; }

/* minmax(0, 1fr) en niet het kale 1fr: dat laatste is minmax(auto, 1fr) en laat
   een kolom dus groeien met zijn inhoud. De kop staat op 7vw (zie .stap-top h3
   hieronder) en die eenheid kijkt naar het vénster, terwijl de kaart maar een
   derde is van de rechterkolom van .label-layout. Bij 1025px werden de drie
   kolommen daardoor 265/249/297px in een baan van 693px en schoof de hele
   homepage 83px horizontaal weg. Zie ook het omklappunt hieronder. */
.stap-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 104px; }
/* Uitgemeten, niet gekozen: op 1280px is de kaart 256px en past "Campagne" op
   44px mét het nummer ernaast binnen de kaart; op 1260px steekt het nummer er
   nog 4px buiten. Daaronder gaan de kaarten dus onder elkaar. Dit omklappunt
   stond tot 3 september 2026 op 1024px, samen met de rest van de layout — maar
   tussen 1025 en 1280px is de rechterkolom te smal voor drie kaarten naast
   elkaar, en tot 1110px liep de pagina daar horizontaal over. */
@media (max-width: 1280px) { .stap-cards { grid-template-columns: 1fr; } }
.stap-card {
  background: var(--ink); color: var(--white);
  border-radius: 16px; padding: 25px 30px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stap-card:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(47, 64, 80, .18); }
.stap-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 47px; }
/* 44px vast maakte "Strategie" op 320px 1px breder dan de kaart, waardoor de
   hele homepage horizontaal ging schuiven. Vanaf 629px viewport nog steeds 44px.
   Het nummer volgt dezelfde maat als regelhoogte, zodat het gelijk blijft staan. */
.stap-top h3 { font-size: clamp(30px, 7vw, 44px); line-height: 1; font-weight: 700; color: var(--white); }
.stap-nr { font-size: 14px; font-weight: 500; line-height: clamp(30px, 7vw, 44px); }
.stap-card p { color: var(--white); font-size: 19px; font-weight: 500; line-height: 1.5; margin-bottom: 0; }

/* ===== Ons werk ===== */
/* Aanpak en Ons werk hebben dezelfde grijze achtergrond; hun sectiepadding
   stapelt op tot een grote lege band. Daarom hier de overgang inkorten. */
.aanpak { padding-bottom: clamp(40px, 4vw, 56px); }
.werk { padding-top: clamp(40px, 4vw, 56px); }

/* Kop met een ondertitel eronder, 20px ertussen. Draagt zowel de kop van Ons werk
   als die van Diensten, zodat die twee gegarandeerd hetzelfde ritme houden. */
.sectie-kop { display: grid; gap: 20px; }
/* Op Ons werk staat de knop weer náást de ondertitel, zoals vóór 31 augustus 2026
   (`.werk-head`). Alleen hier: Diensten heeft geen derde grid-item en blijft dus
   gewoon gestapeld. */
.werk .sectie-kop { grid-template-columns: 1fr auto; gap: 20px 48px; align-items: start; }
.werk .sectie-kop h2 { grid-column: 1 / -1; }
.werk .sectie-kop .btn { justify-self: start; align-self: center; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: clamp(48px, 5vw, 72px); }
.case-card { display: block; text-decoration: none; }
.case-img { border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 1 / 0.92; }
.case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.case-card:hover .case-img img { transform: scale(1.04); }
.case-card h3 { margin-top: 24px; font-size: 26px; transition: color var(--transition); }
.case-card:hover h3 { color: var(--magenta); }

/* Korte introregel tussen titel en tags (gemeten op referentiesite: 16px/400,
   regelhoogte 24px, 8px onder de titel, 12px erboven de tags). Exact twee regels:
   line-clamp kapt langere teksten af, min-height houdt de ruimte vast als een
   tekst er maar één vult — anders komen de tags van naast elkaar staande kaarten
   ongelijk te staan. De acht teksten zelf zijn op twee regels geschreven; zie de
   bandbreedte in CLAUDE.md voordat je er een herschrijft. */
.case-card .case-desc {
  margin-top: 8px;
  font-size: 16px; font-weight: 400; line-height: 24px;
  min-height: 48px;  /* 2 × 24px regelhoogte */
  color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.case-card .case-desc + .tags { margin-top: 12px; }

/* Tags (gemeten: 12px/600, 2px 19px, radius 32, rand 8% zwart) */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tags li {
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  border: 1px solid rgba(30, 30, 30, .12); border-radius: 32px;
  padding: 4px 19px;
  color: var(--near-black);
  line-height: 1.7;
}

/* ===== Diensten (rijtitels 36px/500, video 30px hoeken) ===== */
/* De rechterrand van de milkshake eindigt precies op de lijn waar "Onze diensten"
   begint. Die lijn ligt in .label-layout.indent-l op --indent (553px) plus de 24px
   gap ertussen, geteld vanaf de contentrand van .container. De eerste kolom telt
   die twee dus bij elkaar op en de video staat er rechts in uitgelijnd.
   Verandert --indent, pas dan ook deze twee waardes aan. */
.diensten-grid {
  display: grid; grid-template-columns: calc(553px + 24px) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start; margin-top: clamp(40px, 4.5vw, 64px);
}
.milkshake-tile { max-width: 480px; }
/* Alleen hier rechts uitgelijnd: dezelfde tegel staat ook als artikelfiguur op
   blog-strategie-belangrijk.html, en die hoort gewoon links te blijven staan. */
.diensten-grid .milkshake-tile { justify-self: end; width: 100%; }
/* De video heeft zelf een lichtgrijze achtergrond (gemeten: #EBEBEB) en MP4 kent
   geen transparantie. Het vlak eronder heeft daarom exact diezelfde kleur, zodat
   de afgeronde hoeken schoon aflopen en de poster naadloos overgaat in de video. */
.milkshake-tile video { width: 100%; border-radius: 30px; background: #EBEBEB; }

.dienst-list details { border-bottom: 1px solid rgba(30, 30, 30, .12); }
.dienst-list summary {
  display: flex; align-items: center; gap: 28px;
  padding: 30px 4px; cursor: pointer; list-style: none;
}
.dienst-list summary::-webkit-details-marker { display: none; }
.dienst-list summary h3 {
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; color: var(--near-black); flex: 1;
  transition: color var(--acc-duration) var(--ease-smooth), transform var(--acc-duration) var(--ease-smooth);
}
.dienst-list summary:hover h3,
.dienst-list details.is-open summary h3 { color: var(--magenta); }
.dienst-list summary:hover h3 { transform: translateX(4px); }

.acc-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--near-black);
  transition: transform var(--acc-duration) var(--ease-smooth),
              opacity var(--acc-duration) var(--ease-smooth),
              background var(--acc-duration) var(--ease-smooth);
}
.acc-icon::before { width: 18px; height: 1.5px; }
.acc-icon::after { width: 1.5px; height: 18px; }
details.is-open .acc-icon::before { transform: rotate(180deg); background: var(--magenta); }
details.is-open .acc-icon::after { transform: rotate(90deg); opacity: 0; background: var(--magenta); }

/* Paneel: hoogte wordt door JS geanimeerd, vandaar de overflow-clip */
.dienst-panel { overflow: hidden; will-change: height; }
/* Links uitgelijnd met de titel: sinds de iconen weg zijn begint die op 4px */
.dienst-body { padding: 0 4px 32px; }
.dienst-body p { max-width: 34em; margin-bottom: 16px; }
/* Inhoud schuift met een kleine vertraging mee omhoog/omlaag */
.dienst-body > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms var(--ease-smooth), transform 460ms var(--ease-smooth);
}
details.is-open .dienst-body > * { opacity: 1; transform: none; }
details.is-open .dienst-body > *:nth-child(1) { transition-delay: 90ms; }
details.is-open .dienst-body > *:nth-child(2) { transition-delay: 160ms; }
details.is-open .dienst-body > *:nth-child(3) { transition-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .dienst-body > *,
  details.is-open .dienst-body > * { opacity: 1; transform: none; transition: none; }
  .dienst-list summary:hover h3 { transform: none; }
}

/* ===== Klantlogo's: doorlopende marquee =====
   Elk logo krijgt een even groot vak; het beeld schaalt daarbinnen mee (object-fit),
   zodat brede en hoge logo's dezelfde ruimte innemen. */
/* De logobalk en de quotes eronder zijn allebei grijs, dus hun paddings stapelden op
   tot 198px leegte (leerpunt 3). De onderkant van deze band en de bovenkant van de
   quotes zijn samen teruggebracht tot de gebruikelijke sectie-afstand (110px desktop,
   64px mobiel). De bovenkant blijft 88px: daar zit wél een kleurwissel met Diensten. */
.clients { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(28px, 3vw, 46px); }
.clients-marquee { overflow: hidden; }
.clients-track {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
}
.clients-track li {
  flex: 0 0 auto;
  /* De logo's zijn aangeleverd op een gelijk canvas van 80px hoog: dat canvas draagt hun
     onderlinge weging (Malmberg staat er klein in, Gemeente Leusden vult het). Die weging
     klopt alleen zolang elk logo op de HOOGTE wordt begrensd en nooit op de breedte -
     vandaar een box die altijd 250/80 = 3,125x zo breed is als hoog, de verhouding van het
     breedste logo (Giant, 250x80). Alleen dan staan alle zes op dezelfde schaal.
     84px gemeten als de hoogte waarop het kleinste woordmerk (Malmberg, inkt 25 van de
     80px) weer even zwaar staat als in de oude logostrook; 96px ging domineren. */
  --logo-hoogte: clamp(60px, 6vw, 84px);
  --logo-box: calc(var(--logo-hoogte) * 3.125);
  --logo-lucht: clamp(14px, 1.6vw, 24px);
  width: calc(var(--logo-box) + 2 * var(--logo-lucht));
  height: var(--logo-hoogte);
  padding-inline: var(--logo-lucht);
  display: flex; align-items: center; justify-content: center;
}
.clients-track img { width: 100%; height: 100%; object-fit: contain; }

/* Pas zodra main.js de rij heeft aangevuld, gaat de scroll lopen */
.clients-track.is-running {
  flex-wrap: nowrap; justify-content: flex-start; width: max-content;
  animation: clients-scroll var(--marquee-duration, 40s) linear infinite;
}
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track.is-running { animation: none; }
}

/* ===== Quotes (36px/400, lh 1.2, pijlen 44px) ===== */
.quotes { padding-top: clamp(36px, 4vw, 64px); padding-bottom: clamp(56px, 7vw, 110px); }
/* De gap alleen tussen de kolommen: de balk staat in een tweede rij en kreeg
   anders de rij-gap (tot 48px) plus zijn eigen margin-top — samen ruim 120px
   tussen de naam en de balk. Nu draagt alleen de margin-top die afstand. */
.quote-slider { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 clamp(16px, 3vw, 48px); }
.quote-viewport { position: relative; min-height: 240px; }
.quote-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 400ms ease;
}
.quote-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.quote-slide blockquote p {
  font-size: clamp(1.25rem, 2.5vw, 36px); font-weight: 400; line-height: 1.25;
  color: var(--ink);
  max-width: 27em; margin-inline: auto;
}
.quote-slide figcaption { margin-top: 32px; }
.quote-slide figcaption strong { display: block; color: var(--ink); font-weight: 700; font-size: 15px; }
.quote-slide figcaption span { opacity: .65; font-size: 13px; }
.quote-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(46, 45, 45, .3); background: transparent; color: var(--body-text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.quote-arrow svg { width: 18px; height: 18px; }
.quote-arrow:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.quote-progress {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: clamp(24px, 2.5vw, 36px);
  font-size: 13px; font-weight: 500;
}
.q-bar { width: 220px; height: 2px; background: rgba(46, 45, 45, .2); overflow: hidden; }
/* De vulling is even breed als de hele balk en wordt met transform teruggebracht
   tot één vak (scaleX) en naar het juiste vak geschoven (translateX). Eerder ging
   dat via width — een layout-eigenschap, dus elke quotewissel dwong de browser tot
   een nieuwe layoutberekening. Transform draait op de compositor: geen reflow.
   De twee waardes komen uit main.js; de standaarden hieronder zorgen dat de balk
   ook vóór het eerste script-frame al klopt. */
.q-bar-fill {
  --q-index: 0;   /* welke quote actief is, 0-based */
  --q-count: 3;   /* main.js zet het echte aantal quotes */
  display: block; width: 100%; height: 100%;
  background: var(--magenta);
  transform-origin: left center;
  transform: translateX(calc(var(--q-index) * 100% / var(--q-count))) scaleX(calc(1 / var(--q-count)));
  transition: transform 300ms var(--ease-smooth);
}

/* ===== Let's Talk (kaart 20px hoeken, 55/60 padding; inputs 50px hoog) ===== */
.contact {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255, 255, 255, .05) 0%, transparent 60%),
    radial-gradient(120% 90% at 20% 90%, rgba(0, 0, 0, .22) 0%, transparent 60%),
    var(--ink);
  color: var(--white);
  padding-block: clamp(72px, 9vw, 130px);
}
.contact-grid { display: grid; grid-template-columns: 540px 1fr; gap: clamp(40px, 8.6vw, 126px); align-items: center; }
.contact-card {
  background: var(--white); color: var(--ink);
  border-radius: var(--radius); padding: clamp(32px, 4vw, 55px) clamp(32px, 4.4vw, 60px);
}
.card-label { font-size: 13px; opacity: .55; margin-bottom: 2px; }
.card-title { font-size: 30px; font-weight: 500; color: var(--near-black); margin-bottom: 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 14px; color: var(--near-black); }
.field input, .field textarea {
  width: 100%; font: inherit; color: inherit; font-size: 14px;
  border: 1px solid transparent; border-radius: 50px;
  padding: 12px 26px; background: #F8F8F9;
  transition: border-color var(--transition), background var(--transition);
}
.field input { height: 50px; }
.field textarea { border-radius: 20px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--magenta); background: var(--white); }
/* Dekking .75 en niet lager: in de melding staat een mailadres om op te klikken,
   en een link moet 4,5:1 halen. Doorgerekend: .55 gaf 2,87:1 op het grijs en
   3,01:1 op de witte contactkaart; .75 haalt overal minimaal 4,70:1. */
.form-note { font-size: 12px; opacity: .75; margin-top: 12px; text-align: center; }

.contact-copy h2 { color: var(--white); margin-bottom: 24px; }
.contact-sub { font-size: clamp(1.1rem, 1.8vw, 24px); font-weight: 500; line-height: 1.5; max-width: 24em; color: var(--white); }
.contact-sub .dim { color: rgba(255, 255, 255, .5); }
.contact-copy hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .25); margin-block: 36px; }
.contact-usps { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.contact-usps h3 { font-size: 20px; font-weight: 500; color: var(--white); margin-bottom: 10px; }
.contact-usps p { color: rgba(255, 255, 255, .75); font-size: 14px; }
.contact address { font-style: normal; margin-top: 40px; line-height: 2; color: rgba(255, 255, 255, .85); font-size: 14px; }
.contact address a { color: var(--white); text-decoration: none; }
.contact address a:hover { color: var(--magenta); }

/* ===== Team (kop 100px) ===== */
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.team-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px;
  margin-top: clamp(48px, 5vw, 72px);
}
.team-card img {
  /* Zelfde beeldverhouding als live: teamfoto's zijn daar 362x420px (1 : 1,16) */
  aspect-ratio: 362 / 420; object-fit: cover; width: 100%;
  border-radius: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover img { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(47, 64, 80, .18); }
.team-card h3 { font-size: 16px; margin-top: 14px; }
.team-card p { opacity: .65; font-size: 13px; line-height: 1.5; }
/* Zie de 768px-query: deze kaart bestaat alleen in het tweekoloms-raster. */
.team-card.alleen-mobiel { display: none; }

/* Teamlid van wie de foto nog moet komen: zelfde vlak als de andere kaarten,
   zodat het raster klopt en meteen zichtbaar is wat er mist. Zie .foto-placeholder. */
.team-foto-wacht {
  aspect-ratio: 362 / 420;
  border: 1px dashed rgba(46, 45, 45, .35);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  font-size: 13px; line-height: 1.4; opacity: .55;
}

/* ===== Footer (140px padding, opzet gelijk aan live: pill-links + socials) ===== */
.site-footer {
  background: var(--ink); color: var(--white);
  padding-block: clamp(72px, 9vw, 140px);
}
.footer-grid { display: grid; grid-template-columns: 2.4fr 2.3fr 1.6fr 1.3fr; gap: 40px; }
.footer-brand img { width: 360px; height: auto; }
.site-footer h3 { font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 24px; }
.site-footer a { color: var(--white); text-decoration: none; transition: color var(--transition), background var(--transition); }

/* Pill-links: zelfde vorm als .btn (radius 100px), maar compacter */
.footer-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-pill {
  display: inline-block;
  background: rgba(255, 255, 255, .12);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap;
}
a.footer-pill:hover { background: var(--magenta); color: var(--white); }

.footer-contact { font-size: 16px; line-height: 1.45; }
.footer-contact li + li { margin-top: 11px; }
.footer-contact a:hover { color: var(--magenta); }

.footer-social { display: flex; gap: 10px; margin-top: 28px; }
.footer-social-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: grid; place-items: center;
}
.footer-social-btn:hover { background: var(--magenta); }

/* ===== Scroll reveal ===== */
/* Hero → aanpak: de hero kantelt weg, de aanpak-sectie komt eronder vandaan.
   De animatie zelf staat in main.js (GSAP ScrollTrigger); hier alleen de
   stapelvolgorde, zodat de hero over de opkomende aanpak-sectie heen ligt.
   De vaste header (z-index 50) blijft daar ruim bovenop. */
.hero-skew-anim { z-index: 3; }
.aanpak-skew-anim { position: relative; z-index: 1; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Het doel van een hash komt niet omhoog gedreven binnen. De browser rekent de
   scrollpositie namelijk uit over de verschoven doos (24px lager), en zodra de
   onthulling daarna wegvalt schuift het blok precies die 24px omhoog — tot
   ónder de vaste header. Als doel staat hij dus meteen op zijn plek. */
.reveal:target { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: 0s !important; }
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .label-layout, .label-layout.indent-l { --indent: 220px; }
  /* De zijlabelkolom is hier 220px in plaats van 553px, dus de eerste kolom van
     de diensten-grid krimpt mee - anders zou de video de tekstlijn voorbijschieten. */
  .diensten-grid { grid-template-columns: calc(220px + 24px) minmax(0, 1fr); }
  .team .label-content { margin-left: 0; }
}
@media (max-width: 1024px) {
  .label-layout, .label-layout.indent-l { grid-template-columns: 1fr; gap: 8px; --indent: 0px; }
  .side-label { padding-top: 0; }
  .diensten-grid { grid-template-columns: 1fr; }
  .diensten-grid .milkshake-tile { justify-self: start; }
  /* .stap-cards stond hier ook; die klapt sinds 3 september 2026 al op 1280px
     om en heeft zijn eigen media query bij het component staan. */
  .aanpak-sub { margin-left: 0; }
  /* Eén kolom: de tekst hoort boven het formulier, niet eronder.
     De HTML-volgorde blijft form-eerst voor de desktopindeling. */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .contact-copy { order: 1; }
  .contact-grid .contact-card { order: 2; }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
}
/* Met zeven menu-items (Aanpak erbij) past de rij pas vanaf ~1100px op één
   regel; daaronder braken items als "OVER ONS" intern over twee regels.
   Daarom slaat de navigatie hier al om naar het paneel, terwijl de rest van
   de layout gewoon de 768px-grens houdt. */
@media (max-width: 1100px) {
  .site-nav {
    position: fixed; inset: 0; top: 0; background: var(--ink);
    padding: calc(var(--header-h) + 24px) 28px 32px;
    /* Zes links passen ruim, maar in liggend beeld op een kleine telefoon
       niet: dan scrollt het paneel zelf. `overscroll-behavior: contain`
       voorkomt dat die scroll doorslaat naar de pagina erachter. */
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    /* Dicht is écht dicht. Alleen wegschuiven met transform liet de links
       gewoon in de tabvolgorde staan: met Tab liep je buiten beeld door een
       onzichtbaar menu. `visibility: hidden` haalt ze uit zowel de tabvolgorde
       als de voorleesvolgorde. De 250ms vertraging laat hem pas verdwijnen
       nádat hij is uitgeschoven. */
    visibility: hidden;
    transition: transform 250ms ease, visibility 0s linear 250ms;
  }
  .site-nav.is-open {
    transform: none; visibility: visible;
    transition: transform 250ms ease;
  }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .site-nav a { display: block; font-size: 1.2rem; padding: 14px 8px; color: var(--white) !important; }
  /* Het paneel is zélf bureaublauw, dus daar keert de knop om: wit vlak met
     bureaublauwe tekst. `!important` is nodig om de regel hierboven te
     verslaan, die alle panelinks hard op wit zet. De twee solid-varianten
     staan er expliciet bij: die wegen zwaarder dan één losse .site-header en
     zetten de vulling anders terug op bureaublauw — gemeten gaf dat een
     bureaublauwe knop op een bureaublauw paneel (contrast 1,0:1). */
  .site-header .site-nav a.nav-cta,
  .site-header.is-solid .site-nav a.nav-cta,
  body.header-solid .site-nav a.nav-cta {
    background: var(--white); color: var(--ink) !important;
    margin: 16px 0 0; padding: 14px 24px; text-align: center;
  }
  /* Hover is ook hier magenta, met witte tekst: 19,2px/700 telt als grote
     tekst, dus de 3,65:1 van wit-op-magenta volstaat. */
  .site-header .site-nav a.nav-cta:hover,
  .site-header.is-solid .site-nav a.nav-cta:hover,
  body.header-solid .site-nav a.nav-cta:hover { background: var(--magenta); color: var(--white) !important; }
  .nav-toggle { display: flex; position: relative; z-index: 60; }
  /* `.site-header` erbij: anders wint `.site-header.is-solid .nav-toggle span`
     (0,3,1) van deze regel en staat er een donker kruis op het donkere paneel. */
  .site-header .nav-toggle[aria-expanded="true"] span { background: var(--white); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}
@media (max-width: 768px) {
  :root { --header-h: 106px; }  /* logo 66px + 2×20px padding */
  .container { padding-inline: 24px; }
  .case-grid { grid-template-columns: 1fr; gap: 40px; }
  .werk .sectie-kop { grid-template-columns: 1fr; }
  .contact-usps { grid-template-columns: 1fr; }
  /* Twee kolommen: met vijf kaarten blijft er één alleen op de laatste rij
     over. De zesde kaart komt er hier bij zodat het raster uitkomt; op
     desktop blijft de rij precies vijf breed. */
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card.alleen-mobiel { display: block; }
  /* Quotes: naast de tekst is op mobiel geen ruimte voor de pijlen, maar
     weghalen maakte quote 2 en 3 onbereikbaar (geen swipe, geen autoplay).
     Daarom verhuizen ze naar een eigen regel onder de quote, links en rechts
     van de teller. Ze houden hun 44px, dus ze blijven goed aan te tikken. */
  .quote-slider {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "viewport viewport viewport"
      "prev     balk     next";
  }
  .quote-viewport   { grid-area: viewport; }
  .quote-arrow.prev { grid-area: prev; }
  .quote-arrow.next { grid-area: next; }
  .quote-progress   { grid-area: balk; margin-top: 24px; gap: 10px; }
  /* De balk was 220px vast; naast twee pijlen past dat niet op 375px */
  .q-bar { width: auto; flex: 1 1 auto; min-width: 48px; }
  .brand img { height: 66px; }
}
/* Zonder animatie schuift het menu niet in maar verschijnt het. Losse query in
   plaats van een geneste, zodat oudere Safari hem ook leest. */
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .site-nav {
    transform: none; opacity: 0;
    transition: opacity 150ms linear, visibility 0s linear 150ms;
  }
  .site-nav.is-open { opacity: 1; transition: opacity 150ms linear; }
}
@media (max-width: 480px) {
  :root { --header-h: 100px; }  /* logo 60px + 2×20px padding */
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-brand img { width: 260px; }
  /* 60px hoog = 133px breed (verhouding 297:134). Op 320px blijft er naast het
     logo en de 44px hamburger nog 95px over, dus het past overal. */
  .brand img { height: 60px; }
}

/* ══════════════════════════════════════════════════════════════════
   SUBPAGINA'S
   Alles hieronder is toegevoegd bij het bouwen van de losse pagina's.
   Zelfstandig blok: eigen componenten én eigen responsive regels, zodat
   het niet botst met de media queries van de homepage hierboven.
   ══════════════════════════════════════════════════════════════════ */

/* Subpagina's hebben een lichte kop, dus de vaste header staat er altijd
   wit op (zie main.js). De inhoud moet dan onder de header beginnen. */
body.header-solid main { padding-top: var(--header-h); }

/* ===== Paginakop ===== */
.page-hero { background: var(--grey); padding-block: clamp(36px, 4.5vw, 68px) clamp(36px, 4.5vw, 60px); }
.page-hero .kicker,
.eyebrow {
  color: var(--magenta); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px;
}
.page-hero h1 { margin-bottom: 0; }
.tone-magenta { color: var(--magenta); }
/* Terzijde onder een paginakop. Eigen regel, klein en niet in kapitalen: het is
   een knipoog bij de kop, geen tweede kop. Magenta ligt al op de kop zelf, dus dit
   blijft bureaublauw. Stond op Over ons als "(of de vakmeesters)" tot 24 augustus
   2026; op verzoek weggehaald. De klasse staat er nog en is herbruikbaar. */
.h-page-aside {
  display: block; text-transform: none;
  font-size: clamp(16px, 2.1vw, 32px); font-weight: 400;
  line-height: 1.2; letter-spacing: -.02em;
  color: var(--ink); opacity: .6;
  margin-top: clamp(10px, 1.2vw, 18px);
}
.page-hero-grid {
  display: grid; grid-template-columns: 1fr minmax(300px, 420px);
  gap: clamp(24px, 4vw, 72px); align-items: end; margin-top: clamp(24px, 3vw, 40px);
}
.page-hero-lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; }
/* Meerdere alinea's in de intro (Aanpak) horen los van elkaar te staan */
.page-hero-lead p + p { margin-top: 14px; }
.page-hero-lead .btn { margin-top: 26px; }
/* Kop zonder rechterkolom: dan mag de intro breder onder de titel staan */
.page-hero-lead.wide { max-width: 46em; }

/* Volle-breedte beeldband onder de paginakop */
.media-band { height: clamp(200px, 26vw, 400px); overflow: hidden; }
.media-band img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Over ons: het verhaal ===== */
.story-grid {
  display: grid; grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 5vw, 64px);
}
.story-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-s); }
.story-lead {
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; color: var(--ink);
  line-height: 1.5; margin-bottom: 22px;
}
.story-body p { margin-bottom: 18px; max-width: 40em; }
.story-body .btn { margin-top: 12px; }
/* De intro moet even breed uitlijnen als de alinea's eronder. Die staan op
   32em bij clamp(16px, 1.15vw, 18px), dus omgerekend clamp(512px, 36.8vw, 576px).
   Een em-waarde op de intro zelf kan niet: die is groter gezet en schaalt met
   een andere clamp mee, waardoor de twee breedtes uit elkaar lopen. Daarom
   staat de begrenzing op de kolom en geldt hij voor allebei. */
.story-body { max-width: clamp(512px, 36.8vw, 576px); }

/* ===== Over ons: werkwijze en expertise =====
   Wit tussen twee grijze secties, net als "Onze diensten" op de homepage.
   De twee tekstblokken erin delen .case-stap met de cases (h2 + lopende tekst
   op 19px), dus hier is alleen de achtergrond nodig. */
.over-werkwijze { background: var(--white); }
/* De doorloopknop onder elk blok: dezelfde afstand als in de paginakop
   (.page-hero-lead .btn, 26px), zodat hij losstaat van de laatste alinea. */
.over-werkwijze .label-content .btn { margin-top: 26px; }

/* ===== Volledig team ===== */
.team-full { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; margin-top: clamp(40px, 5vw, 64px); }

/* ===== Donkere CTA-band (Ons werk, Blogs, cases) ===== */
.cta-band { background: var(--ink); color: var(--white); padding-block: clamp(64px, 8vw, 110px); }
.cta-band h2 { color: var(--white); }
.cta-band .cta-lead { color: rgba(255, 255, 255, .75); margin-top: 18px; max-width: 34em; }
.cta-band a { color: var(--white); }
.cta-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); max-width: 900px; }
.cta-form .cta-row { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; }
.cta-form input, .cta-form textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--white);
  background: transparent; border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 100px; padding: 15px 26px;
  transition: border-color var(--transition), background var(--transition);
}
.cta-form textarea { border-radius: 24px; resize: vertical; }
.cta-form ::placeholder { color: rgba(255, 255, 255, .55); }
.cta-form input:focus, .cta-form textarea:focus { outline: none; border-color: var(--magenta); background: rgba(255, 255, 255, .06); }
.cta-submit {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--magenta); color: var(--white); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transition), transform var(--transition);
}
.cta-submit:hover { background: var(--magenta-dark); transform: translateY(-2px); }
.cta-submit svg { width: 18px; height: 18px; }

/* ===== Filterbalk (Ons werk) ===== */
.filters { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 38px); margin-top: clamp(28px, 3.5vw, 44px); }
.filter-btn {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: clamp(15px, 1.5vw, 20px); font-weight: 500;
  color: rgba(47, 64, 80, .45); transition: color var(--transition);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn[aria-pressed="true"] { color: var(--ink); font-weight: 700; }

/* De filterbalk sluit de paginakop af en hoort bij de kaarten eronder.
   Hier stapelden drie marges op: hero padding-bottom (60) + sectie
   padding-top (48) + raster margin-top (48) = ~156px lege band. Alleen de
   eerste blijft over, zodat filter en kaarten één blok vormen.
   Gescoped op :has(.filters) — alleen Ons werk heeft een filterbalk. */
.page-hero:has(.filters) { padding-bottom: clamp(28px, 3.2vw, 44px); }
.page-hero:has(.filters) + .section { padding-top: 0; }
.page-hero:has(.filters) + .section .work-grid { margin-top: 0; }

/* ===== Projectenraster (Ons werk) =====
   De kaart is één beeld met alles erin: klantnaam linksboven, het kenmerk
   van de case rechtsonder, en bij hover schuift daar het verhaal over.
   Twee overlays die kruislings faden — zie het blok "CASEKAARTEN: OVERLAY"
   onderaan dit bestand voor de opbouw en de timing. */
/* Recht raster: de twee kaarten van een rij staan op dezelfde hoogte. De
   referentie laat de rechterkolom verspringen, maar dat is hier bewust niet
   overgenomen. */
.work-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 28px; row-gap: 28px;
  margin-top: clamp(32px, 4vw, 48px);
}
.work-card {
  position: relative; display: block; text-decoration: none;
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--ink);  /* achtergrond zolang het beeld nog laadt */
}
.work-img { position: absolute; inset: 0; }
/* Trage zoom: op 2,5s voel je hem eerder dan dat je hem ziet. */
.work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 2500ms ease-out; }
/* Uitsnede links verankerd (Giant): op de 4:3-kaart snijdt cover niets weg, maar
   onder 640px wordt de kaart vierkant en valt het voorwiel buiten de gecentreerde
   uitsnede. Links verankerd staat de hele fiets erin en gaan de lichtstrepen eraf. */
.work-img.is-links img { object-position: 0 50%; }
.work-card:hover .work-img img,
.work-card:focus-visible .work-img img { transform: scale(1.04); }
.work-leeg { margin-top: 40px; font-size: 16px; opacity: .6; }

/* ===== Diensten-pagina ===== */
.dienst-layout { display: grid; grid-template-columns: 280px 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.dienst-index { position: sticky; top: 130px; }
.dienst-index ol { margin-top: 4px; }
.dienst-index li + li { margin-top: 10px; }
.dienst-index a {
  text-decoration: none; font-weight: 700; text-transform: uppercase;
  font-size: 15px; letter-spacing: .02em; color: var(--ink);
  transition: color var(--transition);
}
.dienst-index a:hover { color: var(--magenta); }

.dienst-blok { display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.dienst-blok + .dienst-blok { margin-top: clamp(64px, 8vw, 120px); }
.dienst-nr { font-size: clamp(80px, 12vw, 190px); font-weight: 700; color: var(--magenta); line-height: .82; }
.dienst-blok .eyebrow { color: rgba(47, 64, 80, .6); }
.dienst-tekst { font-size: clamp(17px, 1.8vw, 26px); line-height: 1.45; color: var(--ink); max-width: 22em; }
.dienst-tekst p + p { margin-top: 18px; }
/* De losse onderdelen per dienst staan als .tags-pillen (zelfde component als op
   de cases); hier alleen meer lucht boven omdat ze op een grote alinea volgen. */
.dienst-blok .tags { margin-top: clamp(32px, 4vw, 56px); gap: 10px; }
/* Twee beelden uit ons werk onder elk dienstblok */
.dienst-beeld { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: clamp(28px, 3.5vw, 44px); }
.dienst-beeld img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.dienst-beeld-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .45; margin-bottom: 12px; }

/* ===== Veelgestelde vragen ===== */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-list details { border-bottom: 1px solid rgba(30, 30, 30, .12); }
.faq-list summary { display: flex; align-items: center; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 {
  flex: 1; font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; color: var(--near-black);
  transition: color var(--acc-duration) var(--ease-smooth);
}
.faq-list summary:hover h3, .faq-list details.is-open summary h3 { color: var(--magenta); }
.faq-list .dienst-panel { overflow: hidden; will-change: height; }
.faq-list .dienst-body { padding: 0 4px 24px; }
.faq-list .dienst-body p { max-width: 38em; margin-bottom: 12px; }

/* ===== Werken bij: vacatures ===== */
.vacatures { margin-top: clamp(28px, 3.5vw, 40px); }
.vacatures li {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 20px;
  padding: 24px 0; border-top: 1px solid rgba(30, 30, 30, .12);
}
.vacatures li:last-child { border-bottom: 1px solid rgba(30, 30, 30, .12); }
.vac-nr { color: var(--magenta); font-size: 13px; font-weight: 700; }
.vac-titel { font-size: clamp(19px, 2.2vw, 30px); font-weight: 500; color: var(--near-black); }
.vac-btn { padding: 14px 26px; font-size: 13px; }

/* ===== Blogs: lege staat ===== */
.blog-leeg { text-align: center; max-width: 34em; margin: clamp(48px, 6vw, 80px) auto 0; }
.blog-leeg h2 { margin-bottom: 18px; }
.blog-leeg p { margin-bottom: 28px; }

/* ===== Contact ===== */
.contact-cols { display: grid; grid-template-columns: 1fr minmax(320px, 560px); gap: clamp(32px, 5vw, 90px); align-items: start; }
.info-blok + .info-blok { margin-top: 40px; }
.info-blok h2 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.info-blok a { color: inherit; text-decoration: none; }
.info-blok a:hover { color: var(--magenta); }
.info-blok address { font-style: normal; line-height: 1.8; }
/* Zelfde rondje en iconen als .footer-social, vertaald naar de lichte ondergrond.
   In de footer is het vlak een lichte vlek op donker (wit .12); hier is het wit op
   het grijs van de sectie — even subtiel, en het sluit aan op de witte kaarten die
   overal op dit grijs staan. Het icoon erft de kleur, dus die moet mee: op wit
   --ink, op de magenta hover weer wit (zonder die regel valt --ink op magenta weg). */
.info-links { display: flex; gap: 10px; margin-top: 40px; }
.info-social-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  display: grid; place-items: center;
  transition: background .25s ease, color .25s ease;
}
.info-social-btn:hover { background: var(--magenta); color: var(--white); }

/* De beeldband tussen het formulier en de personen. Eigen uitsnede en niet een van
   de drie gedeelde standen (.beeld-hoger 5% / .beeld-hoog 10% / .beeld-halfhoog 25%):
   die horen bij foto's die op meerdere pagina's staan, deze foto staat alleen hier.
   Uitgerekend, niet geschat. De band toont 39% van de foto onder 1538px en 30% daarboven,
   en de parallax schuift die uitsnede nog eens ±12% van de beeldhoogte op en neer. De
   hoofden zitten op rij 350 tot 540 van 1333 (opgemeten met een raster van 50 rijen).
   Wil je ze op élke scrollpositie compleet in beeld houden, dan mag de stand tussen 16,5%
   en 26,2% liggen bij 2000px en tussen 0,6% en 26,2% daaronder; 21% ligt daar midden in,
   met zo'n 35 rijen speling naar beide kanten. Boven ongeveer 2300px wordt het venster te
   krap voor hoofden én speling en schampt de bovenkant van het haar de rand. */
.contact-band img { object-position: 50% 21%; }

/* Het routefilmpje, onder de contactgegevens in de linkerkolom, op de plek waar
   eerst de foto van het gebouw stond. Zelfde breedte van 620px als die foto: over
   de volle kolom zou het zwaarder wegen dan het formulier ernaast. Het is liggend
   (16:9) en wordt dus niet schermvullend hoog — de fout uit leerpunt 47. De width/height in de HTML zijn presentational hints en
   zouden de video echt 648px hoog maken, vandaar height: auto (leerpunt 11). De
   donkere vulling voorkomt een witte flits tussen poster en eerste frame. */
/* De kop boven het filmpje is een gewoon .info-blok, zodat hij dezelfde vorm heeft
   als Contactinformatie en Adres erboven. Twee margeregels horen erbij: hij volgt op
   de sociale knoppen (een <ul>, dus .info-blok + .info-blok pakt hem niet), en het
   filmpje staat er 16px onder — dezelfde afstand die .info-blok h2 tot zijn eigen
   inhoud houdt, zodat label en beeld hier net zo bij elkaar horen als bij Adres. */
.info-links + .info-blok { margin-top: clamp(36px, 4vw, 56px); }
.klooster-film { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 620px; }
.info-blok + .klooster-film { margin-top: 16px; }
.route-film {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block;
  border-radius: var(--radius-s); background: var(--ink);
}
/* Foto van het Eemklooster, onder de gegevens in de linkerkolom.
   Breedte begrensd op 620px: de kolom is op groot scherm ~800px breed en
   een foto over de volle kolom zou zwaarder wegen dan het formulier ernaast. */
.klooster-foto { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 620px; }
.klooster-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-s); display: block; }
/* Dekking .75 en niet .65: in het bijschrift onder het routefilmpje staat een link
   (de plattegrond) en die is de enige route ernaartoe. Gemeten op het grijs van de
   sectie: .65 haalt 4,24:1 en zakt daarmee onder de 4,5 die voor tekst van deze maat
   nodig is, .75 haalt 5,65:1.
   Zelfde afweging als bij .form-note. */
.klooster-film figcaption,
.klooster-foto figcaption { margin-top: 14px; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; opacity: .75; }
.klooster-film figcaption a:hover,
.klooster-foto figcaption a:hover { color: var(--magenta); }
/* Tijdelijke plaatshouder; verdwijnt zodra de echte foto erin staat. */
.foto-placeholder {
  aspect-ratio: 3 / 2; border-radius: var(--radius-s);
  border: 1px dashed rgba(46, 45, 45, .35);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  font-size: 15px; opacity: .55;
}

.personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; margin-top: clamp(32px, 4vw, 48px); }
.person-card { background: var(--white); border-radius: var(--radius); padding: 20px 20px 28px; text-align: center; }
.person-card img { width: 100%; aspect-ratio: 362 / 420; object-fit: cover; border-radius: var(--radius-s); }
.person-card h3 { margin-top: 20px; font-size: 18px; }
.person-card .rol { font-weight: 700; font-size: 13px; margin-top: 6px; }
.person-card a { display: block; text-decoration: none; font-size: 13px; opacity: .7; margin-top: 6px; }
.person-card a:hover { color: var(--magenta); opacity: 1; }
/* Op de case-pagina's staan de kaarten recht naast elkaar. De verspringing om en
   om die de huidige site heeft is er bewust uit: bij drie kaarten wipt alleen de
   middelste omhoog en dat leest als een fout in plaats van als ritme. Op Contact
   verspringen ze wél — daar staat het op de .person-slot hieronder. */

/* Contact: daar zit elke kaart in een .person-slot, omdat de kaart met de
   scroll meebeweegt (main.js) en de slot de reveal doet. De verspringing mag
   daar dus geen transform zijn — die zou de scrollbeweging overschrijven.
   Zelfde 28px, nu als marge; align-self houdt de slot op inhoudshoogte,
   anders rekt het grid hem uit in plaats van hem op te schuiven. */
.person-slot { align-self: start; }
.personen .person-slot:nth-child(even) { margin-top: -28px; }

/* Meer lucht onder de kop op Contact dan de standaard 48px. Twee redenen:
   de kop is daar een volle h2 (tot 52px) in plaats van een tussenkopje, en
   de even kaart staat 28px hoger (regel hierboven) — die 28px gaat van de
   ruimte af die je ziet. 96px marge leest dus als ~68px witruimte. */
.personen.js-personen-parallax { margin-top: clamp(48px, 6vw, 96px); }

/* ===== Case-detailpagina ===== */
.case-hero-img { border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 16 / 9; margin-top: clamp(24px, 3vw, 40px); }
.case-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.case-intro { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.case-meta dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .5; }
.case-meta dd { font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.case-tekst p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; margin-bottom: 18px; max-width: 40em; }
.case-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.case-tiles img, .case-tiles video {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-s); background: var(--grey);
}
.case-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); }
.case-nav a { text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.case-nav a:hover { color: var(--magenta); }

/* ===== Responsive voor alles hierboven ===== */
@media (max-width: 1200px) {
  .dienst-layout { grid-template-columns: 220px 1fr; }
  .team-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .page-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .story-grid { grid-template-columns: 1fr; }
  /* Gestapeld staat het beeld anders pal onder de beeldband van de paginakop:
     twee foto's uit dezelfde shoot direct na elkaar. Daarom zakt het beeld hier
     onder de tekst. Alleen `order`, geen andere DOM-volgorde — voorlezen en
     tabvolgorde blijven zoals ze op desktop zijn. */
  .story-body { order: 1; }
  .story-img { order: 2; }
  .story-img img { aspect-ratio: 16 / 10; }
  /* Eén kolom: bij twee kolommen wordt de kaart hier zo smal dat de overlay
     met het kenmerk niet meer leesbaar is. */
  .work-grid { grid-template-columns: 1fr; }
  .dienst-layout { grid-template-columns: 1fr; }
  .dienst-index { position: static; }
  .dienst-index ol { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .dienst-index li + li { margin-top: 0; }
  .faq-grid { grid-template-columns: 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
  .case-intro { grid-template-columns: 1fr; }
  .personen .person-slot:nth-child(even) { margin-top: 0; }
}
@media (max-width: 768px) {
  .team-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dienst-blok { grid-template-columns: 1fr; gap: 12px; }
  .cta-form { grid-template-columns: 1fr; }
  .vacatures li { grid-template-columns: 40px 1fr; row-gap: 14px; }
  .vacatures li .vac-btn { grid-column: 2; justify-self: start; }
  .case-tiles { grid-template-columns: 1fr; }
  .media-band { height: clamp(180px, 42vw, 260px); }
}

/* Alleen voor screenreaders (labels bij velden met een placeholder) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Componenten met een eigen display-waarde overschrijven het hidden-attribuut;
   deze regel zorgt dat gefilterde kaarten écht verdwijnen. */
[hidden] { display: none !important; }

/* ── Correcties na de eerste testronde ─────────────────────────────── */

/* De width/height-attributen in de HTML (tegen layout shift) tellen als
   presentational hints. Waar de CSS met aspect-ratio werkt, moet de hoogte
   daarom expliciet los worden gelaten — anders wordt het beeld 2400px hoog. */
.team-card img,
.person-card img,
.story-img img,
.dienst-beeld img,
.case-tiles img { height: auto; }

/* Paginakop en de eerste sectie eronder stapelden hun padding op */
.page-hero + .section,
.page-hero + .media-band + .section { padding-top: clamp(28px, 3.5vw, 48px); }

/* Werken bij: de intro is de blikvanger van de pagina, dus groter.
   Hij staat niet in de paginakop maar in een eigen sectie ónder de beeldband
   (.werken-intro hieronder); de maat wordt verderop gelijkgetrokken. */
.hero-statement { font-size: clamp(19px, 2.5vw, 34px); line-height: 1.35; color: var(--ink); font-weight: 500; }
.hero-statement.tone-magenta { color: var(--magenta); margin-bottom: 10px; }

/* ===== Werken bij: intro onder de beeldband =====
   Zelfde tekstmaat als de intro's in de paginakoppen elders (zie .page-hero-lead p),
   maar los daarvan opgeschreven: dit is geen paginakop meer. */
/* Intro en vacatures liggen allebei op het grijs; hun padding stapelde op tot
   een leeg gat van 220px (leerpunt 3). De onderruimte komt nu volledig van de
   sectie eronder. */
.werken-intro { padding-bottom: 0; }
.werken-intro .intro-tekst {
  max-width: 46em;
  font-size: clamp(16px, 1.4vw, 22px); font-weight: 500;
  line-height: 1.56; letter-spacing: -.02em;
}
.werken-intro .intro-tekst p + p { margin-top: 14px; }
/* 10px (van .hero-statement.tone-magenta) is te krap onder een kop van 50px zodra
   er lopende tekst volgt in plaats van een tweede statement. Specificiteit (0,2,0),
   gelijk aan die regel, maar deze staat later en wint dus. */
.werken-intro .hero-statement { margin-bottom: 24px; }
/* Inline links in de intro: alleen onderstrepen, kleur erven — magenta wijst hier niet. */
.werken-intro .intro-tekst a { text-decoration: underline; text-underline-offset: 3px; }
.werken-intro .intro-tekst a:hover { text-decoration: none; }

/* ── Tweede correctieronde ────────────────────────────────────────── */

/* Actieve pagina in het menu */
.site-nav a[aria-current="page"] { color: var(--magenta); }
.site-header.is-solid .site-nav a[aria-current="page"] { color: var(--magenta); }
/* De contactknop niet: magenta op --ink haalt 2,9:1 en zakt daarmee onder de
   3,0 (zie leerpunt 28). Hij is als enige een pil, dus dat wijst zichzelf al
   aan; op contact.html blijft de tekst gewoon wit. Deze regels staan ná de
   twee hierboven omdat ze even zwaar wegen — volgorde beslist. */
.site-nav a.nav-cta[aria-current="page"],
.site-header.is-solid .site-nav a.nav-cta[aria-current="page"],
body.header-solid .site-nav a.nav-cta[aria-current="page"] { color: var(--white); }

/* Beeld onder een dienstblok mag over de volle breedte, ook onder het cijfer */
.dienst-beeld-wrap { grid-column: 1 / -1; }

/* Verhaal-sectie: tekst verticaal centreren t.o.v. het beeld */
.story-grid { align-items: center; }
.story-body p { font-size: 15px; max-width: 34em; }

/* Personen: kaarten op leesbare breedte houden in plaats van uitrekken */
.personen { grid-template-columns: repeat(auto-fit, minmax(230px, 280px)); justify-content: center; }

/* Lege staat blogs stond te ver van de paginakop */
.blog-leeg { margin-top: clamp(24px, 3vw, 40px); }

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAFIE GELIJKGETROKKEN MET DE HUIDIGE SITE
   Alle waarden hieronder zijn opgemeten op popcornprojecten.nl met een
   viewport van 1600px (computed styles, niet geschat). De clamp() eromheen
   is onze eigen toevoeging zodat het op kleinere schermen meeschaalt:
   de bovengrens is steeds de gemeten waarde.
   ══════════════════════════════════════════════════════════════════ */

/* ── Paginakoppen ──────────────────────────────────────────────────
   Gemeten: 150px / weight 600 (= Heavy) / line-height .80 / ls -1px */
.h-page {
  text-transform: uppercase;
  /* Ondergrens 2,1rem i.p.v. 2,8rem: "MILKSHAKE'JE" op de contactpagina was
     op 44,8px 44px breder dan een 320px-scherm. Boven 357px ongewijzigd. */
  font-size: clamp(2.1rem, 9.4vw, 150px);
  font-weight: 700; line-height: .84; letter-spacing: -.007em;
}
/* Casetitels kunnen lang zijn ("Gemeente Leusden (StayFresh)"), dus kleiner */
/* Ondergrens 1,75rem i.p.v. 2,2rem: "PANNENKOEKENHUIZEN" is één woord van 18
   letters en stak op 35,2px zelfs op een 390px-scherm nog 82px buiten beeld.
   Boven 609px viewport ongewijzigd. */
.h-case { text-transform: uppercase; font-size: clamp(1.75rem, 4.6vw, 72px); font-weight: 700; line-height: .95; letter-spacing: -.01em; }
/* Gemeten: 100px / weight 600 / lh .80 — geldt voor "Leer ons kennen",
   "Antwoord op je vragen" en "Neem contact met ons op" */
.h-upper { line-height: .88; letter-spacing: -.01em; }

/* ── Paginakop-onderdelen ──────────────────────────────────────────
   "NEEM CONTACT MET ONS OP": 16px / 500 / lh 1.63 / ls -.03em, niet uppercase
   op de live site. Wij houden uppercase aan (dat doet de huidige kop ook
   visueel) maar nemen maat, gewicht en spatiëring over. */
.page-hero .kicker, .eyebrow { font-size: 16px; font-weight: 500; letter-spacing: .04em; }
/* Intro naast de kop — gemeten 22px / 500 / lh 1.56 */
.page-hero-lead p { font-size: clamp(16px, 1.4vw, 22px); font-weight: 500; line-height: 1.56; letter-spacing: -.02em; }

/* ── Knoppen: 15px / 600 (= Heavy) / uppercase ─────────────────────── */
.btn { letter-spacing: .01em; }

/* ── Over ons: het verhaal ─────────────────────────────────────────
   Lead 30px/600/lh1.33/ls-.04em · body 18px/400/lh1.56/ls-.02em */
/* .story-lead staat zelf in .story-body, dus de body-regel moet hem uitsluiten */
.story-body p.story-lead { font-size: clamp(21px, 1.9vw, 30px); line-height: 1.33; letter-spacing: -.04em; }
.story-body p:not(.story-lead) { font-size: clamp(16px, 1.15vw, 18px); font-weight: 400; line-height: 1.56; letter-spacing: -.02em; max-width: 32em; }

/* ── Team: naam 20px/600/ls-.03em · functie 14px/400 ───────────────── */
.team-card h3 { font-size: clamp(17px, 1.25vw, 20px); letter-spacing: -.03em; }
.team-card p { font-size: 14px; font-weight: 400; opacity: .75; overflow-wrap: break-word; }

/* ── Diensten ──────────────────────────────────────────────────────
   Index en de kop boven elk blok: 20px / 600 / uppercase / ls .02em
   Tekst: 30px / 400 / lh 1.33 · lijst: 18px / 500 */
.dienst-index a, .dienst-blok .eyebrow {
  font-size: clamp(16px, 1.25vw, 20px); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
}
.dienst-blok .eyebrow { color: var(--ink); margin-bottom: 22px; }
.dienst-tekst { font-size: clamp(19px, 1.9vw, 30px); font-weight: 400; line-height: 1.33; letter-spacing: -.01em; max-width: 20em; }
.dienst-beeld-label { font-weight: 700; letter-spacing: .02em; }

/* Veelgestelde vragen: label 18px/400 magenta (géén uppercase),
   vraag 20px/600/ls-.03em */
.faq-label { font-size: clamp(16px, 1.15vw, 18px); font-weight: 400; color: var(--magenta); letter-spacing: -.04em; margin-bottom: 14px; }
.faq-list summary h3 { font-size: clamp(17px, 1.25vw, 20px); font-weight: 700; letter-spacing: -.03em; }
.faq-list .dienst-body p { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; }

/* ── Ons werk: filter 26px/600 (inactief #BCBCBC) · kaarttitel 20px/600 ── */
.filter-btn { font-size: clamp(17px, 1.65vw, 26px); font-weight: 700; letter-spacing: -.02em; color: #BCBCBC; }
.filter-btn:hover, .filter-btn[aria-pressed="true"] { color: var(--ink); }
/* De kaarttitel is de klantnaam in het witte tegeltje. Hier op .wc-klant
   genoteerd en niet op .work-card h3: die selector is specifieker en zou de
   maat uit het overlay-blok onderaan overrulen (zie leerpunt 21). */
.wc-klant { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.2; letter-spacing: -.03em; }

/* ── Werken bij: intro 50px/600/ls-.04em · vacaturetitel 42px/500/ls-.07em ── */
.hero-statement { font-size: clamp(24px, 3.1vw, 50px); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; }
/* Gemeten was -.07em — veruit de krapste van de site. Op 42px liepen de letters
   in elkaar; -.04em is de vloer en houdt de kop nog steeds strak. */
.vac-titel { font-size: clamp(22px, 2.6vw, 42px); font-weight: 500; letter-spacing: -.04em; }
.vac-nr { font-size: 16px; font-weight: 500; }

/* ── Contact ───────────────────────────────────────────────────────
   Kopjes 18px/600/uppercase · gegevens 18px/400/lh1.44
   "Of, neem persoonlijk…" 44px/500 · naam 26px/700 · veldlabel 16px/500 */
/* Afwijking van de gemeten 18px: de linkerkolom stond op dezelfde maat als het
   formulier ernaast en viel daardoor weg in de witruimte. Het kopje blijft een
   klein label; de gegevens zelf dragen de kolom nu op 28px. */
.info-blok h2 { font-size: clamp(15px, 1.1vw, 17px); letter-spacing: 0; margin-bottom: 16px; }
/* Let op: dit is lopende tekst, geen kop. -.045em was onder de vloer; hier staat
   nu -.03em — op 28px mag het strakker dan op 18px, maar niet krapper dan de vloer. */
.info-blok p, .info-blok address { font-size: clamp(19px, 1.9vw, 28px); font-weight: 400; line-height: 1.35; letter-spacing: -.03em; }
.info-blok + .info-blok { margin-top: clamp(36px, 4vw, 56px); }
.info-links { margin-top: clamp(36px, 4vw, 56px); }
.person-card h3 { font-size: clamp(20px, 1.65vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.person-card .rol { font-size: 15px; font-weight: 500; }
.person-card a { font-size: 15px; }
.field label { font-size: 16px; }

/* ── Footer: kop 18px/600/ls-.02em · pill 14px/500 ──────────────────── */
.site-footer h3 { font-size: 18px; letter-spacing: -.02em; }
.footer-pill { font-weight: 500; letter-spacing: -.02em; }

/* ══════════════════════════════════════════════════════════════════
   ACHTERGROND
   De losse pagina's gebruiken dezelfde achtergrond als de homepage:
   het lichtgrijs --grey (#F0EFF0) uit body, met witte kaarten die daar
   bovenop uitkomen. Er is hier dus bewust géén aparte regel voor
   body.header-solid — die haalde de pagina's uit de pas met de homepage.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   PARALLAX-BEELDBAND
   Het beeld is hoger dan de band en schuift trager mee dan de pagina.
   De beweging zelf staat in main.js (GSAP ScrollTrigger, scrub).
   Zonder JS of bij 'reduced motion' blijft het een gewoon vullend beeld.
   ══════════════════════════════════════════════════════════════════ */
.media-band { position: relative; }
.media-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 140% hoog en 20% omhoog; de beweging is ±12% van de beeldhoogte (= ±16,8%
   van de bandhoogte), dus er blijft aan beide kanten ruim 3% marge over. */
.media-band.js-parallax img { height: 140%; top: -20%; will-change: transform; }
/* Foto's waarin de hoofden hoog zitten: cover pakt het midden en toont op een
   breed scherm maar 30 tot 39% van de foto, dus het midden sneed de gezichten
   eraf. Drie standen, gekozen op de rij van de hoogste kruin (in het 1333-raster
   van de 2000×1333-foto's) en nagemeten over 1100–2000px inclusief de parallax,
   die de uitsnede ±12% van de beeldhoogte verschuift (26 augustus 2026):
   - beeld-hoger   5%  → bovenrand hooguit rij 222: team-tafel (kruin 255), overleg (240)
   - beeld-hoog   10%  → hooguit rij 252: diensten-band (270), team-lachen (285)
   - beeld-halfhoog 25% → hooguit rij 343: aanpak-band (370)
   kantoor.webp (Blogs, drie vacatures) heeft de hoofden in het midden en blijft op 50%. */
.media-band.beeld-hoger img { object-position: 50% 5%; }
.media-band.beeld-hoog img { object-position: 50% 10%; }
.media-band.beeld-halfhoog img { object-position: 50% 25%; }
@media (prefers-reduced-motion: reduce) {
  .media-band.js-parallax img { height: 100%; top: 0; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   SMALLE SCHERMEN: KOPPEN EN AANRAAKVLAKKEN
   Twee correcties, opgemeten met een script over alle 16 HTML-pagina's
   bij 320 / 360 / 390 / 430 / 768 / 1024 / 1440px — niet geschat. De
   ondergrenzen van de clamp()'s staan bij de koppen zelf; hieronder het
   vangnet en de tikvlakken.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Lange woorden mogen nooit buiten de pagina steken ──────────
   Nederlandse samenstellingen zijn het probleem: "PANNENKOEKENHUIZEN"
   is één woord van 18 letters en duwde case-pkh.html op een 320px-scherm
   128px breder dan het scherm — de hele pagina ging horizontaal schuiven.
   De verlaagde clamp-ondergrenzen lossen de koppen op die er nú staan;
   dit is het vangnet voor kopteksten die nog moeten komen.

   overflow-wrap staat altijd aan: het grijpt alleen in als een woord
   écht niet past, dus op ruime schermen verandert er niets. Het
   afbreekstreepje blijft onder 600px, omdat hyphens hierboven de
   opgemeten koptypografie zou veranderen. */
h1, h2, h3,
.h-page, .h-case, .h-giant, .h-upper,
.two-tone, .vac-titel, .card-title, .dienst-tekst, .case-meta dd {
  overflow-wrap: break-word;
}
@media (max-width: 600px) {
  h1, h2, h3,
  .h-page, .h-case, .h-giant, .h-upper,
  .two-tone, .vac-titel, .card-title {
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}

/* ── 2. Aanraakvlakken van minimaal 44px hoog ──────────────────────
   Gemeten op 360px: telefoon en e-mail waren 19–28px hoog, de
   footer-pills 32,8px, de case-navigatie 25,9px. Met een vinger zijn
   dat missers, en juist bellen en mailen is de hoofdactie van de site.

   De regels staan achter (any-pointer: coarse): ze gelden op elk
   apparaat dát een aanraakscherm heeft — telefoon, tablet, touch-laptop —
   en laten de op de live site opgemeten desktopmaten ongemoeid. */
@media (any-pointer: coarse) {

  /* Telefoon en e-mail — contactsectie homepage */
  .contact address a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Telefoon en e-mail — contactpagina */
  .info-blok p a { display: inline-flex; align-items: center; min-height: 44px; }
  .info-blok p + p { margin-top: 4px; }

  /* Telefoon en e-mail — personenkaarten op de contactpagina */
  .person-card a { display: flex; align-items: center; justify-content: center; min-height: 44px; }

  /* Footer — contactregels. De adresregel is sinds 4 september 2026 ook een link
     (naar Google Maps, zoals op de homepage) en staat bewust buiten deze regel:
     inline-flex maakt van de twee regels flexitems en negeert de <br>, waardoor
     straat en postcode op een regel zouden komen. Nodig is het ook niet — twee
     regels van 23,2px zijn samen 46,4px en halen de 44px uit zichzelf. */
  .footer-contact a:not(.footer-adres) { display: inline-flex; align-items: center; min-height: 44px; }

  /* Footer — pill-links. Ook de branche-pills (spans), anders staan er twee
     hoogtes naast elkaar in dezelfde rij. Alleen de verticale padding gaat
     eruit; de 18px links en rechts en de pilvorm blijven. */
  .footer-pill { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }

  /* Case-navigatie onderaan elke casepagina (vorige · alle · volgende) */
  .case-nav a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Diensten-index; onder 1024px is dat een rij links boven de blokken */
  .dienst-index a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Filterbalk op Ons werk — kwam 0,6px tekort */
  .filter-btn { min-height: 44px; }

  /* "Bekijk vacature" op Werken bij — kwam 0,4px tekort (14px padding boven en
     onder plus 15,6px regelhoogte is 43,6). De pilvorm en de breedte blijven
     ongewijzigd; alleen de tekst gaat verticaal in het midden staan. */
  .vac-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

  /* Het mailadres onder elk formulier, en het bellen/mailen in de open
     sollicitatiekaart op Werken bij. Zolang de formulieren niet verzenden is dat
     mailadres de enige werkende uitweg, en bellen of mailen is sowieso de
     hoofdactie van de site; ze stonden op 16 tot 20px hoog. Het vlak groeit mee,
     de regel niet — zelfde vangnet als bij .eyebrow a hierboven, en met dezelfde
     voorwaarde nagemeten: onder .form-note staat de dichtstbijzijnde andere knop
     34px erboven en reikt het vlak 14px omhoog, en de twee links in
     .sollicitatie-bellen staan 40px uit elkaar terwijl hun vlakken elk 12px
     uitsteken. Nergens overlap, dus nergens een tik op de verkeerde link. */
  .form-note a, .sollicitatie-bellen a { position: relative; }
  .form-note a::after, .sollicitatie-bellen a::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }

  /* Het kruimelpad boven een casetitel: een losse tekstlink waar een hogere regel
     de opmaak zou breken. Hier groeit alleen het tikvlak mee, niet de tekst. Dat
     kan veilig omdat er geen tweede link binnen 44px boven of onder staat — anders
     zouden de vlakken over elkaar heen vallen en zou je de verkeerde link raken.
     De social-links op Contact stonden hier ook in; die zijn icoonknoppen geworden
     en zijn zelf al 44x44, dus daar is dit vangnet niet meer nodig. */
  .eyebrow a { position: relative; }
  .eyebrow a::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* ===== Case-template: verhaalopbouw ===== */
/* Het verhaal in drie stappen met zijlabels (vraag → aanpak → resultaat),
   cijfers als bewijs en één klantquote. Zie case-template.html. */

/* De verhaalsectie volgt direct op de grijze introsectie; zonder deze regel
   stapelen hun paddings op (leerpunt 3) */
.case-verhaal { padding-top: 0; }
/* ...maar niet als de witte bewijsband eraan voorafgaat. Daar is de overgang een
   kleurwissel en niet grijs-op-grijs, dus zonder deze regel begint de kop precies
   op de rand waar het wit stopt. Nagemeten: dit is de enige voorganger van
   .case-verhaal met een andere achtergrond (de andere vier zijn page-hero,
   .section, .section-grey en .case-verhaal zelf — allemaal grijs). */
.case-bewijs + .case-verhaal { padding-top: clamp(64px, 8vw, 110px); }
.case-stap + .case-stap { margin-top: clamp(48px, 6vw, 88px); }
.case-stap h2 { max-width: 18em; margin-bottom: clamp(16px, 2vw, 26px); }
.case-stap p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; margin-bottom: 18px; max-width: 40em; }

/* Witte bewijsband: het resultaat mag afsteken tegen het grijs (zoals
   "Onze diensten" op de homepage) */
.case-bewijs { background: var(--white); }

/* Het resultaat was eerst altijd één alinea; sinds de echte caseteksten zijn
   het er twee of drie en plakten ze tegen elkaar. Zelfde 18px als
   .case-stap p, zodat het ritme door de hele case gelijk loopt. Bewust op de
   directe kinderen: anders raakt de regel ook de cijferlabels en de
   klantquote, die hun eigen marges hebben (leerpunt 21). */
.case-bewijs .label-content > p + p { margin-top: 18px; }

/* Cijfers: magenta wijst — dit is waar de case naartoe werkt */
.case-cijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-block: clamp(32px, 4vw, 56px);
}
.case-cijfers .cijfer { font-size: clamp(40px, 4.5vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--magenta); }
.case-cijfers .cijfer-label { margin-top: 12px; font-weight: 700; color: var(--ink); font-size: 15px; }
.case-cijfers .cijfer-sub { margin-top: 4px; font-size: 13px; opacity: .65; }

/* Klantquote: zelfde maten als .quote-slide op de homepage (36px/400, lh 1.2) */
.case-quote { margin-top: clamp(40px, 5vw, 72px); }
.case-quote blockquote p { font-size: clamp(22px, 2.6vw, 36px); line-height: 1.2; font-weight: 400; color: var(--ink); letter-spacing: -.01em; max-width: 24em; }
/* Een tweede alinea in de quote is de toelichting, niet de uitspraak zelf: op
   lopende-tekstmaat, anders wordt het een muur van 36px (World Vision). */
.case-quote blockquote p + p {
  margin-top: 24px;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7;
  letter-spacing: normal; color: var(--body-text);
  max-width: 46em;
}
.case-quote figcaption { margin-top: 28px; }
.case-quote figcaption strong { display: block; color: var(--ink); font-weight: 700; font-size: 15px; }
.case-quote figcaption span { opacity: .65; font-size: 13px; }

/* Quote van iemand van ons eigen team: een rondje foto vóór de naam, zelfde
   maat als het rondje op de vacaturepagina's (.sollicitatie-mens, 56 i.p.v.
   64px omdat de regel hier lichter is). Klantquotes houden de kale figcaption:
   van een klant hebben we geen foto, en dat verschil mag je zien.
   De <img> staat náást de figcaption en niet erin. Dat kwam voort uit de
   tekstmodus (weg sinds 3 september 2026), die een figcaption in zijn geheel
   bewerkbaar maakte en alles wat geen tekst is eruit gooide. De opzet is
   gebleven omdat hij op zichzelf klopt: quote over de volle breedte,
   daaronder foto en naam naast elkaar.
   height expliciet, anders maakt het height-attribuut op de <img> de foto
   beeldvullend in plaats van 56px — zie leerpunt 11.
   De foto is een eigen vierkant bestand (team/Kim-rond.jpg, 168px = 3x de
   vertoonmaat) en geen uitsnede van de teamfoto: op die teamfoto staat Kim ver
   weg, en een gecentreerde cover-uitsnede laat op 56px vooral haar shirt zien.
   De uitsnede is berekend, niet gekozen: haar hoofd loopt van y=148 tot y=890
   in de bron van 1600x1856, dus een vierkant van 1150px vanaf de bovenrand zet
   haar hoofd op 13-77% van het rondje en haar gezicht op 45% - net zo gevuld
   als Colinda in haar rondje op de vacaturepagina's. Reken dit opnieuw uit bij
   een volgend teamlid; de maat hangt af van hoe ver diegene op de bron staat. */
.case-quote.is-intern {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; column-gap: 14px; row-gap: 28px;
}
.case-quote.is-intern blockquote { grid-column: 1 / -1; }
.case-quote.is-intern .quote-foto {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
}
.case-quote.is-intern figcaption { margin-top: 0; }

/* Teamblok onder het beeld, in dezelfde sectie (anders stapelt grijs op grijs).
   De marge alleen als er iets boven staat: op de vacaturepagina opent de
   sectie met dit blok en volstaat de sectiepadding. */
.container + .case-team { margin-top: clamp(64px, 8vw, 110px); }

/* Wie er van ons aan de case werkte. Bewust hetzelfde raster als het team op
   Over ons (.team-card: kale foto, naam, functie) en niet de witte .person-card
   met contactgegevens: aan een case werken er twee tot acht mensen mee, en acht
   contactkaarten zijn geen uitnodiging maar een muur. De route naar een mens
   loopt hier via de CTA-band eronder en de contactpagina.
   Vier kolommen zoals .team-full; met twee of drie leden vullen ze de rij niet
   en dat hoort zo: de kaarten houden dezelfde maat op elke case. */
.case-team-leden {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px; margin-top: clamp(32px, 4vw, 48px);
}
@media (max-width: 860px) { .case-team-leden { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .case-team-leden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }

/* ===== Vacature-template ===== */
/* Deelt de verhaalopbouw met de cases (case-stap, case-bewijs, case-quote,
   case-team). Zie vacature-template.html. */

/* Opsomming in de verhaalsecties: kort magenta streepje als marker */
.vac-lijst { list-style: none; margin: 8px 0 18px; max-width: 40em; }
.vac-lijst li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
.vac-lijst li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 2px; background: var(--magenta); }

/* Sollicitatiekaart: bureaublauwe kaart voor dé actie van de vacaturepagina —
   als kaart op het grijs duidelijk een ander moment dan de volle-breedte
   footer. De knop is magenta (magenta wijst); wit op --ink haalt 10,7:1. */
.sollicitatie { padding-top: 0; }
/* De terug-links delen de sectie met de kaart; zonder deze regel kregen ze
   een eigen sectie met ruim 500px lege ruimte eromheen */
.sollicitatie .case-nav { margin-top: clamp(24px, 3vw, 40px); margin-bottom: clamp(40px, 5vw, 64px); }
.sollicitatie-kaart {
  background: var(--ink); color: var(--white);
  border-radius: var(--radius);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 80px);
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.sollicitatie-kaart h2 { color: var(--white); }
.sollicitatie-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; max-width: 26em; margin-top: 18px; }
.sollicitatie-mens { display: flex; align-items: center; gap: 18px; margin-top: clamp(28px, 4vw, 48px); }
.sollicitatie-mens img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.sollicitatie-mens strong { display: block; font-weight: 700; font-size: 15px; }
.sollicitatie-mens span { font-size: 14px; }
.sollicitatie-bellen { margin-top: 20px; font-size: 15px; line-height: 2; }
.sollicitatie-bellen a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sollicitatie-bellen a:hover { text-decoration: none; }

/* Velden: zelfde .field-opzet als de Let's Talk-kaart, met witte labels.
   De veldtekst zelf expliciet donker — .field erft anders het wit van de kaart. */
.sollicitatie-kaart .field label { color: var(--white); }
.sollicitatie-kaart .field input,
.sollicitatie-kaart .field textarea { color: var(--body-text); }
.sollicitatie-kaart .field input:focus-visible,
.sollicitatie-kaart .field textarea:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.sollicitatie-kaart .btn:focus-visible,
.sollicitatie-kaart a:focus-visible { outline-color: var(--white); }
/* De standaardhover van .btn-primary is --ink en zou hier wegvallen */
.sollicitatie-kaart .btn-primary:hover { background: var(--magenta-dark); }
.sollicitatie-veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sollicitatie-kaart .form-note { color: var(--white); opacity: .95; text-align: left; }

/* CTA in plaats van formulier: op een vacaturepagina sturen we bewust naar
   mail of telefoon. Wie hier solliciteert mag de moeite nemen om zelf contact
   te zoeken; het open-sollicitatieformulier staat alleen nog op werken-bij. */
.sollicitatie-kaart.is-cta { grid-template-columns: 1fr .9fr; align-items: center; }
.sollicitatie-kaart.is-cta .sollicitatie-lead { max-width: 30em; }
.sollicitatie-kaart.is-cta .sollicitatie-mens { margin-top: 0; }
.sollicitatie-knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 32px); }
/* Tweede knop: rand in plaats van vulling, zodat magenta de enige actie blijft
   die wijst. Wit .45 op --ink haalt 3,55:1 (leerpunt 35, norm 3 voor een rand).
   Padding 2px korter dan .btn, zodat de knop even hoog blijft als de magenta. */
.sollicitatie-knoppen .btn-rand {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255,255,255,.45); padding: 18px 31px;
}
.sollicitatie-knoppen .btn-rand:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

@media (max-width: 980px) {
  /* .is-cta staat er expliciet bij: die selector is specifieker dan
     .sollicitatie-kaart en zou de kolommen anders vasthouden (leerpunt 21) */
  .sollicitatie-kaart,
  .sollicitatie-kaart.is-cta { grid-template-columns: 1fr; }
  .sollicitatie-kaart.is-cta .sollicitatie-mens { margin-top: clamp(28px, 4vw, 48px); }
}
@media (max-width: 560px) {
  .sollicitatie-veldrij { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   ONS WERK: CASEKAARTEN MET OVERLAY
   Eén blok rechtsonder op het beeld. In rust toont het het kenmerk
   van de case; bij hover groeit het omhoog en komt het verhaal erbij.
   Het groeien loopt via grid-template-rows (0fr → 1fr) op .wc-meer:
   dat kan — anders dan height — van en naar een onbekende hoogte
   animeren zonder JS die eerst moet meten. De + rechtsonder draait
   weg en de pijl draait op dezelfde as in.

   Alles in de overlay is wit op --ink. Magenta blijft er bewust uit:
   #FF178B op --ink haalt 2,9:1 en zakt daarmee onder de 3,0 die zelfs
   voor grote tekst nodig is. Op deze pagina wijst magenta bij de
   eyebrow en het actieve filter, en verder niets.
   ══════════════════════════════════════════════════════════════════ */

.work-card {
  /* Eén easing en één duur voor de hele kaart, zodat blok en icoon
     gelijk lopen. Overgenomen van de referentie: lang en heel laat
     uitlopend, waardoor de beweging aan het eind stilvalt. */
  --wc-duur: 800ms;
  --wc-ease: cubic-bezier(.625, .05, 0, 1);
  --wc-inset: clamp(14px, 1.6vw, 22px);
}

/* ── Klantnaam: wit tegeltje linksboven ────────────────────────────
   Staat op dezelfde plek waar de referentie het klantlogo zet. Wij
   hebben geen losse logo's per case, dus het is de naam geworden —
   wit vlak met --ink erop leest op elk beeld, licht of donker. */
.wc-klant {
  position: absolute; top: var(--wc-inset); left: var(--wc-inset); z-index: 3;
  margin: 0; padding: 11px 20px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink); font-weight: 700;
  border-radius: 100px;
}

/* ── Het blok ──────────────────────────────────────────────────────
   Vast aan de onderkant, dus groeien is omhoog groeien. De breedte
   is in beide standen gelijk: een meebewegende breedte laat de tekst
   per frame opnieuw afbreken en dat trilt. De ondergrens staat in px,
   want een percentage werd op een smalle kaart te krap voor de tekst. */
.wc-overlay {
  position: absolute; z-index: 2;
  right: var(--wc-inset); bottom: var(--wc-inset);
  width: clamp(210px, 42%, 300px);
  background: rgba(var(--ink-rgb), .92);
  border-radius: var(--radius-s);
  padding: clamp(18px, 1.8vw, 26px);
  color: var(--white);
}

/* Het verhaal zit in een gridrij die dichtgeklapt begint. De binnenste
   div met overflow: hidden is verplicht voor dit patroon: de rij krimpt,
   de div knipt de inhoud af. */
.wc-meer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--wc-duur) var(--wc-ease);
}
.wc-meer-clip { overflow: hidden; }

/* De uitklap. focus-visible staat erbij zodat de tekst ook met het
   toetsenbord te bereiken is en niet alleen met de muis. */
.work-card:hover .wc-meer,
.work-card:focus-visible .wc-meer { grid-template-rows: 1fr; }
.work-card:hover .wc-verhaal,
.work-card:focus-visible .wc-verhaal {
  opacity: 1;
  transition-delay: 200ms;  /* eerst ruimte maken, dan pas de tekst */
}

/* ── Inhoud van het blok ──────────────────────────────────────────── */

/* Het cijfer is de held waar er één is; cases zonder cijfer hebben
   alleen het kenmerk in woorden. */
.wc-cijfer {
  font-size: clamp(30px, 3.2vw, 50px); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; margin: 0 0 10px;
}
.wc-kenmerk {
  font-size: clamp(16px, 1.4vw, 21px); font-weight: 400;
  line-height: 1.35; letter-spacing: -.02em; margin: 0;
}
.wc-kenmerk strong { font-weight: 700; }
.wc-dienst {
  font-size: 14px; font-weight: 500; line-height: 1.3;
  margin: 12px 0 0; color: rgba(255, 255, 255, .78);
}
/* De marge zit op het verhaal zelf en niet op de rij eromheen: zo
   klapt hij mee dicht en laat de gesloten stand geen gat achter. */
.wc-verhaal {
  font-size: clamp(14px, 1.05vw, 16px); font-weight: 400;
  line-height: 1.7; margin: 0 0 16px;
  opacity: 0;
  transition: opacity calc(var(--wc-duur) / 2) var(--wc-ease);
}

/* Icoon rechtsonder: de + draait een kwartslag weg terwijl de pijl
   vanuit dezelfde draai opkomt — zo leest het als één beweging. */
.wc-icoon {
  position: absolute; right: clamp(18px, 1.8vw, 26px); bottom: clamp(18px, 1.8vw, 26px);
  width: 18px; height: 18px; color: var(--white);
}
.wc-icoon svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transition: opacity calc(var(--wc-duur) / 2) var(--wc-ease),
              transform var(--wc-duur) var(--wc-ease);
}
.wc-pijl { opacity: 0; transform: rotate(-90deg); }
.work-card:hover .wc-plus,
.work-card:focus-visible .wc-plus { opacity: 0; transform: rotate(90deg); }
.work-card:hover .wc-pijl,
.work-card:focus-visible .wc-pijl { opacity: 1; transform: rotate(0deg); }
/* De tekst in het blok mag niet onder het icoon doorlopen. */
.wc-dienst { padding-right: 30px; }

/* ── Aanraakschermen ──────────────────────────────────────────────
   Zonder muis is er geen hover, dus de laag met het verhaal is daar
   niet te bereiken. Die tekst hoort dan ook nergens dragend te zijn:
   hij staat voluit op de case-pagina zelf. Het kenmerk blijft staan. */
@media (hover: none), (max-width: 1024px) {
  /* Op een telefoon blijft :hover plakken na een tik; het blok blijft
     hier dus dicht en de + blijft staan. */
  .work-card:hover .wc-meer,
  .work-card:focus-visible .wc-meer { grid-template-rows: 0fr; }
  .work-card:hover .wc-verhaal,
  .work-card:focus-visible .wc-verhaal { opacity: 0; }
  .work-card:hover .wc-plus,
  .work-card:focus-visible .wc-plus { opacity: 1; transform: none; }
  .work-card:hover .wc-pijl,
  .work-card:focus-visible .wc-pijl { opacity: 0; }
}
/* Onder 640px is 42% van de kaartbreedte te weinig; het blok pakt
   dan de volle breedte tussen de marges. De kaart wordt daar vierkant:
   het blok is over de volle breedte hoger, en op 3:2 bleef er van het
   beeld dan te weinig over. */
@media (max-width: 640px) {
  .work-card { aspect-ratio: 1 / 1; }
  .wc-overlay { left: var(--wc-inset); width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .work-img img { transition: none; }
  .work-card:hover .work-img img,
  .work-card:focus-visible .work-img img { transform: none; }
  /* De uitklap zelf blijft — dat is een toestand, geen beweging — maar
     hij gebeurt direct, zonder groei-animatie en zonder vertraging. */
  .wc-meer, .wc-verhaal, .wc-icoon svg { transition: none; }
  .work-card:hover .wc-verhaal,
  .work-card:focus-visible .wc-verhaal { transition-delay: 0s; }
}

/* ══════════════════════════════════════════════════════════════════
   ONS WERK: QUOTE NAAST DE PAGINAKOP
   Geen intro-alinea maar een uitspraak van iemand van het team, met
   gezicht erbij. Dat is de reden dat hij hier staat: "er zit een mens
   aan de andere kant" hoort meteen bovenaan de pagina te blijken, en
   niet pas op de contactpagina.

   De rechterkolom is bewust smal gehouden zodat de linkerkolom breed
   genoeg blijft voor .h-page — die loopt op tot 150px en past anders
   niet meer op één regel. Opgemeten over 1600 tot 1024px.
   ══════════════════════════════════════════════════════════════════ */
/* Sinds 26 augustus 2026 nergens meer in gebruik (de quote op Ons werk is
   weg); blijft staan als herbruikbaar component. */
.hero-quote-grid {
  grid-template-columns: 1fr minmax(260px, 300px);
  align-items: start; margin-top: 0;
}
/* De kop staat op deze pagina niet meer op de volle breedte, dus 150px past
   niet: "TROTS OP ZIJN" heeft dan 1098px nodig terwijl de linkerkolom er
   1016 heeft. Terug naar 140px en 8,6vw — opgemeten van 1600 tot 1100px,
   overal met marge op één regel. Dit is de enige plek waar we van de
   gemeten 150px afwijken; de andere paginakoppen blijven ongewijzigd. */
.hero-quote-grid .h-page { font-size: clamp(2.1rem, 8.6vw, 140px); }

/* Diensten heeft de langste paginakop van de site: "ALLES IN HUIS VOOR EEN
   GOED VERHAAL". Op de gemeten 150px past geen enkele tweedeling binnen de
   1420px content — de breedste helft ("ALLES IN HUIS VOOR") is dan 1509px,
   en de kop viel op vier regels. Op 130px staan beide helften vol en netjes
   naast elkaar (1305px en 1310px). Na .hero-quote-grid op Ons werk is dit de
   tweede plek waar we van de 150px afwijken; beide keren omdat de kop anders
   in losse woorden uiteenvalt.

   Ook de meeschaling is lager: 8,8vw in plaats van 9,4vw. De <br> in de HTML
   legt de tweedeling vast, maar bij 9,4vw wrapte de eerste helft onder 1383px
   alsnog en bleef "VOOR" alleen op een regel staan. 8,8vw is de bovengrens
   waarbij "ALLES IN HUIS VOOR" (10,05× de fontmaat breed) tot 768px binnen de
   contentbreedte blijft. Onder ~382px pakt de ondergrens over en valt hij op
   drie regels — daar is geen maat meer die past. */
.h-page.h-page-lang { font-size: clamp(2.1rem, 8.8vw, 130px); }
.hero-quote { margin: 0; max-width: 34em; }
.hero-quote figcaption {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
/* height expliciet, anders maakt het height-attribuut op de <img> de foto
   vierkant-groot in plaats van 56px — zie leerpunt 11. */
.hero-quote figcaption img {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: 50%; object-fit: cover;
}
.hero-quote figcaption span { font-size: 15px; color: var(--ink); }
.hero-quote figcaption strong { font-weight: 700; }
.hero-quote blockquote { margin: 0; }
.hero-quote blockquote p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }

/* Onder 1200px past de kop niet meer op twee regels náást de quote — bij
   1100px viel hij op drie. Daar zakt de quote dus onder de kop. Opgemeten
   bij 1600, 1508, 1440, 1366, 1280, 1180 en 1100px.

   Eigen omslagpunt en niet dat van .page-hero-grid (1024px): deze regel
   staat later in het bestand en zou die media query anders overrulen. */
@media (max-width: 1200px) {
  .hero-quote-grid { grid-template-columns: 1fr; }
  .hero-quote { margin-top: 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOGDETAIL
   De artikelpagina deelt de verhaalopbouw met de cases (page-hero,
   case-stap, case-bewijs, case-quote, faq-list). Hieronder alleen wat
   er nieuw bij komt: de intro, de meta-regel en de drie figuren.
   De figuren zijn getekend in HTML/SVG en bewegen via main.js (blok
   "Blogdetail: figuren"); zonder JS of met 'reduced motion' staan ze
   er gewoon compleet.
   ══════════════════════════════════════════════════════════════════ */

.blog-meta { margin-top: 18px; font-size: 13px; opacity: .55; }

/* Intro: zelfde maat als .case-tekst, maar zonder meta-kolom ernaast */
.blog-intro { max-width: 46em; }
.blog-intro p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; margin-bottom: 18px; }

/* Los beeld in een artikelsectie */
.blog-beeld { border-radius: var(--radius-s); overflow: hidden; margin-top: clamp(28px, 3.5vw, 44px); max-width: 720px; }
.blog-beeld img { width: 100%; height: auto; display: block; }

/* Figuur met onderschrift */
.blog-figuur { margin: clamp(28px, 3.5vw, 44px) 0 0; }
.blog-figuur figcaption { margin-top: 14px; font-size: 13px; opacity: .55; max-width: 34em; }

/* ── SWOT-raster ──────────────────────────────────────────────────
   Vier witte vakken op het grijs, per rij een klein groepslabel.
   Wit draagt, de koppen zijn bureaublauw; magenta blijft hier weg. */
.blog-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; }
.swot-groep {
  grid-column: 1 / -1; margin: 10px 0 0;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; opacity: .5;
}
.swot-groep:first-child { margin-top: 0; }
.swot-tegel, .blog-tegel { background: var(--white); border-radius: var(--radius-s); padding: 20px 22px; }
.swot-tegel h3, .blog-tegel h3 { font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.swot-tegel p, .blog-tegel p { font-size: 13px; line-height: 1.55; opacity: .7; margin: 0; max-width: none; }
/* Donkere variant: voor het voorbeeld dat eruit springt */
.blog-tegel.is-accent { background: var(--ink); }
.blog-tegel.is-accent h3, .blog-tegel.is-accent p { color: var(--white); }

/* ── Kanalen-diagram ──────────────────────────────────────────────
   Eén magenta strategie-pil (magenta wijst: dit is de keuze), vier
   witte kanaal-pillen, dunne lijnen ertussen. De pilvormen en maten
   volgen .btn: radius 100px-gevoel, 15px/700, uppercase. */
.blog-kanalen { max-width: 680px; }
.blog-kanalen svg { width: 100%; height: auto; display: block; }
.blog-kanalen text { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.bk-lijn { fill: none; stroke: rgba(47, 64, 80, .35); stroke-width: 1.5; }
.bk-centrum rect { fill: var(--magenta); }
.bk-centrum text { fill: var(--white); }
.bk-kanaal rect { fill: var(--white); stroke: rgba(47, 64, 80, .22); }
.bk-kanaal text { fill: var(--ink); }

/* ── Verbetercyclus ───────────────────────────────────────────────
   Diagram links, de drie stappen voluit rechts. De cirkelpijlen zijn
   bureaublauw; de stap-pillen wit met blauwe tekst, als de kanalen. */
.blog-cyclus {
  display: grid; grid-template-columns: minmax(240px, 360px) 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.blog-cyclus svg { width: 100%; height: auto; display: block; }
.blog-cyclus text { font-size: 15px; font-weight: 700; letter-spacing: .02em; fill: var(--ink); }
.bc-boog { fill: none; stroke: rgba(47, 64, 80, .45); stroke-width: 2; }
.bc-pijl { fill: rgba(47, 64, 80, .45); }
.bc-stap rect { fill: var(--white); stroke: rgba(47, 64, 80, .22); }
.cyclus-stappen { list-style: none; }
.cyclus-stappen li { padding: 16px 0; border-top: 1px solid rgba(30, 30, 30, .12); }
.cyclus-stappen li:last-child { border-bottom: 1px solid rgba(30, 30, 30, .12); }
.cyclus-stappen strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.cyclus-stappen p { max-width: 34em; }

/* ── Extra figuurvormen (gedeeld door meerdere blogs) ─────────────
   Deze vormen delen de pil- en lijnstijlen van het kanalen-diagram
   (.bk-lijn, .bk-kanaal, .bk-centrum); hieronder alleen wat nieuw is. */

/* Vrije tegelrij (bv. twee voorbeeldtitels naast elkaar) */
.blog-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 640px; }

/* Gedachteketen: pillen met pijltjes ertussen, verschijnen één voor één */
.blog-keten { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; max-width: 680px; }
.blog-keten .schakel {
  background: var(--white); border: 1px solid rgba(47, 64, 80, .22);
  border-radius: 100px; padding: 12px 22px;
  font-size: 14px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: .02em;
}
.blog-keten .schakel.is-accent { background: var(--magenta); border-color: var(--magenta); color: var(--white); }
.blog-keten .keten-pijl { color: rgba(47, 64, 80, .45); }

/* Genummerde lijst: magenta nummer voor elk punt (tips, stappen) */
.blog-nummers { list-style: none; counter-reset: bn; margin: 8px 0 18px; max-width: 40em; }
.blog-nummers li {
  counter-increment: bn; position: relative;
  padding: 14px 0 14px 46px; border-top: 1px solid rgba(30, 30, 30, .12);
  font-size: clamp(15px, 1.45vw, 18px); line-height: 1.6;
}
.blog-nummers li:last-child { border-bottom: 1px solid rgba(30, 30, 30, .12); }
.blog-nummers li::before {
  content: counter(bn, decimal-leading-zero);
  position: absolute; left: 0; top: 17px;
  color: var(--magenta); font-weight: 700; font-size: 13px;
}
.blog-nummers strong { color: var(--ink); }

/* Tussenkop in lopende tekst (de H3 van het artikel) */
.blog-h3 { font-size: clamp(17px, 1.7vw, 24px); font-weight: 700; color: var(--ink); margin: clamp(28px, 3.5vw, 40px) 0 12px; max-width: 24em; }

/* Focus-ringen: drie ringen om de kern van je bedrijf, met papiertjes */
.blog-ringen { max-width: 460px; }
.blog-ringen svg { width: 100%; height: auto; display: block; }
.br-ring { fill: none; stroke: rgba(47, 64, 80, .4); stroke-width: 2; }
.br-tekst { font-size: 13px; font-weight: 700; letter-spacing: .04em; fill: rgba(47, 64, 80, .55); }
.br-tekst.is-kern { fill: var(--ink); font-size: 15px; }
.br-stip { fill: var(--white); stroke: rgba(47, 64, 80, .35); }
.br-stip.is-accent { fill: var(--magenta); stroke: none; }

/* Brein-figuur: linkerbrein kijkt rechts, rechterbrein kijkt links */
.blog-brein { max-width: 680px; }
.blog-brein svg { width: 100%; height: auto; display: block; }
.blog-brein text { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.blog-brein .post-vlak { fill: var(--white); stroke: rgba(47, 64, 80, .22); }
.blog-brein .post-beeld { fill: rgba(47, 64, 80, .12); }
.blog-brein .post-lijn { fill: rgba(47, 64, 80, .18); }

/* Milkshake-video als figuur in een artikel (zelfde tegel als homepage) */
.blog-figuur .milkshake-tile { max-width: 420px; }

@media (max-width: 900px) {
  .blog-cyclus { grid-template-columns: 1fr; }
  .blog-cyclus svg { max-width: 360px; }
}
@media (max-width: 560px) {
  .blog-swot { grid-template-columns: 1fr; }
  /* De SVG schaalt mee met de viewBox; zonder deze stap wordt de
     letter op een telefoon ~7px. De pillen zijn ruim genoeg voor 19. */
  .blog-kanalen text { font-size: 19px; }
  .blog-brein text { font-size: 19px; }
}

/* ── Blogoverzicht ────────────────────────────────────────────────
   Zelfde gedrag als .case-card op de homepage: trage zoom op het
   beeld, titel wordt magenta. */
.blog-grid {
  /* min(320px, 100%): op een scherm van 320px is de container maar 272px
     breed en duwde de vaste 320px de pagina opzij (zelfde les als de
     branchepagina's, leerpunt 41) */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 40px 28px; margin-top: clamp(40px, 5vw, 64px);
}
.blog-kaart { display: block; text-decoration: none; }
.blog-kaart .bk-beeld { border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 16 / 10; }
.blog-kaart .bk-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 2500ms ease-out; }
.blog-kaart:hover .bk-beeld img,
.blog-kaart:focus-visible .bk-beeld img { transform: scale(1.04); }
.blog-kaart .bk-meta { display: block; margin-top: 18px; font-size: 13px; opacity: .55; }
.blog-kaart h3 { margin-top: 8px; font-size: clamp(18px, 1.8vw, 24px); color: var(--ink); transition: color var(--transition); }
.blog-kaart:hover h3, .blog-kaart:focus-visible h3 { color: var(--magenta); }
.blog-kaart .bk-tekst { margin-top: 8px; font-size: 14px; max-width: 32em; }

@media (prefers-reduced-motion: reduce) {
  .blog-kaart .bk-beeld img { transition: none; }
  .blog-kaart:hover .bk-beeld img { transform: none; }
}

/* ── Personenkaarten op smalle schermen ───────────────────────────
   De bovengrens van 280px per kolom houdt de kaarten op desktop leesbaar,
   maar op een telefoon past er nog maar één kolom in een container van
   ~342px. Onder 600px valt de bovengrens weg, zodat de kolom de volle
   containerbreedte pakt — net als elk ander blok op mobiel.
   `.personen` staat sinds het teamblok per case (zie .case-team-leden)
   alleen nog op Contact. */
@media (max-width: 600px) {
  .personen { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

/* ===== Aanpak-pagina ===== */
/* Expertises als accordeon (zelfde opzet als "Onze diensten" op de homepage)
   met een vast beeld ernaast — bewust anders dan de dienstenpagina. */
#per-expertise .expertise-grid {
  display: grid; grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(40px, 5vw, 96px); align-items: start;
  margin-top: clamp(48px, 6vw, 88px);
}
.expertise-beeld { position: sticky; top: 130px; }
/* height: auto vanwege de width/height-attributen (leerpunt 11) */
.expertise-beeld img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-s);
}
@media (max-width: 900px) {
  #per-expertise .expertise-grid { grid-template-columns: 1fr; gap: 32px; }
  .expertise-beeld { position: static; }
  .expertise-beeld img { aspect-ratio: 16 / 10; }
}
/* Expertise-sectie en slotstatement delen dezelfde grijze achtergrond;
   hun sectiepadding zou opstapelen tot een lege band (leerpunt 3). */
#per-expertise { padding-bottom: clamp(40px, 4vw, 56px); }
.aanpak-doel { padding-top: clamp(40px, 4vw, 56px); }
/* De intro onder de beeldband en de processtappen erna staan op hetzelfde grijs;
   met beide een volle sectiepadding stond er 220px lucht tussen (leerpunt 3).
   De intro geeft zijn onderpadding op, de proces-sectie houdt de gewone. */
.aanpak-intro { padding-bottom: 0; }

/* Diensten: dezelfde situatie. De intro onder de beeldband en de dienstensectie
   erna staan allebei op het grijs van body; de intro geeft daarom zijn
   onderpadding op (leerpunt 3). */
.diensten-intro { padding-bottom: 0; }

/* Het zijlabel van deze twee introblokken staat naast lopende tekst en niet
   naast een h2, en stond daardoor 11px onder de eerste tekstregel. Twee dingen
   moesten terug naar de standaard. `.case-stap p` (0,2,1) wint van
   `.side-label` (0,1,0) en zette het label op 19px in plaats van de 16px die
   het overal elders heeft (leerpunt 21). En de `padding-top: .6em` van
   `.side-label` bestaat om het label naast een grote kop op de kophoogte te
   tillen; naast tekst van dezelfde maat duwt hij het alleen maar omlaag.
   Gemeten: label en eerste tekstregel beginnen nu op 2px van elkaar. */
.aanpak-intro .side-label,
.diensten-intro .side-label { font-size: 16px; padding-top: 0; }

/* Klantquote naast de intro in de paginakop. Geen foto: van een klant hebben
   we die niet, en een logo in een rondje leest als een knop. Het magenta
   aanhalingsteken doet het aanwijswerk. */
/* align-self: start — .page-hero-grid lijnt onderaan uit, maar de intro rechts
   is een stuk hoger dan de quote. Bodem-uitlijning liet dan een gat van ~180px
   tussen de kop en de quote vallen; nu beginnen beide kolommen gelijk. */
.klant-quote { margin: 0; max-width: 34em; align-self: start; }
.klant-quote blockquote { margin: 0; position: relative; padding-top: 34px; }
.klant-quote blockquote::before {
  content: "\201C"; position: absolute; top: -14px; left: -4px;
  font-size: 72px; line-height: 1; color: var(--magenta);
}
.klant-quote blockquote p {
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.65; color: var(--ink);
}
.klant-quote figcaption { margin-top: 16px; font-size: 14px; }
.klant-quote figcaption strong { display: block; font-weight: 700; color: var(--ink); }
.klant-quote figcaption span { opacity: .65; }
/* Gestapeld (≤1024px) staat de quote in de HTML vóór de intro, en dan leest een
   bezoeker het bewijs voordat hij weet waarvoor. Naast elkaar mag de quote wél
   links staan: daar lees je ze samen. */
@media (max-width: 1024px) {
  .klant-quote { order: 2; margin-top: 12px; }
}

/* Impact: witte band met een horizontale rail van cases.
   Stond tot 24 augustus 2026 op --ink; op verzoek wit geworden, tegelijk met
   het weghalen van de "Kortom"-band die er direct boven stond. Alle kleuren
   hieronder zijn daarom de lichte tegenhanger van de oude donkere keuzes: het
   zijlabel is weer gewoon magenta, de kop gebruikt .tone-dark/.tone-light zoals
   overal, en de bediening staat op --ink in plaats van wit. */
.impact { background: var(--white); }
/* Op desktop staat "Zes keer een verhaal dat klopt." als geheel op regel twee.
   De grens is 1025px omdat .label-layout op 1024px naar één kolom klapt: dat is
   op deze site de ondergrens van "desktop". Nagemeten van 1025 tot 1920px: de
   zin blijft één regel (547px bij een kolom van 693px op het krapste punt,
   760 om 1026 bovenin) en de kop is precies twee regelhoogtes hoog. */
@media (min-width: 1025px) {
  /* Beide spans op block: zet je alleen de tweede op block, dan blijft de
     witruimte tussen de spans achter als een eigen, lege regel in de kop
     (nagemeten: drie regelhoogtes voor twee regels tekst). Tussen twee blokken
     valt diezelfde witruimte weg. */
  .impact .two-tone .tone-dark,
  .impact .two-tone .tone-light { display: block; }
}
.impact .section-intro { margin-top: 20px; }

/* De rail is een echte scrollcontainer: swipen, Tab en trackpad werken zonder
   JS. main.js koppelt hem op desktop aan de scrollpositie. */
/* Geen scroll-snap: die trok de eerste kaart tegen de schermrand (voorbij de
   contentlijn van 44px) én vocht met de scrollsturing uit main.js, die de
   rail per frame een stukje verzet. Vrij scrollen doet hier precies wat het
   moet — gemeten: zonder snap staat de rail in rust op scrollLeft 0. */
.impact-rail {
  margin-top: clamp(36px, 4.5vw, 60px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.impact-rail::-webkit-scrollbar { display: none; }
.impact-track {
  display: flex; gap: clamp(16px, 1.8vw, 28px); width: max-content;
  /* Eerste kaart begint op de contentlijn van .container (1420 + 2×44) */
  padding-inline: max(44px, calc((100vw - 1420px) / 2));
}
.impact-kaart {
  display: block; text-decoration: none; scroll-snap-align: start;
  width: clamp(220px, 24vw, 320px);
}
.impact-kaart .ik-beeld {
  border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--grey);
}
/* height: auto vanwege de width/height-attributen op de <img> (leerpunt 11) */
.impact-kaart .ik-beeld img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms ease;
}
.impact-kaart:hover .ik-beeld img,
.impact-kaart:focus-visible .ik-beeld img { transform: scale(1.04); }
.impact-kaart h3 { margin-top: 18px; font-size: clamp(17px, 1.5vw, 21px); transition: color var(--transition); }
.impact-kaart:hover h3, .impact-kaart:focus-visible h3 { color: var(--magenta); }
/* Op wit draagt --body-text dit label ruim (13,2:1); de oude witte variant met
   dekking .7 was er alleen voor de donkere band. */
.impact-kaart p { margin-top: 6px; font-size: 13px; color: var(--body-text); }
/* Bediening: pijlen links en rechts van de voortgangsbalk, zelfde opzet als de
   quote-slider op mobiel. De balk maakt zichtbaar dát er meer naast staat en
   loopt mee met de echte scrollpositie van de rail. */
.impact-bediening {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex; align-items: center; gap: 20px;
}
.iv-balk { flex: 1 1 auto; height: 2px; background: rgba(47, 64, 80, .18); border-radius: 2px; }
/* De vulling draagt haar informatie alléén in kleur en moet dus 3:1 halen.
   Magenta op wit haalt 3,44:1 en zou net mogen, maar --ink haalt 10,7:1 en
   houdt het accent bij de knop eronder — magenta wijst, en niet meer dan dat. */
.iv-fill { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 2px; transition: width 200ms linear; }
/* 44px: het minimale tikvlak, ook op een aanraakscherm (leerpunt 27) */
.impact-pijl {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  /* De rand maakt de knop als knop herkenbaar en moet dus 3:1 halen. Op wit
     doet --ink met dekking .35 dat (3,45:1); het icoon zelf is vol --ink. */
  background: none; border: 1px solid rgba(47, 64, 80, .35);
  color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.impact-pijl svg { width: 18px; height: 18px; }
.impact-pijl:hover:not(:disabled) { background: var(--magenta); border-color: var(--magenta); color: var(--white); }
/* Uitgeschakeld aan het begin of eind: ook uit de tabvolgorde, want hij doet
   daar niets. De rand blijft zichtbaar zodat de vorm niet wegvalt. */
.impact-pijl:disabled { opacity: .3; cursor: default; }
/* Een knop onder een blok in plaats van ernaast: op Aanpak onder de caserail,
   op de homepage onder de acht cases. Heette .impact-slot toen hij alleen op
   Aanpak stond. Hij zit in een eigen .container, dus de knop staat op de
   contentlijn van 44px - gelijk met de linkerrand van het raster erboven. */
.knop-slot { margin-top: clamp(28px, 3.5vw, 44px); }
/* Op de homepage staat hij wel gecentreerd (verzoek 2 september 2026): daar
   sluit hij een raster van twee kolommen af en hoort hij bij beide, niet bij
   de linkerkolom. Op Aanpak blijft hij op de contentlijn staan. */
.werk .knop-slot { display: flex; justify-content: center; }
/* Op mobiel staat hij wél in het midden - zie het blok "Knoppen op mobiel"
   onderaan dit bestand, waar dat voor de hele site geregeld is. */

@media (max-width: 768px) {
  .impact-track { padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-kaart .ik-beeld img { transition: none; }
  .impact-kaart:hover .ik-beeld img { transform: none; }
}

/* ── Aanpak: het proces, beeld in het midden ──────────────────────
   Vijf stappen, elk één blok: het beeld staat precies midden op de pagina en de
   tekst staat er om en om rechts en links naast. De vorm is geleend van de
   homepage van wauw.nl (leerpunt 34: de vórm mag, de woorden niet); de
   achtergrond, de kleur en de typografie zijn van ons — geen gekleurde band
   eronder, de sectie houdt het grijs van de rest van de pagina.

   De tijdlijn die hier stond (lijn + stip links, leerpunt 36) kon niet mee: die
   hing aan één kolom links, en met tekst die om en om van kant wisselt is er
   geen kolom meer om hem aan op te hangen. Het stapnummer draagt de volgorde nu
   alleen — main.js zet .is-actief en dan kleurt het magenta. */
.proces-stappen {
  --stap-gat: clamp(56px, 7vw, 104px);
  --stap-beeld: clamp(240px, 30vw, 460px);
  /* De tussenruimte staat als flex-gap op de container en niet als marge op de
     stap zelf. Reden: ScrollTrigger zet een pin-spacer óm elke stap heen zodra
     hij hem vastzet, en dan matcht `.stap + .stap` niet meer. Een gap van de
     ouder werkt ongeacht wat er om het kind heen komt te staan. */
  display: flex; flex-direction: column; gap: var(--stap-gat);
}

.stap { display: grid; gap: clamp(20px, 3.4vw, 56px); }

/* Gestapeld is de basis (beeld, dan tekst — gewoon de DOM-volgorde) en de
   driekoloms-opzet staat in een min-width. Zo hoeft er op smal scherm niets
   teruggezet te worden; met een max-width-query moest zowel de kolom als de rij
   van de even stappen weer op auto. */
@media (min-width: 1025px) {
  .stap { grid-template-columns: 1fr var(--stap-beeld) 1fr; align-items: center; }
  .stap-beeld { grid-column: 2; }
  .stap-tekst { grid-column: 3; }
  /* Om en om: stap 02 en 04 dragen .stap-omgekeerd en zetten hun tekst in de
     linkerkolom. grid-row is nodig omdat de automatische plaatsing hem anders
     op een tweede rij zet.
     Bewust een eigen klasse en géén :nth-child(even): ScrollTrigger zet een
     pin-spacer óm elke stap heen zodra hij hem vastzet, en dan is elke stap het
     enige kind van zijn eigen laagje — dus altijd de eerste. Met nth-child stond
     de tekst daardoor op alle vijf de stappen rechts. Zelfde valkuil als bij
     `.stap + .stap` (zie de gap hierboven). */
  .stap-omgekeerd .stap-tekst { grid-column: 1; grid-row: 1; }
}

.stap-beeld {
  /* Gestapeld staat het beeld gecentreerd: "beeld in het midden" hoort ook te
     kloppen als de tekst eronder valt. In het driekoloms-grid hierboven is de
     kolom precies zo breed als het beeld, dus daar doet de auto-marge niets. */
  margin: 0 auto; width: 100%; max-width: min(100%, 480px);
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius);
}
@media (min-width: 1025px) { .stap-beeld { max-width: none; } }

/* Het kader en de foto erin worden allebei door main.js geschaald (kader van
   .86 naar 1, foto van 1.25 naar 1) — twee lagen, dus twee losse transforms die
   elkaar niet in de weg zitten. Er staat hier bewust géén .reveal op: die
   schrijft ook naar transform en zou met de scroll-animatie vechten
   (leerpunt 30). Zonder JS staat alles daardoor gewoon meteen goed.
   Geen width/height-correctie nodig: dit is height 100% en niet auto
   (leerpunt 11 gaat over aspect-ratio op de img zelf). */
.stap-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Het nummer staat nu bóven de kop in plaats van in een eigen kolom, dus de
   .side-label-inspringing en de regelhoogte van .stap-nr (die deelt hij met de
   stapkaarten op de homepage: 44px) moeten eraf. */
.stap-tekst { min-width: 0; }
.stap-tekst .stap-nr { padding-top: 0; line-height: 1.4; margin-bottom: 10px; }

/* Kleiner dan de gewone h2 (52px): de tekstkolom is hier ~420px breed en daar
   valt een kop van 52px in vier regels uiteen. Gemeten op 1440px: de langste
   kop ("Observeren, signaleren, evalueren, optimaliseren") loopt op 38px over
   drie regels, de andere vier over één of twee. */
.stap-tekst h2 { font-size: clamp(1.5rem, 2.6vw, 38px); line-height: 1.15; margin-bottom: clamp(12px, 1.6vw, 20px); max-width: 14em; }
.stap-tekst p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; margin-bottom: 14px; max-width: 34em; }
.stap-tekst p:last-child { margin-bottom: 0; }

/* In rust is het nummer gedempt; het kleurt pas op als je bij de stap bent. Dat
   is de enige plek waar een zijlabel níét meteen magenta is — hier draagt het
   de voortgang, en dat werkt alleen als er ook een 'nog niet'-staat is. */
.stap .stap-nr { color: rgba(47, 64, 80, .45); transition: color var(--transition); }
.stap.is-actief .stap-nr { color: var(--magenta); }

@media (prefers-reduced-motion: reduce) {
  .stap .stap-nr { color: var(--magenta); }
}

/* ===== Branchepagina's ===== */
/* Vijf pillarpagina's (zorg, onderwijs, publieke sector, zakelijke
   dienstverlening, retail & horeca). Alles hergebruikt: page-hero, case-verhaal
   met case-stap, blog-tegels, blog-nummers, case-tiles, case-bewijs, case-grid,
   faq-list en cta-band. Alleen deze drie regels zijn nieuw. */

/* In een blogartikel staan de tegels in een smalle tekstkolom (max 640px);
   hier krijgen ze meer ruimte. Vast op twee kolommen en niet op auto-fit: er
   staan er altijd vier, en auto-fit maakte er in deze bredere kolom 3+1 van. */
.branche-tegels { grid-template-columns: 1fr 1fr; max-width: 900px; margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 700px) {
  .branche-tegels { grid-template-columns: 1fr; }
}

/* Twee of drie cases per pagina. auto-fit maakt er vanzelf twee of drie
   kolommen van, zodat de kaarten binnen één pagina even breed blijven.
   De min() is geen sierletter: een kale minmax(300px, 1fr) houdt de kolom op
   300px vast terwijl de container op een scherm van 320px maar 272px is, en
   duwde de pagina 4px horizontaal weg (nagemeten op 320px). */
.branche-cases { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 3vw, 48px); }
/* Bij drie kolommen is een kaart ~440px en past de introregel niet meer op twee
   regels (zie leerpunt 40): hier dus drie regels, met dezelfde min-height-truc
   zodat de tags van naast elkaar staande kaarten gelijk blijven staan. */
.branche-cases .case-card .case-desc { -webkit-line-clamp: 3; min-height: 72px; }
.branche-meer { margin-top: clamp(40px, 4vw, 56px); }

/* ══════════════════════════════════════════════════════════════════
   LOCATIEPAGINA (online-marketing-bureau-amersfoort.html)
   Overgenomen van de oude site. Bijna alles is hergebruik van bestaande
   componenten; hieronder alleen wat deze pagina echt nodig had.
   ══════════════════════════════════════════════════════════════════ */

/* De kop is langer dan die van de branchepagina's. Opgemeten met fontTools op
   Avenir-Heavy: "BUREAU AMERSFOORT" is 11,12x de fontmaat, dus binnen de
   contentbreedte van 1420px past hooguit 128px. Bovengrens daarom 125px, en de
   vw-factor 7,6 zodat hij ook op 1100-1500px binnen de kolom blijft. Onder
   ~600px wrapt de tweede regel gewoon verder — dat mag. */
.h-page.h-page-locatie { font-size: clamp(2.1rem, 7.6vw, 125px); }

/* De drie stappen (Strategie / Concept / Content & Ads) naast elkaar. Zelfde
   kaartvorm als .blog-tegel, maar met een beeld erboven en drie kolommen. */
.locatie-tegels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
}
.locatie-tegel {
  background: var(--white); border-radius: var(--radius-s);
  padding: 0 0 24px; overflow: hidden;
}
.locatie-tegel img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; display: block; margin-bottom: 20px;
}
.locatie-tegel h3 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; margin: 0 22px 10px; }
.locatie-tegel p { font-size: 15px; line-height: 1.7; margin: 0 22px; }
.locatie-tegel p + p { margin-top: 12px; }
@media (max-width: 900px) {
  .locatie-tegels { grid-template-columns: 1fr; }
}

/* Losse tussen-CTA ("Waar kunnen we jou bij helpen?"). Geen band en geen kaart:
   die had de rust van de pagina gebroken. Alleen een kop met de knop eronder. */
.locatie-cta { text-align: center; }
.locatie-cta h2 { margin-bottom: 26px; }

/* De FAQ-kolom links heeft op deze pagina ook een introtekst onder de kop. */
.faq-intro { margin-top: 22px; max-width: 30em; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; }

/* Klantlogo's: op de homepage staat deze band zonder kop, hier met. */
.clients .label-layout { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* "Milkshake marketing in de buurt". De footer-pill is wit-op-donker; hier ligt
   hij op het lichte vlak, dus een dunne rand in plaats van een vulling. De negen
   pagina's die nog niet bestaan staan als <span> — zichtbaar maar niet klikbaar,
   en met een dunnere rand zodat het verschil met een echte link te zien is.
   .fout-links (de weg terug op de 404) deelt deze vier regels: het is dezelfde
   pil op hetzelfde lichte vlak. Bewust hier meegenomen en niet overgetikt in het
   404-blok onderaan — dan zou dezelfde vorm op twee plekken staan en uit elkaar
   gaan lopen. */
.locatie-buurt,
.fout-links { margin-top: clamp(20px, 2.4vw, 30px); gap: 12px; }
.locatie-buurt .footer-pill,
.fout-links .footer-pill {
  background: none; border: 1px solid rgba(46, 45, 45, .3);
  color: var(--body-text); white-space: normal;
}
.locatie-buurt a.footer-pill:hover,
.fout-links a.footer-pill:hover { background: var(--magenta); border-color: var(--magenta); color: var(--white); }
.locatie-buurt a.footer-pill[aria-current="page"] { border-color: var(--magenta); color: var(--magenta); }
.locatie-buurt .footer-pill.is-wacht { border-style: dashed; border-color: rgba(46, 45, 45, .22); opacity: .6; }

/* Terug naar de branchepagina, onderaan de intro van een case (leerpunt 41).
   Bewust in de rechterkolom en niet onder de sector: de linkerkolom was op vier
   cases al langer dan de tekst (leerpunt 38) en daar zou deze regel de leegte
   vergroten in plaats van verkleinen. */
.case-branche { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.case-branche a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(47, 64, 80, .25); padding-bottom: 3px;
  transition: color var(--transition), border-color var(--transition);
}
.case-branche a:hover { color: var(--magenta); border-color: var(--magenta); }
.case-branche svg { width: 15px; height: 15px; flex: none; }
/* Tikvlak (leerpunt 27): hier is ruimte, dus het element groeit zelf mee.
   Noordhoff heeft twee links onder elkaar — een meegroeiend ::after zou daar
   overlappen, vandaar min-height op de link zelf. */
@media (any-pointer: coarse) {
  .case-branche a { min-height: 44px; }
}

/* De Almere-kop is de langste van de drie locatiepagina's ("MARKETING BUREAU /
   ALMERE: JOUW PARTNER / VOOR ONLINE GROEI"). Opgemeten: "ALMERE: JOUW PARTNER"
   is 12,38x de fontmaat, dus binnen 1420px past hooguit 115px. */
.h-page.h-page-locatie-lang { font-size: clamp(2.1rem, 7vw, 112px); }

/* Telefoon en mail onder de cases-alinea op Almere; hetzelfde formaat als de
   lopende tekst, alleen iets losser zodat het als aparte regel leest. */
.locatie-contactregel { margin-top: 22px; font-weight: 500; }

/* ===== Strategisch marketingbureau ===== */
/* De enige nieuwe regels van deze pagina. De rest is hergebruik: page-hero,
   media-band, case-verhaal met case-stap, vac-lijst, blog-h3, blog-tegels,
   blog-nummers, case-bewijs, case-grid, clients, faq-list en cta-band.

   In de vergelijkingstegels ("strategisch vs online") staat een opsomming.
   .vac-lijst is daar op tegelformaat te groot voor, dus hier krijgt hij de
   maat van .blog-tegel p (13px/1.55). */
.blog-tegel .vac-lijst { margin: 0; max-width: none; }
.blog-tegel .vac-lijst li {
  font-size: 13px; line-height: 1.55; margin-bottom: 8px; padding-left: 22px;
}
.blog-tegel .vac-lijst li:last-child { margin-bottom: 0; }
.blog-tegel .vac-lijst li::before { top: .62em; width: 12px; }
/* .blog-tegel.is-accent kleurt alleen h3 en p wit; een <li> erft anders de
   donkere lopende tekst en valt weg op het donkere vlak. */
.blog-tegel .vac-lijst li { color: var(--body-text); opacity: .7; }
.blog-tegel.is-accent .vac-lijst li { color: var(--white); opacity: .85; }
/* Op de donkere tegel haalt magenta op --ink maar 2,92:1 (leerpunt 35). Het
   streepje draagt hier geen informatie, maar wit is net zo duidelijk en houdt
   de band consistent met de andere donkere vlakken op de site. */
.blog-tegel.is-accent .vac-lijst li::before { background: rgba(255, 255, 255, .7); }
/* Na de tegels volgt op deze pagina nog een alinea, en die had geen bovenmarge
   (dezelfde omissie als in de bewijsband, leerpunt 37). Nagemeten: dit is de
   enige pagina waar direct op .blog-tegels een <p> volgt, dus de blogs en de
   branchepagina's veranderen hier niet van. */
.blog-tegels + p { margin-top: 18px; }


/* ===== Teamkop "Leer ons kennen" ================================ */
/* Deze kop deelt .h-upper met "Neem contact met ons op" en "Goede vraag.",
   maar leest als een gewone sectiekop: geen kapitalen en hetzelfde gewicht
   als de andere sectiekoppen op de homepage (.h-giant, weight 500). Op 100px
   oogt Heavy (700) merkbaar zwaarder dan diezelfde 700 op een h2 van 52px —
   vandaar Medium hier. De klasse .h-upper draagt ook de maat, de regelafstand
   en de spatiëring, dus die blijft staan; deze modifier past alleen die twee
   dingen aan. Staat op de homepage, Over ons en Werken bij. */
.h-upper.is-normaal { text-transform: none; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
   CASE-OPENING: het beeld naast de intro
   ══════════════════════════════════════════════════════════════════

   Het herobeeld stond op volle breedte onder de kop. Bij 1420px content is
   16/9 ruim 780px hoog en daarmee vulde één beeld het hele scherm. Bijsnijden
   naar een lagere band was geen optie: op vijf van de twaalf cases is de hero
   een stijlblad, dashboard of schermenreeks (Beeckestijn, De bedrijfsfiscalist,
   Feka, Noordhoff, Politie) waar de boven- en onderkant informatie dragen.
   Daarom blijft 16/9 heel en wordt het beeld smaller: het staat nu links naast
   de intro, en de feiten die eerst in een eigen 300px-kolom stonden zijn onder
   de introtekst gezakt. Zie leerpunt 47.

   De verhouding 1,15 : 1 geeft bij 1420px content een beeld van 725px breed en
   dus 408px hoog — ruim de helft van wat het was. De tekstkolom houdt 631px en
   blijft daarmee onder de 40em van .case-tekst.
   ────────────────────────────────────────────────────────────────── */

.case-opening {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* De marge hoorde bij de plek onder de kop; in dit grid lijnt het beeld
   bovenaan uit met de eerste regel tekst ernaast. */
.case-opening .case-hero-img { margin-top: 0; }

/* De feiten stonden in een eigen kolom en krijgen nu lucht van boven. */
.case-opening .case-meta { margin-top: clamp(26px, 3vw, 38px); }
.case-opening .case-meta dd:last-of-type { margin-bottom: 0; }

/* Onder 900px staat de tekstkolom te krap naast een beeld van deze verhouding:
   dan gaat het beeld boven de tekst staan, op volle breedte. Eigen omslagpunt
   en niet die van .case-intro (1024px) — dat is een ander grid, dat op de
   vacaturepagina's staat. */
@media (max-width: 900px) {
  .case-opening { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
}

/* ===== Homepage: definitieve tekst (augustus 2026) ===== */
/* De aanmoediging onder de lead. Kleiner dan .contact-sub en niet vol wit, zodat
   de volgorde kop -> lead -> aanmoediging leesbaar blijft. Dekking .8 op --ink
   haalt 7,5:1 (norm 4,5); vol wit zou 10,7:1 zijn en even zwaar wegen als de kop. */
.contact-note { margin-top: 18px; color: rgba(255, 255, 255, .8); max-width: 34em; }
/* De twee adresblokken staan sinds de definitieve tekst bínnen een usp-kolom.
   De 40px van `.contact address` hoort bij een los blok onder de kolommen; hier
   is 10px genoeg, dezelfde afstand als tussen de h3 en zijn eigen alinea. */
.contact-usps address { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════════
   JURIDISCHE PAGINA'S
   Algemene voorwaarden en Privacy statement delen de case-opbouw
   (page-hero + .case-verhaal met .label-layout.case-stap) en lenen hun
   opsommingen van .vac-lijst en hun tussenkoppen van .blog-h3. Het enige
   wat er niet was: het genummerde lid ("2.1.") met een hangende inspringing,
   zodat de nummers onder elkaar staan en de tekst één blok blijft.
   Het is een <p class="legal-lid"><span>2.1.</span>…</p> en geen div — dat
   kwam uit de tekstmodus (weg sinds 3 september 2026) en is zo gebleven:
   een alinea met een span is de eenvoudigste vorm die dit kan.
   Marge en tekstmaat volgen .case-stap p.
   ══════════════════════════════════════════════════════════════════ */
.legal-lid {
  display: grid; grid-template-columns: 56px 1fr;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7;
  margin-bottom: 18px; max-width: 40em;
}
.legal-lid > span { font-weight: 700; }
@media (max-width: 600px) { .legal-lid { grid-template-columns: 46px 1fr; } }

/* Onderbalk van de footer: copyright links, de twee juridische pagina's rechts.
   Hairline in wit .18 — dat is een scheiding en geen tekst, dus de 3:1 van een
   rand hoeft er niet op; de tekst zelf staat op wit .7 (nagemeten 6,17:1 op
   --ink, ruim boven de 4,5). Geen .footer-pill: dat is een navigatievorm en dit is een
   voetnoot; hier past een gewone onderstreepte link beter. */
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 32px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px; color: rgba(255, 255, 255, .7);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 12px 28px; }
/* Cookie-instellingen is een knop en geen link — hij opent de balk, hij gaat
   nergens heen. Hij ziet er wel uit als de twee links ernaast: dit is één rij
   voetnoten en drie verschillende vormen zou onrustig staan. */
.footer-bottom a,
.footer-bottom button {
  color: rgba(255, 255, 255, .7);
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-bottom button {
  padding: 0; border: 0; background: none;
  font: inherit; cursor: pointer;
}
.footer-bottom a:hover, .footer-bottom a:focus-visible,
.footer-bottom button:hover, .footer-bottom button:focus-visible { color: var(--white); }
/* Tikvlak op aanraakschermen (leerpunt 27). De drie staan naast elkaar,
   niet onder elkaar, dus een meegroeiend element is hier veilig. */
@media (any-pointer: coarse) {
  .footer-bottom a,
  .footer-bottom button { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   COOKIEBANNER
   Google Tag Manager laadt sinds 3 september 2026 pas ná toestemming;
   js/cookies.js zet deze balk zelf in de pagina en regelt het laden.
   Vormtaal van de site: wit draagt, bureaublauw markeert, magenta wijst.
   Dus een witte kaart met schaduw (geen rand én schaduw op hetzelfde
   element), één magenta knop, en de rest omlijnd in --ink.
   ══════════════════════════════════════════════════════════════════ */
.cookiebalk {
  position: fixed;
  left: 44px; bottom: 24px;
  width: min(560px, calc(100vw - 88px));
  z-index: 200;                 /* boven de vaste header (50) en de terug-naar-boven-knop (60) */
  opacity: 0; transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.cookiebalk.is-zichtbaar { opacity: 1; transform: none; }

/* Het menupaneel op mobiel legt zich over de pagina heen; de balk zou daar
   dwars doorheen staan. Zolang het menu open is, is de balk weg. */
html.nav-open .cookiebalk { display: none; }

.cookiebalk-kaart {
  background: var(--white);
  border-radius: var(--radius);  /* 20px, de bovengrens voor een kaart */
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 18px 40px rgba(3, 4, 28, .18);
}

.ck-titel {
  font-size: 20px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.02em; color: var(--ink);
}

.ck-tekst {
  margin-top: 10px;
  font-size: 15px; line-height: 1.65; color: var(--body-text);
}
/* Nagemeten: --magenta op wit haalt 3,65:1 en dat is te weinig voor tekst van
   15px (norm 4,5). --magenta-dark haalt 5,21:1. In een cookiebanner weegt dat
   zwaarder dan elders: de toezichthouder rekent slecht leesbare tekst in een
   banner aan als misleidend ontwerp. */
.ck-tekst a { color: var(--magenta-dark); text-decoration: underline; text-underline-offset: 3px; }
.ck-tekst a:hover, .ck-tekst a:focus-visible { color: var(--ink); }

/* --- de drie soorten, ingeklapt tot iemand op Instellingen klikt --- */
.ck-keuzes {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(47, 64, 80, .15);
}
.ck-regel + .ck-regel { margin-top: 14px; }

.ck-schakelaar {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; min-height: 28px;
}
.ck-schakelaar input {
  width: 18px; height: 18px; flex: none;
  accent-color: var(--magenta);   /* magenta wijst: dit is de keuze */
  cursor: pointer;
}
.ck-schakelaar input:disabled { cursor: default; opacity: .55; }
.ck-schakelaar input:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

.ck-regel-naam { font-size: 15px; font-weight: 700; color: var(--ink); }
.ck-regel-uitleg {
  margin-top: 2px; padding-left: 28px;   /* onder de tekst van het label, niet onder het vakje */
  font-size: 14px; line-height: 1.55; color: var(--body-text);
}

/* --- de knoppen --- */
.ck-knoppen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: 20px;
}
/* Compacter dan de .btn van de site (20px 33px): in een kaart van 560px
   zouden twee knoppen op die maat de hele regel vullen. 14px + 2×14px
   padding houdt de knop op 44px, het tikvlak dat we overal aanhouden.
   nowrap omdat "Selectie toestaan" anders binnenin afbreekt en die knop dan
   hoger wordt dan "Alles toestaan" ernaast — en even zwaar is hier de eis. */
.ck-btn { padding: 14px 26px; font-size: 14px; white-space: nowrap; }
/* De twee knoppen van een laag even breed. Zonder deze regel volgt de breedte
   het woord en verschilt dat per laag: "WIJZIGEN" is 123px, "ALLES TOESTAAN"
   177px en "SELECTIE TOESTAAN" 201px (Avenir Heavy 14px, letterspatiëring
   .02em, plus 2×26px padding — opgemeten met fontTools, leerpunt 40). 205px is
   de langste naar boven afgerond, dus alle drie de knoppen zijn even breed in
   welke laag ze ook staan. Twee ervan naast elkaar is 422px in een kaart die
   binnen zijn padding 504px meet. Meet dit opnieuw zodra een label verandert. */
.ck-knoppen .ck-btn { min-width: 205px; }

/* De tweede knop van een laag ("Wijzigen" in laag 1, "Selectie toestaan" in
   laag 2) staat op dezelfde plek, in dezelfde maat en even goed leesbaar als
   de eerste. Alleen de vulling verschilt — magenta wijst naar één ding
   tegelijk, dus de tweede knop is omlijnd in plaats van gekleurd.
   --ink op wit haalt 10,7:1, ruim boven de 3:1 die een rand nodig heeft. */
/* Om dezelfde reden staat de accepteerknop hier op --magenta-dark en niet op
   --magenta: wit op --magenta is 3,65:1 en het label is 14px, dus geen "grote
   tekst" die met 3,0 toe kan. Wit op --magenta-dark is 5,21:1. Dit is de enige
   plek op de site waar dat zo is; elders staat .btn-primary ongewijzigd. */
.cookiebalk .btn-primary { background: var(--magenta-dark); }
.cookiebalk .btn-primary:hover { background: var(--ink); }

.ck-btn-rand {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); padding: 12px 24px;
}
.ck-btn-rand:hover { background: var(--ink); color: var(--white); }

/* De knop terug naar boven staat rechtsonder en zou op een smal scherm achter
   de balk vallen. js/cookies.js meet de balk op en zet --ck-hoogte; hier komt
   die er als extra afstand bij. */
html.cookiebalk-open .back-to-top { bottom: calc(30px + var(--ck-hoogte, 0px) + 16px); }
/* Vangnet, want die extra afstand hangt aan JS: staat de balk er niet meer,
   dan telt zijn hoogte ook niet meer mee - ook niet als de klasse hierboven om
   wat voor reden dan ook is blijven staan. Deze regel wint op specificiteit
   (0,3,1 tegen 0,2,1). In een browser zonder :has() valt hij weg en blijft het
   precies zoals het was. */
html:has(.cookiebalk:not(.is-zichtbaar)) .back-to-top { bottom: 30px; }

@media (max-width: 700px) {
  .cookiebalk { left: 12px; right: 12px; bottom: 12px; width: auto; }
  /* De flex-basis is gelijk aan de min-width hierboven: past het paar naast
     elkaar, dan staat het naast elkaar; past het niet, dan zakt de tweede
     eronder en groeien ze allebei tot de volle breedte. Een smallere basis zou
     hier niets doen — de min-width wint toch. */
  .ck-knoppen .ck-btn { flex: 1 1 205px; }
}

@media (any-pointer: coarse) {
  /* De knoppen halen de 44px al uit hun padding (leerpunt 27). */
  .ck-tekst a { display: inline; }  /* staat midden in een zin: de uitzondering van WCAG 2.5.8 */
}

@media (prefers-reduced-motion: reduce) {
  .cookiebalk { transition: none; transform: none; }
}

/* ===== Formulieren: het lokvakje ===== */
/* Een veld dat een mens nooit ziet en dus nooit invult; bots vullen alles wat
   ze tegenkomen. Bewust géén display:none — dat slaan veel bots over, precies
   omdat het de bekende truc is. Het staat buiten beeld, uit de tabvolgorde
   (tabindex="-1" in de HTML) en met aria-hidden weg voor schermlezers. */
.lokvak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ===== Knoppen op mobiel gecentreerd =====
   Een knop die een blok lopende tekst of een sectie afsluit, staat op desktop
   links op de contentlijn: hij hoort dan bij de kolom erboven en lijnt uit met
   de kop en de eerste kaart ernaast. Onder 768px is die kolom de volle
   schermbreedte, en dan lijnt hij nergens meer op uit - hij hangt alleen nog
   aan de linkerrand met een halve regel leegte ernaast. Dat leest scheef
   (opgemerkt door de opdrachtgever, 7 september 2026), dus daar staat hij in
   het midden.

   De grens is 768px omdat de site daar zelf zijn mobiele grens heeft: de
   .container gaat er van 44px naar 24px marge. Eén breekpunt voor de hele
   site, zodat er nergens twee soorten uitlijning naast elkaar staan.

   Bewust NIET meegenomen - knoppen die al ergens op uitlijnen, en die door
   centreren juist scheef zouden komen te staan:
   - .vac-btn op Werken bij (lijnt uit met de functietitel ernaast)
   - .sollicitatie-knoppen op de vacaturepagina's (staan in een kaart waarin
     kop, tekst, foto en naam allemaal links staan)
   - .btn-block en .cta-submit (die horen bij een formulierveld)
   - .locatie-cta (stond al gecentreerd)

   width: fit-content en niet max-content: op 320px past de langste knoptekst
   ("Kom een milkshake'je doen!") niet meer op één regel en moet hij gewoon
   kunnen afbreken. De tekst blijft dan gecentreerd, want .btn heeft al
   text-align: center. */
@media (max-width: 768px) {
  .label-content > .btn,
  .page-hero-lead > .btn,
  .aanpak-sub > .btn,
  .sectie-kop > .btn,
  .story-body > .btn,
  .btn.branche-meer {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  /* De knop onder de caserail op Aanpak zit in een eigen .container en is dus
     geen kind van de blokken hierboven. */
  .impact .knop-slot { display: flex; justify-content: center; }
  /* .team-head is een flexrij: kop links, knop rechts. Die rij moet hier een
     stapel worden, zodat de knop een eigen regel heeft om op te centreren.
     Zonder dat pakt margin-inline: auto de vrije ruimte ín de rij en staat de
     knop noch rechts noch in het midden - gemeten tussen 528 en 768px, waar de
     kop en de knop nog naast elkaar passen. Het omslagpunt verschilt per
     pagina (560 / 520 / 440px, want elke kop is anders lang), dus een
     breekpunt kiezen kan hier niet. De 32px is de gap die de rij had. */
  .team-head { display: block; }
  .team-head > .btn { margin-top: 32px; }
}

/* ===== 404: pagina niet gevonden =====
   Eén nieuw blok, verder alles hergebruik: .page-hero, .h-page, .page-hero-lead,
   .btn, .label-layout met .side-label en de pil-op-licht die hierboven bij
   .locatie-buurt staat.

   minmax(0, 1fr) en niet 1fr: een kale 1fr heeft een automatische ondergrens en
   laat de tekstkolom meegroeien met de kop, en die kop staat op vw en weet dus
   niets van zijn kolom (leerpunt 55). De beeldkolom staat op 360px en niet
   breder: de kop is uitgemeten op 9,16x de fontmaat voor "DEZE IS GEVALLEN" en
   5,17x voor "GEVALLEN" alleen, en bij 1025px (net boven het omslagpunt) houdt
   de langste regel dan nog 38px over. Een bredere beeldkolom eet die marge op. */
.fout-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 360px);
  gap: clamp(24px, 4vw, 72px); align-items: end;
}
/* De knop staat binnen .page-hero-lead en niet los eronder. Dat is geen
   opmaakdetail: .page-hero-lead .btn zet de bovenmarge al op 26px, en de regel
   die knoppen onder 768px in het midden zet kijkt naar .page-hero-lead > .btn.
   Los eronder zou die knop op een telefoon links blijven staan terwijl hij op
   elke andere pagina centreert. */
.fout-tekst .page-hero-lead { margin-top: clamp(20px, 2.4vw, 30px); max-width: 34em; }

/* Uitgeknipt beeld: geen kader, geen hoeken, geen schaduw. De pot staat los op
   het grijs van de paginakop, precies zoals hij is aangeleverd. height: auto
   omdat de width/height-attributen anders als presentational hint winnen
   (leerpunt 11). */
.fout-beeld { margin: 0; }
.fout-beeld img { display: block; width: 100%; height: auto; }

/* Bellen of mailen is de hoofdactie (PRODUCT.md), dus die regel staat onder de
   pillen en niet ertussen. */
.fout-contact { margin-top: clamp(24px, 2.6vw, 34px); max-width: 34em; }

/* Zelfde omslagpunt als .page-hero-grid: daaronder is er geen kolom meer over
   voor een beeld van 200px naast een kop die tot 96px oploopt. */
@media (max-width: 1024px) {
  .fout-grid { grid-template-columns: minmax(0, 1fr); }
  .fout-beeld { max-width: 300px; margin-inline: auto; }
}