/* ============================================================
   NEXT GROWTH V2 — "SYSTEM" core
   Donker, technisch, precies. Meetlat: Linear / Vercel.
   ============================================================ */

:root {
  /* Zwart in lagen. Eén vlakke achtergrond leest als een template; een reeks
     die nauwelijks van elkaar verschilt geeft diepte zonder dat je ziet
     waaróm. Het verschil tussen twee opeenvolgende lagen is klein genoeg om
     niet op te vallen en groot genoeg om te werken. */
  --ink-900: #07070A;      /* diepste laag: paginarand, voettekst */
  --ink-800: #0A0A0D;      /* de pagina zelf */
  --ink-700: #0E0E12;      /* secties die een tint moeten opvallen */
  /* De tint waarmee een sectie of een invoerveld zich van de achtergrond
     onderscheidt. Op de donkere site is dat --ink-700: een haartje lichter
     dan de pagina. Een pagina met een licht palet moet hem overschrijven,
     anders wordt "een haartje anders" ineens bijna zwart — en dan staat de
     donkere tekst van dat lichte palet onleesbaar op een zwart vlak. */
  --tint: var(--ink-700);
  --ink-600: #131318;      /* kaarten */
  --ink-500: #191920;      /* kaarten die boven andere kaarten liggen */
  --ink-400: #21212A;      /* randen van invoervelden, hover-vlakken */

  --bg: var(--ink-800);
  --bg-raise: var(--ink-600);
  --bg-raise-2: var(--ink-500);
  --cream: #F2EFE7;
  --cream-2: #FFFFFF;
  --cream-ink: #1E1B15;
  --cream-ink-2: rgba(30,27,21,.68);
  --cream-line: rgba(30,27,21,.12);
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);

  --text: #F7F8F9;
  --text-2: rgba(247, 248, 249, .66);
  --text-3: rgba(247, 248, 249, .50);  /* was .40. Op de donkere vlakken (#07070A t/m
                                          #191920) mengt .40 tot #69696B en dat is
                                          3,6:1 - onder de 4,5:1 die WCAG AA vraagt.
                                          Lighthouse zakte er op alle vier de
                                          webdesignpagina's door naar 96 voor
                                          toegankelijkheid. Met .50 wordt het
                                          4,95:1 tot 5,08:1 en blijft de hierarchie
                                          onder --text-2 (.66) intact. */

  /* Goud als metaal, niet als kleurvlak. Echt geborsteld goud heeft een
     donkere kant, een lichte band en een warme kern — die drie stops geven
     dat, en een enkele kleur nooit. Alleen voor accenten gebruiken; grote
     gouden vlakken maken het meteen goedkoop. */
  --accent: #C9A45F;
  --accent-strong: #B8914A;
  --accent-light: #E9D3A2;
  --accent-deep: #8A6A2F;
  --accent-dim: rgba(201,164,95,.13);
  /* De eerste stop was #8A6A2F. Knoppen tonen door background-position: 0% 50%
     juist die stop aan hun linkerrand, en daar haalde de knoptekst #1B1305 maar
     3,66:1 - onder de 4,5:1 die WCAG AA voor normale tekst vraagt. #A07C38 haalt
     4,76:1 en houdt het metaalverloop intact. */
  --goud-metaal: linear-gradient(150deg,
      #A07C38 0%, #C9A45F 22%, #F0DCAE 42%, #D8B876 55%, #A9853F 78%, #C9A45F 100%);
  --goud-lijn: linear-gradient(90deg,
      transparent, rgba(201,164,95,.55) 30%, rgba(240,220,174,.75) 50%, rgba(201,164,95,.55) 70%, transparent);
  --glow: rgba(201,164,95,.30);
  --warn: #FBBF24;
  --danger: #F87171;

  /* Schaduw in lagen: één schaduw leest plat, drie geven afstand tot de
     achtergrond. Ze staan hier zodat elke kaart dezelfde diepte krijgt. */
  --schaduw-1: 0 1px 2px rgba(0,0,0,.28);
  --schaduw-2: 0 2px 4px rgba(0,0,0,.24), 0 8px 16px -6px rgba(0,0,0,.42);
  --schaduw-3: 0 4px 8px rgba(0,0,0,.22), 0 16px 32px -10px rgba(0,0,0,.5), 0 32px 64px -24px rgba(0,0,0,.5);
  --schaduw-goud: 0 8px 28px -10px var(--glow);

  --font: "Inter", "Inter fallback", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", "Instrument Serif fallback", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Bewegingen. --ease voor alles wat verschijnt, --ease-uit voor wat
     verdwijnt, --ease-spring alleen waar iets mag "landen". */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-uit: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --snel: .16s;
  --normaal: .32s;
  --traag: .6s;

  --r: 12px;
  --r-groot: 18px;
}

/* ---------- reset ---------- */

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

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

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.68;
  color: var(--text-2);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ruis over de hele pagina. Egaal zwart op een scherm laat banden zien in
   verlopen en leest als plastic; een korrel van een paar procent haalt die
   banden weg en geeft het vlak textuur. Zo licht dat je hem niet ziet — je
   ziet alleen dat het niet meer plat is. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { color: var(--text); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }

::selection { background: var(--accent-strong); color: #201709; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- typografie ---------- */

/* Koppen mogen groter en strakker. Een kop die dezelfde maat heeft als de
   tekst eronder vraagt om aandacht met woorden; een kop die twee keer zo
   groot is heeft dat niet nodig. Hoe groter de letter, hoe dichter de
   letterafstand mag — anders valt een grote kop uit elkaar. */
.h1 {
  font-family: var(--serif);
  font-size: clamp(3.1rem, 7.2vw, 6rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.02;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -.016em;
  line-height: 1.1;
}
.h1 em, .h2 em { font-style: normal; color: var(--accent); }
.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  max-width: 34em;
  color: var(--text-2);
}

.mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.grad-text {
  background: linear-gradient(120deg, #E7CA8E 10%, var(--accent) 60%, #9A7638);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- layout ---------- */

.wrap { width: min(100%, 1200px); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* Meer lucht tussen de secties. Rust is het verschil tussen "veel te
   vertellen" en "weten wat belangrijk is". */
.sectie {
  position: relative;
  padding-block: clamp(6rem, 13vh, 10.5rem);
  border-top: 1px solid var(--line);
}
/* Om en om een haartje lichter. Je ziet niet dát het verschilt, je ziet dat
   de pagina uit delen bestaat in plaats van uit één lange lap. */
.sectie:nth-of-type(even) { background: var(--tint); }
/* De scheidingslijn loopt naar de randen uit in plaats van hard te stoppen */
.sectie::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent);
  pointer-events: none;
}

.sectie-kop { max-width: 44rem; margin-bottom: clamp(3rem, 7vh, 5rem); }
.sectie-kop .eyebrow { margin-bottom: .9rem; }
.sectie-kop p { margin-top: .9rem; }

.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 400;
  padding: .6rem 1rem; background: var(--accent-strong); color: var(--bg);
  font-weight: 600; font-size: .85rem; border-radius: 8px; text-decoration: none;
  transform: translateY(-300%); transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: none; }

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

/* ---------- knoppen & chips ---------- */

/* De knop is het enige echt gouden vlak op de pagina, dus die moet kloppen.
   Geborsteld metaal: een donkere onderkant, een lichte band bovenin en een
   warme kern. Bij hover schuift die band mee — zoals licht over metaal
   beweegt als je je hoofd draait. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.7rem;
  background: var(--goud-metaal);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #1B1305;
  font-weight: 600; font-size: .92rem; letter-spacing: -.006em;
  border-radius: 999px; text-decoration: none;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.18), var(--schaduw-1);
  transition: transform var(--normaal) var(--ease-spring),
              box-shadow var(--normaal) var(--ease),
              background-position var(--traag) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18),
              var(--schaduw-2), var(--schaduw-goud);
}
.btn:active { transform: translateY(0); transition-duration: var(--snel); }
/* glans die één keer over de knop trekt bij hover */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn:hover::after { transition: transform .75s var(--ease-uit); transform: translateX(120%); }

.btn--ghost {
  background: rgba(255,255,255,.02);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost::after { display: none; }
.btn--ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(201,164,95,.42);
  box-shadow: var(--schaduw-2);
}
.btn--sm { padding: .55rem 1.1rem; font-size: .85rem; }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-size: .8rem; font-weight: 500; color: var(--text-2);
  text-decoration: none;
  transition: border-color .18s var(--ease);
}
.pill:hover { border-color: var(--line-strong); }
.pill .dot { flex: none; }

.kbd {
  display: inline-flex; align-items: center;
  padding: .1rem .45rem;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-raise-2);
  font-family: var(--mono); font-size: .68rem; color: var(--text-2);
}

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--text-3); }
.dot--ok { background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.dot--warn { background: var(--warn); }
.dot--danger { background: var(--danger); }

/* ---------- kaarten & lagen ---------- */

/* Kaarten als glas: een vlak dat ligt op wat eronder zit in plaats van erin
   geplakt. Lichte doorschijnendheid, een blur die de laag eronder oppakt, en
   een dunne lichtlijn bovenlangs waar het licht op valt. De blur is bewust
   klein — zwaar glas kost rekenkracht en leest bovendien als effect. */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  background-color: var(--bg-raise);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid var(--line);
  border-radius: var(--r-groot);
  box-shadow: var(--schaduw-2);
  transition: transform var(--normaal) var(--ease),
              border-color var(--normaal) var(--ease),
              box-shadow var(--normaal) var(--ease);
}
/* cursor-aware spotlight: JS zet --mx/--my op .card--hover en .app */
.card--hover::after, .app::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(201,164,95,.10), transparent 65%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.card--hover:hover::after, .app:hover::after { opacity: 1; transition-duration: .08s; }
.app { position: relative; }
/* soepel touch-scrollen voor de app-tabellen op mobiel */
.tbl-scroll, .rank-tbl-wrap { -webkit-overflow-scrolling: touch; }
/* de lichtlijn bovenlangs: goud in plaats van wit, zodat de kaart bij het
   merk hoort in plaats van bij een willekeurig donker thema */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--r-groot) var(--r-groot) 0 0;
  background: var(--goud-lijn);
  opacity: .45;
  transition: opacity var(--normaal) var(--ease);
  pointer-events: none;
}
.card--hover:hover {
  transform: translateY(-4px);
  border-color: rgba(201,164,95,.24);
  box-shadow: var(--schaduw-3);
  transition-duration: var(--snel);
}
.card--hover:hover::before { opacity: 1; }

.g-border {
  position: relative;
  border-radius: calc(var(--r) + 1px);
  background:
    linear-gradient(var(--bg-raise), var(--bg-raise)) padding-box,
    linear-gradient(140deg, rgba(201,164,95,.5), rgba(255,255,255,.10) 40%, rgba(201,164,95,.18)) border-box;
  border: 1px solid transparent;
}

.glow-field {
  position: absolute;
  width: min(72vw, 54rem); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, var(--glow), transparent 65%);
  filter: blur(48px);
  opacity: .5;
  pointer-events: none;
}

/* ---------- KPI's & logo-rij ---------- */

.kpi { display: grid; gap: .3rem; }
.kpi b {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi b em { font-style: normal; color: var(--accent); }
.kpi b span { font: inherit; color: inherit; }
.kpi > span { font-size: .85rem; color: var(--text-3); }

.logo-row {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.8rem;
  align-items: center; justify-content: center;
}
.logo-row li {
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  color: var(--text-3);
  transition: color .3s var(--ease);
  text-align: center;
}
.logo-row li:hover { color: var(--text-2); transition-duration: .08s; }
.logo-row .logo-metric {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--accent);
  margin-top: .2rem;
  opacity: .85;
}

/* telefoon-frame voor verticale reels */
.phone {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--bg-raise);
  padding: 8px;
  overflow: hidden;
}
.phone::before {
  content: "";
  position: absolute; top: 13px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  z-index: 2;
}
.phone video { display: block; width: 100%; border-radius: 15px; background: var(--bg); }

/* flow-stappen lichten sequentieel op (JS zet --fi en .is-run) */
html.js .flow-steps .flow-step {
  opacity: .35;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease-spring);
  transition-delay: calc(320ms * var(--fi, 0));
}
html.js .flow-steps .flow-verbinder {
  opacity: .25;
  transition: opacity .5s var(--ease);
  transition-delay: calc(320ms * var(--fi, 0) + 160ms);
}
html.js .flow-steps.is-run .flow-step { opacity: 1; transform: none; }
html.js .flow-steps.is-run .flow-verbinder { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .flow-steps .flow-step, html.js .flow-steps .flow-verbinder { opacity: 1; transform: none; }
}

/* ---------- navigatie ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.nav.is-scrolled {
  background: rgba(10,10,11,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav__in {
  display: flex; align-items: center; gap: 1.5rem;
  height: 60px;
}
.nav__logo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: .82rem; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text); text-decoration: none;
  white-space: nowrap;
}
.nav__links { display: flex; gap: .25rem; margin-inline: auto; }
.nav__links a {
  padding: .45rem .62rem;
  font-size: .88rem; font-weight: 500;
  color: var(--text-2); text-decoration: none;
  border-radius: 7px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav__links a[aria-current="page"] { color: var(--accent); }
.nav__cta { display: flex; gap: .6rem; }
.nav__burger { display: none; }

/* ---------- nav dropdown (Configurators) ---------- */
.nav__dd { position: relative; display: inline-flex; }
.nav__dd-btn {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .45rem .62rem;
  font-size: .88rem; font-weight: 500;
  color: var(--text-2); text-decoration: none;
  border-radius: 7px; cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__dd-btn svg { width: 10px; height: 10px; opacity: .65; transition: transform .2s var(--ease); }
.nav__dd:hover .nav__dd-btn,
.nav__dd:focus-within .nav__dd-btn { color: var(--text); background: rgba(255,255,255,.05); }
.nav__dd-btn[aria-current="page"] { color: var(--accent); }
.nav__dd:hover .nav__dd-btn svg,
.nav__dd:focus-within .nav__dd-btn svg { transform: rotate(180deg); }
.nav__dd-menu {
  position: absolute; top: calc(100% + 11px); left: 50%;
  transform: translateX(-50%) translateY(7px);
  min-width: 214px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  box-shadow: 0 20px 54px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 300;
}
.nav__dd-menu::before { content: ""; position: absolute; top: -13px; left: 0; right: 0; height: 13px; }
.nav__dd:hover .nav__dd-menu,
.nav__dd:focus-within .nav__dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dd-menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .58rem .68rem; border-radius: 9px;
  font-size: .86rem; font-weight: 500; color: var(--text-2); text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__dd-menu a svg { width: 15px; height: 15px; opacity: .8; flex: none; }
.nav__dd-menu a:hover { color: var(--text); background: var(--accent-dim); }
.nav__dd-menu a[aria-current="page"] { color: var(--accent); }
.nav__dd-menu a[aria-current="page"] svg { opacity: 1; }

/* kop boven een gewone dropdown: naam + één regel belofte, dan de links */
.nav__dd-kop { padding: .5rem .68rem .65rem; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.nav__dd-kop b { display: block; font-size: .92rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.nav__dd-kop span { display: block; margin-top: .2rem; font-size: .76rem; color: var(--text-3); }

/* ---------- mega-menu (Oplossingen) ----------
   Eén breed paneel onder de balk: vier kolommen met elk een kop, één regel
   belofte en de links eronder, afgesloten met een CTA-balk. Het paneel hangt
   aan de header zelf (de .nav__dd staat static) en centreert op de pagina. */
.nav__dd--mega { position: static; }
.nav__dd-menu--mega {
  width: min(1160px, calc(100vw - 2rem));
  padding: 1.5rem 1.5rem 1.25rem;
  gap: 1.25rem;
}
.nav__mega-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  align-self: flex-start;
  margin: 0; padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--accent-dim);
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.nav__mega-kolommen { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr; gap: 2rem; }
.nav__mega-kolom h3 { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.nav__mega-kolom > p { margin: .3rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-3); padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.nav__mega-links { display: grid; gap: 2px; margin-top: .55rem; align-content: start; }
.nav__mega-links--twee { grid-template-columns: 1fr 1fr; column-gap: .6rem; }
.nav__dd-menu .nav__mega-links a { padding: .4rem .5rem; }
.nav__dd-menu .nav__mega-links a.is-accent { color: var(--accent); }
.nav__mega-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .85rem .7rem .85rem 1.1rem; border-radius: 11px;
  background: var(--accent-dim); border: 1px solid rgba(201,164,95,.3);
}
.nav__mega-cta p { margin: 0; font-size: .92rem; font-weight: 600; color: var(--text); }

/* Het menu telde elf losse links en liep daardoor op een laptopscherm van
   1280 tot 70 px buiten beeld. Dat is opgelost door het menu zelf terug te
   brengen tot zes items in plaats van door knoppen te verbergen; hier blijft
   alleen een lichte verkrapping over voor de smalste laptops. */
@media (max-width: 1300px) and (min-width: 1181px) {
  .nav__links { gap: .1rem; }
  .nav__links > .nav__dd > .nav__dd-btn,
  .nav__links > a { padding-inline: .55rem; font-size: .92rem; }
}

@media (max-width: 1180px) {
  .nav__links {
    position: fixed; top: 60px; left: 0; right: 0;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    z-index: 250;
    flex-direction: column; gap: .1rem;
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    background: var(--bg);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: .95rem .4rem; font-size: 1.25rem; font-family: var(--serif); font-weight: 400;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a[aria-current="page"] { color: var(--accent); }
  .nav__cta .nav__demo { display: none; }
  .nav__burger {
    display: grid; gap: 5px; padding: .6rem .2rem .6rem .6rem;
  }
  .nav__burger i { width: 20px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform .2s var(--ease); transform-origin: center; }
  .nav__burger[aria-expanded="true"] i:first-child { transform: translateY(3.3px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] i:last-child { transform: translateY(-3.3px) rotate(-45deg); }

  /* dropdown wordt op mobiel inline uitgeklapt binnen de kolom */
  .nav__dd { display: block; width: 100%; }
  .nav__dd-btn {
    padding: .95rem .4rem; font-size: 1.25rem; font-family: var(--serif); font-weight: 400;
    color: var(--text-3); border-bottom: 1px solid var(--line);
    justify-content: flex-start;
  }
  .nav__dd-btn svg { display: none; }
  .nav__dd-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; width: 100%;
    background: none; border: none; box-shadow: none; padding: 0;
    gap: 0;
  }
  .nav__dd-menu::before { display: none; }
  .nav__dd-menu a {
    padding: .8rem .4rem .8rem 1.3rem; font-size: 1.08rem;
    font-family: var(--serif); font-weight: 400;
    border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav__dd-menu a:hover { background: none; }

  /* het mega-paneel klapt op mobiel gewoon inline uit, net als de rest:
     kolommen onder elkaar, de sublijnen en de CTA-balk vervallen */
  .nav__dd--mega { position: relative; }
  .nav__dd-menu--mega { width: 100%; padding: 0; gap: 0; }
  .nav__mega-eyebrow, .nav__mega-kolom > p, .nav__mega-cta, .nav__dd-kop { display: none; }
  .nav__mega-kolommen { grid-template-columns: 1fr; gap: 0; }
  .nav__mega-kolom h3 {
    padding: .8rem .4rem .4rem 1.3rem;
    font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-3);
  }
  .nav__mega-links { margin-top: 0; gap: 0; }
  .nav__mega-links--twee { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--line); }
.foot__cta {
  text-align: center;
  padding-block: clamp(4rem, 9vh, 6.5rem);
}
.foot__cta h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.03em; }
.foot__cta p { margin-top: .8rem; color: var(--text-2); }
.foot__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

.foot__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem;
  padding-block: 3rem;
  border-top: 1px solid var(--line);
}
.foot__brand { font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.foot__meta { margin-top: .7rem; color: var(--text-3); line-height: 1.9; }
.foot__grid nav { display: grid; gap: .45rem; align-content: start; }
.foot__grid h3 { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 500; margin-bottom: .35rem; }
.foot__grid nav a { font-size: .88rem; color: var(--text-2); text-decoration: none; }
.foot__grid nav a:hover { color: var(--text); }
.foot__base {
  display: flex; align-items: center; gap: .6rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  /* De slotregel is één lange zin met de juridische verwijzingen erin. Zonder
     afbreken stak hij op een telefoon 54 px buiten het scherm en werd het eind
     — inclusief die verwijzingen — gewoon afgekapt. */
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > div { grid-column: 1 / -1; }
}

/* ---------- alle pagina's onder de footer (scripts/footersitemap.py) ----------

   Bijna tweehonderd links op elke pagina van de site. Dat is bewust: een nieuwe
   stads- of kennisbankpagina heeft inkomende links nodig, en die kreeg hij tot
   nu toe alleen uit de sitemap - wat geen link is.

   Dichtgeklapt, omdat compleet en leesbaar anders niet samengaan. De links
   staan gewoon in de HTML; <details> verbergt ze voor het oog en niet voor een
   crawler. */
.foot__alles { padding-block: 0; }
details.foot__alles { border-top: 1px solid var(--line); }
details.foot__alles > summary {
  display: flex; align-items: center; gap: .6rem;
  padding-block: 1.1rem;
  cursor: pointer;
  color: var(--text-3);
  font-size: .88rem;
  list-style: none;
}
details.foot__alles > summary::-webkit-details-marker { display: none; }
/* Het driehoekje zelf tekenen, want de browserversie staat per browser ergens
   anders en draait niet mee. */
details.foot__alles > summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s ease;
}
details.foot__alles[open] > summary::before { transform: rotate(90deg); }
details.foot__alles > summary:hover { color: var(--text); }
.foot__alles-n {
  margin-left: auto; font-size: .72rem; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem;
}
/* Kolommen die zichzelf vullen, geen raster. Met een raster staat de kolom
   Zwembad (vier links) naast Kennisbank (vierendertig) en is de rij zo hoog als
   de langste - drie gaten van zeshonderd pixels in een footer. Multicolumn laat
   de blokken achter elkaar doorlopen en pakt ze op. */
.foot__alles-grid {
  column-width: 190px;
  column-gap: 2rem;
  padding-bottom: 2.4rem;
}
.foot__alles-grid nav {
  display: grid; gap: .3rem; align-content: start;
  /* Een groep hoort niet halverwege over twee kolommen te breken; alleen de
     kennisbanklijst is daar te lang voor en mag dat wel. */
  break-inside: avoid;
  margin-bottom: 1.5rem;
}
.foot__alles-grid nav[aria-label="Kennisbank"] { break-inside: auto; }
.foot__alles-grid h3 {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); font-weight: 500; margin-bottom: .3rem;
}
.foot__alles-grid a {
  font-size: .82rem; color: var(--text-2); text-decoration: none;
  overflow-wrap: anywhere;
}
.foot__alles-grid a:hover { color: var(--text); }
/* Op een telefoon geeft column-width van 190 px één kolom, en dan is de lijst
   zesduizend pixels lang. Twee smalle kolommen halveren dat; de plaatsnamen zijn
   kort genoeg en de rest mag hier best afbreken. */
@media (max-width: 640px) {
  .foot__alles-grid { column-count: 2; column-width: auto; column-gap: 1.2rem; }
  .foot__alles-grid a { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  details.foot__alles > summary::before { transition: none; }
}

/* ---------- lichte (crème) sectie ---------- */

/* De dubbele klasse is geen slordigheid maar noodzaak. Hierboven staat
   .sectie:nth-of-type(2n) { background: var(--tint) }, en dat is met zijn
   pseudoklasse specifieker dan .sectie--licht alleen. Een lichte sectie die
   toevallig op een even plek in zijn ouder staat, kreeg daardoor de donkere
   tint terwijl de tekst wel op var(--cream-ink-2) bleef staan: donkerbruine
   letters op een bijna zwarte achtergrond, gemeten 1,12:1.

   Dat is geen theoretisch geval. Het gebeurde op elf webdesign-stadspagina's
   tegelijk, en of het optreedt hangt af van hoeveelste sectie het is - dus je
   ziet het pas als je een sectie invoegt of verplaatst. Vandaar de vaste
   oplossing hier in plaats van elke pagina apart tellen. */
.sectie.sectie--licht,
.sectie--licht {
  background: var(--cream);
  color: var(--cream-ink-2);
  border-top: 0;
}
.sectie--licht h1, .sectie--licht h2, .sectie--licht h3, .sectie--licht h4 { color: var(--cream-ink); }
.sectie--licht .lede { color: var(--cream-ink-2); }
/* Was alpha .5: 3,20:1 op de creme en 3,32:1 op de witte kaart erin, beide
   onder de 4,5:1 van WCAG AA. .66 geeft 5,22:1 en 5,50:1. */
.sectie--licht .mono, .sectie--licht .kpi > span { color: rgba(30,27,21,.66); }
.sectie--licht .kpi b { color: var(--cream-ink); }
/* Was #A07E3E: 3,29:1 op de creme. #836733 houdt dezelfde tint en haalt
   4,62:1 op de creme en 5,31:1 op wit. */
.sectie--licht .eyebrow { color: #836733; }
/* Ook de gouden accenten in koppen en kpi-cijfers: op de creme haalde
   var(--accent) 2,03:1, ver onder de 3:1 die zelfs grote tekst vraagt. */
.sectie--licht .h1 em, .sectie--licht .h2 em, .sectie--licht .kpi b em { color: #836733; }
.sectie--licht .card {
  background: var(--cream-2);
  border-color: var(--cream-line);
  color: var(--cream-ink-2);
}
.sectie--licht .card::before { background: none; }
.sectie--licht .btn--ghost { color: var(--cream-ink); border-color: rgba(30,27,21,.25); }
.sectie--licht .btn--ghost:hover { background: rgba(30,27,21,.05); }

/* ---------- reveals (alleen verborgen mét JS) ---------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .55s var(--ease-spring);
  transition-delay: calc(60ms * var(--i, 0));
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   NG/OS — app-mockups (fotorealistisch niveau)
   ============================================================ */

.app {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  font-size: .8rem;
  color: var(--text-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -30px rgba(0,0,0,.8);
}

.app--tilt {
  transform: perspective(1400px) rotateX(14deg) scale(.98);
  transform-origin: top center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .app--tilt { transform: none; }
}
/* op mobiel geen scheve tilt — recht en rustig */
@media (max-width: 720px) {
  .app--tilt { transform: none !important; }
}

.app-chrome {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.app-chrome .dots { display: flex; gap: 5px; }
.app-chrome .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12); }
.app-chrome .route {
  font-family: var(--mono); font-size: .68rem; color: var(--text-3);
  padding: .18rem .7rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}

.app-body { display: grid; grid-template-columns: 200px 1fr; min-height: 0; }
@media (max-width: 720px) {
  .app-body { grid-template-columns: 1fr; }
  .app-body .app-side.app-side { display: none; }
}

.app-side {
  border-right: 1px solid var(--line);
  padding: .8rem .6rem;
  display: flex; flex-direction: column; gap: .12rem;
  background: rgba(255,255,255,.015);
}
.app-side .side-label {
  font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-3);
  padding: .7rem .6rem .3rem;
}
.side-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .6rem;
  border-radius: 7px;
  font-size: .78rem; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
}
.side-item svg { flex: none; opacity: .75; }
.side-item:hover { background: rgba(255,255,255,.04); }
.side-item.is-active { background: var(--accent-dim); color: var(--accent); }
.side-item.is-active svg { opacity: 1; }
.side-item .count { margin-left: auto; font-family: var(--mono); font-size: .62rem; color: var(--text-3); }
.app-side .side-user {
  margin-top: auto;
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .6rem .2rem;
  border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--text-2);
}

.app-top {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--line);
}
.app-search {
  display: flex; align-items: center; gap: .5rem;
  flex: 1; max-width: 260px; min-width: 0;
  padding: .32rem .6rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  color: var(--text-3); font-size: .74rem;
  white-space: nowrap; overflow: hidden;
}
.app-search .kbd { margin-left: auto; }
.app-top .app-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.app-main { padding: 1rem; display: grid; gap: 1rem; align-content: start; min-width: 0; }
.app-main h4 { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }

/* avatars */
.avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-dim); color: var(--accent);
  font-size: .58rem; font-weight: 700; letter-spacing: 0;
  border: 1px solid rgba(201,164,95,.25);
  flex: none;
}
.avatar--b { background: rgba(251,191,36,.14); color: var(--warn); border-color: rgba(251,191,36,.25); }
.avatar--c { background: rgba(255,255,255,.08); color: var(--text-2); border-color: var(--line-strong); }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--bg-raise); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .66rem; font-weight: 600; letter-spacing: .01em;
  background: rgba(255,255,255,.06); color: var(--text-2);
  white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--ok { background: var(--accent-dim); color: var(--accent); }
.badge--warn { background: rgba(251,191,36,.12); color: var(--warn); }
.badge--danger { background: rgba(248,113,113,.12); color: var(--danger); }
.badge--muted { background: rgba(255,255,255,.06); color: var(--text-3); }

/* datatabel */
.tbl { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tbl th {
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); text-align: left;
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  white-space: nowrap;
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .15s var(--ease); }
.tbl tbody tr:hover { background: rgba(255,255,255,.025); }
.tbl td:first-child { color: var(--text); font-weight: 500; }
.tbl .num { font-family: var(--mono); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* grafieken */
.chart { width: 100%; height: auto; display: block; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .area { fill: url(#chartFill); }
.chart .lijn { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.chart .punt { fill: var(--accent); }
.chart text { font-family: var(--mono); font-size: 8.5px; fill: var(--text-3); }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.bars i {
  flex: 1; min-width: 4px;
  height: calc(1% * var(--v, 40));
  background: linear-gradient(to top, rgba(201,164,95,.25), var(--accent));
  border-radius: 3px 3px 0 0;
  opacity: .9;
}
.bars i.dim { background: rgba(255,255,255,.10); }

/* product-video in app-frame */
.app > video { display: block; width: 100%; background: var(--bg); }
.app-chrome .badge { margin-left: auto; }

figure.bewijs { margin: 0; display: grid; gap: .7rem; }
figure.bewijs figcaption {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-3);
  display: flex; align-items: center; gap: .55rem;
  flex-wrap: wrap;
}
figure.bewijs figcaption .dot { flex: none; }
figure.bewijs figcaption a { color: var(--accent); text-decoration: none; }
figure.bewijs figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* stat-tegel binnen app */
.app-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.app-kpi {
  padding: .75rem .85rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  display: grid; gap: .15rem;
}
.app-kpi b { font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app-kpi span { font-size: .64rem; color: var(--text-3); }
.app-kpi .delta { font-family: var(--mono); font-size: .62rem; color: var(--accent); }
.app-kpi .delta--down { color: var(--danger); }

/* ============================================================
   BEWEGING
   Alles wat hier staat is opzettelijk klein. Een pagina die beweegt
   trekt aandacht naar de beweging; een pagina die nét beweegt trekt
   aandacht naar de inhoud. De regel: je mag het merken, niet zien.

   Geen JavaScript. Deze site is zestig losse HTML-pagina's; een
   scroll-waarnemer zou op elke pagina apart ingeladen moeten worden.
   Met animation-timeline doet de browser het zelf, en waar dat niet
   bestaat staat alles gewoon stil zichtbaar — geen lege pagina.
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* secties komen omhoog terwijl ze in beeld schuiven */
    .sectie-kop,
    .card,
    .kpi {
      animation: opkomen linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    @keyframes opkomen {
      from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
      to   { opacity: 1; transform: none;             filter: none; }
    }
  }
}

/* Zweven: alleen voor het ene element dat de aandacht mag hebben, nooit
   voor een hele rij. Zet .zweef op een enkel beeld of kaart. */
@media (prefers-reduced-motion: no-preference) {
  .zweef { animation: zweven 7s var(--ease) infinite; }
  @keyframes zweven {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
  }
}

/* Sfeerlicht: een warme gloed die net buiten beeld hangt. Geeft de
   bovenkant van een sectie diepte zonder dat er iets te zien is. */
.ambient {
  position: absolute;
  inset: -20% 0 auto 0;
  height: 60%;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(201,164,95,.10), transparent 70%);
  filter: blur(30px);
}

/* Een dunne gouden lijn als scheiding. Sterker dan een rand, rustiger
   dan een streep: hij dooft naar beide kanten uit. */
.goudlijn {
  height: 1px;
  border: 0;
  background: var(--goud-lijn);
  opacity: .5;
}

/* Getallen die meelopen met de tekst eronder. Cijfers hebben een eigen
   uitlijning nodig, anders springen ze bij het verversen. */
.cijfer {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

/* ---------- consistentie ----------
   Eén radius, één randkleur, één schaduw per niveau. Wat hieronder staat
   trekt de losse plekken die door de jaren zijn afgeweken weer gelijk. */
input, select, textarea {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  padding: .7rem .9rem;
  transition: border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(201,164,95,.45);
  box-shadow: 0 0 0 3px rgba(201,164,95,.12);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }

/* ---------- uitleg onder een configurator ---------- */
.ovk-uitleg {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.ovk-uitleg article {
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-groot, 18px);
  background: rgba(255,255,255,.02);
}
.ovk-uitleg h3 {
  font-size: 1.06rem;
  margin-bottom: .7rem;
  color: var(--text);
}
.ovk-uitleg p { margin-bottom: .8rem; font-size: .95rem; line-height: 1.7; }
.ovk-uitleg p:last-child { margin-bottom: 0; }
.ovk-uitleg strong { color: var(--text); font-weight: 600; }

.ovk-faq { display: grid; gap: .55rem; max-width: 52rem; }
.ovk-faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.ovk-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  color: var(--text);
  font-weight: 600; font-size: .98rem;
  list-style: none;
}
.ovk-faq summary::-webkit-details-marker { display: none; }
.ovk-faq summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border: solid var(--accent, #C9A45F);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.ovk-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ovk-faq p { padding: 0 1.2rem 1.15rem; font-size: .95rem; line-height: 1.7; margin: 0; }
/* ---------- de aanvraag onderaan een configurator ---------- */
.ng-vraag { border-top: 1px solid var(--line); }
.ng-vraag__kaart {
  position: relative;
  padding: clamp(1.8rem, 5vw, 3.4rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(201,164,95,.09), transparent 60%),
    var(--bg-raise, #131109);
  overflow: hidden;
}
/* gouden haarlijn bovenlangs: hoort bij het merk, niet bij een donker thema */
.ng-vraag__kaart::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,164,95,.6) 30%,
              rgba(240,220,174,.8) 50%, rgba(201,164,95,.6) 70%, transparent);
  pointer-events: none;
}
.ng-vraag__tekst { max-width: 46rem; }
.ng-vraag h2 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: .7rem 0 .9rem;
}
.ng-vraag .lede { margin-bottom: 1.5rem; }
.ng-vraag__punten { display: grid; gap: .6rem; margin: 0 0 1.8rem; }
.ng-vraag__punten li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .95rem; color: var(--text-2, #9c9a94);
}
/* een klein gouden vinkje, met CSS getekend: geen extra bestand, geen icoon
   dat afwijkt van de rest */
.ng-vraag__punten span {
  flex: none; width: 16px; height: 16px; margin-top: .28rem;
  border-radius: 50%;
  background: rgba(201,164,95,.14);
  position: relative;
}
.ng-vraag__punten span::after {
  content: "";
  position: absolute; left: 5px; top: 4px;
  width: 4px; height: 7px;
  border: solid var(--accent, #C9A45F);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.ng-vraag__knoppen { display: flex; flex-wrap: wrap; gap: .7rem; }
.ng-vraag__noot {
  margin-top: 1.1rem;
  font-size: .84rem;
  color: var(--text-3, rgba(255,255,255,.42));
}

/* ---------- tegelconfigurator ----------
   Het voorbeeld wordt getekend op een canvas, dus er is geen beeldbibliotheek
   nodig en elke combinatie klopt per definitie. */
/* Dit blok zette hier zijn eigen kleuren neer, vast op licht-op-donker, met
   als reden dat het op een donkere sectie stond. Dat was precies één aanname
   te veel: de tegelconfigurator staat op een pagina met een licht palet, en
   zodra die sectie licht werd stond deze tekst wit op crème — onleesbaar.
   Een blok hoort de kleuren van zijn pagina te volgen; dan klopt het overal,
   ook op de donkere kant van de site. */
.tg {
  --tg-tekst: var(--text);
  --tg-tekst-2: var(--text-2);
  --tg-tekst-3: var(--text-3);
  --tg-lijn: var(--line-strong);
  --tg-vlak: var(--bg-raise);
  color: var(--tg-tekst-2);
  display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-items: start;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 980px) { .tg { grid-template-columns: 1fr; } }
.tg__viz { position: sticky; top: 84px; }
@media (max-width: 980px) { .tg__viz { position: static; } }
/* ruimtekiezer boven het voorbeeld */
.tg__ruimtes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
               gap: .4rem; margin-bottom: .7rem; }
@media (max-width: 520px) { .tg__ruimtes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tg-ruimte { display: flex; flex-direction: column; gap: .12rem; text-align: left;
             padding: .55rem .7rem; border-radius: 12px; cursor: pointer;
             border: 1px solid var(--tg-lijn); background: rgba(255,255,255,.03);
             transition: border-color var(--d-2, .2s) var(--e-uit, ease),
                         background var(--d-2, .2s) var(--e-uit, ease); }
.tg-ruimte b { font-size: .88rem; font-weight: 600; color: var(--tg-tekst); }
.tg-ruimte span { font-size: .72rem; line-height: 1.35; color: var(--tg-tekst-3); }
.tg-ruimte:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.tg-ruimte.is-on { border-color: rgba(201,164,95,.55); background: rgba(201,164,95,.09); }
/* De gekozen tegel kreeg var(--accent). Op de lichte configuratorpagina's is
   dat 3,46:1 op hun eigen kaart; daar bestaat --acc-diep, dezelfde tint maar
   donker genoeg. Op de donkere pagina's bestaat die niet en blijft het
   heldere accent staan, dat daar 7,90:1 haalt. */
.tg-ruimte.is-on b { color: var(--acc-diep, var(--accent)); }
.tg__vizin canvas { transition: opacity .16s ease; }
.tg-grp__tel { margin-left: .5rem; font-family: var(--mono); font-size: .68rem;
               letter-spacing: .06em; color: var(--tg-tekst-3); text-transform: none; }
.tg-tiles--kleur { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tg-sw--ader { position: relative; }
/* per product een regel met de plek ernaast */
.tg-tiles--inr { grid-template-columns: 1fr; gap: .45rem; }
.tg-inr { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
          flex-wrap: wrap; padding: .55rem .7rem; border-radius: 12px;
          border: 1px solid var(--tg-lijn); background: rgba(255,255,255,.03); }
.tg-inr__k b { display: block; font-size: .88rem; font-weight: 600; color: var(--tg-tekst); }
.tg-inr__k span { font-size: .72rem; color: var(--tg-tekst-3); }
.tg-inr__r { display: flex; gap: .35rem; flex: none; }
.tg-inr__r .tg-opt { padding: .32rem .6rem; }
.tg-inr__r .tg-opt b { font-size: .78rem; }
.tg-tiles--vlak { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.tg__vizin { position: relative; border: 1px solid var(--line); border-radius: var(--r-groot, 18px);
             overflow: hidden; background: #0c0d10; box-shadow: var(--schaduw-2); }
.tg .btn--ghost { color: var(--tg-tekst); border-color: rgba(255,255,255,.16); }
.tg__vizin canvas { width: 100%; height: auto; display: block; }
.tg__maat { position: absolute; left: .8rem; bottom: .8rem; padding: .3rem .7rem;
            border-radius: 8px; background: rgba(8,9,11,.62); backdrop-filter: blur(6px);
            font-family: var(--mono); font-size: .74rem; color: #fff; }
.tg__onder { margin-top: .8rem; font-size: .88rem; color: var(--tg-tekst-2); }

.tg-grp { margin-bottom: 1.5rem; }
.tg-grp__h { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem;
             font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tg-tekst-3); }
.tg-grp__h b { color: var(--accent); font-family: var(--mono); }
.tg-tiles { display: grid; gap: .5rem;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }

.tg-opt { position: relative; display: flex; flex-direction: column; gap: .18rem;
          padding: .7rem .8rem; cursor: pointer;
          border: 1px solid var(--tg-lijn); border-radius: 11px;
          background: rgba(255,255,255,.02);
          transition: border-color var(--snel, .16s) var(--ease), background var(--snel, .16s) var(--ease); }
.tg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tg-opt b { font-size: .9rem; color: var(--tg-tekst); font-weight: 600; }
.tg-opt span:not(.tg-sw):not(.tg-maatje) { font-size: .76rem; color: var(--tg-tekst-3); line-height: 1.4; }
.tg-opt:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.tg-opt.is-on { border-color: rgba(201,164,95,.55); background: rgba(201,164,95,.08); }
.tg-opt.is-on b { color: var(--acc-diep, var(--accent)); }
.tg-opt--kort { align-items: center; text-align: center; }
.tg-opt--sw, .tg-opt--check { flex-direction: row; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tg-opt--check span { width: 100%; }
.tg-sw { flex: none; width: 22px; height: 22px; border-radius: 6px;
         border: 1px solid rgba(255,255,255,.22); }
.tg-maatje { display: block; width: 34px; border: 1.5px solid var(--tg-tekst-3);
             border-radius: 3px; margin-bottom: .25rem; }
.tg-opt.is-on .tg-maatje { border-color: var(--accent); }

/* de badge komt uit de gedeelde opmaak en moet hier binnen het kader blijven */
/* het beeld kan nu ook lichte tegels tonen, dus het label heeft een eigen
   ondergrond nodig — anders valt witte tekst weg op een witte vloer */
.tg__vizin .live { position: absolute; left: .8rem; bottom: .8rem; z-index: 2;
                   background: rgba(10,10,12,.58); backdrop-filter: blur(7px);
                   padding: .34rem .62rem; border-radius: 8px; color: #fff; }
.tg__maat { left: auto; right: .8rem; z-index: 2; }
.tg__prijs { margin-top: 1rem; padding: 1.1rem;
             border: 1px solid var(--tg-lijn); border-radius: var(--r-groot, 18px);
             background: var(--tg-vlak); box-shadow: var(--schaduw-2); }
.tg__prijsrij { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tg__prijsrij span { font-size: .82rem; color: var(--tg-tekst-3); text-transform: uppercase; letter-spacing: .07em; }
.tg__prijsrij b { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--tg-tekst);
                  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tg__prijssub { margin-top: .3rem; font-size: .8rem; color: var(--tg-tekst-3); }
.tg__knoppen { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.tg__noot { margin-top: .8rem; font-size: .76rem; color: var(--tg-tekst-3); line-height: 1.5; }

/* De navigatiebalk kreeg er een menu bij (Verbouwen). De actieknop rechts
   mag daardoor niet over twee regels breken; op mobiel staat hij toch al
   uit, dus dit hoeft niet achter een media-query. */
.nav__cta .nav__demo { white-space: nowrap; }

/* Beeldmateriaal niet versleepbaar: drempel tegen achteloos kopiëren van
   renders. Tekstselectie blijft overal gewoon werken. */
img, video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* ---------- zwevende WhatsApp-knop ----------
   Bouwbedrijven appen liever dan mailen. De knop is bewust
   WhatsApp-groen en niet goud: herkenbaarheid wint hier van huisstijl. */
.nx-wa {
  position: fixed; right: clamp(.9rem, 2.5vw, 1.6rem); bottom: clamp(.9rem, 2.5vw, 1.6rem);
  z-index: 250;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform var(--snel) var(--ease), box-shadow var(--snel) var(--ease);
}
.nx-wa:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.nx-wa svg { display: block; }
@media print { .nx-wa { display: none; } }

/* ---------- telefoonnummer in de balk ----------
   Het nummer stond alleen in de footer en in de JSON-LD. Bouwbedrijven
   bellen liever dan dat ze een formulier invullen, en wie wil bellen scrolt
   niet eerst naar beneden op zoek naar een nummer. Vanaf de breedte waarop
   het menu weer uitklapt staat het dus in de balk zelf; daaronder neemt de
   vaste balk onderin het bellen over, zodat het nummer nooit twee keer in
   beeld staat. */
.nav__tel {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-2); text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__tel svg { width: 14px; height: 14px; flex: none; opacity: .7; }
.nav__tel:hover { color: var(--accent); background: rgba(255,255,255,.05); }
.nav__tel:hover svg { opacity: 1; }
@media (max-width: 900px) { .nav__tel { display: none; } }

/* ---------- vaste balk onderin op mobiel ----------
   Op een telefoon is de zwevende WhatsApp-knop te weinig: bellen is voor deze
   doelgroep de kortste route en die zat nergens binnen bereik. Twee even
   brede knoppen, altijd in beeld, met ruimte voor de home-indicator van iOS.
   Boven 900px verdwijnt de balk en neemt de zwevende knop het weer over. */
.ng-mobielbalk {
  position: fixed; inset: auto 0 0 0;
  z-index: 240;
  display: none;
  gap: .5rem;
  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10,10,13,.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--line);
}
.ng-mobielbalk a {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 46px;
  padding: .6rem .8rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 600; letter-spacing: -.006em;
  text-decoration: none;
}
.ng-mobielbalk svg { width: 17px; height: 17px; flex: none; }
.ng-mobielbalk__bel {
  background: var(--goud-metaal); background-size: 200% 200%;
  color: #1B1305;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--schaduw-1);
  font-variant-numeric: tabular-nums;
}
/* Wit op WhatsApp-groen haalt 1,98:1 en zakte door elke Lighthouse-
   toegankelijkheidsmeting heen. De merkkleur blijft staan; de tekst wordt
   donker, net als de belknop ernaast, en haalt daarmee 9,97:1. */
.ng-mobielbalk__wa { background: #25D366; color: #0A0A0D; }

@media (max-width: 900px) {
  .ng-mobielbalk { display: flex; }
  .nx-wa { display: none; }
  /* de balk mag de laatste regel van de footer niet afdekken */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
/* Negenentwintig pagina's hebben een eigen .actiebalk onderaan: vast,
   bottom: 0, z-index 200. Deze balk staat op z-index 240 en legde zich er
   dus overheen - van een knop van 52px hoog bleef 9px zichtbaar, en dat is
   precies de primaire CTA van die pagina. De pagina-eigen balk wint, want
   die noemt de concrete actie ("Stel uw badkamer samen") en heeft zelf al
   een belknop. Browsers zonder :has() negeren deze regel en houden het
   gedrag van hiervoor. */
body:has(.actiebalk) .ng-mobielbalk { display: none !important; }

@media print { .ng-mobielbalk { display: none !important; } }

/* ---------- terugbelblok ----------
   Stond er niet: op alle verkooppagina's samen stond geen enkel formulier, en
   iedereen werd doorgestuurd naar contact.html - precies op het moment dat
   iemand overtuigd is. Dit blok vraagt drie velden. Meer niet: elk extra veld
   kost aanvragen, en de rest halen we in het gesprek op.

   Het is bewust een <div> en geen <section>: de secties op de pagina wisselen
   via :nth-of-type van tint, dus een extra <section> ertussen zou de hele
   pagina eronder van kleur laten wisselen. */
.ng-terugbel {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--tint);
  padding-block: clamp(3.5rem, 8vh, 5.5rem);
}
.ng-terugbel__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .ng-terugbel__in { grid-template-columns: 1fr; } }

.ng-terugbel__tekst .eyebrow { margin-bottom: .9rem; }
.ng-terugbel__tekst h2 { max-width: 15em; }
.ng-terugbel__tekst > p { margin-top: .9rem; max-width: 34em; }
.ng-terugbel__punten {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: .6rem;
}
.ng-terugbel__punten li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .92rem; color: var(--text-2);
}
.ng-terugbel__punten svg { width: 15px; height: 15px; flex: none; margin-top: .22rem; color: var(--accent); }
.ng-terugbel__zelf {
  margin-top: 1.8rem;
  font-size: .9rem; color: var(--text-3);
}
.ng-terugbel__zelf a {
  color: var(--text); text-decoration: none;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(201,164,95,.4);
}
.ng-terugbel__zelf a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.ng-terugbel__kaart { padding: clamp(1.4rem, 3.5vw, 1.9rem); }
.ng-terugbel__kop {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3);
  margin-bottom: 1.2rem;
}
.ng-terugbel form { display: grid; gap: .95rem; }
.ng-terugbel .ng-veld { display: grid; gap: .38rem; }
.ng-terugbel .ng-veld label {
  font-size: .78rem; font-weight: 500; color: var(--text-2);
  letter-spacing: -.004em;
}
.ng-terugbel input[type="text"],
.ng-terugbel input[type="tel"] {
  width: 100%;
  padding: .78rem .9rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-400);
  border-radius: 9px;
  color: var(--text);
  font: inherit; font-size: .95rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
/* De placeholder volgt de tekstkleur van de pagina. Hard gecodeerd wit werkte
   alleen op de donkere pagina's; op de lichte thema's was hij onleesbaar. */
.ng-terugbel input::placeholder { color: var(--text-3); opacity: .65; }
.ng-terugbel input:focus {
  outline: none;
  border-color: rgba(201,164,95,.55);
  box-shadow: 0 0 0 3px rgba(201,164,95,.14);
}
.ng-terugbel input:user-invalid { border-color: rgba(248,113,113,.55); }
.ng-terugbel__verstuur { width: 100%; margin-top: .2rem; }
.ng-terugbel__verstuur[disabled] { opacity: .6; pointer-events: none; }
.ng-terugbel__noot { margin-top: .1rem; font-size: .76rem; color: var(--text-3); line-height: 1.55; }
.ng-terugbel__honeypot {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
/* bevestiging na verzenden - vervangt het formulier in dezelfde kaart */
.ng-terugbel__klaar h3 { font-size: 1.25rem; letter-spacing: -.02em; margin-top: .6rem; }
.ng-terugbel__klaar p { margin-top: .7rem; font-size: .92rem; color: var(--text-2); }

/* ---------- probleem tegenover oplossing ----------
   De homepage begon met wat we bouwen. Een bezoeker die nog niet weet dat hij
   een probleem heeft, herkent zich daar niet in. Dit blok zet eerst de dag van
   nu naast de dag met een configurator: twee kolommen, links wat het kost,
   rechts wat het wordt.

   Bewust een <div> en geen <section>: de secties op de pagina wisselen via
   :nth-of-type van tint, dus een extra <section> zou alles eronder omklappen. */
.ng-pijn {
  border-top: 1px solid var(--line);
  padding-block: clamp(4rem, 9vh, 6.5rem);
}
.ng-pijn__kop { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.ng-pijn__kop .eyebrow { margin-bottom: .9rem; }
.ng-pijn__kop p { margin-top: .9rem; }

.ng-pijn__paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  align-items: stretch;
}
@media (max-width: 860px) { .ng-pijn__paar { grid-template-columns: 1fr; } }

.ng-pijn__kaart {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
  border-radius: var(--r-groot);
  border: 1px solid var(--line);
  background: var(--ink-700);
}
/* de rechterkaart is waar het heen moet: gouden rand, lichtlijn, badge */
.ng-pijn__kaart--nieuw {
  background: var(--bg-raise);
  border-color: rgba(201,164,95,.28);
  box-shadow: var(--schaduw-2);
}
.ng-pijn__kaart--nieuw::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--r-groot) var(--r-groot) 0 0;
  background: var(--goud-lijn);
  opacity: .8;
  pointer-events: none;
}
.ng-pijn__badge {
  position: absolute; top: 0; right: clamp(1.5rem, 3.5vw, 2.2rem);
  transform: translateY(-50%);
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--goud-metaal);
  color: #1B1305;
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap;
}
.ng-pijn__label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3);
}
.ng-pijn__kaart h3 {
  margin-top: .9rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: -.02em; line-height: 1.25;
}
.ng-pijn__lijst {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .85rem;
}
.ng-pijn__lijst li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .95rem; line-height: 1.55; color: var(--text-2);
}
.ng-pijn__lijst svg { width: 16px; height: 16px; flex: none; margin-top: .2rem; }
.ng-pijn__kaart--nu .ng-pijn__lijst svg { color: var(--danger); opacity: .8; }
.ng-pijn__kaart--nieuw .ng-pijn__lijst svg { color: var(--accent); }
.ng-pijn__slot {
  margin-top: auto; padding-top: 1.6rem;
  font-size: .86rem; color: var(--text-3);
}
.ng-pijn__kaart--nieuw .ng-pijn__slot { color: var(--text-2); }
.ng-pijn__slot b { color: var(--text); font-weight: 600; }

/* ---------- branchepagina's ----------
   De blokken op de pagina's die per branche uitleggen wat een configurator
   doet. Ze staan in core.css en niet in de pagina zelf, omdat zeven pagina's
   ze delen en ze door scripts/branchepaginas.py gegenereerd worden. */

/* de keuzes die de klant in de configurator maakt: twee kolommen kaarten */
.ng-keuzes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(.8rem, 2vw, 1.1rem);
}
.ng-keuze {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-700);
  transition: border-color var(--normaal) var(--ease), background var(--normaal) var(--ease);
}
.ng-keuze:hover { border-color: rgba(201,164,95,.24); background: var(--bg-raise); }
.ng-keuze b {
  display: block;
  font-size: .95rem; font-weight: 600; color: var(--text);
  letter-spacing: -.012em;
}
.ng-keuze p { margin-top: .35rem; font-size: .88rem; line-height: 1.6; color: var(--text-2); }

/* lopende tekst in een leesbare kolom */
.ng-proza { max-width: 40rem; }
.ng-proza p { margin: 0 0 1.1em; line-height: 1.75; color: var(--text-2); }
.ng-proza p:last-child { margin-bottom: 0; }
.ng-proza a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(201,164,95,.3); }
.ng-proza a:hover { border-bottom-color: var(--accent); }
.ng-proza em { font-style: normal; color: var(--text); }

/* genummerde lijst met wat de prijs bepaalt */
.ng-drijvers {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: .1rem 2.5rem;
  max-width: 62rem;
}
.ng-drijvers li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--text-2);
}
.ng-drijver__nr { flex: none; font-size: .7rem; color: var(--accent); opacity: .75; }

/* verwante pagina's onderaan */
.ng-verwanten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .7rem;
}
.ng-verwant {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-700);
  color: var(--text-2); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  transition: border-color var(--normaal) var(--ease), color var(--normaal) var(--ease),
              transform var(--normaal) var(--ease);
}
.ng-verwant svg { width: 16px; height: 16px; flex: none; color: var(--accent); opacity: .7; }
.ng-verwant:hover {
  border-color: rgba(201,164,95,.3);
  color: var(--text);
  transform: translateY(-2px);
}
.ng-verwant:hover svg { opacity: 1; }

/* Kaartvariant voor de stadhubs: titel met een regel uitleg eronder, in
   plaats van twee spans naast elkaar. */
.ng-verwant--kaart {
  flex-direction: column; align-items: flex-start; gap: .25rem;
  color: var(--text);
}
.ng-verwant--kaart .ng-verwant__sub {
  font-size: .82rem; font-weight: 400; color: var(--text-2); line-height: 1.45;
}

/* een blok met sectie-afmetingen dat geen <section> is, zodat het de
   tintwisseling van .sectie:nth-of-type(even) niet omgooit */
.ng-blok {
  border-top: 1px solid var(--line);
  padding-block: clamp(4rem, 9vh, 6.5rem);
}
.ng-blok--tint { background: var(--tint); }

/* ---------- eigen reviews ----------
   Gevuld vanuit assets/reviews-ng.json door scripts/reviews.py. Staat dat
   bestand leeg, dan bestaan deze klassen nergens op de site - dat is bewust:
   liever geen reviewblok dan een score die niemand kan controleren. */
.ng-reviews__kop {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2.2rem, 5vh, 3.2rem);
}
.ng-reviews__score { display: grid; gap: .5rem; justify-items: flex-start; }
.ng-reviews__score p { font-size: .78rem; color: var(--text-3); }
.ng-review__sterren { display: inline-flex; gap: .15rem; color: var(--accent); }
.ng-review__sterren svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 1.4; }

.ng-reviews__lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(.8rem, 2vw, 1.1rem);
}
.ng-review {
  margin: 0;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raise);
  display: flex; flex-direction: column; gap: .9rem;
}
.ng-review blockquote {
  margin: 0;
  font-size: .92rem; line-height: 1.65; color: var(--text-2);
}
.ng-review blockquote::before { content: "\201C"; }
.ng-review blockquote::after { content: "\201D"; }
.ng-review figcaption {
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .85rem; font-weight: 600; color: var(--text);
}
.ng-review figcaption .mono { font-size: .68rem; font-weight: 400; color: var(--text-3); }

/* ---------- plaatsenlijst op de stadspagina's ----------
   De kernen en buurgemeenten die we bedienen. Bewust een rij losse woorden en
   geen opsomming met bolletjes: het is oriëntatie voor de lezer, geen lijst om
   af te vinken. */
.ng-plaatsen {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin-top: .9rem;
}
.ng-plaatsen span {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-700);
  font-size: .82rem; color: var(--text-2);
  white-space: nowrap;
}

/* ---------- branchekaarten ----------
   De tien website-voor-<branche>-pagina's verwijzen naar elkaar en naar hun
   pijler. Een kaart met vaknaam en één regel belofte, zodat de link ook voor
   de lezer ergens over gaat en niet alleen voor de zoekmachine. */
.ng-branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: .7rem;
}
.ng-branche {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .2rem 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-700);
  text-decoration: none;
  transition: border-color var(--normaal) var(--ease), transform var(--normaal) var(--ease);
}
.ng-branche b {
  font-size: .95rem; font-weight: 600; color: var(--text);
  letter-spacing: -.012em;
}
.ng-branche span {
  grid-column: 1; font-size: .82rem; color: var(--text-3); line-height: 1.45;
}
.ng-branche svg {
  grid-column: 2; grid-row: 1 / span 2;
  width: 16px; height: 16px; color: var(--accent); opacity: .7;
}
.ng-branche:hover { border-color: rgba(201,164,95,.3); transform: translateY(-2px); }
.ng-branche:hover svg { opacity: 1; }

/* ---------- galerij met renders ---------- */

/* De eerste plek op de site met srcset. De bronrenders zijn 1400x1050 JPEG van
   ruim 200 kB; op een telefoon wordt zo'n beeld op ongeveer 380 pixels breed
   getoond. Met scripts/beelden.py staan er WebP-varianten van 480, 800 en 1200
   naast, en die schelen per beeld 231 kB naar 27 kB. Vandaar srcset en sizes op
   elk beeld hieronder, en niet één bestand voor alle schermen. */
.ng-galerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .8rem;
}
.ng-galerij figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-700);
}
.ng-galerij img {
  display: block;
  width: 100%;
  height: auto;
  /* De verhouding vastzetten voorkomt dat de pagina verspringt terwijl de
     beelden binnenkomen; dat was op de configuratorpagina's goed voor een CLS
     van 0,59. Per galerij ingesteld, want de bronnen verschillen: de
     dakopbouwrenders zijn 4:3, de uitbouwrenders 3:2. Ze in dezelfde verhouding
     dwingen zou de daklijn afsnijden. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ink-700);
}
.ng-galerij--43 img { aspect-ratio: 4 / 3; }
.ng-galerij--32 img { aspect-ratio: 3 / 2; }
.ng-galerij--169 img { aspect-ratio: 16 / 9; }
.ng-galerij figcaption {
  padding: .6rem .8rem .7rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-2);
}
.sectie--licht .ng-galerij figure {
  border-color: var(--cream-line);
  background: var(--cream-2);
}
.sectie--licht .ng-galerij figcaption { color: var(--cream-ink-2); }

/* ---------- tussentijdse CTA ---------- */

.ng-tussencta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-groot);
  background: var(--bg-raise);
}
.ng-tussencta p { margin: 0; max-width: 46ch; }
.ng-tussencta b { display: block; color: var(--text); font-weight: 600; letter-spacing: -.012em; }
.ng-tussencta span { font-size: .86rem; color: var(--text-2); }
.sectie--licht .ng-tussencta {
  border-color: var(--cream-line);
  background: var(--cream-2);
}
.sectie--licht .ng-tussencta b { color: var(--cream-ink); }
.sectie--licht .ng-tussencta span { color: var(--cream-ink-2); }

/* ---------- kennisbankartikel ---------- */

/* Een artikel is om te lézen, en dan is een volle contentbreedte tegen je in
   aan het werk. 68 tekens is de bovengrens waarbij het oog de volgende regel
   nog terugvindt zonder te zoeken. */
.ng-artikel { max-width: 68ch; }
.ng-artikel p { margin: 0 0 1rem; line-height: 1.72; }
.ng-artikel p:last-child { margin-bottom: 0; }
.ng-artikel .h2 { margin-bottom: .9rem; }

/* De hulplijn halverwege een kennisbankartikel (scripts/kennisbank.py).
   Bewust geen tweede knopblok: één actie onderaan én dezelfde actie in het
   midden leest als aandringen. Dit is een andere deur - bellen - en hij hoort
   er dus ook anders uit te zien: een regel tekst met een streep ernaast, geen
   kaart die het lezen onderbreekt. */
.ng-hulplijn {
  border-left: 3px solid var(--accent);
  padding: .15rem 0 .15rem 1rem;
  color: var(--text-2);
  font-size: .96rem;
}
.ng-hulplijn a { font-weight: 700; white-space: nowrap; }

/* Het particuliere blok op de contactpagina (zie contact.html, hero). Een
   kaart met een gouden rand links, zodat het leest als een aparte deur en niet
   als een derde alinea van de zakelijke intro. */
.ng-particulier {
  margin: 1.6rem auto 0;
  text-align: left;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: var(--surface, rgba(255,255,255,.03));
  max-width: 64ch;
}
.ng-particulier p { margin: 0; }
.ng-particulier__acties { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem !important; }

.ng-inhoud {
  margin: 0; padding-left: 1.2rem;
  display: grid; gap: .35rem;
  font-size: .92rem; color: var(--text-2);
}
.ng-inhoud a { color: var(--text-2); text-underline-offset: 3px; }
.ng-inhoud a:hover { color: var(--accent); }

.ng-lijst { margin: 0 0 1rem; padding-left: 1.15rem; display: grid; gap: .45rem; line-height: 1.6; }
.ng-lijst li::marker { color: var(--accent); }

/* Een brede tabel mag scrollen binnen zijn eigen kader; de pagina zelf mag
   nooit horizontaal schuiven. */
.ng-tabelwrap { overflow-x: auto; margin: 0 0 1rem; }
.ng-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 30rem; }
.ng-tabel caption {
  text-align: left; padding-bottom: .6rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3);
}
.ng-tabel th, .ng-tabel td {
  padding: .6rem .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.ng-tabel thead th {
  font-weight: 600; color: var(--text);
  border-bottom-color: var(--line-strong);
}
.ng-tabel tbody th { font-weight: 500; color: var(--text); }
.ng-tabel td { color: var(--text-2); }
.ng-tabelnoot { font-size: .8rem; color: var(--text-3); line-height: 1.55; }

.sectie--licht .ng-tabel th, .sectie--licht .ng-tabel td { border-bottom-color: var(--cream-line); }
.sectie--licht .ng-tabel thead th, .sectie--licht .ng-tabel tbody th { color: var(--cream-ink); }
.sectie--licht .ng-tabel td { color: var(--cream-ink-2); }