/**
 * 24eight - stijl.
 *
 * Gebouwd naar Figma "24Eight" (frame MacBook Pro 14", 1512 x 982). Op
 * desktop schaalt alles mee met --s (1 designpixel), zodat het scherm er op
 * elke maat uitziet als het ontwerp. Onder 860px (of staand) stapelt het:
 * kop, paneel, tekst.
 *
 * Lagen: raster (tekst, logo) < .paneel (zwarte laag voor intro, menu en
 * paginawissel) < canvas met de kubus < witte pil < menu < menupil. De
 * menupil staat op mix-blend-mode: difference, zodat hij zwart is op wit en
 * wit op het zwarte paneel.
 */

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

:root {
	--zwart: #000;
	--wit: #fff;
	--goud: #e9b04f;
	--goud-licht: #ffd98a;
	--osmo: cubic-bezier(0.625, 0.05, 0, 1);

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

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

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

html {
	background: var(--wit);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--wit);
	color: var(--zwart);
	font-family: 'Michroma', 'Eurostile', 'Arial', sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--goud); color: var(--zwart); }

.skip {
	position: fixed;
	left: 12px;
	top: 12px;
	z-index: 20;
	padding: 10px 16px;
	background: var(--zwart);
	color: var(--wit);
	font-size: 13px;
	text-decoration: none;
	border-radius: 999px;
	transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

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

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

.kop {
	grid-area: kop;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	min-height: calc(82 * var(--s));
	padding: calc(32 * var(--s)) calc(54 * var(--s)) 0 calc(40 * var(--s));
}
.kop__logo {
	position: relative;
	z-index: 9;
	display: block;
	width: calc(94.7 * var(--s));
	aspect-ratio: 1.8;
	border-radius: 4px;
}
.kop__logo-beeld,
.kop__logo-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.kop__logo-beeld { object-fit: contain; }
.has-logo .kop__logo-beeld { visibility: hidden; }

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

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

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

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

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

/* ---------- Knoppen: Osmo button-040, gap-versie ---------- */

/* Een tekst-pil met een pijl-cirkel. In rust staat de cirkel rechts; bij
   hover groeit links een cirkel in, schuift de tekst mee naar rechts en
   krimpt de rechter weg, terwijl de pijl van 45° naar recht draait. Op wit:
   de pil met zwarte rand uit het ontwerp, op het zwarte paneel een witte
   pil (--donker). De cirkel is goud. */
:root {
	--button-040-color: var(--zwart);
	--button-040-color-background: transparent;
	--button-040-color-border: var(--zwart);
	--button-040-color-arrow: var(--zwart);
	--button-040-arrow-background: linear-gradient(135deg, var(--goud-licht) 0%, var(--goud) 60%, #c98f30 100%);
	--button-040-color-focus: var(--goud);
	--button-040-height: calc(50 * var(--s));
	--button-040-padding-x: calc(29 * var(--s));
	--button-040-border-radius: 999px;
	--button-040-gap: calc(6 * var(--s));
	--button-040-focus-inset: -0.25em;
	--button-040-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
	--button-040-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}
.button-040 {
	--button-040-translate-x: calc((var(--button-040-height) + var(--button-040-gap, 0em)) * -1);
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--button-040-gap);
	height: var(--button-040-height);
	padding: 0;
	outline-style: none;
	background-color: transparent;
	color: var(--button-040-color);
	font-size: calc(14 * var(--s));
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.button-040::after {
	content: '';
	position: absolute;
	inset: var(--button-040-focus-inset);
	z-index: 1;
	display: block;
	border-radius: var(--button-040-border-radius);
	transition: box-shadow 0.3s var(--button-040-ease-focus);
	pointer-events: none;
}
.button-040:focus-visible::after { box-shadow: 0 0 0 0.125em var(--button-040-color-focus); }
.button-040__icon-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	aspect-ratio: 1;
	border-radius: var(--button-040-border-radius);
	background: var(--button-040-arrow-background);
	transform-origin: left center;
	scale: 0;
	transition: scale 0.6s var(--button-040-ease-hover);
	will-change: transform;
}
.button-040__icon-wrap.is--duplicate {
	position: absolute;
	right: 0;
	z-index: 1;
	transform-origin: right center;
	scale: 1;
}
.button-040__icon {
	width: 1.1em;
	height: 1.1em;
	color: var(--button-040-color-arrow);
	rotate: 45deg;
	transition: rotate 0.6s var(--button-040-ease-hover);
}
.button-040__icon-wrap.is--duplicate .button-040__icon { rotate: 0deg; }
.button-040__text-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 0 var(--button-040-padding-x);
	border: 1px solid var(--button-040-color-border);
	border-radius: var(--button-040-border-radius);
	background-color: var(--button-040-color-background);
	translate: var(--button-040-translate-x) 0 0;
	transition: translate 0.6s var(--button-040-ease-hover);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button-040:is(:hover, :focus-visible) .button-040__icon-wrap {
		scale: 1;
		transition: scale 0.735s 0.05s var(--button-040-ease-hover);
	}
	.button-040:is(:hover, :focus-visible) .button-040__icon-wrap.is--duplicate {
		scale: 0;
		transition: scale 0.735s 0.05s var(--button-040-ease-hover);
	}
	.button-040:is(:hover, :focus-visible) .button-040__icon-wrap.is--duplicate .button-040__icon { rotate: 45deg; }
	.button-040:is(:hover, :focus-visible) .button-040__icon {
		rotate: 0deg;
		transition: rotate 0.735s 0.05s var(--button-040-ease-hover);
	}
	.button-040:is(:hover, :focus-visible) .button-040__text-wrap {
		translate: 0 0 0;
		transition: translate 0.735s 0.05s var(--button-040-ease-hover);
	}
}
/* Op het zwarte paneel. */
.button-040--donker {
	--button-040-color-background: var(--wit);
	--button-040-color-border: var(--wit);
}

/* De menupil: vast linksboven, wit met difference, dus zwart op wit en wit
   op zwart (ook boven tekst die eronder door scrolt). */
.kop__menu {
	--pil: var(--wit);
	--pil-op: var(--zwart);
	position: fixed;
	top: calc(var(--rand) + 32 * var(--s));
	left: calc(40 * var(--s));
	z-index: 9;
	min-width: calc(110 * var(--s));
	mix-blend-mode: difference;
}
.kop__burger {
	display: none;
	position: relative;
	width: 18px;
	height: 8px;
}
.kop__burger i {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.5s var(--osmo);
}
.kop__burger i:first-child { top: 0; }
.kop__burger i:last-child { bottom: 0; }
.kop__menu[aria-expanded="true"] .kop__burger i:first-child { transform: translateY(3.25px) rotate(45deg); }
.kop__menu[aria-expanded="true"] .kop__burger i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

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

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

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

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

/* ---------- Menu ---------- */

/* Rustig: het paneel vult het scherm, de kubus schuift ver naar rechts
   (kubus.js), links alleen de pagina's, groot. Bij hover rollen de letters
   naar goud, dimt de rest, draait de kubus een kwartslag en staat er onder
   de kubus wat je op die pagina vindt. Een gouden gloed volgt de muis. */
.menu {
	position: fixed;
	inset: 0;
	z-index: 8;
	display: flex;
	align-items: center;
	padding: 0 calc(40 * var(--s));
	color: var(--wit);
	pointer-events: none;
}
.menu[hidden] { display: none; }
.menu__licht {
	position: absolute;
	inset: 0;
	background: radial-gradient(calc(520 * var(--s)) circle at var(--mx, 78%) var(--my, 50%), rgba(233, 176, 79, 0.13), transparent 70%);
	pointer-events: none;
}
.menu__lijst {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: auto;
}
.menu__item { overflow: hidden; }
.menu__link {
	display: inline-block;
	padding: 0.06em 0;
	color: var(--wit);
	font-size: clamp(30px, calc(60 * var(--s)), 92px);
	line-height: 1.18;
	text-decoration: none;
	transition: opacity 0.45s var(--osmo), color 0.45s var(--osmo);
}
.menu__tekst {
	display: inline-block;
	overflow: hidden;
	line-height: 1.2;
	white-space: nowrap;
}
.menu__tekst .char {
	display: inline-block;
	text-shadow: 0 1.2em 0 var(--goud-licht);
	transition: transform 0.6s var(--osmo);
	transition-delay: calc(var(--i, 0) * 16ms);
}
.menu__link[aria-current="page"] { color: var(--goud); }
@media (hover: hover) and (pointer: fine) {
	.menu__lijst:hover .menu__link { opacity: 0.3; }
	.menu__lijst:hover .menu__link:hover { opacity: 1; }
	.menu__link:hover .char { transform: translateY(-1.2em); }
}
.menu__link:focus-visible { outline: none; }
.menu__link:focus-visible .char { transform: translateY(-1.2em); }
.menu__uitleg {
	position: absolute;
	left: 78%;
	top: calc(50% + 225 * var(--s));
	width: min(360px, 26vw);
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: max(12px, calc(14 * var(--s)));
	line-height: 1.55;
	text-align: center;
	transform: translateX(-50%);
}

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

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

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

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

@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
	:root {
		--rand: 10px;
		--p-l: var(--rand);
		--p-t: 76px;
		--p-b: 40vh;
		--rad: 8px;
	}
	.raster {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(150px, 1fr) auto;
		grid-template-areas:
			"kop"
			"plek"
			"inhoud";
		padding: var(--rand);
	}
	/* Header-rij: menu links, klein logo in het midden, gratis audit rechts. */
	.kop {
		justify-content: center;
		align-items: center;
		min-height: 66px;
		padding: 0 0 12px;
	}
	.kop__logo { width: 64px; }
	.kop__menu {
		top: 16px;
		left: 16px;
	}
	.paneelplek {
		position: relative;
		top: auto;
		align-self: stretch;
		height: auto;
	}
	.pagina { padding: 26px 6px calc(40px - var(--rand)); }
	.tekst {
		max-width: 34em;
		margin-bottom: 22px;
		font-size: clamp(15px, 3.9vw, 22px);
		line-height: 1.45;
	}
	.knoppen { gap: 10px; }
	.pil {
		height: 46px;
		padding: 0 24px;
		font-size: 13px;
	}
	.button-040 { font-size: 13px; }
	:root {
		--button-040-height: 46px;
		--button-040-padding-x: 22px;
		--button-040-gap: 5px;
	}
	.kop__menu { min-width: 0; }
	/* Gratis audit in de header-rij: alleen de witte pil, met difference
	   zoals de menupil (zwart op wit, wit op het zwarte vlak). */
	.paneel-pil {
		top: 16px;
		right: 16px;
		z-index: 9;
		mix-blend-mode: difference;
	}
	.paneel-pil .button-040__icon-wrap { display: none; }
	.paneel-pil .button-040__text-wrap { translate: none; }
	.menu {
		align-items: flex-start;
		padding: 100px 20px 0;
	}
	.menu__lijst { width: 100%; }
	.menu__link { font-size: clamp(28px, 9vw, 56px); }
	.menu__uitleg { display: none; }
	.pagina--lang { padding: 34px 6px 60px; }
	.blok { grid-template-columns: 42px minmax(0, 1fr); padding: 28px 0; }
	.duo { grid-template-columns: 1fr; gap: 14px; }
}

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

@media (prefers-reduced-motion: reduce) {
	.pil,
	.pil::before,
	.pil__rol,
	.menu__link,
	.menu__tekst .char,
	.kop__burger i { transition: none; }
	.js [data-verschijn] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}