/* ==========================================================================
   Estria Barbershop - "Editorial Warm" design system
   Anchor: Fellow Barber. Cream base, near-black warm ink, one terracotta whisper.
   Fraunces (display serif) + Inter (sans). Max ~4 type sizes. One motion vocab.
   ========================================================================== */

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

/* Lenis smooth-scroll (foundation layer) — required base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

html {
  /* Fluid rem engine: scales with viewport, locks on big monitors */
  font-size: clamp(15px, 0.62vw + 11px, 19px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* FOOTER WHITE-STRIP FIX: root paints dark so the bottom rubber-band /
     overscroll gap below the dark footer reveals ink, never a white strip.
     body's cream covers the whole page, so only the bottom overscroll ever
     shows this — the cream page is not darkened. */
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --paper:    #F4F0EA;
  --paper-2:  #EBE5DB;
  --ink:      #1A1712;
  --ink-soft: #4A443B;
  --accent:   #A6532F;
  --line:     rgba(26, 23, 18, 0.14);
  --line-2:   rgba(26, 23, 18, 0.08);

  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Keuze [[Giu]] 16-8 uit vier voorstellen: Zilla Slab met Inter Tight.
     Slab past bij het hout en de vintage bordjes in de zaak, en Inter Tight is
     smaller dan Inter waardoor koppen en labels compacter staan. */
  --serif: "Zilla Slab", Georgia, "Times New Roman", serif;

  /* Rhythm */
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --sect-y: clamp(4.5rem, 11vh, 11rem);
  --maxw: 1600px;

  /* Eén afstand tussen een kop en de tekst eronder, zodat elk blok hetzelfde
     ritme heeft. Wens [[Giu]] 29-8: overal evenveel ruimte tussen tekst en
     titel. Stond eerder per blok verschillend op 15, 18, 19 en 24px. */
  --kop-tekst: 1.2rem;

  --logo-h: 46px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Type scale (4 sizes) ---------------------------------------------- */
.display {                       /* hero + section-opening statements */
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(2.9rem, 7.2vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0;
}
.h-lg {                          /* large serif (service names, review numeral) */
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
}
.h-md {                          /* mid serif (about statement) */
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.eyebrow {                       /* Inter uppercase label */
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.body-lg { font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); }
.body    { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

/* ---- Layout primitives -------------------------------------------------- */
.section {
  padding-block: var(--sect-y);
  padding-inline: var(--pad-x);
}
.wrap { max-width: var(--maxw); margin-inline: auto; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- Liquid pill CTA (one motion vocabulary) --------------------------- */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  border: 1px solid var(--ink);
  /* Minder rond dan een capsule, keuze [[Giu]] 16-8. Sluit aan op de 4-5px
     van de foto's en de kaarten in plaats van ertegenin te gaan. */
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), transform 0.14s ease-out;
}
.pill:active { transform: scale(0.97); }   /* Apple §1: instant press feedback */
.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.pill:hover { color: var(--paper); }
.pill:hover::before { transform: translateY(0); }
.pill--light { border-color: var(--paper); color: var(--paper); }
.pill--light::before { background: var(--paper); }
.pill--light:hover { color: var(--ink); }

/* quiet text link with animated underline */
.tlink {
  position: relative;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
  padding-bottom: 2px;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .arrow { transition: transform 0.4s var(--ease); display: inline-block; }
.tlink:hover .arrow { transform: translateX(4px); }

/* ---- Motion: masked-line reveal + section reveal ----------------------- */
.reveal-line {
  display: block;
  overflow: hidden;
  /* Zilla Slab hangt dieper onder de basislijn dan Fraunces. Zonder deze
     marge knipt het masker de staart van een g of j af. De negatieve marge
     haalt de extra ruimte er weer af, zodat de regelafstand gelijk blijft. */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-io);
}
.reveal-line.is-in > span { transform: translateY(0); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-io), transform 0.9s var(--ease-io);
}
.reveal.is-in { opacity: 1; transform: none; }
/* stagger helpers */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ==========================================================================
   1. NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  /* Krapper dan de 1,15rem die hier stond: met het merkteken op 64px werd de
     balk 108 tot 117px hoog. Wens [[Giu]] 29-8. */
  padding: 0.75rem var(--pad-x);
  color: var(--paper);
  transition: background 0.5s var(--ease), color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.nav.is-solid {
  background: rgba(244, 240, 234, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 0.6rem;
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-solid { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav__brand {
  /* Het echte merkteken van de zaak, uit de vector-PDF van de klant.
     Hoogte stuurt, breedte volgt, anders vervormt het kader. */
  display: block;
  line-height: 0;
}
/* Boven de hero is de nav doorzichtig en de tekst wit, na scrollen wordt hij
   crème met donkere tekst. Het merkteken wisselt mee, anders staat zwart op
   een donkere foto. 38px zodat de regel BARBERSHOP nog leesbaar blijft. */
.nav__brand { position: relative; }
/* Maat van het merkteken. Ging op 16-8 van 38 naar 64px omdat het op 38 als
   een postzegel las; op 29-8 terug naar 46, want met 64 werd de balk 108 tot
   117px hoog en dat vond [[Giu]] te fors. De footer gebruikt dezelfde
   variabele, zodat de twee niet uit elkaar lopen. */
.nav__logo { height: var(--logo-h); width: auto; display: block; transition: opacity 0.5s var(--ease); }
.nav__logo--donker { position: absolute; inset: 0; opacity: 0; }
.nav.is-solid .nav__logo--licht { opacity: 0; }
.nav.is-solid .nav__logo--donker { opacity: 1; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 3px;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 1.5rem; }
.nav .pill { border-color: currentColor; color: inherit; padding: 0.7em 1.4em; }
/* De vulling mag NIET currentColor zijn. Die erft de kleur van de knop, en bij
   hover verandert die kleur mee: boven de hero werden vulling en tekst allebei
   donker en verdween het woord "Boek nu" in een zwart vlak. Gemeld door [[Giu]]
   16-8. Daarom staat de vulling per toestand vast, tegengesteld aan de tekst. */
.nav:not(.is-solid) .pill::before { background: var(--paper); }
.nav:not(.is-solid) .pill:hover { color: var(--ink); }
.nav.is-solid .pill::before { background: var(--ink); }
.nav.is-solid .pill:hover { color: var(--paper); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;         /* Apple §10: min 44px touch target */
  margin-right: -0.5rem;             /* keep icon optically flush to the edge */
  background: none; border: 0; padding: 0;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  width: 24px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

/* Mobile full-cream overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--pad-x);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-io);
  visibility: hidden;
}
.menu.is-open { transform: translateY(0); visibility: visible; }
.menu a {
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* Boeken staat niet meer als zoveelste menuregel maar als knop, in dezelfde
   volle bruine balk als in het boekingsblok. Adres, telefoon en mail zijn uit
   het menu gehaald (wens [[Giu]] 19-8, "is too much"): ze staan al in de
   contactsectie en in de voettekst, en in het menu duwden ze de knop weg. */
.menu .menu__cta {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.menu .menu__cta:active { background: #8F4728; }

/* ==========================================================================
   2. HERO - full-bleed image + warm scrim
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;    /* stacking context: keeps the -z-index video/scrim
                            painting INSIDE the hero, above the cream body bg
                            (without this the video hides behind body → blank hero) */
  min-height: 100svh;
  display: flex;
  /* De kop staat alleen in de hero, zonder knop eronder. Onderaan uitlijnen
     hoorde bij de opzet met kop, tekst en knop; nu hoort hij in het midden.
     Wens [[Giu]] 16-8. */
  align-items: center;
  overflow: hidden;
  color: var(--paper);
}
.hero__media {
  position: absolute;
  inset: -4% 0;          /* headroom for scroll parallax (no edge gaps) */
  height: 108%;
  z-index: -2;
  will-change: transform;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 36%;
}
/* Geen ken-burns op de hero. Rustiger past beter bij "strak" (wens [[Giu]]
   16-8) en het scheelt een langzame inzoom die bij elke wissel van de foto
   opnieuw beoordeeld moet worden. De parallax bij het scrollen blijft. */
.hero__media img { transform: none; animation: none; }
@keyframes kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Lichter dan bij de oude stockvideo. Daar mocht het beeld wegvallen, hier
       is de zaak zelf het onderwerp en moet je de stoelen, de spiegelwand en
       het hout kunnen zien. Onderin blijft het donker genoeg voor de knop. */
    linear-gradient(180deg, rgba(20,17,12,0.46) 0%, rgba(20,17,12,0.10) 26%),
    linear-gradient(0deg, rgba(20,17,12,0.88) 0%, rgba(20,17,12,0.62) 26%, rgba(20,17,12,0.34) 48%, rgba(20,17,12,0.14) 70%, rgba(20,17,12,0) 88%),
    radial-gradient(115% 62% at 50% 80%, rgba(20,17,12,0.42) 0%, rgba(20,17,12,0) 64%);
}
.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad-x);
}
/* centered editorial hero composition */
.hero__inner--center { text-align: center; }
.hero__inner--center .hero__title { margin-inline: auto; }
.hero__inner--center .hero__sub { margin-inline: auto; }
.hero__inner--center .hero__actions { justify-content: center; }
.hero .eyebrow { color: rgba(244,240,234,0.85); margin-bottom: 1.4rem; }
/* Het merkteken staat groot boven de regel: wens [[Giu]] 16-8, weinig tekst
   en een duidelijk logo op het eerste scherm. */
.hero__mark {
  display: block;
  width: clamp(150px, 17vw, 250px);
  height: auto;
  margin: 0 auto clamp(0.6rem, 1.2vw, 1.1rem);
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.45));
}
/* Kop klein en in het midden. Wens van [[Dalil]] via [[Giu]] 19-8: de grote
   trapkop van 16-8 mocht weg, "tekst kleiner, vervangen met so fresh so clean,
   ook netjes kleiner ergens in het midden".

   Op desktop in kapitalen en op ÉÉN regel (wens [[Giu]] 29-8). De twee
   regel-maskers staan daarvoor naast elkaar in plaats van onder elkaar; ze
   blijven aparte maskers, want anders vervalt de opkomende regel-animatie.
   Op de telefoon blijven het twee regels, daar is de breedte er niet. */
.hero__title {
  color: var(--paper);
  max-width: none;
  margin-inline: auto;
  font-size: clamp(1.5rem, 3.4vw, 3.1rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow: 0 2px 26px rgba(0,0,0,0.5);
}
.hero__title .reveal-line { display: inline-block; vertical-align: baseline; }
.hero__inner--midden { text-align: center; }
.hero__inner--midden .hero__actions { justify-content: center; }
.hero__sub {
  margin: 1.8rem 0 2.4rem;
  max-width: 42ch;
  color: rgba(244,240,234,0.9);
  font-size: 1.08rem;
  line-height: 1.65;
}
.hero__foto--phone { display: none; }
/* De tussenzin is eruit, dus de knop moet zelf afstand houden van de kop. */
.hero__dock { margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
.hero__actions { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.hero .pill--light { color: var(--paper); }
/* Deze regel hierboven staat later in het bestand dan `.pill--light:hover` en
   heeft dezelfde specificiteit, dus hij won ook tijdens hover: creme tekst op
   een creme vulling, knop leeg. Tweede keer dat een knop op deze manier
   onleesbaar werd, nu in de hero. Gemeld door [[Giu]] 16-8. */
.hero .pill--light:hover { color: var(--ink); }
/* subtle scroll cue below the CTA (centered hero) */
.hero__scrollcue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 234, 0.62);
  transition: color 0.4s var(--ease);
}
.hero__scrollcue:hover { color: rgba(244, 240, 234, 0.95); }
.hero__scrollcue-line {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgba(244,240,234,0.7), rgba(244,240,234,0));
  overflow: hidden;
}
.hero__scrollcue-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 42px;
  background: rgba(244, 240, 234, 0.95);
  transform: translateY(-100%);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

/* ==========================================================================
   3. OVER ONS - asymmetric 2-col
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.about__lead { position: sticky; top: 7rem; }
.about__lead .eyebrow { margin-bottom: 1.6rem; }
.about__lead .accent { color: var(--accent); }
.about__col { display: flex; flex-direction: column; gap: 2.4rem; }
.about__body p { margin: 0 0 1.15rem; }
.about__body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
/* De browser geeft een figure standaard 40px marge links en rechts. Elke
   andere figure op de pagina staat op 0, deze als enige niet, waardoor de foto
   smaller was dan de tekstkolom erboven en er niet mee uitlijnde. */
.about__fig { position: relative; margin: 0; }
.about__fig img {
  width: 100%;
  /* `height: auto` is geen sierregel. Zonder die regel wint het HTML-attribuut
     `height` van `aspect-ratio` en wordt de foto zo hoog als het bestand: 1500px
     in een kolom van 495. Tweede keer dat deze fout toeslaat, de eerste was de
     reviewfoto op 16-8. */
  height: auto;
  /* Vierkant in plaats van staand, wens [[Dalil]] 19-8: "hij is te lang, moet
     zelfde lengte hebben als de tekst links ernaast". Gemeten: kop 508px,
     foto nu 495px. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.about__fig figcaption {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin: 2.6rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.about__stat dt {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.about__stat:first-child dt { color: var(--accent); }   /* highlight longevity */
/* Sterretje achter het cijfer, verzoek [[Giu]] 17-8. Klein en opgetild zodat
   het als voetnoot bij het cijfer leest en niet als los teken op de regel.
   Decoratief, dus aria-hidden: de schermlezer krijgt "4,9 op KnipKlok". */
.stat__ster {
  margin-left: 0.16em;
  font-size: 0.42em;
  line-height: 1;
  vertical-align: 0.85em;
  color: var(--accent);
}
.about__stat dd {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ==========================================================================
   4. DIENSTEN - interactive menu list + sticky hover-swap visual
   ========================================================================== */
.services { background: var(--paper); }
.services__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.services__head .intro { max-width: 40ch; justify-self: end; }

.svc-showcase {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.svc-menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svcm { border-bottom: 1px solid var(--line); }
.svcm__row {
  display: grid;
  /* Vaste prijskolom: diensten zonder KnipKlok-tarief laten hem leeg, maar de
     boek-link blijft daardoor op één lijn staan. */
  grid-template-columns: auto 1fr 5.2rem auto;
  align-items: baseline;
  column-gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: clamp(1.1rem, 2.3vw, 1.9rem) 0;
  color: var(--ink);
  transition: transform 0.4s var(--ease);
}
.svcm__num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.svcm__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color 0.4s var(--ease);
}
.svcm__desc {
  display: block;
  margin-top: 0.45rem;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}
.svcm__book {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity 0.4s var(--ease);
}
.svcm__book .arrow { display: inline-block; transition: transform 0.4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .svcm__row:hover { transform: translateX(10px); }
  .svcm__row:hover .svcm__name { color: var(--accent); }
  .svcm__row:hover .svcm__book { opacity: 1; }
  .svcm__row:hover .svcm__book .arrow { transform: translateX(4px); }
}
.svcm__row:active { transform: translateX(10px) scale(0.996); }

/* Prijs per dienst. Bron = de KnipKlok-API van de zaak zelf (shop 435),
   niet geschat. Alleen de diensten die daar echt een tarief hebben krijgen
   er een; de rest blijft bewust zonder prijs. */
.svcm__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  white-space: nowrap;
  text-align: right;
}
.svcm__amt {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.svcm__dur {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  /* Op smal scherm zakt de boek-link weg en draagt de prijs de regel. */
  .svcm__row { grid-template-columns: auto 1fr auto; }
  .svcm__book { display: none; }
  .svcm__price { min-width: 0; }
}

.svc-visual {
  position: sticky;
  top: 6rem;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.svc-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s var(--ease), transform 1s var(--ease);
}
.svc-visual img.is-active { opacity: 1; transform: scale(1); }

/* ==========================================================================
   4b. BOEKEN - full-bleed split feature band (image + ink panel)
   ========================================================================== */
.booking {
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: stretch;
  background: var(--ink);
  color: var(--paper);
}
.booking__media { overflow: hidden; }
.booking__media img {
  width: 100%; height: 100%;
  min-height: 62vh;
  object-fit: cover;
  object-position: center 40%;
}
.booking__panel {
  padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.booking__title { color: var(--paper); max-width: 15ch; }
.booking__lead {
  color: rgba(244, 240, 234, 0.82);
  max-width: 44ch;
  margin: var(--kop-tekst) 0 2.4rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.booking__steps {
  list-style: none;
  margin: 0 0 2.6rem;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.bstep {
  position: relative;
  padding: 1.15rem 1.05rem 1.25rem;
  border: 1px solid rgba(244, 240, 234, 0.16);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
              background 0.4s var(--ease);
}
.bstep::before {                        /* terracotta top-rail grows on hover */
  content: "";
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.bstep__num {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.7rem;
  transition: transform 0.4s var(--ease);
}
.bstep__title {
  display: block;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 0.35rem;
}
.bstep__detail {
  display: block;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(244, 240, 234, 0.58);
  transition: color 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .bstep:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 240, 234, 0.34);
    background: rgba(244, 240, 234, 0.05);
  }
  .bstep:hover::before { transform: scaleX(1); }
  .bstep:hover .bstep__num { transform: translateX(3px); }
  .bstep:hover .bstep__detail { color: rgba(244, 240, 234, 0.85); }
}
.bstep:active { transform: translateY(-4px) scale(0.99); }
.booking__cta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.booking__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: rgba(244, 240, 234, 0.82);
}
.booking__trust strong { color: var(--paper); font-weight: 600; }
.booking__stars { color: var(--accent); font-size: 1rem; letter-spacing: 0.12em; }
.booking__note {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(244, 240, 234, 0.55);
}
@media (max-width: 820px) {
  .booking { grid-template-columns: 1fr; }
  .booking__media img { min-height: 0; aspect-ratio: 16 / 10; }
  .booking__steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. WERK - offset editorial mosaic
   ========================================================================== */
.work { background: var(--paper); }
.work__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(3rem, 6vw, 7rem);
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
}
.mosaic figure { margin: 0; overflow: hidden; height: 100%; }
.mosaic img {
  width: 100%; height: 112%;
  object-fit: cover;
  will-change: transform;
  transition: filter 0.7s var(--ease);
}
.mosaic figure:hover img { filter: brightness(1.06) saturate(1.05); }
/* De logo-tegel krijgt geen overhoogte en geen parallax. De andere tegels
   staan op 112% zodat ze bij het scrollen kunnen driften zonder randen te
   tonen, maar die extra zoom duwt hier "BARBERSHOP" tegen de rand aan. */
.m-b img { height: 100%; }
.m-a { grid-column: 1 / 7;  grid-row: span 6; }
.m-b { grid-column: 7 / 13; grid-row: span 4; margin-top: clamp(1.5rem, 4vw, 4rem); }
.m-c { grid-column: 1 / 5;  grid-row: span 4; }
.m-d { grid-column: 5 / 10; grid-row: span 5; }
.m-e { grid-column: 10 / 13; grid-row: span 4; margin-top: clamp(1.5rem, 3vw, 3rem); }

/* ==========================================================================
   5b. OOK MOGELIJK — housecalls + cursussen + aanvraagformulier
   Toegevoegd 29-8 op verzoek van [[Ethem]], herbouwd 29-8 nadat [[Giu]] zei dat
   de eerste opzet met twee kaartjes "erop gedouwd" leest. Dat klopte: kaarten
   met een rand komen nergens anders op deze pagina voor.

   Deze versie leent de twee vormen die de site al gebruikt: de kop links met
   de inhoud rechts (zoals over ons) en genummerde regels met een haarlijn
   ertussen (zoals de dienstenlijst). De foto staat als volle band tussen de
   lijst en het formulier, net als de band boven de footer.
   ========================================================================== */
.extra { background: var(--paper-2); padding-bottom: 0; }
.extra__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.extra__lead { position: sticky; top: 7rem; }
.extra__lead p { margin: var(--kop-tekst) 0 0; max-width: 34ch; }

.xlijst { margin: 0; padding: 0; list-style: none; }
.xrij {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
  border-top: 1px solid var(--line);
}
.xrij:last-child { border-bottom: 1px solid var(--line); }
.xrij__num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.45rem;
}
.xrij__naam {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.xrij__desc {
  margin: 0.7rem 0 0;
  max-width: 46ch;
  color: var(--ink-soft);
  line-height: 1.6;
}
.xrij__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.1rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.35s var(--ease);
}
.xrij__cta .arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.xrij__cta:hover { color: var(--accent); }
.xrij__cta:hover .arrow { transform: translateX(4px); }

/* Volle band, zelfde rol als de bandfoto boven de footer: hij scheidt de
   lijst van het formulier zonder er een derde blok bij te zetten. */
.xband {
  position: relative;
  /* Randvullend: .section heeft zijpadding, die trekken we hier weg zodat de
     band van rand tot rand loopt, net als de band boven de footer. */
  margin: clamp(3rem, 7vw, 6rem) calc(-1 * var(--pad-x)) 0;
  overflow: hidden;
}
.xband img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  /* Rechts van het midden: daar staan de barbier en de cape. Precies in het
     midden zie je vooral het bed en het ringlicht. */
  object-position: 62% 52%;
  filter: grayscale(1) contrast(1.04);
}
.xband figcaption {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(0.9rem, 2vw, 1.6rem);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

/* ---- Aanvraagformulier --------------------------------------------------- */
.aanvraag {
  padding: clamp(3rem, 7vw, 6rem) 0 var(--sect-y);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 6vw, 6rem);
  align-items: start;
}
.aanvraag__kop p { margin: 0.9rem 0 0; max-width: 32ch; color: var(--ink-soft); }
.aanvraag__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem clamp(0.9rem, 1.6vw, 1.4rem);
}
.veld { display: flex; flex-direction: column; gap: 0.45rem; }
.veld--breed { grid-column: 1 / -1; }
.veld label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.veld input,
.veld select,
.veld textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.75em 0.9em;
  width: 100%;
  transition: border-color 0.3s var(--ease);
}
.veld textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.veld input:focus,
.veld select:focus,
.veld textarea:focus { outline: none; border-color: var(--accent); }
.veld input:user-invalid,
.veld textarea:user-invalid { border-color: #A33; }
/* Geen flex-veld: de link en de punt erachter werden anders losse regels. */
.aanvraag__klein { display: block; font-size: 0.82rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.aanvraag__klein a { text-decoration: underline; text-underline-offset: 2px; }
.aanvraag__voet { flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pill--vol {
  border: 0;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  min-height: 50px;
}
.pill--vol::before { display: none; }
.pill--vol:hover { color: var(--paper); background: #8F4728; }
.aanvraag__status { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.aanvraag__status.is-goed { color: #2F7A46; }
.aanvraag__status.is-fout { color: #A33; }

/* ==========================================================================
   6. TEAM / DE BARBERS - monogram portrait cards (hover = ink fill + book reveal)
   ========================================================================== */
/* Diensten op de tweede papierkleur, wens [[Giu]] 29-8. Daarmee wisselen de
   secties nu netjes af: over ons licht, diensten donker, boeken licht,
   housecalls donker, werk licht, team donker, reviews licht, contact donker.
   Eerder stonden over ons, diensten en boeken alle drie op dezelfde kleur. */
.services { background: var(--paper-2); }

.team { background: var(--paper-2); }
/* Kleinere marge dan de andere secties: de detailkolom staat verticaal
   gecentreerd naast de fotorij, dus daar komt al ruimte bij. */
.team__head { max-width: 58ch; margin-bottom: clamp(1.4rem, 2.4vw, 2.4rem); }
.team__head p { margin: var(--kop-tekst) 0 0; max-width: 44ch; }

/* Team-accordeon. Referentie aangedragen door [[Giu]] 16-8 (Dribbble
   "Our Team Hedonism UI"): een rij smalle fotostroken die openklapt zodra je
   er met de muis overheen gaat, met de naam en het aanbod van die barber in
   de kolom ernaast.

   Twee dingen bewust anders dan de referentie:
   - De stroken zijn <button> en geen link, zodat een klik op de telefoon
     opent in plaats van meteen naar KnipKlok te springen. Boeken doe je met
     de knop in de detailkolom, die de actieve barber volgt.
   - De teksten in de detailkolom zijn echte gegevens uit de KnipKlok-API
     (naam + behandelingen die deze barber doet), geen verzonnen bio's over
     bestaande mensen. Alleen Mohamed wijkt af, hij doet ook gezichts-
     behandelingen.

   De bronfoto's zijn 300x300. Een open paneel is daarom bewust niet breder
   dan ongeveer 320px, anders wordt de foto zichtbaar opgeblazen. */
.team__stage {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.25fr;
  gap: clamp(1.6rem, 3.5vw, 3.4rem);
  align-items: center;
}

.team__detail { min-width: 0; }
.team__d-idx {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.7rem;
}
.team__d-idx::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 0.9rem;
}
.team__d-name {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}
.team__d-role {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.55rem 0 0;
}
.team__d-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}
.team__d-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.team__d-cta .arrow { transition: transform 0.35s var(--ease); }
.team__d-cta:hover { color: var(--accent); border-color: var(--accent); }
.team__d-cta:hover .arrow { transform: translateX(4px); }

/* De naam wisselt met een korte fade, anders springt de kolom hard om. */
.team__detail.is-wissel .team__d-idx,
.team__detail.is-wissel .team__d-name,
.team__detail.is-wissel .team__d-cta { opacity: 0; transform: translateY(6px); }
.team__d-idx, .team__d-name, .team__d-cta {
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease);
}

/* Drie cirkels boven, twee eronder en die twee gecentreerd. Het raster heeft
   zes kolommen zodat de onderste rij een halve cirkel kan opschuiven; met
   drie kolommen zou hij links uitlijnen. */
.barbers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem) 0;
  min-width: 0;
  /* Diameter van een rustende cirkel. De actieve schaalt hierbinnen op met
     transform, dus het raster verspringt niet. */
  --d: clamp(76px, 9.6vw, 138px);
}
.barbers .barber:nth-child(1) { grid-column: 1 / 3; }
.barbers .barber:nth-child(2) { grid-column: 3 / 5; }
.barbers .barber:nth-child(3) { grid-column: 5 / 7; }
.barbers .barber:nth-child(4) { grid-column: 2 / 4; }
.barbers .barber:nth-child(5) { grid-column: 4 / 6; }
.barber {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--d);
  height: var(--d);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  overflow: visible;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.55s var(--ease-io);
}
.barber.is-open { transform: scale(1.22); z-index: 2; }

.barber__ph {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  aspect-ratio: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
  /* Dunne rand houdt de cirkel los van de zandkleurige achtergrond. */
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 0.5s var(--ease);
}
.barber.is-open .barber__ph { box-shadow: 0 0 0 2px var(--accent); }

/* Gezicht in het midden van de cirkel, en overal even groot.

   De vijf bronfoto's zijn vierkant en kaderen de barber elk anders: bij Miqi
   vult het gezicht 38% van de hoogte en begint het op 12%, bij Ethem is dat
   25% vanaf 40%. Zonder correctie staat de een met zijn kruin tegen de rand
   en zweeft de ander in het midden van de zaak.

   Per barber staan in de HTML drie waardes. De foto wordt op z maal de cirkel
   gezet en zo verschoven dat het punt (fx, fy) van de bron in het midden van
   de cirkel valt.

   De gezichten zijn opgemeten met de gezichtsherkenning van OpenCV, niet met
   het oog: die geeft per bron het middelpunt en de hoogte van het gezicht.
   Daaruit volgt z zodat het gezicht overal 52% van de cirkel vult, en fy
   zodat het midden van het gezicht op 46% van de hoogte staat. Iets boven het
   midden dus, zoals een portret hoort te zitten.

   Bij Miqi is z iets hoger dan die 52% vraagt. Zijn kruin loopt in de bron
   boven de rand uit, dus zonder extra zoom valt de bovenkant van de cirkel
   leeg. Dat is de enige uitzondering en ze staat in het script.

   Nieuwe barber erbij: scripts/meet-gezichten.py draaien, die rekent de drie
   waardes uit en print ze. */
.barber__photo {
  position: absolute;
  max-width: none;
  width: calc(var(--z, 1) * 100%);
  height: calc(var(--z, 1) * 100%);
  left: calc(50% - var(--fx, 0.5) * var(--z, 1) * 100%);
  top: calc(50% - var(--fy, 0.5) * var(--z, 1) * 100%);
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.55s var(--ease);
}
.barber.is-open .barber__photo { filter: grayscale(0) contrast(1); }

/* De naam staat in de detailkolom; in de cirkel zelf is er geen onderrand om
   hem op te leggen. */
.barber__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Deze vier zijn op desktop weggeklapt in .barber__meta, maar de telefoon
   toont ze wel als index-rij. Ze horen dus bij de basis, niet bij een van
   de twee weergaves. */
.barber__idx {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.barber__name {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.barber__role {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.barber__book {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.barber__book .arrow { display: inline-block; transition: transform 0.4s var(--ease); }


.barber:active .barber__photo { filter: grayscale(0) contrast(1); }
/* keyboard-focus parity: reveal the book affordance + a visible ring */
.barber:focus-visible,
.svcm__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }
.svcm__row:focus-visible .svcm__book { opacity: 1; }

/* ==========================================================================
   7. REVIEWS - dominant numeral + quote grid
   ========================================================================== */
.reviews { background: var(--paper); }
.reviews__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Zijkolom van de reviews: echte foto van de zaak met het cijferblok dat er
   overheen valt, naar de stijlreferentie van [[Giu]] 16-8. Foto is een eigen
   opname van de klant (geen watermerk, in tegenstelling tot de fotoshoot). */
.reviews__side { position: relative; }
.reviews__foto {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.reviews__foto img {
  width: 100%;
  /* height:auto is nodig: het height-attribuut op de <img> geldt als CSS-hoogte
     en overstemt anders de aspect-ratio. Zelfde valkuil als img{max-width:100%}. */
  height: auto;
  /* Breed uitgesneden uit de staande opname van de klant: het interieur vult
     het beeld horizontaal, dus een liggende uitsnede verliest niets wezenlijks
     en houdt de kolom laag. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* Cijferregel staat onder de foto in de linkerkolom, zoals in de eerste opzet.
   Geen kaart en geen overlap: die dekte het beeld af. */
.reviews__kop { margin-top: clamp(1.3rem, 2.2vw, 1.9rem); }
.reviews__cijfer {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
}


.reviews__num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stars { color: var(--accent); font-size: 1.15rem; letter-spacing: 0.15em; margin: 1.2rem 0 0.9rem; }
.reviews__cijfer .stars { margin: 0; font-size: 1rem; }

.reviews__count { font-size: 0.95rem; color: var(--ink-soft); margin: 0.6rem 0 1.1rem; }
/* Tweede cijfer onder het eerste: KnipKlok draagt de citaten, Google is het
   grootste openbare profiel. Bewust kleiner, want de reviews in de rail komen
   van KnipKlok en dan moet dat cijfer voorop staan. */
.reviews__count--tweede { margin-top: 0.3rem; font-size: 0.88em; opacity: 0.82; }

.reviews__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reviews__kop .pill { min-height: 44px; padding: 0 1.2em; font-size: 0.88rem; white-space: nowrap; }
/* ======================================================================
   REVIEWS — horizontale kaartenrail (stijlreferentie [[Giu]] 16-8)
   Bron van alle citaten: de KnipKlok-API van de zaak (shopReview, 23 stuks).
   Alleen vijf sterren en alleen reviews met een zin die iets zegt; de enige
   twee-sterrenreview blijft eruit, zoals eerder vastgelegd.
   De ronde foto is bewust de BARBER over wie de review gaat, niet de klant:
   van klanten hebben we geen portret en verzinnen doen we niet.
   ====================================================================== */
.rv-rail { min-width: 0; }
.rv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}
.rv-head__lead { margin: 0; max-width: 38ch; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.rv-nav { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.rv-btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.rv-btn svg { width: 19px; height: 19px; }
.rv-btn--aan { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.rv-btn[disabled] { opacity: 0.32; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .rv-btn:not([disabled]):hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
}

.rv-track {
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  list-style: none;
  margin: 0; padding: 0 0 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.rv {
  flex: 0 0 min(420px, 82%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.6rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rv__quote { margin: 0; }
.rv__quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.rv__foot { display: flex; align-items: center; gap: 0.85rem; }
.rv__avatar {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1);
}
.rv__avatar--leeg { background: var(--paper-2, #eae4dc); display: block; }
.rv__who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.rv__name { font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em; }
.rv__over { font-size: 0.78rem; color: var(--ink-soft); }
.rv__stars { margin-left: auto; color: var(--accent); font-size: 0.82rem; letter-spacing: 0.08em; white-space: nowrap; }

.rv-bars { display: flex; gap: 6px; margin-top: 1.4rem; }
.rv-bar {
  height: 3px; flex: 1 1 0;
  background: rgba(26, 23, 18, 0.12);
  border-radius: 2px;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.rv-bar.is-aan {
  background: var(--accent);
  transform: scaleY(1.6);   /* het actieve balkje moet je zien, 3px kleurverschil is te weinig */
}

@media (max-width: 700px) {
  .rv { flex-basis: 84%; }
  .rv-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
}
.quote { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.quote__text {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 1rem;
}
.quote__meta { display: flex; align-items: center; gap: 0.7rem; }
.quote__name { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.quote__stars { color: var(--accent); font-size: 0.75rem; letter-spacing: 0.1em; }

/* ==========================================================================
   8. CONTACT - typographic block + map
   ========================================================================== */
.contact { background: var(--paper-2); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: stretch;
}
.contact__info .eyebrow { margin-bottom: 1.4rem; }
.contact__addr {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 2rem;
}
.contact__lines { list-style: none; margin: 0 0 2.4rem; padding: 0; }
.contact__lines li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); font-size: 0.98rem; }
.contact__lines a:hover { color: var(--accent); }
.hours { list-style: none; margin: 0 0 2.4rem; padding: 0; border-top: 1px solid var(--line); }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.hours li.is-today { color: var(--ink); font-weight: 500; }
.hours li.is-today .hours__day::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.6em;
  vertical-align: middle;
}
.hours__day { text-transform: capitalize; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.4em 0.9em;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }
.badge.is-open { color: #2f6b3f; border-color: rgba(47,107,63,0.4); }
.badge.is-open .dot { background: #2f6b3f; }
.badge.is-closed { color: var(--accent); border-color: rgba(166,83,47,0.4); }
.badge.is-closed .dot { background: var(--accent); }
.contact__map { display: flex; flex-direction: column; gap: 1rem; }
.contact__map iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 6px; display: block; filter: grayscale(0.4) sepia(0.12) contrast(1.02); }
/* Telefoon en mail staan onder de kaart in plaats van boven de openingstijden,
   verzoek [[Giu]] 16-8. Op de telefoon blijven de drie tegels Bellen, Mailen
   en Route dat werk doen, dus daar is deze lijst verborgen. */
.contact__map .contact__lines { margin: 1.4rem 0 0; }

.map__link { align-self: flex-start; font-family: var(--sans, Inter, sans-serif); font-size: 0.9rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.map__link:hover { color: var(--accent); border-color: var(--accent); }
.map__link .arrow { transition: transform .2s; display: inline-block; }
.map__link:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   9. CTA BAND - full-bleed warm image
   ========================================================================== */
.band {
  position: relative;
  /* isolation is hier verplicht: .band__media staat op z-index -2 en de donkere
     waas op -1. Zonder eigen stapelcontext schilderen die achter de achtergrond
     van de body, en dan zie je een leeg crème vlak met crème tekst erin.
     Exact dezelfde fout als eerder bij de hero. */
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  text-align: center;
  padding-block: clamp(5rem, 14vh, 11rem);
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(20,17,12,0.62);
}
/* Kleiner dan de andere displaykoppen, wens [[Dalil]] 19-8 ("deze ook kleiner
   of weglaten"). Hij staat over de merkfoto heen, dus op volle displaymaat
   dekte hij het logo op de trui bijna helemaal af. */
.band__title {
  color: var(--paper);
  max-width: 18ch;
  margin: 0 auto 2.2rem;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3.5rem, 8vh, 6rem) var(--pad-x) 2.5rem;
}
/* Footer overscroll-white is handled by html{background:var(--ink)} — no 100vh
   ::after (that added a full viewport of dead space below the footer). */
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(244,240,234,0.16);
}
.footer__brand {
  line-height: 0;
}
/* Even hoog als het merkteken in de balk, verzoek [[Giu]] 16-8. Dezelfde
   variabele, zodat de twee niet uit elkaar lopen als er een verandert. */
.footer__brand img { height: var(--logo-h, 64px); width: auto; display: block; }
.footer h3 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,240,234,0.6);
  margin: 0 0 1.2rem;
  font-weight: 500;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 0.35rem 0; font-size: 0.95rem; color: rgba(244,240,234,0.82); }
.footer a:hover { color: var(--paper); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  font-size: 0.78rem;
  color: rgba(244,240,234,0.55);
}

/* ==========================================================================
   Legal page (privacyverklaring)
   ========================================================================== */
.legal {
  max-width: 64ch;
  margin-inline: auto;
  padding: clamp(5rem, 11vh, 8rem) var(--pad-x) clamp(4rem, 8vh, 6rem);
}
.legal h1 { margin-bottom: 1.4rem; }
.legal__intro { margin: 0 0 2.4rem; }
.legal h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 2.4rem 0 0.7rem;
}
.legal p { margin: 0 0 1rem; }
.legal a { color: var(--accent); }
.legal__updated { font-size: 0.82rem; color: var(--ink-soft); margin: 2.6rem 0 1.6rem; }
.footer__legal a { color: rgba(244, 240, 234, 0.72); }
.footer__legal a:hover { color: var(--paper); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__right .pill { display: none; }
  .nav__burger { display: flex; }

  .about { grid-template-columns: 1fr; gap: 3rem; }
  .about__lead { position: static; }

  .services__head { grid-template-columns: 1fr; gap: 1.2rem; }
  .services__head .intro { justify-self: start; }
  .svc-showcase { grid-template-columns: 1fr; }
  .svc-visual { display: none; }
  .svcm__book { opacity: 1; }                  /* no hover on touch → show Boek fully */

  .mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(3rem, 12vw, 6rem); }
  .m-a { grid-column: 1 / 7; grid-row: span 5; }
  .m-b { grid-column: 1 / 4; grid-row: span 4; margin-top: 0; }
  .m-c { grid-column: 4 / 7; grid-row: span 4; }
  .m-d { grid-column: 1 / 5; grid-row: span 5; }
  .m-e { grid-column: 5 / 7; grid-row: span 5; margin-top: 0; }

  .reviews__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .quotes { grid-template-columns: 1fr; }

  .contact__grid { grid-template-columns: 1fr; }
  .contact__map { min-height: 300px; }
  .contact__map iframe { height: 340px; }              /* Apple §6: less scrolling on mobile */

  .footer__top { grid-template-columns: 1fr; gap: 2rem; }

  /* Apple §10: >=44px touch targets for inline text links on mobile */
  .nav__brand { padding-block: 0.3rem; }
  .contact__lines li { padding: 0.1rem 0; }
  .contact__lines li a { display: flex; align-items: center; min-height: 46px; }
  .map__link { display: inline-flex; align-items: center; min-height: 44px; }
  .footer li a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 560px) {
  .hero__actions { gap: 1.2rem; }
  .quotes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PHONE-TAILORED VIEW (device-split in one codebase, <=700px)
   Desktop is not a phone mirror: reframe the hero, cut text, tap-native.
   ========================================================================== */
.hero__img-phone { display: none; }
.show-phone { display: none; }

/* ==========================================================================
   PHONE-TAILORED VIEW — full editorial redesign (<=700px, finer <=430px)
   ONE motion vocabulary (var(--ease)/--ease-io), ONE spacing rhythm.
   Geometry differentiates every section; palette stays locked.
   Desktop (>700px) is untouched.
   ========================================================================== */
@media (max-width: 700px) {
  .hide-phone { display: none !important; }
  .show-phone { display: revert; }

  /* Phone reveals: shorter travel + faster easing so they lead a fast
     finger-scroll instead of popping in late (paired w/ earlier IO trigger). */
  /* Groter en iets trager dan de 14px/0,5s die hier stond: op een telefoon
     scroll je snel, en een verplaatsing van 14px is dan nauwelijks te zien.
     Wens [[Giu]] 29-8. */
  .reveal { transform: translateY(26px); transition-duration: 0.75s; }
  .reveal-line > span { transition-duration: 0.85s; }

  /* shared phone rhythm — tighter so sections fit the screen (was 72px) */
  .section { padding-block: 52px; }
  .comma { color: var(--accent); }

  /* Redundant end-CTA band = a ~400px near-empty block on phone (booking already
     ends with a "Klaar voor je afspraak?" CTA plate). Remove it so contact flows
     straight into the footer with no dead space. */
  /* Zelfde 52px als elke andere sectie op de telefoon; 64 viel eruit. */
  .band { padding-block: 52px; }

  /* NAV — light text over the full-bleed dark hero image */
  .nav:not(.is-solid) { color: var(--paper); }

  /* Op de telefoon blijft de balk niet plakken maar scrollt hij gewoon met de
     pagina mee weg (wens [[Giu]] 19-8). Daarmee vervalt ook de aanleiding voor
     de crème-achtergrond die hij tijdens het scrollen aannam: hij staat alleen
     nog boven de hero, dus wit op de foto volstaat.
     Gevolg: het menu is alleen bovenaan de pagina te openen. Zie DECISIONS. */
  .nav { position: absolute; }
  .nav.is-solid {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--paper);
    padding-block: 0.75rem;
  }
  .nav.is-solid .nav__logo--licht { opacity: 1; }
  .nav.is-solid .nav__logo--donker { opacity: 0; }

  /* Zodra het menu opengaat wisselt de balk naar donker. Het menu is een
     creme vlak en het merkteken en de burger staan op currentColor, dus zonder
     deze wissel staat er wit op creme. Twee selectors diep om van de regels
     hierboven te winnen. */
  html.menu-open .nav,
  html.menu-open .nav.is-solid { color: var(--ink); }
  html.menu-open .nav .nav__logo--licht,
  html.menu-open .nav.is-solid .nav__logo--licht { opacity: 0; }
  html.menu-open .nav .nav__logo--donker,
  html.menu-open .nav.is-solid .nav__logo--donker { opacity: 1; }

  /* ======================================================================
     HERO — full-bleed immersive (typical top barbershop): the craft photo
     fills the screen; headline + CTA overlaid at the bottom over a scrim.
     ====================================================================== */
  .hero {
    position: relative;
    /* Precies de verhouding van de gevelfoto (1448 : 1086). Zo staat de foto
       randvullend zonder iets af te snijden en zonder vervaagde banden, en
       valt de kop op de bestrating onder de ingang (wens [[Giu]] 29-8). */
    min-height: 0;
    height: auto;
    aspect-ratio: 1448 / 1086;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    padding:
      0
      max(20px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom) + 30px)
      max(20px, env(safe-area-inset-left));
  }

  .hero__inner,
  .hero__inner--center { display: block; position: relative; z-index: 2; padding: 0; margin: 0; text-align: left; }
  .hero__sub {
    display: block;
    margin: 0 0 22px;
    max-width: 32ch;
    color: rgba(244, 240, 234, 0.86);
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Twee regels kapitaal die elk op een regel moeten passen. Zonder deze
     maat breekt "DE BARBERSHOP" op 390px in tweeen en krijg je een losse
     "DE" boven de trap. Gemeten: 9,6vw houdt de langste regel binnen de
     kolom van 350px. De 13ch-begrenzing die hier stond moet weg, die is
     gemaakt voor de oude kop van een regel. */
  .hero__title,
  .hero__inner--midden .hero__title {
    z-index: 2;
    position: relative;
    margin: 0;
    max-width: none;
    color: var(--paper);
    font-weight: 500;
    font-size: clamp(1.35rem, 6.4vw, 1.9rem);
    line-height: 1.15;
    /* Kapitaal en rechtsonder in de hoek, wens [[Giu]] 29-8. Iets ruimere
       letterafstand, want kapitalen lopen anders dicht. */
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: right;
    margin-inline: 0 0;
    max-width: none;
    text-shadow: 0 2px 20px rgba(0,0,0,0.55);
  }  /* Terug naar twee regels onder elkaar: op 390px past de zin niet op één. */
  .hero__title .reveal-line { display: block; }

  .hero__inner--midden { text-align: right; }
  .hero__inner,
  .hero__inner--midden {
    position: absolute;
    left: 0; right: 0;
    /* Op de bestrating: die beslaat de onderste ~14% van de opname. */
    bottom: 3.5%;
    z-index: 2;
    padding: 0 max(20px, env(safe-area-inset-left));
  }

  /* Balk wit met het donkere merkteken: zo springt het logo linksboven eruit
     en blijven de luifels van de gevel vrij (wens [[Dalil]] 29-8). */
  .nav,
  .nav.is-solid {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    box-shadow: none;
  }
  .nav:not(.is-solid) { color: var(--ink); }
  .nav .nav__logo--licht,
  .nav.is-solid .nav__logo--licht { opacity: 0; }
  .nav .nav__logo--donker,
  .nav.is-solid .nav__logo--donker { opacity: 1; }
  .hero__title::after { display: none; }

  /* Beeldvullend zonder iets af te snijden. De scherpe foto staat op ware
     verhouding in het midden; de ruimte links, rechts, boven en onder wordt
     gevuld met dezelfde foto, uitvergroot en vervaagd. Zo blijven de twee
     luifels en het neonbord heel (wens [[Dalil]]) en is er geen wit vlak
     waar de kop op zou moeten zweven (wens [[Giu]]). */
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--ink);
  }
  .hero__media::before {
    content: "";
    position: absolute;
    inset: -8%;
    background: url("../images/editorial/hero-gevel-vol.webp") center / cover no-repeat;
    filter: blur(26px) brightness(0.42) saturate(0.9);
    /* Vangnet: bij een afwijkende verhouding vult dit de randen. */
  }
  /* De hele gevel in beeld, niets afgesneden. Wens [[Dalil]] 29-8: "hij is
     beetje small, die foto mag wat breder gemaakt worden en die bovenkant zou
     ik wit maken, zodat je die 3 strepen beter ziet en het logo links boven".
     Een staande uitsnede uit deze 4:3-opname sneed de luifels links en rechts
     eraf en dat las als scheef. Nu: witte balk bovenin met het donkere
     merkteken, daaronder de foto op ware verhouding, daaronder de kop. */
  .hero__foto { display: none; }
  .hero__media .hero__foto--phone {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /* contain, niet cover: de gevel is symmetrisch en zodra je de zijkanten
       aansnijdt leest hij scheef. */
    object-fit: contain;
    /* Bovenaan uitlijnen: dan sluit de gevel aan op de witte balk en zit alle
       vervaagde vulling onderaan, precies waar de kop staat. */
    object-position: 50% 0%;
    transform: none;
    animation: none;
  }
  /* Alleen onderin donkerder, waar de kop staat. De gevel zelf blijft vrij. */
  .hero__scrim {
    display: block;
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top,
      rgba(16,13,9,0.62) 0%,
      rgba(16,13,9,0.30) 12%,
      rgba(16,13,9,0) 26%);
  }

  /* dock: full-width terracotta CTA + tappable scroll cue */
  .hero__dock {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 0;
  }
  .hero__actions { display: block; margin: 0; }
  .hero .pill.pill--light {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 54px;
    padding: 0 1.6em;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: var(--paper);
    font-size: 1rem;
    letter-spacing: 0.01em;
  }
  .hero .pill.pill--light::before { display: none; }
  .hero .pill.pill--light:active { transform: scale(0.97); background: #8F4728; }

  .hero__scrollcue {
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0;
    min-height: 44px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.82rem;
    color: rgba(244, 240, 234, 0.72);
  }
  .hero__scrollcue-line { display: none; }
  .hero__scrollcue::after {
    content: "↓";
    display: inline-block;
    animation: cuebob 1.6s var(--ease) infinite;
  }
  @keyframes cuebob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

  /* ======================================================================
     ABOUT — magazine tuck: left-bled B&W frame, serif headline pulled up
     into the leftover cream, self-drawing stat rail with terracotta comma.
     ====================================================================== */
  .about {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Krappe bovenruimte: de foto schuift daarmee omhoog richting de hero.
       Wens [[Giu]] 29-8, de witruimte onder de gevelfoto was te groot. De kop
       "Dé bestemming..." blijft gewoon onder de foto staan. */
    padding-top: 22px;
    /* Nul: de foto vormt zelf de overgang naar de dienstensectie. */
    padding-bottom: 0;
  }
  .about__col { display: contents; }

  /* Foto sluit de over-ons-sectie af en vormt de overgang naar de diensten.
     Randvullend van rand tot rand, maar op ware verhouding en dus volledig in
     beeld: hij liep eerder half buiten het scherm en dat wilde [[Giu]] niet
     (29-8). Zelfde rol als de fotoband bij housecalls. */
  .about__fig {
    order: 4;
    align-self: stretch;
    width: auto;
    margin: 34px calc(-1 * var(--pad-x)) 0;
  }


  .about__fig img {
    /* Geen vaste verhouding: de foto is vierkant en wordt hier in zijn geheel
       getoond, niets uitgesneden. */
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    filter: grayscale(1) contrast(1.05);
  }
  .about__fig figcaption { display: none; }

  .about__lead {                   /* (2) kop links uitgelijnd, wens [[Giu]] 29-8 */
    order: 2;
    position: static;
    top: auto;
    align-self: flex-start;
    text-align: left;
    max-width: 100%;
    margin-top: 0;
    z-index: 2;
  }
  .about__lead .display { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.08; }

  .about__body { order: 3; margin-top: 26px; }   /* (3) body + (4) stat rail */
  .about__body .body-lg { font-size: 1rem; line-height: 1.6; max-width: 40ch; }

  .about__stats {
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--ink);
  }
  .about__stat { padding-left: 14px; }
  .about__stat + .about__stat { border-left: 1px solid rgba(26, 23, 18, 0.22); }
  .about__stat:first-child { padding-left: 0; }
  .about__stat dt,
  .about__stat:first-child dt { color: var(--ink); font-size: clamp(34px, 11vw, 46px); }
  .about__stat dd { font-size: 11px; letter-spacing: 0.12em; margin-top: 0.4rem; }

  /* ======================================================================
     DIENSTEN — editorial index (magazine contents page)
     oversized serif numeral column · full-bleed hairlines · circular arrow
     ====================================================================== */
  .services__head { margin-bottom: 34px; }
  .svc-menu { border-top: 1px solid rgba(26, 23, 18, 0.12); }
  .svcm { border-bottom: 1px solid rgba(26, 23, 18, 0.12); }
  .svcm__desc { display: none; }
  .svcm__row {
    grid-template-columns: 52px 1fr 44px;
    align-items: center;
    column-gap: 14px;
    min-height: 96px;
    padding: 18px var(--pad-x);          /* content inset */
    margin-inline: calc(-1 * var(--pad-x)); /* hairline bleeds full-width */
  }
  .svcm__num {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 38px;
    line-height: 1;
    color: var(--ink-soft);
  }
  .svcm__name { font-size: 24px; line-height: 1.1; }
  .svcm__book {                         /* becomes the 44px circular affordance */
    width: 44px; height: 44px;
    justify-content: center;
    border: 1px solid rgba(26, 23, 18, 0.15);
    border-radius: 50%;
    opacity: 1;
    font-size: 0;
  }
  .svcm__book .arrow {
    font-size: 15px;
    color: var(--accent);
    transform: rotate(45deg);           /* → becomes ↘ */
  }
  .svcm__row:active { transform: none; background: var(--paper-2); }

  /* ======================================================================
     BOOKING — light editorial rail terminating in ONE dark decisive plate
     ====================================================================== */
  /* GEEN `overflow: hidden` hier. Dat had ik geprobeerd tegen het crème
     strookje, maar de echte oorzaak lag elders (zie .booking__note hieronder)
     en de overflow knipte het zwarte blok tijdens het scrollen af, omdat de
     knop en de notitie negatieve zijmarges gebruiken om randvullend te zijn.
     Gemeld door [[Giu]] 29-8. */
  .booking {
    display: block;
    background: var(--paper);
    color: var(--ink);
    padding-bottom: 0;
  }
  .booking__media { display: none; }
  /* 80px boven de titel was te veel (wens [[Giu]] 29-8). Onder blijft 0: het
     zwarte CTA-blok moet zelf de sectie afsluiten. */
  .booking__panel { padding: 52px 24px 0; align-items: stretch; }
  .booking__title { color: var(--ink); max-width: 14ch; }
  .booking__lead { color: var(--ink-soft); max-width: 34ch; margin: var(--kop-tekst) 0 2rem; font-size: 1rem; }

  .booking__steps {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding-left: 44px;
  }
  .booking__steps::before {             /* static rail track */
    content: "";
    position: absolute;
    left: 21px; top: 6px; bottom: 6px;
    width: 2px;
    background: rgba(26, 23, 18, 0.12);
  }
  .booking__steps::after {              /* terracotta progress, draws on reveal */
    content: "";
    position: absolute;
    left: 21px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.9s var(--ease);
  }
  .booking__steps.is-in::after { transform: scaleY(1); }

  .bstep {
    position: relative;
    padding: 22px 0 10px 8px;
    border: 0;
    border-radius: 0;
  }
  .bstep::before {                      /* node dot on the rail (was top-rail) */
    content: "";
    position: absolute;
    left: -30px; top: 30px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    transform: none;
  }
  .bstep__num {
    font-size: 56px;
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 1px rgba(26, 23, 18, 0.28);
    margin-bottom: 0.2rem;
  }
  .bstep__title { color: var(--ink); font-size: 1.02rem; }
  .bstep__detail {
    display: block;
    color: var(--ink-soft);
    font-size: 0.86rem;
  }

  .booking__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    /* Was 40px marge plus 40px padding; dat gaf een leeg gat. Daarna 20px, en
       dat vond [[Giu]] weer net te krap. Nu 34. */
    margin: 34px calc(-1 * 24px) 0;
    padding: 30px 24px calc(28px + env(safe-area-inset-bottom));
    background: var(--ink);
    color: var(--paper);
  }
  .booking__plate-h {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    color: var(--paper);
  }
  .booking .pill.pill--light {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 56px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: var(--paper);
    font-weight: 500;
    font-size: 1rem;
  }
  .booking .pill.pill--light::before { display: none; }
  .booking .pill.pill--light:active { transform: scale(0.98); background: #8F4728; }
  .booking__trust { color: rgba(244, 240, 234, 0.82); }
  /* Deze regel stond BUITEN het zwarte blok, op de crème achtergrond, in een
     crème kleur. Dus onleesbaar, en hij hield wel 19px ruimte bezet: het witte
     strookje dat [[Giu]] 29-8 meldde. Hij krijgt nu dezelfde zwarte
     achtergrond en sluit het blok af, zodat de tekst leesbaar is en de sectie
     strak eindigt. */
  .booking__note {
    color: rgba(244, 240, 234, 0.5);
    background: var(--ink);
    margin: 0 calc(-1 * 24px);
    padding: 0 24px calc(28px + env(safe-area-inset-bottom));
  }
  /* De onderruimte zit nu op de note, niet meer op het blok erboven. */
  .booking__cta { padding-bottom: 14px; }

  /* ======================================================================
     OOK MOGELIJK — onder elkaar; twee kolommen passen niet op 390px
     ====================================================================== */
  .extra__grid { grid-template-columns: 1fr; gap: 2rem; }
  .extra__lead { position: static; }
  .extra__lead p { max-width: none; }
  .xrij { grid-template-columns: auto 1fr; column-gap: 0.9rem; }
  .xband img { aspect-ratio: 3 / 2; }
  /* Onderruimte eraf: het formulier had zijn eigen sectiemarge (93px) bovenop
     de 52px van de sectie zelf. Samen 145px leeg onder de verstuurknop.
     Gemeld door [[Giu]] 29-8. */
  .aanvraag { display: block; padding-top: 2.6rem; padding-bottom: 0; }
  .aanvraag__kop p { max-width: none; }
  .aanvraag__form { grid-template-columns: 1fr; margin-top: 1.6rem; }
  /* Zorgt dat iOS niet inzoomt bij het aantikken van een veld. */
  .veld input, .veld select, .veld textarea { font-size: 16px; }
  .pill--vol { width: 100%; justify-content: center; min-height: 56px; }

  /* ======================================================================
     TEAM — full-bleed vertical INDEX: ghost numeral behind each name
     ====================================================================== */
  /* Het accordeon werkt op hover en heeft breedte nodig. Op de telefoon
     bestaat geen hover en is er geen breedte, dus daar blijft de index-rij
     staan die er al was: foto, naam, boekregel, spookcijfer erachter. */
  .team__stage { display: block; }
  .team__detail { display: none; }
  .barbers { display: block; gap: 0; }
  .barber {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    min-height: 96px;
    gap: 0;
    padding: 20px;
    border: 0;
    border-bottom: 1px solid rgba(26, 23, 18, 0.12);
    border-radius: 0;
    background: transparent;
    overflow: hidden;
  }
  .barber.is-open { flex-grow: 0; }
  .barber__meta {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
    display: flex;
    flex-direction: column;
  }
  /* Dezelfde gezichtscentrering als op desktop, want in 56px is een hele
     zaak met een klein hoofd erin niet te lezen. Ook hier een cirkel. */
  .barber.is-open .barber__photo { filter: grayscale(1) contrast(1.04); }
  .barber.is-open .barber__ph { box-shadow: none; }
  .barber.is-open { transform: none; }
  .barbers .barber:first-child { border-top: 1px solid rgba(26, 23, 18, 0.12); }
  .barber::before { display: none; }
  /* Op de telefoon staat de rij als index-regel; de pasfoto gaat links mee
     in plaats van te verdwijnen, zodat je ook hier een gezicht ziet. */
  .barber__ph {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 50%;
  }
  .barber__idx {
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 64px;
    line-height: 1;
    color: rgba(26, 23, 18, 0.13);
    z-index: 0;
  }
  .barber__meta {
    position: relative;
    z-index: 1;
    margin-top: 0;
    margin-left: 16px;
    gap: 0.2rem;
  }
  .barber__name { font-size: clamp(1.6rem, 7vw, 1.75rem); color: var(--ink); }
  .barber__role { font-size: 0.72rem; letter-spacing: 0.08em; }
  .barber__book { margin-top: 0.4rem; opacity: 1; transform: none; color: var(--accent); }
  .barber__book .arrow { color: var(--accent); }
  .barber:active { background: var(--paper-2); }

  /* ======================================================================
     REVIEWS — asymmetric baseline callout + peek-card snap rail
     ====================================================================== */
  .reviews__grid { display: block; }
  .reviews__foto img { aspect-ratio: 3 / 2; }
  /* Cijferregel staat nu als kop boven de reviews, niet meer als kaart. */
  .reviews__kop { margin-top: 18px; }
  .reviews__num { font-weight: 600; font-size: clamp(38px, 11vw, 48px); letter-spacing: -0.02em; }
  .reviews__cijfer .stars { font-size: 0.95rem; }
  .reviews__count { margin: 8px 0 14px; }

  .rv-rail { margin-top: 34px; }
  /* De reviewrail mag van rand tot rand lopen, zoals de rest van de mobiele opzet. */
  .rv-track {
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
  }
  .rv-bars { margin-top: 1.1rem; }

  .quotes {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x));
    padding: 4px var(--pad-x) 8px;
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote {
    flex: 0 0 84vw;
    max-width: 340px;
    min-height: 224px;
    scroll-snap-align: center;
    border-top: 0;
    padding: 28px 24px;
    background: var(--paper-2);
    border-radius: 4px;
  }
  .quote__text { font-style: italic; font-size: 1.25rem; line-height: 1.4; }

  /* ======================================================================
     CONTACT — bento tap-tiles + warm-duotone full-bleed map
     ====================================================================== */
  .contact__lines { display: none; }
  .contact__addr { font-size: clamp(1.6rem, 8vw, 2rem); }
  .contact__bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 0 2rem;
  }
  .cbento {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 12px;
    background: var(--paper-2);
    border-radius: 16px;
    color: var(--ink);
    transition: transform 0.14s ease-out, background 0.2s var(--ease);
  }
  .cbento:active { transform: scale(0.98); background: #E2DBCF; }
  /* Getekende iconen in plaats van de dingbat-tekens die er stonden, wens
     [[Giu]] 19-8. Emoji worden per toestel anders gerenderd, kunnen in kleur
     opduiken en staan zelden op dezelfde optische hoogte. Dezelfde tekenstijl
     als de pijlen in de reviewcarrousel: 24x24, currentColor, lijndikte 1,6. */
  .cbento__ico { width: 24px; height: 24px; display: block; }
  .cbento__lbl { font-size: 0.8rem; }

  /* live status progress (injected by JS) */
  .open-prog {
    margin-top: 0.9rem;
  }
  .open-prog__track {
    height: 3px;
    border-radius: 3px;
    background: #DED6C8;
    overflow: hidden;
  }
  .open-prog__fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s var(--ease);
  }
  .open-prog__txt {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-soft);
  }

  .contact__map {
    margin-inline: calc(-1 * var(--pad-x));
  }
  .contact__map iframe {
    height: 280px;
    border-radius: 0;
    border-left: 0; border-right: 0;
    filter: sepia(0.35) saturate(0.8) hue-rotate(-12deg) contrast(0.96) brightness(1.03);
  }
  .map__link { padding-inline: var(--pad-x); }
  .contact__info .pill,
  .contact .pill {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: var(--paper);
  }
  .contact .pill::before { display: none; }
  .contact .pill:active { transform: scale(0.98); background: #8F4728; }

  /* ======================================================================
     FOOTER — bottom-flush architectural wordmark + full-width tap bars
     ====================================================================== */
  .footer { padding: 40px 24px calc(28px + env(safe-area-inset-bottom)); }
  .footer__top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2rem;
  }
  .footer__top > div { order: 1; }
  .footer__top > .footer__brand {   /* wins the order tie — merkteken staat LAATST */
    order: 2;
    margin: 1.8rem 0 0;
  }
  .footer__brand img { height: var(--logo-h, 64px); }
  .footer li a { min-height: 46px; }
}

/* finer tier: very small / narrow phones */
@media (max-width: 430px) {
  .hero__title,
  .hero__inner--center .hero__title { font-size: clamp(2.2rem, 11vw, 2.9rem); }
  .about__lead .display { font-size: clamp(27px, 8vw, 34px); }
  .svcm__name { font-size: 21px; }
  .barber__name { font-size: 1.5rem; }
}

/* ---- Reduced motion ----------------------------------------------------- */
/* ==========================================================================
   SCROLL-PARALLAX OP DE TELEFOON
   [[Giu]] 29-8: de beelden die op desktop meedrijven tijdens het scrollen
   moeten dat op de telefoon ook doen.

   Niet via het bestaande JavaScript: dat staat op de telefoon bewust uit,
   omdat het herschilderen van de hero plus vijf mozaïekbeelden bij elke
   scrollframe stottert tegen de vloeiende touch-scroll. Die reden klopt nog.

   In plaats daarvan een scroll-gestuurde CSS-animatie, die op de compositor
   draait en dus buiten de hoofdthread om. Toestellen die het niet kennen
   krijgen simpelweg geen beweging en er gaat niets stuk.

   LET OP, dit kostte een ronde: `animation-timeline: view()` op de foto zelf
   werkt niet, want de foto zit in een kader met `overflow: hidden` en dat
   geldt als scrollcontainer. De tijdlijn hangt zich daaraan op en dat kader
   scrollt nooit, dus de voortgang bleef op 50% staan. Daarom draagt het KADER
   nu een benoemde tijdlijn en gebruikt de foto die.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
    /* De over-ons-foto doet NIET mee. Meedrijven vraagt dat het beeld groter
       is dan zijn kader, anders zie je randen, en juist die foto moest van
       [[Giu]] volledig in beeld blijven (29-8). Die twee eisen gaan niet
       samen, dus daar wint "niets afgesneden". */
    .mosaic figure,
    .reviews__foto,
    .xband {
      overflow: hidden;
      view-timeline-name: --beeldvak;
      view-timeline-axis: block;
    }
    .mosaic figure img,
    .reviews__foto img,
    .xband img {
      animation: drift-mee linear both;
      animation-timeline: --beeldvak;
      /* Korter bereik dan het volle entry-exit: zo zit de hele beweging in het
         stuk waar je het beeld echt ziet, in plaats van uitgesmeerd over de
         complete doorloop. Dat maakt hem zichtbaar sneller zonder dat de
         uitslag onrustig wordt. Wens [[Giu]] 29-8: "lijkt langzaam, je ziet
         het niet goed, komt te vroeg". */
      animation-range: entry 35% exit 65%;
      will-change: transform;
    }
  }
}
/* Kleine uitslag: op een klein scherm valt meer meteen op als wiebelen. */
@keyframes drift-mee {
  from { transform: scale(1.14) translateY(5.5%); }
  to   { transform: scale(1.14) translateY(-5.5%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__media img { animation: none; transform: scale(1.04); }
  .reveal-line > span { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .mosaic figure img, .reviews__foto img,
  .xband img { animation: none; transform: none; }
}