/* Glow Works Fotografie v2: beeld eerst, weinig tekst (referentie: norahjoyphotography.com)
   Huisstijl: Cormorant Garamond (titels) + Mulish (tekst), taupe #77715D voor lijnen en knoppen.
   Onderdelen:
   .site-header / .nav              header met logo links, kleine kapitalen rechts, 2 uitklapmenu's
   .held                            één grote foto van rand tot rand (homepage)
   .quote                           cursieve quote onder de grote foto (homepage)
   .tegels / .tegel                 raster van staande foto's met titel en linkje (homepage)
   .love-letters / .brief           reviews op de homepage: elke review met eigen foto, als dambord
   .duo                             twee grote foto's naast elkaar, van rand tot rand
   .kader                           dun omlijnd blok: foto links, gecentreerde tekst rechts
   .intro-rij                       label + titel + lijn | alinea | alinea
   .raster                          galerij: staand 1 vak, liggend 2 vakken (.raster__item--breed)
   .cta                             "Let's glow!" met knop(pen)
   .carrousel                       reviews: één review tegelijk, foto + tekstvlak, pijlen en teller (pagina Reviews)
   .sectiekop                       gecentreerde kop met cursieve onderregel
   .gesplitst                       foto van rand tot rand links, inhoud rechts (prijzen, contact)
   .rijen / .rij                    regels met label links en waarde rechts, dunne lijnen
   .stappen / .stap                 werkwijze: 2x2 omlijnde kaarten
   .formulier / .veld               contactformulier
   .prose                           lange tekst (privacy)
   .site-footer                     footer
   .lightbox                        foto vergroot
   .label / .titel / .knop / .linkje  typografie en knoppen
*/

:root {
  --wit: #FFFFFF;
  --tekst: #2E2B25;
  --zacht: #6B665B;
  --taupe: #77715D;
  --lijn: #E2DCD3;
  --offwhite: #F4F0ED;
  --titel-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tekst-font: Mulish, "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(1rem, 1.1vw, 1.25rem);
  --gap: clamp(.75rem, 1.2vw, 1.1rem);
  --header: 5rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 1rem); }
body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-weight: 300;
  font-size: clamp(.9rem, .87rem + .1vw, .95rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; background: var(--offwhite); }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--taupe); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.visueel-verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- typografie ---------- */
.label {
  display: block;
  margin: 0 0 .5rem;
  font-family: var(--tekst-font);
  font-weight: 500;
  font-size: .64rem;
  line-height: 1.5;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--zacht);
}
.titel {
  display: block;
  font-family: var(--titel-font);
  font-weight: 400;
  font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tekst);
  overflow-wrap: break-word;
}
.titel--streep::after {
  content: "";
  display: block;
  width: 2.5rem; height: 1px;
  margin: .9rem auto 0;
  background: var(--taupe);
}
.italic {
  font-family: var(--titel-font);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1.5;
}
.klein { font-size: .82rem; line-height: 1.7; color: var(--zacht); }

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .7em 1.35em;
  border: 1px solid var(--taupe);
  background: transparent;
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-weight: 500;
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.knop:hover, .knop:focus-visible { background: var(--taupe); color: var(--wit); }
.knop:disabled { opacity: .5; cursor: wait; }
.knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.linkje {
  font-size: .82rem;
  font-weight: 400;
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.linkje:hover, .linkje:focus-visible { border-bottom-color: var(--taupe); }

/* ---------- lay-out ---------- */
.container { width: min(100% - 2 * var(--rand), 1410px); margin-inline: auto; }
.blok { margin-block: clamp(2rem, 3.5vw, 3.25rem); }
.blok--ruim { margin-block: clamp(3rem, 6vw, 5.5rem); }

/* ---------- header ---------- */
.skiplink {
  position: absolute; top: -100%; left: 1rem; z-index: 100;
  padding: .8rem 1.1rem; background: var(--wit); border: 1px solid var(--taupe);
  font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; text-decoration: none;
}
.skiplink:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--wit); }
.site-header__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  min-height: var(--header);
}
.logo { display: inline-flex; flex-shrink: 0; }
.logo img { height: clamp(2.1rem, 1.5rem + 1.3vw, 2.9rem); width: auto; background: none; }

.nav__lijst { display: flex; align-items: center; gap: clamp(1.1rem, 1.8vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link, .nav__knop {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-weight: 500;
  font-size: .64rem;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.nav__link:hover, .nav__knop:hover, .nav__item.is-open > .nav__knop,
.nav__link[aria-current="page"], .nav__item.is-actief > .nav__knop, .nav__sub a[aria-current="page"] { color: var(--taupe); }
.nav__knop svg { width: .5rem; height: .5rem; stroke: currentColor; fill: none; stroke-width: 1.4; transition: rotate .3s var(--ease); }
.nav__item.is-open > .nav__knop svg { rotate: 180deg; }
.nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__sub a {
  display: block;
  color: var(--tekst);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 400;
  white-space: nowrap;
}
.nav__sub a:hover { color: var(--taupe); }
.nav-toggle { display: none; }

@media (min-width: 900px) {
  .nav__sub {
    position: absolute;
    top: calc(100% + .6rem);
    left: 50%;
    translate: -50% 0;
    min-width: 12rem;
    padding: .75rem 0;
    background: var(--wit);
    border: 1px solid var(--lijn);
    display: none;
  }
  .nav__sub::before { content: ""; position: absolute; top: -.7rem; left: 0; right: 0; height: .7rem; }
  .nav__item.is-open > .nav__sub,
  .nav__item--sub:hover > .nav__sub,
  html:not(.js) .nav__item--sub:focus-within > .nav__sub { display: block; }
  .nav__sub a { padding: .45rem 1.25rem; }
}
@media (max-width: 899px) {
  .js .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 2.75rem; height: 2.75rem; margin-right: -.6rem; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 1.4rem; height: 1px; margin-inline: auto; background: var(--tekst); transition: translate .3s var(--ease), rotate .3s var(--ease), opacity .3s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }
  .site-header__binnen { flex-wrap: wrap; }
  .nav { flex-basis: 100%; }
  .js .nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    max-height: calc(100dvh - var(--header)); overflow: auto;
    padding: .25rem var(--rand) 1.5rem; background: var(--wit); border-bottom: 1px solid var(--lijn);
  }
  .js .nav.is-open { display: block; }
  .nav__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-top: 1px solid var(--lijn); }
  .nav__link, .nav__knop { width: 100%; padding: 1rem 0; justify-content: space-between; }
  .nav__knop svg { display: none; }
  .nav__sub { padding: 0 0 .75rem 1rem; }
  .nav__sub a { padding: .45rem 0; font-size: .9rem; }
}

/* ---------- twee grote foto's ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.duo img { width: 100%; height: min(62.5vw, calc(100svh - var(--header))); min-height: 22rem; object-fit: cover; }
@media (max-width: 699px) {
  .duo { grid-template-columns: 1fr; }
  .duo img { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}

/* ---------- één grote foto (homepage) ---------- */
.held picture { display: block; }
.held img { width: 100%; height: min(calc(100svh - var(--header)), 52vw); min-height: 20rem; object-fit: cover; object-position: 30% 50%; }
@media (max-width: 699px) {
  .held img { height: auto; min-height: 0; aspect-ratio: 4 / 5; object-position: 50% 50%; }
}

/* ---------- quote onder de grote foto (homepage) ---------- */
.quote { padding: clamp(2.5rem, 5vw, 4.5rem) var(--rand) clamp(1rem, 2vw, 1.5rem); text-align: center; }
.quote__blok { max-width: 58rem; margin: 0 auto; }
.quote__teken {
  display: block; height: .55em; margin-bottom: .45rem;
  font-family: var(--titel-font); font-size: clamp(5rem, 3.5rem + 4vw, 7.5rem); line-height: 1; color: var(--taupe); opacity: .55;
}
.quote__tekst {
  margin: 0;
  font-family: var(--titel-font); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.95rem); line-height: 1.45; color: var(--zacht); text-wrap: balance;
}

/* ---------- omlijnd blok ---------- */
.kader {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--taupe);
}
.kader__beeld img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kader--inzet .kader__beeld { padding: clamp(.6rem, 1vw, 1rem); }
.kader__tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
}
.kader__tekst .tekst { max-width: 30rem; font-size: .88rem; }
.kader--breed { grid-template-columns: 7fr 5fr; }
.kader--breed .kader__beeld img { aspect-ratio: 3 / 2; }
@media (max-width: 799px) {
  .kader, .kader--breed { grid-template-columns: 1fr; }
  .kader--breed .kader__beeld img { aspect-ratio: 4 / 3; }
}

/* ---------- koppen van secties ---------- */
.titel--groot { font-size: clamp(1.45rem, 1.05rem + 1.25vw, 2.25rem); line-height: 1.25; letter-spacing: .2em; }
.sectiekop { width: min(100% - 2 * var(--rand), 44rem); margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.sectiekop__sub { margin: .7rem 0 0; font-family: var(--titel-font); font-style: italic; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.5; color: var(--zacht); }
.sectiekop__tekst { margin-top: .9rem; font-size: .86rem; color: var(--zacht); }

/* ---------- tegels ---------- */
.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.tegel__beeld { display: block; overflow: hidden; }
.tegel__beeld img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 1.1s var(--ease); }
.tegel:hover .tegel__beeld img { transform: scale(1.02); }
.tegel__tekst { padding-top: .8rem; }
.tegel__tekst .titel { font-size: .95rem; letter-spacing: .16em; }
.tegel__tekst .linkje { display: inline-block; margin-top: .25rem; }
.tegel__tekst p { margin-top: .5rem; font-size: .82rem; line-height: 1.65; color: var(--zacht); max-width: 36ch; }
@media (max-width: 899px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .tegels { grid-template-columns: 1fr; } }

/* ---------- homepage: Love Letters als dambord ----------
   Elke review is één kaart met een eigen foto. In de middelste kolom staat de foto onder de tekst,
   zodat foto's en teksten om en om staan (dambord). Kaarten in een rij zijn even hoog. */
.love-letters { --gap: clamp(1rem, 2vw, 1.75rem); background: var(--offwhite); padding-block: clamp(4.5rem, 9vw, 8rem); }
.love-letters .sectiekop { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.love-letters .titel--streep::after { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.brieven-raster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  width: min(100% - 2 * var(--rand), 1240px); margin: 0 auto; padding: 0; list-style: none;
}
.brief { display: flex; flex-direction: column; border: 1px solid #AFAFA5; background: var(--wit); }
.brief__beeld { overflow: hidden; }
.brief__beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.1s var(--ease); }
.brief:hover .brief__beeld img { transform: scale(1.03); }
.brief__tekst { flex: 1; display: flex; flex-direction: column; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.brief__teken { display: block; height: 1.4rem; margin-bottom: .6rem; font-family: var(--titel-font); font-size: 3rem; line-height: 1; color: var(--taupe); }
.brief blockquote { margin: 0; font-size: .96em; }
.brief blockquote p { margin-bottom: 1em; }
.brief blockquote p:last-child { margin-bottom: 0; }
.brief__naam {
  margin: auto 0 0; padding-top: 1.4rem;
  font-weight: 500; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
}
.brief__naam::before { content: ""; display: block; height: 1px; margin-bottom: 1.1rem; background: #EDE1D4; }
.brief:nth-child(3n + 2) .brief__beeld { order: 2; }
/* Extra reviews after the first six: collapsed, slide open behind the "Meer" button.
   Without JavaScript everything is simply visible. */
.js .brieven-meer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .8s var(--ease), opacity .6s var(--ease); }
.js .brieven-meer.is-open { grid-template-rows: 1fr; opacity: 1; }
.js .brieven-meer.is-open .brieven-meer__binnen { visibility: visible; }
.brieven-meer__binnen { overflow: hidden; }
.js .brieven-meer__binnen { visibility: hidden; transition: visibility 0s .8s; }
.js .brieven-meer.is-open .brieven-meer__binnen { transition: none; }
.brieven-meer .brieven-raster { padding-top: var(--gap); }
.brieven-knop { display: flex; justify-content: center; margin: clamp(2rem, 4vw, 3rem) 0 0; }
html:not(.js) .brieven-knop { display: none; }
@media (prefers-reduced-motion: reduce) { .js .brieven-meer { transition: none; } }
@media (max-width: 999px) {
  /* twee kolommen: volgorde zo dat reviews van gelijke lengte naast elkaar staan, rechts de foto onder */
  .brieven-raster { grid-template-columns: repeat(2, 1fr); }
  .brief:nth-child(2) { order: 3; }
  .brief:nth-child(3) { order: 2; }
  .brief:nth-child(4) { order: 5; }
  .brief:nth-child(5) { order: 4; }
  .brief:nth-child(6) { order: 6; }
  .brief:nth-child(3n + 2) .brief__beeld { order: 0; }
  .brief:is(:nth-child(3), :nth-child(5), :nth-child(6)) .brief__beeld { order: 2; }
}
@media (max-width: 639px) {
  .brieven-raster { grid-template-columns: 1fr; }
  .brief { order: 0 !important; }
  .brief:is(:nth-child(3), :nth-child(5), :nth-child(6)) .brief__beeld { order: 0; }
}

/* ---------- reviews: carrousel, één review tegelijk ---------- */
.brieven { padding-block: clamp(3.5rem, 7vw, 6rem); }
.carrousel { width: min(100% - 2 * var(--rand), 1060px); margin-inline: auto; }
.carrousel__slides { display: grid; gap: 3rem; }
.carrousel__slide { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.carrousel__beeld { position: relative; z-index: 1; grid-column: 1 / 5; grid-row: 1; margin-block: clamp(1.5rem, 3.5vw, 3rem); overflow: hidden; }
.carrousel__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.carrousel__kaart {
  grid-column: 4 / 13; grid-row: 1; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.1rem;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem) calc(100% / 9 + clamp(1.5rem, 4vw, 4rem));
  background: var(--offwhite); text-align: center;
}
.carrousel__kaart .titel { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); }
.carrousel__kaart blockquote { max-width: 34rem; margin: 0; font-size: .88rem; line-height: 1.8; color: var(--zacht); }
.carrousel__kaart blockquote p { margin-bottom: .8em; }
.carrousel__kaart blockquote p:last-child { margin-bottom: 0; }
.carrousel__nav { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.carrousel__nav[hidden] { display: none; }
.carrousel__pijl {
  display: inline-flex; align-items: center; justify-content: center; width: 3.75rem; height: 2.75rem; padding: 0;
  border: 0; background: none; color: var(--tekst); cursor: pointer; transition: color .3s var(--ease);
}
.carrousel__pijl svg { width: 3rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1; transition: translate .35s var(--ease); }
.carrousel__pijl:hover { color: var(--taupe); }
[data-carrousel-vorige]:hover svg { translate: -5px 0; }
[data-carrousel-volgende]:hover svg { translate: 5px 0; }
.carrousel__teller { min-width: 4.5rem; margin: 0; text-align: center; font-weight: 500; font-size: .66rem; letter-spacing: .22em; }
.js .carrousel__slides { gap: 0; overflow: hidden; touch-action: pan-y; transition: height .5s var(--ease); }
.js .carrousel__slide { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.js .carrousel__slide.is-actief { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.js .carrousel__kaart > * { translate: 0 10px; transition: translate .8s var(--ease); }
.js .carrousel__slide.is-actief .carrousel__kaart > * { translate: 0 0; }
.js .carrousel__beeld img { scale: 1.04; transition: scale 1.4s var(--ease); }
.js .carrousel__slide.is-actief .carrousel__beeld img { scale: 1; }
@media (max-width: 799px) {
  .carrousel { display: flex; flex-direction: column; }
  .carrousel__nav { order: -1; justify-content: center; margin: 0 0 1rem; }
  .carrousel__slide { grid-template-columns: 1fr; }
  .carrousel__beeld { grid-column: 1; grid-row: 1; margin: 0 1.5rem; }
  .carrousel__beeld img { aspect-ratio: 4 / 3; }
  .carrousel__kaart { grid-column: 1; grid-row: 2; margin-top: -2.5rem; padding: 4rem 1.5rem 2.25rem; }
}

/* ---------- intro-rij ---------- */
.intro-rij {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  width: min(100% - 2 * var(--rand), 1150px);
  margin-inline: auto;
}
.intro-rij__kop { padding-bottom: 1rem; border-bottom: 1px solid var(--lijn); align-self: start; }
.intro-rij p { font-size: .86rem; }
@media (max-width: 799px) { .intro-rij { grid-template-columns: 1fr; } }

/* ---------- galerij: rijen van gelijke hoogte, foto's heel (geen uitsnede) ---------- */
.raster {
  --rij: clamp(11rem, 8rem + 12vw, 22rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.raster::after { content: ""; flex-grow: 1000000; }
.raster__item { margin: 0; flex: calc(var(--r) * 1000) 1 calc(var(--r) * var(--rij)); min-width: 0; }
.raster__link { display: block; overflow: hidden; background: var(--offwhite); }
.raster__link img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform 1.1s var(--ease); }
.raster__link:hover img { transform: scale(1.02); }

/* ---------- call to action ---------- */
.cta { text-align: center; padding-block: clamp(3rem, 6vw, 5rem); }
.cta .titel { margin-bottom: 1.25rem; }

/* ---------- gesplitst: foto links, inhoud rechts ---------- */
.gesplitst { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.gesplitst__beeld img { width: 100%; height: calc(100svh - var(--header)); min-height: 34rem; object-fit: cover; position: sticky; top: var(--header); }
.gesplitst__inhoud { padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 5vw, 4.5rem); max-width: 44rem; }
.gesplitst--omgekeerd .gesplitst__beeld { order: 2; }
.paginakop { padding-bottom: 1rem; border-bottom: 1px solid var(--lijn); margin-bottom: 1.5rem; }
@media (max-width: 899px) {
  .gesplitst { grid-template-columns: 1fr; }
  .gesplitst__beeld img { height: auto; min-height: 0; aspect-ratio: 4 / 5; position: static; }
  .gesplitst--omgekeerd .gesplitst__beeld { order: 0; }
}

.rijen { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.rij { padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.rij__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rij__kop .titel { font-size: .88rem; letter-spacing: .16em; }
.rij__waarde { font-size: .88rem; font-weight: 400; text-align: right; white-space: nowrap; }
.rij__waarde a { text-decoration: none; }
.rij__waarde a:hover { text-decoration: underline; }
.rij__extra { margin-top: .5rem; font-size: .8rem; line-height: 1.65; color: var(--zacht); }

/* ---------- werkwijze ---------- */
.stappen { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.stap { display: flex; flex-direction: column; border: 1px solid var(--taupe); }
.stap img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.stap__tekst { padding: 1.25rem 1.4rem 1.6rem; }
.stap__tekst .titel { font-size: .95rem; letter-spacing: .16em; margin-bottom: .75rem; }
.stap__tekst p { font-size: .84rem; }
.prints { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.prints img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 799px) { .stappen { grid-template-columns: 1fr; } .prints { grid-template-columns: repeat(2, 1fr); } }

/* ---------- formulier ---------- */
.formulier { display: grid; gap: 1.3rem; margin-top: 1.5rem; }
.formulier__rij { display: grid; gap: 1.3rem; }
@media (min-width: 600px) { .formulier__rij { grid-template-columns: 1fr 1fr; } }
.veld { display: grid; gap: .25rem; }
.veld label { font-weight: 500; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--zacht); }
.veld input, .veld select, .veld textarea {
  width: 100%;
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  border-radius: 0;
  background: transparent;
  color: var(--tekst);
  font: 300 .95rem/1.5 var(--tekst-font);
  transition: border-color .3s var(--ease);
}
.veld :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--taupe); }
.veld textarea { min-height: 7rem; resize: vertical; }
.veld select {
  appearance: none; -webkit-appearance: none; padding-right: 1.5rem; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2377715D' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right .2rem center / .7rem;
}
.honing { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; }
.formulier__voet { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.formulier__privacy { margin: 0; font-size: .78rem; color: var(--zacht); max-width: 34ch; }
.formulier__status { margin: 0; font-size: .88rem; padding: .8rem 1rem; border: 1px solid var(--taupe); }
.formulier__status:empty { display: none; }
.melding { display: none; margin: 0; padding: .8rem 1rem; border: 1px solid var(--taupe); font-size: .88rem; }
.melding:target { display: block; }

/* ---------- lange tekst ---------- */
.prose { width: min(100% - 2 * var(--rand), 42rem); margin-inline: auto; font-size: .88rem; }
.prose h2 { font-family: var(--titel-font); font-weight: 400; font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; margin: 2.2em 0 .6em; }
.prose a { text-decoration: underline; text-decoration-color: var(--taupe); }

/* ---------- footer ---------- */
.site-footer { margin-top: clamp(1rem, 3vw, 2rem); }
.site-footer__binnen { border-top: 1px solid var(--lijn); padding: clamp(2.5rem, 4vw, 3.5rem) 0 1.5rem; }
.site-footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; align-items: start; }
.site-footer__merk img { height: 2rem; width: auto; background: none; }
.site-footer h2 { margin-bottom: .9rem; font-family: var(--tekst-font); font-weight: 500; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--zacht); }
.site-footer li { margin-bottom: .3rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--tekst); text-decoration: underline; }
.site-footer__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 2.5rem; font-size: .74rem; color: var(--zacht); }
.site-footer__onder p { margin: 0; }
@media (max-width: 799px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__merk { grid-column: 1 / -1; } }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100vh; width: 100dvw; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--tekst);
}
.lightbox::backdrop { background: rgba(255, 255, 255, .97); }
.lightbox__figuur { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; height: 100%; padding: 3.75rem 4.5rem 0; }
.lightbox__figuur img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: transparent; }
.lightbox__figuur figcaption { padding: .9rem 1rem 1.25rem; text-align: center; font-size: .78rem; color: var(--zacht); }
.lightbox__knop {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--taupe); border-radius: 0;
  background: var(--wit); color: var(--tekst); cursor: pointer; transition: background-color .3s var(--ease), color .3s;
}
.lightbox__knop:hover { background: var(--taupe); color: var(--wit); }
.lightbox__knop svg { width: .85rem; height: .85rem; stroke: currentColor; fill: none; stroke-width: 1.2; }
.lightbox__sluit { top: 1rem; right: 1rem; }
.lightbox__vorige { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__volgende { right: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__teller { position: absolute; top: 1.75rem; left: 1.25rem; margin: 0; font-weight: 500; font-size: .64rem; letter-spacing: .22em; color: var(--zacht); }
@media (max-width: 639px) {
  .lightbox__figuur { padding: 3.75rem 1rem 0; }
  .lightbox__vorige, .lightbox__volgende { top: auto; bottom: 1rem; translate: none; }
  .lightbox__figuur figcaption { padding-bottom: 4.5rem; padding-inline: 3.5rem; }
}

/* ---------- beweging ---------- */
.js .reveal { opacity: 0; translate: 0 14px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; translate: 0 0; }
.stagger > :nth-child(3n + 2) { --d: .08s; }
.stagger > :nth-child(3n) { --d: .16s; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ---------- lettertypes lokaal (Opus) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-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;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-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;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../assets/fonts/mulish-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;
}