/* Gedeeld door de cases en de 404, bovenop site.css. */
header#hdr{position:sticky;top:0;z-index:60;background:var(--vlak);border-bottom:1px solid transparent;transition:border-color .3s,background-color .4s}header#hdr.stuck{border-bottom-color:var(--lijn)}header#hdr .bar{display:flex;align-items:center;gap:24px;padding-block:12px;flex-wrap:nowrap}header#hdr .logo{display:flex;align-items:center;min-height:48px;text-decoration:none}header#hdr .logo svg{display:block;height:40px;width:auto}header#hdr .sp{margin-left:auto}header#hdr nav{display:flex;gap:24px}header#hdr nav a{position:relative;display:inline-flex;align-items:center;min-height:48px;white-space:nowrap;color:var(--tekst);font-size:16px;font-weight:500;text-decoration:none}header#hdr nav a::after{content:"";position:absolute;left:0;right:100%;bottom:10px;height:2px;border-radius:2px;background:var(--blauw);transition:right .34s var(--glij)}header#hdr nav a:focus-visible::after{right:0}header#hdr .ctrls{display:flex;align-items:center;gap:8px}header#hdr .langs{display:inline-flex;gap:4px;padding:3px;border-radius:24px 24px 24px 4px;border:1px solid var(--lijn)}header#hdr .langs button{font:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;cursor:pointer;height:40px;min-width:44px;padding:0 12px;border:0;border-radius:20px 20px 20px 4px;background:transparent;color:var(--zacht);transition:background-color .24s var(--glij),color .24s var(--glij),border-radius .32s var(--veer)}header#hdr .langs button[aria-pressed="true"]{background:var(--tekst);color:var(--vlak)}header#hdr .themebtn{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;cursor:pointer;background:transparent;color:var(--tekst);border:1px solid var(--lijn);border-radius:24px 24px 24px 4px;transition:border-radius .32s var(--veer),border-color .24s,transform .16s var(--glij)}header#hdr .themebtn:active{transform:scale(.92)}header#hdr .themebtn .ico{position:absolute;width:22px;height:22px;display:block;transition:opacity .28s,transform .48s var(--veer)}header#hdr .themebtn .sun{opacity:0;transform:rotate(-120deg) scale(.4)}header#hdr .themebtn .moon{opacity:1;transform:none}html[data-theme="dark"] header#hdr .themebtn .sun{opacity:1;transform:none}html[data-theme="dark"] header#hdr .themebtn .moon{opacity:0;transform:rotate(120deg) scale(.4)}@media (hover:hover){header#hdr nav a:hover::after{right:0}header#hdr .langs button:hover{border-radius:20px 20px 4px 20px}header#hdr .themebtn:hover{border-radius:24px 24px 4px 24px;border-color:var(--tekst)}}@media (max-width:719px){header#hdr .bar{flex-wrap:wrap;row-gap:0;padding-bottom:4px}header#hdr .sp{display:none}header#hdr .logo{order:1}header#hdr .ctrls{order:2;margin-left:auto}header#hdr nav{order:3;flex-basis:100%;gap:20px}}:root{--vlak:var(--bone);--tekst:var(--ink);--zacht:var(--dim);--lijn:var(--line);--blauw:#4895EA;--veer:cubic-bezier(.34,1.4,.64,1);--glij:cubic-bezier(.2,.8,.2,1)}.titlewave,.divider{display:none!important}.mark{background:none!important;padding:0!important;margin-inline:0!important;color:inherit!important}.mark .pf{display:none!important}.kin .sp{display:inline!important;width:auto!important}.kin .sp::before{content:" "}.eyebrow,.facts dt,.nextcase>span,.cv h3.lbl{text-transform:none;letter-spacing:0;font-size:16px;line-height:24px;font-weight:700}.cta{border-radius:24px 24px 24px 4px;transition:border-radius .32s var(--veer),transform .16s var(--glij),background-color .28s}.cta .ar{display:none}.cta:hover{transform:none;border-radius:24px 24px 4px 24px}.cta:active{transform:scale(.96)}.social a{border-radius:24px 24px 24px 4px;transition:border-radius .32s var(--veer),color .28s,background-color .28s,border-color .28s}.social a:hover{border-radius:24px 24px 4px 24px}.back{text-decoration:none}@media (hover:none){.cta:hover{border-radius:24px 24px 24px 4px}.social a:hover{border-radius:24px 24px 24px 4px}}@media (prefers-reduced-motion:reduce){.cta,.social a{transition:none}}
/* naar de inhoud, voor wie met het toetsenbord navigeert */
.naar-inhoud{position:absolute;left:var(--gutter);top:-64px;padding:8px 16px;z-index:70;background:var(--tekst);color:var(--vlak);border-radius:4px;text-decoration:none}.naar-inhoud:focus{top:16px}
/* pauzeknop op een video die vanzelf speelt */
.ph .vidknop{position:absolute;right:var(--s4);bottom:var(--s4);z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;cursor:pointer;background:var(--vlak);color:var(--tekst);border:1px solid var(--lijn);border-radius:24px 24px 24px 4px;transition:border-radius .32s var(--veer),border-color .24s,transform .16s var(--glij)}.ph .vidknop svg{display:block}.ph .vidknop:active{transform:scale(.92)}@media (hover:hover){.ph .vidknop:hover{border-radius:24px 24px 4px 24px;border-color:var(--tekst)}}

/* Dezelfde wereld als de homepage: kleuren en maten van de projectbanden. */
:root{--bot:#F5F8FA;--wit:#FFFFFF;--inkt:#012333;--grafiet:#3F5A67;--lucht:#86D2F9;--abrikoos:#FFCA7F;--diep:#012333;--kantlijn:var(--gutter)}
html[data-theme=dark]{--diep:#06344A}
body[data-kleur=lucht]{--kleur:var(--lucht);--kleur-tekst:var(--inkt)}
body[data-kleur=abrikoos]{--kleur:var(--abrikoos);--kleur-tekst:var(--inkt)}
body[data-kleur=blauw]{--kleur:var(--blauw);--kleur-tekst:var(--inkt)}
body[data-kleur=inkt]{--kleur:var(--diep);--kleur-tekst:var(--bot)}

/* De kop van een case is de band van het project, met dezelfde demo als op de homepage. */
.casekop{padding-block:24px 64px}
.casekop .back{color:inherit;font-size:16px}
.casekop .back:hover{color:inherit;text-decoration:underline;text-underline-offset:4px}
.casekop h1{margin-top:24px;font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.04em;max-width:12em;text-wrap:balance}
.casekop .zin{margin-top:20px;max-width:30em}
@media (min-width:960px){.casekop{padding-block:32px 112px}.casekop h1{font-size:60px;line-height:64px}}
.facts{margin-top:48px}
.chapter{padding-top:var(--s13)}

/* Beelden en cijfers dragen de kleur van het project. */
figure .ph{background:color-mix(in srgb,var(--kleur) 26%,var(--vlak))}
.pull{margin-top:var(--s11);padding:32px;border:0;border-radius:48px 48px 48px 12px;background:var(--kleur);color:var(--kleur-tekst)}
.pull b,.pull p{color:inherit}
@media (min-width:768px){.pull{padding:48px 56px;border-radius:80px 80px 80px 20px}}

/* Volgende case: een kaart in de kleur van dat project. */
.volgende{display:grid;gap:24px;margin-top:var(--s13);padding:32px;border-radius:48px 48px 48px 12px;color:var(--inkt);text-decoration:none;
  transition:border-radius .32s var(--veer),transform .16s var(--glij)}
.volgende.lucht{background:var(--lucht)}.volgende.abrikoos{background:var(--abrikoos)}.volgende.blauw{background:var(--blauw)}.volgende.inkt{background:var(--diep);color:var(--bot)}
.volgende .tekst{display:grid;gap:12px;align-content:start}
.volgende .lbl{font-size:16px;line-height:24px;font-weight:700}
.volgende strong{font-size:28px;line-height:32px;font-weight:800;letter-spacing:-.03em;max-width:14em;text-wrap:balance}
.volgende .pijl{display:grid;place-items:center;width:48px;height:48px;margin-top:8px;border-radius:24px 24px 24px 4px;background:var(--inkt);color:var(--bot);font-size:20px;
  transition:transform .32s var(--veer)}
.volgende.inkt .pijl{background:var(--bot);color:var(--inkt)}
.volgende .duim{display:block;overflow:hidden;border-radius:16px 16px 16px 4px;box-shadow:0 0 0 8px var(--wit);margin:8px;aspect-ratio:16/10;background:var(--wit)}
.volgende .duim img{width:100%;height:100%;object-fit:cover;object-position:top}
.volgende:active{transform:scale(.99)}
@media (min-width:768px){.volgende{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;padding:56px;border-radius:80px 80px 80px 20px}
  .volgende strong{font-size:44px;line-height:48px}}
@media (hover:hover){.volgende:hover{border-radius:80px 80px 20px 80px}.volgende:hover .pijl{transform:translateX(6px)}}

/* Contact en voet zoals op de homepage. */
.contact{text-align:left}
.contact h2{max-width:none;margin-inline:0}
.contact .mail{color:inherit}
footer.voet{margin-top:0;flex-direction:row;text-align:left}
@media (max-width:580px){footer.voet{flex-direction:row;align-items:center;text-align:left}}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Alle cases op een rij, met de huidige gemarkeerd. */
.cases{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s13)}
.cases a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--lijn);border-radius:22px 22px 22px 4px;color:var(--tekst);font-weight:600;text-decoration:none;
  transition:border-radius .32s var(--veer),border-color .24s}
.cases a[aria-current=page]{background:var(--tekst);color:var(--vlak);border-color:var(--tekst)}
@media (hover:hover){.cases a:not([aria-current]):hover{border-color:var(--tekst);border-radius:22px 22px 4px 22px}}
.cases+.volgende{margin-top:16px}
figure.shot.narrow .ph{width:fit-content;max-width:100%}
.contact p{margin-inline:0}
/* De vergrootknop blijft binnen de grote afgeronde hoeken van de casebeelden. */
figure .ph .vergroot{right:20px;bottom:20px}
@media (min-width:768px){figure .ph .vergroot{right:32px;bottom:32px}}
@media (min-width:1200px){figure .ph .vergroot{right:42px;bottom:42px}}
/* Leestekst op dezelfde maat als de homepage. */
.prose{max-width:34em;margin-top:24px;font-size:18px;line-height:30px}
.prose p+p{margin-top:20px}
figcaption{font-size:16px;line-height:24px;max-width:40em}
@media (min-width:768px){.prose{font-size:20px;line-height:32px}}
/* Twee beelden naast elkaar: gelijk uitgelijnd in het midden. */
.pair{align-items:center}
/* Telefoon: de vier cases als nette 2x2. */
@media (max-width:479px){.cases{display:grid;grid-template-columns:1fr 1fr}.cases a{justify-content:center}}