:root{--ink:#0c170f;--forest:#18291e;--olive:#a3a84e;--cream:#f8f3eb;--coal:#111611;
--display:"Archivo","Arial Narrow",Arial,sans-serif;--body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--mark:url(../img/mark2.png);--logo:url(../img/logo.png);--word:url(../img/word.png);
color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-weight:300;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
.m{display:block;aspect-ratio:207/181;background:var(--mark) center/contain no-repeat}
.mo{background:var(--olive);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.w{display:block;aspect-ratio:553/49;background:var(--word) center/contain no-repeat}
.lg{display:block;aspect-ratio:564/339;background:var(--logo) center/contain no-repeat}
.pre{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:transform 1.5s cubic-bezier(.6,0,.95,.5)}
.pre::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:90px;pointer-events:none;background:
radial-gradient(ellipse 22px 60px at 50% 0,var(--ink) 98%,transparent) 0 0/130px 90px repeat-x,
radial-gradient(ellipse 15px 40px at 50% 0,var(--ink) 98%,transparent) 47px 0/90px 90px repeat-x,
radial-gradient(ellipse 30px 26px at 50% 0,var(--ink) 98%,transparent) 21px 0/70px 90px repeat-x}
.pre.out{transform:translateY(calc(100% + 100px))}
.pre .m{width:clamp(110px,16vw,190px);grid-area:1/1;opacity:.13}
.pre .m.fill{opacity:1;background:linear-gradient(180deg,#d6dc86,var(--olive) 60%,#7f8338);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
.pre b{grid-area:1/1;align-self:end;justify-self:end;margin:0 clamp(20px,4vw,56px) calc(22px + env(safe-area-inset-bottom,0px));font:850 clamp(64px,14vw,200px)/.8 var(--display);font-stretch:75%;color:var(--olive);font-variant-numeric:tabular-nums}
body:not(.go){height:100svh;overflow:hidden}
body:not(.go) h1 .line span,body:not(.go) .lede,body:not(.go) .cta{animation-play-state:paused}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at var(--sx,-999px) var(--sy,-999px),rgba(163,168,78,.14),transparent 55%);-webkit-mask:radial-gradient(circle 300px at var(--sx,-999px) var(--sy,-999px),#000,transparent);mask:radial-gradient(circle 300px at var(--sx,-999px) var(--sy,-999px),#000,transparent)}
.f22-bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) clamp(20px,4vw,56px) 18px;background:linear-gradient(var(--ink),transparent)}
.brand{display:flex;align-items:center;gap:12px}.brand .m{width:30px}.brand .w{width:104px}
.f22-nav .wp-block-navigation__container{display:flex;align-items:center;gap:clamp(16px,3vw,40px);list-style:none;margin:0;padding:0;font-size:13px}.f22-nav{font-size:13px}
.f22-nav a{opacity:.72;transition:opacity .25s;padding:0}.f22-nav a:hover{opacity:1}
.pill{background:var(--cream);color:var(--ink);border-radius:99px;font-weight:500;transition:background .25s}.pill>a,.pill .wp-block-button__link{display:block;padding:10px 20px;color:inherit;background:none;border-radius:99px;font:inherit;font-weight:500;line-height:1.6}
.f22-nav .pill a{opacity:1;color:var(--ink)}.pill:hover{background:var(--olive)}
.hero{position:relative;min-height:100svh;display:grid;align-items:end;padding:0 clamp(20px,4vw,56px) clamp(40px,8vh,88px);overflow:hidden;isolation:isolate;background:none}
.gl{position:fixed;top:0;bottom:0;left:0;width:28vw;z-index:-1;pointer-events:none;will-change:transform,opacity;-webkit-mask:linear-gradient(90deg,transparent 0,#000 var(--fl,14%),#000 calc(100% - var(--fr,0%)),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 var(--fl,14%),#000 calc(100% - var(--fr,0%)),transparent 100%)}
.fbg{position:fixed;inset:0;z-index:-2;pointer-events:none}.fbg i{position:absolute;inset:0}.fbg .a{background:radial-gradient(120% 90% at 10% 0,#1d3023,var(--ink) 70%)}.fbg .b{background:radial-gradient(90% 80% at 15% 50%,#16261b,var(--ink) 70%);opacity:0}
.gl img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:url(#liq);animation:br 16s ease-in-out infinite alternate;will-change:transform}
@keyframes br{from{transform:scale(1.02) rotate(0)}to{transform:scale(1.1) rotate(-1.6deg)}}
.gl::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,225,.22) 50%,transparent 62%) 140% 0/220% 100% no-repeat;mix-blend-mode:screen;animation:sh 9s ease-in-out 2s infinite}
@keyframes sh{to{background-position:-60% 0}}
h1{font:850 clamp(52px,10.5vw,160px)/.88 var(--display);font-stretch:75%;letter-spacing:-.02em;margin:0;text-transform:uppercase}
h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
h1 .line span{display:inline-block;transform:translateY(105%);animation:up 1.1s cubic-bezier(.2,.8,.2,1) forwards}
h1 .line:nth-child(2) span{animation-delay:.12s;color:var(--olive)}h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes up{to{transform:none}}
.l{display:inline-block;white-space:pre;transition:font-stretch .3s ease-out}
.lede{max-width:44ch;margin:clamp(20px,3vh,32px) 0 0;opacity:0;animation:fd 1s ease 1.1s forwards}
.wp-block-buttons.cta-wrap{margin-top:28px}.cta{opacity:0;animation:fd 1s ease 1.3s forwards}.cta .wp-block-button__link{display:inline-flex;align-items:center;gap:14px;background:none;color:inherit;padding:0;border-radius:0;font:inherit}
.cta .wp-block-button__link::before{content:"→";display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--cream);border-radius:50%;transition:.3s}
.cta .wp-block-button__link:hover::before{background:var(--cream);color:var(--ink);transform:translateX(6px)}
@keyframes fd{to{opacity:1}}
.marquee{overflow:hidden;border-block:1px solid rgba(248,243,235,.14);padding:24px 0;background:var(--coal)}
.track{display:flex;gap:56px;width:max-content;align-items:center;font:800 clamp(34px,6vw,84px)/1 var(--display);font-stretch:75%;text-transform:uppercase}
.track .m{width:.8em;flex:none;opacity:.7}
.track span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.5px var(--cream)}
.ask{height:520vh;position:relative}
.as{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:calc(28vw - clamp(20px,4vw,56px)) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px);padding:env(safe-area-inset-top,0px) clamp(20px,4vw,56px) 0;background:none}
.ag-unused{position:absolute;top:0;left:0;bottom:0;width:28vw;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(270deg,transparent,#000 14%);mask:linear-gradient(270deg,transparent,#000 14%)}.ac{padding-left:clamp(0px,5vw,90px)}
.ag img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;will-change:transform}
.ak{margin:0 0 2vh;font-size:14px;opacity:0;font-variant-numeric:tabular-nums}
.wl{position:relative;height:min(58vh,520px)}
.ao{transition:none;position:absolute;left:0;top:50%;margin:0;opacity:0;white-space:nowrap;font:850 clamp(34px,5.6vw,92px)/.95 var(--display);font-stretch:75%;letter-spacing:-.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(248,243,235,.5);transition:color .7s,-webkit-text-stroke-color .7s;will-change:transform,opacity,filter}
.ao.act{color:var(--cream);-webkit-text-stroke-color:transparent}
.ao em{font-style:normal;color:var(--olive)}
.ao.q{white-space:normal;width:min(100%,12em);font-size:clamp(30px,4.4vw,70px);color:var(--cream);-webkit-text-stroke:0}
.gc{order:-1}.ab{margin-top:2vh;height:2px;width:min(100%,360px);background:rgba(248,243,235,.14)}.ab i{display:block;height:100%;background:var(--olive);transform-origin:left;transform:scaleX(0)}
.gc{position:relative;justify-self:center;width:min(100%,430px);aspect-ratio:4/5;border-radius:22px;border:1px solid rgba(248,243,235,.2);background:linear-gradient(160deg,rgba(248,243,235,.11),rgba(248,243,235,.03));-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 50px 120px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25);overflow:hidden;opacity:0}
.pn{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:22px;opacity:0;pointer-events:none;will-change:transform,opacity,filter}
.fr{width:76%;border:1px solid rgba(248,243,235,.25);border-radius:10px;overflow:hidden;background:rgba(10,20,15,.5)}
.tb{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(248,243,235,.12)}.tb i{width:7px;height:7px;border-radius:50%;background:rgba(248,243,235,.4)}
.fb{padding:14px;display:grid;gap:10px}.fb b{height:9px;width:62%;border-radius:2px;background:rgba(248,243,235,.85)}.fb b.s{width:38%;opacity:.4}
.fb u{height:88px;border-radius:6px;background:linear-gradient(110deg,rgba(163,168,78,.18) 30%,rgba(163,168,78,.6) 50%,rgba(163,168,78,.18) 70%) 0 0/200% 100%;animation:none}@keyframes shm{to{background-position:-200% 0}}
.rg{position:absolute;left:50%;top:50%;border:1px solid rgba(163,168,78,.4);border-radius:50%;translate:-50% -50%;animation:rp 6s ease-in-out infinite}@keyframes rp{50%{transform:none}}
.vd{position:relative;aspect-ratio:16/10;display:grid;place-items:center}
.vd b{width:56px;height:56px;border:1.5px solid var(--cream);border-radius:50%;display:grid;place-items:center}.vd b::before{content:"";border-left:14px solid var(--cream);border-block:9px solid transparent;margin-left:4px}
.vd i{position:absolute;left:14px;right:14px;bottom:12px;height:2px;background:rgba(248,243,235,.2)}.vd i::after{content:"";display:block;height:100%;width:40%;background:var(--olive)}@keyframes pg{from{width:0}to{width:100%}}
.pe p{margin:0;max-width:10em;text-align:center;font:800 30px/1.05 var(--display);font-stretch:80%}
@media(max-width:760px){.as{grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:end;padding-bottom:6vh}.gc{width:min(74vw,300px);aspect-ratio:4/3;justify-self:start}.wl{height:42vh}.ag-unused{width:80%;opacity:.5}.gc{order:0}}
.an{width:78%;border:1px solid rgba(248,243,235,.25);border-radius:10px;background:rgba(10,20,15,.5);padding:18px;display:grid;gap:16px}
.an .st{position:relative;height:120px}.an svg{position:absolute;inset:0;width:100%;height:100%}
.an .dt{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--olive);margin:-11px 0 0 -11px;left:4%;top:82%;animation:mvd 5s cubic-bezier(.6,0,.3,1) infinite alternate}
@keyframes mvd{from{left:4%;top:82%}to{left:96%;top:18%}}
.an .tl{display:flex;justify-content:space-between;border-top:1px solid rgba(248,243,235,.2);padding-top:12px}.an .tl i{width:9px;height:9px;background:var(--cream);transform:rotate(45deg);opacity:.8}
.ph{width:44%;aspect-ratio:9/17;border:1.5px solid rgba(248,243,235,.4);border-radius:22px;background:rgba(10,20,15,.6);padding:12px 11px;display:grid;align-content:start;gap:9px}
.ph .nt{width:34%;height:6px;border-radius:3px;background:rgba(248,243,235,.3);justify-self:center;margin-bottom:6px}
.ph b{display:block;height:10px;width:72%;border-radius:2px;background:rgba(248,243,235,.85)}.ph b.s{width:44%;opacity:.4}
.ph s{display:block;height:15%;min-height:44px;border-radius:9px;background:rgba(248,243,235,.1);border:1px solid rgba(248,243,235,.14)}.ph s.o{background:rgba(163,168,78,.5);border-color:transparent}
.statement{padding:clamp(100px,22vh,260px) clamp(20px,4vw,56px)}
.statement p{margin:0;max-width:19em;font:700 clamp(34px,6.2vw,96px)/1.02 var(--display);font-stretch:80%}
.statement .t{opacity:.14;transition:opacity .45s}.statement .t.on{opacity:1}
.work{height:420vh;position:relative}
.sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,48px);padding-top:env(safe-area-inset-top,0px)}
.work h2{margin:0 clamp(20px,4vw,56px);font:850 clamp(40px,7vw,110px)/.9 var(--display);font-stretch:75%;text-transform:uppercase}
.bar{margin:0 clamp(20px,4vw,56px);height:2px;background:rgba(248,243,235,.15)}.bar i{display:block;height:100%;background:var(--olive);transform-origin:left;transform:scaleX(0)}
.rail{display:flex;gap:clamp(16px,2vw,32px);padding:0 clamp(20px,4vw,56px);width:max-content}
.card{flex:none;width:clamp(240px,32vw,440px);aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:3px;background:var(--forest)}
.card figure{position:absolute;inset:-25%;margin:0;transform:translateX(var(--px,0px)) scale(1.1);transition:filter .5s}.card figure img{display:block;width:100%;height:100%;object-fit:cover}
.card:hover figure{filter:saturate(1.4) brightness(1.15)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,23,15,.9),transparent 55%)}
.card h3,.card p{position:absolute;left:20px;z-index:2;margin:0}
.card h3{bottom:44px;font:800 clamp(24px,3vw,40px)/1 var(--display);font-stretch:80%}.card p{bottom:20px;font-size:13px;opacity:.75}
.pat{position:relative;overflow:hidden;padding:clamp(80px,16vh,180px) 0;background:var(--forest);display:grid;place-items:center;isolation:isolate}
.pat .rows{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:space-around;opacity:.17;-webkit-mask:radial-gradient(60% 70% at 50% 50%,transparent 15%,#000);mask:radial-gradient(60% 70% at 50% 50%,transparent 15%,#000)}
.pat .row{display:flex;gap:46px;width:max-content}.pat .row .mo{width:70px;flex:none}
.pat h2{margin:0;padding:0 clamp(20px,4vw,56px);text-align:center;font:850 clamp(40px,8vw,128px)/.92 var(--display);font-stretch:75%;text-transform:uppercase;max-width:12ch}
.services{padding:clamp(72px,12vh,140px) clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,6vw,96px)}
.services h2{font:800 clamp(32px,4.5vw,60px)/1 var(--display);font-stretch:80%;margin:0;max-width:12ch}
.svc details{border-top:1px solid rgba(248,243,235,.2)}.svc details:last-child{border-bottom:1px solid rgba(248,243,235,.2)}
.svc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:26px 0;font:700 clamp(26px,3.6vw,48px)/1.1 var(--display);font-stretch:80%;transition:color .3s,padding .4s}
.svc summary::-webkit-details-marker{display:none}.svc summary::after{content:"+";font-weight:300;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.svc summary:hover,.svc details[open] summary{color:var(--olive)}.svc summary:hover{padding-left:12px}.svc details[open] summary::after{transform:rotate(135deg)}
.svc details>p{margin:0 0 28px;max-width:52ch;opacity:.78;animation:fd .6s ease both}
.end{position:relative;overflow:hidden;isolation:isolate;padding:clamp(80px,14vh,160px) clamp(20px,4vw,56px);display:grid;gap:clamp(24px,5vh,48px);justify-items:center;text-align:center;background:var(--ink)}
.end .lg{order:1;width:min(72vw,480px)}
.end .bg{order:2;position:relative;width:calc(100% + 2*clamp(20px,4vw,56px));margin:0 calc(-1*clamp(20px,4vw,56px));height:clamp(150px,27vh,290px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-composite:intersect}
.end .bg canvas{position:absolute;inset:0;width:100%;height:100%}
.end .wp-block-buttons{order:3}.end .note{order:4;opacity:.55;font-size:.85em;margin:0}
@media(max-width:760px){.services{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* ---- WordPress glue ---- */
.wp-site-blocks{padding:0}.wp-site-blocks>*{margin-block:0}
.wp-block-group,.wp-block-heading{margin-top:0}
.admin-bar .f22-bar{top:32px}@media(max-width:782px){.admin-bar .f22-bar{top:46px}}
.f22-nav .wp-block-navigation-item{margin:0}
.wp-block-buttons{margin:0}
.marquee p{margin:0}
.ask .ao{margin:0}
.statement p{margin:0}
.end .wp-block-buttons{justify-content:center}
/* subpagina's */
.hero.sub{min-height:64svh;padding-top:clamp(120px,22vh,220px)}
.hero.sub h1{font-size:clamp(46px,8.6vw,130px)}
.hero.sub h1 .line:nth-child(2) span{color:var(--olive)}
.blk{padding:clamp(64px,11vh,130px) clamp(20px,4vw,56px)}
.blk.alt{background:var(--forest)}
.blk h2{font:800 clamp(32px,4.5vw,60px)/1 var(--display);font-stretch:80%;margin:0 0 .6em;max-width:16ch}
.blk p{max-width:60ch;opacity:.82}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,48px)}
.cols>div{border-top:1px solid rgba(248,243,235,.22);padding-top:20px}
.cols h3{font:700 clamp(22px,2.4vw,32px)/1.1 var(--display);font-stretch:80%;margin:0 0 .6em}
.cols h3 em{font-style:normal;color:var(--olive);font-size:.6em;display:block;margin-bottom:.6em;letter-spacing:.08em}
.cols p{margin:0;opacity:.78}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,32px);padding:0 clamp(20px,4vw,56px) clamp(64px,11vh,130px)}
.wgrid .card{width:auto}
.card a{position:absolute;inset:0;z-index:3;font-size:0;color:transparent}
.f22form{display:grid;gap:18px;max-width:640px}
.f22form label{display:grid;gap:8px;font-size:13px;opacity:.9}
.f22form input,.f22form textarea,.f22form select{font:inherit;color:var(--cream);background:rgba(248,243,235,.06);border:1px solid rgba(248,243,235,.22);border-radius:10px;padding:14px 16px}
.f22form input:focus,.f22form textarea:focus{outline:2px solid var(--olive);outline-offset:2px}
.f22form textarea{min-height:160px;resize:vertical}
.f22form button{justify-self:start;cursor:pointer;border:0;font:inherit;font-weight:500;background:var(--cream);color:var(--ink);padding:14px 28px;border-radius:99px;transition:background .25s}
.f22form button:hover{background:var(--olive)}
.f22form .hp{position:absolute;left:-9999px;opacity:0}
.f22-ok,.f22-err{padding:14px 18px;border-radius:10px;max-width:640px;margin:0 0 20px}.f22-ok{background:rgba(163,168,78,.18)}.f22-err{background:rgba(180,60,40,.25)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(20px,3vw,40px);padding:0 clamp(20px,4vw,56px) clamp(64px,11vh,130px);list-style:none;margin:0}
.posts li{border-top:1px solid rgba(248,243,235,.22);padding-top:18px}
.posts h3{font:700 clamp(22px,2.4vw,32px)/1.1 var(--display);font-stretch:80%;margin:0 0 .5em}
.posts .wp-block-post-featured-image{margin:0 0 16px;border-radius:3px;overflow:hidden}
.posts .wp-block-post-date{font-size:13px;opacity:.6}
.single-body{max-width:760px;margin:0 auto;padding:clamp(120px,20vh,200px) clamp(20px,4vw,56px) clamp(64px,10vh,120px)}
.single-body h1{font-size:clamp(40px,6vw,88px)}
.single-body p,.single-body li{opacity:.86}
.f22-foot{padding:28px clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;border-top:1px solid rgba(248,243,235,.14);font-size:13px;opacity:.8;background:var(--ink)}
.f22-foot p{margin:0}

@media(max-width:600px){.hero h1{font-size:clamp(44px,15vw,90px)}.pat h2,.work h2{font-size:clamp(36px,13vw,70px)}}

.f22-nav .wp-block-navigation__container{gap:clamp(16px,3vw,40px)}
.f22-nav .wp-block-navigation-item.pill{background:var(--cream);color:var(--ink);border-radius:99px}
.f22-nav .wp-block-navigation-item.pill:hover{background:var(--olive)}
.f22-nav .wp-block-navigation-item.pill a{padding:10px 20px;color:var(--ink);opacity:1}
/* ---- menu met druipend glas ---- */
.f22-right{display:flex;align-items:center;gap:clamp(10px,2vw,22px)}
.f22-right .wp-block-buttons{margin:0}
.f22-nav .wp-block-navigation__responsive-container-open{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid rgba(248,243,235,.35);border-radius:99px;font:500 13px var(--body);color:var(--cream);background:none;transition:background .25s,color .25s}
.f22-nav .wp-block-navigation__responsive-container-open svg{display:none}
.f22-nav .wp-block-navigation__responsive-container-open::before{content:"";width:16px;height:7px;border-block:1.5px solid currentColor;box-sizing:border-box}
.f22-nav .wp-block-navigation__responsive-container-open::after{content:"Menu"}
.f22-nav .wp-block-navigation__responsive-container-open:hover{background:var(--cream);color:var(--ink)}
.f22-nav .wp-block-navigation__responsive-container{display:none}
.f22-nav .wp-block-navigation__responsive-container.is-menu-open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:100000;background:var(--ink);color:var(--cream);padding:calc(24px + env(safe-area-inset-top,0px)) clamp(20px,5vw,64px) 40px;animation:none;overflow:auto}
.f22-nav .menu-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.f22-nav .wp-block-navigation__responsive-container.is-menu-open::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,23,15,.88),rgba(12,23,15,.35) 70%,rgba(12,23,15,.1))}
.f22-nav .wp-block-navigation__responsive-close,.f22-nav .wp-block-navigation__responsive-dialog,.f22-nav .wp-block-navigation__responsive-container-content{position:relative;z-index:1;width:100%;max-width:none;background:none;color:inherit}
.f22-nav .wp-block-navigation__responsive-container-close{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(248,243,235,.4);border-radius:99px;font:500 13px var(--body);color:var(--cream);background:rgba(12,23,15,.4)}
.f22-nav .wp-block-navigation__responsive-container-close svg{display:none}
.f22-nav .wp-block-navigation__responsive-container-close::after{content:"Sluiten"}
.f22-nav .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:clamp(70px,16vh,150px)}
.f22-nav .is-menu-open .wp-block-navigation__container{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(4px,1.5vh,14px);counter-reset:mi;font-size:inherit}
.f22-nav .is-menu-open .wp-block-navigation-item{counter-increment:mi;align-items:baseline;gap:14px;opacity:0;animation:menuIn .9s cubic-bezier(.2,.8,.2,1) forwards}
.f22-nav .is-menu-open .wp-block-navigation-item::before{content:"0" counter(mi);font:500 13px var(--body);color:var(--olive);min-width:2ch}
.f22-nav .is-menu-open .wp-block-navigation-item:nth-child(1){animation-delay:.35s}.f22-nav .is-menu-open .wp-block-navigation-item:nth-child(2){animation-delay:.45s}.f22-nav .is-menu-open .wp-block-navigation-item:nth-child(3){animation-delay:.55s}.f22-nav .is-menu-open .wp-block-navigation-item:nth-child(4){animation-delay:.65s}.f22-nav .is-menu-open .wp-block-navigation-item:nth-child(5){animation-delay:.75s}.f22-nav .is-menu-open .wp-block-navigation-item:nth-child(6){animation-delay:.85s}
.f22-nav .is-menu-open .wp-block-navigation-item a{font:800 clamp(40px,9vw,112px)/1 var(--display);font-stretch:75%;text-transform:uppercase;opacity:1;color:var(--cream);transition:color .25s,transform .35s}
.f22-nav .is-menu-open .wp-block-navigation-item a:hover{color:var(--olive);transform:translateX(12px)}
@keyframes menuIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media(max-width:600px){.f22-right .wp-block-buttons{display:none}}

.f22-nav .is-menu-open .wp-block-navigation-item a{font-size:clamp(34px,min(9vw,10.5vh),112px)}

.f22-right .pill>a,.f22-right .pill .wp-block-button__link{display:flex;align-items:center;height:44px;padding:0 22px;box-sizing:border-box;line-height:1}
.f22-nav .wp-block-navigation__responsive-container-open{height:44px;box-sizing:border-box;padding:0 18px;line-height:1}
.f22-right{align-items:center}
.ask,.work{touch-action:pan-y}
.ask .as{user-select:none;-webkit-user-select:none}
.work .rail{cursor:grab}
@media(max-width:760px){
.hero{align-items:center;padding-top:clamp(96px,16svh,140px);padding-bottom:clamp(32px,6svh,64px)}
.as{padding-left:calc(15vw + 14px);padding-right:18px}
.ac{padding-left:0}
.ao{font-size:clamp(24px,8vw,52px)}
.ao.q{font-size:clamp(24px,8vw,40px)}
.gc{width:min(66vw,280px)}
}
.f22-nav .is-menu-open .wp-block-navigation-item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline}
@media(max-width:760px){
.f22-nav .wp-block-navigation__responsive-container.is-menu-open::before{background:linear-gradient(180deg,rgba(12,23,15,.82),rgba(12,23,15,.55) 60%,rgba(12,23,15,.3))}
.f22-nav .is-menu-open .wp-block-navigation__container{gap:12px}
.work .card{width:min(72vw,300px)}
}
@media(max-width:600px){.hero h1{font-size:clamp(40px,13vw,90px)}}
@media(max-width:600px){
.wgrid{grid-template-columns:1fr 1fr;gap:10px}
.wgrid .card h3{font-size:14px;line-height:1.1;overflow-wrap:anywhere;hyphens:auto}
.hero .lede,.hero.sub p{max-width:calc(100% - 12vw)}
}

/* ---- verfijning v12 ---- */
.hero.sub{min-height:54svh}
.end{padding-block:clamp(56px,9vh,110px);gap:clamp(16px,3vh,32px)}
.end .bg{height:clamp(120px,20vh,230px)}
.blk .wp-block-buttons{justify-content:flex-start}
.blk .wp-block-button{flex:none;width:auto}
.f22form label{font-size:13px;letter-spacing:.05em;opacity:.8}
.f22form input,.f22form textarea,.f22form select{transition:border-color .3s,background .3s}
.f22form input:hover,.f22form textarea:hover,.f22form select:hover{border-color:rgba(248,243,235,.4)}
.f22form input:focus,.f22form textarea:focus,.f22form select:focus{border-color:var(--olive);background:rgba(248,243,235,.09);outline:none;box-shadow:0 0 0 3px rgba(163,168,78,.22)}
.f22form select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),linear-gradient(135deg,var(--cream) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.f22form select option{background:var(--ink);color:var(--cream)}
@media(min-width:900px){
.blk:has(.f22form){display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.blk:has(.f22form)>p{grid-column:2;grid-row:1;max-width:22ch;font-size:clamp(20px,2vw,28px);line-height:1.3;opacity:.9;padding-top:30px;border-top:1px solid rgba(248,243,235,.22)}
}
/* rustige onthulling */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
/* Werk-kaarten hover */
@media(hover:hover){
.wgrid .card img,.rail .card img{transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.wgrid .card:hover img,.rail .card:hover img{transform:scale(1.045)}
.wgrid .card h3::after{content:"";display:block;height:1px;width:0;margin-top:8px;background:var(--olive);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.wgrid .card:hover h3::after{width:56px}
}
/* paginaovergang */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s ease both}
::view-transition-new(root){animation:vtIn .55s ease .05s both}
@keyframes vtOut{to{opacity:0}}@keyframes vtIn{from{opacity:0}}
/* cursor (alleen muis) */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(248,243,235,.7);border-radius:50%;pointer-events:none;z-index:100001;mix-blend-mode:difference;opacity:0;transition:width .35s,height .35s,margin .35s,opacity .3s,background .3s}
.cur.on{opacity:1}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(248,243,235,.12)}
@media(hover:none),(pointer:coarse){.cur{display:none}}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}.wp-block-button{width:auto}

/* v14: glas blijft rechts staan, geen wissel meer */
@media(min-width:761px){.as{grid-template-columns:minmax(0,1fr) calc(28vw - clamp(20px,4vw,56px))}.ac{order:1;padding-left:0}.gc{order:2}}
@media(max-width:760px){.as{padding-left:18px;padding-right:calc(15vw + 14px)}}
@media(min-width:761px){.as{grid-template-columns:minmax(0,1fr) minmax(0,min(440px,36vw))}}
@media(max-width:760px){.as{padding-left:20px;padding-right:20px}}

/* v17: 3D-achtig 22 met glas, rustige aankleding */
.hero .hgw{position:absolute;z-index:-1;pointer-events:none;right:clamp(24px,4vw,80px);top:52%;width:min(34vw,540px);aspect-ratio:207/181;--ry:-14deg;--rx:5deg;transform:translateY(-50%) perspective(1100px) rotateY(var(--ry)) rotateX(var(--rx));transform-style:preserve-3d}
.hero .hgw .hg,.hero .hgw i{position:absolute;inset:0;width:100%;height:100%;-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.hero .hgw i.e1{background:#5d6120;transform:translate3d(10px,12px,-1px)}
.hero .hgw i.e2{background:#2f3210;transform:translate3d(20px,24px,-2px);filter:blur(1px)}
.hero .hgw::after{content:"";position:absolute;left:8%;right:-6%;bottom:-9%;height:14%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);filter:blur(10px);z-index:-1}
@media(max-width:760px){.hero .hgw{top:10svh;right:7vw;width:min(46vw,200px);transform:none;opacity:.9}.hero .hgw i.e1{transform:translate(6px,7px)}.hero .hgw i.e2{transform:translate(12px,14px)}}
/* subpagina-hero: spookachtig 22 en lijn-onthulling */
.hero.sub::after{content:"";position:absolute;left:auto;bottom:auto;z-index:-1;right:clamp(16px,6vw,110px);top:54%;width:min(30vw,440px);aspect-ratio:207/181;background:linear-gradient(135deg,rgba(163,168,78,.2),rgba(163,168,78,.05));-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;animation:ghost 11s ease-in-out infinite alternate}
@keyframes ghost{from{transform:translateY(-50%) translateX(0)}to{transform:translateY(-52%) translateX(-10px)}}
@media(max-width:760px){.hero.sub::after{width:46vw;top:30%;opacity:.7}}
.cols>div{position:relative;border-top:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cols>div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(248,243,235,.26);transform-origin:left;transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .15s,background .4s}
.js .cols>div.rv:not(.in)::before{transform:scaleX(0)}
@media(hover:hover){.cols>div:hover{transform:translateY(-4px)}.cols>div:hover::before{background:var(--olive)}}
.cols h3 em{transition:letter-spacing .5s}.cols>div:hover h3 em{letter-spacing:.2em}
.blk h2::after{content:"";display:block;width:56px;height:2px;margin-top:.5em;background:var(--olive);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1) .3s}
.js .blk h2.rv:not(.in)::after{transform:scaleX(0)}
.svc details{transition:background .4s}
@media(prefers-reduced-motion:reduce){.hero.sub::after{animation:none}}

/* AI-kantoor: app in kader */
.blk:has(.of){padding-top:clamp(24px,4vh,48px)}
.of-frame{height:min(82vh,820px);min-height:560px;border-radius:22px;overflow:hidden;border:1px solid rgba(248,243,235,.18);box-shadow:0 40px 100px -40px rgba(0,0,0,.7);background:#4a352c}
.of-frame iframe{display:block;width:100%;height:100%;border:0}
.of-note{margin:14px 0 0;font-size:14px;opacity:.7}.of-note a{color:var(--olive);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.of-frame{height:min(84svh,760px);min-height:520px;border-radius:16px}}