/* =============================================================================
   DAAN Theme – main.css
   Mobile-first. All design tokens live in :root.
   ============================================================================= */

/* ── 1. Design Tokens ──────────────────────────────────────────────────────── */
:root {
	/* Colors */
	--color-black:       #000000;
	--color-white:       #ffffff;
	--color-beige:       #edece8;
	--color-beige-dark:  #d8d5d2;
	--color-petrol:      #1a5153;
	--color-bordeaux:    #541626;
	--color-blue:        #38507f;
	--color-grey:        #989898;
	--color-body-dark:   #535353;

	/* Typography */
	--font:              'Public Sans', sans-serif;
	--size-xs:           0.75rem;    /* 12px */
	--size-sm:           0.875rem;   /* 14px */
	--size-base:         1rem;       /* 16px */
	--size-lg:           1.375rem;   /* 22px */
	--size-xl:           1.5rem;     /* 24px */
	--size-3xl:          2.75rem;    /* 44px */
	--size-5xl:          3.75rem;    /* 60px */
	--size-6xl:          4.25rem;    /* 68px */

	/* Spacing */
	--container-max:     1280px;
	--container-pad:     1.25rem;    /* 20px mobile → overridden at wider screens */
	--section-gap:       3rem;       /* space between page sections */
	--card-radius:       1.25rem;    /* 20px */
	--hero-radius:       2.5rem;     /* 40px */
	--pill-radius:       1.875rem;   /* 30px */
	--card-radius-sm:    0.75rem;    /* 12px testimonial cards */

	/* Transitions */
	--transition:        0.2s ease;
}

/* ── 2. Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	font-family:      var(--font);
	font-size:        var(--size-base);
	line-height:      1.5;
	color:            var(--color-black);
	background-color: var(--color-beige);
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
button { cursor: pointer; background: none; border: none; font: inherit; }

/* ── 3. Layout Utilities ────────────────────────────────────────────────────── */
.container {
	width:     100%;
	max-width: var(--container-max);
	margin:    0 auto;
	padding:   0 var(--container-pad);
}

/* Section base — each home section is full-width */
.section {
	padding-top:    var(--section-gap);
	padding-bottom: var(--section-gap);
}

/* White card utility */
.card {
	background:    var(--color-white);
	border-radius: var(--card-radius);
}

/* ── 4. Typography ──────────────────────────────────────────────────────────── */
.heading-3xl {
	font-size:      var(--size-3xl);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
}

.eyebrow {
	font-size:      var(--size-xs);
	font-weight:    400;
	line-height:    1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color:          var(--color-grey);
}

/* ── 5. Buttons ─────────────────────────────────────────────────────────────── */
.btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         0.5rem 1.5rem;
	background:      var(--color-black);
	color:           var(--color-white);
	font-family:     var(--font);
	font-size:       var(--size-base);
	font-weight:     400;
	line-height:     1.5;
	border-radius:   var(--pill-radius);
	transition:      background var(--transition), color var(--transition);
	white-space:     nowrap;
}
.btn:hover, .btn:focus-visible {
	background: #222;
	outline:    none;
}

/* ── 6. Navbar ──────────────────────────────────────────────────────────────── */
.site-header {
	position:   fixed;
	top:        0;
	z-index:    100;
	width:      100%;
	background:              rgba(255,255,255,0.35);
	backdrop-filter:         blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* Utility bar */
.navbar-utility {
	background:  transparent;
	max-height:  4rem;       /* ruim boven de werkelijke hoogte (~35px) */
	overflow:    hidden;
	opacity:     1;
	transition:  max-height 0.3s ease, opacity 0.3s ease;
}

.site-header.utility-hidden .navbar-utility {
	max-height: 0;
	opacity:    0;
}

.navbar-utility__inner {
	display:         flex;
	justify-content: flex-end;
	padding-top:     0.4rem;
	padding-bottom:  0.4rem;
}

.nav-utility {
	display:     flex;
	gap:         0.25rem;
	align-items: center;
}

.nav-utility li a,
.nav-utility a {
	display:     block;
	padding:     0.25rem 0.75rem;
	font-size:   var(--size-base);
	color:       var(--color-black);
	transition:  opacity var(--transition);
}
.nav-utility li a:hover,
.nav-utility a:hover { opacity: 0.6; }

/* Main nav bar */
.navbar-main {
	background: transparent;
}

.navbar-main__inner {
	display:         flex;
	align-items:     center;
	gap:             1rem;
	height:          4.5rem; /* ~72px */
}

/* Logo */
.navbar-logo { flex-shrink: 0; display: flex; align-items: center; }
.navbar-logo img { height: 1.25rem; width: auto; }
.navbar-logo__text {
	font-size:      1.5rem;
	font-weight:    400;
	letter-spacing: -0.02em;
}

/* Primary nav */
.nav-primary {
	flex:         1;
	display:      flex;
	justify-content: center;
}

.nav-primary__list {
	display:     flex;
	gap:         0.25rem;
	align-items: center;
}

.nav-primary__list li a {
	display:     block;
	padding:     0.5rem 0.75rem;
	font-size:   var(--size-base);
	color:       var(--color-black);
	transition:  opacity var(--transition);
}
.nav-primary__list li a:hover { opacity: 0.6; }

/* Dropdown */
.has-dropdown {
	position: relative;
}

.nav-dropdown-toggle {
	display:     block;
	padding:     0.5rem 0.75rem;
	font-size:   var(--size-base);
	font-family: var(--font);
	font-weight: 400;
	color:       var(--color-black);
	background:  none;
	border:      none;
	cursor:      pointer;
	transition:  opacity var(--transition);
	display:     flex;
	align-items: center;
	gap:         0.375rem;
}
.nav-dropdown-toggle:hover { opacity: 0.6; }

.nav-dropdown-arrow {
	display:      inline-block;
	width:        0;
	height:       0;
	border-left:  4px solid transparent;
	border-right: 4px solid transparent;
	border-top:   5px solid currentColor;
	transition:   transform var(--transition);
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow {
	transform: rotate(180deg);
}

.nav-dropdown {
	position:   absolute;
	top:        calc(100% + 0.5rem);
	left:       50%;
	transform:  translateX(-50%);
	background: var(--color-white);
	border-radius: var(--card-radius);
	padding:    2.5rem 3.75rem;
	box-shadow: 0 8px 32px rgba(0,0,0,0.10);
	white-space: nowrap;
	z-index:    100;
}
.nav-dropdown[hidden] { display: none; }

.nav-dropdown__inner {
	display: flex;
	gap:     3.125rem;
}

.nav-dropdown__col {
	display:        flex;
	flex-direction: column;
	gap:            0.875rem;
}

.nav-dropdown .nav-dropdown__title {
	display:         block;
	padding:         0;
	font-size:       var(--size-lg);
	line-height:     1.27;
	color:           var(--color-black);
	text-decoration: none;
}

.nav-dropdown__list {
	display:        flex;
	flex-direction: column;
	gap:            0.125rem;
}

.nav-dropdown__list li a {
	display:     block;
	font-size:   var(--size-sm);
	line-height: 1.43;
	color:       var(--color-grey);
	padding:     0.1875rem 0;
	transition:  color var(--transition);
}
.nav-dropdown__list li a:hover { color: var(--color-black); }

/* Navbar CTA */
.navbar-cta { margin-left: auto; }

/* Hamburger (hidden on desktop) */
.navbar-hamburger {
	display:         none;
	flex-direction:  column;
	justify-content: center;
	gap:             5px;
	width:           2rem;
	height:          2rem;
	flex-shrink:     0;
	margin-left:     auto;
}
.navbar-hamburger span {
	display:       block;
	width:         100%;
	height:        2px;
	background:    var(--color-black);
	border-radius: 2px;
	transition:    transform var(--transition), opacity var(--transition);
}
.navbar-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.nav-primary { transition: max-height var(--transition), opacity var(--transition); }

/* Hero overlay op mobiel */
@media (max-width: 639px) {
	.hero::before,
	.overzicht-hero::before,
	.vw-hero::before {
		content:        "";
		position:       absolute;
		inset:          0;
		background:     rgba(255, 255, 255, 0.5);
		z-index:        2;
		pointer-events: none;
	}

	/* Content boven de overlay houden */
	.vw-hero__inner { z-index: 3; }
}

/* ── 7. Hero ────────────────────────────────────────────────────────────────── */
.hero {
	position:         relative;
	overflow:         hidden;
	border-radius:    0 0 var(--hero-radius) var(--hero-radius);
	min-height:       75vw;
	display:          flex;
	align-items:      center;
	padding-top:      7.5rem; /* offset fixed navbar (~120px) so content is below it */
}

.hero__bg {
	position:   absolute;
	inset:      0;
	z-index:    0;
}
.hero__bg img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	object-position: top;
}

.hero__content {
	position:  relative;
	z-index:   3;
	max-width: 580px;
}

.hero > .container {
	position: relative;
	z-index:  3;
	width:    100%;
}

.hero__heading {
	font-size:      clamp(2rem, 5vw, var(--size-5xl));
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
	margin-bottom:  1.5rem;
}

.hero__subheading {
	display:       flex;
	align-items:   flex-start;
	gap:           1rem;
	margin-bottom: 1.5rem;
	padding:       1.25rem 0;
}

.hero__subheading-icon {
	flex-shrink: 0;
	width:       53px;
	height:      57px;
}

.hero__subheading p {
	font-size:   var(--size-base);
	line-height: 1.5;
}

.hero__cta { margin-top: 0.5rem; }

/* ── 8. Logos ───────────────────────────────────────────────────────────────── */
.logos {
	padding: 1.875rem 0; /* 30px */
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.logos__track {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             1.5rem;
}

.logos__item img {
	height:     3rem;
	width:      auto;
	object-fit: contain;
	filter:     grayscale(100%);
	opacity:    0.8;
	transition: opacity var(--transition);
}
.logos__item img:hover { opacity: 1; }

/* ── 9. About (Over Ons) ─────────────────────────────────────────────────────── */
.about__inner {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            1.5rem;
	max-width:      57.6875rem; /* ~923px — matches Figma text container */
}

.about__heading { margin-bottom: 0.5rem; }

.about__body {
	font-size:    var(--size-base);
	line-height:  1.5;
	color:        var(--color-black);
}

/* ── 10. Voor Wie ──────────────────────────────────────────────────────────── */
.voor-wie__wrapper {
	display:   flex;
	flex-direction: column;
	gap:       1.5rem;
}

.voor-wie__text {
	padding:        2.5rem;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            1.5rem;
}

.voor-wie__body {
	font-size:   var(--size-base);
	line-height: 1.5;
}

.voor-wie__checklist {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.625rem 1.25rem;
}

.voor-wie__check-item {
	display:     flex;
	align-items: center;
	gap:         0.625rem;
	font-size:   var(--size-sm);
	color:       var(--color-grey);
	width:       calc(50% - 0.625rem);
}

.check-icon { flex-shrink: 0; width: 20px; height: 20px; }

.voor-wie__image-panel {
	border-radius: var(--card-radius);
	background:    var(--color-petrol);
	overflow:      hidden;
	min-height:    16rem;
	position:      relative;
}
.voor-wie__image-panel img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	object-position: center;
}

/* ── 11. Suites ─────────────────────────────────────────────────────────────── */
.suites__header {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	margin-bottom:  1.875rem;
}

.suites__grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1.875rem;
}

.suite-card {
	padding:        1.25rem;
	display:        flex;
	flex-direction: column;
	gap:            2rem;
	min-height:     17.5rem;
}

a.suite-card--link {
	text-decoration: none;
	color:           inherit;
	will-change:     transform;
	transition:      transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

a.suite-card--link:hover {
	transform:  translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.suite-card__icon {
	display:    flex;
	align-items: flex-start;
	height:     2.5rem;
}
.suite-card__icon img, .suite-card__icon svg { max-height: 2.5rem; width: auto; }

.suite-card__body { margin-top: auto; }

.suite-card__title {
	font-size:     var(--size-lg);
	font-weight:   400;
	line-height:   1.27;
	margin-bottom: 0.5rem;
}

.suite-card__desc {
	font-size:   var(--size-sm);
	line-height: 1.43;
	color:       var(--color-grey);
}

/* CTA card */
.suite-card--cta {
	background:     var(--color-beige-dark);
	border-radius:  var(--card-radius);
	padding:        1.25rem;
	display:        flex;
	flex-direction: column;
	justify-content: space-between;
	align-items:    flex-start;
	gap:            1.5rem;
}

.suite-card__cta-text {
	font-size:   var(--size-sm);
	line-height: 1.43;
}

/* ── 12. Insights / Inzichten & Nieuws ─────────────────────────────────────── */
.insights__header {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	margin-bottom:  1.875rem;
}

.insights__grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1.875rem;
}

.insight-card {
	background:     var(--color-white);
	border-radius:  var(--card-radius);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height:     22rem;
	position:       relative;
}

.insight-card__image {
	position:        absolute;
	inset:           0;
	z-index:         0;
}
.insight-card__image img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
}

.insight-card__body {
	position:       relative;
	z-index:        1;
	background:     var(--color-white);
	border-radius:  var(--card-radius);
	padding:        1.125rem;
	margin:         1.25rem;
	height:         7rem;
	overflow:       hidden;
}

.insight-card__meta { margin-bottom: 0.5rem; }

.insight-card__link {
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	font-size:          var(--size-base);
	line-height:        1.5;
	color:              var(--color-black);
}

.insight-card { text-decoration: none; }

.insights__footer { margin-top: 1.5rem; }

/* ── 13. Academy & Community ────────────────────────────────────────────────── */
.academy__wrapper {
	display:   flex;
	flex-direction: column;
	gap:       1.5rem;
}

.academy__text {
	padding:         2.5rem;
	display:         flex;
	flex-direction:  column;
	gap:             1.5rem;
	justify-content: center;
	align-items:     flex-start;
}

.academy__body {
	font-size:   var(--size-base);
	line-height: 1.5;
}

.academy__cards {
	display:   flex;
	flex-direction: column;
	gap:       1.5rem;
}

.academy-card {
	display:        flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius:  var(--card-radius);
	overflow:       hidden;
	min-height:     18rem;
	position:       relative;
	text-decoration: none;
	transition:     filter var(--transition);
}
.academy-card:hover { filter: brightness(0.92); }

.academy-card--community { background: var(--color-bordeaux); }
.academy-card--academy   { background: var(--color-beige-dark); }

.academy-card__bg {
	position:       absolute;
	inset:          0;
	width:          100%;
	height:         100%;
	object-fit:     cover;
	object-position: center;
	z-index:        0;
}

.academy-card__footer {
	position:    relative;
	z-index:     1;
	display:     flex;
	align-items: center;
	justify-content: space-between;
	padding:     2rem 2rem 1.5rem;
	gap:         1rem;
}

.academy-card__title {
	font-size:      var(--size-xl);
	font-weight:    400;
	line-height:    1.33;
	letter-spacing: -0.03em;
	color:          var(--color-white);
}
.academy-card--academy .academy-card__title { color: var(--color-black); }

.academy-card__arrow {
	display:     flex;
	flex-shrink: 0;
	color:       var(--color-white);
}
.academy-card__arrow svg { width: 40px; height: 40px; }
.academy-card--academy .academy-card__arrow { color: var(--color-black); }

/* ── 14. Testimonials ───────────────────────────────────────────────────────── */
.testimonials__header {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	margin-bottom:  1.875rem;
}

/* Slider wrapper — hides overflow */
.testimonials__slider {
	overflow: hidden;
}

.testimonials__track {
	display:    flex;
	gap:        1.875rem;
	transition: transform 0.4s ease;
	will-change: transform;
}

.testimonial-card {
	flex:           0 0 calc(100% - 0px); /* 1 visible on mobile */
	padding:        2rem;
	display:        flex;
	flex-direction: column;
	justify-content: space-between;
	min-height:     24rem;
	border-radius:  var(--card-radius-sm);
}

.testimonial-card__quote p {
	font-size:   var(--size-base);
	font-weight: 400;
	line-height: 1.5;
}

.testimonial-card__author {
	display:     flex;
	align-items: center;
	gap:         1.5rem;
	margin-top:  2rem;
}

.testimonial-card__logo {
	height:     3.75rem;
	width:      auto;
	object-fit: contain;
	flex-shrink: 0;
}

.testimonial-card__name {
	font-size:      1.25rem;
	font-weight:    400;
	line-height:    1.4;
	letter-spacing: -0.06em;
}
.testimonial-card__role {
	font-size:  var(--size-base);
	color:      var(--color-body-dark);
	line-height: 1.5;
}

/* Navigation buttons */
.testimonials__nav {
	display:     flex;
	gap:         0.75rem;
	margin-top:  1.5rem;
}

.testimonials__btn {
	width:           2.5rem;
	height:          2.5rem;
	border-radius:   50%;
	background:      var(--color-white);
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background var(--transition), color var(--transition);
	color:           var(--color-black);
}
.testimonials__btn:hover { background: var(--color-black); color: var(--color-white); }
.testimonials__btn:disabled { opacity: 0.3; pointer-events: none; }

/* ── 15. Footer ─────────────────────────────────────────────────────────────── */
.site-footer { padding: 2.1875rem var(--container-pad); }

.footer-outer {
	background:    var(--color-beige);
	max-width:     var(--container-max);
	margin:        0 auto;
}

.footer-inner {
	background:    var(--color-beige-dark);
	border-radius: var(--card-radius);
	padding:       3.25rem;
	display:       flex;
	flex-direction: column;
	gap:           3.125rem;
}

/* Top – tagline */
.footer-top {
	display:     flex;
	align-items: flex-start;
	gap:         1.875rem;
}

.footer-top__tagline {
	font-size:      clamp(2rem, 5vw, var(--size-6xl));
	font-weight:    400;
	line-height:    1.12;
	letter-spacing: -0.03em;
}

/* Middle */
.footer-middle {
	display:   flex;
	flex-direction: column;
	gap:       2.5rem;
}

.footer-brand {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
	max-width:      30rem;
}

.footer-brand__logo img { height: 1.6875rem; width: auto; }
.footer-brand__logo-text {
	font-size:      1.5625rem;
	font-weight:    400;
	letter-spacing: -0.02em;
}

.footer-brand__desc {
	font-size:   var(--size-base);
	line-height: 1.5;
}

.footer-social { display: flex; gap: 0.5rem; }
.footer-social__link { display: flex; }
.footer-social__link svg { width: 2.25rem; height: 2.25rem; }

.footer-col-label {
	font-size:      var(--size-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom:  1.25rem;
	font-weight:    400;
}

.footer-contact__address p {
	font-size:     var(--size-sm);
	line-height:   1.43;
	margin-bottom: 0.5rem;
}

.footer-nav__list { display: flex; flex-direction: column; gap: 0.1875rem; }
.footer-nav__list li a {
	font-size:   var(--size-sm);
	line-height: 1.43;
	transition:  opacity var(--transition);
}
.footer-nav__list li a:hover { opacity: 0.6; }

/* Powered by */
.footer-powered__logos {
	display:     flex;
	flex-direction: column;
	gap:         1.25rem;
	align-items: flex-start;
}

.footer-powered__logo {
	max-height: 2.5rem;
	max-width:  8rem;
	width:      auto;
	height:     auto;
	filter:     grayscale(100%);
	opacity:    0.6;
}

/* Bottom – legal bar */
.footer-bottom {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             0.75rem;
	padding-top:     0.75rem;
	border-top:      1px solid rgba(0,0,0,0.12);
}

.footer-bottom__links {
	display:     flex;
	gap:         1.5rem;
	align-items: center;
}
.footer-bottom__links a {
	font-size:   var(--size-xs);
	transition:  opacity var(--transition);
}
.footer-bottom__links a:hover { opacity: 0.6; }

.footer-bottom__copy { font-size: var(--size-xs); }

/* ── 16. Responsive — Mobile < 640px ───────────────────────────────────────── */
@media (max-width: 639px) {
	.navbar-utility__inner { justify-content: center; }

	/* Hero: use mobile image, increase height */
	.hero { min-height: 100svh; padding-top: 6rem; }

	/* Logos: show one at a time (JS adds .is-active) */
	.logos__track { justify-content: center; }
	.logos__item  { display: none; }
	.logos__item.is-active { display: flex; justify-content: center; align-items: center; }
}

/* ── 16. Responsive — Tablet ≥ 640px ────────────────────────────────────────── */
@media (min-width: 640px) {
	:root { --container-pad: 2.5rem; } /* 40px */

	.hero { min-height: 50vw; }

	.voor-wie__wrapper { flex-direction: row; min-height: 40rem; }
	.voor-wie__text    { flex: 0 0 50%; }
	.voor-wie__image-panel { flex: 1; min-height: auto; }

	.suites__grid { grid-template-columns: repeat(2, 1fr); }

	.insights__grid { grid-template-columns: repeat(2, 1fr); }

	.testimonials__track .testimonial-card { flex: 0 0 calc(50% - 0.9375rem); }

	.academy__wrapper { flex-direction: row; }
	.academy__text    { flex: 0 0 45%; }
	.academy__cards   { flex: 1; }
	.academy-card     { min-height: 18.75rem; }

	.footer-middle { flex-direction: row; flex-wrap: wrap; gap: 2rem; }
	.footer-brand  { flex: 0 0 100%; }
}

/* ── 17. Responsive — Desktop ≥ 1024px ──────────────────────────────────────── */
@media (min-width: 1024px) {
	:root { --container-pad: 4.0625rem; } /* 65px */

	/* Navbar */
	.navbar-hamburger { display: none; }
	.navbar-cta       { display: inline-flex; }
	.nav-primary { display: flex; }

	/* Sizes */
	.hero { min-height: 860px; padding-top: 7.5rem; }

	.voor-wie__text { padding: 2.5rem; }
	.voor-wie__check-item { width: calc(50% - 0.625rem); }

	.suites__grid { grid-template-columns: repeat(4, 1fr); }

	.insights__grid { grid-template-columns: repeat(4, 1fr); }

	.testimonials__track .testimonial-card {
		flex: 0 0 calc(33.333% - 1.25rem);
	}

	.academy__text { flex: 0 0 calc(50% - 0.75rem); }

	.footer-middle { flex-wrap: nowrap; align-items: flex-start; }
	.footer-brand   { flex: 0 0 30rem; }
	.footer-contact { flex: 1; }
	.footer-sitemap { flex: 1; }
	.footer-powered { flex: 1; }
}

/* ── 18. Responsive — Full width at max container ≥ 1280px ─────────────────── */
@media (min-width: 1280px) {
	:root { --container-pad: 0; }
}

/* ── 19. Dienst Hero ─────────────────────────────────────────────────────────── */
.dienst-hero {
	background:     var(--color-beige);
	border-radius:  0 0 var(--hero-radius) var(--hero-radius);
	overflow:       hidden;
	padding-top:    7.5rem; /* offset fixed navbar */
	padding-bottom: 3rem;
	min-height:     480px;
	display:        flex;
	align-items:    center;
}

.dienst-hero__inner {
	display:     flex;
	flex-direction: column;
	gap:         1.5rem;
	width:       100%;
}

.dienst-hero__text {
	display:        flex;
	flex-direction: column;
}

.dienst-hero__heading {
	font-size:      clamp(2rem, 5vw, var(--size-5xl));
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
}

.dienst-hero__subheading {
	display:     flex;
	align-items: flex-start;
	gap:         2.1875rem;
	padding:     1.25rem 0;
}

.dienst-hero__icon {
	flex-shrink: 0;
	width:       40px;
	height:      auto;
}

.dienst-hero__subheading p {
	font-size:   var(--size-base);
	line-height: 1.5;
	max-width:   30rem;
}

.dienst-hero__image-wrap {
	border-radius: var(--card-radius);
	overflow:      hidden;
	min-height:    280px;
	background:    var(--color-beige-dark);
}

.dienst-hero__image-wrap img {
	width:            100%;
	height:           100%;
	object-fit:       cover;
	object-position:  center;
	display:          block;
}

/* ── 20. Dienst Bouwstenen ───────────────────────────────────────────────────── */
.dienst-bouwstenen { background: var(--color-beige); }

.dienst-bouwstenen__card {
	background:     var(--color-white);
	border-radius:  var(--hero-radius);
	padding:        2rem 1.25rem;
	display:        flex;
	flex-direction: column;
	gap:            2.5rem;
}

.dienst-bouwstenen__header {
	display:        flex;
	flex-direction: column;
	gap:            1.5rem;
}

.dienst-bouwstenen__heading {
	font-size:      clamp(2rem, 4vw, var(--size-3xl));
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
}

.dienst-bouwstenen__intro {
	font-size:   var(--size-base);
	line-height: 1.5;
	max-width:   47rem;
}

.dienst-bouwstenen__grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1.875rem;
}

.dienst-bb-card {
	background:     var(--color-beige-dark);
	border-radius:  var(--card-radius);
	padding:        1.25rem;
	display:        flex;
	flex-direction: column;
	gap:            3rem;
	min-height:     18rem;
}

.dienst-bb-card__num {
	display:     block;
	font-size:   var(--size-base);
	line-height: 1.5;
	padding:     0.625rem;
}

.dienst-bb-card__body {
	display:        flex;
	flex-direction: column;
	gap:            0.9375rem;
	padding:        0.5rem;
}

.dienst-bb-card__title {
	font-size:   var(--size-lg);
	font-weight: 400;
	line-height: 1.27;
}

.dienst-bb-card__desc {
	font-size:   var(--size-sm);
	line-height: 1.43;
}

/* ── 21. Dienst CTA ─────────────────────────────────────────────────────────── */
.dienst-cta { background: var(--color-beige); }

.dienst-cta__inner {
	display:        flex;
	flex-direction: column;
	gap:            1.875rem;
}

.dienst-cta-card {
	background:     var(--color-white);
	border-radius:  var(--card-radius);
	padding:        2.5rem;
	display:        flex;
	flex-direction: column;
	gap:            2.5rem;
	justify-content: center;
	align-items:    flex-start;
}

.dienst-cta-card__content {
	display:        flex;
	flex-direction: column;
	gap:            0.9375rem;
}

.dienst-cta-card__heading {
	font-size:      clamp(1.5rem, 3vw, 2rem);
	font-weight:    400;
	line-height:    1.09;
	letter-spacing: -0.03em;
	max-width:      26.5rem;
}

.dienst-cta-card__body {
	font-size:   var(--size-base);
	line-height: 1.5;
	max-width:   28rem;
}

/* ── 22. Dienst — Responsive ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
	.dienst-bouwstenen__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.dienst-hero {
		min-height: 860px;
		padding-bottom: 4rem;
	}

	.dienst-hero__inner   { flex-direction: row; align-items: stretch; }
	.dienst-hero__text    { flex: 1; justify-content: center; }
	.dienst-hero__image-wrap {
		flex:       1;
		min-height: 560px;
	}

	.dienst-bouwstenen__card { padding: 3.25rem 4.0625rem; }
	.dienst-bouwstenen__grid { grid-template-columns: repeat(3, 1fr); }

	.dienst-cta__inner    { flex-direction: row; }
	.dienst-cta-card      { flex: 1; min-height: 375px; }
}

/* ── 19. Responsive — Mobile nav ────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.navbar-hamburger { display: flex; }
	.navbar-cta       { display: none; }

	.nav-primary {
		display:         flex;
		position:        absolute;
		top:             100%;
		left:            0;
		right:           0;
		background:      rgba(237,236,232,0.95);
		border-top:      1px solid rgba(0,0,0,0.06);
		border-bottom:   1px solid rgba(0,0,0,0.06);
		padding:         1.25rem var(--container-pad);
		max-height:      0;
		overflow:        hidden;
		opacity:         0;
		transition:      max-height 0.3s ease, opacity 0.3s ease;
		pointer-events:  none;
	}

	.nav-primary.is-open {
		max-height:     20rem;
		opacity:        1;
		pointer-events: auto;
	}

	.nav-primary__list {
		flex-direction: column;
		align-items:    flex-start;
		gap:            0;
		width:          100%;
	}
	.nav-primary__list li { width: 100%; }
	.nav-primary__list li a {
		padding: 0.625rem 0;
		font-size: var(--size-base);
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}

	/* ── Dropdown: uitklapbaar inline op mobiel ── */
	/* Begrens het menu op de zichtbare viewport en laat het zelf scrollen */
	.nav-primary.is-open {
		max-height:   calc(100dvh - 4.5rem);
		overflow-y:   auto;
	}

	/* Vergrendel de achterliggende pagina wanneer het menu open is */
	body.menu-open { overflow: hidden; }

	.has-dropdown { width: 100%; }

	/* Toon toggle-knop als gewone menurij met pijl */
	.nav-dropdown-toggle {
		display:         flex;
		justify-content: space-between;
		align-items:     center;
		width:           100%;
		padding:         0.625rem 0;
		font-size:       var(--size-base);
		border-bottom:   1px solid rgba(0,0,0,0.06);
	}

	/* Dropdown verborgen by default; JS stuurt het hidden-attribuut */
	.nav-primary .nav-dropdown[hidden] { display: none; }

	/* Dropdown inline wanneer open */
	.nav-primary .nav-dropdown {
		position:      static;
		transform:     none;
		left:          auto;
		box-shadow:    none;
		background:    transparent;
		border-radius: 0;
		padding:       0;
		min-width:     0;
		width:         100%;
	}

	/* Kolommen verticaal stapelen */
	.nav-primary .nav-dropdown__inner {
		flex-direction: column;
		gap:            0;
	}

	.nav-primary .nav-dropdown__col { gap: 0; }

	/* Kolomtitel ingesprong en in petrol-kleur */
	.nav-primary .nav-dropdown .nav-dropdown__title {
		display:        block;
		padding:        0.625rem 0 0.625rem 1rem;
		font-size:      var(--size-base);
		font-weight:    500;
		color:          var(--color-petrol);
		border-bottom:  1px solid rgba(0,0,0,0.06);
		letter-spacing: normal;
		text-transform: none;
		opacity:        1;
	}

	/* Sub-links tonen met inspringing */
	.nav-primary .nav-dropdown__list { display: flex; }
	.nav-primary .nav-dropdown__list li a { padding-left: 1rem; }

	.site-header { position: fixed; }
}

/* ── 20. Overzicht Hero (gedeeld) ────────────────────────────────────────── */
.overzicht-hero {
	position:       relative;
	min-height:     540px;
	overflow:       hidden;
	border-radius:  0 0 var(--hero-radius) var(--hero-radius);
	display:        flex;
	align-items:    center;
	padding-top:    7.5rem;
	padding-bottom: 3rem;
}

.overzicht-hero__bg {
	position: absolute;
	inset:    0;
	z-index:  0;
}

.overzicht-hero__bg img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.overzicht-hero .container {
	position: relative;
	z-index:  3;
}

.overzicht-hero__content {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	max-width:      40rem;
}

.overzicht-hero__heading {
	font-size:      clamp(2rem, 5vw, var(--size-5xl));
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
}

.overzicht-hero__btn {
	align-self: flex-start;
	margin-top: 1.25rem;
}

@media (min-width: 1024px) {
	.overzicht-hero { min-height: 860px; }
}

@media (max-width: 639px) {
	.overzicht-hero {
		min-height:  100svh;
		padding-top: 6rem;
	}
}

@media (max-width: 639px) {
	.dienst-hero { padding-top: 9rem; }
}

/* ── 21. SaaS Suites Section ─────────────────────────────────────────────── */
.saas-suites {
	background: var(--color-beige);
	padding:    3rem 0 4rem;
}

.saas-suites__header {
	margin-bottom: 1.5rem;
}

.saas-suites__eyebrow {
	font-size:      var(--size-xs);
	text-transform: uppercase;
	color:          var(--color-grey);
	letter-spacing: 0.05em;
	margin-bottom:  1rem;
}

.saas-suites__heading {
	font-size:      clamp(2rem, 3.5vw, var(--size-3xl));
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
}

.saas-suites__grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1.875rem;
}

@media (min-width: 768px) {
	.saas-suites__grid { grid-template-columns: repeat(2, 1fr); }
}

.saas-suite-card {
	background:            var(--color-white);
	border-radius:         var(--card-radius);
	padding:               1.25rem;
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   0.875rem;
	min-height:            25rem;
	position:              relative;
}

.saas-suite-card__left {
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	padding:         0.625rem 0;
	overflow:        hidden;
}

.saas-suite-card__icon {
	width:      40px;
	height:     auto;
	flex-shrink: 0;
}

.saas-suite-card__info {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	padding:        0.5rem 0;
}

.saas-suite-card__title {
	font-size:      clamp(1.5rem, 2.5vw, 2rem);
	font-weight:    400;
	line-height:    1.1;
	letter-spacing: -0.03em;
}

.saas-suite-card__desc {
	font-size:   var(--size-sm);
	color:       var(--color-grey);
	line-height: 1.43;
}

.saas-suite-card__link {
	font-size:       var(--size-sm);
	color:           var(--color-black);
	text-decoration: none;
}

.saas-suite-card__link::after {
	content:  '';
	position: absolute;
	inset:    0;
}

.saas-suite-card__link:hover { color: var(--color-grey); }

.saas-suite-card__right {
	border-radius: var(--card-radius);
	overflow:      hidden;
}

.saas-suite-card__right img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.saas-suite-cta {
	background:     var(--color-bordeaux);
	border-radius:  var(--card-radius);
	padding:        2.5rem;
	display:        flex;
	flex-direction: column;
	justify-content: space-between;
	min-height:     25rem;
	gap:            1rem;
}

.saas-suite-cta__heading {
	font-size:      clamp(1.5rem, 2.5vw, 2rem);
	font-weight:    400;
	line-height:    1.1;
	letter-spacing: -0.03em;
	color:          var(--color-white);
}

.saas-suite-cta__btn {
	background: var(--color-white);
	color:      var(--color-black);
	align-self: flex-start;
	margin-top: auto;
}

.saas-suite-cta__btn:hover,
.saas-suite-cta__btn:focus-visible {
	background: var(--color-beige);
}

/* ── 22. Datasets: Intro Section ─────────────────────────────────────────── */
.ds-intro {
	background: var(--color-beige);
	padding:    3rem 0;
}

.ds-intro__eyebrow {
	font-size:      var(--size-xs);
	text-transform: uppercase;
	color:          var(--color-grey);
	letter-spacing: 0.05em;
	margin-bottom:  1.5rem;
}

.ds-intro__heading {
	font-size:      clamp(2rem, 3.5vw, var(--size-3xl));
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
	margin-bottom:  1.5rem;
	max-width:      50rem;
}

.ds-intro__body {
	font-size:     var(--size-base);
	line-height:   1.5;
	max-width:     47rem;
	margin-bottom: 2.5rem;
}

.ds-intro__categories {
	background:     var(--color-white);
	border-radius:  var(--card-radius);
	padding:        1.25rem;
	display:        flex;
	flex-direction: column;
	gap:            0;
}

@media (min-width: 768px) {
	.ds-intro__categories {
		flex-direction: row;
		align-items:    stretch;
	}
}

.ds-category-card {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            2rem;
	padding:        1.875rem;
}

.ds-category-card__icon {
	width:  50px;
	height: auto;
}

.ds-category-card__title {
	font-size:   var(--size-lg);
	font-weight: 400;
	line-height: 1.27;
}

.ds-category-card__desc {
	font-size:   var(--size-sm);
	line-height: 1.43;
}

/* Gedeelde sectie-header (icoon + heading) */
.ds-section-header {
	display:       flex;
	align-items:   center;
	gap:           1.875rem;
	margin-bottom: 2.5rem;
}

.ds-section-header__icon {
	width:       3rem;
	height:      auto;
	flex-shrink: 0;
}

.ds-section-header__heading {
	font-size:      clamp(2rem, 3.5vw, var(--size-3xl));
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
}

/* ── 23. Datasets: De DAAN Datasets Section ──────────────────────────────── */
.ds-datasets {
	background: var(--color-beige);
	padding:    3rem 0;
}

.ds-datasets__inner {
	display:        flex;
	flex-direction: column;
	gap:            1.875rem;
}

@media (min-width: 768px) {
	.ds-datasets__inner { flex-direction: row; }
}

.ds-datasets__image {
	flex:          1;
	border-radius: var(--card-radius);
	overflow:      hidden;
	min-height:    25rem;
}

.ds-datasets__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.ds-datasets__quotes {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            0.625rem;
}

.ds-quote-card {
	background:     var(--color-white);
	border-radius:  var(--card-radius);
	padding:        1.25rem 1.875rem;
	display:        flex;
	flex-direction: column;
	gap:            0.9375rem;
}

.ds-quote-card__label {
	font-size: var(--size-base);
	color:     var(--color-grey);
}

.ds-quote-card__text {
	font-size:   var(--size-base);
	line-height: 1.5;
}

/* ── 24. Datasets: Openbare Data Section ─────────────────────────────────── */
.ds-openbare {
	background: var(--color-white);
	padding:    3rem 0;
}

.ds-openbare__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   1.875rem;
}

@media (min-width: 768px) {
	.ds-openbare__grid { grid-template-columns: repeat(4, 1fr); }
}

.ds-source-card {
	background:     var(--color-beige-dark);
	border-radius:  var(--card-radius);
	padding:        1.25rem;
	display:        flex;
	flex-direction: column;
	gap:            4rem;
	min-height:     11rem;
}

.ds-source-card__number {
	font-size:   var(--size-base);
	padding:     0.625rem;
	line-height: 1.5;
}

.ds-source-card__title {
	font-size:     var(--size-lg);
	font-weight:   400;
	line-height:   1.27;
	margin-bottom: 0.9375rem;
}

.ds-source-card__desc {
	font-size:   var(--size-sm);
	line-height: 1.43;
}

/* ── 25. Datasets: Eigen Data Section ────────────────────────────────────── */
.ds-eigen {
	background: var(--color-beige);
	padding:    3rem 0;
}

.ds-eigen__cards {
	display:        flex;
	flex-direction: column;
	gap:            1.875rem;
}

@media (min-width: 768px) {
	.ds-eigen__cards { flex-direction: row; }
}

.ds-eigen__card {
	flex:          1;
	background:    var(--color-white);
	border-radius: var(--card-radius);
	padding:       2.5rem;
}

.ds-eigen__card--text {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	gap:             2.5rem;
}

.ds-eigen__card-heading {
	font-size:      var(--size-xl);
	font-weight:    400;
	line-height:    1.33;
	letter-spacing: -0.03em;
}

.ds-eigen__card-body {
	font-size:   var(--size-base);
	line-height: 1.5;
}

.ds-eigen__card--full {
	flex: 1 0 100%;
}

.ds-eigen__card--image {
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
}

.ds-eigen__card--image img {
	width:      100%;
	height:     auto;
	object-fit: contain;
}

/* ── 26. 404 pagina ──────────────────────────────────────────────────────── */
.error-404-page {
	background: var(--color-beige);
	min-height: calc(100vh - 10rem);
	display:    flex;
	align-items: center;
}

.error-404-page__inner {
	display:         flex;
	align-items:     center;
	gap:             4rem;
	padding-top:     5rem;
	padding-bottom:  5rem;
}

.error-404__code {
	font-size:      clamp(7rem, 18vw, 14rem);
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.05em;
	color:          var(--color-petrol);
	flex-shrink:    0;
}

.error-404__content {
	display:        flex;
	flex-direction: column;
	gap:            1.5rem;
}

.error-404__heading {
	font-size:      clamp(1.5rem, 3vw, var(--size-2xl));
	font-weight:    400;
	line-height:    1.2;
	letter-spacing: -0.02em;
	margin:         0;
}

.error-404__body {
	font-size:   var(--size-base);
	line-height: 1.6;
	color:       var(--color-grey);
	max-width:   36rem;
	margin:      0;
}

@media (max-width: 639px) {
	.error-404-page__inner {
		flex-direction: column;
		gap:            2rem;
		text-align:     center;
		align-items:    center;
	}

	.error-404__body {
		max-width: none;
	}
}

/* ── 27. Voor wie pagina ─────────────────────────────────────────────────── */

/* Hero */
.vw-hero {
	position:            relative;
	height:              860px;
	background-size:     cover;
	background-position: center;
	border-radius:       0 0 var(--hero-radius) var(--hero-radius);
	overflow:            hidden;
	display:             flex;
	align-items:         center;
}

.vw-hero__inner {
	position: relative;
	z-index:  2;
}

.vw-hero__content {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            1.25rem;
	max-width:      44rem;
}

.vw-hero__heading {
	font-size:      clamp(2.5rem, 5vw, 3.75rem);
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
	color:          var(--color-black);
	margin:         0;
}

.vw-hero__sub {
	display:     flex;
	align-items: flex-start;
	gap:         1rem;
	padding:     1.25rem 0;
}

.vw-hero__sub-icon {
	flex-shrink: 0;
	width:       54px;
	height:      auto;
}

.vw-hero__subtext {
	font-size:   var(--size-base);
	line-height: 1.5;
	margin:      0;
}

/* Intro */
.vw-intro {
	background: var(--color-beige);
	padding:    4rem 0 5rem;
}

.vw-intro__header {
	max-width:     56rem;
	margin-bottom: 3rem;
}

.vw-intro__eyebrow {
	font-size:      var(--size-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--color-grey);
	margin-bottom:  1.5rem;
}

.vw-intro__heading {
	font-size:      clamp(2rem, 3.5vw, 2.75rem);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
	margin-bottom:  1.5rem;
}

.vw-intro__body {
	font-size:   var(--size-base);
	line-height: 1.6;
	max-width:   47rem;
}

.vw-intro__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:     1.875rem;
}

.vw-role-card {
	background:    var(--color-white);
	border-radius: var(--card-radius);
	padding:       1.5625rem 1.25rem;
	display:       flex;
	flex-direction: column;
	gap:           3rem;
}

.vw-role-card__header {
	display:     flex;
	align-items: center;
	gap:         1rem;
	padding:     0.625rem;
}

.vw-role-card__icon-wrap {
	width:            28px;
	flex-shrink:      0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
}

.vw-role-card__icon {
	width:  22px;
	height: auto;
}

.vw-role-card__title {
	font-size:      2rem;
	font-weight:    400;
	letter-spacing: -0.03em;
	line-height:    1.1;
	margin:         0;
}

.vw-role-card__list {
	list-style: none;
	margin:     0;
	padding:    0 0.5rem;
	display:    flex;
	flex-direction: column;
	gap:        2rem;
}

.vw-role-card__item {
	display:     flex;
	align-items: flex-start;
	gap:         1.25rem;
}

.vw-role-card__check {
	flex-shrink: 0;
	margin-top:  0.125rem;
}

.vw-role-card__item span {
	font-size:   var(--size-sm);
	line-height: 1.43;
	color:       var(--color-grey);
}

/* Journey / tijdlijn */
.vw-journey {
	background: var(--color-beige);
	padding:    3rem 0 4rem;
}

.vw-journey__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     3rem;
	align-items: flex-start;
}

.vw-journey__eyebrow {
	font-size:      var(--size-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--color-grey);
	margin-bottom:  1rem;
}

.vw-journey__heading {
	font-size:      clamp(2rem, 3.5vw, 2.75rem);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
	margin-bottom:  1rem;
}

.vw-journey__body {
	font-size:   var(--size-base);
	line-height: 1.6;
	color:       var(--color-grey);
}

.vw-journey__steps {
	list-style: none;
	margin:     0;
	padding:    0;
}

.vw-journey__step {
	display: flex;
	gap:     1.5rem;
}

.vw-journey__dot-col {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	flex-shrink:    0;
	width:          16px;
}

.vw-journey__dot {
	display:       block;
	width:         16px;
	height:        16px;
	border-radius: 50%;
	border:        1.5px solid #d7d7d7;
	background:    var(--color-white);
	flex-shrink:   0;
}

.vw-journey__step--active .vw-journey__dot {
	background:  var(--color-petrol);
	border-color: var(--color-petrol);
}

.vw-journey__line {
	display:    block;
	width:      1px;
	flex:       1;
	min-height: 3rem;
	background: #d7d7d7;
}

.vw-journey__step--active .vw-journey__line {
	background: var(--color-petrol);
}

.vw-journey__step:last-child .vw-journey__line {
	display: none;
}

.vw-journey__text {
	padding-bottom: 2.5rem;
}

.vw-journey__step-title {
	font-size:      1.5rem;
	font-weight:    400;
	letter-spacing: -0.03em;
	margin-bottom:  0.75rem;
}

.vw-journey__step-desc {
	font-size:   var(--size-base);
	line-height: 1.5;
	color:       var(--color-grey);
	margin:      0;
}

/* Testimonial */
.vw-testimonial {
	background: var(--color-beige);
	padding:    2rem 0;
}

.vw-testimonial__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     1.875rem;
	min-height: 22rem;
}

.vw-testimonial__image-wrap {
	background:    var(--color-petrol);
	border-radius: var(--card-radius);
	overflow:      hidden;
	position:      relative;
}

.vw-testimonial__image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.vw-testimonial__card {
	background:     var(--color-white);
	border-radius:  var(--card-radius);
	padding:        2.5rem;
	display:        flex;
	flex-direction: column;
	gap:            2rem;
	justify-content: center;
}

.vw-testimonial__eyebrow {
	font-size:      var(--size-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--color-grey);
	margin:         0;
}

.vw-testimonial__quote {
	font-size:      1.5rem;
	font-weight:    400;
	line-height:    1.33;
	letter-spacing: -0.03em;
	margin:         0;
	quotes:         '"' '"';
}

.vw-testimonial__quote::before {
	content: open-quote;
}

.vw-testimonial__quote::after {
	content: close-quote;
}

.vw-testimonial__author {
	font-size:   var(--size-base);
	line-height: 1.5;
	margin:      0;
}

/* Voor wie — responsive */
@media (max-width: 1023px) {
	.vw-intro__cards {
		grid-template-columns: 1fr;
	}

	.vw-journey__inner {
		grid-template-columns: 1fr;
	}

	.vw-testimonial__inner {
		grid-template-columns: 1fr;
	}

	.vw-testimonial__image-wrap {
		min-height: 20rem;
	}
}

@media (max-width: 639px) {
	.vw-hero {
		height:     auto;
		min-height: 100svh;
		padding:    7rem 0 4rem;
	}

	.vw-hero__sub {
		flex-direction: column;
		gap:            0.75rem;
	}
}

/* ── 28. Contactpagina ───────────────────────────────────────────────────── */

.contact-header {
	background:  var(--color-beige);
	padding:     13rem 0 3rem;
}

.contact-header__text {
	max-width:     56rem;
	margin-bottom: 3rem;
}

.contact-header__heading {
	font-size:      clamp(2.5rem, 5vw, 3.75rem);
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
	margin-bottom:  1.25rem;
}

.contact-header__intro {
	font-size:   var(--size-base);
	line-height: 1.6;
	max-width:   56rem;
	margin:      0;
}

.contact-info-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:     1.875rem;
}

.contact-info-card {
	background:     var(--color-white);
	border-radius:  var(--card-radius);
	padding:        1.5625rem 1.25rem;
	display:        flex;
	flex-direction: column;
	gap:            2.5rem;
}

.contact-info-card__header {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
	padding:     0.625rem;
}

.contact-info-card__icon {
	flex-shrink: 0;
}

.contact-info-card__title {
	font-size:      2rem;
	font-weight:    400;
	letter-spacing: -0.03em;
	line-height:    1.1;
	margin:         0;
}

.contact-info-card__value {
	font-size:      1.5rem;
	font-weight:    400;
	letter-spacing: -0.03em;
	color:          var(--color-grey);
	padding:        0.5rem;
	text-decoration: none;
	line-height:    1.3;
}

a.contact-info-card__value:hover {
	color: var(--color-black);
}

/* Contact form section */
.contact-form-section {
	background: var(--color-beige);
	padding:    3rem 0 5rem;
}

.contact-form-section__inner {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap:     1.5rem;
	align-items: start;
}

.contact-form-section__image-wrap {
	border-radius: var(--card-radius);
	overflow:      hidden;
	background:    var(--color-beige-dark);
	min-height:    32rem;
}

.contact-form-section__image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.contact-form-section__form-wrap {
	display:        flex;
	flex-direction: column;
	gap:            2rem;
}

.contact-form-section__heading {
	font-size:      clamp(1.75rem, 3vw, 2.75rem);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
	margin:         0;
}

/* Gravity Forms — alle standaard GF-CSS is uitgeschakeld via gform_disable_css.
   Selectors scoped binnen .contact-form-section__form-wrap voor isolatie.
   2-koloms layout: stel in GF admin CSS class 'gf_left_half' (Naam) en
   'gf_right_half' (E-mail) in op de betreffende velden. */

.contact-form-section__form-wrap .gform_body {
	display: block;
}

.contact-form-section__form-wrap .gform_fields {
	display:   flex;
	flex-wrap: wrap;
	gap:       1.25rem;
	list-style: none;
	margin:    0;
	padding:   0;
}

/* Elk veld standaard full-width */
.contact-form-section__form-wrap .gfield {
	width:          100%;
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

/* 2-koloms: GF stelt gfield--width-half in via de form builder */
.contact-form-section__form-wrap .gfield--width-half {
	width: calc(50% - 0.625rem);
}

@media (max-width: 600px) {
	.contact-form-section__form-wrap .gfield--width-half {
		width: 100%;
	}
}

/* Labels */
.contact-form-section__form-wrap .gfield_label {
	font-size:   var(--size-base);
	font-weight: 400;
	line-height: 1.5;
	margin:      0;
}

/* Verberg de required-ster */
.contact-form-section__form-wrap .gfield_required {
	display: none;
}

/* Inputs & textarea */
.contact-form-section__form-wrap input[type="text"],
.contact-form-section__form-wrap input[type="email"],
.contact-form-section__form-wrap input[type="tel"],
.contact-form-section__form-wrap textarea {
	background:    #f3f4f2;
	border:        none;
	border-radius: 1rem;
	padding:       1rem 1.5rem;
	font-family:   inherit;
	font-size:     var(--size-base);
	line-height:   1.5;
	color:         var(--color-black);
	width:         100%;
	box-sizing:    border-box;
	outline:       none;
	transition:    box-shadow 0.15s ease;
	appearance:    none;
}

.contact-form-section__form-wrap input[type="text"]:focus,
.contact-form-section__form-wrap input[type="email"]:focus,
.contact-form-section__form-wrap input[type="tel"]:focus,
.contact-form-section__form-wrap textarea:focus {
	box-shadow: 0 0 0 2px var(--color-petrol);
}

.contact-form-section__form-wrap input[type="text"]::placeholder,
.contact-form-section__form-wrap input[type="email"]::placeholder,
.contact-form-section__form-wrap input[type="tel"]::placeholder,
.contact-form-section__form-wrap textarea::placeholder {
	color: var(--color-beige-dark);
}

.contact-form-section__form-wrap textarea {
	resize:     vertical;
	min-height: 6rem;
}

/* Submit-knop */
.contact-form-section__form-wrap .gform_footer,
.contact-form-section__form-wrap .gform_page_footer {
	margin-top: 0;
	padding:    0;
}

.contact-form-section__form-wrap input[type="submit"],
.contact-form-section__form-wrap .gform_button {
	display:       block;
	width:         100%;
	background:    var(--color-black);
	color:         var(--color-white);
	border:        none;
	border-radius: var(--pill-radius);
	padding:       0.875rem 1.5rem;
	font-family:   inherit;
	font-size:     var(--size-base);
	font-weight:   400;
	line-height:   1.5;
	cursor:        pointer;
	transition:    background 0.15s ease;
}

.contact-form-section__form-wrap input[type="submit"]:hover,
.contact-form-section__form-wrap .gform_button:hover {
	background: #333;
}

/* Validatieberichten */
.contact-form-section__form-wrap .gfield_description,
.contact-form-section__form-wrap .gfield_validation_message {
	font-size:  var(--size-sm);
	margin-top: 0.25rem;
}

.contact-form-section__form-wrap .gfield_validation_message {
	color: #721c24;
}

.contact-form-section__form-wrap .gform_validation_errors {
	display: none;
}

/* GF bevestigingsbericht */
.contact-form-section__form-wrap .gform_confirmation_wrapper {
	padding:       1rem 1.5rem;
	background:    #d4edda;
	color:         #155724;
	border-radius: var(--card-radius);
	font-size:     var(--size-base);
}

/* Contact — responsive */
@media (max-width: 1023px) {
	.contact-info-cards {
		grid-template-columns: 1fr;
	}

	.contact-form-section__inner {
		grid-template-columns: 1fr;
	}

	.contact-form-section__image-wrap {
		min-height: 16rem;
	}
}

@media (max-width: 639px) {
	.contact-form__row {
		grid-template-columns: 1fr;
	}
}

/* ── 29. Single artikel ──────────────────────────────────────────────────────── */

/* Hero: titel sectie zonder afbeelding */
.article-hero {
	padding-top:    8rem;
	padding-bottom: 2.5rem;
}

.article-hero__title {
	font-size:      clamp(2rem, 4.5vw, 3.75rem);
	font-weight:    400;
	line-height:    1.1;
	letter-spacing: -0.03em;
	color:          var(--color-black);
	margin:         0;
}

/* Body: content (links) + sidebar (rechts) */
.article-body {
	padding: 1.5rem 0 5rem;
}

.article-body__inner {
	display:               grid;
	grid-template-columns: 1fr 18rem;
	gap:                   3.75rem;
	align-items:           start;
}

/* ── Content kolom ─────────────────────────────────────────────────────────── */
.article-content {
	display:        flex;
	flex-direction: column;
	gap:            2rem;
	min-width:      0;
}

.article-content__image {
	border-radius: var(--card-radius);
	overflow:      hidden;
	aspect-ratio:  1200 / 628;
	background:    var(--color-beige-dark);
}

.article-content__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Artikeltekst (the_content) */
.entry-content {
	font-size:   var(--size-sm);
	line-height: 1.65;
	color:       #535353;
}

.entry-content p  { margin: 0 0 1rem; }
.entry-content p:last-child { margin-bottom: 0; }

.entry-content h2,
.entry-content h3 {
	font-size:      1.5rem;
	font-weight:    400;
	line-height:    1.3;
	letter-spacing: -0.03em;
	color:          var(--color-black);
	margin:         2rem 0 0.75rem;
}

.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

.entry-content ol,
.entry-content ul {
	padding-left: 1.25rem;
	margin:       0 0 1rem;
}

.entry-content li { margin-bottom: 0.25rem; }

.entry-content a {
	color:           var(--color-petrol);
	text-decoration: underline;
}

.entry-content a:hover { color: var(--color-black); }

/* Horizontale lijn */
.entry-content hr {
	border:        none;
	border-top:    1px solid var(--color-beige-dark);
	width:         80%;
	margin:        1.75rem auto 2.25rem;
}

/* Tip/uitgelichte link box */
.entry-content p.tipBox {
	background:    var(--color-beige-dark);
	border-left:   3px solid var(--color-petrol);
	border-radius: 0 0.5rem 0.5rem 0;
	padding:       0.875rem 1.25rem;
	margin:        1.5rem 0;
	font-size:     var(--size-sm);
	color:         var(--color-black);
}

/* TOC — RankMath */
.entry-content .wp-block-rank-math-toc-block {
	background:    var(--color-beige-dark);
	border-left:   3px solid var(--color-petrol);
	border-radius: 0 0.5rem 0.5rem 0;
	padding:       1.25rem 1.5rem;
	margin:        1.5rem 0 2rem;
}

.entry-content .wp-block-rank-math-toc-block h2 {
	font-size:      var(--size-base);
	font-weight:    500;
	letter-spacing: 0;
	color:          var(--color-black);
	margin:         0 0 0.75rem;
}

.entry-content .wp-block-rank-math-toc-block nav ul {
	padding-left: 1.25rem;
	margin:       0;
}

.entry-content .wp-block-rank-math-toc-block nav li { margin-bottom: 0.375rem; }

.entry-content .wp-block-rank-math-toc-block nav a {
	color:           var(--color-petrol);
	text-decoration: none;
	font-size:       var(--size-sm);
}

.entry-content .wp-block-rank-math-toc-block nav a:hover { text-decoration: underline; }

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.article-sidebar {
	display:        flex;
	flex-direction: column;
	gap:            2rem;
	position:       sticky;
	top:            8rem;
}

.article-sidebar__section {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.article-sidebar__label {
	font-size:   var(--size-base);
	font-weight: 400;
	color:       var(--color-black);
	margin:      0;
}

/* Datum */
.article-meta-date {
	font-size:   var(--size-sm);
	color:       var(--color-grey);
	margin:      0;
}

/* Categorie-pills */
.article-cats {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5rem;
}

.article-cat {
	display:       inline-block;
	background:    var(--color-beige-dark);
	border-radius: 0.25rem;
	padding:       0.25rem 0.625rem;
	font-size:     var(--size-sm);
	color:         var(--color-black);
	line-height:   1.4;
}

/* Auteurs */
.article-authors {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.article-author {
	display:     flex;
	align-items: center;
	gap:         1rem;
}

.article-author__photo {
	flex-shrink:   0;
	width:         4.5rem;
	height:        4.5rem;
	border-radius: 50%;
	object-fit:    cover;
	filter:        grayscale(100%);
}

.article-author__info {
	display:        flex;
	flex-direction: column;
	gap:            0.125rem;
}

.article-author__name {
	font-size:   var(--size-base);
	color:       var(--color-black);
	margin:      0;
}

.article-author__function {
	font-size: var(--size-sm);
	color:     var(--color-grey);
	margin:    0;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.article-body { padding-top: 0; }

	.article-body__inner {
		grid-template-columns: 1fr;
	}

	.article-sidebar {
		position:       static;
		flex-direction: row;
		flex-wrap:      wrap;
		gap:            1.5rem;
	}

	.article-sidebar__section {
		flex: 1 1 auto;
	}
}

@media (max-width: 639px) {
	.article-sidebar {
		flex-direction: column;
	}
}

/* ── Team pagina ─────────────────────────────────────────────────────────────── */

.team-intro {
	background:  var(--color-beige);
	padding:     13rem 0 3rem;
}

.team-intro__eyebrow {
	font-size:      var(--size-sm);
	font-weight:    500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--color-grey);
	margin-bottom:  1rem;
}

.team-intro__heading {
	font-size:      clamp(2.5rem, 5vw, 3.75rem);
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
	max-width:      22ch;
	margin-bottom:  1.25rem;
}

.team-intro__body {
	font-size: var(--size-base);
	max-width: 56rem;
	color:     var(--color-black);
	margin:    0;
}

/* Grid */
.team-grid {
	background:     var(--color-beige);
	padding-bottom: var(--section-gap);
}

.team-grid__inner {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   1.5rem;
}

.team-card {
	background:    var(--color-white);
	border-radius: var(--card-radius);
	overflow:      hidden;
}

.team-card__photo-wrap {
	aspect-ratio: 3 / 4;
	overflow:     hidden;
}

.team-card__photo {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	filter:     grayscale(100%);
}

.team-card__photo-placeholder {
	width:      100%;
	height:     100%;
	background: var(--color-beige-dark);
}

.team-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.team-card__name {
	font-size:      1.125rem;
	font-weight:    500;
	letter-spacing: -0.01em;
	margin-bottom:  0.25rem;
}

.team-card__function {
	font-size: var(--size-sm);
	color:     var(--color-petrol);
	margin:    0;
}

/* CTA */
.team-cta {
	background: var(--color-beige);
	padding:    0 0 var(--section-gap);
}

.team-cta__card {
	background:     var(--color-petrol);
	border-radius:  var(--card-radius);
	padding:        3rem 2.5rem;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            2rem;
}

.team-cta__heading {
	font-size:      clamp(1.75rem, 3vw, 2.5rem);
	font-weight:    400;
	line-height:    1.1;
	letter-spacing: -0.03em;
	color:          var(--color-white);
	max-width:      24ch;
	margin:         0;
}

.team-cta__btn {
	background: var(--color-white);
	color:      var(--color-black);
}

.team-cta__btn:hover,
.team-cta__btn:focus-visible {
	background: var(--color-beige);
}

@media (min-width: 640px) {
	.team-grid__inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.team-grid__inner {
		grid-template-columns: repeat(4, 1fr);
	}

	.team-cta__card {
		flex-direction:  row;
		align-items:     center;
		justify-content: space-between;
	}

	.team-cta__heading { margin: 0; }
}

/* ── Nieuws pagina ───────────────────────────────────────────────────────────── */

.nieuws-intro {
	background:  var(--color-beige);
	padding:     13rem 0 3rem;
}

.nieuws-intro--compact { padding-bottom: 1.5rem; }

.nieuws-intro__eyebrow {
	font-size:      var(--size-sm);
	font-weight:    500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--color-grey);
	margin-bottom:  1rem;
}

.nieuws-intro__heading {
	font-size:      clamp(2.5rem, 5vw, 3.75rem);
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
	max-width:      22ch;
	margin-bottom:  1.25rem;
}

.nieuws-intro__body {
	font-size: var(--size-base);
	max-width: 56rem;
	margin:    0;
}

.nieuws-grid-wrap {
	background:  var(--color-beige);
	padding:     var(--section-gap) 0;
}

.nieuws-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1.875rem;
	margin-bottom:         3rem;
}

/* Paginering */
.navigation.pagination {
	display:         flex;
	justify-content: center;
}

.nav-links {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
}

.nav-links a,
.nav-links span {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           2.5rem;
	height:          2.5rem;
	border-radius:   var(--pill-radius);
	font-size:       var(--size-sm);
	text-decoration: none;
	color:           var(--color-black);
	transition:      background 0.2s ease;
}

.nav-links a:hover          { background: var(--color-beige-dark); }
.nav-links .current         { background: var(--color-black); color: var(--color-white); }
.nav-links .dots            { width: auto; }

@media (min-width: 640px) {
	.nieuws-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.nieuws-grid { grid-template-columns: repeat(3, 1fr); }
}