/* ═══════════════════════════════
   SCROLL ZOOM — keukenblad

   STICKY REGEL:
   - De PARENT (#s-zoom) heeft height:300vh
   - De STICKY CHILD (.zoom-pin) heeft position:sticky + top:0 + height:100vh
   - GEEN overflow op de parent of body/html
═══════════════════════════════ */
#s-zoom{
  height:300vh;
  position:relative;
  background:var(--black);
  /* GEEN overflow hier */
}
.zoom-pin{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* GEEN overflow hier */
}
.zoom-scene{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform;
}
.zboard{
  position:relative;
  width:620px;height:400px;
  background:#161210;
  border-radius:20px;
  border:.5px solid rgba(255,255,255,.07);
  will-change:transform;
}
.z-ing{
  position:absolute;
  opacity:0;
  will-change:transform,opacity;
}
.z-ing-inner{
  background:rgba(255,255,255,.06);
  border:.5px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:13px 17px;
}
.z-ing-name{font-family:var(--serif);font-size:17px;font-weight:300;color:white;line-height:1;}
.z-ing-fr{font-family:var(--hand);font-size:13px;color:var(--blue);margin-top:3px;}
.z-pan{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.zot{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  opacity:0;
  will-change:opacity,transform;
  white-space:nowrap;
}
.zot-pre{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.zot-title{font-family:var(--serif);font-size:clamp(44px,7vw,92px);font-weight:300;color:white;line-height:.95;letter-spacing:-.025em;}
.zot-title em{font-style:italic;color:rgba(255,255,255,.4);}


/* ═══════════════════════════════
   PAN DRAAIT
═══════════════════════════════ */
#s-pan{
  height:100vh;
  background:var(--black);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.pst{
  position:absolute;width:220%;
  font-family:var(--serif);font-size:clamp(52px,8vw,108px);
  font-weight:300;white-space:nowrap;letter-spacing:-.02em;
  will-change:transform;pointer-events:none;
}
.pst-a{top:8%;color:rgba(255,255,255,.032);}
.pst-b{bottom:8%;color:rgba(255,255,255,.032);}
.pan-c{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;}
.pan-svg-w{width:min(46vw,440px);will-change:transform;}
.pan-cap{font-family:var(--serif);font-size:clamp(22px,2.8vw,36px);font-weight:300;font-style:italic;color:rgba(255,255,255,.3);text-align:center;}
.pan-cap em{color:var(--blue);font-style:normal;}
.pan-st{position:absolute;display:flex;flex-direction:column;gap:4px;}
.pan-st.l{left:48px;top:50%;transform:translateY(-50%);}
.pan-st.r{right:48px;top:50%;transform:translateY(-50%);text-align:right;}
.psn{font-family:var(--serif);font-size:64px;font-weight:300;color:var(--blue);line-height:1;}
.psl{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.2);}


/* ═══════════════════════════════
   WERK
═══════════════════════════════ */
#s-werk{background:var(--pure);padding:100px 0;}
.werk-head{padding:0 48px 44px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:.5px solid rgba(8,8,8,.07);}
.wh-orn{font-family:var(--hand);font-size:16px;color:var(--blue);margin-bottom:4px;}
.wh-title{font-family:var(--serif);font-size:clamp(36px,5vw,60px);font-weight:300;color:var(--black);letter-spacing:-.02em;line-height:1;}
.wh-count{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--gray);}
.wi{display:grid;grid-template-columns:64px 1fr 200px 80px;gap:0;align-items:center;padding:0 48px;border-bottom:.5px solid rgba(8,8,8,.07);cursor:none;position:relative;transition:background .3s;}
.wi:hover{background:rgba(20,48,237,.025);}
.wi::after{content:'';position:absolute;bottom:-.5px;left:0;width:0;height:.5px;background:var(--blue);transition:width .5s cubic-bezier(.76,0,.24,1);}
.wi:hover::after{width:100%;}
.wi-n{font-family:var(--sans);font-size:11px;color:rgba(8,8,8,.2);letter-spacing:.08em;padding:28px 0;}
.wi-name{font-family:var(--serif);font-size:clamp(34px,4.5vw,64px);font-weight:300;color:var(--black);line-height:1;padding:22px 0;letter-spacing:-.02em;transition:color .3s;}
.wi:hover .wi-name{color:var(--blue);}
.wi-tags{display:flex;flex-direction:column;gap:2px;}
.wi-tag{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(8,8,8,.28);}
.wi-yr{font-family:var(--serif);font-size:13px;font-style:italic;color:rgba(8,8,8,.28);text-align:right;}
#pf{position:fixed;pointer-events:none;z-index:800;width:300px;height:200px;border-radius:12px;background:var(--black);opacity:0;transform:translate(-50%,-62%) scale(.88) rotate(-2deg);transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 24px 80px rgba(0,0,0,.22);overflow:hidden;}
#pf.show{opacity:1;transform:translate(-50%,-62%) scale(1) rotate(-1deg);}
.pf-inner{width:100%;height:100%;display:flex;flex-direction:column;}
.pf-top{flex:1;padding:20px;display:flex;flex-direction:column;gap:8px;justify-content:center;}
.pf-bar{height:2px;background:rgba(255,255,255,.06);border-radius:1px;}.pf-bar.acc{background:rgba(20,48,237,.6);width:45%;}.pf-bar.mid{width:70%;}.pf-bar.sml{width:30%;}
.pf-bot{padding:12px 20px;border-top:.5px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;}
.pf-lbl{font-family:var(--sans);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.2);}
.pf-yr{font-family:var(--serif);font-size:13px;font-style:italic;color:rgba(255,255,255,.3);}

/* ornament */
.od{display:flex;align-items:center;justify-content:center;padding:20px 48px;gap:16px;}
.od-l{flex:1;height:.5px;background:rgba(8,8,8,.08);}
.od-m{font-family:var(--serif);font-size:15px;color:rgba(8,8,8,.18);letter-spacing:.3em;}


/* ═══════════════════════════════
   FLOATING IMAGES
═══════════════════════════════ */
#s-float{
  min-height:100vh;
  background:var(--white);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:120px 0;
  /* GEEN overflow:hidden — anders verschijnen foto's die uitsteken niet */
}
.float-quote{position:relative;z-index:2;text-align:center;max-width:680px;padding:0 48px;}
.fq-orn{font-family:var(--hand);font-size:20px;color:var(--blue);margin-bottom:16px;}
.fq-text{font-family:var(--serif);font-size:clamp(36px,5.5vw,72px);font-weight:300;line-height:1.0;letter-spacing:-.025em;color:var(--black);}
.fq-text em{font-style:italic;color:var(--blue);}
.fq-sub{margin-top:24px;font-family:var(--sans);font-size:14px;color:var(--gray);line-height:1.6;}
.fi{position:absolute;will-change:transform;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.1);}
.fi img{width:100%;height:100%;object-fit:cover;display:block;}


/* ═══════════════════════════════
   DIENSTEN — horizontaal sticky

   STICKY REGEL:
   - #s-diensten: height:400vh, position:relative, GEEN overflow
   - .ds-pin: position:sticky, top:0, height:100vh, GEEN overflow
   - .ds-track: display:flex, width:300vw (3 panels), transform via JS
═══════════════════════════════ */
#s-diensten{
  height:400vh;
  position:relative;
  /* GEEN overflow — breekt sticky */
}
.ds-pin{
  position:sticky;
  top:0;
  height:100vh;
  /* GEEN overflow — breekt sticky */
}
.ds-clip{
  width:100vw;
  height:100vh;
  overflow:hidden; /* clip de panels, maar NIET op sticky parent */
}
.ds-track{
  display:flex;
  width:300vw;
  height:100vh;
  will-change:transform;
}
.ds-panel{
  width:100vw;height:100vh;
  flex-shrink:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:80px;position:relative;
}
.p1{background:var(--pure);}
.p2{background:var(--black);}
.p3{background:var(--blue);}
.ds-bign{position:absolute;right:-.05em;top:-.1em;font-family:var(--serif);font-size:clamp(240px,32vw,420px);font-weight:300;font-style:italic;line-height:1;letter-spacing:-.05em;pointer-events:none;user-select:none;}
.p1 .ds-bign{color:rgba(8,8,8,.04);}.p2 .ds-bign{color:rgba(255,255,255,.04);}.p3 .ds-bign{color:rgba(255,255,255,.06);}
.ds-pb{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(8,8,8,.06);}
.p2 .ds-pb,.p3 .ds-pb{background:rgba(255,255,255,.06);}
.ds-fill{height:100%;background:var(--blue);width:0%;}
.p2 .ds-fill,.p3 .ds-fill{background:white;}
.ds-pre{font-family:var(--hand);font-size:18px;margin-bottom:12px;}
.p1 .ds-pre{color:var(--blue);}.p2 .ds-pre,.p3 .ds-pre{color:rgba(255,255,255,.45);}
.ds-name{font-family:var(--serif);font-size:clamp(52px,8vw,112px);font-weight:300;line-height:.95;letter-spacing:-.03em;margin-bottom:24px;}
.ds-name em{font-style:italic;opacity:.45;}
.p1 .ds-name{color:var(--black);}.p2 .ds-name,.p3 .ds-name{color:white;}
.ds-sep{height:.5px;margin-bottom:36px;}
.p1 .ds-sep{background:rgba(8,8,8,.1);}.p2 .ds-sep,.p3 .ds-sep{background:rgba(255,255,255,.1);}
.ds-desc{font-family:var(--sans);font-size:16px;line-height:1.65;max-width:520px;margin-bottom:40px;}
.p1 .ds-desc{color:var(--gray);}.p2 .ds-desc{color:rgba(255,255,255,.45);}.p3 .ds-desc{color:rgba(255,255,255,.65);}
.ds-dots{display:flex;gap:10px;align-items:center;}
.ds-dot{width:7px;height:7px;border-radius:50%;transition:transform .3s;}
.p1 .ds-dot{background:rgba(8,8,8,.15);}.p1 .ds-dot.on{background:var(--blue);transform:scale(1.6);}
.p2 .ds-dot,.p3 .ds-dot{background:rgba(255,255,255,.2);}.p2 .ds-dot.on,.p3 .ds-dot.on{background:white;transform:scale(1.6);}
.ds-pct{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-left:8px;}
.p1 .ds-pct{color:rgba(8,8,8,.25);}.p2 .ds-pct,.p3 .ds-pct{color:rgba(255,255,255,.2);}


/* ═══════════════════════════════
   AANPAK
═══════════════════════════════ */
#s-aanpak{background:var(--white);padding:120px 48px;}
.aanpak-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:80px;}
.ah-pre{font-family:var(--hand);font-size:18px;color:var(--blue);margin-bottom:8px;}
.ah-title{font-family:var(--serif);font-size:clamp(48px,6.5vw,88px);font-weight:300;line-height:.95;letter-spacing:-.025em;color:var(--black);}
.ah-title em{font-style:italic;color:var(--blue);}
.ah-body{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--gray);}
.bon-list{display:flex;flex-direction:column;}
.bon-step{
  display:grid;grid-template-columns:180px 1fr auto;gap:48px;align-items:start;
  padding:36px 0;border-bottom:.5px solid rgba(8,8,8,.08);cursor:none;
  transform:translateX(-50px);opacity:0;
  transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .6s ease,padding-left .3s;
}
.bon-step:first-child{border-top:.5px solid rgba(8,8,8,.08);}
.bon-step.vis{transform:translateX(0);opacity:1;}
.bon-step:hover{padding-left:10px;}
.bs-course{font-family:var(--hand);font-size:16px;color:var(--blue);margin-bottom:5px;}
.bs-roman{font-family:var(--serif);font-size:13px;font-style:italic;color:rgba(8,8,8,.3);}
.bs-name{font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:300;letter-spacing:-.015em;margin-bottom:8px;color:var(--black);}
.bs-desc{font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--gray);}
.bs-card{
  width:156px;flex-shrink:0;background:var(--pure);border:.5px solid rgba(8,8,8,.08);
  border-radius:10px;padding:14px;
  transform:rotate(2deg);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.bon-step:hover .bs-card{transform:rotate(0deg) scale(1.02);}
.bsc-lbl{font-family:var(--hand);font-size:13px;color:var(--blue);margin-bottom:8px;}
.bsc-items{list-style:none;display:flex;flex-direction:column;gap:5px;}
.bsc-items li{font-family:var(--sans);font-size:11px;color:var(--gray);display:flex;align-items:center;gap:6px;}
.bsc-items li::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--blue);opacity:.4;flex-shrink:0;}


/* ═══════════════════════════════
   KLOK SECTIE — sticky

   STICKY REGEL:
   - #s-proces: height:500vh, GEEN overflow
   - .proc-pin: position:sticky, top:0, height:100vh, GEEN overflow
   - Binnenste inhoud gewoon normaal gepositioneerd
═══════════════════════════════ */
#s-proces{
  height:500vh;
  position:relative;
  background:var(--black);
  /* GEEN overflow */
}
.proc-pin{
  position:sticky;
  top:0;
  height:100vh;
  display:grid;
  grid-template-columns:1fr 500px;
  /* GEEN overflow */
}
.proc-l{
  padding:80px 48px 80px 80px;
  display:flex;flex-direction:column;justify-content:center;
}
.proc-pre{font-family:var(--hand);font-size:18px;color:var(--blue);margin-bottom:8px;}
.proc-title{font-family:var(--serif);font-size:clamp(44px,5.5vw,76px);font-weight:300;color:white;line-height:.95;letter-spacing:-.025em;margin-bottom:48px;}
.proc-title em{font-style:italic;color:rgba(255,255,255,.3);}
.ps-list{list-style:none;}
.ps{
  display:grid;grid-template-columns:28px 1fr;gap:14px;
  padding:20px 0;border-bottom:.5px solid rgba(255,255,255,.05);
  opacity:.2;transition:opacity .5s,padding-left .3s;cursor:none;
  position:relative;
}
/* Blauwe indicator links van actieve stap */
.ps::before{
  content:'';position:absolute;left:-20px;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--blue);
  transition:height .5s cubic-bezier(.34,1.56,.64,1);border-radius:2px;
}
.ps.on{opacity:1;}
.ps.on::before{height:55%;}
.ps-r{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--blue);padding-top:2px;}
.ps-course{font-family:var(--hand);font-size:14px;color:rgba(255,255,255,.28);margin-bottom:3px;transition:color .4s;}
.ps.on .ps-course{color:var(--blue);}
.ps-name{font-family:var(--serif);font-size:clamp(20px,2.3vw,28px);font-weight:300;color:white;line-height:1.1;}
.ps-desc{font-family:var(--sans);font-size:12px;color:rgba(255,255,255,.28);line-height:1.5;margin-top:4px;}
.proc-r{
  border-left:.5px solid rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  padding:40px;
}
.klok-wrap{width:100%;}
.klok-wrap svg{width:100%;height:auto;}
#klok-min{transform-origin:240px 240px;}
#klok-sec{transform-origin:240px 240px;}


/* ═══════════════════════════════
   RESERVERING
═══════════════════════════════ */
#s-res{background:var(--white);padding:160px 48px 140px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.res-pre{font-family:var(--hand);font-size:20px;color:var(--blue);margin-bottom:14px;}
.res-h{font-family:var(--serif);font-size:clamp(52px,8.5vw,116px);font-weight:300;line-height:.9;letter-spacing:-.03em;color:var(--black);margin-bottom:20px;}
.res-h em{font-style:italic;color:var(--blue);}
.res-sub{font-family:var(--serif);font-size:18px;font-style:italic;color:var(--gray);margin-bottom:80px;max-width:480px;}
.duo{display:flex;gap:24px;align-items:flex-start;perspective:1200px;margin-bottom:52px;will-change:transform,opacity;}
.duo.hidden{opacity:0;transform:translateY(80px);}
.duo.visible{opacity:1;transform:translateY(0);transition:opacity .8s,transform .8s cubic-bezier(.34,1.56,.64,1);}
.tkt{width:300px;border-radius:16px;overflow:hidden;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s;cursor:none;transform-style:preserve-3d;}
.tkt-a{background:var(--blue);box-shadow:0 16px 48px rgba(20,48,237,.22);transform:rotate(-3deg);}
.tkt-b{background:var(--black);box-shadow:0 16px 48px rgba(0,0,0,.18);transform:rotate(2.5deg) translateY(10px);}
.duo:hover .tkt-a{transform:rotate(-7deg) translateY(-16px) rotateY(-5deg);box-shadow:-8px 32px 72px rgba(20,48,237,.38);}
.duo:hover .tkt-b{transform:rotate(6deg) translateY(16px) rotateY(5deg);box-shadow:8px 32px 72px rgba(0,0,0,.35);}
.tkt-top{padding:28px 24px 20px;}
.tkt-lbl{font-family:var(--hand);font-size:14px;color:rgba(255,255,255,.38);margin-bottom:12px;}
.tkt-title{font-family:var(--serif);font-size:30px;font-weight:300;color:white;line-height:1;letter-spacing:-.02em;}
.tkt-title em{font-style:italic;opacity:.5;}
.tkt-fields{padding:0 24px 4px;}
.tkt-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:.5px solid rgba(255,255,255,.07);}
.tkt-row:last-child{border:none;}
.tkt-k{font-family:var(--sans);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.22);}
.tkt-v{font-family:var(--serif);font-size:14px;color:rgba(255,255,255,.8);}
.tkt-bc{border-top:.5px solid rgba(255,255,255,.07);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.bc-b{display:flex;gap:2px;align-items:flex-end;height:28px;}
.bc-b span{display:block;width:2px;background:rgba(255,255,255,.38);border-radius:1px;}
.tkt-code{font-family:var(--sans);font-size:8px;letter-spacing:.08em;color:rgba(255,255,255,.15);}
.tkt-stamp{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-family:var(--hand);font-size:11px;color:rgba(255,255,255,.25);text-align:center;line-height:1.2;transform:rotate(15deg);}
.res-btn{display:inline-flex;align-items:center;gap:14px;padding:20px 52px;background:var(--blue);color:white;font-family:var(--serif);font-size:20px;font-weight:400;font-style:italic;text-decoration:none;border-radius:60px;box-shadow:0 8px 32px rgba(20,48,237,.28);cursor:none;transition:transform .25s,box-shadow .25s,background .25s;}
.res-btn:hover{transform:translateY(-4px);box-shadow:0 20px 56px rgba(20,48,237,.42);background:#0d20b0;}
.res-dot{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--sans);font-size:13px;}

/* ─── FOOTER ─── */
footer{background:var(--blue);padding:72px 48px 40px;}
.ft-grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:start;margin-bottom:72px;}
.ft-logo{font-family:var(--serif);font-size:72px;font-weight:300;color:white;line-height:.9;letter-spacing:-.03em;}
.ft-logo em{font-style:italic;opacity:.35;display:block;}
.ft-tag{margin-top:12px;font-family:var(--hand);font-size:18px;color:rgba(255,255,255,.32);}
.ft-cols{display:flex;gap:56px;}
.ft-ch{font-family:var(--sans);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:16px;}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.ft-links a{font-family:var(--serif);font-size:16px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s;}
.ft-links a:hover{color:white;}
.ft-bot{border-top:.5px solid rgba(255,255,255,.1);padding-top:24px;display:flex;align-items:center;justify-content:space-between;}
.ft-copy{font-family:var(--sans);font-size:11px;color:rgba(255,255,255,.2);}
.ft-sm{animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}