/* fonts.css */
/* Roboto, SIL Open Font License 1.1 */
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext-300-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-300-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext-300-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
:root {
  /* Kleuren (overgenomen van de huidige site) */
  --blue: #013db5;
  --blue-link: #0049b8;
  --blue-nav: #0031af;
  --blue-dark: #001e6b;
  --blue-darker: #001145;
  --blue-footer: #0a37a3;
  --blue-round: #0153c0;
  --blue-light: #84adff;
  --blue-lighter: #bdd6ff;
  --blue-pale: #e4eeff;
  --blue-card: #eff5ff;
  --green: #02af19;
  --green-check: #5d9227;
  --orange: #f78600;
  --orange-block: #f69101;
  --orange-bar: rgba(247, 134, 0, .6);
  --contact-bar: #5d6ca0;
  --star: #fbbc05;
  --wa: #188841;
  --wa-deep: #147237;

  --text: #64676a;
  --text-dark: #323232;
  --text-heading: #333;
  --text-soft: #444;
  --text-muted: #999;
  --text-footer: #6e6e6e;

  --grey-bg: #f4f4f4;
  --grey-box: #edeced;
  --grey-footer: #efefef;
  --grey-input: #eee;
  --grey-line: #ebebeb;
  --grey-border: #d7d7d7;

  /* Typografie */
  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Maten */
  --topbar-h: 55px;
  --nav-h: 65px;
  --gutter: 15px;
  --shadow-btn: 0 2px 10px rgba(0, 0, 0, .4);
  --shadow-input: 0 2px 4px rgba(0, 0, 0, .13);
  --radius: 5px;
}

@media (max-width: 991px) {
  :root {
    --topbar-h: 50px;
  }
}

/* base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 26px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -.2px;
}

h1 { font-size: 48px; line-height: 58px; font-weight: 400; }
h2 { font-size: 24px; line-height: 29px; }
h3 { font-size: 20px; line-height: 26px; }
h4 { font-size: 18px; line-height: 24px; }

p {
  margin: 0 0 26px;
  letter-spacing: -.2px;
}

ul,
ol {
  margin: 0 0 26px;
  padding-left: 20px;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

strong, b { font-weight: 700; }

[hidden] {
  display: none !important;
}

table {
  border-collapse: collapse;
  width: 100%;
}

iframe {
  border: 0;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: -.125em;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
  color: var(--blue);
  font-weight: 700;
}

.skip-link:focus {
  top: 8px;
}

/* grid.css */
/* Eenvoudig 12-koloms raster. Kolommen staan onder elkaar tot 768px (net als de huidige site). */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}

.col {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (min-width: 768px) {
  .col-1 { width: 8.3333%; }
  .col-2 { width: 16.6667%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.3333%; }
  .col-5 { width: 41.6667%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.3333%; }
  .col-8 { width: 66.6667%; }
  .col-9 { width: 75%; }
  .col-10 { width: 83.3333%; }
  .col-11 { width: 91.6667%; }
  .col-12 { width: 100%; }
}

@media (min-width: 992px) {
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; }
  .col-md-6 { width: 50%; }
  .col-md-8 { width: 66.6667%; }
  .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
  .col-lg-6 { width: 50%; }
  .col-lg-12 { width: 100%; }
}

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .show-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hide-tablet { display: none !important; }
}

/* Volle breedte binnen een smallere container */
.full-bleed,
.row--full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* buttons.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-size: 18px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  background: var(--blue);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
}

.btn:hover,
.btn:focus-visible {
  text-decoration: none;
  color: #fff;
}

.btn--primary { background: var(--blue); }
.btn--primary:hover { background: #0232a0; }

.btn--green { background: var(--green); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.btn--green:hover { background: #029816; }

.btn--white {
  padding: 5px 22px;
  font-size: 16px;
  line-height: 36px;
  color: var(--blue-link);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.btn--white:hover {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.btn--lg {
  padding: 9px 22px;
  font-size: 20px;
  line-height: 36px;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Knop met wit rondje en pijltje rechts */
.btn--icon {
  position: relative;
  padding-right: 70px;
}

.btn__icon {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  color: var(--blue);
}

.btn--green .btn__icon { color: var(--green); }

.btn__arrow {
  width: 15px;
  height: 15px;
  margin-left: -4px;
}

.btn--sm {
  padding: 5px 14px;
  font-size: 15px;
  line-height: 26px;
}

/* Oranje pijltje + blauwe tekst met lijn eronder */
.link-more,
.more-list li > a {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  gap: 8px;
  padding-bottom: 1px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--blue-link);
  border-bottom: 1px solid #cbcfd5;
}

.link-more .icon,
.more-list li > a .icon {
  width: 14px;
  height: 18px;
  color: var(--orange);
}

.link-more:hover,
.more-list li > a:hover {
  text-decoration: none;
  border-bottom-color: var(--blue-link);
}

.link-more--small {
  gap: 4px;
  padding-bottom: 5px;
  font-size: 16px;
  font-weight: 400;
  color: var(--blue-link);
  border-bottom-color: #979797;
}

.link-more--small .icon {
  width: 10px;
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--blue-round);
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}

.carousel-btn .icon {
  width: 24px;
  height: 24px;
}

.carousel-btn:hover { background: var(--blue); }
.carousel-btn:disabled { opacity: .4; cursor: default; }

/* header.css */
/* ============ Header: bovenbalk, logo en hoofdmenu ============ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transition: transform .3s ease;
}

.topbar {
  display: flex;
  justify-content: space-between;
  height: var(--topbar-h);
  background: #fff;
}

.topbar__brand {
  flex-shrink: 1;
  overflow: hidden;
  padding: 0 24px;
  white-space: nowrap;
  font-size: 16px;
  line-height: var(--topbar-h);
  color: #ccc;
}

.topbar__brand:hover { color: #999; text-decoration: none; }
.layout-home .topbar__brand { visibility: hidden; }

.topbar__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__list li {
  display: flex;
  border-left: 1px dashed #d9e2e8;
}

/* Live staat er (behalve bij het telefoonnummer) een spatie tussen icoon en tekst */
.topbar__list a {
  display: flex;
  align-items: center;
  gap: 10.45px;
  padding: 0 20px 0 21px;
  font-size: 18px;
  line-height: 18px;
  color: var(--blue-link);
}

.topbar__phone a {
  gap: 6px;
}

.topbar__list a:hover { text-decoration: none; color: var(--blue); }

.topbar__list .icon {
  width: 24px;
  height: 24px;
}

.topbar__google a {
  gap: 3px;
  padding-left: 20px;
  font-size: 12.3px;
  font-weight: 500;
  color: var(--text-dark);
}

.topbar__google .icon--google {
  width: 16px;
  height: 16px;
  margin-right: 2px;
}

.topbar__google .stars svg {
  width: 9px;
  height: 9px;
}

.topbar__iso { display: none; }

.stars {
  display: inline-flex;
  gap: 1px;
  vertical-align: middle;
}

.stars svg {
  width: 10px;
  height: 10px;
  fill: var(--star);
}

.icon--google {
  display: inline-block;
  flex-shrink: 0;
}

/* Logo: groot over de header, klein in de donkere balk na scrollen */
.logo {
  position: absolute;
  top: 100px;
  left: 30px;
  z-index: 3;
  display: block;
  width: 282px;
  transition: top .3s, left .3s, width .3s;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-burger { display: none; }

/* ---------- Desktop-menu ---------- */
@media (min-width: 992px) {
  .site-header.is-hidden {
    transform: translateY(calc(var(--topbar-h) * -1));
  }

  .site-header.is-scrolled .logo {
    top: calc(var(--topbar-h) + 10px);
    left: 10px;
    width: 165.9px;
  }

  .nav {
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    height: var(--nav-h);
    padding-right: 0;
    transition: background-color .3s;
  }

  .site-header.is-scrolled .nav {
    background: var(--blue-dark);
  }

  .nav__list {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav__list > li {
    position: relative;
    display: flex;
  }

  .nav__list > li > a {
    display: block;
    padding: 20px;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: .5px;
    color: #fff;
    transition: background-color .2s, color .2s;
  }

  .nav__list > li:hover > a,
  .nav__list > li:focus-within > a,
  .nav__list > li.is-open > a {
    color: var(--orange);
    background: var(--blue-nav);
    text-decoration: none;
  }

  .nav__list > li.nav__item--button > a {
    align-self: flex-start;
    margin: 7px 6px 0;
    padding: 11px 20px;
    line-height: 30px;
    text-align: center;
    border-radius: var(--radius);
    background: var(--green);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  }

  .nav__list > li.nav__item--button:hover > a {
    color: #fff;
    background: #029816;
  }

  .nav__toggle,
  .nav .mobile-only,
  .nav__contact {
    display: none;
  }

  /* Uitklapmenu's */
  .nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: none;
    min-width: 250px;
    margin: 0;
    padding: 20px 25px;
    list-style: none;
    background: var(--blue-nav);
  }

  .nav__list > li:hover > .nav__dropdown,
  .nav__list > li:focus-within > .nav__dropdown,
  .nav__list > li.is-open > .nav__dropdown {
    display: block;
  }

  .nav__list > li.is-mega {
    position: static;
  }

  .nav__dropdown--mega {
    left: auto;
    right: 20px;
    width: 800px;
    padding: 20px 5px 10px;
  }

  .nav__list > li:hover > .nav__dropdown--mega,
  .nav__list > li:focus-within > .nav__dropdown--mega,
  .nav__list > li.is-open > .nav__dropdown--mega {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Items: pijltje voor de link, regelhoogtes en afbreken zoals live */
  .nav__dropdown {
    font-size: 14px;
    line-height: 26px;
  }

  .nav__dropdown > li {
    padding: 0 0 10px 15px;
  }

  .nav__dropdown > li.has-children {
    padding: 0 15px;
  }

  .nav__dropdown li::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 8.5px 4px 3px 3px;
    border-top: 2px solid var(--orange);
    border-right: 2px solid var(--orange);
    transform: rotate(45deg);
  }

  .nav__dropdown a {
    padding: 8px 10px;
    font-size: 18px;
    line-height: 1.42857;
    font-weight: 700;
    letter-spacing: .5px;
    color: #fff;
  }

  .nav__dropdown > li.has-children > a {
    padding: 10px;
  }

  .nav__sub {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
  }

  .nav__sub > li {
    padding: 0 10px 0 20px;
  }

  .nav__sub a {
    font-weight: 400;
  }

  .nav__dropdown a:hover {
    color: var(--orange);
    text-decoration: none;
  }
}

/* ---------- Brede schermen: logo, balk en menu binnen 1400px ---------- */
@media (min-width: 1451px) {
  .topbar {
    padding: 0 calc((100% - 1400px) / 2 - 15px) 0 calc((100% - 1400px) / 2);
  }

  .logo,
  .site-header.is-scrolled .logo {
    left: calc((100% - 1400px) / 2);
  }

  .nav {
    padding-right: calc((100% - 1400px) / 2);
  }

  .nav__dropdown--mega {
    right: calc((100% - 1400px) / 2 + 20px);
  }
}

/* ---------- Kleinere desktop ---------- */
@media (min-width: 992px) and (max-width: 1400px) {
  .logo {
    top: 98px;
    width: 232px;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .nav__list > li > a {
    font-size: 16px;
  }

  .nav__list > li.nav__item--button > a {
    font-size: 18px;
  }
}

@media (min-width: 992px) and (max-width: 1170px) {
  .logo {
    top: 70px;
    left: 10px;
    width: 199px;
  }
}

@media (min-width: 992px) and (max-width: 1070px) {
  .topbar__brand {
    display: none;
  }

  .topbar__list {
    margin-left: auto;
  }
}

@media (min-width: 992px) and (max-width: 1150px) {
  .nav__list > li > a {
    padding: 15px 17px;
    line-height: 35px;
  }

  .nav__list > li.nav__item--button > a {
    padding: 11px 20px;
    line-height: 30px;
  }

  .nav__dropdown--mega {
    width: min(800px, calc(100vw - 40px));
  }
}

/* ---------- Badges links (alleen desktop) ---------- */
.side-badges { display: none; }

@media (min-width: 992px) {
  .side-badges { display: block; }

  .side-badge {
    position: fixed;
    left: 0;
    z-index: 80;
    width: 160px;
    padding: 7px;
    background: #fff;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, .3);
    transition: width .4s ease-in-out, left .4s ease-in-out;
  }

  .side-badge > a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    color: inherit;
  }

  .side-badge > a:hover { text-decoration: none; }

  .side-badge p {
    display: none;
    margin: 0;
  }

  .side-badge--jubileum {
    top: 240px;
    left: -265px;
    width: 425px;
    height: 144px;
  }

  .side-badge--jubileum:hover { left: 0; }

  .side-badge--jubileum p {
    display: block;
    padding: 0 18px 0 23px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -.2px;
    color: #e3b40d;
  }

  .side-badge--jubileum img {
    width: 146px;
    height: 100%;
    margin-left: auto;
    object-fit: contain;
  }

  .side-badge--iso {
    top: 410px;
    height: 140px;
  }

  .side-badge--iso img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 30%;
  }

  .side-badge--iso:hover { width: 310px; }
  .side-badge--iso:hover a { flex-direction: row; }

  .side-badge--iso:hover p {
    display: block;
    order: 2;
    padding-left: 10px;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-dark);
  }

  .side-badge--iso:hover img {
    width: 45%;
    height: 50%;
  }

  .layout-home .side-badge--google {
    display: none;
  }

  .side-badge--google {
    top: 574px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 121px;
  }

  .side-badge--google > .icon--google {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .side-badge__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-dark);
  }

  .side-badge__text { display: none; }

  .side-badge--google:hover {
    width: 310px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .side-badge--google:hover > .icon--google { margin: 0 0 0 10px; }
  .side-badge--google:hover .side-badge__rating { justify-content: flex-start; }

  .side-badge--google:hover .side-badge__text {
    display: block;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
  }
}

/* ---------- Mobiel en tablet ---------- */
@media (max-width: 991px) {
  .site-header {
    background: linear-gradient(var(--blue-dark) var(--topbar-h), transparent var(--topbar-h));
  }

  .site-header.is-hidden {
    transform: translateY(-95px);
  }

  .topbar {
    display: block;
    height: auto;
    padding-top: var(--topbar-h);
    background: transparent;
  }

  .topbar__brand,
  .topbar__list .hide-mobile {
    display: none;
  }

  .topbar__list {
    gap: 0;
    padding: 0 0 0 5px;
    background: var(--contact-bar);
  }

  .topbar__list li { border: 0; }

  .topbar__list a {
    gap: 4.47px;
    padding: 6px 10px 6px 5px;
    font-size: 14px;
    line-height: 26px;
    white-space: nowrap;
    color: #fff;
  }

  .topbar__phone a { gap: 1px; }

  .topbar__list .icon {
    width: 20px;
    height: 20px;
  }

  .topbar__iso {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 45px;
    padding: 0 15px 0 10px;
    font-size: 17px;
    color: #fff;
    background: var(--orange-bar);
  }

  .topbar__iso:hover { text-decoration: none; }

  .topbar__iso img {
    width: 25px;
    height: 35px;
    background: #fff;
    object-fit: fill;
  }

  .topbar__iso .topbar__jubileum {
    align-self: flex-start;
    width: 39px;
    height: 45px;
    margin: 0 0 0 auto;
    background: transparent;
  }

  .layout-inner .topbar__iso span,
  .layout-inner .topbar__iso .topbar__jubileum,
  .layout-team .topbar__iso span,
  .layout-team .topbar__iso .topbar__jubileum {
    display: none;
  }

  .logo {
    top: 0;
    left: 0;
    width: 143px;
    padding: 1px 4px;
  }

  .logo img {
    width: 135px;
    height: 50px;
  }

  .nav-burger {
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 34px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .nav-burger span:not(.sr-only) {
    display: block;
    height: 3px;
    border-radius: 1px;
    background: #fff;
    transition: transform .25s, opacity .25s;
  }

  .nav-open .nav-burger span:not(.sr-only) { opacity: .5; }

  .nav {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    overflow-y: auto;
    padding: 0 14px 40px;
    background: var(--blue-dark);
  }

  .nav-open .nav { display: block; }

  .nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav__list > li {
    position: relative;
    border-bottom: 1px solid #fff;
  }

  .nav__list > li.nav__item--button,
  .nav__list > li:last-child {
    border-bottom: 0;
  }

  .nav__list > li > a {
    display: block;
    padding: 17px 50px 17px 0;
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    color: #fff;
  }

  .nav__list > li.is-open > a { color: var(--orange); }

  .nav__list > li.nav__item--button > a {
    display: inline-block;
    margin: 10px 0;
    padding: 13px 25px;
    border-radius: var(--radius);
    background: var(--green);
  }

  .nav__toggle {
    position: absolute;
    top: 8px;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .nav__toggle::after {
    content: "";
    position: absolute;
    top: 19px;
    right: 14px;
    border: 6px solid transparent;
    border-top: 7px solid #fff;
  }

  .is-open > .nav__toggle::after {
    top: 12px;
    border-top-color: transparent;
    border-bottom: 7px solid #fff;
  }

  .nav__dropdown {
    display: none;
    margin: 0;
    padding: 0 0 12px 4px;
    list-style: none;
  }

  .is-open > .nav__dropdown { display: block; }

  .nav__dropdown a,
  .nav__sub a {
    position: relative;
    display: inline-block;
    padding: 6px 0 6px 18px;
    font-size: 17px;
    line-height: 26px;
    font-weight: 700;
    color: #fff;
  }

  .nav__dropdown a::before,
  .nav__sub a::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 1px;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--orange);
    border-right: 2px solid var(--orange);
    transform: rotate(45deg);
  }

  .nav__dropdown > li { margin-bottom: 4px; }

  .nav__sub {
    margin: 0;
    padding: 0 0 6px 20px;
    list-style: none;
  }

  .nav__sub a { font-weight: 400; }

  .nav__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 14px -14px 0;
    padding: 10px 10px;
    list-style: none;
    background: var(--blue-darker);
  }

  .nav__contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 12px;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    color: #fff;
  }

  .nav__contact li:first-child a { border-bottom: 1px solid #fff; }
  .nav__contact .icon { width: 20px; height: 20px; }
}

/* hero.css */
/* ============ Headerbeeld (hero) ============ */

.hero {
  position: relative;
  overflow-x: clip;
  margin-top: var(--topbar-h);
  background-color: var(--blue-dark);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
}

.hero[data-plain] {
  background-color: var(--blue-dark);
}

.hero__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  fill: #fff;
  pointer-events: none;
}

/* ---------- Binnenpagina's ---------- */
.hero--inner {
  height: 550px;
}

.layout-team .hero__wave {
  fill: var(--blue-dark);
}

/* ---------- Homepage ---------- */
.hero--home {
  height: 695px;
  background-position: 50% 0;
}

.hero--home .hero__wave {
  bottom: -1px;
}

/* Tot 1400px is de golf op binnenpagina's iets breder dan het scherm */
@media (max-width: 1400px) {
  .hero--inner:not(.hero--team) .hero__wave {
    bottom: -2px;
    width: 105%;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
}

.hero__intro {
  width: 50%;
  padding: 275px 15px 120px 120px;
}

.hero__intro h1 {
  margin: 0 0 20px;
  font-size: 39px;
  line-height: 39px;
  font-weight: 700;
  color: #fff;
}

.hero__intro ul {
  margin: 0;
  padding: 0 0 0 21px;
  list-style: disc;
}

.hero__intro li,
.hero__intro p {
  font-size: 24px;
  line-height: 29px;
  color: #fff;
}

.hero__intro p {
  margin: 26px 0 30px;
}

.hero__form {
  width: 50%;
  padding: 275px 15px 0 135px;
}

.hero__form .register-form {
  width: 350px;
}

.hero__form .link-more--small {
  gap: 4px;
  padding: 0;
  color: #fff;
  border: 0;
}

.hero__form .link-more--small span {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
}

.hero__form .link-more--small .icon {
  width: 8px;
  color: var(--orange);
}

/* Oranje pijltje voor 'In 2 stappen geregeld' (live ca. 5x9px) */
@media (min-width: 992px) {
  .hero__form .link-more--small {
    gap: 5px;
  }

  .hero__form .link-more--small .icon {
    align-self: flex-start;
    width: 13px;
    height: 13px;
    margin: 7.6px -3.4px 0 -4.6px;
  }

  .hero__form .link-more--small span {
    padding: 1px 0 4px;
  }
}

.hero .google-mobile {
  display: none;
}

/* Google-kaartje in de hero */
.google-card {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 428px;
  padding: 16px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 16px 8px rgba(0, 0, 0, .25);
}

.google-card__icon {
  width: 40px;
  height: 40px;
}

.google-card__score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: var(--text-dark);
}

.google-card__score .stars svg {
  width: 16px;
  height: 16px;
}

.google-card__text {
  font-size: 14px;
  line-height: 17px;
  color: #000;
}

.google-card__text a {
  color: var(--orange);
  text-decoration: underline;
}

@media (max-width: 1250px) {
  .hero__intro li,
  .hero__intro p { font-size: 20px; line-height: 24px; }
}

@media (max-width: 1200px) {
  .hero__intro { padding: 255px 15px 120px 40px; }
  .hero__form { padding: 255px 15px 0 55px; }
}

/* Kleine desktop: headerfoto op binnenpagina's is even hoog als op de homepage */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero--inner { height: 695px; }
}

/* Brede schermen: inhoud in een kolom van 1400px */
@media (min-width: 1451px) {
  .hero__inner {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* Vanaf 1511px begint de foto bovenaan de pagina (achter de witte balk) */
@media (min-width: 1511px) {
  .hero {
    margin-top: 0;
    background-position: 50% 12%;
  }

  .hero--home { height: 750px; }
  .hero__intro { padding: 300px 15px 120px 150px; }
  .hero__form { padding: 300px 15px 0 165px; }
}

/* Tablet: mobiele header, maar de foto met tekst erop zoals op desktop */
@media (min-width: 768px) and (max-width: 991px) {
  .hero {
    margin-top: 133px;
  }

  .hero--inner {
    height: 695px;
  }

  .hero--home {
    height: auto;
    min-height: 695px;
  }

  .hero__inner {
    flex-direction: column;
  }

  .hero__intro {
    width: 600px;
    max-width: 100%;
    padding: 150px 15px 0 40px;
  }

  .hero__form {
    width: 100%;
    padding: 30px 15px 160px 40px;
  }

  .hero--home .hero__wave {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero__wave {
    display: none;
  }

  .hero,
  .hero--team {
    background-position: 50% 40%;
  }

  .hero {
    margin-top: 133px;
  }

  .hero--inner {
    height: 300px;
    margin-top: 88px;
  }

  .hero--home {
    height: auto;
    min-height: 0;
    margin-top: 88px;
    background-size: 0 0;
    background-color: #fff;
  }

  /* Op mobiel staat de foto boven de tekst. Het kader is 300px hoog, net als
     live, zodat cover dezelfde uitsnede geeft; de Google-balk schuift eroverheen. */
  .hero--home::before {
    content: "";
    display: block;
    height: 300px;
    background-image: inherit;
    background-size: cover;
    background-position: 50% 40%;
  }

  .hero--home .hero__wave { display: none; }

  .hero__inner {
    flex-direction: column;
  }

  .hero .google-mobile {
    display: flex;
    position: relative;
    margin: -38px 0 0;
    padding: 6px 15px;
    background: #fff;
  }

  .hero__intro,
  .hero__form {
    width: 100%;
    padding: 25px 15px 0;
    background: #d9d9d9;
  }

  .hero__form .input {
    font-weight: 700;
  }

  .hero__form {
    padding-top: 0;
    padding-bottom: 36px;
  }

  .hero__intro h1 {
    margin-bottom: 4px;
    font-size: 24px;
    line-height: 29px;
    color: #6d6f71;
  }

  .hero__intro ul {
    padding-left: 22px;
    list-style: disc;
  }

  .hero__intro li {
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    color: #535353;
  }

  .hero__intro p {
    margin: 29px 0 30px;
    font-size: 16px;
    line-height: 19px;
    color: #535353;
  }

  .hero__google { display: none; }

  .hero__form .register-form { width: 100%; }

  .hero__form .link-more--small {
    gap: 6px;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: var(--orange);
    border: 0;
  }

  .hero__form .link-more--small span {
    padding: 0;
    border: 0;
  }

  .hero__form .link-more--small .icon { width: 14px; height: 22px; }
}

/* content.css */
/* ============ Inhoud van binnenpagina's ============ */

.main {
  position: relative;
  z-index: 2;
}

.main--inner {
  margin-top: -185px;
}

.main__box {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 50px 0;
  background: #fff;
}

/* Een alinea of kop die een tekstkolom afsluit krijgt 35px ruimte (zoals de oude paginabouwer) */
.main--inner .col > p:last-child,
.main--inner .col > :is(h2, h3, h4):last-child {
  margin-bottom: 35px;
}

/* Paginatitel staat bovenin de hero, met een witte lijn erachter */
.page-title {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: -184px -50px 10px -50px;
  font-size: 48px;
  line-height: 58px;
  font-weight: 400;
  color: #fff;
}

/* Lijn achter de titel: live 0,73em onder de bovenkant van de eerste regel */
.page-title::after {
  content: "";
  flex: 1 1 0;
  height: 2px;
  margin-top: .73em;
  background: #fff;
}

.page-title > span {
  flex: 0 1 auto;
}

.page-contact .intro {
  margin-bottom: 0;
}

.intro {
  margin-bottom: 35px;
}

/* Koppen uit de oude paginabouwer hadden standaard 10px ruimte eronder */
.main .heading:not(.page-title) {
  margin-top: 0;
  margin-bottom: 10px;
}

.main .intro p {
  margin: 0 0 30px;
  font-size: 24px;
  line-height: 38px;
  letter-spacing: .32px;
  color: var(--text-dark);
}

.main .intro p:last-child {
  margin-bottom: 0;
}

.sep {
  height: 1px;
  margin: 0 0 35px;
  border: 0;
  background: var(--grey-line);
}

/* Lopende tekst */
.main--inner p,
.main--inner li {
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -.2px;
  color: var(--text-dark);
}

.main--inner p {
  margin: 0 0 30px;
}

.main--inner h2 {
  margin: 0 0 26px;
  font-size: 24px;
  line-height: 29px;
  color: var(--text-dark);
}

.main--inner h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text);
}

.main--inner .col > ul,
.main--inner .col > ol {
  margin: 0 0 30px;
}

.main--inner .col:not(.info-hours) > ul:not([class]) {
  padding: 0;
  list-style: none;
}

.main--inner .col:not(.info-hours) > ul:not([class]) > li {
  margin: 0 0 10px;
  padding-left: 30px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: normal;
}

.main--inner .col:not(.info-hours) > ul:not([class]) > li:last-child {
  margin-bottom: 0;
}

.main--inner table {
  margin: 0 0 30px;
  font-size: 16px;
}

.main--inner th,
.main--inner td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.long-heading {
  word-break: break-word;
}

.aligncenter { vertical-align: bottom; }
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }

.single-image {
  margin: 0 0 35px;
}

.single-image--center { text-align: center; }
.single-image--right { text-align: right; }

.img-full img { width: 100%; }

.caption {
  max-width: 100%;
}

.caption__text {
  font-size: 14px;
  color: var(--text-muted);
}

.embed iframe,
.main--inner iframe {
  max-width: 100%;
  vertical-align: bottom;
}

@media (max-width: 600px) {
  .embed iframe,
  .main--inner iframe {
    width: 100%;
  }
}

/* Tekst + zijbalk (zoals op de huidige site: 59% / 39%) */
@media (min-width: 768px) {
  .main--inner .col-8:has(+ .col-4) {
    width: 59%;
    margin-right: 1%;
  }

  .main--inner .col-8 + .col-4 {
    width: 39%;
    padding: 0;
  }
}

.list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lijst met vinkjes */
.list-check {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-check li {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 10px;
  padding: 0 0 15px;
  font-size: 18px;
  line-height: 26px;
  color: var(--text);
  border-bottom: 1px solid #979797;
}

.list-check .icon--check {
  width: 20px;
  height: 20px;
  margin-right: 26px;
  color: var(--green-check);
}

/* Zijbalk: blauw blok met knop */
.box-cta,
.box-grey {
  margin: 0;
}

.box-cta {
  background: var(--blue-light);
}

.panel__body .list-divider {
  min-height: 35px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel__body .lead {
  display: block;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -.2px;
  color: var(--text-heading);
}

.panel__body .lead b {
  font-weight: 500;
}

.main--inner .panel__body .small {
  margin: 0 0 1px;
  padding: 10px 0 20px;
  font-size: 18px;
  line-height: 24px;
}

.panel__footer .btn {
  margin-top: 3px;
}

.box-grey {
  background: var(--grey-box);
}

.more-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.more-list li {
  margin-bottom: 30px;
}

.more-list li:last-child {
  margin-bottom: 0;
}

/* Overzichten (Actueel, Vacatures): lijst met berichten en lijnen ertussen */
.main--inner .col:not(.info-list):not(.location-box) > .more-list li,
.main--inner .col:not(.info-list):not(.location-box) > .more-list li:last-child {
  margin-bottom: 10px;
  padding: 15px 0;
  font-size: 15px;
  line-height: 26px;
}

.main--inner .col:not(.info-list):not(.location-box) > .more-list h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #000;
}

.main--inner .col:not(.info-list):not(.location-box) > .more-list p {
  margin-bottom: 10px;
}

.main--inner .more-list + .sep {
  box-sizing: content-box;
  padding-top: 20px;
  background-clip: content-box;
}

.main--inner .location-box .more-list li {
  margin-bottom: 10px;
  padding: 5px 0;
}

.location-box h3 {
  margin: 0 0 10px;
  padding-top: 10px;
  font-size: 24px;
  line-height: 24px;
  font-weight: 500;
}

.location-box p {
  margin: 0 0 10px;
}

.location-box p span {
  display: block;
}

/* Blauwe band met inschrijven, over de volle breedte */
.signup-band {
  position: relative;
  z-index: 1;
  padding-left: calc(50vw - 50% - 15px);
  padding-right: calc(50vw - 50% - 15px);
  background: var(--blue-pale) url("/assets/img/top-lines.png") no-repeat 0 0 / contain;
  box-shadow: 20px 20px 20px rgba(0, 0, 0, .19);
}

.signup-band h2 {
  margin-bottom: 26px;
}

.signup-band .register-form {
  max-width: 375px;
  margin-bottom: 35px;
}

.signup-band .register-form__row:not(:last-child) {
  margin-bottom: 20px;
}

.signup-band .col + .col h2 {
  margin-bottom: 8px;
}

.signup-band .list-check li {
  padding-bottom: 15px;
}

.link-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding-left: 4px;
  font-size: 17px;
  line-height: 28px;
}

.link-icon .icon--chevron {
  width: 12px;
  height: 16px;
  color: var(--orange);
}

/* Contactpagina: drie kolommen onder het formulier (zelfde opmaak als op de homepage) */
.main .contact-columns {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: 0 0 20px;
}

.line-heading {
  display: inline-block;
  max-width: 250px;
  margin: 0 0 10px;
  padding: 0 0 9px;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  border-bottom: 1px solid #cecece;
}

/* ---------- Kleine desktop en tablet ---------- */
@media (max-width: 1220px) {
  .main__box {
    width: 95%;
  }
}

/* Vanaf 1511px begint de headerfoto bovenaan; het blok blijft op dezelfde plek */
@media (min-width: 1511px) {
  .main--inner {
    margin-top: -130px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .main--inner {
    margin-top: -488px;
  }

  .main__box {
    width: 100%;
  }

  /* Tekst en zijbalk onder elkaar */
  .main--inner .col-8:has(+ .col-4),
  .main--inner .col-8 + .col-4 {
    width: 100%;
    margin-right: 0;
  }

  .main--inner .col-8 + .col-4 {
    padding: 0 15px;
  }

  .signup-band {
    padding-left: 35px;
    padding-right: 35px;
  }

  .signup-band > .col {
    width: 100%;
  }
}

/* ---------- Mobiel ---------- */
@media (max-width: 767px) {
  .main--inner {
    margin-top: -48px;
  }

  .main__box {
    width: 100%;
    padding: 30px 15px 0;
  }

  .main__box > .row {
    margin-left: 0;
    margin-right: 0;
  }

  .page-title {
    display: block;
    margin: -184px 0 10px;
    padding-right: 0;
    font-size: 24px !important;
    line-height: 50px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #fff;
  }

  .page-title::after { content: none; }

  .page-title > span {
    display: block;
    padding-right: 20px;
  }

  .main .intro p {
    font-size: 20px;
    line-height: 28px;
  }

  .main--inner h2 {
    margin-bottom: 15px;
    font-size: 16px !important;
    line-height: 25px !important;
  }

  .signup-band {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -30px;
    margin-right: -30px;
  }

  .signup-band > .col {
    padding-left: 30px;
    padding-right: 30px;
  }

  .list-check li {
    align-items: flex-start;
  }

  .list-check .icon--check {
    margin-top: 3px;
  }
}

@media (max-width: 398px) {
  .page-long-title .page-title {
    margin-top: -130px;
    line-height: 34px !important;
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  /* Volle breedte binnen het witte vak */
  .main__box > .signup-band,
  .main__box > .cta-banner {
    margin-left: -15px;
    margin-right: -15px;
  }

  .main__box > .signup-band {
    padding-left: 0;
    padding-right: 0;
  }

  .main__box > .signup-band > .col {
    padding-left: 30px;
    padding-right: 30px;
  }

  .main__box > .google-mobile {
    margin-left: 15px;
    margin-right: 15px;
  }

  .main--inner .category-card__title h2 {
    margin-bottom: 10px;
    padding-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .main__box > .signup-band > .col + .col {
    margin-top: 40px;
  }

  .main__box > .signup-band > .col + .col h2 {
    margin-bottom: 15px;
    line-height: 29px !important;
  }
}

/* home.css */
/* ============ Homepage ============ */

.main--home {
  width: calc(100% - 120px);
  max-width: 1320px;
  margin: 10px auto 0;
}

/* Drie blokken onder de hero */
.intro-blocks {
  margin: 0;
}

.intro-block {
  min-height: 471px;
  padding: 40px 50px 120px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.2px;
  color: var(--text-heading);
  background: var(--grey-bg) no-repeat 0 0 / cover;
}

.intro-block--1 { background-image: url("/assets/img/home-block-1.svg"); }
.intro-block--2 { background-image: url("/assets/img/home-block-2.svg"); }

.intro-block--3 {
  color: #fff;
  background-color: var(--orange-block);
}

.intro-block h3,
.intro-block .lead {
  margin: 0 0 28px;
  font-size: 24px;
  line-height: 29px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text-heading);
}

.intro-block .lead {
  margin: 0 0 15px;
  font-size: 24px;
  line-height: 35px;
  font-weight: 300;
  color: #fff;
}

.intro-block p {
  margin: 0 0 20px;
}

.intro-block a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}

.intro-block .btn {
  position: absolute;
  right: 35px;
  bottom: 35px;
  gap: 16px;
  padding: 9px 22px;
  font-size: 16px;
  line-height: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.intro-block--1 .btn { color: #2053c0; }

.intro-block--2 .btn,
.intro-block--3 .btn {
  color: #fff;
  background: var(--green);
}

.intro-block--2 .btn:hover,
.intro-block--3 .btn:hover {
  background: #029816;
}


.intro-block--3 .list-check li {
  position: relative;
  display: block;
  margin: 0 0 10px;
  padding: 0 0 0 32px;
  color: #fff;
  border: 0;
}

.intro-block--3 .list-check .icon--check {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  color: #fff;
  --check-mark: var(--orange-block);
}

/* Behandelcategorieën */
.main--inner .categories {
  margin-left: -30px;
  margin-right: -30px;
  padding: 0 75px;
}

.category-card {
  border: 2px solid var(--blue-card);
  background: #fff;
}

.category-card__image {
  height: 220px;
  background-size: cover;
  background-position: 50% 50%;
}

.category-card__body {
  padding: 30px;
}

.category-card__title h2 {
  margin: 0 0 10px;
  padding-bottom: 15px;
  font-size: 24px;
  line-height: 29px;
  color: var(--text-heading);
  border-bottom: 1px solid #f1f1f1;
}

.category-card__link {
  position: relative;
  padding: 7px 25px 7px 0;
}

.category-card__link a {
  display: inline;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-heading);
}

.category-card__link--empty {
  height: 14px;
  padding: 0;
}

.category-card__link .icon--arrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: 17px;
  height: 17px;
  margin-top: -7px;
  color: var(--blue-link);
}

.category-card__link a:hover { color: var(--blue); }

/* Brede blauwe banner */
.cta-banner {
  min-height: 380px;
  margin-top: 30px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 90px 40px 40px;
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;
}

.cta {
  padding: 63px 28px 63px;
}

.main .cta__title {
  margin: 0 0 26px;
  font-size: 41px;
  line-height: 29px;
  color: #fff;
}

.main .cta__text {
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  letter-spacing: -.2px;
  color: #fff;
}

.cta__btn,
.cta__text .btn {
  width: max(25%, 255px);
  height: 63px;
  margin-top: 30px;
  padding: 14px 20px;
  font-size: 20px;
  line-height: 35px;
  vertical-align: top;
}

.cta__btn .btn__icon,
.cta__text .btn .btn__icon {
  right: 20px;
  width: 35px;
  height: 35px;
  margin-top: -17.5px;
}

/* Vier kolommen met info */
.info-columns {
  margin-left: calc(50% - 50vw - 15px);
  margin-right: calc(50% - 50vw - 15px);
  padding-top: 35px;
  padding-bottom: 20px;
}

.info-columns .more-list li:last-child {
  margin-bottom: 10px;
}

.main .info-columns > .col > h2,
.main .info-questions h3 {
  max-width: 85%;
  margin: 0 0 26px;
  padding-bottom: 9px;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 400 !important;
  color: var(--text-soft);
  border-bottom: 1px solid #cecece;
}

.main .info-columns > .col > h2 {
  margin-bottom: 10px;
}

.main .info-columns .info-questions h3 {
  margin-bottom: 26px;
  line-height: 24px !important;
}

.main .info-columns h3 {
  max-width: 85%;
  margin: 0 0 10px;
  padding-bottom: 9px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-dark);
}

.main .info-hours h3 {
  max-width: none;
  padding-bottom: 0;
}

.main--home .info-columns p,
.main .info-hours ul li {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -.2px;
  color: #919191;
}

.main .info-columns p {
  margin-bottom: 10px;
}

.info-columns .more-list li {
  margin-bottom: 10px;
  padding-bottom: 15px;
  font-size: 15px;
}

.info-columns .more-list li > a {
  margin-top: 10px;
  font-size: 16px;
}

.info-columns .info-questions .more-list li > a {
  margin-top: 30px;
  font-size: 18px;
}

.main .info-questions p {
  margin-bottom: 10px;
}

.main .info-hours h3 {
  font-weight: 700;
}

.info-hours ul {
  display: grid;
  grid-template-columns: 132px 1fr;
  margin: 0 0 35px;
  padding: 0;
  list-style: none;
}

/* Ervaringen van patiënten */
.reviews {
  margin: 0 calc(50% - 50vw);
  padding: 64px 45px;
}

.reviews__title {
  margin: 0 0 88px;
  font-size: 40px;
  line-height: 52px;
  font-weight: 600;
  color: #000;
}

.reviews__track {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar { display: none; }

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 64px) / 3);
  min-height: 400px;
  padding: 32px;
  border: 1px solid #d2d8e8;
  background: #fff;
  box-shadow: 0 4px 40px 8px rgba(213, 213, 213, .24);
  scroll-snap-align: start;
}

/* Gekleurde hoek rechtsboven */
.review::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 3px;
  width: 123px;
  height: 65px;
  background: var(--blue-round);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 65'%3E%3Cpath d='M0 0h123v65l-4-3c-6-5-14-11-27-15C70 40 48 37 27 29 13 23 5 13 0 0z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 65'%3E%3Cpath d='M0 0h123v65l-4-3c-6-5-14-11-27-15C70 40 48 37 27 29 13 23 5 13 0 0z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.review--orange::after { background: var(--orange); }

.review__text {
  margin: 0 0 24px;
  padding-top: 64px;
  font-size: 24px;
  line-height: 33.6px;
  font-style: italic;
  font-weight: 300;
  color: #000;
}

.review__footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #d2d8e8;
}

.review__name {
  display: block;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #000;
}

.review__google {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 35px;
  height: 35px;
}

.reviews__nav {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 88px;
}

/* Logo's van partners */
.partners {
  margin: 0 calc(50% - 50vw);
  padding: 76px 45px;
  background: var(--grey-bg);
}

.partners__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  height: 100px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partners__list img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: contain;
}

.partners__list a { display: block; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .cta__title { font-size: 34px; }

  .partners__list {
    display: flex;
    gap: 32px;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .partners__list::-webkit-scrollbar { display: none; }

  .partners__list li {
    flex: 0 0 calc((100% - 64px) / 3);
    scroll-snap-align: start;
  }
}

@media (max-width: 1000px) {
  .partners { padding: 32px 40px; }
  .reviews__title { margin-bottom: 64px; }
  .reviews__nav { margin-top: 64px; }
}

@media (max-width: 898px) {
  .review { flex-basis: calc((100% - 32px) / 2); }
  .partners__list li { flex-basis: calc((100% - 32px) / 2); }
}

@media (max-width: 498px) {
  .review { flex-basis: 100%; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .main--home { width: 100%; margin-top: -128px; }
  .intro-blocks > .col { width: 100%; padding: 40px 35px 110px; }
  .intro-block h3 { font-size: 22px; }
  .intro-block p { font-size: 16px; line-height: 24px; }
  .categories { margin: 30px 0 0; padding: 0 15px; }
  .categories > .col { width: 50%; margin-bottom: 30px; }
  .info-columns { margin-left: 0; margin-right: 0; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 767px) {
  .main--home {
    width: 100%;
    margin-top: 0;
  }

  /* De blokken zijn (zoals live) iets breder dan het scherm; niet laten scrollen */
  .main--home {
    overflow-x: clip;
  }

  .intro-blocks > .col {
    width: calc(100% + 30px);
    min-height: 0;
    margin: 0 -15px;
    padding: 40px 50px 105px;
  }

  .intro-block h3 {
    font-size: 22px;
  }

  .intro-block p {
    font-size: 16px;
    line-height: 24px;
  }

  .intro-block p:not(.lead) {
    margin: 0 0 35px;
  }

  .intro-block--1,
  .intro-block--2 {
    background-color: var(--grey-bg);
  }

  .categories,
  .main--inner .categories {
    margin: 0;
    padding: 0 15px;
  }

  .categories > .col {
    margin-top: 30px;
    padding: 0;
  }

  .cta-banner {
    min-height: 0;
    padding: 50px 15px 55px !important;
  }

  .cta {
    padding: 0;
  }

  .main--home .cta__title {
    margin-bottom: 26px;
    font-size: 24px;
    line-height: 29px;
  }

  .main--home .cta__text {
    font-size: 14px;
    line-height: 26px;
  }

  .main--inner .cta__title {
    margin-bottom: 15px;
  }

  .main--inner .cta__text {
    font-size: 17px;
    line-height: 28px;
  }

  .cta__btn,
  .cta__text .btn {
    width: 100%;
  }

  .categories > .col-4 {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Live staat er onder de laatste kaarten nog een lege kolom (30px) plus 30px marge */
  .categories > .col-4:last-child {
    margin-bottom: 30px;
  }

  .categories ~ .cta-banner {
    margin-top: 60px;
  }

  /* Op binnenpagina's staat er nog een lege kolom tussen (de banner heeft een inline marge) */
  .main--inner .categories ~ .cta-banner {
    margin-top: 64px !important;
  }

  .categories > .col-4 .category-card__title h2 {
    min-height: 75px;
    max-width: 95%;
    font-size: 21px !important;
    line-height: 30px !important;
  }

  .main--inner .categories > .col-4 .category-card__title h2 {
    min-height: 90px;
  }

  .cta__btn {
    padding-left: 30px;
  }

  .info-columns {
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 20px;
  }

  .info-columns > .col {
    margin-bottom: 0;
    padding: 0 15px;
  }

  .main--home .info-columns > .col {
    padding-top: 35px;
  }

  .main--inner .info-columns > .col > h2 {
    margin-bottom: 15px;
    font-size: 16px !important;
  }

  .main--inner .info-columns .info-questions h3 {
    font-size: 20px !important;
  }

  .info-hours {
    margin-top: 10px;
  }

  .main .info-columns > .col > h2,
  .main .info-columns h3 {
    max-width: 95%;
  }

  .main--home .info-columns > .col > h2,
  .main--home .info-questions h3 {
    font-size: 20px !important;
  }

  .main .info-columns > .col > h2 {
    line-height: 29px !important;
  }

  .main--home .info-columns > .col > h2 {
    margin-bottom: 10px;
  }

  .main .info-list:not(.info-questions) .more-list h3 {
    margin-bottom: 10px;
    padding-bottom: 9px;
  }

  .info-columns .more-list li {
    margin-bottom: 10px;
  }

  .info-columns .more-list li > a {
    margin-top: 10px;
    font-size: 16px;
  }

  .main .info-questions p {
    margin-bottom: 10px;
  }

  .info-questions .more-list li > a {
    margin-top: 30px;
    font-size: 18px;
  }

  .reviews {
    padding: 64px 45px;
  }

}

/* ---------- Desktop: breedte van de inhoud (zoals live) ---------- */
@media (min-width: 992px) {
  /* Hoogte van de blokken volgt de tekst; live zijn ze 33,3% breed */
  .intro-block {
    min-height: 0;
  }

  .intro-blocks > .intro-block {
    width: 33.3%;
  }
}

@media (min-width: 992px) and (max-width: 1400px) {
  .main--home { width: calc(100% - 50px); max-width: none; }
}

@media (min-width: 992px) and (max-width: 1298px) {
  .main--home { margin-top: -50px; }
}

@media (min-width: 992px) and (max-width: 1069px) {
  .main--home { margin-top: -30px; }
}

@media (min-width: 992px) and (max-width: 1230px) {
  .intro-block h3 { font-size: 22px; }
  .intro-block p { font-size: 15px; }
}

/* Kaarten in de rij van drie: kleinere kop, vanaf 1100px met vaste hoogte */
@media (min-width: 992px) and (max-width: 1290px) {
  .categories > .col-4 .category-card__title h2 { font-size: 21px; }
}

@media (min-width: 992px) and (max-width: 1100px) {
  .categories > .col-4 .category-card__title h2 {
    width: 95%;
    min-height: 76px;
  }
}

@media (min-width: 1451px) {
  .main--home {
    width: 1310px;
    max-width: none;
  }

  /* Deze stroken lopen live niet door tot de rand, maar tot de kolom van 1400px */
  .main--home .info-columns {
    margin-left: calc((100% - 1400px) / 2 - 15px);
    margin-right: calc((100% - 1400px) / 2 - 15px);
  }

  .reviews > *,
  .partners > * {
    width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1471px) {
  .main--home { width: 1370px; }
}

@media (min-width: 1546px) {
  .main--home { width: 1400px; }
}

/* team.css */
/* ============ Teampagina ============ */

.layout-team {
  background: var(--blue-dark);
}

.hero--team {
  z-index: 0;
}

.main--team {
  width: calc(100% - 240px);
  max-width: 1200px;
  margin: -425px auto 0;
}

.team-intro {
  margin-left: calc(50% - 50vw - 15px) !important;
  margin-right: calc(50% - 50vw - 15px) !important;
  margin-top: 0 !important;
  text-align: center;
}

.team-intro .narrow {
  max-width: 800px;
  margin: 0 auto;
}

.team-intro h1 {
  margin: 0 0 6px;
  font-size: 48px;
  line-height: 58px;
  color: #fff;
}

.team-intro p {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -.2px;
  color: #fff;
}

.team-logos {
  justify-content: center;
  gap: 20px;
  margin: 35px 0 0;
  padding-bottom: 35px;
}

.team-logos > .col {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0;
}

.team-logo {
  margin: 0;
}

.team-logo img {
  width: 100px;
}

.team-group {
  margin: 0 0 15px;
}

.team-group:has(.team-footer) {
  margin-bottom: 0;
}

/* Ruimte tussen de groepen (de algemene regel zet de laatste marge in een kolom op 0) */
.team-group > .col > .team-grid {
  margin-bottom: 80px;
}

.team-group > .col {
  padding: 0;
}

.team-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 30px;
  font-size: 24px;
  line-height: 58px;
  color: #fff;
}

.team-heading__icon {
  width: 28px;
  height: 28px;
  --icon-gap: var(--blue-dark);
}

.team-grid {
  margin: 0 0 80px;
}

.team-grid > .col {
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  padding: 0;
}

.team-group .single-image {
  width: 100%;
  margin: 0 0 35px;
}

.team-group .single-image img {
  width: auto;
  max-width: 200px;
  height: auto;
}

/* Profielkaart */
.profile {
  --p-color: #a9c6d9;
  --p-soft: #edf2f7;
  --p-btn: #23a49e;
  --p-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 2.5C4.4 2.5 2.7 4.7 2.7 7.4c0 2.2.8 3.5 1.4 5.2.8 2.2.8 4.5 1.3 6.7.3 1.4 1 2.2 1.9 2.2 1 0 1.4-.9 1.7-2.3l.7-3.4c.3-1.3.7-2 1.3-2h2c.6 0 1 .7 1.3 2l.7 3.4c.3 1.4.7 2.3 1.7 2.3.9 0 1.6-.8 1.9-2.2.5-2.2.5-4.5 1.3-6.7.6-1.7 1.4-3 1.4-5.2 0-2.7-1.7-4.9-4.5-4.9-1.9 0-3 1-4.8 1s-2.9-1-4.8-1z'/%3E%3C/svg%3E");
  position: relative;
  width: 260px;
  height: 155px;
  margin: 0 0 40px;
  padding: 22px 22px 12px;
  overflow: hidden;
  border: 2px solid #f0f5fe;
  border-radius: 2px;
  background-color: #fdfdff;
  box-shadow: inset 0 0 0 2px #f0f5fe;
  /* Lichte cirkels op de achtergrond */
  background-image:
    radial-gradient(circle at 132px 18px, var(--p-soft) 0 27px, transparent 28px),
    radial-gradient(circle at 206px 22px, var(--p-soft) 0 27px, transparent 28px),
    radial-gradient(circle at 60px 64px, var(--p-soft) 0 27px, transparent 28px),
    radial-gradient(circle at 166px 76px, var(--p-soft) 0 27px, transparent 28px),
    radial-gradient(circle at 240px 70px, var(--p-soft) 0 20px, transparent 21px),
    radial-gradient(circle at 100px 128px, var(--p-soft) 0 27px, transparent 28px),
    radial-gradient(circle at 16px 140px, var(--p-soft) 0 20px, transparent 21px);
}

/* Grote gekleurde cirkel met icoon rechtsonder */
.profile::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: var(--p-color);
}

.profile::before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask: var(--p-icon) center / contain no-repeat;
  mask: var(--p-icon) center / contain no-repeat;
}

.profile__name {
  position: relative;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-dark);
}

.profile__role {
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  color: var(--p-color);
}

.profile__big {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 14px;
  margin: 0;
  font-size: 14px;
  line-height: 26px;
  font-weight: 700;
  color: var(--text-dark);
  opacity: .7;
}

.profile__info {
  display: none;
}

.profile--red {
  --p-color: #f29494;
  --p-soft: #fde9e9;
  --p-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5.5h19v4.3c0 1.5-.8 2.7-2 3.3h-15c-1.2-.6-2-1.8-2-3.3zM4.5 14.2h15c1.2.6 2 1.8 2 3.3v1h-19v-1c0-1.5.8-2.7 2-3.3z'/%3E%3C/svg%3E");
}

.profile--brown {
  --p-color: #d9cdbf;
  --p-soft: #f6f2ee;
  --p-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 6.2c-2 0-3.2 1.6-3.2 3.5 0 1.6.6 2.5 1 3.7.6 1.6.6 3.2.9 4.8.2 1 .7 1.6 1.4 1.6s1-.6 1.2-1.6l.5-2.4c.2-.9.5-1.4.9-1.4h1.4c.4 0 .7.5.9 1.4l.5 2.4c.2 1 .5 1.6 1.2 1.6s1.2-.6 1.4-1.6c.3-1.6.3-3.2.9-4.8.4-1.2 1-2.1 1-3.7 0-1.9-1.2-3.5-3.2-3.5-1.4 0-2.1.7-3.4.7s-2-.7-3.4-.7zM4 2.5l.6 1.6 1.6.6-1.6.6L4 6.9l-.6-1.6-1.6-.6 1.6-.6zM20.5 1.5l.5 1.2 1.2.5-1.2.5-.5 1.2-.5-1.2-1.2-.5 1.2-.5z'/%3E%3C/svg%3E");
}

.profile--yellow {
  --p-color: #ffd484;
  --p-soft: #fff6e6;
  --p-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.8 2h2.4v3.4h-2.4zM10.3 6.6h3.4l-.6 9.4h-2.2zM11 17.2h2l-.4 4.8h-1.2z'/%3E%3C/svg%3E");
}

.profile--blue {
  --p-color: #bfcbff;
  --p-soft: #eff2ff;
  --p-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15 2.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13zm0 2.4a4.1 4.1 0 1 0 0 8.2 4.1 4.1 0 0 0 0-8.2z'/%3E%3Cpath d='M10.3 12.4l1.4 1.4-7.9 7.9a1 1 0 0 1-1.4-1.4z'/%3E%3C/svg%3E");
}

.profile--dark-green {
  --p-color: #c2c5b7;
  --p-soft: #f2f3ef;
  --p-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.8l8.5 3.2v6.2c0 5.3-3.6 9.7-8.5 11.3-4.9-1.6-8.5-6-8.5-11.3V5zm-1.4 14.1l6.1-6.1-1.5-1.5-4.6 4.6-2.3-2.3-1.5 1.5z'/%3E%3C/svg%3E");
}

.profile--orange {
  --p-color: #ffc099;
  --p-soft: #fff1e8;
  --p-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 3.5h18v17H3zm3 3v2.2h5V6.5zm7 0v2.2h5V6.5zm-7 4.5v2.2h5V11zm7 0v2.2h5V11zm-7 4.5v2.2h12v-2.2z'/%3E%3C/svg%3E");
}

/* Onderkant van het blauwe deel: stippen en een witte boog */
.team-footer {
  position: relative;
  height: 180px;
  margin: 0 calc(50% - 50vw);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .12) 0 11px, transparent 12px) 0 50px / 32.5px 32.5px;
}

.team-footer::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 90Q720 230 1440 90V180H0z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.section {
  position: relative;
}

/* Wit deel onderaan: vacatures en inschrijven */
.team-extra {
  margin-left: calc(50% - 50vw - 15px);
  margin-right: calc(50% - 50vw - 15px);
  margin-top: 0;
  padding: 30px calc(50vw - 50% + 15px) 40px;
  color: var(--text-dark);
  background: #fff;
}

.team-extra .col {
  padding-left: 15px;
  padding-right: 15px;
}

.team-extra h2 {
  display: inline-block;
  max-width: 250px;
  margin: 0 0 10px;
  padding-bottom: 9px;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: var(--text-dark);
  border-bottom: 1px solid #cecece;
}

.team-extra h2 b { font-weight: 400; }

.team-vacancies h2 {
  min-width: 143px;
}

.team-vacancies h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #000;
}

.team-vacancies p {
  font-size: 16px;
  line-height: 26px;
  color: #999;
}

@media (min-width: 768px) {
  .team-vacancies li + li,
  .team-vacancies li > a {
    display: none;
  }
}

.team-extra p {
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 26px;
}

.team-extra .col + .col h2 {
  width: 250px;
  margin-bottom: 26px;
}

.team-extra .register-form {
  margin-bottom: 35px;
}

.team-extra .register-form__row:not(:last-child) {
  margin-bottom: 20px;
}

.team-group .single-image img[src$=".svg"] {
  width: 150px;
}

.team-extra .register-form {
  max-width: 400px;
}

.team-extra .register-form .input {
  background: #cdcdcd;
}

.team-extra .link-more--small {
  color: var(--blue-link);
}

.team-extra .link-more--small .icon {
  color: var(--orange);
}

/* Popup met meer informatie */
.modal {
  width: min(600px, calc(100% - 30px));
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.modal::backdrop {
  background: rgba(0, 0, 0, .5);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal__title {
  margin: 0;
}

.modal__close {
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  background: none;
  color: #000;
  opacity: .4;
  cursor: pointer;
}

.modal__close:hover { opacity: .8; }
.modal__close .icon { width: 20px; height: 20px; }

.modal__body {
  padding: 15px;
}

/* ---------- Tablet en mobiel ---------- */
@media (max-width: 1199px) {
  .main--team { width: calc(100% - 60px); }
  .team-grid > .col { column-gap: 20px; }
}

@media (max-width: 991px) {
  .hero--team {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 564px;
    margin-top: 0;
  }

  .hero--team .hero__wave { display: none; }

  .main--team {
    width: 100%;
    margin-top: 440px;
    padding: 0 15px;
  }
}

@media (max-width: 767px) {
  .main--team {
    margin-top: 180px;
    padding: 0;
    overflow-x: clip;
  }

  .team-intro > .col {
    padding: 0 30px;
  }

  .team-group > .col {
    padding: 0 15px;
  }

  .team-intro {
    margin-left: -15px !important;
    margin-right: -15px !important;
    text-align: left;
  }

  .team-intro h1 {
    margin: 0 0 40px;
    font-size: 20px;
    line-height: 50px;
    text-align: left !important;
    border-bottom: 2px solid #fff;
  }

  .team-intro p {
    margin: 0 -20px -20px;
    padding: 20px 25px 0;
    text-align: center;
  }

  .team-logos {
    min-height: 110px;
    margin: 35px 0 0;
    padding: 0 15px;
  }

  .team-group {
    margin: 0;
    padding-top: 30px;
  }

  .team-heading {
    margin: 10px 0 20px;
  }

  .team-intro + .team-group .team-heading:first-child {
    margin-top: 40px;
  }

  .profile {
    width: 100%;
    margin-bottom: 20px;
  }

  .team-group > .col > .team-grid {
    margin-bottom: 30px;
  }

  .team-group .single-image {
    margin-bottom: 20px;
  }

  .team-vacancies h2 {
    min-width: 0;
  }

  .team-vacancies li,
  .team-vacancies li:last-child {
    margin-bottom: 10px;
    padding-bottom: 15px;
    font-size: 15px;
  }

  .team-vacancies p {
    margin-bottom: 10px;
  }

  .team-vacancies li > a {
    font-size: 16px;
  }

  .team-footer {
    display: none;
  }

  .team-extra {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 30px 15px 40px;
  }
}

/* Desktop: headerfoto is op de teampagina 695px hoog */
@media (min-width: 992px) {
  .hero--team {
    height: 695px;
  }

  .main--team {
    margin-top: -570px;
  }
}

@media (min-width: 1511px) {
  .hero--team {
    height: 750px;
  }
}

/* forms.css */
/* ============ Formulieren ============ */

.input {
  display: block;
  width: 100%;
  height: 60px;
  padding: 5px 10px;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
  background: var(--grey-input);
  box-shadow: var(--shadow-input);
  appearance: none;
}

.input::placeholder {
  color: #999;
  opacity: 1;
}

.input:focus {
  outline: 0;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(132, 173, 255, .35);
}

.input--lg { height: 60px; }
.input--white { height: 40px; background: #fff; }
.input--grey { background: #f0f0f0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }

textarea.input {
  height: 160px;
  resize: vertical;
}

/* Snel inschrijven (geboortedatum + knop) */
.register-form__row {
  display: block;
  margin-bottom: 15px;
}

.register-form .input {
  background: #fff;
}

.register-form__row:last-child {
  margin-bottom: 0;
}

/* Contact-, vacature- en inschrijfformulier */
.form {
  margin: 16px 0 26px;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 0;
}

/* Elk veld heeft 16px ruimte rechts (zoals live) */
.form .field {
  padding-right: 16px;
}

/* Ruimte tussen label en veld */
.field__label + .input,
.field__label + .input-file,
.field__split {
  margin-top: 8px;
}

.form .field--check {
  min-height: 82px;
}

.field {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field--full { grid-column: span 4; }
.field--half { grid-column: span 2; }
.field--quarter { grid-column: span 1; }
.form .field--gap { margin-top: 44px; }

.field__label {
  display: inline-block;
  margin: 0 0 5px;
  padding: 0;
  font-size: 19px;
  line-height: 24.7px;
  color: var(--text);
}

.req {
  margin-left: 8px;
  color: #790000;
}

.field__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field__sub span {
  display: block;
  margin: 1px 0 9px 1px;
  font-size: 13px;
  line-height: 26px;
  font-weight: 700;
  color: var(--text);
}

.field__hint {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 26px;
  color: var(--text-muted);
}

.input-file {
  display: block;
  font: inherit;
  font-size: 16px;
}

.step-box {
  display: inline-block;
  width: min(600px, 100%);
  padding: 15px 35px 20px 30px;
  border-radius: var(--radius);
  color: #fff;
  background: var(--blue-dark);
}

.step-box h3 {
  /* 10px boven de kop, zoals live; de kleine regel sluit er zonder marge op aan */
  margin: 10px 0 5px;
  font-size: 22px;
  line-height: 26px;
  font-weight: 400;
  color: #fff;
}

.main--inner .step-box p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}

.main--inner .step-box .step-box__small {
  font-size: 13px;
  line-height: 26px;
}

.check-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 250px;
  padding: 16px 20px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-dark);
  cursor: pointer;
}

.check-box input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.persons__table {
  width: 100%;
}

.persons__table th {
  padding: 0 8px 8px 0;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  border: 0;
}

.persons__table td {
  padding: 0 8px 8px 0;
  border: 0;
}

.persons__actions {
  width: 80px;
  white-space: nowrap;
}

.persons__btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--grey-border);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  background: #fff;
  cursor: pointer;
}

/* Verzendknop: eenvoudig, zoals op de huidige site */
.form__submit {
  margin-top: 32px;
  padding: 1px 6px;
  border: 2px outset #767676;
  font: inherit;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  background: #efefef;
  cursor: pointer;
}

.form__submit:active {
  border-style: inset;
}

/* Het inschrijfformulier houdt 10px meer ruimte boven de knop dan het
   contactformulier, net als op de huidige site. */
.form--signup .form__submit {
  margin-top: 42px;
}

.form-notice {
  margin-top: 20px;
  padding: 15px 20px;
  border-left: 4px solid var(--orange);
  font-size: 16px;
  line-height: 26px;
  color: var(--text-dark);
  background: #fff4e6;
}

.form-notice strong {
  display: block;
}

@media (max-width: 767px) {
  .form__grid {
    grid-template-columns: 1fr;
  }

  .field--full,
  .field--half,
  .field--quarter {
    grid-column: auto;
  }

  .field__split {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 12px;
  }

  .form .field {
    padding-right: 0;
  }

  .field__hint {
    margin-top: 0;
    padding-top: 16px;
  }

  .form:not(.form--signup) .input--white {
    height: 46px;
  }

  .field__sub:last-child span {
    margin-bottom: 0;
  }

  textarea.input {
    height: 120px;
  }

  .form .field--check {
    min-height: 91px;
  }
}

.form__honeypot {
  display: none;
}

.form-notice__fallback {
  display: block;
}

.form-notice--ok {
  border-left-color: var(--green);
  background: #eef9ee;
}

.form-notice--error {
  border-left-color: #c0392b;
  background: #fdeeec;
}

/* widgets.css */
/* ============ Routeplanner en Google-badge ============ */

.routeplanner {
  position: relative;
  height: 550px;
}

.routeplanner__map {
  position: absolute;
  inset: 0;
  background: #e5e5e5 url("/assets/img/maps-bg.png") no-repeat 50% 50% / cover;
}

.routeplanner__wrap {
  position: relative;
  height: 100%;
}

.routeplanner__box {
  position: absolute;
  top: 100px;
  right: 25px;
  width: 450px;
  padding: 40px;
  background: #fff;
}

.routeplanner__box h2 {
  margin: 0 0 26px;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #505050;
}

.input-icon {
  position: relative;
  margin-bottom: 20px;
}

.input-icon .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  color: #b4b4b4;
}

.input-icon .input {
  padding-left: 45px;
}

.routeplanner__box form {
  margin-bottom: 16px;
}

.btn--route {
  padding: 15px 20px;
  font-size: 20px;
  line-height: 36px;
}

@media (min-width: 1451px) {
  .routeplanner__box {
    right: calc((100% - 1400px) / 2);
  }
}

/* Google-beoordeling bovenaan binnenpagina's (alleen mobiel) */
.google-mobile {
  display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
  .main__box > .google-mobile {
    display: flex;
    margin: 0 15px 22px;
  }

  .routeplanner {
    height: auto;
  }

  .routeplanner__map {
    position: relative;
    height: 550px;
  }

  .routeplanner__box {
    position: static;
    width: auto;
  }
}

@media (max-width: 991px) {
  .google-mobile {
    align-items: center;
    gap: 3px;
  }

  .google-mobile__badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 10px;
    border: 1px solid #f0efef;
    border-radius: 4px;
    font-size: 12.3px;
    line-height: 16px;
    font-weight: 500;
    color: var(--text-dark);
  }

  .google-mobile__badge .icon--google {
    width: 16px;
    height: 16px;
  }

  .google-mobile__text {
    font-size: 14px;
    line-height: 17px;
    font-weight: 700;
    color: var(--blue-dark);
  }

  .google-mobile__text span { font-weight: 400; color: var(--text-dark); }

  .google-mobile__text a {
    font-weight: 400;
    color: var(--orange);
    text-decoration: underline;
  }
}

@media (max-width: 767px) {
  .google-mobile {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0 0 22px;
  }

  .google-mobile__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px;
    border: 1px solid #f0efef;
    border-radius: 4px;
    font-size: 12.3px;
    line-height: 16px;
    font-weight: 500;
    color: var(--text-dark);
  }

  .google-mobile__badge:hover { text-decoration: none; }

  .google-mobile__badge .icon--google {
    width: 16px;
    height: 16px;
    margin-right: 2px;
  }

  .google-mobile__text {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-dark);
  }

  .google-mobile__text span { font-weight: 400; color: var(--text-dark); }

  .google-mobile__text a {
    font-weight: 400;
    color: var(--orange);
    text-decoration: underline;
  }

  .routeplanner {
    height: auto;
  }

  .routeplanner__map {
    position: relative;
    height: 410px;
  }

  .routeplanner__map {
    background-position: 35% 50%;
  }

  .routeplanner__wrap {
    padding-bottom: 10px;
  }

  .routeplanner__box {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: -10px 0 0;
    padding: 40px 25px;
  }
}

/* Zwevende WhatsApp-knop */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background: var(--wa);
  animation: wa-pulse 2.2s ease-out infinite;
}

.wa-float svg {
  width: 32px;
  height: 32px;
}

.wa-float:hover,
.wa-float:focus-visible {
  background: var(--wa-deep);
}

@keyframes wa-pulse {
  0% { box-shadow: 0 4px 14px rgba(20, 114, 55, .4), 0 0 0 0 rgba(24, 136, 65, .6); }
  70% { box-shadow: 0 4px 14px rgba(20, 114, 55, .4), 0 0 0 18px rgba(24, 136, 65, 0); }
  100% { box-shadow: 0 4px 14px rgba(20, 114, 55, .4), 0 0 0 0 rgba(24, 136, 65, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float {
    animation: none;
    box-shadow: 0 4px 14px rgba(20, 114, 55, .4);
  }
}

@media (max-width: 767px) {
  .wa-float {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
  }

  .wa-float svg {
    width: 28px;
    height: 28px;
  }
}

/* footer.css */
/* ============ Footer ============ */

.site-footer {
  position: relative;
  z-index: 3;
  padding-top: 20px;
  background: #fff;
}

.footer-cta {
  position: relative;
  padding: 20px 25px 10px;
  text-align: center;
  background: var(--grey-footer);
}

.footer-cta__wave {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: block;
  width: 100%;
  height: 20px;
  margin-bottom: -1px;
  fill: var(--grey-footer);
}

.footer-cta__title {
  margin: 0 0 26px;
  font-size: 24px;
  line-height: 29px;
  color: #505050;
}

.btn--cta {
  padding: 15px 90px 15px 37px;
  font-size: 20px;
  line-height: 36px;
}

.btn--cta .btn__icon {
  right: 20px;
}

.footer-links {
  padding: 0 0 30px;
  background: var(--grey-footer);
}

.footer-links__grid {
  display: grid;
  grid-template-columns: repeat(4, 272px);
  column-gap: 30.5px;
  max-width: 1270px;
  margin: 0 auto;
  padding: 20px;
}

.footer-links__col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links__col li {
  padding: 5px 0;
  font-size: 18px;
  line-height: 26px;
  border-bottom: 1px solid #ccc8c8;
}

.footer-links__col a {
  font-size: 18px;
  line-height: 26px;
  color: var(--text-footer);
}

.footer-links__col a:hover {
  color: var(--blue);
}

.footer-info {
  position: relative;
  padding-top: 35px;
  overflow: hidden;
  color: #fff;
  background-color: var(--blue-footer);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 0 10px, transparent 11px);
  background-size: 33px 33px;
  background-position: 5px 8px;
}

.footer-info__wave {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 11px;
  fill: var(--grey-footer);
}

.footer-info__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 0;
  padding: 0 40px 20px;
}

.footer-info h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 29px;
  color: #fff;
}

.footer-info p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

.footer-info__line {
  display: flex;
  align-items: center;
}

.footer-info__line .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.footer-info__line strong { font-weight: 700; }

.footer-info a {
  color: #fff;
}

.footer-info__logo img {
  display: block;
  width: 240px;
  height: 85px;
}

.footer-menu {
  width: 435px;
  margin: 36px -20px 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.footer-menu li {
  font-size: 18px;
  line-height: 26px;
}

.copyright {
  position: relative;
  padding: 25px 25px 7px;
  text-align: center;
  background: rgba(2, 45, 156, .65);
}

.copyright p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, .6);
}

.copyright a {
  margin: 0 5px;
  font-weight: 700;
  color: inherit;
}

@media (min-width: 992px) {
  .footer-info__logo {
    display: flex;
    justify-content: center;
  }

  .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    margin: 30px 0 0;
  }

  .footer-menu li {
    width: 40%;
    padding-left: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1300px) {
  .footer-info h2,
  .footer-info p,
  .footer-menu li {
    font-size: 15px;
  }
}

@media (min-width: 992px) and (max-width: 1150px) {
  .footer-menu {
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0;
  }

  .footer-menu li {
    width: 100%;
    line-height: 26px;
    text-align: right;
  }
}

@media (min-width: 1451px) {
  .footer-info__inner {
    padding-left: calc((100% - 1400px) / 2 + 40px);
    padding-right: calc((100% - 1400px) / 2 + 40px);
  }
}

@media (min-width: 992px) and (max-width: 1050px) {
  .footer-links {
    padding-bottom: 0;
  }

  .footer-links__grid {
    padding: 30px 20px 50px;
  }
}

/* Tot 1330px gebruiken de linkkolommen de hele breedte */
@media (max-width: 1330px) {
  .footer-links__grid {
    grid-template-columns: repeat(4, calc(24% - 22.8px));
    column-gap: 30px;
    max-width: none;
  }
}

@media (max-width: 991px) {
  .footer-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-info__inner {
    grid-template-columns: 1fr;
    padding: 0 25px 30px;
  }

  .footer-menu {
    width: auto;
    margin: 10px 0 0;
  }
}

@media (max-width: 767px) {
  .footer-cta,
  .footer-links {
    background: #fff;
  }

  .footer-cta__wave {
    display: none;
  }

  .footer-info__wave {
    fill: #fff;
  }

  .footer-links__grid {
    row-gap: 20px;
    padding: 15px 25px 35px;
  }

  .copyright a {
    font-weight: 400;
  }

  /* Live zet de footerlinks op mobiel een maat kleiner */
  .footer-links__col li,
  .footer-links__col a {
    font-size: 16px;
  }

  .footer-links {
    padding-bottom: 0;
  }

  .site-footer {
    padding-top: 0;
  }

  .routeplanner + .site-footer {
    margin-top: -50px;
  }

  .footer-info__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 25px 30px;
  }

  .footer-info__block:nth-child(3) {
    order: 2;
  }

  .footer-info__logo {
    order: 3;
    margin-top: 20px;
    text-align: center;
  }

  .footer-info__logo img {
    display: inline-block;
    margin-bottom: 20px;
  }

  .footer-menu {
    display: flex;
    flex-wrap: wrap;
    margin: 71px 0 20px;
    padding-left: 7px;
  }

  .footer-menu li {
    width: 50%;
    min-height: 36px;
    padding-left: 10px;
    font-size: 16px;
    line-height: 26px;
  }

  .copyright {
    margin-top: -25px;
  }

  .copyright p {
    max-width: 150px;
    margin: 0 auto;
  }

  .btn--cta {
    display: flex;
    width: 100%;
  }

  .footer-links__grid {
    grid-template-columns: 1fr;
  }

  .footer-info {
    padding-top: 30px;
  }

  .footer-info h2 {
    font-size: 15px;
  }

  .footer-info p,
  .footer-menu li {
    font-size: 15px;
  }

  .copyright {
    padding: 20px;
  }

  .copyright p {
    font-size: 14px;
  }
}

/* utilities.css */
/* ============ Hulpklassen ============ */

.pt-20 { padding-top: 20px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-30 { margin-bottom: 30px; }
.mr-5 { margin-right: 5px; }

.muted { color: var(--text-muted) !important; }
.small { font-size: 14px; line-height: 22px; }
.lead { font-size: 20px; line-height: 30px; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.spacer { display: block; }

.narrow {
  max-width: 800px;
}

@media print {
  .site-header,
  .side-badges,
  .routeplanner,
  .footer-cta,
  .footer-links {
    display: none !important;
  }

  .hero {
    height: auto;
    min-height: 0;
    background: none !important;
  }

  .main--inner {
    margin-top: 0;
  }

  .page-title {
    margin: 0 0 20px;
    color: #000;
  }
}