/* ============================================================================
   Voets-Aarts, projectlaag
   ----------------------------------------------------------------------------
   Alles wat het design systeem niet levert maar deze site wel nodig heeft.

   Drie regels waar deze laag zich aan houdt:

   1. Uitsluitend tegen de DS-tokens stylen. Geen losse hexwaarden, geen losse
      px waar een --ds-space-* bestaat. Anders breekt het merkverschil.
   2. Kaarten zijn randloos en schaduwloos. Blokken onderscheiden zich met een
      licht achtergrondvlak. Schaduw betekent hoogte, niet decoratie, en komt
      alleen voor op de drie dingen die echt boven de pagina zweven: de vaste
      mobiele balk, het open menu en de voor-en-na-schuif.
   3. Drie bedoelde bewegingen op de hele pagina, niet meer. Ze staan in
      sectie 14 bij elkaar, zodat je ze kunt tellen.

   Prefix: va- zodat het nooit botst met ds-.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Fundament
   --------------------------------------------------------------------------- */

.va-skip {
  position: absolute;
  left: var(--ds-space-4);
  top: var(--ds-space-4);
  z-index: calc(var(--ds-z-header) + 10);
  transform: translateY(-200%);
  transition: transform var(--ds-duration) var(--ds-ease);
}
.va-skip:focus-visible { transform: translateY(0); }

/* Ankers moeten onder de sticky header uitkomen, niet erachter. */
[id] { scroll-margin-top: 5.5rem; }
html { scroll-behavior: smooth; }

.va-lead  { font-size: var(--ds-text-lead); color: var(--ds-fg-muted); }
.va-small { font-size: var(--ds-text-sm);  color: var(--ds-fg-muted); }

/* Sectiehoogte. De oude waarde liep tot 120px boven en onder, wat elke sectie
   onnodig lang maakte. Dit is de meest terugkerende correctie in dit project. */
:root { --ds-section-y: clamp(3rem, 2rem + 3.6vw, 5.5rem); }
.ds-sectionhead { margin-bottom: var(--ds-space-10); }

/* Stuclaag. Een heel fijne korrel over de donkere vlakken, zodat een egale
   donkere sectie niet als een plat gekleurd blok leest. Op 3% is hij niet als
   textuur te herkennen, alleen als diepte. Eén SVG van 140 bij 140 die tegelt,
   dus geen extra verzoek en geen meetbare kosten. */
.va-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bouwnotitie, geen ontwerponderdeel. Bewust strak en grijs zodat hij niet
   voor een designelement wordt aangezien en je hem niet vergeet weg te halen. */
.va-note {
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-4) var(--ds-space-5);
  font-size: var(--ds-text-sm);
  color: var(--ds-fg-muted);
  background: transparent;
}
.va-note p { margin: 0; max-width: none; }
.va-note strong { color: var(--ds-fg); font-weight: var(--ds-weight-medium); }

/* ---------------------------------------------------------------------------
   2. Header
   --------------------------------------------------------------------------- */

.va-headroom { position: sticky; top: 0; z-index: var(--ds-z-header); }

.va-headroom .ds-header {
  background: color-mix(in srgb, var(--ds-surface) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ds-duration) var(--ds-ease),
              background var(--ds-duration) var(--ds-ease);
}
.va-headroom[data-scrolled='true'] .ds-header {
  background: color-mix(in srgb, var(--ds-surface) 96%, transparent);
  border-bottom-color: var(--ds-border);
}

/* Telefoon en WhatsApp naast elkaar in de header. WhatsApp is in dit vak het
   kanaal met de laagste drempel: een foto van de muur sturen kan wel, bellen
   vraagt dat je het verhaal meteen kunt vertellen. */
.va-headeractions { display: flex; align-items: center; gap: var(--ds-space-2); }

.va-iconlink {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 44px;
  padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  color: var(--ds-fg);
  text-decoration: none;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
  transition: background var(--ds-duration) var(--ds-ease),
              color var(--ds-duration) var(--ds-ease);
}
.va-iconlink svg { flex: none; }
.va-iconlink:hover { background: var(--ds-surface-alt); color: var(--ds-fg); }
.va-iconlink--wa:hover { color: var(--ds-accent-2-ink); }

.va-burger { display: none; }

/* Mobiel menu. Het systeem levert er geen, dus hier als <dialog>: die regelt
   de focus-trap, de inertie van de achtergrond en Escape zelf. */
.va-menu {
  border: 0;
  padding: 0;
  width: min(23rem, 90vw);
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  background: var(--ds-surface);
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow-lg);
}
.va-menu::backdrop { background: rgba(25, 21, 18, 0.55); backdrop-filter: blur(2px); }
.va-menu__inner {
  padding: var(--ds-space-6);
  display: grid;
  gap: var(--ds-space-6);
  align-content: start;
  height: 100%;
}
.va-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.va-menu__list a {
  display: block;
  padding: var(--ds-space-3) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-fg);
  text-decoration: none;
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h3);
  letter-spacing: var(--ds-heading-tracking);
}
.va-menu__list a:hover { background: var(--ds-surface-alt); }
.va-menu__foot { margin-top: auto; display: grid; gap: var(--ds-space-3); }

/* Vaste actiebalk onderaan op mobiel. Bellen en WhatsApp, de twee kanalen die
   in dit vak daadwerkelijk gebruikt worden. Dit is de duurste knop die op een
   ambachtssite pleegt te ontbreken. */
.va-actionbar { display: none; }

@media (max-width: 980px) {
  .ds-header__nav { display: none; }
  .va-iconlink > span:not(.ds-visually-hidden) { display: none; }
  .va-iconlink { padding-inline: var(--ds-space-2); }

  /* De offerteknop past niet naast logo, telefoon, WhatsApp en burger. Hij
     staat in het menu en de vaste balk onderaan draagt de twee kanalen die
     hier tellen, dus hier kan hij weg. */
  .ds-header__actions > .ds-btn,
  .va-headeractions > .ds-btn { display: none; }

  .va-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-fg);
    cursor: pointer;
  }

  .va-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--ds-z-sticky);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    padding-bottom: max(var(--ds-space-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-md);
  }
  body { padding-bottom: 5.5rem; }
}

/* Onder 560px passen logo, telefoon, WhatsApp en burger niet meer naast
   elkaar: samen 358px in een kolom van 350px. De tagline gaat eruit en de
   naam krimpt. Het beeldmerk blijft, want daar wordt het merk aan herkend. */
@media (max-width: 560px) {
  .ds-header .ds-logo__tagline { display: none; }
  .ds-header .ds-logo__text { font-size: 16px !important; }
  .ds-header .ds-logo__mark { width: 34px; height: 34px; }
  .va-headeractions { gap: 0; }
}

/* ---------------------------------------------------------------------------
   3. Hero
   ----------------------------------------------------------------------------
   Geen achtergrondfoto meer. Die was 800px breed en werd schermvullend
   getoond, dus op elk desktopscherm keek je naar opgeblazen beeld. Bovendien
   concurreerde hij met de voor-en-na-schuif ernaast: twee foto's die om
   aandacht vragen in hetzelfde blok.

   Wat ervoor in de plaats komt: een diepe stucgrond met korrel, en de
   voor-en-na-schuif als het enige beeld. Dat is meteen het sterkste argument
   van het vak. Stucwerk beoordeel je niet op een productfoto maar op het
   verschil met de situatie ervoor, en bijna geen enkele concurrent laat dat zien.
   --------------------------------------------------------------------------- */

.va-hero {
  position: relative;
  overflow: hidden;
  background: var(--ds-surface-inverse);
  color: var(--ds-fg-on-inverse);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  isolation: isolate;
}

/* Zacht licht linksboven, alsof er van opzij op een verse wand geschenen
   wordt. Puur kleur, dus gratis, en het haalt de vlakheid uit het donker. */
.va-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(90rem 50rem at 8% -10%,
      color-mix(in srgb, var(--ds-color-orange-500) 16%, transparent) 0%,
      transparent 62%),
    radial-gradient(60rem 40rem at 95% 105%,
      color-mix(in srgb, var(--ds-color-cyan-500) 12%, transparent) 0%,
      transparent 60%);
}

.va-hero__grid { display: grid; gap: var(--ds-space-10); align-items: center; }
@media (min-width: 1000px) {
  .va-hero__grid { grid-template-columns: 1fr 1.05fr; gap: var(--ds-space-16); }
}

.va-hero__copy { max-width: 34rem; }
.va-hero__title {
  font-size: var(--ds-text-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ds-fg-on-inverse);
  margin: 0 0 var(--ds-space-5);
  text-wrap: balance;
}
/* Tweede zin van de kop in een lichter gewicht: de dienst en de plaats staan
   voorop, de belofte volgt. Zo leest de H1 als één zin met twee snelheden. */
.va-hero__title b { font-weight: 700; display: block; }
.va-hero__title span { font-weight: 400; color: var(--ds-color-sand-300); }

.va-hero__sub {
  font-size: var(--ds-text-lead);
  line-height: 1.5;
  color: var(--ds-color-sand-300);
  margin: 0 0 var(--ds-space-8);
  max-width: 32rem;
}
.va-hero__sub strong { color: var(--ds-fg-on-inverse); font-weight: var(--ds-weight-medium); }

.va-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }

/* De regel onder de knoppen. Draagt het bewijs dat de hero zelf niet mag
   opeten: geen kaartjes, geen iconen, gewoon één zin. */
.va-hero__foot {
  margin: var(--ds-space-6) 0 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-color-sand-400);
}
.va-hero__foot strong { color: var(--ds-color-sand-200); font-weight: var(--ds-weight-medium); }

/* Merkstreep op de onderrand van de hero. Het enige decoratieve element op de
   pagina, en het komt letterlijk uit het logo. */
.va-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; }

/* ---------------------------------------------------------------------------
   4. Voor-en-na-schuif
   ----------------------------------------------------------------------------
   Eigen implementatie: een <input type=range> over twee foto's. Daarmee werkt
   hij met muis, touch en pijltjestoetsen zonder dat er een bibliotheek bij
   hoeft. De range is de waarheid, CSS doet de rest via --va-pos.
   --------------------------------------------------------------------------- */

.va-ba {
  position: relative;
  border-radius: var(--ds-radius-media);
  overflow: hidden;
  background: var(--ds-surface-sunken);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  touch-action: pan-y;
}
.va-hero .va-ba { box-shadow: var(--ds-shadow-lg); }

.va-ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.va-ba__after { clip-path: inset(0 0 0 var(--va-pos, 50%)); }

.va-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}
.va-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--va-pos, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(25, 21, 18, 0.3);
  z-index: 2;
  pointer-events: none;
}
.va-ba__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  translate: -50% -50%;
  border-radius: var(--ds-radius-pill);
  background: #fff;
  box-shadow: 0 2px 10px rgba(25, 21, 18, 0.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23221d19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.va-ba__range:focus-visible ~ .va-ba__handle::after {
  outline: var(--ds-focus-width) solid var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}
.va-ba__tag {
  position: absolute;
  top: var(--ds-space-3);
  z-index: 2;
  padding: 3px var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  background: rgba(25, 21, 18, 0.78);
  color: #fff;
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.va-ba__tag--before { left: var(--ds-space-3); }
.va-ba__tag--after  { right: var(--ds-space-3); }

/* Bijschrift onder de schuif in de hero: vertelt wat je ziet en waarom het
   er staat, zodat het geen los speeltje is. */
.va-ba__caption {
  margin: var(--ds-space-3) 0 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-color-sand-400);
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}
.va-ba__caption svg { flex: none; }

/* ---------------------------------------------------------------------------
   5. Vertrouwensstrip
   --------------------------------------------------------------------------- */

.va-trust { border-bottom: 1px solid var(--ds-border); background: var(--ds-surface); }
.va-trust__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-5) var(--ds-space-6);
  padding-block: var(--ds-space-6);
}
@media (min-width: 900px) {
  .va-trust__row { grid-template-columns: repeat(4, 1fr); }
}
.va-trust__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-ui);
  color: var(--ds-fg-muted);
  text-decoration: none;
  max-width: none;
}
.va-trust__item svg { flex: none; color: var(--ds-accent-2-ink); }
.va-trust__item b {
  display: block;
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h5);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-fg);
}
a.va-trust__item:hover b { color: var(--ds-accent-ink); }

/* Sterren. Vier vol plus één half, want de score is 4,5 en niet 5. */
.va-stars { display: inline-flex; color: var(--ds-accent); }
.va-stars svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------------
   6. Herken je dit
   ----------------------------------------------------------------------------
   Het probleem in de woorden van de bezoeker, met het gevolg erbij. Zonder
   het gevolg is het een opsomming, met het gevolg is het een reden om nu iets
   te doen. Geen nummering: dit is geen volgorde.
   --------------------------------------------------------------------------- */

.va-problems { display: grid; gap: var(--ds-space-6); }
@media (min-width: 760px) { .va-problems { grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-8); } }

.va-problem { display: flex; gap: var(--ds-space-4); align-items: flex-start; }
.va-problem__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-accent-ink);
}
.va-problem h3 { font-size: var(--ds-text-h5); margin: 0 0 var(--ds-space-1); }
.va-problem p  { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-fg-muted); max-width: 42ch; }

/* ---------------------------------------------------------------------------
   7. Prijsindicator
   ----------------------------------------------------------------------------
   De eerste vraag in dit vak is wat het per vierkante meter kost. De meeste
   stukadoors laten je daarvoor eerst bellen. Dit blok beantwoordt hem meteen,
   en is daarmee het conversiemoment van de pagina.
   --------------------------------------------------------------------------- */

.va-calc { display: grid; gap: var(--ds-space-8); align-items: start; }
@media (min-width: 1000px) { .va-calc { grid-template-columns: 1.15fr 1fr; gap: var(--ds-space-12); } }

.va-calc__panel { display: grid; gap: var(--ds-space-8); }

.va-calc__legend {
  display: block;
  margin-bottom: var(--ds-space-3);
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h5);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-fg);
}
.va-calc__legend i {
  font-style: normal;
  color: var(--ds-accent-ink);
  margin-right: var(--ds-space-2);
}

.va-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-2); }
@media (min-width: 640px) { .va-choices { grid-template-columns: repeat(3, 1fr); } }

.va-choice { position: relative; }
.va-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.va-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--ds-space-2) var(--ds-space-3);
  text-align: center;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-ui);
  cursor: pointer;
  transition: border-color var(--ds-duration) var(--ds-ease),
              background var(--ds-duration) var(--ds-ease);
}
.va-choice input:checked + span {
  border-color: var(--ds-color-ink);
  background: var(--ds-color-ink);
  color: var(--ds-color-white);
  font-weight: var(--ds-weight-medium);
}
.va-choice input:focus-visible + span {
  outline: var(--ds-focus-width) solid var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}

.va-range { width: 100%; accent-color: var(--ds-color-ink); height: 44px; display: block; }
.va-range__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--ds-text-xs);
  color: var(--ds-fg-subtle);
}

/* Het resultaat is het enige donkere vlak in deze sectie. Daarmee is het het
   antwoord, en niet zomaar de rechterkolom. */
.va-calc__out {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-surface-inverse);
  color: var(--ds-fg-on-inverse);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-8);
}
@media (min-width: 1000px) { .va-calc__out { position: sticky; top: 5.5rem; } }

.va-calc__amount {
  display: block;
  margin: var(--ds-space-2) 0 var(--ds-space-2);
  font-family: var(--ds-heading-font);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.va-calc__unit { font-size: var(--ds-text-sm); color: var(--ds-color-sand-400); margin: 0; }
.va-calc__disclaimer {
  font-size: var(--ds-text-sm);
  color: var(--ds-color-sand-400);
  border-top: 1px solid var(--ds-border-inverse);
  padding-top: var(--ds-space-4);
  margin: var(--ds-space-6) 0 0;
  max-width: none;
}

/* ---------------------------------------------------------------------------
   8. Social proof, compacte band
   --------------------------------------------------------------------------- */

/* Deze band hoort bij de prijsindicator erboven, niet als losse sectie ertussen. */
.va-score-sectie { padding-block: 0 var(--ds-space-4); }
.va-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-6);
  padding: var(--ds-space-6) var(--ds-space-8);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-alt);
}
.va-score__figure { display: flex; align-items: center; gap: var(--ds-space-4); }
.va-score__value {
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.va-score__meta { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-fg-muted); }

/* ---------------------------------------------------------------------------
   9. Diensten, bento
   --------------------------------------------------------------------------- */

.va-bento { display: grid; gap: var(--ds-space-4); }
@media (min-width: 700px)  { .va-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .va-bento { grid-template-columns: repeat(4, 1fr); }
  .va-bento > :nth-child(1),
  .va-bento > :nth-child(2) { grid-column: span 2; }
}

.va-tile {
  position: relative;
  display: block;
  border-radius: var(--ds-radius-media);
  overflow: hidden;
  min-height: 14rem;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.va-bento > :nth-child(1) .va-tile__inner,
.va-bento > :nth-child(2) .va-tile__inner { min-height: 19rem; }

.va-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.va-tile__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 14rem;
  height: 100%;
  padding: var(--ds-space-6);
  background: linear-gradient(
    to top,
    rgba(21, 17, 14, 0.92) 0%,
    rgba(21, 17, 14, 0.62) 45%,
    rgba(21, 17, 14, 0.10) 100%
  );
  transition: background var(--ds-duration-slow) var(--ds-ease);
}
.va-tile:hover .va-tile__inner {
  background: linear-gradient(
    to top,
    rgba(21, 17, 14, 0.95) 0%,
    rgba(21, 17, 14, 0.72) 55%,
    rgba(21, 17, 14, 0.22) 100%
  );
}
.va-tile__title {
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--ds-space-2);
}
.va-tile__text {
  margin: 0;
  max-width: 34ch;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-ui);
  color: rgba(255, 255, 255, 0.86);
}
.va-tile__price {
  margin-top: var(--ds-space-4);
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-color-orange-300);
}

/* ---------------------------------------------------------------------------
   10. Projecten
   --------------------------------------------------------------------------- */

.va-filter { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-bottom: var(--ds-space-8); }
.va-filter label { position: relative; }
.va-filter input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.va-filter span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--ds-space-4);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-sm);
  cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease),
              border-color var(--ds-duration) var(--ds-ease),
              color var(--ds-duration) var(--ds-ease);
}
.va-filter input:checked + span {
  background: var(--ds-color-ink);
  border-color: var(--ds-color-ink);
  color: var(--ds-color-white);
  font-weight: var(--ds-weight-medium);
}
.va-filter input:focus-visible + span {
  outline: var(--ds-focus-width) solid var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}

.va-projects { display: grid; gap: var(--ds-space-6); }
@media (min-width: 700px)  { .va-projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .va-projects { grid-template-columns: repeat(3, 1fr); } }

.va-project__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-4);
}
.va-project__meta h3 { font-size: var(--ds-text-h5); margin: 0; }
.va-project__place { font-size: var(--ds-text-sm); color: var(--ds-fg-muted); }

/* Filteren zonder JavaScript: de radiogroep stuurt de zichtbaarheid aan. */
.va-projects__wrap:has(#f-alle:checked) .va-project { display: block; }
.va-projects__wrap:has(#f-nieuwbouw:checked) .va-project:not([data-cat='nieuwbouw']) { display: none; }
.va-projects__wrap:has(#f-badkamer:checked)  .va-project:not([data-cat='badkamer'])  { display: none; }
.va-projects__wrap:has(#f-renovatie:checked) .va-project:not([data-cat='renovatie']) { display: none; }

/* ---------------------------------------------------------------------------
   11. Verhaal, tellers, waarom
   --------------------------------------------------------------------------- */

.va-split { display: grid; gap: var(--ds-space-10); align-items: center; }
@media (min-width: 1000px) { .va-split { grid-template-columns: 1fr 1fr; gap: var(--ds-space-16); } }
.va-split img { border-radius: var(--ds-radius-media); }

.va-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-6);
  margin-top: var(--ds-space-12);
  padding-top: var(--ds-space-10);
  border-top: 1px solid var(--ds-border);
}
.va-stat__value {
  display: block;
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ds-fg);
  font-variant-numeric: tabular-nums;
}
.va-stat__label {
  display: block;
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  color: var(--ds-fg-muted);
}

.va-why { display: grid; gap: var(--ds-space-10); align-items: center; }
@media (min-width: 1000px) { .va-why { grid-template-columns: 1fr 0.8fr; gap: var(--ds-space-16); } }
.va-why__list { display: grid; gap: var(--ds-space-6); list-style: none; margin: 0; padding: 0; }
.va-why__item { display: flex; gap: var(--ds-space-4); align-items: flex-start; }
.va-why__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-ink);
}
.va-why__item h3 { font-size: var(--ds-text-h5); margin: 0 0 var(--ds-space-1); }
.va-why__item p  { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-fg-muted); max-width: 46ch; }

/* ---------------------------------------------------------------------------
   12. Werkwijze, reviews, FAQ, werkgebied
   --------------------------------------------------------------------------- */

.va-steps { display: grid; gap: var(--ds-space-8); }
@media (min-width: 900px) { .va-steps { grid-template-columns: repeat(4, 1fr); gap: var(--ds-space-6); } }

.va-step { display: grid; gap: var(--ds-space-3); align-content: start; }
.va-step__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
  color: var(--ds-fg-on-accent);
  font-family: var(--ds-heading-font);
  font-weight: 600;
  font-size: var(--ds-text-sm);
}
.va-step h3 { font-size: var(--ds-text-h5); margin: 0; }
.va-step p  { font-size: var(--ds-text-sm); color: var(--ds-fg-muted); margin: 0; }

.va-reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 23rem);
  gap: var(--ds-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--ds-space-4);
  scrollbar-width: thin;
}
.va-reviews > * { scroll-snap-align: start; }
@media (min-width: 1000px) {
  .va-reviews {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
  }
}
.va-review {
  display: grid;
  gap: var(--ds-space-4);
  margin: 0;
  padding: var(--ds-space-6);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-alt);
}
.ds-section--alt .va-review { background: var(--ds-surface); }
.va-review blockquote { margin: 0; font-size: var(--ds-text-body); }
/* De naam onderaan uitlijnen, ook als de ene review langer is dan de andere. */
.va-review figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--ds-space-2);
}
.va-review b { font-weight: var(--ds-weight-medium); }
.va-review span { font-size: var(--ds-text-sm); color: var(--ds-fg-muted); }

.va-faq { max-width: 52rem; }
.va-faq details { border-bottom: 1px solid var(--ds-border); }
.va-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h5);
  font-weight: 500;
  color: var(--ds-heading-color);
}
.va-faq summary::-webkit-details-marker { display: none; }
.va-faq summary::after {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  transition: rotate var(--ds-duration) var(--ds-ease);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.va-faq details[open] summary::after { rotate: 180deg; }
.va-faq details p { padding-bottom: var(--ds-space-5); color: var(--ds-fg-muted); margin: 0; }

/* Werkgebied. De plaatsnamen staan letterlijk in de tekst, want dat is waar
   lokale vindbaarheid op draait. Nog als tekst en niet als link: de
   plaatspagina's bestaan nog niet en linken naar een 404 is slechter dan niet
   linken. */
.va-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-3);
  margin: 0 0 var(--ds-space-6);
  padding: 0;
  list-style: none;
}
.va-area li {
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-alt);
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-sm);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   13. Formulieren en slot
   --------------------------------------------------------------------------- */

.va-callback { display: grid; gap: var(--ds-space-10); align-items: center; }
@media (min-width: 1000px) { .va-callback { grid-template-columns: 0.9fr 1fr; gap: var(--ds-space-16); } }

.va-form {
  display: grid;
  gap: var(--ds-space-5);
  padding: var(--ds-space-8);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-alt);
}
.ds-section--alt .va-form { background: var(--ds-surface); }

.va-form__row { display: grid; gap: var(--ds-space-5); }
@media (min-width: 640px) { .va-form__row--2 { grid-template-columns: 1fr 1fr; } }

/* Honeypot. Nooit 'company' of 'website' noemen: autofill vult die in en dan
   verdwijnen echte aanvragen stil. Verbergen met CSS, niet met type=hidden,
   want een bot leest dat laatste net zo goed. */
.va-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.va-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-2); }

.va-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--ds-space-6); }
.va-fieldset + .va-fieldset { margin-top: var(--ds-space-10); }
.va-fieldset legend {
  padding: 0;
  margin-bottom: var(--ds-space-2);
  font-family: var(--ds-heading-font);
  font-size: var(--ds-text-h3);
  font-weight: 500;
  letter-spacing: var(--ds-heading-tracking);
  color: var(--ds-heading-color);
}
[data-wizard='on'] .va-fieldset[hidden] { display: none; }
[data-wizard='on'] .va-fieldset + .va-fieldset { margin-top: 0; }

.va-quote { display: grid; gap: var(--ds-space-10); align-items: start; }
@media (min-width: 1000px) { .va-quote { grid-template-columns: 1.5fr 1fr; gap: var(--ds-space-12); } }

.va-steps__bar { display: grid; gap: var(--ds-space-3); margin-bottom: var(--ds-space-8); }
.va-steps__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-space-2); }
.va-steps__pip {
  height: 5px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-border);
  transition: background var(--ds-duration) var(--ds-ease);
}
.va-steps__pip[data-done='true'] { background: var(--ds-accent); }
.va-steps__label { font-size: var(--ds-text-sm); color: var(--ds-fg-muted); }

.va-wizard__nav {
  display: flex;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-8);
  padding-top: var(--ds-space-6);
  border-top: 1px solid var(--ds-border);
}
.va-wizard__nav > :last-child { margin-left: auto; }

.va-aside {
  display: grid;
  gap: var(--ds-space-5);
  padding: var(--ds-space-6);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-alt);
}
@media (min-width: 1000px) { .va-aside { position: sticky; top: 5.5rem; } }
.va-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); }
.va-aside li { display: flex; gap: var(--ds-space-3); align-items: flex-start; font-size: var(--ds-text-sm); }
.va-aside li svg { flex: none; margin-top: 2px; color: var(--ds-accent-2-ink); }

.va-upload {
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-6);
  text-align: center;
}
.va-upload input { margin-top: var(--ds-space-3); }

.va-contact-grid { display: grid; gap: var(--ds-space-10); }
@media (min-width: 1000px) { .va-contact-grid { grid-template-columns: 1fr 1fr; gap: var(--ds-space-16); } }

.va-contactlist { list-style: none; margin: 0 0 var(--ds-space-8); padding: 0; display: grid; gap: var(--ds-space-5); }
.va-contactlist li { display: flex; gap: var(--ds-space-4); align-items: flex-start; }
.va-contactlist svg { flex: none; margin-top: 4px; color: var(--ds-accent-ink); }
.va-contactlist a { font-size: var(--ds-text-h5); }

.va-map {
  border-radius: var(--ds-radius-media);
  overflow: hidden;
  background: var(--ds-surface-alt);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--ds-space-6);
}

.va-prose { max-width: var(--ds-measure); }
.va-prose h2 { margin-top: var(--ds-space-10); }
.va-prose h3 { margin-top: var(--ds-space-8); font-size: var(--ds-text-h5); }

/* Onderstreping alleen in de artikelkolom, en dan bewust: accentkleur, dikker
   dan de standaard en met wat lucht onder de regel. Voor de een of twee zinnen
   per pagina die echt moeten landen. */
.va-prose u {
  text-decoration-color: var(--ds-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Slot. Eén zin, één knop. Oranje vlak met donkere tekst, want wit op dit
   oranje haalt 2,75:1 en zakt door WCAG AA. */
.va-closer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-accent);
  color: var(--ds-color-ink);
}
.va-closer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-8);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.va-closer h2 {
  margin: 0;
  max-width: 22ch;
  color: var(--ds-color-ink);
  font-size: var(--ds-text-h2);
}
.va-closer p { margin: var(--ds-space-3) 0 0; color: rgba(26, 26, 26, 0.76); max-width: 42ch; }
.va-closer .ds-btn--primary {
  background: var(--ds-color-ink);
  border-color: var(--ds-color-ink);
  color: var(--ds-color-white);
}
.va-closer .ds-btn--primary:hover {
  background: var(--ds-color-sand-800);
  border-color: var(--ds-color-sand-800);
  color: var(--ds-color-white);
}

/* ---------------------------------------------------------------------------
   14. Beweging
   ----------------------------------------------------------------------------
   Drie bedoelde bewegingen op de hele pagina. Ze staan hier bij elkaar zodat
   je ze kunt tellen, want te veel beweging is zelf een verrader van
   sjabloonwerk.

     1. Het strijklicht dat eenmalig over de voor-en-na-schuif loopt, zoals
        licht van opzij over verse stuc. Speelt af bij het laden.
     2. De schuif die zichzelf eenmaal aanwijst zodra hij in beeld komt, zodat
        de bezoeker doorheeft dat er gesleept kan worden.
     3. De tellers die naar hun eindwaarde lopen.

   Wat er bewust NIET meer is: een reveal per sectie, een reveal per kaart, de
   lijn die zich tussen de stappen tekent en een schaal op elke tegelfoto bij
   hover. Dat waren negen bewegingen, en dat is er zes te veel.

   Bij prefers-reduced-motion vallen alle drie weg, maar kleurovergangen bij
   hover en focus blijven staan. Kalm is niet hetzelfde als levenloos.
   --------------------------------------------------------------------------- */

.va-sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 36%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0.20) 52%,
    transparent 64%
  );
  transform: translateX(-110%);
}

@media (prefers-reduced-motion: no-preference) {
  /* 1 */
  .va-sheen { animation: va-sheen 1500ms 420ms var(--ds-ease) 1 both; }
  /* 2 */
  .va-ba[data-hint='true'] { animation: va-hint 1500ms var(--ds-ease) 1 both; }
}

@keyframes va-sheen { to { transform: translateX(110%); } }
@keyframes va-hint {
  0%, 100% { --va-pos: 50%; }
  40%      { --va-pos: 63%; }
  70%      { --va-pos: 44%; }
}

/* Zonder deze registratie is --va-pos een string en kan hij niet animeren. */
@property --va-pos {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}