*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-snap-type:y proximity;scroll-behavior:smooth;overflow-x:clip;}
@media(min-width:861px){html{scroll-snap-type:y mandatory;}}
body{background:#f2f4f1;color:#12160f;font-family:'Plus Jakarta Sans',sans-serif;overflow-x:clip;position:relative;}
a{color:inherit;text-decoration:none;}
.accent{color:#3f7a5c;color:oklch(0.55 0.1 165);}
.underline{font-weight:600;border-bottom:2px solid #12160f;padding-bottom:2px;display:inline-block;transition:background .2s ease,color .2s ease;}
.underline:hover{background:#12160f;color:#f2f4f1;}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3f7a5c;color:oklch(0.55 0.1 165);}

/* ambient depth: soft colour fields behind everything */
.bg-blob{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(70px);opacity:.5;}
.bg-blob.b1{width:46vw;height:46vw;background:radial-gradient(circle,#dde8de 0%,rgba(221,232,222,0) 70%);top:-10vw;right:-12vw;}
.bg-blob.b2{width:40vw;height:40vw;background:radial-gradient(circle,#e4ead9 0%,rgba(228,234,217,0) 70%);bottom:-8vw;left:-14vw;}

.watermark{position:absolute;top:52px;left:0;right:0;text-align:center;font-size:clamp(60px,17vw,240px);font-weight:800;letter-spacing:-.04em;color:rgba(18,22,15,.045);white-space:nowrap;pointer-events:none;z-index:0;}

.shape-stage{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:3;}
.shape-icon{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(0.55) rotate(-14deg);opacity:0;transition:opacity .6s cubic-bezier(.3,.8,.3,1), transform .6s cubic-bezier(.3,.8,.3,1);filter:drop-shadow(0 22px 34px rgba(18,22,15,.16));}
.shape-icon.active{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
.shape-icon.leaving{opacity:0;transform:translate(-50%,-50%) scale(0.62) rotate(12deg);transition-duration:.45s;}
.icon-float{animation:none;}
.shape-icon.active .icon-float{animation:float 7s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-14px) rotate(3deg);}}

/* scroll progress + story dots */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:#3f7a5c;background:oklch(0.55 0.1 165);z-index:40;}
.dotnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;}
.dotnav a{display:block;width:9px;height:9px;border-radius:50%;border:2px solid #12160f;background:transparent;transition:background .25s ease,transform .25s ease;position:relative;}
.dotnav a.active{background:#12160f;transform:scale(1.35);}
.dotnav a:hover::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);background:#12160f;color:#f2f4f1;font-size:11px;font-weight:600;letter-spacing:.06em;padding:5px 10px;border-radius:6px;white-space:nowrap;}

nav.site{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:34px 60px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand span{font-family:'Poppins','Plus Jakarta Sans',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em;}
.navlinks{display:flex;gap:30px;font-size:15px;color:#3c443c;font-weight:500;}
.navlinks a{position:relative;}
.navlinks a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#3f7a5c;transition:width .25s ease;}
.navlinks a:hover::after{width:100%;}
.navlinks a[aria-current="page"]{color:#12160f;font-weight:700;}
.navlinks a[aria-current="page"]::after{width:100%;}
.menu-toggle{display:none;background:none;border:none;font-size:20px;}
.langswitch{font-size:13px;font-weight:700;letter-spacing:.06em;border:1px solid rgba(18,22,15,.3);border-radius:999px;padding:4px 11px;margin-left:18px;transition:background .18s ease,color .18s ease;}
.langswitch:hover{background:#12160f;color:#f2f4f1;}

section{position:relative;z-index:2;scroll-snap-align:start;}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);}
.reveal.left{transform:translate(-32px,8px);}
.reveal.right{transform:translate(32px,8px);}
.reveal.in-view{opacity:1;transform:translate(0,0);}

/* word-by-word reveal */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.2em;margin-bottom:-.06em;}
.split .w>span{display:inline-block;transform:translateY(112%);transition:transform .65s cubic-bezier(.22,.9,.3,1);}
.split.in-view .w>span{transform:translateY(0);}

.hero{padding:20px 60px 0;min-height:calc(100svh - 110px);display:flex;flex-direction:column;justify-content:flex-start;scroll-margin-top:200px;}
.hero h1{font-size:clamp(2.4rem,7vw,5.6rem);line-height:.98;font-weight:700;letter-spacing:-.03em;max-width:16ch;margin:22px 0 0;}
.hero p{font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.6;color:#3c443c;max-width:36ch;margin:28px 0 0;}
.scrollhint{margin-top:clamp(30px,6vh,60px);display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8d998f;}
.scrollhint i{display:block;width:2px;height:44px;background:linear-gradient(#12160f,#12160f) no-repeat;background-size:100% 40%;animation:drip 1.8s cubic-bezier(.4,0,.4,1) infinite;}
@keyframes drip{0%{background-position:0 -44px;}55%{background-position:0 0;}100%{background-position:0 46px;}}

.row-wrap{padding:0 60px;min-height:92svh;display:flex;align-items:center;}
.row{display:flex;gap:70px;align-items:center;flex-wrap:wrap;width:100%;}
.row.reverse{flex-direction:row-reverse;}
.row .text{flex:1 1 320px;min-width:0;}
.row .text h2,.row .text h3{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin:16px 0 14px;}
.row .text p{font-size:16.5px;line-height:1.6;color:#3c443c;max-width:40ch;margin:0 0 20px;}

/* layered art blocks (replaces the striped placeholders) */
.imgblock{flex:1 1 320px;min-width:0;border-radius:26px;overflow:hidden;min-height:340px;background:#e9eee9;position:relative;display:flex;align-items:flex-end;padding:22px;color:#8c9a90;font:500 12px ui-monospace,monospace;box-shadow:0 30px 60px -30px rgba(18,22,15,.25);transition:transform .5s cubic-bezier(.22,.9,.3,1);}
.imgblock:hover{transform:perspective(900px) rotateX(1.2deg) rotateY(-1.5deg);}
.imgblock .layer{position:absolute;inset:5%;pointer-events:none;will-change:transform;}
.imgblock .layer svg{width:100%;height:100%;}
.imgblock .caption{position:relative;z-index:2;}

.list-wrap{padding:110px 60px;}
.list-wrap .intro{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:600;letter-spacing:-.015em;max-width:20ch;margin-bottom:36px;}
.list-row{display:flex;align-items:center;justify-content:space-between;padding:22px 14px;border-bottom:1px solid rgba(18,22,15,.12);gap:24px;position:relative;overflow:hidden;}
.list-row::before{content:'';position:absolute;inset:0;background:#e7ede7;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.9,.3,1);z-index:0;}
.list-row:hover::before{transform:scaleX(1);}
.list-row>*{position:relative;z-index:1;}
.list-row .name{font-size:clamp(1.1rem,2.4vw,1.4rem);font-weight:600;letter-spacing:-.015em;transition:transform .35s cubic-bezier(.22,.9,.3,1);}
.list-row:hover .name{transform:translateX(12px);}
.list-row .desc{font-size:14px;color:#66726c;max-width:36ch;text-align:right;}
.list-row .idx{font-size:14px;color:#66726c;font-weight:600;flex-shrink:0;}

.statement{padding:0 60px;min-height:80svh;display:flex;align-items:center;}
.statement p{font-size:clamp(1.7rem,4.6vw,3.25rem);line-height:1.16;font-weight:700;letter-spacing:-.02em;max-width:22ch;}

.location{padding:150px 0 0;position:relative;}
.location .imgbleed{margin-left:60px;border-radius:26px 0 0 26px;overflow:hidden;min-height:380px;background:#e9eee9;position:relative;box-shadow:0 30px 60px -30px rgba(18,22,15,.25);}
.location .imgbleed .layer{position:absolute;inset:5%;pointer-events:none;will-change:transform;}
.location .imgbleed .layer svg{width:100%;height:100%;}
.location .overlay{position:relative;margin-top:-90px;max-width:460px;background:#f2f4f1;padding:26px 26px 0 60px;border-radius:0 26px 0 0;}
.portrait{position:absolute;right:18px;top:-72px;width:132px;height:132px;border-radius:50%;border:4px solid #12160f;overflow:hidden;background:#dfe6e0;box-shadow:0 20px 38px rgba(18,22,15,.22);}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.location h2,.location h3{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.02em;margin:16px 0 14px;}
.location p{font-size:15.5px;line-height:1.6;color:#3c443c;}

.cta{padding:0 60px;min-height:82svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.cta h2{font-size:clamp(2rem,5.6vw,3.9rem);font-weight:700;letter-spacing:-.03em;margin:0 0 20px;}
.cta p{font-size:17px;color:#3c443c;margin:0 0 28px;}

footer{position:relative;z-index:2;scroll-snap-align:end;padding:0 60px 56px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;color:#3c443c;border-top:1px solid rgba(18,22,15,.12);padding-top:44px;font-size:14px;line-height:2;}
footer strong{color:#12160f;font-weight:600;}

.sbtn{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.01em;padding:11px 18px;border:1px solid #12160f;border-radius:6px;background:transparent;color:#12160f;transition:background .18s ease,color .18s ease;}
.sbtn svg{width:17px;height:17px;}
.sbtn:hover{background:#12160f;color:#f2f4f1;}
.tlink{color:#3f7a5c;color:oklch(0.55 0.1 165);border-bottom:1px solid rgba(63,122,92,.45);font-weight:600;transition:background .2s ease;}
.tlink:hover{background:rgba(63,122,92,.12);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .shape-icon,.reveal,.split .w>span,.list-row::before,.imgblock{transition:none !important;animation:none !important;}
  .shape-icon.active .icon-float,.scrollhint i{animation:none !important;}
  .reveal,.split .w>span{opacity:1 !important;transform:none !important;}
}

@media(max-width:860px){
  .navlinks{display:none;}
  .menu-toggle{display:block;}
  .dotnav{right:10px;gap:11px;}
  .dotnav a{width:7px;height:7px;border-width:1.5px;}
  .dotnav a:hover::after{display:none;}
  nav.site,.hero,.row-wrap,.list-wrap,.statement,.cta,footer{padding-left:26px;padding-right:26px;}
  .row,.row.reverse{flex-direction:column;}
  .row-wrap{min-height:0;padding-top:90px;padding-bottom:20px;}
  .hero{min-height:calc(96svh - 100px);}
  .statement,.cta{min-height:0;padding-top:130px;padding-bottom:130px;}
  .list-row{flex-wrap:wrap;}
  .list-row .desc{text-align:left;max-width:100%;}
  .location .imgbleed{margin-left:26px;}
  .location .overlay{padding-left:26px;margin-top:-60px;}
  footer{grid-template-columns:1fr;}
  .shape-stage{z-index:3;}
  .shape-icon svg{width:86px !important;height:86px !important;}
  .shape-icon.active{opacity:.72;}
}

@media(max-width:860px){
  nav.site.open{z-index:70;}
  nav.site.open .navlinks{display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% - 4px);left:16px;right:16px;background:#f2f4f1;border:1px solid rgba(18,22,15,.12);border-radius:14px;padding:6px 18px;z-index:70;box-shadow:0 24px 50px -24px rgba(18,22,15,.55);}
  nav.site.open .navlinks a{padding:13px 2px;font-size:16px;border-bottom:1px solid rgba(18,22,15,.08);}
  nav.site.open .navlinks a:last-child{border-bottom:none;}
  nav.site.open .navlinks a::after{display:none;}
  .menu-toggle[aria-expanded="true"]{color:#3f7a5c;}
}

/* Gedeelde artikel-/kennisbank-hulpklassen (wet-dba, ats-advies, kennisbank, salaris, reviews) */
.note-p{max-width:62ch;font-size:16.5px;line-height:1.62;color:#3c443c;margin-top:8px;}
.note-sources{max-width:64ch;font-size:13.5px;line-height:1.7;color:#66726c;margin:22px 0 0;}
.list-note{max-width:60ch;font-size:16.5px;line-height:1.6;color:#3c443c;margin:-14px 0 30px;}
.list-note-after{max-width:60ch;font-size:14px;line-height:1.7;color:#66726c;margin:26px 0 0;}
.cta-extra{margin-top:26px;font-size:14px;}
.note{max-width:60ch;margin:34px 0 0;font-size:14px;line-height:1.7;color:#66726c;}
.note strong{color:#3c443c;}
.foot-col a{color:inherit;border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease;cursor:pointer;}
.foot-col a:hover{color:#12160f;border-bottom-color:rgba(18,22,15,.4);}