/* ==========================================================================
   Dakexpert Noord - Atelia
   Handgeschreven stylesheet. Geen framework, geen plugin-CSS.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --blue:      #1FB6FF;
  --blue-ink:  #0F5678;
  --blue-dk:   #0C9FE8;
  --blue-soft: #E8F7FF;
  --ink:       #043D50;
  --teal:      #2A6B7C;
  --dark:      #1A4F5E;
  --dark-2:    #0F3C46;
  --slate:     #5A6C7D;
  --body:      #4E606C;
  --muted:     #5F7180;   /* was #8A99A6: 2,92:1 op wit; nu 5,05 op wit en 4,6 op lichtblauw */
  --soft:      #F7F9FA;
  --line:      #E3E9EC;
  --white:     #FFFFFF;

  --ff: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm:  4px;    /* invoervelden */
  --r-btn: 6px;    /* knoppen en bedieningselementen */
  --r:     10px;   /* tegels en kaarten tot ongeveer 400px */
  --r-lg:  14px;   /* kaarten breder dan 400px */

  --shadow-sm: 0 1px 2px rgba(4,61,80,.06);
  --shadow:    0 1px 2px rgba(4,61,80,.05), 0 4px 12px rgba(4,61,80,.07);
  --shadow-lg: 0 2px 4px rgba(4,61,80,.05), 0 12px 32px rgba(4,61,80,.10);
  --shadow-btn:       0 1px 2px rgba(4,61,80,.10);
  --shadow-btn-hover: 0 2px 6px rgba(4,61,80,.14);
  --shadow-donker:    0 2px 4px rgba(0,0,0,.22), 0 18px 40px rgba(0,0,0,.30);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-uit:  cubic-bezier(.16,1,.3,1);   /* lang uitlopend, voor onthullen en panelen */
  /* vaste tijdsreeks. Alles wat beweegt gebruikt een van deze vijf. */
  --t-snel:    150ms;   /* kleurwissel, klein icoon */
  --t-basis:   280ms;   /* hover op knoppen, links en kaarten */
  --t-schakel: 420ms;   /* menu, accordeon, uitklappen */
  --t-intro:   700ms;   /* in beeld komen bij het scrollen */
  --t-beeld:   1000ms;  /* trage beweging van een foto */

  --wrap: 1280px;
  --pad:  clamp(60px, 6.6vw, 100px);
  /* vaste ruimtematen, zodat afstanden overal uit dezelfde reeks komen */
  --s-1: 8px;  --s-2: 12px; --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:target, #offerte, #contact, #overons { scroll-margin-top: 104px; }
body, h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
/* width en height staan als attribuut op elke foto; zonder dit rekt een foto uit */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px;
}

body {
  font-family: var(--ff);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(20px, 3.6vw, 52px); }
.sec  { padding-block: var(--pad); position: relative; }
.sec--soft { background: var(--soft); }
.sec--dark { background: linear-gradient(180deg, #1C5566 0%, var(--dark) 55%, #164554 100%);
  color: rgba(255,255,255,.86); }

/* ---------- typografie ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); line-height: 1.18; font-weight: 800;
  letter-spacing: -.018em; text-wrap: balance; }
/* voorkomt dat er een los woord op de laatste regel achterblijft */
p, li, figcaption { text-wrap: pretty; }

h1 {
  font-size: clamp(31px, 4.4vw, 49px);
  letter-spacing: -.028em;
  line-height: 1.10;
}
.h2 { font-size: clamp(25px, 2.7vw, 34px); line-height: 1.14; letter-spacing: -.024em; }
.h2--plain { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.16; letter-spacing: -.024em; }
.h4 { font-size: 21px; letter-spacing: -.018em; }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-ink); margin-bottom: 14px;
}
.on-dark .eyebrow, .hero .eyebrow, .band .eyebrow { color: var(--blue); }
.lead { font-size: 17px; line-height: 1.8; }
.accent { color: var(--blue-ink); }
.on-dark .accent, .hero-anim .accent, .band-in .accent { color: var(--blue); }
.form-card .accent { color: var(--blue-ink); }
.on-dark, .on-dark p, .on-dark li { color: rgba(255,255,255,.82); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

.sec-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 60px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: 16px; color: var(--body); max-width: 64ch; }
.sec-head--center p { margin-inline: auto; }
.over-copy p, .contact-copy p, .block-copy > p, .cta-card p, .why-item p, .step p,
.svc-body p, .foot-about { max-width: 64ch; }
.on-dark .sec-head p { color: rgba(255,255,255,.78); }

/* ---------- knoppen ---------- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: var(--ink);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px; min-height: 46px; border: 0; border-radius: var(--r-btn);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap; text-align: left;
  cursor: pointer;
  transition: transform var(--t-basis) var(--ease), box-shadow var(--t-basis) var(--ease), background var(--t-basis) var(--ease-soft);
  box-shadow: var(--shadow-btn);
}
.btn > span { position: relative; z-index: 1; }
.btn > svg { position: relative; z-index: 1; flex: none; width: 15px; height: 15px; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--t-schakel) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); color: #fff; }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


.btn .arw { transition: transform var(--t-schakel) var(--ease); }
.btn:hover .arw { transform: translateX(4px); }


/* ---------- witte knop, voor op een foto ---------- */
.btn--wit { background: #fff; color: var(--ink); box-shadow: var(--shadow-btn); }
.btn--wit::before { background: var(--blue); }
.btn--wit:hover { color: var(--ink); }

/* ---------- knop met rand, voor op licht ---------- */
.btn--rand { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px #C9D5DB; }
.btn--rand > svg { width: 16px; height: 16px; }
/* ---------- WhatsApp-knop: donkergroen, want wit op #25D366 haalt maar 1,98:1 ---------- */
.btn--wa { --btn-bg: #0B7A43; --btn-fg: #fff; }
.btn--wa::before { background: #075C32; }
.btn--wa > svg { width: 18px; height: 18px; }

/* ---------- hero-acties: alleen op telefoon en tablet ---------- */
.hero-acties { display: none; margin-top: 30px; gap: 12px; flex-wrap: wrap; }
.hero-acties .btn { flex: 1 1 auto; justify-content: center; min-height: 52px; }

/* ---------- vaste actiebalk onderin op de telefoon ---------- */
.mob-bar { display: none; }
@media (max-width: 1080px) {
  .mob-bar {
    position: fixed; inset: auto 0 0 0; z-index: 95;
    display: grid; grid-template-columns: 1fr 1.25fr;
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(4,61,80,.10);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .mob-bar a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px; border-radius: var(--r-btn);
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  }
  .mob-bar a:first-child { color: var(--ink); box-shadow: inset 0 0 0 1.5px #D3DDE2; }
  /* inkt op blauw (5,1:1); wit op dit blauw haalde maar 2,28:1 */
  .mob-bar .mob-off { background: var(--blue); color: var(--ink); }
  .mob-bar a span { font-size: 12px; }
  .mob-bar svg { width: 16px; height: 16px; flex: none; }
  body { padding-bottom: 84px; }
}

/* ---------- WhatsApp: knop met gesprekskaart ----------
   Het omhulsel reserveert ruimte, ook als de kaart dicht is. Daarom laat het
   omhulsel en de dichte kaart kliks door; alleen de knop en de open kaart
   vangen ze (RESPONSIEF-DESIGNSYSTEEM 51.10). */
.wa-wrap {
  position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: clamp(16px, 2.4vw, 30px); z-index: 94;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  pointer-events: none;
}
.wa-knop {
  pointer-events: auto;
  width: 60px; height: 60px; border-radius: 999px; flex: none;
  /* het echte WhatsApp-groen (Kim, 13-10-2026): herkenbaarheid boven contrast;
     het is een icoon, geen tekst. Knoppen MET tekst houden het donkere groen. */
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 14px 30px -10px rgba(37,211,102,.75);
  transition: transform var(--t-basis) var(--ease), box-shadow var(--t-basis) var(--ease);
}
.wa-knop svg { width: 30px; height: 30px; }
.wa-knop:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 20px 38px -10px rgba(37,211,102,.8); }
.wa-knop:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 999px; }

.wa-kaart {
  pointer-events: none;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--soft); color: var(--ink);
  border-radius: var(--r-lg); overflow: hidden;
  visibility: hidden; opacity: 0;
  transform: translateY(16px) scale(.96); transform-origin: 100% 100%;
  box-shadow: 0 1px 2px rgba(4,61,80,.08), 0 10px 24px rgba(4,61,80,.12), 0 34px 70px rgba(4,61,80,.28);
  transition: opacity 400ms var(--ease-uit), transform 520ms var(--ease-uit), visibility 400ms;
}
.wa-kaart.open { pointer-events: auto; visibility: visible; opacity: 1; transform: none; }

.wa-kop {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 12px 16px 18px;
  background: linear-gradient(135deg, var(--dark-2), var(--dark));
}
.wa-kop::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), rgba(31,182,255,0));
}
.wa-wie { display: flex; flex-direction: column; min-width: 0; }
.wa-wie b { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.wa-status { display: flex; align-items: center; gap: 7px; margin-top: 5px;
  font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.3; }
.wa-status i { width: 7px; height: 7px; border-radius: 50%; background: #25D366; flex: none;
  box-shadow: 0 0 0 3px rgba(37,211,102,.22); }
.wa-sluit {
  width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; flex: none;
  color: rgba(255,255,255,.7); display: grid; place-items: center;
  transition: background var(--t-basis) var(--ease-soft), color var(--t-basis);
}
.wa-sluit svg { width: 13px; height: 13px; }
.wa-sluit:hover { background: rgba(255,255,255,.12); color: #fff; }

/* eerst drie stippen, dan het bericht: zo leest het als een gesprek */
/* de stippen zijn een blok, geen regel tekst: anders blijft na het inklappen
   de regelhoogte van de kaart staan als leeg vlak boven het bericht */
.wa-body { padding: 18px 18px 2px; }
.wa-typ { display: flex; width: max-content; gap: 5px; align-items: center; padding: 13px 15px;
  background: #fff; border-radius: 4px 14px 14px 14px; box-shadow: var(--shadow-sm); }
.wa-typ b { width: 6px; height: 6px; border-radius: 50%; background: #9FB0BA; display: block; }
.wa-kaart.open .wa-typ { animation: wa-typ-weg 300ms var(--ease-uit) 1.3s both; }
.wa-kaart.open .wa-typ b { animation: wa-stip 1s ease-in-out infinite; }
.wa-kaart.open .wa-typ b:nth-child(2) { animation-delay: .15s; }
.wa-kaart.open .wa-typ b:nth-child(3) { animation-delay: .3s; }
.wa-bubbel { margin: 0; font-size: 14px; line-height: 1.55; color: var(--body);
  background: #fff; border-radius: 4px 14px 14px 14px; padding: 12px 15px; box-shadow: var(--shadow-sm); opacity: 0; }
.wa-kaart.open .wa-bubbel { animation: wa-in 420ms var(--ease-uit) 1.3s both; }
@keyframes wa-stip { 0%,60%,100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }
/* font-size en line-height mee naar 0, anders blijft er een regel hoogte staan */
@keyframes wa-typ-weg { to { opacity: 0; visibility: hidden; height: 0; padding: 0; margin: 0; overflow: hidden; font-size: 0; line-height: 0; } }
@keyframes wa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wa-keuzes { padding: 12px 18px 2px; display: grid; gap: 8px; }
.wa-keuzes a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 11px 14px; border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(4,61,80,.09); opacity: 0;
  transition: background var(--t-basis) var(--ease-soft), box-shadow var(--t-basis), transform var(--t-basis) var(--ease);
}
.wa-keuzes a svg { width: 15px; height: 15px; flex: none; color: var(--blue-ink); opacity: .55; transition: opacity var(--t-basis), transform var(--t-basis) var(--ease); }
.wa-keuzes a:hover { background: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(31,182,255,.45); transform: translateX(2px); }
.wa-keuzes a:hover svg { opacity: 1; transform: translateX(2px); }
.wa-kaart.open .wa-keuzes a { animation: wa-in 360ms var(--ease-uit) both; }
.wa-kaart.open .wa-keuzes a:nth-child(1) { animation-delay: 1.6s; }
.wa-kaart.open .wa-keuzes a:nth-child(2) { animation-delay: 1.69s; }
.wa-kaart.open .wa-keuzes a:nth-child(3) { animation-delay: 1.78s; }
.wa-kaart.open .wa-keuzes a:nth-child(4) { animation-delay: 1.87s; }
.wa-open {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; margin: 14px 18px 18px; border-radius: var(--r);
  background: #0B7A43; color: #fff; font-size: 14.5px; font-weight: 800; opacity: 0;
  transition: background var(--t-basis) var(--ease-soft);
}
.wa-open:hover { background: #075C32; }
.wa-open svg { width: 18px; height: 18px; }
.wa-kaart.open .wa-open { animation: wa-in 360ms var(--ease-uit) 1.96s both; }

/* op telefoon en tablet staat de knop net boven de vaste actiebalk */
@media (max-width: 1080px) {
  .wa-wrap { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); gap: 10px; }
  .wa-knop { width: 56px; height: 56px; }
  .wa-knop svg { width: 28px; height: 28px; }
}
@media (max-width: 640px) {
  .wa-kaart { width: min(328px, calc(100vw - 28px)); }
  .wa-body { padding: 15px 15px 2px; }
  .wa-keuzes { padding: 10px 15px 2px; gap: 7px; }
  .wa-keuzes a { min-height: 44px; font-size: 14px; }
  .wa-open { margin: 12px 15px 15px; min-height: 46px; }
}

.menu-open .mob-bar, .menu-open .wa-wrap { visibility: hidden; opacity: 0; transition: opacity 200ms, visibility 0s 200ms; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background var(--t-schakel) var(--ease-soft), box-shadow var(--t-schakel) var(--ease-soft), backdrop-filter var(--t-schakel);
}
.nav::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,32,42,.55), rgba(4,32,42,0));
  transition: opacity var(--t-schakel) var(--ease-soft);
}
.nav.is-stuck { background: rgba(255,255,255,.94); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--line), 0 8px 28px rgba(4,61,80,.07); }
.nav.is-stuck::after { opacity: 0; }
@media (max-width: 1080px) { .nav.is-hidden { transform: translateY(-100%); } }
.nav { transition: transform var(--t-schakel) var(--ease), background var(--t-schakel) var(--ease-soft), box-shadow var(--t-schakel) var(--ease-soft); }

.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: clamp(80px, 7.6vw, 106px);
  transition: height var(--t-schakel) var(--ease-soft);
}
.nav.is-stuck .nav-in { height: 78px; }

.nav-logo img { height: clamp(64px, 6.6vw, 96px); width: auto; transition: height var(--t-schakel) var(--ease-soft); }
.nav.is-stuck .nav-logo img { height: 64px; }

.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu > li { position: relative; }
.nav-menu a {
  display: block; padding: 10px 16px;
  font-size: 15px; font-weight: 500; color: #fff;
  position: relative;
  transition: color var(--t-basis) var(--ease-soft);
}
.nav.is-stuck .nav-menu a { color: var(--ink); }
.nav-menu a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-basis) var(--ease);
}
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
.nav-menu a[aria-current="page"] { color: var(--blue); }

.has-sub > a::before {
  content: ''; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-basis) var(--ease);
}
.has-sub > a { padding-right: 22px; }
.has-sub:hover > a::before, .has-sub:focus-within > a::before { transform: translateY(-20%) rotate(225deg); }
.nav-menu .sub a::after { display: none; }

/* ---------- diensten-paneel op desktop ----------
   Breed paneel met per dienst een fotootje en wat je er vindt, en rechts een
   donkere tegel met wie we zijn en het nummer. De regels staan bewust onder
   .nav-menu .sub, zodat de witte menukleur op de foto er niet doorheen komt. */
@media (min-width: 1081px) {
  .sub {
    position: absolute; top: 100%; left: 50%; z-index: 5;
    width: 660px; display: grid; grid-template-columns: 1fr 214px; gap: 8px;
    padding: 10px; background: #fff; border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(4,61,80,.06), 0 14px 30px rgba(4,61,80,.12), 0 42px 84px rgba(4,61,80,.16);
    opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(.985); transform-origin: 50% 0;
    transition: opacity 260ms var(--ease-uit), transform 460ms var(--ease-uit), visibility 0s 260ms;
  }
  /* onzichtbare brug, zodat het paneel niet dichtvalt op weg van het woord naar het paneel */
  .sub::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .has-sub:hover .sub, .has-sub:focus-within .sub {
    opacity: 1; visibility: visible; transform: translate(-50%, 4px);
    transition: opacity 260ms var(--ease-uit), transform 460ms var(--ease-uit), visibility 0s;
  }
  .sub-lijst { display: grid; gap: 2px; align-content: start; }
  .sub-lijst li { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-uit), transform 460ms var(--ease-uit); }
  .has-sub:hover .sub-lijst li, .has-sub:focus-within .sub-lijst li { opacity: 1; transform: none; }
  .has-sub:hover .sub-lijst li:nth-child(2), .has-sub:focus-within .sub-lijst li:nth-child(2) { transition-delay: 35ms; }
  .has-sub:hover .sub-lijst li:nth-child(3), .has-sub:focus-within .sub-lijst li:nth-child(3) { transition-delay: 70ms; }
  .has-sub:hover .sub-lijst li:nth-child(4), .has-sub:focus-within .sub-lijst li:nth-child(4) { transition-delay: 105ms; }
  .has-sub:hover .sub-lijst li:nth-child(5), .has-sub:focus-within .sub-lijst li:nth-child(5) { transition-delay: 140ms; }
  .nav-menu .sub .sub-lijst a {
    display: grid; grid-template-columns: 52px 1fr 16px; align-items: center; gap: 15px;
    padding: 9px 14px 9px 9px; border-radius: var(--r);
    color: var(--ink); font-weight: 500;
    transition: background var(--t-basis) var(--ease-soft);
  }
  .nav-menu .sub .sub-lijst a:hover, .nav-menu .sub .sub-lijst a:focus-visible { background: var(--soft); }
  .sub-tekst b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
  .sub-tekst small { display: block; margin-top: 3px; font-size: 13px; color: var(--slate); line-height: 1.4; }
  .sub-lijst a[aria-current="page"] .sub-tekst b { color: var(--blue-ink); }
  .sub-lijst .arw { width: 16px; height: 16px; color: var(--blue-ink); opacity: 0; transform: translateX(-6px);
    transition: opacity var(--t-basis) var(--ease-soft), transform var(--t-basis) var(--ease); }
  .sub-lijst a:hover .arw, .sub-lijst a:focus-visible .arw { opacity: 1; transform: none; }
  .sub-lijst a:hover .sub-foto img { transform: scale(1.08); }

  .sub-tegel {
    display: flex; flex-direction: column; gap: 10px;
    padding: 22px 20px 20px; border-radius: var(--r);
    background: linear-gradient(160deg, var(--dark) 0%, var(--dark-2) 100%);
    color: rgba(255,255,255,.8);
  }
  .sub-tegel-kop { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
  .sub-tegel p:not(.sub-tegel-kop) { font-size: 13.5px; line-height: 1.6; }
  .nav-menu .sub .sub-tel {
    margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 12px 14px; border-radius: var(--r-btn);
    background: var(--blue); color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: .01em;
    transition: background var(--t-basis) var(--ease-soft);
  }
  .nav-menu .sub .sub-tel:hover { background: #fff; color: var(--ink); }
  .sub-tel svg { width: 16px; height: 16px; flex: none; }
  .sub-tegel .sub-adres { display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
  .sub-adres svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--blue); }
  .nav-menu .sub .sub-over { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 13.5px; font-weight: 700; color: #fff; }
  .nav-menu .sub .sub-over svg { width: 14px; height: 14px; transition: transform var(--t-basis) var(--ease); }
  .nav-menu .sub .sub-over:hover { color: var(--blue); }
  .nav-menu .sub .sub-over:hover svg { transform: translateX(3px); }
  .menu-voet { display: none; }
}

/* fotootje in het menu: een zachte kleurvlak tot de foto er is */
.sub-foto { display: block; width: 52px; height: 52px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, #DCEEF6, #C4DCE6); }
.sub-foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity var(--t-schakel) var(--ease-soft), transform var(--t-beeld) var(--ease); }
.sub-foto img.is-geladen { opacity: 1; }

/* ---------- menuknop ---------- */
.nav-burger {
  display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--t-basis) var(--ease-soft), box-shadow var(--t-basis) var(--ease-soft);
}
.nb-lijnen { position: relative; display: block; width: 22px; height: 14px; }
.nb-lijnen i {
  position: absolute; right: 0; height: 2px; border-radius: 2px; background: #fff;
  transition: transform 460ms var(--ease-uit), top 300ms var(--ease-uit), width 300ms var(--ease-uit), opacity 200ms, background var(--t-basis);
}
.nb-lijnen i:nth-child(1) { top: 0; width: 22px; }
.nb-lijnen i:nth-child(2) { top: 6px; width: 15px; }
.nb-lijnen i:nth-child(3) { top: 12px; width: 22px; }
.nav-burger:hover .nb-lijnen i:nth-child(2) { width: 22px; }
.nav.is-stuck .nav-burger { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.nav.is-stuck .nb-lijnen i { background: var(--ink); }
.nav.is-open .nav-burger { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.nav.is-open .nb-lijnen i { background: #fff; }
.nav.is-open .nb-lijnen i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav.is-open .nb-lijnen i:nth-child(2) { width: 0; opacity: 0; }
.nav.is-open .nb-lijnen i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #fff; color: var(--ink); padding: 12px 20px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.nav-tel {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 11px 20px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34);
  transition: background var(--t-basis) var(--ease-soft), color var(--t-basis), box-shadow var(--t-basis);
}
.nav-tel svg { width: 16px; height: 16px; }
.nav-tel:hover { background: var(--blue); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.nav.is-stuck .nav-tel { color: var(--ink); box-shadow: inset 0 0 0 1.5px #CFDAE0; }
.nav.is-stuck .nav-tel:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  transform-origin: 50% 60%;
  will-change: transform;
  /* Zoom die je ziet (Kim, 11-10-2026). Eerst komt de foto in 2,4 s van 116
     naar 104 procent binnen, daarna ademt hij langzaam tussen 104 en 115
     heen en weer. Alleen transform: dat doet de grafische kaart, het raakt de
     laadtijd en de meting van het grootste beeld (LCP) niet. */
  animation: hero-in 2400ms var(--ease-uit) both, hero-adem 18s ease-in-out 2400ms infinite alternate;
}
@keyframes hero-in   { from { transform: scale(1.16); } to { transform: scale(1.04); } }
@keyframes hero-adem { from { transform: scale(1.04); } to { transform: scale(1.15); } }
.hero.is-uit-beeld .hero-bg img { animation-play-state: paused; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(103deg, rgba(4,45,60,.86) 0%, rgba(4,45,60,.62) 42%, rgba(4,45,60,.30) 68%, rgba(4,45,60,.42) 100%),
    linear-gradient(180deg, rgba(4,32,42,.30) 0%, rgba(4,32,42,0) 30%);
}
.hero-in { position: relative; z-index: 1; }

/* home hero */
.hero--home .hero-in {
  display: grid; grid-template-columns: 1fr minmax(0, 396px); gap: clamp(36px, 4.6vw, 68px); align-items: start;
  min-height: 740px; padding-block: clamp(150px, 13vw, 190px) clamp(64px, 7vw, 96px);
}
.hero--home h1 { color: #fff; max-width: 700px; }
.hero--home .hero-sub { margin-top: 22px; max-width: 52ch; color: rgba(255,255,255,.88); }
.hero-pills { margin-top: 30px; display: grid; gap: 13px; }
.hero-pills li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.92); font-size: 15.5px; }
.hero-pills svg { flex: none; width: 19px; height: 19px; margin-top: 4px; color: var(--blue); }

/* service hero */
.hero--page .hero-in {
  display: grid; grid-template-columns: 1.35fr auto; gap: clamp(32px, 4vw, 60px); align-items: end;
  min-height: 570px; padding-block: clamp(150px, 15vw, 205px) clamp(60px, 6.5vw, 92px);
}
.hero--page h1 { color: #fff; }
.hero--page .hero-sub { margin-top: 18px; max-width: 62ch; color: rgba(255,255,255,.86); font-size: 16.5px; }
.hero-call { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.hero-call .eyebrow { margin-bottom: 0; color: #fff; opacity: .82; }
/* alleen het telefoonnummer is groot; de knop eronder blijft een gewone knop */
.hero-call .tel {
  display: inline-flex; align-items: center; gap: 13px; min-height: 48px;
  font-size: clamp(23px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em;
  color: var(--blue); line-height: 1;
  transition: color var(--t-basis) var(--ease-soft);
}
.hero-call .tel:hover { color: #fff; }
.hero-call .tel svg { width: 25px; height: 25px; flex: none; }
.hero-call .tel:hover svg { animation: ring var(--t-intro) var(--ease); }
.hero-call .btn { align-self: flex-end; }
@keyframes ring {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }  80% { transform: rotate(6deg); }
}

/* ---------- formulier ---------- */
.form-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: var(--r-lg); padding: 28px 28px 26px;
  box-shadow: var(--shadow-lg);
  color: var(--body);
}
.form-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--blue);
}
.form-card .form-kop { font-size: 21px; letter-spacing: -.022em; line-height: 1.22; margin-bottom: 14px; }
.form-card .form-kop .accent { display: block; }

.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.field .req { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px;
  background: #fff; color: var(--ink);
  border: 1.5px solid #8C9599; border-radius: var(--r-sm);
  font-size: 15px;
  transition: border-color var(--t-basis) var(--ease-soft), box-shadow var(--t-basis) var(--ease-soft), background var(--t-basis);
}
.field textarea { min-height: 62px; resize: vertical; }
.field select {
  appearance: none; cursor: pointer; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23043D50' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
  padding-right: 42px;
}
.field select:invalid { color: #5A6C7D; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C7D3D9; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--blue-ink); box-shadow: 0 0 0 3px rgba(31,182,255,.16);
}
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: #DC2626; }
.field .err { display: none; font-size: 14px; color: #DC2626; margin-top: 5px; }

/* ---------- keuzelijst (app.js legt hem over de gewone dropdown) ---------- */
.keuze { position: relative; }
.keuze-native { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.keuze-knop {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px 9px 12px; text-align: left; cursor: pointer;
  background: #fff; color: var(--ink); font-size: 15px; font-weight: 600;
  border: 1.5px solid #8C9599; border-radius: var(--r-sm);
  transition: border-color var(--t-basis) var(--ease-soft), box-shadow var(--t-basis) var(--ease-soft);
}
.keuze-knop:hover { border-color: var(--blue-ink); }
.keuze-knop:focus-visible, .keuze.is-open .keuze-knop {
  outline: 0; border-color: var(--blue-ink); box-shadow: 0 0 0 3px rgba(31,182,255,.18);
}
.keuze-waarde { display: flex; align-items: center; gap: 11px; min-width: 0; }
.keuze-waarde.is-leeg { color: var(--slate); font-weight: 500; padding-left: 2px; }
.keuze-pijl { width: 12px; height: 8px; flex: none; color: var(--ink); transition: transform var(--t-schakel) var(--ease-uit); }
.keuze.is-open .keuze-pijl { transform: rotate(180deg); }
.keuze-ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-ink);
  transition: background var(--t-basis) var(--ease-soft), color var(--t-basis);
}
.keuze-ic svg { width: 17px; height: 17px; }
.keuze-lijst {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 6px; list-style: none; max-height: 316px; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(4,61,80,.06), 0 12px 28px rgba(4,61,80,.14), 0 30px 60px rgba(4,61,80,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: 50% 0;
  transition: opacity 180ms var(--ease-uit), transform 280ms var(--ease-uit), visibility 0s 180ms;
}
.keuze.is-open .keuze-lijst { opacity: 1; visibility: visible; transform: none;
  transition: opacity 180ms var(--ease-uit), transform 280ms var(--ease-uit), visibility 0s; }
.keuze-lijst:focus { outline: 0; }
.keuze-lijst [role=option] {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 10px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: background var(--t-snel) var(--ease-soft);
}
.keuze-lijst [role=option].is-actief { background: var(--soft); }
.keuze-lijst [role=option].is-actief .keuze-ic { background: var(--blue); color: var(--ink); }
.keuze-lijst [aria-selected=true] { font-weight: 700; }
.keuze-tekst { flex: 1; }
.keuze-vink { width: 16px; height: 16px; flex: none; color: var(--blue-ink); opacity: 0; transform: scale(.6);
  transition: opacity var(--t-basis), transform var(--t-basis) var(--ease); }
.keuze-lijst [aria-selected=true] .keuze-vink { opacity: 1; transform: none; }
.field.is-error .keuze-knop { border-color: #DC2626; }
/* de formulierkaart knipt anders het zwevende paneel af */
.form-card:has(.keuze.is-open) { overflow: visible; }
.field.is-error .err { display: block; }

.form-note { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.form-msg {
  display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.6;
}
.form-msg.is-ok   { display: block; background: var(--blue-soft); color: var(--ink); border: 1px solid rgba(31,182,255,.4); }
.form-msg.is-fail { display: block; background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }
.btn.is-busy { pointer-events: none; opacity: .72; }
.lokveld { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }


/* ---------- bewijs bij het formulier ---------- */
.form-score {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin: -4px 0 16px; padding: 6px 13px 6px 10px;
  border-radius: var(--r-sm); background: var(--soft);
  font-size: 14px; color: var(--body);
  transition: background var(--t-basis) var(--ease-soft);
}
.form-score { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
.form-score:hover { background: var(--blue-soft); }
.form-score svg { width: 18px; height: 18px; flex: none; }
.form-score b { color: var(--ink); font-size: 15px; font-weight: 800; }
.form-score .sterren { display: inline-flex; gap: 2px; }
.form-score .aantal { color: var(--muted); }
.form-score .sterren svg { width: 14px; height: 14px; }

.form-note { margin-top: 11px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ---------- contactblok onderaan een dienstpagina ---------- */
.dienst-contact {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5.4vw, 84px); align-items: start;
}
.dienst-contact .contact-list { margin-top: 30px; }
.dienst-contact > div:first-child > p { max-width: 52ch; margin-top: 4px; }

/* ---------- offerteknop in de dienst-hero ---------- */
.hero-offerte { margin-top: 0; }

/* ---------- waarom ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.why-item { position: relative; padding-top: 8px; }
.why-num {
  font-size: 33px; font-weight: 700; color: var(--blue); line-height: 1;
  margin-bottom: 18px; display: block;
}
.why-item h3 { color: #fff; margin-bottom: 12px; }
.why-item p { color: rgba(255,255,255,.78); font-size: 15.5px; }
.why-item::before {
  content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-intro) var(--ease) var(--t-basis);
}
.reveal.is-in .why-item::before { transform: scaleX(1); }

/* ---------- over ons ---------- */
.over-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(34px, 3.6vw, 54px); align-items: center; }

.over-copy h2 { margin-bottom: 20px; }
.over-copy h2 .accent { display: block; }
.over-copy p + p { margin-top: 16px; }
.over-copy strong { color: var(--ink); font-weight: 600; }
.over-copy .btn { margin-top: 30px; }
.over-merk { font-size: 15px; color: var(--slate); padding-left: 14px; box-shadow: inset 2px 0 0 var(--blue); }
.over-merk a { color: var(--blue-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* de twee foto's schuiven iets over elkaar; scheelt breedte zonder ze kleiner te maken */
.over-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.over-photos figure:last-child {
  position: relative; z-index: 1;
  margin-left: -20%; margin-top: 46px;
  border: 6px solid #fff; box-shadow: var(--shadow);
}
.over-photos figure { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.over-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform var(--t-beeld) var(--ease); }
/* geen versprong meer: voor en na moeten naast elkaar te vergelijken zijn */
.over-photos figure { border: 1px solid rgba(4,61,80,.10); }
.over-photos figure:hover img { transform: scale(1.05); }

/* ---------- diensten ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 32px); }
.svc {
  position: relative;
  background: #fff; border-radius: var(--r); overflow: hidden;
  border: 1px solid rgba(4,61,80,.08);
  box-shadow: 0 1px 2px rgba(4,61,80,.06);
  display: flex; flex-direction: column;
  transition: transform var(--t-schakel) var(--ease), box-shadow var(--t-schakel) var(--ease), border-color var(--t-schakel) var(--ease);
}
.svc::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-intro) var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(4,61,80,.14); }
.svc:hover::after { transform: scaleX(1); }
.svc-img { overflow: hidden; aspect-ratio: 4/3; position: relative; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-beeld) var(--ease); }
.svc:hover .svc-img img { transform: scale(1.07); }
.svc-body { padding: 30px 28px 34px; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { margin-bottom: 12px; }
.svc-body p { font-size: 15px; flex: 1; }
.svc-body .btn { margin-top: 22px; align-self: flex-start; padding: 12px 24px; font-size: 12px; }

/* ---------- statistiek band ---------- */
.stats { position: relative; overflow: hidden; padding-block: clamp(48px, 5vw, 74px);
  background: linear-gradient(180deg, #17505F 0%, #123F4C 100%); }

.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; }
.stats-grid > div { padding-inline: 22px; border-right: 1px solid rgba(255,255,255,.16); }
.stats-grid > div:last-child { border-right: 0; }
.stat-num { font-size: clamp(32px, 3.4vw, 40px); font-weight: 800; color: var(--blue);
  line-height: 1.15; letter-spacing: -.02em; }
.stat-lab { font-size: 14.5px; color: rgba(255,255,255,.80); margin-top: 6px; }

/* ---------- band met foto ---------- */
.band { position: relative; overflow: hidden; }
.band-bg { position: absolute; inset: 0; }
.band-bg img { width: 100%; height: 100%; object-fit: cover; }
.band-bg::after { content: ''; position: absolute; inset: 0; background: rgba(4,61,80,.88); }
.band-in { position: relative; z-index: 1; }

.band--cta .band-bg::after {
  background: linear-gradient(180deg, rgba(4,61,80,.72) 0%, rgba(4,61,80,.54) 100%);
}
.cta-card {
  position: relative; z-index: 1;
  max-width: 800px; margin-inline: auto; text-align: center;
  background: #fff; border-radius: var(--r-lg);
  padding: clamp(44px, 4.4vw, 62px) clamp(32px, 5vw, 72px);
  box-shadow: var(--shadow-donker);
}
.cta-card .eyebrow { color: var(--blue-ink); }
.cta-card h2 { margin-bottom: 16px; }
.cta-card p { margin-inline: auto; max-width: 52ch; }
.cta-score {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line);
  font-size: 14.5px; color: var(--body);
  transition: background var(--t-basis) var(--ease-soft), border-color var(--t-basis);
}
.cta-score:hover { background: var(--blue-soft); border-color: rgba(31,182,255,.4); }
.cta-score svg { width: 19px; height: 19px; flex: none; }
.cta-score b { color: var(--ink); font-size: 17px; font-weight: 800; }
.cta-score .sterren { display: inline-flex; gap: 2px; }
.cta-score .sterren svg { width: 15px; height: 15px; }
.cta-score .aantal { color: var(--muted); }
.cta-card .btn { margin-top: 20px; }
@media (max-width: 560px) {
  .cta-score { flex-wrap: wrap; justify-content: center; border-radius: var(--r); }
}

/* reviews */
.reviews-head { text-align: center; }

.reviews-head h2 { color: #fff; text-transform: none; font-size: clamp(24px, 2.6vw, 32px); }
.reviews-score {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: 14.5px;
  transition: background var(--t-basis) var(--ease-soft), border-color var(--t-basis);
}
.reviews-score:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.reviews-score svg { width: 19px; height: 19px; flex: none; }
.reviews-score b { font-size: 17px; font-weight: 800; }
.reviews-score .sterren { display: inline-flex; gap: 2px; }
.reviews-score .sterren svg { width: 15px; height: 15px; }

.reviews-slot { margin-top: 34px; }
.reviews-slot .ti-widget { margin: 0 !important; }

/* reviewkaarten (Google-stijl) */
.rv { position: relative; }
.rv-track {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 24px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rv-item { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; display: flex; }
.rv-inner {
  background: #fff; border-radius: var(--r); padding: 26px 26px 28px;
  box-shadow: var(--shadow); width: 100%;
  display: flex; flex-direction: column;
  transition: transform var(--t-schakel) var(--ease), box-shadow var(--t-schakel) var(--ease);
}
.rv-item:hover .rv-inner { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rv-top { display: flex; align-items: center; gap: 12px; }
.rv-g { flex: none; width: 22px; height: 22px; }
.rv-g svg { width: 100%; height: 100%; }
.rv-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.rv-stars { display: flex; gap: 3px; margin: 12px 0 12px; }
.rv-stars svg { width: 17px; height: 17px; }
.rv-inner p {
  font-size: 14.5px; line-height: 1.7; color: var(--body); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* op 320 paste de rij bolletjes plus pijlen niet: de pagina werd 339 breed.
   Daar vegen bezoekers toch; de bolletjes blijven. */
@media (max-width: 400px) { .rv-nav .rv-arrows { display: none; } .rv-nav { justify-content: center; } }
.rv-dots { display: flex; gap: 8px; }
/* klein bolletje, maar een aanraakvlak van 44px hoog */
.rv-dots button {
  box-sizing: content-box;
  width: 8px; height: 8px; padding: 18px 9px; border: 0; border-radius: 999px; cursor: pointer;
  background-color: rgba(255,255,255,.45);
  background-clip: content-box;
  transition: width var(--t-schakel) var(--ease), background-color var(--t-schakel) var(--ease-soft);
}
.rv-dots button[aria-current="true"] { width: 24px; background-color: #fff; }
.rv-dots { align-items: center; gap: 2px; }
.rv-arrows { display: flex; gap: 10px; }
.rv-arrows button {
  width: 48px; height: 48px; border-radius: var(--r-btn); cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  display: grid; place-items: center;
  transition: background var(--t-basis) var(--ease-soft), color var(--t-basis), border-color var(--t-basis), transform var(--t-basis) var(--ease);
}
.rv-arrows button:hover { background: #fff; border-color: #fff; color: var(--ink); transform: translateY(-2px); }
.rv-arrows button:disabled { opacity: .35; pointer-events: none; }
.rv-arrows svg { width: 17px; height: 17px; }

/* ---------- projecten: schuifband ----------
   Een echte scrollcontainer die app.js vooruit duwt, zoals bij Heidebrink
   (memory feedback_carrousel_doorloopt_en_sleepbaar). Loopt altijd door, en
   je kunt hem met je vinger, de muis, het wiel of de pijltjes verschuiven;
   een seconde later loopt hij verder vanaf waar jij hem liet. Een CSS-animatie
   met transform liet zich op de telefoon niet met de vinger bewegen. */
.pc { position: relative; margin-top: 8px; }
/* de band loopt breder dan de tekstkolom, tot vlak bij de schermrand */
@media (min-width: 1100px) {
  .pc-mask { width: calc(100vw - clamp(24px, 5vw, 88px)); margin-left: calc(50% - 50vw + clamp(12px, 2.5vw, 44px)); }
}
.pc-mask {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  cursor: grab; padding-block: 6px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.pc-mask::-webkit-scrollbar { display: none; }
.pc-mask.is-sleept { cursor: grabbing; }
.pc-mask:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.pc-mask img { -webkit-user-drag: none; user-select: none; }
.pc-track { display: flex; gap: 26px; width: max-content; }
.pc-item {
  position: relative; flex: 0 0 clamp(320px, 32vw, 540px);
  aspect-ratio: 4/3.2; min-height: 400px;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
  isolation: isolate;
  transition: transform var(--t-schakel) var(--ease), box-shadow var(--t-schakel) var(--ease);
}
.pc-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pc-item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-beeld) var(--ease);
}
.pc-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,45,60,0) 30%, rgba(4,45,60,.55) 62%, rgba(4,45,60,.95) 100%);
}
.pc-item:hover img { transform: scale(1.05); }
.pc-cap { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 30px 28px; color: #fff; }
.pc-cap h3 { color: #fff; font-size: 20px; letter-spacing: -.02em; line-height: 1.22; }
.pc-cap h3 .accent { display: block; color: #fff; }
.pc-cap p {
  color: rgba(255,255,255,.88); font-size: 14.5px; line-height: 1.6; margin-top: 10px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-schakel) var(--ease), opacity var(--t-schakel) var(--ease), margin-top var(--t-schakel) var(--ease);
}
.pc-item:hover .pc-cap p { max-height: 170px; opacity: 1; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 5.6vw, 88px); align-items: start; }
.contact-copy h2 { margin-bottom: 18px; }
.contact-copy h2 span { display: block; }
.contact-list { margin-top: 34px; display: grid; gap: 4px; }
.contact-list a {
  display: flex; align-items: center; gap: 14px; padding: 15px 0;
  font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink); border-bottom: 1px solid var(--line);
  transition: color var(--t-basis) var(--ease-soft), padding-left var(--t-basis) var(--ease);
}
.contact-list a:hover { color: var(--blue); padding-left: 8px; }
.contact-list .ico {
  flex: none; width: 22px; height: 22px; color: var(--blue-ink);
  display: grid; place-items: center;
  transition: color var(--t-basis) var(--ease-soft), transform var(--t-basis) var(--ease);
}
.contact-list a:hover .ico { color: var(--blue); transform: translateX(1px); }
.contact-list .wa-regel .ico { color: #128C7E; }
.contact-list .wa-regel:hover { color: #128C7E; }
.contact-list .wa-regel:hover .ico { color: #25D366; }
.contact-list svg { width: 19px; height: 19px; }

/* ---------- footer ---------- */
.foot { background: var(--dark); color: rgba(255,255,255,.76);
  padding-block: clamp(56px, 6vw, 88px) 0; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(36px, 4.4vw, 68px); }
.foot-logo img { height: 112px; width: auto; }
.foot-about { margin-top: 24px; font-size: 15px; max-width: 42ch; }
.foot h2 {
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 10px;
}
.foot-menu a {
  display: block; padding: 10px 0; font-size: 15px; color: rgba(255,255,255,.78);
  transition: color var(--t-basis) var(--ease-soft), padding-left var(--t-basis) var(--ease);
}
.foot-menu a:hover { color: var(--blue); padding-left: 7px; }
.foot-score {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 14px;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  color: #fff; font-size: 13.5px;
  transition: background var(--t-basis) var(--ease-soft), border-color var(--t-basis);
}
.foot-score:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.36); }
.foot-score svg { width: 17px; height: 17px; flex: none; }
.foot-score b { font-size: 15px; font-weight: 800; }
.foot-score .sterren { display: inline-flex; gap: 2px; }
.foot-score .sterren svg { width: 13px; height: 13px; }
.foot-score span:last-child { color: rgba(255,255,255,.62); }

.foot-info { font-size: 15px; line-height: 1.8; }
.foot-info strong { color: #fff; font-weight: 700; }
.foot-info a { display: inline-block; padding: 11px 0; }
.foot-info a { transition: color var(--t-basis) var(--ease-soft); }
.foot-info a:hover { color: var(--blue); }
.foot-about a, .foot-info a[href^="https://www.atelia"] {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.42); text-decoration-thickness: 1px;
}
.foot-about a:hover, .foot-info a[href^="https://www.atelia"]:hover { color: var(--blue); text-decoration-color: var(--blue); }
.foot-bar {
  /* geen lijn erboven (Kim, 11-10-2026): een iets donkerder vlak scheidt het */
  margin-top: clamp(44px, 5vw, 72px); padding-block: 22px;
  background: rgba(0,0,0,.12); box-shadow: 0 0 0 100vmax rgba(0,0,0,.12); clip-path: inset(0 -100vmax);
  font-size: 13.5px; color: rgba(255,255,255,.62);
}
.foot-bar a { display: inline-block; padding: 11px 0; color: rgba(255,255,255,.82); transition: color var(--t-basis); }
.foot-bar a:hover { color: var(--blue); }

/* ==========================================================================
   DIENSTPAGINA'S
   ========================================================================== */

/* werkwijze */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.step {
  background: #fff; border-radius: var(--r); padding: 34px 28px 36px;
  border-top: 3px solid var(--blue);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-schakel) var(--ease), box-shadow var(--t-schakel) var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step-num { font-size: 30px; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 20px; }
/* de kaart is wit, dus de .on-dark-regel van de sectie mag hier niet gelden */
.step h3 { font-size: 17px; text-transform: none; margin-bottom: 12px; color: var(--ink); }
.step p { font-size: 14.5px; color: var(--body); }

/* oplossingsblokken */
.blocks { display: grid; gap: clamp(56px, 6.4vw, 92px); }
.block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5.4vw, 84px); align-items: center; }
.block:nth-child(even) .block-media { order: 2; }
.block h2 { font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -.022em; margin-bottom: 16px; }
.block > div > p { font-size: 15.5px; }

/* rustig kader: foto ligt op de pagina, zoals de dienstkaarten op de homepage */
.frame { position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid rgba(4,61,80,.10); box-shadow: 0 1px 2px rgba(4,61,80,.06); }
.frame img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform var(--t-beeld) var(--ease);
}
.frame:hover img { transform: scale(1.035); }

/* accordions */
.acc { margin-top: 24px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 0; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
  transition: color var(--t-basis) var(--ease-soft);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--blue); }
.acc summary .chev {
  flex: none; width: 16px; height: 16px; color: var(--blue-ink);
  display: grid; place-items: center;
  transition: transform var(--t-schakel) var(--ease), color var(--t-basis);
}
.acc summary .chev svg { width: 10px; height: 10px; }
.acc details[open] summary .chev { transform: rotate(90deg); color: var(--blue); }
.acc-body { overflow: hidden; }
.acc-body ul { padding: 2px 0 18px 2px; display: grid; gap: 10px; }
.acc-body li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.65; }
.acc-body li::before {
  content: ''; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px;
  border-radius: 999px; background: var(--blue);
}

/* stappenreeks 1..5 */
.flow {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto;
  gap: 22px;
}
.flow-item {
  position: relative; border-radius: var(--r); overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-sm);
}
.flow-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-beeld) var(--ease); }
.flow-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,45,60,0) 28%, rgba(4,45,60,.55) 60%, rgba(4,45,60,.95) 100%);
}
.flow-item:hover img { transform: scale(1.06); }
.flow-cap { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 22px 22px 24px; color: #fff; }
.flow-cap .n {
  font-size: 26px; font-weight: 700; color: #fff; line-height: 1;
  display: block; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.flow-cap p { color: rgba(255,255,255,.92); font-size: 13.5px; line-height: 1.55; }
.flow-cap strong { color: #fff; font-weight: 700; }
.flow-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.flow-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.flow-item:nth-child(3) { grid-column: 1; grid-row: 2; }
.flow-item:nth-child(4) { grid-column: 2; grid-row: 2; }
.flow-item:nth-child(5) { grid-column: 3 / span 2; grid-row: 1 / span 2; }
.flow-item:nth-child(-n+4) { aspect-ratio: 4/3; }

/* zinkwerk galerij */
.masonry { columns: 3; column-gap: 24px; }
.masonry figure {
  margin: 0 0 24px; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm); break-inside: avoid;
  transition: transform var(--t-schakel) var(--ease), box-shadow var(--t-schakel) var(--ease);
}
.masonry figure:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.masonry img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-beeld) var(--ease); }
.masonry figure:hover img { transform: scale(1.05); }


/* ---------- 404 ---------- */
.niet-gevonden { padding-top: clamp(150px, 16vw, 210px); background: var(--soft); }
.niet-gevonden h1 { max-width: 18ch; }
.niet-gevonden .lead { margin-top: 18px; max-width: 56ch; }
.ng-links { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-width: 760px; }
.ng-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  padding: 12px 16px; border-radius: var(--r); background: #fff; color: var(--ink); font-weight: 700;
  box-shadow: var(--shadow-sm); transition: transform var(--t-basis) var(--ease), box-shadow var(--t-basis); }
.ng-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ng-links svg { width: 16px; height: 16px; color: var(--blue-ink); }
.ng-acties { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   SCROLL-ANIMATIES
   ========================================================================== */
/* Zonder JavaScript blijft alles gewoon zichtbaar: alleen onder .js wordt
   iets verborgen, en app.js maakt het zichtbaar zodra het in beeld komt.
   Tekst komt omhoog uit een lichte waas, foto's schuiven open als een gordijn
   en zakken daarbij terug naar hun maat. Alles op dezelfde lange uitloop. */
.js .reveal { opacity: 0; transform: translateY(30px); filter: blur(6px); }
.reveal.is-in { opacity: 1; transform: none; filter: none;
  transition: opacity 800ms var(--ease-uit), transform 1000ms var(--ease-uit), filter 800ms var(--ease-uit); }
.reveal-1.is-in { transition-delay: 90ms; }
.reveal-2.is-in { transition-delay: 180ms; }
.reveal-3.is-in { transition-delay: 270ms; }
.reveal-4.is-in { transition-delay: 360ms; }
.reveal-5.is-in { transition-delay: 450ms; }
.reveal-6.is-in { transition-delay: 540ms; }

.js .reveal-r { opacity: 0; transform: translateX(40px); }
.reveal-r.is-in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-uit), transform 1100ms var(--ease-uit); }
.js .reveal-l { opacity: 0; transform: translateX(-40px); }
.reveal-l.is-in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-uit), transform 1100ms var(--ease-uit); }

.js .reveal-zoom { opacity: 0; transform: scale(.94); }
.reveal-zoom.is-in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-uit), transform 1100ms var(--ease-uit); }

/* Foto's: gordijn van onder naar boven, foto zakt van 115 naar 100 procent.
   Het gordijn zit op de foto, NIET op de omlijsting die wordt waargenomen:
   Chrome rekent de eigen clip-path van een element mee, en een dichtgeknipte
   omlijsting telt dan als nul procent in beeld en gaat nooit open. De
   omlijsting heeft al overflow:hidden en ronde hoeken, dus dat klopt vanzelf. */
.js .beeld:not(.is-in) img { clip-path: inset(100% 0 0 0); transform: scale(1.15); }
.beeld.is-in:not(.is-klaar) img {
  transition: clip-path 1100ms var(--ease-uit), transform 1600ms var(--ease-uit); }

/* het blauwe streepje boven de waarom-punten groeit mee */
.why-item::before { transition: transform 900ms var(--ease-uit) 300ms; }

/* fotobanden achter reviews en oproepen schuiven trager mee dan de pagina.
   Alleen waar de browser scroll-gestuurde animatie zelf doet: geen script,
   geen werk op de hoofdlijn. */
@supports (animation-timeline: view()) {
  .band-bg img {
    height: 124%; top: -12%; position: relative;
    animation: band-diepte linear both;
    animation-timeline: view(); animation-range: cover 0% cover 100%;
  }
  @keyframes band-diepte { from { transform: translateY(-7%); } to { transform: translateY(7%); } }
}

/* hero intro */
.hero-anim > * { opacity: 0; transform: translateY(22px); animation: heroUp var(--t-beeld) var(--ease) forwards; }
.hero-anim > *:nth-child(1) { animation-delay: 120ms; }
.hero-anim > *:nth-child(2) { animation-delay: 220ms; }
.hero-anim > *:nth-child(3) { animation-delay: 320ms; }
.hero-anim > *:nth-child(4) { animation-delay: 420ms; }
.hero-anim > *:nth-child(5) { animation-delay: 520ms; }
@keyframes heroUp { to { opacity: 1; transform: none; } }
.hero-card-anim { opacity: 0; transform: translateY(30px); animation: heroUp var(--t-beeld) var(--ease) 300ms forwards; }

/* ==========================================================================
   RESPONSIEF
   ========================================================================== */
@media (max-width: 1080px) {
  /* Telefoon en tablet: RESPONSIEF-DESIGNSYSTEEM 51.16 en 51.18. Kort en
     alleen verticaal, 12 pixels in 0,45 seconde, een trapje van hooguit 35 ms
     en na drie stappen afgetopt. Van opzij binnenschuiven stak 28 tot 40
     pixels buiten het scherm; de telefoon maakte de pagina dan breder en
     zoomde uit, zodat alles rechts tegen de rand kwam. */
  .js .reveal, .js .reveal-r, .js .reveal-l { transform: translateY(12px); filter: none; }
  .reveal.is-in, .reveal-r.is-in, .reveal-l.is-in {
    transition: opacity 450ms var(--ease-uit), transform 450ms var(--ease-uit); }
  .js .reveal-zoom { transform: scale(.97); }
  .reveal-zoom.is-in { transition: opacity 450ms var(--ease-uit), transform 450ms var(--ease-uit); }
  .reveal-1.is-in { transition-delay: 35ms; }
  .reveal-2.is-in { transition-delay: 70ms; }
  .reveal-3.is-in, .reveal-4.is-in, .reveal-5.is-in, .reveal-6.is-in { transition-delay: 105ms; }
  .beeld.is-in:not(.is-klaar) img { transition: clip-path 450ms var(--ease-uit), transform 600ms var(--ease-uit); }
  /* 51.18: wat bij het openen in beeld staat, staat er gewoon. De foto
     erachter mag langzaam bewegen, de tekst bouwt zich niet op. */
  .hero-anim > *, .hero-card-anim { opacity: 1; transform: none; animation: none; }
}
/* in het eerste scherm bij het laden: meteen op de eindstand (app.js) */
.direct, .direct img { transition: none !important; }
@media (max-width: 1080px) {
  :root { --pad: 68px; }
  .hero--home .hero-in { grid-template-columns: 1fr; gap: 44px; min-height: 0; padding-block: 150px 72px; }
  .hero--home .hero-card-anim { display: none; }
  .hero-acties { display: flex; }
  .over-grid, .contact-grid { gap: 48px; }
  .why-grid { gap: 34px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-item { flex: 0 0 clamp(280px, 44vw, 380px); min-height: 360px; }
  .rv-item { flex: 0 0 calc((100% - 24px) / 2); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .foot-logo { grid-column: 1 / -1; }
  .masonry { columns: 2; }
}

@media (max-width: 1080px) {
  .nav-burger { display: flex; order: 9; position: relative; z-index: 2; }
  .nav-tel { display: none; }
  .nav-in { justify-content: flex-start; }
  .nav-logo { margin-right: auto; position: relative; z-index: 2; }

  /* Schermvullend menu. De kop eromheen mag dan geen backdrop-filter of
     transform hebben: die maken van de kop het kader waarin een fixed
     element zich meet, en dan wordt het menu maar 78 pixels hoog. */
  .nav.is-open { background: transparent; box-shadow: none; transform: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.is-open::after { opacity: 0; }
  #hoofdmenu {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column;
    padding: 112px clamp(20px, 5vw, 44px) calc(28px + env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(31,182,255,.16) 0%, rgba(31,182,255,0) 55%),
      linear-gradient(180deg, var(--dark-2) 0%, #0A2E36 100%);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path 520ms var(--ease-uit), visibility 0s 520ms;
  }
  .nav.is-open #hoofdmenu { visibility: visible; clip-path: inset(0 0 0 0);
    transition: clip-path 640ms var(--ease-uit), visibility 0s; }

  .nav-menu { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-menu > li, .menu-voet { opacity: 0; transform: translateY(16px);
    transition: opacity 300ms var(--ease-uit), transform 600ms var(--ease-uit); }
  .nav.is-open .nav-menu > li, .nav.is-open .menu-voet { opacity: 1; transform: none; }
  .nav.is-open .nav-menu > li:nth-child(1) { transition-delay: 140ms; }
  .nav.is-open .nav-menu > li:nth-child(2) { transition-delay: 190ms; }
  .nav.is-open .nav-menu > li:nth-child(3) { transition-delay: 240ms; }
  .nav.is-open .nav-menu > li:nth-child(4) { transition-delay: 290ms; }
  .nav.is-open .menu-voet { transition-delay: 360ms; }

  .nav-menu > li > a, .nav.is-stuck .nav-menu > li > a {
    display: flex; align-items: center; padding: 12px 0;
    color: #fff; font-size: 27px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2;
  }
  .nav-menu > li > a[aria-current="page"] { color: var(--blue); }
  .nav-menu a::after { display: none; }
  .has-sub > a::before { right: 8px; width: 10px; height: 10px; border-width: 2px; }
  .has-sub:hover > a::before, .has-sub:focus-within > a::before { transform: translateY(-70%) rotate(45deg); }
  .has-sub.is-open > a::before { transform: translateY(-20%) rotate(225deg); }

  .sub { display: block; max-height: 0; overflow: hidden; transition: max-height 560ms var(--ease-uit); }
  .has-sub.is-open .sub { max-height: 520px; }
  .sub-lijst { display: grid; gap: 6px; padding: 4px 0 16px; }
  .nav-menu .sub .sub-lijst a {
    display: grid; grid-template-columns: 48px 1fr 16px; align-items: center; gap: 14px;
    min-height: 64px; padding: 8px 14px 8px 8px; border-radius: var(--r);
    background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    color: #fff; font-size: 15px;
    transition: background var(--t-basis) var(--ease-soft);
  }
  .nav-menu .sub .sub-lijst a:active { background: rgba(255,255,255,.12); }
  .sub-foto { width: 48px; height: 48px; background: rgba(255,255,255,.08); }
  .sub-tekst b { display: block; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.25; }
  .sub-tekst small { display: block; margin-top: 2px; font-size: 13.5px; color: rgba(255,255,255,.66); line-height: 1.4; }
  .sub-lijst a[aria-current="page"] .sub-tekst b { color: var(--blue); }
  .sub-lijst .arw { width: 15px; height: 15px; color: var(--blue); }
  .sub-tegel { display: none; }

  .menu-voet { margin-top: auto; padding-top: 32px; }
  .menu-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .menu-knoppen .btn { justify-content: center; min-height: 54px; padding: 14px 12px; font-size: 13px; }
  .menu-knoppen .btn > svg { width: 17px; height: 17px; }
  .menu-merk { margin-top: 20px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.66); }
  .menu-merk a { color: #fff; text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,.4); }

  .hero--page .hero-in { grid-template-columns: 1fr; gap: 26px; align-items: start; padding-block: 140px 56px; min-height: 0; }
  .hero-call { align-items: flex-start; gap: 14px; }
  .hero-call .btn { align-self: flex-start; }
  /* minmax(0, 1fr): een kind dat niet kan afbreken mag de kolom niet breder duwen dan het scherm */
  .dienst-contact { grid-template-columns: minmax(0, 1fr); }
  .hero-offerte { display: none; }
  .over-grid, .contact-grid, .block { grid-template-columns: minmax(0, 1fr); }
  .block { gap: 34px; }
  .block:nth-child(even) .block-media { order: 0; }
  .blocks { gap: 64px; }
  .why-grid { grid-template-columns: 1fr; gap: 34px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-item:nth-child(5) { grid-column: 1 / span 2; grid-row: auto; aspect-ratio: 16/10; }
  .cta-card { padding: 44px 30px; }
}

@media (max-width: 900px) {
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(4,45,60,.74) 0%, rgba(4,45,60,.62) 45%, rgba(4,45,60,.80) 100%);
  }
  .hero--home .hero-sub, .hero-pills li { color: #fff; }
}

@media (max-width: 640px) {
  :root { --pad: 56px; }
  body { font-size: 17px; }
  .rv-inner p, .svc-body p, .why-item p, .step p { font-size: 16px; }
  .field label { font-size: 15px; }
  h1 { line-height: 1.16; }
  .svc-body .btn, .form-card button { min-height: 50px; }
  .rv-arrows button, .stats-grid > div { border-right: 0; }
  .stats-grid > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.16); }
  .wrap { padding-inline: 20px; }
  body { font-size: 15.5px; }
  .hero--home .hero-in { padding-block: 124px 56px; }
  /* logo op de telefoon een slag groter (Kim, 11-10-2026) */
  .nav-in { height: 86px; }
  .nav.is-stuck .nav-in { height: 74px; }
  .nav-logo img { height: 66px; }
  .nav.is-stuck .nav-logo img { height: 56px; }
  #hoofdmenu { padding-top: 104px; }
  .form-card { padding: 30px 22px; }
  .svc-grid { grid-template-columns: 1fr; }
  .over-photos { gap: 12px; }
  .over-photos figure:last-child { margin-left: 0; margin-top: 0; border: 0; }
  .pc-mask { -webkit-mask-image: none; mask-image: none; }
  .pc-track { gap: 16px; }
  .pc-item { flex: 0 0 78vw; min-height: 340px; }
  .rv-item { flex: 0 0 86%; }
  .pc-cap p { max-height: 160px; opacity: 1; }
  .steps { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
  .foot-logo { grid-column: auto; }
  .form-card .btn { white-space: normal; }
  .foot-bar > span { display: block; }
  .foot-bar .scheid { display: none; }
}

/* ---------- toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal, .reveal-r, .reveal-l, .reveal-zoom, .hero-anim > *, .hero-card-anim, .beeld img {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .beeld img { clip-path: none !important; }
  .hero-bg img, .band-bg img { animation: none !important; transform: none !important; }
  .nav-menu > li, .menu-voet, .sub-lijst li { opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav, .btn, .wa-wrap, .mob-bar { display: none; }
}