/* ==========================================================================
   Eefting – thema

   De kleuren van de oude site (eeftingstuc.nl): blauw #005083, wit en grijs. Donkere vlakken zijn effen blauw of een
   foto met een donkere laag. De schuine streep uit het logo komt terug als wit label (kop van de homepage, laag voor
   laag) en als hoverbaan; verder is alles rustig. Koppen in Bricolage Grotesque, tekst in Figtree.

   Inhoud
   1.  Tokens & lettertypes          11. Werkgebied (kaart)
   2.  Basis & typografie            12. Vacatures
   3.  Layout                        13. Offerteband & footer
   4.  Knoppen & links               14. Paginakop
   5.  Header                        15. Pagina-inhoud & blokstijlen
   6.  Mobiel menu                   16. Contactkaart
   7.  Hero (homepage)               17. Formulieren (plugin Eefting Core)
   8.  Diensten                      18. Lichtbak
   9.  Laag voor laag                19. Overig
   10. Recent werk
   ========================================================================== */

/* 1. Tokens & lettertypes ------------------------------------------------- */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-latin-wght-italic.woff2") format("woff2"); }

:root {
	/* De kleuren van de oude site (eeftingstuc.nl): één blauw, wit en grijs. Geen zand (keuze van de klant). */
	--blue: #005083;        /* merkkleur: header, knoppen, links, donkere vlakken (wit erop 8,4 : 1) */
	--blue-deep: #003B61;   /* alleen voor indrukken/aanwijzen en zolang een foto laadt; vlakken zijn #005083 */
	--blue-soft: #0A639E;   /* hover op blauw */
	--sky: #A9CFEA;         /* accent op blauw: hover, huidige pagina, kleine koppen (5 : 1 op #005083) */
	--tint: #E8F1F8;        /* lichtblauw vlak: hover op wit, selectie, meldingsbalk */
	--rule: #6F9EC3;        /* onderstrepingen en lijnen op wit (niet voor tekst) */
	--white: #FFFFFF;
	--gips: #F7F7F7;        /* licht vlak (oude site) */
	--ink: #222222;         /* tekst (oude site) */
	--muted: #515151;       /* tweede tekst op wit (8,1 : 1; oude site) */
	--muted-strong: #3B3B3B; /* tweede tekst op licht grijs (namen van dorpen op de kaart) */
	--line: #DDDDDD;
	--on-blue: #D3E2EE;     /* tweede tekst op blauw (6,4 : 1) */
	--on-blue-line: rgba(255, 255, 255, .18);
	--red: #B3261E;

	--f-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
	--f-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--container: 1320px;
	--gutter: clamp(20px, 5vw, 64px);
	--header-h: 84px;
	--radius: 6px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--ease-paint: cubic-bezier(.75, 0, .2, 1);
}
@media (max-width: 1023px) { :root { --header-h: 72px; } }

/* 2. Basis & typografie ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
	margin: 0;
	font-family: var(--f-text);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
@media (max-width: 600px) { body { font-size: 1.0625rem; } }
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
figure { margin: 0; }
address { font-style: normal; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.is-dark :focus-visible { outline-color: var(--white); }
::selection { background: var(--tint); color: var(--blue-deep); }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--f-display); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; color: inherit; text-wrap: balance; }
.h2 { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); font-weight: 750; letter-spacing: -.035em; }
.h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.lead { font-size: clamp(1.15rem, 1rem + .5vw, 1.375rem); line-height: 1.55; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 18px; background: var(--white); color: var(--blue); font-weight: 700; }
.skip-link:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Donkere vlakken: effen blauw, precies het blauw van de oude site (en de header). */
.is-dark { color: var(--white); background: var(--blue); }
/* Foto als achtergrond (paginakoppen en offerteband): de foto van de klant met een donkere overgang voor de
   leesbaarheid, links het donkerst (daar staat de tekst). Bijna zwart met een zweem blauw. Blauw zolang de foto laadt. */
.foto-vlak { position: relative; isolation: isolate; background: var(--blue-deep); }
.foto-vlak__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.foto-vlak__media picture { display: block; height: 100%; }
.foto-vlak__img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.foto-vlak__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(12, 20, 33, .88) 0%, rgba(12, 20, 33, .76) 45%, rgba(12, 20, 33, .5) 100%);
}
@media (max-width: 900px) { .foto-vlak__media::after { background: rgba(12, 20, 33, .64); } } /* tekst ≥ 4,5 : 1 gemeten */

/* 3. Layout ---------------------------------------------------------------- */

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(72px, 10vw, 144px); }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .h2 { margin: 0; }
.section-head p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 1.125rem; }
.is-dark .section-head p { color: var(--on-blue); }
.section-head__side { display: grid; gap: 18px; justify-items: start; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* 4. Knoppen & links ------------------------------------------------------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-height: 56px; padding: 0 1.7em;
	border: 2px solid transparent; border-radius: var(--radius);
	font-family: var(--f-text); font-size: 1.0625rem; font-weight: 700; line-height: 1.1;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-soft); color: var(--white); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
/* Op blauw: wit met blauwe tekst, zoals de streep in het logo. */
.is-dark .btn--primary { background: var(--white); color: var(--blue); }
.is-dark .btn--primary:hover { background: var(--tint); color: var(--blue-deep); }
.is-dark .btn--ghost { border-color: rgba(255, 255, 255, .35); color: var(--white); }
.is-dark .btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* Tekstlink met een lichtblauwe onderstreping. */
.text-link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rule); text-underline-offset: 6px; transition: text-decoration-color .2s; }
.text-link:hover { text-decoration-color: currentColor; }
.is-dark .text-link { text-decoration-color: var(--sky); }
.call-link { font-weight: 600; text-decoration: none; white-space: nowrap; }
.call-link strong { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rule); text-underline-offset: 6px; }
.is-dark .call-link { color: var(--on-blue); }
.is-dark .call-link strong { color: var(--white); text-decoration-color: var(--sky); }

.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: inherit; }
.icon-btn:hover { background: var(--blue-soft); }
.icon-btn .icon { width: 28px; height: 28px; }

/* 5. Header ---------------------------------------------------------------- */

.notice-bar { background: var(--tint); color: var(--blue-deep); text-align: center; font-size: .95rem; font-weight: 600; padding: 10px 0; }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--blue); color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 12px 32px rgba(10, 20, 36, .28); }
/* Helemaal bovenaan is de header doorzichtig, over de foto van de kop (zoals op de oude site); zodra je scrolt wordt
   hij blauw (main.js zet .is-scrolled). Een zacht donker verloop houdt de witte tekst leesbaar op lichte plekken van
   de foto. Alleen met JavaScript; zonder blijft de header blauw. De kop eronder schuift onder de header en krijgt er
   evenveel ruimte bij, dus niets verspringt en de header blijft even hoog. */
.js .site-header { transition: background-color .3s, border-color .3s, box-shadow .3s; }
.js .site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(12, 20, 33, .55), rgba(12, 20, 33, 0));
	opacity: 0; transition: opacity .3s;
}
.js .site-header:not(.is-scrolled) { background-color: transparent; border-bottom-color: transparent; }
.js .site-header:not(.is-scrolled)::before { opacity: 1; }
.js .site-main > .hero:first-child, .js .site-main > .page-head:first-child { margin-top: calc(-1 * var(--header-h) - 1px); } /* + de rand onder de header */
.js .site-main > .hero:first-child { padding-top: calc(clamp(48px, 8vw, 112px) + var(--header-h) + 1px); }
.js .site-main > .page-head:first-child { padding-top: calc(clamp(40px, 6vw, 88px) + var(--header-h) + 1px); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.site-header__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.site-header__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--white); }
.site-header__phone .icon { width: 18px; height: 18px; } /* Phosphor "phone", volgt de tekstkleur */
.site-header__phone:hover { color: var(--sky); }
.site-header__cta { min-height: 48px; padding: 0 1.3em; }
.menu-btn { display: none; }

/* Facebook en LinkedIn: de echte logo's (Simple Icons), wit; bij aanwijzen in hun eigen kleuren, zoals je ze kent. De
   vorm achter het logo (.icon__bg) wordt dan wit, zodat de f en "in" wit blijven. Vak van 40 px om op te tikken. */
.social { display: flex; align-items: center; gap: 2px; }
.social__link { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; color: var(--white); transition: color .2s; }
.social__link .icon { width: 22px; height: 22px; }
.social__link--linkedin .icon { width: 20px; height: 20px; } /* een vierkant oogt groter dan een rondje */
.social__link .icon__bg { fill: transparent; transition: fill .2s; }
.social__link--facebook:hover { color: #0866FF; }
.social__link--linkedin:hover { color: #0A66C2; }
.social__link:hover .icon__bg { fill: var(--white); }
.site-header__social { margin-right: -10px; } /* het vak rond het logo telt niet mee voor de afstand tot het nummer */

.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo__img { height: 44px; width: auto; }

.nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__list a {
	--pad: 9px;
	display: inline-flex; align-items: center; height: 44px; padding: 0 var(--pad);
	font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--white);
	background: linear-gradient(var(--white), var(--white)) var(--pad) calc(100% - 4px) / 0 2px no-repeat;
	transition: background-size .3s var(--ease), color .2s;
}
.nav__list a:hover, .nav__list .is-current a, .nav__list .current-menu-item a { background-size: calc(100% - 2 * var(--pad)) 2px; }

/* Wat er in de header past, zonder dat iets over twee regels loopt (gemeten):
   - vanaf 1440 px alles, met het nummer;
   - 1320–1440 px: het nummer alleen als telefoonicoon, logo iets kleiner;
   - 1260–1320 px: zonder het nummer;
   - 1024–1260 px: het menu en de socials; offerte en bellen staan dan in de kop van de pagina (.hero__actions,
     .page-head__actions);
   - daaronder het mobiele menu. */
.nav__list a, .site-header__phone { white-space: nowrap; }
@media (max-width: 1439px) {
	.logo__img { height: 42px; }
	.site-header__phone { justify-content: center; width: 40px; height: 40px; }
	.site-header__phone .icon { width: 20px; height: 20px; }
	.site-header__phone-nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 1319px) { .site-header__phone { display: none; } }
@media (max-width: 1259px) { .site-header__cta { display: none; } }
@media (max-width: 1023px) {
	.nav, .site-header__cta { display: none; }
	.menu-btn { display: inline-grid; }
	.logo__img { height: 38px; }
}
@media (max-width: 380px) { .logo__img { height: 34px; } }
@media (max-width: 599px) { .site-header__social { display: none; } } /* op de telefoon staan ze in het menu */

/* 6. Mobiel menu ----------------------------------------------------------- */

.mobile-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; gap: 24px; padding: 0 var(--gutter) 32px; overflow-y: auto; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.mobile-menu__head .logo__img { height: 38px; }
.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.mobile-menu__list a {
	display: block; padding: 10px 0;
	font-family: var(--f-display); font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
	text-decoration: none; color: var(--white);
}
.mobile-menu__list a[aria-current], .mobile-menu__list .current-menu-item a { color: var(--sky); }
.mobile-menu__foot { display: grid; gap: 12px; margin-top: auto; }
.mobile-menu__foot .call-link { justify-self: start; margin-top: 6px; }
.mobile-menu__social { margin: 4px 0 0 -9px; }

/* 7. Hero (homepage) ------------------------------------------------------- */

/* Onderaan is de hero wit: de fotostrook steekt half uit het gestucte vlak. */
.hero { position: relative; padding-top: clamp(48px, 8vw, 112px); background: linear-gradient(to bottom, var(--blue-deep) calc(100% - var(--strook-overlap)), var(--white) 0); --strook-overlap: clamp(90px, 12vw, 170px); }
/* Grote foto van afgewerkt werk (aangeleverd door de klant) achter de kop, met links een donkere overgang voor de
   leesbaarheid. Bijna zwart met een zweem navy, zodat het geen blauw vlak wordt. De foto stopt waar de witte zone
   onder de fotostrook begint. */
.hero--foto { min-height: clamp(620px, 92vh, 980px); }
@media (min-width: 901px) { .js .hero--foto { min-height: calc(clamp(620px, 92vh, 980px) + var(--header-h)); } } /* de header ligt er nu overheen */
.hero__media { position: absolute; inset: 0 0 var(--strook-overlap) 0; z-index: 0; overflow: hidden; }
.hero__media picture { display: block; height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 20, 33, .9) 0%, rgba(12, 20, 33, .78) 38%, rgba(12, 20, 33, .35) 68%, rgba(12, 20, 33, .15) 100%),
		linear-gradient(to bottom, rgba(12, 20, 33, .35) 0%, rgba(12, 20, 33, 0) 30%, rgba(12, 20, 33, 0) 70%, rgba(12, 20, 33, .4) 100%);
}
.hero > .container { position: relative; z-index: 1; }
.hero--foto .hero__slogan { max-width: 14ch; } /* twee regels, binnen het donkere deel van de foto */
/* De strook staat altijd onderaan, half over de rand van de foto; de ruimte die de minimale hoogte overlaat, komt
   tussen de tekst en de strook. */
.hero--foto { display: flex; flex-direction: column; }
.hero--foto > .container { flex: 1; display: flex; flex-direction: column; }
.hero--foto .strook { margin-top: auto; }
.hero--foto .hero__intro { margin-bottom: clamp(48px, 7vw, 96px); }
/* De garanties staan rechts op het drukke deel van de foto (mozaïek, marmer): een donker, doorschijnend vlak erachter. */
@media (min-width: 1260px) {
	.hero--foto .hero__promises {
		padding: 22px 28px 24px; border-radius: var(--radius);
		background: rgba(12, 20, 33, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
		box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
	}
}
@media (max-width: 900px) {
	.hero--foto { min-height: 0; }
	.hero__img { object-position: 50% 40%; }
	.hero__media::after { background: rgba(12, 20, 33, .67); } /* eigen staande foto (hero-mobiel); tekst ≥ 4,5 : 1 gemeten */
}
.hero__title { margin: 0; font-size: clamp(2.6rem, .6rem + 6.6vw, 6.75rem); font-weight: 800; line-height: .92; letter-spacing: -.032em; }
.hero__slogan { display: block; }
/* Het label onder de kop: een strakke witte balk met een schuine linkerkant, zoals de streep in het logo (die begint
   ook schuin, evenwijdig aan de troffel). Bij het laden schuift hij van links open. */
.hero__band {
	--slant: .55em;
	display: block; width: fit-content; max-width: 100%;
	margin-top: clamp(14px, 2vw, 26px); padding: .42em .85em .46em calc(.5em + var(--slant));
	background: var(--white); color: var(--blue);
	font-family: var(--f-text); font-size: clamp(1.05rem, .7rem + 1.35vw, 2rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15;
	animation: band-paint .9s .25s var(--ease-paint) both;
}
.hero__band, .layers__caption { clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
@keyframes band-paint {
	from { clip-path: polygon(var(--slant) 0, var(--slant) 0, 0 100%, 0 100%); }
	to { clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
}
.hero__intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(32px, 5vw, 64px); }
.hero__text { max-width: 44ch; margin: 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; color: var(--on-blue); }
.hero__actions { justify-content: flex-end; }
/* Vanaf 1260 px staat de offerteknop al in de header (en de chatknop rechtsonder): daar in plaats van de knoppen de
   garanties van het bedrijf. Op smallere schermen blijven de knoppen. */
.hero__promises { display: none; }
/* Kop van de garanties in wit, met een dunne lijn eronder: alleen de kleuren van de oude site, geen lichtblauw. */
.hero__promises-title { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .22); font-weight: 800; color: var(--white); }
.hero__promises ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hero__promises li { position: relative; padding-left: 36px; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--white); }
.hero__promises li::before {
	content: ""; position: absolute; left: 0; top: .05em; width: 22px; height: 22px; border-radius: 4px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23005083'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (min-width: 1260px) {
	.hero__actions, .page-head__actions { display: none; }
	.hero__promises { display: block; justify-self: end; }
}

.strook { display: grid; grid-template-columns: 1.25fr .9fr 1fr .95fr 1.15fr; gap: clamp(10px, 1.2vw, 18px); align-items: end; margin: clamp(48px, 7vw, 96px) 0 0; padding: 0; list-style: none; }
.strook li { overflow: hidden; border-radius: var(--radius); background: var(--blue-soft); box-shadow: 0 24px 50px rgba(10, 20, 36, .22); }
.strook img { width: 100%; height: 100%; object-fit: cover; }
.strook li:nth-child(1) { height: clamp(200px, 22vw, 330px); }
.strook li:nth-child(2) { height: clamp(240px, 27vw, 410px); }
.strook li:nth-child(3) { height: clamp(180px, 19vw, 290px); }
.strook li:nth-child(4) { height: clamp(220px, 25vw, 370px); }
.strook li:nth-child(5) { height: clamp(200px, 21vw, 320px); }
@media (max-width: 900px) {
	.hero__intro { grid-template-columns: 1fr; }
	.hero__actions { justify-content: flex-start; }
	/* Op smalle schermen: een strook om opzij te vegen. */
	.strook { display: flex; gap: 12px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.strook::-webkit-scrollbar { display: none; }
	.strook li { flex: 0 0 auto; width: 62vw; max-width: 340px; scroll-snap-align: start; }
	.strook li:nth-child(n) { height: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
	.hero__actions .btn { flex: 1 1 100%; }
}

/* 8. Diensten -------------------------------------------------------------- */

.services__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.service-row a {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 16px clamp(24px, 4vw, 64px); align-items: center;
	padding: clamp(24px, 3vw, 36px) clamp(0px, 1.5vw, 20px);
	border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
/* Bij aanwijzen strijkt er een lichtblauwe baan over de rij, zoals de streep in het logo. */
.service-row a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tint); clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease-paint); }
.service-row a:hover::before, .service-row a:focus-visible::before { clip-path: inset(0 0 0 0); }
.service-row__title { font-family: var(--f-display); font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.service-row__body { display: grid; gap: 14px; }
.service-row__text { margin: 0; color: var(--muted); font-size: 1.0625rem; }
.service-row__more { justify-self: start; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rule); text-underline-offset: 6px; }
.service-row__media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--gips); }
.service-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.service-row a:hover .service-row__media img { transform: scale(1.05); }
@media (max-width: 860px) {
	.service-row a { grid-template-columns: 1fr; padding-inline: 0; }
	.service-row__media { order: -1; aspect-ratio: 16 / 10; }
	.service-row a::before { inset: 0 calc(-1 * var(--gutter)); }
}

/* 9. Laag voor laag ------------------------------------------------------- */

.layers__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); }
/* Het blauwe vlak met diepte: het blauw van de site, met zacht licht van rechtsboven en halverwege, en naar onderen
   iets dieper blauw, alsof er licht op een gestucte wand valt. De ellipsen schalen mee met de (hoge) sectie. */
.layers.is-dark {
	background:
		/* De gloed blijft zwak genoeg dat de lichtblauwe tekst erop 4,5:1 haalt (gemeten op 390 en 1440). */
		radial-gradient(70% 18% at 92% 4%, rgba(255, 255, 255, .10), transparent 70%),
		radial-gradient(60% 16% at 85% 42%, rgba(255, 255, 255, .04), transparent 70%),
		radial-gradient(60% 16% at 10% 70%, rgba(255, 255, 255, .07), transparent 70%),
		radial-gradient(70% 18% at 90% 92%, rgba(255, 255, 255, .07), transparent 70%),
		linear-gradient(180deg, var(--blue) 0%, var(--blue) 35%, #004670 100%);
}
/* Wat er in een stap gebeurt, als korte labels onder de tekst. */
.layer__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; padding: 0; list-style: none; }
.layer__tags li { padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--white); }
.layers__figure { position: sticky; top: calc(var(--header-h) + 24px); height: calc(100vh - var(--header-h) - 48px); max-height: 760px; overflow: hidden; border-radius: var(--radius); background: var(--blue-deep); }
.layers__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.layers__figure img.is-active { opacity: 1; }
.layers__caption {
	position: absolute; left: 20px; bottom: 22px; z-index: 2;
	--slant: .5em;
	padding: .45em .8em .5em calc(.45em + var(--slant)); background: var(--white); color: var(--blue); font-weight: 800; font-size: 1.05rem;
}
.layers__steps { --rail-gap: 52px; --card-pad: clamp(22px, 2.2vw, 30px); position: relative; margin: 0; padding: 0 0 0 var(--rail-gap); list-style: none; }
/* De lijn langs de stappen: van het eerste tot het laatste rondje (main.js meet die plekken), en de witte
   vulling tot waar u gescrold bent. Zonder JavaScript loopt de lijn over de hele hoogte, zonder vulling. */
.layers__steps::before, .layers__steps::after {
	content: ''; position: absolute; left: 6px; top: var(--rail-top, 0px); bottom: var(--rail-bottom, 0px); width: 2px; border-radius: 1px;
	background: rgba(255, 255, 255, .16);
}
.layers__steps::after { background: var(--white); transform: scaleY(var(--rail-fill, 0)); transform-origin: top; }
.layer { display: grid; align-content: center; justify-items: start; gap: 12px; min-height: 58vh; padding-block: 40px; }
.layer:first-child { min-height: 46vh; padding-top: 0; }
.layer__title { position: relative; margin: 0; font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
/* Het rondje op de lijn, midden op de eerste regel van de kop: open tot u erlangs bent, dan wit. */
.layer__title::before {
	content: ''; position: absolute; left: calc(-1 * (var(--rail-gap) + var(--card-pad) + 1px)); top: calc(.575em - 7px); z-index: 1;
	width: 14px; height: 14px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .45); border-radius: 50%; background: var(--blue);
	transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.layer.is-done .layer__title::before { border-color: var(--white); background: var(--white); }
.layer.is-active .layer__title::before { box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
/* Tekst van een stap op een licht, doorschijnend vlak met een dunne rand; de actieve stap iets lichter. Het rondje
   blijft op de lijn (zie left hierboven). De inleiding boven de stappen krijgt hetzelfde vlak. */
.layer__card, .layers .section-head p {
	border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
	background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.layer__card { justify-self: stretch; display: grid; justify-items: start; gap: 12px; padding: var(--card-pad); transition: background-color .4s, border-color .4s; }
.layer.is-active .layer__card { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.layers .section-head p { padding: clamp(20px, 2vw, 28px); max-width: none; }
.layers .section-head { align-items: center; } /* kop en inleiding (in een vlak) op één lijn */
.layer__text { margin: 0; max-width: 42ch; color: var(--on-blue); font-size: 1.0625rem; line-height: 1.65; }
.layer__link { justify-self: start; }
.layer__img { display: none; }
.js .layer { opacity: .38; transition: opacity .5s var(--ease); }
.js .layer.is-active { opacity: 1; }
@media (max-width: 900px) {
	.layers__grid { grid-template-columns: 1fr; }
	.layers__figure { display: none; }
	.layers__steps { --rail-gap: 32px; --card-pad: 20px; }
	.layer, .layer:first-child { min-height: 0; padding-block: 0 48px; }
	.layer:last-child { padding-bottom: 0; }
	.js .layer { opacity: 1; }
	.layer__img { display: block; overflow: hidden; border-radius: var(--radius); margin-bottom: 10px; aspect-ratio: 4 / 3; }
	.layer__img img { width: 100%; height: 100%; object-fit: cover; }
}

/* 10. Recent werk --------------------------------------------------------- */

.work__controls { display: flex; gap: 8px; }
.rail-btn { position: relative; width: 52px; height: 52px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); transition: border-color .2s, background-color .2s; }
.rail-btn:hover:not(:disabled) { border-color: var(--blue); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border: solid var(--blue); border-width: 2.5px 2.5px 0 0; transform: translate(-70%, -50%) rotate(45deg); }
.rail-btn--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.rail {
	display: flex; gap: clamp(18px, 2.4vw, 36px);
	margin: 0; padding: 0 var(--gutter) 8px max(var(--gutter), calc((100vw - var(--container)) / 2));
	list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
	scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rail li { flex: 0 0 auto; scroll-snap-align: start; }
.rail a { display: block; text-decoration: none; color: var(--muted); }
.rail img { height: clamp(300px, 34vw, 480px); width: auto; max-width: none; border-radius: var(--radius); background: var(--gips); }
.rail figcaption { max-width: 34ch; margin-top: 12px; font-size: .95rem; line-height: 1.45; }
.work__foot { margin-top: clamp(28px, 4vw, 44px); }

/* 11. Werkgebied (kaart) -------------------------------------------------- */

.area { background: var(--gips); color: var(--ink); }
.area__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.area__text p { max-width: 44ch; font-size: 1.125rem; }
.area__text > p { margin-bottom: 1.4em; }
/* Lijst met plaatsen: compacte links in kolommen. */
.area__places { columns: 3 9rem; column-gap: 20px; margin: 0 0 1.6em; padding: 0; list-style: none; font-size: .98rem; }
.area__places li { break-inside: avoid; padding: 3px 0; }
.area__places a { color: var(--blue); font-weight: 600; text-decoration: none; background: linear-gradient(var(--rule), var(--rule)) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--ease); }
.area__places a:hover, .area__places a:focus-visible, .area__places a.is-hot { background-size: 100% 2px; }
.area__places--inline { columns: auto; display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* Kaart (inc/map.php, gegevens inc/werkgebied.php): de provincies wit op het lichtgrijze vlak, de plaatsen in blauw,
   de vestiging met een witte ring. Lettergrootte en stipmaat staan als attribuut in de SVG (per uitsnede). */
.area__map { width: 100%; max-width: 660px; margin: 0; justify-self: center; }
.map { display: block; width: 100%; height: auto; }
.map--zoom { display: none; }
.map__prov { fill: var(--white); stroke: rgba(0, 80, 131, .35); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map__circle { fill: rgba(0, 80, 131, .05); stroke: var(--rule); stroke-width: 2px; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.map__circle-label { fill: var(--blue); font-family: var(--f-text); font-weight: 700; }
.map__prov-label { fill: var(--blue); font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; opacity: .22; }
.map__land { fill: var(--blue); font-family: var(--f-text); font-weight: 600; opacity: .4; }
.map__scale path { fill: none; stroke: var(--blue); stroke-width: 2px; opacity: .55; vector-effect: non-scaling-stroke; }
.map__scale-label { fill: var(--blue); font-family: var(--f-text); font-weight: 600; opacity: .75; }
.map__dot { fill: var(--blue); transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease); }
.map__dot--dorp { opacity: .55; }
.map__dot--home { fill: var(--blue); }
.map__ring { fill: var(--white); stroke: var(--blue); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.map__place a { cursor: pointer; }
.map__place.is-hot .map__dot, .map__place a:hover .map__dot { transform: scale(1.7); }
.map__name { fill: var(--blue); font-family: var(--f-text); font-weight: 600; paint-order: stroke; stroke: var(--white); stroke-linejoin: round; pointer-events: none; }
.map__name--dorp { font-weight: 500; fill: var(--muted-strong); }
.map__name--strong { font-family: var(--f-display); font-weight: 800; }
@media (max-width: 900px) { .area__grid { grid-template-columns: 1fr; } }
/* Op smalle schermen de uitsnede van de cirkel, anders worden de namen te klein. */
@media (max-width: 700px) { .map--heel { display: none; } .map--zoom { display: block; } }

/* Pagina Werkgebied: de kaart en alle plaatsen per provincie en gemeente. */
.section--flush-top { padding-top: 0; }
.wg__map { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 80px); }
.wg__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.wg__provincie .h3 { padding-bottom: 12px; border-bottom: 3px solid var(--blue); }
.wg__gemeente { margin-top: 26px; }
.wg__gemeente-title { margin: 0 0 8px; font-family: var(--f-text); font-size: .95rem; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.wg__kernen { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wg__kern { font-weight: 700; color: var(--blue); }
a.wg__kern { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rule); text-underline-offset: 4px; }
a.wg__kern:hover { text-decoration-color: currentColor; }
.wg__dorpen { color: var(--muted); }
@media (max-width: 760px) { .wg__groups { grid-template-columns: 1fr; } }

/* Plaatspagina: de plaats en omgeving, met een kaartje. */
.plaats-omgeving { background: var(--gips); }
.plaats-omgeving__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.plaats-omgeving__text p { max-width: 52ch; }
.plaats-omgeving__buren-title { margin: 1.4em 0 .4em; font-weight: 700; }
.plaats-omgeving__map { margin: 0; }
.plaats-omgeving__map .map { border-radius: var(--radius); background: var(--white); box-shadow: 0 20px 50px rgba(20, 38, 64, .08); }
@media (max-width: 900px) { .plaats-omgeving__grid { grid-template-columns: 1fr; } }

/* 12. Vacatures ------------------------------------------------------------ */

.jobs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); }
.jobs__intro p { max-width: 40ch; color: var(--muted); }
.job-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.job-row { position: relative; display: grid; gap: 8px; padding: 28px 0; border-top: 1px solid var(--line); }
.job-row__title { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 750; letter-spacing: -.03em; }
.job-row__title a { text-decoration: none; }
.job-row__title a::after { content: ""; position: absolute; inset: 0; }
.job-row:hover .job-row__title a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rule); text-underline-offset: 6px; }
.job-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.job-row__meta li { padding: 3px 12px; border-radius: 999px; background: var(--gips); font-size: .9rem; font-weight: 600; color: var(--ink); }
.job-row__text { margin: 0; color: var(--muted); max-width: 60ch; }
.jobs-list { margin-top: clamp(48px, 6vw, 72px); }
.notice-box { padding: 20px 24px; background: var(--gips); border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 860px) { .jobs__grid { grid-template-columns: 1fr; } }

/* 13. Offerteband & footer ------------------------------------------------- */

.cta { padding-block: clamp(72px, 10vw, 136px); }
.cta__title { max-width: 16ch; margin: 0 0 .35em; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; }
.cta__text { margin: 0; max-width: 42ch; color: var(--on-blue); font-size: 1.2rem; }
.cta__side { display: grid; gap: 18px; justify-items: end; }
.cta__side .actions { justify-content: flex-end; }
@media (max-width: 860px) { .cta__grid { grid-template-columns: 1fr; } .cta__side { justify-items: start; } .cta__side .actions { justify-content: flex-start; } }

/* Footer: links het logo met de regio, het adres en de socials, dan diensten, de pagina's van Eefting en contact.
   Contact heeft kleine labels en de nummers groot en wit: daar komen de meeste mensen voor. Onderaan de juridische
   regel. */
.site-footer { background: var(--blue); color: var(--on-blue); font-size: 1rem; }
.site-footer__top {
	display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
	gap: 48px clamp(28px, 3.5vw, 56px); padding-block: clamp(56px, 7vw, 96px) clamp(48px, 5.5vw, 80px);
}
.site-footer__brand .logo__img { height: auto; width: min(100%, 240px); }
.site-footer__brand p { max-width: 30ch; margin: 24px 0 0; line-height: 1.55; }
.site-footer__address { margin: 18px 0 0; font-style: normal; line-height: 1.55; }
.site-footer .site-footer__address a { color: var(--white); }
.site-footer__social { margin: 16px 0 0 -9px; }
.site-footer__title { margin: 0 0 20px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; color: var(--white); }
.footer__links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-footer a:not(.social__link, .logo) { color: var(--on-blue); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.site-footer a:not(.social__link, .logo):hover { color: var(--white); text-decoration-color: currentColor; }
.site-footer__contact { display: grid; gap: 22px; font-style: normal; }
.site-footer__group { display: grid; gap: 4px; justify-items: start; align-content: start; }
.site-footer__label { font-size: .875rem; font-weight: 600; color: var(--on-blue); }
.site-footer .site-footer__contact a { color: var(--white); }
.site-footer__contact .site-footer__phone { font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.site-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 32px;
	padding-block: 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--on-blue-line); font-size: .9rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.site-footer .site-footer__legal a { text-decoration-color: var(--on-blue-line); }
.nowrap { white-space: nowrap; }

/* Tot 1200 px het logo links over twee rijen, ernaast diensten en Eefting en daaronder contact (in twee kolommen als
   het mailadres erin past); op de telefoon het logo bovenaan, diensten en Eefting naast elkaar en contact eronder. */
@media (max-width: 1199px) {
	.site-footer__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
	.site-footer__brand { grid-row: span 2; }
	.site-footer__contact-col { grid-column: 2 / -1; }
	.site-footer__contact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px clamp(28px, 3.5vw, 56px); } /* zelfde kolomafstand: lijnt uit met diensten en Eefting */
	.site-footer__group:first-child { grid-row: span 2; } /* telefoon links, e-mail en facturen rechts onder elkaar */
}
@media (max-width: 760px) {
	.site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; }
	.site-footer__brand { grid-row: auto; grid-column: 1 / -1; }
	.site-footer__contact-col { grid-column: 1 / -1; }
}

/* 14. Paginakop ------------------------------------------------------------ */

.page-head { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 88px); }
.page-head__grid { display: grid; gap: 32px; }
.page-head--media .page-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(32px, 5vw, 80px); }
.page-head__title { margin: 0; max-width: 16ch; font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.5rem); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
.page-head__actions { margin-top: clamp(28px, 3.5vw, 44px); }
.page-head--compact .page-head__title { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
.page-head__lead { max-width: 52ch; margin: 24px 0 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--on-blue); }
/* De foto hangt over de onderrand van de kop, de witte pagina in. */
.page-head__media { position: relative; margin-bottom: calc(-1 * clamp(96px, 12vw, 180px)); }
.page-head__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px rgba(10, 20, 36, .3); }
.page-head--media + .page-body .with-aside__side { padding-top: clamp(96px, 12vw, 180px); }
@media (max-width: 860px) {
	.page-head--media .page-head__grid { grid-template-columns: 1fr; }
	.page-head__media { margin-bottom: -88px; }
	.page-head__media img { aspect-ratio: 16 / 10; }
	.page-head--media + .page-body { padding-top: 120px; }
	.page-head--media + .page-body .with-aside__side { padding-top: 0; }
}

.crumbs { margin-bottom: clamp(20px, 3vw, 36px); font-size: .95rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; gap: 10px; color: var(--on-blue); }
.crumbs li:not(:last-child)::after { content: "/"; opacity: .5; }
.crumbs a { color: var(--on-blue); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }

/* 15. Pagina-inhoud & blokstijlen ----------------------------------------- */

.page-body { padding-block: clamp(56px, 7vw, 104px); }
.with-aside { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.with-aside__side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
@media (max-width: 960px) { .with-aside { grid-template-columns: 1fr; } .with-aside__side { position: static; } }

.prose { max-width: 70ch; }
.prose > * { margin-top: 0; margin-bottom: 1.2em; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { margin-top: 1.9em; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 750; letter-spacing: -.035em; }
.prose h3 { margin-top: 1.6em; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
.prose h4 { margin-top: 1.4em; font-size: 1.2rem; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose a:not(.wp-block-button__link) { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.prose a:not(.wp-block-button__link):hover { text-decoration-color: currentColor; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.25em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--blue); }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 26px; border-left: 4px solid var(--blue); font-family: var(--f-display); font-size: 1.45rem; line-height: 1.3; letter-spacing: -.02em; }
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--gips); font-weight: 700; }
.prose figcaption { margin-top: 8px; font-size: .92rem; color: var(--muted); }
.prose img { border-radius: var(--radius); }
.prose .alignwide { max-width: none; width: 100%; }
.prose iframe { max-width: 100%; }

.is-style-lead { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.55; color: var(--ink); }
ul.is-style-checks { display: grid; gap: 12px; padding-left: 0; list-style: none; }
ul.is-style-checks li { position: relative; margin: 0; padding-left: 38px; }
ul.is-style-checks li::before {
	content: ""; position: absolute; left: 0; top: .18em; width: 24px; height: 24px; border-radius: 4px;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23FFFFFF'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 15px no-repeat;
}
ul.is-style-columns { columns: 2; column-gap: 40px; }
@media (max-width: 560px) { ul.is-style-columns { columns: 1; } }
.is-style-kaart { padding: clamp(24px, 3vw, 36px); background: var(--gips); border-radius: var(--radius); }
.is-style-kaart > :last-child { margin-bottom: 0; }
.is-style-uitgelicht { padding: clamp(24px, 3vw, 36px); background: var(--gips); border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; }
.is-style-uitgelicht > :last-child { margin-bottom: 0; }
.is-style-donker { padding: clamp(28px, 3.5vw, 44px); background: var(--blue); color: var(--white); border-radius: var(--radius); }
.is-style-donker > :last-child { margin-bottom: 0; }
.is-style-donker a:not(.wp-block-button__link) { color: var(--white); text-decoration-color: var(--sky); }
.is-style-donker h2, .is-style-donker h3 { margin-top: 0; color: var(--white); }
.is-style-donker .wp-block-button__link { background: var(--white); border-color: var(--white); color: var(--blue); }

.prose .wp-block-columns { gap: 20px; margin-bottom: 1.5em; }
.prose .wp-block-column > :last-child { margin-bottom: 0; }
.prose .wp-block-column h3, .prose .wp-block-column h4 { margin-top: 0; }
.wp-block-columns.is-style-diensten { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.wp-block-columns.is-style-diensten .wp-block-column { flex: none; width: auto !important; padding: 22px 0; border-bottom: 1px solid var(--line); }
.wp-block-columns.is-style-diensten h3, .wp-block-columns.is-style-diensten h4 { margin-bottom: .35em; font-size: 1.3rem; letter-spacing: -.02em; }
.wp-block-columns.is-style-diensten p { margin: 0; font-size: 1rem; color: var(--muted); }
.wp-block-columns.is-style-diensten ul { font-size: 1rem; }
.wp-block-columns.is-style-stappen { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; counter-reset: stap; }
.wp-block-columns.is-style-stappen .wp-block-column { position: relative; flex: none; width: auto !important; padding-top: 64px; counter-increment: stap; }
.wp-block-columns.is-style-stappen .wp-block-column::before { content: counter(stap); position: absolute; left: 0; top: 0; font-family: var(--f-display); font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--rule); }
.wp-block-columns.is-style-stappen h3, .wp-block-columns.is-style-stappen h4 { margin-bottom: .3em; font-size: 1.25rem; }
.wp-block-columns.is-style-stappen p { margin: 0; font-size: 1rem; color: var(--muted); }

/* Galerijen: eigen raster (3 kolommen, op smalle schermen 2). */
.prose .wp-block-gallery, .prose .wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 1.6em; }
.prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.prose .wp-block-gallery figure.wp-block-image { margin: 0 !important; width: auto !important; max-width: none !important; flex: none !important; display: block; }
.prose .wp-block-gallery .wp-block-image a, .prose .wp-block-gallery .wp-block-image img { display: block; width: 100%; }
.prose .wp-block-gallery .wp-block-image img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius); }
.prose .wp-block-gallery .wp-block-image a { overflow: hidden; border-radius: var(--radius); }
.prose .wp-block-gallery .wp-block-image a img { transition: transform .7s var(--ease); }
.prose .wp-block-gallery .wp-block-image a:hover img { transform: scale(1.04); }
.prose .wp-block-gallery figcaption { display: none; }
/* Mozaïek: de eerste foto groot over twee rijen, de andere twee ernaast. Op smalle schermen de grote foto bovenaan. */
.prose .wp-block-gallery.is-style-mozaiek { grid-template-columns: 2fr 1fr; }
.prose .wp-block-gallery.is-style-mozaiek > figure:first-child { position: relative; grid-row: span 2; }
.prose .wp-block-gallery.is-style-mozaiek > figure:first-child > :is(a, img) { position: absolute; inset: 0; height: 100%; }
.prose .wp-block-gallery.is-style-mozaiek > figure:first-child img { height: 100%; aspect-ratio: auto; }
@media (max-width: 600px) {
	.prose .wp-block-gallery, .prose .wp-block-gallery.columns-4, .prose .wp-block-gallery.is-style-mozaiek { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.prose .wp-block-gallery.is-style-mozaiek > figure:first-child { position: static; grid-column: 1 / -1; grid-row: auto; }
	.prose .wp-block-gallery.is-style-mozaiek > figure:first-child > :is(a, img) { position: static; height: auto; }
	.prose .wp-block-gallery.is-style-mozaiek > figure:first-child img { height: auto; aspect-ratio: 4 / 3; }
}

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 1.7em;
	border: 2px solid var(--blue); border-radius: var(--radius); background: var(--blue); color: var(--white);
	font-family: var(--f-text); font-size: 1.0625rem; font-weight: 700; line-height: 1.1; text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.wp-block-button__link:hover { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--white); }
.is-style-outline .wp-block-button__link { background: transparent; border-color: var(--line); color: var(--ink); }
.is-style-outline .wp-block-button__link:hover { border-color: var(--blue); color: var(--blue); }

/* 16. Contactkaart --------------------------------------------------------- */

/* Effen blauw (.is-dark); de knoppen worden daardoor wit. */
.contact-card { padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(20, 38, 64, .16); }
.contact-card__title { margin-bottom: .35em; font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em; }
.contact-card__text { margin-bottom: 1.3em; font-size: 1rem; color: var(--on-blue); }
.contact-card__phone { display: block; margin-bottom: 4px; font-family: var(--f-display); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; text-decoration: none; color: var(--white); }
.contact-card__phone:hover { color: var(--sky); }
.contact-card__list { display: grid; gap: 6px; margin: 14px 0 22px; padding: 0; list-style: none; font-size: 1rem; color: var(--on-blue); }
.contact-card__list a { font-weight: 600; color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.contact-card__list a:hover { text-decoration-color: var(--sky); }
.contact-card__actions { display: grid; gap: 10px; }
.contact-card__foot { margin: 18px 0 0; font-size: .88rem; color: var(--on-blue); }

.form-card { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3.4vw, 44px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(20, 38, 64, .08); }
.form-card__title { margin-bottom: .3em; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 750; letter-spacing: -.035em; }
.form-card__lead { color: var(--muted); margin-bottom: 1.6em; }
.prose--form .ec-form { margin-top: 1em; }

.job-facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 0 0 clamp(32px, 4vw, 48px); padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.job-facts div { display: grid; gap: 2px; }
.job-facts dt { font-size: .9rem; color: var(--muted); }
.job-facts dd { margin: 0; font-weight: 700; }

/* 17. Formulieren (plugin Eefting Core, inc/forms.php) --------------------- */

.ec-form { display: grid; gap: 20px; }
.ec-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 20px; }
.ec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ec-field { display: grid; gap: 7px; min-width: 0; }
.ec-field > label, .ec-field legend { padding: 0; font-weight: 700; font-size: 1rem; color: var(--ink); }
.ec-req { color: var(--blue); }
.ec-optional { color: var(--muted); font-weight: 400; font-size: .92em; }
.ec-field input, .ec-field select, .ec-field textarea {
	width: 100%; min-height: 56px; padding: 14px 16px;
	border: 1.5px solid #C4C4C4; border-radius: var(--radius); background: var(--white); color: var(--ink);
	transition: border-color .2s, box-shadow .2s; appearance: none;
}
.ec-field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.ec-field select { padding-right: 44px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005083' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 14px center / 20px no-repeat; }
.ec-field input:hover, .ec-field select:hover, .ec-field textarea:hover { border-color: #8A8A8A; }
.ec-field input:focus, .ec-field select:focus, .ec-field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 80, 131, .2); }
.ec-field input[type="file"] { min-height: 0; padding: 12px; background: var(--gips); border-style: dashed; cursor: pointer; }
.ec-field input[type="file"]::file-selector-button { margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 4px; background: var(--blue); color: var(--white); font-weight: 700; cursor: pointer; }
.ec-help { margin: 0; color: var(--muted); font-size: .92rem; }
.ec-field.is-invalid input, .ec-field.is-invalid textarea, .ec-field.is-invalid select { border-color: var(--red); }
.ec-field--chips { gap: 10px; }
.ec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-chip { position: relative; cursor: pointer; }
.ec-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ec-chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 18px; border: 1.5px solid #C4C4C4; border-radius: 999px; background: var(--white); font-weight: 600; transition: background-color .15s, border-color .15s, color .15s; }
.ec-chip:hover span { border-color: var(--blue); }
.ec-chip input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ec-chip input[type="checkbox"]:checked + span::before { content: ""; width: 14px; height: 14px; margin-right: 8px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23005083'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 10px no-repeat; border-radius: 3px; }
.ec-chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.ec-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ec-check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--blue); flex: none; }
.ec-form__note { margin: 0; padding: 14px 18px; border-radius: var(--radius); background: var(--gips); font-size: .98rem; }
.ec-form__nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ec-form__nav > :only-child { margin-left: auto; }
.ec-form__privacy { margin: 0; color: var(--muted); font-size: .9rem; }
.ec-form__privacy a { color: var(--muted); }
.ec-form__status:empty { display: none; }
.ec-form__status { padding: 14px 18px; border-radius: var(--radius); background: #FBEAE8; color: #8C2414; font-weight: 600; }
.ec-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: 0 1.8em; border: 2px solid transparent; border-radius: var(--radius); font-family: var(--f-text); font-size: 1.0625rem; font-weight: 700; line-height: 1.1; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ec-btn--primary { background: var(--blue); color: var(--white); }
.ec-btn--primary:hover { background: var(--blue-soft); }
.ec-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.ec-btn--ghost:hover { border-color: var(--blue); }
.ec-btn--block { width: 100%; }
.ec-btn[disabled], .ec-form.is-sending .ec-btn[type="submit"] { opacity: .6; cursor: progress; }
.ec-steps { display: none; }
@media (max-width: 560px) { .ec-row { grid-template-columns: 1fr; } }

.ec-form-success { display: grid; justify-items: center; gap: 8px; padding: 32px 12px; text-align: center; }
.ec-form-success:focus { outline: 0; }
.ec-form-success__icon {
	width: 76px; height: 76px; margin-bottom: 8px; border-radius: 50%;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23FFFFFF'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 36px no-repeat;
}
.ec-form-success h3 { margin: 0; font-size: 2rem; }
.ec-form-success p { max-width: 440px; margin: 0; color: var(--muted); }

/* 18. Lichtbak ------------------------------------------------------------- */

.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 40, 66, .97); color: var(--white); }
.lightbox::backdrop { background: transparent; }
/* Foto en onderschrift altijd in het midden (flex, niet afhankelijk van de rasterberekening van de browser). */
.lightbox__figure { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; margin: 0; padding: 64px 88px; }
.lightbox__figure img { display: block; max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption { font-size: 1rem; color: var(--on-blue); text-align: center; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--white); }
.lightbox button:hover { background: var(--white); color: var(--blue); }
.lightbox button::before { content: ""; display: block; }
/* Sluiten: een kruis van twee lijnen. */
.lightbox .lightbox__close::before { width: 20px; height: 20px; border: 0; background: linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat; transform: rotate(45deg); }
/* Vorige en volgende: een hoek. */
.lightbox .lightbox__prev::before, .lightbox .lightbox__next::before { width: 13px; height: 13px; border: solid currentColor; border-width: 2.5px 2.5px 0 0; }
.lightbox .lightbox__prev::before { transform: translateX(3px) rotate(-135deg); }
.lightbox .lightbox__next::before { transform: translateX(-3px) rotate(45deg); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next { display: none; }
@media (max-width: 700px) { .lightbox__figure { padding: 76px 12px 90px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 18px; transform: none; } }

/* 19. Overig --------------------------------------------------------------- */

.result-list { display: grid; gap: 0; margin: 0 0 32px; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.result { padding: 24px 0; border-top: 1px solid var(--line); }
.result__title { font-family: var(--f-display); font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em; text-decoration: none; }
.result__text { margin: 6px 0 0; color: var(--muted); }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: var(--white); }
.notfound__links { display: grid; gap: 0; margin: 0 0 40px; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.notfound__links a { display: block; padding: 16px 0; border-top: 1px solid var(--line); font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 750; letter-spacing: -.03em; text-decoration: none; }
.notfound__links a:hover { color: var(--blue-soft); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
	.site-header__actions, .mobile-menu, .cta, .ecw, .skip-link, .rail-btn { display: none !important; }
	.is-dark, .site-footer { background: none !important; color: var(--ink) !important; }
}