/* ==========================================================================
   Encrypt Security — thema-CSS
   Opbouw: tokens, basis, bouwstenen, header, hero, secties, componenten,
   paginakop, inhoud, formulieren, footer, mobiel.
   ========================================================================== */

/* 1. Lettertype ---------------------------------------------------------- */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/manrope-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens -------------------------------------------------------------- */
:root {
	--blauw:        #50A4D7;   /* merkkleur uit de logokit */
	--blauw-tekst:  #2D7FB3;   /* dezelfde tint, dieper — leesbaar op wit */
	--blauw-donker: #1F6A99;
	--navy:         #17354D;   /* donkere merkkleur */
	--navy-diep:    #0F2536;   /* hero en footer */
	--navy-lijn:    #24455F;
	--waas:         #EAF4FA;
	--waas-2:       #D9EBF6;
	--vlak:         #F5F8FA;
	--wit:          #FFFFFF;
	--inkt:         #17354D;
	--tekst:        #46525D;
	--gedempt:      #74808A;
	--lijn:         #E1E8EE;
	--lijn-zacht:   #ECF1F5;
	--goed:         #2E8B57;
	--fout:         #C0392B;

	--kop:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--breed: 1280px;
	--goot: 28px;
	--kop-hoogte: 80px;
	--straal: 14px;
	--straal-klein: 8px;
	--schaduw: 0 20px 50px rgba(15, 37, 54, .14);
	--schaduw-zacht: 0 8px 24px rgba(15, 37, 54, .07);
	--soepel: 220ms cubic-bezier(.2, .6, .3, 1);
	--tot-rand: calc((100vw - min(100vw, calc(var(--breed) + var(--goot) * 2))) / -2 - var(--goot));
}

/* 3. Basis --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--wit); color: var(--tekst); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.es-menu-open body, html.es-menu-open { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; font-family: var(--kop); font-weight: 700; color: var(--inkt); line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; }
h2 { font-size: clamp(27px, 3vw, 38px); }
h3 { font-size: 20px; line-height: 1.3; }
p { margin: 0 0 22px; }
p:last-child { margin-bottom: 0; }
a { color: var(--blauw-tekst); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video, picture { max-width: 100%; height: auto; display: block; }
a > svg:not([width]), p > svg:not([width]) { width: 1em; height: 1em; display: inline-block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 3px; }
strong, b { font-weight: 700; color: var(--inkt); }

/* 4. Bouwstenen ---------------------------------------------------------- */
.es-omhulsel { width: 100%; max-width: calc(var(--breed) + var(--goot) * 2); margin-inline: auto; padding-inline: var(--goot); }
.es-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--kop); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw-tekst); }
.es-label::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--blauw); }
.es-knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 1.5px solid transparent; border-radius: var(--straal-klein); font-family: var(--kop); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--soepel), color var(--soepel), border-color var(--soepel), transform var(--soepel), box-shadow var(--soepel); }
.es-knop:hover { text-decoration: none; transform: translateY(-1px); }
.es-knop svg { width: 17px; height: 17px; flex-shrink: 0; }
.es-knop--vol { background: var(--blauw-tekst); border-color: var(--blauw-tekst); color: var(--wit); box-shadow: 0 8px 20px rgba(45, 127, 179, .25); }
.es-knop--vol:hover { background: var(--blauw-donker); border-color: var(--blauw-donker); }
.es-knop--lijn { background: transparent; border-color: #BFD8EA; color: var(--blauw-tekst); }
.es-knop--lijn:hover { border-color: var(--blauw-tekst); background: var(--waas); }
.es-knop--wit { background: var(--wit); border-color: var(--wit); color: var(--navy); }
.es-knop--wit:hover { background: var(--waas); }
.es-knop--licht { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: var(--wit); }
.es-knop--licht:hover { background: rgba(255,255,255,.16); border-color: var(--wit); }
.es-knoppen { display: flex; flex-wrap: wrap; gap: 14px; }
.es-meer { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kop); font-weight: 700; font-size: 15px; color: var(--blauw-tekst); }
.es-meer::after { content: '\2192'; transition: transform var(--soepel); }
.es-meer:hover { text-decoration: none; }
.es-meer:hover::after { transform: translateX(4px); }
.es-overslaan { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy); color: var(--wit); padding: 12px 20px; }
.es-overslaan:focus { left: 0; }

/* 5. Header -------------------------------------------------------------- */
.es-kop { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--lijn-zacht); transition: box-shadow var(--soepel); }
.es-kop.is-gescrold { box-shadow: 0 6px 24px rgba(15, 37, 54, .08); }
.es-kop__rij { display: flex; align-items: center; gap: 28px; min-height: var(--kop-hoogte); }
.es-logo { display: block; flex-shrink: 0; margin-right: auto; }
.es-logo img { display: block; width: 205px; height: auto; }
.es-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.es-nav { display: flex; align-items: center; gap: 6px; }
.es-nav > a, .es-nav__groep > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 8px; font-family: var(--kop); font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; transition: background var(--soepel), color var(--soepel); }
.es-nav > a:hover, .es-nav__groep:hover > a, .es-nav__groep.is-open > a { background: var(--waas); color: var(--blauw-tekst); text-decoration: none; }
.es-nav__groep > a svg { width: 14px; height: 14px; transition: transform var(--soepel); }
.es-nav__groep:hover > a svg, .es-nav__groep.is-open > a svg { transform: rotate(180deg); }
.es-nav__groep { position: relative; }
.es-nav__paneel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; padding: 12px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--soepel), transform var(--soepel), visibility 0s linear .2s; }
.es-nav__groep::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.es-nav__groep:hover .es-nav__paneel, .es-nav__groep.is-open .es-nav__paneel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.es-nav__paneel--breed { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; width: 560px; padding: 18px; }
.es-nav__paneel b { display: block; padding: 6px 12px 8px; font-family: var(--kop); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blauw-tekst); }
.es-nav__paneel a:not(.es-nav__alles) { display: block; padding: 9px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--navy); }
.es-nav__paneel a:not(.es-nav__alles):hover { background: var(--waas); color: var(--blauw-tekst); text-decoration: none; }
.es-nav__alles { grid-column: 1 / -1; margin-top: 8px; padding: 12px; border-top: 1px solid var(--lijn-zacht); font-family: var(--kop); font-weight: 700; font-size: 14.5px; color: var(--blauw-tekst); }
.es-kop__acties { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.es-kop__tel { display: inline-flex; align-items: center; gap: 9px; font-family: var(--kop); font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.es-kop__tel:hover { color: var(--blauw-tekst); text-decoration: none; }
.es-kop__tel svg { width: 17px; height: 17px; color: var(--blauw); flex-shrink: 0; }
.es-kop__cta { padding: 13px 20px; font-size: 14.5px; }
.es-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.es-burger span { display: block; width: 24px; height: 2px; margin-inline: auto; background: var(--navy); border-radius: 2px; transition: transform var(--soepel), opacity var(--soepel); }
.es-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.es-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.es-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.es-mobiel { display: none; }
.es-mobiel:not([hidden]) { display: block; max-height: calc(100vh - var(--kop-hoogte)); overflow-y: auto; border-top: 1px solid var(--lijn-zacht); background: var(--wit); padding: 10px var(--goot) 32px; }
.es-mobiel b { display: block; padding: 20px 0 6px; font-family: var(--kop); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw-tekst); }
.es-mobiel a:not(.es-knop):not(.es-kop__tel) { display: block; padding: 12px 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 16.5px; color: var(--navy); }
.es-mobiel .es-kop__tel { display: flex; padding: 22px 0 8px; font-size: 19px; }
.es-mobiel .es-knop { display: flex; width: 100%; margin-top: 10px; padding: 16px; }
@media (max-width: 1240px) { .es-nav > a, .es-nav__groep > a { padding: 10px 9px; font-size: 14.5px; } .es-kop__rij { gap: 16px; } .es-logo img { width: 180px; } }
@media (max-width: 1060px) { :root { --kop-hoogte: 70px; } .es-nav, .es-kop__tel { display: none; } .es-burger { display: flex; } .es-logo img { width: 164px; } .es-kop__acties { gap: 8px; } }
@media (max-width: 520px) { .es-kop__cta { display: none; } }

/* 5b. Donkere bovenbalk (wens Encrypt: zelfde contrast als de footer) ---- */
/* Bovenaan licht doorschijnend en over de kop heen; na scrollen dekkend. */
.es-kop { background: rgba(15, 37, 54, .97); border-bottom: 1px solid var(--navy-lijn); transition: background var(--soepel), box-shadow var(--soepel); }
.es-kop.is-gescrold { box-shadow: 0 6px 24px rgba(15, 37, 54, .28); }
/* Alleen op de homepage: doorschijnend over de hero, dekkend na scrollen of met open menu. */
.home .es-kop { background: rgba(15, 37, 54, .80); border-bottom-color: rgba(255, 255, 255, .08); margin-bottom: calc((var(--kop-hoogte) + 1px) * -1); }
.home .es-kop.is-gescrold, html.es-menu-open .home .es-kop { background: rgba(15, 37, 54, .97); }
html { scroll-padding-top: calc(var(--kop-hoogte) + 16px); }
.es-nav > a, .es-nav__groep > a { color: rgba(255, 255, 255, .92); }
.es-nav > a:hover, .es-nav__groep:hover > a, .es-nav__groep.is-open > a { background: rgba(255, 255, 255, .1); color: var(--wit); }
.es-kop__tel { color: var(--wit); }
.es-kop__tel:hover { color: #8CC8EC; }
.es-kop .es-kop__cta { background: var(--blauw-tekst); border-color: var(--blauw-tekst); color: var(--wit); box-shadow: none; }
.es-kop .es-kop__cta:hover { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.es-burger span { background: var(--wit); }
.es-mobiel .es-kop__tel { color: var(--navy); }

/* 6. Hero ---------------------------------------------------------------- */
.es-hero { position: relative; background: var(--navy-diep); color: var(--wit); overflow: hidden; }
.es-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 500px at 15% 0%, rgba(80,164,215,.22), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(80,164,215,.14), transparent 60%); pointer-events: none; }
.es-hero__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: center; padding-block: 64px 72px; min-height: 560px; }
.es-hero__tekst .es-label { color: #8CC8EC; }
.es-hero__tekst .es-label::before { background: var(--blauw); }
.es-hero h1 { margin: 18px 0 20px; color: var(--wit); max-width: 14ch; }
.es-hero h1 em { font-style: normal; color: var(--blauw); }
.es-hero__lead { max-width: 52ch; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.82); margin-bottom: 30px; }
.es-hero .es-knoppen { margin-bottom: 34px; }
.es-hero__bewijs { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14.5px; color: rgba(255,255,255,.78); }
.es-hero__bewijs span { display: inline-flex; align-items: center; gap: 8px; }
.es-hero__bewijs svg { width: 16px; height: 16px; color: var(--blauw); flex-shrink: 0; }
.es-hero__beeld { position: relative; }
.es-hero__beeld picture, .es-hero__beeld img { border-radius: var(--straal); }
.es-hero__beeld img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; box-shadow: var(--schaduw); }
.es-hero__beeld::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 1.5px solid rgba(80,164,215,.45); border-radius: var(--straal); pointer-events: none; }
.es-hero__badge { position: absolute; left: -22px; bottom: 32px; display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; background: var(--wit); color: var(--navy); border-radius: 12px; box-shadow: var(--schaduw); }
.es-hero__badge i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--waas); color: var(--blauw-tekst); }
.es-hero__badge i svg { width: 22px; height: 22px; }
.es-hero__badge b { display: block; font-family: var(--kop); font-size: 17px; line-height: 1.1; }
.es-hero__badge span { font-size: 13px; color: var(--gedempt); }


/* 6b. Lichte hero (homepage) -------------------------------------------- */
.es-hero--licht { background: linear-gradient(180deg, var(--waas) 0%, #F6FAFD 100%); color: var(--tekst); border-bottom: 1px solid var(--lijn-zacht); }
.es-hero--licht::before { display: none; }
.es-hero--licht .es-hero__raster { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); min-width: 0; gap: 48px; padding-block: 0; min-height: 560px; align-items: center; }
.es-hero--licht .es-hero__tekst { padding: 56px 0 60px; }
.es-hero--licht .es-hero__tekst .es-label { color: var(--blauw-tekst); }
.es-hero--licht h1 { color: var(--navy); max-width: 15ch; font-size: clamp(34px, 4.2vw, 54px); }
.es-hero--licht h1 em { display: block; margin-top: 6px; font-weight: 600; color: var(--blauw-tekst); font-size: .62em; line-height: 1.25; letter-spacing: -.01em; }
.es-hero--licht .es-hero__lead { color: var(--tekst); font-size: 18px; margin-bottom: 26px; }
.es-hero--licht .es-knoppen { margin-bottom: 26px; }
.es-hero__google { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; font-size: 13.5px; color: var(--gedempt); box-shadow: var(--schaduw-zacht); }
.es-hero__google:hover { text-decoration: none; border-color: #BFD8EA; color: var(--navy); }
.es-hero__google b { font-family: var(--kop); font-size: 16px; color: var(--navy); }
.es-hero__sterren { display: inline-flex; gap: 2px; color: #F2B01E; }
.es-hero__sterren svg { width: 15px; height: 15px; }
.es-hero--licht .es-hero__beeld { position: relative; align-self: stretch; min-height: 560px; margin-right: var(--tot-rand); }
.es-hero--licht .es-hero__beeld::before { display: none; }
.es-hero--licht .es-hero__beeld picture, .es-hero--licht .es-hero__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.es-hero--licht .es-hero__beeld img { object-fit: cover; object-position: 74% 50%; border-radius: 0 0 0 20px; }
.es-hero__kaart { position: absolute; left: -36px; bottom: 44px; z-index: 2; display: flex; gap: 16px; width: min(340px, calc(100% - 20px)); padding: 22px 24px; background: var(--wit); border-radius: 14px; box-shadow: var(--schaduw); }
.es-hero__kaart i { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; background: var(--waas); color: var(--blauw-tekst); }
.es-hero__kaart i svg { width: 21px; height: 21px; }
.es-hero__kaart b { display: block; font-family: var(--kop); font-size: 16.5px; color: var(--navy); margin-bottom: 4px; }
.es-hero__kaart p { font-size: 14px; line-height: 1.5; color: var(--tekst); margin-bottom: 10px; }
.es-hero__kaart a { font-family: var(--kop); font-weight: 700; font-size: 14.5px; }
@media (max-width: 900px) {
	.es-hero--licht .es-hero__raster { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
	.es-hero--licht .es-hero__beeld { min-height: 0; }
	.es-hero--licht .es-hero__tekst { padding: calc(36px + var(--kop-hoogte)) 0 32px; }
	.es-hero--licht h1 { max-width: none; }
	.es-hero--licht .es-hero__beeld { min-height: 0; margin: 0; }
	.es-hero--licht .es-hero__beeld img { border-radius: 14px; }
	.es-hero__kaart { position: static; width: auto; margin: 16px 0 28px; box-shadow: var(--schaduw-zacht); border: 1px solid var(--lijn); }
	.es-hero--licht .es-hero__beeld { display: flex; flex-direction: column; }
	.es-hero--licht .es-hero__beeld picture { position: relative; width: 100%; aspect-ratio: 16 / 9; }
}

/* 7. USP-balk ------------------------------------------------------------ */
.es-usps { background: var(--wit); border-bottom: 1px solid var(--lijn-zacht); }
.es-usps__lijst { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.es-usps__lijst li { display: flex; align-items: center; gap: 14px; padding: 22px 24px 22px 0; font-size: 15px; line-height: 1.4; color: var(--navy); font-weight: 600; }
.es-usps__lijst li + li { padding-left: 24px; border-left: 1px solid var(--lijn-zacht); }
.es-usps__lijst svg { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: var(--waas); color: var(--blauw-tekst); flex-shrink: 0; }

/* 8. Secties ------------------------------------------------------------- */
.es-sectie { padding: 88px 0; }
.es-sectie--vlak { background: var(--vlak); }
.es-sectie--waas { background: linear-gradient(180deg, var(--waas) 0%, var(--wit) 100%); }
.es-sectie--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.es-sectie--navy h2, .es-sectie--navy h3, .es-sectie--navy strong, .es-sectie--navy b { color: var(--wit); }
.es-sectie--navy .es-label { color: #8CC8EC; }
.es-sectie--strak { padding: 64px 0; }
.es-kopblok { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.es-kopblok h2 { margin-top: 14px; max-width: 22ch; }
.es-kopblok p { max-width: 58ch; margin: 14px 0 0; font-size: 17.5px; }
.es-kopblok--midden { flex-direction: column; align-items: center; text-align: center; }
.es-kopblok--midden h2 { max-width: 26ch; }
.es-intro { max-width: 720px; }
.es-intro p { font-size: 18.5px; line-height: 1.65; }

/* 9. Diensten ------------------------------------------------------------ */
.es-diensten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.es-diensten--3 { grid-template-columns: repeat(3, 1fr); }
.es-dienst { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden; color: inherit; transition: transform var(--soepel), box-shadow var(--soepel), border-color var(--soepel); }
.es-dienst:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--schaduw); border-color: #BFD8EA; }
.es-dienst__beeld { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--waas); }
.es-dienst__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.es-dienst:hover .es-dienst__beeld img { transform: scale(1.04); }
.es-dienst__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.es-dienst__body b { font-family: var(--kop); font-size: 18px; color: var(--navy); margin-bottom: 6px; }
.es-dienst__body > span { font-size: 15px; line-height: 1.55; color: var(--tekst); margin-bottom: 16px; }
.es-dienst__body em { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-style: normal; font-family: var(--kop); font-weight: 700; font-size: 14.5px; color: var(--blauw-tekst); }
.es-dienst__body em svg { width: 15px; height: 15px; transition: transform var(--soepel); }
.es-dienst:hover em svg { transform: translateX(4px); }

/* 10. Waarom (donkere band met pijlers) --------------------------------- */
.es-pijlers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.es-pijler { padding: 30px 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--straal); }
.es-pijler svg { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: rgba(80,164,215,.18); color: var(--blauw); margin-bottom: 18px; }
.es-pijler h3 { color: var(--wit); margin-bottom: 10px; }
.es-pijler p { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.75); }
.es-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; padding-top: 44px; border-top: 1px solid rgba(255,255,255,.12); }
.es-cijfer b { display: block; font-family: var(--kop); font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; color: var(--wit); line-height: 1; letter-spacing: -.02em; }
.es-cijfer span { display: block; margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.7); }

/* 11. Split (tekst + beeld) --------------------------------------------- */
.es-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.es-split--omgekeerd > :first-child { order: 2; }
.es-split h2 { margin: 14px 0 18px; }
.es-split p { font-size: 17px; }
.es-split__beeld { position: relative; }
.es-split__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--straal); box-shadow: var(--schaduw-zacht); }
.es-split__beeld--kader::after { content: ''; position: absolute; inset: 20px -20px -20px 20px; z-index: -1; border-radius: var(--straal); background: var(--waas-2); }
.es-vinkjes { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; }
.es-vinkjes li { position: relative; padding-left: 34px; font-size: 16.5px; color: var(--inkt); }
.es-vinkjes li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--waas); }
.es-vinkjes li::after { content: ''; position: absolute; left: 8px; top: 7px; width: 6px; height: 10px; border-right: 2px solid var(--blauw-tekst); border-bottom: 2px solid var(--blauw-tekst); transform: rotate(45deg); }

/* 12. Proces ------------------------------------------------------------- */
.es-stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: stap; }
.es-stap { position: relative; padding-top: 26px; }
.es-stap::before { counter-increment: stap; content: counter(stap, decimal-leading-zero); display: block; font-family: var(--kop); font-size: 44px; font-weight: 800; line-height: 1; color: var(--blauw); opacity: .9; margin-bottom: 14px; letter-spacing: -.03em; }
.es-stap::after { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 3px; border-radius: 2px; background: var(--blauw); }
.es-stap h3 { margin-bottom: 8px; }
.es-stap p { font-size: 15.5px; color: var(--tekst); }

/* 13. Reviews ------------------------------------------------------------ */
.es-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.es-review { margin: 0; padding: 26px 26px 22px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); display: flex; flex-direction: column; }
.es-review__sterren { display: inline-flex; gap: 3px; color: #F2B01E; margin-bottom: 14px; }
.es-review__sterren svg { width: 17px; height: 17px; }
.es-review p { font-size: 16px; line-height: 1.6; color: var(--inkt); margin-bottom: 18px; }
.es-review footer { margin-top: auto; font-family: var(--kop); font-weight: 700; font-size: 14.5px; color: var(--navy); }
.es-review footer span { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--gedempt); margin-top: 2px; }
.es-google { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; font-size: 14.5px; color: var(--navy); font-weight: 600; }
.es-google b { font-family: var(--kop); font-size: 18px; }
.es-google .es-review__sterren { margin: 0; }
.es-google:hover { text-decoration: none; border-color: #BFD8EA; }

/* 14. CTA-band ----------------------------------------------------------- */
.es-band { position: relative; overflow: hidden; border-radius: 20px; background: var(--navy-diep); color: var(--wit); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
.es-band__tekst { padding: 56px 56px 56px 60px; }
.es-band__tekst .es-label { color: #8CC8EC; }
.es-band h2 { color: var(--wit); margin: 14px 0 16px; max-width: 18ch; }
.es-band p { color: rgba(255,255,255,.8); max-width: 48ch; font-size: 17px; margin-bottom: 28px; }
.es-band__beeld { position: relative; min-height: 320px; }
.es-band__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%); mask-image: linear-gradient(to right, transparent 0%, #000 22%); }
.es-band--licht { background: var(--waas); color: var(--tekst); }
.es-band--licht h2 { color: var(--navy); }
.es-band--licht p { color: var(--tekst); }
.es-slotcta { text-align: center; padding: 96px 0; background: linear-gradient(180deg, var(--vlak), var(--wit)); }
.es-slotcta h2 { max-width: 20ch; margin: 14px auto 16px; }
.es-slotcta p { max-width: 54ch; margin: 0 auto 30px; font-size: 18px; }
.es-slotcta .es-knoppen { justify-content: center; }
.es-slotcta__tel { display: block; margin-top: 22px; font-size: 15px; color: var(--gedempt); }
.es-slotcta__tel a { font-family: var(--kop); font-weight: 700; font-size: 17px; }

/* 15. Kaarten (nieuws, vacatures) --------------------------------------- */
.es-kaarten { display: grid; gap: 24px; }
.es-kaarten--drie { grid-template-columns: repeat(3, 1fr); }
.es-kaarten--twee { grid-template-columns: repeat(2, 1fr); }
.es-kaart { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden; transition: box-shadow var(--soepel), transform var(--soepel); }
.es-kaart:hover { box-shadow: var(--schaduw); transform: translateY(-3px); }
.es-kaart__beeld { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, var(--waas), var(--waas-2)); }
.es-kaart__beeld img, .es-kaart__beeld picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.es-kaart__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.es-kaart time, .es-archief .wp-block-post-date { display: block; font-size: 13px; color: var(--gedempt); margin-bottom: 8px; }
.es-kaart h3 { font-size: 19px; margin-bottom: 10px; }
.es-kaart h3 a { color: var(--navy); }
.es-kaart p { font-size: 15px; color: var(--tekst); margin-bottom: 16px; }
.es-kaart .es-meer { margin-top: auto; }
.es-archief .wp-block-post { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden; transition: box-shadow var(--soepel); }
.es-archief .wp-block-post:hover { box-shadow: var(--schaduw); }
.es-archief .wp-block-post-featured-image { margin: 0; }
.es-archief .wp-block-post-featured-image img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.es-archief__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.es-archief .wp-block-post-title { font-size: 19px; margin: 0 0 12px; line-height: 1.3; }
.es-archief .wp-block-post-title a { color: var(--navy); }
.es-archief .wp-block-read-more { margin-top: auto; font-family: var(--kop); font-weight: 700; font-size: 15px; }
.es-archief .wp-block-query-pagination { margin-top: 44px; gap: 8px; font-family: var(--kop); font-weight: 700; }
.es-archief .wp-block-query-pagination a, .es-archief .wp-block-query-pagination .page-numbers { padding: 10px 14px; border: 1px solid var(--lijn); border-radius: 8px; color: var(--navy); }
.es-archief .wp-block-query-pagination .current { background: var(--navy); color: var(--wit); border-color: var(--navy); }

/* 16. Paginakop ---------------------------------------------------------- */
.es-paginakop { position: relative; background: linear-gradient(180deg, var(--waas) 0%, #F4F9FC 100%); border-bottom: 1px solid var(--lijn-zacht); overflow: hidden; }
.es-paginakop__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 56px; align-items: center; min-height: 380px; }
.es-paginakop__tekst { padding: 44px 0 52px; }
.es-paginakop h1 { margin: 16px 0 18px; max-width: 16ch; }
.es-paginakop__lead { max-width: 56ch; font-size: 19px; line-height: 1.6; color: var(--tekst); margin: 0 0 26px; }
.es-paginakop .es-knoppen { margin-top: 4px; }
.es-paginakop__beeld { position: relative; align-self: stretch; min-height: 380px; }
.es-paginakop__beeld img, .es-paginakop__beeld picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-paginakop__beeld img { object-fit: cover; object-position: var(--brandpunt, 50% 50%); border-radius: 0 0 0 var(--straal); }
.es-paginakop__beeld { margin-right: var(--tot-rand); }
.es-paginakop--kaal .es-paginakop__raster { grid-template-columns: 1fr; min-height: 0; }
.es-paginakop--kaal .es-paginakop__tekst { padding: 40px 0 44px; }
.es-kruimels { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 13.5px; color: var(--gedempt); }
.es-kruimels a { color: var(--gedempt); }
.es-kruimels a:hover { color: var(--blauw-tekst); }
.es-kruimels span[aria-hidden] { opacity: .5; }
.es-paginakop--bericht .wp-block-post-title { margin: 16px 0 12px; }
.es-bericht__datum, .es-paginakop .wp-block-post-date { font-size: 14.5px; color: var(--gedempt); }
.es-paginakop--bericht .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; height: 100%; }
.es-paginakop--bericht .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 0 var(--straal); }

/* 17. Inhoud met zijkaart ----------------------------------------------- */
.es-tweekolom { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.es-tweekolom--gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.es-tegels--drie { grid-template-columns: repeat(3, 1fr); margin: 0; }
.es-tekst { max-width: 740px; }
.es-tekst h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 44px 0 14px; }
.es-tekst h2:first-child { margin-top: 0; }
.es-tekst h3 { font-size: 20px; margin: 30px 0 10px; }
.es-tekst p, .es-tekst li { font-size: 17px; line-height: 1.7; }
.es-tekst ul { padding-left: 0; list-style: none; margin: 0 0 22px; display: grid; gap: 10px; }
.es-tekst ul:not(.es-vinkjes) li { position: relative; padding-left: 30px; }
.es-tekst ul:not(.es-vinkjes) li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--blauw); }
.es-tekst ol { padding-left: 22px; margin: 0 0 22px; display: grid; gap: 10px; }
.es-tekst blockquote { margin: 30px 0; padding: 22px 26px; border-left: 3px solid var(--blauw); background: var(--waas); border-radius: 0 var(--straal-klein) var(--straal-klein) 0; font-size: 18px; color: var(--navy); }
.es-tekst figure { margin: 32px 0; }
.es-tekst figure img { border-radius: var(--straal); }
.es-tekst figcaption { font-size: 14px; color: var(--gedempt); margin-top: 10px; }
.es-tekst .es-vinkjes li { font-size: 17px; }
.es-tekst .es-vinkjes li::before { top: 4px; }
.es-tekst .es-vinkjes li::after { top: 9px; }
.es-inzet { margin: 36px 0; padding: 26px 28px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal); }
.es-inzet b { display: block; font-family: var(--kop); font-size: 18px; margin-bottom: 8px; }
.es-inzet p { font-size: 16px; }
.es-inzet--blauw { background: var(--waas); border-color: var(--waas-2); }
.es-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 26px 0 34px; }
.es-tegel { padding: 20px 22px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal-klein); }
.es-tegel svg { width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--waas); color: var(--blauw-tekst); margin-bottom: 12px; }
.es-tegel b { display: block; font-family: var(--kop); font-size: 16.5px; margin-bottom: 4px; }
.es-tegel span, .es-tegel p { font-size: 15px; line-height: 1.55; color: var(--tekst); }
.es-faq details { border-top: 1px solid var(--lijn); }
.es-faq details:last-child { border-bottom: 1px solid var(--lijn); }
.es-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--kop); font-weight: 700; font-size: 17px; color: var(--navy); }
.es-faq summary::-webkit-details-marker { display: none; }
.es-faq summary::after { content: '+'; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--waas); color: var(--blauw-tekst); font-weight: 400; font-size: 20px; transition: transform var(--soepel); }
.es-faq details[open] summary::after { transform: rotate(45deg); }
.es-faq details p { padding: 0 44px 20px 0; font-size: 16px; }
.es-zijkaart { position: sticky; top: calc(var(--kop-hoogte) + 24px); padding: 30px 30px 28px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw-zacht); }
.es-zijkaart h2 { font-size: 21px; margin: 0 0 10px; }
.es-zijkaart p { font-size: 15px; margin-bottom: 20px; }
.es-zijkaart .es-knop { width: 100%; }
.es-zijkaart__tel { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--kop); font-size: 20px; font-weight: 800; color: var(--navy); }
.es-zijkaart__tel::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--goed); box-shadow: 0 0 0 4px rgba(46,139,87,.15); }
.es-zijkaart > span { display: block; font-size: 13.5px; color: var(--gedempt); margin-top: 4px; }
.es-zijkaart hr { border: 0; border-top: 1px solid var(--lijn-zacht); margin: 20px 0; }
.es-zijkaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.es-zijkaart ul a { font-size: 15px; color: var(--navy); font-weight: 600; }
.es-zijkaart ul a:hover { color: var(--blauw-tekst); }
.es-steden { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.es-steden a { display: inline-block; padding: 9px 14px; border: 1px solid var(--lijn); border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--navy); background: var(--wit); }
.es-steden a:hover { border-color: var(--blauw-tekst); color: var(--blauw-tekst); text-decoration: none; }
.es-sitemap { columns: 3; column-gap: 40px; list-style: none; padding: 0; }
.es-sitemap li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--lijn-zacht); }

/* 18. Contact ------------------------------------------------------------ */
.es-contactblok { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
.es-contactkaart { padding: 26px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); }
.es-contactkaart svg { width: 42px; height: 42px; padding: 10px; border-radius: 11px; background: var(--waas); color: var(--blauw-tekst); margin-bottom: 14px; }
.es-contactkaart b { display: block; font-family: var(--kop); font-size: 17px; margin-bottom: 6px; }
.es-contactkaart a { font-size: 17px; font-weight: 700; }
.es-contactkaart span { display: block; font-size: 14px; color: var(--gedempt); margin-top: 6px; }
.es-kaartbeeld { border-radius: var(--straal); overflow: hidden; border: 1px solid var(--lijn); }
.es-kaartbeeld iframe { display: block; width: 100%; height: 380px; border: 0; }

/* 19. Vacatures ---------------------------------------------------------- */
.es-vacature { padding: 34px 36px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); margin-bottom: 24px; }
.es-vacature__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.es-vacature__kop h2 { margin: 0; font-size: 26px; }
.es-vacature__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.es-vacature__tags span { padding: 6px 12px; border-radius: 999px; background: var(--waas); color: var(--blauw-tekst); font-size: 13.5px; font-weight: 700; }
.es-vacature__kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 10px; }
.es-vacature h3 { font-size: 17px; margin: 0 0 10px; }
.es-vacature ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.es-vacature ul li { position: relative; padding-left: 26px; font-size: 15.5px; }
.es-vacature ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--blauw); }
.es-vacature .es-knop { margin-top: 8px; }

/* 20. Formulieren -------------------------------------------------------- */
.es-offerte, .es-contactform { max-width: 760px; }
.es-melding { display: flex; gap: 16px; padding: 22px 24px; margin-bottom: 32px; border-radius: var(--straal-klein); border-left: 3px solid; }
.es-melding svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.es-melding b { display: block; font-family: var(--kop); font-size: 18px; margin-bottom: 5px; }
.es-melding p { font-size: 15px; line-height: 1.6; margin: 0; }
.es-melding--goed { background: #EDF7F1; border-color: var(--goed); color: #1E5B39; }
.es-melding--goed b { color: #1E5B39; }
.es-melding--fout { background: #FDF2F2; border-color: var(--fout); color: #8E2B21; }
.es-melding--fout b { color: #8E2B21; }
.es-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.es-voortgang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0 0 40px; padding: 0; }
.es-form:not(.es-form--stappen) .es-voortgang { display: none; }
.es-voortgang li { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 3px solid var(--lijn); font-family: var(--kop); font-size: 13.5px; font-weight: 700; color: var(--gedempt); transition: color var(--soepel), border-color var(--soepel); }
.es-voortgang li span { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--lijn-zacht); font-size: 12.5px; color: var(--gedempt); }
.es-voortgang li.is-klaar { border-color: var(--blauw); color: var(--navy); }
.es-voortgang li.is-klaar span { background: var(--waas); color: var(--blauw-tekst); }
.es-voortgang li.is-nu { border-color: var(--blauw-tekst); color: var(--navy); }
.es-voortgang li.is-nu span { background: var(--blauw-tekst); color: var(--wit); }
.es-stapblok h2 { font-size: clamp(22px, 2vw, 27px); margin-bottom: 10px; }
.es-form__uitleg { font-size: 15.5px; color: var(--tekst); margin-bottom: 28px; }
.es-form:not(.es-form--stappen) .es-stapblok + .es-stapblok { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--lijn-zacht); }
.es-stapfout { padding: 12px 16px; margin-bottom: 20px; background: #FDF2F2; border-left: 3px solid var(--fout); border-radius: 0 6px 6px 0; font-size: 14.5px; color: #8E2B21; }
.es-groep { border: 0; padding: 0; margin: 0 0 28px; }
.es-groep legend { padding: 0 0 12px; font-family: var(--kop); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blauw-tekst); }
.es-keuzes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.es-keuzes--drie { grid-template-columns: repeat(3, 1fr); }
.es-keuze { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal-klein); cursor: pointer; transition: border-color var(--soepel), background var(--soepel), box-shadow var(--soepel); }
.es-keuze:hover { border-color: #BFD8EA; background: #FBFDFE; }
.es-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.es-keuze__vink { position: relative; width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; border: 1.5px solid var(--lijn); border-radius: 50%; background: var(--wit); transition: border-color var(--soepel), background var(--soepel); }
.es-keuze__vink::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--wit); transform: scale(0); transition: transform var(--soepel); }
.es-keuze input:checked ~ .es-keuze__vink { border-color: var(--blauw-tekst); background: var(--blauw-tekst); }
.es-keuze input:checked ~ .es-keuze__vink::after { transform: scale(1); }
.es-keuze:has(input:checked) { border-color: var(--blauw-tekst); background: var(--waas); box-shadow: inset 0 0 0 1px var(--blauw-tekst); }
.es-keuze input:focus-visible ~ .es-keuze__vink { outline: 2px solid var(--blauw); outline-offset: 3px; }
.es-keuze__tekst b { display: block; font-family: var(--kop); font-size: 15.5px; color: var(--navy); }
.es-keuze__tekst span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--gedempt); }
.es-veld { margin-bottom: 22px; }
.es-veld label { display: block; margin-bottom: 8px; font-family: var(--kop); font-size: 14.5px; font-weight: 700; color: var(--navy); }
.es-veld label span { font-family: var(--sans); font-weight: 400; color: var(--gedempt); font-size: 13px; }
.es-veld label .es-nodig { color: var(--blauw-tekst); font-size: 12px; font-weight: 600; }
.es-veld input, .es-veld textarea, .es-veld select { width: 100%; padding: 14px 16px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal-klein); font: inherit; font-size: 16px; color: var(--inkt); transition: border-color var(--soepel), box-shadow var(--soepel); -webkit-appearance: none; appearance: none; }
.es-veld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317354D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 44px; }
.es-veld input[type=file] { padding: 11px 14px; }
.es-veld textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.es-veld input:focus, .es-veld textarea:focus, .es-veld select:focus { outline: 0; border-color: var(--blauw-tekst); box-shadow: 0 0 0 3px rgba(45,127,179,.16); }
.es-veld ::placeholder { color: #9AA6AF; }
.es-veld--paar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.es-veld--paar > div { margin: 0; }
.es-samenvatting { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); margin: 0 0 28px; border: 1px solid var(--lijn); border-radius: var(--straal-klein); overflow: hidden; }
.es-samenvatting dt, .es-samenvatting dd { margin: 0; padding: 13px 18px; font-size: 14.5px; border-top: 1px solid var(--lijn-zacht); }
.es-samenvatting dt:first-of-type, .es-samenvatting dt:first-of-type + dd { border-top: 0; }
.es-samenvatting dt { background: var(--vlak); font-weight: 700; color: var(--navy); }
.es-samenvatting dd { color: var(--tekst); word-break: break-word; }
.es-akkoord { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; background: var(--vlak); border-radius: var(--straal-klein); cursor: pointer; font-size: 14.5px; line-height: 1.6; color: var(--tekst); }
.es-akkoord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.es-akkoord .es-keuze__vink { border-radius: 5px; }
.es-akkoord input:checked ~ .es-keuze__vink { border-color: var(--blauw-tekst); background: var(--blauw-tekst); }
.es-akkoord input:checked ~ .es-keuze__vink::after { inset: 0; background: none; border-radius: 0; border-left: 2px solid #fff; border-bottom: 2px solid #fff; width: 11px; height: 6px; margin: 5px 0 0 4px; transform: rotate(-45deg) scale(1); }
.es-akkoord input:focus-visible ~ .es-keuze__vink { outline: 2px solid var(--blauw); outline-offset: 3px; }
.es-form__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--lijn-zacht); }
.es-form__voet .es-knop { padding: 16px 28px; }
.es-form__gerust { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: var(--gedempt); }
.es-vorige { margin-right: auto; order: -1; }
.es-form--kort .es-akkoord { margin-top: 6px; }

/* 21. Cookiebanner ------------------------------------------------------- */
.es-cc { position: fixed; z-index: 90; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: center; pointer-events: none; }
.es-cc__vak { pointer-events: auto; width: min(100%, 640px); padding: 26px 28px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw); }
.es-cc__titel { font-size: 19px; margin-bottom: 8px; }
.es-cc__tekst { font-size: 14.5px; margin-bottom: 18px; }
.es-cc__opties { display: grid; gap: 10px; margin-bottom: 18px; font-size: 14px; }
.es-cc__optie { display: flex; gap: 10px; align-items: flex-start; }
.es-cc__knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.es-cc__meer { background: none; border: 0; padding: 8px 4px; font-size: 14px; color: var(--blauw-tekst); text-decoration: underline; cursor: pointer; }

/* 22. Footer ------------------------------------------------------------- */
.es-voet { background: var(--navy-diep); color: rgba(255,255,255,.72); padding: 72px 0 28px; }
.es-voet a { color: rgba(255,255,255,.8); }
.es-voet a:hover { color: var(--wit); }
.es-voet__boven { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--navy-lijn); }
.es-voet__logo { display: block; width: 210px; height: auto; margin: 0 0 22px; }
.es-voet__merk p { font-size: 15px; max-width: 34ch; margin-bottom: 20px; }
.es-voet__social { display: flex; gap: 10px; margin-bottom: 26px; }
.es-voet__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--navy-lijn); transition: background var(--soepel); }
.es-voet__social a:hover { background: rgba(80,164,215,.2); }
.es-voet__keur { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px; }
.es-voet__keur > * { display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--navy-lijn); border-radius: 10px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.6); }
.es-voet__keur b { font-family: var(--kop); font-size: 14px; color: var(--wit); }
.es-voet__kolom > b { display: block; font-family: var(--kop); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wit); margin-bottom: 18px; }
.es-voet__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.es-voet__contact li { display: flex; gap: 12px; align-items: flex-start; }
.es-voet__contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--blauw); }
.es-voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 13.5px; color: rgba(255,255,255,.5); }
.es-voet__onder nav { display: flex; flex-wrap: wrap; gap: 18px; }

/* 23. Overig ------------------------------------------------------------- */
/* Kernklassen die WordPress zelf verwacht (de blokbibliotheek-CSS staat uit). */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.alignwide, .alignfull { max-width: none; }
.wp-block-image img, .es-bericht img { max-width: 100%; height: auto; border-radius: var(--straal); }
.es-bericht p, .es-bericht li { font-size: 17px; line-height: 1.7; }
.es-404 { padding: 110px var(--goot) 120px; text-align: center; }
.es-404 h1 { margin: 16px auto 14px; max-width: 18ch; }
.es-404 p { max-width: 50ch; margin: 0 auto 28px; }
.es-404 .es-knoppen { justify-content: center; }
.es-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.es-lid { text-align: left; }
.es-lid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--straal); margin-bottom: 14px; }
.es-lid b { display: block; font-family: var(--kop); font-size: 18px; color: var(--navy); }
.es-lid span { font-size: 14.5px; color: var(--gedempt); }
.es-logos { display: flex; flex-wrap: wrap; gap: 14px; }
.es-logos span { padding: 12px 18px; border: 1px solid var(--lijn); border-radius: 10px; font-family: var(--kop); font-weight: 700; color: var(--navy); font-size: 15px; background: var(--wit); }

/* 23b. Ruimte voor de doorschijnende bovenbalk ----------------------------- */
/* De eerste sectie schuift onder de balk; de tekst krijgt de ruimte terug, de foto loopt door. */
.es-hero--licht .es-hero__tekst { padding-top: calc(56px + var(--kop-hoogte)); }
.es-hero--licht .es-hero__raster, .es-hero--licht .es-hero__beeld { min-height: calc(560px + var(--kop-hoogte)); }

/* 24. Mobiel en tablet --------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1180px) {
	.es-paginakop__raster { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 36px; min-height: 340px; }
	.es-paginakop__beeld { min-height: 340px; }
	.es-paginakop h1 { font-size: clamp(30px, 3.4vw, 42px); }
	.es-hero--licht .es-hero__raster { min-height: calc(500px + var(--kop-hoogte)); grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 36px; }
	.es-hero--licht .es-hero__beeld { min-height: calc(500px + var(--kop-hoogte)); }
	.es-hero--licht h1 { font-size: clamp(32px, 3.6vw, 44px); }
	.es-hero__kaart { left: -20px; bottom: 28px; width: min(300px, calc(100% - 20px)); padding: 18px 20px; }
}
@media (max-width: 1100px) {
	.es-diensten { grid-template-columns: repeat(3, 1fr); }
	.es-pijlers { grid-template-columns: 1fr 1fr; }
	.es-pijler:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.es-tweekolom { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
	.es-voet__boven { grid-template-columns: 1fr 1fr 1fr; }
	.es-voet__merk { grid-column: 1 / -1; }
	.es-stappen { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
	.es-cijfers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.es-sectie { padding: 64px 0; }
	.es-hero__raster { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 44px 56px; min-height: 0; }
	.es-hero h1 { max-width: none; }
	.es-hero__beeld::before { display: none; }
	.es-hero__badge { left: 16px; bottom: 16px; }
	.es-usps__lijst { grid-template-columns: 1fr 1fr; }
	.es-usps__lijst li { padding: 16px 16px 16px 0; font-size: 14px; }
	.es-usps__lijst li + li { border-left: 0; padding-left: 0; }
	.es-usps__lijst li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--lijn-zacht); }
	.es-kopblok { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
	.es-kopblok--midden { align-items: center; }
	.es-diensten, .es-diensten--3 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.es-pijlers, .es-reviews, .es-kaarten--drie, .es-team, .es-contactblok { grid-template-columns: 1fr 1fr; }
	.es-split, .es-split--omgekeerd { grid-template-columns: 1fr; gap: 32px; }
	.es-split--omgekeerd > :first-child { order: 0; }
	.es-split__beeld--kader::after { display: none; }
	.es-band { grid-template-columns: 1fr; }
	.es-band__tekst { padding: 40px 32px; }
	.es-band__beeld { min-height: 240px; order: -1; }
	.es-band__beeld img { -webkit-mask-image: none; mask-image: none; }
	.es-paginakop__raster { grid-template-columns: 1fr; gap: 0; min-height: 0; }
	.es-paginakop__tekst { padding: 30px 0 34px; }
	.es-paginakop__beeld { min-height: 0; aspect-ratio: 3 / 2; margin-inline: calc(var(--goot) * -1); }
	.es-paginakop__beeld img { border-radius: 0; }
	.es-tweekolom, .es-tweekolom--gelijk { grid-template-columns: 1fr; gap: 40px; }
	.es-tegels--drie { grid-template-columns: 1fr 1fr; }
	.es-zijkaart { position: static; }
	.es-vacature__kolommen { grid-template-columns: 1fr; gap: 12px; }
	.es-sitemap { columns: 2; }
	.es-voet__boven { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
	:root { --goot: 20px; }
	body { font-size: 16px; }
	.es-sectie { padding: 52px 0; }
	.es-diensten, .es-diensten--3, .es-pijlers, .es-reviews, .es-kaarten--drie, .es-kaarten--twee, .es-team, .es-contactblok, .es-tegels, .es-tegels--drie, .es-stappen, .es-keuzes, .es-keuzes--drie, .es-keuzes--twee, .es-veld--paar, .es-cijfers { grid-template-columns: 1fr; }
	.es-pijler:last-child:nth-child(odd) { grid-column: auto; }
	.es-usps__lijst { grid-template-columns: 1fr; }
	.es-usps__lijst li, .es-usps__lijst li:nth-child(even) { padding: 12px 0; border-left: 0; border-top: 1px solid var(--lijn-zacht); }
	.es-usps__lijst li:first-child { border-top: 0; }
	.es-hero__lead { font-size: 17px; }
	.es-hero__badge { position: static; margin-top: 16px; }
	.es-knoppen .es-knop { flex: 1 1 auto; }
	.es-voortgang { gap: 6px; }
	.es-voortgang li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 11.5px; padding-top: 11px; }
	.es-samenvatting { grid-template-columns: 1fr; }
	.es-samenvatting dt { padding-bottom: 0; background: none; }
	.es-samenvatting dt + dd { border-top: 0; padding-top: 4px; }
	.es-form__voet .es-knop { flex: 1 1 auto; }
	.es-vorige { order: 0; margin-right: 0; }
	.es-voet__boven { grid-template-columns: 1fr; }
	.es-voet__keur { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.es-sitemap { columns: 1; }
	.es-vacature { padding: 26px 22px; }
	.es-band__tekst { padding: 32px 24px; }
	.es-cc { left: 12px; right: 12px; bottom: 12px; }
}