@charset "utf-8";
/* Studio.Shifft — website
   Opzet: donker als een zaal, papier hier en daar. Montreal in zinnen, Fragment Mono voor het blok.
   Alles in 16:9; korrel over alles; de breuk komt steeds anders terug. */

@font-face{font-family:'Archivo Black';src:url(fonts/ArchivoBlack.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url(fonts/FragmentMono.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url(fonts/Montserrat-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url(fonts/PPNeueMontreal-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url(fonts/PPNeueMontreal-Book.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url(fonts/PPNeueMontreal-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme: dark;
  /* kleur */
  --nacht:#0F0F0E; --nacht2:#1B1B19; --as:#9C9992; --papier:#EBEAE6; --papier2:#DEDCD6;
  --grafiet:#5A5853; --inkt:#121211; --lijn:#5E5C57; --lijn-zacht:rgba(235,234,230,.14);
  --koel:#00E9C6; --warm:#FF5A3C; --wit:#FFFFFF;
  /* letter */
  --f-kop:'PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --f-blok:'Fragment Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --f-logo:'Arial Black','Archivo Black','Helvetica Neue',sans-serif;
  /* maat */
  --rand:max(16px, env(safe-area-inset-left, 0px), min(3vw, 40px));
  --rand-r:max(16px, env(safe-area-inset-right, 0px), min(3vw, 40px));
  --sectie:clamp(72px, 9vw, 140px);
  --kop-l:clamp(44px, 7vw, 112px);
  --kop-m:clamp(30px, 3.6vw, 54px);
  --kop-s:clamp(22px, 2vw, 28px);
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--papier);font-family:var(--f-kop);font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--papier);color:var(--inkt)}
:focus-visible{outline:2px solid var(--papier);outline-offset:3px}
.papier :focus-visible{outline-color:var(--inkt)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ----- basis ----- */
.binnen{max-width:1440px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand-r)}
.label{font-family:var(--f-blok);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--as)}
.papier .label{color:var(--grafiet)}
.blok{font-family:var(--f-blok);font-size:15px;line-height:24px}
.lees{font-size:18px;line-height:28px}
.kop-l{font-weight:500;font-size:var(--kop-l);line-height:.98;letter-spacing:-.045em;margin:0;text-wrap:balance}
.kop-m{font-weight:500;font-size:var(--kop-m);line-height:1.06;letter-spacing:-.025em;margin:0;text-wrap:balance}
.kop-s{font-weight:500;font-size:var(--kop-s);line-height:1.15;letter-spacing:-.015em;margin:0}
.zacht{color:var(--as)}
.papier .zacht{color:var(--grafiet)}
.lijnkop{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:6px;}
.papier{background:var(--papier);color:var(--inkt)}
.sectie{padding-block:var(--sectie) 0}
.sectie:last-child{padding-bottom:var(--sectie)}
.sectie:has(+ .papier),.sectie:has(+ .cms-erbij + .papier){padding-bottom:var(--sectie)}
.s-diensten+.cms-erbij+.sectie{padding-top:var(--sectie)}
.knop-kader{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 20px;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:500;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.01em;background:transparent;border:0;cursor:pointer}
.knop-kader:hover{background:var(--papier);color:var(--nacht);box-shadow:none}
.papier .knop-kader:hover{background:var(--inkt);color:var(--papier)}
.pijl{display:inline-block;transition:transform .2s steps(3,end)}
a:hover .pijl{transform:translate(3px,-3px)}

/* ----- lens: kleurrand naar de zijkant, vignet ----- */
:where(#inhoud *, .sitekop *){text-shadow:calc(var(--cax,0px) * -1) 0 rgba(255,74,52,.42),var(--cax,0px) 0 rgba(40,196,255,.42)}
.lens{position:fixed;inset:0;pointer-events:none;z-index:905;background:radial-gradient(ellipse 118% 104% at 50% 50%,transparent 60%,rgba(0,0,0,.16) 82%,rgba(0,0,0,.34) 100%)}
@media (max-width:760px){.lens{background:radial-gradient(ellipse 130% 110% at 50% 50%,transparent 66%,rgba(0,0,0,.22) 100%)}}
/* ----- de breuk in tekst ----- */
.breuk{position:relative;display:inline-block}
.breuk>.t{display:inline-block;clip-path:polygon(-10% -40%,110% -40%,110% 60.4%,-10% 54.4%)}
.breuk>.o{position:absolute;left:0;top:0;white-space:nowrap;clip-path:polygon(-10% 54%,110% 60%,110% 140%,-10% 140%);will-change:transform}
.breuk.zelf>.o{animation:zelf 14s steps(1) infinite}
.breuk.vast>.o{transform:translateX(var(--sx,.045em))}
.breuk.vast.zelf>.o{animation:none}
.breuk:hover>.o,a:hover .breuk>.o,button:hover .breuk>.o{animation:glitch .8s steps(1) infinite}
.breuk:hover>.t,a:hover .breuk>.t,button:hover .breuk>.t{animation:glitchT .8s steps(1) infinite}
@keyframes glitch{0%{transform:translateX(.08em);clip-path:polygon(-10% 54%,110% 60%,110% 140%,-10% 140%);text-shadow:-.03em 0 var(--koel),.03em 0 var(--warm)}12%{transform:translateX(-.05em);clip-path:polygon(-10% 40%,110% 44%,110% 140%,-10% 140%);text-shadow:none}25%{transform:translateX(.12em);clip-path:polygon(-10% 62%,110% 66%,110% 140%,-10% 140%)}37%{transform:translateX(.02em);clip-path:polygon(-10% 30%,110% 36%,110% 140%,-10% 140%);text-shadow:.03em 0 var(--koel),-.03em 0 var(--warm)}50%{transform:translateX(.07em);clip-path:polygon(-10% 54%,110% 60%,110% 140%,-10% 140%);text-shadow:none}75%{transform:translateX(-.08em);clip-path:polygon(-10% 70%,110% 74%,110% 140%,-10% 140%)}87%{transform:translateX(.1em);clip-path:polygon(-10% 48%,110% 52%,110% 140%,-10% 140%)}100%{transform:translateX(.06em);clip-path:polygon(-10% 54%,110% 60%,110% 140%,-10% 140%)}}
@keyframes glitchT{0%,50%,100%{transform:none}25%{transform:translateX(-.03em)}75%{transform:translateX(.02em)}}
@keyframes zelf{0%,95%{transform:none;text-shadow:calc(var(--cax,0px) * -1) 0 rgba(255,74,52,.42),var(--cax,0px) 0 rgba(40,196,255,.42)}95.4%{transform:translateX(.05em);text-shadow:-.02em 0 var(--koel),.02em 0 var(--warm)}96.4%{transform:translateX(.08em);text-shadow:calc(var(--cax,0px) * -1) 0 rgba(255,74,52,.42),var(--cax,0px) 0 rgba(40,196,255,.42)}97.2%,100%{transform:none;text-shadow:calc(var(--cax,0px) * -1) 0 rgba(255,74,52,.42),var(--cax,0px) 0 rgba(40,196,255,.42)}}

/* ----- korrel ----- */
.korrel{position:fixed;inset:-50%;width:200%;height:200%;background:url(media/korrel.png) 0 0/240px 240px;opacity:.08;pointer-events:none;z-index:900;animation:korrel .83s steps(1) infinite}
@keyframes korrel{0%{transform:translate(0,0)}10%{transform:translate(-4%,-6%)}20%{transform:translate(-9%,3%)}30%{transform:translate(5%,-9%)}40%{transform:translate(-3%,8%)}50%{transform:translate(-8%,-2%)}60%{transform:translate(9%,5%)}70%{transform:translate(2%,-4%)}80%{transform:translate(-6%,9%)}90%{transform:translate(7%,-7%)}100%{transform:translate(0,0)}}

/* ----- cursor: een bolletje dat alles eronder omkeert ----- */
.cursor{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:1000;transition:width .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1),margin .22s cubic-bezier(.2,.8,.2,1),opacity .2s;opacity:0;will-change:transform}
.cursor.zichtbaar{opacity:1}
.cursor.groot{width:64px;height:64px;margin:-32px 0 0 -32px}
.cursor.reel{width:150px;height:150px;margin:-75px 0 0 -75px}
.cursor.tekst{width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px}
.cursor.druk{width:12px;height:12px;margin:-6px 0 0 -6px}
@media (hover:hover) and (pointer:fine){
  body.eigen-cursor, body.eigen-cursor a, body.eigen-cursor button, body.eigen-cursor [role=switch], body.eigen-cursor .kaart{cursor:none}
}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ----- kop van de site ----- */
.sitekop{position:fixed;top:0;left:0;right:0;z-index:700;color:var(--papier);transition:transform .35s cubic-bezier(.2,.8,.2,1),color .2s;padding-top:env(safe-area-inset-top,0px)}
.sitekop.op-papier{color:var(--inkt)}
.sitekop.weg{transform:translateY(-110%)}
.sitekop .binnen{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:22px}
.sitekop .tagline{font-family:var(--f-blok);font-size:13px;line-height:18px;white-space:pre-line}
.merkje{display:inline-flex;padding:10px;margin:-10px}
.merkje svg{display:block}
.mk .los{display:none}
a:hover .mk .heel,.merkje:hover .mk .heel,.mk.speel .heel{display:none}
a:hover .mk .los,.merkje:hover .mk .los,.mk.speel .los{display:inline}
a:hover .mk .onder,.merkje:hover .mk .onder,.mk.speel .onder{transform:translateX(12px)}
.menuknop{justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:transparent;font-weight:500;font-size:19px;letter-spacing:-.01em;cursor:pointer}
.menuknop i{display:inline-block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor}

/* ----- label rechts ----- */
.zijlabel{position:fixed;right:0;top:50%;transform:translateY(-50%);transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:650;width:44px;display:flex;flex-direction:column;align-items:stretch;background:var(--papier);color:var(--inkt);margin-right:env(safe-area-inset-right,0px)}
.zijlabel:hover{background:#fff}
.zijlabel span{display:flex;align-items:center;justify-content:center}
.zijlabel .mkvak{height:44px}
.zijlabel .lijntje{height:1px;background:rgba(18,18,17,.2)}
.zijlabel .woord{padding:18px 0}
.zijlabel .woord b{writing-mode:vertical-rl;transform:rotate(180deg);font:400 11px/11px var(--f-blok);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.zijlabel .pijlvak{height:44px}
.zijlabel.weg{transform:translate(110%,-50%)}
@media (max-width:640px){.zijlabel{display:none}}

/* ----- menu ----- */
.menu{position:fixed;inset:0;z-index:800;background:var(--papier);color:var(--inkt);display:flex;flex-direction:column;justify-content:space-between;padding-block:max(22px, env(safe-area-inset-top,0px)) max(28px, env(safe-area-inset-bottom,0px));visibility:hidden;clip-path:inset(0 0 100% 0)}
.menu.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
.menu.dicht{visibility:visible;clip-path:inset(0 0 100% 0);transition:clip-path .35s cubic-bezier(.7,0,.2,1)}
.menu .binnen{width:100%}
.menu-boven{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.menu-boven .tagline{font-family:var(--f-blok);font-size:13px;line-height:18px;white-space:pre-line}
.sluit{justify-self:end;width:48px;height:48px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sluit:hover{background:var(--inkt);color:var(--papier)}
.menu nav{display:flex;flex-direction:column;gap:0}
.menu nav a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:6px 0;border-top:1.5px solid var(--inkt);font-weight:500;font-size:clamp(52px,9.5vw,150px);line-height:1;letter-spacing:-.055em}
.menu nav a:last-child{border-bottom:1.5px solid var(--inkt)}
.menu nav a small{font:400 12px/16px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
.menu nav a[aria-current=page] small::after{content:' · hier'}
.menu-voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font:400 13px/20px var(--f-blok);letter-spacing:.06em;text-transform:uppercase}
.menu-voet a:hover{color:var(--grafiet)}

/* ----- verleg-overgang tussen pagina's ----- */
.verleg{position:fixed;inset:0;z-index:850;pointer-events:none;display:flex;flex-direction:column}
.verleg i{flex:1;background:var(--nacht);transform:translateX(-102%)}
.verleg i:nth-child(even){transform:translateX(102%)}
.verleg.in i{transform:none;transition:transform .26s steps(4,end)}
.verleg.in i:nth-child(3n){transition-delay:.03s}
.verleg.uit i{transform:translateX(102%);transition:transform .3s steps(5,end)}
.verleg.uit i:nth-child(even){transform:translateX(-102%)}
.verleg i:nth-child(4){background:var(--papier)}
.verleg.in i:nth-child(4){background:var(--nacht)}

/* ----- flits: korte glitch over beeld ----- */
.flits{position:absolute;pointer-events:none;z-index:640}
.rand-onscherp{position:fixed;left:0;right:0;height:16vh;z-index:600;pointer-events:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);--mx:-999px;--my:-999px;--gat:0px}
.rand-onscherp.boven{top:0;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),transparent calc(var(--gat) * .45),#000 var(--gat)),linear-gradient(to bottom,#000 15%,transparent);mask-image:radial-gradient(circle at var(--mx) var(--my),transparent calc(var(--gat) * .45),#000 var(--gat)),linear-gradient(to bottom,#000 15%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.rand-onscherp.onder{bottom:0;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),transparent calc(var(--gat) * .45),#000 var(--gat)),linear-gradient(to top,#000 15%,transparent);mask-image:radial-gradient(circle at var(--mx) var(--my),transparent calc(var(--gat) * .45),#000 var(--gat)),linear-gradient(to top,#000 15%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
body.bewerk .rand-onscherp{display:none}

/* ----- woordmerk ----- */
.woordmerk{--ca:0em;position:relative;color:var(--papier);font-family:var(--f-logo);user-select:none}
.woordmerk .wm-studio,.woordmerk .wm-woord>span,.woordmerk .wm-laag .ff{text-shadow:calc(var(--ca) * -1) 0 var(--warm),var(--ca) 0 var(--koel)}
.woordmerk .wm-binnen{position:absolute;will-change:transform}
.woordmerk .wm-studio{position:absolute;left:0;right:0;top:0;text-align:center;font-family:Montserrat,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.2545em;line-height:1;letter-spacing:.19em;padding-left:.19em;white-space:nowrap}
.woordmerk .wm-rij{position:absolute;left:0;right:0;top:.3245em;display:flex;justify-content:center}
.woordmerk .wm-woord{position:relative;font-weight:900;line-height:1;letter-spacing:.024em;white-space:nowrap}
.woordmerk .wm-gat{visibility:hidden}
.woordmerk .wm-laag{position:absolute;inset:0}
.woordmerk .wm-laag .v{visibility:hidden}
.woordmerk .wm-laag .ff{display:inline-block}

/* ----- secties ----- */
.s-logo{min-height:100vh;min-height:100svh;padding-top:calc(96px + env(safe-area-inset-top,0px));padding-bottom:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.s-logo{position:relative}
.s-logo .hero{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;width:100%}
.hero-merk .woordmerk{filter:blur(var(--onscherp,.7px));will-change:filter}
.diepte{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.diepte canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.diepte.achter{z-index:0}
.diepte.voor{z-index:2}
.diepte.korrel-licht{z-index:3;mix-blend-mode:overlay;opacity:.42}
.diepte.korrel-licht::before{content:'';position:absolute;inset:-30%;background-image:var(--korrel,none);background-size:220px 220px;animation:korrel .7s steps(1) infinite}
.hero-merk{flex:1;display:flex;align-items:center;justify-content:center;min-height:clamp(200px,40vh,520px)}
.hero-merk>[data-woordmerk]{width:min(700px,50vw)}
.hero-onder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:20px 48px;padding-top:20px;}
.hero-kop{margin:0;font-weight:500;font-size:clamp(20px,1.9vw,28px);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.hero-tekst{margin:0;max-width:460px;color:var(--as);font-size:13px;line-height:21px}
.hero-scroll{white-space:nowrap}
@media (max-width:760px){.hero-merk>[data-woordmerk]{width:min(520px,82vw)}.hero-onder{grid-template-columns:1fr}.hero-scroll{display:none}}

.s-intro .binnen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:40px 64px;align-items:end}
.s-intro .blok{max-width:560px;color:var(--as)}

.s-paginakop{padding-top:calc(150px + env(safe-area-inset-top,0px))}
.s-paginakop .binnen{display:flex;flex-direction:column;gap:28px}
.s-paginakop .kop-l{max-width:16ch}
.s-paginakop .blok{max-width:640px;color:var(--as)}

/* showreel: over het beeld gaan en hij speelt */
.s-showreel .reel{position:relative;aspect-ratio:16/9;max-height:88vh;width:100%;margin:0 auto;overflow:hidden;background:var(--nacht2)}
.s-showreel .reel img,.s-showreel .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-showreel .reel img{filter:grayscale(1) brightness(.45) contrast(1.05) var(--lensf,);transition:filter .5s}
.s-showreel .reel video{opacity:0;transition:opacity .35s steps(4,end)}
.s-showreel .reel.speelt video{opacity:1}
.s-showreel .reel.speelt img{filter:var(--lensf,none)}
.s-showreel .reel-tekst{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;z-index:3;transition:opacity .3s}
.s-showreel .reel.speelt .reel-tekst{opacity:0}
.s-showreel .hoek{position:absolute;width:16px;height:16px;border:1.5px solid var(--papier);opacity:.55;z-index:3;transition:transform .35s steps(3,end),opacity .3s}
.s-showreel .reel.speelt .hoek{opacity:.35}
.s-showreel .hoek.lb{left:clamp(14px,1.6vw,24px);top:clamp(14px,1.6vw,24px);border-right:0;border-bottom:0}
.s-showreel .hoek.rb{right:clamp(14px,1.6vw,24px);top:clamp(14px,1.6vw,24px);border-left:0;border-bottom:0}
.s-showreel .hoek.lo{left:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);border-right:0;border-top:0}
.s-showreel .hoek.ro{right:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);border-left:0;border-top:0}
.s-showreel .reel.speelt .hoek.lo,.s-showreel .reel.speelt .hoek.ro{transform:translateX(6px)}
.s-showreel .tijd{position:absolute;right:calc(clamp(14px,1.6vw,24px) + 30px);bottom:clamp(14px,1.6vw,24px);z-index:3;display:flex;justify-content:flex-end;font:400 11px/16px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .3s;font-variant-numeric:tabular-nums}
.s-showreel .reel.speelt .tijd{opacity:1}
.s-showreel .reel-onder{display:flex;justify-content:space-between;gap:24px;margin-top:14px}

/* werk: zwart-wit; ga erover en het beeld speelt in kleur */
.kaart{position:relative;display:block;overflow:hidden;background:var(--nacht2);isolation:isolate}
.kaart .beeld{position:relative;aspect-ratio:16/9;overflow:hidden}
.kaart .beeld img,.kaart .beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kaart .beeld img{filter:grayscale(1) contrast(1.06) brightness(.92) var(--lensf,);transition:filter .3s steps(3,end),transform .8s cubic-bezier(.2,.8,.2,1)}
.kaart .beeld video{opacity:0;transition:opacity .25s steps(3,end)}
.kaart.aan .beeld img{filter:var(--lensf,none);transform:scale(1.02)}
.kaart.speelt .beeld video{opacity:1}
.kaart .titel{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:2px;padding:clamp(12px,1.4vw,20px);background:linear-gradient(to top,rgba(15,15,14,.72),rgba(15,15,14,0));opacity:0;transform:translateY(8px);transition:opacity .2s steps(3,end),transform .25s steps(3,end)}
.kaart.aan .titel{opacity:1;transform:none}
.kaart .titel .klant{font:400 12px/16px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;color:var(--papier)}
.kaart .titel .naam{font-weight:500;font-size:clamp(18px,1.6vw,24px);line-height:1.15;letter-spacing:-.015em}
@media (hover:none){.kaart .titel{opacity:1;transform:none}.kaart .beeld img{filter:grayscale(.2)}}

.s-werkselectie .collage{position:relative;margin-top:40px;aspect-ratio:1360/1180}
.s-werkselectie .stuk{position:absolute}
.s-werkselectie .alles{position:absolute;z-index:6}
@media (max-width:760px){
  .s-werkselectie .collage{aspect-ratio:auto;display:flex;flex-direction:column;gap:28px}
  .s-werkselectie .stuk,.s-werkselectie .alles{position:static!important;width:100%!important;transform:none!important}
}

.s-werkraster .filters{display:flex;flex-wrap:wrap;gap:4px 36px;padding-block:22px;}
.s-werkraster .filters button{min-height:44px;padding:0;border:0;background:transparent;font:400 16px/24px var(--f-blok);color:var(--as);cursor:pointer}
.s-werkraster .filters button[aria-pressed=true]{color:var(--papier)}
.s-werkraster .filters button:hover{color:var(--papier)}
.s-werkraster .raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:6px;margin-top:40px}
.s-werkraster .leeg{padding:48px 0;color:var(--as)}

/* manifest: verleggen. */
.s-manifest .woord{margin:clamp(40px,5vw,72px) 0 0;font-weight:500;font-size:clamp(72px,14vw,210px);line-height:.9;letter-spacing:-.055em;white-space:nowrap}
.s-manifest .stelling-rij{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.s-manifest .stelling{grid-column:4 / span 9;margin:0}
.s-manifest .alineas{margin-top:clamp(48px,6vw,96px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px 40px;align-items:start}
.s-manifest .alineas p{margin:0;padding-top:16px;text-wrap:pretty}
.s-manifest .slot{margin-top:clamp(56px,7vw,104px);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0 6px;}
@media (max-width:760px){.s-manifest .stelling{grid-column:1 / -1}}

/* diensten (papier) */
.s-diensten{padding-block:var(--sectie)}
.s-diensten+.sectie{padding-top:var(--sectie)}
.s-diensten .kop-m{margin-top:48px;max-width:1040px}
.s-diensten .items{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px 40px;align-items:start}
.s-diensten .item{padding-top:14px;display:flex;flex-direction:column;gap:10px}
.s-diensten .item button{align-self:flex-start;min-height:44px;padding:0;border:0;background:transparent;font-weight:500;font-size:26px;letter-spacing:-.015em;cursor:pointer;text-align:left}
.s-diensten .item .klapkop{min-height:44px;font-weight:500;font-size:26px;letter-spacing:-.015em;line-height:1.2;padding-top:8px}
[data-multi]{white-space:pre-line}
.s-diensten .item p{margin:0;font:400 15px/24px var(--f-blok);color:var(--grafiet);text-wrap:pretty}
.s-diensten .item p.lang{color:var(--inkt)}

.s-klanten .rij{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 32px;padding-top:20px;}
.s-klanten .namen{font-weight:500;font-size:clamp(20px,2vw,28px);line-height:1.3;letter-spacing:-.015em;max-width:1100px}

/* Ready to shifft? — schuif en de gegevens verschijnen */
.s-klaar .binnen{display:flex;flex-direction:column;gap:28px}
.s-klaar .klaar-rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;padding-top:28px;}
.s-klaar .vraag{font-weight:500;font-size:var(--kop-l);line-height:1;letter-spacing:-.05em;margin:0}
.schuif{--b:clamp(260px,32vw,420px);--h:76px;position:relative;width:var(--b);height:var(--h);border-radius:var(--h);box-shadow:inset 0 0 0 2px var(--papier);background:transparent;padding:0;border:0;touch-action:pan-y;user-select:none;transition:background .3s steps(3,end)}
.schuif .spoor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:var(--h);font:400 13px/16px var(--f-blok);letter-spacing:.08em;text-transform:uppercase;color:var(--as);pointer-events:none;transition:opacity .2s}
.schuif .knop{position:absolute;left:6px;top:6px;width:calc(var(--h) - 12px);height:calc(var(--h) - 12px);border-radius:50%;background:var(--papier);color:var(--inkt);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.schuif.sleept .knop{transition:none}
@media (max-width:560px){.s-klaar .schuif{--b:100%;--h:68px}.schuif .spoor{font-size:12px;padding-right:12px}}
.schuif .knop .ja{position:absolute;font:500 13px/1 var(--f-kop);letter-spacing:-.01em;opacity:0}
.schuif[aria-checked=true]{background:var(--papier)}
.schuif[aria-checked=true] .spoor{opacity:0}
.schuif[aria-checked=true] .knop{background:var(--nacht);color:var(--papier)}
.schuif[aria-checked=true] .knop .ja{opacity:1;animation:ja .5s steps(1) both}
.schuif[aria-checked=true] .knop svg{opacity:.9}
@keyframes ja{0%{opacity:0;transform:translateX(.3em)}20%{opacity:1;transform:translateX(-.12em);text-shadow:-.06em 0 var(--koel),.06em 0 var(--warm)}45%{transform:translateX(.06em);text-shadow:none}70%,100%{opacity:1;transform:none}}
.gegevens{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:24px 32px;overflow:hidden;max-height:0;opacity:0;transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.gegevens.open{max-height:600px;opacity:1}
.gegevens .gegeven{display:flex;flex-direction:column;gap:8px;padding-top:14px;}
.gegevens .waarde{font-weight:500;font-size:clamp(22px,2.4vw,34px);line-height:1.1;letter-spacing:-.02em;word-break:break-word}
.kopieer{align-self:flex-start;min-height:32px;padding:0 10px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--lijn);font:400 11px/1 var(--f-blok);letter-spacing:.06em;text-transform:uppercase;color:var(--as);cursor:pointer}
.kopieer:hover{color:var(--papier);box-shadow:inset 0 0 0 1px var(--papier)}

/* beeld, beeldenrij, tekst, citaat */
.s-beeld figure,.s-beeldenrij figure{margin:0}
.kader{position:relative;overflow:hidden;background:var(--nacht2)}
.plek{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--lijn-zacht);background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(235,234,230,.025) 22px 23px)}
.plek .label{color:var(--as)}
.kader img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform;filter:var(--lensf,none)}
.kader.r169{aspect-ratio:16/9}
.kader.r45{aspect-ratio:4/5}
figcaption{margin-top:12px}
.s-beeldenrij .rij{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px;align-items:end}
.s-beeldenrij .rij.drie{grid-template-columns:1.6fr 1fr 1.6fr}
@media (max-width:760px){.s-beeldenrij .rij.drie{grid-template-columns:1fr}}
.s-tekst .binnen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:24px 64px}
.s-tekst .lees{margin:0;max-width:640px;white-space:pre-line}
.s-citaat blockquote{margin:0;max-width:1100px}
.s-citaat .kop-m{font-weight:500}
.s-citaat cite{display:block;margin-top:20px;font-style:normal}

/* projectpagina */
.project-kop{padding-top:calc(130px + env(safe-area-inset-top,0px))}
.project-kop .terug{display:inline-flex;gap:8px;min-height:44px;align-items:center}
.project-kop .terug:hover{color:var(--papier)}
.project-kop h1{margin-top:20px}
.speler{position:relative;margin-top:40px;aspect-ratio:16/9;background:var(--nacht2);overflow:hidden}
.speler iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.speler img,.speler video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.speler img{filter:var(--lensf,none)}
.speler .speler-noot{position:absolute;left:14px;bottom:12px;z-index:3;color:var(--papier);opacity:.6}
.speler .afspelen{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(15,15,14,.25);transition:background .3s}
.speler .afspelen:hover{background:rgba(15,15,14,.05)}
.speler .rond{width:clamp(72px,9vw,120px);height:clamp(72px,9vw,120px);border-radius:50%;background:var(--papier);color:var(--inkt);display:flex;align-items:center;justify-content:center}
.meta{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:20px 32px;padding-top:16px;}
.meta div{display:flex;flex-direction:column;gap:6px}
.meta .waarde{font-weight:500;font-size:19px;letter-spacing:-.01em}
.project-tekst{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:40px 64px;align-items:start}
.project-tekst .omschrijving{margin:0;font-weight:500;font-size:var(--kop-s);line-height:1.3;letter-spacing:-.015em;white-space:pre-line;text-wrap:pretty}
.credits{margin:0;padding:0;list-style:none;font:400 14px/22px var(--f-blok)}
.credits li{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:16px;padding:7px 0;}
.credits li>span:only-child{grid-column:1 / -1}
.credits li span:first-child{color:var(--as)}
body.bewerk .credits li{display:block}
.stills{margin-top:clamp(56px,7vw,104px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.stills .still:first-child{grid-column:1 / -1}
@media (max-width:640px){.stills{grid-template-columns:1fr}}
.volgende{display:block;margin-top:clamp(72px,9vw,140px);padding:28px 0 0;}
.volgende .rij{display:flex;justify-content:space-between;align-items:center;gap:24px}
.volgende .kop-l{font-size:clamp(36px,6vw,96px)}

/* ----- voet ----- */
.voet{margin-top:var(--sectie);border-top:2px solid var(--lijn)}
.voet .boven{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:clamp(36px,4vw,56px)}
.voet .kol{display:flex;flex-direction:column;gap:6px;min-width:0}
.voet .kol .label{padding-bottom:8px}
.voet .kol a,.voet .kol span.w{font-weight:500;font-size:16px;line-height:26px;letter-spacing:-.01em;word-break:break-word}
.voet .kol a:hover{color:var(--as)}
.voet .merk{display:flex;flex-direction:column;gap:16px}
.voet .onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:18px calc(22px + env(safe-area-inset-bottom,0px));}
.voet .onder a:hover{color:var(--papier)}
@media (max-width:900px){.voet .boven{grid-template-columns:repeat(2,minmax(0,1fr))}.voet .merk{grid-column:1 / -1}}

/* ----- geen beweging ----- */
@media (prefers-reduced-motion:reduce){
  .korrel,.breuk>.o,.breuk>.t,.schuif .knop .ja{animation:none!important}
  .kaart .beeld img,.cursor,.sitekop,.menu{transition:none!important}
  .kader img{transform:none!important}
}