:root {
  --vv-blue: #082b57;
  --vv-blue-dark: #041d39;
  --vv-orange: #ed5b0b;
  --vv-orange-dark: #c94700;
  --vv-white: #ffffff;
  --vv-text: #172334;
  --vv-muted: #5e6d7f;
  --vv-light: #f4f7fa;
  --vv-border: #d9e1ea;
  --content-width: 1240px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: var(--vv-text);
  background: var(--vv-white);
}

img { display: block; max-width: 100%; }
button, input { font: inherit; }
a { color: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(44px, 6vw, 80px); line-height: 1.04; }
h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.12; }
h3 { font-size: 22px; line-height: 1.2; }

.site-container {
  width: min(var(--content-width), calc(100% - 40px));
  margin-inline: auto;
}

.section { padding: 84px 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { z-index: 100; top: 10px; left: 10px; padding: 10px; background: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.eyebrow {
  margin-bottom: 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.eyebrow--dark { color: var(--vv-orange); }

@media (max-width: 767px) {
  body { font-size: 18px; line-height: 1.5; }
  .site-container { width: min(100% - 28px, var(--content-width)); }
  .section { padding: 58px 0; }
  h1 { font-size: clamp(40px, 12vw, 58px); }
}


/* Beperkte rich-text-opmaak uit het website-CMS. */
.vv-text-orange { color: var(--vv-orange, #ed5b0b); }
.vv-text-blue { color: var(--vv-blue, #082b57); }
.vv-text-dark { color: var(--vv-text, #172334); }