.dr-webdesign{
  --blue:#0a66c2;
  --blue-dark:#004182;
  --ink:#18191a;
  --copy:#394049;
  --muted:#6b7280;
  --line:#d9dee4;
  --soft:#f4f6f8;
  --soft-blue:#eef5fb;
  --white:#fff;
  --max:1180px;
}
.dr-webdesign,.dr-webdesign *{box-sizing:border-box}
body.dr-webdesign-active main{padding-block-start:0}
body.dr-webdesign-active .entry-content{max-width:none}
.dr-webdesign{
  background:#fff;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.dr-webdesign p,.dr-webdesign li,.dr-webdesign span,.dr-webdesign b,.dr-webdesign strong{color:inherit;-webkit-text-fill-color:currentColor}
.dr-webdesign a{color:inherit;text-decoration:none}
.dr-webdesign .wrap{width:min(calc(100% - 40px),var(--max));margin-inline:auto}

.hero{padding:84px 0 66px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.66fr);gap:90px;align-items:start}
.kicker{display:flex;align-items:center;gap:12px;color:var(--blue);font-size:13px;font-weight:780;margin-bottom:24px}
.kicker:before{content:"";width:38px;height:2px;background:var(--blue)}
.dr-webdesign h1,.dr-webdesign h2,.dr-webdesign h3{background:none!important;color:inherit!important;-webkit-background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;font-family:inherit;text-wrap:balance}
.dr-webdesign h1{font-size:clamp(48px,6.2vw,82px);line-height:.97;letter-spacing:-.057em;margin:0 0 30px;max-width:920px;font-weight:800}
.hero-deck{font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--copy);max-width:800px;margin:0 0 34px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;min-height:48px;padding:0 20px;align-items:center;justify-content:center;border:1px solid var(--ink);font-size:14px;font-weight:760}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.dr-webdesign .btn:focus-visible,.dr-webdesign a:focus-visible{outline:3px solid rgba(10,102,194,.32);outline-offset:3px}
.hero-aside{border-left:4px solid var(--blue);padding:7px 0 7px 27px}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted);margin-bottom:13px}
.hero-aside strong{display:block;font-size:27px;line-height:1.18;letter-spacing:-.035em;margin-bottom:12px}
.hero-aside p{font-size:14px;color:var(--muted);margin:0}

.signal{background:var(--soft);border-bottom:1px solid var(--line)}
.signal .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.signal-item{padding:22px 24px 22px 0;margin-right:24px;border-right:1px solid var(--line)}
.signal-item:last-child{border-right:0;margin-right:0}
.signal-item b{display:block;font-size:13px;margin-bottom:4px}
.signal-item span{font-size:12px;color:var(--muted)}

.statement{padding:92px 0}
.statement-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:86px}
.rail .eyebrow{font-size:11px;color:var(--blue);font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.rail h2{font-size:30px;line-height:1.12;letter-spacing:-.04em;margin:0 0 17px}
.rail p{font-size:14px;color:var(--muted);margin:0;max-width:260px}
.big-quote{font-size:clamp(32px,4.3vw,56px);line-height:1.08;letter-spacing:-.048em;font-weight:760;margin:0 0 26px;max-width:860px}
.statement-copy{font-size:17px;line-height:1.65;color:var(--copy);max-width:800px;margin:0}

.paths{padding:0 0 92px}
.section-title{margin:0;padding:0 0 28px;font-size:clamp(30px,3.8vw,46px);line-height:1.08;letter-spacing:-.04em}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.path{padding:38px 42px 42px 0}
.path + .path{border-left:1px solid var(--line);padding-left:42px}
.path-num{font-size:12px;color:var(--blue);font-weight:800;margin-bottom:18px}
.path h3{font-size:clamp(25px,2.35vw,32px);line-height:1.12;letter-spacing:-.035em;margin:0 0 14px}
.path p{font-size:15px;color:var(--copy);margin:0 0 24px;max-width:500px}
.path ul{margin:0;padding:0;list-style:none}
.path li{padding:10px 0;border-top:1px solid var(--line);font-size:14px;display:flex;gap:11px}
.path li:before{content:"→";color:var(--blue);font-weight:800}

.process{padding:92px 0;background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process-head{display:grid;grid-template-columns:300px minmax(0,1fr);gap:86px;margin-bottom:46px}
.process-intro h2{font-size:clamp(36px,4.3vw,54px);line-height:1.05;letter-spacing:-.048em;margin:0 0 16px}
.process-intro p{font-size:16px;color:var(--copy);margin:0;max-width:700px}
.steps{border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:90px 1fr 220px;gap:28px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.step .no{font-size:12px;color:var(--blue);font-weight:800;padding-top:4px}
.step h3{font-size:18px;margin:0 0 5px;letter-spacing:-.02em}
.step p{font-size:14px;color:var(--muted);margin:0;max-width:650px}
.step .output{font-size:12px;font-weight:720;color:var(--copy);text-align:right;padding-top:4px}

.scope{padding:92px 0}
.scope-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:86px}
.scope-table{border-top:3px solid var(--ink)}
.scope-row{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.scope-row b{font-size:13px}
.scope-row div{font-size:14px;color:var(--copy)}
.scope-row ul{margin:0;padding-left:18px}
.scope-row li{margin:0 0 6px}
.portfolio-item h3{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.02em}
.portfolio-item p{margin:0 0 14px}
.portfolio-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue)!important;-webkit-text-fill-color:var(--blue)!important;font-weight:760;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:4px}
.portfolio-link:hover{color:var(--blue-dark)!important;-webkit-text-fill-color:var(--blue-dark)!important}

.audit{padding:92px 0;background:var(--ink);color:#fff}
.audit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:start}
.audit .kicker{color:#82b7e8}
.audit .kicker:before{background:#82b7e8}
.audit h2{font-size:clamp(38px,4.7vw,60px);line-height:1.03;letter-spacing:-.05em;margin:0 0 20px;max-width:720px;color:#fff!important;-webkit-text-fill-color:#fff!important}
.audit p{font-size:17px;line-height:1.6;color:#d2d7dc;margin:0;max-width:720px}
.audit-list{border-top:1px solid #586069}
.audit-row{display:grid;grid-template-columns:82px 1fr;padding:17px 0;border-bottom:1px solid #444a50;gap:20px}
.audit-row span{font-size:12px;color:#82b7e8;font-weight:800}
.audit-row b{font-size:14px;font-weight:650}

.maintenance{padding:92px 0}
.maintenance-grid{display:grid;grid-template-columns:1fr 330px;gap:86px;align-items:start}
.maintenance h2{font-size:clamp(36px,4.5vw,56px);line-height:1.05;letter-spacing:-.048em;margin:0 0 20px;max-width:760px}
.maintenance p{font-size:17px;color:var(--copy);margin:0;max-width:760px}
.maintenance-aside{border-left:4px solid var(--blue);padding-left:26px}
.maintenance-aside b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.maintenance-aside p{font-size:14px;font-weight:650;color:var(--ink);line-height:1.55}

.cta-zone{padding:82px 0;background:var(--soft-blue);border-top:1px solid #c7dced}
.cta-grid{display:grid;grid-template-columns:1fr 300px;gap:80px;align-items:end}
.cta-zone h2{font-size:clamp(38px,5vw,62px);line-height:1.01;letter-spacing:-.052em;margin:0 0 18px;max-width:790px}
.cta-zone p{font-size:17px;color:var(--copy);margin:0;max-width:760px}
.cta-side{display:flex;flex-direction:column;gap:12px}
.cta-side .btn{width:100%}
.note{font-size:12px;color:var(--muted);margin-top:10px}

@media(max-width:920px){
  .hero-grid,.statement-grid,.process-head,.scope-grid,.audit-grid,.maintenance-grid,.cta-grid{grid-template-columns:1fr;gap:42px}
  .signal .wrap{grid-template-columns:1fr 1fr}
  .signal-item:nth-child(2){border-right:0;margin-right:0}
  .path-grid{grid-template-columns:1fr}
  .path + .path{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .step{grid-template-columns:70px 1fr auto}
}
@media(max-width:620px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .hero{padding:58px 0 48px}
  .dr-webdesign h1{font-size:45px}
  .hero-deck{font-size:18px}
  .signal .wrap{grid-template-columns:1fr}
  .signal-item,.signal-item:nth-child(2){border-right:0;border-bottom:1px solid var(--line);margin:0}
  .signal-item:last-child{border-bottom:0}
  .statement,.process,.scope,.audit,.maintenance,.cta-zone{padding:64px 0}
  .path{padding:32px 0}
  .step,.scope-row{grid-template-columns:1fr;gap:7px}
  .step .output{text-align:left}
}
@media(prefers-reduced-motion:reduce){.dr-webdesign *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Leesbaarheidshotfix 2026-08-22: bescherm de dienstpagina tegen globale
   serif-, italic- en kleurregels van de WordPress-shell. */
body.dr-webdesign-active .dr-webdesign,
body.dr-webdesign-active .dr-webdesign :where(h1,h2,h3,p,li,a,b,strong,span,div){
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-style:normal!important;
}
body.dr-webdesign-active .dr-webdesign :where(p,li){
  color:#394049!important;
  -webkit-text-fill-color:#394049!important;
}
body.dr-webdesign-active .dr-webdesign :where(h1,h2,h3,b,strong){
  color:#18191a!important;
  -webkit-text-fill-color:#18191a!important;
}
body.dr-webdesign-active .dr-webdesign .path :where(p,li,li span),
body.dr-webdesign-active .dr-webdesign .scope-row :where(div,li){
  color:#394049!important;
  -webkit-text-fill-color:#394049!important;
}
body.dr-webdesign-active .dr-webdesign .audit :where(h2,b){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
body.dr-webdesign-active .dr-webdesign .audit :where(p){
  color:#d2d7dc!important;
  -webkit-text-fill-color:#d2d7dc!important;
}
body.dr-webdesign-active .dr-webdesign .audit :where(.kicker,.audit-row span){
  color:#82b7e8!important;
  -webkit-text-fill-color:#82b7e8!important;
}
body.dr-webdesign-active .dr-webdesign .btn.primary{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
