/* ============================================================
   CloudDock v6 — "De ankerlijn"
   Eén verhaal, één vormtaal: gesneden staal (schuine naden,
   afgeschuinde hoeken) + een ankerlijn die meetekent met scroll.
   Licht (default) en donker (body.donker). Progressive enhancement:
   zonder JS/GSAP is alles zichtbaar en leesbaar.
   ============================================================ */

@font-face{font-family:'Biground';src:url('./Biground.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Gasket';src:url('./Gasket.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'GasketOutline';src:url('./GasketOutline.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --bg:#f4f2ed;
  --panel:#ffffff;
  --ink:#211d1b;
  --body:#4d4743;
  --muted:#837c75;
  --line:#e2ddd3;
  --aqua:#8ec1bf;          /* merk-turquoise licht */
  --teal:#2f9a91;          /* vlak-turquoise */
  --teal-deep:#20736c;
  --wine:#6c3c3e;          /* merk-roodbruin */
  --wine-deep:#57302f;
  --display:'Cabinet Grotesk','Biground',ui-sans-serif,system-ui,sans-serif;
  --payoff:'JetBrains Mono','Gasket',ui-monospace,monospace;
  --text:'Satoshi','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --cut:26px;              /* chamfer-maat */
  --seam:3.4vw;            /* schuine naad */
  --shadow:0 18px 50px -22px rgba(33,29,27,.28);
  --plane-ink:#ffffff;     /* tekst op kleurvlakken */
}
body.donker{
  --bg:#131416;
  --panel:#1b1d20;
  --ink:#f1eeea;
  --body:#c6c1bb;
  --muted:#8b867f;
  --line:#2a2d31;
  --teal:#1d635c;
  --teal-deep:#154c47;
  --wine:#5f3537;
  --wine-deep:#4a2a2c;
  --shadow:0 20px 60px -24px rgba(0,0,0,.7);
}

*{margin:0;padding:0;box-sizing:border-box}
/* let op: géén overflow-x:hidden op html/body — dat breekt ScrollTrigger-pinnen; clip klemt zonder scroll-container te maken */
html{scroll-behavior:smooth}
body{font-family:var(--text);background:var(--bg);color:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;color:var(--ink);line-height:1.06;letter-spacing:-.025em}
main{overflow-x:clip;width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
::selection{background:var(--aqua);color:#16211f}

/* ---------- vormtaal: gesneden hoeken ---------- */
.cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.cut-tl{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.cut-sm{--cut:14px}

/* schuine kleurvlak-secties */
.plane{position:relative;padding:calc(var(--seam) + clamp(74px,8vw,120px)) 0 calc(var(--seam) + clamp(74px,8vw,120px));color:var(--plane-ink)}
.plane--teal{background:linear-gradient(160deg,var(--teal),var(--teal-deep));clip-path:polygon(0 var(--seam),100% 0,100% 100%,0 100%)}
.plane--teal.plane--closed{clip-path:polygon(0 var(--seam),100% 0,100% calc(100% - var(--seam)),0 100%)}
.plane--wine{background:linear-gradient(165deg,var(--wine),var(--wine-deep));clip-path:polygon(0 0,100% var(--seam),100% 100%,0 calc(100% - var(--seam)))}
.plane h2{color:#fff}
.plane .lead{color:rgba(255,255,255,.86)}
body.donker .plane--teal{background:linear-gradient(160deg,#1d635c,#123f3a)}
body.donker .plane--wine{background:linear-gradient(165deg,#5f3537,#3c2325)}

/* stempel */
.stamp{display:inline-block;font-family:var(--payoff);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--wine);border:2px dashed var(--wine);padding:10px 18px;transform:rotate(6deg);background:var(--bg)}
body.donker .stamp{color:var(--aqua);border-color:var(--aqua);background:rgba(19,20,22,.85)}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--payoff);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;color:var(--teal);margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--teal);transform:skewX(-24deg)}
.plane .eyebrow{color:rgba(255,255,255,.85)}
.plane .eyebrow::before{background:rgba(255,255,255,.7)}
body.donker .eyebrow{color:var(--aqua)}
body.donker .eyebrow::before{background:var(--aqua)}

/* ---------- ankerlijn (vaste spine links) ---------- */
.spine{position:fixed;left:30px;top:0;bottom:0;width:2px;background:var(--line);z-index:60;pointer-events:none}
.spine i{position:absolute;left:0;top:0;width:2px;height:0;background:linear-gradient(180deg,var(--aqua),var(--teal));transition:height .1s linear}
.spine .anker{position:absolute;left:50%;transform:translate(-50%,-50%);top:0;width:30px;height:30px;color:var(--teal);background:var(--bg);border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:top .1s linear}
.spine .anker svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
body.donker .spine i{box-shadow:0 0 18px rgba(142,193,191,.55)}
body.donker .spine .anker{color:var(--aqua);box-shadow:0 0 22px rgba(142,193,191,.4)}
@media(max-width:1180px){.spine{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
body.scrolled .nav{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-inner{max-width:1240px;margin:0 auto;padding:16px clamp(20px,4vw,44px);display:flex;align-items:center;gap:34px}
.brand img{height:44px;width:auto}
.nav-links{display:flex;gap:22px;font-size:.95rem;color:var(--ink);font-weight:600}
.nav-links a{white-space:nowrap}
.nav-phone{white-space:nowrap}
.nav-links a{opacity:.75;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:.95rem}
.nav-phone svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2}
.menu-toggle{display:none;background:none;border:0;cursor:pointer}
.menu-toggle svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:2}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--text);font-weight:700;font-size:1rem;padding:15px 26px;cursor:pointer;border:2px solid transparent;transition:transform .18s,background .2s,border-color .2s,box-shadow .2s;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--wine);color:#fff}
.btn-primary:hover{background:var(--wine-deep)}
body.donker .btn-primary{background:var(--aqua);color:#12211f}
body.donker .btn-primary:hover{background:#a7d2d0}
.btn-white{background:#fff;color:#1d1a18}
.btn-white:hover{background:#f0ece4}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-text{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--teal);border-bottom:2px solid transparent;transition:border-color .2s}
.btn-text:hover{border-color:var(--teal)}
.btn-text svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}
body.donker .btn-text{color:var(--aqua)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(130px,16vh,180px) 0 clamp(60px,7vw,100px)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,5vw,72px);align-items:center}
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(2.6rem,5.5vw,4.7rem);margin-bottom:26px}
.hero h1 .w{display:inline-block}
.hero h1 .acc{color:var(--wine)}
body.donker .hero h1 .acc{color:var(--aqua)}
.hero .lead{font-size:1.2rem;max-width:520px;margin-bottom:36px}
.hero-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:40px}
.hero-usps{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 30px;color:var(--muted);font-size:.92rem}
.hero-usps span{display:inline-flex;align-items:center;gap:8px}
.hero-usps svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:2.6}
body.donker .hero-usps svg{stroke:var(--aqua)}

/* hero-collage */
.collage{position:relative;min-height:520px}
.collage .ph-main{position:absolute;inset:0 0 60px 70px;box-shadow:var(--shadow)}
.collage .ph-main img{width:100%;height:100%;object-fit:cover}
.collage .ph-sub{position:absolute;left:0;bottom:0;width:46%;aspect-ratio:1/1.05;box-shadow:var(--shadow);border:6px solid var(--bg)}
.collage .ph-sub img{width:100%;height:100%;object-fit:cover}
.collage .stamp{position:absolute;top:2px;right:8px;z-index:3}
.collage .kaart{position:absolute;right:-8px;bottom:104px;z-index:3;background:var(--panel);box-shadow:var(--shadow);padding:14px 20px;display:flex;align-items:center;gap:12px;border:1px solid var(--line)}
.collage .kaart .cijfer{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--ink);line-height:1}
.collage .kaart .lbl{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.collage .kaart svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:2}
body.donker .collage .ph-main img,body.donker .collage .ph-sub img{filter:saturate(.82) contrast(1.05)}
body.donker .collage .ph-sub{border-color:var(--bg)}

/* ---------- scheve merkband / marquee ---------- */
.band{position:relative;z-index:5;transform:rotate(-1.3deg);width:104vw;margin:26px 0 0 -2vw;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;box-shadow:var(--shadow);overflow:hidden}
body.donker .band{background:#efece6;border-color:transparent}
/* twee identieke sets met eigen naloop-ruimte: -50% sluit exact aan op het begin (geen witte ruimte bij de herstart) */
.band .track{display:flex;align-items:center;width:max-content;animation:band-x 85s linear infinite}
.band .set{display:flex;align-items:center;gap:46px;padding-right:46px;flex-shrink:0}
.band:hover .track{animation-play-state:paused}
.band img{height:64px;width:auto;flex-shrink:0}
@media(max-width:640px){.band img{height:48px}.band .set{gap:32px;padding-right:32px}}
@keyframes band-x{to{transform:translateX(-50%)}}

/* ---------- werkdag (verhaal-tijdlijn) ---------- */
.werkdag{position:relative;padding:clamp(90px,11vw,150px) 0 clamp(90px,10vw,140px)}
.werkdag .kop{max-width:680px;margin-bottom:clamp(50px,6vw,80px)}
.werkdag .kop h2{font-size:clamp(2.1rem,4.2vw,3.3rem)}
.tijdlijn{position:relative;max-width:860px;margin:0 auto}
.tijdlijn .lijn{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.tijdlijn .lijn i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--aqua),var(--wine));transform-origin:top;transform:scaleY(0)}
html.nogsap .tijdlijn .lijn i{transform:none}
body.donker .tijdlijn .lijn i{box-shadow:0 0 16px rgba(142,193,191,.4)}
.moment{position:relative;width:calc(50% - 44px);padding:6px 0 40px}
.moment:nth-child(odd){margin-left:auto;text-align:left}
.moment:nth-child(even){text-align:right}
.moment .tijd{font-family:var(--payoff);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--wine);letter-spacing:.04em;display:block;margin-bottom:6px}
body.donker .moment .tijd{color:var(--aqua)}
.moment .waar{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.moment p{font-size:1.12rem;color:var(--ink);font-weight:600;line-height:1.5;max-width:340px}
.moment:nth-child(even) p{margin-left:auto}
.moment::before{content:"";position:absolute;top:16px;width:12px;height:12px;background:var(--bg);border:2px solid var(--wine);transform:rotate(45deg)}
.moment:nth-child(odd)::before{left:-51px}
.moment:nth-child(even)::before{right:-51px}
body.donker .moment::before{border-color:var(--aqua)}
/* herkenning-bullets: pijn uit de dagelijkse praktijk + het CloudDock-antwoord */
.ervaringen-kop{text-align:center;margin-top:clamp(56px,7vw,90px)}
.ervaringen-kop h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.ervaringen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(28px,3vw,40px)}
.ervaringen.duo{grid-template-columns:repeat(2,1fr);max-width:920px;margin:clamp(30px,4vw,46px) auto}
@media(max-width:640px){.ervaringen.duo{grid-template-columns:1fr}}
.ervaring{background:var(--panel);border:1px solid var(--line);padding:22px 22px 18px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);display:flex;flex-direction:column}
.ervaring b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.02rem;line-height:1.3;margin-bottom:8px}
.ervaring p{font-size:.88rem;line-height:1.55;color:var(--muted);margin-bottom:14px}
.ervaring .wij{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;font-weight:600;color:var(--teal);border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.ervaring .wij svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;flex-shrink:0;margin-top:3px}
@media(max-width:1000px){.ervaringen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ervaringen{grid-template-columns:1fr}}

.werkdag .slot{text-align:center;max-width:560px;margin:clamp(40px,5vw,64px) auto 0}
.werkdag .slot p{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;color:var(--ink);line-height:1.45}
.werkdag .slot .anders{color:var(--teal)}
body.donker .werkdag .slot .anders{color:var(--aqua)}

/* ---------- omslag (teal vlak) ---------- */
.omslag .kop{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.omslag h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.beloftes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:44px}
.beloftes.drie{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.beloftes.drie{grid-template-columns:1fr}}
.belofte{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:26px 28px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.belofte .nr{font-family:var(--payoff);font-size:.85rem;letter-spacing:.14em;color:rgba(255,255,255,.65);display:block;margin-bottom:10px}
.belofte p{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.45rem);color:#fff;line-height:1.35}
.belofte span.sub{display:block;font-weight:400;font-family:var(--text);font-size:.95rem;color:rgba(255,255,255,.78);margin-top:8px}

/* ---------- payoff scrub ---------- */
.payoff-blok{padding:clamp(90px,12vw,160px) 0;text-align:center}
.payoff-blok .groot{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);max-width:900px;margin:0 auto}
.payoff-blok .groot .w{opacity:.14}
html.nogsap .payoff-blok .groot .w{opacity:1}
.payoff-blok .groot .accw{color:var(--wine)}
body.donker .payoff-blok .groot .accw{color:var(--aqua)}
.payoff-blok .stamp{margin-top:38px}

/* ---------- AI (wijnrood vlak) ---------- */
.ai-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:center}
.ai-grid>*{min-width:0}
.ai-grid h2{font-size:clamp(2.1rem,4vw,3.2rem);margin-bottom:20px}
.ai-punten{margin:30px 0 34px;display:grid;gap:16px}
.ai-punt{display:flex;gap:16px;align-items:flex-start}
.ai-punt .ic{width:44px;height:44px;flex-shrink:0;background:rgba(255,255,255,.14);display:grid;place-items:center;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.ai-punt .ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2}
.ai-punt b{display:block;color:#fff;font-size:1.05rem;margin-bottom:3px}
.ai-punt span{color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.5}
.chat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);padding:28px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.chat .regel{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.chat .av{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;font-weight:800;font-size:.75rem;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.chat .regel.bot .av{background:#fff;color:var(--wine)}
.chat .regel.jij .av{background:rgba(255,255,255,.2);color:#fff}
.chat .bubbel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);padding:12px 16px;font-size:.95rem;color:rgba(255,255,255,.94);line-height:1.55}
.chat .meter-rij{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:14px;color:#fff;font-weight:700;font-size:.95rem}
.chat .meter{flex:1;height:8px;background:rgba(255,255,255,.16);overflow:hidden}
.chat .meter i{display:block;height:100%;width:88%;background:linear-gradient(90deg,var(--aqua),#fff)}

/* ---------- sectoren: sticky pan (omlaag scrollen = kaarten opzij, geen schuifbalk, geen GSAP nodig) ---------- */
.hscroll{position:relative}
.hscroll .viewport{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.hscroll .viewport::-webkit-scrollbar{display:none}
.hscroll .viewport.fx{position:sticky;top:0;height:100vh;overflow:hidden}
.hscroll .track{display:flex;align-items:center;gap:24px;height:min(88vh,680px);padding:0 max(28px,5vw);will-change:transform}
.hs-intro{flex:0 0 auto;width:min(80vw,430px);margin-right:14px}
.hs-intro h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:16px}
.hs-intro p{margin-bottom:22px}
.hs-intro .hint{display:inline-flex;align-items:center;gap:9px;font-family:var(--payoff);font-weight:600;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.hs-intro .hint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}
body.donker .hs-intro .hint{color:var(--aqua)}
.hs-kaart{position:relative;width:min(66vw,350px);height:min(66vh,500px);flex-shrink:0;overflow:hidden;align-self:center;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.hs-kaart img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .5s}
.hs-kaart:hover img{transform:scale(1.06)}
.hs-kaart::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(20,17,16,.02) 40%,rgba(20,17,16,.72))}
/* vaste cap-hoogte: alle sectortitels op exact één lijn, ongeacht tekstlengte */
.hs-kaart .cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:20px 26px 22px;height:150px;display:flex;flex-direction:column;justify-content:flex-start}
.hs-kaart .cap h3{color:#fff;font-size:1.4rem;margin-bottom:6px}
.hs-kaart .cap p{color:rgba(255,255,255,.88);font-size:.93rem;line-height:1.5}
body.donker .hs-kaart img{filter:saturate(.85)}
.hs-kaart.hs-meer{background:linear-gradient(165deg,var(--wine),var(--wine-deep));display:flex;flex-direction:column;justify-content:center;padding:34px 32px}
.hs-kaart.hs-meer::after{display:none}
.hs-kaart.hs-meer h3{color:#fff;font-size:1.5rem;margin-bottom:12px}
.hs-kaart.hs-meer p{color:rgba(255,255,255,.86);font-size:.98rem;line-height:1.6;margin-bottom:22px}
.hs-kaart.hs-meer .pijl{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700}
.hs-kaart.hs-meer .pijl svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.4;transition:transform .25s}
.hs-kaart.hs-meer:hover .pijl svg{transform:translateX(5px)}
.hscroll .track.nofx{overflow-x:auto;height:auto;padding:30px max(28px,5vw)}
@media(pointer:coarse){.hscroll .track.nofx{scrollbar-width:none}.hscroll .track.nofx::-webkit-scrollbar{display:none}}
.hscroll .track.nofx .hs-kaart{height:440px}

/* ---------- verticale tijdlijn (uitgewerkte stappen) ---------- */
.traject-v{position:relative;max-width:820px;margin:clamp(30px,4vw,50px) auto 0;display:grid;gap:clamp(22px,3vw,38px)}
.traject-v::before{content:"";position:absolute;left:24px;top:22px;bottom:22px;width:2px;background:linear-gradient(180deg,var(--aqua),var(--wine))}
.traject-stap{position:relative;padding-left:78px}
.traject-stap .bol{position:absolute;left:0;top:0;width:50px;height:50px;background:var(--teal);color:#fff;font-family:var(--payoff);font-weight:600;font-size:1.05rem;display:grid;place-items:center;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);box-shadow:var(--shadow);z-index:2}
.traject-stap:nth-child(even) .bol{background:var(--wine)}
.traject-stap h3{font-size:1.3rem;margin:6px 0 8px}
.traject-stap p{margin-bottom:12px}
.traject-stap ul{margin:0 0 0 18px;display:grid;gap:7px}
.traject-stap li{line-height:1.6}
.traject-stap a{color:var(--teal);font-weight:600}
.traject-stap a:hover{text-decoration:underline}
@media(max-width:560px){.traject-stap{padding-left:62px}.traject-stap .bol{width:42px;height:42px}.traject-v::before{left:20px}}

/* ---------- werkwijze (4 stappen) ---------- */
.werkwijze{padding:clamp(10px,2vw,30px) 0 clamp(80px,9vw,130px)}
.werkwijze .kop{text-align:center;max-width:620px;margin:0 auto clamp(36px,4vw,54px)}
.werkwijze .kop h2{font-size:clamp(2rem,3.8vw,3rem)}
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stap{background:var(--panel);border:1px solid var(--line);padding:28px 26px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.stap .nr{font-family:var(--payoff);font-weight:600;font-size:.8rem;letter-spacing:.09em;color:var(--teal);display:block;margin-bottom:14px}
body.donker .stap .nr{color:var(--aqua)}
.stap h4{font-size:1.15rem;margin-bottom:8px}
.stap p{font-size:.95rem;line-height:1.6}
@media(max-width:1000px){.stappen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.stappen{grid-template-columns:1fr}}

/* ---------- slang-stappenplan: 1→2 boven, slingert naar 3→4 onder ---------- */
.slang{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px 96px;max-width:960px;margin:clamp(40px,5vw,60px) auto 0}
.slang .stap{position:relative;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:28px 30px 26px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.slang .stap .nr{position:static;width:46px;height:46px;background:var(--teal);color:#fff;font-family:var(--payoff);font-weight:600;font-size:1rem;display:grid;place-items:center;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);margin:0 0 14px 0;letter-spacing:0}
.slang .stap h4{font-size:1.18rem;margin:0 0 8px}
.slang .stap p{font-size:.95rem;line-height:1.6}
.slang .stap:nth-child(2) .nr,.slang .stap:nth-child(4) .nr{background:var(--wine)}
.slang .stap:nth-child(3){grid-column:2;grid-row:2}
.slang .stap:nth-child(4){grid-column:1;grid-row:2}
/* stippellijn-verbindingen (ankerlijn-stijl) */
.slang .stap:nth-child(1)::after{content:"";position:absolute;top:50%;right:-96px;width:96px;border-top:2px dashed var(--aqua)}
.slang .stap:nth-child(2)::after{content:"";position:absolute;left:50%;bottom:-64px;height:64px;border-left:2px dashed var(--aqua)}
.slang .stap:nth-child(4)::after{content:"";position:absolute;top:50%;right:-96px;width:96px;border-top:2px dashed var(--aqua)}
.slang .stap:nth-child(1)::before{content:"";position:absolute;width:11px;height:11px;background:var(--bg);border:2px solid var(--teal);transform:rotate(45deg);top:calc(50% - 6px);right:-8px;z-index:2}
.slang .stap:nth-child(3)::before{content:"";position:absolute;width:11px;height:11px;background:var(--bg);border:2px solid var(--teal);transform:rotate(45deg);top:calc(50% - 6px);left:-8px;z-index:2}
.slang .stap:nth-child(2)::before{content:"";position:absolute;width:11px;height:11px;background:var(--bg);border:2px solid var(--wine);transform:rotate(45deg);left:calc(50% - 6px);bottom:-8px;z-index:2}
@media(max-width:760px){
  .slang{grid-template-columns:1fr;gap:44px}
  .slang .stap:nth-child(3),.slang .stap:nth-child(4){grid-column:1;grid-row:auto}
  .slang .stap::after{display:none!important}
  .slang .stap::before{display:none!important}
  .slang .stap:not(:last-child)::after{display:block!important;content:"";position:absolute;left:36px;bottom:-44px;height:44px;width:0;border-left:2px dashed var(--aqua);border-top:0;right:auto;top:auto}
}

/* ---------- bewijs: case + cijfers ---------- */
.case{display:block;position:relative;background:linear-gradient(160deg,#25786f,#17524c);color:#fff;clip-path:polygon(0 var(--seam),100% 0,100% 100%,0 calc(100% - var(--seam)));padding:0}
body.donker .case{background:linear-gradient(160deg,#17524c,#0e3531)}
.case .inner{display:grid;grid-template-columns:.95fr 1.05fr;align-items:stretch;max-width:none}
.case .ph{position:relative;min-height:540px;overflow:hidden}
.case .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.case:hover .ph img{transform:scale(1.045)}
.case .body{padding:calc(var(--seam) + clamp(34px,4vw,60px)) clamp(40px,5vw,80px);max-width:660px;display:flex;flex-direction:column;justify-content:center}
.case blockquote{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.3;margin-bottom:26px;color:#fff}
.case .wie{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.case .wie .av{width:48px;height:48px;background:#fff;color:var(--teal-deep);display:grid;place-items:center;font-weight:800;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.case .wie b{display:block;color:#fff}
.case .wie span{color:rgba(255,255,255,.78);font-size:.9rem}
.case .res{border-top:1px solid rgba(255,255,255,.25);padding-top:18px;color:rgba(255,255,255,.9);font-size:.96rem;line-height:1.6}
.case .verder{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-weight:700;color:#fff}
.case .verder svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.4;transition:transform .25s}
.case:hover .verder svg{transform:translateX(5px)}

.cijfers{padding:clamp(95px,10vw,150px) 0}
.cijfers .rij{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.cijfer-blok .num{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.8rem);color:var(--wine);line-height:1}
body.donker .cijfer-blok .num{color:var(--aqua)}
.cijfer-blok .lbl{margin-top:10px;color:var(--muted);font-size:.9rem;letter-spacing:.05em}

/* ---------- prijzen ---------- */
.prijzen-blok{padding:0 0 clamp(80px,9vw,130px)}
.prijzen-kop{text-align:center;max-width:640px;margin:0 auto clamp(40px,5vw,60px)}
.prijzen-kop h2{font-size:clamp(2.1rem,4vw,3.1rem);margin-bottom:14px}
.prijzen{display:grid;grid-template-columns:repeat(2,minmax(0,440px));justify-content:center;gap:26px}
.prijs{background:var(--panel);border:1px solid var(--line);padding:38px 36px;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));position:relative}
.prijs.pop{border:2px solid var(--teal)}
.prijs .tag{position:absolute;top:18px;right:34px;font-family:var(--payoff);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;background:var(--teal);color:#fff;padding:6px 12px;transform:rotate(3deg)}
.prijs h3{font-size:1.5rem;margin-bottom:4px}
.prijs .voor{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.prijs .bedrag{font-family:var(--display);font-weight:800;font-size:2.5rem;color:var(--ink);margin-bottom:24px}
.prijs .bedrag small{font-size:.9rem;font-weight:600;color:var(--muted)}
.prijs ul{list-style:none;margin-bottom:30px;display:grid;gap:12px}
.prijs li{display:flex;gap:11px;align-items:flex-start;font-size:.98rem}
.prijs li svg{width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:2.6;flex-shrink:0;margin-top:4px}
body.donker .prijs li svg{stroke:var(--aqua)}

/* ---------- pakketvergelijking ---------- */
.vergelijk{max-width:900px;margin:clamp(30px,4vw,50px) auto 0;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);width:100%;overflow:hidden;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.vergelijk th,.vergelijk td{padding:15px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:.98rem;vertical-align:middle}
.vergelijk td+td,.vergelijk th+th{text-align:center;border-left:1px solid var(--line);width:24%}
.vergelijk thead th{padding:24px 22px}
.vergelijk .pakketnaam{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);display:block}
.vergelijk .prijs2{color:var(--teal);font-weight:700;font-size:.95rem;font-family:var(--text)}
.vergelijk .tag{display:inline-block;font-family:var(--payoff);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--teal);color:#fff;padding:3px 9px;margin-bottom:8px}
.vergelijk td:nth-child(3),.vergelijk th:nth-child(3){background:rgba(47,154,145,.07)}
.vergelijk .feat{font-weight:600;color:var(--ink)}
.vergelijk .ja{color:var(--teal)}
.vergelijk .ja svg{width:20px;height:20px;stroke:var(--teal);fill:none;stroke-width:2.6;vertical-align:middle}
.vergelijk .txt{color:var(--body);font-size:.9rem}
.vergelijk .nee{color:var(--muted)}
.vergelijk tbody tr:last-child td{border-bottom:0;padding:22px}
.vergelijk .btn{width:100%;justify-content:center;padding:12px 16px;font-size:.92rem}
@media(max-width:640px){.vergelijk th,.vergelijk td{padding:12px 12px;font-size:.86rem}.vergelijk .pakketnaam{font-size:1.05rem}}

/* netwerk-ladder */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:900px;margin:clamp(28px,3vw,44px) auto 0;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));overflow:hidden}
.ladder .trap{padding:28px 26px;border-right:1px solid var(--line)}
.ladder .trap:last-child{border-right:0}
.ladder .trap h3{font-size:1.15rem;margin-bottom:4px}
.ladder .trap .p{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--teal);margin-bottom:14px}
.ladder .trap .p small{font-family:var(--text);font-weight:400;font-size:.72rem;color:var(--muted);display:block}
.ladder .trap ul{list-style:none;display:grid;gap:9px}
.ladder .trap li{display:flex;gap:9px;font-size:.92rem;line-height:1.45}
.ladder .trap li svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:2.6;flex-shrink:0;margin-top:4px}
.ladder .trap li.uit{color:var(--muted)}
.ladder .trap li.uit svg{stroke:var(--muted);opacity:.5}
@media(max-width:760px){.ladder{grid-template-columns:1fr}.ladder .trap{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- faq ---------- */
.faq-blok{padding:0 0 clamp(80px,9vw,130px)}
.faq-kop{text-align:center;margin-bottom:clamp(30px,4vw,50px)}
.faq-kop h2{font-size:clamp(2rem,3.6vw,2.9rem)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-of-type{border-top:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:700;font-size:1.1rem;color:var(--ink);transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover,.faq-item[open] summary{color:var(--teal)}
body.donker .faq-item summary:hover,body.donker .faq-item[open] summary{color:var(--aqua)}
.faq-item summary .pl{position:relative;width:18px;height:18px;flex-shrink:0}
.faq-item summary .pl::before,.faq-item summary .pl::after{content:"";position:absolute;background:currentColor;transition:transform .25s}
.faq-item summary .pl::before{top:8px;left:0;width:18px;height:2px}
.faq-item summary .pl::after{top:0;left:8px;width:2px;height:18px}
.faq-item[open] summary .pl::after{transform:scaleY(0)}
.faq-item p{padding:0 4px 24px;max-width:72ch;line-height:1.7}

/* ---------- team-cta ---------- */
.team-cta{position:relative;background:linear-gradient(165deg,var(--wine),var(--wine-deep));color:#fff;clip-path:polygon(0 0,100% var(--seam),100% 100%,0 100%);padding:calc(var(--seam) + clamp(70px,8vw,110px)) 0 clamp(80px,9vw,120px)}
body.donker .team-cta{background:linear-gradient(165deg,#5f3537,#3a2224)}
.team-grid{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(36px,5vw,70px);align-items:center}
.team-grid>*{min-width:0}
.team-grid .portret{position:relative;max-width:380px}
.team-grid .portret img{width:100%;aspect-ratio:4/4.6;object-fit:cover;object-position:center 18%;box-shadow:var(--shadow)}
.team-grid .portret .stamp{position:absolute;right:-14px;bottom:26px;transform:rotate(-5deg)}
.team-grid h2{color:#fff;font-size:clamp(2rem,3.8vw,3rem);margin-bottom:18px}
.team-grid .lead{color:rgba(255,255,255,.86);margin-bottom:30px;max-width:520px}
.team-grid .btns{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.team-grid .tel{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.team-grid .tel svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}

/* ---------- footer ---------- */
footer{padding:64px 0 44px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-brand img{height:44px;margin-bottom:16px}
.foot-brand .payoff{font-family:var(--payoff);color:var(--teal);letter-spacing:.08em;font-size:.95rem;margin-bottom:12px}
body.donker .foot-brand .payoff{color:var(--aqua)}
.foot-brand p{font-size:.94rem;max-width:280px}
.foot-col h5{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-family:var(--payoff);font-weight:400}
.foot-col a{display:block;padding:5px 0;font-size:.96rem;color:var(--body);transition:color .2s}
.foot-col a:hover{color:var(--teal)}
body.donker .foot-col a:hover{color:var(--aqua)}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.foot-bottom a{color:var(--teal);font-weight:600}
body.donker .foot-bottom a{color:var(--aqua)}

/* ---------- subpagina's ---------- */
.pagina-hero{padding:clamp(135px,17vh,185px) 0 clamp(36px,4vw,60px)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--payoff);font-weight:600;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb .sep{color:var(--aqua)}
.pagina-hero h1{font-size:clamp(2.2rem,4.4vw,3.7rem);max-width:860px;margin-bottom:18px}
.pagina-hero .lead{font-size:1.15rem;max-width:660px}
.pagina-hero .hero-cta{margin-top:30px;margin-bottom:0}
.sectie{padding:clamp(46px,6vw,84px) 0}

/* pagina-hero met foto (zoals home); foto strekt tot de onderkant van de CTA-knoppen */
.ph-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,64px);align-items:stretch}
.ph-grid>*{min-width:0}
.ph-grid>div:first-child{display:flex;flex-direction:column}
.pagina-foto{position:relative}
.pagina-foto .cut{overflow:hidden;box-shadow:var(--shadow)}
.pagina-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pagina-foto .stamp{position:absolute;top:-12px;right:8px;z-index:3}
@media(min-width:901px){
  /* foto vult exact de teksthoogte (van breadcrumb tot onderkant CTA); nooit langer */
  .ph-grid{align-items:stretch}
  .pagina-foto .cut{position:absolute;inset:0}
  .pagina-foto img{height:100%;aspect-ratio:auto}
}
@media(max-width:900px){.ph-grid{grid-template-columns:1fr}.pagina-foto{max-width:520px}}

/* fotografische pijn-quotes (i.p.v. witte vakjes) */
.stemmen{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1000px;margin:clamp(30px,4vw,46px) auto}
.stem{position:relative;overflow:hidden;min-height:250px;display:flex;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.stem>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stem::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(22,18,17,.18) 0%,rgba(22,18,17,.86) 78%)}
.stem .inhoud{position:relative;z-index:2;margin-top:auto;padding:26px 28px;width:100%}
.stem b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:6px}
.stem b::before{content:"\201C";color:var(--aqua);margin-right:2px}
.stem b::after{content:"\201D";color:var(--aqua);margin-left:2px}
.stem p{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.82);margin-bottom:12px}
.stem .wij{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;font-weight:700;color:var(--aqua);border-top:1px solid rgba(255,255,255,.25);padding-top:12px}
.stem .wij svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;flex-shrink:0;margin-top:3px}
@media(max-width:700px){.stemmen{grid-template-columns:1fr}}

/* dienst-categorie schaduwkaarten (licht, leesbaar; titels bovenaan uitgelijnd) */
.cat-kaarten{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin:clamp(30px,4vw,50px) 0}
.cat-kaart{grid-column:span 2;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:30px 30px 26px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));transition:transform .22s ease,box-shadow .22s ease}
.cat-kaart:hover{transform:translateY(-4px);box-shadow:0 26px 60px -24px rgba(33,29,27,.4)}
.cat-kaart.breed{grid-column:span 3}
.cat-kaart>img{display:none}
.cat-kaart .inhoud{width:100%}
.cat-kaart .ic{width:50px;height:50px;background:rgba(47,154,145,.12);display:grid;place-items:center;margin-bottom:18px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.cat-kaart .ic svg{width:25px;height:25px;stroke:var(--teal);fill:none;stroke-width:2}
.cat-kaart h3{color:var(--ink);font-size:1.35rem;margin-bottom:16px}
.cat-kaart ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 20px}
.cat-kaart li a{display:inline-flex;align-items:center;gap:9px;color:var(--body);font-weight:600;font-size:.96rem;transition:color .2s}
.cat-kaart li a:hover{color:var(--teal)}
.cat-kaart li a svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:2.6;flex-shrink:0}
@media(max-width:820px){.cat-kaarten{grid-template-columns:1fr}.cat-kaart,.cat-kaart.breed{grid-column:auto}.cat-kaart ul{grid-template-columns:1fr}}

/* gratis tools (kosten- en veiligheidscheck): 2 opvallende CTA-tegels */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:clamp(24px,3vw,40px) 0}
.tool{position:relative;overflow:hidden;padding:32px 32px 28px;color:#fff;text-decoration:none;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));transition:transform .2s}
.tool:hover{transform:translateY(-3px)}
.tool.kosten{background:linear-gradient(160deg,var(--teal),var(--teal-deep))}
.tool.veilig{background:linear-gradient(160deg,var(--wine),var(--wine-deep))}
.tool.ai{background:linear-gradient(160deg,#2b2e33,#16181b)}
.tool .ic{width:52px;height:52px;background:rgba(255,255,255,.16);display:grid;place-items:center;margin-bottom:18px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.tool .ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2}
.tool .eyebrow{color:rgba(255,255,255,.85)}
.tool .eyebrow::before{background:rgba(255,255,255,.7)}
.tool h3{color:#fff;font-size:1.5rem;margin-bottom:8px}
.tool p{color:rgba(255,255,255,.85);font-size:.98rem;margin-bottom:18px;max-width:34ch}
.tool .knop{display:inline-flex;align-items:center;gap:9px;font-weight:700}
.tool .knop svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .25s}
.tool:hover .knop svg{transform:translateX(5px)}
@media(max-width:900px){.tools{grid-template-columns:1fr}}
.inkort{background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));padding:30px clamp(24px,3vw,38px);margin:clamp(30px,4vw,50px) 0;display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:26px 32px;align-items:start}
.inkort .kolom{position:relative}
.inkort .kolom:not(:last-child)::after{content:"";position:absolute;top:2px;bottom:2px;right:-16px;width:1px;background:var(--line)}
.inkort .kolom b{display:block;font-family:var(--payoff);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.inkort .kolom span{font-size:.95rem;line-height:1.55;color:var(--body)}
.inkort .prijs-tag{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink)}
.inkort .prijs-tag small{display:block;font-family:var(--text);font-weight:400;font-size:.78rem;color:var(--muted)}
@media(max-width:1000px){.inkort{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.inkort{grid-template-columns:1fr}}
.prose{max-width:760px}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:44px 0 16px}
.prose h3{font-size:1.2rem;margin:30px 0 10px}
.prose p{margin-bottom:16px}
.prose ul{list-style:none;margin:18px 0 22px;display:grid;gap:12px}
.prose li{position:relative;padding-left:28px;margin:0;line-height:1.6}
.prose li::before{content:"";position:absolute;left:3px;top:.42em;width:7px;height:7px;border-right:2.4px solid var(--teal);border-top:2.4px solid var(--teal);transform:rotate(45deg)}
.tekst-foto .prose ul{border-top:1px solid var(--line);margin:20px 0 22px}
.tekst-foto .prose ul li{padding:13px 2px 13px 30px;border-bottom:1px solid var(--line)}
.tekst-foto .prose ul li::before{top:1.28em}
.prose a{color:var(--teal);font-weight:600}
.prose a:hover{text-decoration:underline}
.tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}
.tegel{background:var(--panel);border:1px solid var(--line);padding:26px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.tegel .ic{width:44px;height:44px;background:var(--wine-tint,#f0e0e0);display:grid;place-items:center;margin-bottom:16px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.tegel .ic{background:#e9f2f1}
.tegel .ic svg{width:21px;height:21px;stroke:var(--teal);fill:none;stroke-width:2}
.tegel h3{font-size:1.1rem;margin-bottom:8px}
.tegel p{font-size:.94rem;line-height:1.6}
.tegel a{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:700;color:var(--teal);font-size:.94rem}
.tegel a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
@media(max-width:1000px){.tegels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tegels{grid-template-columns:1fr}}
/* ---------- pakket-opbouw (tarieven) ---------- */
.pakket-detail{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:clamp(28px,3.5vw,44px) auto 0}
.pk{position:relative;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:30px 30px 26px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.pk--accent{border-color:var(--teal);box-shadow:0 22px 60px -24px rgba(47,154,145,.5)}
.pk-badge{position:absolute;top:0;right:0;font-family:var(--payoff);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--teal);color:#fff;padding:5px 12px}
.pk-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:6px}
.pk-top h3{font-size:1.35rem}
.pk-prijs{font-family:var(--display);font-weight:800;font-size:1.55rem;color:var(--teal);white-space:nowrap;text-align:right}
.pk-prijs small{display:block;font-family:var(--text);font-weight:400;font-size:.64rem;color:var(--muted)}
.pk-tag{color:var(--body);font-size:.95rem;line-height:1.55;margin-bottom:16px}
.pk-lijst{list-style:none;display:grid;gap:0}
.pk-lijst li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--body)}
.pk-lijst li b{color:var(--ink);white-space:nowrap}
.pk-lijst li.tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;font-weight:700;color:var(--ink)}
.pk-lijst li.tot b{color:var(--teal);font-size:1.08rem}
.pk-lijst li.los{border-bottom:0;color:var(--muted);font-size:.86rem}
@media(max-width:760px){.pakket-detail{grid-template-columns:1fr}}

/* ---------- netwerkstack (tarieven) ---------- */
.beheer-scope{max-width:900px;margin:clamp(26px,3.2vw,40px) auto 0;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:clamp(28px,3.5vw,42px);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.beheer-scope .bs-hoofd h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:12px}
.beheer-scope .bs-hoofd p{color:var(--body);line-height:1.7;max-width:66ch}
.bs-merk{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 2px}
.bs-merk span{font-family:var(--payoff);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-deep);background:#e9f2f1;padding:7px 14px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.bs-kaarten{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.bs-k{background:var(--bg);border:1px solid var(--line);padding:22px 24px}
.bs-k b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--ink);margin-bottom:8px}
.bs-k p{color:var(--body);font-size:.94rem;line-height:1.6}
@media(max-width:760px){.bs-kaarten{grid-template-columns:1fr}}

/* ---------- prijslijst (losse tarieven) ---------- */
.prijslijst{max-width:900px;margin:22px auto 0;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.pl-rij{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:18px 26px;border-bottom:1px solid var(--line)}
.pl-rij:last-child{border-bottom:0}
.pl-naam{font-weight:700;color:var(--ink);font-size:1rem}
.pl-naam small{display:block;font-weight:400;color:var(--muted);font-size:.86rem;margin-top:3px;max-width:56ch;line-height:1.5}
.pl-prijs{font-family:var(--display);font-weight:800;color:var(--teal);font-size:1.3rem;white-space:nowrap;text-align:right}
.pl-prijs span{font-family:var(--text);font-weight:400;font-size:.7rem;color:var(--muted);display:block}
@media(max-width:560px){.pl-rij{flex-direction:column;gap:6px}.pl-prijs{text-align:left}}

/* premium contactblok */
.contact-blok{display:grid;grid-template-columns:1.15fr .85fr;margin:clamp(30px,4vw,50px) 0;box-shadow:var(--shadow);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));overflow:hidden}
.contact-blok .hoofd{background:linear-gradient(160deg,var(--teal),var(--teal-deep));color:#fff;padding:clamp(30px,4vw,48px)}
.contact-blok .hoofd h2{color:#fff;margin-bottom:22px}
.contact-blok .eyebrow{color:rgba(255,255,255,.85)}
.contact-blok .eyebrow::before{background:rgba(255,255,255,.7)}
.contact-rij{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.2)}
.contact-rij:first-of-type{border-top:0;padding-top:0}
.contact-rij .ci{width:44px;height:44px;flex-shrink:0;background:rgba(255,255,255,.16);display:grid;place-items:center;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.contact-rij .ci svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.contact-rij b{display:block;font-family:var(--display);font-size:1rem;color:rgba(255,255,255,.85)}
.contact-rij a{display:inline-block;font-family:var(--display);font-weight:700;color:#fff;font-size:1.2rem;margin:1px 0 4px;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .2s}
.contact-rij a:hover{border-color:#fff}
.contact-rij small{display:block;color:rgba(255,255,255,.8);font-size:.88rem;line-height:1.45}
.contact-blok .zij{background:var(--panel);padding:clamp(30px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.contact-blok .zij .lbl{font-family:var(--payoff);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.contact-blok .zij h3{font-size:1.2rem;margin-bottom:8px}
.contact-blok .zij p{font-size:.95rem;margin-bottom:20px;line-height:1.6}
.contact-blok .zij .kvk{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
@media(max-width:820px){.contact-blok{grid-template-columns:1fr}}

/* foto met gezicht bovenaan (portret niet afkappen) */
.foto-persoon img,.pagina-foto.foto-persoon img{object-position:center 22%}

/* tekst + foto naast elkaar op subpagina's */
.tekst-foto{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,60px);align-items:center}
.tekst-foto.omgekeerd{grid-template-columns:.92fr 1.08fr}
.tekst-foto .foto{position:relative}
.tekst-foto .foto img{width:100%;aspect-ratio:4/3.2;object-fit:cover;box-shadow:var(--shadow)}
.tekst-foto .foto .stamp{position:absolute;right:-10px;top:-14px}
@media(max-width:900px){.tekst-foto,.tekst-foto.omgekeerd{grid-template-columns:1fr}}

.cta-strook{background:linear-gradient(160deg,var(--teal),var(--teal-deep));color:#fff;clip-path:polygon(0 var(--seam),100% 0,100% 100%,0 100%);padding:calc(var(--seam) + clamp(50px,6vw,80px)) 0 clamp(56px,7vw,90px);margin-top:clamp(46px,6vw,84px)}
.cta-strook h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:14px;max-width:720px}
.cta-strook p{color:rgba(255,255,255,.87);max-width:600px;margin-bottom:28px}
.cta-strook .btns{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ---------- reveal-basis (JS zet html.gsap; anders alles zichtbaar) ---------- */
html.gsap [data-reveal],html.gsap [data-reveal-stagger]>*{will-change:transform,opacity}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:46px}
  .collage{min-height:440px;max-width:520px}
  .ai-grid{grid-template-columns:1fr}
  .case .inner{grid-template-columns:1fr}
  .case .ph{min-height:320px}
  .case .body{padding-top:clamp(30px,5vw,50px)}
  .team-grid{grid-template-columns:1fr;text-align:left}
  .team-grid .portret{max-width:300px}
  .cijfers .rij{grid-template-columns:repeat(2,1fr);gap:36px 16px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-phone{display:none}
  .menu-toggle{display:block;margin-left:auto}
  .beloftes{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero{padding-top:112px}
  .hero h1{font-size:clamp(2.15rem,9vw,2.9rem)}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-usps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;font-size:.85rem}
  .collage{min-height:380px}
  .collage .kaart{right:0;bottom:84px;padding:11px 15px}
  .tijdlijn .lijn{left:10px}
  .moment,.moment:nth-child(even){width:auto;margin-left:34px;text-align:left}
  .moment:nth-child(even) p{margin-left:0}
  .moment:nth-child(odd)::before,.moment:nth-child(even)::before{left:-30px;right:auto}
  .prijzen{grid-template-columns:1fr}
  .hs-kaart{height:400px}
  .band{transform:rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .tijdlijn .lijn i{transform:none}
  .payoff-blok .groot .w{opacity:1}
}