/* ==========================================================================
   InspectieProfs — hoofdstijlblad
   Kleuren, typografie en componenten volgen het homepageconcept v1.
   ========================================================================== */

/* ---------- Lettertypen (lokaal gehost) ---------- */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-ext-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--navy: #1C3055;
	--deep: #0E1A30;
	--deep2: #13223F;
	--ink: #16223A;
	--text: #3D414A;
	--muted: #5E6068;
	--gray: #878786;
	--line: #D6D1C7;
	--line2: #E4E0D8;
	--paper: #FFFFFF;
	--ground: #F4F2EE;
	--accent: #B8410F;
	--accent-hover: #93330B;
	--accent-on-dark: #F08A55;
	--on-dark: #C9D0DC;
	--on-dark2: #A9B3C6;
	--error: #B42318;
	--font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--gutter: 64px;
	--hdr-h: 88px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--accent-on-dark); }
main:focus { outline: none; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 640; letter-spacing: -0.022em; line-height: 1.08; }
p { margin: 0; }
ul, ol { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip {
	position: absolute; left: 16px; top: -100px; z-index: 200;
	background: var(--navy); color: #fff !important;
	padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; line-height: 1.5; }
.eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--mono); font-size: 13px; font-weight: 500;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--navy); margin: 0 0 24px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.on-dark .eyebrow { color: var(--on-dark2); }
.duo { color: var(--gray); }
.on-dark .duo { color: var(--on-dark2); }
.lead { font-size: 19px; line-height: 1.6; color: var(--text); max-width: 34em; }
.ip-hint { margin: 16px 0; padding: 12px 16px; border: 1.5px dashed var(--accent); color: var(--accent); font-family: var(--mono); font-size: 13px; background: rgba(184, 65, 15, .05); }

/* ---------- Knoppen en links ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 52px; padding: 0 26px;
	font: inherit; font-weight: 600; font-size: 16px; letter-spacing: .005em;
	text-decoration: none; white-space: nowrap;
	border: 1.5px solid transparent; border-radius: 2px; cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .18s ease; }
.btn:hover svg.arr { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-light { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.btn-light:hover { background: #fff; color: var(--navy); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.tlink {
	display: inline-flex; align-items: center; gap: 10px;
	font-weight: 600; text-decoration: none;
	border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.tlink svg { width: 16px; height: 16px; transition: transform .18s ease; }
.tlink:hover svg { transform: translateX(3px); }
.on-dark a { color: #fff; }
.on-dark a:hover { color: var(--accent-on-dark); }
.on-dark a.btn-primary, .on-dark a.btn-primary:hover { color: #fff; }
.on-dark a.btn-light:hover { color: var(--navy); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--ground); border-bottom: 1px solid var(--line); }
.admin-bar .hdr { top: 32px; }
.hdr-in { display: flex; align-items: center; gap: 28px; height: var(--hdr-h); }
.logo { display: block; flex: none; line-height: 0; }
.logo img { height: 58px; width: auto; }
.nav-wrap { margin-left: auto; }
.nav { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.nav a, .nav button {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 0 14px;
	font-size: 16px; font-weight: 520; color: var(--ink);
	text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav a::after, .nav button::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
	background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a:hover::after, .nav button:hover::after, .nav .is-current::after, .nav button[aria-expanded="true"]::after { transform: scaleX(1); }
.nav a:hover { color: var(--ink); }
.nav svg { width: 14px; height: 14px; transition: transform .2s ease; }
.nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr-actions { display: flex; align-items: center; gap: 20px; }
.hdr-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--mono); font-size: 14px; color: var(--ink); text-decoration: none; }
.hdr-tel svg { width: 16px; height: 16px; }
.menu-btn {
	display: none; align-items: center; min-height: 44px; padding: 0 14px;
	font-weight: 600; font-size: 15px; color: var(--navy);
	background: transparent; border: 1.5px solid var(--navy); border-radius: 2px; cursor: pointer;
}
.menu-btn > span { display: inline-flex; align-items: center; gap: 10px; }
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn .menu-btn-close { display: none; }
.menu-btn[aria-expanded="true"] { background: var(--navy); color: #fff; }
.menu-btn[aria-expanded="true"] .menu-btn-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn-close { display: inline-flex; }

/* Megamenu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 28px 40px -28px rgba(14, 26, 48, .35); }
.mega-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 56px; padding-block: 44px 48px; }
.mega-title { font-size: 28px; font-weight: 640; letter-spacing: -0.022em; line-height: 1.1; color: var(--ink); margin-bottom: 20px; }
.mega-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.mega-list a { display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 8px; min-height: 52px; border-top: 1px solid var(--line2); text-decoration: none; color: var(--ink); font-weight: 540; }
.mega-list a:hover { color: var(--accent); }
.mega-list .mono { color: var(--muted); }
.mega-list svg { width: 16px; height: 16px; opacity: 0; transition: opacity .15s, transform .15s; }
.mega-list a:hover svg, .mega-list a:focus-visible svg { opacity: 1; transform: translateX(2px); }
.mega-help { background: var(--navy); color: var(--on-dark); padding: 28px; }
.mega-help p { margin-bottom: 20px; }
.mega-help .mega-help-title { color: #fff; font-size: 20px; line-height: 1.25; font-weight: 620; margin-bottom: 10px; }

/* Mobiel menu */
.mpanel { border-top: 1px solid var(--line); background: var(--paper); padding: 8px 0 28px; max-height: calc(100vh - 72px); overflow-y: auto; }
.mlist { list-style: none; padding: 0; }
.mlist > li { border-bottom: 1px solid var(--line2); }
.mlist > li > a, .mlist > li > button {
	display: flex; justify-content: space-between; align-items: center; width: 100%;
	min-height: 60px; padding: 0; font-size: 21px; font-weight: 600; color: var(--ink);
	text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.mlist > li > button svg { width: 20px; height: 20px; }
.mlist .ico-min { display: none; }
.mlist button[aria-expanded="true"] { color: var(--navy); }
.mlist button[aria-expanded="true"] .ico-plus { display: none; }
.mlist button[aria-expanded="true"] .ico-min { display: inline; }
.mlist ul { list-style: none; padding: 0; margin: 0 0 12px; }
.mlist ul a { display: flex; gap: 14px; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-size: 17px; }
.mlist ul .mono { color: var(--muted); width: 22px; }
.mlist ul .m-all { font-weight: 600; color: var(--navy); padding-left: 36px; text-decoration: underline; text-underline-offset: 4px; }
.m-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

/* ---------- Inhoudskolom (tekstblokken) ---------- */
.entry > :not(.ipb) { max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.entry > :not(.ipb):first-child { margin-top: 72px; }
.entry > :not(.ipb):last-child { margin-bottom: 96px; }
.entry-col > :not(.ipb) { max-width: none; padding-inline: 0; margin-inline: 0; }
.entry-col > :not(.ipb):first-child { margin-top: 0; }
.entry-col > :not(.ipb):last-child { margin-bottom: 0; }
.entry > h2 { font-size: clamp(28px, 2.6vw, 36px); margin-top: 56px; margin-bottom: 18px; }
.entry > h3 { font-size: 22px; font-weight: 620; margin-top: 36px; margin-bottom: 12px; line-height: 1.25; }
.entry > h4 { font-size: 18px; font-weight: 620; margin-top: 28px; margin-bottom: 8px; }
.entry > p, .entry > ul, .entry > ol { margin-bottom: 20px; }
.entry > ul:not(.ipb), .entry > ol:not(.ipb) { padding-left: calc(var(--gutter) + 1.3em); }
.entry-col > ul:not(.ipb), .entry-col > ol:not(.ipb) { padding-left: 1.3em; }
.entry > ul li, .entry > ol li { margin-bottom: 6px; }
.entry > ul li::marker { color: var(--accent); }
.entry > ol li::marker { font-family: var(--mono); color: var(--navy); }
.entry > p a, .entry > ul a, .entry > ol a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.entry > blockquote { margin-block: 32px; border-left: 0; position: relative; font-size: 21px; line-height: 1.5; color: var(--ink); }
.entry > blockquote::before { content: ""; position: absolute; left: var(--gutter); top: 6px; bottom: 6px; width: 2px; background: var(--accent); }
.entry > blockquote > * { padding-left: 28px; }
.entry-col > blockquote > * { padding-left: 28px; }
.entry-col > blockquote::before { left: 0; }
.entry > blockquote cite { display: block; margin-top: 12px; font-family: var(--mono); font-size: 13px; font-style: normal; color: var(--muted); }
.entry > figure { margin-block: 32px; }
.entry > figure figcaption { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.entry > .wp-block-table { overflow-x: auto; margin-block: 32px; }
.entry > .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.entry > .wp-block-table th, .entry > .wp-block-table td { text-align: left; padding: 12px 14px 12px 0; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.entry > .wp-block-table th { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--navy); }
.entry > hr, .entry > .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin-block: 48px; opacity: 1; }
.entry-home > :not(.ipb):first-child { margin-top: 0; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); border-bottom: 1px solid var(--line); background: var(--ground); }
.hero-copy { padding: 84px 64px 72px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font-size: clamp(40px, 4.9vw, 72px); line-height: 1.02; letter-spacing: -0.032em; font-weight: 660; margin-bottom: 28px; max-width: 11.5em; }
.hero .lead { margin-bottom: 36px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-proof { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; color: var(--muted); font-size: 15px; }
.hero-proof .mono { color: var(--navy); }
.hero-proof a { font-weight: 600; margin-left: 4px; }

.hero-visual { position: relative; background: var(--deep2); display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 560px; }
.hv-frame { position: relative; width: 100%; aspect-ratio: 800 / 680; container-type: inline-size; }
.hv-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-visual.has-lens { cursor: crosshair; }
.hv-heat {
	--r: 15cqi;
	clip-path: circle(var(--r) at var(--lx, 38%) var(--ly, 48%));
	pointer-events: none;
}
.hv-ring {
	position: absolute; left: var(--lx, 38%); top: var(--ly, 48%);
	width: 30cqi; height: 30cqi; transform: translate(-50%, -50%);
	border: 3px solid #fff; border-radius: 50%; pointer-events: none;
}
.hv-ring::after {
	content: ""; position: absolute; width: 8cqi; height: 1.7cqi; min-height: 10px;
	background: #fff; border-radius: 99px;
	left: 85.4%; top: 85.4%; transform-origin: 0 50%; transform: rotate(45deg);
}
.hv-ring::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%);
	background: linear-gradient(#fff, #fff) center / 1.2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1.2px no-repeat;
}
.hv-ring-label {
	position: absolute; left: 92%; top: 2%; white-space: nowrap;
	font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-on-dark);
}
.hv-ann { list-style: none; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.hv-ann li { position: absolute; left: var(--x); top: var(--y); }
.hv-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-on-dark); }
.hv-txt {
	position: absolute; top: -12px; left: 48px; white-space: nowrap;
	padding: 3px 8px; background: rgba(19, 34, 63, .82);
	font-family: var(--mono); font-size: 12px; color: var(--on-dark); line-height: 1.45;
}
.hv-txt::before { content: ""; position: absolute; right: 100%; top: 12px; width: 44px; height: 1px; background: var(--accent-on-dark); }
.hv-txt b { color: var(--accent-on-dark); font-weight: 500; margin-right: 4px; }
.hv-txt small { display: block; color: #8E9AB2; font-size: 11px; }
.hv-ann li.is-links .hv-txt { left: auto; right: 48px; text-align: right; }
.hv-ann li.is-links .hv-txt::before { right: auto; left: 100%; }

/* ---------- Dienstenstrook ---------- */
.strip { background: var(--paper); border-bottom: 1px solid var(--line); }
.strip-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.strip-lbl { flex: none; color: var(--muted); }
.strip-list { display: flex; list-style: none; padding: 0; overflow-x: auto; scrollbar-width: thin; flex: 1; min-width: 0; }
.strip-list li { flex: none; }
.strip-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-left: 1px solid var(--line2); text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 520; white-space: nowrap; }
.strip-list li:first-child a { border-left: 0; padding-left: 0; }
.strip-list a:hover { color: var(--accent); }

/* ---------- Secties ---------- */
.sec { padding-block: 128px; }
.sec-tight { padding-block: 72px 112px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); align-items: end; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(34px, 3.6vw, 52px); }
.sec-head .side { grid-column: 3; }
.sec-head .side p { margin-bottom: 20px; max-width: 36em; }

/* ---------- Dienstenindex ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.filters .flbl { margin-right: 8px; color: var(--muted); }
.chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
	font-size: 15px; font-weight: 540; color: var(--ink); text-decoration: none;
	background: transparent; border: 1.5px solid var(--line); border-radius: 2px; cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--navy); color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.fcount { color: var(--muted); margin: 14px 0 22px; min-height: 20px; }
.svc-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-bottom: 1px solid var(--line); }
.svc-grid li { border-top: 1px solid var(--line); }
.svc {
	display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto; gap: 18px; align-items: center;
	padding: 26px 16px 26px 4px; height: 100%;
	text-decoration: none; color: var(--text);
	transition: background-color .18s ease, opacity .2s ease;
}
.svc:hover { background: var(--paper); color: var(--text); }
.svc-nr { color: var(--muted); transition: color .18s; }
.svc-ic { width: 36px; height: 36px; color: var(--navy); }
.svc-title { font-size: 20px; font-weight: 620; letter-spacing: -0.012em; margin-bottom: 4px; line-height: 1.25; transition: color .18s; }
.svc-desc { font-size: 15px; line-height: 1.5; color: var(--muted); }
.svc-meta { display: flex; align-items: center; gap: 16px; }
.svc-param { color: var(--navy); border: 1px solid var(--line); padding: 3px 8px; white-space: nowrap; }
.svc-arr { width: 20px; height: 20px; color: var(--navy); transition: transform .18s ease, color .18s; }
.svc:hover .svc-arr { transform: translateX(4px); color: var(--accent); }
.svc:hover .svc-title { color: var(--navy); }
.svc.is-dim { opacity: .34; }
.svc.is-dim:hover, .svc.is-dim:focus-visible { opacity: 1; }
.svc.is-match { background: var(--paper); }
.svc.is-match .svc-nr { color: var(--accent); font-weight: 500; }
.svc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 40px; }
.svc-foot p { font-size: 18px; color: var(--ink); max-width: 36em; }

/* ---------- Expertise ---------- */
.exp { background: var(--deep); color: var(--on-dark); }
.exp h2 { color: #fff; font-size: clamp(34px, 3.6vw, 52px); }
.exp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr); align-items: start; }
.exp-grid > .person { grid-column: 3; }
.exp-intro { font-size: 19px; line-height: 1.6; margin: 28px 0 64px; max-width: 34em; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; }
.principles li { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px; }
.principles .mono { color: var(--accent-on-dark); }
.principles h3 { color: #fff; font-size: 20px; font-weight: 600; margin: 14px 0 10px; line-height: 1.25; }
.principles p { font-size: 16px; line-height: 1.55; }
.person figure { margin: 0; }
.portrait { position: relative; aspect-ratio: 4 / 5; background: #1A2B4D; border: 1px solid rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.portrait img, .portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait span { position: relative; font-family: var(--mono); font-size: 13px; color: var(--on-dark2); text-align: center; padding: 0 24px; }
.person figcaption { padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.person figcaption strong { display: block; color: #fff; font-size: 19px; font-weight: 600; }
.person figcaption span { color: var(--on-dark2); font-size: 15px; }
.person-link { margin-top: 28px; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); flex: none; }
.icon-link svg { width: 18px; height: 18px; }

/* ---------- Certificering ---------- */
.cert { background: var(--paper); border-bottom: 1px solid var(--line); }
.cert-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 7fr); align-items: start; }
.cert-grid > .cert-plates { grid-column: 3; }
.cert h2 { font-size: clamp(32px, 3.2vw, 46px); margin-bottom: 24px; }
.cert-copy p { margin-bottom: 28px; max-width: 30em; }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plate { border: 1.5px solid var(--navy); display: flex; flex-direction: column; background: var(--paper); }
.plate-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--navy); color: #fff; padding: 14px 20px; }
.plate-body { padding: 26px 20px 8px; }
.plate-body h3 { font-size: 30px; margin: 6px 0 22px; }
.plate-body .kicker { color: var(--muted); }
.plate dl { margin: 0; display: grid; grid-template-columns: 118px 1fr; }
.plate dt, .plate dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line2); font-size: 15px; }
.plate dt { color: var(--muted); font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; padding-top: 14px; }
.plate dd { color: var(--ink); font-weight: 520; }
.plate-link { margin: auto 20px 20px; padding-top: 18px; }
.plate-link .btn { width: 100%; justify-content: space-between; }
.cert-inline { border-top: 1px solid var(--line); }

/* ---------- Werkwijze ---------- */
.ruler {
	height: 22px; margin-bottom: 28px; border-bottom: 1.5px solid var(--navy);
	background-image: repeating-linear-gradient(90deg, var(--navy) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, var(--navy) 0 1.5px, transparent 1.5px 80px);
	background-size: 100% 7px, 100% 14px; background-position: left bottom, left bottom; background-repeat: no-repeat;
}
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); }
.steps li { padding-right: 36px; }
.snr {
	display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
	border: 1.5px solid var(--navy); border-radius: 50%; background: var(--ground);
	font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--navy); margin-bottom: 26px;
}
.steps li:last-child .snr { background: var(--navy); color: #fff; }
.steps h3 { font-size: 22px; margin-bottom: 12px; font-weight: 620; line-height: 1.2; }
.steps p { font-size: 16px; color: var(--muted); line-height: 1.55; }
.steps-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.steps-cta p { color: var(--muted); }

/* ---------- Kennis ---------- */
.kb { border-top: 1px solid var(--line); }
.kb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; }
.kb-grid-list { row-gap: 64px; }
.kb-card { display: flex; flex-direction: column; gap: 16px; position: relative; }
.kb-img { position: relative; aspect-ratio: 16 / 10; background: #E8E4DC; overflow: hidden; border: 1px solid var(--line); }
.kb-img img, .kb-img svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kb-card:hover .kb-img img, .kb-card:hover .kb-img svg { transform: scale(1.03); }
.kb-cat { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.kb-cat b { color: var(--navy); font-weight: 500; }
.kb-title { font-size: 23px; line-height: 1.22; font-weight: 620; }
.kb-title a { text-decoration: none; color: var(--ink); }
.kb-title a::after { content: ""; position: absolute; inset: 0; }
.kb-title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.kb-excerpt { font-size: 16px; color: var(--muted); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1px solid var(--line); }
.c-left { background: var(--navy); color: var(--on-dark); padding: 112px 72px 96px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
.c-left h2 { color: #fff; font-size: clamp(36px, 3.8vw, 56px); margin-bottom: 24px; }
.c-intro { font-size: 19px; max-width: 26em; margin-bottom: 48px; }
.c-list { list-style: none; padding: 0; margin: 0 0 44px; }
.c-list li { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .18); align-items: baseline; }
.c-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.c-list .mono { color: var(--on-dark2); }
.c-list a, .c-list .v { color: #fff; font-size: 18px; font-weight: 540; text-decoration: none; overflow-wrap: anywhere; }
.c-list a:hover { text-decoration: underline; text-underline-offset: 4px; color: #fff; }
.c-right { background: var(--paper); padding: 112px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))) 96px 72px; }
.form-title { font-size: 28px; margin-bottom: 8px; }
.c-right .sub { color: var(--muted); margin-bottom: 32px; }

/* Formulier */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld.full { grid-column: 1 / -1; }
.fld label { font-weight: 600; font-size: 15px; color: var(--ink); }
.fld label .opt { font-weight: 400; color: var(--muted); }
.fld input, .fld select, .fld textarea, .form-plugin input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .form-plugin select, .form-plugin textarea {
	font: inherit; font-size: 16px; color: var(--ink); background: #fff;
	border: 1.5px solid #8C8F96; border-radius: 2px; padding: 12px 14px; min-height: 50px; width: 100%;
}
.fld textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--navy); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--navy); }
.fld [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.ferr { display: flex; gap: 8px; align-items: flex-start; color: var(--error); font-size: 14.5px; font-weight: 540; }
.ferr svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.hint { color: var(--muted); font-size: 14px; }
.err-sum { grid-column: 1 / -1; border: 2px solid var(--error); background: #FEF3F2; padding: 18px 20px; outline: none; }
.err-sum strong { display: block; color: #7A1A12; margin-bottom: 6px; }
.err-sum ul { padding-left: 18px; }
.err-sum a { color: var(--error); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.form-foot p { font-size: 14px; color: var(--muted); max-width: 30em; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ok { border: 1.5px solid var(--navy); padding: 32px; background: var(--ground); outline: none; }
.ok h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: 10px; }
.ok h3 svg { width: 24px; height: 24px; color: var(--accent); }
.form-plugin .gform_button, .form-plugin button[type="submit"], .form-plugin input[type="submit"] {
	display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; font: inherit; font-weight: 600;
	background: var(--accent); color: #fff; border: 0; border-radius: 2px; cursor: pointer;
}

/* ---------- Call-to-action ---------- */
.cta { background: var(--navy); color: var(--on-dark); }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-block: 72px; }
.cta h2 { color: #fff; font-size: clamp(28px, 2.8vw, 40px); margin-bottom: 10px; }
.cta p { max-width: 38em; font-size: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.entry .cta { margin-block: 56px; }

/* ---------- Paginakop en kruimelpad ---------- */
.pkop { border-bottom: 1px solid var(--line); padding-block: 40px 72px; }
.pkop-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr); align-items: end; margin-top: 48px; }
.pkop-side { grid-column: 3; }
.pkop h1 { font-size: clamp(38px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 660; }
.pkop .lead { margin-bottom: 0; }
.pkop .cta-row { margin-top: 28px; }
.pkop-meta { color: var(--muted); margin-bottom: 14px; }
.pkop-meta b { color: var(--navy); font-weight: 500; }
.crumbs ol, .crumbs p { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.art-img { margin-block: 56px 0; }
.art-img img { width: 100%; }

/* ---------- Dienstpagina ---------- */
.dhero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.dhero-copy { padding: 40px 64px 72px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
.dhero-copy .crumbs { margin-bottom: 56px; }
.dhero h1, .pkop h1 { hyphens: auto; overflow-wrap: break-word; }
.dhero h1 { font-size: clamp(38px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 660; margin-bottom: 24px; }
.dhero .lead { margin-bottom: 32px; }
.dhero-visual { position: relative; background: var(--deep2); min-height: 420px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dhero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dhero-icon { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; color: #fff; }
.dhero-icon svg { width: 120px; height: 120px; stroke-width: 1; }
.dhero-ring { position: absolute; inset: 0; border: 3px solid rgba(255, 255, 255, .85); border-radius: 50%; }
.dhero-ring::after { content: ""; position: absolute; left: 85.4%; top: 85.4%; width: 64px; height: 13px; background: rgba(255, 255, 255, .85); border-radius: 99px; transform-origin: 0 50%; transform: rotate(45deg); }
.dhero-param { position: absolute; left: 24px; bottom: 20px; color: var(--accent-on-dark); background: rgba(19, 34, 63, .85); padding: 4px 10px; }
.dbody { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr); padding-block: 88px 112px; align-items: start; }
.dbody > .daside { grid-column: 3; display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--hdr-h) + 24px); }
.dbody .entry-col > h2:first-child { margin-top: 0; }
.dbox { border: 1px solid var(--line); background: var(--paper); padding: 24px; }
.dbox-title { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin-bottom: 14px; }
.dbox dl { margin: 0; }
.dbox dt { font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line2); }
.dbox dt:first-child { border-top: 0; padding-top: 0; }
.dbox dd { margin: 2px 0 12px; color: var(--ink); font-weight: 520; }
.dbox-contact { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.dbox-contact .dbox-title { color: var(--on-dark2); }
.dbox-contact p { margin-bottom: 14px; }
.dbox-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0 !important; }
.dbox-links a { display: inline-flex; gap: 10px; align-items: center; min-height: 36px; font-weight: 560; text-decoration: none; overflow-wrap: anywhere; }
.dbox-links svg { width: 18px; height: 18px; flex: none; }
.drel { list-style: none; padding: 0; }
.drel a { display: grid; grid-template-columns: 30px 1fr 16px; gap: 8px; align-items: center; min-height: 48px; border-top: 1px solid var(--line2); color: var(--ink); text-decoration: none; font-weight: 540; font-size: 15.5px; }
.drel li:first-child a { border-top: 0; }
.drel .mono { color: var(--muted); }
.drel svg { width: 16px; height: 16px; color: var(--navy); }
.drel a:hover { color: var(--accent); }

/* ---------- Lijsten en paginering ---------- */
.link-list { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; border-top: 1px solid var(--line); text-decoration: none; font-size: 20px; font-weight: 600; color: var(--ink); }
.link-list svg { width: 20px; height: 20px; color: var(--navy); transition: transform .18s; }
.link-list a:hover { color: var(--navy); }
.link-list a:hover svg { transform: translateX(4px); color: var(--accent); }
.pagination { margin-top: 64px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); font-family: var(--mono); font-size: 14px; }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--navy); }
.empty { color: var(--muted); }
.nf-home { margin-top: 40px; }

/* ---------- Footer ---------- */
.ftr { background: var(--deep); color: var(--on-dark); padding: 88px 0 32px; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2.4fr); gap: 40px; }
.ftr-brand img { height: 64px; width: auto; margin-bottom: 24px; }
.ftr-brand .icon-link { margin-top: 20px; }
.ftr h2 { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark2); font-weight: 500; margin-bottom: 18px; }
.ftr ul { list-style: none; padding: 0; }
.ftr-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.ftr li a { display: inline-flex; min-height: 34px; align-items: center; color: var(--on-dark); text-decoration: none; font-size: 15.5px; }
.ftr li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ftr address { font-style: normal; font-size: 15.5px; line-height: 1.8; }
.ftr address a { color: #fff; text-decoration: none; }
.ftr address a:hover { text-decoration: underline; color: #fff; }
.ftr-bot { margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 14px; color: var(--on-dark2); }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ftr-legal li a { min-height: 24px; font-size: 14px; }

/* Mobiele actiebalk */
.mbar { display: none; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1100px) {
	:root { --gutter: 32px; }
	.nav-wrap, .hdr-tel { display: none; }
	.menu-btn { display: inline-flex; }
	.hdr-actions { margin-left: auto; gap: 12px; }
	.mega { display: none !important; }
	.hero { grid-template-columns: 1fr; }
	.hero-copy { padding: 64px var(--gutter) 56px; }
	.hero-visual { min-height: 0; }
	.sec { padding-block: 96px; }
	.sec-head, .pkop-in { grid-template-columns: 1fr; gap: 20px; }
	.sec-head .side, .pkop-side { grid-column: 1; }
	.svc-grid { grid-template-columns: 1fr; }
	.exp-grid { grid-template-columns: 1fr; gap: 56px; }
	.exp-grid > .person { grid-column: 1; max-width: 420px; }
	.cert-grid { grid-template-columns: 1fr; gap: 40px; }
	.cert-grid > .cert-plates { grid-column: 1; }
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
	.ruler { display: none; }
	.kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact { grid-template-columns: 1fr; }
	.c-left, .c-right { padding: 80px var(--gutter); }
	.dhero { grid-template-columns: 1fr; }
	.dhero-copy { padding: 32px var(--gutter) 56px; }
	.dhero-visual { min-height: 320px; }
	.dbody { grid-template-columns: 1fr; gap: 48px; padding-block: 64px 88px; }
	.dbody > .daside { grid-column: 1; position: static; }
	.ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.admin-bar .hdr { top: 46px; }
}

/* ==========================================================================
   Telefoon
   ========================================================================== */
@media (max-width: 680px) {
	:root { --gutter: 20px; --hdr-h: 72px; }
	body { font-size: 16px; padding-bottom: 76px; }
	.hdr-in { gap: 12px; }
	.logo img { height: 46px; }
	.hdr-cta { display: none; }
	.hero-copy { padding: 44px var(--gutter) 40px; }
	.hero h1 { font-size: 40px; }
	.lead { font-size: 17px; }
	.cta-row .btn { width: 100%; }
	.hv-ann, .hv-ring-label { display: none; }
	.strip-in { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 12px; }
	.strip-list { width: 100%; }
	.sec { padding-block: 72px; }
	.sec-tight { padding-block: 48px 72px; }
	.filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
	.filters .chip { flex: none; }
	.filters .flbl { flex: none; }
	.svc { grid-template-columns: 32px 32px minmax(0, 1fr) 20px; gap: 12px; padding: 20px 4px; }
	.svc-param { display: none; }
	.svc-ic { width: 28px; height: 28px; }
	.svc-title { font-size: 18px; }
	.principles, .plates, .steps, .kb-grid, .form { grid-template-columns: 1fr; }
	.c-left, .c-right { padding: 64px var(--gutter); }
	.c-list li { grid-template-columns: 1fr; gap: 2px; }
	.cta-in { padding-block: 56px; }
	.cta-actions, .cta-actions .btn { width: 100%; }
	.pkop { padding-block: 24px 48px; }
	.pkop-in { margin-top: 28px; }
	.ftr-grid { grid-template-columns: 1fr; }
	.ftr { padding-bottom: 40px; }
	.mbar {
		display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid var(--line);
		box-shadow: 0 -10px 24px -16px rgba(14, 26, 48, .35);
	}
	.mbar .btn { min-height: 50px; font-size: 15px; padding: 0 12px; }
	.mbar .btn:only-child { grid-column: 1 / -1; }
}

/* ---------- Verminderde beweging ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
	.hdr, .mbar, .ftr, .hero-visual, .cta { display: none !important; }
	body { background: #fff; padding: 0; }
}

/* ==========================================================================
   Editor (blokvoorbeeld in de WordPress-editor)
   ========================================================================== */
.editor-styles-wrapper .ipb { margin-block: 0; }
.editor-styles-wrapper .hero-copy,
.editor-styles-wrapper .c-left,
.editor-styles-wrapper .c-right,
.editor-styles-wrapper .dhero-copy { padding-left: var(--gutter); padding-right: var(--gutter); }
.editor-styles-wrapper .strip, .editor-styles-wrapper .sec, .editor-styles-wrapper .contact, .editor-styles-wrapper .cta { pointer-events: auto; }