/* ===========================================================================
   Frendz for your hair, Twello
   Richting: hun eigen beeldtaal. Zwart-wit fotografie met uitgescheurde
   kwastranden, wit en één rood. Het rood is de enige kleur op de pagina en
   komt terug als streek, lint, vlak en accent. Papier ligt als gescheurd vel
   op de inkt, zodat de secties in elkaar overlopen in plaats van op elkaar
   te stapelen.
   =========================================================================== */

:root {
  --inkt: #0d0d0f;
  --inkt-op: #16161a;
  --papier: #f1efec;
  --papier-rand: #ddd9d4;

  --rood: #e8202a;          /* grafisch, grote maat */
  --rood-vlak: #d81620;     /* vlakken en knoppen, wit erop leest */
  --rood-diep: #c20e16;     /* kleine tekst op papier */
  --rood-licht: #ff4d55;    /* kleine tekst op inkt */

  --wit: #ffffff;
  --wit-zacht: #d7d5d2;
  --wit-stil: #a9a7a4;
  --zwart-zacht: #1a1a1c;
  --zwart-stil: #5b5955;

  --opening-achtergrond: #0d0d0f;
  --opening-demping: .62;

  --kantlijn: clamp(1.25rem, 5vw, 4rem);
  --breed: 1360px;
  --ritme: clamp(3.75rem, 7.5vw, 7rem);

  --letter: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Segoe Print', 'Bradley Hand', cursive;

  --scheur-a: polygon(
    0 26px, 9% 8px, 16% 22px, 24% 4px, 33% 18px, 41% 2px, 50% 20px, 58% 6px,
    66% 24px, 74% 10px, 83% 28px, 91% 12px, 100% 22px,
    100% calc(100% - 16px), 91% calc(100% - 2px), 83% calc(100% - 20px),
    74% calc(100% - 8px), 66% calc(100% - 26px), 58% calc(100% - 6px),
    50% calc(100% - 18px), 41% calc(100% - 4px), 33% calc(100% - 22px),
    24% calc(100% - 10px), 16% calc(100% - 28px), 9% calc(100% - 6px),
    0 calc(100% - 18px)
  );
  --scheur-b: polygon(
    0 14px, 8% 28px, 17% 6px, 25% 20px, 34% 3px, 43% 24px, 51% 8px, 59% 22px,
    68% 4px, 76% 18px, 85% 7px, 93% 24px, 100% 10px,
    100% calc(100% - 24px), 93% calc(100% - 8px), 85% calc(100% - 20px),
    76% calc(100% - 4px), 68% calc(100% - 22px), 59% calc(100% - 10px),
    51% calc(100% - 26px), 43% calc(100% - 6px), 34% calc(100% - 16px),
    25% calc(100% - 3px), 17% calc(100% - 21px), 8% calc(100% - 9px),
    0 calc(100% - 15px)
  );
}

/* ---- 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(--inkt);
  color: var(--wit);
  font-family: var(--letter);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, p, ol, ul, figure, figcaption { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; }

::selection { background: var(--rood-vlak); color: #fff; }

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

.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.overslaan {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  background: var(--rood-vlak);
  color: #fff;
  padding: .7rem 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.overslaan:focus { top: 1rem; }

.omslag {
  width: min(100% - (2 * var(--kantlijn)), var(--breed));
  margin-inline: auto;
}

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

.opmaat {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin: 0 0 .9rem;
}
.opmaat--donker { color: var(--rood-diep); }

.kop-groot {
  font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  font-weight: 700;
  text-wrap: balance;
  hyphens: auto;
}

.streek {
  display: block;
  width: clamp(74px, 9vw, 112px);
  height: 9px;
  margin: 0 0 1.4rem;
  fill: var(--rood);
}
.streek--donker { fill: var(--rood-diep); }

.handschrift {
  font-family: var(--hand);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  line-height: 1.1;
  color: var(--rood-diep);
}

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }

.knop--klein { padding: .68rem 1.05rem; font-size: .84rem; }

.knop--rood { background: var(--rood-vlak); color: #fff; }
.knop--rood:hover { background: #ee2731; }

.knop--rand { border-color: rgba(255,255,255,.45); color: #fff; }
.knop--rand:hover { border-color: #fff; background: #fff; color: var(--inkt); }

.knop--wit { background: #fff; color: var(--inkt); }
.knop--wit:hover { background: var(--inkt); color: #fff; }

.knop--randwit { border-color: rgba(255,255,255,.6); color: #fff; }
.knop--randwit:hover { background: rgba(0,0,0,.22); border-color: #fff; }

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

.kopbalk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.kopbalk.is-vast {
  background: rgba(13,13,15,.93);
  box-shadow: 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}

.kopbalk__binnen {
  width: min(100% - (2 * var(--kantlijn)), var(--breed));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
}

.merk {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}
.merk__naam {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.merk__regel {
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #fff;
  margin-top: .34rem;
}
.merk:hover .merk__regel { color: var(--rood-licht); }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.1vw, 2.1rem);
}
.menu__link {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  padding: .3rem 0;
  color: var(--wit-zacht);
  transition: color .2s ease;
}
.menu__link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--rood);
  transition: right .3s ease;
}
.menu__link:hover { color: #fff; }
.menu__link:hover::after { right: 0; }

.menuknop {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 40px;
  padding: 0 10px;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  cursor: pointer;
}
.menuknop__streep {
  display: block;
  height: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .25s ease;
}
.menuknop[aria-expanded="true"] .menuknop__streep:first-child { transform: translateY(4px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep:last-child { transform: translateY(-4px) rotate(-45deg); }

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

.opening__foto { filter: grayscale(1) contrast(1.07) brightness(.96); }

.opening__kop {
  padding: 0 var(--kantlijn) clamp(3.5rem, 9svh, 5.5rem);
}
.opening__kop-binnen {
  width: min(100%, var(--breed));
  margin-inline: auto;
}

.opening__titel {
  font-size: clamp(2.3rem, 1.1rem + 4.6vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 700;
  max-width: 17ch;
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 26px rgba(0,0,0,.4);
}

.opening__zin-vast {
  max-width: 38ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
  color: var(--wit-zacht);
  margin: 0 0 1.8rem;
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.opening__slot {
  padding: 0 var(--kantlijn) clamp(3.5rem, 9svh, 5.5rem);
}
.opening__slotregel {
  width: min(100%, var(--breed));
  margin-inline: auto;
  font-family: var(--hand);
  font-size: clamp(2rem, 1rem + 3.4vw, 3.6rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.wenk__woord {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.wenk__lijn {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--rood), rgba(232,32,42,0));
  animation: wenk 2.4s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes wenk {
  0%, 100% { transform: scaleY(.4); opacity: .5; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* De wenk staat onderin het midden; op een smal scherm lopen de knoppen van
   de kop daar doorheen, dus krijgt de kop daar meer lucht eronder. */
@media (max-width: 700px) {
  .opening__kop,
  .opening__slot { padding-bottom: 6.25rem; }
}

/* ---- banden ------------------------------------------------------------- */

.band {
  position: relative;
  padding-block: var(--ritme);
}
.band--inkt { background: var(--inkt); }

.band__vlak {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.band__inhoud { position: relative; z-index: 1; }

.band--papier { color: var(--zwart-zacht); padding-block: calc(var(--ritme) + 1rem); }
.band--papier .band__vlak { background: var(--papier); clip-path: var(--scheur-a); }

.band--rood { color: #fff; padding-block: calc(var(--ritme) + .5rem); }
.band--rood .band__vlak { background: var(--rood-vlak); clip-path: var(--scheur-b); }

/* ---- intro, direct onder de opening ------------------------------------- */

.intro { padding-top: clamp(3rem, 6vw, 5rem); }

.intro__raster {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 4rem);
}

.intro__lead {
  font-size: clamp(1.25rem, .95rem + 1.5vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -.018em;
  font-weight: 500;
  max-width: 22ch;
  text-wrap: balance;
}

.stappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 1.75rem;
}
.stap__nr {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--rood-licht);
  margin-bottom: .7rem;
}
.stap__kop {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: .45rem;
}
.stap__tekst {
  font-size: .96rem;
  color: var(--wit-stil);
  max-width: 32ch;
}

@media (max-width: 899px) {
  .intro__lead { max-width: 30ch; }
}

@media (min-width: 900px) {
  .intro__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
  }
  .stappen { grid-template-columns: repeat(3, 1fr); }
}

/* ---- het rode lint ------------------------------------------------------ */

.lint {
  overflow: hidden;
  padding: 11px 0;
  background: var(--inkt);
}
.lint__band {
  background: var(--rood-vlak);
  padding: .6rem 0;
  transform: rotate(-.55deg) scale(1.025);
}
.lint__spoor {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: max-content;
  animation: schuif 38s linear infinite;
}
.lint__woord {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.lint__punt {
  display: block;
  width: 7px;
  height: 7px;
  background: #fff;
  flex: 0 0 auto;
}
@keyframes schuif {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

.over__raster {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  align-items: center;
}
.over__alinea {
  color: var(--zwart-stil);
  max-width: 46ch;
  margin-top: 1.1rem;
}
.over__tekst .kop-groot { margin-bottom: .4rem; }
.over__tekst .handschrift { margin-top: 1.9rem; }

.over__beeld { position: relative; }
.over__beeld img {
  width: 100%;
  filter: contrast(1.06) drop-shadow(0 14px 26px rgba(0,0,0,.18));
}
.bijschrift {
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zwart-stil);
}

@media (min-width: 880px) {
  .over__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .over__beeld { margin-right: calc(-1 * clamp(0rem, 3vw, 2.5rem)); }
}

/* ---- behandelingen ------------------------------------------------------ */

.sectiekop {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.sectiekop__rechts {
  color: var(--wit-stil);
  max-width: 40ch;
}
@media (min-width: 900px) {
  .sectiekop {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .sectiekop__rechts { padding-bottom: .4rem; }
}

.lijst { border-top: 1px solid rgba(255,255,255,.17); }

.lijst__rij {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: .2rem 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.17);
  transition: padding-left .3s ease;
}
.lijst__rij::before {
  content: '';
  position: absolute;
  left: calc(-1 * min(1.5rem, 4vw));
  right: calc(-1 * min(1.5rem, 4vw));
  top: 0; bottom: -1px;
  background: var(--rood-vlak);
  opacity: 0;
  transform: scaleY(.3);
  transform-origin: 50% 100%;
  transition: opacity .3s ease, transform .3s ease;
}
.lijst__nr, .lijst__naam, .lijst__tekst { position: relative; }
.lijst__rij:hover::before { opacity: 1; transform: scaleY(1); }
.lijst__rij:hover { padding-left: 1.1rem; }
.lijst__rij:hover .lijst__nr { color: #fff; }
.lijst__rij:hover .lijst__tekst { color: rgba(255,255,255,.92); }

.lijst__nr {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--rood-licht);
  padding-top: .45rem;
  transition: color .3s ease;
}
.lijst__naam {
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.lijst__tekst {
  grid-column: 2;
  color: var(--wit-stil);
  font-size: .98rem;
  max-width: 52ch;
  margin-top: .25rem;
  transition: color .3s ease;
}

@media (min-width: 860px) {
  .lijst__rij {
    grid-template-columns: 4rem minmax(0, 14rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
  .lijst__tekst { grid-column: 3; margin-top: 0; }
  .lijst__nr { padding-top: .5rem; }
}

.behandelingen__slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.75rem;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.behandelingen__vraag {
  font-size: clamp(1.1rem, .95rem + .7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.015em;
}

.behandelingen__raster {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}
.behandelingen__beeld img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.08);
}

@media (min-width: 960px) {
  .behandelingen__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
    align-items: start;
  }
  .behandelingen__beeld {
    position: sticky;
    top: 7rem;
  }
}

/* ---- sfeerimpressie, het rode vlak -------------------------------------- */

.sfeer { margin-top: clamp(3.5rem, 7vw, 6rem); }

.sfeer__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.sfeer .opmaat { color: rgba(255,255,255,.8); }
.sfeer__lead {
  font-family: var(--hand);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  line-height: 1.1;
  margin-top: 1rem;
}
.sfeer__tekstje {
  margin-top: .85rem;
  max-width: 34ch;
  color: rgba(255,255,255,.92);
}
.sfeer__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* De uitgeknipte foto's liggen los op het rode vlak. De schaduw volgt de
   gescheurde rand, niet een rechthoek eromheen. */
.sfeer__beelden { position: relative; }
.kiek {
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.3));
}
.kiek img { width: 100%; filter: grayscale(1) contrast(1.1); }
.kiek--groot { transform: rotate(-1.5deg); }
.kiek--groot img { aspect-ratio: 16 / 9; object-fit: cover; }
.kiek--klein {
  position: relative;
  width: 48%;
  margin: -11% 0 0 auto;
  transform: rotate(3.5deg);
}
.kiek--klein img { aspect-ratio: 1 / 1; object-fit: cover; }

@media (min-width: 880px) {
  .sfeer__raster { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .kiek--klein { width: 44%; margin-top: -14%; margin-right: -3%; }
}

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

.contact { margin-top: 10px; z-index: 2; }
.contact .band__vlak { clip-path: var(--scheur-a); }

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

.contact .kop-groot { max-width: 17ch; margin-bottom: 1.4rem; }

.telefoon {
  display: inline-block;
  font-size: clamp(2.1rem, 1rem + 4.4vw, 4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--rood-diep);
  text-decoration: none;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  transition: color .25s ease, transform .25s ease;
}
.telefoon:hover { color: var(--inkt); transform: translateX(6px); }

.gegevens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.6rem 2rem;
  border-top: 1px solid var(--papier-rand);
  padding-top: 1.75rem;
}
.gegeven__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rood-diep);
  margin-bottom: .6rem;
}
.gegeven__waarde {
  font-size: .98rem;
  color: var(--zwart-stil);
  line-height: 1.5;
}
.tekstlink {
  display: inline-block;
  margin-top: .45rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--zwart-zacht);
  text-decoration: none;
  border-bottom: 2px solid var(--rood);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.tekstlink:hover { color: var(--rood-diep); border-color: var(--zwart-zacht); }

.contact__beeld { position: relative; }
.contact__beeld img {
  width: 100%;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

@media (min-width: 900px) {
  .contact__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .contact__beeld {
    margin-bottom: clamp(-7rem, -6vw, -3rem);
    margin-top: 1.5rem;
  }
}

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

.voet {
  position: relative;
  background: var(--inkt);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem;
}

.voet__boven {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.voet__logo {
  width: clamp(190px, 26vw, 300px);
  height: auto;
}
.voet__zin {
  font-family: var(--hand);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--wit);
}

.voet__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.voetblok { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.voetblok__kop {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin-bottom: .75rem;
}
.voetblok__regel { font-size: .95rem; color: var(--wit-stil); }
.voetblok__link {
  font-size: .95rem;
  color: var(--wit-zacht);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.voetblok__link:hover { color: #fff; border-color: var(--rood); }

.voet__klein {
  font-size: .78rem;
  color: #87857f;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.5rem;
}

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

.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].is-zichtbaar,
.js [data-reveal-group] > .is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* ---- smal --------------------------------------------------------------- */

@media (max-width: 859px) {
  .menuknop { display: flex; }

  .menu {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem var(--kantlijn) 2rem;
    background: var(--inkt-op);
    border-bottom: 3px solid var(--rood-vlak);
    transform: translateY(-101%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    z-index: -1;
  }
  .menu.is-open { transform: translateY(0); }
  .menu__link {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .menu__link::after { display: none; }
  .menu .knop { margin-top: 1.5rem; justify-content: center; }

  .stappen { grid-template-columns: 1fr; gap: 1.5rem; }
  .stap { border-left: 2px solid var(--rood-vlak); padding-left: 1rem; }

  .contact__beeld { width: 72%; margin: 0 auto; }
}

@media (max-width: 420px) {
  .opening__knoppen .knop { flex: 1 1 100%; }
  .voet__logo { width: 180px; }
}

/* ---- rustige beweging --------------------------------------------------- */

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