/* ------------------------------------------------------------------
   Vactik subpagina-stijl (koppeling.css)
   Hoort bij de contentpagina-template. Los van style.css gehouden,
   omdat home en subpagina klassenamen delen met andere regels.
   Laad dit bestand ALLEEN op de subpagina's.
   ------------------------------------------------------------------ */

:root{
  --bg-white:#ffffff;
  --bg-black:#050505;
  --text-black:#0a0a0a;
  --text-white:#f5f5f5;
  --grey-1:#333333;
  --grey-2:#555555;
  --grey-3:#666666;
  --grey-4:#888888;
  --grey-5:#a3a3a3;
  --wrap:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body,html{margin:0;padding:0;font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg-white);color:var(--text-black);overflow-x:clip;}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,40px);}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;}
:focus-visible{outline:2px solid var(--text-black);outline-offset:3px;}

/* ---- SITE CHROME: logo + hamburger + diagonaal menu (uit v2026) ---- */
.brand-logo{position:fixed;top:20px;left:20px;z-index:200;width:64px;height:auto;mix-blend-mode:difference;}
.brand-logo__mark{width:100%;height:auto;display:block;filter:brightness(0) invert(1);}
.menu-toggle{position:fixed;top:32px;right:32px;z-index:200;width:40px;height:40px;background:none;border:none;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;mix-blend-mode:difference;color:#fff;transition:transform .3s ease;}
.menu-toggle:hover{transform:scale(1.1);}
.menu-line{width:28px;height:2px;background:currentColor;transition:transform .4s ease,opacity .3s ease;}
.menu-toggle.active .menu-line:nth-child(1){transform:translateY(4px) rotate(45deg);}
.menu-toggle.active .menu-line:nth-child(2){transform:translateY(-4px) rotate(-45deg);}

.menu-overlay{position:fixed;inset:0;z-index:150;background:var(--bg-black);display:flex;align-items:center;justify-content:center;pointer-events:none;clip-path:polygon(0 0,0 0,0 0,0 0);transition:clip-path .7s cubic-bezier(.77,0,.175,1);}
.menu-overlay.open{clip-path:polygon(0 0,200% 0,0 200%,0 0);pointer-events:auto;}
.menu-links{display:flex;flex-direction:column;gap:20px;list-style:none;padding:0;margin:0;width:80vw;max-width:500px;}
.menu-links li{width:100%;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:16px;overflow:hidden;}
.menu-links a{color:var(--text-white);font-size:clamp(1.4rem,4vw,2.2rem);font-weight:400;letter-spacing:-.5px;display:flex;align-items:center;justify-content:space-between;width:100%;opacity:0;filter:blur(12px);transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),color .3s ease,padding-left .4s cubic-bezier(.16,1,.3,1);}
.menu-index{font-family:monospace;font-size:.8rem;color:var(--grey-3);letter-spacing:1px;transition:color .3s ease,transform .3s ease;}
.menu-links a:hover{color:#fff;padding-left:15px;}
.menu-links a:hover .menu-index{color:#fff;transform:translateX(-5px);}
.menu-overlay.open .menu-links a{opacity:1;filter:blur(0);transform:translateY(0);}
.menu-overlay.open .menu-links li:nth-child(1) a{transition-delay:.35s;}
.menu-overlay.open .menu-links li:nth-child(2) a{transition-delay:.45s;}
.menu-overlay.open .menu-links li:nth-child(3) a{transition-delay:.55s;}
.menu-overlay.open .menu-links li:nth-child(4) a{transition-delay:.65s;}

/* ---- KNOPPEN (pill, zoals .btn-white in v2026) ---- */
.btn{display:inline-block;padding:16px 36px;border-radius:40px;font-weight:700;font-size:1.05rem;transition:transform .4s cubic-bezier(.16,1,.3,1),background-color .3s ease,box-shadow .4s ease;}
.btn-dark{background:var(--bg-black);color:var(--text-white);}
.btn-dark:hover{transform:scale(1.06) translateY(-3px);box-shadow:0 15px 30px rgba(0,0,0,.2);}
.btn-white{background:var(--text-white);color:var(--text-black);}
.btn-white:hover{transform:scale(1.06) translateY(-3px);background:#fff;box-shadow:0 15px 30px rgba(255,255,255,.25);}
.btn-outline{background:transparent;color:var(--text-black);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);}
.btn-outline:hover{box-shadow:inset 0 0 0 1px var(--text-black);transform:translateY(-2px);}

/* ---- LABEL / EYEBROW met monospace index (het v2026-signatuur) ---- */
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:3px;font-weight:700;color:var(--grey-4);}
.sec-label{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:20px;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:var(--grey-4);}
.sec-label .idx{font-family:monospace;letter-spacing:0;color:#444;}
.on-dark .sec-label{border-color:rgba(255,255,255,.12);color:var(--grey-4);}
.on-dark .sec-label .idx{color:var(--grey-3);}

/* ---- BREADCRUMB (subpagina) ---- */
.crumb{animation:smokeReveal 1s ease both;}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0 0 30px;font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--grey-4);}
.crumb li::after{content:"/";margin-left:.55rem;color:rgba(255,255,255,.25);}
.crumb li:last-child::after{content:"";}
.crumb a:hover{color:#fff;}

/* ---- HERO ---- */
/* --- HERO: donker, interactieve rook (self-contained, geen GSAP/WebGL-engine nodig) --- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-black);color:var(--text-white);min-height:clamp(560px,88vh,880px);display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,12vh,150px) 0 clamp(4rem,8vw,6rem);}
.hero-smoke{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero-inner{position:relative;max-width:var(--wrap);margin:0 auto;width:100%;padding-inline:clamp(20px,5vw,40px);}
.hero .tag{margin-bottom:25px;animation:smokeReveal 1.3s cubic-bezier(.16,1,.3,1) both;}
.hero h1{font-size:clamp(3rem,9vw,6rem);font-weight:800;letter-spacing:-2px;line-height:.95;margin:0 0 25px 0;color:#ffffff;mix-blend-mode:difference;animation:smokeReveal 1.6s cubic-bezier(.16,1,.3,1) both;}
.hero .lede{font-size:clamp(1.05rem,3vw,1.4rem);color:#b3b3b3;max-width:630px;font-weight:600;line-height:1.6;margin:0 0 36px;animation:smokeReveal 2s cubic-bezier(.16,1,.3,1) both;}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;mix-blend-mode:difference;animation:smokeReveal 2.3s cubic-bezier(.16,1,.3,1) both;}
@keyframes smokeReveal{0%{opacity:0;filter:blur(16px);transform:translateY(20px) scale(.97);}100%{opacity:1;filter:blur(0);transform:none;}}
.btn-outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}
.btn-outline-light:hover{box-shadow:inset 0 0 0 1px #fff;transform:translateY(-2px);}
.scroll-indicator{position:absolute;bottom:26px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:.7rem;text-transform:uppercase;letter-spacing:3px;color:var(--grey-4);z-index:2;}
.scroll-line{width:1px;height:42px;background:rgba(255,255,255,.15);position:relative;overflow:hidden;}
.scroll-line__pulse{position:absolute;inset:0;background:#fff;animation:scrollPulse 2.2s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes scrollPulse{0%{transform:translateY(-100%);}50%{transform:translateY(0);}100%{transform:translateY(100%);}}
/* --- Voortgangsbalk bovenaan --- */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:210;pointer-events:none;mix-blend-mode:difference;opacity:1;transition:opacity .35s ease;}
.scroll-progress.is-hidden{opacity:0;}
.scroll-progress__bar{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;will-change:transform;}

/* ---- SECTIE ---- */
.section{padding:clamp(3.5rem,8vw,6rem) 0;}
.section h2{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-1px;margin:28px 0 0;}
.section .intro{font-size:1.15rem;color:var(--grey-2);line-height:1.7;max-width:640px;margin:22px 0 0;}
.on-dark{background:var(--bg-black);color:var(--text-white);}
.on-dark h2{color:var(--text-white);}

/* ---- KAARTEN ---- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px;}
@media(max-width:720px){.cards{grid-template-columns:1fr;}}
.card{background:var(--bg-white);border-radius:24px;padding:clamp(1.8rem,3vw,2.4rem);box-shadow:0 10px 30px rgba(0,0,0,.06);}
.card .card-header{display:flex;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:18px;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--grey-4);}
.card .card-header .idx{font-family:monospace;letter-spacing:0;color:#444;}
.card h3{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;letter-spacing:-1px;margin:22px 0 14px;}
.card p{font-size:1.05rem;color:var(--grey-2);line-height:1.6;margin:0;}
.card--pref{background:var(--bg-black);color:var(--text-white);}
.card--pref .card-header{border-color:rgba(255,255,255,.15);color:var(--grey-5);}
.card--pref .card-header .idx{color:var(--grey-3);}
.card--pref p{color:var(--grey-5);}

/* ---- ZWARTE STATEMENT-BAND (echo van "Woorden zijn makkelijk") ---- */
.statement{padding:clamp(4rem,9vw,7rem) 0;}
.statement h2{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:800;letter-spacing:-1.5px;line-height:1.02;max-width:16ch;margin:26px 0 0;}
.statement h2 em{font-style:normal;color:var(--grey-2);}

/* ---- PROCES (echte volgorde) ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.steps{grid-template-columns:1fr;}}
.step{border-top:1px solid rgba(0,0,0,.15);padding-top:18px;}
.step .n{font-family:monospace;font-size:1.1rem;color:#444;}
.step h3{font-size:1.2rem;font-weight:700;letter-spacing:-.5px;margin:12px 0 8px;}
.step p{margin:0;color:var(--grey-2);font-size:.98rem;line-height:1.55;}

/* ---- CASES (donkere kaarten, zoals v2026) ---- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
@media(max-width:900px){.cases{grid-template-columns:1fr;}}
.case-card{position:relative;border-radius:20px;overflow:hidden;background:#1a1a1a;min-height:300px;display:flex;box-shadow:0 10px 30px rgba(0,0,0,.1);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;}
.case-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(0,0,0,.25);}
.case-overlay{position:relative;z-index:2;margin-top:auto;padding:28px;width:100%;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.35),transparent);color:var(--text-white);}
.case-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--grey-5);}
.case-overlay h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.5px;margin:10px 0 0;}
.case-go{margin-top:16px;font-size:.85rem;color:var(--grey-5);display:inline-flex;gap:.4em;align-items:center;}
.case-card:hover .case-go{color:#fff;}
.case-card.cta-card{background:var(--bg-black);border:1px solid rgba(255,255,255,.1);align-items:center;justify-content:center;text-align:center;}
.cta-card .inner{padding:40px;display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--text-white);}
.cta-card h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-1px;margin:0;}
.cta-card p{color:var(--grey-5);margin:0;max-width:34ch;}

/* ---- FAQ ---- */
/* ---------- FAQ ---------- */
.faq{margin-top:44px;border-top:1px solid rgba(0,0,0,.12);}
.faq details{border-bottom:1px solid rgba(0,0,0,.12);}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:2rem;font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:-.4px;transition:color .3s ease,padding-left .4s cubic-bezier(.16,1,.3,1);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{padding-left:10px;}
.faq details[open] summary{color:var(--text-black);}
/* ronde plus die naar een min draait */
.faq .pm{font-size:0;flex:0 0 auto;width:38px;height:38px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:background-color .35s ease,box-shadow .35s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:1.5px;background:var(--text-black);transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .35s ease;}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq summary:hover .pm{box-shadow:inset 0 0 0 1px var(--text-black);}
.faq details[open] .pm{background:var(--text-black);box-shadow:inset 0 0 0 1px var(--text-black);transform:rotate(180deg);}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:var(--bg-white);}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0deg);}
.faq details p{margin:0;padding:0 0 28px;color:var(--grey-2);line-height:1.7;max-width:64ch;overflow:hidden;}

/* ---- RELATED ATS ---- */
.related{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;}
.chip{border-radius:40px;padding:12px 22px;font-size:.95rem;font-weight:600;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:box-shadow .25s ease,transform .25s ease;}
.chip:hover{box-shadow:inset 0 0 0 1px var(--text-black);transform:translateY(-2px);}

/* ================= CONTACT + FOOTER (identiek aan one-pager) ================= */
.site-footer{background:var(--bg-black);color:var(--text-white);padding:140px 40px 40px;border-top:1px solid rgba(255,255,255,.08);}
.contact-lead{max-width:1200px;margin:0 auto 120px;}
.contact-eyebrow{display:flex;align-items:baseline;gap:14px;font-size:.75rem;text-transform:uppercase;letter-spacing:3px;color:var(--grey-3);font-weight:700;margin-bottom:40px;}
.contact-eyebrow__index{font-family:monospace;letter-spacing:0;color:#444;}
.contact-statement{font-size:clamp(2.75rem,8.5vw,7rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin:0 0 40px;color:var(--text-white);}
.contact-statement em{font-style:normal;color:var(--grey-2);}
.contact-lead>p{color:var(--grey-5);margin:0 0 40px;font-size:1.1rem;max-width:44ch;}
.contact-mail{display:inline-flex;align-items:center;gap:.4em;position:relative;color:var(--text-white);font-size:clamp(1.35rem,3.4vw,2.75rem);font-weight:600;letter-spacing:-.02em;padding-bottom:.35em;}
.contact-mail::before,.contact-mail::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;}
.contact-mail::before{background:rgba(255,255,255,.18);}
.contact-mail::after{background:var(--text-white);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.contact-mail:hover::after,.contact-mail:focus-visible::after{transform:scaleX(1);}
.contact-mail__arrow{display:inline-block;font-size:.7em;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.contact-mail:hover .contact-mail__arrow{transform:translate(.25em,-.25em);}
.contact-meta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:45px;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey-4);}
.contact-meta a{color:var(--grey-4);transition:color .3s ease;}
.contact-meta a:hover{color:var(--text-white);}
.contact-meta__sep{width:28px;height:1px;background:rgba(255,255,255,.18);}
.footer-container{max-width:1200px;margin:0 auto;padding-top:60px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-brand h3{font-size:1.5rem;font-weight:800;margin:0 0 15px;letter-spacing:-.5px;}
.footer-brand p{color:var(--grey-4);font-size:.85rem;line-height:1.6;margin:0;max-width:320px;}
.footer-column h4{font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--grey-3);margin:0 0 20px;font-weight:700;}
.footer-column ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.footer-column a{color:var(--grey-5);font-size:.85rem;transition:color .3s ease,padding-left .3s ease;display:inline-block;}
.footer-column a:hover{color:var(--text-white);padding-left:6px;}
.footer-bottom{max-width:1200px;margin:60px auto 0;padding-top:30px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--grey-2);letter-spacing:.5px;}

/* ---- REVEAL ---- */
/* .reveal blijft als haak in de HTML staan, maar verbergt niets meer:
   GSAP zet de begintoestand in JS, zodat er zonder JS niets onzichtbaar blijft. */

/* Woord-onthulling (gsplitst door koppeling.js) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.09em;margin-bottom:-.09em;}
.wi{display:inline-block;will-change:transform;}

/* Lijn onder een sectielabel, tekent zich tijdens het scrollen */
.sec-label{position:relative;}
.sec-line{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;opacity:.45;transform-origin:0 50%;}

/* Processtap: het streepje bovenaan groeit mee */
.step{--line:1;}
.step{border-top:none;position:relative;}
.step::before{content:"";position:absolute;top:0;left:0;height:1px;width:100%;background:rgba(0,0,0,.15);transform:scaleX(var(--line));transform-origin:0 50%;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none;}
  html{scroll-behavior:auto;}
  .menu-links a{opacity:1;filter:none;transform:none;}
  .hero .tag,.hero h1,.hero .lede,.hero .cta,.crumb{animation:none;}
  .scroll-line__pulse{animation:none;}
}

@media(max-width:768px){
  .brand-logo{top:10px;left:10px;width:48px;}
  .menu-toggle{top:20px;right:20px;}
  .site-footer{padding:90px 20px 30px;}
  .contact-lead{margin-bottom:80px;}
  .contact-meta__sep{display:none;}
  .footer-container{grid-template-columns:1fr;gap:35px;padding-top:45px;}
  .footer-bottom{flex-direction:column;gap:15px;text-align:center;}
}


/* --- Footer: inklapbare menu's op mobiel (Navigatie + ATS-koppelingen) --- */
.footer-acc__head{cursor:default;}
@media (max-width:768px){
  .footer-acc.acc-ready{border-bottom:1px solid rgba(255,255,255,.08);}
  .footer-acc.acc-ready>.footer-acc__head{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px 0;}
  .footer-acc.acc-ready>.footer-acc__head::after{content:'+';font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;font-weight:400;color:rgba(255,255,255,.5);}
  .footer-acc.acc-ready.is-open>.footer-acc__head::after{content:'\2013';}
  .footer-acc.acc-ready>ul{overflow:hidden;transition:height .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
  .footer-acc.acc-ready:not(.is-open)>ul{height:0;opacity:0;}
  .footer-acc.acc-ready.is-open>ul{padding-bottom:12px;}
}
@media (prefers-reduced-motion:reduce){.footer-acc.acc-ready>ul{transition:none;}}