/**
 * Stoere Binken - sitestyling op het Figma-design "SBD-website 2026".
 * Tokens staan in style.css onder :root; hier alleen variabelen.
 * Maatvoering volgt het 1600-frame: container 1504, zijmarge 48.
 */

/* =========================================================
   Hulpklassen
   ========================================================= */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Ankers (anker.js): een anker landt op de leeslijn onder de sticky header.
   Dezelfde waarde geldt voor de browser zelf (zonder JS, tabben naar een
   link, zoeken op de pagina); een doel kan er met scroll-margin-top nog
   iets bij krijgen. Een doel dat focus krijgt na een ankerklik draagt
   tijdelijk tabindex -1 en hoort daar geen focusrand bij. */
html {
	scroll-padding-top: var(--anker-ruimte);
}

[data-anker-focus]:focus {
	outline: none;
}

/* Het hidden-attribuut wint altijd, ook van klassen met een eigen display
   (anders toont een verborgen insight-kaart alsnog door zijn display: grid). */
[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--c-green);
	color: var(--c-black);
	border-radius: var(--radius-hoek-s);
}

/* Verminderde beweging: alle animaties en overgangen vrijwel direct, ook
   die van plugins; de JS-modules slaan hun animaties zelf al over. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================
   Custom scrollbar in de huisstijl: smal, brand black spoor, grijze duim
   die bij hover groen kleurt. Geldt ook voor scrollende panelen zoals het
   cookievoorkeurenscherm.
   ========================================================= */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--c-grey-60) var(--c-black);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--c-black);
}

::-webkit-scrollbar-thumb {
	background: var(--c-grey-60);
	border-radius: 5px;
	border: 2px solid var(--c-black);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--c-green);
}

/* Tekstreveal-regels (SplitText): niet herwrappen tijdens de animatie */
.sbd-reveal-line {
	white-space: nowrap;
	will-change: transform, clip-path;
}

/* Reethi Rah leadtekst */
.lead,
.lead p {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	font-weight: 400;
}

.lead a {
	color: var(--c-green);
}

/* =========================================================
   Custom underline: groeit bij hover van links naar rechts en
   verlaat het element ook naar rechts, met de osmo-curve.
   Techniek: een gradient als background die via background-size
   groeit; de positie wisselt alleen op momenten dat de lijn
   onzichtbaar of volledig is, dus zonder sprong.
   ========================================================= */
.site-topmenu__link,
.taalwissel__link,
.takeover__link,
.lead a,
.site-notificatie__tekst a,
.site-footer__links a,
.site-footer__introtekst a,
.site-footer__fonts-tekst a,
.site-footer__copyright a,
.partners__naam a,
.insights__topic,
.archief__titel a,
.entry-content a,
.pijl-link__tekst,
.kantoren__tekst a,
.gfield_consent_label a,
.diensten__titel {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	/* De lijn tekent op de onderrand van de padding-box: dit geeft lucht
	   tussen de tekst en de underline. */
	padding-bottom: 0.2em;
	transition: background-size 0.55s var(--cubic-default), color var(--duration-fast);
}

.site-topmenu__link:hover,
.site-topmenu__link[aria-current="page"],
.taalwissel__link:hover,
.takeover__link:hover,
.lead a:hover,
.site-notificatie__tekst a:hover,
.site-footer__links a:hover,
.site-footer__introtekst a:hover,
.site-footer__fonts-tekst a:hover,
.site-footer__copyright a:hover,
.partners__naam a:hover,
.insights__topic:hover,
.insights__topic.is-actief,
.archief__titel a:hover,
.entry-content a:hover,
.pijl-link:hover .pijl-link__tekst,
.kantoren__tekst a:hover,
.gfield_consent_label a:hover,
.diensten__item--link:hover .diensten__titel {
	background-position: 0% 100%;
	background-size: 100% 1px;
}

/* Tekstlinks uit de editor, alleen binnen de contentgebieden waar lopende
   tekst staat (en in koppen). Overal hetzelfde (feedback Rene, 2026-09-28):
   in de linkkleur (--link-kleur: groen op donker, zwart op wit en op de
   accentkleur, in een case de actiekleur van die case) en in rust een
   underline; bij hover rolt de lijn naar rechts weg. Voorheen verschilde
   het per blok en waren links in de teamkaarten onzichtbaar.
   Bewust een expliciete lijst en geen algemene regel: componenten zoals
   het menu, de footer en de partnerlijst volgen hun eigen ontwerp. */
main :is(h1, h2, h3,
	.lead, .entry-content,
	.faq__intro, .faq__antwoord-binnen,
	.tabel__cel,
	.zijkop-tekst__tekst, .statistieken__tekst, .kantoren__tekst,
	.intro-tekst__tekst, .intro-auteur__tekst, .titel-tekst__tekst,
	.stappen__tekst, .tekst-media__body, .diensten__tekst,
	.teamlid__bio, .profiel__lead, .profiel__tekst,
	.case__intro, .case-titel-tekst__tekst,
	.case-verhaal__tekst, .case-kolommen__tekst, .case-quote__tekst) a:not([class]) {
	color: var(--link-kleur, currentColor);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0% 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.1em;
	transition: background-size 0.55s var(--cubic-default), color var(--duration-fast);
}

main :is(h1, h2, h3,
	.lead, .entry-content,
	.faq__intro, .faq__antwoord-binnen,
	.tabel__cel,
	.zijkop-tekst__tekst, .statistieken__tekst, .kantoren__tekst,
	.intro-tekst__tekst, .intro-auteur__tekst, .titel-tekst__tekst,
	.stappen__tekst, .tekst-media__body, .diensten__tekst,
	.teamlid__bio, .profiel__lead, .profiel__tekst,
	.case__intro, .case-titel-tekst__tekst,
	.case-verhaal__tekst, .case-kolommen__tekst, .case-quote__tekst) a:not([class]):hover {
	color: var(--link-kleur, currentColor);
	background-position: 100% 100%;
	background-size: 0% 1px;
}

/* Subtitel-stijl (Figma "Subtitle"): 12px bold, letterspacing 3, kapitalen */
.subtitle {
	font-size: var(--fs-subtitle);
	font-weight: 600;
	letter-spacing: var(--ls-subtitle);
	text-transform: uppercase;
	line-height: 26px;
}

/* Auteursregel (avatar + naam + functie) */
.auteur {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* In de referentiekaarten staat de avatar bovenaan, gelijk met de naam:
   bij een lange functie of bedrijfsnaam zakt hij anders naar beneden. */
.ref-kaart .auteur,
.ref-quote .auteur,
.referentie-kaart .auteur,
.referenties-overzicht__uitgelicht-auteur .auteur {
	align-items: flex-start;
}

/* Het avatar-kader krimpt nooit mee met lange namen ernaast */
.auteur__avatar {
	flex: 0 0 auto;
}

.auteur__avatar img {
	width: 49px;
	height: 49px;
	min-width: 49px;
	object-fit: cover;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
}

.auteur__gegevens {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.auteur__naam {
	font-weight: 700;
}

/* Klikbaar auteurblok: opent het profiel (profiel.js). Een knop zonder
   knoplook; de naam krijgt een onderstreping en de avatar zoomt licht in. */
.auteur--klikbaar {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.auteur--klikbaar .auteur__avatar {
	overflow: hidden;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
}

.auteur--klikbaar .auteur__avatar img {
	display: block;
	transition: transform var(--duration-normal) var(--cubic-default);
}

.auteur--klikbaar .auteur__naam {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--duration-fast) ease;
}

.auteur--klikbaar:hover .auteur__naam,
.auteur--klikbaar:focus-visible .auteur__naam {
	text-decoration-color: currentColor;
}

.auteur--klikbaar:hover .auteur__avatar img {
	transform: scale(1.08);
}

/* =========================================================
   Secties
   ========================================================= */
.section {
	padding-block: calc(var(--space-standard) / 2);
	position: relative;
}

.section--marge-compact { padding-block: calc(var(--space-compact) / 2); }
.section--marge-ruim    { padding-block: calc(var(--space-ruim) / 2); }
.section--marge-geen    { padding-block: 0; }

/* De introtekst is een opmaat naar het blok eronder: geen ruimte onder
   (wens Rene), de "Ruimte boven en onder"-instelling bepaalt alleen boven. */
.section--intro-tekst   { padding-bottom: 0; }

.section--bg-wit         { background: var(--c-white); color: var(--c-black); }
.section--bg-donkergrijs { background: var(--c-grey-80); }
.section--bg-zwart       { background: var(--c-black); }
.section--bg-accent      { background: var(--c-green); color: var(--c-black); }

/* =========================================================
   Knoppen
   ========================================================= */
.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.buttons:empty {
	display: none;
}

/* Figma BUTTON/Ghost, met het hovergedrag van Osmo button-016: groen of
   brand-black vlak, padding 20/9, tekst 18/32, hoeken tl+br 16 en een pijl
   naar rechts. Op hover rolt de tekst omhoog en rolt een kopie van onderen
   in beeld (een echte kopie, niet Osmo's text-shadow, zodat het ook bij een
   label over meer regels klopt; __inner clipt) en schiet de pijl naar
   voren: het eerste exemplaar rechts het vlak uit, het tweede van links erin.
   De kleurwissel werkt op elk apparaat, de beweging alleen met muis en zonder
   prefers-reduced-motion. Varianten zetten alleen variabelen. Markup komt uit
   stoerebinken_button_inhoud(). */
.button {
	--knop-kleur: var(--c-black);
	--knop-vlak: var(--c-green);
	--knop-rand: transparent;
	--knop-hover-kleur: var(--c-black);
	--knop-hover-vlak: var(--c-white);
	--knop-hover-rand: transparent;
	--knop-pijl: currentColor;
	--knop-focus: var(--c-green);
	--knop-ease: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	--knop-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);

	position: relative;
	display: inline-grid;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--knop-kleur);
	font-family: var(--font-ui);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 32px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	outline: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.325s var(--knop-ease);
}

/* Geen focusring op knoppen (wens Nick, 2026-11-09); --knop-focus is
   daardoor ongebruikt. */

.button__inner {
	grid-area: 1 / 1;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 9px 20px;
	border: 1px solid var(--knop-rand);
	/* Signatuurvorm: alleen linksboven en rechtsonder afgerond */
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	overflow: clip;
	pointer-events: none;
	transition: border-color 0.325s var(--knop-ease);
}

.button__vlak {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	background-color: var(--knop-vlak);
	pointer-events: none;
	transition: background-color 0.325s var(--knop-ease);
}

.button__tekst {
	display: grid;
}
.button__label {
	grid-area: 1 / 1;
	transition: translate 0.3s var(--knop-ease);
}
/* De kopie wacht onder het vlak: eigen hoogte plus de padding eronder */
.button__label:last-child {
	translate: 0 calc(100% + 12px);
}

.button__pijl {
	display: grid;
	flex: none;
	width: 14px;
	height: 14px;
	overflow: clip;
}
.button__pijl-icoon {
	grid-area: 1 / 1;
	width: 14px;
	height: 14px;
	background: var(--knop-pijl);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.33 12.67 14 8 9.33 3.33M14 8H1.33' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.33 12.67 14 8 9.33 3.33M14 8H1.33' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate 0.3s var(--knop-ease);
}
/* Het tweede exemplaar wacht links buiten het kader */
.button__pijl-icoon:last-child {
	translate: -120% 0;
}

/* Kleurwissel: op elk apparaat, ook zonder animatie */
.button:is(:hover, :focus-visible),
[data-hover]:is(:hover, :focus-visible) .button {
	color: var(--knop-hover-kleur);
}
.button:is(:hover, :focus-visible) .button__vlak,
[data-hover]:is(:hover, :focus-visible) .button .button__vlak {
	background-color: var(--knop-hover-vlak);
}
.button:is(:hover, :focus-visible) .button__inner,
[data-hover]:is(:hover, :focus-visible) .button .button__inner {
	border-color: var(--knop-hover-rand);
}

/* Beweging: alleen met muis en zonder prefers-reduced-motion */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button:is(:hover, :focus-visible) .button__label:first-child,
	[data-hover]:is(:hover, :focus-visible) .button .button__label:first-child {
		translate: 0 calc(-100% - 12px);
	}
	.button:is(:hover, :focus-visible) .button__label:last-child,
	[data-hover]:is(:hover, :focus-visible) .button .button__label:last-child {
		translate: 0 0;
	}
	.button:is(:hover, :focus-visible) .button__pijl-icoon:first-child,
	[data-hover]:is(:hover, :focus-visible) .button .button__pijl-icoon:first-child {
		translate: 120% 0;
	}
	.button:is(:hover, :focus-visible) .button__pijl-icoon:last-child,
	[data-hover]:is(:hover, :focus-visible) .button .button__pijl-icoon:last-child {
		translate: 0 0;
	}
}

/* Varianten: primair is de standaard (groen, wordt wit) */
.button--secundair {
	--knop-kleur: var(--c-white);
	--knop-vlak: var(--c-black);
	--knop-hover-kleur: var(--c-green);
	--knop-hover-vlak: var(--c-grey-80);
	/* Op de zwarte knop is de pijl brandgroen, zoals in Figma */
	--knop-pijl: var(--c-green);
}

.button--omlijnd {
	--knop-vlak: transparent;
}

.button--omlijnd-donker {
	--knop-kleur: var(--c-black);
	--knop-rand: var(--c-black);
	--knop-hover-kleur: var(--c-green);
	--knop-hover-vlak: var(--c-black);
	--knop-hover-rand: var(--c-black);
}

.button--omlijnd-licht {
	--knop-kleur: var(--c-white);
	--knop-rand: var(--c-grey-60);
	--knop-hover-kleur: var(--c-green);
	--knop-hover-vlak: transparent;
	--knop-hover-rand: var(--c-green);
}

/* Focusring in contrast met de omgeving van de knop */
.section--bg-wit .button,
.section--bg-accent .button {
	--knop-focus: var(--c-black);
}
.case .button {
	--knop-focus: var(--case-actie-op-donker, var(--c-green));
}

/* Zwevende CTA (thema-opties): linksonder, want CookieYes (banner en het
   revisit-icoon) staat rechtsonder. Zelfde marges als dat icoon (24px van
   onder en van de zijkant). Komt van onderen in beeld zodra de bezoeker het
   eerste scherm voorbij is en verdwijnt zolang een CTA-blok of de footer in
   beeld is (zwevende-cta.js). Onder de header (60) en het takeover-menu
   (50), boven de content. */
.zwevende-cta {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 45;
	opacity: 0;
	visibility: hidden;
	translate: 0 calc(100% + 40px);
	transition: translate 0.55s var(--cubic-default), opacity 0.4s var(--cubic-default), visibility 0s 0.55s;
}

.zwevende-cta.is-zichtbaar {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: translate 0.55s var(--cubic-default), opacity 0.4s var(--cubic-default), visibility 0s 0s;
}

.zwevende-cta__knop {
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Zolang de cookiebanner open staat geen tweede zwevend element */
body:has(.cky-consent-container:not(.cky-hide)) .zwevende-cta {
	display: none;
}

/* Telefoon: compacte pil linksonder; rechts blijft het revisit-icoon
   (45px) vrij met dezelfde 24px ertussen als de marges. Tijdens het naar
   beneden scrollen schuift hij weg (is-uit, zwevende-cta.js), net als dat
   icoon. */
@media (max-width: 599px) {
	.zwevende-cta {
		max-width: calc(100% - 24px - 24px - 45px - 24px);
	}
	.zwevende-cta.is-uit {
		translate: 0 calc(100% + 24px);
		opacity: 0;
	}
	.zwevende-cta__knop {
		font-size: 15px;
		line-height: 22px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	}
	.zwevende-cta__knop .button__inner {
		min-height: 44px;
		padding: 10px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zwevende-cta,
	.zwevende-cta.is-zichtbaar {
		transition: none;
	}
}

/* Tertiaire link: tekst + diagonaal pijltje */
.pijl-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: inherit;
	text-decoration: none;
}

/* De tekst bepaalt de basislijn van de link. Zonder deze regel neemt een
   flex-container voor "last baseline" het laatste item, het pijltje, en dat
   geeft de onderkant van het icoon als basislijn: in de kopregels van werk,
   klanten en insights hingen de letters daardoor 2 a 3 px boven de letterlijn
   van de kop. De tekst is het hoogste item, dus de link zelf verandert niet. */
.pijl-link__tekst {
	align-self: last baseline;
}

.pijl-link__pijl {
	display: inline-flex;
	/* Het pijltje is altijd groen, ook in rust: zo is meteen te zien dat
	   het element klikbaar is. */
	color: var(--c-green);
	transition: transform var(--duration-fast) var(--cubic-default);
}

.pijl-link:hover .pijl-link__pijl {
	transform: translate(2px, -2px);
}

.pijl-link:hover .pijl-link__tekst {
	color: var(--c-green);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: relative;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 48px var(--gutter) 24px;
}

/* Sticky variant: verschijnt bij omhoog scrollen (nav.js stuurt de beweging
   met GSAP). De gradient en blur zitten op een ::before zodat ze los kunnen
   faden. Richting de top morfht de sticky terug naar de volle headermaat
   (is-bijna-top) en neemt de echte header het op scrollpositie 0 pixel-
   identiek over: van de wissel is niets te merken. */
.site-header.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-block: 14px 18px;
	/* Opacity hoort er hier ook bij: deze shorthand zou anders de
	   transitie-fade van de header (zie paginatransitie-sectie) vervangen
	   en de header hard laten verschijnen. */
	transition: padding 0.45s var(--cubic-default), opacity 0.5s var(--cubic-default) 1.2s;
}

/* Progressive blur: het vlak loopt een stuk onder de header door en een
   mask laat blur en gradient samen zacht uitlopen, dus nergens een harde
   rand waar het bluren stopt. */
.site-header.is-sticky::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(100% + 64px);
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(21, 21, 21, 0.92) 0%, rgba(21, 21, 21, 0.6) 55%, rgba(21, 21, 21, 0) 90%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
	mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
	opacity: 1;
	transition: opacity 0.4s var(--cubic-default);
}

.site-header.is-sticky.is-bijna-top {
	padding-block: 48px 24px;
}

.site-header.is-sticky.is-bijna-top::before {
	opacity: 0;
}

.site-logo {
	flex: 0 0 auto;
	display: inline-flex;
}

.site-logo img {
	width: 58px;
	height: 48px;
}

/* Hover op het logo (terug naar home): het merk kantelt 90 graden mee */
.site-logo img {
	transition: transform 0.55s var(--cubic-default);
}

.site-logo:hover img {
	transform: rotate(90deg);
}

/* Type Shop-melding op desktop: fixed en gecentreerd, blijft in beeld
   tijdens het scrollen, boven de sticky header. De GSAP-tweens in nav.js
   gebruiken xPercent -50, dus de translate hier is de no-JS basis. Op
   mobiel staat de pil uit en neemt het zijlabel het over (hieronder). */
.site-notificatie {
	position: fixed;
	left: 50%;
	/* Midden van de pil (38px hoog) op het midden van logo en menu (76px),
	   wens Rene: hing eerst 9px te hoog. */
	top: 57px;
	transform: translateX(-50%);
	z-index: 65;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 38px;
	padding: 0 20px;
	background: var(--c-grey-80);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	white-space: nowrap;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	transition: top 0.45s var(--cubic-default);
}

/* Naar beneden gescrold: dichter op de browserrand, gecentreerd op het
   gedockte zweeflogo (midden op 42px; nav.js zet is-hoog). */
.site-notificatie.is-hoog {
	top: 23px;
}

/* Ingelogd schuift de header mee met de adminbalk (32px, smaller dan 783px
   46px); de pil bovenaan moet dan mee, anders lijkt hij voor de redactie
   niet gecentreerd. */
.admin-bar .site-notificatie:not(.is-hoog) {
	top: calc(57px + 32px);
}

@media (max-width: 782px) {
	.admin-bar .site-notificatie:not(.is-hoog) {
		top: calc(57px + 46px);
	}
}

.site-notificatie__tekst {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	white-space: nowrap;
}

.site-notificatie__tekst a {
	color: var(--c-green);
}

.site-notificatie__sluit {
	position: relative;
	width: 14px;
	height: 14px;
}

/* Kruisje draait 90 graden bij hover, met de osmo-curve */
.site-notificatie__sluit span {
	position: absolute;
	inset: 0;
	display: block;
	transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.site-notificatie__sluit:hover span {
	transform: rotate(90deg);
}

.site-notificatie__sluit span::before,
.site-notificatie__sluit span::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.3px;
	background: var(--c-grey-30);
	transition: background var(--duration-fast);
}

.site-notificatie__sluit span::before { transform: rotate(45deg); }
.site-notificatie__sluit span::after  { transform: rotate(-45deg); }

.site-notificatie__sluit:hover span::before,
.site-notificatie__sluit:hover span::after {
	background: var(--c-white);
}

@media (max-width: 767px) {
	.site-notificatie {
		display: none !important;
	}
}

/* =========================================================
   Zweeflogo: hét logo van de site. Wit met mix-blend-mode: difference, dus
   wit op donker, zwart op licht en geïnverteerd over beeld. Het logo in de
   header is onzichtbaar (maar klikbaar en toegankelijk); zweeflogo.js zet
   dit logo exact op die plek en laat het bij scrollen docken op 18px, de
   plek in de compacte sticky header. Buiten de header omdat de header een
   eigen stacking context is en het blend-effect daar niet tot de pagina
   reikt. Zonder JavaScript blijft gewoon het headerlogo zichtbaar.
   ========================================================= */
.zweeflogo {
	position: fixed;
	top: 0;
	left: 0;
	/* Boven de header (60): anders ligt de blur-achtergrond van de sticky
	   header over het logo heen zodra die terug in beeld schuift. Klikken
	   gaat door het logo heen (pointer-events: none) naar de headerlink. */
	z-index: 61;
	display: none;
	width: 58px;
	height: 48px;
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	will-change: transform;
	transition: opacity 0.35s var(--cubic-default);
}

.zweeflogo svg {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.55s var(--cubic-default);
}

/* Hover op de logoplek: kwartslag, zoals het footerlogo (zweeflogo.js zet
   is-hover op beide lagen, ook als de hover op de headerlink landt). */
.zweeflogo.is-hover svg {
	transform: rotate(90deg);
}

html.zweeflogo-actief .zweeflogo {
	display: block;
}

/* De bovenste laag ontkleurt het difference-resultaat (saturation met wit):
   alleen wit, grijs of zwart, nooit een gekleurde inversie. Nooit klikbaar,
   de klik hoort bij de a-laag eronder. */
.zweeflogo--kleurloos {
	z-index: 62;
	mix-blend-mode: saturation;
	pointer-events: none !important;
}

/* Los van de header (header uit beeld): dan is dit logo zelf de link */
.zweeflogo.is-los {
	pointer-events: auto;
}

/* Zodra het zweeflogo draait, is het headerlogo alleen nog de klikbare
   plaatshouder eronder (opacity, niet visibility: blijft bereikbaar). */
.site-header .site-logo img {
	transition: opacity 0.2s;
}
html.zweeflogo-actief .site-header .site-logo img {
	opacity: 0;
}

/* Tijdens de paginatransitie even weg, met de header mee */
html.transitie-bezig .zweeflogo {
	opacity: 0;
}

/* =========================================================
   Zijlabel (Type Shop), alleen op mobiel (tot 768px; desktop heeft de pil
   hierboven): 90 graden gedraaid label aan de rechterrand (writing-mode,
   dus geen transform-rekenwerk), lager dan het midden, boven het
   CookieYes-icoon rechtsonder. Opent de bottom sheet. Onder header (60)
   en takeover (50).
   ========================================================= */
@media (min-width: 768px) {
	.zijlabel,
	.zijpaneel,
	.site-typeshop {
		display: none !important;
	}
}

/* Het gedraaide zijlabel is vervangen door "Type Shop +" in de header
   (wens Rene): minder concurrentie met de groene CTA onderin. Het paneel
   (bottom sheet) blijft. */
.zijlabel {
	display: none !important;
}

.site-typeshop {
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--c-grey-30);
	font-family: var(--font-ui);
	font-size: var(--fs-small);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--duration-fast) var(--cubic-default);
}

.site-typeshop:hover,
.site-typeshop:focus-visible,
.site-typeshop[aria-expanded="true"] {
	color: var(--c-white);
}

.zijlabel {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 11px 16px;
	border: 1px solid var(--c-green);
	border-right: 0;
	border-radius: var(--radius-hoek-s) 0 0 var(--radius-hoek-s);
	background: var(--c-green);
	color: var(--c-black);
	font-family: var(--font-ui);
	font-size: var(--fs-small);
	line-height: 1;
	letter-spacing: 0.5px;
	cursor: pointer;
	box-shadow: -6px 0 24px rgba(0, 0, 0, 0.3);
	translate: 0 -50%;
	transition: translate 0.45s var(--cubic-default), background-color var(--duration-fast) var(--cubic-default);
}

.zijlabel:hover,
.zijlabel:focus-visible {
	background: var(--c-white);
	translate: -3px -50%;
}

/* Tekst van onder naar boven, zoals een tab aan een zijkant */
.zijlabel__tekst {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.zijlabel__plus {
	display: grid;
	place-items: center;
	width: 12px;
	height: 12px;
	transition: transform 0.5s var(--cubic-default);
}

.zijlabel:hover .zijlabel__plus {
	transform: rotate(90deg);
}

/* Zijpaneel: dialog met sluier; het paneel schuift van rechts in. De
   z-index ligt boven het CookieYes-revisit-icoon (999999), maar onder de
   cookiebanner zelf (9999999). */
html.zijpaneel-open {
	overflow: hidden;
}

.zijpaneel {
	position: fixed;
	inset: 0;
	z-index: 1000000;
}

.zijpaneel[hidden] {
	display: none;
}

.zijpaneel__sluier {
	position: absolute;
	inset: 0;
	background: rgba(21, 21, 21, 0.65);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.5s var(--cubic-default);
}

.zijpaneel__paneel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(480px, 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 56px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--c-black);
	color: var(--c-white);
	border-left: 1px solid var(--c-grey-80);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
	transform: translateX(100%);
	transition: transform 0.6s var(--cubic-default);
}

.zijpaneel.is-open .zijpaneel__sluier {
	opacity: 1;
}

.zijpaneel.is-open .zijpaneel__paneel {
	transform: translateX(0);
}

.zijpaneel__greep {
	display: none;
}

.zijpaneel__kicker {
	margin: 0;
	color: var(--c-green);
	font-size: var(--fs-subtitle);
	font-weight: 700;
	letter-spacing: var(--ls-subtitle);
	text-transform: uppercase;
}

.zijpaneel__titel {
	margin: 14px 0 0;
	font-family: var(--font-ui);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.zijpaneel__tekst {
	margin-top: 20px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.zijpaneel__tekst p {
	margin: 0 0 1em;
}

.zijpaneel__tekst p:last-child {
	margin-bottom: 0;
}

.zijpaneel__tekst a {
	color: var(--c-green);
}

.zijpaneel__knoppen {
	margin-top: 32px;
}

/* Kruisje rechtsboven, draait 90 graden bij hover met de osmo-curve */
.zijpaneel__sluit {
	position: absolute;
	top: 26px;
	right: 26px;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.zijpaneel__sluit span {
	position: absolute;
	inset: 0;
	display: block;
	transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.zijpaneel__sluit:hover span {
	transform: rotate(90deg);
}

.zijpaneel__sluit span::before,
.zijpaneel__sluit span::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.3px;
	background: var(--c-grey-30);
	transition: background var(--duration-fast);
}

.zijpaneel__sluit span::before { transform: rotate(45deg); }
.zijpaneel__sluit span::after  { transform: rotate(-45deg); }

.zijpaneel__sluit:hover span::before,
.zijpaneel__sluit:hover span::after {
	background: var(--c-white);
}

/* Telefoon: label lager aan de rechterrand (boven het cookie-icoon), en
   het paneel wordt een bottom sheet met greep die van onderen inschuift */
@media (max-width: 767px) {
	.zijlabel {
		top: auto;
		bottom: 128px;
		padding: 12px 9px 14px;
		font-size: 13px;
		translate: 0 0;
	}

	.zijlabel:hover,
	.zijlabel:focus-visible {
		translate: -3px 0;
	}

	.zijpaneel__paneel {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 85vh;
		justify-content: flex-start;
		padding: 16px 24px calc(28px + env(safe-area-inset-bottom));
		border-left: 0;
		border-top: 1px solid var(--c-grey-80);
		border-radius: var(--radius-hoek) var(--radius-hoek) 0 0;
		box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.45);
		transform: translateY(100%);
	}

	.zijpaneel.is-open .zijpaneel__paneel {
		transform: translateY(0);
	}

	.zijpaneel__greep {
		display: block;
		width: 44px;
		height: 4px;
		margin: 0 auto 20px;
		border-radius: 2px;
		background: var(--c-grey-60);
	}

	.zijpaneel__sluit {
		top: 22px;
		right: 22px;
	}

	.zijpaneel__titel {
		font-size: var(--fs-h5);
		line-height: var(--lh-h5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zijlabel,
	.zijpaneel__sluier,
	.zijpaneel__paneel {
		transition: none;
	}
}

.site-header__rechts {
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-topmenu__lijst {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-topmenu__link {
	font-size: var(--fs-body);
	line-height: 27px;
	color: var(--c-white);
}

.site-topmenu__link:hover {
	color: var(--c-green);
}

/* Taalwissel (Polylang) */
.taalwissel__lijst {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.taalwissel__link {
	font-size: 12px;
	line-height: 27px;
	color: var(--c-grey-30);
}

.taalwissel__link.is-current,
.taalwissel__link:hover {
	color: var(--c-white);
}

/* Hamburger uit Figma: twee grijze hoekhaken met een groen plusje. Open:
   de haken draaien 180 graden naar buiten, het plusje wordt een minnetje. */
/* Een slag groter dan in Figma (32x26, nu 48x38): het aparte ontwerp viel
   anders net te weinig op (wens Rene). */
.site-burger {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 70; /* boven het takeover-menu, zodat hij als sluitknop werkt */
}

.site-burger__icoon {
	overflow: visible;
	display: block;
}

/* Geldt ook voor de sluitknop van de teamlid-popup, die hetzelfde icoon
   gebruikt: overal even groot. */
.site-burger__icoon {
	width: 48px;
	height: 38px;
}

.site-burger__icoon path {
	fill: none;
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.5s var(--cubic-default), stroke var(--duration-fast);
}

.site-burger__haak {
	stroke: var(--c-grey-30);
}

.site-burger:hover .site-burger__haak {
	stroke: var(--c-white);
}

.site-burger__lijn {
	stroke: var(--c-green);
}

/* Open: haken 180 graden gedraaid en naar buiten geschoven (de exacte
   verplaatsing tussen de twee Figma-varianten), plus -> min. */
.takeover-open .site-burger__haak--boven {
	transform: translate(9px, -7px) rotate(180deg);
}

.takeover-open .site-burger__haak--onder {
	transform: translate(-9px, 7px) rotate(180deg);
}

.takeover-open .site-burger__lijn--v {
	transform: scaleY(0);
}

/* =========================================================
   Takeover-menu
   ========================================================= */
.takeover {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
}

.takeover[aria-hidden="false"] {
	display: block;
}

.no-js .takeover:target {
	display: block;
}

.takeover__achtergrond {
	position: absolute;
	inset: 0;
	background: var(--c-black);
}

.takeover__binnen {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 120px var(--gutter) 60px;
	overflow-y: auto;
}

.takeover__kolommen {
	display: flex;
	gap: 70px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.takeover__kolomtitel {
	margin: 0 0 33px;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	color: var(--c-grey-30);
}

.takeover__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.takeover__link {
	font-size: var(--fs-h6);
	line-height: 38px;
	color: var(--c-white);
}

.takeover__link:hover {
	color: var(--c-green);
}

/* =========================================================
   Hero
   ========================================================= */
.section--hero {
	padding-top: clamp(60px, 8vw, 130px);
}

.hero__boven {
	display: grid;
	grid-template-columns: minmax(0, 994fr) minmax(0, 354fr);
	gap: clamp(32px, 8vw, 156px);
}

.hero__titel {
	margin: 0;
	max-width: 994px;
}

/* De zijkolom lijnt uit met de onderkant van de titel (wens Rene). De
   kolom rekt mee met de rij en duwt zijn inhoud naar beneden; is de titel
   korter dan de zijtekst, dan blijft de titel gewoon bovenaan staan. */
.hero__zij {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 30px;
}

.google-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.google-badge__logo {
	width: 73px;
	height: 24px;
}

.google-badge__tekst {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.google-badge__sterren {
	color: var(--c-green);
	letter-spacing: 1px;
}

.hero__media {
	margin: clamp(32px, 4vw, 50px) 0 0;
}

.hero__beeld,
.hero__video {
	width: 100%;
	aspect-ratio: 1504 / 800;
	object-fit: cover;
}

/* De lage herovariant (servicepagina's) is 16:9, net als de projecthero:
   breedte gevuld, 1504x846-beeld, kader in dezelfde verhouding zodat
   object-fit niets hoeft op te blazen of weg te snijden. Het oude brede
   kader (1504x564) cropte 16:9-materiaal fors. */
.hero__beeld--laag,
.hero__video--laag {
	aspect-ratio: 16 / 9;
}

/* =========================================================
   Introtekst
   ========================================================= */
/* Gecentreerde 994px-kolom, zoals in het ontwerp */
.intro-tekst__tekst {
	max-width: 994px;
	margin-inline: auto;
}

.intro-tekst__kop {
	max-width: 994px;
	margin-inline: auto;
	margin-bottom: 30px;
}

/* =========================================================
   Diensten (2x2) - gecentreerd blok van 994px
   ========================================================= */
.diensten__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 482px));
	column-gap: 30px;
	row-gap: 51px;
	max-width: 994px;
	margin-inline: auto;
	justify-content: space-between;
}

.diensten__kop {
	max-width: 994px;
	margin-inline: auto;
	margin-bottom: 40px;
	/* Visueel een H3 (wens Nick, 2026-11-09); het kopniveau zelf blijft
	   uit het veld kop_niveau komen. */
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.diensten__titel {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-green);
	margin-bottom: 23px;
	/* Niet breder dan de tekst, anders loopt de hover-underline de hele
	   kolombreedte over. */
	width: fit-content;
}

/* Het hele dienstenitem is klikbaar via de titellink (::after over het
   item); links in de tekst liggen erboven. De groeiende underline op de
   titel staat in het underline-blok hierboven. */
.diensten__item--link {
	position: relative;
}

.diensten__link {
	color: inherit;
}

.diensten__vlak {
	position: absolute;
	inset: 0;
}

.diensten__titel,
.diensten__tekst a {
	position: relative;
	z-index: 1;
}

/* Tekst zonder link laat klikken door naar het vlak eronder. */
.diensten__item--link .diensten__tekst {
	pointer-events: none;
}

.diensten__item--link .diensten__tekst a {
	pointer-events: auto;
}

.diensten__tekst {
	max-width: 482px;
}

.diensten__tekst p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Uitgelicht werk
   ========================================================= */
/* Kop links (H3 op elementstijl), link rechts, en 60px naar de kaarten
   (zelfde maat als de referentieslider en insights). De link staat op de
   baseline van de (laatste regel van de) kop, dus de letters van kop en link
   staan op dezelfde lijn; flex-end is de fallback voor oude browsers. */
.werk__kopregel {
	display: flex;
	align-items: flex-end;
	align-items: last baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 60px;
}

/* Op H4-maat (wens Nick, 2026-11-09): de H3-maat (50px) was te fors voor
   de kopregel boven de kaarten. Het element blijft een H3. */
.werk__label {
	margin: 0;
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.werk__alles {
	flex: 0 0 auto;
}

.werk__grid {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 5.6vw, 90px);
}

.werk__rij--paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.werk__rij--quote {
	display: grid;
	grid-template-columns: minmax(0, 482px) minmax(0, 737px);
	justify-content: space-between;
	gap: 30px;
	align-items: center;
}

/* Projectkaart */
.project-kaart {
	display: block;
	color: inherit;
}

.project-kaart__media {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Subtiele beeldschaal bij hover; de media clipt, dus de layout blijft
   exact staan. */
.project-kaart__beeld {
	width: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s var(--cubic-default);
	will-change: transform;
}

.project-kaart:hover .project-kaart__beeld {
	transform: scale(1.04);
}

.project-kaart--wide .project-kaart__beeld { aspect-ratio: 1504 / 564; }

/* Masker op desktop met muis: bij hover zakt het beeld weg in een donker
   verloop met een groene lichtvlek rond de cursorpil (OPEN, cursor-pil.js
   zet --mx/--my). Zo springt de pil eruit, ook boven een drukke reel. */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
	.project-kaart__media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c-green) 26%, transparent), transparent 70%),
			linear-gradient(200deg, color-mix(in srgb, var(--c-black) 30%, transparent) 0%, color-mix(in srgb, var(--c-black) 82%, transparent) 100%);
		opacity: 0;
		transition: opacity 0.5s var(--cubic-default);
	}

	.project-kaart:hover .project-kaart__media::after {
		opacity: 1;
	}
}
.project-kaart--half .project-kaart__beeld { aspect-ratio: 737 / 564; }
.project-kaart--klein .project-kaart__beeld { aspect-ratio: 737 / 564; }

/* Projectarchief (blok): kleine rechthoekige kaarten in drie kolommen, alles
   in één keer op de pagina, gefilterd via archief-filter.js */
.projectarchief__kop {
	margin: 0 0 clamp(24px, 3vw, 40px);
}

.projectarchief__filterbalk {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.projectarchief__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 2vw, 30px);
}

.projectarchief__cel[hidden] {
	display: none;
}

.project-kaart--klein .project-kaart__titel {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.project-kaart__jaar {
	margin-left: 8px;
	color: var(--c-grey-30);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.projectarchief__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.projectarchief__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.project-kaart__reel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s var(--cubic-default);
	pointer-events: none;
}

.project-kaart.is-playing .project-kaart__reel {
	opacity: 1;
}

/* Viewportgedrag: de reel ligt permanent boven de thumbnail (die blijft de
   poster tot de video geladen is) en speelt zodra de kaart in beeld komt. */
.project-kaart--autoreel .project-kaart__reel {
	opacity: 1;
}

/* Vimeo-reels: de 16:9-speler dekt het kaartkader af (cover). De
   containerquery-eenheden staan op het reel-vlak zelf: dat is absoluut
   gepositioneerd (inset 0), dus size-containment kan daar geen kwaad;
   op het mediakader zou het de afbeelding juist laten dichtklappen. */
.project-kaart__reel--vimeo {
	display: block;
	overflow: hidden;
	container-type: size;
}

/* --video-ratio is de verhouding van het bronmateriaal als kommagetal;
   het thema zet hem per video in de HTML (ACF-veld of opgehaald bij Vimeo).
   1.7778 is 16:9, de stand waarop alles stond voordat het veld bestond.
   De spelers hieronder worden 2% groter dan het kader, in de verhouding
   van de video zelf. Een vaste 1px rondom was niet genoeg: dat maakte de
   iframe iets hoger dan 16:9, Vimeo zette er dan een dun balkje in en
   met de afronding op halve pixels schemerde de poster als lijntje
   boven of onder door. */
.project-kaart__reel--vimeo,
.hero__vimeo-kader,
.case__hero-reel--vimeo,
.case-embed {
	--video-ratio: 1.7778;
}

.project-kaart__reel--vimeo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(max(100cqw, 100cqh * var(--video-ratio)) * 1.02);
	height: calc(max(100cqh, 100cqw / var(--video-ratio)) * 1.02);
	border: 0;
	pointer-events: none;
}

/* Hero met Vimeo-achtergrondreel: zelfde kader als het heromedia, met de
   poster eronder tot de speler laadt. */
.hero__vimeo-kader {
	position: relative;
	display: block;
	aspect-ratio: 1504 / 800;
	overflow: hidden;
	container-type: size;
}

.hero__vimeo-kader--laag {
	aspect-ratio: 16 / 9;
}

.hero__vimeo-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zodra de reel speelt en over de poster heen is gefaded (0.6s, zie
   iframe[data-autovimeo]) mag de poster weg: dan kan hij nergens meer als
   randje langs de video doorschemeren. */
.hero__vimeo-kader:has(> iframe.is-spelend:not(.is-wachtend)) .hero__vimeo-poster {
	visibility: hidden;
	transition: visibility 0s 0.6s;
}

.hero__vimeo-kader iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(max(100cqw, 100cqh * var(--video-ratio)) * 1.02);
	height: calc(max(100cqh, 100cqw / var(--video-ratio)) * 1.02);
	border: 0;
	pointer-events: none;
}

/* Achtergrondreels blijven onzichtbaar tot de speler echt afspeelt en faden
   dan over de poster heen (hover-reel.js zet is-wachtend en haalt hem weg
   zodra de speler meldt dat hij speelt, of na een vangnet van 5 s). */
iframe[data-autovimeo] {
	transition: opacity 0.6s var(--cubic-default);
}

iframe[data-autovimeo].is-wachtend {
	opacity: 0;
}

.project-kaart__onder {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 16px;
	min-height: 60px;
}

.project-kaart__titel {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-white);
	transition: color var(--duration-fast);
}

.project-kaart:hover .project-kaart__titel {
	color: var(--c-green);
}

.project-kaart__diensten {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-grey-30);
}

/* Quote in het werkgrid */
.ref-quote {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	max-width: 482px;
}

.ref-quote__label {
	margin: 0;
	color: var(--c-sage);
}

.ref-quote__tekst {
	margin: 0;
}

.ref-quote__tekst p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Klanten + logowall
   ========================================================= */
/* Kop en tekst links, link rechts onderaan op de laatste letterlijn van de
   tekst (wens Rene). "last baseline" zet de letters exact op een lijn;
   browsers zonder die waarde vallen terug op flex-end. */
.klanten__kopregel {
	display: flex;
	align-items: flex-end;
	align-items: last baseline;
	justify-content: space-between;
	gap: 24px;
}

.klanten__kopgroep {
	min-width: 0;
}

.klanten__kopregel .klanten__kop {
	margin: 0;
}

.klanten__alles {
	flex: 0 0 auto;
}

.klanten__tekst {
	max-width: 856px;
	margin-top: 40px;
}


/* Logowall (Osmo cycle): alle klanten staan in de lijst, CSS bepaalt per
   breakpoint hoeveel vakken meedoen; logo-wall.js wisselt de logo's. */
.logowall {
	margin-top: 52px;
	background: var(--c-white);
	padding: clamp(32px, 4.6vw, 74px) clamp(32px, 5.3vw, 85px);
}

.logowall__lijst {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 170px));
	justify-content: space-between;
	row-gap: 39px;
}

.logowall__vak {
	position: relative;
	aspect-ratio: 1;
	/* De slide-and-fade blijft binnen het vak */
	overflow: hidden;
}

/* Desktop: 2 rijen van 5 zichtbaar */
[data-logo-wall-list] > [data-logo-wall-item]:nth-child(n+11) {
	display: none;
}

.logowall__logo-wrap {
	position: absolute;
	inset: 0;
}

.logowall__target {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logowall__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Zwartwit zoals in het klantenarchief; bij aanwijzen kleur. Het blok
	   kan met logowall--kleur (veld Logoweergave) op kleur worden gezet. */
	filter: grayscale(1);
	opacity: 0.85;
	transition: filter var(--duration-normal) var(--cubic-default), opacity var(--duration-normal) var(--cubic-default);
}

.logowall__vak:hover .logowall__logo,
.logowall--kleur .logowall__logo {
	filter: none;
	opacity: 1;
}

/* =========================================================
   Referenties-slider
   ========================================================= */
.referenties__kopregel {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 60px;
}

.referenties__kop {
	font-size: var(--fs-h4);
	line-height: 40px;
}

/* Het spoor is een echte scroller: vegen op touch, slepen met de muis
   (slider.js); alleen de active-state fadet zachtjes mee. */
.ref-slider {
	position: relative;
	overflow: hidden;
}

/* Het spoor loopt op een transform en wordt gesleept met GSAP Draggable
   (slider.js); verticaal vegen over de kaarten blijft van de pagina. */
.ref-slider__spoor {
	display: flex;
	gap: 16px;
	width: max-content;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	will-change: transform;
}

.ref-kaart {
	position: relative;
	flex: 0 0 414px;
	width: 414px;
	max-width: 86vw;
	min-height: 348px;
	opacity: 0.5;
	transition: opacity 0.9s var(--cubic-default);
}

.ref-kaart.is-actief {
	opacity: 1;
}

/* Het verloopvlak als eigen laag, zodat hij kan meefaden */
.ref-kaart::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--c-grey-80) 0%, rgba(60, 60, 60, 0) 100%);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	opacity: 0;
	transition: opacity 0.9s var(--cubic-default);
	pointer-events: none;
}

.ref-kaart.is-actief::before {
	opacity: 1;
}

.ref-kaart__tijd {
	font-size: var(--fs-small);
	color: var(--c-grey-30);
}

.ref-kaart__binnen {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	padding: 31px;
}

.ref-kaart__quote {
	margin: 0;
	font-family: var(--font-lead);
	font-size: var(--fs-body);
	line-height: 26px;
	max-width: 353px;
	/* Lange testimonials netjes afkappen met een beletselteken. Let op: de
	   quote mag niet meegroeien (geen flex-grow), anders geeft de rek de
	   clamp ruimte en staat de tekst toch voluit. */
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ref-kaart__quote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.ref-kaart__link {
	margin-top: auto;
}

/* Functie of bedrijf in stil grijs, dan springt de naam eruit. De
   Google-sterren houden hun eigen kleur. */
.ref-kaart .auteur__functie:not(.google-badge__sterren),
.referentie-kaart .auteur__functie,
.referenties-overzicht__uitgelicht-auteur .auteur__functie {
	color: var(--text-muted);
}

/* =========================================================
   Premium partners
   ========================================================= */
.partners__inner {
	display: grid;
	grid-template-columns: minmax(0, 737fr) minmax(0, 737fr);
	gap: 30px;
	align-items: start;
}

.partners__tekstkolom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	max-width: 737px;
}

.partners__tekst p:last-child {
	margin-bottom: 0;
}

.partners__lijstkader {
	position: relative;
	height: min(517px, 60vh);
	overflow: hidden;
	/* Vervagende randen boven en onder, zoals de gradients in het design */
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

.partners__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
}

.partners__rij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hairline);
}

.partners__lijst .partners__rij:first-child {
	border-top: 1px solid var(--hairline);
}

.partners__naam {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.partners__naam a:hover {
	color: var(--c-green);
}

.partners__discipline {
	color: var(--c-white);
	font-size: var(--fs-body);
}

/* =========================================================
   Onderwerpenlijst met hoverbeeld (naar de Osmo image-preview cursor
   follower): compacte rijen met titel links en keyphrase rechtslijnend,
   zoals de premium partners. Op desktop zweeft het beeld van de rij mee
   met de cursor (onderwerpen.js); op touchscreens staat het boven de rij
   (instelling) of blijft de lijst kaal.
   ========================================================= */
/* Zelfde opbouw als insights (wens Rene): kop erboven, tekst links, knop
   rechts op de onderlijn van de tekst. */
.onderwerpen__boven {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
	margin-bottom: clamp(24px, 3vw, 48px);
}
.onderwerpen__kop {
	margin: 0;
}
/* Zonder tekst of knop volgt de lijst direct op de kop; dan dezelfde lucht
   als die de kopregel anders geeft (feedback Rene, 2026-09-22). */
.onderwerpen__kop + .onderwerpen__lijst {
	margin-top: clamp(24px, 3vw, 48px);
}
.onderwerpen__tekst {
	max-width: 856px;
}
.onderwerpen__tekst p:last-child {
	margin-bottom: 0;
}

.onderwerpen__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
}
.onderwerpen__item {
	border-bottom: 1px solid var(--hairline);
}
.onderwerpen__rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: baseline;
	padding: clamp(14px, 1.5vw, 24px) 0;
	color: inherit;
	text-decoration: none;
	transition: opacity var(--duration-fast) ease;
}
/* Het beeldkader zit in de rij voor touch en voor het klonen; op desktop
   verborgen, het zwevende kader neemt het over. */
.onderwerpen__visual {
	display: none;
}
.onderwerpen__beeld {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.onderwerpen__titel {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: 400;
	transition: color var(--duration-fast) ease;
}
.onderwerpen__keyphrase {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	text-align: right;
}
a.onderwerpen__rij:hover .onderwerpen__titel {
	color: var(--c-green);
}
.section--bg-accent a.onderwerpen__rij:hover .onderwerpen__titel {
	color: var(--c-white);
}
.onderwerpen__knop {
	flex: 0 0 auto;
	margin-bottom: 4px;
}

@media (hover: hover) and (min-width: 992px) {
	.onderwerpen__lijst:hover .onderwerpen__item:not(:hover) .onderwerpen__rij {
		opacity: 0.5;
	}
}

/* Zwevend beeld: vast in de viewport, onderwerpen.js hangt het aan de body
   en zet x/y op de cursor. Alleen op desktop met muis. */
.onderwerpen__follower {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
	width: clamp(240px, 24vw, 370px);
	aspect-ratio: 737 / 564;
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
	.onderwerpen__follower {
		display: block;
	}
}
.onderwerpen__follower-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.65, 0.1, 0, 1);
}
.onderwerpen__follower.is-actief .onderwerpen__follower-inner {
	opacity: 1;
	transform: scale(1);
}
.onderwerpen__follower .onderwerpen__visual {
	display: block;
	position: absolute;
	inset: 0;
	will-change: transform;
}
/* Midden in het beeld, dus precies op de cursor: het is een label, geen knop
   waar je met de muis naartoe hoeft (wens Rene). */
.onderwerpen__follower-label {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	padding: 6px 12px;
	background: var(--c-green);
	color: var(--c-black);
	font-family: var(--font-ui);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	opacity: 0;
	transform: translate(-50%, -50%) translateY(100%);
	transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.65, 0.1, 0, 1);
}
.onderwerpen__follower.is-actief .onderwerpen__follower-label {
	opacity: 1;
	transform: translate(-50%, -50%);
}

/* Smal: keyphrase onder de titel */
@media (max-width: 991px) {
	.onderwerpen__rij {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
	.onderwerpen__keyphrase {
		text-align: left;
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text-muted);
	}
}

/* Touch of smal met beeld aan: dezelfde lijst, met rechts een klein
   thumbnail zo groot als de avatar in de referenties. Grote beeldkaarten
   lazen op mobiel als portfolio, terwijl het navigatie is (feedback Rene,
   2026-09-22); het beeld hoeft ook niet bij de klant te horen. */
@media (hover: none), (max-width: 991px) {
	.onderwerpen--mobiel-beeld .onderwerpen__rij {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
		row-gap: 4px;
		align-items: center;
	}
	.onderwerpen--mobiel-beeld .onderwerpen__titel,
	.onderwerpen--mobiel-beeld .onderwerpen__keyphrase {
		grid-column: 1;
	}
	.onderwerpen--mobiel-beeld .onderwerpen__keyphrase {
		text-align: left;
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text-muted);
	}
	.onderwerpen--mobiel-beeld .onderwerpen__visual {
		display: block;
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 49px;
		height: 49px;
		overflow: hidden;
		border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	}
}

/* =========================================================
   Expertises (Osmo tab-systeem)
   ========================================================= */
.expertises__head {
	display: flex;
	flex-direction: column;
	gap: 34px;
	margin-bottom: 60px;
}

.expertises__intro {
	max-width: 578px;
}

.expertises__intro p:last-child {
	margin-bottom: 0;
}

.tab-layout__wrap {
	z-index: 1;
	display: flex;
	flex-flow: wrap;
	align-items: stretch;
	position: relative;
	grid-row-gap: 3em;
}

.tab-layout__col {
	width: 42%;
	padding-right: 1.5em;
}

.tab-layout__col:last-child {
	width: 58%;
	padding-right: 0;
	padding-left: 0.5em;
}

.tab-content__wrap {
	width: 100%;
	max-width: 609px;
	height: 100%;
}

/* flex-start: tabs.js reserveert de hoogte van het langste detail als
   min-height, zodat het blok nooit verspringt bij tabwissel. */
.tab-content__bottom {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding-left: 0;
}

.tab-content__item {
	color: var(--c-white);
	width: 100%;
	padding: 27px 0;
	text-decoration: none;
	position: relative;
	transition: opacity 0.25s;
}

.tab-content__item:first-child {
	border-top: 1px solid var(--hairline);
}

.tab-content__item-main {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	grid-column-gap: 15px;
}

/* Het plusje voor elke tab; bij hover kleurt het groen en draait het mee,
   bij een actieve tab transformeert het in de pijl: het plusje draait weg
   terwijl de pijl erin draait. */
.content-item__nr {
	position: relative;
	color: var(--c-white);
	opacity: 0.6;
	width: 22px;
	height: 22px;
	flex: none;
	transition: color 0.3s, opacity 0.3s;
}

.content-item__nr .icon {
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
	transition: transform 0.45s var(--cubic-default), opacity 0.3s var(--cubic-default);
}

.content-item__pijl {
	opacity: 0;
	transform: translateX(-8px) rotate(-90deg) scale(0.7);
}

.tab-content__item:hover .content-item__nr {
	color: var(--c-green);
	opacity: 1;
}

.tab-content__item:hover .content-item__plus {
	transform: rotate(90deg);
}

.tab-content__item.active .content-item__nr {
	color: var(--c-green);
	opacity: 1;
}

.tab-content__item.active .content-item__plus {
	opacity: 0;
	transform: rotate(135deg) scale(0.5);
}

.tab-content__item.active .content-item__pijl {
	opacity: 1;
	transform: translateX(0) rotate(0) scale(1);
}

.content-item__heading {
	margin: 0;
	font-size: var(--fs-h5);
	line-height: 36px;
	transition: color 0.3s;
}

.tab-content__item.active .content-item__heading {
	color: var(--c-green);
}

.tab-content__item-detail {
	width: 100%;
	height: 0;
	padding-left: 36px;
	overflow: hidden;
}

.tab-description {
	margin-bottom: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.tab-description p:last-child {
	margin-bottom: 0;
}

.tab-description__spacer {
	padding-top: 0.75em;
}

.tab-content__item-bottom {
	background-color: var(--hairline);
	width: 100%;
	height: 1px;
	position: absolute;
	inset: auto 0% 0%;
	transition: background-color 0.2s;
}

.tab-progress {
	transform-origin: 0%;
	transform-style: preserve-3d;
	background-color: var(--c-green);
	width: 100%;
	height: 1px;
	transform: scale3d(0, 1, 1);
}

/* Geen eigen minimumhoogte: de fotokolom rekt mee met de tabkolom, zodat de
   onderkant van de foto op de onderste lijn van de laatste tab valt (wens
   Rene). Een vaste hoogte liet de foto onder die lijn doorlopen. */
.tab-visual__wrap {
	height: 100%;
	width: 100%;
	position: relative;
}

.tab-visual__item {
	visibility: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	height: 100%;
	position: absolute;
}

.tab-visual__item.active {
	visibility: visible;
}

.tab-visual__inner {
	width: 100%;
	overflow: hidden;
	transform: translateY(var(--py, 0));
	will-change: transform;
}

.tab-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   Insights
   ========================================================= */
/* Tekst links, link rechts op de onderlijn van de tekst (wens Rene) */
.insights__boven {
	display: flex;
	align-items: flex-end;
	/* Letters van link en laatste tekstregel exact op een lijn (wens Rene);
	   browsers zonder last baseline houden flex-end. */
	align-items: last baseline;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
}

.insights__tekst {
	max-width: 856px;
}

.insights__alles {
	flex: 0 0 auto;
}

/* Mobiel: kop/tekst en link onder elkaar, links uitgelijnd. Staat bewust NA
   de basisregels hierboven en bij .klanten__kopregel: align-items flex-end
   zou in kolomrichting anders rechts uitlijnen (cascade). */
@media (max-width: 760px) {
	.klanten__kopregel,
	.insights__boven,
	.onderwerpen__boven,
	.werk__kopregel {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* Bij uitgelicht werk staat de link direct onder een kale H3 met een
	   krappe regelhoogte (1.04): de staarten van de g en j hangen in de
	   ruimte en 16px oogt dan als niets. Meer lucht, zodat de link niet
	   als ondertitel aan de kop plakt (feedback Nick, 2026-09-01). */
	.werk__kopregel {
		gap: 28px;
	}
}

.insights__inner {
	display: grid;
	grid-template-columns: minmax(0, 353fr) minmax(0, 1121fr);
	gap: 30px;
	margin-top: 60px;
	align-items: start;
}

.insights__topics-titel {
	margin: 0 0 34px;
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.insights__topics-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Topics zijn tabbladen die de kaarten filteren, geen links */
.insights__topic {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-white);
	text-align: left;
	/* background-size hoort erbij: alleen color zou de underline-groei van
	   de gedeelde linkstijl uitschakelen en de lijn hard aan/uit zetten. */
	transition: color var(--duration-fast), background-size 0.55s var(--cubic-default);
}

.insights__topic:hover {
	color: var(--c-green);
}

.insights__topic.is-actief {
	color: var(--c-green);
}

.insights__kaarten {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.insight-kaart {
	display: grid;
	grid-template-columns: 226px 1fr;
	min-height: 150px;
	border: 1px solid var(--hairline);
	color: inherit;
	transition: border-color var(--duration-fast);
}

.insight-kaart:hover {
	border-color: var(--c-green);
}

.insight-kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.insight-kaart__inhoud {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 24px 30px;
}

.insight-kaart__titel {
	font-size: var(--fs-h5);
	line-height: 36px;
	color: var(--c-white);
}

.insight-kaart__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.insight-kaart__onderwerp {
	color: var(--c-grey-30);
}

/* Hover (Figma-variant Active): achter de categorie schuift "• -> Read
   article" gestaggerd in - eerst de bullet, dan de pijl, dan de tekst,
   elk met de osmo-curve. */
.insight-kaart__lees {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-green);
}

.insight-kaart__bullet {
	color: var(--c-grey-30);
	opacity: 0;
	transition: opacity 0.35s var(--cubic-default);
}

.insight-kaart__pijl {
	display: inline-flex;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.45s var(--cubic-default) 0.05s, transform 0.45s var(--cubic-default) 0.05s;
}

.insight-kaart__leestekst {
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.45s var(--cubic-default) 0.12s, transform 0.45s var(--cubic-default) 0.12s;
}

.insight-kaart:hover .insight-kaart__bullet {
	opacity: 1;
}

.insight-kaart:hover .insight-kaart__pijl,
.insight-kaart:hover .insight-kaart__leestekst {
	opacity: 1;
	transform: translateX(0);
}

/* De pijl wipt nog even door bij hover op de kaart */
.insight-kaart:hover .insight-kaart__pijl svg {
	animation: sbd-pijl-door 0.6s var(--cubic-default) 0.4s;
}

@keyframes sbd-pijl-door {
	0%   { transform: translateX(0); }
	40%  { transform: translateX(4px); }
	100% { transform: translateX(0); }
}

/* =========================================================
   CTA
   ========================================================= */
.cta__doos {
	background: var(--c-green);
	color: var(--c-black);
	padding: clamp(48px, 6.9vw, 110px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.cta__kop {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	max-width: 1011px;
	color: var(--c-black);
}

.cta__tekst {
	max-width: 865px;
}

.cta__tekst p:last-child {
	margin-bottom: 0;
}

.cta__knoppen {
	margin-top: 0;
}

/* =========================================================
   Footer + marquee
   ========================================================= */
.site-footer {
	position: relative;
	/* Compact: de hele footer, inclusief de grote marquee, past op een
	   scherm van 900px hoog */
	padding-top: clamp(40px, 4vw, 64px);
	overflow: hidden;
	/* Dekkende achtergrond voor de reveal: standaard brand black, op donker
	   eindigende pagina's de slotkleur van de pagina (footer-reveal.js). */
	background: var(--footer-boven, var(--bg));
}

/* Footer-reveal ("de pagina schuift van de footer af"): de wrapper
   reserveert de hoogte in de flow en clipt zijn vak; clip-path knipt ook
   position: fixed-kinderen weg, dus de footer is onzichtbaar tot de wrapper
   in beeld scrolt. Gewapend door footer-reveal.js; zonder JS of met reduced
   motion blijft de footer in de flow. */
.site-footer-reveal {
	position: relative;
	/* Wat er achter de maskerrand en de scroll-fade doorheen schemert: op
	   naadloze (donkere) pagina's de overgenomen slotkleur, anders niets. */
	background: var(--footer-boven, transparent);
}

.site-footer-reveal.is-armed {
	clip-path: inset(0);
	height: var(--footer-h);
}

.site-footer-reveal.is-armed .site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

/* Donker eindigende pagina's smelten met de footer doordat wrapper en
   footer dezelfde slotkleur dragen; de inhoud verschijnt zacht via de
   scrollgekoppelde fade (footer-reveal.js). Bewust geen maskerrand: die
   maakt de wrapper zelf doorzichtig en dan schemert de zwarte body als
   donkere band door op de naad met het laatste blok. */

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 609fr) minmax(0, 300fr) minmax(0, 380fr);
	gap: clamp(32px, 4vw, 80px);
	align-items: start;
}

.site-footer__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

/* Desktop: intro en menukolommen delen dezelfde rijen (subgrid), zodat de
   kolomtitels op de hoogte van de introkop staan en de menu-items op de
   hoogte van de introtekst (Figma). Bewust subgrid en geen display:
   contents: de wrappers houden zo hun box, en die hebben reveals.js en de
   IntersectionObserver nodig om de kolommen in beeld te laten komen. */
@media (min-width: 1101px) {
	.site-footer__grid {
		grid-template-rows: auto auto;
		row-gap: 20px;
		align-items: baseline;
	}

	.site-footer__intro,
	.site-footer__col {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: 1 / 3;
		row-gap: 20px;
		align-items: baseline;
		justify-items: start;
	}

	.site-footer__introkop  { grid-row: 1; }
	.site-footer__introrest { grid-row: 2; }
	.site-footer__col-titel { grid-row: 1; margin-bottom: 0; }
	.site-footer__links     { grid-row: 2; }
}

.site-footer__introrest {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.site-footer__introkop {
	margin: 0;
	font-family: var(--font-introkop);
	font-size: 30px;
	line-height: 1.2;
}

.site-footer__introtekst p:last-child {
	margin-bottom: 0;
}

.site-footer__introtekst a {
	color: var(--c-green);
	/* Zelfde als de tekstlinks in de pagina: lijn in rust, rolt weg bij hover. */
	background-size: 100% 1px;
	background-position: 0% 100%;
}

.site-footer__introtekst a:hover {
	background-size: 0% 1px;
	background-position: 100% 100%;
}

/* Strak links uitgelijnd in de introkolom */
.site-footer__sinds {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.site-footer__sinds-label {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.site-footer__sinds-jaar {
	font-family: var(--font-since);
	font-size: 52px;
	line-height: 36px;
	padding-top: 8px;
}

/* Figma-exports zolang Nantua en Kryptonite niet als font geleverd zijn */
.site-footer__sinds-jaar--svg img {
	height: 36px;
	width: auto;
}

.site-footer__introkop--svg img {
	height: 27px;
	width: auto;
}

.site-footer__col-titel {
	margin: 0 0 34px;
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.site-footer__links a {
	font-size: var(--fs-h6);
	line-height: 34px;
	color: var(--c-white);
}

.site-footer__links a:hover {
	color: var(--c-green);
}

/* De grote marquee-tekst in de footer: font wisselt per paginaweergave
   (--font-marquee), beweging via marquee.js gekoppeld aan de scrollsnelheid.
   Dezelfde engine drijft het marquee-blok (.marquee--blok hieronder). */
.marquee {
	margin-top: clamp(20px, 2.5vw, 40px);
	/* Alleen horizontaal afsnijden: staartjes (g, j, y van Maestricht of
	   Cucaracha) en hoge accenten steken buiten de regelhoogte en werden
	   met overflow: hidden onderaan afgesneden. */
	overflow-x: clip;
	overflow-y: visible;
	white-space: nowrap;
}

.marquee__spoor {
	display: inline-flex;
	/* Zo breed als de inhoud: anders klemt de viewport het spoor en drukt
	   flexbox de onderdelen (svg's, kaarten) plat */
	width: max-content;
	will-change: transform;
}

.marquee__tekst {
	font-family: var(--font-marquee, var(--font-display));
	font-size: clamp(80px, 14vw, 224px);
	line-height: 1.05;
	color: var(--c-white);
	white-space: pre;
	/* Kapitaalfont gekozen (inc/fonts.php): dan alles in kapitalen. */
	text-transform: var(--marquee-transform, none);
}

/* Marquee-blok: rij tekst met scheidingsteken, of afbeeldingen. De pijl
   wijst in de looprichting en draait mee zodra de richting omkeert bij
   scrollen omhoog (data-marquee-status uit marquee.js). */
.marquee--blok {
	margin-top: 0;
	width: 100%;
}

.marquee__eenheid {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.35em;
	padding-right: 0.35em;
	line-height: 1.05;
	white-space: nowrap;
}

.marquee--groot  .marquee__eenheid { font-size: clamp(56px, 8vw, 140px); }
.marquee--middel .marquee__eenheid { font-size: clamp(36px, 4.5vw, 72px); }
.marquee--klein  .marquee__eenheid { font-size: clamp(24px, 2.2vw, 34px); }

.marquee--font-display .marquee__eenheid { font-family: var(--font-display); }
.marquee--font-wissel  .marquee__eenheid { font-family: var(--font-marquee, var(--font-display)); text-transform: var(--marquee-transform, none); }
.marquee--font-serif   .marquee__eenheid { font-family: var(--font-lead); }
.marquee--font-ui      .marquee__eenheid { font-family: var(--font-ui); }
/* Specifieke familie uit de displaybibliotheek (inline --marquee-font) */
.marquee--font-eigen   .marquee__eenheid { font-family: var(--marquee-font, var(--font-display)), var(--font-display); }

.marquee__item {
	display: inline-block;
	flex: none;
}

.marquee__scheiding {
	display: inline-grid;
	flex: none;
	place-items: center;
	color: var(--c-green);
}

.marquee__pijl svg {
	width: 0.7em;
	height: 0.7em;
	transition: transform 0.5s var(--cubic-default);
}

/* Pijl in de looprichting: naar links bij "links", naar rechts bij "rechts";
   omgekeerd zodra de bezoeker omhoog scrolt */
[data-marquee-richting="links"][data-marquee-status="normaal"] .marquee__pijl svg,
[data-marquee-richting="rechts"][data-marquee-status="omgekeerd"] .marquee__pijl svg {
	transform: rotate(180deg);
}

.marquee__punt {
	width: 0.22em;
	height: 0.22em;
	border-radius: 50%;
	background: currentColor;
}

.marquee__ster {
	font-family: var(--font-display);
	line-height: 1;
}

/* Afbeeldingen: kaarten met de signatuurhoek */
.marquee--afbeeldingen .marquee__eenheid {
	gap: clamp(12px, 1.5vw, 24px);
	padding-right: clamp(12px, 1.5vw, 24px);
}

.marquee__item--beeld {
	display: block;
	width: clamp(160px, 18vw, 320px);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
}

.marquee__beeld {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section--bg-accent .marquee__scheiding {
	color: var(--c-black);
}

.site-footer__onder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 12px 24px;
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.site-footer__copyright a {
	color: inherit;
}

.site-footer__copyright a:hover {
	color: var(--c-green);
}

/* =========================================================
   Paginatransitie: overlappende parallax (Osmo)
   ========================================================= */
/* De scrollbalk altijd tonen: tijdens de transitie klapt de documenthoogte
   even in en zou hij verdwijnen, waardoor de layout een balkbreedte
   verspringt (Windows). */
html {
	overflow-y: scroll;
}

/* Anti-flits bij de eerste load: de pagina blijft verborgen totdat de
   reveals gewapend zijn. reveals.js haalt de klasse weg; de inline
   fallback-timer in de head (functions.php) doet dat uiterlijk na 3 s,
   ook als een script niet laadt. */
html.sbd-laadt main[data-barba="container"] {
	visibility: hidden;
}

/* De pagina-container is dekkend: de nieuwe pagina schuift over de oude
   heen en moet hem volledig afschermen, anders schijnen beide door elkaar.
   De header zelf fadet tijdens de transitie uit (hieronder), dus die heeft
   geen dekkende strook meer nodig. */
main[data-barba="container"] {
	background: var(--c-black);
}

/* Tijdens de slide draagt de binnenkomende pagina een strook van precies
   een headerhoogte boven zijn bovenrand, net zoals de gekleurde caseband
   dat al doet. Zo veegt elke pagina als een geheel door tot de bovenkant
   van de viewport, zonder zichtbare naad bij de headerzone. */
.transitie-nieuw::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: var(--header-hoogte, 120px);
	background: var(--c-black);
	/* Onder de pagina-inhoud schilderen: de gekleurde caseband trekt
	   dezelfde zone in en moet altijd over deze strook heen winnen. */
	z-index: -1;
}

/* De header fadet mee met de transitie: weg zodra transitie-bezig erop
   staat, vanzelf terug zodra de klasse eraf gaat (initAfterEnterFunctions).
   Bewust met CSS en niet met GSAP: nav.js doodt tweens op de header bij
   elke sticky-reset en zou een fade halverwege afbreken. De vertraging
   geldt alleen voor het terugkomen: de pagina landt eerst, dan pas de
   header. Het wegduiken bij de start is meteen (delay 0 hieronder). */
.site-header {
	transition: opacity 0.5s var(--cubic-default) 1.2s;
}

.transitie-bezig .site-header {
	opacity: 0;
	pointer-events: none;
	transition-delay: 0s;
}

/* De sluier onder de header (z-index komt uit transitions.js): de oude
   pagina wordt donkerder terwijl hij trager omhoog wegschuift. */
.transition {
	z-index: 100;
	pointer-events: none;
	position: fixed;
	inset: 0;
	overflow: clip;
}

.transition__dark {
	opacity: 0;
	background-color: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* =========================================================
   Werkarchief (/work/)
   ========================================================= */
.section--werkarchief {
	padding-top: clamp(60px, 9.5vw, 152px);
}

/* Expliciet Savant, zoals in het ontwerp (de herotitel op home gebruikt
   Accelerator zodra die geleverd is; deze titel blijft Savant). */
.werkarchief__titel {
	font-family: "Savant", var(--font-display);
	font-size: clamp(44px, 5.6vw, 90px);
	line-height: 1;
	max-width: 1120px;
}

.werkarchief__filterbalk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(48px, 6.4vw, 102px);
	margin-bottom: 50px;
}

.werkarchief__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(24px, 3.75vw, 60px);
}

.werkarchief__filter {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-white);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.2em;
	transition: background-size 0.55s var(--cubic-default), color var(--duration-fast);
}

.werkarchief__filter:hover,
.werkarchief__filter.is-actief {
	background-position: 0% 100%;
	background-size: 100% 1px;
}

/* Hover en actief allebei volledig groen (tekst en lijn): de groeiende
   underline maakt het verschil tussen aanwijzen en gekozen zichtbaar. */
.werkarchief__filter:hover,
.werkarchief__filter.is-actief {
	color: var(--c-green);
}

.werkarchief__leeg {
	margin-block: 60px;
	color: var(--c-grey-30);
}

/* Slotknop naar het volledige archief: dezelfde volle, subtiele balk met
   plusje als de load-more op het insights-archief (zie daar), met ruim wit
   eromheen zodat hij los van het raster staat en opvalt voor de CTA. */
.werkarchief__slot {
	margin-top: clamp(64px, 8vw, 128px);
	padding-block: clamp(28px, 4vw, 56px);
}

/* Load-more: gecentreerde regel met het grote groene plusje */
.werkarchief__meer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	margin-top: clamp(56px, 6.5vw, 104px);
	text-align: center;
	color: var(--c-white);
}

.werkarchief__meer-tekst {
	font-size: var(--fs-h5);
	line-height: 36px;
}

.werkarchief__meer-plus {
	display: inline-flex;
	color: var(--c-green);
	transition: transform 0.5s var(--cubic-default);
}

.werkarchief__meer:hover .werkarchief__meer-plus {
	transform: rotate(90deg);
}

@media (max-width: 900px) {
	.werkarchief__filterbalk {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =========================================================
   Insightsarchief: Savant-titel, leadtekst, sticky topics links en de
   kaartenlijst met load-more rechts (maat uit Figma: kolommen 353/1121
   met 30 tussenruimte, zelfde stramien als het insightsblok)
   ========================================================= */
.insights-archief__intro {
	max-width: 861px;
	margin-top: 60px;
}

.insights-archief__inner {
	display: grid;
	grid-template-columns: minmax(0, 353fr) minmax(0, 1121fr);
	gap: 30px;
	margin-top: clamp(64px, 7.4vw, 118px);
	align-items: start;
}

/* De topics blijven op desktop in beeld terwijl de lijst voorbij scrolt */
.insights-archief__zij {
	position: sticky;
	top: 130px;
}

.insights-archief__leeg {
	margin-block: 30px;
	color: var(--c-grey-30);
}

/* Load-more: kaartbrede knop onderaan de lijst; het plusje draait bij hover
   een kwartslag en wordt tijdens het laden een draaiende spinner. Dezelfde
   balk staat onderaan /work/ als link naar het volledige archief
   (.werkarchief__archiefknop, blok werk_overzicht); alleen de spinner
   hieronder is van de load-more zelf. */
.insights-archief__meer,
.werkarchief__archiefknop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 70px;
	margin-top: 30px;
	border: 1px solid var(--hairline);
	color: var(--c-white);
	transition: border-color var(--duration-fast);
}

.insights-archief__meer:hover,
.werkarchief__archiefknop:hover {
	border-color: var(--c-green);
}

.insights-archief__meer-tekst,
.werkarchief__archiefknop-tekst {
	font-size: var(--fs-h6);
	line-height: 28px;
}

.insights-archief__meer-icoon,
.werkarchief__archiefknop-plus {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	color: var(--c-green);
}

.insights-archief__meer-icoon svg,
.werkarchief__archiefknop-plus svg {
	grid-area: 1 / 1;
	transition: opacity var(--duration-fast), transform 0.5s var(--cubic-default);
}

.insights-archief__meer:hover .insights-archief__meer-plus,
.werkarchief__archiefknop:hover .werkarchief__archiefknop-plus svg {
	transform: rotate(90deg);
}

.insights-archief__meer-spinner {
	opacity: 0;
}

.insights-archief__meer.is-laden .insights-archief__meer-plus {
	opacity: 0;
}

.insights-archief__meer.is-laden .insights-archief__meer-spinner {
	opacity: 1;
	animation: sbd-spinner 0.9s linear infinite;
}

@keyframes sbd-spinner {
	to { transform: rotate(360deg); }
}

/* Actieve topmenu-pagina kleurt groen, zoals in het ontwerp */
.site-topmenu__link[aria-current="page"] {
	color: var(--c-green);
}

/* =========================================================
   Artikelen, archieven, 404 (donker thema)
   ========================================================= */
.section--artikel .entry-content {
	max-width: 74ch;
	margin-top: 1.5rem;
}

/* =========================================================
   Tekstpagina: sticky inhoudsopgave links, leestekst rechts
   ========================================================= */
.tekstpagina__kop {
	max-width: 994px;
	margin-bottom: clamp(40px, 5vw, 80px);
}

.tekstpagina__inner {
	display: grid;
	grid-template-columns: minmax(0, 353fr) minmax(0, 1121fr);
	gap: 30px;
	align-items: start;
}

.tekstpagina__inner--zonder-toc {
	grid-template-columns: 1fr;
}

.tekstpagina__zij {
	max-height: calc(100vh - 150px - var(--zwevende-cta-ruimte, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	position: sticky;
	top: 130px;
}

.toc__titel {
	margin: 0 0 24px;
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.toc__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-left: 1px solid var(--c-grey-80);
}

.toc__link {
	display: block;
	padding: 4px 0 4px 20px;
	margin-left: -1px;
	border-left: 1px solid transparent;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-grey-30);
	transition: color var(--duration-fast), border-color 0.35s var(--cubic-default);
}

.toc__link:hover {
	color: var(--c-white);
}

.toc__link.is-actief {
	color: var(--c-green);
	border-left-color: var(--c-green);
}

/* Revolver-venster bij lange inhoudsopgaven (toc.js): items buiten het
   venster vouwen dicht. Boven schuiven ze omhoog weg, onder komen ze van
   onder binnen; "Toon alles" toont de volledige lijst. */
.toc__lijst li {
	/* In het scrollkader is de lijst een flex-kolom met vaste hoogte: zonder
	   flex-shrink 0 zouden de items meekrimpen en over elkaar schuiven. */
	flex-shrink: 0;
	max-height: 120px;
	overflow: hidden;
	transition: max-height 0.4s var(--cubic-default), opacity 0.3s var(--cubic-default), transform 0.4s var(--cubic-default);
}

.toc__lijst li.is-boven,
.toc__lijst li.is-onder {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
}

.toc__lijst li.is-boven {
	transform: translateY(-12px);
}

.toc__lijst li.is-onder {
	transform: translateY(12px);
}

/* Opengeklapte lange lijst: de lijst scrolt zelf binnen een kader en loopt
   onderaan zacht weg in transparantie (mask, dus klopt op elke
   achtergrondkleur); "Toon minder" staat er altijd zichtbaar onder. */
.toc__lijst.is-scrollend {
	max-height: max(220px, calc(100vh - 340px - var(--zwevende-cta-ruimte, 0px)));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
	mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
}

/* Ruimte onder het laatste item, iets meer dan de vervaagzone: aan het eind
   van de lijst staat het laatste (actieve) item dan boven de gradient en
   oogt het niet als inactief of alsof er nog iets volgt. */
.toc__lijst.is-scrollend::after {
	content: '';
	flex: 0 0 54px;
}

.toc__meer {
	margin-top: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.toc__meer .pijl-link__pijl svg {
	transform: rotate(90deg);
	transition: transform var(--duration-fast) var(--cubic-default);
}

.toc__meer.is-open .pijl-link__pijl svg {
	transform: rotate(0deg);
}

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

@media (max-width: 900px) {
	.tekstpagina__inner {
		grid-template-columns: 1fr;
	}

	.tekstpagina__zij {
		position: static;
	}
}

/* Contentlinks krijgen het diagonale pijltje van de huisstijl */
.entry-content a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 5px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--duration-fast) var(--cubic-default);
}

.entry-content a:hover::after {
	transform: translate(2px, -2px);
}

/* Juridische en andere tekstpagina's: rustige leesopmaak */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.entry-content h2 { font-size: var(--fs-h4); line-height: 1.15; }
.entry-content h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.entry-content h4 { font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--c-grey-30); }
.entry-content h5,
.entry-content h6 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--c-grey-30); }
.entry-content h6 { font-size: var(--fs-small); line-height: var(--lh-small); text-transform: uppercase; letter-spacing: 0.06em; }

.entry-content a {
	color: var(--c-green);
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 1.2em;
}

.entry-content li {
	margin-bottom: 0.35em;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: var(--fs-body);
}

.entry-content td,
.entry-content th {
	border: 1px solid var(--c-grey-80);
	padding: 0.5em 0.75em;
	text-align: left;
}

.entry-meta {
	color: var(--c-grey-30);
	font-size: var(--fs-small);
}

/* =========================================================
   Insight-detail: titel (Jekyll Pro 64/70), lead + Google-badge + auteur
   links naast het herobeeld, daaronder de sticky inhoudsopgave naast de
   leestekst (maat uit Figma: wrap 1250, kolommen 482/740 met 30
   tussenruimte)
   ========================================================= */
.insight-single__wrap {
	max-width: 1250px;
	margin-inline: auto;
}

/* De artikeltitel is Jekyll Pro 64/70 (H2-stijl), niet het displayfont */
.insight-single__titel {
	font-family: var(--font-ui);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.insight-single__boven {
	display: grid;
	grid-template-columns: minmax(0, 482fr) minmax(0, 740fr);
	gap: 30px;
	align-items: start;
	margin-top: 60px;
}

.insight-single__hero {
	margin: 10px 0 0;
}

.insight-single__hero img {
	width: 100%;
	height: auto;
	aspect-ratio: 740 / 470;
	object-fit: cover;
}

.insight-single__google {
	margin-top: 30px;
}

/* In Figma staat de badge hier net iets groter dan in de footer */
.insight-single .google-badge__logo {
	width: 82px;
	height: 27px;
}

.insight-single__auteur {
	margin-top: 50px;
}

.insight-single__onder {
	display: grid;
	grid-template-columns: minmax(0, 482fr) minmax(0, 740fr);
	gap: 30px;
	align-items: start;
	margin-top: 90px;
}

.insight-single__onder--zonder-toc {
	grid-template-columns: 1fr;
	max-width: 740px;
}

.insight-single__zij {
	position: sticky;
	top: 130px;
	/* Lange inhoudsopgaven (17+ koppen) pasten niet in beeld en het restant
	   was onbereikbaar: de zijkolom scrolt nu binnen zijn eigen kader. */
	max-height: calc(100vh - 150px - var(--zwevende-cta-ruimte, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Inhoudsopgave: witte items 18/34 zonder lijn, subkoppen springen in, het
   actieve item kleurt groen met het diagonale pijltje ervoor, en daarboven
   de terug-naar-boven knop (wit 20%, signatuurhoeken). */
.insight-toc__top {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 20px;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	background: rgba(255, 255, 255, 0.2);
	color: var(--c-white);
	transition: background var(--duration-fast), color var(--duration-fast);
}

.insight-toc__top:hover {
	background: var(--c-green);
	color: var(--c-black);
}

/* Het pijlglyph wijst naar rechts (Figma Arrow/Right) en wordt hier omhoog
   gedraaid; bij hover wipt hij een tikje omhoog langs zijn kijkrichting. */
.insight-toc__top svg {
	transform: rotate(-90deg);
	transition: transform var(--duration-fast) var(--cubic-default);
}

.insight-toc__top:hover svg {
	transform: rotate(-90deg) translateX(2px);
}

.insight-toc .toc__titel {
	margin: 0 0 20px;
	color: var(--c-white);
}

.insight-toc .toc__lijst {
	gap: 0;
	border-left: 0;
}

.insight-toc .toc__link {
	display: flex;
	align-items: center;
	margin-left: 0;
	border-left: 0;
	padding: 0;
	line-height: 34px;
	color: var(--c-white);
}

.insight-toc .toc__link--klein {
	padding-left: 20px;
}

.insight-toc .toc__pijl {
	flex: 0 0 auto;
	display: inline-flex;
	width: 0;
	margin-right: 0;
	overflow: hidden;
	opacity: 0;
	color: var(--c-green);
	transition: width 0.3s var(--cubic-default), margin 0.3s var(--cubic-default), opacity 0.3s var(--cubic-default);
}

.insight-toc .toc__link:hover,
.insight-toc .toc__link.is-actief {
	color: var(--c-green);
	border-left: 0;
}

.insight-toc .toc__link.is-actief .toc__pijl,
.insight-toc .toc__link:hover .toc__pijl {
	width: 10px;
	margin-right: 10px;
	opacity: 1;
}

/* Leestekst: koppen 44/40 en 34/36 in wit met het vaste 20px-ritme uit
   Figma, inline links onderstreept groen zonder pijltje, beelden op
   kolombreedte. De kop van de sectie die in beeld is kleurt groen mee met
   de inhoudsopgave (scrollspy in toc.js). */
/* anywhere (niet break-word): alleen anywhere telt mee in de min-content
   van de mobiele 1fr-kolom, anders rekt een lang onafbreekbaar "woord"
   (codevoorbeeld, bestandspad) de hele kolom de viewport uit. */
.insight-single .entry-content {
	overflow-wrap: anywhere;
}

.insight-single .entry-content > * {
	margin: 0 0 20px;
}

.insight-single .entry-content > *:last-child {
	margin-bottom: 0;
}

.insight-single .entry-content h2,
.insight-single .entry-content h3 {
	color: var(--c-white);
	transition: color 0.45s var(--cubic-default);
}

.insight-single .entry-content h2 {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.insight-single .entry-content h3 {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}

.insight-single .entry-content h2.is-actief,
.insight-single .entry-content h3.is-actief {
	color: var(--c-green);
}

/* Links in de leestekst volgen het site-brede underline-systeem (groen,
   geanimeerde lijn op hover): geen eigen text-decoration ernaast, dat gaf
   een dubbele underline. */
.insight-single .entry-content a::after {
	content: none;
}

/* Beelden in de leestekst: standaard gestrekt over de kolombreedte (zoals in
   Figma). Kiest de redacteur in de editor een uitlijning, dan wint die: links
   of rechts op natuurlijke breedte met omlopende tekst, of gecentreerd. */
.insight-single .entry-content img {
	width: 100%;
	height: auto;
}

.insight-single .entry-content img.alignleft,
.insight-single .entry-content img.alignright,
.insight-single .entry-content img.aligncenter {
	width: auto;
	max-width: min(100%, 48%);
}

.insight-single .entry-content img.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

.insight-single .entry-content img.alignright {
	float: right;
	margin: 0 0 20px 20px;
}

.insight-single .entry-content img.aligncenter {
	display: block;
	max-width: 100%;
	margin-inline: auto;
}

/* Zwevende beelden niet onder de volgende kop laten doorlopen */
.insight-single .entry-content h2,
.insight-single .entry-content h3 {
	clear: both;
}

.insight-single .entry-content figure {
	margin: 0 0 20px;
}

.entry-hero {
	margin: 1.5rem 0;
}

.archief__item {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--c-grey-80);
}

.archief__titel a:hover {
	color: var(--c-green);
}

/* =========================================================
   404-minigame: katapult (Osmo) in de huisstijl. De cijfers van
   de 404 en de vliegen zijn doelwitten; minigame.js stuurt alles
   aan via de data-minigame-attributen. Zonder JS of met
   prefers-reduced-motion verdwijnen de spelonderdelen en toont
   .minigame__fallback de gewone 404-tekst.
   ========================================================= */
.minigame {
	position: relative;
	overflow: hidden;
	height: calc(100svh - 120px);
	min-height: 34em;
}

.minigame__center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 100%;
	padding-inline: var(--gutter);
	-webkit-user-select: none;
	user-select: none;
}

.minigame__eyebrow {
	margin: 0 0 clamp(12px, 2.5vh, 28px);
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-sage);
	text-align: center;
}

.minigame__h1 {
	display: flex;
	justify-content: center;
	pointer-events: none;
	font-family: var(--font-display);
	font-size: min(22.5vw, 34svh);
	line-height: 0.85;
	color: var(--c-white);
}

.minigame__fallback {
	display: none;
	flex-flow: column;
	align-items: center;
	margin-top: clamp(16px, 3vh, 32px);
	max-width: 48ch;
	text-align: center;
}

.minigame__fallback .buttons {
	justify-content: center;
	margin-top: 20px;
}

html:not(.js) .minigame__fallback {
	display: flex;
}

html:not(.js) .minigame__controls,
html:not(.js) .minigame__fly {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.minigame__fallback {
		display: flex;
	}

	.minigame__controls,
	.minigame__fly {
		display: none;
	}
}

.minigame__controls {
	position: absolute;
	left: 0;
	bottom: clamp(96px, 16vh, 180px);
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	transition: opacity var(--duration-normal) var(--cubic-default),
		visibility var(--duration-normal) var(--cubic-default);
}

.minigame:has([data-minigame-status="finished"]) .minigame__controls {
	opacity: 0;
	visibility: hidden;
}

.minigame__pull {
	position: absolute;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	cursor: grab;
	touch-action: none;
	will-change: transform;
}

.minigame__pull-hand {
	position: relative;
	width: 40px;
	pointer-events: none;
}

.minigame__pull-tekst {
	position: absolute;
	bottom: 0;
	margin: 0;
	pointer-events: none;
	font-size: var(--fs-subtitle);
	font-weight: 700;
	letter-spacing: var(--ls-subtitle);
	text-transform: uppercase;
	line-height: 1;
	color: var(--text-muted);
}

.minigame__raket-top {
	position: absolute;
	width: 34px;
	display: none;
	transform: translate(0, -19px);
}

.minigame__pull.is--drag .minigame__raket-top {
	display: block;
}

.minigame__raket {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 120px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
}

.minigame__raket-svg {
	position: absolute;
	width: 150%;
	max-width: none;
}

/* De elastiek: een herhalend groen streepje, getekend vanuit de raket. */
.minigame__line {
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	opacity: 0;
	pointer-events: none;
	transform-origin: 0;
	will-change: transform;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2'%3E%3Crect width='6' height='2' fill='%2300ffc7'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: 0 0;
	background-size: 12px 2px;
}

.minigame__fly {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 54px;
	height: 54px;
	overflow: hidden;
}

.minigame__fly-svg {
	position: absolute;
	top: -15%;
	width: 120%;
	max-width: none;
}

.minigame__score {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

.minigame__score-screen {
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 12px;
	max-width: min(560px, calc(100vw - 32px));
	padding: clamp(32px, 5vw, 48px);
	text-align: center;
	pointer-events: auto;
	background: var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(32px) rotate(0.001deg) scale(0.9);
	transition: opacity var(--duration-normal) var(--cubic-default),
		visibility var(--duration-normal) var(--cubic-default),
		transform var(--duration-normal) var(--cubic-default);
}

.minigame__score[data-minigame-status="finished"] .minigame__score-screen {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) rotate(0.001deg) scale(1);
}

.minigame__score-icoon {
	width: 48px;
}

.minigame__score-kop {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}

.minigame__score-tekst {
	margin: 0;
	color: var(--text-muted);
}

.minigame__score-screen .buttons {
	justify-content: center;
	margin-top: 12px;
}

.minigame__dot {
	position: absolute;
	width: 32px;
	height: 32px;
	pointer-events: none;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
}

@media (max-width: 991px) {
	.minigame__h1 {
		font-size: min(38vw, 30svh);
	}
}

@media (max-width: 767px) {
	.minigame {
		min-height: 30em;
	}

	.minigame__controls {
		bottom: clamp(80px, 14vh, 140px);
	}

	.minigame__fly {
		width: 44px;
		height: 44px;
	}

	.minigame__raket {
		width: 60px;
		height: 90px;
	}
}

/* =========================================================
   Verborgen blok: balk voor ingelogde redacteuren
   ========================================================= */
.sb-hidden-block {
	position: relative;
	outline: 2px dashed #f0b429;
	outline-offset: -2px;
}

.sb-hidden-block__notice {
	margin: 0;
	padding: 0.6rem 1rem;
	background: #f0b429;
	color: var(--c-black);
	font-size: var(--fs-small);
	font-weight: 600;
	text-align: center;
}

/* =========================================================
   Gravity Forms in huisstijl (gravity-theme markup, donker).
   Maat uit het FORM-design: velden op grey 80 met hoeken 8px, tekst
   18/26, placeholder op halve dekking met de asterisk erin, focus een
   groene rand, fouten een rand in #ff4000. Labels zijn onzichtbaar
   (screenreaders houden ze); de placeholder doet het werk.
   ========================================================= */
:root {
	--c-fout: #ff4000;
}

.gform_wrapper.gravity-theme {
	max-width: 866px;
}

.gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 20px;
	grid-column-gap: 30px;
}

.gform_wrapper.gravity-theme .gfield_label:not(.gform-field-label--type-inline) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	/* appearance none: geen iOS-schaduwtjes of Safari-eigen afronding; de
	   tekstgrootte blijft 18px, dus iOS zoomt niet in bij focus (dat doet
	   hij alleen onder de 16px). */
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 60px;
	padding: 16px 30px;
	border: 1px solid transparent;
	border-radius: var(--radius-hoek-s);
	background: var(--c-grey-80);
	color: var(--c-white);
	caret-color: var(--c-green);
	font-family: var(--font-ui);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	transition: border-color var(--duration-fast) var(--cubic-default);
}

/* Autofill (Chrome/Safari): geen gele of witte vlakken; het veld houdt
   gewoon zijn eigen kleuren. De inset-schaduw overschildert de browserkleur
   en de trage transitie voorkomt dat hij alsnog even opflitst. */
.gform_wrapper.gravity-theme input:-webkit-autofill,
.gform_wrapper.gravity-theme input:-webkit-autofill:hover,
.gform_wrapper.gravity-theme input:-webkit-autofill:focus,
.gform_wrapper.gravity-theme textarea:-webkit-autofill,
.gform_wrapper.gravity-theme select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--c-grey-80) inset;
	-webkit-text-fill-color: var(--c-white);
	caret-color: var(--c-white);
	transition: background-color 99999s ease-out;
}

.gform_wrapper.gravity-theme input:autofill {
	box-shadow: 0 0 0 1000px var(--c-grey-80) inset;
}

.gform_wrapper.gravity-theme ::placeholder {
	color: var(--c-white);
	opacity: 0.5;
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	border-color: var(--c-green);
	outline: none;
}

.gform_wrapper.gravity-theme textarea {
	min-height: 202px;
	resize: vertical;
}

/* Select: eigen witte chevron rechts, halve dekking tot er gekozen is */
.gform_wrapper.gravity-theme select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 60px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 14px 8px;
}

.gform_wrapper.gravity-theme select:invalid,
.gform_wrapper.gravity-theme select:has(option[value=""]:checked) {
	color: rgba(255, 255, 255, 0.5);
}

/* Toestemming: klein wit kader, aangevinkt brandgroen met zwart vinkje */
.gform_wrapper.gravity-theme .ginput_container_consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.gform_wrapper.gravity-theme input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	border: 1px solid var(--c-white);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	transition: background var(--duration-fast), border-color var(--duration-fast);
}

.gform_wrapper.gravity-theme input[type="checkbox"]:checked {
	background: var(--c-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.4' stroke='%23151515' stroke-width='2'/%3E%3C/svg%3E") center / 10px 8px no-repeat;
	border-color: var(--c-green);
}

.gform_wrapper.gravity-theme .gfield_consent_label {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--c-white);
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gfield_consent_label a {
	color: var(--c-green);
}

/* Fouten: rand in signaalrood op het veld, veldmelding klein eronder */
.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: var(--c-fout);
}

.gform_wrapper.gravity-theme .gfield_error input:focus,
.gform_wrapper.gravity-theme .gfield_error select:focus,
.gform_wrapper.gravity-theme .gfield_error textarea:focus {
	border-color: var(--c-green);
}

/* !important: de eigen stylesheet van Gravity Forms laadt na app.css en
   zet hier anders zijn lichte meldingsvlak overheen */
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	margin-top: 8px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--c-fout) !important;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* Labels en de consent-tekst blijven wit, ook in de foutstaat */
.gform_wrapper.gravity-theme .gfield_error .gfield_label,
.gform_wrapper.gravity-theme .gfield_error legend,
.gform_wrapper.gravity-theme .gfield_error .gfield_consent_label,
.gform_wrapper.gravity-theme .gfield_error .gfield_consent_label a {
	color: var(--c-white) !important;
}

.gform_wrapper.gravity-theme .gfield_error .gfield_consent_label a {
	color: var(--c-green) !important;
}

.gform_wrapper .gform_validation_errors {
	margin: 0 0 30px !important;
	padding: 14px 20px !important;
	border: 0 !important;
	border-left: 2px solid var(--c-fout) !important;
	border-radius: 0 !important;
	background: var(--c-grey-80) !important;
	box-shadow: none !important;
}

.gform_wrapper .gform_submission_error {
	margin: 0 !important;
	font-family: var(--font-ui);
	font-size: var(--fs-body) !important;
	line-height: var(--lh-body);
	font-weight: 400 !important;
	color: var(--c-white) !important;
}

.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors .gform_submission_error .gform-icon {
	display: none;
}

/* Bevestiging na verzenden in de leadstijl */
.gform_confirmation_message {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-white);
}

.gform_wrapper.gravity-theme .gform_footer {
	margin-top: 30px;
	padding: 0;
}

/* Verplicht-sterretje zit al in de placeholder; het losse teken en de
   uitlegregel erboven zijn dubbelop */
.gform_wrapper.gravity-theme .gfield_required,
.gform_wrapper.gravity-theme .gform_required_legend {
	display: none;
}

/* =========================================================
   Parallax-kader: clipt het opgeschaalde beeld dat via
   parallax.js traag meeschuift met de scroll
   ========================================================= */
.parallax-kader {
	overflow: clip;
}

.parallax-kader :is(img, video) {
	will-change: transform;
}

/* =========================================================
   Tekst naast beeld: twee gelijke kolommen, de keuze beeld--links of
   beeld--rechts (uit het blok) bepaalt aan welke kant het beeld staat
   ========================================================= */
.tekst-media__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 47px);
	align-items: center;
}

.section--tekst-media.beeld--links .tekst-media__tekst {
	order: 2;
}

.section--tekst-media.beeld--links .tekst-media__beeld {
	order: 1;
}

.tekst-media__kop {
	margin: 0 0 24px;
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.tekst-media__body :is(p, ul, ol) {
	margin: 0 0 1em;
}

.tekst-media__body :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

.tekst-media__beeld {
	margin: 0;
}

.tekst-media__beeld-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
}

@media (max-width: 900px) {
	/* Onder elkaar, altijd eerst de tekst; de kant-keuze is hier zonder
	   kolommen niet meer van toepassing */
	.tekst-media__inner {
		grid-template-columns: 1fr;
	}

	.section--tekst-media.beeld--links .tekst-media__tekst,
	.section--tekst-media.beeld--links .tekst-media__beeld {
		order: 0;
	}
}

/* =========================================================
   About-blokken: zijkop met tekst, team, statistieken
   ========================================================= */
.zijkop-tekst__inner,
.team__inner,
.tabel__inner,
.stappen__inner,
.faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 719fr) minmax(0, 738fr);
	gap: clamp(24px, 3vw, 47px);
	align-items: start;
}

.zijkop-tekst__zij,
.team__zij,
.tabel__zij,
.stappen__zij,
.faq__kop {
	padding-left: clamp(0px, 17vw, 255px);
	/* De kop blijft staan terwijl de rechterkolom doorscrolt; de offset
	   houdt hem vrij van de sticky header (zelfde als de inhoudsopgave). */
	position: sticky;
	top: 130px;
	align-self: start;
}

/* Alle zijkoppen (kop links, inhoud rechts) zijn even groot: 34px (wens
   Rene, 2026-11-04; de teamkop en de "grote" zijkop waren 44px). Over
   twee regels wat strakker dan de stijlgids (34/36), ook op verzoek. */
.zijkop-tekst__kop,
.team__kop,
.tabel__kop,
.stappen__kop,
.faq__kop {
	margin: 0;
	font-size: var(--fs-h5);
	line-height: 1;
	font-weight: 400;
}

/* Intro met auteur (servicepagina's). Zelfde kolommen en gap als
   .hero__boven, zodat de auteur recht onder de zijkolom van de hero staat
   (wens Rene). */
.intro-auteur__grid {
	display: grid;
	grid-template-columns: minmax(0, 994fr) minmax(0, 354fr);
	gap: clamp(32px, 8vw, 156px);
	align-items: start;
}

.intro-auteur__tekst {
	max-width: 883px;
	font-size: var(--fs-h5);
	line-height: 1.235;
}

.intro-auteur__tekst p {
	margin: 0 0 1em;
}

.intro-auteur__tekst p:last-child {
	margin-bottom: 0;
}

/* Zijkolom: auteur met de pijl-link er direct onder, links uitgelijnd op
   de avatar (wens Rene: de link hing eerst rechtsonder, regels lager). */
.intro-auteur__zij {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2vw, 28px);
}

.intro-auteur__knop {
	display: flex;
}

/* Tabel met twee of drie kolommen. Het aantal komt als modifier op de
   sectie (tabel--2 / tabel--3, uit het veld kolommen) en de kolomverdeling
   gaat via een custom property de grid in, zodat de mobiele regel verderop
   (1fr) niet op specificiteit hoeft te winnen. Drie kolommen zijn gelijk;
   bij twee is de eerste kolom een derde en de tweede twee derde, want links
   staat een term van een paar woorden en rechts de langere uitleg. */
.tabel--2 {
	--tabel-grid: minmax(0, 1fr) minmax(0, 2fr);
}

.tabel__rij {
	display: grid;
	grid-template-columns: var(--tabel-grid, repeat(3, minmax(0, 1fr)));
	gap: 30px;
	border-top: 1px solid var(--c-grey-80);
	padding: 20px 0 26px;
}

.tabel__rij--koppen {
	border-top: 0;
	padding: 0 0 20px;
}

.tabel__data {
	border-bottom: 1px solid var(--c-grey-80);
}

.tabel__kolomkop {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.tabel__cel {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.tabel__cel p {
	margin: 0;
}

/* Kolomkop per cel: alleen op mobiel, waar de kopregel wegvalt */
.tabel__label {
	display: none;
}

/* Knoppen onder de kolommen: zelfde kolomverdeling als de rijen, onder de
   slotlijn van de tabel. Meer knoppen onder één kolom staan onder elkaar. */
.tabel__rij--knoppen {
	border-top: 0;
	padding: clamp(24px, 2.5vw, 32px) 0 0;
}

.tabel__knoppen {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.section--bg-wit .tabel__rij,
.section--bg-wit .tabel__data {
	border-color: #dcdcdc;
}

/* In een case (Casekleur) staan lijnen en kolomkoppen in de tekstkleur
   van het kleurthema, getemperd: de vaste grijzen van de zwarte site
   werden modderig op een gekleurde case (NS-blauw, wens Rene). Werkt ook
   op case--licht, want currentColor is daar donker. */
.section--bg-case .tabel__rij,
.section--bg-case .tabel__data {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
}

.section--bg-case .tabel__kolomkop {
	color: color-mix(in srgb, currentColor 70%, transparent);
}

/* Stappen (genummerd proces). Drie staten uit tellers.js: is-gedaan (boven
   de actieve stap: zwarte cirkel met groen cijfer, groene lijn), is-actief
   (groen gevulde cirkel met ring, de lijn eronder loopt groen vol) en de
   rest (gedimd, dunne grijze lijn). Zo leest de tijdlijn als voortgang
   terwijl je scrolt. Geen gekleurd vlak achter de actieve stap (wens Rene). */
.stappen__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: stap;
}

.stappen__stap {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding-bottom: 26px;
	opacity: 0.4;
	/* Rustig: de stappen lopen een voor een door (tellers.js), de overgang
	   zelf mag dan ook de tijd nemen. */
	transition: opacity 0.7s var(--cubic-default);
}

.stappen__stap.is-gedaan {
	opacity: 0.8;
}

.stappen__stap.is-actief {
	opacity: 1;
}

.stappen__stap:last-child {
	padding-bottom: 0;
}

.stappen__cirkel {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: 1;
	transition: background-color 0.7s var(--cubic-default),
		border-color 0.7s var(--cubic-default),
		color 0.7s var(--cubic-default),
		outline-color 0.7s var(--cubic-default);
}

/* Afgerond: zwarte cirkel met groen cijfer (de secundaire knop); op een
   donkere sectie donkergrijs, anders valt de cirkel weg */
.stappen__stap.is-gedaan .stappen__cirkel {
	background-color: var(--c-black);
	border-color: var(--c-black);
	color: var(--c-green);
}

.section--donker .stappen__stap.is-gedaan .stappen__cirkel {
	background-color: var(--c-grey-80);
	border-color: var(--c-grey-80);
}

/* Actief: groen gevuld, zwart cijfer, groene ring op afstand */
.stappen__stap.is-actief .stappen__cirkel {
	background-color: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-black);
	outline: 1px solid var(--c-green);
	outline-offset: 4px;
}

/* Verbindingslijn: grijs dun; onder een afgeronde stap groen, onder de
   actieve stap loopt het groen van boven naar beneden vol */
.stappen__stap:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 22px;
	top: 52px;
	bottom: 8px;
	width: 1px;
	background-color: currentColor;
	background-image: linear-gradient(var(--c-green), var(--c-green));
	background-repeat: no-repeat;
	background-size: 100% 0%;
	background-position: top;
	opacity: 0.3;
	transition: background-size 0.9s var(--cubic-default), opacity 0.7s var(--cubic-default);
}

.stappen__stap.is-gedaan:not(:last-child)::after {
	background-size: 100% 100%;
	opacity: 1;
}

.stappen__stap.is-actief:not(:last-child)::after {
	background-size: 100% 55%;
	opacity: 1;
}

.stappen__titel {
	margin: 5px 0 0;
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	font-weight: 400;
	transition: color 0.7s var(--cubic-default);
}

/* Op donker mag de actieve titel groen; op wit niet (contrast) */
.section--donker .stappen__stap.is-actief .stappen__titel {
	color: var(--c-green);
}

.stappen__tekst {
	margin-top: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	transition: opacity 0.7s var(--cubic-default);
}

/* Afgeronde stap: de titel houdt zijn 0.8, de tekst zakt terug naar de
   dimming van de stappen die nog komen (0.8 x 0.5 = 0.4). Wens Nick. */
.stappen__stap.is-gedaan .stappen__tekst {
	opacity: 0.5;
}

.stappen__tekst p {
	margin: 0;
}

/* FAQ: vraag/antwoord-rijen met plusje, zijkop links */
.faq__intro,
.faq__lijst,
.faq__beeld,
.faq__inner > .buttons {
	grid-column: 2;
}

/* Optioneel beeld in de rechterkolom (blokveld), boven of onder de vragen. */
.faq__beeld {
	margin: 0;
}

.faq__beeld--boven { margin-bottom: 24px; }
.faq__beeld--onder { margin-top: 24px; }

.faq__beeld-img {
	width: 100%;
	height: auto;
	display: block;
}

/* Beelden in een antwoord (Media toevoegen in de editor). */
.faq__antwoord img {
	max-width: 100%;
	height: auto;
	margin: 16px 0;
}

.faq__antwoord figure,
.faq__antwoord .wp-caption {
	margin: 16px 0;
	max-width: 100%;
}

.faq__antwoord figure img,
.faq__antwoord .wp-caption img {
	margin: 0;
}

.faq__antwoord figcaption,
.faq__antwoord .wp-caption-text {
	margin-top: 8px;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.faq__item {
	background: rgba(255, 255, 255, 0.08);
	margin-bottom: 10px;
	transition: background var(--duration-fast);
}

.section--bg-wit .faq__item {
	background: #eaeaea;
}

.section--bg-wit .faq__item[open],
.section--bg-wit .faq__item.is-open {
	background: rgba(234, 234, 234, 0.5);
}

/* Het antwoord clipt tijdens de hoogte-animatie (faq.js) */
.faq__antwoord {
	overflow: clip;
}

.faq__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 24px;
	/* Een tik onder h6 (26px): 22px op desktop, 20px op mobiel (Nick, 2026-09-22). */
	font-size: clamp(20px, 1.4vw, 22px);
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.faq__vraag::-webkit-details-marker {
	display: none;
}

.faq__vraag::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 1v18M1 10h18' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 1v18M1 10h18' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.35s var(--cubic-default);
}

.faq__item[open] .faq__vraag::after,
.faq__item.is-open .faq__vraag::after {
	transform: rotate(45deg);
}

/* Open vraag: titel (en plusje) in brand green (Nick, 2026-09-22). Op een
   groene of witte sectie is groen onleesbaar, daar blijft hij zwart. */
.faq__vraag {
	transition: color var(--duration-fast);
}

.faq__item[open] .faq__vraag,
.faq__item.is-open .faq__vraag {
	color: var(--c-green);
}

.section--bg-accent .faq__item[open] .faq__vraag,
.section--bg-accent .faq__item.is-open .faq__vraag,
.section--bg-wit .faq__item[open] .faq__vraag,
.section--bg-wit .faq__item.is-open .faq__vraag {
	color: var(--c-black);
}

/* Zonder JS stuurt [open] de stijlen; met faq.js neemt is-open het over,
   zodat plusje en tint niet wachten tot de sluit-animatie klaar is. */
.faq__item[open]:not(.is-open)[data-faq-init] .faq__vraag::after {
	transform: none;
}

.faq__item[open]:not(.is-open)[data-faq-init] .faq__vraag {
	color: inherit;
}

.section--bg-wit .faq__item[open]:not(.is-open)[data-faq-init] {
	background: #eaeaea;
}

/* De buitenste wrapper animeert (hoogte), de binnenwrapper draagt de
   padding: zo klopt de auto-hoogtemeting van GSAP altijd en verspringt er
   niets aan het einde van de animatie. */
.faq__antwoord {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.faq__antwoord-binnen {
	padding: 0 24px 24px;
}

.faq__antwoord p {
	margin: 0 0 1em;
}

.faq__antwoord p:last-child {
	margin-bottom: 0;
}

/* Tekstlinks in vraag en intro volgen de generieke editorlink-stijl
   (tekstkleur met underline, zie de regel bij de linkstijlen). */

/* Overloop: de bovenste helft van de sectie houdt de gekozen achtergrond,
   de onderste helft is zwart. De sectiepadding is symmetrisch, dus de
   splitsing valt precies op het midden van het CTA-vlak (zoals in Figma,
   waar het groene vlak half over de donkere zone valt). */
.section--overloop {
	background: linear-gradient(180deg, var(--overloop-boven, var(--c-black)) 50%, var(--c-black) 50%);
}

.section--bg-wit.section--overloop {
	--overloop-boven: var(--c-white);
}

.section--bg-donkergrijs.section--overloop {
	--overloop-boven: var(--c-grey-80);
}

.section--bg-accent.section--overloop {
	--overloop-boven: var(--c-green);
}

/* Referenties op een witte sectie: donkere tekst, kaartgradient bijna weg */
.section--bg-wit .ref-kaart {
	color: var(--c-black);
}

.section--bg-wit .ref-kaart::before {
	opacity: 0.1;
}

.zijkop-tekst__link {
	margin-top: 26px;
}

.zijkop-tekst__lead + .zijkop-tekst__tekst {
	margin-top: 30px;
}

.zijkop-tekst__tekst :is(p, ul, ol) {
	margin: 0 0 1em;
}

.zijkop-tekst__tekst :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

/* Kop 3 in de lopende tekst wordt de groene tussenkop uit het design,
   met lucht boven de kop zodat hij bij zijn eigen alinea hoort */
.zijkop-tekst__tekst h3 {
	margin: 2em 0 0.5em;
	font-size: var(--fs-h6);
	line-height: 28px;
	font-weight: 400;
	color: var(--c-green);
}

.zijkop-tekst__tekst h3:first-child {
	margin-top: 0;
}

.zijkop-tekst__tekst a {
	color: var(--c-green);
}

/* Team */
.team__leden {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
}

.teamlid__foto {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.teamlid__beeld {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 354 / 333;
	object-fit: cover;
}

.teamlid__naam {
	margin: 24px 0 0;
	font-size: var(--fs-h6);
	line-height: 28px;
	font-weight: 400;
}

.teamlid__functie {
	margin: 4px 0 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-grey-30);
}

.teamlid__bio {
	margin-top: 24px;
}

.teamlid__bio p {
	margin: 0 0 1em;
}

.teamlid__bio p:last-child {
	margin-bottom: 0;
}

.teamlid__knop {
	margin-top: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-white);
	font: inherit;
	cursor: pointer;
}

/* Statistieken: rijen van drie met hairlines over de volle breedte */
.statistieken__lijst {
	margin-left: clamp(0px, 17vw, 255px);
	border-bottom: 1px solid var(--c-grey-80);
}

.statistieken__rij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	border-top: 1px solid var(--c-grey-80);
}

.statistieken__item {
	padding: 40px 0;
}

.statistieken__getal {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(56px, 5.6vw, 90px);
	line-height: 1;
	color: var(--c-white);
}

.statistieken__suffix {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-grey-30);
}

.statistieken__tekst {
	margin-top: clamp(24px, 2.6vw, 40px);
	max-width: 225px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.statistieken__tekst a {
	color: var(--c-green);
}

.statistieken__tekst p {
	margin: 0;
}

/* =========================================================
   Profiel-overlay (teamleden): fullscreen, gestaggerd via
   profiel.js; scrolt zelf zonder zichtbare scrollbar
   ========================================================= */
html.profiel-open {
	overflow: hidden;
}

.profiel {
	position: fixed;
	inset: 0;
	z-index: 90;
}

.profiel__achtergrond {
	position: absolute;
	inset: 0;
	background: var(--c-black);
}

.profiel__scroller {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.profiel__scroller::-webkit-scrollbar {
	display: none;
}

.profiel__inner {
	display: grid;
	grid-template-columns: minmax(0, 354px) minmax(0, 610px);
	gap: 30px;
	align-items: start;
	margin-left: clamp(0px, 17vw, 255px);
	padding-top: clamp(90px, 12vw, 193px);
	padding-bottom: clamp(60px, 8vw, 120px);
}

.profiel__foto {
	margin: 0;
}

.profiel__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 354 / 333;
	object-fit: cover;
}

.profiel__connect-kop {
	margin: 25px 0 0;
	font-size: var(--fs-h6);
	line-height: 28px;
}

.profiel__contact {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.profiel__contact li {
	border-top: 1px solid var(--c-grey-80);
}

.profiel__contact li:last-child {
	border-bottom: 1px solid var(--c-grey-80);
}

.profiel__contact-link {
	display: block;
	font-size: var(--fs-body);
	line-height: 36px;
	color: var(--c-green);
}

.profiel__contact-link:hover {
	color: var(--c-white);
}

.profiel__contact-link--neutraal {
	color: var(--c-white);
}

.profiel__contact-link--neutraal:hover {
	color: var(--c-green);
}

.profiel__naam {
	margin: 0;
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: 400;
}

.profiel__functie {
	margin: 10px 0 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-grey-30);
}

.profiel__lead {
	margin-top: clamp(24px, 2.6vw, 40px);
}

.profiel__tekst {
	margin-top: 26px;
}

.profiel__tekst :is(p, ul, ol) {
	margin: 0 0 1em;
}

.profiel__tekst :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

.profiel__tekst a {
	color: var(--c-green);
}

/* Sluitknop: het geopende hamburgericoon (haken naar buiten, minnetje) */
.profiel__sluit {
	position: absolute;
	top: clamp(24px, 3vw, 42px);
	right: clamp(16px, 2.6vw, 40px);
	z-index: 2;
	padding: 8px;
	border: 0;
	background: none;
	cursor: pointer;
}

.profiel__sluit .site-burger__haak--boven {
	transform: translate(9px, -7px) rotate(180deg);
}

.profiel__sluit .site-burger__haak--onder {
	transform: translate(-9px, 7px) rotate(180deg);
}

.profiel__sluit:hover .site-burger__haak {
	stroke: var(--c-white);
}

/* ---- About responsief ---- */
@media (max-width: 900px) {
	.zijkop-tekst__inner,
	.team__inner,
	.tabel__inner,
	.stappen__inner,
	.faq__inner,
	.intro-auteur__grid {
		grid-template-columns: 1fr;
	}

	.zijkop-tekst__zij,
	.team__zij,
	.tabel__zij,
	.stappen__zij,
	.faq__kop {
		padding-left: 0;
		position: static;
	}

	.faq__intro,
	.faq__lijst,
	.faq__beeld,
	.faq__inner > .buttons {
		grid-column: 1;
	}

	/* Mobiel: elke rij een kaartje. De eerste cel is de titel van de rij,
	   elke volgende cel krijgt zijn kolomkop als klein grijs label erboven,
	   zodat de waarden context houden zonder de kopregel (wens Rene). */
	.tabel__rij {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.tabel__rij--koppen {
		display: none;
	}

	.tabel__cel:first-child {
		font-size: var(--fs-lead);
		line-height: var(--lh-lead);
	}

	.tabel__label {
		display: block;
		margin-bottom: 4px;
		font-size: var(--fs-small);
		line-height: var(--lh-small);
		color: var(--c-grey-30);
	}

	.section--bg-wit .tabel__label,
	.section--bg-accent .tabel__label {
		color: var(--c-grey-60);
	}

	.section--bg-case .tabel__label {
		color: color-mix(in srgb, currentColor 70%, transparent);
	}

	/* Knoppen onder de tabel gewoon onder elkaar */
	.tabel__rij--knoppen {
		gap: 12px;
	}

	.tabel__knoppen:not(:has(.button)) {
		display: none;
	}

	.statistieken__lijst {
		margin-left: 0;
	}

	.statistieken__rij {
		grid-template-columns: 1fr;
		gap: 0;
		border-top: 0;
	}

	.statistieken__rij .statistieken__item {
		border-top: 1px solid var(--c-grey-80);
		padding: 24px 0;
	}

	.profiel__inner {
		grid-template-columns: 1fr;
		margin-left: 0;
		padding-top: 120px;
	}

	/* Mobiel: het profiel schuift als paneel van rechts in (profiel.js),
	   met een schaduwrand; vegen naar rechts sluit. */
	.profiel {
		box-shadow: -24px 0 48px rgba(0, 0, 0, 0.35);
		touch-action: pan-y;
	}
}

@media (max-width: 700px) {
	.team__leden {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Casepagina (projectdetail): kleurthema per project via
   --case-hoofd / --case-actie / --case-donker (single-project.php)
   ========================================================= */
.case {
	--header-hoogte: 120px;
	--case-overlap: clamp(96px, 18vw, 288px);
	background: var(--case-donker);
	/* De donkerkleur mag ook licht zijn: de tekstkleur komt daarom uit het
	   kleurthema (wit op donker, brand black op licht) en nooit uit de
	   sitebrede witte bodytekst. */
	color: var(--case-tekst-op-donker, var(--c-white));
	padding-bottom: var(--space-standard);
}

/* Lichte casepagina (case--licht, donkerkleur licht gekozen): witte
   paneeltinten en brandgroene accenten uit het donkere ontwerp zijn op een
   lichte achtergrond onzichtbaar en klappen hier om naar donker. */
.case--licht .case-rest__paneel {
	background: rgba(21, 21, 21, 0.05);
}

.case--licht .case-toc__top {
	background: rgba(21, 21, 21, 0.1);
}

.case--licht .pijl-link__pijl,
.case--licht .pijl-link:hover .pijl-link__tekst,
.case--licht .auteur__naam--groen {
	color: var(--c-black);
}

/* De projectkaarten onder More projects zijn op donker ontworpen (witte
   titel, hovergroen, lichtgrijze diensten) en klappen hier ook om. */
.case--licht .project-kaart__titel {
	color: var(--c-black);
}

.case--licht .project-kaart:hover .project-kaart__titel {
	color: var(--c-green);
}

.case--licht .project-kaart__diensten {
	color: var(--c-grey-60);
}

/* Gekleurde heroband, loopt achter de header door */
.case__band {
	margin-top: calc(-1 * var(--header-hoogte));
	padding-top: calc(var(--header-hoogte) + clamp(8px, 1.7vw, 27px));
	/* Strakker (wens Rene): minder lucht tussen titel en hero, zodat de
	   hero hoger in beeld staat. Was clamp(48px, 7.5vw, 121px). */
	padding-bottom: calc(var(--case-overlap) + clamp(32px, 4vw, 64px));
	background: var(--case-hoofd);
	color: var(--case-tekst-op-hoofd);
}

.case__klant {
	/* Jekyll Pro, niet het Accelerator-displayfont: de casetitel moet
	   leesbaarder en cleaner zijn dan de landingspaginakoppen. */
	font-family: var(--font-ui);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.case__subtitel {
	margin: clamp(8px, 1vw, 16px) 0 0;
	font-size: var(--fs-h4);
	line-height: 1.1;
}

.case__hero {
	margin: calc(-1 * var(--case-overlap)) 0 0;
}

.case__hero-beeld {
	display: block;
	width: 100%;
	height: auto;
	/* Vaste verhouding + cover: ook een te kleine of te grote upload houdt
	   exact het herokader, zonder vervorming of springende hoogte. 16:9,
	   want videomateriaal is standaard 16:9 en werd in het oude brede
	   kader fors gecropt. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Heroformaat eigen verhouding: het beeld op zijn eigen afmetingen */
.case__hero-beeld--eigen {
	aspect-ratio: auto;
	object-fit: unset;
}

/* Reel bovenop het herobeeld (single-project.php): het beeld bepaalt de
   maat en blijft als poster staan, de reel dekt het kader af. Zelfde
   cover-truc als de Vimeo-reels op de kaarten. */
.case__hero--reel {
	position: relative;
	overflow: hidden;
}

.case__hero-reel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.case__hero-reel--vimeo {
	display: block;
	container-type: size;
}

/* De reel bepaalt de maat (aspect-ratio op de figure, single-project.php):
   het herobeeld vult dan het kader als poster, wat zijn eigen verhouding
   ook is. Zonder herobeeld is de figure zelf het kader. */
.case__hero--reelmaat .case__hero-beeld {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.case__hero--zonder-beeld {
	aspect-ratio: 16 / 9;
	background: var(--case-donker);
}

.case__hero-reel--vimeo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(max(100cqw, 100cqh * var(--video-ratio)) * 1.02);
	height: calc(max(100cqh, 100cqw / var(--video-ratio)) * 1.02);
	border: 0;
	pointer-events: none;
}

/* Intro: grote tekst links, auteur en meta rechts */
.case__intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 288px;
	gap: clamp(32px, 4vw, 64px);
	margin-top: var(--space-compact);
}

.case__intro {
	max-width: 883px;
	font-size: var(--fs-h5);
	line-height: 1.235;
}

.case__intro p {
	margin: 0 0 1em;
}

.case__intro p:last-child {
	margin-bottom: 0;
}

.case__extern {
	margin-top: clamp(20px, 2vw, 32px);
}

.auteur__naam--groen {
	color: var(--c-green);
}

.case__meta {
	margin: clamp(24px, 2.5vw, 40px) 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.case__meta-rij {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.case__meta dt {
	opacity: 0.6;
}

.case__meta dd {
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* Links in de lopende tekst kleuren met de actiekleur, bewaakt op
   leesbaarheid tegen de paginaachtergrond (actie-op-donker). */
.case .case__intro a,
.case .case-titel-tekst__tekst a,
main .case .case-kolommen__tekst a,
main .case .case-quote__tekst a,
main .case .case-verhaal__tekst a {
	color: var(--case-actie-op-donker, var(--case-actie));
}

/* Ook bij hover: de case-regie wint van de generieke groene hover, elke
   case houdt zijn eigen actiekleur. */
main .case .case__intro a:hover,
main .case .case-titel-tekst__tekst a:hover,
main .case .case-kolommen__tekst a:hover,
main .case .case-quote__tekst a:hover,
main .case .case-verhaal__tekst a:hover {
	color: var(--case-actie-op-donker, var(--case-actie));
}

/* ---- Blokken ---- */
.case-blok {
	margin-top: clamp(48px, 6.5vw, 100px);
}

/* Caseblok op een pagina (inc/blokken-delen.php): een eigen sectie met de
   case-kleurvariabelen uit het merkpalet, donker of licht naar de gekozen
   achtergrondkleur. De sectie regelt de ruimte, dus geen blokmarge. */
.section--caseblok {
	--case-hoofd: var(--c-black);
	--case-actie: var(--c-green);
	--case-donker: var(--c-black);
	--case-tekst-op-hoofd: var(--c-white);
	--case-tekst-op-donker: var(--c-white);
	--case-actie-op-donker: var(--c-green);
	--case-verhaal-kop: var(--c-white);
	--case-overlap: 0px;
}

.section--caseblok.section--bg-donkergrijs {
	--case-donker: var(--c-grey-80);
}

.section--caseblok.section--bg-wit,
.section--caseblok.section--bg-accent {
	--case-hoofd: var(--c-white);
	--case-donker: var(--c-white);
	--case-tekst-op-hoofd: var(--c-black);
	--case-tekst-op-donker: var(--c-black);
	--case-actie-op-donker: var(--c-black);
	--case-verhaal-kop: var(--c-black);
}

.section--caseblok.section--bg-accent {
	--case-hoofd: var(--c-green);
	--case-donker: var(--c-green);
}

.section--caseblok > .case-blok {
	margin-top: 0;
}

.section--caseblok .case-titel-tekst__tekst a,
.section--caseblok .case-kolommen__tekst a,
.section--caseblok .case-quote__tekst a,
.section--caseblok .case-verhaal__tekst a,
.section--caseblok .case-titel-tekst__tekst a:hover,
.section--caseblok .case-kolommen__tekst a:hover,
.section--caseblok .case-quote__tekst a:hover,
.section--caseblok .case-verhaal__tekst a:hover {
	color: var(--case-actie-op-donker, var(--case-actie));
}

.section--caseblok .button {
	--knop-focus: var(--case-actie-op-donker, var(--c-green));
}

.case-media + .case-media,
.case-media + .case-media-paar,
.case-media-paar + .case-media,
.case-media-paar + .case-media-paar {
	margin-top: clamp(20px, 2.5vw, 40px);
}

.case-media {
	margin-block-end: 0;
	margin-inline: 0;
}

.case-media__item,
.case-verhaal__img {
	display: block;
	width: 100%;
	height: auto;
}

video.case-media__item {
	object-fit: cover;
}

/* Formaat-systeem: breedtes uit het designgrid, vrije uitlijning en een
   optionele uitsnedeverhouding (--media-ratio uit de template). */
.case-media--b-volledig .case-media__inner {
	max-width: none;
	padding-inline: 0;
}

.case-media--b-tweederde .case-media__inner > :is(.case-media__item, .parallax-kader) {
	max-width: 994px;
}

.case-media--b-helft .case-media__inner > :is(.case-media__item, .parallax-kader) {
	max-width: 737px;
}

.case-media--b-derde .case-media__inner > :is(.case-media__item, .parallax-kader) {
	max-width: 482px;
}

.case-media--uitl-midden .case-media__inner > :is(.case-media__item, .parallax-kader) {
	margin-inline: auto;
}

.case-media--uitl-rechts .case-media__inner > :is(.case-media__item, .parallax-kader) {
	margin-left: auto;
}

.case-media--verhouding .case-media__item {
	aspect-ratio: var(--media-ratio);
	object-fit: cover;
	width: 100%;
}

/* Embeds zijn een div om een iframe heen: verhouding op de wrapper */
.case-media--verhouding .case-embed.case-media__item {
	aspect-ratio: var(--media-ratio);
}

.case-media-paar__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
}

.case-media-paar--66-33 .case-media-paar__inner {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.case-media-paar--33-66 .case-media-paar__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.case-media-paar--verhouding .case-media__item {
	aspect-ratio: var(--media-ratio);
	object-fit: cover;
	width: 100%;
}

.case-media-paar__item {
	margin: 0;
}

/* Vimeo/YouTube-embeds: responsief 16:9 */
.case-embed {
	position: relative;
	width: 100%;
	aspect-ratio: var(--video-ratio);
}

.case-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Achtergrondreel: de video vult het kader zoals de hero dat doet, dus
   opgeschaald en bijgesneden in plaats van met zwarte balken, en zonder
   bediening omdat hij als beeld dient. */
.case-embed--reel {
	overflow: hidden;
	container-type: size;
}

.case-embed--reel iframe {
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(max(100cqw, 100cqh * var(--video-ratio)) * 1.02);
	height: calc(max(100cqh, 100cqw / var(--video-ratio)) * 1.02);
	pointer-events: none;
}

/* Titel met leadtekst */
.case-titel-tekst {
	margin-top: clamp(64px, 9.5vw, 150px);
}

.case-titel-tekst__kop {
	font-size: var(--fs-h3); /* H3-maat, zoals alle H2 (2026-11-09) */
	line-height: var(--lh-h3);
	/* Niet over de volle containerbreedte: de kop loopt net iets voorbij de
	   tekstkolom eronder (810 van 1456 in het grid, dus 56%) en blijft zo
	   off-grid in plaats van keurig uitgevuld (wens Rene). */
	max-width: 62%;
}

.case-titel-tekst__onder {
	display: grid;
	grid-template-columns: minmax(0, 810fr) minmax(0, 646fr);
	gap: 30px;
	align-items: end;
	margin-top: clamp(24px, 4vw, 60px);
}

.case-titel-tekst__tekst {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.case-titel-tekst__tekst p {
	margin: 0 0 1em;
}

.case-titel-tekst__tekst p:last-child {
	margin-bottom: 0;
}

.case-titel-tekst__knop {
	justify-self: end;
}

/* Tekstkolommen (Challenge / Solution) */
.case-kolommen {
	margin-top: clamp(64px, 9.5vw, 150px);
}

.case-kolommen__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
}

.case-kolommen__kop {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	margin-bottom: clamp(20px, 2.3vw, 35px);
}

.case-kolommen__tekst :is(p, ul, ol) {
	margin: 0 0 1em;
}

.case-kolommen__tekst :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

/* Quote */
.case-quote {
	margin-top: clamp(64px, 9.5vw, 150px);
}

.case-quote__inner {
	display: grid;
	grid-template-columns: minmax(0, 256px) minmax(0, 738px);
	gap: 30px;
	justify-content: center;
}

.case-quote__wie {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

/* Het quoteblok op een pagina volgt het zijkop-stramien van de blokken
   eromheen (tabel, stappen, FAQ): spreker op de lijn van de zijkoppen,
   quote op de lijn van de rechterkolom (wens Rene, de foto stond te ver
   naar links). In een case blijft de gecentreerde casequote staan. */
.section--quote .case-quote__inner {
	grid-template-columns: minmax(0, 719fr) minmax(0, 738fr);
	gap: clamp(24px, 3vw, 47px);
	justify-content: stretch;
}

.section--quote .case-quote__wie {
	padding-left: clamp(0px, 17vw, 255px);
}

.case-quote__blok {
	margin: 0;
}

.case-quote__kop {
	font-size: var(--fs-h5);
	/* Zelfde strakke regelafstand als de zijkoppen (wens Rene) */
	line-height: 1;
	margin-bottom: clamp(20px, 2.3vw, 35px);
}

.case-quote__tekst {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.case-quote__tekst p {
	margin: 0 0 1em;
}

.case-quote__tekst p:last-child {
	margin-bottom: 0;
}

/* Video op kleurvlak */
.case-video-paneel__vlak {
	background: var(--case-hoofd);
	padding: clamp(40px, 6.6vw, 100px) clamp(20px, 8.4vw, 127px);
}

.case-video-paneel__speler {
	position: relative;
	box-shadow: 0 20px 40px var(--case-donker);
}

video.case-video-paneel__media {
	display: block;
	width: 100%;
	height: auto;
}

/* Cascade-slider: actieve dia in het midden, buren als smalle stroken */
.case-slider {
	position: relative;
	width: 100%;
}

.case-slider__kopwrap {
	margin-bottom: clamp(20px, 2.6vw, 40px);
}

.case-slider__viewport {
	--gap: 10px;
	position: relative;
	width: 100%;
	/* Landscape (wens Rene, 2026-09-28): de actieve dia (--actief, zelfde
	   fractie als GRENZEN in case.js) krijgt 16:9. Lager dan voorheen
	   (42.5vw), dus de beelden passen beter en de knoppen komen in beeld. */
	--actief: 0.6;
	--dia-ratio: 16 / 9;
	aspect-ratio: 1 / calc(var(--actief) / (var(--dia-ratio)));
	max-height: 700px;
	overflow: hidden;
}

.case-slider__dia {
	--clip: 0;
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 100%;
	margin: 0;
	clip-path: inset(0 calc(var(--clip) * 1px) round var(--radius-hoek) 0 var(--radius-hoek) 0);
	cursor: pointer;
	will-change: transform, clip-path;
	user-select: none;
	-webkit-user-select: none;
}

/* Voor de engine start: alleen de actieve (eerste) dia tonen, netjes zonder flits */
[data-case-slider]:not(.is-klaar) .case-slider__dia[data-status="inactive"] {
	opacity: 0;
}

.case-slider__dia[data-status="active"] {
	cursor: default;
}

/* Niet-actieve dia's semi-transparant */
.case-slider__dia {
	transition: opacity var(--duration-normal) var(--cubic-default);
}

.case-slider__dia[data-status="inactive"] {
	opacity: 0.5;
}

.case-slider__beeld {
	position: absolute;
	inset: 0;
}

.case-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-slider__onderschrift {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	margin: 0;
	padding: clamp(40px, 5vw, 80px) clamp(20px, 3.3vw, 50px) clamp(20px, 3vw, 46px);
	background-image: linear-gradient(0deg, rgba(21, 21, 21, 0.55), rgba(21, 21, 21, 0));
	/* Broodtekstmaat (wens Rene, 26px was te groot op de foto) */
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-white);
	pointer-events: none;
	opacity: 0;
	transform: translateY(0.25em);
	transition: opacity var(--duration-normal) var(--cubic-default), transform var(--duration-normal) var(--cubic-default);
}

.case-slider__dia[data-status="active"] .case-slider__onderschrift {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

.case-slider__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: clamp(24px, 3vw, 40px);
}

.case-slider__knop {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	background: var(--c-green);
	color: var(--c-black);
	cursor: pointer;
	transition: transform var(--duration-fast) ease, filter var(--duration-fast) ease;
}

.case-slider__knop svg {
	width: 22px;
	height: 22px;
	transition: transform var(--duration-fast) ease;
}

.case-slider__knop:hover {
	filter: brightness(0.92);
}

.case-slider__knop--volgende:hover svg {
	transform: translateX(2px);
}

.case-slider__knop--vorige svg {
	transform: rotate(180deg);
}

.case-slider__knop--vorige:hover svg {
	transform: rotate(180deg) translateX(2px);
}

@media (max-width: 767px) {
	.case-slider__viewport {
		--actief: 0.7;
	}
}

@media (max-width: 479px) {
	/* Op de telefoon 3:2: 16:9 werd hier te laag om iets te zien. */
	.case-slider__viewport {
		--actief: 0.78;
		--dia-ratio: 3 / 2;
	}

	.case-slider__knop {
		width: 48px;
		height: 48px;
	}

	.case-slider__onderschrift {
		font-size: var(--fs-body);
		line-height: 1.3;
	}
}

/* Voor/na-sleepvergelijker */
.case-vergelijk__kader {
	position: relative;
	touch-action: none;
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
}

.case-vergelijk__img {
	display: block;
	width: 100%;
	height: auto;
}

.case-vergelijk__laag--oud {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--vgl-pos, 50%)) 0 0);
}

.case-vergelijk__laag--oud .case-vergelijk__img {
	height: 100%;
	object-fit: cover;
}

.case-vergelijk__greep {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--vgl-pos, 50%);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
}

/* Kleuren instelbaar per blok (colorpickers); leeg = wit met zwarte pijltjes */
.case-vergelijk__lijn {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--vgl-lijn, rgba(255, 255, 255, 0.75));
}

.case-vergelijk__knopje {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	background: var(--vgl-knop, var(--c-white));
	color: var(--vgl-icoon, var(--c-black));
}

/* Vouw (lees verder +) + de ingeklapte rest */
.case-vouw {
	margin-top: clamp(64px, 9.5vw, 150px);
}

.case-vouw__knop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(28px, 3vw, 44px);
	margin-inline: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--case-tekst-op-donker, var(--c-white));
	font: inherit;
	cursor: pointer;
}

.case-vouw__tekst {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	text-align: center;
}

.case-vouw__plus {
	color: var(--case-actie-op-donker, var(--case-actie));
	transition: transform 0.45s var(--cubic-default);
}

.case-vouw__plus svg {
	display: block;
}

.case-vouw__knop:hover .case-vouw__plus {
	transform: rotate(90deg);
}

.case-vouw.is-open .case-vouw__plus,
.case-vouw.is-open .case-vouw__knop:hover .case-vouw__plus {
	transform: rotate(45deg);
}

.case-rest {
	overflow: clip;
}

.case-rest__paneel {
	display: grid;
	grid-template-columns: minmax(220px, 482fr) minmax(0, 738fr);
	gap: clamp(24px, 3.8vw, 57px);
	margin-top: clamp(48px, 6vw, 90px);
	padding: clamp(40px, 6.6vw, 100px) clamp(24px, 8.4vw, 127px);
	background: rgba(255, 255, 255, 0.1);
}

.case-rest__inhoud--zonder-toc {
	grid-column: 1 / -1;
}

/* Blokken binnen de vouw: alles op kolombreedte, containers plat */
.case-rest .case-blok {
	margin-top: 30px;
}

.case-rest__inhoud > .case-blok:first-child,
.case-rest__inhoud > :first-child > .case-blok:first-child {
	margin-top: 0;
}

/* Paginablokken in een case (inc/blokken-delen.php). "Casekleur" is daar
   de standaard: transparant, zodat het blok wegvalt in de case-achtergrond
   en de tekstkleur van het kleurthema overneemt. */
.section--bg-case {
	background: transparent;
}

/* Zo'n transparant paginablok volgt het ritme van de caseblokken: dezelfde
   marge erboven, geen eigen binnenruimte. Met de sectiepadding (63px boven
   en onder) plakte titel, tekst en knoppen tegen het beeld erboven en
   stond het ver van het volgende blok (wens Rene, MEIJS Motorman). In de
   vouw geldt de kleinere blokmarge van daar. */
.case .section--bg-case {
	padding-block: 0;
	margin-top: clamp(48px, 6.5vw, 100px);
}

.case-rest .section--bg-case {
	margin-top: 30px;
}

.case-rest__inhoud > .section--bg-case:first-child,
.case-rest__inhoud > :first-child > .section--bg-case:first-child {
	margin-top: 0;
}

/* Binnen de vouw rendert een paginablok op kolombreedte,
   zonder eigen gutter; alleen een expliciet gekleurde band houdt
   binnenruimte, anders staat de tekst tegen de rand van de band. */
.case-rest__inhoud .section > .container {
	max-width: none;
	padding-inline: 0;
}
.case-rest__inhoud .section[class*="section--bg-"]:not(.section--bg-case) > .container {
	padding-inline: clamp(20px, 3vw, 40px);
}
.case-rest__inhoud > .section:first-child,
.case-rest__inhoud > :first-child > .section:first-child {
	padding-top: 0;
}

.case-rest .container {
	max-width: none;
	padding-inline: 0;
}

.case-rest .case-titel-tekst__onder,
.case-rest .case-kolommen__inner,
.case-rest .case-quote__inner {
	grid-template-columns: 1fr;
}

.case-rest .case-titel-tekst__kop {
	max-width: none;
}

.case-rest .case-slider__dia {
	width: 100%;
}

/* Quote in het smalle verhaalpaneel: de spreker hoort als naamregel onder
   de quote, niet erboven in de (vervallen) linkerkolom. */
.case-rest .case-quote__wie {
	order: 2;
	flex-direction: row;
	align-items: center;
	margin-top: 24px;
}

/* Verhaalsecties: de koppen en afbeeldingen staan in de lopende tekst.
   H2 = hoofdstuk (komt in de inhoudsopgave), H3 = tussenkop.
   Kleur zoals op de insights (wens Rene, 2026-11-09): alle koppen in de
   tekstkleur; alleen het hoofdstuk dat in de inhoudsopgave actief is
   (toc.js zet is-actief) krijgt de bewaakte actiekleur. Eerder kleurden
   alle koppen tegelijk mee in --case-verhaal-kop.
   Maten een stap rustiger (H2 was 50px, "veel te groot"): H2 34px
   (30,6px bij 1440), H3 26px, H4 lead-maat. Gelijk trekken van H2 en H3
   is geprobeerd en teruggedraaid: dan valt het onderscheid weg (Nick,
   2026-11-09). Geldt sitebreed, cases en pagina's. */
.case-verhaal__tekst :is(h2, h3, h4, h5, h6) {
	color: var(--case-tekst-op-donker, currentColor);
	transition: color var(--duration-normal) var(--cubic-default);
}

.case-verhaal__tekst h2.is-actief {
	color: var(--case-actie-op-donker, var(--c-green));
}

.case-verhaal__tekst h2 {
	font-size: var(--fs-h5);
	line-height: 1;
	margin: clamp(48px, 5.5vw, 80px) 0 24px;
}

.case-verhaal__tekst h3 {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	margin: clamp(36px, 4vw, 56px) 0 20px;
}

/* Alleen in de vouw (wens Nick, 2026-11-09): de H2 net iets groter dan
   de H3 (26px), ongeveer 33px, zodat het hoofdstuk zich onderscheidt. */
.case-rest .case-verhaal__tekst h2 {
	font-size: clamp(28px, 2.3vw, 33px);
	line-height: 1.06;
}

/* Een tussenkop direct onder een hoofdstuk ("Logo vs. merk" met "Logo")
   hoort erbij: dan geldt alleen de ondermarge van de H2, niet de ruime
   bovenmarge van de H3 (wens Nick, 2026-11-09). */
.case-rest .case-verhaal__tekst h2 + h3 {
	margin-top: 0;
}

/* Ruimte boven een nieuw hoofdstuk in de vouw iets kleiner (wens Nick,
   2026-11-09): 64px bij 1440 in plaats van 80px. Nog altijd ruimer dan
   boven een H3 (56px), zodat het hoofdstuk herkenbaar blijft. Niet op de
   eerste kop, die blijft op 0 (zie :first-child hierboven). */
.case-rest .case-verhaal__tekst h2:not(:first-child) {
	margin-top: clamp(44px, 4.45vw, 64px);
}

/* De diepere niveaus (op verzoek allemaal beschikbaar in het kopmenu):
   steeds een stap kleiner, buiten de inhoudsopgave. */
.case-verhaal__tekst h4 {
	font-size: var(--fs-lead);
	line-height: 1.25;
	margin: clamp(28px, 3vw, 44px) 0 16px;
}

.case-verhaal__tekst h5,
.case-verhaal__tekst h6 {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 700;
	margin: clamp(24px, 2.5vw, 36px) 0 16px;
}

.case-verhaal__tekst h6 {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.case-verhaal__tekst :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

.case-verhaal__tekst :is(p, ul, ol) {
	margin: 0 0 1em;
}

.case-verhaal__tekst :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

.case-verhaal__tekst img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 30px 0;
}

.case-verhaal__tekst p:has(> img:only-child) {
	margin: 0;
}

/* Buiten de vouw geplaatst (in een case, of als los blok op een pagina):
   dan alsnog binnen het stramien op leesbreedte */
.case > .case-verhaal,
.section--caseblok > .case-verhaal {
	width: 100%;
	max-width: calc(738px + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Inhoudsopgave: hergebruikt de .toc__*-stijlen, actiekleur in plaats van
   brandgroen */
.case-toc__sticky {
	position: sticky;
	top: 130px;
	/* Lange inhoudsopgaven passen niet in beeld: binnen het eigen kader
	   scrollen (zelfde recept als .insight-single__zij). */
	max-height: calc(100vh - 150px - var(--zwevende-cta-ruimte, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.case-toc__top {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 20px;
	border: 0;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	background: rgba(255, 255, 255, 0.2);
	color: var(--case-tekst-op-donker, var(--c-white));
	cursor: pointer;
	transition: background var(--duration-fast), color var(--duration-fast);
}

.case-toc__top:hover {
	background: var(--case-actie-op-donker, var(--case-actie));
	color: var(--case-donker, var(--c-black));
}

/* In het design heeft de case-inhoudsopgave geen verticale lijn: witte
   titel en items (18/34), kleine koppen springen licht in en het actieve
   item kleurt in de actiekleur met het diagonale pijltje ervoor. */
.case-toc .toc__titel {
	margin: 0 0 20px;
	color: var(--case-tekst-op-donker, var(--c-white));
}

.case-toc .toc__lijst {
	gap: 0;
	border-left: 0;
}

.case-toc .toc__link {
	display: flex;
	align-items: center;
	margin-left: 0;
	border-left: 0;
	padding: 0;
	line-height: 34px;
	color: var(--case-tekst-op-donker, var(--c-white));
}

.case-toc .toc__link--klein {
	padding-left: 16px;
}

.case-toc .toc__pijl {
	flex: 0 0 auto;
	display: inline-flex;
	width: 0;
	margin-right: 0;
	overflow: hidden;
	opacity: 0;
	color: var(--case-actie-op-donker, var(--case-actie));
	transition: width 0.3s var(--cubic-default), margin 0.3s var(--cubic-default), opacity 0.3s var(--cubic-default);
}

.case-toc .toc__link:hover {
	color: var(--case-actie-op-donker, var(--case-actie));
}

.case-toc .toc__link.is-actief {
	color: var(--case-actie-op-donker, var(--case-actie));
	border-left: 0;
}

.case-toc .toc__link.is-actief .toc__pijl,
.case-toc .toc__link:hover .toc__pijl {
	width: 14px;
	margin-right: 10px;
	opacity: 1;
}

/* Vouw (lees verder +) op een pagina (template-parts/content-blocks.php): de
   vouwsectie regelt ruimte en kleur, de knop staat er direct in. Op een
   witte of groene sectie wordt het paneel een lichte tint van zwart in
   plaats van wit, en de tekst- en actiekleuren volgen .section--caseblok. */
.section--vouw > .case-vouw {
	margin-top: 0;
}

.section--caseblok.section--bg-wit .case-rest__paneel,
.section--caseblok.section--bg-accent .case-rest__paneel {
	background: rgba(0, 0, 0, 0.06);
}

.section--caseblok.section--bg-wit .case-toc__top,
.section--caseblok.section--bg-accent .case-toc__top {
	background: rgba(0, 0, 0, 0.08);
}

/* De blokken in het paneel van een pagina zijn kaal (geen eigen sectie);
   de tekstkleur komt van de vouwsectie. Paginablokken met een eigen
   sectie houden hun kleurband zoals in een case. */
.section--vouw .case-rest__inhoud > .case-blok:first-child {
	margin-top: 0;
}

/* More projects: kop links, twee kaarten rechts */
.case-meer {
	margin-top: var(--space-ruim);
}

.case-meer__inner {
	display: grid;
	grid-template-columns: minmax(0, 482fr) minmax(0, 994fr);
	gap: 30px;
	align-items: start;
}

.case-meer__kop {
	font-family: var(--font-display);
	font-size: clamp(32px, 2.75vw, 44px);
	line-height: 1.2;
}

.case-meer__kaarten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

/* Header op een lichte band: donkere tekst en donker logo zolang de header
   geen donkere sticky-achtergrond heeft (case.js zet html.case-band-licht). */
.case-band-licht .site-header:not(.is-sticky) .site-topmenu__link,
.case-band-licht .site-header.is-sticky.is-bijna-top .site-topmenu__link,
.case-band-licht .site-header:not(.is-sticky) .taalwissel__link,
.case-band-licht .site-header.is-sticky.is-bijna-top .taalwissel__link,
.case-band-licht .site-header:not(.is-sticky) .site-typeshop,
.case-band-licht .site-header.is-sticky.is-bijna-top .site-typeshop {
	color: var(--c-black);
}

.case-band-licht .site-header:not(.is-sticky) .site-logo img,
.case-band-licht .site-header.is-sticky.is-bijna-top .site-logo img,
.case-band-licht .site-header:not(.is-sticky) .site-burger__icoon,
.case-band-licht .site-header.is-sticky.is-bijna-top .site-burger__icoon {
	filter: brightness(0);
}

/* Open takeover-menu is donker: daar de iconen weer gewoon laten kleuren */
.takeover-open.case-band-licht .site-header .site-burger__icoon,
.takeover-open.case-band-licht .site-header .site-logo img {
	filter: none;
}

/* ---- Casepagina responsief ---- */
@media (max-width: 1100px) {
	.case-rest__paneel {
		grid-template-columns: 1fr;
		padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
	}

	.case-toc {
		order: -1;
	}

	.case-toc__sticky {
		position: static;
	}
}

@media (max-width: 900px) {
	.case__intro-grid,
	.case-titel-tekst__onder,
	.case-kolommen__inner,
	.case-media-paar__inner,
	.case-meer__inner {
		grid-template-columns: 1fr;
	}

	.case-quote__inner,
	.section--quote .case-quote__inner {
		grid-template-columns: 1fr;
		justify-content: start;
	}

	.section--quote .case-quote__wie {
		padding-left: 0;
	}

	.case-titel-tekst__knop {
		justify-self: start;
	}

	/* Eenkoloms: de kop mag de hele breedte gebruiken. */
	.case-titel-tekst__kop {
		max-width: none;
	}

	.case-slider__dia {
		width: 86vw;
	}

	.case-video-paneel__vlak {
		padding: clamp(24px, 6vw, 48px);
	}
}

@media (max-width: 700px) {
	.case-meer__kaarten {
		grid-template-columns: 1fr;
	}

	/* Mobiele footer: copyright en Google-reviews onder elkaar binnen de
	   viewport in plaats van naast elkaar eruit lopen. */
	.site-footer__onder {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.site-footer__copyright {
		max-width: 100%;
	}
}

/* =========================================================
   Responsief
   ========================================================= */
@media (max-width: 1100px) {
	.diensten__grid,
	.partners__inner {
		grid-template-columns: 1fr;
	}

	.tab-layout__col,
	.tab-layout__col:last-child {
		width: 100%;
		padding: 0;
	}

	/* De expertise-afbeelding vervalt op mobiel: de vier expertises vullen
	   het scherm al en het beeld belandde er onzichtbaar ver onder. */
	.section--expertises .tab-layout__col:last-child {
		display: none;
	}

	.tab-visual__wrap {
		min-height: 320px;
		margin-top: 24px;
	}

	.insights__inner {
		grid-template-columns: 1fr;
	}

	/* Archief: topics boven de lijst, als horizontale wrappende rij */
	.insights-archief__inner {
		grid-template-columns: 1fr;
	}

	.insights-archief__zij {
		position: static;
	}

	.insights-archief__topics .insights__topics-lijst {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px 30px;
	}

	/* Detail: alles onder elkaar, het herobeeld direct onder de titel.
	   minmax(0, 1fr): een 1fr-kolom krimpt niet onder de min-content van
	   zijn inhoud, dus een vast breed element (embed, tabel) rekte anders
	   de hele pagina op (horizontale overflow op de insight
	   "Anatomie van een lettertype", 2026-09-22). */
	.insight-single__boven,
	.insight-single__onder {
		grid-template-columns: minmax(0, 1fr);
	}

	.insight-single__boven {
		margin-top: 40px;
	}

	.insight-single__hero {
		margin-top: 0;
		order: -1;
	}

	.insight-single__onder {
		margin-top: 56px;
	}

	.insight-single__zij {
		position: static;
	}

	.insight-toc__top {
		display: none;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	/* De hamburger mag hier flink groter: royaal tikvlak, groter icoon */
	.site-burger {
		width: 56px;
		height: 56px;
	}

	.site-burger__icoon {
		width: 44px;
		height: 35px;
	}

	.site-topmenu {
		display: none;
	}

	.hero__boven {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.werk__rij--paar,
	.werk__rij--quote {
		grid-template-columns: 1fr;
	}

	/* Brede kaarten worden op smalle schermen anders te plat */
	.project-kaart--wide .project-kaart__beeld {
		aspect-ratio: 737 / 564;
	}

	.logowall__lijst {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	/* Tablet: 2 rijen van 3 zichtbaar */
	[data-logo-wall-list] > [data-logo-wall-item]:nth-child(n+7) {
		display: none;
	}

	.referenties__kopregel {
		flex-direction: column;
		align-items: flex-start;
	}

	.takeover__kolommen {
		flex-direction: column;
		gap: 40px;
		width: 100%;
	}

	.takeover__binnen {
		align-items: flex-start;
	}

	.insight-kaart {
		grid-template-columns: 1fr;
	}

	.insight-kaart__beeld img {
		aspect-ratio: 226 / 149;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	/* Meer ademruimte voor de knop in het groene vlak */
	.cta__doos {
		padding: 36px 28px;
	}

	.logowall__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Mobiel: 2 rijen van 2 zichtbaar */
	[data-logo-wall-list] > [data-logo-wall-item]:nth-child(n+5) {
		display: none;
	}
}

/* =========================================================
   CookieYes in de huisstijl: brand black vlakken, Jekyll Pro,
   signatuurhoeken (alleen linksboven en rechtsonder afgerond) en de
   knopstijlen van de site. De kleuren zelf staan in de bannerinstellingen
   van de plugin; hier alleen wat daar niet kan.
   ========================================================= */
.cky-consent-container *,
.cky-modal *,
.cky-btn-revisit-wrapper * {
	font-family: var(--font-ui) !important;
}

.cky-consent-bar,
.cky-modal .cky-preference-center {
	border: 1px solid var(--c-grey-80) !important;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0 !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

/* De modal-wrapper om het voorkeurenpaneel is bij de plugin wit met een
   eigen 6px-radius; die schemerde als witte hoekjes achter de
   signatuurhoeken door. Transparant en dezelfde hoeken. */
.cky-modal {
	background: transparent !important;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0 !important;
	box-shadow: none !important;
}

.cky-notice-des p,
.cky-preference-content-wrapper p {
	font-size: var(--fs-small) !important;
	line-height: var(--lh-small) !important;
}

/* Knoppen: zelfde vorm en overgangen als .button */
.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0 !important;
	font-size: var(--fs-small) !important;
	font-weight: 400 !important;
	transition: background var(--duration-fast) var(--cubic-default),
		color var(--duration-fast) var(--cubic-default),
		border-color var(--duration-fast) var(--cubic-default) !important;
}

/* Accepteren en opslaan: de groene primaire knop, bij hover naar wit */
.cky-consent-container .cky-btn-accept:hover,
.cky-modal .cky-btn-accept:hover,
.cky-modal .cky-btn-preferences:hover {
	background-color: var(--c-white) !important;
	border-color: var(--c-white) !important;
	color: var(--c-black) !important;
}

/* Weigeren: omlijnd licht, bij hover de groene rand */
.cky-consent-container .cky-btn-reject:hover,
.cky-modal .cky-btn-reject:hover {
	border-color: var(--c-green) !important;
	color: var(--c-green) !important;
	background: transparent !important;
}

/* Voorkeuren: tekstlink met de groeiende underline van de site */
.cky-consent-container .cky-btn-customize {
	padding-left: 0 !important;
	padding-right: 0 !important;
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-size: 0% 1px !important;
	background-position: 100% calc(100% - 6px) !important;
	background-repeat: no-repeat !important;
	transition: background-size 0.55s var(--cubic-default) !important;
}

.cky-consent-container .cky-btn-customize:hover {
	background-position: 0% calc(100% - 6px) !important;
	background-size: 100% 1px !important;
}

/* Schakelaars in het voorkeurenscherm: brandgroen met donkere knop */
.cky-modal .cky-switch input[type="checkbox"]:checked {
	background-color: var(--c-green) !important;
}

.cky-modal .cky-switch input[type="checkbox"] {
	background-color: var(--c-grey-60) !important;
}

/* Accordeonranden en scheidingslijnen in donkergrijs */
.cky-modal .cky-accordion,
.cky-modal .cky-preference-body-wrapper,
.cky-modal .cky-footer-wrapper,
.cky-modal .cky-preference-header {
	border-color: var(--c-grey-80) !important;
}

/* Revisit-knop (het terugkeericoon): brand black met hairline en hoekje,
   rechtsonder in de viewport. Bij scrollen naar beneden schuift hij naar
   rechts uit beeld, scroll omhoog brengt hem terug (cookie-revisit.js). */
.cky-btn-revisit-wrapper {
	left: auto !important;
	right: 24px !important;
	bottom: 24px !important;
	border: 1px solid var(--c-grey-80) !important;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0 !important;
	transition: transform 0.6s var(--cubic-default) !important;
}

.cky-btn-revisit-wrapper.sbd-revisit-uit {
	transform: translateX(calc(100% + 32px)) !important;
}

/* Geen tooltip-label bij hover op het icoon (de plugin tekent die met
   pseudo-elementen uit data-tooltip; rechtsonder valt hij buiten beeld) */
.cky-btn-revisit-wrapper::before,
.cky-btn-revisit-wrapper::after,
.cky-btn-revisit::before,
.cky-btn-revisit::after {
	content: none !important;
	display: none !important;
}

/* Links in de bannerteksten zijn brandgroen */
.cky-consent-container a,
.cky-modal a {
	color: var(--c-green) !important;
}

/* =========================================================
   Klantenarchief (/clients/): intro met pijl-link rechts, wit paneel
   met het statische logogrid (vijf per rij, tegels 170px) en de
   groene CTA-doos eronder (bestaande .cta__doos).
   ========================================================= */
/* "Klant worden" staat op de basislijn van de laatste regel van de intro
   (wens Nick, 2026-11-09); hij zakte eerst door de ondermarge van de
   laatste alinea onder de tekst. flex-end is de fallback. */
.klantenarchief__introrij {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	align-items: last baseline;
	gap: 24px;
	margin-top: 60px;
}

.klantenarchief__intro {
	max-width: 861px;
}

.klantenarchief__intro p:last-child {
	margin-bottom: 0;
}

.klantenarchief__paneel {
	margin-top: clamp(64px, 7.9vw, 126px);
	padding: clamp(32px, 4.6vw, 74px) clamp(24px, 5.3vw, 85px);
	background: var(--c-white);
}

.klantenarchief__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 40px clamp(24px, 7.5vw, 121px);
	justify-items: center;
}

.klantenarchief__vak {
	width: 100%;
	max-width: 170px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

.klantenarchief__logo-link {
	display: block;
}

.klantenarchief__logo {
	width: 100%;
	height: auto;
	filter: grayscale(1);
	opacity: 0.85;
	transition: filter var(--duration-normal) var(--cubic-default), opacity var(--duration-normal) var(--cubic-default);
}

.klantenarchief__vak:hover .klantenarchief__logo {
	filter: none;
	opacity: 1;
}

/* =========================================================
   Referenties overzicht: uitgelichte quote (avatar-kolom 226 links,
   quotetitel en quote rechts), pijl-link rechts en het 3-koloms grid
   van kaarten met verloopvlak (481x348, hoeken tl/br 16)
   ========================================================= */
/* De titel loopt hier over de volle containerbreedte (in het design past
   "They chose bold - Unfiltered" precies op een regel); de 1120px-grens
   van de werkarchieftitel geldt hier dus niet. */
.referenties-overzicht__titel {
	max-width: none;
}

.referenties-overzicht__intro {
	max-width: 861px;
	margin-top: 60px;
}

.referenties-overzicht__intro p:last-child {
	margin-bottom: 0;
}

.referenties-overzicht__google {
	margin-top: 30px;
}

.referenties-overzicht__uitgelicht {
	display: grid;
	grid-template-columns: 226px minmax(0, 1fr);
	gap: 30px;
	margin-top: 90px;
}

.referenties-overzicht__uitgelicht-zij {
	display: flex;
	flex-direction: column;
	/* Naam en functie direct onder de foto: ze horen bij elkaar. De kolom
	   rekt mee met een lange quote rechts, dus niet naar onderen duwen. */
	gap: 20px;
	/* De avatar staat in Figma 8px lager dan de quotetitel */
	padding-top: 8px;
}

/* De uitgelichte foto vult de linkerkolom (226x226), signatuurhoeken 8px */
.referenties-overzicht__uitgelicht-avatar img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
}

.referenties-overzicht__uitgelicht-auteur {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.referenties-overzicht__uitgelicht-titel {
	margin: 0 0 35px;
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	/* Even breed als de quote eronder (wens Rene): op 482px brak de
	   titel af op tweederde van de tekst. */
	max-width: 738px;
}

.referenties-overzicht__uitgelicht-quote {
	margin: 0;
	max-width: 738px;
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.referenties-overzicht__uitgelicht-quote p {
	margin-bottom: 1em;
}

.referenties-overzicht__uitgelicht-quote p:last-child {
	margin-bottom: 0;
}

/* Onder de uitgelichte quote staan de projectlink en de knop "alles" op
   een regel: link links, knop tegen de rechterrand (wens Rene). */
.referenties-overzicht__uitgelicht-links {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 30px;
	margin-top: 26px;
}

.referenties-overzicht__uitgelicht-links .referenties-overzicht__alles {
	margin-left: auto;
}

/* Zonder uitgelichte referentie staat de knop "alles" op een eigen regel
   rechts; het grid volgt 100px daaronder. */
.referenties-overzicht__kopregel {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.referenties-overzicht__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 100px;
}

.referentie-kaart {
	display: flex;
	flex-direction: column;
	min-height: 348px;
	padding: 30px;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	background: linear-gradient(180deg, var(--c-grey-80) 0%, rgba(60, 60, 60, 0) 100%);
}

.referentie-kaart .auteur__naam {
	font-weight: 700;
}

.referentie-kaart__quote {
	margin: 30px 0 20px;
	font-family: var(--font-lead);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.referentie-kaart__link {
	margin-top: auto;
	align-self: flex-start;
}

/* =========================================================
   Paginakop: Savant-titel, grote subregel (50/52), lead en knoppen
   (de hero van gewone pagina's zoals Contact en formulierpagina's)
   ========================================================= */
.paginakop__titel {
	font-family: "Savant", var(--font-display);
	font-size: clamp(44px, 5.6vw, 90px);
	line-height: 1;
}

.paginakop__subkop {
	margin: 20px 0 0;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.paginakop__tekst {
	max-width: 865px;
	margin-top: 34px;
}

.paginakop__knoppen {
	margin-top: 40px;
}

/* =========================================================
   Kantoren: vier kolommen met grijze koptitel en adresregels
   ========================================================= */
.kantoren__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.kantoren__titel {
	margin: 0 0 25px;
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.kantoren__tekst p {
	margin-bottom: 0;
}

.kantoren__tekst a {
	color: var(--c-green);
}

/* Formulierpagina: het formulier op de vaste kolom uit het design
   (breedte 866, ingesprongen) zodra het blok geen eigen kop heeft */
/* Formulierblok: drie indelingen (titel-boven, titel-naast, beeld-links)
   en twee breedtes (smal/breed), gekozen op het blok. De zijkolom van de
   twee-koloms varianten scrolt sticky mee. */
.formulier__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px clamp(40px, 5vw, 80px);
	/* Geen align-items start: de zijkolom moet de volle rijhoogte houden,
	   anders heeft .formulier__sticky geen ruimte om te plakken. */
}

.formulier__tekst:empty {
	display: none;
}

.formulier__tekst > * + * {
	margin-top: 20px;
}

.formulier__hoofd .formulier__tekst {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.formulier__form {
	max-width: 866px;
}

.formulier--breed .formulier__form {
	max-width: none;
}

.formulier--titel-naast .formulier__inner,
.formulier--beeld-links .formulier__inner {
	grid-template-columns: minmax(280px, 482fr) minmax(0, 866fr);
}

.formulier__sticky {
	position: sticky;
	top: 130px;
}

.formulier__beeld {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
}

/* Responsief voor de nieuwe secties */
@media (max-width: 1100px) {
	.klantenarchief__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.referenties-overzicht__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.referenties-overzicht__uitgelicht {
		grid-template-columns: 1fr;
	}

	.kantoren__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.formulier--titel-naast .formulier__inner,
	.formulier--beeld-links .formulier__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.formulier__sticky {
		position: static;
	}

	.formulier__beeld {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 900px) {
	.klantenarchief__introrij {
		flex-direction: column;
		align-items: flex-start;
	}

	.klantenarchief__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 560px) {
	.klantenarchief__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.referenties-overzicht__grid,
	.kantoren__grid {
		grid-template-columns: 1fr;
	}

	.referentie-kaart {
		min-height: 0;
	}
}


/* =========================================================
   Dynamisch formulier: stappenteller, stapkoppen, onthul-
   animatie en live validatie (formulier.js)
   ========================================================= */
.formulier-stappen {
	margin: 0 0 20px;
	font-size: var(--fs-subtitle);
	font-weight: 700;
	letter-spacing: var(--ls-subtitle);
	text-transform: uppercase;
	color: var(--text-muted);
}

.formulier-stappen__nu {
	color: var(--c-green);
}

/* Sectievelden als stapkoppen */
.gform_wrapper.gravity-theme .gsection {
	margin-top: 36px;
	/* !important: de eigen stylesheet van Gravity Forms laadt na app.css en
	   zet hier anders zijn grijze divider en padding terug */
	padding: 24px 0 0 !important;
	border-top: 1px solid var(--hairline);
	border-bottom: 0 !important;
}

.gform_wrapper.gravity-theme .gsection_title {
	margin: 0;
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	color: var(--c-white);
}

/* Velden die door conditionele logica verschijnen schuiven zacht in beeld */
.gform_wrapper .gfield.is-onthuld {
	animation: sbd-onthullen 0.5s var(--cubic-default) both;
}

@keyframes sbd-onthullen {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper .gfield.is-onthuld {
		animation: none;
	}
}

/* Live validatie: vinkje bij geldig, kruisje en foutkleur bij ongeldig.
   De iconen staan in de rechterrand van het invoerveld; bij selects naast
   de chevron, bij textareas bovenin. */
.gform_wrapper.gravity-theme .ginput_container {
	position: relative;
}

.gform_wrapper .gfield.is-geldig .ginput_container_text::after,
.gform_wrapper .gfield.is-geldig .ginput_container_email::after,
.gform_wrapper .gfield.is-geldig .ginput_container_phone::after,
.gform_wrapper .gfield.is-geldig .ginput_container_website::after,
.gform_wrapper .gfield.is-geldig .ginput_container_select::after,
.gform_wrapper .gfield.is-geldig .ginput_container_textarea::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_text::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_email::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_phone::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_website::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_select::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_textarea::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	pointer-events: none;
	background: var(--c-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.4' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.4' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gform_wrapper .gfield.is-ongeldig .ginput_container_text::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_email::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_phone::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_website::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_select::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_textarea::after {
	background: var(--c-fout);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gform_wrapper .gfield.is-geldig .ginput_container_select::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_select::after {
	right: 52px;
}

.gform_wrapper .gfield.is-geldig .ginput_container_textarea::after,
.gform_wrapper .gfield.is-ongeldig .ginput_container_textarea::after {
	top: 20px;
	transform: none;
}

/* Ruimte voor het icoon in het veld */
.gform_wrapper .gfield.is-geldig input:not([type="checkbox"]):not([type="radio"]),
.gform_wrapper .gfield.is-ongeldig input:not([type="checkbox"]):not([type="radio"]) {
	padding-right: 46px;
}

.gform_wrapper.gravity-theme .gfield.is-ongeldig input,
.gform_wrapper.gravity-theme .gfield.is-ongeldig select,
.gform_wrapper.gravity-theme .gfield.is-ongeldig textarea {
	border-color: var(--c-fout);
}

.gform_wrapper.gravity-theme .gfield.is-geldig input:not([type="checkbox"]):not([type="radio"]),
.gform_wrapper.gravity-theme .gfield.is-geldig select,
.gform_wrapper.gravity-theme .gfield.is-geldig textarea {
	border-color: rgba(0, 255, 199, 0.45);
}

/* Radiokeuzes als klikbare chips in de huisstijl: hairline kader met de
   signatuurhoeken, hover wit, gekozen chip brandgroen met zwarte tekst en
   een invouwend vinkje. Geldt voor alle Gravity Forms radiovelden. */
.gform_wrapper.gravity-theme .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gform_wrapper.gravity-theme .gfield_radio .gchoice {
	position: relative;
	margin: 0;
}

.gform_wrapper.gravity-theme .gfield_radio input[type="radio"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.gform_wrapper.gravity-theme .gfield_radio .gchoice label {
	display: inline-flex;
	align-items: center;
	max-width: none;
	margin: 0;
	padding: 13px 22px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-white);
	cursor: pointer;
	transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}

.gform_wrapper.gravity-theme .gfield_radio .gchoice label:hover {
	border-color: var(--c-white);
}

/* Het vinkje vouwt in als de chip gekozen is */
.gform_wrapper.gravity-theme .gfield_radio .gchoice label::before {
	content: "";
	flex: none;
	width: 0;
	height: 10px;
	margin-right: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.4' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.4' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	transition: width 0.25s var(--cubic-default), margin 0.25s var(--cubic-default), opacity 0.25s var(--cubic-default);
}

.gform_wrapper.gravity-theme .gfield_radio input[type="radio"]:checked + label {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-black);
}

.gform_wrapper.gravity-theme .gfield_radio input[type="radio"]:checked + label::before {
	width: 13px;
	margin-right: 10px;
	opacity: 1;
}

@media (max-width: 479px) {
	.gform_wrapper.gravity-theme .gfield_radio .gchoice label {
		padding: 11px 16px;
	}
}

/* Het dynamische formulier toont zijn labels wel: de vragen zijn hier de
   kern (de rest van de site verbergt GF-labels en leunt op placeholders). */
.gform_wrapper.gravity-theme .formulier-dynamisch .gfield_label:not(.gform-field-label--type-inline) {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 12px;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 700;
	color: var(--c-white);
}

.gform_wrapper.gravity-theme .formulier-dynamisch .gfield_required {
	color: var(--c-green);
	padding-left: 4px;
}

/* Ongenummerde lijsten uit de WYSIWYG-velden: in alle blokken en in de
   leestekst het brand symbol (klein logo) als opsommingsteken, zoals eerst
   alleen op de insight-detail. Generiek op klasseloze ul's binnen main:
   lijsten uit de editor hebben nooit een class, componentlijsten (toc,
   stappen, profiel, formulieren) altijd. Maten in em, zodat het teken
   meeschaalt met lead- en introtekst (14 x 12px bij de broodtekst). De
   kleur loopt via --bullet-kleur: mintgroen op donker, zwart op wit en op
   de accentkleur (groen op groen is onzichtbaar), en in een case de
   actiekleur van die case, net als de links daar. */
main {
	/* Wit op pagina's (wens Rene, 2026-09-28; was mintgroen). */
	--bullet-kleur: var(--c-white);
	--link-kleur: var(--c-green);
}

.section--bg-wit,
.section--bg-accent {
	--bullet-kleur: var(--c-black);
	--link-kleur: var(--c-black);
}

/* In een case volgen links de actiekleur, ook in paginablokken die in de
   case staan (tekst-media, tabel, ...). Bullets niet: in de actiekleur
   leken ze klikbaar (wens Rene), dus ze nemen de tekstkleur van het
   kleurthema (wit op donker, zwart op een lichte case). */
.case,
.section--caseblok {
	--bullet-kleur: var(--case-tekst-op-donker, var(--c-white));
	--link-kleur: var(--case-actie-op-donker, var(--case-actie));
}

main ul:not([class]) {
	list-style: none;
	padding-left: 0;
}

main ul:not([class]) > li {
	position: relative;
	padding-left: 1.556em;
}

main ul:not([class]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 0.778em;
	height: 0.667em;
	background: var(--bullet-kleur);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 9.44606C0 4.23267 4.25191 4.57764e-05 9.48906 4.57764e-05H47.9919V9.44606H14.3529V15.3753H0V9.44606Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 39.9828V22.3083H33.639V16.3791H47.9919V22.3083C47.9919 27.5217 43.7399 31.7543 38.5028 31.7543H14.3464L0 39.9828Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 9.44606C0 4.23267 4.25191 4.57764e-05 9.48906 4.57764e-05H47.9919V9.44606H14.3529V15.3753H0V9.44606Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 39.9828V22.3083H33.639V16.3791H47.9919V22.3083C47.9919 27.5217 43.7399 31.7543 38.5028 31.7543H14.3464L0 39.9828Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Knoppen in de leestekst: geen leeslink-underline, tekstpadding, groene
   linkkleur (groen op groen was onzichtbaar) of linkpijltje erop */
.entry-content a.button {
	background-image: none !important;
	text-decoration: none;
	color: var(--c-black);
}

.entry-content a.button::after {
	content: none;
}

.insight-single .entry-content .button {
	margin-top: 8px;
}

/* Consistente verticale ritmiek in de leestekst: vaste afstanden in plaats
   van em-marges die per kopgrootte verschillen. Een kop direct na een
   andere kop schuift aan; het eerste element heeft geen ruimte erboven. */
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content > div {
	margin: 0 0 22px;
}

.entry-content h2 { margin: 72px 0 20px; }
.entry-content h3 { margin: 56px 0 16px; }
.entry-content h4 { margin: 44px 0 14px; }
.entry-content h5,
.entry-content h6 { margin: 40px 0 12px; }

.entry-content > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.entry-content :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: 16px; }

.entry-content figure { margin: 36px 0; }
.entry-content figure + :is(h2, h3, h4, h5, h6) { margin-top: 56px; }

/* Embeds in de leestekst (oEmbed van YouTube, Vimeo en dergelijke): de
   iframe komt met een vaste 500 x 281 en stak op mobiel buiten de pagina.
   Alles op kolombreedte; video's op 16:9. */
.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
}

.entry-content .wp-block-embed.wp-has-aspect-ratio iframe,
.entry-content .wp-block-embed.is-type-video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.entry-content .wp-block-embed.wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }
.entry-content .wp-block-embed.wp-embed-aspect-1-1 iframe { aspect-ratio: 1 / 1; }

/* Zelfde ritme nogmaals op insight-niveau, zodat geen specifiekere
   insight-regel het stilletjes kan overschrijven. */
.insight-single .entry-content h2 { margin: 72px 0 20px; }
.insight-single .entry-content h3 { margin: 56px 0 16px; }
.insight-single .entry-content h4 { margin: 44px 0 14px; }
.insight-single .entry-content h5,
.insight-single .entry-content h6 { margin: 40px 0 12px; }

.insight-single .entry-content > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.insight-single .entry-content :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: 16px; }

.insight-single .entry-content figure { margin: 36px 0; }
.insight-single .entry-content figure + :is(h2, h3, h4, h5, h6) { margin-top: 56px; }

/* Genummerde lijsten in de leestekst: mintgroene nummers, netjes uitgelijnd
   in dezelfde kolom als de brand-bullets. */
.insight-single .entry-content ol {
	list-style: none;
	counter-reset: sbd-lijst;
	padding-left: 0;
}

.insight-single .entry-content ol > li {
	position: relative;
	padding-left: 34px;
	counter-increment: sbd-lijst;
}

.insight-single .entry-content ol > li::before {
	content: counter(sbd-lijst, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.18em;
	font-size: var(--fs-small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--c-green);
}

/* Foto-onderschriften: lucht tussen beeld en tekst, stil grijs en klein */
.entry-content figcaption {
	margin-top: 14px;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--text-muted);
}

/* Artikelpagina: ademruimte onderaan, niet direct tegen de footer aan */
.insight-single {
	padding-bottom: clamp(80px, 9vw, 150px);
}

/* Cursorpil (Osmo cursor-marquee, cursor-pil.js): groene pil op de cursor
   boven elk element met data-cursor-marquee-text. Lange teksten lopen door
   de pil, de vaste variant (projectkaarten: OPEN) staat stil. */
.cursor-marquee {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
	.cursor-marquee { display: flex; }
}
.cursor-marquee__card {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: var(--c-black);
	background: var(--c-green);
	font-family: var(--font-ui);
	font-size: 20px;
	line-height: 1;
	transition: clip-path 0.4s cubic-bezier(0.75, 0, 0.25, 1), transform 0.4s cubic-bezier(0.75, 0, 0.25, 1), opacity 0.2s ease;
	transition-delay: 0s, 0s, 0.25s;
	transform: translateY(0%) rotate(0.001deg);
	clip-path: inset(calc(50% - 0.25em) round 50em);
	will-change: clip-path;
	opacity: 0;
}
/* Geen bolletje in rust: de pil is er alleen tijdens hover. Bij het
   verlaten klapt hij eerst dicht (clip-path) en fadet dan pas weg. */
[data-cursor-marquee-status="active"] .cursor-marquee__card {
	clip-path: inset(0 round 50em);
	transform: translateY(-25%) rotate(0.001deg);
	opacity: 1;
	transition-delay: 0s;
}
@keyframes sbdCursorMarquee { to { transform: translateX(-100%); } }
.cursor-marquee__text-span {
	position: relative;
	display: block;
	white-space: nowrap;
	transform-origin: 0;
	/* Verticaal ruimte voor de pil, horizontaal krap: de herhalingen staan
	   dicht op elkaar. */
	padding: 0.5em 0.4em;
	animation: sbdCursorMarquee 10s linear infinite paused;
	transition: opacity 0.15s ease-in-out 0.25s;
	opacity: 0;
}
[data-cursor-marquee-status="active"] .cursor-marquee__text-span {
	transition: opacity 0.15s ease-in-out 0s;
	opacity: 1;
}
.cursor-marquee__text-span.is--duplicate { position: absolute; left: 100%; }
/* Vaste tekst: niets loopt, de pil krijgt normale zijmarges. */
.cursor-marquee.is-vast .cursor-marquee__text-span {
	animation: none;
	padding: 0.5em 0.9em;
	letter-spacing: 0.04em;
}
.cursor-marquee.is-vast .cursor-marquee__text-span.is--duplicate { display: none; }
@media (prefers-reduced-motion: reduce) {
	.cursor-marquee { display: none; }
}