/* =====================================================================
   Keeman Dak & Zink — Stylesheet V2 (mei 2026)
   Design systeem volgens WEBSITE_VOLLEDIG_SPEC_V2.md
   Lettertype: Oxanium (light 300 body + semibold 600 koppen) — lokaal, AVG-conform
   Kleuren: rood #E30513, antraciet #52676E (uit huisstijlhandboek MarComeleon april 2026)
   ===================================================================== */

:root {
  --rood:        #E30513;
  --rood-donker: #B8040F;
  --antraciet:   #52676E;
  --antraciet2:  #7A8C92;
  /* Donkergrijs percentages (uit huisstijlhandboek) */
  --grijs-70:    #7E8E94;
  --grijs-50:    #A9B3B7;
  --grijs-30:    #CBD1D4;
  --grijs-15:    #E5E8EA;
  --donker:      #1A1A1A;
  --donker2:     #2A2A2A;
  --donker3:     #232323;
  --wit:         #FFFFFF;
  --lichtgrijs:  #F4F4F4;
  --crème:       #FAFAF8;
  --rand:        #E0E0E0;
  --tekst:       #1A1A1A;
  --tekst-zacht: #4A4A4A;
  --tekst-meta:  #7A7A7A;

  --maxw: 1240px;
  --pad-x: clamp(20px, 4vw, 48px);
  --nav-h: 100px;

  --schaduw-sm: 0 2px 6px rgba(0,0,0,.06);
  --schaduw-md: 0 8px 24px rgba(0,0,0,.08);
  --schaduw-lg: 0 16px 40px rgba(0,0,0,.12);

  --clip-knop: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  --clip-knop-rev: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Oxanium', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
strong, b { font-weight: 600; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--rood); text-decoration: none; }
a:hover { color: var(--rood-donker); }
button { font: inherit; cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---- Typografie ---- */
h1,h2,h3,h4 {
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  color: var(--tekst);
}
h1 { font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }

.lead { font-size: 1.15rem; color: var(--tekst-zacht); max-width: 64ch; }
.label, .section-label, .hero-eyebrow {
  display: inline-block;
  font-family: 'Oxanium', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rood);
  position: relative;
  padding-left: 54px;
  margin-bottom: 16px;
}
.label::before, .section-label::before, .hero-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 40px; height: 3px;
  background: var(--rood);
  transform: translateY(-50%);
}
.section-title {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  margin-bottom: .4em;
}
.section-intro {
  color: var(--tekst-zacht);
  max-width: 70ch;
  margin-bottom: 2.4rem;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

section { padding: 80px 0; }
.section-white   { background: var(--wit); }
.section-cream   { background: var(--lichtgrijs); }
.section-dark    { background: var(--donker); color: var(--wit); }
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--wit); }
.section-dark p  { color: rgba(255,255,255,.78); }
.section-dark .section-intro { color: rgba(255,255,255,.72); }
.section-dark .label,
.section-dark .section-label { color: var(--wit); }
.section-dark .label::before,
.section-dark .section-label::before { background: var(--rood); }

/* ---- Knoppen (clip-path schuine rechterhoek) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: 'Oxanium', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  clip-path: var(--clip-knop);
  padding-right: 36px;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--rood); color: #fff; }
.btn-primary:hover { background: var(--rood-donker); color: #fff; }
.btn-dark { background: var(--donker); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
  clip-path: none;
  padding-right: 28px;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn-light {
  background: #fff; color: var(--donker);
}
.btn-light:hover { background: var(--lichtgrijs); color: var(--donker); }

/* ---- Driehoekjes patroon (huisstijl) ---- */
/* Inline SVG: rechthoekige driehoeken wijzend naar rechtsboven, in wisselende grijstinten */
.tri-pattern {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 220px;
  pointer-events: none;
  background-repeat: repeat-y;
  background-position: right top;
  background-size: 180px 380px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='380' viewBox='0 0 180 380'><defs><g id='t'><polygon points='0,30 30,30 30,0' fill='currentColor'/></g></defs><g><use href='%23t' x='130' y='10'  style='color:%237E8E94;opacity:.55'/><use href='%23t' x='100' y='20'  style='color:%23CBD1D4;opacity:.45'/><use href='%23t' x='140' y='50'  style='color:%2352676E;opacity:.85'/><use href='%23t' x='110' y='60'  style='color:%23E5E8EA;opacity:.5'/><use href='%23t' x='80'  y='90'  style='color:%237E8E94;opacity:.4'/><use href='%23t' x='130' y='100' style='color:%2352676E;opacity:.7'/><use href='%23t' x='100' y='130' style='color:%23CBD1D4;opacity:.55'/><use href='%23t' x='150' y='130' style='color:%237E8E94;opacity:.55'/><use href='%23t' x='120' y='160' style='color:%2352676E;opacity:.75'/><use href='%23t' x='90'  y='170' style='color:%23E5E8EA;opacity:.5'/><use href='%23t' x='140' y='200' style='color:%237E8E94;opacity:.6'/><use href='%23t' x='110' y='220' style='color:%2352676E;opacity:.5'/><use href='%23t' x='130' y='250' style='color:%23CBD1D4;opacity:.55'/><use href='%23t' x='100' y='270' style='color:%237E8E94;opacity:.65'/><use href='%23t' x='150' y='280' style='color:%2352676E;opacity:.8'/><use href='%23t' x='120' y='310' style='color:%23E5E8EA;opacity:.5'/><use href='%23t' x='90'  y='320' style='color:%237E8E94;opacity:.5'/><use href='%23t' x='140' y='340' style='color:%2352676E;opacity:.7'/></g></svg>");
}
.tri-pattern.right { right: 0; }
.tri-pattern.on-red {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='380' viewBox='0 0 180 380'><defs><g id='t'><polygon points='0,30 30,30 30,0' fill='currentColor'/></g></defs><g><use href='%23t' x='130' y='10'  style='color:%231A1A1A;opacity:.18'/><use href='%23t' x='100' y='20'  style='color:%23000000;opacity:.10'/><use href='%23t' x='140' y='50'  style='color:%231A1A1A;opacity:.22'/><use href='%23t' x='110' y='60'  style='color:%23FFFFFF;opacity:.10'/><use href='%23t' x='80'  y='90'  style='color:%231A1A1A;opacity:.14'/><use href='%23t' x='130' y='100' style='color:%23000000;opacity:.20'/><use href='%23t' x='100' y='130' style='color:%23FFFFFF;opacity:.10'/><use href='%23t' x='150' y='130' style='color:%231A1A1A;opacity:.18'/><use href='%23t' x='120' y='160' style='color:%23000000;opacity:.22'/><use href='%23t' x='90'  y='170' style='color:%23FFFFFF;opacity:.10'/><use href='%23t' x='140' y='200' style='color:%231A1A1A;opacity:.18'/><use href='%23t' x='110' y='220' style='color:%23000000;opacity:.16'/><use href='%23t' x='130' y='250' style='color:%23FFFFFF;opacity:.10'/><use href='%23t' x='100' y='270' style='color:%231A1A1A;opacity:.20'/><use href='%23t' x='150' y='280' style='color:%23000000;opacity:.22'/><use href='%23t' x='120' y='310' style='color:%23FFFFFF;opacity:.10'/><use href='%23t' x='90'  y='320' style='color:%231A1A1A;opacity:.14'/><use href='%23t' x='140' y='340' style='color:%23000000;opacity:.20'/></g></svg>");
}

/* ---- Navigatie ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.nav-inner {
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.logo-img {
  height: 70px;
  width: auto;
  flex: 0 0 auto;
  image-rendering: -webkit-optimize-contrast;
}
.logo-slogan {
  display: block;
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  font-size: .68rem;
  line-height: 1.25;
  letter-spacing: .08em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-slogan br { display: block; content: ''; margin: 1px 0; }
.logo-mark {
  display: inline-flex;
  align-items: center;
  background: var(--rood);
  color: #fff;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 10px 16px 10px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.nav-links {
  display: flex; align-items: center; gap: 28px;
}
.nav-links > a,
.nav-links .dropdown-trigger {
  display: inline-block;
  position: relative;
  color: var(--antraciet);
  font-weight: 500;
  font-size: .95rem;
  padding: 6px 2px;
  cursor: pointer;
}
.nav-links > a:hover,
.nav-links .dropdown-trigger:hover { color: var(--rood); }
.nav-links > a.active::after,
.has-dropdown.open .dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 3px; background: var(--rood);
}
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 360px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  background: #fff;
  padding: 14px;
  border-top: 3px solid var(--rood);
  box-shadow: var(--schaduw-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 12px;
  color: var(--antraciet);
  font-size: .92rem;
  border-left: 2px solid transparent;
}
.dropdown a:hover { background: var(--lichtgrijs); color: var(--rood); border-left-color: var(--rood); }
.nav-cta {
  background: var(--rood);
  color: #fff;
  padding: 12px 28px 12px 22px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  clip-path: var(--clip-knop);
  transition: background .15s;
}
.nav-cta:hover { background: var(--rood-donker); color: #fff; }
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--antraciet);
  padding: 8px;
}
.nav-toggle svg { width: 28px; height: 28px; }

/* ---- Hero logo (alleen homepage) ---- */
.hero-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 140px;
  max-width: 100%;
  margin-bottom: 32px;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 768px) {
  .hero-logo { max-height: 90px; margin-bottom: 22px; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  background: var(--donker);
  color: #fff;
  overflow: hidden;
  padding: clamp(60px, 9vw, 120px) 0;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -80px;
  width: 460px; height: 140px;
  background: var(--rood);
  transform: rotate(-8deg);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
  opacity: .85;
  pointer-events: none;
}
.hero .tri-pattern { right: 0; top: 0; bottom: 0; width: 240px; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-large h1,
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  margin-bottom: 24px;
}
.hero h1 .accent { color: var(--rood); display: block; }
.hero p { color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: 56ch; }
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 32px;
}
.hero-meta {
  background: var(--donker2);
  border-left: 3px solid var(--rood);
  padding: 28px 28px 24px;
}
.hero-meta-item {
  display: flex; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  font-size: .95rem;
}
.hero-meta-item:last-child { border-bottom: 0; }
.hero-meta-item strong {
  display: block;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82rem;
  margin-bottom: 2px;
}
.hero-meta-item .dot {
  flex: 0 0 8px; width: 8px; height: 8px;
  background: var(--rood);
  margin-top: 6px;
}

/* breadcrumb */
.breadcrumb {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb .sep { margin: 0 8px; color: var(--rood); }

/* ---- Beloftes balk (rode strip onder hero) ---- */
.beloftes-grid, .belofte-balk {
  background: var(--rood);
  color: #fff;
  padding: 28px 0;
}
.beloftes-grid .container,
.belofte-balk .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: center;
}
.belofte {
  display: flex; align-items: center; gap: 14px;
  color: #fff;
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .02em;
}
.belofte-icon {
  flex: 0 0 24px; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.belofte-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; }

/* ---- Diensten grid ---- */
.diensten-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.dienst {
  background: #fff;
  border: 1px solid var(--rand);
  padding: 28px 24px 24px;
  padding-right: 60px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none;
  color: var(--tekst);
  position: relative;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  border-bottom: 3px solid transparent;
}
.dienst::before {
  content: '';
  position: absolute;
  top: 0;
  right: 22px;
  width: 26px;
  height: 32px;
  background: var(--rood);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.dienst:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-md);
  border-bottom-color: var(--rood);
  color: var(--tekst);
}
.dienst-num {
  font-family: 'Oxanium', sans-serif;
  font-size: 2rem; font-weight: 700;
  color: var(--rood);
  line-height: 1;
}
.dienst h3 {
  font-size: 1.18rem; margin: 6px 0 4px;
}
.dienst p {
  color: var(--tekst-zacht);
  font-size: .94rem;
  margin: 0;
}
.dienst .arrow {
  margin-top: auto;
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  color: var(--rood);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82rem;
  padding-top: 14px;
}

.dienst-link {
  color: var(--rood);
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ---- Doelgroepen ---- */
.doelgroepen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 28px;
}
.doelgroep {
  padding: 32px 28px;
  background: var(--donker2);
  border-left: 3px solid transparent;
  transition: border-color .15s, background .15s;
}
.doelgroep:hover,
.doelgroep.active {
  background: var(--donker3);
  border-left-color: var(--rood);
}
.doelgroep h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.doelgroep p { color: rgba(255,255,255,.72); font-size: .92rem; margin: 0; }

/* ---- Werkgebied (steden + kaart) ---- */
.steden-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}
.steden-list .stad {
  padding: 10px 0 10px 18px;
  position: relative;
  border-bottom: 1px solid var(--rand);
  font-weight: 500;
}
.steden-list .stad::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 8px; height: 8px;
  background: var(--rood);
}

/* ---- Gerelateerde diensten ---- */
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.related-item {
  background: #fff;
  border: 1px solid var(--rand);
  padding: 22px;
  text-decoration: none;
  color: var(--tekst);
  border-left: 3px solid var(--rood);
  transition: transform .15s, box-shadow .15s;
}
.related-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--schaduw-md);
  color: var(--tekst);
}
.related-item h3 { font-size: 1.05rem; margin-bottom: 4px; }
.related-item p { color: var(--tekst-zacht); font-size: .9rem; margin: 0; }

/* ---- Projecten preview / grid ---- */
.projecten-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.projecten-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.project-kaart {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--lichtgrijs);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--rand);
}
.project-kaart img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.project-kaart:hover img { transform: scale(1.04); }
.project-kaart .overlay {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(26,26,26,.92), rgba(26,26,26,0));
  padding: 22px 18px 16px;
  color: #fff;
}
.project-kaart .overlay h4 {
  color: #fff; margin: 0 0 2px;
  font-size: 1.05rem;
}
.project-kaart .overlay span {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rood);
  font-family: 'Oxanium', sans-serif;
}
.project-placeholder {
  display: grid; place-items: center;
  color: var(--tekst-meta);
  font-family: 'Oxanium', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  background: repeating-linear-gradient(45deg, var(--lichtgrijs) 0 14px, #ECECEC 14px 28px);
}

/* Filter balk */
.filter-balk {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}
.filter-knop {
  background: transparent;
  border: 1px solid var(--rand);
  padding: 8px 18px;
  font-family: 'Oxanium', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: all .15s;
}
.filter-knop:hover { border-color: var(--donker); color: var(--donker); }
.filter-knop.actief {
  background: var(--rood);
  border-color: var(--rood);
  color: #fff;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.92);
  display: none;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 22px; right: 28px;
  background: transparent; border: 0; color: #fff;
  font-size: 2rem; line-height: 1;
}
.lightbox-caption {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  color: #fff; font-family: 'Oxanium', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---- CTA blok ---- */
.cta-blok {
  position: relative;
  background: var(--rood);
  color: #fff;
  padding: 80px 0;
  overflow: hidden;
}
.cta-blok .tri-pattern.on-red {
  width: 280px; opacity: .9;
}
.cta-blok .container { position: relative; z-index: 2; max-width: 760px; }
.cta-blok h2 {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.cta-blok p {
  color: rgba(255,255,255,.92);
  font-size: 1.1rem;
}
.cta-blok .knoppen {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 24px;
}
.cta-blok .btn-light { color: var(--rood); }
.cta-blok .btn-light:hover { color: var(--rood-donker); }

/* Spoed (daklekkage) balk — let op: alleen secties, niet de mobile-bar */
section.bar-wa, section.bar-cta, .belofte-balk + .bar-wa, .bar-wa.spoed, .bar-cta.spoed {
  background: var(--rood);
  color: #fff;
  padding: 16px 0;
}
section.bar-wa, section.bar-cta {
  background: var(--rood);
  color: #fff;
  padding: 16px 0;
}
section.bar-wa .container,
section.bar-cta .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
section.bar-wa strong, section.bar-cta strong {
  font-family: 'Oxanium', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .04em;
}
section.bar-wa a, section.bar-cta a {
  color: #fff; font-weight: 600;
  font-family: 'Oxanium', sans-serif;
  font-size: 1.3rem;
}

/* ---- Mobiele sticky CTA-bar (alleen op smalle schermen) ---- */
#mobile-bar {
  display: none;
}
@media (max-width: 768px) {
  #mobile-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 2px solid var(--rood);
    box-shadow: 0 -8px 24px rgba(0,0,0,.06);
    z-index: 80;
    height: 60px;
  }
  #mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--antraciet);
    font-family: 'Oxanium', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-right: 1px solid var(--rand);
    transition: background .15s;
  }
  #mobile-bar a:last-child { border-right: 0; }
  #mobile-bar a:hover,
  #mobile-bar a:active { background: var(--lichtgrijs); }
  #mobile-bar a svg {
    width: 20px;
    height: 20px;
  }
  #mobile-bar .mb-call svg { stroke: var(--rood); color: var(--rood); }
  #mobile-bar .mb-wa   svg { fill: #25D366; color: #25D366; }
  #mobile-bar .mb-cta  svg { stroke: var(--antraciet); color: var(--antraciet); }
  /* Ruimte onderaan body voor de bar */
  body { padding-bottom: 60px; }
  footer { padding-bottom: 60px; }
  #cookie-melding { bottom: 60px; }
}

/* ---- Contact pagina ---- */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
.contactform {
  display: flex; flex-direction: column; gap: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contactform label {
  display: block;
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin-bottom: 6px;
}
.contactform input,
.contactform textarea,
.contactform select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  background: #fff;
  font: inherit;
  color: var(--tekst);
  transition: border-color .15s, box-shadow .15s;
}
.contactform input:focus,
.contactform textarea:focus,
.contactform select:focus {
  outline: 0;
  border-color: var(--rood);
  box-shadow: 0 0 0 3px rgba(227,0,15,.12);
}
.contactform textarea { min-height: 140px; resize: vertical; }
.form-required { color: var(--rood); }
.form-hint {
  font-size: .82rem;
  color: var(--tekst-meta);
  line-height: 1.5;
}
.form-honeypot { position: absolute; left: -9999px; }

.contact-block {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rand);
}
.contact-block:last-child { border-bottom: 0; }
.contact-block-label {
  font-family: 'Oxanium', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rood);
}
.contact-block-value {
  font-size: .95rem;
  color: var(--tekst);
  line-height: 1.4;
}
.contact-block-value a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact-block-value a:hover {
  border-bottom-color: var(--rood);
}
.contact-blok, .contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

/* ---- FAQ ---- */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--rand);
  padding: 18px 0;
}
.faq-item h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
  position: relative;
  padding-left: 26px;
}
.faq-item h3::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 14px; height: 3px;
  background: var(--rood);
}
.faq-item p {
  color: var(--tekst-zacht);
  margin: 0;
  padding-left: 26px;
}

/* ---- Footer ---- */
footer {
  background: var(--donker);
  color: rgba(255,255,255,.7);
  padding: 60px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.footer-col h4 {
  color: #fff;
  font-family: 'Oxanium', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 3px;
  background: var(--rood);
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,.7);
  padding: 5px 0;
  font-size: .94rem;
}
.footer-col a:hover { color: #fff; }
.footer-label {
  font-family: 'Oxanium', sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rood);
  margin-bottom: 4px;
  display: block;
}
.footer-vebidak {
  display: inline-block;
  background: var(--rood);
  color: #fff;
  padding: 6px 14px;
  font-family: 'Oxanium', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.footer-bottom {
  margin-top: 48px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 14px;
  font-size: .85rem;
}
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: #fff; }

/* ---- Cookiemelding ---- */
#cookie-melding {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--donker);
  color: rgba(255,255,255,.92);
  border-top: 2px solid var(--rood);
  font-size: .88rem;
  padding: 14px 20px;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  z-index: 90;
}
#cookie-melding.tonen { display: flex; }
#cookie-melding a { color: #fff; text-decoration: underline; }
#cookie-melding button {
  background: var(--rood);
  color: #fff;
  border: 0;
  padding: 8px 18px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--clip-knop);
}

/* ---- Utility ---- */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-in.in {
  opacity: 1; transform: none;
}
.artikel {
  max-width: 70ch;
  margin: 0 auto;
}
.artikel h2 {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 3px solid var(--rood);
  width: max-content;
  padding-right: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-meta { max-width: 480px; }
  .diensten-grid { grid-template-columns: repeat(2, 1fr); }
  .doelgroepen   { grid-template-columns: repeat(2, 1fr); }
  .related       { grid-template-columns: repeat(2, 1fr); }
  .projecten-grid,
  .projecten-preview { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-page-grid { grid-template-columns: 1fr; }
  .beloftes-grid .container,
  .belofte-balk .container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .logo-slogan { display: none; }
}

@media (max-width: 768px) {
  section { padding: 56px 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-cta { display: none; }
  .logo-img { height: 56px; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    width: 78%;
    max-width: 320px;
    height: calc(100vh - var(--nav-h));
    background: var(--antraciet);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px 22px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: -8px 0 24px rgba(0,0,0,.10);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links > a,
  .nav-links .dropdown-trigger {
    width: 100%;
    padding: 12px 0;
    color: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .nav-links > a:hover,
  .nav-links .dropdown-trigger:hover { color: #fff; }
  .nav-links .dropdown {
    background: transparent;
  }
  .nav-links .dropdown a {
    color: rgba(255,255,255,.85);
  }
  .nav-links > a.active::after,
  .has-dropdown.open .dropdown-trigger::after { display: none; }
  .dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    grid-template-columns: 1fr;
    background: transparent;
    border-top: 0;
    box-shadow: none;
    padding: 6px 0 0 12px;
    display: none;
  }
  .has-dropdown.open .dropdown { display: grid; }

  .hero::before { width: 280px; height: 90px; top: -28px; right: -60px; }
  .hero .tri-pattern { width: 120px; opacity: .85; }
  .tri-pattern { width: 100px; }
  .cta-blok .tri-pattern.on-red { width: 140px; }

  .diensten-grid { grid-template-columns: 1fr; }
  .doelgroepen   { grid-template-columns: 1fr; }
  .related       { grid-template-columns: 1fr; }
  .projecten-grid,
  .projecten-preview { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; gap: 32px; }
  .steden-list   { grid-template-columns: 1fr; }
  .beloftes-grid .container,
  .belofte-balk .container { grid-template-columns: 1fr; gap: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Print ---- */
@media print {
  .nav, footer, #cookie-melding, .cta-blok, .tri-pattern { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ---- WhatsApp link (footer) ---- */
.wa-link {
  color: #25D366 !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wa-link::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884a9.825 9.825 0 0 1 6.99 2.896 9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.wa-link:hover { color: #128C7E !important; }

/* ---- Hero light variant (cream/grijs achtergrond) ---- */
.hero.hero-light {
  background: var(--grijs-30);
  color: var(--tekst);
}
.hero.hero-light h1,
.hero.hero-light h1 .accent {
  color: var(--tekst);
}
.hero.hero-light h1 .accent { display: inline; }
.hero.hero-light p { color: var(--tekst-zacht); }
.hero.hero-light .hero-eyebrow { color: var(--tekst-zacht); }
.hero.hero-light .btn-ghost {
  color: var(--tekst);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.hero.hero-light .btn-ghost:hover {
  background: rgba(0,0,0,.06);
  color: var(--tekst);
}