/* ---------------------------------------------------------------------------
 * Fonts — zelf gehost
 * Was: @import van fonts.googleapis.com. Twee redenen om dat te vervangen:
 * een @import blokkeert het fontverzoek tot de CSS binnen en geparsed is, en het
 * IP-adres van elke bezoeker ging naar een server buiten de EU. Deze site draait
 * verder volledig op eigen bestanden (cookieloze analytics, lokale GSAP).
 * Bestanden komen van Google Fonts (Open Font License), subsets latin + latin-ext.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-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: "Poppins";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-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: "Poppins";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-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;
}
/* Roboto is een variabel font: één bestand dekt 400 en 500. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-var-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: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-var-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;
}

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */
:root {
  --keyrol-blue: #304a5e;
  /* Rood op WCAG-sterkte: #e01f3d met wit = 4,73:1 (het oude #fc2647 haalde 3,81
     en zakte daarmee op de hoofd-CTA). Hover een stap donkerder. */
  --keyrol-red: #e01f3d;
  --keyrol-red-hover: #c81a35;
  --keyrol-grey: #e5e8e8;
  --keyrol-pistachio: #9ebfbd;
  --keyrol-text: #575858;
  --keyrol-white: #fff;

  --font-heading: "Poppins", "Arial Bold", Arial, "Helvetica Bold", Helvetica, sans-serif;
  --font-body: "Roboto", Calibri, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* Ankersprongen stoppen onder de vaste header met ~32px lucht boven de
     sublabel (header ~94px mobiel / ~120px desktop). */
  scroll-padding-top: 7rem;
}
@media (min-width: 48rem) {
  html {
    scroll-padding-top: 9.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--keyrol-text);
  background: var(--keyrol-white);
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Moet na de img/svg-regel hierboven staan: die won anders van het hidden-attribuut
   van de browser, waardoor de hamburger en het kruisje tegelijk zichtbaar waren. */
[hidden] {
  display: none !important;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  color: var(--keyrol-blue);
  font-weight: 700;
  margin: 0;
  /* Gelijke regellengtes in koppen, geen los woord op de laatste regel. */
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Layout helpers
 * ------------------------------------------------------------------------- */
.container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section {
  padding-block: clamp(4rem, 9vw, 7rem);
}
.section--white {
  background: var(--keyrol-white);
}
.section--grey {
  background: var(--keyrol-grey);
}
.section--pistachio {
  background: var(--keyrol-pistachio);
}

/* Navy doek: het diepe blauw als canvas, niet alleen als hero-achtergrond. De
   plattegrond komt hier terug als motief, zodat het beeldmerk van het platform
   meer dan één keer op de pagina staat. */
.section--navy {
  position: relative;
  overflow: hidden;
  background: var(--keyrol-blue);
  color: var(--keyrol-white);
}
.section--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/plattegrond.svg") center / cover no-repeat;
  pointer-events: none;
}
.section--navy > * {
  position: relative;
}
.section--navy h2,
.section--navy h3,
.section--navy h4,
.section--navy p,
.section--navy li,
.section--navy .section__title,
.section--navy .section-label,
.section--navy .regisseur__lead,
.section--navy .stat__number,
.section--navy .stat__label {
  color: var(--keyrol-white);
}
.section--navy .section-label::before {
  background: rgba(255, 255, 255, 0.45);
}
.section--navy figcaption,
.section--navy .platform-figure figcaption,
.section--navy .bewijs-figure figcaption {
  color: rgba(255, 255, 255, 0.78);
}
/* Op pistache haalt de grijze bodytekst (3,62:1) en het halftransparante blauw
   (3,30:1) de norm niet. Alleen blauw op volle sterkte: 4,71:1. */
.section--pistachio,
.section--pistachio p,
.section--pistachio li,
.section--pistachio figcaption,
.section--pistachio .prose-cap,
.section--pistachio .section-label {
  color: var(--keyrol-blue);
}

.section__title {
  margin-bottom: 2.5rem;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.25;
  color: var(--keyrol-blue);
}

.section-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 14px;
  color: var(--keyrol-blue);
}
.section-label::before {
  content: "";
  display: block;
  height: 1px;
  width: 2rem;
  background: rgba(48, 74, 94, 0.4);
}

.prose-cap {
  max-width: 65ch;
}

/* ---------------------------------------------------------------------------
 * Reveal-on-scroll
 * ------------------------------------------------------------------------- */
.reveal {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* Alleen verbergen wanneer JavaScript actief is; zonder JS blijft .reveal zichtbaar. */
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s, transform 0.7s;
  }
  .js .reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  padding: 12px 24px;
  transition: transform 0.18s, background-color 0.18s, box-shadow 0.18s, color 0.18s;
}
.btn-primary {
  background: var(--keyrol-red);
  color: var(--keyrol-white);
  border: none;
}
.btn-primary:hover {
  background: var(--keyrol-red-hover);
  transform: scale(1.02);
  box-shadow: 0 0 32px 4px rgba(224, 31, 61, 0.18);
}
.btn-secondary-light {
  background: transparent;
  color: var(--keyrol-white);
  border: 2px solid var(--keyrol-white);
}
.btn-secondary-light:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}
.btn-secondary-dark {
  background: transparent;
  color: var(--keyrol-blue);
  border: 2px solid var(--keyrol-blue);
}
.btn-secondary-dark:hover {
  background: rgba(48, 74, 94, 0.06);
  transform: scale(1.02);
}
.btn-blue {
  background: var(--keyrol-blue);
  color: var(--keyrol-white);
  border: none;
}
.btn-blue:hover {
  background: #263b4b;
  transform: scale(1.02);
}
/* Grijze knop op een donkere achtergrond: valt op als knop, maar concurreert
   niet met de rode hoofdactie ernaast. Dekkend grijs met blauwe letters, geen
   half-transparant wit: dat laatste liep weg tegen het donkerblauw van de hero
   en werd onleesbaar. */
.btn-grey {
  background: #dfe4e8;
  color: var(--keyrol-blue);
  border: none;
}
.btn-grey:hover {
  background: var(--keyrol-white);
  transform: scale(1.02);
  box-shadow: 0 0 24px 2px rgba(255, 255, 255, 0.14);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--keyrol-blue);
  outline-offset: 2px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible {
  outline-color: var(--keyrol-white);
}

.text-link {
  color: var(--keyrol-blue);
  font-weight: 500;
  text-decoration: none;
}
.text-link:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.site-header.is-solid {
  background: var(--keyrol-blue);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}
@media (min-width: 48rem) {
  .site-header__bar {
    padding: 1.5rem 2.5rem;
  }
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo img {
  height: 2rem;
  width: auto;
}
@media (min-width: 48rem) {
  .site-header__logo img {
    height: 2.25rem;
  }
}

.nav-pill {
  display: none;
}
/* De volledige balknavigatie verschijnt pas vanaf 80rem (1280px). Daaronder
   past de rij van acht items niet naast logo en knoppen: tussen 1024 en
   1150px werd het laatste item afgekapt. Onder 80rem gebruiken we het
   uitklapmenu, dat dezelfde items volledig toont. */
@media (min-width: 80rem) {
  .nav-pill {
    display: block;
  }
}
.nav-pill__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
/* Flex met align-items:center, anders bepaalt de line-box van de <li> de
   hoogte. De vier items met dropdown zijn een <button> en die kreeg daardoor
   een andere basislijn dan de <a>-items: labels stonden 1,9px lager. */
.nav-pill__item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-pill__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  padding-block: 0.4rem;
  /* Expliciet, want een <button> erft geen line-height van de body. */
  line-height: 1.6;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s;
}
.nav-pill__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--keyrol-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-pill__link:hover,
.nav-pill__link:focus-visible {
  color: var(--keyrol-white);
}
.nav-pill__link:hover::after,
.nav-pill__link:focus-visible::after {
  transform: scaleX(1);
}
.nav-pill__item.has-dropdown:hover .nav-pill__link::after,
.nav-pill__item.has-dropdown:focus-within .nav-pill__link::after,
.nav-pill__item.has-dropdown.is-open .nav-pill__link::after {
  transform: scaleX(1);
}
.nav-pill__trigger {
  background: none;
  border: none;
  cursor: pointer;
  /* padding-inline, niet de shorthand: die wiste de padding-block van
     .nav-pill__link en dat scheelde hoogte met de gewone links. */
  padding-inline: 0;
}
.nav-pill__caret {
  transition: transform 0.2s;
}

/* Dropdown-paneel (desktop) */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 15rem;
  background: var(--keyrol-white);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(48, 74, 94, 0.18);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 60;
}
.nav-dropdown::before {
  /* onzichtbare hover-brug zodat de muis van trigger naar paneel kan */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.9rem;
  height: 0.9rem;
}
.nav-pill__item.has-dropdown:hover .nav-dropdown,
.nav-pill__item.has-dropdown:focus-within .nav-dropdown,
.nav-pill__item.has-dropdown .nav-pill__trigger[aria-expanded="true"] + .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-pill__item.has-dropdown:hover .nav-pill__caret,
.nav-pill__item.has-dropdown .nav-pill__trigger[aria-expanded="true"] .nav-pill__caret {
  transform: rotate(180deg);
}
/* Klik-state via JS-class (bulletproof: wint altijd van de basis-hide) */
.nav-pill__item.has-dropdown.is-open .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}
.nav-pill__item.has-dropdown.is-open .nav-pill__caret {
  transform: rotate(180deg);
}
.nav-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-dropdown__list a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--keyrol-blue);
  transition: background-color 0.15s;
}
.nav-dropdown__list a:hover {
  background: rgba(48, 74, 94, 0.07);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.phone-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--keyrol-white);
  transition: opacity 0.15s;
}
.phone-link:hover {
  opacity: 0.8;
}

.header-link,
.cta-pill {
  display: none;
  border-radius: 4px;
  padding: 0.6rem 1.1rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
@media (min-width: 40rem) {
  .header-link,
  .cta-pill {
    display: inline-block;
  }
}

.header-link {
  color: var(--keyrol-white);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.header-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--keyrol-white);
}

/* Wit in plaats van rood: het rood blijft gereserveerd voor de ene CTA-knop per
   scherm. Wit op de blauwe header is nog steeds duidelijk de primaire actie. */
.cta-pill {
  color: var(--keyrol-blue);
  background: var(--keyrol-white);
  border: 1.5px solid var(--keyrol-white);
}
.cta-pill:hover {
  background: var(--keyrol-grey);
  border-color: var(--keyrol-grey);
}

.menu-toggle {
  color: var(--keyrol-white);
  display: inline-flex;
}
@media (min-width: 80rem) {
  .menu-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  background: var(--keyrol-blue);
  padding: 0 1.5rem 1.5rem;
}
@media (min-width: 80rem) {
  .mobile-nav {
    display: none !important;
  }
}
.mobile-nav.is-open {
  display: block;
}
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-nav__link {
  display: block;
  padding: 0.5rem 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
}
.mobile-nav__link:hover {
  color: var(--keyrol-white);
}
.mobile-nav__cta {
  display: block;
  padding: 0.5rem 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--keyrol-white);
}

/* Mobiele accordion-groepen */
.mobile-nav__group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 0.5rem;
}
.mobile-nav__acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.mobile-nav__acc svg {
  transition: transform 0.2s;
}
.mobile-nav__acc[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.75rem;
  display: none;
}
.mobile-nav__sub.is-open {
  display: block;
}
.mobile-nav__sub a {
  display: block;
  padding: 0.45rem 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.mobile-nav__sub a:hover {
  color: var(--keyrol-white);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--keyrol-blue);
  /* Hero vult bijna het scherm; precies 56px grijze NPS-balk piept als schone
     scroll-cue (valt volledig in de lege top-padding van de balk, geen tekst). */
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
}

/* Scroll-cue onderaan de hero: rode ronde knop met witte pijl. Rood staat los
   van de blauwe achtergrond en de witte patroonlijnen, zodat hij opvalt. */
.hero__scroll {
  /* Vast onderaan het beeld: de hero is hoger dan het scherm, dus in de
     hero zelf valt de knop onder de vouw. Verdwijnt na scrollen (main.js). */
  position: fixed;
  left: 50%;
  bottom: 1rem;
  margin-left: -32px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--keyrol-red);
  color: var(--keyrol-white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s, opacity 0.3s, visibility 0.3s;
}
.hero__scroll svg {
  width: 32px;
  height: 32px;
}
.hero__scroll:hover,
.hero__scroll:focus-visible {
  background: var(--keyrol-red-hover);
}
.hero__scroll:focus-visible {
  outline: 3px solid var(--keyrol-white);
  outline-offset: 4px;
}
.hero__scroll.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll {
    animation: hero-bob 1.8s ease-in-out infinite;
  }
}
@media (max-width: 640px) {
  .hero__scroll {
    bottom: 0.75rem;
    width: 56px;
    height: 56px;
    margin-left: -28px;
  }
  .hero__scroll svg {
    width: 28px;
    height: 28px;
  }
}
@keyframes hero-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.hero__bg {
  position: absolute;
  inset: -1.5rem;
}
.hero__drift {
  width: 100%;
  height: 100%;
}
.hero__pattern {
  width: 100%;
  height: 100%;
}

.hero__content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rem 1.5rem 4rem;
  text-align: center;
}

.hero__title {
  margin-inline: auto;
  max-width: 56rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--keyrol-white);
}

.hero__subline {
  margin-inline: auto;
  margin-top: 1.5rem;
  max-width: 620px;
  color: var(--keyrol-white);
}
.hero__subline span {
  color: rgba(255, 255, 255, 0.7);
}

.hero__cta {
  margin-top: 2.5rem;
}
.hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .hero__cta-row {
    flex-direction: row;
  }
}

.hero__trust {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}
.hero__trust span {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.hero__footer {
  position: relative;
  z-index: 10;
  padding: 0 1.5rem 2.5rem;
}
.hero__footer p {
  margin-inline: auto;
  max-width: 560px;
  text-align: center;
  font-size: 14px;
  line-height: 1.625;
  color: var(--keyrol-grey);
}

/* ---------------------------------------------------------------------------
 * Social proof
 * ------------------------------------------------------------------------- */
.social-proof {
  background: var(--keyrol-white);
  padding-block: 2.5rem;
}
@media (min-width: 48rem) {
  .social-proof {
    padding-block: 3rem;
  }
}
.social-proof__inner {
  margin-inline: auto;
  max-width: 1140px;
  padding-inline: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
@media (min-width: 40rem) {
  .social-proof__inner {
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
  }
}
.social-proof__number {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--keyrol-blue);
}
.social-proof__text {
  max-width: 460px;
  font-size: 17px;
  line-height: 1.625;
}

/* ---------------------------------------------------------------------------
 * Stappen
 * ------------------------------------------------------------------------- */
.steps-intro {
  margin-bottom: 3.5rem;
}

.steps-list {
  display: flex;
  flex-direction: column;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
}
@media (min-width: 48rem) {
  .step {
    gap: 0.5rem 2.5rem;
  }
}

.step__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step__number {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(48, 74, 94, 0.25);
}
.step__icon {
  margin-top: 1rem;
}
.step__line {
  margin-top: 1rem;
  width: 1px;
  flex: 1;
  background: var(--keyrol-grey);
}

.step__body {
  padding-bottom: 4rem;
}
.step__title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.375;
  color: var(--keyrol-blue);
}
.step__text {
  max-width: 65ch;
  margin-top: 1rem;
}
.step__text > * + * {
  margin-top: 1rem;
}

.roadmap {
  border-radius: 4px;
  border: 1px solid rgba(48, 74, 94, 0.3);
  background: var(--keyrol-white);
  padding: 1.25rem;
}
.roadmap__label {
  margin-bottom: 0.5rem;
  font-size: 11px;
}
.roadmap__text {
  font-size: 16px;
}

.media-placeholder {
  margin-top: 1.5rem;
}
.media-placeholder__box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--keyrol-grey);
  aspect-ratio: 16 / 9;
}
.media-placeholder__box span {
  padding-inline: 1.5rem;
  text-align: center;
  font-size: 14px;
  color: var(--keyrol-text);
}

/* ---------------------------------------------------------------------------
 * Portfolio + merkenlint
 * ------------------------------------------------------------------------- */
.portfolio__text {
  color: var(--keyrol-blue);
}
.portfolio__text--sub {
  margin-top: 1rem;
  font-size: 15px;
  color: var(--keyrol-blue);
}

/* Van beheerder naar regisseur (beheer / partnership) */
.regisseur__lead {
  margin-bottom: 1.25rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--keyrol-blue);
}
.regisseur__body + .regisseur__body {
  margin-top: 1rem;
}

/* Portfolio-tekst en merkenlint horen bij elkaar: het lint is het bewijs bij het
   verhaal erboven, net zoals het klantenlint het bewijs is bij de NPS. Daarom
   dezelfde behandeling als dat paar: één doorlopende achtergrond, geen lijn
   ertussen, en weinig ruimte tussen tekst en logo's. Wit als ondergrond, zodat
   de grijze leverancierslogo's rustig blijven staan. */
.portfolio-block {
  background: var(--keyrol-white);
}
.portfolio-block:has(+ .brand-ribbon) {
  padding-bottom: 0.75rem;
}
.brand-ribbon {
  background: var(--keyrol-white);
  padding-block: 0.25rem 2.25rem;
}
@media (min-width: 48rem) {
  .brand-ribbon {
    padding-block: 0.5rem 2.75rem;
  }
}
.brand-ribbon__label {
  display: flex;
  justify-content: center;
}
.brand-ribbon__label .section-label {
  margin-bottom: 0;
}

.brand-marquee {
  margin-top: 0.5rem;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 8% 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
}
.brand-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
}
.brand-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-inline-end: clamp(2.5rem, 6vw, 5rem);
}
@media (prefers-reduced-motion: no-preference) {
  .brand-marquee__track {
    animation: brand-scroll 50s linear infinite;
  }
  .brand-marquee:hover .brand-marquee__track {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brand-marquee__track,
  .brand-marquee__group {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .brand-marquee__group[aria-hidden="true"] {
    display: none;
  }
}
@keyframes brand-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.brand-logo {
  height: 48px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s, opacity 0.2s;
}
.brand-logo:hover {
  filter: grayscale(0);
  opacity: 1;
}
.brand-logo--invert {
  filter: grayscale(1) invert(1);
  opacity: 0.62;
}
.brand-logo--invert:hover {
  filter: grayscale(1) invert(1);
  opacity: 0.95;
}
.brand-logo--boost {
  opacity: 0.95;
}
.brand-logo--boost:hover {
  opacity: 1;
}
@media (max-width: 40rem) {
  .brand-logo {
    height: 36px;
  }
}

/* ---------------------------------------------------------------------------
 * Klantenlint
 * Zelfde loopmechaniek als het merkenlint, maar een eigen laag: grijze band
 * tussen twee witte secties, en logo's in één navy tint. Dat laatste is bewust:
 * de klantlogo's zijn bewijs, geen merkenparade, dus ze mogen niet met elkaar
 * en met de leverancierslogo's om aandacht concurreren. Loopt de andere kant op
 * dan het merkenlint, zodat de twee linten niet als dubbeling lezen.
 * ------------------------------------------------------------------------- */
/* Zelfde grijs als het NPS-blok erboven, met weinig ruimte ertussen: het cijfer
   en de logo's horen als één bewijsblok te lezen, niet als twee stroken. Het
   NPS-blok houdt zijn eigen ruimte waar het alleen staat; alleen met het lint
   eronder mag de onderkant dicht. Browsers zonder :has() krijgen de ruimere
   variant, wat er nog steeds goed uitziet. */
.social-proof:has(+ .client-ribbon) {
  padding-bottom: 0.75rem;
}
.client-ribbon {
  background: var(--keyrol-grey);
  padding-block: 0.25rem 2.25rem;
}
@media (min-width: 48rem) {
  .client-ribbon {
    padding-block: 0.5rem 2.75rem;
  }
}
.client-ribbon__label {
  display: flex;
  justify-content: center;
}
.client-ribbon__label .section-label {
  margin-bottom: 0;
  /* 8 okt 2026 (KEY-37): --ink-muted haalt op --keyrol-grey maar 4,48:1;
     --keyrol-text haalt 5,8:1. */
  color: var(--keyrol-text);
}
.brand-marquee__group--clients {
  gap: clamp(2.25rem, 5vw, 4rem);
  padding-inline-end: clamp(2.25rem, 5vw, 4rem);
}
@media (prefers-reduced-motion: no-preference) {
  .brand-marquee__track--clients {
    animation-duration: 75s;
    animation-direction: reverse;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__group--clients {
    gap: 1.75rem 2.5rem;
    row-gap: 1.75rem;
  }
}

/* Begrenzen op hoogte én breedte. De bestanden zijn al op één optisch formaat
   gezet (maximaal 300x96 op 2x), dus een dubbele cap laat elk logo precies op
   halve bestandsmaat landen. Alleen op hoogte begrenzen zou brede wordmarks als
   TenneT twee keer zo breed maken als de rest. */
.client-logo {
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 48px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.client-logo:hover {
  opacity: 1;
}
@media (max-width: 40rem) {
  .client-logo {
    max-width: 112px;
    max-height: 36px;
  }
}

/* ---------------------------------------------------------------------------
 * Bewijs
 * ------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
@media (min-width: 40rem) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.stat {
  padding-block: 1rem;
}
.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--keyrol-blue);
}
.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 15px;
}

.bewijs-figures {
  margin-top: 4rem;
  display: grid;
  align-items: start;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .bewijs-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .bewijs-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bewijs-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bewijs-figure__media {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--keyrol-white);
  border: 1px solid var(--keyrol-grey);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.bewijs-figure__media svg {
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  box-sizing: border-box;
}
.bewijs-figure__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* crop links/rechts gelijk weg; middelste rapport wordt rechts iets gekropt */
  object-fit: cover;
  object-position: left center;
}
button.bewijs-figure__media {
  padding: 0;
  cursor: zoom-in;
  appearance: none;
}
.bewijs-figure__media--zoom img {
  transition: transform 0.4s ease;
}
.bewijs-figure__media--zoom:hover img {
  transform: scale(1.03);
}
.bewijs-figure figcaption {
  margin-top: 0.875rem;
  font-size: 14px;
  min-height: 2.6em;
}

/* Lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 28, 0.82);
  cursor: zoom-out;
}
.lightbox__dialog {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
}
.lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  cursor: zoom-out;
}
/* Sluithint onder de afbeelding, zodat duidelijk is hoe je terug komt. */
.lightbox__dialog::after {
  content: "Klik op de afbeelding of druk op Esc om te sluiten";
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.lightbox__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--keyrol-white);
  border-radius: 50%;
  background: rgba(15, 22, 28, 0.75);
  color: var(--keyrol-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.lightbox__close:hover {
  background: var(--keyrol-red);
}

.bewijs__case-link {
  margin-top: 3rem;
}

/* ---------------------------------------------------------------------------
 * Voor wie
 * ------------------------------------------------------------------------- */
.voorwie-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .voorwie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile--wide {
    grid-column: 1 / -1;
  }
}

.tile {
  background: var(--keyrol-white);
  border: 1px solid var(--keyrol-grey);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s, box-shadow 0.18s;
  padding: 1.75rem;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tile__icon {
  display: block;
  margin-bottom: 1rem;
}
.tile__title {
  margin-top: 0;
  font-size: 1.2rem;
  line-height: 1.375;
  color: var(--keyrol-blue);
  font-family: var(--font-heading);
}
.tile__text {
  max-width: 65ch;
  margin-top: 0.75rem;
  font-size: 16px;
}
.tile__list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tile__list li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--keyrol-grey);
  border-radius: 999px;
  background: #f4f6f7;
  color: var(--keyrol-blue);
  font-size: 0.9rem;
  font-weight: 600;
}
.tile__badge {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e8ecef;
  color: var(--keyrol-blue);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Link-grid (o.a. 404-pagina): kaartjes naar veelbezochte pagina's */
.link-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) {
  .link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60rem) {
  .link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.link-card {
  display: block;
  background: var(--keyrol-white);
  border: 1px solid var(--keyrol-grey);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  padding: 1.5rem;
  text-decoration: none;
}
.link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--keyrol-blue);
}
.link-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--keyrol-blue);
}
.link-card span {
  display: block;
  margin-top: 0.4rem;
  font-size: 15px;
  color: var(--keyrol-text);
}

/* ---------------------------------------------------------------------------
 * Nulmeting
 * ------------------------------------------------------------------------- */
.nulmeting-intro {
  margin-bottom: 3rem;
}

.nulmeting-grid {
  display: grid;
  align-items: start;
  gap: 2.5rem;
}
@media (min-width: 64rem) {
  .nulmeting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wizard,
.voorstel-form,
.voorstel-form__success {
  border-radius: 8px;
  background: var(--keyrol-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1.75rem;
}
@media (min-width: 48rem) {
  .wizard,
  .voorstel-form,
  .voorstel-form__success {
    padding: 2.5rem;
  }
}

.wizard__progress-label {
  margin-bottom: 1.5rem;
  font-size: 12px;
  color: var(--keyrol-text);
}
.wizard__progress-bar {
  margin-bottom: 2rem;
  display: flex;
  gap: 0.5rem;
}
.wizard__progress-step {
  height: 3px;
  flex: 1;
  border-radius: 999px;
  background: var(--keyrol-grey);
}
.wizard__progress-step.is-active {
  background: var(--keyrol-blue);
}

.wizard__question {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.375;
  color: var(--keyrol-blue);
  font-family: var(--font-heading);
}

.wizard__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wizard-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--keyrol-text);
  background: var(--keyrol-white);
  border: 1px solid #c8cdcd;
  border-radius: 4px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.wizard-option:hover {
  border-color: var(--keyrol-blue);
}
.wizard-option.is-selected {
  border-color: var(--keyrol-blue);
  color: var(--keyrol-blue);
  background: #eef1f3;
  font-weight: 500;
}
.wizard-option:focus-within {
  outline: 3px solid var(--keyrol-blue);
  outline-offset: 2px;
}

.wizard__nav {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wizard__result-label {
  margin-bottom: 0.75rem;
  font-size: 12px;
}
.wizard__result-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--keyrol-blue);
}
.wizard__result-text {
  margin-top: 1rem;
  max-width: 65ch;
}
.wizard__result-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .wizard__result-actions {
    flex-direction: row;
    align-items: center;
  }
}
.wizard__result-actions .text-link {
  font-size: 15px;
}

.wizard__email-form {
  margin-top: 2.5rem;
  border-top: 1px solid var(--keyrol-grey);
  padding-top: 2rem;
}
.wizard__email-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--keyrol-blue);
}
.wizard__email-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
}
@media (min-width: 40rem) {
  .wizard__email-row {
    flex-direction: row;
  }
}
.wizard__email-row .btn {
  flex-shrink: 0;
}
.wizard__email-sent {
  font-weight: 500;
  color: var(--keyrol-blue);
}

/* ---------------------------------------------------------------------------
 * Toegangsscan-wizard (v1.2) — aanvullend op .wizard/.wizard-option
 * ------------------------------------------------------------------------- */
.scan-intro {
  margin-bottom: 1.25rem;
  font-size: 15px;
  color: var(--keyrol-text);
}
.scan-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--keyrol-grey);
  margin-bottom: 2rem;
  overflow: hidden;
}
.scan-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--keyrol-blue);
  border-radius: 999px;
  transition: width 0.3s;
}
.scan-step {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.scan-search {
  margin-bottom: 1rem;
}
.scan-families {
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 34rem) {
  .scan-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.scan-nis2-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(48, 74, 94, 0.25);
  background: #eef1f3;
  font-size: 14px;
  color: var(--keyrol-blue);
  border-radius: 4px;
}
.scan-opt {
  font-weight: 400;
  color: var(--keyrol-text);
  font-size: 13px;
}

/* Resultaat: Grip-score */
.grip-score {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0.5rem 0 0.25rem;
  font-family: var(--font-heading);
  line-height: 1;
}
.grip-score__num {
  font-size: clamp(3.2rem, 9vw, 4.6rem);
  font-weight: 700;
  color: var(--keyrol-blue);
}
.grip-score--laag .grip-score__num {
  color: var(--keyrol-red);
}
.grip-score__max {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--keyrol-text);
}
.grip-niveau {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--keyrol-blue);
}
.grip-niveau--laag {
  color: var(--keyrol-red);
}
.grip-advies {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--keyrol-pistachio);
  border-radius: 6px;
  color: var(--keyrol-blue);
  max-width: 65ch;
}
.grip-bars {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}
.grip-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--keyrol-blue);
}
.grip-bar__pct::after {
  content: "/100";
  font-weight: 400;
  font-size: 12px;
  color: var(--keyrol-text);
}
.grip-bar__track {
  height: 10px;
  border-radius: 999px;
  background: var(--keyrol-grey);
  overflow: hidden;
}
.grip-bar__fill {
  display: block;
  height: 100%;
  background: var(--keyrol-blue);
  border-radius: 999px;
  transition: width 0.6s;
}

/* Breakdown + gate */
.grip-detail {
  margin-top: 2rem;
  transition: filter 0.4s;
}
.grip-detail.is-blurred {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
.grip-detail h4 {
  font-family: var(--font-heading);
  color: var(--keyrol-blue);
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}
.grip-detail h4:first-child {
  margin-top: 0;
}
.grip-detail p {
  max-width: 65ch;
}
.grip-detail-list {
  margin: 0.5rem 0;
  padding-left: 1.1rem;
  list-style: disc;
}
.grip-detail-list li {
  margin-bottom: 0.4rem;
  max-width: 62ch;
}
.scan-hook {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--keyrol-blue);
  border-radius: 6px;
  background: #eef1f3;
}
.scan-hook h4 {
  margin-top: 0;
}
.scan-gate {
  margin-top: 2rem;
  padding: 1.75rem;
  border-radius: 8px;
  background: var(--keyrol-blue);
  color: var(--keyrol-white);
}
.scan-gate h4 {
  color: var(--keyrol-white);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.scan-gate p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
}
.scan-gate__field {
  margin-top: 1rem;
}
.scan-gate__field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  color: var(--keyrol-white);
}
/* De span "(optioneel)" of "(niet verplicht)" in een label op de gate. De
   algemene .scan-opt zet daar #575858 op, en op de blauwe achtergrond van de
   gate is dat 1,30:1 en dus onleesbaar. Dit is de enige plek waar de bezoeker
   leest dat een veld niet verplicht is, dus die tekst moet te zien zijn. */
.scan-gate .scan-opt {
  color: rgba(255, 255, 255, 0.75);
}
.scan-gate__row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 34rem) {
  .scan-gate__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.scan-gate .btn {
  margin-top: 1.25rem;
}
.scan-gate .field-error {
  color: #ffd3d9;
}
.scan-gate__check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1rem;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  line-height: 1.4;
}
.scan-gate__check input {
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--keyrol-red);
  flex: 0 0 auto;
  cursor: pointer;
}
.scan-avg {
  margin-top: 1rem;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75) !important;
}

.field {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--keyrol-text);
  background: var(--keyrol-white);
  border: 1px solid #c8cdcd;
  border-radius: 4px;
  padding: 10px 14px;
}
/* Alleen verticaal groter te slepen: horizontaal rekken breekt de kolom. */
textarea.field {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}
/* Veld over de volle breedte van een tweekoloms formulierraster. */
.field-group--breed {
  grid-column: 1 / -1;
}
/* Een leeg tekstvak nodigt uit tot twijfel ("moet ik hier iets?"); dit haalt
   die twijfel weg zonder het label zwaarder te maken. */
.field-optioneel {
  font-weight: 400;
  color: var(--keyrol-text);
}
/* Melding in een formulier die geen fout is. Nu gebruikt op /systeemcheck/ om te
   laten zien dat we de gegevens van iemand al hebben, zodat hij ze niet opnieuw
   hoeft in te typen. */
.form-melding {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  background: #eef2f5;
  border-left: 3px solid var(--keyrol-blue, #0d2b45);
}
.form-melding p {
  margin: 0 0 0.35rem;
  font-size: 15px;
}
.form-melding p:last-child {
  margin-bottom: 0;
}

/* Toelichting onder een veld, bijvoorbeeld welke bestandstypen mogen. Geen
   foutmelding, dus geen rood en geen driehoek. */
.field-hint {
  margin-top: 0.4rem;
  font-size: 14px;
  color: var(--keyrol-muted, #5a6b7a);
}
/* Een bestandskiezer is geen tekstveld: de vaste hoogte en de binnenmarge van
   .field zetten de knop van de browser scheef. */
input[type="file"].field {
  height: auto;
  padding: 0.6rem 0.75rem;
  font-size: 15px;
  cursor: pointer;
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--keyrol-red-hover);
}
/* Waarschuwingsdriehoek, zodat de melding ook zonder kleur als fout leest. */
.field-error::before {
  content: "\26A0";
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.4;
}

/* Interessevakjes in het voorstelformulier ("waar kunnen we je mee helpen").
   Echte checkboxes, zodat toetsenbord en schermlezer gewoon werken; de <label>
   ligt om de hele regel heen, dus je kunt op de tekst klikken. De aangevinkte
   staat leunt niet op kleur alleen — de rand wordt zwaarder én de achtergrond
   verandert, naast het vinkje zelf. */
.interesse {
  margin-top: 2rem;
  border: 0;
  padding: 0;
  min-width: 0;
}
.interesse__legend {
  padding: 0;
  font-weight: 500;
  color: var(--keyrol-blue);
}
.interesse__hint {
  margin-top: 0.25rem;
  margin-bottom: 0.9rem;
  font-size: 14px;
}
/* Eén kolom, ook op breed scherm: het formulier staat naast de wizard in een
   smalle kolom, dus twee kolommen breken de labels op drie regels. */
.interesse__list {
  display: grid;
  gap: 0.6rem;
}
.interesse__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--keyrol-white);
  border: 1px solid #c8cdcd;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.interesse__item:hover {
  border-color: var(--keyrol-blue);
}
.interesse__item input {
  margin-top: 0.1rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--keyrol-red);
  flex: 0 0 auto;
  cursor: pointer;
}
/* Blauw op volle sterkte op pistache: de grijze bodytekst haalt daar de
   contrastnorm niet (zie designreview 1 augustus). */
.interesse__item:has(input:checked) {
  border-color: var(--keyrol-blue);
  background: var(--keyrol-pistachio);
  color: var(--keyrol-blue);
}
.interesse__item:has(input:focus-visible) {
  outline: 2px solid var(--keyrol-blue);
  outline-offset: 2px;
}

.voorstel-form__title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--keyrol-blue);
}
.voorstel-form__grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .voorstel-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.field-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--keyrol-blue);
}
.voorstel-form .btn {
  margin-top: 2rem;
}

.voorstel-form__success {
  text-align: center;
}
.voorstel-form__success p:first-child {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--keyrol-blue);
}
.voorstel-form__success p + p {
  margin-top: 0.5rem;
}

.cta-row {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .cta-row {
    flex-direction: row;
  }
}
.cta-row__phone {
  margin-top: 1.5rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
.site-footer {
  background: var(--keyrol-blue);
  color: var(--keyrol-white);
}
.site-footer a {
  color: inherit;
}
.site-footer__inner {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.site-footer__logo img {
  height: 2rem;
  width: auto;
}
.site-footer__desc {
  margin-top: 1rem;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 28rem;
}
.site-footer__col-title {
  margin-bottom: 1rem;
}
/* Geen ::before-streepje in de footer: kop lijnt uit met de kolom eronder */
.site-footer__col-title::before {
  display: none;
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-footer__nav a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s;
}
.site-footer__nav a:hover {
  color: var(--keyrol-white);
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-block: 1.5rem;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * v1.3-aanpassingen (DJ 12 juni): groter logo, gecentreerde nav, hero-tagline,
 * Waarom KEYROL-grid
 * ------------------------------------------------------------------------- */

/* Logo groter (1,5x t.o.v. vorige stap, DJ 14 juni) */
.site-header__logo img {
  height: 3.9rem;
}
@media (min-width: 48rem) {
  .site-header__logo img {
    height: 4.5rem;
  }
}

/* Navigatie-pill gecentreerd in de header via een raster met drie kolommen.
   De buitenkolommen zijn minstens zo breed als logo en acties (max-content) en
   delen de rest gelijk: is er ruimte, dan staat de nav exact in het midden; is
   er te weinig, dan schuift hij op en raakt hij de acties nooit. De eerdere
   absolute centrering vanaf 104rem liep tussen 1664 en 1700px over "Contact"
   en het telefoonnummer heen. */
@media (min-width: 80rem) {
  .site-header__bar {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    column-gap: 1.5rem;
  }
  .site-header__actions {
    justify-self: end;
  }
  .nav-pill__list {
    justify-content: center;
  }
}

/* Onder 80rem is er geen plek voor het telefoonnummer naast de volledige nav.
   Het nummer blijft bereikbaar via het mobiele menu, het contactblok en de footer. */
@media (max-width: 79.99rem) {
  .phone-link {
    display: none;
  }
}

/* Smalle desktopband: nav compacter zodat nav, telefoonnummer en knoppen samen passen. */
@media (min-width: 80rem) and (max-width: 87.99rem) {
  .nav-pill__list {
    gap: 1rem;
  }
  .nav-pill__link {
    letter-spacing: 0.08em;
  }
}

/* Hero "wat we verkopen"-regel (wit; enige rode element in de hero blijft de CTA) */
.hero__tagline {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  letter-spacing: 0.01em;
  color: var(--keyrol-white);
}

/* NPS-balk: prominenter (grijze band, groter getal, sellende kop) */
.social-proof {
  background: var(--keyrol-grey);
  /* Ruime top-padding (>56px peek) zodat de hero-scroll-cue op lege grijze
     ruimte valt, niet op het getal of de kop. */
  padding-block: 4rem;
}
.social-proof__inner {
  gap: 1.5rem;
}
@media (min-width: 40rem) {
  .social-proof__inner {
    gap: 3rem;
    align-items: center;
    text-align: left;
  }
}
.social-proof__number {
  font-size: clamp(3rem, 7vw, 4.6rem);
}
.social-proof__copy {
  max-width: 560px;
}
.social-proof__headline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  color: var(--keyrol-blue);
}
.social-proof__text {
  margin-top: 0.5rem;
  max-width: 560px;
}

/* Waarom KEYROL: drie kolommen, geen kaarten. Dit is één argument in drie delen,
   geen verzameling losse aanklikbare objecten — dus geen doosjes met slagschaduw. */
.why-grid {
  display: grid;
  gap: 2.5rem;
}
.why-grid--na-tekst {
  margin-top: 2.5rem;
}
@media (min-width: 48rem) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }
}
@media (min-width: 64rem) {
  .why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.why-grid .tile {
  background: none;
  border: 0;
  border-top: 2px solid var(--keyrol-blue);
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem 0 0;
}
.why-grid .tile:hover {
  transform: none;
  box-shadow: none;
}
.why-grid .tile__icon {
  margin-bottom: 1.25rem;
}
.why-grid .tile__title {
  font-size: 1.25rem;
}

/* Kop gecentreerd boven het driekolomsblok: breekt het vaste linkerspoor waar
   elke sectie anders op dezelfde plek begint. */
.section-head--center {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: 3.5rem;
  text-align: center;
}
.section-head--center .section-label {
  justify-content: center;
}
.section-head--center .section__title {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Over Ons (subpagina) — hergebruikt het designsysteem van de homepage
 * ------------------------------------------------------------------------- */

/* Subpagina-hero: zelfde sfeer als home, maar compacter (geen full-screen). */
.hero--page {
  min-height: auto;
}
.hero--page .hero__content {
  padding: 9rem 1.5rem 4rem;
}
@media (min-width: 48rem) {
  .hero--page .hero__content {
    padding: 11rem 1.5rem 5rem;
  }
}

/* Lopende tekstblokken (Waar we voor staan / herkomst) */
.prose-block {
  max-width: 65ch;
  font-size: 17px;
}
.prose-block > * + * {
  margin-top: 1.25rem;
}
.prose-block .prose-note {
  margin-top: 1.5rem;
  font-size: 14px;
  color: var(--keyrol-text);
}

/* Kernwaarden: vier kaarten */
.values-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .values-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Team -------------------------------------------------------------------- */
.team-intro {
  margin-bottom: 2.5rem;
}

/* Groepsfoto bovenaan het teamblok */
.team-group {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 8px;
  overflow: hidden;
  background: var(--keyrol-grey);
  border: 1px solid var(--keyrol-grey);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0 0 2.5rem;
}
.team-group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Discipline-portretten */
.team-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 40rem) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .team-grid--vijf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.team-card {
  display: flex;
  flex-direction: column;
}
.team-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #3a566c, #304a5e);
  border: 1px solid var(--keyrol-grey);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Tijdelijke placeholder zolang er nog geen foto is */
.team-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__photo--placeholder span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding-inline: 1rem;
}
.team-card__name {
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--keyrol-blue);
}
.team-card__role {
  margin-top: 0.25rem;
  font-size: 14px;
  color: var(--keyrol-text);
}

/* Quotes ------------------------------------------------------------------ */
.quotes-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .quotes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.quote-card {
  background: var(--keyrol-white);
  border: 1px solid var(--keyrol-grey);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.quote-card__media {
  margin: -1.75rem -1.75rem 1.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.quote-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote-card__text {
  margin: 0;
  text-align: left;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--keyrol-blue);
}
.quote-card__text::before {
  content: "\201C";
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 0.5;
  margin-bottom: 0.5rem;
  color: var(--keyrol-pistachio);
}
.quote-card__author {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--keyrol-blue);
}

/* CTA-blok "Samenwerken" */
.over-cta {
  text-align: center;
}
.over-cta .prose-cap {
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* Werken bij (compact secundair blok) */
.werkenbij {
  border-radius: 8px;
  border: 1px solid rgba(48, 74, 94, 0.2);
  background: var(--keyrol-white);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 48rem) {
  .werkenbij {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.werkenbij__copy {
  max-width: 60ch;
}
.werkenbij__copy h3 {
  font-size: 1.2rem;
  color: var(--keyrol-blue);
}
.werkenbij__copy p {
  margin-top: 0.5rem;
  font-size: 16px;
}
.werkenbij .btn {
  flex-shrink: 0;
}

/* FAQ --------------------------------------------------------------------- */
.faq-list {
  max-width: 820px;
  border-top: 1px solid var(--keyrol-grey);
}
.faq-item {
  border-bottom: 1px solid var(--keyrol-grey);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--keyrol-blue);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--keyrol-blue);
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: "–";
}
.faq-item__answer {
  padding: 0 0 1.5rem;
  max-width: 70ch;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * v1.5-aanpassingen (DJ 14 juni): pistache-aankondigingsbalk bovenaan,
 * krappere blauwe nav
 * ------------------------------------------------------------------------- */
/* Pistache in plaats van rood: de balk vocht om aandacht met de CTA-knop waar hij
   naartoe wijst. Blauw op pistache = 4,71:1. */
.topbar {
  background: var(--keyrol-pistachio);
  color: var(--keyrol-blue);
}
.topbar.is-hidden {
  display: none;
}
.topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.4rem 2.75rem;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--keyrol-blue);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.topbar__badge {
  flex-shrink: 0;
  background: var(--keyrol-blue);
  color: var(--keyrol-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.topbar__em {
  font-weight: 500;
}
.topbar__arrow {
  display: inline-block;
  font-size: 1.25em;
  line-height: 1;
  transition: transform 0.2s;
}
.topbar__link:hover {
  text-decoration: underline;
}
.topbar__link:hover .topbar__arrow {
  transform: translateX(3px);
}
.topbar__close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--keyrol-blue);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.topbar__close:hover {
  background: rgba(48, 74, 94, 0.12);
}
@media (max-width: 40rem) {
  .topbar__link {
    font-size: 13px;
    gap: 0.45rem;
  }
}

/* Blauwe nav krapper (minder hoogte) */
.site-header__bar {
  padding-block: 0.55rem;
}
.site-header__logo img {
  height: 3.1rem;
}
@media (min-width: 48rem) {
  .site-header__bar {
    padding-block: 0.85rem;
  }
  .site-header__logo img {
    height: 3.7rem;
  }
}

/* ---------------------------------------------------------------------------
 * v1.4-aanpassingen (DJ 14 juni): groter footer-logo, contactblok,
 * juridische links in bottom-bar, juridische pagina's
 * ------------------------------------------------------------------------- */

/* Footer-logo 2x zo groot (was 2rem) */
.site-footer__logo img {
  height: 4rem;
}

/* Contactblok in footer */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  font-style: normal;
}
.site-footer__contact a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s;
}
.site-footer__contact a:hover {
  color: var(--keyrol-white);
}
.site-footer__contact strong {
  display: block;
  font-weight: 500;
  color: var(--keyrol-white);
  margin-bottom: 0.15rem;
}
.site-footer__contact-block + .site-footer__contact-block {
  margin-top: 0.25rem;
}
/* Extra witregel onder 'Openingstijden winkel' (laatste blok) */
.site-footer__contact-block:last-child {
  margin-bottom: 1.5rem;
}
.site-footer__contact-block--legal {
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Certificaatbadges in de bottom-bar */
.site-footer__certificaten {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-footer__certificaten img {
  height: 5.625rem;
  width: auto;
  border-radius: 0.25rem;
}

/* Bottom-bar: ISO-tekst links, juridische links rechts */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 48rem) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}
.site-footer__legal a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s;
}
.site-footer__legal a:hover {
  color: var(--keyrol-white);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Juridische pagina's (privacy / disclaimer / cookiebeleid)
 * ------------------------------------------------------------------------- */
.legal-header {
  background: var(--keyrol-blue);
  color: var(--keyrol-white);
}
.legal-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}
.legal-header__logo img {
  height: 3.4rem;
  width: auto;
}
@media (min-width: 48rem) {
  .legal-header__logo img {
    height: 4rem;
  }
}
.legal-header__back {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.legal-header__back:hover {
  color: var(--keyrol-white);
  text-decoration: underline;
}

.legal {
  max-width: 75ch;
}
.legal h1 {
  font-family: var(--font-heading);
  color: var(--keyrol-blue);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.legal h2 {
  font-family: var(--font-heading);
  color: var(--keyrol-blue);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal p {
  margin-bottom: 1rem;
  font-size: 16px;
  line-height: 1.7;
}
.legal ul {
  list-style: disc;
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}
.legal ul li {
  margin-bottom: 0.4rem;
  font-size: 16px;
  line-height: 1.7;
}
.legal address {
  font-style: normal;
  margin-bottom: 1rem;
  font-size: 16px;
  line-height: 1.7;
}
.legal a {
  color: var(--keyrol-blue);
  font-weight: 500;
  text-decoration: underline;
}
.legal a:hover {
  color: var(--keyrol-red);
}
.legal__updated {
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--keyrol-text);
}

/* --------------------------------------------------------------------------
   Zekerheden-blok (assurance bar) — direct onder hero
   -------------------------------------------------------------------------- */
.assurance-bar {
  background: var(--keyrol-white);
  border-bottom: 1px solid var(--keyrol-grey);
  padding: 1.4rem 0;
}
.assurance-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
}
.assurance-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--keyrol-blue);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
}
.assurance-item svg {
  flex: 0 0 auto;
}
@media (min-width: 40rem) {
  .assurance-bar__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .assurance-bar__list {
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Platform-sectie (AMS + DoorAtlas)
   -------------------------------------------------------------------------- */
.platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1.5rem;
}
.platform-copy > .prose-cap + .prose-cap {
  margin-top: 1rem;
}
.platform-figure {
  margin: 0;
}
.platform-figure__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--keyrol-grey);
  border-radius: 10px;
  overflow: hidden;
  background: var(--keyrol-white);
  cursor: zoom-in;
}
.platform-figure__media img {
  display: block;
  width: 100%;
  height: auto;
}
.platform-figure figcaption {
  margin-top: 0.65rem;
  font-size: 14px;
  color: var(--keyrol-text);
  line-height: 1.5;
}
@media (min-width: 64rem) {
  .platform-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Vakmanschap-sectie (mechanisch werk, spiegelbeeld van platform-grid)
   -------------------------------------------------------------------------- */
.craft-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1.5rem;
}
.craft-figure {
  margin: 0;
}
.craft-figure__media {
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.craft-figure__media img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 64rem) {
  .craft-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 3rem;
  }
  .craft-figure {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Wat doen we: de hele deur, met toegangscontrole centraal (homepage)
   -------------------------------------------------------------------------- */
.deur-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
}
.deur-uitleg__kop {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--keyrol-text);
  margin: 1.5rem 0 0.35rem;
}
.deur-uitleg__kop:first-child {
  margin-top: 0;
}
.deur-uitleg p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.deur-figuur {
  margin: 0;
}
.deur-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.deur-svg .ds-vloer { stroke: #cdd3d6; stroke-width: 4; }
.deur-svg .ds-automaat { fill: #e3e8ea; stroke: #304a5e; stroke-width: 2; }
.deur-svg .ds-kozijn { fill: none; stroke: #304a5e; stroke-width: 7; }
.deur-svg .ds-blad { fill: #eef1f2; stroke: #304a5e; stroke-width: 3; }
.deur-svg .ds-paneel { fill: #eef1f2; stroke: #cfd6d9; stroke-width: 2; }
.deur-svg .ds-vol { fill: #304a5e; }
.deur-svg .ds-arm { stroke: #304a5e; stroke-width: 4; stroke-linecap: round; }
.deur-svg .ds-slotzone { fill: none; stroke: #3b5a70; stroke-width: 2; stroke-dasharray: 5 4; }
.deur-svg .ds-paniek { fill: #9ebfbd; stroke: #304a5e; stroke-width: 1.5; }
.deur-svg .ds-lijnen { fill: none; stroke: #5a6b76; stroke-width: 1.25; }
.deur-svg .ds-punten { fill: #1e2f3c; }
.deur-svg .ds-label text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  fill: #1e2f3c;
  text-anchor: end;
}
.deur-svg .ds-label .ds-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  fill: #575858;
}
.deur-svg .ds-tc-titel {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 25px;
  fill: #e01f3d;
}
.deur-svg .ds-tc-lijn { stroke: #e01f3d; stroke-width: 2.5; }
.deur-svg .ds-tc-cirkel { fill: #fdebee; stroke: #e01f3d; stroke-width: 2.5; }
.deur-svg .ds-tc-tekst {
  font-family: var(--font-body);
  font-size: 18px;
  fill: #575858;
}
@media (max-width: 47.99rem) {
  .deur-svg .ds-label text { font-size: 25px; }
  .deur-svg .ds-label .ds-sub { font-size: 19px; }
  .deur-svg .ds-tc-tekst { font-size: 20px; }
}
@media (min-width: 64rem) {
  .deur-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Hero CTA-notitie (drempel/risico-omkering onder de knop)
 * ------------------------------------------------------------------------- */
.hero__cta-note {
  margin-top: 1rem;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------------------
 * Sectorstrip (vroege zelfherkenning direct na NPS)
 * ------------------------------------------------------------------------- */
.sector-strip {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.sector-strip__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .sector-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .sector-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sector-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 100%;
  padding: 1rem 1.15rem;
  background: var(--keyrol-white);
  border: 1px solid var(--keyrol-grey);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.sector-card:hover {
  transform: translateY(-2px);
  border-color: var(--keyrol-pistachio);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.sector-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
}
.sector-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sector-card__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--keyrol-blue);
}
.sector-card__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 13px;
  color: var(--keyrol-text);
}

/* Klikbare merkenlogo's */
.brand-marquee__group a {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.brand-marquee__group a:focus-visible {
  outline: 2px solid var(--keyrol-blue);
  outline-offset: 4px;
}

/* Voor wie — verwijzing naar overige sectoren */
.voorwie-more {
  margin-top: 1.75rem;
  font-size: 15px;
  color: var(--keyrol-text);
}

/* ---------------------------------------------------------------------------
 * FAQ (accordion + schema)
 * ------------------------------------------------------------------------- */
.faq__list {
  display: grid;
  gap: 0.75rem;
  max-width: 820px;
}
.faq__item {
  border: 1px solid var(--keyrol-grey);
  border-radius: 8px;
  background: var(--keyrol-white);
  overflow: hidden;
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--keyrol-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--keyrol-blue);
  transition: transform 0.2s;
}
.faq__item[open] summary::after {
  content: "\2212";
}
.faq__item summary:hover {
  background: rgba(48, 74, 94, 0.03);
}
.faq__answer {
  padding: 0 1.25rem 1.15rem;
}
.faq__answer p {
  margin: 0;
  max-width: 65ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--keyrol-text);
}
.faq__more {
  margin-top: 1.75rem;
  font-size: 16px;
}