/* StudentTopper Logistics: witte pagina, enorm licht Geist, één groen.
   Zelfde ontwerpcontract als st-movers, eigen kleur, logo en content (werkorder 2026-08-20).
   Volgende branchesite: wissel --brand/--brand-* tokens, het logobestand en de content. */

/* ============================================================ FONTS */
@font-face{font-family:"Geist";src:url("assets/fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/Geist-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/Geist-Black.woff2") format("woff2");font-weight:900;font-display:swap}

/* ============================================================ BRANCH TOKENS */
:root{
  --paper:#FFFFFF;
  --bone:#F5F9F6;
  --bone-ring:#E1EAE4;
  --ink:#101112;
  --body:#4B4D51;
  --mute:#6F7176;
  --brand:#27A353;
  --brand-deep:#166534;
  --brand-soft:#E3F5EA;
  --brand-dark:#0C3D20;
  --on-soft:#5E6065;
  --font:"Geist","Helvetica Neue",Helvetica,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --r-card:26px;
  --wrap:1480px;
  --pad:clamp(18px,3vw,44px);
}

/* ============================================================ BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal}
::selection{background:var(--brand-deep);color:#fff}
button{font-family:inherit}
main:focus{outline:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px;border-radius:4px}
.ctaband :focus-visible,.footer :focus-visible{outline-color:#fff}
[id]{scroll-margin-top:104px}

/* ============================================================ KEYFRAMES */
@keyframes maskUp{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================ REVEALS */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.05s var(--ease),transform 1.1s var(--ease);will-change:opacity,transform}
html.js [data-reveal].shown{opacity:1;transform:none}
html.no-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .faq__panel,.faq__panel>div{transition:none!important}
}

/* ============================================================ TYPO-BOUWSTENEN */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.eyebrow__slash{font-family:var(--font);font-size:1.65em;font-weight:700;line-height:1;color:var(--brand-deep);animation:pulseDot 3.6s ease-in-out infinite}
.eyebrow--diap{color:rgba(255,255,255,.78)}
.eyebrow--diap .eyebrow__slash{color:var(--brand)}
.eyebrow--soft{color:var(--on-soft)}
.h2{margin:clamp(20px,2.6vw,38px) 0 0;font-weight:400;font-size:clamp(30px,3.6vw,58px);line-height:1.04;letter-spacing:-.04em;max-width:18em;text-wrap:balance}
.statement{margin:clamp(24px,3vw,44px) 0 0;font-weight:400;font-size:clamp(30px,4.4vw,72px);line-height:1.06;letter-spacing:-.045em;max-width:19em;text-wrap:balance}
.statement em{font-weight:700;color:var(--brand)}

/* ============================================================ KNOPPEN */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:999px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:background .35s,color .35s,transform .4s var(--ease)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--brand-deep);transform:translateY(-2px)}
.btn--paper{background:#fff;color:var(--ink)}
.btn--paper:hover{background:var(--brand-deep);color:#fff;transform:translateY(-2px)}
.btn span{transition:transform .4s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.telbtn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--brand-deep);transition:color .3s,transform .4s var(--ease)}
.telbtn:hover{color:var(--ink);transform:translateY(-1px);text-decoration:underline;text-underline-offset:5px}

/* ============================================================ NAV */
.navwrap{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--bone-ring)}
.nav{max-width:var(--wrap);margin:0 auto;height:78px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{display:flex;align-items:center;padding:6px 0;transition:opacity .3s,transform .4s var(--ease)}
.nav__logo:hover{opacity:.72;transform:translateY(-1px)}
.nav__logo img{width:auto;height:42px}
.nav__links{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--body)}
.nav__links a{position:relative;padding:4px 0;background-image:linear-gradient(var(--brand-deep),var(--brand-deep));background-repeat:no-repeat;background-size:0% 1.5px;background-position:0 100%;transition:color .3s,background-size .45s var(--ease)}
.nav__links a:hover{color:var(--brand-deep);background-size:100% 1.5px}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav__links a[aria-current="page"]::before{content:"/";margin-right:6px;font-weight:700;color:var(--brand-deep)}
.nav__links .nav__cta--drawer{display:none}
.nav__right{display:flex;align-items:center;gap:18px}
.nav__tel{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--body);padding:4px 0;transition:color .3s,transform .4s var(--ease)}
.nav__tel:hover{color:var(--brand-deep);transform:translateY(-1px)}
.nav__cta{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;transition:background .35s,transform .35s}
.nav__cta:hover{background:var(--brand-deep);transform:translateY(-1px)}
.nav__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.nav__burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ============================================================ HERO */
.hero{padding:clamp(118px,14vh,168px) 0 0}
.hero__eyebrow{animation:fadeIn 1s .1s both}
.hero__h{margin:clamp(20px,2.4vw,34px) 0 0;font-weight:400;font-size:clamp(42px,6.7vw,110px);line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.hero--page .hero__h{font-size:clamp(38px,5vw,84px);line-height:.96}
.mask{display:block;overflow:hidden;overflow:clip;overflow-clip-margin:.34em;padding:0 .06em .17em .07em;margin:0 -.06em -.1em -.07em}
.mask__in{display:block;text-wrap:balance}
.mask__in--1{animation:maskUp 1.2s var(--ease) .16s both}
.mask__in--2{font-weight:700;color:var(--brand);animation:maskUp 1.2s var(--ease) .3s both}
.hero__grid{margin-top:clamp(28px,3.4vw,50px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:clamp(26px,4.6vw,96px);align-items:stretch;animation:fadeUp 1.1s .5s both}
.hero__left{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.2vw,30px)}
.hero__sub{margin:0;font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.6;color:var(--body);max-width:32em}
.hero__actions{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.hero__note{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-left:clamp(4px,1vw,14px)}
.hero__note span{font-size:13px;line-height:1.5;color:var(--mute)}
.hero__num{font-weight:500;font-size:clamp(30px,2.6vw,42px);line-height:1;letter-spacing:-.036em;color:var(--brand-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero__statlabel{font-size:14px;line-height:1.4;color:var(--body);max-width:17em}
.hero__media{position:relative;margin:0;height:clamp(340px,27vw,460px)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;border-radius:var(--r-card);background:var(--bone)}
.hero__chip{position:absolute;left:clamp(-34px,-2vw,-16px);bottom:clamp(18px,2vw,30px);display:flex;align-items:baseline;gap:12px;max-width:min(86%,340px);padding:16px 20px;border-radius:18px;background:#fff;box-shadow:0 24px 60px -34px rgba(16,17,18,.45)}
.hero--text{padding-bottom:clamp(6px,1vw,14px)}
.hero--text .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}

/* ============================================================ BLOKKEN (twee grote keuzes) */
.blokken{padding:clamp(56px,7vw,110px) 0 clamp(44px,5.4vw,84px)}
.blokken__grid{margin-top:clamp(30px,3.6vw,54px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.blok{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-card);background:var(--bone);box-shadow:inset 0 0 0 1px var(--bone-ring);transition:transform .5s var(--ease),box-shadow .5s}
.blok:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--bone-ring),0 34px 60px -42px rgba(16,17,18,.5)}
.blok__media{margin:0;height:clamp(240px,24vw,368px);overflow:hidden;background:var(--bone-ring)}
.blok__media img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transition:transform .9s var(--ease)}
.blok:hover .blok__media img{transform:scale(1.05)}
.blok__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.8vw,42px)}
.blok__meta{width:100%;display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.blok__h{margin:clamp(18px,2.2vw,30px) 0 0;font-weight:500;font-size:clamp(24px,2.4vw,38px);line-height:1.08;letter-spacing:-.03em}
.blok__p{margin:12px 0 0;font-size:16.5px;line-height:1.6;color:var(--body);max-width:26em}
.blok__go{margin-top:auto;padding-top:clamp(20px,2.4vw,32px);display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:var(--brand-deep)}
.blok__go span{transition:transform .45s var(--ease)}
.blok:hover .blok__go span{transform:translateX(6px)}
.blok:hover .blok__go{text-decoration:underline;text-underline-offset:4px}

/* ============================================================ FEATURES */
.waarom{padding:clamp(56px,7vw,110px) 0}
.waarom--soft{background:var(--brand-soft)}
.waarom__grid{margin-top:clamp(38px,4.6vw,70px);padding-top:clamp(26px,3vw,42px);border-top:1px solid var(--bone-ring);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,52px)}
.waarom--soft .waarom__grid{border-top-color:rgba(10,80,116,.18)}
.feat__num{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--brand-deep)}
.feat__h{margin:clamp(14px,1.6vw,22px) 0 0;font-weight:500;font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.02em}
.feat__p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--body)}
.waarom--soft .feat__p{color:var(--on-soft)}

/* ============================================================ STAPPEN */
.stappen{padding:clamp(56px,7vw,110px) 0 clamp(44px,5.4vw,84px)}
.stappen__row{list-style:none;margin:clamp(44px,6vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,70px)}
.stappen__row--vier{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,50px)}
.stap__num{margin:0;font-weight:700;font-size:clamp(40px,4.4vw,72px);line-height:1;letter-spacing:-.05em;color:var(--brand);font-variant-numeric:tabular-nums}
.stap__h{margin:clamp(16px,2vw,26px) 0 0;font-weight:500;font-size:clamp(20px,1.9vw,28px);line-height:1.14;letter-spacing:-.026em}
.stappen__row--vier .stap__h{font-size:clamp(19px,1.6vw,24px)}
.stap__p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--body);max-width:22em}
.stappen__bar{margin-top:clamp(40px,5vw,76px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,34px);border-radius:999px;background:var(--bone);box-shadow:inset 0 0 0 1px var(--bone-ring)}
.stappen__count{margin:0;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.01em}
.stappen__n{font-weight:700;color:var(--brand-deep);font-variant-numeric:tabular-nums}

/* ============================================================ UITLEG (magazijn / montage) */
.uitleg{padding:clamp(44px,5.4vw,84px) 0}
.uitleg__row{margin-top:clamp(30px,3.6vw,54px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(28px,4vw,80px);align-items:center}
.uitleg__row + .uitleg__row{margin-top:clamp(46px,6vw,104px);padding-top:clamp(46px,6vw,104px);border-top:1px solid var(--bone-ring)}
.uitleg__row--wissel .uitleg__media{order:-1}
.uitleg__num{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.uitleg__h{margin:clamp(14px,1.8vw,24px) 0 0;font-weight:400;font-size:clamp(28px,3.2vw,52px);line-height:1.04;letter-spacing:-.038em;text-wrap:balance}
.uitleg__p{margin:clamp(14px,1.6vw,22px) 0 0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:var(--body);max-width:32em}
.uitleg__list{list-style:none;margin:clamp(18px,2.2vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;font-size:16px;line-height:1.5;color:var(--body)}
.uitleg__list li{position:relative;padding-left:22px}
.uitleg__list li::before{content:"/";position:absolute;left:0;top:0;font-weight:700;color:var(--brand-deep)}
.uitleg__media{margin:0;overflow:hidden;border-radius:var(--r-card);height:clamp(300px,30vw,470px)}
.uitleg__media img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transition:transform .9s var(--ease)}
.uitleg__media:hover img{transform:scale(1.03)}
.uitleg .btn{margin-top:clamp(22px,2.6vw,34px)}

/* ============================================================ TRUST */
.trust{padding:clamp(44px,5.4vw,80px) 0 clamp(20px,2.6vw,36px);overflow:hidden}
.ticker{margin-top:clamp(20px,2.4vw,32px);overflow:hidden;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:10vw;z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(255,255,255,0))}
.ticker::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(255,255,255,0))}
.ticker__track{display:flex;align-items:baseline;gap:clamp(26px,3.4vw,52px);width:max-content;animation:marq 34s linear infinite;font-weight:500;font-size:clamp(19px,2vw,30px);letter-spacing:-.02em;color:var(--mute)}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{white-space:nowrap}
.ticker__sep{color:var(--brand-deep);font-weight:700}

/* ============================================================ REVIEWS */
.reviews{padding:clamp(20px,2.6vw,36px) 0 clamp(44px,5.4vw,84px)}
.reviews__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.review{margin:0;padding:clamp(24px,3vw,44px);border-radius:var(--r-card);background:var(--bone);box-shadow:inset 0 0 0 1px var(--bone-ring)}
.review--soft{background:var(--brand-soft);box-shadow:none}
.review__mark{display:block;font-size:clamp(38px,3.4vw,54px);font-weight:700;line-height:.7;color:var(--brand-deep)}
.review__q{margin:clamp(16px,2vw,26px) 0 0;font-weight:400;font-size:clamp(19px,1.8vw,27px);line-height:1.32;letter-spacing:-.028em}
.review__q p{margin:0}
.review__by{margin:clamp(18px,2vw,26px) 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.review--soft .review__by{color:var(--on-soft)}

/* ============================================================ FAQ */
.faq{padding:clamp(56px,7vw,110px) 0}
.faq__list{margin-top:clamp(30px,3.6vw,54px);border-top:1px solid var(--bone-ring)}
.faq__item{border-bottom:1px solid var(--bone-ring)}
.faq__item h3{margin:0;font-weight:400}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:clamp(18px,2.1vw,28px) 4px;border:0;background:none;text-align:left;font-family:inherit;font-weight:500;font-size:clamp(17px,1.6vw,23px);line-height:1.25;letter-spacing:-.022em;color:var(--ink);cursor:pointer;transition:color .3s}
.faq__q:hover{color:var(--brand-deep)}
.faq__ico{position:relative;flex:0 0 auto;width:22px;height:22px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.6px;background:var(--brand-deep);transform:translate(-50%,-50%);transition:transform .34s var(--ease)}
.faq__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item.is-open .faq__ico::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s var(--ease)}
html.js .faq__panel{grid-template-rows:0fr}
html.js .faq__item.is-open .faq__panel{grid-template-rows:1fr;transition-duration:.34s}
.faq__panel>div{overflow:hidden}
html.js .faq__panel>div{visibility:hidden;transition:visibility .22s}
html.js .faq__item.is-open .faq__panel>div{visibility:visible;transition-duration:.34s}
.faq__a{margin:0;padding:0 clamp(4px,4vw,64px) clamp(20px,2.4vw,32px) 4px;font-size:16.5px;line-height:1.62;color:var(--body);max-width:46em}

/* ============================================================ PLATFORM */
.platformwrap{padding:clamp(28px,3.4vw,52px) 0}
.platform{background:var(--bone);box-shadow:inset 0 0 0 1px var(--bone-ring);border-radius:var(--r-card);padding:clamp(28px,3.6vw,64px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,80px);align-items:start}
.platform__h{margin:clamp(18px,2.2vw,32px) 0 0;font-weight:400;font-size:clamp(28px,3.2vw,52px);line-height:1.05;letter-spacing:-.038em}
.platform__p{margin:clamp(14px,1.6vw,22px) 0 0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:var(--body);max-width:32em}
.platform__stats{margin-top:clamp(24px,3vw,42px);display:flex;gap:clamp(24px,3.4vw,56px);flex-wrap:wrap}
.pstat{margin:0;display:flex;flex-direction:column;gap:6px}
.pstat__n{font-weight:500;font-size:clamp(26px,2.4vw,38px);line-height:1;letter-spacing:-.03em;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.pstat__l{font-size:13.5px;line-height:1.45;color:var(--body);max-width:15em}
.platform__side{padding-top:clamp(4px,3vw,52px)}
.platform__sidelabel{margin:0;font-size:15px;color:var(--body)}
.platform__chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.platform__chips a{display:inline-flex;padding:10px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--bone-ring);font-size:14px;font-weight:500;transition:background .3s,color .3s,transform .4s var(--ease)}
.platform__chips a:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.platform__sidenote{margin:16px 0 0;font-size:13.5px;color:var(--mute)}
.platform__sidenote a{font-weight:500;color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.platform__sidenote a:hover{color:var(--ink)}

/* ============================================================ VERHAAL */
.verhaal{padding:clamp(44px,5.4vw,84px) 0}
.verhaal__grid{margin-top:clamp(30px,3.6vw,54px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,80px);align-items:start}
.verhaal__p{margin:0 0 clamp(16px,1.8vw,22px);font-size:clamp(16.5px,1.35vw,19px);line-height:1.65;color:var(--body);max-width:34em}
.verhaal__p:last-child{margin-bottom:0}
.verhaal__p strong{font-weight:600;color:var(--ink)}

/* ============================================================ TEAM */
.team{padding:clamp(44px,5.4vw,84px) 0}
.team__grid{margin-top:clamp(30px,3.6vw,54px);display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);gap:clamp(24px,3.4vw,60px);align-items:center}
.teamcard{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,3vw,40px);border-radius:var(--r-card);background:var(--brand-soft)}
.teamcard__foto{width:clamp(96px,9vw,128px);height:clamp(96px,9vw,128px);border-radius:50%;object-fit:cover}
.teamcard__naam{margin:clamp(18px,2.2vw,28px) 0 0;font-weight:500;font-size:clamp(24px,2.2vw,34px);line-height:1.06;letter-spacing:-.03em}
.teamcard__rol{margin:8px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-soft)}
.teamcard__p{margin:clamp(16px,1.8vw,22px) 0 0;font-size:16px;line-height:1.6;color:var(--on-soft);max-width:22em}
.teamcard__tel{margin:clamp(16px,1.8vw,22px) 0 0}
.teamcard__tel a{font-weight:500;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.02em;color:var(--brand-dark);transition:color .3s}
.teamcard__tel a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.team__note p{margin:0 0 clamp(14px,1.6vw,20px);font-size:clamp(16.5px,1.35vw,19px);line-height:1.65;color:var(--body);max-width:32em}
.team__note p:last-child{margin-bottom:0}

/* ============================================================ CTA-BAND */
.ctabandwrap{padding:clamp(28px,3.4vw,52px) 0 clamp(56px,7vw,110px)}
.ctaband{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:clamp(30px,4vw,76px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,3.4vw,64px);align-items:end}
.ctaband__h{margin:clamp(18px,2.2vw,32px) 0 0;font-weight:400;font-size:clamp(30px,3.8vw,62px);line-height:1.04;letter-spacing:-.04em;max-width:11em}
.ctaband__h em{font-weight:700;color:var(--brand)}
.ctaband__side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,24px)}
.ctaband__p{margin:0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:rgba(255,255,255,.78);max-width:24em}
.ctaband__tel{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78);transition:color .3s}
.ctaband__tel:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* ============================================================ FORMULIEREN */
.form{background:var(--bone);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--bone-ring);padding:clamp(22px,2.6vw,38px)}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px}
.field--wide{grid-column:1/-1}
.field label{font-size:13px;font-weight:500;color:var(--body)}
.field input,.field select,.field textarea{width:100%;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--bone-ring);padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);transition:box-shadow .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--brand-deep)}
.field textarea{resize:vertical;min-height:96px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234B4D51' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.submit{display:inline-flex;align-items:center;gap:9px;margin-top:18px;border:0;padding:15px 28px;border-radius:999px;background:var(--brand-deep);color:#fff;font-size:14.5px;font-weight:500;cursor:pointer;transition:background .35s,transform .4s var(--ease)}
.submit:hover{background:var(--ink);transform:translateY(-2px)}
.submit:disabled{cursor:default}
.form__ok{margin:14px 0 0;font-size:14.5px;font-weight:500;color:var(--brand-deep)}
.form__err{margin:14px 0 0;font-size:14.5px;font-weight:500;color:#B23E0A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================ CONTACT */
.aanvraag{padding:clamp(44px,5.4vw,84px) 0 clamp(56px,7vw,110px)}
.aanvraag__sub{margin:14px 0 0;font-size:clamp(16px,1.3vw,18.5px);color:var(--body);max-width:36em}
.aanvraag__cols{margin-top:clamp(28px,3.4vw,50px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.planner{background:var(--bone);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--bone-ring);padding:clamp(22px,2.6vw,34px)}
.planner__foto{width:84px;height:84px;border-radius:50%;object-fit:cover}
.planner__p{margin:18px 0 0;font-size:16px;line-height:1.55;color:var(--body);max-width:18em}
.planner__tel{margin:16px 0 0}
.planner__tel a{font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;transition:color .3s}
.planner__tel a:hover{color:var(--brand-deep);text-decoration:underline;text-underline-offset:5px}
.planner__wa{margin:8px 0 0}
.planner__wa a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--brand-deep)}
.planner__wa a span{transition:transform .4s var(--ease)}
.planner__wa a:hover span{transform:translateX(5px)}
.planner__wa a:hover{text-decoration:underline;text-underline-offset:4px}
.planner__adres{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--mute)}

/* ============================================================ FOOTER */
.footer{background:var(--ink);color:#fff;padding:clamp(56px,7vw,100px) 0 clamp(28px,3vw,44px)}
.footer__logo{width:min(100%,520px);height:auto}
.footer__cols{margin-top:clamp(44px,5.4vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.footer__h{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:rgba(255,255,255,.78)}
.footer__col{font-size:15px;line-height:1.7;color:rgba(255,255,255,.78)}
.footer__col a{display:inline-block;padding:3px 0;transition:color .3s,transform .4s var(--ease)}
.footer__col a:hover{color:var(--brand);transform:translateX(3px)}
nav.footer__col a{display:block}
.footer__col p{margin:6px 0 0}
.footer__col p a{display:inline;text-decoration:underline;text-underline-offset:3px}
.footer__col p a:hover{color:var(--brand)}
.footer__seo{margin:clamp(36px,4.4vw,64px) 0 0;font-size:12px;line-height:1.7;color:rgba(255,255,255,.66);max-width:55ch}
.footer__legal{margin:clamp(24px,3vw,40px) 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.footer__legal a{transition:color .3s}
.footer__legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ============================================================ RESPONSIVE */
@media (max-width:1000px){
  .nav__links{position:fixed;top:86px;left:clamp(14px,2.4vw,32px);right:clamp(14px,2.4vw,32px);z-index:79;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border-radius:26px;padding:14px 22px 24px;box-shadow:0 24px 40px -28px rgba(16,17,18,.35);transform:translateY(-16px);opacity:0;visibility:hidden;transition:transform .45s var(--ease),opacity .35s,visibility .45s}
  .nav__links.is-open{transform:none;opacity:1;visibility:visible}
  .nav__links a{display:block;padding:13px 0;font-size:27px;font-weight:400;letter-spacing:-.028em;background:none}
  .nav__links a:hover{color:var(--brand-deep)}
  .nav__links a[aria-current="page"]::before{margin-right:10px}
  .nav__links .nav__cta--drawer{display:inline-flex;margin-top:16px;padding:15px 26px;border-radius:999px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:500;letter-spacing:0}
  .nav__links .nav__cta--drawer:hover{color:#fff;background:var(--brand-deep)}
  .nav__tel{display:none}
  .nav__right .nav__cta{display:none}
  .nav__burger{display:flex}
  .stappen__row--vier{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
}
@media (max-width:860px){
  .hero__grid,.hero--text .hero__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .hero__media{height:400px}
  .hero__chip{left:14px}
  .blokken__grid{grid-template-columns:minmax(0,1fr)}
  .uitleg__row,.uitleg__row--wissel{grid-template-columns:minmax(0,1fr);gap:26px}
  .uitleg__row--wissel .uitleg__media{order:0}
  .uitleg__media{height:300px}
  .reviews__grid{grid-template-columns:minmax(0,1fr)}
  .platform{grid-template-columns:minmax(0,1fr)}
  .platform__side{padding-top:0}
  .verhaal__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .team__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .stappen__row{grid-template-columns:minmax(0,1fr);gap:34px}
  .waarom__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctaband{grid-template-columns:minmax(0,1fr);gap:26px}
  .aanvraag__cols{grid-template-columns:minmax(0,1fr)}
  .footer__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:620px){
  html{scroll-padding-top:82px}
  [id]{scroll-margin-top:82px}
  .nav{height:64px}
  .nav__logo img{height:34px}
  .nav__links{top:74px}
  .hero{padding-top:96px}
  .hero__h{font-size:clamp(34px,10.4vw,43px);line-height:.98;letter-spacing:-.03em}
  .hero--page .hero__h{font-size:clamp(32px,9.4vw,41px)}
  .hero__eyebrow{font-size:12px;letter-spacing:.1em}
  .hero__actions{gap:14px}
  .hero__actions .btn{width:100%;justify-content:center}
  .hero__media{height:360px}
  .hero__media img{border-radius:20px}
  .statement{font-size:clamp(27px,7.6vw,32px)}
  .ticker__track{font-size:17px}
  .h2{font-size:clamp(27px,7.2vw,32px)}
  .blok__body{padding:22px}
  .blok__media{height:200px}
  .uitleg__list{grid-template-columns:minmax(0,1fr)}
  .uitleg__h{font-size:clamp(26px,7vw,31px)}
  .stap__num{font-size:38px}
  .stappen__row--vier{grid-template-columns:minmax(0,1fr)}
  .stappen__bar{border-radius:22px;flex-direction:column;align-items:flex-start}
  .stappen__bar .btn{width:100%;justify-content:center}
  .platform{padding:22px;border-radius:20px}
  .review{padding:22px;border-radius:20px}
  .faq__q{font-size:18px;gap:16px}
  .waarom__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .form{padding:18px;border-radius:20px}
  .form__grid{grid-template-columns:minmax(0,1fr)}
  .submit{width:100%;justify-content:center}
  .teamcard{padding:22px;border-radius:20px}
  .ctaband{padding:24px;border-radius:20px}
  .ctaband__h{font-size:clamp(27px,7.2vw,32px)}
  .ctaband .btn{width:100%;justify-content:center}
  .footer__cols{grid-template-columns:minmax(0,1fr);gap:30px}
}
@media (max-width:400px){
  .wrap{padding-left:15px;padding-right:15px}
  .hero__h{font-size:31px}
  .hero__media{height:310px}
  .uitleg__media{height:260px}
}