/* ---------- Knoppen ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--btn-py) var(--btn-px);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background-color: var(--color-action);
	background-image: linear-gradient(var(--color-heading), var(--color-heading));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--btn-fs);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-size 450ms var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background-size: 100% 100%;
	color: #fff;
	box-shadow: 0 10px 24px rgb(35 44 51 / 28%);
	transform: translateY(-2px);
}

.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; filter: grayscale(1); }

/* Pijltje rechtsboven, zoals in het ontwerp */
.btn--arrow::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	margin: 0 4px 0 12px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 12.5L12.5 0.5M12.5 0.5H1.7M12.5 0.5V11.3' stroke='white' 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' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 12.5L12.5 0.5M12.5 0.5H1.7M12.5 0.5V11.3' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur) var(--ease);
}

.btn--arrow:hover::after,
.btn--arrow:focus-visible::after { transform: translate(3px, -3px); }

.btn--outline {
	padding: var(--btn-outline-py) var(--btn-outline-px);
	border: 2px solid var(--color-brand);
	background-color: transparent;
	background-image: linear-gradient(var(--color-action), var(--color-action));
	color: var(--color-heading);
}

.btn--outline:hover,
.btn--outline:focus-visible { border-color: var(--color-action); box-shadow: 0 10px 24px rgb(47 108 191 / 30%); }
.btn--dark { background-color: var(--color-dark); background-image: linear-gradient(var(--color-action), var(--color-action)); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

@media (max-width: 767px) {
	.btn { padding: 1.125rem 1.5rem; }
	.btn-row--stack { flex-direction: column; align-items: stretch; }
}

@media (pointer: coarse) {
	.btn { min-height: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover, .btn:focus-visible { transform: none; box-shadow: none; }
	.btn--arrow:hover::after, .btn--arrow:focus-visible::after { transform: none; }
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: var(--z-header);
	background: var(--color-surface);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.875rem;
	padding-block: var(--header-pad);
}

.site-header__logo { display: block; flex: none; line-height: 0; }
.site-header__logo img { width: clamp(17.5rem, 11rem + 7vw, 19.5rem); height: auto; }
@media (max-width: 767px) { .site-header__logo img { width: 16rem; } }
@media (max-width: 479px) { .site-header__logo img { width: 14.5rem; } }

.site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--touch-min);
	height: var(--touch-min);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
}

.burger { position: relative; display: block; width: 1.625rem; height: 1.125rem; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; background: currentcolor; transform-origin: center; transition: transform var(--dur) var(--ease), opacity 200ms var(--ease), width var(--dur) var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: calc(50% - 1px); width: 70%; }
.burger span:nth-child(3) { bottom: 0; }
.site-header__toggle:hover .burger span:nth-child(2) { width: 100%; }
.site-header__toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-header__toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); }

.site-nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 4rem; }
.site-nav__list { display: flex; align-items: center; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.site-nav__item { position: relative; display: flex; align-items: center; }

.site-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.875rem 0;
	color: var(--color-heading);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.site-nav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--color-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

/* Lijntje onder de link: enkel bij hover van gewone links en altijd bij de actieve pagina.
   Een link met dropdown krijgt geen hover-lijntje: de open dropdown en het pijltje tonen de toestand. */
.site-nav__link:hover { color: var(--color-heading); }
.site-nav__item:not(.site-nav__item--has-sub) > .site-nav__link:hover::after,
.site-nav__item--current > .site-nav__link::after { transform: scaleX(1); }
.site-nav__item--current > .site-nav__link { color: #000; }
.site-nav__item--has-sub:hover > .site-nav__link,
.site-nav__item--has-sub:focus-within > .site-nav__link { color: var(--color-action); }
.site-nav__item--has-sub:hover .site-nav__sub-toggle .icon,
.site-nav__item--has-sub:focus-within .site-nav__sub-toggle .icon { transform: rotate(180deg); color: var(--color-action); }

.site-nav__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 2.5rem;
	margin-left: 0.125rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
}

.site-nav__sub-toggle .icon { width: 0.75rem; height: 0.75rem; transition: transform var(--dur) var(--ease); }
.site-nav__sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.site-nav__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: var(--z-menu);
	min-width: 16rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--color-surface);
	border: var(--border);
	box-shadow: var(--shadow);
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.site-nav__item--has-sub:hover > .site-nav__sub,
.site-nav__item--has-sub:focus-within > .site-nav__sub,
.site-nav__sub-toggle[aria-expanded="true"] ~ .site-nav__sub {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.site-nav__sub-link {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--color-heading);
	font-size: var(--fs-small);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-nav__sub-link:hover { background: var(--color-bg); color: var(--color-action); }
.site-nav__sub-link[aria-current="page"] { color: var(--color-action); }

/* Het contactblok en de tekening zijn enkel voor het vullende mobiele menu */
.site-nav__foot, .site-nav__deco { display: none; }

@media (max-width: 1119px) {
	.site-header { transition: background var(--dur) var(--ease); }
	.site-header__inner { position: relative; }
	.site-header__inner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2; width: 100vw; background: var(--color-dark); transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
	body.menu-open .site-header__inner::before { opacity: 1; }
	.site-header__logo, .site-header__toggle { position: relative; z-index: 3; }
	.site-header__logo img { transition: filter var(--dur) var(--ease); }
	.site-header__toggle { display: inline-flex; transition: color var(--dur) var(--ease); }
	body.menu-open { overflow: hidden; }
	body.menu-open .site-header { background: var(--color-dark); }
	body.menu-open .site-header__logo img { filter: brightness(0) invert(1); }
	body.menu-open .site-header__toggle { color: #fff; }

	/* Vullend menu: de donkere vlakte groeit vanuit de menuknop */
	.site-nav {
		--burger-x: calc(100% - var(--gutter) - 1.5rem);
		--burger-y: calc(var(--header-pad) + 1.5rem);
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: calc(var(--header-pad) * 2 + 4.25rem) var(--gutter) 2rem;
		overflow-y: auto;
		background: var(--color-dark);
		color: var(--color-dark-text);
		counter-reset: nav;
	}

	.js .site-nav {
		visibility: hidden;
		clip-path: circle(0 at var(--burger-x) var(--burger-y));
		transition: clip-path 650ms cubic-bezier(0.7, 0, 0.2, 1), visibility 650ms;
	}
	.js .site-nav[hidden] { display: none; }
	.js .site-nav.is-open { visibility: visible; clip-path: circle(150vmax at var(--burger-x) var(--burger-y)); }

	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__item { position: relative; flex-wrap: wrap; border-bottom: 1px solid rgb(255 255 255 / 14%); counter-increment: nav; }
	.site-nav__link {
		flex: 1;
		gap: 1rem;
		padding: 1.0625rem 0;
		color: #fff;
		font-family: var(--font-heading);
		font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
		font-weight: 700;
		line-height: 1.15;
		text-transform: uppercase;
		transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
	}
	.site-nav__link::before { content: counter(nav, decimal-leading-zero); min-width: 1.75rem; color: var(--color-on-dark-accent); font-family: var(--font-eyebrow); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; }
	.site-nav__link::after { display: none; }
	.site-nav__link:hover { color: var(--color-on-dark-accent); transform: translateX(0.375rem); }
	.site-nav__item--current > .site-nav__link { color: var(--color-on-dark-accent); }
	.site-nav__item--current { border-bottom-color: var(--color-brand); }
	.site-nav__sub-toggle { width: 3rem; height: 3.5rem; margin: 0; color: #fff; }
	.site-nav__sub-toggle .icon { width: 1.125rem; height: 1.125rem; }

	/* Submenu: schuift soepel open */
	.site-nav__sub { position: static; flex-basis: 100%; min-width: 0; max-height: 0; margin: 0; padding: 0 0 0 2.75rem; overflow: hidden; border: 0; box-shadow: none; visibility: visible; opacity: 1; transform: none; background: transparent; transition: max-height 400ms var(--ease); }
	.js .site-nav__sub-toggle[aria-expanded="true"] ~ .site-nav__sub { max-height: 24rem; }
	html:not(.js) .site-nav__sub { max-height: none; }
	.site-nav__sub-link { padding: 0.625rem 0; color: rgb(255 255 255 / 82%); font-size: 1rem; }
	.site-nav__sub-link:hover { background: transparent; color: var(--color-on-dark-accent); }
	.site-nav__sub-link[aria-current="page"] { color: var(--color-on-dark-accent); }
	.site-nav__sub li:last-child { padding-bottom: 0.75rem; }

	.site-nav > .btn { align-self: stretch; margin: 2rem 0 0; background-image: linear-gradient(#fff, #fff); }
	.site-nav > .btn:hover, .site-nav > .btn:focus-visible { color: var(--color-heading); }

	.site-nav__foot { display: block; margin-top: auto; padding-top: 2.5rem; }
	.site-nav__contact { margin: 0; padding: 0; list-style: none; }
	.site-nav__contact li { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.75rem; font-size: var(--fs-small); }
	.site-nav__contact .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-brand); }
	.site-nav__contact a { color: #fff; text-decoration: none; }
	.site-nav__contact a:hover { color: var(--color-on-dark-accent); }

	/* Lijntekening van de offerteband, zacht onderaan */
	.site-nav__deco { display: block; position: absolute; right: 0; bottom: 0; z-index: -1; width: min(52rem, 150%); max-width: none; height: auto; opacity: 0.9; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 40%, transparent); mask-image: linear-gradient(to top, #000 40%, transparent); }

	/* Inhoud verschijnt na elkaar, van onder naar boven */
	.js .site-nav.is-open .site-nav__item,
	.js .site-nav.is-open > .btn,
	.js .site-nav.is-open .site-nav__foot { animation: menu-item-in 520ms var(--ease) backwards; }
	.js .site-nav.is-open .site-nav__item:nth-child(1) { animation-delay: 220ms; }
	.js .site-nav.is-open .site-nav__item:nth-child(2) { animation-delay: 280ms; }
	.js .site-nav.is-open .site-nav__item:nth-child(3) { animation-delay: 340ms; }
	.js .site-nav.is-open .site-nav__item:nth-child(4) { animation-delay: 400ms; }
	.js .site-nav.is-open .site-nav__item:nth-child(5) { animation-delay: 460ms; }
	.js .site-nav.is-open > .btn { animation-delay: 540ms; }
	.js .site-nav.is-open .site-nav__foot { animation-delay: 600ms; }
}

@media (min-width: 48em) and (max-width: 1119px) {
	.site-nav { --burger-y: calc(var(--header-pad) + 1.5rem); padding-inline: calc(var(--gutter) + 2rem); }
}

@keyframes menu-item-in {
	from { opacity: 0; transform: translateY(1rem); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js .site-nav { clip-path: none; transition: none; }
	.js .site-nav.is-open .site-nav__item, .js .site-nav.is-open > .btn, .js .site-nav.is-open .site-nav__foot { animation: none; }
}

/* ---------- Kruimelpad ---------- */
.breadcrumbs { padding-top: 1.25rem; font-size: var(--fs-tiny); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--color-line-strong); }
.breadcrumbs a { color: var(--color-action); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--color-text); }

/* ---------- Kaarten, labels, filter ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-bg); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; gap: 0.75rem; }
.card__title { margin: 0; font-size: var(--fs-h4); line-height: 1.2; transition: color var(--dur) var(--ease); }
.card--service { gap: 0; background: var(--color-surface); border: 2px solid var(--color-line); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--service:hover, .card--service:focus-within { box-shadow: 0 10px 30px rgb(35 44 51 / 8%); }
.card--service .card__body { flex: 1; padding: 1.75rem 2rem 2rem; gap: 0.75rem; }
.card--service .card__title { font-size: var(--fs-h3); }
.card__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; color: var(--color-action); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.card__more::after { content: ""; width: 0.8125rem; height: 0.8125rem; background: currentColor; transition: transform var(--dur) var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 12.5L12.5 0.5M12.5 0.5H1.7M12.5 0.5V11.3' stroke='white' 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' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 12.5L12.5 0.5M12.5 0.5H1.7M12.5 0.5V11.3' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.card--service:hover .card__more::after, .card--service:focus-within .card__more::after { transform: translate(3px, -3px); }
@media (max-width: 767px) { .card--service .card__body { padding: 1.25rem 1.25rem 1.5rem; } }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title { color: var(--color-action); }
.card__text { margin: 0; font-size: var(--fs-small); }

.card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.card__meta .chip { margin: 0; padding: 0.25rem 0.5rem; border: 0; background: var(--color-bg); color: var(--color-text); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.card__body > .card__meta { margin-bottom: 0.125rem; }
.chip {
	align-self: flex-start;
	display: inline-block;
	margin: 0.375rem 0 0 0.125rem;
	padding: 0.1875rem 0.375rem;
	border: 1px solid var(--color-text);
	font-size: var(--fs-tiny);
	line-height: 1.4;
}

.chip strong { font-weight: 700; }

.filter { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 3rem; padding: 0; list-style: none; }
.filter__btn {
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--color-line-strong);
	background: var(--color-surface);
	color: var(--color-heading);
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter__btn:hover { border-color: var(--color-brand); color: var(--color-action); }
.filter__btn[aria-pressed="true"] { background: var(--color-heading); border-color: var(--color-heading); color: #fff; }
@media (pointer: coarse) { .filter__btn { min-height: var(--touch-min); } }
@media (max-width: 767px) { .filter { gap: 0.75rem; margin-bottom: 2.5rem; } }

/* ---------- Slider (scroll-snap, zonder bibliotheek) ---------- */
.slider__track {
	display: flex;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.slider__track::-webkit-scrollbar { display: none; }
.slider__item { flex: 0 0 calc((100% - 5rem) / 3); min-width: 0; scroll-snap-align: start; }

@media (max-width: 1119px) { .slider__item { flex-basis: calc((100% - 2.5rem) / 2); } }
@media (max-width: 767px) { .slider__track { gap: 1.25rem; } .slider__item { flex-basis: 100%; } }

.slider__nav { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 4rem; }
.slider__nav[hidden] { display: none; }

.round-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.1875rem;
	height: 3.1875rem;
	padding: 0;
	border: 1px solid rgb(113 113 113 / 55%);
	border-radius: var(--radius-pill);
	background: transparent;
	color: #717171;
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.round-btn .icon { width: 0.9375rem; height: 0.9375rem; }
.round-btn:hover:not(:disabled) { border-color: var(--color-brand); color: var(--color-brand); }
.round-btn:disabled { opacity: 0.4; cursor: default; }
@media (pointer: coarse) { .round-btn { width: var(--touch-min); height: var(--touch-min); } }

.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.dots[hidden] { display: none; }
.dots__btn { position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dots__btn::after { content: ""; position: absolute; inset: 0.5rem; border-radius: 50%; background: var(--color-brand); opacity: 0.3; transition: opacity var(--dur) var(--ease); }
.dots__btn[aria-current="true"]::after { opacity: 1; }
@media (max-width: 1119px) { .dots { margin-top: 1rem; } }

/* ---------- Offerteband ---------- */
.cta { background: linear-gradient(to bottom, var(--color-surface) 50%, var(--color-bg) 50%); }
.section--tint + .cta { background: var(--color-bg); }
.cta__box {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding: 7.5rem 4rem;
	background-color: var(--color-dark);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--color-dark-text);
}
.cta__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: right center; pointer-events: none; }
.cta__box { isolation: isolate; }
.cta__title { max-width: 41rem; margin-bottom: 1.875rem; color: #fff; }
.cta__accent { color: var(--color-brand); }
.cta__text { max-width: 35.625rem; margin-bottom: 2.5rem; color: #fff; }
.cta .btn-row { gap: 1rem; }
@media (max-width: 1023px) { .cta__box { padding: 4.375rem 1.875rem; } }
@media (max-width: 767px) { .cta__box { padding: 3.125rem 1.25rem; } .cta .btn-row { flex-direction: column; align-items: stretch; } }

/* ---------- Footer ---------- */
.site-footer { padding: var(--section-y) 0 5.3125rem; background: var(--color-bg); color: var(--color-text); }
.site-footer a { color: var(--color-heading); text-decoration: none; }
.site-footer a:hover { color: var(--color-action); }
.site-footer__cols { display: grid; grid-template-columns: 27fr 51fr 22fr; margin-bottom: 5rem; }
.site-footer__col { padding: 0 4rem; }
.site-footer__col:first-child { padding-left: 0; border-right: 1px solid rgb(0 0 0 / 10%); }
.site-footer__col:nth-child(2) { border-right: 1px solid rgb(0 0 0 / 10%); }
.site-footer__col:last-child { padding-right: 0; }
.site-footer__title { margin: 0 0 1.5625rem; font-size: 1rem; line-height: 1.2; }
.site-footer__list { margin: 0; padding: 0; list-style: none; }
.site-footer__list li { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 0.75rem; color: var(--color-heading); }
.site-footer__list .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--color-brand); }
.site-footer__list--social li { align-items: center; }
.site-footer__list--social .icon { width: 1.875rem; height: 1.875rem; }
.site-footer__list a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.site-footer__logo { display: block; width: 55%; margin: 0 auto 5rem; }
.site-footer__logo img { width: 100%; height: auto; }
.site-footer__line { margin: 0 0 5.3125rem; border: 0; border-top: 1px solid rgb(0 0 0 / 10%); }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 3rem; color: var(--color-heading); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.site-footer__legal p { margin: 0; }
.site-footer__text { max-width: 20rem; margin: 0 0 1.5625rem; }

@media (pointer: coarse) { .site-footer__list a { min-height: var(--touch-min); } }
@media (max-width: 1119px) { .site-footer__logo { width: 65%; } }
@media (max-width: 1023px) {
	.site-footer__col { padding: 0 1.875rem; }
	.site-footer__legal { justify-content: center; text-align: center; }
	.site-footer__legal ul { margin-left: 0; }
}
@media (max-width: 767px) {
	.site-footer { padding-bottom: var(--section-y-sm); }
	.site-footer__cols { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3.125rem; }
	.site-footer__col, .site-footer__col:first-child, .site-footer__col:last-child { padding: 0; border: 0; }
	.site-footer__logo { width: 100%; margin-bottom: 3.125rem; }
	.site-footer__line { margin-bottom: 3.125rem; }
}

/* ---------- Beweging: enkel met JavaScript, uit bij reduced motion ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } .card:hover .card__media img { transform: none; } .card__more::after { transition: none; } .card--service:hover .card__more::after { transform: none; } }
@media (prefers-reduced-motion: reduce) { .slider__track { scroll-behavior: auto; } }

/* ---------- Weetje (zo werken we) ---------- */
.note { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 2.5rem; padding: 0; }
.note__head { display: flex; align-items: center; gap: 0.875rem; }
.note__head .eyebrow { margin: 0; }
.note__icon { display: grid; flex: none; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--color-line-strong); border-radius: 50%; color: var(--color-brand); }
.note__icon .icon { width: 1.125rem; height: 1.125rem; }
.note__steps { width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: note; }
.note__steps li { display: flex; gap: 1rem; align-items: baseline; padding: 0.75rem 0; border-top: 1px solid var(--color-line-strong); color: var(--color-heading); font-size: var(--fs-small); font-weight: 500; counter-increment: note; }
.note__steps li:last-child { border-bottom: 1px solid var(--color-line-strong); }
.note__steps li::before { content: counter(note, decimal-leading-zero); min-width: 1.75rem; color: var(--color-brand); font-family: var(--font-eyebrow); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; }
.note__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-action); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
.note__link::after { content: ""; width: 0.8125rem; height: 0.8125rem; background: currentColor; transition: transform var(--dur) var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 12.5L12.5 0.5M12.5 0.5H1.7M12.5 0.5V11.3' stroke='white' 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' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 12.5L12.5 0.5M12.5 0.5H1.7M12.5 0.5V11.3' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.note__link:hover::after, .note__link:focus-visible::after { transform: translate(3px, -3px); }
.note + .split__link, .note + .btn { margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) { .note__link::after { transition: none; } .note__link:hover::after { transform: none; } }

/* Aanraakdoelen op telefoon en tablet: minstens 44 px hoog */
@media (pointer: coarse), (max-width: 767px) {
	.hero__phone, .hero__score a, .review__more, .note__link, .info-list a, .duo__link, .site-footer__list a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
	.dots__btn { width: var(--touch-min); height: var(--touch-min); }
	.dots__btn::after { inset: 1rem; }
	.breadcrumbs a { display: inline-flex; align-items: center; min-height: 2rem; }
}