/* Gedeelde basis voor homepage en casepagina's */
@view-transition{navigation:auto}
:root{--cream:#F5EFE2;--paper:#FBF8F1;--band:#EFE7D8;--ink:#1A0F2E;--muted:#6B5C7A;--violet:#5B21B6;--violet-hover:#4C1D95;--line:#D8D0C2;--soft:#E6DDCC;--violet-soft:#A88BE0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 'Geist',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--violet)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.d{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-0.035em}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.btn{display:inline-block;font:500 16px 'Geist',sans-serif;color:var(--cream);background:var(--violet);padding:15px 24px;border-radius:3px;text-decoration:none}
.btn:hover{background:var(--violet-hover)}
.btn.sm{font-size:14px;padding:10px 16px}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--cream)}
.src{font-size:13px;color:var(--muted);line-height:1.5}
.mark{font:500 19px 'Space Grotesk',sans-serif;letter-spacing:-0.02em;color:var(--ink);text-decoration:none}
.mark i{font-style:normal;color:var(--violet)}
/* klantlogo's: zwart op transparant, gedempt; hoogte per logo zodat ze optisch even zwaar zijn */
.logo{display:block;width:auto;opacity:.86}
.logo.hm{height:21px}.logo.n25{height:14px}.logo.hdb{height:44px}.logo.me{height:16px}

nav.top{position:sticky;top:0;z-index:30;background:var(--cream);border-bottom:1px solid transparent;transition:border-color .2s;view-transition-name:topnav}
nav.top.scrolled{border-bottom-color:var(--line)}
nav.top .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
nav.top .links{display:flex;gap:28px;align-items:center;font-size:15px}
nav.top .links a:not(.btn){color:var(--muted);text-decoration:none}
nav.top .links a:not(.btn):hover{color:var(--ink)}
/* homepage: de knop in de balk verschijnt pas als de hero-knop uit beeld is */
nav.top .links .btn{transition:opacity .2s,visibility .2s}
nav.top.quiet .links .btn{opacity:0;visibility:hidden}
.xs-show{display:none}
nav.top .menu{display:none;width:40px;height:40px;margin-right:-8px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
nav.top .menu i{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .2s}
nav.top.open .menu i:first-child{transform:translateY(3.75px) rotate(45deg)}
nav.top.open .menu i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
nav.top.open{border-bottom-color:var(--line)}
.nav-panel{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line)}
nav.top .nav-panel .wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;padding-top:8px;padding-bottom:24px}
.nav-panel a:not(.btn){font:500 24px 'Space Grotesk',sans-serif;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.nav-panel .btn{align-self:flex-start;margin-top:20px}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px 40px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}

@media (max-width:900px){
  .wrap{padding:0 20px} footer .wrap{padding:24px 20px}
  nav.top .links a:not(.btn){display:none}
  nav.top .mark,nav.top .btn{white-space:nowrap}
  nav.top .links{gap:12px}
  nav.top .menu{display:flex}
  .xs-hide{display:none} .xs-show{display:inline}
}
@media (min-width:901px){.nav-panel{display:none}}
@media (max-width:380px){
  nav.top .mark{font-size:17px}
  nav.top .links .btn{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} @view-transition{navigation:none}}