@charset "UTF-8";
/* ==========================================================================
   ASMN  ·  site.css
   --------------------------------------------------------------------------
   Inhoud
     1.  Lettertypen
     2.  Ontwerptokens (kleur, type, ruimte)
     3.  Basis en reset
     4.  Toegankelijkheidshulpmiddelen
     5.  Layout: container, sectie, raster
     6.  Typografie: koppen, tekst, labels
     7.  Knoppen en links
     8.  Header en navigatie
     9.  Hero
     10. Kaarten en tegels
     11. Diensten, stappen, cijfers
     12. Projecten
     13. Team
     14. Vacatures en accordeon
     15. Contactblokken
     16. Banners en meldingen
     17. Footer
     18. Juridische en tekstpagina's
     19. 404
     20. Print en hulpklassen
     21. Onderdelen voor de inhoud
     22. Beweging en animatie
   ========================================================================== */

/* ==========================================================================
   1. LETTERTYPEN
   Archivo, SIL Open Font License. De bestanden staan in assets/fonts/ en
   worden vanaf onze eigen server geladen. Laad dit lettertype NOOIT via
   fonts.googleapis.com: dat stuurt het IP-adres van elke bezoeker naar
   Google, spreekt onze privacyverklaring tegen en wordt door de
   Content-Security-Policy geblokkeerd.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Latin Extended, nodig voor namen met bijzondere tekens. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. ONTWERPTOKENS
   Alle contrastwaarden zijn gemeten. De laagste combinatie op de site is
   5,2 op 1 (gedempte tekst op mist). WCAG AA vraagt 4,5 op 1.
   ========================================================================== */

:root {
  /* Achtergronden, koel en licht */
  --wit: #ffffff;
  --papier: #f7f9fb; /* standaard paginakleur, koel gebroken wit */
  --mist: #eef2f6; /* afwisselende sectie */
  --mist-diep: #e2e9f0; /* randen van beeldvlakken */

  /* Lijnen */
  --lijn: #dde4ea;
  --lijn-sterk: #c3ceda;

  /* Tekst */
  --inkt: #16202a; /* koppen, 15,7 op 1 tegen papier */
  --tekst: #374350; /* lopende tekst, 9,6 op 1 */
  --gedempt: #5a6672; /* bijschriften, 5,6 op 1 */
  --inkt-omgekeerd: #ffffff;
  --gedempt-omgekeerd: #c3cedb; /* op donker vlak, 10,4 op 1 */

  /* Accent: marineblauw */
  --blauw: #1c3d5a; /* 11,2 op 1 tegen wit */
  --blauw-diep: #142d43; /* hover en actief */
  --blauw-licht: #2f5f88;
  --blauw-helder: #7fb0d8; /* alleen op donkere vlakken, 7,1 op 1 */
  --blauw-tint: #e8eef5; /* zachte vlakvulling */
  --blauw-tint-sterk: #d3e0ec;

  /* Donker vlak, alleen voor footer en enkele accentbanden */
  --antraciet: #14202c;
  --antraciet-zacht: #20303f;

  /* Typografie */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --tekst-xs: 0.8125rem; /* 13px */
  --tekst-sm: 0.9375rem; /* 15px */
  --tekst-md: 1.0625rem; /* 17px */
  --tekst-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
  --tekst-xl: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);
  --kop-sm: clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
  --kop-md: clamp(1.75rem, 1.6vw + 1.35rem, 2.5rem);
  --kop-lg: clamp(1.875rem, 2.1vw + 1.35rem, 2.875rem);
  --kop-xl: clamp(2.125rem, 2.9vw + 1.2rem, 3.5rem);

  /* Ruimte */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 2.75rem;
  --ruimte-8: 4rem;
  --ruimte-9: 6rem;

  --sectie-ruimte: clamp(4rem, 7vw, 7.5rem);
  --container: 1220px;
  --smal: 780px;

  /* Vorm */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* Schaduw, blauw getint zodat hij bij de rest past */
  --schaduw-sm: 0 1px 2px rgba(16, 38, 58, 0.06),
    0 2px 6px rgba(16, 38, 58, 0.05);
  --schaduw: 0 2px 4px rgba(16, 38, 58, 0.05),
    0 10px 26px -6px rgba(16, 38, 58, 0.12);
  --schaduw-lg: 0 4px 8px rgba(16, 38, 58, 0.05),
    0 24px 48px -12px rgba(16, 38, 58, 0.17);

  --header-hoogte: 76px;
}

/* ==========================================================================
   3. BASIS EN RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-hoogte) + 16px);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--font);
  font-size: var(--tekst-md);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4 {
  color: var(--inkt);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ruimte-4);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--ruimte-4);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 var(--ruimte-4);
  padding-left: 1.25em;
}

li + li {
  margin-top: var(--ruimte-2);
}

a {
  color: var(--blauw);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--blauw-diep);
}

strong,
b {
  font-weight: 600;
  color: var(--inkt);
}

hr {
  border: 0;
  border-top: 1px solid var(--lijn);
  margin: var(--ruimte-7) 0;
}

:focus-visible {
  outline: 3px solid var(--blauw);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--blauw-tint-sterk);
  color: var(--inkt);
}

/* ==========================================================================
   4. TOEGANKELIJKHEIDSHULPMIDDELEN
   ========================================================================== */

.overslaan {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--blauw);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.overslaan:focus {
  top: 12px;
  color: #fff;
}

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

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sectie {
  padding-block: var(--sectie-ruimte);
}

.sectie--kort {
  padding-block: clamp(2.75rem, 4.5vw, 4.5rem);
}

.sectie--mist {
  background: var(--mist);
}

.sectie--tint {
  background: var(--blauw-tint);
}

.sectie--donker {
  background: var(--antraciet);
  color: var(--gedempt-omgekeerd);
}

.sectie--donker h2,
.sectie--donker h3,
.sectie--donker strong {
  color: var(--inkt-omgekeerd);
}

.sectie--lijn-boven {
  border-top: 1px solid var(--lijn);
}

.smal {
  max-width: var(--smal);
}

.midden {
  margin-inline: auto;
  text-align: center;
}

.raster {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.raster--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .raster--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.raster--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--breed-links {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .split--breed-rechts {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* Beeld links zetten zonder de leesvolgorde in de HTML om te draaien. */
@media (min-width: 900px) {
  .split--beeld-links > :last-child {
    order: -1;
  }
}

.split--boven {
  align-items: start;
}

.stapel > * + * {
  margin-top: var(--ruimte-4);
}

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3) var(--ruimte-4);
  align-items: center;
}

/* ==========================================================================
   6. TYPOGRAFIE
   ========================================================================== */

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blauw-licht);
  margin: 0 0 var(--ruimte-4);
}

.label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--blauw-licht);
  flex: none;
}

.label--midden {
  justify-content: center;
}

.sectie--donker .label {
  color: var(--blauw-helder);
}

.sectie--donker .label::before {
  background: var(--blauw-helder);
}

.titel-xl {
  font-size: var(--kop-xl);
  letter-spacing: -0.032em;
}

.titel-lg {
  font-size: var(--kop-lg);
  letter-spacing: -0.028em;
}

.titel-md {
  font-size: var(--kop-md);
}

.titel-sm {
  font-size: var(--kop-sm);
}

.lead {
  font-size: var(--tekst-lg);
  line-height: 1.6;
  color: var(--tekst);
}

.klein {
  font-size: var(--tekst-sm);
  color: var(--gedempt);
}

.mini {
  font-size: var(--tekst-xs);
  color: var(--gedempt);
}

.sectie-kop {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.sectie-kop.midden {
  margin-inline: auto;
}

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

.vinklijst li {
  position: relative;
  padding-left: 2rem;
  margin-top: var(--ruimte-3);
}

.vinklijst li:first-child {
  margin-top: 0;
}

.vinklijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--blauw);
  border-bottom: 2.5px solid var(--blauw);
  transform: rotate(-45deg);
}

.sectie--donker .vinklijst li::before {
  border-color: var(--blauw-helder);
}

/* Genummerde lijst met eigen opmaak */
.stappenlijst {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: stap;
}

/* ==========================================================================
   7. KNOPPEN
   ========================================================================== */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 50px;
  padding: 0.75rem 1.55rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--tekst-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.knop:active {
  transform: translateY(1px);
}

.knop--primair {
  background: var(--blauw);
  border-color: var(--blauw);
  color: #fff;
  box-shadow: var(--schaduw-sm);
}

.knop--primair:hover {
  background: var(--blauw-diep);
  border-color: var(--blauw-diep);
  color: #fff;
  box-shadow: var(--schaduw);
}

.knop--secundair {
  background: transparent;
  border-color: var(--lijn-sterk);
  color: var(--inkt);
}

.knop--secundair:hover {
  border-color: var(--blauw);
  color: var(--blauw);
  background: var(--blauw-tint);
}

.knop--wit {
  background: #fff;
  border-color: #fff;
  color: var(--blauw);
}

.knop--wit:hover {
  background: var(--blauw-tint);
  border-color: var(--blauw-tint);
  color: var(--blauw-diep);
}

.knop--omlijnd-wit {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.knop--omlijnd-wit:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.knop--breed {
  width: 100%;
}

.knop .telefoon-icoon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Tekstlink met pijl */
.pijllink {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  color: var(--blauw);
  min-height: 24px;
}

.pijllink::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.pijllink:hover {
  color: var(--blauw-diep);
}

.pijllink:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* ==========================================================================
   8. HEADER EN NAVIGATIE
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 251, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.header.is-geplakt {
  border-bottom-color: var(--lijn);
  box-shadow: 0 6px 24px -14px rgba(16, 38, 58, 0.35);
}

.header__binnen {
  display: flex;
  align-items: center;
  gap: var(--ruimte-5);
  min-height: var(--header-hoogte);
}

.header__logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  padding: 6px 0;
}

.header__logo img {
  height: 34px;
  width: auto;
}

.hoofdnav {
  margin-left: auto;
}

.hoofdnav__lijst {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.1vw, 0.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hoofdnav__lijst li {
  margin: 0;
}

.hoofdnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--tekst);
  font-size: var(--tekst-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.hoofdnav__link:hover {
  color: var(--blauw);
  background: var(--blauw-tint);
}

.hoofdnav__link[aria-current="page"] {
  color: var(--inkt);
  font-weight: 600;
}

.hoofdnav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 6px;
  height: 2px;
  background: var(--blauw);
}

.header__actie {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
}

.header__telefoon {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 46px;
  padding: 0 1.1rem;
  border-radius: var(--radius);
  background: var(--blauw);
  color: #fff;
  font-size: var(--tekst-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header__telefoon:hover {
  background: var(--blauw-diep);
  color: #fff;
}

.header__telefoon svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Menuknop, alleen zichtbaar op smalle schermen */
.menuknop {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  color: var(--inkt);
}

.menuknop__streepjes,
.menuknop__streepjes::before,
.menuknop__streepjes::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.menuknop__streepjes {
  position: relative;
}

.menuknop__streepjes::before,
.menuknop__streepjes::after {
  content: "";
  position: absolute;
  left: 0;
}

.menuknop__streepjes::before {
  top: -6px;
}

.menuknop__streepjes::after {
  top: 6px;
}

.menuknop[aria-expanded="true"] .menuknop__streepjes {
  background: transparent;
}

.menuknop[aria-expanded="true"] .menuknop__streepjes::before {
  transform: translateY(6px) rotate(45deg);
}

.menuknop[aria-expanded="true"] .menuknop__streepjes::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1000px) {
  .menuknop {
    display: inline-flex;
  }

  .hoofdnav {
    position: fixed;
    inset: var(--header-hoogte) 0 auto 0;
    background: var(--papier);
    border-bottom: 1px solid var(--lijn);
    box-shadow: var(--schaduw-lg);
    padding: var(--ruimte-4) clamp(1.25rem, 4vw, 3rem) var(--ruimte-6);
    display: none;
    max-height: calc(100dvh - var(--header-hoogte));
    overflow-y: auto;
  }

  .hoofdnav.is-open {
    display: block;
  }

  .hoofdnav__lijst {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hoofdnav__link {
    min-height: 54px;
    padding: 0 0.25rem;
    font-size: var(--tekst-lg);
    border-bottom: 1px solid var(--lijn);
    border-radius: 0;
  }

  .hoofdnav__link[aria-current="page"]::after {
    display: none;
  }

  .hoofdnav__link[aria-current="page"] {
    color: var(--blauw);
  }

  .header__telefoon span {
    display: none;
  }

  .header__telefoon {
    padding: 0 0.9rem;
  }
}

@media (max-width: 420px) {
  .header__logo img {
    height: 28px;
  }
}

/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--papier);
  padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
}

.hero::before {
  /* Zacht blauw licht rechtsboven. Puur decoratief. */
  content: "";
  position: absolute;
  top: -220px;
  right: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(
    circle,
    rgba(47, 95, 136, 0.16) 0%,
    rgba(47, 95, 136, 0) 68%
  );
  pointer-events: none;
}

.hero__binnen {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 950px) {
  .hero__binnen {
    grid-template-columns: 1.02fr 0.98fr;
  }
}

.hero__titel {
  font-size: var(--kop-xl);
  letter-spacing: -0.033em;
  margin-bottom: var(--ruimte-5);
}

.hero__titel em {
  font-style: normal;
  color: var(--blauw-licht);
}

.hero__lead {
  font-size: var(--tekst-lg);
  max-width: 40ch;
  margin-bottom: var(--ruimte-6);
}

.hero__beeld {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schaduw-lg);
  background: var(--mist);
}

.hero__beeld img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Kleine kaart die over het beeld heen valt */
.hero__insteek {
  position: absolute;
  left: clamp(12px, 3%, 24px);
  bottom: clamp(12px, 3%, 24px);
  right: clamp(12px, 3%, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-5);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: var(--ruimte-4) var(--ruimte-5);
  box-shadow: var(--schaduw);
}

.hero__insteek div {
  flex: 1 1 120px;
}

.hero__insteek dt {
  font-size: var(--tekst-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gedempt);
  font-weight: 600;
}

.hero__insteek dd {
  margin: 2px 0 0;
  font-size: var(--tekst-md);
  font-weight: 700;
  color: var(--inkt);
  line-height: 1.25;
}

/* Op smalle schermen zou de insteek het halve beeld bedekken. Daar zetten we
   hem eronder in plaats van erover. */
@media (max-width: 620px) {
  .hero__beeld {
    background: var(--wit);
    border: 1px solid var(--lijn);
  }

  .hero__insteek {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-top: 1px solid var(--lijn);
    border-radius: 0;
    margin: 0;
  }

  .hero__insteek div {
    flex: 1 1 100px;
  }
}

/* Kleine hero voor de binnenpagina's */
.paginakop {
  position: relative;
  background: var(--mist);
  border-bottom: 1px solid var(--lijn);
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
  overflow: hidden;
}

.paginakop::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(47, 95, 136, 0.14) 0%,
    rgba(47, 95, 136, 0) 68%
  );
  pointer-events: none;
}

.paginakop__binnen {
  position: relative;
  max-width: 760px;
}

.paginakop h1 {
  font-size: var(--kop-lg);
  margin-bottom: var(--ruimte-4);
}

.kruimels {
  font-size: var(--tekst-xs);
  color: var(--gedempt);
  margin-bottom: var(--ruimte-4);
}

.kruimels ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kruimels li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.kruimels li + li::before {
  content: "/";
  color: var(--lijn-sterk);
}

.kruimels a {
  color: var(--gedempt);
  text-decoration: none;
}

.kruimels a:hover {
  color: var(--blauw);
  text-decoration: underline;
}

/* ==========================================================================
   10. KAARTEN
   ========================================================================== */

.kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  box-shadow: var(--schaduw-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.kaart--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw);
  border-color: var(--blauw-tint-sterk);
}

.kaart h3 {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-3);
}

.kaart p {
  color: var(--tekst);
}

.kaart__voet {
  margin-top: auto;
  padding-top: var(--ruimte-5);
}

/* De hele kaart klikbaar maken zonder de link te verstoppen.
   Bewust ::before en niet ::after, omdat .pijllink ::after al gebruikt
   voor het pijltje. */
.kaart__dekking::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.kaart--vlak {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.kaart__icoon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--blauw-tint);
  border: 1px solid var(--blauw-tint-sterk);
  color: var(--blauw);
  margin-bottom: var(--ruimte-4);
  flex: none;
}

.kaart__icoon svg {
  width: 24px;
  height: 24px;
}

/* Kerncijfers en korte punten */
.kernpunt {
  display: flex;
  gap: var(--ruimte-4);
  align-items: flex-start;
}

.kernpunt__icoon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blauw-tint);
  border: 1px solid var(--blauw-tint-sterk);
  color: var(--blauw);
}

.kernpunt__icoon svg {
  width: 20px;
  height: 20px;
}

.kernpunt h3 {
  font-size: var(--tekst-md);
  margin-bottom: 2px;
}

.kernpunt p {
  font-size: var(--tekst-sm);
  color: var(--gedempt);
  margin: 0;
}

/* Cijferblok */
.cijfers {
  display: grid;
  gap: var(--ruimte-5) clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.cijfer__waarde {
  display: block;
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--blauw);
}

.sectie--donker .cijfer__waarde {
  color: var(--blauw-helder);
}

.cijfer__label {
  display: block;
  margin-top: var(--ruimte-3);
  font-size: var(--tekst-sm);
  color: var(--gedempt);
  max-width: 24ch;
}

.sectie--donker .cijfer__label {
  color: var(--gedempt-omgekeerd);
}

/* ==========================================================================
   11. DIENSTEN, STAPPEN
   ========================================================================== */

/* Sprongbalk boven de dienstenpagina */
.sprongbalk {
  position: sticky;
  top: var(--header-hoogte);
  z-index: 50;
  background: rgba(247, 249, 251, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}

.sprongbalk__lijst {
  display: flex;
  gap: var(--ruimte-2);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sprongbalk__lijst li {
  margin: 0;
  flex: none;
}

.sprongbalk__link {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 var(--ruimte-4);
  color: var(--tekst);
  font-size: var(--tekst-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.sprongbalk__link:hover {
  color: var(--blauw);
  border-bottom-color: var(--blauw-tint-sterk);
}

.dienst {
  scroll-margin-top: calc(var(--header-hoogte) + 70px);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--lijn);
}

.dienst:first-of-type {
  border-top: 0;
}

.dienst__nummer {
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blauw-licht);
  display: block;
  margin-bottom: var(--ruimte-3);
}

.dienst__beeld {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schaduw);
  background: var(--mist);
}

.dienst__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Stappen in de werkwijze */
.stappen {
  display: grid;
  gap: var(--ruimte-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  counter-reset: stap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.stappen > li {
  position: relative;
  counter-increment: stap;
  padding-top: var(--ruimte-6);
  margin: 0;
  border-top: 2px solid var(--lijn);
}

.stappen > li::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  top: -0.9em;
  left: 0;
  background: var(--papier);
  padding-right: 12px;
  font-size: var(--tekst-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blauw);
}

.sectie--mist .stappen > li::before {
  background: var(--mist);
}

.stappen h3 {
  font-size: var(--tekst-lg);
  margin-bottom: var(--ruimte-2);
}

.stappen p {
  font-size: var(--tekst-sm);
  color: var(--gedempt);
  margin: 0;
}

/* Certificeringen */
.certificaten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.certificaten li {
  margin: 0;
}

.certificaat {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: 100px;
  background: var(--wit);
  font-size: var(--tekst-sm);
  font-weight: 600;
  color: var(--inkt);
}

.certificaat svg {
  width: 16px;
  height: 16px;
  color: var(--blauw);
  flex: none;
}

.sectie--donker .certificaat {
  background: var(--antraciet-zacht);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.sectie--donker .certificaat svg {
  color: var(--blauw-helder);
}

/* ==========================================================================
   12. PROJECTEN
   ========================================================================== */

.project {
  overflow: hidden;
  padding: 0;
}

.project__beeld {
  background: var(--mist);
  border-bottom: 1px solid var(--lijn);
}

.project__beeld img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.project__inhoud {
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blauw-licht);
  margin-bottom: var(--ruimte-3);
}

.project h3 {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-3);
}

.project__feiten {
  margin: var(--ruimte-5) 0 0;
  padding: var(--ruimte-4) 0 0;
  border-top: 1px solid var(--lijn);
  display: grid;
  gap: var(--ruimte-3) var(--ruimte-5);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  font-size: var(--tekst-sm);
}

.project__feiten dt {
  color: var(--gedempt);
  font-size: var(--tekst-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project__feiten dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--inkt);
}

/* ==========================================================================
   13. TEAM
   ========================================================================== */

.persoon {
  text-align: left;
}

.persoon__portret {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
  margin-bottom: var(--ruimte-4);
  border: 1px solid var(--lijn);
}

.persoon__portret img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.persoon h3 {
  font-size: var(--tekst-lg);
  margin-bottom: 2px;
}

.persoon__rol {
  font-size: var(--tekst-sm);
  color: var(--blauw);
  font-weight: 600;
  margin: 0 0 var(--ruimte-3);
}

/* ==========================================================================
   14. VACATURES EN ACCORDEON
   ========================================================================== */

.vacature {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  background: var(--wit);
  margin-bottom: var(--ruimte-4);
  overflow: hidden;
  box-shadow: var(--schaduw-sm);
}

.vacature > summary {
  display: flex;
  align-items: center;
  gap: var(--ruimte-4);
  padding: clamp(1.1rem, 2vw, 1.45rem) clamp(1.25rem, 2.2vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  min-height: 64px;
  font-weight: 700;
  color: var(--inkt);
  font-size: var(--tekst-lg);
  letter-spacing: -0.015em;
}

.vacature > summary::-webkit-details-marker {
  display: none;
}

.vacature > summary:hover {
  background: var(--blauw-tint);
}

.vacature__teken {
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: none;
  position: relative;
  border-radius: 50%;
  background: var(--blauw-tint);
}

.vacature__teken::before,
.vacature__teken::after {
  content: "";
  position: absolute;
  background: var(--blauw);
  left: 50%;
  top: 50%;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.vacature__teken::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.vacature__teken::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.vacature[open] .vacature__teken::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.vacature__inhoud {
  padding: 0 clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.35rem, 2.2vw, 1.85rem);
  border-top: 1px solid var(--lijn);
  padding-top: var(--ruimte-5);
}

.vacature__kenmerken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-bottom: var(--ruimte-4);
}

/* ==========================================================================
   15. CONTACT
   ========================================================================== */

.belblok {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  box-shadow: var(--schaduw);
}

.belblok__nummer {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blauw);
  text-decoration: none;
  line-height: 1.15;
}

.belblok__nummer:hover {
  color: var(--blauw-diep);
  text-decoration: underline;
}

.gegevens {
  margin: 0;
  display: grid;
  gap: var(--ruimte-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.gegevens dt {
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-bottom: var(--ruimte-2);
}

.gegevens dd {
  margin: 0;
  color: var(--inkt);
  font-weight: 500;
}

.gegevens a {
  color: var(--blauw);
}

/* Openingstijden */
.tijden {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tekst-sm);
}

.tijden th,
.tijden td {
  text-align: left;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--lijn);
}

.tijden th {
  font-weight: 500;
  color: var(--tekst);
}

.tijden td {
  text-align: right;
  font-weight: 600;
  color: var(--inkt);
}

.tijden tr:last-child th,
.tijden tr:last-child td {
  border-bottom: 0;
}

/* Grote oproepband */
.oproep {
  background: var(--antraciet);
  color: var(--gedempt-omgekeerd);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}

.oproep::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(127, 176, 216, 0.22) 0%,
    rgba(127, 176, 216, 0) 70%
  );
  pointer-events: none;
}

.oproep > * {
  position: relative;
}

.oproep h2 {
  color: #fff;
  font-size: var(--kop-md);
}

.oproep p {
  max-width: 52ch;
}

/* Het telefoonnummer staat hier op een donker vlak, dus niet in het diepe
   marineblauw maar in de lichte variant. Gemeten: 7,2 op 1. */
.oproep .belblok__nummer {
  color: var(--blauw-helder);
}

.oproep .belblok__nummer:hover {
  color: #ffffff;
}

/* ==========================================================================
   16. BANNERS EN MELDINGEN
   ========================================================================== */

.melding {
  display: flex;
  gap: var(--ruimte-4);
  align-items: flex-start;
  padding: var(--ruimte-5);
  border-radius: var(--radius);
  border: 1px solid var(--lijn-sterk);
  background: var(--blauw-tint);
  font-size: var(--tekst-sm);
}

.melding svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--blauw);
  margin-top: 2px;
}

.melding strong {
  display: block;
  margin-bottom: 2px;
}

/* Voorbeeldbalk bovenaan de demoversie */
.voorbeeldbalk {
  background: #142d43;
  color: #fff;
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 10px 16px;
  line-height: 1.4;
}

/* Bijschrift onder een foto */
figcaption {
  margin-top: var(--ruimte-3);
  font-size: var(--tekst-sm);
  color: var(--gedempt);
  line-height: 1.5;
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footer {
  background: var(--antraciet);
  color: var(--gedempt-omgekeerd);
  padding-block: clamp(3rem, 6vw, 5rem) var(--ruimte-6);
  font-size: var(--tekst-sm);
}

.footer__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.footer__merk {
  grid-column: span 1;
}

@media (min-width: 900px) {
  .footer__raster {
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  }
}

.footer__logo img {
  height: 40px;
  width: auto;
  margin-bottom: var(--ruimte-4);
}

.footer h2 {
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--ruimte-4);
}

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

.footer li {
  margin: 0;
}

.footer a {
  color: var(--gedempt-omgekeerd);
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
  min-height: 24px;
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__telefoon {
  font-size: var(--tekst-lg);
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.02em;
}

.footer__onder {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--ruimte-5);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3) var(--ruimte-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--tekst-xs);
}

.footer__onder ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-5);
}

/* ==========================================================================
   18. JURIDISCHE EN TEKSTPAGINA'S
   ========================================================================== */

.prosa {
  max-width: 72ch;
}

.prosa h2 {
  font-size: var(--kop-sm);
  margin-top: var(--ruimte-8);
  padding-top: var(--ruimte-2);
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa h3 {
  font-size: var(--tekst-xl);
  margin-top: var(--ruimte-6);
}

.prosa ul,
.prosa ol {
  padding-left: 1.35em;
}

.prosa li::marker {
  color: var(--blauw);
}

.inhoudsopgave {
  background: var(--mist);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-5);
  margin-bottom: var(--ruimte-7);
}

.inhoudsopgave h2 {
  font-size: var(--tekst-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin: 0 0 var(--ruimte-3);
  padding: 0;
}

.inhoudsopgave ol {
  margin: 0;
  padding-left: 1.2em;
  columns: 2;
  column-gap: var(--ruimte-6);
}

@media (max-width: 620px) {
  .inhoudsopgave ol {
    columns: 1;
  }
}

/* ==========================================================================
   19. 404
   ========================================================================== */

.foutpagina {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(4rem, 12vw, 9rem);
}

.foutpagina__code {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--blauw-tint-sterk);
  margin-bottom: var(--ruimte-5);
}

/* ==========================================================================
   20. BEWEGING, PRINT, HULPKLASSEN
   ========================================================================== */

.geen-marge {
  margin: 0;
}

.marge-boven {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.marge-boven-klein {
  margin-top: var(--ruimte-5);
}

.tekst-midden {
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .header,
  .footer,
  .sprongbalk,
  .overslaan,
  .oproep {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  .kaart,
  .belblok {
    box-shadow: none;
    border: 1px solid #999;
  }
}



/* ==========================================================================
   21. ONDERDELEN VOOR DE INHOUD UIT HET OVERDRACHTSPAKKET
   ========================================================================== */

/* Onderkop in een dienstenkaart, bijvoorbeeld "Daken / Dakbeschot" */
.kaart__onderkop {
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blauw-licht);
  margin-bottom: var(--ruimte-3);
}

/* Kerngetal onderaan een projectkaart */
.project__kerngetal {
  margin: auto 0 0;
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-sm);
  font-weight: 600;
  color: var(--inkt);
}

.project__inhoud > h3 + p {
  margin-bottom: var(--ruimte-5);
}

/* Uitgelicht project */
.uitgelicht {
  display: grid;
  gap: 0;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schaduw);
}

@media (min-width: 900px) {
  .uitgelicht {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
  }
}

.uitgelicht__beeld {
  background: var(--mist);
}

.uitgelicht__beeld img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.uitgelicht__inhoud {
  padding: clamp(1.75rem, 3.4vw, 3rem);
}

.uitgelicht .cijfers {
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--lijn);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.uitgelicht .cijfer__waarde {
  font-size: clamp(1.75rem, 2.2vw, 2.375rem);
  white-space: nowrap;
}

/* Twee lijsten naast elkaar onder een dienst */
.dienst__lijsten {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--lijn);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .dienst__lijsten {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.dienst__lijsten h3 {
  margin-bottom: var(--ruimte-4);
}

.dienst__stappen {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--mist);
  border-radius: var(--radius-lg);
}

.dienst__stappen > h3 {
  margin-bottom: var(--ruimte-6);
}

.dienst__stappen .stappen > li::before {
  background: var(--mist);
}

.stappen--twee {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.stappen h4 {
  font-size: var(--tekst-lg);
  margin-bottom: var(--ruimte-2);
}

/* Nummer in de sprongbalk en in een vacature */
.sprongbalk__nr,
.vacature__nr {
  color: var(--blauw-licht);
  font-variant-numeric: tabular-nums;
  margin-right: 0.6em;
  flex: none;
}

.vacature__nr {
  font-size: var(--tekst-sm);
  letter-spacing: 0.08em;
}

/* Teamlijst zonder portretten */
.teamlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--lijn);
}

@media (min-width: 700px) {
  .teamlijst {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

.teamlijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: var(--ruimte-4) 0;
  border-bottom: 1px solid var(--lijn);
}

.teamlijst__naam {
  font-weight: 700;
  color: var(--inkt);
  font-size: var(--tekst-lg);
  letter-spacing: -0.015em;
}

.teamlijst__rol {
  font-size: var(--tekst-sm);
  color: var(--blauw-licht);
  font-weight: 600;
}

/* Genummerde lijst op de contactpagina */
.checklijst {
  list-style: none;
  counter-reset: check;
  margin: 0;
  padding: 0;
}

.checklijst li {
  counter-increment: check;
  position: relative;
  padding-left: 3rem;
  margin-top: var(--ruimte-5);
}

.checklijst li:first-child {
  margin-top: var(--ruimte-5);
}

.checklijst li::before {
  content: counter(check, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blauw-tint);
  border: 1px solid var(--blauw-tint-sterk);
  color: var(--blauw);
  font-size: var(--tekst-xs);
  font-weight: 700;
}

.checklijst h3 {
  font-size: var(--tekst-md);
  margin-bottom: 2px;
}

.checklijst p {
  font-size: var(--tekst-sm);
  color: var(--gedempt);
  margin: 0;
}

/* Foto in een dienstblok: bijschrift hoort erbij, dus geen overflow hidden
   op de figure zelf maar op het beeld. */
.dienst__beeld {
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.dienst__beeld img {
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  background: var(--mist);
}



/* ==========================================================================
   22. BEWEGING
   --------------------------------------------------------------------------
   Drie soorten beweging, en verder niets:

     1. Elementen die bij het scrollen rustig in beeld komen
     2. De kerncijfers die van nul naar hun waarde tellen
     3. Een langzaam drijvend licht in de hero en de oproepband

   Alles loopt op opacity en transform, want die twee kan de browser op de
   grafische kaart afhandelen. Geen animatie op hoogte, breedte of kleur:
   dat laat de pagina schokken op een oudere telefoon.

   Alles is uitgeschakeld voor bezoekers die in hun besturingssysteem hebben
   aangegeven minder beweging te willen zien. Zie het blok onderaan.

   De klasse js op het html-element wordt door een klein script in de head
   gezet. Staat JavaScript uit, dan blijft die klasse weg en is alles gewoon
   meteen zichtbaar. Zo mist niemand ooit inhoud door een animatie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 Verschijnen bij scrollen
   -------------------------------------------------------------------------- */

/* De selectors staan in :where() zodat ze geen gewicht meetellen. Zonder dat
   truukje weegt bijvoorbeeld ".js .prosa h2" zwaarder dan ".js .is-zichtbaar"
   en blijft de tekst onzichtbaar staan. Bijkomend voordeel: kent een oude
   browser :where() niet, dan valt de hele regel weg en is alles gewoon
   zichtbaar. Dat is precies de goede kant om op te falen. */
.js :where(.sectie-kop,
    .kaart,
    .cijfers > div,
    .stappen > li,
    .uitgelicht,
    .belblok,
    .oproep,
    .teamlijst li,
    .vacature,
    .certificaten li,
    .checklijst li,
    .melding,
    .dienst__lijsten,
    .dienst__stappen,
    .dienst .split > div,
    .dienst .split > figure,
    .split--boven > div,
    .gegevens,
    .tijden,
    .prosa h2) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Beelden komen iets later en met een lichte schaal, zodat de tekst voorop
   loopt en het beeld erachteraan komt. */
.js :where(.dienst .split > figure, .uitgelicht) {
  transform: translateY(22px) scale(0.985);
  transition-duration: 0.7s;
}

/* Deze regel moet alles hierboven overschrijven, vandaar de twee klassen. */
.js .is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* Vertraging binnen een groep, zodat kaarten na elkaar verschijnen in
   plaats van allemaal tegelijk. Zonder inline stijlen, want die zouden de
   Content-Security-Policy breken. */
.js .raster > *:nth-child(2),
.js .cijfers > div:nth-child(2),
.js .stappen > li:nth-child(2),
.js .certificaten li:nth-child(2),
.js .checklijst li:nth-child(2),
.js .teamlijst li:nth-child(2) {
  transition-delay: 80ms;
}

.js .raster > *:nth-child(3),
.js .cijfers > div:nth-child(3),
.js .stappen > li:nth-child(3),
.js .certificaten li:nth-child(3),
.js .checklijst li:nth-child(3),
.js .teamlijst li:nth-child(3) {
  transition-delay: 160ms;
}

.js .raster > *:nth-child(4),
.js .cijfers > div:nth-child(4),
.js .stappen > li:nth-child(4),
.js .certificaten li:nth-child(4),
.js .checklijst li:nth-child(4),
.js .teamlijst li:nth-child(4) {
  transition-delay: 240ms;
}

.js .raster > *:nth-child(5),
.js .certificaten li:nth-child(5),
.js .teamlijst li:nth-child(5) {
  transition-delay: 320ms;
}

.js .raster > *:nth-child(n + 6),
.js .certificaten li:nth-child(n + 6),
.js .teamlijst li:nth-child(n + 6) {
  transition-delay: 400ms;
}

/* Vacatures staan onder elkaar; daar is een vertraging per stuk te traag.
   Alleen de eerste drie lopen na elkaar. */
.js .vacature:nth-child(2) {
  transition-delay: 70ms;
}
.js .vacature:nth-child(3) {
  transition-delay: 140ms;
}

/* --------------------------------------------------------------------------
   22.2 De hero bij het laden
   Pure CSS, geen JavaScript nodig. De hero staat bovenaan, dus daar is
   wachten op een scrollgebeurtenis niet nodig.
   -------------------------------------------------------------------------- */

@keyframes opkomst {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes opkomst-beeld {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__binnen > div > .label,
.hero__binnen > div > .hero__titel,
.hero__binnen > div > .hero__lead,
.hero__binnen > div > .knoprij,
.hero__binnen > div > .klein {
  animation: opkomst 0.75s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

.hero__binnen > div > .hero__titel {
  animation-delay: 90ms;
}
.hero__binnen > div > .hero__lead {
  animation-delay: 180ms;
}
.hero__binnen > div > .knoprij {
  animation-delay: 270ms;
}
.hero__binnen > div > .klein {
  animation-delay: 350ms;
}

.hero__beeld {
  animation: opkomst-beeld 0.9s cubic-bezier(0.22, 0.7, 0.3, 1) 150ms both;
}

/* De paginakop op de binnenpagina's krijgt dezelfde behandeling, korter. */
.paginakop__binnen > * {
  animation: opkomst 0.6s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
.paginakop__binnen > h1 {
  animation-delay: 70ms;
}
.paginakop__binnen > .lead {
  animation-delay: 140ms;
}

/* --------------------------------------------------------------------------
   22.3 Drijvend licht op de achtergrond
   Het bestaande koperlicht, nu heel langzaam bewegend. Een volle cyclus
   duurt bijna een minuut, dus je ziet het niet bewegen, je merkt alleen dat
   het vlak leeft.
   -------------------------------------------------------------------------- */

@keyframes drijven {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate3d(-4%, 3%, 0) scale(1.12);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

.hero::before {
  animation: drijven 54s ease-in-out infinite;
  will-change: transform, opacity;
}

.paginakop::before {
  animation: drijven 66s ease-in-out infinite;
  will-change: transform, opacity;
}

.oproep::before {
  animation: drijven 48s ease-in-out infinite;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   22.4 Kleine bewegingen bij aanwijzen
   -------------------------------------------------------------------------- */

/* Foto's in kaarten en dienstblokken komen licht naar voren. Het beeld
   schaalt binnen zijn kader, dus de pagina verspringt niet. */
.project__beeld,
.uitgelicht__beeld {
  overflow: hidden;
}

.project__beeld img,
.uitgelicht__beeld img,
.dienst__beeld img {
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.kaart--link:hover .project__beeld img,
.project:hover .project__beeld img,
.uitgelicht:hover .uitgelicht__beeld img,
.dienst__beeld:hover img {
  transform: scale(1.035);
}

/* De onderstreping in de navigatie groeit vanuit het midden. */
.hoofdnav__link::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 2px;
  background: var(--blauw-licht);
  transition: left 0.22s ease, right 0.22s ease;
}

.hoofdnav__link:hover::before {
  left: 0.7rem;
  right: 0.7rem;
}

.hoofdnav__link[aria-current="page"]:hover::before {
  display: none;
}

/* Het teken in een vacature draait mee bij het openen. */
.vacature__teken {
  transition: background-color 0.2s ease;
}

.vacature[open] .vacature__teken {
  background: var(--blauw-tint-sterk);
}

/* --------------------------------------------------------------------------
   22.5 Tellende cijfers
   De waarde krijgt vaste cijferbreedtes, anders springt de tekst tijdens het
   tellen heen en weer.
   -------------------------------------------------------------------------- */

.cijfer__waarde {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   22.6 Minder beweging
   Wie dit in het besturingssysteem heeft aangezet, krijgt alles meteen te
   zien zonder enige animatie. Dit blok staat bewust als laatste, zodat het
   alles hierboven overschrijft.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js :where(.sectie-kop,
    .kaart,
    .cijfers > div,
    .stappen > li,
    .uitgelicht,
    .belblok,
    .oproep,
    .teamlijst li,
    .vacature,
    .certificaten li,
    .checklijst li,
    .melding,
    .dienst__lijsten,
    .dienst__stappen,
    .dienst .split > div,
    .dienst .split > figure,
    .split--boven > div,
    .gegevens,
    .tijden,
    .prosa h2) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero::before,
  .paginakop::before,
  .oproep::before,
  .hero__beeld,
  .hero__binnen > div > *,
  .paginakop__binnen > * {
    animation: none !important;
  }

  .project__beeld img,
  .uitgelicht__beeld img,
  .dienst__beeld img {
    transition: none !important;
    transform: none !important;
  }

  .hoofdnav__link::before {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   EIGEN LETTERTYPE VERVANGEN
   Wil ASMN een ander lettertype, vervang dan de @font-face-blokken bovenaan
   dit bestand en de variabele --font. Lever de .woff2-bestanden altijd mee in
   assets/fonts/ en laad ze nooit van een externe server. De
   Content-Security-Policy staat font-src 'self' toe en niets anders.
   -------------------------------------------------------------------------- */