@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   OnlineGroey — tokens uit brand.md sectie 14
   ============================================================ */
:root{
  --ink:#0B1B2B; --ink-soft:#51677C; --blue:#56A5EF; --blue-deep:#1565C7;
  --spark:#FF6A4D;
  --tint:#E8F2FE; --page:#FBFCFD; --surface:#FFFFFF; --line:#E3EAF1;
  --success:#137A4C; --error:#C0362C;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --container:1180px; --wide:1320px; --measure:660px;
  --gutter:24px; --sec-y:112px;
  --t:180ms cubic-bezier(.2,.7,.3,1);
}
@media (max-width:900px){ :root{ --sec-y:80px } }
@media (max-width:640px){ :root{ --sec-y:60px; --gutter:20px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--page); color:var(--ink);
  font:400 17px/1.65 var(--font); -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}

/* ---------- typografie ---------- */
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05}
h1{font-size:66px; max-width:16ch}
.hero h1{max-width:none}
h2{font-size:44px}
h3{font-size:23px; font-weight:700; line-height:1.25; letter-spacing:-.02em}
p{margin:0}
.lead{font-size:20px; line-height:1.55}
.small{font-size:15px; line-height:1.55}
.muted{color:var(--ink-soft)}
.measure{max-width:var(--measure)}
.em{color:var(--blue-deep)}
.em-spark{color:var(--spark)}
/* Plus Jakarta Sans geeft punt en komma 0.38em sidebearing; op kopformaat leest dat als een gat. */
.dot{margin-left:-.17em; letter-spacing:0}
@media (max-width:900px){ h1{font-size:48px} h2{font-size:36px} h3{font-size:21px} .lead{font-size:18px} }
@media (max-width:640px){ h1{font-size:38px} h2{font-size:30px} }

.stack>:not(:first-child){margin-top:20px}
.stack-sm>:not(:first-child){margin-top:12px}
.stack>.pull+.ticks{margin-top:28px}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--wide)}
.wrap.narrow>*{max-width:var(--measure)}
.sec{padding-block:var(--sec-y); position:relative}
.clip{overflow:hidden}
.bg-page{background:var(--page)} .bg-surface{background:var(--surface)}
.bg-tint{background:var(--tint)} .bg-blue{background:var(--blue)}
.bg-ink{background:var(--ink); color:#fff}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink .muted{color:#9FB6CA}

.split{display:grid; gap:64px; align-items:center}
.split>*{min-width:0}
.voorwie>*,.form-grid>*,.hero>*{min-width:0}
@media (min-width:901px){
  .split{grid-template-columns:7fr 5fr}
  .split.even{grid-template-columns:6fr 6fr}
  .split.rev{grid-template-columns:5fr 7fr}
  .split.rev>:first-child{order:2} .split.rev>:last-child{order:1}
}
@media (max-width:900px){ .split{gap:40px} }

/* ============================================================
   De ring — het dragende vormelement uit het logo.
   Dikke lijn, niet een haarlijn: op 2px verdwijnt het merk.
   ============================================================ */
.ring{flex:0 0 auto; display:grid; place-items:center;
  width:22px; height:22px; border:4px solid currentColor; border-radius:50%}
.ring-num{flex:0 0 auto; display:grid; place-items:center;
  width:70px; height:70px; border:4px solid currentColor; border-radius:50%;
  font-weight:800; font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  transition:background var(--t), color var(--t)}
.kicker{display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; line-height:1.4; color:var(--blue-deep)}
.kicker::before{content:""; flex:none; width:14px; height:14px;
  border-radius:50%; border:3px solid var(--spark)}
.bg-blue .kicker,.bg-ink .kicker{color:var(--ink)}
.bg-ink .kicker{color:#fff}

.ticks{list-style:none; margin:0; padding:0; display:grid; gap:15px; font-weight:600}
.ticks li{display:flex; gap:14px; align-items:flex-start}

/* ============================================================
   OPSOMMINGSTEKEN: DE G UIT HET BEELDMERK

   Opgemeten uit assets/img/logo.png, niet op het oog nagebouwd:
   opening van 54 tot 82 klokgraden, streekdikte 12 op een diameter
   van 100, middenstraal 44, balk van x=41,1 tot de buitenrand.

   In gebruik is --merk-g-rot: dezelfde vorm, 25 graden gedraaid.
   --merk-g is de rechte variant; wisselen is de naam in de twee
   mask-regels hieronder aanpassen.

   Terug naar de open ring? Verwijder dit hele blok; de regel eronder
   neemt het dan weer over.
   ============================================================ */
:root{
  --merk-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='12'%3E%3Cpath d='M93.6 43.9A44 44 0 1 1 85.6 24.1'/%3E%3Cpath d='M41.1 50H100'/%3E%3C/g%3E%3C/svg%3E");
  --merk-g-rot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='12' transform='rotate(-25 50 50)'%3E%3Cpath d='M93.6 43.9A44 44 0 1 1 85.6 24.1'/%3E%3Cpath d='M41.1 50H100'/%3E%3C/g%3E%3C/svg%3E");
}
.ticks li::before{content:""; flex:none; width:22px; height:22px; margin-top:2px;
  background-color:var(--spark);
  -webkit-mask:var(--merk-g-rot) center/contain no-repeat;
          mask:var(--merk-g-rot) center/contain no-repeat;
  border:0; border-radius:0}
.ticks.is-blue li::before{background-color:var(--blue)}
.ticks.is-ink li::before{background-color:var(--ink)}
.bg-blue .ticks li::before{background-color:var(--ink)}
.bg-ink .ticks li::before{background-color:#fff}
/* ============================================================ */

/* Standaard zonder het blok hierboven: open ring, één kleur per lijst.
.ticks li::before{content:""; flex:none; width:22px; height:22px; margin-top:3px;
  border-radius:50%; border:4px solid var(--blue)} */

/* uitgelichte zin met streep in de accentkleur */
.pull{padding-left:24px; border-left:5px solid var(--spark)}
.pull p{font-size:25px; font-weight:700; line-height:1.35; letter-spacing:-.025em}
@media (max-width:640px){ .pull p{font-size:21px} }

/* dubbele ring uit het logo, groot en aangesneden door de sectierand */
.rings{position:absolute; pointer-events:none}
.rings::before,.rings::after{content:""; position:absolute; border-radius:50%;
  border:14px solid currentColor; width:100%; height:100%}
.rings::after{left:62%}

/* ---------- knoppen ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:var(--r-pill); border:2px solid transparent;
  font:700 17px/1 var(--font); text-decoration:none; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--blue-deep); outline-offset:3px}
.btn-primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-primary:hover{background:var(--blue-deep); border-color:var(--blue-deep)}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink); color:#fff}
.btn-onink{background:#fff; color:var(--ink); border-color:#fff}
.btn-onink:hover{background:var(--blue); border-color:var(--blue); color:var(--ink)}
.bg-ink .btn:focus-visible,.bg-blue .btn:focus-visible{outline-color:#fff}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.arrow{transition:transform var(--t)}
a:hover .arrow,.btn:hover .arrow{transform:translateX(4px)}
@media (max-width:640px){ .btn{width:100%} }

.tlink{color:inherit; font-weight:700; text-decoration:underline;
  text-decoration-color:var(--spark); text-decoration-thickness:2px; text-underline-offset:4px;
  transition:color var(--t), text-decoration-color var(--t)}
.tlink:hover{color:var(--blue-deep); text-decoration-color:var(--blue-deep)}
.bg-ink .tlink:hover,.bg-blue .tlink:hover{color:#fff; text-decoration-color:#fff}
.tlink:focus-visible{outline:3px solid var(--blue-deep); outline-offset:3px; border-radius:2px}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:38px}
@media (max-width:640px){ .panel{padding:26px} }

/* ============================================================
   Header en footer
   ============================================================ */
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.site-header{background:rgba(251,252,253,.94); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.site-header .wrap{display:flex; align-items:center; gap:24px; height:84px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none;
  font-size:22px; flex:0 0 auto; min-height:44px}
.brand img{width:40px; height:40px; border-radius:12px}
.brand:focus-visible{outline:3px solid var(--blue-deep); outline-offset:4px; border-radius:var(--r-sm)}

/* ---------- woordmerk: Plus Jakarta Sans 300, O en G op 500 ---------- */
.wordmark{font-weight:300; letter-spacing:-.03em}
.wordmark .wm-emph{font-weight:500}
.wordmark .wm-o{font-weight:500; display:inline-block; transform:scaleX(1.18); transform-origin:left center; margin-right:.12em}
.wordmark .wm-a{color:var(--ink)}
.wordmark .wm-b{color:var(--blue-deep)}
.wordmark .wm-tld{color:var(--ink-soft); font-size:.55em; font-weight:300; letter-spacing:0; vertical-align:2px}
.wordmark.on-dark .wm-a{color:#fff}
.wordmark.on-dark .wm-b{color:var(--blue)}
.wordmark.on-dark .wm-tld{color:rgba(255,255,255,.6)}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:30px}
.site-nav a:not(.btn){color:var(--ink); opacity:.6; text-decoration:none; font-weight:600;
  font-size:17px; transition:opacity var(--t)}
.site-nav a:not(.btn):hover,.site-nav a[aria-current="page"]{opacity:1}
.site-nav a:not(.btn):focus-visible{outline:3px solid var(--blue-deep); outline-offset:4px;
  border-radius:4px; opacity:1}
.site-nav .btn{padding:14px 24px; font-size:16px}
.nav-toggle{display:none}
@media (max-width:1000px){
  .site-header .wrap{height:72px}
  .nav-toggle{display:inline-flex; align-items:center; gap:9px; margin-left:auto; min-height:44px;
    background:none; border:2px solid var(--ink); border-radius:var(--r-pill);
    padding:10px 18px; font:700 15px/1 var(--font); color:var(--ink); cursor:pointer}
  .nav-toggle:focus-visible{outline:3px solid var(--blue-deep); outline-offset:3px}
  .nav-toggle .bars{display:grid; gap:4px; width:16px}
  .nav-toggle .bars i{display:block; height:2px; background:var(--ink); border-radius:2px}
  .site-nav{position:absolute; inset:100% 0 auto 0; margin:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--surface); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 24px; display:none}
  .site-nav[data-open="true"]{display:flex}
  .site-nav a:not(.btn){padding:16px 0; font-size:18px; opacity:1; border-bottom:1px solid var(--line)}
  .site-nav .btn{margin-top:20px; width:100%}
}

.site-footer{background:var(--ink); color:#fff; padding-block:64px 40px}
.site-footer a{color:#fff}
.footer-top{display:grid; gap:48px}
@media (min-width:901px){ .footer-top{grid-template-columns:1.4fr 1fr 1fr} }
.footer-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.footer-list a{opacity:.72; text-decoration:none; transition:opacity var(--t)}
.footer-list a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
.footer-list a:focus-visible{outline:3px solid #fff; outline-offset:3px; border-radius:4px; opacity:1}
.footer-h{font-size:15px; font-weight:700; margin-bottom:18px}
.footer-bottom{margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; font-size:15px; color:#9FB6CA}
.footer-bottom a{color:#9FB6CA; text-decoration:none}
.footer-bottom a:hover{color:#fff; text-decoration:underline; text-underline-offset:4px}

/* ============================================================
   Hero
   ============================================================ */
.hero-sec{position:relative; overflow:hidden; padding-block:76px 84px}
/* groot afgerond vlak dat rechts van het scherm afloopt */
.hero-sec::before{content:""; position:absolute; right:0; top:0; bottom:0; width:44vw;
  background:var(--tint); border-radius:340px 0 0 340px}
.hero{display:grid; grid-template-columns:7.3fr 4.7fr; gap:52px; align-items:center;
  position:relative; z-index:2}
.hero .lead{max-width:44ch}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-note{font-size:16px; color:var(--ink-soft); font-weight:500}
.hero-note b{color:var(--ink); font-weight:700}
.hero-rings{color:var(--blue); width:420px; height:420px; left:-300px; top:8%; opacity:.20}

/* portret als cirkel: de O uit het beeldmerk */
.portrait-wrap{position:relative; justify-self:end}
@media (min-width:901px){ .portrait-wrap{margin-right:-28px} }
img.portrait{object-fit:cover; padding:0; display:block}
.portrait{width:392px; height:392px; max-width:100%; border-radius:50%; background:var(--surface);
  border:16px solid var(--blue); display:grid; place-content:center; gap:6px; text-align:center;
  padding:44px; box-shadow:0 30px 70px rgba(11,27,43,.12)}
.portrait b{font-weight:700; font-size:15px; color:var(--blue-deep)}
.portrait span{font-size:14px; color:var(--ink-soft)}
.sparkdot{position:absolute; right:6px; top:24px; width:66px; height:66px;
  border-radius:50%; border:9px solid var(--ink); background:var(--page)}
.floatcard{position:absolute; left:-46px; bottom:34px; background:var(--surface);
  border:1px solid var(--line); border-radius:20px; padding:20px 24px;
  box-shadow:0 18px 40px rgba(11,27,43,.10)}
.floatcard .v{font-weight:800; font-size:32px; letter-spacing:-.04em; line-height:1; color:var(--blue-deep)}
.floatcard .k{font-size:14px; color:var(--ink-soft); font-weight:600; margin-top:5px}
.floatcard .ph{font-size:11px; color:var(--ink-soft); opacity:.7; margin-top:8px; font-weight:600}

@media (max-width:900px){
  .hero-sec{padding-block:56px 64px}
  .hero-sec::before{display:none}
  .hero{grid-template-columns:1fr; gap:52px}
  .hero-rings{display:none}
  .portrait-wrap{justify-self:center}
  .portrait{width:300px; height:300px; border-width:13px; padding:34px}
  .sparkdot{width:52px; height:52px; border-width:7px; right:0; top:14px}
  .floatcard{left:-14px; bottom:14px; padding:16px 20px}
  .floatcard .v{font-size:27px}
}
@media (max-width:640px){ .hero-actions{gap:12px} }

/* ============================================================
   Klantenband — schuivende logo's op donker
   ============================================================ */
.marq{background:var(--ink); padding:24px 0; overflow:hidden; position:relative}
.marq-track{display:flex; align-items:center; gap:56px; width:max-content;
  animation:marq 138s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq img{opacity:.9}
.marq i{flex:none; width:9px; height:9px; border-radius:50%; background:var(--spark)}
@keyframes marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marq-label{color:#9FB6CA; font-size:14px; font-weight:600; text-align:center; padding-bottom:16px}

/* ============================================================
   Feiten met ringmarkering, afwisselend van kleur
   ============================================================ */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:56px}
.stat{position:relative; padding-left:96px}
.stat .ringmark{position:absolute; left:0; top:-6px; width:72px; height:72px;
  border-radius:50%; border:5px solid var(--blue)}
.stat:nth-child(2) .ringmark{border-color:var(--spark)}
.stat:nth-child(3) .ringmark{border-color:var(--ink)}
.stat .v{font-size:60px; font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.stat .k{font-size:16px; color:var(--ink-soft); margin-top:10px; font-weight:500; max-width:22ch}
@media (max-width:900px){
  .stats{grid-template-columns:1fr; gap:36px}
  .stat{padding-left:82px} .stat .ringmark{width:60px; height:60px; border-width:4px}
  .stat .v{font-size:46px}
}

/* ============================================================
   Cirkelvormig beeldkader: twee in elkaar grijpende ringen
   ============================================================ */
.figure{aspect-ratio:1; border-radius:50%; background:var(--tint);
  display:grid; place-items:center; position:relative; max-width:400px; justify-self:center}
.figure::before{content:""; position:absolute; left:-72px; top:0; bottom:0; width:100%;
  border-radius:50%; border:14px solid var(--spark); opacity:.22}
.figure::after{content:""; position:absolute; inset:0; border-radius:50%; border:14px solid var(--blue)}
.figure span{position:relative; font-weight:700; font-size:15px; color:var(--blue-deep);
  text-align:center; padding:0 48px}
@media (max-width:900px){ .figure::before{display:none} .figure{max-width:320px} }

/* ============================================================
   Stappen — een proces, geen lijst: cirkels met een lijn ertussen
   ============================================================ */
.steps{list-style:none; margin:0; padding:0}
.steps>li{display:grid; grid-template-columns:76px 1fr; gap:34px; padding-bottom:44px; position:relative}
.steps>li:last-child{padding-bottom:0}
.steps>li:not(:last-child)::before{content:""; position:absolute; left:36.5px; top:84px; bottom:-4px;
  width:3px; background:rgba(11,27,43,.22)}
.step-num{width:76px; height:76px; border-radius:50%; background:#fff; color:var(--blue-deep);
  display:grid; place-items:center; position:relative; z-index:2;
  font-weight:800; font-size:26px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.steps>li:nth-child(3) .step-num{background:var(--spark); color:#fff}
.steps h3{margin-bottom:10px}
.steps p{max-width:56ch}
.step-out{margin-top:16px; display:inline-block; background:#fff; color:var(--ink);
  border-radius:var(--r-pill); padding:11px 22px; font-size:16px; font-weight:700}
.step-out b{color:var(--blue-deep); font-weight:800}
@media (max-width:640px){
  .steps>li{grid-template-columns:1fr; gap:18px; padding-bottom:36px}
  .steps>li:not(:last-child)::before{display:none}
  .step-num{width:60px; height:60px; font-size:21px}
  .step-out{display:block}
}

/* ============================================================
   Diensten
   ============================================================ */
.services{display:grid; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden}
@media (min-width:901px){ .services{grid-template-columns:1fr 1fr} }
.service{display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  padding:48px; text-decoration:none; color:inherit; transition:background var(--t)}
.service+.service{border-left:1px solid var(--line)}
.service:hover{background:var(--tint)}
.service:focus-visible{outline:3px solid var(--blue-deep); outline-offset:-3px}
.service .ring{color:var(--blue); width:30px; height:30px}
.service:nth-child(2) .ring{color:var(--spark)}
.service .go{margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:9px;
  font-weight:700; color:var(--blue-deep)}
@media (max-width:900px){ .service{padding:36px}
  .service+.service{border-left:0; border-top:1px solid var(--line)} }
@media (max-width:640px){ .service{padding:28px} }

/* ============================================================
   Formulier
   ============================================================ */
.form-grid{display:grid; grid-template-columns:5fr 7fr; gap:72px; align-items:start}
@media (max-width:900px){ .form-grid{grid-template-columns:1fr; gap:40px} }
.field{margin-bottom:20px}
.field label{display:block; font-size:16px; font-weight:700; margin-bottom:8px}
.field input,.field textarea{width:100%; height:54px; background:var(--page);
  border:2px solid var(--line); border-radius:14px; padding:0 16px;
  font:500 17px var(--font); color:var(--ink); transition:border-color var(--t), background var(--t)}
.field textarea{height:130px; padding:14px 16px; resize:vertical; line-height:1.6}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--blue); background:#fff}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--blue-deep); outline-offset:2px}
.field .hint{font-size:15px; color:var(--ink-soft); margin-top:7px; font-weight:500}
.field input:user-invalid{border-color:var(--error)}
.field input:user-invalid + .hint{color:var(--error)}
.form-row{display:grid; gap:0 20px}
@media (min-width:640px){ .form-row{grid-template-columns:1fr 1fr} }
.form-note{font-size:15px; color:var(--ink-soft); margin-top:14px}
.hp-field{position:absolute; left:-9999px; top:-9999px}

/* ============================================================
   Beweging
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms !important; animation:none !important;
    scroll-behavior:auto !important}
  .btn:hover{transform:none}
  .marq-track{transform:none}
}

/* klein rond portret bij het contactblok */
img.avatar{object-fit:cover; padding:0}
.avatar{width:96px; height:96px; border-radius:50%; background:var(--tint);
  border:7px solid var(--blue); display:grid; place-items:center; text-align:center;
  font-size:11px; font-weight:700; color:var(--blue-deep); line-height:1.2; padding:8px}
.byline{display:flex; align-items:center; gap:20px}
.byline p{font-size:16px; font-weight:500; color:var(--ink-soft); line-height:1.5}
.byline b{color:var(--ink); font-weight:800; font-size:18px; letter-spacing:-.02em}

/* cijfer dat nog ingevuld moet worden: zichtbaar als placeholder, niet als resultaat */
.stat.is-placeholder .v{color:var(--ink-soft); opacity:.4}
.stat.is-placeholder .ringmark{border-style:dashed; border-color:var(--ink-soft); opacity:.5}
.stat.is-placeholder .k{font-style:italic}

/* ---------- vergelijking: twee tellingen naast elkaar ---------- */
.vs-q{font-weight:800; font-size:20px; letter-spacing:-.02em; margin-bottom:16px}
.vs-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.vs-card{background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg); padding:26px 28px}
.vs-card.is-best{border-color:var(--spark)}
.vs-card .n{font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums}
.vs-card .l{font-size:15px; color:var(--ink-soft); font-weight:600; margin-top:5px}
.vs-card .sub{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.vs-card .sub .n{font-size:34px; color:var(--ink-soft)}
.vs-card.is-best .sub .n{color:var(--spark)}
.vs-note{margin-top:20px; font-size:16px; color:var(--ink-soft)}
@media (max-width:640px){ .vs-card{padding:22px} .vs-card .n{font-size:36px} .vs-card .sub .n{font-size:28px} }

/* kleinere opsomming, voor in kaarten */
.ticks.sm{gap:11px; font-size:16px; font-weight:500}
.ticks.sm li::before{width:17px; height:17px; margin-top:3px}

/* voor wie */
.voorwie{display:grid; gap:56px}
@media (min-width:901px){ .voorwie{grid-template-columns:5fr 7fr; align-items:start} }
.voorwie .ticks li{font-weight:600; font-size:18px}
.voorwie .ticks li::before{margin-top:5px}

/* op mobiel moeten de dienstpunten op één regel blijven */
@media (max-width:640px){
  .service{padding:26px 22px}
  .ticks.sm{font-size:15px; gap:10px}
  .ticks.sm li::before{width:16px; height:16px}
}

/* ---------- placeholders: altijd zichtbaar als placeholder ---------- */
.figure.is-placeholder span{font-weight:700; font-size:15px; color:var(--blue-deep);
  text-align:center; padding:0 48px; position:relative}
.figure.is-echt{width:100%; border-radius:50%; object-fit:cover; aspect-ratio:1;
  border:14px solid var(--blue); background:var(--tint)}

/* ---------- schermafbeelding bij een klantcase ---------- */
.shot{width:100%; border-radius:20px; border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(11,27,43,.10); display:block}

/* ---------- kop van een subpagina ---------- */
.paginakop{padding-block:88px 72px}
.paginakop h1{max-width:17ch}
@media (max-width:900px){ .paginakop{padding-block:52px 48px} }

/* contactblok als hero: zelfde blok, minder ruimte erboven, geen losse paginakop nodig */
.sec-contact-hero{padding-block:64px 96px; background:var(--page)}
.sec-contact-hero h1{max-width:none}
@media (max-width:900px){ .sec-contact-hero{padding-block:40px 56px} }

/* ---------- vraag en antwoord ---------- */
.qa{border-top:1px solid var(--line)}
.qa-item{border-bottom:1px solid var(--line)}
.qa-item summary{list-style:none; cursor:pointer; display:flex; gap:24px; align-items:center;
  justify-content:space-between; padding:26px 0; font-weight:700; font-size:19px;
  letter-spacing:-.02em; line-height:1.35}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary:focus-visible{outline:3px solid var(--blue-deep); outline-offset:4px; border-radius:4px}
.qa-teken{flex:none; position:relative; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--spark)}
.qa-teken::before,.qa-teken::after{content:""; position:absolute; background:var(--spark);
  left:50%; top:50%; transform:translate(-50%,-50%)}
.qa-teken::before{width:9px; height:3px}
.qa-teken::after{width:3px; height:9px; transition:opacity var(--t)}
.qa-item[open] .qa-teken::after{opacity:0}
.qa-a{padding:0 0 28px; max-width:70ch}
.qa-a p{color:var(--ink-soft)}
@media (max-width:640px){ .qa-item summary{font-size:17px; padding:22px 0; gap:16px} }

/* actieve dienst in het paneel, op de dienstpagina's */
.service.is-actief{background:var(--tint)}

/* blok dat nog aangeleverd moet worden */
.is-placeholder-blok{border:2px dashed var(--spark); background:#FFF6F3}
.stack-lg>:not(:first-child){margin-top:44px}

/* ---------- stap die bij de andere dienst hoort ---------- */
.steps>li.is-anders .step-num{background:transparent; color:var(--ink);
  border:3px dashed rgba(11,27,43,.45)}
.steps>li.is-anders h3,.steps>li.is-anders p{opacity:.72}
.stap-noot-rij{margin-top:16px}
.stap-noot{display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff; border-radius:var(--r-pill); padding:11px 22px;
  font-size:16px; font-weight:700; text-decoration:none;
  transition:background var(--t), transform var(--t)}
.stap-noot:hover{background:var(--blue-deep); transform:translateY(-2px)}
.stap-noot:focus-visible{outline:3px solid #fff; outline-offset:3px}
/* terughoudende variant: een tekstlink in plaats van een tweede knop naast de uitkomstpil */
.stap-noot.is-link{background:none; padding:0; color:var(--ink); font-size:16px; font-weight:700;
  text-decoration:underline; text-decoration-color:rgba(11,27,43,.4);
  text-decoration-thickness:2px; text-underline-offset:4px}
.stap-noot.is-link:hover{background:none; transform:none; text-decoration-color:var(--ink)}
.stap-noot.is-link:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:3px}

/* ---------- dienstenpaneel: de dienst waar je nu naar kijkt ---------- */
.service.is-actief{background:var(--tint); cursor:default}

/* De dienst waar je niet naar kijkt wordt gedempt, zodat duidelijk is dat je
   er één afneemt en niet allebei. Kop en uitnodiging blijven op volle sterkte,
   want dat is nog steeds een aanbod. */
.service.is-inactief{background:var(--page)}
.service.is-inactief .ring{color:var(--ink-soft); opacity:.55}
.service.is-inactief>p{color:var(--ink-soft)}
.service.is-inactief .ticks li{color:var(--ink-soft)}
.service.is-inactief .ticks li::before{background-color:var(--ink-soft); opacity:.5}
.service.is-inactief:hover{background:var(--surface)}
.service.is-inactief:hover .ticks li,.service.is-inactief:hover>p{color:var(--ink)}
.service.is-inactief:hover .ring{opacity:1; color:var(--blue)}
.service.is-inactief:hover .ticks li::before{opacity:1; background-color:var(--spark)}
.dienst-prompt b{color:var(--ink)}
.dienst-label{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700;
  color:var(--blue-deep); background:#fff; border-radius:var(--r-pill); padding:7px 15px;
  border:1px solid var(--line)}
.dienst-prompt{margin-top:auto; padding-top:18px}
.dienst-prompt b{display:block; font-size:17px; margin-bottom:10px}

/* voor wie het relevant is, direct onder de kop */
.kop-punten{margin-top:28px; gap:12px}
@media (min-width:901px){ .kop-punten{grid-template-columns:repeat(3,1fr); gap:14px 32px} }
.kop-punten li{font-size:16px; font-weight:600}
.kop-acties{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
@media (max-width:640px){ .kop-acties{gap:12px} }

/* zacht scrollen naar een anker, met ruimte voor de plakkende header */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:104px}

/* lange nummers zoals een btw-nummer mogen afbreken op smalle schermen */
.ticks li{overflow-wrap:anywhere}

/* kop van een subblok: kleiner dan een h3, met de alinea er direct onder */
.subkop{font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.3; margin-bottom:8px}
.panel .subkop{margin-bottom:10px}
@media (max-width:640px){ .subkop{font-size:18px} }

/* ---------- accordeon met altijd één open sectie ---------- */
.acc{display:grid; gap:16px}
.acc-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 28px; transition:border-color var(--t), background var(--t)}
.acc-item[open]{border-color:var(--blue)}
.acc-item:not([open]):hover{background:var(--tint)}
.acc-item summary{list-style:none; cursor:pointer; display:flex; gap:20px; align-items:center;
  justify-content:space-between; font-size:19px; font-weight:800; letter-spacing:-.02em;
  line-height:1.3}
.acc-item[open] summary{cursor:default}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary:focus-visible{outline:3px solid var(--blue-deep); outline-offset:4px;
  border-radius:4px}
.acc-teken{flex:none; position:relative; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--spark)}
.acc-teken::before,.acc-teken::after{content:""; position:absolute; background:var(--spark);
  left:50%; top:50%; transform:translate(-50%,-50%)}
.acc-teken::before{width:9px; height:3px}
.acc-teken::after{width:3px; height:9px; transition:opacity var(--t)}
.acc-item[open] .acc-teken::after{opacity:0}
.acc-body{padding-top:14px; max-width:58ch}
@media (max-width:640px){ .acc-item{padding:20px 22px} .acc-item summary{font-size:17px; gap:14px} }