/* =====================================================================================
   Template webleap (gemeten nabouw van webleap.nl, 30-09-2026)
   Alle maten gemeten op 1440 / 1280 (laptop <=1366) / 900 (tablet <=1024) / 390 (mobiel <=767).
   Kleuren zijn tokens: bouw.py zet --acc (drager-blauw), --teal (accent) en de afgeleide tinten uit het logo.
   Zie stijlblad.md voor de meting per blok. Wijzig hier geen maten zonder nieuwe meting.
   ===================================================================================== */
:root{
  --acc:#2982e3; --acc-rgb:41,130,227;          /* gemeten: --e-global-color-accent */
  --teal:#01ccc1; --teal-rgb:1,204,193;         /* gemeten: --e-global-color-13f4785 */
  --link:#007aff; --link-rgb:0,122,255;         /* gemeten: blogknop, stipjes, voortgangsbalk */
  --ink:#1b1f24;                                 /* gemeten: --e-global-color-secondary (koppen, footer) */
  --txt:#4d4d4d;                                 /* gemeten: --e-global-color-text */
  --licht:#daf4f9; --licht-2:#f1f7fe;           /* gemeten: lichte secties (pixels) */
  --mix-90:#0cb7ca; --mix-70:#17a3d3; --mix-50:#1f96da; --mix-30:#228edd; --mix-hi:#1bc6d6;  /* verloop teal->blauw, gemeten in hero */
  --eyebrow-bg:#f6f6f6;
  --lijn:rgba(77,77,77,.3);
  --kop:"Kop","Arial Black",Arial,sans-serif;
  --tekst:"Poppins",Arial,sans-serif;
  --w:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;font-family:var(--tekst);font-size:16px;line-height:30px;color:var(--txt);background:#fff;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0}
button{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:#fff;color:var(--ink);padding:10px 16px}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}

/* ---------- container: 1280 boxed, laptop 95%, mobiel 90% (gemeten 1216@1280, 855@900, 351@390) ---------- */
.c{width:min(var(--w),100% - 160px);margin-inline:auto;position:relative}
@media (max-width:1366px){.c{width:95%}}
@media (max-width:767px){.c{width:90%}}

/* =====================================================================================
   SECTIES: de bron stapelt secties met 100px rondingen die over elkaar schuiven.
   licht  = lichte textuur, onderhoeken rond, z 5
   blauw  = verloop, schuift 207px onder de vorige sectie (pad 327 = 120 + 207)
   wit-r  = wit, bovenhoeken rond, schuift 104px over de vorige
   ===================================================================================== */
.s{position:relative;padding:120px 0;overflow-x:clip}
.s-wit{background:#fff}
.s-licht{background-color:var(--licht);background-image:url(/assets/img/lijnen-licht.svg),radial-gradient(60% 45% at 50% 0%,var(--licht-2),transparent 70%),radial-gradient(50% 40% at 100% 100%,var(--licht-2),transparent 70%);background-size:cover,100% 100%,100% 100%;background-position:center}
.s-blauw{background-color:var(--acc);background-image:url(/assets/img/lijnen-blauw.svg),var(--verloop-blauw);background-size:cover,100% 100%;color:#fff}
.s-hero{background-color:var(--acc);background-image:url(/assets/img/lijnen-blauw.svg),var(--verloop-hero);background-size:cover,100% 100%;color:#fff}
:root{
  --verloop-hero:radial-gradient(55% 60% at 100% 0%,var(--mix-hi) 0%,rgba(var(--acc-rgb),0) 70%),linear-gradient(90deg,var(--mix-90) 0%,var(--mix-70) 20%,var(--mix-30) 38%,var(--acc) 48%,var(--acc) 72%,var(--mix-50) 86%,var(--mix-70) 100%);
  --verloop-blauw:radial-gradient(40% 55% at 0% 10%,var(--mix-hi) 0%,rgba(var(--acc-rgb),0) 70%),radial-gradient(40% 60% at 100% 25%,var(--mix-90) 0%,rgba(var(--acc-rgb),0) 70%),linear-gradient(90deg,var(--mix-70) 0%,var(--mix-50) 25%,var(--acc) 45%,var(--acc) 58%,var(--mix-50) 78%,var(--mix-90) 100%);
}
.rb{border-radius:0 0 100px 100px}            /* onderhoeken rond */
.rt{border-radius:100px 100px 0 0}            /* bovenhoeken rond */
.z5{z-index:5}
.s-blauw.onder{margin-top:-207px;padding:327px 0 227px}   /* gemeten: mar -207, pad 327/227 */
.s-blauw.onder.rb{padding-bottom:120px}
.s-blauw.los{padding:120px 0}
.over{margin-top:-104px}                       /* wit-r over blauw: mar -104 */
@media (max-width:1024px){
  .s{padding:100px 0}
  .s-blauw.onder{padding:200px 0 150px}
}
@media (max-width:767px){
  .s{padding:80px 0 100px}
  .rb{border-radius:0 0 50px 50px}
  .rt{border-radius:50px 50px 0 0}
  .s-blauw.onder{margin-top:-80px;padding:150px 0 120px}
  .s-blauw.onder.rb{padding-bottom:100px}
  .over{margin-top:-60px}
}

/* decoratieve ring (bron: Circle-Shape.webp, witte ring met lage dekking) */
.ring{position:absolute;pointer-events:none;border-radius:50%;border:50px solid rgba(255,255,255,.2);z-index:0}
.ring-lb{width:300px;height:300px;left:-150px;top:-120px;border-color:rgba(255,255,255,.1)}
.ring-r{width:310px;height:310px;right:-155px;bottom:0;border-width:50px}
.ring-f{width:310px;height:310px;right:-120px;bottom:-110px;border-color:rgba(255,255,255,.08)}
@media (max-width:767px){.ring-lb{width:200px;height:200px;left:-100px;top:-80px;border-width:34px}.ring-r{width:150px;height:150px;right:-75px;border-width:26px}.ring-f{width:180px;height:180px;right:-80px;bottom:-60px;border-width:30px}}

/* =====================================================================================
   TYPOGRAFIE
   ===================================================================================== */
.h1{font-family:var(--kop);font-weight:900;font-size:47px;line-height:63px;letter-spacing:-.085em;word-spacing:.085em;text-transform:uppercase;color:#fff}
.h2{font-family:var(--kop);font-weight:900;font-size:47px;line-height:62px;letter-spacing:-.085em;word-spacing:.085em;text-transform:uppercase;color:var(--ink)}
.h2.klein{font-size:36px;line-height:60px}      /* links uitgelijnde variant */
.h2.cta-kop{font-size:36px;line-height:48px;color:#333}
.op-blauw .h2,.s-blauw .h2,.s-hero .h2{color:#fff}
.midden{text-align:center}
.intro{font-size:16px;line-height:30px;color:var(--txt);max-width:796px;margin:18px auto 0}
.s-blauw .intro,.s-hero .intro{color:#fff;font-weight:500}
/* accentwoord: teal pil, iets gekanteld (gemeten matrix(1.01943,-.034,.034,1.01943) = -1.91deg / 1.02) */
.acc{position:relative;display:inline-block;color:#fff;z-index:0;transform:rotate(-1.91deg) scale(1.02);margin:0 .28em}
.acc::before{content:"";position:absolute;inset:0 -7px;background:var(--teal);border-radius:15px;z-index:-1;transform:scale(1.01)}
.klein .acc,.cta-kop .acc,.links .acc{transform:scale(1.01)}
.acc-l{margin-left:12px}
@media (max-width:1024px){.h1,.h2{font-size:40px;line-height:46px}.h2.klein,.h2.cta-kop{font-size:32px;line-height:46px}}
@media (max-width:767px){
  .h1{font-size:24px;line-height:30px}
  .h2{font-size:24px;line-height:33px}
  .h2.klein{font-size:20px;line-height:32px}
  .h2.cta-kop{font-size:24px;line-height:36px}
  .acc{transform:scale(1.02)}
  .acc::before{inset:0 -5px;border-radius:5px}
}

/* eyebrow-pil (gemeten: pad 4px 23px, rand 1/3/1/3 acc, radius 60, tekst in verloop acc->teal) */
.eb{display:inline-block;padding:4px 23px;border:solid var(--acc);border-width:1px 3px;border-radius:60px;background:var(--eyebrow-bg);font-size:16px;line-height:30px;font-weight:400}
.eb span{background:linear-gradient(to right,var(--acc),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.kop-blok{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.kop-blok .eb{margin-bottom:7px}
.kop-blok.links{align-items:flex-start;text-align:left;gap:15px}
.kop-blok.links .eb{margin-bottom:0}
@media (max-width:767px){.eb{font-size:14px;line-height:24px;padding:3px 18px}}

/* =====================================================================================
   KNOPPEN
   ===================================================================================== */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:12px 24px;border-radius:800px;font:600 16px/30px var(--tekst);text-transform:uppercase;white-space:nowrap;transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1)}
.knop:hover{transform:translateY(-2px)}
.knop .pijl{width:62px;height:41px;border-radius:41px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.knop .pijl svg{width:30px;height:16px}
.k-verloop{background:linear-gradient(90deg,var(--acc) 46%,var(--teal) 100%);color:#fff;box-shadow:var(--teal) 0 -1px 40px 0}
.k-verloop .pijl{background:#fff;color:var(--acc)}
.k-wit{background:#fff;color:var(--acc);box-shadow:var(--teal) 0 -1px 40px 0}
.k-wit .pijl{background:linear-gradient(90deg,var(--acc) 0%,var(--teal) 100%);color:#fff}
.k-rand{border:1px solid #fff;color:#fff;background:transparent;padding:12px 24px}
.k-rand .pijl{width:35px;height:35px;background:none;color:#fff}
.k-sessie{background:linear-gradient(263.78deg,var(--teal) 9.78%,var(--acc) 46.47%);color:#fff;box-shadow:rgba(var(--teal-rgb),.14) 0 4px 30px 0;gap:5px}
.k-sessie svg{width:21px;height:21px}
.k-lees{display:inline-flex;align-items:center;gap:5px;padding:2px 20px;border:1px solid var(--link);border-radius:100px;background:#fff;color:var(--link);font:600 16px/30px var(--tekst);text-transform:uppercase}
.k-lees svg{width:14px;height:14px}
.k-info{display:inline-flex;align-items:center;gap:10px;padding:5px 20px;border:1px solid var(--link);border-radius:800px;color:var(--link);font:600 16px/30px var(--tekst);text-transform:uppercase}
.k-info svg{width:20px;height:20px}
.knoppen{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.knoppen.midden{justify-content:center}
.knop-onder{display:flex;justify-content:center;margin-top:50px}
@media (max-width:767px){
  .knoppen{flex-direction:column;align-items:stretch;gap:20px}
  .knop{width:100%;font-size:14px;line-height:16px;white-space:normal;text-align:center;padding:12px 24px}
  .knop .pijl{width:42px;height:28px}
  .knop .pijl svg{width:22px;height:12px}
  .k-rand{line-height:30px}
  .k-rand .pijl{width:35px;height:35px}
  .knop-onder{margin-top:40px}
}

/* =====================================================================================
   HEADER (statisch, pil met witte rand, ligt over de hero; gemeten 1280x77 op y=30)
   ===================================================================================== */
.kop-balk{position:absolute;left:0;right:0;top:30px;z-index:50}
.nav-pil{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 30px;border:1px solid #fff;border-radius:800px;box-shadow:rgba(0,0,0,.05) 0 0 40px 0;min-height:77px}
.logo img{width:219px;height:36px;object-fit:contain;object-position:left center}
.menu{display:flex;gap:13px;list-style:none;margin:0;padding:0;align-items:center}
.menu>li{position:relative}
.menu>li>a,.menu>li>.sub-knop{display:inline-flex;align-items:center;gap:5px;font:500 16px/30px var(--tekst);color:#fff;background:none;border:0;padding:0;cursor:pointer}
.menu>li>.sub-knop svg{width:16px;height:16px}
.menu .sub{position:absolute;top:100%;left:-20px;min-width:290px;padding:14px 0;margin:0;list-style:none;background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.12) 0 10px 40px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .35s,visibility .35s;z-index:60}
.menu .sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.menu>li:hover>.sub,.menu>li:focus-within>.sub,.menu>li.open>.sub{opacity:1;visibility:visible;transform:none}
.menu .sub a{display:block;padding:7px 24px;font:500 15px/24px var(--tekst);color:var(--ink)}
.menu .sub a:hover{color:var(--acc)}
.menu-cta{display:inline-flex;align-items:center;gap:5px;padding:12px 24px;border-radius:800px;background:#fff;color:var(--acc);font:600 12px/20px var(--tekst);text-transform:uppercase;white-space:nowrap}
.menu-cta svg{width:21px;height:21px}
.hamburger{display:none;width:32px;height:32px;border:0;border-radius:3px;background:var(--acc);color:#fff;padding:6px;cursor:pointer}
.hamburger svg{width:20px;height:20px}
.soc-nav{display:flex;gap:8px}
@media (max-width:1366px){.menu{gap:10px}.menu>li>a,.menu>li>.sub-knop{font-size:15px}.nav-pil{padding:10px 20px;min-height:52px}.logo img{width:180px;height:30px}}
@media (max-width:1100px){.menu,.nav-pil>.menu-cta{display:none}.hamburger{display:inline-flex}}
@media (max-width:767px){.kop-balk{top:25px}.nav-pil{padding:15px 20px;border-radius:100px;min-height:64px}.logo img{width:161px;height:27px}}
/* mobiel menu: paneel onder de pil */
.mob-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.15) 0 10px 40px;padding:14px 24px;max-height:calc(100vh - 140px);overflow:auto}
.mob-menu.open{display:block}
.mob-menu .mm-lijst a,.mob-menu .mm-lijst summary{display:block;padding:10px 0;font:500 16px/24px var(--tekst);color:var(--ink);border-bottom:1px solid #eee;cursor:pointer}
.mob-menu details a{padding-left:16px;font-size:15px}
.mob-menu summary{list-style:none;display:flex;justify-content:space-between}
.mob-menu summary::-webkit-details-marker{display:none}

/* =====================================================================================
   HERO
   ===================================================================================== */
.hero{position:relative;overflow:hidden;overflow:clip;padding:212px 0 170px}   /* gemeten: h1 op page-y 212, einde 911 */
.hero .c{z-index:2}
.hero-home .h1{max-width:1280px}
.hero-split{display:flex;gap:20px;margin-top:34px}
.hero-split .links{flex:0 0 756px;display:flex;flex-direction:column;gap:20px}
.hero-split .links>p{max-width:711px;font-weight:500;color:#fff;margin:0}
.hero-foto{flex:0 0 504px;position:relative}
.hero-foto .notch{width:504px;height:369px}
.hero-badge{position:absolute;right:-36px;top:-99px;width:168px}
.hero-badge img{width:168px;height:auto}
.iconlijst{list-style:none;margin:0;padding:0}
.iconlijst li{display:flex;align-items:center;gap:10px;padding-bottom:7.5px}
.iconlijst li:last-child{padding-bottom:0}
.iconlijst .ic{flex:none}
.hero .iconlijst li{font:600 20px/30px var(--tekst);color:#fff}
.hero .iconlijst .ic{width:41px;height:41px;flex:none}
.hero .iconlijst li{min-height:41px;padding-bottom:15px;gap:15px}
.hero .iconlijst li:last-child{padding-bottom:0}
.hero-mid{padding:200px 0 88px;text-align:center}
.hero-mid .h1{line-height:70px}
.hero-mid .intro{max-width:909px;margin:35px auto 0}
.usp-rij{display:flex;justify-content:space-between;gap:20px;margin-top:34px;padding-top:35px;border-top:1px solid rgba(255,255,255,.46)}
.usp-rij.midden{justify-content:center;gap:60px}
.usp-rij li{display:flex;align-items:center;gap:14px;font:600 20px/30px var(--tekst);color:#fff;text-align:left;max-width:422px}
.usp-rij .ic{width:54px;height:54px;flex:none}
.hero-mid .knoppen{margin-top:34px;justify-content:center}
.hero-simpel{padding:212px 0 90px;text-align:center}
.hero-simpel .h1{line-height:62px}
@media (max-width:1366px){.hero-split .links{flex:1 1 auto}.hero-foto{flex:0 0 40%}.hero-foto .notch{width:100%;height:auto;aspect-ratio:504/369}.hero-badge{right:0}}
@media (max-width:1024px){.hero-split{flex-direction:column}.hero-foto{flex:none;max-width:504px}.usp-rij{flex-wrap:wrap;justify-content:center}}
@media (max-width:767px){
  .hero{padding:185px 0 50px}
  .hero-split{margin-top:22px;gap:30px}
  .hero-split .links{gap:20px}
  .hero .iconlijst li{font-size:18px}
  .hero-badge{right:0;top:-160px;width:130px}.hero-badge img{width:130px}
  .hero-mid{padding:185px 0 60px}.hero-mid .h1{line-height:30px}
  .hero-mid .intro{margin-top:22px}
  .usp-rij{flex-direction:column;align-items:flex-start;gap:14px;padding-top:25px;margin-top:25px}
  .usp-rij li{font-size:16px;line-height:24px}.usp-rij .ic{width:44px;height:44px}
  .hero-simpel{padding:185px 0 60px}.hero-simpel .h1{line-height:30px}
}

/* =====================================================================================
   UITSPARING ('notch'): foto met ingesneden hoek rechtsonder. Pad via site.js (clip-path: path),
   zonder JS een gewone afgeronde rechthoek.
   ===================================================================================== */
.notch{position:relative;border-radius:30px;overflow:hidden}
.notch>img{width:100%;height:100%;object-fit:cover}
.notch-wrap{position:relative}
.notch-label{position:absolute;left:0;right:105px;bottom:0;height:62px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 20px 0;font:600 18px/30px var(--tekst);color:#fff}
.notch-label .gezichten{display:flex}
.notch-label .gezichten span{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-10px;background-size:cover;background-position:center}
.notch-label .gezichten span:first-child{margin-left:0}

/* =====================================================================================
   EXPERTISEKAARTEN (3 fotokaarten met vinklijst; gemeten kaart 413x821, rad 30, rand 1px, schaduw)
   ===================================================================================== */
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:75px}
.exp-kaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:30px;box-shadow:rgba(0,0,0,.06) 0 5px 39.4px 0;overflow:hidden}
.exp-foto{position:relative;height:300px;margin:0}
.exp-foto img{width:100%;height:100%;object-fit:cover;transition:opacity .6s cubic-bezier(.22,.61,.36,1)}
.exp-foto .notch{height:300px;border-radius:30px}
.exp-foto .ic-hoek{position:absolute;right:48px;top:261px;width:81px;height:80px;border-radius:14px;background:var(--teal);z-index:2;display:flex;align-items:center;justify-content:center;color:#fff}
.exp-foto .ic-hoek span{display:contents}
.exp-foto .ic-hoek svg{width:44px;height:44px}
.exp-body{display:flex;flex-direction:column;gap:20px;padding:18px 30px 30px;flex:1}
.exp-body h3{font:600 22px/30px var(--tekst);color:var(--ink);margin-top:7px;max-width:206px}
.exp-body>p{margin:-10px 0 0}
.vinklijst{list-style:none;margin:0;padding:0}
.vinklijst li{display:flex;align-items:flex-start;gap:5px;padding-bottom:5px;color:var(--txt)}
.vinklijst li:last-child{padding-bottom:0}
.vinklijst li+li{margin-top:5px}
.vinklijst svg{flex:none;width:18px;height:18px;margin-top:6px;margin-right:5px;color:var(--acc)}
.exp-body .knop{margin-top:auto;align-self:flex-start}
.exp-body .vinklijst{margin-bottom:20px}
@media (max-width:1366px){.exp-body h3{max-width:none}}
@media (max-width:1024px){.exp-grid{grid-template-columns:1fr 1fr}}

/* =====================================================================================
   SLIDER (generiek: reviews, blog en expertise op mobiel, diensten)
   ===================================================================================== */
.sl{position:relative}
.sl-raam{overflow:hidden}
.sl-baan{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.sl-baan>*{flex:0 0 calc(100% / var(--per,3))}
.sl-pijlen{display:flex;justify-content:center;gap:10px;margin-top:35px}
.sl-pijl{width:70px;height:70px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--acc),var(--teal));color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .4s}
.sl-pijl:hover{transform:scale(1.05)}
.sl-pijl svg{width:24px;height:24px}
.s-blauw .sl-pijl,.sl-wit .sl-pijl{background:#fff;color:var(--ink)}
@media (max-width:767px){.sl-pijl{width:50px;height:50px}.sl-pijl svg{width:18px;height:18px}}
/* mobiele variant van grids: op mobiel een slider met omlijnde pijlen */
@media (max-width:767px){
  .m-slider .sl-baan{display:flex!important;gap:0!important}
  .m-slider .sl-baan>*{flex:0 0 100%!important;min-width:0}
  .m-slider .sl-pijl{width:56px;height:56px;background:#fff;border:1px solid var(--acc);color:var(--acc)}
}
@media (min-width:768px){.m-slider .sl-pijlen{display:none}.m-slider .sl-baan{display:grid;transform:none!important}.m-slider .sl-baan>*{flex:none}}

/* =====================================================================================
   PROJECTEN (4x2 raster, 305x298, rad 20, knop 'Bekijk project' verschijnt bij hover)
   ===================================================================================== */
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:70px}
.proj{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:305/298;display:block;background:#e8f1fb}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.proj .k-proj{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(8px);opacity:0;transition:opacity .45s,transform .45s;display:inline-flex;gap:6px;align-items:center;padding:8px 24px;border-radius:500px;background:var(--teal);color:#fff;font:600 16px/30px var(--tekst);white-space:nowrap}
.proj .k-proj svg{width:14px;height:14px}
.proj:hover img{transform:scale(1.03)}
.proj:hover .k-proj,.proj:focus-visible .k-proj,.altijd-knop .proj .k-proj{opacity:1;transform:translate(-50%,-50%)}
.proj.verborgen{display:none}
@media (max-width:1024px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.proj-grid{gap:10px;margin-top:50px}.proj .k-proj{padding:4px 16px;font-size:14px;opacity:1;transform:translate(-50%,-50%)}.proj .k-proj svg{display:none}}

/* =====================================================================================
   SPLIT MET KADERFOTO (over-blok op blauw; gemeten foto 605x657, tekst 605, gap 70)
   ===================================================================================== */
.split{display:flex;gap:70px;align-items:flex-start;justify-content:space-between}
.split>*{flex:0 0 calc(50% - 35px);min-width:0}
.split .tekst{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.split .tekst>p{margin:0}
.split.midden-v{align-items:center}
.split.omgekeerd{flex-direction:row-reverse}
.s-blauw .split .tekst>p{font-weight:500;color:#fff}
.kader{position:relative;padding:14px;border-radius:44px;background:rgba(255,255,255,.4)}
.kader .notch{border-radius:30px;aspect-ratio:577/629}
.kader img{width:100%;height:100%;object-fit:cover}
.split .iconlijst{margin:20px 0 25px}
.split .iconlijst li{gap:10px;padding-bottom:10px;font-size:16px;line-height:30px}
.split .iconlijst .ic{width:38px;height:38px;flex:none}
.s-blauw .split .iconlijst .ic{background:rgba(255,255,255,.14);color:#fff}
.s-blauw .split .iconlijst li{color:#fff}
@media (max-width:1024px){.split{flex-direction:column-reverse;gap:50px}.split.omgekeerd{flex-direction:column-reverse}.split>*{width:100%}}

/* iconen: witte cirkel met verloopglyph (bron: eigen svg's) */
.ic{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--acc)}
.ic svg{width:56%;height:56%}
.ic.verloop{background:linear-gradient(135deg,var(--acc),var(--teal));color:#fff}
.ic.vlak{border-radius:12px}

/* =====================================================================================
   REVIEWS (kaart 387x408 in slide 427 met pad 20, rad 20, schaduw; tekst 160 hoog scrollt)
   ===================================================================================== */
.rev-sl{margin-top:75px}
.rev-sl .sl-raam{margin:0}
.rev{padding:20px}
.rev-kaart{margin:0;display:flex;flex-direction:column;gap:15px;height:100%;min-height:408px;padding:30px;background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.08) 0 3px 20.8px 0}
.rev-top{display:flex;justify-content:space-between;align-items:center;height:37px}
.sterren{display:inline-flex;gap:4px;padding:6px 18px;border-radius:40px;background:rgba(var(--teal-rgb),.1);color:var(--teal)}
.sterren svg{width:18px;height:18px}
.rev-quote{width:50px;height:37px;color:rgba(var(--acc-rgb),.35)}
.rev-tekst{margin:0;height:160px;overflow:auto;padding-right:20px;scrollbar-width:thin}
.rev-wie{margin-top:10px;display:flex;align-items:center;gap:20px;padding-top:20px;border-top:1px solid rgba(77,77,77,.2)}
.avatar{width:58px;height:58px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:400 26px/1 var(--tekst);color:#fff;flex:none;position:relative}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rev-naam{font:500 20px/30px var(--tekst);color:var(--ink)}
.rev-bron{font-size:16px;line-height:24px;color:var(--txt)}
/* glasvariant op blauw */
.s-blauw .rev-kaart{background:rgba(255,255,255,.2);box-shadow:rgba(0,0,0,.05) 0 0 40px}
.s-blauw .rev-tekst,.s-blauw .rev-naam,.s-blauw .rev-bron{color:#fff}
.s-blauw .sterren{background:#fff}
.s-blauw .rev-quote{color:rgba(255,255,255,.35)}
.s-blauw .rev-wie{border-color:rgba(255,255,255,.3)}
@media (max-width:1024px){.rev-sl{--per:2!important}}
@media (max-width:767px){.rev-sl{--per:1!important;margin-top:50px}.rev{padding:10px}.rev-kaart{padding:25px}}

/* =====================================================================================
   TIJDLIJN WERKWIJZE (kaarten 512 breed, rad 20, pad 25, stip op middenlijn, nummer 55px 20% blauw)
   ===================================================================================== */
.tijdlijn{position:relative;margin-top:70px}
.tijdlijn::before{content:"";position:absolute;left:50%;top:33px;bottom:33px;width:1px;background:rgba(var(--link-rgb),.35)}
.tl-rij{display:flex;align-items:center;min-height:150px;position:relative}
.tl-rij:nth-child(even){flex-direction:row-reverse}
.tl-kant{flex:0 0 50%;display:flex;align-items:center;justify-content:flex-end;position:relative}
.tl-rij:nth-child(even) .tl-kant{justify-content:flex-start;flex-direction:row-reverse}
.tl-kaart{width:512px;display:flex;gap:15px;padding:25px;background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.09) 0 -1px 25.8px 0;margin-left:17px}
.tl-rij:nth-child(even) .tl-kaart{margin-left:0;margin-right:17px}
.tl-kaart .ic{width:75px;height:75px;flex:none}
.tl-kaart h3{font:600 22px/30px var(--tekst);color:var(--ink);margin-bottom:10px}
.tl-kaart p{margin:0}
.tl-verbinder{flex:0 0 111px;height:1px;background:rgba(var(--link-rgb),.35);position:relative}
.tl-verbinder::after{content:"";position:absolute;right:-17px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:rgba(var(--link-rgb),.2);box-shadow:inset 0 0 0 8.5px rgba(var(--link-rgb),.0)}
.tl-verbinder::before{content:"";position:absolute;right:-8.5px;top:50%;width:17px;height:17px;margin-top:-8.5px;border-radius:50%;background:var(--link);z-index:1}
.tl-rij:nth-child(even) .tl-verbinder::after{right:auto;left:-17px}
.tl-rij:nth-child(even) .tl-verbinder::before{right:auto;left:-8.5px}
.tl-nr{flex:0 0 50%;padding-left:97px;font:900 55px/62px var(--kop);letter-spacing:-.085em;color:rgba(var(--link-rgb),.2)}
.tl-rij:nth-child(even) .tl-nr{padding-left:0;padding-right:97px;text-align:right}
/* blauwe glasvariant */
.s-blauw .tijdlijn::before,.s-blauw .tl-verbinder{background:rgba(255,255,255,.35)}
.s-blauw .tl-kaart{background:rgba(255,255,255,.2);box-shadow:rgba(0,0,0,.05) 0 0 40px}
.s-blauw .tl-kaart h3,.s-blauw .tl-kaart p{color:#fff}
.s-blauw .tl-kaart .ic{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}
.s-blauw .tl-verbinder::before{background:#fff}
.s-blauw .tl-verbinder::after{background:rgba(255,255,255,.3)}
.s-blauw .tl-nr{color:rgba(255,255,255,.2)}
@media (max-width:1366px){.tl-kaart{width:auto;flex:1}}
@media (max-width:767px){
  .tijdlijn{margin-top:60px;display:flex;flex-direction:column;gap:40px}
  .tijdlijn::before{display:none}
  .tl-rij,.tl-rij:nth-child(even){flex-direction:column-reverse;min-height:0;align-items:center}
  .tl-kant,.tl-rij:nth-child(even) .tl-kant{flex:none;width:100%;flex-direction:column;justify-content:center;align-items:center}
  .tl-kant::before{content:"";display:block;width:16px;height:66px;margin-bottom:25px;background:radial-gradient(circle at 50% 8px,var(--link) 5px,rgba(var(--link-rgb),.25) 6px,rgba(var(--link-rgb),.25) 8px,transparent 9px),linear-gradient(rgba(var(--link-rgb),.35),rgba(var(--link-rgb),.35)) 50% 16px/1px 50px no-repeat}
  .tl-kaart,.tl-rij:nth-child(even) .tl-kaart{margin:0;width:100%;flex-direction:row;padding:25px}
  .tl-kaart .ic{width:40px;height:40px}
  .tl-kaart h3{font-size:18px;line-height:30px}
  .tl-verbinder{display:none}
  .tl-nr,.tl-rij:nth-child(even) .tl-nr{display:block;flex:none;padding:0;text-align:center;font-size:42px;line-height:33px}
}
}

/* logobalk "Gebouwd voor o.a." (gemeten: rand-top 1px, pad-top 80, 5 logo's 224 breed, space-between) */
.logobalk{margin-top:70px;padding-top:80px;border-top:1px solid var(--lijn);text-align:center}
.logobalk h4{font:600 18px/30px var(--tekst);color:var(--ink);margin-bottom:20px}
.logos{display:flex;justify-content:space-between;align-items:center;gap:40px}
.logos img{width:224px;height:74px;object-fit:contain}
.s-blauw .logobalk{border-color:rgba(255,255,255,.4)}
.s-blauw .logobalk h4{color:#fff}
.s-blauw .logos img{filter:brightness(0) invert(1)}
@media (max-width:1024px){.logos{flex-wrap:wrap;justify-content:center}.logos img{width:180px}}
@media (max-width:767px){.logobalk{padding-top:50px;margin-top:50px}.logos{gap:20px 30px}.logos img{width:140px;height:50px}}

/* =====================================================================================
   WAAROM-TEGELS op blauw (gemeten: 593/617 breed, 115 hoog, pad 25 35, glas 20%, rand 1px #333, rad 20)
   ===================================================================================== */
.waarom{display:flex;gap:70px;justify-content:space-between;position:relative;z-index:2}
.waarom-l{flex:0 0 593px;display:flex;flex-direction:column;gap:35px;align-items:flex-start}
.waarom-l .kop-blok{gap:15px}
.waarom-r{flex:0 0 617px;display:flex;flex-direction:column;gap:35px;justify-content:flex-end}
.tegel{display:flex;align-items:center;gap:15px;width:100%;min-height:115px;padding:25px 35px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:rgba(0,0,0,.05) 0 0 40px 0;font:600 24px/30px var(--tekst);color:#fff}
.tegel .ic{width:63px;height:63px;background:transparent;color:#fff;margin-right:10px}
.tegel .ic svg{width:100%;height:100%}
@media (max-width:1366px){.waarom-l,.waarom-r{flex:1 1 0}}
@media (max-width:1024px){.waarom{flex-direction:column;gap:35px}.waarom-r{justify-content:flex-start}}
@media (max-width:767px){.waarom,.waarom-l,.waarom-r{gap:20px}.tegel{min-height:98px;padding:25px 20px;font-size:18px;line-height:24px}.tegel .ic{width:48px;height:48px}}

/* =====================================================================================
   BLOGKAARTEN (407x603, rad 30, rand 1px, foto 405x300 rad 30, titel 22/30, knop 'Lees meer')
   ===================================================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:75px}
.blog-kaart{display:flex;flex-direction:column;gap:20px;padding-bottom:35px;background:#fff;border:1px solid var(--lijn);border-radius:30px}
.blog-foto{position:relative;margin:0;height:320px}
.blog-foto .notch{height:300px;border-radius:30px}
.blog-foto .tag{position:absolute;right:20px;bottom:0;display:inline-block;padding:10px 20px;border-radius:10px;background:var(--link);color:#fff;font:500 16px/24px var(--tekst);outline:8px solid #fff}
.blog-kaart h3{padding:0 35px;font:600 22px/30px var(--tekst);color:#333}
.blog-kaart h3 a:hover{color:var(--acc)}
.blog-kaart>p{padding:0 35px;margin:0}
.blog-kaart .k-lees{margin:auto 35px 0;align-self:flex-start}
.blog-filter{display:flex;gap:12px;flex-wrap:wrap;margin-top:35px}
.blog-filter button{padding:9px 28px;border-radius:8px;border:1px solid var(--teal);background:var(--teal);color:#fff;font:600 14px/24px var(--tekst);text-transform:uppercase;cursor:pointer;box-shadow:rgba(var(--teal-rgb),.35) 0 4px 14px}
.blog-filter button.aan{background:#fff;color:var(--link);border-color:var(--teal)}
@media (max-width:1024px){.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.blog-grid{margin-top:50px;gap:20px}}

/* =====================================================================================
   FAQ (details/summary; titel 22/30 w400, open = accentkleur, rand onder 1px 50%)
   ===================================================================================== */
.faq{margin-top:80px}
.faq details{border-bottom:1px solid rgba(77,77,77,.5);margin-bottom:40px}
.faq details:last-child{margin-bottom:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 0 40px;cursor:pointer;font:400 22px/30px var(--tekst);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:25px;height:28px;flex:none;transition:transform .35s}
.faq details[open] summary{color:var(--acc);border-bottom:1px solid rgba(77,77,77,.5)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .antw{padding:30px 40px 40px 0;font-weight:500}
.faq .antw a{text-decoration:underline}
.s-blauw .faq details,.s-blauw .faq details[open] summary{border-color:rgba(255,255,255,.5)}
.s-blauw .faq summary,.s-blauw .faq details[open] summary{color:#fff}
.s-blauw .faq .antw{color:#fff}
@media (max-width:767px){.faq{margin-top:50px}.faq details{margin-bottom:25px}.faq summary{padding-bottom:25px;font-size:18px;line-height:28px}.faq .antw{padding:20px 0 25px}}

/* =====================================================================================
   CTA MET PERSOON (sectie z5, mar -39; foto 630x722, persoon op wit met multiply; tekst 630)
   ===================================================================================== */
.cta{position:relative;z-index:5;margin-top:-39px}
.cta .c{display:flex;gap:20px}
.cta-foto{flex:0 0 630px;align-self:flex-end}
.cta-foto img{width:630px;height:722px;object-fit:contain;object-position:bottom center}
.cta-tekst{flex:0 0 630px;display:flex;flex-direction:column;justify-content:center;gap:20px;align-items:flex-start;padding-bottom:80px}
.cta-tekst p{margin:0;font-weight:500}
.cta.op-licht{background:none}
@media (max-width:1366px){.cta-foto,.cta-tekst{flex:1 1 0}.cta-foto img{width:100%;height:auto}}
@media (max-width:767px){.cta{margin-top:0}.cta .c{flex-direction:column-reverse;padding-top:50px}.cta-tekst{align-items:center;text-align:center;padding-bottom:0}.cta-foto img{height:402px;width:100%}}

/* =====================================================================================
   FOOTER (INK #1b1f24, bovenhoeken 100, schuift 80 over de CTA; onderbalk teal 64 hoog)
   ===================================================================================== */
.voet{position:relative;z-index:6;margin-top:-80px;background:var(--ink);border-radius:100px 100px 0 0;color:#fff;overflow:hidden}
.voet-in{display:flex;justify-content:space-between;gap:70px;padding:100px 0}
.voet-kol{position:relative}
.voet-1{flex:0 0 422px;display:flex;flex-direction:column;gap:38px}
.voet-1 .voet-logo img{width:240px;height:142px;object-fit:contain;object-position:left}
.voet-1 p{margin:0;max-width:346px}
.voet-2{flex:0 0 429px}
.voet-3{flex:0 0 289px;display:flex;flex-direction:column;gap:30px}
.voet-kol+.voet-kol::before{content:"";position:absolute;left:-71px;top:0;width:1px;height:341px;background:rgba(255,255,255,.18)}
.voet h2{position:relative;font:600 18px/30px var(--tekst);color:#fff;padding-bottom:20px;margin-bottom:38px}
.voet h2::after{content:"";position:absolute;left:0;bottom:4px;width:77px;height:6px;background:linear-gradient(#fff,#fff) 0 0/100% 1px no-repeat,linear-gradient(#fff,#fff) 0 5px/30px 1px no-repeat}
.voet-3 h2{margin-bottom:8px}
.voet-menu{display:grid;grid-template-columns:150px 250px;column-gap:0;list-style:none;margin:0;padding:0;grid-auto-flow:column;grid-template-rows:repeat(6,auto)}
.voet-menu{row-gap:30px}
.voet-menu li{line-height:30px}
.voet-menu a{display:inline-flex;align-items:center;gap:9px;color:#e3e3e3;height:30px}
.voet-menu a:hover{color:#fff}
.voet-menu svg{width:14px;height:14px}
.socials{display:flex;gap:20px}
.socials a{width:45px;height:45px;border-radius:50%;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;transition:transform .4s}
.socials a:hover{transform:translateY(-2px)}
.socials svg{width:25px;height:25px}
/* bron: witte omlijnde iconen (bewuste afwijking van de DPS-merkkleurregel, 'precies overnemen') */
.socials a{color:#fff}
.contact-rij{display:flex;gap:21px;align-items:flex-start}
.contact-rij .rond{width:51px;height:51px;border-radius:50%;border:1px solid var(--teal);color:var(--teal);display:inline-flex;align-items:center;justify-content:center;flex:none}
.contact-rij .rond svg{width:21px;height:21px}
.contact-rij b{display:block;font:500 16px/30px var(--tekst);color:#fff;margin-top:-4px}
.contact-rij span,.contact-rij a{color:#cdcdcd}
.voet-balk{background:var(--teal);padding:17px 0;text-align:center;color:var(--ink)}
.voet-balk p{margin:0}
.voet-balk a{text-decoration:underline}
.voet-balk .dps-made{color:inherit;text-decoration:none}
.voet-balk .dps-made:hover{text-decoration:underline}
@media (max-width:1366px){.voet-1,.voet-2,.voet-3{flex:1 1 0}.voet-in{gap:50px}.voet-kol+.voet-kol::before{left:-25px}}
@media (max-width:1024px){.voet-in{flex-wrap:wrap}.voet-kol+.voet-kol::before{display:none}}
@media (max-width:767px){.voet{border-radius:50px 50px 0 0;margin-top:-13px}.voet-in{flex-direction:column;gap:50px;padding:80px 0}.voet-menu{grid-template-columns:1fr 1fr}}

/* =====================================================================================
   ANIMATIE (DPS: rustig, 850ms, 24px, stagger 110ms; werkt alleen met JS)
   ===================================================================================== */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv-o{opacity:0;transition:opacity .85s cubic-bezier(.22,.61,.36,1)}
.js .rv-o.in{opacity:1}
.stagger>*:nth-child(2){transition-delay:110ms}.stagger>*:nth-child(3){transition-delay:220ms}.stagger>*:nth-child(4){transition-delay:330ms}.stagger>*:nth-child(5){transition-delay:440ms}.stagger>*:nth-child(6){transition-delay:550ms}
@media (prefers-reduced-motion:reduce){.js .rv,.js .rv-o{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}}
.no-js .rv,.no-js .rv-o{opacity:1;transform:none}

@media print{.kop-balk,.cookie-banner,.voet-balk,.sl-pijlen,.cta{display:none}.s,.hero{padding:30px 0;margin:0;border-radius:0;background:none;color:#000}.h1,.h2{color:#000}}

/* =====================================================================================
   GOOGLE-BADGE hero (bron: gekantelde witte kaart 168x163 met G-logo en krul-pijl)
   ===================================================================================== */
.hero-kop{position:relative}
.g-badge{position:absolute;right:-36px;top:-100px;width:168px;height:163px;display:block;z-index:3}
.g-kaart{position:absolute;left:10px;top:22px;width:136px;padding:24px 10px 10px;background:#fff;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.18);transform:rotate(5deg);text-align:left;color:#1b1f24}
.g-logo{position:absolute;left:50%;top:-16px;margin-left:-16px;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;color:#4285f4}
.g-logo svg{width:20px;height:20px}
.g-score{display:flex;align-items:center;gap:4px;font:600 11px/14px var(--tekst)}
.g-sterren{display:inline-flex;gap:1px;color:#fbbc05}
.g-sterren svg{width:11px;height:11px}
.g-aantal{display:block;font:700 11px/14px var(--tekst);margin-top:3px}
.g-krul{position:absolute;left:62px;top:112px;width:30px;height:46px}
@media (max-width:767px){.g-badge{right:0;top:-92px;transform:scale(.78);transform-origin:top right}}
.kader-google{position:absolute;left:auto;right:-6px;top:-10px;width:112px;height:112px;border-radius:50%;background:#fff;border:2px solid var(--teal);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);z-index:3;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.kader-google svg{width:22px;height:22px;color:#4285f4}
.kader-google b{font:600 17px/18px var(--tekst)}
.kader-google small{font:500 12px/14px var(--tekst)}
.kader-google .g-sterren svg{width:12px;height:12px}

/* =====================================================================================
   FORMULIER (pil-velden 59 hoog, rand 1px 30%, radius 61.79, icoon rechts) + POP-UP
   ===================================================================================== */
.formulier{display:flex;flex-direction:column;gap:12px}
.veld{position:relative}
.veld input,.veld textarea{width:100%;height:59px;padding:7px 56px 7px 20px;border:1px solid rgba(77,77,77,.3);border-radius:61.79px;background:#fff;font:400 16px/24px var(--tekst);color:var(--ink);outline:0;transition:border-color .3s}
.veld textarea{height:136px;border-radius:20px;padding-top:16px;resize:vertical}
.veld input:focus,.veld textarea:focus{border-color:var(--acc)}
.veld ::placeholder{color:#555}
.veld-ic{position:absolute;right:20px;top:18px;width:22px;height:22px;color:#777}
.veld-ic svg{width:100%;height:100%}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.verstuur{width:100%;margin-top:20px;padding:14px 0;border:0;cursor:pointer;background:linear-gradient(263.78deg,var(--teal) 9.78%,var(--acc) 46.47%);color:#fff;box-shadow:rgba(var(--teal-rgb),.8) 0 -1px 30px 0}
.form-melding{margin:6px 0 0;padding:10px 16px;border-radius:12px;background:rgba(var(--acc-rgb),.08);color:var(--ink);font-size:14px;line-height:22px}
.popup{border:0;padding:0;background:transparent;width:min(1140px,94vw);max-height:94vh;overflow:auto;border-radius:20px}
.popup::backdrop{background:rgba(0,0,0,.8)}
.popup-in{position:relative;display:flex;gap:60px;padding:57px 40px 50px 40px;border-radius:20px;border:2px solid rgba(255,255,255,.2)}
.popup-l{flex:1 1 0;display:flex;flex-direction:column;gap:22px;color:#fff;font-weight:500}
.popup-l .h2{font-size:47px;line-height:55px}
.popup-l p{margin:0}
.popup-r{flex:0 0 487px;background:#fff;border-radius:20px;padding:40px;color:var(--txt)}
.popup-r h3{font:700 22px/30px var(--tekst);color:var(--ink);margin-bottom:22px}
.popup-noot{text-align:center;margin:18px 0 0;color:#888}
.popup-dicht{position:absolute;right:16px;top:16px;width:30px;height:30px;border:2px solid #fff;border-radius:4px;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:3px}
.popup-dicht svg{width:20px;height:20px}
.g-pil{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:10px 20px;border-radius:40px;background:#fff;color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.15);font-size:14px}
.g-pil .g-g{width:24px;height:24px;color:#4285f4}
.g-pil .g-sterren svg{width:15px;height:15px}
@media (max-width:1024px){.popup-in{flex-direction:column;gap:30px}.popup-r{flex:none}}
@media (max-width:767px){.popup-in{padding:50px 16px 20px}.popup-l .h2{font-size:24px;line-height:32px}.popup-r{padding:24px 18px}}

/* tekstpagina (juridisch) */
.c.smal{max-width:1110px}
.tekstpagina h2,.tekstpagina h3{font:600 20px/30px var(--tekst);color:var(--ink);margin:28px 0 6px}
.tekstpagina p,.tekstpagina li{color:#333}
.tekstpagina a{color:var(--acc);text-decoration:underline}

/* per-blok afstanden zoals gemeten (Elementor-widgetmarges verschillen per sectie) */
.proj-grid+.knop-onder{margin-top:70px}
.tijdlijn+.knop-onder{margin-top:120px}
.rev-sl+.knop-onder{margin-top:52px}
.s-blog .kop-blok .h2{margin-top:15px}
.s-reviews .kop-blok .eb{margin-bottom:0}
@media (max-width:767px){.proj-grid+.knop-onder,.tijdlijn+.knop-onder,.rev-sl+.knop-onder{margin-top:40px}}

.s-proj .intro{margin-top:25px}

@media (max-width:767px){
  .hero-foto .notch{width:100%;height:auto;aspect-ratio:351/257}
  .notch-label{right:78px;height:52px;font-size:14px;gap:8px;padding:6px 10px 0}
  .notch-label .gezichten span{width:26px;height:26px;margin-left:-8px}
  .exp-sl .sl-raam{overflow:hidden}
  .exp-kaart{border-color:var(--acc)}
  .exp-foto .ic-hoek{width:68px;height:68px;right:40px;top:232px}
  .cta .c{flex-direction:column-reverse}
  .cta-tekst{padding-top:0}
  .cta-foto{align-self:center}
  .h2.cta-kop{text-align:center}
}

/* =====================================================================================
   KOP-RIJ (kop links, tekst of knop rechts; gemeten diensten/aanpak/redenen)
   ===================================================================================== */
.kop-rij{display:flex;justify-content:space-between;gap:60px;align-items:flex-start}
.kop-rij>.kop-blok{flex:0 0 550px}
.kop-rij-tekst{flex:0 0 614px;font-weight:500}
.kop-rij.eind{align-items:flex-end}
.kop-rij.eind>.kop-blok{flex:0 0 717px}
.kop-rij-tekst.streep{flex:0 0 525px;position:relative;padding-top:23px}
.kop-rij-tekst.streep::before{content:"";position:absolute;left:0;top:0;width:110px;height:5px;background:linear-gradient(90deg,var(--teal) 0 76%,transparent 76% 82%,var(--teal) 82%)}
@media (max-width:1024px){.kop-rij{flex-direction:column;gap:25px;align-items:flex-start}.kop-rij>.kop-blok,.kop-rij-tekst,.kop-rij.eind>.kop-blok,.kop-rij-tekst.streep{flex:none;width:100%}}

/* split: losse foto */
.split-foto img{width:100%;height:100%;object-fit:cover;border-radius:30px}
.duo{position:relative;width:100%;aspect-ratio:610/599}
.duo .duo-1{position:absolute;left:0;top:0;width:74.4%;height:80%}
.duo .duo-2{position:absolute;right:0;bottom:0;width:38.4%;height:49%;object-fit:cover;border-radius:24px;outline:10px solid #fff}
.duo .notch-label{right:auto;left:0;width:auto;bottom:0;height:auto;padding:10px 22px;background:linear-gradient(90deg,var(--acc),var(--link));border-radius:40px}
/* lijstvarianten */
.lijnlijst{list-style:none;margin:10px 0 25px;padding:0;width:100%}
.lijnlijst li{display:flex;align-items:center;gap:16px;padding-bottom:23px;margin-bottom:23px;border-bottom:1px solid rgba(27,31,36,.2);font:600 22px/30px var(--tekst);color:var(--ink)}
.lijnlijst li:last-child{border:0;margin:0;padding:0}
.lijnlijst .ic{width:65px;height:65px;flex:none;background:rgba(var(--teal-rgb),.15);color:var(--acc)}
.lijnlijst.groot li{font-size:22px}
.glaslijst{list-style:none;margin:10px 0 25px;padding:0;width:100%;display:flex;flex-direction:column;gap:20px}
.glaslijst li{display:flex;align-items:center;gap:10px;padding:20px 30px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.19);border-radius:20px;font:600 20px/30px var(--tekst);color:#fff}
.glaslijst .ic{width:40px;height:40px;flex:none;background:#fff;color:var(--acc)}
.citaat{position:relative;margin:10px 0 0;width:100%;padding:14px 60px 14px 34px;border-left:5px solid var(--acc);border-radius:20px;background:rgba(var(--acc-rgb),.08);font:500 18px/30px var(--tekst);color:var(--ink)}
.citaat p{margin:0}
.citaat svg{position:absolute;right:0;top:-10px;width:44px;height:30px;color:var(--teal)}
@media (max-width:767px){.lijnlijst li{font-size:18px;gap:12px}.lijnlijst .ic{width:50px;height:50px}.glaslijst li{font-size:16px;padding:16px 18px}}

/* =====================================================================================
   DIENSTENSLIDER (6 kaarten per slide 3x2, kaart 400x324 pad 30 rad 30, icoon 93 steekt 37 uit)
   ===================================================================================== */
.dk-sl{margin-top:30px}
.dk-sl .sl-baan>*{flex:0 0 100%}
.dk-slide{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:50px 20px}
.dk{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:60px 30px 30px;background:#fff;border-radius:30px;box-shadow:rgba(0,0,0,.12) 0 -3px 34.8px 0}
.dk-ic{position:absolute;right:42px;top:-37px;width:93px;height:93px;padding:8px;border-radius:20px;background:#f5f5f5;display:flex}
.dk-ic svg{width:77px;height:77px;padding:16px;border-radius:14px;background:linear-gradient(135deg,var(--acc),var(--teal));color:#fff}
.dk h3{font:600 22px/30px var(--tekst);color:var(--ink);margin-bottom:14px;max-width:290px}
.dk p{color:var(--ink);flex:1}
.dk .k-info{margin-top:20px}
.dk-nav{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:0 0 0 0}
.dk-nav .sl-pijlen{margin:0}
.sl-balk{flex:0 0 1050px;height:4px;background:#d9ebff;position:relative}
.sl-balk span{position:absolute;left:0;top:0;height:4px;width:50%;background:var(--link);transition:width .6s cubic-bezier(.22,.61,.36,1)}
@media (max-width:1366px){.sl-balk{flex:1 1 auto}}
@media (max-width:1024px){.dk-slide{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.dk-slide{grid-template-columns:1fr;gap:60px;padding:50px 5px 20px}}

/* =====================================================================================
   KAARTENRIJ (3 kaarten 407 breed, pad 50 30, rad 20, icoon 93, titel 24 midden) + nummer 01/02/03
   ===================================================================================== */
.kr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:70px}
.kr{display:flex;flex-direction:column;align-items:center}
.kr-nr{display:flex;align-items:center;justify-content:center;width:56px;height:36px;margin-bottom:36px;border:1px solid var(--acc);border-radius:40px;background:#fff;font:900 13px/1 var(--kop);color:var(--acc);position:relative}
.kr-nr::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:36px;background:rgba(var(--acc-rgb),.4)}
.kr-kaart{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding:50px 30px;background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.1) 0 3px 30.8px 0}
.kr-kaart .ic{width:93px;height:93px;margin-bottom:10px}
.kr-kaart h3{font:600 24px/30px var(--tekst);color:var(--ink)}
.kr-kaart p{margin:0}
.ic.groot svg{width:52%;height:52%}
.ic.vlak{border-radius:18px}
.ic.zacht{background:rgba(var(--teal-rgb),.18);color:var(--acc)}
@media (max-width:1024px){.kr-grid{grid-template-columns:1fr}}
@media (max-width:767px){.kr-grid{margin-top:50px;gap:20px}.kr-kaart{padding:40px 25px}.kr-kaart h3{font-size:20px}}

/* REDENEN (3 kolommen, icoon 98 vierkant, titel 24, pijl 55; verticale scheiding) */
.rd-grid{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:108px}
.rd{position:relative;display:flex;flex-direction:column;gap:20px;padding:0 40px 0 50px}
.rd:first-child{padding-left:0}
.rd+.rd{border-left:1px solid rgba(77,77,77,.3)}
.rd .rd-ic{width:98px;height:98px;border-radius:14px}
.rd h3{font:600 24px/30px var(--tekst);color:var(--ink);margin-top:-5px}
.rd p{margin:0}
.rd-pijl{width:55px;height:55px;color:var(--acc);margin-top:auto}
.rd-pijl svg{width:44px;height:44px}
@media (max-width:1024px){.rd-grid{grid-template-columns:1fr;gap:40px;margin-top:60px}.rd,.rd:first-child{padding:0}.rd+.rd{border-left:0;border-top:1px solid rgba(77,77,77,.3);padding-top:40px}}

/* AANPAK (2x2 tegels rand acc, glas 20%, rad 20, icoon 63 + route-diagram in CSS) */
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:80px}
.ap-tegel{display:flex;align-items:center;gap:15px;min-height:95px;padding:15px 28px;background:rgba(255,255,255,.2);border:1px solid var(--acc);border-radius:20px;box-shadow:rgba(0,0,0,.09) 0 -.96px 24.87px 0;font:600 22px/30px var(--tekst);color:var(--txt)}
.ap-tegel .ic{width:63px;height:63px;flex:none;margin-right:10px}
.route{position:relative;margin-top:60px;height:444px;border-radius:20px;background:var(--licht);color:var(--link);overflow:hidden}
.route>span{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;font:600 16px/22px var(--tekst);text-align:center}
.route b{font-weight:600}
.rt-lijn{position:absolute;inset:0;width:100%;height:100%}
.rt-pil{border-radius:40px;background:var(--link)}
.rt-pil.t{background:var(--teal)}
.rt-1{left:80px;top:60px;width:252px;height:60px}
.rt-ruit{width:140px;height:140px;background:var(--teal);border-radius:20px;transform:rotate(45deg)}
.rt-ruit b{transform:rotate(-45deg)}
.rt-2{left:137px;top:202px}
.rt-blok{background:var(--link)}
.rt-3{left:380px;top:242px;width:254px;height:60px}
.rt-4{left:720px;top:110px;width:252px;height:60px}
.rt-para{background:var(--link);transform:skewX(-12deg)}
.rt-para b{transform:skewX(12deg)}
.rt-5{left:715px;top:210px;width:245px;height:86px}
.rt-rond{border-radius:50%;background:var(--teal)}
.rt-6{left:1080px;top:180px;width:120px;height:120px}
@media (max-width:1024px){.ap-grid{grid-template-columns:1fr}.route{display:none}}
@media (max-width:767px){.ap-grid{margin-top:40px}.ap-tegel{font-size:18px;padding:15px 18px}.ap-tegel .ic{width:50px;height:50px}}

/* VOORDELEN (2 kolommen kaarten 273 breed, pad 20 35, rad 20, gestippelde verbinders) */
.vd-split{gap:50px}
.vd-split>.vd-vis{flex:0 0 569px}
.vd-vis{position:relative;display:flex;justify-content:space-between}
.vd-vis::before{content:"";position:absolute;left:180px;top:36px;width:130px;border-top:2px dashed var(--teal)}
.vd-vis::after{content:"";position:absolute;left:180px;bottom:-4px;width:130px;border-top:2px dashed var(--teal)}
.vd-kol{flex:0 0 273px;display:flex;flex-direction:column;gap:30px;position:relative}
.vd-kol.twee{margin-top:40px}
.vd-kol .vd+.vd::before{content:"";position:absolute;left:50%;margin-top:-30px;width:2px;height:30px;background:var(--teal);transform:translateY(-20px)}
.vd{position:relative;display:flex;flex-direction:column;align-items:center;gap:15px;padding:20px 35px;background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.1) 0 3px 30.8px 0;text-align:center;min-height:189px;justify-content:center;z-index:1}
.vd .ic{width:80px;height:80px}
.vd h3{font:600 22px/30px var(--tekst);color:var(--ink)}
@media (max-width:1024px){.vd-split>.vd-vis{flex:none;width:100%;max-width:569px}}
@media (max-width:767px){.vd-kol{flex:0 0 calc(50% - 8px);gap:16px}.vd{padding:16px 10px;min-height:150px}.vd h3{font-size:16px;line-height:22px}.vd .ic{width:56px;height:56px}.vd-vis::before,.vd-vis::after{display:none}}

/* TEAM (3 kolommen, foto 407x421 rad 30, naam 24 wit, rol 18) */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px 30px;margin-top:80px}
.lid{margin:0;display:flex;flex-direction:column;gap:15px;text-align:center}
.lid img{width:100%;aspect-ratio:407/421;object-fit:cover;border-radius:30px}
.lid b{display:block;font:600 24px/30px var(--tekst);color:#fff;margin-top:6px}
.lid span{font:400 18px/30px var(--tekst);color:#fff}
@media (max-width:1024px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.team-grid{grid-template-columns:1fr 1fr;gap:30px 12px;margin-top:50px}.lid b{font-size:17px;line-height:24px}.lid span{font-size:14px;line-height:22px}}

/* PARTNERKAARTEN (413x216, pad 100 45 56, rad 30, icoon-schijf 109 steekt 47 uit) */
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:125px}
.pk{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:100px 45px 56px;background:#fff;border-radius:30px;box-shadow:rgba(0,0,0,.11) 0 5px 36.8px 0;text-align:center}
.pk-ic{position:absolute;left:50%;top:-47px;margin-left:-54.5px;width:109px;height:109px;padding:10px;border-radius:50%;background:rgba(235,235,235,.46);box-shadow:#f7f7f7 0 0 23.6px 0}
.pk-ic .ic{width:89px;height:89px}
.pk h3{font:600 24px/30px var(--tekst);color:var(--ink)}
.pk p{margin:0}
@media (max-width:1024px){.pk-grid{grid-template-columns:1fr;gap:80px}}
@media (max-width:767px){.pk-grid{margin-top:90px}.pk{padding:80px 25px 40px}.pk h3{font-size:20px}}

/* GLASRIJ (paneel pad 80, glas 20%, rand 18%, rad 20; icoon 90 wit; titel 26 wit) */
.glas-paneel{display:flex;justify-content:space-between;gap:40px;margin-top:80px;padding:80px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.18);border-radius:20px}
.gr-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:25px;text-align:center}
.gr-item .ic{width:90px;height:90px}
.gr-item h3{font:600 26px/30px var(--tekst);color:#fff;max-width:330px}
.gk-rij{position:relative;display:flex;justify-content:center;gap:20px;margin-top:80px}
.gk-rij::before{content:"";position:absolute;left:-80px;right:-80px;top:84px;height:94px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 15%,rgba(255,255,255,.7) 85%,transparent) 50% 50%/100% 2px no-repeat}
.gk{position:relative;flex:0 0 353px;padding:60px 40px 30px;margin-top:41px;background:rgba(255,255,255,.2);border-radius:20px;box-shadow:rgba(0,0,0,.05) 0 0 40px;text-align:center;color:#fff}
.gk:nth-child(2){margin-top:61px}
.gk-ic{position:absolute;left:50%;top:-41px;margin-left:-45px;width:90px;height:96px;padding:10px;border-radius:20px;background:#fff}
.gk-ic .ic{width:70px;height:70px}
.gk h3{font:600 26px/30px var(--tekst);color:#fff;margin-bottom:10px}
.gk p{margin:0;color:#fff}
@media (max-width:1024px){.glas-paneel{flex-direction:column;padding:50px 30px}.gk-rij{flex-direction:column;align-items:center;gap:70px}.gk-rij::before{display:none}.gk,.gk:nth-child(2){margin-top:0;flex:none;width:100%;max-width:420px}}
@media (max-width:767px){.gr-item h3,.gk h3{font-size:20px;line-height:26px}}

/* KAARTEN RECHTS (projecten: 3 kaarten 307 breed, pad 30 35, rad 20, cirkel erachter) */
.kk-split{gap:40px}
.kk-split>.tekst{flex:0 0 602px}
.kk-vis{position:relative;flex:0 0 640px!important;display:flex;justify-content:space-between;align-items:center}
.kk-cirkel{position:absolute;left:167px;top:127px;width:307px;height:326px;border-radius:50%;background:radial-gradient(circle,rgba(var(--teal-rgb),.25),rgba(var(--acc-rgb),.08) 60%,transparent 70%)}
.kk-kol{flex:0 0 307px;display:flex;flex-direction:column;gap:30px;position:relative}
.kk{display:flex;flex-direction:column;gap:15px;padding:30px 35px;background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.1) 0 3px 30.8px 0;min-height:245px}
.kk-kol:first-child .kk{min-height:275px}
.kk .ic{width:86px;height:86px}
.kk h3{font:600 24px/30px var(--tekst);color:var(--ink);max-width:230px}
@media (max-width:1366px){.kk-split>.tekst{flex:1 1 0}.kk-vis{flex:1 1 0!important}}
@media (max-width:1024px){.kk-vis{width:100%}}
@media (max-width:767px){.kk-vis{flex-direction:column;gap:20px}.kk-kol{flex:none;width:100%;gap:20px}.kk,.kk-kol:first-child .kk{min-height:0}.kk-cirkel{display:none}}

/* CONTACT (formulierkaart 614 pad 40 rad 20 met bubbel rechtsboven; kanaalknoppen rand teal) */
.contact-split{align-items:flex-start;gap:52px}
.form-kaart{position:relative;padding:40px;border-radius:20px;background:#fff;box-shadow:rgba(0,0,0,.09) 0 -1px 25.8px 0}
.form-kaart h3{font:700 22px/30px var(--tekst);color:var(--ink);margin-bottom:30px;max-width:360px}
.form-bubbel{position:absolute;right:0;top:-2px;width:187px;height:89px;border-radius:0 20px 0 30px;background:#fff;box-shadow:0 -12px 18px -12px rgba(0,0,0,.08)}
.form-bubbel::after{content:"";position:absolute;right:18px;top:18px;width:74px;height:22px;border:2px solid var(--teal);border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.kanalen{position:relative;display:flex;gap:20px;flex-wrap:wrap;margin:10px 0 20px}
.kanaal{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border:1px solid var(--teal);border-radius:800px;background:#f6f6f6;color:var(--ink);font:600 14px/30px var(--tekst);text-transform:uppercase}
.kanaal svg{width:18px;height:18px;color:var(--acc)}
.kanaal-pijl{position:absolute;right:48px;top:17px;width:50px;height:81px}
.contact-foto{width:100%;height:354px;margin-top:10px}
@media (max-width:1024px){.contact-split{flex-direction:column}.kanaal-pijl{display:none}}
@media (max-width:767px){.form-kaart{padding:25px 18px}.form-bubbel{width:120px;height:60px}.kanaal{padding:8px 16px}.contact-foto{height:220px}}

/* BEZOEK (4 kaarten 307x203, pad 25, rad 20; kaart rechts 576x701 rad 20) */
.bezoek-split{align-items:stretch}
.bezoek-split .tekst{gap:7px}
.bz-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;width:100%}
.bz{display:flex;flex-direction:column;align-items:center;gap:20px;padding:25px;background:#fff;border-radius:20px;box-shadow:rgba(0,0,0,.09) 0 -1px 25.8px 0;text-align:center}
.bz .ic{width:63px;height:63px}
.bz h3{font:600 22px/30px var(--tekst);color:var(--ink)}
.bz p{margin:-10px 0 0}
.kaart-klik,.afspraak{position:relative;min-height:560px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:rgba(0,0,0,.14) 0 0 28.8px 0}
.kaart-klik iframe,.afspraak iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kaart-stub{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px;text-align:center;background:linear-gradient(135deg,var(--licht),#fff)}
.kaart-stub>svg{width:64px;height:64px;color:var(--acc)}
.kaart-stub p{max-width:340px}
.afspraak{min-height:640px}
.afspraak.geladen{min-height:760px}
.c.smal-2{max-width:840px}
@media (max-width:1024px){.kaart-klik{min-height:420px}}
@media (max-width:767px){.bz-grid{grid-template-columns:1fr 1fr;gap:12px}.bz{padding:18px 10px}.bz h3{font-size:17px}.bz p{font-size:13px;line-height:22px;word-break:break-word}}

/* NIEUWSBRIEF (formulierkaart 555 met 'quick tips'-label; stempel 'no spam' rechtsboven) */
.nb-split{align-items:center}
.nb-split>.form-kaart{flex:0 0 555px}
.quick{position:absolute;right:-26px;top:-21px;display:flex;align-items:center;gap:8px;padding:8px 18px 8px 8px;border-radius:40px;background:var(--ink);color:#fff;font:600 16px/24px var(--tekst);letter-spacing:.02em}
.quick svg{width:42px;height:42px;padding:8px;border-radius:50%;background:#ffd400;color:var(--ink)}
.nb-tekst{position:relative}
.stempel{position:absolute;right:0;top:-80px;width:150px;height:150px;border-radius:50%;border:6px double #c62828;color:#c62828;display:flex;align-items:center;justify-content:center;text-align:center;font:900 30px/30px var(--kop);letter-spacing:-.05em;transform:rotate(-14deg);opacity:.85}
@media (max-width:1024px){.nb-split>.form-kaart{flex:none;width:100%}}
@media (max-width:767px){.stempel{width:96px;height:96px;font-size:18px;line-height:20px;top:-40px}.quick{right:-6px;font-size:13px}}

/* DOWNLOADS (tabs pil 60 hoog; kaart 405 rad 20 schaduw, doc-icoon 77 steekt uit) */
.dl-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:70px}
.dl-tabs button{padding:15px 35px;border:0;border-radius:100px;background:var(--teal);color:var(--ink);font:600 16px/30px var(--tekst);cursor:pointer}
.dl-tabs button.aan{background:var(--acc);color:#fff}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:70px}
.dl{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:50px 30px 30px;border-radius:20px;background:#fff;box-shadow:rgba(0,0,0,.09) 0 5px 30px 0}
.dl.uit{display:none}
.dl-ic{position:absolute;right:30px;top:-18px;width:77px;height:77px;border-radius:14px;padding:16px;background:linear-gradient(135deg,var(--acc),var(--teal));color:#fff;outline:6px solid #fff}
.dl h3{font:600 22px/30px var(--tekst);color:var(--ink);max-width:230px}
.dl p{margin:0;color:var(--ink)}
@media (max-width:1024px){.dl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.dl-grid{grid-template-columns:1fr;margin-top:50px}.dl-tabs{margin-top:40px}.dl-tabs button{padding:10px 20px;font-size:14px}}

/* =====================================================================================
   ARTIKEL (kolom 768 + zijbalk 384; tekst 18/30 INK; foto rad 40; TOC blauw rad 24)
   ===================================================================================== */
.art-s{padding:60px 0 0}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:stretch}   /* VASTE REGEL 28-10-2026: tekst links, zijkolom rechts en lang */
.art-body{min-width:0}
.art-cat{color:var(--acc);margin:0 0 10px}
.art-meta{display:flex;gap:20px;margin-bottom:20px}
.art-auteur{flex:1;display:flex;gap:20px;align-items:center;padding:10px 15px;border:1px solid var(--acc);border-radius:4px;background:var(--eyebrow-bg)}
.art-auteur img{width:60px;height:67px;object-fit:cover;border-radius:8px;background:linear-gradient(transparent,var(--teal))}
.art-auteur p{margin:0;font-size:13px;line-height:21px;color:var(--ink)}
.art-auteur small{font-size:11px;color:var(--ink)}
.art-deel{flex:0 0 144px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--acc);border-radius:4px;background:var(--eyebrow-bg);color:var(--ink);text-transform:uppercase;font-size:15px}
.art-deel span{display:flex;gap:6px}
.art-deel a{display:inline-flex;padding:8px}
.art-deel svg{width:19px;height:19px}
.art-steun{display:inline-flex;align-items:center;gap:14px;font:600 15px/35px var(--tekst);color:var(--ink);text-transform:uppercase;margin-bottom:40px}
.art-steun svg{width:28px;height:16px;color:var(--ink)}
.art-foto{width:100%;height:auto;aspect-ratio:768/560;object-fit:cover;border-radius:40px;margin-bottom:20px}
.art-tekst{font-size:18px;line-height:30px;color:var(--ink)}
.art-tekst p{margin:0 0 20px}
.art-tekst h2{font:600 30px/38px var(--tekst);color:var(--ink);margin:57px 0 12px;scroll-margin-top:30px}
.art-tekst h3{font:600 20px/30px var(--tekst);margin:30px 0 8px}
.art-tekst ul{padding-left:40px;margin:0 0 20px}
.art-tekst li{margin-bottom:20px}
.art-tekst a{text-decoration:underline}
.art-zij{display:flex;flex-direction:column;gap:20px;min-width:0}
@media (min-width:1025px){.art-zij>:last-child{position:sticky;top:100px}}
.toc{border:1px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--verloop-blauw);background-color:var(--acc);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.toc h2{font:900 23px/30px var(--kop);letter-spacing:-.06em;text-transform:uppercase;padding:20px;border-bottom:1px solid rgba(255,255,255,.3);margin:0}
.toc ol{margin:0;padding:20px 20px 20px 38px;font-size:16px;line-height:24px}
.toc li{margin-bottom:8px}
.toc a:hover{text-decoration:underline}
.zij-cta{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px;padding:20px;border:1px solid var(--acc);border-radius:20px;background:#fff;box-shadow:rgba(0,0,0,.28) 5px 3px 20.8px 0;text-align:center;align-items:center}
.zij-cta .lint{position:absolute;right:-60px;top:28px;width:230px;padding:4px 0;transform:rotate(45deg);background:var(--acc);color:#fff;text-align:center;font-size:11px;line-height:16px}
.zij-cta .eb{align-self:center;font-size:14px;line-height:20px;max-width:230px;text-align:center}
.zij-cta h3,.zij-waarom h3{font:900 20px/26px var(--kop);letter-spacing:-.06em;text-transform:uppercase;color:var(--ink)}
.zij-cta ul,.zij-waarom ul{list-style:none;margin:0;padding:0;width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
.zij-cta li,.zij-waarom li{display:flex;gap:10px;align-items:center;padding-bottom:5px;font-size:15px;line-height:30px;color:var(--ink)}
.zij-cta li svg{width:14px;height:14px}
.zij-cta .knop{font-size:13px;padding:12px 18px}
.zij-waarom{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--acc);border-radius:20px;background:var(--licht) url(/assets/img/lijnen-licht.svg) center/cover;text-align:center;align-items:center}
.zij-waarom .bo-rij{justify-content:center}
.zij-waarom h4{font:600 18px/30px var(--tekst);color:var(--ink)}
.zij-waarom li svg{width:24px;height:24px;color:var(--acc);flex:none}
.zij-hulp,.zij-lijst{display:flex;flex-direction:column;gap:14px;padding:24px 20px;border:1px solid var(--acc);border-radius:20px;background:#fff;text-align:center;align-items:center}
.zij-hulp h3,.zij-lijst h3{font:900 20px/26px var(--kop);letter-spacing:-.06em;text-transform:uppercase;color:var(--ink)}
.zij-hulp p{margin:0;font-size:15px;line-height:24px;color:var(--ink)}
.zij-contact{list-style:none;margin:0;padding:0;width:fit-content;max-width:100%;margin-inline:auto;text-align:left;display:flex;flex-direction:column;gap:8px}
.zij-contact li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:24px;color:var(--ink);min-width:0}
.zij-contact li a{color:var(--ink);overflow-wrap:anywhere}
.zij-contact svg{width:18px;height:18px;color:var(--acc);flex:none}
.zij-hulp .g-vol{margin:0}
.zij-hulp .knop{font-size:13px;padding:12px 18px;max-width:100%}
.zij-lijst ul{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.zij-lijst li a{display:flex;align-items:center;gap:12px;font-size:15px;line-height:21px;font-weight:600;color:var(--ink);transition:color .3s}
.zij-lijst li a:hover{color:var(--acc)}
.zij-lijst .zl-foto{flex:none;width:60px;height:60px;border-radius:12px;overflow:hidden;background:var(--licht)}
.zij-lijst .zl-foto img{width:100%;height:100%;object-fit:cover;display:block}
.zij-lijst .ic{flex:none;width:40px;height:40px;background:var(--licht)}
.zij-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:4px}
.zij-link svg{width:14px;height:14px}
@media (max-width:1366px){.art-grid{grid-template-columns:minmax(0,1fr) 340px;gap:40px}}
@media (max-width:1024px){.art-grid{grid-template-columns:minmax(0,1fr);gap:40px}.art-zij{width:100%;max-width:560px;margin-inline:auto}}
@media (max-width:767px){.art-meta{flex-direction:column}.art-deel{flex:none;padding:10px}.art-tekst h2{font-size:22px;line-height:30px;margin-top:40px}.art-foto{border-radius:24px}}

/* werkgebied: plaatsknoppen */
.plaatsen{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:60px}
.plaats{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border:1px solid var(--acc);border-radius:800px;background:#fff;color:var(--ink);font:600 16px/30px var(--tekst);transition:transform .4s}
.plaats:hover{transform:translateY(-2px);color:var(--acc)}
.plaats svg{width:18px;height:18px;color:var(--acc)}
.hero-simpel .knoppen{margin-top:34px}
.hero-simpel .h1 .acc{margin-left:.3em}
.blog-kaart.verborgen,.proj.verborgen{display:none}
.blog-kaart.uit{display:none}
.knop.laad-meer{border:0;cursor:pointer;padding:20px 30px}
.knop .pijl.rond{width:40px;height:40px;border-radius:50%}

/* DASHBOARD (locatiepagina's; vaste 610x600 tekening, geschaald op smalle schermen) */
.dash-wrap{width:100%;max-width:610px;aspect-ratio:610/600;position:relative}
.dash{position:absolute;left:0;top:0;width:610px;height:600px;transform-origin:0 0}
@media (max-width:1366px){.dash{transform:scale(.9)}}
@media (max-width:767px){.dash{transform:scale(.575)}}
.dash-cirkel{position:absolute;left:65px;top:37px;width:512px;height:530px;border-radius:50%;border:1px solid var(--acc);padding:14px;background:var(--acc) content-box}
.dash-kaart{position:absolute;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(20,40,80,.12);padding:22px 20px;color:var(--ink);text-align:center}
.dash-kaart h4{font:600 15px/22px var(--tekst);text-align:left}
.dash-kaart small{display:block;font:400 13px/18px var(--tekst);color:#555}
.dk-1{left:55px;top:99px;width:188px;height:215px}
.dk-1 .dash-meter{width:150px;height:78px;margin:10px auto -40px;display:block}
.dash-rond{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(var(--link-rgb),.12);color:var(--link)}
.dash-rond svg{width:22px;height:22px}
.dash-rond.groot{width:64px;height:64px;margin:18px 0 12px}
.dash-rond.groot svg{width:30px;height:30px}
.dk-1 b{display:block;font:600 18px/24px var(--tekst);color:var(--link);margin-top:6px}
.dk-2{left:264px;top:40px;width:330px;height:274px}
.dash-lijn{width:100%;height:auto;margin-top:6px;font:500 8px var(--tekst);fill:#6b7480}
.dash-lijn .lbl{fill:#fff;font:700 10px var(--tekst);text-anchor:middle}
.dk-3{left:46px;top:335px;width:329px;height:222px}
.dash-bars{display:flex;align-items:flex-end;gap:10px;height:112px;margin-top:14px;padding:0 10px}
.dash-bars span{flex:1;border-radius:3px;background:rgba(var(--link-rgb),.3)}
.dash-bars span.aan{background:var(--teal)}
.dash-dagen{display:flex;gap:10px;padding:8px 10px 0;font:400 12px var(--tekst);color:#8a93a0}
.dash-dagen i{flex:1;font-style:normal}
.dk-4{left:396px;top:335px;width:198px;height:229px}
.dk-4 b.groot{display:block;font:700 30px/36px var(--tekst);color:var(--link)}
/* COLLAGE (projectbeelden in twee kolommen, afgesneden door de sectie) */
.collage{display:flex;gap:18px;height:520px;overflow:hidden;margin:-120px 0 -120px;align-self:stretch}
.cl-kol{flex:1;display:flex;flex-direction:column;gap:18px}
.cl-kol.laag{margin-top:-120px}
.cl-kol img{width:100%;height:auto;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
@media (max-width:1024px){.collage{margin:0;height:380px}}
/* STATFOTO (foto met meterkaart rechtsboven en teal kader linksonder) */
.statfoto{position:relative;width:100%;max-width:610px;aspect-ratio:610/565}
.sf-foto{position:absolute;left:0;top:0;width:74%;height:85%;object-fit:cover;border-radius:24px}
.sf-rand{position:absolute;left:5%;bottom:0;width:30%;height:28%;border:3px solid var(--teal);border-top:0;border-radius:0 0 0 24px}
.sf-kaart{position:absolute;right:0;top:0;width:35%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(20,40,80,.1);outline:12px solid #fff;text-align:center;padding:10px}
.sf-kaart svg{position:absolute;inset:12% 18% 30%;width:64%;height:auto}
.sf-ic{position:relative;display:inline-flex;width:34px;height:34px;border-radius:50%;background:rgba(var(--link-rgb),.12);color:var(--link);align-items:center;justify-content:center;margin-top:-6px}
.sf-ic svg{position:static;width:18px;height:18px}
.statfoto b{position:relative;font:700 22px/28px var(--tekst);color:var(--ink)}
.statfoto small{position:relative;font-size:12px;line-height:16px;color:#555;margin-top:18px}

.lid-vacature{display:flex;align-items:flex-end;justify-content:center;width:100%;aspect-ratio:407/421;border-radius:30px;overflow:hidden;background:linear-gradient(160deg,#dfe7f1,#c7d3e3)}
.lid-vacature svg{width:78%;height:78%;color:var(--link);margin-bottom:-8%}

.s-licht .kader,.s-wit .kader{background:var(--acc)}
.nb-tekst .knop{margin-top:10px}

.cta{overflow-x:clip}

/* layoutmeting 30-09: kolommen mogen krimpen op laptop, lange koppen breken af, voordelen passen op 320 */
@media (max-width:1366px){.kop-rij>.kop-blok,.kop-rij.eind>.kop-blok{flex:1 1 55%;min-width:0}.kop-rij-tekst,.kop-rij-tekst.streep{flex:1 1 40%;min-width:0}}
.h2,.h1{overflow-wrap:break-word}
@media (max-width:400px){.vd h3{font-size:14px;line-height:20px;overflow-wrap:normal;hyphens:none}.vd{padding:14px 8px}}
.contact-foto{height:auto;aspect-ratio:614/354}
.contact-foto img{object-position:center 40%}
@media (max-width:1024px){.proj img{image-rendering:auto}}

/* =====================================================================================
   COOKIEBANNER (DPS-component, opgemaakt in de stijl van de template)
   Donkere kaart linksonder, accent-rand, knoppen gelijkwaardig (accepteren en weigeren even groot).
   ===================================================================================== */
#dpscb{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:flex-start;padding:20px;pointer-events:none}
.dpscb-card{pointer-events:auto;position:relative;overflow:hidden;width:100%;max-width:430px;padding:26px 28px 24px;border-radius:24px;background:var(--ink);color:#fff;border:1px solid rgba(var(--teal-rgb),.55);box-shadow:0 24px 60px -18px rgba(0,0,0,.55);font:400 14px/23px var(--tekst)}
.dpscb-card::before{content:"";position:absolute;right:-70px;top:-70px;width:170px;height:170px;border-radius:50%;border:34px solid rgba(var(--teal-rgb),.12);pointer-events:none}
.dpscb-card h3{position:relative;font:900 22px/28px var(--kop);letter-spacing:-.06em;word-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 10px}
.dpscb-card p{position:relative;margin:0 0 18px;color:rgba(255,255,255,.82)}
.dpscb-card a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dpscb-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dpscb-btn{appearance:none;height:46px;padding:0 18px;border-radius:800px;border:1px solid transparent;font:600 13px/1 var(--tekst);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:transform .4s cubic-bezier(.22,.61,.36,1),background-color .4s,color .4s}
.dpscb-btn:hover{transform:translateY(-2px)}
.dpscb-accept{background:linear-gradient(90deg,var(--acc) 30%,var(--teal));color:#fff}
.dpscb-deny{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.dpscb-deny:hover{background:#fff;color:var(--ink)}
.dpscb-save{background:#fff;color:var(--ink);margin-top:4px}
.dpscb-link{appearance:none;background:none;border:0;padding:14px 0 0;font:400 13px/1 var(--tekst);color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dpscb-link:hover{color:#fff}
.dpscb-opts{border-top:1px solid rgba(255,255,255,.16);margin:4px 0 16px;padding-top:16px;display:flex;flex-direction:column;gap:12px}
.dpscb-opts[hidden]{display:none!important}
.dpscb-opt{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:20px;color:#fff}
.dpscb-opt input{accent-color:var(--teal);width:17px;height:17px;margin-top:2px;flex:none}
.dpscb-opt small{display:block;color:rgba(255,255,255,.62);font-size:12.5px;line-height:18px}
@media (max-width:767px){.dpscb-btn{white-space:nowrap;padding:0 10px;font-size:12px;letter-spacing:0}#dpscb{padding:12px}.dpscb-card{max-width:none;padding:22px 20px 20px;border-radius:20px}.dpscb-card h3{font-size:19px;line-height:24px}}
@media print{#dpscb{display:none!important}}

/* menubalk rechts: taalknop + CTA met vaste tussenruimte (fix 30-09) */
.nav-rechts{display:flex;align-items:center;gap:18px;flex:none}
.taal{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.7);border-radius:800px;color:#fff;font:600 13px/1 var(--tekst);letter-spacing:.04em;transition:background-color .4s,color .4s}
.taal:hover{background:#fff;color:var(--acc)}
@media (max-width:1100px){.nav-rechts .menu-cta{display:none}.nav-rechts{margin-left:auto;gap:12px}.nav-pil{gap:12px}}
@media (max-width:767px){.taal{height:32px;min-width:40px;padding:0 10px;font-size:12px}}

/* =====================================================================================
   CONTROLERONDE 30-09 (tablet 1024 en mobiel 390): kleine slordigheden
   ===================================================================================== */
/* 1. Google-badge mag niet over de kop vallen */
@media (max-width:1366px) and (min-width:768px){.hero-home .h1{padding-right:150px}}
@media (max-width:767px){.hero-home .hero-kop{padding-top:78px}.g-badge{top:-34px;right:0}.g-krul{display:none}}
/* 2. blauwe secties: inhoud niet in de ronding van de vorige sectie (tablet) */
@media (max-width:1024px) and (min-width:768px){.s-blauw.onder{margin-top:-120px}}
/* 3. drie kaarten: niet 2+1 met een gat (DPS-regel); 3 kolommen tot 900, daarna 2 met volle laatste */
@media (max-width:1024px){.exp-grid,.blog-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px) and (min-width:768px){.exp-grid,.blog-grid{grid-template-columns:1fr 1fr}.exp-grid>:last-child:nth-child(odd),.blog-grid>:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:1024px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.team-grid{grid-template-columns:1fr 1fr}.team-grid>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}.lid span{font-size:13px;line-height:20px}}
/* 4. illustraties gecentreerd als ze onder de tekst vallen */
@media (max-width:1024px){.hero-foto,.dash-wrap,.statfoto,.vd-vis,.split-foto,.kader{margin-inline:auto}.vd-split>.vd-vis{max-width:569px}}
/* 5. meterkaart: tekst niet door de meter */
.sf-kaart{justify-content:flex-end;padding-bottom:14%}
.sf-kaart svg{inset:10% 16% auto;width:68%}
.statfoto small{margin-top:4px}
@media (max-width:767px){.sf-kaart{width:44%;outline-width:8px}.statfoto b{font-size:18px;line-height:22px}.statfoto small{font-size:11px;line-height:14px}}
/* 6. formulierkaart contact: bubbel niet over de titel */
.form-kaart h3{padding-right:170px}
@media (max-width:1024px){.form-bubbel{display:none}.form-kaart h3{padding-right:0}}
/* 7. 'NO SPAM'-stempel niet over de eyebrow; 'QUICK TIPS' binnen beeld */
@media (max-width:767px){.stempel{top:-104px;right:0;width:84px;height:84px;font-size:16px;line-height:17px;border-width:4px}.nb-tekst{margin-top:40px}}
@media (max-width:1024px){.quick{right:-6px}}
/* 8. lange diensttitel breekt netjes binnen de kaart */
.dk h3{overflow-wrap:break-word;max-width:calc(100% - 110px)}
@media (max-width:767px){.dk h3{max-width:none;padding-right:96px}}
/* 9. pagina's zonder CTA (404, bedankt, blog, downloads, nieuwsbrief, afspraak): footer niet over de laatste sectie */
body.zonder-cta .voet{margin-top:0}
body.zonder-cta main>section:last-child{padding-bottom:120px}
body.zonder-cta main>section.hero:last-child{padding-bottom:110px}
@media (max-width:767px){body.zonder-cta main>section:last-child{padding-bottom:80px}}
/* controleronde 30-09, deel 2 */
@media (max-width:1366px){.exp-body h3{max-width:calc(100% - 100px)}.exp-body .knop{white-space:normal;text-align:left;font-size:14px;line-height:20px;gap:10px}.exp-body .knop .pijl{width:48px;height:34px}}
@media (max-width:767px){.exp-body h3{max-width:calc(100% - 90px)}}
.dk-slide{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.dk-slide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.dk-slide{grid-template-columns:minmax(0,1fr)}}
.dk h3{overflow-wrap:normal;hyphens:none}
.sf-kaart{justify-content:flex-start;padding:9% 8% 8%}
.sf-kaart svg{position:static;inset:auto;width:66%;height:auto;flex:none}
.sf-ic{display:none}
.statfoto b{margin-top:-44%}
.statfoto small{margin-top:14%;text-align:center}
@media (max-width:767px){.statfoto b{margin-top:-46%;font-size:17px}.statfoto small{margin-top:16%;font-size:10.5px;line-height:13px}}
@media (max-width:767px){.form-kaart.nb h3{margin-top:26px}}
.vd-vis{padding-bottom:40px}
.form-kaart h3{padding-right:130px}
@media (max-width:1024px){.form-kaart h3{padding-right:0}}
.dk h3{overflow-wrap:break-word}
@media (max-width:767px){.dk{padding:56px 22px 26px}.dk h3{font-size:18px;line-height:26px;padding-right:0;margin-top:22px}}
/* menu: items breken nooit over twee regels (v1.2, uit de Avondvrij-test) */
.menu>li>a,.menu>li>.sub-knop,.menu-cta{white-space:nowrap}
.logo{flex:none}
.nav-pil.krap>.menu,.nav-pil.krap .nav-rechts .menu-cta{display:none}
.nav-pil.krap .hamburger{display:inline-flex}
.nav-pil.krap .nav-rechts{margin-left:auto}

/* v1.3 (Avondvrij-feedback): knoppen blijven altijd binnen hun kaart */
.exp-body .knop,.dk .k-info,.blog-kaart .k-lees,.dl .k-info,.zij-cta .knop,.form-kaart .knop{max-width:100%}
.exp-body .knop{white-space:normal;text-align:left;line-height:22px}
/* v1.3: de persoon in de CTA staat vóór de footer en loopt er een stukje in door (schouders heel) */
.cta{z-index:7}
.cta-foto{position:relative}
.cta-foto img{-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent);mask-image:linear-gradient(to bottom,#000 90%,transparent)}
@media (max-width:767px){.cta-foto{margin-bottom:-40px}.cta-foto img{height:auto;max-height:420px}}
@media (max-width:1100px) and (min-width:768px){.exp-body .knop{font-size:12.5px;line-height:18px;padding:11px 14px;gap:8px;white-space:nowrap}.exp-body .knop .pijl{width:34px;height:26px}.exp-body .knop .pijl svg{width:20px;height:11px}.exp-body{padding-left:22px;padding-right:22px}}
/* v1.4: voordelenblok tussen 1025 en 1180 breed bleef 569px breed en duwde de tekst rechts uit beeld */
.vd-split>.tekst{min-width:0}
@media (max-width:1180px) and (min-width:1025px){.vd-split{gap:32px}.vd-split>.vd-vis{flex:0 1 569px;min-width:0}.vd-split>.tekst{flex:1 1 380px}}
/* v1.5 (Dikkie 30-09): de persoon in de CTA stopt precies op de bovenrand van de footer; de footer ligt ervoor, geen vervaging */
.cta{z-index:5}
.cta-foto img{-webkit-mask-image:none;mask-image:none;clip-path:inset(0 0 80px 0)}
@media (max-width:767px){.cta-foto img{clip-path:inset(0 0 53px 0)}}
/* v1.6 (30-09-2026): hovereffecten van webleap.nl, gemeten per onderdeel (bron/hover/meet.py, hover-webleap.json) */
/* knoppen krimpen naar 90% (elementor-animation-shrink, transform .3s) */
.knop,.menu-cta,.k-info,.k-lees,.verstuur,.socials a{transition:transform .3s,background-color .3s,color .3s,box-shadow .3s,border-color .3s}
.knop:hover,.menu-cta:hover,.k-info:hover,.k-lees:hover,.verstuur:hover{transform:scale(.9)}
.socials a:hover{transform:scale(.9);opacity:.9}
.k-info:hover{background:#fff;color:var(--acc);border-color:var(--acc)}
.k-lees:hover{color:var(--acc);border-color:var(--acc)}
/* expertisekaart wordt teal, alle tekst wit, icoonvak draait om (background .3s) */
.exp-kaart{transition:background-color .3s,border-color .3s,box-shadow .3s,transform .4s}
.exp-kaart:hover{background:var(--teal);border-color:var(--teal)}
.exp-kaart:hover .exp-body,.exp-kaart:hover .exp-body *:not(.knop):not(.knop *){color:#fff!important}
.exp-kaart:hover .exp-body svg:not(.knop svg){fill:currentColor}
.exp-foto .ic-hoek{transition:background-color .3s,color .3s}
.exp-kaart:hover .exp-foto .ic-hoek{background:#fff;color:var(--teal)}
/* waarom-tegels: teal cirkel groeit vanuit linksonder over de hele tegel (0,8s ease-in-out) */
.tegel{position:relative;overflow:hidden}
.tegel::before{content:"";position:absolute;left:-20px;bottom:-20px;width:20px;height:20px;border-radius:500px;background:var(--teal);opacity:0;z-index:0;transition:.8s ease-in-out}
.tegel>*{position:relative;z-index:1}
.tegel:hover::before{transform:scale(93);opacity:1}
.tegel:hover,.tegel:hover *{color:#fff}
/* Google-kaart zakt 6px, herofoto kantelt 1 graad (transform .4s) */
.g-badge{transition:translate .4s}
.g-badge:hover{translate:0 6px}
.hero-foto{transition:rotate .4s}
.hero-foto:hover{rotate:1deg}
/* kenmerkkaarten op dienstpagina's: rand in de accentkleur */
.kr-kaart{border:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.kr-kaart:hover{border-color:var(--acc)}
/* blogfilter, downloadtabs en contactknoppen */
.blog-filter button{transition:.3s}
.blog-filter button:not(.aan):hover{background:transparent;color:var(--teal);border-color:var(--teal);box-shadow:rgba(158,158,158,.145) 0 10px 10px 0}
.dl-tabs button{transition:background-color .3s,color .3s}
.dl-tabs button:not(.aan):hover{background:var(--acc);color:#fff}
.kanaal{transition:.3s}
.kanaal:hover{background:var(--ink);color:#fff}
.kanaal:hover svg{color:#fff}
@media (hover:none){.hero-foto:hover{rotate:none}.g-badge:hover{translate:none}}
@media (prefers-reduced-motion:reduce){.tegel::before,.exp-kaart,.g-badge,.hero-foto,.knop,.menu-cta,.k-info,.k-lees{transition:none}}
/* v1.7: CTA met twee personen naast elkaar (site.cta.duo): breder fotovak zodat ze niet klein worden */
.cta-duo .cta-foto{flex:0 0 780px}
.cta-duo .cta-foto img{width:780px}
@media (max-width:1366px){.cta-duo .cta-foto{flex:1.35 1 0}.cta-duo .cta-foto img{width:100%}}
@media (max-width:767px){.cta-duo .cta-foto{flex:none;width:100%}}
.cta-duo .cta-tekst{flex:1 1 0;min-width:0}
/* v1.9: beoordelingen (Google + Trustpilot) en "Een product van <moederbedrijf>" op elke pagina */
.vt-balk{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:45px}
.hero-home .vt-balk{margin-top:55px}
.bo-rij{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bo,.moeder{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:7px 18px 7px 10px;border-radius:40px;background:#fff;color:var(--ink);box-shadow:0 8px 22px -8px rgba(0,0,0,.28);font:500 13px/1.2 var(--tekst);text-decoration:none;transition:transform .3s}
.bo:hover,.moeder:hover{transform:scale(.95)}
.bo-logo{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#f3f4f7}
.bo-logo svg{width:22px;height:22px}
.bo-google .bo-logo svg{color:#4285f4}
.bo-tekst{display:flex;flex-direction:column;gap:2px;text-align:left}
.bo-regel{display:flex;align-items:center;gap:7px}
.bo-regel b{font:700 16px/1 var(--tekst);color:var(--ink)}
.bo-sterren{display:inline-flex;gap:2px}
.bo-sterren svg{width:14px;height:14px;color:#fbbc04}
.bo-tp .bo-sterren svg{width:15px;height:15px;padding:2px;border-radius:2px;background:#00B67A;color:#fff}
.bo small{font-size:12px;color:#5f6b7a;white-space:nowrap}
.moeder{padding:7px 20px}
.moeder span{font-size:12px;color:#5f6b7a;white-space:nowrap}
.moeder img{height:28px;width:auto}
.moeder-wit{background:transparent;box-shadow:none;border:1px solid rgba(255,255,255,.28);padding-left:16px}
.moeder-wit span{color:rgba(255,255,255,.8)}
.voet-1 .moeder,.voet-1 .bo-rij{margin-top:18px}
.bo-voet .bo{box-shadow:none}
.bo-midden{justify-content:center;margin-top:30px}
.bo-popup,.bo-zij{margin-top:18px}
.popup-l .bo-rij{justify-content:flex-start}
@media (max-width:767px){.vt-balk{gap:8px;margin-top:32px}.bo,.moeder{min-height:46px;padding:6px 14px 6px 8px}.bo-logo{width:30px;height:30px}.moeder img{height:24px}}
.vt-balk .bo-rij{display:contents}
@media (min-width:768px){.vt-balk .bo,.vt-balk .moeder{min-height:60px;padding:8px 22px 8px 11px;font-size:14px}.vt-balk .bo-logo{width:40px;height:40px}.vt-balk .bo-logo svg{width:25px;height:25px}.vt-balk .bo-regel b{font-size:18px}.vt-balk .bo-sterren svg{width:16px;height:16px}.vt-balk .bo-tp .bo-sterren svg{width:17px;height:17px}.vt-balk .bo small{font-size:13px}.vt-balk .moeder{padding-left:22px}.vt-balk .moeder img{height:34px}.vt-balk .moeder span{font-size:13px}}
.voet-1 .moeder{align-self:flex-start;width:auto;max-width:100%}
.voet-1{align-items:flex-start}
@media (max-width:767px){.bo small{font-size:11px}.bo-regel b{font-size:15px}.bo-sterren svg{width:12px;height:12px}.bo-tp .bo-sterren svg{width:13px;height:13px}.bo{padding-right:12px}}
/* v1.10 (Dikkie 30-09): GEEN witte pillen of outlines rond de beoordelingen; tekst direct op de achtergrond,
   wit op donker/verloop, donker op wit. Echt gekleurd Google-logo, witte DPS-logoversie op donker. */
.bo,.moeder,.moeder-wit,.vt-balk .bo,.vt-balk .moeder{background:none;border:0;box-shadow:none;padding:0;min-height:0;color:inherit}
.bo-logo{background:none;width:auto;height:auto;border-radius:0}
.vt-balk{gap:18px 44px;color:#fff}
.vt-balk .bo-regel b,.vt-balk .bo small,.vt-balk .moeder span{color:#fff}
.vt-balk .bo small,.vt-balk .moeder span{opacity:.9}
.voet .bo-regel b,.voet .bo small,.voet .moeder span,.popup-l .bo-regel b,.popup-l .bo small{color:#fff}
.bo-rij{gap:14px 36px}
.bo-logo svg,.vt-balk .bo-logo svg{width:30px;height:30px}
.vt-balk .moeder img{height:36px}
.moeder img{height:30px}
@media (max-width:767px){.vt-balk{gap:16px 26px}.bo-logo svg,.vt-balk .bo-logo svg{width:26px;height:26px}.vt-balk .moeder img{height:30px}}
/* v1.11: link naar het moederbedrijf, gecentreerd onder de beoordelingen (alleen homepage-hero) */
.vt-link{flex:0 0 100%;display:inline-flex;justify-content:center;align-items:center;gap:8px;color:#fff;font:600 15px/1.4 var(--tekst);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color .3s}
.vt-link svg{width:16px;height:16px;transition:transform .3s}
.vt-link:hover{text-decoration-color:#fff}
.vt-link:hover svg{transform:translateX(4px)}
/* v1.12: tijdwinst-rekenhulp */
.tw{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;margin-top:60px;align-items:stretch}
.tw-in{display:flex;flex-direction:column;gap:26px;padding:40px;background:#fff;border-radius:30px;box-shadow:rgba(0,0,0,.08) 0 5px 39px 0}
.tw-veld label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;font:500 16px/1.4 var(--tekst);color:var(--ink)}
.tw-veld output{flex:none;font:700 20px/1 var(--tekst);color:var(--acc)}
.tw-veld input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--acc) 0,var(--teal) var(--p,50%),#e6e8ee var(--p,50%));outline:none;cursor:pointer}
.tw-veld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:6px solid var(--acc);box-shadow:0 4px 12px -2px rgba(0,0,0,.25);transition:transform .3s}
.tw-veld input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:6px solid var(--acc);box-shadow:0 4px 12px -2px rgba(0,0,0,.25)}
.tw-veld input[type=range]:focus-visible::-webkit-slider-thumb,.tw-veld input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.tw-uit{display:flex;flex-direction:column;gap:14px;padding:40px;border-radius:30px;color:#fff;background:linear-gradient(135deg,var(--acc),var(--teal));box-shadow:0 20px 40px -18px rgba(var(--acc-rgb),.7)}
.tw-rij{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.25);font-size:16px}
.tw-rij b{font-weight:700;white-space:nowrap}
.tw-groot{text-align:center;margin:8px 0}
.tw-groot small{display:block;font-size:15px;opacity:.9}
.tw-groot strong{display:block;font:900 56px/1.1 var(--kop,var(--tekst));letter-spacing:-.02em}
.tw-drie{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.tw-drie>div{padding:16px 8px;border-radius:18px;background:rgba(255,255,255,.14)}
.tw-drie strong{display:block;font:800 26px/1.15 var(--tekst)}
.tw-drie small{display:block;margin-top:4px;font-size:13px;line-height:1.3;opacity:.92}
.tw-uit .knop{align-self:center;margin-top:10px}
.tw-noot{max-width:860px;margin:26px auto 0;text-align:center;font-size:14px;color:#6b7280}
@media (max-width:1024px){.tw{grid-template-columns:1fr}}
@media (max-width:767px){.tw{margin-top:40px;gap:20px}.tw-in,.tw-uit{padding:26px 20px}.tw-groot strong{font-size:42px}.tw-drie{grid-template-columns:1fr}.tw-drie strong{font-size:24px}.tw-veld label{font-size:15px}}
/* v1.12: stippellijnen in het voordelenblok lopen nu echt van kaart naar kaart (oude vaste lijnen hingen los naast de kaarten) */
.vd-vis::before,.vd-vis::after{display:none}
.vd-kol{position:relative;z-index:1}
.vd-kol.twee{z-index:2}
.vd{z-index:1}
.vd-kol .vd+.vd::before{content:"";position:absolute;left:50%;top:-30px;margin:0;width:0;height:30px;background:none;transform:none;border-left:2px dashed var(--teal);z-index:-1}
.vd-kol:not(.twee) .vd::after{content:"";position:absolute;left:100%;top:calc(50% + 20px);width:80px;border-top:2px dashed var(--teal);z-index:-1}
@media (max-width:767px){.vd-kol .vd+.vd::before{top:-16px;height:16px}.vd-kol:not(.twee) .vd::after{top:calc(50% + 20px);width:40px}}
/* v1.12: routeschema schaalt als één geheel mee (alle maten in delen van de ontwerpbreedte 1280), zodat lijnen en vormen op elkaar blijven aansluiten */
.route{container-type:inline-size;height:auto;aspect-ratio:1280/444}
.route>span{font-size:calc(16 * 100cqw / 1280);line-height:1.35}
.rt-1{left:calc(80 * 100cqw / 1280);top:calc(60 * 100cqw / 1280);width:calc(252 * 100cqw / 1280);height:calc(60 * 100cqw / 1280)}
.rt-ruit{width:calc(140 * 100cqw / 1280);height:calc(140 * 100cqw / 1280);border-radius:calc(20 * 100cqw / 1280)}
.rt-2{left:calc(137 * 100cqw / 1280);top:calc(202 * 100cqw / 1280)}
.rt-3{left:calc(380 * 100cqw / 1280);top:calc(242 * 100cqw / 1280);width:calc(254 * 100cqw / 1280);height:calc(60 * 100cqw / 1280)}
.rt-4{left:calc(720 * 100cqw / 1280);top:calc(110 * 100cqw / 1280);width:calc(252 * 100cqw / 1280);height:calc(60 * 100cqw / 1280)}
.rt-5{left:calc(715 * 100cqw / 1280);top:calc(210 * 100cqw / 1280);width:calc(245 * 100cqw / 1280);height:calc(86 * 100cqw / 1280)}
.rt-6{left:calc(1080 * 100cqw / 1280);top:calc(180 * 100cqw / 1280);width:calc(120 * 100cqw / 1280);height:calc(120 * 100cqw / 1280)}
.rt-lijn path{vector-effect:non-scaling-stroke}
/* v1.12: CTA met twee personen op tablet: tekst boven, foto eronder (lange koppen pasten niet naast het duo) */
@media (max-width:1024px) and (min-width:768px){.cta-duo .c{flex-direction:column-reverse;align-items:center;padding-top:60px;gap:30px}.cta-duo .cta-tekst{flex:none;width:100%;max-width:720px;align-items:center;text-align:center;padding-bottom:0}.cta-duo .cta-foto{flex:none;width:100%;max-width:620px;align-self:center}.cta-duo .cta-foto img{width:100%;height:auto}}
/* v1.13: reviewslider met pijltjes aan de zijkant en het platformlogo (Google/Trustpilot) i.p.v. een letter */
.sl-zij{position:relative}
.sl-zij .sl-pijlen{position:absolute;left:-78px;right:-78px;top:50%;transform:translateY(-50%);justify-content:space-between;margin:0;pointer-events:none;z-index:3}
.sl-zij .sl-pijl{pointer-events:auto}
@media (max-width:1439px){.sl-zij .sl-pijlen{left:-22px;right:-22px}}
@media (max-width:767px){.sl-zij .sl-pijlen{left:-12px;right:-12px}}
.rev .avatar{background:#fff;box-shadow:0 4px 14px -4px rgba(0,0,0,.18)}
.rev .avatar svg{width:30px;height:30px}
@media (max-width:1439px){.sl-zij .sl-pijl{width:52px;height:52px}.sl-zij .sl-pijl svg{width:20px;height:20px}.sl-zij .sl-pijlen{left:-26px;right:-26px}}
@media (max-width:767px){.sl-zij .sl-pijl{width:44px;height:44px}.sl-zij .sl-pijlen{left:-14px;right:-14px}}
.s-reviews .rev-sl:last-child{margin-bottom:120px}
@media (max-width:767px){.s-reviews .rev-sl:last-child{margin-bottom:70px}}
/* v1.14: artikelopmaak voor langere kennisbankstukken: genummerde lijsten, tabellen, citaatblok, compactere lijstregels */
.art-tekst ol{padding-left:28px;margin:0 0 20px}
.art-tekst ol li,.art-tekst ul li{margin-bottom:10px}
.art-tekst table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0 28px;font-size:16px;line-height:24px;border:1px solid var(--lijn);border-radius:16px;overflow:hidden}
.art-tekst th,.art-tekst td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--lijn)}
.art-tekst tr:last-child td{border-bottom:0}
.art-tekst thead th{background:var(--licht);font-weight:600}
.art-tekst td:last-child{text-align:right;white-space:nowrap}
.art-tekst blockquote{margin:10px 0 28px;padding:22px 26px;border-left:4px solid var(--teal);border-radius:0 16px 16px 0;background:var(--licht);font-size:17px;line-height:28px}
.art-tekst blockquote p{margin:0 0 10px}.art-tekst blockquote p:last-child{margin:0}
.art-tekst em{color:#5f6b7a}
@media (max-width:767px){.art-tekst table{font-size:14px}.art-tekst th,.art-tekst td{padding:10px 12px}.art-tekst td:last-child{white-space:normal}}
/* v1.14: losse laatste blogkaart in een raster van 3 staat in het midden, nooit links met twee lege vakken */
@media (min-width:901px){.blog-grid>.blog-kaart:last-child:nth-child(3n+1){grid-column:2}}
/* WIJZIGING 01-10-2026 (vaste regel Dikkie): Google-beoordeling NOOIT in een vak, kaartje, pil of kader.
   Alleen logo, cijfer, sterren en tekst vrij op de achtergrond. Tekst wit op donker/verloop/foto, donker (--ink) op licht.
   Sterren geel, Google-G in eigen kleuren. Op een foto of verloop alleen een zachte text-shadow, nooit een vlak. */
.bo,.moeder,.moeder-wit,.vt-balk .bo,.vt-balk .moeder{border-radius:0}
/* hero: de schuine witte Google-kaart wordt vrije tekst op het blauwe verloop */
.g-kaart{left:0;top:14px;width:168px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;transform:none;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.28)}
.g-logo{position:static;margin:0 0 2px;width:34px;height:34px;border-radius:0;background:none;box-shadow:none}
.g-logo svg{width:30px;height:30px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}
.g-score{justify-content:center;gap:6px;font:700 17px/20px var(--tekst);color:#fff}
.g-sterren{color:#fbbc05}
.g-score .g-sterren svg{width:15px;height:15px}
.g-aantal{margin-top:0;font:600 14px/18px var(--tekst);color:#fff}
.g-krul{left:70px;top:118px}
/* over-ons-kader: geen witte cirkel met rand meer, vrij op de hoek van de foto */
.kader-google{top:22px;right:26px;width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:2px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.45)}
.kader-google svg{width:28px;height:28px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
.kader-google .g-sterren svg{width:14px;height:14px;color:#fbbc05;filter:none}
/* pop-up (blauw): reservepil zonder pilvorm */
.g-pil{padding:0;border-radius:0;background:none;box-shadow:none;color:#fff}
.g-pil b{color:#fff}
/* platformlogo in de reviewkaart: geen witte cirkel met schaduw */
.rev .avatar{background:none;box-shadow:none;border-radius:0}
.art-tekst td:last-child{text-align:left}
.art-tekst table:not(:has(thead)) td:last-child{text-align:right}
@media (max-width:1100px) and (min-width:768px){.sl-zij .sl-pijl{width:44px;height:44px}.sl-zij .sl-pijlen{left:-16px;right:-16px}}

/* =====================================================================================
   v1.15 (05-10-2026, vaste regel Dikkie 30-09 "offerteknop altijd in beeld"):
   de menupil blijft vast in beeld (fixed, beginstand gelijk aan de bron: top 30, mobiel 25, transparant).
   Na 30px scrollen (.vast via site.js): top 12 (mobiel 10), pil gevuld met de drager, logo compacter.
   Op tablet/mobiel (<=1100 of .krap) een compacte knop .mob-cta (zelfde klasse menu-cta, zelfde href/pop-up).
   ===================================================================================== */
.kop-balk{position:fixed;transition:top .35s cubic-bezier(.22,.61,.36,1)}
.nav-pil{transition:min-height .35s cubic-bezier(.22,.61,.36,1),padding .35s cubic-bezier(.22,.61,.36,1),background-color .35s,box-shadow .35s}
.logo img{transition:width .35s cubic-bezier(.22,.61,.36,1),height .35s cubic-bezier(.22,.61,.36,1)}
.kop-balk.vast{top:12px}
.kop-balk.vast .nav-pil,.no-js .nav-pil{min-height:64px;padding-top:8px;padding-bottom:8px;background-color:var(--acc);background-color:color-mix(in srgb,var(--acc) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:rgba(0,0,0,.14) 0 10px 30px 0}
.kop-balk.vast .logo img{width:180px;height:30px}
html{scroll-padding-top:110px}
.art-zij>:last-child{top:100px}
.hamburger{flex:none}
.mob-cta{display:none}
.mob-cta svg{display:none}
@media (max-width:1366px){.kop-balk.vast .nav-pil{min-height:52px;padding-top:6px;padding-bottom:6px}.kop-balk.vast .logo img{width:160px;height:26px}}
@media (max-width:1100px){.nav-rechts .mob-cta{display:inline-flex}.logo{flex:0 1 auto;min-width:60px}.logo img{max-width:100%}}
.nav-pil.krap .nav-rechts .mob-cta{display:inline-flex}
.mob-cta{padding:6px 14px}
@media (max-width:767px){.kop-balk.vast{top:10px}.kop-balk.vast .nav-pil{min-height:56px;padding-top:8px;padding-bottom:8px}.kop-balk.vast .logo img{width:140px;height:23px}html{scroll-padding-top:90px}}
@media (max-width:480px){.nav-rechts .taal{display:none}.logo img{width:140px;height:23px}}
@media (max-width:374px){.nav-pil{padding-left:14px;padding-right:14px;gap:8px}.nav-rechts{gap:8px}.logo img,.kop-balk.vast .logo img{width:100px;height:17px}.mob-cta{padding:6px 12px}}
/* v1.15: pijltje in het mobiele menu had geen maat (werd schermbreed); 16px zoals het desktopmenu */
.mob-menu summary{align-items:center}
.mob-menu summary svg{width:16px;height:16px;flex:none;transition:transform .35s}
.mob-menu details[open] summary svg{transform:rotate(180deg)}

/* =====================================================================================
   VASTE REGELS DIKKIE 09-10-2026 (alle templates; referentie template 5 klantlaag.py)
   1. calculator als eigen gekleurde band direct onder het eerste tekstblok (.calc-band, .voor-calc)
   2. FAQ altijd laatste blok in main; na de CTA schuift hij er met een 100px-ronding overheen (.na-cta)
   3. lange tekstblokken: kop links sticky, tekst rechts, h3 met lijn, lijsten als kaartjes met groen vinkje
   4. footer zwart #000, vier kolommen, werkgebiedrij, onderbalk (vervangt #1b1f24 + teal balk)
   ===================================================================================== */
.s.voor-calc{padding-bottom:88px}
@media (max-width:767px){.s.voor-calc{padding-bottom:64px}}
.calc-band{background-color:var(--acc);background-image:url(/assets/img/lijnen-blauw.svg),var(--verloop-blauw);background-size:cover,100% 100%;color:#fff;padding:64px 0 88px}
@media (max-width:767px){.calc-band{padding:48px 0 64px}}
.cb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:70px;align-items:center}
.cb-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.cb-tekst .h2{color:#fff}
.cb-tekst p{margin:0;font-weight:500;color:#fff;max-width:520px}
.cb-punten{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cb-punten li{display:flex;align-items:center;gap:12px;color:#fff;font-weight:500}
.vink-groen{width:22px;height:22px;flex:0 0 22px}
@media (max-width:1024px){.cb-grid{grid-template-columns:1fr;gap:40px;justify-items:center}.cb-tekst{align-items:center;text-align:center}.cb-punten{width:fit-content;margin-inline:auto;text-align:left}}

/* offertecalculator: letterlijk de SLK-kaart (port template 13), kleurtokens van deze template */
.calc-kaart{background:#fff;border-radius:24px;box-shadow:0 18px 44px -18px rgba(16,19,21,.28);width:100%;max-width:640px;overflow:hidden;color:var(--ink)}
.calc{padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;text-align:left;font-family:var(--tekst);color:var(--ink)}
.calc-titel{font-size:24px;font-weight:700;line-height:1.2;color:#000;margin:0 0 16px;text-align:center}
.calc-voortgang{display:flex;align-items:center;margin-bottom:24px}
.calc-voortgang span{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center;font-size:13.5px;font-weight:700;line-height:1.5;background:#eef2f0;color:#8a949a;transition:background .3s cubic-bezier(.22,.61,.36,1),color .3s cubic-bezier(.22,.61,.36,1)}
.calc-voortgang span.actief{background:var(--ink);color:#fff}
.calc-voortgang span.klaar{background:var(--acc);color:#fff}
.calc-voortgang i{flex:1;height:2px;background:#e3e9e6;margin:0 6px}
.calc-stapnr{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:#8a949a;text-transform:uppercase;margin-bottom:6px;line-height:1.5}
.calc h3{font:600 22px/1.3 var(--tekst);color:var(--ink);margin:0 0 6px}
.calc .calc-sub{color:#69727d;font-size:14.5px;line-height:1.5;margin:0 0 18px}
.calc-stap{display:none}
.calc-stap.actief{display:block}
.calc-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.calc-tegels{grid-template-columns:repeat(2,1fr)}}
.calc-tegel{border:2px solid #e3e9e6;border-radius:14px;background:#fff;padding:16px 10px;text-align:center;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .25s cubic-bezier(.22,.61,.36,1),background .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1)}
.calc-tegel svg{width:22px;height:22px;margin:0 auto 8px;color:var(--ink)}
.calc-tegel svg path,.calc-tegel svg circle{stroke:var(--ink)}
.calc-tegel svg:not([fill]) {fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.calc-tegel b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.3;overflow-wrap:break-word}
.calc-tegel:hover{border-color:var(--acc)}
.calc-tegel.gekozen{border-color:var(--acc);background:rgba(var(--acc-rgb),.12);transform:translateY(-1px)}
.calc .form-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.calc .form-rij{grid-template-columns:1fr}}
.calc .veld{margin-bottom:18px;text-align:left}
.calc .veld label:not(.sr){display:block;font-size:15px;font-weight:600;line-height:1.5;margin-bottom:7px;color:var(--ink)}
.calc .veld input{width:100%;padding:13px 16px;font-size:16px;font-family:inherit;color:var(--ink);border:2px solid #e3e9e6;border-radius:8px;background:#fff;transition:border-color .3s cubic-bezier(.22,.61,.36,1)}
.calc .veld input:focus{outline:none;border-color:var(--acc)}
.calc-acties{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;align-items:center}
.calc-volgende{width:100%;display:block;text-align:center;background:var(--acc);color:#fff;border:0;border-radius:12px;padding:16px;cursor:pointer;font-family:inherit;font-size:16.5px;font-weight:700;line-height:1.25;transition:background .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1)}
.calc-volgende:hover{background:var(--ink);transform:translateY(-1px)}
.calc-terug{background:none;border:0;color:#8a949a;cursor:pointer;font-family:inherit;font-size:14px;margin-top:12px;display:inline-flex;align-items:center;gap:6px;padding:0}
.calc-terug:hover{color:var(--ink)}
.calc-gerust{display:flex;justify-content:center;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;line-height:1.5;color:#69727d}
.cg-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cg-item svg{width:14px;height:14px;flex:0 0 auto}
.calc-foutmelding{color:#c0392b;font-size:13.5px;margin-top:10px;display:none}
.calc .form-melding{margin-top:10px}
.no-js .calc-stap{display:block!important;margin-bottom:22px}
.no-js .calc-voortgang,.no-js .calc-stapnr,.no-js .calc-terug{display:none}
@media (max-width:767px){.calc{padding:26px 20px;text-align:center}.calc .veld,.calc .veld label:not(.sr){text-align:center}}

/* volledige Google-beoordeling (logo, waardering, sterren, aantal), zonder vak */
.g-vol{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);background:none;border:0;padding:0}
.gv-logo svg{width:30px;height:30px;flex:none}
.gv-tekst{display:flex;flex-direction:column;line-height:1.35}
.gv-regel{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gv-regel b{font-weight:600;font-size:15px}
.gv-sterren{display:inline-flex;gap:2px;color:#fbbc04}
.gv-sterren svg{width:15px;height:15px}
.gv-tekst small{font-size:13px;color:inherit;opacity:.85}
.g-vol.gv-wit{color:#fff}
.gv-calc{margin-top:18px}

/* FAQ na de CTA: schuift er net als de footer overheen, zodat de persoon op de rand blijft staan */
.s.na-cta{margin-top:-80px;z-index:6;border-radius:100px 100px 0 0;padding-bottom:200px}
@media (max-width:767px){.s.na-cta{margin-top:-53px;border-radius:50px 50px 0 0;padding-bottom:130px}}

/* lange tekstblokken */
.tekst-blok{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:70px;align-items:start}
@media (min-width:1025px){.tekst-blok-kop{position:sticky;top:120px}}
.tekst-blok-kop{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.tekst-blok-tekst{font-weight:500}
.tb-deel+.tb-deel{margin-top:40px;padding-top:30px;border-top:1px solid var(--lijn)}
.tb-deel h3{font:600 22px/32px var(--tekst);color:var(--ink);margin:0 0 12px}
.tekst-vinken{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tekst-vinken li{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid rgba(var(--acc-rgb),.18);border-radius:14px;padding:14px 16px;line-height:24px;color:var(--ink);box-shadow:0 6px 18px -12px rgba(16,19,21,.25)}
.tekst-vinken .vink-groen{margin-top:1px}
@media (max-width:1024px){.tekst-blok{grid-template-columns:1fr;gap:30px}}
@media (max-width:767px){.tekst-vinken{grid-template-columns:1fr}}
/* artikeltekst: tussenkoppen met een dunne lijn, lijsten als kaartjes met groen vinkje */
.art-tekst h2{padding-top:36px;border-top:1px solid var(--lijn)}
.art-tekst h2:first-child{padding-top:0;border-top:0}
.art-tekst ul{list-style:none;padding:0;margin:8px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.art-tekst ul li{position:relative;margin:0;padding:14px 16px 14px 50px;background:#fff;border:1px solid rgba(var(--acc-rgb),.18);border-radius:14px;font-size:16px;line-height:26px;box-shadow:0 6px 18px -12px rgba(16,19,21,.25)}
.art-tekst ul li::before{content:"";position:absolute;left:16px;top:16px;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2322a447'/%3E%3Cpath d='m7 12.4 3.2 3.1L17 8.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:767px){.art-tekst ul{grid-template-columns:1fr}}

/* footer: zwart, vier kolommen, werkgebied, onderbalk (vaste regel 09-10-2026) */
.voet.ft{background:#000;border-radius:100px 100px 0 0;color:#cfcfcf;font-size:15px;line-height:26px;overflow:hidden}
.ft .c{padding:100px 0 0}
.ft-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.15fr;gap:50px}
.ft-merk{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ft-merk p{margin:0;max-width:340px}
.ft .voet-logo img{width:220px;height:auto;max-height:110px;object-fit:contain;object-position:left}
.ft-kop{display:block;font:600 13px/20px var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft ul a{color:#cfcfcf;transition:color .3s}
.ft ul a:hover{color:#fff}
.ft-contact li{display:flex;gap:12px;align-items:flex-start}
.ft-contact svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--teal)}
.ft-uren{display:flex;flex-direction:column}
.ft-knop{margin-top:24px}
.ft-socials{gap:12px}
.ft-socials a{width:42px;height:42px;border:2px solid currentColor}
.ft-socials svg{width:20px;height:20px}
.ft-socials .soc-facebook{color:#1877F2}.ft-socials .soc-linkedin{color:#0A66C2}.ft-socials .soc-pinterest{color:#E60023}.ft-socials .soc-youtube{color:#FF0000}.ft-socials .soc-whatsapp{color:#25D366}
.ft-socials .soc-instagram{color:#dc2743;border:2px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) border-box}
.ft-socials .soc-instagram svg{fill:url(#ig-verloop)}
.ft-wg{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 22px;margin-top:60px;padding:26px 0;border-top:1px solid rgba(255,255,255,.14)}
.ft-wg .ft-kop{margin:0}
.ft-plaatsen{display:flex;flex-wrap:wrap;gap:6px 18px;flex:1 1 auto}
.ft-plaatsen a,.ft-alle{color:#cfcfcf}
.ft-plaatsen a:hover,.ft-alle:hover{color:#fff}
.ft-alle{white-space:nowrap;font-weight:500}
.ft-onder{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 30px;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:#9a9a9a}
.ft-onder nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.ft-onder a{color:#9a9a9a}
.ft-onder a:hover{color:#fff}
.ft .dps-made{color:#9a9a9a}
@media (max-width:1100px){.ft-grid{grid-template-columns:1fr 1fr;gap:44px}}
@media (max-width:767px){
  .voet.ft{border-radius:50px 50px 0 0}
  .ft .c{padding-top:70px}
  .ft-grid{grid-template-columns:1fr;gap:38px}
  .ft-wg{margin-top:44px}
  .ft-onder{flex-direction:column;align-items:flex-start;padding-bottom:110px}   /* ruimte voor zwevende knoppen/cookieknop */
}
@media print{.ft-onder nav,.ft-socials{display:none}}
.smal-2-in{max-width:840px;margin-inline:auto}
.art-tekst p,.art-tekst li{overflow-wrap:break-word}   /* lange samenstellingen (arbeidsongeschiktheidsverzekering) op 320 */

/* ---------- CONCEPTDESIGN-MELDING (02-11-2026, ontbrak in v1.15: concept-mode.js bouwde de melding zonder opmaak; overgenomen uit template 13, tokens van template 17) ---------- */
.dps-concept-pill{position:fixed;left:18px;bottom:22px;z-index:1200;display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;font-family:var(--tekst);font-size:11.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:#fff;background:rgba(27,31,36,.9);border:1px solid rgba(var(--acc-rgb),.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 26px -10px rgba(0,0,0,.7);cursor:pointer;transition:.3s}
.dps-concept-pill:hover{background:rgba(27,31,36,.98);border-color:var(--acc);transform:translateY(-2px)}
.dps-concept-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;box-shadow:0 0 0 4px rgba(var(--acc-rgb),.25)}
@media(max-width:900px){
  .dps-concept-pill{left:0;right:0;bottom:0;transform:none;width:100%;justify-content:center;border-radius:0;border:0;border-top:1px solid rgba(var(--acc-rgb),.5);background:rgba(20,20,20,.96);padding:10px 16px;font-size:10.5px;letter-spacing:2px}
  .dps-concept-pill:hover{transform:none}
  body.dps-concept-open .dps-concept-pill{display:none}
}
body.dps-concept-open #dpscb{display:none!important}
.dps-concept-modal{position:fixed;inset:0;z-index:1300;display:none}
.dps-concept-modal[aria-hidden="false"]{display:block}
.dps-concept-backdrop{position:absolute;inset:0;background:rgba(12,11,13,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:dpsConceptFade .3s ease both}
.dps-concept-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 36px));max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:24px;padding:38px 32px 30px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:dpsConceptIn .42s ease both}
@keyframes dpsConceptFade{from{opacity:0}to{opacity:1}}
@keyframes dpsConceptIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.dps-concept-close{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--licht-2);color:var(--ink);cursor:pointer}
.dps-concept-close svg{width:17px;height:17px}
.dps-concept-ic{display:grid;place-items:center;margin:0 auto 16px;width:62px;height:62px;border-radius:50%;background:rgba(var(--acc-rgb),.1);color:var(--acc)}
.dps-concept-ic svg{width:30px;height:30px}
.dps-concept-panel h3{font-family:var(--tekst);font-weight:600;font-size:24px;line-height:30px;color:var(--ink);margin:0 0 12px}
.dps-concept-lead{color:var(--txt);font-size:15.5px;line-height:1.65;margin:0 0 22px}
.dps-concept-works{background:var(--licht-2);border-radius:18px;padding:18px 20px;margin:0 0 24px}
.dps-concept-works strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.dps-concept-works ul{width:fit-content;margin-inline:auto;text-align:left;display:flex;flex-direction:column;gap:9px;list-style:none;padding:0}
.dps-concept-works li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--txt)}
.dps-concept-works li svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:#16a34a;fill:none}
.dps-concept-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:15px 30px;border:0;border-radius:999px;background:var(--acc);color:#fff;font-family:var(--tekst);font-weight:600;font-size:15px;cursor:pointer;transition:.3s}
.dps-concept-btn:hover{background:var(--ink)}
.dps-concept-by{display:block;margin-top:16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b7280}
body.dps-concept-open{overflow:hidden}
a[data-concept-disabled],a[href="#!"]{cursor:pointer}
@media print{.dps-concept-pill,.dps-concept-modal{display:none!important}}

/* 02-11-2026: dienstenslider met 2 of 4 kaarten = twee kolommen (nooit 3 + 1 met een leeg vlak) */
@media (min-width:768px){.dk-slide.dk-twee{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 02-11-2026 (Dikkie, OS Consulting): zonder Google-badge geen gereserveerde ruimte boven de h1 op de telefoon (gaf een groot leeg blauw vlak) */
@media (max-width:767px){.hero-home .hero-kop:not(:has(.g-badge)){padding-top:0}.hero-home:not(:has(.g-badge)){padding-top:150px}}
/* 02-11-2026 telefoonversie gelijk aan webleap.nl op 390 (gemeten, Dikkie: "precies hetzelfde als het origineel") */
@media (max-width:767px){
  .eb{font-size:16px;line-height:30px;padding:4px 23px}
  .exp-body h3{font-size:20px;line-height:30px}
  .tl-kaart,.tl-rij:nth-child(even) .tl-kaart{width:281px;max-width:100%;margin-inline:auto}
  .tegel .ic{width:30px;height:30px;margin-right:8px}
  .tegel{padding:33px 20px;min-height:96px}
  .blog-kaart h3{font-size:18px;line-height:25px}
  .blog-foto .tag{font-size:12px;line-height:18px;padding:8px 15px}
  .faq summary{font-size:20px;line-height:30px}
  .split .tekst .knop{width:auto;align-self:flex-start}
  .cta-foto img{width:351px;max-width:100%;height:402px;object-fit:cover;object-position:center top}
}
@media (max-width:767px){.s-blog .m-slider .sl-pijl{width:50px;height:50px;background:var(--link);border:0;color:#fff}}
/* 02-11-2026 bronfooter (site.json footer_bron): breed logo zonder lege ruimte erboven/eronder, onderbalk rustig met de verplichte links op een eigen regel */
.voet-1 .voet-logo img{height:auto;max-height:142px}
.voet-balk .voet-legal{display:block;margin-top:4px;font-size:13px;line-height:22px;opacity:.85}
.voet-balk .voet-legal a{text-decoration:none}
.voet-balk .voet-legal a:hover{text-decoration:underline}
/* 02-11-2026: op de telefoon toont een m-slider 1 kaart per stap (inline --per:3 maakte de pijlen dood); fadeInRight voor herofoto en badge */
@media (max-width:767px){.m-slider{--per:1!important}}
.js .rv.rv-r{transform:translateX(40px)}
.js .rv.rv-r.in{transform:none}
/* 02-11-2026: sliders op de telefoon als veegstrook (volgt de vinger, rastert per kaart) */
@media (max-width:767px){
  .m-slider .sl-raam,.rev-sl .sl-raam{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .m-slider .sl-raam::-webkit-scrollbar,.rev-sl .sl-raam::-webkit-scrollbar{display:none}
  .m-slider .sl-baan,.rev-sl .sl-baan{transform:none!important}
  .m-slider .sl-baan>*,.rev-sl .sl-baan>*{scroll-snap-align:start}
  .sl-pijl{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}

/* 02-11-2026: tijdlijnlijn loopt door tot de kaart (stopte 25 px erboven) */
@media (max-width:767px){.tl-kant::before{margin-bottom:0;height:72px}}
/* dienstenslider als m-slider: kaarten krijgen op de telefoon ruimte voor het uitstekende icoon */
@media (max-width:767px){.dk-sl.m-slider .dk-slide{padding:50px 0 10px}.dk-sl.m-slider .dk{margin:0 5px}}
/* 03-11-2026: artikelsectie had padding-bottom 0, zijkaart plakte tegen de calculatorband (Dikkie) */
.art-s{padding-bottom:88px}
@media (max-width:767px){.art-s{padding-bottom:64px}}
/* 03-11-2026: niets steekt zijwaarts buiten het scherm (ringen, herofoto die van rechts inschuift); pagina blijft stil in het midden */
main,.s,.cta,.voet,.hero{overflow-x:clip}
html,body{overscroll-behavior-x:none}
/* 03-11-2026 entree-animaties zoals webleap.nl (gemeten: Elementor animated-fast, fadeInUp/fadeInRight/fadeIn, 0,75 s) */
@keyframes wlFadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes wlFadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes wlFadeIn{from{opacity:0}to{opacity:1}}
.js .ani:not(.go){opacity:0}
.js .ani-up.go{animation:wlFadeInUp .75s backwards}
.js .ani-right.go{animation:wlFadeInRight .75s backwards}
.js .ani-fade.go{animation:wlFadeIn .75s backwards}
/* hover zoals de bron: badge zakt 6 px, herofoto draait 1 graad */
.hero-home .g-badge,.hero-home .hero-foto .notch{transition:transform .4s}
.hero-home .g-badge:hover{transform:translateY(6px)}
.hero-home .hero-foto:hover .notch{transform:rotate(1deg)}
@media (prefers-reduced-motion:reduce){.js .ani{opacity:1!important;animation:none!important}}
/* 03-11-2026 (Dikkie, OS Consulting): op de telefoon gecentreerd zoals "Our expertise" */
@media (max-width:767px){
  /* 1. All our services: kop, tekst en kaarten */
  .s:has(.dk-sl) .kop-rij>.kop-blok.links{align-items:center;text-align:center}
  .s:has(.dk-sl) .kop-rij-tekst{text-align:center}
  .dk{align-items:center;text-align:center}
  .dk h3{max-width:none}
  .dk-ic{right:auto;left:50%;transform:translateX(-50%)}
  /* 2. About us: eyebrow, kop, tekst, lijst als blok in het midden (iconen recht onder elkaar) en de knop */
  .split .tekst{align-items:center;text-align:center}
  .split .tekst .kop-blok.links{align-items:center;text-align:center}
  .split .tekst .iconlijst{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
  /* 3. Tijdlijn: nummer, icoon, titel en tekst in het midden */
  .tl-kaart,.tl-rij:nth-child(even) .tl-kaart{flex-direction:column;align-items:center;text-align:center;gap:12px}
  /* 4. Why us: kop, tekst en de tegels */
  .waarom-l{align-items:center}
  .waarom-l .kop-blok.links,.waarom-l .kop-blok{align-items:center;text-align:center}
  .waarom-l>p{text-align:center}
  .tegel{justify-content:center;text-align:center}
  /* 5. Footer: logo en tekst, kop Contact en de contactregels als blok in het midden */
  .voet-1{align-items:center;text-align:center}
  .voet-1 .voet-logo img{object-position:center}
  .voet-1 p{margin-inline:auto}
  .voet-3{align-items:center}
  .voet-3 h2{text-align:center}
  .voet-3 h2::after{left:50%;transform:translateX(-50%)}
  .voet-3 .contact-blok{width:fit-content;max-width:100%;margin-inline:auto}
}

.contact-blok{display:flex;flex-direction:column;gap:30px}
@media (max-width:767px){.split .tekst .knop{align-self:center}}
@media (max-width:767px){.tegel>span:last-child{flex:0 1 auto}}
/* 03-11-2026 (Dikkie): expertise op de telefoon altijd in de blauwe stand, en de volgende kaart steekt uit zodat je ziet dat je kunt vegen */
@media (max-width:767px){
  .exp-kaart{background:var(--teal);border-color:var(--teal)}
  .exp-kaart .exp-body,.exp-kaart .exp-body *:not(.knop):not(.knop *){color:#fff!important}
  .exp-kaart .exp-body svg:not(.knop svg){fill:currentColor}
  .exp-kaart .exp-foto .ic-hoek{background:#fff;color:var(--teal)}
  .exp-sl .sl-baan{gap:14px!important}
  .exp-sl .sl-baan>*{flex:0 0 84%!important}
}
/* 03-11-2026: aanvraagpagina, calculatorband volledig gecentreerd (tekst boven, calculator eronder) */
.cb-midden .cb-grid{grid-template-columns:minmax(0,1fr);gap:40px;justify-items:center}
.cb-midden .cb-tekst{align-items:center;text-align:center}
.cb-midden .cb-tekst p{margin-inline:auto}
.cb-midden .cb-punten{width:fit-content;margin-inline:auto;text-align:left}
.cb-midden .calc-kaart{margin-inline:auto}
.calc-band.cb-midden{padding-top:60px}
@media (max-width:767px){.calc-band.cb-midden{padding-top:40px}}
/* aanvraagpagina: hero compacter zodat de calculator met tegels in het eerste scherm staat, en alle tekst in de calculator in het midden */
.hero-simpel:has(+ .cb-midden){padding:170px 0 56px}
@media (max-width:767px){.hero-simpel:has(+ .cb-midden){padding:140px 0 44px}}
.cb-midden .calc-stapnr,.cb-midden .calc-stap>h3,.cb-midden .calc-sub{text-align:center}
/* 03-11-2026 schermvullend mobiel menu (zelfde afspraak als E.E.T.): hele scherm, kruisje rechtsboven, knoppen onderin */
.mob-menu{display:none;position:fixed;inset:0;top:0;left:0;right:0;bottom:0;z-index:1000;max-height:none;border-radius:0;box-shadow:none;padding:25px 20px calc(25px + env(safe-area-inset-bottom));
  background-color:var(--acc);background-image:url(/assets/img/lijnen-blauw.svg),var(--verloop-hero);background-size:cover,100% 100%;color:#fff;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;gap:28px}
.mob-menu.open{display:flex;animation:mmIn .3s ease}
@keyframes mmIn{from{opacity:0}to{opacity:1}}
.mm-kop{display:flex;align-items:center;justify-content:space-between;padding:8px 6px 8px 14px}
.mm-logo img{width:170px;height:32px;object-fit:contain;object-position:left center}
.mm-dicht{width:48px;height:48px;border:2px solid rgba(255,255,255,.6);border-radius:50%;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.mm-dicht svg{width:20px;height:20px}
.mm-lijst{display:flex;flex-direction:column}
.mob-menu .mm-lijst>a,.mob-menu .mm-lijst summary{display:flex;justify-content:space-between;align-items:center;padding:16px 6px;font:600 22px/30px var(--tekst);color:#fff;border-bottom:1px solid rgba(255,255,255,.22)}
.mob-menu .mm-lijst details a{display:block;padding:11px 6px 11px 22px;font:500 17px/26px var(--tekst);color:rgba(255,255,255,.9);border-bottom:0}
.mob-menu .mm-lijst details[open]{padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.22)}
.mob-menu .mm-lijst details[open] summary{border-bottom:0}
.mm-onder{margin-top:auto;display:flex;flex-direction:column;gap:14px;align-items:stretch}
.mob-menu .mm-cta{width:100%;justify-content:center}
.mm-contact{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mm-contact a{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 10px;border:2px solid rgba(255,255,255,.6);border-radius:800px;color:#fff;font:600 15px/22px var(--tekst)}
.mm-contact svg{width:18px;height:18px}
body.mm-open{overflow:hidden}
/* 03-11-2026 tijdlijn in beweging (desktop en telefoon); zonder JS of bij reduced motion staat alles gewoon stil in beeld */
.tl-anim .tijdlijn::before{transform-origin:top;transform:scaleY(var(--tl,0));transition:transform .15s linear}
.tl-anim .tl-nr{opacity:0;transform:translateY(30px);transition:opacity .7s ease .05s,transform .7s cubic-bezier(.22,.61,.36,1) .05s}
.tl-anim .tl-kaart{opacity:0;transform:translateX(-60px);transition:opacity .8s ease .25s,transform .8s cubic-bezier(.22,.61,.36,1) .25s}
.tl-anim .tl-rij:nth-child(even) .tl-kaart{transform:translateX(60px)}
.tl-anim .tl-verbinder{transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.22,.61,.36,1) .15s}
.tl-anim .tl-rij:nth-child(even) .tl-verbinder{transform-origin:left}
.tl-anim .tl-rij.go .tl-nr,.tl-anim .tl-rij.go .tl-kaart{opacity:1;transform:none}
.tl-anim .tl-rij.go .tl-verbinder{transform:none}
@media (max-width:767px){
  .tl-anim .tl-kaart,.tl-anim .tl-rij:nth-child(even) .tl-kaart{transform:translateY(50px)}
  .tl-anim .tl-kant::before{transform-origin:top;transform:scaleY(0);transition:transform .55s cubic-bezier(.22,.61,.36,1) .15s}
  .tl-anim .tl-rij.go .tl-kant::before{transform:none}
}
/* 03-11-2026 (Dikkie): lijst met symbolen onder About us als smal blok echt in het midden, symbolen recht onder elkaar */
@media (max-width:767px){.split .tekst .iconlijst,.split .tekst .lijnlijst{width:fit-content;max-width:min(100%,320px);margin-inline:auto;text-align:left;align-self:center}}
/* 03-11-2026 (Dikkie): footermenu op de telefoon in het midden; de twee kolommen als één blok, pijltjes recht onder elkaar */
@media (max-width:767px){
  .voet-2{display:flex;flex-direction:column;align-items:center}
  .voet-2 h2{text-align:center}
  .voet-2 h2::after{left:50%;transform:translateX(-50%)}
  .voet-menu{grid-template-columns:auto auto!important;column-gap:44px;width:fit-content;max-width:100%;margin-inline:auto}
}
/* 03-11-2026 fix: eindstand wint altijd, ook van de startstand voor even stappen op de telefoon (kaart 2 en 4 bleven 50px te laag) */
.tl-anim .tl-rij.go:nth-child(n) .tl-kaart{opacity:1;transform:none}
.tl-anim .tl-rij.go:nth-child(n) .tl-nr{opacity:1;transform:none}
.tl-anim .tl-rij.go:nth-child(n) .tl-verbinder{transform:none}
@media (max-width:767px){.tl-anim .tl-rij.go:nth-child(n) .tl-kant::before{transform:none}}
/* 03-11-2026 (Dikkie): op de telefoon staan ALLE sectiekoppen in het midden (eyebrow, kop, tekst en knop), ook waar de desktop links uitlijnt */
@media (max-width:767px){
  .kop-blok.links{align-items:center;text-align:center}
  .kop-rij,.kop-rij.eind{flex-direction:column;align-items:center;text-align:center}
  .kop-rij-tekst,.kop-rij-tekst.streep{text-align:center}
  .kop-rij-tekst.streep{border-left:0;padding-left:0}
  .kop-rij>.knop,.kop-rij .knop{align-self:center}
}
@media (max-width:767px){.kop-rij-tekst.streep::before{left:50%;transform:translateX(-50%)}}
@media (max-width:767px){
  .rd{align-items:center;text-align:center}
  .rd-pijl{margin-inline:auto}
  .ap-tegel{justify-content:center;text-align:center}
  .ap-tegel>span:last-child{flex:0 1 auto}
}
/* 03-11-2026 (Dikkie, About us): duo-foto 1-op-1 als het samengestelde beeld van webleap (610x599): grote foto 89% x 88,5% zonder
   uitsparing, tweede foto rechtsonder met witte rand, label als kleine pil linksonder die meeschaalt; niets loopt door een foto */
.duo{container-type:inline-size}
.duo .duo-1{width:89.3%;height:88.5%;border-radius:30px;overflow:hidden;clip-path:none!important}
.duo .duo-1 img{width:100%;height:100%;object-fit:cover}
.duo .duo-2{left:53.8%;top:50.9%;right:auto;bottom:auto;width:44.6%;height:47.6%;border-radius:24px;outline:none;border:8px solid #fff;box-sizing:border-box}
.duo .notch-label{left:0;bottom:1.5%;right:auto;top:auto;width:auto;max-width:58%;height:auto;gap:2.2cqw;padding:1.6cqw 3.6cqw 1.6cqw 2cqw;font-size:2.7cqw;line-height:1.3;white-space:nowrap;border:.7cqw solid #fff;z-index:2}
.duo .notch-label .gezichten span{width:5.4cqw;height:5.4cqw;margin-left:-1.6cqw;border-width:.4cqw}
.duo .notch-label .gezichten span:first-child{margin-left:0}
/* 03-11-2026 (Dikkie, Avondvrij over ons): duo_rij = twee foto's naast elkaar, label als pil eronder, niets over elkaar */
.duo-rij{display:flex;flex-direction:column;gap:18px}
.dr-fotos{display:grid;grid-template-columns:3fr 2fr;gap:14px}
.dr-fotos img{width:100%;height:100%;aspect-ratio:auto;min-height:0;object-fit:cover;border-radius:24px}
.dr-fotos .dr-1{aspect-ratio:545/600}
.duo-rij .notch-label{position:static;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;width:auto;height:auto;padding:8px 22px 8px 10px;background:linear-gradient(90deg,var(--acc),var(--link));border-radius:40px;white-space:nowrap}
@media (max-width:767px){.duo-rij .notch-label{align-self:center}}
/* 03-11-2026: auteur als bedrijfslogo in plaats van portret; teamgrid met 4 leden in een rij (2x2 op tablet en telefoon) */
.art-auteur img.auteur-logo{width:60px;height:60px;object-fit:contain;background:none;border-radius:50%}
.team-grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.team-grid:has(>:nth-child(4):last-child){grid-template-columns:1fr 1fr}}
.dr-fotos .dr-2{object-position:50% 15%}