:root{
  --lime:#d8f34f;
  --ink:#111;
  --ink-2:#585858;
  --line:#e6e6e6;
  --line-2:#111;
  --white:#fff;
  --paper:#f7f7f4;
  --font:'Rethink Sans',system-ui,sans-serif;
  --maxw:1080px;
  --pad:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45}
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.03em;line-height:1.08}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* De site is getekend voor een venster van zo'n 1150px breed. Op een modern
   desktopscherm oogt de tekst daardoor klein en blijven er brede witte randen
   over. Dit schaalt de hele weergave met 1,25, precies zoals de browser op
   125% zoom doet: tekst, kaders, marges en de inhoudsbreedte in dezelfde
   verhouding.

   Pas vanaf 1200px, want zoom verkleint de effectieve werkruimte tot 80%.
   Daaronder wordt die te smal voor de desktopindeling en ontstaat er
   horizontale scroll: bij 1100px gemeten op 72px, bij 1024px op 146px.
   Tussen 861 en 1200px en op mobiel blijft alles dus zoals het was. */
@media (min-width:1200px){
  body{zoom:1.25}
}
.ph{position:relative;overflow:hidden;background:#d9d6cf;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 2px,transparent 2px 10px);display:flex;align-items:flex-end}
.ph::after{content:attr(data-label);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.03em;color:#4a4a4a;background:rgba(255,255,255,.75);padding:3px 6px;margin:6px;border-radius:3px}
.mono{font-family:'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.link{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:3px}
.link .arrow{transition:transform .2s ease}
.link:hover .arrow{transform:translateX(4px)}

/* ---------- TOPBAR (lime) ---------- */
.shell{padding:14px}
.topbar{background:var(--lime);border-radius:12px;padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-size:23px;letter-spacing:-0.035em;font-weight:400}
.logo b{font-weight:600}
.topbar .links{display:flex;gap:26px;font-size:15px}
.topbar .links a{opacity:.72;transition:opacity .15s}
.topbar .links a:hover{opacity:1}
.topbar .links a.is-current{opacity:1;font-weight:600}

/* burger */
.burger{display:none;position:relative;z-index:60;width:40px;height:32px;border:none;background:none;cursor:pointer;padding:6px 4px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2.5px;background:var(--ink);border-radius:3px;transition:transform .34s cubic-bezier(.62,-0.3,.35,1.3),opacity .2s ease,width .34s ease}
.burger span:nth-child(1){width:100%}
.burger span:nth-child(2){width:70%}
.burger span:nth-child(3){width:88%}
.burger:hover span:nth-child(2){width:100%}
.burger.is-open span:nth-child(1){width:100%;transform:translateY(10.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:translateX(-12px)}
.burger.is-open span:nth-child(3){width:100%;transform:translateY(-10.5px) rotate(-45deg)}

/* mobile sheet */
.msheet{position:fixed;inset:0;z-index:50;background:var(--lime);display:flex;flex-direction:column;justify-content:space-between;padding:96px 26px 30px;clip-path:circle(0% at calc(100% - 42px) 46px);transition:clip-path .5s cubic-bezier(.7,0,.2,1);pointer-events:none}
.msheet.is-open{clip-path:circle(150% at calc(100% - 42px) 46px);pointer-events:auto}
.msheet-nav{display:flex;flex-direction:column;gap:2px}
.msheet-nav a{display:flex;align-items:baseline;gap:14px;font-size:clamp(30px,9vw,44px);font-weight:600;letter-spacing:-0.045em;line-height:1.1;padding:7px 0;opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1)}
.msheet.is-open .msheet-nav a{opacity:1;transform:none}
.msheet-nav a:active{transform:translateX(6px)}
.msheet-nav .mnum{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:rgba(17,17,17,.42);font-weight:400}
.msheet-nav a.is-current{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.msheet-foot{display:flex;flex-direction:column;gap:18px;opacity:0;transition:opacity .3s ease}
.msheet.is-open .msheet-foot{opacity:1}
.msheet-foot a{font-size:16px;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:3px;width:fit-content}
.msheet-mark{font-size:clamp(38px,13vw,64px);letter-spacing:-0.05em;font-weight:400;color:rgba(17,17,17,.16);line-height:.9}
.msheet-mark b{font-weight:600}
@media(prefers-reduced-motion:reduce){.msheet{transition:none}.msheet-nav a{transition:none}}

/* ---------- LEDE (white, marker highlight) ---------- */
.lede .wrap{padding-block:clamp(44px,7vh,88px) clamp(30px,4.5vh,48px)}
.lede-eyebrow{margin-bottom:18px}
.lede h1{font-size:clamp(28px,3.9vw,48px);font-weight:500;letter-spacing:-0.035em;line-height:1.16;max-width:860px;text-wrap:pretty}
.lede h1 .nb{white-space:nowrap}
@media (max-width:560px){.lede h1 .nb{white-space:normal}}
/* Alleen de homepage. De titel schaalt mee met de schermbreedte, zodat
   "maatschappelijke vraagstukken" altijd op een regel past en de lime
   markering niet in tweeen breekt. De slotzin krijgt een eigen regel. */
@media (max-width:560px){
  /* Vaste regelindeling: de markering blijft heel en "aan" hoort erbij.
     De tekengrootte schaalt mee zodat de langste regel altijd past. */
  /* De langste regel is 15,28x de tekengrootte breed. Bij een marge van
     44px is (100vw - 44px)/15,28 de maat die precies past; met wat speling
     erop wordt dat 6,28vw - 2,8px. */
  .lede.is-home h1{font-size:clamp(15px,calc(6.28vw - 2.8px),28px)}
  .lede.is-home h1 .h1r{display:block;white-space:nowrap}
}
.mark{font-weight:600;background:linear-gradient(180deg,transparent 10%,var(--lime) 10%,var(--lime) 91%,transparent 91%);padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lede-foot{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:clamp(24px,3.5vh,40px)}
.lede-foot p{font-size:16px;color:var(--ink-2);line-height:1.65;max-width:520px}
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clients-row{display:flex;align-items:center;gap:30px;padding-block:16px;flex-wrap:wrap}
.cl-label{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cl-names{display:flex;gap:34px;flex:1;justify-content:space-between;flex-wrap:wrap}
.cl-names span{font-size:16px;font-weight:600;letter-spacing:-0.015em;opacity:.72;white-space:nowrap}
.lede-sub .wrap{padding-block:clamp(40px,6vh,72px) clamp(26px,4vh,44px)}
.lede-sub .ph-label{margin-bottom:16px}
.slabel-mono{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:6px}
.link-light{border-bottom-color:var(--lime);color:var(--lime)}

/* ---------- SECTION SCAFFOLD ---------- */
.sec{padding:96px 0}
.sec-alt{background:var(--paper)}
.shead{display:grid;grid-template-columns:170px 1fr;gap:40px;align-items:start;margin-bottom:48px}
.shead .slabel{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:6px}
.shead h2{font-size:clamp(22px,2.5vw,31px);font-weight:600;max-width:640px;letter-spacing:-0.03em;line-height:1.18}
.shead .sdek{margin-top:14px;font-size:15px;color:var(--ink-2);max-width:480px;line-height:1.65}

/* ---------- STATEMENT ---------- */
.statement{border-bottom:1px solid var(--line)}
/* vraagstukken marquee */
.vq{padding-top:clamp(28px,4vh,44px);padding-bottom:clamp(52px,7vh,80px);overflow:hidden}
/* lange items = langere rij, dus meer tijd voor hetzelfde looptempo */
.vq.is-slow .vq-track{animation-duration:85s}
.vq-label{max-width:var(--maxw);margin:0 auto 16px;padding-inline:var(--pad);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.vq-track{display:flex;width:max-content;animation:vq-scroll 42s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vq:hover .vq-track{animation-play-state:paused}
.vq-run{display:flex;gap:10px;padding-right:10px}
.vq-item{white-space:nowrap;border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:15px;font-weight:600;letter-spacing:-0.01em;background:var(--white)}
.vq-item:nth-child(3n+2){background:var(--lime);border-color:var(--lime)}
@keyframes vq-scroll{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@media(prefers-reduced-motion:reduce){.vq-track{animation:none}.vq{overflow-x:auto}}
/* De vragen op Over ons zijn hele zinnen. Als lopende rij zijn ze slecht
   te lezen, dus ze komen een per een in beeld: alle acht liggen in dezelfde
   rastercel en faden om de beurt in en uit. De cel is zo hoog als de langste
   vraag, dus er springt niets bij het wisselen. Geldt op elk schermformaat. */
.vq.is-slow{overflow:visible}
.vq.is-slow .vq-track{animation:none;display:block;width:auto;-webkit-mask-image:none;mask-image:none}
.vq.is-slow .vq-run{display:grid;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.vq.is-slow .vq-run + .vq-run{display:none}
.vq.is-slow .vq-item{grid-area:1/1;justify-self:start;align-self:start;
  opacity:0;animation:vq-beurt 40s infinite}
.vq.is-slow .vq-item:nth-child(1){animation-delay:0s}
.vq.is-slow .vq-item:nth-child(2){animation-delay:5s}
.vq.is-slow .vq-item:nth-child(3){animation-delay:10s}
.vq.is-slow .vq-item:nth-child(4){animation-delay:15s}
.vq.is-slow .vq-item:nth-child(5){animation-delay:20s}
.vq.is-slow .vq-item:nth-child(6){animation-delay:25s}
.vq.is-slow .vq-item:nth-child(7){animation-delay:30s}
.vq.is-slow .vq-item:nth-child(8){animation-delay:35s}
/* Op een smal scherm past zo'n vraag niet op een regel, daar breekt hij af. */
@media(max-width:560px){
  .vq.is-slow .vq-item{white-space:normal;font-size:14.5px;line-height:1.4;
    padding:12px 18px;border-radius:16px}
}
/* Acht vragen in 40s: elk ruim vier seconden in beeld, met een korte
   overgang ertussen. */
@keyframes vq-beurt{
  0%{opacity:0;transform:translateY(8px)}
  2%{opacity:1;transform:none}
  11%{opacity:1;transform:none}
  13%{opacity:0;transform:translateY(-8px)}
  100%{opacity:0;transform:translateY(-8px)}
}
/* Zonder animatie blijven ze gewoon allemaal staan. */
@media(max-width:560px) and (prefers-reduced-motion:reduce){
  .vq.is-slow .vq-run{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .vq.is-slow .vq-item{opacity:1;animation:none}
}

/* ---------- DIENSTEN: traject "hoe we werken" ---------- */
.flow{margin-top:8px}
.fstep{display:grid;grid-template-columns:64px 1fr;column-gap:30px;padding-bottom:52px;scroll-margin-top:64px}
.fstep:last-child{padding-bottom:0}
.frail{display:flex;flex-direction:column;align-items:center}
.fnum{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--ink);border:1px solid var(--line-2);border-radius:100px;padding:7px 0;width:46px;text-align:center;background:var(--white);flex:none}
.fline{flex:1;width:1px;background:var(--line);margin-top:12px;min-height:26px}
.fmain{padding-top:2px}
.fmain h3{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-0.04em;line-height:1.1}
.flead{margin-top:9px;font-size:clamp(16px,1.8vw,19px);font-weight:500;letter-spacing:-0.02em;line-height:1.4;max-width:520px}
.fcols{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.fpar{font-size:15px;color:var(--ink-2);line-height:1.75}
.fout{border-left:3px solid var(--lime);padding-left:15px}
.fout .slabel-mono{padding-top:0}
.fout p{margin-top:7px;font-size:15px;font-weight:500;letter-spacing:-0.015em;line-height:1.45}
.fpills{margin-top:22px}
.fpills .slabel-mono{padding-top:0}
.fpills ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.fpills li{font-size:14px;font-weight:500;letter-spacing:-0.01em;border:1px solid var(--line);border-radius:100px;padding:7px 15px;background:var(--white);transition:border-color .18s ease}
.fpills li:hover{border-color:var(--ink)}
@media(max-width:820px){
  .fstep{grid-template-columns:44px 1fr;column-gap:18px;padding-bottom:38px}
  .fnum{width:40px;font-size:11px}
  .fcols{grid-template-columns:1fr;gap:22px;margin-top:18px;padding-top:18px}
  .fpills{margin-top:18px}
}

/* ---------- DIENSTEN: vraagstukken-kaarten ---------- */
.sec-vr .shead .sdek{max-width:620px}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vgi{background:var(--white);border-radius:14px;padding:26px 24px 28px;display:flex;flex-direction:column}
.vgi::before{content:'';display:block;width:30px;height:6px;border-radius:3px;background:var(--lime);margin-bottom:18px;transition:width .28s cubic-bezier(.4,0,.2,1)}
.vgi:hover::before{width:64px}
.vgi h3{font-size:19px;font-weight:600;letter-spacing:-0.03em;line-height:1.22}
.vgi p{margin-top:11px;font-size:14.5px;color:var(--ink-2);line-height:1.66}
@media(max-width:980px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .vgrid{grid-template-columns:1fr;gap:12px}
  .vgi{padding:22px 20px 24px}
}

/* ---------- DIENSTEN ---------- */
.sv{border-top:1px solid var(--line-2)}
.sv-row{position:relative;display:grid;grid-template-columns:52px 200px 1fr 40px;gap:24px;padding:15px 0;border-bottom:1px solid var(--line);align-items:start;cursor:pointer;transition:padding .24s ease,color .2s ease}
.sv-row .n{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-2);padding-top:4px;transition:color .2s}
.sv-row h3{font-size:21px;font-weight:600;letter-spacing:-0.025em}
.sv-row p{font-size:15px;color:var(--ink-2);max-width:560px;line-height:1.5;transition:color .2s}
.sv-row .ra{justify-self:end;font-size:17px;color:var(--ink-2);padding-top:1px;transition:transform .2s ease,color .2s}
.sv-row:hover{background:var(--ink);color:var(--white);padding-inline:18px;margin-inline:-18px}
.sv-row:hover p{color:rgba(255,255,255,.72)}
.sv-row:hover .n{color:var(--lime)}
.sv-row:hover .ra{color:var(--lime);transform:translateX(5px)}

/* Training band (diensten page) */
.tr-band{background:var(--lime)}
.tr-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding-block:clamp(38px,5.5vh,60px);align-items:center}
.tr-copy .slabel-mono{color:rgba(17,17,17,.6);padding-top:0}
.tr-copy h2{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-0.04em;line-height:1.06;margin:12px 0 0;max-width:16ch}
.tr-lead{font-size:clamp(18px,2.1vw,24px);font-weight:500;letter-spacing:-0.025em;line-height:1.35;max-width:420px}
.tr-body{margin-top:14px;font-size:15px;line-height:1.7;max-width:460px;color:rgba(17,17,17,.72)}
.tr-band .cta{margin-top:26px}
.tr-formats{display:flex;flex-direction:column}
.trf{padding:14px 0;border-top:1px solid rgba(17,17,17,.26)}
.trf:last-child{border-bottom:1px solid rgba(17,17,17,.26)}
.trf-top{display:flex;justify-content:space-between;gap:14px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.trf-sub{margin-top:5px;font-size:13px;color:rgba(17,17,17,.62)}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--lime);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 20px;border-radius:100px;transition:transform .18s ease}
.cta:hover{transform:translateY(-2px)}
.cta .arrow{transition:transform .2s ease}
.cta:hover .arrow{transform:translateX(4px)}

/* ---------- PROJECTEN ---------- */
.pj-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:0;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:34px;transition:border-color .2s ease}
.pj-feature:hover{border-color:var(--ink)}
.pjf-copy{padding:34px 36px;display:flex;flex-direction:column;align-items:flex-start}
.pjf-top{display:flex;justify-content:space-between;width:100%;gap:20px;margin-bottom:auto}
.pj-feature h3{font-size:clamp(30px,3.6vw,46px);letter-spacing:-0.04em;text-transform:lowercase;font-weight:600;margin-top:30px}
.pj-feature p{margin-top:12px;font-size:15px;color:var(--ink-2);line-height:1.65;max-width:400px}
.pj-feature .link{margin-top:22px}
.pjf-img{min-height:290px;border-radius:0;width:100%;height:100%;object-fit:cover;display:block;background:#e6e4dd}
.pj-feature .kicker{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pj-feature .yr{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-2)}

.pj-more{margin-top:40px}

/* ---------- QUOTE BAND ---------- */

/* ---------- WORDMARK ---------- */
.wordmark{padding:96px 0 70px;text-align:center}
.wordmark>span{display:block;white-space:nowrap;font-size:min(15.2vw,150px);letter-spacing:-0.055em;font-weight:400;line-height:.9}
.wordmark>span b{font-weight:600}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);padding:44px 0 60px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer h4.fm{font-size:18px;font-weight:600;letter-spacing:-0.02em;margin-bottom:12px}
.footer .fintro{font-size:13px;color:var(--ink-2);max-width:250px;line-height:1.65}
.footer h5{font-size:13px;font-weight:600;margin-bottom:14px}
.footer-col a{display:block;font-size:13px;color:var(--ink-2);margin-bottom:9px;transition:color .15s}
.fcol-adres{display:block;font-size:13px;color:var(--ink-2);line-height:1.6}
.footer-col a:hover{color:var(--ink)}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.socials a{padding:6px 14px;border-radius:100px;border:1px solid var(--line);display:inline-flex;align-items:center;font-size:13px;line-height:1;color:var(--ink-2);transition:border-color .15s,color .15s}
.socials a:hover{border-color:var(--ink);color:var(--ink)}
.footer-bottom{display:flex;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-top:44px;font-size:12px;color:var(--ink-2)}
.fb-legal a{color:var(--ink-2);border-bottom:1px solid var(--line-2);transition:color .15s,border-color .15s}
.fb-legal a:hover{color:var(--ink);border-bottom-color:var(--ink)}

@media(max-width:860px){
  :root{--pad:22px}
  .topbar{padding:12px 14px 12px 18px;gap:14px}
  .topbar .links{display:none}
  .burger{display:flex}
  .lede-foot{grid-template-columns:1fr;gap:20px;align-items:start}
  .cl-names{gap:18px;justify-content:flex-start}
  .sec{padding:64px 0}
  .shead,.statement .wrap{grid-template-columns:1fr;gap:16px}
  .statement .wrap{padding-block:56px}
  .sv-row{grid-template-columns:40px 1fr;gap:10px}
  .sv-row p{grid-column:2}
  .sv-row .ra{display:none}
  .tr{grid-template-columns:1fr;gap:28px;padding:28px}
  .pj-feature{grid-template-columns:1fr}
  .pjf-img{min-height:200px;order:-1}
  .pjf-copy{padding:24px}
  .pj-feature h3{margin-top:16px}
  .footer-grid{grid-template-columns:1fr 1fr}
}


/* ---------- SUBPAGE HEAD ---------- */
.ph-label{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.lede-sub h1{font-size:clamp(27px,3.6vw,44px);font-weight:600;letter-spacing:-0.04em;line-height:1.1;max-width:860px}
.ph-intro{margin-top:18px;font-size:16px;line-height:1.7;max-width:600px;color:var(--ink-2)}

/* ---------- HOME: services teaser ---------- */
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st-chip{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:16px 18px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.st-chip .stn{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-2)}
.st-chip .stt{font-size:18px;font-weight:600;letter-spacing:-0.025em;flex:1}
.st-chip .arrow{font-size:16px;color:var(--ink-2);transition:transform .2s ease}
.st-chip:hover{background:var(--ink);border-color:var(--ink);color:var(--white);transform:translateY(-2px)}
.st-chip:hover .stn,.st-chip:hover .arrow{color:var(--lime)}
.st-chip:hover .arrow{transform:translateX(3px)}
.st-chip.is-feature{background:var(--lime);border-color:var(--lime)}
.st-chip.is-feature .stt{font-size:20px}
.st-chip.is-feature:hover{background:var(--ink);color:var(--lime)}

/* ---------- DIENSTEN PAGE ---------- */
.acc{border-top:1px solid var(--line-2)}
.acc-item{border-bottom:1px solid var(--line);scroll-margin-top:20px}
.acc-head{width:100%;display:grid;grid-template-columns:56px 210px 1fr 30px;gap:26px;align-items:baseline;background:none;border:none;padding:24px 0;cursor:pointer;text-align:left;font-family:var(--font);color:inherit;transition:padding .22s ease}
.acc-head:hover{padding-inline:14px}
.acc-n{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
.acc-t{font-size:clamp(22px,2.7vw,30px);font-weight:600;letter-spacing:-0.04em}
.acc-lead{font-size:16px;color:var(--ink-2);line-height:1.5}
.acc-sign{justify-self:end;font-size:22px;font-weight:400;color:var(--ink-2);line-height:1}
.acc-item.is-open .acc-sign{color:var(--ink)}
.acc-item.is-open .acc-lead{color:var(--ink)}
.acc-body{display:grid;grid-template-columns:56px 210px 1fr;gap:26px;padding:0 0 34px}
.acc-body>p{grid-column:3;font-size:15px;color:var(--ink-2);line-height:1.75;max-width:560px;margin:0}
.acc-list{grid-column:3;margin-top:4px}
.acc-list .slabel-mono{padding-top:0}
.acc-items{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acc-items li{font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:100px;padding:7px 15px;transition:border-color .18s ease,background .18s ease}
.acc-items li:hover{border-color:var(--ink);background:var(--paper)}
.acc-doel{grid-column:2;grid-row:1}
.acc-doel .slabel-mono{padding-top:0}
.acc-doel p{margin-top:8px;font-size:15px;font-weight:500;line-height:1.45;letter-spacing:-0.015em}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border-top:1px solid var(--ink);padding-top:14px}
.sn{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
.step h4{font-size:18px;font-weight:600;letter-spacing:-0.025em;margin:8px 0 8px}
.step p{font-size:14px;color:var(--ink-2);line-height:1.6}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--lime);border-radius:12px;padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(21px,2.6vw,32px);font-weight:600;letter-spacing:-0.035em;max-width:520px}

/* ---------- OVER ONS ---------- */
.ov-story-sec{padding-block:clamp(56px,8vh,92px)}
.ov-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5.5vw,72px);align-items:start}
.ov-side{position:sticky;top:28px}
.ov-side .slabel-mono{padding-top:0}
.ov-side h2{margin-top:22px;font-size:clamp(28px,3.5vw,42px);font-weight:600;letter-spacing:-0.042em;line-height:1.08}
.ov-narr>p{font-size:16px;color:var(--ink-2);line-height:1.8}
.ov-narr>p + p{margin-top:18px}

/* woordenboek-definities, ingebed in het verhaal */
.def{border-radius:16px;padding:24px 26px 26px;margin:26px 0}
.def-lime{background:var(--lime)}
.def-ink{background:var(--ink);color:var(--white)}
.def-top{display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.def-lime .def-top{color:rgba(17,17,17,.5)}
.def-ink .def-top{color:var(--lime)}
.def-ink .def-k{color:rgba(255,255,255,.45)}
.def h3{margin-top:12px;font-size:clamp(21px,2.2vw,26px);font-weight:600;letter-spacing:-0.038em;line-height:1}
.def p{margin-top:12px;padding-top:13px;border-top:1px solid rgba(17,17,17,.2);font-size:15px;line-height:1.66}
.def-ink p{border-top-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}


/* waar we een verschil maken */
.uniq-sec{padding-block:clamp(60px,8.5vh,96px)}
.uniq-h2{font-size:clamp(26px,3.4vw,42px);font-weight:600;letter-spacing:-0.042em;line-height:1.08;max-width:640px;margin-bottom:clamp(30px,4vh,44px)}
.uniq{display:grid;grid-template-columns:1fr 1fr}
.uniq-item{padding:30px 0 40px;border-top:1px solid var(--line-2)}
.uniq-item:nth-child(odd){padding-right:clamp(28px,4vw,58px)}
.uniq-item:nth-child(even){padding-left:clamp(28px,4vw,58px);border-left:1px solid var(--line)}
.uniq-n{display:inline-flex;align-items:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--ink-2)}
.uniq-n::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--lime);margin-right:9px}
.uniq-item h3{margin-top:15px;font-size:clamp(20px,2.3vw,27px);font-weight:600;letter-spacing:-0.035em;line-height:1.16;max-width:14em}
.uniq-item p{margin-top:12px;font-size:15px;color:var(--ink-2);line-height:1.72}
@media(max-width:820px){
  .uniq{grid-template-columns:1fr}
  .uniq-item:nth-child(odd),.uniq-item:nth-child(even){padding-left:0;padding-right:0;border-left:none}
}

.ov-h2{font-size:clamp(26px,3.6vw,44px);font-weight:600;letter-spacing:-0.042em;line-height:1.04}
.ov-body .ov-lead{margin-top:20px;font-size:clamp(17px,1.9vw,21px);font-weight:500;color:var(--ink);letter-spacing:-0.022em;line-height:1.4}
.ov-body p{font-size:15px;color:var(--ink-2);line-height:1.78}
.ov-body p + p{margin-top:16px}

.ov-netsec{background:var(--ink);color:var(--white);padding-block:clamp(64px,9vh,104px)}
.ov-netsec .ov-h2{color:var(--white)}
.ov-netsec .ov-body .ov-lead{color:var(--white)}
.ov-netsec .ov-body p{color:rgba(255,255,255,.66)}
.ov-netsec .ov-faces-note{color:var(--lime)}
.ov-net{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ov-faces{margin-top:24px}
.ov-faces-note{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);max-width:240px;line-height:1.5}


@media(max-width:900px){
  .ov-rail{grid-template-columns:1fr;gap:16px}
  .ov-grid{grid-template-columns:1fr;gap:26px}
  .ov-side{position:static}
  .ov-net{grid-template-columns:1fr;gap:28px}
}

/* ---------- OVER ONS (oud) ---------- */
.ov-story{display:grid;grid-template-columns:170px 1fr;gap:40px;align-items:start}
.ov-first{font-size:clamp(21px,2.6vw,31px);font-weight:500;letter-spacing:-0.03em;line-height:1.28;max-width:720px;margin-bottom:30px;text-wrap:pretty}
.ov-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.ov-cols p{font-size:15px;color:var(--ink-2);line-height:1.75}
.ov-pull{margin-block:38px;padding:30px 34px;background:var(--lime);border-radius:12px;font-size:clamp(19px,2.3vw,27px);font-weight:500;letter-spacing:-0.03em;line-height:1.28;max-width:760px;text-wrap:pretty}
.ov-pr{background:var(--ink);color:var(--white);padding-block:clamp(52px,7vh,84px)}
.ov-pr .slabel-mono{color:var(--lime)}
.ov-prow{display:grid;grid-template-columns:60px 300px 1fr;gap:32px;align-items:baseline;padding:24px 0;border-top:1px solid rgba(255,255,255,.16)}
.ov-prow:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.ov-pn{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--lime)}
.ov-prow h3{font-size:clamp(19px,2.2vw,25px);font-weight:600;letter-spacing:-0.035em;line-height:1.15}
.ov-prow p{font-size:15px;color:rgba(255,255,255,.72);line-height:1.7;max-width:480px}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tm .ph{aspect-ratio:4/5;border-radius:8px;margin-bottom:12px}
.tmn{font-size:16px;font-weight:600;letter-spacing:-0.02em}
.tmr{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:3px}

@media(max-width:860px){
  .st-grid{grid-template-columns:1fr}
  .sd-row{grid-template-columns:1fr;gap:16px;padding:26px 0}
  .acc-head{grid-template-columns:44px 1fr 26px;gap:14px}
  .acc-lead{grid-column:2;grid-row:2;font-size:15px}
  .acc-body{grid-template-columns:1fr;gap:18px;padding-bottom:26px}
  .acc-body>p,.acc-items,.acc-doel,.acc-list{grid-column:1}
  .acc-doel{grid-row:auto}
  .tr-inner{grid-template-columns:1fr;gap:30px}
  .steps{grid-template-columns:1fr 1fr}
  .ov-story{grid-template-columns:1fr;gap:18px}
  .ov-cols{grid-template-columns:1fr;gap:14px}
  .ov-prow{grid-template-columns:1fr;gap:10px}
  .ov-pull{padding:22px 24px}
  .team-grid{grid-template-columns:1fr 1fr}
  .cta-band{padding:28px}
}

.pj-title{text-transform:lowercase}
/* ---------- PROJECTEN PAGE ---------- */
/* ---------- PROJECTEN: uitgelicht + kaartenraster ---------- */
.pfeat{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-bottom:clamp(44px,6vh,68px);margin-bottom:clamp(40px,5.5vh,60px);border-bottom:1px solid var(--line-2);color:inherit}
.pfeat-img{aspect-ratio:4/3;border-radius:12px;width:100%;object-fit:cover;display:block;background:#e6e4dd}
.pfeat-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--line);transition:border-color .2s ease}
.pfeat h2{font-size:clamp(32px,4.2vw,54px);font-weight:600;letter-spacing:-0.045em;line-height:1;margin-top:18px}
.pfeat-lead{font-size:clamp(17px,1.9vw,21px);font-weight:500;letter-spacing:-0.02em;line-height:1.4;margin-top:14px}
.pfeat-body{margin-top:12px;font-size:15px;color:var(--ink-2);line-height:1.7}
.pfeat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pfeat-tags span{font-size:13px;font-weight:500;letter-spacing:-0.01em;border:1px solid var(--line);border-radius:100px;padding:6px 13px;background:var(--white)}
.pfeat .link{margin-top:24px}
.pfeat:hover .pfeat-top{border-bottom-color:var(--ink)}
.pfeat:hover .link .arrow{transform:translateX(4px)}

.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 34px}
.pcard{display:block;color:inherit}
.pcard-img{aspect-ratio:16/10;border-radius:10px}
.pcard-body{padding-top:18px}
.pcard-top{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line);transition:border-color .2s ease}
.pcard h3{font-size:clamp(24px,2.8vw,31px);font-weight:600;letter-spacing:-0.042em;line-height:1;margin-top:14px}
.pcard-body>p{margin-top:9px;font-size:15px;color:var(--ink-2);line-height:1.6}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:15px}
.pcard-svc{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pcard-arrow{font-size:16px;color:var(--ink-2);transition:transform .2s ease,color .2s ease}
.pcard:hover .pcard-top{border-bottom-color:var(--ink)}
.pcard:hover .pcard-arrow{transform:translateX(5px);color:var(--ink)}
@media(max-width:860px){
  .pfeat{grid-template-columns:1fr;gap:24px}
  .pgrid{grid-template-columns:1fr;gap:34px}
}

/* ---------- PROJECTEN (oud) ---------- */
.hcase{display:block;margin-bottom:clamp(40px,6vh,66px)}
.hcase-img{aspect-ratio:21/8;border-radius:12px;max-height:360px}
.hcase-copy{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;padding-top:26px}
.hcase-top{grid-column:1 / -1;display:flex;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hcase h2{font-size:clamp(32px,4.4vw,58px);font-weight:600;letter-spacing:-0.045em;line-height:1}
.hcase-lead{font-size:clamp(17px,1.9vw,22px);font-weight:500;letter-spacing:-0.02em;line-height:1.4;margin-top:16px;max-width:420px}
.hcase .ex-body{margin-top:0}
.hcase .ex-tags{margin-top:20px}
.hcase:hover .link{color:var(--ink)}

.clist{border-top:1px solid var(--line-2)}
.crow{display:grid;grid-template-columns:120px 1fr 220px 30px;gap:32px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .22s ease,background .2s ease}
.crow:hover{background:var(--paper);padding-inline:16px;margin-inline:-16px}
.crow-img{aspect-ratio:4/3;border-radius:6px}
.crow-main h3{font-size:22px;font-weight:600;letter-spacing:-0.035em}
.crow-main p{font-size:15px;color:var(--ink-2);line-height:1.55;margin-top:6px;max-width:440px}
.crow-meta{display:flex;flex-direction:column;gap:6px;text-align:right}
.crow-arrow{justify-self:end;font-size:17px;color:var(--ink-2);transition:transform .2s ease,color .2s ease}
.crow:hover .crow-arrow{transform:translateX(5px);color:var(--ink)}

/* ---------- FILTERS ---------- */
.filters{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);padding-block:20px;margin-bottom:34px}
.frow{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center;padding-block:8px}
.flabel{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:-0.01em;border:1px solid var(--line);background:var(--white);border-radius:100px;padding:8px 16px;cursor:pointer;color:var(--ink-2);transition:background .16s ease,border-color .16s ease,color .16s ease}
.fchip:hover{border-color:var(--ink);color:var(--ink)}
.fchip.is-on{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
.fcount{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-2);padding-top:14px}
.fempty{padding:60px 0;text-align:center;font-size:16px;color:var(--ink-2)}

/* ---------- TRAINING CARDS ---------- */
/* ---------- TRAININGS: rijenlijst ---------- */
.trows{border-bottom:1px solid var(--line)}
.trow-head,.trow{display:grid;grid-template-columns:132px 1fr 124px 92px 26px;gap:24px;align-items:center}
.trow-head{padding-bottom:11px;border-bottom:1px solid var(--line-2);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.trow{padding:19px 0;border-top:1px solid var(--line);color:inherit;transition:background .2s ease}
.trow:first-of-type{border-top:none}
.tr-cat{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:color .2s}
.tr-main{display:block}
.tr-titlerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tr-title{display:block;font-size:17px;font-weight:600;letter-spacing:-0.025em;line-height:1.25;
  background-image:linear-gradient(var(--lime),var(--lime));background-size:0 3px;
  background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;
  transition:background-size .3s cubic-bezier(.4,0,.2,1)}
.tr-desc{display:block;margin-top:5px;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:430px;transition:color .2s}
.tr-type{font-size:14px;font-weight:500;letter-spacing:-0.01em}
.tr-dur{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-2);transition:color .2s}
.tr-arrow{justify-self:end;font-size:16px;color:var(--ink-2);transition:color .2s}
/* Aanwijzing bij een klikbare rij: een lime onderlijn die onder de titel
   uitschuift, plus een donkerder pijltje. Geen inversie en geen
   verplaatsing, zodat het op een muis en op touch hetzelfde oogt.
   :active zorgt dat je op mobiel ook feedback krijgt bij het tikken. */
a.trow:hover .tr-title,
a.trow:focus-visible .tr-title,
a.trow:active .tr-title{background-size:100% 3px}
a.trow:hover .tr-arrow,
a.trow:focus-visible .tr-arrow,
a.trow:active .tr-arrow{color:var(--ink)}
a.trow:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.trows.is-cases .trow-head,.trows.is-cases .trow{grid-template-columns:126px 1fr 186px 62px 26px}
.trows.is-cases .tr-type{font-size:13.5px}
.trow.is-static{cursor:default}


.badge-soon{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);background:var(--lime);border-radius:999px;padding:5px 10px;white-space:nowrap;line-height:1.2}
.trow.is-static .tr-desc{max-width:620px}
@media(max-width:860px){
  /* Eén kolom, alles links. Sector en jaar vormen samen de bovenregel,
     daaronder titel, omschrijving en tot slot de diensten. */
  /* De tabelkop levert op desktop de lijn boven de eerste rij. Die kop is
     hier verborgen, dus de eerste rij krijgt zijn eigen lijn terug. */
  .trow-head{display:none}
  .trow:first-of-type{border-top:1px solid var(--line)}
  .trows.is-cases .trow,
  .trow{grid-template-columns:auto 1fr;gap:0;padding:20px 0;align-items:start}
  .tr-cat{grid-column:1;grid-row:1}
  .tr-dur{grid-column:2;grid-row:1;justify-self:start;align-self:center}
  .tr-dur::before{content:'·';margin:0 8px;color:var(--ink-2)}
  .tr-main{grid-column:1/-1;grid-row:2;margin-top:8px}
  .tr-desc{max-width:none}
  .trows.is-cases .tr-type,
  .tr-type{grid-column:1/-1;grid-row:3;justify-self:start;margin-top:12px;font-size:13px;color:var(--ink-2)}
  .tr-arrow{display:none}
}

/* ---------- TRAININGS: kaartenraster (ongebruikt) ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;background:var(--white);transition:border-color .2s ease}
.tcard:hover{border-color:var(--ink)}
.tcard-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tbadge{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--lime);padding:4px 10px;border-radius:100px;white-space:nowrap}
.tcard h3{font-size:19px;font-weight:600;letter-spacing:-0.03em;margin:16px 0 10px;line-height:1.25}
.tcard p{font-size:14px;color:var(--ink-2);line-height:1.6;margin-bottom:auto}
.tcard-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- EXPERTISE ---------- */
.ex-index{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:4}
.ex-index-row{display:flex;justify-content:space-between;gap:18px;padding-block:14px}
.ex-index-row a{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:color .16s}
.ex-index-row a span{font-family:'Space Mono',monospace;font-size:11px;color:#a8a8a8}
.ex-index-row a:hover{color:var(--ink)}

.ex-block{border-bottom:1px solid var(--line);scroll-margin-top:52px}
.ex-block.is-paper{background:var(--paper)}
.ex-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding-block:clamp(48px,7vh,86px);align-items:start}
.ex-block.is-alt .ex-inner{grid-template-columns:.85fr 1.15fr}
.ex-block.is-alt .ex-copy{order:2}
.ex-block.is-alt .ex-side{order:1}
.ex-num{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--ink-2)}
.ex-copy h2{font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-0.04em;line-height:1.1;margin:14px 0 20px;max-width:520px}
.ex-lead{font-size:clamp(17px,1.9vw,21px);font-weight:500;line-height:1.45;letter-spacing:-0.02em;max-width:480px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.ex-block.is-paper .ex-lead{border-bottom-color:#dcdad2}
.ex-body{font-size:15px;color:var(--ink-2);line-height:1.7;max-width:460px}
.ex-body + .ex-body{margin-top:14px}
.ex-subs{background:var(--lime);border-radius:0 0 10px 10px;padding:22px 24px}
.exs-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(17,17,17,.55)}
.exs-list{margin-top:10px;font-size:15px;font-weight:500;letter-spacing:-0.015em;line-height:1.55}
.ex-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.ex-tags span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);padding:5px 11px;border-radius:100px;background:var(--white)}
.ex-side{display:flex;flex-direction:column;gap:0}
.ex-img{aspect-ratio:4/3;border-radius:10px 10px 0 0;width:100%;object-fit:cover;display:block;background:#e6e4dd;filter:grayscale(1) sepia(.14) contrast(1.06) brightness(1.02)}
.ex-stat{background:var(--lime);border-radius:0 0 10px 10px;padding:22px 24px}
.exs-k{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-0.04em;line-height:1}
.exs-k.is-ghost{color:rgba(17,17,17,.32)}
.exs-v{font-size:13px;line-height:1.5;margin-top:8px;max-width:240px}
.exs-note{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,17,17,.45);margin-top:5px}
/* ---------- EXPERTISE: met wie we werken (donkere band) ---------- */
/* Kolom waarin de kop van SHead staat: 170px label + 40px gap. */
.ww{--ww-indent:210px;background:var(--paper);color:var(--ink);padding-block:clamp(64px,9vh,104px)}
.ww .shead{margin-bottom:44px;align-items:start}
.ww .shead h2{max-width:560px}
.ww .shead .sdek{max-width:620px}
.ww-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px;row-gap:0;margin-left:var(--ww-indent)}
.ww-item{padding:22px 0 26px;border-top:1px solid var(--line)}
.ww-item::before{content:'';display:block;width:26px;height:4px;border-radius:2px;background:var(--lime);margin-bottom:14px;transition:width .28s cubic-bezier(.4,0,.2,1)}
.ww-item:hover::before{width:56px}
.ww-item h3{font-size:18px;font-weight:600;letter-spacing:-0.03em;line-height:1.22}
.ww-item p{margin-top:9px;font-size:14.5px;color:var(--ink-2);line-height:1.7;max-width:430px}
.ww-foot{margin-top:36px;margin-left:var(--ww-indent);padding-top:26px;border-top:1px solid var(--line)}
@media(max-width:820px){
  .ww{--ww-indent:0px}
  .ww-grid{grid-template-columns:1fr;row-gap:0}
  .ww-foot{margin-top:26px}
}

/* ---------- SECTOREN ---------- */
.sect-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sect{border-top:1px solid var(--ink);padding-top:14px}
.sect h4{font-size:17px;font-weight:600;letter-spacing:-0.025em;margin-bottom:8px}
.sect p{font-size:14px;color:var(--ink-2);line-height:1.6}

/* ---------- CONTACT ---------- */
.ct-grid{display:grid;grid-template-columns:1.3fr 1.05fr;gap:48px;align-items:start}

.fld{display:block;margin-bottom:20px}
.fld>span{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}
.fld input,.fld textarea{width:100%;border:none;border-bottom:1.5px solid var(--line);border-radius:0;padding:11px 2px;font-family:var(--font);font-size:16.5px;color:var(--ink);outline:none;background:transparent;transition:border-color .18s ease;resize:vertical}
.fld textarea{min-height:132px;line-height:1.6}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:#b0b0ab}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.ct-form .cta{margin-top:14px}
.ct-sent h3{font-size:22px;font-weight:600;letter-spacing:-0.03em;margin-bottom:10px}
.ct-sent p{font-size:15px;color:var(--ink-2);margin-bottom:22px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ct-fout{margin:4px 0 14px;font-size:14.5px;line-height:1.6;color:#a4302a}
.ct-fout a{color:inherit;border-bottom:1px solid currentColor}
.ct-form .cta[disabled]{opacity:.55;cursor:default}

/* Contactgegevens: lime blok, dezelfde taal als de CTA-band elders. */
.ct-side{position:sticky;top:26px;background:var(--lime);border-radius:20px;padding:32px 28px 36px}
.ct-side .slabel-mono{padding-top:0;color:rgba(17,17,17,.6)}
.ct-lines{margin-top:22px}
.ct-mail,.ct-tel{display:block;color:var(--ink);font-weight:600;letter-spacing:-0.035em;line-height:1.14;
  font-size:clamp(21px,2.3vw,29px);text-wrap:balance}
.ct-mail{overflow-wrap:normal}
.ct-tel{margin-top:16px;padding-top:16px;border-top:1px solid rgba(17,17,17,.22)}
.ct-mail span,.ct-tel span{background-image:linear-gradient(var(--ink),var(--ink));background-size:0 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .28s cubic-bezier(.4,0,.2,1);padding-bottom:2px}
.ct-mail:hover span,.ct-tel:hover span{background-size:100% 2px}
.ct-adres{display:block;margin-top:22px;padding-top:18px;border-top:1px solid rgba(17,17,17,.22);font-style:normal;font-size:15px;line-height:1.6;color:rgba(17,17,17,.72)}

@media(max-width:860px){
  .ct-grid{grid-template-columns:1fr;gap:30px}
  .ct-side{position:static;order:-1;padding:26px 24px 30px}
  .ct-form{order:1}
  .fld-row{grid-template-columns:1fr;gap:0}
  .tgrid{grid-template-columns:1fr}
  .hcase-copy{grid-template-columns:1fr;gap:18px}
  .crow{grid-template-columns:84px 1fr;gap:16px}
  .crow-meta{text-align:left;grid-column:2}
  .crow-arrow{display:none}
  .ex-inner,.ex-block.is-alt .ex-inner{grid-template-columns:1fr;gap:26px}
  .ex-block.is-alt .ex-copy,.ex-block.is-alt .ex-side{order:0}
  .ex-index{position:static}
  .ex-index-row{flex-wrap:wrap;justify-content:flex-start;gap:10px 18px}
  .sect-list{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr;gap:10px}
}

/* ---------- CASE-SJABLOON ---------- */
.cs-lede .wrap{padding-bottom:clamp(24px,3.5vh,36px)}
.cs-lede h1{max-width:900px}
.cs-meta{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0 clamp(30px,5vw,64px);margin-top:clamp(26px,4vh,40px);padding-top:20px;border-top:1px solid var(--line)}
.cs-meta .slabel-mono{display:block;padding-top:0;margin-bottom:6px}
.cs-meta b{font-size:15px;font-weight:600;letter-spacing:-0.02em}
.cs-cover-fig{margin:0}
.cs-cover{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;background:#e6e4dd}
.cs-cap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:12px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-2)}
.cs-cap a{border-bottom:1px solid var(--line);padding-bottom:2px}
.cs-cap a:hover{border-bottom-color:var(--ink)}
@media(max-width:820px){.cs-cover{aspect-ratio:4/3}}

.cs-sec{padding-block:clamp(52px,7.5vh,84px)}
.cs-grid{display:grid;grid-template-columns:170px 1fr;gap:40px;align-items:start}
.cs-body{max-width:660px}
.cs-body p{font-size:16px;color:var(--ink-2);line-height:1.8}
.cs-body p + p{margin-top:18px}
.cs-body .cs-lead{font-size:clamp(19px,2.3vw,27px);font-weight:500;color:var(--ink);letter-spacing:-0.028em;line-height:1.32;margin-bottom:22px}
.cs-h2{font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-0.04em;line-height:1.08;margin-bottom:clamp(26px,3.5vh,38px)}

.cs-aanpak{display:grid;grid-template-columns:1fr 1fr}
.cs-step{padding:28px 0 36px;border-top:1px solid var(--line-2)}
.cs-step:nth-child(odd){padding-right:clamp(28px,4vw,58px)}
.cs-step:nth-child(even){padding-left:clamp(28px,4vw,58px);border-left:1px solid var(--line)}
.cs-n{display:inline-flex;align-items:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--ink-2)}
.cs-n::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--lime);margin-right:9px}
.cs-step h3{margin-top:14px;font-size:clamp(19px,2.2vw,25px);font-weight:600;letter-spacing:-0.035em;line-height:1.16}
.cs-step p{margin-top:11px;font-size:15px;color:var(--ink-2);line-height:1.72}

.cs-shift{background:var(--lime);padding-block:clamp(48px,7vh,80px)}
.cs-shift .slabel-mono{color:rgba(17,17,17,.55);padding-top:0;margin-bottom:26px}
.cs-shift-grid{display:grid;grid-template-columns:1fr 84px 1.15fr;gap:0;align-items:center}
.cs-keuze{font-size:clamp(21px,2.9vw,36px);font-weight:600;letter-spacing:-0.04em;line-height:1.16;max-width:900px;text-wrap:pretty}
.cs-format.is-plain{grid-template-columns:1fr;gap:0}
.cs-shift-cell{padding:8px 0}
.cs-shift-arrow{font-size:38px;line-height:1;color:rgba(17,17,17,.4);text-align:center}
.cs-shift-k{display:block;margin-bottom:12px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(17,17,17,.55)}
.cs-shift-cell p{font-weight:600;letter-spacing:-0.038em;line-height:1.16;text-wrap:pretty}
.is-van p{font-size:clamp(17px,2vw,23px);color:rgba(17,17,17,.42)}
.is-naar p{font-size:clamp(21px,2.9vw,36px)}


.cs-format{grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,38%) 1fr;gap:44px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px;margin-top:clamp(34px,5vh,52px)}
.cs-format-media{display:flex;flex-direction:column;gap:8px}
.cs-format-bron{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,17,17,.45);text-decoration:none;line-height:1.4}
.cs-format-bron:hover{color:var(--ink)}
.cs-format-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block;background:#e6e4dd}
.cs-format-copy{padding-block:2px}
.cs-format-head{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.cs-format-logo{width:40px;height:40px;border-radius:10px;display:block;flex:none}
.cs-format .slabel-mono{padding-top:0;display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.cs-format .slabel-mono::after{content:"";flex:1;height:1px;background:var(--line)}
.cs-format p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:640px}
.cs-format.is-plain{padding:30px 32px}
.cs-format.is-plain p{font-size:16px;max-width:none}
.cs-back{padding-block:clamp(40px,6vh,64px) 0}
.cs-back .arrow{transition:transform .2s ease}
.cs-back .link:hover .arrow{transform:translateX(-4px)}

@media(max-width:860px){
  .cs-meta{grid-template-columns:1fr 1fr;gap:20px 30px}
  .cs-grid{grid-template-columns:1fr;gap:16px}
  .cs-aanpak{grid-template-columns:1fr}
  .cs-step:nth-child(odd),.cs-step:nth-child(even){padding-left:0;padding-right:0;border-left:none}
  .cs-shift-grid{grid-template-columns:1fr;gap:14px}
  .cs-shift-arrow{text-align:left;transform:rotate(90deg);width:38px}
  .cs-format{grid-template-columns:1fr;gap:24px;padding:22px}
  .cs-format-logo{width:36px;height:36px}
}

/* ---------- JURIDISCHE PAGINA'S ---------- */
.lg-sec{padding-top:clamp(18px,3vh,30px)}
.lg-wrap{max-width:720px;margin-inline:0}
.lg-meta{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-bottom:26px;border-bottom:1px solid var(--line)}
.lg-wrap h2{margin-top:38px;font-size:19px;font-weight:600;letter-spacing:-0.028em;line-height:1.25}
.lg-wrap p{margin-top:12px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.lg-wrap p strong,.lg-list strong{color:var(--ink);font-weight:600}
.lg-wrap a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2);transition:border-color .18s ease}
.lg-wrap a:hover{border-bottom-color:var(--ink)}
.lg-list{list-style:none;margin-top:14px}
.lg-list li{position:relative;padding-left:20px;margin-top:10px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.lg-list li::before{content:'';position:absolute;left:0;top:12px;width:8px;height:2px;border-radius:1px;background:var(--lime)}
@media(max-width:560px){
  .lg-wrap h2{margin-top:32px;font-size:18px}
  .lg-wrap p,.lg-list li{font-size:15.5px}
}