/* =========================================================
   GD Verhuizen - app.css
   Tokens staan in style.css (:root). Maten uit Figma (1512px canvas)
   omgezet naar rem/clamp. Interactiepatronen naar athley-v2.
   ========================================================= */

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

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
	background: var(--c-white);
	color: var(--c-black);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

::selection { background: var(--c-yellow); color: var(--c-black); }

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

/* Geen focusranden (keuze van de klant). Velden tonen focus met hun eigen gele lijn. */
*:focus, *:focus-visible { outline: none !important; }

.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 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--c-black); color: var(--c-white);
	font: 900 var(--fs-small)/1 var(--f-ui);
	text-decoration: none;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}
.skip-link:focus-visible { clip-path: none; opacity: 1; pointer-events: auto; }

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

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

.richtext > * + * { margin-top: 1em; }
.richtext a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 0.3s ease; }
.richtext a:hover { text-decoration-color: var(--c-yellow); }
/* Opsommingen in de huisstijl: een geel rondje met vinkje, genummerd een geel
   rondje met het cijfer. Geldt voor alle lopende tekst (artikelen, vragen,
   blokken). */
.richtext ul, .richtext ol { list-style: none; padding-left: 0; }
.richtext ol { counter-reset: gd-li; }
.richtext li { position: relative; padding-left: 2em; }
.richtext li + li { margin-top: 0.55em; }
.richtext ul > li::before,
.richtext ol > li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.12em;
	width: 1.35em; height: 1.35em;
	border-radius: 50%;
	background: var(--c-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.8 3.8 7.2-8' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.richtext ol > li { counter-increment: gd-li; }
.richtext ol > li::before {
	content: counter(gd-li);
	display: grid;
	place-items: center;
	background-image: none;
	font: 900 0.72em/1 var(--f-ui);
	color: var(--c-black);
	width: 1.9em; height: 1.9em;
	top: 0.08em;
}
.richtext ol > li { padding-left: 2.1em; }
.richtext li > ul, .richtext li > ol { margin-top: 0.55em; }

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

/* ---------- Eigen scrollbar ---------- */
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: var(--radius-pill);
	background: var(--c-black);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
	will-change: transform;
	transition: width 0.4s var(--ease-gd);
}
.scrollbar.is-active { opacity: 1; }
.scrollbar.is-empty, html.menu-open .scrollbar, html.panel-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; }
}

/* ---------- Boog (Arc Scroll Transition) ---------- */
.arc-scroll-transition {
	position: absolute; inset: 0 0 auto 0;
	height: min(100%, 70vh);
	z-index: 2;
	pointer-events: none;
	color: var(--c-white);
}
[data-arc-scroll-transition] svg { display: block; width: 100%; height: 100%; }
/* Onderaan een donker blok: wit komt met de boog van onderen omhoog, geen harde lijn */
.arc-scroll-transition--bottom { inset: auto 0 0 0; height: clamp(4.5rem, 9vw, 8rem); }
[data-arc-scroll-transition] path { fill: currentColor; }

/* =========================================================
   Knoppen
   Pil uit Figma (50px hoog, Satoshi Black 14). Hover: een boog vult de knop
   van onderen (zelfde vorm als de transities) en het label rolt door.
   ========================================================= */

.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

.btn {
	text-transform: lowercase; /* huisregel: knopteksten altijd in kleine letters */
	--btn-bg: var(--c-yellow);
	--btn-fg: var(--c-black);
	--btn-line: var(--c-yellow);
	--btn-fill: var(--c-yellow-dark);
	--btn-fg-hover: var(--c-black);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 1px solid var(--btn-line);
	border-radius: var(--radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font: 900 var(--fs-small)/1 var(--f-ui);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	transition: color 0.4s ease 0.08s, border-color 0.4s ease, background-color 0.2s ease;
	-webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: afgeronde clip bij transform */
}
button.btn { -webkit-appearance: none; appearance: none; }
.btn--donker { --btn-bg: var(--c-black); --btn-fg: var(--c-white); --btn-line: var(--c-black); --btn-fill: var(--c-yellow); --btn-fg-hover: var(--c-black); }
.btn--omlijnd { --btn-bg: transparent; --btn-fg: var(--c-black); --btn-line: var(--c-black); --btn-fill: var(--c-black); --btn-fg-hover: var(--c-white); }
.btn--omlijnd.btn--on-dark { --btn-bg: transparent; --btn-fg: var(--c-white); --btn-line: rgba(255, 255, 255, 0.5); --btn-fill: var(--c-white); --btn-fg-hover: var(--c-black); }

.btn__fill {
	position: absolute;
	left: -15%; right: -15%;
	top: 100%;
	height: 260%;
	z-index: -1;
	border-radius: 50% 50% 0 0 / 34% 34% 0 0;
	background: var(--btn-fill);
	transform: translate3d(0, 0, 0);
	transition: transform 0.75s var(--ease-gd), border-radius 0.75s var(--ease-gd);
}
.btn__label { position: relative; display: block; overflow: hidden; padding-block: 0.2em; margin-block: -0.2em; }
.btn__text { display: block; transition: transform 0.6s var(--ease-gd); }
.btn__text + .btn__text { position: absolute; inset: 0.2em 0 0; transform: translateY(160%); }

@media (hover: hover) {
	.btn:hover { color: var(--btn-fg-hover); border-color: var(--btn-fill); background-color: var(--btn-fill); transition-delay: 0.08s, 0s, 0.45s; }
	.btn:hover .btn__fill { transform: translate3d(0, -62%, 0); border-radius: 0; }
	.btn:hover .btn__text:first-child { transform: translateY(-160%); }
	.btn:hover .btn__text + .btn__text { transform: translateY(0); }
}
.btn:active { transform: scale(0.97); }

/* Bezig (formulier versturen): label weg, drie stippen springen */
.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn__label { opacity: 0; }
.btn.is-busy::after {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 0.375rem; height: 0.375rem;
	margin: -0.1875rem 0 0 -0.1875rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: -0.75rem 0 0 currentColor, 0.75rem 0 0 currentColor;
	animation: btn-dots 0.9s ease-in-out infinite;
}
@keyframes btn-dots {
	0%, 100% { box-shadow: -0.75rem 0 0 currentColor, 0.75rem 0 0 currentColor; transform: translateY(0); }
	50% { box-shadow: -0.75rem -0.25rem 0 currentColor, 0.75rem 0.25rem 0 currentColor; transform: translateY(-0.15rem); }
}

/* Pil in de header (menu, taal): transparant met zwarte rand, vult zwart bij hover */
.pill {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 1px solid var(--c-black);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-black);
	font: 900 var(--fs-small)/1 var(--f-ui);
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.4s ease 0.06s;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.pill::before {
	content: "";
	position: absolute; left: -15%; right: -15%; top: 100%;
	height: 260%;
	z-index: -1;
	border-radius: 50% 50% 0 0 / 34% 34% 0 0;
	background: var(--c-black);
	transition: transform 0.75s var(--ease-gd), border-radius 0.75s var(--ease-gd);
}
.pill__label { position: relative; display: grid; overflow: hidden; padding-block: 0.2em; margin-block: -0.2em; }
.pill__label > span { grid-area: 1 / 1; display: block; text-align: center; transition: transform 0.65s var(--ease-gd); }
.pill__label > span + span { transform: translateY(160%); }
@media (hover: hover) {
	.pill:hover { color: var(--c-white); }
	.pill:hover::before { transform: translateY(-62%); border-radius: 0; }
}
/* Menu open: "menu" rolt naar "sluiten", de pil wordt zwart */
.pill[aria-expanded="true"] { color: var(--c-white); }
.pill[aria-expanded="true"]::before { transform: translateY(-62%); border-radius: 0; }
.site-header__menu[aria-expanded="true"] .pill__label > span:first-child { transform: translateY(-160%); }
.site-header__menu[aria-expanded="true"] .pill__label > span + span { transform: translateY(0); }
/* Taalknop: de code rolt één keer door bij hover */
@media (hover: hover) {
	.site-header__lang:hover .pill__label > span:first-child { transform: translateY(-160%); }
	.site-header__lang:hover .pill__label > span + span { transform: translateY(0); }
}

/* Ronde knop (sliderpijlen, Figma 58 x 50) */
.round-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.625rem;
	height: var(--btn-h);
	padding: 0;
	border: 1px solid var(--c-yellow);
	border-radius: var(--radius-pill);
	background: var(--c-yellow);
	color: var(--c-black);
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.35s ease 0.05s, border-color 0.35s ease;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.round-btn .icon { width: 1.5rem; height: 1.5rem; transition: transform 0.5s var(--ease-out); }
@media (hover: hover) {
	.round-btn { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
	.round-btn:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-yellow); }
	.round-btn[data-next]:hover .icon { transform: translate(3px, -3px); }
	.round-btn[data-prev]:hover .icon { transform: translate(-3px, 3px); }
}
.round-btn:active { transform: scale(0.95); }

/* =========================================================
   Topbar (Figma 1:3 - 1:9)
   ========================================================= */

.topbar {
	position: relative;
	z-index: 30;
	display: grid;
	grid-template-rows: 1fr; /* staat meteen open: de header begint zo op zijn definitieve plek */
	background: var(--c-black);
	color: var(--c-white);
}
.topbar__inner { min-height: 0; overflow: hidden; }
.topbar__inner > .topbar__link { opacity: 0; transition: opacity 0.6s ease 0.2s; }
html.topbar-open .topbar__link, html.no-js .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 var(--fs-body)/1.3 var(--f-ui);
	text-decoration: none;
	text-align: center;
}
.topbar__text { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-gd); }
a.topbar__link:hover .topbar__text { background-size: 100% 1px; }
.topbar__avatar { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; flex: none; }
.topbar__go {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.25rem; height: 1.25rem;
	margin-left: -0.3125rem; /* Figma: 5px tussen foto en pijl */
	border: 1px solid var(--c-yellow);
	border-radius: 50%;
	color: var(--c-white);
	transition: background-color 0.4s ease, color 0.4s ease, transform 0.6s var(--ease-spin);
}
.topbar__go::after {
	content: "";
	position: absolute; inset: -1px;
	border-radius: 50%;
	border: 1px solid var(--c-yellow);
	animation: ring-pulse 3.2s ease-out infinite;
	pointer-events: none;
}
.topbar__go svg { width: 0.625rem; height: 0.625rem; }
a.topbar__link:hover .topbar__go { background: var(--c-yellow); color: var(--c-black); transform: rotate(45deg); }
@keyframes ring-pulse { 0%, 55% { transform: scale(1); opacity: 0; } 60% { opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }

/* =========================================================
   Header (Figma 1:12 - 1:462)
   ========================================================= */

.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	pointer-events: none;
	transition: transform 0.75s var(--ease-gd);
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--header-top) - 1rem)); }
html.menu-open .site-header, html.lang-open .site-header { transform: none; }

.site-header__inner {
	position: relative;
	transform: translate3d(0, var(--header-top), 0);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--gutter-header) var(--gutter-header) 0.75rem;
}
.site-header__inner > * { pointer-events: auto; }

.site-header__menu { justify-self: start; }
.site-header__logo { justify-self: center; display: block; line-height: 0; transition: transform 0.6s var(--ease-gd); }
.site-header__logo-img { width: 10.25rem; height: auto; } /* 164 */
.site-header__logo-text { font: 900 1.25rem/1 var(--f-ui); }
/* Boven een donker blok: logo en pillen worden wit (nav.js zet .is-on-dark) */
.site-header__logo { position: relative; translate: 0 0; transition: transform 0.6s var(--ease-gd), translate 0.9s var(--ease-spin); }
.site-header__logo.is-shifted { translate: var(--logo-shift, 0px) 0; }
.site-header__logo-img { transition: opacity 0.35s ease; }
.site-header__logo-img--licht { position: absolute; inset: 0; opacity: 0; }
.site-header__logo.is-on-dark .site-header__logo-img:not(.site-header__logo-img--licht) { opacity: 0; }
.site-header__logo.is-on-dark .site-header__logo-img--licht { opacity: 1; }
.pill { transition: color 0.4s ease 0.06s, border-color 0.35s ease; }
.pill.is-on-dark { border-color: var(--c-white); color: var(--c-white); }
.pill.is-on-dark::before { background: var(--c-white); }
@media (hover: hover) { .pill.is-on-dark:hover { color: var(--c-black); } }
html.menu-open .pill.is-on-dark, html.lang-open .pill.is-on-dark { border-color: var(--c-black); color: var(--c-black); }
html.menu-open .pill.is-on-dark::before, html.lang-open .pill.is-on-dark::before { background: var(--c-black); }
html.menu-open .pill.is-on-dark[aria-expanded="true"], html.lang-open .pill.is-on-dark[aria-expanded="true"] { color: var(--c-white); }
html.menu-open .site-header__logo.is-on-dark .site-header__logo-img:not(.site-header__logo-img--licht), html.lang-open .site-header__logo.is-on-dark .site-header__logo-img:not(.site-header__logo-img--licht) { opacity: 1; }
html.menu-open .site-header__logo.is-on-dark .site-header__logo-img--licht, html.lang-open .site-header__logo.is-on-dark .site-header__logo-img--licht { opacity: 0; }
@media (hover: hover) { .site-header__logo:hover { transform: scale(1.04) rotate(-1.5deg); } }
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.site-header__ctas { display: contents; }
.site-header__lang { min-width: 4.8125rem; } /* 77 */
/* Menu open (geel vlak): de gele headerknop wordt zwart */
html.menu-open .site-header__cta { --btn-bg: var(--c-black); --btn-fg: var(--c-white); --btn-line: var(--c-black); --btn-fill: var(--c-white); --btn-fg-hover: var(--c-black); }

/* =========================================================
   Takeover-menu (naar athley-v2, in geel)
   ========================================================= */

.menu {
	position: fixed;
	inset: var(--header-top) 0 auto 0;
	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-yellow);
	opacity: 0;
	pointer-events: none;
}
.menu.is-covered::before { opacity: 1; }
.menu__arc { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-yellow); }

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

.menu__link {
	display: inline-flex;
	align-items: center;
	padding: 0.06em 0;
	border: 0;
	background: none;
	color: inherit;
	font: 500 var(--fs-menu)/1.05 var(--f-display);
	letter-spacing: -0.02em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.45s ease;
	-webkit-appearance: none;
	appearance: none;
}
.menu__label { position: relative; display: inline-block; text-transform: lowercase; }
.menu__link { position: relative; }

@media (hover: hover) {
	.menu__list:hover .menu__link { opacity: 0.35; }
	.menu__list .menu__link:hover, .menu__list .menu__toggle[aria-expanded="true"] { opacity: 1; }
}

/* Rollende letters */
.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__toggle { gap: 0.4em; }
.menu__plus {
	position: relative;
	flex: none;
	width: 0.55em; height: 0.55em;
	max-width: 2.75rem; max-height: 2.75rem;
	border: 1px solid var(--c-black);
	border-radius: 50%;
	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-gd), background-color 0.4s ease;
}
.menu__plus span + span { transform: translate(-50%, -50%) rotate(90deg); }
@media (hover: hover) { .menu__toggle:hover .menu__plus { transform: rotate(90deg); } }
.menu__toggle[aria-expanded="true"] .menu__plus { background: var(--c-black); }
.menu__toggle[aria-expanded="true"] .menu__plus span { background: var(--c-yellow); }
.menu__toggle[aria-expanded="true"] .menu__plus span + span { transform: translate(-50%, -50%) rotate(0deg); }
.menu__sub { overflow: hidden; }
.menu__sub-list { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.9rem 0 1rem; }
.menu__sub-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: var(--radius-pill);
	font: 900 0.9375rem/1 var(--f-ui);
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.menu__sub-link:hover, .menu__sub-link[aria-current="page"] { background: var(--c-black); border-color: var(--c-black); color: var(--c-yellow); }

/* Rechterkolom: beeldpodium + contact */
.menu__aside { display: grid; gap: 1.5rem; padding-bottom: 0.6rem; }
.menu__stage { display: none; }
.menu__stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.menu__stage-img.is-default { opacity: 1; }
@media (hover: hover) and (min-width: 1025px) {
	.menu__stage {
		position: relative;
		display: block;
		width: 100%;
		aspect-ratio: 16 / 10;
		max-height: 30vh;
		border-radius: 50% 50% 1.5rem 1.5rem / 30% 30% 1.5rem 1.5rem; /* boog bovenin */
		overflow: hidden;
		background: rgba(0, 0, 0, 0.08);
	}
	.menu__stage:not(:has(img)) { display: none; }
}
.menu__kicker { margin-bottom: 0.9rem; font: 900 0.8125rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.menu__contact-list { display: grid; gap: 0.5rem; }
.menu__contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font: 500 1.125rem/1.3 var(--f-display);
	text-decoration: none;
}
.menu__contact-list .icon { width: 1.25rem; height: 1.25rem; flex: none; transition: transform 0.6s var(--ease-spin); }
.menu__contact-list span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-gd); }
.menu__contact-list a:hover span { background-size: 100% 1px; }
.menu__contact-list a:hover .icon { transform: rotate(-12deg) scale(1.1); }
.menu__cta { display: none; margin-top: 1.5rem; }
.menu__badge { align-self: center; margin-left: 0.6em; padding: 0.45em 0.8em; border-radius: var(--radius-pill); background: var(--c-black); color: var(--c-yellow); font: 900 0.75rem/1 var(--f-ui); letter-spacing: 0; white-space: nowrap; transform: translateY(0.12em); } /* optisch midden van de kleine letters */
.menu__card { padding: 1.5rem; border-radius: 1.5rem; background: rgba(0, 0, 0, 0.06); }
.menu__card-title { font: 500 1.25rem/1.25 var(--f-display); }
.menu__card-text { margin: 0.4rem 0 1.1rem; font-size: 0.9375rem; color: rgba(0, 0, 0, 0.7); }
.menu__regios { font-size: 0.875rem; line-height: 1.6; color: rgba(0, 0, 0, 0.7); }
.menu__regios span { font-weight: 500; color: var(--c-black); }
.menu__regios a { text-decoration: none; }
.menu__regios a:hover { text-decoration: underline; }

/* =========================================================
   Taalkeuze: geel kaartje dat vanuit de taalknop opengaat
   ========================================================= */

.site-header__langwrap { position: relative; }
.lang {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 5;
	width: min(23rem, calc(100vw - 2rem));
	padding: 1.25rem;
	border-radius: 1.5rem;
	background: var(--c-yellow);
	color: var(--c-black);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
	visibility: hidden;
	clip-path: circle(0% at calc(100% - 2.4rem) 0%);
}
.lang.is-open { visibility: visible; clip-path: circle(150% at calc(100% - 2.4rem) 0%); }
html.no-js .site-header__langwrap:focus-within .lang { visibility: visible; clip-path: none; }
.lang__title { margin: 0 0 0.9rem 0.35rem; font: 900 0.75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.lang__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.lang__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.875rem;
	padding: 0 0.85rem 0 0.4rem;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease;
}
.lang__code {
	display: inline-flex; align-items: center; justify-content: center;
	flex: none;
	width: 2.125rem; height: 2.125rem;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	font: 900 0.6875rem/1 var(--f-ui);
	letter-spacing: 0.03em;
	transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.6s var(--ease-spin);
}
.lang__name { font: 500 0.9375rem/1.2 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang__link.is-current { background: var(--c-black); color: var(--c-yellow); }
.lang__link.is-current .lang__code { border-color: var(--c-yellow); background: var(--c-yellow); color: var(--c-black); }
@media (hover: hover) {
	.lang__link:not(.is-current):hover { background: rgba(0, 0, 0, 0.08); }
	.lang__link:hover .lang__code { transform: rotate(-12deg); border-color: var(--c-black); }
}
@media (max-width: 767px) {
	.lang { position: fixed; top: 4.25rem; right: 1rem; left: 1rem; /* fixed binnen de getransformeerde header: relatief aan de header */ width: auto; clip-path: circle(0% at calc(100% - 2rem) 0%); }
	.lang.is-open { clip-path: circle(150% at calc(100% - 2rem) 0%); }
}

/* =========================================================
   Secties
   ========================================================= */

.section { position: relative; }
.section--marge-klein { --section-y: clamp(3rem, 5vw, 5rem); }
.section--marge-geen { --section-y: 0px; }
.section--bg-geel { background: var(--c-yellow); }
.section--content { padding-block: calc(var(--section-y) + 6rem) var(--section-y); }
.page-title { font: 500 clamp(2rem, 1.4rem + 1.8vw, 3rem)/1.1 var(--f-display); margin-bottom: 2rem; }

/* =========================================================
   Hero (Figma 1:444 + 1:445)
   ========================================================= */

.hero { padding: calc(var(--btn-h) + var(--gutter-header) + clamp(2.5rem, 4.6vw, 4.375rem)) 0 clamp(2.5rem, 4.8vw, 4.5625rem); } /* onder: 73 */
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 40rem) minmax(0, 40rem); /* tekstkolom iets breder dan Figma (558): ruimte voor een grotere kop */
	justify-content: space-between;
	align-items: center;
	gap: 3rem;
	padding-inline: var(--gutter) clamp(1.25rem, 4.6vw, 4.375rem); /* 91 / 70 */
	max-width: calc(94.5rem);
	margin-inline: auto;
}
.hero__title {
	font: 500 clamp(1.625rem, 1.1rem + 2vw, 2.125rem)/1.24 var(--f-display); /* 26 mobiel, 34 desktop */
	letter-spacing: -0.01em;
}
/* Elke regel in een masker; regel 1 breekt nooit af (hero-map.js schaalt de kop) */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__line--1 { white-space: nowrap; }
.hero__line-in { display: inline-block; }
.hero__lead { max-width: 27.4375rem; margin-top: 1.875rem; } /* 439, gap 30 */
.hero__btns { margin-top: 1.875rem; }

/* Roulerende plaatsnaam */
.hero__nb { white-space: nowrap; }
.regio-word { position: relative; display: inline-block; white-space: nowrap; }
.regio-word__link { text-decoration: none; color: inherit; display: inline-block; transition: opacity 0.3s ease; }
.regio-word__link:hover { opacity: 0.6; }
.regio-word__inner { position: relative; display: inline-block; vertical-align: bottom; clip-path: inset(-10% 0 -30% 0); }
.regio-word.is-ready .regio-word__inner { transition: none; }
.regio-word__ghost { visibility: hidden; display: block; width: max-content; }
.regio-word__item { position: absolute; left: 0; top: 0; white-space: nowrap; }
.regio-word:not(.is-ready) .regio-word__item { position: static; }
.regio-word:not(.is-ready) .regio-word__inner { clip-path: none; }

/* USP's naast het schildje */
.usp { display: flex; align-items: center; gap: 0.9375rem; margin-top: 3.125rem; } /* gap 15, boven 50 */
.usp__icon { flex: none; width: 1.147rem; height: 1.25rem; color: var(--c-black); }
.usp__icon .icon { width: 100%; height: 100%; overflow: visible; }
.usp__list { display: grid; overflow: hidden; padding-block: 0.15em; }
.usp__item { grid-area: 1 / 1; white-space: nowrap; }
html.js .usp__item:not(.is-active) { visibility: hidden; }
.usp__item a { text-underline-offset: 0.2em; }

/* Visual: kaart + ronde foto */
.hero__visual { position: relative; aspect-ratio: 683 / 584; }
.map { position: relative; width: 66.6%; }
.hero__visual .map { position: absolute; left: 0; top: 0; }
.map__svg { width: 100%; height: auto; overflow: visible; }
.map__dot { fill: var(--c-dot); transition: fill 0.6s ease; }
.map__dot.is-hot { fill: var(--c-yellow); }
.map.is-pointing { cursor: pointer; }
.hero__photo {
	position: absolute;
	right: 0; bottom: 0;
	width: 58%; /* 396 van 683 */
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--c-dot);
	will-change: transform, clip-path;
}
.hero__photo-img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Reviews (Figma 1:447 - 1:493)
   ========================================================= */

.reviews {
	display: grid;
	grid-template-columns: 50% 50%;
	margin-bottom: var(--section-y);
}
.reviews__panel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(36rem, 61.64vw, 62rem); /* 932 bij 1512 */
	padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6.55vw, 6.1875rem); /* links 99 */
	color: var(--c-black);
	isolation: isolate;
}
.reviews__panel-bg { position: absolute; inset: 0; z-index: -1; background: var(--c-yellow); }
html.js:not(.is-static) .reviews__panel-bg { clip-path: inset(0 100% 0 0); }
.reviews--zwart .reviews__panel { color: var(--c-white); }
.reviews--zwart .reviews__panel-bg { background: var(--c-black); }
.reviews__collection { width: 100%; max-width: 34.875rem; } /* 558 */
.reviews__list { display: grid; width: 100%; position: relative; }
.reviews__item {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	opacity: 0;
	visibility: hidden;
}
.reviews__item.is--active { opacity: 1; visibility: visible; }
.reviews__avatar { width: 3.75rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 1.875rem; } /* 60, gap 30 */
.reviews__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.reviews__quote { margin: 0; font: 500 var(--fs-title)/1.27 var(--f-display); letter-spacing: -0.005em; }
.reviews__name { margin-top: 1.875rem; font: 300 var(--fs-lead)/1.25 var(--f-display); }
.text-line { padding-bottom: 0.12em; margin-bottom: -0.12em; }

.reviews__side { padding: clamp(3rem, 6.6vw, 6.25rem) var(--gutter) 2rem clamp(1.5rem, 6.6vw, 6.25rem); } /* 100 */
.reviews__sticky { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 2rem); max-width: 27.4375rem; }
.reviews__google { width: 1.875rem; height: 1.875rem; margin-bottom: 1.25rem; }
.reviews__title { font: 500 var(--fs-title)/1.27 var(--f-display); }
.reviews__text { margin-top: 0.9375rem; }
.reviews__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9375rem; margin-top: 1.875rem; }
.reviews__controls .btn { margin-left: 0.9375rem; }

/* =========================================================
   Formulierblok + Gravity Forms
   ========================================================= */

.formblock { padding-block: calc(var(--section-y) + 4rem) var(--section-y); }
.section--formulier.section--bg-geel .formblock__card { box-shadow: none; }
.formblock__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.formblock__title { font: 500 var(--fs-title)/1.27 var(--f-display); } /* zelfde schaal als de andere bloktitels */
.formblock__text { margin-top: 1.25rem; max-width: 30rem; }
.formblock__contact { display: grid; gap: 1rem; margin-top: 2.5rem; }
.formblock__contact a { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; }
.formblock__contact small { display: block; font: 900 0.75rem/1.4 var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-mute); }
.formblock__contact a > span:last-child { font: 500 1.125rem/1.3 var(--f-display); }
.formblock__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3.125rem; height: 3.125rem;
	border-radius: 50%;
	background: var(--c-yellow);
	transition: transform 0.6s var(--ease-spin), background-color 0.4s ease, color 0.4s ease;
}
.formblock__icon .icon { width: 1.25rem; height: 1.25rem; }
.formblock__contact a:hover .formblock__icon { transform: rotate(-12deg) scale(1.08); background: var(--c-black); color: var(--c-yellow); }
.formblock__card {
	padding: clamp(1.5rem, 3.5vw, 3rem);
	border-radius: 2rem;
	background: var(--c-white);
	box-shadow: 0 0 0 1px var(--c-line), 0 30px 60px -30px rgba(0, 0, 0, 0.18);
}

.gform_wrapper fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.gform_wrapper legend.gfield_label { float: left; width: 100%; padding: 0; margin-bottom: 0.6rem; }
.gform_wrapper legend.gfield_label + * { clear: both; }
.gform_wrapper .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.6rem 1.25rem; }
.gform_wrapper .gfield { grid-column: span 12; position: relative; min-width: 0; }
.gform_wrapper .gfield--width-half { grid-column: span 6; }
.gform_wrapper .gfield--width-third { grid-column: span 4; }
.gform_wrapper .gfield_label, .gform_wrapper .gfield .gform-field-label--type-sub { display: block; margin-bottom: 0.4rem; font: 900 0.8125rem/1.3 var(--f-ui); }
.gform_wrapper .gfield_required { margin-left: 0.2em; color: var(--c-mute); font-weight: 500; }
.gform_wrapper .gfield_required_text { font-size: 0; }
.gform_wrapper .gfield_required_text::after { content: "*"; font-size: 0.8125rem; }
.gform_wrapper .gfield_description { margin-top: 0.45rem; font-size: 0.875rem; color: var(--c-mute); }
.gform_wrapper .gform_required_legend { display: none; }
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="date"], .gform_wrapper input[type="url"], .gform_wrapper textarea, .gform_wrapper select {
	width: 100%;
	padding: 0.55rem 0 0.65rem;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 0;
	background: transparent;
	color: var(--c-black);
	font: 300 1.125rem/1.35 var(--f-display);
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}
.gform_wrapper textarea { height: 7.5rem; min-height: 4.5rem; resize: vertical; }
.gform_wrapper select { padding-right: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 1.1rem no-repeat; cursor: pointer; }

/* Zwevend label + lijn die van links volloopt (forms.js) */
.gform_wrapper .gd-field { padding-top: 1.1rem; }
.gform_wrapper .gd-field .gfield_label {
	position: absolute;
	left: 0; top: 1.75rem;
	margin: 0;
	font: 300 1.125rem/1.35 var(--f-display);
	color: rgba(0, 0, 0, 0.55);
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform 0.6s var(--ease-gd), color 0.4s ease, font-weight 0s 0.2s;
	z-index: 1;
}
.gform_wrapper .gd-field.is-focused .gfield_label, .gform_wrapper .gd-field.is-filled .gfield_label, .gform_wrapper .gd-field--select .gfield_label {
	transform: translateY(-1.55rem) scale(0.72);
	color: var(--c-black);
	font-weight: 500;
}
.gform_wrapper .gd-field .ginput_container { position: relative; }
.gd-field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.gd-field__line::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--c-yellow);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.8s var(--ease-gd);
}
.gform_wrapper .gd-field.is-focused .gd-field__line::after { transform: scaleX(1); }
.gform_wrapper .gd-field textarea ~ .gd-field__line { bottom: 0.35rem; }

/* Keuzes als pillen (radio/checkbox) */
.gform_wrapper .gfield_radio, .gform_wrapper .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gform_wrapper .gchoice { position: relative; }
.gform_wrapper .gchoice input { position: absolute; opacity: 0; pointer-events: none; }
.gform_wrapper .gchoice label {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0 1.15rem;
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: var(--radius-pill);
	font: 500 0.9375rem/1.2 var(--f-ui);
	cursor: pointer;
	transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.gform_wrapper .gchoice label:hover { border-color: var(--c-black); }
.gform_wrapper .gchoice input:checked + label { background: var(--c-yellow); border-color: var(--c-yellow); }
.gform_wrapper .gfield--type-consent .ginput_container_consent { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.45; }
.gform_wrapper .gfield--type-consent label { cursor: pointer; }
.gform_wrapper .gfield--type-consent label a { color: inherit; text-underline-offset: 0.2em; }
/* Eigen vinkvak: omlijnd, geel met vinkje als het aan staat */
.gform_wrapper .gfield--type-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 1.375rem; height: 1.375rem;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 0.4rem;
	background: transparent center / 0 no-repeat;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, background-size 0.5s var(--ease-spin);
}
.gform_wrapper .gfield--type-consent input[type="checkbox"]:hover { border-color: currentColor; }
.gform_wrapper .gfield--type-consent input[type="checkbox"]:checked {
	border-color: var(--c-yellow);
	background-color: var(--c-yellow);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 80%;
}
.gform_wrapper .gfield_error.gfield--type-consent input[type="checkbox"]:not(:checked) { border-color: var(--c-error); }

/* Fouten */
.gform_wrapper .gform_submission_error { margin-bottom: 1.5rem; padding: 0.9rem 1.1rem; border-radius: 1rem; background: rgba(212, 53, 28, 0.08); color: var(--c-error); font: 500 0.9375rem/1.4 var(--f-ui); }
.gform_wrapper .gfield_error .gd-field__line::after { background: var(--c-error); transform: scaleX(1); }
.gform_wrapper .gfield_error.is-fixed .gd-field__line::after { background: var(--c-yellow); }
.gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { margin-top: 0.45rem; font: 500 0.8125rem/1.35 var(--f-ui); color: var(--c-error); }
.gform_wrapper .gfield_error.is-fixed .validation_message { display: none; }
.gform_wrapper .gform_validation_errors { display: none; }
.gform_wrapper .gform_footer { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.gform_wrapper .gform_ajax_spinner { display: none; }
.gform_confirmation_message { font: 500 var(--fs-title)/1.3 var(--f-display); }
/* Bedankt: geel rondje met vinkje dat zich tekent, daarna wat er nu gebeurt */
.gform_confirmation_message:has(.gd-done) { font: inherit; }
.gd-done__mark { display: block; width: 4.5rem; height: 4.5rem; margin-bottom: 1.5rem; }
.gd-done__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gd-done__mark circle { fill: var(--c-yellow); }
.gd-done__mark path { fill: none; stroke: var(--c-black); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gd-done__title { font: 500 var(--fs-title)/1.2 var(--f-display); letter-spacing: -0.01em; }
.gd-done__text { margin-top: 0.75rem; font-size: var(--fs-lead); line-height: 1.4; opacity: 0.75; }
.gd-done__steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: gd-done; }
.gd-done__steps li {
	counter-increment: gd-done;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: start;
	padding: 1rem 1.1rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 1.25rem;
	font: 500 0.9375rem/1.4 var(--f-ui);
}
.gd-done__steps li::before {
	content: counter(gd-done);
	grid-row: span 2;
	display: grid; place-items: center;
	width: 2.25rem; height: 2.25rem;
	border-radius: 50%;
	background: var(--c-yellow);
	color: var(--c-black);
	font: 900 0.875rem/1 var(--f-ui);
}
.gd-done__steps strong { display: block; font-weight: 900; }
.gd-done__steps span { opacity: 0.7; }
.gform_wrapper .gfield--type-honeypot, .gform_wrapper .gform_validation_container { display: none !important; }

/* =========================================================
   Inhoudsblokken (niet in Figma; in de stijl van hero en reviews)
   ========================================================= */

.section--diensten, .section--stappen, .section--over_ons, .section--zekerheden, .section--faq { padding-block: var(--section-y); }
/* Blok bovenaan een pagina (geen hero): ruimte voor de header */
.site-main > .section--over_ons:first-child, .site-main > .section--over_ons:first-of-type, .site-main > .gd-hidden-block:first-child .section--over_ons { padding-top: calc(var(--btn-h) + var(--gutter-header) + var(--section-y)); }
.blockhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27.4375rem); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.blockhead--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.blockhead__title { font: 500 var(--fs-title)/1.27 var(--f-display); letter-spacing: -0.005em; max-width: 24ch; } /* zelfde schaal als de hero-kop (30) */
.blockhead__text { color: var(--c-mute); }
.blockfoot { margin-top: 2.5rem; }

/* ---------- Diensten: grote titels, foto volgt de cursor (Osmo-stijl) ---------- */
.diensten { position: relative; }
.diensten__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.diensten__side, .faq__side { align-self: stretch; } /* volle hoogte: ruimte om sticky te blijven */
.diensten__sticky { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 1rem); }
.diensten__intro { margin-top: 0.9375rem; max-width: 27.4375rem; }
.diensten__btns { margin-top: 1.875rem; }
.diensten__list { border-top: 1px solid var(--c-line); }
.diensten__item { border-bottom: 1px solid var(--c-line); }
.diensten__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.75rem;
	gap: 1.5rem;
	align-items: center;
	padding: 1.5rem 0;
	text-decoration: none;
	transition: opacity 0.5s ease;
}
.diensten__thumb { display: none; }
.diensten__body { display: grid; gap: 0.35rem; }
.diensten__title { margin: 0; font: 500 1.5rem/1.2 var(--f-display); letter-spacing: -0.005em; }
.diensten__title-in { display: inline-block; transition: transform 0.8s var(--ease-gd); }
.diensten__text { max-width: 30rem; color: var(--c-mute); }
.diensten__go { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-black); border-radius: 50%; transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease-gd); }
.diensten__go .icon { width: 1.125rem; height: 1.125rem; transition: transform 0.5s var(--ease-out); }
@media (hover: hover) {
	.diensten__list:hover .diensten__link { opacity: 0.3; }
	.diensten__list .diensten__link:hover { opacity: 1; }
	.diensten__link:hover .diensten__title-in { transform: translateX(0.4rem); }
	.diensten__link:hover .diensten__go { background: var(--c-yellow); border-color: var(--c-yellow); transform: rotate(45deg); }
}

/* De volgfoto: zweeft boven de lijst, volgt de cursor */
.diensten__follow {
	position: fixed;
	left: 0; top: 0;
	z-index: 40;
	width: clamp(13rem, 17vw, 19rem);
	aspect-ratio: 4 / 5;
	pointer-events: none;
	visibility: hidden;
	will-change: transform;
}
.diensten__follow-inner {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
	border-radius: 50% 50% 1.25rem 1.25rem / 30% 30% 1.25rem 1.25rem;
	background: var(--c-yellow);
	opacity: 0;
	transform: scale(0.5);
}
.diensten__follow-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) {
	.diensten__follow { display: none; }
	.diensten__link { grid-template-columns: 4.5rem minmax(0, 1fr) 2.75rem; gap: 1.1rem; }
	.diensten__thumb { display: block; width: 4.5rem; aspect-ratio: 1; border-radius: 50% 50% 0.75rem 0.75rem / 40% 40% 0.75rem 0.75rem; overflow: hidden; }
	.diensten__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.diensten__title { font-size: 1.25rem; }
}

/* ---------- Prijsindicatie: woningtype kiezen, stippen tekenen het gebouw ---------- */
.prijzen { position: relative; padding-block: calc(var(--section-y) + 2.5rem) var(--section-y); overflow: hidden; }
.prijzen--donker { padding-bottom: calc(var(--section-y) + 2.5rem); }
.prijzen--donker { background: var(--c-black); color: var(--c-white); }
.prijzen--donker .arc-scroll-transition { color: var(--c-white); }
.prijzen__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.prijzen__lead { margin-top: 0.9375rem; max-width: 27.4375rem; }
.prijzen--donker .prijzen__lead, .prijzen--donker .prijzen__note { color: rgba(255, 255, 255, 0.65); }
.prijzen__tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.prijzen__tab {
	display: inline-flex; align-items: center; gap: 0.65rem;
	min-height: 3.5rem;
	padding: 0 1.4rem 0 1.1rem;
	border: 1px solid rgba(127, 127, 127, 0.45);
	border-radius: var(--radius-pill);
	background: transparent;
	color: inherit;
	font: 900 0.9375rem/1.1 var(--f-ui);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, transform 0.6s var(--ease-gd);
	-webkit-appearance: none; appearance: none;
}
.prijzen__house { width: 1.35rem; height: 1.35rem; flex: none; overflow: visible; transition: transform 0.7s var(--ease-spin); }
.prijzen__house-line, .prijzen__house-door { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.prijzen__house-fill { fill: currentColor; }
/* Het huisje loopt van onder vol zodra je het kiest */
.prijzen__house-level { transform: translateY(100%); transition: transform 0.7s var(--ease-gd); }
.prijzen__tab[aria-selected="true"] .prijzen__house-level { transform: translateY(0); }
.prijzen__tab[aria-selected="true"] .prijzen__house-door { stroke: var(--c-yellow); }
.prijzen__tab[aria-selected="true"] .prijzen__house { transform: translateY(-1px) scale(1.08); }
@media (hover: hover) { .prijzen__tab:hover .prijzen__house { transform: rotate(-8deg); } .prijzen__tab[aria-selected="true"]:hover .prijzen__house { transform: translateY(-1px) scale(1.08); } }
.prijzen__tab[aria-selected="true"] { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-black); }
@media (hover: hover) { .prijzen__tab:hover { border-color: var(--c-yellow); transform: translateY(-2px); } }
.prijzen__note { margin-top: 2rem; max-width: 30rem; }
.prijzen__btns { margin-top: 1.5rem; }

.prijzen__stage { position: relative; display: grid; gap: 2rem; justify-items: center; }
.prijzen__dots { width: 100%; max-width: 30rem; }
.prijzen__dots svg { width: 100%; height: auto; overflow: visible; }
.prijzen__dots circle { fill: rgba(255, 255, 255, 0.1); transition: fill 0.5s ease; }
.prijzen:not(.prijzen--donker) .prijzen__dots circle { fill: var(--c-dot); }
.prijzen__dots circle.is-on { fill: var(--c-yellow); }
.prijzen__readout { text-align: center; }
.prijzen__type { font: 900 0.875rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.prijzen__price { display: flex; align-items: baseline; justify-content: center; gap: 0.75rem; margin-top: 0.8rem; }
.prijzen__from { font: 900 0.875rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.prijzen__amount { display: inline-block; font: 500 clamp(2.5rem, 1.8rem + 2.2vw, 4rem)/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.prijzen--donker .prijzen__amount { color: var(--c-yellow); }
.prijzen__amount.is-ask { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.75rem); }

/* ---------- Stappen: horizontale scroll met een busje op een stippenweg ---------- */
.stappen { position: relative; overflow: hidden; background: var(--c-white); }
.stappen__track { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); padding: var(--section-y) var(--gutter) calc(var(--section-y) + 4rem); }
.stappen.is-horizontal { height: 100vh; height: 100dvh; }
.stappen.is-horizontal .stappen__track { height: 100%; width: max-content; padding-block: 6rem 13rem; will-change: transform; }
.stappen__intro { flex: none; width: min(30rem, 40vw); }
.stappen__heading { font: 500 var(--fs-title)/1.27 var(--f-display); letter-spacing: -0.005em; }
.stappen__lead { margin-top: 0.9375rem; max-width: 24rem; color: var(--c-mute); }
.stappen__list { display: flex; gap: clamp(1.25rem, 3vw, 3rem); }
.stappen__panel { flex: none; width: min(28rem, 64vw); }
.stappen__card {
	position: relative;
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: min(22rem, 46vh);
	padding: clamp(1.75rem, 3vw, 2.75rem);
	border-radius: 2rem;
	background: #f6f6f4;
	transform-origin: 0% 100%;
	transition: background-color 0.6s ease;
}
.stappen__nr { font: 500 clamp(3rem, 2.2rem + 2.4vw, 4.5rem)/0.9 var(--f-display); letter-spacing: -0.04em; color: var(--c-black); }
.stappen__panel.is-active .stappen__card { background: var(--c-yellow); }
.stappen__title { margin: 2rem 0 0.5rem; font: 500 1.5rem/1.2 var(--f-display); }
.stappen__text { max-width: 24rem; color: var(--c-mute); }
.stappen__panel.is-active .stappen__text { color: rgba(0, 0, 0, 0.72); }

.stappen__road { display: none; }
.stappen.is-horizontal .stappen__road { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 8.5rem; height: 2.5rem; } /* boven de sticky balk */
.stappen__dots { position: absolute; left: 0; right: 0; top: 50%; height: 0.375rem; margin-top: -0.1875rem; background: radial-gradient(circle, var(--c-dot) 2px, transparent 2.5px) 0 50% / 0.75rem 0.375rem repeat-x; }
.stappen__dots--on { background-image: radial-gradient(circle, var(--c-yellow) 2px, transparent 2.5px); clip-path: inset(0 100% 0 0); }
.stappen__stop { position: absolute; top: 50%; width: 0.875rem; height: 0.875rem; margin: -0.4375rem 0 0 -0.4375rem; border-radius: 50%; background: var(--c-dot); transition: background-color 0.4s ease, transform 0.6s var(--ease-spin); }
.stappen__stop.is-on { background: var(--c-yellow); transform: scale(1.5); }
.stappen__bus { position: absolute; top: 50%; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: var(--c-black); color: var(--c-yellow); z-index: 2; }
.stappen__bus .icon { width: 1.5rem; height: 1.5rem; animation: bus-bob 0.6s ease-in-out infinite alternate; }
@keyframes bus-bob { to { transform: translateY(-1.5px); } }

/* ---------- Tekst met foto ---------- */
.over__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.over--links .over__media { order: -1; }
.over__body { margin-top: 1.875rem; max-width: 27.4375rem; }
.over__btns { margin-top: 2rem; }
.over__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	max-height: 80vh;
	overflow: hidden;
	border-radius: 50% 50% 1.5rem 1.5rem / 30% 30% 1.5rem 1.5rem;
}
.over__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Zekerheden ---------- */
.zeker__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.zeker__card {
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	border-radius: 1.75rem;
	background: #f6f6f4;
	transition: transform 0.7s var(--ease-gd), background-color 0.5s ease;
}
.zeker__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-yellow); transition: transform 0.9s var(--ease-spin); }
.zeker__icon .icon { width: 1.5rem; height: 1.5rem; }
.zeker__icon .icon--shield { width: 1.15rem; height: 1.25rem; }
.zeker__title { margin: 1.5rem 0 0.4rem; font: 500 1.25rem/1.25 var(--f-display); }
.zeker__text { color: var(--c-mute); }
@media (hover: hover) {
	.zeker__card:hover { transform: translateY(-0.4rem); background: #f0efe9; }
	.zeker__card:hover .zeker__icon { transform: rotate(-14deg) scale(1.08); }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.faq__sticky { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 1rem); }
.faq__intro { margin-top: 0.9375rem; max-width: 27.4375rem; color: var(--c-mute); }
.faq__btns { margin-top: 1.875rem; }
.faq__contact { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.25rem; padding: 1.25rem; border-radius: 1.5rem; background: #f6f6f4; max-width: 27.4375rem; }
.faq__contact-photo { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; }
.faq__contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.faq__contact-title { font: 500 1.125rem/1.3 var(--f-display); }
.faq__contact-text { margin-top: 0.3rem; font-size: 0.9375rem; color: var(--c-mute); }
.faq__contact-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.faq__contact-links a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0 1rem 0 0.8rem; border-radius: var(--radius-pill); background: var(--c-white); font: 900 0.8125rem/1 var(--f-ui); text-decoration: none; transition: background-color 0.35s ease, transform 0.5s var(--ease-gd); }
.faq__contact-links .icon { width: 1.1rem; height: 1.1rem; }
.faq__contact-links a:hover { background: var(--c-yellow); transform: translateY(-2px); }
.faq__kennis { margin-top: 2rem; max-width: 27.4375rem; }
.faq__kennis-title { margin-bottom: 0.6rem; font: 900 0.75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.faq__kennis ul { border-top: 1px solid var(--c-line); }
.faq__kennis li { border-bottom: 1px solid var(--c-line); }
.faq__kennis a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; font-size: 0.9375rem; text-decoration: none; }
.faq__kennis .icon { flex: none; width: 1rem; height: 1rem; transition: transform 0.5s var(--ease-out); }
.faq__kennis a:hover span { text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.faq__kennis a:hover .icon { transform: translate(2px, -2px); }
.faq__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.faq__tab { min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: transparent; color: inherit; font: 900 0.875rem/1 var(--f-ui); cursor: pointer; transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; -webkit-appearance: none; appearance: none; }
.faq__tab:hover { border-color: var(--c-black); }
.faq__tab[aria-pressed="true"] { background: var(--c-black); border-color: var(--c-black); color: var(--c-yellow); }
.faq__list { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q-text { margin: 0; font: 500 1.125rem/1.35 var(--f-display); transition: transform 0.6s var(--ease-gd); }
.faq__plus { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-black); border-radius: 50%; transition: transform 0.75s var(--ease-spin), background-color 0.4s ease, border-color 0.4s ease; }
.faq__plus span { position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 1px; margin-left: -0.45rem; background: currentColor; transition: transform 0.6s var(--ease-gd); }
.faq__plus span + span { transform: rotate(90deg); }
.faq__item.is-open .faq__plus, .faq__item[open]:not(.is-open) .faq__plus { background: var(--c-yellow); border-color: var(--c-yellow); }
.faq__item.is-open .faq__plus span + span { transform: rotate(0deg); }
@media (hover: hover) {
	.faq__q:hover .faq__q-text { transform: translateX(0.35rem); }
	.faq__item:not(.is-open) .faq__q:hover .faq__plus { transform: rotate(90deg); }
}
.faq__a { overflow: hidden; }
.faq__a-inner { padding: 0 3.5rem 1.6rem 0; color: var(--c-mute); }

/* ---------- Afsluitende oproep: kaartje met ronde foto en draaiende tekst ---------- */
.cta { position: relative; padding-block: var(--section-y); }
/* Laatste blok van de pagina: weinig ruimte onderin, de footer sluit aan */
.site-main > .section:last-child, .site-main > .gd-hidden-block:last-child > .section { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.site-main > .reviews:last-child { margin-bottom: 0; }
.cta__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: clamp(2rem, 5vw, 4.5rem);
	border-radius: 2rem;
	background: var(--c-yellow);
	overflow: hidden;
}
.cta--zwart .cta__card { background: var(--c-black); color: var(--c-white); }
.cta__title { max-width: 22ch; font: 500 var(--fs-title)/1.27 var(--f-display); letter-spacing: -0.005em; }
.cta__text { margin-top: 0.9375rem; max-width: 27.4375rem; }
.cta__btns { margin-top: 1.875rem; }
.cta__visual { position: relative; width: clamp(12rem, 20vw, 17rem); aspect-ratio: 1; }
.cta__photo { position: absolute; inset: 14%; margin: 0; border-radius: 50%; overflow: hidden; }
.cta__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-gd); }
.cta__card:hover .cta__img { transform: scale(1.06); }
.cta__badge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: cta-spin 22s linear infinite; }
.cta__badge text { fill: currentColor; font: 900 13px/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.12em; }
@keyframes cta-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
	.cta__card { grid-template-columns: minmax(0, 1fr); }
	.cta__visual { width: 11rem; order: -1; }
}
/* Oproep als laatste blok: footer sluit direct aan, de boog komt in de kleur van de oproep */


@media (max-width: 1024px) {
	.prijzen__grid, .over__grid, .faq__grid, .diensten__grid { grid-template-columns: minmax(0, 1fr); }
	.diensten__sticky { position: static; }
	.over--links .over__media { order: 0; }
	.faq__sticky { position: static; }
}
@media (max-width: 767px) {
	.blockhead { grid-template-columns: minmax(0, 1fr); }
	/* Stappen op mobiel: swipe-band met snap */
	.stappen__track { flex-direction: column; align-items: stretch; padding-bottom: var(--section-y); }
	.stappen__intro { width: auto; }
	.stappen__list { margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
	.stappen__list::-webkit-scrollbar { display: none; }
	.stappen__panel { width: 82vw; scroll-snap-align: start; }
	.stappen__card { min-height: 20rem; }
	.stappen__panel:first-child .stappen__card { background: var(--c-yellow); }
	.prijzen__tabs { margin-top: 1.75rem; }
	.prijzen__tab { min-height: 3rem; }
	.faq__a-inner { padding-right: 0; }
}

/* =========================================================
   Kenniscentrum
   ========================================================= */

.kc-hero { padding: calc(var(--btn-h) + var(--gutter-header) + clamp(3rem, 6vw, 5rem)) 0 clamp(2rem, 4vw, 3rem); }
.kc-hero__kicker { margin-bottom: 0.75rem; font: 900 0.8125rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.kc-hero__kicker a { text-decoration: none; }
.kc-hero__title { font: 500 var(--fs-title)/1.27 var(--f-display); }
.kc-hero__intro { margin-top: 0.9375rem; max-width: 34rem; color: var(--c-mute); }
.kc-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.kc-topic { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font: 900 0.875rem/1 var(--f-ui); text-decoration: none; transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
.kc-topic__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.06); font-size: 0.6875rem; }
.kc-topic:hover { border-color: var(--c-black); }
.kc-topic.is-active { background: var(--c-black); border-color: var(--c-black); color: var(--c-yellow); }
.kc-topic.is-active .kc-topic__count { background: var(--c-yellow); color: var(--c-black); }
.kc-list { padding-bottom: var(--section-y); }
.kc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); }
.kc-empty { color: var(--c-mute); }

.kcard__link { display: grid; gap: 1rem; text-decoration: none; }
.kcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 50% 50% 1.25rem 1.25rem / 22% 22% 1.25rem 1.25rem; background: #f6f6f4; }
.kcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-gd); }
.kcard__placeholder { position: absolute; inset: 0; background: radial-gradient(circle, var(--c-dot) 4px, transparent 4.5px) 0 0 / 1.25rem 1.25rem; }
.kcard__body { position: relative; display: grid; gap: 0.5rem; padding-right: 3.5rem; }
.kcard__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font: 900 0.75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; }
.kcard__time { color: var(--c-mute); }
.kcard__title { margin: 0; font: 500 1.25rem/1.25 var(--f-display); }
.kcard__excerpt { color: var(--c-mute); }
.kcard__go { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-black); border-radius: 50%; transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease-gd); }
.kcard__go .icon { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) {
	.kcard__link:hover .kcard__img { transform: scale(1.05); }
	.kcard__link:hover .kcard__go { background: var(--c-yellow); border-color: var(--c-yellow); transform: rotate(45deg); }
}
.kcard--groot { grid-column: 1 / -1; }
.kcard[hidden] { display: none; }
.kcard:not(.kcard--groot) .kcard__excerpt { display: none; }
.kcard--groot .kcard__link { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.kcard--groot .kcard__media { aspect-ratio: 16 / 10; }
.kcard--groot .kcard__title { font-size: var(--fs-title); line-height: 1.2; }

.nav-links { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font: 900 0.875rem/1 var(--f-ui); text-decoration: none; }
.nav-links .page-numbers.current { background: var(--c-black); border-color: var(--c-black); color: var(--c-yellow); }
.nav-links .icon { width: 1rem; height: 1rem; }

.kc-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 3px; pointer-events: none; }
.kc-progress span { display: block; height: 100%; background: var(--c-yellow); transform: scaleX(0); transform-origin: 0 50%; }
.kc-article__head { padding-top: calc(var(--btn-h) + var(--gutter-header) + clamp(3rem, 6vw, 5rem)); max-width: calc(48rem + var(--gutter) * 2); }
.kc-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font: 900 0.75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; }
.kc-article__meta a { text-decoration: none; }
.kc-article__meta a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kc-article__time { margin-left: auto; color: var(--c-mute); }
.kc-article__title { margin-top: 1rem; font: 500 clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem)/1.15 var(--f-display); letter-spacing: -0.01em; }
.kc-article__lead { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--c-mute); }
.kc-article__media { margin-top: clamp(2rem, 4vw, 3rem); }
.kc-article__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 50% 50% 1.5rem 1.5rem / 18% 18% 1.5rem 1.5rem; }
.kc-article__grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 44rem); justify-content: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-y); }
.kc-article__grid:not(:has(.kc-toc)) { grid-template-columns: minmax(0, 44rem); }
.kc-toc { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 1rem); align-self: start; }
.kc-toc__title { margin-bottom: 0.9rem; font: 900 0.75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.kc-toc__list { display: grid; gap: 0.15rem; border-left: 1px solid var(--c-line); }
.kc-toc__list a { position: relative; display: block; padding: 0.4rem 0 0.4rem 1rem; color: var(--c-mute); font-size: 0.9375rem; text-decoration: none; transition: color 0.3s ease; }
.kc-toc__list a::before { content: ""; position: absolute; left: -1px; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--c-yellow); transform: scaleY(0); transition: transform 0.5s var(--ease-gd); }
.kc-toc__list a:hover, .kc-toc__list a.is-active { color: var(--c-black); }
.kc-toc__list a.is-active::before { transform: scaleY(1); }
.kc-article__body { font-size: 1.0625rem; line-height: 1.65; }
.kc-article__body > * + * { margin-top: 1.1em; }
.kc-article__body h2 { margin-top: 2.2em; font: 500 1.5rem/1.25 var(--f-display); scroll-margin-top: 7rem; }
.kc-article__body h3 { margin-top: 1.8em; font: 500 1.1875rem/1.3 var(--f-display); }
.kc-article__body ul, .kc-article__body ol { padding: 0.25em 0 0.25em; }
.kc-article__body blockquote { padding: 1.25rem 1.5rem; border-radius: 1.25rem; background: #f6f6f4; font-size: var(--fs-lead); }
.kc-article__body a { text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; }
.kc-related { padding-block: 0 var(--section-y); }
.kc-related__title { margin-bottom: 2rem; }
.kc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.kc-grid, .kc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kcard--groot .kcard__link { grid-template-columns: minmax(0, 1fr); }
	.kc-article__grid { grid-template-columns: minmax(0, 1fr); }
	.kc-toc { position: static; }
}
@media (max-width: 767px) {
	.kc-grid, .kc-grid--3 { grid-template-columns: minmax(0, 1fr); }
	.kc-article__img { aspect-ratio: 4 / 3; }
	.kc-article__time { margin-left: 0; width: 100%; }
}

/* =========================================================
   Formulierpaneel (naar het Shift-paneel van athley-v2):
   zwart, valt met een boog van boven over de pagina
   ========================================================= */

.panel {
	position: fixed;
	inset: 0 0 auto 0;
	height: 100vh;
	height: 100dvh;
	z-index: 90;
	visibility: hidden;
	color: var(--c-white);
}
.panel.is-open { visibility: visible; }
.panel::before {
	content: "";
	position: fixed; left: 0; right: 0; top: 0;
	height: 100lvh;
	background: var(--c-black);
	opacity: 0;
	pointer-events: none;
}
.panel.is-covered::before { opacity: 1; }
.panel__arc { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-black); }
.panel__close {
	position: absolute;
	top: var(--gutter-header); right: var(--gutter-header);
	z-index: 2;
	width: var(--btn-h); height: var(--btn-h);
	padding: 0;
	border: 1px solid var(--c-yellow);
	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;
}
.panel__close span { position: absolute; left: 50%; top: 50%; width: 1.125rem; height: 1px; margin-left: -0.5625rem; background: currentColor; transform: rotate(45deg); }
.panel__close span + span { transform: rotate(-45deg); }
@media (hover: hover) { .panel__close:hover { transform: rotate(90deg); background: var(--c-yellow); color: var(--c-black); } }

.panel__inner {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 7rem);
	align-items: center;
	max-width: calc(var(--content) + var(--gutter) * 2);
	margin-inline: auto;
	padding: clamp(5rem, 10vh, 7rem) var(--gutter) clamp(2rem, 6vh, 4rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.panel__media {
	/* Blijft staan terwijl het formulier ernaast scrolt */
	position: sticky;
	top: 0;
	align-self: start;
	height: calc(100dvh - clamp(5rem, 10vh, 7rem) - clamp(2rem, 6vh, 4rem));
	min-height: 0;
	overflow: hidden;
	border-radius: 50% 50% 1.5rem 1.5rem / 22% 22% 1.5rem 1.5rem; /* boog bovenin, zoals in het menu */
}
.panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__body { align-self: center; max-width: 36rem; padding-bottom: 1rem; }
.panel__kicker { display: inline-flex; align-items: center; gap: 0.55rem; font: 900 0.875rem/1 var(--f-ui); color: var(--c-yellow); }
.panel__title { margin-top: 1rem; font: 500 clamp(1.75rem, min(1.2rem + 1.8vw, 5vh), 2.75rem)/1.1 var(--f-display); letter-spacing: -0.01em; }
.panel__intro { margin-top: 1rem; color: rgba(255, 255, 255, 0.7); font-size: var(--fs-lead); line-height: 1.35; }
.panel__form { margin-top: clamp(1.5rem, 3.5vh, 2.5rem); }

/* Formulier op zwart */
.panel .gform_wrapper input[type="text"], .panel .gform_wrapper input[type="email"], .panel .gform_wrapper input[type="tel"], .panel .gform_wrapper input[type="number"], .panel .gform_wrapper input[type="date"], .panel .gform_wrapper textarea, .panel .gform_wrapper select, .section--bg-zwart .gform_wrapper input[type="text"], .section--bg-zwart .gform_wrapper input[type="email"], .section--bg-zwart .gform_wrapper input[type="tel"], .section--bg-zwart .gform_wrapper input[type="number"], .section--bg-zwart .gform_wrapper input[type="date"], .section--bg-zwart .gform_wrapper textarea, .section--bg-zwart .gform_wrapper select { color: var(--c-white); border-bottom-color: rgba(255, 255, 255, 0.28); }
.panel .gform_wrapper select, .section--bg-zwart .gform_wrapper select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.panel .gform_wrapper select option, .section--bg-zwart .gform_wrapper select option { color: var(--c-black); }
.panel .gform_wrapper .gd-field .gfield_label, .section--bg-zwart .gform_wrapper .gd-field .gfield_label { color: rgba(255, 255, 255, 0.55); }
.panel .gform_wrapper .gd-field.is-focused .gfield_label, .panel .gform_wrapper .gd-field.is-filled .gfield_label, .panel .gform_wrapper .gd-field--select .gfield_label, .section--bg-zwart .gform_wrapper .gd-field.is-focused .gfield_label, .section--bg-zwart .gform_wrapper .gd-field.is-filled .gfield_label, .section--bg-zwart .gform_wrapper .gd-field--select .gfield_label { color: var(--c-yellow); }
.panel .gform_wrapper .gfield_required, .panel .gform_wrapper .gfield_description, .section--bg-zwart .gform_wrapper .gfield_required, .section--bg-zwart .gform_wrapper .gfield_description { color: rgba(255, 255, 255, 0.5); }
.panel .gform_wrapper .gchoice label, .section--bg-zwart .gform_wrapper .gchoice label { border-color: rgba(255, 255, 255, 0.3); }
.panel .gform_wrapper .gchoice label:hover, .section--bg-zwart .gform_wrapper .gchoice label:hover { border-color: var(--c-yellow); }
.panel .gform_wrapper .gchoice input:checked + label, .section--bg-zwart .gform_wrapper .gchoice input:checked + label { color: var(--c-black); }
.panel .gform_wrapper .gfield--type-consent input[type="checkbox"], .section--bg-zwart .gform_wrapper .gfield--type-consent input[type="checkbox"] { border-color: rgba(255, 255, 255, 0.4); }
.panel .gform_wrapper .gfield--type-consent input[type="checkbox"]:hover, .section--bg-zwart .gform_wrapper .gfield--type-consent input[type="checkbox"]:hover { border-color: var(--c-yellow); }
.panel .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked, .section--bg-zwart .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked { border-color: var(--c-yellow); }
.panel .gform_wrapper .gfield_validation_message, .panel .gform_wrapper .validation_message, .section--bg-zwart .gform_wrapper .gfield_validation_message, .section--bg-zwart .gform_wrapper .validation_message { color: #ff8a73; }
.panel .gform_wrapper .gform_submission_error, .section--bg-zwart .gform_wrapper .gform_submission_error { background: rgba(255, 138, 115, 0.12); color: #ff8a73; }
.panel .gform_wrapper .gfield_error .gd-field__line::after, .section--bg-zwart .gform_wrapper .gfield_error .gd-field__line::after { background: #ff8a73; }
.panel .gform_wrapper input:-webkit-autofill, .section--bg-zwart .gform_wrapper 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); }
.panel .gform_confirmation_message, .section--bg-zwart .gform_confirmation_message { color: var(--c-white); }

@media (max-width: 900px) {
	.panel__inner { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: calc(var(--gutter-header) + var(--btn-h) + 1.5rem); }
	.panel__media { display: none; }
}

/* =========================================================
   Verhuischeck 2.0
   ========================================================= */

/* Stappenbalk (Gravity Forms "steps") */
.gform_wrapper .gf_page_steps { display: flex; gap: 0.35rem; margin-bottom: 2rem; counter-reset: stap; }
.gform_wrapper .gf_step { position: relative; flex: 1; display: grid; gap: 0.55rem; font: 900 0.6875rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.45; transition: opacity 0.4s ease; }
.gform_wrapper .gf_step::before { content: ""; height: 4px; border-radius: 4px; background: currentColor; opacity: 0.25; transition: background-color 0.5s ease, opacity 0.5s ease; }
.gform_wrapper .gf_step_number { display: none; }
.gform_wrapper .gf_step_active, .gform_wrapper .gf_step_completed { opacity: 1; }
.gform_wrapper .gf_step_active::before, .gform_wrapper .gf_step_completed::before { background: var(--c-yellow); opacity: 1; }
.gform_wrapper .gf_step_clear { display: none; }
.check-step__title { margin: 0.5rem 0 -0.25rem; font: 500 1.25rem/1.25 var(--f-display); }

/* Vorige / volgende */
.gform_wrapper .gform_page_footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button {
	min-height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 1px solid var(--c-yellow);
	border-radius: var(--radius-pill);
	background: var(--c-yellow);
	color: var(--c-black);
	font: 900 var(--fs-small)/1 var(--f-ui);
	cursor: pointer;
	transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.6s var(--ease-gd);
	-webkit-appearance: none; appearance: none;
}
.gform_wrapper .gform_next_button:hover { background: var(--c-yellow-dark); border-color: var(--c-yellow-dark); }
.gform_wrapper :is(.gform_next_button, .gform_previous_button, .gform_button) { text-transform: lowercase; }
.gform_wrapper .gform_previous_button { order: -1; background: transparent; border-color: currentColor; color: inherit; }
.gform_wrapper .gform_previous_button:hover { background: rgba(127, 127, 127, 0.12); }
.gform_wrapper .gform_page_footer .gform_button { order: 2; }

/* Keuzepillen (gd-chips) met optioneel icoon */
.gform_wrapper .gchoice__icon { display: inline-flex; width: 1.25rem; height: 1.25rem; flex: none; }
.gform_wrapper .gchoice__icon svg { width: 100%; height: 100%; }
.gform_wrapper .gd-chips .gchoice__icon + * { margin-left: 0; }

/* Tegels met icoon (woningtype, hoeveelheid, extra's) */
.gform_wrapper .gd-tiles .gfield_radio, .gform_wrapper .gd-tiles .gfield_checkbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.gform_wrapper .gd-tiles--sm .gfield_radio, .gform_wrapper .gd-tiles--sm .gfield_checkbox { grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); }
.gform_wrapper .gd-tiles .gchoice label {
	display: grid;
	justify-items: start;
	align-content: space-between;
	gap: 1.1rem;
	min-height: 7.5rem;
	height: 100%;
	padding: 1rem;
	border-radius: 1.25rem;
	font: 900 0.875rem/1.2 var(--f-ui);
	transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.5s var(--ease-gd);
}
.gform_wrapper .gd-tiles--sm .gchoice label { min-height: 6rem; gap: 0.8rem; font-size: 0.8125rem; }
.gform_wrapper .gd-tiles .gchoice__icon { width: 2.25rem; height: 2.25rem; transition: transform 0.7s var(--ease-spin); }
.gform_wrapper .gd-tiles--sm .gchoice__icon { width: 1.75rem; height: 1.75rem; }
.gform_wrapper .gd-tiles .gchoice label:hover { transform: translateY(-2px); }
.gform_wrapper .gd-tiles .gchoice label:hover .gchoice__icon { transform: rotate(-8deg); }
.gform_wrapper .gd-tiles .gchoice input:checked + label .gchoice__icon { transform: scale(1.1); }

/* Adreskaartje onder postcode + huisnummer */
.check-addr { grid-column: 1 / -1; min-height: 0; font-size: 0.9375rem; }
.check-addr:empty { display: none; }
.check-addr.is-found, .check-addr.is-loading, .check-addr.is-none, .check-addr.is-error { display: flex; align-items: center; gap: 0.85rem; margin-top: -0.6rem; padding: 0.85rem 1rem; border-radius: 1rem; background: rgba(127, 127, 127, 0.1); }
.check-addr.is-found { background: rgba(255, 231, 0, 0.18); }
.check-addr__pin { flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--c-yellow); box-shadow: 0 0 0 4px rgba(255, 231, 0, 0.35); }
.check-addr__txt { display: grid; gap: 0.15rem; }
.check-addr__txt strong { font-weight: 500; }
.check-addr__facts { font-size: 0.8125rem; opacity: 0.7; }
.check-addr__dots { display: inline-flex; gap: 0.25rem; }
.check-addr__dots i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; animation: addr-dot 0.9s ease-in-out infinite; }
.check-addr__dots i:nth-child(2) { animation-delay: 0.15s; }
.check-addr__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes addr-dot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-3px); opacity: 1; } }

/* Uploadveld */
.gform_wrapper .gd-upload .gform_drop_area { display: grid; justify-items: center; gap: 0.75rem; padding: 1.75rem; border: 1px dashed rgba(127, 127, 127, 0.5); border-radius: 1.25rem; text-align: center; }
.gform_wrapper .gd-upload .gform_button_select_files { min-height: 2.75rem; padding: 0 1.25rem; border: 1px solid currentColor; border-radius: var(--radius-pill); background: transparent; color: inherit; font: 900 0.875rem/1 var(--f-ui); cursor: pointer; }
.gform_wrapper .ginput_preview { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.875rem; }

/* Datumkiezer (jQuery UI van Gravity Forms) */
#ui-datepicker-div { display: none; }
.ui-datepicker { z-index: 200 !important; padding: 0.75rem; border-radius: 1.25rem; background: var(--c-white); color: var(--c-black); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35); font: 500 0.875rem/1 var(--f-ui); }
.ui-datepicker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ui-datepicker-title { display: flex; gap: 0.35rem; }
.ui-datepicker-title select { border: 0; background: transparent; font: inherit; font-weight: 900; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; font-weight: 900; text-decoration: none; padding: 0.25rem 0.5rem; }
.ui-datepicker table { border-collapse: collapse; }
.ui-datepicker th { padding: 0.35rem; font-size: 0.6875rem; opacity: 0.5; }
.ui-datepicker td a { display: block; width: 2.25rem; line-height: 2.25rem; border-radius: 50%; text-align: center; text-decoration: none; }
.ui-datepicker td a:hover { background: rgba(0, 0, 0, 0.08); }
.ui-datepicker td .ui-state-active { background: var(--c-yellow); }

/* Verborgen velden en de tekenteller nemen geen ruimte in */
.gform_wrapper .gfield--type-hidden, .gform_wrapper .gform_hidden { display: none !important; }
.gform_wrapper .gd-pc .charleft, .gform_wrapper .gd-hn .charleft, .gform_wrapper .ginput_counter { display: none; }

/* Samenvattingskaartje */
.check-sum { margin-top: 2.5rem; padding: 1.5rem; border-radius: 1.75rem; background: #f6f6f4; }
/* Op de verhuischeck-pagina blijft de samenvatting in beeld terwijl je door de stappen gaat */
.formblock__intro:has(.check-sum) { align-self: stretch; }
.formblock__intro .check-sum { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 1rem); }
@media (max-width: 1024px) { .formblock__intro .check-sum { position: static; } }
.check-sum__kicker { font: 900 0.75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.check-sum__map { position: relative; width: 62%; margin: 1.25rem auto 0.5rem; }
.check-sum__map .map__svg { width: 100%; }
.check-sum__map .map__dot { transition: fill 0.4s ease, transform 0.5s var(--ease-spin); transform-box: fill-box; transform-origin: center; }
.check-sum__map .map__dot.is-van { fill: var(--c-yellow); transform: scale(1.6); }
.check-sum__map .map__dot.is-naar { fill: var(--c-black); transform: scale(1.6); }
.check-sum__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.check-sum__route path { fill: none; stroke: var(--c-black); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 10; }
.check-sum__km { text-align: center; font: 900 0.8125rem/1 var(--f-ui); }
.check-sum__list { margin: 1.25rem 0 0; display: grid; gap: 0.35rem; }
.check-sum__row { display: grid; gap: 0.2rem; padding: 0.6rem 0.75rem; border-radius: 0.85rem; }
.check-sum__row dt { font: 900 0.6875rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }
.check-sum__row dd { margin: 0; font-size: 0.9375rem; opacity: 0.45; }
.check-sum__row.is-filled dd { opacity: 1; }

/* In het zwarte paneel */
.panel__side { align-self: start; position: sticky; top: 0; }
.panel .check-sum { margin-top: 0; background: rgba(255, 255, 255, 0.06); }
.panel .check-sum__map .map__dot { fill: rgba(255, 255, 255, 0.12); }
.panel .check-sum__map .map__dot.is-naar { fill: var(--c-white); }
.panel .check-sum__map .map__dot.is-van { fill: var(--c-yellow); }
.panel .check-sum__route path { stroke: var(--c-yellow); }
.panel .check-addr.is-found { background: rgba(255, 231, 0, 0.14); }
.panel__body:has(.gd-done) .panel__intro { display: none; }
.panel .gd-done__steps li, .section--bg-zwart .gd-done__steps li { border-color: rgba(255, 255, 255, 0.16); }
.panel .gform_wrapper .ui-datepicker, .section--bg-zwart .gform_wrapper .ui-datepicker { color: var(--c-black); }
.check-done__title { font: 500 var(--fs-title)/1.25 var(--f-display); margin-bottom: 0.75rem; }

@media (max-width: 900px) {
	.panel__side { display: none; }
}
@media (max-width: 767px) {
	.gform_wrapper .gf_step { font-size: 0; gap: 0; }
	.gform_wrapper .gf_step_active { font-size: 0.6875rem; gap: 0.5rem; }
	.gform_wrapper .gd-tiles .gfield_radio, .gform_wrapper .gd-tiles .gfield_checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   404
   ========================================================= */

.section--404 { padding: calc(var(--section-y) + 5rem) 0 var(--section-y); }
.notfound { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 3rem; align-items: center; }
.notfound__code { font: 900 0.875rem/1 var(--f-ui); letter-spacing: 0.1em; margin-bottom: 1rem; }
.notfound__title { font: 500 clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem)/1.15 var(--f-display); max-width: 22ch; }
.notfound__lead { margin: 1.25rem 0 2rem; max-width: 30rem; }
.notfound__map { width: 100%; max-width: 28rem; justify-self: end; }
.notfound__map .map__dot { animation: dot-lost 5s ease-in-out infinite; }
.notfound__map .map__dot:nth-child(7n) { animation-delay: -1.3s; }
.notfound__map .map__dot:nth-child(5n) { animation-delay: -2.6s; }
.notfound__map .map__dot:nth-child(3n) { animation-delay: -3.9s; }
@keyframes dot-lost { 0%, 80%, 100% { fill: var(--c-dot); } 88% { fill: var(--c-yellow); } }

/* =========================================================
   Footer (niet in Figma; in huisstijl)
   ========================================================= */

.site-footer {
	position: relative;
	padding-top: clamp(5rem, 8vw, 7.5rem);
	background: var(--c-black);
	color: var(--c-white);
	overflow: hidden;
}
.site-footer__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.site-footer__statement { max-width: 40rem; font: 500 clamp(1.75rem, 1.1rem + 2vw, 3rem)/1.12 var(--f-display); letter-spacing: -0.01em; }
.site-footer__statement p + p { margin-top: 0.4em; }
.site-footer__statement strong { color: var(--c-yellow); font-weight: 500; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); padding-block: clamp(3rem, 5vw, 4.5rem); align-items: start; }
.site-footer__area { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.site-footer__map .map__svg { width: 100%; }
.site-footer__map.is-pointing { cursor: pointer; }
.site-footer__map .map__dot { fill: rgba(255, 255, 255, 0.12); transition: fill 0.5s ease; }
.site-footer__map .map__dot.is-hot { fill: var(--c-yellow); }
.site-footer__regios { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.15rem 2rem; }
.site-footer__regios a { display: inline-block; padding: 0.2rem 0; font: 500 clamp(1.125rem, 1rem + 0.4vw, 1.375rem)/1.3 var(--f-display); color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.35s ease; }
.site-footer__regios a:hover, .site-footer__regios a:focus-visible, .site-footer__regios a.is-active { color: var(--c-white); }
.site-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } /* snel naar en contact onder elkaar */

.site-footer__top-btn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: var(--c-yellow); color: var(--c-black); cursor: pointer; transition: transform 0.8s var(--ease-spin); }
.site-footer__top-btn .icon { width: 1.4rem; height: 1.4rem; transform: rotate(-90deg); }
.site-footer__top-btn:hover { transform: translateY(-4px); }
.site-footer__top-btn:hover .icon { animation: bus-up 0.8s var(--ease-gd); }
@keyframes bus-up { 0% { transform: rotate(-90deg) translateX(0); } 45% { transform: rotate(-90deg) translateX(140%); } 46% { transform: rotate(-90deg) translateX(-140%); } 100% { transform: rotate(-90deg) translateX(0); } }
@media (max-width: 1024px) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.site-footer__area { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.site-footer__map { width: min(88%, 22rem); margin-inline: auto; }
	.site-footer__regios { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
.site-footer__title { margin-bottom: 1rem; font: 900 1rem/1.2 var(--f-ui); color: var(--c-yellow); }
.site-footer__links { display: grid; gap: 0.55rem; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.3rem; margin-bottom: -0.3rem; text-decoration: none; color: rgba(255, 255, 255, 0.82); background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)) 0 100% / 0 1px no-repeat; transition: color 0.35s ease, background-size 0.6s var(--ease-gd); }
.site-footer__links a:hover { color: var(--c-white); background-size: 100% 1px; }
.site-footer .richtext a, .site-footer__statement a, .site-footer__legal a:hover { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; text-decoration-color: rgba(255, 255, 255, 0.45); }
.site-footer__links .icon { width: 1.125rem; height: 1.125rem; flex: none; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.75rem 2.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.site-footer__made { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.site-footer__im { display: inline-flex; align-items: center; gap: 0.55rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.35s ease; }
.site-footer__im svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform 0.6s var(--ease-spin); }
.site-footer__im strong { font-weight: 900; }
.site-footer__im:hover, .site-footer__im:focus-visible { color: var(--c-white); }
.site-footer__im:hover svg { transform: rotate(-8deg); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { color: var(--c-white); }
.site-footer__socials { display: flex; gap: 0.6rem; }
.site-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: var(--c-white); transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.6s var(--ease-spin); }
.site-footer__socials a:hover { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-black); transform: rotate(-10deg); }
.site-footer__socials .icon { width: 1.125rem; height: 1.125rem; }
.site-footer .arc-scroll-transition { color: var(--c-white); height: clamp(5rem, 8vw, 7.5rem); } /* nooit hoger dan de lege ruimte bovenin de footer */

/* =========================================================
   WhatsApp rechtsonder: alleen het groene rondje; bij hover klapt het uit
   tot een zwarte pil met tekst. Komt pas na de hero in beeld.
   ========================================================= */

.wa {
	position: fixed;
	right: max(1.25rem, env(safe-area-inset-right));
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 45;
	display: inline-flex;
	align-items: center;
	padding: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-white);
	text-decoration: none;
	transform: translateY(160%) scale(0.8);
	opacity: 0;
	transition: transform 0.8s var(--ease-spin), opacity 0.4s ease, padding 0.6s var(--ease-gd), background-color 0.4s ease;
}
.wa.is-visible { transform: none; opacity: 1; }
html.menu-open .wa, html.panel-open .wa, html.lang-open .wa { transform: translateY(160%) scale(0.8); opacity: 0; }
.wa__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45); }
.wa__icon .icon { width: 1.75rem; height: 1.75rem; color: var(--c-white); }
.wa__label { max-width: 0; overflow: hidden; white-space: nowrap; font: 900 0.875rem/1 var(--f-ui); opacity: 0; transition: max-width 0.6s var(--ease-gd), margin 0.6s var(--ease-gd), opacity 0.3s ease; }
@media (hover: hover) {
	.wa:hover { padding: 0.25rem 1.25rem 0.25rem 0.25rem; background: var(--c-black); }
	.wa:hover .wa__icon { box-shadow: none; }
	.wa:hover .wa__label { max-width: 14rem; margin-left: 0.8rem; opacity: 1; }
	.wa:hover .wa__icon .icon { animation: wa-wiggle 0.6s ease; }
}
@keyframes wa-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }

/* =========================================================
   Doek (intro + paginatransitie)
   ========================================================= */

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

/* ---------- Verborgen blok (alleen zichtbaar voor ingelogde redacteuren) ---------- */
.gd-hidden-block { position: relative; outline: 2px dashed var(--c-yellow); outline-offset: -2px; }
.gd-hidden-block__notice { position: relative; z-index: 5; padding: 0.6rem var(--gutter); background: var(--c-yellow); color: var(--c-black); font: 900 0.8125rem/1.3 var(--f-ui); text-align: center; }
.gd-hidden-block > .section { opacity: 0.6; }

/* ---------- Blokvoorbeeld in de admin: alles direct in eindstand ---------- */
html.is-static .hero { padding-top: 3rem; }

/* =========================================================
   Responsive
   ========================================================= */

@media (min-width: 1600px) {
	/* Alles staat in rem: de rem meeschalen houdt de compositie op grote schermen intact */
	html { font-size: clamp(16px, 1.0582vw, 21px); }
}

@media (max-width: 1180px) {
	.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem; }
}

@media (max-width: 1024px) {
	.menu__inner { grid-template-columns: 1fr; align-items: start; align-content: space-between; }
	.reviews__side { padding-left: clamp(1.5rem, 4vw, 3rem); }
	.formblock__grid { grid-template-columns: 1fr; }
	.notfound { grid-template-columns: 1fr; }
	.notfound__map { justify-self: start; }
}

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-inline: var(--gutter); }
	.hero__visual { width: min(100%, 34rem); margin-inline: auto; }

	/* Reviews: kop en tekst, dan het gele vlak, dan de bediening */
	.reviews { grid-template-columns: minmax(0, 1fr); }
	.reviews__side, .reviews__sticky { display: contents; }
	.reviews__google, .reviews__title, .reviews__text { margin-inline: var(--gutter); }
	.reviews__google { order: 1; }
	.reviews__title { order: 2; }
	.reviews__text { order: 3; margin-bottom: 2.5rem; }
	.reviews__panel { order: 4; min-height: 0; padding: 4.5rem var(--gutter) 3.5rem; }
	.reviews__controls { order: 5; margin: 1.5rem var(--gutter) 0; }
	}

@media (max-width: 767px) {
	:root { --topbar-h: 2.75rem; --btn-h: 2.875rem; --btn-px: 1.4rem; }
	.topbar__link { font-size: 0.8125rem; gap: 0.5rem; }

	.site-header__inner { padding: 0.75rem 1rem 0.6rem; gap: 0.5rem; }
	.site-header__logo-img { width: 7.5rem; }
	.site-header__cta { display: none; }
	.site-header__lang { min-width: 0; padding-inline: 1.1rem; }
	.menu__sub-list { gap: 0.5rem; }

	.hero { padding-top: calc(var(--btn-h) + 3.5rem); }
	/* Mobiel: de kop loopt gewoon door als één zin, zonder vaste regelovergangen */
	.hero__line, .hero__line-in { display: inline; overflow: visible; padding: 0; margin: 0; }
	.hero__line--1 { white-space: normal; }
	.hero__lead { margin-top: 1.125rem; }
	.hero__btns { gap: 0.75rem; }
	.usp { margin-top: 2.25rem; }
	.usp__item { white-space: normal; }

	.reviews__controls .btn { margin-left: 0; }
	.gform_wrapper .gfield--width-half, .gform_wrapper .gfield--width-third { grid-column: span 12; }
	.formblock__card { border-radius: 1.5rem; }
}

@media (max-width: 380px) {
	.site-header__logo-img { width: 6.25rem; }
	.pill { padding-inline: 1rem; }
}

/* ---------- Arabisch: lay-out blijft links-naar-rechts, de tekst zelf
   krijgt per alinea de juiste leesrichting (leestekens op de goede plek) ---------- */
html[lang="ar"] :is(h1, h2, h3, h4, p, li, dd, dt, blockquote, figcaption, .hero__line-in, .btn__text, .pill__label span, .menu__label, .usp__item) { unicode-bidi: plaintext; text-align: left; }
html[lang="ar"] :is(.btn__text, .pill__label span, .cta__inner, .stappen__item) { text-align: center; }

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

/* =========================================================
   Subpagina-blokken: paginakop, checklist, cijfers, contactopties, tekst
   ========================================================= */

.section--inbegrepen, .section--contactopties, .section--tekst { padding-block: var(--section-y); }
.site-main > .section--tekst:first-child { padding-top: calc(var(--btn-h) + var(--gutter-header) + var(--section-y)); }
.section--paginakop + .section--tekst { padding-top: clamp(1rem, 3vw, 2rem); }

/* ---------- Paginakop ---------- */
.pk { padding: calc(var(--btn-h) + var(--gutter-header) + clamp(2.5rem, 4.6vw, 4.375rem)) 0 clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
.pk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.pk--stippen .pk__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr); }
.pk__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem 0; list-style: none; margin: 0; padding: 0; font: 900 0.8125rem/1.3 var(--f-ui); }
.pk__crumbs li { display: inline-flex; align-items: center; }
.pk__crumbs li + li::before {
	content: "";
	width: 0.75rem; height: 0.75rem;
	margin: 0 0.5rem;
	background: currentColor;
	opacity: 0.35;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pk__crumbs a { position: relative; }
.pk__crumbs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-gd); }
.pk__crumbs a:hover::after { transform: scaleX(1); }
.pk__crumbs a { color: var(--c-mute); text-decoration: none; transition: color 0.3s ease; }
.pk__crumbs a:hover { color: var(--c-black); }
.pk__kicker { font: 900 0.8125rem/1.3 var(--f-ui); color: var(--c-mute); }
.pk__title { margin-top: 1.25rem; font: 500 clamp(1.625rem, 1.1rem + 2vw, 2.125rem)/1.24 var(--f-display); letter-spacing: -0.01em; max-width: 26ch; } /* zelfde schaal als de hero */
.pk__line { display: block; }
.pk__lead { margin-top: 1.125rem; max-width: 34rem; color: var(--c-mute); }
.pk__btns { margin-top: 2rem; }
.pk__points { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; font: 500 0.9375rem/1.3 var(--f-ui); }
.pk__points li { display: inline-flex; align-items: center; gap: 0.55rem; }
.pk__check { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--c-yellow); flex: none; }
.pk__check svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: var(--c-black); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.pk__visual { position: relative; display: grid; place-items: center; }
.dotfield { display: block; width: 100%; height: auto; overflow: visible; }
.dotfield__dot { fill: var(--c-dot); transform-box: fill-box; transform-origin: center; transition: fill 0.5s ease var(--d, 0ms), transform 0.45s var(--ease-spin); }
.dotfield__dot.is-near { transform: scale(1.45); }
.pk--stippen .pk__dots { cursor: crosshair; }
.dotfield__dot.is-hot { fill: var(--c-yellow); }
.dotfield__dot.is-ink { fill: var(--c-black); }
.pk--foto .pk__visual { justify-items: start; padding: 0 0 clamp(2rem, 4vw, 3.5rem) 0; }
.pk--foto .pk__dots { position: absolute; right: -4%; bottom: 0; width: 72%; height: auto; }
@media (max-width: 900px) { .pk--foto .pk__dots { right: -8%; width: 70%; } }
.pk__media {
	position: relative;
	z-index: 1;
	width: min(100%, 26rem);
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 50% 50% 1.5rem 1.5rem / 30% 30% 1.5rem 1.5rem; /* zelfde boog als menu en paneel */
}
.pk__img { width: 100%; height: 100%; object-fit: cover; }
.pk--stippen .pk__dots { width: min(100%, 30rem); }

/* ---------- Wat zit erbij: checklist die zichzelf afvinkt ---------- */
.inb__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); }
.inb__side { align-self: stretch; }
.inb__sticky { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 2rem); }
.inb__intro { margin-top: 1.25rem; max-width: 27rem; color: var(--c-mute); }
.inb__count { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; max-width: 20rem; }
.inb__count-num { font: 500 var(--fs-title)/1 var(--f-display); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.inb__count-bar { position: relative; flex: 1; height: 0.375rem; border-radius: var(--radius-pill); background: var(--c-dot); overflow: hidden; }
.inb__count-bar span { position: absolute; inset: 0; background: var(--c-yellow); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(1); transition: transform 0.6s var(--ease-gd); }
.inb__btns { margin-top: 2rem; }
.inb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.inb__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: start;
	padding: 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: 1.5rem;
	background: var(--c-white);
	transition: border-color 0.5s ease, background-color 0.6s ease, transform 0.6s var(--ease-gd);
}
.inb__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--c-line); border-radius: 50%; transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.9s var(--ease-spin); }
.inb__icon .icon { width: 1.4rem; height: 1.4rem; }
.inb__name { margin-top: 0.15rem; font: 500 1.25rem/1.25 var(--f-display); }
.inb__text { margin-top: 0.35rem; color: var(--c-mute); }
.inb__tick { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--c-line); transition: background-color 0.4s ease, border-color 0.4s ease; }
.inb__tick svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--c-black); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.6s var(--ease-gd) 0.15s; }
.inb__item.is-on { border-color: var(--c-black); }
.inb__item.is-on .inb__icon { background: var(--c-yellow); border-color: var(--c-yellow); transform: rotate(-8deg); }
.inb__item.is-on .inb__tick { background: var(--c-yellow); border-color: var(--c-yellow); }
.inb__item.is-on .inb__tick svg { stroke-dashoffset: 0; }

/* ---------- Cijfers ---------- */
.cijfers { position: relative; padding-block: var(--section-y); overflow: hidden; }
.cijfers--zwart { background: var(--c-black); color: var(--c-white); padding-block: calc(var(--section-y) + 2.5rem); }
.cijfers--geel { background: var(--c-yellow); }
.cijfers__card { position: relative; z-index: 3; }
.cijfers__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cijfers__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.cijfers__num { font: 500 clamp(3rem, 2rem + 4vw, 5.5rem)/1 var(--f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cijfers--zwart .cijfers__num { color: var(--c-yellow); }
.cijfers__dots { display: flex; gap: 0.3rem; margin: 1.25rem 0 1rem; }
.cijfers__dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; opacity: 0.18; transition: opacity 0.4s ease, background-color 0.4s ease, transform 0.6s var(--ease-spin); }
.cijfers__dots i.is-on { opacity: 1; background: var(--c-yellow); transform: scale(1.15); }
.cijfers--geel .cijfers__dots i.is-on { background: var(--c-black); }
.cijfers__label { max-width: 16rem; font-size: 1rem; }
.cijfers--zwart .cijfers__label { color: rgba(255, 255, 255, 0.7); }

/* ---------- Contactopties ---------- */
.co__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.co__grid > li { display: flex; }
.co__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 17rem;
	padding: 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: 1.5rem;
	overflow: hidden;
	color: var(--c-black);
	text-decoration: none;
	transition: color 0.45s ease 0.05s, border-color 0.45s ease;
}
.co__fill { position: absolute; left: -15%; right: -15%; top: 100%; height: 180%; z-index: -1; border-radius: 50% 50% 0 0 / 22% 22% 0 0; background: var(--c-black); transition: transform 0.85s var(--ease-gd), border-radius 0.85s var(--ease-gd); }
.co__card--check { background: var(--c-yellow); border-color: var(--c-yellow); }
.co__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; }
.co__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--c-yellow); color: var(--c-black); transition: transform 0.9s var(--ease-spin), background-color 0.4s ease; }
.co__card--check .co__icon { background: var(--c-black); color: var(--c-yellow); }
.co__icon .icon { width: 1.4rem; height: 1.4rem; }
.co__arrow { display: inline-flex; width: 1.5rem; height: 1.5rem; overflow: hidden; }
.co__arrow .icon { width: 100%; height: 100%; transition: transform 0.6s var(--ease-gd); }
.co__label { margin-top: 2.5rem; font: 900 0.875rem/1.2 var(--f-ui); }
.co__value { margin-top: 0.35rem; font: 500 1.375rem/1.25 var(--f-display); overflow-wrap: anywhere; }
.co__text { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.45; opacity: 0.65; }
@media (hover: hover) {
	.co__card:hover { color: var(--c-white); border-color: var(--c-black); }
	.co__card:hover .co__fill { transform: translateY(-58%); border-radius: 0; }
	.co__card:hover .co__icon { transform: rotate(-12deg) scale(1.06); }
	.co__card:hover .co__arrow .icon { animation: co-arrow 0.7s var(--ease-gd); }
	.co__card--check:hover .co__icon { background: var(--c-yellow); color: var(--c-black); }
}
@keyframes co-arrow { 0% { transform: translate(0, 0); } 45% { transform: translate(120%, -120%); } 46% { transform: translate(-120%, 120%); } 100% { transform: translate(0, 0); } }

/* ---------- Tekst (lang) ---------- */
.tekstblok__title { margin-bottom: 1rem; }
.tekstblok__grid { padding-block: clamp(1rem, 3vw, 2rem) 0; }

@media (max-width: 900px) {
	.pk__grid, .pk--stippen .pk__grid { grid-template-columns: minmax(0, 1fr); }
	.pk__visual { max-width: 26rem; width: 100%; margin-inline: auto; }
	.pk--stippen .pk__visual { display: none; }
	.inb__grid { grid-template-columns: minmax(0, 1fr); }
	.inb__sticky { position: static; }
}
@media (max-width: 767px) {
	.pk__line { display: inline; }
	.pk__media { width: min(100%, 20rem); }
	.inb__item { grid-template-columns: auto minmax(0, 1fr); padding: 1.25rem; gap: 1rem; }
	.inb__tick { position: absolute; top: 1.25rem; right: 1.25rem; width: 1.75rem; height: 1.75rem; }
	.inb__name { padding-right: 2.25rem; }
	.co__card { min-height: 0; }
	.co__label { margin-top: 1.75rem; }
}

/* =========================================================
   Sticky balk onderin: gratis verhuischeck
   ========================================================= */

.sbar {
	position: fixed;
	left: 50%;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 44;
	width: min(46rem, calc(100% - 2.5rem));
	transform: translateX(-50%);
	pointer-events: none;
	visibility: hidden;
}
.sbar.is-shown { pointer-events: auto; visibility: visible; }
.sbar__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem;
	border-radius: var(--radius-pill);
	background: var(--c-black);
	color: var(--c-white);
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.55);
	clip-path: inset(0 calc(100% - 3.5rem) 0 0 round 100px);
}
.sbar__mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-yellow); color: var(--c-black); }
.sbar__mark .icon { width: 1.35rem; height: 1.35rem; }
.sbar__text { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
.sbar__title { font: 900 0.9375rem/1.2 var(--f-ui); }
.sbar__sub { font-size: 0.8125rem; line-height: 1.3; color: rgba(255, 255, 255, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar__actions { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.sbar__btn { min-height: 3rem; }
/* Zonder JavaScript of met minder beweging: gewoon zichtbaar of weg */
html:not(.js-intro) .sbar__inner { clip-path: none; }
/* WhatsApp-knop schuift omhoog zolang de balk er staat (op smalle schermen) */
@media (max-width: 1100px) {
	.wa { transition: transform 0.8s var(--ease-spin), opacity 0.4s ease, padding 0.6s var(--ease-gd), background-color 0.4s ease, bottom 0.7s var(--ease-gd); }
	html.sbar-on .wa { bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.75rem); }
}
@media (max-width: 767px) {
	.sbar { width: calc(100% - 1.5rem); bottom: max(0.75rem, env(safe-area-inset-bottom)); }
	.sbar__inner { gap: 0.75rem; }
	.sbar__mark { width: 2.75rem; height: 2.75rem; }
	.sbar__sub { display: none; }
	.sbar__title { font-size: 0.875rem; }
	.sbar__btn { min-height: 2.75rem; padding-inline: 1.1rem; }
	html.sbar-on .wa { bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 4.5rem); }
}
@media (max-width: 380px) {
	.sbar__title { display: none; }
	.sbar__text { flex: 1; }
}


/* Formulierblok "zwart" (contact): gesplitst zoals het reviewblok. Links de
   tekst op wit (sticky), rechts een zwart vlak tot de rand met het formulier.
   Het zwarte vlak loopt bij binnenkomst van rechts naar links vol (blocks.js). */
.section--formulier.section--bg-zwart { padding: 0; margin-block: var(--section-y); }
.section--bg-zwart .formblock__grid { max-width: none; padding: 0; grid-template-columns: 50% 50%; gap: 0; align-items: stretch; }
.section--bg-zwart .formblock__intro { align-self: stretch; padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 5vw, 5.5rem) clamp(4rem, 8vw, 7rem) max(var(--gutter), calc(100% - var(--content) / 2)); }
.section--bg-zwart .formblock__intro-in { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 2rem); }
.section--bg-zwart .formblock__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(36rem, 55vw, 56rem);
	padding: clamp(4rem, 8vw, 7rem) max(var(--gutter), calc(100% - var(--content) / 2)) clamp(4rem, 8vw, 7rem) clamp(2rem, 6vw, 6.1875rem);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--c-white);
}
.formblock__card-bg { position: absolute; inset: 0; z-index: -1; background: var(--c-black); }
html.js:not(.is-static) .section--bg-zwart .formblock__card-bg { clip-path: inset(0 0 0 100%); }
@media (max-width: 1024px) {
	.section--bg-zwart .formblock__grid { grid-template-columns: minmax(0, 1fr); }
	.section--bg-zwart .formblock__intro { padding: 0 var(--gutter) 2.5rem; }
	.section--bg-zwart .formblock__intro-in { position: static; }
	.section--bg-zwart .formblock__card { min-height: 0; padding: 3.5rem var(--gutter); }
}

/* =========================================================
   Kenniscentrum in twee delen: artikelen en vragen
   ========================================================= */

/* Schakelaar: een gele pil schuift naar het actieve deel */
.kc-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-bottom: 1.75rem; padding: 0.3rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); }
.kc-switch__pill { position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0.3rem; width: calc(50% - 0.3rem); border-radius: var(--radius-pill); background: var(--c-yellow); transition: transform 0.7s var(--ease-gd); }
.kc-switch--vragen .kc-switch__pill { transform: translateX(100%); }
.kc-switch__link { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.4rem; border-radius: var(--radius-pill); font: 900 0.875rem/1 var(--f-ui); text-transform: lowercase; text-decoration: none; color: var(--c-black); }
.kc-switch__link:not(.is-active) { color: var(--c-mute); transition: color 0.3s ease; }
.kc-switch__link:not(.is-active):hover { color: var(--c-black); }
.kc-switch__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.07); font-size: 0.6875rem; }
.kc-switch__link.is-active .kc-switch__count { background: var(--c-black); color: var(--c-yellow); }

/* Vragenbibliotheek */
.faqlib, .kc-list { overflow-anchor: none; }
.faqlib { padding-block: clamp(1rem, 3vw, 2rem) var(--section-y); }
.faqlib__search { position: relative; display: block; max-width: 34rem; margin-top: 2rem; }
.faqlib__search input { width: 100%; min-height: 3.5rem; padding: 0 1.25rem 0 3.25rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-white); font: 500 1rem/1 var(--f-display); color: var(--c-black); transition: border-color 0.3s ease, box-shadow 0.4s ease; -webkit-appearance: none; appearance: none; }
.faqlib__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faqlib__search input::placeholder { color: rgba(0, 0, 0, 0.45); }
.faqlib__search input:focus { border-color: var(--c-black); }
.faqlib__search-icon { position: absolute; left: 1.25rem; top: 50%; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); fill: none; stroke: var(--c-black); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.faqlib__topics { display: grid; gap: 0.25rem; margin-bottom: 2rem; }
.faqlib__topic { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; border-radius: 1rem; font: 900 0.9375rem/1.2 var(--f-ui); text-decoration: none; color: var(--c-black); transition: background-color 0.3s ease, color 0.3s ease; }
.faqlib__topic:hover { background: rgba(0, 0, 0, 0.05); }
.faqlib__topic.is-active { background: var(--c-black); color: var(--c-white); }
.faqlib__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.07); font-size: 0.6875rem; }
.faqlib__topic.is-active .faqlib__count { background: var(--c-yellow); color: var(--c-black); }
.faqlib__empty { padding: 2rem 0; color: var(--c-mute); font-size: var(--fs-lead); }
.faq__item[hidden] { display: none; }
.faq__more { margin-top: 1rem; }
.faq__more a { display: inline-flex; align-items: center; gap: 0.4rem; font: 900 0.875rem/1.2 var(--f-ui); text-decoration: none; }
.faq__more .icon { width: 1rem; height: 1rem; transition: transform 0.5s var(--ease-gd); }
.faq__more a:hover .icon { transform: translate(2px, -2px); }
.faqlib mark { background: rgba(255, 231, 0, 0.7); color: inherit; border-radius: 0.2em; padding: 0 0.1em; }

/* Losse vraag */
.kc-article__grid.kc-vraag__grid { grid-template-columns: minmax(0, 44rem) minmax(0, 20rem); }
.kc-vraag__answer { font-size: 1.1875rem; }
.kc-vraag__side { align-self: start; position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 1rem); }
.kc-vraag__meer { padding-block: 0 var(--section-y); }
.kc-vraag__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; border-top: 1px solid var(--c-line); }
.kc-vraag__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--c-line); font: 500 1.125rem/1.35 var(--f-display); text-decoration: none; }
.kc-vraag__list .icon { flex: none; width: 1.1rem; height: 1.1rem; transition: transform 0.5s var(--ease-gd); }
.kc-vraag__list a:hover .icon { transform: translate(3px, -3px); }
.kc-vraag__all { margin-top: 2rem; }
.kc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.kc-article__grid.kc-vraag__grid { grid-template-columns: minmax(0, 1fr); }
	.kc-vraag__side { position: static; }
	.kc-vraag__list { grid-template-columns: minmax(0, 1fr); }
	.faqlib__topics { display: flex; flex-wrap: nowrap; gap: 0.4rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.faqlib__topics::-webkit-scrollbar { display: none; }
	.faqlib__topic { flex: none; }
	.faqlib__topic { padding: 0.55rem 0.9rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); }
	.faqlib__contact { display: none; }
}
@media (max-width: 767px) {
	.kc-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.kc-switch { display: grid; width: 100%; }
}

/* Zwevende schakelaar onderin (kenniscentrum) */
.kc-switch--float {
	position: fixed;
	left: 50%;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 44;
	margin: 0;
	background: var(--c-white);
	border-color: transparent;
	box-shadow: 0 0 0 1px var(--c-line), 0 24px 50px -18px rgba(0, 0, 0, 0.35);
	transform: translate(-50%, 160%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.8s var(--ease-spin), opacity 0.3s ease;
}
.kc-switch--float.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (max-width: 1100px) { html.kcf-on .wa { bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.75rem); } }
@media (max-width: 767px) {
	.kc-switch--float { width: auto; display: inline-grid; bottom: max(0.75rem, env(safe-area-inset-bottom)); }
	html.kcf-on .wa { bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 4.5rem); }
}

/* Vragen op deze pagina (lokaal): kop links, accordeon rechts */
.section--lokale_vragen { padding-block: var(--section-y); }
.lv__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
@media (max-width: 900px) { .lv__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* In de buurt */
.section--in_de_buurt { padding-block: var(--section-y); }
.idb__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
.idb__card { position: relative; display: grid; gap: 0.3rem; padding: 1.25rem 3rem 1.25rem 1.25rem; border: 1px solid var(--c-line); border-radius: 1.25rem; text-decoration: none; transition: background-color 0.35s ease, border-color 0.35s ease; }
.idb__card:hover { background: var(--c-yellow); border-color: var(--c-yellow); }
.idb__name { font: 500 1.25rem/1.2 var(--f-display); }
.idb__meta { font: 900 0.75rem/1.3 var(--f-ui); color: var(--c-mute); }
.idb__card:hover .idb__meta { color: var(--c-black); }
.idb__go { position: absolute; top: 1.25rem; right: 1.25rem; display: inline-flex; width: 1.1rem; height: 1.1rem; transition: transform 0.5s var(--ease-gd); }
.idb__card:hover .idb__go { transform: translate(3px, -3px); }
.idb__all { margin-top: 1.75rem; }
.idb__all a { display: inline-flex; align-items: center; gap: 0.45rem; font: 900 0.9375rem/1.2 var(--f-ui); text-decoration: none; }
.idb__all .icon { width: 1rem; height: 1rem; }

/* Werkgebied: alle plaatsen */
.section--plaatsen { padding-block: var(--section-y); }
.plaatsen__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); }
.plaatsen__side { align-self: stretch; }
.plaatsen__sticky { position: sticky; top: calc(var(--btn-h) + var(--gutter-header) * 2 + 1rem); }
.plaatsen__intro { margin-top: 1.25rem; color: var(--c-mute); max-width: 30rem; }
.plaatsen__count { margin-top: 1.25rem; font: 900 0.875rem/1 var(--f-ui); }
.plaatsen__map { margin-top: 2rem; max-width: 26rem; }
.plaatsen__map .map__svg { width: 100%; height: auto; }
.plaatsen__map .map__dot { fill: var(--c-dot); transition: fill 0.35s ease, transform 0.5s var(--ease-spin); transform-box: fill-box; transform-origin: center; }
.plaatsen__map .map__dot.is-spot { fill: var(--c-yellow); }
.plaatsen__map .map__dot.is-pick { fill: var(--c-black); transform: scale(1.4); }
.plaatsen__prov + .plaatsen__prov { margin-top: 3rem; }
.plaatsen__prov-title { margin-bottom: 1.25rem; font: 500 var(--fs-title)/1.2 var(--f-display); }
.plaatsen__gem { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.5rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--c-line); }
.plaatsen__gem-title { font: 900 0.8125rem/1.5 var(--f-ui); color: var(--c-mute); }
.plaatsen__gem ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.plaatsen__gem a { font: 500 1.0625rem/1.5 var(--f-display); text-decoration: none; background: linear-gradient(var(--c-yellow), var(--c-yellow)) 0 100% / 0 0.35em no-repeat; transition: background-size 0.5s var(--ease-gd); }
.plaatsen__gem a:hover { background-size: 100% 0.35em; }
@media (max-width: 900px) {
	.plaatsen__grid { grid-template-columns: minmax(0, 1fr); }
	.plaatsen__sticky { position: static; }
	.plaatsen__map { max-width: 18rem; }
	.plaatsen__gem { grid-template-columns: minmax(0, 1fr); }
}

.site-footer__hub { margin-top: 1.25rem; }
.site-footer__hub a { display: inline-flex; align-items: center; gap: 0.4rem; font: 900 0.875rem/1.2 var(--f-ui); color: var(--c-yellow); text-decoration: none; }
.site-footer__hub .icon { width: 0.95rem; height: 0.95rem; transition: transform 0.5s var(--ease-gd); }
.site-footer__hub a:hover .icon { transform: translate(2px, -2px); }

/* Deelknoppen onder artikelen en vragen */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--c-line); }
.share__label { font: 900 0.875rem/1.2 var(--f-ui); }
.share__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.richtext .share__list li { padding: 0; margin: 0; }
.richtext .share__list li::before { display: none; }
.share__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: transparent; color: var(--c-black); cursor: pointer; text-decoration: none; transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.6s var(--ease-spin); }
.share__btn .icon { width: 1.1rem; height: 1.1rem; }
.share__btn:hover { background: var(--c-yellow); border-color: var(--c-yellow); transform: rotate(-10deg); }
.share__tip { position: absolute; left: 50%; bottom: calc(100% + 0.6rem); padding: 0.45rem 0.75rem; border-radius: var(--radius-pill); background: var(--c-black); color: var(--c-white); font: 900 0.75rem/1 var(--f-ui); white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 0.3s ease, transform 0.5s var(--ease-spin); }
.share__btn.is-copied .share__tip { opacity: 1; transform: translate(-50%, 0); }

/* Vragenbibliotheek: tussenkop per onderwerp */
.faqlib__group { margin: 2.75rem 0 0.5rem; padding-bottom: 0.75rem; font: 500 var(--fs-title)/1.2 var(--f-display); }
.faqlib__group:first-child { margin-top: 0; }
.faqlib__group[hidden] { display: none; }
.faqlib [data-faqlib-list] { overflow: hidden; }

/* Tablet: geen gele knop in de header (staat al in menu en sticky balk), zo blijft het logo in het midden */
@media (max-width: 1024px) { .site-header__cta { display: none; } }

/* Verhuisgids onder de bedankt-melding */
.gd-gift { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; padding: 1.5rem; border-radius: 1.5rem; background: var(--c-yellow); color: var(--c-black); }
.gd-gift__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--c-black); color: var(--c-yellow); }
.gd-gift__icon .icon { width: 1.5rem; height: 1.5rem; }
.gd-gift__kicker { font: 900 0.75rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.gd-gift__title { margin-top: 0.35rem; font: 500 1.375rem/1.2 var(--f-display); }
.gd-gift__text { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.45; }
.gd-gift__btn { margin-top: 1.1rem; --btn-bg: var(--c-black); --btn-fg: var(--c-white); --btn-line: var(--c-black); --btn-fill: var(--c-white); --btn-fg-hover: var(--c-black); }
@media (max-width: 600px) { .gd-gift { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   Verhuisgids: e-mail achterlaten, stippen tekenen een envelop
   ========================================================= */
.section--verhuisgids { padding-block: var(--section-y); }
.vg__card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 5vw, 4.5rem); border-radius: 2rem; background: var(--c-yellow); }
.vg__visual { display: grid; place-items: center; }
.vg__dots { width: min(100%, 24rem); }
.vg .dotfield__dot { fill: rgba(0, 0, 0, 0.1); }
.vg .dotfield__dot.is-hot { fill: var(--c-black); }
.vg__kicker { font: 900 0.8125rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.vg__title { margin-top: 0.75rem; font: 500 var(--fs-title)/1.2 var(--f-display); letter-spacing: -0.01em; }
.vg__text { margin-top: 0.9rem; max-width: 30rem; }
.vg__form { margin-top: 1.75rem; max-width: 32rem; }
.vg__note { margin-top: 0.9rem; font-size: 0.8125rem; line-height: 1.45; opacity: 0.7; max-width: 30rem; }
/* Het formulier als één pil: veld en knop naast elkaar */
.vg .gform_wrapper form { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem; border-radius: var(--radius-pill); background: var(--c-white); }
.vg .gform_wrapper .gform-body, .vg .gform_wrapper .gform_body { flex: 1; min-width: 0; }
.vg .gform_wrapper .gform_fields { display: block; }
.vg .gform_wrapper .gfield, .vg .gform_wrapper .gd-field { margin: 0; padding: 0; }
.vg .gform_wrapper form { align-items: center; }
.vg .gform_wrapper .ginput_container { margin: 0; }
.vg .gd-done__mark { display: none; }
.vg .gform_confirmation_wrapper { padding: 0.25rem 0; }
.vg .dotfield.is-done .dotfield__dot.is-hot { fill: var(--c-black); }
.vg .gform_wrapper .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vg .gform_wrapper input[type="email"] { width: 100%; height: 3rem; padding: 0 1.1rem; border: 0; border-radius: var(--radius-pill); background: transparent; font: 500 1rem/1 var(--f-display); color: var(--c-black); }
.vg .gform_wrapper .gd-field__line { display: none; }
.vg .gform_wrapper .gform_footer { margin: 0; padding: 0; }
.vg .gform_wrapper .gform_button { --btn-bg: var(--c-black); --btn-fg: var(--c-white); --btn-line: var(--c-black); --btn-fill: var(--c-yellow-dark); --btn-fg-hover: var(--c-black); min-height: 3rem; white-space: nowrap; }
.vg .gform_wrapper .gfield_validation_message, .vg .gform_wrapper .validation_message { position: absolute; margin-top: 0.9rem; }
.vg .gform_wrapper .gform_submission_error { display: none; }
.vg .gform_confirmation_message { font: inherit; }
.vg .gd-done__mark circle { fill: var(--c-black); }
.vg .gd-done__mark path { stroke: var(--c-yellow); }
.vg .gd-done__text { opacity: 0.8; }
.gd-done__cta { margin-top: 1.25rem; }
@media (max-width: 900px) {
	.vg__card { grid-template-columns: minmax(0, 1fr); }
	.vg__dots { width: min(70%, 16rem); }
}
@media (max-width: 480px) {
	.vg .gform_wrapper form { flex-direction: column; align-items: stretch; border-radius: 1.5rem; padding: 0.5rem; }
	.vg .gform_wrapper .gform_footer, .vg .gform_wrapper .gform_button { width: 100%; }
}

/* Datumveld: label altijd boven (forms.js), datum links uitgelijnd, ook als
   iOS er een native datumveld van maakt. */
.gform_wrapper .gfield--type-date input { text-align: left; -webkit-appearance: none; appearance: none; min-height: 3rem; }
.gform_wrapper .gfield--type-date input::-webkit-date-and-time-value { text-align: left; }
.gform_wrapper .gfield--type-date input::placeholder { color: rgba(0, 0, 0, 0.35); }
.panel .gform_wrapper .gfield--type-date input::placeholder, .section--bg-zwart .gform_wrapper .gfield--type-date input::placeholder { color: rgba(255, 255, 255, 0.35); }