/*
 * nl81.css — Huisstijl-refresh Nederland '81
 * Laadt als laatste stylesheet en overschrijft css.css waar nodig.
 * Het originele thema blijft intact; dit bestand verwijderen zet alles terug.
 */

:root {
	/* Basiskleur: RAL 5015 Himmelblau (#007CB0). De overige tinten zijn
	   afgeleid van dezelfde kleurtoon (198°) zodat het één familie blijft. */
	--nl-blue:        #007cb0;
	--nl-blue-dark:   #00648f;
	--nl-blue-700:    #00648f;
	--nl-blue-900:    #00405c;
	--nl-blue-100:    #cbe9f7;
	--nl-blue-50:     #eff8fd;
	--nl-ink:         #17222d;
	--nl-body:        #46586a;
	--nl-line:        #dde5ec;
	--nl-bg:          #f2f5f8;
	--nl-radius:      6px;
	--nl-shadow:      0 1px 2px rgba(11,42,66,.06), 0 8px 24px rgba(11,42,66,.07);
	--nl-shadow-lg:   0 2px 4px rgba(11,42,66,.07), 0 18px 40px rgba(11,42,66,.12);
	--nl-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
	font-family: var(--nl-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--nl-body);
	background: var(--nl-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
	color: var(--nl-ink);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--nl-blue);
	outline-offset: 2px;
}

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

.header {
	/* Het oude thema zette de balk op position:fixed. Een vaste balk valt
	   buiten de normale stroom en neemt dus geen ruimte in: de pagina begon
	   op 0 en de bovenste 98px verdween eronder. Daardoor was de kop van elke
	   pagina afgesneden — "Referenties" miste zijn bovenkant — en liep ook de
	   hero op de homepagina onder de balk door.

	   Met position:sticky houdt de balk zijn plek in de stroom (de inhoud
	   begint er netjes onder) en blijft hij bij het scrollen toch bovenaan
	   staan. Dat werkt op elke schermbreedte, ook als de balk hoger of lager
	   wordt, zonder dat ergens een hoogte hoeft te worden bijgehouden. */
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 14px 0;
	border-bottom: 1px solid var(--nl-line);
	box-shadow: 0 1px 12px rgba(11,42,66,.07);
	background: #fff;
}

.header .logo { max-height: 62px; width: auto; }

.header nav ul li a {
	padding: 10px 14px;
	color: var(--nl-blue-900);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: var(--nl-radius);
}

/* Actieve pagina: blauwe tekst met streepje, geen blok — anders concurreert
   het met de knop rechtsboven. */
.header nav ul li a:hover,
.header nav ul .current_page_item > a,
.header nav ul .current_page_ancestor > a {
	color: var(--nl-blue) !important;
	background: transparent;
}

.header nav ul .current_page_item > a,
.header nav ul .current_page_ancestor > a {
	box-shadow: inset 0 -3px 0 var(--nl-blue);
}

.header nav ul li.nl-nav-actie > a,
.header nav ul li.nl-nav-actie.current_page_item > a {
	box-shadow: none;
}

/* ---------- Uitklapmenu onder Werkzaamheden ---------- */

/* Het rasterysteem van het thema zet overflow:hidden op .row en .grid_*,
   waardoor een uitklapmenu werd afgeknipt. */
.header .row,
.header .grid_3,
.header .grid_9,
.header nav { overflow: visible !important; }

.header nav ul li { position: relative; }

/* Het oude thema verbergt submenu's hard; hier weer aanzetten. */
.header nav .sub-menu {
	display: block !important;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 250px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--nl-line);
	border-top: 3px solid var(--nl-blue);
	border-radius: 0 0 var(--nl-radius) var(--nl-radius);
	box-shadow: var(--nl-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.header nav ul li:hover > .sub-menu,
.header nav ul li:focus-within > .sub-menu,
.header nav ul li.nl-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header nav .sub-menu li { float: none; }

.header nav .sub-menu li a {
	padding: 9px 18px;
	border-radius: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--nl-body);
	white-space: nowrap;
	display: block;
}

.header nav .sub-menu li a:hover,
.header nav .sub-menu .current_page_item > a {
	color: #fff !important;
	background: var(--nl-blue);
}

/* Pijltje bij het bovenliggende item */
.header nav .menu-item-has-children > a::after {
	content: " \25BE";
	font-size: 11px;
	opacity: .7;
}

/* Op mobiel het submenu gewoon ingesprongen tonen */
@media (max-width: 800px) {
	.header nav { padding-right: 0; }
	.header nav > ul,
	.header nav ul.menu { flex-wrap: wrap; justify-content: flex-start; padding-right: 0; }
	.header nav ul li.nl-nav-actie {
		position: static;
		transform: none;
		margin-left: 0 !important;
	}
	.header nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0 0 0 14px;
		padding: 0;
		border: 0;
		border-left: 3px solid var(--nl-blue-100);
		border-radius: 0;
		box-shadow: none;
	}
}

/* ---------- Content ---------- */

section {
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow);
	padding-bottom: 44px !important;
}

section .breadcrumbs {
	padding-top: 22px;
	padding-bottom: 18px;
	color: #7d8d9c;
	font-size: 13px;
	border-bottom: 1px solid var(--nl-line);
	margin-bottom: 26px;
}

section .breadcrumbs a { color: var(--nl-blue-700); font-weight: 600; }
section .breadcrumbs a:hover { color: var(--nl-blue-900); }

/* Paginatitels: blauwe balk vervangen door een rustiger koptekst
   met accentlijn. Voorkomt ook het afkappen van lange titels. */
.entry-header .entry-title {
	padding: 0 0 14px;
	margin: 0 0 22px;
	color: var(--nl-ink);
	background: none;
	font-size: 30px;
	font-weight: 700;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	border-bottom: 3px solid var(--nl-blue);
	display: block;
}

.entry-header .entry-title a { color: var(--nl-ink); }
.entry-header .entry-title a:hover { color: var(--nl-blue); }

.entry-content { font-size: 16.5px; }
.entry-content h2 { font-size: 23px; margin: 1.8em 0 .6em; }
.entry-content h3 { font-size: 19px; margin: 1.6em 0 .5em; }
.entry-content ul { margin: 0 0 1.2em 1.1em; list-style: disc; }
.entry-content ul li { margin-bottom: .4em; padding: 0; }
.entry-content a { color: var(--nl-blue-700); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--nl-blue-900); }
.entry-content img { border-radius: var(--nl-radius); }

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

.homedivs {
	margin-bottom: 26px;
}

.homedivs .thumbnail {
	height: 190px;
	margin-bottom: 16px;
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}

.homedivs .thumbnail:hover {
	box-shadow: var(--nl-shadow-lg);
	transform: translateY(-3px);
}

.homedivs .entry-title {
	padding: 0 0 10px;
	margin: 0 0 12px;
	background: none;
	color: var(--nl-ink);
	font-size: 21px;
	white-space: normal;
	border-bottom: 3px solid var(--nl-blue);
}

.homedivs a.morelink,
.download,
.wpcf7-submit {
	padding: 11px 22px;
	color: #fff;
	background-color: var(--nl-blue);
	border: 0;
	border-radius: var(--nl-radius);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}

.homedivs a.morelink:hover,
.download:hover,
.wpcf7-submit:hover {
	background-color: var(--nl-blue-900) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.download { text-transform: none; }

/* ---------- Sidebar ---------- */

#secondary .widget-title {
	padding: 0 0 10px;
	margin-bottom: 14px;
	color: var(--nl-ink);
	background: none;
	font-size: 17px;
	border-bottom: 3px solid var(--nl-blue);
}

#secondary .widget {
	padding: 22px;
	margin-bottom: 22px;
	background: #fff;
	border: 1px solid var(--nl-line);
	border-radius: var(--nl-radius);
}

#secondary ul li { margin-bottom: 10px; }
#secondary a { color: var(--nl-body); font-weight: 500; }
#secondary a:hover,
#secondary ul .current_page_item a { color: var(--nl-blue); }

/* ---------- Contactformulier ---------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 11px 13px;
	margin-bottom: 4px;
	font-family: inherit;
	font-size: 15px;
	color: var(--nl-ink);
	background: #fff;
	border: 1px solid var(--nl-line);
	border-radius: var(--nl-radius);
	box-sizing: border-box;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--nl-blue);
	box-shadow: 0 0 0 3px var(--nl-blue-100);
	outline: none;
}

.wpcf7 label { font-weight: 600; color: var(--nl-ink); display: block; margin-bottom: 14px; }

/* ---------- Tabellen ---------- */

.entry-content table {
	border: 1px solid var(--nl-line);
	border-radius: var(--nl-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 15px;
	color: var(--nl-body);
}

.entry-content td { padding: 10px 14px; border-top: 1px solid var(--nl-line); }

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

footer {
	padding: 40px 0 30px;
	line-height: 1.9;
	color: #cfe8f3;
	border-top: 4px solid var(--nl-blue);
	border-bottom: 0;
	background: var(--nl-blue-900);
}

footer h3 {
	margin-bottom: 12px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

footer a { color: #cfe8f3; }
footer a:hover,
footer ul .current_page_item a { color: #fff; text-decoration: underline; }

footer ul li { margin-bottom: 4px; }

footer .fa {
	width: 26px;
	height: 26px;
	padding: 0;
	margin-right: 9px;
	line-height: 26px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	border-radius: 50%;
	background: var(--nl-blue);
	display: inline-block;
	vertical-align: middle;
}

.madeby { padding: 14px 0 20px; color: #8fa2b2; font-size: 12px; }
.madeby a { color: #8fa2b2; font-weight: 500; }
.madeby a:hover { color: var(--nl-blue-700); }

/* ================= HOMEPAGE ================= */

/* Hero */
.nl-hero {
	position: relative;
	min-height: 580px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--nl-blue-900);
}

.nl-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
	display: block;
}

/* Donkere gradient zodat witte tekst altijd leesbaar is,
   ongeacht welke foto erin staat. */
.nl-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0,64,92,.88) 0%, rgba(0,64,92,.72) 42%, rgba(0,64,92,.15) 78%, rgba(0,64,92,0) 100%);
}

.nl-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 24px;
	box-sizing: border-box;
}

.nl-hero__title {
	max-width: 15em;
	margin: 0 0 14px;
	color: #fff;
	font-size: 46px;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.nl-hero__sub {
	max-width: 34em;
	margin: 0 0 30px;
	color: #d3ecf7;
	font-size: 19px;
}

.nl-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
	.nl-hero { min-height: 420px; }
	.nl-hero__inner { padding: 44px 20px; }
	.nl-hero__title { font-size: 31px; }
	.nl-hero__sub { font-size: 17px; margin-bottom: 24px; }
	.nl-hero::after { background: linear-gradient(180deg, rgba(0,64,92,.72) 0%, rgba(0,64,92,.86) 100%); }
}

@media (max-width: 520px) {
	.nl-hero__actions { width: 100%; }
	.nl-hero__actions .nl-btn { flex: 1; text-align: center; }
}

.home section .breadcrumbs { display: none; }

/* Homepage: banden over de volle breedte met wisselende achtergrond.
   De inhoud van elke band zit in een gecentreerde container van 1200px. */
.home section {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.nl-home { max-width: none; margin: 0; padding: 0; }
.nl-home img { max-width: 100%; height: auto; display: block; }

/* Het oude thema zet op ELKE <section> een negatieve bovenmarge, een vaste
   onderpadding en een witte achtergrond — allemaal met !important. Onze
   banden zijn ook <section>-elementen, dus die regels moeten hier terug
   worden gedraaid, anders schuiven de banden over elkaar heen en verdwijnt
   de achtergrondkleur. */
.home .nl-band {
	margin: 0 !important;
	padding: 104px 0 !important;
}

.home .nl-band--wit  { background: #fff !important; }
.home .nl-band--tint { background: var(--nl-blue-50) !important; }
.home .nl-band--diep { background: var(--nl-blue-900) !important; }
.home .nl-band--cta  { background: var(--nl-blue) !important; padding: 72px 0 !important; }

.nl-band { padding: 104px 0; }
.nl-band--wit  { background: #fff; }
.nl-band--tint { background: var(--nl-blue-50); }
.nl-band--diep { background: var(--nl-blue-900); }
.nl-band--cta  { background: var(--nl-blue); padding: 62px 0; }

/* Twee opeenvolgende witte banden: dunne scheidingslijn ertussen */
.nl-band--wit + .nl-band--wit { border-top: 1px solid var(--nl-line); }

.nl-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.nl-band__foot { margin: 40px 0 0; text-align: center; }

/* ---------- Eén typografisch systeem voor alle banden ---------- */

/* Titels: overal exact dezelfde grootte, gewicht en letterafstand */
.nl-intro__title,
.nl-waarom__title,
.nl-kop__title,
.nl-cta h2 {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--nl-ink);
	text-wrap: balance;
}

/* Accentlijn: loopt door tot het einde van de kolom, strak onder de titel */
.nl-rule,
.nl-kop__rule {
	width: 100%;
	height: 3px;
	margin: 9px 0 11px;
	background: var(--nl-blue);
	border-radius: 2px;
	display: block;
}

.nl-kop__rule { margin-left: auto; margin-right: auto; }

/* Lopende tekst: overal dezelfde grootte, kleur en regelafstand */
.nl-intro__text p,
.nl-waarom__text > p,
.nl-kop__intro,
.nl-card__text,
.nl-project__text,
.nl-cta p {
	font-size: 17px;
	line-height: 1.52;
	color: var(--nl-body);
}

/* Tussenkoppen in kaarten: onderling gelijk */
.nl-card__title,
.nl-project__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nl-ink);
}

.nl-kop__intro { text-wrap: balance; }

/* Titelblok op de homepage: zelfde model als op de binnenpagina's */
.nl-home .nl-titelblok {
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--nl-blue);
}

.nl-home .nl-titelblok__title {
	margin: 0;
	color: var(--nl-blue-900);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.nl-home .nl-titelblok__sub {
	margin: 8px 0 0;
	color: var(--nl-blue);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

/* Gecentreerde variant boven een raster */
.nl-titelblok--midden { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }

/* Op donkerblauwe band */
.nl-kop--licht .nl-titelblok { border-bottom-color: #fff; }
.nl-kop--licht .nl-titelblok__title { color: #fff; }
.nl-kop--licht .nl-titelblok__sub { color: var(--nl-blue-100); }

/* Kop van een band */
.nl-kop { margin-bottom: 42px; text-align: center; }
.nl-kop__intro { max-width: 640px; margin: 0 auto; }

/* Kop zonder losse introtekst: raster mag dichter op de kop staan */
.nl-kop--strak { margin-bottom: 32px; }
.nl-kop--strak .nl-titelblok { margin-bottom: 0; }
.nl-home .nl-titelblok--strak { margin-bottom: 32px; }
.nl-titelblok--strak + .nl-checks { margin-top: 0; }

.nl-kop--licht .nl-kop__title { color: #fff; }
.nl-kop--licht .nl-kop__intro { color: #b7dcee; }
.nl-kop--licht .nl-kop__rule { background: #fff; }

.nl-rule {
	width: 100%;
	height: 3px;
	margin: 9px 0 11px;
	background: var(--nl-blue);
	border-radius: 2px;
	display: block;
}

/* Intro */
.nl-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.nl-intro__title {
	text-transform: uppercase;
}

.nl-intro__lead {
	margin: 5px 0 0;
	color: var(--nl-blue);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

/* Alinea's strak onder elkaar */
.nl-intro__text p,
.nl-waarom__text > p { margin: 0 0 12px; }
.nl-intro__text p:last-of-type { margin-bottom: 22px; }

.nl-intro__media img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	object-position: center center;
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow-lg);
}

/* Waarom-band: beeld links, tekst met vinkjes rechts */
.nl-waarom {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 64px;
	align-items: center;
}

.nl-waarom__media img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	object-position: center 55%;
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow-lg);
}

.nl-waarom__title { margin: 0; }
.nl-waarom__text > p { margin: 0; }

.nl-checks {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.nl-checks li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 0;
	padding: 0;
	color: var(--nl-ink);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.45;
}

.nl-check {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	line-height: 24px;
	text-align: center;
	font-size: 12px;
	color: #fff;
	background: var(--nl-blue);
	border-radius: 50%;
	display: block;
}

.nl-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}

.nl-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1000px) { .nl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .nl-grid, .nl-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .nl-grid, .nl-grid--3 { grid-template-columns: 1fr; } }

/* Dienstenkaarten: geen kader, beeld boven de tekst */
.nl-card {
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

.nl-card__media {
	display: block;
	height: 170px;
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: var(--nl-radius);
	background: #fff;
	box-shadow: var(--nl-shadow);
}

.nl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
	transition: transform .4s ease;
}

.nl-card:hover .nl-card__media img { transform: scale(1.06); }

.nl-card__icon {
	width: 100%;
	height: 100%;
	line-height: 170px;
	text-align: center;
	font-size: 40px;
	color: var(--nl-blue);
	background: #fff;
	border-radius: var(--nl-radius);
	display: block;
}

.nl-card__title { margin: 0 0 6px; font-size: 18px; }
.nl-card__text { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; flex: 1; }
.nl-card__text { margin: 0 0 14px; flex: 1; }

.nl-card__more {
	color: var(--nl-blue);
	font-size: 14px;
	font-weight: 700;
}

.nl-card__more::after { content: " \2192"; }
.nl-card:hover .nl-card__title { color: var(--nl-blue); }
.nl-card:hover .nl-card__more { color: var(--nl-blue-900); }

/* Opdrachtgevers-logo's */
.nl-logos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-logos li {
	margin: 0;
	padding: 20px 22px;
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--nl-line);
	border-radius: var(--nl-radius);
	box-sizing: border-box;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.nl-logos li:hover {
	border-color: var(--nl-blue);
	box-shadow: var(--nl-shadow);
}

.nl-logos img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

@media (max-width: 1000px) { .nl-logos { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 820px) {
	.nl-logos { grid-template-columns: repeat(3, 1fr); gap: 14px; }
	.nl-logos li { min-height: 84px; padding: 14px; }
	.nl-logos img { max-height: 44px; }
}

@media (max-width: 520px) { .nl-logos { grid-template-columns: repeat(2, 1fr); } }

/* Projecten (op donkerblauwe band) */
.nl-project {
	background: #fff;
	border-radius: var(--nl-radius);
	overflow: hidden;
	text-decoration: none;
	display: block;
	transition: box-shadow .2s ease, transform .2s ease;
}

.nl-project:hover { box-shadow: 0 18px 40px rgba(0,0,0,.28); transform: translateY(-4px); }

.nl-project__img { display: block; overflow: hidden; height: 190px; }
.nl-project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nl-project:hover .nl-project__img img { transform: scale(1.06); }

.nl-project__body { display: block; padding: 20px 24px 24px; }

.nl-project__title {
	margin: 0 0 6px;
}

.nl-project__text { margin: 0; }

/* Knoppen */
.nl-btn {
	padding: 13px 26px;
	color: #fff;
	background: var(--nl-blue);
	border-radius: var(--nl-radius);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	transition: background-color .15s ease, transform .1s ease;
}

.nl-btn:hover { background: var(--nl-blue-900); color: #fff; transform: translateY(-1px); }

.nl-btn--ghost {
	color: var(--nl-blue);
	background: transparent;
	border: 2px solid var(--nl-blue);
	padding: 11px 24px;
}

.nl-btn--ghost:hover { color: #fff; background: var(--nl-blue); }

.nl-btn--light { color: var(--nl-blue-900); background: #fff; }
.nl-btn--light:hover { color: var(--nl-blue-900); background: var(--nl-blue-100); }

.nl-btn--outline {
	color: #fff;
	background: transparent;
	border: 2px solid rgba(255,255,255,.65);
	padding: 11px 24px;
}

.nl-btn--outline:hover { color: var(--nl-blue-900); background: #fff; }

/* CTA */
.nl-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	justify-content: space-between;
}

.nl-cta h2 { margin: 0 0 8px; color: #fff; }
.nl-cta p { margin: 0; color: #daf0fa; }
.nl-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Homepage responsive */
@media (max-width: 900px) {
	.home section { padding: 0 !important; margin: 0 !important; }
	.home .nl-band { padding: 64px 0 !important; }
	.home .nl-band--cta { padding: 52px 0 !important; }
	.nl-band { padding: 64px 0; }
	.nl-band--cta { padding: 44px 0; }
	.nl-wrap { padding: 0 20px; }
	.nl-intro { grid-template-columns: 1fr; gap: 32px; }
	.nl-waarom { grid-template-columns: 1fr; gap: 32px; }
	.nl-waarom__media { order: 2; }
	.nl-kop { margin-bottom: 32px; }
	.nl-kop--strak { margin-bottom: 24px; }
	.nl-home .nl-titelblok--strak { margin-bottom: 24px; }
	.nl-home .nl-titelblok__title { font-size: 26px; }
	.nl-home .nl-titelblok__sub { font-size: 17px; }
	.nl-intro__title,
	.nl-waarom__title,
	.nl-kop__title,
	.nl-cta h2 { font-size: 27px; }
}

@media (max-width: 520px) {
	.nl-cta__actions { width: 100%; }
	.nl-cta__actions .nl-btn { flex: 1; text-align: center; }
}

/* ---------- Binnenpagina's: blauwe paginakop en volle breedte ---------- */

.nl-paginakop {
	background: var(--nl-blue-900);
	background-image: linear-gradient(105deg, var(--nl-blue-900) 0%, var(--nl-blue-700) 58%, var(--nl-blue) 100%);
	padding: 56px 0 48px;
}

.nl-paginakop__title {
	margin: 0;
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.nl-kruimels {
	margin-bottom: 16px;
	color: #a9d3e8;
	font-size: 14px;
}

.nl-kruimels a { color: #d3ecf7; text-decoration: none; }
.nl-kruimels a:hover { color: #fff; text-decoration: underline; }

/* Content over de volle breedte, tekst op leesbare regellengte.
   Alle afstanden zijn veelvouden van 8 pixels, zodat de pagina
   overal hetzelfde ritme houdt. */
.nl-pagina {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	overflow: visible !important;
	box-sizing: border-box;
}

.page section#main-content,
.blog section#main-content,
.single section#main-content,
.archive section#main-content,
.search section#main-content,
.error404 section#main-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 64px 0 88px !important;
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.nl-pagina .entry-content { max-width: none; }
.nl-pagina .entry-content > p,
.nl-pagina .entry-content > ul,
.nl-pagina .entry-content > ol,
.nl-pagina .entry-content > h2 { max-width: 860px; }

/* Tussenkop: blauwe lijn erboven markeert het begin van een onderdeel */
.nl-pagina .entry-content h2 {
	margin: 0 0 16px;
	padding-top: 24px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--nl-ink);
	border-top: 3px solid var(--nl-blue);
}

.nl-pagina .entry-content > h2 { margin-top: 72px; }

/* Titelblok: donkerblauwe kop met subtitel in RAL 5015 */
.nl-pagina .entry-content .nl-titelblok {
	max-width: 860px;
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--nl-blue);
}

/* Variant binnen een sectie: kleiner en over de kolombreedte */
.nl-pagina .entry-content .nl-titelblok--sectie { max-width: none; margin-bottom: 20px; }
.nl-pagina .entry-content .nl-titelblok--sectie .nl-titelblok__title { font-size: 24px; }
.nl-pagina .entry-content .nl-titelblok--sectie .nl-titelblok__sub { font-size: 17px; }
.nl-pagina .entry-content .nl-titelblok--breed { max-width: 860px; margin-top: 72px; }

.nl-pagina .entry-content .nl-titelblok__title {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	color: var(--nl-blue-900);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.nl-pagina .entry-content .nl-titelblok__sub {
	margin: 8px 0 0;
	color: var(--nl-blue);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

/* Introkop hoort bij de paginatitel en krijgt daarom geen lijn */
.nl-pagina .entry-content h2.nl-intro-kop {
	margin: 0 0 16px;
	padding-top: 0;
	font-size: 30px;
	border-top: 0;
}

.nl-pagina .entry-content p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 16px;
}

.nl-pagina .entry-content p:last-child { margin-bottom: 0; }

.nl-pagina .entry-content .nl-lead {
	margin: 0 0 72px;
	font-size: 19px;
	line-height: 1.55;
	color: var(--nl-ink);
}

/* Lead direct gevolgd door een vinkjeslijst: strakker op elkaar */
.nl-pagina .entry-content .nl-lead:has(+ .nl-checks--lead) { margin-bottom: 20px; }
.nl-pagina .entry-content .nl-checks--lead { margin-top: 0; gap: 10px; }

/* Certificaat of ander document: geheel tonen, niet bijsnijden */
.nl-sectie__beeld--document {
	display: flex;
	justify-content: center;
}

.nl-sectie__beeld--document img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--nl-line);
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow);
	box-sizing: border-box;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.nl-sectie__beeld--document a:hover img {
	border-color: var(--nl-blue);
	box-shadow: var(--nl-shadow-lg);
}

/* Menu op één rij, met de actieknop rechts uitgelijnd */
.header nav > ul,
.header nav ul.menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 2px;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header nav > ul > li,
.header nav ul.menu > li {
	float: none;
	margin: 0;
	white-space: nowrap;
}

/* Actieknop rechtsboven in de hoek, los van de menurij */
.header .row { position: relative; }

/* Ruimte reserveren voor de knop, zodat het menu naar links opschuift */
.header nav {
	padding-right: 158px;
	box-sizing: border-box;
}

/* Menu links uitlijnen: het begint direct na het logo */
.header nav > ul,
.header nav ul.menu { justify-content: flex-start; padding-right: 0; }

/* Compactere menu-items zodat alles op één regel past naast de knop */
.header nav > ul > li > a,
.header nav ul.menu > li > a {
	padding: 10px 14px;
	font-size: 16px;
}

.header nav ul li.nl-nav-actie {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	margin: 0 !important;
}

.header nav ul li.nl-nav-actie > a {
	color: #fff !important;
	background: var(--nl-blue);
	border-radius: 999px;
	padding: 12px 24px !important;
	font-size: 16px;
	font-weight: 700;
	display: block;
}

.header nav ul li.nl-nav-actie > a:hover,
.header nav ul li.nl-nav-actie.current_page_item > a {
	background: var(--nl-blue-900);
	color: #fff !important;
}

/* Tweede knop naast een primaire knop, op lichte achtergrond */
.nl-btn--outline-blauw {
	background: transparent;
	border: 2px solid var(--nl-blue);
	color: var(--nl-blue);
}

/* Niet afhankelijk van de .nl-pagina-wrapper: anders blijft de tekst wit */
a.nl-btn--outline-blauw,
a.nl-btn--outline-blauw:visited,
.nl-pagina .entry-content a.nl-btn--outline-blauw,
.nl-pagina .entry-content a.nl-btn--outline-blauw:visited {
	color: var(--nl-blue) !important;
}

a.nl-btn--outline-blauw:hover,
.nl-pagina .entry-content a.nl-btn--outline-blauw:hover {
	background: var(--nl-blue);
	color: #fff !important;
}

/* Knop binnen pagina-inhoud: het thema kleurt links donker en onderstreept
   ze, wat de tekst in een blauwe knop onleesbaar maakt. */
.nl-pagina .entry-content a.nl-btn,
.nl-pagina .entry-content a.nl-btn:visited {
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
}

.nl-pagina .entry-content a.nl-btn:hover,
.nl-pagina .entry-content a.nl-btn:focus {
	color: #fff !important;
	background: var(--nl-blue-700);
	text-decoration: none !important;
}

.nl-pagina .entry-content .nl-btn { margin-top: 8px; }

/* Outline-knop moet NA de algemene a.nl-btn-regel staan, anders wint #fff */
.nl-pagina .entry-content a.nl-btn.nl-btn--outline-blauw,
.nl-pagina .entry-content a.nl-btn.nl-btn--outline-blauw:visited {
	color: var(--nl-blue) !important;
	background: transparent;
}

.nl-pagina .entry-content a.nl-btn.nl-btn--outline-blauw:hover,
.nl-pagina .entry-content a.nl-btn.nl-btn--outline-blauw:focus {
	color: #fff !important;
	background: var(--nl-blue);
}

/* Contactpagina: gegevens naast de kaart */
.nl-pagina .entry-content .nl-contact {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 24px;
	align-items: stretch;
}

.nl-pagina .entry-content .nl-contact .nl-paneel { height: 100%; }

.nl-pagina .entry-content .nl-contact__kaart {
	min-height: 420px;
	overflow: hidden;
	border: 1px solid var(--nl-line);
	border-top: 3px solid var(--nl-blue);
	border-radius: var(--nl-radius);
}

.nl-pagina .entry-content .nl-contact__kaart iframe {
	width: 100%;
	height: 100%;
	min-height: 417px;
	border: 0;
	display: block;
}

.nl-gegevens {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.nl-gegevens li {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--nl-line);
	font-size: 16px;
	line-height: 1.5;
	color: var(--nl-ink);
}

.nl-gegevens li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.nl-gegevens__label {
	display: block;
	margin-bottom: 3px;
	color: var(--nl-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nl-gegevens a { color: var(--nl-ink); text-decoration: none; font-weight: 600; }
.nl-gegevens a:hover { color: var(--nl-blue); text-decoration: underline; }

@media (max-width: 900px) {
	.nl-pagina .entry-content .nl-contact { grid-template-columns: 1fr; gap: 16px; }
	.nl-pagina .entry-content .nl-contact__kaart { min-height: 300px; }
	.nl-pagina .entry-content .nl-contact__kaart iframe { min-height: 297px; }
}

/* Panelen: gelijkwaardige tekstblokken naast elkaar, voor pagina's
   waar (nog) geen projectfoto's bij horen. */
.nl-pagina .entry-content .nl-panelen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
}

.nl-pagina .entry-content .nl-paneel {
	padding: 28px 26px 26px;
	background: var(--nl-blue-50);
	border: 1px solid var(--nl-line);
	border-top: 3px solid var(--nl-blue);
	border-radius: var(--nl-radius);
	box-sizing: border-box;
}

.nl-pagina .entry-content .nl-paneel .nl-titelblok {
	max-width: none;
	margin: 0 0 16px;
	padding-bottom: 12px;
}

.nl-pagina .entry-content .nl-paneel .nl-titelblok__title { font-size: 20px; }
.nl-pagina .entry-content .nl-paneel .nl-titelblok__sub { font-size: 16px; margin-top: 6px; }
.nl-pagina .entry-content .nl-paneel p { font-size: 16px; margin: 0 0 12px; }
.nl-pagina .entry-content .nl-paneel p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.nl-pagina .entry-content .nl-panelen { grid-template-columns: 1fr; gap: 16px; }
}

/* Afwisselende blokken tekst / beeld */
.nl-sectie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	margin: 0 0 72px;
}

.nl-sectie--omgekeerd .nl-sectie__beeld { order: -1; }

.nl-sectie__beeld img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center 55%;
	display: block;
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow-lg);
}

.nl-sectie__tekst h2 { margin-top: 0 !important; }

@media (max-width: 900px) {
	.nl-paginakop { padding: 40px 0 32px; }
	.nl-paginakop__title { font-size: 28px; }
	.page section#main-content,
	.single section#main-content { padding: 40px 0 56px !important; }
	.nl-pagina .entry-content h2 { font-size: 22px; padding-top: 20px; margin-bottom: 12px; }
	.nl-pagina .entry-content > h2 { margin-top: 48px; }
	.nl-pagina .entry-content h2.nl-intro-kop { font-size: 24px; }
	.nl-pagina .entry-content .nl-titelblok__title { font-size: 26px; }
	.nl-pagina .entry-content .nl-titelblok__sub { font-size: 17px; }
	.nl-pagina .entry-content .nl-titelblok--sectie .nl-titelblok__title { font-size: 21px; }
	.nl-pagina .entry-content .nl-titelblok--sectie .nl-titelblok__sub { font-size: 16px; }
	.nl-pagina .entry-content .nl-titelblok--breed { margin-top: 48px; }
	.nl-pagina .entry-content .nl-lead { font-size: 18px; margin-bottom: 48px; }
	.nl-sectie { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
	.nl-sectie--omgekeerd .nl-sectie__beeld { order: 0; }
	.nl-sectie__beeld img { height: 260px; }
}

/* ---------- Fotogalerij op werkzaamheden-pagina's ---------- */

.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin: 24px 0 0;
}

.entry-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.entry-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }

.entry-content .gallery br { display: none; }

.entry-content .gallery .gallery-item {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.entry-content .gallery .gallery-icon {
	margin: 0;
	border-radius: var(--nl-radius);
	overflow: hidden;
	background: var(--nl-blue-50);
}

.entry-content .gallery .gallery-icon a {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.entry-content .gallery img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border: 0 !important;
	border-radius: 0;
	display: block;
	transition: transform .35s ease;
}

.entry-content .gallery .gallery-icon a:hover img { transform: scale(1.06); }

@media (max-width: 900px) { .entry-content .gallery, .entry-content .gallery-columns-4, .entry-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } }
@media (max-width: 520px) { .entry-content .gallery, .entry-content .gallery-columns-4, .entry-content .gallery-columns-3 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Toegankelijkheid: grotere aanraakvlakken op mobiel ---------- */
@media (max-width: 800px) {
	.header nav ul li a { padding: 13px 14px; }
	footer ul li a { display: inline-block; padding: 4px 0; }
	.entry-header .entry-title { font-size: 25px; }
	section { margin-top: -20px !important; margin-bottom: 40px !important; }
}

/* ---------- Certificaatbalk onder de hero ----------
   Smalle band die direct laat zien waarvoor wij gecertificeerd zijn.
   Geen logo's: de namen zijn voor opdrachtgevers herkenbaar genoeg
   en blijven in elke schermbreedte leesbaar. */

/* Diepblauw uit de huisstijl, dezelfde tint als de paginakoppen,
   zodat de balk bij het logo hoort en niet als zwarte strook opvalt. */
.nl-band--certs {
	background: var(--nl-blue-900);
	padding: 18px 0;
}

/* Het oude thema zet op elke <section> een witte achtergrond met
   !important. Zonder deze tegenregel wordt de balk wit en staat de
   witte tekst onzichtbaar op wit — een lege strook dus. */
.home .nl-band--certs {
	background: var(--nl-blue-900) !important;
	padding: 22px 0 !important;
}

/* Op het lichtere blauw mag de bijtekst wat steviger, anders zakt het
   contrast onder de leesbaarheidsgrens. */
.nl-band--certs .nl-certs__kop { opacity: .8; }
.nl-band--certs .nl-certs__uitleg { opacity: .82; }

/* ---------- Mobiel menu ----------
   Het oude thema regelde dit door de klassenaam van de menu-div te
   vervangen door "nav-menu". Dat is broos en liet de lijst eronder
   verborgen. De knop zet nu een eigen klasse op de nav en deze regels
   bepalen wat er opengaat. */

@media (max-width: 800px) {
	.main-navigation .menu-primary-container { display: none; }

	.main-navigation.nl-menu-open .menu-primary-container {
		display: block;
		width: 100%;
		clear: both;
		padding-top: 8px;
	}

	.main-navigation.nl-menu-open .nav-menu {
		display: block !important;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.main-navigation.nl-menu-open .nav-menu li {
		display: block;
		width: 100%;
		float: none;
	}

	.main-navigation.nl-menu-open .nav-menu li a {
		display: block;
		border-bottom: 1px solid var(--nl-line);
	}

	/* ---------- Uitklapbare subkoppen ----------
	   Eerder stonden alle submenu's altijd open; dat maakte van het
	   menu een lange sliert. Nu klapt een kop pas uit als je erop
	   tikt. Koppen zonder subpagina's blijven een gewone regel. */

	.main-navigation .nav-menu .sub-menu {
		display: none !important;
		margin: 0;
		padding: 0 0 8px 18px;
		border-left: 2px solid var(--nl-blue-100);
	}

	.main-navigation .nav-menu .menu-item-has-children.nl-open > .sub-menu {
		display: block !important;
	}

	.main-navigation .nav-menu > li > a {
		padding: 15px 2px;
		font-weight: 700;
		color: var(--nl-blue-900);
	}

	.main-navigation .nav-menu .sub-menu a {
		padding: 13px 2px;
		font-weight: 400;
		color: var(--nl-body);
	}

	/* Het pijltje verschijnt alleen bij een kop met subpagina's. */
	.main-navigation .nav-menu .menu-item-has-children > a {
		position: relative;
		padding-right: 42px;
	}

	.main-navigation .nav-menu .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: 14px;
		top: 50%;
		width: 9px;
		height: 9px;
		margin-top: -7px;
		border-right: 2px solid var(--nl-blue);
		border-bottom: 2px solid var(--nl-blue);
		transform: rotate(45deg);
		transition: transform .18s ease, margin-top .18s ease;
	}

	.main-navigation .nav-menu .menu-item-has-children.nl-open > a::after {
		transform: rotate(-135deg);
		margin-top: -2px;
	}

	/* "Werken bij" is op het bureaublad een knop. Die vorm hield hij
	   ook op de telefoon vast, waardoor hij buiten het scherm viel en
	   over de submenu's heen schoof. Hier een volle regel onderaan. */
	/* Elk hoofditem krijgt exact dezelfde uitlijning en hoogte. Dat
	   geldt ook voor "Werken bij": dat is op het bureaublad een knop
	   die absoluut wordt geplaatst, met een eigen marge en een eigen
	   binnenruimte. Door alle items in één regel gelijk te zetten,
	   kan er geen enkele meer uit de pas lopen. */
	.main-navigation .nav-menu > li,
	.main-navigation .nav-menu > li.nl-nav-actie {
		position: static !important;
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		list-style: none;
	}

	.main-navigation .nav-menu > li > a,
	.main-navigation .nav-menu > li.nl-nav-actie > a {
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 15px 2px !important;
		background: transparent !important;
		color: var(--nl-blue-900) !important;
		font-size: 17px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
		text-align: left !important;
		border: 0 !important;
		border-bottom: 1px solid var(--nl-line) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		box-sizing: border-box;
	}

	/* Ruimte vrijhouden voor het pijltje, anders loopt de tekst eronder. */
	.main-navigation .nav-menu > li.menu-item-has-children > a {
		padding-right: 42px !important;
	}
}

.nl-certs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 36px;
}

.nl-certs__kop {
	margin: 0;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	opacity: .65;
}

.nl-certs__lijst {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-certs__lijst li {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.nl-certs__naam {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.nl-certs__uitleg {
	color: #fff;
	font-size: 12.5px;
	opacity: .6;
}

a.nl-certs__link,
a.nl-certs__link:visited {
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	padding-bottom: 1px;
	white-space: nowrap;
}

a.nl-certs__link:hover { border-bottom-color: #fff; }

@media (max-width: 800px) {
	.nl-certs { gap: 12px 20px; }
	.nl-certs__lijst { gap: 10px 20px; }
	.nl-certs__kop { flex: 1 1 100%; }
}

/* ---------- Projectlijst onder de logowand ----------
   De projectberichten hebben geen beeld, dus kaarten houden een lege
   bovenkant over en ogen schraal. Een rustige lijst met scheidingslijnen
   leest als een referentielijst en heeft geen beeld nodig. */

.nl-projecten__kop {
	margin: 52px 0 0;
	padding-top: 34px;
	border-top: 1px solid var(--nl-line);
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var(--nl-ink);
}

.nl-projecten {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 56px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.nl-project a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 4px;
	border-bottom: 1px solid var(--nl-line);
	text-decoration: none;
	transition: padding-left .18s ease;
}

.nl-project a:hover { padding-left: 10px; }

.nl-project__pin {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	fill: var(--nl-blue);
	opacity: .7;
	transition: opacity .18s ease;
}

.nl-project a:hover .nl-project__pin { opacity: 1; }

.nl-project__tekst { display: block; }

.nl-project__plaats {
	display: block;
	color: var(--nl-ink);
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.35;
	transition: color .18s ease;
}

.nl-project a:hover .nl-project__plaats { color: var(--nl-blue); }

.nl-project__werk {
	display: block;
	margin-top: 1px;
	color: var(--nl-body);
	font-size: 14.5px;
	line-height: 1.45;
}

.nl-meer {
	margin: 30px 0 0;
	text-align: center;
}

@media (max-width: 700px) {
	.nl-projecten { grid-template-columns: 1fr; gap: 0; }
	.nl-projecten__kop { margin-top: 38px; padding-top: 26px; }
}

/* ---------- Werken bij-band ----------
   Zelfde opzet als de waarom-band, maar beeld rechts. */

.nl-werken {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 64px;
	align-items: center;
}

.nl-werken__media img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	object-position: center 35%;
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow-lg);
}

.nl-werken__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.nl-checks--kort { margin-top: 18px; }

@media (max-width: 900px) {
	.nl-werken { grid-template-columns: 1fr; gap: 32px; }
	.nl-werken__media { order: 2; }
}

/* ---------- Mobiel: vloeiende breedte ----------
   Het oude thema zet .row op een vaste breedte: 300 pixels op de
   telefoon en 456 pixels op een iets breder scherm. Op een toestel van
   390 of 430 pixels blijft daardoor een smalle kolom over met brede
   lege randen ernaast, en lopen de banden niet door tot de schermrand.
   Hier wordt de container vloeiend, zodat de telefoon dezelfde opbouw
   krijgt als het bureaublad, alleen smaller. */

@media only screen and (max-width: 959px) {
	.row {
		width: auto !important;
		max-width: 1200px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* De banden regelen hun eigen binnenmarge via .nl-wrap; alleen de
	   overige rijen (header, footer, colofon) hebben er zelf een nodig. */
	.row:not(#main-content) {
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}

	/* De oude kolommen hebben vaste pixelbreedtes die bij de 300px-rij
	   hoorden. Onder elkaar en op volle breedte is hier het juiste. */
	.row > [class*="grid_"] {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		box-sizing: border-box;
	}

	/* Niets mag breder zijn dan het scherm. */
	img,
	iframe,
	table { max-width: 100%; }
	img { height: auto; }
}

/* ---------- Mobiel: de nieuwe onderdelen ---------- */

@media (max-width: 620px) {
	/* Certificaatbalk: twee naast twee leest rustiger dan vier op een rij */
	.nl-certs__lijst {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px 18px;
	}

	.nl-certs__link { margin-top: 4px; }

	/* Projectgegevens onder elkaar in plaats van naast elkaar */
	.nl-project-pagina .entry-content p:has(strong) {
		display: block;
		margin-right: 0;
	}

	.nl-ref__link { padding: 22px 20px; }
	.nl-ref__werk { font-size: 18.5px; }

	/* Knoppen over de volle breedte: groter raakvlak, nettere uitlijning */
	.nl-werken__acties,
	.nl-hero__actions { width: 100%; }

	.nl-werken__acties .nl-btn,
	.nl-hero__actions .nl-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.nl-terug .nl-btn { display: block; text-align: center; }
}

/* ---------- Projectpagina ----------
   De werkzaamheden staan in de tekst als opsomming en de kerngegevens
   als vetgedrukte regels. Die gegevens krijgen hier een eigen vorm,
   zodat een opdrachtgever omvang en looptijd meteen ziet. */

.nl-project-pagina .entry-content ol,
.nl-project-pagina .entry-content ul {
	max-width: 860px;
	margin: 0 0 26px;
	padding-left: 22px;
	list-style: disc;
}

.nl-project-pagina .entry-content li {
	margin: 0 0 8px;
	line-height: 1.6;
	color: var(--nl-body);
}

.nl-project-pagina .entry-content li::marker { color: var(--nl-blue); }

/* Regels als "Projectkosten: +- EUR 1.200.000" en "Tijdsduur: ...".
   Browsers zonder :has() tonen ze gewoon als alinea. */
.nl-project-pagina .entry-content p:has(strong) {
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 11px 18px;
	background: var(--nl-blue-50);
	border-left: 3px solid var(--nl-blue);
	border-radius: 0 var(--nl-radius) var(--nl-radius) 0;
	font-size: 15px;
	color: var(--nl-body);
}

.nl-project-pagina .entry-content p:has(strong) strong {
	color: var(--nl-ink);
	margin-right: 4px;
}

.nl-terug {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--nl-line);
}

/* ---------- Referentiepagina ----------
   De berichtenpagina had een zijbalk met zoekvak en een smalle
   kolom. Hier staan de projecten over de volle breedte als kaarten,
   met de plaatsnaam als bovenregel: een opdrachtgever zoekt eerst
   of wij in zijn gemeente werkten. */

.nl-referenties__inleiding {
	max-width: 780px;
	margin: 0 0 40px;
}

.nl-referenties__inleiding p {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--nl-body);
}

.nl-ref-lijst {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-ref-lijst > li::before { content: none; }

.nl-ref__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Zonder border-box telt height:100% alleen de inhoud, en komen de
	   randen en de 26px padding daar bovenop: 56px te hoog. Het blok liep
	   dan over zijn eigen kader heen en de kop van het volgende project
	   sneed door "Bekijk project". Het contactpaneel heeft deze regel al. */
	box-sizing: border-box;
	padding: 26px 28px;
	background: #fff;
	border: 1px solid var(--nl-line);
	border-top: 3px solid var(--nl-blue);
	border-radius: var(--nl-radius);
	text-decoration: none;
	box-shadow: var(--nl-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

.nl-ref__link:hover,
.nl-ref__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--nl-shadow-lg);
}

.nl-ref__plaats {
	display: block;
	color: var(--nl-blue);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
}

.nl-ref__werk {
	display: block;
	margin-top: 7px;
	color: var(--nl-ink);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
}

.nl-ref__tekst {
	display: block;
	flex: 1 1 auto;
	margin-top: 12px;
	color: var(--nl-body);
	font-size: 15px;
	line-height: 1.6;
}

.nl-ref__meer {
	display: inline-block;
	margin-top: 20px;
	color: var(--nl-blue);
	font-weight: 600;
	font-size: 14.5px;
}

.nl-ref__link:hover .nl-ref__meer { text-decoration: underline; }

@media (max-width: 800px) {
	.nl-ref-lijst { grid-template-columns: 1fr; }
	.nl-referenties__inleiding { margin-bottom: 30px; }
}

/* ---------- Alleen voor schermlezers ----------
   WordPress levert deze klasse zelf aan, maar niet op elke pagina.
   Hier vastgelegd zodat verborgen labels nooit zichtbaar worden. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Skip-link ---------- */

.nl-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--nl-blue);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--nl-radius) 0;
}

.nl-skip:focus {
	left: 0;
	color: #fff;
}

/* ---------- Hamburgerknop ----------
   Was een <img>; nu een echte knop, zodat toetsenbord en schermlezer
   hem kunnen bedienen. De drie balkjes worden in CSS getekend. */

.menu-toggle {
	width: 48px !important;
	height: 48px;
	padding: 12px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	background: transparent;
	border: 0;
	border-radius: var(--nl-radius);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.menu-toggle__balk {
	display: block;
	height: 3px;
	width: 100%;
	background: var(--nl-blue);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle:hover .menu-toggle__balk { background: var(--nl-blue-dark); }

.menu-toggle.toggled-on .menu-toggle__balk:nth-child(2) {
	transform: translateY(9px) rotate(45deg);
}

.menu-toggle.toggled-on .menu-toggle__balk:nth-child(3) {
	opacity: 0;
}

.menu-toggle.toggled-on .menu-toggle__balk:nth-child(4) {
	transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 800px) {
	.menu-toggle { display: flex !important; }
}