/* =====================================================================
   BE PURE - by Nadia Veenhof
   Hoofdstylesheet (design-systeem)
   ---------------------------------------------------------------------
   Kleuren staan vast in de variabelen hieronder. Wil je later iets
   aanpassen (bv. een tekst groter), zoek dan de juiste regel op.
   Alle kleuren, lettertypes en afstanden worden hier centraal geregeld.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS (kleuren, fonts, maten) ---------- */
:root {
  /* Vaste merkkleuren */
  --kleur-achtergrond: #F8E5DF;   /* zacht oud-roze - exact de achtergrond van het logo */
  --kleur-tekst:       #8C7B6B;   /* taupe */
  --kleur-goud:        #B0894F;   /* accent - heel spaarzaam gebruiken */

  /* Afgeleide tinten (zachte variaties van bovenstaande, voor rust) */
  --kleur-creme:       #FAF1EC;   /* lichte créme voor afwisseling/kaarten */
  --kleur-roze-licht:  #F2DAD2;   /* iets dieper roze voor afwisselende secties */
  --kleur-taupe-diep:  #6E5F52;   /* dieper taupe voor koppen/contrast */
  --kleur-lijn:        rgba(140, 123, 107, 0.18); /* fijne scheidingslijn */

  /* Typografie */
  --font-serif: "RechtStreepje", "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:  "RechtStreepje", "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Ritme & layout */
  --max-breedte: 1180px;
  --pad-zijkant: clamp(1.25rem, 5vw, 4rem);
  --sectie-ruimte: clamp(4rem, 9vw, 8rem);
  --radius: 2px;
}

/* Recht koppelteken overal.
   Cormorant tekent het '-' schuin; daarom halen we ALLEEN het
   koppelteken (teken U+002D) uit een schreefloos lettertype.
   Alle andere letters blijven gewoon Cormorant/Jost. */
@font-face {
  font-family: "RechtStreepje";
  src: local("Times New Roman"), local("Georgia"), local("Cambria"), local("Segoe UI");
  unicode-range: U+002D;
}

/* Lokaal gehoste lettertypen (privacyvriendelijk; vervangt Google Fonts) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/cormorant-garamond-v21-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-v21-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-v21-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-v21-latin-500italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-v20-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-v20-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-v20-latin-500.woff2") format("woff2"); }

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ---------- 3. TYPOGRAFIE ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--kleur-taupe-diep);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.2em; max-width: 60ch; }

/* Klein bovenschrift in spatie-kapitalen (chic label) */
.overschrift {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--kleur-goud);
  margin: 0 0 1.4rem;
  display: inline-block;
}

.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--kleur-tekst);
  max-width: 34ch;
}

/* ---------- 4. MERKNAAM / LOGO (typografisch) ---------- */
.merk { position: relative; display: inline-block; text-align: center; line-height: 1; }
.merk__naam, .merk__sub, .merk__tag { position: relative; z-index: 1; }
.merk__naam {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--kleur-taupe-diep);
  letter-spacing: 0.02em;
  display: block;
}
.merk__sub {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  color: var(--kleur-tekst);
  display: block;
  margin-top: 0.25em;
}
.merk__tag {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--kleur-goud);
  display: block;
  margin-top: 0.8em;
}
/* Strak, recht koppelteken in de merknaam "Be-Pure".
   Het echte "-" blijft als (onzichtbare) tekst staan; het lijntje
   wordt er netjes overheen getekend, zodat het nooit schuin staat. */
.kop { position: relative; color: transparent; }
.kop::after {
  content: "";
  position: absolute;
  left: 13%; right: 13%;
  top: 52%;
  height: 0.03em;
  min-height: 1px;
  background: currentColor;
  color: var(--kleur-taupe-diep);
  transform: translateY(-50%);
}

/* Gouden lijntje met stip in het midden (het "glimmertje" uit het logo) */
.merk__streep {
  position: relative;
  width: 150px; height: 1px;
  background: var(--kleur-goud);
  margin: 1em auto;
  border: 0;
}
.merk__streep::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kleur-goud);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px var(--kleur-achtergrond);
}
/* Op créme/roze secties de stip-halo meekleuren */
.sectie--creme .merk__streep::after { box-shadow: 0 0 0 5px var(--kleur-creme); }
.sectie--roze  .merk__streep::after { box-shadow: 0 0 0 5px var(--kleur-roze-licht); }

/* ---------- 5. LAYOUT-HULPMIDDELEN ---------- */
/* Alleen voor schermlezers (visueel verborgen, wel voorgelezen) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: var(--max-breedte); margin: 0 auto; padding: 0 var(--pad-zijkant); }
.wrap--smal { max-width: 760px; }

section { padding: var(--sectie-ruimte) 0; }
.sectie--creme { background: #ffffff; }       /* wit, sluit aan op de witte balk */
.sectie--roze  { background: var(--kleur-roze-licht); }
.sectie--wit   { background: #ffffff; }

.tekst-midden { text-align: center; }
.tekst-midden .lead,
.tekst-midden p { margin-left: auto; margin-right: auto; }

/* Twee kolommen: beeld + tekst */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--omgekeerd .split__beeld { order: 2; }

/* ---------- 6. KNOPPEN ---------- */
.knop {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--kleur-taupe-diep);
  color: var(--kleur-taupe-diep);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .45s ease, color .45s ease, border-color .45s ease;
}
.knop:hover { background: var(--kleur-taupe-diep); color: var(--kleur-creme); }

.knop--goud { border-color: var(--kleur-goud); color: var(--kleur-goud); }
.knop--goud:hover { background: var(--kleur-goud); color: var(--kleur-creme); border-color: var(--kleur-goud); }

/* Tekstlink met fijn goud lijntje */
.link-fijn {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kleur-tekst);
  border-bottom: 1px solid var(--kleur-goud);
  padding-bottom: 3px;
  transition: color .35s ease;
}
.link-fijn:hover { color: var(--kleur-goud); }

/* ---------- 7. BEELD-PLACEHOLDERS ----------
   Vervang deze blokken later door echte foto's.
   Zie LEESMIJ.md voor uitleg. */
.beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--kleur-roze-licht), var(--kleur-creme));
  border: 1px solid var(--kleur-lijn);
}
.beeld::before { /* houdt de verhouding vast */
  content: "";
  display: block;
  padding-top: var(--ratio, 125%);
}
.beeld__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--kleur-tekst);
}
.beeld__label .icoon {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--kleur-goud);
  opacity: 0.8;
}
.beeld__label .titel {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.beeld__label .hint {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
  font-style: italic;
}
.beeld--breed { --ratio: 70%; }
.beeld--vierkant { --ratio: 100%; }
.beeld--portret { --ratio: 134%; }

/* Volledige-breedte fotoband - veel ruimte voor sfeerbeeld */
.fotoband { padding: 0; }
.fotoband .beeld { border-radius: 0; --ratio: 40%; }
@media (max-width: 820px) { .fotoband .beeld { --ratio: 80%; } }

/* Wanneer er straks een echte foto in zit: <div class="beeld"><img ...></div> */
.beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 8. NAVIGATIE ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease;
}
/* Zodra je scrolt: witte balk met donker logo */
.site-header.gescrold {
  background: #ffffff;
  border-bottom-color: var(--kleur-lijn);
}
/* Origineel logo links in de balk (altijd zichtbaar) */
.nav__merk-foto { opacity: 1; }
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem var(--pad-zijkant);
  max-width: var(--max-breedte);
  margin: 0 auto;
}
.nav__zij { display: flex; list-style: none; margin: 0; padding: 0; gap: clamp(1.4rem, 3vw, 2.8rem); }
.nav__zij--links  { justify-content: center; }
.nav__zij--rechts { justify-content: center; }
.nav__merk { line-height: 1; justify-self: center; }
.nav__merk .n1 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--kleur-taupe-diep);
  letter-spacing: 0.03em;
}
.nav__merk .n2 {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--kleur-tekst);
  display: block;
  margin-top: -2px;
}
.nav__links {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a, .nav__zij a {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.site-header.gescrold .nav__links a,
.site-header.gescrold .nav__zij a { color: var(--kleur-tekst); }
.nav__links a:hover,
.nav__zij a:hover {
  color: var(--kleur-goud);
  border-color: var(--kleur-goud);
}
.nav__links a[aria-current="page"],
.nav__zij a[aria-current="page"] { border-color: var(--kleur-goud); }
.nav__toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 0.4rem; width: 40px; height: 40px;
}
.nav__toggle span {
  display: block; width: 24px; height: 1.5px;
  background: #ffffff;
  margin: 5px auto; transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
.site-header.gescrold .nav__toggle span { background: var(--kleur-taupe-diep); }
.nav__toggle.actief span { background: var(--kleur-taupe-diep); }

/* ---------- 9. HERO ---------- */
.hero {
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sectie-ruimte) var(--pad-zijkant);
  position: relative;
}
.hero--pagina { min-height: 52vh; }
/* Watercolor-veeg achter de merknaam (zoals in het logo):
   een zachte lichtroze wolk + een donkerder rozige diagonale streek.
   Zit in .merk zodat hij netjes achter "Be-Pure" gecentreerd staat. */
.hero__brush {
  position: absolute;
  z-index: 0;
  left: 50%; top: 34%;
  width: 124%; height: 132%;
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
  background:
    radial-gradient(56% 46% at 52% 48%,
      rgba(216,172,162,0.55), rgba(216,172,162,0) 72%),
    radial-gradient(38% 28% at 66% 36%,
      rgba(189,137,131,0.42), rgba(189,137,131,0) 70%),
    linear-gradient(116deg,
      rgba(189,137,131,0) 40%, rgba(189,137,131,0.34) 50%, rgba(189,137,131,0) 61%);
  filter: blur(5px);
}
.hero > * { position: relative; z-index: 1; }
/* Logo als afbeelding (wanneer de originele PNG geplaatst is) */
.logo-foto { width: min(540px, 88%); height: auto; margin: 0 auto; }
.nav__merk-foto { display: block; height: 34px; width: auto; }
.footer-logo { display: block; width: 220px; height: auto; margin: 0 auto 1.4rem; }
.site-footer .logo-foto { width: 240px; }
@media (max-width: 820px) { .nav__merk-foto { height: 28px; } }
/* Terugval naar de getypte versie als het logobestand er nog niet is */
.merk-fallback { position: relative; display: inline-block; }
.hero .merk__naam { font-size: clamp(3.2rem, 11vw, 7rem); }
.hero .merk__sub  { font-size: clamp(1.2rem, 3.4vw, 2rem); }
.hero__claim {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  max-width: 26ch;
  margin: 1.6rem auto 2.4rem;
  color: var(--kleur-tekst);
}

/* ---------- 10. KAARTEN / RASTER ---------- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
.kaart { display: flex; flex-direction: column; gap: 1rem; }
.kaart h3 { margin-bottom: 0.2rem; }
.kaart p { margin-bottom: 0.6rem; }

/* ---------- 11. HIGHLIGHT-BLOK (bv. Eco Head) ---------- */
.highlight {
  border: 1px solid var(--kleur-goud);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 4rem);
  background: #ffffff;
  position: relative;
}
.highlight .overschrift { color: var(--kleur-goud); }

/* Lijst met fijne gouden markers */
.lijst { list-style: none; padding: 0; margin: 1rem 0; }
.lijst li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}
.lijst li::before {
  content: "";
  position: absolute; left: 0; top: 0.7em;
  width: 7px; height: 7px;
  border: 1px solid var(--kleur-goud);
  transform: rotate(45deg);
}

/* ---------- 12. CONTACT / FORMULIER ---------- */
.melding {
  border-left: 2px solid var(--kleur-goud);
  background: var(--kleur-creme);
  padding: 1.2rem 1.5rem;
  font-style: italic;
  margin-bottom: 2.4rem;
  border-radius: var(--radius);
}
.form { display: grid; gap: 1.4rem; }
.form__rij { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }
.veld { display: flex; flex-direction: column; gap: 0.45rem; }
.veld label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kleur-tekst);
}
.veld input, .veld textarea, .veld select {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--kleur-taupe-diep);
  background: var(--kleur-creme);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  transition: border-color .3s ease;
}
.veld input:focus, .veld textarea:focus, .veld select:focus {
  outline: none;
  border-color: var(--kleur-goud);
}
.veld textarea { resize: vertical; min-height: 130px; }

.form-status {
  display: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  margin-top: 0.4rem;
}
.form-status.is-ok   { background: var(--kleur-creme); border-left: 2px solid var(--kleur-goud); color: var(--kleur-taupe-diep); }
.form-status.is-fout { background: var(--kleur-roze-licht); border-left: 2px solid #b5564c; color: #8a4038; }

.contact-gegevens { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.contact-gegevens .label {
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--kleur-goud); display: block; margin-bottom: 0.2rem;
}
.contact-gegevens a, .contact-gegevens span {
  font-family: var(--font-serif); font-size: 1.4rem; color: var(--kleur-taupe-diep);
}

/* ---------- 13. FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--kleur-lijn);
  padding: clamp(3rem, 6vw, 5rem) 0 2.5rem;
  text-align: center;
}
.site-footer .merk { margin-bottom: 1.6rem; }
.site-footer .merk__naam { font-size: 2rem; }
.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.4rem 2rem; list-style: none; padding: 0; margin: 1.6rem 0;
}
.footer__links a {
  font-family: var(--font-sans); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--kleur-tekst);
  transition: color .3s ease;
}
.footer__links a:hover { color: var(--kleur-goud); }
.footer__klein { font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.7; max-width: none; }
.footer__klein a { border-bottom: 1px solid var(--kleur-goud); }

/* ---------- 14. ANIMATIES (zachte fade-in bij scrollen) ---------- */
/* Alleen verbergen wanneer JavaScript actief is (.js op <html>).
   Zonder JS blijft alles gewoon zichtbaar - de pagina is dus nooit leeg. */
.js .fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.js .fade.in-beeld { opacity: 1; transform: none; }
.fade.vertraag-1 { transition-delay: .12s; }
.fade.vertraag-2 { transition-delay: .24s; }
.fade.vertraag-3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .js .fade { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 15. RESPONSIVE (mobiel-first aanpassingen) ---------- */
@media (max-width: 820px) {
  /* Hamburger staat BOVEN het overlay-menu (z-index), zodat je 'm altijd
     kunt aantikken om te sluiten, ook nadat je een pagina hebt geopend. */
  .nav__toggle { display: block; position: relative; z-index: 70; }
  .nav { display: flex; justify-content: space-between; }
  .nav__zij { display: none; }
  .nav__merk { justify-self: auto; }

  /* Menu als volledig-scherm overlay (geen smalle lade die de knop bedekt) */
  .nav__links {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 65;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    background: #ffffff;
    padding: 2rem;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
  }
  .nav__links.open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--kleur-taupe-diep);
    border: 0;
    padding: 0.3rem 0;
  }
  .nav__links a[aria-current="page"] { color: var(--kleur-goud); border: 0; }

  .nav__toggle.actief span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle.actief span:nth-child(2) { opacity: 0; }
  .nav__toggle.actief span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--omgekeerd .split__beeld { order: 0; }
  .form__rij { grid-template-columns: 1fr; }
}

/* Op desktop is het overlay-menu altijd zichtbaar als gewone rij */
@media (min-width: 821px) {
  .nav__links { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* =====================================================================
   16. EDITORIAL-COMPONENTEN (rijkere structuur, met foto's)
   ===================================================================== */

/* ---- Foto-hero met overlay (volledig scherm beeld + tekst erover) ---- */
.hero-foto {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: var(--sectie-ruimte) var(--pad-zijkant);
}
.hero-foto--kort { min-height: 100vh; min-height: 100dvh; }
.hero-foto__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(110,95,82,0.30), rgba(110,95,82,0.45));
}
.hero-foto__in { position: relative; z-index: 2; max-width: 860px; }
.hero-foto__in h1,
.hero-foto__in h2 { color: #fff; }
/* Koppelteken-balkje in hero-koppen wit (bv. "make-up") i.p.v. taupe */
.hero-foto__in .kop::after { color: #fff; }
.hero-foto__in .overschrift { color: #fff; opacity: 0.92; }
.hero-foto__in .hero__claim { color: #fff; }
.hero-foto__logo { width: min(360px, 72%); height: auto; margin: 0 auto 1.6rem; }
.hero-foto .knop { border-color: #fff; color: #fff; }
.hero-foto .knop:hover { background: #fff; color: var(--kleur-taupe-diep); border-color: #fff; }
.hero-foto__streep { width: 130px; height: 1px; background: rgba(255,255,255,0.7); margin: 1.4rem auto; border: 0; }

/* ---- Diensten-teasers (kaart met foto) ---- */
.diensten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.6rem, 4vw, 2.6rem); }
.dienst { display: flex; flex-direction: column; }
.dienst__beeld { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; }
.dienst__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.dienst:hover .dienst__beeld img { transform: scale(1.05); }
.dienst h3 { margin: 1.2rem 0 0.4rem; }
.dienst p { margin-bottom: 0.7rem; }

/* ---- Portfolio-galerij ---- */
.galerij { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; }
.galerij__item { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius); }
.galerij__item--hoog { aspect-ratio: 3 / 4; }
.galerij__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.galerij__item:hover img { transform: scale(1.06); }

/* ---- Ervaringen / testimonials ---- */
.ervaringen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.6rem, 4vw, 3rem); }
.citaat { text-align: center; }
.citaat__tekst {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  color: var(--kleur-taupe-diep);
  margin: 0 0 1rem;
}
.citaat__naam {
  font-family: var(--font-sans);
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--kleur-goud);
}
.citaat__ster { color: var(--kleur-goud); letter-spacing: 0.3em; font-size: 0.8rem; margin-bottom: 0.8rem; }

/* ---- Grote citaat-band over een foto ---- */
.citaat-band {
  position: relative; overflow: hidden;
  text-align: center; color: #fff;
  padding: clamp(4rem, 10vw, 8rem) var(--pad-zijkant);
}
.citaat-band__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.citaat-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(110,95,82,0.5); }
.citaat-band__in { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.citaat-band__in p { color: #fff; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.5; margin: 0 auto 1rem; max-width: none; }
.citaat-band__in .citaat__naam { color: #fff; opacity: 0.9; }

/* ---- CTA-band (volledige breedte, accent) ---- */
.cta-band { background: var(--kleur-roze-licht); text-align: center; }
.cta-band .overschrift { color: var(--kleur-goud); }

/* ---- Logo-merkstrip (waarden i.p.v. merken) ---- */
.waarden { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.4rem, 4vw, 2.5rem); text-align: center; }
.waarde__icoon { font-family: var(--font-serif); font-size: 1.6rem; color: var(--kleur-goud); display: block; margin-bottom: 0.4rem; }



/* =====================================================================
   17. DIASHOW, INSTAGRAM-FEED & SOCIALE ICONEN
   ===================================================================== */

/* Bewegende diashow (auto-carousel) */
.dia { overflow: hidden; }
.dia__spoor { display: flex; gap: 0.9rem; padding: 0 var(--pad-zijkant); will-change: transform; }
.dia__item { flex: 0 0 auto; width: clamp(210px, 25vw, 320px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); }
.dia__item img { width: 100%; height: 100%; object-fit: cover; }

/* Instagram-feed */
.insta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 0.8rem; }
.insta-grid a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.6,.2,1), opacity .4s; }
.insta-grid a:hover img { transform: scale(1.06); opacity: 0.85; }
.insta-grid a::after { content: ""; position: absolute; inset: 0; background: rgba(110,95,82,0); transition: background .4s; }
.insta-grid a:hover::after { background: rgba(110,95,82,0.12); }

/* Sociale iconen in de footer */
.sociaal { display: flex; justify-content: center; gap: 1.5rem; margin: 0.2rem 0 1.6rem; }
.sociaal a { color: var(--kleur-tekst); transition: color .3s ease; line-height: 0; }
.sociaal a:hover { color: var(--kleur-goud); }
.sociaal svg { width: 22px; height: 22px; display: block; }

/* Klikbare pijlen onder de diashow */
.dia__nav { display: flex; justify-content: center; gap: 3cm; margin-top: 2rem; }
.dia__knop {
  width: 48px; height: 48px;
  border: 1px solid var(--kleur-taupe-diep);
  background: transparent; color: var(--kleur-taupe-diep);
  border-radius: 50%; cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.dia__knop:hover { background: var(--kleur-taupe-diep); color: #fff; }


/* ---- Instagram-placeholders (Nadia plaatst hier later haar eigen posts) ---- */
.insta-leeg { position: relative; aspect-ratio: 1 / 1; background: var(--kleur-creme); border: 1px solid var(--kleur-lijn); }
.insta-leeg::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.6px solid var(--kleur-taupe-diep); border-radius: 8px; opacity: 0.18; }
.insta-leeg::after  { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 1.6px solid var(--kleur-taupe-diep); border-radius: 50%; opacity: 0.18; }

/* ---- Klikbare dienst-foto's op de homepage ---- */
.dienst__link { display: block; }
.dienst__beeld { overflow: hidden; }
.dienst__beeld img { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.dienst__link:hover .dienst__beeld img,
.dienst__link:focus-visible .dienst__beeld img { transform: scale(1.04); }

/* ---- Portfolio: met de vinger swipen op mobiel ---- */
.dia { touch-action: pan-y; }


/* ---- Taalwisselaar NL / EN ---- */
.taal-switch { position: absolute; top: 1.5rem; right: var(--pad-zijkant); display: flex; align-items: center; gap: .45rem; z-index: 60; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .14em; }
.taal-switch a { color: #fff; opacity: .72; transition: opacity .3s ease, color .3s ease; }
.taal-switch span { color: #fff; opacity: .45; }
.taal-switch a:hover { opacity: 1; color: var(--kleur-goud); }
.taal-switch a.taal-actief { opacity: 1; color: var(--kleur-goud); }
.site-header.gescrold .taal-switch a { color: var(--kleur-tekst); }
.site-header.gescrold .taal-switch span { color: var(--kleur-tekst); }
.site-header.gescrold .taal-switch a.taal-actief { color: var(--kleur-goud); }
@media (max-width: 820px) { .taal-switch { display: none; } }
/* In het mobiele menu */
.taal-menu { list-style: none; display: flex; gap: 1rem; justify-content: center; margin-top: 1.6rem; }
.taal-menu a { font-family: var(--font-sans) !important; font-size: .9rem !important; letter-spacing: .14em !important; color: var(--kleur-tekst) !important; }
.taal-menu a.taal-actief { color: var(--kleur-goud) !important; }

/* Hero met alleen de foto (homepage): geen tekstoverlay, lichte top-gradient voor de navigatie */
.hero-foto--schoon::after { background: linear-gradient(180deg, rgba(110,95,82,0.45) 0%, rgba(110,95,82,0.14) 20%, rgba(110,95,82,0) 42%); }

/* ---- Content-pagina kop (bv. privacy): donkere band zodat de transparante nav leesbaar blijft ---- */
.kop-band { background: var(--kleur-taupe-diep); color: #fff; text-align: center; padding: 8rem 0 3rem; }

/* Hero-placeholder: donkere plek waar straks een echte hero-foto komt */
.hero-foto--plaats { background: linear-gradient(135deg, var(--kleur-taupe-diep), #5c4f45); }
.hero-plaats-hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.6rem; text-align: center; color: #fff; opacity: 0.55; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; }

/* Tekstselectie in merk-roze in plaats van standaard blauw */
::selection { background: #F6DBD4; color: var(--kleur-taupe-diep); }
::-moz-selection { background: #F6DBD4; color: var(--kleur-taupe-diep); }

/* Ankers in privacybeleid niet onder de sticky nav */
.privacy-tekst h2 { scroll-margin-top: 90px; }
.inhoud a { color: var(--kleur-taupe-diep); }
.kop-band h1 { color: #fff; margin: 0; }
.kop-band .overschrift { color: #fff; opacity: .85; }
.privacy-tekst { text-align: left; }
.privacy-tekst h2 { margin-top: 2.4rem; }
.privacy-tekst p { max-width: none; }
.privacy-tekst a { color: var(--kleur-taupe-diep); border-bottom: 1px solid var(--kleur-goud); }

/* Naam over de home-hero (subtiel maar prominent) */
.hero-naam { position: relative; z-index: 2; text-align: center; color: #fff; text-shadow: 0 2px 20px rgba(50,42,36,.55), 0 1px 3px rgba(50,42,36,.4); }
.hero-naam__naam { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 6.5vw, 4.6rem); letter-spacing: 0.02em; line-height: 1.05; }
.hero-naam__sub { display: block; font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.8rem; margin-top: 1.1rem; opacity: .95; }

/* Showreel-video (Werk/Portfolio) + fotocredit */
.video-embed { position: relative; aspect-ratio: 16 / 9; max-width: 900px; margin: 2rem auto 0; background: var(--kleur-taupe-diep); border-radius: var(--radius); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__wacht { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: #fff; opacity: .85; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.galerij-credit { text-align: center; font-size: .8rem; letter-spacing: .1em; color: var(--kleur-tekst); margin-top: 1.4rem; font-style: italic; }

/* Nav-logo: wit over de foto (transparante balk), bruin zodra de balk wit is bij scrollen */
.nav__merk-foto--donker { display: none; }
.nav__merk-foto--wit { display: block; }
.site-header.gescrold .nav__merk-foto--wit { display: none; }
.site-header.gescrold .nav__merk-foto--donker { display: block; }

/* Showreel klik-om-af-te-spelen (facade) */
.video-embed { cursor: pointer; }
.video-embed--link { display: block; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__facade { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: background .3s ease; }
.video-embed__facade::after { content: ""; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.92); transition: transform .3s ease; }
.video-embed__facade::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%,-50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--kleur-taupe-diep); z-index: 1; }
.video-embed:hover .video-embed__facade::after { transform: scale(1.08); }
.video-embed__label { position: absolute; bottom: 1.1rem; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; opacity: .9; }

/* Portfolio-grid met landschapsverhouding (minder uitsnede) */
.galerij--breed .galerij__item { aspect-ratio: 3 / 2; }

/* Slideshow (filmstrip, gelijke hoogte, natuurlijke breedte - geen uitsnede) */
.slideshow { display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0 var(--pad-zijkant); scrollbar-width: none; }
.slideshow::-webkit-scrollbar { display: none; }
.slideshow__item { flex: 0 0 auto; height: clamp(240px, 44vh, 460px); scroll-snap-align: center; overflow: hidden; border-radius: var(--radius); }
.slideshow__item img { height: 100%; width: auto; display: block; }

/* Marquee-slideshow (oneindige loop) */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 0.9rem; width: max-content; will-change: transform; }

/* Lightbox: foto vergroten bij klik */
.galerij__item img, .slideshow__item img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(40,33,28,0.92); cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.45); cursor: default; }
.lightbox__sluit { position: absolute; top: 1rem; right: 1.4rem; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: .85; }
.lightbox__sluit:hover { opacity: 1; }

/* Homepage: naamblok lager, zodat het onder het gezicht op de hero-foto valt */
.hero-foto--naam-laag { align-items: flex-end; }
.hero-foto--naam-laag .hero-naam { padding-bottom: clamp(3rem, 11vh, 9rem); }