/* ===========================================================================
   Kapsalon Suus, Eindhoven
   Eigen stijl voor deze zaak: het ronde merkteken is donker petrolgroen met
   crème letters, dus dat is de basis. Koper komt uit het krullenwerk (McLean
   Curl) en uit de kleurspecialisatie, en is overal het accent. Het terugkerende
   motief is de krul: als klein golfje bij elk kopje, als lang lint in de twee
   donkere banden.
   =========================================================================== */

:root {
  --nacht:        #09201D;
  --diep:         #10332E;
  --inkt:         #15302B;
  --room:         #F7F2E8;
  --papier:       #EFE7D7;
  --room-zacht:   #C2D2CC;
  --grijs:        #4E605B;
  --koper-diep:   #8F4517;
  --koper-vlak:   #9A4A17;
  --koper-licht:  #E09A62;
  --lijn-licht:   rgba(21, 48, 43, .16);
  --lijn-donker:  rgba(247, 242, 232, .2);

  /* Geen lettertype van een vreemde server. Een <link> naar fonts.googleapis.com
     stuurt het IP-adres van elke bezoeker naar Google voordat die iets gevraagd
     heeft, en er staan hier geen fontbestanden in de map om zelf te hosten. Dus
     wordt er gezet met wat op het toestel staat: een warme boekserif voor de
     koppen (Georgia op Windows/Mac/iOS, Noto Serif op Android), de systeemsans
     voor de tekst. Georgia is breder en zwaarder dan een display-serif, dus de
     koppen staan hieronder iets strakker gespatieerd. */
  --letter-kop:   Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --letter-tekst: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --kop-hoogte: 4.6rem;
  --sectie: clamp(4.5rem, 8vw, 7rem);

  /* knoppen van de opening */
  --opening-achtergrond: #09201D;
  --opening-demping: .62;
}

/* --- grondslag ----------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--room);
  color: var(--inkt);
  font-family: var(--letter-tekst);
  font-size: clamp(1rem, .96rem + .22vw, 1.085rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--letter-kop);
  font-weight: 400;
  margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

.overslaan {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 200;
  background: var(--room);
  color: var(--inkt);
  padding: .7rem 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s;
}
.overslaan:focus { top: 1rem; }

.omlijst {
  width: min(100% - 2.5rem, 78rem);
  margin-inline: auto;
}

section[id] { scroll-margin-top: calc(var(--kop-hoogte) + 1rem); }

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

.ico { width: 1.1em; height: 1.1em; flex: none; display: block; }
.ico--krul { width: 2.15rem; height: .72rem; }

.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--koper-diep);
}
.kicker--licht { color: var(--koper-licht); }

.titel {
  font-size: clamp(1.9rem, 3.85vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.022em;
}
.titel--breed { max-width: 20ch; }

.subtitel {
  font-size: clamp(1.12rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
  letter-spacing: -.015em;
}
.subtitel--licht { color: var(--room); }

.lead {
  font-size: clamp(1.05rem, 1.15vw + .8rem, 1.22rem);
  line-height: 1.6;
  max-width: 54ch;
}

.sectiekop { max-width: 50rem; }

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--letter-tekst);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .005em;
  padding: .75rem 1.2rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.knop:hover { transform: translateY(-2px); }
.knop--groot { padding: .95rem 1.55rem; font-size: 1rem; }
.knop--vul { width: 100%; margin-top: 1.6rem; }

.knop--vol { background: var(--room); color: var(--inkt); }
.knop--vol:hover { background: var(--koper-licht); color: #2B1406; }

.knop--licht { background: transparent; color: var(--room); border-color: #7D908A; }
.knop--licht:hover { background: var(--room); color: var(--inkt); border-color: var(--room); }

.knop--rand { background: transparent; color: var(--room); border-color: #5D726C; }
.knop--rand:hover { border-color: var(--koper-licht); color: var(--koper-licht); }

.knop--koper { background: var(--koper-vlak); color: var(--room); }
.knop--koper:hover { background: #B2561B; }

.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--koper-licht);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.tekstlink:hover { color: var(--room); }

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

.kop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  transition: background-color .35s, box-shadow .35s;
}
.kop--vast {
  background: rgba(9, 32, 29, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(247, 242, 232, .14);
}

.kop__binnen {
  width: min(100% - 2.5rem, 84rem);
  margin-inline: auto;
  min-height: var(--kop-hoogte);
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  padding: .7rem 0;
}

.merk {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  flex: none;
}
.merk__logo { height: 2.8rem; width: auto; display: block; }
.merk__naam {
  font-family: var(--letter-kop);
  font-size: 1.05rem;
  letter-spacing: .005em;
  color: var(--room);
}

.hoofdnav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.7vw, 1.7rem);
  margin-left: auto;
}
.hoofdnav a {
  color: var(--room);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}
.hoofdnav a:hover,
.hoofdnav a.is-hier { border-bottom-color: var(--koper-licht); color: var(--koper-licht); }

.kop__acties { display: flex; align-items: center; gap: .5rem; margin-left: clamp(.5rem, 1.5vw, 1.25rem); }
.kop__acties .knop { padding: .6rem 1rem; font-size: .85rem; }

.menuknop {
  display: none;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  background: transparent;
  border: 1px solid #5D726C;
  color: var(--room);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem .9rem;
  cursor: pointer;
}
.menuknop__balk {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 1px;
  background: currentColor;
}
.menuknop__balk::before,
.menuknop__balk::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform .25s;
}
.menuknop__balk::before { top: -5px; }
.menuknop__balk::after { top: 5px; }
.menuknop[aria-expanded="true"] .menuknop__balk { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__balk::before { transform: translateY(5px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__balk::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1079px) {
  .merk__naam { display: none; }
  .menuknop { display: inline-flex; }
  .kop__acties { order: 3; margin-left: 0; }
  .kop__acties .knop span { display: none; }
  .kop__acties .knop { padding: .62rem; }
  .kop__acties .ico { width: 1.15rem; height: 1.15rem; }
  .menuknop { margin-left: auto; order: 4; }

  .hoofdnav {
    position: fixed;
    top: var(--kop-hoogte);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(9, 32, 29, .985);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: .5rem clamp(1.25rem, 5vw, 2.5rem) 1.5rem;
    border-top: 1px solid rgba(247, 242, 232, .14);
    max-height: calc(100svh - var(--kop-hoogte));
    overflow-y: auto;
  }
  .hoofdnav.is-open { display: flex; }
  .hoofdnav a {
    font-family: var(--letter-kop);
    font-size: 1.35rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(247, 242, 232, .12);
  }
}

@media (max-width: 400px) {
  .kop__acties .knop--rand { display: none; }
}

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

.opening { isolation: isolate; }

.opening .opening__kop {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.85rem, 1.6vh, 1.35rem);
  padding: 0 clamp(1.25rem, 5vw, 4.5rem) clamp(4.75rem, 11vh, 7rem);
}

.opening .opening__kop::before {
  content: '';
  position: absolute;
  inset: -15rem 0 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(9, 32, 29, .94) 6%,
    rgba(9, 32, 29, .62) 48%,
    rgba(9, 32, 29, 0) 100%);
}

.opening__opmaat {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  color: var(--koper-licht);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.opening__titel {
  margin: 0;
  color: var(--room);
  font-size: clamp(2rem, 4.2vw, 3.55rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.opening__zin-vast {
  margin: 0;
  color: var(--room-zacht);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  max-width: 38ch;
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(.4rem, 1.2vh, 1rem);
}

.opening .opening__slot {
  padding: 0 clamp(1.25rem, 5vw, 4.5rem) clamp(5.5rem, 13vh, 9rem);
  text-align: center;
}
.opening__slotregel {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: clamp(1.65rem, 5.1vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--room);
}

.opening .opening__wenk {
  align-items: center;
  gap: .5rem;
  color: var(--room-zacht);
}
.opening__wenktekst {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
}
.opening .opening__wenk .ico { width: 1rem; height: 1rem; }

@media (min-width: 700px) {
  .opening .opening__kop {
    width: min(52%, 38rem);
    padding-bottom: clamp(5rem, 13vh, 8.5rem);
  }
  .opening .opening__kop::before {
    right: -5rem;
    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
    mask-image: linear-gradient(to right, #000 62%, transparent 100%);
  }
}

/* --- over Suus ----------------------------------------------------------- */

.over { background: var(--room); }

.over__band {
  background: var(--nacht);
  color: var(--room);
  padding: clamp(3.75rem, 7vw, 6rem) 0 clamp(6rem, 11vw, 9.5rem);
}

.statement {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: clamp(1.38rem, 2.95vw, 2.3rem);
  line-height: 1.3;
  letter-spacing: -.021em;
  color: var(--room);
  max-width: 50rem;
  margin: 0;
  text-wrap: pretty;
}

.lint {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--lijn-donker);
}
.lint__item {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--lijn-donker);
}
/* De telnummers staan bewust in de schreefloze: Georgia zet cijfers als
   mediaevalcijfers (de 5 en de 9 hangen onder de regel), en dat leest op dit
   formaat als een zetfout in plaats van als karakter. Groot, zoals bij het
   telefoonnummer, is datzelfde juist mooi. */
.lint__nr {
  font-family: var(--letter-tekst);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--koper-licht);
  font-size: .78rem;
  letter-spacing: .14em;
}
.lint__tekst {
  color: var(--room);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  font-weight: 500;
}

@media (min-width: 760px) {
  .lint { display: grid; grid-template-columns: repeat(3, 1fr); }
  .lint__item { padding: 1.4rem clamp(1rem, 2vw, 2rem) 1.4rem 0; }
  .lint__item + .lint__item {
    border-left: 1px solid var(--lijn-donker);
    padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  }
}

.over__raster {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Het bronbestand heeft een lichte rand meegekregen van de beeldmotor. Die
   leest in een crèmekleurige sectie als een passe-partout dat er niet hoort te
   zijn, dus wordt hij weggesneden: de houder klipt, het beeld staat iets groter.
   Niets aan de compositie van de foto zelf gaat daarmee verloren. */
.over__beeld {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: calc(-1 * clamp(3.5rem, 9vw, 7.5rem)) 0 0;
}
.over__beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 54% 42%;
  transform: scale(1.08);
}
.over__krul {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  width: 1.1rem;
  height: 6.5rem;
  color: var(--koper-licht);
  opacity: .9;
}

.over__tekst { padding-top: clamp(1.25rem, 3vw, 3rem); }
.over__tekst .titel { margin-bottom: 1.1rem; }
.over__tekst .lead { color: var(--inkt); }

.deelblok {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--lijn-licht);
  color: var(--grijs);
}
.deelblok .subtitel { color: var(--inkt); }

@media (min-width: 880px) {
  .over__raster { grid-template-columns: .92fr 1.08fr; align-items: start; }
  .over__beeld img { aspect-ratio: 3 / 4; }
}

/* --- vakwerk ------------------------------------------------------------- */

.vakwerk {
  background: var(--papier);
  padding: var(--sectie) 0 clamp(3rem, 6vw, 5rem);
}

.vakwerk__intro {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.vakwerk__lead {
  margin-top: 1.25rem;
  color: var(--grijs);
}
.vakwerk__beeld { margin: 0; }
.vakwerk__beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 44% 58%;
}

@media (min-width: 880px) {
  .vakwerk__intro {
    grid-template-columns: 1.04fr .96fr;
    align-items: end;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .vakwerk__beeld img { aspect-ratio: 5 / 4; }
}

.diensten {
  list-style: none;
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  padding: 0;
  border-top: 1px solid var(--lijn-licht);
}

.dienst {
  display: grid;
  gap: .3rem 1.5rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 1rem;
  margin-inline: -1rem;
  border-bottom: 1px solid var(--lijn-licht);
  transition: background-color .3s;
}
.dienst:hover { background: rgba(21, 48, 43, .04); }
.dienst--licht { background: rgba(154, 74, 23, .07); }
.dienst--licht:hover { background: rgba(154, 74, 23, .11); }

.dienst__nr {
  font-family: var(--letter-tekst);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--koper-diep);
  font-size: .82rem;
  letter-spacing: .14em;
  margin: 0;
}
.dienst__naam {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.14;
  color: var(--inkt);
}
.dienst__tekst {
  margin: 0;
  color: var(--grijs);
  max-width: 48ch;
}
.dienst__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--koper-diep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  width: fit-content;
}
.dienst__link:hover { color: var(--inkt); }

@media (min-width: 840px) {
  .dienst {
    grid-template-columns: 3.5rem minmax(0, 14rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 0 clamp(1.25rem, 2.6vw, 2.75rem);
  }
  .dienst__link { grid-column: 3; }
}

.prijspaneel {
  position: relative;
  z-index: 3;
  margin-bottom: calc(-1 * clamp(7rem, 12vw, 10rem));
  background: var(--koper-vlak);
  color: var(--room);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 3rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.prijspaneel p { color: var(--room); max-width: 46ch; }
.prijspaneel .knoppenrij { align-items: center; }

@media (min-width: 820px) {
  .prijspaneel { grid-template-columns: 1.3fr auto; align-items: center; }
}

/* --- krullen ------------------------------------------------------------- */

/* De krullenfoto stond hier eerst als achtergrond: op halve dekking onder een
   vlak dat tot 97% dichtliep, dus in de praktijk onzichtbaar. Dat is zonde van
   het enige beeld op de pagina dat laat zien waar deze sectie over gáát. Hij
   staat nu vooraan, en de achtergrond doet wat hij werkelijk deed: een donker
   vlak met een koperen gloed uit de rechterbovenhoek. */
.krullen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(118% 85% at 88% 14%, rgba(143, 69, 23, .5) 0%, rgba(143, 69, 23, 0) 60%),
    linear-gradient(168deg, #0C2723 0%, var(--nacht) 46%, #081B18 100%);
  color: var(--room);
  padding: clamp(9.5rem, 16vw, 14rem) 0 clamp(4.5rem, 9vw, 7.5rem);
}
.krullen__motief {
  position: absolute;
  right: 4%;
  top: 7%;
  width: clamp(3rem, 6vw, 5.5rem);
  height: clamp(18rem, 40vw, 28rem);
  color: var(--koper-licht);
  opacity: .24;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.krullen__binnen {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.krullen__tekst .lead { color: var(--room); }
.krullen__tekst .knoppenrij { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.krullen__tekst .titel { margin-bottom: 1.1rem; }

/* Eén object, geen twee: de foto en de merkplaat eronder horen bij elkaar en
   delen dus één schaduw. De koperen bovenrand van de plaat valt precies samen
   met de onderkant van de foto, zodat het leest als een afdruk met een bijschrift
   en niet als een kaartje dat toevallig onder een beeld is beland. */
.krullen__beeld {
  position: relative;
  margin: 0;
  align-self: center;
  box-shadow: 0 1.5rem 3.5rem rgba(3, 14, 12, .55);
}
.krullen__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 34%;
}
.krullen__plaat {
  display: block;
  background: var(--room);
  color: var(--grijs);
  border-top: 4px solid var(--koper-vlak);
  padding: clamp(1.1rem, 2.2vw, 1.55rem) clamp(1.2rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.7rem);
}
.krullen__merkteken { display: block; width: auto; height: clamp(1.45rem, 2.2vw, 1.85rem); }
.krullen__plaattekst {
  display: block;
  margin-top: .85rem;
  font-size: .92rem;
  line-height: 1.5;
}

@media (min-width: 920px) {
  .krullen__binnen { grid-template-columns: 1.18fr .82fr; align-items: center; }
  .krullen__motief { display: block; }
  /* Op portretverhouding zou dit beeld de sectie bijna twee schermen hoog maken.
     De hoogte wordt dus gezet, niet de verhouding: de krul blijft groot genoeg om
     te zien wat er bedoeld wordt, de sectie blijft leesbaar in één blik. */
  .krullen__foto { aspect-ratio: auto; height: clamp(24rem, 33vw, 31rem); }
}

/* --- producten ----------------------------------------------------------- */

.producten {
  position: relative;
  /* Het beeld steekt links buiten de omlijsting; clip zorgt dat dat nooit een
     zijwaartse schuifbalk oplevert. */
  overflow: hidden;
  background: var(--room);
  padding: var(--sectie) 0;
}
.producten__raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.producten__beeld { margin: 0; }
.producten__beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 58% 62%;
}
.producten__tekst .titel { margin-bottom: 1.1rem; }

.merkfeiten {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  border-top: 1px solid var(--lijn-licht);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
}
.merkfeiten li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .96rem;
  color: var(--inkt);
}
.merkfeiten .ico { width: 1.05rem; height: 1.05rem; color: var(--koper-diep); }

@media (min-width: 880px) {
  .producten__raster { grid-template-columns: .82fr 1.18fr; }
  /* Eén keer de omlijsting doorbreken. Elke andere sectie leeft binnen dezelfde
     78rem; hier loopt het beeld tot de rand van het scherm door, zodat de
     pagina halverwege een keer open gaat in plaats van opnieuw twee kolommen
     in hetzelfde kader te zetten. De hoogte is begrensd, anders wordt dit op een
     breed scherm een vierkant van bijna duizend pixels. */
  .producten__beeld {
    margin-left: calc(-1 * (100vw - min(100vw - 2.5rem, 78rem)) / 2);
  }
  .producten__beeld img {
    aspect-ratio: auto;
    height: clamp(23rem, 32vw, 31rem);
    object-position: 52% 64%;
  }
}

/* --- in de salon --------------------------------------------------------- */

.salon {
  position: relative;
  background: var(--papier);
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.salon__raster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.salon__hoog,
.salon__breed { margin: 0; }

/* Het wasmoment kwam met een lichte passe-partout uit de beeldmotor. Net als bij
   het beeld in "Over Suus" wordt die weggesneden in plaats van weggerekend: de
   houder klipt, het beeld staat een paar procent groter. */
.salon__hoog { overflow: hidden; }

.salon__hoog img,
.salon__breed img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.salon__hoog img {
  aspect-ratio: 5 / 4;
  object-position: 44% 58%;
  transform: scale(1.06);
}
/* Dezelfde opname als de opening, maar op een heel ander stuk: niet het brede
   overzicht, wel de hoek bij de deur. Zo komt de zaak terug zonder dat de
   bezoeker twee keer hetzelfde beeld krijgt. */
.salon__breed img {
  aspect-ratio: 4 / 3;
  object-position: 17% 52%;
}

.salon__tekst .titel { margin-bottom: 1rem; }
.salon__tekst .lead { color: var(--grijs); }
.salon__noot {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 2px solid var(--koper-vlak);
  max-width: 44ch;
  color: var(--grijs);
}

@media (min-width: 900px) {
  .salon__raster {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
    row-gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }
  /* Het hoge beeld begint bóven de sectierand en loopt de vorige sectie in,
     zodat crème en papier niet als twee losse vlakken naast elkaar staan. */
  .salon__hoog {
    grid-column: 7 / 13;
    grid-row: 1 / span 2;
    align-self: stretch;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * clamp(4.5rem, 9vw, 8rem));
  }
  .salon__hoog img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 28rem;
    object-position: 46% 56%;
  }
  .salon__tekst {
    grid-column: 1 / 7;
    grid-row: 1;
    padding-right: clamp(1rem, 3vw, 3rem);
  }
  .salon__breed {
    grid-column: 1 / 7;
    grid-row: 2;
    align-self: end;
  }
  .salon__breed img { aspect-ratio: 3 / 2; object-position: 15% 50%; }
}

/* Het laatste beeld voor de donkere contactsectie: de hele salon over de volle
   breedte. Op een telefoon is een bioscoopband van 110 pixels hoog geen beeld
   maar een streep, dus daar staat hij gewoon liggend; pas vanaf een tablet wordt
   het de brede band die de pagina één keer helemaal open trekt. */
.salon__band { margin-top: clamp(3rem, 6vw, 5rem); }
.salon__band img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 54%;
}

@media (min-width: 700px) {
  .salon__band img {
    aspect-ratio: 21 / 8;
    max-height: 62svh;
  }
}

/* --- afspraak ------------------------------------------------------------ */

.afspraak {
  position: relative;
  overflow: hidden;
  background: var(--nacht);
  color: var(--room);
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.afspraak__motief {
  position: absolute;
  left: 3%;
  bottom: 6%;
  width: clamp(3rem, 6vw, 5rem);
  height: clamp(16rem, 34vw, 24rem);
  color: var(--koper-licht);
  opacity: .22;
  pointer-events: none;
  display: none;
}
.afspraak__raster {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.afspraak .lead { color: var(--room-zacht); }
.afspraak .titel { margin-bottom: 1.1rem; }

/* Het nummer staat in de schreefloze en niet in de serif van de koppen. Niet
   uit zuinigheid: dit is het ene stuk tekst dat iemand overtypt of intoetst, en
   Georgia zet cijfers op wisselende hoogte. Serif voor de stem, schreefloos
   voor de gegevens. */
.belnummer {
  display: inline-block;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--letter-tekst);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(1.85rem, 4.5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--room);
  text-decoration: none;
  border-bottom: 2px solid #8A5B3C;
  padding-bottom: .25rem;
  transition: color .25s, border-color .25s;
}
.belnummer:hover { color: var(--koper-licht); border-bottom-color: var(--koper-licht); }

.adres {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 2.8vw, 2rem);
  border-top: 1px solid var(--lijn-donker);
}
.adres__label {
  margin: 0 0 .6rem;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--room-zacht);
}
.adres__regel {
  margin: 0;
  font-size: 1.1rem;
  color: var(--room);
}
.adres .tekstlink { margin-top: 1rem; }

.regels {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 2.8vw, 2rem);
  border-top: 1px solid var(--lijn-donker);
  color: var(--room-zacht);
}
.regels p { max-width: 46ch; }

.formulier {
  background: rgba(247, 242, 232, .055);
  border: 1px solid rgba(247, 242, 232, .18);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
}
.formulier__uitleg { color: var(--room-zacht); max-width: 42ch; }
.formulier__noot {
  margin: 1rem 0 0;
  font-size: .85rem;
  color: var(--room-zacht);
}

.veld {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: 1.15rem;
}
.veld label {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--room-zacht);
}
.veld input,
.veld select,
.veld textarea {
  font-family: var(--letter-tekst);
  font-size: 1rem;
  color: var(--room);
  background: #0D2724;
  border: 1px solid #44605A;
  border-radius: 0;
  padding: .75rem .9rem;
  width: 100%;
}
.veld textarea { resize: vertical; min-height: 6.5rem; }
.veld input:focus,
.veld select:focus,
.veld textarea:focus { border-color: var(--koper-licht); }

@media (min-width: 960px) {
  .afspraak__raster { grid-template-columns: 1.02fr .98fr; }
  .afspraak__motief { display: block; }
}

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

.voet {
  background: #061815;
  color: var(--room-zacht);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.25rem;
}
.voet__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.voet__logo { height: 5.25rem; width: auto; display: block; }
.voet__zin {
  margin: 1.25rem 0 0;
  max-width: 30ch;
  font-family: var(--letter-kop);
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--room);
}
.voet__kopje {
  margin: 0 0 .9rem;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--koper-licht);
}
.voet__nav, .voet__contact { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.voet__nav a, .voet__contact a {
  color: var(--room);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.voet__nav a:hover, .voet__contact a:hover { border-bottom-color: var(--koper-licht); }
.voet__regel { margin: 0; }

.voet__slot {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(247, 242, 232, .14);
  color: var(--koper-licht);
}
.voet__slotregel {
  margin: 0;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--room-zacht);
}

@media (min-width: 780px) {
  .voet__raster { grid-template-columns: 1.5fr .8fr 1fr; }
}

/* --- 404 ----------------------------------------------------------------- */

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

.fout {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--nacht);
  color: var(--room);
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.fout__motief {
  position: absolute;
  right: 6%;
  top: 10%;
  width: clamp(3rem, 6vw, 5rem);
  height: clamp(16rem, 36vw, 26rem);
  color: var(--koper-licht);
  opacity: .25;
  pointer-events: none;
}
.fout__binnen { position: relative; z-index: 1; max-width: 44rem; }
.fout__logo { height: 5rem; width: auto; display: block; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.fout .titel { margin-bottom: 1.1rem; }
.fout .lead { color: var(--room-zacht); }
.fout .knoppenrij { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.fout__adres {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--lijn-donker);
  font-size: .9rem;
  color: var(--room-zacht);
}

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

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
}
html.js [data-reveal].is-zichtbaar {
  opacity: 1;
  transform: none;
}
html.js [data-reveal-groep] > [data-reveal]:nth-child(2) { transition-delay: .09s; }
html.js [data-reveal-groep] > [data-reveal]:nth-child(3) { transition-delay: .18s; }

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