@font-face{font-family:"Inter";src:url("fonts/Inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --antraciet:#2A2D31;--oranje:#F26A1B;--wit:#fff;--grijs:#F2F2F2;--tekst:#2A2D31;--tekst-zacht:#5B6067;--lijn:#DADDE1;--oranje-licht:#F7934F;--rand:#8A9099;
  --maat:64ch;--breed:1120px;--r:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Inter,Helvetica,Arial,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--tekst);background:var(--wit);font-feature-settings:"cv11","ss01"}
a{color:inherit;text-decoration-color:var(--oranje);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,5.2vw,3.6rem);font-weight:800;overflow-wrap:anywhere}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin-top:0}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em;max-width:var(--maat)}
ul{padding-left:1.2em;max-width:var(--maat)}
li{margin-bottom:.35em}
.wrap{width:min(100% - 2.5rem,var(--breed));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--oranje);color:var(--antraciet);font-weight:600;padding:.5rem 1rem}
.skip:focus{left:1rem;top:1rem;z-index:99}

/* header */
header.site{background:var(--antraciet);color:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.logo img{display:block;height:52px;width:auto}
nav.hoofd ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;max-width:none}
nav.hoofd li{margin:0}
nav.hoofd a{text-decoration:none;font-weight:500;color:#fff;opacity:.85;padding:.4rem 0;border-bottom:2px solid transparent}
nav.hoofd a:hover,nav.hoofd a[aria-current]{opacity:1;border-color:var(--oranje);color:#fff}
.menu-knop{display:none;background:none;border:2px solid var(--rand);color:#fff;border-radius:var(--r);padding:.45rem .8rem;font:inherit;font-weight:600}
@media (max-width:760px){
  .menu-knop{display:block}
  nav.hoofd{display:none;width:100%}
  nav.hoofd.open{display:block}
  header.site .wrap{flex-wrap:wrap}
  nav.hoofd ul{flex-direction:column;gap:0;padding:.5rem 0 1rem;border-top:1px solid #444951}
  nav.hoofd a{display:block;padding:.7rem 0;border-bottom:1px solid #3a3e44}
}

/* hero */
.hero{background:var(--antraciet);color:#fff;padding:3.5rem 0 4rem;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:20ch}
.hero h1 .tag{display:block;color:var(--oranje)}
.hero p{font-size:1.2rem;color:#d9dbde;max-width:52ch}
.hero .chev{position:absolute;right:-4vw;top:50%;transform:translateY(-50%);width:clamp(260px,38vw,520px);height:auto;opacity:.16;pointer-events:none}
@media (max-width:760px){.hero{padding:2.5rem 0 3rem}.hero .chev{width:60vw;right:-20vw;top:auto;bottom:-10%;transform:none}}
.knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.knop{display:inline-block;padding:.8rem 1.3rem;border-radius:var(--r);font-weight:600;text-decoration:none;border:2px solid transparent;line-height:1.2}
.knop.primair{background:var(--oranje);color:var(--antraciet)}
.knop.primair:hover{background:var(--oranje-licht);color:var(--antraciet)}
.knop.secundair{border-color:var(--rand);color:#fff}
.knop.secundair:hover{border-color:#fff;color:#fff}
.licht .knop.secundair{border-color:var(--antraciet);color:var(--antraciet)}

/* secties */
section{padding:3.5rem 0}
section.grijs{background:var(--grijs)}
.wrap > h2 + .kolommen{margin-top:1.5rem}
.kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem 3rem;max-width:none}
.kolommen h3{margin-bottom:.3rem}
.kolommen p{margin:0}
.belofte{border-left:4px solid var(--oranje);padding-left:1.2rem;font-size:1.25rem;font-weight:500;max-width:60ch;margin:0}
.slot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.slot p{margin:0;font-size:1.2rem;font-weight:600}
.slot .knoppen{margin:0}

/* pagina-kop */
.paginakop{background:var(--antraciet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg fill='none' stroke-width='26' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 32 L88 80 L40 128' stroke='%23ffffff' stroke-opacity='.16'/%3E%3Cpath d='M108 32 L156 80 L108 128' stroke='%23F26A1B' stroke-opacity='.16'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 4vw center/auto 130%;color:#fff;padding:2.6rem 0}
@media (max-width:760px){.paginakop{background-size:auto 80%;background-position:right -28vw center}}
.paginakop h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 .3em}
.paginakop p{color:#d9dbde;margin:0;font-size:1.15rem}

/* tabel rollen */
table{border-collapse:collapse;width:100%;max-width:var(--breed)}
th,td{text-align:left;vertical-align:top;padding:.9rem .6rem .9rem 0;border-bottom:1px solid var(--lijn)}
th{font-weight:700;width:28%}
th span{display:block;font-weight:500;color:var(--tekst-zacht);font-size:.95rem;white-space:normal}
thead th{border-bottom:2px solid var(--antraciet);color:var(--tekst-zacht);font-weight:500;font-size:.9rem}
@media (max-width:600px){th,td{display:block;padding:.4rem 0}th{padding-top:1rem}tr{display:block;border-bottom:1px solid var(--lijn);padding-bottom:.6rem}td{border:0}thead{display:none}}
dl.feiten{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;max-width:var(--maat);margin:0}
dl.feiten dt{font-weight:700}
dl.feiten dd{margin:0}

/* werkwijze */
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem 3rem}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stappen h3::before{content:"";display:block;width:36px;height:4px;background:var(--oranje);margin-bottom:.8rem}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media (max-width:760px){.contact{grid-template-columns:1fr}}
.groot{font-size:1.35rem;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
@media (max-width:480px){.groot{font-size:1.15rem}}
form{display:grid;gap:1rem;max-width:520px}
label{display:grid;gap:.3rem;font-weight:600;font-size:.95rem}
input,textarea,select{font:inherit;padding:.7rem .8rem;border:1.5px solid var(--rand);border-radius:var(--r);background:#fff;color:var(--tekst);width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--antraciet);outline:3px solid rgba(242,106,27,.35);outline-offset:0}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:480px){.rij{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}
form button{justify-self:start}
.klein{font-size:.9rem;color:var(--tekst-zacht)}

/* footer */
footer.site{background:var(--antraciet);color:#c9ccd0;padding:2.5rem 0;font-size:.95rem}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem 2rem;align-items:center}
footer.site a{color:#fff}
footer.site p{margin:0;max-width:none;overflow-wrap:anywhere}
footer.site img{height:44px;width:auto;display:block}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.2rem}
footer.site li{margin:0}

.over{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:start}
@media (max-width:760px){.over{grid-template-columns:1fr}}
.foto-vlak{background:var(--grijs);border-radius:var(--r);aspect-ratio:4/5;display:grid;place-items:center;color:var(--tekst-zacht);text-align:center;padding:1rem}
.foto-vlak img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}