/* AI-Studio · huisstijl v7 "Zakelijk" (12-10-2026)

   Herwerking op Jan's briefing: professioneler, geloofwaardiger, rustiger.
   Wit en gebroken wit als basis, diep antraciet voor tekst, paars enkel voor
   hoofdacties, links en gerichte accenten. Geen schuine labels, geen
   handgetekende lussen, geen inktranden met harde schaduw. Fijne randen,
   zachte schaduwen, vaste afrondingen: 14 px voor kaarten, 10 px voor knoppen.

   Eén lettertype (Figtree) met één hiërarchie. Alle klasnamen van v6 blijven
   bestaan, zodat geen pagina of URL verandert.

   Vorige versie (v6 "Wit & speels"): git-geschiedenis, commit 397a51d. */

:root{
  --ink:#1C1F24;
  --g900:#1C1F24; --g800:#2A2E35; --g700:#3D424A; --g600:#4A4F57; --g500:#656A72;
  --g400:#959AA1; --g300:#D5D8DC; --g200:#E5E7EA; --g100:#F1F2F3; --g50:#F8F8F7;
  --line:var(--g200); --lila:#F3EFFE;

  --accent:#6A3DF0; --accent-deep:#5128D4; --accent-soft:#F3EFFE;

  /* Oude tokennamen, zodat oudere regels en inline stijlen blijven kloppen */
  --d0:#fff; --d1:var(--g50); --d2:#fff; --d-line:var(--g200); --d-line-2:var(--g300);
  --d-ink:var(--ink); --d-soft:var(--g600); --d-mute:var(--g500);
  --accent-on-dark:#B9A5FF; --brand-blue:var(--accent); --brand-violet:var(--accent); --brand-lilac:#B9A5FF;
  --grad:var(--accent); --grad-hover:var(--accent-deep); --grad-soft:var(--accent-soft); --grad-line:var(--accent);
  --blue:var(--accent); --blue-600:var(--accent); --blue-700:var(--accent-deep); --blue-200:#B9A5FF;
  --violet:var(--accent-deep); --violet-400:#8B6AF4; --violet-300:#B9A5FF;

  --ok:#12A16B; --ok-bg:#ECF8F2; --ok-ink:#0B6B47;
  --font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:var(--font); --mono:var(--font); --serif:var(--font);
  --ease:cubic-bezier(.2,.7,.2,1);

  --r-card:14px; --r-btn:10px; --r-sm:8px;
  --shadow-sm:0 1px 2px rgba(20,24,31,.05);
  --shadow-md:0 1px 2px rgba(20,24,31,.04),0 8px 24px -12px rgba(20,24,31,.16);
  --shadow-lg:0 2px 4px rgba(20,24,31,.04),0 24px 48px -24px rgba(20,24,31,.28);
  --shadow-card:var(--shadow-sm); --shadow-hover:var(--shadow-md);
  --max:1180px; --gutter:32px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--g600);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}

h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;font-family:var(--font);text-wrap:balance}
h1{font-size:clamp(38px,4.4vw,58px);line-height:1.08;letter-spacing:-.025em;font-weight:700}
h2{font-size:clamp(28px,2.9vw,40px);line-height:1.15;letter-spacing:-.02em;font-weight:700}
h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;font-weight:600}
h4{font-size:16px;line-height:1.4;font-weight:600}
h1 em,h2 em{font-style:normal;color:var(--accent)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin:.3em 0}
li::marker{color:var(--g400)}
strong{color:var(--ink);font-weight:600}

.container{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
@media (max-width:700px){.container{padding-inline:20px}body{font-size:16px}}
.narrow{max-width:800px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px 14px;border-radius:var(--r-btn);box-shadow:var(--shadow-md)}

/* ---------- Kopbalk ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s ease-out}
.site-header.is-scrolled{border-bottom-color:var(--g200)}
.nav{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo:hover{text-decoration:none}
.logo img{height:32px;width:auto}
.menu{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.menu>li{position:relative;margin:0}
.menu a,.menu button{display:block;white-space:nowrap;padding:0;color:var(--g700);font:inherit;font-size:15px;font-weight:500;line-height:20px;background:none;border:0;cursor:pointer;transition:color .15s ease-out}
.menu a:hover,.menu button:hover{color:var(--ink);text-decoration:none}
.menu a[aria-current="page"],.menu .has-sub>button[data-active]{color:var(--ink);font-weight:600}
.menu .has-sub>button::after{content:"";display:inline-block;margin-left:7px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.5}
.sub{position:absolute;top:100%;left:-12px;min-width:320px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:8px;list-style:none;margin:12px 0 0;display:none}
.sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:block}
.sub a{padding:9px 12px;border-radius:var(--r-sm);font-weight:600;color:var(--ink);font-size:15px;line-height:1.35}
.sub a:hover{background:var(--g50)}
.sub a small{display:block;color:var(--g500);font-size:13px;line-height:1.4;font-weight:400;margin-top:2px}
.sub .sub-kop{display:block;padding:10px 12px 4px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
.nav>.btn{margin-left:4px;white-space:nowrap;padding:10px 16px;font-size:14.5px}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--g200);border-radius:var(--r-btn);color:var(--ink);cursor:pointer}
@media (max-width:1020px){
  .nav-toggle{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--g200);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 24px;max-height:calc(100vh - 72px);overflow:auto;box-shadow:var(--shadow-lg)}
  .menu.open{display:flex}
  .menu>li>a,.menu>li>button{width:100%;text-align:left;padding:13px 0;font-size:17px;border-bottom:1px solid var(--g100)}
  .menu .has-sub>button{color:var(--g500);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:0;padding-bottom:4px}
  .sub{position:static;display:block;box-shadow:none;border:0;padding:4px 0 8px 12px;margin:0;min-width:0}
  .sub::before{content:none}
  .sub a{padding:8px 0}
  .menu .has-sub>button::after{display:none}
  .nav>.btn{display:none}
}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:var(--r-btn);font-family:var(--font);font-weight:600;font-size:15.5px;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out}
.btn:hover{text-decoration:none}
.btn-primary,.btn-purple{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover,.btn-purple:hover{background:var(--accent-deep);color:#fff}
.btn-ghost,.btn-outline{background:#fff;color:var(--ink);border-color:var(--g300)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--g500);color:var(--ink)}
.btn-light{background:#fff;color:var(--ink);border-color:var(--g300)}
.btn-light:hover{border-color:var(--g500);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.arrow::after{content:"→";display:inline-block;margin-left:6px;transition:transform .15s ease-out}
.btn.arrow::after{margin-left:0}
.btn.arrow:hover::after,a.arrow:hover::after{transform:translateX(3px)}
a.arrow{font-weight:600}

/* ---------- Secties ---------- */
.section{padding-block:96px}
.section.tight{padding-block:72px}
.section.tint,.section.soft{background:var(--g50);border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.section.tint+.section.tint,.section.soft+.section.soft,.section.tint+.section.soft,.section.soft+.section.tint{border-top:0}
.section.dark{background:var(--g50);border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.section.dark h2,.section.dark h3,.section.dark h4,.section.dark strong{color:var(--ink)}
@media (max-width:900px){.section{padding-block:72px}.section.tight{padding-block:56px}}
@media (max-width:640px){.section{padding-block:56px}.section.tight{padding-block:44px}}

.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px}
.lead{font-size:18.5px;line-height:1.6;max-width:62ch;color:var(--g600);text-wrap:pretty}
.section-head{max-width:720px;margin-bottom:48px}
.section-head h2{margin-bottom:.4em}
.section-head.split-head{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.section-head.split-head>div{max-width:680px}
.section-head.split-head h2{margin-bottom:0}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .lead{margin-inline:auto}
.section-head p:last-child{margin-bottom:0}
@media (max-width:640px){.section-head{margin-bottom:32px}}

.prose{max-width:72ch}
.prose h2{font-size:clamp(26px,2.4vw,32px);margin-top:1.8em}
.prose h3{margin-top:1.6em;font-size:20px}
.prose p,.prose li{font-size:17px;line-height:1.72}
.prose ul li::marker{color:var(--accent)}
.prose>:first-child{margin-top:0}
.prose [id]{scroll-margin-top:96px}

/* ---------- Paginakop ---------- */
.page-hero{padding-block:64px 72px;background:#fff;border-bottom:1px solid var(--g200)}
.page-hero h1{font-size:clamp(34px,3.8vw,50px);line-height:1.1;max-width:22ch;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.page-hero.wide h1{max-width:28ch}
.page-hero .lead{margin-bottom:0;font-size:19px}
.page-hero .btn-row{margin-top:28px}
.page-hero .hero-grid{align-items:center}
.page-hero .hero-grid h1{max-width:none}
.page-hero .stat{color:var(--g600)}
.crumbs{font-size:13.5px;margin-bottom:18px;color:var(--g500)}
.crumbs a{color:var(--g500)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 8px;color:var(--g300)}
.crumbs span[aria-current]{margin:0;color:var(--g700)}
@media (max-width:640px){.page-hero{padding-block:44px 52px}}

/* ---------- Home-hero ---------- */
.hero{background:#fff;padding-block:56px 72px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:center}
@media (min-width:1021px){.hero .hero-grid{grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}}
.hero-kop{margin-bottom:32px}
.hero h1{font-size:clamp(36px,4.6vw,60px);line-height:1.06;margin:0;max-width:none}
.hero h1 .regel{display:block}
.hero .lead{margin:0;font-size:19px;max-width:540px}
.hero .btn-row{margin-top:30px}
.hero-uitleg{display:flex;align-items:center;gap:12px;margin:22px 0 0;font-size:15px;line-height:1.5;color:var(--g500)}
.hero-uitleg img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:14.5px;color:var(--g500)}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
@media (max-width:900px){.hero{padding-block:44px 56px}.hero-grid{gap:40px}}

/* Video in de hero: een poster, afspelen pas na een klik, met geluid */
.hero-video{margin:0;position:relative}
.hv-poster{display:block;width:100%;padding:0;border:1px solid var(--g200);border-radius:var(--r-card);background:var(--g50);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-md);position:relative}
.hv-poster img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hv-poster:focus-visible{outline-offset:4px}
.hv-knop{text-decoration:none;display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:9px 14px 9px 10px;border:1px solid var(--g300);border-radius:var(--r-btn);background:#fff;color:var(--ink);font:600 14.5px/1.2 var(--font);cursor:pointer;transition:border-color .15s ease-out}
.hv-knop:hover{border-color:var(--g500);color:var(--ink);text-decoration:none}
.hv-knop small{font-weight:500;color:var(--g500)}
.hv-icoon{width:28px;height:28px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.hv-icoon::after{content:"";position:absolute;left:55%;top:50%;translate:-50% -50%;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.hero-video figcaption{margin-top:10px;font-size:13.5px;color:var(--g500)}
.video-dialoog{width:min(1100px,92vw);max-width:none;padding:0;border:0;border-radius:var(--r-card);box-shadow:var(--shadow-lg);overflow:visible;background:#000}
.video-dialoog::backdrop{background:rgba(20,24,31,.78)}
.video-dialoog video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-card)}
.vd-sluit{position:absolute;right:0;top:-48px;font:600 14.5px var(--font);color:var(--ink);background:#fff;border:1px solid var(--g300);border-radius:var(--r-btn);padding:8px 14px;cursor:pointer}
@media (max-width:1020px){.hero-video{max-width:640px}}

/* ---------- Klantbewijs na de hero ---------- */
.klanten{padding-block:32px;border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.klanten p{margin:0 0 20px;font-size:14px;color:var(--g500);text-align:center}
.klanten ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 0;list-style:none;margin:0 auto;padding:0;max-width:1040px}
.klanten li{margin:0;display:flex;align-items:center;justify-content:center;min-width:0;flex:0 0 20%;padding-inline:14px}
.klanten img{height:var(--h,32px);width:auto;max-width:100%;object-fit:contain}
@media (max-width:760px){.klanten ul{gap:24px 0}.klanten li{flex-basis:33.333%;padding-inline:10px}.klanten img{height:calc(var(--h,32px) * .64)}}
.uitgelicht{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));border:1px solid var(--g200);border-radius:var(--r-card);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.uitgelicht-tekst{padding:40px}
.uitgelicht-tekst h3{font-size:24px;line-height:1.25;margin-bottom:20px}
.uitgelicht dl{display:grid;gap:16px;margin:0 0 28px}
.uitgelicht dt{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--g500);margin:0 0 2px}
.uitgelicht dd{margin:0;font-size:16px;line-height:1.6;color:var(--g700)}
.uitgelicht-citaat{padding:40px;background:var(--g50);border-left:1px solid var(--g200);display:flex;flex-direction:column;justify-content:center;gap:20px}
.uitgelicht-citaat blockquote{margin:0;font-size:22px;line-height:1.45;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.uitgelicht-citaat p{margin:0;font-size:15px;color:var(--g500)}
.uitgelicht-citaat p b{color:var(--ink);font-weight:600}
@media (max-width:860px){.uitgelicht-citaat{border-left:0;border-top:1px solid var(--g200)}.uitgelicht-tekst,.uitgelicht-citaat{padding:28px}}

/* ---------- Processen compact ---------- */
.proces-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.proces-grid a{display:flex;flex-direction:column;gap:6px;padding:22px 24px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);color:var(--g600);text-decoration:none;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.proces-grid a:hover{border-color:var(--g300);box-shadow:var(--shadow-md);text-decoration:none}
.proces-grid b{font-size:17px;color:var(--ink);font-weight:600;display:flex;justify-content:space-between;gap:12px}
.proces-grid b::after{content:"→";color:var(--accent);transition:transform .15s ease-out}
.proces-grid a:hover b::after{transform:translateX(3px)}
.proces-grid span{font-size:15px;line-height:1.55}

/* ---------- Fasen ---------- */
.fasen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;list-style:none;margin:0;padding:0;counter-reset:fase}
.fasen>li{counter-increment:fase;margin:0;padding:28px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);display:flex;flex-direction:column}
.fasen>li::before{content:counter(fase);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--g300);color:var(--ink);font-weight:600;font-size:14px;margin-bottom:18px}
.fasen h3{margin-bottom:8px}
.fasen p{font-size:15.5px;line-height:1.6}
.fasen .krijg{margin:auto 0 0;padding:14px 16px;background:var(--g50);border-radius:var(--r-sm)}
.fasen .krijg b{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--g500);margin-bottom:4px}
.fasen .krijg span{font-size:15px;color:var(--g700)}
.fasen-noot{margin:24px 0 0;font-size:15px;color:var(--g500)}

/* ---------- Jan ---------- */
.jan{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start}
.jan figure{margin:0}
.jan figure img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-card)}
.jan figcaption{margin-top:12px;font-size:14px;color:var(--g500)}
.jan figcaption b{display:block;color:var(--ink);font-size:16px;font-weight:600}
.jan h2{margin-bottom:.5em}
.jan dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px 32px;margin:28px 0 0}
.jan dt{font-weight:600;color:var(--ink);font-size:16px;margin:0 0 4px}
.jan dd{margin:0;font-size:15.5px;line-height:1.6}
@media (max-width:860px){.jan{grid-template-columns:1fr;gap:32px}.jan figure{max-width:280px}}

/* ---------- Flowkaart ---------- */
.flowmap{margin:0;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);box-shadow:var(--shadow-md);overflow:hidden;padding:0}
.flowmap-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--g200);margin:0}
.flowmap-top b{color:var(--ink);font-weight:600;font-size:15px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g500);background:var(--g100);padding:4px 9px;border-radius:6px}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g400)}
.flow-steps{list-style:none;margin:0;padding:6px 22px 18px;display:flex;flex-direction:column}
.flow-steps li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:start;padding:11px 0;margin:0}
.node{width:40px;height:40px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--g700);background:var(--g100)}
.node.ai{background:var(--accent-soft);color:var(--accent-deep)}
.node.out{background:var(--ink);color:#fff}
.flow-steps b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.flow-steps small{display:block;margin-top:3px;font-size:13.5px;color:var(--g500);line-height:1.45}
.flow-steps .t{font-size:12.5px;color:var(--g500);padding-top:4px;white-space:nowrap}
.flow-steps.geen-tijd li{grid-template-columns:40px minmax(0,1fr)}
.flow-steps.geen-tijd b{font-weight:500;line-height:1.45}
.flowmap-foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--g200);background:var(--g50);margin:0}
.metric{padding:16px 22px;font-size:13px;color:var(--g500);line-height:1.5}
.metric+.metric{border-left:1px solid var(--g200)}
.metric b{display:block;font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.flowmap>figcaption{margin:0;padding:11px 22px 13px;border-top:1px solid var(--g200);color:var(--g500);font-size:13px}
.flowmap+.muted,.flowmap+figcaption,.flow-note{margin:12px 0 0;text-align:center;font-size:13px;color:var(--g500)}
@media (max-width:560px){
  .flow-steps{padding:6px 16px 16px}
  .flow-steps li{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .node{width:36px;height:36px}
  .flow-steps .t{grid-column:2;padding-top:0}
  .flowmap-top{padding:14px 16px}
  .metric{padding:14px 16px}
}

/* Stappenrij in de tekst */
ol.flow{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;counter-reset:f}
ol.flow li{counter-increment:f;margin:0;padding:18px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);font-size:15px;line-height:1.5;color:var(--ink)}
ol.flow li::before{content:counter(f);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--g300);color:var(--g700);font-weight:600;font-size:13px;margin-bottom:10px}

/* ---------- Rasters en kaarten ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

.card{background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);position:relative}
.card h3{font-size:18.5px;margin-bottom:8px}
.card p{font-size:15.5px;line-height:1.6;color:var(--g600)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card .more{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--accent)}
.card .more::after{content:"→";transition:transform .15s ease-out}
a.card{color:var(--g600);text-decoration:none;transition:border-color .15s ease-out,box-shadow .15s ease-out}
a.card:hover{border-color:var(--g300);box-shadow:var(--shadow-md);color:var(--g600);text-decoration:none}
a.card:hover .more::after{transform:translateX(3px)}
.card.soft,.card.orange{background:var(--g50);box-shadow:none}
.section.tint .card,.section.soft .card,.section.dark .card{background:#fff}
.section.tint .card.soft,.section.soft .card.soft,.section.tint .card.orange,.section.soft .card.orange{background:#fff}
.card .tag{align-self:flex-start}

.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-top .icon{margin-bottom:0}
.card-top .num{font-size:13px;color:var(--g400);font-weight:600}
.icon,.icon.plain{width:auto;height:auto;border-radius:0;background:none;border:0;color:var(--accent);display:inline-flex;align-items:center;justify-content:flex-start;margin-bottom:16px}
.icon svg,.icon.plain svg{width:22px;height:22px;stroke-width:1.7}

.tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;padding:4px 9px;border-radius:6px;background:var(--g100);color:var(--g700);margin:0 6px 10px 0}
.tag.orange{background:var(--accent-soft);color:var(--accent-deep)}
.chip{display:inline-block;font-size:13px;font-weight:500;color:var(--g700);background:var(--g100);padding:4px 10px;border-radius:6px}
.chip.lg{font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--g200);padding:8px 14px;border-radius:var(--r-sm)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.section-label{margin:0 0 20px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g500)}

.grid.grid-4>div.card{padding:24px}
.grid.grid-4:has(>div.card),.grid:has(>.quote){gap:20px}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:start}
.split.middle{align-items:center}
@media (max-width:920px){.split{gap:36px}}

/* ---------- Lijsten ---------- */
ul.check{list-style:none;padding:0}
ul.check li{position:relative;padding-left:30px;margin:.55em 0;font-size:15.5px;line-height:1.6}
ul.check li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235128D4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
ul.cross{list-style:none;padding:0}
ul.cross li{position:relative;padding-left:30px;margin:.55em 0;font-size:15.5px;line-height:1.6;color:var(--g500)}
ul.cross li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23959AA1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}

/* ---------- Vergelijking ---------- */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));border-radius:var(--r-card);overflow:hidden;border:1px solid var(--g200);background:#fff}
.compare>div{padding:30px}
.compare>div:first-child{background:var(--g50)}
.compare>div:last-child{border-left:1px solid var(--g200)}
.compare h3{font-size:18px;margin-bottom:14px}
@media (max-width:720px){.compare>div:last-child{border-left:0;border-top:1px solid var(--g200)}}

/* ---------- Stappen ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:22px 0 0;margin:0;border-top:1px solid var(--g300)}
.steps li::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--g300);background:#fff;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:16px}
.steps h3{font-size:18.5px;margin-bottom:6px}
.steps p{font-size:15.5px;line-height:1.6;margin-bottom:12px}
.steps .dur{display:inline-block;font-size:13.5px;color:var(--g500);font-weight:500}

/* ---------- Citaten ---------- */
.quote{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);padding:28px;box-shadow:var(--shadow-sm)}
.quote blockquote{margin:0;font-size:18.5px;line-height:1.55;color:var(--ink);flex:1;font-weight:500}
.quote blockquote::before{content:"\201C";display:block;font-size:44px;line-height:1;height:24px;color:var(--accent);margin-bottom:8px;font-weight:600}
.quote figcaption{margin-top:22px;font-size:14px;line-height:1.55;color:var(--g500)}
.quote figcaption b{display:block;color:var(--ink);font-weight:600;font-size:15px}

/* ---------- Cijfers ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px}
.stat{border-top:1px solid var(--g300);padding-top:18px;font-size:15px;color:var(--g600)}
.stat b{display:block;font-size:36px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;text-wrap:balance}

/* ---------- Tools en modellen ---------- */
.section:has(.toolstrip){padding-block:28px;background:#fff;border-bottom:1px solid var(--g200)}
.toolstrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 40px}
.toolstrip .muted{font-size:14px;margin:0}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tools span,.tools a{padding:6px 12px;border:1px solid var(--g200);border-radius:var(--r-sm);background:#fff;color:var(--g700);font-weight:600;font-size:14.5px;text-decoration:none;transition:border-color .15s ease-out,color .15s ease-out}
.tools a:hover{border-color:var(--g400);color:var(--ink);text-decoration:none}
.tools .meer{border-color:transparent;color:var(--accent)}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--g200);padding:20px 0}
.faq details:first-of-type{border-top:1px solid var(--g200)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;color:var(--ink);font-size:18px;line-height:1.4;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary:hover{color:var(--accent-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231C1F24' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E");transition:transform .2s ease-out}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding-top:12px;max-width:72ch;font-size:16px}
.faq details>div p:last-child{margin:0}

/* ---------- Afsluitende uitnodiging ---------- */
.section:has(.cta-band){padding-block:0 96px}
.section.tint:has(.cta-band),.section.soft:has(.cta-band){padding-block:72px}
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:56px 56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 56px}
.cta-band>div:first-child{max-width:620px}
.cta-band h2{color:#fff;font-size:clamp(26px,2.6vw,34px);line-height:1.2;margin:0}
.cta-band p{margin:14px 0 0;font-size:17px;line-height:1.6;color:#C7CAD0}
.cta-band .btn-primary,.cta-band .btn-light{background:#fff;color:var(--ink);border-color:#fff}
.cta-band .btn-primary:hover,.cta-band .btn-light:hover{background:var(--g100);color:var(--ink)}
.cta-band .btn-outline,.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cta-band .btn-outline:hover,.cta-band .btn-ghost:hover{border-color:#fff;color:#fff}
.cta-band small{display:block;margin-top:10px;color:#A9AEB6;font-size:13.5px}
@media (max-width:900px){.cta-band{padding:40px 28px}}
@media (max-width:640px){.section:has(.cta-band){padding-block:0 56px}}

/* ---------- Callout, tabel, inhoud ---------- */
.callout{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-card);padding:22px 26px;margin:28px 0;font-size:16px}
.callout.purple{background:var(--accent-soft);border-color:#E4DCFC}
.callout p:last-child{margin:0}
.table-wrap{overflow-x:auto;margin:28px 0;border:1px solid var(--g200);border-radius:var(--r-card)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--g200);vertical-align:top;line-height:1.6}
th{background:var(--g50);color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.03em}
tr:last-child td{border-bottom:0}
.toc{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-card);padding:22px 26px;margin:32px 0;font-size:16px}
.toc ol{margin:0}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13.5px;color:var(--g500);margin-top:14px}

/* ---------- Formulieren ---------- */
.form{display:grid;gap:18px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow-md)}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:18px}
.form label{display:grid;gap:7px;font-weight:500;color:var(--ink);font-size:14px}
.form input,.form textarea,.form select{font:inherit;font-size:16px;font-weight:400;padding:11px 13px;border:1px solid var(--g300);border-radius:var(--r-sm);background:#fff;color:var(--ink);width:100%;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.form input::placeholder,.form textarea::placeholder{color:var(--g400)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form textarea{min-height:110px;resize:vertical;line-height:1.6}
.form .btn{width:100%}
.form .note{font-size:13px;margin:0;color:var(--g500);text-align:center;width:100%}
.form .btn-row{flex-direction:column;align-items:stretch;gap:12px}
.form-status{padding:14px 16px;border-radius:var(--r-sm);font-weight:600;font-size:15px}
.form-status.ok{background:var(--ok-bg);color:var(--ok-ink)}
.form-status.err{background:#FEF2F2;color:#B42318}
.hp{position:absolute;left:-5000px}
.chip-field{display:flex;flex-direction:column;gap:8px}
.chip-field-label{font-size:14px;font-weight:500;color:var(--ink)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{font-family:var(--font);font-size:14px;font-weight:500;padding:7px 12px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--g300);background:#fff;color:var(--g700);transition:border-color .15s ease-out,background .15s ease-out,color .15s ease-out}
.chip-btn:hover{border-color:var(--g500)}
.chip-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
@media (max-width:640px){.form{padding:22px}}

/* ---------- Voet ---------- */
.site-footer{background:var(--g50);border-top:1px solid var(--g200);color:var(--g600);padding-block:64px 32px;font-size:14px}
.site-footer a{color:var(--g600)}
.site-footer a:hover{color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(140px,1fr));gap:40px 32px}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}}
.site-footer h4{color:var(--ink);font-size:14px;font-weight:600;margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.site-footer li{margin:0}
.site-footer .logo{margin-bottom:18px}
.site-footer .logo img{height:28px}
.site-footer p{font-size:14px;line-height:1.6;margin:0 0 18px;max-width:280px}
.site-footer p a{color:var(--ink);font-weight:500}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--g200);margin-top:48px;padding-top:22px;font-size:13px;color:var(--g500)}
.foot-bottom a{color:var(--g500)}

/* ---------- Cookiemelding: compact, in de hoek ---------- */
.cookie{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100% - 32px));background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:14px 16px;z-index:80;font-size:13.5px;line-height:1.5;color:var(--g600)}
.cookie p{margin:0 0 10px}
.cookie .btn-row{gap:8px;flex-wrap:nowrap}
.cookie .btn{padding:8px 12px;font-size:13.5px;flex:1}
@media (max-width:640px){.cookie{left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:12px 14px}}

/* ---------- Hulpklassen ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:28px}.mt-4{margin-top:56px}.center{text-align:center}
.muted{color:var(--g500);font-size:14px}
.menu .mobile-cta{display:none}
@media (max-width:1020px){.menu .mobile-cta{display:block;margin-top:16px}.menu .mobile-cta a{background:var(--accent);color:#fff;text-align:center;border-radius:var(--r-btn);font-weight:600;padding:13px;font-size:16px;border:0}.menu .mobile-cta a:hover{background:var(--accent-deep);color:#fff}}
@media (max-width:640px){
  .hero .btn-row .btn,.page-hero .btn-row .btn,.cta-band .btn-row .btn{width:100%}
}

/* ---------- Cases ---------- */
.case-list{display:flex;flex-direction:column;gap:24px}
.case-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm)}
.case-side{padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;background:var(--g50);border-right:1px solid var(--g200)}
.case-side h2{font-size:26px;line-height:1.2;margin:0}
.case-side p{margin:12px 0 0;font-size:16px;line-height:1.6}
.case-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.case-badges .tag{margin:0}
.case-main{padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.case-main blockquote{margin:8px 0 0;font-size:20px;line-height:1.5;color:var(--ink);font-weight:500}
.case-main blockquote::before{content:"\201C";display:block;font-size:44px;line-height:1;height:24px;color:var(--accent);margin-bottom:8px;font-weight:600}
.case-name{margin:18px 0 0;font-size:15px;color:var(--g500)}
.case-name b{color:var(--ink);font-weight:600}
.case-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.case-tools-label{font-size:13px;color:var(--g500);margin-right:4px}
@media (max-width:760px){.case-side{border-right:0;border-bottom:1px solid var(--g200)}.case-side,.case-main{padding:26px}}

/* ---------- Contact ---------- */
.contact-hero{background:#fff;padding-block:64px 96px}
.contact-hero h1{font-size:clamp(34px,4vw,50px);line-height:1.1;margin:0}
.contact-hero .lead{margin:20px 0 0;font-size:19px;max-width:520px}
.expect{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.expect li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:var(--g700);margin:0}
.expect li::before{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235128D4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),var(--accent-soft)}
.contact-details{margin-top:44px;padding-top:28px;border-top:1px solid var(--g200);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.contact-details a{display:block;font-size:16px;font-weight:500;color:var(--ink);margin-bottom:4px}
.contact-details a:hover{color:var(--accent)}
.contact-details p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.contact-details .muted{margin-top:6px;color:var(--g500);font-size:14px}

/* ---------- Kennis ---------- */
.filter-row{margin-top:28px}
.kennis-card{position:relative;padding-top:30px;overflow:hidden}
.kennis-bar{position:absolute;top:0;left:0;right:0;height:2px;background:var(--g200)}
.kennis-card[data-type="gids"] .kennis-bar{background:var(--accent)}
.kennis-card[hidden]{display:none}
.leesbalk{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:left center;transform:scaleX(0);pointer-events:none}
.toc-zij{display:none}
@media (min-width:1180px){
  .met-zij{display:grid;grid-template-columns:minmax(0,72ch) 240px;justify-content:space-between;column-gap:64px;align-items:start}
  .met-zij>*:not(.toc-zij){grid-column:1}
  .met-zij .prose>.toc{display:none}
  .toc-zij{display:block;grid-column:2;grid-row:1 / span 40;position:sticky;top:100px;font-size:14px;border-left:1px solid var(--g200);padding-left:20px}
  .toc-zij p,.toc-zij p strong{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g500)}
  .toc-zij ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .toc-zij li{margin:0}
  .toc-zij a{display:block;padding:6px 0 6px 12px;margin-left:-21px;border-left:2px solid transparent;color:var(--g500);line-height:1.4;text-decoration:none}
  .toc-zij a:hover{color:var(--ink)}
  .toc-zij a.is-hier{color:var(--ink);font-weight:500;border-left-color:var(--accent)}
}
.auteur{display:flex;gap:24px;align-items:center;max-width:72ch;padding:24px 28px;border:1px solid var(--g200);border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-sm)}
.auteur img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none}
.auteur p{margin:0 0 8px;font-size:15.5px;line-height:1.6}
.auteur .auteur-label{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--g500)}
.auteur .auteur-naam{margin:0 0 6px;font-size:19px;font-weight:600;color:var(--ink)}
.auteur a{font-weight:600}
.section:has(>.container>.auteur){padding-top:0}
@media (max-width:600px){.auteur{flex-direction:column;align-items:flex-start;padding:22px}}

/* ---------- Procespagina's ---------- */
.proces-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.proces-tegel{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-sm);padding:14px 18px;font-size:15px;font-weight:600;color:var(--ink);transition:border-color .15s ease-out}
.proces-tegel:hover{border-color:var(--g400);color:var(--ink);text-decoration:none}
.proces-tegel span{color:var(--accent)}

/* ---------- Videogetuigenissen ---------- */
/* Alle video's even groot; een onvolledige laatste rij staat gecentreerd. */
.video-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 24px}
.video-grid>*{flex:0 1 calc((100% - 48px) / 3);min-width:0}
@media (max-width:999px){.video-grid>*{flex-basis:calc((100% - 24px) / 2)}}
@media (max-width:640px){.video-grid>*{flex-basis:100%}}
.video-card{margin:0;display:flex;flex-direction:column}
.video-play,.video-frame{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--g200);border-radius:var(--r-card);background:var(--g900)}
.video-play{position:relative;padding:0;cursor:pointer;overflow:hidden}
.video-play img{width:100%;height:100%;object-fit:cover}
.video-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,31,0) 55%,rgba(20,24,31,.35));transition:opacity .15s ease-out}
.video-play-icon{position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 4px 14px -4px rgba(20,24,31,.5);z-index:1;transition:transform .15s ease-out}
.video-play-icon::before{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--accent)}
.video-play:hover .video-play-icon{transform:scale(1.06)}
.video-card figcaption{padding:14px 0 0;display:flex;flex-direction:column;gap:4px}
.video-card blockquote{margin:0 0 4px;font-size:17px;line-height:1.45;color:var(--ink);font-weight:500}
.video-meta{margin:0;font-size:14.5px;color:var(--g500)}
.video-meta b{color:var(--ink);font-weight:600}
.video-meta span{display:block;margin-top:1px}
.video-onderwerp{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--g600)}

/* ---------- Portret ---------- */
.portret{margin:0}
.portret img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-card)}
.portret figcaption{margin-top:12px;font-size:13.5px;color:var(--g500)}
.portret-klein{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:22px}

/* ---------- Schema's (illustraties van een proces) ---------- */
.schema{margin:0;padding:28px;border:1px solid var(--g200);border-radius:var(--r-card);background:var(--g50)}
.schema-rij{display:flex;align-items:center;gap:10px}
.schema-blok{flex:1;min-width:0;padding:14px 12px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-sm);text-align:center;font-weight:600;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.schema-blok.ai{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft)}
.schema-stapel{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.schema-pijl{flex:none;width:22px;height:2px;background:var(--g300);position:relative}
.schema-pijl::after{content:"";position:absolute;right:-1px;top:-4px;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent var(--g400)}
.schema figcaption{margin-top:14px;font-size:13px;color:var(--g500)}
@media (max-width:520px){.schema-rij{flex-direction:column;align-items:stretch}.schema-pijl{width:2px;height:18px;align-self:center}.schema-pijl::after{right:-4px;top:auto;bottom:-1px;border-width:7px 5px 0 5px;border-color:var(--g400) transparent transparent transparent}}
.koppelmini{max-width:560px;justify-self:end;width:100%}
@media (max-width:900px){.koppelmini{justify-self:start}}

/* Regiokaart */
.regiokaart{margin:0}
.regiokaart svg{display:block;width:100%;height:auto;overflow:visible}
.regiokaart figcaption{margin-top:10px;font-size:13px;color:var(--g500)}
.rk-rooster line{stroke:rgba(28,31,36,.05);stroke-width:1}
.rk-lijnen path{fill:none;stroke:var(--g300);stroke-width:1;stroke-dasharray:3 5}
.rk-route{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.rk-pakket,.rk-puls{display:none}
.rk-stad circle{fill:#fff;stroke:var(--g400);stroke-width:1.2}
.rk-stad text{font-family:var(--font);font-size:12.5px;font-weight:600;fill:var(--g500)}
.rk-doel circle{fill:var(--accent);stroke:#fff;stroke-width:1.5}
.rk-doel text{fill:var(--ink);font-family:var(--font);font-size:15px;font-weight:700}
.rk-thuis circle{fill:var(--ink);stroke:#fff;stroke-width:1.5}
.rk-thuis text{fill:var(--ink);font-size:12.5px;font-weight:700}

/* Koppelingennetwerk */
.koppelnet{margin:0}
.koppelnet svg{display:block;width:100%;max-width:500px;height:auto;margin-inline:auto;overflow:visible}
.koppelnet figcaption{margin-top:6px;text-align:center;font-size:13px;color:var(--g500)}
.kn-halo,.kn-pakket,.kn-kern-puls{display:none}
.kn-lijn{fill:none;stroke:var(--g300);stroke-width:1.5;transition:stroke .15s}
.kn-rand{fill:#fff;stroke:var(--g400);stroke-width:1.2;transition:stroke .15s,fill .15s}
.kn-punt{fill:var(--accent)}
.kn-knoop{outline:none}
.kn-knoop text{font-family:var(--font);font-size:15px;font-weight:600;fill:var(--ink);transition:fill .15s}
.kn-knoop:hover .kn-lijn,.kn-knoop:focus-visible .kn-lijn{stroke:var(--accent)}
.kn-knoop:hover .kn-rand,.kn-knoop:focus-visible .kn-rand{stroke:var(--accent);fill:var(--accent-soft)}
.kn-knoop:hover text,.kn-knoop:focus-visible text{fill:var(--accent-deep);text-decoration:underline}
.kn-knoop:focus-visible .kn-rand{stroke-width:2.5}
.kn-kern>circle{fill:var(--accent)}
.kn-kern text{font-family:var(--font);font-size:19px;font-weight:700;fill:#fff}
@media (max-width:900px){.regiokaart,.koppelnet{max-width:560px}}
@media (max-width:600px){.kn-knoop text{font-size:17px}.rk-stad text{font-size:14px}.rk-doel text{font-size:18px}.rk-thuis text{font-size:14px}}

/* Overdracht: wat AI doet, wat bij je team blijft */
.overdracht{display:grid}
.baan{border-radius:var(--r-card);padding:22px 24px 18px}
.baan h3{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.baan ul.check{margin:0}
.baan ul.check li:first-child{margin-top:0}
.baan.ai{background:var(--accent-soft);border:1px solid #E1D8FC}
.baan.ai h3{color:var(--accent-deep)}
.baan.team{background:#fff;border:1px solid var(--g200)}
.baan.team h3{color:var(--g500)}
.overdracht-lijn{position:relative;height:52px;display:flex;align-items:center;justify-content:center}
.overdracht-lijn::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--g300)}
.overdracht-lijn span{position:relative;z-index:1;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--g500);background:#fff;border:1px solid var(--g200);border-radius:6px;padding:3px 10px}

/* Waarborgen als vaste lijst */
ul.schakelaars{list-style:none;margin:0;padding:4px 22px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
ul.schakelaars::before{content:"Waarborgen";display:block;padding:14px 0 10px;border-bottom:1px solid var(--g200);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g500)}
ul.schakelaars li{position:relative;margin:0;padding:13px 0 13px 30px;border-bottom:1px solid var(--g200);color:var(--ink);font-size:15px;line-height:1.5}
ul.schakelaars li:last-child{border-bottom:0}
ul.schakelaars li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235128D4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Pagina-overgang: kort en stil */
@view-transition{navigation:auto}
::view-transition-old(root){animation:overgang-uit .15s ease-in both}
::view-transition-new(root){animation:overgang-in .2s ease-out both}
@keyframes overgang-uit{to{opacity:0}}
@keyframes overgang-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Weggelaten v6-decor: blijft verborgen mocht het nog ergens in de opmaak staan */
.figuur,.lus,.speelveld:not(.schema),.sectorbeeld{display:none}