/* ==========================================================================
   MA LAYAN Bouw & Renovatie — stylesheet
   Zwart canvas, goud als enige accent, echte projectfotografie als hoofdbeeld.
   Tokens: zie DESIGN.md en .claude/skills/brand-guidelines/SKILL.md.
   ========================================================================== */

@import url('fonts.css');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Merk */
  --gold:         #C9A063;  /* 8.1:1 op --ink */
  --gold-bright:  #E0BC7C;
  --gold-deep:    #8A6B3A;
  --gold-wash:    rgba(201, 160, 99, 0.09);

  /* Oppervlakken */
  --ink:          #0B0B0C;
  --surface:      #141416;
  --surface-2:    #1A1A1D;
  --line:         #26262A;
  --line-strong:  #33333A;
  --line-gold:    rgba(201, 160, 99, 0.26);

  /* Tekst */
  --text:             #F5F4F2;  /* 17.9:1 */
  --text-muted:       #A8A49C;  /*  7.9:1 */
  --text-dim:         #6E6B65;  /* uitsluitend decoratief */
  --text-placeholder: #918D86;  /*  5.3:1 op --surface-2 */

  /* Semantisch */
  --success: #7BC47F;
  --error:   #F08A80;
  --focus:   #E0BC7C;

  /* Type */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;

  --text-hero:  clamp(2rem, 1.1rem + 3.9vw, 4.05rem);
  --text-h2:    clamp(1.65rem, 1.1rem + 2.2vw, 2.8rem);
  --text-h3:    clamp(1.12rem, 1rem + 0.65vw, 1.4rem);
  --text-lead:  clamp(1.02rem, 0.98rem + 0.4vw, 1.19rem);
  --text-small: 0.875rem;
  --text-micro: 0.78rem;

  /* Ritme */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;
  --space-20: 5rem;   --space-28: 7rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  /* Hoogte van de sticky header. De hero trekt zichzelf hiermee omhoog zodat
     het beeld achter de navigatie doorloopt. */
  --header-h: 84px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-sticky: 100;
  --z-panel: 200;
  --z-float: 150;
  --z-skip: 300;
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Een expliciete display-waarde (flex, grid, inline-flex) wint het van de
   display:none die de browser aan [hidden] geeft. Zonder deze regel blijven
   verborgen knoppen en de voortgangsbalk gewoon zichtbaar. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 1rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* De vaste actiebalk op mobiel mag niets afdekken. */
@media (max-width: 767px) { body { padding-bottom: 66px; } }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); line-height: 1.05; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: 0.04em; }
h4 { font-size: 1rem; letter-spacing: 0.06em; }
/* Nederlandse samenstellingen als "appartementrenovaties" moeten kunnen breken.
   hyphens:auto blijft op elke breedte aan: het is de enige manier waarop een te
   lang woord met een afbreekstreepje breekt. Zonder die regel valt de browser
   terug op overflow-wrap en knipt hij het woord zonder streepje doormidden
   ("APPARTEMENTRENOVATIE / S"), wat als een fout leest. De koppen hieronder zijn
   zo gemaat dat er in de praktijk niets hoeft te breken; dit is het vangnet. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { width: 1.25em; height: 1.25em; }

a { color: var(--gold-bright); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--ink); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 940px; }
/* Smallere kolom, dus ook een smallere kopschaal: op volle h2-grootte past
   "appartementrenovaties" hier niet op één regel. */
.container--narrow .section-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); }

.section { padding-block: clamp(3.5rem, 9vw, var(--space-28)); }
.section--tight { padding-block: clamp(2.75rem, 6vw, var(--space-16)); }
.section--raised { background: var(--surface); }
.section--ruled { border-top: 1px solid var(--line); }

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--gold); color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Kicker: wijd gespatieerde kapitalen in goud. Eén per sectie. */
.kicker {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-6);
  font: 500 var(--text-micro)/1 var(--font-body);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 420px) {
  .kicker { flex-wrap: wrap; row-gap: var(--space-2); letter-spacing: 0.18em; line-height: 1.5; }
}

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, var(--space-16)); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head p { margin-top: var(--space-6); color: var(--text-muted); font-size: var(--text-lead); }
.section-head--split { display: grid; gap: var(--space-6); max-width: none; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1fr auto; }
  .section-head--split .section-head__aside { text-align: right; }
}

.gold { color: var(--gold); }
.muted { color: var(--text-muted); }
.lead { font-size: var(--text-lead); color: var(--text-muted); }

/* Grid-items mogen krimpen onder hun min-content, anders duwen lange
   Nederlandse samenstellingen de pagina breder dan de viewport. */
.grid-safe > * { min-width: 0; }

/* --------------------------------------------------------------------------
   3. Knoppen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  white-space: nowrap;
  min-height: 52px;
  padding: var(--space-4) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 500 0.875rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; transition: transform 0.3s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-bright); color: var(--ink); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.btn-ghost { background: transparent; color: var(--text); border-color: rgba(245, 244, 242, 0.26); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }

.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Op smalle schermen mag een lang knoplabel over twee regels: liever een hogere
   knop dan een pagina die horizontaal scrollt. */
@media (max-width: 520px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; padding-block: var(--space-3); }
}
@media (max-width: 380px) { .btn { padding-inline: var(--space-6); font-size: 0.8rem; letter-spacing: 0.1em; } }

.link-gold {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font: 500 var(--text-small)/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.link-gold svg { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease-out); }
.link-gold:hover { color: var(--gold-bright); }
.link-gold:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(11, 11, 12, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.site-header[data-scrolled="true"] { background: rgba(11, 11, 12, 0.96); border-bottom-color: var(--line); }
/* Op pagina's met een full-bleed hero staat de header boven de vouw volledig
   transparant, zodat de foto er ononderbroken achter doorloopt. Zodra er
   gescrold is pakt de regel hierboven het weer over. */
.has-hero .site-header:not([data-scrolled="true"]) { background: transparent; backdrop-filter: none; }
/* Staat het mobiele menu open, dan moet de balk eromheen wél dicht zijn,
   anders schemert de hero-foto door de strook met het logo heen. */
.has-hero .site-header:has(.nav[data-open="true"]) { background: rgba(11, 11, 12, 0.96); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--header-h); }
.brand { display: block; flex-shrink: 0; }
.brand img { width: auto; height: 52px; max-width: none; aspect-ratio: 177 / 112; }
@media (max-width: 600px) { :root { --header-h: 70px; } .brand img { height: 42px; } }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.5vw, 1.9rem); }
.nav > a, .nav__trigger, .nav__panel a {
  position: relative;
  font: 500 var(--text-small)/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: color 0.25s var(--ease-out);
}
.nav > a { padding-block: var(--space-2); white-space: nowrap; }
.nav > a::after, .nav__trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav > a:hover, .nav__trigger:hover { color: var(--gold); }
.nav > a:hover::after, .nav__trigger:hover::after,
.nav > a[aria-current="page"]::after, .nav__trigger[data-current="true"]::after,
.nav > a.is-active::after { transform: scaleX(1); }
.nav > a[aria-current="page"], .nav > a.is-active, .nav__trigger[data-current="true"] { color: var(--gold); }

.nav__group { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
}
.nav__chevron { display: inline-flex; transition: transform 0.3s var(--ease-out); }
.nav__chevron svg { width: 0.9em; height: 0.9em; transform: rotate(90deg); }
.nav__group[data-open="true"] .nav__chevron { transform: rotate(180deg); }

.footer-social { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-muted); }
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-social svg { width: 18px; height: 18px; }

.nav__mobile-actions { display: none; }

@media (min-width: 1101px) {
  .nav__panel {
    position: absolute; top: calc(100% + 18px); left: -1.25rem;
    display: grid; gap: var(--space-1);
    min-width: 20rem; padding: var(--space-4);
    background: var(--surface); border: 1px solid var(--line);
    border-top: 1px solid var(--line-gold);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.22s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
  }
  /* Onzichtbare brug, zodat de muis van de knop naar het paneel kan zonder gat. */
  .nav__panel::before { content: ""; position: absolute; inset: -18px 0 auto 0; height: 18px; }
  .nav__group:hover .nav__panel,
  .nav__group:focus-within .nav__panel,
  .nav__group[data-open="true"] .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__panel a { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); letter-spacing: 0.08em; }
  .nav__panel a:hover { background: var(--gold-wash); color: var(--gold); }
  .nav__panel a[aria-current="page"] { color: var(--gold); }
}

.header-actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.header-phone {
  display: none; align-items: center; gap: var(--space-2);
  font: 500 var(--text-small) var(--font-body);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.header-phone svg { color: var(--gold); }
.header-phone:hover { color: var(--gold); }
@media (min-width: 1320px) { .header-phone { display: inline-flex; } }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold); }
.nav-toggle__icon { display: block; width: 22px; height: 22px; }
.nav-toggle__icon svg { width: 100%; height: 100%; }

@media (max-width: 1100px) {
  /* De hamburgerknop heeft JavaScript nodig. Staat dat uit, dan blijft de knop
     weg en zakt de navigatie als gewone lijst onder de header: bereikbaar met
     muis, toets en schermlezer, zonder dat er iets te openen valt. */
  .js .nav-toggle { display: inline-flex; }
  .header-actions .btn, .header-phone { display: none; }
  .header-inner { flex-wrap: wrap; }
  .nav {
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-4) 0 var(--space-8);
    background: var(--ink);
  }
  .js .nav {
    position: fixed; inset: 84px 0 auto 0; z-index: var(--z-panel);
    width: auto; padding: var(--space-4) var(--gutter) var(--space-12);
    max-height: calc(100dvh - 84px); overflow-y: auto;
    border-bottom: 1px solid var(--line);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
  }
  .js .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav > a, .nav__trigger { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .nav > a::after, .nav__trigger::after { display: none; }
  .nav__trigger { width: 100%; justify-content: space-between; text-align: left; }
  .nav__group { border-bottom: 1px solid var(--line); }
  .nav__group .nav__trigger { border-bottom: 0; }
  .nav__panel { display: grid; gap: 0; padding: 0 0 var(--space-4) var(--space-6); }
  .nav__panel a { padding: var(--space-3) 0; font-size: 0.875rem; color: var(--text-muted); letter-spacing: 0.08em; }
  .nav__panel a:hover, .nav__panel a[aria-current="page"] { color: var(--gold); }
  .js .nav__panel { display: none; }
  .js .nav__group[data-open="true"] .nav__panel { display: grid; }
  .nav__mobile-actions { display: grid; gap: var(--space-6); margin-top: var(--space-8); justify-items: center; }
  .nav__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; font-size: var(--text-small); }
  .nav__phone svg { color: var(--gold); }
}
@media (max-width: 600px) { .js .nav { inset-block-start: 70px; max-height: calc(100dvh - 70px); } }

/* --------------------------------------------------------------------------
   5. Hero — één opgeleverd project full-bleed, tekst gecentreerd erin
   -------------------------------------------------------------------------- */
/* De header staat sticky bovenaan de pagina; de hero wordt er met een negatieve
   marge onder geschoven zodat het beeld achter de navigatie doorloopt. De
   header is boven de vouw transparant en wordt pas dicht zodra er gescrold is
   (zie .site-header[data-scrolled]). */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  /* Volledig beeldvullend: het eerste scherm is de foto. */
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) clamp(4rem, 12vh, 8rem);
  isolation: isolate;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Het beeld ligt als achtergrond onder de tekst, met twee lagen eroverheen:
   een vlakke demping voor het leesbaar houden van de kop, en een verloop dat
   boven- en onderrand verzwaart zodat de navigatie en de knoppen contrast
   houden waar de foto toevallig licht is. */
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: center; }

/* Ingehouden parallax: de foto zakt langzamer weg dan de pagina eronder. Puur
   CSS via een scroll-gedreven animatie, dus geen scroll-listener die per frame
   werk doet. Browsers zonder animation-timeline tonen simpelweg een stilstaand
   beeld; de foto staat daarom altijd op 1.06 geschaald, zodat het opschuiven
   nooit een rand vrijspeelt. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero__media img {
      will-change: transform;
      animation: hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
  }
}
@keyframes hero-drift {
  from { transform: scale(1.06) translate3d(0, -1.6%, 0); }
  to   { transform: scale(1.06) translate3d(0, 3.2%, 0); }
}
/* De demping is het zwaarst in de band waar de tekst staat (ruwweg 20% tot 60%
   van de hoogte) en loopt daarbuiten terug, zodat de foto onderin open blijft.
   Reden: de kicker is kleine tekst en viel over de lichte pui in het midden van
   de foto weg. Zie de contrastnotitie in DESIGN.md. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,11,12,0.88) 0%, rgba(11,11,12,0.66) 20%,
                               rgba(11,11,12,0.62) 46%, rgba(11,11,12,0.66) 70%,
                               rgba(11,11,12,0.90) 100%),
    rgba(11,11,12,0.22);
}

.hero__inner { position: relative; z-index: 1; text-align: center; }
/* Op de foto het lichtere goud: --gold haalt op de lichtste plek van de opname
   3,5:1 en dat is te weinig voor tekst van 12px. --gold-bright tilt hem over
   4,5:1 heen zonder de foto verder te dempen. Elders op de site blijft de
   kicker gewoon --gold, want daar staat hij op zwart. */
.hero .kicker { justify-content: center; color: var(--gold-bright); }
/* Ruim genoeg voor "COMPLETE RENOVATIES," op één regel; smaller brak de kop
   over vier regels in plaats van de twee die het merk aanhoudt. */
.hero h1 { margin-bottom: var(--space-6); max-width: 26ch; margin-inline: auto; }
.hero h1 .line-2 { display: block; color: var(--gold); }
.hero__lead {
  max-width: 54ch; margin-inline: auto;
  font-size: var(--text-lead); color: var(--text);
}
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-4); margin-top: clamp(2rem, 4vw, 2.75rem);
}

.hero__direct { margin-top: var(--space-6); font-size: var(--text-small); }
.hero__direct a { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; }
.hero__direct a svg { width: 18px; height: 18px; color: var(--gold); }
.hero__direct a:hover { color: var(--gold); }
.hero__direct strong { font-weight: 500; }

/* Bronvermelding van de hero-foto: laat zien dat het eigen werk is zonder er
   een zin over te schrijven. Rechts vrijhouden voor de vaste WhatsApp-knop. */
.hero__credit {
  position: absolute; inset: auto auto var(--space-6) 0; z-index: 1;
  padding-inline: var(--gutter);
  font: 500 var(--text-micro)/1.5 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 767px) { .hero__credit { display: none; } }

/* --------------------------------------------------------------------------
   6. Offertestarter
   -------------------------------------------------------------------------- */
.starter { background: var(--surface); border-bottom: 1px solid var(--line); }
.starter__inner { display: grid; gap: var(--space-6); padding-block: clamp(2rem, 4vw, 2.75rem); align-items: end; }
@media (min-width: 1080px) { .starter__inner { grid-template-columns: 15rem 1fr; gap: var(--space-12); align-items: center; } }

.starter__intro h2 { font-size: 1.05rem; letter-spacing: 0.06em; }
.starter__intro p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--text-muted); }

.starter__fields { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .starter__fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .starter__fields { grid-template-columns: 1.2fr 0.9fr 0.9fr auto; align-items: end; } }
.starter__fields .form-field label { color: var(--text-muted); }
/* Alle labels reserveren twee regels en staan onderaan uitgelijnd. Zonder dat
   wordt het veld met het omslaande label hoger dan de rest, waardoor het naast
   de andere velden omhoog lijkt te springen. */
@media (min-width: 640px) {
  .starter__fields .form-field label {
    display: flex; align-items: flex-end; min-height: 2.8em;
  }
}
.starter__fields .btn { min-height: 54px; }
@media (max-width: 639px) { .starter__fields .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   7. Vertrouwensbalk
   -------------------------------------------------------------------------- */
/* Vier beloftes onder een lijnicoon in goud. Geen kaders: de kolommen worden
   door de witruimte gescheiden, net als de rest van de pagina. */
.trust {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, var(--space-16));
}
.trust__grid { display: grid; gap: clamp(2rem, 4vw, 2.75rem) var(--space-8); }
@media (min-width: 700px)  { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }

.trust__item { margin: 0; }
.trust__icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: var(--space-6);
  border: 1px solid var(--line-gold); border-radius: var(--radius-sm);
  color: var(--gold);
}
.trust__icon svg { width: 1.5rem; height: 1.5rem; }
.trust__item strong {
  display: block; margin-bottom: var(--space-3);
  font: 600 0.95rem/1.3 var(--font-display);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text);
}
.trust__item p { font-size: var(--text-small); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   8. Diensten — afwisselende, asymmetrische rijen (geen kaartenraster)
   -------------------------------------------------------------------------- */
.service-block { display: grid; gap: clamp(1.75rem, 4vw, var(--space-12)); align-items: center; }
.service-block + .service-block { margin-top: clamp(3rem, 7vw, var(--space-20)); padding-top: clamp(3rem, 7vw, var(--space-20)); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .service-block { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .service-block--flip .service-block__media { order: 2; }
}
.service-block__media { position: relative; }
.service-block__media picture { display: block; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.service-block__media img { width: 100%; transition: transform 0.9s var(--ease-out); }
.service-block:hover .service-block__media img { transform: scale(1.03); }
.service-block__index {
  position: absolute; top: calc(-1 * var(--space-4)); left: calc(-1 * var(--space-2));
  padding: var(--space-2) var(--space-4);
  background: var(--ink); border: 1px solid var(--line-gold); border-radius: var(--radius-sm);
  font: 500 var(--text-micro)/1 var(--font-body); letter-spacing: 0.24em; color: var(--gold);
}
.section--raised .service-block__index { background: var(--surface); }
.service-block__body h3 { margin-bottom: var(--space-4); font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); letter-spacing: 0.02em; }
.service-block__body > p { color: var(--text-muted); }
.service-block__points { display: grid; gap: var(--space-3); margin-block: var(--space-6); }
.service-block__points li { position: relative; padding-left: var(--space-6); font-size: var(--text-small); color: var(--text-muted); }
.service-block__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }

/* --------------------------------------------------------------------------
   9. Werk — redactionele figuren met bijschrift
   -------------------------------------------------------------------------- */
.fig { margin: 0; }
.fig picture { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.fig img { width: 100%; }
.fig figcaption { margin-top: var(--space-4); font-size: var(--text-small); line-height: 1.6; color: var(--text-muted); }
.fig__stage {
  display: inline-block; margin-right: var(--space-3);
  font: 500 var(--text-micro)/1 var(--font-body);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}

/* Voor/na-paar: twee foto's naast elkaar, zonder slider en zonder JS. */
.compare { display: grid; gap: var(--space-4); }
@media (min-width: 620px) { .compare { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.compare .fig figcaption { margin-top: var(--space-3); font-size: var(--text-micro); letter-spacing: 0.01em; }

.work-feature { display: grid; gap: clamp(2rem, 5vw, var(--space-16)); align-items: stretch; }
@media (min-width: 1000px) { .work-feature { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.work-feature__meta { display: flex; flex-direction: column; gap: var(--space-6); }
/* Duwt de link naar de onderkant, zodat de tekstkolom net zo hoog leest als de
   staande foto ernaast in plaats van halverwege op te houden. */
.work-feature__meta > :last-child { margin-top: auto; padding-top: var(--space-4); }
.work-meta {
  display: grid; gap: var(--space-4);
  padding-top: var(--space-6); border-top: 1px solid var(--line);
}
.work-meta div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-4); align-items: baseline; }
.work-meta dt { font: 500 var(--text-micro)/1.6 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.work-meta dd { margin: 0; font-size: var(--text-small); color: var(--text); }
@media (max-width: 480px) { .work-meta div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* Projectenrail op de homepage — grote liggende beelden die horizontaal
   doorlopen en rechts de viewport uit bleeden, zodat zichtbaar is dat er meer
   staat. Native scroll met snap: geen carrousel-JS, geen autoplay (die pakt de
   aandacht van de bezoeker af en is met een toetsenbord niet te volgen), en
   gewoon te swipen op een telefoon.
   Type en titel staan altijd onder het beeld, niet pas bij hover: op een
   telefoon vuurt hover nooit en een zoekmachine leest een hover-titel niet. */
.work-rail {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Start op de containerrand, loop rechts door tot buiten beeld. */
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--gutter);
  scroll-padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-block: var(--space-2) var(--space-4);
  scrollbar-width: none;
}
.work-rail::-webkit-scrollbar { display: none; }
/* Slepen met de muis wordt door main.js toegevoegd; alleen dan heeft een
   grijp-cursor zin, dus die hangt aan .js en niet aan de rail zelf. */
.js .work-rail { cursor: grab; }
.js .work-rail[data-dragging] { cursor: grabbing; scroll-behavior: auto; }
/* Tijdens het slepen niets selecteren of een foto oppakken. */
.js .work-rail[data-dragging] * { user-select: none; -webkit-user-select: none; }
.js .work-rail img { -webkit-user-drag: none; user-select: none; }

.work-tile {
  position: relative;
  flex: 0 0 clamp(16rem, 78vw, 28rem);
  scroll-snap-align: start;
}
.work-tile__media {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.work-tile__media img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.work-tile:hover .work-tile__media img { transform: scale(1.04); }

/* Fase als klein label op het beeld; scrim eronder zodat het op elke foto leest. */
.work-tile__phase {
  position: absolute; inset: auto auto var(--space-4) var(--space-4);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 12, 0.72);
  font: 500 var(--text-micro)/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text);
}
.work-tile__phase.is-live { color: var(--gold); }

.work-tile__body { padding-top: var(--space-4); }
.work-tile__type {
  margin-bottom: var(--space-2);
  font: 500 var(--text-micro)/1 var(--font-body);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.work-tile h3 { font-size: var(--text-h3); }
.work-tile__link { color: inherit; text-decoration: none; }
/* Hele tegel klikbaar, zonder de titel als losse link te verliezen. */
.work-tile__link::after { content: ""; position: absolute; inset: 0; }
.work-tile:hover .work-tile__link { color: var(--gold); }

/* Projectenindex */
.work-index { border-top: 1px solid var(--line); }
.work-card {
  position: relative;
  display: grid; gap: var(--space-4) var(--space-8);
  padding-block: clamp(1.75rem, 3.5vw, var(--space-8));
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease-out), padding-inline 0.35s var(--ease-out);
}
@media (min-width: 860px) {
  .work-card { grid-template-columns: 12rem 1fr 3rem; align-items: center; }
  .work-card:hover { background: linear-gradient(90deg, var(--gold-wash), transparent 72%); padding-inline: var(--space-6); }
}
.work-card__thumb picture { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.work-card__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin-bottom: var(--space-3); }
.work-card__type { font: 500 var(--text-micro)/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.work-card h3 { margin-bottom: var(--space-3); }
.work-card p { font-size: var(--text-small); color: var(--text-muted); max-width: 62ch; }
.work-card__link { color: inherit; text-decoration: none; }
.work-card__link::after { content: ""; position: absolute; inset: 0; }
.work-card__go {
  display: none; place-items: center; width: 44px; height: 44px; padding: 12px;
  border: 1px solid var(--line-gold); border-radius: var(--radius-pill); color: var(--gold);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.work-card__go svg { width: 100%; height: 100%; }
.work-card:hover .work-card__go { background: var(--gold); color: var(--ink); transform: translateX(4px); }
@media (min-width: 860px) { .work-card__go { display: grid; } }

.tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 500 var(--text-micro)/1.6 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.tag--live { border-color: var(--line-gold); color: var(--gold); }

/* Case study */
.case { padding-block: clamp(3rem, 7vw, var(--space-20)); border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; }
.case__layout { display: grid; gap: clamp(2rem, 5vw, var(--space-16)); align-items: start; }
@media (min-width: 1000px) { .case__layout { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }
@media (min-width: 1000px) { .case__rail { position: sticky; top: 112px; } }
/* De rail is maar 21rem breed; op volle h2-grootte past "Wandafwerking" daar
   niet in. Eigen schaal zodat projecttitels heel blijven. */
.case__rail h2 { margin-bottom: var(--space-4); font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); }
.case__rail > p { color: var(--text-muted); }
/* Offerteknop met het telefoonnummer eronder als tweede route. */
.case__actions { margin-top: var(--space-8); display: grid; justify-items: start; gap: var(--space-4); }
.case__phone {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-small); color: var(--text-muted); text-decoration: none;
}
.case__phone svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }
.case__phone:hover span { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.case__gallery { display: grid; gap: clamp(1.5rem, 3vw, var(--space-8)); }
@media (min-width: 720px) { .case__gallery { grid-template-columns: 1fr 1fr; } }
.case__gallery .fig--wide { grid-column: 1 / -1; }
/* Eigen video-opnames: staand telefoonbeeld, zelfde kader als de foto's. */
.fig--video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 16; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
.case__prose { display: grid; gap: var(--space-8); margin-top: var(--space-12); }
@media (min-width: 720px) { .case__prose { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-12); } }
.case__prose h3 { margin-bottom: var(--space-3); font-size: 0.95rem; letter-spacing: 0.14em; color: var(--gold); }
.case__prose p, .case__prose li { font-size: var(--text-small); color: var(--text-muted); }
.case__prose ul { display: grid; gap: var(--space-3); }
.case__prose ul li { position: relative; padding-left: var(--space-6); }
.case__prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }

/* --------------------------------------------------------------------------
   10. Werkwijze — genummerde, gelijnde kolommen
   -------------------------------------------------------------------------- */
/* Geen scheidingslijnen: de kolommen worden alleen door witruimte gescheiden. */
.method { display: grid; gap: clamp(2rem, 4vw, 2.75rem) var(--space-8); }
@media (min-width: 640px) { .method { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .method { grid-template-columns: repeat(4, 1fr); } }
.method__step { padding: 0; }
.method__num { display: block; margin-bottom: var(--space-4); font: 700 2rem/1 var(--font-display); color: var(--gold); }
.method__step h3 { margin-bottom: var(--space-3); }
.method__step p { font-size: var(--text-small); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   11. Over ons, doelgroepen
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2.5rem, 6vw, var(--space-16)); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1.05fr 0.95fr; } }
.split--top { align-items: start; }
.split__media { position: relative; }
.split__media picture { display: block; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line); }
/* Staat zonder bijschrift: het beeld loopt door tot waar de tekst eindigde,
   dus dieper croppen dan de 16:9 van het bronbestand. De uitsnede ligt links,
   zodat de man aan die kant volledig in beeld blijft. */
.split__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: left center;
}
.split__media figcaption { margin-top: var(--space-4); font-size: var(--text-small); color: var(--text-muted); }
.split__media::after {
  content: ""; position: absolute; inset: auto auto -14px -14px;
  width: 42%; height: 46%;
  border-left: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold);
  pointer-events: none;
}

.checklist { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.checklist li { display: flex; gap: var(--space-4); align-items: flex-start; }
.checklist svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.checklist span { color: var(--text-muted); }

/* Geen scheidingslijnen: witruimte doet het werk. */
.audience { display: grid; gap: clamp(2rem, 4vw, 2.75rem) clamp(2rem, 5vw, var(--space-16)); }
@media (min-width: 780px) { .audience { grid-template-columns: 1fr 1fr; } }
.audience__col { padding: 0; }
.audience__col h3 { margin-bottom: var(--space-4); color: var(--gold); }
.audience__col p { color: var(--text-muted); }
.audience__col ul { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.audience__col li { position: relative; padding-left: var(--space-6); font-size: var(--text-small); color: var(--text-muted); }
.audience__col li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }

/* --------------------------------------------------------------------------
   12. Reviews (verschijnt alleen als er echte reviews in config.php staan)
   -------------------------------------------------------------------------- */
.reviews { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
.review { padding: clamp(1.75rem, 3vw, var(--space-8)); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--text); }
.review blockquote::before { content: ""; display: block; width: 26px; height: 1px; margin-bottom: var(--space-6); background: var(--gold); }
.review__foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--text-small); color: var(--text-muted); }
.review__name { color: var(--text); font-weight: 500; }
.review__stars { color: var(--gold); letter-spacing: 0.1em; }

/* --------------------------------------------------------------------------
   13. Afsluitende CTA
   -------------------------------------------------------------------------- */
.cta-band { background: var(--surface); border-top: 1px solid var(--line-gold); }
.cta-band__inner { display: grid; gap: clamp(2rem, 4vw, var(--space-12)); padding-block: clamp(3rem, 7vw, var(--space-20)); align-items: center; }
@media (min-width: 940px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
/* "Uw appartementrenovatie bespreken" moet heel blijven. Twee dingen daarvoor:
   hyphens:manual, want met auto knipt de browser het woord doormidden om de
   regel vol te maken, óók als het woord op de volgende regel gewoon past. En
   een eigen, lager beginnende schaal, zodat het langste woord op een telefoon
   van 320px nog binnen de kolom valt; anders valt hij terug op break-word en
   breekt hij alsnog, dan zonder streepje. */
.cta-band h2 {
  max-width: 22ch;
  hyphens: manual;
  font-size: clamp(1.25rem, 0.9rem + 1.9vw, 2.8rem);
}
.cta-band p { margin-top: var(--space-6); max-width: 54ch; color: var(--text-muted); }
.cta-band__actions { display: grid; gap: var(--space-4); }
.cta-band__direct { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--text-small); }
.cta-band__direct a { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; }
.cta-band__direct svg { width: 18px; height: 18px; color: var(--gold); }
.cta-band__direct a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   14. Formulieren
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-content: start; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field label, .form-legend {
  font: 500 var(--text-micro)/1.4 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.form-field .optional { text-transform: none; letter-spacing: 0.02em; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; height: 54px;
  padding: var(--space-4);
  font: 400 1rem/1.5 var(--font-body);
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.form-field textarea { height: auto; min-height: 148px; resize: vertical; }
.form-field select {
  appearance: none; padding-right: var(--space-12);
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 22px) 25px, calc(100% - 16px) 25px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-placeholder); }
.form-field input:hover, .form-field textarea:hover, .form-field select:hover { border-color: var(--gold-deep); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--gold); background: var(--surface); }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"], .form-field select[aria-invalid="true"] { border-color: var(--error); }
.form-hint { font-size: var(--text-micro); color: var(--text-muted); }
.field-error { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-small); color: var(--error); }
.field-error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; }

.form-field input[type="file"] { height: auto; padding: var(--space-3); font-size: var(--text-small); color: var(--text-muted); cursor: pointer; }
.form-field input[type="file"]::file-selector-button {
  margin-right: var(--space-4); padding: var(--space-2) var(--space-4);
  background: var(--surface); color: var(--text); border: 1px solid var(--line-gold); border-radius: var(--radius-sm);
  font: 500 var(--text-micro) var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}

/* Radio- en checkboxgroepen */
.choice-grid { display: grid; gap: var(--space-3); }
@media (min-width: 520px) { .choice-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .choice-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.choice {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: var(--space-3) var(--space-4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--text-small); color: var(--text-muted); cursor: pointer;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
  text-transform: none; letter-spacing: 0;
}
.choice input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--gold); }
.choice:hover { border-color: var(--gold-deep); color: var(--text); }
.choice:has(input:checked) { border-color: var(--gold); color: var(--text); background: var(--gold-wash); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.form-consent { display: flex; gap: var(--space-4); align-items: flex-start; }
.form-consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; accent-color: var(--gold); }
.form-consent label { font-size: var(--text-small); text-transform: none; letter-spacing: 0; line-height: 1.6; color: var(--text-muted); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--text-small); color: var(--text-muted); }

.alert { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-radius: var(--radius-sm); font-size: var(--text-small); }
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.alert-error { background: rgba(240, 138, 128, 0.10); border: 1px solid rgba(240, 138, 128, 0.4); color: #F6B7B0; }
.alert-error svg { color: var(--error); }
.alert-success { background: rgba(123, 196, 127, 0.10); border: 1px solid rgba(123, 196, 127, 0.4); color: #A9DBAC; }
.alert-success svg { color: var(--success); }

/* Formulier in stappen. Zonder JS staan alle stappen onder elkaar. */
.quote-form { display: grid; gap: var(--space-8); }

/* Particulier / Zakelijk als segmentkeuze. Het zijn echte radio's: de keuze
   komt dus ook zonder JavaScript mee en werkt met tab en pijltjestoetsen. */
.segmented { border: 0; margin: 0; padding: 0; min-width: 0; }
.segmented__track {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
@media (min-width: 620px) { .segmented__track { display: inline-grid; grid-template-columns: auto auto; } }
.segmented__option { position: relative; min-width: 0; }
/* Niet display:none: dan verdwijnt de radio uit de toetsenbordvolgorde. */
.segmented__option input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.segmented__option span {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 48px; padding-inline: clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius-sm);
  font: 500 var(--text-small)/1 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.segmented__option svg { width: 18px; height: 18px; flex-shrink: 0; }
.segmented__option input:checked + span { background: var(--gold); color: var(--ink); }
.segmented__option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.segmented__option input:not(:checked):hover + span { color: var(--text); }
/* Op de smalste telefoons passen icoon plus wijd gespatieerd label niet naast
   elkaar in de halve breedte; daar gaan de spatiëring en de ruimte omlaag. */
@media (max-width: 400px) {
  .segmented__option span {
    gap: var(--space-2); padding-inline: var(--space-2);
    font-size: var(--text-micro); letter-spacing: 0.04em;
  }
  .segmented__option svg { width: 16px; height: 16px; }
}

.quote-form__intro { display: grid; gap: var(--space-3); }
.quote-form__intro h3 { font-size: var(--text-h3); }
.quote-form__intro p { font-size: var(--text-small); color: var(--text-muted); }

/* Optionele projectdetails, dichtgeklapt. <details> doet het openklappen zelf. */
.form-more {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2);
}
.form-more summary {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font: 500 var(--text-small)/1.4 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); cursor: pointer; list-style: none;
}
.form-more summary::-webkit-details-marker { display: none; }
.form-more summary:hover { color: var(--gold-bright); }
.form-more summary svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.form-more[open] summary svg { transform: rotate(90deg); }
.form-more summary .optional { text-transform: none; letter-spacing: 0.02em; color: var(--text-muted); }
.form-more__body {
  display: grid; gap: var(--space-6);
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
}
@media (min-width: 620px) { .form-more__body { grid-template-columns: 1fr 1fr; } }
.quote-step { display: grid; gap: var(--space-6); border: 0; margin: 0; padding: 0; min-width: 0; }
.quote-step__head { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.quote-step__head h2 { font-size: var(--text-h3); }
.quote-step__count { font: 500 var(--text-micro)/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.quote-step__head p { font-size: var(--text-small); color: var(--text-muted); }

.js .quote-form[data-stepped="true"] .quote-step[hidden] { display: none; }
.quote-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.quote-nav .btn { flex: 0 0 auto; }
.steps {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  padding-bottom: var(--space-6); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  font: 500 var(--text-micro)/1.6 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}
.steps li { display: flex; align-items: center; gap: var(--space-3); }
.steps li::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.steps li:first-child::before { display: none; }
.steps li[data-state="current"] { color: var(--gold); }
.steps li[data-state="done"] { color: var(--text-muted); }

.summary-list { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.summary-list div { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-4); align-items: baseline; }
.summary-list dt { font: 500 var(--text-micro)/1.7 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.summary-list dd { margin: 0; font-size: var(--text-small); color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 520px) { .summary-list div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 6vw, var(--space-16)); align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.contact-panel { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) { .contact-panel { position: sticky; top: 112px; } }
.contact-list { display: grid; gap: var(--space-6); }
.contact-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.contact-list a { color: var(--text); text-decoration: none; }
.contact-list a:hover { color: var(--gold); text-decoration: underline; }
.contact-list__label { display: block; margin-bottom: var(--space-1); font-size: var(--text-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.contact-list span span:not(.contact-list__label) { color: var(--text); }

.panel { padding: clamp(1.5rem, 3vw, var(--space-8)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.panel--gold { border-color: var(--line-gold); }
.panel h2, .panel h3 { margin-bottom: var(--space-4); font-size: var(--text-h3); letter-spacing: 0.05em; }
.panel p { font-size: var(--text-small); color: var(--text-muted); }
.panel .btn { margin-top: var(--space-6); }
/* Doorverwijzing onder "Wat wij niet doen": afgescheiden van de uitleg erboven. */
.panel__referral {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.panel__referral strong { color: var(--gold); font-weight: 500; }

/* --------------------------------------------------------------------------
   16. Binnenpagina's, FAQ, breadcrumb
   -------------------------------------------------------------------------- */
.page-header { position: relative; padding-block: clamp(2.5rem, 6vw, var(--space-16)) clamp(2.5rem, 6vw, var(--space-16)); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-header::after {
  content: ""; position: absolute; inset: -50% -25% auto auto; width: 62%; height: 190%;
  background: radial-gradient(closest-side, rgba(201,160,99,0.11), transparent 70%);
  pointer-events: none;
}
.page-header > * { position: relative; }
/* 22ch, niet 20ch: "Appartementrenovaties" is 21 tekens en paste anders op geen
   enkele schermbreedte, waardoor de kop altijd doormidden brak. */
.page-header h1 { max-width: 22ch; }
/* Deze koppen krijgen hun naden van shy() mee. Met "manual" gebruikt de browser
   alleen die naden; met "auto" zou hij de langste passende lettergreep kiezen en
   alsnog "woningre-novaties" maken in plaats van "woning-renovaties". */
.page-header h1 { hyphens: manual; }
.page-header__lead { margin-top: var(--space-6); max-width: 58ch; font-size: var(--text-lead); color: var(--text-muted); }
.page-header--split { display: grid; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); font-size: var(--text-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span[aria-current] { color: var(--gold); }

.page-layout { display: grid; gap: clamp(2.5rem, 6vw, var(--space-16)); }
@media (min-width: 1040px) { .page-layout { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }
@media (min-width: 1040px) { .page-aside { position: sticky; top: 112px; display: grid; gap: var(--space-6); } }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: clamp(2.5rem, 5vw, var(--space-16)); margin-bottom: var(--space-6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p { color: var(--text-muted); }
.prose ul { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.prose ul li { position: relative; padding-left: var(--space-6); color: var(--text-muted); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.prose ol { display: grid; gap: var(--space-8); margin-top: var(--space-8); counter-reset: step; }
.prose ol li { counter-increment: step; position: relative; padding-left: 4rem; color: var(--text-muted); }
.prose ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font: 500 var(--text-small)/1.7 var(--font-body); letter-spacing: 0.2em; color: var(--gold);
}
.prose ol li strong { display: block; margin-bottom: var(--space-2); font: 600 1.05rem/1.3 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);
  padding-block: var(--space-6);
  font: 600 1.02rem/1.4 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold); transition: transform 0.3s var(--ease-out); }
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--space-8); }
.faq__answer p { max-width: 68ch; color: var(--text-muted); }
.faq__answer p + p { margin-top: var(--space-4); }

.related { display: grid; gap: 0; border-top: 1px solid var(--line); }
.related a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding-block: var(--space-6); border-bottom: 1px solid var(--line);
  font: 600 1.02rem/1.3 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: padding-inline 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.related a svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold); transition: transform 0.3s var(--ease-out); }
.related a:hover { color: var(--gold); padding-inline: var(--space-4); }
.related a:hover svg { transform: translateX(4px); }

.confirm { max-width: 46rem; }
.confirm__mark {
  display: grid; place-items: center; width: 72px; height: 72px; padding: 18px;
  margin-bottom: var(--space-8);
  border: 1px solid var(--line-gold); border-radius: var(--radius-pill); color: var(--gold);
}
.confirm__mark svg { width: 100%; height: 100%; }
.confirm p { margin-top: var(--space-6); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   17. Vaste conversie-elementen
   -------------------------------------------------------------------------- */
/* Compacte cirkel die pas bij hover of focus uitklapt: een vaste knop mag zo
   min mogelijk van de pagina afdekken. */
.wa-float {
  display: none;
  position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: var(--z-float);
  align-items: center; gap: 0;
  width: 56px; height: 56px; padding: 0;
  overflow: hidden;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-gold); border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  font: 500 var(--text-small)/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: width 0.32s var(--ease-out), gap 0.32s var(--ease-out), padding 0.32s var(--ease-out),
              background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.wa-float svg { width: 22px; height: 22px; flex-shrink: 0; margin-inline: 16px; color: var(--gold); transition: color 0.3s var(--ease-out); }
.wa-float span { opacity: 0; transition: opacity 0.2s var(--ease-out); }
.wa-float:hover, .wa-float:focus-visible {
  width: 11.5rem; gap: var(--space-1); background: var(--gold); color: var(--ink);
}
.wa-float:hover span, .wa-float:focus-visible span { opacity: 1; }
.wa-float:hover svg, .wa-float:focus-visible svg { color: var(--ink); }
@media (min-width: 768px) { .wa-float { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .wa-float span { opacity: 1; } .wa-float { width: 11.5rem; } }

.action-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  position: fixed; inset: auto 0 0 0; z-index: var(--z-float);
  background: rgba(11, 11, 12, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 64px; padding: var(--space-2);
  color: var(--text); text-decoration: none;
  font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
}
.action-bar a + a { border-left: 1px solid var(--line); }
.action-bar svg { width: 21px; height: 21px; color: var(--gold); }
.action-bar__primary { background: var(--gold); color: var(--ink); }
.action-bar__primary svg { color: var(--ink); }
@media (min-width: 768px) { .action-bar { display: none; } }

/* Zodra het offerteformulier in beeld is of een invoerveld focus heeft, wijken
   de zwevende knoppen. Ze mogen nooit een formulierveld of een knop afdekken. */
body[data-form-active="true"] .action-bar,
body[data-form-active="true"] .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
.action-bar, .wa-float { transition: opacity 0.25s var(--ease-out), visibility 0.25s; }
.wa-float { transition: width 0.32s var(--ease-out), gap 0.32s var(--ease-out),
            background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
            opacity 0.25s var(--ease-out), visibility 0.25s; }
@media (max-width: 767px) {
  /* Geen loze ruimte onderaan wanneer de balk toch verborgen is. */
  body[data-form-active="true"] { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   17b. Raakvlakken
   Losstaande links (navigatie, contactgegevens, call-to-actions) krijgen een
   raakvlak dat met een duim te bedienen is. De extra padding valt binnen de
   bestaande witruimte, dus het beeld verandert niet.
   -------------------------------------------------------------------------- */
.brand { padding-block: 2px; }
.link-gold { min-height: 24px; padding-block: 5px; }
.contact-list a, .breadcrumb a, .footer-bottom a { display: inline-block; padding-block: 4px; }
.footer-links { gap: var(--space-2); }
.footer-links a { display: inline-block; padding-block: 5px; }
.footer-contact a { display: inline-block; padding-block: 3px; }
.hero__direct a, .cta-band__direct a, .nav__phone {
  min-height: 44px; padding-block: var(--space-2);
}
.related a { min-height: 56px; }
.faq summary { min-height: 56px; }
.work-meta dd a { display: inline-block; padding-block: 5px; }
@media (max-width: 767px) {
  /* Op een telefoon zijn dit de belangrijkste knoppen van de pagina. */
  .link-gold { min-height: 44px; padding-block: var(--space-3); }
  .contact-list a { padding-block: var(--space-2); }
  .footer-links a, .footer-bottom a, .work-meta dd a { padding-block: var(--space-2); }
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--ink); }
.footer-grid { display: grid; gap: var(--space-12); padding-block: clamp(3rem, 6vw, var(--space-16)) var(--space-12); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: var(--space-8); } }
.footer-grid > * { min-width: 0; }
.footer-brand img { height: 72px; width: auto; max-width: none; aspect-ratio: 253 / 160; margin-bottom: var(--space-6); }
.footer-brand p { max-width: 34ch; font-size: var(--text-small); color: var(--text-muted); }
.site-footer h2 { font-size: 0.82rem; letter-spacing: 0.2em; color: var(--gold); margin-bottom: var(--space-6); }
.footer-links { display: grid; gap: var(--space-3); font-size: var(--text-small); }
.footer-links a, .footer-contact a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact { display: grid; gap: var(--space-4); font-size: var(--text-small); color: var(--text-muted); }
.footer-contact li { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--text-micro); color: var(--text-muted);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer-bottom a { color: var(--text-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }
/* Bronvermelding. De copyrightregel en de juridische links staan links en
   rechts; deze regel schuift daaronder zodra de balk te smal wordt. */
.footer-credit { color: var(--text-dim); }
.footer-credit a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--gold); }
@media (min-width: 900px) { .footer-credit { margin-left: auto; } }

/* --------------------------------------------------------------------------
   19. Beweging
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); }
  .js [data-reveal].is-visible {
    opacity: 1; transform: none;
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .hero__copy > * { animation: rise 0.85s var(--ease-out) both; }
  .js .hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
  .js .hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
  .js .hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
  .js .hero__copy > *:nth-child(5) { animation-delay: 0.32s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

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

@media print {
  .site-header, .nav-toggle, .action-bar, .wa-float, .hero__figure { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .fig picture, .panel { border-color: #ccc; }
}

/* --------------------------------------------------------------------------
   Zakelijke velden in het offerteformulier
   -------------------------------------------------------------------------- */
/* Bedrijfsnaam en de vraag over langdurige samenwerking horen alleen bij
   "Zakelijk". Het omschakelen gebeurt met :has() op de aangevinkte radio, dus
   zonder JavaScript. Browsers zonder :has() tonen de velden gewoon altijd:
   zichtbaar-maar-overbodig is beter dan onbereikbaar. */
@supports selector(:has(*)) {
  .quote-form .form-role--zakelijk { display: none; }
  .quote-form:has(input[name="opdrachtgever"][value="vastgoed"]:checked) .form-role--zakelijk { display: grid; }
}