/* =========================================================
   Athley v2 - homepage concept
   Tokens uit Figma (Athley-V2, node 3:2). Pixelmaten zijn
   omgezet naar rem/clamp op basis van het 1512px-canvas.
   ========================================================= */

:root {
	/* Kleur */
	--c-black: #000000;
	--c-white: #ffffff;
	--c-cream: #fff8d7;
	--c-accent: #e2634c;
	--c-mute: #eeeeee;
	--c-ice: #c6e4f6;   /* pastelblauw: icebath-floaty */

	/* Live canvaskleur (scroll-colors.js zet deze per frame) */
	--bg: #ffffff;
	--fg: #000000;

	/* Typografie */
	--f-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-ui: "Satoshi", "Outfit", system-ui, -apple-system, sans-serif;

	--fs-body: 1rem;                                          /* 16 */
	--fs-lead: clamp(1.125rem, 0.95rem + 0.55vw, 1.5rem);     /* 24 */
	--fs-title: clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem);      /* 40 */
	--fs-display: clamp(2.25rem, 1.35rem + 3.7vw, 4.375rem);  /* 70 */
	--fs-label: clamp(2.25rem, 0.9rem + 3.6vw, 4.375rem);     /* 70 */

	/* Ruimte */
	--gutter: clamp(1.25rem, 6.8vw, 6.4375rem);               /* 103 */
	--content: 81.625rem;                                     /* 1306 */
	--section-y: clamp(6rem, 10vw, 9.5rem);

	/* Beweging */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-athley: cubic-bezier(0.625, 0.05, 0, 1);
	--ease-spin: cubic-bezier(0.7, -0.35, 0.25, 1.45); /* draait iets terug, schiet door en veert in */

	--topbar-h: 3.125rem;
	--header-top: 0px; /* de melding begint dichtgeklapt */
}

/* ---------- Basis ---------- */

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

html {
	background: var(--c-white);
	color: var(--fg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}
/* Geen grijze tikvlakken op touch, ook niet waar een element hem zelf zet */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* Tekstselectie in de huisstijl; op oranje vlakken zwart */
::selection { background: var(--c-accent); color: var(--c-white); }
.start ::selection { background: var(--c-black); color: var(--c-white); }

/* ---------- Eigen scrollbar (scrollbar.js) ---------- */
/* De native balk verdwijnt alleen als het script draait. */
html.has-scrollbar { scrollbar-width: none; }
html.has-scrollbar::-webkit-scrollbar { display: none; }
html.is-scrollbar-drag { cursor: grabbing; user-select: none; }
.scrollbar {
	position: fixed;
	top: 0.5rem;
	right: 0;
	bottom: 0.5rem;
	z-index: 90;
	width: 0.875rem;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
.scrollbar__thumb {
	position: absolute;
	top: 0;
	right: 0.25rem;
	width: 0.25rem;
	border-radius: 6.25rem;
	background: var(--c-accent);
	will-change: transform;
	transition: width 0.4s var(--ease-athley);
}
.scrollbar.is-active { opacity: 1; }
.scrollbar.is-empty,
html.menu-open .scrollbar,
html.shift-open .scrollbar { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
	.scrollbar { pointer-events: auto; cursor: grab; }
	.scrollbar:hover,
	.scrollbar.is-dragging { opacity: 1; }
	.scrollbar:hover .scrollbar__thumb,
	.scrollbar.is-dragging .scrollbar__thumb { width: 0.4375rem; }
	.scrollbar.is-empty { pointer-events: none; }
}
@media (pointer: coarse) {
	.scrollbar__thumb { right: 0.1875rem; width: 0.1875rem; }
}

body {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 300;
	font-size: var(--fs-body);
	line-height: 1.3;
	color: var(--c-black);
	background: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

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

.skip-link {
	position: fixed; left: 1rem; top: 1rem; z-index: 200;
	padding: 0.75rem 1rem;
	background: var(--c-black); color: var(--c-white);
	font: 900 0.875rem/1 var(--f-ui);
	/* Echt verborgen (ook bij iOS-overscroll), alleen zichtbaar bij toetsenbordfocus */
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}
.skip-link:focus-visible {
	clip-path: none;
	opacity: 1;
	pointer-events: auto;
	top: calc(1rem + env(safe-area-inset-top, 0px));
}

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

main { position: relative; z-index: 1; }

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

/* ---------- Arc Scroll Transition ---------- */
/* De vorm vult met currentColor: de kleur van de aangrenzende sectie. */
/* Reveal-modus bovenaan de binnenkomende sectie: de vorige kleur hangt
   als boog over het begin en tilt weg. De sectie die je verlaat wordt nooit
   bedekt, dus knoppen blijven klikbaar. */
.arc-scroll-transition {
	position: absolute;
	inset: 0 0 auto 0;
	height: min(100%, 80vh);
	z-index: 10;
	pointer-events: none;
}
[data-arc-scroll-transition] svg { display: block; width: 100%; height: 100%; }
[data-arc-scroll-transition] path { fill: currentColor; }

/* ---------- Knop (pinch-vorm uit Figma) ---------- */

.btn {
	--btn-line: var(--c-accent);
	--btn-fill: var(--c-accent);
	--btn-bg: transparent;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	padding: 0 2.625rem;
	font: 900 1rem/1 var(--f-ui);
	letter-spacing: 0;
	color: var(--c-black);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: color 0.35s ease 0.12s;
}
button.btn { border: 0; background: none; -webkit-appearance: none; appearance: none; }
.btn:not(.is-shaped) { border: 1px solid var(--btn-line); }
.btn--light { color: var(--c-white); }
.btn--sm { min-height: 3.625rem; padding: 0 2.6rem; }

.btn__shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	z-index: -1;
	pointer-events: none;
}
.btn__bg { fill: var(--btn-bg); }
.btn__fill { fill: var(--btn-fill); }
.btn__line {
	fill: none;
	stroke: var(--btn-line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
/* Ruimte onder de regel zodat staartjes (g, j, p, y) niet worden afgesneden door de overflow */
.btn__label { position: relative; display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.btn__label-inner { display: block; transition: transform 0.6s var(--ease-athley); }
.btn__label-inner + .btn__label-inner { position: absolute; inset: 0; transform: translateY(110%); }

@media (hover: hover) {
	.btn:hover { color: var(--c-white); }
	.btn:hover .btn__label-inner:first-child { transform: translateY(-110%); }
	.btn:hover .btn__label-inner + .btn__label-inner { transform: translateY(0); }
}

/* ---------- Topbar ---------- */

.topbar {
	position: relative;
	z-index: 30;
	display: grid;
	grid-template-rows: 0fr;
	background: var(--c-black);
	color: var(--c-white);
	transition: grid-template-rows 1s var(--ease-athley);
}
/* Open na de intro (app.js zet html.topbar-open). De rij groeit van 0 naar
   de echte hoogte, hoe vaak de tekst op mobiel ook afbreekt. */
html.topbar-open .topbar { grid-template-rows: 1fr; }
.topbar__inner { min-height: 0; overflow: hidden; }
.topbar__inner > .topbar__link { opacity: 0; transform: translateY(-0.6rem); transition: opacity 0.6s ease 0.35s, transform 0.9s var(--ease-athley) 0.25s; }
html.topbar-open .topbar__inner > .topbar__link { opacity: 1; transform: none; }
.topbar__link {
	display: flex;
	width: 100%;
	min-height: var(--topbar-h);
	padding: 0.5rem var(--gutter);
	justify-content: center;
	align-items: center;
	gap: 0.625rem;
	font: 500 1rem/1.35 var(--f-ui);
	text-decoration: none;
	text-align: center;
}
.topbar__avatar { width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: none; }
.topbar__text { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-athley); }
.topbar__link:hover .topbar__text { background-size: 100% 1px; }

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	/* Wit + difference: logo, knop en burger spiegelen per pixel mee met wat
	   eronder ligt (zwart op wit, wit op zwart, half-half over een boog of foto). */
	color: var(--c-white);
	mix-blend-mode: difference;
	pointer-events: none;
	transition: transform 0.75s var(--ease-athley);
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--header-top) - 1rem)); }
html.menu-open .site-header { transform: none; }

.site-header__inner {
	transform: translate3d(0, var(--header-top), 0);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: clamp(1rem, 2.1vw, 2rem) clamp(1rem, 2.05vw, 1.9375rem) 0 clamp(1rem, 3.3vw, 3.125rem);
}
.site-header__inner > * { pointer-events: auto; }
.site-header__start { justify-self: start; --btn-line: currentColor; --btn-fill: var(--c-white); color: inherit; }
@media (hover: hover) { .site-header__start:hover { color: var(--c-black); } }
.site-header__logo { justify-self: center; color: inherit; display: block; }
.site-header__logo svg { width: 6.44rem; height: 1.5rem; fill: currentColor; }
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }
/* Inloggen: outline-pil naast de burger, zelfde lijn en hoogte */
.site-header__login {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	height: 3.75rem;
	padding: 0 1.6rem 0 1.35rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font: 900 1rem/1 var(--f-ui);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease;
}
.site-header__login svg { width: 1.25rem; height: 1.25rem; flex: none; }
@media (hover: hover) { .site-header__login:hover { background: var(--c-white); color: var(--c-black); } }
.site-header__login:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.burger {
	justify-self: end;
	position: relative;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: transform 0.6s var(--ease-athley);
}
.burger__line {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.25rem;
	height: 1px;
	margin-left: -0.625rem;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.6s var(--ease-athley), opacity 0.3s ease;
}
.burger__line:nth-child(1) { transform: translateY(-0.5rem); }
.burger__line:nth-child(3) { transform: translateY(0.5rem); }
@media (hover: hover) {
	.burger:hover { transform: scale(1.06); }
	.burger:hover .burger__line:nth-child(1) { transform: translateY(-0.5rem) scaleX(0.6); }
	.burger:hover .burger__line:nth-child(3) { transform: translateY(0.5rem) scaleX(0.6); }
}
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: rotate(45deg) scaleX(1.1); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: rotate(-45deg) scaleX(1.1); }

/* ---------- Takeover-menu ---------- */

.menu {
	position: fixed;
	inset: var(--header-top) 0 auto 0; /* onder de zwarte melding, zolang die in beeld is */
	height: calc(100vh - var(--header-top));
	height: calc(100dvh - var(--header-top));
	z-index: 50;
	visibility: hidden;
	color: var(--c-black);
	overflow: hidden;
}
.menu.is-open { visibility: visible; }
.menu::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: var(--header-top);
	height: 100lvh;
	background: var(--c-cream);
	opacity: 0;
	pointer-events: none;
}
.menu.is-covered::before { opacity: 1; }
.menu__arc { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-cream); }

.menu__inner {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
	gap: clamp(2rem, 6vw, 7rem);
	align-items: end;
	max-width: calc(var(--content) + var(--gutter) * 2);
	margin-inline: auto;
	padding: clamp(8rem, 19vh, 11rem) var(--gutter) clamp(2rem, 7vh, 4.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.menu__list { counter-reset: menu; }
.menu__link {
	display: flex;
	align-items: baseline;
	gap: clamp(0.75rem, 1.4vw, 1.5rem);
	padding: 0.12em 0;
	font: 500 clamp(2rem, min(0.85rem + 3vw, 6.6vh), 4.125rem)/1.06 var(--f-display);
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: opacity 0.45s ease;
}
.menu__label {
	position: relative;
	display: inline-block;
	transition: transform 0.7s var(--ease-athley);
}
@media (hover: hover) {
	.menu__list:hover .menu__link { opacity: 0.32; }
	.menu__list .menu__link:hover { opacity: 1; }
}

.menu__aside { display: grid; gap: 2rem; padding-bottom: 0.6rem; }
.menu__card {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 1.25rem;
	align-items: center;
	text-decoration: none;
}
.menu__card-img {
	width: 6.5rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q50 9 100 2 V100 Q50 93 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q50 9 100 2 V100 Q50 93 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.menu__card-body { display: grid; gap: 0.4rem; }
.menu__card-kicker { font: 900 0.8125rem/1 var(--f-ui); color: var(--c-accent); }
.menu__card-title { font: 500 1.25rem/1.25 var(--f-display); }
/* Inlogknop in het menu: alleen mobiel, op desktop staat hij in de header */
.menu__login { display: none; }
.menu__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font: 500 1rem/1.4 var(--f-ui); }
.menu__meta a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-athley); }
.menu__meta a:hover { background-size: 100% 1px; }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
	padding: clamp(8.5rem, 14.75vw, 13.95rem) 0 var(--section-y);
}
.hero__title {
	max-width: 52.3rem;
	margin-inline: auto;
	font: 500 var(--fs-title)/1.25 var(--f-display);
	text-align: center;
}
.hero__mark {
	display: inline-block;
	width: 0.7em;
	height: 0.62em;
	margin-right: 0.12em;
	vertical-align: -0.02em;
	fill: var(--c-accent);
	overflow: visible;
}
.hero__mark .mark-dot { transform-box: fill-box; transform-origin: center; }

.hero__foot { text-align: center; }
.hero__intro {
	max-width: 52.45rem;
	margin: clamp(0.75rem, 1.1vw, 1.0625rem) auto 0;
	font-size: var(--fs-body);
	line-height: 1.3;
}
.hero__foot > div { margin-top: clamp(2rem, 3.3vw, 3.125rem); }

/* Glass carousel: de canvas krijgt de pinch-vorm (Figma Ellipse 1 + 2) */
.glass-carousel {
	position: relative;
	height: clamp(17.5rem, 29.76vw, 28.125rem);
	margin-top: clamp(2.75rem, 5.5vw, 5.1875rem);
	overflow: clip;
}
.glass-carousel__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0.7 Q50 19.2 100 0.7 V100 Q50 77.8 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0.7 Q50 19.2 100 0.7 V100 Q50 77.8 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.glass-carousel__list {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 2.3rem;
	padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.glass-carousel__list::-webkit-scrollbar { display: none; }
.glass-carousel__item { flex: none; height: 100%; scroll-snap-align: center; }
.glass-carousel__img { height: 100%; width: auto; object-fit: cover; }
/* Zodra de canvas het overneemt blijft de lijst alleen voor screenreaders */
[data-glass-carousel="canvas"] [data-glass-carousel-list] {
	width: 1px; height: 1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Subtiele parallax: de foto is hoger dan haar kader en schuift mee */
[data-parallax-img] { position: relative; }
[data-parallax-img] > img {
	position: absolute;
	left: 0;
	top: -11%;
	width: 100%;
	height: 122% !important;
	object-fit: cover;
	will-change: transform;
}

/* Rotating Text (hero) */
.rotating-text__highlight { color: inherit; }
[data-rotating-words] { display: inline-block; position: relative; }
.rotating-text__inner { display: inline-block; }
.rotating-text__word { display: block; white-space: nowrap; position: absolute; top: 0; left: 0; }
.rotating-line { padding-bottom: 0.1em; margin-bottom: -0.1em; white-space: nowrap; }
.rotating-line-mask { overflow-x: visible !important; overflow-y: clip !important; }

/* ---------- Duo: business + the shift ---------- */

.duo { position: relative; overflow: hidden; padding: var(--section-y) 0; color: var(--c-white); }
.duo__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(2rem, 4.96vw, 4.6875rem);
	max-width: calc(79.6875rem + var(--gutter) * 2);
}
.duo__col { position: relative; display: flex; flex-direction: column; }
.duo__col--left { align-items: flex-end; text-align: right; }
.duo__col--right { align-items: flex-start; }

.duo__media { position: relative; overflow: hidden; width: 100%; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }
.duo__col--left > .duo__media { aspect-ratio: 1; }
.duo__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4.33%;
	width: 100%;
	align-items: start;
}
.duo__media--tall { aspect-ratio: 287 / 600; }
.duo__media--offset {
	aspect-ratio: 287 / 674;
	margin-top: 17.4%;
	margin-bottom: -43.2%;
	z-index: 0;
}

.duo__title {
	position: relative;
	z-index: 1;
	margin-top: clamp(1.25rem, 2vw, 1.875rem);
	font: 500 var(--fs-title)/1.25 var(--f-display);
}
.duo__mark { display: inline-block; width: 0.7em; height: 0.62em; margin: 0 0.3em; vertical-align: -0.02em; fill: var(--c-accent); }
.duo__col--left .duo__mark { margin-right: 0; }
.duo__col--right .duo__mark { margin-left: 0; }
.duo__text {
	position: relative;
	z-index: 1;
	max-width: 37.5rem;
	margin-top: 1.25rem;
	font-size: var(--fs-lead);
	line-height: 1.25;
}
.duo__col > div:last-child { position: relative; z-index: 1; margin-top: 1.25rem; }

/* ---------- World of Athley ---------- */

.world { position: relative; overflow: hidden; padding: var(--section-y) 0 clamp(2rem, 4vw, 4rem); }
.world__grid {
	display: grid;
	grid-template-columns: minmax(0, 41.4rem) minmax(0, 33.5rem);
	justify-content: space-between;
	align-items: center;
	gap: 3rem;
}
.world__title {
	font: 500 var(--fs-display)/1.08 var(--f-ui);
	letter-spacing: -0.01em;
}
.world__mark { display: inline-block; width: 0.586em; height: 0.515em; fill: var(--c-accent); vertical-align: -0.02em; margin-left: 0.1em; }
.world__text { margin-top: clamp(1.75rem, 3.3vw, 3.125rem); font-size: var(--fs-lead); line-height: 1.25; }
.world__globe { width: 100%; }

/* Globe gallery (resource), ingepast op de kolom */
.globe-gallery {
	position: relative;
	width: 100%;
	max-width: 33.5rem;
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	-webkit-user-select: none;
	user-select: none;
}
.globe-gallery__collection { position: relative; width: 100%; height: 100%; }
.globe-gallery__list { position: absolute; inset: 0; display: flex; gap: 0.6rem; }
.globe-gallery__item {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 0.4em;
	overflow: hidden;
	backface-visibility: hidden;
}
.globe-gallery:not([data-globe-gallery-status="active"]) .globe-gallery__item { visibility: hidden; }
.globe-gallery__image { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---------- Pijlers ---------- */

 /* Horizontal Scrolling: de sectie zelf is de wrapper (geen flex/overflow op main) */
.pillars {
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: clamp(1.25rem, 3.3vw, 3.125rem);
	min-height: 100dvh;
	padding: clamp(5rem, 9vh, 7rem) var(--gutter);
	overflow: hidden;
}
.pillar {
	flex: none;
	width: min(74.375rem, 78.7vw, calc((100dvh - 15rem) * 1.735));
}
.pillar:last-child { margin-right: var(--gutter); }
.pillar__media { position: relative; aspect-ratio: 1190 / 686; overflow: hidden; }
.pillar__media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pillar__label {
	position: absolute;
	left: 2.4%;
	bottom: 7.3%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	color: var(--c-cream);
}
.pillar__label span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 700 var(--fs-label)/1 var(--f-display);
	letter-spacing: 0;
	white-space: nowrap;
}
.pillar__mark { width: clamp(2rem, 3.3vw, 3.11rem); height: clamp(1.76rem, 2.9vw, 2.735rem); fill: var(--c-accent); overflow: visible; }
.pillar__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	margin-top: clamp(1.25rem, 2vw, 1.875rem);
}
.pillar__text { max-width: 50.25rem; font-size: var(--fs-lead); line-height: 1.25; }
.pillar__foot .btn { flex: none; }

/* ---------- Testimonials ---------- */

.quotes { position: relative; overflow: hidden; padding: calc(var(--section-y) * 0.6) 0 calc(var(--section-y) * 1.6); }
.quotes__grid {
	display: grid;
	grid-template-columns: minmax(0, 34.375rem) minmax(0, 31.5625rem);
	column-gap: clamp(2rem, 3.6vw, 3.4375rem);
	align-items: center;
}
.quotes__frame {
	position: relative;
	display: grid;
	aspect-ratio: 550 / 750;
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 550 750' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q275 69 550 13 V750 Q275 692 0 750Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 550 750' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q275 69 550 13 V750 Q275 692 0 750Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.quotes__img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
.quotes__img.is-active { opacity: 1; }
/* Timer: het Athley-merkje draait als een revolvercilinder. Elke derde van de
   looptijd klikt het 120 graden door en kleurt de stip die bovenaan landt. */
.quotes__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}
.quotes__timer { display: flex; align-items: center; gap: 0.875rem; }
.quotes__mark { width: 2.125rem; height: auto; aspect-ratio: 27.9 / 24.53; overflow: visible; }
.quotes__mark circle {
	fill: rgba(0, 0, 0, 0.14);
	transform-box: fill-box;
	transform-origin: center;
	transition: fill 0.35s ease;
}
.quotes__mark circle.is-loaded { fill: var(--c-accent); animation: quotes-chamber 0.6s var(--ease-athley); }
@keyframes quotes-chamber { 40% { transform: scale(1.18); } }
.quotes__count { font: 500 1rem/1 var(--f-ui); font-variant-numeric: tabular-nums; color: rgba(0, 0, 0, 0.4); }
.quotes__count-now { color: var(--c-black); }
.quotes__arrows { display: flex; gap: 0.5rem; }
.quotes__arrow {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: transparent;
	color: var(--c-black);
	cursor: pointer;
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.quotes__arrow svg { width: 1.125rem; height: 1.125rem; transition: transform 0.6s var(--ease-athley); }
.quotes__arrow--prev svg { transform: scaleX(-1); }
.quotes__arrow:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.quotes__arrow:hover svg { transform: translateX(0.15rem); }
.quotes__arrow--prev:hover svg { transform: scaleX(-1) translateX(0.15rem); }
.quotes__arrow:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.quotes__icon { width: clamp(4.25rem, 6.6vw, 6.25rem); height: auto; aspect-ratio: 100 / 66; fill: var(--c-accent); }
.quotes__slides { display: grid; margin-top: clamp(1.25rem, 2vw, 1.875rem); }
.quote { grid-area: 1 / 1; visibility: hidden; }
.quote.is-active { visibility: visible; }
.quote__text { font: 500 var(--fs-title)/1.25 var(--f-display); }
.quote__who { display: grid; justify-items: start; margin-top: 1.875rem; }
.quote__avatar { width: 3.125rem; height: 3.125rem; border-radius: 50%; object-fit: cover; }
.quote__name { margin-top: 0.625rem; font-size: var(--fs-lead); line-height: 1.25; }
.quote__role { margin-top: 0.25rem; color: var(--c-accent); font-size: 1rem; }

/* ---------- Curtain (intro + paginatransitie) ---------- */

.curtain {
	position: fixed;
	inset: 0;
	z-index: 120;
	pointer-events: none;
	fill: var(--c-black);
}
.curtain > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.curtain__mark {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.5rem;
	height: auto;
	transform: translate(-50%, -50%);
	fill: var(--c-accent);
	overflow: visible;
}
.curtain__mark circle { transform-box: fill-box; transform-origin: center; }
html.is-loading .curtain { pointer-events: auto; }
/* Vangnet: als de scripts niet laden, verdwijnt het doek vanzelf */
html.is-loading:not(.js-intro) .curtain { animation: curtain-failsafe 0.01s 4s forwards; }
@keyframes curtain-failsafe { to { visibility: hidden; } }

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.world__grid { grid-template-columns: 1fr; }
	.world__globe { max-width: 30rem; margin-inline: auto; }
	.quotes__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
	.menu__inner { grid-template-columns: 1fr; align-items: start; align-content: space-between; }
}

/* ---------- Mobiel ---------- */

@media (max-width: 767px) {
	:root { --topbar-h: 3.5rem; }
	.topbar__link { font-size: 0.8125rem; line-height: 1.3; }

	.site-header__start { display: none; }
	.site-header__inner { grid-template-columns: 1fr auto; padding: 0.75rem 1rem 0 1.25rem; }
	.site-header__logo { justify-self: start; }
	.burger { width: 3.25rem; height: 3.25rem; }
	.site-header__login { display: none; }
	.menu__login { display: inline-flex; width: 100%; }

	.hero { padding-top: 8rem; }
	.hero__title { text-align: left; text-wrap: pretty; }
	.hero__foot { text-align: left; }
	.hero__intro { margin: 2rem 0 0; }

	.duo__grid { grid-template-columns: 1fr; row-gap: 5rem; }
	.duo__col--left { align-items: flex-start; text-align: left; }

	.pillars {
		align-items: flex-start;
		min-height: 0;
		padding: 0 var(--gutter) var(--section-y);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.pillars::-webkit-scrollbar { display: none; }
	.pillar { width: 86vw; scroll-snap-align: start; }
	.pillar__media { aspect-ratio: 4 / 5; }
	.pillar__foot { flex-direction: column; gap: 1.25rem; }

	.quotes__grid { grid-template-columns: 1fr; row-gap: 3rem; }

	.menu__card { grid-template-columns: 5rem 1fr; }
	.menu__card-img { width: 5rem; }
}

/* ---------- Minder beweging ---------- */

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

/* Globe: slepen */
.globe-gallery { cursor: grab; touch-action: pan-y; }
.globe-gallery[data-globe-gallery-pointer="grabbing"] { cursor: grabbing; }
.globe-gallery__item { transition: filter 0.4s ease; }

/* =========================================================
   FAQ
   ========================================================= */

/* overflow: clip (niet hidden), anders werkt de sticky kolom niet */
.faq { position: relative; overflow: clip; padding: var(--section-y) 0; }
.faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 7rem);
	align-items: start;
}
/* De kolom rekt mee met de vragenlijst, zodat de sticky inhoud ruimte heeft om mee te lopen */
.faq__aside { align-self: stretch; }
.faq__sticky { position: sticky; top: clamp(6rem, 12vh, 8.5rem); }
.faq__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: 900 0.875rem/1 var(--f-ui);
	color: var(--c-accent);
}
.faq__kmark { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.faq__title {
	margin-top: 1.25rem;
	font: 500 var(--fs-display)/1.02 var(--f-ui);
	letter-spacing: -0.02em;
}

.faq__card {
	display: grid;
	grid-template-columns: clamp(6.5rem, 9vw, 8.5rem) 1fr;
	gap: 1.5rem;
	align-items: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 2rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	text-decoration: none;
}
.faq__card-media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q50 9 100 2 V100 Q50 93 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q50 9 100 2 V100 Q50 93 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.faq__card-media img { transition: scale 1.2s var(--ease-out); }
.faq__card:hover .faq__card-media img { scale: 1.08; }
.faq__card-body { display: grid; gap: 0.5rem; }
.faq__card-title { font: 500 clamp(1.25rem, 1rem + 0.6vw, 1.5rem)/1.2 var(--f-display); }
.faq__card-text { font-size: 1rem; line-height: 1.4; color: rgba(0, 0, 0, 0.62); }
.faq__card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font: 900 1rem/1 var(--f-ui);
	color: var(--c-accent);
}
.faq__card-link svg { width: 1.1rem; height: 1.1rem; transition: transform 0.6s var(--ease-athley); }
.faq__card:hover .faq__card-link svg { transform: translateX(0.4rem); }

.faq__item { position: relative; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.faq__item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.faq__q { font: inherit; }
.faq__btn {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.75rem;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: clamp(1.4rem, 2.2vw, 2rem) 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
	font: 500 clamp(1.25rem, 0.95rem + 1vw, 2rem)/1.2 var(--f-display);
}
.faq__label { transition: transform 0.7s var(--ease-athley); }
.faq__icon {
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(0, 0, 0, 0.28);
	border-radius: 50%;
	transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.7s var(--ease-athley);
}
.faq__icon span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.9rem;
	height: 1px;
	margin-left: -0.45rem;
	background: currentColor;
	transition: transform 0.7s var(--ease-athley);
}
.faq__icon span + span { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); transform: rotate(180deg); }
.faq__item.is-open .faq__icon span + span { transform: rotate(0deg); }
@media (hover: hover) {
	.faq__btn:hover .faq__label { transform: translateX(0.5rem); }
	.faq__btn:hover .faq__icon { border-color: var(--c-accent); }
}
.faq__panel { overflow: hidden; }
.faq__a {
	max-width: 40rem;
	padding: 0 3.75rem clamp(1.6rem, 2.4vw, 2.25rem) 0;
	font-size: var(--fs-lead);
	line-height: 1.35;
	color: rgba(0, 0, 0, 0.68);
}

/* =========================================================
   Instagram
   ========================================================= */

.insta { position: relative; overflow: hidden; padding: var(--section-y) 0; }
.insta__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.insta__title { font: 500 var(--fs-display)/1.02 var(--f-ui); letter-spacing: -0.02em; }
.insta__handle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.6rem;
	font: 900 1.125rem/1 var(--f-ui);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.6s var(--ease-athley);
}
.insta__handle:hover { background-size: 100% 1px; }
.insta__handle svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.insta__rows { display: grid; gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.insta__track {
	display: flex;
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	width: max-content;
	will-change: transform;
}
.insta__row[data-insta-row="1"] .insta__track { transform: translateX(-25%); }
.insta__post {
	position: relative;
	flex: none;
	display: block;
	width: clamp(10rem, 19vw, 18rem);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}
.insta__post img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-out); }
.insta__over {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.32);
	color: var(--c-white);
	opacity: 0;
	transition: opacity 0.5s ease;
}
.insta__over svg { width: 2.25rem; height: 2.25rem; fill: currentColor; transform: scale(0.6); transition: transform 0.7s var(--ease-athley); }
@media (hover: hover) {
	.insta__post:hover img { scale: 1.07; }
	.insta__post:hover .insta__over { opacity: 1; }
	.insta__post:hover .insta__over svg { transform: scale(1); }
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer { position: relative; z-index: 1; overflow: hidden; color: var(--c-white); background: var(--c-black); }
.site-footer__inner { padding-top: clamp(7rem, 12vw, 11rem); will-change: transform; }
.site-footer__cta {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: end;
	padding-bottom: clamp(4rem, 7vw, 6rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.site-footer__title { font: 500 clamp(3rem, 1.4rem + 6vw, 7.5rem)/0.96 var(--f-ui); letter-spacing: -0.03em; }
.site-footer__cta-side p { max-width: 28rem; margin-bottom: 2rem; font-size: var(--fs-lead); line-height: 1.3; color: rgba(255, 255, 255, 0.72); }
.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.site-footer__head { margin-bottom: 1.25rem; font: 900 0.8125rem/1 var(--f-ui); color: var(--c-accent); }
.site-footer__col ul { display: grid; gap: 0.35rem; }
.site-footer__col a {
	font: 300 clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem)/1.5 var(--f-display);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.6s var(--ease-athley);
}
.site-footer__col a:hover { background-size: 100% 1px; }
.site-footer__social { display: flex !important; gap: 0.75rem !important; margin-top: 1.5rem; }
.site-footer__social a {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: none;
	transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease-athley);
}
.site-footer__social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.site-footer__social a:hover { background: var(--c-accent); border-color: var(--c-accent); transform: translateY(-3px); }

.site-footer__brand { position: relative; z-index: 2; padding: clamp(1rem, 3vw, 3rem) var(--gutter) 0; overflow: visible; }
.site-footer__brand svg { width: 100%; height: auto; overflow: visible; fill: var(--c-white); }
.site-footer__dots { fill: var(--c-accent); }
.site-footer__dots circle { transform-box: fill-box; transform-origin: center; }

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	padding-top: 1.5rem;
	padding-bottom: calc(1.75rem + env(safe-area-inset-bottom));
	font: 500 0.875rem/1.3 var(--f-ui);
	color: rgba(255, 255, 255, 0.6);
}
.site-footer__bottom ul { display: flex; gap: 1.5rem; }
.site-footer__bottom a { text-decoration: none; }
.site-footer__bottom a:hover { color: var(--c-white); }
.site-footer__top {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: color 0.3s ease;
}
.site-footer__top svg { width: 1rem; height: 1rem; transform: rotate(-90deg); transition: transform 0.6s var(--ease-athley); }
.site-footer__top:hover { color: var(--c-white); }
.site-footer__top:hover svg { transform: rotate(-90deg) translateX(0.3rem); }

@media (max-width: 1024px) {
	.faq__grid { grid-template-columns: 1fr; }
	.faq__sticky { position: static; }
	.site-footer__cta { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.faq__btn { grid-template-columns: minmax(0, 1fr) 2.5rem; gap: 0.75rem; }
	.faq__icon { width: 2.5rem; height: 2.5rem; }
	.faq__a { padding: 0 0 1.5rem; }
	.insta__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
	.insta__post { width: 42vw; }
	.site-footer__cols { grid-template-columns: 1fr 1fr; }
	.site-footer__cols > :last-child { grid-column: 1 / -1; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   The Shift: aanmeldpaneel
   ========================================================= */

.shift {
	position: fixed;
	inset: 0 0 auto 0;
	height: 100vh;
	height: 100dvh; /* precies het zichtbare deel: zo is alles tot onderin te bereiken */
	z-index: 90;
	visibility: hidden;
	color: var(--c-white);
}
.shift.is-open { visibility: visible; }
/* Als de boog dicht is: een eigen vlak, zodat er nergens pagina doorschijnt */
.shift::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 100lvh; /* loopt door tot achter de iOS/Android-balk */
	background: var(--c-black);
	opacity: 0;
	pointer-events: none;
}
.shift.is-covered::before { opacity: 1; }
.shift__arc { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-black); }

.shift__close {
	position: absolute;
	top: clamp(1rem, 2.1vw, 2rem);
	right: clamp(1rem, 2.05vw, 1.9375rem);
	z-index: 2;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	background: transparent;
	color: var(--c-white);
	cursor: pointer;
	transition: transform 0.6s var(--ease-athley), background-color 0.4s ease;
}
.shift__close span { position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1px; margin-left: -0.625rem; background: currentColor; transform: rotate(45deg); }
.shift__close span + span { transform: rotate(-45deg); }
.shift__close { transition: transform 0.75s var(--ease-spin), background-color 0.4s ease; }
.shift__close:hover { transform: rotate(90deg); background: var(--c-accent); }

.shift__inner {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 7rem);
	align-items: center;
	max-width: calc(var(--content) + var(--gutter) * 2);
	margin-inline: auto;
	padding: clamp(4.5rem, 9vh, 7rem) var(--gutter) clamp(1.25rem, 5vh, 4rem);
	overflow: hidden;
}
/* shift.js schaalt de tekstkolom terug als hij op een lage viewport niet past */
.shift__body { transform-origin: 0 0; transform: scale(var(--shift-fit, 1)); }

.shift__media {
	position: relative;
	align-self: stretch;
	max-height: calc(100dvh - 2 * clamp(3rem, 8vh, 6rem));
	min-height: 0;
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 Q50 6.5 100 1.2 V100 Q50 93.5 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 Q50 6.5 100 1.2 V100 Q50 93.5 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.shift__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shift__caption {
	position: absolute;
	left: 1.5rem;
	bottom: 2.25rem;
	display: grid;
	font: 500 0.875rem/1.3 var(--f-ui);
	color: rgba(255, 255, 255, 0.8);
}
.shift__caption-name { font: 500 clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem)/1 var(--f-display); color: var(--c-white); }

.shift__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); color: var(--c-accent); }
.shift__kicker svg { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.shift__title { margin-top: clamp(0.6rem, 1.4vh, 1rem); font: 500 clamp(1.75rem, min(1.2rem + 2.4vw, 5.2vh), 3.5rem)/1.05 var(--f-ui); letter-spacing: -0.02em; }
.shift__intro { max-width: 34rem; margin-top: clamp(0.6rem, 1.4vh, 1rem); font-size: var(--fs-lead); line-height: 1.3; color: rgba(255, 255, 255, 0.7); }

.shift__form { display: grid; gap: clamp(1.25rem, 2.6vh, 1.9rem); margin-top: clamp(1.1rem, 3vh, 2.75rem); }

/* Veld met zwevend label en een lijn die van links volloopt bij focus */
.field { position: relative; padding-top: 1.1rem; }
.field__input {
	width: 100%;
	padding: 0.5rem 0 0.6rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--c-white);
	font: 300 1.25rem/1.3 var(--f-display);
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}
.field__input:focus-visible { outline: none; }
textarea.field__input { resize: none; min-height: 3.2rem; }
.field__label {
	position: absolute;
	left: 0;
	top: 1.6rem;
	font: 300 1.25rem/1.3 var(--f-display);
	color: rgba(255, 255, 255, 0.55);
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform 0.6s var(--ease-athley), color 0.4s ease;
}
.field__label em { font-style: normal; opacity: 0.6; }
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label { transform: translateY(-1.45rem) scale(0.7); color: var(--c-accent); }
.field__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.28);
}
.field__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.8s var(--ease-athley);
}
.field__input:focus ~ .field__line::after { transform: scaleX(1); }
.field__error { position: absolute; left: 0; top: calc(100% + 0.35rem); font: 500 0.8125rem/1.3 var(--f-ui); color: #ff8a73; }
.field.is-invalid .field__line { background: #ff8a73; }
.field__input:-webkit-autofill { -webkit-text-fill-color: var(--c-white); -webkit-box-shadow: 0 0 0 100px var(--c-black) inset; caret-color: var(--c-white); }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.chips__legend { width: 100%; margin-bottom: 0.8rem; padding: 0; font: 300 1.0625rem/1.3 var(--f-display); color: rgba(255, 255, 255, 0.55); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.15rem 0.7rem 0.95rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6.25rem;
	font: 900 0.9375rem/1 var(--f-ui);
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.chip__mark { width: 0.95rem; height: 0.84rem; fill: rgba(255, 255, 255, 0.35); transition: fill 0.4s ease, transform 0.6s var(--ease-athley); }
.chip:hover span { border-color: var(--c-accent); }
.chip:hover .chip__mark { fill: var(--c-accent); }
.chip input:checked + span .chip__mark { fill: var(--c-accent); transform: rotate(120deg); }
.chip input:checked + span { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
.chip input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.shift__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.4rem; }
.shift__note { font: 500 0.875rem/1.3 var(--f-ui); color: rgba(255, 255, 255, 0.55); }

.shift__done { margin-top: 2.5rem; }
.shift__done-mark { width: 3rem; height: 2.65rem; fill: var(--c-accent); overflow: visible; }
.shift__done-mark .mark-dot { transform-box: fill-box; transform-origin: center; }
.shift__done-title { margin-top: 1.25rem; font: 500 clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem)/1.1 var(--f-ui); }
.shift__done-text { max-width: 30rem; margin-top: 0.75rem; font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.7); }

@media (max-width: 900px) {
	/* Mobiel: gewoon scrollbaar paneel over de volle breedte, niets verkleinen */
	.shift__inner {
		display: block;
		height: 100%;
		padding: 5.25rem var(--gutter) calc(3rem + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.shift__media { width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: none; min-height: 0; }
	.shift__media img { object-position: 50% 22%; }
	.shift__caption { bottom: 1.25rem; left: 1.25rem; }
	.shift__caption-name { font-size: 1.75rem; }
	.shift__body { transform: none; margin-top: 1.75rem; }
	.shift__close { position: fixed; width: 3.25rem; height: 3.25rem; z-index: 3; background: var(--c-black); }
	.shift__media img { object-position: 50% 18%; }
	.shift__title { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
}

/* Testimonials: initiaal in plaats van een (niet-bestaande) portretfoto */
.quote__avatar--initial {
	display: grid;
	place-items: center;
	background: var(--c-accent);
	color: var(--c-white);
	font: 900 1.25rem/1 var(--f-ui);
}
.quote__text--long { font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); line-height: 1.3; }

/* Topbar: oranje outline-rondje met pijltje naast Anna: de melding is klikbaar */
.topbar__go {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	color: var(--c-white);
	transition: background-color 0.4s ease, transform 0.6s var(--ease-athley);
}
.topbar__go svg { width: 0.75rem; height: 0.75rem; transition: transform 0.75s var(--ease-spin); }
/* Zachte puls in de ring, af en toe */
.topbar__go::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	opacity: 0;
	animation: go-puls 3.2s ease-out 2.5s infinite;
}
@keyframes go-puls { 0% { transform: scale(1); opacity: 0.8; } 60%, 100% { transform: scale(1.8); opacity: 0; } }
.topbar__link:hover .topbar__go { background: var(--c-accent); }
/* Het paneel valt van boven naar beneden: het pijltje draait mee naar beneden */
.topbar__link:hover .topbar__go svg { transform: rotate(90deg); }

/* =========================================================
   Takeover-menu: rollende letters, beeldpodium en submenu
   ========================================================= */

.menu__link { width: auto; padding: 0.08em 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.menu__toggle { display: inline-flex; align-items: center; gap: 0.35em; font: inherit; font: 500 clamp(2rem, min(0.85rem + 3vw, 6.6vh), 4.125rem)/1.06 var(--f-display); letter-spacing: -0.02em; }

/* Rollende letters: twee lagen, bij hover rollen de letters één voor één door */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.roll__b { position: absolute; left: 0; top: 0; }
.roll .char { display: inline-block; will-change: transform; }


/* Submenu */
.menu__sub { overflow: hidden; }
.menu__sub-list { display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); gap: 0.9rem; padding: 0.9rem 0 0.6rem; }
.menu__sub-card {
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: 0.85rem;
	align-items: center;
	padding: 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	text-decoration: none;
	transition: border-color 0.4s ease, background-color 0.4s ease;
}
.menu__sub-card:hover { border-color: var(--c-accent); background: rgba(226, 99, 76, 0.06); }
.menu__sub-img {
	width: 3.4rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q50 11 100 3 V100 Q50 92 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q50 11 100 3 V100 Q50 92 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.menu__sub-body { display: grid; gap: 0.25rem; }
.menu__sub-title { display: inline-flex; align-items: center; gap: 0.4rem; font: 900 1rem/1 var(--f-ui); }
.menu__sub-title svg { flex: none; width: 0.95rem; height: auto; aspect-ratio: 27.9 / 24.53; fill: var(--c-accent); overflow: visible; }
.menu__sub-text { font: 300 0.875rem/1.3 var(--f-display); color: rgba(0, 0, 0, 0.62); }
.menu__sub-all { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.3rem 0 0.8rem; font: 900 0.9375rem/1 var(--f-ui); color: var(--c-accent); text-decoration: none; }
.menu__sub-all svg { width: 1rem; height: 1rem; transition: transform 0.6s var(--ease-athley); }
.menu__sub-all:hover svg { transform: translateX(0.3rem); }

/* Beeldpodium (alleen apparaten met hover) */
.menu__stage { display: none; text-decoration: none; }
.menu__stage-media {
	position: relative;
	display: block;
	height: min(31rem, calc(100dvh - 17rem));
	aspect-ratio: 4 / 5;
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 Q50 7 100 1.5 V100 Q50 94.5 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 Q50 7 100 1.5 V100 Q50 94.5 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Opacity, geen visibility: een kind met visibility:visible zou door het
   verborgen menu heen zichtbaar worden (de "verdwaalde foto" boven de hero). */
.menu__stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.menu__stage-img.is-default { opacity: 1; }
.menu__stage-caption {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 2rem;
	display: grid;
	gap: 0.35rem;
	color: var(--c-white);
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25);
}
.menu__stage-caption .menu__card-kicker { color: var(--c-white); }
.menu__stage-caption .menu__card-title { font-size: 1.375rem; }
@media (hover: hover) and (min-width: 1025px) {
	.menu__stage { position: relative; display: block; justify-self: end; }
	.menu__aside > .menu__card { display: none; }
}

@media (max-width: 767px) {
	.menu__sub-list { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* Burger als kruisje (menu open): bij hover 90 graden draaien, zoals het Shift-kruisje */
.burger[aria-expanded="true"] { transition: transform 0.75s var(--ease-spin); }
@media (hover: hover) {
	.burger[aria-expanded="true"]:hover { transform: rotate(90deg); }
	.burger[aria-expanded="true"]:hover .burger__line:nth-child(1) { transform: rotate(45deg) scaleX(1.1); }
	.burger[aria-expanded="true"]:hover .burger__line:nth-child(3) { transform: rotate(-45deg) scaleX(1.1); }
}

/* "Onze programma's" is een knop: geen browserstyling, geen hoverstip (het plusje is het signaal) */
.menu__toggle { -webkit-appearance: none; appearance: none; border-radius: 0; box-shadow: none; }
.menu__link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; }

/* Menu-hover v2: rustig. Het item schuift iets op, de andere dimmen, en de
   drie Athley-stippen verschijnen erachter en draaien één keer. */
.menu__link { align-items: center; gap: 0; }
.menu__label { transition: transform 0.8s var(--ease-athley); }
/* Menu volledig in kleine letters */
.menu__label, .menu__sub-title { text-transform: lowercase; }
.menu__mark {
	width: 0.42em;
	height: 0.37em;
	margin-left: 0.16em;
	fill: var(--c-accent);
	flex: none;
	opacity: 0;
	transform: translateY(0.1em) scale(0.4) rotate(-120deg);
	transition: opacity 0.35s ease, transform 0.8s var(--ease-spin);
}
@media (hover: hover) {
	.menu__link:hover .menu__label { transform: translateX(0.12em); }
	.menu__link:hover .menu__mark { opacity: 1; transform: translate(0.12em, 0.1em) scale(1) rotate(0deg); }
}

/* Plusje als outline-rondje, net als burger en sluitknoppen */
.menu__toggle { gap: 0.4em; }
.menu__plus {
	position: relative;
	display: block;
	flex: none;
	width: 0.6em;
	height: 0.6em;
	max-width: 3rem;
	max-height: 3rem;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	transform: translateY(var(--plus-y, 0.04em));
	transition: transform 0.75s var(--ease-spin), background-color 0.4s ease;
}
.menu__plus span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 36%;
	height: 1px;
	background: var(--c-black);
	transform: translate(-50%, -50%);
	transition: transform 0.7s var(--ease-athley), background-color 0.4s ease;
}
.menu__plus span + span { transform: translate(-50%, -50%) rotate(90deg); }
@media (hover: hover) {
	.menu__toggle:hover .menu__plus { transform: translateY(var(--plus-y, 0.04em)) rotate(90deg); }
}
.menu__toggle[aria-expanded="true"] .menu__plus { background: var(--c-accent); }
.menu__toggle[aria-expanded="true"] .menu__plus span { background: var(--c-white); }
.menu__toggle[aria-expanded="true"] .menu__plus span + span { transform: translate(-50%, -50%) rotate(0deg); }
@media (max-width: 767px) {
	/* Plusje rechts in beeld, iets groter (ook een fijner tikvlak) */
	.menu__toggle { display: flex; width: 100%; justify-content: space-between; }
	.menu__plus { --plus-y: calc(0.04em + 2px); width: 2.25rem; height: 2.25rem; }
}

/* Beeldpodium: verloop onderin zodat de tekst altijd leesbaar is */
.menu__stage-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 50;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 32%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}
.menu__stage-caption { z-index: 60; }

/* Grote schermen: alles is in rem opgebouwd, dus de rem meeschalen laat de
   hele compositie (inclusief maximale breedtes) proportioneel meegroeien in
   plaats van een klein eiland midden op een 4K/iMac-scherm. */
@media (min-width: 1600px) {
	html { font-size: clamp(16px, 1.06vw, 24px); }
}

/* =========================================================
   Start: keuzepaneel (veegt van links binnen, Athley-oranje)
   ========================================================= */

.start {
	position: fixed;
	inset: 0 0 auto 0;
	height: 100vh;
	height: 100dvh;
	z-index: 95;
	visibility: hidden;
	color: var(--c-white);
}
.start.is-open { visibility: visible; }
.start::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 100lvh;
	background: var(--c-accent);
	opacity: 0;
	pointer-events: none;
}
.start.is-covered::before { opacity: 1; }
.start__arc { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-accent); }

.start__close {
	position: absolute;
	top: clamp(1rem, 2.1vw, 2rem);
	right: clamp(1rem, 2.05vw, 1.9375rem);
	z-index: 3;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	border: 1px solid var(--c-white);
	border-radius: 50%;
	background: transparent;
	color: var(--c-white);
	cursor: pointer;
	transition: transform 0.75s var(--ease-spin), background-color 0.4s ease, color 0.4s ease;
}
.start__close span { position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1px; margin-left: -0.625rem; background: currentColor; transform: rotate(45deg); }
.start__close span + span { transform: rotate(-45deg); }
.start__close:hover { transform: rotate(90deg); background: var(--c-white); color: var(--c-accent); }

.start__inner {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: clamp(1.5rem, 4vh, 3rem);
	max-width: calc(var(--content) + var(--gutter) * 2);
	margin-inline: auto;
	padding: clamp(6.5rem, 14vh, 9rem) var(--gutter) clamp(2rem, 6vh, 4rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.start__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); }
.start__kicker svg { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.start__title { margin-top: 0.75rem; font: 500 clamp(2.5rem, min(1.2rem + 4vw, 9vh), 5.5rem)/1 var(--f-ui); letter-spacing: -0.03em; }

/* Drie kolommen; de kolom onder de muis groeit, de andere wijken */
.start__options { display: flex; gap: clamp(0.75rem, 1.2vw, 1.25rem); min-height: 0; height: min(100%, 36rem); }
.start__opt {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	color: var(--c-white);
	text-decoration: none;
	transition: flex-grow 0.9s var(--ease-athley);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 Q50 6.5 100 1.5 V100 Q50 95 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 Q50 6.5 100 1.5 V100 Q50 95 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.start__opt-media { position: absolute; inset: 0; background: var(--c-black); }
.start__opt-media img {
	/* Vaste breedte (ongeveer een uitgegroeide kolom): bij het groeien van de
	   kolom komt er links en rechts meer foto bij, in plaats van in te zoomen. */
	position: absolute;
	top: 0;
	left: 50%;
	width: max(100%, 34vw);
	max-width: none;
	height: 100%;
	object-fit: cover;
	transform: translateX(-50%);
	transition: scale 1.2s var(--ease-out), opacity 0.6s ease;
}
.start__opt-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 34%, rgba(0, 0, 0, 0) 62%);
}
.start__opt:first-child .start__opt-media img { object-position: 50% 12%; }
.start__opt-body {
	position: absolute;
	left: clamp(1.1rem, 1.8vw, 1.75rem);
	right: 5rem;
	bottom: clamp(1.4rem, 2.4vw, 2.25rem);
	display: grid;
	gap: 0.45rem;
}
.start__opt-kicker { display: inline-flex; align-items: center; gap: 0.45rem; font: 900 0.8125rem/1 var(--f-ui); }
.start__opt-kicker svg { width: 0.95rem; height: 0.84rem; fill: var(--c-accent); transition: transform 0.8s var(--ease-spin); }
.start__opt-title { font: 500 clamp(1.6rem, 1.1rem + 1.3vw, 2.5rem)/1.05 var(--f-display); white-space: nowrap; }
.start__opt-text { max-width: 22rem; font-size: 1rem; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
.start__opt-go {
	position: absolute;
	right: clamp(1.1rem, 1.8vw, 1.75rem);
	bottom: clamp(1.4rem, 2.4vw, 2.25rem);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--c-white);
	border-radius: 50%;
	transform: rotate(-45deg);
	transition: transform 0.8s var(--ease-spin), background-color 0.4s ease, color 0.4s ease;
}
.start__opt-go svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) and (min-width: 901px) {
	.start__options:hover .start__opt { flex-grow: 0.88; }
	.start__options:hover .start__opt-media img { opacity: 0.7; }
	.start__options .start__opt:hover { flex-grow: 1.3; }
	.start__opt:hover .start__opt-media img { scale: 1.02; opacity: 1; }
	.start__opt:hover .start__opt-go { transform: rotate(0deg); background: var(--c-white); color: var(--c-accent); }
	.start__opt:hover .start__opt-kicker svg { transform: rotate(120deg); }
	/* Tekst pas tonen als de kolom breed genoeg is */
	.start__opt-text { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.5s ease, transform 0.8s var(--ease-athley); }
	.start__opt:hover .start__opt-text { opacity: 1; transform: none; transition-delay: 0.15s; }
}
@media (max-width: 900px) {
	.start__inner { display: block; padding-top: 6rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
	.start__close { position: fixed; width: 3.25rem; height: 3.25rem; background: var(--c-accent); }
	.start__options { flex-direction: column; height: auto; margin-top: 1.75rem; }
	.start__opt { flex: none; aspect-ratio: 16 / 10; }
	.start__opt-media img { width: 100%; }
	.start__opt-title { font-size: 1.75rem; }
	.start__opt-text { font-size: 0.9375rem; }
}

/* =========================================================
   Knop-spinner: drie Athley-stippen die rond stappen
   ========================================================= */

.btn__spinner {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.btn__spinner svg { width: 1.35rem; height: 1.19rem; fill: currentColor; transform-origin: 50% 58.5%; overflow: visible; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn__label { opacity: 0; transform: translateY(-40%); transition: opacity 0.25s ease, transform 0.5s var(--ease-athley); }
.btn.is-busy .btn__spinner { opacity: 1; transition-delay: 0.1s; }
.btn.is-busy .btn__spinner svg { animation: btn-spin 0.75s var(--ease-spin) infinite; }
@keyframes btn-spin { from { transform: rotate(0deg); } to { transform: rotate(120deg); } }
.btn__label { transition: opacity 0.35s ease, transform 0.6s var(--ease-athley); }

/* Alle sluitkruisjes: bij hover 90 graden draaien met de doorverende curve */
.shift__close, .start__close { transition: transform 0.75s var(--ease-spin), background-color 0.4s ease, color 0.4s ease; }
@media (hover: hover) {
	.shift__close:hover, .start__close:hover { transform: rotate(90deg); }
}

/* =========================================================
   Programma's: Infinite Dome Grid (resource, in Athley-stijl)
   ========================================================= */

/* margin -1px: de sectie valt een pixel over de buren, zodat er op een
   halve-pixelpositie (iOS) geen haarlijn tussen de secties doorschijnt. */
.programs { position: relative; margin-block: -1px; overflow: hidden; color: var(--c-white); }
/* Kop als overlay bovenop het grid; het grid zelf vult de hele sectie, zodat
   de boogovergangen (crème tilt eraf, wit rolt erover) het grid raken. */
.programs__overlay {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 9; /* onder de boog (10), zodat het crème er schoon overheen ligt */
	padding-top: clamp(6rem, 14vh, 9rem);
	padding-bottom: 4rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0));
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.dome-grid[data-has-open] .programs__overlay { opacity: 0; }
.programs__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
}
.programs__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); color: var(--c-accent); }
.programs__kicker svg { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.programs__title { margin-top: 1.25rem; font: 500 var(--fs-display)/1.02 var(--f-ui); letter-spacing: -0.02em; }
.programs__hint { max-width: 22rem; font-size: 1rem; line-height: 1.4; color: rgba(255, 255, 255, 0.65); }

.dome-grid {
	--panel-gap: 0px; /* hoeken zijn recht, dus geen correctie nodig */
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--c-black);
	cursor: grab;
	touch-action: pan-y; /* verticaal vegen blijft de pagina scrollen */
	-webkit-user-select: none;
	user-select: none;
}
.dome-grid[data-dragging] { cursor: grabbing; }
.dome-grid__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.75rem, 1.6vw, 1.75rem); width: 100%; }
.dome-grid__item { --slide: 0; --dim: 0; position: relative; aspect-ratio: 1; transform-origin: 0 0; will-change: transform; }
.dome-grid__item[data-lifted] { z-index: 10; }
.dome-grid__item[data-active] .dome-grid__caption { opacity: 0; }
.dome-grid__item .dome-grid__content { display: none; }
.dome-grid__panel {
	position: absolute;
	inset: 0;
	background: var(--c-white);
	pointer-events: none;
	transform: translateX(calc((100% + var(--panel-gap)) * var(--slide)));
}
.dome-grid__media { position: relative; width: 100%; height: 100%; overflow: hidden; background: #111; }
.dome-grid__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(1.1); }
.dome-grid__caption {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.5em;
	padding: clamp(0.85rem, 1.3vw, 1.25rem);
	color: var(--c-white);
	background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.62));
	pointer-events: none;
	transform: translateZ(0);
	transition: opacity 0.35s ease-out;
}
.dome-grid__caption .dome-grid__text { font: 500 clamp(1rem, 0.85rem + 0.5vw, 1.25rem)/1.15 var(--f-display); }
.dome-grid__meta { font: 900 0.75rem/1 var(--f-ui); color: var(--c-accent); }
.dome-grid__dim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: var(--dim); pointer-events: none; transform: translateZ(0); }

.dome-grid__shade {
	--fx: 50%;
	--fy: 50%;
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0.7;
	pointer-events: none;
}
.dome-grid__cover { position: absolute; inset: 0; z-index: 20; background: #000; pointer-events: none; transition: opacity 0.5s ease-out; }
.dome-grid[data-loaded] .dome-grid__cover { opacity: 0; }

/* Lightbox: de programma-info naast (of onder) de opengeklapte kaart */
.dome-grid__lightbox {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: calc(50% + var(--lightbox-gap, 0px) / 2);
	width: var(--lightbox-size, 70vh);
	height: var(--lightbox-size, 70vh);
	display: block;
	opacity: 0;
	pointer-events: none;
	color: var(--c-black);
	transform: translateY(-50%);
	transition: opacity 0.2s ease-out;
}
.dome-grid__lightbox[data-open] { opacity: 1; transition: opacity 0.35s ease-out 0.15s; }
.dome-grid__lightbox-inner {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: calc(0px - var(--lightbox-gap, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.dome-grid__lightbox[data-open] .dome-grid__lightbox-inner { pointer-events: auto; }
.dome-grid__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1rem; min-height: 100%; padding: clamp(1.5rem, 3vw, 2.75rem); }
.dome-grid__kicker { display: inline-flex; align-items: center; gap: 0.45rem; font: 900 0.8125rem/1 var(--f-ui); color: var(--c-accent); }
.dome-grid__kicker svg { width: 0.95rem; height: 0.84rem; fill: currentColor; }
.dome-grid__title { font: 500 clamp(1.6rem, 1rem + 1.6vw, 2.5rem)/1.05 var(--f-ui); letter-spacing: -0.02em; }
.dome-grid__content .dome-grid__text { font-size: var(--fs-lead); line-height: 1.35; }
.dome-grid__text.is--faded { opacity: 0.72; }
.dome-grid__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
	font: 900 1rem/1 var(--f-ui);
	color: var(--c-black);
	text-decoration: none;
}
.dome-grid__cta-go {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	color: var(--c-accent);
	transform: rotate(-45deg);
	transition: transform 0.75s var(--ease-spin), background-color 0.4s ease, color 0.4s ease;
}
.dome-grid__cta-go svg { width: 1rem; height: 1rem; }
.dome-grid__cta:hover .dome-grid__cta-go { transform: rotate(0deg); background: var(--c-accent); color: var(--c-white); }

@media (orientation: portrait) {
	.dome-grid__panel { transform: translateY(calc((100% + var(--panel-gap)) * var(--slide))); }
	.dome-grid__lightbox {
		top: calc(50% + var(--lightbox-gap, 0px) / 2);
		left: 50%;
		width: var(--lightbox-size, 80vw);
		height: var(--lightbox-size, 80vw);
		transform: translateX(-50%);
	}
	.dome-grid__lightbox-inner { left: 0; top: calc(0px - var(--lightbox-gap, 0px)); }
	.dome-grid__content { padding: 1.5rem; gap: 0.75rem; }
}
@media (max-width: 767px) {
	.programs__head { flex-direction: column; align-items: flex-start; }
	.dome-grid { height: 100svh; }
	.programs__overlay { padding-top: 5.5rem; }
	.dome-grid__caption .dome-grid__text { font-size: 0.9375rem; }
	.dome-grid__content .dome-grid__text { font-size: 1rem; }
}


/* Programma-kaartje: onze standaardknop */
.dome-grid__btn { margin-top: 0.5rem; }



/* Cover-boog: de volgende kleur rolt over de hele sectie (Arc Scroll Transition) */
.arc-scroll-transition--cover { inset: 0; height: auto; }


/* =========================================================
   Floaty: icebath-sessies, linksonder
   Dezelfde pinch-knop als overal (buttons.js), in pastelblauw.
   Komt na de intro omhoog en deint daarna zachtjes mee.
   ========================================================= */

.floaty {
	position: fixed;
	left: clamp(1rem, 2.05vw, 1.9375rem);
	bottom: clamp(1rem, 2.05vw, 1.9375rem);
	z-index: 45; /* onder menu (50) en header (60) */
	color: var(--c-black);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(100% + 3rem)) rotate(-4deg);
	transition: transform 1.1s var(--ease-spin), opacity 0.5s ease, visibility 0s 1.1s;
}
.floaty.is-in {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: transform 1.1s var(--ease-spin), opacity 0.5s ease, visibility 0s;
}
/* Naar beneden scrollen: weg. Omhoog: terug (floaty.js). */
.floaty.is-in.is-away,
html.menu-open .floaty.is-in,
html.shift-open .floaty.is-in,
html.is-transitioning .floaty.is-in {
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(100% + 3rem));
	transition: transform 0.6s var(--ease-athley), opacity 0.3s ease, visibility 0s 0.6s;
}

.floaty__link {
	--btn-bg: var(--c-ice);
	--btn-line: var(--c-ice);
	--btn-fill: var(--c-black);
	gap: 0.875rem;
	min-height: 0;
	padding: 0.85rem 1.5rem 0.85rem 0.9rem;
	font-weight: inherit;
	animation: floaty-bob 4.5s ease-in-out 1.4s infinite;
}

.floaty__ice {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--c-black);
	color: var(--c-ice);
	transition: background-color 0.35s ease 0.12s, color 0.35s ease 0.12s;
}
.floaty__ice svg { width: 1.3rem; height: 1.3rem; animation: floaty-spin 14s linear infinite; }

.floaty__body { display: grid; gap: 0.3rem; }
.floaty__title { font: 900 1.125rem/1 var(--f-ui); letter-spacing: -0.01em; }
.floaty__sub { display: inline-flex; align-items: center; gap: 0.35rem; font: 500 0.875rem/1 var(--f-ui); }
.floaty__sub svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }

.floaty__go {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: 0.25rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	transform: rotate(-45deg);
	transition: transform 0.75s var(--ease-spin);
}
.floaty__go svg { width: 0.95rem; height: 0.95rem; }

@media (hover: hover) {
	.floaty__link:hover { color: var(--c-ice); animation-play-state: paused; }
	.floaty__link:hover .floaty__ice { background: var(--c-ice); color: var(--c-black); }
	.floaty__link:hover .floaty__go { transform: rotate(0deg); }
}

@keyframes floaty-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-0.3rem) rotate(-0.6deg); }
}
@keyframes floaty-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
	.floaty__link { gap: 0.7rem; padding: 0.75rem 1.4rem 0.75rem 0.75rem; }
	.floaty__ice { width: 2.5rem; height: 2.5rem; }
	.floaty__ice svg { width: 1.15rem; height: 1.15rem; }
	.floaty__title { font-size: 1rem; }
	.floaty__sub { font-size: 0.8125rem; }
	.floaty__go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.floaty, .floaty.is-in { transition: opacity 0.3s ease, visibility 0s; transform: none; }
	.floaty__link, .floaty__ice svg { animation: none; }
}

/* =========================================================
   Particulier / zakelijk
   Twee homepages en een intro (/). De wissel tussen de pagina's loopt
   onder het boogdoek door (app.js, audience.js).
   ========================================================= */

/* Het doek heeft de kleur van de pagina waar je heen gaat: app.js zet
   data-tone bij een wissel, de head zet html.arrive-* bij aankomst. Zo
   loopt de ene pagina zonder naad over in de andere. Een gewone eerste
   load van zakelijk krijgt crème, anders tilt zwart op zwart onzichtbaar op. */
.curtain { fill: var(--curtain, var(--c-black)); }
html[data-audience="zakelijk"] { --curtain: var(--c-cream); }
html.arrive-particulier, .curtain[data-tone="particulier"] { --curtain: var(--c-white); }
html.arrive-zakelijk, .curtain[data-tone="zakelijk"],
html.arrive-intro, .curtain[data-tone="intro"] { --curtain: var(--c-black); }

/* ---------- Toggle in de header ---------- */
/* De header staat in difference: wit is hier "de tegenkleur van wat eronder
   ligt". Het bolletje is wit, de labels staan er in difference overheen, dus
   een letter keert om zodra het bolletje eronder doorschuift. */
.site-header__lead { justify-self: start; display: flex; align-items: center; gap: 0.75rem; }
.aud-toggle {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: stretch;
	height: 3.75rem;
	padding: 0.3125rem;
	border: 1px solid currentColor;
	border-radius: 999px;
}
.aud-toggle__knob {
	position: absolute;
	top: 0.3125rem;
	bottom: 0.3125rem;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: currentColor;
	will-change: transform, width;
}
.aud-toggle__opt {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 0 1.2rem;
	border-radius: 999px;
	font: 900 1rem/1 var(--f-ui);
	color: var(--c-white);
	text-decoration: none;
	white-space: nowrap;
	mix-blend-mode: difference;
}
.aud-toggle__opt:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Voor het script het bolletje plaatst: het actieve label gewoon gevuld */
.aud-toggle:not(.is-ready) .aud-toggle__opt.is-active { background: var(--c-white); color: var(--c-black); mix-blend-mode: normal; }

@media (max-width: 1099px) {
	.site-header__lead .site-header__start { display: none; }
}
@media (max-width: 767px) {
	.site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.625rem; }
	.site-header__logo { order: -1; }
	.site-header__logo svg { width: 5.4rem; height: 1.26rem; }
	.site-header__lead { justify-self: center; }
	.aud-toggle { height: 2.875rem; padding: 0.25rem; }
	.aud-toggle__knob { top: 0.25rem; bottom: 0.25rem; }
	.aud-toggle__opt { padding: 0 0.72rem; font-size: 0.75rem; }
}
@media (max-width: 359px) {
	.site-header__logo svg { width: 1.3rem; height: 1.26rem; overflow: hidden; }
	.aud-toggle__opt { padding: 0 0.6rem; font-size: 0.6875rem; }
}

/* ---------- Topbar, lichte variant (zakelijk) ---------- */
.topbar--light { background: var(--c-cream); color: var(--c-black); }
.topbar--light .topbar__go { color: var(--c-black); }
.topbar--light .topbar__link:hover .topbar__go { color: var(--c-white); }
.topbar__badge { width: 1.25rem; height: 1.1rem; flex: none; fill: var(--c-accent); }

/* ---------- Hero: tweede knop en donkere variant ---------- */
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; }
.hero--dark .hero__intro { color: rgba(255, 255, 255, 0.76); }
@media (max-width: 767px) {
	.hero__ctas { justify-content: flex-start; }
}

/* =========================================================
   Intro: de tweesprong (fork.js)
   ========================================================= */

html.page-fork, html.page-fork body { overscroll-behavior: none; }
.fork {
	--fork-pad: clamp(1.25rem, 4.6vw, 5.5rem);
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 36rem;
	overflow: hidden;
	background: var(--c-white);
	color: var(--c-black);
}
.fork__door {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.fork__door--light { z-index: 1; background: var(--c-white); color: var(--c-black); }
/* Zonder script: een rechte deling. fork.js tekent daarna de levende boog. */
.fork__door--dark {
	z-index: 2;
	background: var(--c-black);
	color: var(--c-white);
	clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.fork__body {
	position: absolute;
	bottom: clamp(3.25rem, 10vh, 7rem);
	display: grid;
	justify-items: start;
	width: calc(50% - var(--fork-pad) * 1.6);
	transform: translate3d(calc(var(--fork-shift, 0px) * 0.4), 0, 0);
	transition: opacity 0.7s ease;
}
.fork__door--light .fork__body { left: var(--fork-pad); }
.fork__door--dark .fork__body { right: var(--fork-pad); justify-items: end; text-align: right; }
.fork.has-active .fork__door:not(.is-active) .fork__body { opacity: 0.38; }
/* Bij een keuze stuurt GSAP de opacity; de CSS-transitie zou achterlopen */
.fork.is-choosing .fork__body { transition: none; }

.fork__media {
	position: relative;
	height: clamp(9rem, 27vh, 19rem);
	aspect-ratio: 4 / 5;
	margin-bottom: clamp(1.25rem, 3.4vh, 2.25rem);
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q50 8.5 100 2 V100 Q50 93.5 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q50 8.5 100 2 V100 Q50 93.5 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.fork__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease-out); }
.fork__door.is-active .fork__media img { scale: 1.07; }

.fork__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); }
.fork__kicker svg { width: 1.1rem; height: 0.97rem; fill: var(--c-accent); transition: transform 0.8s var(--ease-spin); }
.fork__door.is-active .fork__kicker svg { transform: rotate(120deg); }
.fork__last {
	display: none;
	padding: 0.3rem 0.6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font: 500 0.75rem/1 var(--f-ui);
	opacity: 0.6;
}
.fork__door.is-last .fork__last { display: inline-block; }

.fork__word {
	display: block;
	margin-top: clamp(0.5rem, 1.4vh, 1rem);
	font: 500 clamp(3.25rem, min(8.2vw, 15vh), 9.5rem)/0.92 var(--f-ui);
	letter-spacing: -0.045em;
	white-space: nowrap;
}
.fork__text {
	max-width: 29rem;
	margin-top: clamp(0.75rem, 1.8vh, 1.25rem);
	font-size: var(--fs-lead);
	line-height: 1.28;
	opacity: 0.72;
}
.fork__go {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: clamp(1.25rem, 3vh, 2rem);
	font: 900 1rem/1 var(--f-ui);
}
.fork__door--dark .fork__go { flex-direction: row-reverse; }
.fork__ring {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	transform: rotate(-45deg);
	transition: transform 0.8s var(--ease-spin), background-color 0.4s ease, color 0.4s ease;
}
.fork__ring svg { width: 1.15rem; height: 1.15rem; }
.fork__door.is-active .fork__ring { transform: rotate(0deg); background: var(--c-accent); color: var(--c-white); }
.fork__door:focus-visible .fork__ring { outline: 2px solid var(--c-accent); outline-offset: 4px; }

/* De vraag over de grens heen: in difference, dus wit op zwart en zwart
   op wit, en halverwege een letter precies omgekeerd. */
.fork__q {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: clamp(6.5rem, 17vh, 10.5rem);
	width: min(calc(100% - var(--fork-pad) * 2), 54rem);
	transform: translateX(-50%);
	text-align: center;
	color: var(--c-white);
	mix-blend-mode: difference;
	pointer-events: none;
}
.fork__hello { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); }
.fork__hello svg { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.fork__title {
	margin-top: clamp(0.75rem, 1.8vh, 1.25rem);
	font: 500 clamp(2.125rem, min(1.1rem + 3.4vw, 8.4vh), 5rem)/1.02 var(--f-ui);
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* Het merkje op de top van de bolling (fork.js zet de positie). Zelfde
   maat en plek als de laadstippen op het doek, zodat het bij een keuze
   naadloos overgaat in het doek van de volgende pagina. */
.fork__knob { position: absolute; left: 0; top: 0; z-index: 4; display: none; pointer-events: none; will-change: transform; }
.fork.is-live .fork__knob { display: block; }
.fork__knob-in { display: block; width: 3.5rem; margin: -1.539rem 0 0 -1.75rem; }
.fork__knob svg { display: block; width: 3.5rem; height: auto; fill: var(--c-accent); overflow: visible; }

.fork__foot {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 var(--fork-pad) calc(1.15rem + env(safe-area-inset-bottom));
	font: 500 0.8125rem/1.2 var(--f-ui);
	color: var(--c-white);
	mix-blend-mode: difference;
	pointer-events: none;
}
.fork__foot a { pointer-events: auto; text-decoration: none; }
.fork__foot a:hover { text-decoration: underline; }

@media (hover: hover) {
	.fork__door { cursor: pointer; }
}

/* Smal: boven particulier, onder zakelijk. De grens ligt iets onder het
   midden, want bovenin staat ook de vraag. */
@media (max-width: 767px) {
	.fork { --fork-pad: 1.25rem; min-height: 33rem; }
	.fork__door--dark { clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%); }
	.fork__q { top: 5.25rem; text-align: left; transform: none; left: var(--fork-pad); }
	.fork__title { font-size: clamp(1.75rem, 8.4vw, 2.5rem); }
	.fork__body {
		left: var(--fork-pad) !important;
		right: var(--fork-pad) !important;
		width: auto;
		justify-items: start !important;
		text-align: left !important;
		transform: translate3d(0, calc(var(--fork-shift, 0px) * 0.4), 0);
	}
	.fork__door--light .fork__body { top: auto; bottom: calc(42% + 1.5rem); }
	.fork__door--dark .fork__body { top: calc(58% + 1.75rem); bottom: auto; }
	.fork__media { display: none; }
	.fork__word { margin-top: 0.5rem; font-size: clamp(3rem, 15.5vw, 4.5rem); }
	.fork__text { max-width: 20rem; margin-top: 0.6rem; font-size: 1rem; }
	.fork__go { margin-top: 1rem; }
	.fork__door--dark .fork__go { flex-direction: row; }
	.fork__ring { width: 2.75rem; height: 2.75rem; }
	.fork.has-active .fork__door:not(.is-active) .fork__body { opacity: 1; }
	.fork__foot { justify-content: flex-start; }
	.fork__foot span:first-child { display: none; }
}
@media (max-width: 767px) and (max-height: 700px) {
	.fork__text { display: none; }
	.fork__go { margin-top: 0.75rem; }
}

/* =========================================================
   Particulier: het platform en The Shift als één combinatie
   ========================================================= */

.combo { position: relative; overflow: hidden; padding: var(--section-y) 0; }
.combo__head { display: grid; justify-items: center; text-align: center; }
.combo__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); color: var(--c-accent); }
.combo__kicker svg { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.combo__title { margin-top: 1rem; font: 500 var(--fs-display)/1.04 var(--f-ui); letter-spacing: -0.02em; }
.combo__lead { max-width: 40rem; margin-top: clamp(1.25rem, 2vw, 1.75rem); font-size: var(--fs-lead); line-height: 1.3; color: rgba(255, 255, 255, 0.74); }

.combo__grid {
	--plus: clamp(3.5rem, 5.5vw, 5.5rem);
	--gap: clamp(1rem, 2.4vw, 2.5rem);
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	column-gap: var(--gap);
	margin-top: clamp(3rem, 6vw, 5.5rem);
	max-width: calc(76rem + var(--gutter) * 2);
}
.combo__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.combo__visual { width: 100%; will-change: transform; }
.combo__media {
	position: relative;
	aspect-ratio: 4 / 4.6;
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 Q50 6.5 100 1.5 V100 Q50 95 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 Q50 6.5 100 1.5 V100 Q50 95 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.combo__media img { width: 100%; height: 100%; object-fit: cover; }
.combo__card:first-child .combo__media img { object-position: 50% 18%; }
.combo__tag { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: clamp(1.5rem, 2.4vw, 2.25rem); font: 900 0.8125rem/1 var(--f-ui); color: var(--c-accent); }
.combo__tag svg { width: 0.95rem; height: 0.84rem; fill: currentColor; }
.combo__name { margin-top: 0.6rem; font: 500 clamp(2.25rem, 1.4rem + 2.6vw, 4rem)/1 var(--f-ui); letter-spacing: -0.03em; }
.combo__text { max-width: 31rem; margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.28; color: rgba(255, 255, 255, 0.78); }
.combo__list { display: grid; gap: 0.6rem; margin-top: 1.5rem; font: 500 1rem/1.3 var(--f-ui); }
.combo__list li { display: flex; align-items: center; gap: 0.7rem; }
.combo__list li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.combo__card .btn { margin-top: 2rem; }

/* Het plusje tussen de twee: een oranje rondje dat meedraait (combo.js) */
.combo__plus {
	position: relative;
	align-self: start;
	width: var(--plus);
	aspect-ratio: 1;
	/* Precies op halve beeldhoogte: kolombreedte x 1,15 (beeldverhouding 4:4,6) / 2 */
	margin-top: 14rem;
	margin-top: calc((100cqw - var(--plus) - 2 * var(--gap)) * 0.2875 - var(--plus) / 2);
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-white);
}
.combo__plus span { position: absolute; left: 50%; top: 50%; width: 38%; height: 2px; margin: -1px 0 0 -19%; background: currentColor; border-radius: 2px; }
.combo__plus span + span { transform: rotate(90deg); }

.combo__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	margin-top: clamp(3.5rem, 6vw, 5.5rem);
	font: 500 1.0625rem/1.4 var(--f-ui);
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
}
.combo__note svg { width: 1.4rem; height: 1.23rem; flex: none; fill: var(--c-accent); }

@media (max-width: 767px) {
	.combo__head { justify-items: start; text-align: left; }
	.combo__grid { grid-template-columns: 1fr; row-gap: 0; }
	.combo__plus { justify-self: center; margin: 2.5rem 0; }
	.combo__note { justify-content: flex-start; text-align: left; align-items: flex-start; }
}

/* =========================================================
   Zakelijk: resultaten (rollende cijfers, stats.js)
   ========================================================= */

.stats { position: relative; overflow: hidden; padding: var(--section-y) 0; }
.stats__head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 2rem clamp(2rem, 6vw, 6rem);
	align-items: end;
}
.stats__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); color: var(--c-accent); }
.stats__kicker svg { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.stats__title { margin-top: 1rem; font: 500 var(--fs-display)/1.04 var(--f-ui); letter-spacing: -0.02em; }
.stats__lead { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.3; }

.stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3rem clamp(1.25rem, 2.6vw, 2.75rem);
	margin-top: clamp(3.5rem, 7vw, 6.5rem);
}
.stat { position: relative; padding-top: clamp(1.25rem, 2vw, 1.75rem); }
.stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: currentColor;
	opacity: 0.28;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1.5s var(--ease-athley);
}
.stat.is-in::before { transform: none; }
html:not(.js-intro) .stat::before { transform: none; }
.stat__num {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font: 500 clamp(3.25rem, 1.6rem + 4.6vw, 7rem)/1 var(--f-ui);
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}
.stat__pre { font: 500 clamp(1rem, 0.8rem + 0.5vw, 1.375rem)/1 var(--f-ui); letter-spacing: 0; }
.stat__label { max-width: 17rem; margin-top: 1rem; font-size: 1rem; line-height: 1.35; opacity: 0.72; }

.odo { display: inline-flex; }
.odo__col { display: inline-block; height: 1em; overflow: hidden; }
.odo__reel { display: block; will-change: transform; }
.odo__reel > span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo__char { display: inline-block; color: var(--c-accent); }

@media (max-width: 1024px) {
	.stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.stats__head { grid-template-columns: 1fr; }
	.stats__grid { gap: 2.5rem 1.25rem; }
	.stat__label { font-size: 0.9375rem; }
}

/* =========================================================
   Zakelijk: aanpak in stappen die op elkaar stapelen (steps.js)
   ========================================================= */

/* overflow: clip (niet hidden), anders werkt sticky niet */
.steps { position: relative; overflow: clip; padding: var(--section-y) 0 calc(var(--section-y) * 1.2); }
.steps__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.steps__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font: 900 0.875rem/1 var(--f-ui); color: var(--c-accent); }
.steps__kicker svg { width: 1.1rem; height: 0.97rem; fill: currentColor; }
.steps__title { margin-top: 1rem; font: 500 var(--fs-display)/1.04 var(--f-ui); letter-spacing: -0.02em; }
.steps__lead { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.3; }

.steps__list { margin-top: clamp(3rem, 6vw, 5rem); counter-reset: none; }
.step {
	position: sticky;
	top: calc(clamp(1.5rem, 6vh, 4rem) + var(--i, 0) * 1.25rem);
}
.step + .step { margin-top: 14vh; }
.step--cream { --step-bg: var(--c-cream); --step-fg: var(--c-black); --step-num: var(--c-accent); }
.step--black { --step-bg: var(--c-black); --step-fg: var(--c-white); --step-num: var(--c-accent); }
.step--accent { --step-bg: var(--c-accent); --step-fg: var(--c-white); --step-num: var(--c-black); }
.step__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	min-height: min(76vh, 40rem);
	padding: clamp(1.75rem, 3.6vw, 3.5rem);
	background: var(--step-bg);
	color: var(--step-fg);
	transform-origin: 50% 0;
	will-change: transform;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 Q50 5 100 1.2 V100 Q50 96.2 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 Q50 5 100 1.2 V100 Q50 96.2 0 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.step__inner::after { content: ""; position: absolute; inset: 0; background: var(--c-black); opacity: var(--step-dim, 0); pointer-events: none; }
.step__body { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding-top: 1.5rem; }
.step__num { font: 500 clamp(4.5rem, 2rem + 8vw, 10rem)/0.85 var(--f-ui); letter-spacing: -0.05em; color: var(--step-num); }
.step__title { font: 500 clamp(1.875rem, 1.2rem + 2vw, 3.25rem)/1.05 var(--f-ui); letter-spacing: -0.02em; }
.step__text { max-width: 32rem; margin-top: 1.1rem; font-size: var(--fs-lead); line-height: 1.3; opacity: 0.8; }
.step__media { position: relative; overflow: hidden; min-height: 16rem; }
.step__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
	.steps__head { grid-template-columns: 1fr; }
	.step__inner { grid-template-columns: 1fr; min-height: 0; }
	.step__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
	.step__body { padding-top: 0; gap: 1.5rem; }
	.step + .step { margin-top: 8vh; }
}

/* ---------- Eén uitgelichte ervaring (zakelijk) ---------- */
.quotes--single .quote { visibility: visible; }
.quotes--single .quote__text { font-size: clamp(1.75rem, 1.1rem + 2vw, 3.125rem); line-height: 1.18; letter-spacing: -0.01em; }