@font-face{font-family:"Inter Tight";src:url("../assets/intertight.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../assets/plexmono-300.woff2") format("woff2");font-weight:300;font-display:swap}
:root{--esp:#2B1E17;--mok:#5A4234;--ste:#C8B8A6;--zand:#EDE6DC;--lin:#F7F3EE;--br:#9C7A5B;--brl:#C9A27C;--e1:cubic-bezier(.2,0,0,1);--e2:cubic-bezier(.45,0,.2,1);--dk:#15100C;--rs:#2B1E17;--bgc:var(--zand);--tx:var(--esp);--mut:var(--mok);--acc:var(--br);--ln:var(--ste);--ln2:var(--ste);--gut:clamp(22px,5vw,80px);--sec:clamp(96px,14vw,200px);}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--e2)}
*{box-sizing:border-box;margin:0;padding:0}
.dk,#menu{--bgc:var(--dk);--tx:var(--zand);--mut:var(--ste);--acc:var(--brl);--ln:rgba(200,184,166,.2);--ln2:rgba(200,184,166,.4);background:var(--bgc);color:var(--tx)}
body{background:var(--bgc);color:var(--tx);font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,video{display:block;max-width:100%}
address{font-style:normal}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:fixed;left:16px;top:-60px;z-index:40;background:var(--esp);color:var(--zand);padding:12px 16px;font-size:14px;transition:top .2s var(--e1)}
.skip:focus{top:16px}
.label{font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.wrap{max-width:1320px;margin:0 auto}
section{padding:var(--sec) var(--gut);background:var(--bgc)}
.sl{color:var(--mut);margin-bottom:clamp(24px,3vw,40px)}
h1,h2{font-weight:600;letter-spacing:-.04em;line-height:.96;text-transform:uppercase}
h1{font-size:clamp(44px,8.6vw,136px);max-width:11em}
h2{font-size:clamp(38px,6.6vw,100px);max-width:13em}
h3{font-weight:600;letter-spacing:-.025em}
.d{color:var(--acc);display:inline-block}
.nb{white-space:nowrap}
.lead{font-weight:400;font-size:clamp(18px,1.6vw,23px);line-height:1.5;letter-spacing:-.005em;color:var(--mut);max-width:32em}
.lnk{display:inline-flex;align-items:center;gap:16px;position:relative;text-decoration:none;font-weight:500;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.015em;padding:8px 0}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:0 50%;transition:transform .45s var(--e2)}
.lnk i{font-style:normal;color:var(--acc);transition:transform .22s var(--e1)}
@media(hover:hover) and (pointer:fine){.lnk:hover i{transform:translateX(5px)}.lnk:hover::after{transform:scaleX(.72)}}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px var(--gut);transition:background .4s,transform .35s var(--e2);view-transition-name:hd}
header.s{background:rgba(237,230,220,.9)}
header.dk:not(.s){background:none}
header.s.dk{background:rgba(21,16,12,.8)}
header.w{transform:translateY(-101%)}
@supports (backdrop-filter:blur(10px)){header.s::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(14px)}}
.hl{display:block;height:28px;position:relative}
header:not(.nl) .hl{transition:opacity .4s}
header.nl .hl{opacity:0}
header.nl .hl:focus-visible,html.mo header.nl .hl{opacity:1}
.hl img{height:28px;width:auto}
.hl .iz{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s}
.hl .ie{transition:opacity .4s}
header.dk .hl .iz{opacity:1}
header.dk .hl .ie{opacity:0}
.hr{display:flex;align-items:center;gap:8px}
.hc,.mn{font:inherit;font-size:14px;font-weight:500;letter-spacing:-.005em;text-decoration:none;min-height:44px;transition:color .25s,background .25s,border-color .25s,transform .16s var(--e1)}
.mn{color:var(--esp)}
header.dk .mn,html.mo .mn{color:var(--zand)}
.hc{--hb:var(--esp);--ht:var(--zand);--hd:var(--brl);--hw:var(--mok);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:0 20px;background:var(--hb);color:var(--ht)}
.hc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hw);transform:translateY(101%);transition:transform .45s var(--e2)}
.hc::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--hd);transition:transform .3s var(--e2)}
header.dk .hc,html.mo .hc{--hb:var(--zand);--ht:var(--esp);--hd:var(--br);--hw:var(--ste)}
.bfz .hc{--hb:#0D0D0D;--ht:#fff;--hd:#fff;--hw:#333}
.bfz header.dk .hc,html.mo .bfz .hc{--hb:#fff;--ht:#0D0D0D;--hd:#0D0D0D;--hw:#D6D6D6}
.hb .hc{--hb:#1c1815;--ht:#f4f0ea;--hd:#bd7c60;--hw:#3a302a}
.hb header.dk .hc,html.mo .hb .hc{--hb:#f4f0ea;--ht:#1c1815;--hd:#b06a4e;--hw:#e0d6cd}
.ppc .hc{--hb:#192E25;--ht:#F7F6F2;--hd:#F7F6F2;--hw:#2C4A3E}
.ppc header.dk .hc,html.mo .ppc .hc{--hb:#F7F6F2;--ht:#192E25;--hd:#192E25;--hw:#DCE1DB}
.hc:active,.mn:active{transform:scale(.97)}
.mn{display:flex;align-items:center;gap:12px;background:none;border:1px solid color-mix(in srgb,currentColor 36%,transparent);cursor:pointer;padding:0 16px}
.mn i{position:relative;display:block;width:26px;height:9px}
.mn i::before,.mn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--e2)}
.mn i::before{top:0}.mn i::after{bottom:0}
html.mo .mn i::before{transform:translateY(3.75px) rotate(45deg)}
html.mo .mn i::after{transform:translateY(-3.75px) rotate(-45deg)}
@media(hover:hover) and (pointer:fine){.hc:hover::before{transform:none}.hc:hover::after{transform:scale(1.6)}.mn:hover{border-color:currentColor}}
@media(max-width:480px){.hc{display:none}}

/* menu, op elk scherm volledig */
#menu{position:fixed;inset:0;z-index:25;overflow-y:auto;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--e2),visibility 0s .55s}
#menu.open{visibility:visible;clip-path:inset(0);transition:clip-path .55s var(--e2),visibility 0s}
.mb{display:none;position:fixed;top:0;right:0;bottom:0;width:54%;overflow:hidden;pointer-events:none;background:var(--dk)}
.mb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,16,12,.56) 0%,rgba(21,16,12,0) 26%);pointer-events:none}
.mb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .6s var(--e1),transform 1.4s var(--e1)}
.mb img.on{opacity:1;transform:none}
.mi{position:relative;min-height:100%;display:grid;grid-template-rows:1fr auto;gap:clamp(36px,6vh,64px);padding:clamp(100px,14vh,130px) var(--gut) clamp(24px,4vh,40px)}
.mk{align-self:center}
.mk a{display:block;width:fit-content;color:var(--tx);text-decoration:none;font-weight:500;letter-spacing:-.035em;line-height:1.1;font-size:clamp(38px,min(11.5vw,7.4vh),56px);padding:.06em 0;opacity:0;transform:translateY(18px);transition:opacity .2s,transform .2s,color .3s var(--e1)}
.mk a::after{content:".";color:var(--brl);opacity:0;transition:opacity .25s var(--e1)}
.mk a[aria-current=page]::after{opacity:1}
#menu.open .mk a{opacity:1;transform:none;transition:opacity .6s var(--e1) .16s,transform .6s var(--e1) .16s,color .3s var(--e1)}
#menu.open .mk a:nth-child(2){transition-delay:.21s,.21s,0s}#menu.open .mk a:nth-child(3){transition-delay:.26s,.26s,0s}#menu.open .mk a:nth-child(4){transition-delay:.31s,.31s,0s}
.mz{display:grid;gap:14px;align-content:end;opacity:0;transition:opacity .2s}
#menu.open .mz{opacity:1;transition:opacity .6s var(--e1) .36s}
.mz .label{color:var(--ste)}
.mzl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(14px,1.6vw,24px)}
.mzl a{display:grid;align-content:start;gap:10px;padding:14px 0 0;border-top:1px solid var(--ln2);text-decoration:none;color:var(--ste);font-size:12px;line-height:1.3;transition:color .2s}
.mzl a[aria-current=page]{color:var(--brl)}
.mlg{display:flex;align-items:center;gap:6px;height:22px}
.mlg img{height:100%;width:auto}
.mlg .pk{height:80%}
.mlg img+img{height:64%}
.mcn{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:6px}
.mcn a{color:var(--zand);text-decoration:none;font-size:14px;padding:4px 0}
@media(min-width:900px){
 .mb{display:block}
 .mi{width:46%}
 .mk a{font-size:clamp(40px,min(4.8vw,8.4vh),80px)}
}
@media(hover:hover) and (pointer:fine){.mk:hover a{color:var(--ste)}.mk a:hover{color:var(--zand)}.mk a:hover::after{opacity:1}.mzl a:hover{color:var(--zand)}.mcn a:hover{color:var(--brl)}}
html.mo header{background:none;transform:none}
html.mo header::before{display:none}
html.mo .hl .iz{opacity:1}html.mo .hl .ie{opacity:0}

/* locaties van een merk */
.locg{display:grid;gap:clamp(32px,4vw,20px);margin-top:clamp(36px,5vw,64px)}
@media(min-width:760px){.locg{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.lock{display:block;text-decoration:none;color:inherit}
.lock .ph{position:relative;overflow:hidden;aspect-ratio:3/2;margin-bottom:18px}
.lock .ph img{width:100%;height:100%;object-fit:cover}
.lock .imp{top:12px;right:12px;font-size:9px;letter-spacing:.2em}
.lock b{display:block;font-weight:600;font-size:clamp(26px,3vw,42px);letter-spacing:-.035em;line-height:1.05;text-transform:uppercase}
.lock p{color:var(--mut);margin-top:8px}
.lock .label{display:block;margin-top:12px;color:var(--mut)}
.lock i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .3s cubic-bezier(.2,0,0,1)}
@media(hover:hover) and (pointer:fine){a.lock:hover i{transform:translateX(5px)}}

/* Code-animatie */
.ch{display:inline-flex;justify-content:center}
.ch.m{font-family:"Plex Mono",monospace;font-weight:300;letter-spacing:0;color:var(--mut)}
.wd{display:inline-block;white-space:nowrap}

/* grote zin en cijfers */
.groot{font-weight:600;font-size:clamp(34px,5.9vw,90px);line-height:1.04;letter-spacing:-.04em;text-transform:uppercase}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) 16px}
@media(min-width:900px){.facts.vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts b{display:block;height:1.08em;overflow:hidden;font-weight:600;font-size:clamp(40px,5.6vw,84px);letter-spacing:-.045em;line-height:1.02;white-space:nowrap}
.facts b i{display:block;font-style:normal}
.facts div>span{font-size:clamp(13px,1.2vw,16px);color:var(--mut);display:block;margin-top:12px;line-height:1.4;max-width:15em}

/* home: filmhero, blijft staan terwijl de rest eroverheen schuift */
.hs{position:absolute;top:0;left:0;width:100%;height:100vh;height:100svh;background:none;pointer-events:none}
main{position:relative}
main>*:not(.vast):not(.hs){position:relative;z-index:1}
.vast{position:sticky;top:0;z-index:0}
#top{height:100vh;height:100svh;padding:0;overflow:hidden;display:flex;align-items:flex-end}
.reel{position:absolute;inset:0;background:var(--dk)}
.reel video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0}
.reel video.on{opacity:1;z-index:1}
.reel video.in{opacity:1;z-index:2}
@media(max-width:767px){.reel video.rlb,#ppc .pbg{object-position:80% 50%}}
#top::after,.phero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(21,16,12,.92) 0%,rgba(21,16,12,.5) 40%,rgba(21,16,12,.12) 72%,rgba(21,16,12,.42) 100%)}
.hin{position:relative;z-index:4;width:100%;padding:0 var(--gut) clamp(24px,4vh,44px);max-width:calc(1320px + 2*var(--gut));margin:0 auto}
.hin:focus{outline:0}
#top #hnm{width:min(clamp(280px,46vw,680px),92vh);max-width:none;margin:0}
.prg{position:fixed;inset:0;z-index:61;width:100%;height:100%;pointer-events:none}
#hnm svg{display:block;width:100%;height:auto;overflow:visible}
#top h1,.phero h1{font-size:clamp(42px,min(8.4vw,15vh),132px);line-height:.94;max-width:12.4em}
.hon{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);margin-top:clamp(20px,3.4vh,40px);align-items:end}
.hon .lead{color:var(--zand);font-size:clamp(16px,1.35vw,19px);max-width:30em}
@media(min-width:900px){.hon{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(40px,6vw,96px)}}
.rl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:clamp(8px,1.2vw,18px)}
.rl a{position:relative;display:flex;flex-direction:column;gap:9px;padding-bottom:12px;text-decoration:none;color:var(--ste);opacity:.62;transition:opacity .3s}
.rl a.on,.rl a:focus-visible{opacity:1}
.rlo{display:flex;align-items:center;gap:6px;height:clamp(15px,1.5vw,22px)}
.rlo img{height:100%;width:auto}
.rlo .pk{height:86%}
.rlt{font-size:clamp(10px,.9vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.rl i{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(200,184,166,.3);overflow:hidden}
.rl i::after{content:"";position:absolute;inset:0;background:var(--brl);transform:scaleX(0);transform-origin:0 50%}
.rl a.on i::after{animation:vul var(--t,5s) linear forwards}
@keyframes vul{to{transform:none}}
@media(hover:hover) and (pointer:fine){.rl a:hover{opacity:1}}
.imp{position:absolute;z-index:4;right:var(--gut);top:clamp(84px,12vh,112px);color:var(--zand)}

/* home: verhaal met beeldjes in de zin */
.stm{padding-top:clamp(112px,16vw,220px);padding-bottom:clamp(96px,12vw,170px)}
.stm .groot{max-width:18em}
.stml{margin-top:clamp(28px,3.4vw,48px);max-width:34em}
.mvg{position:relative;display:grid;gap:clamp(36px,4vw,44px);margin-top:clamp(48px,6vw,88px);padding-left:22px}
.mvg::before,.mvl{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--ln)}
.mvl{background:var(--acc);transform-origin:50% 0}
.js .mvl{transform:scaleY(0)}
.js .mvk::before{transform:scale(0)}
.js .mvk.aan::before{transform:scale(1)}
.mvk .plogo{transition:opacity .6s var(--e2)}
.js .mvk:not(.aan) .plogo{opacity:.28}
@media(min-width:900px){.mvg{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding:32px 0 0}
 .mvg::before,.mvl{top:0;right:0;bottom:auto;width:auto;height:1px;transform-origin:0 50%}
 .js .mvl{transform:scaleX(0)}
 .mvg .mvk::before{left:0;top:-35px}}
.mvk{position:relative;display:block;text-decoration:none;color:inherit}
.mvk::before{content:"";position:absolute;left:-25px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--acc);transition:transform .35s var(--e2)}
.mvk .plogo{height:clamp(30px,3vw,42px)}
.mvk .label{display:block;margin-top:20px;color:var(--mut)}
.mvk p{margin-top:12px;color:var(--mut);font-size:clamp(16px,1.25vw,18px);line-height:1.55}

/* portfolio: elk merk een volledig scherm, het volgende schuift eroverheen */
.pf{padding:0}
.pfk{position:sticky;top:0;display:flex;align-items:flex-end;height:100vh;height:100svh;min-height:520px;overflow:hidden;text-decoration:none;color:var(--zand);background:var(--dk)}
.pfk::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,16,12,.86) 0%,rgba(21,16,12,.08) 56%,rgba(21,16,12,.3) 100%)}
.pfk .imp{z-index:2}
.pfi{position:relative;z-index:2;display:grid;gap:clamp(20px,3vh,32px);width:100%;max-width:calc(1320px + 2*var(--gut));margin:0 auto;padding:0 var(--gut) clamp(28px,5vh,48px)}
.pfi .plogo{height:clamp(56px,9vw,132px)}
.pfs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;border-top:1px solid rgba(200,184,166,.34);padding-top:16px}
.pfs em{font-style:normal;font-size:clamp(17px,1.5vw,21px);line-height:1.4}
.pfs .label{grid-row:2;color:var(--ste)}
.pfs i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--brl);font-size:clamp(26px,3vw,40px);transition:transform .25s var(--e1)}
@media(hover:hover) and (pointer:fine){.pfk:hover .pfs i{transform:translateX(8px)}}
@media(min-width:760px){.pfs{grid-template-columns:minmax(0,1fr) auto 64px}.pfs .label{grid-row:auto}.pfs i{grid-row:auto;grid-column:auto;justify-self:end}}

/* leiding */
.cijf{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px)}

/* Veurne: de renders schuiven over elkaar */
.vn{padding:0}
.vl{position:relative;height:88vh;overflow:hidden;background:var(--dk);isolation:isolate}
.vl img{width:100%;height:100%;object-fit:cover}
.vl::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,16,12,.84) 0%,rgba(21,16,12,0) 44%)}
.vl figcaption{position:absolute;z-index:1;left:var(--gut);right:var(--gut);bottom:clamp(28px,5vh,56px);display:grid;gap:8px}
.vl figcaption .label{color:var(--ste)}
.vl b{font-weight:600;text-transform:uppercase;letter-spacing:-.04em;line-height:.96;font-size:clamp(38px,6.6vw,100px)}
.vl figcaption span:last-child{font-size:clamp(16px,1.4vw,20px);line-height:1.45;color:var(--zand);max-width:30em}
.js .vn{height:560vh}
.js .vnst{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js .vl{position:absolute;inset:0;height:auto}
.js .vl:not(:first-child){clip-path:inset(100% 0 0 0)}

/* team */
.tm{display:flex;gap:10px;margin:clamp(48px,6vw,88px) calc(var(--gut)*-1) 0;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--gut);scrollbar-width:none}
.tm::-webkit-scrollbar{display:none}
.tm figure{flex:0 0 min(70vw,300px);scroll-snap-align:start}
.tm .ph{aspect-ratio:4/5}
.tm figcaption{padding-top:14px}
.tm b{display:block;font-weight:600;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.025em}
.tm .label{display:block;color:var(--acc);margin-top:8px;font-size:10px;letter-spacing:.2em}
.tm p{color:var(--mut);font-size:15px;line-height:1.45;margin-top:10px}
@media(min-width:1100px){.tm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-left:0;margin-right:0;padding:0;overflow:visible}}

/* partners */
.prt{padding:0 0 clamp(72px,9vw,120px)}
.prt .wrap{padding:0 var(--gut);max-width:calc(1320px + 2*var(--gut))}
.mq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mqt{display:flex;width:max-content;animation:mq 70s linear infinite}
.mqr{display:flex;align-items:center;gap:clamp(44px,5vw,84px);padding-right:clamp(44px,5vw,84px)}
.mqr img{height:clamp(26px,3vw,40px);width:auto;max-width:150px;object-fit:contain;opacity:.75}
@keyframes mq{to{transform:translateX(-50%)}}

/* merkpagina's */
.phero{position:relative;height:100vh;height:100svh;min-height:560px;padding:0;overflow:hidden;display:flex;align-items:flex-end}
.pm{position:absolute;inset:0}
.phero.zw::after{background:linear-gradient(0deg,rgba(21,16,12,.95) 0%,rgba(21,16,12,.72) 46%,rgba(21,16,12,.12) 74%,rgba(21,16,12,.42) 100%)}
.pm .pbg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.pbg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.plogo{display:flex;align-items:center;gap:12px;height:clamp(38px,4.6vw,64px)}
.plogo img{height:100%;width:auto}
.plogo .pk{height:70%}
.plogo img+img{height:62%}
.phero h1{margin-top:clamp(20px,3.4vh,36px);max-width:11em}
.phero .lead{color:var(--zand);margin-top:clamp(16px,2.4vh,28px);max-width:32em}
.ig{display:grid;gap:40px;grid-template-columns:minmax(0,1fr)}
.ig h2{font-size:clamp(36px,5.2vw,78px)}
@media(min-width:900px){.ig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(56px,7vw,112px)}}
.igt .lead+.lead{margin-top:20px}
.igt .lnk{margin-top:clamp(24px,3vw,36px)}
.igt .dl{margin-top:clamp(36px,4vw,56px)}
.bfzh{object-position:50% 36%}
.glr{position:relative;padding:0 0 clamp(72px,9vw,120px);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.glr::-webkit-scrollbar{display:none}
.glrt{display:flex;gap:12px;width:max-content;padding:0 var(--gut)}
.glr figure{flex:none;width:84vw;scroll-snap-align:center}
.glrb{aspect-ratio:4/5;overflow:hidden;background:var(--rs)}
.glrm{width:100%;height:100%}
.glrm img,.glrm video{width:100%;height:100%;object-fit:cover;display:block}
.glr figcaption{margin-top:12px;color:var(--ste);white-space:nowrap}
.glrl{display:none}
.js .glrb{clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--e2)}
.js .glr .in .glrb{clip-path:inset(0)}
.js .glr figcaption{visibility:hidden}
@media(min-width:900px){.glr{overflow:hidden;padding:0;height:100vh;display:flex;align-items:center;scroll-snap-type:none}.glrt{gap:24px;padding:0 clamp(40px,5vw,72px);will-change:transform}.glr figure{width:auto}.glrb{height:68vh;aspect-ratio:auto}.glrm img,.glrm video{width:auto}.glrl{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brl);transform:scaleX(0);transform-origin:0 50%}.js .glrb{transition:none}}
.js .cijf .facts b i{visibility:hidden}
.moz{padding:0}
.mozg{display:grid;gap:8px;padding:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.mozg .ph{aspect-ratio:4/3}
.mozg .g{grid-column:1/-1;aspect-ratio:16/9}
.mozg .s{aspect-ratio:3/4}
.mozg .x{grid-column:1/-1;aspect-ratio:16/9}
.mozg.pp .m{grid-column:1/-1;aspect-ratio:4/5}
.mozg .imp{top:12px;right:12px;font-size:9px;letter-spacing:.2em}
@media(min-width:900px){.mozg{grid-template-columns:repeat(6,minmax(0,1fr))}.mozg .g{grid-column:span 4;aspect-ratio:auto}.mozg .s{grid-column:span 2;aspect-ratio:3/4}.mozg .m{grid-column:span 3;aspect-ratio:3/2}.mozg .x{aspect-ratio:21/9}.mozg.pp .m{grid-column:span 2;aspect-ratio:auto}.mozg.pp .g{grid-column:span 4;aspect-ratio:16/9}}
.vlg{position:relative;display:flex;align-items:flex-end;height:min(78vh,720px);overflow:hidden;text-decoration:none;padding:var(--gut)}
.vlg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,16,12,.84),rgba(21,16,12,.15))}
.vlg .pbg{transition:transform 1s var(--e1)}
.vlgi{position:relative;z-index:1;display:grid;gap:18px;width:100%;max-width:1320px;margin:0 auto}
.vlgi .label{color:var(--ste)}
.vlgi b{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-weight:600;font-size:clamp(40px,7vw,104px);line-height:1}
.vlgi .plogo{height:clamp(60px,10vw,150px)}
.vlgi b i{font-style:normal;color:var(--brl);transition:transform .3s var(--e2)}
@media(hover:hover) and (pointer:fine){.vlg:hover .pbg{transform:scale(1.03)}.vlg:hover b i{transform:translateX(10px)}}

/* merken-overzicht */
.mrks0{--nav:clamp(72px,8vh,92px);--rust:34vh;position:relative;background:var(--dk)}
.mrk{position:sticky;top:0;display:flex;align-items:flex-end;height:100vh;height:100svh;overflow:hidden;text-decoration:none;margin-bottom:var(--rust);padding:0 var(--gut) calc(var(--nav) + clamp(28px,5vh,56px));background:var(--dk)}
.mrk:last-of-type{margin-bottom:0}
.mrkb{position:absolute;inset:0;overflow:hidden;will-change:transform}
.mrkb .pbg{transition:transform 1s var(--e1)}
#bfz .pbg{object-position:50% 40%}
.mrkb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,16,12,.92) 0%,rgba(21,16,12,.58) 34%,rgba(21,16,12,.08) 70%)}
.mrkv{position:absolute;inset:0;background:var(--dk);opacity:0;pointer-events:none}
.mrki{position:relative;z-index:1;display:grid;gap:clamp(20px,3vh,32px);width:100%;max-width:1320px;margin:0 auto}
.mrkl{display:grid;gap:clamp(18px,3vh,30px)}
.mrk .plogo{height:clamp(34px,4vw,56px)}
.mrkt b{display:block;font-weight:600;text-transform:uppercase;letter-spacing:-.04em;line-height:.96;font-size:clamp(36px,min(6vw,11vh),92px);max-width:10em}
.mrkr em{display:block;font-style:normal;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--ste)}
.mrks{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(14px,2vh,22px);font-size:15px;font-weight:500;color:var(--zand)}
.mrks i{font-style:normal;color:var(--brl);font-size:20px;transition:transform .25s var(--e1)}
.mrkn{position:sticky;top:calc(100vh - var(--nav));top:calc(100svh - var(--nav));z-index:6;height:var(--nav);margin-bottom:calc(var(--nav) * -1);padding:0 var(--gut);pointer-events:none}
.mrkni{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);max-width:1320px;margin:0 auto;height:100%;pointer-events:auto}
.mrkn a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding-bottom:16px;text-decoration:none;color:var(--ste);opacity:.56;transition:opacity .3s}
.mrkn a.on,.mrkn a:focus-visible{opacity:1}
.mrkn i{position:absolute;left:0;right:0;bottom:8px;height:1px;background:rgba(200,184,166,.3);overflow:hidden}
.mrkn i::after{content:"";position:absolute;inset:0;background:var(--brl);transform:scaleX(var(--v,0));transform-origin:0 50%}
.js .mrkn{opacity:0;transition:opacity .4s var(--e2)}
.js .mrkn.op{opacity:1}
.js .mrk .plogo,.js .mrkt b{clip-path:inset(0 0 100% 0);transform:translateY(24px);transition:clip-path .9s var(--e1),transform .9s var(--e1)}
.js .mrkt b{transition-delay:.08s}
.js .mrk.in .plogo,.js .mrk.in .mrkt b{clip-path:inset(-.1em 0 -.1em 0);transform:none}
.js .mrkr{opacity:0;transform:translateY(14px);transition:opacity .8s var(--e2) .22s,transform .8s var(--e1) .22s}
.js .mrk.in .mrkr{opacity:1;transform:none}
@media(min-width:900px){.mrki{grid-template-columns:minmax(0,1fr) minmax(0,25em);align-items:end;gap:clamp(40px,6vw,96px)}}
@media(max-width:899px){.mrks0{--rust:22vh}.mrkn .rlt{font-size:9px;letter-spacing:.1em;white-space:normal;line-height:1.3}.mrkn .rlo{height:14px}.mrks0{--nav:82px}}
@media(hover:hover) and (pointer:fine){.mrk:hover .pbg{transform:scale(1.03)}.mrk:hover .mrks i{transform:translateX(6px)}.mrkn a:hover{opacity:1}}


/* foto's */
.ph{position:relative;overflow:hidden;background:var(--rs)}
.ph img{width:100%;height:100%;object-fit:cover}
.op-c{object-position:50% 30%}.op-d{object-position:50% 34%}
[data-p] img{height:112%}
.js [data-c]{clip-path:inset(100% 0 0 0)}

/* home: wat we doen als grote rijen */

/* portret en citaat */
.overgrid{display:grid;gap:56px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.overgrid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(72px,9vw,136px)}.ovl{position:sticky;top:14vh}}
#portret{aspect-ratio:4/5;max-height:calc(100vh - 140px);width:100%}
#portret img{height:108%}
.js #portret{clip-path:inset(100% 0 0 0)}
.glans{position:absolute;inset:-30% -60%;z-index:1;background:linear-gradient(115deg,rgba(201,162,124,0) 44%,rgba(201,162,124,.55) 50%,rgba(201,162,124,0) 56%);mix-blend-mode:screen;transform:translateX(-70%);pointer-events:none}
.quote blockquote{font-weight:600;font-size:clamp(30px,4.4vw,64px);line-height:1.1;letter-spacing:-.035em}
.quote figcaption{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--acc);margin-top:28px;font-weight:500}
.ovr .lnk{margin-top:clamp(36px,4vw,56px)}
.ovr .lead+.quote{margin-top:clamp(64px,8vw,112px)}

/* team */
.teamkop{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.teamkop{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(72px,9vw,136px);align-items:end}}
.quote2{margin-top:clamp(64px,8vw,112px);max-width:none}
.ovr .label{color:var(--mut)}
.haris{display:grid;gap:48px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.haris{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(72px,9vw,136px)}}
.haris .ph{aspect-ratio:4/5;max-height:calc(100vh - 140px);width:100%}
.haris .lead{margin-top:clamp(24px,3vw,40px)}
.haris .lead+.lead{margin-top:20px}
.rol{color:var(--mut);margin-top:18px}

/* pagina-koppen */
.kop{padding-top:clamp(150px,24vh,260px);padding-bottom:clamp(64px,9vw,128px)}
.kop .lead{margin-top:clamp(28px,4vw,56px)}
@media(min-width:900px){.kop .lead{margin-left:50%;max-width:none}}

.dl{display:grid}
.dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--ln)}
.dl div:last-child{border-bottom:1px solid var(--ln)}
.dl dt{color:var(--mut);padding-top:5px}
.dl dd{font-size:clamp(17px,1.4vw,20px);line-height:1.4}

/* wat we doen-pagina */
.ph.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;background:none}
.ph.duo img{height:100%}

/* over-pagina */
.okop{padding-top:clamp(150px,24vh,260px);padding-bottom:clamp(72px,10vw,144px)}
#naam{font-size:clamp(40px,12.3vw,190px);line-height:.92;max-width:7em}
.js #naam .nm{visibility:hidden}
.js #naam .d{transform:scale(.4);opacity:0}
.ogrid{padding-top:0}
.ovr .lead{font-size:clamp(21px,2.2vw,31px);line-height:1.38;color:var(--tx)}
.ovr .lead a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.jar{padding:0;background:var(--dk)}
.jar ol{list-style:none}
.jar li{position:relative;isolation:isolate;height:100vh;height:100svh;overflow:hidden;background:var(--dk)}
.jarb{position:absolute;inset:0}
.jarb img,.jarb video{width:100%;height:100%;object-fit:cover;display:block}
.jarb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,16,12,.3) 0%,rgba(21,16,12,.08) 30%,rgba(21,16,12,.62) 62%,rgba(21,16,12,.94) 100%)}
.jar li:nth-child(3) video{object-position:50% 30%}
.jar li:nth-child(4) img{object-position:50% 24%}
.jar li:nth-child(5) video{object-position:50% 55%}
.jar li:nth-child(6) img{object-position:50% 48%}
.jart{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:18px;padding:0 clamp(16px,4vw,64px) clamp(44px,7vh,88px);color:var(--zand)}
.jary{font-weight:600;font-size:clamp(52px,10.5vw,168px);line-height:1;letter-spacing:-.05em;color:var(--brl);white-space:nowrap;font-variant-numeric:tabular-nums}
.jart h2{font-size:clamp(26px,3vw,44px);line-height:1.08;letter-spacing:-.03em;color:var(--zand)}
.jart .lead{max-width:38ch;margin-top:10px;color:var(--zand);opacity:.82}
@media(min-width:900px){.jart{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end}}
.jarl{display:none}
.js .jar{height:520vh}
.js .jarp{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js .jar li{position:absolute;inset:0}
.js .jar li+li{clip-path:inset(100% 0 0 0)}
.js .jary{visibility:hidden}
.js .jarl{display:block;position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:var(--brl);transform:scaleX(.167);transform-origin:0 50%}

/* contact */
.cs{padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.cs{grid-template-columns:42% minmax(0,1fr);align-items:start}}
.cb{position:relative;height:58vh;height:58svh;overflow:hidden;background:var(--dk);isolation:isolate}
.cb::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(21,16,12,.9),rgba(21,16,12,0) 55%),linear-gradient(to bottom,rgba(21,16,12,.45),rgba(21,16,12,0) 22%);pointer-events:none}
@media(min-width:900px){.cb{position:sticky;top:0;height:100vh;height:100svh}}
.cf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0)}
.cf[data-o="Padel coaching"]{object-position:62% 50%}
.cf[data-o="Iets anders"]{object-position:50% 42%}
img.cf{object-position:50% 8%}
.js img.cf{transform-origin:50% 30%;animation:cfpush 24s linear infinite alternate}
@keyframes cfpush{to{transform:scale(1.05)}}
@media(min-width:900px){img.cf{object-position:50% 50%}}
.cf.vor{clip-path:inset(0);z-index:1}
.cf.aan{clip-path:inset(0);z-index:2;transition:clip-path .9s var(--e2)}
.cbt{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,5vh,56px);z-index:4;display:grid}
.cbt p{grid-area:1/1;align-self:end;max-width:26em;font-size:clamp(15px,1.15vw,17px);line-height:1.45;color:var(--zand);opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
.cbt p.aan{opacity:1;transform:none;visibility:visible;transition:opacity .6s var(--e1) .3s,transform .6s var(--e1) .3s}
.cbt b{display:block;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:-.04em;line-height:1;font-size:clamp(30px,3.2vw,48px)}
.cr{--crl:var(--gut);padding:clamp(48px,8vw,72px) var(--gut) clamp(72px,9vw,128px) var(--crl);outline:0}
@media(min-width:900px){.cr{--crl:clamp(48px,6vw,96px);padding-top:clamp(130px,19vh,190px)}}
.cr h1{font-size:clamp(38px,5vw,76px)}
.cr .lead{margin-top:clamp(20px,2.4vw,28px)}
form{--kol:clamp(24px,3vw,40px);margin-top:clamp(48px,6vw,80px)}
.cp{display:grid;gap:clamp(30px,3vw,40px);margin:clamp(64px,8vw,104px) calc(-1*var(--gut)) 0 calc(-1*var(--crl));padding:clamp(44px,6vw,80px) var(--gut) clamp(48px,6vw,80px) var(--crl);background:var(--rs)}
.cp h2{font-size:clamp(30px,3.2vw,46px);margin-bottom:clamp(4px,1vw,12px)}
.vv{display:grid;gap:clamp(30px,3vw,40px) var(--kol);grid-template-columns:minmax(0,1fr)}
@media(min-width:600px) and (max-width:899px),(min-width:1200px){.vv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.keuze{border:0}
.kg{position:relative;border-top:1px solid var(--ln2)}
.keuze legend{color:var(--mut);margin-bottom:16px}
.kg label{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:clamp(14px,1.5vw,20px) 0;border-bottom:1px solid var(--ln2);cursor:pointer}
.kg label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--e2)}
.kg label:has(input:checked)::after{transform:none;transform-origin:0 50%}
.keuze input,.nv input{position:absolute;opacity:0;width:1px;height:1px}
.kg span,.kz{font-weight:600;text-transform:uppercase;letter-spacing:-.035em;line-height:1.1;font-size:clamp(23px,2.3vw,32px)}
.kg span{color:var(--mut);transition:color .2s}
.kg small{font-size:13px;color:var(--mut);text-align:right}
.keuze em{font-style:normal;color:var(--acc);visibility:hidden}
.keuze input:checked+span{color:var(--tx)}
.keuze input:checked+span em{visibility:visible}
.keuze.aan input:checked+span em{visibility:hidden}
.keuze input:focus-visible+span,.nv input:focus-visible+span{outline:2px solid var(--acc);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.kg label:hover span{color:var(--tx)}}
.kz{display:none;position:absolute;left:0;top:0;font-style:normal;color:var(--acc);pointer-events:none}
.keuze.aan .kz{display:block}
.keuze.glijd .kz{transition:transform .5s var(--e2)}
.cv[hidden]{display:none}
.nv{border:0}
.nv legend{color:var(--mut);margin-bottom:14px}
.nvg{display:flex;flex-wrap:wrap;gap:8px}
.nvg label{display:block;cursor:pointer}
.nvg span{display:block;padding:11px 18px;border:1px solid var(--ln2);font-size:15px;color:var(--tx);transition:background .18s,color .18s,border-color .18s}
.nvg input:checked+span{background:var(--zand);border-color:var(--zand);color:var(--dk)}
.vd{--f:24px;--k:.54;position:relative;display:block;padding-top:22px}
@media(min-width:900px){.vd{--f:clamp(24px,2.1vw,30px);--k:.45}}
.vd input,.vd textarea{display:block;width:100%;font:inherit;font-size:var(--f);font-weight:500;letter-spacing:-.025em;line-height:1.25;color:var(--tx);caret-color:var(--acc);background:none;border:0;border-bottom:1px solid var(--ln2);border-radius:0;padding:0 0 12px;outline:0;-webkit-appearance:none}
.vd textarea{resize:none;overflow:hidden}
.vd input:-webkit-autofill{-webkit-text-fill-color:var(--tx);box-shadow:0 0 0 100px var(--rs) inset}
.vd>span{position:absolute;left:0;top:22px;font-size:var(--f);line-height:1.25;letter-spacing:-.025em;color:var(--mut);transform-origin:0 0;pointer-events:none;transition:transform .4s var(--e2),opacity .7s var(--e1)}
.vd input:focus~span,.vd textarea:focus~span,.vd input:not(:placeholder-shown)~span,.vd textarea:not(:placeholder-shown)~span{transform:translateY(-22px) scale(var(--k))}
.vd input:-webkit-autofill~span{transform:translateY(-22px) scale(var(--k))}
.vd i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--e2)}
.vd:focus-within i,.vd.fout i{transform:none;transform-origin:0 50%}
.vd small{display:none;position:absolute;left:0;top:100%;margin-top:6px;font-size:13px;color:var(--acc)}
.vd.fout small{display:block}
.hp{position:absolute;left:-9999px}
/* formulier in beweging: vragen komen binnen op scroll, een ingevuld veld krijgt zijn punt, de knop vult zich mee */
.vd{transition:opacity .35s var(--e1)}
.cp:has(.vd:focus-within) .vd:not(:focus-within){opacity:.5}
.vd.vol i{transform:none;transform-origin:0 50%}
.vk{position:absolute;right:0;bottom:14px;width:9px;height:9px;border-radius:50%;background:var(--acc);opacity:0;transform:translateY(-34px);transition:opacity .2s,transform .2s}
.vd.vol .vk{opacity:1;transform:none;transition:opacity .15s,transform .55s cubic-bezier(.55,0,.15,1)}
.dk .knop.vg{position:relative;background:none;color:var(--tx);border:1px solid var(--ln2);padding:17px 27px;--r:100%}
.dk .knop.vg>i{color:var(--acc)}
.kv{position:absolute;inset:-1px;display:flex;align-items:center;gap:20px;padding:18px 28px;font-weight:500;background:var(--zand);color:var(--dk);clip-path:inset(0 var(--r) 0 0);transition:clip-path .8s var(--e2)}
.kv i{font-style:normal;color:var(--br)}
@media(hover:hover) and (pointer:fine){.dk .knop.vg:hover{background:none}}
.js .kg label{border-bottom-color:transparent}
.js .kg label::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ln2);transform:scaleX(0);transform-origin:0 50%}
.js .kg.in label::before{transform:none;transition:transform 1.1s var(--e2) calc(var(--i)*.09s)}
.js .kg:not(.in) span{clip-path:inset(0 100% 0 0)}
.js .kg span{clip-path:inset(-10% -8% -10% 0);transition:color .2s,clip-path .9s var(--e2) calc(var(--i)*.09s + .1s)}
.js .kg:not(.in) small{opacity:0}
.js .kg small{transition:opacity .7s var(--e1) calc(var(--i)*.09s + .4s)}
.js .kg .kz{transition:transform .5s var(--e2),opacity .4s .7s}
.js .kg:not(.in) .kz{opacity:0}
.js .cp{background:none;position:relative;isolation:isolate}
.js .cp::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rs);transform:scaleY(0);transform-origin:50% 0;transition:transform 1.1s var(--e2)}
.js .cp.in::before{transform:none}
.js .cp:not(.in) #ck{clip-path:inset(0 100% 0 0)}
.js #ck{clip-path:inset(-10% -4% -10% 0);transition:clip-path .9s var(--e2) .35s}
.js .vd input,.js .vd textarea{border-bottom-color:transparent}
.js .vd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ln2);transform:scaleX(0);transform-origin:0 50%}
.js .vd.in::after{transform:none;transition:transform 1.1s var(--e2) calc(var(--i)*.08s)}
.js .vd:not(.in)>span{opacity:0}
.js .vz:not(.in),.js .nv:not(.in){opacity:0;transform:translateY(12px)}
.js .vz,.js .nv{transition:opacity .7s var(--e1),transform .7s var(--e1)}
.clw{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;margin-top:clamp(56px,6vw,80px)}
.clw p{color:var(--ste);font-size:15px}
.clw div{display:flex;align-items:center;gap:clamp(28px,3vw,40px)}
.clw a{display:flex;align-items:center;gap:10px;text-decoration:none;opacity:.78;transition:opacity .25s}
.clw img{height:17px;width:auto}
.clw i{font-style:normal;color:var(--brl);font-size:16px;line-height:1;transition:transform .25s var(--e1)}
@media(hover:hover) and (pointer:fine){.clw a:hover{opacity:1}.clw a:hover i{transform:translateX(5px)}}
.vz{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.vz p{flex:1 1 220px;font-size:13px;line-height:1.5;color:var(--mut)}
.knop{display:inline-flex;align-items:center;gap:20px;background:var(--esp);color:var(--zand);border:0;font:inherit;font-size:16px;font-weight:500;padding:18px 28px;cursor:pointer;text-decoration:none;transition:transform .16s var(--e1),background .2s}
.knop i{font-style:normal;color:var(--brl);transition:transform .18s var(--e1)}
.knop:active{transform:scale(.97)}
.knop:disabled{opacity:.6;cursor:default}
.dk .knop{background:var(--zand);color:var(--esp)}
.dk .knop i{color:var(--br)}
@media(hover:hover) and (pointer:fine){.dk .knop:hover{background:var(--ste)}}
@media(hover:hover) and (pointer:fine){.knop:hover{background:var(--mok)}.knop:hover i{transform:translateX(3px)}}
.fs{font-size:15px;line-height:1.5;color:var(--tx)}
.fs:empty{display:none}
.big a{display:block;text-decoration:none;font-weight:500;font-size:clamp(24px,2.7vw,38px);letter-spacing:-.035em;line-height:1.2;padding:16px 0;border-bottom:1px solid var(--ln);overflow-wrap:anywhere;transition:color .2s}
.big a:first-child{border-top:1px solid var(--ln)}
@media(hover:hover) and (pointer:fine){.big a:hover{color:var(--mut)}}
.addr{font-size:16px;line-height:1.7;color:var(--mut);margin-top:36px}
.addr b{display:block;color:var(--tx);font-weight:500;margin-bottom:6px}

/* slot van elke pagina */
.slot{position:relative;z-index:1;padding:0;background:var(--dk)}
.slk{display:flex;min-height:100vh;min-height:100svh;box-sizing:border-box;padding:clamp(96px,11vw,150px) var(--gut) clamp(32px,4vw,56px);background:var(--zand);color:var(--esp)}
.slk .wrap{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(56px,8vw,96px);width:100%}
.slt{display:grid;gap:18px}
.slt .label{color:var(--mok)}
.slt .lead{max-width:26em;color:var(--mok)}
.sg{font-weight:600;text-transform:uppercase;font-size:clamp(44px,12.4vw,132px);letter-spacing:-.05em;line-height:.96}
.js .sg .ln{background:linear-gradient(100deg,var(--esp) 42%,var(--br) 48%,#E9D2B4 50%,var(--br) 52%,var(--esp) 58%);background-size:320% 100%;background-position:var(--g,0%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.slr{display:grid;border-bottom:1px solid rgba(90,66,52,.22)}
.slr a{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:end;padding:clamp(20px,2.2vw,30px) 0;text-decoration:none;color:var(--esp);overflow:hidden;transition:color .3s}
.slr a::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(90,66,52,.22);transform-origin:0 50%;transition:transform 1.1s var(--e2);transition-delay:var(--w,0s)}
.js .slr a:not(.in)::before{transform:scaleX(0)}
.slr a::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--esp);transform:scaleY(0);transform-origin:50% 100%;transition:transform .42s var(--e2)}
.slr .label{grid-column:1/-1;color:var(--mok);transition:color .3s,transform .42s var(--e2)}
.slr b{min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:clamp(18px,1.95vw,28px);letter-spacing:-.03em;line-height:1.15;transition:transform .42s var(--e2)}
.slr i{font-style:normal;color:var(--br);font-size:clamp(22px,2vw,28px);line-height:1;transition:color .3s,transform .42s var(--e2)}
@media(min-width:900px){.slt{grid-template-columns:minmax(0,1fr) minmax(0,26em);align-items:start}.sg{font-size:clamp(52px,9.3vw,132px);white-space:nowrap}.slr{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px);border-bottom:0}}
@media(hover:hover) and (pointer:fine){.slr a:hover{color:var(--zand)}.slr a:hover::after{transform:scaleY(1)}.slr a:hover .label{color:var(--ste);transform:translateX(18px)}.slr a:hover b{transform:translateX(18px)}.slr a:hover i{color:var(--brl);transform:translateX(-18px)}}

/* volgende opening */
.nxt{display:block;padding:clamp(28px,3.4vw,44px) 0;background:var(--rs);color:var(--zand);text-decoration:none;overflow:hidden}
.nxtl{display:block;box-sizing:border-box;padding:0 var(--gut);max-width:calc(1320px + 2*var(--gut))}
.nxt .label{display:block;color:var(--ste)}
.nxtt{display:flex;width:max-content;margin-top:clamp(18px,2vw,28px);animation:nxt 56s linear infinite}
.nxtr{display:flex;flex:none}
.nxti{display:flex;flex:none;align-items:center;gap:clamp(14px,1.6vw,24px);padding-right:clamp(48px,6vw,96px)}
.nxti .plogo{height:clamp(34px,4.4vw,64px)}
.nxti b{font-weight:600;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(36px,5.2vw,78px);line-height:1;transition:color .3s}
.nxti em{font-style:normal;color:var(--ste);font-size:clamp(16px,1.4vw,20px);white-space:nowrap}
.nxti i{font-style:normal;color:var(--brl);font-size:clamp(26px,3.2vw,48px)}
@keyframes nxt{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nxtt{animation:none}}
@media(hover:hover) and (pointer:fine){.nxt:hover .nxti b{color:var(--brl)}}

/* wat we doen op de home */
.wdg{display:flex;gap:8px;margin:clamp(40px,5vw,72px) calc(-1*var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none}
.wdg::-webkit-scrollbar{display:none}
.wdb{height:1px;margin-top:clamp(24px,6vw,32px);background:var(--ln)}
.wdb i{display:block;height:100%;background:var(--brl);transform:scaleX(.3);transform-origin:0 50%}
html:not(.js) .wdb{display:none}
.wds h2{font-size:clamp(30px,3.2vw,48px)}
.wdk{display:block;flex:0 0 min(76vw,360px);scroll-snap-align:start;text-decoration:none;color:inherit}
.wdk .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brl);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e2)}
@media(hover:hover) and (pointer:fine){.wdg .wdk:hover{flex-grow:1.7}.wdk:hover .ph::after{transform:scaleX(1)}}
.wdk .ph{position:relative;overflow:hidden;aspect-ratio:3/4}
.wdk img,.wdk video{transition:transform 1s var(--e1)}
.wdk .ph img{width:100%;height:100%;object-fit:cover}
.wdk h3{margin-top:16px;font-weight:600;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(18px,1.5vw,22px);line-height:1.1}
.wdk p{margin-top:8px;padding-right:12px;color:var(--mut);font-size:clamp(15px,1.15vw,17px);line-height:1.45}
@media(min-width:900px){.wdg{margin-right:0;margin-left:0;padding:0;overflow:visible;scroll-snap-type:none}.wdb{display:none}.wdk{flex:1 1 0;min-width:0;transition:flex-grow .7s var(--e2)}.wdk .ph{aspect-ratio:auto;height:clamp(400px,62vh,620px)}.wdk p{width:clamp(170px,19vw,280px);padding-right:0}}
@media(hover:hover) and (pointer:fine){.wdk:hover img,.wdk:hover video{transform:scale(1.03)}}


/* team: zelfde behandeling voor elk portret */
.tm .ph img{filter:grayscale(1);transition:filter .5s var(--e1)}
@media(hover:hover) and (pointer:fine){.tm figure:hover .ph img{filter:none}}

/* footer */
footer{position:relative;z-index:1;color:var(--mut);padding:clamp(64px,7vw,104px) var(--gut) 28px;font-size:15px}
.fi{max-width:1320px;margin:0 auto}
.ftg{display:grid;gap:44px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fb,.fc{grid-column:1/-1}
@media(min-width:1000px){.ftg{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.2fr)}.fb,.fc{grid-column:auto}}
.ftg .label{display:block;color:var(--mut);margin-bottom:18px}
.ftg nav a,.fc a,.fc address{display:block;text-decoration:none;color:var(--tx);line-height:1.5;padding:3px 0;font-style:normal;transition:color .2s}
.fc address{padding:3px 0}
.fb p{margin-top:18px;max-width:20em;line-height:1.5}
.ftg .fm a{display:flex;align-items:center;gap:7px;height:22px;margin-bottom:14px;padding:0;opacity:.82;transition:opacity .2s}
.fm img{height:100%;width:auto}
.fm .pk{height:82%}
@media(hover:hover) and (pointer:fine){.ftg nav:not(.fm) a:hover,.fc a:hover{color:var(--acc)}.fm a:hover{opacity:1}}
.ls{position:relative;display:block;width:clamp(190px,18vw,250px)}
.ls img{width:100%;height:auto}
.lsg,.lsd{position:absolute;pointer-events:none}
.lsg{inset:0;overflow:hidden;-webkit-mask:url("../assets/logo-zand.svg") center/100% 100% no-repeat;mask:url("../assets/logo-zand.svg") center/100% 100% no-repeat}
.lsg::before{content:"";position:absolute;inset:-20% -50%;background:linear-gradient(105deg,rgba(201,162,124,0) 43%,#C9A27C 50%,rgba(201,162,124,0) 57%);transform:translateX(-60%)}
.lsd{left:98.26%;top:57.9%;width:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(247,243,238,.95) 0,rgba(201,162,124,.5) 26%,rgba(201,162,124,0) 62%);transform:translate(-50%,-50%) scale(.5);opacity:0}
.ls.on .lsg::before{animation:sweep 2.2s var(--e2) forwards}
.ls.on .lsd{animation:glint 1s var(--e2) 1.5s forwards}
@keyframes sweep{to{transform:translateX(60%)}}
@keyframes glint{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
.fr{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin-top:clamp(56px,7vw,96px);padding-top:22px;border-top:1px solid var(--ln);font-size:13px}
.fr nav{display:flex;gap:22px}
.fr a{text-decoration:none;color:var(--mut);transition:color .2s}
@media(hover:hover) and (pointer:fine){.fr a:hover{color:var(--tx)}}

/* losse pagina's */
.los main{padding:clamp(140px,20vh,220px) var(--gut) var(--sec);min-height:70vh}
.los article,.los .kort{max-width:720px;margin:0 auto}
.los h1{font-size:clamp(38px,6vw,76px)}
.los h1 span{color:var(--acc)}
.los h2{max-width:none;font-size:24px;letter-spacing:-.03em;line-height:1.2;margin-top:44px;text-transform:none}
.los p,.los li{font-size:17px;line-height:1.65;color:var(--mut);margin-top:12px}
.los .stand{font-size:13px;margin-top:18px}
.los .kort .knop{margin-top:36px}

/* bewegingslaag */
.js .pfk .plogo{clip-path:inset(0 0 100% 0);transform:translateY(24px);transition:clip-path .9s var(--e1),transform .9s var(--e1)}
.js .pfk.in .plogo{clip-path:inset(0 0 0 0);transform:none}
.js .pfs{opacity:0;transition:opacity .8s var(--e1) .25s}
.js .pfk.in .pfs{opacity:1}
.js [data-r]{opacity:0}
.js [data-lines],.js #hnm{opacity:0}
.ln-mask{padding-bottom:.14em;margin-bottom:-.14em}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtuit .16s cubic-bezier(.45,0,.2,1) both}
::view-transition-new(root){animation:vtin .34s cubic-bezier(.2,0,0,1) both}
@keyframes vtuit{to{opacity:0}}
@keyframes vtin{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  @view-transition{navigation:none}
  .ovl{position:static}
  .lsg,.lsd,.glans{display:none}
  .mqt{animation:none;width:auto;flex-wrap:wrap}.mqr{flex-wrap:wrap;justify-content:center;padding:0 var(--gut)}.mqr[aria-hidden]{display:none}
  .mq{-webkit-mask:none;mask:none}
  .rl a.on i::after{animation:none}
  header,#menu,.mk a,.mz,.mn i::before,.mn i::after,.rb,.lnk::after{transition:none}
}

/* opening: de Code-animatie van het logo, één keer per bezoek */
.pre{display:none}
.intro,.intro body{overflow:hidden}
.intro .pre{display:flex;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;background:var(--zand)}
.prb{position:relative;width:clamp(240px,38vw,560px);aspect-ratio:548/121}
.prb img{position:absolute;inset:0;width:100%;height:100%;max-width:none;visibility:hidden}
.prw{position:absolute;left:.35%;top:0;font-weight:600;line-height:1;letter-spacing:-.04em;white-space:nowrap;color:var(--esp);visibility:hidden}
.prd,.prv{position:absolute;background:var(--zand)}
.prd{left:96.2%;top:48%;width:4%;height:20%}
.prv{left:11.4%;top:74.5%;width:29%;height:25.5%;transform-origin:right}
.vzd{display:none;position:fixed;inset:0;z-index:35;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,4vh,44px);padding:var(--gut);text-align:center}
.vzd.aan{display:flex}
.vzd .prw{color:var(--zand)}
.vzd .prd,.vzd .prv{background:var(--dk)}
.vzt{max-width:24em;text-wrap:balance;font-size:clamp(18px,1.6vw,23px);line-height:1.4;letter-spacing:-.01em;outline:0}
.vzd .vzt,.vzd .lnk{opacity:0}
.vzd.stil .vzt,.vzd.stil .lnk{opacity:1}
.vzd.stil .prb img{visibility:visible}
.vzd.stil .prw,.vzd.stil .prd,.vzd.stil .prv{display:none}
@media(prefers-reduced-motion:reduce){.keuze.glijd .kz,.vd>span,.vd i,.kg label::after,.cf.aan,.cbt p,.vk,.kv,.vd{transition:none}}
@media(max-width:767px){.pfhab{height:82%;object-position:31.5% 50%;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}}
@media(max-width:767px){.pfppc{object-position:74% 50%}.phppc{object-position:14% 50%}}

/* wat we doen: een venster in het zand opent tot de volle film, het woord kleurt mee waar het venster komt */
.vst{padding:0}
.vstk{position:relative}
.vsts{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--zand)}
.vstw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;max-width:none;font-size:15.4vw;font-weight:600;letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:var(--esp)}
.vstc{position:absolute;inset:0;background:var(--dk)}
.vstc video,.vstc img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vstc i{position:absolute;inset:0;background:linear-gradient(to top,rgba(21,16,12,.88),rgba(21,16,12,.46) 46%)}
.vstc .vstw{color:var(--zand)}.vstc .vstw b{font-weight:inherit}
.vstt{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(32px,7vh,72px);margin:0 auto;text-align:center;color:var(--zand);max-width:34em}
.vstt b{display:block;font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;margin-bottom:8px}
.vstt p{font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--ste)}
.js .vstk{height:280vh}
.js .vsts{position:sticky;top:0}
.js .vstc{clip-path:inset(32% 18%)}
.js .vstt{opacity:0}
@media(min-width:900px){.js .vstc{clip-path:inset(30% 39%)}}
@media(max-width:767px){#padel video{object-position:80% 50%}}
.vlgi b i{display:none}
@font-face{font-family:"BFZ Grotesk";src:url(/assets/bfz-grotesk.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
.bfz{--bfs:linear-gradient(100deg,rgba(255,255,255,0) 12%,rgba(255,255,255,.05) 42%,rgba(255,255,255,0) 72%),url("/assets/img/bfz-borstel.webp")}
.bfz main{font-family:"BFZ Grotesk","Inter Tight",sans-serif;font-weight:300}
.bfz main .dk{--bgc:#0D0D0D;--tx:#fff;--mut:#B9B9B9;--ln:rgba(255,255,255,.14);--acc:#fff}
.bfz main .label{font-weight:400;letter-spacing:.22em;font-size:10px}
.bfz main h1,.bfz main h2{font-stretch:112%;font-weight:700;letter-spacing:-.005em;line-height:.96;text-transform:uppercase}
.bfz main h1 .lt,.bfz main h2 .lt{font-weight:300}
.bfz main h1 span,.bfz main h2 span{display:block}
.bfz main h1{font-size:clamp(40px,min(6vw,12vh),92px)}
.bfz main h2{font-size:clamp(36px,6vw,86px)}
.bfz main .lead{font-weight:300;font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--mut);max-width:34em}
.bfz main .lead+.lead{margin-top:18px}
.bfz .phero::after{background:linear-gradient(0deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.45) 38%,rgba(13,13,13,.08) 70%,rgba(13,13,13,.4) 100%)}
.bfz .phero .lead{color:#fff}
.bfd{background-image:var(--bfs);padding-top:clamp(88px,11vw,160px);padding-bottom:clamp(88px,11vw,160px)}
.bfd+.bfd{padding-top:0}
.bfg{display:grid;gap:40px;grid-template-columns:minmax(0,1fr);align-items:end}
@media(min-width:900px){.bfg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(56px,8vw,120px)}}
.bfz main .cijf{padding:0;margin-top:clamp(64px,9vw,120px);border-top:1px solid var(--ln);padding-top:clamp(32px,4vw,56px)}
.bfz .cijf .facts b{font-size:clamp(42px,6vw,92px);font-weight:300;letter-spacing:-.02em}
.bfz .cijf{--ci:#fff}
.bfz .cijf .facts b{color:#fff;transform:translateZ(0);contain:paint}
.bfz .cijf .facts div>span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-top:14px}
.bfb{overflow:hidden;border-radius:16px;background:#171717}
.bfb img,.bfb video{display:block;width:100%;height:100%;object-fit:cover}
.bfo{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;gap:36px}
.bfo a{display:block;text-decoration:none;color:inherit}
.bfo h3{margin:0;font-stretch:112%;font-weight:300;font-size:clamp(24px,3vw,44px);line-height:1.1;letter-spacing:0;text-transform:uppercase;color:#fff}
.bfo h3 b{font-weight:700}
.bfo p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--mut);max-width:30em}
.bfo .bfb{aspect-ratio:4/3;margin-top:16px}
.bfo li:nth-child(3) img{object-position:50% 26%}
.bfo li:nth-child(4) img{object-position:50% 40%}
@media(min-width:900px){.bfo{position:relative;gap:0;grid-template-columns:minmax(0,1fr);padding-right:52%;min-height:clamp(440px,38vw,560px);align-content:start}
 .bfo li{border-top:1px solid var(--ln)}
 .bfo a{padding:18px 0}
 .bfo h3{color:rgba(255,255,255,.42);transition:color .35s var(--e2)}
 .bfo p{display:grid;margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--e2),opacity .4s var(--e2),margin .5s var(--e2)}
 .bfo .on h3{color:#fff}
 .bfo .on p{max-height:5em;opacity:1;margin-top:8px}
 .bfo .bfb{position:absolute;right:0;top:0;bottom:0;width:48%;margin:0;aspect-ratio:auto;opacity:0;transition:opacity .6s var(--e2)}
 .bfo .bfb img{transform:scale(1.04);transition:transform 1.2s var(--e1)}
 .bfo .on .bfb{opacity:1}
 .bfo .on .bfb img{transform:none}}
.bfr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,56px)}
.bfr figure{margin:0}
.bfr .bfb{aspect-ratio:4/5}
.bfr figure:nth-child(even){margin-top:40px}
.bfr figcaption{margin-top:12px;color:var(--mut)}
@media(min-width:900px){.bfr{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.bfr figure:nth-child(even){margin-top:0}.bfr figure:nth-child(3n+2){margin-top:72px}}
.bfl{--bgc:#EDEDED;--tx:#111;--mut:#555;--ln:rgba(0,0,0,.12);background-image:linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 82%);color:#111;padding-top:clamp(88px,11vw,160px);padding-bottom:clamp(88px,11vw,160px)}
.bfl .bfg{align-items:center}
.bfl .bfb{aspect-ratio:5/4}
.bfg h2,.bfz main .bfg h2{font-size:clamp(34px,4.5vw,66px)}
.bfl .lead{margin-top:20px}
.bfw{list-style:none;margin:28px 0 0;padding:0}
.bfw li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:baseline;padding:13px 0;border-top:1px solid var(--ln);font-size:15px}
.bfw li:last-child{border-bottom:1px solid var(--ln)}
.bfw li span:first-child{font-size:10px;color:var(--mut)}
.bfw b{font-weight:500}
.bfw li span:last-child{color:var(--mut)}
.bfk{display:inline-block;margin-top:32px;padding:17px 26px;background:#0E0E0E;color:#fff;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .3s var(--e2)}
@media(hover:hover) and (pointer:fine){.bfk:hover{background:#333}}
.bfz .prt{--bgc:#0D0D0D;background-image:var(--bfs);padding-top:clamp(72px,9vw,120px)}
.bfz .slr i,.hb .slr i,.ppc .slr i{display:none}
@font-face{font-family:Nohemi;src:url(/assets/habits-nohemi.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.hb main{--bgc:#f4f0ea;--tx:#1c1815;--mut:#71675f;--ln:#d5cbc3;--acc:#b06a4e;font-family:Nohemi,"Inter Tight",sans-serif;font-weight:400;color:var(--tx)}
.hb main .dk{--bgc:#1c1815;--tx:#f4f0ea;--mut:#c5b9a9;--ln:#514038;--acc:#bd7c60}
.hb main .label{font-size:12px;font-weight:500;letter-spacing:.13em;color:var(--acc)}
.hb main h1,.hb main h2{font-weight:440;letter-spacing:-.048em;line-height:1.04;text-transform:none}
.hb main h1 span,.hb main h2 span{display:block}
.hb main h1{font-size:clamp(40px,min(5.6vw,11vh),88px)}
.hb main h1 em{font-style:normal;color:var(--acc)}
.hb main h2{font-size:clamp(38px,4.6vw,68px)}
.hb main h2 .lt{color:var(--mut)}
.hb main h3{margin:0;font-weight:440;letter-spacing:-.04em;line-height:1.06}
.hb main .lead{font-size:clamp(16px,1.25vw,18px);line-height:1.65;letter-spacing:0;color:var(--mut);max-width:32em}
.hb main .lead+.lead{margin-top:18px}
.hb .phero::after{background:linear-gradient(0deg,rgba(28,24,21,.9) 0%,rgba(28,24,21,.4) 40%,rgba(28,24,21,.05) 72%,rgba(28,24,21,.4) 100%)}
.hb .phero .lead{color:#f4f0ea}
.hbd{padding-top:clamp(80px,9vw,130px);padding-bottom:clamp(80px,9vw,130px)}
.hbd+.hbd{padding-top:0}
.hbg{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);align-items:end}
@media(min-width:900px){.hbg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(56px,8vw,120px)}}
.hk{display:inline-block;flex:none;width:13px;height:13px;background:var(--acc);-webkit-mask:url(/assets/habits-clover.svg) center/contain no-repeat;mask:url(/assets/habits-clover.svg) center/contain no-repeat;transition:transform .5s var(--e1)}
.hbk{display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding-bottom:7px;border-bottom:1px solid currentColor;font-size:14px;font-weight:450;color:inherit;text-decoration:none;transition:color .3s var(--e2)}
@media(hover:hover) and (pointer:fine){.hbk:hover{color:var(--acc)}.hbk:hover .hk,.hbo a:hover .hk{transform:rotate(90deg)}}
.hbb{position:relative;display:block;overflow:hidden;background:var(--ln)}
.hbb img,.hbb video{display:block;width:100%;height:100%;object-fit:cover}
.hbw{margin:clamp(40px,5vw,72px) 0 0}
.hbw .hbb{aspect-ratio:4/5}
.hbw figcaption{margin-top:12px}
@media(min-width:900px){.hbw .hbb{aspect-ratio:16/9}}
.hb main .cijf{padding:0;background:none;margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--ln);padding-top:clamp(28px,4vw,48px);--ci:#1c1815}
.hb .cijf .facts b{font-size:clamp(44px,5.6vw,84px);font-weight:440;letter-spacing:-.048em;color:#1c1815;transform:translateZ(0);contain:paint}
.hb .cijf .facts div>span{font-size:14px;color:var(--mut);margin-top:12px}
.hbl{display:grid;gap:56px;margin-top:clamp(36px,5vw,64px)}
.hbl article{min-width:0}
.hbl .hbb{aspect-ratio:4/3}
.hbl .label{margin-top:20px}
.hbl h3{margin-top:12px;font-size:clamp(36px,4vw,56px)}
.hbl p{margin:12px 0 0;color:var(--mut)}
.hbl .hbk{margin-top:20px}
@media(min-width:900px){.hbl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.hbl article:nth-child(2){margin-top:96px}}
.hbo{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;border-bottom:1px solid var(--ln)}
.hbo li{border-top:1px solid var(--ln);transition:opacity .35s var(--e2)}
.hbo a{display:grid;grid-template-columns:clamp(84px,12vw,160px) minmax(0,1fr) 13px;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(14px,1.6vw,22px) 0;color:inherit;text-decoration:none}
.hbo .hbb{aspect-ratio:1/1.1}
.hbo h3{font-size:clamp(22px,2.5vw,36px)}
.hbo p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--mut)}
@media(hover:hover) and (pointer:fine){.hbo:hover li:not(:hover){opacity:.42}}
.hbr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(36px,5vw,64px)}
.hbr figure{margin:0}
.hbr .hbb{aspect-ratio:4/5}
.hbr figure:nth-child(even){margin-top:40px}
@media(min-width:900px){.hbr{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.hbr figure:nth-child(even){margin-top:0}.hbr figure:nth-child(3n+2){margin-top:72px}}
.hb main .hbb .imp{top:12px;right:12px;font-size:10px;color:#f4f0ea}
@font-face{font-family:Forum;src:url(/assets/ppc-forum.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
.ppc{--pg:#192E25;--pd:#12211B;--pw:#F7F6F2;--esp:var(--pg);--mok:var(--pg);--bgc:var(--pw);--tx:var(--pg);--mut:rgba(25,46,37,.74);--ln:rgba(25,46,37,.16);--br:var(--pg);--brl:var(--pg);--pfx:clamp(120px,15vw,240px)}
.ppc main{background:var(--pw);color:var(--tx);font-weight:400}
.ppc .dk,.ppc main .dk{--bgc:var(--pg);--tx:var(--pw);--mut:rgba(247,246,242,.74);--ln:rgba(247,246,242,.2);--br:var(--pw);--brl:var(--pw)}
.ppc main h1,.ppc main h2,.ppc main h3,.pci p,.ppc .sg{font-family:Forum,Georgia,serif;font-weight:400;font-synthesis:none;letter-spacing:-.005em;text-transform:none}
.ppc main h2 span{display:block}
.ppc main h2{font-size:clamp(38px,4.6vw,76px);line-height:1.06;max-width:none}
.ppc main .lead{font-size:clamp(16px,1.15vw,18px);line-height:1.7;color:var(--mut);max-width:30em}
.ppc main .lead+.lead{margin-top:16px}
.ppc main .label{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.ppc .bfk{display:inline-block;padding:19px 38px;background:var(--pg);color:var(--pw);border:1px solid var(--pg);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background-color .35s var(--e2),color .35s var(--e2)}
@media(hover:hover) and (pointer:fine){.ppc .bfk:hover{background:transparent;color:var(--pg)}}
.pch{display:block;position:relative;height:100vh;height:100svh;min-height:600px;padding:0;overflow:hidden;background:var(--pd)}
.pch::after{display:none}
.pch .pm{position:absolute;inset:0;width:auto;height:auto;overflow:hidden;background:var(--pd)}
.pch .pm video{transform-origin:50% 50%}
.pch .pm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,33,27,.5) 0%,rgba(18,33,27,.46) 45%,rgba(18,33,27,.78) 100%);pointer-events:none}
.pcht{position:absolute;z-index:3;inset:0;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,3.2vh,36px);padding:24px;text-align:center;background:none}
.pchl{width:clamp(220px,31vw,500px);height:auto}
.ppc main .pcht h1{max-width:none;font-size:clamp(21px,2.1vw,32px);line-height:1.2;color:var(--pw)}
.pchb{position:absolute;z-index:4;left:var(--gut);right:var(--gut);bottom:clamp(24px,3.4vw,44px);display:flex;justify-content:space-between;gap:20px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pw)}
.pchb a{color:inherit;text-decoration:none;padding-bottom:6px;border-bottom:1px solid rgba(247,246,242,.5);transition:border-color .35s var(--e2)}
@media(hover:hover) and (pointer:fine){.pchb a:hover{border-color:var(--pw)}}
.pci{padding:var(--pfx) var(--gut);text-align:center}
.pci p{max-width:21em;margin:0 auto;font-size:clamp(29px,3.5vw,56px);line-height:1.22;color:var(--pg)}
.pcs{display:grid;gap:clamp(48px,6vw,96px);padding:0 0 var(--pfx)}
.pcv{overflow:hidden;background:var(--pg);aspect-ratio:4/5}
.pcv video,.pcv img{display:block;width:100%;height:100%;object-fit:cover}
.pcst{padding:0 var(--gut)}
.ppc main .pcst h2{font-size:clamp(36px,3.9vw,64px)}
.pcst .lead:first-of-type{margin-top:clamp(26px,3vw,40px)}
.pcfx{margin:clamp(40px,4.4vw,64px) 0 0;border-top:1px solid var(--ln)}
.pcfx div{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--ln)}
.pcfx dt{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.pcfx dd{margin:0;font-family:Forum,Georgia,serif;font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--pg)}
@media(min-width:900px){.pcs{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}.pcv{aspect-ratio:5/6}.pcst{padding:0 var(--gut) 0 clamp(16px,3vw,56px)}}
.pca{padding:var(--pfx) var(--gut);background:var(--pg)}
.pcak{display:grid;gap:22px;padding-bottom:clamp(30px,3.4vw,48px);margin-bottom:clamp(44px,5vw,80px);border-bottom:1px solid var(--ln)}
.pct{display:grid;gap:clamp(48px,5vw,72px) clamp(24px,3.2vw,56px);list-style:none;margin:0;padding:0}
.pct li{min-width:0}
.pctm{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--pd)}
.pctm img,.pctm video{display:block;width:100%;height:100%;object-fit:cover}
.ppc main .pct h3{margin-top:clamp(20px,2vw,28px);font-size:clamp(26px,2.3vw,36px);line-height:1.1;color:var(--pw)}
.ppc .pct p{margin-top:10px;max-width:24em;font-size:15px;line-height:1.65;color:var(--mut)}
@media(min-width:900px){.pcak{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}.pct{grid-template-columns:repeat(3,minmax(0,1fr))}.pct li:nth-child(2){margin-top:clamp(56px,7vw,112px)}.pct li:nth-child(3){margin-top:clamp(112px,14vw,224px)}}
.pcf{position:relative;margin-top:-1px;padding:0;background:var(--pg)}
.pcfm{height:clamp(420px,100vh,1000px);overflow:hidden;background:var(--pd)}
.pcfm video,.pcfm img{display:block;width:100%;height:100%;object-fit:cover}
.pcr{padding:var(--pfx) var(--gut);text-align:center}
.pcr>.label{display:block}
.ppc main .pcr h2{margin-top:22px;font-size:clamp(42px,6.4vw,104px);line-height:1.04}
.ppc main .pcr .lead{margin:clamp(22px,2.4vw,32px) auto clamp(30px,3.2vw,44px)}
.ppc header.s.dk{background:rgba(25,46,37,.92)}
.ppc header.s:not(.dk){background:rgba(247,246,242,.92)}
.ppc .vlg::after{background:linear-gradient(0deg,rgba(18,33,27,.86),rgba(18,33,27,.2))}
.ppc .slot,.ppc .slk{background:var(--pw);color:var(--pg)}
.ppc .sg,.ppc .sg *{color:var(--pg)}
.ppc footer{background:var(--pg);color:var(--mut)}
@media(max-width:899px){.pchb{font-size:10px;letter-spacing:.16em}.pcv{aspect-ratio:4/5}.pcht{justify-content:flex-end;padding-bottom:clamp(92px,13vh,130px)}}
.ppc #menu{--bgc:var(--pg);--tx:var(--pw);--zand:var(--pw);--brl:var(--pw);--ste:#B9C3BC;--ln2:rgba(247,246,242,.3)}