/* ==========================================================================
   VDMB · COMPONENTEN
   ========================================================================== */

/* --- Knoppen ------------------------------------------------------------
   Een knop is een massief blok met de Snede rechtsboven, in de maat die het
   brandbook voor knoppen vastlegt (snede-s-klein, 12 px). De pijl staat in
   een eigen vak, gescheiden door een haarlijn: de knop leest als een stuk
   constructie, niet als een omlijnd tekstje. Geen omlijning meer: een
   rand van 2 px om hoofdletters maakt een knop smal en ouderwets.
   Bij aanwijzen wordt de snede dieper en schuift de pijl op. Geen schaal,
   geen veer.                                                              */

@property --knop-snede {
  syntax: '<length>';
  inherits: false;
  initial-value: 12px;
}

.knop {
  /* Op een donker vlak. De lichte variant staat hieronder.             */
  --knop-vlak:        var(--kalkwit);
  --knop-vlak-hover:  var(--valleibeige);
  --knop-tekst:       var(--nokzwart);
  --knop-toon:        rgba(219, 208, 189, 0.12);
  --knop-toon-hover:  rgba(219, 208, 189, 0.22);
  --knop-toon-tekst:  var(--kalkwit);
  --knop-scheiding:   rgba(219, 208, 189, 0.22);
  --knop-snede:       var(--snede-s-klein);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.625rem;
  min-height: 3.5rem;
  padding-inline: 1.625rem;
  border: 0;
  background: var(--knop-toon);
  color: var(--knop-toon-tekst);
  font-family: var(--font-kop);
  font-size: 0.9375rem;
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-knop);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--knop-snede)) 0, 100% var(--knop-snede), 100% 100%, 0 100%);
  transition: background-color var(--duur-kort) var(--ease),
              --knop-snede var(--duur) var(--ease-uit);
}
/* Het pijlvak. Het icoon blijft 18 px; het vak eromheen ontstaat uit de
   opvulling rechts en een haarlijn die als los element op de grens staat.
   Een uitgerekt SVG-element zou de knop meenemen tot 150 px hoog.        */
.knop .icoon {
  flex: none;
  width: 1.125rem; height: 1.125rem;
  margin-left: 1.25rem;
  transition: transform var(--duur) var(--ease-uit);
}
.knop:has(.icoon) { padding-right: 1.25rem; }
.knop:has(.icoon)::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 3.625rem;
  width: var(--lijn-haar);
  background: var(--knop-scheiding);
}
.knop:hover, .knop:focus-visible { background: var(--knop-toon-hover); --knop-snede: 1.125rem; }
.knop:hover .icoon, .knop:focus-visible .icoon { transform: translateX(0.25rem); }

/* Primair: massief gevuld. Eén per scherm, voor de hoofdroute.          */
.knop--vol {
  --knop-scheiding: rgba(18, 17, 16, 0.18);
  background: var(--knop-vlak);
  color: var(--knop-tekst);
}
.knop--vol:hover, .knop--vol:focus-visible { background: var(--knop-vlak-hover); }

/* Focus binnen de knop: een rand erbuiten valt weg achter de snede.       */
.knop:focus-visible { outline: var(--lijn-basis) solid currentColor; outline-offset: -0.375rem; }

/* Op een licht of beige vlak keert het paar om.                          */
.op-licht .knop, .op-beige .knop {
  --knop-vlak:        var(--nokzwart);
  --knop-vlak-hover:  var(--roetgrijs);
  --knop-tekst:       var(--kalkwit);
  --knop-toon:        rgba(18, 17, 16, 0.07);
  --knop-toon-hover:  rgba(18, 17, 16, 0.13);
  --knop-toon-tekst:  var(--nokzwart);
  --knop-scheiding:   rgba(18, 17, 16, 0.18);
}
.op-licht .knop--vol, .op-beige .knop--vol { --knop-scheiding: rgba(245, 241, 234, 0.22); }

.knoppen { display: flex; flex-wrap: wrap; gap: var(--r-2); }

/* Tekstlink met pijl. De onderlijn groeit van links naar rechts. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-kop);
  font-size: var(--t-klein);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-knop);
  text-transform: uppercase;
  padding-bottom: 0.4375rem;
  position: relative;
  color: inherit;
}
.link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--lijn-basis);
  background: currentColor;
  opacity: 0.28;
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: opacity var(--duur) var(--ease), background-color var(--duur) var(--ease);
}
.link:hover::after, .link:focus-visible::after { opacity: 1; background: var(--accent); }
.op-donker .link:hover::after, .op-donker .link:focus-visible::after { background: var(--accent-tekst); }
.link .icoon { width: 1rem; height: 1rem; transition: transform var(--duur) var(--ease-uit); }
.link:hover .icoon, .link:focus-visible .icoon { transform: translateX(0.375rem); }


/* --- Header -------------------------------------------------------------
   Massief zwart, en bij het scrollen compacter. Maximaal vijf menu-items
   (brandbook, pagina 09).                                                 */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  /* Massief zwart, altijd. Het brandbook schrijft dat voor op pagina 09,
     en de logoregels verbieden het merk op onrustig beeld zonder egaal
     vlak eronder. Een transparante header over een hero doet precies dat.
     De beweging bij het scrollen zit daarom in de hoogte, niet in het vlak. */
  background: var(--nokzwart);
  border-bottom: var(--lijn-haar) solid transparent;
  transition: border-color var(--duur) var(--ease);
}
.site-header.is-vast,
.site-header.is-altijd-vast { border-bottom-color: var(--lijn-op-donker); }

.header-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-4);
  min-height: var(--header-h);
  transition: min-height var(--duur) var(--ease);
}
.site-header.is-vast .header-binnen { min-height: var(--header-h-vast); }

/* Logo, variant B horizontaal. Nooit groter dan nodig: het merk hoeft
   niet te schreeuwen. Minimaal 265 px breed volgens het brandbook,
   op mobiel valt de descriptor weg en geldt 80 px voor de wordmark.       */
.logo { display: flex; align-items: center; gap: 0.875rem; flex: none; }
.logo__merkteken { width: 1.75rem; height: 1.75rem; fill: var(--valleibeige); }
.logo__woord { display: flex; flex-direction: column; gap: 0.1875rem; }
.logo__wordmark {
  font-family: var(--font-kop);
  font-size: 1.5rem;
  font-weight: var(--w-extrabold);
  letter-spacing: var(--ls-wordmark);
  line-height: 1;
  color: var(--valleibeige);
}
.logo__descriptor {
  font-family: var(--font-kop);
  font-size: 0.5rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--mistgrijs);
  white-space: nowrap;
}

.hoofdnav { display: flex; align-items: center; gap: var(--r-4); }
.hoofdnav__lijst { display: flex; align-items: center; gap: var(--r-4); }
.hoofdnav__link {
  position: relative;
  display: block;
  padding-block: var(--r-1);
  font-family: var(--font-kop);
  font-size: var(--t-klein);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-nav);
  color: var(--valleibeige);
  white-space: nowrap;
}
.hoofdnav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--lijn-basis);
  background: var(--accent-tekst);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duur) var(--ease-uit);
}
.hoofdnav__link:hover::after,
.hoofdnav__link:focus-visible::after,
.hoofdnav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Submenu voor de twee categorieën. */
.hoofdnav__item--sub { position: relative; }
.hoofdnav__sub {
  position: absolute;
  top: calc(100% + var(--r-2));
  left: -1.25rem;
  min-width: 17rem;
  background: var(--nokzwart);
  border: var(--lijn-haar) solid var(--lijn-op-donker);
  padding: var(--r-1) 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -0.5rem, 0);
  transition: opacity var(--duur-kort) var(--ease),
              transform var(--duur-kort) var(--ease),
              visibility 0s linear var(--duur-kort);
}
.hoofdnav__item--sub:hover .hoofdnav__sub,
.hoofdnav__item--sub:focus-within .hoofdnav__sub {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.hoofdnav__sublink {
  display: block;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--t-klein);
  color: var(--valleibeige);
  border-left: var(--lijn-basis) solid transparent;
  transition: border-color var(--duur-kort) var(--ease), color var(--duur-kort) var(--ease);
}
.hoofdnav__sublink:hover, .hoofdnav__sublink:focus-visible {
  border-left-color: var(--accent); color: var(--kalkwit);
}
.hoofdnav__sublink span { display: block; color: var(--mistgrijs); font-size: 0.75rem; margin-top: 0.125rem; }

.header-actie { display: flex; align-items: center; gap: var(--r-3); }
.header-tel {
  display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-kop); font-size: var(--t-klein);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-nav);
  color: var(--valleibeige);
}
.header-tel:hover { color: var(--accent-tekst); }
.knop--kop { min-height: 2.875rem; font-size: var(--t-klein); }

/* Menuknop voor smalle schermen. Twee lijnen, geen hamburger met drie. */
.menuknop {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  background: none; border: var(--lijn-haar) solid var(--lijn-op-donker);
  cursor: pointer; flex: none;
}
.menuknop__lijnen { position: relative; width: 1.25rem; height: 0.625rem; }
.menuknop__lijnen::before, .menuknop__lijnen::after {
  content: ""; position: absolute; left: 0; width: 100%;
  height: var(--lijn-basis); background: var(--valleibeige);
  transition: transform var(--duur) var(--ease-uit), width var(--duur) var(--ease);
}
.menuknop__lijnen::before { top: 0; }
.menuknop__lijnen::after  { bottom: 0; width: 65%; }
.menuknop[aria-expanded="true"] .menuknop__lijnen::before { transform: translateY(0.25rem) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__lijnen::after  { transform: translateY(-0.25rem) rotate(-45deg); width: 100%; }
.menuknop[aria-expanded="true"] { border-color: var(--brons); }

.mobielmenu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--nokzwart);
  /* Het paneel begint onder de header. De maat leest mee met --header-h,
     zodat een lagere header op een telefoon geen gat achterlaat.         */
  padding: calc(var(--header-h) + var(--r-4)) var(--gutter) var(--r-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translate3d(0, -100%, 0);
  transition: transform var(--duur-lang) var(--ease-uit);
  visibility: hidden;
}
.mobielmenu.is-open { transform: none; visibility: visible; }
.mobielmenu__lijst { display: flex; flex-direction: column; }
.mobielmenu__link {
  display: flex; align-items: baseline; gap: var(--r-2);
  padding: 1.125rem 0;
  border-bottom: var(--lijn-haar) solid var(--lijn-op-donker);
  font-family: var(--font-kop);
  font-size: clamp(1.375rem, 5.6vw, 2rem);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-h2);
  color: var(--kalkwit);
}
/* Waar u bent. De hoofdnavigatie markeert dat met een bronzen onderlijn;
   in het mobiele menu is dat dezelfde lijn, alleen dikker omdat elke regel
   er al een heeft.                                                        */
.mobielmenu__link[aria-current="page"] {
  border-bottom-color: var(--accent);
  border-bottom-width: var(--lijn-constructie);
}
.mobielmenu__link span {
  font-size: var(--t-label); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label); color: var(--brons-licht);
}
.mobielmenu__onder { margin-top: var(--r-4); display: flex; flex-direction: column; gap: var(--r-2); }
/* Volle breedte: de pijl hoort in zijn eigen vak tegen de rechterrand.  */
.mobielmenu__onder .knop { justify-content: space-between; }
/* Een e-mailadres leest niet in kapitalen.                              */
.knop--adres { text-transform: none; letter-spacing: 0.01em; }


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

.hero {
  position: relative;
  min-height: min(calc(100svh - var(--header-h)), 52rem);
  /* De volle-hoogte variant loopt achter de header door, zodat de foto het
     hele eerste scherm vult. De header blijft een egaal zwart vlak, dus het
     logo staat nooit op onrustig beeld.                                    */
  display: flex;
  align-items: flex-end;
  padding-block: var(--r-7) var(--r-6);
  background: var(--nokzwart);
  overflow: hidden;
}
.hero__beeld { position: absolute; inset: 0; z-index: var(--z-beeld); }
/* Een <picture> is een blok met automatische hoogte. Zonder deze regel valt
   height:100% op de <img> terug op auto en vult het beeld het vlak niet.   */
.hero__beeld picture,
.accordeon__beeld picture,
.proces__beeld picture { display: block; width: 100%; height: 100%; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; }
/* Vlakke dekking, geen verloop. Brandbook pagina 08. */
.hero__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--overlay-zwart-half);
}
.hero__binnen { position: relative; z-index: var(--z-inhoud); width: 100%; }
.hero__inhoud { max-width: 54rem; }
/* Een hero ligt altijd op fotografie, ook als de sectie eromheen licht
   is. Kop en zwakke tekst krijgen daarom de kleuren van een donker
   vlak; zonder deze regel valt een <h1> zonder .display terug op
   nokzwart en verdwijnt hij in de foto.                               */
.hero h1, .hero h2, .hero .display { color: var(--kalkwit); }
.hero .zwak { color: var(--tekst-op-donker-zwak); }
.hero__lead {
  margin-top: var(--r-3);
  color: var(--valleibeige);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  max-width: 40ch;
}
.hero .knoppen { margin-top: var(--r-5); }

/* Het beeld schuift traag mee tijdens het scrollen. */
.hero__beeld img { will-change: transform; }

/* --- Gesplitste hero (home) --------------------------------------------
   Links een massief nokzwart vlak met de tekst en het merkteken groot en
   stil in de achtergrond, rechts de foto over de volle hoogte, zonder
   overlay. De tekst hoeft niet meer over het beeld heen, dus het beeld
   blijft helemaal zichtbaar.                                              */
.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(calc(100svh - var(--header-h)), 56rem);
  padding: 0;
}
.hero__paneel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Valleibeige, niet zwart: onder de zwarte header leest een donker vlak
     plus een donkere foto als één zwaar blok.                            */
  background: var(--valleibeige);
  /* De tekst lijnt links uit met het logo in de header, ook boven 1440 px. */
  padding: var(--r-7) var(--r-6) var(--r-7)
           max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.hero__merk {
  position: absolute;
  left: -12%; bottom: -18%;
  width: 92%;
  fill: var(--nokzwart);
  opacity: 0.05;
  pointer-events: none;
}
.hero--split .hero__inhoud { position: relative; max-width: 36rem; }
.hero--split .display {
  font-size: clamp(2.5rem, 1.4rem + 2.9vw, 4rem);
  max-width: none;
  color: var(--nokzwart);
}
.hero--split .label { margin-bottom: var(--r-3); color: var(--tekst-op-beige-zwak); }
.hero--split .hero__lead { max-width: 34ch; color: var(--tekst-op-beige); }
.hero--split .knoppen { margin-top: var(--r-5); }
.hero__foto { position: relative; min-height: 22rem; background: var(--roetgrijs); }
/* Onderliggende pagina: dezelfde opbouw, maar niet schermvullend.       */
.hero--compact { min-height: min(calc(78svh - var(--header-h)), 40rem); }
/* Home: de foto vult het hele eerste scherm. De tekst staat op een beige
   kaart linksonder op de foto, zodat er geen donkere laag over het beeld
   hoeft.                                                                 */
.hero--breedbeeld {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  background: var(--roetgrijs);
}
.hero--breedbeeld .hero__foto {
  grid-area: 1 / 1;
  min-height: 34rem;
  height: calc(100svh - var(--header-h));
}
.hero--breedbeeld .hero__foto img { object-position: 50% 45%; }
.hero--breedbeeld .hero__paneel {
  grid-area: 1 / 1;
  align-self: end; justify-self: start;
  z-index: 1;
  width: min(32rem, calc(100% - 2 * var(--gutter)));
  margin: 0 0 var(--r-5) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding: var(--r-5);
}
.hero--breedbeeld .hero__inhoud { max-width: none; }
.hero--breedbeeld .display { font-size: clamp(2.25rem, 1.5rem + 1.4vw, 2.875rem); }
.hero--breedbeeld .knoppen { margin-top: var(--r-4); }
/* Score uit het Google-bedrijfsprofiel, zonder link.                    */
.hero__score {
  display: flex; align-items: center; gap: 0.625rem;
  margin-top: var(--r-3);
  font-size: var(--t-klein); color: var(--tekst-op-beige);
}
.hero__score svg { width: 5.4rem; height: 1rem; fill: var(--brons); flex: none; }
.hero__score strong { font-family: var(--font-kop); font-weight: 600; color: var(--nokzwart); }
.hero--split .kruimel { margin-bottom: var(--r-4); }
.hero--split .kruimel a, .hero--split .kruimel span { color: var(--tekst-op-beige-zwak); }
#stappen { scroll-margin-top: var(--header-h); }
.hero__foto picture,
.hero__foto img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

.hero--pagina { min-height: auto; padding-block: var(--r-7) var(--sectie-y); align-items: center; }

.hero--pagina { min-height: auto; padding-block: var(--r-7) var(--sectie-y); align-items: center; }
.hero--pagina .hero__beeld::after { background: var(--overlay-zwart-zwaar); }
.hero--vlak { min-height: auto; padding-block: var(--r-7) var(--sectie-y); background: var(--nokzwart); }

/* Kruimelpad */
.kruimel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--mistgrijs);
  margin-bottom: var(--r-3);
}
.kruimel ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.kruimel li { display: flex; align-items: center; gap: 0.625rem; }
.kruimel li + li::before { content: "·"; color: var(--brons); }
.kruimel a:hover { color: var(--accent-tekst); }
.kruimel span[aria-hidden] { color: var(--brons); }



/* --- USP ----------------------------------------------------------------- */

.usp-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
}
.op-donker .usp-raster { border-top-color: var(--lijn-op-donker); }
.usp {
  padding: var(--r-4) var(--r-4) var(--r-5) 0;
  border-top: var(--lijn-constructie) solid transparent;
  margin-top: calc(var(--lijn-constructie) * -1);
  transition: border-color var(--duur) var(--ease);
}
.usp:hover { border-top-color: var(--accent); }
.usp__icoon { margin-bottom: var(--r-3); color: var(--accent); }
.op-donker .usp__icoon { color: var(--brons-licht); }
.usp h3 { margin-bottom: var(--r-2); }
.usp p { font-size: var(--t-klein); line-height: 1.6; max-width: 32ch; }


/* --- Categorieblokken ----------------------------------------------------
   Twee richtingen, visueel uit elkaar gehouden: onderhoudsarm staat op
   zwart, hout op beige.                                                   */

.categorie { position: relative; overflow: hidden; }
.categorie__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--raster-gap);
  /* Bovenlijn, niet middenlijn. Gecentreerd zakt een liggend beeld naast een
     lange tekstkolom tot ver onder de kop en gaat het zweven; uitgelijnd op
     de bovenrand begint het op dezelfde hoogte als het label.            */
  align-items: start;
}
.categorie__beeld { grid-column: span 7; position: relative; }
.categorie__beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.categorie__inhoud { grid-column: 9 / span 4; }
.categorie--omgekeerd .categorie__beeld { grid-column: 6 / span 7; grid-row: 1; }
.categorie--omgekeerd .categorie__inhoud { grid-column: 1 / span 4; grid-row: 1; }
.categorie__nummer {
  font-family: var(--font-kop);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label);
  color: var(--brons-licht);
  display: block;
  margin-bottom: var(--r-2);
}
.op-beige .categorie__nummer, .op-licht .categorie__nummer { color: var(--brons); }
.categorie h2 { margin-bottom: var(--r-3); }
.categorie__materialen {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: var(--r-3) 0 var(--r-4);
}
.materiaaltag {
  font-family: var(--font-kop);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4375rem 0.75rem;
  border: var(--lijn-haar) solid var(--lijn-op-donker);
  color: var(--tekst-op-donker-zwak);
}
.op-beige .materiaaltag, .op-licht .materiaaltag {
  border-color: var(--lijn-op-licht); color: var(--tekst-op-licht-zwak);
}


/* --- Accordeon · types buitenruimte -------------------------------------
   Zeven panelen naast elkaar. Het actieve paneel neemt de ruimte.         */

.accordeon {
  display: flex;
  gap: var(--lijn-basis);
  height: min(70vh, 34rem);
  background: var(--nokzwart);
}
.accordeon__paneel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0; padding: 0; margin: 0;
  background: var(--roetgrijs);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  color: var(--kalkwit);
  font: inherit;
  transition: flex-grow var(--duur-lang) var(--ease-uit);
}
.accordeon__paneel[aria-expanded="true"] { flex-grow: 4.2; cursor: default; }
.accordeon__beeld { position: absolute; inset: 0; }
.accordeon__beeld img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.55);
  transform: scale(1.04);
  transition: filter var(--duur-lang) var(--ease), transform var(--duur-lang) var(--ease-uit);
}
.accordeon__beeld::after {
  content: ""; position: absolute; inset: 0;
  background: var(--overlay-zwart-zwaar);
  transition: background-color var(--duur-lang) var(--ease);
}
.accordeon__paneel[aria-expanded="true"] .accordeon__beeld img { filter: none; transform: none; }
.accordeon__paneel[aria-expanded="true"] .accordeon__beeld::after { background: var(--overlay-zwart-half); }
.accordeon__paneel:hover .accordeon__beeld::after { background: var(--overlay-zwart-half); }

.accordeon__inhoud {
  position: relative; z-index: var(--z-inhoud);
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--r-3);
}
/* Het open paneel zet zijn tekst op een egaal zwart vlak. Dat vlak is
   precies zo hoog als de tekst zelf, zodat de foto erboven vrij blijft.
   De dekking is 0,52: samen met de 0,46 die al over de foto ligt komt dat
   uit op 0,74, en daarmee haalt valleibeige 5,35:1 ook als er wit onder
   het vlak valt. Lager kan niet zonder de leesbaarheid te verliezen.    */
.accordeon__paneel[aria-expanded="true"] .accordeon__inhoud {
  height: auto;
  inset: auto 0 0 0;
  position: absolute;
  background: rgba(18, 17, 16, 0.52);
  padding: var(--r-2) var(--r-3);
}
/* In het open paneel loopt de tekst over de volle paneelbreedte. Op 38ch
   viel hij terug op drie regels en werd het vlak onnodig hoog.          */
.accordeon__paneel[aria-expanded="true"] .accordeon__tekst {
  max-width: 54ch;
  margin-top: var(--r-1);
}
.accordeon__paneel[aria-expanded="true"] .accordeon__nummer {
  top: auto; bottom: calc(100% + var(--r-2)); left: var(--r-3);
}
.accordeon__icoon { color: var(--brons-licht); margin-bottom: var(--r-2); }

.accordeon__nummer {
  position: absolute; top: var(--r-3); left: var(--r-3);
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  color: var(--valleibeige);
}
/* Gesloten paneel: de titel staat verticaal, gelezen van onder naar boven. */
.accordeon__titel {
  font-family: var(--font-kop);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-h3);
  color: var(--kalkwit);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  transition: none;
}
.accordeon__paneel[aria-expanded="true"] .accordeon__titel {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-h2);
}
.accordeon__tekst {
  max-width: 38ch;
  margin-top: var(--r-2);
  color: var(--valleibeige);
  font-size: var(--t-klein);
  line-height: 1.6;
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition: opacity var(--duur) var(--ease) 140ms, transform var(--duur) var(--ease-uit) 140ms;
}
.accordeon__paneel[aria-expanded="true"] .accordeon__tekst { opacity: 1; transform: none; }
.accordeon__paneel:not([aria-expanded="true"]) .accordeon__tekst { position: absolute; pointer-events: none; }


/* --- Proces · vastgezette scrollreeks ------------------------------------
   Het beeld blijft staan, de stappen lopen erlangs. Bij minder beweging
   of zonder JavaScript is het een gewone lijst met beeld per stap.        */

.proces { position: relative; }
.proces__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--raster-gap);
}
.proces__visueel {
  grid-column: span 6;
  position: sticky;
  top: 8rem;
  align-self: start;
  height: min(70vh, 34rem);
  overflow: hidden;
}
.proces__beeld { position: absolute; inset: 0; }
.proces__beeld img { width: 100%; height: 100%; object-fit: cover; }
.proces__beeld {
  opacity: 0;
  transition: opacity var(--duur-lang) var(--ease);
}
.proces__beeld.is-actief { opacity: 1; }
.proces__beeld::after {
  content: ""; position: absolute; inset: 0;
  background: var(--overlay-zwart-licht);
}
.proces__merk {
  position: absolute; z-index: var(--z-inhoud);
  left: var(--r-3); bottom: var(--r-3);
  display: flex; align-items: baseline; gap: 0.75rem;
  font-family: var(--font-kop); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  font-size: var(--t-label); color: var(--kalkwit);
  background: var(--nokzwart);
  padding: 0.625rem 1rem;
}
.proces__merk b { color: var(--brons-licht); font-weight: var(--w-semibold); }

.proces__stappen { grid-column: 8 / span 5; }
.proces__stap {
  padding-block: var(--r-6);
  border-top: var(--lijn-haar) solid var(--lijn-op-donker);
  opacity: 0.38;
  transition: opacity var(--duur-lang) var(--ease);
}
.proces__stap:first-child { border-top: 0; padding-top: 0; }
.proces__stap.is-actief { opacity: 1; }
.proces__stap-nummer {
  display: flex; align-items: center; gap: var(--r-2);
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  color: var(--brons-licht); margin-bottom: var(--r-2);
}
.proces__stap-nummer::after {
  content: ""; height: var(--lijn-haar); flex: 1;
  background: var(--lijn-op-donker);
  transition: background-color var(--duur-lang) var(--ease);
}
.proces__stap.is-actief .proces__stap-nummer::after { background: var(--brons); }
.proces__stap h3 { margin-bottom: var(--r-2); }
.proces__stap-uitkomst {
  margin-top: var(--r-3);
  padding-top: var(--r-2);
  border-top: var(--lijn-haar) solid var(--lijn-op-donker);
  font-size: var(--t-klein);
  color: var(--tekst-op-donker-zwak);
}
.proces__stap-uitkomst b { color: var(--valleibeige); font-weight: var(--w-semibold); }
/* De resultaatregel stond alleen op een donker vlak. Sinds de stappen op
   werkwijze licht zijn, moet hij daar ook meelezen: mistgrijs haalt op
   kalkwit maar 2,4:1 en valleibeige 1,4:1.                              */
.op-licht .proces__stap-uitkomst,
.op-beige .proces__stap-uitkomst {
  border-top-color: var(--lijn-op-licht);
  color: var(--tekst-op-licht-zwak);
}
.op-licht .proces__stap-uitkomst b { color: var(--tekst-op-licht); }
.op-beige .proces__stap-uitkomst,
.op-beige .proces__stap-uitkomst b { color: var(--tekst-op-beige); }


/* --- Projecten · editorial ----------------------------------------------- */

.project {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--raster-gap);
  align-items: end;
  padding-block: var(--sectie-y);
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
}
.op-donker .project { border-top-color: var(--lijn-op-donker); }
.project:first-of-type { border-top: 0; }

.project__beeld { grid-column: span 8; position: relative; overflow: hidden; }
.project__beeld img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 900ms var(--ease-uit);
}
.project:hover .project__beeld img { transform: scale(1.03); }
.project__inhoud { grid-column: 10 / span 3; padding-bottom: var(--r-2); }

/* Elk tweede project spiegelt, zodat de pagina niet in de pas loopt. */
.project:nth-of-type(even) .project__beeld { grid-column: 5 / span 8; grid-row: 1; }
.project:nth-of-type(even) .project__inhoud { grid-column: 1 / span 3; grid-row: 1; }

/* Een breder, rustiger blok voor het eerste project. */
.project--groot .project__beeld { grid-column: span 12; }
.project--groot .project__beeld img { aspect-ratio: 16 / 9; }
.project--groot .project__inhoud { grid-column: span 12; display: flex; flex-wrap: wrap; gap: var(--r-4) var(--r-6); align-items: baseline; }
.project--groot .project__inhoud > * { max-width: 34rem; }

.project__nummer {
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  color: var(--brons); display: block; margin-bottom: var(--r-2);
}
.op-donker .project__nummer { color: var(--brons-licht); }
.project h3 { margin-bottom: var(--r-2); }
.project p { font-size: var(--t-klein); line-height: 1.6; }
.project__meta {
  margin-top: var(--r-3);
  padding-top: var(--r-2);
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
  font-family: var(--font-kop);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-op-licht-zwak);
}
.op-donker .project__meta { border-top-color: var(--lijn-op-donker); color: var(--tekst-op-donker-zwak); }
.project__meta b { color: inherit; font-weight: var(--w-semibold); }


/* --- Waarden · ghostcijfers ---------------------------------------------- */

/* Vier uitgangspunten op één rij, onder één haarlijn. Het cijfer staat klein
   en scherp naast het label, als nummering. Geen watermerk: een cijfer van
   honderd pixels op tien procent dekking leest als vlek, niet als cijfer. */
.waarden {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raster-gap);
  padding-top: var(--r-5);
  border-top: var(--lijn-haar) solid var(--lijn-op-donker);
}
.waarde {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--r-2);
  align-items: baseline;
  align-content: start;
}
.waarde__cijfer {
  font-family: var(--font-kop);
  font-size: 1.5rem;
  font-weight: var(--w-semibold);
  line-height: 1;
  color: var(--kalkwit);
  font-variant-numeric: tabular-nums;
}
.waarde__label {
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--brons-licht);
}
.waarde h3 { grid-column: 1 / -1; margin: var(--r-3) 0 var(--r-1); }
.waarde p  { grid-column: 1 / -1; max-width: 34ch; }

.op-licht .waarden, .op-beige .waarden { border-top-color: var(--lijn-op-licht); }
.op-licht .waarde__cijfer { color: var(--tekst-op-licht); }
.op-beige .waarde__cijfer { color: var(--tekst-op-beige); }
.op-licht .waarde__label, .op-beige .waarde__label { color: var(--brons); }


/* --- Materialen ---------------------------------------------------------- */

.materialen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--lijn-basis);
  background: var(--lijn-op-donker);
  border: var(--lijn-basis) solid transparent;
}
.materiaal {
  background: var(--nokzwart);
  padding: var(--r-4);
  display: flex; flex-direction: column; gap: var(--r-2);
  min-height: 13rem;
  transition: background-color var(--duur) var(--ease);
}
.op-licht .materialen, .op-beige .materialen { background: var(--lijn-op-licht); }
.op-licht .materiaal { background: var(--kalkwit); }
.op-beige .materiaal { background: var(--valleibeige); }
.materiaal:hover { background: var(--roetgrijs); }
.op-licht .materiaal:hover { background: var(--vlak-beige); }
.op-beige .materiaal:hover { background: var(--vlak-licht); }
.materiaal__naam {
  font-family: var(--font-kop); font-size: var(--t-h3);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-h3);
}
.materiaal__soort {
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--brons-licht);
}
.op-licht .materiaal__soort, .op-beige .materiaal__soort { color: var(--brons); }
.materiaal p { font-size: var(--t-klein); line-height: 1.6; margin-top: auto; }


/* --- Beeldstrook --------------------------------------------------------- */

.strook { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-gap); }
.strook__groot { grid-column: span 7; }
.strook__klein { grid-column: span 5; align-self: end; }
.strook img { width: 100%; object-fit: cover; }
.strook__groot img { aspect-ratio: 4 / 5; }
.strook__klein img { aspect-ratio: 3 / 2; }
.bijschrift {
  margin-top: var(--r-2);
  font-size: var(--t-label);
  font-family: var(--font-kop);
  font-weight: var(--w-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-op-donker-zwak);
}
.op-licht .bijschrift, .op-beige .bijschrift { color: var(--tekst-op-licht-zwak); }


/* --- Aanroep tot actie --------------------------------------------------- */

.cta { position: relative; overflow: hidden; }
.cta__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-gap); align-items: center; }
.cta__inhoud { grid-column: span 6; }
.cta__zij { grid-column: 8 / span 5; }
.cta__contactlijst { display: flex; flex-direction: column; }
.cta__contactrij {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--r-3);
  padding-block: var(--r-3);
  border-top: var(--lijn-haar) solid var(--lijn-op-donker);
}
.cta__contactrij dt {
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--mistgrijs); flex: none;
}
.cta__contactrij dd { margin: 0; text-align: right; }


/* --- Formulier ----------------------------------------------------------- */

.formulier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-3); }
.veld { display: flex; flex-direction: column; gap: 0.625rem; }
.veld--breed { grid-column: span 2; }
.veld label {
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--mistgrijs);
}
.op-licht .veld label, .op-beige .veld label { color: var(--tekst-op-licht-zwak); }
.veld input, .veld select, .veld textarea {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--kalkwit);
  background: transparent;
  border: 0;
  border-bottom: var(--lijn-basis) solid var(--lijn-op-donker);
  padding: 0.875rem 0;
  width: 100%;
  transition: border-color var(--duur) var(--ease);
  appearance: none;
}
.veld input::placeholder, .veld textarea::placeholder { color: var(--tekst-placeholder); }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-bottom-color: var(--brons-licht);
}
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible {
  outline: var(--lijn-basis) solid var(--accent-tekst); outline-offset: 4px;
}
.veld textarea { min-height: 9rem; resize: vertical; }
.veld select { cursor: pointer; }
.veld select option { background: var(--nokzwart); color: var(--kalkwit); }
.veld__hulp { font-size: var(--t-label); color: var(--mistgrijs); }
.formulier__onder { grid-column: span 2; display: flex; flex-wrap: wrap; gap: var(--r-2); align-items: center; justify-content: flex-start; }


/* --- Veelgestelde vragen ------------------------------------------------- */

.vraag {
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
}
.op-donker .vraag { border-top-color: var(--lijn-op-donker); }
.vraag:last-child { border-bottom: var(--lijn-haar) solid var(--lijn-op-licht); }
.op-donker .vraag:last-child { border-bottom-color: var(--lijn-op-donker); }
.vraag__knop {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-3);
  padding: var(--r-3) 0;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-kop); font-size: var(--t-h3);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-h3);
  color: inherit;
}
.vraag__teken { position: relative; width: 1rem; height: 1rem; flex: none; }
.vraag__teken::before, .vraag__teken::after {
  content: ""; position: absolute; background: var(--brons);
  transition: transform var(--duur) var(--ease-uit), opacity var(--duur) var(--ease);
}
.op-donker .vraag__teken::before, .op-donker .vraag__teken::after { background: var(--brons-licht); }
.vraag__teken::before { left: 0; top: calc(50% - 1px); width: 100%; height: var(--lijn-basis); }
.vraag__teken::after  { top: 0; left: calc(50% - 1px); height: 100%; width: var(--lijn-basis); }
.vraag__knop[aria-expanded="true"] .vraag__teken::after { transform: rotate(90deg); opacity: 0; }
.vraag__paneel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--duur) var(--ease-uit);
}
.vraag__paneel > div { overflow: hidden; }
.vraag__knop[aria-expanded="true"] + .vraag__paneel { grid-template-rows: 1fr; }
.vraag__paneel p { padding-bottom: var(--r-3); max-width: 62ch; }


/* --- Voettekst ----------------------------------------------------------- */

.site-footer { background: var(--nokzwart); color: var(--valleibeige); }
.footer__boven {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--raster-gap);
  padding-block: var(--sectie-y) var(--r-6);
}
.footer__merk { grid-column: span 4; }
.footer__merk .logo { margin-bottom: var(--r-3); }
.footer__payoff {
  font-family: var(--font-kop); font-size: var(--t-h3);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-h3);
  color: var(--kalkwit); max-width: 18ch;
}
.footer__kolom { grid-column: span 2; }
.footer__kolom--breed { grid-column: span 3; }
/* Dit is een label, geen kop. De koppenstructuur loopt via een visueel
   verborgen h2 ernaast, want hoofdletters mogen nooit op een kop staan.  */
.footer__kop {
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--mistgrijs);
  margin-bottom: var(--r-3);
}
.footer__lijst { display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--t-klein); }
.footer__lijst a { position: relative; display: inline-block; }
.footer__lijst a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%;
  height: var(--lijn-haar); background: var(--brons-licht);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--duur) var(--ease-uit);
}
.footer__lijst a:hover::after, .footer__lijst a:focus-visible::after { transform: scaleX(1); }
.footer__onder {
  display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-4);
  align-items: center; justify-content: space-between;
  padding-block: var(--r-3);
  border-top: var(--lijn-haar) solid var(--lijn-op-donker);
  font-size: var(--t-label);
  color: var(--mistgrijs);
}
.footer__onder-links { display: flex; flex-wrap: wrap; gap: var(--r-3); }
/* Voorbereid op sociale media. Er staan nu geen accounts; zodra die er zijn
   komt hier een rij met <a class="sociaal">-items.                        */
.footer__sociaal { display: flex; gap: var(--r-2); }
.footer__sociaal:empty { display: none; }


/* --- Reviews (home) ----------------------------------------------------- */
.reviews { align-items: start; row-gap: var(--r-5); }
.reviews__score { display: flex; align-items: center; gap: var(--r-3); margin-top: var(--r-4); }
.reviews__cijfer {
  font-family: var(--font-kop); font-weight: 800;
  font-size: 3.5rem; line-height: 1; color: var(--nokzwart);
}
.reviews__bron {
  display: flex; flex-direction: column; gap: 0.375rem;
  font-size: var(--t-klein); color: var(--tekst-op-licht-zwak);
}
.reviews__bron svg { width: 6rem; height: 1.1rem; fill: var(--brons); }
.reviews__lijst { display: flex; flex-direction: column; gap: var(--r-5); }
.review { margin: 0; padding-top: var(--r-4); border-top: var(--lijn-basis) solid var(--nokzwart); }
.review blockquote { margin: 0; }
.review blockquote p {
  max-width: 30ch;
  font-family: var(--font-kop); font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.25;
  color: var(--nokzwart); text-wrap: balance;
}
.review figcaption {
  display: flex; align-items: center; gap: var(--r-2);
  margin-top: var(--r-3);
  font-size: var(--t-klein); color: var(--tekst-op-licht-zwak);
}
.review figcaption svg { width: 4.5rem; height: 0.85rem; fill: var(--brons); flex: none; }
.footer__onder-links a[href^="https://uniekwebdesign"] { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Aandachtsblok ------------------------------------------------------- */

.notitie {
  border-left: var(--lijn-constructie) solid var(--brons);
  padding: var(--r-2) 0 var(--r-2) var(--r-3);
  font-size: var(--t-klein);
  line-height: 1.6;
  max-width: 54ch;
}

.opsomming { display: flex; flex-direction: column; gap: 0.875rem; }
.opsomming li {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem;
  font-size: var(--t-klein); line-height: 1.6;
  max-width: 60ch;
}
.opsomming li::before {
  content: ""; width: 0.75rem; height: var(--lijn-basis);
  background: var(--brons); margin-top: 0.6875rem;
}
.op-donker .opsomming li::before { background: var(--brons-licht); }


/* --- Stappen · werkwijze ---------------------------------------------------
   Vijf stappen op één rij onder een haarlijn. Per stap een nummer, een kop
   en één zin. Op een tablet drie per rij, op een telefoon onder elkaar.   */
.stappen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--raster-gap);
  counter-reset: none;
}
.stap {
  padding-top: var(--r-4);
  border-top: var(--lijn-basis) solid var(--lijn-op-licht);
}
.stap__nummer {
  display: block;
  margin-bottom: var(--r-3);
  font-family: var(--font-kop); font-size: 1.5rem;
  font-weight: var(--w-semibold); line-height: 1;
  color: var(--brons);
  font-variant-numeric: tabular-nums;
}
.stap h3 { margin-bottom: var(--r-1); }
.stap p { font-size: var(--t-klein); color: var(--tekst-op-licht-zwak); max-width: 30ch; }

@media (max-width: 1100px) {
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--r-5); }
}
@media (max-width: 640px) {
  .stappen { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .stap { display: grid; grid-template-columns: 2.75rem 1fr; padding-block: var(--r-3); border-top-width: var(--lijn-haar); }
  .stap__nummer { grid-row: span 2; margin: 0; font-size: 1.25rem; }
}


/* --- Afspraken · werkwijze --------------------------------------------------
   Twee lichte vlakken naast elkaar. Per punt een korte kop en één regel,
   gescheiden door een haarlijn: scanbaar in plaats van een blok tekst.    */
.afspraken {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raster-gap);
}
.afspraken__kolom { background: var(--kalkwit); padding: var(--r-5); }
.afspraken__kolom h3 { margin-bottom: var(--r-3); }
.afspraken__lijst li {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding-block: var(--r-3);
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
}
.afspraken__lijst li:last-child { padding-bottom: 0; }
.afspraken__lijst b {
  font-family: var(--font-kop); font-size: var(--t-body);
  font-weight: var(--w-semibold); color: var(--tekst-op-licht);
}
.afspraken__lijst span { font-size: var(--t-klein); color: var(--tekst-op-licht-zwak); }

@media (max-width: 900px) {
  .afspraken { grid-template-columns: minmax(0, 1fr); }
  .afspraken__kolom { padding: var(--r-4); }
}


/* ==========================================================================
   RESPONSIEF
   ========================================================================== */

/* Tussen 900 en 1200 px past het telefoonnummer niet meer naast het menu.
   De knop blijft, want dat is de conversieroute; bellen kan via contact.  */
@media (max-width: 1200px) {
  .header-tel { display: none; }
  .hoofdnav__lijst { gap: var(--r-3); }
  .header-binnen { gap: var(--r-3); }
}

@media (max-width: 1100px) {
  .categorie__inhoud { grid-column: 9 / span 4; }
  .proces__visueel { grid-column: span 5; }
  .proces__stappen { grid-column: 7 / span 6; }
  .project__beeld { grid-column: span 7; }
  .project__inhoud { grid-column: 9 / span 4; }
  .project:nth-of-type(even) .project__beeld { grid-column: 6 / span 7; }
  .project:nth-of-type(even) .project__inhoud { grid-column: 1 / span 4; }
  .footer__merk { grid-column: span 12; margin-bottom: var(--r-4); }
  .footer__kolom { grid-column: span 4; }
  .footer__kolom--breed { grid-column: span 4; }
}

@media (max-width: 900px) {
  .hoofdnav, .header-actie .knop--kop, .header-tel { display: none; }
  .menuknop { display: flex; }
  .site-header::before { transform: none; }
  .site-header { border-bottom-color: var(--lijn-op-donker); }

  .categorie__raster { gap: var(--r-4); }
  .categorie__beeld,
  .categorie--omgekeerd .categorie__beeld { grid-column: span 12; grid-row: auto; }
  .categorie__inhoud,
  .categorie--omgekeerd .categorie__inhoud { grid-column: span 12; grid-row: auto; }

  .waarden { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--r-5); }

  .cta__inhoud, .cta__zij { grid-column: span 12; }
  .cta__zij { margin-top: var(--r-4); }

  .strook__groot, .strook__klein { grid-column: span 12; }
  .strook__klein { margin-top: var(--r-2); }

  .project { gap: var(--r-3); padding-block: var(--sectie-y); }
  .project__beeld,
  .project:nth-of-type(even) .project__beeld { grid-column: span 12; grid-row: auto; }
  .project__inhoud,
  .project:nth-of-type(even) .project__inhoud { grid-column: span 12; grid-row: auto; }
  .project--groot .project__beeld img { aspect-ratio: 3 / 2; }

  /* Het accordeon wordt een stapel: verticale titels werken niet op een
     smal scherm, en alle tekst moet leesbaar blijven.                     */
  .accordeon { flex-direction: column; height: auto; gap: var(--lijn-basis); }
  .accordeon__paneel { flex: none; min-height: 7rem; }
  .accordeon__paneel[aria-expanded="true"] { min-height: 21rem; }
  .accordeon__titel { writing-mode: horizontal-tb; transform: none; font-size: var(--t-h3); }
  .accordeon__inhoud { padding: var(--r-3); }
  .accordeon__nummer { top: var(--r-3); left: auto; right: var(--r-3); }

  /* Het vastgezette beeld werkt niet in een kolom: per stap een eigen beeld. */
  .proces__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .proces__visueel { display: none; }
  .proces__stappen { grid-column: span 12; }
  .proces__stap { opacity: 1; padding-block: var(--r-5); }
  .proces__stap-beeld { display: block; margin-bottom: var(--r-3); }
  .proces__stap-beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

  .formulier { grid-template-columns: minmax(0, 1fr); }
  .veld--breed, .formulier__onder { grid-column: span 1; }
}

@media (min-width: 901px) {
  .proces__stap-beeld { display: none; }
}

@media (max-width: 640px) {
  .logo__descriptor { display: none; }
  .logo__wordmark { font-size: 1.25rem; }
  .hero { min-height: min(calc(92svh - var(--header-h)), 36rem); padding-block: var(--r-5) var(--r-4); }
  .hero--pagina, .hero--vlak { padding-block: var(--r-6) var(--sectie-y); }
  .knoppen .knop { width: 100%; justify-content: space-between; }
  .cta__contactrij { flex-direction: column; gap: 0.25rem; }
  .cta__contactrij dd { text-align: left; }
  .project--groot .project__inhoud { gap: var(--r-3); }
  .waarden { grid-template-columns: minmax(0, 1fr); }
  .formulier__onder { flex-direction: column; align-items: stretch; }
  .formulier__onder .knop { width: 100%; justify-content: space-between; }
  .footer__kolom, .footer__kolom--breed { grid-column: span 12; }
  .footer__onder { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   PROJECTMOZAÏEK
   Volle breedte, zonder tussenruimte. Het beeld is de pagina; tekst komt
   pas tevoorschijn als u een tegel aanwijst.
   ========================================================================== */

.mozaiek {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  background: var(--nokzwart);
}

.tegel {
  position: relative;
  display: block;
  grid-column: span 4;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0; padding: 0; margin: 0;
  background: var(--roetgrijs);
  cursor: pointer;
  color: var(--kalkwit);
  font: inherit;
  text-align: left;
}
/* Het ritme: twee brede tegels openen de reeks, daarna een rustige rij van
   drie, dan weer een breed paar. Dat houdt het raster in beweging zonder
   dat er ooit een gat valt.                                               */
.tegel--breed { grid-column: span 6; aspect-ratio: 16 / 9; }
.tegel--hoog  { grid-column: span 4; aspect-ratio: 3 / 4; }
.tegel--vol   { grid-column: span 12; aspect-ratio: 21 / 9; }

.tegel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-uit), filter var(--duur-lang) var(--ease);
}
.tegel picture { display: block; width: 100%; height: 100%; }

/* Vlakke dekking, geen verloop. */
.tegel::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--overlay-zwart-licht);
  transition: background-color var(--duur) var(--ease);
}
.tegel:hover img, .tegel:focus-visible img { transform: scale(1.04); }
.tegel:hover::after, .tegel:focus-visible::after { background: var(--overlay-zwart-zwaar); }

/* De tekst staat op een eigen vlak. Rechtstreeks op de foto haalt zelfs
   kalkwit het niet zodra er een lichte lucht achter zit, en op een telefoon
   staat deze tekst altijd aan.                                            */
.tegel__inhoud {
  position: absolute; inset: auto 0 0 0;
  z-index: var(--z-inhoud);
  background: rgba(18, 17, 16, 0.72);
  padding: var(--r-3);
  transform: translate3d(0, 0.75rem, 0);
  opacity: 0;
  transition: opacity var(--duur) var(--ease), transform var(--duur) var(--ease-uit);
}
.tegel:hover .tegel__inhoud,
.tegel:focus-visible .tegel__inhoud { opacity: 1; transform: none; }

.tegel__titel {
  display: block;
  font-family: var(--font-kop); font-size: var(--t-h3);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-h3);
  color: var(--kalkwit);
}
.tegel__meta {
  display: block; margin-top: 0.375rem;
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--valleibeige);
}
/* Het vergrootteken: De Snede als hoekmarkering, rechtsboven. */
.tegel__teken {
  position: absolute; top: 0; right: 0;
  width: 3rem; height: 3rem;
  z-index: var(--z-inhoud);
  background: var(--nokzwart);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: 0;
  transition: opacity var(--duur) var(--ease);
}
.tegel:hover .tegel__teken, .tegel:focus-visible .tegel__teken { opacity: 1; }

/* Op een aanraakscherm is hover er niet: daar staat de tekst altijd. */
/* Aanraakbediening. Een tekstlink van 30 px is met een vinger net te raken;
   44 px is de maat die Apple en Google allebei aanhouden. De onderstreping
   blijft waar hij staat, alleen het raakvlak groeit.                      */
@media (hover: none) {
  .link { padding-block: 0.6875rem; }
  .footer__lijst { gap: 0.25rem; }
  .footer__lijst a { padding-block: 0.6875rem; }
  .footer__lijst a::after { bottom: 0.5625rem; }
  .footer__onder-links a { display: inline-block; padding-block: 0.75rem; }
  .cta__contactrij dd a,
  .gegevens a { display: inline-block; padding-block: 0.6875rem; }
  .logo { min-height: 44px; }
  .kruimel a { display: inline-block; padding-block: 0.75rem; }
  .filter { min-height: 44px; }
  .link-inline { padding-block: 0.6875rem; }
}

@media (hover: none) {
  .tegel__inhoud { opacity: 1; transform: none; }
  .tegel::after { background: var(--overlay-zwart-licht); }
}


/* --- Filter -------------------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: var(--lijn-basis);
  margin-bottom: var(--r-5);
}
.filter {
  padding: 0.75rem 1.125rem;
  border: var(--lijn-haar) solid var(--lijn-op-donker);
  background: transparent;
  color: var(--tekst-op-donker-zwak);
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duur-kort) var(--ease),
              border-color var(--duur-kort) var(--ease),
              background-color var(--duur-kort) var(--ease);
}
.filter:hover { color: var(--kalkwit); border-color: var(--brons); }
.filter[aria-pressed="true"] {
  background: var(--valleibeige); border-color: var(--valleibeige);
  color: var(--nokzwart);
}
.op-licht .filter, .op-beige .filter {
  border-color: var(--lijn-op-licht); color: var(--tekst-op-licht-zwak);
}
.op-licht .filter:hover, .op-beige .filter:hover { color: var(--nokzwart); border-color: var(--brons); }
.op-licht .filter[aria-pressed="true"], .op-beige .filter[aria-pressed="true"] {
  background: var(--nokzwart); border-color: var(--nokzwart); color: var(--kalkwit);
}
.tegel[hidden] { display: none; }


/* --- Lichtbak ------------------------------------------------------------ */

.lichtbak {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--nokzwart);
  display: grid;
  /* Het beeld houdt altijd minstens de helft van het scherm, ook als het
     bijschrift lang is. De voet schuift dan mee in plaats van te groeien. */
  grid-template-rows: auto minmax(50svh, 1fr) auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duur) var(--ease), visibility 0s linear var(--duur);
}
.lichtbak.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lichtbak__kop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--r-4);
  padding: var(--r-3) var(--gutter);
  border-bottom: var(--lijn-haar) solid var(--lijn-op-donker);
}
.lichtbak__titel {
  font-family: var(--font-kop); font-size: var(--t-h3);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-h3);
  color: var(--kalkwit);
}
.lichtbak__meta {
  display: block; margin-top: 0.375rem;
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--brons-licht);
}
.lichtbak__sluit {
  position: relative;
  width: 2.75rem; height: 2.75rem; flex: none;
  background: none; border: var(--lijn-haar) solid var(--lijn-op-donker);
  cursor: pointer;
  transition: border-color var(--duur-kort) var(--ease);
}
.lichtbak__sluit:hover { border-color: var(--brons); }
.lichtbak__sluit::before, .lichtbak__sluit::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.125rem; height: var(--lijn-basis);
  background: var(--valleibeige);
}
.lichtbak__sluit::before { transform: translate(-50%, -50%) rotate(45deg); }
.lichtbak__sluit::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Het beeldvak krijgt de ruimte die overblijft. Een absoluut geplaatst
   beeld met object-fit past daar altijd in, ongeacht zijn eigen maat.   */
.lichtbak__beeld {
  position: relative;
  min-height: 0;
  padding: var(--r-3) var(--gutter);
}
.lichtbak__beeld img {
  position: absolute;
  inset: var(--r-3) var(--gutter);
  width: auto; height: auto;
  max-width: calc(100% - var(--gutter) * 2);
  max-height: calc(100% - var(--r-3) * 2);
  margin: auto;
  object-fit: contain;
}
.lichtbak__voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-3);
  padding: var(--r-3) var(--gutter);
  border-top: var(--lijn-haar) solid var(--lijn-op-donker);
  max-height: 32svh;
  overflow-y: auto;
}
.lichtbak__tekst { max-width: 62ch; font-size: var(--t-klein); color: var(--valleibeige); }
.lichtbak__nav { display: flex; gap: var(--lijn-basis); flex: none; }
.lichtbak__knop {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: none; border: var(--lijn-haar) solid var(--lijn-op-donker);
  color: var(--valleibeige); cursor: pointer;
  transition: border-color var(--duur-kort) var(--ease), color var(--duur-kort) var(--ease);
}
.lichtbak__knop:hover:not(:disabled) { border-color: var(--brons); color: var(--kalkwit); }
.lichtbak__knop:disabled { opacity: 0.3; cursor: default; }
.lichtbak__knop .icoon { width: 1.125rem; height: 1.125rem; }
.lichtbak__knop--vorige .icoon { transform: rotate(180deg); }
.lichtbak__teller {
  font-family: var(--font-kop); font-size: var(--t-label);
  font-weight: var(--w-semibold); letter-spacing: var(--ls-label);
  color: var(--mistgrijs); flex: none;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .tegel, .tegel--breed, .tegel--hoog { grid-column: span 6; aspect-ratio: 4 / 3; }
  .tegel--vol { grid-column: span 12; aspect-ratio: 16 / 9; }
  .lichtbak__voet { flex-wrap: wrap; }
  .lichtbak__tekst { order: 3; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .tegel, .tegel--breed, .tegel--hoog, .tegel--vol { grid-column: span 12; aspect-ratio: 3 / 2; }
  .lichtbak__kop, .lichtbak__voet { padding-inline: var(--gutter); }
}


/* --- Formulier en gegevenslijst op een licht vlak ------------------------
   Het contactformulier en de bedrijfsgegevens staan niet langer op zwart.
   De velden en de gegevenslijst waren alleen voor het donkere vlak
   uitgewerkt; hieronder staan de tegenhangers. Dezelfde tokens, dezelfde
   contrastregel: op beige is de zwakke tekst roetgrijs, want betongrijs
   haalt daar geen AA.                                                     */

.op-licht .veld input, .op-licht .veld select, .op-licht .veld textarea {
  color: var(--tekst-op-licht);
  border-bottom-color: var(--lijn-op-licht);
}
.op-licht .veld input::placeholder, .op-licht .veld textarea::placeholder {
  color: var(--tekst-op-licht-zwak);
}
.op-licht .veld input:focus, .op-licht .veld select:focus, .op-licht .veld textarea:focus {
  border-bottom-color: var(--brons);
}
.op-licht .veld__hulp { color: var(--tekst-op-licht-zwak); }
.op-beige .veld__hulp { color: var(--tekst-op-beige-zwak); }

.op-licht .cta__contactrij, .op-beige .cta__contactrij { border-top-color: var(--lijn-op-licht); }
.op-licht .cta__contactrij dt { color: var(--tekst-op-licht-zwak); }
.op-beige .cta__contactrij dt { color: var(--tekst-op-beige-zwak); }


/* ==========================================================================
   TELEFOON
   Wat op één kolom anders moet dan op het brede raster. Staat bewust
   onderaan, zodat het de regels hierboven overschrijft.
   ========================================================================== */

/* Een lead direct onder de kop in de contactsectie kreeg geen lucht, op
   elke breedte.                                                           */
.cta__inhoud h2 + .lead { margin-top: var(--r-3); }
/* Een tussenkop direct boven een alinea, buiten een stapel met eigen
   tussenruimte, plakte tegen die alinea aan.                             */
:not(.stapel) > h3 + p { margin-top: var(--r-1); }

/* Een tonale knop op een foto is te licht om te zien. Op de hero krijgt
   hij een vlakke donkere dekking.                                         */
.hero .knop:not(.knop--vol) {
  --knop-toon: rgba(18, 17, 16, 0.62);
  --knop-toon-hover: rgba(18, 17, 16, 0.80);
  --knop-toon-tekst: var(--kalkwit);
  --knop-scheiding: rgba(219, 208, 189, 0.22);
}

@media (max-width: 900px) {
  /* Hero: op één kolom eerst de foto, dan het zwarte vlak met de tekst. */
  .hero--split { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0; }
  .hero__foto { order: -1; min-height: 0; height: 58svh; }
  .hero--breedbeeld .hero__foto { height: calc(100svh - var(--header-h)); min-height: 32rem; }
  .hero--breedbeeld .hero__foto img { object-position: 55% 0; }
  .hero--breedbeeld .hero__paneel {
    justify-self: stretch; width: auto;
    margin: 0 var(--gutter) var(--gutter);
    padding: var(--r-4);
  }
  .hero__paneel { padding: var(--r-5) var(--gutter) var(--r-5); }
  .hero__merk { width: 70%; left: auto; right: -14%; bottom: -24%; }

  /* Werkwijze: op één kolom eerst de tekst, dan het beeld, bij elke stap.
     Anders staat bij stap 02 en 04 de foto boven het label.             */
  .raster--stap > figure { order: 2; }

  /* Accordeon: dichte panelen hoeven alleen hun naam te dragen.          */
  .accordeon__paneel { min-height: 4.5rem; }

  /* Sfeerbeeld naast iets anders: op één kolom duwt het alleen de inhoud
     weg.                                                                 */
  .alleen-breed { display: none; }

  /* Filters: één rij die zijwaarts schuift, in plaats van drie regels.   */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
}

@media (max-width: 640px) {
  /* Hero: titel kleiner zodat tekst en knop samen in beeld passen.       */
  .hero--split .display { font-size: 1.875rem; }
  .hero--split .hero__lead { font-size: 1rem; }
  .hero--split .knoppen { margin-top: var(--r-4); }
  .hero__foto { height: 50svh; }


  /* Knoppen: smallere opvulling en een fractie kleiner, zodat de langste
     tekst samen met het pijlvak op een telefoon past.                    */
  .knop { padding-inline: 1.125rem; gap: 1rem; font-size: 0.875rem; letter-spacing: 0.06em; }
  .knop .icoon { margin-left: 1rem; }
  .knop:has(.icoon) { padding-right: 1rem; }
  .knop:has(.icoon)::after { right: 3.125rem; }

  .veld__hulp { font-size: 0.8125rem; }

  /* Projecttegels: compacter tekstvlak, meer foto.                       */
  .tegel__inhoud { padding: var(--r-2) var(--r-3); }
  .tegel__titel { font-size: 1.0625rem; }
}


/* ==========================================================================
   INTREDEN · projectenpagina
   Bij binnenkomst staat er een zwart scherm met het merkteken. Na een
   korte pauze zoomt het teken op tot de deuropening het hele scherm vult;
   daarachter staat de projectenlijst. De header ligt erboven en blijft
   zichtbaar. De deuropening begint zwart en wordt pas licht tijdens het
   inzoomen.
   ========================================================================== */

.intreden {
  position: fixed; inset: 0;
  z-index: 45;
  pointer-events: none;
  animation: intreden-weg 1ms linear 2.15s forwards;
}
.intreden::before {
  content: ""; position: absolute; inset: 0;
  background: var(--nokzwart);
  animation: intreden-licht 0.7s var(--ease) 0.75s forwards;
}
.intreden__masker {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: intreden-zoom 1.5s cubic-bezier(0.7, 0, 0.3, 1) 0.55s forwards;
}
@keyframes intreden-zoom { to { transform: scale(42); } }
@keyframes intreden-licht { to { opacity: 0; } }
@keyframes intreden-weg { to { visibility: hidden; opacity: 0; } }
.geen-js .intreden { display: none; }
@media (prefers-reduced-motion: reduce) { .intreden { display: none; } }

/* Kop van de projectenlijst: compact, zodat de eerste rij projecten in
   het eerste scherm staat.                                               */
.projecten-intro { padding-block: var(--r-6) var(--r-4); }
.projecten-intro__kop { text-align: center; max-width: 46rem; margin-inline: auto; }
.projecten-intro__kop .label--lijn::before { margin-inline: auto; }
.projecten-intro__kop h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: var(--lh-kop);
  color: var(--nokzwart);
}
.projecten-intro__kop p { margin: var(--r-2) auto 0; max-width: 52ch; }
.projecten-intro__balk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--r-2);
  margin-top: var(--r-5);
  scroll-margin-top: var(--header-h);
}
.projecten-intro__balk p { margin: 0; }
.projecten-intro__balk .filters { margin-bottom: 0; }

.icoon--omlaag { transform: rotate(90deg); }
.knop:hover .icoon--omlaag, .knop:focus-visible .icoon--omlaag { transform: rotate(90deg) translateX(0.25rem); }

@media (max-width: 900px) {
  .projecten-intro { padding-block: var(--r-5) var(--r-3); }
  .projecten-intro__balk { margin-top: var(--r-4); }
}


/* ==========================================================================
   ONDERLIGGENDE PAGINA · opbouw naar van-engelenhoven.nl
   Intro zonder foto, een fotoband met een zwart vlak erop, gecentreerde
   koppen met een groot vaag woord erachter, en genummerde punten.
   ========================================================================== */

/* Intro: grote kop links, uitleg rechts, op een licht vlak. */
.intro { padding-block: var(--r-6) var(--r-7); }
.intro__raster { align-items: start; }
.intro__kop {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-extrabold);
  color: var(--nokzwart);
}
.intro p { color: var(--tekst-op-licht); }
.intro p.zwak { color: var(--tekst-op-licht-zwak); }
.kruimel--licht { color: var(--tekst-op-licht-zwak); margin-bottom: var(--r-5); }
.kruimel--licht a:hover { color: var(--nokzwart); }

/* Intro met de foto klein ernaast. Het zwarte vlak valt over de
   onderhoek van de foto en steekt links de tekstkolom in.               */
.intro__raster { align-items: center; }
.intro__tekst .intro__kop { font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.75rem); margin-block: var(--r-2) var(--r-4); }
.intro__tekst .lead { color: var(--tekst-op-licht); }
.intro__beeld { position: relative; padding-bottom: var(--r-7); }
.intro__foto { margin: 0; }
.intro__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro__vak {
  position: absolute;
  left: -22%; bottom: 0;
  width: min(22rem, 90%);
  overflow: hidden;
  padding: var(--r-4);
  background: var(--nokzwart);
}
.intro__vak h2 { position: relative; font-size: var(--t-h3); margin-bottom: var(--r-3); color: var(--kalkwit); }

/* Fotoband met een zwart vlak links erop. */
.band { position: relative; display: flex; align-items: center; min-height: 34rem; padding-block: var(--r-5); }
.band__foto { position: absolute; inset: 0; }
.band__foto picture, .band__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band .container { position: relative; width: 100%; }
.band__vak {
  position: relative;
  overflow: hidden;
  max-width: 34rem;
  padding: var(--r-6) var(--r-6) var(--r-6) var(--r-5);
  background: var(--nokzwart);
}
.band__vak h2 { position: relative; margin-bottom: var(--r-4); color: var(--kalkwit); }
.band__merk {
  position: absolute; right: -14%; bottom: -22%;
  width: 70%;
  fill: var(--valleibeige); opacity: 0.06;
  pointer-events: none;
}
.band__lijst { position: relative; display: flex; flex-direction: column; gap: 0.75rem; }
.band__lijst li {
  display: grid; grid-template-columns: 1rem 1fr; gap: 0.75rem;
  color: var(--valleibeige);
}
.band__lijst li::before {
  content: ""; width: 0.625rem; height: var(--lijn-basis);
  margin-top: 0.75rem; background: var(--brons-licht);
}

/* Gecentreerde kop met een groot, vaag woord erachter. */
.kop-watermerk {
  position: relative;
  max-width: 44rem;
  margin: 0 auto var(--r-6);
  padding-top: var(--r-5);
  text-align: center;
}
.kop-watermerk::before {
  content: attr(data-watermerk);
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  font-family: var(--font-kop);
  font-size: clamp(3.5rem, 1.6rem + 6.5vw, 7.5rem);
  font-weight: var(--w-extrabold);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(18, 17, 16, 0.06);
  pointer-events: none;
}
.op-donker .kop-watermerk::before { color: rgba(219, 208, 189, 0.07); }
.kop-watermerk > * { position: relative; }
.kop-watermerk p { margin: var(--r-2) auto 0; max-width: 46ch; }

/* Genummerde punten in een raster. Vierkant nummervak: geen cirkels,
   de hoekradius is overal 0.                                             */
.punten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r-5) var(--raster-gap);
}
.punt { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--r-2); align-items: start; }
.punt__nummer {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: var(--lijn-basis) solid var(--brons);
  font-family: var(--font-kop); font-weight: var(--w-bold);
  color: var(--nokzwart);
  font-variant-numeric: tabular-nums;
}
.punt h3 { font-size: var(--t-body); margin: 0.625rem 0 0.375rem; }
.punt p { font-size: var(--t-klein); color: var(--tekst-op-licht-zwak); max-width: 34ch; }
.knop-midden { display: flex; justify-content: center; max-width: none; margin-top: var(--r-6); }

@media (max-width: 1100px) {
  .punten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .intro { padding-block: var(--r-4) var(--r-5); }
  .intro__kop, .intro__tekst .intro__kop { font-size: 2.25rem; }
  .intro__beeld { margin-top: var(--r-5); padding-bottom: 0; }
  .intro__vak { position: relative; left: auto; width: auto; margin-top: calc(var(--r-6) * -1); margin-inline: var(--r-3) 0; }
  .band { display: block; min-height: 0; padding: 0; }
  .band__foto { position: relative; height: 15rem; }
  .band .container { padding-inline: 0; }
  .band__vak { max-width: none; padding: var(--r-5) var(--gutter); }
  .punten { grid-template-columns: minmax(0, 1fr); gap: var(--r-4); }
}


/* --- Contactpagina ---------------------------------------------------------
   Eén sectie: links kop en formulier, rechts een beige paneel met de
   gegevens en wat handig is bij het eerste gesprek.                       */
.contactpagina { padding-block: var(--r-6) var(--sectie-y); }
.contactpagina__raster { align-items: start; }
.contactpagina__kop {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: var(--lh-kop);
  color: var(--nokzwart);
  margin: var(--r-2) 0 var(--r-3);
}
.contactpagina .lead { margin-bottom: var(--r-5); }
.contactpaneel { padding: var(--r-5) var(--r-4); }
.contactpaneel__kop { font-size: var(--t-h3); margin-bottom: var(--r-3); }
.contactpaneel .cta__contactrij { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.contactpaneel .cta__contactrij dd { text-align: left; }
.contactpaneel__google { margin-top: var(--r-4); }
.contactpaneel__sub {
  margin-top: var(--r-5); padding-top: var(--r-4);
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
  font-size: var(--t-body);
}
.contactpaneel__lijst { margin-top: var(--r-2); display: flex; flex-direction: column; gap: 0.5rem; }
.contactpaneel__lijst li {
  display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem;
  font-size: var(--t-klein); color: var(--tekst-op-beige);
}
.contactpaneel__lijst li::before {
  content: ""; width: 0.625rem; height: var(--lijn-basis);
  margin-top: 0.625rem; background: var(--brons);
}
@media (max-width: 900px) {
  .contactpagina { padding-block: var(--r-4) var(--r-6); }
  .contactpaneel { margin-top: var(--r-5); }
}


/* ==========================================================================
   TELEFOON · afronding
   ========================================================================== */

.alleen-smal { display: none; }
.snelcontact { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-block: var(--r-4) var(--r-5); }
.snelcontact .knop { flex: 1 1 0; justify-content: center; white-space: nowrap; }

/* Werkwijze: aanvullende werkzaamheden onder de vijf stappen.           */
.aanvullend {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--r-3) var(--r-6);
  margin-top: var(--r-6); padding: var(--r-5);
}
.aanvullend h3 { margin-bottom: var(--r-2); }
.aanvullend__kop p { color: var(--tekst-op-beige); }
.aanvullend__lijst { display: flex; flex-direction: column; gap: 0.625rem; }
.aanvullend__lijst li {
  display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem;
  color: var(--tekst-op-beige);
}
.aanvullend__lijst li::before {
  content: ""; width: 0.625rem; height: var(--lijn-basis);
  margin-top: 0.75rem; background: var(--brons);
}
.aanvullend__slot {
  grid-column: 1 / -1; max-width: none;
  padding-top: var(--r-3); border-top: var(--lijn-basis) solid var(--lijn-op-beige, rgba(18, 17, 16, 0.14));
  font-weight: 500; color: var(--tekst-op-beige);
}
@media (max-width: 900px) {
  .aanvullend { grid-template-columns: minmax(0, 1fr); padding: var(--r-4); }
}

@media (max-width: 640px) {
  .alleen-smal { display: flex; }
  .snelcontact .knop:first-child { flex-basis: 100%; }

  /* De contactgegevens in het contactblok staan direct erna nog eens in de
     footer. Op een telefoon is dat een scherm dezelfde informatie.       */
  .cta__zij { display: none; }

  /* Materiaallabels nemen op een smal scherm veel ruimte en voegen weinig
     toe: de tekst erboven noemt dezelfde materialen.                     */
  .categorie__materialen { display: none; }

  /* Uitgangspunten: minder lucht tussen de vier.                         */
  .waarden { row-gap: var(--r-4); }
  .waarde h3 { margin-top: var(--r-2); }

  /* Knoppen die midden staan, gaan op een telefoon over de volle breedte. */
  .knop-midden .knop { width: 100%; justify-content: space-between; }

  /* Footer: de twee linkkolommen naast elkaar, contact eronder.          */
  .footer__boven { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--r-5); }
  .footer__merk { grid-column: 1 / -1; }
  .footer__kolom { grid-column: span 1; }
  .footer__kolom--breed { grid-column: 1 / -1; }
}