/*
 * Mechaia Engine.
 *
 * Er staat geen kleur in dit bestand. Alle kleuren, letters en maten komen als CSS-variabelen uit
 * MEC_Merk::css_variabelen() en worden in de kop van de pagina meegegeven. Een kleurwijziging is
 * dus een wijziging in PHP en niet hier.
 */

/* ------------------------------------------------------------------ basis
 *
 * De basisregels staan met opzet in :where(). Dat zorgt ervoor dat ze geen enkel gewicht
 * meebrengen, zodat elke klasse hieronder ze zonder moeite overschrijft.
 *
 * Dit ging eerder mis: de basisregels stonden als `body.mec h1`, en dat weegt zwaarder dan
 * `.mec-hero__kop`. Daardoor kreeg de kop op de hero de donkerblauwe kleur van de basisregel in
 * plaats van wit, en werden de voetlinks blauw op een blauw vlak. Een stijlblad hoort zijn eigen
 * onderdelen niet te overstemmen.
 */

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

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

:where(body.mec) {
	margin: 0;
	font-family: var(--mec-tekst-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--mec-tekst);
	background: var(--mec-wit);
	-webkit-font-smoothing: antialiased;
}

/* body zelf wel hard zetten, anders wint de themastijl van WordPress op een gelijkspel */
body.mec {
	margin: 0;
	font-family: var(--mec-tekst-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: normal;
	color: var(--mec-tekst);
	background: var(--mec-wit);
}

:where(body.mec) img { max-width: 100%; height: auto; }

:where(body.mec) h1,
:where(body.mec) h2,
:where(body.mec) h3,
:where(body.mec) h4,
:where(body.mec) h5,
:where(body.mec) h6 {
	font-family: var(--mec-kop-font);
	color: var(--mec-marine);
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -.01em;
}

:where(body.mec) p { margin: 0 0 1em; }
:where(body.mec) p:last-child { margin-bottom: 0; }

:where(body.mec) a { color: var(--mec-marine); text-decoration-color: rgba(26, 54, 93, .35); text-underline-offset: 3px; }
:where(body.mec) a:hover { color: var(--mec-oranje-diep); text-decoration-color: currentColor; }

body.mec :focus-visible {
	outline: 3px solid var(--mec-oranje);
	outline-offset: 2px;
	border-radius: 4px;
}

.mec-overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--mec-marine);
	color: var(--mec-wit);
	padding: 12px 20px;
	z-index: 200;
	border-radius: 0 0 var(--mec-radius) 0;
}
.mec-overslaan:focus { left: 0; color: var(--mec-wit); }

.mec-omhulsel {
	width: 100%;
	max-width: var(--mec-breedte);
	margin: 0 auto;
	padding: 0 24px;
}
.mec-omhulsel--smal { max-width: 820px; }

/* ------------------------------------------------------------------ knoppen */

.mec-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: var(--mec-radius);
	font-family: var(--mec-kop-font);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
	white-space: nowrap;
}
.mec-knop:hover { transform: translateY(-1px); }
.mec-knop svg { width: 19px; height: 19px; flex: none; }

.mec-knop--oranje { background: var(--mec-oranje); color: var(--mec-wit); }
.mec-knop--oranje:hover { background: var(--mec-oranje-hover); color: var(--mec-wit); }

/*
 * WhatsApp schrijft wit op hun groen voor. Het teken en de tekst zijn daarom wit en niet het
 * donkergroen dat hier eerst stond; daardoor leek het merkteken zwart.
 */
.mec-knop--groen { background: var(--mec-groen); color: var(--mec-wit); }
.mec-knop--groen:hover,
.mec-knop--groen:focus-visible { background: var(--mec-groen-diep); color: var(--mec-wit); }

.mec-knop--lijn {
	background: transparent;
	color: var(--mec-wit);
	border-color: rgba(255, 255, 255, .4);
}
.mec-knop--lijn:hover { background: rgba(255, 255, 255, .12); color: var(--mec-wit); border-color: rgba(255, 255, 255, .7); }

.mec-knop--groot { padding: 16px 26px; font-size: 16px; }

/* ------------------------------------------------------------------ header */

.mec-kop {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--mec-marine);
	transition: box-shadow .2s ease;
}
.mec-kop.is-gescrold { box-shadow: 0 6px 24px rgba(8, 20, 38, .3); }

/* de werkbalk van WordPress staat vast bovenaan; daar moet de kop onderlangs */
body.admin-bar .mec-kop { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .mec-kop { top: 46px; }
}

.mec-kop__binnen {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 98px;
}

.mec-logo { flex: none; display: block; line-height: 0; }

/* hoogte hard vastzetten: zonder dat pakt het logo zijn eigen 170px en duwt het de balk uit elkaar */
.mec-logo img {
	height: 64px;
	width: auto;
	max-height: 64px;
	display: block;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
@media (min-width: 1001px) {
	.mec-logo img { height: 82px; max-height: 82px; }
}

/* terugval zolang het logobestand er niet is */
.mec-logo--tekst { text-decoration: none; }
.mec-woordmerk { display: block; line-height: 1.1; }
.mec-woordmerk strong {
	display: block;
	font-family: var(--mec-kop-font);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mec-wit);
}
.mec-woordmerk em {
	display: block;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}
.mec-woordmerk--voet { margin-bottom: 18px; }
.mec-woordmerk--voet strong { font-size: 24px; }

.mec-nav { margin-left: auto; }
.mec-nav__lijst { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mec-nav__item { position: relative; }

.mec-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	color: rgba(255, 255, 255, .88);
	font-family: var(--mec-kop-font);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	border-radius: 9px;
	transition: background-color .15s ease, color .15s ease;
}
.mec-nav__link:hover,
.mec-nav__link.is-actief { background: rgba(255, 255, 255, .12); color: var(--mec-wit); }
.mec-nav__link .mec-pijl { width: 15px; height: 15px; transition: transform .18s ease; }
.mec-nav__item--uitklap:hover .mec-pijl { transform: rotate(180deg); }

.mec-kop__acties { display: flex; align-items: center; gap: 10px; flex: none; }
.mec-kop__bellen { font-size: 15px; }

/* uitklap */

.mec-uitklap {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	padding-top: 14px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mec-nav__item--uitklap:hover .mec-uitklap,
.mec-nav__item--uitklap:focus-within .mec-uitklap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.mec-uitklap__binnen {
	display: flex;
	gap: 28px;
	background: var(--mec-wit);
	border-radius: var(--mec-radius-groot);
	box-shadow: 0 22px 60px rgba(11, 26, 46, .28);
	padding: 26px;
	min-width: 620px;
}

.mec-uitklap__hub {
	flex: none;
	width: 220px;
	display: block;
	padding: 20px;
	border-radius: var(--mec-radius);
	background: var(--mec-vlak);
	text-decoration: none;
	transition: background-color .15s ease;
}
.mec-uitklap__hub:hover { background: #eef1f5; }
.mec-uitklap__hub strong {
	display: block;
	font-family: var(--mec-kop-font);
	font-size: 16px;
	color: var(--mec-marine);
	margin-bottom: 8px;
	line-height: 1.3;
}
.mec-uitklap__hub span { display: block; font-size: 13.5px; color: var(--mec-tekst-zacht); line-height: 1.5; }
.mec-uitklap__hub em {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--mec-oranje-diep);
}

.mec-uitklap__kolommen { display: flex; gap: 30px; }
.mec-uitklap__kolom { min-width: 190px; }

/* twaalf diensten onder elkaar werden hoger dan het scherm, dus in twee kolommen */
.mec-uitklap__kolom--dubbel { min-width: 600px; }
.mec-uitklap__kolom--dubbel ul { column-count: 2; column-gap: 26px; }
.mec-uitklap__kolom--dubbel li { break-inside: avoid; }
.mec-uitklap__kolom--dubbel li:first-child { margin-top: 0; }

/*
 * De brede uitklap past gecentreerd niet meer op een smal bureaublad: de linkerrand valt dan
 * buiten beeld. Hij hangt daarom aan de linkerkant van de menuregel en loopt naar rechts uit,
 * waar de ruimte zit.
 */
.mec-nav__item--breed .mec-uitklap { left: 0; transform: translate(0, 8px); }
.mec-nav__item--breed:hover .mec-uitklap,
.mec-nav__item--breed:focus-within .mec-uitklap { transform: translate(0, 0); }
.mec-uitklap__kopje {
	font-family: var(--mec-kop-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mec-tekst-zacht);
	margin: 0 0 10px;
}
.mec-uitklap__kolom ul { list-style: none; margin: 0; padding: 0; }
.mec-uitklap__kolom li + li { margin-top: 2px; }
.mec-uitklap__kolom a {
	display: block;
	padding: 6px 10px;
	margin-left: -10px;
	border-radius: 8px;
	font-size: 14.5px;
	color: var(--mec-tekst);
	text-decoration: none;
	transition: background-color .13s ease, color .13s ease;
}
.mec-uitklap__kolom a:hover,
.mec-uitklap__kolom a.is-actief { background: var(--mec-vlak); color: var(--mec-marine); }

.mec-hamburger { display: none; }

/* ------------------------------------------------------------------ mobiel menu en balk */

.mec-mobielmenu {
	position: fixed;
	inset: 0;
	z-index: 150;
	background: var(--mec-marine);
	overflow-y: auto;
	padding: 20px 24px 120px;
	color: var(--mec-wit);
}
.mec-mobielmenu__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--mec-kop-font);
	font-weight: 600;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	margin-bottom: 18px;
}
.mec-mobielmenu__sluit {
	background: none;
	border: 0;
	color: var(--mec-wit);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
}
/* de drie uitklapbare groepen: Over ons, Diensten, Werkgebied */

.mec-mobielmenu__groep { border-bottom: 1px solid rgba(255, 255, 255, .14); }

.mec-mobielmenu__knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 2px;
	cursor: pointer;
	font-family: var(--mec-kop-font);
	font-weight: 600;
	font-size: 19px;
	color: var(--mec-wit);
	list-style: none;
}
.mec-mobielmenu__knop::-webkit-details-marker { display: none; }
.mec-mobielmenu__knop svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--mec-oranje);
	transition: transform .2s ease;
}
.mec-mobielmenu__groep[open] .mec-mobielmenu__knop svg { transform: rotate(180deg); }

.mec-mobielmenu__paneel { padding: 0 0 16px; }

.mec-mobielmenu__hub {
	display: inline-block;
	margin-bottom: 14px;
	padding: 9px 16px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .12);
	font-family: var(--mec-kop-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mec-wit);
	text-decoration: none;
	border-bottom: 0;
}
.mec-mobielmenu__hub:hover { background: rgba(255, 255, 255, .2); color: var(--mec-wit); }

.mec-mobielmenu__kopje {
	margin: 16px 0 4px;
	font-family: var(--mec-kop-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}
.mec-mobielmenu__paneel > .mec-mobielmenu__kopje:first-child { margin-top: 0; }

.mec-mobielmenu__nav ul { list-style: none; margin: 0; padding: 0; }
.mec-mobielmenu__nav li a {
	display: block;
	padding: 11px 0;
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	font-size: 16.5px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mec-mobielmenu__nav li:last-child a { border-bottom: 0; }
.mec-mobielmenu__nav li a:hover { color: var(--mec-wit); }
.mec-mobielmenu__nav a.is-actief { color: var(--mec-oranje); font-weight: 600; }

.mec-mobielbalk { display: none; }

/* ------------------------------------------------------------------ zwevende WhatsApp-knop */

.mec-zweef {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 110;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 58px;
	padding: 0 12px;
	border-radius: 100px;
	background: var(--mec-groen);
	color: var(--mec-wit);
	text-decoration: none;
	font-family: var(--mec-kop-font);
	font-weight: 600;
	font-size: 15px;
	box-shadow: 0 10px 30px rgba(6, 56, 26, .34);
	transition: gap .22s ease, padding .22s ease, transform .18s ease, box-shadow .18s ease;
}
.mec-zweef:hover,
.mec-zweef:focus-visible {
	color: var(--mec-wit);
	gap: 11px;
	padding: 0 24px 0 12px;
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(6, 56, 26, .42);
}
.mec-zweef__icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
}
.mec-zweef__icoon svg { width: 30px; height: 30px; }

/* de tekst schuift pas open bij aanwijzen, zodat de knop klein blijft */
.mec-zweef__tekst {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width .22s ease, opacity .18s ease;
}
.mec-zweef:hover .mec-zweef__tekst,
.mec-zweef:focus-visible .mec-zweef__tekst { max-width: 160px; opacity: 1; }

body.admin-bar .mec-zweef { bottom: 22px; }

/* ------------------------------------------------------------------ hero */

.mec-hero {
	position: relative;
	background: var(--mec-marine-diep);
	color: var(--mec-wit);
	overflow: hidden;
	isolation: isolate;
}
.mec-hero__foto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: -2;
}
.mec-hero__waas {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(10, 24, 43, .93) 0%, rgba(18, 40, 69, .84) 55%, rgba(26, 54, 93, .78) 100%);
	z-index: -1;
}
.mec-hero__binnen { padding: 96px 24px 88px; max-width: 900px; margin: 0 auto; text-align: center; }
.mec-hero--klein .mec-hero__binnen { padding: 62px 24px 56px; }

/*
 * De variant met de foto ernaast. De reparatiefoto's zijn staand, 1500 bij 2000, en laten als
 * brede achtergrond onder een donkere laag vrijwel niets zien. Naast de tekst staan ze op hun
 * eigen verhouding en zie je waar het over gaat.
 */
.mec-hero--naast .mec-hero__binnen {
	max-width: var(--mec-breedte);
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
	text-align: left;
	padding: 66px 24px 62px;
}
.mec-hero--naast.mec-hero--klein .mec-hero__binnen {
	grid-template-columns: 1.2fr .8fr;
	gap: 48px;
	padding: 48px 24px 46px;
}
.mec-hero--naast .mec-hero__kop,
.mec-hero--naast .mec-hero__tekst { margin-left: 0; margin-right: 0; }
.mec-hero--naast .mec-hero__knoppen,
.mec-hero--naast .mec-hero__punten { justify-content: flex-start; }
.mec-hero--naast .mec-kruimels ol { justify-content: flex-start; }
.mec-hero--naast .mec-hero__punten { flex-direction: column; align-items: flex-start; gap: 10px; }

.mec-hero__beeld { margin: 0; }
.mec-hero__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--mec-radius-groot);
	box-shadow: 0 26px 60px rgba(6, 16, 32, .5);
}
.mec-hero--klein .mec-hero__beeld img { aspect-ratio: 1 / 1; }
.mec-hero__beeld figcaption {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
}

.mec-hero__kop {
	color: var(--mec-wit);
	font-size: clamp(30px, 4.6vw, 52px);
	line-height: 1.13;
	margin: 0 0 20px;
	text-wrap: balance;
}
.mec-hero--klein .mec-hero__kop { font-size: clamp(27px, 3.5vw, 40px); }

.mec-hero__tekst {
	font-size: 18.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
	max-width: 660px;
	margin: 0 auto 30px;
	text-wrap: pretty;
}

.mec-hero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.mec-hero__punten {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	justify-content: center;
}
.mec-hero__punten li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	color: rgba(255, 255, 255, .92);
}
.mec-hero__punten svg { width: 18px; height: 18px; color: var(--mec-oranje); flex: none; }

/* kruimelpad */

.mec-kruimels { margin-bottom: 22px; }
.mec-kruimels ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	font-size: 13.5px;
}
.mec-kruimels li + li::before { content: "/"; margin-right: 6px; color: rgba(255, 255, 255, .38); }
.mec-kruimels a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.mec-kruimels a:hover { color: var(--mec-wit); text-decoration: underline; }
.mec-kruimels span { color: rgba(255, 255, 255, .95); }

/* ------------------------------------------------------------------ vlakken en tekst */

.mec-vlak { padding: 74px 0; }
.mec-vlak--grijs { background: var(--mec-vlak); }

.mec-bovenkop {
	font-family: var(--mec-kop-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--mec-oranje-diep);
	margin: 0 0 12px;
}

.mec-kop2 { font-size: clamp(25px, 3vw, 35px); margin-bottom: 24px; text-wrap: balance; }
.mec-inleiding { font-size: 18px; color: var(--mec-tekst-zacht); max-width: 700px; margin-bottom: 34px; }

.mec-tekst { font-size: 17px; line-height: 1.72; color: var(--mec-tekst); }
.mec-tekst h3 { font-size: 21px; margin: 1.6em 0 .5em; }
.mec-tekst ul,
.mec-tekst ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.mec-tekst li { margin-bottom: .55em; }
.mec-tekst li::marker { color: var(--mec-oranje-diep); font-weight: 600; }
.mec-tekst strong { color: var(--mec-marine); font-weight: 600; }

/* ------------------------------------------------------------------ tekst met beeld */

.mec-tekstbeeld {
	display: grid;
	grid-template-columns: 1fr .78fr;
	gap: 56px;
	align-items: center;
}
.mec-tekstbeeld--om { grid-template-columns: .78fr 1fr; }
.mec-tekstbeeld--om .mec-tekstbeeld__tekst { order: 2; }
.mec-tekstbeeld--om .mec-tekstbeeld__beeld { order: 1; }

.mec-tekstbeeld__beeld { margin: 0; }
.mec-tekstbeeld__beeld img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--mec-radius-groot);
	box-shadow: 0 18px 44px rgba(16, 38, 66, .18);
}
.mec-tekstbeeld__beeld.is-staand img { aspect-ratio: 4 / 5; }
.mec-tekstbeeld__beeld.is-liggend img { aspect-ratio: 4 / 3; }
.mec-tekstbeeld__beeld figcaption {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mec-tekst-zacht);
}

/* ------------------------------------------------------------------ beeldband */

.mec-beeldband {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.mec-beeldband__foto { display: block; }
.mec-beeldband__foto img {
	display: block;
	width: 100%;
	height: clamp(240px, 34vw, 420px);
	object-fit: cover;
}
.mec-beeldband__waas {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 24, 43, .88) 0%, rgba(10, 24, 43, .62) 48%, rgba(10, 24, 43, .18) 100%);
}
.mec-beeldband__tekst {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--mec-wit);
}
.mec-beeldband__tekst h2 {
	color: var(--mec-wit);
	font-size: clamp(23px, 2.6vw, 33px);
	margin-bottom: 10px;
	max-width: 18em;
}
.mec-beeldband__tekst p {
	color: rgba(255, 255, 255, .88);
	font-size: 16.5px;
	max-width: 34em;
}

/* ------------------------------------------------------------------ zekerheden */

.mec-zekerheden {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}
.mec-zekerheid {
	background: var(--mec-wit);
	border: 1px solid var(--mec-lijn);
	border-radius: var(--mec-radius-groot);
	padding: 28px 24px;
}
.mec-zekerheid__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: var(--mec-marine);
	color: var(--mec-wit);
	margin-bottom: 16px;
}
.mec-zekerheid__icoon svg { width: 24px; height: 24px; }
.mec-zekerheid h3 { font-size: 18px; margin-bottom: 8px; }
.mec-zekerheid p { font-size: 15px; color: var(--mec-tekst-zacht); line-height: 1.6; }

/* ------------------------------------------------------------------ tegels */

.mec-tegels { display: grid; gap: 20px; }
.mec-tegels--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.mec-tegels--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.mec-tegel {
	display: block;
	background: var(--mec-wit);
	border: 1px solid var(--mec-lijn);
	border-radius: var(--mec-radius-groot);
	padding: 28px 26px;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mec-tegel:hover {
	border-color: var(--mec-marine-licht);
	box-shadow: 0 16px 40px rgba(16, 38, 66, .13);
	transform: translateY(-3px);
}
.mec-tegel h3 { font-size: 19px; margin-bottom: 10px; }
.mec-tegel p { font-size: 15px; color: var(--mec-tekst-zacht); line-height: 1.6; margin-bottom: 16px; }
.mec-tegel__meer {
	font-family: var(--mec-kop-font);
	font-weight: 600;
	font-size: 14px;
	color: var(--mec-oranje-diep);
}
.mec-tegel__meer::after { content: " \2192"; }

/* ------------------------------------------------------------------ plaatsen */

.mec-plaatsen { display: flex; flex-wrap: wrap; gap: 11px; }
.mec-plaats {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	background: var(--mec-wit);
	border: 1px solid var(--mec-lijn);
	border-radius: 100px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--mec-marine);
	transition: background-color .15s ease, border-color .15s ease;
}
.mec-plaats:hover { background: var(--mec-marine); border-color: var(--mec-marine); color: var(--mec-wit); }
.mec-plaats svg { width: 16px; height: 16px; color: var(--mec-oranje); flex: none; }
.mec-plaats:hover svg { color: var(--mec-wit); }

/* ------------------------------------------------------------------ stappen */

.mec-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.mec-stappen li { display: flex; gap: 20px; align-items: flex-start; }
.mec-stappen__nr {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--mec-oranje);
	color: var(--mec-wit);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mec-kop-font);
	font-weight: 700;
	font-size: 17px;
}
.mec-stappen h3 { font-size: 18px; margin-bottom: 5px; }
.mec-stappen p { font-size: 15.5px; color: var(--mec-tekst-zacht); }

/* ------------------------------------------------------------------ vragen */

.mec-vragen { display: grid; gap: 10px; }
.mec-vraag {
	background: var(--mec-wit);
	border: 1px solid var(--mec-lijn);
	border-radius: var(--mec-radius);
	overflow: hidden;
}
.mec-vraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-family: var(--mec-kop-font);
	font-weight: 600;
	font-size: 16.5px;
	color: var(--mec-marine);
	list-style: none;
}
.mec-vraag summary::-webkit-details-marker { display: none; }
.mec-vraag summary svg { width: 19px; height: 19px; flex: none; color: var(--mec-oranje-diep); transition: transform .2s ease; }
.mec-vraag[open] summary svg { transform: rotate(180deg); }
.mec-vraag__antwoord { padding: 0 22px 20px; font-size: 16px; color: var(--mec-tekst-zacht); line-height: 1.68; }

/* ------------------------------------------------------------------ beoordelingen */

.mec-beoordelingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.mec-beoordeling {
	margin: 0;
	background: var(--mec-vlak);
	border-radius: var(--mec-radius-groot);
	padding: 26px;
}
.mec-sterren { display: inline-flex; gap: 3px; color: var(--mec-oranje); }
.mec-sterren svg { width: 17px; height: 17px; }
.mec-beoordeling blockquote { margin: 14px 0; font-size: 16px; line-height: 1.62; color: var(--mec-tekst); }
.mec-beoordeling figcaption { font-size: 14px; font-weight: 600; color: var(--mec-marine); }
.mec-beoordeling figcaption span { font-weight: 400; color: var(--mec-tekst-zacht); }
.mec-beoordelingen__voet { margin-top: 24px; font-size: 15px; color: var(--mec-tekst-zacht); }

/*
 * De carrousel komt uit Trustindex en brengt zijn eigen opmaak mee. Hier wordt alleen de ruimte
 * eromheen geregeld en wordt voorkomen dat de widget breder wordt dan de kolom. Aan de opmaak van
 * de widget zelf wordt niets veranderd, want dat is niet van ons.
 */
.mec-reviewcarrousel { margin-top: 8px; max-width: 100%; }
.mec-reviewcarrousel .ti-widget { margin-bottom: 0 !important; }

/* ------------------------------------------------------------------ artikelen */

.mec-artikelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px; }
.mec-artikel {
	display: block;
	background: var(--mec-wit);
	border: 1px solid var(--mec-lijn);
	border-radius: var(--mec-radius-groot);
	padding: 28px 26px;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mec-artikel:hover {
	border-color: var(--mec-marine-licht);
	box-shadow: 0 16px 40px rgba(16, 38, 66, .13);
	transform: translateY(-3px);
}
.mec-artikel h2 { font-size: 19px; margin-bottom: 10px; line-height: 1.32; }
.mec-artikel p { font-size: 15px; color: var(--mec-tekst-zacht); line-height: 1.6; margin-bottom: 16px; }

/* ------------------------------------------------------------------ projecten */

.mec-projecten { display: grid; gap: 24px; }
.mec-project {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 0;
	background: var(--mec-wit);
	border: 1px solid var(--mec-lijn);
	border-radius: var(--mec-radius-groot);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.mec-project:hover { border-color: var(--mec-marine-licht); box-shadow: 0 16px 40px rgba(16, 38, 66, .13); }
.mec-project__foto { display: block; background: var(--mec-vlak); }
.mec-project__foto img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.mec-project__tekst { display: block; padding: 30px 32px; }
.mec-project__tekst h2 { font-size: 21px; margin-bottom: 10px; line-height: 1.3; }
.mec-project__tekst p { font-size: 15.5px; color: var(--mec-tekst-zacht); line-height: 1.6; margin-bottom: 16px; }

@media (max-width: 720px) {
	.mec-project { grid-template-columns: 1fr; }
	.mec-project__foto img { min-height: 190px; }
	.mec-project__tekst { padding: 24px; }
}

/* ------------------------------------------------------------------ verder lezen */

.mec-verder { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.mec-verder__item {
	display: block;
	background: var(--mec-wit);
	border: 1px solid var(--mec-lijn);
	border-radius: var(--mec-radius);
	padding: 22px;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
.mec-verder__item:hover { border-color: var(--mec-marine-licht); transform: translateY(-2px); }
.mec-verder__item h3 { font-size: 17px; margin-bottom: 7px; line-height: 1.32; }
.mec-verder__item p { font-size: 14.5px; color: var(--mec-tekst-zacht); line-height: 1.55; }

/* ------------------------------------------------------------------ oproep */

.mec-oproep { background: var(--mec-marine); color: var(--mec-wit); padding: 62px 0; }
.mec-oproep__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	flex-wrap: wrap;
}
.mec-oproep h2 { color: var(--mec-wit); font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 10px; }
.mec-oproep p { color: rgba(255, 255, 255, .87); max-width: 560px; font-size: 16.5px; }
.mec-oproep__knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ contact */

.mec-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

.mec-contact__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 30px; }

.mec-fototip {
	background: var(--mec-vlak);
	border-left: 4px solid var(--mec-oranje);
	border-radius: 0 var(--mec-radius) var(--mec-radius) 0;
	padding: 22px 24px;
	margin-bottom: 30px;
}
.mec-fototip h3 { font-size: 17px; margin-bottom: 8px; }
.mec-fototip p { font-size: 15px; color: var(--mec-tekst-zacht); }
.mec-fototip ol { margin: 10px 0 0; padding-left: 1.25em; font-size: 15px; color: var(--mec-tekst-zacht); }
.mec-fototip li { margin-bottom: 6px; }

.mec-gegevens { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--mec-lijn); }
.mec-gegevens > div {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--mec-lijn);
}
.mec-gegevens dt { font-weight: 600; color: var(--mec-marine); font-size: 15px; }
.mec-gegevens dd { margin: 0; font-size: 15px; color: var(--mec-tekst-zacht); }
.mec-gegevens dd span { display: block; }

.mec-formulier {
	background: var(--mec-vlak);
	border-radius: var(--mec-radius-groot);
	padding: 34px;
	position: sticky;
	top: 108px;
}
.mec-formulier__leeg { font-size: 14.5px; color: var(--mec-tekst-zacht); }

/* het formulier van de externe plugin meelaten lopen met onze opmaak */
.mec-formulier input[type="text"],
.mec-formulier input[type="email"],
.mec-formulier input[type="tel"],
.mec-formulier select,
.mec-formulier textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mec-lijn);
	border-radius: 10px;
	font-family: inherit;
	font-size: 16px;
	background: var(--mec-wit);
	color: var(--mec-tekst);
}
.mec-formulier button,
.mec-formulier input[type="submit"] {
	background: var(--mec-oranje);
	color: var(--mec-wit);
	border: 0;
	border-radius: var(--mec-radius);
	padding: 14px 26px;
	font-family: var(--mec-kop-font);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}
.mec-formulier button:hover,
.mec-formulier input[type="submit"]:hover { background: var(--mec-oranje-hover); }

/* ------------------------------------------------------------------ footer */

/*
 * Alles in de voet staat op een donker vlak, dus alles moet licht zijn. Elke regel zet de kleur
 * hier expliciet: koppen, lopende tekst en links. Zonder dat pakken de basisregels de donkerblauwe
 * merkkleur en staat er blauw op blauw.
 */
.mec-voet {
	background: var(--mec-marine-diep);
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
}
.mec-voet p,
.mec-voet li,
.mec-voet span,
.mec-voet dt,
.mec-voet dd { color: rgba(255, 255, 255, .78); }

.mec-voet h2,
.mec-voet h3,
.mec-voet h4 {
	color: var(--mec-wit);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.mec-voet ul { list-style: none; margin: 0; padding: 0; }
.mec-voet li { margin-bottom: 9px; }
.mec-voet a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.mec-voet a:hover,
.mec-voet a:focus-visible { color: var(--mec-wit); text-decoration: underline; }

/* de offerteknop is oranje en houdt dus zijn eigen witte tekst */
.mec-voet .mec-knop--oranje,
.mec-voet .mec-knop--oranje:hover { color: var(--mec-wit); text-decoration: none; }

/* ---------------------------------------------------------- de lichte bovenhelft
 *
 * De bovenste rij staat op een licht vlak met donkere tekst en de merkkleur. De regels hierboven
 * zetten alles in de voet wit, dus die worden hier per onderdeel teruggedraaid. Ze staan met twee
 * klassen genoteerd, zodat ze niet van de volgorde in dit bestand afhangen.
 */
.mec-voet__licht {
	background: var(--mec-vlak);
	border-bottom: 1px solid var(--mec-lijn);
}

.mec-voet .mec-voet__licht,
.mec-voet .mec-voet__licht p,
.mec-voet .mec-voet__licht li,
.mec-voet .mec-voet__licht span,
.mec-voet .mec-voet__licht dt,
.mec-voet .mec-voet__licht dd { color: var(--mec-tekst); }

.mec-voet .mec-voet__licht h2,
.mec-voet .mec-voet__licht h3,
.mec-voet .mec-voet__licht h4 { color: var(--mec-marine); }

.mec-voet .mec-voet__licht a { color: var(--mec-marine); }
.mec-voet .mec-voet__licht a:hover,
.mec-voet .mec-voet__licht a:focus-visible { color: var(--mec-oranje-diep); }

.mec-voet .mec-voet__licht .mec-knop--oranje,
.mec-voet .mec-voet__licht .mec-knop--oranje:hover { color: var(--mec-wit); }

/*
 * Het logo is wit met een doorzichtige achtergrond en zou op dit lichte vlak verdwijnen. Daarom
 * krijgt het hier een donker kaartje eronder. Dat is dezelfde valkuil als in de header, alleen
 * andersom.
 */
.mec-voet__licht .mec-voet__logo {
	background: var(--mec-marine);
	border-radius: var(--mec-radius);
	padding: 14px 18px;
	box-sizing: content-box;
}
.mec-voet__licht .mec-woordmerk strong { color: var(--mec-marine); }
.mec-voet__licht .mec-woordmerk em { color: var(--mec-tekst-zacht); }

.mec-voet__rij--hoofd {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
	gap: 44px;
	padding: 58px 0 52px;
}
.mec-voet__rij--twee {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.4fr;
	gap: 44px;
	padding: 48px 0 50px;
}

.mec-voet__logo { height: 62px; width: auto; margin-bottom: 18px; }
.mec-voet__pitch { font-size: 15px; line-height: 1.65; margin-bottom: 20px; }

.mec-voet__contact { margin-bottom: 22px; }
.mec-voet__contact li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; }
.mec-voet__contact svg { width: 18px; height: 18px; flex: none; color: var(--mec-oranje); margin-top: 2px; }

.mec-voet__cta { margin-top: 4px; }

.mec-voet__inline { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mec-voet__inline li { margin-bottom: 0; }

.mec-voet__tijden li { display: flex; justify-content: space-between; gap: 16px; }
.mec-voet__spoed { margin-top: 14px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .58); }

.mec-voet__score { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14.5px; }
.mec-voet__extern { font-size: 14.5px; }

.mec-voet__onder { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0; }
.mec-voet__onder-binnen {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
}
.mec-voet__onder-binnen p { margin: 0; }

/* ------------------------------------------------------------------ tablet */

@media (max-width: 1100px) {
	.mec-uitklap__binnen { min-width: 0; flex-direction: column; gap: 20px; }
	.mec-uitklap__hub { width: auto; }

	/*
	 * In deze band staat het hubblok boven de kolommen en wordt de diensten-uitklap daardoor
	 * hoger dan het scherm. Het blok wijst naar dezelfde pagina als de menuregel erboven, dus
	 * er gaat geen link verloren.
	 */
	.mec-nav__item--breed .mec-uitklap__hub { display: none; }
	.mec-voet__rij--hoofd { grid-template-columns: 1fr 1fr; gap: 36px; }
	.mec-voet__rij--twee { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
	.mec-nav,
	.mec-kop__acties .mec-kop__bellen { display: none; }

	/*
	 * Alles wat rechts hoort te staan, staat als een groep bij elkaar: eerst de WhatsApp-knop,
	 * dan de hamburger. Alleen die groep wordt naar rechts geduwd.
	 *
	 * Eerder stond `margin-left: auto` op de knoppen én op de hamburger. Die duwden elkaar toen
	 * uit elkaar en de WhatsApp-knop bleef midden in de balk hangen.
	 */
	.mec-kop__binnen { gap: 12px; }
	.mec-kop__acties { margin-left: auto; gap: 10px; }
	.mec-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 46px;
		height: 46px;
		padding: 0 11px;
		background: rgba(255, 255, 255, .12);
		border: 0;
		border-radius: 11px;
		cursor: pointer;
		flex: none;
	}
	.mec-hamburger span { display: block; height: 2px; background: var(--mec-wit); border-radius: 2px; }

	.mec-contact { grid-template-columns: 1fr; gap: 36px; }
	.mec-formulier { position: static; }
}

/* ------------------------------------------------------------------ telefoon */

@media (max-width: 1000px) {
	.mec-hero--naast .mec-hero__binnen,
	.mec-hero--naast.mec-hero--klein .mec-hero__binnen {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.mec-hero__beeld img,
	.mec-hero--klein .mec-hero__beeld img { aspect-ratio: 16 / 10; }

	.mec-tekstbeeld,
	.mec-tekstbeeld--om { grid-template-columns: 1fr; gap: 30px; }
	.mec-tekstbeeld--om .mec-tekstbeeld__tekst,
	.mec-tekstbeeld--om .mec-tekstbeeld__beeld { order: 0; }
	.mec-tekstbeeld__beeld.is-staand img { aspect-ratio: 16 / 10; }
}

@media (max-width: 720px) {
	body.mec { font-size: 16px; }
	.mec-omhulsel { padding: 0 18px; }
	.mec-vlak { padding: 52px 0; }
	.mec-hero__binnen { padding: 64px 18px 58px; }
	.mec-hero--klein .mec-hero__binnen { padding: 46px 18px 42px; }
	.mec-hero--naast .mec-hero__binnen { padding: 44px 18px 42px; }
	.mec-hero__beeld img,
	.mec-hero--klein .mec-hero__beeld img { aspect-ratio: 4 / 3; }
	.mec-beeldband__tekst h2 { font-size: 22px; }
	.mec-beeldband__waas {
		background: linear-gradient(180deg, rgba(10, 24, 43, .55) 0%, rgba(10, 24, 43, .9) 100%);
	}
	.mec-hero__knoppen { flex-direction: column; }
	.mec-hero__knoppen .mec-knop { width: 100%; }
	.mec-hero__punten { flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
	.mec-kruimels ol { justify-content: flex-start; }
	.mec-logo img { height: 58px; max-height: 58px; }
	.mec-woordmerk strong { font-size: 17px; }
	.mec-woordmerk em { font-size: 9px; letter-spacing: .16em; }
	.mec-kop__binnen { min-height: 76px; gap: 10px; }

	/* op de smalste schermen alleen het pictogram, zodat de balk niet volloopt */
	.mec-kop__acties .mec-knop span { display: none; }
	.mec-kop__acties .mec-knop {
		width: 46px;
		height: 46px;
		padding: 0;
		flex: none;
	}

	.mec-oproep__binnen { flex-direction: column; align-items: flex-start; }
	.mec-oproep__knoppen { width: 100%; flex-direction: column; }
	.mec-oproep__knoppen .mec-knop { width: 100%; }

	.mec-gegevens > div { grid-template-columns: 1fr; gap: 3px; }
	.mec-formulier { padding: 24px; }

	.mec-voet__rij--hoofd,
	.mec-voet__rij--twee { grid-template-columns: 1fr; gap: 32px; }
	.mec-voet__rij--hoofd { padding: 42px 0 38px; }
	.mec-voet__rij--twee { padding: 36px 0 40px; }

	/* ruimte voor de vaste balk onderaan */
	.mec-voet__onder { padding-bottom: 86px; }

	/* op mobiel doet de vaste balk dit werk al */
	.mec-zweef { display: none; }

	.mec-mobielbalk {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 120;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--mec-lijn);
	}
	.mec-mobielbalk__knop {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		padding: 14px 10px;
		border-radius: var(--mec-radius);
		font-family: var(--mec-kop-font);
		font-weight: 600;
		font-size: 15px;
		text-decoration: none;
	}
	.mec-mobielbalk__knop svg { width: 19px; height: 19px; flex: none; }
	.mec-mobielbalk__knop--bellen { background: var(--mec-marine); color: var(--mec-wit); }
	.mec-mobielbalk__knop--app { background: var(--mec-groen); color: var(--mec-wit); }
}

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