/* ===========================================================================
   Christiaan Coiffures, Heemstede
   ---------------------------------------------------------------------------
   Palet en motief komen van het merkbord van de zaak zelf (assets/foto-1.jpg):
   een diepe aubergine met een zilvergrijze open boog, de "C" van Christiaan.
   Die boog keert terug als merkteken, als opmaatteken bij elke kop, als
   watermerk in twee secties en in de scrollwenk.

   Lettertypen staan bewust niet bij Google: een <link> daarheen stuurt het
   IP-adres van elke bezoeker naar Google voordat de pagina iets gevraagd
   heeft. Tot er woff2-bestanden in deze map liggen draait de site op een
   stapel systeemletters: een hoogcontrast-didone waar die er is (Didot,
   Bodoni), en anders Constantia of Georgia.
   =========================================================================== */

:root {
  /* merk */
  --aubergine:       #5e1f64;
  --aubergine-diep:  #2a0d2e;
  --aubergine-nacht: #1a0720;
  --lila:            #c9a9cb;
  --lila-zacht:      #d9ccd9;
  --brons:           #b08d57;

  /* grond */
  --papier: #f7f3f1;
  --wit:    #ffffff;
  --kalk:   #f2ece8;
  --inkt:       #1c1119;
  --inkt-zacht: #5c5059;
  --lijn:       rgba(28, 17, 25, .14);
  --lijn-licht: rgba(255, 255, 255, .16);

  /* letter */
  --kopletter: Didot, 'Bodoni 72', 'Bodoni MT', Constantia, 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --tekstletter: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* maat en ritme */
  --kader: 1280px;
  --marge: clamp(1.25rem, 5vw, 4rem);
  --lucht: clamp(4rem, 7.5vw, 6.5rem);

  /* knoppen van de opening */
  --opening-achtergrond: #2a0d2e;
  --opening-demping: .58;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekstletter);
  font-size: clamp(1rem, .96rem + .22vw, 1.1rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.overslaan {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.overslaan:focus {
  width: auto; height: auto;
  clip-path: none;
  z-index: 300;
  margin: .75rem;
  padding: .7rem 1.1rem;
  background: var(--aubergine-diep);
  color: #fff;
  border-radius: 2px;
  text-decoration: none;
}

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

/* Eén kantlijn voor de hele pagina: alles wat binnen het kader valt deelt
   deze regel, zodat koppen, tekst en beeld op elke breedte op dezelfde lijn
   beginnen. */
.binnen {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin-left: auto;
  margin-right: auto;
}

/* ---- bouwstenen --------------------------------------------------------- */

.ikoon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  display: block;
}

.opmaat {
  display: flex;
  align-items: center;
  gap: .62rem;
  margin-bottom: 1.1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aubergine);
}
.opmaat .ikoon { width: 1.3em; height: 1.3em; color: var(--brons); }
.opmaat--licht { color: var(--lila); }
.opmaat--licht .ikoon { color: var(--lila); opacity: .8; }

.titel {
  font-family: var(--kopletter);
  font-weight: 400;
  font-size: clamp(1.95rem, 1.3rem + 2.8vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.titel--licht { color: #fff; }

.lopend { color: var(--inkt-zacht); }
.lopend + .lopend { margin-top: 1rem; }
.lopend--licht { color: var(--lila-zacht); }
.lopend--breed { max-width: 46ch; }

/* De kop van een sectie lijnt links uit met de inhoud eronder: de breedte
   wordt begrensd op de tekst zelf, niet op de houder, anders zet de
   margin: auto van de houder het hele blok midden op de pagina. */
.sectiekop .titel { margin-bottom: 1.1rem; max-width: 20ch; }
.sectiekop .lopend { max-width: 46ch; }
.sectiekop--smal .titel { max-width: 17ch; }

.tekstlink {
  display: inline-block;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--aubergine);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color .25s ease, border-color .25s ease;
}
.tekstlink:hover { color: var(--inkt); }
.tekstlink--licht { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.tekstlink--licht:hover { border-bottom-color: #fff; }

.knop {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .78rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--tekstletter);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .045em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
}
.knop .ikoon { transition: transform .28s ease; }
.knop--groot { padding: .95rem 1.7rem; font-size: .93rem; }

.knop--vol { background: var(--kalk); color: var(--aubergine-diep); }
.knop--vol:hover { background: #fff; transform: translateY(-2px); }

.knop--donker { background: var(--aubergine); color: #fff; }
.knop--donker:hover { background: var(--aubergine-diep); transform: translateY(-2px); }

.knop--rand { border-color: rgba(255, 255, 255, .42); color: #fff; }
.knop--rand:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.knop--rand:hover .ikoon { transform: translateX(4px); }

/* Het merkteken als watermerk. Twee keer op de pagina, gespiegeld, zodat de
   boog van het merkbord als motief doorloopt en niet alleen in de kopbalk
   staat. */
.watermerk {
  position: absolute;
  left: calc(var(--marge) * -1.2);
  bottom: 4%;
  width: clamp(12rem, 26vw, 24rem);
  height: auto;
  aspect-ratio: 120 / 180;
  color: var(--brons);
  opacity: .14;
  pointer-events: none;
}
.watermerk--rechts {
  left: auto;
  right: calc(var(--marge) * -1.4);
  top: 9%;
  bottom: auto;
  width: clamp(10rem, 22vw, 20rem);
  opacity: .1;
  transform: scaleX(-1);
}

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

.kopbalk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(26, 7, 32, .82), rgba(26, 7, 32, .34) 62%, rgba(26, 7, 32, 0));
  transition: background-color .35s ease, backdrop-filter .35s ease;
}
.kopbalk--vast {
  background: var(--aubergine-nacht);
  border-bottom: 1px solid var(--lijn-licht);
}

.kopbalk__binnen {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(.85rem, 1.8vw, 1.25rem) 0;
}

.merk {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
  text-decoration: none;
  color: #fff;
}
.merk__boog {
  width: 1.15rem;
  height: 1.72rem;
  color: var(--lila);
  transition: transform .4s ease;
}
.merk:hover .merk__boog { transform: translateX(-3px); }
.merk__naam {
  font-size: clamp(.78rem, .7rem + .3vw, .95rem);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.hoofdnav { display: flex; align-items: center; gap: 2rem; }
.hoofdnav__lijst { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.hoofdnav__lijst a {
  position: relative;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .035em;
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  padding: .3rem 0;
  transition: color .25s ease;
}
.hoofdnav__lijst a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--lila);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.hoofdnav__lijst a:hover,
.hoofdnav__lijst a.is-hier { color: #fff; }
.hoofdnav__lijst a:hover::after,
.hoofdnav__lijst a.is-hier::after { transform: scaleX(1); }

.hoofdnav__bel { display: none; }
.menuknop { display: none; }

/* Bellen is bij deze zaak het enige conversiekanaal: er is geen boekingstool
   en geen formulier. Het nummer hoort dus op elke breedte in de kopbalk te
   staan en niet achter het menu te verdwijnen. Op een smal scherm krimpt het
   tot de hoorn alleen; de tekst blijft staan voor wie voorleest. */
@media (max-width: 1023px) {
  .kopbalk__bel {
    padding: .52rem .85rem;
    font-size: .82rem;
  }
  .menuknop {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .2rem;
    background: none;
    border: 0;
    color: #fff;
    font-family: var(--tekstletter);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menuknop__streep {
    position: relative;
    width: 1.4rem;
    height: 1px;
    background: currentColor;
  }
  .menuknop__streep::before,
  .menuknop__streep::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform .3s ease, opacity .3s ease;
  }
  .menuknop__streep::before { top: -6px; }
  .menuknop__streep::after { top: 6px; }
  .menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
  .menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(6px) rotate(45deg); }
  .menuknop[aria-expanded="true"] .menuknop__streep::after { transform: translateY(-6px) rotate(-45deg); }

  .hoofdnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--marge) 2rem;
    background: var(--aubergine-nacht);
    border-bottom: 1px solid var(--lijn-licht);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .hoofdnav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .hoofdnav__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdnav__lijst li + li { border-top: 1px solid var(--lijn-licht); }
  .hoofdnav__lijst a {
    display: block;
    padding: .95rem 0;
    font-size: 1rem;
  }
  .hoofdnav__lijst a::after { display: none; }
  .hoofdnav__bel { display: inline-flex; margin-top: 1.4rem; justify-content: center; }
}

/* Onder de 600 past alleen de hoorn er nog naast de naam en het menu. Het
   nummer zelf wordt weggeklemd in plaats van uitgezet: zo houdt de knop zijn
   naam voor een schermlezer. */
@media (max-width: 599px) {
  .kopbalk__binnen { gap: .85rem; }
  .merk { gap: .55rem; }
  .merk__naam { font-size: .72rem; letter-spacing: .12em; }
  .kopbalk__bel { padding: .52rem .62rem; }
  .kopbalk__bel .ikoon { width: 1.35em; height: 1.35em; }
  .menuknop { gap: 0; }

  .kopbalk__bel span,
  .menuknop__tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

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

.opening__kop {
  padding: clamp(5rem, 14svh, 9rem) 0 clamp(2.5rem, 6svh, 4rem);
  background: linear-gradient(to top, rgba(26, 7, 32, .94) 0%, rgba(26, 7, 32, .74) 46%, rgba(26, 7, 32, 0) 100%);
}

.opening__kopbinnen {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  max-width: 52rem;
}

.opening__titel {
  font-family: var(--kopletter);
  font-weight: 400;
  font-size: clamp(2.45rem, 1.2rem + 5.5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -.018em;
  color: #fff;
}

.opening__regel {
  margin-top: 1.1rem;
  max-width: 34ch;
  font-size: clamp(1rem, .95rem + .32vw, 1.2rem);
  color: var(--lila-zacht);
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

.opening__slot {
  padding: 0 0 clamp(3rem, 9svh, 6rem);
  text-align: center;
}
.opening__slotregel {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  font-family: var(--kopletter);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 24px rgba(26, 7, 32, .85);
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.opening__wenklijn {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8));
}
.opening__wenktekst {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

/* ---- aanloop: de donkere grond loopt door uit de opening ----------------- */

.aanloop {
  background: linear-gradient(to bottom, var(--aubergine-diep), var(--aubergine-nacht));
  color: #fff;
  padding: clamp(3.25rem, 6.5vw, 5.5rem) 0 clamp(3.25rem, 6.5vw, 5rem);
}

.aanloop__binnen {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
}

.aanloop__titel {
  font-family: var(--kopletter);
  font-weight: 400;
  font-size: clamp(1.65rem, 1.05rem + 2.4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  color: #fff;
  max-width: 20ch;
}

.aanloop__uitleg {
  margin-top: 1.1rem;
  max-width: 42ch;
  color: var(--lila-zacht);
}

@media (min-width: 900px) {
  .aanloop__zin {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: end;
  }
  .aanloop__uitleg { margin-top: 0; }
}

.feiten {
  display: grid;
  gap: 0;
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--lijn-licht);
}
.feit { padding: 1.6rem 0; }
.feit + .feit { border-top: 1px solid var(--lijn-licht); }

.feit__label {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lila);
}
.feit__label .ikoon { width: 1.2em; height: 1.2em; }

.feit__waarde {
  margin: .8rem 0 .95rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #fff;
  max-width: 26ch;
}

@media (min-width: 760px) {
  .feiten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  .feit { padding: 1.9rem 0 .5rem; }
  .feit + .feit { border-top: 0; }
}

/* ---- de salon: het beeld steekt omhoog de donkere band in ---------------- */

.salon {
  --overlap: clamp(3.5rem, 11vw, 8.5rem);
  position: relative;
  background: linear-gradient(to bottom, var(--aubergine-nacht) 0 var(--overlap), var(--papier) var(--overlap));
  padding-bottom: var(--lucht);
  overflow: hidden;
}

.salon__binnen {
  position: relative;
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.salon__beelden { position: relative; }

.salon__beeld {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(155deg, var(--aubergine) 0%, var(--aubergine-diep) 55%, var(--aubergine-nacht) 100%);
}
.salon__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 44%;
}
.salon__beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(28, 17, 25, .12);
}

/* Het tweede beeld schuift over de hoek van het eerste: twee momenten uit
   dezelfde ruimte die elkaar raken in plaats van twee losse kaarten. */
.salon__inzet {
  position: relative;
  z-index: 2;
  width: min(54%, 13rem);
  margin: -2.5rem 0 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: .5rem solid var(--papier);
  background: var(--papier);
}
.salon__inzet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 48%;
}

.salon__tekst { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.salon__tekst .titel { margin-bottom: 1.4rem; max-width: 18ch; }
.salon__tekst .knop { margin-top: 1.9rem; }

@media (min-width: 900px) {
  .salon__binnen {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    align-items: start;
  }
  .salon__beeld { aspect-ratio: 3 / 4; }
  .salon__inzet {
    position: absolute;
    right: clamp(-2.75rem, -2.2vw, -1.25rem);
    bottom: -1.75rem;
    width: clamp(7.5rem, 42%, 11.5rem);
    margin: 0;
  }
  .salon__tekst { padding-top: calc(var(--overlap) + clamp(1.75rem, 4vw, 3.25rem)); }
}

/* ---- de band: één volle-breedte foto als rustpunt tussen twee hoofdstukken */

.band {
  position: relative;
  display: grid;
  background: var(--aubergine-nacht);
}
.band__foto {
  grid-area: 1 / 1;
  width: 100%;
  height: clamp(15rem, 40vw, 27rem);
  object-fit: cover;
  object-position: 50% 40%;
}
.band__over {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to bottom,
    rgba(26, 7, 32, .22) 0%,
    rgba(26, 7, 32, .22) 34%,
    rgba(26, 7, 32, .78) 80%,
    var(--aubergine-diep) 100%);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
}
.band__zin {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  font-family: var(--kopletter);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, .95rem + 1.9vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(26, 7, 32, .7);
}

/* ---- kleur en coupe: donkere grond, het werk en het contactvel ----------- */

.looks {
  background: var(--aubergine-diep);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.looks__kop,
.vellen,
.credit {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin-left: auto;
  margin-right: auto;
}

.looks__kop {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: end;
}
.looks__kop .titel { margin-bottom: 1.1rem; max-width: 12ch; }
.looks__uitleg { max-width: 44ch; }

.looks__beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(155deg, var(--aubergine) 0%, var(--aubergine-nacht) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
/* Absoluut, niet op hoogte 100%: naast de kop krijgt deze figuur zijn hoogte
   van de rij en niet van een eigen verhouding, en dan heeft een percentage
   geen houvast meer. */
.looks__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}

/* Naast elkaar hoort het beeld de hoogte van de rij te vullen in plaats van
   zijn eigen verhouding op te leggen: anders staat de kop onderin een kolom
   met een halve meter lege aubergine erboven. */
@media (min-width: 900px) {
  .looks__kop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: stretch;
  }
  .looks__zin { align-self: end; }
  .looks__beeld {
    aspect-ratio: auto;
    min-height: clamp(15rem, 24vw, 20rem);
  }
}

/* Het contactvel: de kleur- en stylingcollecties als één vel naast elkaar,
   met krappe voegen, zodat het als één object leest en niet als vier losse
   banners met lucht ertussen. */
.vellen {
  display: grid;
  gap: clamp(.35rem, .9vw, .7rem);
}
.vel {
  aspect-ratio: 2.5 / 1;
  overflow: hidden;
  background: linear-gradient(155deg, var(--aubergine) 0%, var(--aubergine-nacht) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
.vel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Een uitsnede van 2,5 : 1 laat van zo'n strook van 1050 bij 230 maar iets
   meer dan de helft zien. Zou elke strook hetzelfde midden tonen, dan staan er
   vier bijna gelijke blokken onder elkaar. Elk vel kijkt daarom door een ander
   venster, zodat de reeks ook op een telefoon vier verschillende beelden geeft
   in plaats van vier keer dezelfde. */
@media (max-width: 999px) {
  .vel:nth-child(1) img { object-position: 14% 50%; }
  .vel:nth-child(2) img { object-position: 86% 50%; }
  .vel:nth-child(3) img { object-position: 34% 50%; }
  .vel:nth-child(4) img { object-position: 70% 50%; }
}

/* Pas vanaf een breed scherm gaan er twee naast elkaar: daaronder worden de
   koppen op zo'n strook van 1050 bij 230 te klein om nog iets te zien, en is
   een uitsnede van het midden beter dan de hele strook. */
@media (min-width: 1000px) {
  .vellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vel { aspect-ratio: 1050 / 230; }
  .vel--breed { grid-column: 1 / -1; }
}

.credit {
  margin-top: 1.25rem;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b49ab6;
}

/* ---- behandelingen en producten delen één papieren grond ---------------- */

.behandelingen {
  position: relative;
  background: var(--papier);
  padding: var(--lucht) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}

.behandelingen__binnen,
.noot,
.producten > * {
  position: relative;
  width: min(100% - var(--marge) * 2, var(--kader));
  margin-left: auto;
  margin-right: auto;
}

/* De kop blijft links staan en de index loopt ernaast door: dat houdt het
   een register en geen opsomming midden op de pagina. */
.behandelingen__binnen {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (min-width: 1024px) {
  .behandelingen__binnen {
    grid-template-columns: minmax(0, .78fr) minmax(0, 2fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .behandelingen .sectiekop .titel { max-width: 11ch; }
  .behandelingen .sectiekop .lopend { max-width: 30ch; }
}

.lijst { border-top: 1px solid var(--lijn); }
.lijst__item {
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--lijn);
}

.lijst__nr {
  font-family: var(--kopletter);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .06em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--aubergine);
  margin-bottom: .4rem;
}

.lijst__naam {
  font-family: var(--kopletter);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.08rem + .6vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: .4rem;
}

.lijst__uitleg {
  color: var(--inkt-zacht);
  font-size: .96rem;
  max-width: 42ch;
}

@media (min-width: 700px) {
  .lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lijst__item { padding: 1.7rem clamp(1.25rem, 2.5vw, 2.25rem) 1.7rem 0; }
  .lijst__item:nth-child(odd) { border-right: 1px solid var(--lijn); }
  .lijst__item:nth-child(even) { padding-left: clamp(1.25rem, 2.5vw, 2.25rem); padding-right: 0; }
}

.noot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding: clamp(1.4rem, 2.8vw, 1.9rem) clamp(1.4rem, 2.8vw, 2.1rem);
  background: var(--wit);
  border-left: 2px solid var(--brons);
}
.noot__tekst {
  font-family: var(--kopletter);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem);
  line-height: 1.35;
  max-width: 34ch;
}

.producten {
  background: var(--papier);
  padding: clamp(3rem, 6vw, 4.5rem) 0 var(--lucht);
}
.producten .sectiekop { margin-bottom: clamp(2rem, 4vw, 3rem); }

.merken { display: grid; gap: 0; border-top: 1px solid var(--lijn); }

.merkrij {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--lijn);
}

.merkrij__beeld {
  background: var(--wit);
  padding: clamp(.8rem, 1.8vw, 1.4rem);
  box-shadow: 0 1px 2px rgba(28, 17, 25, .05), 0 0 0 1px rgba(28, 17, 25, .07);
}
.merkrij__beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 1210 / 380;
  object-fit: contain;
}

.merkrij__naam {
  font-family: var(--kopletter);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.1;
  margin-bottom: .75rem;
}

@media (min-width: 860px) {
  .merkrij { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .merkrij--om .merkrij__beeld { order: 2; }
}

/* ---- bezoek: de wachthoek als donkere duotoonband ----------------------- */

.bezoek {
  position: relative;
  isolation: isolate;
  background: var(--aubergine-nacht);
  color: #fff;
  padding: var(--lucht) 0;
  overflow: hidden;
}

.bezoek__band {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bezoek__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  filter: grayscale(1) contrast(1.06);
  opacity: .3;
}
.bezoek__band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(94, 31, 100, .74) 0%, rgba(26, 7, 32, .94) 72%);
}

.bezoek__binnen {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 4rem);
}

.bezoek__links .titel { margin-bottom: 1.1rem; max-width: 18ch; }
.bezoek__links .lopend { max-width: 40ch; }

.bezoek__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.6rem, 3vw, 2.25rem);
}

.bezoek__kopje {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lila);
  margin-bottom: .85rem;
}
.bezoek__kopje + .tijden { margin-bottom: 2rem; }

.tijden { border-top: 1px solid var(--lijn-licht); }
.tijd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .66rem 0;
  border-bottom: 1px solid var(--lijn-licht);
  font-size: .96rem;
}
.tijd__dag { color: var(--lila-zacht); }
.tijd__uur { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bezoek__adres { color: var(--lila-zacht); line-height: 1.6; }

@media (min-width: 900px) {
  .bezoek__binnen {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .82fr);
    align-items: start;
  }
}

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

.voet {
  background: var(--aubergine-nacht);
  color: #fff;
  padding: clamp(2.75rem, 5.5vw, 4rem) 0 2rem;
  border-top: 1px solid var(--lijn-licht);
}

.voet__binnen {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.25rem);
}

/* Het merkbord van de zaak staat er heel: het is een volledig bord met naam,
   adres en nummer erop, dus het krijgt ruimte in de voet en wordt nergens
   bijgesneden of in een vorm geduwd. */
.voet__plaat { max-width: 18rem; }
.voet__plaat img {
  width: 100%;
  height: auto;
  aspect-ratio: 1050 / 709;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}
.voet__onder {
  margin-top: 1.1rem;
  max-width: 30ch;
  font-size: .9rem;
  color: var(--lila-zacht);
}

.voet__kopje {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lila);
  margin-bottom: 1rem;
}

.voet__lijst li + li { margin-top: .6rem; }
.voet__lijst a {
  font-size: .95rem;
  color: var(--lila-zacht);
  text-decoration: none;
  transition: color .25s ease;
}
.voet__lijst a:hover { color: #fff; }

.voet__regel {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--lila-zacht);
}
.voet__contact .tekstlink { margin: .9rem 0; }

@media (min-width: 860px) {
  .voet__binnen {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, .9fr);
    align-items: start;
  }
}

.voet__slot {
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn-licht);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b49ab6;
}

/* ---- de pagina die er niet is ------------------------------------------- */
/* Iemand tikt de link van de kaart over en raakt één letter mis. Die komt
   hier, en niet op de kale foutpagina van de webserver. */

.mis-body { background: var(--aubergine-nacht); }

.mis {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--aubergine-diep) 0%, var(--aubergine-nacht) 68%);
  color: #fff;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.mis__binnen {
  position: relative;
  width: min(100% - var(--marge) * 2, var(--kader));
  margin: 0 auto;
  max-width: 44rem;
}

.merk--mis { display: inline-flex; margin: 0 0 clamp(2.5rem, 6vw, 4rem); }

.mis__nummer {
  font-family: var(--kopletter);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(3.5rem, 2rem + 7vw, 7rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--brons);
  opacity: .85;
}

.mis__titel { margin-top: .9rem; max-width: 16ch; }
.mis__tekst { margin-top: 1.1rem; max-width: 42ch; }

.mis__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.mis__adres {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--lijn-licht);
  font-size: .9rem;
  color: var(--lila-zacht);
}

/* ---- onthullen ---------------------------------------------------------- */
/* Zonder JavaScript staat alles gewoon zichtbaar: de klasse js komt pas in de
   head erbij, en de waarneming zet is-in. Faalt die om welke reden dan ook,
   dan zet script.js na drie seconden alles alsnog zichtbaar.

   Elke figuur die zo onthuld wordt heeft een aspect-ratio, zodat hij ook
   zonder geladen foto al hoogte heeft. Een houder van nul pixels hoog komt
   nooit in beeld en zou dus permanent op opacity 0 blijven staan. */

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

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

/* ---- ankers onder de vaste kopbalk -------------------------------------- */

[id] { scroll-margin-top: 5.5rem; }