/* =============================================================================
   Canoz Beton — opmaak
   -----------------------------------------------------------------------------
   Kleuren, hoeken en tempo komen als CSS-variabelen uit het instellingenpaneel
   (zie inc/enqueue.php → canoz_css_variables). Hier staat alleen vorm.

   1. Basis en tokens          8.  Werkwijze met rijdende mixer
   2. Typografie               9.  Cijfers
   3. Indeling                 10. Projecten en beoordelingen
   4. Decoratie                11. Vragen
   5. Knoppen en velden        12. Formulier
   6. Koptekst en navigatie    13. Voettekst en losse onderdelen
   7. Kopsectie en mixer       14. Animatie, responsief, print
============================================================================= */

/* ============================================================ 1. Basis ==== */

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

:root {
	--sp-1: .375rem;
	--sp-2: .75rem;
	--sp-3: 1.125rem;
	--sp-4: 1.75rem;
	--sp-5: 2.5rem;
	--sp-6: 3.5rem;
	--sp-7: 5rem;
	--sp-8: 7rem;

	--breed: 1440px;
	--mid: 1180px;
	--smal: 780px;
	--rand: clamp(1.125rem, 4vw, 3.5rem);

	--font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--duur-1: calc(.22s * var(--c-tempo, 1));
	--duur-2: calc(.45s * var(--c-tempo, 1));
	--duur-3: calc(.8s  * var(--c-tempo, 1));
	--veer: cubic-bezier(.22, .84, .3, 1);
	--soepel: cubic-bezier(.4, 0, .2, 1);

	--kop-h: 84px;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kop-h) + 1rem);
}

body {
	margin: 0;
	background: var(--c-mist, #EFEDE7);
	color: var(--c-ink, #14161A);
	font-family: var(--font);
	font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
	line-height: 1.62;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { background: rgb(var(--c-ink-rgb) / .04); }

/* De lijn-iconen tekenen met een streek, niet met een vlak. CSS wint van het
   fill="none"-attribuut, dus moet het hier ook staan. */
.ico { fill: none; stroke: currentColor; }
.ico * { fill: none; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--c-accent); color: var(--c-on-accent); }

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

.overslaan {
	position: absolute;
	top: -100px; left: var(--rand);
	z-index: 200;
	padding: .8rem 1.2rem;
	background: var(--c-ink);
	color: var(--c-on-ink);
	font: 600 .875rem/1 var(--mono);
	letter-spacing: .06em;
	text-decoration: none;
	transition: top var(--duur-1) var(--soepel);
}
.overslaan:focus { top: .75rem; }

/* ======================================================= 2. Typografie ==== */

h1, h2, h3, h4, h5 {
	margin: 0 0 var(--sp-2);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.h1, h1 { font-size: clamp(2.35rem, 1.4rem + 4.6vw, 4.6rem); font-weight: 900; }
.h2, h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.15rem); }
.h3, h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
.h4, h4 { font-size: clamp(1.125rem, 1rem + .5vw, 1.35rem); font-weight: 700; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

mark.accent {
	background: none;
	color: var(--c-accent-deep);
	position: relative;
	white-space: nowrap;
}
mark.accent::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: .06em;
	height: .1em;
	background: var(--c-accent);
	opacity: .5;
}

.kicker {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 var(--sp-3);
	font: 500 .72rem/1 var(--mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgb(var(--c-ink-rgb) / .58);
}
.kicker i {
	font-style: normal;
	color: var(--c-accent-deep);
}
.kicker::after {
	content: "";
	flex: 0 0 2.5rem;
	height: 1px;
	background: var(--c-line-strong);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duur-3) var(--veer) calc(var(--anim-vertraging, 0ms) + 120ms);
}
.kicker.is-in::after, html.geen-anim .kicker::after { transform: scaleX(1); }
.op-donker .kicker::after, .sectie--donker .kicker::after { background: rgb(255 255 255 / .3); }

.lead {
	font-size: clamp(1.075rem, 1rem + .55vw, 1.3rem);
	line-height: 1.55;
	color: rgb(var(--c-ink-rgb) / .78);
	max-width: 46ch;
}

.op-donker { --c-ink-rgb: 255 255 255; color: var(--c-on-ink); }
.op-donker .kicker { color: rgb(255 255 255 / .6); }
.op-donker .lead { color: rgb(255 255 255 / .76); }
.op-donker mark.accent { color: var(--c-accent); }

/* Vormgegeven inhoud uit de editor. */
.rijk > * + * { margin-top: var(--sp-3); }
.rijk h2 { margin-top: var(--sp-5); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
.rijk h3 { margin-top: var(--sp-4); }
.rijk h2:first-child, .rijk h3:first-child { margin-top: 0; }
.rijk a { color: var(--c-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.rijk a:hover { text-decoration-thickness: 2px; }
.rijk ul, .rijk ol { margin: 0 0 var(--sp-3); padding-left: 1.35rem; }
.rijk li + li { margin-top: .45rem; }
.rijk ul { list-style: none; padding-left: 0; }
.rijk ul li {
	position: relative;
	padding-left: 1.6rem;
}
.rijk ul li::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: .55rem; height: .55rem;
	background: var(--c-accent);
	clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
}
.rijk ol { list-style: none; counter-reset: r; padding-left: 0; }
.rijk ol li { counter-increment: r; position: relative; padding-left: 2.2rem; }
.rijk ol li::before {
	content: counter(r, decimal-leading-zero);
	position: absolute; left: 0; top: .1em;
	font: 500 .8rem/1.6 var(--mono);
	color: var(--c-accent-deep);
}
.rijk blockquote, .canoz-citaat {
	margin: var(--sp-4) 0;
	padding: var(--sp-3) var(--sp-4);
	border-left: 3px solid var(--c-accent);
	background: rgb(var(--c-ink-rgb) / .035);
	font-size: 1.1em;
}
.rijk blockquote cite, .canoz-citaat cite {
	display: block;
	margin-top: var(--sp-2);
	font: 500 .8rem/1.4 var(--mono);
	font-style: normal;
	letter-spacing: .06em;
	color: rgb(var(--c-ink-rgb) / .6);
}
.rijk table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: .95em; }
.rijk th, .rijk td { padding: .7rem .9rem; border-bottom: 1px solid var(--c-line); text-align: left; }
.rijk th { font: 500 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.rijk figure { margin: var(--sp-4) 0; }
.rijk figcaption { margin-top: .6rem; font-size: .85rem; color: rgb(var(--c-ink-rgb) / .6); }
.rijk code { font: .9em var(--mono); background: rgb(var(--c-ink-rgb) / .07); padding: .12em .4em; }
.rijk hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }

.canoz-let-op {
	padding: var(--sp-4);
	border: 1px solid var(--c-line-strong);
	border-left: 4px solid var(--c-accent);
	background: rgb(var(--c-accent-rgb) / .07);
}
.canoz-vinkjes { list-style: none; padding-left: 0; }
.canoz-vinkjes li { position: relative; padding-left: 1.75rem; }
.canoz-vinkjes li::before {
	content: "";
	position: absolute; left: 0; top: .5em;
	width: .95rem; height: .55rem;
	border-left: 2px solid var(--c-accent-deep);
	border-bottom: 2px solid var(--c-accent-deep);
	transform: rotate(-45deg);
}

/* ========================================================= 3. Indeling ==== */

.omhulsel { width: 100%; }

.houder {
	width: 100%;
	max-width: var(--breed);
	margin-inline: auto;
	padding-inline: var(--rand);
}
.houder--mid { max-width: var(--mid); }
.houder--smal { max-width: var(--smal); }

.sectie {
	position: relative;
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}
.sectie--kort { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.sectie--donker { background: var(--c-ink); color: var(--c-on-ink); }
.sectie--vlak { background: #fff; }
.sectie--beton { background: var(--c-mist-deep); }

.sectie__kop {
	display: grid;
	gap: var(--sp-3) var(--sp-6);
	margin-bottom: var(--sp-6);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.sectie__kop--breed {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		align-items: end;
	}
}
.sectie__kop p:last-child { margin-bottom: 0; }

.raster-2, .raster-3, .raster-4 {
	display: grid;
	gap: clamp(1rem, .5rem + 1.6vw, 2rem);
}
@media (min-width: 620px) { .raster-2, .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 940px) { .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ======================================================== 4. Decoratie ==== */

/* Schuin afgesneden hoek — de vormtaal van staalplaat. */
.snip {
	clip-path: polygon(
		0 0,
		calc(100% - var(--c-snip)) 0,
		100% var(--c-snip),
		100% 100%,
		var(--c-snip) 100%,
		0 calc(100% - var(--c-snip))
	);
	border-radius: var(--c-radius);
}
.snip--klein { --c-snip: 8px; }

/* Fijne betonkorrel. */
.grain { position: relative; }
.grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
.sectie--donker .grain::after { mix-blend-mode: overlay; opacity: .3; }

/* Rasterlijnen: subtiele verticale hulplijnen, als op een bouwtekening. */
.raster {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	max-width: var(--breed);
	margin-inline: auto;
	padding-inline: var(--rand);
	display: none;
}
@media (min-width: 1000px) {
	.raster { display: block; }
	.raster::before {
		content: "";
		display: block;
		height: 100%;
		background-image: repeating-linear-gradient(
			to right,
			rgb(var(--c-ink-rgb) / .07) 0 1px,
			transparent 1px calc(100% / 6)
		);
	}
}
.sectie--donker .raster::before {
	background-image: repeating-linear-gradient(
		to right,
		rgb(255 255 255 / .07) 0 1px,
		transparent 1px calc(100% / 6)
	);
}
.sectie > .houder { position: relative; z-index: 1; }

/* Gegoten scheiding tussen secties. */
.pour-divider {
	display: block;
	width: 100%;
	height: clamp(34px, 4vw, 62px);
	margin-bottom: -1px;
}
.pour-divider.is-flipped { transform: scaleY(-1); }

.vlak-beton {
	background:
		linear-gradient(135deg, rgb(var(--c-beton-rgb) / .32), rgb(var(--c-beton-rgb) / .12)),
		var(--c-mist-deep);
}

/* ============================================== 5. Knoppen en velden ==== */

.btn {
	--btn-bg: var(--c-ink);
	--btn-fg: var(--c-on-ink);
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: 1rem 1.5rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: -.005em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
	border-radius: var(--c-radius);
	transition: color var(--duur-1) var(--soepel);
	font-family: inherit;
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	transform: translateY(101%);
	transition: transform var(--duur-2) var(--veer);
	z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--c-on-accent); }
.btn:hover::before { transform: translateY(0); }
.btn__ico { transition: transform var(--duur-2) var(--veer); }
.btn:hover .btn__ico { transform: translateX(4px); }

.btn--secundair {
	--btn-bg: transparent;
	--btn-fg: var(--c-ink);
	box-shadow: inset 0 0 0 1.5px var(--c-line-strong);
}
.btn--licht { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-on-accent); }
.btn--accent::before { background: var(--c-ink); }
.btn--accent:hover { color: var(--c-on-ink); }
.op-donker .btn--secundair, .sectie--donker .btn--secundair {
	--btn-fg: var(--c-on-ink);
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .28);
}
.btn--tekst {
	--btn-bg: transparent;
	--btn-fg: currentColor;
	padding: .35rem 0;
	clip-path: none;
}
.btn--tekst::before { display: none; }
.btn--tekst::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1.5px;
	background: currentColor;
	transform-origin: left;
	transform: scaleX(.35);
	transition: transform var(--duur-2) var(--veer);
}
.btn--tekst:hover::after { transform: scaleX(1); }

.knoppen { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Velden */
.veld { display: block; margin: 0 0 var(--sp-3); }
.veld > label {
	display: block;
	margin-bottom: .45rem;
	font: 500 .78rem/1.3 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgb(var(--c-ink-rgb) / .68);
}
.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="search"],
.veld input[type="number"],
.veld select,
.veld textarea {
	width: 100%;
	padding: .85rem 1rem;
	font: inherit;
	font-size: 1rem;
	color: inherit;
	background: #fff;
	border: 1.5px solid var(--c-line-strong);
	border-radius: 0;
	transition: border-color var(--duur-1) var(--soepel), box-shadow var(--duur-1) var(--soepel);
	appearance: none;
}
.veld select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2314161A' stroke-width='1.8'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.6rem;
}
.veld textarea { min-height: 8rem; resize: vertical; }
.veld :is(input, select, textarea):focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgb(var(--c-accent-rgb) / .22);
	outline: none;
}
.veld.heeft-fout :is(input, select, textarea) { border-color: #B4231C; }
.veld__fout { display: block; margin-top: .4rem; font-size: .85rem; color: #B4231C; font-weight: 600; }
.veld__hint { display: block; margin-top: .4rem; font-size: .82rem; color: rgb(var(--c-ink-rgb) / .55); }

.veld--vink > label {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	font: inherit;
	font-size: .92rem;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	cursor: pointer;
}
.veld--vink input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--c-accent-deep); }
.veld--bestand input { padding: .7rem; background: #fff; border: 1.5px dashed var(--c-line-strong); width: 100%; }

.canoz-lokvakje { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.melding {
	display: flex;
	gap: var(--sp-2);
	align-items: flex-start;
	padding: var(--sp-3);
	margin-bottom: var(--sp-4);
	border-left: 4px solid var(--c-accent);
	background: rgb(var(--c-accent-rgb) / .1);
}
.melding--ok { border-color: #1B7A43; background: rgb(27 122 67 / .1); }
.melding--ok .melding__ico { color: #1B7A43; }
.melding--fout { border-color: #B4231C; background: rgb(180 35 28 / .09); }
.melding p { margin: .2rem 0 0; font-size: .95rem; }

/* ============================================ 6. Koptekst en navigatie ==== */

.balk {
	background: var(--c-ink);
	color: var(--c-on-ink);
	font: 500 .78rem/1 var(--mono);
	letter-spacing: .04em;
}
.balk__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 40px;
	padding-block: .5rem;
}
.balk__tekst { display: none; opacity: .78; }
@media (min-width: 800px) { .balk__tekst { display: block; } }
.balk__rechts { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.balk a { text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.balk a:hover { color: var(--c-accent); }

.kop {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgb(var(--c-mist-rgb) / .88);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow var(--duur-2) var(--soepel), background var(--duur-2) var(--soepel);
}
.kop.is-gescrold { box-shadow: 0 10px 34px -18px rgb(var(--c-ink-rgb) / .4); }
.kop__in {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-height: var(--kop-h);
	transition: min-height var(--duur-2) var(--soepel);
}
/* Bij scrollen wordt de balk compacter, zodat er meer pagina zichtbaar is. */
.kop.is-gescrold .kop__in { min-height: 62px; }
.kop .brand-mark, .kop .brand__img { transition: transform var(--duur-2) var(--veer); transform-origin: left center; }
.kop.is-gescrold .brand-mark, .kop.is-gescrold .brand__img { transform: scale(.86); }
.kop .brand__word em { transition: opacity var(--duur-1) var(--soepel), max-height var(--duur-2) var(--soepel); max-height: 2em; }
.kop.is-gescrold .brand__word em { opacity: 0; max-height: 0; }
.kop__voortgang {
	position: absolute;
	left: 0; bottom: -1px;
	height: 2px;
	background: var(--c-accent);
	width: 100%;
	transform-origin: left;
	transform: scaleX(var(--voortgang, 0));
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand__img { height: var(--c-logo-h); width: auto; }
.brand__lockup { display: inline-flex; align-items: center; gap: .65rem; }
.brand-mark { flex: 0 0 auto; }
.brand__word {
	display: flex;
	flex-direction: column;
	font-weight: 900;
	font-size: 1.3rem;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
}
.brand__word em {
	font: 500 .53rem/1.6 var(--mono);
	font-style: normal;
	letter-spacing: .18em;
	opacity: .66;
	text-transform: uppercase;
}

.kop__nav { margin-left: auto; display: none; }
@media (min-width: 1060px) { .kop__nav { display: block; } }

.menu { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu-link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .6rem .8rem;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	position: relative;
}
.menu-link--0::after {
	content: "";
	position: absolute;
	left: .8rem; right: .8rem; bottom: .3rem;
	height: 1.5px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duur-2) var(--veer);
}
.menu > li:hover > .menu-link--0::after,
.menu > li:focus-within > .menu-link--0::after,
.menu > .current-menu-item > .menu-link--0::after,
.menu > .current_page_item > .menu-link--0::after,
.menu > .current-menu-parent > .menu-link--0::after { transform: scaleX(1); }

.menu .submenu-knop {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: .3rem;
}
.menu > .heeft-sub > .menu-link::before {
	content: "";
	width: .38rem; height: .38rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	opacity: .5;
	order: 2;
}

.submenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 19rem;
	list-style: none;
	margin: 0;
	padding: .55rem;
	background: #fff;
	border: 1px solid var(--c-line);
	box-shadow: 0 26px 60px -30px rgb(var(--c-ink-rgb) / .5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--duur-1) var(--soepel), transform var(--duur-2) var(--veer), visibility var(--duur-1);
}
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu .menu-link {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .7rem .85rem;
	font-size: .93rem;
	transition: background var(--duur-1) var(--soepel), padding-left var(--duur-1) var(--soepel);
}
.submenu .menu-link:hover { background: rgb(var(--c-accent-rgb) / .13); padding-left: 1.15rem; }
.menu-link__desc { font-size: .8rem; font-weight: 400; opacity: .62; }

.kop__acties { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
@media (min-width: 1060px) { .kop__acties { margin-left: 0; } }
/* De offerteknop in de balk pas tonen als er echt ruimte voor is; op een
   telefoon zou hij de menuknop wegdrukken. Daar staat hij in het menu zelf. */
.kop__cta { display: none; }
@media (min-width: 900px) { .kop__cta { display: inline-flex; } }
@media (max-width: 899px) { .kop__acties { gap: .5rem; } }

.menuknop {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px; height: 48px;
	padding: 0 12px;
	background: var(--c-ink);
	border: 0;
	cursor: pointer;
}
@media (min-width: 1060px) { .menuknop { display: none; } }
.menuknop span {
	display: block;
	height: 2px;
	background: var(--c-on-ink);
	transition: transform var(--duur-2) var(--veer), opacity var(--duur-1);
}
.menuknop[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menuknop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel menu */
.mobiel {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: var(--c-ink);
	color: var(--c-on-ink);
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--duur-2) var(--soepel), visibility var(--duur-2);
}
.mobiel.is-open { visibility: visible; opacity: 1; }
.mobiel__kop { display: flex; align-items: center; justify-content: space-between; min-height: var(--kop-h); }
.mobiel__sluit {
	width: 48px; height: 48px;
	background: none; border: 1px solid rgb(255 255 255 / .2);
	color: inherit; cursor: pointer;
	display: grid; place-items: center;
}
.mobiel__body { padding-block: var(--sp-4); }
.mobiel .menu { flex-direction: column; align-items: stretch; gap: 0; }
.mobiel .menu > li { border-bottom: 1px solid rgb(255 255 255 / .12); }
.mobiel .menu-link {
	padding: 1rem 0;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.02em;
	opacity: 0;
	transform: translateY(14px);
}
.mobiel.is-open .menu-link { animation: mobiel-in var(--duur-3) var(--veer) forwards; }
.mobiel .menu > li:nth-child(1) .menu-link--0 { animation-delay: .06s; }
.mobiel .menu > li:nth-child(2) .menu-link--0 { animation-delay: .11s; }
.mobiel .menu > li:nth-child(3) .menu-link--0 { animation-delay: .16s; }
.mobiel .menu > li:nth-child(4) .menu-link--0 { animation-delay: .21s; }
.mobiel .menu > li:nth-child(5) .menu-link--0 { animation-delay: .26s; }
.mobiel .menu > li:nth-child(6) .menu-link--0 { animation-delay: .31s; }
.mobiel .menu > li:nth-child(n+7) .menu-link--0 { animation-delay: .36s; }
@keyframes mobiel-in { to { opacity: 1; transform: none; } }
.mobiel .heeft-sub { position: relative; }
.mobiel .submenu-knop {
	display: grid;
	place-items: center;
	position: absolute;
	right: 0; top: .55rem;
	width: 44px; height: 44px;
	background: none; border: 1px solid rgb(255 255 255 / .2);
	color: inherit; cursor: pointer;
}
.mobiel .submenu-knop[aria-expanded="true"] { transform: rotate(180deg); }
.mobiel .submenu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0 0 .8rem 0;
	display: none;
}
.mobiel .submenu.is-open { display: block; }
.mobiel .submenu .menu-link { font-size: 1rem; font-weight: 500; padding: .55rem 0 .55rem 1rem; border-left: 1px solid rgb(255 255 255 / .2); animation: none; opacity: 1; transform: none; }
.mobiel .submenu .menu-link:hover { background: none; padding-left: 1.4rem; }
.mobiel__voet { padding-block: var(--sp-4); border-top: 1px solid rgb(255 255 255 / .12); display: grid; gap: var(--sp-3); }
.mobiel__voet .btn { justify-content: center; }

body.menu-open { overflow: hidden; }

/* ================================================ 7. Kopsectie + mixer ==== */

.hero {
	position: relative;
	padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	padding-bottom: 0;
	overflow: clip;
}
.hero__in {
	display: grid;
	gap: var(--sp-5);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 980px) {
	.hero__in { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--sp-6); }
}
.hero__tekst { position: relative; z-index: 2; }
.hero h1 { margin-bottom: var(--sp-3); }
.hero .knoppen { margin-top: var(--sp-4); }

.hero__media {
	position: relative;
	aspect-ratio: 4 / 3.35;
}
.hero__beeld {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.hero__kader {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hero__stempel {
	position: absolute;
	left: 0; bottom: 0;
	z-index: 3;
	display: grid;
	gap: .1rem;
	padding: 1rem 1.3rem;
	background: var(--c-accent);
	color: var(--c-on-accent);
	max-width: 15rem;
}
.hero__stempel b { font-size: 1.9rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.hero__stempel span { font: 500 .68rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* De baan waarover de mixer binnenrijdt. */
.mixerbaan {
	position: relative;
	margin-top: var(--sp-4);
	pointer-events: none;
	z-index: 1;
}
.mixerbaan .mixer {
	width: clamp(290px, 40vw, 560px);
	height: auto;
}
.mixerbaan__vloer {
	height: clamp(18px, 3vw, 34px);
	background: var(--c-ink);
	margin-top: -2px;
}
.mixerbaan__vloer span {
	display: block;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		rgb(var(--c-accent-rgb) / .55) 0 10px,
		transparent 10px 22px
	);
	transform-origin: left;
	transform: scaleX(var(--vloer, 0));
	transition: transform 2.4s var(--veer) 2.6s;
}
.mixer.is-actief .mx-truck { }

/* Mixer-onderdelen: transform-box is nodig, anders rekent de browser vanaf
   de viewBox en schuiven wielen en goot weg. */
.mixer [class^="mx-"] { transform-box: fill-box; }
.mx-truck  { transform: translateX(var(--mx-enter, -78%)); }
.mx-chute  { transform: rotate(var(--mx-chute, -38deg)); transform-origin: 8% 12%; }
.mx-stream { transform: scaleY(var(--mx-flow, 0)); transform-origin: top center; }
.mx-puddle { transform: scaleX(var(--mx-spread, .04)); transform-origin: center; }

.mixer.is-actief .mx-truck  { transition: transform calc(2.2s * var(--c-tempo, 1)) cubic-bezier(.16,.86,.26,1); --mx-enter: 0%; }
.mixer.is-actief .mx-chute  { transition: transform calc(.75s * var(--c-tempo, 1)) cubic-bezier(.32,1.5,.5,1) calc(2s * var(--c-tempo, 1)); --mx-chute: 0deg; }
.mixer.is-actief .mx-stream { transition: transform calc(.45s * var(--c-tempo, 1)) ease-out calc(2.6s * var(--c-tempo, 1)); --mx-flow: 1; }
.mixer.is-actief .mx-puddle { transition: transform calc(2.6s * var(--c-tempo, 1)) cubic-bezier(.2,.7,.3,1) calc(2.9s * var(--c-tempo, 1)); --mx-spread: 1; }
.mixer.is-actief .mx-ribs   { animation: mx-ribs calc(2.6s * var(--c-tempo, 1) * var(--drum, 1)) linear infinite; }
.mixer.is-actief .mx-hub    { animation: mx-spin calc(1.6s * var(--c-tempo, 1) * var(--drum, 1)) linear infinite; transform-origin: center; }
.mixer.is-actief .mx-body   { animation: mx-jiggle .4s ease-in-out infinite; }
.mixer.is-gestopt .mx-hub, .mixer.is-gestopt .mx-body { animation: none; }

@keyframes mx-ribs   { to { transform: translateX(-72px); } }
@keyframes mx-spin   { to { transform: rotate(360deg); } }
@keyframes mx-jiggle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.1px); } }

/* Kopsectie op de binnenpagina's. */
.paginakop {
	position: relative;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
	background: var(--c-ink);
	color: var(--c-on-ink);
	overflow: clip;
}
.paginakop__beeld {
	position: absolute;
	inset: 0;
	opacity: .3;
}
.paginakop__beeld img { width: 100%; height: 100%; object-fit: cover; }
.paginakop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, var(--c-ink) 18%, rgb(var(--c-ink-rgb) / .55) 68%, transparent);
}
.paginakop > .houder { position: relative; z-index: 2; }
.paginakop h1 { max-width: 24ch; }
.paginakop .lead { margin-top: var(--sp-3); }

.kruimels { margin-bottom: var(--sp-3); }
.kruimels ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	list-style: none;
	margin: 0; padding: 0;
	font: 500 .74rem/1.4 var(--mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.kruimels li + li::before { content: "/"; margin-right: .5rem; opacity: .45; }
.kruimels a { text-decoration: none; opacity: .7; }
.kruimels a:hover { opacity: 1; color: var(--c-accent); }
.kruimels [aria-current] { opacity: .95; color: var(--c-accent); }

/* ======================================================= 8. Voordelen ==== */

.usp {
	background: var(--c-ink);
	color: var(--c-on-ink);
}
.usp__lijst {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0; padding: 0;
	grid-template-columns: 1fr;
}
@media (min-width: 620px) { .usp__lijst { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .usp__lijst { grid-template-columns: repeat(4, 1fr); } }
.usp__item {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 1.35rem 0;
	font-weight: 600;
	font-size: .96rem;
}
@media (min-width: 620px) {
	.usp__item { padding-inline: var(--sp-3); border-left: 1px solid rgb(255 255 255 / .13); }
	.usp__item:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 1000px) { .usp__item:nth-child(1) { padding-left: 0; border-left: 0; } }
.usp__ico { flex: 0 0 auto; color: var(--c-accent); }

/* Lichtkrant met het werkgebied. */
.lichtkrant {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	border-block: 1px solid var(--c-line);
	background: var(--c-mist-deep);
	padding-block: .9rem;
	--loop: 34s;
}
.lichtkrant__spoor {
	display: flex;
	width: max-content;
	gap: 0;
	animation: krant var(--loop) linear infinite;
}
.lichtkrant__groep { display: flex; gap: 0; }
.lichtkrant span {
	display: inline-flex;
	align-items: center;
	gap: 1.6rem;
	padding-inline: .8rem;
	font: 500 .82rem/1 var(--mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgb(var(--c-ink-rgb) / .62);
	white-space: nowrap;
}
.lichtkrant span::after {
	content: "";
	width: .4rem; height: .4rem;
	background: var(--c-accent);
	transform: rotate(45deg);
}
.lichtkrant:hover .lichtkrant__spoor { animation-play-state: paused; }
@keyframes krant { to { transform: translateX(-50%); } }

/* ======================================================== 9. Diensten ==== */

.dienst {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	transition: transform var(--duur-2) var(--veer), box-shadow var(--duur-2) var(--soepel), border-color var(--duur-2);
}
.dienst:hover {
	transform: translateY(-6px);
	border-color: rgb(var(--c-accent-rgb) / .5);
	box-shadow: 0 26px 50px -32px rgb(var(--c-ink-rgb) / .55);
}
.dienst__link { position: absolute; inset: 0; z-index: 3; }
.dienst__media { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--c-mist-deep); }
.dienst__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duur-3) var(--veer); }
.dienst:hover .dienst__img { transform: scale(1.055); }
.dienst__vlak { position: absolute; inset: 0; }
.dienst__vlak::before {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgb(var(--c-beton-rgb) / .38), rgb(var(--c-beton-rgb) / .1)),
		var(--c-mist-deep);
}
.dienst__ico {
	position: absolute;
	right: 0; bottom: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.6rem; height: 3.6rem;
	background: var(--c-accent);
	color: var(--c-on-accent);
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
	transition: width var(--duur-2) var(--veer), height var(--duur-2) var(--veer);
}
.dienst:hover .dienst__ico { width: 4.1rem; height: 4.1rem; }
.dienst__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-3) var(--sp-3) var(--sp-3); gap: .5rem; }
.dienst__titel { margin: 0; font-size: 1.22rem; letter-spacing: -.02em; }
.dienst__tekst { margin: 0; font-size: .94rem; color: rgb(var(--c-ink-rgb) / .72); }
.dienst__meer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin: auto 0 0;
	padding-top: var(--sp-2);
	border-top: 1px solid var(--c-line);
}
.dienst__prijs { font: 500 .78rem/1 var(--mono); letter-spacing: .06em; color: var(--c-accent-deep); }
.dienst__pijl { margin-left: auto; color: var(--c-accent-deep); transition: transform var(--duur-2) var(--veer); }
.dienst:hover .dienst__pijl { transform: translateX(5px); }

/* ============================================= 10. Over ons + werkwijze ==== */

.over__in {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 980px) { .over__in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--sp-7); } }

.over__beelden { position: relative; }
.over__beeld1 { position: relative; aspect-ratio: 4/4.6; overflow: hidden; }
.over__beeld1 img { width: 100%; height: 100%; object-fit: cover; }
.over__beeld2 {
	position: absolute;
	right: calc(var(--sp-4) * -1);
	bottom: calc(var(--sp-4) * -1);
	width: 46%;
	aspect-ratio: 1;
	overflow: hidden;
	border: 6px solid var(--c-mist);
	display: none;
}
@media (min-width: 620px) { .over__beeld2 { display: block; } }
.over__beeld2 img { width: 100%; height: 100%; object-fit: cover; }
.over__punten { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: .1rem; }
.over__punten li {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	padding: .8rem 0;
	border-bottom: 1px solid var(--c-line);
	font-weight: 600;
	font-size: .97rem;
}
.over__punten li:first-child { border-top: 1px solid var(--c-line); }
.over__punten svg { flex: 0 0 auto; color: var(--c-accent-deep); margin-top: .12rem; }
.op-donker .over__punten li { border-color: rgb(255 255 255 / .14); }
.op-donker .over__punten svg { color: var(--c-accent); }

.werkwijze { position: relative; }
.werkwijze__spoor {
	position: relative;
	margin-bottom: var(--sp-5);
	height: clamp(84px, 11vw, 148px);
	display: none;
}
@media (min-width: 900px) { .werkwijze__spoor { display: block; } }
.werkwijze__spoor { --drum: 1; }
.werkwijze__spoor .mixer {
	position: absolute;
	bottom: 0;
	left: var(--mixer-x, 0%);
	width: clamp(230px, 24vw, 330px);
	transform: translateX(-50%);
	transition: left .12s linear;
}
.werkwijze__spoor .mx-truck { transform: none; }
.werkwijze__spoor .mx-chute { transform: rotate(-6deg); }
.werkwijze__spoor .mx-stream { transform: scaleY(1); }
.werkwijze__spoor .mx-puddle { transform: scaleX(.5); }
.werkwijze__lijn {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--c-line-strong);
}
.werkwijze__lijn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	transform-origin: left;
	transform: scaleX(var(--rit, 0));
}

.stappen {
	display: grid;
	gap: 0;
	counter-reset: stap;
	list-style: none;
	margin: 0; padding: 0;
	grid-template-columns: 1fr;
}
@media (min-width: 700px) { .stappen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
.stap {
	counter-increment: stap;
	position: relative;
	padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
	border-top: 1px solid var(--c-line);
}
@media (min-width: 700px) {
	.stap { padding-inline: var(--sp-4); border-left: 1px solid var(--c-line); }
	.stap:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1080px) {
	.stap:nth-child(2n+1) { border-left: 1px solid var(--c-line); padding-left: var(--sp-4); }
	.stap:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
.stap__nr {
	display: block;
	font: 500 .74rem/1 var(--mono);
	letter-spacing: .16em;
	color: var(--c-accent-deep);
	margin-bottom: var(--sp-3);
}
.stap__nr::before { content: "STAP " counter(stap, decimal-leading-zero); }
.stap__ico {
	display: grid;
	place-items: center;
	width: 2.9rem; height: 2.9rem;
	margin-bottom: var(--sp-2);
	background: rgb(var(--c-accent-rgb) / .16);
	color: var(--c-accent-deep);
	clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%);
}
.stap h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.stap p { margin: 0; font-size: .94rem; color: rgb(var(--c-ink-rgb) / .72); }
.op-donker .stap { border-color: rgb(255 255 255 / .14); }
.op-donker .stap p { color: rgb(255 255 255 / .7); }
.op-donker .stap__ico { background: rgb(var(--c-accent-rgb) / .2); color: var(--c-accent); }
.op-donker .stap__nr { color: var(--c-accent); }

/* ========================================================= 11. Cijfers ==== */

.cijfers {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0; padding: 0;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .cijfers { grid-template-columns: repeat(4, 1fr); } }
.cijfer {
	padding: var(--sp-4) var(--sp-3);
	border-top: 1px solid rgb(255 255 255 / .16);
	border-left: 1px solid rgb(255 255 255 / .16);
}
.cijfer:nth-child(2n+1) { border-left: 0; padding-left: 0; }
@media (min-width: 900px) {
	.cijfer:nth-child(2n+1) { border-left: 1px solid rgb(255 255 255 / .16); padding-left: var(--sp-3); }
	.cijfer:first-child { border-left: 0; padding-left: 0; }
}
.cijfer b {
	display: block;
	font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem);
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.045em;
	font-variant-numeric: tabular-nums;
}
.cijfer b i { font-style: normal; color: var(--c-accent); }
.cijfer span {
	display: block;
	margin-top: .7rem;
	font: 500 .76rem/1.4 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .66;
	max-width: 16ch;
}

/* ==================================== 12. Projecten en beoordelingen ==== */

.project { position: relative; }
.project__link { display: block; text-decoration: none; }
.project__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--c-mist-deep); }
.project--groot .project__media { aspect-ratio: 16/10; }
.project__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duur-3) var(--veer); }
.project:hover .project__img { transform: scale(1.05); }
.project__vlak { position: absolute; inset: 0; background: linear-gradient(135deg, rgb(var(--c-beton-rgb) / .4), rgb(var(--c-beton-rgb) / .12)); }
.project__sluier {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(var(--c-ink-rgb) / .82) 0%, rgb(var(--c-ink-rgb) / .1) 52%, transparent 100%);
	opacity: 0;
	transition: opacity var(--duur-2) var(--soepel);
}
.project:hover .project__sluier { opacity: 1; }
.project__body { padding-top: var(--sp-2); }
.project__soort {
	margin: 0 0 .3rem;
	font: 500 .72rem/1 var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
}
.project__titel { margin: 0 0 .25rem; font-size: 1.15rem; letter-spacing: -.02em; }
.project__meta { margin: 0; font-size: .88rem; color: rgb(var(--c-ink-rgb) / .62); }
.op-donker .project__meta { color: rgb(255 255 255 / .62); }
.op-donker .project__soort { color: var(--c-accent); }

.projectfeiten {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 0;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .projectfeiten { grid-template-columns: repeat(4, 1fr); } }
.projectfeiten > div { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-top: 2px solid var(--c-ink); }
.projectfeiten dt { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: .4rem; }
.projectfeiten dd { margin: 0; font-weight: 700; font-size: 1.05rem; }

.review {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: var(--sp-4);
	background: #fff;
	border: 1px solid var(--c-line);
}
.review__quote { color: rgb(var(--c-accent-rgb) / .5); }
.review__sterren { display: flex; gap: .15rem; color: var(--c-line-strong); }
.review__sterren .is-vol { color: var(--c-accent); }
.review__sterren .ico, .review__sterren .ico * { fill: currentColor; stroke: none; }
.review__tekst { margin: 0; font-size: 1.03rem; line-height: 1.55; }
.review__wie { display: grid; gap: .15rem; margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.review__wie strong { font-size: .98rem; }
.review__wie span { font: 500 .74rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .58; }

/* Horizontale strook die met de vinger of muis te slepen is. */
.strook {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(85vw, 26rem), 1fr);
	gap: clamp(1rem, .5rem + 1.4vw, 1.75rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sp-2);
	scrollbar-width: thin;
}
.strook > * { scroll-snap-align: start; }
@media (min-width: 1100px) {
	.strook { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}

/* ========================================================== 13. Vragen ==== */

.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__vraag { margin: 0; font-size: inherit; }
.faq__knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	width: 100%;
	padding: 1.25rem 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: inherit;
	font-size: clamp(1.02rem, .98rem + .35vw, 1.22rem);
	font-weight: 700;
	letter-spacing: -.015em;
	text-align: left;
	cursor: pointer;
	transition: color var(--duur-1) var(--soepel);
}
.faq__knop:hover { color: var(--c-accent-deep); }
.faq__teken {
	position: relative;
	flex: 0 0 auto;
	width: 1.6rem; height: 1.6rem;
	border: 1.5px solid var(--c-line-strong);
	transition: background var(--duur-1), border-color var(--duur-1), transform var(--duur-2) var(--veer);
}
.faq__teken::before, .faq__teken::after {
	content: "";
	position: absolute;
	inset: 50% 22%;
	height: 1.5px;
	margin-top: -.75px;
	background: currentColor;
	transition: transform var(--duur-2) var(--veer);
}
.faq__teken::after { transform: rotate(90deg); }
.faq__knop[aria-expanded="true"] .faq__teken { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); transform: rotate(180deg); }
.faq__knop[aria-expanded="true"] .faq__teken::after { transform: rotate(0deg); }
.faq__antwoord {
	overflow: hidden;
	height: 0;
	opacity: 0;
	transition: height var(--duur-2) var(--soepel), opacity var(--duur-2) var(--soepel);
}
.faq__antwoord[hidden] { display: none; }
.faq__antwoord.is-open { opacity: 1; }
.faq__antwoord .rijk {
	padding-bottom: 1.5rem;
	max-width: 68ch;
	font-size: .98rem;
	transform: translateY(-8px);
	transition: transform var(--duur-2) var(--veer);
}
.faq__antwoord.is-open .rijk { transform: none; }
html.geen-anim .faq__antwoord { transition: none; }

/* ======================================================= 14. Formulier ==== */

.offerte {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	background: #fff;
	border: 1px solid var(--c-line);
}
.sectie--donker .offerte, .op-donker .offerte { color: var(--c-ink); --c-ink-rgb: 20 22 26; }
.offerte__titel { margin-bottom: .6rem; }
.offerte__tekst { margin-bottom: var(--sp-4); color: rgb(var(--c-ink-rgb) / .72); font-size: .98rem; }
.formulier__rij { display: grid; gap: 0 var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .formulier__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formulier__verstuur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: var(--sp-3) 0 0;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line);
}
.formulier__note { font: 500 .76rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .58; }

.contactblok {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 980px) { .contactblok { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--sp-6); } }

.contactgegevens { display: grid; gap: 0; }
.contactgegevens__rij {
	display: flex;
	gap: var(--sp-2);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--c-line);
}
.contactgegevens__rij:first-child { border-top: 1px solid var(--c-line); }
.contactgegevens__ico { flex: 0 0 auto; color: var(--c-accent-deep); margin-top: .2rem; }
.contactgegevens dt { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: .3rem; }
.contactgegevens dd { margin: 0; font-weight: 600; }
.contactgegevens a { text-decoration: none; }
.contactgegevens a:hover { color: var(--c-accent-deep); }

.contactknoppen { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.contactknop {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1rem;
	background: rgb(var(--c-ink-rgb) / .05);
	border: 1px solid var(--c-line);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	transition: background var(--duur-1), border-color var(--duur-1), transform var(--duur-1);
}
.contactknop:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); transform: translateY(-2px); }
.op-donker .contactknop { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .16); }

.tijden { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tijden li {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: .6rem 0;
	border-bottom: 1px dotted var(--c-line-strong);
	font-size: .95rem;
}
.tijden b { font-weight: 600; }
.tijden span { font: 500 .85rem/1.6 var(--mono); opacity: .75; }

/* ==================================================== 15. Slotsectie ==== */

.cta {
	position: relative;
	background: var(--c-accent);
	color: var(--c-on-accent);
	overflow: clip;
}
.cta__in {
	display: grid;
	gap: var(--sp-4);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cta__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); } }
.cta h2 { margin-bottom: .6rem; }
.cta p { margin: 0; font-size: 1.075rem; max-width: 52ch; opacity: .85; }
.cta mark.accent { color: inherit; }
.cta mark.accent::after { background: var(--c-on-accent); opacity: .45; }
.cta .btn { --btn-bg: var(--c-ink); --btn-fg: var(--c-on-ink); }
.cta .btn::before { background: #fff; }
.cta .btn:hover { color: var(--c-ink); }
.cta__mixer {
	position: absolute;
	right: -3%;
	bottom: -8%;
	width: min(46%, 460px);
	opacity: .16;
	pointer-events: none;
	display: none;
}
@media (min-width: 1100px) { .cta__mixer { display: block; } }

/* ====================================================== 16. Voettekst ==== */

.voet {
	background: var(--c-ink);
	color: var(--c-on-ink);
	padding-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.voet__boven {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
	padding-bottom: var(--sp-5);
}
@media (min-width: 760px) { .voet__boven { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .voet__boven { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--sp-4); } }
.voet__merk { max-width: 34ch; }
.voet__merk p { margin-top: var(--sp-3); font-size: .95rem; opacity: .72; }
.voet h3, .voet .widget__title {
	margin: 0 0 var(--sp-3);
	font: 500 .74rem/1 var(--mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .58;
	font-weight: 500;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.voet a { text-decoration: none; opacity: .82; transition: opacity var(--duur-1), color var(--duur-1); }
.voet a:hover { opacity: 1; color: var(--c-accent); }
.voet__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-4);
	padding-block: var(--sp-3);
	border-top: 1px solid rgb(255 255 255 / .13);
	font: 500 .78rem/1.5 var(--mono);
	letter-spacing: .04em;
	opacity: .62;
}
.voet__onder ul { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.voet__socials { display: flex; gap: .5rem; margin-top: var(--sp-3); }
.voet__socials a {
	display: grid;
	place-items: center;
	width: 2.4rem; height: 2.4rem;
	border: 1px solid rgb(255 255 255 / .2);
	opacity: .8;
}
.voet__socials a:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); opacity: 1; }

/* Colofon: de laatste regel van de pagina, bewust ingetogen. */
.voet__colofon {
	margin: 0;
	padding-block: .9rem 1.4rem;
	border-top: 1px solid rgb(255 255 255 / .08);
	font: 500 .72rem/1.5 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	opacity: .4;
	transition: opacity var(--duur-1) var(--soepel);
}
.voet__colofon:hover { opacity: .8; }
.voet__colofon a {
	text-decoration: none;
	border-bottom: 1px solid rgb(255 255 255 / .3);
	padding-bottom: 1px;
}
.voet__colofon a:hover { color: var(--c-accent); border-color: var(--c-accent); }

.omhoog {
	position: fixed;
	right: var(--rand); bottom: 1.5rem;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 3rem; height: 3rem;
	background: var(--c-ink);
	color: var(--c-on-ink);
	border: 0;
	cursor: pointer;
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity var(--duur-2), transform var(--duur-2) var(--veer), background var(--duur-1);
}
.omhoog.is-zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.omhoog:hover { background: var(--c-accent); color: var(--c-on-accent); }
.omhoog__ico { transform: rotate(180deg); }

.wa-zwevend {
	position: fixed;
	left: var(--rand); bottom: 1.5rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.1rem;
	background: #1FA855;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: .9rem;
	box-shadow: 0 14px 30px -14px rgb(31 168 85 / .8);
}
.wa-zwevend span { display: none; }
@media (min-width: 620px) { .wa-zwevend span { display: inline; } }

.koekje {
	position: fixed;
	left: var(--rand); right: var(--rand); bottom: 1.25rem;
	z-index: 120;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	max-width: 46rem;
	margin-inline: auto;
	padding: var(--sp-3);
	background: var(--c-ink);
	color: var(--c-on-ink);
	box-shadow: 0 26px 60px -28px rgb(0 0 0 / .6);
}
.koekje[hidden] { display: none; }
.koekje p { margin: 0; font-size: .9rem; opacity: .85; flex: 1 1 18rem; }

/* ============================================== 17. Galerij + lightbox ==== */

.galerij {
	display: grid;
	gap: clamp(.5rem, .3rem + .8vw, 1rem);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .galerij { grid-template-columns: repeat(3, 1fr); } }
.galerij__item {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
	aspect-ratio: 4/3;
}
.galerij__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duur-3) var(--veer); }
.galerij__item:hover img { transform: scale(1.06); }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 3rem);
	background: rgb(8 9 11 / .93);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duur-2), visibility var(--duur-2);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox > div {
	transform: scale(.94);
	transition: transform var(--duur-3) var(--veer);
}
.lightbox.is-open > div { transform: none; }
.lightbox img { max-width: 100%; max-height: 80vh; width: auto; object-fit: contain; }
.lightbox__caption { margin-top: var(--sp-2); color: #fff; font-size: .9rem; opacity: .7; text-align: center; }
.lightbox__sluit, .lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem; height: 3rem;
	background: rgb(255 255 255 / .1);
	border: 0;
	color: #fff;
	cursor: pointer;
}
.lightbox__sluit { top: 1rem; right: 1rem; }
.lightbox__nav--vorige { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--volgende { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__sluit:hover, .lightbox__nav:hover { background: var(--c-accent); color: var(--c-on-accent); }
.lightbox__teller { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #fff; font: 500 .8rem/1 var(--mono); opacity: .6; }

/* ================================================ 18. Losse onderdelen ==== */

.paginering {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: var(--sp-6);
	justify-content: center;
}
.paginering .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.9rem; height: 2.9rem;
	padding-inline: .7rem;
	border: 1px solid var(--c-line-strong);
	text-decoration: none;
	font-weight: 700;
	font-size: .95rem;
}
.paginering .page-numbers:hover { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
.paginering .current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-5); }
.filters a {
	padding: .55rem 1rem;
	border: 1px solid var(--c-line-strong);
	text-decoration: none;
	font: 500 .8rem/1.4 var(--mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background var(--duur-1), color var(--duur-1), border-color var(--duur-1);
}
.filters a:hover, .filters a[aria-current] { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }

.zoekform { display: flex; gap: .5rem; }
.zoekform input[type="search"] {
	flex: 1;
	padding: .8rem 1rem;
	border: 1.5px solid var(--c-line-strong);
	background: #fff;
	font: inherit;
}
.leeg {
	padding: var(--sp-6) 0;
	text-align: center;
	border: 1px dashed var(--c-line-strong);
}
.leeg h2 { margin-bottom: var(--sp-2); }
/* Alleen zichtbaar voor ingelogde beheerders. */
.leeg__hint {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line);
	font: 500 .78rem/1.5 var(--mono);
	color: var(--c-accent-deep);
}

.foutcode {
	font-size: clamp(5rem, 3rem + 14vw, 13rem);
	font-weight: 900;
	line-height: .82;
	letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 2px var(--c-line-strong);
	margin-bottom: var(--sp-3);
}

.vorige-volgende {
	display: grid;
	gap: var(--sp-2);
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
}
@media (min-width: 700px) { .vorige-volgende { grid-template-columns: repeat(2, 1fr); } }
.vorige-volgende a {
	display: grid;
	gap: .3rem;
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	text-decoration: none;
	transition: border-color var(--duur-1), transform var(--duur-1);
}
.vorige-volgende a:hover { border-color: var(--c-accent); transform: translateY(-3px); }
.vorige-volgende small { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.vorige-volgende strong { font-size: 1.05rem; letter-spacing: -.02em; }
.vorige-volgende .is-rechts { text-align: right; }

/* Deze lijsten staan binnen .rijk maar hebben hun eigen vinkje; het
   standaard opsommingsteken van .rijk moet daar dus weg. */
.rijk :is(.dienstpunten, .over__punten) li { padding-left: 0; }
.rijk :is(.dienstpunten, .over__punten) li::before { content: none; }

.dienstpunten { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: .1rem; }
.dienstpunten li {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: .75rem 0;
	border-bottom: 1px solid var(--c-line);
	font-weight: 600;
	font-size: .96rem;
}
.dienstpunten li:first-child { border-top: 1px solid var(--c-line); }
.dienstpunten svg { flex: 0 0 auto; color: var(--c-accent-deep); margin-top: .15rem; }

.zijkolom { display: grid; gap: var(--sp-4); align-content: start; position: sticky; top: calc(var(--kop-h) + var(--sp-3)); }
.zijkaart { padding: var(--sp-4); border: 1px solid var(--c-line); background: #fff; }
.zijkaart h2, .zijkaart h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.dienst-inhoud {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 1000px) { .dienst-inhoud { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-6); } }

/* ==================================================== 19. Animatie ==== */

[data-anim] { --anim-vertraging: 0ms; }

/* ---------------------------------------------------------------------------
   Beeldvlakken komen als een veegbeweging in beeld: een dekvlak in de kleur
   van de sectie schuift naar boven weg, terwijl de foto tegelijk terugzakt
   naar zijn eigen formaat. Dat leest als iets dat gemaakt is, niet als fade.

   Let op: het dekvlak is een los laagje. Het beeld zelf niet wegklippen — een
   volledig weggeklipt element meldt zich nooit bij de scrollwaarnemer en zou
   dus nooit opengaan.
--------------------------------------------------------------------------- */
/* :where() heeft geen gewicht, dus een element dat zelf al absoluut is
   geplaatst (zoals de achtergrond van een paginakop) houdt zijn plaatsing. */
:where([data-anim="wipe"]) { position: relative; }
[data-anim="wipe"] { --wipe-kleur: var(--c-mist); }
.sectie--vlak [data-anim="wipe"] { --wipe-kleur: #fff; }
.sectie--beton [data-anim="wipe"] { --wipe-kleur: var(--c-mist-deep); }
:is(.sectie--donker, .paginakop, .voet) [data-anim="wipe"] { --wipe-kleur: var(--c-ink); }

html.canoz-klaar:not(.geen-anim) [data-anim="wipe"]::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 4;
	pointer-events: none;
	background: var(--wipe-kleur);
	transform-origin: bottom center;
	transform: scaleY(1);
	transition: transform calc(1.05s * var(--c-tempo, 1)) cubic-bezier(.72, 0, .18, 1) var(--anim-vertraging);
}
html.canoz-klaar:not(.geen-anim) [data-anim="wipe"].is-in::after { transform: scaleY(0); }

html.canoz-klaar:not(.geen-anim) [data-anim="wipe"] :is(img, .vlak-beton, .hero__beeld) {
	transform: scale(1.12);
	transition: transform calc(1.5s * var(--c-tempo, 1)) cubic-bezier(.18, .74, .24, 1) var(--anim-vertraging);
}
html.canoz-klaar:not(.geen-anim) [data-anim="wipe"].is-in :is(img, .vlak-beton, .hero__beeld) { transform: none; }

/* Zijwaartse binnenkomst voor tekstkolommen naast een beeld. */
html.canoz-klaar:not(.geen-anim) [data-anim="links"],
html.canoz-klaar:not(.geen-anim) [data-anim="rechts"] {
	opacity: 0;
	transition: opacity var(--duur-3) var(--soepel) var(--anim-vertraging),
	            transform var(--duur-3) var(--veer) var(--anim-vertraging);
}
html.canoz-klaar:not(.geen-anim) [data-anim="links"] { transform: translateX(-26px); }
html.canoz-klaar:not(.geen-anim) [data-anim="rechts"] { transform: translateX(26px); }
html.canoz-klaar:not(.geen-anim) :is([data-anim="links"], [data-anim="rechts"]).is-in { opacity: 1; transform: none; }

/* Cijfers krijgen een streep die met het getal meeloopt. */
.cijfer b { position: relative; }
.cijfer b::after {
	content: "";
	position: absolute;
	left: 0; bottom: -.35rem;
	width: 2.5rem; height: 2px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform calc(1.1s * var(--c-tempo, 1)) var(--veer) 200ms;
}
.cijfer.is-in b::after, html.geen-anim .cijfer b::after { transform: scaleX(1); }

/* De foto in een kaart schuift een klein beetje mee met de scroll. Het kader
   krijgt daarvoor iets meer beeld dan het laat zien. */
:is(.project__media, .dienst__media) img[data-schuif] {
	position: absolute;
	left: 0;
	top: -6%;
	width: 100%;
	height: 112%;
	will-change: transform;
}


html.canoz-klaar:not(.geen-anim) [data-anim="rise"],
html.canoz-klaar:not(.geen-anim) [data-anim="fade"] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--duur-3) var(--soepel) var(--anim-vertraging),
	            transform var(--duur-3) var(--veer) var(--anim-vertraging);
}
html.canoz-klaar:not(.geen-anim) [data-anim="fade"] { transform: none; }
html.canoz-klaar:not(.geen-anim) [data-anim].is-in { opacity: 1; transform: none; }

html.canoz-klaar:not(.geen-anim) .split .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
html.canoz-klaar:not(.geen-anim) .split .w > i {
	display: inline-block;
	font-style: inherit;
	transform: translateY(102%);
	transition: transform calc(.7s * var(--c-tempo, 1)) var(--veer);
	transition-delay: calc(var(--w, 0) * 42ms);
}
html.canoz-klaar:not(.geen-anim) .split.is-in .w > i { transform: none; }

html.canoz-klaar:not(.geen-anim) [data-parallax] { will-change: transform; }

html.geen-anim * { animation: none !important; transition: none !important; }
html.geen-anim [data-anim] { opacity: 1 !important; transform: none !important; }
html.geen-anim [data-anim="wipe"]::after { display: none !important; }
html.geen-anim .mixer .mx-truck { --mx-enter: 0%; }
html.geen-anim .mixer .mx-chute { --mx-chute: 0deg; }
html.geen-anim .mixer .mx-stream { --mx-flow: 1; }
html.geen-anim .mixer .mx-puddle { --mx-spread: 1; }
html.geen-anim .mixerbaan__vloer span { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	[data-anim] { opacity: 1 !important; transform: none !important; }
	[data-anim="wipe"]::after { display: none !important; }
	.split .w > i { transform: none !important; }
	.kicker::after, .cijfer b::after { transform: scaleX(1) !important; }
	.mixer .mx-truck { --mx-enter: 0%; }
	.mixer .mx-chute { --mx-chute: 0deg; }
	.mixer .mx-stream { --mx-flow: 1; }
	.mixer .mx-puddle { --mx-spread: 1; }
	.mixerbaan__vloer span { transform: scaleX(1); }
}

/* ====================================================== 20. Afdrukken ==== */

@media print {
	.kop, .balk, .mobiel, .omhoog, .wa-zwevend, .koekje, .cta, .offerte, .mixerbaan, .lichtkrant, .raster { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.sectie { padding-block: 1.2rem; }
	.sectie--donker, .voet { background: #fff !important; color: #000 !important; }
	a { text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
	.snip { clip-path: none; }
}