/* ============================================================
   Michael Geerinck BV — landingspagina

   Palet:
     donker antraciet en leigrijs voor de donkere secties
     gebroken wit en lichtgrijs voor de lichte secties
     brons enkel als accent: knoppen, dunne lijnen, kleine details

   Licht en donker wisselen elkaar af. Elke sectie erft zijn kleuren uit
   semantische variabelen (--vlak, --tekst, --lijn, ...). Standaard staan die
   op donker; een sectie met de klasse .op-licht zet ze om naar licht. Zo hoeft
   geen enkele component te weten waar hij staat.

   Breekpunten:
     desktop  >= 1120px   (basis hieronder)
     tablet    720–1119px
     mobiel   <  720px
   ============================================================ */

:root {
  /* ---- Huisstijl ---- */
  --antraciet:       #23282d;   /* donkere basis */
  --antraciet-diep:  #1b2025;   /* footer, diepste vlak */
  --antraciet-hoog:  #2c3238;   /* verhoogd vlak op donker */
  --leigrijs:        #3c454e;   /* randen en scheidingen op donker */
  --gebroken-wit:    #f7f7f5;
  --lichtgrijs:      #e8eaec;
  --brons:           #c7925e;
  --brons-licht:     #e0b183;
  --brons-donker:    #8f5c2a;   /* brons als tekst op een lichte grond */
  --fout:            #b4472b;
  --fout-licht:      #d98a6b;

  /* ---- Semantische kleuren: standaard donker ---- */
  --vlak:        var(--antraciet);
  --vlak-2:      var(--antraciet-hoog);
  --tekst:       var(--gebroken-wit);
  --tekst-zacht: rgba(247, 247, 245, .72);
  --tekst-stil:  rgba(247, 247, 245, .52);
  --tekst-fijn:  rgba(247, 247, 245, .42);
  --lijn:        rgba(247, 247, 245, .14);
  --lijn-zacht:  rgba(247, 247, 245, .09);
  --brons-tekst: var(--brons);
  --invoer:      rgba(0, 0, 0, .22);
  --invoer-lijn: rgba(247, 247, 245, .18);
  --fout-tekst:  var(--fout-licht);

  /* ---- Maten: desktop ---- */
  --pad: 96px max(72px, (100% - 1480px) / 2);
  --pad-in: 96px 64px 96px 0;
  --pad-in-r: 96px 64px;
  --gut: max(72px, (100% - 1480px) / 2);
  --foot-pad: max(72px, (100% - 1480px) / 2);
  --nav-pad: 20px max(72px, (100% - 1480px) / 2);
  --logo-h: clamp(72px, 6.6vw, 108px);
  --g3: repeat(3, minmax(0, 1fr));
  --g4: repeat(4, minmax(0, 1fr));
  --trust-pad: 34px 30px;
  --trust-pad-first: 34px 30px 34px 0;
  --hero-h: 660px;
  --h1: 82px;
  --h2: 42px;
  --lead: 17px;
}

/* Lichte secties: enkel de semantische kleuren wisselen */
.op-licht {
  --vlak:        var(--gebroken-wit);
  --vlak-2:      #ffffff;
  --tekst:       var(--antraciet);
  --tekst-zacht: rgba(35, 40, 45, .74);
  --tekst-stil:  rgba(35, 40, 45, .54);
  --tekst-fijn:  rgba(35, 40, 45, .44);
  --lijn:        rgba(35, 40, 45, .14);
  --lijn-zacht:  rgba(35, 40, 45, .09);
  --brons-tekst: var(--brons-donker);
  --invoer:      #ffffff;
  --invoer-lijn: rgba(35, 40, 45, .22);
  --fout-tekst:  var(--fout);
}

/* Variant van een lichte sectie, iets grijzer voor ritme */
.op-licht.grijs { --vlak: var(--lichtgrijs); }

@media (max-width: 1119px) {
  :root {
    --pad: 64px 40px;
    --pad-in: 56px 36px 56px 0;
    --pad-in-r: 56px 36px;
    --gut: 40px;
    --foot-pad: 40px;
    --nav-pad: 16px 40px;
    --logo-h: clamp(64px, 9vw, 92px);
    --g3: 1fr;
    --g4: repeat(2, minmax(0, 1fr));
    --trust-pad: 30px 30px;
    --trust-pad-first: 30px 30px 30px 0;
    --hero-h: 560px;
    --h1: 56px;
    --h2: 32px;
    --lead: 16px;
  }
}

@media (max-width: 719px) {
  :root {
    --pad: 44px 22px 52px;
    --pad-in: 44px 22px 52px;
    --pad-in-r: 44px 22px 52px;
    --gut: 0px;
    --foot-pad: 22px;
    --nav-pad: 16px 22px;
    --logo-h: 62px;
    --g4: 1fr;
    --trust-pad: 26px 22px;
    --trust-pad-first: 26px 22px;
    --h1: 40px;
    --h2: 26px;
    --lead: 15px;
  }
}

/* ---------- Basis ---------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 152px;
}

body {
  margin: 0;
  background: var(--antraciet);
  color: var(--tekst);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }
img, svg { display: block; }

a { color: var(--brons-tekst); text-decoration: none; }
a:hover { color: var(--brons-licht); }
.op-licht a:hover { color: var(--brons); }

::selection { background: rgba(199, 146, 94, .35); }

input, textarea, select, button { font-family: Inter, system-ui, sans-serif; }
input::placeholder, textarea::placeholder { color: var(--tekst-fijn); }

:focus-visible { outline: 2px solid var(--brons); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brons); color: var(--antraciet);
  padding: 14px 20px; font: 600 12px/1 Inter, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.rule { display: block; width: 56px; height: 2px; background: var(--brons); }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-block; border: none; cursor: pointer;
  font: 600 12px/1 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; padding: 19px 30px;
  white-space: nowrap; text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid { background: var(--brons); color: var(--antraciet); }
.btn-solid:hover { background: var(--brons-licht); color: var(--antraciet); }
.btn-solid:disabled { opacity: .6; cursor: progress; }

.btn-line { border: 1px solid var(--invoer-lijn); color: var(--tekst); background: none; }
.btn-line:hover { border-color: var(--brons); color: var(--brons-tekst); }

.btn-outline {
  border: 1px solid var(--brons); color: var(--brons); background: none;
  font-size: 11px; letter-spacing: .14em; padding: 13px 20px;
}
.btn-outline:hover { background: var(--brons); color: var(--antraciet); }

.btn-dark { background: var(--antraciet); color: var(--gebroken-wit); letter-spacing: .14em; }
.btn-dark:hover { background: var(--antraciet-diep); color: var(--gebroken-wit); }

.btn-sm { padding: 15px 22px; font-size: 11px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: var(--nav-pad);
  background: rgba(35, 40, 45, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--leigrijs);
}
.logo { flex: none; display: flex; align-items: center; }
.logo img {
  height: var(--logo-h); width: auto; object-fit: contain;
  /* De regel "HVAC - SANITAIR - SERVICE" in het logo is fijne tekst;
     deze hint houdt ze scherp bij het schalen. */
  image-rendering: -webkit-optimize-contrast;
}

.nav { display: flex; align-items: center; gap: 28px; justify-content: flex-end; flex-wrap: nowrap; }
.nav .btn-outline { margin-left: 60px; }
.nav-link {
  font: 500 11px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; color: rgba(247, 247, 245, .78);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--brons); }
.nav-link.is-active { color: var(--brons); border-bottom-color: var(--brons); }

.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 1px solid var(--leigrijs);
  padding: 12px; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1.5px; background: var(--gebroken-wit); }

.mobile-menu {
  position: sticky; top: 0; z-index: 39;
  display: flex; flex-direction: column;
  background: var(--antraciet-hoog); border-bottom: 1px solid var(--leigrijs);
}
/* Een author-regel met display:flex overrulet het hidden-attribuut van de
   browser — daarom moet dat hier expliciet terug uitgezet worden. */
.mobile-menu[hidden] { display: none; }
.mobile-menu .nav-link {
  font-size: 12px; padding: 18px 22px;
  border-bottom: 1px solid var(--lijn-zacht); border-top: none;
}
.mobile-menu .nav-link.is-active { border-bottom-color: var(--lijn-zacht); }
.mobile-cta {
  background: var(--brons); color: var(--antraciet);
  font: 600 12px/1 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; padding: 18px 22px;
}
.mobile-cta:hover { color: var(--antraciet); }

@media (min-width: 1120px) { .mobile-menu { display: none; } }
@media (max-width: 1119px) {
  .nav { display: none; }
  .burger { display: flex; }
}

/* ---------- Hero ---------- */

.hero { position: relative; height: var(--hero-h); overflow: hidden; background: var(--antraciet); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(27, 32, 37, .96) 0%,
    rgba(27, 32, 37, .84) 42%,
    rgba(27, 32, 37, .28) 100%);
}
.hero-body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  padding: var(--pad); pointer-events: none;
}
.hero h1 {
  max-width: 13ch;
  font: 200 var(--h1)/1.12 Poppins, sans-serif;
  letter-spacing: .03em; text-transform: uppercase; text-wrap: pretty;
}
.hero-lead {
  max-width: 34ch;
  font: 300 var(--lead)/1.85 Inter, sans-serif;
  color: rgba(247, 247, 245, .8);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; pointer-events: auto; }

/* ---------- Vertrouwensbalk ---------- */

.trust {
  display: grid; grid-template-columns: var(--g4);
  padding: 0 var(--gut);
  background: var(--antraciet-hoog);
  border-bottom: 1px solid var(--leigrijs);
}
.trust-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: var(--trust-pad);
  border-right: 1px solid var(--lijn-zacht);
}
.trust-item:first-child { padding: var(--trust-pad-first); }
.trust-item:last-child { border-right: none; }
.trust-item svg { flex: none; width: 30px; height: 30px; margin-top: 2px; color: var(--brons); }
.trust-title {
  font: 500 12px/1 Inter, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 10px; color: var(--tekst);
}
.trust-text { font: 300 14px/1.6 Inter, sans-serif; color: var(--tekst-stil); }

@media (max-width: 1119px) { .trust-item:nth-child(2n) { border-right: none; } }
@media (max-width: 719px) {
  .trust-item { border-right: none; border-bottom: 1px solid var(--lijn-zacht); }
  .trust-item:last-child { border-bottom: none; }
}

/* ---------- Secties ---------- */

.section {
  padding: var(--pad);
  background: var(--vlak);
  color: var(--tekst);
  border-bottom: 1px solid var(--lijn);
}
.section-alt { background: var(--vlak-2); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 44px;
}
.section-head h2, .section-title {
  font: 200 var(--h2)/1.1 Poppins, sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
}
.section-head p {
  max-width: 38ch; font: 300 15px/1.7 Inter, sans-serif; color: var(--tekst-zacht);
}
.section-title { margin-bottom: 46px; }

/* ---------- Diensten ---------- */

.cards { display: grid; grid-template-columns: var(--g3); gap: 24px; }
.card {
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--brons); }
.card-media { height: 200px; overflow: hidden; flex: none; }
.card-media > img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 30px 26px 34px; display: flex; flex-direction: column; flex: 1; }
.kicker {
  font: 500 11px/1 Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brons-tekst); margin-bottom: 14px;
}
.card h3 {
  margin-bottom: 12px; color: var(--tekst);
  font: 300 22px/1.25 Poppins, sans-serif; letter-spacing: .01em;
}
.card p { font: 300 14px/1.7 Inter, sans-serif; color: var(--tekst-zacht); }

/* De losse diensten onder elke kaart, met een middenpunt ertussen */
.card-tags {
  list-style: none; margin: auto 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--lijn);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font: 500 10px/1.4 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tekst-stil);
}
.card-tags li { position: relative; }
.card-tags li + li::before {
  content: "·"; position: absolute; left: -9px; color: var(--brons);
}

/* ---------- Werkwijze ---------- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: var(--g4); gap: 1px;
  background: var(--lijn);
}
.step { background: var(--vlak); padding: 26px 22px 30px; }
.section-alt .step { background: var(--vlak-2); }
.step-num {
  font: 200 40px/1 Poppins, sans-serif;
  color: var(--brons); opacity: .55; margin-bottom: 16px;
}
.step h3 {
  margin-bottom: 10px; color: var(--tekst);
  font: 400 15px/1.3 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.step p { font: 300 14px/1.7 Inter, sans-serif; color: var(--tekst-zacht); }

/* ---------- Split (Over ons + Contact) ---------- */

.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding: 0 var(--gut);
  background: var(--vlak);
  color: var(--tekst);
  border-bottom: 1px solid var(--lijn);
}
.split-text { padding: var(--pad-in); border-right: 1px solid var(--lijn); }
.split-media { min-height: 420px; position: relative; overflow: hidden; }
.split-media > img { width: 100%; height: 100%; object-fit: cover; }

/* Tijdelijk merkvlak in plaats van een foto */
.split-media-brand {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(199, 146, 94, .18) 0%, transparent 62%),
    var(--antraciet-hoog);
}
.split-media-brand img { width: 120px; height: 120px; object-fit: contain; opacity: .55; }

.split h2 {
  margin-bottom: 22px;
  font: 200 var(--h2)/1.12 Poppins, sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
}
.split .lead { margin-bottom: 18px; font: 300 16px/1.75 Inter, sans-serif; color: var(--tekst-zacht); }
.split .muted { margin-bottom: 34px; font: 300 15px/1.75 Inter, sans-serif; color: var(--tekst-stil); }

@media (max-width: 719px) {
  .split-text { border-right: none; border-bottom: 1px solid var(--lijn); }
  .split-media { min-height: 260px; }
}

.stats { display: grid; grid-template-columns: var(--g3); gap: 1px; background: var(--lijn); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { background: var(--vlak); padding: 22px 18px; }
.stat-num { font: 200 34px/1 Poppins, sans-serif; color: var(--brons-tekst); }
.stat-label {
  margin-top: 8px;
  font: 400 11px/1.4 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst-stil);
}

/* ---------- Contact ---------- */

.contact-info { display: flex; flex-direction: column; gap: 26px; }
.eyebrow {
  font: 500 11px/1 Inter, sans-serif; letter-spacing: .24em;
  text-transform: uppercase; color: var(--tekst-stil); margin-bottom: 18px;
}
.eyebrow-accent { color: var(--brons-tekst); }
.contact-info > .eyebrow { margin-bottom: 0; }

.info-label {
  font: 500 11px/1 Inter, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tekst-stil); margin-bottom: 8px;
}
.info-value { font: 300 20px/1.4 Poppins, sans-serif; color: var(--tekst); }
.info-value:hover { color: var(--brons-tekst); }
.info-text { font: 300 16px/1.7 Inter, sans-serif; color: var(--tekst-zacht); }

.contact-note {
  margin-top: auto; padding-top: 28px;
  border-top: 1px solid var(--lijn);
  max-width: 34ch;
  font: 300 15px/1.75 Inter, sans-serif; color: var(--tekst-stil);
}
@media (max-width: 719px) { .contact-note { margin-top: 0; } }

.form-panel { padding: var(--pad-in-r); background: var(--vlak-2); }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form .eyebrow { letter-spacing: .2em; margin: 0; }

/* display:flex verslaat het hidden-attribuut, dus expliciet uitzetten:
   anders staan het formulier en de bedankboodschap allebei op de pagina. */
.contact-form[hidden], .form-done[hidden] { display: none; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font: 500 10px/1 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tekst-stil);
}
.field input, .field textarea {
  background: var(--invoer); border: 1px solid var(--invoer-lijn);
  color: var(--tekst); padding: 14px; font: 300 15px/1.6 Inter, sans-serif;
}
.field textarea { resize: none; min-height: 150px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--fout-tekst); }

.field-error {
  font: 400 11px/1.4 Inter, sans-serif; letter-spacing: .04em;
  text-transform: none; color: var(--fout-tekst);
}
.field-error:empty { display: none; }

.topics { display: flex; flex-direction: column; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--invoer-lijn); background: transparent;
  color: var(--tekst-zacht);
  font: 500 11px/1 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; padding: 12px 16px; cursor: pointer;
}
.chip:hover { border-color: var(--brons); color: var(--brons-tekst); }
.chip.is-on { background: var(--brons); border-color: var(--brons); color: var(--antraciet); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.form-note { font: 300 13px/1.6 Inter, sans-serif; color: var(--tekst-stil); }
.form-note[data-state="error"] { color: var(--fout-tekst); font-weight: 500; }

.form-done { display: flex; flex-direction: column; gap: 16px; padding: 40px 0; }
.form-done .rule { width: 36px; }
.done-title { font: 200 26px/1.3 Poppins, sans-serif; color: var(--tekst); }
.done-text { font: 300 15px/1.7 Inter, sans-serif; color: var(--tekst-zacht); }
.form-done .btn { align-self: flex-start; margin-top: 10px; }

/* ---------- Soort aanvraag: drie tabbladen ---------- */

/* Geen fieldset met legend: browsers plaatsen een legend eigenzinnig en
   negeren de tussenruimte. Een gewone groep met aria-labelledby leest voor een
   schermlezer hetzelfde en houdt zich wel aan de opmaak. */
/* 8px, precies zoals .field: dan staat dit label even ver van zijn
   knoppen als "Naam" van zijn invoerveld. */
.soort { display: flex; flex-direction: column; gap: 8px; }
.soort-keuze {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--invoer-lijn);
}
@media (max-width: 560px) { .soort-keuze { grid-template-columns: 1fr; } }

.soort-optie { position: relative; display: flex; }
.soort-optie input {
  position: absolute; opacity: 0; width: 1px; height: 1px;   /* wel bereikbaar met toetsenbord */
}
.soort-optie span {
  flex: 1; padding: 14px 12px; text-align: center; cursor: pointer;
  font: 500 11px/1.3 Inter, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-zacht);
  border-right: 1px solid var(--invoer-lijn);
  transition: background .15s ease, color .15s ease;
}
.soort-optie:last-child span { border-right: none; }
@media (max-width: 560px) {
  .soort-optie span { border-right: none; border-bottom: 1px solid var(--invoer-lijn); }
  .soort-optie:last-child span { border-bottom: none; }
}
.soort-optie span:hover { background: rgba(199, 146, 94, .1); color: var(--brons-tekst); }
.soort-optie input:checked + span { background: var(--brons); color: var(--antraciet); }
.soort-optie input:focus-visible + span { outline: 2px solid var(--brons); outline-offset: 2px; }

/* ---------- Keuzelijst ---------- */

.field select {
  width: 100%; padding: 14px; cursor: pointer;
  background: var(--invoer); border: 1px solid var(--invoer-lijn);
  color: var(--tekst); font: 300 15px Inter, sans-serif;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select:invalid { color: var(--tekst-fijn); }

/* ---------- Bestanden toevoegen ---------- */

.uploadvak {
  display: block; cursor: pointer;
  padding: 26px 20px; text-align: center;
  background: var(--invoer);
  border: 1px dashed var(--invoer-lijn);
  transition: border-color .15s ease, background .15s ease;
}
.uploadvak:hover, .uploadvak.is-over { border-color: var(--brons); background: rgba(199, 146, 94, .07); }
.uploadvak input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.uploadvak-tekst {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font: 300 14px/1.5 Inter, sans-serif; color: var(--tekst-zacht);
}
.uploadvak-tekst svg { width: 22px; height: 22px; color: var(--brons); }
.uploadvak-tekst strong { font-weight: 500; color: var(--tekst); }
.uploadvak small {
  display: block; margin-top: 8px;
  font: 300 12px/1.5 Inter, sans-serif; color: var(--tekst-stil);
}
.uploadvak input:focus-visible + .uploadvak-tekst { outline: 2px solid var(--brons); outline-offset: 4px; }

.uploadlijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.uploadlijst:empty { display: none; }
.uploadlijst li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: var(--vlak); border: 1px solid var(--lijn);
  font: 300 13px/1.4 Inter, sans-serif; color: var(--tekst-zacht);
}
.uploadlijst .bestandsnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploadlijst .bestandsmaat { flex: none; color: var(--tekst-stil); font-size: 12px; }
.uploadlijst li[data-fout] { border-color: var(--fout-tekst); color: var(--fout-tekst); }

/* ---------- Toelating en privacy ---------- */

.akkoord {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font: 300 13px/1.65 Inter, sans-serif; color: var(--tekst-zacht);
}
.akkoord input {
  width: 18px; height: 18px; margin-top: 2px; flex: none;
  accent-color: var(--brons);
}
.akkoord a { text-decoration: underline; text-underline-offset: 2px; }
.akkoord .field-error { display: block; margin-top: 4px; }

/* ---------- Afsluitende oproep ---------- */

.cta {
  background: var(--antraciet-hoog); color: var(--gebroken-wit);
  padding: var(--pad);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px;
  border-bottom: 1px solid var(--leigrijs);
}
.cta h2 {
  margin-bottom: 14px; max-width: 20ch;
  font: 200 var(--h2)/1.08 Poppins, sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
}
.cta p { max-width: 44ch; font: 300 15px/1.7 Inter, sans-serif; color: rgba(247, 247, 245, .72); }

/* ---------- Footer ---------- */

.site-footer { background: var(--antraciet-diep); border-top: 2px solid var(--brons); }
.footer-cols {
  padding: var(--pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px;
}

/* Links links, midden gecentreerd, rechts tegen de rechtermarge */
@media (min-width: 720px) {
  .footer-cols > :nth-child(2) { text-align: center; }
  .footer-cols > :last-child { text-align: right; }
  .footer-bar > :nth-child(2) { justify-self: center; }
}

.footer-head {
  font: 500 10px/1 Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tekst-fijn); margin-bottom: 16px;
}
.footer-text { font: 300 14px/1.7 Inter, sans-serif; color: rgba(247, 247, 245, .58); }
.footer-mark { width: 52px; height: 52px; margin-top: 26px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font: 300 14px Inter, sans-serif; }
.footer-links a { color: rgba(247, 247, 245, .72); }
.footer-links a:hover { color: var(--brons); }
.footer-links span { color: rgba(247, 247, 245, .48); }

.footer-bar {
  padding: 20px var(--foot-pad);
  border-top: 1px solid var(--lijn);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 36px;
  font: 400 10px/1.6 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247, 247, 245, .38);
}
.footer-bar > :last-child { justify-self: end; text-align: right; }
@media (max-width: 719px) {
  .footer-bar > :last-child { justify-self: start; text-align: left; }
}
.footer-bar a { color: rgba(247, 247, 245, .38); }
.footer-bar a:hover { color: var(--brons); }
.footer-legal { display: flex; gap: 10px; }

/* ---------- Webmatics-credit ---------- */
/* Onderlijn die vanuit het midden opengaat. Afwijking van de globale CSS:
   daar staat z-index:-1 op de lijn; die zou hier achter de achtergrond van de
   footer vallen. En vertical-align blijft op baseline, want middle zet het
   woord hoger dan de tekst ernaast. */

.hvr-underline-from-center-thin {
  display: inline-block;
  vertical-align: baseline;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.hvr-underline-from-center-thin::before {
  content: "";
  position: absolute;
  left: 51%; right: 51%; bottom: 0;
  height: 1px;
  background: #05BB93;
  transition: left .3s ease-out, right .3s ease-out;
}
.hvr-underline-from-center-thin:hover::before,
.hvr-underline-from-center-thin:focus::before,
.hvr-underline-from-center-thin:active::before {
  left: 0; right: 0;
}

.footer-bar .webmatics { color: #fff; }
.footer-bar .webmatics:hover,
.footer-bar .webmatics:focus { color: #05BB93; }

/* ---------- Tekstpagina's (privacyverklaring, ...) ---------- */

.prose {
  border-bottom: none;
  background: var(--vlak); color: var(--tekst);
}
.prose > * { max-width: 68ch; }

.prose h1 {
  font: 200 var(--h2)/1.1 Poppins, sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
}
.prose .rule { margin: 26px 0 34px; }
.prose h2 {
  margin: 46px 0 14px;
  font: 400 15px/1.3 Inter, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tekst);
}
.prose p, .prose li { font: 300 15px/1.8 Inter, sans-serif; color: var(--tekst-zacht); }
.prose .prose-lead { font-size: 16px; color: var(--tekst); }
.prose ul { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--brons); }
.prose p { margin-bottom: 16px; }
.prose strong { color: var(--tekst); font-weight: 500; }

/* Nog aan te vullen door de klant — valt bewust op */
.prose mark {
  background: rgba(199, 146, 94, .22);
  color: var(--brons-tekst);
  padding: 1px 6px;
}

.prose .prose-date {
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--lijn);
  font-size: 13px; color: var(--tekst-stil);
}

/* ---------- Fotoplaatsen ---------- */
/* Zolang er geen foto is, toont dit blok wélke foto hier hoort.
   Vervangen door: <img src="images/xxx.webp" alt="..."> */

[data-placeholder] {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(247, 247, 245, .035) 0 12px, transparent 12px 24px),
    var(--antraciet-hoog);
  border: 1px dashed var(--lijn);
}
.op-licht [data-placeholder] {
  background:
    repeating-linear-gradient(135deg, rgba(35, 40, 45, .05) 0 12px, transparent 12px 24px),
    var(--lichtgrijs);
}
[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  font: 400 11px/1.6 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst-fijn);
}

/* ---------- Binnenkort online (coming-soon.html) ---------- */

.cs-body {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--antraciet);
}
.cs-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.cs-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(27, 32, 37, .96) 0%, rgba(27, 32, 37, .88) 45%, rgba(27, 32, 37, .58) 100%),
    radial-gradient(120% 80% at 20% 40%, rgba(199, 146, 94, .12) 0%, transparent 60%);
}
.cs-main {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px;
  padding: clamp(40px, 8vw, 96px) max(28px, (100% - 1180px) / 2);
  max-width: 100%;
}
.cs-logo {
  height: clamp(64px, 9vw, 104px); width: auto;
  object-fit: contain; margin-bottom: clamp(20px, 4vw, 44px);
}
.cs-main .eyebrow { margin: 0; }
.cs-main h1 {
  max-width: 22ch;
  font: 200 clamp(30px, 5.4vw, 62px)/1.12 Poppins, sans-serif;
  letter-spacing: .03em; text-transform: uppercase; text-wrap: pretty;
}
.cs-lead {
  max-width: 46ch;
  font: 300 clamp(15px, 1.6vw, 17px)/1.85 Inter, sans-serif;
  color: rgba(247, 247, 245, .8);
}
.cs-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.cs-actions .btn { text-transform: none; letter-spacing: .04em; font-size: 15px; }
.cs-foot {
  margin-top: clamp(24px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--lijn);
  max-width: 58ch;
  font: 400 10px/2 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst-stil);
}
.cs-credit {
  position: relative; z-index: 2;
  padding: 18px max(28px, (100% - 1180px) / 2);
  font: 400 10px/1.6 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst-stil);
}
.cs-credit .webmatics { color: #fff; }
.cs-credit .webmatics:hover, .cs-credit .webmatics:focus { color: #05BB93; }

/* ---------- Bewegingsvoorkeur ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Werkwijze staat op lichtgrijs; de stappen zelf op wit, voor ritme */
.grijs .steps { background: var(--lijn); }
.grijs .step { background: var(--vlak-2); }

/* Toelichting onder een veld */
.field-hint {
  font: 300 12px/1.5 Inter, sans-serif; color: var(--tekst-stil);
}

/* Overzicht van wat er verstuurd is, in de bevestiging */
.done-lijst {
  list-style: none; margin: 4px 0; padding: 16px 0;
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
  display: grid; gap: 6px;
  font: 300 14px/1.6 Inter, sans-serif; color: var(--tekst-zacht);
}
.done-lijst:empty { display: none; }
.done-lijst strong { color: var(--tekst); font-weight: 500; }