@charset "UTF-8";
/* ==================================================================
   TKA Electro — volledig ontwerpsysteem
   Vijf pagina's, één stylesheet, negentien componenten.

    1. Tokens
    2. Reset en basis
    3. Typografie
    4. Browservlakken
    5. Container en sectieritme
    6. Knoppen
    7. Header en navigatie
    8. Hero
    9. Kenmerkenrij
   10. Dienstlijst
   11. Clusterbanden
   12. Uitgelicht werk
   13. Cijferstrook
   14. Reviews
   15. Vragen
   16. Stappen
   17. Projecten, filters en lightbox
   18. Over ons
   19. Contact en formulier
   20. CTA-band
   21. Voettekst
   22. Mobiele actiebalk
   23. Paginakop
   24. Beweging
   25. Print
================================================================== */

/* ------------------------------------------------------------------
   1. TOKENS

   Het palet is uit het logo gemeten, niet uit het merkblad
   overgenomen. Het logo is champagne-goud met een verloop van
   #7E7248 via #E2C67D naar #F7E599; #E2C67D is de mediaan en
   daarmee de merkkleur.

   Twee regels houden het systeem sluitend:
   a) Op donker is goud tekst — #E2C67D op #0B0B0C haalt 11,81:1.
   b) Op licht is goud nooit een letter — daar zakt het naar 1,57:1.
      Gouden tekst op papier wordt --goud-tekst (6,36:1).
   Een gouden knop draagt altijd donkere tekst: wit haalt 1,67:1.
------------------------------------------------------------------ */
:root {
  /* donkere vlakken */
  --ink-900: #0B0B0C;
  --ink-800: #131417;
  --ink-700: #1C1E22;
  --ink-600: #2A2D33;
  --ink-500: #3A3E45;

  /* het merkgoud en zijn afgeleiden */
  --goud-300: #F7E599;
  --goud-400: #E2C67D;
  --goud-500: #C9A95F;
  --goud-700: #7E7248;
  --goud-tekst: #6B5A22;
  --goud-vlak: #F5EFDF;
  /* Voor de dienstensectie op warme crème. Het merkgoud #E2C67D haalt
     daar 1,53:1 en kan er dus geen letter zijn; --goud-diep is de
     verdiepte variant die 5,16:1 haalt. --goud-lijn is puur decoratief
     (icoonranden, 2,54:1) en draagt nooit tekst. */
  --goud-diep: #7E6428;
  --goud-lijn: #B8975A;
  --papier-warm: #F9F5EC;

  /* lichte vlakken */
  --papier: #FAF8F4;
  --papier-2: #F1EEE7;
  --wit: #FFFFFF;
  --lijn: #E4DFD5;
  --lijn-sterk: #CFC7B8;

  /* tekst */
  --tekst-op-donker: #F5F3EF;
  --tekst-op-donker-zacht: #A8A6A0;
  --tekst-op-licht: #17181A;
  --tekst-op-licht-zacht: #5C5F66;

  /* CONTEXTTOKENS — hier zit de kern van het systeem.
     Componenten verwijzen nooit rechtstreeks naar "op donker" of
     "op licht", maar naar --tekst-zacht, --goud-leesbaar, --lijn-hier
     en --bliksem. De omhullende sectie zet die vier om (zie §5), dus
     één component werkt op elke achtergrond zonder dat er per
     sectie een override bij moet.

     Het alternatief — voor elk onderdeel een `.donker .x`-regel —
     is precies waar het eerder fout ging: de hero heeft geen klasse
     .donker, dus viel de bijtekst daar terug op de lichte variant en
     zakte het contrast naar 2,78:1. */
  --tekst-zacht: var(--tekst-op-licht-zacht);
  --goud-leesbaar: var(--goud-tekst);
  --lijn-hier: var(--lijn);
  --lijn-hier-sterk: var(--lijn-sterk);
  --bliksem: var(--bliksem-donker);

  /* ruimte — raster van 8px */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 2.5rem;
  --s7: 3.5rem;
  --s8: 4.5rem;
  --s9: 5.5rem;
  --s10: 7rem;

  /* radii — bewust bescheiden, dit is geen consumenten-app */
  --r-s: 6px;
  --r: 10px;
  --r-l: 14px;
  --r-xl: 20px;
  --r-2xl: 26px;

  /* schaduw — warm getint uit het goud, altijd offset én blur */
  --schaduw-s: 0 1px 2px rgba(43, 34, 12, .05), 0 2px 8px rgba(43, 34, 12, .04);
  --schaduw:   0 2px 4px rgba(43, 34, 12, .05), 0 10px 26px rgba(43, 34, 12, .07);
  --schaduw-l: 0 4px 10px rgba(43, 34, 12, .06), 0 20px 44px rgba(43, 34, 12, .10);

  /* beweging */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* maten */
  --container: 1200px;
  --container-smal: 760px;
  --container-breed: 1400px;
  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --kop-hoogte: 76px;

  /* het bliksemmotief uit de T van het logo, als lijstbolletje */
  --bliksem-goud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E2C67D'%3E%3Cpath d='M14.9 1.5 3.2 14.2h5.6L7.4 22.5 20.8 9.1h-6.2z'/%3E%3C/svg%3E");
  --bliksem-donker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B5A22'%3E%3Cpath d='M14.9 1.5 3.2 14.2h5.6L7.4 22.5 20.8 9.1h-6.2z'/%3E%3C/svg%3E");

  /* Fijne korrel over de donkere vlakken. Een vlak van 1400 bij 600
     pixels in één zwart zonder korrel gaat op veel schermen banden
     tonen; deze ruis is te zwak om als textuur op te vallen en net
     genoeg om dat te voorkomen. */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   2. RESET EN BASIS
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kop-hoogte) + var(--s4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst-op-licht);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Elke component die display zet, overrulet daarmee het
   hidden-attribuut uit de browserstijl. Zonder deze regel stonden
   de carrouselpijlen zonder JavaScript gewoon in beeld zonder iets
   te doen. Dit geldt voor alles wat we op hidden zetten: de
   filterbalk, de lege staat en de pijlen. */
[hidden] { display: none !important; }

hr { border: 0; height: 1px; background: var(--lijn); margin: var(--s6) 0; }

/* De sprong-link is de eerste tabstop op elke pagina. */
.sprong {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  z-index: 200;
  padding: var(--s2) var(--s4);
  background: var(--goud-400);
  color: var(--ink-900);
  font-weight: 600;
  border-radius: var(--r-s);
  /* transform en niet top: `top` animeren dwingt layout af, transform
     loopt op de compositor. */
  transform: translateY(calc(-100% - var(--s4)));
  transition: transform 160ms var(--ease-out);
}
.sprong:focus { transform: none; }

/* ------------------------------------------------------------------
   3. TYPOGRAFIE

   Fraunces voor koppen — warm-transitionele serif met bracketed
   schreven, dezelfde letterbouw als het logo. DM Sans voor alles
   wat gelezen of aangeklikt wordt; dat font stond al in het
   merkblad van de klant.
------------------------------------------------------------------ */
h1, h2, h3, h4, .serif {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.55rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: 0; }

p { margin: 0; max-width: 68ch; }

.lead {
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3rem);
  line-height: 1.55;
  max-width: 60ch;
  color: var(--tekst-zacht);
}

/* Meer lucht boven een kop dan eronder. */
* + h2 { margin-top: var(--s7); }
h2 + p, h2 + .lead { margin-top: var(--s3); }
* + h3 { margin-top: var(--s5); }
h3 + p { margin-top: var(--s2); }
p + p { margin-top: var(--s3); }

.goud { color: var(--goud-leesbaar); }

/* Klein kapitaalachtig label — uitsluitend binnen componenten
   (kenmerkenrij, cijfers, formulierlabels), nooit boven een kop. */
.klein-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.tabelcijfers { font-variant-numeric: tabular-nums; }

/* Kop die de documentstructuur sluitend houdt zonder in beeld te
   komen. De kenmerkenrij en de cijferstrook hebben in het ontwerp
   geen zichtbare kop, maar een sectie zonder kop laat een gat in de
   koppenlijst waarop een schermlezergebruiker navigeert. */
.sr-only-kop {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   4. BROWSERVLAKKEN

   De onderdelen die je niet zelf tekent horen ook bij het ontwerp.
   Selectie, caret, scrollbar en focusring komen hier uit het palet
   in plaats van uit de browserstandaard.
------------------------------------------------------------------ */
::selection { background: var(--goud-400); color: var(--ink-900); }

:root { caret-color: var(--goud-tekst); accent-color: var(--goud-tekst); }
.donker, .donker-2 { caret-color: var(--goud-400); accent-color: var(--goud-400); }

* { scrollbar-width: thin; scrollbar-color: var(--lijn-sterk) var(--papier-2); }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--papier-2); }
*::-webkit-scrollbar-thumb {
  background: var(--lijn-sterk);
  border: 3px solid var(--papier-2);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--goud-500); }

:focus-visible {
  outline: 3px solid var(--goud-tekst);
  outline-offset: 2px;
  border-radius: 3px;
}
.donker :focus-visible, .donker-2 :focus-visible,
.kop :focus-visible, .voet :focus-visible, .actiebalk :focus-visible {
  outline-color: var(--goud-400);
}

/* ------------------------------------------------------------------
   5. CONTAINER EN SECTIERITME

   Witte kaarten leven op --papier-2, fotosecties op --papier, en
   de zwaarste momenten op --ink-900. De home doorloopt:
   donker → donker-2 → papier → donker → papier-2 → donker → papier
   → donker.
------------------------------------------------------------------ */
/* min-width:0 op raster- en flexitems. Zonder dit krijgt elk item
   min-width:auto en duwt de intrinsieke minimumbreedte van de
   inhoud de kolom open — bij een <input type="file"> is dat zo'n
   250px, en dan loopt de pagina op 320px over. */
.contact > *, .velden > *, .hero__binnen > *, .band__binnen > *,
.uitgelicht > *, .overons > *, .ctaband__binnen > *, .sectiekop > *,
.route > span, .kenmerk > div, .lightbox__voet > div { min-width: 0; }

.veld input, .veld select, .veld textarea { min-width: 0; max-width: 100%; }

.omhulsel { width: 100%; margin-inline: auto; max-width: var(--container); padding-inline: var(--rand); }
.omhulsel-smal { width: 100%; margin-inline: auto; max-width: var(--container-smal); padding-inline: var(--rand); }

/* Ruimere container voor secties met vier kaarten naast elkaar; in de
   standaardcontainer worden die kaarten smal en hoog. */
.omhulsel--breed { max-width: var(--container-breed); }

.sectie { padding-block: clamp(3.5rem, 6vw, 6rem); }
.sectie-kort { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

/* DE DONKERE CONTEXTEN — de enige plek waar de contexttokens
   omgezet worden. Elke donkere sectie hoort in deze lijst; wie er
   een nieuwe donkere sectie bij maakt, zet de klasse hier bij en
   alle componenten erin kloppen meteen. */
.donker,
.donker-2,
.hero,
.paginakop,
.ctaband,
.beeldband,
.totaal,
.voet,
.formulier,
.lightbox,
.werkgebied {
  --tekst-zacht: var(--tekst-op-donker-zacht);
  --goud-leesbaar: var(--goud-400);
  --lijn-hier: var(--ink-600);
  --lijn-hier-sterk: var(--ink-500);
  --bliksem: var(--bliksem-goud);
}

.donker { background: var(--ink-900); color: var(--tekst-op-donker); }
.donker-2 { background: var(--ink-800); color: var(--tekst-op-donker); }
/* Deze secties dragen hun eigen achtergrond (of erven --ink-900),
   maar moeten wel de lichte tekstkleur zetten. Vergeten worden ze
   snel: de kop in de CTA-band viel eerder terug op de donkere
   bodykleur en was daardoor vrijwel onzichtbaar op het beeld. */
.hero, .paginakop, .ctaband, .beeldband { color: var(--tekst-op-donker); }
.ctaband h2, .beeldband p { color: var(--tekst-op-donker); }
.licht { background: var(--papier); color: var(--tekst-op-licht); }
.licht-2 { background: var(--papier-2); color: var(--tekst-op-licht); }

/* Een lichte sectie binnen een donkere pagina (of omgekeerd) zet de
   tokens terug. Nodig omdat .licht ook ná .donker in de DOM kan
   staan zonder dat de tokens zichzelf herstellen. */
.licht, .licht-2 {
  --tekst-zacht: var(--tekst-op-licht-zacht);
  --goud-leesbaar: var(--goud-tekst);
  --lijn-hier: var(--lijn);
  --lijn-hier-sterk: var(--lijn-sterk);
  --bliksem: var(--bliksem-donker);
}

/* Korrel op de grote donkere vlakken, tegen banding. Puur
   decoratief en dus onzichtbaar voor de muis en de schermlezer. */
.donker, .donker-2, .hero, .paginakop, .voet, .ctaband { position: relative; }
.donker::after, .donker-2::after, .hero::after,
.paginakop::after, .voet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--korrel);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
/* De inhoud boven de korrel. Uitgezonderd: de achtergrondfoto, het
   leesverloop en het watermerk, die horen er juist onder en dragen
   hun eigen negatieve z-index.

   Let op de specificiteit: :not() telt mee, dus deze regel wint het
   van een losse .hero__foto verderop. Wie hier een klasse hernoemt,
   moet hem hier ook uitzonderen — anders wordt de achtergrondfoto
   ineens een gewoon blok in de grid en schiet de hero uit zijn
   hoogte. */
.donker > *, .donker-2 > *, .voet > *,
.hero > *:not(.hero__foto):not(.hero__verloop),
.totaal > *:not(.totaal__foto):not(.totaal__verloop),
.paginakop > *:not(.paginakop__foto):not(.paginakop__verloop):not(.paginakop__watermerk) {
  position: relative;
  z-index: 1;
}

.donker h1, .donker h2, .donker h3, .donker h4,
.donker-2 h1, .donker-2 h2, .donker-2 h3, .donker-2 h4 { color: var(--tekst-op-donker); }
.donker p, .donker-2 p { color: var(--tekst-zacht); }

/* Sectiekop: kop links, bijtekst of link rechts. */
.sectiekop {
  display: grid;
  gap: var(--s3) var(--s7);
  align-items: end;
  margin-bottom: var(--s6);
}
@media (min-width: 860px) {
  .sectiekop { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .sectiekop > :last-child:not(:first-child) { justify-self: end; text-align: right; }
}
.sectiekop h2 { margin-top: 0; }
.sectiekop p { margin-top: var(--s2); }

/* Haarlijn met bliksem in het midden — sectiescheiding. */
.scheiding {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--goud-700);
}
.scheiding::before, .scheiding::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.scheiding svg { width: 14px; height: 14px; color: var(--goud-400); }

/* ------------------------------------------------------------------
   6. KNOPPEN

   Gouden vulling draagt altijd donkere tekst (11,81:1). Minimale
   hoogte 52px, groot formaat 58px — ruim boven de 44px klikdoel-eis.
------------------------------------------------------------------ */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease, transform 160ms var(--ease-out),
              box-shadow 200ms ease;
}
.knop svg { width: 18px; height: 18px; }
.knop:active { transform: scale(0.975); }

.knop--goud { background: var(--goud-400); color: var(--ink-900); }
.knop--lijn { background: transparent; color: var(--goud-400); border-color: var(--goud-700); }
.knop--donker { background: var(--ink-900); color: var(--tekst-op-donker); }
.knop--licht-lijn { background: transparent; color: var(--goud-tekst); border-color: var(--lijn-sterk); }
.knop--groot { min-height: 58px; padding-inline: var(--s6); font-size: 1.0625rem; }

/* Een knop over de volle breedte hoeft geen nowrap: hij is al zo
   breed als zijn container. Met nowrap plus ruime zijpadding liep
   "Verstuur de aanvraag" op 320px uit zijn kader. */
.knop--vol {
  width: 100%;
  padding-inline: var(--s3);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
  .knop--goud:hover { background: var(--goud-300); box-shadow: var(--schaduw); }
  .knop--lijn:hover { border-color: var(--goud-400); background: rgba(226, 198, 125, .08); }
  .knop--donker:hover { background: var(--ink-700); }
  .knop--licht-lijn:hover { border-color: var(--goud-500); background: var(--goud-vlak); }
}

.knop[aria-disabled="true"], .knop:disabled { opacity: .55; pointer-events: none; }

/* Tekstlink met pijl die bij hover een tik naar rechts geeft. */
.pijllink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--s2);
  font-weight: 600;
  text-decoration: none;
  color: var(--goud-leesbaar);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.pijllink svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pijllink:hover { border-color: currentColor; }
  .pijllink:hover svg { transform: translateX(3px); }
}

/* ------------------------------------------------------------------
   7. HEADER EN NAVIGATIE

   De header is altijd --ink-900. Omdat de hero dat ook is, lopen ze
   naadloos in elkaar over — het effect van de mockup, zonder
   transparantie die zonder JavaScript zou breken. Voorbij de hero
   verschijnt een gouden haarlijn zodat de balk los komt van lichte
   inhoud; dat is de enige taak van JavaScript hier.

   Het menu is een <details>-disclosure: het werkt zonder JS, is
   toetsenbordbedienbaar en wordt correct aangekondigd.
------------------------------------------------------------------ */
.kop {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink-900);
  color: var(--tekst-op-donker);
  border-bottom: 1px solid transparent;
  transition: background-color 260ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

/* Bovenaan de pagina loopt de achtergrondfoto door achter de balk. Het
   zwarte vlak is hier de STANDAARD en niet de uitzondering: zonder
   JavaScript staat de balk dus gewoon dicht, en blijft de navigatie
   leesbaar zodra je op een lichte sectie komt. JavaScript zet
   data-boven zolang je bovenaan bent en haalt het vlak dan weg.

   In plaats van volledig transparant een verloop dat naar beneden
   uitdooft: de foto blijft zichtbaar, en de navigatie houdt contrast
   ook boven het lichte deel van het beeld. */
.kop[data-boven] {
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    rgba(11, 11, 12, .78) 0%,
    rgba(11, 11, 12, .52) 55%,
    rgba(11, 11, 12, 0) 100%);
  /* background-origin is standaard de padding-box, en de achtergrond
     herhaalt standaard. Zonder deze twee regels toont de 1px randrij
     opnieuw het begin van het verloop: een donkere streep onder de
     balk, precies over de foto heen. */
  background-origin: border-box;
  background-repeat: no-repeat;
  border-bottom-color: transparent;
  box-shadow: none;
}
.kop[data-gescrold] {
  /* border-bottom-color: var(--goud-700); */
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

/* De balk loopt tot de schermrand in plaats van tot de container:
   logo uiterst links, offerteknop uiterst rechts. De navigatie houdt
   zichzelf in het midden via margin-inline: auto. */
.kop__binnen {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--kop-hoogte);
  padding-inline: clamp(2.75rem, 4.2vw, 3.5rem);
}

.kop__logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.kop__logo img { height: 38px; width: auto; }
@media (max-width: 400px) { .kop__logo img { height: 34px; } }

.kop__nav { display: none; }
.kop__acties { display: none; }

/* Telefoonlink in de balk — het nummer staat in de link, niet ernaast. */
.telefoonlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--tekst-op-donker);
  border-radius: var(--r-s);
  transition: color 200ms ease, background-color 200ms ease;
}
.telefoonlink svg { width: 17px; height: 17px; color: var(--goud-400); }
@media (hover: hover) and (pointer: fine) {
  .telefoonlink:hover { color: var(--goud-400); background: rgba(226, 198, 125, .07); }
}

/* --- het uitklapmenu (mobiel en tablet) ---

   Een lade die van links inschuift, met icoontegels, een gouden
   CTA-pil en een hulpblok onderin — hetzelfde patroon als de
   gerrie-build, in het palet van TKA.

   De motor blijft <details>/<summary>: zonder JavaScript opent en
   sluit het menu gewoon. De sluitknop in de ladekop is de enige
   toevoeging die JS nodig heeft en staat daarom op hidden; wie geen
   JS heeft, sluit met het kruisje in de balk, dat boven de overlay
   blijft staan. */
.menu { position: relative; margin-left: auto; }

.menu > summary {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-s);
  cursor: pointer;
  list-style: none;
  color: var(--tekst-op-donker);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }
.menu > summary svg { width: 22px; height: 22px; }
.menu > summary .menu__sluit { display: none; }
.menu[open] > summary .menu__open { display: none; }
.menu[open] > summary .menu__sluit { display: block; }
.menu[open] > summary { border-color: var(--goud-700); background: var(--ink-700); color: var(--goud-400); }

/* Met JavaScript sluit je met de ronde knop in de ladekop, dus dan
   mag het kruisje in de balk onder de verduistering verdwijnen —
   anders staan er twee sluitknoppen over elkaar. Zonder JS blijft
   het kruisje bovenop, want dan is het de enige manier om te
   sluiten. */
.js .menu[open] > summary { z-index: 0; }

/* De verduistering achter de lade. */
.menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(6, 6, 7, .62);
  backdrop-filter: blur(2px);
}

.menu__paneel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 2;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: clamp(1.4rem, 5vw, 1.9rem) clamp(1.25rem, 4.5vw, 1.6rem) calc(clamp(1.5rem, 5vw, 2rem) + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(226, 198, 125, .10), transparent 55%),
    var(--ink-900);
  border-right: 1px solid var(--ink-600);
  box-shadow: 30px 0 80px rgba(0, 0, 0, .55);
  overflow-y: auto;
  scrollbar-width: none;
}
.menu__paneel::-webkit-scrollbar { display: none; }

/* Inschuiven vanaf links. */
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__paneel { animation: lade-in 460ms cubic-bezier(0.16, 1, 0.3, 1); }
  .menu[open] .menu__overlay { animation: lade-waas 300ms ease; }
  @keyframes lade-in { from { transform: translateX(-100%); } to { transform: none; } }
  @keyframes lade-waas { from { opacity: 0; } to { opacity: 1; } }
}

/* --- kop van de lade --- */
.menu__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.menu__kop img { height: 34px; width: auto; }
.menu__merk { display: block; text-decoration: none; }
.menu__payoff {
  display: block;
  margin-top: var(--s2);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-op-donker-zacht);
}
.menu__dicht {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-600);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--tekst-op-donker-zacht);
  transition: background-color 200ms ease, color 200ms ease, transform 220ms var(--ease-out);
}
.menu__dicht svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .menu__dicht:hover { background: rgba(255, 255, 255, .1); color: var(--goud-400); transform: rotate(90deg); }
}

/* --- de menu-items --- */
.menu__lijst { display: flex; flex-direction: column; }
.menu__lijst a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 4px;
  border-bottom: 1px solid var(--ink-600);
  text-decoration: none;
}
.menu__lijst li:last-child a { border-bottom: 0; }

.menu__icoon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(226, 198, 125, .22);
  border-radius: 13px;
  background: rgba(226, 198, 125, .08);
  color: var(--goud-400);
  transition: background-color 200ms ease, transform 200ms ease;
}
.menu__icoon svg { width: 22px; height: 22px; }

.menu__label {
  flex: 1;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tekst-op-donker);
}
.menu__chev { flex: none; width: 18px; height: 18px; color: var(--ink-500); transition: transform 200ms ease, color 200ms ease; }
.menu__lijst a[aria-current="page"] .menu__label { color: var(--goud-400); }
.menu__lijst a[aria-current="page"] .menu__chev { color: var(--goud-400); }
@media (hover: hover) and (pointer: fine) {
  .menu__lijst a:hover .menu__icoon { background: rgba(226, 198, 125, .16); transform: scale(1.04); }
  .menu__lijst a:hover .menu__chev { color: var(--goud-400); transform: translateX(3px); }
}

/* Elk item schuift iets later in — de enige plek op deze site met een
   stagger, want hier ontstaat de lijst pas op het moment dat je hem
   opent. */
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__lijst a { animation: item-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .menu[open] .menu__lijst li:nth-child(1) a { animation-delay: 100ms; }
  .menu[open] .menu__lijst li:nth-child(2) a { animation-delay: 160ms; }
  .menu[open] .menu__lijst li:nth-child(3) a { animation-delay: 220ms; }
  .menu[open] .menu__lijst li:nth-child(4) a { animation-delay: 280ms; }
  .menu[open] .menu__lijst li:nth-child(5) a { animation-delay: 340ms; }
  .menu[open] .menu__cta { animation: item-in 420ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both; }
  @keyframes item-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
}

/* --- gouden CTA-pil --- */
.menu__cta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 54px;
  padding-inline: var(--s4);
  border-radius: 999px;
  background: var(--goud-400);
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.menu__cta span { flex: 1; }
.menu__cta svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .menu__cta:hover { background: var(--goud-300); }
}

/* --- hulpblok onderin --- */
.menu__hulp {
  margin-top: auto;
  padding: var(--s4);
  border: 1px solid var(--ink-600);
  border-radius: var(--r);
  background: var(--ink-800);
}
.menu__hulp strong { display: block; color: var(--tekst-op-donker); font-weight: 600; }
.menu__hulp > span { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--tekst-op-donker-zacht); }
.menu__hulp-acties { display: flex; gap: var(--s2); margin-top: var(--s3); }
.menu__hulp-acties a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-s);
  color: var(--goud-400);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.menu__hulp-acties svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  .menu__hulp-acties a:hover { border-color: var(--goud-700); background: rgba(226, 198, 125, .08); }
}

/* --- de balk op desktop --- */
@media (min-width: 1000px) {
  .menu { display: none; }
  .kop__nav { display: block; margin-inline: auto; }
  .kop__nav ul { display: flex; align-items: center; gap: var(--s2); }
  .kop__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s3);
    font-size: 0.9688rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--tekst-op-donker);
    border-radius: var(--r-s);
    transition: color 200ms ease, background-color 200ms ease;
  }
  .kop__nav a::after {
    content: '';
    position: absolute;
    left: var(--s3);
    right: var(--s3);
    bottom: 10px;
    height: 1px;
    background: var(--goud-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--ease-out);
  }
  .kop__nav a[aria-current="page"] { color: var(--goud-400); }
  .kop__nav a[aria-current="page"]::after { transform: scaleX(1); }
  .kop__acties { display: flex; align-items: center; gap: var(--s3); }
}
/* De offerteknop in de balk is een lijnknop: op de hero ligt hij over
   de foto, en een gouden vlak trekt daar alle aandacht weg van de kop.
   Het gevulde goud blijft staan waar het conversie moet doen — in de
   hero, de CTA-band en de mobiele actiebalk. */
.kop__acties .knop {
  min-height: 44px;
  padding-inline: var(--s4);
  font-size: 0.9375rem;
  background: transparent;
  color: var(--goud-400);
  border-color: var(--goud-500);
}
.kop__acties .knop svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .kop__acties .knop:hover {
    background: rgba(226, 198, 125, .10);
    border-color: var(--goud-300);
    color: var(--goud-300);
    box-shadow: none;
  }
}

@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .kop__nav a:hover { color: var(--goud-400); }
  .kop__nav a:hover::after { transform: scaleX(1); }
}

/* ------------------------------------------------------------------
   8. HERO

   Volledige schermhoogte, en de foto blijft een foto. De leesbaarheid
   van de tekst komt niet van een wash over het hele beeld, maar van
   een verloop dat alleen de linkerzijde raakt — precies daar waar het
   herobeeld zelf al bijna zwart is. De man, het houten lattenwerk en
   het warme licht rechts blijven onaangeraakt.
------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--tekst-op-donker);
  /* de sticky header ligt erboven, dus de hero loopt eronder door */
  margin-top: calc(-1 * var(--kop-hoogte));
  padding-top: calc(var(--kop-hoogte) + var(--s5));
  padding-bottom: var(--s7);
}
@supports not (min-height: 100svh) {
  .hero { min-height: 100vh; }
}

/* Geen korrel over de hero: de foto brengt zijn eigen textuur mee. */
.hero::after { content: none; }

.hero__foto { position: absolute; inset: 0; z-index: -2; }
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Geen verschuiving meer: de compositie zit in de foto zelf —
     links een rustige donkere wand, de monteur rechts. */
  object-position: 50% 50%;
}

.hero__verloop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg,
    rgba(11, 11, 12, .86) 0%,
    rgba(11, 11, 12, .74) 22%,
    rgba(11, 11, 12, .44) 40%,
    rgba(11, 11, 12, .12) 55%,
    rgba(11, 11, 12, 0) 70%);
}

.hero__binnen { position: relative; }
.hero__intro { max-width: 41rem; }

.hero h1 {
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  line-height: 1.01;
  letter-spacing: -0.026em;
}
.hero .lead { margin-top: var(--s4); max-width: 30rem; color: #DDDAD3; }
@media (min-width: 1280px) { .hero .lead { max-width: 32rem; } }

/* Op mobiel wisselt de eerste heroknop van offerte naar projecten.
   Twee knoppen in de HTML en er een verbergen werkt hier beter dan
   JavaScript: het werkt ook zonder script, en er is geen moment waarop
   de verkeerde knop even zichtbaar is. */
.hero__knop--smal { display: none; }
@media (max-width: 780px) {
  .hero__knop--breed { display: none; }
  .hero__knop--smal { display: inline-flex; }
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* Vertrouwensregel: feiten, gescheiden door het bliksemmotief. */
.hero__feiten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(226, 198, 125, .28);
  font-size: 0.9375rem;
  color: #C9C6BF;
}
.hero__feiten li { display: flex; align-items: center; gap: var(--s2); }
.hero__feiten svg { width: 13px; height: 13px; color: var(--goud-400); }

/* Onder 900px staat de tekst onderin over een staande uitsnede. Het
   verloop houdt de bovenkant van de foto vrij en wordt pas onderin
   ondoorzichtig, waar de letters staan. */
/* Onder 900px staat de tekst onderin over een staande uitsnede. Het
   verloop houdt de bovenkant van de foto vrij en wordt pas onderin
   ondoorzichtig, waar de letters staan. */
@media (max-width: 899px) {
  /* align-items: end valt terug op start zodra de inhoud hoger is dan
     het kader — en dat is op een klein scherm zo. Onderruimte
     toevoegen verschuift de tekst dan niet; de bovenruimte moet
     kleiner. De balk is hier doorzichtig, dus de kop mag er dicht
     onder beginnen. */
  .hero { align-items: end; padding-top: calc(var(--kop-hoogte) + var(--s3)); }
  .hero__foto img { object-position: 50% 45%; }
  .hero__verloop {
    background: linear-gradient(180deg,
      rgba(11, 11, 12, .30) 0%,
      rgba(11, 11, 12, .12) 24%,
      rgba(11, 11, 12, .62) 52%,
      rgba(11, 11, 12, .93) 76%,
      rgba(11, 11, 12, .98) 100%);
  }
  .hero__feiten { gap: var(--s2) var(--s4); margin-top: var(--s6); padding-top: var(--s4); }
}

/* De vaste actiebalk ligt over de onderkant van het scherm heen;
   zonder deze ruimte verdwijnt de laatste regel van de hero eronder. */
@media (max-width: 780px) {
  .hero { padding-bottom: calc(var(--s4) + 100px); }
}

/* Smalle of lage schermen: de hero-inhoud vraagt daar meer hoogte dan
   er tussen de header en de actiebalk zit. In plaats van de tekst
   onder de balk te laten verdwijnen wordt alles hier een slag
   compacter. Dit blok staat ná het blok hierboven, want het overschrijft
   de marges daaruit. */
@media (max-width: 420px), (max-height: 780px) {
  .hero h1 { font-size: clamp(1.95rem, 1.2rem + 4.2vw, 3rem); }
  .hero .lead { font-size: 1rem; line-height: 1.5; margin-top: var(--s3); }
  .hero__acties { margin-top: var(--s5); gap: var(--s2); }
  .hero__acties .knop--groot { min-height: 52px; font-size: 1rem; }
  .hero__feiten {
    margin-top: var(--s4);
    padding-top: var(--s3);
    gap: var(--s1) var(--s3);
    font-size: 0.875rem;
  }
}

/* Beeldkader — alleen nog het portret op Over ons. Zachte hoeken en
   een warme schaduw in plaats van een harde rand: het portret is een
   foto van een persoon, geen technisch bewijsstuk zoals de
   projectfoto's, en mag daar ook zo uitzien. */
.beeldkader { position: relative; }
.beeldkader img {
  width: 100%;
  border-radius: var(--r-2xl);
  box-shadow: var(--schaduw-l);
}
.beeldkader--4-5 img { aspect-ratio: 4 / 5; object-fit: cover; }
.beeldkader--3-4 img { aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 899px) {
  .beeldkader { max-width: 460px; }
}

/* ------------------------------------------------------------------
   9. KENMERKENRIJ

   Bewust géén rij losse kaartjes. Vier zwevende icoon-plus-kop-
   plus-tekst-blokjes zijn de luie container; dit is één blok met
   haarlijnen ertussen. Zelfde informatie, minder ruis, en het leest
   als één uitspraak in plaats van vier losse.
------------------------------------------------------------------ */
.kenmerken {
  display: grid;
  gap: 0;
  border: 1px solid var(--ink-600);
  border-radius: var(--r);
  overflow: hidden;
}
.kenmerk {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--ink-600);
}
.kenmerk:last-child { border-bottom: 0; }
.kenmerk svg { width: 22px; height: 22px; color: var(--goud-400); margin-top: 2px; }
.kenmerk h3 { font-size: 1.0625rem; margin: 0; line-height: 1.3; }
.kenmerk p { margin-top: 2px; font-size: 0.9375rem; line-height: 1.5; }

@media (min-width: 640px) {
  .kenmerken { grid-template-columns: 1fr 1fr; }
  .kenmerk:nth-child(odd) { border-right: 1px solid var(--ink-600); }
  .kenmerk:nth-child(3), .kenmerk:nth-child(4) { border-bottom: 0; }
}
@media (min-width: 1060px) {
  .kenmerken { grid-template-columns: repeat(4, 1fr); }
  .kenmerk { border-bottom: 0; border-right: 1px solid var(--ink-600); flex-direction: column; gap: var(--s2); }
  .kenmerk:nth-child(odd) { border-right: 1px solid var(--ink-600); }
  .kenmerk:last-child { border-right: 0; }
}

/* ------------------------------------------------------------------
   10. DIENSTEN

   Twee vormen, twee plekken:

   a) `.dienstblok` op de home — links het label, de kop, een alinea en
      één knop; rechts twaalf diensten in twee kolommen, elk met een
      gouden cirkelicoon. Warme crème achtergrond; deze sectie breekt
      de donkere reeks van hero, kenmerken en werk open.

   b) `.dienstkaarten` op diensten.html — daar mag het beeld het werk
      doen, want daar is de dienst zelf het onderwerp. Foto boven,
      tekst op een dicht vlak eronder. Nooit tekst op de foto, dus
      ook nooit een donkere wash om die tekst leesbaar te houden.

   Contrast op de crème (#F9F5EC), doorgerekend:
     label  #7E6428  5,16:1   dienstnaam #17181A  16,33:1
     alinea #5C5F66  5,88:1   icoonlijn  #B8975A   2,54:1 (decoratief)
   Het merkgoud #E2C67D haalt hier 1,53:1 en is dus nergens een letter;
   het label gebruikt de verdiepte variant.
------------------------------------------------------------------ */
.dienstensectie { background: var(--papier-warm); color: var(--tekst-op-licht); }

.dienstblok { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 1000px) {
  .dienstblok { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; }
}

.dienstblok__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--goud-diep);
}
.dienstblok__copy h2 {
  margin-top: var(--s3);
  font-size: clamp(2rem, 1.5rem + 2.1vw, 3.1rem);
  letter-spacing: -0.022em;
}
.dienstblok__copy p { margin-top: var(--s4); color: var(--tekst-op-licht-zacht); max-width: 34ch; }
.dienstblok__copy p strong { color: var(--tekst-op-licht); font-weight: 600; }
/* De knop staat in de HTML ná de opsomming, zodat hij op mobiel
   onderaan komt. Op desktop zet het raster hem terug onder de
   tekstkolom, waar hij bij de alinea hoort. */
.dienstblok__knop { margin-top: var(--s5); align-self: start; justify-self: start; }
@media (min-width: 1000px) {
  .dienstblok { grid-template-rows: auto 1fr; }
  .dienstblok__copy { grid-column: 1; grid-row: 1; }
  .dienstenlijst { grid-column: 2; grid-row: 1 / 3; }
  .dienstblok__knop { grid-column: 1; grid-row: 2; margin-top: var(--s6); }
}

/* De twaalf diensten. Twee kolommen vanaf 620px; daaronder één. */
.dienstenlijst { display: grid; gap: var(--s1) clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 620px) { .dienstenlijst { grid-template-columns: 1fr 1fr; } }

.dienstitem {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2);
  text-decoration: none;
  color: inherit;
}
.dienstitem__icoon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--goud-lijn);
  border-radius: 50%;
  color: var(--goud-lijn);
  transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease;
}
.dienstitem__icoon svg { width: 19px; height: 19px; }
.dienstitem__naam {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--tekst-op-licht);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .dienstitem:hover .dienstitem__icoon {
    border-color: var(--goud-diep);
    color: var(--goud-diep);
    background: rgba(126, 100, 40, .07);
  }
  .dienstitem:hover .dienstitem__naam { border-bottom-color: var(--goud-lijn); }
}

/* --- diensten.html: twaalf dienstkaarten op warme crème ---

   De kaart is een dicht wit vlak met een gouden lijnicoon, een titel in
   de verdiepte goudtint en twee regels uitleg. Onderin twee dingen: de
   tekstlink links en een losse pijl rechts, zoals in het ontwerp.

   Let op de titelkleur: het merkgoud #E2C67D haalt op deze crème 1,53:1
   en kan hier dus geen letter zijn. --goud-leesbaar (#6B5A22) haalt
   6,36:1 en leest nog steeds als goud-brons. */
.dienstraster { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }

/* De vijf clusterlinks op de home wijzen hierheen. scroll-margin-top
   houdt de kaart onder de sticky header vandaan, en :target geeft
   een gouden rand zodat je ziet waar je terechtkwam. */
.dienstkaart[id] { scroll-margin-top: calc(var(--kop-hoogte) + var(--s5)); }
.dienstkaart:target { border-color: var(--goud-leesbaar); box-shadow: var(--schaduw); }
@media (min-width: 640px) { .dienstraster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .dienstraster { grid-template-columns: repeat(3, 1fr); } }

.dienstkaart {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  text-decoration: none;
  color: inherit;
  transition: border-color 240ms ease, box-shadow 280ms ease, transform 280ms var(--ease-out);
}

.dienstkaart__icoon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s4);
  border: 1px solid var(--goud-lijn);
  border-radius: var(--r-s);
  color: var(--goud-leesbaar);
  transition: border-color 240ms ease, background-color 240ms ease;
}
.dienstkaart__icoon svg { width: 22px; height: 22px; }

.dienstkaart h3 {
  margin-top: 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.3;
  color: var(--goud-leesbaar);
}
.dienstkaart p {
  margin-top: var(--s2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tekst-zacht);
}

/* margin-top: auto duwt de voet naar de onderkant van de kaart. Zonder
   dat staat de scheidingslijn per kaart op een andere hoogte, omdat de
   ene titel over twee regels loopt en de andere niet. */
.dienstkaart__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s5);
  border-top: 1px solid var(--lijn);
}
.dienstkaart p { margin-bottom: var(--s5); }
.dienstkaart__meer {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--goud-leesbaar);
}
.dienstkaart__meer svg { width: 14px; height: 14px; transition: transform 220ms var(--ease-out); }
.dienstkaart__pijl { flex: none; width: 20px; height: 20px; color: var(--goud-lijn); transition: transform 220ms var(--ease-out), color 240ms ease; }

@media (hover: hover) and (pointer: fine) {
  .dienstkaart:hover {
    border-color: var(--lijn-sterk);
    box-shadow: var(--schaduw);
    transform: translateY(-3px);
  }
  .dienstkaart:hover .dienstkaart__icoon {
    border-color: var(--goud-leesbaar);
    background: var(--goud-vlak);
  }
  .dienstkaart:hover .dienstkaart__meer svg,
  .dienstkaart:hover .dienstkaart__pijl { transform: translateX(4px); }
  .dienstkaart:hover .dienstkaart__pijl { color: var(--goud-leesbaar); }
}

/* De losse diensten binnen een cluster, als opsomming. */
.dienstlijst { display: grid; gap: var(--s1) var(--s7); margin-top: var(--s2); }
@media (min-width: 700px) { .dienstlijst { grid-template-columns: 1fr 1fr; } }

.dienstlijst li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--lijn);
}
.dienstlijst li::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 5px;
  background: var(--bliksem-donker) center / contain no-repeat;
}
.donker .dienstlijst li, .donker-2 .dienstlijst li { border-bottom-color: var(--ink-600); }
.donker .dienstlijst li::before, .donker-2 .dienstlijst li::before { background-image: var(--bliksem-goud); }

.dienstlijst a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .dienstlijst a:hover { border-color: var(--goud-500); } }

/* Regel onder de lijst: wat er niet tussen staat. */
.restregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--goud-vlak);
  border-radius: var(--r);
  font-size: 1rem;
  max-width: none;
}
.restregel svg { width: 20px; height: 20px; color: var(--goud-tekst); }
.restregel strong { font-weight: 600; }
.donker .restregel, .donker-2 .restregel {
  background: rgba(226, 198, 125, .08);
  border: 1px solid var(--goud-700);
  color: var(--tekst-op-donker);
}
.donker .restregel svg, .donker-2 .restregel svg { color: var(--goud-400); }

/* ------------------------------------------------------------------
   11. CLUSTERBANDEN (diensten.html)

   Vijf clusters als redactionele banden, niet als vijf gelijke
   kaarten. Links de uitleg, rechts de losse diensten. De banden
   wisselen van achtergrond, dus de pagina leest als één document
   in plaats van als een raster tegels.
------------------------------------------------------------------ */
/* De achtergrond per band staat expliciet in de HTML (.licht of
   .licht-2) en niet op :nth-of-type — de beeldband staat tussen de
   clusters en zou die telling verschuiven. */
.band { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.band.licht + .band.licht { border-top: 1px solid var(--lijn); }

.band__binnen { display: grid; gap: var(--s5) clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 900px) {
  .band__binnen { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; }
}

.band__icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s4);
  border: 1px solid var(--lijn-hier-sterk);
  border-radius: var(--r-s);
  background: var(--wit);
  color: var(--goud-leesbaar);
}
.band__icoon svg { width: 26px; height: 26px; }
.band h2 { margin-top: 0; font-size: clamp(1.55rem, 1.3rem + 1vw, 2.1rem); }
.band__kop p { margin-top: var(--s3); }

.banddiensten { display: grid; gap: var(--s1) var(--s6); }
@media (min-width: 620px) { .banddiensten { grid-template-columns: 1fr 1fr; } }
.banddiensten li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--lijn);
  font-size: 1rem;
}
.banddiensten li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  background: var(--bliksem) center / contain no-repeat;
}

/* Brede beeldband die de dienstenpagina in tweeën knipt. */
.beeldband {
  position: relative;
  min-height: clamp(240px, 30vw, 380px);
  display: grid;
  align-items: end;
  background: var(--ink-900);
  overflow: hidden;
}
.beeldband img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Alleen linksonder donker, waar de zin staat — niet de hele foto.
   Een wash over het volle vlak maakt precies het beeld dof waar het
   om gaat. */
.beeldband__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 11, 12, .86) 0%, rgba(11, 11, 12, .34) 38%, rgba(11, 11, 12, 0) 62%),
    linear-gradient(to right, rgba(11, 11, 12, .72) 0%, rgba(11, 11, 12, .22) 34%, rgba(11, 11, 12, 0) 58%);
}
.beeldband__tekst { position: relative; padding-block: clamp(2rem, 4vw, 3.25rem); }
.beeldband__tekst p { color: var(--tekst-op-donker); font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); line-height: 1.25; max-width: 34ch; }

/* ------------------------------------------------------------------
   12. RECENTE PROJECTEN (home)

   Vier gelijke kaarten op een rij. Het redactionele raster met één
   grote, twee kleine en één brede kaart is hier vervallen: het
   ontwerp vraagt om vier even zware projecten naast elkaar.

   Op de foto staat alleen een kleine categoriepil, geen verloop over
   het hele beeld — de titel en de plaats staan op het dichte vlak
   eronder.
------------------------------------------------------------------ */
.werk__kop {
  display: grid;
  gap: var(--s4) var(--s7);
  align-items: end;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
@media (min-width: 900px) {
  .werk__kop { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
}

.werk__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--goud-leesbaar);
}
.werk__label i { display: block; width: 2.4rem; height: 1px; background: currentColor; opacity: .55; }

.werk__kop h2 {
  margin-top: var(--s3);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
}
.werk__kop p { margin-top: var(--s3); max-width: 46ch; }

/* De link rechtsboven staat op een haarlijn, zoals in het ontwerp. */
.werk__alle {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--lijn-hier-sterk);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: currentColor;
  white-space: nowrap;
  transition: border-color 220ms ease, color 220ms ease;
}
.werk__alle svg { width: 20px; height: 20px; color: var(--goud-leesbaar); transition: transform 220ms var(--ease-out); }
@media (min-width: 900px) { .werk__alle { justify-self: end; } }
@media (hover: hover) and (pointer: fine) {
  .werk__alle:hover { border-bottom-color: var(--goud-leesbaar); color: var(--goud-leesbaar); }
  .werk__alle:hover svg { transform: translateX(4px); }
}

.werk__grid { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 600px) { .werk__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .werk__grid { grid-template-columns: repeat(4, 1fr); } }

.projectkaart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  box-shadow: var(--schaduw-s);
  text-decoration: none;
  color: inherit;
  transition: border-color 240ms ease, box-shadow 280ms ease, transform 280ms var(--ease-out);
}
/* 4:3 in plaats van 4:5: in de bredere container werden de kaarten
   anders smal en hoog. */
.projectkaart__beeld { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.projectkaart__beeld picture { display: block; width: 100%; height: 100%; }
.projectkaart__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--ease-out);
}

.projectkaart__chip {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  padding: 6px var(--s3);
  border-radius: 999px;
  background: rgba(11, 11, 12, .84);
  border: 1px solid var(--ink-500);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--goud-400);
}

.projectkaart__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s4);
}
.projectkaart__titel {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--tekst-op-licht);
}
.projectkaart__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: auto;
}
.projectkaart__plaats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--tekst-zacht);
}
.projectkaart__plaats svg { width: 14px; height: 14px; color: var(--goud-700); }
.projectkaart__pijl { flex: none; width: 20px; height: 20px; color: var(--goud-400); transition: transform 240ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .projectkaart:hover { border-color: var(--lijn-sterk); box-shadow: var(--schaduw-l); transform: translateY(-4px); }
  .projectkaart:hover .projectkaart__beeld img { transform: scale(1.05); }
  .projectkaart:hover .projectkaart__pijl { transform: translateX(4px); }
}

/* Kleine metaregel onder een beeld: plaats en soort werk. */
.beeldmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  font-size: 0.875rem;
  color: var(--tekst-zacht);
}
.beeldmeta li { display: flex; align-items: center; gap: 6px; }
.beeldmeta svg { width: 14px; height: 14px; color: var(--goud-700); }

/* ------------------------------------------------------------------
   12b. TOTAALOPLOSSING

   Een brede, bewust lage band: hij verbindt de diensten met het werk
   en hoort niet te concurreren met allebei. Dezelfde regel als overal
   op deze site — het verloop raakt alleen de tekstzijde, en de
   aangeleverde foto is links van zichzelf al donker, dus het hoeft
   daar weinig te doen.
------------------------------------------------------------------ */
.totaal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--tekst-op-donker);
}
.totaal__foto { position: absolute; inset: 0; z-index: -2; }
.totaal__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}
.totaal__verloop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg,
    rgba(11, 11, 12, .93) 0%,
    rgba(11, 11, 12, .80) 24%,
    rgba(11, 11, 12, .34) 44%,
    rgba(11, 11, 12, 0) 62%);
}

.totaal__binnen {
  position: relative;
  display: grid;
  gap: var(--s6);
  align-items: center;
  min-height: clamp(19rem, 26vw, 25rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .totaal__binnen { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--s7); }
}

.totaal__copy { max-width: 34rem; }
.totaal h2 {
  margin-top: 0;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.45rem);
  line-height: 1.1;
}
.totaal p { margin-top: var(--s3); color: #D2CFC8; }
.totaal .pijllink { margin-top: var(--s5); }

/* Het kaartje met de drie kenmerken. Een dicht vlak en geen blur:
   glas is hier decoratie, en een ondoorzichtig vlak leest beter boven
   een foto met veel licht erin. */
.kenmerkkaart {
  display: grid;
  gap: var(--s3);
  padding: var(--s5) clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(9, 10, 12, .82);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-l);
}
@media (min-width: 900px) {
  .kenmerkkaart {
    justify-self: end;
    min-width: 17rem;
    /* Iets voorbij de containerrand naar rechts, en met een marge boven
       zich naar beneden geduwd. Bij align-items: center wordt de
       margin-box gecentreerd, dus de kaart zakt de helft van deze
       marge — vandaar de dubbele waarde. De sectie heeft
       overflow: hidden, dus de negatieve marge levert geen scrollbalk. */
    margin-right: calc(-1 * clamp(0.5rem, 2.4vw, 2.25rem));
    margin-top: clamp(2.5rem, 5.5vw, 5rem);
  }
}
.kenmerkkaart li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 1.0625rem;
  color: var(--tekst-op-donker);
}
.kenmerkkaart svg { flex: none; width: 19px; height: 19px; color: var(--goud-400); }

@media (max-width: 720px) {
  .totaal__verloop {
    background: linear-gradient(180deg,
      rgba(11, 11, 12, .40) 0%,
      rgba(11, 11, 12, .22) 26%,
      rgba(11, 11, 12, .78) 58%,
      rgba(11, 11, 12, .94) 100%);
  }
  .totaal__binnen { align-content: end; min-height: 24rem; }
}

/* ------------------------------------------------------------------
   13. CIJFERSTROOK

   Bewust anders opgebouwd dan de kenmerkenrij: geen iconen en geen
   lopende tekst, maar grote gouden cijfers met een klein label.
   Twee keer dezelfde vier-op-een-rij met haarlijnen zou als
   herhaling lezen.
------------------------------------------------------------------ */
.cijfers { display: grid; gap: var(--s5) 0; text-align: center; }
@media (min-width: 560px) { .cijfers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .cijfers { grid-template-columns: repeat(4, 1fr); } }

.cijfer { padding-inline: var(--s4); }
@media (min-width: 560px) {
  .cijfer:nth-child(odd) { border-right: 1px solid var(--ink-600); }
}
@media (min-width: 940px) {
  .cijfer { border-right: 1px solid var(--ink-600); }
  .cijfer:last-child { border-right: 0; }
}
.cijfer__waarde {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--goud-400);
  font-variant-numeric: tabular-nums;
}
.cijfer__label {
  display: block;
  margin-top: var(--s2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}

/* ------------------------------------------------------------------
   14. REVIEWS

   Donkere sectie, zodat hij tegen de lichte projecten- en
   vragensecties afsteekt. Elke kaart opent met een groot gouden
   aanhalingsteken; dat is het enige decoratieve element en het draagt
   geen informatie, dus het is voor de schermlezer verborgen.
------------------------------------------------------------------ */
/* Elf beoordelingen passen niet naast elkaar, dus een schuifbare rij
   met scroll-snap. Zonder JavaScript schuif je hem met muis, touchpad
   of veeg; de pijlen zijn comfort en staan daarom op hidden tot JS ze
   aanzet. De rij is focusbaar, zodat je er ook met het toetsenbord
   doorheen kunt scrollen. */
.reviews {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* overflow-x: auto laat de browser ook verticaal klippen. Zonder deze
     ruimte boven de rij wordt de gouden rand van een kaart bij hover
     langs de bovenkant afgesneden. De negatieve marge haalt de ruimte
     weer uit de layout, zodat er niets verschuift. */
  padding-block: var(--s2) var(--s2);
  margin-block-start: calc(-1 * var(--s2));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .reviews { scroll-behavior: auto; } }

.review { flex: 0 0 min(21rem, 84%); scroll-snap-align: start; }
@media (min-width: 760px) { .review { flex-basis: calc((100% - 2 * clamp(1rem, 1.6vw, 1.5rem)) / 3); } }

/* De pijlen naast de kop. */
.carrousel__knoppen { display: flex; gap: var(--s2); }
@media (min-width: 900px) { .carrousel__knoppen { justify-self: end; align-self: end; } }
.carrousel__knop {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--ink-600);
  border-radius: 50%;
  color: var(--tekst-op-donker);
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.carrousel__knop svg { width: 19px; height: 19px; }
.carrousel__knop:active { transform: scale(0.94); }
.carrousel__knop[disabled] { opacity: .38; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .carrousel__knop:hover { border-color: var(--goud-400); color: var(--goud-400); background: rgba(226, 198, 125, .09); }
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-l);
  transition: border-color 240ms ease, transform 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .review:hover { border-color: var(--goud-700); transform: translateY(-3px); }
}

/* Het aanhalingsteken is een gezette letter en geen icoon: in Fraunces
   heeft hij dezelfde vorm als de aanhalingstekens in de quote zelf. */
.review::before {
  content: '\201C';
  position: absolute;
  top: clamp(0.35rem, 1vw, 0.75rem);
  right: clamp(1rem, 2vw, 1.75rem);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(4rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--goud-400);
  opacity: .16;
  pointer-events: none;
}

.sterren { display: flex; gap: 3px; color: var(--goud-400); }
.sterren svg { width: 17px; height: 17px; }

.review blockquote {
  position: relative;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--tekst-op-donker);
}

.review__wie {
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--ink-600);
  font-size: 0.9375rem;
}
.review__wie strong { display: block; font-weight: 600; color: var(--tekst-op-donker); }
.review__wie span { color: var(--tekst-zacht); }

/* Regel onder de reviews: waar ze vandaan komen. */
.reviewbron {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: var(--s6);
  font-size: 0.9375rem;
  color: var(--tekst-zacht);
  max-width: none;
}
/* flex: none op het icoon en flex: 1 op de tekst, anders duwt de lange
   regel het sterretje naar een eigen rij. */
.reviewbron svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--goud-400); }
.reviewbron span { flex: 1; }
.reviewbron strong { color: var(--tekst-op-donker); font-weight: 600; }
.reviewbron a {
  text-decoration: none;
  border-bottom: 1px solid var(--goud-700);
  transition: border-color 200ms ease;
}
.reviewbron a strong { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .reviewbron a:hover { border-bottom-color: var(--goud-400); }
  .reviewbron a:hover strong { color: var(--goud-400); }
}

/* ------------------------------------------------------------------
   15. VRAGEN

   Native <details>/<summary>: werkt zonder JavaScript, is
   toetsenbordbedienbaar en wordt door schermlezers correct
   aangekondigd. Het pijltje draait een kwartslag bij openen — een
   chevron en niet de bliksem, want een gekantelde bliksem leest
   als een fout in plaats van als een richting.
------------------------------------------------------------------ */
/* Acht vragen in twee kolommen van vier. grid-auto-flow: column vult
   kolomsgewijs, zodat links 1 tot en met 4 staat en rechts 5 tot en
   met 8 — bij de standaard rijvolgorde krijg je 1,2 / 3,4 en lezen de
   twee kolommen niet als twee lijsten. */
.vragen { display: grid; }
@media (min-width: 900px) {
  .vragen {
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}
.vraag { border-bottom: 1px solid var(--lijn-hier); }
.vraag:first-child { border-top: 1px solid var(--lijn-hier); }
@media (min-width: 900px) {
  .vraag:nth-child(5) { border-top: 1px solid var(--lijn-hier); }
}
.vraag > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  transition: color 200ms ease;
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::marker { content: ''; }
.vraag__pijl {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--goud-leesbaar);
  transition: transform 220ms var(--ease-out);
}
.vraag[open] .vraag__pijl { transform: rotate(90deg); }
.vraag__antwoord { padding-bottom: var(--s5); }
.vraag__antwoord p { color: var(--tekst-zacht); }
@media (hover: hover) and (pointer: fine) {
  .vraag > summary:hover { color: var(--goud-leesbaar); }
}

/* ------------------------------------------------------------------
   16. STAPPEN

   Stapnummers zijn hier toegestaan omdat de volgorde echte
   informatie draagt: je neemt eerst contact op en pas daarna komt
   iemand langs. Ze zijn geen decoratie.
------------------------------------------------------------------ */
.stappen { display: grid; gap: var(--s5); counter-reset: stap; }
@media (min-width: 720px) { .stappen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .stappen { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }

.stap { position: relative; padding-top: var(--s5); }
.stap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--goud-700);
}
.stap::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--bliksem-goud) center / contain no-repeat;
}
.stap__nr {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--goud-400);
  font-variant-numeric: tabular-nums;
}
.stap h3 { margin-top: var(--s1); font-size: 1.125rem; }
.stap p { margin-top: var(--s2); font-size: 0.9688rem; line-height: 1.55; }

/* ------------------------------------------------------------------
   17. PROJECTEN, FILTERS EN LIGHTBOX

   Zonder JavaScript is elke kaart een gewone link naar de grote
   foto en staan alle projecten in beeld. JavaScript voegt de
   filterbalk en de lightbox toe; de filterbalk staat daarom
   standaard op hidden.
------------------------------------------------------------------ */
/* --- projecten.html: filters in de kop, kaarten op crème ---

   De filterbalk staat binnen de donkere kop, dus de pillen hebben daar
   een eigen variant. Hij staat in de HTML op hidden en wordt door
   main.js aangezet: zonder JavaScript doet hij niets en hoort hij er
   niet te staan. Alle projecten zijn dan gewoon zichtbaar.
*/
.paginakop__filters { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.filter {
  min-height: 44px;
  padding: 0 var(--s4);
  /* Dekkend genoeg om op zichzelf te staan: de pillen liggen op de
     foto, en rechts daarvan is die foto licht. Bij 42% zakte de witte
     tekst daar naar 2,72:1. */
  background: rgba(11, 11, 12, .82);
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tekst-op-donker);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.filter:active { transform: scale(0.97); }
.filter[aria-pressed="true"] {
  background: var(--goud-400);
  border-color: var(--goud-400);
  color: var(--ink-900);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .filter:hover { border-color: var(--goud-500); color: var(--goud-400); }
  .filter[aria-pressed="true"]:hover { background: var(--goud-300); border-color: var(--goud-300); color: var(--ink-900); }
}

/* --- het raster ---

   Twee kolommen in plaats van drie, en de kaart is liggend: beeld
   links, tekst rechts. Dat is wat de kaart breder én lager maakt. In
   de staande vorm stond de tekst onder een 16:10-beeld en bleef er
   onder de knop lucht over die niets deed. */
.projecten { display: grid; gap: clamp(1rem, 1.8vw, 1.6rem); }
@media (min-width: 900px) { .projecten { grid-template-columns: 1fr 1fr; } }

.project { position: relative; }
.project[hidden] { display: none; }

.project__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-l);
  text-decoration: none;
  color: inherit;
  transition: border-color 240ms ease, background-color 240ms ease, transform 280ms var(--ease-out);
}
@media (min-width: 560px) {
  .project__link { flex-direction: row; align-items: stretch; }
}

.project__beeld { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.project__beeld picture { display: block; width: 100%; height: 100%; }
.project__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 620ms var(--ease-out);
}
@media (min-width: 560px) {
  .project__beeld { flex: 0 0 42%; aspect-ratio: auto; min-height: 13.5rem; }
}

.project__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: var(--s2);
  padding: var(--s5);
}

/* Gouden categorie boven de titel, met hetzelfde streepje als de
   sectielabels elders op de site. */
.project__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--goud-400);
}
.project__cat i { display: block; width: 1.5rem; height: 1px; background: var(--goud-700); }

.project__tekst h3 {
  margin-top: 0;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.25;
  color: var(--tekst-op-donker);
}
.project__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  font-size: 0.9375rem;
  color: var(--tekst-zacht);
}
.project__meta li { display: flex; align-items: center; gap: 5px; }
.project__meta svg { width: 13px; height: 13px; color: var(--goud-400); }

/* De knop is een <span> en geen <a>: de hele kaart is al een link, en
   een link in een link is ongeldige HTML. */
.project__knop {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s2);
  margin-top: var(--s2);
  min-height: 40px;
  padding-inline: var(--s4);
  border: 1px solid var(--goud-700);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--goud-400);
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.project__knop svg { width: 15px; height: 15px; transition: transform 220ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .project__link:hover {
    border-color: var(--goud-700);
    background: var(--ink-700);
    transform: translateY(-3px);
  }
  .project__link:hover .project__beeld img { transform: scale(1.05); }
  .project__link:hover .project__knop {
    background: var(--goud-400);
    border-color: var(--goud-400);
    color: var(--ink-900);
  }
  .project__link:hover .project__knop svg { transform: translateX(3px); }
}

/* --- bladeren ---

   In het ontwerp staat onder het raster een paginabalk. Met zes
   projecten die allemaal tegelijk in beeld staan zou dat een knop zijn
   die niets doet, dus staat hij niet in de HTML. De opmaak staat hier
   wel klaar: zodra er meer dan negen projecten zijn, volstaat dit
   blokje in projecten.html direct onder .projecten —

     <nav class="bladeren" aria-label="Paginering projecten">
       <button class="bladeren__knop" ...>&larr;</button>
       <a class="bladeren__nr" aria-current="page" href="?p=1">1</a>
       ...
     </nav>
*/
.bladeren {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.bladeren__knop,
.bladeren__nr {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--s2);
  background: transparent;
  border: 1px solid var(--lijn-sterk);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tekst-op-licht);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.bladeren__knop svg { width: 18px; height: 18px; }
.bladeren__nr[aria-current="page"] {
  background: var(--goud-400);
  border-color: var(--goud-400);
  color: var(--ink-900);
}
.bladeren__knop[disabled] { opacity: .4; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .bladeren__knop:hover, .bladeren__nr:hover { border-color: var(--goud-leesbaar); color: var(--goud-leesbaar); }
  .bladeren__nr[aria-current="page"]:hover { background: var(--goud-500); border-color: var(--goud-500); color: var(--ink-900); }
}

/* De tweede foto van een project staat niet meer als losse strook onder
   de kaart — in het nieuwe ontwerp staan er alleen beeld, titel en
   plaats. Het blok blijft wel in de HTML staan: de modal leest daar de
   extra foto's uit voor zijn eigen duimnagelstrook. display:none houdt
   het uit beeld én uit de tabvolgorde, terwijl querySelectorAll het
   gewoon blijft vinden. */
.project__extra { display: none; }
.project__extra--zichtbaar { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.project__extra a {
  display: block;
  width: 54px;
  height: 54px;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--r-s);
  overflow: hidden;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.project__extra img { width: 100%; height: 100%; object-fit: cover; }
.project__extra a:active { transform: scale(0.96); }
.project__extra span { font-size: 0.8125rem; color: var(--tekst-zacht); }
@media (hover: hover) and (pointer: fine) {
  .project__extra a:hover { border-color: var(--goud-500); }
}

/* --- de projectmodal ---

   Vervangt de projectdetailpagina's. Op desktop twee kolommen: links
   het beeld met een strook duimnagels, rechts een paneel dat
   zelfstandig scrollt. Op mobiel één kolom waarin het hele venster
   scrollt, met de sluitknop vast in de kop zodat hij altijd
   bereikbaar is.

   De inhoud staat niet in data-attributen maar in een verborgen blok
   in de kaart zelf: lange lopende tekst in een attribuut is niet te
   onderhouden, en zo staat de projectbeschrijving ook in de HTML voor
   zoekmachines — wat een deel goedmaakt van wat we verliezen door
   geen aparte detailpagina's te hebben. */
.lightbox {
  width: min(94vw, 1040px);
  max-width: 1040px;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-l);
  background: var(--ink-900);
  color: var(--tekst-op-donker);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(6, 6, 7, .88); }

.lightbox__binnen {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  min-height: 0;
}

/* Kop met de sluitknop: op mobiel blijft die staan terwijl de rest
   scrollt, want een sluitknop die je eerst moet zoeken is geen
   sluitknop. */
.lightbox__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex: none;
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  border-bottom: 1px solid var(--ink-600);
  background: var(--ink-900);
}
/* De projecttitel staat in de kop en niet in het tekstpaneel. Op een
   telefoon vult de foto het eerste beeld, en dan zou de titel onder
   de vouw belanden — je opent een project en ziet niet welk. */
.lightbox__kop h3 {
  margin: 0;
  min-width: 0;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.2;
}

.lightbox__body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }

.lightbox__beeld {
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
}
.lightbox__beeld > img {
  width: 100%;
  max-height: 38vh;
  object-fit: contain;
  background: var(--ink-800);
}

/* Strook duimnagels; alleen zichtbaar bij een project met meer dan
   één foto. JS zet hem op hidden als er niets te kiezen valt. */
.lightbox__duimen {
  display: flex;
  gap: var(--s2);
  padding: var(--s3);
  border-top: 1px solid var(--ink-600);
}
.lightbox__duimen[hidden] { display: none; }
.lightbox__duimen button {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid var(--ink-500);
  border-radius: var(--r-s);
  overflow: hidden;
  background: none;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.lightbox__duimen img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__duimen button:active { transform: scale(0.96); }
.lightbox__duimen button[aria-current="true"] { border-color: var(--goud-400); }
@media (hover: hover) and (pointer: fine) {
  .lightbox__duimen button:hover { border-color: var(--goud-700); }
}

.lightbox__info { padding: var(--s5); }
.lightbox__info .beeldmeta { margin-top: 0; }
.lightbox__info p { margin-top: var(--s4); font-size: 1rem; color: var(--tekst-zacht); }
.lightbox__info h4 {
  margin-top: var(--s5);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud-400);
}
.lightbox__info .checklijst { margin-top: var(--s3); }
.lightbox__info .checklijst li { font-size: 0.9688rem; }

/* Voet van de modal: één actie, en die leidt naar een offerte. Wie
   een project bekijkt, is aan het vergelijken. */
.lightbox__voet {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--ink-600);
  background: var(--ink-900);
}
.lightbox__voet p { flex: 1 1 14rem; margin: 0; font-size: 0.9375rem; color: var(--tekst-zacht); }
.lightbox__voet .knop { min-height: 46px; font-size: 0.9375rem; }

.lightbox__sluit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex: none;
  min-height: 44px;
  padding-inline: var(--s4);
  background: transparent;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-s);
  color: var(--tekst-op-donker);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: border-color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
}
.lightbox__sluit svg { width: 16px; height: 16px; }
.lightbox__sluit:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .lightbox__sluit:hover { border-color: var(--goud-700); background: var(--ink-700); }
}

/* Op een telefoon wordt de sluitknop alleen een kruisje: met het
   woord "Sluiten" erbij nam hij 130 van de 390 pixels in en brak de
   projecttitel over drie regels. De aria-label houdt hem
   aankondigbaar, en 44x44 blijft het klikdoel. */
@media (max-width: 559px) {
  .lightbox__sluit { width: 44px; padding-inline: 0; }
  .lightbox__sluit .sluit-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lightbox__sluit svg { width: 18px; height: 18px; }
  .lightbox__kop { padding-left: var(--s4); }
  .lightbox__info { padding: var(--s4); }
  /* De twee acties naast elkaar in plaats van gestapeld: dat scheelt
     een knophoogte aan verticale ruimte in een venster dat al
     krap is. */
  .lightbox__voet { padding: var(--s3) var(--s4); gap: var(--s2); }
  .lightbox__voet p { flex: 1 1 100%; font-size: 0.875rem; }
  .lightbox__voet .knop { flex: 1 1 0; min-width: 0; padding-inline: var(--s2); }
}

/* Twee kolommen zodra er ruimte is. Het beeld houdt zijn eigen hoogte
   en het tekstpaneel scrollt apart, zodat een lange beschrijving het
   beeld niet wegduwt. */
@media (min-width: 800px) {
  .lightbox__body { flex-direction: row; overflow: hidden; }
  .lightbox__beeld {
    flex: 0 0 50%;
    border-right: 1px solid var(--ink-600);
    min-height: 0;
    justify-content: space-between;
  }
  .lightbox__beeld > img { flex: 1; min-height: 0; max-height: none; }
  .lightbox__info { flex: 1; min-width: 0; overflow-y: auto; }
}

/* Het verborgen detailblok in de kaart: bron voor de modal, en
   leesbaar voor zoekmachines. */
.project__detail { display: none; }

/* Lege staat van het filter: geen resultaten in deze categorie. */
.geenresultaat {
  grid-column: 1 / -1;
  padding: var(--s7) var(--s5);
  text-align: center;
  border: 1px dashed var(--lijn-sterk);
  border-radius: var(--r);
  background: var(--wit);
}
.geenresultaat svg { width: 26px; height: 26px; margin-inline: auto; color: var(--goud-leesbaar); }
.geenresultaat h3 { margin-top: var(--s3); font-size: 1.125rem; }
.geenresultaat p { margin: var(--s2) auto 0; max-width: 40ch; color: var(--tekst-zacht); }
.geenresultaat button { margin-top: var(--s4); }

/* ------------------------------------------------------------------
   18. OVER ONS

   Eén echt gezicht verslaat vijf icoonkaarten. Er staat één
   genoemde persoon op deze site, dus er staat ook één portret —
   en nergens een stockfoto van iemand die voor de elektricien
   door zou kunnen gaan.
------------------------------------------------------------------ */
.overons { display: grid; gap: clamp(2.25rem, 4vw, 4rem); align-items: start; }
@media (min-width: 880px) {
  .overons { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}
.overons h2 { margin-top: 0; }

.signatuur {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--lijn-hier);
}
.signatuur strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--goud-leesbaar);
}
.signatuur span {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}

/* Socialrij — verwijst naar waar het werk echt in beeld staat. */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.socials__toelichting { margin-left: var(--s1); font-size: 0.9375rem; color: var(--tekst-zacht); }

/* Losse alinea die na een lijst of een raster nog lucht nodig heeft. */
.ruimte-boven { margin-top: var(--s5); }
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--lijn-hier);
  border-radius: var(--r-s);
  color: var(--goud-leesbaar);
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
}
.social svg { width: 20px; height: 20px; }
.social:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .social:hover { border-color: var(--goud-500); background: rgba(226, 198, 125, .09); }
}

/* Checklijst met het bliksemmotief, voor "wat we doen"-opsommingen. */
.checklijst { display: grid; gap: var(--s2); margin-top: var(--s4); }
/* Het bolletje staat absoluut en niet als flex-item. Met display:flex
   werden <strong> en de tekst erachter twee losse flexitems, die elk
   apart afbraken — vandaar dat "Netjes achtergelaten werk." over twee
   regels liep terwijl de uitleg ernaast bleef staan. Zo lopen ze als
   één zin door. */
.checklijst li { position: relative; padding-left: calc(15px + var(--s3)); }
.checklijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 15px;
  height: 15px;
  background: var(--bliksem) center / contain no-repeat;
}

/* ------------------------------------------------------------------
   19. CONTACT EN FORMULIER

   Labels staan altijd zichtbaar boven het veld — placeholder-only
   verdwijnt zodra iemand begint te typen en is dan precies weg als
   je hem nodig hebt.
------------------------------------------------------------------ */
.contact { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) {
  .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.routes { display: grid; gap: 0; border-top: 1px solid var(--lijn-hier); }
.route {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--lijn-hier);
  text-decoration: none;
  transition: color 200ms ease;
}
.route svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--goud-leesbaar); }
.route__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.route__waarde {
  display: block;
  margin-top: 3px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.route__bij { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--tekst-zacht); }
@media (hover: hover) and (pointer: fine) {
  a.route:hover .route__waarde { color: var(--goud-leesbaar); }
}

/* Werkgebied in plaats van een kaart: er is geen straatadres, en
   een pin op een stad zonder adres belooft iets wat er niet is. */
.werkgebied {
  margin-top: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--ink-600);
  border-radius: var(--r);
  background: var(--ink-800);
}
.werkgebied h3 { margin-top: 0; font-size: 1.0625rem; }
.werkgebied p { margin-top: var(--s2); font-size: 0.9688rem; color: var(--tekst-zacht); }
.plaatsen { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s4); }
.plaatsen li {
  padding: 5px var(--s3);
  border: 1px solid var(--lijn-hier);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--tekst-zacht);
}

.formulier {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-l);
}
.formulier h2 { margin-top: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); }
.formulier > p { margin-top: var(--s2); font-size: 0.9688rem; }

.velden { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 560px) { .velden { grid-template-columns: 1fr 1fr; } }
.veld--breed { grid-column: 1 / -1; }

/* position:relative is hier geen sier: het weggeklipte
   bestandsinvoerveld is absoluut gepositioneerd en moet zich tegen
   dit veld afzetten. Zonder dit anker landt het ergens verder in de
   pagina en loopt contact.html honderden pixels over. */
.veld { position: relative; display: flex; flex-direction: column; gap: 6px; }
.veld label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; }
.veld label .optioneel { font-weight: 400; color: var(--tekst-zacht); }

.veld input, .veld select, .veld textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--s2) var(--s3);
  background: var(--ink-900);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-s);
  color: var(--tekst-op-donker);
  font-size: 1rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.veld textarea { min-height: 128px; resize: vertical; line-height: 1.6; }

/* Het pijltje van de select zit als achtergrond op de select zelf en
   niet als los icoon in de veldwrapper. Absoluut positioneren vanaf
   de onderkant van die wrapper ging mis zodra er een foutmelding
   onder kwam: dan schoof het pijltje mee naar beneden. */
.veld select {
  appearance: none;
  padding-right: var(--s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2C67D' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
  background-size: 17px 17px;
}
.veld input::placeholder, .veld textarea::placeholder { color: #7C7A74; }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: 0;
  border-color: var(--goud-400);
  box-shadow: 0 0 0 3px rgba(226, 198, 125, .22);
}
/* Eigen bestandsveld. De native knop van een <input type="file">
   krijgt zijn tekst van de browsertaal, niet van de pagina — op een
   Nederlandse site staat er dan "Choose Files / No file chosen".
   Het echte input-element blijft bestaan en focusbaar; het <label>
   eromheen opent de bestandskiezer ook zonder JavaScript. */
.veld__label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; }
.veld__label .optioneel { font-weight: 400; color: var(--tekst-zacht); }

/* Losse uitleg in het formulier, zonder invoerveld eronder — nu gebruikt
   voor de foto-route. Staat bewust op de zachte tekstkleur: het is een
   terzijde, geen label van iets dat ingevuld moet worden. */
.veld__toelichting {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tekst-zacht);
}
.veld__toelichting a { color: var(--goud-leesbaar); }

.bestand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  min-height: 50px;
  padding: var(--s2) var(--s3);
  background: var(--ink-900);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.bestand__knop {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: 0 var(--s3);
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-s);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.bestand__knop svg { width: 16px; height: 16px; color: var(--goud-400); }
.bestand__naam { font-size: 0.9375rem; color: var(--tekst-zacht); overflow-wrap: anywhere; }

/* Het input-element zelf blijft in de tabvolgorde staan: niet
   display:none, maar weggeklipt. Enter erop opent de kiezer. */
.bestand__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}
.bestand:hover { border-color: var(--goud-700); }
.bestand__input:focus-visible + .bestand {
  border-color: var(--goud-400);
  box-shadow: 0 0 0 3px rgba(226, 198, 125, .22);
}

.veld__fout {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #F0B7A4;
}
.veld__fout svg { width: 14px; height: 14px; flex: none; }
.veld[data-fout] .veld__fout { display: flex; }
.veld[data-fout] input, .veld[data-fout] select, .veld[data-fout] textarea { border-color: #C4715A; }

.formulier__voet { display: grid; gap: var(--s3); margin-top: var(--s5); }
.formulier__voet p { font-size: 0.875rem; color: var(--tekst-zacht); max-width: none; }

/* Statusgebied: eerst leeg, na verzenden de bevestiging. */
.formstatus:empty { display: none; }
.formstatus {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--goud-700);
  border-radius: var(--r-s);
  background: rgba(226, 198, 125, .08);
  font-size: 0.9688rem;
}
.formstatus svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--goud-400); }
.formstatus strong { display: block; font-weight: 600; color: var(--tekst-op-donker); }

/* Drie toestanden na het verzenden. Alleen rand, vlak en icoon
   verschillen — de tekstkleuren blijven staan, zodat het contrast
   niet per toestand opnieuw nagerekend hoeft te worden.
   Doorgerekend op de gemengde achtergrond #2D2629: zachte tekst
   6,07:1, kop 13,34:1, icoon 6,63:1, rand 4,59:1. */
.formstatus[data-soort="gelukt"] { border-color: var(--goud-400); }
.formstatus[data-soort="fout"] {
  border-color: #C86B6B;
  background: rgba(200, 107, 107, .10);
}
.formstatus[data-soort="fout"] svg { color: #E59A9A; }
.formstatus[data-soort="bezig"] svg { animation: statusdraai 1.4s linear infinite; transform-origin: 50% 50%; }

@keyframes statusdraai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .formstatus[data-soort="bezig"] svg { animation: none; }
}

/* ------------------------------------------------------------------
   20. CTA-BAND

   De zwaarste sectie van elke pagina. Tekst staat nooit direct op
   een onrustige foto: er ligt altijd een ondoorzichtig verloop
   onder, en het beeld is al ingedrukt bij het exporteren.
------------------------------------------------------------------ */
.ctaband { position: relative; overflow: hidden; background: var(--ink-900); }

/* Let op de <picture>: het beeld zit in een picture-element, dus een
   kindselector op img mist. Zonder deze regel staat de foto in de
   flow en wordt de band honderden pixels te hoog. */
.ctaband > picture, .ctaband > img { position: absolute; inset: 0; }
.ctaband > picture img, .ctaband > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.ctaband__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(11, 11, 12, .97) 0%, rgba(11, 11, 12, .86) 44%, rgba(11, 11, 12, .58) 100%);
}
.ctaband__binnen {
  position: relative;
  display: grid;
  gap: var(--s5);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 880px) {
  .ctaband__binnen { grid-template-columns: minmax(0, 1.25fr) minmax(0, auto); gap: var(--s7); }
}
.ctaband h2 { margin-top: 0; font-size: clamp(1.75rem, 1.4rem + 1.7vw, 2.8rem); }
.ctaband p { margin-top: var(--s3); color: var(--tekst-zacht); }
.ctaband__acties { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ------------------------------------------------------------------
   21. VOETTEKST
------------------------------------------------------------------ */
.voet {
  background: var(--ink-900);
  color: var(--tekst-op-donker);
  border-top: 1px solid var(--goud-700);
}
.voet__boven {
  display: grid;
  gap: var(--s6) var(--s5);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
@media (min-width: 700px) { .voet__boven { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .voet__boven { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.voet__merk img { height: 62px; width: auto; }
.voet__merk p { margin-top: var(--s4); font-size: 0.9375rem; max-width: 34ch; color: var(--tekst-zacht); }

.voet h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud-400);
}
.voet ul { margin-top: var(--s3); display: grid; gap: var(--s1); }
.voet li { font-size: 0.9375rem; }
.voet a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 32px;
  color: var(--tekst-zacht);
  text-decoration: none;
  transition: color 200ms ease;
}
.voet a svg { width: 15px; height: 15px; color: var(--goud-700); }
@media (hover: hover) and (pointer: fine) {
  .voet a:hover { color: var(--goud-400); }
  .voet a:hover svg { color: var(--goud-400); }
}
.voet__socials { display: flex; gap: var(--s2); margin-top: var(--s3); }
.voet__socials .social { width: 44px; height: 44px; }

/* Mobiel compacter: alles onder elkaar maakt de voet onnodig lang.
   Het merkblok wordt een rij (logo naast de tekst), de twee
   linkkolommen staan naast elkaar, en het contactblok loopt daar
   onderdoor omdat een e-mailadres geen halve kolom past. */
@media (max-width: 699px) {
  .voet__boven {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5) var(--s4);
    padding-block: clamp(2rem, 6vw, 2.75rem) var(--s5);
  }
  .voet__merk {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s4);
    align-items: center;
  }
  .voet__merk img { height: 54px; }
  .voet__merk p { margin-top: 0; font-size: 0.875rem; max-width: none; }
  .voet__boven > :last-child { grid-column: 1 / -1; }
  .voet ul { gap: 0; }
  .voet li { font-size: 0.875rem; }
  .voet a { min-height: 30px; }
  .voet__socials { margin-top: var(--s2); }
}
@media (max-width: 360px) {
  .voet__merk { grid-template-columns: 1fr; gap: var(--s3); }
}

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding-block: var(--s4);
  border-top: 1px solid var(--lijn-hier);
  font-size: 0.875rem;
  color: var(--tekst-zacht);
}
.voet__onder ul { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; }
.voet__onder a { min-height: 28px; padding-inline: 2px; }

/* Subtiel maar aanwezig: even groot als de rest van de onderbalk, maar
   de naam staat in goud met het bliksemmotief ervoor. Op smalle
   schermen krijgt hij een eigen regel. */
.voet__bouwer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--tekst-op-donker-zacht);
}
.voet__bouwer a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  color: var(--goud-400);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.voet__bouwer svg { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) {
  .voet__bouwer a:hover { border-bottom-color: var(--goud-700); }
}
@media (max-width: 700px) {
  .voet__bouwer { width: 100%; margin-top: var(--s2); }
}

/* ------------------------------------------------------------------
   22. MOBIELE ACTIEBALK

   Twee acties, geen vier-icoons tabbalk: dat is een app-patroon en
   op een site van vijf pagina's steelt het gewicht van de enige
   actie die telt.
------------------------------------------------------------------ */
.actiebalk { display: none; }
@media (max-width: 780px) {
  .actiebalk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
    background: rgba(11, 11, 12, .96);
    border-top: 1px solid var(--ink-600);
  }
  .actiebalk .knop { min-height: 50px; padding-inline: var(--s3); font-size: 0.9688rem; }
  body { padding-bottom: 82px; }
  .lightbox { margin-bottom: 0; }
}
@media (max-width: 380px) {
  .actiebalk .knop svg { display: none; }
}

/* ------------------------------------------------------------------
   23. PAGINAKOP (onderpagina's)

   Twee varianten, en dat is ritme en geen gat: diensten en projecten
   krijgen een fotokop, over ons en contact een vlakke. Vier keer
   dezelfde fotokop achter elkaar is behang.

   De fotovariant gebruikt hetzelfde verloop als de hero: alleen aan
   de tekstzijde, zodat de rechterhelft van de foto schoon blijft.
------------------------------------------------------------------ */
.paginakop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: 42vh;
  background: var(--ink-900);
  color: var(--tekst-op-donker);
  margin-top: calc(-1 * var(--kop-hoogte));
  padding-top: calc(var(--kop-hoogte) + var(--s7));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.paginakop--beeld { min-height: 56vh; }
.paginakop--beeld::after { content: none; }

.paginakop__foto { position: absolute; inset: 0; z-index: -2; }
.paginakop__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.paginakop__verloop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg,
    rgba(11, 11, 12, .94) 0%,
    rgba(11, 11, 12, .86) 22%,
    rgba(11, 11, 12, .54) 42%,
    rgba(11, 11, 12, .12) 62%,
    rgba(11, 11, 12, 0) 78%);
}

/* Bliksemwatermerk op de vlakke variant, zodat die niet leeg oogt. */
.paginakop__watermerk {
  position: absolute;
  top: 50%;
  right: 4%;
  width: clamp(240px, 26vw, 420px);
  transform: translateY(-46%) rotate(-8deg);
  color: var(--goud-400);
  opacity: .05;
  pointer-events: none;
  z-index: -1;
}

.paginakop__binnen { position: relative; max-width: 44rem; }

.kruimels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: 0.875rem;
  color: var(--tekst-op-donker-zacht);
}
/* Minimaal 24px hoog: WCAG 2.2 AA-ondergrens voor klikdoelen.
   Zonder dit is de kruimel 38x23 en valt hij er net onder. */
.kruimels a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  text-decoration: none;
  transition: color 200ms ease;
}
.kruimels svg { width: 12px; height: 12px; color: var(--goud-700); }
.kruimels [aria-current="page"] { color: var(--tekst-op-donker); }
@media (hover: hover) and (pointer: fine) { .kruimels a:hover { color: var(--goud-400); } }

.paginakop h1 {
  margin-top: var(--s4);
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
}
.paginakop .lead { margin-top: var(--s3); color: #D2CFC8; }

@media (max-width: 720px) {
  .paginakop { min-height: 38vh; }
  .paginakop--beeld { min-height: 46vh; }
  .paginakop--beeld .paginakop__verloop {
    background: linear-gradient(180deg,
      rgba(11, 11, 12, .42) 0%,
      rgba(11, 11, 12, .30) 26%,
      rgba(11, 11, 12, .74) 58%,
      rgba(11, 11, 12, .95) 100%);
  }
}

/* ------------------------------------------------------------------
   24. BEWEGING

   Eén geregisseerd moment: de hero komt bij het laden binnen.
   Verder alleen reacties op wat de bezoeker zelf doet. Geen
   scroll-reveals — elke sectie dezelfde entree geven is geen regie
   maar behang, en het betekent dat inhoud er soms nog niet is als
   je hem zoekt.

   Alles start vanuit een al zichtbare toestand: valt JavaScript uit
   of komt de animatie niet op gang, dan staat de hero er gewoon.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__intro > * {
    animation: hero-in 640ms var(--ease-out) both;
  }
  .js .hero__intro > *:nth-child(1) { animation-delay: 40ms; }
  .js .hero__intro > *:nth-child(2) { animation-delay: 110ms; }
  .js .hero__intro > *:nth-child(3) { animation-delay: 180ms; }
  .js .hero__intro > *:nth-child(4) { animation-delay: 250ms; }
  .js .hero__beeld { animation: hero-beeld-in 760ms var(--ease-out) 180ms both; }

  @keyframes hero-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes hero-beeld-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }

}

/* De lightbox: een echte transitie in plaats van een keyframe, zodat
   hij onderbreekbaar is en ook een uitgang heeft. Zonder exit ploft
   het venster weg, en dat leest als een storing.

   Openen duurt 220ms, sluiten 150ms: de bezoeker beslist bij het
   openen, het systeem antwoordt bij het sluiten.

   Hij schaalt vanuit 0.96 en niet vanuit 0 — niets in de echte
   wereld verschijnt uit het niets. transform-origin blijft het
   midden: dit is een modaal venster, geen popover bij een trigger.

   Het @supports-hek is geen sier. De gesloten toestand staat op
   opacity 0; zonder allow-discrete blijft die 0 staan en is het
   venster onzichtbaar terwijl het wel de pagina blokkeert. In een
   browser zonder die ondersteuning verschijnt de lightbox dus
   gewoon direct, zonder overgang. */
@supports (transition-behavior: allow-discrete) {
  .lightbox {
    opacity: 0;
    transform: scale(0.96);
    transition:
      opacity 150ms var(--ease-out),
      transform 150ms var(--ease-out),
      overlay 150ms allow-discrete,
      display 150ms allow-discrete;
  }
  .lightbox[open] {
    opacity: 1;
    transform: scale(1);
    transition-duration: 220ms;
  }
  @starting-style {
    .lightbox[open] { opacity: 0; transform: scale(0.96); }
  }

  .lightbox::backdrop {
    opacity: 0;
    transition: opacity 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete;
  }
  .lightbox[open]::backdrop { opacity: 1; transition-duration: 220ms; }
  @starting-style {
    .lightbox[open]::backdrop { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Minder beweging is niet geen beweging. Verplaatsing en schaling
     gaan eruit, maar overgangen in kleur en dekking blijven: die
     maken duidelijk dat er iets verandert en veroorzaken geen
     misselijkheid. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color,
      box-shadow, outline-color, text-decoration-color !important;
    transition-duration: 160ms !important;
  }
  .js .hero__intro > *, .js .hero__beeld { opacity: 1; transform: none; }
  .lightbox, .lightbox[open] { transform: none; }
  .knop:active, .filter:active, .social:active,
  .project__extra a:active, .lightbox__sluit:active { transform: none; }
}

/* ------------------------------------------------------------------
   25. PRINT
------------------------------------------------------------------ */
@media print {
  .kop, .actiebalk, .ctaband, .filters, .lightbox, .menu { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; font-size: 11pt; }
  .donker, .donker-2, .voet, .paginakop, .hero { background: #fff !important; color: #000 !important; }
  .donker h1, .donker h2, .donker h3, .donker p,
  .donker-2 h1, .donker-2 h2, .donker-2 h3, .donker-2 p,
  .voet, .voet a, .paginakop h1, .hero h1, .hero .lead { color: #000 !important; }
  .cijfer__waarde, .goud, .signatuur strong { color: #000 !important; }
  a { text-decoration: underline; }
  .sectie { padding-block: 1.25rem; }
  .vraag__antwoord { display: block !important; }
}