/* Gedeelde navigatie, ruimte en mobiele verbeteringen.
   Wordt ná de pagina-eigen stylesheet geladen, zodat deze regels winnen. */

:root{
  --ms-blue:#2F6FE9; --ms-blue-d:#285A9B; --ms-blue-soft:#EAF2FE;
  --ms-line:#E4EFFF; --ms-line-2:#D7E8FF;
  --ms-ink:#15253C; --ms-ink-2:#5D728C; --ms-ink-3:#8AA0B6;
  --ms-nav-h:66px;
}

/* ═══════════ navigatie ═══════════ */
.msnav{
  position:sticky; top:0; z-index:70;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--ms-line);
}
.msnav-in{
  max-width:1140px; margin:0 auto; padding:13px 28px;
  display:flex; align-items:center; gap:28px; min-height:var(--ms-nav-h);
}
@media (max-width:640px){ .msnav-in{padding:11px 20px; gap:16px} }

.msnav .merk{display:flex; align-items:center; gap:11px; flex:none; text-decoration:none; color:var(--ms-ink)}
.msnav .merk img{width:30px; height:30px; display:block; flex:none}
.msnav .merk .nm{
  display:block; font-family:"Poppins","Century Gothic",Futura,system-ui,sans-serif;
  font-weight:600; font-size:16.5px; letter-spacing:-.03em; line-height:1.05;
}
.msnav .merk .ds{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ms-ink-3); margin-top:3px; line-height:1.2;
}
@media (max-width:420px){ .msnav .merk .ds{display:none} }

.msnav .links{display:flex; align-items:center; gap:26px; flex:1}
.msnav .links a{
  font-size:14.5px; font-weight:500; color:var(--ms-ink-2);
  text-decoration:none; white-space:nowrap; transition:color .16s; padding:6px 0;
}
.msnav .links a:hover{color:var(--ms-blue)}
.msnav .links a[aria-current]{color:var(--ms-blue); font-weight:700}

.msnav .eind{margin-left:auto; display:flex; align-items:center; gap:10px; flex:none}
.msnav .cta{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1;
  padding:12px 20px; border-radius:99px; background:var(--ms-blue); color:#fff;
  text-decoration:none; border:none; transition:background .18s, transform .18s;
}
.msnav .cta:hover{background:var(--ms-blue-d); transform:translateY(-1px)}

/* hamburger */
.msnav .menuknop{
  display:none; width:44px; height:44px; margin-left:auto; flex:none;
  align-items:center; justify-content:center; background:transparent;
  border:1px solid var(--ms-line-2); border-radius:12px; cursor:pointer; color:var(--ms-ink);
}
.msnav .menuknop span{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative}
.msnav .menuknop span::before,.msnav .menuknop span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .22s cubic-bezier(.22,1,.36,1), top .22s cubic-bezier(.22,1,.36,1);
}
.msnav .menuknop span::before{top:-6px}
.msnav .menuknop span::after{top:6px}
.msnav.open .menuknop span{background:transparent}
.msnav.open .menuknop span::before{top:0; transform:rotate(45deg)}
.msnav.open .menuknop span::after{top:0; transform:rotate(-45deg)}

@media (max-width:1000px){
  .msnav .links,.msnav .eind{
    position:fixed; left:0; right:0; top:var(--ms-nav-h);
    background:#fff; border-bottom:1px solid var(--ms-line);
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:0 20px; max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .3s cubic-bezier(.22,1,.36,1), padding .3s, visibility .3s;
  }
  .msnav .eind{top:auto; border-bottom:1px solid var(--ms-line)}
  .msnav.open .links{max-height:60vh; visibility:visible; padding:8px 20px; overflow-y:auto}
  .msnav.open .eind{max-height:120px; visibility:visible; padding:4px 20px 18px}
  .msnav .links a{
    padding:15px 4px; font-size:17px; font-weight:600; color:var(--ms-ink);
    border-bottom:1px solid var(--ms-line);
  }
  .msnav .links a:last-child{border-bottom:none}
  .msnav .cta{width:100%; padding:15px 20px; font-size:16px; border-radius:12px}
  .msnav .menuknop{display:flex}
  body.msnav-open{overflow:hidden}
}

/* ═══════════ ruimte en leesbaarheid ═══════════ */

/* chips, labels en badges kregen te weinig lucht */
.badge-row,.who,.raise-legend,.legend,.assure,.trust-in,.top-meta,.meta-row,.contact,.paths,.actions,.tags{
  gap:12px 18px !important;
}
.chip,.tg,.badge,.act,.path,.who span{ line-height:1.35 }
.chip{ padding:5px 10px !important }
.tg{ padding:5px 10px !important }

/* koppen krijgen ademruimte boven zich */
section > .sh,section > .hd,section > .sec-head,section > .kop{ margin-bottom:26px }

/* kaarten en cellen iets ruimer */
.card,.cell,.panel,.pkg,.pc,.step,.q,.kpi{ line-height:1.6 }

/* ═══════════ mobiel ═══════════ */
@media (max-width:760px){
  section.s,section{ padding-top:52px !important }
  .hero,.cover{ padding-top:34px !important }

  h1{ letter-spacing:-.025em }
  .lead,.lede{ font-size:16.5px !important; line-height:1.6 }

  .card,.cell,.panel,.pkg,.pc,.step{ padding:22px !important }
  .cta,.close,.band{ padding:32px 22px !important }
  .tryout{ padding:26px 22px !important }

  /* alles wat breed is mag zijwaarts scrollen in plaats van de pagina te breken */
  .tw,.scrollx,.tbl-scroll,.pipe,.weeks,.cols{ overflow-x:auto; -webkit-overflow-scrolling:touch }

  /* aanraakvlakken minstens 44px */
  .btn,button.seg,button.tab,.seg button,.copy,.act{ min-height:44px }
  .btn{ padding:13px 20px }

  /* tabellen leesbaar houden */
  table{ font-size:14px }
  th,td{ padding:11px 14px !important }
}

@media (max-width:520px){
  .facts,.figs,.g4,.g3,.grid.g3,.grid.g4,.steps,.quotes,.price,.pkgs,.pricegrid,.cards{
    grid-template-columns:1fr !important;
  }
  .hero-cards,.hero-g,.calc,.calc-g,.seg,.segpanel,.funds{ grid-template-columns:1fr !important }
  .cta-row,.row{ flex-direction:column; align-items:stretch }
  .cta-row .btn,.row .btn{ width:100% }
  footer,.fb,.f-bottom{ flex-direction:column; gap:10px }
}

/* horizontaal scrollen van de pagina zelf voorkomen */
html,body{ overflow-x:hidden; max-width:100% }
img,svg,table{ max-width:100% }

/* redactieknop niet over de mobiele CTA heen */
@media (max-width:640px){ #redactie{ right:14px !important; bottom:14px !important } }

@media print{ .msnav{display:none} }