/* ===========================================================
   CASE STUDY
   ===========================================================
   Accent is het staffing-blauw, dezelfde kleur als de
   sectorpagina waar deze case bij hoort. --pink wordt daarnaartoe
   geschaduwd zodat de gedeelde componenten (knoppen, eyebrows,
   het slotblok) meekleuren zonder uitzonderingen per element.
   =========================================================== */
body{
  --pink:var(--acc-staffing);
  --pink-soft:var(--acc-staffing-soft);
  --ice:#8FC7FF;
  --acc-wash:rgba(0,115,255,.08);
  --acc-line:rgba(0,115,255,.30);
  --warm:#FF8A4C;
  --warm-line:rgba(255,138,76,.34);
}

/* ---------------- hero ---------------- */
.cs-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.cs-hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 110% at 78% 35%, #000 6%, transparent 68%);
  mask-image:radial-gradient(120% 110% at 78% 35%, #000 6%, transparent 68%);
}
.cs-hero__in{
  position:relative;z-index:1;max-width:var(--shell);margin:0 auto;
  padding:clamp(88px,10vw,138px) var(--bleed-gut) clamp(48px,5vw,68px);
}
.cs-crumb{font-size:13.5px;color:var(--muted);margin:0 0 26px}
.cs-crumb a{color:var(--muted);text-decoration:none}
.cs-crumb a:hover{color:#fff}
.cs-tag{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);border:1px solid var(--acc-line);border-radius:20px;padding:7px 15px;
}
.cs-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink)}
.cs-hero h1{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(32px,4.6vw,60px);line-height:1.05;letter-spacing:-.034em;
  color:#fff;margin:0 0 20px;max-width:20ch;text-wrap:balance;
}
.cs-hero h1 em{font-style:normal;color:var(--pink)}
.cs-hero__kicker{
  margin:0 0 26px;font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(17px,2vw,22px);color:var(--ice);letter-spacing:-.018em;
}
.cs-hero__lead{margin:0;font-size:17.5px;line-height:1.65;color:var(--t-80);max-width:60ch}

/* Kerncijfers: alleen wat werkelijk gemeten is in dit project. */
.cs-stats{
  list-style:none;margin:clamp(38px,4.4vw,58px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.cs-stats li{background:var(--surface-0);padding:22px 24px}
.cs-stats b{
  display:block;font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.cs-stats span{display:block;margin-top:10px;font-size:13.5px;color:var(--t-62);line-height:1.45}
@media (max-width:820px){.cs-stats{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cs-stats{grid-template-columns:1fr}}

/* ---------------- secties ---------------- */
.cs-band{padding:clamp(62px,7.5vw,102px) 0;position:relative;scroll-margin-top:calc(var(--nav-h,78px) + 58px)}

.cs-band--alt{background:linear-gradient(180deg,rgba(255,255,255,.014),transparent)}
.cs-head{max-width:66ch;margin:0 0 clamp(30px,3.6vw,46px)}
.cs-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);margin:0 0 15px;display:flex;align-items:center;gap:10px;
}
.cs-eyebrow::before{content:"";width:22px;height:1px;background:var(--pink);flex:none}
.cs-h2{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(25px,3vw,40px);line-height:1.1;letter-spacing:-.028em;
  color:#fff;margin:0;text-wrap:balance;
}
.cs-h2 em{font-style:normal;color:var(--pink)}
.cs-lead{margin:18px 0 0;font-size:17px;line-height:1.7;color:var(--t-70)}
.cs-fine{margin:22px 0 0;font-size:13.5px;color:var(--t-62);line-height:1.6;max-width:76ch}

/* ---------------- in het kort ----------------
   De vaste kop van elke case: wie, welke sector, welke vraag, wat we
   gebouwd hebben en in welke rol. Een lezer die alleen dit blok leest
   moet al weten of de case op hem slaat. */
.cs-snap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
}
.cs-snap > div{background:var(--surface-1);padding:22px 26px}
.cs-snap dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px;
}
.cs-snap dd{margin:0;color:#fff;font-size:15.5px;line-height:1.55}
.cs-snap dd .cs-snap__sub{display:block;margin-top:6px;color:var(--t-62);font-size:14px;line-height:1.55}
.cs-snap__wide{grid-column:1 / -1}
@media (max-width:720px){.cs-snap{grid-template-columns:1fr}}

/* ---------------- de opdracht ----------------
   Wat er moest kloppen voordat iemand dit systeem zou vertrouwen.
   Staat bewust vóór de oplossing: zonder deze eisen is elke oplossing
   willekeurig. */
.cs-goals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-goals li{
  border:1px solid var(--fl-line);border-left:2px solid var(--pink);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--surface-1);
  padding:24px 26px;
}
.cs-goals b{display:block;color:#fff;font-size:16.5px;margin-bottom:9px;letter-spacing:-.016em}
.cs-goals span{color:var(--t-70);font-size:14.8px;line-height:1.62}
@media (max-width:900px){.cs-goals{grid-template-columns:1fr}}

/* ---------------- resultaat in cijfers ---------------- */
.cs-res{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--acc-line);border:1px solid var(--acc-line);border-radius:var(--r-lg);overflow:hidden;
  margin-bottom:28px;
}
.cs-res--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cs-res--4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cs-res--4{grid-template-columns:1fr}}
.cs-res > div{background:var(--surface-1);padding:26px 28px}
.cs-res b{
  display:block;font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(24px,2.8vw,34px);line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;margin-bottom:11px;
}
.cs-res span{display:block;color:var(--t-70);font-size:14.5px;line-height:1.6}
@media (max-width:820px){.cs-res{grid-template-columns:1fr}}

/* ---------------- de oude situatie ---------------- */
.cs-was{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border-top:1px solid var(--rule)}
.cs-was__c{padding:32px 44px 32px 0}
.cs-was__c + .cs-was__c{padding:32px 0 32px 44px;border-left:1px solid var(--rule)}
.cs-was h3{margin:0 0 14px;font-size:19px;color:#fff;letter-spacing:-.018em}
.cs-was p{margin:0 0 14px;color:var(--t-70);line-height:1.7}
.cs-was p:last-child{margin-bottom:0}
.cs-hands{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cs-hands li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:15px;line-height:1.55;color:var(--t-70);
}
.cs-hands span{font-family:var(--mono);font-size:11px;color:var(--warm);padding-top:3px}
@media (max-width:880px){
  .cs-was{grid-template-columns:1fr}
  .cs-was__c{padding:28px 0}
  .cs-was__c + .cs-was__c{padding:28px 0;border-left:0;border-top:1px solid var(--rule)}
}

/* ---------------- wat de applicatie doet ----------------
   Genummerde regels over de volle breedte. Zakelijke opsomming,
   geen kaartjes: de lezer moet dit van boven naar beneden kunnen
   doorlopen als een functieomschrijving. */
.cs-does{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cs-does li{
  display:grid;grid-template-columns:56px minmax(0,20ch) minmax(0,1fr);
  gap:0 28px;align-items:baseline;
  padding:22px 4px;border-bottom:1px solid var(--rule);
  transition:background-color .25s ease;
}
.cs-does li:hover{background:var(--acc-wash)}
.cs-does__n{font-family:var(--mono);font-size:11.5px;color:var(--ice);letter-spacing:.14em}
.cs-does b{color:#fff;font-size:16.5px;font-weight:600;letter-spacing:-.014em;line-height:1.4}
.cs-does span{color:var(--t-70);font-size:15px;line-height:1.62}
@media (max-width:860px){
  .cs-does li{grid-template-columns:36px minmax(0,1fr);gap:6px 16px;padding:20px 2px}
  .cs-does b{grid-column:2}
  .cs-does span{grid-column:2}
}

/* ---------------- twee sporen ----------------
   De kern van de case: er zijn twee manieren waarop een shift gevuld
   raakt, en allebei zijn ze sneller geworden. Het doorgestreepte cijfer
   links van de pijl is de oude situatie, zodat het verschil af te lezen
   is zonder dat er een zin voor nodig is. */
.cs-tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-track{
  border:1px solid var(--acc-line);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(0,115,255,.13), transparent 60%),
    var(--surface-1);
  padding:clamp(26px,3vw,36px);
}
.cs-track__k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ice);margin:0 0 12px;
}
.cs-track h3{margin:0 0 22px;font-size:clamp(18px,2vw,23px);color:#fff;letter-spacing:-.02em;line-height:1.25}
.cs-track__meter{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rule);
}
.cs-track__was{
  font-size:17px;color:var(--slate);text-decoration:line-through;
  text-decoration-color:var(--warm-line);text-decoration-thickness:2px;
  font-variant-numeric:tabular-nums;
}
.cs-track__ar{color:var(--muted);font-size:15px}
.cs-track__nu{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(28px,3.4vw,42px);line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.cs-track__delta{
  margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--ice);border:1px solid var(--acc-line);border-radius:20px;padding:5px 12px;
  white-space:nowrap;
}
.cs-track p{margin:0;color:var(--t-70);font-size:15.5px;line-height:1.68}
.cs-track p + p{margin-top:14px}
@media (max-width:880px){
  .cs-tracks{grid-template-columns:1fr}
  .cs-track__delta{margin-left:0}
}

/* ---------------- de klok: het beeld van de case ----------------
   Alleen de twee tijdstippen die echt gemeten zijn staan als tijd op
   de as. Wat ertussen gebeurt krijgt geen verzonnen kloktijd. */
.cs-clock{
  border:1px solid var(--acc-line);border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0,115,255,.14), transparent 62%),
    var(--surface-1);
}
.cs-clock__top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 30px;border-bottom:1px solid var(--acc-line);background:rgba(6,15,38,.4);
}
.cs-clock__k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.cs-clock__delta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);border:1px solid var(--acc-line);border-radius:20px;padding:5px 13px;
}
.cs-clock__body{padding:32px 30px 34px}
.cs-rail{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-bottom:26px}
.cs-node{position:relative;padding-right:14px}
.cs-node::after{
  content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--acc-line);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);
}
.cs-clock.is-on .cs-node::after{transform:scaleX(1)}
.cs-node:last-child::after{right:14px}
.cs-node__dot{
  position:relative;z-index:1;display:block;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--surface-1);
  transition:border-color .4s ease,background-color .4s ease,box-shadow .4s ease;
}
.cs-clock.is-on .cs-node.is-lit .cs-node__dot{
  border-color:var(--pink);background:var(--pink);box-shadow:0 0 0 5px rgba(0,115,255,.16);
}
.cs-node__t{display:block;margin:15px 0 0;font-size:14px;font-weight:600;color:#fff;line-height:1.3;letter-spacing:-.012em}
.cs-node__time{
  display:block;margin:6px 0 0;font-family:var(--mono);font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--ice);
}
.cs-node__time--none{color:var(--slate)}
.cs-clock__note{
  margin:0;padding-top:22px;border-top:1px solid var(--rule);
  font-size:16px;line-height:1.6;color:var(--t-80);
}
.cs-clock__note b{color:#fff}
@media (max-width:900px){
  .cs-rail{grid-template-columns:repeat(3,1fr);gap:26px 0}
  .cs-node:nth-child(3)::after{right:14px}
}
@media (max-width:560px){
  .cs-rail{grid-template-columns:1fr;gap:0}
  .cs-node{padding:0 0 20px 24px}
  .cs-node::after{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:50% 0}
  .cs-clock.is-on .cs-node::after{transform:scaleY(1)}
  .cs-node:last-child::after{display:none}
  .cs-node__dot{position:absolute;left:0;top:0}
  .cs-node__t{margin-top:0}
  .cs-clock__body{padding:26px 20px 28px}
  .cs-clock__top{padding:18px 20px}
}

/* ---------------- waarop wordt gematcht ---------------- */
.cs-checks{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.cs-check{background:var(--surface-0);padding:22px 24px 24px;transition:background-color .3s ease}
.cs-check:hover{background:var(--surface-1)}
.cs-check__n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ice);
  display:block;margin-bottom:11px;
}
.cs-check h3{margin:0 0 8px;font-size:16px;color:#fff;letter-spacing:-.014em}
.cs-check p{margin:0;color:var(--t-62);font-size:14px;line-height:1.6}
@media (max-width:980px){.cs-checks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cs-checks{grid-template-columns:1fr}}

/* ---------------- waar de mens beslist ---------------- */
.cs-human{
  border:1px solid var(--acc-line);border-radius:var(--r-xl);
  background:
    radial-gradient(120% 140% at 88% 10%, rgba(0,115,255,.16), transparent 58%),
    var(--surface-1);
  padding:clamp(32px,4.4vw,58px);
}
.cs-human > p{margin:0 0 18px;color:var(--t-80);font-size:17px;line-height:1.72;max-width:72ch}
.cs-human strong{color:#fff;font-weight:600}
.cs-rules{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--acc-line);border:1px solid var(--acc-line);border-radius:var(--r-md);overflow:hidden}
.cs-rules li{background:var(--surface-1);padding:20px 22px}
.cs-rules b{display:block;color:#fff;font-size:15.5px;margin-bottom:6px;letter-spacing:-.012em}
.cs-rules span{color:var(--t-70);font-size:14.5px;line-height:1.58}
@media (max-width:760px){.cs-rules{grid-template-columns:1fr}}
.cs-kicker{
  display:block;margin:30px 0 0;font-size:19px;line-height:1.5;color:#fff;font-weight:600;
  padding-left:22px;border-left:3px solid var(--pink);letter-spacing:-.015em;
}

/* ---------------- voor en na ---------------- */
.cs-ba{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.cs-ba__h,.cs-ba__r{display:grid;grid-template-columns:1fr 1fr}
.cs-ba__h{background:rgba(255,255,255,.025);border-bottom:1px solid var(--rule)}
.cs-ba__h span{
  padding:14px 24px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;
}
.cs-ba__h span:first-child{color:var(--warm)}
.cs-ba__h span:last-child{color:var(--ice)}
.cs-ba__r{border-bottom:1px solid var(--rule);transition:background-color .25s ease}
.cs-ba__r:last-child{border-bottom:0}
.cs-ba__r:hover{background:var(--acc-wash)}
.cs-ba__r > *{padding:15px 24px;font-size:14.8px;line-height:1.55}
.cs-ba__was{color:var(--t-62)}
.cs-ba__nu{color:var(--t-80);border-left:1px solid var(--rule)}
.cs-ba__nu b{color:var(--ice);font-weight:600}
@media (max-width:720px){
  .cs-ba__h{display:none}
  .cs-ba__r{grid-template-columns:1fr;padding:6px 0}
  .cs-ba__r > *{padding:5px 20px}
  .cs-ba__was{padding-top:14px}
  .cs-ba__was::before{content:"Was: ";font-family:var(--mono);font-size:11px;color:var(--warm)}
  .cs-ba__nu{border-left:0;padding-bottom:14px}
  .cs-ba__nu::before{content:"Nu: ";font-family:var(--mono);font-size:11px;color:var(--ice)}
}

/* ---------------- losse winstpunten ---------------- */
.cs-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-extra__i{
  border:1px solid var(--fl-line);border-radius:var(--r-lg);background:var(--surface-1);
  padding:26px 28px;transition:border-color .35s ease,transform .35s var(--ease-out);
}
.cs-extra__i:hover{border-color:var(--acc-line);transform:translateY(-3px)}
.cs-extra__i h3{margin:0 0 10px;font-size:17px;color:#fff;letter-spacing:-.018em}
.cs-extra__i p{margin:0;color:var(--t-70);font-size:14.8px;line-height:1.62}
@media (max-width:900px){.cs-extra{grid-template-columns:1fr}}

/* ---------------- hero met foto ----------------
   De foto staat als achtergrond, niet als <img>. Ontbreekt het bestand,
   dan valt de hero terug op het verloop eronder in plaats van op een
   kapot-afbeeldingsicoon. */
.cs-hero--photo{min-height:min(76vh,680px);display:flex;align-items:flex-end}
.cs-hero--photo .cs-hero__canvas{-webkit-mask-image:radial-gradient(120% 110% at 20% 40%, #000 10%, transparent 72%);mask-image:radial-gradient(120% 110% at 20% 40%, #000 10%, transparent 72%)}
.cs-hero__photo{
  position:absolute;inset:0;z-index:0;
  background-image:url('casestudy-medimatch.jpg');
  background-size:cover;background-position:62% 42%;
  filter:saturate(.85);
}
.cs-hero__scrim{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg, rgba(6,15,38,.78) 0%, rgba(6,15,38,.42) 30%, rgba(6,15,38,.92) 82%, var(--surface-0) 100%),
    linear-gradient(90deg, rgba(6,15,38,.94) 0%, rgba(6,15,38,.72) 38%, rgba(6,15,38,.30) 74%, rgba(6,15,38,.42) 100%);
}
.cs-hero--photo .cs-hero__in{padding-bottom:clamp(40px,4.6vw,62px);width:100%}
.cs-hero--photo h1{max-width:24ch}
.cs-hero--photo .cs-hero__lead{max-width:64ch;color:var(--t-80)}

/* De cijferstrook staat los onder de hero, op de paginakleur. */
.cs-facts{border-bottom:1px solid var(--rule)}
.cs-facts .cs-stats{margin-top:0}
.cs-facts__in{max-width:var(--shell);margin:0 auto;padding:0 var(--gut) clamp(34px,4vw,52px)}
.cs-facts__note{margin:16px 0 0;font-size:12.5px;color:var(--slate);line-height:1.55}

/* ---------------- genummerde sectiekop ----------------
   De case is lang. Een nummer per sectie geeft de lezer houvast en
   maakt duidelijk dat het een opbouw is, geen losse blokken. */
.cs-num{
  display:flex;align-items:center;gap:14px;margin:0 0 15px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);
}
.cs-num__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--acc-line);
  font-size:11.5px;color:#fff;letter-spacing:0;flex:none;
}

/* ---------------- het proces, handeling voor handeling ---------------- */
.cs-steps{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
}
.cs-steps li{
  list-style:none;background:var(--surface-1);padding:15px 20px;
  display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:baseline;
  font-size:15px;line-height:1.5;color:var(--t-80);
}
.cs-steps li span{font-family:var(--mono);font-size:11px;color:var(--warm)}
@media (max-width:700px){.cs-steps{grid-template-columns:1fr}}

/* Eén zin die de hele sectie draagt. */
.cs-punch{
  margin:30px 0 0;padding:26px 30px;
  border:1px solid var(--acc-line);border-radius:var(--r-lg);
  background:linear-gradient(120deg, rgba(0,115,255,.13), transparent 70%),var(--surface-1);
  font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:#fff;letter-spacing:-.015em;
}
.cs-punch b{color:var(--ice);font-weight:600}

/* ---------------- business impact ---------------- */
.cs-impact{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cs-impact li{
  padding:17px 4px;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:baseline;
  color:var(--t-80);font-size:16px;line-height:1.6;
}
.cs-impact li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--warm);
  align-self:center;margin-left:9px;
}

/* ---------------- onderzoeksvragen ---------------- */
.cs-qs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
}
.cs-qs li{
  background:var(--surface-1);padding:18px 22px;
  color:var(--t-80);font-size:15.5px;line-height:1.5;
}
.cs-qs li::before{content:"?";font-family:var(--mono);color:var(--ice);margin-right:10px;font-size:13px}
@media (max-width:700px){.cs-qs{grid-template-columns:1fr}}

/* ---------------- het schema ----------------
   Zelfde informatie als een architectuurplaat, maar op het niveau dat
   een bureau-eigenaar nodig heeft: waar komt werk binnen, wie beslist,
   waar gaat het weer uit. */
.cs-flow{
  border:1px solid var(--acc-line);border-radius:var(--r-xl);
  background:radial-gradient(120% 130% at 50% 0%, rgba(0,115,255,.11), transparent 62%),var(--surface-1);
  padding:clamp(28px,3.6vw,48px);
  display:flex;flex-direction:column;align-items:center;
}
/* Het schema verschijnt rij voor rij; zie csFlow in de pagina. */
.cs-flow > *{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.cs-flow > *.is-lit{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cs-flow > *{opacity:1;transform:none;transition:none}}
.cs-fl{
  width:100%;max-width:420px;text-align:center;
  border:1px solid var(--rule-strong);border-radius:var(--r-md);
  background:var(--surface-0);padding:15px 20px;
}
.cs-fl b{display:block;color:#fff;font-size:15.5px;letter-spacing:-.012em}
.cs-fl span{display:block;margin-top:5px;color:var(--t-62);font-size:13px;line-height:1.45}
.cs-fl--in{border-color:var(--acc-line)}
.cs-fl--out{border-color:var(--acc-line)}
.cs-fl--engine{
  max-width:560px;border-color:var(--pink);
  background:linear-gradient(180deg, rgba(0,115,255,.14), transparent),var(--surface-0);
  padding:22px 24px;
}
.cs-fl--engine b{font-size:17px}
.cs-fl__chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px;
}
.cs-fl__chips i{
  font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice);border:1px solid var(--acc-line);border-radius:14px;padding:4px 10px;
}
.cs-arrow{width:1px;height:26px;background:var(--acc-line);position:relative;flex:none}
.cs-arrow::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%,0);
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--acc-line);
}
.cs-arrow span{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:560px}
.cs-split .cs-fl{max-width:none}
.cs-fl--auto{border-color:var(--pink)}
.cs-fl--human{border-color:var(--warm-line)}
.cs-fl--human b{color:var(--warm)}
@media (max-width:620px){
  .cs-split{grid-template-columns:1fr}
  .cs-arrow span{position:static;display:block;transform:none}
}

/* ---------------- implementatie ---------------- */
.cs-impl{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
}
.cs-impl > div{background:var(--surface-1);padding:22px 22px 24px;position:relative}
.cs-impl__n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);display:block;margin-bottom:12px;
}
.cs-impl h3{margin:0 0 9px;font-size:16px;color:#fff;letter-spacing:-.014em}
.cs-impl p{margin:0;color:var(--t-62);font-size:14px;line-height:1.58}
@media (max-width:1040px){.cs-impl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cs-impl{grid-template-columns:1fr}}

/* ---------------- roi ---------------- */
.cs-roi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-roi > div{
  border:1px solid var(--fl-line);border-radius:var(--r-lg);background:var(--surface-1);
  padding:26px 28px;display:flex;flex-direction:column;
}
.cs-roi__k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ice);margin:0 0 12px;
}
.cs-roi h3{margin:0 0 12px;font-size:17.5px;color:#fff;letter-spacing:-.018em}
.cs-roi p{margin:0 0 16px;color:var(--t-70);font-size:14.8px;line-height:1.62}
.cs-roi__sum{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:13px;color:var(--ice);line-height:1.5;
  font-variant-numeric:tabular-nums;
}
@media (max-width:940px){.cs-roi{grid-template-columns:1fr}}

/* ---------------- dit is een case study ----------------
   De pagina moet binnen één blik als case study te herkennen zijn.
   Drie dingen doen dat: het label in de hero, de metastrook eronder
   en de inhoudsopgave. */
.cs-label{
  display:flex;align-items:center;gap:16px;margin:0 0 20px;
  font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.42em;text-transform:uppercase;color:#fff;
}
.cs-label::after{content:"";height:1px;flex:1;max-width:120px;background:var(--pink)}
.cs-label b{font-weight:400}

/* Metastrook: de vaste kop van elke case. */
.cs-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.cs-meta > div{background:var(--surface-0);padding:20px 24px}
.cs-meta dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px;
}
.cs-meta dd{margin:0;color:#fff;font-size:15px;line-height:1.5}
.cs-meta dd span{display:block;color:var(--t-62);font-size:13.5px;margin-top:4px}
@media (max-width:900px){.cs-meta{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cs-meta{grid-template-columns:1fr}}

/* Inhoudsopgave: laat in één oogopslag zien dat dit een opbouw van
   twaalf hoofdstukken is, en niet een lange lap tekst. */
.cs-index{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
}
.cs-index a{
  background:var(--surface-1);padding:15px 20px;text-decoration:none;
  display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:baseline;
  color:var(--t-80);font-size:14.5px;line-height:1.4;
  transition:background-color .22s ease,color .22s ease;
}
.cs-index a:hover{background:var(--surface-2);color:#fff}
.cs-index a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ice)}
@media (max-width:820px){.cs-index{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cs-index{grid-template-columns:1fr}}

/* ---------------- voortgangsbalk ----------------
   Plakt onder de navigatie en noemt het hoofdstuk waar je in zit. Het
   is de duidelijkste manier om te zeggen: je leest een case study, er
   komen er nog een paar. */
.cs-prog{
  position:sticky;top:var(--nav-h,78px);z-index:50;
  background:rgba(6,15,38,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.cs-prog__in{
  max-width:var(--shell);margin:0 auto;padding:11px var(--gut);
  display:flex;align-items:center;gap:16px;
}
.cs-prog__k{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);flex:none;
}
.cs-prog__now{
  font-size:13.5px;color:#fff;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-prog__now b{font-family:var(--mono);font-weight:400;color:var(--ice);margin-right:9px;font-size:12px}
.cs-prog__count{margin-left:auto;flex:none;font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-prog__bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.cs-prog__bar i{
  display:block;height:100%;width:0;background:var(--pink);
  transition:width .18s linear;
}
@media (max-width:760px){
  .cs-prog__k{display:none}
}
@media (prefers-reduced-motion:reduce){.cs-prog__bar i{transition:none}}

/* ---------------- reveal ---------------- */
.cs-rev{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.cs-rev.is-in{opacity:1;transform:none}
.cs-rev[data-d="1"]{transition-delay:.08s}
.cs-rev[data-d="2"]{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .cs-rev{opacity:1;transform:none;transition:none}
  .cs-node::after{transform:none!important}
}