/* ===========================================================================
   Trinqles Hairstudio, Binnenweg 33 Heemstede
   Richting: warme inkt en papier, met het oranje uit het logo als signaal.
   Terugkerend motief: het korte oranje streepje voor elk opmaatlabel, en een
   foto die telkens over de naad tussen twee secties heen valt.
   =========================================================================== */

:root {
  --inkt: #17120E;
  --inkt-2: #221B15;
  --inkt-3: #2E251D;
  --papier: #F7F3ED;
  --bot: #EFE7DB;
  --zand: #E6D8C5;
  --oranje: #DB6B1A;
  --oranje-diep: #A8480A;
  --oranje-zacht: #F4C79B;
  --tekst: #352E27;
  --tekst-zacht: #6B6259;
  --licht: #F6F2EC;
  --licht-zacht: #C9C2BA;
  --lijn: rgba(23, 18, 14, .14);
  --lijn-licht: rgba(246, 242, 236, .18);

  --kolom: min(100% - 2.5rem, 78rem);
  --ritme: clamp(4rem, 8vw, 7rem);
  --uitsteek: clamp(2.5rem, 6vw, 5.5rem);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* knoppen van de opening */
  --opening-achtergrond: #17120E;
  --opening-demping: .74;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* clip in plaats van hidden: dat maakt geen scrollcontainer en laat
     position: sticky in de dienstenkolom met rust. */
  overflow-x: clip;
}

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

img { max-width: 100%; display: block; }
figure { margin: 0; }
dl, dd, ol, ul { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }

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

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

.omhullend {
  width: var(--kolom);
  margin-inline: auto;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--inkt);
  color: var(--licht);
  padding: .75rem 1.25rem;
  font-size: .9rem;
  text-decoration: none;
}
.overslaan:focus { left: .75rem; top: .75rem; }

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

.titel {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.3rem + 3.1vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.titel--licht { color: var(--licht); }

.lood {
  margin: 0 0 1rem;
  font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem);
  line-height: 1.55;
  max-width: 34ch;
}
.lood--licht { color: var(--licht); }

.zacht {
  margin: 0;
  color: var(--tekst-zacht);
  max-width: 38ch;
}
.zacht--licht { color: var(--licht-zacht); }

.opmaat {
  margin: 0 0 1.4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oranje-diep);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.opmaat::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  flex: 0 0 auto;
  background: var(--oranje);
}
.opmaat--licht { color: var(--oranje-zacht); }

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

.knop {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.knop__icoon { display: block; width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.knop__icoon svg { width: 100%; height: 100%; display: block; }
.knop__tekst { display: block; white-space: nowrap; }

.knop--oranje { background: var(--oranje); color: #190F06; }
.knop--oranje:hover { background: var(--oranje-zacht); transform: translateY(-1px); }

.knop--rand { color: var(--licht); border-color: rgba(246, 242, 236, .42); }
.knop--rand:hover { background: rgba(246, 242, 236, .12); border-color: var(--licht); }

.knop--donker { background: var(--inkt); color: var(--licht); }
.knop--donker:hover { background: var(--oranje); color: #190F06; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .knop { transition: none; }
  .knop:hover { transform: none; }
}

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

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.kop.is-vast {
  background: rgba(23, 18, 14, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--lijn-licht);
}

.kop__binnen {
  width: var(--kolom);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.merk {
  text-decoration: none;
  color: var(--licht);
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-right: auto;
}
.merk__naam {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -.01em;
}
.merk__sub {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oranje-zacht);
}

.nav {
  display: flex;
  gap: 1.6rem;
  font-size: .88rem;
  color: var(--licht);
}
.nav a {
  text-decoration: none;
  padding: .3rem 0;
  position: relative;
  color: rgba(246, 242, 236, .82);
  transition: color .2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--oranje);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.nav a:hover { color: var(--licht); }
.nav a:hover::after, .nav a.is-hier::after { transform: scaleX(1); }
.nav a.is-hier { color: var(--licht); }

.kop__bel { padding: .6rem 1.1rem; font-size: .85rem; }

.menuknop {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid rgba(246, 242, 236, .35);
  border-radius: 999px;
  color: var(--licht);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem .9rem;
  cursor: pointer;
}
.menuknop__streep {
  width: 1rem;
  height: 7px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.kop:has(.lade:not([hidden])) { background: rgba(23, 18, 14, .97); }

.lade {
  background: rgba(23, 18, 14, .97);
  border-top: 1px solid var(--lijn-licht);
  padding: 1.25rem 0 1.75rem;
}
.lade[hidden] { display: none; }
.lade__nav { display: grid; width: var(--kolom); margin-inline: auto; }
.lade__nav a {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--licht);
  text-decoration: none;
  padding: .5rem 0;
  border-bottom: 1px solid var(--lijn-licht);
}
.lade__regel {
  width: var(--kolom);
  margin: .5rem auto 0;
  font-size: .85rem;
  color: var(--licht-zacht);
}
.lade__regel:first-of-type { margin-top: 1.1rem; }

@media (max-width: 930px) {
  .nav { display: none; }
  .menuknop { display: inline-flex; }
  .kop__bel .knop__tekst { display: none; }
  .kop__bel { padding: .62rem; }
  .kop__bel .knop__icoon { width: 1.15rem; height: 1.15rem; }
}
@media (max-width: 460px) {
  .kop__binnen { gap: .7rem; }
  .merk__sub { display: none; }
}

/* ===========================================================================
   DE OPENING
   =========================================================================== */

/* De filmband beslaat bij binnenkomst de bovenste helft van het scherm; de
   kop hoort daar helemaal onder te passen, op de donkere achtergrond. */
.opening__kop {
  display: flex;
  justify-content: center;
  padding: 0 0 clamp(3.5rem, 8svh, 5.5rem);
}
.opening__kopbinnen { width: var(--kolom); }
.opening__kopbinnen .opmaat { margin-bottom: 1.1rem; }
.opening__titel {
  margin: 0 0 1.1rem;
  max-width: 24ch;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--licht);
  font-size: clamp(2.2rem, 1.1rem + 4.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.opening__regel {
  margin: 0 0 1.6rem;
  color: rgba(246, 242, 236, .86);
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  max-width: 34ch;
}
.opening__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

.opening__slot {
  display: flex;
  justify-content: center;
  padding: 0 0 clamp(3rem, 8svh, 5rem);
}
.opening__slotregel {
  width: var(--kolom);
  margin: 0;
  color: var(--licht);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1.15;
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  bottom: 1.4rem;
}
.wenk__lijn {
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(to bottom, rgba(246, 242, 236, 0), rgba(246, 242, 236, .8));
}
.wenk__woord {
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(246, 242, 236, .72);
}
/* Op een telefoon staat de kop zelf al tot onderaan; dan geen wenk ernaast. */
@media (max-width: 699px) {
  .opening-aan .opening__wenk { display: none; }
}

/* De filmband opent in de bovenste helft van het scherm: schuif de foto zo
   dat de stoelen, spiegels en het straatlicht in die strook vallen. */
.opening[data-opening="breedbeeld"] .opening__foto {
  transform: scale(1.26) translateY(-7%);
  transform-origin: 50% 50%;
  object-position: 50% 50%;
}
@media (max-width: 699px) {
  .opening[data-opening="breedbeeld"] .opening__foto {
    transform: scale(1.3) translateY(-6%);
    object-position: 46% 50%;
  }
}

/* ===========================================================================
   BELLEN, de zwarte voortzetting van de hero
   =========================================================================== */

.bellen {
  background: var(--inkt);
  color: var(--licht);
  padding: var(--ritme) 0 calc(var(--ritme) + var(--uitsteek));
  position: relative;
}
.bellen::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--oranje) 0 14%, var(--lijn-licht) 14%);
}

.bellen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
}

.bellen__kop {
  margin: 0 0 1.2rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  line-height: 1.1;
  color: var(--licht);
  max-width: 20ch;
}

.telgroot {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, .9rem + 5.2vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--oranje);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color .25s ease;
}
.telgroot:hover { color: var(--oranje-zacht); }

.bellen__noot {
  margin: 1.4rem 0 0;
  color: var(--licht-zacht);
  max-width: 36ch;
}

.bellen__tijden { padding-bottom: .4rem; }

.tijden {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  border-top: 1px solid var(--lijn-licht);
}
.tijden__dag,
.tijden__uur {
  margin: 0;
  padding: .8rem 0;
  border-bottom: 1px solid var(--lijn-licht);
  font-size: .98rem;
}
.tijden__dag { color: var(--licht-zacht); }
.tijden__uur {
  text-align: right;
  color: var(--licht);
  font-variant-numeric: tabular-nums;
}

.bellen__adres {
  margin: 0;
  color: var(--licht-zacht);
  font-size: .95rem;
}
.bellen__adres:first-of-type { margin-top: 1.2rem; }

@media (max-width: 860px) {
  .bellen__raster { grid-template-columns: 1fr; align-items: start; }
}

/* ===========================================================================
   FOTO OVER DE NAAD
   =========================================================================== */

.uitsteek {
  position: relative;
  z-index: 1;
  width: var(--kolom);
  margin: calc(var(--uitsteek) * -1) auto 0;
  overflow: hidden;
}
.uitsteek img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 50% 56%;
}
.uitsteek--breed img {
  aspect-ratio: 16 / 8;
  object-position: 50% 52%;
}
@media (max-width: 699px) {
  .uitsteek img { aspect-ratio: 4 / 3; }
  .uitsteek--breed img { aspect-ratio: 4 / 3; }
}

/* ===========================================================================
   HAAR
   =========================================================================== */

.haar {
  /* flow-root houdt de negatieve marge van de foto binnen deze sectie, zodat
     hij echt over de naad met het zwart heen valt. */
  display: flow-root;
  background: linear-gradient(180deg, var(--inkt) 0 calc(var(--uitsteek) + 3rem), var(--papier) calc(var(--uitsteek) + 3rem));
  padding-bottom: var(--ritme);
}

.haar__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.haar__intro { position: sticky; top: 6.5rem; }

.haar__detail {
  margin: 2.2rem 0 0;
  width: 9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--lijn);
}
.haar__detail img { width: 100%; height: 100%; object-fit: cover; }

.diensten { counter-reset: regel; }

.dienst {
  counter-increment: regel;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--lijn);
  transition: background-color .3s ease, padding-left .3s ease;
}
.dienst:last-child { border-bottom: 1px solid var(--lijn); }
.dienst::before {
  content: counter(regel, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--oranje-diep);
  padding-top: .18rem;
}
.dienst__naam {
  margin: 0 0 .3rem;
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  font-family: var(--serif);
  line-height: 1.2;
}
.dienst__uitleg {
  margin: 0;
  color: var(--tekst-zacht);
  font-size: .98rem;
  max-width: 44ch;
}
.dienst:hover { background: rgba(219, 107, 26, .06); }

@media (prefers-reduced-motion: reduce) { .dienst { transition: none; } }

@media (max-width: 860px) {
  .haar__raster { grid-template-columns: 1fr; }
  .haar__intro { position: static; }
}

/* ===========================================================================
   STIJLEN
   =========================================================================== */

.stijlen {
  background: linear-gradient(180deg, var(--papier) 0, var(--bot) 26%);
  padding: var(--ritme) 0 calc(var(--ritme) * 1.1);
}

.stijlen__kop {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.stijlen__kop .titel { max-width: 18ch; }

.plaatjes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: start;
}

.plaat__vlak {
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.plaat__vlak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.plaat:hover .plaat__vlak img { transform: scale(1.04); }

/* De vier beelden staan op wit; vermenigvuldigd over een getint vlak worden
   het uitgeknipte figuren in plaats van vier witte kaartjes. Elke uitsnede
   is op de foto zelf afgesteld, zodat er niets wegvalt wat ertoe doet. */
.plaat--een .plaat__vlak { background: var(--zand); aspect-ratio: 4 / 5; }
.plaat--een .plaat__vlak img { object-position: 50% 12%; }

.plaat--twee .plaat__vlak { background: #E3DDD3; aspect-ratio: 1 / 1; }
.plaat--twee .plaat__vlak img { object-position: 0% 50%; }

.plaat--drie .plaat__vlak { background: #F3DCC0; aspect-ratio: 1 / 1; }
.plaat--drie .plaat__vlak img { object-position: 50% 42%; }

.plaat--vier .plaat__vlak { background: #DBD5CB; aspect-ratio: 4 / 5; }
.plaat--vier .plaat__vlak img { object-position: 50% 32%; }

.plaat--twee { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.plaat--drie { margin-top: clamp(.75rem, 2vw, 1.75rem); }
.plaat--vier { margin-top: clamp(2.25rem, 6vw, 5.5rem); }

.plaat__naam {
  margin: .9rem 0 0;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}

@media (prefers-reduced-motion: reduce) {
  .plaat__vlak img { transition: none; }
  .plaat:hover .plaat__vlak img { transform: none; }
}

@media (max-width: 760px) {
  .plaatjes { grid-template-columns: repeat(2, 1fr); gap: 1rem 1rem; }
  .plaat--drie { margin-top: 0; }
  .plaat--vier { margin-top: clamp(1.5rem, 5vw, 3rem); }
}

/* ===========================================================================
   BAND
   =========================================================================== */

.band {
  background: var(--bot);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.band__beeld { margin: 0; }
.band__beeld img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 38%;
}
@media (max-width: 699px) {
  .band { grid-template-columns: 1fr; }
  .band__beeld img { aspect-ratio: 4 / 3; }
}

/* ===========================================================================
   VISAGIE
   =========================================================================== */

.visagie {
  background: var(--inkt);
  color: var(--licht);
  padding: calc(var(--ritme) * 1.05) 0 calc(var(--ritme) + var(--uitsteek));
  position: relative;
  overflow: hidden;
}
.visagie::before {
  content: "";
  position: absolute;
  inset: auto auto -14rem -10rem;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(219, 107, 26, .22), rgba(219, 107, 26, 0) 68%);
  pointer-events: none;
}

.visagie__raster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.visagie__beeld { overflow: hidden; }
.visagie__beeld img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.visagie__tekst .titel { max-width: 15ch; }
.visagie__tekst .lood { max-width: 40ch; }
.visagie__tekst .zacht { max-width: 44ch; }

.punten {
  margin: 1.9rem 0 2.2rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--lijn-licht);
  max-width: 34rem;
}
.punt {
  padding: .8rem 0 .8rem 1.6rem;
  border-bottom: 1px solid var(--lijn-licht);
  position: relative;
  font-size: .98rem;
  color: var(--licht);
}
.punt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: .55rem;
  height: 1px;
  background: var(--oranje);
}

@media (max-width: 860px) {
  .visagie__raster { grid-template-columns: 1fr; }
  .visagie__beeld img { aspect-ratio: 4 / 3; }
}

/* ===========================================================================
   BINNENWEG
   =========================================================================== */

.binnenweg {
  display: flow-root;
  background: linear-gradient(180deg, var(--inkt) 0 calc(var(--uitsteek) + 3rem), var(--papier) calc(var(--uitsteek) + 3rem));
  padding-bottom: calc(var(--ritme) * 1.1);
}

.binnenweg__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.binnenweg__tekst .titel { max-width: 15ch; }

.binnenweg__kaart {
  background: var(--bot);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 3px solid var(--oranje);
}
.kaartlabel {
  margin: 0 0 .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.kaartlabel--marge { margin-top: 1.5rem; }
.kaartregel { margin: 0; font-size: 1.05rem; }
.kaartlink {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
  line-height: 1.1;
  text-decoration: none;
  color: var(--inkt);
  white-space: nowrap;
  border-bottom: 1px solid var(--oranje);
  transition: color .25s ease;
}
.kaartlink:hover { color: var(--oranje-diep); }
.binnenweg__knop { margin-top: 1.8rem; }

@media (max-width: 860px) {
  .binnenweg__raster { grid-template-columns: 1fr; }
}

/* ===========================================================================
   VOET
   =========================================================================== */

.voet {
  background: var(--inkt);
  color: var(--licht);
  padding: calc(var(--ritme) * .85) 0 2rem;
  border-top: 1px solid var(--lijn-licht);
}

.voet__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--lijn-licht);
}

/* Het hele logo, ongesneden, op een licht plaatje: de grijze achtergrond van
   het bestand zelf valt zo niet als blok op het donker. */
.voet__plaat {
  background: var(--licht);
  padding: 1.1rem 1.4rem;
  display: block;
  width: max-content;
  max-width: min(100%, 17rem);
}
.voet__plaat img { width: 100%; height: auto; }

.voet__regel { margin: 0; color: var(--licht-zacht); font-size: .95rem; }
.voet__merk .voet__regel { margin-top: 1.2rem; max-width: 26ch; }

.voet__tel {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--oranje);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.voet__tel:hover { color: var(--oranje-zacht); }

.voet__klein {
  margin: .9rem 0 0;
  font-size: .82rem;
  color: rgba(201, 194, 186, .8);
}

.voet .tijden--klein .tijden__dag,
.voet .tijden--klein .tijden__uur { font-size: .92rem; padding: .6rem 0; }

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-top: 1.5rem;
}
.voet__onder .voet__klein { margin: 0; }
.voet__omhoog { text-decoration: none; }
.voet__omhoog:hover { color: var(--licht); }

@media (max-width: 860px) {
  .voet__raster { grid-template-columns: 1fr 1fr; }
  .voet__merk { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .voet__raster { grid-template-columns: 1fr; }
}

/* ===========================================================================
   404
   =========================================================================== */

.fout {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--inkt);
  color: var(--licht);
  padding: 4rem 0;
}
.fout__binnen { max-width: 46rem; }
.fout__titel {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.fout__regel {
  margin: 0 0 2rem;
  color: var(--licht-zacht);
  max-width: 34ch;
  font-size: 1.1rem;
}
.fout__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.fout__klein {
  margin: 3rem 0 0;
  font-size: .85rem;
  color: rgba(201, 194, 186, .75);
}

/* ===========================================================================
   ONTHULLEN
   =========================================================================== */

.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(1.1rem);
}
.js [data-reveal].is-in,
.js [data-reveal-group] > .is-in {
  opacity: 1;
  transform: none;
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--vertraag, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
}