/* ==========================================================================
   Onderhoudsbedrijf AZD — Delft
   Designsysteem v1 — "Kalk & Inkt"
   Warm kalkwit papier · diepblauwe inkt · oranje kwaststreek
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Tokens ---------- */
:root {
  /* Merkkleuren, afgeleid van het logo */
  --blue:        #1b4a93;   /* merkblauw */
  --blue-deep:   #12305e;   /* inkt, koppen en donkere vlakken */
  --blue-ink:    #0c2244;   /* diepste blauw, footer/nav-scrolled */
  --blue-wash:   #e8eef8;   /* zeer licht blauw vlak */
  --orange:      #ee7519;   /* merkoranje, accent + primaire CTA */
  --orange-deep: #cf5f0c;
  --orange-wash: #fdefe2;

  /* Papier */
  --paper:       #f7f4ee;   /* kalkwit, hoofdachtergrond */
  --paper-warm:  #efe9df;   /* iets dieper papier */
  --chalk:       #ffffff;

  /* Tekst */
  --ink:         #16202e;
  --ink-soft:    #47535f;
  --ink-mute:    #7b8794;
  --line:        #ded6c9;   /* warme lijnkleur i.p.v. grijs */

  /* Typografie */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Vorm: strak en recht, één signatuurboog op het beeld */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --arch: 190px;            /* boog boven het herobeeld, echo van een erker */

  --shadow-soft: 0 1px 2px rgba(18, 48, 94, .05), 0 12px 32px -12px rgba(18, 48, 94, .18);
  --shadow-lift: 0 2px 4px rgba(18, 48, 94, .06), 0 22px 48px -18px rgba(18, 48, 94, .28);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 78px;
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue-ink);
  line-height: 1.08;
  letter-spacing: -.015em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--blue-ink); color: #fff; padding: 12px 20px; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }

:where(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ==========================================================================
   Kleurstaal-strip — signatuurelement van het merk
   ========================================================================== */
.swatch { display: flex; height: 6px; width: 100%; }
.swatch span { flex: 1; }
.swatch span:nth-child(1) { background: var(--blue-ink); }
.swatch span:nth-child(2) { background: var(--blue); }
.swatch span:nth-child(3) { background: var(--orange); flex: 1.6; }
.swatch span:nth-child(4) { background: var(--paper-warm); }
.swatch span:nth-child(5) { background: var(--chalk); }

/* ==========================================================================
   Navigatie
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(12, 34, 68, .5); }

.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: var(--nav-h);
}
/* ---------- Logo in de hoofdnavigatie ---------- */
.nav__logo-img { display: block; height: 36px; width: auto; }

/* ---------- Woordmerk: tekstversie voor mobiel menu en footer op donkere ondergrond ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 11px; }
.wordmark__icon { width: 30px; height: 30px; flex: none; color: var(--blue-ink); }
.wordmark--light .wordmark__icon { color: #fff; }
.wordmark__text { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
.wordmark__name {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  letter-spacing: -.025em; color: var(--blue-ink);
}
.wordmark__dot { color: var(--orange); }
.wordmark__sub {
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .155em; text-transform: uppercase; color: var(--blue);
}
.wordmark--light .wordmark__name { color: #fff; }
.wordmark--light .wordmark__sub { color: rgba(255, 255, 255, .5); }

.nav__menu { display: flex; align-items: center; gap: 34px; list-style: none; }


/* Uitklapbaar diensten-item */
.nav__sub { position: relative; }
.nav__subtoggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15.5px; font-weight: 500; color: var(--blue-deep);
  padding-block: 6px;
}
.nav__chev { width: 13px; height: 13px; opacity: .55; }
.nav__sub.is-open .nav__chev { opacity: 1; }

.nav__submenu {
  position: absolute; top: calc(100% + 12px); left: -16px;
  color: var(--ink-soft);
  min-width: 236px; list-style: none;
  background: var(--chalk);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  box-shadow: 0 6px 16px -12px rgba(18, 48, 94, .35);
  padding: 4px 0;
  opacity: 0; visibility: hidden;
}
.nav__sub.is-open .nav__submenu,
.nav__sub:hover .nav__submenu,
.nav__sub:focus-within .nav__submenu {
  opacity: 1; visibility: visible;
}
/* Onzichtbare brug zodat de muis van knop naar paneel kan zonder dat het sluit */
.nav__submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.nav__submenu a {
  display: block; padding: 9px 16px;
  font-size: 15px; color: var(--ink-soft);
}
.nav__submenu a:hover { background: var(--paper); color: var(--blue-ink); }

.nav__menu a {
  position: relative;
  font-size: 15.5px; font-weight: 500; color: var(--blue-deep);
  padding-block: 6px;
}
.nav__menu a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--orange);
  transition: right .28s var(--ease);
}
.nav__menu a:hover::after { right: 0; }

/* Het uitklappaneel is een eigen vlak; de onderstreping van het hoofdmenu hoort
   daar niet in. */
.nav__menu .nav__submenu a::after { content: none; }

.nav__actions { display: flex; align-items: center; gap: 14px; }

/* Taalschakelaar, staat pas aan als de Engelse pagina bestaat */
/* Taalschakelaar */
.nav__taal {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 50px;
  font-size: 12.5px; font-weight: 700;
  color: var(--blue); background: var(--blue-wash);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.nav__taal:hover { background: var(--blue); color: #fff; }
/* Nog geen Engelse pagina: cursor blijft normaal zodat het niet als link aanvoelt */
.nav__taal--loos { cursor: default; }

.nav__burger {
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--chalk);
  place-items: center;
}
.nav__burger span {
  display: block; width: 20px; height: 2px; background: var(--blue-ink);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s;
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel paneel */
.mobnav {
  position: fixed; inset: 0; z-index: 150;
  background: var(--blue-ink); color: #fff;
  display: flex; flex-direction: column;
  padding: 20px 24px 32px;
  transform: translateY(-100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
}
.mobnav.is-open { transform: translateY(0); }
/* moet de UA-regel [hidden]{display:none} herstellen, die display:flex hierboven overschrijft */
.mobnav[hidden] { display: none; }
.mobnav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }

.mobnav__close { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm); }
.mobnav__close svg { width: 20px; height: 20px; stroke: #fff; }
.mobnav__links { display: flex; flex-direction: column; }
.mobnav__links a {
  font-family: var(--font-display); font-size: 26px; font-weight: 600; color: #fff;
  padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* Uitklapbaar diensten-item op mobiel */
.mobnav__group { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mobnav__toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-display); font-size: 26px; font-weight: 600; color: #fff;
  padding: 15px 0;
}
.mobnav__toggle .nav__chev { width: 20px; height: 20px; stroke: var(--orange); }
.mobnav__group.is-open .nav__chev { transform: rotate(180deg); }
.mobnav__sub { padding: 2px 0 14px 16px; display: flex; flex-direction: column; }
.mobnav__sub a {
  font-family: var(--font-sans); font-size: 17px; font-weight: 500;
  color: rgba(255, 255, 255, .78);
  padding: 11px 0; border-bottom: 0;
}
.mobnav__sub a:hover { color: #fff; }
.mobnav__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; }

/* ==========================================================================
   Knoppen
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
  padding: 14px 24px; border-radius: var(--r-sm);
  border: 1.5px solid transparent; white-space: nowrap;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(238, 117, 25, .9);
}
.btn--primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); box-shadow: 0 14px 26px -12px rgba(207, 95, 12, .95); }
.btn--primary .btn__arrow { transition: transform .22s var(--ease); }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }

.btn--ink { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.btn--ink:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn--line {
  background: transparent; border-color: var(--blue-deep); color: var(--blue-deep);
}
.btn--line:hover { background: var(--blue-deep); color: #fff; }
.btn--line svg { stroke: currentColor; }

.btn--onink { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.btn--onink:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

.btn--sm { padding: 11px 18px; font-size: 14.5px; }
.btn--block { width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  padding-block: 30px;
  /* Zo eindigt de hero precies bij de onderkant van het scherm en is de
     kleurstaal-strook de laatste strook die je bij het laden ziet. */
  min-height: calc(100svh - var(--nav-h) - 6px);
  display: flex; align-items: center;
}
.hero > .wrap { width: 100%; }

/* Zachte kalkvlek op de achtergrond, subtiel en statisch */
.hero::before {
  content: ''; position: absolute; z-index: 0;
  top: -160px; left: -180px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(27, 74, 147, .07), transparent 68%);
  pointer-events: none;
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 60px;
  align-items: center;
}

.hero__copy { max-width: 640px; }

/* Eyebrow: streepje + label, geen pill */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 26px;
}
.hero__eyebrow::before {
  content: ''; width: 9px; height: 9px; background: var(--orange); border-radius: 1px;
}

.hero__title {
  font-size: clamp(2.25rem, 3.6vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  margin-bottom: 14px;
}

/* Kwaststreek onder het accentwoord */
.hero__brush {
  position: relative; display: inline-block; color: var(--blue);
  white-space: nowrap;
}
.hero__brush svg {
  position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em;
  fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round;
  opacity: .85;
}

.hero__lead {
  font-size: 18px; line-height: 1.58; color: var(--ink-soft);
  max-width: 33em; margin-bottom: 16px;
}
.hero__lead strong { color: var(--blue-ink); font-weight: 600; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Badges onder de CTA's: reviews en werkgebied naast elkaar */
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero__rev-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--chalk);
  padding: 9px 18px 9px 14px;
  text-decoration: none; transition: border-color .15s ease;
}
.hero__rev-pill:hover, .hero__rev-pill:focus-visible { border-color: var(--orange); }
.hero__rev-g { width: 18px; height: 18px; flex: none; }
.hero__rev-tekst { font-size: 14px; color: var(--ink-soft); }
.hero__rev-cijfer { font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; color: var(--blue-ink); }
.hero__rev-sterren { color: #FBBC04; font-size: 13px; letter-spacing: 1.5px; }
/* Lege staat: er is nog geen score. Verwijder deze class zodra het profiel live is. */
.hero__rev-pill--leeg { border-style: dashed; background: transparent; }
.hero__rev-pill--leeg .hero__rev-tekst { color: var(--ink-mute); }
.hero__rev-pill--leeg .hero__rev-g { opacity: .55; }



/* --- Beeldkolom: portretfoto met boog, gecentreerd en volledig in beeld --- */
.hero__visual {
  position: relative; align-self: center;
  width: fit-content; margin-inline: auto;
}

/* Hoogte-gestuurd i.p.v. breedte-gestuurd: de foto past zo altijd binnen het
   scherm bij het laden, ook op een lage laptopviewport. */
.hero__frame {
  position: relative;
  border-radius: var(--arch) var(--arch) var(--r-md) var(--r-md);
  overflow: hidden;
  background: var(--paper-warm);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 3 / 4;
  height: clamp(400px, 72vh, 680px);
  width: auto; max-width: 100%;
  margin-inline: auto;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Tweede, kleinere foto die linksonder over de hoofdfoto valt */
.hero__frame-sm {
  position: absolute; left: -60px; bottom: 40px; z-index: 3;
  width: clamp(140px, 13vw, 196px); aspect-ratio: 3 / 4;
  border-radius: var(--r-md); overflow: hidden;
  border: 7px solid var(--paper);
  box-shadow: var(--shadow-lift);
}
.hero__frame-sm img { width: 100%; height: 100%; object-fit: cover; }
/* Dun kalkrandje binnen de boog */
.hero__frame::after {
  content: ''; position: absolute; inset: 10px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: calc(var(--arch) - 10px) calc(var(--arch) - 10px) var(--r-sm) var(--r-sm);
  pointer-events: none;
}

/* Kleurstaal-kolom naast het beeld */
.hero__chips {
  position: absolute; left: -15px; top: 8%; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}
.hero__chips i {
  width: 22px; height: 34px; border-radius: 2px; display: block;
  box-shadow: 0 3px 10px -4px rgba(18, 48, 94, .5);
}
.hero__chips i:nth-child(1) { background: var(--blue-ink); }
.hero__chips i:nth-child(2) { background: var(--blue); }
.hero__chips i:nth-child(3) { background: var(--orange); height: 48px; }
.hero__chips i:nth-child(4) { background: var(--paper-warm); }


/* --- Trustbalk onder de hero --- */
.trustbar { background: var(--blue-ink); color: rgba(255, 255, 255, .82); }
.trustbar__row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.trustbar__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 22px 26px 22px 0;
  font-size: 15px; line-height: 1.45;
}
.trustbar__item + .trustbar__item { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .14); }
.trustbar__item svg { width: 20px; height: 20px; stroke: var(--orange); flex: none; margin-top: 2px; }
.trustbar__item strong { display: block; color: #fff; font-weight: 600; font-size: 15.5px; }
.trustbar__item span { font-size: 13.5px; color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   Zachte intro-animatie (respecteert prefers-reduced-motion, JS-vrij)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s var(--ease) both; }
  .rise-1 { animation-delay: .05s; }
  .rise-2 { animation-delay: .13s; }
  .rise-3 { animation-delay: .21s; }
  .rise-4 { animation-delay: .29s; }
  .rise-5 { animation-delay: .37s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptop */
@media (max-width: 1150px) {
  :root { --arch: 150px; }
  .hero__grid { gap: 48px; }
  .hero__chips { left: -22px; }
}

/* Tablet: één kolom, beeld onder de tekst */
@media (max-width: 940px) {
  .nav__menu { display: none; }
  .nav__burger { display: grid; }
  .nav__actions .btn--primary,
  .nav__actions .nav__taal { display: none; }

  .hero { padding-top: 40px; padding-bottom: 34px; min-height: 0; display: block; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__copy { padding-bottom: 0; max-width: 620px; }
  .hero__visual { max-width: 520px; margin-inline: auto; width: 100%; }
  .hero__frame-sm { left: auto; right: -22px; bottom: 26px; width: 132px; border-width: 6px; }
  .hero__frame { height: auto; width: 100%; }
  .hero__frame::after { border-radius: calc(var(--arch) - 10px) calc(var(--arch) - 10px) var(--r-sm) var(--r-sm); }
  .hero__chips { display: none; }

  .trustbar__item { padding: 18px 20px 18px 0; }
  .trustbar__item + .trustbar__item { padding-left: 20px; }
}

/* Mobiel */
@media (max-width: 640px) {
  :root { --arch: 118px; --nav-h: 68px; }
  body { font-size: 16.5px; }
  .wrap { padding-inline: 20px; }

  .nav__logo-img { height: 30px; }

  .hero { padding-top: 30px; padding-bottom: 28px; }
  .hero__rev { margin-top: 16px; }
  .hero__rev-tekst { font-size: 13.5px; }
  .hero__grid { gap: 36px; }
  .hero__eyebrow { font-size: 11.5px; letter-spacing: .1em; margin-bottom: 18px; gap: 10px; }
  .hero__title { font-size: clamp(1.95rem, 7.8vw, 2.5rem); letter-spacing: -.02em; }
  .hero__brush { white-space: normal; }
  .hero__brush svg { stroke-width: 8; }
  .hero__lead { font-size: 17px; }

  /* CTA's op mobiel: vol breed en met duim bereikbaar */
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; padding: 16px 20px; font-size: 16px; }

  .hero__visual { max-width: none; }
  .hero__frame-sm { display: none; }

  .trustbar__row { grid-template-columns: 1fr; }
  .trustbar__item { padding: 15px 0; }
  .trustbar__item + .trustbar__item { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .trustbar__item:nth-child(even) { border-left: 0; }
  .mobnav__links a { font-size: 23px; }
}

/* Zeer smalle toestellen */
@media (max-width: 360px) {
  .hero__title { font-size: 1.95rem; }
}

/* ==========================================================================
   SECTIES — gedeelde bouwstenen
   ========================================================================== */
:root { --sec: clamp(60px, 7.5vw, 100px); }

.sec { padding-block: var(--sec); }
.sec--compact { padding-block: clamp(20px, 3vw, 34px); }
.sec--compact + .sec--compact { padding-top: 0; }
.sec--paper  { background: var(--paper); }
.sec--chalk  { background: var(--chalk); }
.sec--warm   { background: var(--paper-warm); }
.sec--ink    { background: var(--blue-ink); color: rgba(255, 255, 255, .78); }
.sec--ink h2, .sec--ink h3 { color: #fff; }

/* Sectiekop: streepje + label, zelfde ritme als de hero */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 9px; height: 9px; background: var(--orange); border-radius: 1px; }
.sec--ink .eyebrow { color: rgba(255, 255, 255, .65); }

.sec__head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 58px); }
.sec__head--split {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.sec__title { font-size: clamp(1.9rem, 3.1vw, 2.85rem); letter-spacing: -.022em; margin-bottom: 16px; }
.sec__intro { font-size: 18px; line-height: 1.6; max-width: 60ch; }
.sec--ink .sec__intro { color: rgba(255, 255, 255, .74); }

.arrowlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15.5px; color: var(--blue);
}
.arrowlink svg { width: 17px; height: 17px; transition: transform .22s var(--ease); }
.arrowlink:hover { color: var(--orange-deep); }
.arrowlink:hover svg { transform: translateX(4px); }

/* ==========================================================================
   DIENSTEN
   ========================================================================== */
.diensten__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.dienst {
  position: relative; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dienst:hover { border-color: #c9bda9; transform: translateY(-3px); box-shadow: var(--shadow-soft); }

/* Beeldvlak bovenin de kaart */
.dienst__beeld {
  position: relative; overflow: hidden; z-index: 2; cursor: pointer;
  height: 240px;
  background: var(--paper-warm);
}
.dienst__beeld img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  transition: transform .6s var(--ease);
}
.dienst:hover .dienst__beeld img { transform: scale(1.05); }
/* Voor foto's die met "cover" te veel bijgesneden worden: hele foto tonen, niet bijsnijden */
.dienst__beeld--uitgezoomd img { object-fit: contain; object-position: center; }
.dienst:hover .dienst__beeld--uitgezoomd img { transform: none; }
.dienst__beeld .project__zoom { opacity: 0; }
.dienst__beeld:hover .project__zoom, .dienst__beeld:focus-visible .project__zoom { opacity: 1; }


.dienst__body { padding: 24px 26px 22px; display: flex; flex-direction: column; flex: 1; }
.dienst__icon {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(238, 117, 25, .12); color: var(--orange-deep);
}
.dienst__icon svg { width: 22px; height: 22px; }
.dienst__title { font-size: 1.25rem; margin-bottom: 9px; }
/* De titel is de echte link; het vlak eronder maakt de hele kaart klikbaar.
   De knoppen liggen er met z-index bovenop en blijven dus apart aanklikbaar. */
.dienst__link { color: inherit; }
.dienst__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.dienst:hover .dienst__link { color: var(--blue); }
.dienst__link:focus-visible { outline: none; }
.dienst:has(.dienst__link:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.dienst__cta { position: relative; z-index: 2; }
.dienst__text { font-size: 14.5px; line-height: 1.65; margin-bottom: 16px; }
.dienst__list { list-style: none; display: grid; gap: 6px; margin-bottom: 20px; }
.dienst__list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink-soft); }
.dienst__list li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--orange-wash); border: 1.5px solid var(--orange);
}
.dienst__cta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 9px; position: relative; z-index: 2; }
.dienst__cta .btn { padding: 10px 16px; font-size: 14px; }
.dienst__cta .btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   VOOR WIE — particulieren, VvE's, verhuurders
   ========================================================================== */
.doelgroep__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.doelgroep__grid--2 { grid-template-columns: repeat(2, 1fr); }
.doelgroep__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1050px) { .doelgroep__grid--4 { grid-template-columns: repeat(2, 1fr); } }
.doelgroep__grid .dienst { background: var(--chalk); }
.doelgroep__grid .dienst__text { margin-bottom: 0; }

/* ==========================================================================
   WERKWIJZE — genummerde stappen
   ========================================================================== */
.stappen { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

/* Rusttoestand: gedimd. Bij het in beeld scrollen loopt de oranje lijn over de
   bovenrand naar rechts en kleurt het cijfer op. Hover verdikt die lijn en tilt
   de stap een paar pixels op, verder niets. */
.stap {
  position: relative;
  padding-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, .16);
  cursor: default;
  transition: transform .28s var(--ease);
}
.stap:hover { transform: translateY(-4px); }

.stap::before {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease);
}
.stap.is-actief::before { transform: scaleX(1); }

/* Bij hover veegt een dikkere oranje balk van links naar rechts over die lijn heen */
.stap::after {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 4px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--ease);
}
.stap:hover::after { transform: scaleX(1); }

.stap__nr {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 2.5rem;
  color: rgba(255, 255, 255, .3); line-height: 1; margin-bottom: 12px;
  transition: color .42s var(--ease);
}
.stap.is-actief .stap__nr { color: var(--orange); }

.stap h3 {
  font-size: 1.2rem; margin-bottom: 9px;
  color: rgba(255, 255, 255, .78);
  transition: color .42s var(--ease);
}
.stap.is-actief h3 { color: #fff; }

.stap p {
  font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .55);
  transition: color .42s var(--ease);
}
.stap.is-actief p { color: rgba(255, 255, 255, .78); }

/* Ze lichten na elkaar op in plaats van alle vier tegelijk */
.stap:nth-child(2)::before, .stap:nth-child(2) .stap__nr { transition-delay: .12s; }
.stap:nth-child(3)::before, .stap:nth-child(3) .stap__nr { transition-delay: .24s; }
.stap:nth-child(4)::before, .stap:nth-child(4) .stap__nr { transition-delay: .36s; }
.stap:hover::before, .stap:hover .stap__nr { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .stap, .stap::before, .stap::after, .stap__nr, .stap h3, .stap p { transition: none; }
  .stap:hover { transform: none; }
  .stap::before { transform: scaleX(1); }
  .stap .stap__nr { color: var(--orange); }
  .stap h3 { color: #fff; }
  .stap p { color: rgba(255, 255, 255, .78); }
}

.werkwijze__foot {
  margin-top: clamp(34px, 4vw, 52px); padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.werkwijze__foot p { font-size: 16.5px; color: rgba(255, 255, 255, .8); max-width: 46ch; }
.werkwijze__foot--knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.werkwijze__foot--knoppen .btn { flex: none; }


/* ==========================================================================
   PROJECTEN
   ========================================================================== */
.projecten__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.project {
  position: relative; overflow: hidden; margin: 0;
  border-radius: 74px 74px var(--r-md) var(--r-md);
  background: var(--paper-warm);
  aspect-ratio: 3 / 4;
  cursor: pointer;
}
.project img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.project:hover img { transform: scale(1.045); }
.project figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 20px 18px; color: #fff;
  background: linear-gradient(to top, rgba(12, 34, 68, .9), rgba(12, 34, 68, 0));
}
.project figcaption strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.project figcaption span { font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.project__zoom {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(12, 34, 68, .55); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.85);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.project__zoom svg { width: 16px; height: 16px; }
.project:hover .project__zoom, .project:focus-visible .project__zoom { opacity: 1; transform: scale(1); }

/* ---------- Lightbox voor projectfoto's ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12, 34, 68, .94);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox__stage { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__img {
  display: block; max-width: min(88vw, 900px); max-height: 74vh; width: auto; height: auto;
  border-radius: var(--r-sm); box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  background: var(--paper-warm);
}
.lightbox__caption { color: #fff; font-size: 14.5px; text-align: center; max-width: 62ch; line-height: 1.5; }
.lightbox__caption strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 2px; }
.lightbox__caption span { color: rgba(255, 255, 255, .7); }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.lightbox__close { top: 18px; right: 18px; width: 44px; height: 44px; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__counter {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  color: rgba(255, 255, 255, .7); font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
}
@media (max-width: 640px) {
  .lightbox { padding: 20px 14px; }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
  .lightbox__close { top: 10px; right: 10px; }
  .lightbox__counter { top: 16px; left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .project img, .project__zoom, .lightbox__close, .lightbox__nav { transition: none; }
}

/* ==========================================================================
   OVER NOORDERLAAG
   ========================================================================== */
.over__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(38px, 5vw, 72px); align-items: center;
}
.over__body p { font-size: 17.5px; line-height: 1.66; margin-bottom: 16px; }
.over__punten { list-style: none; display: grid; gap: 14px; margin: 26px 0 30px; }
.over__punten li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.over__punten svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 2; flex: none; margin-top: 3px; }
.over__punten strong { color: var(--blue-ink); font-weight: 600; }

.over__visual figure {
  margin: 0;
  border-radius: 130px 130px var(--r-md) var(--r-md);
  overflow: hidden; aspect-ratio: 3 / 4; max-height: 520px; margin-inline: auto;
  box-shadow: var(--shadow-lift); background: var(--paper-warm);
}
.over__visual img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   WERKGEBIED
   ========================================================================== */
/* ==========================================================================
   REVIEWS — slot voor de echte Google-reviews
   ========================================================================== */
.reviews__head {
  display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: end;
  margin-bottom: 38px;
}
.reviews__head > div:first-child { max-width: 46em; }

/* Samenvatting: nabootsing van het blok dat Google zelf boven de reviews toont */
.reviews__score {
  display: flex; align-items: center; gap: 14px;
  background: var(--chalk);
  border: 1px solid rgba(18, 48, 94, .1); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(18, 48, 94, .05);
  padding: 18px 24px;
}
.reviews__g { width: 30px; height: 30px; flex: none; }
.reviews__cijferrij { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.reviews__cijfer {
  font-family: var(--font-sans); font-weight: 600; font-size: 25px;
  letter-spacing: -.02em; color: var(--blue-ink); line-height: 1;
}
.reviews__sterren { color: #FBBC04; font-size: 16px; letter-spacing: 1px; }
.reviews__sub { font-size: 13px; line-height: 1.4; color: var(--ink-mute); }

.reviews__carousel { position: relative; }
.reviews__grid {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; margin: 0 -2px; scrollbar-width: none;
}
.reviews__grid::-webkit-scrollbar { display: none; }

.review {
  position: relative;
  background: var(--chalk);
  border: 1px solid rgba(18, 48, 94, .1); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(18, 48, 94, .05), 0 10px 26px -22px rgba(18, 48, 94, .5);
  padding: 22px 24px 24px;
  display: flex; flex-direction: column;
  flex: 0 0 min(340px, 84vw); scroll-snap-align: start;
}

.reviews__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.rev-nav {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; border: 1px solid rgba(18, 48, 94, .16); background: var(--chalk);
  color: var(--blue-ink); cursor: pointer;
}
.rev-nav svg { width: 19px; height: 19px; }
.rev-nav:hover { border-color: var(--orange); color: var(--orange); }
.rev-nav:disabled { opacity: .35; cursor: default; }
.rev-nav:disabled:hover { border-color: rgba(18, 48, 94, .16); color: var(--blue-ink); }
.reviews__dots { display: flex; align-items: center; gap: 9px; }
.rev-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(18, 48, 94, .22); cursor: pointer;
}
.rev-dot[aria-current="true"] { background: var(--orange); }

.reviews__foot { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--ink-mute); }
.reviews__foot a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Het G-tje rechtsboven, zoals in een echte reviewkaart */
.review__g { position: absolute; top: 20px; right: 22px; width: 17px; height: 17px; opacity: .85; }

.review__top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.review__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: #fff;
}
.review__avatar--blauw { background: var(--blue); }
.review__avatar--oranje { background: var(--orange-deep); }
.review__avatar--inkt { background: var(--blue-deep); }

.review__naam { font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.3; }
.review__meta { font-size: 12.5px; color: var(--ink-mute); }
.review__sterren { color: #FBBC04; font-size: 16px; letter-spacing: 1.5px; margin-bottom: 11px; }
.review__tekst { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }


/* ==========================================================================
   FAQ — native details/summary, werkt zonder JS
   ========================================================================== */
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; color: var(--blue-ink);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq summary::after {
  content: ''; flex: none; width: 24px; height: 24px; margin-top: 2px;
  border-radius: var(--r-xs); background-color: var(--blue-wash);
  background-image:
    linear-gradient(var(--orange), var(--orange)),
    linear-gradient(var(--orange), var(--orange));
  background-size: 11px 2px, 2px 11px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details > div { padding-bottom: 24px; max-width: 70ch; }
.faq details p { font-size: 16.5px; line-height: 1.65; }
.faq details p + p { margin-top: 12px; }

/* ==========================================================================
   CONTACT: KAART
   ========================================================================== */
.contact__map {
  position: relative; width: 100%; height: clamp(240px, 34vw, 400px);
  border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(20,30,50,.1);
}
.contact__map iframe { position: absolute; inset: 0; border: 0; }
.contact__map--klein { height: clamp(160px, 18vw, 220px); margin-top: 24px; }

/* ==========================================================================
   OFFERTE / CONTACT
   ========================================================================== */
.offerte { position: relative; overflow: hidden; }
.offerte::before {
  content: ''; position: absolute; right: -220px; top: -180px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(238, 117, 25, .16), transparent 68%);
  pointer-events: none;
}
.offerte__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 4.5vw, 64px); align-items: start;
}
.offerte__side { padding-top: clamp(24px, 3vw, 36px); }
.offerte__side h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); margin-bottom: 16px; }
.offerte__side > p { font-size: 17.5px; line-height: 1.62; color: rgba(255, 255, 255, .76); margin-bottom: 28px; }

.volgende { list-style: none; display: grid; gap: 18px; margin-bottom: 30px; }
.volgende li { display: flex; gap: 14px; align-items: flex-start; }
.volgende b {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .1); color: var(--orange);
  display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
}
.volgende span { font-size: 16px; color: rgba(255, 255, 255, .8); }
.volgende strong { color: #fff; font-weight: 600; }

.directe { display: flex; flex-wrap: wrap; gap: 12px; }
.directe--stack { flex-direction: column; align-items: stretch; margin-bottom: 22px; }
.directe--stack .btn { justify-content: flex-start; }

/* Formulier */
.form {
  position: relative;
  background: var(--chalk); border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-lift);
}
.form__title { font-size: 1.5rem; margin-bottom: 6px; }
.form__sub { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 24px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 14px; font-weight: 600; color: var(--blue-ink); margin-bottom: 7px; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); background: var(--chalk); outline: none;
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312305e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
  padding-right: 42px;
}
.form__note { font-size: 13.5px; color: var(--ink-mute); margin-top: 14px; text-align: center; }
.form__note a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__ok { display: none; text-align: center; padding: 26px 10px; }
.form.is-sent .form__body { display: none; }
.form.is-sent .form__ok { display: block; }
.form__ok svg { width: 46px; height: 46px; stroke: var(--orange); fill: none; stroke-width: 1.8; margin: 0 auto 16px; }
.form__ok h3 { font-size: 1.35rem; margin-bottom: 8px; }
.form__ok p { font-size: 16px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--blue-ink); color: rgba(255, 255, 255, .64); padding-top: 60px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr; gap: 34px; padding-bottom: 46px; }
.footer__gebied { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .45); }
.footer__wordmark { margin-bottom: 18px; }
.footer__wordmark .wordmark__name { font-size: 30px; }
.footer__wordmark .wordmark__icon { width: 34px; height: 34px; }
.footer__about { font-size: 15px; line-height: 1.6; max-width: 34ch; }
.footer h3 {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: 16px;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer li { font-size: 15px; line-height: 1.5; }
.footer a { font-size: 15px; }
.footer a:hover { color: #fff; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.footer__contact svg { width: 17px; height: 17px; stroke: var(--orange); fill: none; stroke-width: 2; flex: none; margin-top: 3px; }
.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 20px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255, 255, 255, .5);
}
.footer__bar nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* Zwevende WhatsApp-knop rechtsonder */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 4px 10px rgba(12, 34, 68, .18), 0 14px 34px -12px rgba(12, 34, 68, .5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float svg { width: 29px; height: 29px; }
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(12, 34, 68, .22), 0 20px 44px -14px rgba(12, 34, 68, .55); }
.wa-float:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ==========================================================================
   Responsive — secties
   ========================================================================== */
@media (max-width: 1050px) {
  .stappen { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .projecten__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 940px) {
  .over__grid, .offerte__grid { grid-template-columns: 1fr; }
  .reviews__head { grid-template-columns: 1fr; align-items: start; }
  .reviews__score { max-width: none; }
  .doelgroep__grid { grid-template-columns: 1fr; }
  .over__visual figure { max-height: 420px; max-width: 330px; }
  .offerte__grid { gap: 34px; }
}

@media (max-width: 640px) {
  .diensten__grid, .doelgroep__grid { grid-template-columns: 1fr; gap: 16px; }
  .review { flex-basis: 82vw; }
  .dienst__body { padding: 22px 22px 20px; }
  .dienst__beeld { height: 200px; }
  .stappen { grid-template-columns: 1fr; gap: 26px; }
  .projecten__grid { grid-template-columns: 1fr; gap: 14px; }
  .project { border-radius: 100px 100px var(--r-md) var(--r-md); }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__bar { flex-direction: column; gap: 12px; }
  .directe .btn { width: 100%; }
  .sec__head--split { flex-direction: column; align-items: flex-start; }
  .faq summary { font-size: 1.06rem; }

  /* Geen vaste actiebalk meer; de WhatsApp-knop staat weer op de gewone plek */
  .wa-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .wa-float svg { width: 27px; height: 27px; }
}

/* ==========================================================================
   DIENSTPAGINA'S
   ========================================================================== */
.kruimels { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 26px; display: flex; gap: 8px; }
.kruimels a { color: var(--blue-deep); border-bottom: 1px solid var(--orange-wash); }
.kruimels a:hover { border-bottom-color: var(--orange); }

.dienstpg__kop {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 4vw, 56px); align-items: center;
}
.dienstpg__kop .sec__intro { margin-bottom: 26px; }
.dienstpg__beeld {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
  box-shadow: var(--shadow-soft);
}
.dienstpg__beeld img { width: 100%; height: 100%; object-fit: cover; }

.anderdiensten { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.anderdiensten a {
  display: inline-flex; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 18px; font-size: 15.5px; font-weight: 500; color: var(--blue-deep);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.anderdiensten a:hover { border-color: var(--orange); color: var(--orange-deep); }

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

/* ==========================================================================
   TOESTEMMINGSBALK
   ========================================================================== */
.cookiebar {
  position: fixed; left: 22px; bottom: 22px; z-index: 120;
  max-width: 560px;
  background: var(--chalk);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: 20px 22px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cookiebar.is-open { opacity: 1; transform: translateY(0); }
.cookiebar__in { display: grid; gap: 16px; }
.cookiebar__titel {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--blue-ink); margin-bottom: 5px;
}
.cookiebar__tekst { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.cookiebar__tekst a { color: var(--blue-deep); font-weight: 600; border-bottom: 2px solid var(--orange-wash); }
.cookiebar__tekst a:hover { border-bottom-color: var(--orange); }
.cookiebar__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .cookiebar { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: none; padding: 18px; }
  .cookiebar__knoppen .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cookiebar { transition: none; } }

/* ==========================================================================
   TEKSTPAGINA (privacyverklaring)
   ========================================================================== */
.tekstpagina { max-width: 68ch; }
.tekstpagina h2 {
  font-size: 1.35rem; margin-top: 38px; margin-bottom: 12px; color: var(--blue-ink);
}
.tekstpagina p { margin-bottom: 14px; }
.tekstpagina ul { margin: 0 0 14px 0; padding-left: 20px; display: grid; gap: 10px; }
.tekstpagina li { line-height: 1.65; }
.tekstpagina a { color: var(--blue-deep); border-bottom: 2px solid var(--orange-wash); }
.tekstpagina a:hover { border-bottom-color: var(--orange); }
.tekstpagina code {
  font-size: .92em; background: var(--paper-warm); padding: 2px 6px; border-radius: var(--r-xs);
}

/* Nog niet aangeleverd, dus geen link */
.footer__nogniet { opacity: .45; cursor: default; }

/* ==========================================================================
   MERKENSLIDER
   --------------------------------------------------------------------------
   Vier identieke rijen naast elkaar. De animatie schuift het spoor een kwart op,
   dus precies één rij, en springt dan terug. Omdat alle rijen gelijk zijn is die
   sprong niet te zien. Vier in plaats van twee, zodat het spoor ook op een breed
   scherm langer is dan het venster plus die ene rij; anders valt er rechts een gat.
   ========================================================================== */
.merken { padding-block: clamp(38px, 4vw, 56px); }
.merken__venster {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.merken__kop {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
  text-align: center; margin-bottom: 26px;
}

.merken__spoor {
  display: flex; width: max-content;
  animation: merken-schuif 56s linear infinite;
}

.merken__rij {
  display: flex; align-items: center; list-style: none;
  gap: clamp(34px, 4.4vw, 58px);
  padding-inline: clamp(17px, 2.2vw, 29px);
}
.merk { flex: none; }
.merk img {
  height: 38px; width: auto; display: block;
  opacity: .74;
  filter: saturate(.9);
}

@keyframes merken-schuif {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (max-width: 640px) {
  .merk img { height: 30px; }
  .merken__spoor { animation-duration: 44s; }
}

/* Geen beweging: dan gewoon een stilstaande rij die netjes afbreekt */
@media (prefers-reduced-motion: reduce) {
  .merken__spoor { animation: none; width: 100%; }
  .merken__spoor .merken__rij[aria-hidden="true"] { display: none; }
  .merken__rij { flex-wrap: wrap; justify-content: center; gap: 28px 44px; }
  .merken__venster { -webkit-mask-image: none; mask-image: none; }
}

/* Inhoudsopgave en slot op een tekstpagina */
.tekstpagina__inhoud {
  background: var(--chalk); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 26px; margin: 26px 0 34px;
}
.tekstpagina__inhoudkop {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 12px;
}
.tekstpagina__inhoud ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.tekstpagina__inhoud li { font-size: 14.5px; line-height: 1.4; }
.tekstpagina__inhoud a { border-bottom: none; color: var(--ink-soft); }
.tekstpagina__inhoud a:hover { color: var(--blue-ink); border-bottom: 1px solid var(--orange); }
.tekstpagina h2 { scroll-margin-top: calc(var(--nav-h) + 16px); }
.tekstpagina__slot {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-soft);
}

/* Kennisblok op een dienstpagina: twee kolommen lopende tekst */
.kennis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 44px; }
.kennis__item h3 {
  font-size: 1.15rem; margin-bottom: 9px; color: var(--blue-ink);
}
.kennis__item p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }

/* Bredere FAQ op de dienstpagina's, waar er veel meer vragen staan */
.faq--breed { max-width: none; column-count: 2; column-gap: 46px; }
.faq--breed details { break-inside: avoid; }

@media (max-width: 940px) {
  .kennis { grid-template-columns: 1fr; gap: 24px; }
  .faq--breed { column-count: 1; }
}

/* ==========================================================================
   HERO OP EEN DIENSTPAGINA
   Zelfde opzet als op de homepage, maar zonder de volledige schermhoogte en met
   een liggend beeld, want de dienstfoto's zijn liggend in plaats van portret.
   ========================================================================== */
/* Zelfde hoogte en beeldformaat als de hero op de homepage; alleen het
   kruimelpad en een iets kleinere kop zijn hier anders. */
.hero--dienst .kruimels { margin-bottom: 4px; }
.hero--dienst .hero__title { font-size: clamp(2rem, 3.2vw, 2.85rem); }

/* Vier USP's in de balk in plaats van drie */
.trustbar__row--4 { grid-template-columns: repeat(4, 1fr); }

/* Projectenraster met twee kaarten. De binnenfoto's zijn liggend in plaats van
   staand, dus de kaarten krijgen daar een liggende verhouding en een lagere boog. */
.projecten__grid--2 { grid-template-columns: repeat(2, 1fr); }
.projecten__grid--2 .project { aspect-ratio: 3 / 2; border-radius: 54px 54px var(--r-md) var(--r-md); }

/* Variant met staande foto's (i.p.v. liggend): eigen boogverhouding. */
.projecten__grid--staand .project { aspect-ratio: 3 / 4; border-radius: 74px 74px var(--r-md) var(--r-md); }

@media (max-width: 940px) {
  .hero--dienst .hero__frame { aspect-ratio: 3 / 2; }
  .hero--dienst .hero__chips { display: none; }
  .trustbar__row--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .trustbar__row--4 { grid-template-columns: 1fr; }
  .projecten__grid--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blogkaart {
  background: var(--chalk); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.blogkaart:hover { border-color: #c9bda9; transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.blogkaart__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.blogkaart__beeld { margin: 0; height: 180px; overflow: hidden; background: var(--paper-warm); }
.blogkaart__beeld img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.blogkaart:hover .blogkaart__beeld img { transform: scale(1.04); }
.blogkaart__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.blogkaart__meta {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.blogkaart__titel { font-size: 1.2rem; margin-bottom: 9px; color: var(--blue-ink); }
.blogkaart:hover .blogkaart__titel { color: var(--blue); }
.blogkaart__tekst { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Artikelpagina ---------- */
.artikel__kop { max-width: 46em; }
.artikel__meta { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 14px; }
.artikel__beeld {
  margin: 26px 0 30px; border-radius: var(--r-md); overflow: hidden;
  max-width: 46em; aspect-ratio: 16 / 9; box-shadow: var(--shadow-soft);
}
.artikel__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.artikel__body { max-width: 46em; }
.artikel__body h2 {
  font-size: 1.5rem; margin-top: 42px; margin-bottom: 14px; color: var(--blue-ink);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.artikel__body > p { margin-bottom: 14px; line-height: 1.75; }
.artikel__body > p a { color: var(--blue-deep); border-bottom: 2px solid var(--orange-wash); }
.artikel__body > p a:hover { border-bottom-color: var(--orange); }
.artikel__lijst { list-style: none; display: grid; gap: 13px; margin: 4px 0 18px; }
.artikel__lijst li {
  position: relative; padding-left: 22px; line-height: 1.7; color: var(--ink-soft);
}
.artikel__lijst li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--orange-wash); border: 1.5px solid var(--orange);
}
.artikel__lijst strong { color: var(--blue-ink); }
.artikel__bron { font-size: 13px; color: var(--ink-mute); margin: -8px 0 18px; }

/* Tabellen: op smalle schermen horizontaal scrollbaar in plaats van geknepen */
.tabelwrap { overflow-x: auto; margin: 6px 0 20px; border-radius: var(--r-md); border: 1px solid var(--line); }
.tabel { width: 100%; border-collapse: collapse; background: var(--chalk); font-size: 14.5px; }
.tabel th, .tabel td { padding: 12px 16px; text-align: left; vertical-align: top; }
.tabel thead th {
  background: var(--blue-ink); color: #fff; font-weight: 600; font-size: 13.5px;
  letter-spacing: .01em; white-space: nowrap;
}
.tabel tbody tr + tr th, .tabel tbody tr + tr td { border-top: 1px solid var(--line); }
.tabel tbody th { font-weight: 600; color: var(--blue-ink); }
.tabel tbody td { color: var(--ink-soft); }
.tabel tbody tr:nth-child(even) { background: var(--paper); }

.artikel__cta {
  background: var(--blue-wash); border-radius: var(--r-md);
  padding: 24px 26px; margin: 30px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.artikel__cta p { font-size: 15.5px; color: var(--blue-ink); max-width: 40ch; margin: 0; }

.artikel__slot {
  margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line);
}
.artikel__slot h2 { margin-top: 0; }
.artikel__slot p { margin-bottom: 20px; line-height: 1.7; }

.artikel__verder {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
  margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line);
}
.artikel__verder h2 { margin-top: 0; font-size: 1.15rem; }
.artikel__verder .anderdiensten { flex-direction: column; align-items: flex-start; }

@media (max-width: 940px) {
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
  .artikel__verder { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .blog__grid { grid-template-columns: 1fr; }
  .artikel__body h2 { font-size: 1.3rem; margin-top: 34px; }
  .artikel__cta { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   ANDERE DIENSTEN, MET BEELD
   ========================================================================== */
.dienstlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.dienstlink {
  display: block; text-decoration: none; color: inherit;
  background: var(--chalk); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dienstlink:hover, .dienstlink:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.dienstlink__beeld { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-warm); }
.dienstlink__beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s var(--ease);
}
.dienstlink:hover .dienstlink__beeld img { transform: scale(1.045); }
.dienstlink__titel {
  display: block; padding: 14px 16px 16px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  line-height: 1.3; color: var(--blue-ink);
}
@media (max-width: 940px) { .dienstlinks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dienstlinks { grid-template-columns: 1fr; gap: 14px; } }