/* =========================================================
   Postema Bouwbedrijf — huisstijl stylesheet
   Merkkleur: #085590 (uit logo)
   ========================================================= */

:root{
  --blauw:#085590;
  --blauw-donker:#063e6a;
  --blauw-diep:#0b2a45;
  --blauw-licht:#e8f0f7;
  --oker:#d9a441;
  --zand:#f6f4f0;
  --zand-donker:#e7e4de;
  --inkt:#16202b;
  --grijs:#5c6874;
  --grijs-licht:#8a949e;
  --lijn:#dfdcd6;
  --wit:#ffffff;

  --max:1220px;
  --radius:4px;
  --schaduw:0 1px 2px rgba(16,32,43,.06), 0 8px 24px rgba(16,32,43,.07);
  --schaduw-hoog:0 2px 4px rgba(16,32,43,.08), 0 18px 44px rgba(16,32,43,.14);

  /* Het beeldmerk als masker, ingebakken als data-URI. Zo werkt het ook
     wanneer de site rechtstreeks vanaf de schijf wordt geopend (file://),
     waar browsers het laden van een los maskerbestand blokkeren. */
  --merk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23000' fill-rule='evenodd' role='img' aria-label='Beeldmerk Postema Bouwbedrijf'%3E%3Cpath d='M0.00,0.00 L100.00,0.00 L100.00,100.00 L29.70,100.00 L29.70,49.90 L29.60,49.90 L29.60,49.00 L29.50,49.00 L29.30,47.70 L29.20,47.70 L29.00,46.80 L28.70,46.40 L28.70,46.10 L28.50,46.00 L28.40,45.60 L28.20,45.50 L28.20,45.30 L28.00,45.20 L27.80,44.70 L26.60,43.50 L26.40,43.50 L26.20,43.20 L25.50,42.90 L25.40,42.70 L25.20,42.70 L24.60,42.30 L24.30,42.30 L24.10,42.10 L22.70,41.80 L22.70,41.70 L22.20,41.70 L22.20,41.60 L21.50,41.60 L21.50,41.50 L18.30,41.50 L18.30,41.60 L17.50,41.60 L17.50,41.70 L16.90,41.70 L16.90,41.80 L15.60,42.00 L15.60,42.10 L14.90,42.20 L14.90,42.30 L14.30,42.40 L14.10,42.60 L13.50,42.70 L13.10,43.00 L12.80,43.00 L12.80,43.10 L11.40,43.70 L11.30,43.90 L10.90,44.00 L10.80,44.20 L10.60,44.20 L10.00,44.60 L10.00,100.00 L0.00,100.00 Z M10.10,10.00 L10.00,10.00 L10.00,30.40 L8.80,31.50 L8.80,31.70 L8.30,32.10 L8.30,32.30 L8.00,32.50 L8.00,32.70 L7.40,33.30 L7.40,33.50 L7.20,33.60 L7.20,33.80 L7.00,33.90 L6.60,34.80 L6.40,34.90 L6.40,35.10 L6.30,35.10 L6.30,35.30 L6.20,35.30 L6.20,35.50 L6.10,35.50 L6.10,35.70 L6.00,35.70 L6.00,35.90 L5.50,36.70 L5.50,37.00 L5.20,37.40 L5.20,37.70 L5.10,37.70 L5.10,38.00 L4.90,38.20 L4.80,38.90 L4.60,39.20 L4.60,39.60 L4.40,39.90 L4.10,42.00 L4.00,42.00 L4.00,42.80 L4.10,42.80 L4.20,42.40 L4.40,42.30 L4.50,41.90 L4.70,41.80 L4.70,41.60 L4.90,41.50 L4.90,41.30 L5.10,41.20 L5.10,41.00 L5.30,40.90 L5.30,40.70 L5.60,40.50 L5.60,40.30 L5.90,40.10 L5.90,39.90 L6.40,39.50 L6.40,39.30 L7.10,38.70 L7.10,38.50 L7.60,38.10 L7.60,37.90 L9.80,35.70 L10.00,35.70 L10.80,34.90 L11.00,34.90 L11.10,34.70 L11.30,34.70 L11.40,34.50 L11.60,34.50 L11.70,34.30 L11.90,34.30 L12.30,33.90 L12.70,33.80 L12.80,33.60 L13.40,33.40 L13.50,33.20 L13.70,33.20 L13.70,33.10 L13.90,33.10 L14.70,32.60 L15.00,32.60 L15.40,32.30 L15.70,32.30 L16.10,32.00 L16.70,31.90 L16.90,31.70 L17.20,31.70 L17.20,31.60 L17.50,31.60 L17.50,31.50 L17.80,31.50 L17.80,31.40 L18.10,31.40 L18.40,31.20 L19.50,31.00 L19.80,30.80 L21.10,30.60 L21.10,30.50 L21.50,30.50 L21.50,30.40 L22.00,30.40 L22.00,30.30 L22.50,30.30 L22.50,30.20 L23.00,30.20 L23.00,30.10 L25.70,29.80 L25.70,29.70 L26.50,29.70 L26.50,29.60 L42.60,29.60 L42.70,30.50 L42.80,30.50 L42.80,30.80 L42.90,30.80 L42.90,31.10 L43.00,31.10 L43.00,31.40 L43.10,31.40 L43.30,32.00 L43.50,32.10 L43.60,32.50 L44.00,32.80 L44.00,33.00 L44.80,33.80 L45.00,33.80 L45.10,34.00 L45.30,34.00 L45.40,34.20 L45.60,34.20 L45.70,34.40 L45.90,34.40 L46.30,34.70 L46.60,34.70 L46.60,34.80 L46.90,34.80 L47.20,35.00 L47.60,35.00 L47.60,35.10 L48.30,35.10 L48.30,35.20 L49.30,35.20 L49.30,35.10 L50.00,35.10 L50.00,35.00 L50.80,34.90 L51.00,34.70 L51.30,34.70 L51.30,34.60 L52.10,34.30 L52.60,33.80 L52.80,33.80 L54.20,32.20 L54.20,32.00 L54.70,31.20 L54.70,30.90 L54.80,30.90 L55.00,29.60 L64.00,29.60 L64.00,29.70 L64.30,29.70 L64.30,29.80 L64.60,29.80 L64.70,30.00 L64.90,30.00 L65.80,31.00 L65.80,31.30 L66.00,31.60 L66.00,50.10 L65.90,50.10 L65.90,50.40 L65.80,50.40 L65.60,51.00 L65.00,51.60 L64.80,51.60 L64.50,51.90 L63.80,52.00 L63.80,52.10 L55.10,52.10 L54.70,50.50 L54.60,50.50 L54.10,49.30 L53.80,49.10 L53.80,48.90 L52.60,47.70 L52.40,47.70 L52.00,47.30 L51.80,47.30 L51.40,47.00 L51.10,47.00 L50.90,46.80 L49.70,46.60 L49.70,46.50 L48.00,46.50 L48.00,46.60 L47.40,46.60 L47.40,46.70 L47.00,46.70 L47.00,46.80 L46.70,46.80 L46.50,47.00 L46.20,47.00 L46.20,47.10 L45.80,47.20 L45.70,47.40 L45.30,47.50 L45.10,47.80 L44.90,47.80 L43.80,48.90 L43.80,49.10 L43.40,49.50 L43.40,49.70 L43.00,50.30 L43.00,50.60 L42.80,50.80 L42.80,51.20 L42.70,51.20 L42.70,51.60 L42.60,51.60 L42.60,73.30 L42.70,73.40 L49.40,73.20 L49.40,73.10 L50.60,73.10 L50.60,73.00 L51.50,73.00 L51.50,72.90 L53.70,72.70 L53.70,72.60 L54.30,72.60 L54.30,72.50 L56.30,72.20 L56.30,72.10 L58.70,71.60 L58.70,71.50 L59.70,71.30 L59.70,71.20 L61.20,70.80 L61.40,70.60 L62.00,70.50 L62.20,70.30 L63.00,70.10 L63.40,69.80 L63.70,69.80 L64.50,69.30 L64.80,69.30 L64.80,69.20 L65.60,68.90 L65.70,68.70 L66.70,68.30 L66.80,68.10 L67.40,67.90 L67.80,67.50 L68.20,67.40 L68.30,67.20 L68.50,67.20 L68.60,67.00 L68.80,67.00 L68.90,66.80 L69.40,66.60 L69.60,66.30 L69.80,66.30 L70.00,66.00 L70.20,66.00 L70.40,65.70 L70.60,65.70 L70.90,65.30 L71.10,65.30 L71.50,64.80 L71.70,64.80 L72.50,63.90 L72.70,63.90 L73.80,62.80 L73.80,62.60 L74.70,61.80 L74.70,61.60 L75.20,61.20 L75.20,61.00 L75.60,60.70 L75.60,60.50 L75.90,60.30 L75.90,60.10 L76.20,59.90 L76.20,59.70 L76.40,59.60 L76.40,59.40 L76.60,59.30 L76.60,59.10 L76.80,59.00 L76.80,58.80 L77.20,58.40 L77.30,58.00 L77.50,57.90 L77.60,57.50 L77.80,57.40 L78.20,56.40 L78.40,56.30 L78.40,56.10 L78.50,56.10 L78.50,55.90 L79.00,55.10 L79.00,54.80 L79.10,54.80 L79.30,54.10 L79.50,53.90 L79.50,53.60 L79.70,53.40 L79.70,53.10 L79.80,53.10 L79.80,52.80 L79.90,52.80 L79.90,52.50 L80.00,52.50 L80.00,52.20 L80.10,52.20 L80.10,51.90 L80.20,51.90 L80.20,51.60 L80.40,51.30 L80.40,50.90 L80.60,50.60 L80.70,49.70 L80.80,49.70 L80.90,48.80 L81.00,48.80 L81.00,48.30 L81.10,48.30 L81.20,47.10 L81.30,47.10 L81.40,45.50 L81.50,45.50 L81.50,44.30 L81.60,44.30 L81.50,37.40 L81.40,37.40 L81.40,36.60 L81.30,36.60 L81.00,34.10 L80.90,34.10 L80.80,33.20 L80.70,33.20 L80.60,32.40 L80.40,32.10 L80.40,31.70 L80.20,31.40 L80.20,31.00 L80.10,31.00 L79.90,30.10 L79.70,29.90 L79.60,29.30 L79.40,29.10 L79.40,28.80 L79.20,28.60 L79.20,28.30 L78.90,27.90 L78.90,27.60 L78.80,27.60 L78.00,25.80 L77.80,25.70 L77.60,25.10 L77.40,25.00 L77.30,24.60 L77.10,24.50 L77.00,24.10 L76.80,24.00 L76.80,23.80 L76.60,23.70 L76.60,23.50 L76.40,23.40 L76.20,22.90 L75.90,22.70 L75.90,22.50 L75.60,22.30 L75.60,22.10 L75.20,21.80 L75.20,21.60 L74.80,21.30 L74.80,21.10 L74.10,20.50 L74.10,20.30 L72.20,18.40 L72.00,18.40 L71.40,17.70 L71.20,17.70 L70.40,16.90 L70.20,16.90 L70.00,16.60 L69.50,16.40 L69.30,16.10 L69.10,16.10 L69.00,15.90 L68.80,15.90 L68.40,15.50 L68.20,15.50 L67.90,15.20 L67.50,15.10 L67.40,14.90 L66.80,14.70 L66.70,14.50 L66.50,14.50 L66.50,14.40 L66.30,14.40 L66.30,14.30 L66.10,14.30 L66.10,14.20 L65.90,14.20 L65.90,14.10 L65.70,14.10 L65.70,14.00 L65.50,14.00 L65.50,13.90 L65.30,13.90 L65.30,13.80 L65.10,13.80 L64.30,13.30 L64.00,13.30 L63.60,13.00 L63.30,13.00 L63.10,12.80 L62.30,12.60 L62.10,12.40 L61.80,12.40 L61.80,12.30 L61.50,12.30 L61.50,12.20 L61.20,12.20 L61.20,12.10 L60.90,12.10 L60.90,12.00 L60.60,12.00 L60.60,11.90 L60.30,11.90 L60.00,11.70 L59.60,11.70 L59.30,11.50 L58.50,11.40 L58.20,11.20 L57.70,11.20 L57.70,11.10 L55.30,10.70 L55.30,10.60 L53.10,10.40 L53.10,10.30 L51.10,10.20 L51.10,10.10 L49.40,10.10 L49.40,10.00 Z'/%3E%3C/svg%3E");

  --font-body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-kop:'Archivo','Inter','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font-body);color:var(--inkt);background:var(--wit);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:var(--blauw);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-kop);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;color:var(--inkt);}
h1{font-size:clamp(2.3rem,5.2vw,4rem);}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);}
h3{font-size:1.22rem;letter-spacing:-.01em;}
p{margin:0 0 1.1em;}
ul{margin:0 0 1.1em;padding-left:1.15em;}
li{margin-bottom:.4em;}
::selection{background:var(--blauw);color:#fff;}
:focus-visible{outline:3px solid var(--oker);outline-offset:3px;}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px;}
.sectie{padding:clamp(56px,7vw,104px) 0;}
.sectie--zand{background:var(--zand);}
.sectie--blauw{background:var(--blauw-diep);color:#dbe6f0;}
.sectie--blauw h2,.sectie--blauw h3{color:#fff;}
.sectie--smal{padding-block:clamp(40px,5vw,72px);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:12px 18px;border-radius:var(--radius);}

/* ---------- Beeldmerk ---------- */
/* Eén bronbestand, elke kleur: het merk wordt als masker gebruikt zodat
   background-color de kleur bepaalt. */
.merk{
  display:inline-block;background-color:currentColor;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.watermerk{
  position:absolute;pointer-events:none;z-index:0;
  background-color:currentColor;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}

/* ---------- Kopjes ---------- */
.kop-label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-kop);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blauw);margin-bottom:14px;
}
.kop-label::before{
  content:"";width:17px;height:17px;flex:none;background-color:var(--oker);
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.sectie--blauw .kop-label{color:#7fb4de;}
.lead{font-size:1.15rem;color:var(--grijs);max-width:62ch;}
.sectie--blauw .lead{color:#b9cbdc;}
.sectie-kop{max-width:64ch;margin-bottom:clamp(32px,4vw,52px);}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  font-family:var(--font-kop);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:15px 28px;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;transition:.18s ease;text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn--primair{background:var(--blauw);color:#fff;}
.btn--primair:hover{background:var(--blauw-donker);box-shadow:var(--schaduw-hoog);}
.btn--oker{background:var(--oker);color:#2a1e05;}
.btn--oker:hover{background:#c8942f;}
.btn--outline{border-color:var(--blauw);color:var(--blauw);background:transparent;}
.btn--outline:hover{background:var(--blauw);color:#fff;}
.btn--wit{border-color:rgba(255,255,255,.55);color:#fff;}
.btn--wit:hover{background:#fff;color:var(--blauw-diep);}
.btn-rij{display:flex;flex-wrap:wrap;gap:14px;}

/* ---------- Header ---------- */
.topbalk{background:var(--blauw-diep);color:#b9cbdc;font-size:.85rem;}
.topbalk .container{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap;}
.topbalk a{color:#e2ecf5;}
.topbalk ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.topbalk li{margin:0;display:flex;align-items:center;gap:7px;}
.topbalk svg{width:15px;height:15px;flex:none;opacity:.75;}

.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--lijn);transition:box-shadow .2s;}
.site-header.is-plakkerig{box-shadow:var(--schaduw);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px;}
.logo{display:flex;align-items:center;}
.logo__beeld{width:145px;height:40px;flex:none;display:block;}
.hoofdnav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.hoofdnav li{margin:0;}
.hoofdnav a{
  display:block;padding:10px 13px;border-radius:var(--radius);white-space:nowrap;
  font-family:var(--font-kop);font-weight:600;font-size:.97rem;color:var(--inkt);
}
.hoofdnav a:hover{background:var(--blauw-licht);color:var(--blauw);text-decoration:none;}
.hoofdnav a.actief{color:var(--blauw);box-shadow:inset 0 -3px 0 var(--oker);border-radius:0;}
.hoofdnav > .btn{display:none;}
.header-acties{display:flex;align-items:center;gap:14px;}
.header-tel{font-family:var(--font-kop);font-weight:700;color:var(--inkt);white-space:nowrap;}
.header-tel:hover{color:var(--blauw);text-decoration:none;}
.menu-knop{display:none;background:none;border:0;padding:10px;cursor:pointer;color:var(--inkt);}
.menu-knop svg{width:28px;height:28px;}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--blauw-diep);color:#fff;overflow:hidden;}
.hero__media{position:absolute;inset:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:1;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(3,18,31,.93) 0%,rgba(4,26,45,.80) 38%,rgba(6,40,68,.34) 62%,rgba(8,85,144,.10) 100%),
    linear-gradient(0deg,rgba(3,15,26,.72) 0%,rgba(3,15,26,0) 34%);
}
.hero__merk{
  position:absolute;right:-70px;bottom:-90px;width:min(440px,42vw);aspect-ratio:1;
  background-color:#ffffff;opacity:.05;z-index:1;pointer-events:none;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.hero__inner{position:relative;z-index:2;padding:clamp(84px,11vw,168px) 0 clamp(72px,8vw,124px);min-height:clamp(460px,58vh,640px);display:flex;align-items:center;}
.hero__tekst{max-width:46ch;text-shadow:0 2px 24px rgba(2,12,22,.55);}
.hero h1{color:#fff;text-wrap:balance;}
.hero h1 em{font-style:normal;color:var(--oker);}
.hero__lead{font-size:1.2rem;color:#cfdded;max-width:52ch;}
.hero .btn-rij{margin-top:32px;}

.usp-balk{position:relative;z-index:2;background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px);}
.usp-balk ul{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;list-style:none;margin:0;padding:0;}
.usp-balk li{display:flex;align-items:center;gap:12px;padding:22px 20px;color:#e4edf5;font-size:.95rem;font-weight:500;margin:0;}
.usp-balk li + li{box-shadow:inset 1px 0 0 rgba(255,255,255,.14);}
.usp-balk svg{width:22px;height:22px;flex:none;color:var(--oker);}

/* ---------- Kaarten / diensten ---------- */
.raster{display:grid;gap:22px;}
.raster--2{grid-template-columns:repeat(2,1fr);}
.raster--3{grid-template-columns:repeat(3,1fr);}
.raster--4{grid-template-columns:repeat(4,1fr);}

.dienst{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:32px 28px 28px;transition:.2s ease;display:flex;flex-direction:column;
}
.dienst::after{
  content:"";position:absolute;right:-26px;bottom:-30px;width:140px;height:140px;
  background-color:var(--blauw);opacity:.05;transition:opacity .2s ease,transform .2s ease;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.dienst:hover::after{opacity:.11;transform:translate(-6px,-6px);}
.dienst--plaats{flex-direction:row;align-items:center;gap:12px;padding:20px 24px;}
.dienst--plaats::after{width:64px;height:64px;right:-14px;bottom:-16px;opacity:.06;}
.dienst--plaats h3{margin:0;font-size:1.05rem;}
.dienst--plaats::before{
  content:"";width:10px;height:10px;flex:none;background-color:var(--oker);
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.dienst > *{position:relative;z-index:1;}
.dienst:hover{transform:translateY(-3px);box-shadow:var(--schaduw-hoog);border-color:#c8d6e2;}
.dienst__icoon{width:48px;height:48px;color:var(--blauw);margin-bottom:18px;}
.dienst__icoon svg{width:100%;height:100%;}
.dienst h3{margin-bottom:.45em;}
.dienst p{color:var(--grijs);font-size:.97rem;margin-bottom:1em;}
.dienst ul{font-size:.93rem;color:var(--grijs);padding-left:0;margin-bottom:1.2em;list-style:none;}
.dienst ul li{position:relative;padding-left:1.5em;}
.dienst ul li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  background-color:var(--blauw);opacity:.75;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.dienst__link{margin-top:auto;font-family:var(--font-kop);font-weight:700;font-size:.92rem;display:inline-flex;gap:8px;align-items:center;}
.dienst__link::after{content:"→";transition:transform .18s;}
.dienst:hover .dienst__link::after{transform:translateX(4px);}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.split--omgekeerd .split__media{order:2;}
.split__media{position:relative;}
.split__media img{border-radius:var(--radius);width:100%;box-shadow:0 18px 48px rgba(16,32,43,.18);}
.split__badge{
  position:absolute;right:-14px;bottom:-18px;background:var(--blauw);color:#fff;
  padding:20px 26px;border-radius:var(--radius);box-shadow:var(--schaduw-hoog);max-width:230px;
}
.split__badge strong{display:block;font-family:var(--font-kop);font-size:2.1rem;line-height:1;}
.split__badge span{font-size:.86rem;color:#c5dcf0;}

.cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0 0;padding:28px 0 0;border-top:1px solid var(--lijn);list-style:none;}
.cijfers li{margin:0;}
.cijfers strong{display:block;font-family:var(--font-kop);font-size:2rem;color:var(--blauw);line-height:1.1;}
.cijfers span{font-size:.9rem;color:var(--grijs);}

/* ---------- Stappen ---------- */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0;padding:0;counter-reset:stap;}
.stappen li{margin:0;position:relative;padding-top:34px;border-top:3px solid rgba(255,255,255,.18);}
.sectie--zand .stappen li{border-top-color:var(--lijn);}
.stappen li::before{
  counter-increment:stap;content:"0" counter(stap);
  position:absolute;top:-3px;left:0;font-family:var(--font-kop);font-weight:800;font-size:.9rem;
  color:var(--oker);letter-spacing:.08em;padding-top:10px;
}
.stappen h3{font-size:1.1rem;margin-bottom:.4em;}
.stappen p{font-size:.94rem;margin:0;}
.sectie--blauw .stappen p{color:#b9cbdc;}
.sectie--zand .stappen p{color:var(--grijs);}

/* ---------- Projecten ---------- */
.project{
  display:block;background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;transition:.2s ease;color:inherit;
}
.project:hover{transform:translateY(-3px);box-shadow:var(--schaduw-hoog);text-decoration:none;}
.project__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--blauw-diep);}
.project__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.project:hover .project__media img{transform:scale(1.04);}
.project__tag{
  position:absolute;top:14px;left:14px;background:rgba(8,85,144,.94);color:#fff;
  font-family:var(--font-kop);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:2px;
}
.project__body{padding:22px 24px 26px;}
.project__body h3{margin-bottom:.25em;}
.project__plaats{font-size:.88rem;color:var(--grijs-licht);text-transform:uppercase;letter-spacing:.1em;font-weight:600;}
.project__body p{font-size:.95rem;color:var(--grijs);margin:.7em 0 0;}

/* ---------- Quote ---------- */
.quote{max-width:56rem;margin-inline:auto;text-align:center;}
.quote blockquote{margin:0;font-family:var(--font-kop);font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:600;line-height:1.4;color:#fff;letter-spacing:-.01em;}
.quote figcaption{margin-top:22px;font-size:.94rem;color:#9db6cd;}
.quote__merk{width:56px;height:56px;margin:0 auto 26px;background-color:var(--oker);
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;}

/* ---------- CTA-band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--blauw);color:#fff;}
.cta-band::before{
  content:"";position:absolute;left:-60px;top:50%;transform:translateY(-50%);
  width:280px;height:280px;background-color:#fff;opacity:.07;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.cta-band .container{position:relative;z-index:1;}
.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-block:clamp(40px,5vw,60px);}
.cta-band h2{color:#fff;margin:0 0 .3em;font-size:clamp(1.6rem,2.8vw,2.2rem);}
.cta-band p{margin:0;color:#cfe2f2;max-width:52ch;}

/* ---------- Contact ---------- */
.contact-raster{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start;}
.contact-kaart{background:var(--zand);border:1px solid var(--lijn);border-radius:var(--radius);padding:32px;}
.contact-lijst{list-style:none;margin:0;padding:0;}
.contact-lijst li{display:flex;gap:16px;padding:16px 0;margin:0;border-bottom:1px solid var(--lijn);}
.contact-lijst li:last-child{border-bottom:0;}
.contact-lijst svg{width:22px;height:22px;color:var(--blauw);flex:none;margin-top:3px;}
.contact-lijst strong{display:block;font-family:var(--font-kop);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs-licht);margin-bottom:2px;}

.formulier{display:grid;gap:18px;}
.veld{display:grid;gap:7px;}
.veld--rij{grid-template-columns:1fr 1fr;gap:18px;display:grid;}
label{font-family:var(--font-kop);font-weight:600;font-size:.9rem;}
label .verplicht{color:#b4241f;}
input,select,textarea{
  font-family:inherit;font-size:1rem;color:var(--inkt);background:#fff;
  border:1px solid #c9c5bd;border-radius:var(--radius);padding:13px 15px;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--blauw);outline:2px solid rgba(8,85,144,.18);outline-offset:0;}
textarea{min-height:150px;resize:vertical;}
.form-hulp{font-size:.86rem;color:var(--grijs);margin:0;}
.honeypot{position:absolute;left:-9999px;}

/* ---------- Accordeon (FAQ) ---------- */
.faq{border-top:1px solid var(--lijn);}
.faq details{border-bottom:1px solid var(--lijn);}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-kop);font-weight:700;font-size:1.05rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:8px;top:19px;font-size:1.6rem;font-weight:400;color:var(--blauw);line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details > div{padding:0 44px 22px 0;color:var(--grijs);}

/* ---------- Paginakop ---------- */
.paginakop{position:relative;overflow:hidden;background:var(--blauw-diep);color:#fff;padding:clamp(52px,6vw,90px) 0 clamp(40px,5vw,64px);}
.paginakop::after{
  content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:300px;height:300px;background-color:#fff;opacity:.055;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.paginakop .container{position:relative;z-index:1;}
.paginakop h1{color:#fff;font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:.3em;}
.paginakop p{color:#c0d3e4;max-width:60ch;font-size:1.1rem;margin:0;}
.kruimels{font-size:.85rem;color:#8fadc7;margin-bottom:22px;}
.kruimels a{color:#cfe0ee;}
.kruimels span{opacity:.6;padding:0 6px;}

/* ---------- Prose (juridische pagina's) ---------- */
.prose{max-width:72ch;}
.prose h2{font-size:1.5rem;margin-top:2em;}
.prose h3{font-size:1.12rem;margin-top:1.6em;}
.prose ol{padding-left:1.2em;}

/* ---------- Footer ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--blauw-diep);color:#a9c0d4;padding:clamp(48px,6vw,76px) 0 0;font-size:.95rem;}
.site-footer::before{
  content:"";position:absolute;inset:0;opacity:.035;pointer-events:none;
  background:url(../img/beeldmerk-patroon.svg) repeat;background-size:150px 150px;
}
.site-footer .container{position:relative;z-index:1;}
.footer-raster{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:40px 44px;padding-bottom:48px;align-items:start;}
.footer-merk p{margin:0 0 14px;max-width:38ch;}
.footer-nummers{font-size:.88rem;color:#8fa9c0;letter-spacing:.01em;}
.footer-nummers strong{color:#fff;font-weight:600;}
.footer-nummers span{padding:0 6px;opacity:.5;}
.site-footer h4{font-family:var(--font-kop);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:10px;}
.site-footer a{color:#cddcea;}
.site-footer a:hover{color:#fff;}
.footer-logo{
  display:flex;align-items:center;
  height:40px;margin:0 0 22px;   /* zelfde bandhoogte als de kolomkoppen ernaast */
}
.footer-logo img{width:145px;height:40px;flex:none;display:block;}
/* kolomkoppen op dezelfde optische lijn als het woordmerk */
.site-footer h4{display:flex;align-items:center;height:40px;margin:0 0 22px;}
.footer-onder{border-top:1px solid rgba(255,255,255,.13);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.86rem;color:#8aa5bd;}
.footer-onder p{margin:0;}
.footer-onder ul{display:flex;gap:20px;flex-wrap:wrap;}
.footer-onder li{margin:0;}

/* ---------- Vacatures ---------- */
.vacature-kaart{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:30px 28px;color:inherit;transition:.2s ease;
}
.vacature-kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-hoog);text-decoration:none;border-color:#c8d6e2;}
.vacature-kaart h3{margin:0;}
.vacature-kaart p{margin:0 0 14px;color:var(--grijs);font-size:.95rem;}
.vacature-kaart__merk{
  position:absolute;right:-22px;bottom:-26px;width:120px;height:120px;
  background-color:var(--blauw);opacity:.06;transition:opacity .2s ease;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.vacature-kaart:hover .vacature-kaart__merk{opacity:.12;}
.vacature-kaart > *:not(.vacature-kaart__merk){position:relative;z-index:1;}

.vacature{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(28px,4vw,52px);box-shadow:var(--schaduw);
}
.vacature__kop{
  display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--lijn);
}
.vacature__kop h2{margin:0;}
.vacature__feiten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;}
.vacature__feiten li{display:flex;align-items:center;gap:9px;margin:0;font-size:.93rem;color:var(--grijs);}
.vacature__feiten svg{width:19px;height:19px;color:var(--blauw);flex:none;}
.vacature__kolommen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin-top:34px;padding-top:34px;border-top:1px solid var(--lijn);
}
.vacature__kolommen h3{font-size:1.08rem;margin-bottom:.7em;}
.vacature__slot{
  margin-top:36px;padding-top:30px;border-top:1px solid var(--lijn);
}
.vacature__slot p{max-width:60ch;}

.merklijst{list-style:none;padding:0;margin:0;font-size:.96rem;color:var(--grijs);}
.merklijst li{position:relative;padding-left:1.6em;margin-bottom:.6em;}
.merklijst li::before{
  content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;
  background-color:var(--blauw);opacity:.8;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}

/* ---------- Merkscheiding tussen secties ---------- */
.merk-scheiding{display:flex;align-items:center;gap:20px;padding:6px 0;}
.merk-scheiding::before,.merk-scheiding::after{content:"";flex:1;height:1px;background:var(--lijn);}
.merk-scheiding span{
  width:22px;height:22px;flex:none;background-color:var(--blauw);opacity:.55;
  -webkit-mask:var(--merk) no-repeat center/contain;
          mask:var(--merk) no-repeat center/contain;
}
.sectie--blauw .merk-scheiding::before,.sectie--blauw .merk-scheiding::after{background:rgba(255,255,255,.18);}
.sectie--blauw .merk-scheiding span{background-color:#fff;opacity:.5;}

/* ---------- Terug naar boven ---------- */
.naar-boven{
  position:fixed;right:22px;bottom:22px;z-index:90;width:52px;height:52px;
  display:grid;place-items:center;border:0;cursor:pointer;border-radius:var(--radius);
  background:var(--blauw);box-shadow:var(--schaduw-hoog);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s ease;
}
.naar-boven.zichtbaar{opacity:1;visibility:visible;transform:none;}
.naar-boven:hover{background:var(--blauw-donker);}
.naar-boven .merk{width:24px;height:24px;color:#fff;}
.naar-boven::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
}

/* ---------- Responsief ---------- */
@media (max-width:1260px){
  .header-tel{display:none;}
  .hoofdnav a{padding:10px 8px;font-size:.9rem;}
  .header-acties > .btn{padding:13px 18px;font-size:.88rem;}
  .logo__beeld{width:131px;height:36px;}
  .header-inner{min-height:72px;gap:14px;}
}
@media (max-width:1000px){
  .vacature__kolommen{grid-template-columns:1fr;gap:24px;}
  .raster--4{grid-template-columns:repeat(2,1fr);}
  .raster--3{grid-template-columns:repeat(2,1fr);}
  .stappen{grid-template-columns:repeat(2,1fr);}
  .usp-balk ul{grid-template-columns:repeat(2,1fr);}
  .usp-balk li + li{box-shadow:none;}
  .footer-raster{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .split--omgekeerd .split__media{order:0;}
  .contact-raster{grid-template-columns:1fr;}
  .split__badge{position:static;margin-top:16px;max-width:none;}
}
@media (max-width:900px){
  .menu-knop{display:block;}
  .header-tel{display:none;}
  .hoofdnav{
    position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--lijn);
    box-shadow:var(--schaduw);padding:12px 24px 24px;display:none;
  }
  .hoofdnav.is-open{display:block;}
  .hoofdnav ul{flex-direction:column;align-items:stretch;gap:0;}
  .hoofdnav a{padding:14px 4px;border-bottom:1px solid var(--lijn);border-radius:0;}
  .hoofdnav a.actief{box-shadow:inset 3px 0 0 var(--oker);padding-left:14px;}
  .hoofdnav > .btn{display:flex;margin-top:16px;width:100%;}
  .header-acties > .btn{display:none;}
  .topbalk ul{gap:16px;}
  .footer-raster{gap:32px;}
}
@media (max-width:640px){
  .hero__merk{right:-90px;bottom:-70px;width:300px;}
  .paginakop::after{width:200px;height:200px;right:-70px;}
  .naar-boven{right:14px;bottom:14px;width:46px;height:46px;}
  body{font-size:16px;}
  .raster--3,.raster--2,.raster--4{grid-template-columns:1fr;}
  .stappen{grid-template-columns:1fr;}
  .usp-balk ul{grid-template-columns:1fr;}
  .footer-raster{grid-template-columns:1fr;gap:32px;}
  .cijfers{grid-template-columns:1fr;text-align:left;}
  .veld--rij{grid-template-columns:1fr;}
  .topbalk .container{justify-content:center;text-align:center;}
  .btn{width:100%;}
  .btn-rij{flex-direction:column;}
}

@media print{
  .site-header,.topbalk,.site-footer,.cta-band,.menu-knop{display:none;}
  body{font-size:12pt;color:#000;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}