/* chrome.css — GENERATED by scripts/split-chrome-css.bb. Do not edit.
 * Part 1 is chrome-base.css (hand-written). Part 2 is every rule from
 * redesign.css whose selector targets the header, nav, footer, buttons
 * or .wrap, in source order. Re-run: bb scripts/split-chrome-css.bb */

/* ===== Part 1: chrome-base.css ===== */

/*
 * chrome-base.css — hand-written half of chrome.css (see split-chrome-css.bb).
 *
 * Loaded on EVERY page, legacy and redesigned, so everything in here must be
 * safe next to Divi CSS and next to cm.css. Rules are scoped to the chrome
 * elements; no bare body/img/heading resets.
 *
 * Contents:
 *   1. Font: Schibsted Grotesk, self-hosted (OFL). Variable weight 400–900.
 *   2. Defensive rules for legacy pages.
 *   3. Design tokens, scoped to the chrome so cm.css's :root values on
 *      legacy pages cannot leak into the header/footer and vice versa.
 *   4. Language switcher (not in the prototype; ported from the old chrome).
 *   5. Mobile menu (the prototype only hid the links below 900px).
 */

/* ── 1. Font ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk/schibsted-grotesk-latin.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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk/schibsted-grotesk-latin-ext.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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk/schibsted-grotesk-italic-latin.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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk/schibsted-grotesk-italic-latin-ext.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;
}

/* ── 2. Defensive rules for legacy pages ─────────────────────────────── */
/* Divi descendants (full-width sections, 100vw widths) cause horizontal
   scrollbars. `clip` keeps position: sticky working. Drop once Divi is gone. */
html, body { overflow-x: clip; }

/* The chrome sets its own font and box model; Divi and cm.css set theirs
   on body and would otherwise win on legacy pages. */
.cm-header, .cm-footer, .cm-header *, .cm-footer * { box-sizing: border-box; }
.cm-header, .cm-footer, .cm-btn {
  font-family: var(--cm-font);
  line-height: 1.5;
  overflow-wrap: break-word;
}
.cm-header img, .cm-footer img { max-width: 100%; display: block; }
.cm-header a, .cm-footer a { color: inherit; }
.cm-header [hidden], .cm-footer [hidden] { display: none !important; }
.cm-header ul, .cm-footer ul { list-style: none; margin: 0; padding: 0; }
.cm-header h2, .cm-footer h2 { line-height: 1.2; }

/* ── 3. Tokens, scoped to the chrome ─────────────────────────────────── */
/* Same values as :root in redesign.css. Scoped so the header and footer read
   the redesign palette even on a legacy page where cm.css redefines :root. */
.cm-header, .cm-footer, .cm-btn, .cm-nav-menu, .cm-langswitch__menu {
  --cm-bg:        #ffffff;
  --cm-bg-soft:   #f3f5f4;
  --cm-text:      #154c52;
  --cm-muted:     #4d6467;
  --cm-accent:    #154c52;
  --cm-border:    #e3e8e7;
  --cm-radius:    8px;
  /* One pill. redesign.css used 50px, 99px and 999px side by side; the
     buttons here read the token too, so a legacy page keeps round buttons. */
  --cm-radius-pil: 999px;
  /* The redesign's own palette, same values as :root in redesign.css. The
     chrome rules copied into this file use these names too, and a legacy page
     loads only this file, so they have to resolve here as well. */
  --wb-inkt:      #154c52;
  --wb-diep:      #0f3a3f;
  --wb-goud:      #fbc100;
  --wb-goud-l:    #ffd23f;
  --wb-grond:     #f3f5f4;
  --wb-staal:     #c9d1cf;
  --wb-lijn:      #e3e8e7;
  --wb-tekst2:    #3c5a5e;
  --wb-wit:       #ffffff;
  /* The roles, same as in redesign.css. The chrome rules copied into
     chrome.css read these, and a legacy page loads only this file. */
  --vlak:         var(--wb-wit);
  --op-vlak:      var(--wb-inkt);
  --vlak-om:      var(--wb-inkt);
  --op-vlak-om:   var(--wb-wit);
  --grond:        var(--wb-grond);
  --tekst-2:      var(--wb-tekst2);
  --lijn:         var(--wb-lijn);
  --op-goud:      var(--wb-inkt);
  --cm-font:      'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --cm-font-nav:  'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --cm-content-w: 1120px;
  --wb-inkt:   #154c52;
  --wb-diep:   #0f3a3f;
  --wb-goud:   #fbc100;
  --wb-goud-l: #ffd23f;
  --wb-grond:  #f3f5f4;
  --wb-lijn:   #e3e8e7;
  --wb-tekst2: #3c5a5e;
  --wb-wit:    #ffffff;
}

/* Keyboard focus inside the chrome: ink ring on light, gold on the dark footer. */
.cm-header :focus-visible, .cm-btn:focus-visible { outline: 3px solid var(--wb-inkt); outline-offset: 2px; }
.cm-footer :focus-visible { outline: 3px solid var(--wb-goud); outline-offset: 2px; }

/* The header sits above page content so the dropdown panels overlay it, and
   it sticks to the top while you scroll: the homepage runs to roughly five
   screens and the "Probeer gratis" button has to stay within reach. At rest
   the bar is invisible, so the top of a page looks exactly as designed; the
   surface and hairline fade in once you scroll (nav.js sets .is-vast) and
   whenever the mobile panel is open. The surface is drawn by a pseudo
   element because .cm-header is also the .wrap element, so its own
   background would stop at the content column. */
.cm-header { position: sticky; top: 0; z-index: 30; }
.cm-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;                      /* html has overflow-x: clip, so this cannot scroll sideways */
  transform: translateX(-50%);
  z-index: -1;
  background: var(--cm-bg-soft);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity .15s ease;
}
.cm-header.is-vast::before,
.cm-header.is-open::before { opacity: 1; border-bottom-color: var(--cm-border); }
@media (prefers-reduced-motion: reduce) {
  .cm-header::before { transition: none; }
}

/* ── 4. Language switcher ────────────────────────────────────────────── */
/* <details>/<summary>: native open/close; nav.js closes it on outside click
   and stores the choice in the cm_lang cookie for the apex redirect. Styled
   like the prototype's dropdown panels. */
.cm-langswitch {
  position: relative;
  font-size: 14px;
  font-weight: 600;
}
.cm-langswitch summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  color: var(--cm-text);
  padding: 4px 0;
}
.cm-langswitch summary::-webkit-details-marker { display: none; }
.cm-langswitch summary::marker { content: ''; }
.cm-langswitch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cm-langswitch__caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.cm-langswitch[open] .cm-langswitch__caret { transform: translateY(1px) rotate(-135deg); }
.cm-langswitch__menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 40;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(21, 76, 82, 0.14);
}
.cm-langswitch__menu li { margin: 0; }
.cm-langswitch__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--cm-radius);
  color: var(--cm-text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.cm-langswitch__menu a:hover { background: var(--cm-bg-soft); }
.cm-langswitch__menu a.is-current { font-weight: 700; background: var(--cm-bg-soft); }

/* ── 5. Mobile menu ──────────────────────────────────────────────────── */
/* Below 900px the prototype hides .cm-nav-links and stops. Here the burger
   opens the nav as a panel under the header; the dropdown groups render
   inline, expanded by the same toggle buttons nav.js already wires up. */
.cm-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cm-text);
  cursor: pointer;
  border-radius: var(--cm-radius);
}
.cm-burger svg { display: block; width: 26px; height: 26px; pointer-events: none; }
/* Het kruisje en de hamburger wisselen elkaar af. De klasse staat op de svg
   zelf, dus `.cm-burger svg` hierboven (0,1,1) wint het van een losse
   `.cm-burger__close` (0,1,0) en dan staan ze allebei in de kop. Vandaar dat
   het element hier meedoet in de selector. */
.cm-burger svg.cm-burger__close { display: none; }
.cm-header.is-open .cm-burger svg.cm-burger__open { display: none; }
.cm-header.is-open .cm-burger svg.cm-burger__close { display: block; }

/* The CTA repeats inside the panel so it can leave the header bar on
   narrow screens without disappearing. */
.cm-nav-mobile-only { display: none; }

@media (max-width: 900px) {
  .cm-burger { display: inline-flex; }
  .cm-nav-right { gap: 10px; }
  .cm-header .cm-btn { padding: 8px 16px; font-size: 13px; }
  .cm-header.is-open .cm-nav-mobile-only { display: block; padding: 18px 0 4px; border-bottom: 0; }
  .cm-header.is-open .cm-nav-mobile-only .cm-btn { display: inline-block; width: auto; padding: 10px 26px; font-size: 14px; }
  .cm-header nav[aria-label] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 24px 24px;
    background: var(--cm-bg);
    border-top: 1px solid var(--cm-border);
    border-bottom: 1px solid var(--cm-border);
    box-shadow: 0 16px 40px rgba(21, 76, 82, 0.14);
    /* The bar is sticky now, so the panel no longer scrolls away with the
       page: with both dropdown groups open it is taller than a phone screen
       and the bottom entries would be out of reach. It gets its own scroll.
       The percentage resolves against the header, which is the panel's
       containing block, so this follows the bar's real height. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cm-header.is-open nav[aria-label] { display: block; }
  .cm-header.is-open .cm-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 16px;
  }
  .cm-header.is-open .cm-nav-links > li { border-bottom: 1px solid var(--cm-border); }
  .cm-header.is-open .cm-nav-links > li > a,
  .cm-header.is-open .cm-nav-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
  }
  .cm-header.is-open .cm-nav-item--has-menu::after { display: none; }
  .cm-header.is-open .cm-nav-menu {
    position: static;
    width: auto;
    padding: 0 0 12px;
    border: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .cm-header.is-open .cm-nav-item.is-open .cm-nav-menu { display: block; }
  .cm-header.is-open .cm-nav-menu__list { grid-auto-flow: row; grid-template-rows: none; }
  .cm-header.is-open .cm-nav-menu__list a { padding: 10px 12px; }
  .cm-header.is-open .cm-nav-menu--rows4 { --cm-menu-rows: 1; }
}
@media (max-width: 480px) {
  .cm-header .cm-nav-right > .cm-btn { display: none; }
}

/* ── 7. Theme toggle ─────────────────────────────────────────────────── */
/* Sits next to the language switcher. Two states: the visitor's own choice
   wins over the system setting, and nav.js remembers it. Lives here rather
   than in redesign.css because the button is part of the chrome; the dark
   values it switches to are in redesign.css, so a legacy page shows the
   button only if it ever starts loading that file. Until then it is hidden
   there, because a switch that switches nothing is worse than none. */
.cm-theme {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cm-muted);
  cursor: pointer;
  border-radius: var(--cm-radius);
}
.cm-theme:hover { color: var(--cm-text); }
.cm-theme svg { display: block; width: 19px; height: 19px; pointer-events: none; }
/* The icon shows where the click takes you, not where you are: a moon on a
   light page, a sun on a dark one. Driven by the attribute and the media
   query rather than by aria-pressed, so it is right before nav.js runs;
   aria-pressed carries the state for screen readers. */
/* Het element doet mee in de selector omdat `.cm-theme svg` hierboven
   (0,1,1) het anders wint van een losse klasse (0,1,0). Zonder dat stonden
   de zon en de maan allebei in de kop. */
.cm-theme svg.cm-theme__sun { display: none; }
.cm-theme svg.cm-theme__moon { display: block; }
/* Alleen de pagina's met het volledige ontwerp kunnen schakelen. */
.cm-page-redesign .cm-theme { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  .cm-page-redesign:not([data-theme="light"]) .cm-theme svg.cm-theme__moon { display: none; }
  .cm-page-redesign:not([data-theme="light"]) .cm-theme svg.cm-theme__sun { display: block; }
}
.cm-page-redesign[data-theme="dark"] .cm-theme svg.cm-theme__moon { display: none; }
.cm-page-redesign[data-theme="dark"] .cm-theme svg.cm-theme__sun { display: block; }
.cm-page-redesign[data-theme="light"] .cm-theme svg.cm-theme__moon { display: block; }
.cm-page-redesign[data-theme="light"] .cm-theme svg.cm-theme__sun { display: none; }
@media (max-width: 480px) { .cm-theme { order: 2; } }

/* ------------------------------------------------------------------
   Cookiebanner

   De opmaak stond ooit in chrome.css, rechtstreeks met de hand erin gezet
   (commit 5e7b01f2a). Dat bestand wordt gegenereerd, dus de eerstvolgende
   bb split-chrome-css heeft het weggegooid. Sindsdien kreeg een bezoeker
   die voor het eerst kwam een kale kop "Cookies" onderaan de pagina. De
   live site draait nog de versie van vóór die generator-run, en dat is de
   enige plek waar het ooit goed stond.

   Die opmaak is hier terug, maar in de kleuren van het redesign in plaats
   van het Divi-blauw van toen, en met tokens die in de donkere modus
   meekantelen. Dit hoort in chrome-base, niet in chrome.css.
   ------------------------------------------------------------------ */
.cm-cookie-banner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  z-index: 10000;
  background: var(--vlak);
  color: var(--op-vlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  font-family: var(--cm-font);
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.cm-cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cm-cookie-banner[hidden] { display: none !important; }

.cm-cookie-banner__inner { padding: 20px 22px 18px; max-height: calc(100vh - 32px); overflow-y: auto; }

.cm-cookie-banner__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.cm-cookie-banner__head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--op-vlak); }
.cm-cookie-banner__close {
  background: none; border: 0; font-size: 28px; line-height: 1;
  color: var(--op-vlak); cursor: pointer; padding: 0 4px; opacity: .7;
}
.cm-cookie-banner__close:hover { opacity: 1; }

.cm-cookie-banner__intro { margin: 0 0 14px; color: var(--op-vlak); }

.cm-cookie-banner__categories {
  list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--lijn);
}
.cm-cookie-banner__categories[hidden] { display: none; }
.cm-cookie-banner__categories li { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.cm-cookie-banner__categories label {
  display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer;
}

/* Een schuifknop in plaats van een vinkje, zoals hij altijd was. */
.cm-cookie-banner__categories input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 22px; border-radius: 11px;
  background: var(--lijn); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 150ms ease;
}
.cm-cookie-banner__categories input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--vlak); transition: transform 150ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.cm-cookie-banner__categories input[type="checkbox"]:checked { background: var(--wb-goud); }
.cm-cookie-banner__categories input[type="checkbox"]:checked::after { transform: translateX(16px); }
.cm-cookie-banner__categories input[type="checkbox"]:disabled { opacity: .6; cursor: not-allowed; }
.cm-cookie-banner__categories input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--wb-goud); outline-offset: 2px;
}

.cm-cookie-banner__cat-name { color: var(--op-vlak); }
.cm-cookie-banner__cat-desc {
  margin: 4px 0 0 48px; font-size: 13px; color: var(--tekst-2); font-weight: 400;
}

.cm-cookie-banner__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cm-cookie-banner__btn {
  flex: 1 1 auto; min-width: 120px; padding: 10px 14px;
  border-radius: 8px; border: 1px solid var(--lijn);
  background: var(--vlak); color: var(--op-vlak);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.cm-cookie-banner__btn:hover { border-color: var(--op-vlak); }
.cm-cookie-banner__btn--primary {
  background: var(--wb-goud); border-color: var(--wb-goud); color: var(--op-goud);
}
.cm-cookie-banner__btn--primary:hover { filter: brightness(.95); }
.cm-cookie-banner__btn[hidden] { display: none; }

.cm-cookie-banner__legal { margin: 0; font-size: 12px; color: var(--tekst-2); text-align: center; }
.cm-cookie-banner__legal a { color: var(--tekst-2); text-decoration: underline; }
.cm-cookie-banner__legal a:hover { color: var(--op-vlak); }

/* Op een telefoon van rand tot rand, vastgeplakt aan de onderkant. */
@media (max-width: 480px) {
  .cm-cookie-banner {
    bottom: 0; right: 0; left: 0; width: 100%; border-radius: 12px 12px 0 0;
  }
}

/* ===== Part 2: chrome rules extracted from redesign.css ===== */

.wrap {
  max-width: var(--cm-content-w);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap:not(.cm-final-cta__card):not(.cm-cta-row) {
  padding-left: 24px;
  padding-right: 24px;
}
.cm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.cm-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--cm-font);
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--cm-text);
  letter-spacing: -0.01em;
}
.cm-nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
.cm-nav-links a {
  text-decoration: none;
  color: var(--cm-text);
}
.cm-nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cm-nav-item--has-menu {
  position: relative;
}
.cm-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--cm-text);
  cursor: pointer;
}
.cm-nav-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.cm-nav-item.is-open .cm-nav-caret {
  transform: translateY(1px) rotate(-135deg);
}
.cm-nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  z-index: 20;
  width: 560px;
  padding: 12px;
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(21, 76, 82, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.cm-nav-item.is-open .cm-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cm-nav-item--has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
.cm-nav-menu__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--cm-menu-rows, 3), auto);
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cm-nav-menu__list a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--cm-radius);
  transition: background 0.12s ease;
}
.cm-nav-menu__list a:hover {
  background: var(--cm-bg-soft);
}
.cm-nav-menu__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.cm-nav-menu--rows4 {
  --cm-menu-rows: 4;
}
.cm-nav-menu__kop {
  margin: 2px 14px 8px;
  font-family: var(--cm-font-nav);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cm-muted);
}
.cm-nav-menu__kop--tweede {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cm-border);
}
.cm-nav-menu__list--rijen1 {
  --cm-menu-rows: 1;
}
.cm-nav-menu__list--rijen2 {
  --cm-menu-rows: 2;
}
.cm-nav-menu__list--rijen3 {
  --cm-menu-rows: 3;
}
.cm-nav-menu__list a[aria-current="page"] {
  background: var(--cm-bg-soft);
}
.cm-nav-menu__list a[aria-current="page"] .cm-nav-menu__title {
  color: var(--cm-accent);
}
.cm-nav-menu__desc {
  display: block;
  font-family: var(--cm-font);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cm-muted);
}
@media (prefers-reduced-motion: reduce) {
  .cm-nav-menu,
.cm-nav-caret {
    transition: none;
  }
}
.cm-btn {
  display: inline-block;
  padding: 10px 26px;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--cm-radius-pil);
  border: 2px solid var(--cm-accent);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cm-btn--ghost {
  border: 2px solid var(--cm-accent);
}
.cm-footer {
  background:
    radial-gradient(52% 100% at 20% 0%, #247984 0%, rgba(36, 121, 132, 0) 60%),
    var(--vlak-om);
  color: #e3eeec;
  padding: 72px 0 32px;
  font-size: 14px;
}
.cm-footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) 3.4fr;
  gap: 32px;
  padding-bottom: 48px;
}
.cm-footer .cm-logo {
  color: var(--op-vlak-om);
  font-size: 22px;
}
.cm-footer__tagline {
  margin: 14px 0 22px;
  color: #a9c4c1;
  line-height: 1.6;
  max-width: 30ch;
}
.cm-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 32px;
}
.cm-footer__col {
  padding: 0 16px;
}
.cm-footer__col + .cm-footer__col {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.cm-footer__col:first-child {
  padding-left: 0;
}
.cm-footer__col:last-child {
  padding-right: 0;
}
.cm-footer__col h2 {
  font-weight: 700;
  color: var(--op-vlak-om);
  margin: 0 0 14px;
}
.cm-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cm-footer__col li {
  margin-bottom: 9px;
}
.cm-footer__col a {
  color: #e3eeec;
  text-decoration: none;
  line-height: 1.45;
  border-bottom: 1px solid transparent;
}
.cm-footer__col a:hover {
  color: var(--op-vlak-om);
  border-bottom-color: rgba(255,255,255,.5);
}
.cm-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 24px;
}
.cm-footer__legal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: #a9c4c1;
}
.cm-footer__legal a {
  color: #a9c4c1;
}
.cm-footer__legal a:hover {
  color: var(--op-vlak-om);
}
.cm-footer__social {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cm-footer__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #e3eeec;
  border: 1px solid rgba(255,255,255,.2);
}
.cm-footer__social a:hover {
  color: var(--cm-text);
  background: var(--vlak);
  border-color: var(--wb-wit);
}
.cm-footer__proto {
  margin: 22px 0 0;
  font-size: 12px;
  color: rgba(207,224,221,.5);
  text-align: center;
}
@media (max-width: 1080px) {
  .cm-footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cm-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    border-left: none;
    padding-left: 0;
  }
  .cm-footer__col,
.cm-footer__col:first-child,
.cm-footer__col:last-child {
    padding: 0;
  }
  .cm-footer__col + .cm-footer__col {
    border-left: none;
  }
}
@media (max-width: 700px) {
  .cm-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cm-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .cm-footer {
    background:
      radial-gradient(140% 70% at 50% 0%, rgba(36, 121, 132, .55) 0%, rgba(36, 121, 132, 0) 70%),
      var(--vlak-om);
  }
}
@media (max-width: 900px) {
  .cm-nav-links {
    display: none;
  }
}
.cm-nav-menu__foot {
  display: block;
  margin: 8px 12px 4px;
  padding: 10px 12px 2px;
  border-top: 1px solid var(--cm-border);
  font-family: var(--cm-font-nav);
  font-weight: 600;
  font-size: 13px;
  color: var(--cm-accent);
  text-decoration: none;
}
.cm-nav-menu__foot:hover {
  text-decoration: underline;
}
.cm-nav-utility {
  font-family: var(--cm-font-nav);
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-muted);
  text-decoration: none;
  white-space: nowrap;
}
.cm-nav-utility:hover {
  color: var(--cm-accent);
}
@media (max-width: 900px) {
  .cm-nav-utility {
    display: none;
  }
}
.cm-btn {
  background: var(--wb-goud);
  border-color: var(--wb-goud);
  color: var(--op-goud);
  font-family: var(--cm-font);
  font-weight: 700;
}
.cm-btn:hover,
.cm-btn:active {
  background: var(--wb-goud-l);
  border-color: var(--wb-goud-l);
}
.cm-btn--ghost {
  background: transparent;
  border-color: var(--op-vlak);
  color: var(--op-vlak);
}
.cm-btn--ghost:hover,
.cm-btn--ghost:active {
  background: var(--vlak-om);
  border-color: var(--op-vlak);
  color: var(--op-vlak-om);
}
.cm-btn--inverse {
  background: var(--wb-goud);
  border-color: var(--wb-goud);
  color: var(--op-goud);
}
.cm-btn--inverse:hover {
  background: var(--wb-goud-l);
  border-color: var(--wb-goud-l);
}
.cm-btn--donker {
  background: var(--vlak-om);
  border-color: var(--op-vlak);
  color: var(--op-vlak-om);
}
.cm-btn--donker:hover,
.cm-btn--donker:active {
  background: var(--wb-diep);
  border-color: var(--wb-diep);
}
.cm-nav-links,
.cm-nav-toggle,
.cm-nav-menu__title {
  font-family: var(--cm-font);
}
.cm-header .cm-btn,
.cm-footer .cm-btn {
  color: var(--op-goud);
}
.cm-header .cm-btn--donker,
.cm-footer .cm-btn--donker {
  color: var(--op-vlak-om);
}
.cm-footer :focus-visible {
  outline-color: var(--wb-goud);
}
.cm-footer .cm-btn {
  background: var(--wb-goud);
  color: var(--op-goud);
}
.cm-footer .cm-btn:hover {
  background: var(--wb-goud-l);
}
.cm-footer__col h2 {
  font-family: var(--cm-font);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}
.cm-footer a[href^="mailto"] {
  overflow-wrap: normal;
  white-space: nowrap;
  font-size: 0.9em;
}
.cm-logo__beeld {
  display: block;
  height: 30px;
  width: auto;
}
.cm-header .cm-btn {
  white-space: nowrap;
}
@media (max-width: 1120px) {
  .cm-logo__beeld {
    height: 26px;
  }
  .cm-header .cm-nav-links {
    gap: 18px;
  }
  .cm-header .cm-nav-utility[href$=".pdf"] {
    display: none;
  }
}
@media (max-width: 1120px) {
  .cm-header:not(.is-open) .cm-nav-menu--rows4 {
    left: 50%;
    transform: translate(-50%, -6px);
  }
  .cm-header:not(.is-open) .cm-nav-item.is-open .cm-nav-menu--rows4 {
    transform: translate(-50%, 0);
  }
}
@media (max-width: 1000px) {
  .cm-header .cm-nav-utility {
    display: none;
  }
  .cm-header .cm-nav-links {
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .cm-logo__beeld {
    height: 24px;
  }
}
.cm-nav-toggle,
.cm-nav-links > li > a,
.cm-nav-utility {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cm-langswitch summary {
  min-height: 44px;
}
.cm-nav-menu__foot {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.cm-footer__col li {
  margin-bottom: 0;
}
.cm-footer__col a,
.cm-footer__legal a {
  display: inline-block;
  padding-block: 11px;
}