@font-face{font-family:Hanken;src:url(/fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --zwart:#0a0a09;--kool:#1a1a18;--wit:#fff;--mist:#f2f1ee;--lijn:#dedcd6;--grijs:#6d6c67;--grijs-l:#a5a49e;
  --rand:clamp(20px,3vw,48px);--sectie:clamp(88px,12vw,184px);--balk:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--balk)}
body{margin:0;background:var(--zwart);color:var(--zwart);font:400 clamp(17px,1.25vw,19px)/1.45 Hanken,Helvetica,Arial,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.groot{font-weight:300;font-size:clamp(44px,7.2vw,124px);line-height:.98;letter-spacing:-.05em}
.middel{font-weight:300;font-size:clamp(34px,4.6vw,76px);line-height:1.02;letter-spacing:-.04em}
.knop{display:inline-block;font:500 15px/1 Hanken,Helvetica,sans-serif;letter-spacing:-.005em;text-decoration:none;text-align:center;padding:17px 24px;border:1px solid var(--zwart);border-radius:6px;background:var(--zwart);color:var(--wit);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.knop:hover{background:transparent;color:var(--zwart)}
.knop.licht{background:var(--wit);color:var(--zwart);border-color:var(--wit)}
.knop.licht:hover{background:transparent;color:var(--wit)}

/* balk */
.balk{position:fixed;inset:0 0 auto;z-index:50;height:var(--balk);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--rand);background:var(--zwart);color:var(--wit)}
.merk{font-weight:500;font-size:19px;letter-spacing:.2em;text-decoration:none}
.balk nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.balk nav a:not(.knop){text-decoration:none;font-size:14px;opacity:.85;transition:opacity .2s}
.balk nav a:not(.knop):hover{opacity:1}
.balk .knop{padding:13px 18px;font-size:14px;white-space:nowrap}
@media (max-width:900px){.balk nav a:not(.knop){display:none}}

/* opening: jullie sites, een voor een */
.verhaal{position:relative;height:560vh;background:var(--zwart);color:var(--wit)}
.anker{position:absolute;top:15vh}
.podium{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.intro{position:absolute;inset:calc(var(--balk) + 3vh) var(--rand) auto;text-align:center;will-change:transform,opacity}
.intro h1{font-weight:300;font-size:clamp(40px,6.6vw,112px);line-height:1;letter-spacing:-.05em}
.intro p{margin:clamp(14px,1.8vh,22px) auto 0;max-width:36em;text-wrap:balance;color:#cfcec9}
.scherm{position:absolute;inset:var(--balk) 0 0;transform-origin:50% 0;transform:translateY(38vh) scale(.74);border-radius:calc(14px / .74);overflow:hidden;will-change:transform;background:var(--mist)}
.site-laag{position:absolute;inset:0;display:block;overflow:hidden;background:var(--wit);text-decoration:none;color:var(--wit);will-change:transform}
.site-laag+.site-laag{transform:translateY(100%)}
.site-laag img{width:100%;height:auto;will-change:transform}
.site-naam{position:absolute;left:var(--rand);bottom:clamp(18px,3.5vh,32px);display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;padding:12px 18px;border-radius:8px;background:var(--zwart);font-size:clamp(17px,1.5vw,22px);letter-spacing:-.02em}
.site-naam small{flex-basis:100%;font-size:13px;letter-spacing:0;color:#cfcec9}
.site-naam i{font-style:normal;transition:transform .25s}
.site-laag:hover .site-naam i{transform:translateX(5px)}
.getallen li{min-width:0;display:flex;flex-direction:column;justify-content:flex-end}

/* getallen */
.getallen{background:var(--zwart);color:var(--wit);padding:var(--sectie) var(--rand)}
.getallen h2{max-width:13em;margin-bottom:clamp(48px,7vw,104px)}
.getallen ul{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid #33332f}
.getallen li{padding-top:20px}
.getallen b{display:block;font-weight:200;white-space:nowrap;font-size:clamp(68px,10.5vw,180px);line-height:.95;letter-spacing:-.06em}
.getallen span{display:block;margin-top:10px;color:#cfcec9}
@media (max-width:640px){.getallen ul{grid-template-columns:1fr}}

/* wat je krijgt */
.krijgt{background:var(--wit);padding:calc(var(--sectie) * .6) var(--rand) var(--sectie)}
.krijgt>h2{max-width:11em;margin-bottom:clamp(36px,5vw,72px)}
.tegels{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.1vw,16px)}
.tegel{position:relative;grid-column:span 2;min-height:clamp(340px,31vw,470px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(22px,2.2vw,32px);border-radius:12px;background:var(--mist);overflow:hidden}
.tegel.breed{grid-column:span 3}
.tegel.donker{background:var(--kool);color:var(--wit)}
.tegel h3{font-weight:400;font-size:clamp(23px,2.1vw,32px);line-height:1.08;letter-spacing:-.03em;max-width:15em}
.tegel .beeld{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0}
@media (max-width:900px){.tegels{grid-template-columns:1fr}.tegel,.tegel.breed{grid-column:auto;min-height:330px}}

.telefoon{width:clamp(170px,17vw,230px);aspect-ratio:9/17;margin-bottom:calc(clamp(22px,2.2vw,32px) * -1 - 70px);border:6px solid #000;border-radius:28px;background:#000;overflow:hidden;position:relative;color:#fff}
.telefoon img{position:absolute;inset:32px 0 0;width:100%;height:calc(100% - 32px);object-fit:cover;object-position:50% 0}
.telefoon span{position:absolute;z-index:1}
.telefoon .slot{top:6px;left:9px;right:9px;background:#fff;color:#111;border-radius:999px;padding:3px 8px;font-size:10px;text-align:center}

.knoppen{display:flex;flex-direction:column;gap:10px;width:100%;max-width:330px}
.knoppen span{padding:18px;border-radius:8px;text-align:center;font-weight:500;background:var(--wit);color:var(--zwart)}
.knoppen span:first-child{animation:klop 2.6s ease-in-out infinite}
@keyframes klop{50%{transform:scale(1.03)}}
.knoppen .uit{background:transparent;color:var(--wit);box-shadow:inset 0 0 0 1px #55554f}

.zoek{width:100%;max-width:440px;background:var(--wit);border-radius:10px;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.08);font-size:14px;line-height:1.35}
.zoek .veld{border:1px solid var(--lijn);border-radius:999px;padding:9px 16px;margin-bottom:16px;color:var(--grijs)}
.zoek small{display:block;color:var(--grijs);font-size:12px}
.zoek b{display:block;font-weight:500;font-size:18px;color:#1a4fc4;letter-spacing:-.01em;margin:2px 0 4px}

.tekstwissel{width:100%;font-size:clamp(21px,2vw,30px);line-height:1.15;letter-spacing:-.03em}
.tekstwissel s{display:block;color:var(--grijs);text-decoration-thickness:1px;margin-bottom:10px;font-size:.72em;letter-spacing:-.01em}

.rondes{display:flex;flex-direction:column;gap:8px;width:100%;font-size:15px}
.rondes span{align-self:flex-start;background:#2c2c29;padding:10px 14px;border-radius:14px 14px 14px 3px;max-width:85%}
.rondes .ons{align-self:flex-end;background:var(--wit);color:var(--zwart);border-radius:14px 14px 3px 14px}

/* foto's */
.fotoband{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--zwart);color:var(--wit)}
.fotoband>img{position:absolute;left:0;top:-12%;width:100%;height:124%;max-width:none;object-fit:cover;object-position:50% 28%;will-change:transform}
.fotoband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72))}
.fotoband .op{position:absolute;z-index:1;left:var(--rand);right:var(--rand);bottom:clamp(32px,6vh,64px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.fotoband p{max-width:25em}
.fotoband p+p{margin-top:.6em}
@media (max-width:820px){.fotoband .op{display:block}.fotoband .op>div{margin-top:18px}}

/* wie */
.wie{background:var(--wit);padding:var(--sectie) var(--rand)}
.wie .rooster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:end}
.wie img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.wie .tekst-wie p{font-size:clamp(22px,2.4vw,36px);line-height:1.14;letter-spacing:-.03em;max-width:22em}
.wie .tekst-wie p+p{margin-top:.75em}
.wie .tekst-wie p.grijs{color:var(--grijs)}
.wie .links{margin-top:32px;font-size:15px;display:flex;flex-wrap:wrap;gap:6px 24px}
.wie .links a{text-underline-offset:3px}
.wie h2{margin-bottom:clamp(24px,3vw,44px)}
@media (max-width:820px){.wie .rooster{grid-template-columns:1fr}.wie figure{order:2}}

/* stappen */
.stappen{background:var(--zwart);color:var(--wit);padding:var(--sectie) var(--rand)}
.stappen h2{margin-bottom:clamp(36px,5vw,72px)}
.stappen li{display:grid;grid-template-columns:clamp(44px,8vw,120px) 5fr 6fr;align-items:baseline;gap:8px 16px;padding:clamp(18px,2.2vw,32px) 0;border-top:1px solid #33332f;color:#6d6c67;transition:color .5s}
.stappen li:last-child{border-bottom:1px solid #33332f}
.stappen li.aan{color:var(--wit)}
.stappen li>span{font-size:15px}
.stappen h3{font-weight:300;font-size:clamp(32px,4.4vw,72px);line-height:1;letter-spacing:-.04em}
@media (max-width:760px){.stappen li{grid-template-columns:44px 1fr}.stappen li p{grid-column:2}}

/* vragen */
.vragen{background:var(--wit);padding:var(--sectie) var(--rand)}
.vragen .rooster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,6vw,96px)}
.vragen .lijst{border-top:1px solid var(--lijn)}
.vragen details{border-bottom:1px solid var(--lijn)}
.vragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:clamp(18px,1.8vw,26px) 0;font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.02em}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";font-weight:300;font-size:1.2em;line-height:1;flex:none}
.vragen details[open] summary::after{content:"\2212"}
.vragen details p{padding:0 0 clamp(20px,2vw,28px);max-width:32em;color:#3f3e3a}
@media (max-width:820px){.vragen .rooster{grid-template-columns:1fr}}

/* koffie */
.koffie{background:var(--zwart);color:var(--wit);padding:var(--sectie) var(--rand) calc(var(--sectie) * .7)}
.koffie h2{font-weight:300;font-size:clamp(56px,13.5vw,250px);line-height:.92;letter-spacing:-.06em}
.koffie .onder{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,6vw,96px);margin-top:clamp(36px,5vw,72px)}
.koffie .onder>div>p{max-width:24em;color:#cfcec9}
.koffie .los{margin-top:1em}
.koffie .los a{color:var(--wit);text-underline-offset:3px}
form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label span{display:block;margin-bottom:8px;font-size:14px;color:#cfcec9}
input{width:100%;height:56px;font:400 17px/1 Hanken,Helvetica,sans-serif;color:var(--wit);background:var(--kool);border:1px solid #33332f;border-radius:6px;padding:0 16px;-webkit-appearance:none;appearance:none;transition:border-color .2s}
input:focus{outline:0;border-color:var(--wit)}
form .knop{grid-column:1/-1;height:56px}
#melding{grid-column:1/-1;min-height:1.5em;font-size:15px;color:#cfcec9}
@media (max-width:820px){.koffie .onder,form{grid-template-columns:1fr}}

/* voet */
.voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding:24px var(--rand);background:var(--zwart);color:var(--grijs-l);border-top:1px solid #33332f;font-size:14px}
.voet a{text-underline-offset:3px}
.voet div{display:flex;flex-wrap:wrap;gap:6px 24px}

/* colofon en 404 */
.tekst{background:var(--wit);min-height:80vh;padding:calc(var(--balk) + clamp(48px,7vw,104px)) var(--rand) var(--sectie)}
.tekst>*{max-width:40rem}
.tekst h1{max-width:none;margin-bottom:clamp(24px,3vw,40px)}
.tekst h1.kop{font-weight:300;font-size:clamp(44px,7.2vw,124px);line-height:.98;letter-spacing:-.05em}
.tekst h2{font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;margin:clamp(32px,4vw,48px) 0 10px}
.tekst p+p{margin-top:1em}
.gegevens{display:grid;grid-template-columns:auto 1fr;gap:4px 24px}
.gegevens dt{color:var(--grijs)}

/* opkomen bij het scrollen, alleen als er script draait */
.js .r{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .r.aan{opacity:1;transform:none}

/* geen beweging gewenst: alles gewoon onder elkaar */
.stil .verhaal{height:auto}
.stil .podium{position:relative;height:auto;overflow:visible;padding:calc(var(--balk) + 40px) 0 0}
.stil .intro{position:static;padding:0 var(--rand) 40px}
.stil .scherm{position:relative;inset:auto;transform:none;border-radius:0;overflow:visible}
.stil .site-laag,.stil .site-laag+.site-laag{position:relative;height:90vh;transform:none}
.stil .fotoband>img{top:0;height:100%}
.stil .stappen li{color:var(--wit)}
@media (prefers-reduced-motion:reduce){
  .oud-looptekst span,.knoppen span:first-child{animation:none}
  .js .r{opacity:1;transform:none;transition:none}
}

/* inhoudspagina's: zelfde taal als de homepage */
.held{background:var(--zwart);color:var(--wit);padding:calc(var(--balk) + clamp(20px,3vw,40px)) var(--rand) 0;text-align:center;overflow:hidden}
.kruimel{font-size:14px;color:var(--grijs-l);margin-bottom:clamp(28px,4vw,56px)}
.kruimel a{text-underline-offset:3px}
.held h1{font-weight:300;font-size:clamp(44px,7.4vw,128px);line-height:1;letter-spacing:-.05em;max-width:13em;margin:0 auto;text-wrap:balance}
.held>p{max-width:34em;margin:clamp(18px,2.2vw,30px) auto clamp(24px,2.6vw,36px);color:#cfcec9;font-size:clamp(18px,1.6vw,23px);line-height:1.35;letter-spacing:-.015em;text-wrap:balance}
.held-raam{margin:clamp(40px,5vw,72px) auto 0;width:min(100%,1240px)}
.raam{position:relative;display:block;overflow:hidden;text-decoration:none;color:var(--wit);background:var(--mist);border-radius:14px}
.held-raam .raam{height:clamp(380px,62vh,720px);border-radius:14px 14px 0 0}
.raam img{width:100%;height:auto;max-width:none;will-change:transform}
.raam .site-naam{text-align:left}
.raam:hover .site-naam i{transform:translateX(5px)}
.raamband{background:var(--wit);padding:0 var(--rand) var(--sectie)}
.raamband .raam{height:clamp(420px,84vh,860px)}

.vak{background:var(--wit);padding:var(--sectie) var(--rand)}
.vak.zwart{background:var(--zwart);color:var(--wit)}
.vak.mist{background:var(--mist)}
.vak>.groot{max-width:12em}
.kop-intro{max-width:30em;margin-top:clamp(18px,2vw,28px);font-size:clamp(19px,1.7vw,25px);line-height:1.3;letter-spacing:-.02em;color:var(--grijs)}
.zwart .kop-intro{color:#cfcec9}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.1vw,16px);margin-top:clamp(36px,5vw,72px)}
.kaart{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(190px,19vw,300px);padding:clamp(22px,2.2vw,32px);border-radius:12px;background:var(--mist)}
.zwart .kaart{background:var(--kool)}
.kaart h3{font-weight:400;font-size:clamp(25px,2.5vw,38px);line-height:1.06;letter-spacing:-.035em}
.kaart p{color:var(--grijs);max-width:24em}
.zwart .kaart p{color:#cfcec9}
@media (max-width:900px){.kaarten{grid-template-columns:1fr}.kaart{min-height:0}}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,6vw,96px);align-items:start}
.splittekst>p{font-size:clamp(22px,2.4vw,36px);line-height:1.14;letter-spacing:-.03em;max-width:22em}
.splittekst>p+p{margin-top:.75em}
.splittekst .keuze-links{margin-top:clamp(24px,3vw,40px)}
.punten li{padding:clamp(14px,1.5vw,20px) 0;border-top:1px solid var(--lijn);font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;line-height:1.2}
.punten li:last-child{border-bottom:1px solid var(--lijn)}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.getallen small{display:block;font-size:clamp(16px,1.4vw,20px);color:#cfcec9;margin-bottom:4px}
.slot{padding-bottom:var(--sectie)}
.slot-regel{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(28px,4vw,56px)}
.slot-regel p{color:#cfcec9;font-size:clamp(19px,1.7vw,25px);letter-spacing:-.02em;margin:0}

/* keuze op de homepage */
.keuze{background:var(--mist);padding:var(--sectie) var(--rand)}
.keuze .rooster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,6vw,96px)}
.keuze p{max-width:32em}
.keuze p+p{margin-top:1em}
.keuze a{text-underline-offset:3px}
.keuze-links{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--lijn)}
.keuze-links a{display:flex;justify-content:space-between;gap:16px;padding:clamp(14px,1.5vw,20px) 0;border-bottom:1px solid var(--lijn);text-decoration:none;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.keuze-links a i{font-style:normal;transition:transform .25s}
.keuze-links a:hover i{transform:translateX(5px)}
@media (max-width:820px){.keuze .rooster{grid-template-columns:1fr}}

/* voet met kolommen */
.voet{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;padding:clamp(40px,5vw,72px) var(--rand)}
.voet-kol{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.voet-kol b{font-weight:500;color:var(--wit);margin-bottom:5px}
.voet a{text-decoration:none}
.voet a:hover{color:var(--wit);text-decoration:underline}
@media (max-width:760px){.voet{grid-template-columns:1fr 1fr}}