/* SB Verkeerstechniek - huisstijl v4 "de baan"
   Rode draad: de rijbaan. Wegmarkering als ritme-element, full-bleed fotografie,
   scroll-gedreven beweging. Kleuren uit het logo: antraciet + donkerrood.

   Motion draait op native CSS scroll-driven animations waar de browser die
   ondersteunt; main.js vult aan met een IntersectionObserver voor de rest.
   Content is altijd zichtbaar zonder JS. */

/* Montserrat: hetzelfde lettertype als in het logo, zodat site en merk één
   geheel zijn. Lokaal gehost, dus geen verzoek naar Google en geen IP-adres van
   bezoekers naar derden. Eén variabel bestand draagt alle gewichten. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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: "Montserrat";
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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 {
  --achtergrond: #fbfbfa;
  --ink: #17181a;
  --ink-diep: #0f1012;
  --rood: #8f191c;
  --rood-licht: #b32226;
  --rood-donker: #6d1114;
  --wit: #ffffff;
  --grijs-vlak: #f1f1ef;
  --lijn: #e6e6e3;
  --lijn-donker: rgba(255, 255, 255, 0.14);
  --tekst: #26272a;
  --tekst-zacht: #52555a;
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
  --radius-groot: 26px;
  --wrap: 1240px;
  --sectie: clamp(5rem, 10vw, 9rem);
  --soepel: cubic-bezier(0.16, 1, 0.3, 1);
  --z-header: 100;
}

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

html {
  scroll-behavior: smooth;
  /* Anchors stoppen niet onder de vaste header */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

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

/* <picture> is hier alleen een omhulsel om WebP te kunnen aanbieden. Zonder
   display:contents zou het als extra element in de layout meetellen en de
   posities van .hero-beeld img en de kaartbeelden verstoren. */
picture { display: contents; }
a { color: var(--rood); }

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.1rem;
  text-wrap: balance;
  /* Alleen afbreken waar wij zelf een &shy; zetten; automatisch afbreken gaf
     op ruime schermen lelijke splitsingen als "ge-regeld". */
  hyphens: manual;
}

h1 { font-size: clamp(2rem, 5.4vw, 4.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -0.03em; }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 0.5rem; }

p { margin: 0 0 1rem; max-width: 68ch; text-wrap: pretty; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

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

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

/* ══════════════ Merktekens ══════════════ */

/* ///-motief uit het logo */
.strepen {
  display: inline-block;
  width: 44px;
  height: 13px;
  background: repeating-linear-gradient(115deg, var(--rood) 0 6px, transparent 6px 13px);
}

/* Baanlabel: kleine kop met wegmarkering-streepje ervoor */
.baanlabel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin-bottom: 1.1rem;
}
.baanlabel::before {
  content: "";
  width: 30px;
  height: 3px;
  background: var(--rood);
  flex: none;
}
.baanlabel--licht { color: rgba(255, 255, 255, 0.66); }

/* ══════════════ Header ══════════════ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  transition: background 0.45s var(--soepel), border-color 0.45s var(--soepel),
              backdrop-filter 0.45s var(--soepel);
  border-bottom: 1px solid transparent;
}

/* Over de donkere hero: transparant, witte tekst */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 82px;
  transition: height 0.45s var(--soepel);
}

/* Twee logo-varianten over elkaar: wit op de donkere hero, kleur op licht.
   Filters werken hier niet, want het bronlogo heeft een dichte achtergrond. */
.logo-link {
  position: relative;
  display: flex;
  align-items: center;
}
.logo-link img {
  height: 42px;
  width: auto;
  transition: opacity 0.45s var(--soepel);
}
.logo-link .logo--kleur {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.site-header.is-vast .logo--kleur,
.site-header--licht .logo--kleur { opacity: 1; }
.site-header.is-vast .logo--wit,
.site-header--licht .logo--wit { opacity: 0; }

.hoofdmenu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hoofdmenu a {
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  padding-block: 0.3rem;
  transition: color 0.25s var(--soepel);
}
.hoofdmenu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--rood-licht);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--soepel);
}
.hoofdmenu a:hover { color: var(--wit); }
.hoofdmenu a:hover::after,
.hoofdmenu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.hoofdmenu .menu-bel a {
  background: var(--rood);
  color: var(--wit);
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  transition: background 0.25s var(--soepel), transform 0.2s var(--soepel);
}
.hoofdmenu .menu-bel a::after { display: none; }
.hoofdmenu .menu-bel a:hover { background: var(--rood-licht); transform: translateY(-1px); }

/* Na scroll of op subpagina's: lichte balk */
.site-header.is-vast,
.site-header--licht {
  background: rgba(251, 251, 250, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--lijn);
}
.site-header.is-vast .wrap,
.site-header--licht .wrap { height: 70px; }
.site-header.is-vast .logo-link img,
.site-header--licht .logo-link img { filter: none; }
.site-header.is-vast .hoofdmenu a,
.site-header--licht .hoofdmenu a { color: var(--tekst-zacht); }
.site-header.is-vast .hoofdmenu a:hover,
.site-header--licht .hoofdmenu a:hover { color: var(--ink); }
.site-header.is-vast .hoofdmenu a[aria-current="page"],
.site-header--licht .hoofdmenu a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.site-header.is-vast .menu-bel a,
.site-header--licht .menu-bel a { color: var(--wit); }

.menu-knop {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 0.6rem 0.72rem;
  cursor: pointer;
  transition: border-color 0.3s var(--soepel);
}
.menu-knop span {
  display: block;
  width: 22px; height: 2px;
  background: var(--wit);
  border-radius: 2px;
  transition: transform 0.35s var(--soepel), opacity 0.25s var(--soepel), background 0.3s var(--soepel);
}
.menu-knop span + span { margin-top: 5px; }
.site-header.is-vast .menu-knop,
.site-header--licht .menu-knop { border-color: var(--lijn); }
.site-header.is-vast .menu-knop span,
.site-header--licht .menu-knop span { background: var(--ink); }

/* Hamburger wordt kruis */
.menu-knop[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-knop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════ Knoppen ══════════════ */

.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  transition: background 0.28s var(--soepel), color 0.28s var(--soepel),
              border-color 0.28s var(--soepel), transform 0.2s var(--soepel),
              box-shadow 0.28s var(--soepel);
}
.knop:active { transform: scale(0.98); }

.knop--primair {
  background: var(--rood);
  color: var(--wit);
  box-shadow: 0 10px 30px -12px rgba(143, 25, 28, 0.75);
}
.knop--primair:hover {
  background: var(--rood-licht);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -14px rgba(143, 25, 28, 0.85);
}

.knop--glas {
  background: rgba(255, 255, 255, 0.1);
  color: var(--wit);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: calc(0.9rem - 1.5px) calc(1.8rem - 1.5px);
}
.knop--glas:hover { background: var(--wit); color: var(--ink); border-color: var(--wit); }

.knop--stil {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid #cdcdc9;
  padding: calc(0.9rem - 1.5px) calc(1.8rem - 1.5px);
}
.knop--stil:hover { border-color: var(--ink); transform: translateY(-2px); }

/* Pijl die meeschuift */
.knop .pijl { transition: transform 0.35s var(--soepel); }
.knop:hover .pijl { transform: translateX(4px); }

/* ══════════════ Hero ══════════════ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-diep);
  isolation: isolate;
}

.hero-beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  transform-origin: center;
}

/* Gelaagde overlay: donker naar onderen, plus een warme roodtint links */
.hero-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 16, 18, 0.94) 4%, rgba(15, 16, 18, 0.5) 42%, rgba(15, 16, 18, 0.22) 100%),
    linear-gradient(105deg, rgba(88, 14, 17, 0.42) 0%, transparent 58%);
}

.hero-inhoud {
  width: 100%;
  /* Boven altijd minstens de header-hoogte vrijhouden: bij weinig ruimte groeit
     de hero mee en zou de kop anders onder de header schuiven. */
  padding-block: max(6.5rem, clamp(3rem, 8vh, 6rem)) clamp(3.5rem, 9vh, 7rem);
  max-width: 56rem;
}

.hero h1 {
  color: var(--wit);
  margin-bottom: 1.4rem;
}
/* Signaalrood dat op de donkere foto genoeg contrast houdt; het diepe logorood
   is daar onleesbaar. */
.hero h1 .accent { color: #ff5b60; }

.hero-sub {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  max-width: 38rem;
  margin-bottom: 2rem;
}

.hero-acties { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Wegmarkering onderaan de hero: streepjes als op het asfalt */
.hero-markering {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(
    to right,
    var(--rood) 0 46px,
    transparent 46px 92px
  );
  z-index: 1;
}

/* ══════════════ Feitenstrip ══════════════ */

.feiten {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
}
.feiten .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feit {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--lijn-donker);
}
/* Eerste kolom links uitlijnen met de rest van de pagina */
.feit:first-child { padding-left: 0; border-left: none; }
.feit:last-child { padding-right: 0; }
.feit dt {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}
.feit dd {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--wit);
  letter-spacing: -0.015em;
}

/* ══════════════ Secties ══════════════ */

.sectie { padding-block: var(--sectie); }
.sectie--vlak { background: var(--grijs-vlak); }
.sectie--donker { background: var(--ink); color: rgba(255, 255, 255, 0.8); }
.sectie--donker h2, .sectie--donker h3 { color: var(--wit); }

.sectie-kop { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sectie-kop p { color: var(--tekst-zacht); font-size: 1.15rem; margin: 0; }
/* Meerdere alinea's in een sectiekop moeten wel ruimte tussen zich houden */
.sectie-kop p + p { margin-top: 0.9rem; }
.sectie--donker .sectie-kop p { color: rgba(255, 255, 255, 0.72); }

/* ══════════════ Dienstkaarten met fotokop ══════════════ */

.diensten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.dienstkaart {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s var(--soepel), box-shadow 0.5s var(--soepel),
              border-color 0.5s var(--soepel);
}
.dienstkaart:hover {
  transform: translateY(-6px);
  border-color: #d8d8d4;
  box-shadow: 0 26px 60px -30px rgba(23, 24, 26, 0.4);
}

.dienstkaart-beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.dienstkaart-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--soepel);
}
.dienstkaart:hover .dienstkaart-beeld img { transform: scale(1.06); }

.dienstkaart-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 16, 18, 0.9) 0%, rgba(15, 16, 18, 0.25) 45%, transparent 72%);
}

.dienstkaart-titel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.4rem 1.5rem;
  color: var(--wit);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
/* Rode markering die bij hover uitschuift */
.dienstkaart-titel::before {
  content: "";
  display: block;
  width: 28px; height: 3px;
  background: var(--rood-licht);
  margin-bottom: 0.7rem;
  transition: width 0.5s var(--soepel);
}
.dienstkaart:hover .dienstkaart-titel::before { width: 64px; }

.dienstkaart-tekst {
  padding: 1.5rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dienstkaart-tekst p { color: var(--tekst-zacht); margin-bottom: 1rem; }

.dienstkaart-lijst {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.96rem;
  color: var(--tekst-zacht);
}
.dienstkaart-lijst li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.3rem;
}
.dienstkaart-lijst li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 2px;
  background: var(--rood);
}

.kaart-link {
  margin-top: auto;
  font-weight: 600;
  color: var(--rood);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.kaart-link .pijl { transition: transform 0.35s var(--soepel); }
.dienstkaart:hover .kaart-link .pijl { transform: translateX(5px); }

/* ══════════════ Werkwijze: sticky stappen met vullende baan ══════════════ */

.werkwijze { position: relative; }

.werkwijze-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.werkwijze-vast {
  position: sticky;
  top: calc(70px + clamp(2rem, 6vh, 4rem));
}

.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* De "baan": verticale lijn met een rood deel dat meegroeit met de scroll */
.stappen::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--lijn-donker);
}
.stappen::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 12px;
  width: 2px;
  height: calc(100% - 24px);
  background: linear-gradient(to bottom, var(--rood-licht), var(--rood));
  transform-origin: top;
  transform: scaleY(0);
}

.stap {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
}

.stap-nummer {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--lijn-donker);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: background 0.5s var(--soepel), border-color 0.5s var(--soepel),
              color 0.5s var(--soepel), transform 0.5s var(--soepel);
}
.stap.is-actief .stap-nummer {
  background: var(--rood);
  border-color: var(--rood-licht);
  color: var(--wit);
  transform: scale(1.08);
}

.stap h3 { color: var(--wit); margin-bottom: 0.35rem; }
.stap p { color: rgba(255, 255, 255, 0.7); margin: 0; }

/* ══════════════ Certificeringen ══════════════ */

.certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.cert {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.45s var(--soepel), box-shadow 0.45s var(--soepel);
}
.cert:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -26px rgba(23, 24, 26, 0.35);
}

.cert-naam {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.1rem;
}
.cert-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rood);
  margin-bottom: 0.75rem;
}
.cert p { margin: 0; color: var(--tekst-zacht); font-size: 0.97rem; }

/* ══════════════ Split beeld/tekst ══════════════ */

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

.duo-beeld {
  border-radius: var(--radius-groot);
  overflow: hidden;
}
.duo-beeld img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.duo--omgekeerd .duo-beeld { order: 2; }

.duo p { color: var(--tekst-zacht); }
.sectie--donker .duo p { color: rgba(255, 255, 255, 0.75); }

.pijl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--rood);
  text-decoration: none;
}
.pijl-link .pijl { transition: transform 0.35s var(--soepel); }
.pijl-link:hover .pijl { transform: translateX(5px); }
.pijl-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ══════════════ CTA ══════════════ */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-groot);
  padding: clamp(2.75rem, 6vw, 5rem);
  background:
    radial-gradient(50% 70% at 82% 10%, rgba(179, 34, 38, 0.5), transparent 70%),
    radial-gradient(40% 60% at 8% 92%, rgba(143, 25, 28, 0.28), transparent 72%),
    linear-gradient(155deg, #1e2023 0%, #0f1012 100%);
  color: rgba(255, 255, 255, 0.85);
}

/* Wegmarkering langs de bovenrand van het CTA-blok */
.cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: repeating-linear-gradient(to right, var(--rood-licht) 0 34px, transparent 34px 68px);
}

.cta h2 { color: var(--wit); max-width: 18ch; }
.cta-sub { color: rgba(255, 255, 255, 0.72); max-width: 36rem; margin-bottom: 2rem; }

.cta-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.cta-acties .mail-link { color: rgba(255, 255, 255, 0.9); font-weight: 500; }
.cta-acties .mail-link:hover { color: var(--wit); }

/* ══════════════ Subpagina-kop ══════════════ */

.pagina-kop {
  padding-block: calc(70px + clamp(3rem, 7vw, 5rem)) clamp(1rem, 3vw, 2rem);
}
.pagina-kop h1 { margin-bottom: 0.85rem; }
.pagina-kop p {
  color: var(--tekst-zacht);
  font-size: 1.2rem;
  max-width: 42rem;
  margin: 0;
}

/* ══════════════ Dienstblokken (subpagina) ══════════════ */

.dienst {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--lijn);
}
.dienst:first-of-type { border-top: none; padding-top: 0; }

.dienst-beeld { border-radius: var(--radius-groot); overflow: hidden; }
.dienst img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dienst--omgekeerd .dienst-beeld { order: 2; }

.dienst ul { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--tekst-zacht); }
.dienst li { margin-bottom: 0.4rem; }
.dienst li::marker { color: var(--rood); }
.dienst p { color: var(--tekst-zacht); }

/* ══════════════ Contactpagina ══════════════ */

/* Twee grote, klikbare tegels: het telefoonnummer en het e-mailadres zijn hier
   het beeld, in lijn met de rest van de site die geen pictogrammen gebruikt. */
.contact-tegels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.contact-tegel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  transition: transform 0.45s var(--soepel), box-shadow 0.45s var(--soepel),
              border-color 0.45s var(--soepel);
}
.contact-tegel:hover {
  transform: translateY(-5px);
  border-color: #d8d8d4;
  box-shadow: 0 26px 60px -30px rgba(23, 24, 26, 0.4);
}

.contact-tegel-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin-bottom: 0.6rem;
}
.contact-tegel-label::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--rood);
  flex: none;
  transition: width 0.45s var(--soepel);
}
.contact-tegel:hover .contact-tegel-label::before { width: 52px; }

.contact-tegel-groot {
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: color 0.25s var(--soepel);
}
.contact-tegel:hover .contact-tegel-groot { color: var(--rood); }

.contact-tegel-sub { color: var(--tekst-zacht); font-size: 0.99rem; }

/* Gegevens naast een beeld */
.contact-onder {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: stretch;
}

.contact-paneel {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-groot);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.contact-paneel h2 { color: var(--wit); font-size: 1.5rem; margin-bottom: 1.5rem; }

.gegevens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 2rem;
  /* Vult de hoogte van het paneel, zodat het naast het beeld niet half leeg oogt */
  flex: 1;
  align-content: space-between;
  margin: 0;
}
.gegevens dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.3rem;
}
.gegevens dd {
  margin: 0;
  color: var(--wit);
  font-weight: 600;
  line-height: 1.45;
}
.gegevens a { color: var(--wit); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.gegevens a:hover { border-bottom-color: var(--wit); }

.contact-beeld {
  border-radius: var(--radius-groot);
  overflow: hidden;
  min-height: 260px;
}
.contact-beeld img { width: 100%; height: 100%; object-fit: cover; }

/* Praktisch blok: wat een aanvraag sneller maakt */
.aanvraag {
  background: var(--grijs-vlak);
  border-radius: var(--radius-groot);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.aanvraag h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.aanvraag > p { color: var(--tekst-zacht); margin-bottom: 1.5rem; }
.aanvraag > p + p { margin-top: -0.75rem; }

.aanvraag-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  counter-reset: aanvraag;
}
.aanvraag-lijst li {
  counter-increment: aanvraag;
  padding-top: 1rem;
  border-top: 3px solid var(--rood);
  color: var(--tekst-zacht);
}
.aanvraag-lijst li::before {
  content: counter(aanvraag, decimal-leading-zero);
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rood);
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.aanvraag-lijst strong { display: block; color: var(--ink); margin-bottom: 0.15rem; }

@media (max-width: 900px) {
  .contact-tegels { grid-template-columns: minmax(0, 1fr); }
  .contact-onder { grid-template-columns: minmax(0, 1fr); }
  .contact-beeld { min-height: 220px; }
  .aanvraag-lijst { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 520px) {
  .gegevens { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ══════════════ Footer ══════════════ */

.site-footer {
  background: var(--ink-diep);
  color: rgba(255, 255, 255, 0.68);
  padding-block: 4rem 2rem;
  font-size: 0.97rem;
}

.footer-kolommen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--lijn-donker);
}

.site-footer h3 { color: var(--wit); font-size: 1.1rem; margin-bottom: 0.8rem; }
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--wit); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }

.footer-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.5rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ══════════════════════════════════════════
   MOTION
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Hero: gestaggerde instap */
  .hero-inhoud > * {
    animation: instap 0.9s var(--soepel) both;
  }
  .hero-inhoud > *:nth-child(1) { animation-delay: 0.1s; }
  .hero-inhoud > *:nth-child(2) { animation-delay: 0.2s; }
  .hero-inhoud > *:nth-child(3) { animation-delay: 0.32s; }

  @keyframes instap {
    from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }

  /* ── Reveals ────────────────────────────────────────────────────────────
     Eerste keus is de native view()-timeline: die is declaratief en kan niet
     blijven hangen. De JS-variant eronder is alleen voor browsers zonder
     scroll-timelines, met een vangnet in main.js dat alles alsnog toont als
     de observer niet vuurt (verborgen tab, screenshot-renderer). */

  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: onthul-op linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    [data-reveal="links"]  { animation-name: onthul-links; }
    [data-reveal="rechts"] { animation-name: onthul-rechts; }

    /* Items in een groep komen kort na elkaar in beeld */
    [data-reveal-groep] > *:nth-child(2) { animation-range: entry 10% cover 32%; }
    [data-reveal-groep] > *:nth-child(3) { animation-range: entry 16% cover 38%; }

    @keyframes onthul-op {
      from { opacity: 0; transform: translateY(34px); filter: blur(5px); }
      to   { opacity: 1; transform: none;             filter: blur(0); }
    }
    @keyframes onthul-links {
      from { opacity: 0; transform: translateX(-46px); filter: blur(5px); }
      to   { opacity: 1; transform: none;              filter: blur(0); }
    }
    @keyframes onthul-rechts {
      from { opacity: 0; transform: translateX(46px); filter: blur(5px); }
      to   { opacity: 1; transform: none;             filter: blur(0); }
    }

    /* Hero-foto zoomt langzaam uit tijdens het scrollen */
    .hero-beeld img {
      animation: herozoom linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes herozoom {
      from { transform: scale(1.12); }
      to   { transform: scale(1); }
    }

    /* De baan langs de stappen vult zich mee met de scroll */
    .stappen::after {
      animation: baanvullen linear both;
      animation-timeline: view();
      animation-range: cover 14% cover 78%;
    }
    @keyframes baanvullen {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }

    /* Het stapnummer kleurt rood zodra de baan die stap bereikt */
    .stap-nummer {
      animation: stap-bereikt linear both;
      animation-timeline: view();
      animation-range: cover 30% cover 46%;
    }
    @keyframes stap-bereikt {
      to {
        background: var(--rood);
        border-color: var(--rood-licht);
        color: var(--wit);
        transform: scale(1.08);
      }
    }

    /* Header wisselt van transparant naar licht op scrollhoogte.
       Elk element krijgt dezelfde scroll-timeline en range. */
    .site-header,
    .site-header .wrap,
    .logo--wit, .logo--kleur,
    .hoofdmenu a,
    .menu-knop, .menu-knop span {
      animation: linear both;
      animation-timeline: scroll(root);
      animation-range: 62vh 74vh;
    }
    .site-header:not(.site-header--licht) { animation-name: kop-vast; }
    .site-header:not(.site-header--licht) .wrap { animation-name: kop-krimp; }
    .site-header:not(.site-header--licht) .logo--wit { animation-name: verdwijn; }
    .site-header:not(.site-header--licht) .logo--kleur { animation-name: verschijn; }
    .site-header:not(.site-header--licht) .hoofdmenu a { animation-name: kop-link; }
    .site-header:not(.site-header--licht) .menu-knop { animation-name: kop-knop; }
    .site-header:not(.site-header--licht) .menu-knop span { animation-name: kop-streep; }
    /* De telefoonknop en het mobiele overlay houden hun eigen kleuren */
    .site-header:not(.site-header--licht) .menu-bel a { animation: none; }

    @keyframes kop-vast {
      to {
        background: rgba(251, 251, 250, 0.86);
        backdrop-filter: blur(14px) saturate(1.4);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        border-bottom-color: var(--lijn);
      }
    }
    @keyframes kop-krimp { to { height: 70px; } }
    @keyframes verdwijn  { to { opacity: 0; } }
    @keyframes verschijn { to { opacity: 1; } }
    @keyframes kop-link  { to { color: var(--tekst-zacht); } }
    @keyframes kop-knop  { to { border-color: var(--lijn); } }
    @keyframes kop-streep { to { background: var(--ink); } }
  }

  @supports not (animation-timeline: view()) {
    html.js [data-reveal] {
      opacity: 0;
      filter: blur(5px);
      transition: opacity 0.9s var(--soepel), transform 0.9s var(--soepel), filter 0.9s var(--soepel);
      transition-delay: var(--vertraging, 0s);
    }
    html.js [data-reveal="op"]     { transform: translateY(34px); }
    html.js [data-reveal="links"]  { transform: translateX(-46px); }
    html.js [data-reveal="rechts"] { transform: translateX(46px); }
    html.js [data-reveal].is-zichtbaar { opacity: 1; transform: none; filter: blur(0); }

    .stappen::after {
      transform: scaleY(var(--baanvulling, 0));
      transition: transform 1s var(--soepel);
    }
    .hero-beeld img { transform: scale(1.04); }
  }
}

/* ══════════════ Responsive ══════════════ */

@media (max-width: 1000px) {
  .diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diensten > :first-child { grid-column: 1 / -1; }
  .diensten > :first-child .dienstkaart-beeld { aspect-ratio: 21 / 9; }

  .werkwijze-grid { grid-template-columns: 1fr; }
  .werkwijze-vast { position: static; }
}

@media (max-width: 900px) {
  .feiten .wrap { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: 1fr; }
  .duo, .contact-blok, .dienst { grid-template-columns: minmax(0, 1fr); }
  .duo--omgekeerd .duo-beeld, .dienst--omgekeerd .dienst-beeld { order: 0; }
  .footer-kolommen { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 760px) {
  .diensten { grid-template-columns: minmax(0, 1fr); }
  .diensten > :first-child .dienstkaart-beeld { aspect-ratio: 4 / 3; }

  .menu-knop { display: block; }

  .hoofdmenu {
    /* Niet inset:0 gebruiken: de header animeert backdrop-filter en wordt
       daardoor zelf het containing block, waardoor het overlay tot de
       header-hoogte zou krimpen. Viewport-eenheden omzeilen dat. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 5rem clamp(1.5rem, 6vw, 3rem) 3rem;
    background: rgba(15, 16, 18, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Uit beeld tot geopend */
    clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
    transition: clip-path 0.6s var(--soepel), visibility 0.6s;
    visibility: hidden;
  }
  .hoofdmenu.is-open {
    clip-path: circle(150% at calc(100% - 3rem) 2.5rem);
    visibility: visible;
  }

  .hoofdmenu a,
  .site-header.is-vast .hoofdmenu a,
  .site-header--licht .hoofdmenu a {
    display: block;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--wit);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--soepel), transform 0.5s var(--soepel), color 0.25s;
  }
  .hoofdmenu.is-open a { opacity: 1; transform: none; }
  .hoofdmenu.is-open li:nth-child(1) a { transition-delay: 0.14s; }
  .hoofdmenu.is-open li:nth-child(2) a { transition-delay: 0.2s; }
  .hoofdmenu.is-open li:nth-child(3) a { transition-delay: 0.26s; }
  .hoofdmenu.is-open li:nth-child(4) a { transition-delay: 0.32s; }
  .hoofdmenu.is-open li:nth-child(5) a { transition-delay: 0.38s; }

  .hoofdmenu .menu-bel { margin-top: 1.75rem; }
  .hoofdmenu .menu-bel a,
  .site-header.is-vast .menu-bel a {
    text-align: center;
    border-bottom: none;
    background: var(--rood);
    border-radius: 999px;
    font-size: 1.15rem;
    padding: 0.95rem 1.4rem;
  }

  /* Menu-knop blijft boven het overlay */
  .menu-knop { position: relative; z-index: 2; }
  .menu-knop[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.4); }
  .menu-knop[aria-expanded="true"] span { background: var(--wit); }

  .hero { min-height: 92svh; }
  .hero-inhoud { padding-bottom: 3.5rem; }
}

@media (max-width: 520px) {
  .feiten .wrap { grid-template-columns: 1fr; }

  /* Knoppen vullen de breedte in plaats van hun label af te breken */
  .hero-acties, .cta-acties { flex-direction: column; align-items: stretch; }
  .hero-acties .knop, .cta-acties .knop { justify-content: center; }
  .cta-acties .mail-link { text-align: center; }
}

/* Bij printen lopen scroll-timelines niet, waardoor alles op de begin-staat
   (opacity 0) zou blijven staan en de pagina leeg uit de printer komt. */
@media print {
  [data-reveal], .hero-beeld img, .stappen::after, .stap-nummer, .site-header * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .site-header { position: static !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  /* Ook de scroll-timeline-varianten uitzetten, anders blijft de eindstaat uit */
  [data-reveal], .hero-beeld img, .stap-nummer, .site-header * {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .stappen::after { animation: none !important; transform: scaleY(1); }
  /* Zonder animatie moet de vaste kop-staat direct gelden */
  .site-header {
    animation: none !important;
    background: rgba(251, 251, 250, 0.94);
    border-bottom-color: var(--lijn);
  }
  .site-header .logo--wit { opacity: 0; }
  .site-header .logo--kleur { opacity: 1; }
  .site-header .hoofdmenu a { color: var(--tekst-zacht); }
  .site-header .menu-knop span { background: var(--ink); }
}

/* ══════════════ Juridische pagina's ══════════════ */

.juridisch {
  max-width: 46rem;
  padding-block: clamp(2rem, 4vw, 3rem) var(--sectie);
}
.juridisch h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-top: 2.75rem;
}
.juridisch h2:first-of-type { margin-top: 1rem; }
.juridisch h3 {
  font-size: 1.12rem;
  margin-top: 1.6rem;
}
.juridisch p, .juridisch li { color: var(--tekst-zacht); }
.juridisch ul { padding-left: 1.15rem; margin-bottom: 1rem; }
.juridisch li { margin-bottom: 0.4rem; }
.juridisch li::marker { color: var(--rood); }
.juridisch strong { color: var(--ink); }

.juridisch-datum {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--tekst-zacht);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 0.5rem;
}

/* Losse notitie in de tekst (bijv. "geen tracking op deze site") */
.juridisch-kader {
  background: var(--grijs-vlak);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-block: 1.5rem;
}
.juridisch-kader p:last-child { margin-bottom: 0; }

/* ══════════════ Footer: juridische regel en afzender ══════════════ */

.footer-juridisch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.footer-juridisch a { font-size: 0.88rem; }

/* De onderste regel draagt nu drie groepen; op smal scherm netjes onder elkaar */
.footer-onder { align-items: center; }
@media (max-width: 760px) {
  .footer-onder { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .footer-juridisch { order: -1; }
}

.footer-afzender {
  /* max-width: none, anders erft de <p> de 68ch uit de basisstijl en staat
     de tekst gecentreerd binnen een smaller blok in plaats van in het midden */
  max-width: none;
  margin: 0;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.42);
}
.footer-afzender a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 0.2s var(--soepel), border-color 0.2s var(--soepel);
}
.footer-afzender a:hover {
  color: var(--wit);
  border-bottom-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

/* ══════════════ Cookiemelding ══════════════ */

.cookiemelding {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.75rem);
  transform: translateX(-50%);
  width: min(calc(100vw - 2rem), 46rem);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius);
  border-top: 3px solid var(--rood);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.6);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.75rem;
  align-items: center;
}
.cookiemelding[hidden] { display: none; }

.cookiemelding h2 {
  color: var(--wit);
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}
.cookiemelding p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: none;
}
.cookiemelding a { color: var(--wit); }

.cookiemelding-knop {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--wit);
  background: var(--rood);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--soepel), transform 0.15s var(--soepel);
}
.cookiemelding-knop:hover { background: var(--rood-licht); }
.cookiemelding-knop:active { transform: scale(0.98); }

@media (prefers-reduced-motion: no-preference) {
  .cookiemelding { animation: melding-in 0.55s var(--soepel) 0.4s both; }
  @keyframes melding-in {
    from { opacity: 0; transform: translate(-50%, 18px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
}

@media (max-width: 620px) {
  .cookiemelding { grid-template-columns: 1fr; }
  .cookiemelding-knop { width: 100%; }
}

@media print { .cookiemelding { display: none !important; } }