/* ===========================================================================
   Jayman Keukenmontage — stijlblad
   Huisstijl afgeleid van het logo: warm antraciet, goud met verloop,
   crème en een elegante serif naast een geometrische sans.
   =========================================================================== */

@import url("fonts.css");

/* --- 1. Ontwerptokens ---------------------------------------------------- */
:root {
  /* Kleuren uit het logo */
  --ink:        #171613;   /* achtergrond donkere logoversie */
  --ink-2:      #211F1B;
  --ink-3:      #2B2926;   /* woordmerk KEUKENMONTAGE */
  --gold:       #C6A55A;   /* ruitjes in het logo */
  --gold-light: #ECD48C;
  --gold-deep:  #9A7226;
  --cream:      #F7F4EE;
  --cream-2:    #EFEAE2;
  --line:       #DED7CA;

  /* Tekst */
  --tx-dark:    #211F1B;
  --tx-body:    #4C463C;
  --tx-soft:    #6E6659;
  --tx-light:   #F2EEE6;
  --tx-light-2: #B6AE9F;

  --goud-verloop: linear-gradient(105deg, var(--gold-deep) 0%, var(--gold-light) 40%, var(--gold) 70%, var(--gold-deep) 100%);

  /* Typografie */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Ritme */
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --sectie: clamp(4.5rem, 9vw, 8rem);
  --radius: 2px;

  --schaduw: 0 1px 2px rgba(23,22,19,.04), 0 8px 28px rgba(23,22,19,.07);
  --schaduw-hoog: 0 2px 6px rgba(23,22,19,.06), 0 24px 60px rgba(23,22,19,.14);
  --overgang: 260ms cubic-bezier(.22,.61,.36,1);
}

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

/* Elementen met een eigen display-waarde — zoals .kaart-foto (block) en
   .plaatshouder (flex) — trekken zich anders niets aan van het hidden-attribuut,
   omdat een regel uit dit stijlblad zwaarder weegt dan die van de browser zelf.
   Zonder deze regel doet het galerijfilter niets zichtbaars. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* voorkomt dat ankerlinks onder de vaste balk verdwijnen */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--tx-body);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--tx-dark);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 3. Hulpklassen ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--smal { max-width: 780px; }

.sectie { padding-block: var(--sectie); }
.sectie--donker { background: var(--ink); color: var(--tx-light-2); }
.sectie--donker h2, .sectie--donker h3 { color: var(--tx-light); }
.sectie--getint { background: var(--cream-2); }

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; padding: .75rem 1.25rem;
  background: var(--ink); color: var(--tx-light);
  font-size: .9rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  /* clip is verouderd maar nog nodig voor oudere browsers; clip-path doet het
     werk in moderne browsers en laat geen streepje van één pixel achter. */
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Nog in te vullen bedrijfsgegevens — zie INVULLEN.md.
   Bewust zichtbaar gemarkeerd zodat niets per ongeluk online blijft staan. */
.invullen {
  color: var(--gold-deep);
  background: rgba(198,165,90,.13);
  box-shadow: inset 0 -1px 0 rgba(198,165,90,.55);
  font-style: italic;
  padding: 0 .18em;
}
.sectie--donker .invullen { color: var(--gold-light); background: rgba(198,165,90,.16); }

/* Kopregel boven een sectietitel */
.opschrift {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.opschrift::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--gold);
  flex: none;
}
.sectie--donker .opschrift { color: var(--gold); }
.opschrift--midden { justify-content: center; }
.opschrift--midden::after {
  content: ""; width: 2rem; height: 1px; background: var(--gold); flex: none;
}

.lead {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.62;
  color: var(--tx-soft);
}
.sectie--donker .lead { color: var(--tx-light-2); }

.sectie-kop { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sectie-kop--midden { margin-inline: auto; text-align: center; }

/* Ruitornament uit het logo, als tussenteken */
.ruit {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; margin: 0 0 1.4rem;
}
.ruit::before, .ruit::after {
  content: ""; width: clamp(2rem, 8vw, 4.5rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ruit::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ruit i {
  width: 8px; height: 8px; background: var(--gold);
  transform: rotate(45deg); flex: none;
}

/* --- 4. Knoppen ---------------------------------------------------------- */
.knop {
  --knop-bg: var(--ink);
  --knop-tx: var(--tx-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  border: 1px solid var(--knop-bg);
  border-radius: var(--radius);
  background: var(--knop-bg);
  color: var(--knop-tx);
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--overgang), box-shadow var(--overgang),
              background-color var(--overgang), color var(--overgang),
              border-color var(--overgang);
}
.knop:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hoog); }
.knop:active { transform: translateY(0); }

.knop--goud {
  background: var(--goud-verloop);
  border-color: transparent;
  color: var(--ink);
  background-size: 180% 100%;
  background-position: 0% 50%;
  transition: background-position 600ms var(--overgang), transform var(--overgang), box-shadow var(--overgang);
}
.knop--goud:hover { background-position: 100% 50%; }

.knop--rand {
  background: transparent;
  border-color: currentColor;
  color: var(--tx-dark);
}
.knop--rand:hover { background: var(--ink); border-color: var(--ink); color: var(--tx-light); }

.sectie--donker .knop--rand,
.hero .knop--rand,
.oproep .knop--rand { color: var(--tx-light); }
.sectie--donker .knop--rand:hover,
.hero .knop--rand:hover,
.oproep .knop--rand:hover {
  background: var(--tx-light); border-color: var(--tx-light); color: var(--ink);
}

.knop-groep { display: flex; flex-wrap: wrap; gap: .9rem; }

.nav .knop { padding: .85rem 1.4rem; white-space: nowrap; }

/* Tekstlink met gouden onderlijn die uitloopt */
.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tx-dark);
  padding-bottom: .35rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--overgang), color var(--overgang);
}
.tekstlink:hover { background-size: 100% 2px; }
.sectie--donker .tekstlink { color: var(--tx-light); }
.tekstlink svg { transition: transform var(--overgang); }
.tekstlink:hover svg { transform: translateX(4px); }

/* --- 5. Bovenbalk en navigatie ------------------------------------------- */
.topbalk {
  background: var(--ink);
  color: var(--tx-light-2);
  font-size: .78rem;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(198,165,90,.22);
}
.topbalk__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 2.6rem; flex-wrap: wrap;
}
.topbalk a { color: var(--tx-light); text-decoration: none; }
.topbalk a:hover { color: var(--gold-light); }
.topbalk__lijst { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.topbalk__item { display: inline-flex; align-items: center; gap: .45rem; }
.topbalk__item svg { color: var(--gold); flex: none; }

.kop {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,244,238,.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--overgang), box-shadow var(--overgang), background-color var(--overgang);
}
.kop.is-vast { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(23,22,19,.06); }
.kop__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }

.kop__logo { display: block; flex: none; }
.kop__logo img { width: clamp(150px, 20vw, 205px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.7rem); }
.nav__link {
  position: relative;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tx-dark);
  padding-block: .4rem;
  white-space: nowrap;
  transition: color var(--overgang);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--overgang);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold-deep); }

.nav-knop {
  display: none;
  width: 2.9rem; height: 2.9rem;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
  flex: none;
}
.nav-knop span {
  position: relative; display: block; width: 18px; height: 1.5px; background: var(--tx-dark);
  transition: background-color 120ms;
}
.nav-knop span::before, .nav-knop span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--tx-dark);
  transition: transform var(--overgang), top var(--overgang);
}
.nav-knop span::before { top: -6px; }
.nav-knop span::after  { top: 6px; }
.nav-knop[aria-expanded="true"] span { background: transparent; }
.nav-knop[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-knop[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --- 6. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 820px);
  padding-block: clamp(4rem, 10vw, 7.5rem);
  background: var(--ink);
  color: var(--tx-light);
  overflow: hidden;
  isolation: isolate;
}
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 42%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(15,14,12,.94) 0%, rgba(15,14,12,.86) 38%, rgba(15,14,12,.42) 72%, rgba(15,14,12,.62) 100%),
    linear-gradient(180deg, rgba(15,14,12,.55) 0%, transparent 30%, rgba(15,14,12,.55) 100%);
}
.hero__in { max-width: 660px; }
.hero h1 { color: var(--tx-light); margin-bottom: .45em; }
.hero h1 em {
  font-style: italic;
  background: var(--goud-verloop);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  line-height: 1.65;
  color: #DCD5C8;
  max-width: 52ch;
  margin-bottom: 2.2rem;
}
.hero .knop-groep { margin-bottom: 2.6rem; }

.hero__troef {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(198,165,90,.28);
  list-style: none; margin: 0;
  font-size: .84rem; letter-spacing: .05em; color: var(--tx-light-2);
}
.hero__troef li { display: flex; align-items: center; gap: .55rem; }
.hero__troef li::before {
  content: ""; width: 6px; height: 6px; background: var(--gold);
  transform: rotate(45deg); flex: none;
}

/* --- 7. Kerncijfers ------------------------------------------------------ */
.cijfers {
  background: var(--ink-2);
  border-top: 1px solid rgba(198,165,90,.2);
  border-bottom: 1px solid rgba(198,165,90,.2);
}
.cijfers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(198,165,90,.2);
}
.cijfer {
  background: var(--ink-2);
  padding: clamp(1.8rem, 4vw, 2.8rem) 1.5rem;
  text-align: center;
}
.cijfer__getal {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  background: var(--goud-verloop);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .4rem;
}
.cijfer__tekst {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-light-2);
}

/* --- 8. Twee kolommen met beeld ------------------------------------------ */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.duo--omgekeerd .duo__beeld { order: 2; }
.duo--collage { align-items: stretch; }

.duo__beeld { position: relative; }
.duo__beeld img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius);
}
/* Gouden kaderlijn achter de foto */
.duo__beeld::before {
  content: ""; position: absolute;
  inset: -18px -18px 18px 18px;
  border: 1px solid var(--gold);
  opacity: .5;
  z-index: -1;
  border-radius: var(--radius);
}
.duo__inzet {
  position: absolute; right: -12%; bottom: -8%;
  width: 46%;
  box-shadow: var(--schaduw-hoog);
  border: 6px solid var(--cream);
  border-radius: var(--radius);
}
.duo__inzet img { aspect-ratio: 1 / 1; }
.sectie--donker .duo__inzet { border-color: var(--ink); }

/* Fotocollage: vijf werkfoto's naast "Een nieuwe naam" */
.werk-collage {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(150px, 1fr));
  gap: 14px;
}
.werk-collage__groot { grid-row: 1 / span 2; }
.werk-collage__groot img,
.werk-collage__klein img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}

.streep-lijst { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .85rem; }
.streep-lijst li { display: flex; gap: .85rem; align-items: flex-start; }
.streep-lijst li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .62em;
  background: var(--gold); transform: rotate(45deg);
}

/* --- 9. Diensten --------------------------------------------------------- */
.diensten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.dienst {
  position: relative;
  background: var(--cream);
  padding: clamp(2rem, 3.6vw, 2.8rem);
  transition: background-color var(--overgang), transform var(--overgang);
}
.dienst::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--goud-verloop);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--overgang);
}
.dienst:hover { background: #fff; }
.dienst:hover::after { transform: scaleX(1); }

.dienst__nr {
  font-family: var(--font-display);
  font-size: 1.05rem; color: var(--gold-deep);
  letter-spacing: .1em; display: block; margin-bottom: 1.1rem;
}
.dienst__ic {
  width: 2.6rem; height: 2.6rem; margin-bottom: 1.2rem;
  color: var(--gold-deep);
}
.dienst h3 { margin-bottom: .5rem; }
.dienst p { font-size: .97rem; color: var(--tx-soft); margin: 0; }

/* --- 10. Werkwijze ------------------------------------------------------- */
.stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  counter-reset: stap;
}
.stap { position: relative; padding-top: 3.4rem; }
.stap::before {
  counter-increment: stap;
  content: "0" counter(stap);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 2.6rem; line-height: 1;
  background: var(--goud-verloop);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* verbindingslijn tussen de stappen */
.stap::after {
  content: ""; position: absolute; top: 1.35rem; left: 3.6rem; right: -3rem;
  height: 1px; background: rgba(198,165,90,.4);
}
.stap:last-child::after { display: none; }
.stap h3 { font-size: 1.35rem; margin-bottom: .45rem; }
.stap p { font-size: .97rem; color: var(--tx-light-2); margin: 0; }

/* --- 11. Galerij --------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter {
  padding: .6rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-soft);
  cursor: pointer;
  transition: all var(--overgang);
}
.filter:hover { border-color: var(--gold); color: var(--tx-dark); }
.filter[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--tx-light);
}

.galerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.15rem);
}
.galerij--metselverband > *:nth-child(6n + 1) { grid-row: span 2; }

.kaart-foto {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: var(--ink-3);
  border-radius: var(--radius);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.galerij--metselverband > .kaart-foto:nth-child(6n + 1) { aspect-ratio: auto; }
.kaart-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.19,1,.22,1), filter var(--overgang);
}
.kaart-foto:hover img { transform: scale(1.055); }
.kaart-foto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.2rem 1.1rem;
  background: linear-gradient(transparent, rgba(15,14,12,.86));
  color: var(--tx-light);
  font-size: .84rem; letter-spacing: .04em;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--overgang), transform var(--overgang);
}
.kaart-foto:hover figcaption, .kaart-foto:focus-visible figcaption { opacity: 1; transform: none; }
.kaart-foto__label {
  position: absolute; top: .85rem; left: .85rem;
  padding: .3rem .7rem;
  background: rgba(23,22,19,.72);
  backdrop-filter: blur(6px);
  color: var(--gold-light);
  font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px;
}

/* Lege plek: hier komen de eigen foto's van de klant */
.plaatshouder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .7rem; padding: 2rem 1.5rem; text-align: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(198,165,90,.65);
  border-radius: var(--radius);
  background: rgba(198,165,90,.06);
  color: var(--tx-soft);
  font-size: .88rem;
}
.plaatshouder svg { color: var(--gold-deep); }
.plaatshouder strong { color: var(--tx-dark); font-weight: 500; }

/* --- 12. Lichtbak -------------------------------------------------------- */
.lichtbak {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(11,10,9,.94);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms;
}
.lichtbak.is-open { opacity: 1; visibility: visible; }
.lichtbak img {
  max-width: min(1100px, 100%); max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lichtbak__bijschrift {
  margin-top: 1rem; text-align: center;
  color: var(--tx-light-2); font-size: .9rem;
  min-height: 1.4em;
}
.lichtbak__knop {
  position: absolute;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgba(242,238,230,.3);
  border-radius: 50%;
  background: rgba(23,22,19,.5);
  color: var(--tx-light);
  cursor: pointer;
  transition: background-color var(--overgang), border-color var(--overgang);
}
.lichtbak__knop:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lichtbak__sluit { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lichtbak__vorige { left: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lichtbak__volgende { right: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* --- 13. Zakelijk blok --------------------------------------------------- */
.zakelijk {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.zakelijk__kader {
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(198,165,90,.35);
  border-radius: var(--radius);
  background: rgba(198,165,90,.05);
}
.zakelijk__kader h3 { font-size: 1.3rem; }

/* --- 14. Reviews --------------------------------------------------------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.review {
  position: relative;
  padding: clamp(1.8rem, 3.2vw, 2.4rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.review__sterren { display: flex; gap: .2rem; color: var(--gold); margin-bottom: 1.1rem; }
.review blockquote {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.22rem; line-height: 1.5; color: var(--tx-dark);
  flex: 1;
}
.review figcaption { font-size: .85rem; color: var(--tx-soft); letter-spacing: .04em; }
.review figcaption strong { display: block; color: var(--tx-dark); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }

/* --- 15. Veelgestelde vragen --------------------------------------------- */
.vragen { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--line); }
.vraag { border-bottom: 1px solid var(--line); }
.vraag summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--tx-dark);
  cursor: pointer;
  list-style: none;
  transition: color var(--overgang);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--gold-deep); }
.vraag summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: .45em;
  background: var(--gold);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform 320ms var(--overgang);
}
.vraag[open] summary::after { transform: rotate(135deg); }
.vraag__antwoord { padding-bottom: 1.6rem; color: var(--tx-soft); max-width: 66ch; }

/* --- 16. Werkgebied ------------------------------------------------------ */
.plaatsen {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin: 1.8rem 0 0;
}
.plaatsen li {
  padding: .45rem 1.1rem;
  border: 1px solid rgba(198,165,90,.4);
  border-radius: 999px;
  font-size: .84rem; letter-spacing: .05em;
}

/* --- 17. Contact --------------------------------------------------------- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); }

.contact__kaart { display: grid; gap: 1.6rem; margin-top: 2rem; }
.contact__rij { display: flex; gap: 1.1rem; align-items: flex-start; }
.contact__ic {
  flex: none; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid rgba(198,165,90,.45);
  border-radius: 50%;
  color: var(--gold);
}
.contact__rij dt {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .2rem;
}
.contact__rij dd { margin: 0; font-size: 1.05rem; color: var(--tx-light); }
.contact__rij a { text-decoration: none; }
.contact__rij a:hover { color: var(--gold-light); }

.formulier {
  padding: clamp(1.8rem, 4vw, 3rem);
  background: rgba(247,244,238,.045);
  border: 1px solid rgba(198,165,90,.28);
  border-radius: var(--radius);
}
.veldenrij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.veld { margin-bottom: 1.2rem; }
.veld label {
  display: block; margin-bottom: .45rem;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-light-2);
}
.veld input, .veld select, .veld textarea {
  width: 100%;
  padding: .9rem 1rem;
  background: rgba(23,22,19,.55);
  border: 1px solid rgba(198,165,90,.28);
  border-radius: var(--radius);
  color: var(--tx-light);
  font-family: var(--font-ui); font-size: 1rem;
  transition: border-color var(--overgang), background-color var(--overgang);
}
.veld textarea { min-height: 8rem; resize: vertical; }
.veld input::placeholder, .veld textarea::placeholder { color: #7C7466; }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(23,22,19,.8);
}
.veld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C6A55A' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.veld--fout input, .veld--fout textarea, .veld--fout select { border-color: #C0563F; }
.veld__fout { display: none; margin-top: .4rem; font-size: .82rem; color: #E38C74; }
.veld--fout .veld__fout { display: block; }

.honing { position: absolute; left: -9999px; opacity: 0; height: 0; }

.akkoord { display: flex; gap: .75rem; align-items: flex-start; font-size: .88rem; margin-bottom: 1.6rem; color: var(--tx-light-2); }
.akkoord input { width: 1.05rem; height: 1.05rem; margin-top: .3rem; flex: none; accent-color: var(--gold); }
.akkoord a { color: var(--gold-light); }

.formulier__melding {
  display: none; margin-top: 1.2rem; padding: 1rem 1.2rem;
  border-radius: var(--radius); font-size: .92rem;
}
.formulier__melding.is-fout { display: block; background: rgba(192,86,63,.15); border: 1px solid rgba(192,86,63,.5); color: #F0B3A2; }
.formulier__melding.is-goed { display: block; background: rgba(198,165,90,.14); border: 1px solid rgba(198,165,90,.5); color: var(--gold-light); }

/* --- 18. Slotoproep ------------------------------------------------------ */
.oproep { position: relative; text-align: center; color: var(--tx-light); overflow: hidden; isolation: isolate; }
.oproep__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.oproep::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(15,14,12,.93), rgba(15,14,12,.88));
}
.oproep h2 { color: var(--tx-light); }
.oproep .lead { max-width: 58ch; margin-inline: auto; }

/* --- 19. Voettekst ------------------------------------------------------- */
.voet { background: var(--ink); color: var(--tx-light-2); font-size: .92rem; }
.voet__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 5rem);
}
.voet h4 {
  font-family: var(--font-ui);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.3rem;
}
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.voet a { text-decoration: none; transition: color var(--overgang); }
.voet a:hover { color: var(--gold-light); }
.voet__logo img { width: 190px; margin-bottom: 1.3rem; }
.voet__onder {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  /* Extra ruimte onderaan: de zwevende WhatsApp-knop staat rechtsonder vast in
     beeld en dekte anders de links in deze regel af, waardoor ze niet meer aan
     te klikken waren. */
  padding: 1.6rem 0 5.5rem;
  border-top: 1px solid rgba(198,165,90,.2);
  font-size: .82rem; color: #8B8375;
}
.voet__onder ul { display: flex; gap: 1.5rem; }

/* --- 20. Scroll-animatie ------------------------------------------------- */
.verschijn {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1);
}
.verschijn.is-zichtbaar { opacity: 1; transform: none; }

/* --- 21. Responsief ------------------------------------------------------ */
@media (max-width: 960px) {
  .duo, .zakelijk, .contact { grid-template-columns: 1fr; }
  .duo--omgekeerd .duo__beeld { order: 0; }
  .duo__beeld img { aspect-ratio: 3 / 2; }
  .duo__beeld::before { inset: -12px -12px 12px 12px; }
  .duo__inzet { width: 38%; right: -4%; }
  .werk-collage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px repeat(2, 130px);
  }
  .werk-collage__groot { grid-column: 1 / span 2; grid-row: 1; }
  .voet__grid { grid-template-columns: 1fr 1fr; }
  .stap::after { display: none; }
}

@media (max-width: 780px) {
  .nav-knop { display: flex; }

  /* Een element met backdrop-filter wordt het positioneringskader voor al zijn
     vaste kinderen. Daardoor viel het uitschuifmenu binnen de kopbalk in plaats
     van over het hele scherm. Op mobiel dus geen blur, maar een dekkende balk —
     dat leest daar toch prettiger. */
  .kop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cream);
  }

  .nav {
    position: fixed; inset: 0 0 0 auto;
    z-index: 100; /* moet bóven de verduistering (99) liggen */
    width: min(330px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .35rem;
    padding: 6.5rem 2rem 2rem;
    background: var(--ink);
    transform: translateX(100%);
    transition: transform 380ms cubic-bezier(.22,.61,.36,1);
    box-shadow: -20px 0 60px rgba(0,0,0,.35);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav__link { color: var(--tx-light); font-size: .95rem; padding-block: .85rem; width: 100%; }
  .nav__link[aria-current="page"] { color: var(--gold-light); }
  .nav .knop { margin-top: 1.2rem; width: 100%; }
  .nav-knop { position: relative; z-index: 110; }
  .nav-knop[aria-expanded="true"] span::before,
  .nav-knop[aria-expanded="true"] span::after { background: var(--tx-light); }
  .nav-knop[aria-expanded="true"] { border-color: rgba(242,238,230,.35); }

  body.nav-open { overflow: hidden; }
  .nav-scherm {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(15,14,12,.5);
    opacity: 0; visibility: hidden;
    transition: opacity 260ms, visibility 260ms;
  }
  .nav-scherm.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 620px) {
  .veldenrij { grid-template-columns: 1fr; }
  .voet__grid { grid-template-columns: 1fr; }
  .topbalk__in { justify-content: center; }
  .topbalk__lijst--secundair { display: none; }
  .hero { min-height: auto; }
  .galerij--metselverband > *:nth-child(6n + 1) { grid-row: span 1; }
  .galerij--metselverband > .kaart-foto:nth-child(6n + 1) { aspect-ratio: 4 / 3; }
  .knop { width: 100%; }
  .hero .knop-groep { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .verschijn { opacity: 1; transform: none; }
}

@media print {
  .kop, .topbalk, .nav-knop, .lichtbak, .oproep, .formulier { display: none !important; }
  body { background: #fff; color: #000; }
  .sectie--donker { background: #fff; color: #000; }
}

/* --- 22. Waterpas-controle (spamcontrole in keukenstijl) ----------------- */
.waterpas { margin-top: 1.9rem; }

.waterpas__toneel {
  position: relative;
  display: grid;
  place-items: center;
  height: 168px;
  margin-bottom: .9rem;
  overflow: hidden;
  border: 1px solid rgba(198,165,90,.28);
  border-radius: var(--radius);
  /* Tegelwandje als achtergrond, zodat je ziet waar het kastje tegenaan hangt */
  background-color: rgba(23,22,19,.5);
  background-image:
    linear-gradient(rgba(198,165,90,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,165,90,.15) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center;
}

.waterpas__kast {
  width: min(220px, 70%);
  /* --hoek wordt door het script gezet, op basis van de schuifstand */
  transform: rotate(var(--hoek, 0deg));
  transform-origin: 50% 60%;
  transition: transform 120ms linear;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.waterpas__kast svg { width: 100%; height: auto; overflow: visible; }

.waterpas__romp {
  fill: #3B3730;
  stroke: rgba(198,165,90,.62);
  stroke-width: 1.5;
  transition: stroke var(--overgang), fill var(--overgang);
}
.waterpas__naad  { stroke: rgba(198,165,90,.42); stroke-width: 1; }
.waterpas__greep { fill: var(--gold); opacity: .9; }

.waterpas__buis {
  fill: rgba(11,10,9,.92);
  stroke: var(--gold);
  stroke-width: 1.6;
}
.waterpas__streep { stroke: var(--gold); stroke-width: 1.6; }

.waterpas__bel {
  fill: #7FCF8F;
  /* --bel schuift de luchtbel mee met de scheefstand */
  transform: translateX(var(--bel, 0px));
  transition: transform 120ms linear, fill var(--overgang);
}

/* Waterpas! */
.waterpas.is-goed .waterpas__bel  { fill: var(--gold-light); }
.waterpas.is-goed .waterpas__romp { stroke: var(--gold); fill: #3A3630; }
.waterpas.is-goed .waterpas__toneel { border-color: var(--gold); }

/* De schuifbalk zelf */
.waterpas input[type="range"] {
  width: 100%;
  height: 2.4rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  appearance: none;
  cursor: grab;
}
.waterpas input[type="range"]:active { cursor: grabbing; }

.waterpas input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(198,165,90,.25), rgba(198,165,90,.6), rgba(198,165,90,.25));
}
.waterpas input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(198,165,90,.25), rgba(198,165,90,.6), rgba(198,165,90,.25));
}
.waterpas input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 26px; height: 26px; margin-top: -11px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  background: var(--goud-verloop);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.waterpas input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.waterpas input[type="range"]:focus-visible { outline-offset: 6px; }

.waterpas__hulp {
  margin: .1rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: #8B8375;
}
.waterpas__status {
  margin: .5rem 0 0;
  min-height: 1.4em;
  font-size: .88rem;
  color: var(--tx-light-2);
}
.waterpas.is-goed .waterpas__status { color: var(--gold-light); }
.waterpas__status b { font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .waterpas__kast, .waterpas__bel { transition: none; }
}

/* --- 23. Zwevende WhatsApp-knop ------------------------------------------ */
.whatsapp-knop {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.25rem;
  border-radius: 999px;
  background: #25D366;
  color: #0B3D22;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12);
  transition: transform var(--overgang), box-shadow var(--overgang), background-color var(--overgang);
}
.whatsapp-knop:hover {
  transform: translateY(-3px);
  background: #1FBE5A;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.whatsapp-knop svg { flex: none; }

@media (max-width: 620px) {
  /* Op mobiel alleen het rondje, anders dekt de knop de halve pagina af */
  .whatsapp-knop { padding: .95rem; }
  .whatsapp-knop__tekst { display: none; }
}

@media print { .whatsapp-knop { display: none; } }

/* Vermelding van de maker, onderaan naast de auteursrechtregel */
.voet__maker { margin: 0; color: #8B8375; }
.voet__maker a {
  color: var(--gold);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--overgang), color var(--overgang);
}
.voet__maker a:hover { background-size: 100% 1px; color: var(--gold-light); }

/* --- 24. Kleine plekken die eerder inline gestyled waren -----------------
   De Content-Security-Policy staat op style-src 'self': inline style=""
   attributen worden door de browser genegeerd zodra die header op de
   server ook echt actief is (Apache met mod_headers). Vandaar dat elke
   losse opmaak hieronder een eigen regel heeft gekregen. */

/* Gedempte tint voor de bedrijfsomschrijving en het adres in de voettekst */
.voet__zacht { color: #8B8375; }
.voet__onder p { margin: 0; }

/* Kop van secundaire pagina's (galerij, privacy) — kleiner dan de hero-h1 */
.paginakop { font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* Sectie die het hele beeld verticaal centreert (bedankt- en foutpagina) */
.sectie--midden { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.sectie--midden .knop-groep { justify-content: center; margin-top: 2.4rem; }

/* De twee secties van de galerijkop: geen ruimte ertussen, iets minder erboven */
.galerij-intro { padding-bottom: 0; }
.galerij-inhoud { padding-top: clamp(2rem, 4vw, 3rem); }

/* Knoppenrij: centreren en/of ruimte erboven, los in te zetten */
.knop-groep--midden { justify-content: center; }
.knop-groep--top { margin-top: clamp(2rem, 4vw, 3rem); }
.oproep .knop-groep { justify-content: center; margin-top: 2.2rem; }

/* Voetnoot onder de galerij of de privacyverklaring */
.notitie { margin-top: 2.5rem; font-size: .9rem; color: var(--tx-soft); }
.notitie--breed { max-width: 70ch; }

/* "Terug naar de startpagina"-link onderaan een pagina */
.terug-link { margin-top: 2rem; }

/* Knop die de volle breedte van zijn container inneemt */
.knop--vol { width: 100%; }

/* Het contactformulier: kop, akkoordvakje en de tekst zonder JavaScript */
.formulier h3 { margin-bottom: 1.6rem; }
.akkoord label { letter-spacing: 0; text-transform: none; font-size: .88rem; margin: 0; }
.formulier noscript p { margin-top: 1.2rem; font-size: .9rem; color: var(--tx-light-2); }
.formulier noscript a { color: var(--gold-light); }