/* NedDev v4-laag (okt 2026): legt de taal van de nieuwe homepage over alle subpagina's.
   Alleen opmaak: tekst, beelden, pagina's en URL's blijven. Mona Sans, zinsletters, dunne lijnen, oranje als signaal. */
@font-face{font-family:'Mona Sans';src:url(../home/fonts/mona-sans.woff2) format('woff2');font-weight:200 900;font-stretch:75% 125%;font-display:swap}
body.v4{--inkt:#1B1816;--grijs:#6B645E;--lijn:#E1DCD4;--vlak:#EAE6DF;--oranje:#A9472E;--kalk:#F4F2EE;--koper:#8DB8AD;--koper-donker:#3D6F64;
  --bg:#F4F2EE;--paper:#F4F2EE;--ink:#1B1816;--rule:#1B1816;--pop:#A9472E;--uit:cubic-bezier(.16,1,.3,1);
  background:var(--kalk);color:var(--inkt);font-family:'Mona Sans',system-ui,sans-serif;font-stretch:88%;-webkit-font-smoothing:antialiased}
body.v4 h1,body.v4 h2,body.v4 h3{text-wrap:balance}
body.v4 p{text-wrap:pretty}

/* Letters en kapitalen: overal Mona Sans, nergens kapitalen of mono */
body.v4 :is(.black,.brand,.nav-list,.nav-cta,.mobile-drawer a,.client-marquee-track,.ip-eyebrow,.ip-h,.ip-card-cat,.ip-card-name,.ip-card-stat,.ip-card-sub,
  .dark-cta-eyebrow,.dark-cta-h,.dark-cta-btn,.dark-cta-side-meta,.foot-brand,.foot-col-h,.foot-bot,.breadcrumb-list,.hv-ey,.hv-h,.hv-ticks,.hv-ghost,.hv-chips span,
  .hv-float,.hv-meta,.snel-antwoord-label,.snel-antwoord-text,.content-section-eyebrow,.content-section-h,.info-card-h,.info-card-stack span,.info-card-stack li,
  .faq-q,.faq-a,.related-cat,.related-name,.related-arrow,.mega-all,.mega-col-h,.drawer-grp-h,.mono){
  font-family:'Mona Sans',system-ui,sans-serif;text-transform:none;letter-spacing:normal}

/* Labels/kickers boven koppen weg (AI-vorm); de kop zegt het al */
body.v4 :is(.hv-ey,.content-section-eyebrow,.ip-eyebrow,.dark-cta-eyebrow){display:none}
body.v4 .hv-ghost,body.v4 .drag-cursor{display:none}

/* Koppen: rustig, smal, zinsletters; accentwoord niet meer oranje */
body.v4 :is(.hv-h,.content-section-h,.ip-h,.dark-cta-h){font-weight:650;font-stretch:75%;letter-spacing:-.015em;line-height:1.02}
body.v4 .hv-h{font-size:clamp(40px,5.6vw,96px)}
body.v4 :is(.content-section-h,.ip-h){font-size:clamp(30px,3.6vw,60px)}
body.v4 :is(.hv-h,.content-section-h,.ip-h,.info-card-h,.related-name,.faq-q) :is(em,i,b,strong,span){color:inherit;font-style:normal;background:none}
body.v4 :is(.info-card-h,.related-name){font-weight:620;font-stretch:80%;font-size:clamp(20px,1.6vw,26px);line-height:1.15}
body.v4 .faq-q{font-weight:600;font-stretch:85%;font-size:clamp(18px,1.4vw,22px)}
body.v4 :is(.hv-lede,.content-section p,.faq-a,.snel-antwoord-text){font-size:clamp(17px,1.2vw,20px);line-height:1.55}

/* Kleine labels: grijs, gewone letters */
body.v4 :is(.ip-card-cat,.related-cat,.hv-ticks span,.hv-chips span,.hv-float,.info-card-stack span,.info-card-stack li,.breadcrumb-list,.snel-antwoord-label,.foot-col-h,.mega-col-h,.drawer-grp-h){
  font-size:14px;font-weight:500;color:var(--grijs)}
body.v4 .hv-chips span{border-radius:0;background:none;border:0;padding:0}
body.v4 .snel-antwoord-label{color:var(--inkt);font-weight:600}

/* Kop: als de homepage */
body.v4 header{background:rgba(244,242,238,.92);border-bottom:1px solid var(--lijn)}
body.v4 header.is-scrolled{background:rgba(244,242,238,.94);border-bottom-color:var(--lijn)}
body.v4 .brand{font-weight:820;font-stretch:75%;font-size:26px;letter-spacing:-.02em}
body.v4 .brand sup{display:none}
body.v4 .nav-list a,body.v4 .nav-list button{font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
body.v4 .nav-cta{background:var(--oranje);color:#fff;border:0;border-radius:0;font-size:15px;font-weight:600;padding:12px 20px;letter-spacing:0}
body.v4 .nav-cta:hover{background:var(--inkt)}

/* Knoppen en kaarten */
body.v4 :is(.hv-cta a,.dark-cta-btn){font-family:'Mona Sans',sans-serif;text-transform:none;letter-spacing:0;font-weight:600;border-radius:0}
body.v4 :is(.info-card,.related-card,.related a,.ip-card){border-radius:0;box-shadow:none}
body.v4 .client-marquee-track{font-weight:600;font-stretch:80%;font-size:clamp(18px,1.5vw,24px)}
body.v4 .client-marquee-track .sep{font-size:0}
body.v4 .client-marquee-track .sep::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--oranje);vertical-align:middle}

/* Donker afsluitblok: Hollandse trapgevel als bovenrand, zoals op de homepage */
body.v4 .dark-cta{--g:clamp(48px,7vw,120px);background:var(--inkt);padding-top:calc(var(--g) + clamp(56px,6vw,96px));
  clip-path:polygon(0 var(--g),14% var(--g),14% calc(var(--g)*.75),24% calc(var(--g)*.75),24% calc(var(--g)*.5),34% calc(var(--g)*.5),34% calc(var(--g)*.25),43% calc(var(--g)*.25),43% 0,57% 0,57% calc(var(--g)*.25),66% calc(var(--g)*.25),66% calc(var(--g)*.5),76% calc(var(--g)*.5),76% calc(var(--g)*.75),86% calc(var(--g)*.75),86% var(--g),100% var(--g),100% 100%,0 100%)}
body.v4 .dark-cta-h{color:#fff;font-size:clamp(40px,5.6vw,96px)}
body.v4 .dark-cta-h em{color:var(--oranje);font-style:normal}
body.v4 .dark-cta-btn{background:var(--oranje);color:#fff;border:0}
body.v4 .dark-cta-side-meta{color:#9b958d;font-size:14px}

/* Voet: licht, met lijnen */
body.v4 footer{background:var(--kalk);color:var(--inkt);border-top:1px solid var(--lijn)}
body.v4 footer a{color:var(--inkt)}
body.v4 footer :is(.foot-desc,.foot-bot,.foot-seo-list a){color:var(--grijs)}
body.v4 .foot-brand{font-weight:820;font-stretch:75%;font-size:32px;letter-spacing:-.02em;color:var(--inkt)}
body.v4 .foot-brand sup{display:none}
body.v4 .foot-bot{border-top-color:var(--lijn)}

/* Links */
body.v4 main a:not([class]){text-underline-offset:4px;text-decoration-thickness:1px}

/* Breed vangnet: buiten Lab-demo's en code overal Mona Sans, geen kapitalen, normale spatiëring */
body.v4 :not(.lab-stage,.lab-stage *,code,pre,kbd,samp,svg,svg *){font-family:'Mona Sans',system-ui,sans-serif !important;text-transform:none !important}
body.v4 :is(.blog-row-cat,.blog-row-meta,.dienst-card-price,.case-stat-l,.contact-cell-label,.contact-cell-meta,.case-nav-dir,.blog-meta span,.author,.blog-hero-cat,.blog-snel-label,
  .ip-card-cat,.ip-card-stat,.related-cat,.breadcrumb-list,.foot-col-h,.foot-bot,.mega-col-h,.drawer-grp-h,.hv-ticks span,.info-card-stack span,.info-card-stack li){letter-spacing:normal !important;font-size:14px;color:var(--grijs);font-weight:500}
body.v4 :is(.blog-snel-label,.snel-antwoord-label,.contact-cell-label){color:var(--inkt);font-weight:600}

/* Decoratieve nummers en labels weg */
body.v4 :is(.dienst-card-num,.dienst-card-tag,.process-num,.case-section-eyebrow,.case-hero-tag,.case-hero-meta){display:none}

/* Koppen in inhoud: smal en rustig; accentwoorden in inkt (oranje alleen in het afsluitblok) */
body.v4 :is(h1,h2,h3,.dienst-card-name,.blog-row-title,.process-h,.case-hero-name,.case-nav-name,.contact-cell-value){font-weight:640;font-stretch:78%;letter-spacing:-.012em !important;line-height:1.08}
body.v4 :is(h1,h2,h3) :is(em,i){color:inherit;font-style:normal}
body.v4 .dark-cta-h em{color:var(--oranje) !important}
body.v4 :is(.content-section-body,.blog-body-wrap,.case-section-content) :is(h2){font-size:clamp(26px,2.6vw,40px);margin-top:1.4em}
body.v4 :is(.content-section-body,.blog-body-wrap,.case-section-content) :is(h3){font-size:clamp(20px,1.7vw,26px)}
body.v4 .case-hero-name{font-size:clamp(48px,7vw,120px);line-height:.95}
body.v4 :is(.dienst-card-name,.blog-row-title,.case-nav-name){font-size:clamp(22px,1.9vw,32px)}
body.v4 .process-h{font-size:clamp(28px,3vw,48px)}

/* Cijferrij op cases: rustig, inkt, geen oranje reuzencijfers */
body.v4 .case-stat-n{color:var(--inkt) !important;font-size:clamp(24px,2.4vw,40px) !important;font-weight:640;font-stretch:78%;line-height:1.05}
body.v4 .case-stat{border-color:var(--lijn) !important}
body.v4 code,body.v4 pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Eerste letter van koppen die met kleine letter beginnen (bv. "website laten maken · FAQ") */
body.v4 :is(.content-section-h,h2)::first-letter{text-transform:uppercase}

/* Lijnen: zacht grijs zoals op de homepage (knoppen houden hun eigen rand) */
body.v4 :is(main,.client-marquee,.ip,.related,.faq,.snel-antwoord,.content-section,.breadcrumb) *,
body.v4 :is(.client-marquee,.ip,.related,.faq,.faq-list,.faq-item,.snel-antwoord,.content-section,.info-card,.related-card,.related-head,.related-thumb,.page-hero-media,.dienst-card,.case-stat,.blog-row,.process-row,.contact-cell){border-color:var(--lijn) !important}
body.v4 :is([class*=btn],[class*=knop],.hv-cta a,.dark-cta-btn,.nav-cta){border-color:currentColor !important}
body.v4 .dark-cta *{border-color:#2b2926 !important}
/* Broodkruimel uitlijnen met de rest */
body.v4 .breadcrumb.wrap{padding-left:clamp(20px,2.8vw,40px);padding-right:clamp(20px,2.8vw,40px)}

/* Dubbele labels weg: "DIENST · NAAM" boven een naam die er al staat, categorielabel boven eigen werk */
body.v4 :is(.related-cat,.ip-card-cat){display:none}

/* Kaartrijen worden lijsten met dunne lijnen (zoals het register op de homepage) */
body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner){display:flex !important;flex-direction:column;gap:0 !important;border-top:1px solid var(--lijn)}
body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > *{display:grid !important;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;align-items:baseline;column-gap:clamp(16px,3vw,48px);
  padding:clamp(18px,1.8vw,28px) 0 !important;min-height:0 !important;background:none !important;border:0 !important;border-bottom:1px solid var(--lijn) !important;transition:padding .5s var(--uit)}
body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > *:hover{padding-left:clamp(8px,1vw,16px) !important}
body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > * :is(.related-name,.ip-card-name,.dienst-card-name){grid-column:1;margin:0;font-size:clamp(22px,2vw,34px)}
body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > *:hover :is(.related-name,.ip-card-name,.dienst-card-name){color:var(--oranje)}
body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > * :is(p,.ip-card-sub,.dienst-card-prop,.related-desc){grid-column:2;margin:0;color:var(--grijs)}
body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > * :is(.ip-card-stat,.dienst-card-bot,.related-arrow,.ip-card-arrow){grid-column:3;margin:0;border:0 !important;padding:0 !important;white-space:nowrap}
/* Gerelateerd werk met beeld: foto als vierde kolom, zoals het register op de homepage */
body.v4 .related-grid > .has-thumb{grid-template-columns:minmax(0,4fr) minmax(0,5fr) clamp(120px,11vw,200px) auto}
body.v4 .related-grid > .has-thumb .related-thumb{grid-column:3;grid-row:1;display:block;aspect-ratio:16/10;overflow:hidden;border:0 !important;border-radius:12px;align-self:center}
body.v4 .related-grid > .has-thumb .related-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
body.v4 .related-grid > .has-thumb .related-arrow{grid-column:4}
body.v4 .related-sub{grid-column:2;margin:0;color:var(--grijs)}
body.v4 .ip{background:var(--kalk) !important;color:var(--inkt) !important}
body.v4 .ip :is(.ip-h,.ip-card-name,a){color:var(--inkt) !important}
@media (max-width:760px){
  body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > *{grid-template-columns:1fr;row-gap:6px}
  body.v4 :is(.related-grid,.ip-grid,.diensten-grid-inner) > * > *{grid-column:1 !important}
}

/* Case-feiten: rustige regel met feiten in plaats van vier vakken */
body.v4 .case-stats-grid{display:flex !important;flex-wrap:wrap;gap:12px 40px !important;border:0 !important}
body.v4 .case-stats-grid > *{border:0 !important;padding:0 !important;min-height:0 !important;background:none !important}

/* Contact: onder elkaar, groot, zoals op de homepage */
body.v4 .contact-cells{display:flex !important;flex-direction:column;gap:0 !important;border-top:1px solid var(--lijn)}
body.v4 .contact-cells > *{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;padding:clamp(16px,1.6vw,24px) 0 !important;border:0 !important;border-bottom:1px solid var(--lijn) !important}
body.v4 .contact-cell-value{font-size:clamp(28px,3.2vw,52px)}
body.v4 .contact-cell-label{grid-column:2;grid-row:1;text-align:right}

/* Mobiel: menulinks en taalwissel als volwaardige tikdoelen */
body.v4 :is(.mobile-drawer a,.lang-switch,.nav-list a){min-height:44px;display:inline-flex;align-items:center}
body.v4 img{max-width:100%}
/* Broodkruimel als tikdoel; Ken Burns-beeld op mobiel stil (steekt anders net buiten het scherm) */
body.v4 .breadcrumb-list a{display:inline-flex;align-items:center;min-height:24px;padding:4px 2px}
@media (max-width:760px){body.v4 .hv-kb img{transform:none !important;animation:none !important}}

/* Werkwijze: zonder nummerkolom krijgt de tekst de volle breedte */
body.v4 .process-row{grid-template-columns:minmax(0,1fr) !important}
body.v4 .process-row > *{grid-column:1 !important;max-width:72ch}
@media (max-width:760px){body.v4 .related-grid > .has-thumb .related-thumb{grid-column:1;grid-row:auto;width:160px}}

/* Dienstenregel (vervangt de doorlopende klantenband): stil, verdeeld over de breedte, dunne lijnen */
body.v4 .dienstbalk{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);background:var(--kalk)}
body.v4 .dienstbalk-in{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1600px;margin:0 auto;padding:0 clamp(20px,2.8vw,40px)}
body.v4 .dienstbalk a{position:relative;display:inline-flex;align-items:center;min-height:64px;padding:0 clamp(6px,1vw,14px);text-decoration:none;color:var(--inkt);
  font-weight:600;font-stretch:80%;font-size:clamp(16px,1.25vw,20px);letter-spacing:-.005em;transition:color .3s var(--uit)}
body.v4 .dienstbalk a::after{content:'';position:absolute;left:clamp(6px,1vw,14px);right:clamp(6px,1vw,14px);bottom:18px;height:1px;background:var(--oranje);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--uit)}
body.v4 .dienstbalk a:hover,body.v4 .dienstbalk a:focus-visible{color:var(--oranje)}
body.v4 .dienstbalk a:hover::after,body.v4 .dienstbalk a:focus-visible::after{transform:scaleX(1)}
body.v4 .dienstbalk a:first-child{color:var(--oranje)}
@media (max-width:760px){body.v4 .dienstbalk-in{justify-content:flex-start;column-gap:4px}body.v4 .dienstbalk a{min-height:48px}}

/* Knoppen: geen oude rand of schaduw, één pijl (het teken in de tekst), gelijke maat */
body.v4 :is(.nav-cta,.hv-cta,.hv-cta a,.dark-cta-btn){border:0 !important;box-shadow:none !important;outline-offset:3px;padding:14px 22px;font-size:16px;line-height:1.2}
body.v4 :is(.hv-cta,.hv-cta a,.dark-cta-btn)::after{content:none !important}
body.v4 .nav-cta::after{content:none !important}
body.v4 :is(.hv-cta,.dark-cta-btn,.nav-cta) > span[aria-hidden="true"]{display:none}

/* ===== v4-sausjes (zie v4.js) ===== */
.v4-voortgang{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--oranje,#A9472E);transform-origin:0 50%;transform:scaleX(0);z-index:200;pointer-events:none}
/* Afsluitblok: trapgevel en kleur volgen het scrollen (vervangt de vaste gevel) */
/* Vel-afsluiter (25 okt, zelfde vellen als de homepage): ronde bovenhoeken i.p.v. trapgevel */
body.v4 .dark-cta{clip-path:none !important;border-radius:28px 28px 0 0;background:var(--inkt) !important}
@media (max-width:820px){body.v4 .dark-cta{border-radius:20px 20px 0 0}}
body.v4 .dark-cta-h{color:var(--kalk) !important}
body.v4 .dark-cta-side-meta{color:color-mix(in srgb,#9b958d calc(var(--v4-k) * 100%),var(--grijs)) !important}
/* Stadshero: zwart vlak met trapgevel-onderrand schuift terug en geeft de foto vrij */
body.v4 .hv-e.v4-schuif{background:transparent;position:relative;isolation:isolate}
body.v4 .hv-e.v4-schuif::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--v4-donker,100%);background:var(--inkt);clip-path:var(--v4-hclip,none);z-index:0;pointer-events:none}
body.v4 .hv-e.v4-schuif > .wrap{position:relative;z-index:1}
body.v4 .hv-e.v4-schuif .hv-media{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);clip-path:inset(0 var(--v4-in,0px));border-top:0;height:clamp(300px,46vw,620px);overflow:hidden}
body.v4 .hv-e.v4-schuif .hv-cta{right:var(--v4-in,0px)}
body.v4 .hv-e.v4-schuif .hv-ticks{display:none}
body.v4 .hv-e .hv-credit{right:auto;bottom:auto;top:10px;left:calc(var(--v4-in,0px) + 12px)}
body.v4 .hv-d .hv-band::after{display:none}
body.v4 .hv-e.v4-schuif .hv-kb img{filter:none !important;transform:scale(1.06);will-change:transform}
body.v4 .hv-g.v4-schuif{padding-bottom:0}
body.v4 .hv-g.v4-schuif .hv-band{position:relative;margin:clamp(28px,4vw,56px) 0 0 !important;height:clamp(340px,58vw,680px);border-top:0;overflow:hidden;background:var(--inkt)}
body.v4 .hv-g.v4-schuif .hv-band::after{display:none}
body.v4 .hv-g.v4-schuif .hv-kb img{filter:none !important;transform:scale(1.06);will-change:transform}
body.v4 .hv-g.v4-schuif .hv-credit{z-index:5;opacity:var(--v4-credit,1);transition:opacity .35s}
body.v4 .hv-g .v4-doek{position:absolute;left:0;right:0;height:calc(50% + var(--v4-gd,60px) / 2);background:var(--inkt);z-index:4;pointer-events:none;will-change:transform}
body.v4 .hv-g .v4-doek-boven{top:0;clip-path:var(--v4-doek-boven,none);transform:translate3d(0,calc(var(--v4-schuif,3px) * -1),0)}
body.v4 .hv-g .v4-doek-onder{bottom:0;clip-path:var(--v4-doek-onder,none);transform:translate3d(0,var(--v4-schuif,3px),0)}
body.v4 .hv-credit{position:absolute;right:12px;bottom:10px;z-index:3;font-size:12px;line-height:16px;min-height:28px;display:inline-flex;align-items:center;color:#fff;background:rgba(10,10,10,.45);padding:6px 10px;text-decoration:none;max-width:70%}
body.v4 .hv-credit:hover{background:rgba(10,10,10,.7)}
@media (prefers-reduced-motion:reduce){body.v4 .v4-schuif .hv-kb img{transform:none}}
body.v4 .dark-cta{padding-bottom:clamp(56px,6vw,96px) !important}

/* Tabellen als beeld (v4.js §5) */
body.v4 .v4-sr{position:absolute !important;left:0;top:0;display:block !important;width:1px !important;height:1px !important;overflow:hidden !important;clip-path:inset(50%);white-space:nowrap;margin:0 !important;padding:0 !important;border:0 !important}
body.v4 .content-section-body:has(.v4-sr){position:relative}
body.v4 .v4-tabel{margin:clamp(28px,3vw,44px) 0;max-width:none}
body.v4 .content-section-body:has(.v4-tabel){max-width:1100px !important}
body.v4 .v4-tabel p,body.v4 .v4-tabel ul{margin:0;padding:0;list-style:none}
body.v4 .v4t-cap{font-size:15px !important;font-weight:600;color:var(--inkt);padding-bottom:14px;border-bottom:1px solid var(--inkt)}
body.v4 .v4t-pak{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
body.v4 .v4t-kol{padding:clamp(20px,2vw,28px) clamp(16px,1.6vw,24px) clamp(22px,2vw,30px);border-left:1px solid var(--lijn);opacity:0;transform:translateY(14px);transition:opacity .7s var(--uit),transform .7s var(--uit);transition-delay:calc(var(--i) * 90ms)}
body.v4 .v4t-kol:first-child{border-left:0;padding-left:0}
body.v4 .is-in .v4t-kol{opacity:1;transform:none}
body.v4 .v4t-naam{font-weight:640;font-stretch:78%;font-size:clamp(26px,2.4vw,38px) !important;line-height:1;letter-spacing:-.015em;color:var(--inkt)}
body.v4 .v4t-om{margin-top:8px !important;font-size:15px !important;color:var(--grijs)}
body.v4 .v4t-lijst{margin-top:18px !important;border-top:1px solid var(--lijn)}
body.v4 .v4t-lijst li{font-size:15px;line-height:1.35;padding:9px 0 9px 16px;border-bottom:1px solid var(--lijn);position:relative}
body.v4 .v4t-lijst li::before{content:'';position:absolute;left:0;top:16px;width:6px;height:6px;background:var(--oranje)}
body.v4 .v4t-extra{margin-top:14px !important;font-size:15px !important;line-height:1.45}
body.v4 .v4t-extra span{display:block;font-size:13px;color:var(--grijs);margin-bottom:2px}
body.v4 .v4t-tijd{margin-top:clamp(18px,2vw,28px);padding-top:18px;border-top:1px solid var(--inkt)}
body.v4 .v4t-ast{font-size:14px !important;font-weight:600;color:var(--inkt);margin-bottom:12px !important}
body.v4 .v4t-rij{display:grid;grid-template-columns:clamp(96px,14%,150px) 1fr;align-items:center;gap:16px;min-height:40px}
body.v4 .v4t-rn{font-size:14px;font-weight:600}
body.v4 .v4t-baan{position:relative;height:40px;background:repeating-linear-gradient(90deg,var(--lijn) 0 1px,transparent 1px calc(100% / 6));background-size:calc(100% + 1px) 100%}
body.v4 .v4t-baan i{position:absolute;top:13px;height:14px;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--uit);transition-delay:calc(var(--i) * 140ms + 200ms)}
body.v4 .is-in .v4t-baan i{transform:none}
body.v4 .v4t-vast{left:0;width:var(--b);background:var(--inkt)}
body.v4 .v4t-marge{left:var(--a);width:var(--b);background:repeating-linear-gradient(-45deg,var(--oranje) 0 3px,var(--kalk) 3px 6px);outline:1px solid var(--oranje);outline-offset:-1px}
body.v4 .v4t-open{left:var(--a);width:calc(100% - var(--a));background:linear-gradient(90deg,var(--oranje),rgba(245,72,15,0))}
body.v4 .v4t-door{left:0;width:100%;height:2px !important;top:19px !important;background:repeating-linear-gradient(90deg,var(--inkt) 0 8px,transparent 8px 14px)}
body.v4 .v4t-w{position:absolute;left:var(--x);top:50%;transform:translate(10px,-50%);font-size:13px;font-weight:600;white-space:nowrap;background:var(--kalk);padding:0 4px;opacity:0;transition:opacity .4s;transition-delay:calc(var(--i) * 140ms + 900ms)}
@media (max-width:760px){body.v4 .v4t-w.is-links{top:-14px !important}}
body.v4 .v4t-w.is-links{left:auto;right:0;transform:translate(0,-50%)}
body.v4 .is-in .v4t-w{opacity:1}
body.v4 .v4t-asrij{min-height:24px}
body.v4 .v4t-as{position:relative;height:20px}
body.v4 .v4t-as span{position:absolute;left:var(--x);transform:translateX(-50%);font-size:12px;color:var(--grijs)}
body.v4 .v4t-as span:first-child{transform:none}
body.v4 .v4t-as span:last-child{transform:translateX(-100%)}
body.v4 .v4t-leg{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--grijs);padding:14px 0 6px}
body.v4 .v4t-leg span{display:inline-flex;align-items:center;gap:8px}
body.v4 .v4t-sw{width:12px;height:12px;background:var(--oranje)}
body.v4 .v4t-sw.is-g{background:var(--inkt)}
body.v4 .v4t-balken li{display:grid;grid-template-columns:minmax(0,34%) 1fr;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--lijn)}
body.v4 .v4t-bn{font-size:16px;font-weight:600;line-height:1.3}
body.v4 .v4t-bb{display:flex;flex-direction:column;gap:6px}
body.v4 .v4t-b{display:flex;align-items:center;gap:12px;min-height:20px}
body.v4 .v4t-b i{display:block;height:12px;width:calc((100% - 110px) * var(--v));min-width:3px;background:var(--oranje);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--uit);transition-delay:calc(var(--i) * 110ms)}
body.v4 .v4t-b.is-g i{background:var(--inkt);height:6px}
body.v4 .is-in .v4t-b i{transform:none}
body.v4 .v4t-b em{font-style:normal;font-size:15px;font-weight:600;white-space:nowrap}
body.v4 .v4t-b.is-g em{font-weight:500;color:var(--grijs);font-size:14px}
@media (max-width:760px){
  body.v4 .v4t-pak{grid-template-columns:1fr}
  body.v4 .v4t-kol{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--lijn)}
  body.v4 .v4t-kol:first-child{border-top:0}
  body.v4 .v4t-rij{grid-template-columns:1fr;gap:2px;margin-bottom:10px}
  body.v4 .v4t-asrij .v4t-rn{display:none}
  body.v4 .v4t-balken li{grid-template-columns:1fr;gap:10px}
}
/* Tekstvergelijking: rustige tabel */
body.v4 table.v4-tabel-rustig{width:100%;border-collapse:collapse;margin:clamp(24px,3vw,40px) 0;font-size:16px;border:0}
body.v4 table.v4-tabel-rustig caption{text-align:left;font-weight:600;font-size:15px;padding-bottom:14px;border-bottom:1px solid var(--inkt);caption-side:top}
body.v4 table.v4-tabel-rustig th,body.v4 table.v4-tabel-rustig td{text-align:left;padding:14px 16px 14px 0;border:0;border-bottom:1px solid var(--lijn);background:none;vertical-align:top;line-height:1.4}
body.v4 table.v4-tabel-rustig thead th{font-size:14px;font-weight:600;color:var(--grijs)}
body.v4 table.v4-tabel-rustig tbody td:first-child{font-weight:600;width:30%}
@media (prefers-reduced-motion:reduce){body.v4 .v4t-kol,body.v4 .v4t-baan i,body.v4 .v4t-b i,body.v4 .v4t-w{transition:none}}

/* Knoppen als pil (25 okt), zelfde zachte vorm als de vellen */
body.v4 :is(.nav-cta,.dark-cta-btn,.hv-cta a,.knop,.btn,.button){border-radius:999px !important}

/* Details (25 okt), zelfde kleurrollen als de homepage: klinker = doen, koper = leeft/open, geen nieuwe beweging */
body.v4 ::selection{background:var(--koper);color:var(--inkt)}
body.v4 :focus-visible{outline:2px solid var(--oranje);outline-offset:3px;border-radius:6px}
body.v4 :is(.related-cat,.blog-row-cat,.ip-card-cat,.case-hero-tag){color:var(--koper-donker) !important}
body.v4 :is(.hv-lede,.snel-antwoord-text,.content-section-body > p:first-child){font-stretch:112%;font-weight:380}
body.v4 main a:not([class]){text-decoration-color:var(--koper-donker)}
body.v4 main a:not([class]):hover{color:var(--oranje);text-decoration-color:var(--oranje)}
body.v4 .dark-cta-btn:hover{background:var(--koper) !important;color:var(--inkt) !important}

/* Kunstenaarshand (25 okt): één beeldtaal op alle pagina's, afdruk in roet en kalk, kleur bij aanwijzen */
body.v4 main :is(.related-thumb img,.case-hero img,.case-section img,.blog-hero img,.dienst-card img,.info-card img,.content-section img,.hv-kb img,.ip-card img){filter:grayscale(1) sepia(.32) contrast(1.06) brightness(.97);transition:filter .6s cubic-bezier(.16,1,.3,1)}
body.v4 main a:hover :is(img),body.v4 main .hv-kb:hover img{filter:none}

/* ===== PALET Petrol en koraal (Mo 4 nov), zelfde als de homepage =====
   ondergrond licht neutraal, petrol = inkt en donkere vlakken, koraal = signaal en knop op donker */
body.v4{--inkt:#0F3A42;--kalk:#F7F8F8;--oranje:#F0896A;--koper:#F8E1D8;--koper-donker:#2F6670;
  --grijs:#4A6A70;--lijn:color-mix(in srgb,#0F3A42 14%,#F7F8F8);--vlak:color-mix(in srgb,#0F3A42 6%,#F7F8F8);
  --bg:#F7F8F8;--paper:#F7F8F8;--ink:#0F3A42;--rule:#0F3A42;--pop:#F0896A}
body.v4 header{background:rgba(247,248,248,.92)}
body.v4 header.is-scrolled{background:rgba(247,248,248,.94)}
body.v4 .nav-cta{background:#0F3A42 !important;color:#F7F8F8 !important}
body.v4 .nav-cta:hover{background:#F0896A !important;color:#0F3A42 !important}
body.v4 .dark-cta-btn{background:#F0896A !important;color:#0F3A42 !important}
body.v4 .dark-cta-btn:hover{background:#F7F8F8 !important;color:#0F3A42 !important}
body.v4 .dark-cta-h em{color:#F0896A !important}
body.v4 .dark-cta{background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.07),transparent 62%),#0F3A42 !important}
body.v4 .knop,body.v4 .hv-cta a{background:#0F3A42;color:#F7F8F8}

/* Geen linkerlijnen (Mo 4 nov: "linker border lijn is lelijk"). Scheiding komt van witruimte, horizontale lijnen of een zacht vlak. */
body.v4 :is(.contact-cells,.info-card,.diensten-grid-inner,.v4t-kol,.related-thumb,.case-hero-prop,.case-hero-image,.case-nav-card,.hv-media,.blog-snel,blockquote){border-left:0 !important}
body.v4 .contact-cells{padding-left:0 !important}
body.v4 .v4t-kol{padding-left:0 !important}
body.v4 .v4t-pak{column-gap:clamp(24px,3vw,48px)}
/* Wat met een lijn werd gemarkeerd, krijgt een zacht vlak met ronde hoeken, zoals de kaarten op de homepage */
body.v4 :is(.blog-snel,blockquote){background:var(--vlak);border-radius:18px;padding:clamp(20px,2vw,28px) clamp(22px,2.4vw,32px) !important;margin-left:0 !important}
body.v4 .info-card{padding-left:0 !important}
body.v4 .case-hero-prop{padding-left:0 !important}
body.v4 :is(.info-card,.blog-snel,blockquote,.snel-antwoord){border:0 !important;background:var(--vlak) !important;border-radius:18px !important;padding:clamp(22px,2.2vw,32px) !important}

/* Mobiel menu (4 nov): begint bovenaan, scrolt, grote hoofdlinks, inklapbare groepen, contact onderaan */
body.v4 .mobile-drawer{justify-content:flex-start !important;align-items:stretch !important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(var(--kop-h,64px) + 20px) 20px 40px !important;background:var(--inkt) !important;color:var(--kalk) !important;gap:0}
body.v4 .mobile-drawer a{border:0 !important;width:auto !important;text-transform:none !important;letter-spacing:0 !important}
body.v4 .dr-hoofd{display:flex;flex-direction:column;border-bottom:1px solid rgba(247,248,248,.16);padding-bottom:16px}
body.v4 .dr-hoofd a{font-weight:650 !important;font-stretch:76% !important;font-size:clamp(34px,10vw,44px) !important;line-height:1.05 !important;padding:6px 0 !important;color:var(--kalk) !important;min-height:0 !important}
body.v4 .dr-hoofd a:hover,body.v4 .dr-hoofd a:focus-visible{color:var(--oranje) !important}
body.v4 .dr-groepen{padding:8px 0}
body.v4 .dr-groep{border-bottom:1px solid rgba(247,248,248,.12)}
body.v4 .dr-groep summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:17px;font-weight:600;color:var(--kalk)}
body.v4 .dr-groep summary::-webkit-details-marker{display:none}
body.v4 .dr-groep summary::after{content:'+';font-size:22px;font-weight:400;color:var(--oranje);transition:transform .25s}
body.v4 .dr-groep[open] summary::after{transform:rotate(45deg)}
body.v4 .dr-sub{display:flex;flex-direction:column;padding:0 0 14px}
body.v4 .dr-sub a{font-size:15px !important;font-weight:400 !important;padding:9px 0 !important;color:rgba(247,248,248,.78) !important;min-height:40px !important}
body.v4 .dr-sub a:first-child{color:var(--oranje) !important;font-weight:600 !important}
body.v4 .dr-los{display:flex;gap:24px;padding:16px 0 4px}
body.v4 .dr-los a{font-size:17px !important;font-weight:600 !important;color:var(--kalk) !important}
body.v4 .dr-contact{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(247,248,248,.16)}
body.v4 .dr-knop{background:var(--oranje) !important;color:var(--inkt) !important;border-radius:999px;padding:14px 24px !important;font-weight:650 !important;font-size:16px !important;margin-bottom:8px}
body.v4 .dr-tel{font-size:16px !important;color:var(--kalk) !important;padding:6px 0 !important}
body.v4.menu-open{overflow:hidden}
body.v4.menu-open header{background:var(--inkt) !important;border-bottom-color:transparent !important}
body.v4.menu-open header :is(.brand,.lang-switch){color:var(--kalk) !important}
body.v4.menu-open header .hamb span{background:var(--kalk) !important}

/* Stack-lijst in infokaarten (4 nov): geen hokjes, zelfde lijst als Use-cases met ruimte tussen pijl en tekst */
body.v4 .info-card-stack{display:flex !important;flex-direction:column;gap:0 !important}
body.v4 .info-card-stack li,body.v4 .info-card-stack span{border:0 !important;background:none !important;padding:7px 0 7px 26px !important;font-size:16px !important;color:var(--inkt) !important;font-weight:400 !important;position:relative;line-height:1.4}
body.v4 .info-card li{padding-left:26px !important;position:relative}
body.v4 .info-card li::before{content:"→";position:absolute;left:0;top:inherit;color:var(--oranje);font-family:'Mona Sans',sans-serif !important;font-weight:500}
body.v4 .info-card > div[style*="JetBrains"]{font-family:'Mona Sans',sans-serif !important;text-transform:none !important;letter-spacing:0 !important;font-size:14px !important;border-top-color:var(--lijn) !important}

/* Hero zonder foto (over ons, privacy, voorwaarden): geen lege donkere band eronder */
body.v4 .hv-g:not(.v4-schuif) .hv-band:not(:has(img)){display:none}
body.v4 .hv-g:not(.v4-schuif){padding-bottom:clamp(56px,7vw,110px) !important}

/* Lab-chrome in de huisstijl (4 nov, alleen via deze laag; Lab-bestanden zelf ongemoeid).
   Demo's in .lab-stage blijven zoals ze zijn. */
body.v4 :is(.lab-h1,.lab-sec-h){font-family:'Mona Sans',system-ui,sans-serif !important;text-transform:none !important;font-weight:650 !important;font-stretch:76% !important;letter-spacing:-.015em !important}
body.v4 .lab-h1{font-size:clamp(44px,6.4vw,104px) !important;line-height:.95 !important}
body.v4 .lab-sec-h{font-size:clamp(26px,2.8vw,40px) !important}
body.v4 .lab-sec-h > span:first-child{display:none}
body.v4 .lab-count{font-style:normal;font-size:15px;font-weight:500;color:var(--grijs);font-stretch:100%}
body.v4 .lab-eb{display:none}
body.v4 .lab-stats dt{font-family:'Mona Sans',sans-serif !important;text-transform:none !important;letter-spacing:0 !important;font-size:14px !important;color:var(--grijs) !important}
body.v4 .lab-stats dd{font-family:'Mona Sans',sans-serif !important;font-weight:650 !important;font-stretch:76%;color:var(--inkt)}
body.v4 .lab-pick{background:var(--oranje) !important;border-color:var(--oranje) !important;color:var(--inkt) !important;border-radius:999px !important}
body.v4 .lab-new{background:none !important;padding:0 !important;color:#A94B2C !important;font-family:'Mona Sans',sans-serif !important;font-weight:600 !important;border-radius:0 !important}
body.v4 .lab-sel-fab{background:var(--inkt) !important;color:var(--kalk) !important;border-radius:999px !important;font-family:'Mona Sans',sans-serif !important}
body.v4 .lab-tile{border-radius:18px !important;overflow:hidden;border-color:var(--lijn) !important}
body.v4 :is(.lab-tile-cat,.lab-tile-meta,.lab-tile-src,.lab-lic){font-family:'Mona Sans',sans-serif !important;text-transform:none !important;letter-spacing:0 !important}
body.v4 :is(.lab-code-toggle,.lab-more,.lab-f){border-radius:999px !important;font-family:'Mona Sans',sans-serif !important;text-transform:none !important;letter-spacing:0 !important}

/* ===== Menubalk als zwevende capsule (4 nov): bovenaan open, bij scrollen laat hij los van de rand
   en wordt een ronde petrol capsule, dezelfde vorm als de kaarten. Actieve pagina = klein koraal trapgeveltje. */
body.v4 header{transition:padding .45s cubic-bezier(.16,1,.3,1),background-color .3s}
body.v4 header .nav-in{transition:background-color .45s cubic-bezier(.16,1,.3,1),max-width .55s cubic-bezier(.16,1,.3,1),padding .45s cubic-bezier(.16,1,.3,1),border-radius .45s,box-shadow .45s;border-radius:0}
body.v4 header.is-scrolled{background:transparent !important;border-bottom-color:transparent !important;padding:12px 16px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body.v4 header.is-scrolled .nav-in{background:#0F3A42;border-radius:999px;max-width:1120px;margin:0 auto;padding:8px 8px 8px 26px !important;box-shadow:0 18px 40px -22px rgba(15,58,66,.55),inset 0 1px 0 rgba(255,255,255,.08)}
body.v4 header.is-scrolled :is(.brand,.nav-list > a,.nav-list .nav-item > a,.lang-switch,.caret){color:#F7F8F8 !important}
body.v4 header.is-scrolled .nav-cta{background:#F0896A !important;color:#0F3A42 !important;border-radius:999px}
body.v4 header.is-scrolled .nav-cta:hover{background:#F7F8F8 !important}
body.v4 header.is-scrolled .hamb span{background:#F7F8F8 !important}
@media (max-width:900px){body.v4 header.is-scrolled{padding:10px 12px !important}body.v4 header.is-scrolled .nav-in{padding:6px 8px 6px 20px !important}}
body.v4.menu-open header .nav-in{background:transparent !important;box-shadow:none !important}
/* actieve pagina: klein trapgeveltje in koraal boven de link, geen puntje ervoor */
body.v4 .nav-list a.is-active{color:inherit !important;position:relative}
body.v4 .nav-list a.is-active::before{content:'' !important;position:absolute;left:50%;top:-9px;width:14px !important;height:7px !important;margin:0 !important;transform:translateX(-50%);border-radius:0 !important;background:#F0896A !important;
  clip-path:polygon(0 100%,0 60%,20% 60%,20% 30%,40% 30%,40% 0,60% 0,60% 30%,80% 30%,80% 60%,100% 60%,100% 100%)}
/* hover: lijntje tekent zich onder de link */
body.v4 .nav-list > a:not(.is-active),body.v4 .nav-list .nav-item > a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.16,1,.3,1),color .3s}
body.v4 .nav-list > a:not(.is-active):hover,body.v4 .nav-list .nav-item > a:hover{background-size:100% 1px}

/* Uitklapmenu's: zelfde ronde kaart als op de homepage, elk item op een eigen regel */
body.v4 .mega-panel{background:#F7F8F8 !important;border:0 !important;border-radius:18px !important;box-shadow:0 28px 60px -24px rgba(15,58,66,.4) !important}
body.v4 .mega-panel a,body.v4 .mega-panel .ml-name{color:#0F3A42 !important}
body.v4 .mega-panel a:hover{color:#A94B2C !important}
body.v4 .mega-list a{display:block !important;break-inside:avoid}
body.v4 .mega-col-h,body.v4 .mega-col-h a{color:#4A6A70 !important;border-color:var(--lijn) !important}
body.v4 .nav-list a:not(.is-active)::before{display:none !important}

/* Contrast (4 nov, Lighthouse): koraal als TEKST op licht = donkerder koraal #A94B2C (5,3:1); op koraal vlak = petrol tekst */
body.v4 .dienstbalk a:first-child,body.v4 .dienstbalk a:hover,body.v4 .dienstbalk a:focus-visible{color:#A94B2C !important}
body.v4 [style*="color:var(--pop)"]{color:#A94B2C !important}
body.v4 :is(.hv-cta,.hv-cta a,.dark-cta-btn,a.hv-cta){color:#0F3A42 !important}
body.v4 .hv-cta{background:#F0896A !important}