/* =========================================================
   WVD componenten. Alleen tokens uit tokens.css gebruiken.
   ========================================================= */

/* ---------- Basis ---------- */
body {
	font-family: var(--wvd-font);
	font-size: var(--wvd-fs-body);
	line-height: var(--wvd-lh-body);
	color: var(--wvd-black);
	background: var(--wvd-blue);
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ---------- Pijltje (wordt door motion.js in links gezet) ---------- */
.wvd-arrow {
	position: relative;
	display: inline-block;
	flex: none;
	width: .8em;
	height: .8em;
	overflow: hidden;
}
.wvd-arrow svg {
	min-width: 0; /* Bricks geeft svg in links een min-width van 1em */
	min-height: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: transform var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-arrow svg + svg { transform: translate(-110%, 110%); }
a:hover .wvd-arrow svg:first-child,
a:focus-visible .wvd-arrow svg:first-child { transform: translate(110%, -110%); }
a:hover .wvd-arrow svg + svg,
a:focus-visible .wvd-arrow svg + svg { transform: none; transition-delay: .06s; }

/* ---------- Tekstlink: lijn trekt terug en tekent opnieuw ---------- */
.wvd-textlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding-bottom: .25em;
	color: inherit;
	text-decoration: none;
}
.wvd-textlink::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transform-origin: right;
}
.wvd-textlink:hover::after,
.wvd-textlink:focus-visible::after { animation: wvd-redraw .9s var(--wvd-ease) forwards; }

@keyframes wvd-redraw {
	0%   { transform: scaleX(1); transform-origin: right; }
	45%  { transform: scaleX(0); transform-origin: right; }
	46%  { transform: scaleX(0); transform-origin: left; }
	100% { transform: scaleX(1); transform-origin: left; }
}

/* ---------- Menulink: lijn komt van links, verdwijnt rechts ---------- */
.wvd-menulink {
	position: relative;
	color: inherit;
	text-decoration: none;
}
.wvd-menulink::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.2em;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--wvd-dur) var(--wvd-ease);
}
.wvd-menulink:hover::after,
.wvd-menulink:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* =========================================================
   Homepage, scène 1: Smaak
   Structuur in Bricks (zie bricks/scene-1-smaak.json):
   section.wvd-scene
     div.wvd-hero
       div.wvd-hero__copy  (kop, uitleg, link)
       div.wvd-shaker      (strooibus: transparante video, poster eronder)
     div.wvd-bar
       p.wvd-bar__tag
       div.wvd-bar__meta   (telefoon, plaats)
   ========================================================= */

.brxe-section.wvd-scene {
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: stretch;
	width: 100%;
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding: 0;
	overflow: clip;
	background: var(--wvd-blue);
	color: var(--wvd-black);
}

.wvd-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	width: 100%;
	min-height: 0;
	padding: max(6rem, 7vw) var(--wvd-gutter) max(2rem, 2.6vw); /* ruimte voor de header */
}

.wvd-hero__copy {
	position: relative;
	z-index: 3;
}

.wvd-hero__title {
	margin: 0 0 clamp(1rem, 3.4vh, 2.2rem);
	font-size: var(--wvd-fs-display);
	font-weight: 800;
	line-height: var(--wvd-lh-head);
	letter-spacing: var(--wvd-tracking-head);
	text-transform: lowercase;
	margin-left: -.03em; /* optisch gelijk met de linkerkant van het logo */
}
/* motion.js zet elke regel in een masker */
.wvd-line {
	display: block;
	overflow: hidden;
	padding-bottom: .2em; /* ruimte voor de staart van g en j */
	margin-bottom: -.2em;
	padding-top: .12em;
	margin-top: -.12em;
}
.wvd-line > span {
	display: inline-block;
	transform-origin: 0 100%;
}

.wvd-hero__sub {
	max-width: 34ch;
	margin: 0 0 clamp(1.4rem, 4.4vh, 3rem);
	font-size: max(1rem, 1.3vw);
	line-height: 1.4;
}

.wvd-hero__copy .wvd-textlink { font-size: max(1rem, 1.25vw); }

/* Strooibus: vierkante, transparante video (hero-shaker.js); de poster staat eronder tot hij speelt.
   Desktop: vast in de hoek: rechts tegen het scherm, boven tot de schermrand (achter de header),
   onder tegen de zwarte balk. De bus komt zo van buiten beeld. Heel breed scherm: niet breder dan 62vw,
   dan valt er links wat af (daar gebeurt niets). */
.wvd-hero { position: relative; }
.wvd-shaker {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(100svh - 6rem, 62vw);
	pointer-events: none;
}
.wvd-shaker > *, .wvd-shaker__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 100% 100%;
}
.wvd-shaker__video { opacity: 0; transition: opacity .6s var(--wvd-ease); }
.wvd-shaker.is-playing .wvd-shaker__video { opacity: 1; }
.wvd-shaker.is-playing .wvd-shaker__poster { opacity: 0; transition: opacity .6s var(--wvd-ease); }

/* Zwarte balk onderin */
.wvd-bar {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: max(1.4rem, 2.6vw) var(--wvd-gutter);
	background: var(--wvd-black);
	color: var(--wvd-blue);
	font-size: max(1rem, 1.05vw);
	font-weight: 600;
	letter-spacing: -.01em;
}
.wvd-bar__tag { margin: 0; }
.wvd-bar__meta {
	display: flex;
	gap: max(1.2rem, 3vw);
	font-weight: 500;
}
.wvd-bar__meta > * { margin: 0; }

/* Intro: tot motion.js start is de scène onzichtbaar (geen flits). */
.wvd-intro .wvd-header,
.wvd-intro .wvd-scene--smaak .wvd-hero,
.wvd-intro .wvd-scene--smaak .wvd-bar { visibility: hidden; }

/* =========================================================
   Homepage, scène 2: Sinds 1993 (Three.js in .wvd-mac)
   section.wvd-scene.wvd-scene--1993
     div.wvd-mac            (canvas komt hier, via mac-scene.js)
     div.wvd-1993__copy     (kop, tekst, link)
   ========================================================= */

.brxe-section.wvd-scene--1993 {
	display: block;
	height: 560svh; /* scrollruimte voor de camerarit (met lange kijkstap); het beeld zelf blijft staan */
	overflow: visible;
	background: var(--wvd-black);
	color: var(--wvd-blue);
}
.wvd-1993__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100svh;
	overflow: clip;
}

.wvd-mac {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--wvd-dur-slow) var(--wvd-ease);
}
.wvd-mac.is-ready { opacity: 1; transition: none; } /* daarna stuurt mac-scene.js de opacity */
/* Zachte overgang van de zwarte balk naar de 3D-ruimte */
.wvd-1993__stage::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 28vh;
	background: linear-gradient(var(--wvd-black), rgb(26 24 24 / 0));
	pointer-events: none;
}
.wvd-mac canvas { display: block; width: 100%; height: 100%; }

.wvd-1993__copy {
	position: absolute;
	left: var(--wvd-gutter);
	bottom: max(2.5rem, 4vw);
	z-index: 2;
	max-width: max(20rem, 30vw);
	pointer-events: none;
}
.wvd-1993__copy > * { pointer-events: auto; }
.wvd-1993__title {
	margin: 0 0 .35em;
	font-size: max(3rem, 6vw);
	font-weight: 800;
	line-height: var(--wvd-lh-head);
	letter-spacing: var(--wvd-tracking-head);
	text-transform: lowercase;
}
.wvd-1993__text {
	margin: 0 0 1.4em;
	color: var(--wvd-white);
	font-size: max(1rem, 1.1vw);
	font-weight: 700;
	line-height: 1.4;
}
.wvd-1993__copy .wvd-textlink { color: var(--wvd-blue); font-size: max(1rem, 1.1vw); }

/* =========================================================
   Homepage: werk (projectenoverzicht, in het donker na scène 2)
   section.wvd-werk
     div.wvd-werk__head   (kop + korte zin)
     div.wvd-werk__list
       a.wvd-case ×n      (span.wvd-case__nr, span.wvd-case__name, span.wvd-case__meta)
   ========================================================= */

.brxe-section.wvd-werk {
	display: block;
	width: 100%;
	margin-top: -60svh; /* schuift over het laatste stuk van de camerarit heen: geen harde overgang */
	padding: 40svh var(--wvd-gutter) max(6rem, 8vw);
	position: relative;
	z-index: 2;
	background: linear-gradient(rgb(26 24 24 / 0), var(--wvd-black) 30svh);
	color: var(--wvd-white);
}
.wvd-werk__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: max(2.5rem, 4vw);
}
.wvd-werk__title {
	margin: 0;
	color: var(--wvd-blue);
	font-size: max(3rem, 6vw);
	font-weight: 800;
	line-height: var(--wvd-lh-head);
	letter-spacing: var(--wvd-tracking-head);
	text-transform: lowercase;
}
.wvd-werk__intro {
	max-width: 26ch;
	margin: 0;
	font-size: max(1rem, 1.1vw);
	font-weight: 700;
	line-height: 1.4;
}

.wvd-werk__list { border-top: 1px solid rgb(158 214 221 / .25); }

.wvd-case {
	position: relative;
	display: grid;
	grid-template-columns: 4ch 1fr auto;
	align-items: baseline;
	gap: max(1rem, 2vw);
	padding: max(1.1rem, 1.6vw) 0;
	border-bottom: 1px solid rgb(158 214 221 / .25);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
}
.wvd-case > * { margin: 0; }
.wvd-case__nr {
	color: var(--wvd-blue);
	font-size: max(.875rem, .8vw);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.wvd-case__name {
	display: flex;
	align-items: center;
	gap: .3em;
	padding-bottom: .12em; /* ruimte voor de staart van g, p, j */
	font-size: max(2.2rem, 4.6vw);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: var(--wvd-tracking-head);
	transition: transform var(--wvd-dur) var(--wvd-ease), color var(--wvd-dur-fast) var(--wvd-ease);
}
/* Oranje blokje (§4) schuift erin bij hover */
.wvd-case__name::before {
	content: "";
	flex: none;
	width: .28em;
	height: .28em;
	background: var(--wvd-orange);
	transform: scale(0);
	transform-origin: left center;
	transition: transform var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-case__meta {
	color: rgb(255 255 255 / .6);
	font-size: max(.875rem, .9vw);
	font-weight: 500;
	transition: color var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-case::after { /* lijn die van links tekent */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--wvd-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wvd-dur) var(--wvd-ease);
}
.wvd-case:hover .wvd-case__name,
.wvd-case:focus-visible .wvd-case__name { transform: translateX(.15em); color: var(--wvd-blue); }
.wvd-case:hover .wvd-case__name::before,
.wvd-case:focus-visible .wvd-case__name::before { transform: scale(1); }
.wvd-case:hover .wvd-case__meta,
.wvd-case:focus-visible .wvd-case__meta { color: var(--wvd-white); }
.wvd-case:hover::after,
.wvd-case:focus-visible::after { transform: scaleX(1); }

/* Rijen komen uit [wvd_cases] (klanten in Werk); de shortcode-wrapper telt niet mee */
.wvd-werk__list .brxe-shortcode { display: contents; }
.wvd-case__img { display: none; }
/* Beeld dat de muis volgt (motion.js maakt .wvd-werk__preview aan) */
.wvd-werk__preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 26vw;
	aspect-ratio: 4 / 3;
	margin: calc(26vw * -.375) 0 0 -13vw; /* midden op de muis */
	border-radius: 4px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transform: scale(.6);
	transition: opacity var(--wvd-dur-fast) var(--wvd-ease), transform var(--wvd-dur) var(--wvd-ease);
}
.wvd-werk__preview.is-on { opacity: 1; transform: scale(1); }
.wvd-werk__preview-in { position: absolute; inset: 0; will-change: transform; }
.wvd-werk__preview img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.12);
	transition: opacity .35s var(--wvd-ease), transform .7s var(--wvd-ease);
}
.wvd-werk__preview img.is-on { opacity: 1; transform: scale(1); }
/* Zonder muis: miniatuur in de rij */
/* Zonder muis: uitklaplijst. Dicht: nummer, naam, soorten + vierkant fotootje rechts. Open: grote foto + knop */
.wvd-case__panel { display: none; }
@media not ((pointer: fine) and (min-width: 801px)) {
	.wvd-case { grid-template-columns: 3ch 1fr 4.2rem; grid-template-rows: auto auto auto; align-items: center; row-gap: .2rem; padding-block: 1rem; }
	.wvd-case__nr { grid-row: 1 / 3; align-self: start; padding-top: .5em; }
	.wvd-case__name { grid-column: 2; }
	.wvd-case__meta { grid-column: 2; grid-row: 2; }
	.wvd-case__name::before { display: none; }
	.wvd-case__img {
		display: block;
		grid-column: 3; grid-row: 1 / 3;
		aspect-ratio: 1;
		overflow: hidden;
		transition: opacity var(--wvd-dur-fast) var(--wvd-ease), transform var(--wvd-dur-fast) var(--wvd-ease);
	}
	.wvd-case__img img, .wvd-case__big img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
	/* Paneel klapt open via grid-rijen (0fr → 1fr): de enige plek waar we hoogte animeren, anders springt de lijst */
	.wvd-case__panel {
		display: grid;
		grid-column: 1 / -1;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--wvd-dur) var(--wvd-ease);
	}
	.wvd-case__panel-in { display: block; min-height: 0; overflow: hidden; }
	.wvd-case__big {
		display: block;
		aspect-ratio: 4 / 3;
		margin-top: .9rem;
		overflow: hidden;
		opacity: 0;
		transform: scale(.96);
		transition: opacity var(--wvd-dur) var(--wvd-ease), transform var(--wvd-dur) var(--wvd-ease);
	}
	.wvd-case__go {
		display: inline-flex;
		margin: .9rem 0 .3rem;
		padding: .7em 1.2em;
		background: var(--wvd-orange);
		color: var(--wvd-black);
		font-size: 15px;
		font-weight: 700;
	}
	.wvd-case.is-open .wvd-case__panel { grid-template-rows: 1fr; }
	.wvd-case.is-open .wvd-case__big { opacity: 1; transform: none; }
	.wvd-case.is-open .wvd-case__img { opacity: 0; transform: scale(.8); }
	.wvd-case.is-open .wvd-case__name { color: var(--wvd-blue); }
}

/* =========================================================
   Footer (Bricks footer-sjabloon)
   div.wvd-footer
     div.wvd-footer__cta   (kop + knop)
     div.wvd-footer__grid  (blokken: label + tekst/links)
     div.wvd-footer__base  (regel onderaan)
   ========================================================= */

.wvd-footer {
	width: 100%;
	padding: max(5rem, 7vw) var(--wvd-gutter) max(2rem, 2.4vw);
	background: var(--wvd-black);
	color: var(--wvd-white);
}
.wvd-footer__cta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: max(3rem, 5vw);
	border-bottom: 1px solid rgb(158 214 221 / .25);
}
.wvd-footer__title {
	margin: 0;
	color: var(--wvd-blue);
	font-size: max(3rem, 7vw);
	font-weight: 800;
	line-height: var(--wvd-lh-head);
	letter-spacing: var(--wvd-tracking-head);
	text-transform: lowercase;
}
.wvd-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	padding: max(2.5rem, 3.4vw) 0;
	font-size: max(1rem, 1vw);
	line-height: 1.6;
}
.wvd-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; }
.wvd-footer__col > * { margin: 0; }
.wvd-footer__label {
	margin-bottom: .8em !important;
	color: var(--wvd-blue);
	font-size: max(.75rem, .7vw);
	font-weight: 300;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.wvd-footer a:not(.wvd-btn) { color: inherit; text-decoration: none; }
.wvd-footer__nav ul { display: flex; flex-direction: column; gap: .15em; margin: 0; padding: 0; list-style: none; }
.wvd-footer__nav li { margin: 0; }
.wvd-footer__nav a { transition: color var(--wvd-dur-fast) var(--wvd-ease); }
.wvd-footer a:not(.wvd-btn):hover { color: var(--wvd-blue); }
.wvd-footer__nav .wvd-accent a { color: var(--wvd-orange); }
.wvd-footer__base {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: max(1.5rem, 1.6vw);
	border-top: 1px solid rgb(158 214 221 / .25);
	color: rgb(255 255 255 / .5);
	font-size: max(.875rem, .8vw);
}
.wvd-footer__base > * { margin: 0; }

/* =========================================================
   Header (Bricks header-sjabloon):
   div.wvd-header
     div#wvd-menu.wvd-menu     (schermvullend menu)
       image.wvd-menu__img     (sprekend beeld, links)
       div.wvd-menu__body
         nav.wvd-menu__nav     (grote links)
         div.wvd-menu__foot    (adres, telefoon)
     image.wvd-logo            (link naar home)
     div.wvd-header__right
       a.wvd-btn               (bakkie doen)
       button.wvd-burger
   ========================================================= */

.wvd-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: max(1.25rem, 2.2vw) var(--wvd-gutter) 0;
	pointer-events: none;
}
.wvd-header > * { pointer-events: auto; }
.wvd-header > .wvd-logo,
.wvd-header__right { position: relative; z-index: 1; }

/* Logo verdwijnt zodra je scrolt, zodat het niet door de tekst loopt; terug bovenaan en in het menu (menu.js) */
.wvd-header > .wvd-logo { transition: opacity var(--wvd-dur-fast) var(--wvd-ease), transform var(--wvd-dur-fast) var(--wvd-ease); }
.wvd-header.is-gescrold > .wvd-logo { opacity: 0; transform: translateY(-.75rem); pointer-events: none; }
.wvd-menu-open .wvd-header.is-gescrold > .wvd-logo { opacity: 1; transform: none; pointer-events: auto; }

.wvd-logo,
.wvd-logo img {
	display: block;
	width: max(4.25rem, 3.9vw);
	height: auto;
}

.wvd-header__right {
	display: flex;
	align-items: center;
	gap: max(.5rem, .6vw);
}

/* Primaire knop (§7): oranje, zwart loopt van onder vol, pijltje wisselt */
.wvd-btn {
	--mx: 0px;
	--my: 0px;
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: .7em;
	overflow: hidden;
	padding: .9em 1.5em;
	background: var(--wvd-orange);
	color: var(--wvd-black);
	font-size: max(1rem, .95vw);
	font-weight: 600;
	text-decoration: none;
	text-transform: lowercase;
	transform: translate(var(--mx), var(--my));
	transition: transform var(--wvd-dur-fast) var(--wvd-ease), color var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wvd-black);
	transform: translateY(101%);
	transition: transform .6s var(--wvd-ease);
}
.wvd-btn:hover,
.wvd-btn:focus-visible { color: var(--wvd-orange); }
.wvd-btn:hover::before,
.wvd-btn:focus-visible::before { transform: none; }

/* Bakkie-knop: kopje koffie, de kringels stijgen bij hover (menu.js zet het icoon erin) */
.wvd-kop {
	flex: none;
	width: 1.45em;
	height: 1.45em;
	min-width: 0;
	min-height: 0;
	margin-block: -.3em;
	overflow: visible;
}
@media (hover: hover) {
	html:not(.wvd-still) .wvd-btn:hover .wvd-kop__damp { animation: wvd-damp 1.5s var(--wvd-ease) infinite; }
	html:not(.wvd-still) .wvd-btn:hover .wvd-kop__damp + .wvd-kop__damp { animation-delay: .35s; }
}
html:not(.wvd-still) .wvd-btn:focus-visible .wvd-kop__damp { animation: wvd-damp 1.5s var(--wvd-ease) infinite; }
@keyframes wvd-damp {
	0% { opacity: 0; transform: translate(0, 3px); }
	35% { opacity: 1; transform: translate(1px, 0); }
	70% { opacity: 1; transform: translate(-1px, -2.5px); }
	100% { opacity: 0; transform: translate(0, -5px); }
}

/* Hamburger: twee streepjes die een kruis worden */
.wvd-burger {
	position: relative;
	display: block;
	width: max(3rem, 3.2vw);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background: var(--wvd-black);
	color: var(--wvd-white);
	cursor: pointer;
	transition: background-color var(--wvd-dur-fast) var(--wvd-ease), color var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-burger::before,
.wvd-burger::after {
	content: "";
	position: absolute;
	left: 30%;
	right: 30%;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform .6s var(--wvd-ease);
}
/* steeds dezelfde reeks transforms, zodat de overgang naar het kruis klopt */
.wvd-burger::before { transform: translate(0, -4px) rotate(0) scaleX(1); }
.wvd-burger::after  { transform: translate(20%, 4px) rotate(0) scaleX(.6); }
.wvd-burger:hover::after { transform: translate(0, 4px) rotate(0) scaleX(1); }
.wvd-menu-open .wvd-burger { background: var(--wvd-white); color: var(--wvd-black); }
.wvd-menu-open .wvd-burger::before { transform: translate(0, 0) rotate(45deg) scaleX(1); }
.wvd-menu-open .wvd-burger::after  { transform: translate(0, 0) rotate(-45deg) scaleX(1); }

/* Menu: zwart vlak zakt van boven in beeld, daarna beeld en regels */
html.wvd-menu-open,
html.wvd-menu-open body { overscroll-behavior: none; } /* slot in <head>, zie functions.php */

.wvd-menu {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
	visibility: hidden;
	color: var(--wvd-white);
	transition: visibility 0s linear .9s;
}
.wvd-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wvd-black);
	transform: translateY(-100%);
	transition: transform .8s var(--wvd-ease-io) .1s;
}
.wvd-menu-open .wvd-menu { visibility: visible; transition: none; }
.wvd-menu-open .wvd-menu::before { transform: none; transition-delay: 0s; }

/* Beelden liggen op elkaar; het beeld van het item onder de muis vloeit in */
.wvd-menu__media {
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: scale(1.12);
	transition: opacity .4s var(--wvd-ease), transform 1.2s var(--wvd-ease);
}
.wvd-menu-open .wvd-menu__media {
	opacity: 1;
	transform: none;
	transition: opacity .9s var(--wvd-ease) .45s, transform 1.6s var(--wvd-ease) .45s;
}
.wvd-menu__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .7s var(--wvd-ease), transform 1.4s var(--wvd-ease);
}
.wvd-menu__img.is-active {
	z-index: 1;
	opacity: 1;
	transform: none;
}

.wvd-menu__body {
	display: flex;
	flex-direction: column;
	padding: max(8rem, 10vw) var(--wvd-gutter) max(2rem, 2.6vw) max(2rem, 5vw);
}

/* Menu-items komen uit WordPress-menu's (Bricks nav-menu) */
.wvd-menu__nav ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wvd-menu__nav li { margin: 0; }
.wvd-menu__nav a {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .35em;
	overflow: hidden;
	padding: .04em 0 .2em; /* ruimte voor staarten (g, j) en accenten */
	margin-bottom: -.14em;
	color: inherit;
	text-decoration: none;
	transition: opacity var(--wvd-dur-fast) var(--wvd-ease), color var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-menu__nav--groot ul { counter-reset: wvd-menu; }
.wvd-menu__nav--groot a {
	font-size: clamp(3rem, min(7vw, 11vh), 8.5rem);
	font-weight: 700;
	letter-spacing: var(--wvd-tracking-head);
	line-height: .95;
	counter-increment: wvd-menu;
}
.wvd-menu__nav--groot a::before {
	content: "0" counter(wvd-menu);
	margin-top: .55em;
	color: var(--wvd-blue);
	font-size: max(12px, .7vw);
	font-weight: 600;
	letter-spacing: 0;
}
.wvd-menu__nav--klein { margin-top: max(2.5rem, 3vw); }
.wvd-menu__nav--klein ul { flex-direction: row; flex-wrap: wrap; gap: .2em max(1.5rem, 2vw); }
.wvd-menu__nav--klein a {
	font-size: clamp(1.8rem, 1.6vw, 2.6rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.wvd-menu__nav .wvd-accent a { color: var(--wvd-orange); }

.wvd-menu__nav a::before,
.wvd-menu__nav a > span {
	transform: translateY(150%); /* ver genoeg: anders piepen de bovenkanten van de letters onder de rand uit */
	transition: transform 0s linear .35s; /* sluiten: pas terugzetten als de tekst al weg is */
	will-change: transform;
}
/* Sluiten: de hele inhoud vervaagt snel, in plaats van regels die half wegschuiven */
.wvd-menu__body { opacity: 0; transition: opacity .25s var(--wvd-ease); }
.wvd-menu-open .wvd-menu__body { opacity: 1; transition: none; }
.wvd-menu__nav a > span { display: block; }
.wvd-menu-open .wvd-menu__nav a::before,
.wvd-menu-open .wvd-menu__nav a > span {
	transform: none;
	transition: transform 1s var(--wvd-ease) calc(.4s + var(--i, 0) * .06s);
}
.wvd-menu__nav a[aria-current="page"] { color: var(--wvd-orange); }
/* Hoveren: de andere regels doven, de gekozen regel krijgt oranje */
.wvd-menu__body:has(.wvd-menu__nav a:hover) .wvd-menu__nav a { opacity: .3; }
.wvd-menu__nav a:hover,
.wvd-menu__nav a:focus-visible { opacity: 1 !important; color: var(--wvd-orange); }

.wvd-menu__foot {
	display: flex;
	margin-top: auto;
	padding-top: 2rem;
	flex-wrap: wrap;
	gap: .5rem max(1.5rem, 3vw);
	color: var(--wvd-blue);
	font-size: max(1rem, .95vw);
	font-weight: 500;
	opacity: 0;
	transition: opacity .3s var(--wvd-ease);
}
.wvd-menu__foot > * { margin: 0; }
.wvd-motion-toggle {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: .25em;
	cursor: pointer;
}
.wvd-menu-open .wvd-menu__foot { opacity: 1; transition: opacity .8s var(--wvd-ease) .8s; }

/* Boven een donkere scène (menu.js zet .is-dark) */
.wvd-header { transition: color var(--wvd-dur-fast) var(--wvd-ease); }
.wvd-logo img { transition: filter var(--wvd-dur-fast) var(--wvd-ease); }
.wvd-header.is-dark,
.wvd-menu-open .wvd-header { color: var(--wvd-white); }
.wvd-header.is-dark .wvd-logo img,
.wvd-menu-open .wvd-logo img { filter: invert(1); }
.wvd-header.is-orange .wvd-btn { background: var(--wvd-black); color: var(--wvd-orange); }
.wvd-header.is-dark .wvd-burger { background: var(--wvd-white); color: var(--wvd-black); }

/* =========================================================
   Pagina-overgangen (View Transitions tussen pagina's; Chrome, Edge, Safari)
   Oude pagina vervaagt kort, nieuwe komt zacht omhoog. De header blijft staan.
   ========================================================= */
@view-transition { navigation: auto; }
.wvd-header { view-transition-name: wvd-header; }
::view-transition-old(root) { animation: wvd-vt-out .3s var(--wvd-ease) both; }
::view-transition-new(root) { animation: wvd-vt-in .7s var(--wvd-ease) .08s both; }
::view-transition-group(wvd-header) { animation-duration: .45s; }
@keyframes wvd-vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes wvd-vt-in { from { opacity: 0; transform: translateY(2.5vh); } }
html.wvd-still::view-transition-old(root),
html.wvd-still::view-transition-new(root),
html.wvd-still::view-transition-group(*) { animation: none; }
html.wvd-no-anim *, html.wvd-no-anim *::before, html.wvd-no-anim *::after { transition: none !important; }

/* Laden: niet scrollen tot de Mac-scène klaar is; dun oranje balkje onderin */
html.wvd-loading,
html.wvd-loading body { overscroll-behavior: none; } /* scrollen blokkeert het slot in <head> (functions.php), zonder de scrollbalk weg te halen */
.wvd-loadbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	height: 3px;
	pointer-events: none;
	transition: opacity var(--wvd-dur) var(--wvd-ease);
}
.wvd-loadbar > span {
	display: block;
	height: 100%;
	background: var(--wvd-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .6s var(--wvd-ease);
}
.wvd-loadbar.is-done { opacity: 0; }
/* Tijdens het laden staat het tekstje in de donkere balk; de balktekst wacht even */
body:has(.wvd-loadbar:not(.is-done)) .wvd-bar > * { visibility: hidden; } /* zolang het laadtekstje er staat; niet opacity: die animeert motion.js al */
.wvd-loadbar__label {
	position: absolute;
	right: var(--wvd-gutter);
	bottom: calc(100% + .6rem);
	display: flex;
	gap: .6em;
	margin: 0;
	color: var(--wvd-orange);
	font-size: max(12px, .75vw);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-transform: lowercase;
}
.wvd-loadbar__label b { min-width: 4ch; text-align: right; font-weight: inherit; }

/* ---------- Mobiel: alles onder elkaar, scrollen mag ---------- */
@media (max-width: 800px) {
	.brxe-section.wvd-scene { height: auto; min-height: 100svh; }
	.wvd-hero {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding-top: 2rem;
		padding-bottom: 3rem;
	}
	/* Mobiel: onder de tekst; de bovenkant vloeit zacht in, zodat de bus uit het niets komt */
	.wvd-shaker {
		position: relative;
		justify-self: end;
		width: calc(100% + var(--wvd-gutter));
		aspect-ratio: 1;
		margin: -2rem calc(var(--wvd-gutter) * -1) -3rem 0;
		-webkit-mask-image: linear-gradient(transparent, #000 22%);
		mask-image: linear-gradient(transparent, #000 22%);
	}
	.wvd-hero__title { font-size: clamp(3.4rem, 17vw, 6rem); }
	/* Donkere balk: alles op één regel, plaats valt weg */
	.wvd-bar { gap: .75rem; padding-block: 1.1rem; font-size: clamp(.7rem, 3.2vw, .9rem); white-space: nowrap; }
	.wvd-bar__meta > :not(:first-child) { display: none; }
	.wvd-werk__head, .wvd-footer__cta { flex-direction: column; align-items: flex-start; }
	.wvd-footer__grid { grid-template-columns: 1fr 1fr; }
	.wvd-footer { padding-bottom: 2rem; }
	.wvd-footer__base { flex-direction: column; }
	.brxe-section.wvd-scene--1993 { height: 560svh; min-height: 0; } /* niet de 'auto' van scène 1 overnemen */
	.wvd-1993__copy { max-width: none; right: var(--wvd-gutter); bottom: 3rem; }
	.wvd-footer { padding-top: 7rem; }
	.wvd-hero { padding-top: 9rem; padding-bottom: 3rem; }

	/* Header op mobiel: logo, knop en hamburger blijven in beeld; menu zonder beeld */
	.wvd-header .wvd-btn { padding: .7em 1em; }
	.wvd-burger { width: 2.9rem; }
	.wvd-menu { grid-template-columns: 1fr; }
	.wvd-menu__media { display: none; }
	.wvd-menu__body { padding: 12rem var(--wvd-gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); }
	.wvd-menu__nav--groot a { font-size: clamp(4.4rem, 14vw, 6.5rem); }
	.wvd-menu__nav--klein ul { flex-direction: column; }
}

/* =========================================================
   Subpagina's: vaste bouwblokken (zie bricks/strategie.json)
   section.wvd-pagehead   kruid wordt over de pagina gestrooid, de foto komt rustig in beeld
   section.wvd-reveal     zin die woord voor woord oplicht (pages.js)
   section.wvd-herkenbaar problemen worden doorgestreept
   section.wvd-route      lijn van vraag naar doel
   section.wvd-statement  reuzenletters die meeschuiven
   section.wvd-cta        afsluiter met knop
   pages.js zet --p (0..1, voortgang door de sectie) op de secties.
   ========================================================= */

.wvd-pagehead {
	position: relative;
	display: grid;
	align-items: end;
	width: 100%;
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding: 0 var(--wvd-gutter) max(3rem, 5vw);
	overflow: clip;
	background: var(--wvd-black);
	color: var(--wvd-white);
}
/* De foto komt rustig in beeld (van iets te groot naar passend) terwijl er kruid over de pagina valt (pages.js) */
.wvd-pagehead__img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100vw, 100svh);
	max-width: none; /* Bricks beperkt afbeeldingen tot 100%: dan is het geen vierkant meer op mobiel */
	height: max(100vw, 100svh);
	margin: calc(max(100vw, 100svh) / -2) 0 0 calc(max(100vw, 100svh) / -2);
	object-fit: cover;
	opacity: 0;
	transform: scale(1.14);
	transition: opacity 1.4s var(--wvd-ease) 1.1s, transform 3.4s var(--wvd-ease) .9s; /* eerst valt het kruid, dan komt de foto */
}
/* Korrels: pages.js maakt ze alleen bij een kruidfoto en niet in de rustige stand. Kleur per kruid via --c */
.wvd-korrels { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wvd-korrel {
	position: absolute;
	top: -3vh;
	left: var(--x);
	width: var(--s);
	height: calc(var(--s) * .8);
	border-radius: 45%;
	background: var(--c);
	opacity: 0;
	animation: wvd-strooi var(--d) cubic-bezier(.45, 0, .9, .55) var(--w) both;
}
@keyframes wvd-strooi {
	0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
	8% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; transform: translate3d(var(--dx), 112svh, 0) rotate(var(--r)); }
}
.wvd-pagehead::after { /* donker verloop onderin zodat de tekst leesbaar blijft */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgb(26 24 24 / .4), rgb(26 24 24 / 0) 22%, rgb(26 24 24 / 0) 30%, rgb(26 24 24 / .75));
	opacity: 0;
	transition: opacity 1.2s var(--wvd-ease) 1.4s;
}
.wvd-pagehead__copy { position: relative; z-index: 1; }
.wvd-pagehead__kicker {
	margin: 0 0 1rem;
	color: var(--wvd-blue);
	font-size: max(13px, .85vw);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.wvd-pagehead__title {
	margin: 0;
	font-size: min(13vw, 19vh);
	font-weight: 700;
	letter-spacing: var(--wvd-tracking-head);
	line-height: .88;
}
.wvd-pagehead__intro {
	max-width: 26em;
	margin: max(1.5rem, 1.6vw) 0 0;
	font-size: max(17px, 1.3vw);
	font-weight: 500;
}
.wvd-pagehead .wvd-line { padding-top: .12em; margin-top: -.12em; } /* ook ruimte boven (puntjes, accenten) */
.wvd-pagehead .wvd-line > span,
.wvd-pagehead__kicker,
.wvd-pagehead__intro { display: block; transform: translateY(150%); opacity: 0; transition: transform 1.2s var(--wvd-ease), opacity .8s var(--wvd-ease); }
.wvd-pagehead .wvd-line:nth-child(2) > span { transition-delay: .1s; }
.wvd-ready .wvd-pagehead__img { opacity: 1; transform: none; }
/* Mobiel: de grote foto eerst op een eigen laag */
@media (max-width: 800px) { .wvd-pagehead__img { will-change: transform, opacity; } }
.wvd-ready .wvd-pagehead::after { opacity: 1; }
.wvd-ready .wvd-pagehead .wvd-line > span { transform: none; opacity: 1; transition-delay: 1.6s; }
.wvd-ready .wvd-pagehead .wvd-line:nth-child(2) > span { transition-delay: 1.7s; }
.wvd-ready .wvd-pagehead__kicker { transform: none; opacity: 1; transition-delay: 1.5s; }
.wvd-ready .wvd-pagehead__intro { transform: none; opacity: 1; transition-delay: 1.9s; }

/* Zin die oplicht: plakt vast terwijl je scrolt */
.wvd-reveal {
	height: 220svh;
	background: var(--wvd-blue);
	color: var(--wvd-black);
}
.wvd-reveal__stick,
.wvd-herkenbaar__stick {
	position: sticky;
	top: 0;
	display: grid;
	align-content: center;
	justify-items: start;
	height: 100svh;
	padding: 0 var(--wvd-gutter);
}
.wvd-reveal__text {
	max-width: 18em;
	margin: 0;
	font-size: max(32px, 4.6vw);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.02;
}
.wvd-reveal__text .wvd-w { opacity: .15; transition: opacity .3s linear; }
.wvd-reveal__text .wvd-w.is-on { opacity: 1; }

/* Herkenbaar? */
.wvd-herkenbaar {
	height: 260svh;
	background: var(--wvd-black);
	color: var(--wvd-white);
}
.wvd-herkenbaar__title {
	margin: 0 0 max(2rem, 3vw);
	color: var(--wvd-blue);
	font-size: max(18px, 1.4vw);
	font-weight: 600;
}
.wvd-herkenbaar__item {
	position: relative;
	width: fit-content;
	margin: 0;
	font-size: max(28px, 4vw);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.15;
	transition: opacity .6s var(--wvd-ease);
}
.wvd-herkenbaar__item::after {
	content: "";
	position: absolute;
	left: -.1em;
	right: -.1em;
	top: 54%;
	height: .09em;
	background: var(--wvd-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .7s var(--wvd-ease);
}
.wvd-herkenbaar__item.is-on { opacity: .45; }
.wvd-herkenbaar__item.is-on::after { transform: none; }
.wvd-herkenbaar__end {
	margin: max(2rem, 3vw) 0 0;
	color: var(--wvd-orange);
	font-size: max(28px, 4vw);
	font-weight: 700;
	letter-spacing: -.035em;
	opacity: 0;
	transform: translateY(1em);
	transition: opacity .8s var(--wvd-ease), transform .8s var(--wvd-ease);
}
.wvd-herkenbaar__end.is-on { opacity: 1; transform: none; }

/* Route */
.wvd-route {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: max(2rem, 5vw);
	padding: max(7rem, 10vw) var(--wvd-gutter);
	background: var(--wvd-white);
	color: var(--wvd-black);
}
.wvd-route__title {
	position: sticky;
	top: max(8rem, 10vw);
	align-self: start;
	margin: 0;
	font-size: max(44px, 6vw);
	font-weight: 700;
	letter-spacing: var(--wvd-tracking-head);
	line-height: .9;
}
.wvd-route__steps { position: relative; padding-left: max(2.5rem, 4vw); }
.wvd-route__steps::before,
.wvd-route__steps::after {
	content: "";
	position: absolute;
	left: 6px;
	top: .6em;
	bottom: .6em;
	width: 2px;
	background: rgb(26 24 24 / .12);
}
.wvd-route__steps::after {
	background: var(--wvd-orange);
	transform: scaleY(var(--p, 0));
	transform-origin: top;
}
.wvd-route__step {
	position: relative;
	padding-bottom: max(4rem, 7vw);
	opacity: .25;
	transform: translateX(-.5em);
	transition: opacity .6s var(--wvd-ease), transform .6s var(--wvd-ease);
}
.wvd-route__step:last-child { padding-bottom: 0; }
.wvd-route__step::before { /* stip op de lijn */
	content: "";
	position: absolute;
	left: calc(-1 * max(2.5rem, 4vw) + 1px);
	top: .55em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wvd-black);
	transform: scale(.5);
	transition: transform .5s var(--wvd-ease), background-color .5s var(--wvd-ease);
}
.wvd-route__step.is-on { opacity: 1; transform: none; }
.wvd-route__step.is-on::before { background: var(--wvd-orange); transform: scale(1.3); }
.wvd-route__step h3 {
	margin: 0 0 .4em;
	font-size: max(26px, 2.6vw);
	font-weight: 700;
	letter-spacing: -.03em;
}
.wvd-route__step p { max-width: 28em; margin: 0; font-size: max(17px, 1.15vw); line-height: 1.5; }

/* Statement */
.wvd-statement {
	overflow: clip;
	padding: max(6rem, 9vw) 0;
	background: var(--wvd-orange);
	color: var(--wvd-black);
}
.wvd-statement__line {
	margin: 0;
	font-size: 17vw;
	font-weight: 700;
	letter-spacing: -.06em;
	line-height: .85;
	white-space: nowrap;
	transform: translateX(calc((var(--p, .5) - .5) * 30vw));
}
.wvd-statement__line:nth-child(2) { transform: translateX(calc((var(--p, .5) - .5) * -30vw + 8vw)); }

/* Afsluiter */
.wvd-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding: max(7rem, 10vw) var(--wvd-gutter);
	background: var(--wvd-blue);
	color: var(--wvd-black);
}
.wvd-cta__title {
	margin: 0;
	font-size: max(52px, 9vw);
	font-weight: 700;
	letter-spacing: var(--wvd-tracking-head);
	line-height: .88;
}

/* Projecten: kop links, kaarten schuiven opzij terwijl je scrolt */
.wvd-projecten {
	height: 300svh;
	background: var(--wvd-black);
	color: var(--wvd-white);
}
.wvd-projecten__stick {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: max(2rem, 3vw);
	height: 100svh;
	overflow: hidden;
}
.wvd-projecten__title {
	margin: 0;
	padding: 0 var(--wvd-gutter);
	color: var(--wvd-blue);
	font-size: max(40px, 5vw);
	font-weight: 700;
	letter-spacing: var(--wvd-tracking-head);
	line-height: .9;
}
.brxe-div.wvd-projecten__track { width: max-content; } /* Bricks zet divs op 100% */
.wvd-projecten__track {
	display: flex;
	gap: max(1rem, 1.6vw);
	width: max-content;
	padding: 0 var(--wvd-gutter);
	transform: translateX(calc(var(--p, 0) * var(--shift, 0px) * -1));
}
.wvd-project {
	display: block;
	flex: none;
	width: min(70vw, 26vw + 6rem);
	color: inherit;
	text-decoration: none;
}
.wvd-project__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform .9s var(--wvd-ease);
}
.wvd-project { overflow: hidden; }
.wvd-project:hover .wvd-project__img { transform: scale(1.07); }
.wvd-project__name {
	margin: 1rem 0 0;
	font-size: max(22px, 1.8vw);
	font-weight: 700;
	letter-spacing: -.03em;
}
.wvd-project__tag { margin: .2em 0 0; color: var(--wvd-blue); font-size: max(14px, .9vw); }
@media (max-width: 800px) { .wvd-project { width: 78vw; } }
/* Stil (reduced motion of rustige stand; pages.js/werk.js zetten .wvd-still op <html>) */
.wvd-still .wvd-projecten { height: auto; }
.wvd-still .wvd-projecten__stick { position: static; height: auto; padding-block: 6rem; overflow-x: auto; }
.wvd-still .wvd-projecten__track { transform: none; }

/* Bricks maakt secties flex en gecentreerd; onze blokken regelen hun eigen opbouw */
.brxe-section:is(.wvd-reveal, .wvd-herkenbaar, .wvd-statement, .wvd-projecten, .wvd-marquee, .wvd-rows, .wvd-wall, .wvd-browser, .wvd-reasons) { display: block; }

/* Kleurvarianten voor bouwblokken (class op de sectie) */
.wvd-pagesec.is-dark, .wvd-rows.is-dark, .wvd-split.is-dark { background: var(--wvd-black); color: var(--wvd-white); }
.wvd-marquee.is-orange, .wvd-split.is-orange { background: var(--wvd-orange); color: var(--wvd-black); }
.wvd-split.is-blue, .wvd-marquee.is-blue { background: var(--wvd-blue); color: var(--wvd-black); }

/* Lopende band: tekst wordt verdubbeld door pages.js, schuift oneindig */
.wvd-marquee {
	overflow: clip;
	padding: max(1.6rem, 2.2vw) 0;
	background: var(--wvd-black);
	color: var(--wvd-white);
}
.wvd-marquee__text {
	display: flex;
	width: max-content;
	margin: 0;
	font-size: max(36px, 6vw);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
	white-space: nowrap;
	will-change: transform;
}
.wvd-marquee__text span { padding-right: .4em; }

/* Kop links, tekst rechts */
.wvd-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: max(2rem, 5vw);
	align-items: end;
	padding: max(7rem, 10vw) var(--wvd-gutter);
	background: var(--wvd-white);
	color: var(--wvd-black);
}
.wvd-split__title,
.wvd-rows__title,
.wvd-wall__title,
.wvd-browser__title,
.wvd-chart__title,
.wvd-reasons__title {
	margin: 0;
	font-size: max(44px, 6vw);
	font-weight: 700;
	letter-spacing: var(--wvd-tracking-head);
	line-height: .9;
}
.wvd-split__body,
.wvd-chart__text { max-width: 30em; margin: 0; font-size: max(17px, 1.25vw); line-height: 1.55; }

/* Rijen: groot, genummerd, schuiven één keer in beeld */
.wvd-rows {
	padding: max(7rem, 10vw) var(--wvd-gutter);
	background: var(--wvd-white);
	color: var(--wvd-black);
}
.wvd-rows__title { margin-bottom: max(3rem, 4vw); }
.wvd-rows__list { counter-reset: wvd-row; border-top: 1px solid currentColor; }
.wvd-row {
	display: grid;
	grid-template-columns: 4ch minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: baseline;
	padding: max(1.4rem, 1.8vw) 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	counter-increment: wvd-row;
	opacity: 0;
	transform: translateY(1.5em);
	transition: opacity .8s var(--wvd-ease), transform .8s var(--wvd-ease);
	transition-delay: calc(var(--i, 0) * .08s);
}
.wvd-row::before { content: "0" counter(wvd-row); color: var(--wvd-orange); font-size: max(13px, .8vw); font-weight: 600; }
.wvd-row.is-on { opacity: 1; transform: none; }
.wvd-row__name { margin: 0; font-size: max(26px, 3vw); font-weight: 700; letter-spacing: -.035em; }
.wvd-row__text { margin: 0; font-size: max(16px, 1.1vw); opacity: .75; }

/* Beeldwand: drie kolommen die met eigen snelheid schuiven (pages.js zet --p) */
.wvd-wall {
	position: relative;
	overflow: clip;
	padding: max(7rem, 10vw) var(--wvd-gutter);
	background: var(--wvd-black);
	color: var(--wvd-white);
}
.wvd-wall__title { position: relative; z-index: 1; max-width: 9em; margin-bottom: max(3rem, 5vw); }
.wvd-wall__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(1rem, 1.6vw);
	align-items: start;
}
.wvd-wall__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transform: translateY(calc((var(--p, .5) - .5) * var(--speed, 0) * 1px));
}
.wvd-wall__grid { max-width: 1400px; margin-inline: auto; }
.wvd-wall__img:nth-child(3n+1) { --speed: -120; }
.wvd-wall__img:nth-child(3n+2) { --speed: 160; margin-top: 12vw; }
.wvd-wall__img:nth-child(3n)   { --speed: -40; margin-top: 5vw; }

/* Browser die zichzelf opbouwt */
.wvd-browser {
	height: 380svh;
	background: var(--wvd-white);
	color: var(--wvd-black);
}
.wvd-browser__stick {
	position: sticky;
	top: 0;
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: max(2rem, 5vw);
	align-items: center;
	height: 100svh;
	padding: max(6rem, 7vw) var(--wvd-gutter) max(2rem, 3vw);
}
.wvd-browser__title { margin-bottom: max(2rem, 3vw); }
.wvd-browser__copy { display: grid; }
.wvd-browser__stage { grid-area: 2 / 1; opacity: 0; transform: translateY(1em); transition: opacity .5s var(--wvd-ease), transform .5s var(--wvd-ease); }
.wvd-browser__title { grid-area: 1 / 1; }
.wvd-browser__stage.is-on { opacity: 1; transform: none; }
.wvd-browser__stage h3 { margin: 0 0 .3em; color: var(--wvd-orange); font-size: max(26px, 2.6vw); font-weight: 700; letter-spacing: -.03em; }
.wvd-browser__stage p { max-width: 24em; margin: 0; font-size: max(17px, 1.2vw); }
/* Het venster wordt door pages.js gevuld met lagen (decoratie, geen inhoud) */
.wvd-browser__window {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 10px;
	background: #f2f2ef;
	box-shadow: 0 30px 80px -30px rgb(26 24 24 / .45);
}
.wvd-bw { position: absolute; transition: opacity .7s var(--wvd-ease), transform .9s var(--wvd-ease); }
.wvd-bw--bar { inset: 0 0 auto; height: 7%; background: #e1e1dc; }
.wvd-bw--bar::before { content: ""; position: absolute; left: 2%; top: 35%; width: 5%; height: 30%; background: radial-gradient(circle, #ff6058 30%, transparent 32%) 0 0 / 33% 100%, radial-gradient(circle, #ffbd2e 30%, transparent 32%) 50% 0 / 33% 100%, radial-gradient(circle, #28c940 30%, transparent 32%) 100% 0 / 33% 100%; background-repeat: no-repeat; }
.wvd-bw-adres { position: absolute; left: 12%; top: 22%; bottom: 22%; display: flex; align-items: center; width: 42%; padding-inline: 1em; border-radius: 99px; background: var(--wvd-white); color: var(--wvd-black); font-size: max(10px, .72vw); font-style: normal; font-weight: 500; }
.wvd-bw-adres { color: transparent; transition: color .5s var(--wvd-ease); }
.wvd-browser__window[data-stage="3"] .wvd-bw-adres { color: var(--wvd-black); }
.wvd-bw-view { position: absolute; inset: 7% 0 0; overflow: hidden; background: #f7f7f4; }
.wvd-bw-site { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; opacity: 0; transition: opacity .9s var(--wvd-ease); }
.wvd-bw-wire { position: absolute; display: grid; place-items: center; border: 1.5px dashed rgb(26 24 24 / .35); border-radius: 3px; background: rgb(26 24 24 / .03); color: rgb(26 24 24 / .65); font-size: max(8px, .62vw); font-style: normal; font-weight: 600; line-height: 1.1; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--wvd-ease), transform .45s var(--wvd-ease); }
.wvd-bw-wire .is-onder { position: absolute; top: 76%; } /* label onder de vakjes die er later in komen */
.wvd-browser__window[data-stage="0"] .wvd-bw-wire[data-fase="0"],
.wvd-browser__window[data-stage="1"] .wvd-bw-wire { opacity: 1; transform: none; transition-delay: calc(var(--i) * 35ms); }
.wvd-browser__window:is([data-stage="2"], [data-stage="3"]) .wvd-bw-site { opacity: 1; }

/* Groeiende staven */
.wvd-chart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: max(2rem, 5vw);
	align-items: end;
	padding: max(7rem, 10vw) var(--wvd-gutter);
	background: var(--wvd-black);
	color: var(--wvd-white);
}
.wvd-chart__title { margin-bottom: 1.5rem; color: var(--wvd-blue); }
.wvd-chart__bars {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: max(.6rem, 1vw);
	align-items: end;
	height: min(60vh, 40vw);
	border-bottom: 1px solid rgb(255 255 255 / .3);
}
.wvd-chart__bar {
	position: relative;
	height: calc(25% + var(--i, 0) * 15%);
	margin: 0;
	background: var(--wvd-orange);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 1.2s var(--wvd-ease);
	transition-delay: calc(var(--i, 0) * .12s);
	font-size: 0;
}
.wvd-chart__bar::after { content: attr(data-label); position: absolute; left: 0; top: calc(100% + .6rem); color: rgb(255 255 255 / .6); font-size: max(12px, .75vw); }
.wvd-chart.is-on .wvd-chart__bar { transform: none; }
.wvd-chart__bar:last-child { background: var(--wvd-blue); }

/* Redenen */
.wvd-reasons {
	padding: max(7rem, 10vw) var(--wvd-gutter);
	background: var(--wvd-blue);
	color: var(--wvd-black);
}
.wvd-reasons__title { margin-bottom: max(3rem, 4vw); }
.wvd-reasons__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(1.5rem, 3vw); }
.wvd-reason { padding-top: 1.2rem; border-top: 2px solid var(--wvd-black); opacity: 0; transform: translateY(1.5em); transition: opacity .8s var(--wvd-ease), transform .8s var(--wvd-ease); transition-delay: calc(var(--i, 0) * .12s); }
.wvd-reason.is-on { opacity: 1; transform: none; }
.wvd-reason h3 { margin: 0 0 .5em; font-size: max(24px, 2.2vw); font-weight: 700; letter-spacing: -.03em; }
.wvd-reason p { margin: 0; font-size: max(16px, 1.1vw); line-height: 1.5; }

/* Tijdlijn: zelfde strook als projecten, jaartal groot */
.wvd-timeline .wvd-project__name { color: var(--wvd-orange); font-size: max(40px, 4vw); letter-spacing: -.05em; }
.wvd-timeline .wvd-project__tag { color: var(--wvd-white); font-size: max(16px, 1.1vw); max-width: 22em; }
.wvd-timeline .wvd-project { pointer-events: none; }

@media (max-width: 800px) {
	.wvd-split, .wvd-chart, .wvd-browser__stick { grid-template-columns: 1fr; }
	.wvd-browser__stick { align-content: center; gap: 2rem; }
	.wvd-row { grid-template-columns: 3ch 1fr; }
	.wvd-row__text { grid-column: 2; }
	.wvd-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wvd-wall__img:nth-child(n) { margin-top: 0; }
	.wvd-wall__img:nth-child(2n) { margin-top: 10vw; }
	.wvd-reasons__grid { grid-template-columns: 1fr; }
}
/* Stil (reduced motion of rustige stand; pages.js/werk.js zetten .wvd-still op <html>) */
.wvd-still .wvd-row, .wvd-still .wvd-reason, .wvd-still .wvd-chart__bar, .wvd-still .wvd-browser__stage, .wvd-still .wvd-wall__img { opacity: 1; transform: none !important; }
.wvd-still .wvd-browser { height: auto; }
.wvd-still .wvd-browser__stick { position: static; height: auto; }
.wvd-still .wvd-browser__stage, .wvd-still .wvd-browser__title { grid-area: auto; margin-bottom: 1.5rem; }

/* =========================================================
   Projecten (inc/werk.php): overzicht met kubusfilter en projectpagina per klant
   ========================================================= */
.brxe-section.wvd-werk-page {
	display: block;
	padding: max(9rem, 11vw) var(--wvd-gutter) max(6rem, 8vw);
	background: var(--wvd-white);
	color: var(--wvd-black);
}
.wvd-werk-page__title,
.wvd-klanthead__title {
	margin: 0 0 0 -.055em; /* optisch gelijk met de tekst eronder (de p heeft witruimte links) */
	padding-bottom: .1em;  /* ruimte voor de staart van p en j */
	font-size: min(13vw, 19vh);
	font-weight: 700;
	letter-spacing: var(--wvd-tracking-head);
	line-height: .88;
}
.wvd-klanthead__title.is-lang { font-size: min(9.5vw, 15vh); } /* lange woorden (bijv. Advocatenkantoor) passen dan nog */
.wvd-werk-page__intro { max-width: 26em; margin: max(16px, 1.2vw) 0 max(2.5rem, 4vw); font-size: max(17px, 1.25vw); }


/* Filter: knopjes per dienst en per soort */
.wvd-werkfilter {
	display: grid;
	gap: .8rem;
	margin: max(3rem, 4vw) 0 max(2.5rem, 3vw);
}
.wvd-werkfilter__groups,
.wvd-werkfilter__soorten { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Mobiel: elke filtergroep één regel die je zijwaarts veegt, tot tegen de schermrand */
@media (max-width: 800px) {
	.wvd-werkfilter { gap: .5rem; margin: 2.4rem calc(var(--wvd-gutter) * -1) 2.4rem; }
	.wvd-werkfilter__groups,
	.wvd-werkfilter__soorten {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-inline: var(--wvd-gutter);
		scroll-padding-inline: var(--wvd-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.wvd-werkfilter__groups::-webkit-scrollbar,
	.wvd-werkfilter__soorten::-webkit-scrollbar { display: none; }
	.wvd-werkfilter .wvd-chip { flex: none; }
	.wvd-werkfilter__groups .wvd-chip { font-size: 15px; padding: .5em 1em; }
}.wvd-chip {
	padding: .55em 1.1em;
	border: 1.5px solid var(--wvd-black);
	border-radius: 999px;
	background: none;
	color: var(--wvd-black);
	font: inherit;
	font-size: max(15px, 1vw);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--wvd-dur-fast) var(--wvd-ease), color var(--wvd-dur-fast) var(--wvd-ease), opacity var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-chip:hover { background: rgb(26 24 24 / .08); }
.wvd-chip.is-on { background: var(--wvd-black); color: var(--wvd-white); }
.wvd-chip--soort { padding: .4em .9em; border-color: rgb(26 24 24 / .25); font-size: max(13px, .85vw); font-weight: 500; }
.wvd-chip--soort.is-on { background: var(--wvd-orange); border-color: var(--wvd-orange); color: var(--wvd-black); }
.wvd-chip--soort[hidden] { display: none; }

/* Raster: grote en kleine werkstukken door elkaar (werk.js zet data-size) */
.wvd-werkgrid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: max(2rem, 3vw) max(1rem, 1.6vw);
	align-items: start;
}
.wvd-werkitem { grid-column: span 4; display: block; color: inherit; text-decoration: none; }
.wvd-werkitem[data-size="l"] { grid-column: span 7; }
.wvd-werkitem[data-size="m"] { grid-column: span 5; margin-top: 8vw; }
.wvd-werkitem[data-size="s"] { grid-column: span 4; }
.wvd-werkitem[hidden] { display: none; }
/* Projectenoverzicht ([wvd_klanten]): ritme van groot-middel, dan drie naast elkaar */
@media (max-width: 800px) {
	.wvd-werkgrid { grid-template-columns: minmax(0, 1fr); }
	.wvd-werkgrid .wvd-werkitem { grid-column: auto !important; margin-top: 0 !important; }
}
.wvd-werkitem__img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; }
.wvd-werkitem__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.01); transition: transform 1s var(--wvd-ease); }
.wvd-werkitem__img::after { /* kruidkleur-laagje bij hover */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wvd-orange);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-werkitem:hover .wvd-werkitem__img img { transform: scale(1.06); }
.wvd-werkitem:hover .wvd-werkitem__img::after { opacity: .35; }
.wvd-werkitem__meta { display: block; margin-top: .9rem; }
.wvd-werkitem__klant { font-size: max(20px, 1.6vw); font-weight: 700; letter-spacing: -.03em; }
.wvd-werkitem__klant, .wvd-werkitem__soort { display: block; }
.wvd-werkitem__soort { padding-top: .25em; color: rgb(26 24 24 / .6); font-size: max(13px, .85vw); }
.wvd-werkitem.is-in { animation: wvd-werk-in .7s var(--wvd-ease) both; }
@keyframes wvd-werk-in { from { opacity: 0; transform: translateY(2rem); } }

/* Projectpagina van een klant */
.wvd-klant { background: var(--wvd-white); color: var(--wvd-black); }
.wvd-klanthead { padding: max(9rem, 11vw) var(--wvd-gutter) max(4rem, 6vw); }
.wvd-klanthead .wvd-pagehead__kicker a { color: var(--wvd-black); opacity: .55; text-decoration: none; }
.wvd-klanthead__intro { max-width: 30em; margin-top: 2.2rem; font-size: max(18px, 1.4vw); }
.wvd-klanthead__intro p { margin: 0; }
.wvd-klanthead__index { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.wvd-klanthead__index a { display: inline-block; padding: .45em 1em; border: 1.5px solid var(--wvd-black); border-radius: 999px; color: inherit; font-size: max(14px, .9vw); font-weight: 600; text-decoration: none; }
.wvd-klanthead__index a:hover { background: var(--wvd-black); color: var(--wvd-white); }
.wvd-klantwerk__item {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	gap: max(1.5rem, 3vw);
	align-items: end;
	padding: max(2rem, 4vw) var(--wvd-gutter);
	scroll-margin-top: 6rem;
}
.wvd-klantwerk__item:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
.wvd-klantwerk__item:nth-child(even) .wvd-klantwerk__img { order: 2; }
.wvd-klantwerk__img img { display: block; width: 100%; height: auto; max-height: 80svh; aspect-ratio: 4 / 3; object-fit: cover; }
.wvd-klantwerk__nr { margin: 0; color: var(--wvd-orange); font-weight: 600; }
.wvd-klantwerk__title { margin: .2em 0; font-size: max(30px, 3.2vw); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.wvd-klantwerk__soort { margin: 0; color: rgb(26 24 24 / .6); }
.wvd-klantwerk__text { max-width: 24em; margin: 1rem 0 0; font-size: max(16px, 1.1vw); line-height: 1.5; }
.wvd-klantwerk__item:target .wvd-klantwerk__title { color: var(--wvd-orange); }
.wvd-klantwerk__item { opacity: 0; transform: translateY(2rem); transition: opacity .9s var(--wvd-ease), transform .9s var(--wvd-ease); }
.wvd-klantwerk__item.is-on { opacity: 1; transform: none; }
.wvd-klantmeer { padding: max(5rem, 7vw) var(--wvd-gutter); background: var(--wvd-black); color: var(--wvd-white); }
.wvd-klantmeer__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: max(2rem, 3vw); }
.wvd-klantmeer__title { margin: 0; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.wvd-klantmeer__alle { flex: none; color: var(--wvd-blue); font-size: max(16px, 1.1vw); font-weight: 600; }
.wvd-klantmeer__alle:hover { color: var(--wvd-orange); }
.wvd-klantmeer .wvd-werkitem__soort { color: rgb(255 255 255 / .6); }

@media (max-width: 800px) {
	.wvd-werkitem[data-size] { grid-column: 1 / -1; margin-top: 0; }
	.wvd-klantwerk__item, .wvd-klantwerk__item:nth-child(even) { grid-template-columns: 1fr; }
	.wvd-klantwerk__item:nth-child(even) .wvd-klantwerk__img { order: 0; }
}
/* Stil (reduced motion of rustige stand; pages.js/werk.js zetten .wvd-still op <html>) */
.wvd-still .wvd-klantwerk__item { opacity: 1; transform: none; }
.wvd-still .wvd-werkitem.is-in { animation: none; }

/* =========================================================
   Aan tafel: formulier als gesprek (Bricks-formulier in section.wvd-gesprek)
   Labels lopen als zinnen door, velden zijn onderstreepte invulplekken.
   ========================================================= */
.brxe-section.wvd-gesprek {
	display: block;
	padding: max(7rem, 9vw) var(--wvd-gutter);
	background: var(--wvd-white);
	color: var(--wvd-black);
}
.wvd-gesprek__title { margin: 0 0 max(2.5rem, 3.5vw); color: var(--wvd-orange); font-size: max(18px, 1.3vw); font-weight: 600; }
.brxe-form.wvd-gesprek__form {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35em .5em;
	max-width: 22em;
	font-size: max(26px, 3.2vw);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.35;
}
.wvd-gesprek__form .form-group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1em .35em;
	width: auto;
	margin: 0;
	padding: 0;
}
.wvd-gesprek__form .form-group > label,
.wvd-gesprek__form .form-group > .label { margin: 0; padding: 0; color: var(--wvd-black); font: inherit; letter-spacing: inherit; text-transform: none; }
/* Bricks zet elk veld op een eigen regel; hier lopen ze als zin door */
.brxe-form.wvd-gesprek__form .form-group { flex-direction: row; width: auto; }
.wvd-gesprek__form input[type=text],
.wvd-gesprek__form input[type=email],
.wvd-gesprek__form input[type=tel] {
	width: 9em;
	min-width: 0;
	padding: 0 0 .05em;
	border: 0;
	border-bottom: 3px solid var(--wvd-black);
	border-radius: 0;
	background: none;
	color: var(--wvd-orange);
	font: inherit;
	letter-spacing: inherit;
	line-height: 1.2;
}
.wvd-gesprek__form input::placeholder,
.wvd-gesprek__form textarea::placeholder { color: rgb(26 24 24 / .22); }
.wvd-gesprek__form input:focus,
.wvd-gesprek__form textarea:focus { outline: none; border-color: var(--wvd-orange); }
/* Onderwerp: knopjes in plaats van rondjes */
.wvd-gesprek__form .options-wrapper { display: inline-flex; flex-wrap: wrap; gap: .25em; margin: 0; padding: 0; list-style: none; }
.wvd-gesprek__form .options-wrapper li { margin: 0; }
.wvd-gesprek__form .options-wrapper input { position: absolute; opacity: 0; pointer-events: none; }
.wvd-gesprek__form .options-wrapper label {
	display: inline-block;
	padding: .05em .45em .12em;
	border: 3px solid var(--wvd-black);
	border-radius: 999px;
	color: var(--wvd-black);
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	transition: background-color var(--wvd-dur-fast) var(--wvd-ease), color var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-gesprek__form .options-wrapper label:hover { background: rgb(26 24 24 / .07); }
.wvd-gesprek__form .options-wrapper input:checked + label { background: var(--wvd-orange); border-color: var(--wvd-orange); }
.wvd-gesprek__form .options-wrapper input:focus-visible + label { outline: 3px solid var(--wvd-blue); outline-offset: 2px; }
.wvd-gesprek__form .form-group:has(textarea) { display: flex; width: 100%; margin-top: .4em; }
.wvd-gesprek__form textarea {
	width: 100%;
	min-height: 3.2em;
	padding: .2em 0;
	border: 0;
	border-bottom: 3px solid var(--wvd-black);
	border-radius: 0;
	background: none;
	color: var(--wvd-orange);
	font: inherit;
	font-size: .7em;
	letter-spacing: -.02em;
	resize: vertical;
}
.wvd-gesprek__form .submit-button-wrapper { width: 100%; margin-top: .6em; }
.wvd-gesprek__form button[type=submit] {
	padding: .85em 1.5em;
	border: 0;
	border-radius: 0;
	background: var(--wvd-orange);
	color: var(--wvd-black);
	font-size: max(19px, 1.35vw);
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color var(--wvd-dur-fast) var(--wvd-ease), color var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-gesprek__form button[type=submit]:hover { background: var(--wvd-black); color: var(--wvd-orange); }
.wvd-gesprek__form .message { width: 100%; margin-top: .6em; padding: 0; background: none; font-size: .8em; }
.wvd-gesprek__form .message.success { color: var(--wvd-orange); animation: wvd-werk-in .8s var(--wvd-ease) both; }
.wvd-gesprek__form .message.error { color: #c0392b; font-size: .5em; }
.wvd-contact .wvd-reason .wvd-menulink { font-size: max(18px, 1.3vw); }
.wvd-contact .wvd-reason p { font-size: max(18px, 1.3vw); }
@media (max-width: 800px) {
	.brxe-form.wvd-gesprek__form { font-size: 24px; }
	.wvd-gesprek__form input[type=text], .wvd-gesprek__form input[type=email], .wvd-gesprek__form input[type=tel] { width: 100%; }
}

@media (max-width: 800px) {
	.wvd-route { grid-template-columns: 1fr; }
	.wvd-route__title { position: static; }
	.wvd-herkenbaar__item { font-size: 22px; }
}
/* Stil (reduced motion of rustige stand; pages.js/werk.js zetten .wvd-still op <html>) */
.wvd-still .wvd-pagehead__img { opacity: 1; transform: none; }
.wvd-still .wvd-reveal, .wvd-still .wvd-herkenbaar { height: auto; }
.wvd-still .wvd-reveal__stick, .wvd-still .wvd-herkenbaar__stick { position: static; height: auto; padding-block: 6rem; }
.wvd-still .wvd-reveal__text .wvd-w, .wvd-still .wvd-route__step { opacity: 1; transform: none; }
.wvd-still .wvd-statement__line { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================
   Kennis: overzicht ([wvd_kennis] op de pagina "kennis")
   div.wvd-kennis
     div.wvd-kennis__filter  (chips per categorie)
     a.wvd-kcard--big        (nieuwste artikel)
     div.wvd-kennis__grid    (a.wvd-kcard ×n)
   ========================================================= */

.brxe-section.wvd-kennissec { display: block; width: 100%; padding: max(4rem, 6vw) var(--wvd-gutter) max(6rem, 8vw); background: var(--wvd-white); }
.wvd-kennis__filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: max(2rem, 3vw); }
.wvd-kennis__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26vw), 1fr)); /* twee artikelen vullen de hele breedte */
	gap: max(2.5rem, 3vw) max(1.25rem, 2vw);
	margin-top: max(3rem, 4vw);
}
.wvd-kcard { display: flex; flex-direction: column; gap: .6rem; color: var(--wvd-black); text-decoration: none; }
.wvd-kcard[hidden] { display: none; }
.wvd-kcard__img { display: block; aspect-ratio: 4 / 3; max-height: 72svh; border-radius: 4px; overflow: hidden; background: rgb(26 24 24 / .06); }
.wvd-kcard__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--wvd-dur) var(--wvd-ease); }
.wvd-kcard:hover .wvd-kcard__img img { transform: scale(1.05); }
.wvd-kcard__meta { margin-top: .4rem; color: rgb(26 24 24 / .55); font-size: max(14px, .85vw); font-weight: 600; }
.wvd-kcard__title {
	font-size: max(22px, 1.7vw);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-transform: lowercase;
	transition: color var(--wvd-dur-fast) var(--wvd-ease);
}
.wvd-kcard:hover .wvd-kcard__title { color: var(--wvd-orange); }
.wvd-kcard__text { max-width: 30em; font-size: max(18px, 1.15vw); line-height: var(--wvd-lh-body); }
.wvd-kcard--big { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto 1fr; column-gap: max(1.5rem, 3vw); row-gap: max(.8rem, 1.2vw); align-items: start; }
.wvd-kcard--big .wvd-kcard__img { grid-row: 1 / 4; aspect-ratio: 16 / 10; }
.wvd-kcard--big .wvd-kcard__meta { margin-top: 0; }
.wvd-kcard--big .wvd-kcard__title { font-size: var(--wvd-fs-h2); line-height: var(--wvd-lh-head); letter-spacing: var(--wvd-tracking-head); padding-bottom: .08em; }
@media (max-width: 800px) {
	.wvd-kennis__grid { grid-template-columns: 1fr; }
	.wvd-kcard--big { display: flex; }
}

/* =========================================================
   Kennis: artikel (single.php)
   main.wvd-artikel
     header.wvd-artikel__head  (kruimelpad, titel, intro, auteur/datum/leestijd)
     figure.wvd-artikel__img
     div.wvd-artikel__body
       article.wvd-artikel__text  (tekst + auteur)
       aside.wvd-artikel__aside   (sticky: inhoud + contactblok uit Bricks)
     section.wvd-artikel__meer    (lees ook)
   ========================================================= */

.wvd-artikel { background: var(--wvd-white); color: var(--wvd-black); }
.wvd-artikel__head { max-width: 62rem; padding: max(9rem, 11vw) var(--wvd-gutter) max(2.5rem, 3.5vw); }
.wvd-artikel__crumbs { margin-bottom: 1.6rem; color: rgb(26 24 24 / .55); font-size: max(14px, .85vw); font-weight: 600; }
.wvd-artikel__crumbs a { color: inherit; }
.wvd-artikel__title {
	margin: 0;
	padding-bottom: .06em;
	font-size: var(--wvd-fs-h1);
	font-weight: 800;
	line-height: var(--wvd-lh-head);
	letter-spacing: var(--wvd-tracking-head);
	text-transform: lowercase;
	text-wrap: balance;
}
.wvd-artikel__intro { max-width: 34em; margin: 1.8rem 0 0; font-size: max(20px, 1.5vw); font-weight: 600; line-height: 1.4; }
.wvd-artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; margin: 2rem 0 0; font-size: max(14px, .85vw); font-weight: 600; }
.wvd-artikel__meta > span { color: rgb(26 24 24 / .55); }
.wvd-artikel__by { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.wvd-artikel__by img { width: 36px; height: 36px; border-radius: 50%; }
.wvd-artikel__img { margin: 0 var(--wvd-gutter); aspect-ratio: 21 / 9; border-radius: 4px; overflow: hidden; }
.wvd-artikel__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

.wvd-artikel__body {
	display: grid;
	grid-template-columns: minmax(0, 680px) minmax(260px, 320px);
	max-width: calc(1240px + 2 * var(--wvd-gutter));
	justify-content: space-between;
	gap: max(40px, 6vw);
	padding: max(3rem, 5vw) var(--wvd-gutter) max(4rem, 6vw);
}
.wvd-artikel__text { font-size: max(18px, 1.15vw); line-height: 1.7; }
.wvd-artikel__text > :first-child { margin-top: 0; }
.wvd-artikel__text p, .wvd-artikel__text ul, .wvd-artikel__text ol { margin: 0 0 1.2em; }
.wvd-artikel__text h2, .wvd-artikel__text h3 { scroll-margin-top: 7rem; text-transform: lowercase; letter-spacing: -.03em; line-height: 1.05; }
.wvd-artikel__text h2 { margin: 2.2em 0 .6em; font-size: max(26px, 2vw); font-weight: 800; }
.wvd-artikel__text h3 { margin: 1.8em 0 .5em; font-size: max(19px, 1.3vw); font-weight: 800; }
.wvd-artikel__text a { color: inherit; text-decoration-color: var(--wvd-orange); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.wvd-artikel__text blockquote { margin: 2em 0; padding: 0 0 0 1.2em; border-left: 4px solid var(--wvd-orange); font-family: inherit; font-style: normal; font-size: 1.35em; font-weight: 700; line-height: 1.3; }
.wvd-artikel__text blockquote p { margin: 0; font: inherit; }
.wvd-artikel__text img { border-radius: 4px; }

.wvd-artikel__aside { position: sticky; top: 7rem; align-self: start; display: flex; flex-direction: column; gap: 2rem; }
.wvd-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.wvd-toc li { margin: 0; }
.wvd-toc li.is-h3 { padding-left: 1rem; font-size: .92em; }
.wvd-toc a { display: block; padding: .3em 0; color: rgb(26 24 24 / .6); font-size: max(14px, .85vw); font-weight: 600; text-decoration: none; transition: color var(--wvd-dur-fast) var(--wvd-ease); }
.wvd-toc a:hover, .wvd-toc a.is-on { color: var(--wvd-black); }
.wvd-toc a.is-on::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: .5em; background: var(--wvd-orange); vertical-align: .1em; }
.wvd-toc__label, .wvd-toc summary { margin: 0 0 .6rem; font-size: 12px; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; }
.wvd-toc--inline { display: none; }

.wvd-kcontact { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; width: 100%; padding: 26px; border-radius: 4px; background: var(--wvd-black); color: var(--wvd-white); }
.wvd-kcontact > * { margin: 0; }
.wvd-kcontact__title { color: var(--wvd-blue); font-size: max(26px, 1.8vw); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.wvd-kcontact__text { font-size: max(14px, .85vw); line-height: 1.5; }

.wvd-auteur { display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgb(26 24 24 / .15); scroll-margin-top: 7rem; }
.wvd-auteur img { flex: none; width: 72px; height: 72px; border-radius: 50%; }
.wvd-auteur p { margin: 0; }
.wvd-auteur__label { color: rgb(26 24 24 / .55); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.wvd-auteur__name { margin-top: .3rem !important; font-size: 20px; font-weight: 800; }
.wvd-auteur__name span { color: rgb(26 24 24 / .55); font-size: .8em; font-weight: 600; }
.wvd-auteur__bio { margin-top: .5rem !important; font-size: max(14px, .85vw); line-height: 1.5; }

.wvd-artikel__meer { padding: max(3rem, 5vw) var(--wvd-gutter) max(5rem, 7vw); border-top: 1px solid rgb(26 24 24 / .15); }
.wvd-artikel__meertitle { margin: 0; font-size: var(--wvd-fs-h2); font-weight: 800; line-height: var(--wvd-lh-head); letter-spacing: var(--wvd-tracking-head); }
.wvd-artikel__meer .wvd-kennis__grid { margin-top: max(2rem, 3vw); }

/* 4K: de artikelkolommen groeien mee met de tekst (die op vw draait) */
@media (min-width: 2200px) {
	.wvd-artikel__head { max-width: 62vw; }
	.wvd-artikel__body { grid-template-columns: minmax(0, 38vw) minmax(0, 18vw); max-width: none; }
	.wvd-toc__label, .wvd-auteur__label { font-size: .6vw; }
	.wvd-kcontact { padding: 1.2vw; }
	.wvd-auteur img { width: 3.3vw; height: 3.3vw; }
	.wvd-auteur__name { font-size: .95vw; }
	.wvd-artikel__by img { width: 1.6vw; height: 1.6vw; }
}

@media (max-width: 900px) {
	.wvd-artikel__body { grid-template-columns: 1fr; }
	.wvd-artikel__aside { position: static; }
	.wvd-artikel__aside .wvd-toc { display: none; }
	.wvd-toc--inline { display: block; margin-bottom: 2rem; padding: 1rem 1.2rem; border-radius: 4px; background: rgb(26 24 24 / .05); }
	.wvd-toc--inline summary { margin: 0; cursor: pointer; }
	.wvd-toc--inline ol { margin-top: .6rem; }
	.wvd-artikel__img { aspect-ratio: 4 / 3; }
}

/* Klantverhaal: bouwblokken voor het eigen verhaal van een klant (Bricks-sjabloon per klant) */
/* Logo: oud klein ernaast, nieuw tekent zichzelf in */
.wvd-logoblok { display: block; padding: max(7rem, 10vw) var(--wvd-gutter); background: var(--wvd-white); color: var(--wvd-black); }
.wvd-logoblok__oud { display: flex; align-items: center; gap: 1rem; margin-bottom: max(3rem, 5vw); }
.wvd-logoblok__oud img { width: max(64px, 5.5vw); height: auto; }
.wvd-logoblok__oud p { margin: 0; font-size: max(14px, .9vw); font-weight: 600; opacity: .55; }
.wvd-logoblok__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(2rem, 5vw); align-items: end; margin-top: max(4rem, 7vw); }
.wvd-logoblok__title { margin: 0; font-size: max(44px, 6vw); font-weight: 700; letter-spacing: var(--wvd-tracking-head); line-height: .9; }
.wvd-logoblok__text { max-width: 30em; margin: 0; font-size: max(17px, 1.25vw); line-height: 1.55; }
.wvd-logoteken svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Uitzondering op transform/opacity: de lijn intekenen (één klein SVG-pad) */
.wvd-logoteken [data-merk] { fill-opacity: 0; stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wvd-logoteken [data-l] { opacity: 0; transform: translateY(60px); }
.wvd-logoteken.is-on [data-merk] { animation: wvd-teken 1.6s var(--wvd-ease-io) forwards, wvd-vul .6s ease 1.4s forwards; }
.wvd-logoteken.is-on [data-l] { opacity: 1; transform: none; transition: opacity .8s var(--wvd-ease), transform .8s var(--wvd-ease); transition-delay: calc(1.6s + var(--i) * 45ms); }
@keyframes wvd-teken { to { stroke-dashoffset: 0; } }
@keyframes wvd-vul { to { fill-opacity: 1; stroke-opacity: 0; } }
html.wvd-still .wvd-logoteken [data-merk] { animation: none; fill-opacity: 1; stroke-opacity: 0; }
html.wvd-still .wvd-logoteken [data-l] { opacity: 1; transform: none; transition: none; }
/* Blokjes-logo: elk blokje valt op zijn plek, de letters volgen daarna */
.wvd-logoteken [data-b] { opacity: 0; transform: translateY(-40px) scale(.4); transform-box: fill-box; transform-origin: center; }
.wvd-logoteken.is-on [data-b] { opacity: 1; transform: none; transition: opacity .5s var(--wvd-ease), transform .9s var(--wvd-ease); transition-delay: calc(var(--i) * 30ms); }
.wvd-logoteken:has([data-b]).is-on [data-l] { transition-delay: calc(var(--nb, 0) * 30ms + .5s + var(--i) * 35ms); }
html.wvd-still .wvd-logoteken [data-b] { opacity: 1; transform: none; transition: none; }

/* Groot beeld over de volle breedte, met onderschrift */
.wvd-beeld { margin: 0; background: var(--wvd-white); }
.wvd-beeld__img { display: block; width: 100%; height: auto; max-height: 92svh; object-fit: cover; }
.wvd-beeld__text { margin: 0; text-align: left; padding: 1rem var(--wvd-gutter) max(3rem, 5vw); font-size: max(14px, .95vw); font-weight: 600; }
/* Kleinere foto (niet scherp genoeg voor de volle breedte): max. 1080px breed, onderschrift ernaast */
.wvd-beeld.is-smal { display: grid; grid-template-columns: minmax(0, 1080px) minmax(0, 1fr); gap: max(1.5rem, 3vw); align-items: end; padding: 0 var(--wvd-gutter) max(5rem, 8vw); }
.wvd-beeld.is-smal .wvd-beeld__text { padding: 0; max-width: 18em; text-align: left; }
@media (max-width: 800px) { .wvd-beeld.is-smal { grid-template-columns: 1fr; } }

/* Mockup: website in een browser, met de mobiele versie in een telefoon ervoor */
.wvd-mock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: max(2rem, 5vw); align-items: center; padding: max(7rem, 10vw) var(--wvd-gutter); background: var(--wvd-blue); color: var(--wvd-black); }
.wvd-mock.is-black { background: var(--wvd-black); color: var(--wvd-white); }
.wvd-mock__title { margin: 0 0 1.4rem; font-size: max(30px, 3.6vw); font-weight: 700; letter-spacing: var(--wvd-tracking-head); line-height: .9; }
.wvd-mock__text { max-width: 26em; margin: 0 0 1.6rem; font-size: max(17px, 1.2vw); line-height: 1.55; }
.wvd-mock__stage { position: relative; padding: 0 9% 12% 0; }
.wvd-mock__browser { overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgb(0 0 0 / .25); }
.wvd-mock__phone { position: absolute; right: 0; bottom: 0; width: 24%; overflow: hidden; border: max(5px, .5vw) solid #111; border-radius: max(18px, 2vw); background: #111; box-shadow: 0 30px 60px rgb(0 0 0 / .35); }
.wvd-mock__browser img, .wvd-mock__phone img { display: block; width: 100%; height: auto; }
.wvd-mock__browser, .wvd-mock__phone { transform: translateY(60px); opacity: 0; transition: transform 1.2s var(--wvd-ease), opacity 1.2s var(--wvd-ease); }
.wvd-mock__phone { transform: translateY(120px); transition-delay: .2s; }
.wvd-mock.is-on .wvd-mock__browser, .wvd-mock.is-on .wvd-mock__phone { transform: none; opacity: 1; }
html.wvd-still .wvd-mock__browser, html.wvd-still .wvd-mock__phone { transform: none; opacity: 1; transition: none; }

/* Video in een laptop die schuin in beeld staat en rechttrekt als hij binnenkomt */
.wvd-scherm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr; column-gap: max(2rem, 5vw); align-items: start; padding: max(7rem, 10vw) var(--wvd-gutter); background: var(--wvd-black); color: var(--wvd-white); perspective: 1800px; }
.wvd-scherm__title { margin: 0 0 1rem; font-size: max(44px, 6vw); font-weight: 700; letter-spacing: var(--wvd-tracking-head); line-height: .9; }
.wvd-scherm__text { grid-column: 1; max-width: 26em; margin: 0; font-size: max(17px, 1.25vw); line-height: 1.55; opacity: .8; }
.wvd-scherm__frame { grid-column: 2; grid-row: 1 / 3; position: relative; padding: max(7px, .7vw); border-radius: max(10px, .9vw) max(10px, .9vw) 0 0; background: #0d0d0d; box-shadow: inset 0 0 0 1px #3a3838; transform: rotateY(-18deg) rotateX(8deg) translateY(40px); transform-origin: 50% 100%; transition: transform 1.4s var(--wvd-ease); }
.wvd-scherm__frame::after { content: ""; position: absolute; left: -7%; right: -7%; top: 100%; height: max(10px, 1.1vw); border-radius: 0 0 max(12px, 1.2vw) max(12px, 1.2vw); background: linear-gradient(#cfd0d2, #8d8f93); box-shadow: 0 30px 60px rgb(0 0 0 / .6); }
.wvd-scherm.is-on .wvd-scherm__frame { transform: rotateY(-8deg) rotateX(4deg); }
.wvd-scherm__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
html.wvd-still .wvd-scherm__frame { transform: rotateY(-8deg) rotateX(4deg); transition: none; }

@media (max-width: 800px) {
	.wvd-logoblok__copy, .wvd-mock, .wvd-scherm { grid-template-columns: 1fr; }
	.wvd-scherm__frame { grid-column: 1; grid-row: auto; margin: 3rem 7% 0; }
	.wvd-mock__phone { width: 30%; }
}

/* Logo groot op een vlak (logo als beeld, zonder intekenen) */
.wvd-logovlak { display: grid; place-items: center; padding: max(7rem, 10vw) var(--wvd-gutter); background: var(--wvd-white); }
.wvd-logovlak.is-black { background: var(--wvd-black); }
.wvd-logovlak__img { width: min(100%, 720px); height: auto; }
.wvd-logovlak__text { margin: max(2rem, 3vw) 0 0; max-width: 30em; font-size: max(14px, .95vw); font-weight: 600; text-align: center; opacity: .6; }
.wvd-logovlak.is-black .wvd-logovlak__text { color: var(--wvd-white); }

/* Korte animatie als stille lus */
.wvd-lus { display: block; width: 100%; height: auto; }
.wvd-beeld .wvd-lus { max-height: 92svh; object-fit: cover; }

/* Films: YouTube-plaatjes naast elkaar, speler laadt pas na een klik */
.wvd-films { display: block; padding: max(7rem, 10vw) var(--wvd-gutter); background: var(--wvd-black); color: var(--wvd-white); }
.wvd-films__title { margin: 0 0 1rem; font-size: max(44px, 6vw); font-weight: 700; letter-spacing: var(--wvd-tracking-head); line-height: .9; }
.wvd-films__text { max-width: 30em; margin: 0 0 max(3rem, 4vw); font-size: max(17px, 1.25vw); line-height: 1.55; opacity: .8; }
.wvd-films__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(1rem, 1.5vw); }
.wvd-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; background: #000; color: var(--wvd-white); cursor: pointer; text-align: left; }
.wvd-yt img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--wvd-dur) var(--wvd-ease), opacity var(--wvd-dur) var(--wvd-ease); }
.wvd-yt:hover img { transform: scale(1.04); opacity: .8; }
.wvd-yt::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(54px, 4.4vw); aspect-ratio: 1; border-radius: 50%; background: var(--wvd-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%231A1818'/%3E%3C/svg%3E") center / 45% no-repeat; transform: translate(-50%, -50%); }
.wvd-yt__titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem .9rem; background: linear-gradient(transparent, rgb(0 0 0 / .75)); font-size: max(15px, 1vw); font-weight: 700; }
.wvd-yt iframe { width: 100%; height: 100%; border: 0; }
.wvd-yt:has(iframe)::after { display: none; }
.wvd-films.is-groot .wvd-films__grid { grid-template-columns: minmax(0, 1fr); max-width: 1280px; }
.wvd-films.is-twee .wvd-films__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .wvd-films__grid, .wvd-films.is-twee .wvd-films__grid { grid-template-columns: 1fr; } }

/* Beeldwand met logo's: heel laten, op wit */
.wvd-wall.is-logos .wvd-wall__img { height: auto; aspect-ratio: auto; padding: max(1.5rem, 2.5vw); object-fit: contain; background: var(--wvd-white); }

/* Logowissel: beeldmerk tekent zich in, wisselt van kleur (lagen die invloeien), daarna de logo's naast elkaar */
.wvd-logowissel { display: grid; place-items: center; min-height: max(360px, 34vw); }
.wvd-logowissel > * { grid-area: 1 / 1; }
.wvd-logowissel__merk { width: min(56vw, 380px); overflow: visible; transition: opacity .6s var(--wvd-ease), transform .9s var(--wvd-ease); transition-delay: calc(1.4s + var(--n) * .75s + .3s); }
/* Uitzondering op transform/opacity: de lijn intekenen (één SVG-vorm) */
.wvd-logowissel__lijn path { fill: none; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wvd-logowissel__vul { opacity: 0; transition: opacity .6s var(--wvd-ease); transition-delay: calc(1.4s + var(--k) * .75s); }
.wvd-logowissel__rij { display: grid; gap: max(2rem, 3.5vw); width: min(100%, 760px); justify-items: center; }
.wvd-logowissel__rij img { width: 100%; height: auto; opacity: 0; transform: translateY(40px); transition: opacity .8s var(--wvd-ease), transform .9s var(--wvd-ease); transition-delay: calc(1.4s + var(--n) * .75s + .7s + var(--i) * .15s); }
.wvd-logowissel.is-on .wvd-logowissel__lijn path { animation: wvd-teken 1.4s var(--wvd-ease-io) forwards; }
.wvd-logowissel.is-on .wvd-logowissel__vul { opacity: 1; }
.wvd-logowissel__lijn { transition: opacity .4s var(--wvd-ease) 1.8s; }
.wvd-logowissel.is-on .wvd-logowissel__lijn { opacity: 0; }
.wvd-logowissel.is-on .wvd-logowissel__merk { opacity: 0; transform: scale(.7); }
.wvd-logowissel.is-on .wvd-logowissel__rij img { opacity: 1; transform: none; }
html.wvd-still .wvd-logowissel__merk { display: none; }
html.wvd-still .wvd-logowissel__rij img { opacity: 1; transform: none; transition: none; }


/* Film centraal: groot in beeld, begint meteen zonder geluid */
.wvd-film { display: block; padding: max(6rem, 8vw) var(--wvd-gutter); background: var(--wvd-black); color: var(--wvd-white); text-align: center; }
.wvd-film__title { margin: 0 0 1rem; font-size: max(44px, 6vw); font-weight: 700; letter-spacing: var(--wvd-tracking-head); line-height: .9; }
.wvd-film__text { max-width: 30em; margin: 0 auto max(2.5rem, 3.5vw); font-size: max(17px, 1.25vw); line-height: 1.55; opacity: .8; }
.wvd-film__video { display: block; width: min(100%, 1280px); margin: 0 auto; aspect-ratio: 16 / 9; background: #000; }
/* Fotocredit onder een beeld of beeldwand */
.wvd-credit { margin: 0; padding: 1rem var(--wvd-gutter) 0; font-size: max(13px, .85vw); opacity: .6; }
.wvd-credit a { color: inherit; }
.wvd-wall .wvd-credit { padding: max(2rem, 3vw) 0 0; }

/* ============ 404 (Bricks-sjabloon "Fout 404", _tools/bricks/fout.php) ============
   section.wvd-fout > p.__kicker, h1.__title, p.__text, div.__knoppen > a.wvd-btn ×2 */
.brxe-section.wvd-fout {
	display: block;
	min-height: 100svh;
	padding: max(11rem, 14vw) var(--wvd-gutter) max(6rem, 8vw);
	background: var(--wvd-blue);
	color: var(--wvd-black);
}
.wvd-fout__kicker { margin: 0 0 1.2em; font-size: max(13px, .85vw); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.wvd-fout__title { margin: 0 0 0 -.055em; font-size: min(13vw, 17vh); font-weight: 700; letter-spacing: var(--wvd-tracking-head); line-height: .9; text-transform: lowercase; }
.wvd-fout__text { max-width: 28em; margin: max(20px, 1.6vw) 0 0; font-size: max(17px, 1.25vw); }
.wvd-fout__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: max(28px, 2.4vw); }
.wvd-btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--wvd-black); }

/* ============ Team (Wie we zijn, b_team) ============
   section.wvd-team > h2.__title, div.__grid > div.__lid ×n (img.__foto, p.__naam, p.__rol) */
.brxe-section.wvd-team { display: block; padding: max(7rem, 10vw) var(--wvd-gutter); background: var(--wvd-white); color: var(--wvd-black); }
.wvd-team__title { margin: 0 0 max(3rem, 4vw); font-size: max(44px, 6vw); font-weight: 700; letter-spacing: var(--wvd-tracking-head); line-height: .9; }
.wvd-team__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: max(1rem, 1.6vw); }
.wvd-team__lid { margin: 0; }
img.wvd-team__foto { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: #eee; }
.wvd-team__naam { margin: .9rem 0 .2rem; font-size: max(18px, 1.3vw); font-weight: 700; letter-spacing: -.03em; }
.wvd-team__rol { margin: 0; color: rgb(26 24 24 / .65); font-size: max(14px, .95vw); line-height: 1.45; }
@media (max-width: 800px) { .wvd-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ 3D-model ([wvd_model], model.js) ============
   div.wvd-model[data-src] > img.__poster (tot het model er is) + canvas */
.wvd-model { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 86svh; margin-inline: auto; cursor: grab; touch-action: pan-y; }
.wvd-model:active { cursor: grabbing; }
.wvd-model canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s var(--wvd-ease); }
.wvd-model.is-ready canvas { opacity: 1; }
.wvd-model__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s var(--wvd-ease); }
.wvd-model.is-ready .wvd-model__poster { opacity: 0; }

/* Klantverhaal: citaat en diensten */
.brxe-section.wvd-citaat { display: block; }
:is(.wvd-reveal, .wvd-mock, .wvd-wall) + .wvd-beeld.is-smal { padding-top: max(5rem, 8vw); }
.wvd-citaat { padding: max(7rem, 11vw) var(--wvd-gutter); background: var(--wvd-white); color: var(--wvd-black); }
.wvd-citaat.is-blue { background: var(--wvd-blue); }
.wvd-citaat.is-orange { background: var(--wvd-orange); }
.wvd-citaat.is-dark { background: var(--wvd-black); color: var(--wvd-white); }
.wvd-citaat__tekst { margin: 0; padding: 0; border: 0; quotes: none; max-width: 17em; font-family: inherit; font-style: normal; color: inherit; text-align: left; font-size: clamp(2.25rem, 6vw, 7rem); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.wvd-citaat__wie { margin: max(2rem, 3vw) 0 0; text-align: left; font-size: max(14px, .95vw); font-weight: 600; }
.wvd-diensten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(2rem, 5vw); align-items: start; width: 100%; padding: max(5rem, 8vw) var(--wvd-gutter); background: var(--wvd-white); color: var(--wvd-black); }
.wvd-diensten__title { margin: 0; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1; letter-spacing: -.03em; }
.wvd-diensten__item { margin: 0; padding: .7em 0; border-top: 1px solid currentColor; font-size: max(16px, 1.25vw); font-weight: 600; }
@media (max-width: 800px) { .wvd-diensten { grid-template-columns: 1fr; } }

.wvd-logoblok__nieuw { display: block; width: min(100%, 900px); height: auto; margin-inline: auto; }

/* Klantverhaal: toen en nu, drukwerk */
.brxe-section:is(.wvd-voorna, .wvd-druk) { display: block; }
.wvd-voorna, .wvd-druk { padding: max(5rem, 8vw) var(--wvd-gutter); background: var(--wvd-white); color: var(--wvd-black); }
.wvd-voorna__title, .wvd-druk__title { margin: 0 0 max(1rem, 1.5vw); text-align: left; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1; letter-spacing: -.03em; }
.wvd-druk__title { margin-bottom: max(2.5rem, 4vw); }
.wvd-voorna__text { margin: 0 0 max(2.5rem, 4vw); max-width: 34em; text-align: left; font-size: max(16px, 1.25vw); line-height: 1.4; }
.wvd-voorna__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(1rem, 1.5vw); }
.wvd-voorna__vak { margin: 0; }
.wvd-voorna__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.wvd-voorna.is-logos .wvd-voorna__img { padding: 16% 20%; object-fit: contain; background: #f0f0f0; }
.wvd-voorna__label { margin: .7rem 0 0; text-align: left; font-size: max(14px, .95vw); font-weight: 600; }
.wvd-druk__grid { display: flex; gap: max(1rem, 1.5vw); align-items: flex-start; }
.wvd-druk__img { display: block; flex: 1 1 0; min-width: 0; width: 100%; height: auto; }
.wvd-voorna.is-site .wvd-voorna__img { aspect-ratio: 16 / 9; border-top: max(14px, 1.3vw) solid #e6e4df; border-radius: 10px; box-shadow: 0 1.5vw 4vw rgba(20, 20, 20, .16); object-position: top; }
@media (max-width: 800px) {
	.wvd-voorna__grid { grid-template-columns: 1fr; }
	.wvd-druk__grid { display: grid; }
}

/* Projecten: alle andere klanten als lijst */
.wvd-klantlijst { margin-top: max(5rem, 8vw); }
.wvd-klantlijst__title { margin: 0 0 max(2rem, 3vw); text-align: left; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1; letter-spacing: -.03em; }
.wvd-klantlijst__rijen { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: max(2rem, 4vw); }
.wvd-klantlijst__rij { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75em 0; border-top: 1px solid rgb(26 24 24 / .18); break-inside: avoid; }
.wvd-klantlijst__naam { font-size: max(16px, 1.15vw); font-weight: 600; }
.wvd-klantlijst__soort { color: rgb(26 24 24 / .6); font-size: max(13px, .85vw); text-align: right; }
@media (max-width: 800px) { .wvd-klantlijst__rijen { columns: 1; } }

/* De muis als woordje "scroll" op plekken waar de pagina stilstaat en de animatie op het scrollen loopt (menu.js) */
.wvd-scrollwoord { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.wvd-scrollwoord span { display: block; padding: .45em .95em; border-radius: 99px; background: var(--wvd-orange); color: var(--wvd-black); font-size: max(14px, .9vw); font-weight: 600; line-height: 1.2; opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity var(--wvd-dur-fast) var(--wvd-ease), transform var(--wvd-dur-fast) var(--wvd-ease); }
.wvd-scrollmuis .wvd-scrollwoord span { opacity: 1; transform: translate(-50%, -50%); }
.wvd-scrollmuis, .wvd-scrollmuis body * { cursor: none; }
.wvd-scrollmuis :is(a, button, .wvd-header, .wvd-header *) { cursor: pointer; }

/* Menubeelden laden pas na warm() in menu.js: zonder lay-out haalt de browser een lazy beeld niet op */
html:not(.wvd-menu-warm) .wvd-menu__img { display: none; }