@font-face{font-family:"Work Sans";src:url("../fonts/worksans-var-latin.woff2") format("woff2");
  font-weight:300 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:"Work Sans";src:url("../fonts/worksans-var-latin-ext.woff2") format("woff2");
  font-weight:300 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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url("../fonts/sourcesans3-var-latin.woff2") format("woff2");
  font-weight:300 800;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:"Source Sans 3";src:url("../fonts/sourcesans3-var-latin-ext.woff2") format("woff2");
  font-weight:300 800;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Badkamerrenovatie in Breda, eigen palet: petrol op warm gebroken wit, met
   koper als accent. Petrol (#14404A) is de basis en het donkere vlak; het is
   de kleur van nat tegelwerk en van een diepe voeg. Koper (#C8682E) is het
   accent, de kleur van de leiding achter de wand. Het koper zelf draagt geen
   witte tekst (3,8 op 1), dus knoppen en accenttekst staan op een donkerder
   koper dat wel 4,5 haalt; het heldere koper blijft voor vlakken en lijnen.
   De paginakleur (#F4F1EC) is warm zacht wit, en de lijnen en vlakken eronder
   dragen dezelfde warme zweem. Alle tinten zijn van die drie afgeleid en op
   contrast gemeten: de getallen staan bij het token.
   Letters: Work Sans voor de koppen, Source Sans 3 voor de lopende tekst, allebei
   zelf gehost. De hoekrondingen zijn hier 2 tot 16 pixels en het kader is 1.260. */
:root{
  color-scheme: light;
  /* Het donkere vlak is het petrol van de basis. De twee lichtere stappen zijn
     zo gekozen dat de lichte koper (#E8B894) en de drie lichte teksttinten er
     nog boven 4,5 blijven: --navy-3 is het lichtste, met 4,7 voor de koper. */
  --navy:#14404A;
  --navy-2:#1A4650;
  --navy-3:#225360;
  /* Linkkleur en focusring: een middentint van hetzelfde petrol. 7,1 op wit,
     6,3 op de paginakleur. */
  --blue:#2A5F69;
  --blue-soft:#E3EEEF;
  /* Het koper van het merk (#C8682E) haalt met witte tekst maar 3,8. De
     knopkleur is daarom een stap donkerder koper: wit erop 5,7, en als
     tekstkleur 5,7 op wit en 5,1 op de paginakleur. De hover haalt 7,1. */
  --orange:#A24F1C;
  --orange-dark:#8A4518;
  /* Het koper zelf, alleen voor vlakken en lijnen zonder tekst erop. */
  --koper:#C8682E;
  --green:#2E6A4C;
  --amber:#8A5A12;
  --bg:#F4F1EC;
  --ink:#103540;
  --ink-2:#3D5257;
  /* 5,9 op wit, 5,2 op de paginakleur en 4,7 op het veldvlak. */
  --ink-3:#56686C;
  --line:#DDD6CB;
  --line-soft:#EBE6DE;
  --white:#fff;
  --shadow-sm:0 1px 2px rgba(14,45,52,.06), 0 2px 8px rgba(14,45,52,.05);
  --shadow-md:0 2px 6px rgba(14,45,52,.06), 0 12px 28px rgba(14,45,52,.09);
  --shadow-lg:0 8px 20px rgba(14,45,52,.10), 0 32px 64px rgba(14,45,52,.18);
  --r-sm:2px; --r:4px; --r-md:10px; --r-lg:16px;
  --wrap:1260px;
  --ff-head:"Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"], :root:not([data-theme="light"]){ color-scheme: light; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important; transition-duration:.01ms!important} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-body); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}

/* Nederlandse samenstellingen zijn lang. Een kop als "Bodemwarmtepomp of
   luchtwarmtepomp" heeft op 320 pixels een min-content van 336 pixels, en in een
   raster duwt dat de kolom breder dan het scherm: horizontaal scrollen op de
   telefoon. De hyphens:auto hieronder wordt verderop met hyphens:manual
   opgeheven (geen afbreekstreepjes in koppen, zie daar); het echte werk tegen
   de overloop doet overflow-wrap, op smalle schermen met anywhere. */
h1,h2,h3,h4,h5{overflow-wrap:break-word; hyphens:auto}
@media (max-width:560px){
  h1,h2,h3,h4{hyphens:auto; overflow-wrap:anywhere}
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:var(--r-sm)}
/* De petrolring haalt op de donkere vlakken maar 1,4 tot 1,6 op 1, onder de
   3 op 1 die een focusring nodig heeft. Daar wordt de ring wit (ruim 10 op 1 op
   elke navytint). Door de outline-offset ligt de ring op de ondergrond rond het
   element, niet op het element zelf: een donkere kaart op een licht vlak
   (.svc--all, .linkcard--accent) houdt dus gewoon de petrolring. */
.topbar :focus-visible, .hero :focus-visible, .art-hero :focus-visible,
.section--navy :focus-visible, .finalcta :focus-visible, .area-wrap :focus-visible,
.sidecard--cta :focus-visible, .site-footer :focus-visible{outline-color:#fff}
/* Witte kaarten binnen een donker vlak (het offerteformulier in de hero, de
   rekenkaart op navy) krijgen de petrolring terug, anders is hij wit op wit.
   Zelfde gewicht als de regel hierboven en staat later, dus deze wint. */
.leadcard :focus-visible, .rekenkaart :focus-visible{outline-color:var(--blue)}

h1,h2,h3,h4{font-family:var(--ff-head); color:var(--ink); margin:0; line-height:1.2; letter-spacing:-.012em; text-wrap:balance}
h1{font-size:clamp(2.05rem,3.7vw,3.5rem); font-weight:800; letter-spacing:-.032em}
h2{font-size:clamp(1.65rem,2.5vw,2.45rem); font-weight:700}
h3,.h3{font-size:1.16rem; font-weight:700; letter-spacing:-.012em}
h4{font-size:1rem; font-weight:700}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.section{padding-block:clamp(56px,6.4vw,104px)}
.section--soft{background:var(--bg)}
/* Twee secties zonder eigen vlak staan allebei op de paginakleur, en dan valt
   de scheiding ertussen weg. De tweede van zo'n paar krijgt het witte vlak. */
.section:not([class*="section--"]) + .section:not([class*="section--"]){background:var(--white)}
.section--white{background:var(--white)}
.section--navy{background:var(--navy); color:var(--line)}
.section--navy h2,.section--navy h3{color:#fff}
/* Drie lichte tinten voor tekst op de donkere vlakken, want het palet heeft daar
   geen token voor. Alle drie licht petrol, uit de familie van de basis, en gemeten
   op var(--navy): #E6EEEE haalt 9,6, #CDDCDD haalt 8,0 en #A9C2C4 haalt 6,0. Op
   de voet (--navy-2) is dat 8,8, 7,3 en 5,5. */
.section-head{max-width:680px; margin:0 auto clamp(34px,3.6vw,52px); text-align:center}
.section-head p{color:var(--ink-2); font-size:1.09rem; margin-top:14px}
.section--navy .section-head p{color:#CDDCDD}
.eyebrow{font-family:var(--ff-head); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 0 12px}
.section--navy .eyebrow{color:#CDDCDD}
.muted{color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-head); font-weight:700; font-size:1rem; letter-spacing:-.005em;
  padding:15px 26px; border-radius:var(--r-md); border:2px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-decoration:none; line-height:1.2; min-height:52px;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn svg{flex:0 0 auto}
.btn-primary, .site-footer .btn-primary{background:var(--orange); color:#fff; box-shadow:0 6px 18px rgba(162,79,28,.32)}
.btn-primary:hover{background:var(--orange-dark); box-shadow:0 10px 26px rgba(162,79,28,.4)}
.btn-white{background:#fff; color:var(--navy); box-shadow:var(--shadow-md)}
.btn-white:hover{background:var(--line-soft)}
.btn-outline-light{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px)}
.btn-outline-light:hover{background:rgba(255,255,255,.16)}
.btn-outline{background:#fff; color:var(--navy); border-color:var(--line)}
.btn-outline:hover{border-color:var(--blue); color:var(--blue)}
.btn-block{width:100%}
/* De twee knoppen onder elkaar in de voettekst raakten elkaar. */
.fcta .btn-block + .btn-block{margin-top:14px}
.fcta .fuur{margin-top:26px}
.btn-lg{padding:17px 30px; font-size:1.06rem; min-height:58px}

.link-arrow{font-family:var(--ff-head); font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:7px; font-size:.98rem}
.link-arrow svg{transition:transform .18s ease}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover svg{transform:translateX(4px)}

/* Een lang woord of mailadres mag de pagina niet breder maken dan het scherm.
   Een domeinnaam van drieenveertig tekens deed dat op een telefoon van 360. */
h1,h2,h3,h4,p,li,td,dd,dt,figcaption,blockquote{overflow-wrap:break-word}
main a,footer a,.tb-right a,a[href^="mailto:"]{overflow-wrap:anywhere}
/* Deze regel moet na de regel hierboven staan en niet ervoor. Een media query
   verhoogt de specificiteit niet, dus de break-word hierboven overschreef de
   anywhere uit de telefoonquery bovenaan het bestand op elke breedte. Daardoor
   bleef de min-content van een kop als "Badkamerrenovatiepakket" 343 pixels en gaf een
   kop met een lange samenstelling op 320 pixels horizontaal scrollen, terwijl de
   query erop leek te staan. break-word verkleint de min-content niet, anywhere
   wel. */
@media (max-width:560px){
  h1,h2,h3,h4{overflow-wrap:anywhere}
}

/* ---------- topbar ---------- */
.topbar{background:var(--navy); color:var(--line); font-size:.82rem}
.topbar .wrap{display:flex; align-items:center; gap:10px; min-height:42px; flex-wrap:nowrap; overflow:hidden}
.tb-item{display:inline-flex; align-items:center; gap:8px; padding-block:9px; white-space:nowrap}
/* De balk heeft overflow:hidden. Zonder deze twee regels is het mailadres,
   dat als laatste staat, het eerste wat eraf valt zodra een claim te lang is.
   Nu krimpen de claims en blijft rechts altijd heel. */
.topbar .wrap > .tb-item{flex:0 1 auto; min-width:0; overflow:hidden}
.tb-right{flex:0 0 auto}
/* Staat er een telefoonnummer, dan passen het nummer en het mailadres op een
   telefoonscherm niet naast elkaar en loopt de balk over. De belknop weegt daar
   zwaarder dan een adres dat je toch niet kunt aantikken. */
@media (max-width:560px){
  .tb-right:has(a[href^="tel:"]) .tb-item:has(a[href^="mailto:"]),
  .tb-right:has(a[href^="tel:"]) .tb-sep{display:none}
}
.tb-item svg{flex:0 0 auto; opacity:.95}
.tb-sep{width:1px; height:15px; background:rgba(255,255,255,.17)}
.tb-item strong{color:#fff; font-weight:600}
.topbar a{color:var(--line)}
.topbar a:hover{color:#fff}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:10px}
/* De topbar heeft overflow:hidden en zijn wrap is op 1280 gemaximeerd, dus
   boven die breedte wordt er niets ruimer: wat daar niet past, past nooit.
   De derde claim en de staart van de eerste claim delen dezelfde ruimte en
   sluiten elkaar daarom uit. Zonder dit knipt de balk stil het mailadres af. */
@media (max-width:1279px){ .tb-3{display:none} }
@media (min-width:1181px){ .tb-tail{display:none} }
@media (max-width:1180px){ .tb-hide{display:none} }
/* De staart van de claim moet al bij 900 weg: op 768 duwde hij het mailadres
   rechts uit beeld. */
@media (max-width:900px){ .tb-tail{display:none} }
@media (max-width:820px){
  .topbar .wrap{gap:8px; min-height:38px}
  .tb-item{font-size:.75rem; gap:6px; padding-block:7px}
}
@media (max-width:460px){
  /* op smalle telefoons past alleen de openingstijd netjes op een regel */
  .topbar .wrap{justify-content:center}
  .topbar .wrap > .tb-item{display:none}
  .tb-right{margin-left:0}
  .tb-item{font-size:.74rem}
}

/* ---------- header ---------- */
.site-header{background:#fff; position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line-soft)}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(14,45,52,.10)}
.header-inner{display:flex; align-items:center; gap:20px; min-height:70px}
.brand{flex:0 0 auto; display:block}
.brand img{height:42px; width:auto}
.mainnav{display:flex; align-items:center; gap:4px; margin-inline:auto; min-width:0; flex-shrink:0}
.mainnav > a{
  font-family:var(--ff-head); font-weight:600; font-size:.96rem; color:var(--ink);
  padding:8px 13px; border-radius:7px; white-space:nowrap; transition:background .15s ease, color .15s ease;
}
.mainnav > a:hover{background:var(--blue-soft); color:var(--blue); text-decoration:none}
.header-actions{display:flex; align-items:center; gap:11px; flex:0 0 auto; min-width:0}
.header-actions .btn{padding:11px 20px; min-height:44px; font-size:.95rem}
.phone-pill{
  display:flex; align-items:center; gap:10px; padding:6px 18px 6px 12px;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.phone-pill:hover{border-color:var(--blue); box-shadow:0 4px 14px rgba(42,95,105,.12); text-decoration:none}
.phone-pill .ico{width:30px; height:30px; border-radius:50%; background:var(--blue-soft); display:grid; place-items:center; flex:0 0 auto}
.phone-pill .num{font-family:var(--ff-head); font-weight:700; font-size:1rem; color:var(--ink); display:block; line-height:1.2}
.navtoggle{display:none; width:44px; height:44px; border:1.5px solid var(--line); background:#fff; border-radius:var(--r-md); cursor:pointer; align-items:center; justify-content:center}
.navtoggle span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.navtoggle span::before,.navtoggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.navtoggle span::before{top:-6px} .navtoggle span::after{top:6px}

@media (max-width:1400px){
  .mainnav > a{padding:8px 11px; font-size:.94rem}
  .header-actions .btn svg{display:none}
  .header-actions .btn{padding:11px 18px}
}
@media (max-width:1240px){
  /* Onder deze breedte past het nummer niet meer naast het menu, en duwt het
     of "Contact" weg of de hele pagina scheef. Het nummer staat op dezelfde
     breedte nog gewoon in de bovenbalk, dus hier blijft alleen het icoon over
     als beltoets. */
  .phone-pill .num{display:none}
  .phone-pill{padding:8px 10px}
  .mainnav > a{padding:8px 9px; font-size:.92rem}
  .brand img{height:38px}
  .phone-pill{padding:8px 16px 8px 12px; gap:10px}
  .phone-pill .num{font-size:1rem}
  .header-actions .btn{padding:10px 16px; font-size:.92rem}
}
/* De kopbalk slaat eerder om dan de rest van de opmaak. Tussen 980 en 1024
   paste de rij met logo, menu, belknop en offerteknop net niet meer, en dan
   schoof de hele pagina horizontaal. Hieronder neemt het hamburgermenu het
   over en is er ruimte zat. */
@media (max-width:1024px){
  .header-inner{min-height:62px; gap:12px; position:relative}
  .navtoggle{display:flex}
  .mainnav{
    /* rechts gelijk met de goot van .wrap (zie onderaan), dus met de menuknop */
    position:absolute; left:auto; right:clamp(24px,3.4vw,56px); top:calc(100% + 9px);
    width:min(282px, calc(100vw - 48px));
    background:#fff; flex-direction:column; align-items:stretch; gap:2px;
    padding:8px; margin:0; border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:0 20px 40px rgba(14,45,52,.16); display:none; overflow:hidden;
  }
  .mainnav.is-open{display:flex}
  .mainnav > a{
    padding:13px 14px; font-size:1rem; border-radius:7px;
    display:flex; align-items:center; min-height:46px; white-space:normal;
  }
  .mainnav > a + a{border-top:1px solid var(--line-soft)}
  .header-actions .btn{display:none}
  .header-actions{margin-left:auto}
  .phone-pill{padding:8px 16px 8px 10px}
  .navtoggle[aria-expanded="true"]{border-color:var(--blue); background:var(--blue-soft)}
}
@media (max-width:760px){
  /* de vaste balk onderin heeft al een belknop - niet dubbel in de header */
  .header-actions .phone-pill{display:none}
}
@media (max-width:620px){
  .brand img{height:34px}
  .header-actions{gap:10px}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:62% 50%; filter:brightness(.96) saturate(1.02)}
/* De sluier is diep petrol (14,45,52). Over de volle breedte van de tekstkolom
   blijft hij op 0,76 of meer; met deze tint haalt witte tekst al 4,5 boven een
   witte tegelwand vanaf 0,64. Voorbij de kolom zakt hij tot 0,30, zodat de
   foto rechts open blijft. De foto zelf wordt nooit opgehelderd: brightness
   blijft onder 1. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,45,52,.94) 0%, rgba(14,45,52,.89) 46%, rgba(17,54,62,.76) 62%, rgba(20,64,74,.36) 86%, rgba(20,64,74,.30) 100%),
    linear-gradient(180deg, rgba(14,45,52,.38) 0%, rgba(14,45,52,0) 38%);
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.82fr);
  gap:clamp(32px,4vw,72px); align-items:center;
  padding-block:clamp(34px,3.2vw,56px);
}
.hero-copy{color:#fff; max-width:640px}
.hero-eyebrow{font-family:var(--ff-head); font-size:.79rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8); margin:0 0 13px}
.hero h1{color:#fff; margin-bottom:16px; text-shadow:0 2px 26px rgba(14,45,52,.34)}
.hero-lead{font-size:clamp(1.06rem,1.32vw,1.24rem); color:rgba(255,255,255,.88); max-width:33em; margin-bottom:20px}
.hero-usps{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px}
.hero-usps li{display:flex; align-items:flex-start; gap:12px; font-family:var(--ff-head); font-weight:600; font-size:1.04rem; color:#fff}
.hero-usps svg{flex:0 0 auto; margin-top:2px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.hero-note{margin-top:18px; font-size:.96rem; color:rgba(255,255,255,.76)}
.hero-note a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.hero-note strong{color:#fff; font-weight:600}

/* lead form */
.hero-form-col{position:relative}
.leadcard{
  background:#fff; border-radius:var(--r-lg); padding:clamp(22px,1.7vw,28px);
  box-shadow:var(--shadow-lg); position:relative; z-index:2;
}
.leadcard h2{font-size:clamp(1.35rem,1.7vw,1.72rem); margin-bottom:10px}
.leadcard .form-sub{color:var(--ink-2); font-size:.95rem; margin-bottom:18px; line-height:1.5}
.field{display:block; margin-bottom:13px}
.field label{display:block; font-family:var(--ff-head); font-weight:700; font-size:.88rem; color:var(--ink); margin-bottom:6px}
.field label .req{color:var(--orange)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--ink-3); background:var(--line-soft);
}
.form-error{display:none}
.form-error.is-shown{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:11px 13px;
  background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink-2); font-size:.88rem; line-height:1.4;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--ff-body); font-size:1rem; color:var(--ink);
  background:var(--line-soft); border:1.5px solid var(--line); border-radius:8px; padding:12px 14px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:62px}
/* Op telefoonbreedte past dezelfde voorbeeldtekst niet in hetzelfde aantal
   regels, dus daar krijgt het veld meer hoogte. */
@media (max-width:1040px){ .field textarea{min-height:120px} }
@media (max-width:620px){ .field textarea{min-height:150px} }
@media (max-width:400px){ .field textarea{min-height:140px} }

.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(42,95,105,.13);
}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2356686C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field-row .field{margin-bottom:13px}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}
/* Geen flex: een link in deze regel werd een eigen flexitem, waardoor de zin in
   stukken brak en "privacyverklaring" middenin afbrak. Nu is het gewone tekst
   met het slotje ervoor. */
.form-note{text-align:center; margin:12px 0 0; font-size:.865rem; color:var(--ink-3); line-height:1.45}
.form-note svg{vertical-align:-2px; margin-right:6px}
.form-success{display:none; background:var(--blue-soft); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:18px; color:var(--ink-2); font-size:.98rem}
.leadcard.is-sent .form-success{display:block}
.leadcard.is-sent form{display:none}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; padding-block:32px 42px; gap:28px}
  /* Op telefoonbreedte staat de tekst over het hele beeld, dus de banier moet
     dekkender zijn dan op groot scherm: ondergrens 0,81, gemeten met
     tools/heromeet.py. Niet zo dekkend dat het beeld verdwijnt. */
  .hero::before{background:linear-gradient(180deg, rgba(14,45,52,.85) 0%, rgba(17,54,62,.81) 55%, rgba(20,64,74,.86) 100%)}
  /* Op telefoonbreedte is het herovlak veel hoger dan breed, dus cover snijdt een
     smalle verticale strook uit. Zonder een eigen anker valt die strook op het
     lege deel van de vloer en lijkt het beeld een egaal vlak. */
  .hero-media img{object-position:34% 62%; filter:brightness(.92) saturate(.98)}
  .hero-copy{max-width:none}
}
@media (max-width:560px){
  .hero-actions .btn{width:100%}
  .field-row{grid-template-columns:1fr; gap:0}
}

/* ---------- trust strip ---------- */
.truststrip{background:#fff; border-bottom:1px solid var(--line-soft)}
/* Het vertrouwensbalkje is wit, en de sectie erna is dat soms ook: dan valt de
   scheiding ertussen weg. Het balkje krijgt dan zelf het zachte accentvlak, en
   niet de sectie, want die staat op zijn beurt weer naast het paginavlak en die
   twee liggen te dicht bij elkaar. */
.truststrip:has(+ .section--white){background:var(--blue-soft)}
/* Hetzelfde paar in de andere volgorde: op over ons staat het balkje na een
   witte sectie en valt de scheiding net zo goed weg. */
.section--white + .truststrip{background:var(--blue-soft)}
.truststrip .wrap{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding-block:26px;
}
.ts-item{display:flex; align-items:center; min-width:0; gap:13px; padding-inline:14px; position:relative}
.ts-item + .ts-item::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line-soft)}
.ts-item svg{flex:0 0 auto}
.ts-item b{display:block; font-family:var(--ff-head); font-weight:700; font-size:.95rem; white-space:normal; overflow-wrap:break-word; color:var(--ink); line-height:1.25}
.ts-item span{display:block; min-width:0; font-size:.85rem; color:var(--ink-3); line-height:1.35; margin-top:2px}
@media (max-width:1100px){ .truststrip .wrap{grid-template-columns:repeat(3,1fr); gap:18px 8px} .ts-item:nth-child(3n+1)::before{display:none} }
@media (max-width:700px){ .truststrip .wrap{grid-template-columns:repeat(2,1fr)} .ts-item::before{display:none!important} .ts-item{padding-inline:0} }
@media (max-width:400px){ .truststrip .wrap{grid-template-columns:1fr} }

/* ---------- service cards ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px)}
@media (max-width:1040px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .grid-2{grid-template-columns:1fr} }
@media (max-width:620px){ .grid-4,.grid-3{grid-template-columns:1fr; gap:20px} }

.svc{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; text-decoration:none}
.svc-img{aspect-ratio:3/2; background:var(--blue-soft); overflow:hidden}
.svc-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.svc:hover .svc-img img{transform:scale(1.045)}
.svc-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1}
/* De bovenregel van een kaartje loopt soms over twee regels en soms over een,
   en dan staat de naam in de ene kaart hoger dan in de kaart ernaast terwijl de
   kaders zelf wel even hoog zijn. Twee regels ruimte reserveren zet de namen in
   een rij weer op dezelfde hoogte. */
.svc-body .eyebrow{min-height:2.1em; margin-bottom:2px}
.svc-body h3{color:var(--ink)}
.svc-body p{color:var(--ink-2); font-size:.96rem; margin:0; flex:1}
.svc-more{margin-top:4px}

.svc--all{background:var(--navy); border-color:var(--navy); color:#fff; justify-content:center; align-items:flex-start; padding:30px 26px; gap:14px}
.svc--all:hover{background:var(--navy-3)}
.svc--all h3{color:#fff; font-size:1.3rem}
.svc--all p{color:#CDDCDD; font-size:.96rem}

/* ---------- split blocks ---------- */
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,4vw,68px); align-items:center}
.split--start{align-items:start}
.split--stretch{align-items:stretch}
.split--stretch .split-media{aspect-ratio:auto; min-height:340px}
/* Een lange tekstkolom naast een beeld van 440 laat een gat vallen, en een vaste
   staande uitsnede wordt hoger dan een kortere tekst (les 19). Het beeld volgt
   daarom precies de hoogte van de tekstkolom.
   Net boven het breekpunt is dat te veel van het goede: twee kolommen van 384
   naast een lange tekst maakten van een liggende 3:2-foto een staande strook
   van 0,45, met maar een derde van het onderwerp in beeld. Tot 1100 krijgt de
   tekst daarom meer breedte (korter) en wordt het kader nooit hoger dan 4/3 van
   zijn breedte: het volgt de tekst tot die grens en staat daarboven gecentreerd.
   Het kader telt niet mee voor de rijhoogte, dus bij een korte tekst wordt het
   ook niet hoger dan de tekst. De grens rekent met de kolombreedte:
   (rijbreedte - gat) / 2,4, en het gat is hier precies 4vw. Het meegroeien
   zonder grens begint pas vanaf 1100, waar het kader ruim blijft (0,7 en breder). */
@media (min-width:861px) and (max-width:1099px){
  .split--lang{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); container-type:inline-size}
  .split--lang:has(> .split-media:first-child){grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .split--lang .split-media{
    aspect-ratio:auto; position:relative; align-self:center; height:100%; min-height:0;
    max-height:calc((100cqw - 4vw) / 2.4 * .75);
  }
  .split--lang .split-media img{position:absolute; inset:0}
}
@media (min-width:1100px){
  .split--lang{align-items:stretch}
  .split--lang .split-media{aspect-ratio:auto; min-height:360px; position:relative}
  .split--lang .split-media img{position:absolute; inset:0}
}
.split-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; background:var(--blue-soft)}
.split-media img{width:100%; height:100%; object-fit:cover}
.split-text h2{margin-bottom:18px}
.split-text p{color:var(--ink-2)}
@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split .order-first{order:-1}
  .split-media{aspect-ratio:16/10}
  /* Zodra de twee kolommen onder elkaar staan, loopt de tekst over de hele
     breedte door en worden de regels te lang om prettig te lezen. */
  .split-text p, .split-text li{max-width:560px}
}

.checklist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.checklist.two-col{grid-template-columns:1fr 1fr; gap:12px 26px}
.checklist li{display:flex; align-items:flex-start; gap:11px; color:var(--ink); font-size:1rem}
.checklist svg{flex:0 0 auto; margin-top:4px}
.section--navy .checklist li{color:var(--line)}
@media (max-width:620px){ .checklist.two-col{grid-template-columns:1fr} }

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; position:relative}
.step{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); padding:28px 24px; position:relative}
.step .num{
  width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--ff-head); font-weight:800; font-size:1.18rem; display:grid; place-items:center; margin-bottom:18px;
}
.step h3{margin-bottom:9px}
.step p{color:var(--ink-2); font-size:.96rem; margin:0}
.step-arrow{position:absolute; top:52px; right:-19px; z-index:2; color:var(--line)}
@media (max-width:1040px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px} .step-arrow{display:none} }
@media (max-width:620px){ .steps{grid-template-columns:1fr} }

/* ---------- pricing table ---------- */
.pricetable{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); container-type:inline-size}
.pricetable .scroller{overflow:visible}
.pricetable table{width:100%; min-width:0; border-collapse:collapse; text-align:left; table-layout:auto}
.pricetable thead th{
  background:var(--navy); color:#fff; font-family:var(--ff-head); font-weight:700;
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  padding:15px 22px;
}
.pricetable thead th:first-child{width:34%}
.pricetable thead th:last-child{width:24%}
.pricetable thead th:last-child{text-align:right}
.pricetable tbody td{padding:18px 22px; border-top:1px solid var(--line-soft); vertical-align:middle; color:var(--ink-2)}
.pricetable tbody tr:first-child td{border-top:0}
.pricetable tbody tr:hover{background:var(--line-soft)}
.pt-type{font-family:var(--ff-head); font-weight:700; font-size:1.04rem; color:var(--ink); display:block; line-height:1.3}
.pt-tag{
  display:inline-block; margin-top:7px; font-family:var(--ff-head); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue); background:var(--blue-soft);
  padding:4px 10px; border-radius:var(--r-sm);
}
.pt-price{
  text-align:right; font-family:var(--ff-head); font-weight:800; text-wrap:balance;
  font-size:1.15rem; color:var(--navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.pricetable tfoot td{background:var(--line-soft); border-top:1px solid var(--line); padding:16px 22px; font-size:.88rem; color:var(--ink-3)}

@container (max-width:620px){
  .pricetable table,.pricetable tbody,.pricetable tr,.pricetable td{display:block; width:100%; min-width:0}
  .pricetable thead,.pricetable tfoot{display:none}
  .pricetable tbody tr{border-top:1px solid var(--line-soft); padding:6px 0}
  .pricetable tbody tr:first-child{border-top:0}
  .pricetable tbody td{border-top:0; padding:7px 20px; display:flex; gap:10px 14px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; min-width:0; overflow-wrap:anywhere}
  .pricetable tbody td:first-child{padding-top:18px; display:block}
  .pricetable tbody td:last-child{padding-bottom:18px}
  .pricetable tbody td[data-label]::before{
    content:attr(data-label); font-family:var(--ff-head); font-weight:700; font-size:.72rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); flex:0 0 auto;
  }
  .pt-price{text-align:right; font-size:1.12rem}
  .pricetable .pt-mobile-note{display:block; padding:0 20px 18px; font-size:.87rem; color:var(--ink-3)}
  .pricetable thead th:first-child,.pricetable thead th:last-child{width:auto}
}
@container (max-width:400px){
  .pricetable tbody td,.pricetable tbody td:first-child,.pricetable .pt-mobile-note{padding-inline:14px}
  .pt-price{font-size:1.05rem}
}
.pricetable .pt-mobile-note{display:none}

.callout{
  background:var(--white); border:1px solid var(--line); border-left:5px solid var(--orange);
  border-radius:var(--r); padding:24px 26px; margin-top:28px;
}
.callout h3,.callout .h3{margin-bottom:10px}
.callout p{color:var(--ink-2); margin:0}
.callout--overlap{
  position:relative; z-index:2; margin:-76px 0 0 44px;
  background:#fff; border:1px solid var(--line-soft); border-left:5px solid var(--orange);
  box-shadow:var(--shadow-lg);
  padding:26px 28px;
}
@media (max-width:1100px){ .callout--overlap{margin:-60px 0 0 28px} }
@media (max-width:860px){ .callout--overlap{margin:-48px 16px 0} }
@media (max-width:520px){ .callout--overlap{margin:-36px 12px 0; padding:22px 20px} }
.callout--blue{border-left-color:var(--blue); background:var(--blue-soft); border-color:var(--line)}
/* Twee toelichtingen naast elkaar. Onder elkaar zouden ze allebei de halve
   breedte vullen en de rechterhelft van de sectie leeg laten. */
.calloutpaar{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:34px; align-items:start}
.calloutpaar .callout{max-width:none; height:100%}
@media (max-width:860px){ .calloutpaar{grid-template-columns:minmax(0,1fr); gap:16px; margin-top:26px} }
.callout--blue p{color:var(--ink-2)}

/* ---------- duo cards ---------- */
.duogrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:stretch}
.duocard{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm)}
.duocard-img{aspect-ratio:16/9; overflow:hidden; background:var(--blue-soft)}
.duocard-img img{width:100%; height:100%; object-fit:cover}
.duocard-body{padding:clamp(24px,2vw,32px); display:flex; flex-direction:column; flex:1}
.duocard-body h3{margin:0 0 16px; font-size:clamp(1.4rem,1.8vw,1.85rem); font-weight:700; letter-spacing:-.02em; line-height:1.16}
.duocard-body p{color:var(--ink-2)}
.duocard-foot{margin-top:auto; padding-top:20px}
@media (max-width:860px){ .duogrid{grid-template-columns:1fr; gap:22px} }

/* ---------- editorial ---------- */
.article{max-width:610px; margin:0 auto}
.article h2{margin-bottom:22px}
.article p{color:var(--ink-2); font-size:1.06rem}
.article ul{color:var(--ink-2); padding-left:0; list-style:none; display:grid; gap:11px; margin:22px 0 0}
.article .checklist li::before{display:none}
.article ul li{display:flex; gap:11px; align-items:flex-start}
.article ul li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); flex:0 0 auto; margin-top:11px}
.section--navy .article p{color:var(--line)}

.factgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:30px}
.fact{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); padding:24px}
.section--navy .fact{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.fact h3{margin-bottom:9px; display:flex; align-items:center; gap:10px}
.fact p{font-size:.98rem; color:var(--ink-2); margin:0}
.section--navy .fact p{color:#CDDCDD}
@media (max-width:760px){ .factgrid{grid-template-columns:1fr} }

/* ---------- werkgebied ---------- */
.area-wrap{
  background:var(--navy); border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch;
}
.area-copy{padding:clamp(30px,3.4vw,52px); color:var(--line)}
.area-copy h2{color:#fff; margin-bottom:14px}
.area-copy > p{color:#CDDCDD}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.chip{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; padding:10px 16px; border-radius:var(--r);
  font-family:var(--ff-head); font-weight:600; font-size:.94rem; transition:background .16s ease, border-color .16s ease;
}
.chip:hover{background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.4); text-decoration:none}
.area-map{background:var(--navy-3); position:relative; min-height:380px; display:grid; place-items:center; padding:22px}
.area-map svg{width:100%; height:auto; max-width:560px}
@media (max-width:900px){ .area-wrap{grid-template-columns:1fr} .area-map{min-height:320px} }

/* ---------- kennisbank ---------- */
.kb{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.kb:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none}
.kb-img{aspect-ratio:16/10; overflow:hidden; background:var(--blue-soft)}
.kb-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.kb:hover .kb-img img{transform:scale(1.045)}
.kb-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.kb-body .eyebrow{margin:0}
.kb-body p{color:var(--ink-2); font-size:.95rem; margin:0; flex:1}

/* ---------- faq ---------- */
.faq{max-width:840px; margin:0 auto; display:grid; gap:12px}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.faq-item[open]{border-color:var(--line); box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 58px 20px 24px; position:relative;
  font-family:var(--ff-head); font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:2.4px solid var(--blue); border-bottom:2.4px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq-item summary:hover{color:var(--blue)}
.faq-body{padding:0 24px 22px; color:var(--ink-2)}
.faq-body p{margin:0}

/* ---------- final CTA ---------- */
.finalcta{position:relative; overflow:hidden; isolation:isolate; background:var(--navy)}
.finalcta .bg{position:absolute; inset:0; z-index:-2}
.finalcta .bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.5) saturate(.78)}
.finalcta::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(95deg, rgba(14,45,52,.93) 0%, rgba(17,54,62,.86) 45%, rgba(20,64,74,.72) 100%)}
.finalcta .wrap{padding-block:clamp(58px,6vw,96px); text-align:center; color:#fff}
.finalcta h2{color:#fff; font-size:clamp(1.9rem,3vw,2.9rem); margin-bottom:16px}
.finalcta p{color:rgba(255,255,255,.85); font-size:1.12rem; max-width:470px; margin:0 auto 32px}
.finalcta .hero-actions{justify-content:center}

/* ---------- juridische pagina's + offertepagina ---------- */
.art-hero--tight{padding-bottom:clamp(72px,7vw,104px)}
.art-layout--up{margin-top:calc(-1 * clamp(44px,4.4vw,64px))}
@media (max-width:900px){ .art-layout--up{margin-top:calc(-1 * clamp(32px,4vw,44px))} }
.deflist{margin:22px 0; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; container-type:inline-size}
.deflist-row{display:grid; grid-template-columns:190px minmax(0,1fr); gap:0}
.deflist-row + .deflist-row{border-top:1px solid var(--line)}
.deflist dt{font-family:var(--ff-head); font-weight:700; color:var(--ink); padding:14px 18px; background:var(--bg)}
.deflist dd{margin:0; padding:14px 18px; color:var(--ink-2)}
@container (max-width:520px){ .deflist-row{grid-template-columns:minmax(0,1fr)} .deflist dd{padding-top:0} }

.ministeps{list-style:none; margin:0; padding:0; display:grid; gap:13px; counter-reset:ms}
.ministeps li{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--ink-2); line-height:1.45}
.ministeps li span{
  width:24px; height:24px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  font-family:var(--ff-head); font-weight:700; font-size:.82rem; display:grid; place-items:center; flex:0 0 auto;
}
.art-layout > div > .leadcard{margin:0}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-2); color:#E6EEEE; padding-block:clamp(48px,5vw,76px) 0; font-size:.97rem; border-top:4px solid var(--koper)}
.footer-grid{display:grid; grid-template-columns:minmax(230px,1.25fr) minmax(172px,auto) minmax(168px,auto) minmax(168px,auto) minmax(248px,auto); gap:clamp(26px,2.4vw,40px); align-items:start}
.site-footer h3, .site-footer h4{color:#fff; font-size:1.04rem; margin-bottom:18px}
.site-footer p{color:#E6EEEE; margin-bottom:14px}
.site-footer a{color:#E6EEEE}
.site-footer a:hover{color:#fff}
.footer-logo{height:40px; width:auto; display:block}
.fbrand-adres{font-size:.92rem}
.footer-brand{display:inline-block; background:#fff; padding:11px 16px; border-radius:var(--r-lg); margin-bottom:20px}
.flist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.fcontact{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.fcontact li{display:flex; gap:11px; align-items:flex-start; min-width:0}
.fcontact .ico{width:31px; height:31px; border-radius:7px; background:rgba(255,255,255,.09); display:grid; place-items:center; flex:0 0 auto}
.fcontact b{display:block; color:#fff; font-family:var(--ff-head); font-weight:700; font-size:.95rem; line-height:1.35; overflow-wrap:anywhere}
.fcontact span{display:block; font-size:.86rem; color:#A9C2C4; line-height:1.4; margin-top:2px}
.socials{display:grid; grid-template-columns:repeat(8,32px); gap:8px; margin-top:22px}
.socials a{width:32px; height:32px; border-radius:7px; display:grid; place-items:center; opacity:.9; transition:opacity .15s ease, transform .15s ease}
.socials a:hover{opacity:1; transform:translateY(-2px)}
.socials svg{width:15px; height:15px; fill:#fff}
.footer-areas{margin-top:44px; padding-top:30px; border-top:1px solid rgba(255,255,255,.11)}
.footer-areas h3, .footer-areas h4{margin-bottom:14px}
.footer-areas ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px}
.footer-areas li a{display:inline-block; padding:7px 14px; border-radius:var(--r-sm); background:rgba(255,255,255,.07); font-size:.9rem}
.footer-areas li a:hover{background:rgba(255,255,255,.15); text-decoration:none}
.footer-bottom{
  margin-top:34px; border-top:1px solid rgba(255,255,255,.11); padding-block:22px 26px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.9rem; color:#A9C2C4;
}
.fcol > summary{list-style:none; cursor:default}
.fcol > summary::-webkit-details-marker{display:none}
.fhours h4{margin-top:26px}
.fhours p{margin:0; font-size:.92rem}

@media (max-width:1180px){ .footer-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:34px 28px} }

@media (max-width:760px){
  /* mobiel: een korte footer met uitklapbare linklijsten in plaats van een lange kolom */
  .site-footer{padding-block:38px 0; font-size:.95rem}
  .footer-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .footer-grid > *{min-width:0}
  /* De volgorde is die van footer.php: merk, de uitklaplijsten, dan het
     oproepblok. Geen order-regels meer; die verwezen naar een contactkolom die
     niet meer bestaat en zetten het oproepblok daardoor boven het merk. */
  .footer-grid > .fcta{border-top:1px solid rgba(255,255,255,.11); padding-top:22px}

  .site-footer h3, .site-footer h4{font-size:1rem; margin-bottom:13px}
  .footer-brand{margin-bottom:16px; padding:9px 14px}
  .footer-logo{height:34px}
  .socials{grid-template-columns:repeat(auto-fill,30px); gap:8px; margin-top:16px; margin-bottom:22px}
  .socials a{width:30px; height:30px; border-radius:7px}
  .socials svg{width:14px; height:14px}
  .fbrand-adres{display:none}

  .fcol{border-top:1px solid rgba(255,255,255,.11)}
  .fcol > summary{
    position:relative; cursor:pointer; display:flex; align-items:center;
    padding:15px 34px 15px 0; min-height:54px; -webkit-tap-highlight-color:transparent;
  }
  .fcol > summary h3, .fcol > summary h4{margin:0}
  .fcol > summary::after{
    content:""; position:absolute; right:7px; top:50%; width:9px; height:9px; opacity:.65;
    border-right:2.2px solid #fff; border-bottom:2.2px solid #fff;
    transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
  }
  .fcol[open] > summary::after{transform:translateY(-25%) rotate(225deg)}
  .fcol .flist{gap:7px; padding-bottom:12px}
  .fcol .flist a{display:block; padding:11px 2px}
  .fhours{display:none}
  .fcontact{gap:15px}
  .footer-areas{margin-top:10px; padding-top:22px}
  .footer-areas li a{padding:8px 14px}
  .footer-bottom{margin-top:24px; padding-block:18px 22px; font-size:.86rem; gap:8px 18px}
}

/* ---------- mobile call bar ---------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(255,255,255,.97); backdrop-filter:blur(8px); padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
  }
  /* Zolang er geen telefoonnummer is staat er maar een knop in de balk. Die
     hoort dan de hele breedte te vullen, niet de linkerhelft. */
  .callbar:has(.btn:only-child){grid-template-columns:1fr}
  .callbar .btn{width:100%; padding:13px 12px; font-size:.98rem; min-height:50px}
  /* De balk is 71px hoog (10 + 50 + 10 + 1px rand) plus de veilige zone van een
     iPhone. De marge onder de pagina groeit met dezelfde env() mee en houdt er
     ruim tien pixels boven, anders valt de laatste regel achter de balk. */
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  /* Bij tabben schuift de browser een element net tot de onderrand in beeld,
     en daar lag het helemaal onder de balk. Deze ruimte houdt het erboven. */
  html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ---------- service page (dienstensjabloon) ---------- */
.hero--landing .hero-grid{padding-block:clamp(30px,2.8vw,48px)}
.hero--landing h1{font-size:clamp(1.95rem,3.1vw,3rem)}
.hero--landing .hero-lead{font-size:clamp(1.02rem,1.2vw,1.15rem)}
.crumbs{font-size:.88rem; color:rgba(255,255,255,.72); margin:0 0 14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.crumbs a{color:#fff; text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs [aria-current]{color:rgba(255,255,255,.72)}

.linkgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.linkcard{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; font-family:var(--ff-head); font-weight:700; color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.linkcard:hover{border-color:var(--blue); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none}
.linkcard svg{color:var(--orange); flex:0 0 auto; transition:transform .18s ease}
.linkcard:hover svg{transform:translateX(4px)}
.linkcard--accent{background:var(--navy); border-color:var(--navy); color:#fff}
.linkcard--accent:hover{background:var(--navy-3); border-color:var(--navy-3)}
.linkcard--accent svg{color:#fff}

/* ---------- diensten overzicht ---------- */
.minigrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
/* Zestien posten laten zich niet door drie delen: er blijft er dan een alleen
   op de laatste rij staan met twee gaten ernaast. Vier, twee en een wel. */
.minigrid--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){ .minigrid--vier{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .minigrid--vier{grid-template-columns:1fr} }
.minicard{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px;
}
a.minicard{transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
a.minicard:hover{border-color:var(--blue); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none}
.minicard h3{color:var(--ink)}
.minicard p{color:var(--ink-2); font-size:.95rem; margin:0; flex:1}
.minicard .link-arrow{margin-top:6px; font-size:.93rem}
.minicard--plain{background:var(--line-soft); border-style:dashed}
@media (max-width:900px){ .minigrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .minigrid{grid-template-columns:1fr} }

.jumprow{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px}
.jumpchip{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  color:var(--ink); padding:10px 18px; border-radius:var(--r);
  font-family:var(--ff-head); font-weight:600; font-size:.95rem;
  transition:border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.jumpchip:hover{border-color:var(--blue); color:var(--blue); box-shadow:var(--shadow-sm); text-decoration:none}

/* ---------- kennisbank artikel ---------- */
.art-hero{background:var(--navy); color:var(--line); padding-block:clamp(34px,3.4vw,52px) clamp(96px,9vw,140px)}
.art-hero .crumbs{color:rgba(255,255,255,.68); margin-bottom:16px}
.art-hero .eyebrow{color:#CDDCDD}
.art-hero h1{color:#fff; font-size:clamp(1.9rem,3.2vw,3.05rem)}
.art-hero .art-lead{color:#E6EEEE; font-size:clamp(1.05rem,1.25vw,1.2rem); margin:0}
.art-hero-grid{display:grid; grid-template-columns:1.08fr 1fr; gap:clamp(26px,3.4vw,56px); align-items:end}
@media (max-width:900px){
  .art-hero-grid{grid-template-columns:1fr; gap:20px; align-items:start}
  /* Eén kolom betekent de volle breedte, en dan wordt de inleidende regel te lang. */
  .art-hero .art-lead{max-width:560px}
}
.art-meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:20px; font-size:.9rem; color:#A9C2C4}
.art-meta span{display:inline-flex; align-items:center; gap:8px}

.art-figure{margin-top:clamp(-120px,-7vw,-82px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:21/9; background:var(--blue-soft)}
.art-figure img{width:100%; height:100%; object-fit:cover}

.art-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(28px,3vw,48px); align-items:start; margin-top:clamp(40px,4vw,64px)}
.art-body{
  container-type:inline-size;
  min-width:0; max-width:none;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,48px); box-shadow:var(--shadow-sm);
}
/* binnen het witte tekstvlak moeten blokken hun eigen vlak houden */
.art-body .callout{background:var(--bg); border-color:var(--line-soft)}
/* Boven de 80 tekens per regel raakt het oog de volgende regel kwijt. Daarom
   is niet de tekst maar het blok zelf smaller: zo blijft de regel leesbaar en
   houdt het kader geen lege rechterhelft over.
   De grenzen hieronder stonden in ch en staan nu in pixels. Het cijfer nul is
   in elke letter breder dan de gemiddelde letter in lopende tekst, dus een
   grens in ch kwam altijd ruimer uit dan het aantal tekens dat hij belooft.
   Een pixelgrens meet wel wat hij belooft, en onder die breedte doet hij niets. */
.callout{max-width:690px}
.faq-body p, .faq-body li{max-width:640px}
.hero-note, .hero-usps li{max-width:590px}
.leadcard .form-sub, .leadcard .form-note{max-width:575px}

/* Een tabel met drie kolommen is geen prijstabel met een bedrag rechts: de
   uitleg is daar de hoofdkolom en hoort de meeste ruimte te krijgen. Zonder
   dit blijft de derde kolom een smalle strook naast twee te brede kolommen. */
@media (min-width:861px){
  /* Bedrag als laatste kolom: de toelichting in het midden is de hoofdkolom. */
  .pricetable table:has(tbody td:nth-child(3)):has(tbody td:last-child.pt-price) thead th:first-child{width:27%}
  .pricetable table:has(tbody td:nth-child(3)):has(tbody td:last-child.pt-price) thead th:nth-child(2){width:52%}
  .pricetable table:has(tbody td:nth-child(3)):has(tbody td:last-child.pt-price) thead th:last-child{width:21%}
  /* Bedrag in het midden: dan staat de uitleg rechts en krijgt die de ruimte. */
  .pricetable table:has(tbody td:nth-child(3)):has(tbody td:nth-child(2).pt-price) thead th:first-child{width:24%}
  .pricetable table:has(tbody td:nth-child(3)):has(tbody td:nth-child(2).pt-price) thead th:nth-child(2){width:14%}
  .pricetable table:has(tbody td:nth-child(3)):has(tbody td:nth-child(2).pt-price) thead th:last-child{width:62%; text-align:left}
  .pricetable table:has(tbody td:nth-child(3)):has(tbody td:nth-child(2).pt-price) tbody td:last-child{text-align:left}
  .pricetable table:has(tbody td:nth-child(3)) tbody td{vertical-align:top}
}
.callout p{max-width:none}
main .wrap > p,
main .wrap > div > p.muted,
main .wrap > div > p:not([class]){max-width:640px}
/* Een alinea die rechtstreeks in het paginavlak staat is smaller dan dat vlak.
   Links uitlijnen laat dan een halve lege rechterhelft over, dus die alinea
   staat gecentreerd; de tekst zelf blijft links uitgelijnd. */
main .wrap > p,
main p.muted{margin-inline:auto}
.art-body .pricetable{box-shadow:none}
.art-body .pricetable tbody tr:nth-child(even){background:var(--line-soft)}
.art-body .pricetable tbody tr:hover{background:var(--line-soft)}
.art-body h2{font-size:clamp(1.4rem,1.95vw,1.9rem); margin:clamp(34px,3.2vw,48px) 0 16px; scroll-margin-top:110px}
.art-body h2:first-child{margin-top:0}
.art-body p{color:var(--ink-2); font-size:1.06rem; max-width:640px}
.art-body .pricetable{margin:26px 0}
.art-body .checklist{margin:22px 0}

.art-side{position:sticky; top:92px; display:grid; gap:18px; align-content:start}
.sidecard{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:22px 24px}
.sidecard h3{font-size:1rem; margin-bottom:14px}
.toc{list-style:none; margin:0; padding:0; display:grid; gap:7px; counter-reset:toc}
.toc a{
  display:block; padding:8px 10px; border-radius:var(--r); font-size:.94rem; color:var(--ink-2);
  border-left:2px solid var(--line); transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.toc a:hover{background:var(--blue-soft); color:var(--blue); border-left-color:var(--blue); text-decoration:none}
.sidecard--cta{background:var(--navy); border-color:var(--navy); color:#E6EEEE}
.sidecard--cta h3{color:#fff}
.sidecard--cta p{color:#CDDCDD; font-size:.93rem; margin-bottom:16px}
.sidecard--cta .btn{width:100%; margin-bottom:10px}
.sidecard--cta .side-tel{display:block; text-align:center; color:#fff; font-family:var(--ff-head); font-weight:700; font-size:1.05rem}
.sidecard--cta .side-hours{display:block; text-align:center; font-size:.84rem; color:#A9C2C4; margin-top:3px}

@media (max-width:1000px){
  .art-layout{grid-template-columns:1fr}
  .art-side{position:static; grid-template-columns:1fr 1fr; display:grid; gap:18px}
}
@media (max-width:700px){
  .art-side{grid-template-columns:1fr}
  .art-figure{aspect-ratio:16/9; margin-top:-64px}
  .art-body{padding:24px 20px; border-radius:var(--r-md)}
}

/* ---------- over ons ---------- */
.crumbbar{background:#fff; border-bottom:1px solid var(--line-soft)}
/* De kruimelbalk is wit en de sectie erna is dat soms ook: twee witte vlakken
   met alleen een haarlijn ertussen. Dan krijgt de balk het zachte accentvlak,
   net als het vertrouwensbalkje in hetzelfde geval. */
.crumbbar:has(+ .section--white){background:var(--blue-soft)}
.crumbbar .crumbs{color:var(--ink-3); padding-block:14px; margin:0; font-size:.88rem}
.crumbbar .crumbs a{color:var(--ink-2)}
.crumbbar .crumbs a:hover{color:var(--blue)}
.crumbbar .crumbs [aria-current]{color:var(--ink-3)}
.crumbbar .crumbs span[aria-hidden]{color:var(--ink-3); opacity:1}

.portret{position:relative}
.portret-main{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:5/6; background:var(--blue-soft)}
.portret-main img{width:100%; height:100%; object-fit:cover}

.portret-badge{
  position:absolute; left:-22px; bottom:-22px; background:#fff; border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:16px 20px; display:flex; align-items:center; gap:12px; max-width:270px;
}
.portret-badge b{display:block; font-family:var(--ff-head); font-weight:700; font-size:.98rem; color:var(--ink); line-height:1.25}
.portret-badge span{display:block; font-size:.85rem; color:var(--ink-3); line-height:1.35; margin-top:2px}
@media (max-width:860px){
  .portret-main{aspect-ratio:16/11}
  .portret-badge{left:16px; bottom:-18px}
}

.pullquote{
  position:relative; margin:0; padding:clamp(26px,2.6vw,38px) clamp(26px,2.6vw,40px);
  background:var(--blue-soft); border-radius:var(--r-md); border-left:5px solid var(--blue);
}
.pullquote p{
  font-family:var(--ff-head); font-weight:600; font-size:clamp(1.1rem,1.45vw,1.34rem);
  line-height:1.45; color:var(--ink); margin:0; letter-spacing:-.012em;
}
.pullquote cite{display:block; margin-top:14px; font-style:normal; font-size:.9rem; color:var(--ink-3); font-family:var(--ff-body)}

.badgerow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:36px}
.badge{
  display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:20px 22px; color:#fff;
  font-family:var(--ff-head); font-weight:600; font-size:1rem; line-height:1.3;
}
.badge .ico{width:40px; height:40px; border-radius:var(--r-md); background:rgba(255,255,255,.1); display:grid; place-items:center; flex:0 0 auto}
@media (max-width:820px){ .badgerow{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contactgrid{display:grid; grid-template-columns:1fr; gap:14px}
.contacttile{
  display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:22px 24px; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.contacttile:hover{border-color:var(--blue); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none}
.contacttile .ico{width:44px; height:44px; border-radius:var(--r-md); background:var(--blue-soft); display:grid; place-items:center; flex:0 0 auto}
.contacttile .lbl{font-family:var(--ff-head); font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); display:block}
.contacttile b{display:block; font-family:var(--ff-head); font-weight:700; font-size:1.08rem; color:var(--ink); line-height:1.3; margin-top:5px; overflow-wrap:anywhere}
.contacttile span.sub{display:block; font-size:.88rem; color:var(--ink-3); line-height:1.4; margin-top:4px}
@media (max-width:520px){ .contacttile{padding:18px 18px; gap:13px} .contacttile .ico{width:40px; height:40px} }

/* ---------- toevoegingen voor de dienst- en plaatssjablonen ---------- */

/* Vijfstappenproces. De starterkit kent alleen een vierstapsvariant, maar de
   werkwijze van dit bedrijf telt vijf stappen. Zelfde kaart, andere kolomtelling. */
.steps--vijf{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1280px){ .steps--vijf{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px} }
@media (max-width:860px){ .steps--vijf{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px} }
@media (max-width:620px){ .steps--vijf{grid-template-columns:1fr; gap:16px} }

/* Werkgebiedkaart. bib_werkgebiedkaart() levert een kale inline-SVG: de vormen
   erin hebben geen eigen fill of stroke, die staan hier. Standaard leesbaar op
   een lichte achtergrond, met een donkere variant binnen .area-map. */
.bib-gebiedskaart{display:block; width:100%; height:auto; max-width:560px; margin:0 auto}
.bib-gebiedskaart .k-vlak{fill:transparent}
.bib-gebiedskaart .k-buur{fill:rgba(14,45,52,.05); stroke:rgba(14,45,52,.12); stroke-width:1.6}
.bib-gebiedskaart .k-land{fill:rgba(42,95,105,.13)}
.bib-gebiedskaart .k-eigen{fill:rgba(162,79,28,.24)}
.bib-gebiedskaart .k-gemeenten{fill:none; stroke:rgba(14,45,52,.16); stroke-width:2}
.bib-gebiedskaart .k-grens{fill:none; stroke:rgba(14,45,52,.42); stroke-width:4}
.bib-gebiedskaart .k-halo{fill:rgba(138,90,18,.22)}
/* De stille stip is geen tekst en hoeft alleen van de kaartvlakken te verschillen.
   Een lichte petroltint uit de familie van het palet. */
.bib-gebiedskaart .k-stip{fill:#8FB0B5}
.bib-gebiedskaart .k-stip--aan{fill:var(--orange)}
.bib-gebiedskaart .k-naam{font-family:var(--ff-head); font-size:27px; font-weight:600; fill:var(--ink-2)}
.bib-gebiedskaart .k-naam--aan{font-size:34px; font-weight:800; fill:var(--ink)}

.area-map .bib-gebiedskaart .k-buur{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.12)}
.area-map .bib-gebiedskaart .k-land{fill:rgba(255,255,255,.14)}
.area-map .bib-gebiedskaart .k-eigen{fill:rgba(138,90,18,.38)}
.area-map .bib-gebiedskaart .k-gemeenten{stroke:rgba(255,255,255,.18)}
.area-map .bib-gebiedskaart .k-grens{stroke:rgba(255,255,255,.5)}
/* De halo op het donkere kaartvlak moet lichter zijn dan dat vlak, anders
   verdwijnt de donkere accentstip erin. Een lichte petroltint uit dezelfde
   familie als de basis. */
.area-map .bib-gebiedskaart .k-halo{fill:rgba(205,220,221,.34)}
.area-map .bib-gebiedskaart .k-stip{fill:var(--line)}
.area-map .bib-gebiedskaart .k-naam{fill:rgba(255,255,255,.82)}
.area-map .bib-gebiedskaart .k-naam--aan{fill:#fff}


/* Prijsvergelijking op de tarievenpagina. De rechthoeken hebben geen eigen
   kleur in de SVG, die staat hier, zodat hij het palet volgt. */
.bib-prijsgrafiek{display:block; width:100%; height:auto; max-width:760px; margin:0 auto}
.bib-prijsgrafiek .g-naam{font-family:var(--ff-body); font-size:15px; fill:var(--ink)}
.bib-prijsgrafiek .g-spoor{fill:var(--line-soft)}
.bib-prijsgrafiek .g-bereik{fill:rgba(42,95,105,.26)}
.bib-prijsgrafiek .g-vanaf{fill:var(--blue)}
.bib-prijsgrafiek .g-bedrag{font-family:var(--ff-head); font-size:15px; font-weight:700; fill:var(--ink)}
.bib-prijsgrafiek--smal{display:none; max-width:360px}
.bib-prijsgrafiek--smal .g-naam{font-size:17px; font-weight:600}
.bib-prijsgrafiek--smal .g-bedrag{font-size:17px}
@media (max-width:720px){
  .bib-prijsgrafiek--breed{display:none}
  .bib-prijsgrafiek--smal{display:block}
}
.figuur{margin:34px 0 0; padding:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md)}
.figuur figcaption{margin-top:14px; color:var(--ink-3); font-size:.92rem; text-align:center; max-width:525px; margin-inline:auto}

/* Sprongkoppeling: onzichtbaar tot hij focus krijgt. */
.skiplink{position:absolute; left:-9999px; top:0; z-index:200; background:var(--orange); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--r) 0; font-weight:700; text-decoration:none}
.skiplink:focus{left:0}

/* Het merkteken is al een woordmerk, dus het hoeft geen tweede tekst ernaast. */
.brand .bib-merk{display:block; height:40px; width:auto}
/* Het merkteken is een svg, dus de .brand img-regels hierboven raken het niet.
   Zonder deze stappen bleef het 40 hoog en schoof de menuknop op 320 de rand in. */
@media (max-width:1240px){ .brand .bib-merk{height:38px} }
@media (max-width:620px){ .brand .bib-merk{height:32px} }
.footer-brand .bib-merk{display:block; height:38px; width:auto}


/* Een link in een lopende zin moet ook zonder kleurverschil te herkennen zijn.
   Onderstreping in plaats van alleen een andere kleur, want die haalde 3:1 niet. */
.muted a, .footer-bottom a, .art-body p a, .article p a, .hero-note a, .form-note a, .fbrand-adres a{
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.muted a:hover, .footer-bottom a:hover, .art-body p a:hover, .article p a:hover{text-decoration-thickness:2px}


/* De knoptekst in de voet mag de zachte voetkleur niet erven. */
.site-footer .btn-primary, .site-footer .btn-primary:visited{color:#fff}
.site-footer .btn-outline-light, .site-footer .btn-outline-light:visited{color:#fff}
/* Een link in een opsommingsregel krijgt dezelfde onderstreping als in lopende tekst. */
.checklist a, .flist span a, li span a{text-decoration:underline; text-underline-offset:2px}


/* De pijllink staat op de diepere accenttint. Het accent zelf haalt 5,7 op wit
   en zou genoeg zijn, maar de diepere tint haalt 7,1 en zet de pijllink een
   stap sterker dan de gewone accentkleur, zonder een andere kleur te worden. */
.link-arrow{color:var(--orange-dark)}

/* Tekstlinks op een donker vlak. Zonder deze regel erven ze het accent van de
   lichte pagina en zakt het contrast naar 2,0. Deze lichte petroltint haalt
   8,0 op het donkere vlak. */
.section--navy a:not(.btn), .area-copy a:not(.btn), .sidecard--cta a:not(.btn){color:#CDDCDD}
.section--navy a:not(.btn):hover, .area-copy a:not(.btn):hover, .sidecard--cta a:not(.btn):hover{color:var(--line)}

/* ---------- stappenraster op het werkelijke aantal kaarten ----------
   Vijf kaarten naast elkaar geeft kolommen van twintig tekens breed, en zes
   kaarten in vijf kolommen laat er een als wees op de tweede rij staan. Drie
   kolommen leest beter en vult beide rijen. Deze regels staan bewust onderaan,
   zodat ze de kolomtelling van .steps--vijf overschrijven. */
@media (min-width:1281px){
  .steps[data-aantal="5"],
  .steps[data-aantal="6"]{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
}
@media (min-width:861px) and (max-width:1280px){
  .steps[data-aantal="6"]{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
}
@media (min-width:861px){
  .steps[data-aantal="5"] > :nth-child(3n) .step-arrow,
  .steps[data-aantal="6"] > :nth-child(3n) .step-arrow{display:none}
}

/* Het vakicoon in de kop van een dienstkaart. Het staat op de regel van de kop
   zelf, zodat de kaarthoogte er niet door verandert, en het krijgt de
   accentkleur omdat het de enige kleur in de kaart is. */
.minicard h3{display:flex; align-items:center; gap:9px}
.minicard-icoon{width:22px; height:22px; flex:0 0 22px; color:var(--orange)}

/* Diagrammen in de kennisbank. Inline SVG in de kleuren van deze site: geen
   extra verzoek, scherp op elk scherm en per site anders. Het kader is 400 breed
   en staand, en de figuur wordt niet breder dan 460 pixels. Zo staan de letters
   op een scherm niet onnodig groot en op een telefoon nog altijd op ruim tien
   pixels, zonder dat er iets horizontaal hoeft te schuiven. */
.dia{margin:28px 0; padding:0}
.dia-svg{width:100%; max-width:460px; height:auto; display:block}
.dia figcaption{margin-top:10px; max-width:460px; color:var(--ink-3); font-size:.9rem; line-height:1.5}
.dia-kern{fill:var(--navy)}
.dia-kerntekst{fill:#fff; font-size:13px; font-weight:700}
.dia-vak{fill:var(--white); stroke:var(--line); stroke-width:1}
.dia-vak--tak{fill:var(--bg)}
.dia-lijn{fill:none; stroke:var(--line); stroke-width:1.5; stroke-linecap:round}
.dia-rail{fill:none; stroke:var(--line); stroke-width:1.5; stroke-linecap:round}
.dia-stip{fill:var(--orange)}
.dia-kop{fill:var(--ink); font-size:13px; font-weight:700}
.dia-tekst{fill:var(--ink-2); font-size:12px}
.dia-merk{fill:var(--orange); font-size:12px; font-weight:700}
.dia-bol{fill:var(--orange)}
.dia-bolnr{fill:#fff; font-size:13px; font-weight:700}
.dia-laag{stroke:var(--line); stroke-width:1}
.dia-laag-0{fill:var(--blue-soft)}
.dia-laag-1{fill:var(--bg)}
.dia-laag-2{fill:var(--line-soft)}
.dia-laagtekst{fill:var(--ink-2); font-size:12px; font-weight:600}
.dia-svg text{font-family:var(--ff-body)}

/* De kopbalk plakt bovenaan en is 70 pixels hoog, onder 1024 pixels 62, plus
   de lijn eronder. Een ankerdoel zonder eigen marge landt daar precies achter.
   De kennisbankkoppen hadden die marge al; het offerteblok nog niet, en de
   marge stapt hier mee met de twee hoogtes die de balk kan hebben. */
#offerte{scroll-margin-top:92px}
@media (max-width:1024px){ #offerte{scroll-margin-top:84px} }


/* Een callout die rechtstreeks in de paginakolom staat, is geen kader in een
   tekstkolom. De leesbaarheidsgrens van 690 pixels liet daar de rechterhelft
   van de sectie leeg. Hij vult nu de breedte: tekst links op leesbare maat,
   knoppen rechts ernaast. */
@media (min-width:861px){
  .wrap > .callout:has(> .hero-actions){
    max-width:none;
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    column-gap:40px; align-items:center;
  }
  .wrap > .callout:not(:has(> .hero-actions)){max-width:860px; margin-inline:auto}
  .wrap > .callout:has(> .hero-actions) > h3, .wrap > .callout:has(> .hero-actions) > .h3,
  .wrap > .callout:has(> .hero-actions) > p{
    grid-column:1; max-width:690px;
  }
  .wrap > .callout:has(> .hero-actions) > .hero-actions{
    grid-column:2; grid-row:1 / span 2; margin-top:0 !important; flex-wrap:nowrap;
  }
}

/* Vier vaste kolommen lieten bij drie kaarten een lege kolom rechts staan.
   Met auto-fit vallen lege sporen weg en delen de kaarten de volle breedte. */
.linkgrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Het bedrag hoort op de kaart van een rekenvoorbeeld: de kop erboven belooft
   bedragen en zonder dit stond er geen enkel bedrag in het blok. */
.svc-bedrag{font-weight:700; color:var(--ink); margin:10px 0 0}


/* De kolom naast het offerteformulier staat stil: geen sticky en geen eigen
   scrollgebied, want naast een lang formulier wordt dat een balkje in beeld. */
.form-side{display:grid; gap:18px; align-content:start}

/* ---------- offerteformulier ---------- */
/* Het bestandsveld toonde de kale browserknop. Dit is hetzelfde veld, met het
   label eroverheen als klikbaar vlak; de invoer zelf blijft in de pagina staan
   zodat het formulier zonder javascript werkt. */
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:22px 18px; border:1.5px dashed var(--line); border-radius:var(--r);
  background:var(--bg); cursor:pointer; position:relative;
  transition:border-color .18s ease, background .18s ease;
}
.dropzone:hover,.dropzone:focus-within{border-color:var(--orange); background:#fff}
.dropzone svg{color:var(--orange)}
.dz-input{position:absolute; inset:0; opacity:0; cursor:pointer}
.dz-titel{font-weight:700; font-size:.95rem; color:var(--ink)}
.dz-sub{font-size:.85rem; color:var(--ink-3)}
.dz-lijst{margin:9px 0 0; font-size:.86rem; color:var(--ink-2); text-align:center}
.dz-lijst:empty{display:none}

/* Een kopje boven een groep velden. Zonder die twee kopjes is het formulier
   een rij losse vakjes zonder volgorde. */
.veldgroep-kop{margin:0 0 12px}
.veldgroep-kop + .field,.veldgroep-kop + .field-row{margin-top:0}
form .veldgroep-kop:not(:first-of-type){margin-top:30px}
.veldkop{display:block; font-weight:700; font-size:.92rem; margin-bottom:7px; color:var(--ink)}
.veldkop-sub{font-weight:400; color:var(--ink-3)}

/* De kaart naast het formulier loopt mee met de hoogte, anders staat de
   rechterkolom voor twee derde leeg. */
.art-layout .form-side{height:100%}
.stappenkaart{height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(26px,2.4vw,34px)}
.stappenkaart .checklist{gap:18px}
.stappenkaart .checklist li span{color:#D5E2E1}
.stappenkaart .checklist svg{color:var(--orange)}

/* .field label is specifieker dan .dropzone, dus die won met display:block en
   zette het icoon en de twee regels op een rij. */
.field .dropzone{display:flex; flex-direction:column; align-items:center; margin:0}
.art-layout .form-side{align-self:stretch}

/* align-content:start hield de kaart op zijn eigen hoogte; met stretch loopt hij
   mee met het formulier ernaast. */
.art-layout .form-side{align-content:stretch}

/* Het formulier met beeld ernaast. De kolom rechts was een gekleurd vlak met
   drie regels in het midden; dat leest als een gat in de pagina. */
.formgrid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,2.6vw,40px); align-items:stretch; margin-top:clamp(32px,3.4vw,48px)}
.formgrid > div > .leadcard{margin:0; height:100%}
/* Het beeld rekt niet mee met de formulierhoogte: naast een lang formulier werd het
   een smalle strook met een derde van de foto in beeld (BEELD-STROOK in qa_visueel.js). */
.formbeeld{border-radius:var(--r-lg); overflow:hidden; align-self:start; aspect-ratio:4/5;
  min-height:420px; background:var(--line-soft)}
.formbeeld img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:900px){
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .formbeeld{min-height:240px; aspect-ratio:auto; order:-1}
}

/* Drie stappen in een raster van vier kolommen laat de vierde leeg. */
@media (min-width:1041px){ .steps[data-aantal="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:621px) and (max-width:1040px){ .steps[data-aantal="3"]{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .steps[data-aantal="3"]{grid-template-columns:1fr} }

/* ---------- accent op een donkere ondergrond ---------- */
/* De accentkleur haalt tegen de navy 2,0 op 1. Alles wat op een donkere kaart
   of band staat, krijgt daarom het lichte koper: 6,3 op de navy, 4,7 op
   --navy-3 (de hover van een donkere kaart), en nog steeds warm. */
:root{--accent-licht:#E8B894}
/* Alleen de echt donkere vlakken: in een sectie met een donkere achtergrond
   staan de kaarten zelf wit, en daar hoort de gewone accentkleur. */
.svc--all .link-arrow, .svc--all .svc-more,
.sidecard--cta .link-arrow, .sidecard--cta .side-tel,
.ctaband .link-arrow, .ctaband .eyebrow,
.finalcta > .wrap .link-arrow, .area-wrap .area-copy .link-arrow, .area-wrap .area-copy .eyebrow,
.stappenkaart .checklist svg{color:var(--accent-licht)!important}

/* De bovenregel van een kaartje is ook een <p>, dus ving hij de `flex:1` op die
   voor de tekstalinea bedoeld is. Hij rekte daardoor tot 97 pixels en duwde de
   kop naar beneden; naast een kaart zonder bovenregel staat dat scheef. */
.svc-body > p.eyebrow{flex:0 0 auto}

/* Een callout in een raster staat naast andere kaarten en begint dus bovenaan;
   de marge van 28 pixels hoort bij een callout die los in de tekst staat. */
.grid-2 > .callout, .grid-3 > .callout, .grid-4 > .callout{margin-top:0}

/* Geen afbreekstreepjes in koppen, op geen enkele breedte. Op een breed scherm
   maakte hyphens:auto van "uitgerekend" een "uit-gerekend", op een telefoon van
   "cementgebonden" een "cement-gebonden". Deze regel heft de hyphens:auto
   bovenaan op; tegen horizontaal scrollen op 320 werkt nu overflow-wrap. */
h1,h2,h3,h4,h5{hyphens:manual!important}

/* Een raster met een kaart en een callout ernaast rekt de korte kaart
   tot de hoogte van de lange, en dat laat onder de tekst een gat vallen.
   Beide beginnen bovenaan en houden hun eigen hoogte. */
.grid-2:has(> .callout), .grid-3:has(> .callout), .grid-4:has(> .callout){align-items:start}

/* Een alinea zonder klasse in een gecentreerd blok kreeg wel de leesbreedte van
   640 pixels mee, maar geen automarge. Daardoor stond de tekst wel gecentreerd
   binnen zijn kader en het kader zelf links. */


/* Vierentwintig pixels marge naast de inhoud is krap zodra het venster smaller
   is dan de maximale kolombreedte; dan raakt de kaart bijna de rand. */
.wrap{padding-inline:clamp(24px,3.4vw,56px)}

/* Op een donkere band houdt de witte kaart haar eigen donkere tekst, en een
   link erop de accenttint: de lichte tinten van de band horen niet op wit. */
.section--navy .rekenkaart .eyebrow{color:var(--orange)!important}
.section--navy .rekenkaart h3{color:var(--ink)}
.section--navy .rekenkaart p{color:var(--ink-2)}
.section--navy .rekenkaart a:not(.btn){color:var(--orange-dark)}
.section--navy .rekenkaart a:not(.btn):hover{color:var(--orange)}

/* ---------- rekenkaart: één klus doorgerekend ---------- */
/* Hier stonden twee ongelijke witte kaartjes naast elkaar: links de som als
   lopende zin, rechts een controlelijst. Je kon de som dus niet natellen zonder
   te lezen, en de kaartjes liepen qua hoogte uit elkaar. Nu is het één brede
   kaart met de berekening als tabel, en staat de controlelijst eronder los op
   de donkere achtergrond, omdat die over elke offerte gaat en niet over deze
   ene klus. */
.rekenkaart{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  padding:clamp(22px,2.3vw,36px); max-width:900px; margin-inline:auto;
}
.rekenkaart + .rekenkaart{margin-top:26px}
.rk-kop{display:grid; gap:14px; margin-bottom:clamp(20px,1.8vw,26px)}
.rk-kop > div{min-width:0}
.rk-kop h3{margin:0; font-size:clamp(1.18rem,1.6vw,1.5rem); line-height:1.25}
.rk-kop .eyebrow{margin-bottom:7px}
.rk-link{justify-self:start; white-space:nowrap}
@media (min-width:721px){
  .rk-kop{grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:30px}
  .rk-link{justify-self:end}
}
.rk-voor{margin:0 0 15px; color:var(--ink-2); font-size:.96rem}
.rk-slot{margin:17px 0 0; color:var(--ink-2); font-size:.96rem}

/* De tabel zit al in een kaart, dus geen tweede kader met schaduw erbinnen. */
.pricetable--vlak{border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:none}
.pricetable--vlak thead th:first-child{width:46%}
.pricetable--vlak thead th:nth-child(2){width:26%}
.pricetable--vlak thead th:last-child{width:28%}
.pricetable--vlak tbody td{padding-block:15px}
.pt-tarief{font-family:var(--ff-head); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
/* Het totaal is de regel waar de bezoeker naartoe leest, dus die krijgt de
   donkere balk in plaats van het grijze voetje van de prijstabel. */
.pricetable--vlak tfoot td{background:var(--navy); border-top:0; padding:17px 22px; color:#fff; font-size:.95rem}
.pricetable--vlak tfoot .pt-type{display:inline; color:#fff; font-size:1.06rem}
.pricetable--vlak tfoot .pt-price{color:#fff; font-size:1.32rem}
.rk-ex{font-size:.86rem; color:#D5E2E1; margin-left:8px; white-space:nowrap}

/* Op een smal scherm stapelt de prijstabel en verbergt zij haar voet. Het
   totaal is hier juist de kern, dus die blijft staan als eigen regel. */
@container (max-width:620px){
  .pricetable--vlak tfoot{display:block}
  /* De donkere balk hoort bij de hele regel. Stond hij op de cellen, dan werden
     het twee losse blokjes met wit ertussen zodra de tabel stapelt. */
  .pricetable--vlak tfoot tr{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px;
    flex-wrap:nowrap; padding:15px 20px; background:var(--navy);
  }
  .pricetable--vlak tfoot td{display:block; width:auto; padding:0; background:transparent}
  .pricetable--vlak tfoot td:first-child{min-width:0}
  .pricetable--vlak tfoot .pt-price::before{content:none}
  .pricetable--vlak tfoot td[data-label]::before{content:none}
  .rk-ex{display:block; margin:3px 0 0}
}
@container (max-width:400px){
  .pricetable--vlak tfoot tr{padding-inline:14px}
}

/* De controlepunten staan rechtstreeks op de donkere achtergrond. Een tweede
   witte kaart ernaast maakte er een rij van twee ongelijke blokken van. */
.checkrij{max-width:900px; margin:clamp(30px,3vw,44px) auto 0}
.checkrij h3{margin:0; font-size:clamp(1.1rem,1.4vw,1.3rem); text-align:center}
.checkrij .checklist{margin-top:18px}
.checkrij .checklist svg{color:var(--accent-licht)}

/* Eén knop met één regel eronder, allebei in het midden. De regel eronder had
   geen klasse en kreeg daardoor wel een leesbreedte maar geen automarge. */
.ctaslot{margin-top:clamp(30px,3vw,42px); text-align:center}
.ctaslot p{max-width:46ch; margin:16px auto 0; font-size:.95rem; color:#D5E2E1}

/* ---------- een link in lopende tekst ziet eruit als een link ---------- */
/* De basisregel geeft een link pas een onderstreping bij hover, en dan is het
   te laat: wie er niet toevallig overheen gaat, ziet hem niet. Een link midden
   in een alinea krijgt daarom altijd een onderstreping. Knoppen, kaarten, het
   kruimelpad, de inhoudsopgave en de linkrijen in de voet dragen hun eigen vorm
   en blijven zoals ze zijn; die hebben een klasse en vallen hier dus buiten. */
main p a:not([class]), main dd a:not([class]){
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
/* Op een donkere band heeft een link dezelfde tint als de tekst eromheen, dus
   daar komt er een eigen kleur bij. De lichte accenttint haalt 6,3 op de navy. */
.section--navy p a:not([class]), .finalcta p a:not([class]), .ctaslot p a:not([class]){
  color:var(--accent-licht); text-decoration-color:rgba(232,184,148,.6);
}
.section--navy p a:not([class]):hover, .finalcta p a:not([class]):hover, .ctaslot p a:not([class]):hover{
  color:#fff; text-decoration-color:currentColor;
}

/* ---------- de zijbalk krijgt geen eigen schuifbalk ---------- */
/* Een kolom die binnenin scrollt staat lelijk en wordt niet gevonden. Hij plakt
   zolang hij in het venster past; past hij niet, dan haalt het themascript het
   plakken eraf en scrolt hij met de pagina mee. */
.art-side--los{position:static}

/* Vierentwintig pixels is de ondergrens voor een aanraakdoel. Zonder deze regel
   zijn de vier links in de voetbalk twintig pixels hoog, op elke pagina. */
.fcol a, .footer-areas a, .footer-bottom a, .links a, .chips a, .crumbs a{display:inline-block; min-height:24px; line-height:24px}
/* De dienstnaam in de prijstabel is een link van negentien pixels hoog; op een
   telefoon is dat te klein om te raken. */
.pt-type a{display:inline-block; min-height:24px}

/* ---------- het formulier na verzenden (les 81) ---------- */
/* In het formulierraster op /contact/ rekte de kaart mee met de foto ernaast
   (height:100%). Na verzenden bleef hij dan op de hoogte van het formulier
   staan met alleen de bevestiging bovenaan: een wit vlak van ruim 400 pixels
   dat oogde alsof er iets niet geladen was. Verzonden is: de klasse is-sent
   (status ?offerte=ok), of de melding die het formulierscript van de statische
   site in plaats van het formulier zet. */
.leadcard.is-sent, .leadcard:has(> .sf-melding){align-self:start; min-height:0}
.formgrid > div > .leadcard.is-sent, .formgrid > div > .leadcard:has(> .sf-melding){height:auto}
.formgrid > div:has(> .leadcard.is-sent), .formgrid > div:has(> .leadcard > .sf-melding){align-self:start}
.form-vervolg{display:none; margin-top:16px; font-size:.95rem; color:var(--ink-2)}
.form-vervolg p{margin:0 0 12px}
.form-vervolg p:last-child{margin-bottom:0}
.leadcard.is-sent .form-vervolg, .leadcard:has(> .sf-melding) .form-vervolg{display:block}

/* ---------- compact uploadvlak in het korte formulier (les 94) ---------- */
/* Hetzelfde veld als op /contact/, maar op een regel: icoon en tekst naast
   elkaar, zodat het heroformulier er niet veel hoger van wordt. */
.field .dropzone--compact{flex-direction:row; justify-content:center; gap:9px; padding:11px 14px}
.dropzone--compact .dz-titel{font-size:.9rem}
.dropzone--compact .veldkop-sub{font-weight:400; font-size:.82rem}

/* ---------- vangnet: op een telefoon is elk inhoudsraster een kolom (les 79) ---------- */
/* Een variant met een eigen grid-template-columns (area-wrap--omgekeerd,
   split--breed, minigrid--vier en wat er per site nog bijkomt) stond in de CSS
   na de mobiele regel en hield het blok op 375 pixels in twee kolommen van
   164 pixels. Dit vangnet staat onderaan en draagt !important, zodat geen
   variant, ook een die later op een site wordt toegevoegd, het nog kan
   overschrijven. Alleen voor inhoudsrasters: de belbalk, de sociale knoppen,
   de vertrouwensbalk en twee velden naast elkaar houden hun eigen indeling.
   Een nieuw raster op een site? Zet zijn basisklasse in deze lijst. */
@media (max-width:620px){
  .hero-grid, .art-hero-grid, .split, .area-wrap, .grid-2, .grid-3, .grid-4,
  .minigrid, .calloutpaar, .duogrid, .factgrid, .formgrid, .art-layout,
  .badgerow, .steps, .footer-grid{grid-template-columns:minmax(0,1fr) !important}
}
.dropzone--compact .dz-titel{text-align:left}

.footer-brand img{display:block; height:38px; width:auto}