/* ===========================================================================
   Bij Linda, Veldhoven
   Kapsalon voor dames, heren en kinderen.

   Richting: warm en huiselijk, geen salon-chic. De zaak is een buurtsalon waar
   kinderen op een motor geknipt worden en ouders rustig in de stoel kunnen.
   Dat vraagt om hout, zand en een stevig oranje uit hun eigen huisstijl, een
   warme boekletter en een doorlopende compositie zonder kaartjes.
   Het schaarteken uit hun logo komt op elke sectie terug.

   De letters staan bewust in de letterkast van het apparaat zelf: geen enkel
   lettertype wordt bij Google opgehaald, zodat het IP-adres van een bezoeker
   nergens heen gaat voordat hij iets gevraagd heeft.
   =========================================================================== */

:root {
  /* kleur */
  --ink:        #1C1917;
  --ink-zacht:  #3A332E;
  --ink-mist:   #A89C92;
  --papier:     #FBF7F2;
  --room:       #F3EADF;
  --klei:       #E4D4C1;
  --oranje:     #E08A3C;
  --oranje-op:  #A3540F;   /* oranje dat op licht papier leest */
  --oranje-licht: #F0B277;
  --grijs:      #5A514A;
  --lijn:       rgba(28, 25, 23, .14);
  --lijn-licht: rgba(255, 255, 255, .18);

  /* de opening */
  --opening-achtergrond: #1C1917;
  --opening-demping: .72;

  /* maat */
  --rand: clamp(1.25rem, 4vw, 3rem);
  --breed: 1240px;
  --ritme: clamp(4.25rem, 8vw, 7rem);

  /* letter */
  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- basis -------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.04;
  text-wrap: balance;
}

p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }

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

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

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.1rem;
  background: var(--ink);
  color: var(--papier);
  font-size: .9rem;
  text-decoration: none;
}
.overslaan:focus { left: .75rem; top: .75rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--tekst);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translateY(-2px); }

.btn--vol { background: var(--oranje); color: var(--ink); }
.btn--vol:hover { background: var(--oranje-licht); }

.btn--lijn { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--lijn:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

.btn--donker { background: var(--ink); color: var(--papier); }
.btn--donker:hover { background: var(--ink-zacht); }

.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .85rem;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s ease, gap .2s ease;
}
.tekstlink svg { width: 1em; height: 1em; flex: none; }
.tekstlink:hover { gap: .75rem; color: var(--oranje); }

/* ---- kicker: het schaarteken met een label ------------------------------ */

.kicker {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  color: var(--oranje-op);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.kicker svg { width: 1.45rem; height: 1.45rem; flex: none; }
.kicker--donker { color: var(--ink); }
.kicker--licht { color: var(--oranje); }

.kop2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  max-width: 18ch;
}
.kop3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: .7rem;
}
.kop3--los { margin-top: 2.1rem; }

/* ===========================================================================
   BALK
   =========================================================================== */

.balk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.balk.is-plakkend {
  background: rgba(28, 25, 23, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
}

/* Bovenaan staat de balk op de herofoto, en die is daar licht. Een sluier
   onder de balk houdt de witte letters leesbaar tot de balk zelf kleur krijgt. */
.balk::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 8rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(28, 25, 23, .85) 0%, rgba(28, 25, 23, .45) 45%, rgba(28, 25, 23, 0) 100%);
  transition: opacity .35s ease;
}
.balk.is-plakkend::before { opacity: 0; }

.balk__binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: .9rem var(--rand);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--papier);
  text-decoration: none;
  margin-right: auto;
}
.merk__teken { color: var(--oranje); }
.merk__teken svg { width: 2.1rem; height: 2.1rem; }
.merk__naam {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.menu a {
  position: relative;
  color: var(--papier);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  padding: .3rem 0;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--oranje);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.menu a:hover::after { transform: scaleX(1); }

.balk__acties { display: flex; align-items: center; gap: .75rem; }

.belknop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--oranje);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s ease;
}
.belknop svg { width: 1.05rem; height: 1.05rem; flex: none; }
.belknop:hover { background: var(--oranje-licht); }

.menuknop {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .6rem .9rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: transparent;
  color: var(--papier);
  font-family: var(--tekst);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.menuknop__strepen {
  position: relative;
  width: 1rem;
  height: 2px;
  background: currentColor;
}
.menuknop__strepen::before,
.menuknop__strepen::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .3s ease;
}
.menuknop__strepen::before { top: -5px; }
.menuknop__strepen::after { top: 5px; }
.menuknop[aria-expanded="true"] .menuknop__strepen { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__strepen::before { transform: translateY(5px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__strepen::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 919px) {
  .menuknop { display: inline-flex; }
  .menu {
    position: absolute;
    inset: 100% var(--rand) auto var(--rand);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.1rem;
    border-radius: 16px;
    background: rgba(28, 25, 23, .97);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: .85rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .menu a:last-child { border-bottom: 0; }
  .menu a::after { display: none; }
}

@media (max-width: 479px) {
  .belknop__nr { display: none; }
  .belknop { padding: .6rem .7rem; }
  .menuknop__label { display: none; }
  .menuknop { padding: .6rem .75rem; }
}

/* ===========================================================================
   DE OPENING: alleen de kop, de knoppen en de kleuren zijn van ons.
   =========================================================================== */

.kop {
  position: relative;
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: 0 var(--rand) clamp(4rem, 10svh, 6.5rem);
  color: #fff;
}

/* Stilstaand ligt de kop op de onderrand van de foto, en daar doet de demping van
   de opening zelf het werk. Zodra het drieluik opengaat schuiven de panelen uit
   elkaar en valt de bovenrand van de kop op licht beeld: raam, straat, lucht.
   Daar is een tekstschaduw niet genoeg. Deze sluier komt er alleen dan bij, loopt
   door tot buiten de kolom zodat de rand nergens als lijn leest, en laat het
   stilstaande beeld precies zoals het was. (opening.css blijft onaangeraakt.) */
.opening-aan .kop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4rem -50vw -2rem;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(20, 17, 15, .74) 0%,
    rgba(20, 17, 15, .62) 46%,
    rgba(20, 17, 15, .34) 76%,
    rgba(20, 17, 15, 0) 100%
  );
}

/* Stilstaand ligt deze regel in de demping en leest hij prima. Zodra het drieluik
   opengaat schuift het linkerpaneel eronder: raam, spiegel, straat, allemaal licht.
   Een tekstschaduw redde dat niet, de regel verdween. Hij krijgt daarom zijn eigen
   donkere plaatje mee, zo klein dat het als label leest en niet als balk. */
.kop__opmaat {
  display: inline-block;
  padding: .42rem .95rem .38rem;
  border-radius: 999px;
  background: rgba(20, 17, 15, .62);
  box-shadow: inset 0 0 0 1px rgba(240, 178, 119, .32);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oranje-licht);
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 8px rgba(20, 17, 15, .8);
}
@supports (backdrop-filter: blur(1px)) {
  .kop__opmaat { background: rgba(20, 17, 15, .46); backdrop-filter: blur(7px); }
}

/* Op 375px loopt dit kleine kapitaal met .2em spatiëring tot tegen beide randen
   aan; daar mag het dichter op elkaar staan. */
@media (max-width: 479px) {
  .kop__opmaat { font-size: .7rem; letter-spacing: .12em; padding: .38rem .8rem .34rem; }
}

.kop__titel {
  font-size: clamp(2.3rem, 5.7vw, 4.8rem);
  font-weight: 400;
  line-height: 1.02;
  max-width: 15ch;
  color: #fff;
  text-shadow: 0 2px 26px rgba(20, 17, 15, .35);
}

/* Deze zin is 43 tekens. Op 34ch brak hij af na "jong en" en bleef "oud." als los
   woord op de tweede regel staan, pal onder de h1. Hij past nu in één regel. */
.kop__zin {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.5;
  text-wrap: balance;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 14px rgba(20, 17, 15, .6);
}

.kop__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.9rem;
}

.slotregel {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: 0 var(--rand) clamp(4rem, 10svh, 6.5rem);
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
}

.wenk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: rgba(255, 255, 255, .72);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.wenk svg { width: 1.1rem; height: 1.1rem; animation: wenken 2.4s ease-in-out infinite; }

@keyframes wenken {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 699px) {
  html.opening-aan .opening__wenk, .opening__wenk { display: none; }
}

/* ===========================================================================
   ONS VERHAAL
   =========================================================================== */

.verhaal {
  position: relative;
  z-index: 2;
  padding: var(--ritme) 0;
  /* het papier warmt onderin alvast op naar de oranje band die eronder komt */
  background:
    linear-gradient(to bottom, rgba(224, 138, 60, 0) 62%, rgba(224, 138, 60, .2) 100%),
    var(--papier);
}

.verhaal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.verhaal__lede {
  font-family: var(--display);
  font-size: clamp(1.38rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.015em;
  max-width: 25ch;
}

.verhaal__na {
  margin-top: 1.5rem;
  max-width: 48ch;
  color: var(--grijs);
}

.feiten {
  margin-top: 2.5rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--lijn);
  max-width: 44ch;
}
.feit {
  display: grid;
  gap: .2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lijn);
}
.feit__kop { font-weight: 700; font-size: .98rem; }
.feit__uitleg { color: var(--grijs); font-size: .94rem; line-height: 1.55; }

.verhaal__beeld {
  position: relative;
  z-index: 2;
}
.beeldnoot {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--grijs);
  text-align: right;
}

/* De sfeerbeelden zijn zware bestanden. Zolang er nog niet geschilderd is, mag de
   houder geen dood beige vlak zijn: een warm verloop in de eigen kleuren leest als
   onderdeel van het ontwerp. Zodra het beeld er staat dekt het de houder volledig
   af (width/height 100% met cover), dus dit is alleen te zien in het wachtmoment. */
.uitsnede,
.uitsnede__kast,
.portret__kaart {
  background-color: var(--klei);
  background-image: linear-gradient(145deg, #EADCCA 0%, #DCC7AC 48%, #C9AE8E 100%);
}

.uitsnede { position: relative; overflow: hidden; }
.uitsnede img { width: 100%; height: 100%; object-fit: cover; }

/* De gemaakte sfeerbeelden komen uit een donkerder pand dan de herofoto. Een
   lichte optrek houdt ze bij elkaar als één reeks in plaats van losse foto's. */
.uitsnede--hoek img,
.uitsnede--detail img,
.uitsnede--stoel img,
.uitsnede__kast img,
.speelband img { filter: brightness(1.06) saturate(.96); }

.uitsnede--hoek {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(28, 25, 23, .18);
}
.uitsnede--hoek img { object-position: 32% 58%; }

/* het tweede, kleinere beeldmoment: een detail dat over de hoek van de grote
   foto valt, met een papieren rand eromheen zodat de twee niet in elkaar lopen */
.uitsnede--detail {
  position: absolute;
  left: -1.75rem;
  bottom: 1.5rem;
  width: 58%;
  aspect-ratio: 3 / 2;
  border: 7px solid var(--papier);
  border-radius: 3px;
  box-shadow: 0 16px 34px rgba(28, 25, 23, .24);
}
/* Het bronbeeld staat op een vierkant doek met een lichte rand eromheen. De
   opschaling snijdt die rand weg, zodat er geen wit randje in de uitsnede valt. */
.uitsnede--detail img { transform: scale(1.22); object-position: 50% 52%; }

/* een dun oranje kader dat achter het beeld uitsteekt */
.verhaal__beeld::before {
  content: "";
  position: absolute;
  inset: -.9rem -.9rem auto auto;
  width: 60%;
  height: 45%;
  border: 1px solid var(--oranje);
  z-index: -1;
}

@media (max-width: 859px) {
  .verhaal__grid { grid-template-columns: 1fr; }
  .verhaal__beeld { max-width: 26rem; }
  .verhaal__lede { max-width: 28ch; }
  .uitsnede--detail { left: 0; bottom: 1rem; width: 62%; }
}

/* ===========================================================================
   VOOR KINDEREN: de volle-breedte oranje band, het keermoment van de pagina
   =========================================================================== */

.kinderen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--oranje);
  color: var(--ink);
  padding: calc(var(--ritme) + 1.25rem) 0 0;
}

/* een zacht patroon van haarslagen, een knipoog naar hun oude oranje vlak */
.kinderen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%231C1917' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 30c12-16 30-16 42 0s30 16 42 0'/%3E%3Cpath d='M-10 90c12-16 30-16 42 0s30 16 42 0'/%3E%3Cpath d='M50 90c12-16 30-16 42 0s30 16 42 0'/%3E%3C/g%3E%3C/svg%3E");
}

.kinderen__waas {
  position: absolute;
  z-index: -1;
  left: -10rem;
  top: 2rem;
  width: min(34rem, 52vw);
  color: rgba(28, 25, 23, .09);
  pointer-events: none;
}
.kinderen__waas svg { width: 100%; height: auto; }

.kinderen__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

.kinderen__titel {
  font-size: clamp(2.15rem, 4.8vw, 3.8rem);
  max-width: 14ch;
}

.kinderen__p {
  margin-top: 1.5rem;
  font-size: clamp(1.02rem, 1.5vw, 1.12rem);
  line-height: 1.68;
  max-width: 44ch;
  color: #35281A;
}

/* De autostoel is het eigen gezicht van deze zaak. Hij staat daarom niet in een
   rijtje, maar als los beeld dat een stukje boven de kop uit komt. */
.kinderen__beeld {
  position: relative;
  margin-top: clamp(.5rem, 2vw, 2.5rem);
  margin-left: auto;
  max-width: 27rem;
}
.uitsnede--stoel {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  box-shadow: 0 26px 54px rgba(28, 25, 23, .26);
}
/* Dichter op de autostoel: zonder deze opschaling vult het hoge plafond het
   bovenste derde van de uitsnede en wordt de stoel zelf een detail. */
.uitsnede--stoel img {
  object-position: 42% 62%;
  transform: scale(1.35);
  transform-origin: 40% 60%;
}
.kinderen__beeld figcaption {
  margin-top: .85rem;
  font-size: .85rem;
  color: #35281A;
}

.speelgoed {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(28, 25, 23, .25);
}
.speel {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.6rem 1.25rem 0 0;
  border-right: 1px solid rgba(28, 25, 23, .25);
}
.speel:last-child { border-right: 0; }
.speel:not(:first-child) { padding-left: 1.25rem; }
.speel__teken svg { width: 2rem; height: 2rem; }
.speel__naam {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

/* De oranje band eindigt niet met een rand maar met beeld: de speelhoek over de
   volle breedte, zodat het oog van kleur naar foto rolt in plaats van te stoppen. */
.speelband {
  position: relative;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  height: clamp(15rem, 34vw, 29rem);
  /* warm donker in plaats van effen zwart, zodat de band ook in het wachtmoment
     bij de oranje band erboven hoort en niet als gat in de pagina leest */
  background: linear-gradient(160deg, #3B2A1B 0%, #241B15 55%, var(--ink) 100%);
}
/* De uitsnede pakt de zithoek, de zitzak met de tekentafel en de air-hockeytafel;
   de balie en de schappen erboven blijven er net buiten. */
.speelband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* de sluier loopt over de volle breedte, de tekst erin blijft op de kolom staan.
   Hij houdt de onderrand leesbaar en laat de speelhoek zelf vrij. */
.speelband::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(20, 17, 15, .86), rgba(20, 17, 15, .4) 45%, rgba(20, 17, 15, 0));
  pointer-events: none;
}
.speelband .rand {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding-bottom: 1.4rem;
}
.speelband__noot {
  color: #fff;
  font-size: .9rem;
  letter-spacing: .01em;
}

@media (max-width: 859px) {
  .kinderen__grid { grid-template-columns: 1fr; align-items: start; }
  .kinderen__titel { max-width: 16ch; }
  .kinderen__beeld { max-width: 24rem; }
  .speelgoed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speel:nth-child(2n) { border-right: 0; }
  .speel:nth-child(-n+2) { border-bottom: 1px solid rgba(28, 25, 23, .25); padding-bottom: 1.5rem; }
  .speel:nth-child(odd) { padding-left: 0; }
  .speel:nth-child(even) { padding-left: 1.25rem; }
}

@media (max-width: 439px) {
  .speelgoed { grid-template-columns: 1fr; }
  .speel { border-right: 0; border-bottom: 1px solid rgba(28, 25, 23, .25); padding: 1.4rem 0; }
  .speel:last-child { border-bottom: 0; }
  .speel:nth-child(even) { padding-left: 0; }
}

/* ===========================================================================
   SERVICES
   =========================================================================== */

.services {
  position: relative;
  padding: var(--ritme) 0;
  /* de warmte van de band erboven zakt nog even door in het papier */
  background:
    linear-gradient(to bottom, rgba(224, 138, 60, .13) 0, rgba(224, 138, 60, 0) 20rem),
    var(--papier);
}

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.dienst-lijst {
  margin-top: 2.25rem;
  border-top: 1px solid var(--lijn);
}
.dienst {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: .4rem 2rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--lijn);
  transition: padding-left .3s ease;
}
.dienst::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 50%;
  width: .45rem;
  height: .45rem;
  margin-top: -.22rem;
  border-radius: 50%;
  background: var(--oranje);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .3s ease;
}
.dienst:hover { padding-left: .55rem; }
.dienst:hover::before { opacity: 1; transform: scale(1); }

.dienst__naam {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.8vw, 1.38rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.dienst__uitleg { color: var(--grijs); font-size: .95rem; line-height: 1.55; }

/* De oproep hoort bij het beeld, niet onder de lijst: zo lopen beide kolommen
   even ver door en blijft er rechts geen leeg vlak staan onder de foto. */
.services__oproep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: 1.4rem 1.5rem;
  background: var(--room);
  border-left: 3px solid var(--oranje);
  border-radius: 2px;
}
.services__noot {
  flex: 1 1 12rem;
  font-size: .98rem;
  line-height: 1.55;
  margin: 0;
}

/* dit beeld komt omhoog, dwars door de onderrand van de fotoband erboven, met een
   papieren rand eromheen zodat het als opgeplakte print leest en niet als naad */
.services__zij {
  position: relative;
  z-index: 3;
  margin-top: clamp(-9rem, -8vw, -3rem);
}
.services__beeld { position: relative; }
.services__beeld figcaption {
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--grijs);
}
.uitsnede__kast {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 8px solid var(--papier);
  border-radius: 4px;
  box-shadow: 0 26px 54px rgba(28, 25, 23, .24);
}
.uitsnede__kast img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 55%; transform: scale(1.09); }

@media (max-width: 859px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__zij { margin-top: clamp(2.25rem, 5vw, 3rem); }
  .services__beeld { max-width: 24rem; }
  .dienst { grid-template-columns: 1fr; gap: .25rem; }
}

/* ===========================================================================
   SFEERBAND: volle breedte, de wasplek in een warme duotoon
   =========================================================================== */

.sfeer {
  position: relative;
  isolation: isolate;
  min-height: clamp(20rem, 46vw, 32rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;
  background: var(--ink);
}

/* De wasplek, in een warme duotoon zodat de band een ander beeldmoment is dan
   de kleurenfoto's erboven. Bewust zonder mix-blend-mode: een pseudo-element
   wordt voor de <img> geschilderd, dus een multiply-laag zou niets doen. */
.sfeer__beeld { position: absolute; inset: 0; z-index: -1; }
.sfeer__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter: grayscale(1) sepia(.45) contrast(1.08) brightness(.95);
}
/* De sluier was zo zwaar dat er een effen bruin vlak overbleef in plaats van een
   foto. Hij is nu onderaan nog donker genoeg voor de witte regel, en laat
   daarboven de wasplek zelf zien. */
.sfeer__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 17, 15, .9) 0%, rgba(74, 38, 11, .62) 42%, rgba(140, 74, 26, .4) 100%);
}

.sfeer__regel {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.7vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: #fff;
  max-width: 19ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(20, 17, 15, .3);
}

/* ===========================================================================
   ONS TEAM
   =========================================================================== */

.team {
  background: var(--room);
  padding: var(--ritme) 0;
}

.team__kop { max-width: 46rem; }
.team__zin {
  margin-top: 1.1rem;
  max-width: 44ch;
  color: var(--grijs);
  font-size: 1.05rem;
}

/* De bronfoto's zijn klein (233px breed). Ze worden dus nooit groter getoond
   dan dat, en de compositie komt uit het verspringen, niet uit de maat. */
.portretten {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

/* Twee hoogtes die om en om lopen, geen vier verschillende: zo leest de rij als
   een bedacht ritme en niet als vier losse kaartjes die zijn weggeschoven. */
.portret { display: grid; gap: .85rem; max-width: 15rem; }
.portret--a, .portret--c { margin-top: 0; }
.portret--b, .portret--d { margin-top: clamp(1.75rem, 3.2vw, 3.25rem); }

.portret__kaart {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(28, 25, 23, .16);
  transition: transform .4s ease, box-shadow .4s ease;
}
.portret__kaart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(.92) contrast(1.02);
  transition: filter .4s ease;
}
.portret:hover .portret__kaart { transform: translateY(-5px); box-shadow: 0 22px 42px rgba(28, 25, 23, .24); }
.portret:hover .portret__kaart img { filter: saturate(1.05) contrast(1.04); }

.portret__naam {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.22rem, 2.1vw, 1.6rem);
  letter-spacing: -.015em;
}

.groet {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--lijn);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--oranje-op);
}

@media (max-width: 759px) {
  .portretten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portret--b, .portret--d { margin-top: 2rem; }
}

/* ===========================================================================
   AFSPRAAK EN CONTACT
   =========================================================================== */

.contact {
  background: var(--ink);
  color: var(--papier);
  padding: var(--ritme) 0 clamp(3rem, 6vw, 4.5rem);
}

.contact__hoofd {
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--lijn-licht);
}

.contact__titel {
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  color: #fff;
  max-width: 14ch;
}

.contact__noot {
  margin-top: 1rem;
  color: var(--ink-mist);
  font-size: 1.02rem;
}

/* De cijfers staan in de schreefloze letter: de boekletter heeft mediaevalcijfers
   met staarten, en dat leest slecht in een telefoonnummer van deze maat. */
.telgroot {
  display: inline-block;
  margin-top: .75rem;
  font-family: var(--tekst);
  font-weight: 700;
  font-size: clamp(2.3rem, 6.4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--oranje);
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color .25s ease;
}
.telgroot:hover { color: var(--oranje-licht); }

.contact__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contact__kolom .kop3 { color: #fff; }
.contact__adres { color: var(--ink-mist); }
.contact__kolom .tekstlink { color: var(--papier); }
.contact__kolom .tekstlink svg { width: 1.05em; height: 1.05em; }
.contact__kolom .tekstlink:hover { color: var(--oranje); }

.tijden { border-top: 1px solid var(--lijn-licht); }
.tijd {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--lijn-licht);
  font-size: .95rem;
}
.tijd__dag { color: var(--papier); }
.tijd__uur { color: var(--ink-mist); font-variant-numeric: tabular-nums; }

/* ---- formulier ---------------------------------------------------------- */

.formulier__let {
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--oranje);
  background: rgba(255, 255, 255, .06);
  color: var(--papier);
  font-size: .92rem;
  line-height: 1.55;
}

.formulier { display: grid; gap: .9rem; }
.veldrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.veld { display: grid; gap: .35rem; margin: 0; }
.veld label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mist);
}
.veld input,
.veld textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  color: var(--papier);
  font-family: var(--tekst);
  font-size: .98rem;
  transition: border-color .25s ease, background-color .25s ease;
}
.veld textarea { resize: vertical; min-height: 6rem; }
.veld input:focus,
.veld textarea:focus {
  border-color: var(--oranje);
  background: rgba(255, 255, 255, .09);
}

.formulier .btn { justify-self: start; margin-top: .35rem; }

.formulier__melding {
  margin-top: .25rem;
  padding: .85rem 1rem;
  border-radius: 4px;
  background: rgba(224, 138, 60, .16);
  border: 1px solid rgba(224, 138, 60, .45);
  color: var(--papier);
  font-size: .93rem;
  line-height: 1.55;
}

@media (max-width: 959px) {
  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__kolom--breed { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .contact__grid { grid-template-columns: 1fr; }
  .veldrij { grid-template-columns: 1fr; }
}

/* ===========================================================================
   VOET: loopt door in de donkere contactsectie, geen naad ertussen
   =========================================================================== */

.voet {
  background: var(--ink);
  color: var(--ink-mist);
  padding: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}
.voet__binnen { padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--lijn-licht); }
.merk--voet { margin-right: 0; margin-bottom: 1.1rem; }

.voet__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-bottom: 1.4rem;
}
.voet__nav a {
  font-size: .92rem;
  text-decoration: none;
  color: var(--ink-mist);
  transition: color .2s ease;
}
.voet__nav a:hover { color: var(--oranje); }

.voet__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.voet__regel { font-size: .92rem; }
.voet__tel {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--oranje);
  text-decoration: none;
  transition: color .2s ease;
}
.voet__tel:hover { color: var(--oranje-licht); }
.voet__klein { margin-top: 1.5rem; font-size: .82rem; color: #948A81; }

/* ===========================================================================
   404: dezelfde taal als de rest, zodat een vertikte link geen kale serverpagina
   oplevert maar gewoon de weg terug wijst
   =========================================================================== */

.kwijt {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(4rem, 12vh, 8rem) 0;
  background: var(--ink);
  color: var(--papier);
  overflow: hidden;
}
.kwijt__beeld { position: absolute; inset: 0; z-index: -1; }
.kwijt__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(1) sepia(.4) brightness(.5);
}
.kwijt__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(20, 17, 15, .92) 0%, rgba(20, 17, 15, .72) 55%, rgba(20, 17, 15, .6) 100%);
}
.kwijt__teken { display: block; color: var(--oranje); }
.kwijt__teken svg { width: 3rem; height: 3rem; }
.kwijt__op {
  margin-top: 1.6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oranje);
}
.kwijt__titel {
  margin-top: 1rem;
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  max-width: 16ch;
  color: #fff;
}
.kwijt__zin {
  margin-top: 1.2rem;
  max-width: 42ch;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .86);
}
.kwijt__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }
.kwijt__adres { margin-top: 2.5rem; font-size: .9rem; color: var(--ink-mist); }

/* ===========================================================================
   ONTHULLEN: pas verborgen als JS er is en de bezoeker beweging wil zien
   =========================================================================== */

.js-reveal [data-reveal],
.js-reveal [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
}
.js-reveal [data-reveal].is-zichtbaar,
.js-reveal [data-reveal-group] > .is-zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}

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

@media print {
  .balk, .opening__wenk { display: none; }
}