/**
 * 24eight - stijl.
 *
 * Gebouwd naar Figma "24Eight" (frame MacBook Pro 14", 1512 x 982). Op
 * desktop schaalt alles mee met --s (1 designpixel), zodat het scherm er op
 * elke maat uitziet als het ontwerp. Onder 860px (of staand) stapelt het:
 * kop, paneel, tekst.
 *
 * Lagen: menu (onder alles, z-index -1) < raster (tekst) < .paneel (zwarte
 * laag voor intro en paginawissel) < canvas met de kubus < knop op het
 * paneel < kop (het logo) en menupil. De menupil is de lichte, warme knop,
 * te zien op wit, op het zwarte paneel en op het bruine menu.
 */

@font-face {
	font-family: 'Michroma';
	src: url('../fonts/michroma-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Michroma';
	src: url('../fonts/michroma-400-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--zwart: #000;
	--wit: #fff;
	--goud: #e9b04f;
	--goud-licht: #ffd98a;
	--bruin: #3b281d; /* knoppen, kaarten en het menu, zoals mollie.com */
	--bruin-licht: #4a3426;
	--bruin-diep: #24170f;
	--bruin-donker: #2b1c14; /* hover van de bruine knoppen */
	--osmo: cubic-bezier(0.625, 0.05, 0, 1);

	/* 1 designpixel: het frame is 1512 x 982. */
	--s: min(calc(100vw / 1512), calc(100vh / 982));
	--rand: calc(10 * var(--s));
	--rad: calc(8 * var(--s));
	--paneel-b: calc(100vw * 645 / 1512);

	/* Plek van het paneel in px vanaf de schermranden. paneel.js houdt dit
	   bij; dit is de stand zonder JS. */
	--p-t: var(--rand);
	--p-r: var(--rand);
	--p-b: var(--rand);
	--p-l: calc(100vw - var(--rand) - var(--paneel-b));
	--p-rad: var(--rad);
}
@supports (height: 100svh) {
	:root { --s: min(calc(100vw / 1512), calc(100svh / 982)); }
}

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

html {
	background: var(--wit);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
/* Geen eigen achtergrond: het menu (z-index -1) ligt eronder en komt in
   beeld als de pagina (het raster, wit) als kaart opzij schuift. */
body {
	margin: 0;
	color: var(--zwart);
	font-family: 'Michroma', 'Eurostile', 'Arial', sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--goud); color: var(--zwart); }

.skip {
	position: fixed;
	left: 12px;
	top: 12px;
	z-index: 20;
	padding: 10px 16px;
	background: var(--zwart);
	color: var(--wit);
	font-size: 13px;
	text-decoration: none;
	border-radius: 999px;
	transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Raster ---------- */

.raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--paneel-b);
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas:
		"kop plek"
		"inhoud plek";
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--rand) var(--rand) var(--rand) 0;
	background: var(--wit);
}

/* De kop ligt vast boven de linkerkolom (buiten het raster, zoals de
   menupil): het logo blijft staan als je scrolt, en op de home landt de 8
   erin (acht.js). Het raster houdt zijn eerste rij vrij (::before, de
   hoogte meet maat.js). */
.raster::before {
	content: '';
	grid-area: kop;
	height: var(--kop-h, calc(85 * var(--s)));
}
.kop {
	position: fixed;
	top: var(--rand);
	left: 0;
	right: calc(var(--rand) + var(--paneel-b));
	z-index: 9;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	min-height: calc(82 * var(--s));
	padding: calc(32 * var(--s)) calc(54 * var(--s)) 0 calc(40 * var(--s));
	pointer-events: none;
}
.kop__logo {
	position: relative;
	display: block;
	width: calc(94.7 * var(--s));
	aspect-ratio: 1.8;
	border-radius: 4px;
	pointer-events: auto;
}
.kop__logo-beeld,
.kop__logo-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: var(--logo-zicht, 1);
}
.kop__logo-beeld { object-fit: contain; }
.has-logo .kop__logo-beeld { visibility: hidden; }
/* Op de home staat het logo eerst als 8 in de hero; acht.js zet
   --logo-zicht en is-logo-weg op de kop tot hij is overgevlogen. Met het
   toetsenbord is het logo er gewoon, en bij een paginawissel van of naar de
   home komt of gaat het zacht. */
.kop.is-logo-weg .kop__logo { pointer-events: none; }
.kop__logo:focus-visible > * { opacity: 1; }
.is-transitioning .kop__logo > * { transition: opacity 0.6s var(--osmo); }

.paneelplek {
	grid-area: plek;
	position: sticky;
	top: var(--rand);
	align-self: start;
	height: calc(100vh - 2 * var(--rand));
	height: calc(100svh - 2 * var(--rand));
	overflow: hidden;
	background: var(--zwart);
	border-radius: var(--rad);
}
/* Stilstaande render als WebGL niet kan; kubus.js zet .has-kubus. */
.paneelplek__beeld {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 79%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.has-kubus .paneelplek__beeld { display: none; }

.schil {
	grid-area: inhoud;
	display: flex;
	align-items: flex-end;
	min-height: 0;
}
.pagina {
	width: 100%;
	/* Onderkant van de knop altijd 40px boven de onderrand van het scherm. */
	padding: 0 calc(54 * var(--s)) calc(40px - var(--rand)) calc(40 * var(--s));
	outline: none;
}

.tekst {
	max-width: calc(708 * var(--s));
	margin: 0 0 calc(31.8 * var(--s));
	font-size: calc(24 * var(--s));
	font-weight: 400;
	line-height: 1.4167;
	letter-spacing: 0;
}
.knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: calc(12 * var(--s));
}

/* ---------- Pillen ---------- */

.pil {
	--pil: var(--zwart);
	--pil-op: var(--wit);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(50 * var(--s));
	padding: 0 calc(29 * var(--s));
	overflow: hidden;
	border: 1px solid var(--pil);
	border-radius: 999px;
	background: none;
	color: var(--pil);
	font: inherit;
	font-size: calc(14 * var(--s));
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.5s var(--osmo);
}
.pil::before {
	content: '';
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: var(--pil);
	transform: translateY(101%);
	transition: transform 0.6s var(--osmo);
}
.pil__label {
	display: block;
	overflow: hidden;
	line-height: 1.45;
}
.pil__rol {
	position: relative;
	display: block;
	transition: transform 0.6s var(--osmo);
}
.pil__rol::after {
	content: attr(data-tekst);
	position: absolute;
	left: 0;
	top: 100%;
}
@media (hover: hover) and (pointer: fine) {
	.pil:hover { color: var(--pil-op); }
	.pil:hover::before { transform: none; }
	.pil:hover .pil__rol { transform: translateY(-100%); }
}
.pil:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 3px;
}

/* ---------- Knoppen: gevuld zoals mollie.com, met het pijltje van Osmo button-009 ---------- */

/* Gevuld in een squircle (corner-shape; waar dat nog niet kan een pil):
   donker chocoladebruin met witte tekst, bij hover een tint donkerder. De
   tweede knop in een rij (of --zacht) licht en warm; op zwart (--licht) ook
   licht. Een pijltje rechts in de tekstkleur: bij hover schiet het rechts
   weg, komt er links een binnen en schuift de tekst mee; bij klikken veert
   de knop in. */
:root {
	--button-009-color: var(--wit);
	--button-009-color-border: transparent;
	--button-009-color-background: var(--bruin);
	--button-009-color-hover: var(--bruin-donker);
	--button-009-color-focus: var(--goud);
	--button-009-height: calc(50 * var(--s));
	--button-009-border-radius: 999px;
	--button-009-icon-size: calc(12 * var(--s));
	--button-009-padding-right: calc(22 * var(--s));
	--button-009-padding-left: calc(29 * var(--s));
	--button-009-gap: calc(6 * var(--s));
	--button-009-focus-inset: -0.3em;
	--button-009-click-scale: 0.955 0.925;
	--button-009-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
	--button-009-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
	--button-009-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}
.button-009 {
	position: relative;
	display: inline-grid;
	padding: 0;
	outline-style: none;
	background-color: transparent;
	color: var(--button-009-color);
	font-size: calc(14 * var(--s));
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: scale 0.15s var(--button-009-ease-click);
}
.button-009::after {
	content: '';
	position: absolute;
	inset: var(--button-009-focus-inset);
	z-index: 1;
	display: block;
	border-radius: var(--button-009-border-radius);
	transition: box-shadow 0.3s var(--button-009-ease-focus);
	pointer-events: none;
}
.button-009:focus-visible::after { box-shadow: 0 0 0 2px var(--button-009-color-focus); }
.button-009:active { scale: var(--button-009-click-scale); }
.button-009__inner {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--button-009-gap);
	height: var(--button-009-height);
	padding: 0 var(--button-009-padding-right) 0 var(--button-009-padding-left);
	overflow: clip;
	border-radius: var(--button-009-border-radius);
	pointer-events: none;
}
.button-009__icon {
	flex: none;
	width: var(--button-009-icon-size);
	height: var(--button-009-icon-size);
	/* Optisch op het midden van de kleine letters: Michroma staat iets lager
	   dan het midden van de regel. */
	transform: translateY(0.09em);
	transition: translate 0.5s var(--button-009-ease-hover), opacity 0.15s ease-out;
}
.button-009__icon.is--left {
	position: absolute;
	left: var(--button-009-padding-right);
	opacity: 0;
	translate: -1.5em 0 0;
}
.button-009__text {
	flex: none;
	transition: translate 0.5s var(--button-009-ease-hover);
}
.button-009__bg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	border: 1px solid var(--button-009-color-border);
	border-radius: var(--button-009-border-radius);
	corner-shape: squircle;
	background-color: var(--button-009-color-background);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: background-color 0.3s ease;
}
.button-009__inner,
.button-009::after { corner-shape: squircle; }
@media (hover: hover) and (pointer: fine) {
	.button-009:hover .button-009__bg,
	[data-hover]:hover .button-009__bg { background-color: var(--button-009-color-hover); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button-009:is(:hover, :focus-visible) .button-009__text,
	[data-hover]:is(:hover, :focus-visible) .button-009__text {
		translate: calc(var(--button-009-icon-size) + var(--button-009-gap) + var(--button-009-padding-right) - var(--button-009-padding-left)) 0 0;
		transition: translate 0.5s 0.075s var(--button-009-ease-hover);
	}
	.button-009:is(:hover, :focus-visible) .button-009__icon.is--left,
	[data-hover]:is(:hover, :focus-visible) .button-009__icon.is--left {
		translate: 0 0 0;
		opacity: 1;
		transition: translate 0.5s 0.075s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
	}
	.button-009:is(:hover, :focus-visible) .button-009__icon.is--right,
	[data-hover]:is(:hover, :focus-visible) .button-009__icon.is--right {
		translate: 1.5em 0 0;
		opacity: 0;
		transition: translate 0.5s 0.05s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out;
	}
}
@media (prefers-reduced-motion: reduce) {
	.button-009:active { scale: none; }
}
/* Licht en warm: de tweede knop in een rij, en op zwart. */
.button-009--zacht,
.knoppen > .button-009 + .button-009,
.button-009--licht {
	--button-009-color: #111;
	--button-009-color-background: #f7f4f2;
	--button-009-color-hover: #e6e1df;
}
.button-009--licht { --button-009-color-hover: var(--wit); }
/* In een bruin vlak: een tintje lichter dan het vlak, met witte tekst. */
.button-009--toon {
	--button-009-color: var(--wit);
	--button-009-color-background: rgba(255, 255, 255, 0.1);
	--button-009-color-hover: rgba(255, 255, 255, 0.17);
}

/* De menuknop: vast linksboven, de lichte, warme knop (zoals de tweede knop
   in een rij), in een squircle. Bij hover schuift er een iets donkerder
   vlak omhoog. Te zien op wit, op bruin en boven tekst die eronder door
   scrolt. */
.kop__menu {
	--pil: #e6e1df;
	--pil-op: #111;
	position: fixed;
	top: calc(var(--rand) + 32 * var(--s));
	left: calc(40 * var(--s));
	z-index: 9;
	min-width: calc(110 * var(--s));
	border-color: transparent;
	background: #f7f4f2;
	color: #111;
	corner-shape: squircle;
}
/* Hover zoals de andere knoppen: iets donkerder, en links schuift een
   pijltje in, de kant op waar de pagina wegschuift als het menu opengaat
   (staat het open, dan wijst het terug). Niet het vlak van de pil. */
.kop__menu {
	transition: background-color 0.3s ease;
}
.kop__menu::before { display: none; }
.kop__menu .pil__label { transition: translate 0.5s var(--button-009-ease-hover); }
.kop__pijl {
	--pijl: max(10px, calc(12 * var(--s)));
	position: absolute;
	top: calc(50% - var(--pijl) / 2 + 0.09em); /* optisch midden, zoals bij de knoppen */
	left: calc(20 * var(--s));
	width: var(--pijl);
	height: var(--pijl);
	opacity: 0;
	translate: -1em 0;
	transition: translate 0.5s var(--button-009-ease-hover), opacity 0.15s ease-out, rotate 0.5s var(--osmo);
}
.kop__menu[aria-expanded="true"] .kop__pijl { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) {
	.kop__menu:hover { background-color: #e6e1df; }
	.kop__menu:hover .pil__rol { transform: none; }
	.kop__menu:hover .pil__label { translate: 0.55em 0; }
	.kop__menu:hover .kop__pijl {
		opacity: 1;
		translate: 0 0;
		transition: translate 0.5s 0.075s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out, rotate 0.5s var(--osmo);
	}
}
@media (prefers-reduced-motion: reduce) {
	.kop__menu .pil__label,
	.kop__pijl { transition: none; }
}

/* Het label wisselt via stipjes van "menu" naar "sluit" (menu.js). */
.kop__menu .pil__label {
	display: grid;
	place-items: center;
}
.morph > * {
	grid-area: 1 / 1;
	white-space: nowrap;
}
.morph__dots,
.morph__close {
	opacity: 0;
	visibility: hidden;
}
.morph__dots {
	display: flex;
	gap: 4px;
}
.morph__dots i {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	animation: e8-stip 0.9s ease-in-out infinite;
}
.morph__dots i:nth-child(2) { animation-delay: 0.15s; }
.morph__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes e8-stip {
	0%, 100% { opacity: 0.35; transform: translateY(1px); }
	50% { opacity: 1; transform: translateY(-2px); }
}
.kop__burger {
	display: none;
	position: relative;
	width: 18px;
	height: 8px;
}
.kop__burger i {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.5s var(--osmo);
}
.kop__burger i:first-child { top: 0; }
.kop__burger i:last-child { bottom: 0; }
.kop__menu[aria-expanded="true"] .kop__burger i:first-child { transform: translateY(3.25px) rotate(45deg); }
.kop__menu[aria-expanded="true"] .kop__burger i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.paneel-pil {
	position: fixed;
	top: calc(var(--p-t) + 32 * var(--s));
	right: calc(var(--p-r) + 32 * var(--s));
	z-index: 7;
}

/* ---------- Paneel en kubus ---------- */

.paneel {
	position: fixed;
	inset: 0;
	z-index: 5;
	visibility: hidden;
	background: var(--zwart);
	clip-path: inset(var(--p-t) var(--p-r) var(--p-b) var(--p-l) round var(--p-rad));
	pointer-events: none;
}
.paneel.is-los { visibility: visible; }
/* Binnenkomst: tot app.js begint is de pagina wit (geen flits van de
   eindstand); tijdens de intro groeit het paneel als losse laag, dus de
   vaste plek blijft dan nog weg. */
.js.is-loading .kop,
.js.is-loading .kop__menu,
.js.is-loading .schil,
.js.is-loading .paneelplek,
.js.is-loading .paneel-pil,
.js.is-loading .kubus { visibility: hidden; }
.is-intro .paneelplek { visibility: hidden; }
/* Net van taal gewisseld: tot de intro begint het volle zwarte paneel, zoals
   de vorige pagina eindigde (kop.php zet de klasse, app.js krimpt het). */
.is-taalwissel.is-loading .paneel {
	visibility: visible;
	clip-path: inset(var(--rand) round var(--rad));
}

/* Het canvas rendert dekkend zwart (dan is het glas donker, zoals de render)
   en is net als het paneel uitgeknipt op --p-*. */
.kubus {
	position: fixed;
	inset: 0;
	z-index: 6;
	width: 100%;
	height: 100%;
	clip-path: inset(var(--p-t) var(--p-r) var(--p-b) var(--p-l) round var(--p-rad));
	pointer-events: none;
}

/* ---------- Paginawissel (wissel.js) ---------- */

/* De oude pagina wijkt naar achteren en schuift naar links weg, de nieuwe
   schuift van rechts in: twee vaste kaarten in 3D (perspectief op body).
   Erachter donkerbruin; het menu (onder de pagina) is dan weg. De kop en de
   knoppen blijven erboven. */
html.is-wisselend { background: var(--bruin-diep); }
.is-wisselend .lade {
	opacity: 0;
	transition: opacity 0.3s ease;
}
/* Perspectief op body maakt body het vlak voor de vaste kaarten (en body is
   dan leeg): vandaar een vaste maat in plaats van inset. Zonder
   preserve-3d, dan blijft de kop gewoon bovenop. */
body.is-diepte { perspective: 100vw; }
.wissel-kaart {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: clip;
	background: var(--wit);
	pointer-events: none;
	transform-style: preserve-3d;
	will-change: transform;
	backface-visibility: hidden;
}
.wissel-kaart--oud { z-index: 6; }
.wissel-kaart--nieuw { z-index: 5; }
/* De nieuwe pagina in een kopie van het raster: de stilstaande renders waar
   straks WebGL komt. */
.raster.raster--kopie .tweevier__acht-beeld { display: block; }
.raster--kopie:not(.is-wit) .paneelplek__beeld { display: block; }

/* ---------- Menu (zoals innovatiemedia.nl) ---------- */

/* Het menu ligt onder de pagina (Osmo "Fixed Underlay Navigation"). De
   menupil schuift de hele pagina (raster, kubus en de knop op het paneel)
   naar rechts en maakt hem kleiner: een kaart met ronde hoeken op het
   donkere vlak, die iets dimt (menu.js). Alleen de menupil blijft staan. */
:root {
	--lade-b: min(calc(620 * var(--s)), calc(100vw - 4rem));
	--lade-x: calc(40 * var(--s));
	--lade-top: calc(var(--rand) + 126 * var(--s));
	--lade-kleur: var(--bruin);
	--lade-kleur-2: var(--bruin-licht);
}
.lade {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--lade-kleur);
	visibility: hidden;
}
.menu-open .lade { visibility: visible; }
/* De body ligt boven het menu (z-index -1) en zou elke klik vangen: zolang
   het menu open is gaan klikken erdoorheen, behalve op wat erbovenop hoort. */
.menu-open body { pointer-events: none; }
.menu-open .lade,
.menu-open .lade-vang,
.menu-open .kop__menu,
.menu-open .skip { pointer-events: auto; }
.lade__paneel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--lade-b);
	overflow: hidden;
	color: var(--wit);
}
.lade__inhoud {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--lade-top) var(--lade-x) var(--lade-x);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.lade__inhoud::-webkit-scrollbar { display: none; }
.lade__inhoud > * { flex-shrink: 0; }
.lade__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lade__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--s));
	padding: calc(7 * var(--s)) 0;
	color: var(--wit);
	font-size: calc(38 * var(--s));
	line-height: 1.08;
	text-decoration: none;
	transition: opacity 0.45s var(--osmo), color 0.35s ease;
}
/* Masker voor het oprijzen. Michroma zakt met de g 0.21em onder de
   basislijn, dus onder iets extra ruimte (die de volgende regel weer
   opheft). */
.lade__masker {
	display: block;
	min-width: 0;
	overflow: hidden;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}
.lade__label {
	display: block;
	white-space: nowrap;
}
.lade__pijl {
	display: grid;
	flex: none;
	place-items: center;
	width: calc(48 * var(--s));
	height: calc(48 * var(--s));
	border-radius: 50%;
	corner-shape: squircle; /* zoals de knoppen; elders een rondje */
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--wit);
	transition: background-color 0.35s var(--osmo), color 0.35s var(--osmo);
}
.lade__pijl svg {
	width: 40%;
	height: 40%;
	transition: rotate 0.5s var(--osmo);
}
.lade__link[aria-current="page"] { color: var(--goud); }
.lade__link[aria-current="page"] .lade__pijl {
	background-color: rgba(233, 176, 79, 0.2);
	color: var(--goud);
}
@media (hover: hover) and (pointer: fine) {
	.lade__lijst:has(.lade__link:hover) .lade__link:not(:hover) { opacity: 0.3; }
	.lade__link:hover { color: var(--goud-licht); }
	.lade__link:hover .lade__pijl {
		background-color: #f7f4f2;
		color: #111;
	}
	.lade__link:hover .lade__pijl svg { rotate: 45deg; }
}
.lade__link:focus-visible {
	outline: none;
	color: var(--goud-licht);
}
.lade__link:focus-visible .lade__pijl {
	background-color: var(--goud);
	color: var(--zwart);
}

/* Het vlak met de gouden vorm (menuvorm.js), in de stijl van het logo; hij
   wisselt van vorm bij hover. Groeit mee met de ruimte die over is. Zonder
   WebGL de stilstaande render van het logo. */
.lade__beeld {
	position: relative;
	flex: 1 0 clamp(9rem, 26vh, 22rem);
	margin-top: calc(36 * var(--s));
	overflow: hidden;
	border-radius: calc(12 * var(--s));
	background:
		radial-gradient(60% 70% at 50% 55%, rgba(233, 176, 79, 0.14), transparent 70%),
		var(--bruin-diep);
}
.lade__beeld-img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	transform: translate(-50%, -50%);
}
.lade__vorm {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.has-menuvorm .lade__beeld-img { display: none; }

/* Onderin: een kaartje naar de gratis audit, de tijd in Amsterdam en de
   taalwisselaar. */
.lade__onder {
	display: grid;
	gap: calc(22 * var(--s));
	padding-top: calc(22 * var(--s));
}
.lade__kaart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--s));
	padding: calc(18 * var(--s)) calc(18 * var(--s)) calc(18 * var(--s)) calc(22 * var(--s));
	border-radius: calc(12 * var(--s));
	background: var(--lade-kleur-2);
	color: var(--wit);
	text-decoration: none;
}
.lade__kaart:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 3px;
}
.lade__kaart-zin {
	color: rgba(255, 255, 255, 0.65);
	font-size: max(12px, calc(13.5 * var(--s)));
	line-height: 1.6;
}
.lade__kaart-knop {
	--button-009-height: calc(44 * var(--s));
	flex: none;
}
.lade__voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.lade__tijd {
	margin: 0;
	color: rgba(255, 255, 255, 0.45);
	font-size: max(11px, calc(12 * var(--s)));
	line-height: 1;
}
/* Vaste breedte: de cijfers van Michroma zijn net niet even breed. */
.lade__klok {
	display: inline-block;
	width: 6.6em;
	margin-left: 0.5em;
	color: rgba(255, 255, 255, 0.8);
}

/* Taalwisselaar: een pil met een wit vlak onder de gekozen taal. Bij hover
   op de andere taal rekt het vlak er alvast naartoe; bij een klik glijdt
   het erheen en rekt het onderweg uit (menu.js zet --taal-i en is-wissel). */
.taal {
	--taal-pad: 4px;
	position: relative;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	padding: var(--taal-pad);
	border-radius: 999px;
	corner-shape: squircle;
	background-color: rgba(255, 255, 255, 0.1);
	font-size: max(11px, calc(12 * var(--s)));
	line-height: 1;
}
.taal__vlak {
	position: absolute;
	top: var(--taal-pad);
	bottom: var(--taal-pad);
	left: var(--taal-pad);
	width: calc(50% - var(--taal-pad));
	border-radius: 999px;
	corner-shape: squircle;
	background: #f7f4f2;
	transform-origin: calc(var(--taal-i, 0) * 100%) 50%;
	translate: calc(var(--taal-i, 0) * 100%) 0;
	transition: translate 0.7s var(--osmo), scale 0.5s var(--osmo);
}
.taal__optie {
	position: relative;
	padding: 0.95em 1.4em;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	text-decoration: none;
	transition: color 0.4s var(--osmo);
}
.taal__optie[aria-current] { color: #111; }
.taal__optie:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 2px;
	border-radius: 999px;
}
@media (hover: hover) and (pointer: fine) {
	.taal__optie:not([aria-current]):hover { color: var(--wit); }
	.taal:has(.taal__optie:not([aria-current]):hover) .taal__vlak { scale: 1.16 1; }
}
.taal.is-wissel .taal__vlak { animation: taal-rek 0.7s var(--osmo); }
@keyframes taal-rek {
	0% { scale: 1.16 1; }
	45% { scale: 1.45 0.82; }
	100% { scale: 1 1; }
}

/* Ligt over de weggeschoven pagina: een klik erop sluit het menu. */
.lade-vang {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--lade-b);
	z-index: 50;
	visibility: hidden;
	cursor: pointer;
}
.menu-open .lade-vang { visibility: visible; }

/* De pagina als kaart: dimt iets zolang het menu open is. */
.menu-anim .raster,
.menu-anim .kop,
.menu-anim .kubus,
.menu-anim .paneel-pil { transition: opacity 0.4s ease; }
.menu-dim .raster,
.menu-dim .kop,
.menu-dim .kubus,
.menu-dim .paneel-pil { opacity: 0.7; }
.is-kaart .raster { will-change: transform; }

/* ---------- Footer (zoals innovatiemedia.nl) ---------- */

/* Een donkerbruin vlak dat vast onder de pagina ligt (z-index -1, net als
   het menu, dat er in de DOM na komt en er dus overheen valt). Na het
   raster staat een lege ruimte zo hoog als de inhoud van de footer
   (--voet-h, voet.js); scrol je daarin, dan wordt de pagina een kaart die
   kleiner wordt en naar boven wegschuift, met ronde hoeken en iets
   donkerder (voet.js zet transform en clip-path, --voet-dim op het
   raster). Tot dan is hij onzichtbaar, maar wel bereikbaar met het
   toetsenbord. Past hij niet in het scherm (laag mobiel), dan scrolt hij
   gewoon mee (is-lang). Zonder JavaScript een gewone footer onder de
   pagina. */
.raster { position: relative; }
.is-onder .raster::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--bruin-diep);
	opacity: var(--voet-dim, 0);
	pointer-events: none;
}
html.is-onder { background: var(--bruin-diep); }
/* Body (en de lege ruimte) liggen boven de footer en zouden elke klik vangen:
   zolang hij te zien is gaan klikken erdoorheen, behalve op wat erbovenop
   hoort. Net als bij het menu. */
.is-onder body { pointer-events: none; }
.is-onder :is(.raster, .kop__menu, .paneel-pil, .skip, .voet) { pointer-events: auto; }
.voet-ruimte {
	position: relative;
	height: var(--voet-h, auto);
}
.voet {
	--voet-tekst: max(11px, calc(12 * var(--s)));
	position: fixed;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--bruin-diep);
	color: var(--wit);
	opacity: 0;
}
.is-onder .voet,
.voet:focus-within { opacity: 1; }
.voet.is-lang {
	position: absolute;
	inset: 0 0 auto;
}
html:not(.js) .voet {
	position: static;
	opacity: 1;
}
/* Bij een paginawissel weg, behalve als hij op de oude kaart mee gaat
   (wissel.js verhuist hem dan uit de ruimte). */
.is-wisselend .voet-ruimte > .voet { opacity: 0; }
.voet__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"links merk"
		"onder onder";
	align-items: end;
	gap: calc(44 * var(--s)) calc(60 * var(--s));
	width: 100%;
	padding: calc(72 * var(--s)) calc(40 * var(--s)) calc(32 * var(--s));
}
.voet__links {
	grid-area: links;
	display: grid;
	gap: calc(52 * var(--s));
	min-width: 0;
}
.voet__kolommen {
	display: flex;
	flex-wrap: wrap;
	gap: calc(40 * var(--s)) calc(120 * var(--s));
}
.voet__titel {
	margin: 0 0 calc(22 * var(--s));
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--voet-tekst);
	letter-spacing: 0.05em;
	line-height: 1;
}
.voet__lijst {
	display: grid;
	justify-items: start;
	gap: calc(6 * var(--s));
	margin: 0;
	padding: 0;
	list-style: none;
}
/* De naam rolt bij hover omhoog uit zijn masker en komt er goud onder weer
   in (zoals de pillen); de rest van de lijst dimt, zoals in het menu. Een
   branche zonder eigen pagina is gewone tekst (voet__naam). */
.voet__link,
.voet__naam {
	display: block;
	color: var(--wit);
	font-size: max(16px, calc(24 * var(--s)));
	line-height: 1.35;
	white-space: nowrap;
	transition: opacity 0.45s var(--osmo);
}
.voet__link {
	overflow: hidden;
	text-decoration: none;
}
.voet__rol {
	position: relative;
	display: block;
	transition: transform 0.6s var(--osmo);
}
.voet__rol::after {
	content: attr(data-tekst);
	position: absolute;
	top: 100%;
	left: 0;
	color: var(--goud-licht);
}
.voet__link[aria-current="page"] { color: var(--goud); }
@media (hover: hover) and (pointer: fine) {
	.voet__lijst:has(.voet__link:hover) :is(.voet__link, .voet__naam):not(:hover) { opacity: 0.4; }
	.voet__link:hover .voet__rol { transform: translateY(-100%); }
}
.voet__link:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 2px;
	border-radius: 4px;
}
/* De branches: vijf tegelijk. Om de paar tellen schuift de bovenste omhoog
   weg en komt er onderaan een bij (voet.js); zolang dat loopt staat de
   hoogte vast en wordt er bijgesneden. Hover of focus: even stil. */
.voet__rouleer .voet__lijst > li:nth-child(n+6) { display: none; }
.voet__rouleer .voet__lijst > li.is-komt { display: block; }
.voet__rouleer.is-bezig { overflow: clip; }

/* Eén rij pillen: de tijd in Amsterdam (met een stipje dat zacht klopt), de
   taal en, goud, naar boven. Allemaal even hoog als de taalwisselaar. */
.voet__pillen {
	--voet-pil: calc(2.9em + 8px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(10 * var(--s));
	margin: 0;
	padding: 0;
	font-size: var(--voet-tekst);
	line-height: 1;
	list-style: none;
}
.voet__pillen > li { display: flex; }
.voet__tijd {
	align-items: center;
	gap: 0.6em;
	height: var(--voet-pil);
	padding: 0 1.4em;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	corner-shape: squircle;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
}
/* Vaste breedte: de cijfers van Michroma zijn net niet even breed. */
.voet__klok {
	display: inline-block;
	width: 6.6em;
	color: rgba(255, 255, 255, 0.85);
}
.voet__stip {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--goud);
	animation: voet-klop 2.4s ease-out infinite;
}
@keyframes voet-klop {
	0% { box-shadow: 0 0 0 0 rgba(233, 176, 79, 0.55); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(233, 176, 79, 0); }
}
.voet__boven {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	height: var(--voet-pil);
	padding: 0 1.3em 0 1.5em;
	border-radius: 999px;
	corner-shape: squircle;
	background: var(--goud);
	color: var(--bruin-diep);
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.3s ease, scale 0.15s var(--button-009-ease-click);
}
.voet__boven:active { scale: var(--button-009-click-scale); }
.voet__boven:focus-visible {
	outline: 2px solid var(--goud-licht);
	outline-offset: 3px;
}
/* Het pijltje schiet bij hover omhoog weg en er komt er een van onder in. */
.voet__boven-pijl {
	position: relative;
	width: 1em;
	height: 1em;
	overflow: hidden;
}
.voet__boven-pijl svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: translate 0.5s var(--button-009-ease-hover);
}
.voet__boven-pijl svg + svg { translate: 0 160%; }
@media (hover: hover) and (pointer: fine) {
	.voet__boven:hover { background-color: var(--goud-licht); }
	.voet__boven:hover .voet__boven-pijl svg:first-child { translate: 0 -160%; }
	.voet__boven:hover .voet__boven-pijl svg + svg { translate: 0 0; }
}
.voet__onder {
	grid-area: onder;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(14 * var(--s)) calc(36 * var(--s));
	padding-top: calc(24 * var(--s));
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--voet-tekst);
	line-height: 1.5;
}
.voet__copy {
	margin: 0 0 0 auto;
}

/* Rechts het gouden ∞, dat rechtop rolt tot de 8 (voetvorm.js), met een
   gloed die mee opkomt. Zonder WebGL de render van het logo, rechtop. */
.voet__merk {
	--voet-acht: min(50vh, calc(470 * var(--s)));
	grid-area: merk;
	position: relative;
	width: calc(var(--voet-acht) * 0.86);
	height: var(--voet-acht);
}
@supports (height: 1svh) {
	.voet__merk { --voet-acht: min(50svh, calc(470 * var(--s))); }
}
.voet__merk::before {
	content: '';
	position: absolute;
	inset: -15%;
	background: radial-gradient(closest-side, rgba(233, 176, 79, 0.16), rgba(233, 176, 79, 0.05) 55%, transparent);
	opacity: var(--voet-p, 1);
	pointer-events: none;
}
.voet__merk-beeld {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: none;
	transform: translate(-50%, -50%) rotate(90deg);
}
.voet__vorm {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.has-voetvorm .voet__merk-beeld { display: none; }

/* ---------- Het botje achter "AI-agents" (bot.js) ---------- */

/* Een gouden robotkopje in de tekst, iets groter dan een letter; de negatieve
   marges houden de regel even hoog. Zonder WebGL de tekening. */
.bot {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
	margin: -0.6em 0.02em -0.5em 0.08em;
	vertical-align: middle;
}
.bot svg,
.bot canvas,
.bot-plek canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.bot svg { padding: 0.12em; }
/* De tekening alleen zonder JS of zonder WebGL (bot.js zet .bot-plat). */
.js .bot svg { display: none; }
.js.bot-plat .bot svg { display: block; }
/* Zijn plekjes achter de koppen in de blokken: leeg tot hij er is. */
.bot-plek {
	position: relative;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	margin: -0.35em 0 -0.25em 0.2em;
	vertical-align: middle;
	pointer-events: none;
}
/* De wachtplek rechtsonder in beeld, als er geen plekje in beeld staat. */
.bot-dok {
	position: fixed;
	right: max(16px, calc(28 * var(--s)));
	bottom: max(16px, calc(28 * var(--s)));
	z-index: 8;
	width: max(52px, calc(68 * var(--s)));
	height: max(52px, calc(68 * var(--s)));
	pointer-events: none;
}
.bot-dok canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Onderweg: een vaste laag boven de pagina, onder de kop. */
.bot-laag {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8;
	pointer-events: none;
}
.bot-laag canvas {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	visibility: hidden;
}
.bot-laag canvas.is-onderweg { visibility: visible; }

/* ---------- 24/8 als teller (teller.js) ---------- */

/* Het laatste cijfer is een strook 0-9 in een masker van één regel hoog. Hij
   begint op de 1; 1 tot en met 7 zijn lichtgrijs, de 8 zwart. */
.teller { white-space: nowrap; }
.teller__beeld { display: inline; }
.teller__cijfer {
	display: inline-block;
	height: 1.4167em;
	height: 1lh;
	overflow: hidden;
	vertical-align: top;
}
.teller__strook {
	display: block;
	transform: translateY(-1.4167em);
	transform: translateY(-1lh);
	will-change: transform;
}
.teller__strook > span {
	display: block;
	height: 1.4167em;
	height: 1lh;
	color: #c4c4c4;
	text-align: center;
}
.teller__strook > span:nth-child(9) { color: inherit; }
/* Zonder JS gewoon de tekst. */
html:not(.js) .teller__beeld { display: none; }
html:not(.js) .teller .sr {
	position: static;
	width: auto;
	height: auto;
	clip-path: none;
}

/* ---------- Home: hero en het blok eronder ---------- */

/* De hero vult het eerste scherm (maat.js meet de kop), de knop staat 40px
   boven de onderrand; daaronder scrolt het blok, het paneel blijft staan. */
.pagina--home { padding-bottom: 0; }
.held {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(100vh - 2 * var(--rand) - var(--kop-h, 85px));
	min-height: calc(100svh - 2 * var(--rand) - var(--kop-h, 85px));
	padding-bottom: calc(40px - var(--rand));
}
/* Alles onder de hero (inc/home.php): een laag over de volle breedte, ook
   over de kolom met 248 heen, met links en rechts dezelfde marge als de kop.
   Opgebouwd zoals mollie.com: ingangen, twee kaarten, de werkwijze en
   veelgestelde vragen; daarna de footer. Wit pas vanaf het eerste blok: de woorden in de kolom zijn dan
   al weg (acht.js), dus er schuift geen witte rand overheen. */
.meer {
	--meer-boven: calc(180 * var(--s));
	position: relative;
	z-index: 1;
	margin: 0 calc(-54 * var(--s) - var(--paneel-b)) 0 calc(-40 * var(--s));
	padding: var(--meer-boven) calc(30 * var(--s)) calc(30 * var(--s)) calc(40 * var(--s));
	background: linear-gradient(transparent var(--meer-boven), var(--wit) var(--meer-boven));
}

/* Ingangen: een omlijnd raster van tien, elk met een lijnicoontje dat bij
   hover goud wordt. */
.ingangen {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: calc(14 * var(--s));
	background: rgba(0, 0, 0, 0.1);
}
.ingang {
	display: flex;
	align-items: center;
	gap: calc(14 * var(--s));
	min-height: calc(82 * var(--s));
	padding: calc(18 * var(--s)) calc(24 * var(--s));
	background: var(--wit);
	font-size: max(13px, calc(15 * var(--s)));
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.4s var(--osmo);
}
.ingang .icoon {
	flex: none;
	width: max(18px, calc(22 * var(--s)));
	height: max(18px, calc(22 * var(--s)));
	color: rgba(0, 0, 0, 0.5);
	transition: color 0.4s var(--osmo), transform 0.5s var(--osmo);
}
@media (hover: hover) and (pointer: fine) {
	.ingang:hover { background-color: #f7f6f2; }
	.ingang:hover .icoon {
		color: #a8741c;
		transform: scale(1.12);
	}
}
.ingang:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: -2px;
}

/* Twee zwarte kaarten naast elkaar: label, kop en een gouden link, met
   onderin een beeld dat de kaart bijsnijdt. */
.kaarten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: calc(32 * var(--s));
	margin-top: calc(100 * var(--s));
}
.kaart {
	position: relative;
	isolation: isolate;
	height: calc(720 * var(--s));
	overflow: hidden;
	padding: calc(44 * var(--s));
	border-radius: calc(16 * var(--s));
	background: var(--bruin);
	color: var(--wit);
}
.kaart__kop {
	position: relative;
	z-index: 1;
}
.kaart__label {
	margin: 0 0 calc(16 * var(--s));
	font-size: max(12px, calc(13 * var(--s)));
	letter-spacing: 0.05em;
	opacity: 0.55;
}
.kaart__titel {
	margin: 0 0 calc(22 * var(--s));
	font-size: max(22px, calc(34 * var(--s)));
	font-weight: 400;
	line-height: 1.2;
}
.kaart__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--goud);
	font-size: max(13px, calc(15 * var(--s)));
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}
.kaart__link .icoon {
	width: 1em;
	height: 1em;
	transition: transform 0.4s var(--osmo);
}
.kaart__link:hover .icoon { transform: translateX(3px); }
.kaart__link:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 4px;
}
.icoon { display: block; }

/* Het logoveld: rijen app-iconen, groter dan de kaart en schuin in de
   ruimte gelegd, zoals bij mollie.com (dezelfde kanteling, met perspectief:
   voorin groter, achterin kleiner). tegels.js laat de rijen lopen; af en toe
   licht er een goud op. Sterker kantelen maakt de voorste logo's zo groot
   dat ze onscherp worden. */
.logoveld {
	--logo-diepte: calc(1100 * var(--s));
	position: absolute;
	left: -10%;
	width: 122%;
	bottom: calc(-70 * var(--s));
	display: grid;
	gap: calc(18 * var(--s));
	transform: perspective(var(--logo-diepte)) rotate(-14deg) rotateX(33deg) rotateY(16deg);
	transform-origin: 50% 70%;
}
.logoveld__rij {
	display: flex;
	width: max-content;
	will-change: transform;
}
.logoveld__set {
	display: flex;
	gap: calc(18 * var(--s));
	padding-right: calc(18 * var(--s));
}
.logoveld__logo {
	flex: none;
	width: calc(146 * var(--s));
	height: calc(146 * var(--s));
	border-radius: 24%;
	/* Schaduw en oplichten volgen de vorm van het logo zelf (rond, zeshoek):
	   geen vlak erachter. Drie lagen, zodat het oplichten kan overvloeien. */
	filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent) drop-shadow(0 calc(10 * var(--s)) calc(26 * var(--s)) rgba(0, 0, 0, 0.5));
	transition: filter 0.6s var(--osmo);
}
.logoveld__logo.is-actief { filter: drop-shadow(0 0 1.5px var(--goud)) drop-shadow(0 0 1.5px var(--goud)) drop-shadow(0 0 calc(30 * var(--s)) rgba(233, 176, 79, 0.6)); }

/* Meldingen van agents aan het werk: steeds een nieuwe bovenaan, de oudste
   zakt onderaan weg (meldingen.js). Erachter gloeit het goud. */
.kaart--agents::before {
	content: '';
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -45%;
	z-index: -1;
	height: 90%;
	background: radial-gradient(closest-side, rgba(233, 176, 79, 0.3), transparent);
}
.meldingen {
	position: absolute;
	top: calc(280 * var(--s));
	left: calc(44 * var(--s));
	right: calc(44 * var(--s));
	bottom: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}
.meldingen__lijst {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.melding {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--s));
	margin-bottom: calc(12 * var(--s));
	padding: calc(14 * var(--s)) calc(18 * var(--s));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: calc(14 * var(--s));
	background: rgba(255, 255, 255, 0.06);
}
.melding__logo {
	flex: none;
	width: max(32px, calc(42 * var(--s)));
	height: max(32px, calc(42 * var(--s)));
	border-radius: 24%;
}
.melding__tekst {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: calc(5 * var(--s));
	min-width: 0;
}
.melding__wat {
	overflow: hidden;
	font-size: max(13px, calc(16 * var(--s)));
	white-space: nowrap;
	text-overflow: ellipsis;
}
.melding__waar {
	font-size: max(11px, calc(12 * var(--s)));
	opacity: 0.5;
}
.melding .icoon {
	flex: none;
	width: max(16px, calc(20 * var(--s)));
	height: max(16px, calc(20 * var(--s)));
	color: var(--goud);
}
/* Wat de agent aan jou voorlegt: goud omrand. */
.melding--jij {
	border-color: rgba(233, 176, 79, 0.5);
	background: rgba(233, 176, 79, 0.1);
}

/* Werkwijze: links een bruine kaart met telkens één stap (zonder nummer) en
   onderin puntjes; het actieve puntje is een balkje dat in zes seconden vol
   loopt, dan wisselt de stap (stappen.js). Rechts, even hoog, een licht vlak
   met per stap een gouden vorm (stapvorm.js). */
.stappen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: calc(32 * var(--s));
	margin-top: calc(100 * var(--s));
}
.stappen__kaart {
	display: flex;
	flex-direction: column;
	min-height: calc(640 * var(--s));
	padding: calc(44 * var(--s));
	border-radius: calc(16 * var(--s));
	background: var(--bruin);
	color: var(--wit);
}
/* Alle stappen in dezelfde cel: het vak is zo hoog als de langste stap. */
.stappen__stappen {
	display: grid;
	flex: 1;
	align-items: end;
}
.stap {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 0.4s var(--osmo), transform 0.6s var(--osmo), visibility 0s 0.6s;
}
.stap.is-actief {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.6s var(--osmo) 0.15s, transform 0.8s var(--osmo) 0.15s, visibility 0s;
}
/* Zonder JS: alle stappen onder elkaar. */
html:not(.js) .stap {
	grid-area: auto;
	margin-top: calc(24 * var(--s));
	opacity: 1;
	visibility: visible;
	transform: none;
}
.stap__titel {
	margin: 0 0 calc(14 * var(--s));
	color: var(--goud-licht);
	font-size: max(20px, calc(28 * var(--s)));
	font-weight: 400;
	line-height: 1.25;
}
.stap__tekst {
	max-width: 30em;
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: max(14px, calc(16 * var(--s)));
	line-height: 1.7;
}
.stappen__voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--s));
	margin-top: calc(36 * var(--s));
}
.stippen {
	display: flex;
	align-items: center;
	gap: max(6px, calc(8 * var(--s)));
}
.stip {
	position: relative;
	width: max(8px, calc(10 * var(--s)));
	height: max(8px, calc(10 * var(--s)));
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	transition: width 0.5s var(--osmo), background-color 0.3s ease;
}
.stip.is-actief {
	width: max(36px, calc(46 * var(--s)));
	background: rgba(255, 255, 255, 0.18);
}
.stip i {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--goud);
	transform: scaleX(0);
	transform-origin: left;
}
.stip.is-actief i { transform: scaleX(var(--p, 0)); }
@media (hover: hover) and (pointer: fine) {
	.stip:not(.is-actief):hover { background: rgba(255, 255, 255, 0.45); }
}
.stip:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 3px;
}

.stappen__beeld {
	position: relative;
	min-height: calc(640 * var(--s));
	overflow: hidden;
	border-radius: calc(16 * var(--s));
	background: #f5f3ee;
}
.stappen__vorm {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Zonder WebGL: de stilstaande render van het logo. */
.stappen__beeld-img {
	position: absolute;
	top: 46%;
	left: 50%;
	width: 44%;
	transform: translate(-50%, -50%);
}
.has-stapvorm .stappen__beeld-img { display: none; }

/* Veelgestelde vragen: links de kop (blijft staan), rechts de vragen. Ze
   klappen open met een plusje dat een kruisje wordt; één tegelijk open
   (details name). */
.vragen__titel {
	margin: 0 0 calc(20 * var(--s));
	font-size: max(26px, calc(52 * var(--s)));
	font-weight: 400;
	line-height: 1.15;
}
.vragen__intro {
	max-width: 34em;
	color: #4a4a4a;
	font-size: max(14px, calc(17 * var(--s)));
	line-height: 1.6;
}
.vragen {
	display: grid;
	grid-template-columns: calc(460 * var(--s)) minmax(0, 1fr);
	gap: calc(80 * var(--s));
	align-items: start;
	margin-top: calc(150 * var(--s));
}
.vragen__kop {
	position: sticky;
	top: calc(var(--kop-h, 85px) + 24px);
}
.vragen__intro { margin: 0 0 calc(22 * var(--s)); }
.vragen .kaart__link { color: #a8741c; }
.vragen__lijst { interpolate-size: allow-keywords; }
.vraag { border-top: 1px solid rgba(0, 0, 0, 0.12); }
.vraag:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.vraag__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(24 * var(--s));
	padding: calc(26 * var(--s)) 0;
	cursor: pointer;
	list-style: none;
}
.vraag__kop::-webkit-details-marker { display: none; }
.vraag__kop:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 4px;
	border-radius: 4px;
}
.vraag__titel {
	margin: 0;
	font-size: max(15px, calc(20 * var(--s)));
	font-weight: 400;
	line-height: 1.35;
}
.vraag__plus {
	position: relative;
	flex: none;
	width: max(32px, calc(38 * var(--s)));
	height: max(32px, calc(38 * var(--s)));
	border-radius: 50%;
	corner-shape: squircle;
	background: #f5f3ee;
	transition: background-color 0.4s var(--osmo);
}
.vraag__plus::before,
.vraag__plus::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36%;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.vraag__plus::before { transition: transform 0.6s var(--osmo); }
.vraag__plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.6s var(--osmo);
}
.vraag[open] .vraag__plus {
	background: var(--bruin);
	color: var(--wit);
}
.vraag[open] .vraag__plus::before { transform: translate(-50%, -50%) rotate(45deg); }
.vraag[open] .vraag__plus::after { transform: translate(-50%, -50%) rotate(135deg); }
@media (hover: hover) and (pointer: fine) {
	.vraag:not([open]) .vraag__kop:hover .vraag__plus { background: #ece8e5; }
}
.vraag__antwoord p {
	max-width: 38em;
	margin: 0 0 calc(26 * var(--s));
	color: #4a4a4a;
	font-size: max(14px, calc(16 * var(--s)));
	line-height: 1.7;
}
/* Openklappen in plaats van verspringen, waar de browser dat kan. */
.vraag::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.5s var(--osmo), content-visibility 0.5s allow-discrete;
}
.vraag[open]::details-content { block-size: auto; }

/* De witte hero (html.is-wit, alleen de home): geen zwart paneel maar
   "twenty" en "four" in de rechterkolom, daaronder groot het gouden ∞
   rechtop als 8 (acht.js). Alles schaalt met de kolom (containermaten). De
   kolom blijft staan als je scrolt. */
.tweevier { display: none; }
.paneelplek { container-type: size; }
/* Niet bijsnijden: de 8 vliegt bij het scrollen de kolom uit, naar het logo. */
.is-wit .paneelplek {
	overflow: visible;
	background: transparent;
}
.is-wit .paneelplek__beeld { display: none; }
/* De woorden even groot, "twenty" (4,67 em breed in Michroma) op 85% van de
   kolom; de 8 vult de rest van de hoogte, tot onder de knop rechtsboven. */
.is-wit .tweevier {
	--tv-boven: calc(110 * var(--s));
	--tv-onder: calc(30 * var(--s));
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	justify-items: center;
	padding: var(--tv-boven) 0 var(--tv-onder);
	font-size: min(18.2cqw, 15cqh);
	line-height: 1;
	color: var(--zwart);
}
/* Masker voor het oprijzen, met ruimte voor de staart van de y. Bij het
   verder scrollen worden de woorden waziger en vager (acht.js). */
.tweevier__woord,
.tweevier__acht-woord {
	display: block;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}
.tweevier.is-wazig .tweevier__woord,
.tweevier.is-wazig .tweevier__acht-woord {
	opacity: var(--tv-zicht, 1);
	filter: blur(var(--tv-wazig, 0px));
}
.tweevier__woord { overflow: hidden; }
.tweevier__woord > span,
.tweevier__acht-woord > span { display: block; }
/* "eight": direct onder "four", in hetzelfde ritme. acht.js laat het van
   wazig naar scherp komen als de 8 het logo is geworden; tot dan weg. */
.tweevier__acht-woord {
	position: absolute;
	top: -0.15em;
	left: 0;
	right: 0;
	z-index: 1;
	text-align: center;
	visibility: hidden;
}
.tweevier__acht {
	position: relative;
	width: 100%;
	min-height: 0;
	margin-top: 0.15em;
}
.tweevier__acht-beeld {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(50cqh, 90cqw);
	transform: translate(-50%, -50%) rotate(90deg);
}
.tweevier__acht-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.has-acht .tweevier__acht-beeld { display: none; }
/* De knop rechtsboven staat nu op wit: de donkere knop, met een randje van
   licht zodat hij ook boven de zwarte kaarten te zien is. */
.is-wit .paneel-pil {
	--button-009-color: var(--wit);
	--button-009-color-border: rgba(255, 255, 255, 0.14);
	--button-009-color-background: var(--bruin);
	--button-009-color-hover: var(--bruin-donker);
}

/* ---------- Lange pagina's ---------- */

.pagina--lang {
	align-self: flex-start;
	padding-top: calc(70 * var(--s));
	padding-bottom: calc(120 * var(--s));
}
.label {
	margin: 0 0 calc(20 * var(--s));
	font-size: max(12px, calc(13 * var(--s)));
	letter-spacing: 0.05em;
	opacity: 0.55;
}
.titel {
	max-width: calc(760 * var(--s));
	margin: 0 0 calc(28 * var(--s));
	font-size: max(26px, calc(44 * var(--s)));
	font-weight: 400;
	line-height: 1.22;
}
.intro {
	max-width: calc(680 * var(--s));
	margin: 0 0 calc(80 * var(--s));
	font-size: max(16px, calc(19 * var(--s)));
	line-height: 1.6;
}
.blok {
	display: grid;
	grid-template-columns: calc(74 * var(--s)) minmax(0, 1fr);
	max-width: calc(760 * var(--s));
	padding: calc(40 * var(--s)) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.blok__nr {
	padding-top: 0.5em;
	font-size: max(11px, calc(13 * var(--s)));
	opacity: 0.45;
}
.blok__titel {
	margin: 0 0 calc(14 * var(--s));
	font-size: max(20px, calc(27 * var(--s)));
	font-weight: 400;
	line-height: 1.3;
}
.blok__tekst {
	margin: 0 0 calc(18 * var(--s));
	font-size: max(14px, calc(15.5 * var(--s)));
	line-height: 1.75;
	color: #262626;
}
.blok__lijst {
	display: grid;
	gap: calc(10 * var(--s));
	margin: 0;
	padding: 0;
	list-style: none;
}
.blok__lijst li {
	position: relative;
	padding-left: 1.5em;
	font-size: max(13px, calc(14.5 * var(--s)));
	line-height: 1.65;
	color: #262626;
}
.blok__lijst strong {
	display: block;
	margin-bottom: 0.25em;
	color: var(--zwart);
	font-weight: 400;
}
.blok__lijst li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.48em;
	height: 0.48em;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--goud-licht), var(--goud));
}
.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(24 * var(--s));
	margin-top: calc(6 * var(--s));
}
.duo__kop {
	margin: 0 0 calc(8 * var(--s));
	font-size: max(11px, calc(12 * var(--s)));
	letter-spacing: 0.05em;
	opacity: 0.5;
}
.duo__nu .duo__kop { color: #a8741c; opacity: 1; }
.duo p:last-child {
	margin: 0;
	font-size: max(13px, calc(14.5 * var(--s)));
	line-height: 1.65;
	color: #262626;
}
.vragen__lijst--smal { max-width: calc(760 * var(--s)); }
.tussenkop {
	margin: calc(90 * var(--s)) 0 calc(24 * var(--s));
	font-size: max(20px, calc(27 * var(--s)));
	font-weight: 400;
}
.slot {
	max-width: calc(760 * var(--s));
	margin-top: calc(90 * var(--s));
}
.slot .tekst { margin-bottom: calc(26 * var(--s)); }

/* ---------- Branches (inc/branches.php) ---------- */

/* Het overzicht: per branche een rij met de naam, een korte zin en een paar
   logo's; de hele rij is de link, met rechts een pijl in een rondje dat bij
   hover bruin wordt. */
.branches {
	max-width: calc(760 * var(--s));
	margin: 0 0 calc(40 * var(--s));
	padding: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	list-style: none;
}
.branche { border-top: 1px solid rgba(0, 0, 0, 0.12); }
.branche a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: calc(8 * var(--s)) calc(24 * var(--s));
	align-items: center;
	padding: calc(30 * var(--s)) 0;
	text-decoration: none;
}
.branche__naam {
	grid-column: 1;
	margin: 0;
	font-size: max(20px, calc(27 * var(--s)));
	font-weight: 400;
	line-height: 1.3;
}
.branche__kort {
	grid-column: 1;
	margin: 0;
	font-size: max(14px, calc(15.5 * var(--s)));
	line-height: 1.6;
	color: #262626;
}
.branche__logos {
	display: flex;
	grid-column: 1;
	gap: calc(8 * var(--s));
	margin-top: calc(8 * var(--s));
}
.branche__logos img {
	width: max(26px, calc(32 * var(--s)));
	height: max(26px, calc(32 * var(--s)));
	border-radius: 24%;
}
.branche__pijl {
	display: grid;
	grid-column: 2;
	grid-row: 1 / span 3;
	place-items: center;
	width: max(40px, calc(48 * var(--s)));
	height: max(40px, calc(48 * var(--s)));
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	transition: background-color 0.4s var(--osmo), border-color 0.4s var(--osmo), color 0.4s var(--osmo);
}
.branche__pijl svg {
	width: 40%;
	height: 40%;
	transition: transform 0.5s var(--osmo);
}
@media (hover: hover) and (pointer: fine) {
	.branche a:hover .branche__pijl {
		border-color: var(--bruin);
		background-color: var(--bruin);
		color: var(--wit);
	}
	.branche a:hover .branche__pijl svg { transform: rotate(45deg); }
}
.branche a:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 4px;
}
/* De pakketten van een branche: tegels met logo en naam. */
.pakketten {
	display: flex;
	flex-wrap: wrap;
	gap: calc(10 * var(--s));
	max-width: calc(760 * var(--s));
	margin: 0 0 calc(20 * var(--s));
	padding: 0;
	list-style: none;
}
.pakket {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--s));
	padding: calc(8 * var(--s)) calc(16 * var(--s)) calc(8 * var(--s)) calc(8 * var(--s));
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: calc(12 * var(--s));
	corner-shape: squircle;
	font-size: max(13px, calc(14 * var(--s)));
}
.pakket img {
	width: max(28px, calc(34 * var(--s)));
	height: max(28px, calc(34 * var(--s)));
	border-radius: 24%;
}
.pakketten__noot {
	max-width: calc(680 * var(--s));
	margin: 0;
	font-size: max(13px, calc(14 * var(--s)));
	line-height: 1.7;
	color: #555;
}
/* Kruimelpad in het label: terug naar het overzicht. */
.label__link {
	color: inherit;
	text-underline-offset: 0.25em;
}

/* Verschijnen bij scrollen (verschijn.js). */
.js [data-verschijn] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--osmo), transform 1.1s var(--osmo);
}
.js [data-verschijn].is-zichtbaar {
	opacity: 1;
	transform: none;
}

/* ---------- Gestapeld (telefoon, staande tablet) ---------- */

@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
	:root {
		--rand: 10px;
		--p-l: var(--rand);
		--p-t: 76px;
		--p-b: 40vh;
		--rad: 8px;
	}
	.raster {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(150px, 1fr) auto;
		grid-template-areas:
			"kop"
			"plek"
			"inhoud";
		padding: var(--rand);
	}
	/* Header-rij: menu links, klein logo in het midden, gratis audit rechts. */
	.raster::before { height: var(--kop-h, 66px); }
	.kop {
		left: var(--rand);
		right: var(--rand);
		justify-content: center;
		align-items: center;
		min-height: 66px;
		padding: 0 0 12px;
	}
	.kop__logo { width: 64px; }
	.kop__menu {
		top: 16px;
		left: 16px;
	}
	.paneelplek {
		position: relative;
		top: auto;
		align-self: stretch;
		height: auto;
	}
	.pagina { padding: 26px 6px calc(40px - var(--rand)); }
	.tekst {
		max-width: 34em;
		margin-bottom: 22px;
		font-size: clamp(15px, 3.9vw, 22px);
		line-height: 1.45;
	}
	.knoppen { gap: 10px; }
	.pil {
		height: 46px;
		padding: 0 24px;
		font-size: 13px;
	}
	.button-009 { font-size: 13px; }
	:root {
		--button-009-height: 46px;
		--button-009-icon-size: 11px;
		--button-009-padding-right: 18px;
		--button-009-padding-left: 24px;
		--button-009-gap: 6px;
	}
	.kop__menu { min-width: 0; }
	/* Gratis audit in de header-rij, boven de pagina: de donkere knop, met
	   een randje van licht voor boven zwart. */
	.paneel-pil {
		--button-009-color: var(--wit);
		--button-009-color-border: rgba(255, 255, 255, 0.14);
		--button-009-color-background: var(--bruin);
		--button-009-color-hover: var(--bruin-donker);
		top: 16px;
		right: 16px;
		z-index: 9;
	}
	.paneel-pil .button-009__icon { display: none; }
	.paneel-pil .button-009__inner { padding: 0 22px; }
	.paneel-pil:is(:hover, :focus-visible) .button-009__text { translate: none; }
	:root {
		--lade-b: min(85vw, 26rem);
		--lade-x: 20px;
		--lade-top: 94px;
	}
	.lade__link {
		gap: 14px;
		padding: 6px 0;
		font-size: clamp(22px, 6.6vw, 30px);
	}
	.lade__pijl {
		width: 38px;
		height: 38px;
	}
	.lade__onder {
		gap: 18px;
		padding-top: 32px;
	}
	.lade__beeld {
		margin-top: 24px;
		border-radius: 12px;
	}
	.lade__kaart {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 14px;
		border-radius: 12px;
	}
	.lade__kaart-zin { font-size: 12px; }
	.lade__kaart-knop { --button-009-height: 40px; }
	.pagina--lang { padding: 34px 6px 60px; }
	/* Gestapeld: het paneel krijgt wat er van het eerste scherm overblijft
	   naast de kop en de hero (maat.js), het blok komt eronder. */
	.held { min-height: 0; }
	/* Een vaste hoogte (geen min-height): anders ziet de containerquery van
	   248 (cqh) een hoogte van 0. */
	.raster:has(.held) .paneelplek {
		height: max(150px, calc(100vh - 2 * var(--rand) - var(--kop-h, 66px) - var(--held, 300px)));
		height: max(150px, calc(100svh - 2 * var(--rand) - var(--kop-h, 66px) - var(--held, 300px)));
	}
	.is-wit .tweevier {
		--tv-boven: 12px;
		--tv-onder: 12px;
	}
	/* De maximale breedtes in designpixels (--s) worden hier te smal: de volle kolom. */
	.titel,
	.intro,
	.blok,
	.vragen__lijst--smal,
	.slot,
	.branches,
	.pakketten,
	.pakketten__noot { max-width: none; }
	.meer {
		--meer-boven: 40px;
		margin: 0 -6px;
		padding: 40px 0 0;
	}
	.pagina--home { padding-bottom: 0; }
	.ingangen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ingang {
		gap: 10px;
		min-height: 58px;
		padding: 12px 14px;
	}
	.kaarten {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-top: 40px;
	}
	.kaart {
		height: 540px;
		padding: 28px 22px;
	}
	.logoveld,
	.logoveld__set { gap: 12px; }
	.logoveld { --logo-diepte: 900px; }
	.logoveld__set { padding-right: 12px; }
	.logoveld__logo {
		width: 96px;
		height: 96px;
	}
	.meldingen {
		top: 220px;
		left: 22px;
		right: 22px;
	}
	.melding {
		gap: 12px;
		margin-bottom: 10px;
		padding: 11px 13px;
	}
	.stappen {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		margin-top: 70px;
	}
	.stappen__kaart {
		min-height: 0;
		padding: 32px 22px 26px;
	}
	.stappen__stappen { margin-top: 48px; }
	.stappen__beeld {
		height: 360px;
		min-height: 0;
	}
	.vragen {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-top: 70px;
	}
	.vragen__kop { position: static; }
	.vraag__kop { padding: 20px 0; }
	.vraag__antwoord p { margin-bottom: 20px; }
	.blok { grid-template-columns: 42px minmax(0, 1fr); padding: 28px 0; }
	.duo { grid-template-columns: 1fr; gap: 14px; }
	/* Footer: de kolommen onder elkaar met de 8 klein rechts ernaast
	   (voet__links valt weg in het raster). */
	.voet__inhoud {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"kol merk"
			"onder onder";
		gap: 30px 10px;
		/* Boven ruimte voor de vaste kopbalk (menu, logo, gratis audit). */
		padding: 84px 20px 22px;
	}
	.voet__links { display: contents; }
	.voet__kolommen {
		grid-area: kol;
		flex-direction: column;
		gap: 26px;
	}
	.voet__titel { margin-bottom: 14px; }
	.voet__link,
	.voet__naam { font-size: 17px; }
	.voet__merk {
		--voet-acht: min(150px, 36vw);
		align-self: start;
	}
	.voet__onder {
		gap: 14px 18px;
		padding-top: 20px;
	}
	.voet__copy { margin: 0; }
	/* Kleiner scherm, minder bijzaak: de klok niet. */
	.voet__pillen > .voet__tijd { display: none; }
}

/* Past "menu" niet naast logo en gratis audit: een hamburger. */
@media (max-width: 374px) {
	.kop__menu {
		width: 46px;
		padding: 0;
	}
	.kop__menu .pil__label,
	.kop__pijl { display: none; }
	.kop__burger { display: block; }
	.paneel-pil { font-size: 12px; }
	.paneel-pil .button-009__inner { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.pil,
	.pil::before,
	.pil__rol,
	.lade__link,
	.lade__pijl,
	.lade__pijl svg,
	.taal__vlak,
	.kop__burger i { transition: none; }
	.morph__dots i { animation: none; }
	.taal.is-wissel .taal__vlak { animation: none; }
	.voet__rol,
	.voet__boven-pijl svg { transition: none; }
	.voet__stip { animation: none; }
	.js [data-verschijn] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.vraag::details-content { transition: none; }
}