/* ===========================================================================
   Jan IJzerman Coiffure, Deventer
   ---------------------------------------------------------------------------
   Richting: het merk is wit op zwart, de salon heeft warm licht achter een
   donkere gevel. Daarom een pagina in inkt met één lichte papierbaan als
   tegenwicht, messing als enige accent, en een doorlopend motief van
   haarlijnen met genummerde etiketten. Beelden zijn klein van oorsprong en
   staan dus altijd in een kolom of kaart, nooit schermbreed.
   =========================================================================== */

:root {
  /* kleur */
  --inkt: #131315;
  --inkt-diep: #0A0A0B;
  --inkt-op: #1C1C1F;
  --papier: #EFE9E0;
  --papier-op: #E5DCCE;
  --licht: #F7F4EF;
  --zacht: #C3BDB4;
  --gedempt: #938C83;
  --donker: #18181A;
  --donker-zacht: #4D463D;
  --goud: #D9A441;
  --goud-diep: #7C4F14;
  --lijn-licht: rgba(247, 244, 239, .15);
  --lijn-donker: rgba(19, 19, 21, .16);

  /* opening */
  --opening-achtergrond: #131315;
  --opening-demping: .62;

  /* letter: geen extern lettertype, dus geen data naar Google bij het laden */
  --letter-kop: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --letter: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ritme */
  --ritme: clamp(3.5rem, 7vw, 5.75rem);
  --laan: 19rem;
  --laangat: clamp(2rem, 4vw, 3.25rem);
  --kantlijn: calc((100% - min(100% - 2.5rem, 1240px)) / 2);
}

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

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

body {
  margin: 0;
  background: var(--inkt);
  color: var(--zacht);
  font-family: var(--letter);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

a { color: inherit; }

::selection { background: var(--goud); color: #15120C; }

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

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: .75rem 1.25rem;
  background: var(--goud);
  color: #15120C;
  font-weight: 600;
  text-decoration: none;
}
.overslaan:focus { left: .75rem; top: .75rem; }

.band {
  width: min(100% - 2.5rem, 1240px);
  margin-inline: auto;
}

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

.titel {
  font-family: var(--letter-kop);
  line-height: 1.03;
  letter-spacing: -.012em;
  color: var(--licht);
}

.titel--groot {
  font-size: clamp(2.05rem, 4.4vw, 3.9rem);
  max-width: 17ch;
}

.vlak--papier .titel { color: var(--donker); }

.opmaat {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.opmaat--licht { color: rgba(247, 244, 239, .78); }

.lood {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--licht);
  max-width: 34ch;
}
.vlak--papier .lood { color: var(--donker); }

.tekst { max-width: 46ch; }
.tekst--groot { font-size: 1.08rem; max-width: 40ch; }
.vlak--papier .tekst { color: var(--donker-zacht); }

.citaat {
  font-family: var(--letter-kop);
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--licht);
  max-width: 16ch;
}

.citaat__onder {
  margin-top: 1rem;
  max-width: 34ch;
  color: var(--gedempt);
}

/* motief: genummerd etiket met doorlopende haarlijn */
.etiket {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.etiket__nr {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--goud);
}
.etiket__tekst {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.etiket::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lijn-licht);
}
.etiket--donker .etiket__nr { color: var(--goud-diep); }
.etiket--donker .etiket__tekst { color: var(--donker-zacht); }
.etiket--donker::after { background: var(--lijn-donker); }

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.knop__tekst { position: relative; z-index: 1; }
.knop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--licht);
  transform: translateY(101%);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.knop:hover::before, .knop:focus-visible::before { transform: translateY(0); }

.knop--vol {
  background: var(--goud);
  color: #15120C;
}
.knop--vol:hover, .knop--vol:focus-visible { color: #15120C; }

.knop--lijn {
  border-color: rgba(247, 244, 239, .38);
  color: var(--licht);
}
.knop--lijn:hover, .knop--lijn:focus-visible { color: #15120C; border-color: var(--licht); }

.verwijs {
  display: inline-block;
  margin-top: 1.4rem;
  padding-bottom: .3rem;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--goud-diep);
  border-bottom: 1px solid currentColor;
  transition: color .25s ease, letter-spacing .25s ease;
}
.verwijs:hover { letter-spacing: .13em; }
.verwijs--licht { color: var(--goud); }

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

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom: 1px solid transparent;
}
.kop.is-vast {
  background: rgba(10, 10, 11, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--lijn-licht);
}

.kop__binnen {
  width: min(100% - 2.5rem, 1240px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.kop__merk { display: block; flex: 0 0 auto; line-height: 0; }
.kop__merk img {
  height: 2.4rem;
  width: auto;
  mix-blend-mode: screen;
  transition: height .4s ease;
}
.kop.is-vast .kop__merk img { height: 2rem; }

.kop__nav {
  display: flex;
  gap: clamp(1rem, 2vw, 1.9rem);
  margin-left: auto;
}
.kop__nav a {
  position: relative;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  color: rgba(247, 244, 239, .76);
  padding-block: .25rem;
  transition: color .25s ease;
}
.kop__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--goud);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.kop__nav a:hover, .kop__nav a.is-actief { color: var(--licht); }
.kop__nav a:hover::after, .kop__nav a.is-actief::after { transform: scaleX(1); }

.kop__bel { padding: .7rem 1.2rem; font-size: .8rem; }

.kop__schakel {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--lijn-licht);
  border-radius: 999px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.kop__streep {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--licht);
  transition: transform .3s ease, opacity .3s ease;
}
.kop.is-open .kop__streep:first-child { transform: translateY(3.25px) rotate(45deg); }
.kop.is-open .kop__streep:last-child { transform: translateY(-3.25px) rotate(-45deg); }

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

.opening__kop {
  padding-inline: var(--kantlijn);
  padding-bottom: clamp(2.75rem, 7svh, 4.5rem);
}

.opening__inhoud {
  max-width: min(46%, 33rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
}

.opening__titel {
  font-family: var(--letter-kop);
  font-size: clamp(2.2rem, 5.3vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--licht);
}

.opening__lead {
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: rgba(247, 244, 239, .82);
  max-width: 30ch;
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .35rem;
}

.opening__slot {
  padding-inline: var(--kantlijn);
  padding-bottom: clamp(3rem, 9svh, 5.5rem);
}
.opening__slotregel {
  font-family: var(--letter-kop);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1.08;
  color: var(--licht);
  max-width: 18ch;
}

.opening__wenk { flex-direction: column; align-items: center; gap: .55rem; }
.wenk__woord {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, .66);
}
.wenk__lijn {
  display: block;
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, rgba(247, 244, 239, .7), rgba(247, 244, 239, 0));
}

/* ---------------------------------------------------------------------- vlak */

.vlak {
  position: relative;
  padding-block: var(--ritme);
}
.vlak--donker { background: var(--inkt); }
.vlak--papier { background: var(--papier); color: var(--donker-zacht); }
.vlak--diep { background: var(--inkt-diep); }

/* de salon en wat wij doen delen één vlak: geen naad, alleen ritme */
.salon { padding-bottom: calc(var(--ritme) * .45); }
.stijlen { padding-top: calc(var(--ritme) * .75); }

/* ---------------------------------------------------------------------- beeld */

.beeld { margin: 0; }
.beeld__lijst {
  position: relative;
  overflow: hidden;
  background: var(--inkt-op);
}
.beeld__lijst::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--lijn-licht);
  pointer-events: none;
}
.vlak--papier .beeld__lijst::after { box-shadow: inset 0 0 0 1px var(--lijn-donker); }

.beeld__lijst img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.beeld:hover .beeld__lijst img { transform: scale(1.04); }

/* waar de uitsnede afwijkt van de verhouding van de foto, blijft het hoofd
   in beeld in plaats van het midden */
.beeld--laag .beeld__lijst img { object-position: 50% 14%; }

.beeld__onder {
  margin-top: .8rem;
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--gedempt);
}

/* ---------------------------------------------------------------------- salon */

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

.salon__woord { display: flex; flex-direction: column; gap: 1.35rem; }
.salon__woord .titel--groot { max-width: 15ch; margin-bottom: .25rem; }

.merkpunten {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .5rem;
  border-top: 1px solid var(--lijn-licht);
  padding-top: 1.25rem;
}
.merkpunten__item {
  position: relative;
  padding-left: 1.4rem;
  font-size: .9rem;
  color: var(--zacht);
}
.merkpunten__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: .5rem;
  height: 1px;
  background: var(--goud);
}

.salon__beelden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  align-items: start;
}
.beeld--gevel { grid-column: 1; grid-row: 1; }
.beeld--gevel .beeld__lijst { aspect-ratio: 3 / 4; }
.beeld--hal { grid-column: 2; grid-row: 1 / span 2; margin-top: clamp(1.5rem, 5vw, 4rem); }
.beeld--hal .beeld__lijst { aspect-ratio: 2 / 3; }
.beeld--stoelen { grid-column: 1; grid-row: 2; margin-top: clamp(.9rem, 1.8vw, 1.4rem); }
.beeld--stoelen .beeld__lijst { aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------------- stijlen */

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

.stijlen__intro { display: flex; flex-direction: column; gap: 1.2rem; }
.stijlen__intro .titel--groot { max-width: 13ch; }
.beeld--hoog { margin-top: 1rem; }
.beeld--hoog .beeld__lijst { aspect-ratio: 3 / 4; }
.beeld--hoog .beeld__lijst img { object-position: 50% 42%; }

.werk { border-top: 1px solid var(--lijn-licht); }
.werk__rij {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) 0;
  border-bottom: 1px solid var(--lijn-licht);
  transition: border-color .35s ease;
}
.werk__rij:hover { border-bottom-color: rgba(217, 164, 65, .55); }
.werk__nr {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gedempt);
  padding-top: .55rem;
  transition: color .3s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}
.werk__rij:hover .werk__nr { color: var(--goud); transform: translateX(4px); }
.werk__woord { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.werk__rij:hover .werk__woord { transform: translateX(6px); }
.werk__titel {
  font-family: var(--letter-kop);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.1;
  color: var(--licht);
  margin-bottom: .45rem;
}
.werk__tekst { max-width: 52ch; font-size: .97rem; }

/* uitroep: de zwarte achtergrond van de fotostrook loopt door in het vlak */

.uitroep { margin-top: clamp(2.5rem, 6vw, 5rem); }
.uitroep__band { padding-right: 0; }

.uitroep__beeld {
  position: relative;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  width: min(100%, 960px);
  aspect-ratio: 2.3 / 1;
  overflow: hidden;
  background: #000;
}
.uitroep__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* de zwarte achtergrond van de strook loopt over in het vlak eromheen */
.uitroep__beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--inkt), rgba(19, 19, 21, 0) 14%, rgba(19, 19, 21, 0) 86%, var(--inkt)),
    linear-gradient(0deg, var(--inkt), rgba(19, 19, 21, 0) 42%);
}

.uitroep__woord { max-width: 32rem; }
.uitroep__woord .knop { margin-top: 1.6rem; }

/* --------------------------------------------------------------------- advies */

.advies__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--laan);
  gap: var(--laangat);
  align-items: start;
}
.advies__intro { display: flex; flex-direction: column; gap: 1.2rem; }
.advies__intro .etiket { margin-bottom: .25rem; }

/* de fotokaart hangt over de rand van het vorige vlak: de naad tussen twee
   vlakken is nooit een rechte lijn, maar een beeld dat erdoorheen zakt */
.beeld--zweef { margin-top: calc(-1 * clamp(5rem, 13vw, 11rem)); position: relative; z-index: 2; }
.beeld--zweef .beeld__lijst { aspect-ratio: 2 / 3; }
.beeld--zweef .beeld__lijst img { object-position: 100% 25%; }

.vormen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--lijn-donker);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}
.vorm { display: flex; flex-direction: column; }
.vorm + .vorm { position: relative; }
.vorm + .vorm::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(.6rem, 1.3vw, 1.1rem));
  top: .25rem;
  bottom: .25rem;
  width: 1px;
  background: var(--lijn-donker);
}
.vorm__teken {
  color: var(--goud-diep);
  margin-bottom: 1rem;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), color .3s ease;
}
.vorm__teken svg { width: 3.5rem; height: auto; display: block; }
.vorm:hover .vorm__teken { transform: translateY(-4px); color: #A5681B; }
.vorm__titel {
  font-family: var(--letter-kop);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--donker);
  margin-bottom: .5rem;
}
.vorm__tekst { font-size: .93rem; color: var(--donker-zacht); }

.advies__voet {
  display: grid;
  grid-template-columns: minmax(0, .46fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
.beeld--breed .beeld__lijst { aspect-ratio: 4 / 5; }
.beeld--breed .beeld__lijst img { object-position: 100% 85%; }
.advies__slot { padding-bottom: .5rem; }

/* ---------------------------------------------------------------------- heren */

.heren { overflow: visible; }
.heren__raster {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.beeld--over {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  margin-top: calc(-1 * clamp(5rem, 12vw, 10rem));
}
.beeld--over .beeld__lijst { aspect-ratio: 2 / 3; }

.heren__woord {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.heren__woord .titel--groot { max-width: 14ch; }

.heren__lijst {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  margin-top: .75rem;
}
.heren__item {
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn-licht);
}
.heren__titel {
  font-family: var(--letter-kop);
  font-size: 1.3rem;
  color: var(--licht);
  margin-bottom: .4rem;
}
.heren__tekst { font-size: .95rem; max-width: 54ch; }

.beeld--laag {
  grid-column: 1;
  grid-row: 2;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.beeld--laag .beeld__lijst { aspect-ratio: 4 / 5; }

/* dezelfde twee foto's als eerder op de pagina, nu anders uitgesneden */
.beeld__lijst--hem-over img { object-position: 62% 42%; }
.beeld__lijst--hem-laag img { object-position: 4% 55%; }

/* --------------------------------------------------------------------- bezoek */

.bezoek__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.bezoek__oproep { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.bezoek__oproep .titel--groot { max-width: 12ch; }

.telefoon {
  display: inline-block;
  font-family: var(--letter-kop);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--goud);
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(217, 164, 65, .4);
  transition: border-color .3s ease, color .3s ease;
}
.telefoon:hover { color: var(--licht); border-bottom-color: var(--licht); }

.bezoek__gegevens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lijn-licht);
  border: 1px solid var(--lijn-licht);
}
.kaartje {
  background: var(--inkt-diep);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.kaartje__titel {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: 1rem;
}
.kaartje__regel { font-size: .95rem; }
.kaartje__regel--ruim { margin-top: .8rem; }
.kaartje__tekst { font-size: .93rem; }

.uren { display: flex; flex-direction: column; gap: .5rem; }
.uren__rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .93rem;
}
.uren__rij::before {
  content: '';
  order: 1;
  flex: 1;
  height: 1px;
  margin-bottom: .22em;
  background: var(--lijn-licht);
}
.uren__dag { order: 0; color: var(--licht); }
.uren__tijd { order: 2; color: var(--zacht); font-variant-numeric: tabular-nums; }
.uren__rij--dicht .uren__dag { color: var(--gedempt); }
.uren__rij--dicht .uren__tijd { color: var(--gedempt); }

/* --------------------------------------------------------------------- footer */

.voet {
  background: var(--inkt-diep);
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.5rem;
  border-top: 1px solid var(--lijn-licht);
}
.voet__band {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.voet__merk img {
  width: clamp(130px, 14vw, 170px);
  height: auto;
  mix-blend-mode: screen;
}
.voet__zin {
  margin-top: 1.1rem;
  font-family: var(--letter-kop);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--zacht);
  max-width: 20ch;
}
.voet__titel {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-bottom: .9rem;
}
.voet__regel { font-size: .93rem; }
.voet__link {
  display: block;
  font-size: .93rem;
  text-decoration: none;
  color: var(--zacht);
  transition: color .25s ease;
}
.voet__link:hover { color: var(--goud); }

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn-licht);
}
.voet__klein {
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--gedempt);
}
.voet__klein--link { text-decoration: none; transition: color .25s ease; }
.voet__klein--link:hover { color: var(--goud); }

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

.js-reveal [data-reveal] {
  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-reveal [data-reveal].is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .stijlen__raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .heren__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  :root { --laan: 15rem; }
}

@media (max-width: 960px) {
  .kop__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 1.25rem;
    background: rgba(10, 10, 11, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lijn-licht);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .4s ease, visibility .4s;
  }
  .kop.is-open .kop__nav {
    max-height: 22rem;
    visibility: visible;
    padding-block: .5rem 1.25rem;
  }
  .kop__nav a {
    font-size: 1.05rem;
    padding-block: .85rem;
    border-bottom: 1px solid var(--lijn-licht);
  }
  .kop__nav a:last-child { border-bottom: 0; }
  .kop__nav a::after { display: none; }
  .kop__schakel { display: flex; }
  .kop__bel { display: none; }

  .salon__raster,
  .stijlen__raster,
  .bezoek__raster { grid-template-columns: minmax(0, 1fr); }

  .salon__beelden { max-width: 34rem; }

  .advies__top { grid-template-columns: minmax(0, 1fr); }
  .beeld--zweef {
    margin-top: 0;
    max-width: 16rem;
    margin-left: auto;
  }
  .uitroep__band { padding-right: 0; }

  .vormen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
  .vorm:nth-child(3)::before { display: none; }

  .heren__raster { grid-template-columns: minmax(0, 1fr); }
  .beeld--over {
    margin-top: calc(-1 * clamp(3rem, 9vw, 7rem));
    grid-column: auto;
    grid-row: auto;
    max-width: 20rem;
  }
  .heren__woord { grid-column: auto; grid-row: auto; }
  .beeld--laag { grid-column: auto; grid-row: auto; max-width: 18rem; margin-left: auto; }

  .voet__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__merk { grid-column: 1 / -1; }
}

@media (min-width: 961px) {
  .uitroep__band { padding-right: calc(var(--laan) + var(--laangat)); }
  .kop__nav { max-height: none; visibility: visible; }
}

@media (max-width: 700px) {
  :root { --ritme: clamp(3rem, 9vw, 4rem); }

  .opening__inhoud { max-width: 100%; gap: .95rem; }
  .opening__kop { padding-bottom: 3.4rem; }
  .opening__titel { font-size: clamp(1.95rem, 8vw, 2.7rem); }
  .opening__lead { font-size: .94rem; }
  .opening__knoppen { gap: .55rem; }
  .opening__knoppen .knop { padding: .78rem 1.15rem; font-size: .8rem; }
  .opening__slot { padding-bottom: 4rem; }

  .titel--groot { max-width: 100%; }
  .salon__beelden { max-width: none; }
  .beeld--hal { margin-top: 1rem; }

  .werk__rij { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .6rem; }

  .vormen { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .vorm + .vorm::before { display: none; }
  .vorm + .vorm { border-top: 1px solid var(--lijn-donker); padding-top: 1.75rem; }
  .vorm__teken svg { width: 2.75rem; }

  .advies__voet { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .beeld--breed { max-width: 15rem; }

  .beeld--zweef { max-width: 13rem; }
  .beeld--over { max-width: 15rem; }
  .beeld--laag { max-width: 13rem; }

  .bezoek__gegevens { grid-template-columns: minmax(0, 1fr); }

  .voet__band { grid-template-columns: minmax(0, 1fr); }
  .voet__merk { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}