:root{
color-scheme:light;
--nacht:#ffffff; --vlak:#f3f5f8; --lijn:#e1e5eb; --wit:#111315; --zacht:#676d76;
--blauw:#2f6fd6; --map-d:#7fa8e6; --map-l:#a5c8f8; --map-i:#7598d8;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
--serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--rand:clamp(18px,4vw,56px); --breed:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;background:var(--nacht)}
body{margin:0;background:var(--nacht);color:var(--wit);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
body.intro-on{overflow:hidden}
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.25em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
h2{font-size:clamp(38px,6.4vw,92px)}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
p{margin:0 0 1em}
.wrap{width:min(var(--breed),100% - 2*var(--rand));margin-inline:auto}
.mono{font:500 11.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--zacht)}
section{padding:clamp(72px,10vw,150px) 0}
.kop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--rand);align-items:end;margin-bottom:clamp(30px,4.5vw,64px)}
.kop .mono{display:block;margin-bottom:16px}
.kop p{margin:0;color:var(--zacht);max-width:40ch;justify-self:end}
.knop{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid var(--wit);border-radius:999px;background:var(--wit);color:var(--nacht);font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.knop:hover{background:var(--blauw);border-color:var(--blauw);transform:translateY(-2px)}
.knop.lijn{background:none;color:var(--wit);border-color:#c5cbd4}
.knop.lijn:hover{border-color:var(--wit);background:none}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}
#intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--nacht);cursor:pointer;overflow:hidden}
#intro[hidden]{display:none}
#intro .midden{display:grid;justify-items:center;gap:26px}
#intro svg{display:block;width:clamp(200px,26vw,360px);height:auto;overflow:visible}
#intro .woord{margin:0;font:600 clamp(12px,1.3vw,15px)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase}
#intro .log{position:absolute;left:var(--rand);bottom:var(--rand);margin:0;display:grid;gap:6px}
#intro .log span{opacity:0}
#intro .sla{position:absolute;right:var(--rand);bottom:var(--rand);margin:0}
#intro .gloed{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#cfe2ff 0,#7fb0f2 18%,transparent 55%);opacity:0;pointer-events:none}
#intro.speel svg{animation:i-in .55s cubic-bezier(.2,.8,.2,1) both}
#intro.speel #glas{transform-box:fill-box;transform-origin:50% 50%;animation:i-zoek 2s cubic-bezier(.55,.1,.35,1) .55s both}
#intro.speel #vraag{transform-box:fill-box;transform-origin:50% 55%;animation:i-vind .4s cubic-bezier(.2,1.5,.4,1) 2.5s both}
#intro.speel #lens{transform-box:fill-box;transform-origin:50% 50%;animation:i-pols .5s ease-out 2.5s both}
#intro.speel #flap{transform-box:fill-box;transform-origin:50% 100%;animation:i-flap .55s cubic-bezier(.3,.8,.3,1) 3.25s both}
#intro.speel .woord{animation:i-woord .5s ease-out 2.85s both}
#intro.speel .midden{animation:i-duik .95s cubic-bezier(.7,0,.9,.4) 3.5s both}
#intro.speel .gloed{animation:i-gloed 1s ease-in 3.6s both}
#intro.speel{animation:i-weg .45s ease-out 4.25s both}
#intro.speel .log span:nth-child(1){animation:i-woord .25s .5s both}
#intro.speel .log span:nth-child(2){animation:i-woord .25s 1.5s both}
#intro.speel .log span:nth-child(3){animation:i-woord .25s 2.55s both;color:var(--blauw)}
#intro.speel .log span:nth-child(4){animation:i-woord .25s 3.25s both}
@keyframes i-in{from{opacity:0;transform:scale(.9) translateY(10px)}}
@keyframes i-zoek{0%{transform:translate(-64px,-34px) rotate(-12deg);opacity:0}8%{opacity:1}26%{transform:translate(58px,-26px) rotate(8deg)}50%{transform:translate(44px,42px) rotate(-4deg)}74%{transform:translate(-52px,36px) rotate(10deg)}100%{transform:translate(0,0) rotate(0);opacity:1}}
@keyframes i-vind{from{opacity:0;transform:scale(.3)}}
@keyframes i-pols{40%{transform:scale(1.12)}}
@keyframes i-flap{to{transform:scaleY(.62) skewX(-5deg)}}
@keyframes i-woord{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@keyframes i-duik{to{transform:scale(22);opacity:0}}
@keyframes i-gloed{50%{opacity:.9}100%{opacity:0}}
@keyframes i-weg{to{opacity:0;visibility:hidden}}
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--nacht) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--lijn)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px}
.naam{display:flex;align-items:center;gap:12px;font:600 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.naam svg{width:34px;height:auto}
header nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
header nav a:not(.knop){text-decoration:none;font-size:15px;color:var(--zacht);padding:10px 0}
header nav a:not(.knop):hover{color:var(--wit)}
header .knop{min-height:40px;padding:0 18px}
@media (max-width:720px){header nav a:not(.knop){display:none}.naam span{display:none}}
.hero{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(40px,5vw,72px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,3vw,48px);align-items:end}
h1{font-size:clamp(84px,17.5vw,270px);line-height:.8;letter-spacing:-.065em;margin-left:-.04em}
h1 em{display:inline-block;letter-spacing:-.035em;padding-right:.04em}
h1 i{font-style:normal;color:var(--blauw)}
.hero .tekst{position:relative;z-index:6;pointer-events:none}
.hero .tekst>*{pointer-events:auto}
.hero .intro{margin:clamp(22px,2.4vw,34px) 0 clamp(22px,2.4vw,32px);font-size:clamp(19px,1.7vw,24px);line-height:1.35;color:var(--zacht);max-width:28ch}
.hero .intro b{font-weight:400;color:var(--wit)}
.desk{position:relative;height:clamp(400px,50vw,660px)}
.win{position:absolute;margin:0;width:var(--w);left:var(--x);top:var(--y);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r));background:#fff;border:1px solid var(--lijn);border-radius:9px;overflow:hidden;box-shadow:0 22px 50px rgba(20,35,60,.28);animation:zweef 7s ease-in-out infinite alternate;animation-delay:var(--d,0s);touch-action:pan-y}
.win.vast{animation:none}
@keyframes zweef{to{translate:0 -12px}}
.win .bar{display:flex;align-items:center;gap:5px;padding:7px 9px;font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--zacht);white-space:nowrap}
.win .bar i{width:7px;height:7px;border-radius:50%;background:#cfd5de;flex:none}
.win .bar i:first-child{background:var(--blauw)}
.win .bar span{margin-left:5px;overflow:hidden;text-overflow:ellipsis}
.win img{width:100%;aspect-ratio:4/5;object-fit:cover;pointer-events:none;user-select:none}
@media (hover:hover) and (pointer:fine){.win{cursor:grab}.win.sleep{cursor:grabbing;animation:none;box-shadow:0 40px 80px rgba(20,35,60,.4)}}
.hero .tip{position:absolute;right:0;bottom:-6px;margin:0}
@media (hover:none){.hero .tip{display:none}}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.desk{height:92vw;order:-1}.kop{grid-template-columns:1fr}.kop p{justify-self:start}}
.scenes{padding:0}
.scene{position:relative;height:165vh;padding:0}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--nacht)}
.pin>*{position:absolute}
.sc-meta{top:84px;left:var(--rand);right:var(--rand);display:flex;justify-content:space-between;gap:12px;z-index:7}
.sc-meta b{color:var(--wit);font-weight:500}
.fb,.ff{left:50%;top:50%;width:var(--fw)}
.fb{height:calc(var(--fw)*.78);background:var(--map-d);border-radius:calc(var(--fw)*.055);transform:translate(-50%,-50%) translateY(calc(var(--fc) + var(--fy,0px)));opacity:var(--fo,1);z-index:1}
.fb::before{content:"";position:absolute;left:0;bottom:calc(100% - var(--fw)*.06);width:42%;height:calc(var(--fw)*.16);background:var(--map-d);border-radius:calc(var(--fw)*.055) calc(var(--fw)*.09) 0 0}
.ff{height:calc(var(--fw)*.67);background:linear-gradient(#a9cbfa,#9cc1f5);border-radius:calc(var(--fw)*.055);transform-origin:50% 100%;transform:translate(-50%,-50%) translateY(calc(var(--fc) + var(--fw)*.055 + var(--fy,0px))) perspective(900px) rotateX(var(--a,0deg));opacity:var(--fo,1);z-index:3;display:grid;place-items:center;box-shadow:0 -6px 18px rgba(20,40,80,.18)}
.ff svg{width:46%;height:auto;opacity:.9}
.ff .lab{position:absolute;left:7%;bottom:7%;right:7%;display:flex;justify-content:space-between;font:600 calc(var(--fw)*.032)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4d72b6}
.ph{left:50%;top:50%;width:calc(var(--fw)*.8);aspect-ratio:4/5;object-fit:cover;border-radius:6px;z-index:2;transform:translate(-50%,-50%);box-shadow:0 18px 44px rgba(20,35,60,.3);background:#dfe5ee}
.schaduw{inset:0;z-index:5;background:linear-gradient(to top,rgba(8,7,6,.86) 0,rgba(8,7,6,.25) 42%,transparent 62%);opacity:var(--d,0);pointer-events:none}
.sc-titel{left:var(--rand);right:var(--rand);bottom:clamp(28px,6vh,72px);z-index:6;opacity:var(--d,0);transform:translateY(calc((1 - var(--d,0))*34px))}
.sc-titel h2{font-size:clamp(46px,9.5vw,150px);margin:12px 0 22px}
.sc-titel{color:#ffffff}.sc-titel .mono{color:#ffffff}.sc-titel .knop{background:#ffffff;border-color:#ffffff;color:#111315}.sc-meta{opacity:calc(1 - var(--d,0))}
.hint{left:0;right:0;bottom:22px;text-align:center;z-index:6;opacity:var(--h,1)}
.hint::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:var(--zacht);animation:hint 1.4s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.samen{padding:clamp(34px,5vw,70px) 0;border-block:1px solid var(--lijn);overflow:hidden}
.samen>.mono{display:block;margin:0 var(--rand) 18px}
.band{display:flex;overflow:hidden}
.band ul{display:flex;flex:none;align-items:baseline;margin:0;padding:0;list-style:none;animation:band 48s linear infinite}
.band.terug ul{animation-direction:reverse;animation-duration:60s}
.band li{flex:none;padding-right:clamp(26px,3.4vw,56px);font:600 clamp(34px,6vw,84px)/1.08 var(--sans);letter-spacing:-.04em;white-space:nowrap}
.band li:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--blauw)}
.band.terug li{color:transparent;-webkit-text-stroke:1px #c5cbd4}
.band.terug li:nth-child(even){color:transparent}
@keyframes band{to{transform:translateX(-100%)}}
.diensten{margin:0;padding:0;list-style:none;border-top:1px solid var(--wit)}
.diensten li{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:baseline;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--lijn);transition:padding .35s cubic-bezier(.2,.7,.2,1),color .2s}
.diensten li:hover{padding-left:clamp(10px,2vw,28px);color:var(--blauw)}
.diensten .mono{color:var(--blauw)}
.diensten h3{font-size:clamp(30px,5vw,68px)}
.diensten p{margin:0;color:var(--zacht);font-size:16px;max-width:36ch;justify-self:end}
@media (max-width:720px){.diensten li{grid-template-columns:44px 1fr}.diensten p{grid-column:2;justify-self:start}}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.4vw,44px)}
.filter button{min-height:40px;padding:0 17px;border:1px solid var(--lijn);border-radius:999px;background:none;color:var(--zacht);font:500 14px/1 var(--sans);cursor:pointer}
.filter button[aria-pressed=true]{background:var(--wit);border-color:var(--wit);color:var(--nacht)}
.mappen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(34px,4vw,60px) clamp(16px,2.4vw,36px);list-style:none;margin:0;padding:0}
.mappen li[hidden]{display:none}
.mappen button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.fold{position:relative;aspect-ratio:1/.92;perspective:800px;margin-bottom:16px}
.fold .bk{position:absolute;inset:12% 0 0 0;background:var(--map-d);border-radius:12px}
.fold .bk::before{content:"";position:absolute;left:0;bottom:calc(100% - 8px);width:40%;height:22%;background:var(--map-d);border-radius:12px 18px 0 0}
.fold img{position:absolute;left:50%;bottom:6%;width:52%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;transform:translateX(-50%);transition:transform .55s cubic-bezier(.2,.8,.2,1);box-shadow:0 8px 20px rgba(20,35,60,.28)}
.fold .fr{position:absolute;inset:27% 0 0 0;background:linear-gradient(#a9cbfa,#9cc1f5);border-radius:12px;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1);display:flex;align-items:flex-end;justify-content:space-between;padding:9%;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4d72b6}
.mappen button:hover .fr,.mappen button:focus-visible .fr,.mappen li.open .fr{transform:rotateX(-38deg)}
.mappen button:hover img:nth-of-type(1),.mappen button:focus-visible img:nth-of-type(1),.mappen li.open img:nth-of-type(1){transform:translate(-104%,-26%) rotate(-10deg)}
.mappen button:hover img:nth-of-type(2),.mappen button:focus-visible img:nth-of-type(2),.mappen li.open img:nth-of-type(2){transform:translate(4%,-26%) rotate(10deg)}
.mappen button:hover img:nth-of-type(3),.mappen button:focus-visible img:nth-of-type(3),.mappen li.open img:nth-of-type(3){transform:translate(-50%,-40%)}
.mappen h3{font-size:clamp(19px,1.9vw,25px);letter-spacing:-.03em;margin-bottom:6px}
.meer{margin-top:clamp(34px,4vw,56px)}
@media (max-width:1000px){.mappen{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.mappen{grid-template-columns:1fr 1fr}}
#venster{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(8,7,6,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#venster[hidden]{display:none}
.vbox{width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7);animation:v-in .35s cubic-bezier(.2,.9,.2,1)}
@keyframes v-in{from{opacity:0;transform:scale(.92) translateY(20px)}}
.vbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--lijn)}
.vbar button{width:30px;height:30px;border-radius:50%;border:1px solid #c5cbd4;background:none;cursor:pointer;font-size:15px;line-height:1}
.vbar button:hover{background:var(--wit);color:var(--nacht)}
.vbar .mono b{color:var(--wit);font-weight:500}
.vin{padding:clamp(16px,2.4vw,30px);overflow-y:auto}
.vin h3{font-size:clamp(30px,4.4vw,58px);margin:8px 0 18px}
.vfotos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.vfotos figure{margin:0}
.vfotos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.vfotos figcaption{margin-top:6px;font:500 10px/1.3 var(--mono);color:var(--zacht);letter-spacing:.04em}
.vvoet{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:20px}
.vvoet p{margin:0;color:var(--zacht);font-size:14px;max-width:52ch}
@media (max-width:720px){.vfotos{grid-template-columns:1fr 1fr}}
.grading{border-top:1px solid var(--lijn)}
.vn-rij{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,24px)}
.vn{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--vlak);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vn .voor{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vn .greep{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.vn .greep::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);background-image:linear-gradient(90deg,transparent 14px,#111 14px,#111 16px,transparent 16px,transparent 26px,#111 26px,#111 28px,transparent 28px)}
.vn .lbl{position:absolute;top:12px;padding:5px 9px;border-radius:2px;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}
.vn .lbl.l{left:12px}.vn .lbl.r{right:12px}
.vn input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.vn:has(input:focus-visible){outline:2px solid var(--blauw);outline-offset:3px}
.reis{border-top:1px solid var(--lijn)}
.wereld{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.bolvak{display:grid;gap:14px;justify-items:center}
.bol{position:relative;width:min(100%,600px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#eaf2fd;box-shadow:inset 0 0 0 1px #c8daf4,0 30px 80px rgba(47,111,214,.18);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.bol.sleep{cursor:grabbing}
.bol canvas{display:block;width:100%;height:100%}
#bolpins{position:absolute;inset:0;pointer-events:none}
.pin2{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:3px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;will-change:transform}
.pin2 svg{width:30px;height:auto;filter:drop-shadow(0 3px 6px rgba(20,35,60,.35));transition:scale .25s cubic-bezier(.2,1.6,.4,1)}
.pin2:hover svg,.pin2:focus-visible svg,.pin2.actief svg{scale:1.35}
.pin2 span{padding:3px 7px;border-radius:999px;background:#111315;color:#fff;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s}
.pin2:hover span,.pin2:focus-visible span,.pin2.actief span,.bol.dichtbij .pin2 span{opacity:1}
.pin2:hover,.pin2.actief{z-index:3}
.bolmap{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);pointer-events:none;animation:bm-in .4s cubic-bezier(.2,1.4,.4,1) both}
.bolmap[hidden]{display:none}
.knop[hidden]{display:none}
#bolpins{transition:opacity .25s}#bolpins:has(+ .bolmap:not([hidden])){opacity:0;pointer-events:none}#bolpins:has(+ .bolmap:not([hidden])) .pin2{pointer-events:none}
.bolmap .fold{margin:0;filter:drop-shadow(0 18px 30px rgba(20,35,60,.35))}
@keyframes bm-in{from{opacity:0;transform:translate(-50%,-30%) scale(.3)}}
.bolmap.open .fr{transform:rotateX(-42deg)}
.bolmap.open img:nth-of-type(1){transform:translate(-104%,-30%) rotate(-10deg)}
.bolmap.open img:nth-of-type(2){transform:translate(4%,-30%) rotate(10deg)}
.bolmap.open img:nth-of-type(3){transform:translate(-50%,-46%)}
.bolhint{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center;margin:0;min-height:30px}
.bolhint button{border:1px solid var(--lijn);border-radius:999px;background:none;padding:7px 12px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--wit);cursor:pointer}
.plekken{display:flex;flex-wrap:wrap;gap:10px 10px;margin:0;padding:0;list-style:none}
.plekken li{transition:transform .3s}
.plekken li:nth-child(odd){transform:rotate(-1.4deg)}.plekken li:nth-child(even){transform:rotate(1.2deg)}
.plekken li:hover{transform:rotate(0) scale(1.04)}
.plekken button,.plekken .volgende{display:flex;align-items:baseline;gap:10px;padding:11px 18px;border:1px solid var(--lijn);border-radius:999px;background:none;cursor:pointer;text-align:left;text-decoration:none;transition:border-color .2s,background .2s}
.plekken button:hover,.plekken button[aria-pressed=true]{border-color:var(--blauw);background:#eaf2fd}
.plekken b{font:600 clamp(20px,2.3vw,32px)/1 var(--sans);letter-spacing:-.04em}
.plekken li:nth-child(3n) b{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.plekken .volgende{background:var(--blauw);border-color:var(--blauw);color:#fff}
.plekken .volgende .mono{color:#fff}
#vleeg{color:var(--zacht);max-width:52ch}
@media (max-width:860px){.wereld{grid-template-columns:1fr}.bol{width:min(100%,440px)}}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin:0;padding:0;list-style:none}
.quotes li{padding:22px 22px 18px;background:var(--vlak);border:1px solid var(--lijn);border-radius:18px 18px 18px 4px;transition:transform .3s}
.quotes li:nth-child(odd){transform:rotate(-1.2deg)}.quotes li:nth-child(even){transform:rotate(1deg) translateY(10px)}
.quotes li:hover{transform:rotate(0) scale(1.03)}
.quotes blockquote{margin:0 0 18px;font:400 clamp(24px,2.5vw,34px)/1.12 var(--serif);font-style:italic}
@media (max-width:860px){.quotes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.quotes{grid-template-columns:1fr}}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px);margin:0;padding:0;list-style:none;counter-reset:s}
.stappen li{counter-increment:s;padding-top:18px;border-top:1px solid var(--wit)}
.stappen li::before{content:"0" counter(s);display:block;font:400 clamp(60px,8vw,120px)/.9 var(--serif);font-style:italic;color:var(--blauw);margin-bottom:14px}
.stappen h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:10px}
.stappen p{color:var(--zacht);margin:0;max-width:36ch}
@media (max-width:760px){.stappen{grid-template-columns:1fr}}
.vragen{border-top:1px solid var(--lijn)}
.vragen .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--rand)}
.vragen .mono{display:block;margin-bottom:16px}
details{border-bottom:1px solid var(--lijn)}
details:first-child{border-top:1px solid var(--lijn)}
summary{display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blauw);font:400 24px/1 var(--mono);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--zacht);max-width:60ch;padding-bottom:10px}
details p b{color:var(--wit);font-weight:500}
@media (max-width:860px){.vragen .wrap{grid-template-columns:1fr}}
.boek{background:var(--map-l);color:#111315}
.boek .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--rand)}
.boek .mono{color:#22344f}
.boek h2{font-size:clamp(64px,12vw,190px);line-height:.82;margin:14px 0 26px}
.boek .links p{max-width:42ch}
.boek .wa{font-weight:600}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
form .vol{grid-column:1/-1}
label{display:block;font:600 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;margin-bottom:7px;color:#22344f}
input,select,textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #0d0c0a;border-radius:8px;background:rgba(255,255,255,.35);color:#0d0c0a;font:400 16px/1.3 var(--sans)}
textarea{min-height:120px;resize:vertical}
.boek .knop{background:#111315;border-color:#111315;color:#ffffff}
.boek .knop:hover{background:#ffffff;border-color:#ffffff;color:#111315}
.boek :focus-visible{outline-color:#0d0c0a}
#klaar{margin:0;font-weight:500}
@media (max-width:860px){.boek .wrap{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}
footer{padding:34px 0 86px;border-top:1px solid var(--lijn)}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
footer a,footer button{color:var(--zacht);text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer;font-size:15px}
footer a:hover,footer button:hover{color:var(--wit)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.pad{position:fixed;left:0;bottom:0;z-index:30;display:flex;gap:14px;align-items:center;padding:9px var(--rand) 9px;background:color-mix(in srgb,var(--nacht) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--lijn);border-right:1px solid var(--lijn);border-radius:0 10px 0 0}
.pad b{color:var(--wit);font-weight:500}
.pad i{display:block;width:70px;height:2px;background:var(--lijn);position:relative}
.pad i::after{content:"";position:absolute;inset:0;background:var(--blauw);transform-origin:0 50%;transform:scaleX(var(--v,0))}
.wa-zwevend{position:fixed;right:16px;bottom:16px;z-index:30;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .2s}
.wa-zwevend:hover{transform:scale(1.08)}
.intro-on .wa-zwevend,.intro-on .pad{display:none}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.scene{height:100vh}
.band{flex-wrap:wrap}.band ul{flex-wrap:wrap}.band ul+ul{display:none}
}
.pin2{will-change:auto}.pin2 svg,.bolmap .fold{filter:none}@media (min-width:721px){.mappen{grid-template-columns:repeat(3,1fr);gap:clamp(44px,5vw,76px) clamp(24px,3.4vw,56px)}}.vn-video{aspect-ratio:16/9;margin-bottom:clamp(12px,1.8vw,24px)}.vn video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:#000}.vn video.voor{clip-path:inset(0 calc(100% - var(--p)) 0 0)}[data-view][hidden]{display:none!important}
section{padding:clamp(48px,6vw,96px) 0}
.pad,.wa-zwevend{display:none!important}
.zeker{margin:16px 0 0}
header nav a[aria-current]:not(.knop){color:var(--wit)}
@media (max-width:860px){.desk{order:0;height:78vw}}
.menuknop{display:none;align-items:center;min-height:40px;padding:0 16px;border:1px solid #c5cbd4;border-radius:999px;background:none;font:600 15px/1 var(--sans);cursor:pointer}
#menu{position:fixed;inset:62px 0 0 0;z-index:39;background:var(--nacht);padding:18px var(--rand) 120px;overflow-y:auto}
#menu[hidden]{display:none}
#menu nav{display:grid}
#menu a{padding:16px 0;border-bottom:1px solid var(--lijn);text-decoration:none;font:600 clamp(34px,9vw,56px)/1 var(--sans);letter-spacing:-.04em}
#menu a:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
#menu a[aria-current]{color:var(--blauw)}
@media (max-width:860px){header nav a:not(.knop){display:none}.menuknop{display:inline-flex}header nav{gap:8px}}
.cro{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:38;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(17,19,21,.94);box-shadow:0 14px 44px rgba(20,35,60,.32)}
.cro .mono{color:#fff;white-space:nowrap;margin-right:6px}
.cro .knop{min-height:46px;padding:0 20px;white-space:nowrap;background:#fff;border-color:#fff;color:#111315}
.knop.wa2{background:#25d366;border-color:#25d366;color:#fff}
.knop.wa2:hover{background:#1eb857;border-color:#1eb857;color:#fff}
.cro .knop:hover{transform:none}
body[data-v=boek] .cro a[href="#boek"]{display:none}
.intro-on .cro{display:none}
@media (max-width:600px){.cro{left:10px;right:10px;transform:none;bottom:10px;padding:8px}.cro .mono{display:none}.cro .knop{flex:1;justify-content:center}body[data-v=boek] .cro .mono{display:block;flex:1;text-align:center}}
.cta{border-top:1px solid var(--lijn);text-align:left}
.cta h2{margin-bottom:18px}
.cta p{color:var(--zacht);max-width:44ch;font-size:clamp(17px,1.5vw,20px)}
footer{padding-bottom:110px}
.scene{height:140vh}
body[data-v=home] main>section{padding:clamp(34px,4.4vw,64px) 0}
body[data-v=home] .kop{margin-bottom:clamp(18px,2.4vw,30px)}
body[data-v=home] .kop h2,.cta h2{font-size:clamp(32px,4.6vw,62px)}
.reviews[data-view=home] .kop p{display:none}
.reviews[data-view=home] blockquote{font-size:clamp(20px,2vw,26px)}
#grading .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(10px,1.4vw,18px)}
#grading .kop{grid-column:1/-1}
#grading .vn-rij{display:contents}
#grading .vn-video{margin:0}
#grading .vn:not(.vn-video){aspect-ratio:auto;height:0;min-height:100%}
@media (max-width:860px){#grading .wrap{grid-template-columns:1fr 1fr}#grading .vn-video{grid-column:1/-1}#grading .vn:not(.vn-video){aspect-ratio:4/5;height:auto;min-height:0}}
#buitenland .bol{width:min(100%,430px)}
@media (max-width:860px){#buitenland .bol{width:min(100%,320px)}}
h1 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;padding:0}
.maker{display:flex;align-items:center;justify-content:center;gap:12px;flex-basis:100%;padding-top:20px;border-top:1px solid var(--lijn);text-decoration:none}.maker img{height:46px;width:auto}