/* Marlinde Pierik (#keepingitreal), maatwerk joepa, 2026-10.
   Ontwerp-lezing: een scanbare, zelfverzekerde persoonlijke site voor een directe
   onderstroom- en lichaamscoach, korte koppen in haar eigen spreektaal, blauw en koraal
   op off-white, echte foto's, en alle diepgang een klik verder (bron/ontwerpbrief.md).

   Eén eigen vormelement: de koraal "echo" uit het MP-monogram (lagen: "ik besta uit veel
   lagen"). Op de grote kop van de home, als blok achter het openingsportret en als schaduw
   onder knoppen. Het monogram zelf komt groot en zacht terug in de blauwe band. */

:root {
  /* Merkkleuren, door Marlinde gekozen (bericht 2026-10-13). Contrast (WCAG):
     blauw op offwhite 13,63 | offwhite op blauw 13,63
     koraal op offwhite 3,04: alleen tekst >= 24px (of 18,7px vet) en sier
     koraal op blauw 4,48 en blauw op koraal 4,48: alleen groot/vet
     blauw op koraal-zacht 11,64 | inkt-zacht op offwhite 7,82, op koraal-zacht 6,68 */
  --blauw: #041B86;
  --koraal: #FF5757;
  --offwhite: #FFFCF8;
  --koraal-zacht: #FFE5E0;
  --inkt-zacht: #3B4A99;
  --lijn: rgba(4, 27, 134, 0.14);
  --lijn-sterk: rgba(4, 27, 134, 0.3);
  --lijn-licht: rgba(255, 252, 248, 0.24);
  --echo-1: rgba(255, 87, 87, 0.62);
  --echo-2: rgba(255, 87, 87, 0.3);

  --letter: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --maat: 76rem;
  --maat-tekst: 38rem;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --ruimte: clamp(3.75rem, 8vw, 7rem);
  --kopbalk: 4.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopbalk) + 1rem);
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--blauw);
  font-family: var(--letter);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); }
h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--koraal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 3px; }

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

.overslaan {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  background: var(--blauw);
  color: var(--offwhite);
  padding: 0.6rem 1rem;
  font-weight: 700;
}
.overslaan:focus { top: 1rem; }

.verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.binnen {
  max-width: var(--maat);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* ---------- Knoppen: blauw met de koraal echo eronder ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.35rem;
  background: var(--blauw);
  color: var(--offwhite);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 4px 4px 0 var(--koraal);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.knop:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--koraal);
}
.knop:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--koraal);
}
.knop svg { width: 1.15em; height: 1.15em; flex: none; }

.knop-rustig {
  background: transparent;
  color: var(--blauw);
  box-shadow: inset 0 0 0 2px var(--blauw);
}
.knop-rustig:hover { box-shadow: inset 0 0 0 2px var(--blauw), 4px 4px 0 var(--koraal); }
.knop-rustig:active { box-shadow: inset 0 0 0 2px var(--blauw), 1px 1px 0 var(--koraal); }

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: center;
}

.tekstlink {
  font-weight: 700;
}

/* ---------- Kopbalk ---------- */

.kopbalk {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--offwhite);
  border-bottom: 1px solid var(--lijn);
}
.kopbalk .binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--kopbalk);
}

.merk {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--blauw);
  flex: none;
}
.merk img { height: 2.6rem; width: auto; }
.merk-naam {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.merk-naam strong { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em; }
.merk-naam span {
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.merk-naam span b { color: var(--koraal); font-weight: 800; }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
}
.menu ul {
  display: flex;
  gap: clamp(1rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a:not(.knop) {
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 3px solid transparent;
}
.menu a:not(.knop):hover { border-bottom-color: var(--lijn-sterk); }
.menu a[aria-current="page"] { border-bottom-color: var(--koraal); }
.menu .knop { min-height: 2.75rem; padding: 0.6rem 1.1rem; font-size: 0.95rem; }

.menuknop {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 2px solid var(--blauw);
  color: var(--blauw);
  font: 700 0.95rem/1 var(--letter);
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  cursor: pointer;
}
.menuknop svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Home: opening (gelaagd: offwhite, koraal-zacht veld, echo, foto) ---------- */

.opening-veld {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: linear-gradient(90deg, transparent calc(50% + 13rem), var(--koraal-zacht) 0);
}
.opening {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}
.opening h1 {
  /* Sinds 16-10 (advies Gert, via Marlinde): bovenaan het probleem waarin je je herkent. */
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  /* De echo uit het monogram op haar eigen tagline. */
  text-shadow: 0.045em 0.045em 0 var(--echo-1), 0.09em 0.09em 0 var(--echo-2);
  margin-bottom: 1.5rem;
}
.opening h1 span { display: block; }
.opening .intro {
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  line-height: 1.6;
  max-width: 31rem;
  margin-bottom: 2rem;
}
.opening .intro strong { font-weight: 700; display: block; }
.opening .intro { margin-bottom: 1.25rem; }
.tagline {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--koraal);
}
.opening-foto {
  position: relative;
  height: min(39rem, calc(100svh - var(--kopbalk) - 4.5rem));
  min-height: 24rem;
  margin-right: 1.25rem;
}
.opening-foto::before {
  /* echo: het koraal blok valt rechtsonder achter de foto, zoals in het logo */
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(1.25rem, 1.25rem);
  background: var(--koraal);
  z-index: -1;
}
.opening-foto img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Home: soms (drie ingangen, foto wisselt mee) ---------- */

.sectie { padding-top: var(--ruimte); padding-bottom: var(--ruimte); }
.sectie-krap { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.soms-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.soms-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lijn-sterk);
}
.soms-rij a {
  display: block;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--lijn-sterk);
  text-decoration: none;
  color: var(--blauw);
}
.soms-rij h3 {
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--inkt-zacht);
  margin-bottom: 0.9rem;
  transition: color 0.2s ease;
}
.soms-rij.is-actief h3,
.soms-rij a:hover h3,
.soms-rij a:focus-visible h3 { color: var(--blauw); }
.soms-dienst {
  display: inline;
  font-weight: 800;
  font-size: 1.05rem;
  margin-right: 0.6rem;
}
.soms-dienst span {
  text-decoration: underline;
  text-decoration-color: var(--koraal);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.28em;
}
.soms-rij a:hover .soms-dienst span { text-decoration-thickness: 5px; }
.soms-regel { color: var(--inkt-zacht); font-size: 1rem; }
.soms-rij-foto { display: none; }
.soms-venster {
  position: sticky;
  top: calc(var(--kopbalk) + 2rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--koraal-zacht);
}
.soms-lijst-foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.soms-lijst-foto.is-actief { opacity: 1; }
.soms-lijst-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Splits (foto + tekst) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.split-om { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split-om .split-foto { order: 2; }
.split-foto { aspect-ratio: 4 / 5; overflow: hidden; }
.split-foto img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin-bottom: 1.25rem; }
.split-tekst { max-width: 34rem; }
.statement {
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--koraal);
  max-width: 28rem;
}

/* ---------- Blauwe band: normen en waarden ---------- */

.band-blauw {
  background: var(--blauw);
  color: var(--offwhite);
}
.band-blauw :focus-visible { outline-color: var(--offwhite); }
.band-mp { position: relative; overflow: hidden; isolation: isolate; }
.supergrafiek {
  /* het MP-monogram, groot en zacht: haar handtekening, geen inhoud */
  position: absolute;
  right: -7%;
  bottom: -22%;
  width: min(64rem, 78vw);
  height: auto;
  opacity: 0.09;
  z-index: -1;
  pointer-events: none;
}
.waarden-titel { margin-bottom: 2rem; }
.waarden {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.waarden h2 { margin-bottom: 1rem; }
.waarden-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--lijn-licht);
}
.waarden-lijst li {
  border-top: 1px solid var(--lijn-licht);
  padding: 0.95rem 0;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.waarden-uitleg { max-width: 22rem; }

/* ---------- Chips (het pad) ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
}
.chips li {
  border: 1.5px solid var(--lijn-sterk);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.chips a { text-decoration: none; }
.chips li:has(a):hover { border-color: var(--koraal); }

/* ---------- Zullen we eens kijken (afsluiter) ---------- */

.kijken {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  max-width: var(--maat);
  margin: 0 auto;
}
.kijken-kop {
  background: var(--koraal);
  padding: clamp(2.25rem, 5vw, 4rem);
  display: flex;
  align-items: flex-end;
}
.kijken-kop h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  color: var(--blauw);
}
.kijken-tekst {
  background: var(--koraal-zacht);
  padding: clamp(2.25rem, 5vw, 4rem);
}
.kijken-tekst p { max-width: 32rem; }
.kijken-tekst .sluit { font-weight: 800; font-size: 1.15rem; margin-bottom: 1.75rem; }
.kijken-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}
.kijken-waar { margin-top: 1.5rem; font-size: 0.95rem; color: var(--inkt-zacht); }
.eerste-stap {
  list-style: none;
  counter-reset: stap;
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: 32rem;
}
.eerste-stap li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font-size: 0.98rem;
  line-height: 1.5;
}
.eerste-stap li::before {
  content: counter(stap);
  font-weight: 800;
  color: var(--blauw);
  line-height: 1.5;
}

/* Contact: twee adressen */
.adressen { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.25rem; }
.adressen dt { font-weight: 800; }
.adressen dd { margin: 0; }

/* Contact: zo begin je */
.zo-begin h2 { margin-bottom: 0.9rem; }
.zo-begin-intro { font-size: 1.15rem; font-weight: 500; max-width: 38rem; margin-bottom: 2rem; }
.stappen-groot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 0;
}
.stappen-groot li {
  counter-increment: stap;
  border-top: 3px solid var(--koraal);
  padding-top: 1rem;
}
.stappen-groot li::before {
  content: counter(stap);
  display: block;
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}
.stappen-groot strong { display: block; font-size: 1.2rem; font-weight: 800; margin-bottom: 0.3rem; }
.stappen-groot span { color: var(--inkt-zacht); }

/* ---------- Subpagina: kop (zelfde lagen als de opening van de home) ---------- */

.kop-veld {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: linear-gradient(90deg, transparent calc(50% + 9rem), var(--koraal-zacht) 0);
}
.kop {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.kop h1 { margin-bottom: 1.1rem; }
.aanloop {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--inkt-zacht);
  max-width: 26rem;
  margin-bottom: 0.9rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--koraal);
}
.kop .lead {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  font-weight: 600;
  max-width: 30rem;
  margin-bottom: 2rem;
}
.kop-foto {
  position: relative;
  height: min(32rem, calc(100svh - var(--kopbalk) - 5rem));
  min-height: 20rem;
  margin-right: 1.25rem;
}
.kop-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(1.25rem, 1.25rem);
  background: var(--koraal);
  z-index: -1;
}
.kop-foto img { position: relative; width: 100%; height: 100%; object-fit: cover; }
main > .band-blauw:last-child { margin-bottom: var(--ruimte); }
main > .kop-kaal:last-child { padding-bottom: var(--ruimte); }

/* ---------- Subpagina: tekst + kantlijn ---------- */

.artikel {
  display: grid;
  grid-template-columns: minmax(0, var(--maat-tekst)) minmax(14rem, 19rem);
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.tekst h2 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin: 2.75rem 0 1rem;
}
.tekst h2:first-child { margin-top: 0; }
.tekst ul, .tekst ol { padding-left: 1.2rem; margin: 0 0 1.25em; }
.tekst li { margin-bottom: 0.4em; }
.tekst ol.stappen {
  list-style: none;
  padding: 0;
  counter-reset: stap;
}
.tekst ol.stappen li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--lijn);
  margin: 0;
}
.tekst ol.stappen li::before {
  content: counter(stap);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--blauw);
}
.uitspraak {
  font-weight: 800;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  border-left: 4px solid var(--koraal);
  padding: 0.2rem 0 0.2rem 1.25rem;
  margin: 2.25rem 0;
}
.citaat {
  margin: 2.25rem 0;
  padding: 1.5rem 1.6rem;
  background: var(--koraal-zacht);
}
.citaat p { font-size: 1.12rem; font-weight: 500; font-style: italic; line-height: 1.55; }
.citaat footer { margin-top: 0.75rem; font-size: 0.92rem; font-weight: 700; font-style: normal; }
.citaat + .citaat { margin-top: -1rem; }

.figuur { margin: 2.5rem 0; }
.figuur img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.figuur-staand img { aspect-ratio: 4 / 5; }

.galerij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.galerij img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galerij-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kantlijn {
  position: sticky;
  top: calc(var(--kopbalk) + 2rem);
  display: grid;
  gap: 2rem;
}
.praktisch {
  border-top: 3px solid var(--koraal);
  padding-top: 1.25rem;
}
.praktisch h2, .verder h2 { font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.9rem; }
.praktisch dl { margin: 0 0 1.5rem; }
.praktisch dt { font-weight: 700; font-size: 0.95rem; }
.praktisch dd { margin: 0 0 0.85rem; font-size: 0.97rem; line-height: 1.55; color: var(--inkt-zacht); }
.verder { border-top: 1px solid var(--lijn); padding-top: 1.25rem; }
.verder ul { list-style: none; margin: 0; padding: 0; }
.verder li { margin-bottom: 0.55rem; font-weight: 600; font-size: 0.98rem; line-height: 1.4; }

/* ---------- Over mij ---------- */

.collage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: end;
}
.collage img { width: 100%; object-fit: cover; }
.collage .c1 img { aspect-ratio: 4 / 5; }
.collage .c2 img { aspect-ratio: 3 / 4; }
.collage .c3 img { aspect-ratio: 1 / 1; }

.waarden-uitgebreid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.waarden-uitgebreid li {
  border-top: 1px solid var(--lijn-licht);
  padding: 1.4rem 0 1.6rem;
}
.waarden-uitgebreid h3 { font-size: 1.3rem; margin-bottom: 0.55rem; }
.waarden-uitgebreid p { color: rgba(255, 252, 248, 0.86); }

/* ---------- Home: citaten ---------- */

.citaten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.citaat-groot { margin: 0; border-top: 3px solid var(--koraal); padding-top: 1.5rem; }
.citaat-groot blockquote { margin: 0; }
.citaat-groot p {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.citaat-groot figcaption { margin-top: 1rem; font-weight: 700; font-size: 0.95rem; color: var(--inkt-zacht); }

/* ---------- Home: #keepingitreal ---------- */

.echt {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.echt h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.echt h2 b { color: var(--koraal); font-weight: 800; }
.echt-tekst p { max-width: 24rem; margin-bottom: 1.75rem; }
.echt-fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0 0 2.5rem;
}
.echt-fotos li:nth-child(even) { transform: translateY(2.5rem); }
.echt-fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- Subpagina's: kleine extra's ---------- */

.tekst-intro { font-size: 1.2rem; font-weight: 500; line-height: 1.6; }
.tekst-smal { max-width: var(--maat-tekst); }
.kop-kaal { grid-template-columns: minmax(0, 1fr); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 0; }
.kop-kaal .chips { margin-bottom: 0; }
.kop-klein { margin-top: 1.25rem; font-size: 0.92rem; color: var(--inkt-zacht); }
.vragen h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; }
.vragen h2:first-child { margin-top: 0; }

/* ---------- Voet ---------- */

.voet {
  background: var(--blauw);
  color: var(--offwhite);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  margin-top: var(--ruimte);
  font-size: 0.97rem;
}
.voet :focus-visible { outline-color: var(--offwhite); }
.voet-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
}
.voet-merk img { width: 11rem; height: auto; margin-bottom: 1.25rem; }
.voet-merk p { max-width: 21rem; color: rgba(255, 252, 248, 0.86); }
.voet h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 0.9rem; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: 0.5rem; line-height: 1.45; }
.voet a { text-decoration-color: rgba(255, 87, 87, 0.75); }
.voet-onder {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn-licht);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: 0.88rem;
  color: rgba(255, 252, 248, 0.8);
}
.na-kijken .voet { margin-top: 0; }

/* ---------- Kleine schermen ---------- */

@media (max-width: 1080px) {
  .menu ul { gap: 1rem; }
  .artikel { grid-template-columns: minmax(0, 1fr); }
  .kantlijn { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .menuknop { display: inline-flex; }
  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--offwhite);
    border-bottom: 1px solid var(--lijn);
    padding: 0.75rem var(--rand) 1.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .menu-open .menu { display: flex; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu ul a:not(.knop) {
    display: block;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--lijn);
    font-size: 1.05rem;
  }
  .menu a[aria-current="page"] { border-bottom-color: var(--lijn); text-decoration: underline; text-decoration-color: var(--koraal); text-decoration-thickness: 3px; }
  .menu .knop { align-self: flex-start; }
  .kopbalk .binnen { position: static; }
  .kopbalk { position: sticky; }
}

@media (max-width: 860px) {
  :root { --kopbalk: 4.25rem; }
  .merk img { height: 2.25rem; }
  .opening, .kop, .split, .split-om, .waarden, .kijken {
    grid-template-columns: minmax(0, 1fr);
  }
  .opening-foto, .kop-foto {
    order: -1;
    height: min(22rem, 42svh);
    min-height: 0;
  }
  .opening { padding-top: 1.25rem; gap: 1.5rem; }
  .kop { padding-top: 1.25rem; gap: 1.5rem; }
  .opening h1 { margin-bottom: 1rem; }
  .opening h1 span { display: inline; }
  .opening .opening-foto { height: min(19rem, 34svh); }
  .tagline { margin-bottom: 1.5rem; }
  .opening .intro { margin-bottom: 1.5rem; }
  .split-om .split-foto { order: 0; }
  .split-foto { aspect-ratio: 4 / 3; }
  .opening-veld, .kop-veld { background: linear-gradient(180deg, var(--koraal-zacht) 0 11rem, transparent 0); }
  .opening-foto, .kop-foto { margin-right: 0.75rem; }
  .opening-foto::before, .kop-foto::before { transform: translate(0.75rem, 0.75rem); }
  .kop-veld .kop-kaal { padding-top: 2rem; }
  .soms-raster { grid-template-columns: minmax(0, 1fr); }
  .soms-venster { display: none; }
  .soms-rij-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.1rem; }
  .soms-rij-foto img { width: 100%; height: 100%; object-fit: cover; }
  .soms-rij h3 { color: var(--blauw); }
  .soms-dienst { display: block; margin-bottom: 0.2rem; }
  .citaten { grid-template-columns: minmax(0, 1fr); }
  .echt { grid-template-columns: minmax(0, 1fr); }
  .echt-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stappen-groot { grid-template-columns: minmax(0, 1fr); }
  .galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerij-3 li:last-child { grid-column: 1 / -1; }
  .galerij-3 li:last-child img { aspect-ratio: 16 / 9; }
  .collage { grid-template-columns: 1fr 1fr; }
  .collage .c3 { display: none; }
  .waarden-uitgebreid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .merk-naam strong { font-size: 0.98rem; }
  .kantlijn { grid-template-columns: minmax(0, 1fr); }
  .voet-raster { grid-template-columns: minmax(0, 1fr); }
  .knoppen .knop, .kijken-acties .knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .knop:hover, .knop:active { transform: none; }
}

@media print {
  .kopbalk, .voet, .kijken { display: none; }
  body { background: #fff; }
}