/* ============================================================
   LETTERTYPEN
   Lokaal op de eigen server, zodat er geen gegevens naar
   een andere partij gaan en de pagina sneller laadt.
   ============================================================ */

/* Cormorant Garamond, latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond italic, latin-ext. Eén woord in de H1 van de homepage. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond italic, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cinzel, latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cinzel, latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo, latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope, latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope, latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   AUREA BATHROOMS
   Palet: antraciet en wit, accent in staalgrijs/warm grijs.
   Diepte komt uit gelaagde grijstinten, hairlines en witruimte.
   ============================================================ */

:root {
  /* ---------- LAGEN IN KLEUR ----------
     Vijf tinten per familie, van achter naar voor. Elke laag die dichterbij
     staat is één tint lichter. Zo ontstaat diepte zonder dat er een schaduw
     aan te pas komt. */
  --d0: #232527;   /* pagina, de verste laag */
  --d1: #26282A;   /* sectie */
  --d2: #2B2D30;   /* paneel */
  --d3: #2F3134;   /* kaart */
  --d4: #34363A;   /* kaart bij hover */

  --l0: #E4E1DB;   /* pagina */
  --l1: #E9E6E0;   /* sectie */
  --l2: #EEEBE5;   /* paneel */
  --l3: #F1EEE8;   /* kaart */
  --l4: #F5F3EE;   /* kaart bij hover */

  /* oude namen, zodat bestaande regels blijven werken */
  --ink:        var(--d1);
  --ink-2:      var(--d3);
  --graphite:   var(--d1);
  --slate:      #3A3D41;
  --paper:      var(--l1);
  --paper-2:    var(--l1);
  --paper-3:    #D5D1C9;
  --kaart:      var(--l3);

  /* accent: gedempt brons-grijs, spaarzaam gebruiken */
  --steel:      #8C7B6B;
  --steel-lt:   #A9A69F;
  --warm:       #8C7B6B;
  /* Zelfde bronstint maar dieper, voor vlakken waar lichte tekst op komt.
     Op #8C7B6B haalt gebroken wit maar 3,4:1, hierop 4,9:1. */
  --accent-diep: #706256;

  /* tekst */
  --tx-dark:    #26282A;
  --tx-body:    #55585B;
  --tx-light:   #EDEAE4;
  --tx-faint:   #A9A69F;

  /* lijnen */
  --line-l:     #D5D1C9;
  --line-l2:    #C7C2B8;
  --line-d:     #3D4043;
  --line-d2:    #4A4E52;

  /* leeg fotovlak op een lichte sectie */
  --leeg:       #D5D1C9;

  /* ---------- SCHADUW: DRIE NIVEAUS, MEER NIET ---------- */
  --sch-rust:  0 1px 2px rgba(0,0,0,0.20);
  --sch-zweef: 0 1px 2px rgba(0,0,0,0.20), 0 12px 32px rgba(0,0,0,0.18);
  --sch-op:    0 2px 4px rgba(0,0,0,0.20), 0 24px 48px rgba(0,0,0,0.24);

  /* lichtval van boven: een haarlijn licht langs de bovenrand */
  --glans-d: inset 0 1px 0 rgba(255,255,255,0.06);
  --glans-l: inset 0 1px 0 rgba(255,255,255,0.70);

  /* oude schaduwnamen wijzen naar de drie niveaus */
  --schaduw-zacht:  var(--sch-zweef);
  --schaduw-beeld:  var(--sch-zweef);
  --schaduw-paneel: var(--sch-zweef);
  --schaduw-knop:   var(--sch-rust);

  /* ---------- RONDINGEN ---------- */
  --rond-knop:  8px;    /* knoppen */
  --rond:       12px;   /* kaarten en panelen */
  --rond-beeld: 16px;   /* grote fotoblokken */
  --rond-klein: var(--rond-knop);
  --rond-groot: var(--rond-beeld);

  /* ---------- KORREL ---------- */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
  --korrel-fijn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)'/%3E%3C/svg%3E");

  /* ---------- RASTER EN RITME ----------
     Twaalf kolommen, container 1200px, kolomruimte 24px.
     Verticale maten in veelvouden van 8. */
  --max:        1200px;
  --pad-x:      clamp(20px, 4vw, 32px);
  --kolom:      24px;
  --sec:        80px;

  --r1: 8px;  --r2: 16px; --r3: 24px; --r4: 32px;
  --r5: 40px; --r6: 48px; --r7: 56px; --r8: 64px; --r10: 80px;
}

@media (max-width: 900px) {
  :root { --sec: 56px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--l0);
  color: var(--tx-dark);
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
h3, h4 { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; margin: 0; }
/* H1 en H2 in de serif van het logo. Cormorant heeft een kleine x-hoogte,
   dus iets groter zetten en de letters niet aanknijpen. */
h1, h2 { font-family: 'Cormorant Garamond', 'Georgia', serif; font-weight: 600; letter-spacing: 0; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--steel-lt); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
.sec { padding: var(--sec) 0; }

/* ---------- typografie ---------- */
.display {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.06;
  letter-spacing: 0;
  font-weight: 600;
}
.h2 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(30px, 3.7vw, 50px);
  line-height: 1.14;
  letter-spacing: 0;
  font-weight: 600;
}
.h3 { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
      font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8; color: var(--tx-body); }
.body { font-size: 15.5px; line-height: 1.85; color: var(--tx-body); }
.on-dark .lead, .on-dark .body { color: var(--tx-light); }

/* kleine labels in staalgrijs: het accent van de site */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel);
}
.on-dark .label { color: var(--warm); }

/* ---------- knoppen en links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 30px; border-radius: var(--rond-klein);
  box-shadow: var(--schaduw-knop);
  background: var(--tx-dark); color: var(--tx-light);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--tx-dark);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--accent-diep); border-color: var(--accent-diep); color: var(--tx-light); }
.btn-ghost { background: transparent; color: var(--tx-dark); border-color: var(--line-l2); box-shadow: none; }
.btn-ghost:hover { background: var(--tx-dark); color: var(--tx-light); border-color: var(--tx-dark); }
.on-dark .btn { background: var(--tx-light); color: var(--tx-dark); border-color: var(--tx-light); }
.on-dark .btn:hover { background: var(--accent-diep); border-color: var(--accent-diep); color: var(--tx-light); }
.on-dark .btn-ghost { background: transparent; color: var(--tx-light); border-color: var(--line-d2); }
.on-dark .btn-ghost:hover { background: var(--tx-light); color: var(--ink); border-color: var(--tx-light); }

.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid var(--line-l2);
  transition: border-color .25s ease, color .25s ease;
}
.tlink:hover { border-color: var(--tx-dark); }
.tlink .pijl { transition: transform .25s ease; }
.tlink:hover .pijl { transform: translateX(5px); }
.on-dark .tlink { color: var(--tx-light); border-color: var(--line-d2); }
.on-dark .tlink:hover { border-color: var(--tx-light); }

/* ---------- header ---------- */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  border-bottom: 1px solid var(--line-d);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 84px; }
/* Het logo: beeldmerk als svg, de naam als echte tekst ernaast.
   Zo blijven de letters op elke maat scherp en leesbaar. */
.merk {
  display: inline-flex; align-items: center; flex: none;
  /* Eén maat stuurt alles aan: de hoogte van het beeldmerk, de tussenruimte en
     beide tekstregels. Zo blijft de hele combinatie in verhouding, op elk scherm. */
  --aurea: 26px;
  gap: calc(var(--aurea) * 0.385);
}
.merk img { display: block; width: auto; height: calc(var(--aurea) * 1.692); }
.merk:hover { opacity: 0.86; transition: opacity .25s ease; }

/* De twee regels staan symmetrisch onder elkaar: even breed en op dezelfde
   middellijn. De letterafstand van BATHROOMS is zo gekozen dat de regel exact
   even breed wordt als AUREA. De negatieve marge haalt de spatie achter de
   laatste letter weg, anders staat de regel een halve spatie uit het midden. */
.merk-naam { display: flex; flex-direction: column; align-items: center; }
.merk-aurea {
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 500; font-size: var(--aurea); line-height: 1;
  letter-spacing: 0.08em; margin-right: -0.08em;
  text-transform: uppercase; color: var(--tx-light);
}
.merk-bathrooms {
  margin-top: calc(var(--aurea) * 0.23);
  font-family: 'Manrope', sans-serif;
  font-weight: 600; font-size: calc(var(--aurea) * 0.41); line-height: 1;
  letter-spacing: 0.447em; margin-right: -0.447em;
  text-transform: uppercase; color: #C9CCD0;
}
.voet-merk { --aurea: 31px; }
.nav { display: flex; gap: 38px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-light); }
.nav a { position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--warm); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav a:hover { color: var(--tx-light); }
.nav a:hover::after { transform: scaleX(1); }
.top-rechts { display: flex; align-items: center; gap: 26px; }
.tel { font-size: 13.5px; font-weight: 500; color: var(--tx-light); white-space: nowrap; }
.tel:hover { color: var(--tx-light); }
.top .btn { height: 44px; padding: 0 20px; background: var(--tx-light); color: var(--tx-dark); border-color: var(--tx-light); }
.top .btn:hover { background: var(--accent-diep); border-color: var(--accent-diep); color: var(--tx-light); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--ink); color: var(--tx-light); overflow: hidden; }
.hero-beeld { position: absolute; inset: 0; }
/* de video vult het vlak, ongeacht de schermverhouding, ook op mobiel */
.hero-beeld video, .hero-beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 30% center;
}
/* Alleen de video krijgt het filter. In de posterfoto zit dezelfde bewerking
   al gebakken (grayscale 0.18, contrast 1.05, brightness 0.86), want een
   filter over een schermvullend beeld kost op telefoon merkbaar rekenwerk.
   Verander je deze waarden, maak dan ook images/hero-poster.jpg opnieuw. */
.hero-beeld video { filter: grayscale(0.18) contrast(1.05) brightness(0.86); }
/* Verloop van donker links naar bijna open rechts. De knik bij 61 en 73 procent
   ligt net voorbij de tekstkolom, zodat de rechterhelft van het beeld vrij blijft
   en de kop toch 6,7:1 contrast houdt. */
.hero-tint {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(38,40,42,0.70) 0%,
    rgba(38,40,42,0.68) 46%,
    rgba(38,40,42,0.62) 61%,
    rgba(38,40,42,0.24) 73%,
    rgba(38,40,42,0.10) 100%);
}
.hero-voet { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(38,40,42,0) 0%, rgba(38,40,42,0.45) 100%); }
.hero-in { position: relative; z-index: 2; padding: calc(84px + clamp(56px, 7vw, 96px)) 0 clamp(72px, 8vw, 112px); }
.hero-tekst { max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.hero .display { color: var(--tx-light); text-shadow: 0 2px 30px rgba(38,40,42,0.35); }
.hero .lead { max-width: 560px; color: rgba(255,255,255,0.82); }
.hero-acties { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 6px; }

/* feitenpaneel: valt half over de hero en half over de witte sectie eronder */
.feiten { position: relative; z-index: 6; margin-top: clamp(-104px, -7vw, -64px); }
.feiten-in {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg, rgba(35,39,44,0.97) 0%, rgba(38,40,42,0.97) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-paneel), inset 0 1px 0 rgba(255,255,255,0.07);
  padding: clamp(10px, 1vw, 16px);
}
.feit {
  position: relative;
  padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.2vw, 34px);
  border-radius: var(--rond);
}
/* scheiding die aan boven- en onderkant wegvalt, geen doorlopende rasterlijn */
.feit + .feit::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%);
}
/* kort streepje in staalgrijs boven elk vak, geeft definitie */
.feit::after { content: ""; position: absolute; left: clamp(24px, 2.2vw, 34px); top: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--steel); }
.feit b { display: block; font-family: 'Archivo', sans-serif; font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: var(--tx-light); }
.feit span { display: block; margin-top: 9px; font-size: 13px; color: rgba(255,255,255,0.66); line-height: 1.6; }

/* ---------- twee kolommen met vaste linkerkolom ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(40px, 7vw, 108px); align-items: start; }
.duo-kop { position: sticky; top: 56px; display: flex; flex-direction: column; gap: 22px; }

/* genummerde rijen: het werk zelf */
.rijen { border-top: 1px solid var(--line-l2); }
.rij { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding: 30px 0; border-bottom: 1px solid var(--line-l); }
.rij-nr { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--steel); padding-top: 4px; }
.rij-tekst { display: flex; flex-direction: column; gap: 7px; }
.on-dark .rijen { border-top-color: var(--line-d2); }
.on-dark .rij { border-bottom-color: var(--line-d); }
.on-dark .rij-nr { color: var(--warm); }

/* ---------- beeldcompositie ---------- */
.beeld-band { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 22%, var(--paper-2) 100%); }
.raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--kolom); }
.kader { position: relative; overflow: hidden; background: var(--paper-3); border-radius: var(--rond-groot); box-shadow: var(--schaduw-beeld); }
.kader img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.kader:hover img { transform: scale(1.035); }
.b-a { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.b-b { grid-column: 8 / span 5; aspect-ratio: 3 / 2; align-self: center; }

/* ---------- donkere secties ---------- */
.donker { position: relative; background: var(--graphite); color: var(--tx-light); overflow: hidden; }
/* Fijne korrel, amper zichtbaar op een schermafbeelding maar je voelt het wel. */
.korrelig::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--korrel); background-size: 180px 180px;
  opacity: 0.05; mix-blend-mode: overlay;
}
.donker::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 70% at 88% 6%, rgba(154,161,169,0.14) 0%, rgba(154,161,169,0) 60%); pointer-events: none; }
.donker > * { position: relative; z-index: 1; }
/* lichte sectie met een eigen toon, voor ritme tussen de witte vlakken */
.licht { background: var(--paper-2); }

/* over ons: beeld dat over de sectierand valt */
.over-ons { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.portret { aspect-ratio: 4 / 5; margin-top: clamp(-88px, -5vw, 0px); }
.kenmerken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.kenmerk { background: var(--kaart); border: 1px solid var(--line-l); border-radius: var(--rond); padding: 26px 28px; box-shadow: var(--schaduw-zacht); }
.kenmerk b { display: block; font-family: 'Archivo', sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
.kenmerk span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--tx-body); }

/* slot */
.slot { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.slot .h2 { max-width: 820px; }
.slot .lead { max-width: 600px; }
.slot-acties { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 6px; }

/* voet */
.voet { background: var(--ink); color: var(--tx-light); padding: clamp(56px, 6vw, 84px) 0 34px; }
.voet-boven { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-bottom: 46px; border-bottom: 1px solid var(--line-d); }
.voet .voet-kop { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm); margin-bottom: 16px; }
.voet-kolom { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--tx-light); }
.voet-kolom a:hover { color: var(--tx-light); }
.voet-onder { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; font-size: 12.5px; color: var(--tx-faint); }

/* rustige opkomst bij scrollen */
.op { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.op.zicht { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .op { opacity: 1; transform: none; transition: none; }
  .kader img, .tlink .pijl { transition: none; }
}

/* ---------- responsief ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .top .merk { --aurea: 21px; }
  .voet-merk { --aurea: 28px; }
  .duo, .over-ons { grid-template-columns: 1fr; }
  .duo-kop { position: static; }
  .feiten-in { grid-template-columns: repeat(2, 1fr); }
  .portret { margin-top: 0; max-width: 460px; }
  .b-a { grid-column: 1 / span 12; }
  .b-b { grid-column: 1 / span 12; margin-top: 0; }
}
@media (max-width: 720px) {
  /* Op telefoon staat de tekst over de volle breedte. Een verloop van links naar
     rechts haalt daar maar 2,1:1, dus hier van boven naar onder. */
  .hero-beeld video, .hero-beeld img { object-position: 25% center; }
  .hero-tint { background: linear-gradient(180deg, rgba(38,40,42,0.72) 0%, rgba(38,40,42,0.55) 100%); }
  .hero-voet { height: 30%; background: linear-gradient(180deg, rgba(38,40,42,0) 0%, rgba(38,40,42,0.35) 100%); }
  .top-in { height: 72px; }
  .top .merk { --aurea: 19px; }
  /* Op telefoon wordt BATHROOMS zo klein dat het een streepje wordt, dus weg ermee. */
  .top .merk-bathrooms { display: none; }
  .voet-merk { --aurea: 26px; }
  .top .btn, .tel { display: none; }
  .kenmerken { grid-template-columns: 1fr; }
  .feiten-in { grid-template-columns: 1fr; }
  .feit { padding: 22px 22px 24px; }
  .rij { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ============================================================
   FORMULIER EN CONTACTPAGINA
   ============================================================ */

/* kopbalk op pagina's zonder donkere hero */
.top.vast { position: static; background: var(--ink); border-bottom: 1px solid var(--line-d); }

/* kop van een binnenpagina */
.paginakop { background: var(--paper-2); padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.paginakop .display { font-size: clamp(32px, 4.2vw, 56px); max-width: 780px; }
.paginakop .lead { max-width: 620px; margin-top: 22px; }

/* formulier in een zacht vlak */
.formulier {
  background: var(--kaart); border: 1px solid var(--line-l);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-zacht);
  padding: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column; gap: 22px;
}
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.veld { display: flex; flex-direction: column; gap: 9px; }
.veld.breed { grid-column: 1 / -1; }
.veld label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.veld input, .veld select, .veld textarea {
  font-family: inherit; font-size: 15px; color: var(--tx-dark);
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--rond-klein);
  padding: 15px 16px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.veld textarea { min-height: 128px; resize: vertical; line-height: 1.7; }
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--line-l2); }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; background: var(--paper);
  border-color: var(--steel);
  box-shadow: 0 0 0 4px rgba(118,125,133,0.12);
}
.veld input::placeholder, .veld textarea::placeholder { color: rgba(78,85,92,0.55); }
.formulier-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 4px; }
.kleine-tekst { font-size: 13px; line-height: 1.7; color: var(--tx-body); }

/* zijkolom met beeld en gegevens */
.contact-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.contact-zij { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 40px; }
.gegevens { display: flex; flex-direction: column; gap: 2px; }
.gegeven { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-l); font-size: 15px; }
.gegeven:last-child { border-bottom: 0; }
.gegeven span { color: var(--tx-body); font-size: 13.5px; }

@media (max-width: 1080px) {
  .contact-raster { grid-template-columns: 1fr; }
  .contact-zij { position: static; }
}
@media (max-width: 720px) {
  .velden { grid-template-columns: 1fr; }
}

/* ============================================================
   BINNENPAGINA'S: KRUIMELPAD, VRAGEN, MELDINGEN, JURIDISCHE TEKST
   ============================================================ */

.kader picture { display: block; width: 100%; height: 100%; }

/* veelgestelde vragen */
.vragen { border-top: 1px solid var(--line-l); }
.vraag { border-bottom: 1px solid var(--line-l); }
.vraag summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: 7px;
  background:
    linear-gradient(var(--steel), var(--steel)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--steel), var(--steel)) center / 1.5px 13px no-repeat;
  transition: transform .3s ease;
}
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag summary:hover { color: var(--slate); }
.vraag-tekst { padding: 0 0 28px; max-width: 760px; }

/* meldingen bij het formulier */
.melding { border-radius: var(--rond); padding: 22px 24px; font-size: 15px; line-height: 1.7; }
.melding.goed { background: var(--paper-2); border: 1px solid var(--line-l); box-shadow: var(--schaduw-zacht); }
.melding.mis { background: #FBF3F1; border: 1px solid #E4CFC8; }
.melding b { display: block; font-family: 'Archivo', sans-serif; font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.verborgen { display: none !important; }
.btn[disabled] { opacity: 0.55; cursor: default; }
/* honeypot: onzichtbaar voor bezoekers, wel zichtbaar voor spamrobots */
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* juridische pagina's */
.juridisch { max-width: 780px; }
.juridisch h2 { font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: clamp(24px, 2.5vw, 31px); font-weight: 600; letter-spacing: 0; margin: 52px 0 14px; }
.juridisch h3 { font-size: 17px; font-weight: 600; margin: 30px 0 10px; }
.juridisch p { font-size: 15.5px; line-height: 1.85; color: var(--tx-body); margin-bottom: 16px; }
.juridisch ul { margin: 0 0 18px; padding-left: 20px; }
.juridisch li { font-size: 15.5px; line-height: 1.85; color: var(--tx-body); margin-bottom: 8px; }
.juridisch a { border-bottom: 1px solid var(--line-l2); }
.juridisch a:hover { border-color: var(--tx-dark); }
.nazien { background: var(--paper-2); border-radius: var(--rond); padding: 20px 22px; font-size: 14px; line-height: 1.7; color: var(--tx-body); margin: 22px 0; }
.nazien b { color: var(--tx-dark); }

/* foutpagina */
.fout { display: flex; align-items: center; }
.fout-in { max-width: 620px; display: flex; flex-direction: column; gap: 22px; }
.fout-nr { font-family: 'Archivo', sans-serif; font-size: clamp(56px, 9vw, 104px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--paper-3); }

/* ============================================================
   BLOKTYPES VOOR DE DIENSTENPAGINA'S
   Elk blok is precies zo hoog als de inhoud vraagt.
   ============================================================ */

/* Foto die nog geleverd moet worden. Houdt de juiste verhouding vast,
   zodat de opmaak niet verspringt als de echte foto erin komt. */
.nog-geen-foto {
  background: var(--leeg); border-radius: var(--rond-groot);
  display: flex; align-items: center; justify-content: center;
}
.nog-geen-foto span {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tx-body);
}
.donker .nog-geen-foto, .on-dark .nog-geen-foto { background: #3A3B3D; }
.donker .nog-geen-foto span, .on-dark .nog-geen-foto span { color: var(--tx-faint); }

/* Tekst met beeld ernaast, half om half. */
.helft { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.helft-tekst { display: flex; flex-direction: column; gap: 16px; }
.helft-tekst .tlink { align-self: flex-start; margin-top: 8px; }
.beeld-links .helft-beeld { order: -1; }

/* Kaarten naast elkaar. */
.kaarten { display: grid; gap: clamp(16px, 2vw, 24px); }
.kaarten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaarten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kaarten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kaart {
  background: var(--kaart); border: 1px solid var(--line-l); border-radius: var(--rond);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--schaduw-zacht);
  display: flex; flex-direction: column; gap: 10px;
}
.licht .kaart, .beeld-band .kaart { background: var(--kaart); }
.donker .kaart, .on-dark .kaart { background: var(--ink-2); border-color: var(--line-d); }
.donker .kaart h3, .on-dark .kaart h3 { color: var(--tx-light); }
.donker .kaart p, .on-dark .kaart p { color: var(--tx-faint); }
.kaart .kaart-nr { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--steel); }
.kaart h3 { font-size: 18px; line-height: 1.3; }
.kaart p { font-size: 15px; line-height: 1.75; color: var(--tx-body); }
.kaart .tlink { margin-top: auto; padding-top: 16px; align-self: flex-start; border-bottom: 0; }
.kaart-link { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }

/* Brede foto met een korte tekst eroverheen. */
.breedbeeld {
  position: relative; overflow: hidden; border-radius: var(--rond-groot);
  display: flex; align-items: center;
  height: clamp(260px, 30vw, 420px);
  background: var(--leeg);
}
.breedbeeld > picture, .breedbeeld > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.breedbeeld > picture img { width: 100%; height: 100%; object-fit: cover; }
.breedbeeld::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(38,40,42,0.88) 0%, rgba(38,40,42,0.74) 42%, rgba(38,40,42,0.30) 100%);
}
.breedbeeld .op-beeld {
  position: relative; z-index: 2; color: var(--tx-light);
  padding: clamp(24px, 3vw, 40px); max-width: 560px;
  display: flex; flex-direction: column; gap: 12px; text-align: left;
}
/* Zonder foto blijft het vlak zichtbaar als plek waar een foto hoort. */
.breedbeeld.leeg { background: #3A3B3D; }
.breedbeeld .wacht {
  position: absolute; right: clamp(18px, 2vw, 28px); bottom: clamp(14px, 1.6vw, 20px); z-index: 3;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-faint);
}
.breedbeeld .op-beeld p { color: rgba(255,255,255,0.82); }

/* Citaatblok: één zin, meer niet. */
.citaat { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.citaat p {
  font-family: 'Archivo', sans-serif; font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -0.02em;
}
.citaat .hair { width: 160px; }

/* Twee lijsten naast elkaar: wat zit erbij en wat niet. */
.lijsten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.lijst-vak { background: var(--kaart); border: 1px solid var(--line-l); border-radius: var(--rond); padding: clamp(24px, 2.6vw, 34px); box-shadow: var(--schaduw-zacht); }
.lijst-vak h3 { font-size: 19px; margin-bottom: 4px; }
.lijst-vak ul { list-style: none; margin: 16px 0 0; padding: 0; }
.lijst-vak li { position: relative; padding: 11px 0 11px 26px; font-size: 15px; line-height: 1.7; color: var(--tx-body); border-bottom: 1px solid var(--line-l); }
.lijst-vak li:last-child { border-bottom: 0; }
.lijst-vak li::before { content: ""; position: absolute; left: 0; top: 19px; width: 12px; height: 1px; background: var(--steel); }
.lijst-vak.niet li::before { background: var(--line-l2); }

@media (max-width: 900px) {
  .helft, .lijsten { grid-template-columns: 1fr; }
  .beeld-links .helft-beeld { order: 0; }
  .kaarten-3, .kaarten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breedbeeld::after { background: linear-gradient(180deg, rgba(38,40,42,0.50) 0%, rgba(38,40,42,0.90) 100%); }
}
@media (max-width: 620px) {
  .kaarten-2, .kaarten-3, .kaarten-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   MENU MET UITKLAP, EN EEN WERKEND MENU OP TELEFOON
   ============================================================ */

.nav-uit { position: relative; }
.nav-uit > summary {
  list-style: none; cursor: pointer; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav-uit > summary::-webkit-details-marker { display: none; }
.nav-uit > summary::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.nav-uit[open] > summary::after { transform: rotate(-135deg); margin-top: 1px; }
.nav-uit > summary:hover { color: var(--tx-light); }
.nav-uit-lijst {
  position: absolute; top: calc(100% + 18px); left: -20px; z-index: 30;
  min-width: 268px; padding: 10px;
  background: linear-gradient(180deg, rgba(35,39,44,0.98) 0%, rgba(38,40,42,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--rond);
  box-shadow: var(--schaduw-paneel);
  display: flex; flex-direction: column;
}
.nav-uit-lijst a {
  padding: 11px 14px; border-radius: var(--rond-klein);
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: none;
  color: var(--tx-light);
}
.nav-uit-lijst a:hover { background: rgba(255,255,255,0.07); color: var(--tx-light); }
.nav-uit-lijst a::after { display: none; }

/* Telefoon en tablet: een uitklapmenu onder de kopbalk. */
.menu-knop { display: none; }
.menu-knop > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tx-light); padding: 10px 0;
}
.menu-knop > summary::-webkit-details-marker { display: none; }
.menu-knop .streepjes { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-knop .streepjes i { display: block; width: 20px; height: 1.5px; background: currentColor; }
.menu-lijst {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--ink); border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
  padding: 10px var(--pad-x) 22px;
  display: flex; flex-direction: column;
  box-shadow: var(--schaduw-paneel);
}
.menu-lijst a, .menu-lijst .kopje {
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 15px; color: var(--tx-light);
}
.menu-lijst .kopje {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--warm); border-bottom: 0; padding-bottom: 4px; padding-top: 18px;
}
.menu-lijst a.diep { padding-left: 16px; }
.menu-lijst a:hover { color: var(--tx-light); }
.menu-lijst .btn { margin-top: 18px; border-bottom: 0; }

/* De kopbalk op binnenpagina's moet een ankerpunt zijn voor het uitklapmenu.
   Op de homepage staat de balk al absoluut over de hero, dat is ook een ankerpunt. */
.top.vast { position: relative; }

@media (max-width: 1080px) {
  .menu-knop { display: block; }
}

/* Lijstvakken en formulier ook bruikbaar op een donkere sectie. */
.donker .lijst-vak, .on-dark .lijst-vak { background: var(--ink-2); border-color: var(--line-d); }
.donker .lijst-vak h3, .on-dark .lijst-vak h3 { color: var(--tx-light); }
.donker .lijst-vak li, .on-dark .lijst-vak li,
.donker .lijst-vak p, .on-dark .lijst-vak p { color: var(--tx-faint); border-bottom-color: var(--line-d); }
.donker .lijst-vak li::before, .on-dark .lijst-vak li::before { background: var(--steel); }

/* ============================================================
   WHATSAPP-KNOP EN VASTE BALK ONDERAAN OP TELEFOON
   ============================================================ */

/* Tweede knopstijl: omlijnd, met groen icoon. Verder geen varianten. */
.btn-wa { gap: 10px; }
.btn-wa svg { width: 17px; height: 17px; flex: none; fill: #25D366; }

/* Vaste balk onderaan, pas zichtbaar als de knoppen in de hero voorbij zijn. */
.balk-onder {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(38,40,42,0.96); border-top: 1px solid var(--line-d);
  transform: translateY(110%); transition: transform .28s ease;
}
.balk-onder.zichtbaar { transform: none; }
.balk-onder a { flex: 1; height: 48px; font-size: 12px; }
@media (max-width: 720px) {
  .balk-onder { display: flex; }
  body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .balk-onder { transition: none; } }

/* ============================================================
   OPROEPBLOK MET FOTO
   Foto over de volle breedte, tekst rechts in zes kolommen.
   ============================================================ */

.oproep {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 480px;
  padding: var(--sec) 0;
  background: var(--leeg);
}
.oproep-beeld { position: absolute; inset: 0; display: block; }
.oproep-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: left center; filter: brightness(0.90); }
/* Links blijft de foto open, naar rechts loopt de waas op zodat de tekst leesbaar is. */
.oproep-waas {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(38,40,42,0.15) 0%,
    rgba(38,40,42,0.15) 38%,
    rgba(38,40,42,0.80) 50%,
    rgba(38,40,42,0.80) 100%);
}
.oproep-in {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 26px);
}
.oproep-tekst {
  grid-column: 7 / span 6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  text-align: left;
}
.oproep-tekst .slot-acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; justify-content: flex-start; }

@media (max-width: 900px) {
  /* Op telefoon staat de tekst onderin, met een verloop van boven naar onder. */
  .oproep { min-height: 460px; align-items: flex-end; }
  .oproep-waas {
    background: linear-gradient(180deg,
      rgba(38,40,42,0.15) 0%,
      rgba(38,40,42,0.15) 12%,
      rgba(38,40,42,0.85) 25%,
      rgba(38,40,42,0.85) 100%);
  }
  .oproep-tekst { grid-column: 1 / span 12; }
}

/* De voettekst wijkt af van het oproepblok erboven. */
.voet { background: var(--ink-2); border-top: 1px solid var(--line-d); }

/* ------------------------------------------------------------
   Correcties op het oproepblok en de voettekst
   ------------------------------------------------------------ */

/* Het oproepblok staat op een donkere foto, dus de tekst is gebroken wit. */
.oproep { color: var(--tx-light); }
.oproep .h2 { color: var(--tx-light); }
.oproep .lead { color: var(--tx-light); }
/* De knoppenrij mag de volle kolombreedte gebruiken, anders vallen ze onder elkaar. */
.oproep-tekst .slot-acties { width: 100%; }
.oproep-tekst .btn { white-space: nowrap; }

/* De voettekst stapelde niet op smalle schermen, de kolommen liepen door elkaar. */
@media (max-width: 900px) {
  .voet-boven { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 560px) {
  .voet-boven { grid-template-columns: 1fr; gap: 28px; }
  .voet-onder { flex-direction: column; gap: 8px; }
  /* Ruimte onderaan, anders valt de vaste balk over de voettekst. */
  .voet { padding-bottom: 96px; }
}

/* Het label staat hier op een foto. De accentkleur haalt daar maar 1,55:1,
   dus in dit blok een warme lichte tint die wel leesbaar is. */
.oproep .label { color: #E3DBD1; }

/* ============================================================
   DIEPTE EN GELAAGDHEID
   Eén systeem voor de hele site: lagen in kleur, drie schaduwen,
   korrel op elk vlak, foto's als losse laag. Terughoudend: het
   moet te voelen zijn, niet op te vallen.
   ============================================================ */

/* ---------- 1. Raster en ritme ---------- */
.wrap { max-width: var(--max); padding-left: var(--pad-x); padding-right: var(--pad-x); }
.sec { padding-top: var(--sec); padding-bottom: var(--sec); }
.r12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--kolom); }

/* ---------- 2. Lagen in kleur ----------
   Elke sectie heeft een verloop van boven naar onder: bovenaan 2 tot 3
   procent lichter. Geen enkel vlak is egaal. */
.sec, .licht, .paginakop, .beeld-band {
  position: relative;
  background-image: linear-gradient(180deg, var(--l2) 0%, var(--l1) 42%, var(--l1) 100%);
  background-color: var(--l1);
}
.donker, .sec.donker {
  background-image: linear-gradient(180deg, var(--d2) 0%, var(--d1) 46%, var(--d1) 100%);
  background-color: var(--d1);
}
.hero { background-color: var(--d0); }

/* ---------- 3. Korrel op alle vlakken ----------
   Donker 5 procent, licht 3 procent. Ook beige is dan niet plat. */
.sec::before, .licht::before, .paginakop::before, .beeld-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--korrel-fijn); background-size: 140px 140px;
  opacity: 0.03; mix-blend-mode: multiply;
}
.korrelig::before, .donker::before, .sec.donker::before {
  background-image: var(--korrel); background-size: 180px 180px;
  opacity: 0.05; mix-blend-mode: overlay;
}
.sec > *, .licht > *, .paginakop > *, .beeld-band > * { position: relative; z-index: 1; }

/* ---------- 4. Kaarten en panelen ----------
   Laddervolgorde: sectie -> paneel -> kaart, elke stap één tint lichter.
   Plus een haarlijn licht langs de bovenrand: lichtval van boven. */
.kaart, .kenmerk, .lijst-vak, .nazien {
  border-radius: var(--rond);
  box-shadow: var(--sch-rust), var(--glans-l);
  background: var(--l3);
  border: 1px solid var(--line-l);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.donker .kaart, .on-dark .kaart,
.donker .lijst-vak, .on-dark .lijst-vak {
  background: var(--d3);
  border-color: var(--line-d);
  box-shadow: var(--sch-rust), var(--glans-d);
}
.kaart-link:hover { transform: translateY(-2px); background: var(--l4); box-shadow: var(--sch-op), var(--glans-l); }
.donker .kaart-link:hover, .on-dark .kaart-link:hover { background: var(--d4); box-shadow: var(--sch-op), var(--glans-d); }

/* Het feitenpaneel is een paneel, geen kaart: één stap boven de sectie. */
.feiten-in {
  background-image: linear-gradient(180deg, var(--d3) 0%, var(--d2) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--rond-beeld);
  box-shadow: var(--sch-zweef), var(--glans-d);
}

/* ---------- 5. Foto's als losse laag ----------
   Altijd in een kader met ronde hoeken en de zwevende schaduw, plus een
   lichte vignettering zodat het beeld naar binnen trekt. */
.kader, .breedbeeld, .helft-beeld .kader, .nog-geen-foto {
  border-radius: var(--rond-beeld);
  box-shadow: var(--sch-zweef);
}
.kader::after, .breedbeeld::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.10) 100%);
}
.breedbeeld::before { z-index: 3; }

/* Overlap: een foto of kaart valt 64px over de grens tussen twee blokken. */
.overlap { margin-bottom: calc(var(--r8) * -1); position: relative; z-index: 4; }
.overlap-boven { margin-top: calc(var(--r8) * -1); position: relative; z-index: 4; }
@media (max-width: 900px) {
  .overlap { margin-bottom: calc(var(--r5) * -1); }
  .overlap-boven { margin-top: calc(var(--r5) * -1); }
}

/* De hero loopt met een zachte rand van 120px over in de sectie eronder. */
.hero-voet {
  height: 120px;
  background: linear-gradient(180deg, rgba(35,37,39,0) 0%, rgba(38,40,42,0.55) 62%, var(--d1) 100%);
}

/* ---------- 6. Typografie als diepte ---------- */
/* Eén woord in de H1 van de homepage, verder nergens. */
.cursief { font-style: italic; font-weight: 500; }

/* Stapnummers groot als tweede laag, half achter de tekst. */
.rij { position: relative; }
.rij-nr {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 64px; font-weight: 600; line-height: 0.82; letter-spacing: -0.02em;
  color: var(--steel); opacity: 0.40;
  padding-top: 0; margin-top: -6px;
  user-select: none;
}
.on-dark .rij-nr, .donker .rij-nr { color: var(--warm); opacity: 0.40; }
.kaart .kaart-nr {
  position: absolute; top: 10px; right: 18px; z-index: 0;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  color: var(--steel); opacity: 0.40;
  user-select: none; pointer-events: none;
}
.kaart { position: relative; overflow: hidden; }
.kaart > h3, .kaart > p, .kaart > .tlink { position: relative; z-index: 1; }

/* ---------- 7. Beweging ---------- */
.btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:hover { box-shadow: var(--sch-zweef); }
.btn-ghost:hover { box-shadow: var(--sch-rust); }

/* ---------- 8. Details ---------- */
/* Dunne lijnen tussen lijstitems, met 16px lucht erboven en eronder. */
.lijst-vak li { padding-top: var(--r2); padding-bottom: var(--r2); }
.gegeven { padding-top: var(--r2); padding-bottom: var(--r2); }

/* De voettekst sluit af met een haarlijn in de accentkleur. */
.voet { border-top: 1px solid transparent; position: relative; }
.voet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--steel); opacity: 0.30;
}

/* De kopbalk zweeft bij het scrollen boven de inhoud: 8px lager en een schaduw. */
.top { transition: height .2s ease, box-shadow .2s ease, background-color .2s ease; }
.top-in { transition: height .2s ease; }
.top.zwevend {
  position: fixed; top: 0; left: 0; right: 0;
  background-color: rgba(38,40,42,0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--sch-zweef);
}
.top.zwevend .top-in { height: 76px; }
@media (max-width: 720px) { .top.zwevend .top-in { height: 64px; } }

/* Rondingen: knoppen 8, kaarten 12, grote fotoblokken 16. */
.btn, .veld input, .veld select, .veld textarea { border-radius: var(--rond-knop); }
.nav-uit-lijst, .melding { border-radius: var(--rond); }

@media (prefers-reduced-motion: reduce) {
  .kaart-link, .btn, .top, .top-in { transition: none; }
  .kaart-link:hover { transform: none; }
}

/* ------------------------------------------------------------
   HET FORMULIER ALS DONKER PANEEL
   Het formulier is het zwaarste element op de contactpagina, dus
   het is de kaart die van familie wisselt: donker op een licht
   blok. De velden zijn één tint lichter dan het paneel, nooit wit.
   ------------------------------------------------------------ */
.formulier {
  background-image: linear-gradient(180deg, var(--d3) 0%, var(--d2) 100%);
  background-color: var(--d2);
  border: 1px solid var(--line-d);
  border-radius: var(--rond);
  box-shadow: var(--sch-zweef), var(--glans-d);
  color: var(--tx-light);
}
.formulier .veld label { color: var(--steel-lt); }
.formulier .veld input,
.formulier .veld select,
.formulier .veld textarea {
  background: var(--d4);
  border: 1px solid var(--line-d2);
  color: var(--tx-light);
}
.formulier .veld input::placeholder,
.formulier .veld textarea::placeholder { color: rgba(237,234,228,0.48); }
.formulier .veld input:hover,
.formulier .veld select:hover,
.formulier .veld textarea:hover { border-color: #5A5E63; background: #383A3E; }
.formulier .veld input:focus,
.formulier .veld select:focus,
.formulier .veld textarea:focus {
  outline: none; background: #383A3E;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(140,123,107,0.28);
}
.formulier .veld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--steel-lt) 50%), linear-gradient(135deg, var(--steel-lt) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  background-color: var(--d4);
}
.formulier .btn { background: var(--tx-light); color: var(--tx-dark); border-color: var(--tx-light); }
.formulier .btn:hover { background: var(--accent-diep); border-color: var(--accent-diep); color: var(--tx-light); }
.formulier .kleine-tekst { color: var(--steel-lt); }
.formulier .kleine-tekst a { color: var(--tx-light); border-bottom-color: var(--line-d2); }
.formulier .kleine-tekst a:hover { border-bottom-color: var(--tx-light); }
.formulier .melding.goed { background: var(--d4); border-color: var(--line-d2); color: var(--tx-light); box-shadow: var(--glans-d); }
.formulier .melding.mis { background: #3A2F2C; border-color: #5C4740; color: #F3E3DE; }

/* ------------------------------------------------------------
   KOP VAN EEN BINNENPAGINA
   Links zeven kolommen tekst, rechts vijf kolommen foto in 4:5,
   verticaal gecentreerd. Nooit een lege rechterhelft.
   ------------------------------------------------------------ */
.paginakop { padding-top: var(--r7); padding-bottom: var(--r10); }
.paginakop-in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--kolom); align-items: center;
}
.paginakop-tekst { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--r2); }
.paginakop-tekst .display { font-size: clamp(32px, 4.2vw, 52px); max-width: none; margin: 0; }
.paginakop-tekst .lead { max-width: 56ch; margin: 0; }
.paginakop-beeld { grid-column: 8 / span 5; }
.paginakop-beeld .kader { aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .paginakop { padding-top: var(--r5); padding-bottom: var(--r7); }
  .paginakop-in { gap: var(--r4); }
  .paginakop-tekst { grid-column: 1 / span 12; }
  /* De verhouding 4:5 staat als inline-stijl op het kader en blijft ook op
     telefoon staan; een staand beeld werkt daar juist goed. */
  .paginakop-beeld { grid-column: 1 / span 12; }
}

/* Overlap: de foto in de paginakop valt 64px over de grens met het blok
   eronder. Dat blok krijgt 64px extra ruimte bovenaan, zodat er niets
   botst. Op telefoon staat alles onder elkaar en vervalt de overlap. */
.paginakop.overlappend { padding-bottom: 0; }
.paginakop.overlappend .paginakop-beeld {
  margin-bottom: calc(var(--r8) * -1);
  position: relative; z-index: 4;
}
.na-overlap { padding-top: calc(var(--sec) + var(--r8)); }
@media (max-width: 900px) {
  .paginakop.overlappend { padding-bottom: var(--r7); }
  .paginakop.overlappend .paginakop-beeld { margin-bottom: 0; }
  .na-overlap { padding-top: var(--sec); }
}

/* Fijnafstelling na het smallere raster (1200px). */
.feit b { font-size: clamp(18px, 1.55vw, 22px); }
.feit span { margin-top: 7px; font-size: 12.5px; }
.feit { padding: clamp(22px, 2.2vw, 30px) clamp(18px, 1.8vw, 26px); }
.feit::after { left: clamp(18px, 1.8vw, 26px); }
/* Ruimte voor de grote stapnummers. */
.rij { grid-template-columns: 88px minmax(0, 1fr); gap: var(--r3); padding: var(--r4) 0; }
@media (max-width: 720px) { .rij { grid-template-columns: 64px minmax(0, 1fr); } .rij-nr { font-size: 46px; } }

/* Het stapnummer op een kaart is een tweede laag, geen kop. Het staat
   rechtsonder en loopt half van de kaart af, zodat het achter de tekst
   door zakt zonder een regel onleesbaar te maken. */
.kaart .kaart-nr {
  top: auto; right: 10px; bottom: -22px;
  font-size: 84px; line-height: 1;
}
.kaart > .tlink { position: relative; z-index: 1; }
@media (max-width: 620px) { .kaart .kaart-nr { font-size: 64px; bottom: -16px; } }

/* ------------------------------------------------------------
   CONTRAST VAN DE ACCENTKLEUR
   #8C7B6B is mooi maar haalt als tekst nergens 4,5:1: op licht
   3,1 tot 3,7 en op donker 3,0 tot 3,8. De kleine labels zijn
   echte tekst, dus die krijgen een diepere variant op licht en
   een lichtere variant op donker. De accentkleur zelf blijft
   onveranderd voor lijnen, streepjes en de grote cijfers.
   ------------------------------------------------------------ */
:root {
  --accent-tekst-l: #6A5D52;   /* label op een lichte laag, 4,88:1 */
  --accent-tekst-d: #B9A794;   /* label op een donkere laag, 5,20:1 */
}
.label { color: var(--accent-tekst-l); }
.on-dark .label, .donker .label { color: var(--accent-tekst-d); }
.voet .voet-kop, .menu-lijst .kopje { color: var(--accent-tekst-d); }
.veld label { color: var(--accent-tekst-l); }
.formulier .veld label { color: var(--accent-tekst-d); }
/* Het oproepblok staat op een foto en houdt zijn eigen, lichtere tint. */
.oproep .label { color: #E3DBD1; }

/* De invoervelden moeten als bedieningselement herkenbaar zijn: de rand
   haalt nu 3,2:1 tegen de vulling en 3,65:1 tegen het paneel. */
.formulier .veld input,
.formulier .veld select,
.formulier .veld textarea { border-color: #7E848A; }
.formulier .veld input::placeholder,
.formulier .veld textarea::placeholder { color: rgba(237,234,228,0.62); }

/* De grote cijfers zijn een tweede laag, geen leesbare tekst: ze staan op
   40 procent zoals afgesproken en zijn verborgen voor schermlezers. De
   stapnaam ernaast draagt de betekenis. */
.rij-nr, .kaart-nr { speak: none; }

/* De kop met de overlappende foto moet boven het blok eronder liggen. */
.paginakop.overlappend { z-index: 3; }


/* ------------------------------------------------------------
   HERO: FOTO EERST, VIDEO ERNA
   De foto is het eerste wat de bezoeker ziet en telt als LCP.
   De video komt er alleen op een groot scherm overheen, en
   vervaagt er zachtjes in zodra hij kan spelen.
   ------------------------------------------------------------ */
.hero-poster, .hero-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% center;
}
.hero-beeld video { opacity: 0; transition: opacity .6s ease; }
.hero-beeld video.speelt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-beeld video { transition: none; } }

/* De kolomkoppen in de voettekst zijn h2 voor een nette koppenvolgorde,
   maar zien eruit als een klein label. */
.voet .voet-kop { margin-top: 0; line-height: 1.4; }

/* ============================================================
   LABEL ZONDER LIJNTJE
   Het korte streepje voor de labels is eraf. Het label blijft
   accentkleur, kapitalen en 0.2em letterafstand.
   ============================================================ */
.label { gap: 0; }

/* ============================================================
   KRUIMELPAD ALS TEKSTREGEL
   Geen aparte balk meer. Het pad staat bovenin de paginakop, op
   dezelfde linkerlijn van het raster als het label en de kop.
   ============================================================ */
.kruimels {
  font-size: 14px; line-height: 1.5; color: var(--tx-body);
  margin: 0 0 var(--r3);
  padding: 0;
}
.kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kruimels li::after { content: "/"; margin-left: 8px; color: var(--line-l2); }
.kruimels li:last-child::after { content: ""; margin: 0; }
.kruimels a { border-bottom: 1px solid transparent; }
.kruimels a:hover { color: var(--tx-dark); border-bottom-color: var(--line-l2); }
.kruimels [aria-current="page"] { color: var(--tx-dark); }
.on-dark .kruimels, .donker .kruimels { color: var(--tx-faint); }
.on-dark .kruimels li::after, .donker .kruimels li::after { color: var(--line-d2); }
.on-dark .kruimels a:hover, .donker .kruimels a:hover { color: var(--tx-light); border-bottom-color: var(--line-d2); }
.on-dark .kruimels [aria-current="page"], .donker .kruimels [aria-current="page"] { color: var(--tx-light); }
/* De paginakop begint nu bovenaan, want het kruimelpad zit erin. */
.paginakop-tekst .kruimels { margin-top: 0; }

/* ============================================================
   DE STROOK
   Vijf of zes kaarten naast elkaar in een rij die je opzij
   schuift. Native scroll-snap, geen bibliotheek. Boven de rij
   een schaal met streepjes waarop een accentblokje meeloopt,
   zoals het wieltje waarmee je een foto rechttrekt.
   Zonder JavaScript blijft het een gewone scrollbare rij.
   ============================================================ */
.strook { position: relative; }

/* --- de schaal erboven --- */
.strook-kop {
  display: flex; align-items: flex-end; gap: var(--r3);
  margin-bottom: var(--r3);
}
.strook-schaal { position: relative; flex: 1; height: 16px; }
.strook-streepjes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background-image: repeating-linear-gradient(90deg,
    var(--line-l) 0 1px, transparent 1px 10px);
  opacity: 0.9;
}
.strook-blok {
  position: absolute; bottom: -2px; left: 0;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--steel);
  transform: translateX(var(--strook-x, 0px));
  transition: transform .15s linear;
}
.donker .strook-streepjes, .on-dark .strook-streepjes {
  background-image: repeating-linear-gradient(90deg, var(--line-d2) 0 1px, transparent 1px 10px);
}

/* --- de pijlknoppen, alleen op desktop en alleen met JavaScript --- */
.strook-pijlen { display: none; gap: 8px; flex: none; }
.strook--js .strook-pijlen { display: flex; }
.strook-pijl {
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-l2);
  border-radius: var(--rond-knop); color: var(--tx-dark);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.strook-pijl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.strook-pijl:hover { background: var(--tx-dark); border-color: var(--tx-dark); color: var(--tx-light); }
.strook-pijl[disabled] { opacity: 0.35; cursor: default; }
.strook-pijl[disabled]:hover { background: transparent; border-color: var(--line-l2); color: var(--tx-dark); }
.donker .strook-pijl, .on-dark .strook-pijl { border-color: var(--line-d2); color: var(--tx-light); }
.donker .strook-pijl:hover, .on-dark .strook-pijl:hover { background: var(--tx-light); border-color: var(--tx-light); color: var(--tx-dark); }
.donker .strook-pijl[disabled]:hover, .on-dark .strook-pijl[disabled]:hover { background: transparent; border-color: var(--line-d2); color: var(--tx-light); }
@media (max-width: 900px) { .strook--js .strook-pijlen { display: none; } }

/* --- de rij zelf --- */
.strook-rij {
  list-style: none; margin: 0; padding: 0 0 2px;
  display: flex; gap: var(--kolom);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* Past alles in beeld, dan is er niets te schuiven: geen schaal, geen pijlen
   en geen uitloop naar rechts. Pas als er meer is, komt de bediening erbij. */
.strook-kop { display: none; }
.strook--schuift .strook-kop { display: flex; }
.strook--schuift .strook-rij {
  /* De rij loopt rechts door tot buiten het raster, zodat je ziet dat er meer is. */
  margin-right: calc(-1 * (50vw - 50%));
  padding-right: max(var(--pad-x), calc(50vw - 50%));
}
.strook-rij::-webkit-scrollbar { display: none; }
.strook-rij:focus-visible { outline: 2px solid var(--steel-lt); outline-offset: 4px; }
.strook--sleept .strook-rij { cursor: grabbing; scroll-snap-type: none; }
.strook--js .strook-rij { cursor: grab; }

.strook-kaart {
  flex: 0 0 320px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--rond);
  box-shadow: var(--sch-rust);
  min-height: 100%;
}
.strook-kaart .h3 { margin: 0; }
.strook-kaart .body { margin: 0; }
.strook-nr {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 44px; font-weight: 600; line-height: 1;
  color: var(--steel);
}

/* Kaartkleur andersom dan de sectie: licht op donker, donker op licht. */
.strook-kaart {
  background: var(--d3); border: 1px solid var(--line-d);
  color: var(--tx-light); box-shadow: var(--sch-rust), var(--glans-d);
}
.strook-kaart .h3 { color: var(--tx-light); }
.strook-kaart .body { color: var(--tx-faint); }
.strook-kaart .strook-nr { color: var(--accent-tekst-d); }
.donker .strook-kaart, .on-dark .strook-kaart {
  background: var(--l3); border-color: var(--line-l);
  color: var(--tx-dark); box-shadow: var(--sch-rust), var(--glans-l);
}
.donker .strook-kaart .h3, .on-dark .strook-kaart .h3 { color: var(--tx-dark); }
.donker .strook-kaart .body, .on-dark .strook-kaart .body { color: var(--tx-body); }
.donker .strook-kaart .strook-nr, .on-dark .strook-kaart .strook-nr { color: var(--accent-tekst-l); }

@media (max-width: 900px) {
  .strook-kaart { flex-basis: 80%; }
  .strook-kop { margin-bottom: var(--r2); }
}
@media (prefers-reduced-motion: reduce) {
  .strook-blok, .strook-pijl { transition: none; }
  .strook-rij { scroll-behavior: auto; }
}

/* De pijlknoppen zijn alleen een icoon, dus de rand moet het bedieningselement
   herkenbaar maken. De gewone lijnkleur haalt daar maar 1,4:1. */
.strook-pijl { border-color: #7F7869; }
.strook-pijl[disabled]:hover { border-color: #7F7869; }
.donker .strook-pijl, .on-dark .strook-pijl { border-color: #7E848A; }
.donker .strook-pijl[disabled]:hover, .on-dark .strook-pijl[disabled]:hover { border-color: #7E848A; }