/* BAM Diensten B.V. — stylesheet
   Kleuren gepipetteerd uit de mockup (bron/mockup.png) en het logo.
   Archivo is zelf gehost; één variabel bestand dekt 100 t/m 900. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-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;
}

:root {
  /* Kleur — rollen, geen losse stalen */
  --ink: #0e1112;          /* bovenbalk, footer, donkere secties */
  --ink-2: #171a1b;        /* navigatiebalk */
  --ink-3: #22272a;        /* randen en vlakken op donker */
  --yellow: #fcd010;       /* merkgeel uit de mockup */
  --yellow-press: #e9bf05;
  --yellow-soft: #fde88a;  /* lichte knop op de gele band */
  --paper: #ffffff;
  --paper-2: #f5f6f7;      /* lichte achtergrond contactpagina */
  --paper-3: #eceef0;
  --line: #e1e4e6;
  --line-strong: #c9ced1;
  --field-border: #7d858a; /* 3,7:1 op wit, WCAG 1.4.11 */
  --text: #111416;
  --text-2: #464d51;       /* secundaire tekst op wit en paper-2 */
  --text-3: #5d656a;       /* placeholders, metadata */
  --on-dark: #ffffff;
  --on-dark-2: #bdc3c6;    /* secundaire tekst op ink */
  --on-yellow-2: #3b3306;  /* secundaire tekst op geel, uit de geeltint afgeleid */
  --error: #b42318;
  --error-bg: #fef3f2;
  --success: #146c43;
  --success-bg: #effaf4;
  --warn-bg: #fff8db;
  --warn-line: #f1d977;
  --warn-ink: #7a5d00;
  --focus: #1b64d8;
  --ink-hover: #262b2d;
  --yellow-soft-hover: #fff3bd;

  /* Typografie */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.35rem, 1.3rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Ritme — basis 4px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(4rem, 3rem + 4vw, 6.5rem);

  --wrap: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgb(14 17 18 / 0.06), 0 8px 24px -12px rgb(14 17 18 / 0.18);
  --shadow-lift: 0 2px 4px rgb(14 17 18 / 0.06), 0 18px 40px -18px rgb(14 17 18 / 0.32);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --header-h: 76px;
  --topbar-h: 41px;          /* bovenbalk 40px + 1px rand */
}

/* ---------- Basis ---------- */

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

/* html is donker, body wit. De boven- en onderkant van de pagina zijn donker
   (bovenbalk, hero, footer); Safari op iOS kleurt de strook onder de statusbalk
   en de adresbalk, en het doorscrollen voorbij de rand, met deze kleur. */
html {
  background-color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  /* Donker, net als html: Safari op iOS kleurt de strook achter de zwevende
     adresbalk onderin met de achtergrond van body als daar geen vaste laag
     staat. De witte achtergrond van de inhoud zit daarom op main. */
  background: var(--ink);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


main { background: var(--paper); }

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

::selection { background: var(--yellow); color: var(--ink); }

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

.on-dark :focus-visible,
.site-header :focus-visible,
.topbar :focus-visible,
.site-footer :focus-visible { outline-color: var(--yellow); }

.band-yellow :focus-visible { outline-color: var(--ink); }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* ---------- Knoppen ---------- */

.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  --btn-border: var(--yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.8rem 1.4rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn .icon-arrow { transition: transform 200ms var(--ease-out); }
.btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--yellow-press); --btn-border: var(--yellow-press); }
  .btn:hover .icon-arrow { transform: translateX(3px); }
}

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--on-dark); --btn-border: var(--ink); }
.btn--dark .icon:not(.icon-arrow) { color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { --btn-bg: var(--ink-hover); --btn-border: var(--ink-hover); }
}

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-border: rgb(255 255 255 / 0.85); }
.btn--ghost .icon { color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { --btn-bg: rgb(255 255 255 / 0.1); --btn-border: #fff; }
}

.btn--soft { --btn-bg: var(--yellow-soft); --btn-border: var(--yellow-soft); }
@media (hover: hover) and (pointer: fine) {
  .btn--soft:hover { --btn-bg: var(--yellow-soft-hover); --btn-border: var(--yellow-soft-hover); }
}

.btn--outline { --btn-bg: transparent; --btn-fg: var(--text); --btn-border: var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { --btn-bg: var(--paper-2); --btn-border: var(--text); }
}

.btn--sm { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] { cursor: progress; opacity: 0.75; transform: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* ---------- Kopjes en sectiekop ---------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.kicker::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--yellow);
}
.on-dark .kicker { color: var(--yellow); }

.section { padding-block: var(--section); }
.section--tint { background: var(--paper-2); }

.section-head { max-width: 54rem; margin-bottom: var(--s-7); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { max-width: 46rem; margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-lead); }
.section-head p + p { margin-top: var(--s-3); }
.on-dark .section-head p { color: var(--on-dark-2); }

.accent { color: var(--yellow); }

/* ---------- Bovenbalk ---------- */

.topbar {
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--fs-xs);
  line-height: 1.4;          /* vaste hoogte van de balk */
  border-bottom: 1px solid var(--ink-3);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 40px;
}
.topbar-facts {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  overflow: hidden;          /* past het niet, dan valt het laatste feitje weg in plaats van af te breken */
  list-style: none;
  color: var(--on-dark-2);
}
.topbar-facts li { display: flex; flex: none; align-items: center; gap: var(--s-3); white-space: nowrap; }
.topbar-facts li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
}
.topbar-facts strong { color: var(--on-dark); font-weight: 700; }
.topbar-call {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-call .icon { color: var(--yellow); width: 1.05rem; height: 1.05rem; }
.topbar-call .call-label { color: var(--on-dark-2); font-weight: 500; }

@media (max-width: 860px) {
  .topbar-facts li:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .topbar-facts li:nth-child(3) { display: none; }
  .topbar-call .call-label { display: none; }
}

/* ---------- Kop en navigatie ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--ink-2);
  color: var(--on-dark);
  transition: background-color 260ms ease, box-shadow 220ms ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.55); }

/* Pagina's met een hero: bovenaan loopt de foto door achter de balk.
   De dichte balk is de standaard, dus zonder JavaScript (geen html.js)
   blijft alles zoals het was. Met JS schuift de hero onder de balk en is
   de balk transparant tot je begint te scrollen (main.js zet is-scrolled).
   Een verloop in plaats van volledig transparant: het menu houdt contrast
   boven de lichte lucht van de foto. */
.js .has-hero .site-header:not(.is-scrolled) {
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgb(10 12 13 / 0.82) 0%, rgb(10 12 13 / 0.6) 60%, rgb(10 12 13 / 0) 100%);
  background-repeat: no-repeat;
}
/* De menuknop staat rechts, boven het lichtste deel van de foto: eigen donkere ondergrond. */
.js .has-hero .site-header:not(.is-scrolled) .menu > summary {
  background-color: rgb(10 12 13 / 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.js .has-hero .hero { margin-top: calc(var(--header-h) * -1); }
/* De kop ligt over de hero heen, dus de hero zelf begint direct onder de bovenbalk */
.js .has-hero .hero {
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
}
.js .has-hero .hero-body { padding-top: calc(var(--header-h) + clamp(1.5rem, 7svh, 5rem)); }
.js .has-hero .hero::before {
  background:
    linear-gradient(180deg, rgb(10 12 13 / 0.55) 0%, rgb(10 12 13 / 0) 28%),
    linear-gradient(90deg, rgb(10 12 13 / 0.94) 0%, rgb(10 12 13 / 0.88) 42%, rgb(10 12 13 / 0.6) 58%, rgb(10 12 13 / 0.2) 80%, rgb(10 12 13 / 0.1) 100%),
    linear-gradient(0deg, rgb(10 12 13 / 0.92) 0%, rgb(10 12 13 / 0) 32%);
}
@media (max-width: 820px) {
  .js .has-hero .hero::before {
    background:
      linear-gradient(180deg, rgb(10 12 13 / 0.55) 0%, rgb(10 12 13 / 0) 28%),
      linear-gradient(90deg, rgb(10 12 13 / 0.9) 0%, rgb(10 12 13 / 0.72) 60%, rgb(10 12 13 / 0.5) 100%),
      linear-gradient(0deg, rgb(10 12 13 / 0.95) 0%, rgb(10 12 13 / 0) 45%);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand { display: block; flex: none; }
.brand img { width: auto; height: 52px; }

.nav { margin-inline-start: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
  list-style: none;
}
.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav-list a[aria-current="page"],
.nav-list a[aria-current="true"] { color: var(--yellow); }
.nav-list a[aria-current="page"]::after,
.nav-list a[aria-current="true"]::after { transform: scaleX(1); }
.nav-list.has-active a[aria-current="page"] { color: var(--on-dark); }
.nav-list.has-active a[aria-current="page"]::after { transform: scaleX(0); }
.nav-list a.is-active { color: var(--yellow); }
.nav-list a.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-list a:hover::after { transform: scaleX(1); }
}

.header-cta { flex: none; }

/* Mobiel menu: een lade die van rechts inschuift, aan de kant van de menuknop, in BAM-stijl.
   De motor blijft <details>/<summary>: zonder JavaScript opent en sluit het
   menu gewoon, en blijft het kruisje in de balk boven de verduistering staan. */
.menu { display: none; margin-inline-start: auto; }
.menu > summary {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 0.9rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--on-dark);
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu > summary .icon { width: 1.3rem; height: 1.3rem; }
.menu .icon-close { display: none; }
.menu[open] > summary .icon-close { display: block; }
.menu[open] > summary .icon-menu { display: none; }
.menu[open] > summary { border-color: var(--yellow); color: var(--yellow); background: var(--ink); }
/* Met JavaScript sluit de ronde knop in de lade; het kruisje in de balk
   mag dan onder de verduistering, anders staan er twee sluitknoppen. */
.js .menu[open] > summary { z-index: 0; }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgb(6 7 8 / 0.64);
  backdrop-filter: blur(2px);
}

.menu-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: min(86vw, 380px);
  padding: var(--s-5) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 55% at 100% 0%, rgb(252 208 16 / 0.12), transparent 60%),
    var(--ink);
  border-inline-start: 1px solid var(--ink-3);
  box-shadow: -30px 0 80px rgb(0 0 0 / 0.55);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.menu-panel::-webkit-scrollbar { display: none; }

.menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.menu-brand { display: block; text-decoration: none; }
.menu-brand img { width: auto; height: 48px; }
.menu-payoff {
  display: block;
  margin-top: var(--s-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.menu-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--on-dark);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 220ms var(--ease-out);
}
.menu-close[hidden] { display: none; }
.menu-close .icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .menu-close:hover { background: rgb(255 255 255 / 0.1); color: var(--yellow); transform: rotate(90deg); }
}

.menu-list { list-style: none; }
.menu-list a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-2) 2px;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
}
.menu-list li:last-child a { border-bottom: 0; }
.menu-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--yellow);
  color: var(--ink);
}
.menu-tile .icon { width: 22px; height: 22px; }
.menu-label { flex: 1; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.menu-chev { width: 18px; height: 18px; color: #6c7479; transition: transform 200ms var(--ease-out), color 200ms ease; }
.menu-list a[aria-current="page"] .menu-label,
.menu-list a[aria-current="page"] .menu-chev { color: var(--yellow); }
.menu-list a[aria-current="page"] .menu-tile { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .menu-list a:hover .menu-chev { color: var(--yellow); transform: translateX(3px); }
}

.menu-cta { width: 100%; }

.menu-help {
  margin-top: auto;
  padding: var(--s-4);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
}
.menu-help strong { display: block; color: var(--on-dark); font-weight: 800; }
.menu-help > span { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.45; color: var(--on-dark-2); }
.menu-help-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.menu-help-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  color: var(--on-dark);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.menu-help-actions .icon { width: 18px; height: 18px; color: var(--yellow); }
.menu-help-call { flex: 1; padding: 0 var(--s-4); }
.menu-help-mail { width: 46px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .menu-help-actions a:hover { border-color: var(--yellow); background: rgb(252 208 16 / 0.08); }
}

@media (max-width: 1180px) {
  .nav { display: none; }
  .menu { display: block; }
  .header-cta { display: none; }
}
@media (max-width: 1180px) and (min-width: 700px) {
  .header-cta { display: inline-flex; margin-inline-start: auto; }
  .menu { margin-inline-start: 0; }
}
@media (max-width: 480px) {
  .brand img { height: 44px; }
  :root { --header-h: 68px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* Tot precies de onderkant van het scherm: bovenbalk en kop staan erboven.
     svh = hoogte met zichtbare adresbalk op mobiel, zodat niets wegvalt. */
  min-height: calc(100vh - var(--topbar-h) - var(--header-h));
  min-height: calc(100svh - var(--topbar-h) - var(--header-h));
  color: var(--on-dark);
  background: var(--ink);
  overflow: hidden;
}
.hero > .wrap { display: flex; flex: 1 0 auto; flex-direction: column; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(10 12 13 / 0.94) 0%, rgb(10 12 13 / 0.88) 42%, rgb(10 12 13 / 0.6) 58%, rgb(10 12 13 / 0.2) 80%, rgb(10 12 13 / 0.1) 100%),
    linear-gradient(0deg, rgb(10 12 13 / 0.92) 0%, rgb(10 12 13 / 0) 32%);
}
/* margin-block: auto zet de tekst verticaal in het midden van de ruimte boven de USP-strook */
.hero-body {
  margin-block: auto;
  /* ruimte schaalt met de schermhoogte, zodat de hero ook op een laag laptopscherm past */
  padding-top: clamp(1.5rem, 7svh, 5rem);
  padding-bottom: clamp(1.5rem, 5svh, 4rem);
  max-width: 48rem;
}
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; }
.hero-lead {
  margin-top: var(--s-5);
  max-width: 38rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #e6e9ea;
}
.hero .kicker { color: var(--yellow); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero-usps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  padding-block: var(--s-5) var(--s-6);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  list-style: none;
}
.hero-usps li { display: flex; align-items: flex-start; gap: var(--s-4); }
.usp-ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow);
}
.usp-ring .icon { width: 22px; height: 22px; }
.hero-usps strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.hero-usps div > span { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.45; color: var(--on-dark-2); }

.hero--contact .hero-body { padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.hero--contact .hero-lead + .hero-lead { margin-top: var(--s-3); }

@media (max-width: 820px) {
  .hero-usps { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero::before {
    background:
      linear-gradient(90deg, rgb(10 12 13 / 0.9) 0%, rgb(10 12 13 / 0.72) 60%, rgb(10 12 13 / 0.5) 100%),
      linear-gradient(0deg, rgb(10 12 13 / 0.95) 0%, rgb(10 12 13 / 0) 45%);
  }
}
@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
}

/* ---------- Gele band (spoed, CTA) ---------- */

.band-yellow { background: var(--yellow); color: var(--ink); }
.spoed .wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5) var(--s-6);
  padding-block: var(--s-6);
}
.spoed-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--ink);
}
.spoed-icon .icon { width: 48px; height: 48px; }
.spoed-icon--round {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
}
.spoed-icon--round .icon { width: 30px; height: 30px; }
.spoed h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.spoed p { margin-top: var(--s-2); max-width: 44rem; color: var(--on-yellow-2); }
.spoed .spoed-note { margin-top: var(--s-2); font-weight: 700; color: var(--ink); }
.spoed .btn { white-space: nowrap; }

@media (max-width: 900px) {
  .spoed .wrap { grid-template-columns: auto minmax(0, 1fr); }
  .spoed .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
  .spoed .wrap { grid-template-columns: 1fr; }
  .spoed-icon { width: 48px; height: 48px; justify-content: start; }
  .spoed-icon .icon { width: 40px; height: 40px; }
  .spoed-icon--round { width: 56px; height: 56px; justify-content: center; }
  .spoed-icon--round .icon { width: 26px; height: 26px; }
  .spoed .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- Diensten ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;      /* alle kaarten in een rij even hoog */
  list-style: none;
}
.service {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 240ms ease;
}
.service:has(details[open]) { box-shadow: var(--shadow-lift); }
.service-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.service h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }
.service-intro { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
.service-intro + .service-intro { margin-top: var(--s-2); }

/* De uitklapregel zakt naar de onderkant, zodat hij op alle kaarten op één lijn staat */
/* Alle rijen even hoog zolang er niets openstaat; staat een kaart open, dan groeit alleen zijn eigen rij */
.services:not(:has(details[open])) { grid-auto-rows: 1fr; }
.service-body > .service-intro { margin-bottom: var(--s-4); }
.service details { margin-top: auto; border-top: 1px solid var(--line); }
.service summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 52px;
  padding-top: var(--s-3);
  font-weight: 700;
  font-size: var(--fs-small);
  cursor: pointer;
  list-style: none;
}
.service summary::-webkit-details-marker { display: none; }
.service summary .chev {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  transition: transform 240ms var(--ease-out);
}
.service summary .chev .icon { width: 18px; height: 18px; }
.service details[open] summary .chev { transform: rotate(180deg); }
.service .more-label-open { display: none; }
.service details[open] .more-label-open { display: inline; }
.service details[open] .more-label-closed { display: none; }

.service-more { padding-top: var(--s-3); }
.service-more p { font-size: var(--fs-small); font-weight: 700; }
.ticks { margin-top: var(--s-2); list-style: none; }
.ticks li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-2);
}
.ticks li + li { margin-top: var(--s-2); }
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1112' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.service-more .btn { margin-top: var(--s-4); width: 100%; }

.service-other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-other h3 { font-size: 1.25rem; }
.service-other p { margin-top: var(--s-2); max-width: 44rem; color: var(--text-2); }
.service-other .btn { flex: none; }

@media (max-width: 980px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .services { grid-template-columns: 1fr; }
  .service-other { flex-direction: column; align-items: flex-start; padding: var(--s-5); }
  .service-other .btn { width: 100%; }
}

/* ---------- Grondwerk (donker, tekst + fotocollage) ---------- */

.grondwerk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-8);
  align-items: center;
}
.grondwerk-text h2 { font-size: var(--fs-h2); }
.grondwerk-lead { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--on-dark); }
.grondwerk-text p + p { margin-top: var(--s-4); color: var(--on-dark-2); }
.grondwerk-text .ticks { margin-top: var(--s-5); }
.grondwerk-text .ticks li { font-size: 1rem; color: var(--on-dark); }
.grondwerk-text .ticks li + li { margin-top: var(--s-3); }
.grondwerk-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.grondwerk-photos {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--s-3);
  height: clamp(420px, 42vw, 600px);
}
.grondwerk-photos figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
}
.grondwerk-photos .gp-main { grid-row: 1 / span 2; }
.grondwerk-photos img { width: 100%; height: 100%; object-fit: cover; }
.grondwerk-photos figure:nth-child(2) img { object-position: 60% 40%; }
.grondwerk-photos figure:nth-child(3) img { object-position: 50% 30%; }

@media (max-width: 900px) {
  .grondwerk-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .grondwerk-photos { height: clamp(360px, 95vw, 560px); }
}
@media (max-width: 480px) {
  .grondwerk-actions .btn { width: 100%; }
}

/* ---------- Over BAM ---------- */

.about { background: var(--paper); }
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--paper-2);
}
.about-text {
  padding: var(--section) var(--s-7) var(--s-8) max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.about-text h2 { font-size: var(--fs-h2); max-width: 30rem; }
.about-text p { margin-top: var(--s-4); max-width: 34rem; color: var(--text-2); }
.about-text h2 + p { margin-top: var(--s-5); color: var(--text); font-size: var(--fs-lead); }
.about-media { position: relative; min-height: 420px; }
/* brandpunt op het BAM-logo op de rug van de linker verkeersregelaar */
.about-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.feature { display: flex; gap: var(--s-4); padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.feature + .feature { padding-inline-start: var(--s-5); border-inline-start: 1px solid var(--line); }
.feature-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
}
.feature-icon .icon { width: 24px; height: 24px; }
.feature h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
.feature p { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); }
.about-cta { padding-block: var(--s-6) var(--section); }

@media (max-width: 1080px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .feature:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; }
  .about-text { padding: var(--section) var(--gutter) var(--s-7); }
  .about-media { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  .feature,
  .feature + .feature { padding: var(--s-5) 0; border-inline-start: 0; }
  .feature + .feature { border-top: 1px solid var(--line); }
}

/* ---------- Werkwijze (donker) ---------- */

.on-dark { background: var(--ink); color: var(--on-dark); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
  list-style: none;
  counter-reset: step;
}
.step { position: relative; }
.step-num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px;
  inset-inline-start: 68px;
  inset-inline-end: calc(var(--s-6) * -1 + 12px);
  height: 2px;
  background: linear-gradient(90deg, rgb(252 208 16 / 0.7), rgb(252 208 16 / 0.15));
}
.step h3 { margin-top: var(--s-5); font-size: 1.1875rem; line-height: 1.25; }
.step p { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.6; color: var(--on-dark-2); }
.step .step-note { color: var(--on-dark); font-weight: 600; }
.steps-cta { margin-top: var(--s-7); }

@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--s-4); padding-bottom: var(--s-6); }
  .step h3 { grid-column: 2; margin-top: 12px; }
  .step p { grid-column: 2; }
  .step-num { grid-row: 1 / span 3; align-self: start; }
  .step:not(:last-child)::after,
  .step:nth-child(2)::after {
    display: block;
    top: 60px;
    bottom: 8px;
    inset-inline-start: 25px;
    inset-inline-end: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgb(252 208 16 / 0.7), rgb(252 208 16 / 0.12));
  }
  .steps-cta .btn { width: 100%; }
}

/* ---------- Werkgebied ---------- */

.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.85fr);
  gap: var(--s-7);
  align-items: center;
}
.area-text h2 { font-size: var(--fs-h2); }
.area-text p { margin-top: var(--s-4); color: var(--text-2); }
.area-text h2 + p { font-size: var(--fs-lead); color: var(--text); margin-top: var(--s-5); }
.area-text .btn { margin-top: var(--s-6); }

.area-map { position: relative; max-width: 340px; justify-self: center; width: 100%; }
.area-map svg { width: 100%; height: auto; overflow: visible; }
.map-land { fill: var(--ink-2); }
.map-rays line { stroke: var(--yellow); stroke-width: 1.4; stroke-linecap: round; opacity: 0.55; }
.map-pulse { fill: var(--yellow); opacity: 0.28; transform-box: fill-box; transform-origin: center; }
.map-dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; }
.map-label {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper-2);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.checklist { list-style: none; }
.checklist-title { font-weight: 700; margin-bottom: var(--s-4); }
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  font-weight: 600;
}
.checklist li + li { margin-top: var(--s-2); }
.check-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
}
.check-dot .icon { width: 16px; height: 16px; }
.on-dark .checklist li { color: var(--on-dark); }

@media (max-width: 1080px) {
  .area-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .area-text { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .area-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .area-map { max-width: 260px; }
  .area-text .btn { width: 100%; }
}

/* ---------- FAQ ---------- */

/* Twee losse kolommen: een open vraag duwt alleen zijn eigen kolom omlaag */
.faq-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  align-items: start;
}
.faq-list { list-style: none; }
@media (max-width: 900px) {
  .faq-cols { grid-template-columns: 1fr; }
}
.faq-item + .faq-item { margin-top: var(--s-3); }
.faq-item details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq-item details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 60px;
  padding: var(--s-3) var(--s-5);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > .icon:first-child { color: var(--text-3); width: 20px; height: 20px; }
.faq-item summary span { flex: 1; }
.faq-toggle {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: transform 240ms var(--ease-out);
}
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item details[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item details[open] summary > .icon:first-child { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover { background: var(--paper-2); border-radius: var(--radius-sm); }
}
.faq-answer { padding: 0 var(--s-5) var(--s-5); padding-inline-start: calc(var(--s-5) + 20px + var(--s-4)); color: var(--text-2); max-width: 70ch; }
.faq-answer a { color: var(--text); font-weight: 700; }

@media (max-width: 600px) {
  .faq-item summary { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .faq-item summary > .icon:first-child { display: none; }
  .faq-answer { padding: 0 var(--s-4) var(--s-4); }
}

/* ---------- Afsluitende CTA ---------- */

.cta .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5) var(--s-7);
  align-items: center;
  padding-block: var(--s-7);
}
.cta h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.cta p { margin-top: var(--s-3); max-width: 40rem; color: var(--on-yellow-2); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgb(14 17 18 / 0.16);
  font-size: var(--fs-small);
  color: var(--on-yellow-2);
}
.cta-meta a { color: var(--ink); font-weight: 700; }
.cta-meta ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; font-weight: 700; color: var(--ink); }
.cta-meta ul li { display: flex; align-items: center; gap: var(--s-2); }
.cta-meta ul .icon { width: 1rem; height: 1rem; }

@media (max-width: 900px) {
  .cta .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cta-actions .btn { width: 100%; }
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark-2);
  font-size: var(--fs-small);
}
.footer-road {
  position: absolute;
  right: -40px;
  bottom: 0;
  width: 360px;
  height: min(100%, 420px);
  pointer-events: none;
  opacity: 0.9;
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  padding-block: var(--s-8) var(--s-6);
}
.footer-brand img { width: auto; height: 64px; }
.footer-brand p { margin-top: var(--s-4); max-width: 22rem; line-height: 1.6; }
.site-footer h2 {
  margin-bottom: var(--s-4);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--on-dark);
}
.footer-links { list-style: none; }
.footer-links li + li { margin-top: var(--s-1); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  color: var(--on-dark-2);
  text-decoration: none;
}
.footer-links .icon { width: 1rem; height: 1rem; color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--on-dark); text-decoration: underline; }
}
.footer-address { font-style: normal; margin-top: var(--s-3); line-height: 1.6; }
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--ink-3);
  font-size: var(--fs-xs);
}
.footer-bottom a { color: var(--on-dark-2); display: inline-flex; align-items: center; min-height: 32px; }
.footer-bottom ul { display: flex; gap: var(--s-5); list-style: none; }
/* Makersvermelding: bewust stil, zakt terug achter de rest van de balk. */
.footer-credit { display: inline-flex; align-items: center; gap: 0.3em; opacity: 0.6; transition: opacity 0.2s ease; }
.footer-credit:hover, .footer-credit:focus-within { opacity: 1; }
.footer-bottom ul { flex-wrap: wrap; row-gap: 0; }

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .footer-road { display: none; }
}
/* Mobiel: compacter. Logo en tekst op één rij, menu in twee kolommen,
   contact en bedrijfsinformatie naast elkaar. */
@media (max-width: 640px) {
  .footer-grid { gap: var(--s-5) var(--s-4); padding-block: var(--s-7) var(--s-5); }
  .footer-brand { display: flex; align-items: center; gap: var(--s-4); }
  .footer-brand > a { flex: none; }
  .footer-brand img { height: 52px; }
  /* Contact en bedrijfsinformatie elk een eigen rij; het e-mailadres past niet in een halve kolom */
  .footer-grid > div:not(.footer-brand) { grid-column: 1 / -1; }
  .footer-grid > div:not(.footer-brand) .footer-links { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
  .footer-grid > div:not(.footer-brand) .footer-links li + li { margin-top: 0; }
  .footer-brand p { margin-top: 0; font-size: var(--fs-xs); line-height: 1.5; }
  .footer-nav { grid-column: 1 / -1; }
  .footer-nav .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .footer-nav .footer-links li + li { margin-top: 0; }
  .footer-links a { min-height: 40px; }
  .site-footer h2 { margin-bottom: var(--s-2); }
  .footer-address { margin-top: var(--s-1); }
  .footer-bottom { padding-block: var(--s-4); }
}
@media (max-width: 380px) {
  .footer-brand { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ---------- Contact: kolommen ---------- */

.contact-main { background: var(--paper-2); padding-block: var(--s-8) var(--section); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: var(--s-6);
  align-items: start;
}
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.contact-side { padding: var(--s-5); }
.contact-side > h2 { font-size: 1.5rem; margin-bottom: var(--s-5); }
.contact-cards { display: grid; gap: var(--s-3); list-style: none; }
.contact-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.contact-card > .icon { width: 30px; height: 30px; color: var(--ink); margin-top: 2px; }
.contact-card .icon-wrap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
}
.contact-card .icon-wrap .icon { width: 22px; height: 22px; }
.contact-card h3 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); }
.contact-card .big { display: block; margin-top: 2px; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.contact-card a.big { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.contact-card address,
.contact-card .value { margin-top: 2px; font-style: normal; font-weight: 600; line-height: 1.5; }
.contact-card p { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.contact-card .btn { margin-top: var(--s-3); }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card .btn { width: 100%; }
  .contact-side { padding: var(--s-4); }
  .contact-card { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); }
  .contact-card .icon-wrap { width: 40px; height: 40px; }
  .contact-card .big { font-size: 1rem; overflow-wrap: normal; }
}

/* ---------- Formulier ---------- */

.form-panel { padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); }
.form-panel > h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.form-intro { margin-top: var(--s-3); color: var(--text-2); max-width: 44rem; }
.form-required-note { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--text-2); }
.form-required-note span,
.req { color: var(--error); }

.request-form fieldset { margin: var(--s-6) 0 0; padding: 0; border: 0; min-width: 0; }
.request-form legend {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  margin-bottom: var(--s-4);
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 800;
}
.request-form legend::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.field--full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 6px; font-size: var(--fs-small); font-weight: 700; }
.field label .optional { font-weight: 500; color: var(--text-2); }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--paper);
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
  accent-color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none;
  padding-inline-end: 2.75rem;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111416' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.9rem center / 18px no-repeat;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(252 208 16 / 0.65);
}
@media (hover: hover) and (pointer: fine) {
  .field input:hover:not(:focus),
  .field select:hover:not(:focus),
  .field textarea:hover:not(:focus) { border-color: var(--text-2); }
}
.field-hint { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-2); }
.field-error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--error);
}
.field-error .icon { width: 1.05rem; height: 1.05rem; margin-top: 1px; }
.field.has-error .field-error { display: flex; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error); background-color: var(--error-bg); }

.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.form-privacy { margin-top: var(--s-6); font-size: var(--fs-small); color: var(--text-2); }
.form-privacy a { color: var(--text); font-weight: 700; }
.form-submit { margin-top: var(--s-4); }
.form-submit .btn { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.form-fineprint { margin-top: var(--s-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); text-align: center; }

.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgb(14 17 18 / 0.25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.is-sending .spinner { display: inline-block; }
.is-sending .icon-arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--radius-sm);
  border: 1.5px solid;
}
.form-status[hidden] { display: none; }
.form-status > .icon { width: 28px; height: 28px; flex: none; }
.form-status h3 { font-size: 1.125rem; }
.form-status p { margin-top: var(--s-2); color: var(--text); }
.form-status a { font-weight: 700; color: var(--text); }
.form-status--success { background: var(--success-bg); border-color: #9fd7b8; }
.form-status--success > .icon { color: var(--success); }
.form-status--error { background: var(--error-bg); border-color: #f4b5ae; }
.form-status--error > .icon { color: var(--error); }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.request-form.is-sent fieldset,
.request-form.is-sent .form-privacy,
.request-form.is-sent .form-submit,
.request-form.is-sent .form-fineprint { display: none; }

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

/* ---------- Na de aanvraag ---------- */

.after-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  list-style: none;
}
.after-step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); }
.after-step .feature-icon { width: 64px; height: 64px; }
.after-step .feature-icon .icon { width: 28px; height: 28px; }
.after-step h3 { margin-top: 6px; font-size: 1.125rem; }
.after-step p { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
.after-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 31px;
  inset-inline-end: calc(var(--s-6) * -0.8);
  width: 14px;
  height: 14px;
  border-top: 2.5px solid var(--ink);
  border-right: 2.5px solid var(--ink);
  transform: rotate(45deg);
}

@media (max-width: 860px) {
  .after-steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .after-step:not(:last-child)::after { display: none; }
}

/* ---------- Bedrijfsgegevens ---------- */

.company-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.company-card { padding: var(--s-6); }
.company-card-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.company-card-head .icon { width: 36px; height: 36px; color: var(--ink); }
.company-card-head .feature-icon .icon { width: 24px; height: 24px; }
.company-card h3 { font-size: 1.25rem; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-3) var(--s-5); margin: 0; }
.facts dt { font-size: var(--fs-small); font-weight: 700; color: var(--text-2); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts dd a { color: var(--text); }
.facts .pending { color: var(--text-2); font-weight: 500; font-style: italic; }
.facts .iban { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
.bank-warning {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.5;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
}
.bank-warning .icon { width: 20px; height: 20px; flex: none; color: var(--warn-ink); margin-top: 1px; }

@media (max-width: 860px) {
  .company-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .company-card { padding: var(--s-5); }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd + dt { margin-top: var(--s-3); }
}

/* ---------- Facebook ---------- */

.fb-strip {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
}
.fb-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #1877f2;
  color: #fff;
}
.fb-logo .icon { width: 34px; height: 34px; }
.fb-strip h2 { font-size: 1.25rem; }
.fb-strip p { margin-top: 2px; color: var(--text-2); }
.fb-strip .btn { margin-inline-start: auto; flex: none; }

@media (max-width: 640px) {
  .fb-strip { flex-wrap: wrap; padding: var(--s-5); }
  .fb-strip .btn { margin-inline-start: 0; width: 100%; }
}

/* ---------- Tekstpagina (privacy) ---------- */

.prose-page { padding-block: var(--s-8) var(--section); }
.prose { max-width: 70ch; }
.prose h1 { font-size: var(--fs-h2); }
.prose h2 { margin-top: var(--s-7); font-size: 1.375rem; }
.prose p,
.prose ul { margin-top: var(--s-4); color: var(--text-2); }
.prose ul { padding-inline-start: 1.25rem; }
.prose li + li { margin-top: var(--s-2); }
.prose a { color: var(--text); font-weight: 700; }
.concept-banner {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}
.concept-banner .icon { width: 22px; height: 22px; flex: none; color: var(--warn-ink); }

/* ---------- Menulaag (met JavaScript) ----------
   Altijd aanwezig, direct in <body>, net als bij Rijschool SVS: zo blijft de
   balk onderin Safari op iOS de pagina doorlaten nadat het menu dicht is. */
.menu-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 280ms;
}
.menu-layer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.menu-layer .menu-overlay,
.menu-layer .menu-panel { position: absolute; }
.menu-layer .menu-overlay { opacity: 0; transition: opacity 240ms ease; }
.menu-layer.is-open .menu-overlay { opacity: 1; }
.menu-layer .menu-panel { transform: translateX(100%); transition: transform 280ms var(--ease-out); }
.menu-layer.is-open .menu-panel { transform: none; transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1); }
@media (min-width: 1181px) {
  .menu-layer { display: none; }
}

/* Zolang het menu open is: pagina staat stil en de achtergrond heeft de menukleur,
   zodat de strook onder de adresbalk op iOS niet wit is. */
html.menu-open { overflow: hidden; }
html.menu-open,
html.menu-open body { background: var(--ink); }

/* De knop in de balk toont de open toestand ook met JavaScript */
.menu.is-enhanced > summary[aria-expanded="true"] { border-color: var(--yellow); color: var(--yellow); background: var(--ink); }
.menu.is-enhanced > summary[aria-expanded="true"] .icon-menu { display: none; }
.menu.is-enhanced > summary[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Beweging ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  .hero-media img { animation: hero-settle 1200ms var(--ease-out) both; }
  @keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }

  /* Uitklappen van diensten en FAQ: de inhoud schuift open in plaats van te verspringen.
     Browsers zonder interpolate-size openen gewoon direct. */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .service details::details-content,
    .faq-item details::details-content {
      block-size: 0;
      opacity: 0;
      overflow: clip;
      transition: block-size 240ms var(--ease-out), opacity 200ms ease, content-visibility 240ms allow-discrete;
    }
    .service details[open]::details-content,
    .faq-item details[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }

  /* Mobiel menu: de lade schuift van rechts in (waar de knop zit), de verduistering vervaagt
     erachter en de items volgen kort na elkaar. Sluiten gaat direct. */
  .menu[open] .menu-panel { animation: drawer-in 420ms cubic-bezier(0.32, 0.72, 0, 1); }
  .menu[open] .menu-overlay { animation: fade-in 260ms ease; }
  .menu[open] .menu-list a,
  .menu[open] .menu-cta,
  .menu[open] .menu-help { animation: item-in 360ms var(--ease-out) both; }
  .menu[open] .menu-list li:nth-child(1) a { animation-delay: 80ms; }
  .menu[open] .menu-list li:nth-child(2) a { animation-delay: 120ms; }
  .menu[open] .menu-list li:nth-child(3) a { animation-delay: 160ms; }
  .menu[open] .menu-list li:nth-child(4) a { animation-delay: 200ms; }
  .menu[open] .menu-list li:nth-child(5) a { animation-delay: 240ms; }
  .menu[open] .menu-list li:nth-child(6) a { animation-delay: 280ms; }
  .menu[open] .menu-cta { animation-delay: 320ms; }
  .menu[open] .menu-help { animation-delay: 360ms; }
  @keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes item-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  /* Items in de menulaag volgen kort na elkaar */
  .menu-layer.is-open .menu-list a,
  .menu-layer.is-open .menu-cta,
  .menu-layer.is-open .menu-help { animation: item-in 360ms var(--ease-out) both; }
  .menu-layer.is-open .menu-list li:nth-child(1) a { animation-delay: 80ms; }
  .menu-layer.is-open .menu-list li:nth-child(2) a { animation-delay: 120ms; }
  .menu-layer.is-open .menu-list li:nth-child(3) a { animation-delay: 160ms; }
  .menu-layer.is-open .menu-list li:nth-child(4) a { animation-delay: 200ms; }
  .menu-layer.is-open .menu-list li:nth-child(5) a { animation-delay: 240ms; }
  .menu-layer.is-open .menu-list li:nth-child(6) a { animation-delay: 280ms; }
  .menu-layer.is-open .menu-cta { animation-delay: 320ms; }
  .menu-layer.is-open .menu-help { animation-delay: 360ms; }

  /* Formuliermelding: succes schuift zacht in en het vinkje tekent zich één keer;
     een fout is een systeemreactie en staat sneller. */
  .form-status { transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
  .form-status--error { transition-duration: 200ms; }
  @starting-style {
    .form-status { opacity: 0; transform: translateY(8px); }
  }
  .form-status--success > .icon {
    stroke-dasharray: 70;
    animation: draw-check 420ms var(--ease-out) 120ms both;
  }
  @keyframes draw-check { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }

  /* Kaart: de stralen tekenen zich vanuit Almelo zodra de kaart in beeld komt */
  .js .map-rays line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 900ms var(--ease-out);
    transition-delay: calc(300ms + var(--r, 0) * 50ms);
  }
  .js .area-map.is-visible .map-rays line { stroke-dashoffset: 0; }

  /* Drie keer pulsen nadat de stralen er staan; geen eindeloze beweging naast leestekst */
  .map-pulse { animation: pulse 2.4s var(--ease-out) 1.2s 3 both; }
  @keyframes pulse {
    0% { transform: scale(0.6); opacity: 0.5; }
    100% { transform: scale(2.6); opacity: 0; }
  }
}

/* Reduced motion: geen verplaatsing, schaal of rotatie; wel korte vervaging
   waar een toestand wisselt, en de spinner blijft draaien als laadsignaal. */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .btn .icon-arrow,
  .nav-list a::after,
  .service summary .chev,
  .faq-toggle::before,
  .faq-toggle::after { transition: none; }
  .btn:hover .icon-arrow { transform: none; }

  @supports (interpolate-size: allow-keywords) {
    .service details::details-content,
    .faq-item details::details-content {
      opacity: 0;
      transition: opacity 150ms ease, content-visibility 150ms allow-discrete;
    }
    .service details[open]::details-content,
    .faq-item details[open]::details-content { opacity: 1; }
  }

  .form-status { transition: opacity 150ms ease; }
  @starting-style {
    .form-status { opacity: 0; }
  }

  .spinner { animation-duration: 1400ms; }

  .menu[open] .menu-panel,
  .menu[open] .menu-overlay { animation: fade-in-rm 150ms ease; }
  @keyframes fade-in-rm { from { opacity: 0; } to { opacity: 1; } }
  .menu-close:hover { transform: none; }
  .menu-layer .menu-panel,
  .menu-layer.is-open .menu-panel { transform: none; transition: opacity 150ms ease; opacity: 0; }
  .menu-layer.is-open .menu-panel { opacity: 1; }
  .menu-layer .menu-overlay { transition: opacity 150ms ease; }
}

@media print {
  .topbar, .site-header, .spoed, .cta, .footer-road { display: none; }
}