/* ===========================================================================
   Kapsalon Desteny, Deventer
   Richting: het haar is het beeld. Diep espresso-donker als drager, warm
   papier als tegenveld, champagne als enige accent. Terugkerend motief: de
   dunne champagnelijn met vierkant beginpunt, en de doorlopende verticale
   draad in de linkerkantlijn die alle secties aan elkaar rijgt.
   =========================================================================== */

:root {
  /* veld */
  --inkt: #17130f;
  --inkt-2: #211b16;
  --inkt-3: #2d251e;
  --papier: #f6f2ec;
  --papier-2: #ebe4da;

  /* accent en tekst */
  --champ: #c9a97f;
  --champ-diep: #7a5c38;
  --rook-licht: #bbb0a4;
  --rook-donker: #6b6259;
  --wit: #fffdfa;

  /* opening */
  --opening-achtergrond: #17130f;
  --opening-demping: .72;

  /* maat en ritme */
  --rand: clamp(1.15rem, 4.5vw, 4rem);
  --breed: 1320px;
  --ritme: clamp(3.5rem, 7.5vw, 7rem);
  --overlap: clamp(2.25rem, 6.5vw, 6.5rem);
  --draad: clamp(.4rem, 2.2vw, 1.9rem);

  /* letter: systeemfonts, geen extern lettertype (geen IP-adres naar Google) */
  --serif: 'Palatino Linotype', 'Iowan Old Style', 'Palatino', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --veer: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt-2);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  font-weight: 350;
  line-height: 1.68;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p, dl, dd, dt, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection { background: var(--champ); color: var(--inkt); }

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

.overslaan {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--inkt);
  color: var(--wit);
  font-size: .8rem;
  text-decoration: none;
  transition: top .2s var(--veer);
}
.overslaan:focus { top: 1rem; }

/* ---------------------------------------------------------------- omhulsel */

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

.band {
  position: relative;
  z-index: 1;
  padding-block: var(--ritme);
  scroll-margin-top: 5rem;
}

.band--donker { background: var(--inkt); color: var(--wit); }
.band--licht { background: var(--papier); color: var(--inkt-2); }

/* De draad: één doorlopende verticale lijn in de kantlijn, van de eerste
   sectie onder de hero tot de voet. Elke band zet hem opnieuw, zodat hij over
   de sectiegrenzen heen als één lijn leest. */
.band::before,
.voet::before {
  content: '';
  position: absolute;
  left: var(--draad);
  top: 0;
  bottom: 0;
  width: 1px;
  background: currentColor;
  opacity: .16;
  pointer-events: none;
}
.band--licht::before { opacity: .22; }

@media (max-width: 1099px) {
  .band::before, .voet::before { display: none; }
}

/* ---------------------------------------------------------------- typografie */

.opmaat {
  font-size: clamp(.66rem, .62rem + .12vw, .74rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champ-diep);
  display: flex;
  align-items: center;
  gap: .75rem;
  line-height: 1.4;
}
.opmaat::before {
  content: '';
  flex: 0 0 auto;
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.opmaat--licht { color: var(--champ); }

.titel {
  font-family: var(--serif);
  font-size: clamp(1.95rem, 1.2rem + 2.9vw, 3.7rem);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-top: clamp(.9rem, 2vw, 1.5rem);
  text-wrap: balance;
}
.titel--licht { color: var(--wit); }

.groot-lood {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1rem + .85vw, 1.7rem);
  font-weight: 350;
  line-height: 1.38;
  letter-spacing: -.012em;
  margin-top: clamp(1.1rem, 2.4vw, 1.85rem);
  max-width: 34ch;
}

.lood {
  margin-top: clamp(.95rem, 1.8vw, 1.4rem);
  max-width: 54ch;
  color: var(--rook-donker);
}
.lood--licht { color: var(--rook-licht); }

.citaat {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2.1rem);
  font-weight: 350;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--champ);
  max-width: 30ch;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(201, 169, 127, .35);
  position: relative;
}
.citaat::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 5px;
  height: 5px;
  background: var(--champ);
}
.citaat--donker { color: var(--champ-diep); border-top-color: rgba(122, 92, 56, .3); }
.citaat--donker::before { background: var(--champ-diep); }
.citaat--breed {
  max-width: 40ch;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.7rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.75rem);
}

/* ---------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .92em 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: clamp(.8rem, .76rem + .12vw, .875rem);
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .35s var(--veer), color .35s var(--veer),
              border-color .35s var(--veer), transform .35s var(--veer);
}
.knop:hover { transform: translateY(-2px); }

.knop--vol { background: var(--champ); color: #1a1510; }
.knop--vol:hover { background: var(--wit); color: var(--inkt); }

.knop--lijn { border-color: rgba(255, 253, 250, .4); color: var(--wit); }
.knop--lijn:hover { border-color: var(--wit); background: rgba(255, 253, 250, .1); }

.knop--donker { background: var(--inkt); color: var(--wit); }
.knop--donker:hover { background: var(--champ-diep); }

/* ---------------------------------------------------------------- kopbalk */

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .4s var(--veer), box-shadow .4s var(--veer);
}

.kop__binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: clamp(.9rem, 1.6vw, 1.35rem) var(--rand);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

/* Boven de hero geen balk maar een zachte verduistering, zodat de witte
   merknaam ook op een licht beeld leesbaar blijft. */
.kop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(13, 10, 8, .62), rgba(13, 10, 8, 0));
  pointer-events: none;
  transition: opacity .4s var(--veer);
}
.kop.is-vast::before { opacity: 0; }

.kop.is-vast {
  background: rgba(23, 19, 15, .92);
  box-shadow: 0 1px 0 rgba(201, 169, 127, .22);
}
@supports (backdrop-filter: blur(10px)) {
  .kop.is-vast { background: rgba(23, 19, 15, .95); backdrop-filter: blur(14px) saturate(140%); }
}

.merk {
  display: grid;
  gap: .18rem;
  text-decoration: none;
  color: var(--wit);
  margin-right: auto;
}
.merk__naam {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.8rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.015em;
}
.merk__onder {
  font-size: .575rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champ);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__link {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  color: rgba(255, 253, 250, .78);
  padding: .3rem 0;
  position: relative;
  transition: color .3s var(--veer);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--champ);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--veer);
}
.nav__link:hover { color: var(--wit); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__bel { display: none; }

.menuknop { display: none; }

@media (max-width: 1023px) {
  .kop__bel .knop__tekst { font-size: .78rem; }
}

@media (max-width: 899px) {
  .kop__bel { display: none; }

  /* merk en menuknop blijven boven het openklappende menu staan */
  .merk { position: relative; z-index: 2; }

  .menuknop {
    display: inline-flex;
    position: relative;
    z-index: 2;
    align-items: center;
    gap: .55rem;
    background: none;
    border: 0;
    padding: .4rem 0;
    color: var(--wit);
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menuknop__streep {
    width: 1.55rem;
    height: 7px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transition: transform .35s var(--veer);
  }
  .menuknop[aria-expanded="true"] .menuknop__streep { transform: rotate(-90deg); }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .35rem;
    padding: 5.5rem var(--rand) 3rem;
    background: var(--inkt);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.2rem);
    transition: opacity .35s var(--veer), transform .45s var(--veer), visibility .35s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 1.2rem + 3vw, 2.4rem);
    font-weight: 350;
    letter-spacing: -.02em;
    color: var(--wit);
    padding: .3rem 0;
  }
  .nav__link::after { display: none; }

  .nav__bel { display: inline-flex; margin-top: 1.6rem; }
}

/* ---------------------------------------------------------------- opening */

.opening { --opening-demping: .72; }

.opening__kop {
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(4.5rem, 11svh, 7rem);
  background: linear-gradient(to top,
    rgba(13, 10, 8, .8) 0%,
    rgba(13, 10, 8, .5) 48%,
    rgba(13, 10, 8, 0) 100%);
}

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

.opening__titel {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1rem + 8.6vw, 7.2rem);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--wit);
  margin-top: clamp(.8rem, 1.8vw, 1.4rem);
  max-width: 14ch;
}

.opening__lead {
  margin-top: clamp(.9rem, 1.8vw, 1.35rem);
  max-width: 36ch;
  color: rgba(255, 253, 250, .82);
  font-size: clamp(.96rem, .92rem + .3vw, 1.125rem);
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(1.4rem, 3vw, 2.25rem);
}

.opening__slot { padding-bottom: clamp(4.5rem, 11svh, 7rem); }
.opening__slotregel {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 2.6vw, 3.1rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--wit);
  max-width: 22ch;
}

.opening__wenk { flex-direction: column; align-items: center; gap: .6rem; }
.wenk__woord {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, .6);
}
.wenk__lijn {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(to bottom, var(--champ), rgba(201, 169, 127, 0));
  transform-origin: top;
  animation: wenkzak 2.4s var(--veer) infinite;
}
@keyframes wenkzak {
  0%, 100% { transform: scaleY(.45); opacity: .5; }
  45% { transform: scaleY(1); opacity: 1; }
}

/* ---------------------------------------------------------------- welkom */

/* De donkere welkomsectie ligt boven de lichte dienstensectie, zodat het
   drieluik met foto's eroverheen kan lopen. */
.welkom { padding-bottom: 0; z-index: 4; }

.welkom__raster {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.gegevens {
  border-top: 1px solid rgba(201, 169, 127, .3);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
}

.gegevens__lijst { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }

.gegevens__rij {
  display: grid;
  gap: .15rem;
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 1px solid currentColor;
  border-color: rgba(255, 253, 250, .13);
}
.gegevens__rij:last-child { border-bottom: 0; padding-bottom: 0; }

.band--donker .gegevens__rij { border-color: rgba(255, 253, 250, .13); }

.gegevens__kop {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champ);
  margin-bottom: .45rem;
}
.gegevens__waarde { font-size: .95rem; color: var(--rook-licht); line-height: 1.5; }
.gegevens__waarde--sterk {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
  color: var(--wit);
  line-height: 1.25;
  margin-top: .1rem;
}
.gegevens__link {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem);
  color: var(--wit);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 127, .5);
  padding-bottom: .1rem;
  transition: border-color .3s var(--veer), color .3s var(--veer);
}
.gegevens__link:hover { color: var(--champ); border-color: var(--champ); }

/* het drieluik van foto's dat de donkere sectie uit loopt */
.trio {
  position: relative;
  z-index: 3;
  margin-top: var(--ritme);
  margin-bottom: calc(-1 * var(--overlap));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.3vw, 1.1rem);
  align-items: end;
}
.trio__item { overflow: hidden; }
.trio__item:nth-child(1) { aspect-ratio: 3 / 4; }
.trio__item:nth-child(2) { aspect-ratio: 3 / 4; margin-bottom: clamp(1rem, 3vw, 3rem); }
.trio__item:nth-child(3) { aspect-ratio: 3 / 4; }
/* Hier staan dezelfde foto's als in de galerij, maar als detailuitsnede op de
   textuur van het haar in plaats van op het hele kapsel. */
.trio__item img { width: 100%; height: 100%; object-fit: cover; }
.trio__item:nth-child(1) img { object-position: 58% 72%; }
.trio__item:nth-child(2) img { object-position: 46% 78%; }
.trio__item:nth-child(3) img { object-position: 38% 62%; }

/* Beeldhouders zijn grid, zodat de foto de volle hoogte van de verhouding
   pakt zonder op zijn pixelhoogte te blijven staan. */
.trio__item,
.ext__beeld,
.over__beeld,
.gal__knop { display: grid; }

.beeldhouder { overflow: hidden; }
.beeldhouder img { transition: transform 1.1s var(--veer); }
.beeldhouder:hover img { transform: scale(1.045); }

/* ---------------------------------------------------------------- diensten */

.diensten {
  padding-top: calc(var(--ritme) + var(--overlap));
  padding-bottom: calc(var(--ritme) + var(--overlap) * .6);
}

.diensten__raster {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: stretch;
}

.diensten__kop { display: flex; flex-direction: column; }

.noot {
  margin-top: clamp(1.6rem, 3.5vw, 2.5rem);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.75rem);
  background: var(--papier-2);
  border-left: 2px solid var(--champ-diep);
  display: grid;
  gap: 1rem;
  justify-items: start;
  align-content: center;
  flex: 1;
}
.noot__tekst { font-size: .95rem; line-height: 1.55; color: var(--inkt-2); max-width: 38ch; }

.dienstlijst { display: grid; }

.dienst {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: .35rem;
  padding: clamp(1.4rem, 2.8vw, 2.1rem) 0;
  border-top: 1px solid rgba(23, 19, 15, .14);
  position: relative;
}
.dienst:last-child { border-bottom: 1px solid rgba(23, 19, 15, .14); }
.dienst::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 0;
  background: var(--champ-diep);
  transition: width .6s var(--veer);
}
.dienst:hover::after { width: 100%; }

.dienst__nr {
  grid-row: 1 / span 3;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--champ-diep);
  line-height: 1.7;
  letter-spacing: .02em;
}
.dienst__naam {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 350;
  line-height: 1.12;
  letter-spacing: -.02em;
  transition: transform .4s var(--veer);
}
.dienst:hover .dienst__naam { transform: translateX(.4rem); }
.dienst__tekst { color: var(--rook-donker); font-size: .975rem; max-width: 48ch; margin-top: .4rem; }
.dienst__detail {
  margin-top: .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--champ-diep);
}

/* ---------------------------------------------------------------- extensions */

/* Geen overflow:hidden hier: het beeld moet juist boven de sectie uit kunnen
   steken, tot in de lichte sectie erboven. */
.ext { z-index: 3; }

.ext__raster {
  display: grid;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

.ext__beeld { aspect-ratio: 3 / 4; }
.ext__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

.lengtes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.5rem, 1.2vw, .85rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.lengte {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  padding: .7rem 1.05rem .6rem;
  border: 1px solid rgba(201, 169, 127, .35);
  border-radius: 2px;
  transition: border-color .35s var(--veer), background-color .35s var(--veer);
}
.lengte:hover { border-color: var(--champ); background: rgba(201, 169, 127, .08); }
.lengte__getal {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 350;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--wit);
}
.lengte__eh {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--champ);
}

.ext__onder { margin-top: clamp(2.25rem, 4.5vw, 4rem); }

.punten {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.punt { padding-top: clamp(1rem, 2vw, 1.4rem); border-top: 1px solid rgba(255, 253, 250, .14); }
.punt__kop {
  font-family: var(--serif);
  font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--wit);
  line-height: 1.2;
}
.punt__tekst { margin-top: .5rem; font-size: .93rem; line-height: 1.6; color: var(--rook-licht); }

/* ---------------------------------------------------------------- resultaten */

.werk { padding-bottom: calc(var(--ritme) * .6); }
.werk::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 18rem;
  background: radial-gradient(70% 100% at 18% 0%, rgba(201, 169, 127, .16), rgba(201, 169, 127, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

.werk__kop { max-width: 46rem; }

.galerij {
  margin-top: clamp(2rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(.6rem, 1.3vw, 1.1rem);
  row-gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.gal { align-self: start; }
.gal__knop {
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--papier-2);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}
.gal__knop img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--veer); }
.gal__knop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 19, 15, .3), rgba(23, 19, 15, 0) 55%);
  opacity: 0;
  transition: opacity .45s var(--veer);
}
.gal__knop:hover img { transform: scale(1.05); }
.gal__knop:hover::after { opacity: 1; }

.gal__bijschrift {
  margin-top: .7rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champ-diep);
}

.gal--a { grid-column: 1 / span 4; }
.gal--b { grid-column: 5 / span 5; margin-top: clamp(1.5rem, 5vw, 4.5rem); }
.gal--c { grid-column: 10 / span 3; }
.gal--d { grid-column: 1 / span 3; }
.gal--e { grid-column: 4 / span 5; margin-top: clamp(1rem, 3.5vw, 3rem); }
.gal--f { grid-column: 9 / span 4; }

.gal--a .gal__knop { aspect-ratio: 3 / 4; }
.gal--b .gal__knop { aspect-ratio: 4 / 5; }
.gal--c .gal__knop { aspect-ratio: 2 / 3; }
.gal--d .gal__knop { aspect-ratio: 2 / 3; }
.gal--e .gal__knop { aspect-ratio: 4 / 5; }
.gal--f .gal__knop { aspect-ratio: 3 / 4; }

.gal--a img { object-position: 50% 22%; }
.gal--b img { object-position: 54% 18%; }
.gal--c img { object-position: 52% 20%; }
.gal--d img { object-position: 50% 24%; }
.gal--e img { object-position: 50% 26%; }
.gal--f img { object-position: 48% 30%; }

/* ---------------------------------------------------------------- over ons */

.over {
  padding-top: calc(var(--ritme) * .6);
  background: var(--papier-2);
}
.over::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122, 92, 56, .3) 18%, rgba(122, 92, 56, .3) 82%, transparent);
  pointer-events: none;
}

.over__raster {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.over__beelden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  align-items: start;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}
.over__beeld--groot { aspect-ratio: 3 / 4; }
.over__beeld--klein { aspect-ratio: 1 / 1; margin-top: clamp(1rem, 3vw, 2.5rem); }
.over__beelden img { width: 100%; height: 100%; object-fit: cover; }
.over__beeld--groot img { object-position: 58% 45%; }
.over__beeld--klein img { object-position: 62% 40%; }

.team {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.3rem);
  margin-top: clamp(1.6rem, 3vw, 2.25rem);
}
.lid {
  padding-left: clamp(.9rem, 2vw, 1.25rem);
  border-left: 1px solid rgba(122, 92, 56, .4);
}
.lid__naam {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.lid__rol { margin-top: .25rem; font-size: .875rem; color: var(--rook-donker); line-height: 1.5; }

/* ---------------------------------------------------------------- vragen */

.vragen { padding-bottom: 0; z-index: 2; }

.vragen__paneel {
  background: var(--inkt);
  color: var(--wit);
  border-radius: clamp(.75rem, 1.6vw, 1.5rem) clamp(.75rem, 1.6vw, 1.5rem) 0 0;
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.25rem, 3.5vw, 3.5rem) clamp(2.5rem, 5.5vw, 5rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.vragen__kop .knop { margin-top: clamp(1.4rem, 3vw, 2rem); }

.vragen__lijst { display: grid; }

.vraag { border-top: 1px solid rgba(255, 253, 250, .14); }
.vraag:last-child { border-bottom: 1px solid rgba(255, 253, 250, .14); }

.vraag__v {
  list-style: none;
  cursor: pointer;
  display: block;
  position: relative;
  padding: clamp(.95rem, 2vw, 1.3rem) 2.4rem clamp(.95rem, 2vw, 1.3rem) 0;
  font-family: var(--serif);
  font-size: clamp(1rem, .95rem + .4vw, 1.22rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--wit);
  transition: color .3s var(--veer);
}
.vraag__v::-webkit-details-marker { display: none; }
.vraag__v:hover { color: var(--champ); }
.vraag__v::after,
.vraag__v::before {
  content: '';
  position: absolute;
  right: .35rem;
  top: 50%;
  width: .8rem;
  height: 1px;
  background: var(--champ);
  transition: transform .4s var(--veer), opacity .3s var(--veer);
}
.vraag__v::before { transform: rotate(90deg); }
.vraag[open] .vraag__v::before { transform: rotate(0deg); opacity: 0; }

.vraag__a {
  padding: 0 clamp(1rem, 6vw, 4rem) clamp(1.1rem, 2.2vw, 1.5rem) 0;
  margin-top: -.3rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--rook-licht);
  max-width: 58ch;
}

/* ---------------------------------------------------------------- contact */

.contact {
  overflow: hidden;
  padding-top: clamp(2.5rem, 5.5vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.contact__raster {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}

.telgroot {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.1rem + 3.2vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--wit);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 127, .45);
  padding-bottom: .12em;
  transition: color .35s var(--veer), border-color .35s var(--veer);
}
.telgroot:hover { color: var(--champ); border-color: var(--champ); }

.kanalen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(1.1rem, 2.5vw, 2rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.kanaal__link {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--rook-licht);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 253, 250, .22);
  padding-bottom: .22rem;
  transition: color .3s var(--veer), border-color .3s var(--veer);
}
.kanaal__link:hover { color: var(--champ); border-color: var(--champ); }

.contact__kaart {
  border-top: 1px solid rgba(201, 169, 127, .3);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  justify-items: start;
}

.watermerk {
  position: absolute;
  left: 50%;
  bottom: clamp(-2.2rem, -3vw, -1rem);
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 19vw, 17rem);
  font-weight: 300;
  line-height: .72;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: rgba(255, 253, 250, .045);
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------------- voet */

.voet {
  position: relative;
  background: var(--inkt);
  color: var(--wit);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 253, 250, .1);
}

.voet__raster {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.voet__nav { display: flex; flex-wrap: wrap; gap: .5rem clamp(1rem, 2vw, 1.75rem); }
.voet__link {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 253, 250, .68);
  text-decoration: none;
  transition: color .3s var(--veer);
}
.voet__link:hover { color: var(--champ); }
.voet__link--sterk {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--wit);
  display: inline-block;
  margin-top: .5rem;
}

.voet__blok { display: grid; gap: .2rem; }
.voet__regel { font-size: .8rem; color: var(--rook-licht); }

/* ---------------------------------------------------------------- belbalk */

.belbalk {
  display: none;
  position: fixed;
  left: .7rem;
  right: .7rem;
  bottom: .7rem;
  z-index: 90;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  background: var(--champ);
  color: #1a1510;
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  box-shadow: 0 .6rem 1.8rem rgba(23, 19, 15, .3);
  opacity: 0;
  transform: translateY(140%);
  transition: opacity .35s var(--veer), transform .35s var(--veer);
  pointer-events: none;
}
.belbalk.is-zichtbaar { opacity: 1; transform: translateY(0); pointer-events: auto; }
.belbalk__tekst { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.belbalk__nr { font-family: var(--serif); font-size: .98rem; white-space: nowrap; }

@media (max-width: 699px) {
  .belbalk { display: flex; }
  .voet { padding-bottom: 5rem; }
}

/* ---------------------------------------------------------------- lichtbak */

.lichtbak {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(13, 10, 8, .94);
}
.lichtbak[hidden] { display: none; }
.lichtbak__foto {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .5);
}
.lichtbak__sluit {
  position: absolute;
  top: clamp(.75rem, 2.5vw, 1.75rem);
  right: clamp(.75rem, 2.5vw, 1.75rem);
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(255, 253, 250, .3);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .3s var(--veer), border-color .3s var(--veer);
}
.lichtbak__sluit:hover { background: rgba(255, 253, 250, .12); border-color: var(--champ); }
.lichtbak__kruis { position: relative; display: block; width: 1rem; height: 1rem; }
.lichtbak__kruis::before,
.lichtbak__kruis::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--wit);
}
.lichtbak__kruis::before { transform: rotate(45deg); }
.lichtbak__kruis::after { transform: rotate(-45deg); }

/* ---------------------------------------------------------------- onthullen */

/* Transform-only: de inhoud staat er altijd op volle dekking, ook vóór de
   animatie. Zo kan een trage lading of een gemiste observer nooit een lege
   sectie opleveren, alleen een rustende positie net onder zijn plek. */
.js [data-reveal],
.js [data-reveal-group] > * {
  transform: translateY(1.15rem);
}
.js [data-reveal].is-in,
.js [data-reveal-group] > .is-in {
  transform: none;
  transition: transform .8s var(--veer);
  transition-delay: var(--vert, 0ms);
}

/* ===========================================================================
   BREEDTES
   =========================================================================== */

@media (min-width: 700px) {
  .noot { grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
}

@media (min-width: 620px) {
  .punten { grid-template-columns: 1fr 1fr; }
  .punten .punt:nth-child(3) { grid-column: 1 / -1; max-width: 52ch; }
}

@media (min-width: 760px) {
  .vragen__paneel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

@media (min-width: 900px) {
  .welkom__raster { grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .95fr); }
  .diensten__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
  .ext__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
  .over__raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); }
  .contact__raster { grid-template-columns: minmax(0, 1.5fr) minmax(15rem, .8fr); }
  .voet__raster { grid-template-columns: auto 1fr auto; align-items: center; }
  .voet__nav { justify-content: center; }
  .voet__blok { justify-items: end; text-align: right; }

  /* het grote extensionsbeeld loopt de lichte sectie erboven in */
  .ext__beeld {
    aspect-ratio: 2 / 3;
    margin-top: calc(-1 * (var(--ritme) + var(--overlap) * .75));
  }

  /* rechts van de over-tekst: een groot vierkant detail met een kleiner
     beeld dat naar binnen terugstapt */
  .over__beelden { grid-template-columns: 1fr; margin-top: 0; }
  .over__beeld--groot { aspect-ratio: 4 / 5; }
  .over__beeld--klein { aspect-ratio: 1 / 1; width: 56%; margin-right: auto; margin-top: 0; }
}

@media (min-width: 980px) {
  .punten { grid-template-columns: repeat(3, 1fr); }
  .punten .punt:nth-child(3) { grid-column: auto; max-width: none; }
}

@media (max-width: 899px) {
  .ext__beeld { aspect-ratio: 16 / 10; }
  .ext__beeld img { object-position: 50% 18%; }
}

/* de fotostrook als veegrij op een telefoon */
@media (max-width: 759px) {
  .trio {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: .6rem;
    align-items: stretch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: .25rem;
  }
  .trio::-webkit-scrollbar { display: none; }
  .trio__item {
    flex: 0 0 70%;
    scroll-snap-align: center;
    margin-bottom: 0 !important;
  }

  .galerij { grid-template-columns: repeat(6, 1fr); }
  .gal--a { grid-column: 1 / span 4; }
  .gal--b { grid-column: 3 / span 4; margin-top: 0; }
  .gal--c { grid-column: 1 / span 4; }
  .gal--d { grid-column: 3 / span 4; }
  .gal--e { grid-column: 1 / span 4; margin-top: 0; }
  .gal--f { grid-column: 3 / span 4; }
}

@media (max-width: 420px) {
  .galerij { grid-template-columns: 1fr; }
  .gal { grid-column: 1 / -1 !important; }
  .belbalk__tekst { font-size: .7rem; letter-spacing: .06em; }
}

/* ===========================================================================
   MINDER BEWEGING
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .wenk__lijn { animation: none; transform: none; }
}