/*
Theme Name: MDV Online
Theme URI: https://mdv-online.nl
Author: MDV Online
Author URI: https://mdv-online.nl
Description: Eigen thema voor MDV Online. Geen paginabouwer, pure HTML en CSS. De pagina-inhoud is gewone HTML die je in de bewerker plakt via de tab Tekst.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mdv-online
*/

/* ==========================================================================
   1. Ontwerp uit de goedgekeurde mock-up. Niet met de hand aanpassen zonder
      de mock-up bij te werken, anders lopen ontwerp en site uit elkaar.
   ========================================================================== */
:root{
  --violet:#7C5CFC; --violet-deep:#6A47F5; --violet-ink:#4B32B0;
  --ink:#211E33; --soft:#EEEAFE; --slate:#6B6880; --cloud:#F6F5FB; --white:#FFFFFF;
  --line:rgba(33,30,51,.10);
  --maxw:1180px; --pad:22px;
  --display:'Plus Jakarta Sans','Jakarta fallback',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --body:'Inter','Inter fallback',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --grad-cta:linear-gradient(135deg,#8A6BFF 0%,#7C5CFC 45%,#6A47F5 100%);
  --navh:76px;
}

/* Fallback-fonts met bijgestelde metrics. Tot het webfont geladen is, neemt de
   systeemfont (Arial) exact dezelfde hoogte en breedte in. Dat voorkomt de
   sprong in de opmaak (layout shift) op het moment dat het webfont binnenkomt,
   nu de fonts niet-blokkerend laden. */
@font-face{font-family:'Jakarta fallback';src:local('Arial');ascent-override:96%;descent-override:24%;line-gap-override:0%;size-adjust:104%}
@font-face{font-family:'Inter fallback';src:local('Arial');ascent-override:90%;descent-override:22.4%;line-gap-override:0%;size-adjust:107%}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.55}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;line-height:1.12}

/* announcement bar */
.announce{background:var(--violet);color:#fff;font-size:13.5px;font-weight:500;position:relative;z-index:60}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;text-align:center;flex-wrap:wrap}
.announce .dot{width:8px;height:8px;border-radius:2px;background:#fff;flex:none}
.announce a.al{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.75);padding-bottom:1px;transition:opacity .18s ease}
.announce a.al:hover{opacity:.85}

/* header + nav */
.site-header{position:sticky;top:0;z-index:50;background:transparent;transition:box-shadow .25s ease,padding .25s ease}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px;position:relative}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:42px;width:auto;transition:height .25s ease}
.nav-links{display:none;list-style:none}
.nav-links>li{position:static}
.nav-links>li>a{font-family:var(--body);font-weight:600;font-size:15.5px;color:var(--ink);padding:8px 2px;position:relative;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .18s ease}
.nav-links>li>a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links>li>a:hover,.nav-links>li>a:focus-visible{color:var(--violet-deep)}
.nav-links>li>a:hover::after,.nav-links>li>a:focus-visible::after,.has-mega.open>a::after{transform:scaleX(1)}
.caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease;opacity:.8}
.has-mega.open .caret{transform:rotate(225deg) translateY(2px)}
.nav-actions{display:none;align-items:center;gap:16px}
.btn{font-family:var(--display);font-weight:700;font-size:15px;border-radius:999px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1.6px solid transparent;transition:transform .16s ease,filter .18s ease,box-shadow .2s ease,background .18s ease,color .18s ease,border-color .18s ease;white-space:nowrap}
.btn-primary{background:var(--grad-cta);background-size:140% 140%;background-position:0% 50%;color:#fff;box-shadow:0 10px 24px -12px rgba(124,92,252,.85)}
.btn-primary:hover{transform:translateY(-1px);background-position:100% 50%;box-shadow:0 16px 32px -10px rgba(106,71,245,.9)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet-deep);transform:translateY(-1px)}
.link-contact{font-weight:600;font-size:15.5px;color:var(--ink);border-bottom:1.6px solid transparent;transition:border-color .18s ease,color .18s ease}
.link-contact:hover{border-color:currentColor;color:var(--violet-deep)}

/* megamenu, uitgelijnd op de menubalk zelf */
.mega{display:none}
.mega-in{display:grid;grid-template-columns:1fr 280px;gap:0}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 20px;padding:26px 28px 28px}
.mega-col h4{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--slate);margin:0 0 10px 8px;padding-bottom:9px;border-bottom:2px solid var(--soft)}
.mi{display:flex;gap:11px;align-items:flex-start;padding:9px 8px;border-radius:12px;transition:background .16s ease,transform .16s ease}
.mi:hover{background:var(--cloud);transform:translateX(2px)}
.mi-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center;transition:background .16s ease,color .16s ease}
.mi-ic svg{width:19px;height:19px}
.mi:hover .mi-ic{background:var(--violet);color:#fff}
.mi-tx{display:flex;flex-direction:column;line-height:1.25}
.mi-tx strong{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink)}
.mi-tx span{font-size:12.5px;color:var(--slate)}
.mega-promo{display:flex;flex-direction:column;gap:6px;justify-content:center;background:linear-gradient(160deg,var(--soft),#F6EEFF);border-left:1px solid var(--line);border-radius:0 20px 20px 0;padding:26px 26px}
.mp-tag{align-self:flex-start;font-size:11.5px;font-weight:700;color:#fff;background:var(--violet);padding:3px 10px;border-radius:999px}
.mega-promo strong{font-family:var(--display);font-size:19px;color:var(--ink)}
.mp-sub{font-size:13px;color:var(--slate);margin-bottom:6px}
.mp-btn{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:14px;color:#fff;background:var(--grad-cta);padding:10px 16px;border-radius:999px;transition:transform .16s ease,box-shadow .2s ease}
.mega-promo:hover .mp-btn{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(106,71,245,.8)}

/* hamburger + mobiel paneel */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:0;background:transparent;cursor:pointer;padding:11px;color:var(--ink)}
.burger span{height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.mobile-panel{display:none;background:#fff;border-top:1px solid var(--line);max-height:78vh;overflow:auto}
.mobile-panel .wrap{padding-top:8px;padding-bottom:20px}
.m-item>a,.m-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 2px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer}
.m-sub{display:none;padding:6px 0 12px}
.m-sub a{display:flex;align-items:center;gap:12px;padding:9px 8px;color:var(--ink);font-weight:600;font-size:15px;border-radius:10px;transition:background .16s ease,color .16s ease}
.m-sub a:hover{background:var(--cloud)}
.m-ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center}
.m-ic svg{width:17px;height:17px}
.m-sub a:hover .m-ic{background:var(--violet);color:#fff}
.m-item.open .m-sub{display:block}
.m-item.open .m-toggle .caret{transform:rotate(225deg) translateY(2px)}
.m-cta{display:flex;gap:12px;padding-top:18px}
.m-cta .btn{flex:1}
.nav-open .mobile-panel{display:block}
.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero: gradient-canvas loopt over de volle breedte door tot achter de menubalk */
.hero{background:transparent;position:relative;margin-top:calc(-1 * var(--navh))}
.hero-canvas{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--cloud) 0%,#F1EDFC 52%,var(--soft) 100%);border-bottom:1px solid rgba(124,92,252,.10);padding:calc(var(--navh) + 34px) 0 40px}
.hero-canvas>.wrap{position:relative;z-index:3}
.hero-glow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-glow .g{position:absolute;border-radius:50%;filter:blur(52px);will-change:transform,opacity}
.hero-glow .g1{width:420px;height:420px;left:-90px;top:-120px;background:radial-gradient(circle,rgba(124,92,252,.40),rgba(124,92,252,0) 68%);animation:breatheA 9s ease-in-out infinite}
.hero-glow .g2{width:460px;height:460px;right:-120px;top:40px;background:radial-gradient(circle,rgba(160,120,255,.32),rgba(160,120,255,0) 68%);animation:breatheB 11s ease-in-out infinite}
.hero-inner{position:relative;z-index:3}
.chip{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 10px 24px -16px rgba(33,30,51,.5);margin-bottom:22px}
.chip .dot{width:9px;height:9px;border-radius:2px;background:var(--violet);flex:none}
.hero h1{font-weight:800;font-size:37px;letter-spacing:-.028em;margin-bottom:18px;max-width:16ch}
.hero h1 .accent{color:var(--violet-deep)}
.hero p.lead{font-size:17px;color:var(--slate);max-width:620px;margin-bottom:28px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .under{margin-top:16px;font-size:13.5px;color:var(--slate);display:flex;align-items:center;gap:8px}
.hero .under .dot{width:8px;height:8px;border-radius:2px;background:var(--violet);flex:none}

/* browservenster-visual */
.hero-visual{position:relative;z-index:2;margin-top:34px}
.hero-visual .frame-glow{position:absolute;inset:-6% -4% -10% -4%;z-index:0;border-radius:30px;background:radial-gradient(60% 60% at 50% 45%,rgba(124,92,252,.30),rgba(124,92,252,0) 70%);filter:blur(20px);animation:breatheGlow 7s ease-in-out infinite}
.browser{position:relative;z-index:2;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(33,30,51,.65),0 12px 30px -18px rgba(33,30,51,.35);animation:breatheFrame 7s ease-in-out infinite;transform-origin:50% 60%}
.browser svg{display:block;width:100%;height:auto}

/* trust strip */
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;padding:16px var(--pad)}
.trust .t{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:var(--ink)}
.trust .t .dot{width:8px;height:8px;border-radius:2px;background:var(--violet)}

/* generieke secties */
.section{padding:66px 0}
.sec-head{max-width:640px;margin-bottom:34px}
.sec-head .ey{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--violet-deep);margin-bottom:12px}
.sec-head .ey .dot{width:8px;height:8px;border-radius:2px;background:var(--violet)}
.sec-head h2{font-size:30px;font-weight:800;margin-bottom:10px}
.sec-head p{color:var(--slate);font-size:16.5px}

/* diensten grid */
.svc{display:grid;grid-template-columns:1fr;gap:16px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(33,30,51,.4);border-color:transparent}
.svc-card .ic-b{width:46px;height:46px;border-radius:13px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center;margin-bottom:16px}
.svc-card .ic-b svg{width:23px;height:23px}
.svc-card h3{font-size:19px;font-weight:700;margin-bottom:7px}
.svc-card p{color:var(--slate);font-size:14.5px;margin-bottom:14px}
.svc-card .more{font-family:var(--display);font-weight:700;font-size:14px;color:var(--violet-deep)}

/* werkwijze */
.steps{display:grid;grid-template-columns:1fr;gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;position:relative}
.step .n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--violet-deep);background:var(--soft);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px}
.step h3{font-size:17.5px;font-weight:700;margin-bottom:6px}
.step p{color:var(--slate);font-size:14px}

/* geo band */
.band{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--ink) 0%,#2C2748 60%,#3A2E63 100%);color:#fff;border-radius:26px}
.band .bwrap{position:relative;z-index:2;padding:52px 30px}
.band .glow{position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,.55),rgba(124,92,252,0) 66%);z-index:1}
.band .ey{color:#D9CEFF;display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-bottom:12px}
.band .ey .dot{width:8px;height:8px;border-radius:2px;background:var(--violet)}
.band h2{font-size:30px;font-weight:800;margin-bottom:12px;max-width:640px}
.band p{color:rgba(255,255,255,.8);max-width:600px;font-size:16.5px;margin-bottom:24px}
.band .btn-primary{background:#fff;color:var(--ink);box-shadow:none}
.band .btn-primary:hover{background:var(--soft);filter:none}

/* waarom */
.why-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.why blockquote{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.3;color:var(--ink);margin-bottom:16px}
.why blockquote .accent{color:var(--violet-deep)}
.why p{color:var(--slate);font-size:16px;margin-bottom:12px}
.why .sig{display:flex;align-items:center;gap:12px;margin-top:18px}
.why .sig .av{width:44px;height:44px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800}
.why .sig .who strong{display:block;font-family:var(--display)}
.why .sig .who span{font-size:13.5px;color:var(--slate)}
.why-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.why-card ul{list-style:none;display:grid;gap:14px}
.why-card li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.why-card li .ck{flex:none;width:26px;height:26px;border-radius:8px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center;font-weight:800;font-size:13px}

/* cta band */
.cta-final{padding:72px 0 88px}
.cta-box{position:relative;overflow:hidden;background:linear-gradient(150deg,#fff,var(--soft));border:1px solid var(--line);border-radius:26px;padding:64px 30px 68px;text-align:center}
.cta-box h2{font-size:32px;font-weight:800;margin-bottom:12px}
.cta-box p{color:var(--slate);font-size:17px;max-width:520px;margin:0 auto 26px}
.cta-box .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-box .glow{position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:520px;height:320px;background:radial-gradient(circle,rgba(124,92,252,.22),rgba(124,92,252,0) 70%)}

/* footer */
.footer{background:var(--ink);color:rgba(255,255,255,.72)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:30px;padding:56px var(--pad) 30px}
.foot-brand img{height:40px;margin-bottom:16px}
.foot-brand p{max-width:280px;font-size:14.5px}
.foot-col h4{font-family:var(--display);color:#fff;font-size:14px;margin-bottom:14px}
.foot-col ul{list-style:none;display:grid;gap:10px}
.foot-col a{font-size:14.5px;color:rgba(255,255,255,.72);transition:color .16s ease}
.foot-col a:hover{color:#fff}
.foot-col .cline{display:block;font-size:14.5px;margin-bottom:8px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px var(--pad) 34px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.55)}
.foot-bottom .dot{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--violet);margin-right:7px;vertical-align:middle}

/* toegankelijkheid + reduced motion */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* animaties */
@keyframes breatheA{0%,100%{transform:translate(0,0) scale(1);opacity:.8}50%{transform:translate(18px,-14px) scale(1.1);opacity:1}}
@keyframes breatheB{0%,100%{transform:translate(0,0) scale(1);opacity:.7}50%{transform:translate(-20px,14px) scale(1.08);opacity:.95}}
@keyframes breatheGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes breatheFrame{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

/* desktop */
@media (min-width:600px){
  .svc{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:2fr 1fr 1fr 1.4fr}
}
@media (min-width:960px){
  :root{--navh:90px}
  .burger{display:none}
  .mobile-panel{display:none !important}
  .nav-links{display:flex;gap:30px;position:absolute;left:50%;transform:translateX(-50%)}
  .nav-actions{display:flex}
  .brand img{height:46px}
  /* megamenu op de breedte van de menubalk */
  .mega{display:block;position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:70;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -30px rgba(33,30,51,.45);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
  .mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
  .mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  .hero{padding-top:0}
  .hero-canvas{padding:calc(var(--navh) + 62px) 0 60px}
  .hero-grid{display:grid;grid-template-columns:1.14fr 0.9fr;gap:48px;align-items:start}
  .hero-inner{max-width:none}
  .hero h1{font-size:62px;max-width:15ch}
  .hero p.lead{font-size:19px}
  .hero-visual{margin-top:178px}
  .svc{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .sec-head h2,.band h2,.cta-box h2{font-size:36px}
  .band .bwrap{padding:64px 56px}
  .why-grid{grid-template-columns:1.15fr 1fr;gap:44px}
  .cta-box{padding:88px 40px 92px}
  .cta-final{padding:104px 0 120px}
  .cta-box h2{margin-bottom:16px}
  .cta-box p{margin-bottom:36px}
  .section{padding:88px 0}
}
@media (min-width:1200px){ .hero h1{font-size:70px;max-width:15ch} .brand img{height:48px} .hero-canvas{padding:calc(var(--navh) + 74px) 0 68px} }

/* sticky nav wordt vaster bij scrollen; glas over wit */
.site-header.scrolled{box-shadow:0 10px 30px -22px rgba(33,30,51,.6)}
@media (min-width:960px){
  .site-header{padding-top:14px}
  .site-header .nav{background:rgba(255,255,255,.72);backdrop-filter:saturate(1.5) blur(10px);-webkit-backdrop-filter:saturate(1.5) blur(10px);border:1px solid rgba(124,92,252,.14);border-radius:20px;padding-left:22px;padding-right:14px;box-shadow:0 14px 40px -28px rgba(33,30,51,.55)}
  .site-header.scrolled{padding-top:0}
  .site-header.scrolled .nav{background:rgba(255,255,255,.94);box-shadow:0 12px 34px -24px rgba(33,30,51,.6)}
}

/* ==========================================================================
   2. WordPress-aanvullingen, niet in de mock-up
   ========================================================================== */

/* skiplink en schermlezers */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;z-index:999;padding:12px 20px;background:var(--ink);color:#fff;border-radius:0 0 12px 0;font-weight:700}
.skip-link:focus{left:0;top:0}

/* ==== Kennisbank: filterbalk, sortering en zoeken ==== */
.kb-balk{padding:28px 0 6px}
.kb-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.kb-filter{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--display);font-weight:600;font-size:14px;padding:9px 15px;border-radius:999px;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;line-height:1}
.kb-filter:hover{border-color:var(--violet);color:var(--violet-deep)}
.kb-filter.is-actief{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 12px 24px -14px rgba(124,92,252,.8)}
.kb-filter-ic{display:inline-flex;width:16px;height:16px}
.kb-filter-ic svg{width:16px;height:16px;stroke-width:1.9}
.kb-balk-in{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.kb-sort{display:flex;align-items:center;gap:10px}
.kb-sort-label{font-family:var(--display);font-weight:600;font-size:13px;color:var(--slate);white-space:nowrap}
.kb-select-wrap{position:relative;display:inline-flex}
.kb-select-wrap::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.kb-select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--display);font-weight:600;font-size:14px;padding:9px 38px 9px 15px;border-radius:999px;cursor:pointer;transition:border-color .16s ease}
.kb-select:hover{border-color:var(--violet)}
.kb-select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,92,252,.16)}
.kb-zoek{position:relative;display:flex;align-items:center;width:100%;max-width:360px}
.kb-zoek-ic{position:absolute;left:15px;display:inline-flex;width:17px;height:17px;color:var(--slate);pointer-events:none}
.kb-zoek-ic svg{width:17px;height:17px}
.kb-zoek-input{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--body);font-size:15px;padding:11px 15px 11px 42px;border-radius:12px;transition:border-color .16s ease,box-shadow .16s ease}
.kb-zoek-input::placeholder{color:var(--slate)}
.kb-zoek-input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,92,252,.16)}
.kb-geen{text-align:center;color:var(--slate);font-size:16px;padding:40px 0}
.kb-sectie{padding-top:24px}
/* categorie-label met icoon op de kaart */
.post-card .cat{display:inline-flex;align-items:center;gap:6px}
.post-card .cat-ic{display:inline-flex;width:15px;height:15px;color:var(--violet)}
.post-card .cat-ic svg{width:15px;height:15px;stroke-width:2}
.post-card[hidden]{display:none}

/* ==== Pillar-brug onderaan de kennisbank ==== */
.pillar-brug-sectie{background:var(--cloud);border-top:1px solid var(--line)}
.pillar-brug-kop{text-align:center;max-width:600px;margin:0 auto 36px}
.pillar-brug-kop h2{font-family:var(--display);font-weight:800;font-size:28px;color:var(--ink);margin:0 0 10px;line-height:1.2}
.pillar-brug-kop p{font-size:16px;color:var(--slate);margin:0;line-height:1.55}
.pillar-brug-grid{display:grid;grid-template-columns:1fr;gap:16px}
.pillar-brug-kaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;text-decoration:none;transition:transform .16s ease,box-shadow .2s ease,border-color .16s ease}
.pillar-brug-kaart:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(33,30,51,.4);border-color:transparent}
.pbk-ic{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:var(--soft);color:var(--violet-deep);margin-bottom:16px}
.pbk-ic svg{width:22px;height:22px;stroke-width:1.9}
.pbk-titel{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);margin-bottom:7px}
.pbk-tekst{font-size:14.5px;color:var(--slate);line-height:1.5;margin-bottom:16px;flex:1}
.pbk-meer{font-family:var(--display);font-weight:700;font-size:14px;color:var(--violet-deep)}
.pillar-brug-kaart:hover .pbk-meer{color:var(--violet)}

/* ==== Homepage: herkenningssectie (pijnpunten, ander ritme dan de pillars) ==== */
.probleem-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.probleem-kaart{display:flex;align-items:flex-start;gap:18px;background:transparent;border:0;border-left:3px solid var(--soft);border-radius:0;padding:6px 0 6px 22px;transition:border-color .18s ease}
.probleem-kaart:hover{border-left-color:var(--violet)}
.probleem-kaart .pk-ic{flex:none;display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:11px;background:var(--soft);color:var(--violet-deep);margin:0}
.probleem-kaart .pk-ic svg{width:21px;height:21px}
.probleem-kaart .pk-tx{display:block}
.probleem-kaart h3{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);margin:2px 0 5px;line-height:1.25}
.probleem-kaart p{font-size:14.5px;color:var(--slate);line-height:1.5;margin:0}
/* kennisbank-teaser: knop gecentreerd onder de artikelen */
.teaser-meer{display:flex;justify-content:center;margin-top:32px}

/* ==== Werkwijze als verbonden tijdlijn (homepage) ==== */
/* Overschrijft de kaart-look: nummers als cirkels op een doorlopende lijn. */
#werkwijze .steps{display:grid;grid-template-columns:1fr;gap:28px;position:relative}
#werkwijze .step{background:transparent;border:0;border-radius:0;padding:0 0 0 62px;position:relative}
#werkwijze .step .n{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px;margin:0;box-shadow:0 10px 22px -10px rgba(124,92,252,.9);z-index:1}
#werkwijze .step h3{margin:6px 0 6px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
#werkwijze .step p{margin:0;font-size:14.5px;color:var(--slate);line-height:1.55}
/* verticale verbindingslijn tussen de cirkels op mobiel */
#werkwijze .step:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:-28px;width:2px;background:linear-gradient(to bottom,var(--violet),rgba(124,92,252,.25));z-index:0}

/* megamenu: klikbare kolomkop naar de pillar-pagina */
.mega-col-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;color:inherit;margin:0 0 10px 8px;padding-bottom:9px;border-bottom:2px solid var(--soft);transition:border-color .18s ease}
.mega-col-kop h4{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--slate);margin:0;padding:0;border:0;transition:color .18s ease}
.mega-col-kop .mega-col-meer{font-family:var(--display);font-size:11px;font-weight:700;color:var(--violet);opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease;white-space:nowrap}
.mega-col-kop:hover{border-color:var(--violet)}
.mega-col-kop:hover h4{color:var(--violet-deep)}
.mega-col-kop:hover .mega-col-meer{opacity:1;transform:translateX(0)}

/* ==========================================================================
   Kennisbank-artikel: eyebrow, tweekoloms met sticky inhoudsopgave, FAQ
   ========================================================================== */

/* eyebrow boven de titel in de hero */
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--violet-deep);margin-bottom:14px}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:2px;background:var(--violet)}

/* meta onder de titel (datum, leesduur) */
.page-hero .meta{display:flex;gap:18px;align-items:center;margin-top:18px;font-size:14px;color:var(--slate)}
.page-hero .meta span{position:relative}
.page-hero .meta span+span::before{content:"";position:absolute;left:-9px;top:50%;width:3px;height:3px;border-radius:50%;background:#C9C0EC;transform:translateY(-50%)}

/* artikel-omhulsel */
.artikel{padding:64px 0 24px;background:#fff}
.wrap-artikel{max-width:1140px;margin:0 auto;padding:0 var(--pad)}
.artikel-grid{display:grid;grid-template-columns:1fr;gap:40px}
.artikel-beeld{margin-bottom:32px}
.artikel-beeld img{width:100%;border-radius:16px;display:block}

/* related-sectie onder een blog: eigen ruimte, correcte uitlijning */
.related-sectie{background:#fff;padding-bottom:8px}

/* blog-hero: titel mag breder dan de standaard tekstkolom */
.single-post .page-hero-tx{max-width:820px}
.single-post .page-hero h1{max-width:820px}
.single-post .page-hero .lead{max-width:660px}

/* sticky inhoudsopgave */
.artikel-zij{display:none}
.toc{position:sticky;top:96px;background:var(--cloud);border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.toc-kop{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.toc-nav{display:flex;flex-direction:column;gap:2px}
.toc-nav a{font-size:14px;line-height:1.4;color:var(--slate);text-decoration:none;padding:7px 12px;border-radius:9px;border-left:2px solid transparent;transition:color .16s ease,background .16s ease,border-color .16s ease}
.toc-nav a:hover{color:var(--violet-deep);background:#fff}
.toc-nav a.actief{color:var(--violet-deep);background:#fff;border-left-color:var(--violet);font-weight:600}

/* leeskolom */
.artikel-lees{min-width:0}
.artikel-lees .prose{max-width:none}
.artikel-lees .prose h2{scroll-margin-top:96px;font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.01em;margin:44px 0 16px;padding-top:8px}
.artikel-lees .prose h2:first-child{margin-top:0}
.artikel-lees .prose h3{font-family:var(--display);font-size:19px;font-weight:700;margin:30px 0 12px}
.artikel-lees .prose p{font-size:17px;line-height:1.75;color:#33304A;margin-bottom:18px}
.artikel-lees .prose ul,.artikel-lees .prose ol{margin:0 0 20px;padding-left:22px}
.artikel-lees .prose li{font-size:17px;line-height:1.7;color:#33304A;margin-bottom:8px}
.artikel-lees .prose a{color:var(--violet-deep);text-decoration:underline;text-underline-offset:2px}

/* uitgelicht tekstkader in een artikel */
.artikel-lees .prose .kader{background:var(--cloud);border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:12px;padding:20px 22px;margin:24px 0}
.artikel-lees .prose .kader p:last-child{margin-bottom:0}

/* inline dienst-CTA in een artikel */
.artikel-lees .prose .dienst-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:linear-gradient(158deg,#2A2140 0%,#3B2A6E 55%,#4B32B0 100%);border-radius:16px;padding:26px 28px;margin:36px 0;box-shadow:0 30px 66px -40px rgba(75,50,176,.7);position:relative;overflow:hidden}
.artikel-lees .prose .dienst-cta::before{content:"";position:absolute;top:-50%;right:-10%;width:50%;height:200%;background:radial-gradient(closest-side,rgba(138,107,255,.4),rgba(138,107,255,0) 70%);pointer-events:none;z-index:0}
.artikel-lees .prose .dienst-cta-tx{flex:1 1 300px;position:relative;z-index:1}
.artikel-lees .prose .dienst-cta-tx strong{display:block;font-family:var(--display);font-size:18px;font-weight:800;color:#fff;margin-bottom:5px;line-height:1.25}
.artikel-lees .prose .dienst-cta-tx p{font-size:14.5px;color:rgba(255,255,255,.8);margin:0;max-width:none;line-height:1.5}
.artikel-lees .prose .dienst-cta .btn-primary{flex:none;position:relative;z-index:1;background:#fff;color:var(--violet-deep);font-family:var(--display);font-weight:700;font-size:15px;padding:13px 22px;border-radius:11px;white-space:nowrap;transition:transform .16s ease,box-shadow .2s ease}
.artikel-lees .prose .dienst-cta a.btn-primary,.artikel-lees .prose .dienst-cta a.btn-primary:hover{text-decoration:none;color:var(--violet-deep)}
.artikel-lees .prose .dienst-cta .btn-primary:hover{background:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(0,0,0,.4)}

/* iconenrij in een artikel: drie of vier punten met symbool */
.artikel-lees .prose .icoonrij{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0;padding:0;list-style:none}
.artikel-lees .prose .icoonrij li{display:flex;gap:14px;align-items:flex-start;margin:0;background:var(--cloud);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.artikel-lees .prose .icoonrij .ir-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center}
.artikel-lees .prose .icoonrij .ir-ic svg{width:20px;height:20px}
.artikel-lees .prose .icoonrij strong{display:block;font-family:var(--display);font-size:16px;color:var(--ink);margin-bottom:3px}
.artikel-lees .prose .icoonrij span{font-size:15px;color:var(--slate);line-height:1.5}

/* uitgelicht cijfer in een artikel */
.artikel-lees .prose .cijfer-blok{display:flex;gap:20px;align-items:center;background:linear-gradient(160deg,#fff,var(--soft));border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:26px 0}
.artikel-lees .prose .cijfer-blok .groot{font-family:var(--display);font-size:44px;font-weight:800;color:var(--violet-deep);line-height:1;flex:none}
.artikel-lees .prose .cijfer-blok p{margin:0;font-size:15.5px;color:#33304A;line-height:1.5}

/* twee-koloms vergelijking in een artikel */
.artikel-lees .prose .verg{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0}
.artikel-lees .prose .verg-kol{border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.artikel-lees .prose .verg-kol.a{background:#fff}
.artikel-lees .prose .verg-kol.b{background:var(--cloud)}
.artikel-lees .prose .verg-kol h4{font-family:var(--display);font-size:16px;font-weight:800;margin:0 0 12px;color:var(--ink);display:flex;align-items:center;gap:8px}
.artikel-lees .prose .verg-kol .vk-badge{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.artikel-lees .prose .verg-kol.a .vk-badge{background:var(--slate)}
.artikel-lees .prose .verg-kol.b .vk-badge{background:var(--violet)}
.artikel-lees .prose .verg-kol ul{margin:0;padding-left:0;list-style:none}
.artikel-lees .prose .verg-kol li{font-size:15px;line-height:1.5;color:#33304A;padding-left:22px;position:relative;margin-bottom:9px}
.artikel-lees .prose .verg-kol li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--violet)}

/* bronnenlijst onderaan een artikel */
.artikel-lees .prose .bronnen{margin:36px 0 0;padding:20px 22px;background:var(--cloud);border:1px solid var(--line);border-radius:12px}
.artikel-lees .prose .bronnen h3{font-family:var(--display);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin:0 0 12px}
.artikel-lees .prose .bronnen ol{margin:0;padding-left:20px}
.artikel-lees .prose .bronnen li{font-size:14px;line-height:1.5;color:var(--slate);margin-bottom:7px}
.artikel-lees .prose .bronnen a{color:var(--violet-deep)}

/* FAQ onder het artikel */
.artikel-faq{max-width:760px;margin:56px auto 0}
/* FAQ via shortcode op een gewone pagina: eigen ruimte en centrering */
.artikel-faq--sc{margin:8px auto 0;padding:0 var(--pad)}
.faq-titel{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.01em;margin-bottom:22px}
.faq-lijst{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .18s ease,box-shadow .2s ease}
.faq-item[open]{border-color:transparent;box-shadow:0 20px 44px -30px rgba(33,30,51,.4)}
.faq-vraag{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink)}
.faq-vraag::-webkit-details-marker{display:none}
.faq-plus{position:relative;flex:none;width:20px;height:20px}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--violet);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.faq-plus::before{top:9px;left:2px;width:16px;height:2.5px}
.faq-plus::after{top:2px;left:9px;width:2.5px;height:16px}
.faq-item[open] .faq-plus::after{transform:rotate(90deg);opacity:0}
.faq-antwoord{padding:0 22px 20px}
.faq-antwoord p{font-size:16px;line-height:1.7;color:#33304A;margin:0}

/* paginakop op binnenpagina's: zelfde gradient, zodat de balk overal wegvalt */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--cloud) 0%,#F1EDFC 52%,var(--soft) 100%);margin-top:calc(-1 * var(--navh));padding:calc(var(--navh) + 30px) 0 40px}
.page-hero>.wrap{position:relative;z-index:3}
.page-hero .hero-glow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.page-hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.page-hero-tx{max-width:560px}
.page-hero h1{font-size:34px;font-weight:800;letter-spacing:-.025em;max-width:14ch}
.page-hero h1 .accent{color:var(--violet-deep)}
.page-hero .chip{margin-bottom:16px}
.page-hero .lead{font-size:17px;color:#2C2942;max-width:600px;margin-top:16px;line-height:1.6}
.page-hero .crumbs{font-size:13.5px;color:var(--slate);margin-bottom:14px}
.page-hero .crumbs a:hover{color:var(--violet-deep)}
.page-hero .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--slate);margin-top:16px}
.page-hero-visual{position:relative;z-index:2}
.page-hero-visual .frame-glow{position:absolute;inset:-8% -4% -12% -4%;z-index:0;border-radius:30px;background:radial-gradient(60% 60% at 50% 45%,rgba(124,92,252,.28),rgba(124,92,252,0) 70%);filter:blur(20px);animation:breatheGlow 7s ease-in-out infinite}
.page-hero-visual .vis{position:relative;z-index:2;width:100%;height:auto;border-radius:16px;overflow:hidden;display:block;box-shadow:0 40px 90px -50px rgba(33,30,51,.6),0 12px 30px -18px rgba(33,30,51,.32);animation:breatheFrame 7s ease-in-out infinite;transform-origin:50% 60%}

/* symbolenrij onder de H1 in de hero */
.hero-symbols{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hs{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(124,92,252,.16);border-radius:999px;padding:8px 15px 8px 9px;box-shadow:0 10px 24px -18px rgba(33,30,51,.5);transition:transform .16s ease,box-shadow .2s ease}
.hs:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(33,30,51,.6)}
.hs-ic{width:30px;height:30px;border-radius:9px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center;flex:none}
.hs-ic svg{width:16px;height:16px}
.hs-tx{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink)}

/* introparagraaf, direct onder de paginakop in de body */
.page-intro{padding:44px 0 8px;background:#fff}
.page-intro .wrap{max-width:760px}
.page-intro p{font-size:18px;line-height:1.6;color:#3C3950}
.page-intro p + p{margin-top:14px}

/* sectie-intro's breder en iets donkerder, voorkomt ingesnoerde tekstblokken */
.sec-head{max-width:820px}
.sec-head p{color:#3C3950;line-height:1.6;max-width:680px}
.sec-head[style*="text-align:center"] p{margin-left:auto;margin-right:auto}

/* subtiel hover-effect op alle visuals en kaarten met een beeld */
.feature-visual,.eis,.svc-card,.post-card,.hs,.form-card,.why-card{transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.feature-visual .fv,.feature-visual .vis,.feature-visual svg{transition:transform .25s ease,box-shadow .25s ease}
.feature-visual:hover .fv,.feature-visual:hover .vis,.feature-visual:hover>svg{transform:translateY(-4px) scale(1.012);box-shadow:0 44px 80px -46px rgba(33,30,51,.6)}
.eis:hover{transform:translateY(-3px);box-shadow:0 26px 50px -32px rgba(33,30,51,.42);border-color:transparent}
.eis:hover .eis-ic{background:var(--violet);color:#fff}
.eis-ic{transition:background .18s ease,color .18s ease}

/* dienstkaart-icoon beweegt mee op hover */
.svc-card .ic-b{transition:background .18s ease,color .18s ease,transform .18s ease}
.svc-card:hover .ic-b{background:var(--violet);color:#fff;transform:scale(1.06)}
.svc-card:hover .more{color:var(--violet-deep)}
.svc-card .more{transition:letter-spacing .2s ease}
.svc-card:hover .more{letter-spacing:.02em}

/* contactblok: manieren van bereikbaarheid als icoonregels */
.contactblok{display:grid;gap:12px;margin-top:26px}
.cta-line{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:inherit;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease}
a.cta-line:hover{transform:translateY(-2px);box-shadow:0 20px 40px -28px rgba(33,30,51,.4);border-color:transparent}
.cta-line .ic-b{width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center;flex:none;transition:background .18s ease,color .18s ease}
a.cta-line:hover .ic-b{background:var(--violet);color:#fff}
.cta-line .ic-b svg{width:21px;height:21px}
.cta-line span:last-child{font-size:14.5px;color:var(--slate);line-height:1.4}
.cta-line strong{color:var(--ink);font-size:15.5px}

/* offerte-vergelijking: twee kaarten naast elkaar, een gewoon en een uitgelicht */
.offertes{display:grid;grid-template-columns:1fr;gap:20px}
.offerte{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;position:relative;display:flex;flex-direction:column}
.offerte.plus{border:0;background:linear-gradient(160deg,#fff 0%,var(--soft) 100%);box-shadow:0 30px 70px -44px rgba(106,71,245,.55);outline:2px solid rgba(124,92,252,.28);outline-offset:-2px}
.offerte .badge{position:absolute;top:-13px;left:26px;background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:#fff;font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.02em;padding:6px 14px;border-radius:999px;box-shadow:0 12px 24px -12px rgba(106,71,245,.7)}
.offerte h3{font-family:var(--display);font-size:21px;font-weight:800;margin-bottom:6px}
.offerte .sub{color:var(--slate);font-size:14.5px;margin-bottom:20px}
.offerte ul{list-style:none;display:grid;gap:12px;margin:0 0 22px}
.offerte li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#3C3950}
.offerte li .ck{flex:none;width:24px;height:24px;border-radius:7px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center;font-weight:800;font-size:12px;margin-top:1px}
.offerte.plus li .ck{background:var(--violet);color:#fff}
.offerte .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--slate)}
.offerte.plus .foot{border-color:rgba(124,92,252,.2)}
.offerte .foot strong{color:var(--violet-deep)}

/* high-end offertevergelijking (versie 2, cache-vrij via nieuwe namen) */
.dealcompare{position:relative;display:grid;grid-template-columns:1fr;gap:22px}
.dealcard{position:relative;border-radius:22px;padding:32px 28px 30px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .2s ease,box-shadow .25s ease}
.dealcard:hover{transform:translateY(-4px)}
.dealcard .kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.dealcard .kicker .sq{width:9px;height:9px;border-radius:3px;background:var(--line)}
.dealcard h3{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.dealcard .lead-sm{color:var(--slate);font-size:15px;line-height:1.5;margin-bottom:24px}
.dealcard .feats{list-style:none;display:grid;gap:15px;margin:0 0 26px}
.dealcard .feats li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:#33304A}
.dealcard .feats li .fi{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-top:1px}
.dealcard .feats li .fi svg{width:15px;height:15px}
.dealcard .foot-note{margin-top:auto;font-size:13.5px;line-height:1.5;color:var(--slate);padding-top:20px;border-top:1px solid var(--line)}

/* linkerkaart: rustig, de basis */
.dealcard.base .feats li .fi{background:var(--soft);color:var(--violet-deep)}

/* rechterkaart: het uitgelichte, premium paneel in violet */
.dealcard.hero-deal{background:linear-gradient(158deg,#2A2140 0%,#3B2A6E 55%,#4B32B0 100%);border:0;box-shadow:0 44px 90px -48px rgba(75,50,176,.85),0 10px 30px -18px rgba(33,30,51,.5)}
.dealcard.hero-deal::before{content:"";position:absolute;top:-40%;right:-20%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(138,107,255,.55),rgba(138,107,255,0) 70%);pointer-events:none}
.dealcard.hero-deal .kicker{color:rgba(255,255,255,.7)}
.dealcard.hero-deal .kicker .sq{background:#8A6BFF}
.dealcard.hero-deal h3{color:#fff}
.dealcard.hero-deal .lead-sm{color:rgba(255,255,255,.82)}
.dealcard.hero-deal .feats li{color:rgba(255,255,255,.92)}
.dealcard.hero-deal .feats li .fi{background:rgba(255,255,255,.16);color:#fff}
.dealcard.hero-deal .foot-note{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.18)}
.dealcard.hero-deal .foot-note strong{color:#fff}
.dealcard .ribbon{position:absolute;top:20px;right:-40px;transform:rotate(45deg);background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:#fff;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;padding:7px 52px;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);z-index:3}
.dealcard.hero-deal .ribbon{background:#fff;color:var(--violet-deep)}
.dealcompare-note{max-width:720px;margin:26px auto 0;text-align:center;font-size:15px;line-height:1.6;color:#3C3950}

/* USP-strip onder de kop */
.usp-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp-strip .wrap{display:flex;flex-wrap:wrap;gap:14px 46px;justify-content:center;padding:16px var(--pad)}
.usp-strip .t{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:var(--ink)}
.usp-strip .t .dot{width:8px;height:8px;border-radius:2px;background:var(--violet);flex:none}

/* breed CTA-blok met tekst en formulier als twee helften */
.cta-band{padding:56px 0 90px;background:#fff}.cta-band-in{position:relative;overflow:hidden;background:linear-gradient(155deg,#fff 0%,var(--soft) 100%);border:1px solid var(--line);border-radius:26px;padding:32px 24px;display:grid;grid-template-columns:1fr;gap:28px}
.cta-band-tx .ey{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--violet-deep);margin-bottom:12px}
.cta-band-tx .ey .dot{width:8px;height:8px;border-radius:2px;background:var(--violet)}
.cta-band-tx h2{font-size:28px;font-weight:800;margin-bottom:12px}
.cta-band-tx p{color:var(--slate);font-size:16.5px;margin-bottom:20px}
.cta-punten{list-style:none;display:grid;gap:12px;margin-bottom:22px}
.cta-punten li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.cta-punten li .ck{flex:none;width:26px;height:26px;border-radius:8px;background:#fff;color:var(--violet-deep);display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:0 6px 16px -10px rgba(33,30,51,.5)}
.cta-band-alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:14.5px;color:var(--slate);border-top:1px solid var(--line);padding-top:18px}
.cta-band-alt a{font-weight:700;color:var(--violet-deep);border-bottom:1.5px solid rgba(124,92,252,.35)}
.cta-band-alt a:hover{border-color:var(--violet-deep)}
.cta-band-form .form-card{box-shadow:0 30px 70px -40px rgba(33,30,51,.5)}

/* lopende tekst in pagina's en artikelen */
.prose{max-width:760px}
.prose h2{font-size:26px;font-weight:800;margin:38px 0 12px}
.prose h3{font-size:20px;font-weight:700;margin:28px 0 10px}
.prose p{margin-bottom:16px;font-size:16.5px;color:#3C3950}
.prose ul,.prose ol{margin:0 0 18px 22px;display:grid;gap:8px}
.prose li{font-size:16.5px;color:#3C3950}
.prose a{color:var(--violet-deep);border-bottom:1.5px solid rgba(124,92,252,.35);transition:border-color .16s ease}
.prose a:hover{border-color:var(--violet-deep)}
.prose img{border-radius:16px;margin:22px 0}
.prose blockquote{border-left:3px solid var(--violet);background:var(--cloud);padding:18px 22px;border-radius:0 14px 14px 0;margin:22px 0;font-size:17px}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--display);font-weight:700}
.prose figure{margin:22px 0}
.prose figcaption{font-size:13.5px;color:var(--slate);margin-top:8px}
.prose>:first-child{margin-top:0}

/* uitlijning uit de klassieke bewerker */
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignleft{float:left;margin:0 22px 16px 0}
.alignright{float:right;margin:0 0 16px 22px}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13.5px;color:var(--slate);margin-top:8px}

/* kennisbank: kaartenoverzicht */
.post-grid{display:grid;grid-template-columns:1fr;gap:18px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(33,30,51,.4);border-color:transparent}
.post-card .thumb{aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .pc-in{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .cat{font-size:12.5px;font-weight:700;color:var(--violet-deep)}
.post-card h3{font-size:18px;font-weight:700;line-height:1.3}
.post-card p{font-size:14.5px;color:var(--slate)}
.post-card .more{margin-top:auto;font-family:var(--display);font-weight:700;font-size:14px;color:var(--violet-deep)}

/* paginering */
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14.5px;transition:border-color .16s ease,color .16s ease}
.pagination .page-numbers:hover{border-color:var(--violet);color:var(--violet-deep)}
.pagination .page-numbers.current{background:var(--grad-cta);color:#fff;border-color:transparent}

/* formulieren, ook die van Formidable */
.frm_forms,.mdv-form{max-width:560px}
.frm_forms fieldset{border:0;margin:0;padding:0;min-width:0}
.frm_forms legend{display:none}
.frm_form_fields>fieldset{border:0;padding:0;margin:0}
.frm_fields_container{border:0}
.with_frm_style{border:0;background:none;box-shadow:none;padding:0}
.frm_form_field{margin-bottom:16px}
.frm_primary_label,.mdv-form label{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;margin-bottom:7px;color:var(--ink)}
.frm_required{color:var(--violet-deep)}
.frm_forms input[type=text],.frm_forms input[type=email],.frm_forms input[type=tel],.frm_forms input[type=url],.frm_forms select,.frm_forms textarea,.mdv-form input,.mdv-form textarea,.mdv-form select{width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink);background:#fff;border:1.6px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .18s ease,box-shadow .18s ease}
.frm_forms input:focus,.frm_forms textarea:focus,.frm_forms select:focus,.mdv-form input:focus,.mdv-form textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,92,252,.14)}
.frm_forms textarea,.mdv-form textarea{min-height:130px;resize:vertical}
.frm_checkbox label,.frm_radio label{font-family:var(--body);font-weight:400;font-size:14.5px;color:var(--slate);display:flex;gap:9px;align-items:flex-start}
.frm_forms .frm_submit{margin-top:6px}
.frm_forms .frm_button_submit,.mdv-form button[type=submit]{font-family:var(--display);font-weight:700;font-size:15px;border:0;border-radius:999px;padding:13px 26px;color:#fff;background:var(--grad-cta);background-size:140% 140%;background-position:0% 50%;cursor:pointer;transition:transform .16s ease,background-position .18s ease,box-shadow .2s ease;box-shadow:0 10px 24px -12px rgba(124,92,252,.85)}
.frm_forms .frm_button_submit:hover,.mdv-form button[type=submit]:hover{transform:translateY(-1px);background-position:100% 50%;box-shadow:0 16px 32px -10px rgba(106,71,245,.9)}
.frm_error,.frm_error_style{font-size:14px;color:#B4304A;background:#FDF2F4;border:1px solid #F5D2DA;border-radius:12px;padding:12px 14px}
.frm_message,.frm_success_style{font-size:15px;background:var(--soft);border:1px solid rgba(124,92,252,.22);border-radius:14px;padding:18px 20px}
/* samengesteld naamveld (voor- en achternaam) zonder omkaderende rand */
.frm_combo_inputs_container{border:0;padding:0;gap:14px;display:flex}
.frm_combo_inputs_container>div{flex:1;padding:0}
.frm_primary_label+.frm_combo_inputs_container{margin-top:0}
.frm_form_field .frm_combo_inputs_container label{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--slate);margin-top:5px}

/* een sectie die strak op het volgende blok moet aansluiten */
.section.strak-onder{padding-bottom:36px}

/* formulier in een kaart, voor gebruik op dienstpagina's */
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.form-card h2{font-size:22px;margin-bottom:6px}
.form-card p.sub{color:var(--slate);font-size:15px;margin-bottom:18px}

/* twee kolommen, voor content naast een formulier of kaart */
.split{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}

/* laatste artikelen onder een dienstpagina */
.related{border-top:1px solid var(--line);padding-top:34px;margin-top:44px}

/* afwisselende rij: tekst naast een visual, voor tekstzware uitleg */
.feature{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.feature + .feature{margin-top:64px}
.feature-tx .step-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:14px;color:var(--violet-deep);background:var(--soft);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.feature-tx h3{font-size:23px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em}
.feature-tx p{color:#3C3950;font-size:16px;margin-bottom:12px}
.feature-tx p:last-child{margin-bottom:0}
.feature-visual{position:relative}
.feature-visual .fv{width:100%;height:auto;display:block;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(33,30,51,.5)}
.feature-visual .fv-glow{position:absolute;inset:-6% -4% -10% -4%;z-index:-1;border-radius:26px;background:radial-gradient(60% 60% at 50% 50%,rgba(124,92,252,.22),rgba(124,92,252,0) 70%);filter:blur(18px)}

/* bredere sectie-inhoud, voor afwisseling met de gecentreerde secties */
.section.breed>.wrap{max-width:100%}
.wrap-breed{width:100%;max-width:1340px;margin:0 auto;padding:0 var(--pad)}

/* visuele kaartenrij, elk met het bijpassende symbool linksboven */
.eisen{display:grid;grid-template-columns:1fr;gap:16px}
.eis{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px 24px}
.eis .eis-ic{width:46px;height:46px;border-radius:13px;background:var(--soft);color:var(--violet-deep);display:grid;place-items:center;margin-bottom:16px}
.eis .eis-ic svg{width:23px;height:23px}
.eis h4{font-family:var(--display);font-size:16.5px;font-weight:700;margin-bottom:6px}
.eis p{font-size:14.5px;color:var(--slate)}

/* twee brede infokolommen: tekst links, kaart rechts, ruimer dan split */
.info-breed{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}

/* opvallende conclusie-balk, gecentreerd */
.conclusie{margin:48px auto 0;max-width:860px;background:linear-gradient(135deg,var(--violet) 0%,var(--violet-deep) 100%);color:#fff;border-radius:16px;padding:20px 32px;text-align:center;box-shadow:0 24px 50px -28px rgba(106,71,245,.7)}
.conclusie p{font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.5;margin:0;max-width:680px;margin-left:auto;margin-right:auto}
.conclusie .accent{color:#fff;opacity:.85}

/* dienstenkaart als link, voor gebruik in de pagina-HTML */
a.svc-card{display:block;color:inherit}
a.svc-card .more{display:inline-block;margin-top:auto}

/* 404 en zoekresultaten */
.simple-page{padding:70px 0 90px}
.simple-page .wrap{max-width:760px}

/* juridische links onderin de footer */
.foot-legal ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}
.foot-legal a{font-size:13px;color:rgba(255,255,255,.55)}
.foot-legal a:hover{color:#fff}

/* logo's scherp en op vaste maat, voorkomt vervorming en half laden */
.brand img{height:44px;width:auto;image-rendering:auto}
.foot-brand img{height:46px;width:auto;margin-bottom:16px;image-rendering:auto}

/* het gecentreerde CTA-blok (mdv_cta) leesbaarder: rustige basis, gloed alleen bovenin */
.cta-box{background:#fff;border:1px solid var(--line)}
.cta-box .glow{top:-160px;height:300px;opacity:.7}
.cta-box h2,.cta-box p{position:relative;z-index:2}

/* de eerste sectie sluit strakker aan op de paginakop */
.page-hero + .section,.page-hero + article.section{padding-top:38px}
.usp-strip + .section,.usp-strip + article.section{padding-top:52px}

@media (min-width:600px){
  .post-grid{grid-template-columns:1fr 1fr}
  .cta-punten{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .page-hero{padding:calc(var(--navh) + 52px) 0 52px}
  .page-hero.has-visual .page-hero-grid{grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:start}
  .page-hero-tx{padding-top:14px}
  .page-hero h1{font-size:48px}
  .page-hero .lead{font-size:19px;max-width:540px}
  .page-hero + .section,.page-hero + article.section{padding-top:56px}
  .usp-strip + .section,.usp-strip + article.section{padding-top:72px}
  .post-grid{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1.25fr .9fr;gap:44px}
  .prose h2{font-size:30px}
  .cta-band{padding:64px 0 104px}
  .cta-band-in{grid-template-columns:1fr 1fr;gap:48px;padding:52px 52px;align-items:start}
  .cta-band-tx{padding-top:6px}
  .cta-band-tx h2{font-size:32px}
  .feature{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .feature + .feature{margin-top:96px}
  .feature.omgekeerd .feature-tx{order:2}
  .feature.omgekeerd .feature-visual{order:1}
  .feature-tx h3{font-size:26px}
  /* om-en-om een bredere visual, geeft ritme en benut de breedte */
  .feature.wijd{grid-template-columns:0.82fr 1.18fr}
  .feature.wijd.omgekeerd{grid-template-columns:1.18fr 0.82fr}
  .eisen{grid-template-columns:repeat(4,1fr)}
  .info-breed{grid-template-columns:1.35fr 1fr;gap:52px}
  .offertes{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .dealcompare{grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
  .dealcard.hero-deal{transform:scale(1.03)}
  .dealcard.hero-deal:hover{transform:scale(1.03) translateY(-4px)}
  .artikel-grid{grid-template-columns:250px 1fr;gap:56px;align-items:start}
  .artikel-zij{display:block}
  .artikel-lees .prose .icoonrij{grid-template-columns:1fr 1fr}
  .artikel-lees .prose .verg{grid-template-columns:1fr 1fr}
  .kb-balk-in{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .kb-zoek{flex:none}
  .kb-sort{flex:none}
  .pillar-brug-grid{grid-template-columns:repeat(4,1fr)}
  .probleem-grid{grid-template-columns:repeat(3,1fr)}
  /* werkwijze horizontaal met doorlopende lijn */
  #werkwijze .steps{grid-template-columns:repeat(4,1fr);gap:24px}
  #werkwijze .step{padding:62px 0 0 0}
  #werkwijze .step .n{left:0;top:0}
  #werkwijze .step:not(:last-child)::before{left:44px;top:21px;bottom:auto;right:-24px;width:auto;height:2px;background:linear-gradient(to right,var(--violet),rgba(124,92,252,.25))}
}
@media (min-width:1200px){
  .page-hero.has-visual .page-hero-grid{grid-template-columns:1.1fr 0.9fr;gap:52px}
  .page-hero h1{font-size:52px}
}

/* ==== Mobiele correcties (max-width) ==== */
@media (max-width:820px){
  /* 1. Announcement bar strakker: dot weg, compacte regel */
  .announce .wrap{padding-top:10px;padding-bottom:10px;gap:6px;min-height:0}
  .announce .dot{display:none}
  .announce{font-size:12.5px;line-height:1.35}

  /* 3 + 4. Sticky menubalk: wit en ondoorzichtig, minder loze ruimte boven */
  .site-header{padding-top:0}
  .site-header .nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:0 6px 20px -16px rgba(33,30,51,.5);padding-left:var(--pad);padding-right:8px}
  .site-header.scrolled .nav{background:#fff;box-shadow:0 8px 24px -16px rgba(33,30,51,.6)}
  /* 3 + 4. Hero: de chip verdwijnt (nam onnodig ruimte in) en de tagline is
        er op mobiel helemaal uit. De titel krijgt wat meer lucht onder de
        menubalk, zodat hij niet vastplakt. */
  .hero-canvas{padding-top:calc(var(--navh) + 42px)}
  .hero .chip{display:none}
  .hero .under{display:none}

  /* 2. Hamburger opvallender: violet vlak zodat hij duidelijk klikbaar is */
  .burger{background:var(--soft);border-radius:12px;color:var(--violet-deep);width:44px;height:44px;padding:12px}

  /* 5. USP-strips als nette checklist: geen vierkantje meer maar een subtiel
        violet vinkje voor elke regel. Links uitgelijnd, rustige scheiding. */
  .trust .wrap,.usp-strip .wrap{flex-direction:column;align-items:stretch;gap:0;padding-top:4px;padding-bottom:4px}
  .trust .t,.usp-strip .t{justify-content:flex-start;gap:13px;font-size:14.5px;padding:13px 2px;border-bottom:1px solid var(--line)}
  .trust .t:last-child,.usp-strip .t:last-child{border-bottom:0}
  .trust .t .dot,.usp-strip .t .dot{width:9px;height:15px;border:0;border-right:2.5px solid var(--violet);border-bottom:2.5px solid var(--violet);border-radius:0;background:none;transform:rotate(45deg);margin:0 6px 4px 3px}
  .usp-strip + .section,.usp-strip + article.section{padding-top:40px}

  /* 6. Footer: alles netjes links uitgelijnd, niet uit elkaar geduwd */
  .foot-bottom{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;text-align:left}
  .foot-grid{text-align:left}
  .foot-col{text-align:left}
}

/* 2. Menu-items in het mobiele paneel: nette chevron rechts als navigatie-accent */
.m-item>a{position:relative}
.mobile-panel>.wrap>.m-item>a::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);transform:rotate(-45deg);opacity:.5}
.m-cta .btn::after{content:none}