/* De Wit Advocatuur demo. Merk: logoblauw #006CAE met het witte 'dw'-handschrift, grijze kapitalen; Manrope + Inter */
[hidden]{display:none!important}
:root{
  --blauw:#006cae;--blauw-d:#00548a;--navy:#0b2c4a;--navy-2:#14395c;--navy-3:#08213a;--lucht:#a6d4f2;
  --ijs:#eef4f9;--ijs-2:#f6f9fc;--ink:#0e2033;--ink-2:#435468;--mute:#6b7a8b;--lijn:rgba(14,32,51,.12);--grijs:#8e939a;
  --r:24px;--max:1140px;--gut:clamp(20px,4vw,48px);--hdr:76px;
  --ease:cubic-bezier(.19,1,.22,1);--land:cubic-bezier(.2,.8,.25,1.12);
  --sp:clamp(52px,5.6vw,84px);
  --sh:0 10px 30px rgba(11,44,74,.08);--sh-2:0 18px 50px rgba(11,44,74,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 24px);-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;padding-top:var(--hdr);background:#fff;color:var(--ink-2);font:400 16.5px/1.62 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(27px,2.6vw,38px)}
h3{font-size:clamp(19px,1.5vw,22px);letter-spacing:-.02em}
p{margin:0;text-wrap:pretty}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;padding:var(--sp) 0}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px;border-radius:6px}

/* ---------- knoppen (vlak schuift erdoorheen, pijl wisselt) ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 8px 0 24px;border-radius:999px;font:700 15px/1 Manrope,Inter,sans-serif;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:color .35s,box-shadow .35s,transform .25s var(--land)}
.btn i{position:relative;overflow:hidden;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;color:var(--blauw);transition:background-color .35s,color .35s}
.btn svg,.rev-nav svg,.lees-lp svg,.rs-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--vul,var(--navy));transform:translateX(-101%);transition:transform .55s cubic-bezier(.65,0,.35,1)}
.btn i svg{transition:transform .55s cubic-bezier(.65,0,.35,1)}
.btn i .p2{position:absolute;inset:0;margin:auto;transform:translateX(-180%)}
.btn-blauw{background:var(--blauw);color:#fff;--vul:var(--navy)}
.btn-wit{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--lijn);--vul:var(--blauw)}
.btn-wit i{background:var(--ijs);color:var(--blauw)}
.btn-full{width:100%;justify-content:space-between}
.btn-klein{height:48px;padding-left:20px;gap:10px;font-size:14.5px}
.btn-klein i{width:32px;height:32px}
.btn .sm{display:none}
@media (hover:hover){
  .btn:hover::before{transform:none}
  .btn:hover i .p1{transform:translateX(180%)}
  .btn:hover i .p2{transform:none;transition-delay:.06s}
  .btn-wit:hover{color:#fff;box-shadow:none}
  .btn-wit:hover i{background:#fff}
}
.btn:focus-visible::before{transform:none}
.btn-wit:focus-visible{color:#fff}
.btn.uit::before{transform:translateX(101%)}
.btn.reset::before{transition:none!important;transform:translateX(-101%)!important}
.btn:active{transform:scale(.965)}

/* ---------- header, megamenu en telefoonmenu (opbouw en beweging zoals HuurFabriek) ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr);background:#fff;transition:box-shadow .3s}
.hdr.solid{box-shadow:0 1px 0 var(--lijn),0 8px 24px rgba(11,44,74,.06)}
.hdr.mega-open{box-shadow:0 1px 0 var(--lijn)}
.hdr-in{position:relative;z-index:3;height:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.logo{display:block;flex:none;color:var(--grijs)}
.logo svg{display:block;width:auto;height:50px;aspect-ratio:200/95}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a,.nav-t{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:11px 14px;border-radius:999px;font:600 15px/1 Manrope,Inter,sans-serif;color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .25s,color .25s}
.nav a:hover,.nav a.act,.nav-t:hover,.nav-t[aria-expanded="true"]{background:var(--ijs);color:var(--blauw)}
.nav-t svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.nav-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-r{display:flex;align-items:center;gap:12px}
.hdr-tel{display:flex;align-items:center;gap:10px;font:700 15px/1 Manrope,Inter,sans-serif;color:var(--ink);text-decoration:none;padding:6px 4px;white-space:nowrap}
.hdr-tel i{width:36px;height:36px;border-radius:50%;background:var(--ijs);display:grid;place-items:center;transition:background-color .3s}
.hdr-tel svg{width:16px;height:16px;fill:none;stroke:var(--blauw);stroke-width:1.8;stroke-linejoin:round}
.hdr-tel:hover i{background:#dbe9f4}
.hdr-cta{height:46px;padding-left:20px;gap:10px;font-size:14.5px}
.hdr-cta i{width:32px;height:32px}
.burger{display:none;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--ijs);color:var(--ink);height:46px;padding:0 6px 0 16px;font:700 14.5px/1 Manrope,Inter,sans-serif;cursor:pointer}
.burger i{position:relative;width:34px;height:34px;border-radius:50%;background:var(--blauw)}
.burger b{position:absolute;left:50%;top:50%;height:2px;border-radius:2px;background:#fff;transform:translate(-50%,-50%)}
.burger b:first-child{width:14px;margin-top:-3px}
.burger b:last-child{width:9px;margin-top:3px;margin-left:-2.5px}

.mega{position:absolute;z-index:2;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--lijn);box-shadow:0 30px 50px rgba(11,44,74,.12);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s}
.mega.open{clip-path:inset(0 0 -60px 0);visibility:visible;transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.mega-in{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:22px var(--gut) 34px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.mg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mg-t{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;align-items:center;align-content:center;padding:10px;border-radius:18px;text-decoration:none;color:var(--ink);transition:background-color .25s;opacity:0;transform:translateY(8px)}
.mega.open .mg-t{opacity:1;transform:none;transition:opacity .45s calc(.12s + var(--d) * .04s),transform .55s var(--ease) calc(.12s + var(--d) * .04s),background-color .25s}
.mg-t:hover{background:var(--ijs)}
.mg-img{grid-row:1/4;width:76px;height:76px;border-radius:14px;overflow:hidden;background:var(--ijs)}
.mg-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mg-t:hover .mg-img img{transform:scale(1.07)}
.mg-n{font:700 17px/1.15 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.01em}
.mg-s{font-size:13.5px;color:var(--ink-2);line-height:1.35}
.mg-p{font-size:13px;font-weight:600;color:var(--blauw)}
.mg-side{background:var(--navy);border-radius:22px;padding:24px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:14px;opacity:0;transform:translateY(8px)}
.mega.open .mg-side{opacity:1;transform:none;transition:opacity .45s .2s,transform .55s var(--ease) .2s}
.mg-k{font:700 13.5px/1 Manrope,Inter,sans-serif;color:var(--lucht)}
.mg-big{font:700 20px/1.25 Manrope,Inter,sans-serif;color:#fff;letter-spacing:-.01em}
.mg-side .btn-wit{box-shadow:none}
.mg-tel{font-size:13.5px;color:rgba(255,255,255,.8);text-decoration:none;margin-top:auto}
.mg-tel:hover{color:#fff}

.mm{position:fixed;inset:0;z-index:95;background:var(--blauw);color:#fff;display:flex;flex-direction:column;clip-path:circle(0 at var(--mx,90%) var(--my,36px));visibility:hidden;transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s;overflow-y:auto;overscroll-behavior:contain}
.mm.open{clip-path:circle(150% at var(--mx,90%) var(--my,36px));visibility:visible;transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.mm-top{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);min-height:var(--hdr);position:sticky;top:0;background:var(--blauw);z-index:2}
.mm-logo{width:auto;height:44px;aspect-ratio:200/95;color:#d6e8f5}
.mclose{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:#fff;color:var(--ink);height:46px;padding:0 6px 0 16px;font:700 14.5px/1 Manrope,Inter,sans-serif;cursor:pointer}
.mclose i{width:34px;height:34px;border-radius:50%;background:var(--navy);display:grid;place-items:center;transition:transform .45s var(--land)}
.mclose svg{width:15px;height:15px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
.mclose:hover i{transform:rotate(90deg)}
.mm-body{padding:14px var(--gut) 10px;flex:1}
.mm-k{font:700 13.5px/1 Manrope,Inter,sans-serif;color:var(--lucht);margin-bottom:6px}
.mm ul{list-style:none;margin:0;padding:0}
.mm-cats a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.2);text-decoration:none;color:#fff;font:700 25px/1.15 Manrope,Inter,sans-serif;letter-spacing:-.02em}
.mm-cats i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);transition:background-color .25s,transform .4s var(--ease)}
.mm-cats svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mm-cats a:hover i,.mm-cats a:active i{background:var(--navy);transform:translateX(3px)}
.mm-links{margin-top:16px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.mm-links a{display:block;padding:11px 0;text-decoration:none;font-weight:500;font-size:15.5px;color:rgba(255,255,255,.88)}
.mm-foot{position:sticky;bottom:0;background:var(--blauw);padding:14px var(--gut) calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;box-shadow:0 -14px 22px -10px var(--blauw)}
.mm-foot .btn-wit{box-shadow:none}
.mm-tel{display:block;text-align:center;padding:6px;color:rgba(255,255,255,.85);text-decoration:none;font-size:15px}
.mm-tel b{color:#fff;font-weight:600}
.mm li{opacity:0;transform:translateY(12px)}
.mm.open li{opacity:1;transform:none;transition:opacity .5s,transform .6s var(--ease)}
.mm.open .mm-cats li:nth-child(1){transition-delay:.18s}.mm.open .mm-cats li:nth-child(2){transition-delay:.22s}.mm.open .mm-cats li:nth-child(3){transition-delay:.26s}.mm.open .mm-cats li:nth-child(4){transition-delay:.3s}.mm.open .mm-cats li:nth-child(5){transition-delay:.34s}.mm.open .mm-links li{transition-delay:.4s}

/* ---------- hero ---------- */
.hero{padding:clamp(20px,2.6vw,36px) 0 clamp(48px,5vw,72px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.hero-k{display:flex;align-items:center;gap:12px;font:800 13px/1.3 Manrope,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blauw);margin-bottom:18px}
.hero-k::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor;flex:none}
.hero h1{font-size:clamp(36px,4vw,56px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.ul{position:relative;display:inline-block;white-space:nowrap}
.ul svg{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.38em;overflow:visible;fill:none;stroke:var(--blauw);stroke-width:4.5;stroke-linecap:round;z-index:-1}
.hero-txt{position:relative;z-index:1}
html.anim .ul path{stroke-dasharray:1;stroke-dashoffset:1}
html.anim .hero h1.in .ul path{transition:stroke-dashoffset 1s cubic-bezier(.5,0,.2,1) .75s;stroke-dashoffset:0}
.hero-lead{margin-top:18px;max-width:34em;font-size:clamp(16.5px,1.2vw,18px);line-height:1.6;color:var(--ink-2)}
.hero .btns{margin-top:26px}
.hero-rene{margin-top:28px;padding-top:20px;border-top:1px solid var(--lijn);display:flex;align-items:center;gap:14px;max-width:560px}
.hero-rene img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none}
.hero-rene p{display:flex;flex-direction:column;line-height:1.35;font-size:14.5px;color:var(--mute);min-width:0}
.hero-rene p b{font:700 16px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.hero-score{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;padding-left:18px;border-left:1px solid var(--lijn);flex:none}
.hero-score b{font:800 26px/1 Manrope,Inter,sans-serif;color:var(--blauw);letter-spacing:-.02em}
.hero-score span{font-size:13px;color:var(--mute);margin-top:4px}
.hero-score:hover span{color:var(--blauw)}
.hero-foto{position:relative;height:clamp(360px,calc(100svh - var(--hdr) - 150px),540px);border-radius:var(--r)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:66% 50%;border-radius:inherit}

/* ---------- getekende lijn om de foto's, eindigt in de 'w' uit het logo ---------- */
[data-line]{position:relative;isolation:isolate;--fo:clamp(10px,1.1vw,16px);--lk:var(--blauw)}
figure[data-line],.over-img{overflow:visible!important}
.med [data-line]{--lk:var(--lucht)}
.fline{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:var(--lk);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;z-index:-1;transform:translate(calc(var(--fo) * -1),var(--fo))}
html.anim .fline path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html.anim .fline.on path{animation:lijnTeken 2.1s cubic-bezier(.5,0,.25,1) .25s forwards}
html.anim .hero-foto > .fline.on path{animation-delay:1.05s}
@keyframes lijnTeken{to{stroke-dashoffset:0}}

/* ---------- vier fasen ---------- */
.fases{background:var(--ijs)}
.fs-kop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end}
.fs-kop p{font-size:16.5px;max-width:32em}
.fs{margin-top:clamp(28px,3vw,44px)}
.fs-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(12px,2vw,24px)}
.fs-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:0;background:none;padding:22px 8px 14px 0;cursor:pointer;color:var(--ink-2)}
.fs-tabs button::before{content:"";position:absolute;left:0;right:calc(clamp(12px,2vw,24px) * -1);top:0;height:2px;background:rgba(14,32,51,.14)}
.fs-tabs button:last-of-type::before{right:0}
.fs-tabs button::after{content:"";position:absolute;left:0;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--ijs);box-shadow:inset 0 0 0 2px rgba(14,32,51,.25);transition:background-color .35s,box-shadow .35s,transform .45s var(--land)}
.fs-tabs .fs-bar{position:absolute;left:0;top:0;height:2px;background:var(--blauw);transition:width .7s var(--ease);pointer-events:none}
.fs-tabs button.past::after,.fs-tabs button.on::after{background:var(--blauw);box-shadow:inset 0 0 0 2px var(--blauw)}
.fs-tabs button.on::after{transform:scale(1.25);box-shadow:inset 0 0 0 2px var(--blauw),0 0 0 6px rgba(0,108,174,.14)}
.fs-n{font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.fs-tabs b{font:700 clamp(16.5px,1.35vw,19px)/1.2 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.015em;transition:color .3s}
.fs-s{font-size:14px;color:var(--mute)}
.fs-tabs button:hover b,.fs-tabs button.on b{color:var(--blauw)}
.fs-tabs button.on .fs-n{color:var(--blauw)}
.fs-meter{display:flex;align-items:center;gap:14px;margin-top:6px;font-size:13px;color:var(--mute)}
.fs-meter i{flex:1;height:1px;background:linear-gradient(90deg,rgba(0,108,174,.5),rgba(14,32,51,.2));position:relative}
.fs-meter i::after{content:"";position:absolute;right:-1px;top:-3.5px;border:4px solid transparent;border-left:6px solid rgba(14,32,51,.35);border-right:0}
.fs-panels{margin-top:22px}
.fp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(22px,3.5vw,48px);align-items:center;background:#fff;border-radius:24px;padding:clamp(12px,1.3vw,16px);box-shadow:var(--sh)}
.fp.in{animation:fpIn .6s var(--ease)}
@keyframes fpIn{from{opacity:0;transform:translateY(10px)}}
.fp-foto{border-radius:16px;overflow:hidden;aspect-ratio:4/3.3}
.fp-foto img{width:100%;height:100%;object-fit:cover}
.fp-txt{padding:clamp(4px,1.5vw,20px) clamp(4px,2.5vw,36px) clamp(4px,1.5vw,20px) 0}
.fp-txt h3{font-size:clamp(22px,1.9vw,27px);line-height:1.15}
.fp-txt > p{margin-top:10px;font-size:16px}
.fp-doet{list-style:none;margin:16px 0 0;padding:0}
.fp-doet li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--lijn);font-size:15.5px;color:var(--ink)}
.fp-doet li:last-child{border-bottom:1px solid var(--lijn)}
.fp-doet li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--blauw)}
.fp-geld{margin:16px 0 18px;font-size:15px;color:var(--ink-2)}
.fp-geld b{display:block;font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}

/* ---------- diensten ---------- */
.ds-kop{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.rol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,640px)}
.rol button{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 46px 14px 16px;border-radius:18px;border:0;background:var(--ijs);cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:background-color .35s,box-shadow .3s,transform .25s var(--land)}
.rol button::after{content:"";position:absolute;right:18px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(14,32,51,.25);transition:box-shadow .3s,background-color .3s}
.rol i{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blauw);display:grid;place-items:center;flex:none;transition:background-color .35s,color .35s}
.rol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rol span{display:flex;flex-direction:column;gap:3px;min-width:0}
.rol b{font:700 16.5px/1.2 Manrope,Inter,sans-serif;color:var(--ink);transition:color .35s}
.rol em{font-style:normal;font-size:13.5px;line-height:1.3;color:var(--mute);transition:color .35s}
.rol button:hover{box-shadow:inset 0 0 0 1.5px var(--blauw)}
.rol button:active{transform:scale(.98)}
.rol button.on{background:var(--blauw);box-shadow:0 10px 24px rgba(0,108,174,.25)}
.rol button.on b{color:#fff}
.rol button.on em{color:rgba(255,255,255,.82)}
.rol button.on i{background:rgba(255,255,255,.16);color:#fff}
.rol button.on::after{background:#fff;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 9px var(--blauw)}
.ds-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);margin-top:clamp(24px,2.8vw,40px);align-items:start}
.ds{padding:22px 0 24px;border-top:1px solid var(--lijn)}
.ds:last-child{border-bottom:1px solid var(--lijn)}
.ds h3{font-size:clamp(21px,1.8vw,26px);transition:color .3s}
.ds.on h3{color:var(--blauw)}
.ds-p{margin-top:6px;font-size:16px;max-width:36em;transition:opacity .3s}
.ds-p.wissel{opacity:0}
.ds-sub{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ds-sub button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 15px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--lijn);font:600 14px/1 Manrope,Inter,sans-serif;color:var(--ink);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
.ds-sub button::after{content:"";width:16px;height:16px;flex:none;background:linear-gradient(currentColor,currentColor) center/9px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 9px no-repeat;color:var(--blauw);border-radius:50%;transition:transform .35s var(--ease)}
.ds-sub button:hover{box-shadow:inset 0 0 0 1.5px var(--blauw);color:var(--blauw)}
.ds-sub button.on{background:var(--blauw);color:#fff;box-shadow:none}
.ds-sub button.on::after{color:#fff;transform:rotate(45deg)}
.ds-ans{margin-top:12px;padding:14px 18px;border-radius:16px;background:var(--ijs);font-size:15.5px;line-height:1.55;max-width:40em;animation:fpIn .5s var(--ease)}
.ds-ans b{display:block;font:700 15px/1.3 Manrope,Inter,sans-serif;color:var(--ink);margin-bottom:3px}
.ds-act{margin-top:16px}
.sub-act{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.sub-bel,.ds-bel{font:600 14.5px/1.3 Manrope,Inter,sans-serif;color:var(--mute);text-decoration:none;transition:color .25s}
.sub-bel b,.ds-bel b{color:var(--ink);font-weight:700;transition:color .25s}
.sub-bel:hover,.sub-bel:hover b,.ds-bel:hover,.ds-bel:hover b{color:var(--blauw)}
.ds-act{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.ds-img{display:none}
.ds-zij{position:sticky;top:calc(var(--hdr) + 24px);display:flex;flex-direction:column;gap:12px}
.ds-foto{position:relative;aspect-ratio:4/3.5;border-radius:var(--r);overflow:hidden;background:var(--ijs)}
.ds-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.ds-foto img.on{opacity:1;transform:none}
.ds-foto figcaption{position:absolute;left:16px;bottom:16px}
.ds-foto figcaption span{display:inline-block;background:#fff;color:var(--ink);font:700 14px/1 Manrope,Inter,sans-serif;padding:10px 15px;border-radius:999px}
.ds-kaart{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:18px;border-radius:var(--r);background:var(--navy);color:rgba(255,255,255,.78)}
.ds-kaart img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.ds-kaart p{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4}
.ds-kaart p b{font:700 16px/1.3 Manrope,Inter,sans-serif;color:#fff}
.ds-kaart .btn{grid-column:1/-1;box-shadow:none;height:50px}
.ds-mail{grid-column:1/-1;text-align:center;font-size:13.5px;color:rgba(255,255,255,.7);text-decoration:none;margin-top:-4px}
.ds-mail:hover{color:#fff}

/* ---------- mediation ---------- */
.med{background:var(--navy);color:rgba(255,255,255,.78)}
.med h2{color:#fff}
.med-in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(36px,6vw,88px);align-items:center}
.med-foto{aspect-ratio:4/4.8;border-radius:var(--r)}
.med-foto img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.med-lead{margin-top:14px;font-size:16.5px;max-width:36em}
.vgl{margin-top:24px}
.vgl-r{display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,1fr);gap:0}
.vgl-r > span{padding:11px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;line-height:1.45}
.vgl-r > span:first-child{padding-left:0;font:700 14px/1.45 Manrope,Inter,sans-serif;color:#fff}
.vgl-r .vm{background:rgba(255,255,255,.07);color:#fff}
.vgl-h > span{border-top:0;font:700 13px/1 Manrope,Inter,sans-serif!important;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-top:13px;padding-bottom:11px}
.vgl-h .vm{color:var(--lucht)!important;border-radius:14px 14px 0 0;background:rgba(255,255,255,.1)}
.vgl-r:last-child .vm{border-radius:0 0 14px 14px}
.med-voet{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.med-voet p{font-size:15px;max-width:40em}
.med .sub-bel{color:rgba(255,255,255,.65)}
.med .sub-bel b{color:#fff}
.med .sub-bel:hover,.med .sub-bel:hover b{color:var(--lucht)}
.med-voet b{color:#fff;font-weight:600}
.med .btn-wit{box-shadow:none;--vul:var(--blauw)}

/* ---------- over René ---------- */
.over-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(40px,6vw,96px);align-items:start}
.over-foto{position:sticky;top:calc(var(--hdr) + 32px);max-width:330px}
.over-img{border-radius:var(--r)}
.over-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:inherit}
.over-foto figcaption{margin-top:26px;font:700 17px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.over-foto figcaption span{display:block;font:400 15px/1.4 Inter,sans-serif;color:var(--mute)}
.over-cols{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;font-size:16px}
.over-q{margin:24px 0 0;padding:2px 0 2px 22px;border-left:3px solid var(--blauw)}
.over-q p{font:700 clamp(18px,1.6vw,22px)/1.35 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.015em}
.over-feit{margin:26px 0 0}
.over-feit div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--lijn)}
.over-feit div:last-child{border-bottom:1px solid var(--lijn)}
.over-feit dt{font:700 15px/1.45 Manrope,Inter,sans-serif;color:var(--ink)}
.over-feit dd{margin:0;font-size:15px}
.over-logos{display:flex;align-items:center;gap:clamp(20px,3vw,36px);margin-top:22px;flex-wrap:wrap}
.over-logos img{height:34px;width:auto;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.over-logos img:hover{filter:none;opacity:1}
.over-act{margin-top:24px}
.lees{position:relative;margin-top:clamp(40px,4.5vw,64px);display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:0 28px;align-items:stretch;padding-top:22px}
.lees::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--lijn)}
.lees-k{font:700 14px/1.4 Manrope,Inter,sans-serif;color:var(--mute);padding-top:2px}
.lees-a{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.lees-a span{font:700 16px/1.3 Manrope,Inter,sans-serif;color:var(--ink);transition:color .25s}
.lees-a em{font-style:normal;font-size:14px;color:var(--mute)}
.lees-a:hover span{color:var(--blauw)}
.lees-lp{grid-column:2/-1;margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;border-radius:16px;background:var(--ijs);text-decoration:none;font-size:15px;transition:background-color .3s}
.lees-lp b{color:var(--ink)}
.lees-lp i{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--blauw);display:grid;place-items:center;transition:transform .45s var(--ease)}
.lees-lp:hover{background:#e3edf6}
.lees-lp:hover i{transform:translateX(4px)}

/* ---------- reviews ---------- */
.rev{background:var(--ijs)}
.rev-in{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(28px,4.5vw,64px);align-items:stretch}
.rev-score{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:260px;padding:clamp(22px,2.4vw,32px);border-radius:var(--r);background:var(--blauw);color:#fff;text-decoration:none;position:relative;overflow:hidden;isolation:isolate}
.rev-score::before{content:"";position:absolute;inset:auto -30% -45% auto;width:120%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.06);z-index:-1}
.rs-n{font:800 clamp(64px,6.4vw,92px)/.9 Manrope,Inter,sans-serif;letter-spacing:-.05em}
.rs-t{font-size:15px;color:rgba(255,255,255,.85)}
.rs-b{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:700 14.5px/1 Manrope,Inter,sans-serif}
.rs-b svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.rev-score:hover .rs-b svg{transform:translateX(4px)}
.rev-stage{position:relative;display:grid;min-height:260px;padding:4px 0 60px}
.rq{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s .6s}
.rq.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .1s,transform .8s var(--ease) .1s}
.rq blockquote{margin:0;font:700 clamp(20px,1.9vw,27px)/1.32 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.02em;text-wrap:pretty}
.rq figcaption{margin-top:16px;font-size:15px;color:var(--mute)}
.rq figcaption b{color:var(--ink);font-weight:600}
.rev-cta{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:14px;font:600 14.5px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.rev-nav{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:14px;font:600 14px/1 Manrope,Inter,sans-serif;color:var(--mute)}
.rev-nav button{width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 1px var(--lijn);transition:background-color .3s,color .3s}
.rev-nav button:hover{background:var(--blauw);color:#fff}

/* ---------- tarieven + faq ---------- */
.tar-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5.5vw,80px);align-items:start}
.tar-kop > p{margin-top:14px;font-size:16px;max-width:32em}
.abo{margin-top:24px;padding:clamp(20px,2.2vw,28px);border-radius:var(--r);background:var(--navy);color:rgba(255,255,255,.8)}
.abo-k{font:700 14px/1 Manrope,Inter,sans-serif;color:var(--lucht)}
.abo-p{margin-top:8px;font:600 16px/1.2 Manrope,Inter,sans-serif;color:#fff}
.abo-p b{font-size:clamp(32px,3vw,40px);font-weight:800;letter-spacing:-.03em;margin:0 4px}
.abo-t{margin:10px 0 18px;font-size:15px;max-width:32em}
.abo .btn-wit{box-shadow:none}
.tr{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:20px;padding:16px 0;border-top:1px solid var(--lijn)}
.tr h3{font-size:17.5px;line-height:1.35}
.tr p{font-size:15px}
.tr-a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:700 14px/1.3 Manrope,Inter,sans-serif;color:var(--blauw);text-decoration:none}
.tr-a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.tr-a:hover svg{transform:translateX(4px)}
.tr-act{padding:20px 0 18px;border-top:1px solid var(--lijn)}
.tr-noot{padding-top:16px;border-top:1px solid var(--lijn);font-size:14.5px;color:var(--mute)}
.faq{margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5.5vw,80px)}
.faq-h{font-size:clamp(24px,2.2vw,32px)}
.faq-kop p{margin:12px 0 18px;font-size:15.5px;max-width:28em}
.faq-kop p a{color:var(--blauw);font-weight:600;text-decoration:none}
.faq-kop p a:hover{text-decoration:underline}
.fq{border-top:1px solid var(--lijn)}
.fq:last-child{border-bottom:1px solid var(--lijn)}
.fq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border:0;background:none;text-align:left;cursor:pointer;font:700 16px/1.35 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.01em}
.fq button:hover{color:var(--blauw)}
.fq i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ijs);transition:background-color .3s,transform .45s var(--ease)}
.fq i::before,.fq i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--blauw);transition:transform .45s var(--ease)}
.fq i::after{transform:rotate(90deg)}
.fq.open i{background:var(--blauw);transform:rotate(180deg)}
.fq.open i::before,.fq.open i::after{background:#fff}
.fq.open i::after{transform:rotate(0)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.fq-a > p{overflow:hidden;font-size:15px;padding-right:44px}
.fq.open .fq-a{grid-template-rows:1fr}
.fq.open .fq-a > p{padding-bottom:16px}

/* ---------- contact ---------- */
.contact{background:var(--navy);color:rgba(255,255,255,.8)}
.contact h2{color:#fff}
.ct-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start}
.ct-lead{margin-top:14px;font-size:16.5px;max-width:32em}
.ct-l{list-style:none;margin:22px 0 0;padding:0}
.ct-l a{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid rgba(255,255,255,.12);text-decoration:none}
.ct-l li:last-child a{border-bottom:1px solid rgba(255,255,255,.12)}
.ct-l i{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background-color .3s}
.ct-l svg{width:19px;height:19px;fill:none;stroke:var(--lucht);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-l span{display:flex;flex-direction:column;font-size:14.5px;line-height:1.4}
.ct-l b{font:700 16px/1.3 Manrope,Inter,sans-serif;color:#fff}
.ct-l a:hover i{background:var(--blauw)}
.ct-kaart{margin-top:22px;border-radius:18px;overflow:hidden;height:190px;background:var(--navy-2)}
.ct-kaart iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(.95)}
.ct-form{background:#fff;color:var(--ink-2);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.cf-h{font:700 clamp(20px,1.7vw,23px)/1.2 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.ctx{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--ijs);font-size:15px}
.ctx b{color:var(--blauw)}
.ctx button{width:30px;height:30px;border-radius:50%;border:0;background:#fff;cursor:pointer;font-size:18px;line-height:1;color:var(--ink)}
.ctx.flash{animation:flash 1s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(0,108,174,.45)}100%{box-shadow:0 0 0 14px rgba(0,108,174,0)}}
.chips{border:0;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{font:600 14px/1 Manrope,Inter,sans-serif;color:var(--ink);margin-bottom:10px;padding:0}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--lijn);font:600 14.5px/1 Manrope,Inter,sans-serif;color:var(--ink);transition:background-color .25s,color .25s,box-shadow .25s}
.chips label:hover span{box-shadow:inset 0 0 0 1.5px var(--blauw)}
.chips input:checked + span{background:var(--blauw);color:#fff;box-shadow:none}
.chips input:focus-visible + span{outline:3px solid var(--blauw);outline-offset:2px}
.cf-g{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f span{font:600 13.5px/1 Manrope,Inter,sans-serif;color:var(--ink)}
.f input,.f textarea{width:100%;border:0;border-radius:14px;background:var(--ijs-2);box-shadow:inset 0 0 0 1.5px var(--lijn);padding:12px 14px;font-size:16px;color:var(--ink);transition:box-shadow .25s,background-color .25s;resize:vertical}
.f input:focus,.f textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--blauw)}
.f .fout{box-shadow:inset 0 0 0 2px #c4372b}
.f-w{grid-column:1/-1}
.cf-ok{display:flex;gap:12px;align-items:flex-start;margin:14px 0 18px;font-size:14px;cursor:pointer}
.cf-ok input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blauw);flex:none}
.cf-ok.fout span{color:#c4372b}
.cf-done{margin-top:16px;padding:14px 16px;border-radius:14px;background:#e6f2ea;color:#1f5a33;font-size:15px}

/* ---------- footer ---------- */
.ftr{background:var(--navy-3);color:rgba(255,255,255,.7);padding:clamp(44px,4.5vw,60px) 0 24px;font-size:14.5px}
.ftr-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.ftr-logo{width:130px;height:auto;aspect-ratio:200/95;color:#c9d6e2;margin-bottom:20px}
.ftr-b p{margin-top:12px;line-height:1.6}
.ftr a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .25s}
.ftr a:hover{color:#fff}
.ftr-c{display:flex;flex-direction:column;gap:9px}
.ftr-c p{font:700 14px/1 Manrope,Inter,sans-serif;color:#fff;margin-bottom:8px}
.ftr-onder{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.5)}

/* ---------- actiebalk telefoon ---------- */
.abar{display:none}

/* ---------- onthullen (alleen als JS .anim zet) ---------- */
html.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
html.anim .rv.in{opacity:1;transform:none}
html.anim .rv.d1{transition-delay:.08s}html.anim .rv.d2{transition-delay:.16s}html.anim .rv.d3{transition-delay:.24s}
html.anim .hero-foto.rv{transform:translateY(20px) scale(.985);transition:opacity 1.2s var(--ease) .15s,transform 1.4s var(--ease) .15s}
html.anim .hero-foto.rv.in{transform:none}

/* ================= responsive ================= */
@media (max-width:1279px){.hdr-tel{display:none}}
@media (max-width:1120px){
  .nav,.mega{display:none}
  .burger{display:inline-flex}
  .hdr-r{margin-left:auto}
}
@media (max-width:1100px){
  .fp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .over-cols{grid-template-columns:minmax(0,1fr);gap:16px}
  .lees{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lees-k{grid-column:1/-1;margin-bottom:14px}
  .lees-lp{grid-column:1/-1}
}
@media (max-width:1000px), (orientation:portrait) and (max-width:1100px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-foto{height:auto;aspect-ratio:16/9;max-height:none}
  .fs-kop,.med-in,.over-in,.tar-in,.faq,.ct-in,.rev-in{grid-template-columns:minmax(0,1fr)}
  .fs-kop{gap:16px}
  .ds-grid{grid-template-columns:minmax(0,1fr)}
  .ds-zij{display:none}
  .ds-img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:16px;margin-bottom:16px}
  .ds{padding:24px 0 28px}
  .med-foto{aspect-ratio:16/9}
  .over-foto{position:relative;top:auto;display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;max-width:none}
  .over-foto figcaption{margin:0}
  .rev-score{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:6px 16px}
  .rs-n{font-size:56px}
  .rs-b{margin-top:0;width:100%}
  .rev-stage{min-height:0}
  .faq{gap:20px}
  .ftr-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-b{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--hdr:66px;--sp:52px}
  body{font-size:16px}
  .logo svg{height:42px}
  .hdr-cta{display:none}
  .burger .bl{display:none}.burger{padding:0 5px}
  .hero{padding:16px 0 56px}
  .hero-in{gap:22px}
  .hero-k{font-size:11.5px;letter-spacing:.12em;margin-bottom:14px}
  .hero-k::before{width:20px}
  .hero h1{font-size:clamp(31px,8.6vw,38px)}
  .hero-lead{margin-top:12px;font-size:16px}
  .hero-lead .lang{display:none}
  .hero .btns{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .hero .btn{height:50px;padding-left:18px;gap:8px;justify-content:space-between;font-size:15px}
  .hero .btn i{width:36px;height:36px}
  .hero .btn .lg{display:none}.hero .btn .sm{display:inline}
  .hero-rene{margin-top:22px;padding-top:16px;gap:12px}
  .hero-rene img{width:46px;height:46px}
  .hero-rene p span{font-size:13px}
  .hero-score b{font-size:25px}
  .hero-score{padding-left:14px}
  .hero-score span{font-size:12px}
  .hero-foto{aspect-ratio:16/10;order:-1}
  .fs-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fs-tabs button{padding:14px 14px 14px;border-radius:16px;background:#fff;gap:2px}
  .fs-tabs button::before,.fs-tabs button::after,.fs-tabs .fs-bar{display:none}
  .fs-tabs button.on{background:var(--blauw)}
  .fs-tabs button.on b,.fs-tabs button.on .fs-n{color:#fff}
  .fs-tabs button.on .fs-s{color:rgba(255,255,255,.85)}
  .fs-tabs b{font-size:17px}
  .fs-s{font-size:13px;line-height:1.3}
  .fs-meter{margin-top:14px}
  .fs-panels{margin-top:16px}
  .fp{grid-template-columns:minmax(0,1fr);gap:18px;border-radius:22px}
  .fp-foto{aspect-ratio:16/9;border-radius:14px}
  .fp-txt{padding:0 6px 8px}
  .fp .btn{width:100%;justify-content:space-between}
  .rol{gap:8px;grid-template-columns:minmax(0,1fr)}
  .rol button{padding:12px 30px 12px 12px;gap:10px;border-radius:16px}
  .rol button::after{right:10px;width:14px;height:14px;margin-top:-7px}
  .rol button.on::after{box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 7px var(--blauw)}
  .rol i{width:36px;height:36px}
  .rol svg{width:19px;height:19px}
  .rol b{font-size:14.5px}
  .rol em{font-size:12.5px}
  .ds-act .btn,.sub-act .btn{width:100%;justify-content:space-between}
  .sub-act,.ds-act{gap:10px}
  .sub-bel,.ds-bel{width:100%;text-align:center}
  .rev-cta{position:static;margin-top:20px;flex-direction:column;align-items:stretch;text-align:center;gap:10px}
  .rev-cta .btn{justify-content:space-between}
  .rev-stage{padding-bottom:0}
  .rev-nav{position:static;margin-top:18px}
  .over-act .btn{flex:1 1 100%;justify-content:space-between}
  .vgl-h{display:none}
  .vgl-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid rgba(255,255,255,.12);padding:14px 0 4px}
  .vgl-r > span{border-top:0;padding:8px 12px;font-size:14.5px}
  .vgl-r > span:first-child{grid-column:1/-1;padding:0 0 6px}
  .vgl-r .vm{border-radius:12px!important}
  .vgl-r .vm::before{content:"Mediation";display:block;font:700 11.5px/1 Manrope,Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--lucht);margin-bottom:6px}
  .vgl-r > span:last-child::before{content:"Procedure";display:block;font:700 11.5px/1 Manrope,Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
  .med-voet .btn{width:100%;justify-content:space-between}
  .over-feit div{grid-template-columns:minmax(0,1fr);gap:2px}
  .over-logos img{height:32px}
  .lees{grid-template-columns:minmax(0,1fr);gap:14px}
  .lees-k{margin-bottom:0}
  .lees-lp{margin-top:6px}
  .rq blockquote{font-size:19px}
  .tr{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .fq button{font-size:16.5px}
  .fq-a > p{padding-right:0}
  .cf-g{gap:10px}
  .chips span{height:38px;padding:0 13px;font-size:14px}
  .chips{gap:6px}
  .ftr-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .abar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;padding:8px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(11,44,74,.22);transform:translateY(160%);transition:transform .55s var(--ease)}
  .abar.show{transform:none}
  .abar .btn{height:48px;padding-left:18px;justify-content:space-between;font-size:15px}
  .abar .btn i{width:34px;height:34px}
  .abar .btn-wit{box-shadow:inset 0 0 0 1.5px var(--lijn)}
  .ftr{padding-bottom:96px}
}
@media (max-width:380px){
  .cf-g{grid-template-columns:minmax(0,1fr)}
  .hero-rene p span{display:none}
  .switch button{font-size:13px}
}
@media (max-width:760px) and (max-height:700px){
  .hero-foto{aspect-ratio:2/1}
  .hero-k{margin-bottom:10px}
  .hero-rene{margin-top:16px;padding-top:12px}
}
/* telefoon liggend: hero naast elkaar, alleen kop en knop */
@media (orientation:landscape) and (max-height:520px){
  :root{--hdr:62px}
  .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:center}
  .hero-foto{order:0;aspect-ratio:auto;height:calc(100svh - var(--hdr) - 40px)}
  .hero h1{font-size:34px}
  .hero-lead,.hero-rene{display:none}
  .hero .btns{margin-top:18px}
  .abar{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* =====================================================================
   v2: De Wit Advocatuur als voorportaal, LawPilot als aparte digitale stap
   ===================================================================== */
:root{--lp:#111827;--lp-2:#374151;--lp-l:#f3f4f6;--rood:#d93a2b;--oranje:#e08a12;--groen:#1f9a52}
.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero h1{font-size:clamp(36px,3.9vw,54px)}

/* ---------- megamenu: kolommen per doelgroep ---------- */
.mg-kols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mg-kol{padding:8px;opacity:0;transform:translateY(8px)}
.mega.open .mg-kol{opacity:1;transform:none;transition:opacity .45s calc(.12s + var(--d) * .05s),transform .55s var(--ease) calc(.12s + var(--d) * .05s)}
.mg-kol-k{display:flex;align-items:center;gap:10px;padding:0 10px 10px;font:700 13px/1 Manrope,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mg-kol a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink);font:700 15px/1.25 Manrope,Inter,sans-serif;transition:background-color .25s,color .25s}
.mg-kol a:hover{background:var(--ijs);color:var(--blauw)}
.mg-kol a.volgt{color:var(--mute);font-weight:600}
.mg-kol a em{flex:none;font:600 12px/1 Inter,sans-serif;font-style:normal;color:var(--blauw);background:var(--ijs);padding:5px 8px;border-radius:999px}
.mg-kol a.volgt em{color:var(--mute);background:#f1f3f5}

/* ---------- hero-kiezer: foto en keuze in één kaart ---------- */
.kiezer{position:relative;border-radius:var(--r);background:var(--ijs);display:flex;flex-direction:column}
.kz-foto{height:clamp(130px,15vw,190px);border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.kz-foto img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.kz-in{padding:clamp(18px,2vw,26px)}
.kz-h{font:700 clamp(19px,1.6vw,22px)/1.2 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.kz-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:14px;padding:4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn)}
.kz-seg button{border:0;background:none;border-radius:999px;height:40px;padding:0 8px;font:700 14px/1 Manrope,Inter,sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .3s,color .3s}
.kz-seg button:hover{color:var(--blauw)}
.kz-seg button.on{background:var(--blauw);color:#fff}
.kz-seg .sm{display:none}
.kz-lijst{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;min-height:148px}
.kz-lijst li{animation:fpIn .45s var(--ease) both}
.kz-lijst a{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:12px;padding:12px 8px 12px 16px;border-radius:16px;background:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .25s,transform .25s var(--land)}
.kz-lijst a:hover{box-shadow:inset 0 0 0 1.5px var(--blauw)}
.kz-lijst b{display:block;font:700 15.5px/1.25 Manrope,Inter,sans-serif;color:var(--ink)}
.kz-lijst small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--mute)}
.kz-lijst em{font:700 14px/1 Manrope,Inter,sans-serif;font-style:normal;color:var(--ink);white-space:nowrap}
.kz-lijst i{width:36px;height:36px;border-radius:50%;background:var(--ijs);color:var(--blauw);display:grid;place-items:center;transition:background-color .3s,color .3s,transform .4s var(--ease)}
.kz-lijst a:hover i{background:var(--blauw);color:#fff;transform:translateX(2px)}
.kz-lijst svg,.ck-r svg,.ook svg,.pg-meer-l svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kz-meer{font-size:13.5px;color:var(--mute);padding:4px 4px 0}
.kz-lijst .kz-meer a{display:inline;padding:6px 0;background:none;box-shadow:none;border-radius:0;color:var(--blauw);font-weight:600;text-decoration:none}
.kz-lijst .kz-meer a:hover{text-decoration:underline;box-shadow:none}
.kz-voet{margin-top:14px;padding-top:12px;border-top:1px solid var(--lijn);font-size:13.5px;line-height:1.45;color:var(--mute)}
.kz-voet b{color:var(--ink);font-weight:600}

/* ---------- zo werkt het: drie zones ---------- */
.route{background:var(--ijs)}
.rt-kop{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px);align-items:end}
.rt-kop p{font-size:16.5px;max-width:34em}
.rt{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,1fr);gap:10px}
.rt-z{border-radius:22px;padding:18px 18px 20px;display:grid;gap:14px;align-content:start}
.rt-lp{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px}
.rt-lp .rt-l{grid-column:1/-1}
.rt-dw{background:#fff}
.rt-lp{background:var(--lp);color:#d1d5db}
.rt-adv{background:#fff;box-shadow:inset 0 0 0 1.5px var(--blauw)}
.rt-l{font:700 12.5px/1.2 Manrope,Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--blauw)}
.rt-lp .rt-l{color:#9ca3af}
.rt-s b{display:flex;align-items:center;gap:10px;font:700 16.5px/1.25 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.01em}
.rt-lp .rt-s b{color:#fff}
.rt-s b i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 Manrope,Inter,sans-serif;font-style:normal;background:var(--blauw);color:#fff}
.rt-lp .rt-s b i{background:#fff;color:var(--lp)}
.rt-s span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5}

/* ---------- checks ---------- */
.ck-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.ck-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ck-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:0;border-radius:16px;padding:12px 18px;background:var(--ijs);cursor:pointer;transition:background-color .3s,box-shadow .3s}
.ck-tabs b{font:700 15.5px/1.2 Manrope,Inter,sans-serif;color:var(--ink)}
.ck-tabs em{font-style:normal;font-size:13px;color:var(--mute)}
.ck-tabs button:hover{box-shadow:inset 0 0 0 1.5px var(--blauw)}
.ck-tabs button.on{background:var(--blauw);box-shadow:0 10px 24px rgba(0,108,174,.22)}
.ck-tabs button.on b{color:#fff}.ck-tabs button.on em{color:rgba(255,255,255,.82)}
.ck-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4.5vw,64px);margin-top:clamp(20px,2.4vw,32px);align-items:start}
.ck-intro{font-size:16.5px;max-width:38em;margin-bottom:14px}
.ck-lijst{list-style:none;margin:0;padding:0}
.ck-lijst li{border-top:1px solid var(--lijn);animation:fpIn .5s var(--ease) both}
.ck-lijst li:last-child{border-bottom:1px solid var(--lijn)}
.ck-r{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:8px 20px;align-items:center;padding:18px 4px;text-decoration:none;color:inherit}
.ck-r h3{font-size:clamp(18.5px,1.5vw,21px);transition:color .25s}
.ck-r p{margin-top:4px;font-size:15px;line-height:1.5;max-width:40em}
.ck-m{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.ck-m b{font:700 16px/1 Manrope,Inter,sans-serif;color:var(--ink)}
.ck-m em{font:600 12.5px/1 Inter,sans-serif;font-style:normal;padding:5px 9px;border-radius:999px;background:#e6f3ec;color:#1f6b3e}
.ck-r.volgt .ck-m em{background:#f1f3f5;color:var(--mute)}
.ck-r.volgt h3{color:var(--ink-2)}
.ck-r i{width:40px;height:40px;border-radius:50%;background:var(--ijs);color:var(--blauw);display:grid;place-items:center;transition:background-color .3s,color .3s,transform .4s var(--ease)}
.ck-r:hover h3{color:var(--blauw)}
.ck-r:hover i{background:var(--blauw);color:#fff;transform:translateX(3px)}
.ck-zij{position:sticky;top:calc(var(--hdr) + 24px);display:flex;flex-direction:column;gap:12px}
.ck-foto{position:relative;aspect-ratio:4/3.4;border-radius:var(--r);overflow:hidden;background:var(--ijs)}
.ck-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.ck-foto img.on{opacity:1;transform:none}
.ck-foto figcaption{position:absolute;left:16px;bottom:16px}
.ck-foto figcaption span{display:inline-block;background:#fff;color:var(--ink);font:700 14px/1 Manrope,Inter,sans-serif;padding:10px 15px;border-radius:999px}

/* ---------- advocaat (navy) ---------- */
.adv .med-foto{aspect-ratio:4/4.6}
.adv-k{margin-top:22px;font:700 13px/1 Manrope,Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--lucht)}
.adv-l{list-style:none;margin:12px 0 22px;padding:0}
.adv-l li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;padding:11px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15px;line-height:1.45}
.adv-l li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.adv-l b{font:700 15px/1.4 Manrope,Inter,sans-serif;color:#fff}

/* ---------- over René: ook bij René ---------- */
.ook{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ook a{display:grid;grid-template-columns:minmax(0,1fr) 18px;column-gap:10px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--ijs);text-decoration:none;transition:background-color .3s}
.ook b{font:700 15.5px/1.25 Manrope,Inter,sans-serif;color:var(--ink)}
.ook span{grid-column:1;font-size:13.5px;line-height:1.35;color:var(--mute)}
.ook svg{grid-column:2;grid-row:1/3;color:var(--blauw);transition:transform .4s var(--ease)}
.ook a:hover{background:#e3edf6}
.ook a:hover svg{transform:translateX(3px)}

/* ---------- twee soorten kosten ---------- */
.ks-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.ks-kop p{font-size:16px;max-width:34em}
.ks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(22px,2.6vw,34px)}
.ks-k{border-radius:var(--r);padding:clamp(20px,2.2vw,28px)}
.ks-lp{background:var(--lp);color:#d1d5db}
.ks-dw{background:var(--navy);color:rgba(255,255,255,.8)}
.ks-l{font:700 13px/1 Manrope,Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#9ca3af}
.ks-dw .ks-l{color:var(--lucht)}
.ks-p{margin-top:10px;font:600 15px/1.2 Manrope,Inter,sans-serif;color:#fff}
.ks-p b{font-size:clamp(32px,3vw,40px);font-weight:800;letter-spacing:-.03em;margin:0 4px}
.ks-p span{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.6)}
.ks-w{margin-top:8px;font-size:14.5px}
.ks-k ul{list-style:none;margin:16px 0 0;padding:0}
.ks-k li{position:relative;padding:8px 0 8px 22px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:#fff}
.ks-k li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;border-radius:50%;background:#9ca3af}
.ks-dw li::before{background:var(--lucht)}
.ks-noot{margin-top:16px;font-size:14.5px;color:var(--mute);max-width:60em}

/* ---------- tussenscherm ---------- */
.tus{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(8,33,58,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:tusBg .3s var(--ease)}
@keyframes tusBg{from{opacity:0}}
.tus-in{position:relative;width:min(520px,100%);max-height:calc(100svh - 40px);overflow-y:auto;background:#fff;border-radius:26px;padding:clamp(22px,3vw,32px);box-shadow:0 40px 80px rgba(8,33,58,.35);animation:tusIn .45s var(--land)}
@keyframes tusIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.tus-x{position:absolute;right:14px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:var(--ijs);display:grid;place-items:center;cursor:pointer}
.tus-x svg{width:16px;height:16px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}
.tus-k{font:700 12.5px/1.3 Manrope,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-right:48px}
.tus h2{margin-top:8px;font-size:clamp(26px,2.4vw,32px)}
.tus-check{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--lp-l);font:600 15px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.tus-check b{font-size:17px;white-space:nowrap}
.tus-l{list-style:none;margin:16px 0 0;padding:0}
.tus-l li{position:relative;padding:9px 0 9px 28px;border-top:1px solid var(--lijn);font-size:15px;line-height:1.5;color:var(--ink)}
.tus-l li::before{content:"";position:absolute;left:2px;top:13px;width:14px;height:8px;border-left:2px solid var(--blauw);border-bottom:2px solid var(--blauw);transform:rotate(-45deg)}
.tus-act{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:20px}
.tus-terug{border:0;background:none;padding:12px 4px;font:700 15px/1 Manrope,Inter,sans-serif;color:var(--mute);cursor:pointer}
.tus-terug:hover{color:var(--ink)}
.tus-noot{margin-top:12px;font-size:13.5px;color:var(--mute)}

/* ---------- productpagina ---------- */
.pg-hero{padding:clamp(20px,2.6vw,36px) 0 clamp(44px,5vw,68px)}
.pg-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.krumel{display:flex;align-items:center;gap:8px;font:600 14px/1 Manrope,Inter,sans-serif;color:var(--mute);margin-bottom:16px}
.krumel a{color:var(--blauw);text-decoration:none;padding:6px 0}
.krumel a:hover{text-decoration:underline}
.pg h1{font-size:clamp(34px,3.6vw,50px);font-weight:800;letter-spacing:-.035em}
.pg-vraag{margin-top:14px;font:600 clamp(18px,1.5vw,21px)/1.4 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.01em;max-width:30em}
.pg-kort{margin-top:10px;font-size:16px;max-width:36em}
.pg-prijs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px;max-width:540px}
.pg-prijs div{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:16px;background:var(--ijs)}
.pg-prijs div:first-child{background:var(--lp-l)}
.pg-prijs span{font-size:13.5px;color:var(--mute)}
.pg-prijs b{font:800 26px/1.1 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.pg-prijs em{font-style:normal;font-size:13px;color:var(--mute)}
.pg-knop{margin-top:22px;gap:10px 20px}
.pg-volgt{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:16px;border-radius:16px;background:#fff7e8;box-shadow:inset 3px 0 0 var(--oranje)}
.pg-volgt b{font:700 15.5px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.pg-volgt span{font-size:15px;flex:1 1 220px}
.pg-vb{position:relative;border-radius:var(--r);background:var(--ijs);padding:clamp(18px,2.4vw,30px)}
.vb{background:#fff;border-radius:18px;padding:18px 18px 20px;box-shadow:0 20px 50px rgba(11,44,74,.12);font-family:Inter,system-ui,sans-serif}
.vb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}
.vb-top img{height:20px;width:auto}
.vb-top span{font-size:12.5px;color:#6b7280}
.vb-h{margin-top:14px;font:600 17px/1.3 Inter,sans-serif;color:var(--lp);letter-spacing:-.01em}
.vb-s{margin-top:14px;font-size:12.5px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em}
.vb-l{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.vb-l li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#f9fafb;font-size:14px;color:var(--lp)}
.vb-l i{width:10px;height:10px;border-radius:50%;flex:none}
.vb-l .r i{background:var(--rood)}.vb-l .o i{background:var(--oranje)}.vb-l .g i{background:var(--groen)}
.vb-acties,.vb-brief{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.vb-acties i,.vb-brief i{display:block;height:9px;border-radius:5px;background:#eceef1}
.vb-acties i:nth-child(1){width:86%}.vb-acties i:nth-child(2){width:72%}.vb-acties i:nth-child(3){width:58%}
.vb-brief{padding:12px;border-radius:12px;box-shadow:inset 0 0 0 1px #e5e7eb}
.vb-brief i:nth-child(1){width:40%}.vb-brief i:nth-child(2){width:92%}.vb-brief i:nth-child(3){width:84%}.vb-brief i:nth-child(4){width:66%}
.pg-wat{background:var(--ijs)}
.pg-wat-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px)}
.pg-wat h2{font-size:clamp(24px,2.2vw,30px)}
.pg-krijg,.pg-nodig{list-style:none;margin:16px 0 0;padding:0}
.pg-krijg li,.pg-nodig li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--lijn);font-size:16px;color:var(--ink)}
.pg-krijg li:last-child,.pg-nodig li:last-child{border-bottom:1px solid var(--lijn)}
.pg-krijg li{justify-content:flex-start}
.pg-krijg li::before{content:"";flex:none;width:14px;height:8px;margin-top:-4px;border-left:2px solid var(--blauw);border-bottom:2px solid var(--blauw);transform:rotate(-45deg)}
.pg-nodig em{flex:none;font:600 12.5px/1 Inter,sans-serif;font-style:normal;padding:5px 9px;border-radius:999px;background:#fff;color:var(--mute);box-shadow:inset 0 0 0 1px var(--lijn)}
.pg-nodig em.verplicht{background:var(--ink);color:#fff;box-shadow:none}
.pg-noot{margin-top:12px;font-size:14px;color:var(--mute)}
.pg-stappen{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pg-stappen li{padding:18px;border-radius:20px;background:var(--lp-l);display:flex;flex-direction:column;gap:6px}
.pg-stappen li:first-child{background:var(--ijs)}
.pg-stappen i{width:30px;height:30px;border-radius:50%;background:var(--lp);color:#fff;display:grid;place-items:center;font:800 13px/1 Manrope,Inter,sans-serif;font-style:normal;margin-bottom:6px}
.pg-stappen li:first-child i{background:var(--blauw)}
.pg-stappen b{font:700 16px/1.25 Manrope,Inter,sans-serif;color:var(--ink)}
.pg-stappen span{font-size:14.5px;line-height:1.5}
.pg-adv{margin-top:12px;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:clamp(16px,2.4vw,32px);align-items:center;padding:clamp(18px,2.2vw,26px);border-radius:var(--r);background:var(--navy);color:rgba(255,255,255,.8)}
.pg-adv img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.pg-adv-k{font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--lucht)}
.pg-adv h3{margin-top:6px;color:#fff;font-size:clamp(19px,1.6vw,22px)}
.pg-adv-t > p:not(.pg-adv-k):not(.pg-adv-w){margin-top:6px;font-size:15px;max-width:38em}
.pg-adv-w{margin-top:12px;font:700 13.5px/1 Manrope,Inter,sans-serif;color:#fff}
.pg-adv ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pg-adv li{font-size:13.5px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff}
.pg-adv-p{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px}
.pg-adv-p b{font:800 clamp(30px,2.8vw,38px)/1 Manrope,Inter,sans-serif;color:#fff;letter-spacing:-.03em}
.pg-adv-p span{font-size:13.5px}
.pg-adv-p em{font-style:normal;font-size:13px;color:rgba(255,255,255,.6);max-width:16em}
.pg-faq .faq{margin-top:0}
.pg-meer{margin-top:clamp(36px,4vw,56px)}
.pg-meer-k{font:700 14px/1 Manrope,Inter,sans-serif;color:var(--mute);margin-bottom:12px}
.pg-meer-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg-meer-l a{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:4px 10px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--ijs);text-decoration:none;transition:background-color .3s}
.pg-meer-l b{font:700 15px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.pg-meer-l span{grid-column:1;font-size:13px;color:var(--mute)}
.pg-meer-l svg{grid-column:2;grid-row:1/3;color:var(--blauw)}
.pg-meer-l a:hover{background:#e3edf6}

/* ---------- responsive v2 ---------- */
@media (max-width:1100px){
  .rt{grid-template-columns:minmax(0,1fr)}
  .rt-lp{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px), (orientation:portrait) and (max-width:1100px){
  .hero-in,.pg-hero-in{grid-template-columns:minmax(0,1fr)}
  .rt-kop,.ks-kop{grid-template-columns:minmax(0,1fr);gap:12px}
  .ck-grid{grid-template-columns:minmax(0,1fr)}
  .ck-zij{display:none}
  .pg-wat-in{grid-template-columns:minmax(0,1fr)}
  .pg-adv{grid-template-columns:72px minmax(0,1fr)}
  .pg-adv img{width:72px;height:72px}
  .pg-adv-p{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;text-align:left;gap:6px 12px}
  .pg-meer-l{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .hero h1{font-size:clamp(30px,8.4vw,38px)}
  .kz-foto{display:none}
  .kz-in{padding:16px}
  .kz-seg button{font-size:13.5px;padding:0 4px}
  .kz-seg .lg{display:none}
  .kz-seg .sm{display:inline}
  .kz-lijst a{grid-template-columns:minmax(0,1fr) 36px;padding:12px 8px 12px 14px}
  .kz-lijst em{display:none}
  .kz-lijst{min-height:0}
  .rt-lp{grid-template-columns:minmax(0,1fr)}
  .ck-tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ck-tabs button{padding:10px 10px;border-radius:14px}
  .ck-tabs b{font-size:13.5px}
  .ck-tabs em{display:none}
  .ck-r{grid-template-columns:minmax(0,1fr) 40px;padding:16px 0}
  .ck-m{grid-column:1;grid-row:2;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:10px}
  .ck-r i{grid-column:2;grid-row:1/3}
  .adv-l li{grid-template-columns:minmax(0,1fr);gap:2px}
  .ook{grid-template-columns:minmax(0,1fr)}
  .ks{grid-template-columns:minmax(0,1fr)}
  .tus{padding:0;place-items:end stretch}
  .tus-in{border-radius:24px 24px 0 0;max-height:94svh;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .tus-act .btn{width:100%;justify-content:space-between}
  .tus-terug{width:100%}
  .pg h1{font-size:clamp(29px,8vw,36px)}
  .pg-prijs b{font-size:22px}
  .pg-knop .btn{width:100%;justify-content:space-between}
  .pg-knop .sub-bel{width:100%;text-align:center}
  .pg-vb{padding:14px}
  .pg-stappen{grid-template-columns:minmax(0,1fr)}
  .pg-meer-l{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){
  .kz-seg button{font-size:12.5px}
  .pg-prijs{grid-template-columns:minmax(0,1fr)}
}

/* ---------- leesbaarheid en tikvlakken (audit) ---------- */
.rt-l,.ck-m em,.mg-kol a em,.pg-nodig em,.vb-s,.pg-adv-k,.tus-k{font-size:13px}
.hero-score span{font-size:13px}
.sub-bel,.ds-bel{display:inline-block;padding:10px 0}
.kz-lijst .kz-meer a{padding:10px 0;display:inline-block}
@media (max-width:760px){
  .hero-k{font-size:13px;letter-spacing:.08em}
  .hero-score span{font-size:13px}
  .ftr a{display:inline-block;padding:10px 0}
  .ftr-c{gap:0}
  .mm-links a{padding:13px 0}
  .krumel a{padding:12px 0}
}
@media (max-width:400px){
  .abar .btn{padding:0 12px;justify-content:center;font-size:14px}
  .abar .btn i{display:none}
  .pg-knop .btn .lg{display:none}
}
.pg-knop .btn .sm{display:none}
@media (max-width:400px){.pg-knop .btn .sm{display:inline}}
@media (max-width:380px){
  .kz-seg button{font-size:13px}
  .btn{padding-left:18px;gap:10px}
}
.vb-top span{font-size:13px}
.ck-r h3{overflow-wrap:break-word;hyphens:auto}
@media (max-width:1000px){
  .ftr a{display:inline-block;padding:10px 0}
  .ftr-c{gap:0}
  .mm-links a{padding:13px 0}
  .krumel a{padding:12px 0}
}

/* =====================================================================
   v3: advocaat voorop. Hero met kop, twee knoppen en feiten; daarna twee routes
   (persoonlijk advies / digitaal met de AI-agent). Mediation en abonnement zijn eruit.
   ===================================================================== */
.mg-kols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.ck-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hero3{padding:clamp(24px,3vw,44px) 0 clamp(52px,5.4vw,80px)}
.hero3 .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:stretch}
.hero3 .hero-txt{display:flex;flex-direction:column;justify-content:center;padding:8px 0}
.hero3 h1{font-size:clamp(38px,4.3vw,62px)}
.hero3 .hero-lead{max-width:30em;margin-top:18px}
.hero3 .btns{margin-top:28px}
.hero-feiten{list-style:none;margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--lijn);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0}
.hero-feiten li{display:flex;flex-direction:column;padding:0 26px;border-left:1px solid var(--lijn)}
.hero-feiten li:first-child{padding-left:0;border-left:0}
.hero-feiten b{font:800 clamp(22px,1.9vw,27px)/1.05 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.025em}
.hero-feiten li:first-child b{color:var(--blauw)}
.hero-feiten span{margin-top:5px;font-size:13.5px;color:var(--mute)}

.hero3 .hero-foto{height:auto;min-height:clamp(440px,calc(100svh - var(--hdr) - 120px),600px)}
.hero3 .hero-foto > img{position:absolute;inset:0;object-position:60% 45%}
.foto-q{position:absolute;left:18px;bottom:18px;max-width:330px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--sh);text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .4s var(--ease)}
.foto-q:hover{transform:translateY(-3px)}
.fq-s{font-size:13px;letter-spacing:2px;color:#f2a516;line-height:1}
.foto-q q{quotes:"“" "”";font:700 17px/1.3 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.015em}
.fq-w{font-size:13px;color:var(--mute)}

/* ---------- twee manieren om te starten ---------- */
.twee{background:var(--ijs-2)}
.tw-kop{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.tw-kop p{max-width:30em;font-size:16.5px}
.tw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.tw-k{border-radius:var(--r);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.tw-adv{background:var(--navy);color:rgba(255,255,255,.78)}
.tw-dig{background:#fff;box-shadow:inset 0 0 0 1px var(--lijn)}
.tw-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:800 12.5px/1.3 Manrope,Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blauw)}
.tw-adv .tw-l{color:var(--lucht)}
.tw-l em{font:600 12px/1 Inter,sans-serif;font-style:normal;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--ijs);padding:6px 10px;border-radius:999px}
.tw-k h3{margin-top:14px;font-size:clamp(23px,2vw,29px);letter-spacing:-.025em}
.tw-adv h3{color:#fff}
.tw-t{margin-top:10px;font-size:15.5px;line-height:1.6;max-width:34em}
.tw-v{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.tw-v li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font:600 15px/1.35 Manrope,Inter,sans-serif;color:#fff}
.tw-v li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lucht);flex:none}
.tw-act{margin-top:auto;padding-top:26px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.tw-bel{font:600 14.5px/1.3 Manrope,Inter,sans-serif;color:rgba(255,255,255,.7);text-decoration:none}
.tw-bel b{color:#fff}
.tw-bel:hover,.tw-bel:hover b{color:var(--lucht)}
.tw-ch{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--lijn)}
.tw-ch li{border-bottom:1px solid var(--lijn)}
.tw-ch a{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:14px;padding:12px 0;text-decoration:none}
.tw-ch a b{display:block;font:700 15.5px/1.3 Manrope,Inter,sans-serif;color:var(--ink);transition:color .25s}
.tw-ch a small{display:block;font-size:13px;color:var(--mute)}
.tw-ch a em{font:700 14.5px/1 Manrope,Inter,sans-serif;font-style:normal;color:var(--ink)}
.tw-ch a i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blauw);color:#fff;transition:background-color .3s,transform .4s var(--ease)}
.tw-ch a:hover b{color:var(--blauw)}
.tw-ch a:hover i{background:var(--navy);transform:translateX(2px)}
.tw-ch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tw-ch .volgt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;font-size:14.5px;color:var(--mute)}
.tw-ch .volgt em{font:600 12px/1 Inter,sans-serif;font-style:normal;color:var(--mute);background:#f1f3f5;padding:5px 9px;border-radius:999px;flex:none}
.tw-noot{margin-top:auto;padding-top:18px;font-size:13.5px;line-height:1.5;color:var(--mute)}

@media (max-width:1000px), (orientation:portrait) and (max-width:1100px){
  .hero3 .hero-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero3 .hero-foto{order:-1;min-height:0;aspect-ratio:21/9}
  .tw{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .hero3{padding:14px 0 48px}
  .hero3 .hero-in{gap:22px}
  .hero3 .hero-foto{aspect-ratio:16/10}
  .hero3 h1{font-size:clamp(32px,9vw,40px)}
  .hero3 .hero-lead{margin-top:12px}
  .hero3 .btns{margin-top:20px}
  .hero-feiten{margin-top:24px;padding-top:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-feiten li{padding:0 12px}
  .hero-feiten b{font-size:20px}
  .hero-feiten span{font-size:12.5px}
  .foto-q{left:10px;right:10px;bottom:10px;max-width:none;padding:10px 14px;gap:3px;border-radius:14px}
  .foto-q q{font-size:14.5px}
  .fq-s,.fq-w{font-size:11.5px}
  .tw-kop{margin-bottom:22px}
  .tw-ch a{grid-template-columns:minmax(0,1fr) auto 34px;gap:10px}
}
@media (max-width:760px) and (max-height:700px){
  .hero3 .hero-foto{aspect-ratio:2/1}
}
@media (orientation:landscape) and (max-height:520px){
  .hero3 .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hero3 .hero-foto{order:0;aspect-ratio:auto;min-height:0;height:calc(100svh - var(--hdr) - 40px)}
  .hero-feiten,.foto-q{display:none}
  .hero3 .hero-lead{display:block}
}
.twee{background:#fff}
.tw-q{margin:22px 0 0;padding:0 0 0 16px;border-left:2px solid var(--lucht)}
.tw-q p{font:600 16px/1.45 Manrope,Inter,sans-serif;color:#fff;letter-spacing:-.01em}
.tw-q cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:rgba(255,255,255,.6)}
@media (max-width:760px){
  .hero3 .hero-foto{aspect-ratio:3/2}
  .foto-q{right:auto;max-width:calc(100% - 20px);padding:8px 12px;gap:2px}
  .foto-q .fq-s{display:none}
  .foto-q q{font-size:13.5px}
  .hero-feiten b{font-size:18px}
}
@media (max-width:760px) and (max-height:700px){.hero3 .hero-foto{aspect-ratio:2/1}}

/* =====================================================================
   v3 telefoon: rustig en kort. Per sectie één boodschap en hooguit één knop,
   geen vaste knoppenbalk (bellen zit als icoon in de header), dubbele uitleg weg.
   ===================================================================== */
.t-sm,.hero-m,.volgt-kort{display:none}
@media (max-width:760px){
  .t-lg{display:none}.t-sm{display:inline}
  /* header: belicoon naast het menu, geen balk onderin */
  .hdr-tel{display:flex;padding:0}
  .hdr-tel span{display:none}
  .hdr-tel i{width:44px;height:44px}
  .abar,.abar.show{display:none}
  .ftr{padding-bottom:28px}

  /* hero: foto zonder overlay, kop, één zin, één knop, één regel vertrouwen */
  .hero3{padding:12px 0 40px}
  .hero3 .hero-in{gap:20px}
  .hero3 .hero-foto{aspect-ratio:16/10}
  .foto-q,.hero-feiten,.hero3 .btns .btn-wit{display:none}
  .hero3 .hero-k{font-size:11px;letter-spacing:.1em;margin-bottom:12px}
  .hero3 .hero-k::before{width:16px}
  .hero3 h1{font-size:clamp(32px,8.8vw,38px)}
  .hero3 .hero-lead{font-size:16px;margin-top:12px}
  .hero3 .btns{display:flex;margin-top:20px}
  .hero3 .btns .btn{width:auto;height:52px;padding-left:22px;gap:14px}
  .hero-m{display:inline-flex;align-items:baseline;gap:6px;margin-top:16px;font-size:14px;color:var(--mute);text-decoration:none}
  .hero-m span{color:#f2a516;letter-spacing:1px;font-size:12px}
  .hero-m b{font:800 15px/1 Manrope,Inter,sans-serif;color:var(--ink)}

  /* twee routes: kort */
  .tw-kop p,.tw-q,.tw-bel,.tw-noot,.tw-ch .volgt{display:none}
  .tw-kop{margin-bottom:18px}
  .tw{gap:12px}
  .tw-k{padding:22px 20px}
  .tw-k h3{margin-top:10px;font-size:23px}
  .tw-v{margin-top:16px}
  .tw-v li{padding:10px 0;font-size:14.5px}
  .tw-act{padding-top:20px}
  .tw-ch{margin-top:16px}
  .volgt-kort{display:block;padding:12px 0 0;border:0!important;font-size:13.5px;color:var(--mute)}

  /* dubbele uitleg weg: de stappen staan al in de twee routes */
  .route{display:none}

  /* checks: alleen wat je nu kunt starten */
  .ck-lijst li:has(.ck-r.volgt){display:none}
  .ck-zij{display:none}
  .ck-r p{display:none}

  /* advocaat: kop, één alinea, één knop */
  .med-foto,.adv-k,.adv-l,.sub-act .sub-bel{display:none}
  .med-in{gap:0}
  .sub-act{margin-top:22px}

  /* over: foto, kop, één alinea en het citaat */
  .over-cols p:nth-child(2),.ook{display:none}

  /* reviews en tarieven: zonder extra knop en lijstjes */
  .rev-cta,.ks ul{display:none}

  /* footer: één blok, juridische links op één rij */
  .ftr-in{grid-template-columns:minmax(0,1fr);gap:18px}
  #ftrChecks,.ftr-c[aria-label="Kantoor"]{display:none}
  .ftr-c[aria-label="Juridisch"]{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
  .ftr-c[aria-label="Juridisch"] p{display:none}
  .ftr-c[aria-label="Juridisch"] a{font-size:13.5px}
  .ftr-onder{margin-top:20px}
}
@media (max-width:760px){
  /* checks: op de telefoon staat dit al in de digitale kaart bij "Twee manieren" */
  .checks{display:none}
  /* tarieven: twee lichte rijen in één paneel i.p.v. twee donkere blokken */
  .ks{gap:0;border-radius:var(--r);overflow:hidden;background:var(--ijs)}
  .ks-k{border-radius:0;background:none;color:var(--ink-2);padding:18px 20px}
  .ks-k + .ks-k{border-top:1px solid var(--lijn)}
  .ks-l,.ks-dw .ks-l{color:var(--blauw)}
  .ks-p{color:var(--ink)}
  .ks-p b{font-size:30px}
  .ks-p span{color:var(--mute)}
  .ks-w{font-size:14px}
}
@media (max-width:760px){.over-logos{display:none}}
@media (max-width:760px){
  /* tweede sectie: past in één scherm. Kern + één knop, en de checks zelf */
  .twee{padding:40px 0}
  .twee .tw-kop h2{font-size:26px}
  .tw-v{display:none}
  .tw-adv .tw-act{padding-top:16px}
  .tw-adv .tw-act .btn{height:48px}
  .tw-dig .tw-t{display:none}
  .tw-k h3{font-size:21px;margin-top:8px}
  .tw-t{font-size:15px;margin-top:6px}
  .tw-ch{margin-top:12px}
  .tw-ch a{padding:10px 0}
  .tw-ch a b{font-size:15px}
  .volgt-kort{padding-top:10px;font-size:13px}
}

/* =====================================================================
   v3 telefoon, ronde 3: elke sectie binnen één scherm (375x667), leesbare maten
   (lopende tekst ≥15px, labels ≥13px) en één vaste actie in de header.
   ===================================================================== */
.ct-bel-m{display:none}
@media (max-width:760px){
  /* header: logo, Plan gesprek, bellen, menu */
  .logo svg{height:38px}
  .hdr-r{gap:8px}
  .hdr-cta{display:inline-flex;height:40px;padding:0 16px;gap:0;font-size:14px}
  .hdr-cta i{display:none}
  .hdr-tel i{width:40px;height:40px}
  .burger{height:40px;padding:0 3px}
  .burger i{width:34px;height:34px}

  /* hero */
  .hero3 .hero-k{font:600 14px/1.3 Inter,sans-serif;letter-spacing:0;text-transform:none;margin-bottom:10px}
  .hero-m{font-size:14.5px}

  /* twee routes: past op 375x667 */
  .twee{padding:32px 0}
  .twee .tw-kop{margin-bottom:14px}
  .twee .tw-kop h2{font-size:24px;letter-spacing:-.03em}
  .tw-k{padding:20px 18px}
  .tw-l{font-size:13px;letter-spacing:.08em}
  .tw-l em{font-size:13px;padding:5px 9px}
  .volgt-kort{display:none}
  .tw-ch a small{font-size:13.5px}

  /* advocaat */
  .med-lead{font-size:15.5px}

  /* tarieven en FAQ: twee compacte blokken */
  .tar{padding:40px 0}
  .ks-kop p{font-size:15px}
  .ks{margin-top:16px}
  .ks-k{padding:16px 18px}
  .ks-l{font-size:13px}
  .ks-noot{font-size:14px;margin-top:12px}
  .faq{margin-top:40px;gap:0}
  .faq-kop p{margin:8px 0 10px;font-size:15px}
  .fq button{padding:13px 0;font-size:15.5px}

  /* contact: kop, belregel en het formulier */
  .contact{padding:36px 0}
  .ct-in{gap:18px}
  .ct-lead,.ct-l{display:none}
  .ct-bel-m{display:inline-flex;gap:6px;margin-top:10px;font-size:15.5px;color:rgba(255,255,255,.75);text-decoration:none}
  .ct-bel-m b{color:#fff}
  .ct-form{padding:18px}
  .chips{margin-top:12px}
  .chips legend{margin-bottom:8px}
  .chips span{height:38px;padding:0 15px}
  .cf-g{margin-top:12px;gap:10px}
  .f{gap:5px}
  .f span{font-size:13.5px}
  .f input{padding:10px 12px}
  .f textarea{padding:10px 12px;height:76px;resize:none}
  .cf-ok{margin:12px 0 14px;font-size:14px}
  .ct-form .btn{height:50px}
}
@media (max-width:360px){
  .hdr-cta{padding:0 12px;font-size:13.5px}
  .logo svg{height:34px}
}
@media (max-width:760px){
  .contact .cf-h{display:none}
  .contact .chips{margin-top:0}
  .contact .cf-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact .f-w{grid-column:1/-1}
}
@media (max-width:760px){
  .contact{padding:28px 0 32px}
  .ct-in{gap:14px}
  .contact .f textarea{height:64px}
  .contact .cf-ok{margin:10px 0 12px}
}

/* =====================================================================
   v3 header: verzorgd, in De Wit-stijl. Navy topbalk (verdwijnt bij scrollen),
   witte balk met tekstlinks, uitklap "Arbeidsrecht" met diensten, de digitale
   check en een advocaatkaart; rechts direct contact en één knop.
   ===================================================================== */
:root{--top:36px}
body{padding-top:calc(var(--hdr) + var(--top))}
.hdr{height:calc(var(--hdr) + var(--top));box-shadow:0 1px 0 var(--lijn);transition:transform .45s var(--ease),box-shadow .3s}
.hdr.solid{transform:translateY(calc(var(--top) * -1));box-shadow:0 1px 0 var(--lijn),0 8px 24px rgba(11,44,74,.06)}
.hdr-in{height:var(--hdr)}
.topbar{height:var(--top);background:var(--navy);color:rgba(255,255,255,.72);font-size:13px;line-height:1}
.tb-in{height:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.tb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-r{display:flex;align-items:center;white-space:nowrap}
.tb-r > *{padding:0 18px;border-left:1px solid rgba(255,255,255,.18)}
.tb-r > *:first-child{border-left:0;padding-left:0}
.tb-r > *:last-child{padding-right:0}
.tb-r a{color:inherit;text-decoration:none;transition:color .25s}
.tb-r a:hover{color:#fff}
.tb-r b{color:#fff;font-weight:700}
.tb-s{color:#f2a516;letter-spacing:1px;font-size:11px}

.logo svg{height:54px}
.nav{gap:0;margin-left:auto}
.nav a,.nav-t{position:relative;padding:10px 0;margin:0 clamp(9px,1vw,15px);border-radius:0;background:none!important;font:600 15px/1 Manrope,Inter,sans-serif;color:var(--ink)}
.nav a::after,.nav-t::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--blauw);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a.act,.nav-t:hover,.nav-t[aria-expanded="true"]{color:var(--blauw)}
.nav a:hover::after,.nav a.act::after,.nav-t[aria-expanded="true"]::after{transform:scaleX(1)}
.hdr-r{gap:18px;margin-left:clamp(12px,2vw,28px)}
.hdr-tel{gap:10px;padding:0}
.hdr-tel i{width:40px;height:40px;background:var(--ijs)}
.hdr-tel svg{width:17px;height:17px}
.hdr-tel span{display:flex;flex-direction:column;gap:3px;font:700 15px/1 Manrope,Inter,sans-serif;color:var(--ink)}
.hdr-tel small{font:500 12px/1 Inter,sans-serif;color:var(--mute)}
.hdr-tel:hover span{color:var(--blauw)}
.hdr-cta{display:inline-flex}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:var(--navy)}
.burger i{position:relative;width:18px;height:12px;border-radius:0;background:none}
.burger b{position:absolute;left:0;right:0;width:auto;height:2px;margin:0;border-radius:2px;background:#fff;transform:none}
.burger b:nth-child(1){top:0}
.burger b:nth-child(2){top:5px}
.burger b:nth-child(3){top:10px;left:6px}

/* uitklap Arbeidsrecht */
.mega-in.mg3{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 300px;gap:20px;padding:24px var(--gut) 30px}
.mg3-k{font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.mg3-l{list-style:none;margin:0;padding:0}
.mg3-l a{display:block;padding:12px 0;border-top:1px solid var(--lijn);text-decoration:none}
.mg3-l li:last-child a{border-bottom:1px solid var(--lijn)}
.mg3-l b{display:block;font:700 16px/1.25 Manrope,Inter,sans-serif;color:var(--ink);transition:color .25s}
.mg3-l span{display:block;margin-top:3px;font-size:13.5px;color:var(--mute)}
.mg3-l a:hover b{color:var(--blauw)}
.mg3-check{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--ijs);text-decoration:none}
.mg3-img{height:150px;overflow:hidden}
.mg3-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mg3-check:hover .mg3-img img{transform:scale(1.05)}
.mg3-ck{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.mg3-ck em{align-self:flex-start;font:600 12px/1 Inter,sans-serif;font-style:normal;color:var(--blauw);background:#fff;padding:5px 9px;border-radius:999px;margin-bottom:4px}
.mg3-ck b{font:700 18px/1.2 Manrope,Inter,sans-serif;color:var(--ink)}
.mg3-ck span{font-size:14px;color:var(--ink-2)}
.mg3-rene{border-radius:18px;background:var(--navy);padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mg3-rene img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.mg3-rene p{display:flex;flex-direction:column;gap:4px}
.mg3-rene b{font:700 17px/1.25 Manrope,Inter,sans-serif;color:#fff}
.mg3-rene span{font-size:14px;line-height:1.45;color:rgba(255,255,255,.75)}
.mg3-rene .btn-wit{box-shadow:none;margin-top:auto}

@media (max-width:1180px){.tb-l{display:none}.tb-in{justify-content:flex-end}}
@media (max-width:1279px){.hdr-tel{display:none}}
@media (max-width:1120px){.burger{display:inline-flex}.hdr-r{gap:12px}}

/* telefoonmenu: wit, twee keuzetegels, links, onderin bellen */
.mm{background:#fff;color:var(--ink);clip-path:none;opacity:0;transition:opacity .3s,visibility 0s .3s}
.mm.open{clip-path:none;opacity:1;transition:opacity .3s}
.mm-top{background:#fff;border-bottom:1px solid var(--lijn)}
.mm-logo{height:42px;color:var(--grijs)}
.mclose{width:44px;height:44px;padding:0;border-radius:50%;background:var(--ijs);justify-content:center}
.mclose svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.mm-body{padding:16px var(--gut) 0}
.mm-tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mm-tegels a{position:relative;display:flex;flex-direction:column;gap:6px;min-height:118px;padding:14px 14px 48px;border-radius:18px;text-decoration:none}
.mm-tegels small{font:600 12.5px/1.2 Inter,sans-serif;opacity:.75}
.mm-tegels b{font:700 17px/1.2 Manrope,Inter,sans-serif;letter-spacing:-.01em}
.mm-tegels i{position:absolute;left:14px;bottom:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.mm-tegels svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mt-adv{background:var(--navy);color:#fff}
.mt-adv i{background:rgba(255,255,255,.16)}
.mt-dig{background:var(--ijs);color:var(--ink)}
.mt-dig i{background:var(--blauw);color:#fff}
.mm-links{margin:14px 0 0!important;display:block}
.mm-links a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--lijn);font:600 19px/1.2 Manrope,Inter,sans-serif;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.mm-links a span{font:500 13.5px/1 Inter,sans-serif;color:var(--mute)}
.mm-foot{background:#fff;box-shadow:none;border-top:1px solid var(--lijn);gap:12px}
.mm-rene{display:flex;align-items:center;gap:12px}
.mm-rene img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.mm-rene p{display:flex;flex-direction:column;line-height:1.3}
.mm-rene b{font:700 15px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.mm-rene span{font-size:13.5px;color:var(--mute)}

@media (max-width:760px){
  :root{--top:0px}
  .topbar{display:none}
  .logo svg{height:42px}
  .hdr-r{gap:8px}
  .hdr-cta{display:none}
  .hdr-tel{display:flex;width:44px;height:44px;justify-content:center}
  .hdr-tel i{width:44px;height:44px}
  .hdr-tel span{display:none}
  .hdr-tel svg{width:18px;height:18px}
  .burger{width:44px;height:44px;padding:0}
}
.mm-tegels b span{display:block;font:600 14px/1.3 Inter,sans-serif;opacity:.75;margin-top:3px}

/* =====================================================================
   v3 menu: paneel dat van rechts inschuift over een zachte waas; de inhoud
   volgt rustig na elkaar. Sluiten gaat in één beweging terug.
   ===================================================================== */
.mm-bg{position:fixed;inset:0;z-index:94;background:rgba(8,33,58,.42);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.mm-bg.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.mm{inset:0 0 0 auto;width:min(440px,88vw);opacity:1;visibility:hidden;transform:translateX(100%);box-shadow:-24px 0 60px rgba(11,44,74,.16);transition:transform .55s cubic-bezier(.32,.72,0,1),visibility 0s .55s}
.mm.open{visibility:visible;transform:none;transition:transform .65s cubic-bezier(.32,.72,0,1)}
.mm-top{padding:0 clamp(18px,5vw,28px)}
.mm-body{padding:16px clamp(18px,5vw,28px) 0}
.mm-foot{padding:14px clamp(18px,5vw,28px) calc(16px + env(safe-area-inset-bottom))}
.mm li,.mm-foot > *,.mm-logo{opacity:0;transform:translateX(28px);transition:opacity .2s,transform .2s}
.mm.open li,.mm.open .mm-foot > *,.mm.open .mm-logo{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .75s var(--ease)}
.mm.open .mm-logo{transition-delay:.12s}
.mm.open .mm-tegels li:nth-child(1){transition-delay:.16s}
.mm.open .mm-tegels li:nth-child(2){transition-delay:.21s}
.mm.open .mm-links li:nth-child(1){transition-delay:.26s}
.mm.open .mm-links li:nth-child(2){transition-delay:.3s}
.mm.open .mm-links li:nth-child(3){transition-delay:.34s}
.mm.open .mm-links li:nth-child(4){transition-delay:.38s}
.mm.open .mm-links li:nth-child(5){transition-delay:.42s}
.mm.open .mm-foot > :nth-child(1){transition-delay:.46s}
.mm.open .mm-foot > :nth-child(2){transition-delay:.5s}
.mclose{transition:background-color .3s,transform .5s var(--ease)}
.mclose:hover{background:#dbe9f4;transform:rotate(90deg)}
.mm-links a{transition:color .25s,padding .4s var(--ease)}
.mm-links a:hover{color:var(--blauw);padding-left:6px}
.burger b{transition:transform .4s var(--ease),left .4s var(--ease)}
.burger:hover b:nth-child(3){left:0}
@media (prefers-reduced-motion:reduce){.mm,.mm.open,.mm li,.mm-foot > *{transition:none!important}}

/* menuknop helemaal rechts: zonder zichtbare nav duwt de rechterkant naar de rand */
@media (max-width:1120px){.hdr-r{margin-left:auto}}

/* =====================================================================
   v3 telefoon: hero met langere intro en twee knoppen; menu over het hele scherm
   (geen paneel van rechts), inhoud komt rustig omhoog.
   ===================================================================== */
@media (max-width:760px){
  .hero3 .hero-lead{font-size:15.5px;line-height:1.55}
  .hero3 .btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:18px}
  .hero3 .btns .btn,.hero3 .btns .btn-wit{display:inline-flex;width:100%;height:50px;padding:0 6px 0 18px;justify-content:space-between;font-size:15px}
  .hero3 .btns .btn i{width:36px;height:36px}
  .hero-m{margin-top:14px}

  .mm-bg{display:none}
  .mm{width:100%;inset:0;box-shadow:none;transform:none;opacity:0;transition:opacity .35s var(--ease),visibility 0s .35s}
  .mm.open{opacity:1;transform:none;transition:opacity .35s var(--ease)}
  .mm li,.mm-foot > *,.mm-logo{transform:translateY(14px)}
  .mm.open li,.mm.open .mm-foot > *,.mm.open .mm-logo{transform:none}
}
@media (max-width:760px) and (max-height:700px){
  .hero3 .hero-foto{aspect-ratio:2.2/1}
  .hero3 h1{font-size:31px}
  .hero3 .hero-lead{margin-top:10px}
}

/* =====================================================================
   v3 telefoon: twee manieren naast elkaar, elk met een foto, zodat je in één
   blik ziet wat je kunt kiezen. Desktop houdt de grote kaarten zonder foto.
   ===================================================================== */
.tw-img,.tw-prijs{display:none}
@media (max-width:760px){
  .twee{padding:36px 0 40px}
  .twee .tw-kop{margin-bottom:16px}
  .tw{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
  .tw-k{padding:0;border-radius:20px;overflow:hidden}
  .tw-dig{box-shadow:inset 0 0 0 1px var(--lijn);background:var(--ijs-2)}
  .tw-img{display:block;position:relative;aspect-ratio:4/3.4;margin:0;overflow:hidden}
  .tw-img img{width:100%;height:100%;object-fit:cover}
  .tw-adv .tw-img img{object-position:40% 50%}
  .tw-img em{position:absolute;left:10px;top:10px;font:600 12px/1 Inter,sans-serif;font-style:normal;color:var(--blauw);background:#fff;padding:6px 9px;border-radius:999px;box-shadow:0 4px 12px rgba(11,44,74,.12)}
  .tw-k > .tw-l,.tw-k > h3,.tw-k > .tw-t,.tw-k > .tw-prijs{padding:0 12px}
  .tw-l{margin-top:12px;font-size:11.5px;letter-spacing:.08em}
  .tw-l em{display:none}
  .tw-k h3{margin-top:6px;font-size:17px;line-height:1.2;letter-spacing:-.015em}
  .tw-adv .tw-t{display:none}
  .tw-prijs{display:block;margin-top:6px;font-size:13.5px;color:var(--mute)}
  .tw-prijs b{font:800 17px/1 Manrope,Inter,sans-serif;color:var(--ink)}
  /* acties onderaan, even hoog in beide kaarten */
  .tw-k{display:flex;flex-direction:column}
  .tw-adv .tw-act{margin-top:auto;padding:14px 12px 12px}
  .tw-adv .tw-act .btn{width:100%;height:44px;padding:0 4px 0 14px;justify-content:space-between;font-size:14px}
  .tw-adv .tw-act .btn i{width:34px;height:34px}
  .tw-ch{margin:auto 12px 0;padding:10px 0 8px;border-top:0}
  .tw-ch li{border-bottom:0}
  .tw-ch li + li{border-top:1px solid var(--lijn)}
  .tw-ch a{grid-template-columns:minmax(0,1fr) 30px;gap:8px;padding:9px 0}
  .tw-ch a b,.tw-ch a em{display:none}
  .tw-ch a small{font:700 14.5px/1.2 Manrope,Inter,sans-serif;color:var(--ink)}
  .tw-ch a i{width:30px;height:30px}
  .tw-ch svg{width:14px;height:14px}
}

/* telefoon: kaarten lager (foto 3:2), reviewscore in de advocaatkaart, knoppen dichter bij elkaar */
.tw-score{display:none}
@media (max-width:760px){
  .tw-img{aspect-ratio:3/2}
  .tw-score{display:block;margin-top:6px;padding:0 12px;font-size:13px;color:rgba(255,255,255,.7)}
  .tw-score span{color:#f2a516;font-size:10.5px;letter-spacing:1px;display:block;margin-bottom:3px}
  .tw-score b{color:#fff;font-weight:700}
  .tw-l{font-size:12px;margin-top:11px}
  .tw-k h3{font-size:16.5px;margin-top:5px}
  .tw-adv .tw-act{padding-top:12px}
  .tw-ch{padding-top:6px}
}

/* =====================================================================
   v3 menu-animatie: wit vlak vouwt vanuit de header naar beneden open, de header
   blijft staan en de menuknop wordt een kruisje; de inhoud volgt kort daarna.
   Vervangt het paneel van rechts en de fade.
   ===================================================================== */
.mm-bg{display:none!important}
.mm,.mm.open{inset:var(--mt,66px) 0 0 0;width:auto;height:auto;z-index:58;opacity:1;box-shadow:none;transform:none;background:#fff}
.mm{visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.7,0,.2,1),visibility 0s .5s}
.mm.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.mm-top{display:none}
.mm-body{padding-top:18px}
.hdr.menu-open{box-shadow:0 1px 0 var(--lijn)}
.mm li,.mm-foot > *{opacity:0;transform:translateY(-8px);transition:opacity .15s,transform .15s}
.mm.open li,.mm.open .mm-foot > *{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.mm.open .mm-tegels li:nth-child(1){transition-delay:.18s}
.mm.open .mm-tegels li:nth-child(2){transition-delay:.23s}
.mm.open .mm-links li:nth-child(1){transition-delay:.27s}
.mm.open .mm-links li:nth-child(2){transition-delay:.3s}
.mm.open .mm-links li:nth-child(3){transition-delay:.33s}
.mm.open .mm-links li:nth-child(4){transition-delay:.36s}
.mm.open .mm-links li:nth-child(5){transition-delay:.39s}
.mm.open .mm-foot > :nth-child(1){transition-delay:.42s}
.mm.open .mm-foot > :nth-child(2){transition-delay:.45s}
/* menuknop wordt een kruisje */
.burger b{transition:top .3s var(--ease),left .3s var(--ease),transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] b:nth-child(1){top:5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] b:nth-child(2){opacity:0}
.burger[aria-expanded="true"] b:nth-child(3){top:5px;left:0;transform:rotate(-45deg)}
@media (max-width:760px){
  .mm,.mm.open{inset:var(--mt,66px) 0 0 0;width:auto;opacity:1;transform:none}
  .mm li,.mm-foot > *{transform:translateY(-8px)}
  .mm.open li,.mm.open .mm-foot > *{transform:none}
}
@media (prefers-reduced-motion:reduce){.mm,.mm.open{transition:visibility 0s!important}}
.burger b:first-child,.burger b:last-child{width:auto;margin:0}
.burger b:nth-child(3){right:0}
.burger[aria-expanded="true"] b{left:0;right:0}

/* =====================================================================
   v3 advocaat-sectie: René erbij (portret max 330px, het bestand is 376px),
   korte belofte, drie stappen en één knop.
   ===================================================================== */
.adv-rene{position:relative;max-width:330px;width:100%;justify-self:center;margin:0}
.adv-rene img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);display:block}
.adv-rene figcaption{display:flex;flex-direction:column;gap:3px;margin-top:16px}
.adv-rene figcaption b{font:700 19px/1.2 Manrope,Inter,sans-serif;color:#fff;letter-spacing:-.01em}
.adv-rene figcaption span{font-size:14.5px;color:rgba(255,255,255,.72)}
.adv-rene figcaption a{margin-top:6px;font-size:14px;color:rgba(255,255,255,.85);text-decoration:none}
.adv-rene figcaption a:hover{color:#fff}
.adv-rene figcaption em{font-style:normal;color:#f2a516;letter-spacing:1px;font-size:12px;margin-right:4px}
.adv .med-in{align-items:center}
.adv .med-lead{max-width:34em}
.adv-stap{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.adv-stap li{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.adv-stap i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--lucht);color:var(--navy);font:800 14px/1 Manrope,Inter,sans-serif;font-style:normal}
.adv-stap p{display:flex;flex-direction:column;gap:3px}
.adv-stap b{font:700 15.5px/1.25 Manrope,Inter,sans-serif;color:#fff}
.adv-stap span{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.7)}
.adv .adv-k{margin-top:26px}
@media (max-width:1000px), (orientation:portrait) and (max-width:1100px){
  .adv-rene{justify-self:start;display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:18px;max-width:none;margin-bottom:24px}
  .adv-rene figcaption{margin-top:0}
  .adv-rene .fline{display:none}
}
@media (max-width:760px){
  .adv{padding:40px 0}
  .adv-rene{grid-template-columns:76px minmax(0,1fr);gap:14px;margin-bottom:18px}
  .adv-rene img{border-radius:18px}
  .adv-rene figcaption b{font-size:17px}
  .adv-rene figcaption span{font-size:13.5px}
  .adv-rene figcaption a{margin-top:2px;font-size:13.5px}
  .adv .med-lead{font-size:15.5px;margin-top:10px}
  .adv-stap{grid-template-columns:minmax(0,1fr);gap:0;margin-top:16px;border-top:1px solid rgba(255,255,255,.12)}
  .adv-stap li{flex-direction:row;align-items:center;gap:12px;padding:11px 0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .adv-stap i{width:28px;height:28px;flex:none;font-size:13px}
  .adv-stap b{font-size:15px}
  .adv-stap span{font-size:13.5px}
  .adv .sub-act{margin-top:20px}
  .adv .sub-act .btn{width:100%;justify-content:space-between}
}

/* =====================================================================
   v3 desktop: maten terug naar de vaste schaal (hero-kop max ~52px, hero-foto
   max ~520px en passend op 1366x768, kaartkoppen ~24px, portretten kleiner).
   ===================================================================== */
@media (min-width:761px){
  .hero3{padding:clamp(22px,2.6vw,36px) 0 clamp(44px,4.6vw,68px)}
  .hero3 h1{font-size:clamp(36px,3.6vw,52px)}
  .hero3 .hero-lead{font-size:clamp(16px,1.15vw,17.5px);margin-top:16px}
  .hero3 .btns{margin-top:24px}
  .hero3 .hero-foto{min-height:clamp(360px,calc(100svh - var(--hdr) - var(--top) - 150px),520px)}
  .hero-feiten{margin-top:28px;padding-top:18px}
  .hero-feiten b{font-size:clamp(19px,1.6vw,23px)}
  .foto-q{max-width:300px;padding:14px 16px}
  .foto-q q{font-size:15.5px}

  .tw-k{padding:clamp(22px,2.4vw,32px)}
  .tw-k h3{font-size:clamp(20px,1.7vw,24px);margin-top:10px}
  .tw-t{font-size:15px}
  .tw-v{margin-top:16px}
  .tw-v li{padding:10px 0;font-size:14.5px}
  .tw-q p{font-size:15px}
  .tw-ch a{padding:10px 0}

  .adv-rene{max-width:270px}
  .adv-rene figcaption b{font-size:17px}
  .adv-stap li{padding:14px}

  .over-foto{max-width:240px}
  .over-foto figcaption{margin-top:18px}
  .ook,.over-logos{display:none}

  .rev-score{min-height:220px}
  .rs-n{font-size:clamp(56px,5vw,76px)}
  .rev-stage{min-height:220px}
  .rq blockquote{font-size:clamp(19px,1.6vw,23px)}
}

/* =====================================================================
   v3 desktop, ronde 2: de hele pagina één stap kleiner en gelijk getrokken
   (sectieruimte, koppen, knoppen, header, checks, tarieven, FAQ, checkpagina).
   ===================================================================== */
@media (min-width:761px){
  :root{--sp:clamp(48px,4.8vw,72px);--hdr:70px;--top:34px}
  body{font-size:16px}
  h2{font-size:clamp(25px,2.2vw,32px)}
  h3{font-size:clamp(17.5px,1.35vw,20px)}
  .btn{height:48px;padding-left:22px;gap:12px;font-size:14.5px}
  .btn i{width:34px;height:34px}
  .btn-klein{height:44px;padding-left:18px}
  .btn-klein i{width:30px;height:30px}

  /* header */
  .logo svg{height:48px}
  .nav a,.nav-t{font-size:14.5px}
  .hdr-tel i{width:36px;height:36px}
  .hdr-tel span{font-size:14.5px}
  .hdr-cta{height:42px}
  .topbar{font-size:12.5px}

  /* hero */
  .hero3 h1{font-size:clamp(34px,3.3vw,48px)}
  .hero3 .hero-lead{font-size:clamp(15.5px,1.1vw,17px)}
  .hero3 .hero-foto{min-height:clamp(340px,calc(100svh - var(--hdr) - var(--top) - 160px),480px)}
  .hero-k{font-size:12px;margin-bottom:14px}
  .hero-feiten b{font-size:clamp(18px,1.45vw,21px)}
  .hero-feiten span{font-size:13px}

  /* koppen van secties: kop en intro dichter op elkaar */
  .tw-kop,.rt-kop,.ck-kop,.ks-kop{margin-bottom:clamp(20px,2.2vw,30px)}
  .tw-kop p,.rt-kop p,.ks-kop p,.ck-intro{font-size:15.5px}

  /* twee routes */
  .tw-k h3{font-size:clamp(19px,1.5vw,22px)}
  .tw-l{font-size:12px}

  /* zo werkt het */
  .rt-s b{font-size:15px}
  .rt-s span{font-size:14px}

  /* checks */
  .ck-tabs b{font-size:15px}
  .ck-tabs em{font-size:12.5px}
  .ck-r{padding:14px 4px}
  .ck-r h3{font-size:clamp(16.5px,1.25vw,18.5px)}
  .ck-r p{font-size:14px}
  .ck-r i{width:36px;height:36px}
  .ck-foto{max-height:300px;overflow:hidden}

  /* advocaat en over */
  .adv .med-lead{font-size:15.5px}
  .adv-stap b{font-size:14.5px}
  .adv-stap span{font-size:13px}
  .adv-l li,.adv-l b{font-size:14px}
  .over-cols{font-size:15px}
  .over-q p{font-size:clamp(17px,1.35vw,20px)}

  /* reviews */
  .rs-n{font-size:clamp(50px,4.2vw,66px)}
  .rq blockquote{font-size:clamp(17.5px,1.4vw,21px)}
  .rq figcaption{font-size:14px}

  /* tarieven en FAQ */
  .ks-p b{font-size:clamp(28px,2.4vw,34px)}
  .ks-k li{font-size:14px;padding:7px 0 7px 22px}
  .ks-noot{font-size:13.5px}
  .faq-h{font-size:clamp(22px,1.9vw,27px)}
  .fq button{font-size:15px;padding:13px 0}
  .fq-a > p{font-size:14.5px}

  /* contact */
  .ct-lead{font-size:15.5px}
  .ct-l b{font-size:15px}
  .ct-l span{font-size:13.5px}
  .cf-h{font-size:19px}
  .chips span{height:38px;font-size:14px}
  .f input,.f textarea{padding:11px 13px;font-size:15px}

  /* checkpagina */
  .pg h1{font-size:clamp(32px,3.2vw,44px)}
  .pg-vraag{font-size:clamp(16.5px,1.3vw,19px)}
  .pg-adv-p b{font-size:clamp(28px,2.4vw,34px)}
}
@media (min-width:761px){.ds-kaart .btn{height:46px}}

/* =====================================================================
   v3 desktop: "Twee manieren" net als op de telefoon, maar groter. Twee
   fotokaarten, per kaart één kop, één regel en de actie. Lijstjes, citaat,
   intro en voetnoot weg.
   ===================================================================== */
@media (min-width:761px){
  .tw-kop{margin-bottom:24px}
  .tw-kop p,.tw-v,.tw-q,.tw-noot,.tw-dig .tw-t,.tw-ch .volgt{display:none}
  .tw{gap:16px}
  .tw-k{padding:0;overflow:hidden;display:flex;flex-direction:column}
  .tw-dig{background:#fff;box-shadow:inset 0 0 0 1px var(--lijn)}
  .tw-img{display:block;position:relative;aspect-ratio:2.5/1;margin:0;overflow:hidden}
  .tw-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
  .tw-k:hover .tw-img img{transform:scale(1.03)}
  .tw-adv .tw-img img{object-position:40% 45%}
  .tw-img em{position:absolute;left:16px;top:16px;font:600 12.5px/1 Inter,sans-serif;font-style:normal;color:var(--blauw);background:#fff;padding:7px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(11,44,74,.12)}
  .tw-k > .tw-l,.tw-k > h3,.tw-k > .tw-t,.tw-k > .tw-prijs,.tw-k > .tw-score{padding:0 clamp(22px,2.2vw,30px)}
  .tw-l{margin-top:22px}
  .tw-l em{display:none}
  .tw-k h3{margin-top:8px;font-size:clamp(20px,1.6vw,23px)}
  .tw-adv .tw-t{margin-top:8px;font-size:15px;color:rgba(255,255,255,.75)}
  .tw-score{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:rgba(255,255,255,.75)}
  .tw-score span{color:#f2a516;font-size:12px;letter-spacing:1px}
  .tw-score b{color:#fff}
  .tw-prijs{display:block;margin-top:8px;font-size:14.5px;color:var(--mute)}
  .tw-prijs b{font:800 21px/1 Manrope,Inter,sans-serif;color:var(--ink)}
  .tw-adv .tw-act{margin-top:auto;padding:22px clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px)}
  .tw-ch{margin:auto clamp(22px,2.2vw,30px) 0;padding:14px 0 clamp(14px,1.6vw,22px);border-top:0}
  .tw-ch li{border-bottom:0}
  .tw-ch li + li{border-top:1px solid var(--lijn)}
  .tw-ch a{grid-template-columns:minmax(0,1fr) 36px;padding:11px 0}
  .tw-ch a b,.tw-ch a em{display:none}
  .tw-ch a small{font:700 16px/1.2 Manrope,Inter,sans-serif;color:var(--ink);transition:color .25s}
  .tw-ch a:hover small{color:var(--blauw)}
}

/* Over De Wit zonder portret (René staat al in de advocaat-sectie) en na de reviews */
.over-in.over-solo{grid-template-columns:minmax(0,1fr)}
.over-solo .over-txt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,64px);align-items:start}
.over-solo h2{grid-column:1;grid-row:1}
.over-solo .over-q{grid-column:1;grid-row:2;margin-top:18px}
.over-solo .over-cols{grid-column:2;grid-row:1/3;margin-top:0}
@media (max-width:1000px){
  .over-solo .over-txt{display:block}
  .over-solo .over-cols{margin-top:14px}
}
.over-solo .over-cols{grid-template-columns:minmax(0,1fr);gap:12px}

/* reviews: initialen in huisstijlkleuren i.p.v. (niet bestaande) foto's van echte reviewers */
.rq figcaption{display:flex;align-items:center;gap:12px}
.rq-av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 Manrope,Inter,sans-serif;letter-spacing:.02em;color:#fff;background:var(--blauw);box-shadow:0 0 0 3px #fff}
.rq:nth-child(2) .rq-av{background:var(--navy)}
.rq:nth-child(3) .rq-av{background:#3a8fc7}
.rq:nth-child(4) .rq-av{background:var(--navy-2)}
.rq:nth-child(5) .rq-av{background:#5b9fcf}
.rq-w{display:flex;flex-direction:column;line-height:1.35}
.rq-w b{color:var(--ink);font-weight:700}
.rs-av{display:flex;margin:auto 0 10px}
.rs-av i{width:32px;height:32px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;font:700 11.5px/1 Manrope,Inter,sans-serif;font-style:normal;color:var(--blauw);background:#fff;box-shadow:0 0 0 2px var(--blauw)}
.rs-av i:first-child{margin-left:0}
.rs-av i:nth-child(2){background:#d6e8f5}
.rs-av i:nth-child(4){background:#d6e8f5}
.rs-av i:last-child{background:var(--navy);color:#fff;font-size:10.5px}
@media (max-width:760px){
  .rq-av{width:40px;height:40px;font-size:14.5px}
  .rs-av i{width:28px;height:28px;font-size:10.5px}
}
@media (min-width:761px){.rs-av{margin:12px 0 8px}}
/* reviewfoto's (Unsplash, placeholder tot René echte foto's met toestemming aanlevert) */
img.rq-av{object-fit:cover;background:var(--ijs)}
.rs-av img{width:32px;height:32px;margin-left:-8px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--blauw)}
.rs-av img:first-child{margin-left:0}
.rs-av i{margin-left:-8px}
@media (max-width:760px){.rs-av img{width:28px;height:28px}}
@media (min-width:761px){img.rq-av{width:54px;height:54px}}

/* reviews staan nu hoger, direct na Twee manieren: wit, zodat ze niet in "Zo werkt het" overlopen */
.rev{background:#fff}
.twee + .rev{padding-top:0}

/* =====================================================================
   v3 Zo werkt het: drie stappen op een lijn, de uitkomst als stoplicht
   zichtbaar, de advocaat als optie, en één knop bovenaan.
   ===================================================================== */
.zw-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap}
.zw-k{font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blauw);margin-bottom:10px}
.zw-kop h2{max-width:16em}
.zw-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.zw-cta span{font-size:13.5px;color:var(--mute)}
.zw{list-style:none;margin:clamp(24px,2.8vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr);gap:14px;position:relative}
.zw::before{content:"";position:absolute;left:44px;right:12%;top:37px;height:2px;background:repeating-linear-gradient(90deg,var(--blauw) 0 6px,transparent 6px 12px);opacity:.35}
.zw-s{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;background:#fff;box-shadow:0 1px 0 var(--lijn),0 10px 30px rgba(11,44,74,.06);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.zw-s:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--lijn),0 18px 40px rgba(11,44,74,.1)}
.zw-n{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blauw);color:#fff;font:800 14px/1 Manrope,Inter,sans-serif;box-shadow:0 0 0 5px #fff}
.zw-i{position:absolute;right:20px;top:20px;width:26px;height:26px;fill:none;stroke:var(--blauw);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.zw-s h3{margin-top:8px;font-size:18px}
.zw-s p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.zw-chip{align-self:flex-start;margin-top:auto;font:600 12px/1 Inter,sans-serif;font-style:normal;color:var(--blauw);background:var(--ijs);padding:6px 10px;border-radius:999px}
.zw-licht{list-style:none;margin:4px 0 2px;padding:10px 12px;border-radius:14px;background:var(--ijs-2);box-shadow:inset 0 0 0 1px var(--lijn);display:flex;flex-direction:column;gap:7px}
.zw-licht li{display:flex;align-items:center;gap:9px;font:600 13px/1.3 Inter,sans-serif;color:var(--ink)}
.zw-licht i{flex:none;width:10px;height:10px;border-radius:50%}
.zw-licht .r i{background:var(--rood);box-shadow:0 0 0 3px rgba(217,58,43,.15)}
.zw-licht .o i{background:var(--oranje);box-shadow:0 0 0 3px rgba(224,138,18,.15)}
.zw-licht .g i{background:var(--groen);box-shadow:0 0 0 3px rgba(31,154,82,.15)}
.zw-adv{background:var(--navy);box-shadow:none;color:rgba(255,255,255,.75)}
.zw-adv .zw-n{background:var(--lucht);color:var(--navy);box-shadow:0 0 0 5px var(--navy)}
.zw-adv img{position:absolute;right:20px;top:18px;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.zw-adv h3{color:#fff}
.zw-adv p{color:rgba(255,255,255,.75)}
.zw-adv a{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:700 14px/1 Manrope,Inter,sans-serif;color:var(--lucht);text-decoration:none}
.zw-adv a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.zw-adv a:hover svg{transform:translateX(3px)}
@media (max-width:1000px){
  .zw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zw::before{display:none}
}
.zw-chip b{font-weight:800}

/* =====================================================================
   v3 Zo werkt het, versie 2: links een levend scherm van de check (kiezen,
   vragen + upload, uitkomst), rechts drie stappen die meelopen met een
   tijdlijntje. Rust door één beeld en één kolom tekst.
   ===================================================================== */
.zw2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5.5vw,88px);align-items:center}
.zw2-beeld{position:relative;padding:0 28px 34px 0}
.zw2-scherm{position:relative;border-radius:22px;background:#fff;box-shadow:0 1px 0 var(--lijn),0 30px 70px rgba(11,44,74,.14);overflow:hidden}
.zw2-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--lijn);font-size:13px}
.zw2-bar > span{display:flex;gap:5px}
.zw2-bar > span i{width:9px;height:9px;border-radius:50%;background:#e3e8ee}
.zw2-bar b{font:800 14px/1 Manrope,Inter,sans-serif;color:var(--lp);letter-spacing:-.01em}
.zw2-bar em{margin-left:auto;font-style:normal;font-weight:600;color:var(--mute);background:var(--ijs-2);padding:5px 10px;border-radius:999px}
.zw2-body{position:relative;height:300px}
.zw2-st{position:absolute;inset:0;padding:22px 24px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.zw2-scherm[data-stap="1"] .zw2-st1,.zw2-scherm[data-stap="2"] .zw2-st2,.zw2-scherm[data-stap="3"] .zw2-st3{opacity:1;transform:none;transition-delay:.12s}
.zw2-t{font:700 17px/1.2 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.01em}
.zw2-keus{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zw2-keus span{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--lijn);font:700 15px/1.2 Manrope,Inter,sans-serif;color:var(--ink)}
.zw2-keus small{font:500 12.5px/1.3 Inter,sans-serif;color:var(--mute)}
.zw2-keus .on{box-shadow:inset 0 0 0 2px var(--blauw);background:var(--ijs-2);position:relative}
.zw2-keus .on::after{content:"";position:absolute;right:12px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.zw2-prijs{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--ijs-2)}
.zw2-prijs span{font-size:14px;color:var(--mute)}
.zw2-prijs b{font:800 22px/1 Manrope,Inter,sans-serif;color:var(--ink)}
.zw2-v{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--lijn);font-size:14px}
.zw2-v span{color:var(--mute)}
.zw2-v b{font-weight:600;color:var(--ink)}
.zw2-up{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ijs-2)}
.zw2-doc{width:38px;height:44px;border-radius:8px;display:grid;place-items:center;background:#fdecea;color:var(--rood);font:800 11px/1 Manrope,Inter,sans-serif;flex:none}
.zw2-upt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.zw2-upt b{font:600 13.5px/1.2 Inter,sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zw2-upt i{display:block;height:6px;border-radius:6px;background:#dfe7ef;overflow:hidden}
.zw2-upt s{display:block;height:100%;width:100%;background:var(--groen);border-radius:inherit;transform-origin:left;transform:scaleX(1)}
.zw2-scherm[data-stap="2"] .zw2-upt s{animation:zwUp 2.2s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes zwUp{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
.zw2-licht{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.zw2-licht li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:var(--ijs-2);font:600 14px/1.3 Inter,sans-serif;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ease)}
.zw2-scherm[data-stap="3"] .zw2-licht li{opacity:1;transform:none}
.zw2-scherm[data-stap="3"] .zw2-licht li:nth-child(1){transition-delay:.3s}
.zw2-scherm[data-stap="3"] .zw2-licht li:nth-child(2){transition-delay:.45s}
.zw2-scherm[data-stap="3"] .zw2-licht li:nth-child(3){transition-delay:.6s}
.zw2-licht i{flex:none;width:11px;height:11px;border-radius:50%}
.zw2-licht .r i{background:var(--rood);box-shadow:0 0 0 4px rgba(217,58,43,.14)}
.zw2-licht .o i{background:var(--oranje);box-shadow:0 0 0 4px rgba(224,138,18,.14)}
.zw2-licht .g i{background:var(--groen);box-shadow:0 0 0 4px rgba(31,154,82,.14)}
.zw2-tekst{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--lijn)}
.zw2-tekst span{font:600 12.5px/1 Inter,sans-serif;color:var(--mute);margin-bottom:2px}
.zw2-tekst i{display:block;height:7px;border-radius:7px;background:#e6ecf2}
.zw2-tekst i.kort{width:55%}
.zw2-adv{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;background:var(--navy);box-shadow:0 20px 40px rgba(11,44,74,.25);animation:zwZweef 6s ease-in-out infinite}
.zw2-adv img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.zw2-adv p{display:flex;flex-direction:column;line-height:1.3}
.zw2-adv b{font:700 14.5px/1.3 Manrope,Inter,sans-serif;color:#fff}
.zw2-adv span{font-size:13px;color:rgba(255,255,255,.7)}
@keyframes zwZweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.zw2-txt h2{margin-top:2px}
.zw2-stappen{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--lijn)}
.zw2-stappen li{position:relative;border-bottom:1px solid var(--lijn)}
.zw2-stappen button{width:100%;display:flex;gap:18px;align-items:flex-start;padding:18px 0;border:0;background:none;text-align:left;cursor:pointer}
.zw2-n{font:800 14px/1.6 Manrope,Inter,sans-serif;color:var(--mute);letter-spacing:.04em;transition:color .3s}
.zw2-stappen button > span:last-child{display:flex;flex-direction:column;gap:6px}
.zw2-stappen b{font:700 19px/1.25 Manrope,Inter,sans-serif;color:var(--ink-2);letter-spacing:-.015em;transition:color .3s}
.zw2-stappen small{display:block;overflow:hidden;max-height:0;font-size:14.5px;line-height:1.5;color:var(--mute);transition:max-height .45s var(--ease)}
.zw2-stappen li.on small{max-height:80px}
.zw2-stappen li.on .zw2-n{color:var(--blauw)}
.zw2-stappen li.on b{color:var(--ink)}
.zw2-stappen button:hover b{color:var(--blauw)}
.zw2-tijd{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--blauw);transform:scaleX(0);transform-origin:left}
.zw2-stappen li.on .zw2-tijd{transform:scaleX(1)}
.zw2-stappen li.loop .zw2-tijd{animation:zwTijd 4.2s linear both}
@keyframes zwTijd{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.zw2-cta{margin-top:26px;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.zw2-cta span{font-size:13.5px;color:var(--mute)}
@media (max-width:1000px){.zw2{grid-template-columns:minmax(0,1fr)}.zw2-beeld{max-width:560px}}
@media (prefers-reduced-motion:reduce){.zw2-adv{animation:none}}
.zw2-beeld{padding:0 0 46px 0}
.zw2-body{height:282px}
.zw2-adv{right:-18px;bottom:0}
.zw2-krijg{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.zw2-krijg span{font-size:13px;color:var(--mute);margin-right:4px}
.zw2-krijg em{font:600 12.5px/1 Inter,sans-serif;font-style:normal;color:var(--groen);background:#e8f5ed;padding:6px 10px 6px 24px;border-radius:999px;position:relative}
.zw2-krijg em::before{content:"";position:absolute;left:10px;top:50%;width:8px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(-45deg)}

/* reviews: kop erboven */
.twee + .rev{padding-top:clamp(28px,3.4vw,48px)}
.rev-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,32px)}
.rev-kop h2{max-width:15em}
.rev-sub{max-width:30em;font-size:15.5px;color:var(--ink-2)}
@media (max-width:760px){
  .rev-kop{margin-bottom:16px}
  .rev-kop h2{font-size:24px}
  .rev-sub{display:none}
  .zw-k{font-size:12px}
}

/* =====================================================================
   v3 Zo werkt het, versie 3: rustig en betrouwbaar. Echte foto met de lijn
   uit het logo, drie genummerde stappen in gewone taal, één knop.
   Geen nagebouwd app-scherm of automatische animatie meer.
   ===================================================================== */
.zw3{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:center}
.zw3-foto{aspect-ratio:4/4.6;border-radius:var(--r);margin:0}
.zw3-foto img{width:100%;height:100%;object-fit:cover;object-position:45% 50%;border-radius:inherit}
.zw3-txt h2{margin-top:2px;max-width:15em}
.zw3-stappen{list-style:none;margin:26px 0 0;padding:0;counter-reset:none}
.zw3-stappen li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:18px;padding:18px 0;border-top:1px solid var(--lijn)}
.zw3-stappen li:last-child{border-bottom:1px solid var(--lijn)}
.zw3-n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--blauw);color:var(--blauw);font:800 16px/1 Manrope,Inter,sans-serif}
.zw3-stappen h3{font-size:18px;margin-top:2px}
.zw3-stappen p{margin-top:5px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:36em}
.zw3-noot{margin-top:18px;font-size:14px;line-height:1.5;color:var(--mute);max-width:40em}
.zw3-cta{margin-top:22px;display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap}
.zw3-link{font:700 14.5px/1.3 Manrope,Inter,sans-serif;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--lijn);padding-bottom:2px;transition:color .25s,border-color .25s}
.zw3-link:hover{color:var(--blauw);border-color:var(--blauw)}
@media (max-width:1000px){.zw3{grid-template-columns:minmax(0,1fr)}.zw3-foto{aspect-ratio:16/9}}

/* =====================================================================
   v3 Kies je check: geen tabs met één check meer, maar de live checks als
   volle productkaarten naast elkaar (foto, vraag, wat je krijgt, prijs, knop),
   met daaronder een rustige spoedregel.
   ===================================================================== */
.ck2-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,34px)}
.ck2-kop > p{max-width:30em;font-size:15.5px;color:var(--ink-2)}
.ck2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.ck2-k{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--lijn),0 12px 30px rgba(11,44,74,.06);text-decoration:none;color:inherit;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ck2-k:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--lijn),0 22px 46px rgba(11,44,74,.12)}
.ck2-img{position:relative;display:block;aspect-ratio:2.4/1;overflow:hidden}
.ck2-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ck2-k:hover .ck2-img img{transform:scale(1.03)}
.ck2-img em{position:absolute;left:16px;top:16px;font:600 12.5px/1 Inter,sans-serif;font-style:normal;color:var(--ink);background:#fff;padding:7px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(11,44,74,.12)}
.ck2-in{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.2vw,28px)}
.ck2-in h3{font-size:clamp(20px,1.6vw,23px);transition:color .25s}
.ck2-k:hover h3{color:var(--blauw)}
.ck2-vraag{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.ck2-krijg{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:16px 0 20px;padding-top:16px;border-top:1px solid var(--lijn)}
.ck2-krijg span{position:relative;padding-left:24px;font-size:14px;line-height:1.4;color:var(--ink)}
.ck2-krijg span::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--ijs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006cae' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.ck2-voet{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ck2-prijs{display:flex;flex-direction:column;gap:3px}
.ck2-prijs b{font:800 26px/1 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.ck2-prijs small{font-size:13px;color:var(--mute)}
.ck2-spoed{margin-top:16px;display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;padding:16px 20px;border-radius:20px;background:var(--ijs)}
.ck2-spoed img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.ck2-spoed p{flex:1;min-width:240px;display:flex;flex-direction:column;line-height:1.35}
.ck2-spoed b{font:700 16px/1.3 Manrope,Inter,sans-serif;color:var(--ink)}
.ck2-spoed span{font-size:14px;color:var(--mute)}
.ck2-spoed .btn-wit{box-shadow:none}
.ck2-link{font:700 14px/1.3 Manrope,Inter,sans-serif;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--lijn);padding-bottom:2px}
.ck2-link:hover{color:var(--blauw);border-color:var(--blauw)}
.ck2-img img[src$="contract.jpg"]{object-position:50% 18%}

/* =====================================================================
   v3 rustiger: "Zo werkt het" is een dunne stappenstrook boven de checks,
   de advocaat-sectie zonder lijstje, tarieven als één licht paneel.
   ===================================================================== */
.ck2-stap{list-style:none;margin:0 0 16px;padding:14px 20px;display:flex;align-items:center;gap:10px 28px;flex-wrap:wrap;border-radius:18px;background:var(--ijs)}
.ck2-stap li{display:flex;align-items:center;gap:10px}
.ck2-stap li + li::before{content:"";width:18px;height:1.5px;background:var(--blauw);opacity:.35;margin-right:8px}
.ck2-stap i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blauw);box-shadow:inset 0 0 0 1.5px var(--blauw);font:800 12.5px/1 Manrope,Inter,sans-serif;font-style:normal}
.ck2-stap span{display:flex;flex-direction:column;line-height:1.25;font-size:13px;color:var(--mute)}
.ck2-stap b{font:700 14.5px/1.25 Manrope,Inter,sans-serif;color:var(--ink)}
.ck2-stap-adv i{background:var(--navy);color:#fff;box-shadow:none}

@media (min-width:761px){
  .ks{gap:0;border-radius:var(--r);overflow:hidden;background:var(--ijs)}
  .ks-k{border-radius:0;background:none;color:var(--ink-2);padding:clamp(20px,2.2vw,28px)}
  .ks-k + .ks-k{border-left:1px solid var(--lijn)}
  .ks-l,.ks-dw .ks-l{color:var(--blauw)}
  .ks-p{color:var(--ink)}
  .ks-p span{color:var(--mute)}
  .ks-k ul{display:none}
}

/* =====================================================================
   v3 rustiger, ronde 2: de extra's eruit. Geen citaatkaartje op de hero-foto,
   geen gezichtjes en extra knop bij de score, geen stappenkaartjes bij de
   advocaat (die staan al bij Kies je check), het lijntje alleen nog in de hero.
   ===================================================================== */
.foto-q,.rs-av,.rev-cta,.adv-stap{display:none!important}
.rev-stage{padding-bottom:56px}
.adv .med-lead{margin-top:14px}
.adv .sub-act{margin-top:24px}
@media (min-width:761px){
  .adv{padding:clamp(52px,5vw,76px) 0}
  .adv .med-in{grid-template-columns:auto minmax(0,1fr);gap:clamp(36px,5vw,72px)}
  .adv-rene{max-width:240px}
}

/* =====================================================================
   v3 René-sectie (advocaat + over in één) en nieuwe tarieven
   ===================================================================== */
.rene{position:relative}
.rene #over{position:absolute;top:0}
.rn-k{font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--lucht);margin-bottom:10px}
.rene .rn-bio{max-width:36em}
.rn-q{margin:20px 0 0;padding:2px 0 2px 18px;border-left:2px solid var(--lucht)}
.rn-q p{font:700 clamp(17px,1.4vw,20px)/1.4 Manrope,Inter,sans-serif;color:#fff;letter-spacing:-.01em}
.rn-adv{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:16px}
.rn-adv p{display:flex;flex-direction:column;gap:4px;max-width:36em}
.rn-adv b{font:700 16px/1.3 Manrope,Inter,sans-serif;color:#fff}
.rn-adv span{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.rn-adv .sub-act{margin-top:0}
@media (max-width:760px){
  .rene .rn-bio{display:none}
  .rn-q{margin-top:14px}
  .rn-q p{font-size:16.5px}
  .rn-adv{margin-top:18px;padding-top:16px;gap:14px}
  .rn-adv b{font-size:15.5px}
  .rn-adv span{font-size:14px}
}

/* tarieven: twee heldere prijskaarten, daaronder één regel */
.pr-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,30px)}
.pr-kop > p{max-width:30em;font-size:15.5px;color:var(--ink-2)}
.pr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pr-k{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,32px);border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--lijn),0 12px 30px rgba(11,44,74,.05)}
.pr-l{font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--blauw)}
.pr-p{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.pr-p b{font:800 clamp(34px,3vw,44px)/1 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.03em}
.pr-p small,.pr-p span{font-size:14px;color:var(--mute)}
.pr-w{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:28em}
.pr-a{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:700 14.5px/1 Manrope,Inter,sans-serif;color:var(--blauw);text-decoration:none}
.pr-a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.pr-a:hover svg{transform:translateX(3px)}
.pr-adv{background:var(--navy);box-shadow:none}
.pr-adv .pr-l{color:var(--lucht)}
.pr-adv .pr-p b{color:#fff}
.pr-adv .pr-p small,.pr-adv .pr-p span{color:rgba(255,255,255,.6)}
.pr-adv .pr-w{color:rgba(255,255,255,.75)}
.pr-adv .pr-a{color:var(--lucht)}
.pr-noot{margin-top:14px;font-size:14px;color:var(--mute)}
@media (max-width:760px){
  .pr-kop{margin-bottom:16px}
  .pr-kop > p{font-size:15px}
  .pr{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pr-k{padding:16px;border-radius:18px;gap:6px}
  .pr-l{font-size:11.5px;letter-spacing:.08em}
  .pr-p{flex-wrap:wrap;gap:2px 6px}
  .pr-p b{font-size:28px}
  .pr-p small,.pr-p span{font-size:12.5px}
  .pr-w{font-size:13.5px}
  .pr-a{font-size:13.5px}
  .pr-noot{font-size:13.5px}
}
@media (max-width:760px){.pr-l{font-size:12px}}

/* =====================================================================
   v4 (25-10-2026): René's opzet. Hero met zijn foto, werkwijze uit v1,
   "Contact dat u het beste past", reviews zonder portretjes, checks uit v2,
   advocaatblok licht, over (v3), kosten uit v1, FAQ, plan een gesprek.
   ===================================================================== */

/* hero: tekst links, portret rechts (niet groter dan de foto zelf, 376 px) */
.hero4{padding:clamp(28px,3.4vw,52px) 0 clamp(60px,6vw,92px)}
.hero4 .hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,96px)}
.hero4 h1{font-size:clamp(38px,4.3vw,62px)}
.hero4 .hero-lead{max-width:30em;margin-top:18px;font-size:clamp(16.5px,1.2vw,18px)}
.hero4 .btns{margin-top:28px}
.h4-strip{max-width:600px}
.h4-port{position:relative;justify-self:end;width:100%;max-width:340px;margin:0 clamp(0px,3vw,48px) 0 0}
.h4-img{position:relative;border-radius:var(--r)}
.h4-img > img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:inherit}
.h4-port figcaption{margin-top:24px;display:flex;flex-direction:column;gap:2px;padding-left:2px}
.h4-port figcaption b{font:700 17px/1.25 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.01em}
.h4-port figcaption span{font-size:14.5px;color:var(--mute)}
html.anim .h4-port.rv{transform:translateY(16px);transition:opacity 1.1s var(--ease) .15s,transform 1.3s var(--ease) .15s}
html.anim .h4-port.rv.in{transform:none}

/* diensten in het uitklapmenu: vier tegels, twee per rij */
.mg4{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
.mg4 .mg-t{padding:12px}

/* telefoonmenu: diensten als vier tegels */
.mm-k4{margin:20px 0 8px;font:700 12.5px/1 Manrope,Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mm-dienst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mm-dienst a{display:block;padding:13px 14px;border-radius:14px;background:var(--ijs);font:700 15px/1.2 Manrope,Inter,sans-serif;color:var(--ink);text-decoration:none}
.mm-dienst a:active{background:#e1ecf5}

/* contact dat u het beste past: rechts de digitale check met keuze werkgever/werknemer */
.tw-kz .kz-seg{grid-template-columns:repeat(2,minmax(0,1fr));background:var(--ijs);box-shadow:none}
.tw-kz .kz-seg button{height:42px}
.tw-kz .kz-lijst{min-height:0;margin-top:10px}
.tw-kz .kz-lijst a{background:var(--ijs-2);box-shadow:inset 0 0 0 1px var(--lijn)}
.tw-kz .kz-lijst a:hover{box-shadow:inset 0 0 0 1.5px var(--blauw)}
.tw-kz .kz-lijst i{background:#fff}
.tw-kz .kz-voet{margin-top:auto;padding-top:14px}
@media (min-width:761px){
  .tw-kz > .kz-seg,.tw-kz > .kz-lijst,.tw-kz > .kz-voet{margin-left:clamp(22px,2.2vw,30px);margin-right:clamp(22px,2.2vw,30px)}
  .tw-kz > .kz-seg{margin-top:18px}
  .tw-kz > .kz-voet{margin-top:auto;margin-bottom:clamp(22px,2.2vw,30px);border-top:1px solid var(--lijn)}
  .tw-kz > .kz-lijst{margin-bottom:18px}
  .tw-adv .tw-v{display:grid;gap:8px;margin:18px clamp(22px,2.2vw,30px) 0;padding:0;list-style:none}
}

/* kies je check: stroomschema uit v2 bovenaan, tabs direct boven de lijst */
.ck4{background:var(--ijs)}
.ck4 .ck-kop{align-items:flex-end}
.ck-sub{max-width:30em;font-size:16.5px}
.ck4 .rt{margin-top:clamp(22px,2.6vw,34px)}
.ck4 .rt-adv{background:var(--ijs-2)}
.ck4 .ck-grid{margin-top:clamp(24px,3vw,40px);align-items:start}
.ck4 .ck-tabs{margin-bottom:18px}
.ck4 .ck-tabs button{background:#fff}
.ck4 .ck-tabs button.on{background:var(--blauw)}
.ck4 .ck-intro{margin-bottom:6px}
.ck-krijg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.ck-krijg span{position:relative;padding-left:20px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.ck-krijg span::before{content:"";position:absolute;left:2px;top:.28em;width:11px;height:6px;border-left:2px solid var(--blauw);border-bottom:2px solid var(--blauw);transform:rotate(-45deg)}
.ck4 .ck-r{padding:22px 4px}

/* de toegevoegde waarde van een advocaat: licht, zodat het niet tegen Over aan plakt */
.adv4{background:#fff;color:var(--ink-2)}
.adv4 h2{color:var(--ink)}
.adv4 .med-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.adv4 .med-foto{aspect-ratio:4/4.4}
.adv4 .adv-k{margin-top:26px;color:var(--blauw)}
.adv4 .adv-l li{border-top-color:var(--lijn);color:var(--ink-2)}
.adv4 .adv-l li:last-child{border-bottom-color:var(--lijn)}
.adv4 .adv-l b{color:var(--ink)}
.adv4 .sub-act{margin-top:24px}
.adv4 .sub-bel{color:var(--mute)}
.adv4 .sub-bel b{color:var(--ink)}
.adv4 .sub-bel:hover,.adv4 .sub-bel:hover b{color:var(--blauw)}

/* kosten (v1) met de digitale check op de plek van het abonnement */
.tar4 .tar-kop .zw-k{margin-bottom:10px}

/* productpagina */
.pg-apart{margin-top:14px;font-size:13.5px;color:var(--mute)}
.vb-merk{font:800 13px/1 Manrope,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--blauw)}
.kz-wat{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:34em}
@media (min-width:761px){.tw-kz > .kz-wat{margin-left:clamp(22px,2.2vw,30px);margin-right:clamp(22px,2.2vw,30px)}}

/* v4 tablet en telefoon */
.h4-sc{display:none;margin-top:4px;font-size:13.5px;color:var(--ink-2);text-decoration:none}
.h4-sc em{font-style:normal;color:#f2a516;letter-spacing:1px;margin-right:2px}
.h4-sc b{font-weight:700;color:var(--ink)}
@media (min-width:761px){.tw-kz .tw-ch{display:none}}
@media (max-width:1000px){
  .hero4 .hero-in{grid-template-columns:minmax(0,1fr);gap:30px}
  .h4-port{justify-self:start;max-width:none;margin:0;display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center}
  .h4-img .fline{display:none}
  .h4-img > img{border-radius:18px}
  .h4-port figcaption{margin-top:0}
  .adv4 .med-in{grid-template-columns:minmax(0,1fr)}
  .adv4 .med-foto{display:none}
}
@media (max-width:760px){
  .hero4{padding:16px 0 44px}
  .hero4 .hero-k{font:600 14px/1.3 Inter,sans-serif;letter-spacing:0;text-transform:none;margin-bottom:10px}
  .hero4 .hero-k::before{width:16px}
  .hero4 h1{font-size:clamp(32px,8.8vw,40px)}
  .hero4 .hero-lead{font-size:16px;margin-top:12px}
  .hero4 .btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:20px}
  .hero4 .btns .btn{width:100%;height:50px;padding:0 6px 0 18px;justify-content:space-between;font-size:15px}
  .hero4 .hero-in{gap:24px}
  .h4-port{grid-template-columns:64px minmax(0,1fr);gap:14px;padding-top:18px;border-top:1px solid var(--lijn)}
  .h4-img > img{border-radius:14px}
  .h4-port figcaption b{font-size:16px}
  .h4-port figcaption span{font-size:13.5px}
  .h4-strip{display:none}
  .h4-sc{display:block}
  .tw-kz > .kz-seg,.tw-kz > .kz-lijst,.tw-kz > .kz-voet,.tw-kz > .kz-wat{display:none}
  .adv4 .adv-k{display:block;margin-top:20px}
  .adv4 .adv-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0}
  .adv4 .adv-l li,.adv4 .adv-l li:last-child{display:block;padding:12px 13px;border:0;border-radius:14px;background:var(--ijs)}
  .adv4 .adv-l span{display:none}
  .adv4 .adv-l b{font-size:14.5px;line-height:1.3}
  .adv4 .med-lead{font-size:15.5px}
}
@media (max-width:760px){
  /* reviews en advocaatblok zijn op de telefoon allebei wit (Kies je check staat hier niet): advocaat licht blauw */
  .rev4{padding-bottom:28px}
  .adv4{background:var(--ijs)}
  .adv4 .adv-l li,.adv4 .adv-l li:last-child{background:#fff}
  .fp .sub-act .btn{white-space:normal;height:auto;min-height:52px;padding-top:8px;padding-bottom:8px;text-align:left;line-height:1.25}
}
@media (max-width:400px){
  .tw-act .btn{gap:8px;padding:0 5px 0 14px;font-size:14px}
  .tw-act .btn i{width:30px;height:30px}
}
@media (max-width:374px){
  .hero4 .btns{grid-template-columns:minmax(0,1fr)}
  .tw-act .btn i{display:none}
  .tw-act .btn{justify-content:center;padding:0 10px}
}

/* v4 rustiger "Kies je check" (25-10): stroomschema als één regel met alleen stapnamen, checks als twee regels */
.ck4 .ck-sub{max-width:26em}
.fl4{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.6fr) minmax(0,1.1fr);gap:8px;margin-top:clamp(22px,2.6vw,32px)}
.fl4-z{border-radius:18px;padding:14px 18px 16px;background:#fff}
.fl4-z > p{font:700 11.5px/1.2 Manrope,Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fl4-z ol{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.fl4-z li{display:flex;align-items:center;gap:9px;font:700 15px/1.25 Manrope,Inter,sans-serif;color:var(--ink);letter-spacing:-.01em}
.fl4-z li i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 Manrope,Inter,sans-serif;font-style:normal;background:var(--blauw);color:#fff}
.fl4-lp{background:transparent;border:1.5px dashed rgba(14,32,51,.22)}
.fl4-lp li i{background:var(--navy)}
.fl4-adv li i{background:#fff;color:var(--blauw);box-shadow:inset 0 0 0 1.5px var(--blauw)}
.ck5{display:grid;gap:10px;margin-top:clamp(18px,2vw,24px)}
.ck5 li,.ck5 li:last-child{border:0;border-radius:18px;background:#fff}
.ck5 .ck-r{padding:18px 18px 18px 24px}
.ck5 .ck-r p{max-width:46em}
.ck-g{display:block;margin-bottom:4px;font:600 13px/1.3 Inter,sans-serif;font-style:normal;color:var(--blauw)}
.ck4 .ck2-spoed{margin-top:14px;padding:10px 4px 0;background:transparent}
.ck4 .ck2-spoed .btn-wit{background:#fff}
@media (max-width:1000px){
  .fl4{grid-template-columns:minmax(0,1fr)}
}

/* v4 hero-tekst met interne links (25-10) */
.hero4 .hero-lead{max-width:34em}
.hero4 .hero-lead a{color:var(--ink);font-weight:600;text-decoration:none;background:linear-gradient(var(--lucht),var(--lucht)) 0 100%/100% 2px no-repeat;padding-bottom:1px;transition:color .25s,background-size .35s var(--ease)}
.hero4 .hero-lead a:hover{color:var(--blauw);background-image:linear-gradient(var(--blauw),var(--blauw))}
@media (max-width:374px){.h4-x{display:none}}

/* v4 "Zo werkt het" terug als eigen blok (v2-stroomschema, 25-10). Afwisseling: Zo werkt het lichtblauw,
   Kies je check wit, advocaatblok lichtblauw. */
.ck4{background:#fff}
.ck4 .ck-kop{margin-bottom:0}
.ck5 li,.ck5 li:last-child{background:var(--ijs-2);box-shadow:inset 0 0 0 1px var(--lijn)}
.ck5 li:hover{box-shadow:inset 0 0 0 1.5px var(--blauw)}
.ck4 .ck2-spoed .btn-wit{box-shadow:inset 0 0 0 1px var(--lijn)}
.adv4{background:var(--ijs)}