*,*::before,*::after{box-sizing:border-box}
:root{--paper:#F7F9E4;--cacao:#301B1B;--cacao-2:#3C2925;--butter:#F0EFC8;--lime:#C0D451;--wall-p:#ECEFD3;--ink-2:#5B4642;--gut:clamp(16px,4vw,56px);--max:1320px;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);--nav-h:88px;--line:2.5px solid var(--cacao);--wobble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'%3E%3Cpath d='M0 6C30 1 60 11 90 6s60-5 90 0 50 4 60 0' fill='none' stroke='%23301B1B' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E")}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--cacao);font:400 18px/1.55 "Sour Gummy",ui-rounded,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:400;background:var(--lime);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none;border:var(--line)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--cacao);outline-offset:3px}
/* decoratieve svg's (logo's, stickers) krijgen in Chrome focus bij een klik; geen rand tonen, links en knoppen houden hun focusrand */
svg:focus{outline:none}
svg.lg:not(a svg){-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.dark :focus-visible{outline-color:var(--lime)}

/* type */
h1,h2,h3{margin:0;font-family:"Lilita One",Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
.h-l{font-size:clamp(44px,6.6vw,108px)}
.h-m{font-size:clamp(30px,3.6vw,56px)}
.ln{display:block}
.t-l{rotate:-2.5deg}.t-r{rotate:1.8deg}
.w{display:inline-block}
.hand{font-family:"Gaegu",cursive;font-weight:700;letter-spacing:.07em;font-size:clamp(20px,1.9vw,27px);line-height:1.25}
.dark .hand{color:var(--lime)}
.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.5;max-width:32em}
.pill{display:inline-block;background:var(--lime);color:var(--cacao);font:400 clamp(16px,1.4vw,21px)/1 "Lilita One",sans-serif;padding:.55em 1.1em .5em;border-radius:999px;border:var(--line);white-space:nowrap}
.mark{display:inline-block;background:var(--lime);padding:.06em .5em .1em;border-radius:999px;rotate:-2deg;margin-left:.15em}
.tlink{font-weight:600;text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 88%/100% .38em no-repeat;transition:background-size .35s var(--ease)}
.tlink:hover{background-size:100% 100%}

/* knoppen */
.btn{--bg:var(--lime);--fg:var(--cacao);--sw:var(--cacao);--sf:var(--lime);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:56px;padding:0 28px;border:var(--line);border-radius:999px;background:var(--bg);color:var(--fg);font:400 19px/1 "Lilita One",sans-serif;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:-3px;z-index:-1;background:var(--sw);transform:translateX(-102%);transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn:focus-visible{color:var(--sf)}
.btn-line{--bg:transparent;--sf:var(--paper)}
.dark .btn-lime,.foot .btn-lime{border-color:var(--lime);--sw:var(--butter);--sf:var(--cacao)}
.dark .btn-line{--fg:var(--butter);--sw:var(--butter);--sf:var(--cacao);border-color:var(--butter)}
.btn .lbl{display:inline}
.wd{display:inline-block;white-space:nowrap}
.btn .ch{display:inline-block;white-space:pre}
.btn-mail{text-transform:none;letter-spacing:.01em}
.hop .ch{animation:chHop .5s var(--spring) both;animation-delay:calc(var(--b,0ms) + var(--i) * 22ms)}
@keyframes chHop{35%{transform:translateY(-6px) rotate(-5deg)}70%{transform:translateY(1px)}}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* intro: staat vanaf de eerste paint, loopt op CSS, heeft geen script nodig */
.intro{position:fixed;inset:0;z-index:500;background:var(--cacao);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;animation:introUit .8s cubic-bezier(.76,0,.24,1) 1.85s forwards}
.intro svg{width:min(72vw,560px);height:auto;overflow:visible;color:var(--butter)}
.intro .iw,.intro .id{transform-box:fill-box;transform-origin:50% 100%}
.intro .iw{animation:iVal .95s .05s both}
.intro .id{animation:iStuiter 1.15s .6s both}
.intro p{margin:0;font:700 clamp(18px,2vw,26px)/1 "Gaegu",cursive;letter-spacing:.08em;color:var(--lime);opacity:0;animation:iIn .5s ease 1.25s forwards}
@keyframes iVal{0%{transform:translateY(-190%) scale(.94,1.08);animation-timing-function:cubic-bezier(.55,0,1,.45)}46%{transform:translateY(0) scale(1.07,.86);animation-timing-function:cubic-bezier(0,.55,.45,1)}64%{transform:translateY(-9%) scale(.98,1.04);animation-timing-function:cubic-bezier(.55,0,1,.45)}80%{transform:translateY(0) scale(1.03,.96)}100%{transform:none}}
@keyframes iStuiter{0%{transform:translate(330px,-400px);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}8%{opacity:1}30%{transform:translate(170px,0) scale(1.3,.72);animation-timing-function:cubic-bezier(0,.55,.45,1)}47%{transform:translate(92px,-160px);animation-timing-function:cubic-bezier(.55,0,1,.45)}63%{transform:translate(40px,0) scale(1.22,.8);animation-timing-function:cubic-bezier(0,.55,.45,1)}75%{transform:translate(17px,-58px);animation-timing-function:cubic-bezier(.55,0,1,.45)}87%{transform:translate(0,0) scale(1.14,.86)}94%{transform:translate(0,-8px)}100%{transform:none;opacity:1}}
@keyframes iIn{to{opacity:1}}
@keyframes introUit{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* nav */
.nav{position:sticky;top:0;z-index:60;padding:12px var(--gut) 0;margin-bottom:calc(var(--nav-h) * -1);pointer-events:none}
.nav .wrap{pointer-events:auto;display:flex;align-items:center;gap:20px;max-width:1240px;height:70px;padding:0 6px 0 26px;background:var(--paper);border:var(--line);border-radius:999px}
.logo{display:block;flex:none;color:var(--cacao)}
.logo svg{display:block;width:108px;height:38px;overflow:visible}
.lw,.ld{transform-box:fill-box;transform-origin:50% 100%}
.lg.bounce .ld{animation:navDot 1s var(--spring)}
.no-js .lg:hover .ld{animation:navDot 1s var(--spring)}
.pt-label .ld{animation:navDot 1s .3s var(--spring) both}
@keyframes navDot{0%{transform:none}24%{transform:translateY(-240%) scale(.88,1.14)}48%{transform:translateY(0) scale(1.35,.72)}66%{transform:translateY(-90%)}82%{transform:translateY(0) scale(1.12,.9)}100%{transform:none}}
@keyframes navWord{0%,100%{transform:none}48%{transform:scale(1.03,.95)}60%{transform:none}}
.nav nav{position:relative;margin-left:auto}
.nav-blob{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--lime);border:2.5px solid var(--cacao);opacity:0;pointer-events:none}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu{position:relative;z-index:1}
.menu a:not(.btn){display:block;padding:11px 16px;font-weight:600;font-size:18px;text-decoration:none;border-radius:999px;transition:background .25s var(--ease)}
.nav:not(.has-blob) .menu a:not(.btn):hover{background:var(--lime)}
.menu a:not(.btn) .ch{display:inline-block;white-space:pre}

.menu .m-btn{margin-left:10px}
.hamb{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:var(--line);background:var(--paper);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamb span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--cacao);transition:transform .35s var(--spring),opacity .2s}
body.nav-open .hamb span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.nav-open .hamb span:nth-child(2){opacity:0}
body.nav-open .hamb span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* behang: herhaalde slogan, schuin en toon-op-toon */
.wall{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wall-in{--wf:clamp(58px,8vw,124px);--wlh:calc(var(--wf) * .95);position:absolute;left:0;right:0;top:-12vw;bottom:-12vw;overflow:hidden;transform:skewY(-8deg);contain:layout paint}
.wall-in::before,.wall-in::after{content:attr(data-a);position:absolute;left:0;top:50%;white-space:pre;font:400 var(--wf)/calc(var(--wlh) * 2) "Lilita One",sans-serif;text-transform:uppercase;color:var(--wall-p);will-change:transform;backface-visibility:hidden;transform:translate3d(calc(-200px - var(--s,0px)),-50%,0)}
.wall-in::after{content:attr(data-b);margin-top:var(--wlh);transform:translate3d(calc(var(--ob,-200px) + var(--s,0px)),-50%,0)}
.dark .wall-in::before,.dark .wall-in::after{color:var(--cacao-2)}

/* secties */
.sec{position:relative;padding:clamp(80px,10vw,150px) 0}
.dark{background:var(--cacao);color:var(--butter)}
.sec-head{text-align:center;max-width:1040px;margin:0 auto clamp(44px,5.5vw,80px)}
.sec-head .h-l{margin-top:10px}
.sec-head .lead{margin:20px auto 0}

/* hero */
.hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(20px,3vw,48px)) 0 clamp(64px,8vw,110px)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:center}
.hero-title{font-size:clamp(48px,6.2vw,92px)}
.hero-title .t-l{transform-origin:0 100%}
.hero-logo{display:block;width:min(100%,620px);height:auto;margin-top:.1em;overflow:visible;color:var(--cacao)}

@keyframes dotHop{0%{transform:none}28%{transform:translateY(-120%) scale(.9,1.12)}56%{transform:translateY(0) scale(1.25,.78)}74%{transform:translateY(-30%)}100%{transform:none}}
.hero-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-weight:600;font-size:clamp(19px,1.65vw,25px);line-height:1.25}
.hero-list li{display:flex;align-items:center;gap:12px}
.hero-list li+li::before{content:"";width:.36em;height:.31em;border-radius:50%;background:var(--cacao)}
.hero-hand{margin-top:16px}
.hero .lead{margin-top:16px;color:var(--ink-2)}
.collage{position:relative;width:100%;max-width:460px;justify-self:center;aspect-ratio:46/56}
.print{position:absolute;margin:0;border:var(--line);border-radius:26px;overflow:hidden;background:var(--butter)}
.print img{width:100%;height:100%;object-fit:cover}
.p1{width:76%;right:0;top:2%;aspect-ratio:1100/1208;rotate:3deg}
.p2{width:45%;left:0;bottom:0;aspect-ratio:4/5;rotate:-7deg}
.hi{position:absolute;left:-24%;top:3%;display:flex;flex-direction:column;align-items:flex-end;rotate:-8deg;white-space:nowrap}
.hi svg{width:74px;height:54px;margin:2px -6px 0 0;color:var(--cacao);rotate:14deg}
.stk{position:absolute;z-index:3}
.stk svg{display:block;width:100%;height:100%;overflow:visible}
[data-drag]{touch-action:auto}
@media (pointer:fine){[data-drag]{cursor:grab}[data-drag].is-drag{cursor:grabbing}}
.h-say{right:-6%;top:60%;rotate:-11deg}
.h-bolt{width:92px;height:92px;right:-5%;top:-7%;rotate:12deg}
.h-eyes{width:92px;height:92px;left:37%;bottom:-3%}

/* manifest */
.manifest{overflow:hidden;text-align:center}
.manifest .wrap{position:relative;z-index:1;max-width:1000px}
.manifest .h-l{margin-top:10px;font-size:clamp(56px,8vw,128px)}
.man-intro{font-size:clamp(22px,2.2vw,30px);font-weight:500;line-height:1.35;margin:22px auto 0;max-width:22em}
.strike{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.strike li{position:relative;white-space:nowrap;font:400 clamp(26px,4.2vw,62px)/1.12 "Lilita One",sans-serif;text-transform:uppercase;color:var(--butter);padding:0 .12em}
.strike li:nth-child(odd){rotate:-2deg}.strike li:nth-child(even){rotate:1.5deg}
.strike svg{position:absolute;left:-5%;width:110%;top:50%;height:.55em;translate:0 -45%;overflow:visible}
.strike svg{clip-path:inset(-20% 100% -20% 0);transition:clip-path .75s var(--ease) .35s}
.strike path{fill:none;stroke:var(--lime);stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.strike li.is-in svg{clip-path:inset(-20% -2% -20% 0)}
.strike li.st1 svg{transition-delay:.6s}.strike li.st2 svg{transition-delay:.85s}.strike li.st3 svg{transition-delay:1.1s}
.turn{display:inline-flex;align-items:center;gap:10px;margin-top:38px;font-size:clamp(22px,2.3vw,32px)}
.turn svg{width:92px;height:70px;color:var(--lime);rotate:18deg}
.man-close{margin:22px auto 0;max-width:14em;color:var(--butter)}
.man-body{margin:20px auto 0;max-width:30em;font-size:clamp(18px,1.4vw,21px)}

/* diensten */
.diensten{list-style:none;margin:0;padding:0;background:var(--wobble) repeat-x 0 0/240px 12px;padding-top:6px}
.diensten li{background:var(--wobble) repeat-x 0 100%/240px 12px;padding-bottom:6px}
.dienst{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 92px 54px;grid-template-areas:"n r i p";align-items:center;gap:28px;width:100%;padding:24px 22px;background:none;border:0;text-align:left;cursor:pointer}
.dienst::before{content:"";position:absolute;inset:8px 0;z-index:-1;background:var(--lime);border-radius:24px;clip-path:inset(0 100% 0 0 round 24px);transition:clip-path .55s var(--ease)}
.dienst:hover::before,.dienst:focus-visible::before{clip-path:inset(0 0 0 0 round 24px)}
.d-naam{grid-area:n;font:400 clamp(34px,4.6vw,70px)/.95 "Lilita One",sans-serif;text-transform:uppercase;transition:translate .5s var(--spring)}
.dienst:hover .d-naam{translate:14px 0}
.d-regel{grid-area:r;font-size:clamp(18px,1.5vw,21px);font-weight:500;line-height:1.35}
.d-icon{grid-area:i;width:92px;height:92px;transition:transform .55s var(--spring)}
.dienst:hover .d-icon{transform:rotate(-10deg) translateY(-6px) scale(1.1)}
.d-plus{grid-area:p;width:54px;height:54px;border:var(--line);border-radius:50%;display:grid;place-items:center;font:400 30px/1 "Lilita One",sans-serif;transition:background .3s,color .3s,rotate .45s var(--spring)}
.dienst:hover .d-plus{background:var(--cacao);color:var(--lime);rotate:90deg}
.detail{display:none}

/* werk */
.werk{overflow:hidden}
.werk .sec-head,.werk .case,.werk-close{position:relative;z-index:1}
.case.flip .case-txt{order:2}
.case.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.case-rail{min-width:0}
[data-rail]{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:6px;max-width:100%}
[data-rail].is-drag{cursor:grabbing}
.no-js [data-rail]{overflow-x:auto}
[data-rail-track]{display:flex;gap:18px;width:max-content;will-change:transform}
[data-rail-track]>*{flex:none;width:clamp(220px,21vw,300px)}
[data-rail-track] img{-webkit-user-drag:none;pointer-events:none}
.slide{margin:0;border-radius:22px;overflow:hidden;border:2.5px solid var(--butter);aspect-ratio:4/5;background:var(--cacao-2)}
.slide img{width:100%;height:100%;object-fit:cover}
.rail-voet{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:18px}
.rail-voet .hand{margin-right:auto}
.f-dz{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px}
.f-dz:hover{color:var(--lime)}
.rail-voet .hand{font-size:clamp(17px,1.4vw,21px)}
.rail-pijlen{display:flex;gap:10px}
.rail-pijlen button{width:54px;height:54px;border-radius:50%;border:2.5px solid var(--butter);background:none;color:var(--butter);cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s,transform .4s var(--spring)}
.rail-pijlen button:hover{background:var(--lime);border-color:var(--lime);color:var(--cacao);transform:scale(1.08) rotate(-6deg)}
.rail-pijlen svg{width:24px;height:24px}
.werk-close{text-align:center;margin-top:clamp(64px,8vw,112px)}
.werk-close .hand{font-size:clamp(24px,2.6vw,34px)}
.werk-close .cta{justify-content:center;margin-top:20px}
.case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.case-txt .pill{rotate:-4deg}
.case h3{font-size:clamp(56px,7vw,110px);margin-top:18px;color:var(--butter)}
.case-txt>p{margin-top:16px;font-size:clamp(18px,1.4vw,20px);max-width:30em}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0 0}
.chips li{border:2px solid var(--butter);border-radius:999px;padding:5px 14px;font-weight:600;font-size:16px}
.credit{margin-top:14px;font-size:15px}
.case-txt .btn{margin-top:26px}
.why{position:relative;display:inline-block;margin-left:10px;rotate:6deg;top:-6px;font-size:clamp(14px,1.2vw,17px)}


/* werkwijze */
.stappen-box{position:relative}
.stappen{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);list-style:none;margin:0;padding:0}
.pad{position:absolute;left:12.5%;width:75%;top:20px;height:96px;overflow:visible;z-index:0;color:var(--cacao)}
.pad path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:.5 12;vector-effect:non-scaling-stroke}
.stap{position:relative;z-index:1;text-align:center}
.stap-icon{width:136px;height:136px;margin:0 auto;border-radius:50%;background:var(--butter);border:var(--line);display:grid;place-items:center;transition:background .45s var(--ease)}
.stap-icon svg{width:86px;height:86px}
.stap.is-on .stap-icon{background:var(--lime)}
.stap h3{font-size:clamp(26px,2.4vw,36px);margin-top:22px}
.stap p{margin:10px auto 0;max-width:17em;font-size:17.5px}
.hopper{position:absolute;left:0;top:0;width:52px;height:45px;z-index:4;pointer-events:none;color:var(--cacao);display:none}
.hopper svg{display:block;width:100%;height:100%;overflow:visible}
.has-hop .hopper{display:block}

/* over */
.over{background:var(--butter)}
.over-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,104px);align-items:center}
.portret{position:relative;width:100%;max-width:440px;justify-self:center;aspect-ratio:1}
.rond{width:100%;height:100%;margin:0;border-radius:50%;overflow:hidden;border:14px solid var(--lime);outline:var(--line)}
.rond img{width:100%;height:100%;object-fit:cover}
.o-hi{position:absolute;left:-6%;top:-4%;rotate:-10deg;display:flex;flex-direction:column;align-items:flex-start}
.o-hi svg{width:70px;height:52px;margin:2px 0 0 60px;rotate:40deg;color:var(--cacao)}
.o-smile{width:96px;height:96px;right:-2%;top:2%;rotate:10deg}
.o-spark{width:78px;height:78px;left:-2%;bottom:10%}
.o-tag{right:-4%;bottom:4%;rotate:-7deg}
.over-txt .h-l{font-size:clamp(46px,5.8vw,94px);margin-top:10px}
.over-txt .big{font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.35;margin-top:22px}
.over-txt .big+p{margin-top:14px;max-width:34em;font-size:19px}
.o-links{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:26px}
.drag-hint{display:none;font-size:18px}
@media (pointer:fine){.drag-hint{display:block}}

/* vragen */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,104px);align-items:start}
.faq-head{position:sticky;top:120px}
.faq-head .h-l{font-size:clamp(46px,5.4vw,88px);margin-top:10px}
.faq-head .lead{margin-top:18px}
.faq-head .stk{position:relative;display:block;width:96px;height:96px;margin-top:28px;rotate:-8deg}
.faq-list{list-style:none;margin:0;padding:6px 0 0;background:var(--wobble) repeat-x 0 0/240px 12px}
.faq-item{background:var(--wobble) repeat-x 0 100%/240px 12px;padding-bottom:6px}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:24px 4px;background:none;border:0;cursor:pointer;text-align:left;font-weight:600;font-size:clamp(20px,1.8vw,25px);line-height:1.3}
.faq-q:hover .q-t{background-size:100% .38em}
.q-t{background:linear-gradient(var(--lime),var(--lime)) 0 90%/0 .38em no-repeat;transition:background-size .4s var(--ease)}
.pl{position:relative;flex:none;width:46px;height:46px;border-radius:50%;border:var(--line);transition:background .3s,rotate .5s var(--spring)}
.pl::before,.pl::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2.5px;margin:-1.25px 0 0 -9px;border-radius:2px;background:var(--cacao)}
.pl::after{rotate:90deg}
.faq-item.open .pl{rotate:135deg;background:var(--lime)}
html:not(.no-js) .faq-a{height:0;overflow:hidden}
html:not(.no-js) .faq-item.open .faq-a{height:auto}
.faq-a-in{padding:0 64px 26px 4px;font-size:18px;max-width:40em}

/* contact */
.contact{padding:clamp(40px,6vw,90px) 0 clamp(64px,7vw,100px)}
.c-card{position:relative;overflow:hidden;border:var(--line);border-radius:40px;background:var(--paper);text-align:center;padding:clamp(72px,9vw,128px) var(--gut) clamp(48px,6vw,80px)}
.c-card>*:not(.wall){position:relative;z-index:1}
.c-send{rotate:-12deg;font-size:clamp(18px,1.8vw,26px);margin-bottom:6px}
.c-card h2{font-size:clamp(46px,7.4vw,122px)}
.c-sub{font-weight:500;font-size:clamp(22px,2.2vw,32px);line-height:1.3;margin-top:16px}
.c-card .cta{justify-content:center;margin-top:30px}
.c-card .hand{margin-top:28px}
.c-logo{display:block;width:124px;height:43px;margin:40px auto 0;color:var(--cacao)}

/* footer */
.foot{background:var(--cacao);color:var(--butter);padding:clamp(64px,8vw,110px) 0 28px;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:36px}
.foot .hand{color:var(--lime);font-size:clamp(24px,2.4vw,32px)}
.f-kop{font:400 18px/1 "Lilita One",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--lime);margin-bottom:14px}
.foot ul .ch{display:inline-block;white-space:pre}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot ul a:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:5px}
.foot .btn{margin-top:22px}
.foot-logo{display:block;margin-top:clamp(56px,7vw,100px);color:var(--butter)}
.foot-logo svg{display:block;width:100%;height:auto;overflow:visible}

.f-say{display:inline-flex;align-items:center;gap:6px}.f-say svg{width:20px;height:20px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:30px;padding-top:22px;border-top:2px solid var(--cacao-2);font-size:15px}

/* dialogen */
dialog.dlg{border:var(--line);border-radius:32px;padding:0;background:var(--paper);color:var(--cacao);width:min(780px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
dialog.dlg.wide{width:min(1120px,calc(100vw - 24px))}
dialog.dlg::backdrop{background:rgba(48,27,27,.74)}
.dlg-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;height:0;padding:0 16px;pointer-events:none}
.dlg-x{pointer-events:auto;margin-top:16px;width:50px;height:50px;border-radius:50%;border:var(--line);background:var(--paper);cursor:pointer;display:grid;place-items:center;transition:background .25s,rotate .45s var(--spring)}
.dlg-x:hover{background:var(--lime);rotate:90deg}
.dlg-x svg{width:20px;height:20px}
.dlg-in{padding:clamp(28px,4vw,52px)}
.dlg h2{font-size:clamp(40px,4.6vw,64px);margin-top:8px;padding-right:48px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.f-grid .full{grid-column:1/-1}
.fld span{display:block;font-weight:600;font-size:16px;margin-bottom:6px}
.fld input,.fld textarea{width:100%;font:inherit;font-size:18px;color:var(--cacao);padding:13px 18px;border:var(--line);border-radius:18px;background:#FDFEF6}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;background:#fff;border-color:var(--cacao);box-shadow:none}
.fld input:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.keuze{border:0;padding:0;margin:22px 0 0}
.keuze legend{font-weight:600;font-size:16px;margin-bottom:10px;padding:0}
.chips-in{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:9px 16px;border:var(--line);border-radius:999px;font-weight:600;cursor:pointer;transition:background .2s,rotate .35s var(--spring)}
.chip input:checked+span{background:var(--lime);rotate:-3deg}
.chip input:focus-visible+span{outline:3px solid var(--cacao);outline-offset:2px}
.f-voet{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px}
.f-note{font-size:15px;color:var(--ink-2);max-width:26em}
.qv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}
.qv-img{margin:0;border-radius:22px;overflow:hidden;border:var(--line);aspect-ratio:4/5}
.qv-img img{width:100%;height:100%;object-fit:cover}
.qv-txt p{margin-top:16px;font-size:18px}
.dots{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;font-weight:600}
.dots li{display:flex;gap:12px;align-items:baseline}
.dots li::before{content:"";flex:none;width:.5em;height:.44em;border-radius:50%;background:var(--cacao);translate:0 -.08em}
.qv-txt .btn{margin-top:24px}
.case-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:end}
.case-kop p{font-size:18px}
.case-kop p+p{margin-top:12px}
.case-beeld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
.case-beeld figure{margin:0;border-radius:20px;overflow:hidden;border:var(--line);aspect-ratio:4/5}
.case-beeld img{width:100%;height:100%;object-fit:cover}

/* cursorstip */
.cursor{position:fixed;left:0;top:0;z-index:600;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--lime);border:2.5px solid var(--cacao);pointer-events:none;opacity:0;transition:opacity .3s,width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring)}
.cursor.on{opacity:1}
.cursor.big{width:56px;height:56px;margin:-28px 0 0 -28px;background:transparent;border:3px solid var(--lime)}

/* reveal (beweging.js) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv.st1{transition-delay:.1s}.rv.st2{transition-delay:.2s}.rv.st3{transition-delay:.3s}
.no-js .rv{opacity:1;transform:none}
.no-js .strike svg{clip-path:none}

@media (max-width:1100px){
  .dienst{grid-template-columns:minmax(0,1fr) 80px 50px;grid-template-areas:"n i p" "r i p";gap:6px 22px}
  .d-icon{width:80px;height:80px}
}
@media (max-width:900px){
  :root{--nav-h:72px}
  .nav{padding-top:10px}
  .nav .wrap{height:60px;padding:0 6px 0 20px}
  .nav-blob{display:none}
  .logo svg{width:92px;height:32px}
  .hamb{display:flex}
  .nav nav{position:fixed;left:0;right:0;top:var(--nav-b,72px);bottom:0;visibility:hidden;pointer-events:none;transition:visibility 0s .3s;margin:0}
  body.nav-open .nav nav{visibility:visible;pointer-events:auto;transition-delay:0s}
  body.nav-open .nav nav{background:rgba(48,27,27,.6)}
  .menu{position:absolute;inset:10px var(--gut) calc(12px + env(safe-area-inset-bottom));background:var(--paper);border:var(--line);border-radius:32px;flex-direction:column;align-items:stretch;padding:14px 22px 28px;gap:0;opacity:0;transform:translateY(-10px);transition:opacity .25s var(--ease),transform .3s var(--ease);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  body.nav-open .menu{opacity:1;transform:none}
  html.nav-open{overflow:hidden}
  .menu a:not(.btn){font:400 clamp(38px,11vw,54px)/1 "Lilita One",sans-serif;text-transform:uppercase;padding:16px 4px 14px;border-radius:0;background:var(--wobble) repeat-x 0 100%/240px 12px}
  .menu a:not(.btn):hover{background:var(--lime) }
  .menu .m-btn{margin:28px 0 0;align-self:flex-start}
  .hero-grid,.case,.case.flip,.over-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .case.flip .case-txt{order:0}
  .collage{max-width:380px;margin-top:40px}
  .hi{left:2%;top:-9%}
  .hi svg{display:none}
  .h-say,.h-bolt{right:0}
  .faq-head{position:static}
  .qv-grid,.case-kop{grid-template-columns:minmax(0,1fr)}
  .qv-img{max-width:300px}
  .case-beeld{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stappen{grid-template-columns:minmax(0,1fr);gap:34px}
  .pad{display:none}
  .stappen::before{content:"";position:absolute;left:47px;top:20px;bottom:40px;border-left:3px dotted var(--cacao)}
  .stap{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 22px;text-align:left;align-items:center}
  .stap-icon{width:96px;height:96px;grid-row:span 2;align-self:start}
  .stap-icon svg{width:62px;height:62px}
  .stap h3{margin-top:6px}
  .stap p{margin:4px 0 0}
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-top>div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  body{font-size:17px}
  .btn{height:52px;padding:0 22px;font-size:17px}
  .hero-logo{width:min(100%,360px)}
  .hero-list{gap:2px 12px}
  .hero-list li{gap:12px}
  .h-bolt{width:70px;height:70px}
  .h-eyes{width:70px;height:70px}
  .hi svg{width:56px;height:42px}
  .dienst{grid-template-columns:minmax(0,1fr) 64px;grid-template-areas:"n i" "r i";padding:20px 12px}
  .d-icon{width:64px;height:64px}
  .d-plus{display:none}
  .f-grid{grid-template-columns:minmax(0,1fr)}
  .rail-voet .hand{display:none}
  .portret{max-width:320px}
  .o-smile{width:72px;height:72px}.o-spark{width:60px;height:60px}
  .foot-top{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro{display:none}
  .rv{opacity:1;transform:none;transition:none}
  .strike svg{clip-path:none;transition:none}
  .hop .ch,.lg.bounce .ld,.lg.bounce .lw,.pt-label .ld,.no-js .lg:hover .ld{animation:none}
  .cursor{display:none}
}

/* ================= pagina-overgang ================= */
.pt{position:fixed;inset:0;z-index:520;background:var(--cacao);color:var(--butter);display:flex;align-items:center;justify-content:center;pointer-events:none;animation:ptUit .9s cubic-bezier(.76,0,.24,1) .55s both}
.pt-label{display:flex;align-items:flex-end;font:400 clamp(64px,13vw,210px)/.86 "Lilita One",sans-serif;text-transform:uppercase;animation:ptLbl .6s var(--spring) both}
.pt-label i{display:block;width:.24em;height:.21em;margin:0 0 .05em .06em;border-radius:50%;background:var(--lime);animation:ptDot .8s .08s both}
.pt-label svg{width:min(62vw,520px);height:auto;color:var(--butter)}
.pt-home{display:none}
.pt-in .pt-home{display:flex}
.pt-in .intro{display:none}
@keyframes ptUit{0%{transform:translateY(0);border-radius:0}100%{transform:translateY(-104%);border-radius:0 0 50% 50%/0 0 22vh 22vh;visibility:hidden}}
@keyframes ptLbl{0%{transform:translateY(50px) rotate(-5deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes ptDot{0%{transform:translateY(-4em);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}40%{transform:translateY(0) scale(1.35,.7);opacity:1;animation-timing-function:cubic-bezier(0,.55,.45,1)}62%{transform:translateY(-1.1em);animation-timing-function:cubic-bezier(.55,0,1,.45)}82%{transform:translateY(0) scale(1.15,.85)}100%{transform:none}}
.pt-cover{position:fixed;inset:0;z-index:540;background:var(--cacao);visibility:hidden;pointer-events:none;display:grid;place-items:center}
.pt-cover.go{visibility:visible;pointer-events:auto}
.pt-cover i{display:block;width:40px;height:34px;border-radius:50%;background:var(--lime);opacity:0}
.pt-cover.go i{animation:coverDot .42s .4s cubic-bezier(.3,0,.7,1) infinite alternate}
@keyframes coverDot{0%{opacity:1;transform:translateY(0) scale(1.25,.75)}30%{transform:translateY(-12px) scale(.95,1.05)}100%{opacity:1;transform:translateY(-56px)}}
.menu a[aria-current="page"]:not(.btn){background:var(--lime)}

/* ================= afgeronde secties die over elkaar schuiven ================= */
.round{position:relative;z-index:2;border-radius:48px 48px 0 0;margin-top:-48px}

/* ================= home: manifest vastgepind ================= */
.man-b{margin-top:38px}
.man-b .man-close{font-size:clamp(40px,5vw,84px);max-width:13em}
.manifest.pinmode{height:100vh;padding:calc(var(--nav-h) + 8px) 0 24px;display:flex;align-items:center}
.manifest.pinmode .man-stage{display:grid;width:100%}
.manifest.pinmode .man-a,.manifest.pinmode .man-b{grid-area:1/1;align-self:center;margin:0}
.manifest.pinmode .rv{opacity:1;transform:none;transition:none}
.manifest.pinmode .strike svg{transition:none}

/* ================= home: werkwijze vastgepind ================= */
.werkwijze.pinmode{height:100vh;padding:calc(var(--nav-h) + 8px) 0 16px;display:flex;align-items:center}
.werkwijze.pinmode .wrap{width:100%}
.werkwijze.pinmode .sec-head{margin-bottom:clamp(28px,5vh,64px)}
.werkwijze.pinmode .rv{opacity:1;transform:none}

/* ================= home: over-teaser, de punt wordt een portret ================= */
.veil{position:absolute;inset:0;background:var(--cacao);pointer-events:none;opacity:0}
.rond .veil{border-radius:50%}
.ot-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}

/* ================= over-pagina ================= */
.ov-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(32px,5vw,64px)) 0 clamp(56px,7vw,96px);text-align:center}
.ov-title{position:relative;z-index:2}
.h-xl{font-size:clamp(60px,11vw,190px);line-height:.88}
.ov-title .h-xl,.ct-hero .h-xl{margin-top:10px}
.ov-title .lead{margin:22px auto 0}
.ov-photo{position:relative;z-index:1;margin:clamp(36px,5vw,64px) auto 0;width:min(100%,1100px);aspect-ratio:1100/760;border-radius:32px;overflow:hidden;border:var(--line)}
.ov-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ov-cap{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:3;margin:0;background:var(--cacao);color:var(--butter);border-radius:999px;padding:12px 22px;font-weight:600;font-size:clamp(15px,1.3vw,18px);text-align:left}
.ov-cap b{color:var(--lime);font-weight:600}
.ov-hero.pinmode{height:100vh;padding:0}
.ov-hero.pinmode .ov-title{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 4vh)}
.ov-hero.pinmode .ov-photo{position:absolute;inset:0;width:auto;margin:0;aspect-ratio:auto;border-radius:0;border:0}
.ov-statement .hand{text-align:center}
.hl{max-width:1180px;margin:18px auto 0;text-align:center;font:400 clamp(34px,4.8vw,78px)/1.06 "Lilita One",sans-serif}
.hl .w{border-radius:.2em;padding:0 .04em}
.ov-values .sec-head .h-l{font-size:clamp(44px,6vw,100px)}
.stack{display:grid;gap:5vh}
.scard{position:sticky;top:calc(var(--nav-h) + 20px + var(--i) * 22px);min-height:min(64vh,540px);border:var(--line);border-radius:40px;padding:clamp(28px,4.5vw,72px);display:grid;grid-template-columns:minmax(0,1fr);align-items:end;transform-origin:50% 0}
.scard h3{font-size:clamp(48px,7vw,118px);line-height:.86}
.scard p{margin-top:22px;max-width:32em;font-size:clamp(19px,1.6vw,23px);font-weight:500;line-height:1.45}
.scard .hand{margin-bottom:14px}
.scard>svg{position:absolute;top:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);width:clamp(76px,11vw,170px);height:clamp(76px,11vw,170px)}
.sc-lime{background:var(--lime)}
.sc-butter{background:var(--butter)}
.sc-cacao{background:var(--cacao);color:var(--butter)}
.ov-strip{overflow:hidden;padding-bottom:clamp(80px,10vw,140px)}
.say-row{width:100%;overflow:hidden;white-space:nowrap;font:400 clamp(90px,16vw,260px)/.9 "Lilita One",sans-serif;text-transform:uppercase;color:var(--cacao)}
.say-row+.say-row{color:transparent;-webkit-text-stroke:2.5px var(--cacao)}
.strip{width:100%;height:clamp(220px,26vw,360px);margin-top:18px;background-repeat:repeat-x;background-size:auto 100%;background-position:0 0}
.strip-a{background-image:url(../img/strip-a.jpg);margin-top:clamp(40px,5vw,72px)}
.strip-b{background-image:url(../img/strip-b.jpg)}
.ov-strip .wrap{text-align:center;margin-top:clamp(40px,5vw,72px)}
.ov-strip .lead{margin:16px auto 0}

/* ================= contact-pagina ================= */
.ct-hero{position:sticky;top:0;height:100vh;padding-top:var(--nav-h);min-height:580px;overflow:hidden;display:flex;align-items:center;text-align:center}
.ct-hero-in{position:relative;z-index:1;width:100%}
.ct-hero .pill{rotate:-10deg;font-size:clamp(18px,1.8vw,26px)}
.ct-hero .c-sub{margin-top:18px}
.ct-hero .hand{margin-top:20px}
.ct-s1{width:110px;height:110px;left:8%;top:18%;rotate:-12deg}
.ct-s2{width:96px;height:96px;right:9%;bottom:16%;rotate:10deg}
.ct-s3{width:84px;height:84px;right:14%;top:14%}
.ct-form-sec{position:relative;z-index:3;background:var(--paper);border-top:var(--line);border-radius:48px 48px 0 0;padding:clamp(64px,8vw,120px) 0}
.ct-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:start}
.ct-form h2{font-size:clamp(46px,5.6vw,92px);margin-top:8px}
.ct-side{display:grid;gap:18px}
.ct-card{position:relative;border:var(--line);border-radius:30px;padding:28px 30px;background:var(--butter);text-decoration:none;display:block;transition:background .3s,rotate .45s var(--spring)}
.ct-card:hover{background:var(--lime);rotate:-1.5deg}
.ct-card .f-kop{color:var(--cacao);margin-bottom:10px}
.ct-card strong{display:block;font:400 clamp(24px,2.3vw,34px)/1.05 "Lilita One",sans-serif;overflow-wrap:anywhere}
.ct-card span{display:block;margin-top:8px;font-size:16px}
.ct-card.dark{background:var(--cacao);color:var(--butter)}
.ct-card.dark .f-kop{color:var(--lime)}
.ct-card.dark:hover{background:var(--cacao-2)}
.ct-side .stk{position:relative;display:block;width:110px;height:110px;margin:6px 0 0 auto;rotate:8deg}

@media (max-width:900px){
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .ct-s1{left:7%;top:8%;width:72px;height:72px}.ct-s2{right:7%;bottom:6%;width:70px;height:70px}.ct-s3{display:none}
  .round{border-radius:32px 32px 0 0;margin-top:-32px}
  .ct-form-sec{border-radius:32px 32px 0 0}
}
@media (max-width:600px){
  .case-pics .stk{width:64px;height:64px}
  .case-pics .pill.stk{right:0}
  .say-row+.say-row{-webkit-text-stroke:1.5px var(--cacao)}
  .ct-hero{min-height:560px}
}
@media (prefers-reduced-motion:reduce){
  .pt,.pt-cover{display:none!important}
}
.ct-faq{position:relative;z-index:3;background:var(--paper)}
.hl em{font-style:normal}
.ov-photo img{object-position:50% 6%}
.man-t{display:inline-block}
@media (max-width:600px){.scard h3{font-size:clamp(34px,10vw,60px)}.scard{padding:26px 22px}}
.case+.case{margin-top:clamp(64px,8vw,128px)}
.nav.has-blob .menu a[aria-current="page"]:not(.btn){background:none}
.h-yep{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--lime);border:var(--line);border-radius:22px;padding:10px 18px 12px;right:-9%;top:57%;rotate:-8deg}
.h-yep small{font:700 15px/1 "Gaegu",cursive;letter-spacing:.07em}
.h-yep b{font:400 clamp(19px,1.7vw,25px)/1 "Lilita One",sans-serif;white-space:nowrap}
@media (min-width:900px){.hero{min-height:100vh;display:flex;align-items:center}.hero-list{margin-top:28px}.hero .cta{margin-top:36px}}
.curtain-on .hero{position:sticky;top:var(--hero-top,0px)}
@media (max-width:600px){.h-yep{right:0;top:60%}.h-yep b{font-size:17px}}

/* Lenis (vloeiend scrollen) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
html.lenis{scroll-behavior:auto;scroll-padding-top:0}
.hero-sub{margin:26px 0 0;font-weight:600;font-size:clamp(21px,2vw,29px);line-height:1.25}
@media (min-width:901px){.case-rail [data-rail]{container-type:inline-size}.case-rail [data-rail-track]>*{width:calc((100cqw - 36px) / 2.5)}}

/* ================= case-pagina's ================= */
.cs-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(64px,8vw,120px)}
.cs-hero>.wrap{position:relative;z-index:1}
.cs-back{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 90%/0 .38em no-repeat;transition:background-size .35s var(--ease)}
.cs-back:hover{background-size:100% .38em}
.cs-back svg{width:22px;height:22px;rotate:180deg;transition:translate .35s var(--spring)}
.cs-back:hover svg{translate:-4px 0}
.cs-pills{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;padding-right:14px}
.cs-pills .pill{rotate:-4deg;transform-origin:0 50%}.cs-pills .why{rotate:5deg;top:0;margin-left:0}
.cs-hero h1{font-size:clamp(76px,13vw,220px);line-height:.86;margin-top:14px}
.cs-lead{font-size:clamp(20px,1.9vw,27px);font-weight:500;line-height:1.4;max-width:28em;margin-top:22px}
.cs-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px;margin:36px 0 0;padding-top:24px;background:var(--wobble) repeat-x 0 0/240px 12px}
.cs-meta dt{font:400 15px/1 "Lilita One",sans-serif;text-transform:uppercase;letter-spacing:.05em}
.cs-meta dd{margin:8px 0 0;font-size:17px;line-height:1.4}
.cs-cover{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,34px);margin-top:clamp(48px,6vw,88px);align-items:start}
.cs-cover figure{margin:0;border-radius:26px;overflow:hidden;border:var(--line);aspect-ratio:4/5;background:var(--butter)}
.cs-cover figure:nth-child(1){rotate:-3deg;margin-top:48px}
.cs-cover figure:nth-child(2){rotate:1.5deg}
.cs-cover figure:nth-child(3){rotate:-1.5deg;margin-top:84px}
.cs-cover img,.cs-tilt img,.cs-shot img,.cs-next-img img{width:100%;height:100%;object-fit:cover}
.cs-brief{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,104px);align-items:center}
.cs-brief .h-l{font-size:clamp(44px,5.6vw,92px);margin-top:10px;color:var(--butter)}
.cs-brief .big{font-weight:600;font-size:clamp(21px,1.9vw,27px);line-height:1.35;margin-top:24px}
.cs-brief .big+p,.cs-brief .turn+p{margin-top:16px;max-width:34em;font-size:19px}
.cs-tilt{margin:0;border-radius:26px;overflow:hidden;border:2.5px solid var(--butter);aspect-ratio:4/5;rotate:2.5deg}
.cs-strike{align-items:flex-start;margin-top:26px}
.cs-strike li{font-size:clamp(28px,3.6vw,54px)}
.cs-brief .turn{margin-top:26px}
.chips-dark{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:24px 0 0}
.chips-dark li{border:var(--line);border-radius:999px;padding:6px 16px;font-weight:600;font-size:16px}
.cs-gal{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.cs-col{display:grid;gap:clamp(48px,6vw,96px);align-content:start}
.cs-col-r{padding-top:clamp(80px,16vw,240px)}
.cs-shot{margin:0}
.cs-shot .fr{border-radius:26px;overflow:hidden;border:var(--line);aspect-ratio:4/5;background:var(--butter)}
.cs-shot img{scale:1.14}
.cs-shot figcaption{margin-top:14px;font-size:clamp(18px,1.6vw,22px)}
.cs-shot.s3{width:82%;margin-left:auto}
.cs-shot.s4{width:88%}
.cs-quote .hand{text-align:center}
.cs-foot{text-align:center;margin:30px auto 0;max-width:40em;font-size:18px}
.cs-next-sec{padding:clamp(64px,8vw,120px) 0}
.cs-next{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center;text-decoration:none;color:var(--butter)}
.cs-next-txt{display:grid;gap:10px}
.cs-next-t{font:400 clamp(76px,12vw,200px)/.86 "Lilita One",sans-serif;text-transform:uppercase;transition:translate .5s var(--spring)}
.cs-next:hover .cs-next-t{translate:14px 0}
.cs-next-go{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:19px;margin-top:10px}
.cs-next-go svg{width:26px;height:26px;transition:translate .4s var(--spring)}
.cs-next:hover .cs-next-go svg{translate:8px 0}
.cs-next-img{display:block;border-radius:26px;overflow:hidden;border:2.5px solid var(--butter);aspect-ratio:4/5;rotate:-2.5deg;transition:rotate .5s var(--spring),scale .5s var(--spring)}
.cs-next:hover .cs-next-img{rotate:1.5deg;scale:1.03}
@media (max-width:900px){
  .cs-meta{grid-template-columns:minmax(0,1fr)}
  .cs-cover{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-cover figure:nth-child(3){display:none}
  .cs-cover figure:nth-child(1){margin-top:24px}
  .cs-brief,.cs-next{grid-template-columns:minmax(0,1fr)}
  .cs-tilt,.cs-next-img{max-width:340px}
  .cs-gal{grid-template-columns:minmax(0,1fr);gap:48px}
  .cs-col-r{padding-top:0}
  .cs-shot.s3,.cs-shot.s4{width:100%}
  .cs-shot img{scale:1}
}

/* taalknop NL | EN */
.menu .lang{display:flex;align-items:center;margin-left:8px;padding:3px;border:var(--line);border-radius:999px}
.menu .lang a{display:block;padding:6px 11px;font:600 15px/1 "Sour Gummy",sans-serif;letter-spacing:.02em;border-radius:999px;background:none;transition:background .25s,color .25s}
.menu .lang a:hover{background:var(--lime)}
.menu .lang a[aria-current]{background:var(--cacao);color:var(--paper)}
@media (max-width:900px){
  .menu .lang{align-self:flex-start;margin:22px 0 0}
  .menu .lang a{font:600 17px/1 "Sour Gummy",sans-serif;padding:10px 16px;background:none}
  .menu .lang a:hover{background:var(--lime)}
  .menu .lang a[aria-current]{background:var(--cacao);color:var(--paper)}
}