:root {
  --inkt:       #3A2B28;
  --inkt-zacht: #6A5854;
  --grijs:      #F2F0EE;
  --grijs-2:    #E8E5E2;
  --grijs-lijn: #DEDAD6;
  --roze:       #FBEAE9;
  --roze-2:     #F5D9D8;
  --roze-diep:  #9C4F4C;
  --wit:        #FFFFFF;

  --kopfont:  "Figtree";  /* koppen: schreefloos, jouw keuze */
  --tekstfont:"Figtree";             /* lopende tekst blijft Figtree */
  --kopdikte: 700;
  --kopstrak: -0.03em;
  --kopschaal: 0.9;      /* alle koppen groter of kleiner */
  --tekstschaal: 1;    /* alle lopende tekst groter of kleiner */
  --zicht: 3.3;        /* kaarten in beeld in de carrousel (3 heel + een stuk) */
  --zicht-mobiel: 1.15;

  --e: 8px;
  --s1: calc(var(--e) * 1);
  --s2: calc(var(--e) * 2);
  --s3: calc(var(--e) * 3);
  --s4: calc(var(--e) * 4);
  --s5: calc(var(--e) * 5);
  --s6: calc(var(--e) * 6);
  --s7: calc(var(--e) * 8);
  --s8: calc(var(--e) * 10);
  --s9: calc(var(--e) * 12);
  --s10: calc(var(--e) * 16);

  --rand: 24px;
  --max: 1440px;
  --balk: 72px;
  --rondin: 12px;     /* ronding fotovlakken */
  --knoprond: 999px;  /* ronding knoppen — 999px is een pil */
  --sluier: 0.7;     /* hoe sterk de hero-foto wordt afgedekt achter de tekst */
  --duohoogte: 760px; /* minimumhoogte van de blokken met foto naast tekst */
  --duohoogte-kort: 660px; /* idem, voor het citaatblok en het grijsblok */
  --herohoog: 660px;  /* hoogte van de hero op de homepagina */
  --kophoog: 440px;   /* hoogte van de kop op de andere pagina's */
  --soepel: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 900px) { :root { --rand: 48px; --balk: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--grijs);
  color: var(--inkt);
  font-family: var(--tekstfont), -apple-system, "Segoe UI", sans-serif;
  font-size: calc(16px * var(--tekstschaal));
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--kopfont), -apple-system, "Segoe UI", sans-serif;
  font-weight: var(--kopdikte);
  letter-spacing: var(--kopstrak);
  line-height: 1.03;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.vak { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }

.laag { padding-block: var(--s10); }
.laag--kort { padding-block: var(--s7); }
.laag--grijs2 { background: var(--grijs-2); }
.laag--wit { background: var(--wit); }
.laag--roze { background: var(--roze); }

@media (max-width: 800px) { .laag { padding-block: var(--s8); } .laag--kort { padding-block: var(--s7); } }

.label {
  font-size: calc(12px * var(--tekstschaal)); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--roze-diep); margin: 0 0 var(--s3);
}

.t-xxl { font-size: calc(clamp(44px, 6.4vw, 88px) * var(--kopschaal)); }
.t-xl  { font-size: calc(clamp(36px, 4.4vw, 56px) * var(--kopschaal)); }
.t-lg  { font-size: calc(clamp(24px, 2.4vw, 32px) * var(--kopschaal)); letter-spacing: -.02em; }
.t-md  { font-size: calc(20px * var(--kopschaal)); letter-spacing: -.015em; }

.intro { font-size: calc(16px * var(--tekstschaal)); line-height: 1.65; color: var(--inkt-zacht); max-width: 54ch; }
.tekst p { font-size: calc(16px * var(--tekstschaal)); line-height: 1.7; color: var(--inkt-zacht); max-width: 60ch; }
.tekst p + p { margin-top: var(--s2); }
.tekst strong { color: var(--inkt); font-weight: 600; }

.kop { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s3) var(--s7); align-items: end; margin-bottom: var(--s7); }
@media (max-width: 860px) { .kop { grid-template-columns: 1fr; align-items: start; margin-bottom: var(--s6); } }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s4);
  border: 1.5px solid transparent; border-radius: var(--knoprond);
  font-family: var(--tekstfont), sans-serif; font-size: calc(15px * var(--tekstschaal)); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--soepel), color .2s var(--soepel), border-color .2s var(--soepel);
}
.knop--vol { background: var(--inkt); color: var(--wit); }
.knop--vol:hover { filter: brightness(.85); }
.knop--wit { background: var(--wit); color: var(--inkt); }
.knop--wit:hover { background: var(--roze); }
.knop--lijn { border-color: var(--inkt); color: var(--inkt); }
.knop--lijn:hover { background: var(--inkt); color: var(--wit); }

.pijl { display: inline-flex; align-items: center; gap: var(--s1); font-size: 15px; font-weight: 600; text-decoration: none; }
.pijl__rond { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--grijs-2); transition: transform .2s var(--soepel), background-color .2s var(--soepel); }
.pijl__rond svg { width: 14px; height: 14px; }
.pijl:hover .pijl__rond { background: var(--roze-2); transform: translateX(4px); }

a:focus-visible, button:focus-visible { outline: 3px solid var(--roze-diep); outline-offset: 3px; }

/* Loopbalk */
.loper { background: var(--roze); overflow: hidden; padding-block: var(--s2); }
.loper__spoor { display: flex; width: max-content; animation: loop 46s linear infinite; }
.loper ul { display: flex; align-items: center; }
.loper li { display: flex; align-items: center; gap: var(--s5); padding-inline: var(--s3); font-size: calc(13px * var(--tekstschaal)); font-weight: 500; white-space: nowrap; }
.loper li::after { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--roze-diep); opacity: .5; }
@keyframes loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .loper__spoor { animation: none; } }

/* Balk */
.balk { position: sticky; top: 0; z-index: 50; background: rgba(242,240,238,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--grijs-lijn); }
.balk__in { display: flex; align-items: center; gap: var(--s5); min-height: var(--balk); }
.merk { font-family: var(--kopfont), sans-serif; font-size: 1.375rem; font-weight: 800; letter-spacing: .02em; text-decoration: none; flex-shrink: 0; }
.menu { display: flex; align-items: center; gap: var(--s6); margin-left: auto; }
.menu__lijst { display: flex; align-items: center; gap: var(--s4); }
.menu__lijst a { position: relative; text-decoration: none; font-size: calc(15px * var(--tekstschaal)); font-weight: 500; padding-block: var(--s1); white-space: nowrap; }
.menu__lijst a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--roze-diep); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--soepel); }
.menu__lijst a:hover::after, .menu__lijst a[aria-current="page"]::after { transform: scaleX(1); }
.balk .knop { min-height: 44px; padding-inline: var(--s3); font-size: calc(14px * var(--tekstschaal)); }
.hamburger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--inkt); }
.hamburger svg { width: 24px; height: 24px; }

/* Zonder dit geeft mobiel een blauwe flits bij elke tik. */
a, button { -webkit-tap-highlight-color: transparent; }

@media (max-width: 1000px) {
  .hamburger { display: inline-flex; }
  .menu { position: fixed; left: 0; right: 0; top: var(--balk); height: calc(100dvh - var(--balk)); margin: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--s6); padding: var(--s6) var(--rand); background: var(--grijs); overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--soepel); }
  .menu.open { transform: translateX(0); }
  .menu__lijst { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .menu__lijst a { font-family: var(--kopfont), sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
}

/* Fotovlakken */
.foto {
  position: relative; overflow: hidden; border-radius: var(--rondin);
  background-color: var(--grijs-2);
  background-image: linear-gradient(145deg, var(--grijs-2) 0%, #EFE9E7 55%, var(--roze) 100%);
  background-size: cover; background-position: center;
}
.foto--roze { background-image: linear-gradient(145deg, var(--roze) 0%, var(--roze-2) 100%); }
.foto--grijs { background-image: linear-gradient(145deg, #EDEBE8 0%, var(--grijs-2) 100%); }
.foto--staand { aspect-ratio: 3/4; }

/* Collectie: kaarten iets minder hoog en wat minder lucht eromheen, zodat de
   titel, de omschrijving en de kaarten samen in één scherm passen. */
.laag--collectie .kop { margin-bottom: var(--s5); }
/* width:100% erbij, anders knijpt max-height via de verhouding ook de
   breedte dicht en staat de foto niet meer strak in zijn kaart. */
/* 0,76 ligt vlak boven de oorspronkelijke 3/4 (0,75). Kleiner getal maakt de
   foto langer, groter getal korter. De max-height is alleen een vangnet voor
   uitzonderlijk lage vensters en hoort de vorm niet te bepalen. */
.laag--collectie .foto--staand { aspect-ratio: 0.76; width: 100%; max-height: 56vh; }
.foto--liggend { aspect-ratio: 4/3; }
.foto--vierkant { aspect-ratio: 1/1; }
.foto--vul { height: 100%; min-height: 320px; }
.foto.heeft-foto { background-image: var(--bron) !important; }

.foto__tag {
  position: absolute; left: var(--s2); bottom: var(--s2);
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.82);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht);
}
.foto.heeft-foto .foto__tag { display: none; }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: min(var(--herohoog), calc(100dvh - var(--balk))); display: flex; align-items: flex-end; padding-block: var(--s9) var(--s8); overflow: hidden; }
.hero__foto { position: absolute; inset: 0; z-index: -2; background-color: var(--grijs-2); background-image: radial-gradient(60% 80% at 72% 28%, var(--roze) 0%, transparent 62%), linear-gradient(135deg, var(--grijs-2) 0%, #EEE9E6 48%, var(--roze-2) 100%); background-size: cover; background-position: center; }
.hero__foto.heeft-foto { background-image: var(--bron) !important; }
/* De sluier dekt de foto net genoeg af om de titel leesbaar te houden.
   Lager zetten = meer foto zichtbaar achter de titel. */
.hero__sluier {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255, var(--sluier)) 0%,
    rgba(255,255,255, calc(var(--sluier) * .88)) 58%,
    rgba(255,255,255, 0) 88%);
}

/* Lichte letters op een donkere foto */
.hero--licht .hero__sluier {
  background: linear-gradient(100deg,
    rgba(20,16,15, var(--sluier)) 0%,
    rgba(20,16,15, calc(var(--sluier) * .88)) 58%,
    rgba(20,16,15, 0) 88%);
}
.hero--licht .hero__tekst, .hero--licht .hero h1 { color: #fff; }
.hero--licht .label { color: #fff; opacity: .82; }
.hero--licht .knop--lijn { border-color: #fff; color: #fff; }
.hero--licht .knop--lijn:hover { background: #fff; color: var(--inkt); }

.hero__tekst { max-width: min(560px, 100%); }

/* Eén hero-kop die net te lang is voor twee regels op de standaardmaat: iets
   kleiner en een breder tekstvak, zodat hij op twee regels uitkomt. Raakt
   alleen deze kop; de andere titels houden hun eigen maat. */
.hero__tekst:has(.hero__kop--breed) { max-width: min(760px, 100%); }
.hero__kop--breed { font-size: calc(clamp(38px, 5.2vw, 68px) * var(--kopschaal)); }
.hero h1 { margin-bottom: var(--s4); }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: var(--s2); }

@media (max-width: 700px) {
  .hero { min-height: 500px; padding-block: var(--s8) var(--s6); }
  .hero__tekst { max-width: 100%; }
  .hero__sluier {
    background: linear-gradient(180deg,
      rgba(255,255,255, calc(var(--sluier) * .35)) 0%,
      rgba(255,255,255, calc(var(--sluier) * .92)) 52%,
      rgba(255,255,255, var(--sluier)) 100%);
  }
  .hero--licht .hero__sluier {
    background: linear-gradient(180deg,
      rgba(20,16,15, calc(var(--sluier) * .35)) 0%,
      rgba(20,16,15, calc(var(--sluier) * .92)) 52%,
      rgba(20,16,15, var(--sluier)) 100%);
  }
}

/* Raster */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.raster > * { min-width: 0; }
@media (max-width: 900px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .raster { grid-template-columns: 1fr; } }
/* Carrousel: horizontaal scrollen, loopt eindeloos door */
.carrousel { position: relative; --z: var(--zicht); }

.carrousel__spoor {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.carrousel__spoor::-webkit-scrollbar { display: none; }

.carrousel__spoor > * {
  flex: 0 0 calc((100% - (var(--z) - 1) * var(--s3)) / var(--z));
  min-width: 0;
}

.carrousel__spoor:focus-visible { outline: 3px solid var(--roze-diep); outline-offset: 4px; }

/* Eén pijl, zwevend op de hoogte van het midden van de foto.
   De exacte hoogte wordt door het script gezet, want die hangt af
   van de kaartbreedte en dus van hoeveel kaarten er in beeld staan. */
.carrousel__knop {
  position: absolute;
  right: var(--s2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--wit);
  color: var(--inkt);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(58, 43, 40, .18);
  transition: background-color .2s var(--soepel), transform .2s var(--soepel);
}

.carrousel__knop svg { width: 18px; height: 18px; }
.carrousel__knop:hover { background: var(--roze); }
.carrousel__knop:active { transform: translateY(-50%) scale(.94); }

@media (prefers-reduced-motion: reduce) { .carrousel__spoor { scroll-behavior: auto; } }
@media (max-width: 700px) {
  .carrousel { --z: var(--zicht-mobiel); }
  .carrousel__knop { width: 46px; height: 46px; right: var(--s1); }
}

.kaart .foto { margin-bottom: var(--s3); }
.kaart h3 { margin-bottom: var(--s1); }
.kaart p { font-size: calc(15px * var(--tekstschaal)); color: var(--inkt-zacht); }

/* Duo */
.duo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: var(--duohoogte); }
.duo > * { min-width: 0; }
.duo--om .duo__foto { order: 2; }

/* Twee splitblokken onder elkaar krijgen lucht, anders lopen ze in elkaar over */
.duo + .duo { margin-top: var(--s8); }
.duo__foto .foto { height: 100%; border-radius: 0; }
.duo__tekst { display: flex; flex-direction: column; justify-content: center; padding: var(--s9) clamp(24px, 5.5vw, 88px); }
.duo__tekst h2 { margin-bottom: var(--s3); }
.duo__tekst .intro { margin-bottom: var(--s5); }
.duo__tekst .tekst { margin-bottom: var(--s5); }
.duo__tekst .tekst p { max-width: 52ch; }
/* In een halve kolom is het volle citaatformaat te dominant, maar het moet
   wel duidelijk een citaat blijven en niet als bodytekst gaan lezen. */
.duo__tekst .citaat {
  font-size: calc(clamp(26px, 2.9vw, 44px) * var(--kopschaal));
  margin-bottom: var(--s4);
  max-width: 24ch;
}

/* Het citaat moet meeschalen met zijn eigen kolom, niet met het venster. In de
   studio is die kolom 340px smaller omdat het paneel ernaast staat; op vw
   gebaseerd wordt het citaat daar te groot en valt het naar een extra regel,
   waardoor het blok langer wordt dan zijn buurman. cqi kijkt naar de kolom. */
@supports (font-size: 1cqi) {
  .duo__tekst { container-type: inline-size; }
  .duo__tekst .citaat { font-size: calc(clamp(26px, 9cqi, 46px) * var(--kopschaal)); }
}

/* Het citaatblok en het grijsblok zijn bewust korter dan de andere duo's en
   houden onderling dezelfde hoogte aan, zodat ze als een paar lezen. Minder
   lucht binnenin, zodat de inhoud nog steeds ruim in die kortere maat past. */
.duo--kort { min-height: var(--duohoogte-kort); }
.duo--kort .duo__tekst { padding-top: var(--s7); padding-bottom: var(--s7); }
.duo--kort .duo__tekst .citaat { margin-bottom: var(--s3); }
.duo--kort .duo__tekst .citaat + .credit { margin-top: var(--s3); }
.duo--kort .duo__tekst .credit { margin-bottom: var(--s4); }
.duo--kort .duo__tekst .intro { margin-bottom: var(--s4); }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; min-height: 0; }
  .duo--om .duo__foto { order: -1; }
  .duo + .duo { margin-top: var(--s6); }
  .duo__foto .foto { aspect-ratio: 4/3; height: auto; min-height: 0; }
  .duo__tekst { padding: var(--s7) var(--rand); }
  .duo--kort .duo__tekst { padding-top: var(--s6); padding-bottom: var(--s6); }
}

/* Feiten */
.feiten { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--grijs-lijn); }
.feit { padding: var(--s3) var(--s4); border-left: 1px solid var(--grijs-lijn); }
.feit:first-child { border-left: 0; padding-left: 0; }

/* De reis van het haar gebruikt hetzelfde ritme als de feitenrij, maar met
   plaatsnamen in plaats van cijfers. Die zijn langer, dus een maat kleiner. */
/* De kop had geen marge onder zich, waardoor hij tegen de intro aan plakte. */
.reis__kop { max-width: 62ch; margin-bottom: var(--s7); }
.reis__kop h2 { margin-bottom: var(--s4); }
.feit__cijfer { display: block; font-family: var(--kopfont), sans-serif; font-size: calc(clamp(32px, 3.2vw, 44px) * var(--kopschaal)); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: var(--s2); }
.feit__naam { display: block; font-size: calc(15px * var(--tekstschaal)); font-weight: 600; margin-bottom: var(--s1); }
.feit__uitleg { font-size: calc(14px * var(--tekstschaal)); color: var(--inkt-zacht); line-height: 1.5; }
@media (max-width: 900px) {
  .feiten { grid-template-columns: repeat(2, 1fr); }
  .feit:nth-child(odd) { border-left: 0; padding-left: 0; }
  .feit:nth-child(n+3) { border-top: 1px solid var(--grijs-lijn); }
}
@media (max-width: 520px) {
  .feiten { grid-template-columns: 1fr; }
  .feit { border-left: 0; padding-left: 0; }
  .feit + .feit { border-top: 1px solid var(--grijs-lijn); }
}

/* Stappen */
.stappen { border-top: 1px solid var(--grijs-lijn); }

/* Vier stappen: iets minder ruimte tussen de stappen en minder lucht om het
   blok, zodat titel en alle vier de stappen samen in één scherm passen. */
.laag--stappen { padding-block: var(--s7); }
.laag--stappen .kop { margin-bottom: var(--s5); }
.laag--stappen .stap { padding-block: var(--s5); }
.stap { display: grid; grid-template-columns: 88px 1.1fr 1fr; gap: var(--s5); align-items: start; padding-block: var(--s6); border-bottom: 1px solid var(--grijs-lijn); }
.stap > * { min-width: 0; }
.stap__nr { font-family: var(--kopfont), sans-serif; font-size: calc(clamp(32px, 3.4vw, 44px) * var(--kopschaal)); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--roze-diep); }
.stap p { font-size: calc(15px * var(--tekstschaal)); color: var(--inkt-zacht); line-height: 1.65; }
@media (max-width: 860px) { .stap { grid-template-columns: 56px 1fr; gap: var(--s2) var(--s3); } .stap p { grid-column: 2; } }

/* De reis gebruikt dezelfde genummerde rijen als de vier stappen, maar het is
   een overzicht en niet de uitleg zelf. Dus compacter, en cijfer en plaatsnaam
   een stuk kleiner zodat ze de sectiekop niet beconcurreren. De uitleg loopt
   gelijk met de lopende tekst in de blokken eronder (16px, niet 15). */
.stappen--reis .stap { padding-block: var(--s4); }
.stappen--reis .stap__nr { font-size: calc(clamp(18px, 1.85vw, 30px) * var(--kopschaal)); letter-spacing: -.02em; line-height: 1.1; }
.stappen--reis .stap h3 { font-size: calc(clamp(16px, 1.6vw, 23px) * var(--kopschaal)); }
.stappen--reis .stap p { font-size: calc(16px * var(--tekstschaal)); }

/* Citaat + mensen */
.citaat { margin: 0; font-family: var(--kopfont), sans-serif; font-size: calc(clamp(28px, 3.4vw, 44px) * var(--kopschaal)); font-weight: var(--kopdikte); line-height: 1.14; letter-spacing: var(--kopstrak); max-width: 22ch; }
/* Credits onder het citaat: klein en feitelijk, leest als bijschrift.
   Naam en salon staan onder elkaar, anders breken de salonnamen middenin. */
.credit { display: grid; gap: var(--s2); margin-top: var(--s3); }

.credit p {
  margin: 0;
  font-size: calc(14px * var(--tekstschaal));
  line-height: 1.45;
}

.credit b { display: block; font-weight: 600; color: var(--inkt); }
.credit span { display: block; color: var(--inkt-zacht); }

.duo__tekst .credit { margin-bottom: var(--s5); }
.duo__tekst .citaat + .credit { margin-top: var(--s4); }

.citaat__wie { display: block; margin-top: var(--s4); font-family: var(--tekstfont), sans-serif; font-size: calc(12px * var(--tekstschaal)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--roze-diep); }
.mens .foto { margin-bottom: var(--s3); }
.mens__rol { font-size: calc(12px * var(--tekstschaal)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--roze-diep); margin-bottom: var(--s1); }
.mens h3 { margin-bottom: var(--s1); }
.mens__salon { font-size: calc(15px * var(--tekstschaal)); color: var(--inkt-zacht); }
.mens__tekst { font-size: calc(15px * var(--tekstschaal)); color: var(--inkt-zacht); line-height: 1.65; margin-top: var(--s3); }

/* Kortere kop voor de andere pagina's */
.hero--kort { min-height: min(var(--kophoog), 62vh); }
.hero--kort .hero__tekst { max-width: min(680px, 100%); }
.hero--kort h1 { margin-bottom: var(--s2); }

/* Vinklijst */
.check { display: grid; gap: var(--s3); }
.check li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s2); align-items: start; }
.check svg { width: 22px; height: 22px; color: var(--roze-diep); margin-top: 2px; }
.check b { display: block; font-size: calc(16px * var(--tekstschaal)); font-weight: 600; margin-bottom: 2px; }
.check span { font-size: calc(15px * var(--tekstschaal)); color: var(--inkt-zacht); line-height: 1.55; }

/* Contactgegevens */
.gegevens { display: grid; gap: var(--s3); }
.gegeven { display: grid; gap: var(--s1); padding-bottom: var(--s3); border-bottom: 1px solid var(--grijs-lijn); }
.gegeven dt { font-size: calc(12px * var(--tekstschaal)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--roze-diep); }
.gegeven dd { margin: 0; font-size: calc(16px * var(--tekstschaal)); }
.gegeven dd a { color: var(--inkt); text-decoration: none; border-bottom: 1.5px solid var(--roze-2); }
.gegeven dd a:hover { border-bottom-color: var(--roze-diep); }

/* Formulier */
.formulier { max-width: 640px; }
.rij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
@media (max-width: 620px) { .rij { grid-template-columns: 1fr; } }
.veld { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); }
.veld--breed { grid-column: 1 / -1; }
.veld label { font-size: calc(14px * var(--tekstschaal)); font-weight: 600; }
.veld__hint { font-size: calc(13px * var(--tekstschaal)); font-weight: 400; color: var(--inkt-zacht); }
.veld input, .veld textarea {
  min-height: 48px; padding: var(--s2);
  border: 1.5px solid var(--grijs-lijn); border-radius: 8px;
  background: var(--wit); font-family: var(--tekstfont), sans-serif; font-size: max(16px, calc(16px * var(--tekstschaal))); color: var(--inkt);
  transition: border-color .18s var(--soepel), box-shadow .18s var(--soepel);
}
.veld textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.veld input:hover, .veld textarea:hover { border-color: var(--roze-2); }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--roze-diep); box-shadow: 0 0 0 3px rgba(156,79,76,.16); }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] { border-color: var(--roze-diep); }
.veld__fout { font-size: calc(13px * var(--tekstschaal)); font-weight: 500; color: var(--roze-diep); display: none; }
.veld__fout.aan { display: block; }
.ster { color: var(--roze-diep); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.samenvatting { display: none; margin-bottom: var(--s3); padding: var(--s2) var(--s3); border: 1.5px solid var(--roze-diep); border-radius: 8px; background: var(--roze); color: var(--roze-diep); font-size: calc(14px * var(--tekstschaal)); }
.samenvatting.aan { display: block; }
.samenvatting a { color: var(--roze-diep); font-weight: 600; }
.status { display: none; margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: 8px; font-size: calc(14px * var(--tekstschaal)); font-weight: 500; }
.status.aan { display: block; }
.status.ok { background: #E4EDE5; color: #34573A; }
.status.mis { background: var(--roze); color: var(--roze-diep); }

/* Slot */
.slot { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s6); align-items: center; }
.slot__knoppen { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 860px) { .slot { grid-template-columns: 1fr; gap: var(--s4); } }

/* Voet */
.voet { background: var(--inkt); color: rgba(255,255,255,.72); padding-block: var(--s8) var(--s5); }
.voet__raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid rgba(255,255,255,.16); }
@media (max-width: 860px) { .voet__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .voet__raster { grid-template-columns: 1fr; gap: var(--s5); } }
.voet .merk { color: var(--wit); display: inline-block; margin-bottom: var(--s2); }
.voet h4 { margin: 0 0 var(--s3); font-family: var(--tekstfont), sans-serif; font-size: calc(12px * var(--tekstschaal)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--roze-2); }
.voet ul { display: grid; gap: var(--s2); }
.voet a { color: rgba(255,255,255,.72); text-decoration: none; font-size: calc(15px * var(--tekstschaal)); }
.voet a:hover { color: var(--wit); }
.voet li, .voet p { font-size: calc(15px * var(--tekstschaal)); }
.voet p { max-width: 32ch; }
.voet__slot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-top: var(--s4); font-size: 13px; }