/* ==========================================================================
   ETB Willem Bos — hoofdstijlen
   --------------------------------------------------------------------------
   Maatvoering: het ontwerp is getekend op 1948px breed. 1rem = 10 ontwerp-px.
   Op desktop schaalt alles naar verhouding mee met de schermbreedte (zodat de
   compositie 1-op-1 gelijk blijft); boven 1948px blijft alles op ware grootte.
   Onder 1200px volgt een eigen tablet- en mobiele opbouw.
   ========================================================================== */

:root {
	--ease-cascade: cubic-bezier(.65, 0, .25, 1);
	--red: #ef4035;
	--red-light: #f38079;
	--black: #010101;
	--ink: #1f1f1f;
	--dark: #171716;
	--dark-2: #231f20;
	--grey-bg: #f2f2f2;
	--grey: #878787;
	--grey-2: #9a9a9a;
	--grey-3: #cdcdcd;
	--green: #46dfab;
	--lime: #cdf763;
	--cyan: #4af3ff;
	--sky: #d1ecff;
	--mint: #cceac8;

	--f-head: 'Grtsk', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--f-body: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
	--f-label: 'Reflex', 'Reflex Bold', 'Barlow Condensed', 'Arial Narrow', sans-serif;

	--fs-hero: 6.4rem;
	--fs-xl: 7rem;
	--fs-h2: 4rem;
	--fs-h3: 3rem;
	--fs-body: max(1.8rem, 14px);
	--fs-body-lg: max(2rem, 15px);
	--fs-small: max(1.6rem, 13px);
	--fs-btn: max(1.8rem, 13px);
	--lh-body: 1.444;

	--w-wide: 162.9rem;
	--w-main: 137.2rem;
	--w-news: 123rem;
	--w-text: 93.2rem;
	--gutter: 2.4rem;
	--inset: 2.4rem;

	--r-xl: 3.4rem;
	--r-lg: 3rem;
	--r-md: 2.3rem;
	--r-sm: 1.6rem;

	--ease: cubic-bezier(.22, .61, .36, 1);
}

html {
	font-size: calc(100vw / 194.8);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (min-width: 1948px) { html { font-size: 10px; } }
@media (max-width: 1099px) { html { font-size: 6px; } }
@media (max-width: 767px)  { html { font-size: 5px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

body {
	margin: 0;
	background: #fff;
	color: var(--black);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: -0.04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
.site-main { overflow-x: clip; }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
strong { font-weight: 600; }

.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:focus {
	position: fixed !important; z-index: 1000;
	top: 1rem; left: 1rem;
	width: auto; height: auto; clip: auto;
	padding: 1rem 2rem;
	background: #fff; color: var(--black);
	border-radius: 1rem;
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

.t-hero, .t-h2, .t-h3, .t-xl {
	font-family: var(--f-head);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.06em;
}
.t-hero { font-size: var(--fs-hero); }
.t-xl   { font-size: var(--fs-xl); }
.t-h2   { font-size: var(--fs-h2); }
.t-h3   { font-size: var(--fs-h3); }

.t-hero strong { font-weight: 500; }
.t-hero em { font-style: normal; font-weight: 300; color: var(--grey); }
.t-h2 strong, .t-h3 strong { font-weight: 500; }
.t-h2 em, .t-h3 em { font-style: normal; color: var(--grey-2); }
mark { background: none; color: var(--green); }

.t-body {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: -0.04em;
	color: var(--grey);
}
.t-body p + p { margin-top: 1em; }
.t-body a, .t-lead a { color: inherit; text-decoration: underline; text-underline-offset: .167em; text-decoration-thickness: 1px; }
.t-body a:hover, .t-lead a:hover { color: var(--red); }
.t-body strong { color: var(--black); font-weight: 600; }
.t-body ul, .t-body ol { margin-top: 1em; padding-left: 1.4em; }
.t-body ul { list-style: disc; }
.t-body li + li { margin-top: .4em; }
.t-body * + p { margin-top: 1em; }
.t-lead {
	font-size: var(--fs-body-lg);
	line-height: 1.3;
	letter-spacing: -0.04em;
	color: var(--black);
}

.label {
	font-family: var(--f-label);
	font-weight: 700;
	font-size: max(1.8rem, 13px);
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
}
.label--black { font-weight: 900; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
	--btn-bg: var(--red);
	--btn-fg: #fff;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 5.6rem;
	min-height: 40px;
	padding: 0 3.2rem;
	border: 0;
	border-radius: 8rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--f-head);
	font-weight: 600;
	font-size: var(--fs-btn);
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	transition: color .35s var(--ease), transform .35s var(--ease);
}
.btn::before {
	content: '';
	position: absolute; inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(0, 0, 0, .12);
	transform: translateY(101%);
	transition: transform .35s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(.98); }
.btn span { position: relative; }

.btn--white  { --btn-bg: #fff; --btn-fg: #0b0b0b; }
.btn--white::before { background: rgba(0, 0, 0, .07); }
.btn--lime   { --btn-bg: var(--lime); --btn-fg: #1e1e1e; }
.btn--cyan   { --btn-bg: var(--cyan); --btn-fg: #1e1e1e; }
.btn--dark   { --btn-bg: #1f1c1c; --btn-fg: #fff; }
.btn--dark::before { background: rgba(255, 255, 255, .14); }
.btn--grey   { --btn-bg: var(--grey-bg); --btn-fg: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; }
.btn-row--center { justify-content: center; }

/* Kleine pil ("Lees verder", "bekijk project") */
.pill {
	display: inline-flex; align-items: center;
	height: 4.6rem; padding: 0 2.2rem;
	border-radius: 8rem;
	background: #fff; color: #000;
	font-family: var(--f-label); font-weight: 700;
	font-size: max(1.8rem, 12px);
	letter-spacing: .1em; text-transform: uppercase;
}

/* Ronde pijlknoppen */
.slider-arrows { display: flex; gap: 1.7rem; }
.arrow-btn {
	display: grid; place-items: center;
	width: 4.7rem; height: 4.7rem;
	min-width: 36px; min-height: 36px;
	padding: 0;
	border: 0; border-radius: 50%;
	background: var(--black); color: #fff;
	transition: transform .3s var(--ease), background .3s;
}
.arrow-btn svg { width: 2.4rem; height: 2.4rem; min-width: 18px; min-height: 18px; }
.arrow-btn:hover { transform: scale(1.08); }
.arrow-btn[disabled] { opacity: .35; cursor: default; transform: none; }

.slider-controls { display: flex; align-items: center; gap: 4rem; }
.slider-controls--center { justify-content: center; }

.back-btn {
	display: inline-flex; align-items: center; gap: 1.8rem;
	color: var(--grey-2);
	font-size: var(--fs-small);
}
.back-btn__circle {
	display: grid; place-items: center;
	width: 4.7rem; height: 4.7rem; min-width: 34px; min-height: 34px;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--black);
	transition: background .3s, color .3s;
}
.back-btn__circle svg { width: 2.4rem; min-width: 16px; }
.back-btn:hover .back-btn__circle { background: var(--black); color: #fff; }
.back-btn__label { display: none; }
.back-btn--light .back-btn__circle { color: #fff; }
.back-btn--light:hover .back-btn__circle { background: #fff; color: var(--black); }

.icon-box {
	display: grid; place-items: center;
	width: 7.7rem; height: 7.6rem;
	border-radius: 1.1rem;
	background: #fff;
}
.icon-box img { width: 5rem; height: auto; }
.icon-box--red { background: rgba(243, 122, 114, .34); }
.icon-box--green { background: rgba(114, 243, 142, .34); }

/* --------------------------------------------------------------------------
   Containers & secties
   -------------------------------------------------------------------------- */

.container { width: min(100% - 2 * var(--gutter), var(--w-main)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--w-wide)); }
.container--text { width: min(100% - 2 * var(--gutter), var(--w-text)); }

.section-head { display: flex; flex-direction: column; gap: 2.8rem; }
.section-head--center { align-items: center; text-align: center; }

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

.site-header {
	position: relative;
	z-index: 50;
	height: 13.5rem;
}
.site-header--glass, .site-header--dark {
	position: absolute;
	top: 0; left: 0; right: 0;
}
/* Ingelogd: de WordPress-balk duwt de pagina omlaag; de zwevende header moet meeschuiven. */
.admin-bar .site-header--glass, .admin-bar .site-header--dark { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header--glass, .admin-bar .site-header--dark { top: 46px; }
}
.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	width: min(100% - 2 * var(--gutter), var(--w-wide));
	margin: 0 auto;
	padding-top: 4.3rem;
}
/* Overal dezelfde logomaat, zodat logo en menu niet verspringen tussen pagina's. */
.site-logo img { width: 23rem; min-width: 150px; height: auto; }

.nav-pill {
	justify-self: start;
	margin-left: 22.5rem;
	margin-top: .1rem;
	border-radius: 5rem;
	background: var(--grey-bg);
	color: #231f20;
}
.site-header--glass .nav-pill {
	background: rgba(255, 254, 254, .15);
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.site-header--dark .nav-pill { background: var(--grey-bg); }

.nav-pill__list {
	display: flex;
	align-items: center;
	height: 5.6rem;
	padding: 0 .95rem;
	list-style: none;
}
.nav-pill__item > a {
	position: relative;
	display: flex; align-items: center;
	height: 100%;
	padding: 1.6rem 1.75rem;
	font-family: var(--f-head);
	font-weight: 600;
	font-size: var(--fs-btn);
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}
.nav-pill__item > a::after {
	content: '';
	position: absolute;
	left: 1.75rem; right: 1.75rem; bottom: .9rem;
	height: 2px; border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease);
}
.nav-pill__item:not(.has-mega) > a:hover::after { transform: scaleX(1); }

.header-actions {
	display: flex;
	align-items: center;
	gap: 4.1rem;
	margin-top: .3rem;
}
.werkenbij-bubble {
	position: relative;
	display: block;
	width: 5.6rem; height: 5.6rem;
	min-width: 40px; min-height: 40px;
	border-radius: 50%;
	background: #0b0b0b;
}
.werkenbij-bubble img {
	position: absolute;
	left: 3.5%; top: 3.5%;
	width: 91%; height: 96%;
	border-radius: 40%;
	object-fit: cover;
}
.werkenbij-bubble__badge {
	position: absolute;
	top: -.2rem; right: 0;
	display: grid; place-items: center;
	min-width: 2.6rem; height: 2.6rem;
	padding: 0 .5rem;
	border-radius: 5rem;
	background: var(--red);
	color: #fff;
	font-family: var(--f-head);
	font-weight: 600;
	font-size: max(1rem, 9px);
	letter-spacing: -0.06em;
}
.btn--header { width: 19.6rem; padding: 0; }
.site-header--glass .btn--header, .site-header--dark .btn--header { --btn-bg: #fff; --btn-fg: var(--ink); }
.site-header--glass .btn--header::before, .site-header--dark .btn--header::before { background: rgba(0,0,0,.07); }

.menu-toggle, .menu-close {
	display: none;
	width: 48px; height: 48px;
	padding: 12px;
	border: 0; border-radius: 50%;
	background: var(--grey-bg);
	color: var(--black);
}

/* Mega-dropdown */
.mega {
	position: absolute;
	left: 50%;
	top: 12.1rem;
	width: 119.5rem;
	max-width: calc(100vw - 2 * var(--gutter));
	transform: translate(-50%, -1rem);
	margin-left: -3.4rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.mega[hidden] { display: block; }
.mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.mega::before {
	content: '';
	position: absolute;
	left: var(--caret-x, 35rem);
	top: 0;
	width: 2.33rem; height: 2.33rem;
	border-radius: .4rem;
	background: #fff;
	transform: translate(-50%, 0) rotate(45deg);
	transform-origin: center;
	top: .4rem;
}
.mega__card {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin-top: 1.5rem;
	padding: 6.4rem 6.2rem 5.5rem;
	min-height: 44rem;
	border-radius: 3rem;
	background: #fff;
	box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, .14);
	color: var(--black);
}
.mega__col .opl-icon { width: 3rem; height: auto; margin-bottom: 1rem; }
.mega__title {
	display: block;
	margin-bottom: 3.1rem;
	font-family: var(--f-head);
	font-weight: 500;
	font-size: var(--fs-btn);
	letter-spacing: -0.06em;
	line-height: 1.2;
}
.mega__list { list-style: none; }
.mega__list a {
	display: inline-block;
	font-size: var(--fs-body);
	line-height: 3.6rem;
	letter-spacing: -0.04em;
	transition: color .2s, transform .25s var(--ease);
}
.mega__list a:hover, .mega__title:hover { color: var(--red); }
.mega__list a:hover { transform: translateX(.4rem); }

.mega-backdrop {
	position: fixed; inset: 0;
	z-index: 40;
	background: rgba(31, 31, 31, .6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .3s var(--ease);
	pointer-events: none;
}
.mega-backdrop[hidden] { display: block; }
.mega-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Mobiel menu */
.mnav {
	position: fixed; inset: 0;
	z-index: 100;
	display: flex; flex-direction: column;
	padding: 20px 20px 32px;
	background: #fff;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .4s var(--ease);
}
.mnav[hidden] { display: flex; visibility: hidden; }
.mnav.is-open { transform: none; visibility: visible; }
.mnav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.mnav__top .site-logo img { width: 150px; }
.mnav__top .menu-close { display: block; }
.mnav__list { list-style: none; }
.mnav__item { border-bottom: 1px solid #e6e6e6; }
.mnav__item > a, .mnav__toggle {
	display: flex; justify-content: space-between; align-items: center;
	width: 100%;
	padding: 18px 0;
	border: 0; background: none;
	font-family: var(--f-head);
	font-size: 26px;
	letter-spacing: -0.05em;
	text-align: left;
}
.mnav__toggle svg { width: 22px; transition: transform .3s; }
.mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav__sub { padding: 0 0 20px; }
.mnav__sub ul { list-style: none; margin-bottom: 14px; }
.mnav__sub li a { display: block; padding: 5px 0; color: var(--grey); font-size: 16px; }
.mnav__group { margin: 12px 0 4px; font-family: var(--f-head); font-weight: 500; font-size: 18px; }
.mnav__all { display: inline-block; margin: 4px 0 6px; color: var(--red); font-weight: 600; }
.mnav__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mnav__actions .btn { height: 52px; font-size: 16px; }
body.mnav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	padding: 0 2.8rem 3.2rem 4.1rem;
	margin-top: 14rem;
}
.site-footer__card {
	position: relative;
	max-width: 187.9rem;
	margin: 0 auto;
	border-radius: 2rem;
	background: var(--dark);
	color: #fff;
	overflow: hidden;
}
.footer-cta { position: relative; height: 101rem; }
.footer-cta__media {
	position: absolute; inset: 0 -1.1rem 0 -1.1rem;
	overflow: hidden;
}
.footer-cta__media img, .footer-cta__media video {
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .55;
}
.footer-cta__media::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 78%;
	background: linear-gradient(to bottom, rgba(23, 23, 22, 0) 0%, rgba(23, 23, 22, .75) 55%, var(--dark) 100%);
}
.footer-cta__content {
	position: relative;
	padding-top: 34.8rem;
	text-align: center;
}
.footer-cta__title {
	max-width: 77rem;
	margin: 0 auto 9.9rem;
	transform: translateX(6rem);
	font-family: var(--f-head);
	font-size: var(--fs-xl);
	line-height: 1.2;
	letter-spacing: -0.06em;
}
.footer-cta .btn-row { gap: 2rem; transform: translateX(2.6rem); }
.footer-cta .btn--red { width: 23.3rem; padding: 0; }
.footer-cta .btn--lime { width: 18rem; height: 5.5rem; padding: 0; }

.footer-main {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 24.5rem 28.7rem 31.6rem;
	grid-template-areas:
		"brand col1 col2 col3"
		"team  .    .    .   "
		"bottom bottom bottom bottom";
	padding: 5.8rem 3rem 0 10.5rem;
	font-size: var(--fs-small);
	letter-spacing: -0.04em;
}
.site-footer--cta .footer-main { margin-top: -1.2rem; padding-top: 0; }
.footer-brand { grid-area: brand; }
.footer-logo img { width: 23rem; min-width: 150px; }
.footer-tagline { margin-top: 3.6rem; color: #fff; line-height: 1.005; }
.footer-contact { margin-top: 1.4rem; color: var(--grey-2); }
.footer-contact a:hover { color: #fff; }
.footer-cols { display: contents; }
.footer-col--1 { grid-area: col1; }
.footer-col { padding-top: .2rem; }
.footer-menu { list-style: none; color: var(--grey-2); }
.footer-menu li { line-height: 4rem; }
.footer-col--1 .footer-menu li { line-height: 1.005; }
.footer-col--1 .footer-menu li + li { margin-top: 3.5rem; }
.footer-col--1 { margin-top: 1.1rem; }
.footer-menu a { transition: color .2s; }
.footer-menu a:hover { color: #fff; }

.footer-team {
	grid-area: team;
	margin: 3.5rem 0 0 -9.3rem;
	width: 76.1rem;
}
.footer-team img { width: 100%; height: auto; }

.footer-robot {
	position: absolute;
	right: 4.8rem;
	top: -12.5rem;
	width: 10rem; height: 10.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	transition: transform .3s var(--ease);
}
.site-footer:not(.site-footer--cta) .footer-robot { top: auto; bottom: 3rem; display: none; }
.footer-robot img { width: 100%; height: 100%; object-fit: cover; }
.footer-robot:hover { transform: scale(1.06); }

.footer-bottom {
	grid-area: bottom;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	margin: 1.4rem 0 0 .6rem;
	padding-bottom: 3rem;
	color: var(--grey-2);
	line-height: 4rem;
}
.footer-legal { display: flex; flex-wrap: wrap; column-gap: 1.9rem; }
.footer-legal a:hover, .footer-credit:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Kaarten
   -------------------------------------------------------------------------- */

/* Blogkaart */
.post-card {
	position: relative;
	display: block;
	aspect-ratio: 660 / 440;
	border-radius: var(--r-md);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	background: var(--dark);
}
.post-card__media { position: absolute; inset: 0; z-index: -2; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 60%;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(1, 1, 1, 0) 0%, rgba(23, 23, 22, .82) 100%);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__tag {
	position: absolute;
	left: 3.7rem; top: 3rem;
	display: inline-flex; align-items: center;
	height: 3.1rem; padding: 0 1.9rem;
	border-radius: 2rem;
	background: #fff; color: var(--black);
	font-weight: 700;
	font-size: max(1.4rem, 12px);
	letter-spacing: -0.04em;
}
.post-card__body {
	position: absolute;
	left: 3.7rem; right: 5rem; bottom: 5.5rem;
	display: flex; flex-direction: column; align-items: flex-start;
}
.post-card__title {
	font-family: var(--f-head);
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: -0.06em;
}
.post-card__more {
	display: inline-flex; align-items: center;
	height: 4.6rem; padding: 0 2.2rem;
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	border-radius: 8rem;
	background: #fff; color: #000;
	font-family: var(--f-label); font-weight: 700;
	font-size: max(1.8rem, 12px);
	letter-spacing: .1em; text-transform: uppercase;
	transition: opacity .3s var(--ease), max-height .35s var(--ease), margin .35s var(--ease);
}
.post-card:hover .post-card__more, .post-card:focus-visible .post-card__more {
	max-height: 4.6rem; margin-top: 2rem; opacity: 1;
}
.post-card:hover .post-card__body, .post-card:focus-visible .post-card__body { bottom: 2.1rem; }
.post-card__body { transition: bottom .35s var(--ease); }

/* Verhaalkaart */
.story-card {
	position: relative;
	display: block;
	height: 32.6rem;
	border-radius: var(--r-lg);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	background: var(--dark-2);
}
.story-card__media { position: absolute; inset: 0; z-index: -2; }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.story-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(35, 31, 32, .5); }
.story-card:hover .story-card__media img { transform: scale(1.05); }
.story-card__body {
	position: absolute; left: 4.3rem; right: 3rem; top: 13.3rem;
	display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem;
}
.story-card__title { font-family: var(--f-head); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em; }
.story-card__btn {
	display: inline-flex; align-items: center;
	height: 5.6rem; padding: 0 3.2rem;
	border-radius: 8rem;
	background: var(--red); color: #fff;
	font-family: var(--f-head); font-weight: 600; font-size: var(--fs-btn); letter-spacing: 0;
	opacity: 0; transform: translateY(1rem);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.story-card--btn .story-card__btn, .story-card:hover .story-card__btn, .story-card:focus-visible .story-card__btn { opacity: 1; transform: none; }

/* Functiekaart (vacature) */
.functie-card {
	position: relative;
	display: block;
	width: 37.3rem; height: 43.1rem;
	border-radius: var(--r-lg);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	background: var(--dark);
}
.functie-card__media { position: absolute; inset: 0; z-index: -2; }
.functie-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.functie-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: -1; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35)); }
.functie-card:hover .functie-card__media img { transform: scale(1.05); }
.functie-card__title {
	position: absolute; left: 3.9rem; right: 3rem; bottom: 2.8rem;
	font-family: var(--f-head); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em;
}

/* Oplossingskaart (bento: witte kaart met icoon, titel en tekst) */
.opl-panel {
	display: grid;
	grid-template-columns: 64.1rem 31rem 31rem;
	gap: 2.8rem 1.7rem;
	padding: 3.6rem 3.3rem;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
}
.opl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 50.3rem;
	padding: 3.8rem 3.2rem 5rem 4rem;
	border-radius: var(--r-xl);
	background: #fff;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.opl-card:hover { transform: translateY(-.6rem); box-shadow: 0 2rem 4rem rgba(0,0,0,.07); }
.opl-card .icon-box { margin-left: -.8rem; }
.opl-card__title { margin-top: auto; font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em; }
.opl-card__text { margin-top: 2.2rem; min-height: 10.2rem; color: var(--grey-2); font-size: var(--fs-body); line-height: var(--lh-body); }
.opl-card--wide { display: grid; grid-template-columns: 1fr 26.4rem; column-gap: 2rem; padding-right: 2.7rem; }
.opl-card--wide .opl-card__photo { grid-column: 2; grid-row: 1 / span 3; height: 41.1rem; border-radius: var(--r-sm); overflow: hidden; }
.opl-card--wide .opl-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.opl-card--wide .icon-box, .opl-card--wide .opl-card__title, .opl-card--wide .opl-card__text { grid-column: 1; }
.opl-card--wide .opl-card__title { align-self: end; }

/* --------------------------------------------------------------------------
   Homepage
   -------------------------------------------------------------------------- */

.home-hero {
	position: relative;
	height: 114.7rem;
	padding: 2.1rem 2.5rem 0;
}
.home-hero__bg {
	position: absolute;
	left: 2.5rem; right: 2.3rem; top: 2.1rem;
	height: 101.7rem;
	border-radius: var(--r-md);
	overflow: hidden;
	background: #3a8fdd;
}
.home-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__line {
	position: absolute;
	left: 2.5rem; top: 55.8rem;
	width: 113.2rem; height: 58.9rem;
	transform: scaleX(-1);
	pointer-events: none;
}
.home-hero__content {
	position: relative;
	width: min(100% - 2 * var(--gutter), var(--w-wide));
	margin: 0 auto;
	padding-top: 38.7rem;
}
.home-hero .t-hero { color: #fff; max-width: 70rem; }
.home-hero .t-hero em { font-weight: 400; color: var(--sky); }
.home-hero .btn { margin-top: 21.1rem; margin-left: -.2rem; width: 23.5rem; padding: 0; }
.home-hero__photo { position: absolute; overflow: hidden; }
.home-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__photo--big { left: calc(50% + 29.3rem); top: 42.3rem; width: 52.2rem; height: 65.2rem; border-radius: 3.3rem; }
.home-hero__photo--small { left: calc(50% - 3.6rem); top: 76.5rem; width: 29.8rem; height: 39.5rem; border-radius: var(--r-sm); }
.home-hero__logos { position: absolute; left: calc(50% - 91.7rem); top: 108.2rem; width: 82.7rem; }
.home-hero__logos img { width: 100%; height: 6.5rem; object-fit: cover; object-position: left center; mix-blend-mode: multiply; }

.home-intro { padding: 17.9rem var(--gutter) 0; text-align: center; }
.home-intro__text {
	max-width: 74rem;
	margin: 0 auto;
	transform: translateX(-1rem);
	font-family: var(--f-head);
	font-size: var(--fs-h2);
	line-height: 1.2;
	letter-spacing: -0.06em;
}
.home-intro__text em { font-style: normal; color: var(--grey-3); }

.home-bento { padding-top: 8.7rem; }
.home-bento__grid {
	display: grid;
	grid-template-columns: 85.5rem 42.7rem;
	grid-template-rows: 32.6rem 4rem 13.8rem 18.7rem;
	column-gap: 3.3rem;
	width: 131.5rem;
	max-width: calc(100% - 2 * var(--gutter));
	margin: 0 auto;
}
.bento-card {
	position: relative;
	display: block;
	border-radius: 2.7rem;
	overflow: hidden;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bento-card:hover { transform: translateY(-.6rem); box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, .12); }
.bento-card .icon-box { position: absolute; right: 3.1rem; top: 3.6rem; }
.bento-card__title { font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em; }
.bento-card__text { margin-top: 2.1rem; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: -0.04em; }
.bento-card--grey { grid-column: 1; grid-row: 1; padding: 7.4rem 30rem 0 6.9rem; background: var(--grey-bg); }
.bento-card--grey .bento-card__title { max-width: 28rem; }
.bento-card--grey .bento-card__text { margin-top: 2.1rem; max-width: 45rem; }
.bento-card--gradient {
	grid-column: 1; grid-row: 3 / span 2;
	padding: 6.5rem 30rem 0 8rem;
	background: linear-gradient(90deg, #9aee7f 1%, #00aab7 52%, #172b33 100%);
}
.bento-card--gradient .icon-box { top: 3.6rem; }
.bento-card--gradient .bento-card__title { max-width: 28rem; color: #000; }
.bento-card--gradient .bento-card__text { color: #fff; font-size: var(--fs-body-lg); line-height: 1.3; max-width: 51rem; }
.bento-card--red {
	grid-column: 2; grid-row: 1 / span 3;
	height: 50.4rem;
	padding: 6.7rem 6rem 0 5rem;
	width: 41.8rem;
	background: linear-gradient(to top, var(--red) 0%, var(--red-light) 100%);
	color: #fff;
}
.bento-card--red .bento-card__text { margin-top: 4rem; max-width: 29.1rem; color: var(--black); }
.bento-card--dark {
	grid-column: 2; grid-row: 4;
	align-self: end;
	height: 13.9rem;
	margin-top: 4.9rem;
	background: var(--dark-2);
	color: #fff;
	padding: 3rem 0 0 3.2rem;
}
.bento-card__label { display: block; font-size: max(1.8rem, 11px); }
.bento-card__vac { position: absolute; left: 2.8rem; top: 7.1rem; font-family: var(--f-head); font-size: 3.2rem; letter-spacing: -0.06em; line-height: 1.2; }
.bento-card__count { position: absolute; left: 19.9rem; top: 6.4rem; font-family: var(--f-head); font-size: var(--fs-h2); letter-spacing: -0.06em; line-height: 1.2; }
.bento-card__img { position: absolute; left: 25.4rem; bottom: 0; width: 14.9rem; }
.bento-card__img img { width: 100%; height: auto; }

/* Projectenslider */
.projects-carousel { padding-top: 21.9rem; overflow-x: clip; }
/* Cascading: posities en breedtes zet main.js; zonder JS staat de actieve kaart in het midden. */
.cascade { --cascade-w: 137.2rem; --cascade-speed: .8s; position: relative; }
.cascade__track { position: relative; height: 91.5rem; touch-action: pan-y; }
.cascade__slide {
	position: absolute; top: 0; bottom: 0;
	left: calc(50% - var(--cascade-w) / 2); width: var(--cascade-w);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: left var(--cascade-speed) var(--ease-cascade), width var(--cascade-speed) var(--ease-cascade), opacity .4s;
}
.cascade__slide:not(.is-active) { cursor: pointer; }
.cascade__slide.no-anim { transition: none; }
.cascade.is-ready .cascade__slide { will-change: left, width; }
.cascade .project-slide { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--cascade-w); height: auto; transform: translateX(-50%); }
.project-slide {
	position: relative;
	height: 91.5rem;
	border-radius: var(--r-md);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	background: var(--dark);
}
.project-slide__media { position: absolute; inset: 0; z-index: -3; }
.project-slide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project-slide::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 63%;
	z-index: -2;
	background: linear-gradient(to bottom, rgba(1, 1, 1, 0) 0%, rgba(23, 23, 22, .88) 72%, rgba(23, 23, 22, .92) 100%);
}
.project-slide__line {
	position: absolute;
	right: 0; bottom: 0;
	width: 86%;
	transform: scaleX(-1) translateX(-1%);
	opacity: .55;
	z-index: -1;
	pointer-events: none;
	display: none;
}
.project-slide__body { position: absolute; left: 17.3rem; bottom: 8.2rem; right: 17.3rem; }
.project-slide__title { max-width: 77rem; font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.06em; }
.project-slide .btn { margin-top: 5.4rem; width: 20rem; padding: 0; }
.cascade__slide:not(.is-active) .project-slide__body { opacity: 0; transition: opacity .25s; }
.cascade__slide.is-active .project-slide__body { opacity: 1; transition: opacity .5s .35s; }
.projects-carousel .slider-controls { margin-top: 5.8rem; gap: 4.9rem; transform: translateX(-2.6rem); }
.projects-carousel .slider-arrows { gap: 1.7rem; }
.projects-carousel .slider-controls .btn { width: 21.7rem; padding: 0; }

/* Werken & leren */
.werken-leren { padding: 17rem 2.5rem 0 3rem; }
.werken-leren__panel {
	max-width: 189.3rem;
	margin: 0 auto;
	padding: 9.7rem 0 13.6rem;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
	overflow: hidden;
}
.werken-leren .section-head { gap: 3.2rem; }
.wl-grid {
	display: flex;
	flex-direction: column;
	gap: 3.1rem;
	width: 130.5rem;
	max-width: calc(100% - 2 * var(--gutter));
	margin: 8rem auto 0;
	transform: translateX(-.3rem);
}
.wl-row { display: grid; gap: 3.4rem; }
.wl-row--top { grid-template-columns: 41.6rem 1fr; height: 32.6rem; }
.wl-row--stories { grid-template-columns: 63.2rem 63.2rem; gap: 3.7rem; }
.wl-dark {
	position: relative;
	padding: 8.4rem 0 0 8.5rem;
	border-radius: 2.7rem;
	background: var(--dark-2);
	color: #fff;
	transition: transform .45s var(--ease);
}
.wl-dark:hover { transform: translateY(-.5rem); }
.wl-dark__title { display: block; max-width: 28rem; }
.wl-dark__badge {
	position: absolute; left: 28.8rem; top: 8.4rem;
	display: grid; place-items: center;
	min-width: 3.5rem; height: 3.4rem; padding: 0 .6rem;
	border-radius: 8rem;
	background: var(--red);
	font-family: var(--f-head); font-size: max(1.5rem, 11px); letter-spacing: -0.06em;
}
.wl-white {
	padding: 4.5rem 6rem 0 6.4rem;
	border-radius: 2.7rem;
	background: #fff;
}
.wl-white .t-body { margin-top: 2.4rem; max-width: 74rem; }
.wl-white .btn-row { margin-top: 3rem; gap: 2.6rem; }
.wl-white .btn--red { width: 21.7rem; padding: 0; }
.wl-white .btn--cyan { width: 23.2rem; height: 5.5rem; padding: 0; }
.wl-grid .story-card { height: 32.6rem; }
.wl-row--stories .story-card:nth-child(2) .story-card__body { top: 18.3rem; left: 4.5rem; }

.functies { width: min(100% - 2 * var(--gutter), 159.8rem); margin: 6.7rem auto 0; transform: translateX(-.8rem); }
.werken-leren .functies { margin-left: calc(50% - 64.9rem - .3rem); width: auto; transform: none; margin-right: 0; }
.functies__title { margin-bottom: 4.1rem; }
.functies__slider .splide__track { overflow: visible; clip-path: inset(-5rem -100vw -5rem 0); }
.functies__slider .splide__slide { width: 37.3rem; }
.functies .slider-controls { margin-top: 6.7rem; margin-left: 1.3rem; gap: 7.7rem; }
.functies .slider-controls .btn { width: 21.7rem; padding: 0; }

/* Oplossingen (USP) */
.home-usp { padding-top: 11.5rem; }
.home-usp .section-head { gap: 3rem; }
.home-usp .t-h2 { max-width: 77rem; transform: translateX(2rem); }
.usp-panel {
	display: grid;
	grid-template-columns: repeat(2, 60.4rem);
	gap: 3.7rem 4.1rem;
	width: 137.3rem;
	max-width: calc(100% - 2 * var(--gutter));
	margin: 6.3rem auto 0;
	padding: 6.3rem 5.7rem 4.6rem;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
	justify-content: start;
	transform: translateX(.7rem);
}
.usp-card {
	display: flex; flex-direction: column; align-items: center;
	height: 47.4rem;
	padding: 3.2rem 3.2rem 0;
	border-radius: var(--r-xl);
	background: #fff;
	text-align: center;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
a.usp-card:hover { transform: translateY(-.6rem); box-shadow: 0 2rem 4rem rgba(0,0,0,.07); }
.usp-card__illu { width: 31.6rem; height: 24.6rem; display: grid; place-items: center; }
.usp-card__illu img { max-width: 100%; max-height: 100%; width: auto; }
.usp-card__title { margin-top: 3.8rem; font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em; }
.usp-card__text { margin-top: 3.1rem; max-width: 54rem; color: var(--grey); font-size: var(--fs-body); line-height: var(--lh-body); }

/* Actueel */
.home-news {
	display: grid;
	grid-template-columns: 1fr 66rem;
	width: min(100% - 2 * var(--gutter), var(--w-news));
	margin: 25.2rem auto 0;
	padding-bottom: 13.2rem;
}
.home-news__intro {
	position: sticky;
	top: 6rem;
	align-self: start;
	padding-top: 6.1rem;
}
.home-news__intro .t-h2 { margin-top: 2.6rem; }
.home-news__intro .btn { margin-top: 5.8rem; width: 21.7rem; padding: 0; }
.home-news__list { display: flex; flex-direction: column; gap: 6rem; }

/* --------------------------------------------------------------------------
   Sliders (Splide)
   -------------------------------------------------------------------------- */

.splide__slide { transform-origin: 50% 60%; }
.is-cascading .splide__slide { transition: transform .62s var(--ease); }
.splide.is-initialized:not(.is-active) .splide__list { display: flex; }
.splide:not(.is-initialized) .splide__list { display: flex; gap: 4.1rem; }
.splide:not(.is-initialized) { visibility: visible; }

/* --------------------------------------------------------------------------
   Scroll-animaties (progressive enhancement)
   -------------------------------------------------------------------------- */

.js [data-reveal] { opacity: 0; translate: 0 3rem; transition: opacity .9s var(--ease), translate .9s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1; translate: none; transition: none; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Variabel lettergewicht bij hover op de hero-titels */
[data-fx="weight"] .fx-ch { -webkit-text-stroke: 0 currentColor; } /* dikte en animatie: main.js */

/* ==========================================================================
   Subpagina's — gedeelde secties
   ========================================================================== */

/* Hero met foto over de volle breedte (oplossingen, project) */
.hero-photo {
	position: relative;
	height: 89.7rem;
	margin: 0 2.4rem;
	border-radius: var(--r-md);
	overflow: hidden;
	isolation: isolate;
	background: var(--grey-bg);
}
.hero-photo__media { position: absolute; inset: 0; z-index: -2; }
.hero-photo__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo__line {
	position: absolute; z-index: -1;
	left: 0; bottom: 0;
	width: 118.1rem; height: 44.8rem;
	transform: scaleX(-1);
	pointer-events: none;
}
.hero-photo__content { position: absolute; left: 16.7rem; top: 15.9rem; max-width: 70rem; }
.hero-photo__text { margin-top: 4.1rem; max-width: 55.4rem; line-height: 1.26; }
.hero-photo--project { color: #fff; }
.hero-photo--project::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 100%);
}
.hero-photo--project .hero-photo__content { left: 17.3rem; top: 35.1rem; }
.hero-photo--project .t-hero em { color: #fff; }
.hero-photo--project .hero-photo__text { color: #fff; margin-top: 4rem; line-height: 1.3; }
.hero-photo__back { position: absolute; left: 15.7rem; top: 6.1rem; }

/* Hero: grijs tekstvlak + foto */
.hero-split {
	display: grid;
	grid-template-columns: 66.5rem 1fr;
	gap: 1.1rem;
	height: 89.7rem;
	margin: 0 2.4rem 0 2.1rem;
}
.hero-split--wide { grid-template-columns: 95.1rem 1fr; gap: 2.2rem; }
.hero-split__panel {
	position: relative;
	display: flex; flex-direction: column; justify-content: center;
	padding: 0 4rem 0 15.5rem;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
}
.hero-split__panel .back-btn { position: absolute; left: 16rem; top: 6.1rem; }
.hero-split__panel .back-btn__circle { background: var(--grey-bg); }
.hero-split__content { margin-top: -4rem; }
.hero-split--detail .hero-split__panel { justify-content: flex-end; padding-bottom: 20rem; }
.hero-split--detail .hero-split__content { margin-top: 0; }
.hero-split--detail .hero-split__text { margin-top: 3.9rem; }
.hero-split--wide .hero-split__content { margin-top: 2.9rem; }
.hero-split__content .label { margin-bottom: 2.8rem; }
.hero-split__text { margin-top: 3.2rem; max-width: 33rem; line-height: 1.26; }
.hero-split__text p + p { margin-top: 1.26em; }
.hero-split__btns { margin-top: 4.6rem; }
.hero-split--wide .hero-split__panel { padding-left: 16.5rem; }
.hero-split--wide .hero-split__text { max-width: 67.3rem; margin-top: 4.7rem; line-height: 1.3; }
.hero-split--wide .t-hero em { color: #afafaf; }
.hero-split__media { border-radius: var(--r-md); overflow: hidden; background: var(--grey-bg); }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Hero met gecentreerde titel over een foto (werken bij, vacatures) */
.hero-center {
	position: relative;
	display: grid; place-items: center;
	height: 100.8rem;
	margin: 0 2.4rem;
	padding-top: 2.4rem;
	border-radius: var(--r-md);
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	text-align: center;
}
.dark-zone .hero-center { top: 2.4rem; margin-bottom: 2.4rem; }
.hero-center__media { position: absolute; inset: 0; z-index: -2; }
.hero-center__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-center::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .22); }
.hero-center__content { transform: translate(-1.8rem, 10.1rem); }
.hero-center .btn-row { margin-top: 9.9rem; gap: 2.8rem; }
.hero-center .btn--red { width: 21.7rem; padding: 0; }
.hero-center .btn--cyan { width: 23.2rem; height: 5.5rem; padding: 0; }
.hero-center--light { height: 88.4rem; margin-top: 1.3rem; }
.hero-center--light .hero-center__content { transform: translate(-1.8rem, -3.8rem); }
.hero-center--light .t-hero { font-weight: 500; }

/* Donkere zone bovenaan (werken bij) */
.dark-zone {
	margin-top: -13.5rem;
	padding-bottom: 11.8rem;
	background: var(--dark);
	color: #fff;
	border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.site-header--dark + .mega-backdrop + .mnav + .site-main .dark-zone,
.site-header--dark ~ .site-main .dark-zone { margin-top: 0; }
.dark-zone .t-body { color: var(--grey); }

/* Intro: gecentreerde titel + tekst */
.intro-center {
	width: min(100% - 2 * var(--gutter), 95rem);
	margin: 13.8rem auto 0;
	text-align: center;
}
.intro-center .t-body { margin-top: 4.3rem; }
.intro-center--detail { margin-top: 12.6rem; transform: translateX(3rem); }

/* Twee kolommen (titel + tekst) */
.two-cols {
	display: grid;
	grid-template-columns: 58.9rem 58.9rem;
	column-gap: 12.4rem;
	width: min(100% - 2 * var(--gutter), 130.2rem);
	margin: 10.4rem auto 0;
	transform: translateX(.9rem);
}
.two-cols .t-body { margin-top: 3.3rem; max-width: 56.4rem; }

.big-image {
	width: min(100% - 2 * var(--gutter), 134.8rem);
	aspect-ratio: 1348 / 793;
	margin: 11rem auto 0;
	border-radius: 3.3rem;
	overflow: hidden;
	transform: translateX(4.4rem);
}
.big-image img { width: 100%; height: 100%; object-fit: cover; }
.big-image--project { width: min(100% - 2 * var(--gutter), 141.9rem); aspect-ratio: 1419 / 792; border-radius: 3.9rem; margin-top: 10rem; transform: translateX(-.5rem); }
.big-image--page { margin-top: 6rem; transform: none; }

.wide-image {
	width: min(100% - 2 * var(--gutter), 186.1rem);
	aspect-ratio: 1861 / 835;
	margin: 18.8rem auto 0;
	border-radius: 5.1rem;
	overflow: hidden;
	transform: translateX(-.7rem);
}
.wide-image img { width: 100%; height: 100%; object-fit: cover; }

/* Artikel: label + titel + editor-inhoud */
.article {
	width: min(100% - 2 * var(--gutter), 95rem);
	margin: 15.9rem auto 0;
	transform: translateX(3.2rem);
}
.article > .t-h2 { margin-top: 4.6rem; max-width: 88.1rem; }
.article > .entry-content { margin-top: 7.9rem; }
.article--center { width: min(100% - 2 * var(--gutter), 84.8rem); transform: translateX(-6rem); margin-top: 14.3rem; }
.article--center > .t-h2 { margin-top: 0; }
.article--center > .entry-content { margin-top: 3.9rem; }

/* Tekst met afbeelding */
.text-image {
	--ti-text: 58.9rem;
	--ti-img: 58.1rem;
	--ti-edge: 2.7rem;
	display: grid;
	grid-template-columns: var(--ti-text) 1fr var(--ti-img) var(--ti-edge);
	align-items: start;
	width: min(100% - 2 * var(--gutter), var(--w-main));
	margin: 17.9rem auto 0;
}
.text-image__text { grid-column: 1; grid-row: 1; padding-top: 2.1rem; }
.text-image__text .label + .t-h2 { margin-top: 4.5rem; }
.text-image__text .t-body { margin-top: 3.1rem; max-width: 56.4rem; }
.text-image__btn { margin-top: 3.2rem; }
.text-image__media { grid-column: 3; grid-row: 1; aspect-ratio: 581 / 387; border-radius: 3.3rem; overflow: hidden; }
.text-image__media img { width: 100%; height: 100%; object-fit: cover; }
.text-image--reverse { --ti-edge: 2.5rem; --ti-text-edge: 4.7rem; grid-template-columns: var(--ti-edge) var(--ti-img) 1fr var(--ti-text) var(--ti-text-edge); }
.text-image--reverse .text-image__media { grid-column: 2; }
.text-image--reverse .text-image__text { grid-column: 4; padding-top: 1.6rem; }
.text-image--nolabel { margin-top: 16.2rem; }
.text-image--nolabel .text-image__text { padding-top: 7.9rem; margin-left: 6.4rem; margin-right: -6.4rem; }
.text-image--nolabel .text-image__text .t-body { margin-top: 2.2rem; }
.text-image--dark { color: #fff; }
/* Oplossingenblok */
.opl-bento { width: min(100% - 2 * var(--gutter), var(--w-main)); margin: 10.9rem auto 0; }
.opl-bento__title { max-width: 74rem; margin: 0 auto 8.1rem; text-align: center; transform: translateX(-.8rem); }
.opl-card { min-height: 50.3rem; padding: 3.8rem 3rem 3rem 3.2rem; }
.opl-card .icon-box { margin-left: 0; }
.opl-card .icon-box img { width: 5rem; }
.opl-card__title { margin-top: 12.3rem; min-height: 9.4rem; padding-left: .5rem; }
.opl-card__text { margin-top: 0; min-height: 0; padding-left: .5rem; max-width: 27.7rem; }
.opl-card--wide { grid-template-columns: 1fr 26.4rem; grid-template-rows: auto auto 1fr; column-gap: 2rem; padding: 3.8rem 2.6rem 3rem 3.2rem; }
.opl-card--wide .opl-card__title, .opl-card--wide .opl-card__text { padding-left: .8rem; }
.opl-card--wide .opl-card__photo { grid-row: 1 / span 3; align-self: start; }
.opl-card--wide .opl-card__title { align-self: start; margin-top: 12.3rem; }
.opl-panel > .opl-card:nth-child(2) { margin-left: 1.1rem; margin-right: -1.1rem; }
.opl-panel > .opl-card:nth-child(3) { margin-left: 1.1rem; margin-right: -1.1rem; }
.opl-panel > .opl-card:nth-child(3) .icon-box { margin-left: -.6rem; }
.opl-panel > .opl-card:nth-child(3) .opl-card__title, .opl-panel > .opl-card:nth-child(3) .opl-card__text { padding-left: .3rem; }

/* Raster met oplossingen + foto's */
.opl-grid-section { width: min(100% - 2 * var(--gutter), var(--w-main)); margin: 10.9rem auto 0; }
.opl-grid-section__title { margin-bottom: 5.4rem; text-align: center; transform: translateX(-.8rem); }
.opl-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.3rem 2.4rem;
	padding: 3.6rem 2.6rem 4.6rem 3.5rem;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
	transform: translateX(5.8rem);
}
.opl-grid__photo { grid-column: span 2; height: 32.8rem; border-radius: var(--r-lg); overflow: hidden; }
.opl-grid__photo img { width: 100%; height: 100%; object-fit: cover; }
.opl-mini {
	display: block;
	min-height: 30.2rem;
	padding: 4.8rem 2.4rem 3rem 2.9rem;
	border-radius: var(--r-xl);
	background: #fff;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.opl-grid > .opl-mini:nth-child(-n+3) { align-self: start; margin-top: 1rem; min-height: 30.2rem; }
.opl-grid > .opl-mini:nth-child(n+4) { min-height: 32.8rem; padding-top: 6.6rem; }
.opl-mini:hover { transform: translateY(-.6rem); box-shadow: 0 0 1.3rem rgba(0, 0, 0, .25); }
.opl-mini__title { font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em; }
.opl-mini__text { margin-top: 3.8rem; color: var(--grey-2); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 25rem; }

/* Team */
.team {
	display: grid;
	grid-template-columns: 34.3rem 1fr;
	align-items: start;
	margin: 41.7rem 0 0 calc(50% - 81.9rem);
	overflow: hidden;
	padding: 1rem 0 1rem 0;
}
.team__intro { padding-top: 5.3rem; }
.team__intro .t-h2 { margin-top: 4.1rem; white-space: nowrap; }
.team__intro .t-body { margin-top: 3.5rem; max-width: 28.3rem; }
.team__intro .slider-arrows { margin-top: 5.9rem; margin-left: .2rem; gap: 1.8rem; }
.team__slider .splide__track { overflow: visible; clip-path: inset(-3rem -100vw -3rem -1.2rem); }
.team__slider .splide__slide { width: 43.2rem; }
.person-card {
	height: 71.9rem;
	padding: 2.9rem 1.8rem 2rem;
	border-radius: 1.7rem;
	background: #fff;
	box-shadow: 0 0 .8rem rgba(0, 0, 0, .25);
}
.person-card__photo { height: 52rem; border-radius: var(--r-sm); overflow: hidden; background: var(--grey-bg); }
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.person-card__name { margin-top: 3.2rem; padding-left: .4rem; font-family: var(--f-head); font-weight: 600; font-size: var(--fs-btn); letter-spacing: -0.06em; line-height: 1.2; }
.person-card__role { margin-top: 1.8rem; padding-left: .2rem; color: var(--grey); font-size: var(--fs-small); line-height: 1; }
.person-card__links { display: flex; justify-content: space-between; align-items: center; margin-top: 4.8rem; padding-right: 2rem; font-size: max(1.2rem, 11px); line-height: 1; }
.person-card__li { display: inline-flex; align-items: center; gap: .7rem; color: #0066c8; }
.person-card__li svg { width: 1.33rem; min-width: 12px; }
.person-card__mail { display: inline-flex; align-items: center; gap: .6rem; color: var(--grey); margin-left: auto; }
.person-card__mail svg { width: 1.81rem; min-width: 14px; color: var(--black); }
.person-card__li:hover span, .person-card__mail:hover span { text-decoration: underline; }

/* Video */
.video-block {
	position: relative;
	width: min(100% - 2 * var(--gutter), 136.2rem);
	aspect-ratio: 1362 / 709;
	margin: 18.4rem auto 0;
	border-radius: 4.7rem;
	overflow: hidden;
	background: #000;
	transform: translateX(-.7rem);
}
.video-block__media, .video-block__media img, .video-block__media video, .video-block__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-block__play {
	position: absolute; left: 50%; top: 50%;
	display: grid; place-items: center;
	width: 10rem; height: 10rem; min-width: 56px; min-height: 56px;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .9); color: var(--black);
	transform: translate(-50%, -50%);
	transition: transform .35s var(--ease), background .3s;
}
.video-block__play svg { width: 3.6rem; min-width: 22px; margin-left: .4rem; }
.video-block__play:hover { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.video-block.is-playing .video-block__play { display: none; }
.video-block--narrow { width: min(100% - 2 * var(--gutter), 132.3rem); aspect-ratio: 1323 / 686; border-radius: 0; margin-top: 12.4rem; transform: translateX(3.2rem); }

/* FAQ */
.faq { width: min(100% - 2 * var(--gutter), 93.2rem); margin: 22.1rem auto 0; padding-bottom: 2.4rem; transform: translateX(.5rem); }
.faq__title { max-width: 89.8rem; }
.faq__list { margin-top: 14.4rem; }
.faq__item { border-bottom: 1px solid rgba(0, 0, 0, .2); }
.faq__item:last-child { border-bottom: 0; }
.faq__h { font: inherit; }
.faq__q {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
	width: 100%;
	padding: 2.2rem 0 1.8rem .4rem;
	border: 0; background: none;
	font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em;
	text-align: left;
}
.faq__item:first-child .faq__q { padding-top: 0; padding-left: 0; }
.faq__icon { flex: none; width: 3rem; height: 3rem; margin-top: .3rem; opacity: 0; transition: transform .35s var(--ease), opacity .3s; }
.faq__q:hover .faq__icon, .faq__q:focus-visible .faq__icon { opacity: 1; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { overflow: hidden; transition: height .4s var(--ease); }
.faq__a-inner { padding: 0 4rem 2.6rem .4rem; }

/* Contactstrook */
.contact-cta { margin: 13.9rem 2.8rem 0 2.9rem; }
.contact-cta__card {
	display: grid;
	grid-template-columns: 19.3rem 1fr auto;
	align-items: start;
	column-gap: 10.2rem;
	max-width: 189rem;
	min-height: 51.3rem;
	margin: 0 auto;
	padding: 15.7rem 29.7rem 5rem 16.8rem;
	border-radius: 1.9rem;
	background: var(--grey-bg);
}
.contact-cta__photo { height: 24.5rem; border-radius: var(--r-sm); overflow: hidden; }
.contact-cta__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-cta__text { padding-top: 1.4rem; }
.contact-cta__text .t-h2 { margin-top: 4rem; margin-left: -.4rem; }
.contact-cta__mail { display: inline-flex; align-items: center; gap: .7rem; margin-top: 4rem; margin-left: -.4rem; color: var(--grey); font-size: max(1.2rem, 11px); }
.contact-cta__mail svg { width: 1.81rem; min-width: 14px; color: var(--black); }
.contact-cta__mail:hover span { text-decoration: underline; }
.contact-cta__btn { padding-top: 7.5rem; }
.contact-cta__btn .btn { width: 21.7rem; padding: 0; }

/* Grijze zone (projectenoverzicht) */
.grey-zone {
	margin: -11.3rem 1.8rem 0 3rem;
	padding: 11.3rem 0 29.2rem;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
}
.page-intro { padding: 12.6rem var(--gutter) 0; text-align: center; }
.page-intro .t-lead { margin-top: 4rem; line-height: 1.26; }
.grey-zone .page-intro { padding-top: 12.6rem; }
.page-intro--blog { padding-top: 12.6rem; }
.page-intro--blog .t-lead { margin-top: 6.5rem; }
.page-intro--blog .t-hero em { color: inherit; }
.page-intro--simple { padding-top: 10rem; padding-bottom: 2rem; }
.page-intro--404 { padding: 14rem var(--gutter) 6rem; }
.page-intro--404 .t-hero { margin-top: 2rem; }
.page-intro--404 .t-lead { margin: 3rem auto 0; max-width: 60rem; }
.page-intro--404 .btn-row { margin-top: 4rem; }

/* Projectenoverzicht */
.project-list { display: flex; flex-direction: column; gap: 12.6rem; width: min(100% - 2 * var(--gutter), 132.3rem); margin: 16.9rem auto 0; transform: translateX(2.1rem); }
.project-big {
	position: relative;
	display: block;
	aspect-ratio: 1323 / 882;
	border-radius: var(--r-md);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	background: var(--dark);
}
.project-big__media { position: absolute; inset: 0; z-index: -3; }
.project-big__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project-big:hover .project-big__media img { transform: scale(1.03); }
.project-big::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 63%; z-index: -2; background: linear-gradient(to bottom, rgba(1,1,1,0) 0%, rgba(23,23,22,.85) 75%, rgba(23,23,22,.9) 100%); }
.project-big__line { position: absolute; z-index: -1; left: 0; bottom: 0; width: 89%; transform: scaleX(-1); pointer-events: none; }
.project-big__body { position: absolute; left: 16.7rem; right: 10rem; bottom: 8.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: 4.4rem; }
.project-big__title { max-width: 74.2rem; font-family: var(--f-head); font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.06em; }
.project-big .pill { height: 4.4rem; padding: 0 2.1rem; font-size: max(1.8rem, 12px); }

.project-grid { display: grid; grid-template-columns: repeat(2, 66rem); gap: 7.1rem 4.8rem; width: min(100% - 2 * var(--gutter), 137.2rem); margin: 15.5rem auto 0; justify-content: center; transform: translateX(2.1rem); }
.project-list:empty { display: none; }
.project-list + .project-grid { margin-top: 15.5rem; }
.post-card--project .post-card__tag { display: none; }

/* Blog-overzicht */
.post-grid { display: grid; grid-template-columns: repeat(2, 66rem); gap: 6rem 4.3rem; justify-content: center; width: min(100% - 2 * var(--gutter), 137.2rem); margin: 20rem auto 0; transform: translateX(1.1rem); }
.blog .opl-bento { margin-top: 16.5rem; transform: translateX(2.7rem); }
.post-grid--more { margin-top: 17.5rem; }
.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 8rem; font-family: var(--f-head); font-size: var(--fs-btn); }
.pagination .page-numbers { display: grid; place-items: center; min-width: 4.7rem; height: 4.7rem; min-height: 36px; min-width: 36px; padding: 0 1rem; border-radius: 5rem; background: #fff; transition: background .2s, color .2s; }
.grey-zone .pagination .page-numbers { background: #fff; }
body:not(:has(.grey-zone .pagination)) .pagination .page-numbers { background: var(--grey-bg); }
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--black); color: #fff; }
.pagination svg { width: 2rem; min-width: 16px; }
.empty-state { padding: 8rem var(--gutter); text-align: center; }

/* Blogbericht */
.post-hero { position: relative; margin: 0 3.1rem 0 2.1rem; }
.post-hero__panel {
	position: relative;
	height: 89.7rem;
	padding: 13.8rem 3rem 0;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
	text-align: center;
}
.post-hero__panel .back-btn { position: absolute; left: 16.5rem; top: 6.1rem; }
.post-hero__panel .back-btn__circle { background: var(--grey-bg); }
.post-hero__panel .t-hero { max-width: 100rem; margin: 0 auto; }
.post-hero__image {
	position: relative;
	width: 84.2rem; max-width: calc(100% - 2 * var(--gutter));
	aspect-ratio: 842 / 561;
	margin: -42.7rem auto 0;
	border-radius: var(--r-md);
	overflow: hidden;
	transform: translateX(-.5rem);
}
.post-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.post-body { width: min(100% - 2 * var(--gutter), 84.1rem); margin: 10.6rem auto 0; transform: translateX(-.4rem); }
.post-back { width: min(100% - 2 * var(--gutter), 84.1rem); margin: 11rem auto 0; transform: translateX(.2rem); }
.back-link { display: inline-flex; align-items: center; gap: 3.4rem; font-family: var(--f-head); font-weight: 600; font-size: var(--fs-btn); letter-spacing: 0; }
.back-link .back-btn__circle { background: #fff; }
.back-link:hover .back-btn__circle { background: var(--black); color: #fff; }
.post-single + .contact-cta { margin-top: 11rem; }
.related-posts { width: min(100% - 2 * var(--gutter), var(--w-news)); margin-top: 12.1rem; margin-bottom: -3.2rem; padding-bottom: 0; transform: translateX(.9rem); }
.related-posts .home-news__intro { padding-top: 6.1rem; }

/* Editor-inhoud */
.entry-content > * + * { margin-top: 2.6rem; }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--f-head); font-weight: 400; letter-spacing: -0.06em; line-height: 1.2; color: var(--black); }
.entry-content h2 { font-size: var(--fs-h2); margin-top: 6.5rem; }
.entry-content h3 { font-size: var(--fs-h3); margin-top: 4rem; }
.entry-content h4 { font-size: 2.4rem; margin-top: 3rem; }
.entry-content > h2:first-child, .entry-content > h3:first-child { margin-top: 0; }
.entry-content h2 + *, .entry-content h3 + * { margin-top: 4.8rem; }
.entry-content p, .entry-content li { color: var(--grey); font-size: var(--fs-body); line-height: var(--lh-body); }
.entry-content a:not(.btn) { color: var(--black); text-decoration: underline; text-underline-offset: .167em; text-decoration-thickness: 1px; }
.entry-content a:not(.btn):hover { color: var(--red); }
.entry-content strong { color: var(--black); font-weight: 600; }
.entry-content ul, .entry-content ol { padding-left: 2.8rem; }
.entry-content li + li { margin-top: 1.2rem; }
.entry-content li::marker { color: var(--black); }
.entry-content img { border-radius: var(--r-sm); }
.entry-content figure { margin-top: 4rem; }
.entry-content figcaption { margin-top: 1rem; color: var(--grey-2); font-size: var(--fs-small); }
.entry-content blockquote { margin: 4rem 0; padding-left: 3rem; border-left: 3px solid var(--red); font-family: var(--f-head); font-size: var(--fs-h3); letter-spacing: -0.06em; line-height: 1.2; }
.entry-content blockquote p { color: var(--black); font-size: inherit; line-height: inherit; }
.entry-content .wp-block-button__link { display: inline-flex; align-items: center; height: 5.6rem; padding: 0 3.2rem; border-radius: 8rem; background: var(--red); color: #fff; font-family: var(--f-head); font-weight: 600; font-size: var(--fs-btn); text-decoration: none; }
.entry-content table { width: 100%; border-collapse: collapse; }
/* Overgezette berichten (klassieke inhoud): beelden, galerijen en video's */
.entry-content img { max-width: 100%; height: auto; }
.entry-content .alignleft { float: left; margin: .6rem 3.2rem 2rem 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: .6rem 0 2rem 3.2rem; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-sm); }
.entry-content .wp-block-embed__wrapper { position: static; }
.entry-content .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1.6rem; margin-top: 4rem; }
.entry-content .wp-block-gallery .wp-block-image { margin: 0; width: auto !important; }
.entry-content .wp-block-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 767px) {
	.entry-content .alignleft, .entry-content .alignright { float: none; max-width: 100%; margin: 2rem 0; }
}
.entry-content td, .entry-content th { padding: 1.2rem; border-bottom: 1px solid #e3e3e3; text-align: left; font-size: var(--fs-body); }
/* "Kaarten"-blok (grijs vlak met witte kaarten) */
.entry-content .etb-kaarten, .entry-content .is-style-etb-kaarten {
	position: relative;
	width: min(137.3rem, 100vw - 2 * var(--gutter));
	margin: 10.8rem 0 10.8rem 50%;
	transform: translateX(-50%) translateX(.8rem);
	padding: 6.3rem 6.7rem 6.6rem 5.7rem;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
}
.entry-content .etb-kaarten .wp-block-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.1rem; margin: 0; }
.entry-content .etb-kaarten .wp-block-column { min-height: 59.8rem; padding: 4.7rem 4rem 4rem; border-radius: var(--r-xl); background: #fff; text-align: center; }
.entry-content .etb-kaarten .wp-block-image { margin: 0 auto; }
.entry-content .etb-kaarten .wp-block-image img { width: 35.7rem; height: 23.8rem; object-fit: cover; margin: 0 auto; }
.entry-content .etb-kaarten h3 { margin-top: 3.1rem; font-size: var(--fs-h3); }
.entry-content .etb-kaarten h3 + p { margin-top: 3.6rem; }
.entry-content .etb-kaarten p { font-size: var(--fs-body); }

/* Project: intro + kenmerken */
.project-intro {
	display: grid;
	grid-template-columns: 52.7rem 58.1rem;
	justify-content: space-between;
	width: min(100% - 2 * var(--gutter), 129.4rem);
	margin: 14.5rem auto 0;
	transform: translateX(-3.1rem);
}
.project-intro__text { padding-top: 7rem; }
.project-intro__text .t-body { margin-top: 0; }
.project-intro__text .t-h2 + .t-body { margin-top: 3.3rem; }
.specs { padding: 3.8rem 3.4rem 4.3rem 4.8rem; border-radius: 1.9rem; background: var(--grey-bg); }
.specs .label { margin-left: 1rem; }
.specs__list { margin: 3.6rem 0 0; display: flex; flex-direction: column; gap: .7rem; }
.specs__row { display: grid; grid-template-columns: 22.1rem 1fr; align-items: center; min-height: 6.6rem; padding: 0 1.8rem 0 2.2rem; border-radius: 1.1rem; background: #fff; color: var(--grey); font-size: var(--fs-body); }
.specs__row dt, .specs__row dd { margin: 0; }

/* Info-kaarten (grijs vlak, oplossing-detail) */
.card-panel {
	display: grid;
	grid-template-columns: repeat(2, 60.4rem);
	gap: 6.3rem 4.1rem;
	width: min(100% - 2 * var(--gutter), 137.3rem);
	margin: 5rem auto 0;
	padding: 6.3rem 5.7rem 9.9rem;
	justify-content: start;
	border-radius: var(--r-xl);
	background: var(--grey-bg);
	transform: translateX(-.1rem);
}
.info-card { display: flex; flex-direction: column; align-items: center; min-height: 59.8rem; padding: 4.7rem 4rem 3rem; border-radius: var(--r-xl); background: #fff; text-align: center; }
.info-card__img { width: 35.7rem; height: 23.8rem; border-radius: var(--r-sm); overflow: hidden; }
.info-card__img img { width: 100%; height: 100%; object-fit: cover; }
.info-card__title { margin-top: 3.1rem; font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em; }
.info-card__text { margin-top: 3.6rem; color: var(--grey); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 52.4rem; }

/* Verhalen (werken bij) */
.stories { margin-top: 13.8rem; }
.stories .section-head { gap: 4.7rem; }
.stories .section-head .t-h2 { transform: translateX(.5rem); }
.stories .section-head .t-body { max-width: 75.4rem; color: var(--grey); }
.stories__grid { display: grid; grid-template-columns: repeat(2, 63.2rem); gap: 3.7rem; justify-content: center; margin-top: 7.5rem; transform: translateX(-.7rem); }
.stories .story-card__btn { height: 4.5rem; padding: 0 2.2rem; font-family: var(--f-label); font-weight: 700; font-size: max(1.8rem, 12px); letter-spacing: .1em; text-transform: uppercase; }
.stories .story-card__body { gap: 4rem; }
.stories .story-card:nth-child(2) .story-card__body { left: 4.8rem; }

.functies-section { margin-top: 15.9rem; }
.functies-section .functies { margin: 0 0 0 calc(50% - 66.4rem); width: auto; transform: none; }
.functies-section .functies__title { margin-bottom: 4.1rem; }
.functies-section .slider-controls { margin-top: 5.9rem; margin-left: .7rem; gap: 7.8rem; }

/* Ontwikkel je talent */
.talent { margin: 14.6rem 4rem 0 4.2rem; }
.talent__panel { max-width: 186.6rem; margin: 0 auto; padding: 7.9rem 0 17.4rem; border-radius: var(--r-xl); background: var(--mint); }
.talent__head { width: min(100% - 2 * var(--gutter), 95rem); margin: 0 auto; text-align: center; transform: translateX(1.4rem); }
.talent__text { margin-top: 5.4rem; color: #231f20; font-size: var(--fs-body); line-height: var(--lh-body); }
.opl-panel--plain { background: none; width: min(100% - 2 * var(--gutter), 137.2rem); margin: 7.7rem auto 0; padding: 0 3.3rem; transform: translateX(3.2rem); }

/* Werkgever (twee foto's + tekst) */
.werkgever {
	display: grid;
	grid-template-columns: 42.8rem 42.8rem 1fr;
	column-gap: 6.7rem;
	align-items: start;
	width: min(100% - 2 * var(--gutter), 166.2rem);
	margin: 9.5rem auto 0;
	transform: translateX(2.5rem);
}
.werkgever__photos { display: contents; }
.werkgever__photo { height: 56.7rem; border-radius: var(--r-sm); overflow: hidden; }
.werkgever__photo img { width: 100%; height: 100%; object-fit: cover; }
.werkgever__text { padding: 9.3rem 0 0 8.4rem; max-width: 55.3rem; }
.werkgever__text .t-h2 { margin-top: 3.7rem; }
.werkgever__text .t-body { margin-top: 3.8rem; max-width: 46.2rem; }
.werkgever--vacature { margin-top: 9rem; transform: translateX(1rem); }
.werkgever--vacature .werkgever__text { padding-top: 4.9rem; max-width: 67.3rem; }
.werkgever--vacature .werkgever__text .t-body { margin-top: 4.3rem; max-width: 46.2rem; }
.entry-list ul { padding-left: 2.6rem; }
.entry-list li + li { margin-top: 1.2rem; }
.entry-list li::marker { color: var(--black); }

/* Fotostrook */
.marquee { margin-top: 15.1rem; overflow: hidden; display: flex; flex-direction: column; gap: 3rem; }
.marquee__row { display: flex; }
.marquee__track { display: flex; gap: 4rem; animation: marquee 80s linear infinite; }
.marquee__row--fwd .marquee__track { margin-left: -5.2rem; }
.marquee__row--rev .marquee__track { animation-direction: reverse; margin-left: -39.2rem; }
.marquee__item { flex: none; width: 55.2rem; height: 50.8rem; border-radius: var(--r-xl); overflow: hidden; background: #ffcecc; }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Vacaturelijst */
.vac-list { width: min(100% - 2 * var(--gutter), 129.3rem); margin: 8.4rem auto 0; }
.vac-list__head { padding-left: 14.6rem; }
.vac-list__head .label { margin-left: .5rem; }
.vac-list__head .t-h2 { margin-top: 3.4rem; max-width: 52.6rem; }
.vac-list__panel { display: flex; flex-direction: column; gap: 3.2rem; margin-top: 6rem; padding: 8.8rem 13.1rem 10rem 10rem; border-radius: var(--r-xl); background: var(--grey-bg); }
.vac-row {
	position: relative;
	display: grid;
	grid-template-columns: 27rem 1fr auto;
	column-gap: 8.3rem;
	min-height: 29.8rem;
	border-radius: var(--r-xl);
	background: #fff;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vac-row:hover { transform: translateY(-.5rem); box-shadow: 0 2rem 4rem rgba(0,0,0,.06); }
.vac-row__photo { margin: 0 0 -.7rem .6rem; border-radius: 2rem; overflow: hidden; }
.vac-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.vac-row__body { display: flex; flex-direction: column; padding: 6rem 0 3rem; }
.vac-row__title { font-family: var(--f-head); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.06em; }
.vac-row__text { margin-top: 2.7rem; max-width: 55.6rem; color: var(--grey-2); font-size: var(--fs-body); line-height: var(--lh-body); }
.vac-row__arrow { align-self: center; display: grid; place-items: center; width: 4.7rem; height: 4.7rem; min-width: 36px; min-height: 36px; margin-right: 4rem; border-radius: 50%; background: var(--black); color: #fff; opacity: 0; transform: translateX(-1rem); transition: opacity .3s, transform .35s var(--ease); }
.vac-row__arrow svg { width: 2.2rem; min-width: 16px; }
.vac-row:hover .vac-row__arrow { opacity: 1; transform: none; }
.vac-meta { display: flex; flex-wrap: wrap; gap: 1rem 6.2rem; margin-top: 3.7rem; padding-left: 1.1rem; font-family: var(--f-head); font-size: var(--fs-btn); letter-spacing: -0.06em; }
.vac-meta__item { display: inline-flex; align-items: center; gap: 1.3rem; }
.vac-meta__item svg { width: 2.6rem; height: 2.6rem; min-width: 18px; min-height: 18px; color: var(--ink); }
.vac-meta__item:nth-child(2) svg { width: 2.8rem; height: 3.2rem; }
.vac-list__empty { padding: 4rem; background: #fff; border-radius: var(--r-xl); }

/* Vacaturedetail */
.vac-hero {
	position: relative;
	z-index: 1;
	height: 100.4rem;
	margin: -11.7rem 2.4rem 0;
	border-radius: var(--r-xl);
	background: var(--dark);
	color: #fff;
}
.site-header--dark ~ .site-main .vac-hero { margin-top: 1.8rem; }
.vac-hero .back-btn { position: absolute; left: 15.7rem; top: 17.8rem; }
.vac-hero__content { position: absolute; left: 13.8rem; top: 44.7rem; width: 70.2rem; }
.vac-hero__content .label { margin-left: .7rem; }
.vac-hero__content .t-hero { margin-top: 4.1rem; max-width: 68.6rem; }
.vac-hero__content .btn { margin-top: 5.5rem; margin-left: .3rem; width: 23.2rem; padding: 0; }
.vac-meta--hero { margin-top: 7.5rem; padding-top: 5.3rem; padding-left: .6rem; border-top: 1px solid rgba(255, 255, 255, .2); gap: 1rem 6.6rem; color: #fff; }
.vac-meta--hero svg { color: #b3b3b3 !important; }
.vac-hero__photo { position: absolute; overflow: hidden; }
.vac-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.vac-hero__photo--big { left: calc(50% + 29.3rem); top: 40.5rem; width: 52.2rem; height: 65.2rem; border-radius: 3.3rem; }
.vac-hero__photo--small { left: calc(50% - 3.6rem); top: 74.7rem; width: 29.8rem; height: 39.5rem; border-radius: var(--r-sm); }
.vac-content { width: min(100% - 2 * var(--gutter), 90.3rem); margin: 27.7rem auto 0; transform: translateX(-12.6rem); }

/* Arc-scroll (naar Osmo "Arc Scroll Transition"): de inhoud onder de hero schuift eroverheen met
   een boogvormige bovenrand. --arc (0–1) loopt mee met hoe ver de rand in beeld is. */
.arc-cover {
	--arc: 0;
	--arc-max: min(38vh, 36rem);
	position: relative;
	z-index: 2;
	margin-top: 15.2rem; /* onder de foto's die over de hero-rand hangen */
	background: #fff;
	overflow-x: clip;
}
.arc-cover::before {
	content: "";
	position: absolute;
	left: -30%; right: -30%;
	bottom: calc(100% - 1px);
	height: calc(var(--arc) * var(--arc-max));
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: inherit;
	pointer-events: none;
}
.arc-cover > .vac-content:first-child { margin-top: 12.5rem; }
.vac-content.entry-content h2 { margin-top: 8.8rem; }
.vac-content.entry-content h2 + * { margin-top: 3.9rem; }
.vac-content.entry-content li + li { margin-top: 1.6rem; }
.vac-content.entry-content ul { padding-left: 2.8rem; }
.vac-content--profiel { margin-top: 16.5rem; transform: translateX(-7.7rem); }
.vac-content--profiel.entry-content h2 { margin-top: 0; }

.apply { margin: 2.7rem auto 0; width: min(100% - 2 * var(--gutter), 128.4rem); transform: translateX(-3.2rem); }
.apply__card { padding: 10.7rem 11.1rem 5.3rem; border-radius: 1.9rem; background: var(--grey-bg); }
.apply__card .t-h2 { margin-top: 5rem; }
.apply__text { margin-top: 3.3rem; max-width: 97.1rem; color: #161616; font-size: var(--fs-body); line-height: var(--lh-body); }
.apply + .contact-cta { margin-top: 7.1rem; }

/* Formulieren */
.etb-form { margin-top: 5.6rem; }
.etb-form .field { margin: 0 0 1.6rem; }
.etb-form input[type="text"], .etb-form input[type="email"], .etb-form input[type="tel"], .etb-form textarea {
	width: 100%;
	height: 7.5rem; min-height: 48px;
	padding: 0 3.3rem;
	border: 1px solid transparent;
	border-radius: 1.2rem;
	background: #fff;
	color: #161616;
	font: inherit;
	font-size: var(--fs-body);
	letter-spacing: -0.04em;
	transition: border-color .2s, box-shadow .2s;
}
.etb-form textarea { display: block; height: 18.4rem; min-height: 120px; padding-top: 2.4rem; resize: vertical; }
.etb-form ::placeholder { color: #161616; opacity: 1; }
.etb-form input:focus, .etb-form textarea:focus { outline: 0; border-color: var(--black); box-shadow: 0 0 0 3px rgba(239, 64, 53, .15); }
.etb-form .field--file label { display: inline-flex; align-items: center; gap: 1rem; padding: 1.6rem 2.4rem; border: 1px dashed #bbb; border-radius: 1.2rem; background: #fff; color: #161616; cursor: pointer; font-size: var(--fs-small); }
.etb-form .field--file svg { width: 2.2rem; min-width: 18px; }
.etb-form .field--file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etb-form .field--file input:focus-visible + label, .etb-form .field--file label:hover { border-color: var(--black); }
.etb-form__hp { position: absolute; left: -9999px; }
.etb-form__legal { margin-top: 1.8rem; padding-left: .6rem; color: var(--grey, #878787); font-size: var(--fs-small); line-height: 1.4; }
.etb-form__legal a { text-decoration: underline; }
/* Het reCAPTCHA-logo verbergen mag, mits de tekst onder het formulier staat (voorwaarde van Google). */
.grecaptcha-badge { visibility: hidden; }
.etb-form__submit { margin-top: 3.1rem; padding-left: .6rem; }
.etb-form__submit .btn { width: 26.8rem; padding: 0; }
.form-notice { margin-top: 3rem; padding: 2.2rem 2.6rem; border-radius: 1.2rem; font-size: var(--fs-body); }
.form-notice--ok { background: #e3f7ec; color: #0b5a33; }
.form-notice--error { background: #fde7e5; color: #8a1c14; }

/* Contactpagina */
.contact-page { display: grid; grid-template-columns: 1fr 70rem; gap: 10rem; width: min(100% - 2 * var(--gutter), var(--w-main)); margin: 17.9rem auto 0; }
.contact-page__info .t-h2 { margin-top: 3rem; }
.contact-page__info .t-body { margin-top: 2.6rem; max-width: 52rem; }
.contact-list { list-style: none; margin-top: 4.4rem; display: flex; flex-direction: column; gap: 1.6rem; font-size: var(--fs-body); }
.contact-list li { display: grid; grid-template-columns: 12rem 1fr; }
.contact-list span { color: var(--grey); }
.contact-list a:hover { color: var(--red); }
.form-card { padding: 6rem; border-radius: 1.9rem; background: var(--grey-bg); }
.form-card .etb-form { margin-top: 0; }
.entry-content.container--text { width: min(100% - 2 * var(--gutter), 90rem); margin: 12rem auto 0; }

.text-image--opl { margin-top: 15.6rem; }

.wide-image + .faq { margin-top: 17.8rem; }

.text-image--narrow { --ti-edge: 0rem; width: min(100% - 2 * var(--gutter), 130.2rem); }
.card-panel + .text-image { margin-top: 13.3rem; }
.text-image + .projects-carousel { padding-top: 25rem; }
.projects-carousel + .faq { margin-top: 17.9rem; }

/* Over ons: afwijkende posities uit het ontwerp */
.video-block + .opl-grid-section { margin-top: 15rem; }
.opl-grid-section--page .opl-grid-section__title { margin-bottom: 7rem; }
.opl-grid-section--page .opl-grid { transform: translateX(.4rem); }
.opl-grid-section--page .opl-grid__photo--end { height: 32.3rem; align-self: end; }
.opl-grid-section.opl-grid-section--page + .text-image { margin-top: 15.8rem; --ti-edge: 7rem; transform: translateX(2.1rem); }
.text-image + .opl-bento { margin-top: 22.3rem; }
.opl-bento + .werken-leren { padding-top: 15.8rem; }
.site-main:has(> .werken-leren:last-child) + .site-footer { margin-top: 4.8rem; }
body:has(.site-main > .grey-zone:first-child) .nav-pill { background: #fff; }
.project-big:not(:first-child) .pill { opacity: 0; transform: translateY(.8rem); transition: opacity .3s var(--ease), transform .35s var(--ease); }
.project-big:hover .pill, .project-big:focus-visible .pill { opacity: 1; transform: none; }

.text-image--project-1 { margin-top: 8rem; }
.text-image--project-1 .text-image__media { border-radius: 2.7rem; }
.text-image--project-2 { margin-top: 20.2rem; --ti-text-edge: .2rem; }
.text-image--project-2 .text-image__text { padding-top: .6rem; }
.text-image + .contact-cta { margin-top: 25.1rem; }
.contact-cta + .projects-carousel { padding-top: 17.9rem; }
.post-hero .t-hero em { color: inherit; }
.site-footer:not(.site-footer--cta) { margin-top: 5rem; }
.talent .opl-card:nth-child(1) .opl-icon { transform: rotate(101deg); }
.talent .opl-card:nth-child(2) .opl-icon { transform: rotate(66deg); }
.talent .opl-card:nth-child(3) .opl-icon { transform: rotate(143deg); }

.text-image--dark { margin-top: 16.5rem; transform: translateX(-2.2rem); }
.functies-section + .talent { margin-top: 12.4rem; }
body:has(.dark-zone) .werkgever { margin-top: 17.7rem; }
body:has(.dark-zone) .marquee { margin-top: 17.7rem; }

/* ==========================================================================
   Responsief — tablet (≤1099px) en mobiel (≤767px)
   Er is geen mobiel ontwerp; deze opbouw volgt de ontwerptaal van desktop:
   dezelfde kaarten, kleuren, typografie en volgorde, gestapeld.
   ========================================================================== */

/* Tussenmaat 1100–1199: desktopcompositie, maar vaste hoogtes worden minimale hoogtes */
@media (max-width: 1199px) and (min-width: 1100px) {
	.home-bento__grid { grid-template-rows: auto 4rem auto auto; }
	.bento-card--grey, .bento-card--gradient { min-height: 32.6rem; padding-bottom: 3rem; }
	.bento-card--red { height: auto; min-height: 50.4rem; padding-bottom: 3rem; }
	.wl-row--top { height: auto; min-height: 32.6rem; }
	.wl-white { padding-bottom: 3rem; }
	.usp-card { height: auto; min-height: 47.4rem; padding-bottom: 3rem; }
	.person-card { height: auto; }
}

@media (max-width: 1099px) {
	:root {
		--fs-hero: 44px;
		--fs-xl: 42px;
		--fs-h2: 30px;
		--fs-h3: 22px;
		--fs-body: 16px;
		--fs-body-lg: 17px;
		--fs-small: 14px;
		--fs-btn: 15px;
		--gutter: 24px;
		--r-xl: 24px;
		--r-lg: 22px;
		--r-md: 20px;
		--r-sm: 14px;
	}

	/* Knoppen: breedte volgt de tekst */
	.btn, .site-footer .btn, .home-hero .btn, .project-slide .btn, .projects-carousel .slider-controls .btn,
	.functies .slider-controls .btn, .wl-white .btn, .home-news__intro .btn, .hero-center .btn, .contact-cta__btn .btn,
	.vac-hero__content .btn, .etb-form__submit .btn, .btn--header, .text-image__btn .btn {
		width: auto !important;
		height: 48px !important;
		padding: 0 24px !important;
	}
	.btn-row { gap: 12px; }
	.slider-controls { gap: 24px !important; flex-wrap: wrap; }
	.slider-arrows { gap: 10px !important; }
	.arrow-btn { width: 44px; height: 44px; }

	/* Transformaties die alleen de desktopcompositie corrigeren uitzetten */
	.home-intro__text, .home-usp .t-h2, .usp-panel, .wl-grid, .functies, .footer-cta__title, .footer-cta .btn-row,
	.opl-bento__title, .opl-grid-section__title, .opl-grid, .two-cols, .big-image, .wide-image, .article, .text-image,
	.video-block, .faq, .project-list, .project-grid, .post-grid, .post-hero__image, .post-body, .post-back,
	.project-intro, .card-panel, .stories__grid, .stories .section-head .t-h2, .talent__head, .opl-panel--plain,
	.werkgever, .vac-content, .apply, .related-posts, .intro-center--detail, .hero-center__content,
	.hero-center--light .hero-center__content, .opl-grid-section--page .opl-grid,
	.opl-grid-section.opl-grid-section--page + .text-image, .blog .opl-bento, .text-image--dark {
		transform: none !important;
	}

	/* Header */
	.site-header { height: 84px; }
	.site-header__inner { padding-top: 18px; grid-template-columns: auto 1fr; align-items: center; }
	.site-logo img { width: 150px; min-width: 0; }
	.nav-pill { display: none; }
	.header-actions { gap: 12px; margin: 0; justify-self: end; }
	.werkenbij-bubble { width: 44px; height: 44px; min-width: 0; min-height: 0; }
	.werkenbij-bubble__badge { min-width: 20px; height: 20px; font-size: 10px; top: -4px; right: -4px; }
	.menu-toggle { display: block; }
	.site-header--glass .menu-toggle, .site-header--dark .menu-toggle { background: #fff; }
	.mega, .mega-backdrop { display: none !important; }

	/* Footer */
	.site-footer { margin-top: 80px; padding: 0 12px 12px; }
	.site-footer:not(.site-footer--cta) { margin-top: 56px; }
	.site-footer__card { border-radius: 20px; }
	.footer-cta { height: auto; padding: 96px 24px 120px; }
	.footer-cta__media { inset: 0; }
	.footer-cta__content { padding-top: 0; }
	.footer-cta__title { margin-bottom: 32px; }
	.footer-main {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "brand brand brand" "col1 col2 col3" "team team team" "bottom bottom bottom";
		row-gap: 32px;
		padding: 40px 28px 0;
	}
	.site-footer--cta .footer-main { margin-top: 0; padding-top: 0; }
	.footer-logo img { width: 170px; }
	.footer-tagline { margin-top: 20px; }
	.footer-col--1 { margin-top: 0; }
	.footer-menu li { line-height: 2.2; }
	.footer-col--1 .footer-menu li { line-height: 2.2; }
	.footer-col--1 .footer-menu li + li { margin-top: 0; }
	.footer-team { margin: 0 -28px; width: auto; max-width: 480px; }
	.footer-robot { width: 64px; height: 67px; right: 20px; top: -88px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding-bottom: 24px; line-height: 1.6; }
	.footer-legal { column-gap: 16px; row-gap: 4px; }

	/* Homepage */
	.home-hero {
		display: grid;
		grid-template-columns: 1fr 1.25fr;
		gap: 12px;
		height: auto;
		padding: 12px 12px 0;
	}
	.home-hero__bg { left: 12px; right: 12px; top: 12px; bottom: 150px; height: auto; }
	.home-hero__line { display: none; }
	.home-hero__content { grid-column: 1 / -1; width: auto; margin: 0; padding: 140px 24px 40px; }
	.home-hero .t-hero { max-width: 560px; }
	.home-hero .btn { margin: 28px 0 0; }
	.home-hero__photo { position: relative; left: auto !important; top: auto !important; width: auto !important; }
	.home-hero__photo--small { grid-column: 1; grid-row: 2; height: 240px !important; align-self: end; margin-left: 12px; }
	.home-hero__photo--big { grid-column: 2; grid-row: 2; height: 320px !important; margin-right: 12px; border-radius: 24px !important; }
	.home-hero__logos { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: auto; margin: 16px 12px 0; overflow: hidden; }
	.home-hero__logos img { height: 44px; width: auto; max-width: none; }

	.home-intro { padding: 72px var(--gutter) 0; }
	.home-intro__text { font-size: 30px; }
	.home-bento { padding-top: 48px; }
	.home-bento__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 16px; width: auto; max-width: none; margin: 0 var(--gutter); }
	.bento-card { grid-row: auto !important; grid-column: auto !important; height: auto !important; width: auto !important; margin: 0 !important; min-height: 220px; padding: 32px 100px 32px 28px !important; }
	.bento-card .icon-box { right: 20px; top: 24px; width: 56px; height: 56px; }
	.bento-card .icon-box img { width: 36px; }
	.bento-card--grey, .bento-card--gradient { grid-column: 1 / -1 !important; }
	.bento-card__title, .bento-card--grey .bento-card__title, .bento-card--gradient .bento-card__title { max-width: none; }
	.bento-card__text, .bento-card--grey .bento-card__text, .bento-card--gradient .bento-card__text, .bento-card--red .bento-card__text { max-width: 420px; margin-top: 16px; }
	.bento-card__text br { display: none; }
	.bento-card--red { padding-right: 28px !important; }
	.bento-card--dark { min-height: 160px; align-self: stretch; padding: 24px 24px 0 !important; }
	.bento-card__vac { left: 24px; top: auto; bottom: 28px; font-size: 26px; }
	.bento-card__count { left: auto; right: 124px; top: auto; bottom: 26px; font-size: 32px; }
	.bento-card__img { left: auto; right: 12px; width: 110px; }

	.projects-carousel { padding-top: 80px; }
	.text-image + .projects-carousel, .contact-cta + .projects-carousel { padding-top: 80px; }
	.cascade { --cascade-w: 84vw; }
	.cascade__track, .project-slide { height: min(560px, 110vw); }
	.project-slide__body { left: 28px; right: 28px; bottom: 32px; }
	.project-slide__title { font-size: 26px; }
	.project-slide .btn { margin-top: 20px; }
	.projects-carousel .slider-controls { margin-top: 28px; }

	.werken-leren { padding: 80px 12px 0; }
	.opl-bento + .werken-leren { padding-top: 80px; }
	.werken-leren__panel { padding: 56px 0 56px; }
	.werken-leren .section-head { gap: 16px; padding: 0 var(--gutter); }
	.wl-grid { width: auto; max-width: none; margin: 40px var(--gutter) 0; gap: 16px; }
	.wl-row { gap: 16px !important; }
	.wl-row--top { grid-template-columns: 1fr 1.6fr; height: auto; }
	.wl-row--stories { grid-template-columns: 1fr 1fr; }
	.wl-dark { padding: 40px 28px; min-height: 220px; }
	.wl-dark__badge { left: auto; right: 24px; top: 24px; min-width: 30px; height: 30px; font-size: 13px; }
	.wl-white { padding: 32px 28px; }
	.wl-white .t-body { margin-top: 16px; }
	.wl-white .btn-row { margin-top: 24px; }
	.story-card, .wl-grid .story-card { height: 300px; }
	.story-card__body, .wl-row--stories .story-card:nth-child(2) .story-card__body, .stories .story-card:nth-child(2) .story-card__body { top: auto; bottom: 28px; left: 28px; right: 24px; gap: 16px; }
	.story-card__btn { height: 44px; padding: 0 20px; }
	.werken-leren .functies, .functies-section .functies { margin: 48px 0 0 var(--gutter); }
	.functies__title { margin-bottom: 24px; padding-right: var(--gutter); }
	.functies__slider .splide__slide { width: 260px; }
	.functie-card { width: 260px; height: 320px; }
	.functie-card__title { left: 24px; bottom: 24px; }
	.functies .slider-controls, .functies-section .slider-controls { margin: 28px 0 0; }

	.home-usp { padding-top: 80px; }
	.home-usp .section-head { gap: 16px; padding: 0 var(--gutter); }
	.usp-panel { grid-template-columns: 1fr 1fr; gap: 16px; width: auto; max-width: none; margin: 40px var(--gutter) 0; padding: 16px; }
	.usp-card { height: auto; padding: 28px 20px 32px; }
	.usp-card__illu { width: 100%; height: 170px; }
	.usp-card__title { margin-top: 20px; }
	.usp-card__text { margin-top: 12px; }

	.home-news { grid-template-columns: 1fr; gap: 32px; margin: 96px var(--gutter) 0; width: auto; padding-bottom: 0; }
	.home-news__intro { position: static; padding-top: 0; }
	.home-news__intro .t-h2 { margin-top: 16px; }
	.home-news__intro .btn { margin-top: 24px; }
	.home-news__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
	.related-posts { margin: 96px var(--gutter) 0; }

	/* Kaarten */
	.post-card { aspect-ratio: 4 / 3; }
	.post-card__tag { left: 24px; top: 20px; height: 28px; padding: 0 14px; }
	.post-card__body { left: 24px; right: 24px; bottom: 24px !important; }
	.post-card__title { font-size: 20px; }
	.post-card__more { display: none; }

	/* Subpagina-hero's */
	.hero-photo { height: auto; min-height: 520px; margin: 0 12px; }
	.hero-photo:not(.hero-photo--project)::before {
		content: ''; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.65) 45%, rgba(255,255,255,0) 80%);
	}
	.hero-photo__content, .hero-photo--project .hero-photo__content { position: relative; left: auto; top: auto; max-width: 620px; padding: 64px 28px 56px; }
	.hero-photo--project .hero-photo__content { padding-top: 110px; }
	.hero-photo__back { left: 28px; top: 28px; }
	.hero-photo__line { display: none; }
	.hero-photo__text { margin-top: 20px; }

	.hero-split, .hero-split--wide { grid-template-columns: 1fr; height: auto; gap: 12px; margin: 0 12px; }
	.hero-split__panel, .hero-split--wide .hero-split__panel { padding: 96px 28px 48px; justify-content: flex-start; }
	.hero-split--detail .hero-split__panel { padding-bottom: 48px; }
	.hero-split__panel .back-btn { left: 28px; top: 28px; }
	.hero-split__content, .hero-split--wide .hero-split__content { margin-top: 0; }
	.hero-split__text, .hero-split--wide .hero-split__text { margin-top: 20px; max-width: 560px; }
	.hero-split__media { height: 340px; }

	.hero-center, .hero-center--light { height: min(620px, 130vw); margin: 0 12px; }
	.hero-center--light { margin-top: 0; }
	.dark-zone .hero-center { top: 12px; margin-bottom: 12px; }
	.hero-center__content { padding: 0 24px; }
	.hero-center .btn-row { margin-top: 28px; }

	.dark-zone { padding-bottom: 72px; }
	.intro-center { margin-top: 72px; }
	.intro-center .t-body { margin-top: 20px; }

	.two-cols { grid-template-columns: 1fr 1fr; column-gap: 40px; width: auto; margin: 56px var(--gutter) 0; }
	.two-cols .t-body { margin-top: 16px; }
	.big-image, .big-image--project, .wide-image { width: auto; margin: 56px var(--gutter) 0; border-radius: 20px; }
	.video-block, .video-block--narrow { width: auto; margin: 72px var(--gutter) 0; border-radius: 20px; }
	.article, .article--center { width: auto; margin: 72px var(--gutter) 0; }
	.article > .t-h2 { margin-top: 16px; }
	.article > .entry-content, .article--center > .entry-content { margin-top: 28px; }

	.text-image, .text-image--reverse, .text-image--narrow {
		display: flex; flex-direction: column; gap: 32px;
		width: auto; margin: 80px var(--gutter) 0 !important;
	}
	.text-image__text, .text-image--reverse .text-image__text, .text-image--nolabel .text-image__text { padding-top: 0; margin: 0; max-width: 640px; }
	.text-image__media { width: 100%; max-width: 640px; margin: 0 !important; border-radius: 20px; }
	.text-image__text .label + .t-h2 { margin-top: 16px; }
	.text-image__text .t-body { margin-top: 16px; }

	.opl-bento, .opl-grid-section { width: auto; margin: 72px var(--gutter) 0; }
	.text-image + .opl-bento, .blog .opl-bento { margin-top: 80px; }
	.video-block + .opl-grid-section { margin-top: 80px; }
	.opl-bento__title, .opl-grid-section__title { margin-bottom: 28px !important; }
	.opl-panel { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
	.opl-panel > .opl-card:nth-child(n) { margin: 0; }
	.opl-card, .opl-card--wide { display: flex; flex-direction: column; min-height: 0; padding: 24px 24px 28px; }
	.opl-card--wide { grid-column: 1 / -1; }
	.opl-card--wide .opl-card__photo { order: 5; height: 240px; margin-top: 20px; }
	.opl-card__title, .opl-card--wide .opl-card__title { margin-top: 40px; min-height: 0; padding-left: 0; }
	.opl-card__text, .opl-card--wide .opl-card__text { margin-top: 12px; padding-left: 0; max-width: none; }
	.opl-grid { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
	.opl-grid__photo, .opl-grid-section--page .opl-grid__photo--end { height: 240px; }
	.opl-mini, .opl-grid > .opl-mini:nth-child(n) { min-height: 0; margin-top: 0; padding: 28px 24px; align-self: stretch; }
	.opl-mini__text { margin-top: 12px; max-width: none; }

	.team { grid-template-columns: minmax(0, 1fr); margin: 80px 0 0 var(--gutter); gap: 28px; }
	.team__intro { padding: 0 var(--gutter) 0 0; }
	.team__intro .t-h2 { margin-top: 16px; white-space: normal; }
	.team__intro .t-body { margin-top: 16px; max-width: 460px; }
	.team__intro .slider-arrows { margin-top: 24px; }
	.team__slider .splide__track { clip-path: none; }
	.team__slider .splide__slide { width: 280px; }
	.person-card { height: auto; padding: 14px 14px 20px; }
	.person-card__photo { height: 320px; }
	.person-card__name { margin-top: 18px; }
	.person-card__role { margin-top: 8px; }
	.person-card__links { margin-top: 20px; padding-right: 0; gap: 12px; flex-wrap: wrap; }

	.faq, .wide-image + .faq, .projects-carousel + .faq { width: auto; margin: 80px var(--gutter) 0; padding-bottom: 0; }
	.faq__list { margin-top: 32px; }
	.faq__icon { opacity: 1; }

	.contact-cta, .text-image + .contact-cta, .post-single + .contact-cta, .apply + .contact-cta { margin: 80px 12px 0; }
	.contact-cta__card { grid-template-columns: 120px 1fr; column-gap: 24px; row-gap: 24px; min-height: 0; padding: 32px 28px; }
	.contact-cta__photo { height: 150px; }
	.contact-cta__text { padding-top: 0; }
	.contact-cta__text .t-h2 { margin: 12px 0 0; }
	.contact-cta__mail { margin: 16px 0 0; }
	.contact-cta__btn { grid-column: 1 / -1; padding-top: 0; }

	.grey-zone { margin: -84px 12px 0; padding: 84px 0 72px; }
	.page-intro, .grey-zone .page-intro, .page-intro--blog { padding: 56px var(--gutter) 0; }
	.page-intro .t-lead, .page-intro--blog .t-lead { margin-top: 16px; }
	.project-list { width: auto; margin: 48px var(--gutter) 0; gap: 20px; }
	.project-big { aspect-ratio: 4 / 3; }
	.project-big__body { left: 28px; right: 28px; bottom: 28px; gap: 16px; }
	.project-big__title { font-size: 26px; }
	.project-big__line { display: none; }
	.project-big:not(:first-child) .pill { opacity: 1; transform: none; }
	.project-grid, .project-list + .project-grid, .post-grid, .post-grid--more { grid-template-columns: 1fr 1fr; gap: 16px; width: auto; margin: 32px var(--gutter) 0; }
	.post-grid { margin-top: 48px; }

	.post-hero { margin: 0 12px; }
	.post-hero__panel { height: auto; padding: 96px 28px 220px; }
	.post-hero__panel .back-btn { left: 28px; top: 28px; }
	.post-hero__image { width: auto; max-width: none; margin: -180px var(--gutter) 0; }
	.post-body { width: auto; margin: 56px var(--gutter) 0; }
	.post-back { width: auto; margin: 56px var(--gutter) 0; }
	.back-link { gap: 16px; }
	.entry-content h2 { margin-top: 40px; }
	.entry-content h2 + *, .entry-content h3 + * { margin-top: 20px; }
	.entry-content .etb-kaarten { width: auto; margin: 40px 0; transform: none; padding: 16px; }
	.entry-content .etb-kaarten .wp-block-columns { grid-template-columns: 1fr 1fr; gap: 16px; }
	.entry-content .etb-kaarten .wp-block-column { min-height: 0; padding: 20px 20px 24px; }
	.entry-content .etb-kaarten .wp-block-image img { width: 100%; height: 180px; }
	.entry-content .etb-kaarten h3 { margin-top: 16px; }
	.entry-content .etb-kaarten h3 + p { margin-top: 12px; }

	.project-intro { grid-template-columns: 1fr; gap: 32px; width: auto; margin: 72px var(--gutter) 0; }
	.project-intro__text { padding-top: 0; }
	.project-intro__text .t-h2 + .t-body { margin-top: 16px; }
	.specs { padding: 28px 20px; }
	.specs__row { grid-template-columns: 150px 1fr; padding: 12px 16px; min-height: 52px; }

	.card-panel { grid-template-columns: 1fr 1fr; gap: 16px; width: auto; margin: 40px var(--gutter) 0; padding: 16px; }
	.info-card { min-height: 0; padding: 20px 20px 28px; }
	.info-card__img { width: 100%; height: 200px; }
	.info-card__title { margin-top: 20px; }
	.info-card__text { margin-top: 12px; }
	.card-panel + .text-image { margin-top: 72px !important; }

	.stories { margin-top: 72px; }
	.stories .section-head { gap: 16px; padding: 0 var(--gutter); }
	.stories__grid { grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px var(--gutter) 0; }
	.functies-section { margin-top: 72px; }

	.talent, .functies-section + .talent { margin: 80px 12px 0; }
	.talent__panel { padding: 56px 0; }
	.talent__head { width: auto; margin: 0 var(--gutter); }
	.talent__text { margin-top: 16px; }
	.opl-panel--plain { width: auto; margin: 32px var(--gutter) 0; padding: 0; }

	.werkgever, body:has(.dark-zone) .werkgever, .werkgever--vacature {
		grid-template-columns: 1fr 1fr; gap: 16px; width: auto; margin: 80px var(--gutter) 0;
	}
	.werkgever__photo { height: 340px; }
	.werkgever__text, .werkgever--vacature .werkgever__text { grid-column: 1 / -1; padding: 16px 0 0; max-width: 640px; }
	.werkgever__text .t-h2 { margin-top: 16px; }
	.werkgever__text .t-body, .werkgever--vacature .werkgever__text .t-body { margin-top: 16px; }

	.marquee, body:has(.dark-zone) .marquee { margin-top: 80px; gap: 12px; }
	.marquee__track { gap: 12px; }
	.marquee__item { width: 260px; height: 240px; }
	.marquee__row--fwd .marquee__track, .marquee__row--rev .marquee__track { margin-left: 0; }
	.marquee__row--rev .marquee__track { margin-left: -130px; }

	.vac-list { width: auto; margin: 56px var(--gutter) 0; }
	.vac-list__head { padding-left: 0; }
	.vac-list__head .label { margin-left: 0; }
	.vac-list__head .t-h2 { margin-top: 12px; }
	.vac-list__panel { margin-top: 28px; padding: 16px; gap: 16px; }
	.vac-row { grid-template-columns: 200px 1fr; column-gap: 24px; min-height: 0; }
	.vac-row__photo { margin: 0; border-radius: 20px 0 0 20px; }
	.vac-row__body { padding: 24px 24px 24px 0; }
	.vac-row__text { margin-top: 10px; }
	.vac-row__arrow { display: none; }
	.vac-meta, .vac-meta--hero { gap: 8px 28px; margin-top: 16px; padding-left: 0; }
	.vac-meta__item svg { width: 20px; height: 20px; }
	.vac-meta__item:nth-child(2) svg { width: 20px; height: 23px; }

	.vac-hero, .site-header--dark ~ .site-main .vac-hero { height: auto; margin: 12px 12px 0; padding: 104px 28px 40px; }
	.vac-hero .back-btn { top: 96px; left: 28px; }
	.vac-hero__content { position: relative; left: auto; top: auto; width: auto; padding-top: 72px; }
	.vac-hero__content .label { margin-left: 0; }
	.vac-hero__content .t-hero { margin-top: 16px; }
	.vac-hero__content .btn { margin: 28px 0 0; }
	.vac-meta--hero { margin-top: 32px; padding-top: 24px; }
	.vac-hero__photo { position: relative; left: auto !important; top: auto !important; display: inline-block; vertical-align: bottom; margin-top: 32px; }
	.vac-hero__photo--big { width: calc(56% - 6px) !important; height: 300px !important; border-radius: 20px !important; }
	.vac-hero__photo--small { width: calc(44% - 6px) !important; height: 230px !important; margin-left: 8px; }

	.vac-content, .vac-content--profiel { width: auto; margin: 72px var(--gutter) 0; }
	.arc-cover { --arc-max: 16vh; margin-top: 0; }
	.arc-cover > .vac-content:first-child { margin-top: 72px; }
	.vac-content.entry-content h2 { margin-top: 48px; }
	.vac-content.entry-content h2 + * { margin-top: 16px; }
	.apply { width: auto; margin: 56px 12px 0; }
	.apply__card { padding: 40px 24px 32px; }
	.apply__card .t-h2 { margin-top: 16px; }
	.apply__text { margin-top: 16px; }
	.etb-form { margin-top: 28px; }
	.etb-form input[type="text"], .etb-form input[type="email"], .etb-form input[type="tel"] { height: 56px; padding: 0 18px; }
	.etb-form textarea { height: 150px; padding: 16px 18px; }
	.etb-form .field { margin-bottom: 12px; }
	.etb-form__submit { margin-top: 20px; padding-left: 0; }

	.contact-page { grid-template-columns: 1fr; gap: 40px; width: auto; margin: 72px var(--gutter) 0; }
	.contact-page__info .t-h2 { margin-top: 12px; }
	.contact-page__info .t-body { margin-top: 16px; }
	.contact-list { margin-top: 24px; }
	.form-card { padding: 28px 20px; }
	.entry-content.container--text { width: auto; margin: 64px var(--gutter) 0; }

	.pagination { margin-top: 40px; }
	.page-intro--404 { padding: 72px var(--gutter) 40px; }
}

@media (max-width: 767px) {
	:root {
		--fs-hero: 36px;
		--fs-xl: 34px;
		--fs-h2: 26px;
		--fs-h3: 21px;
		--fs-body: 15px;
		--fs-body-lg: 16px;
		--gutter: 20px;
	}
	.site-header { height: 76px; }
	.site-header__inner { padding-top: 16px; }
	.site-logo img { width: 132px; }
	.btn--header { display: none !important; }

	.footer-main { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "col1 col2" "col3 col3" "team team" "bottom bottom"; padding: 36px 22px 0; }
	.footer-col:last-child .footer-menu { display: flex; gap: 20px; }
	.footer-cta { padding: 72px 20px 110px; }

	.home-hero { grid-template-columns: 1fr 1.3fr; }
	.home-hero__bg { bottom: 132px; }
	.home-hero__content { padding: 120px 20px 32px; }
	.home-hero__photo--small { height: 190px !important; margin-left: 8px; }
	.home-hero__photo--big { height: 250px !important; margin-right: 8px; }
	.home-hero__logos img { height: 36px; }
	.home-intro__text { font-size: 24px; }
	.home-bento__grid { grid-template-columns: 1fr; }
	.bento-card { min-height: 0; padding: 28px 84px 28px 24px !important; }
	.bento-card--red { min-height: 200px; }
	.bento-card--dark { min-height: 150px; }

	.wl-row--top, .wl-row--stories { grid-template-columns: 1fr; }
	.wl-dark { min-height: 180px; }
	.story-card, .wl-grid .story-card { height: 280px; }

	.usp-panel, .home-news__list, .opl-panel, .opl-grid, .project-grid, .project-list + .project-grid, .post-grid, .post-grid--more,
	.card-panel, .stories__grid, .two-cols, .entry-content .etb-kaarten .wp-block-columns { grid-template-columns: 1fr; }
	.opl-grid__photo { grid-column: auto; height: 220px; }
	.two-cols { row-gap: 40px; }
	.post-card { aspect-ratio: 4 / 3.2; }

	.hero-photo { min-height: 480px; }
	.hero-photo__content, .hero-photo--project .hero-photo__content { padding: 48px 22px 48px; }
	.hero-photo--project .hero-photo__content { padding-top: 96px; }
	.hero-split__panel, .hero-split--wide .hero-split__panel { padding: 88px 22px 40px; }
	.hero-split__media { height: 260px; }

	.project-big { aspect-ratio: 4 / 5; }
	.project-big__body { left: 22px; right: 22px; bottom: 24px; }
	.project-big__title, .project-slide__title { font-size: 23px; }
	.cascade__track, .project-slide { height: 440px; }
	.project-slide__body { left: 22px; right: 22px; bottom: 24px; }

	.contact-cta__card { grid-template-columns: 1fr; padding: 28px 22px; }
	.contact-cta__photo { width: 110px; height: 140px; }

	.werkgever, body:has(.dark-zone) .werkgever, .werkgever--vacature { grid-template-columns: 1fr 1fr; gap: 10px; }
	.werkgever__photo { height: 220px; }

	.vac-row { grid-template-columns: 1fr; }
	.vac-row__photo { height: 200px; border-radius: 20px 20px 0 0; }
	.vac-row__body { padding: 20px 20px 24px; }
	.vac-hero { padding: 96px 22px 32px; }
	.vac-hero .back-btn { left: 22px; top: 88px; }
	.vac-hero__content { padding-top: 64px; }
	.vac-hero__photo--big { height: 220px !important; }
	.vac-hero__photo--small { height: 170px !important; }

	.marquee__item { width: 200px; height: 190px; }
	.specs__row { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }
	.specs__row dt { color: var(--black); }
	.team__slider .splide__slide { width: 250px; }
	.person-card__photo { height: 280px; }
	.post-hero__panel { padding: 88px 22px 170px; }
	.post-hero__image { margin-top: -140px; }
}
@media (max-width: 1099px) {
	.usp-card__illu img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
	.story-card__title br, .project-slide__title br, .project-big__title br { display: none; }
}