/* De Luxe Kapper — homepage styles (mobile-first) */

/* ---------- Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--s-2)); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  background: var(--c-ink);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
em { font-style: normal; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed; top: var(--s-1); left: var(--s-1); z-index: 100;
  padding: 12px var(--s-3); border-radius: var(--radius-sm);
  background: var(--c-gold); color: var(--c-ink); font-weight: 600;
  transform: translateY(-160%); transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.icon--chrome { color: var(--c-chrome); width: 24px; height: 24px; }

/* ---------- Typografie ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-gold); line-height: 1.2;
  margin-bottom: var(--s-3);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.h2, .cta-final__title {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 850;
  font-stretch: 125%;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Goudtextuur zoals het hero-woordmerk: grain over het goudverloop */
.gold-tex, .accent, .score__num {
  background-image: var(--tex-grain), var(--g-gold);
  background-size: 240px 240px, 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: transparent;
}

/* Accentwoord: zelfde display-letter als het logo, in goudtextuur */
.accent { font: inherit; }
.lead, .body-copy { max-width: 62ch; color: var(--c-text-muted); }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }

.section { padding-block: var(--s-12); position: relative; }
.section-head { margin-bottom: var(--s-6); }

/* ---------- Knoppen ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--c-text); --btn-bd: var(--c-line);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px var(--s-3);
  border-radius: var(--radius-pill);
  font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-bd);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--sm { min-height: 48px; padding-inline: var(--s-3); font-size: 1rem; }

/* Primair: goud met glans + "rode loper"-lijn bij hover/focus */
.btn--gold {
  --btn-bg: var(--c-gold); --btn-fg: var(--c-ink); --btn-bd: transparent;
  background-image: var(--g-gold); background-size: 200% 100%; background-position: 30% 0;
  overflow: hidden;
}
.btn--gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,250,235,.65) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.btn--gold::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px;
  background: var(--c-carpet); border-radius: 2px;
  transform: scaleX(0); transition: transform var(--dur) var(--ease-out);
}
.btn--gold:hover { transform: scale(1.02); box-shadow: var(--shadow-gold); }
.btn--gold:hover::before { transform: translateX(120%); }
.btn--gold:hover::after, .btn--gold:focus-visible::after { transform: scaleX(1); }

.btn--outline { --btn-bd: rgba(201,164,92,.7); --btn-fg: var(--c-text); }
.btn--outline:hover { --btn-bg: var(--c-gold); --btn-fg: var(--c-ink); --btn-bd: var(--c-gold); }

.btn--ghost { --btn-bg: rgba(255,255,255,.04); --btn-bd: rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.1); --btn-bd: var(--c-chrome); transform: scale(1.02); }

.btn--dark { --btn-bg: var(--c-paper-ink); --btn-fg: var(--c-paper); }
.btn--dark:hover { --btn-bg: #000; transform: scale(1.02); box-shadow: 0 8px 24px rgba(21,20,18,.18); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 600; color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}
.link-arrow .icon { color: var(--c-gold); transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: var(--c-gold-light); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow__handle { color: var(--c-text-muted); font-weight: 500; }
.link-arrow--sm { min-height: 44px; font-size: var(--fs-small); }

.stars { display: inline-flex; gap: 2px; color: var(--c-gold); }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.stars--lg svg { width: 20px; height: 20px; }

/* ---------- Header: topbar + nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: transform 400ms var(--ease-out);
}
.site-header.is-scrolled { transform: translateY(calc(var(--topbar-h) * -1)); }

.topbar { height: var(--topbar-h); background: var(--c-ink-2); border-bottom: 1px solid var(--c-line); font-size: .8125rem; }
.topbar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.topbar__phone { color: var(--c-text-muted); font-variant-numeric: tabular-nums; padding-block: 6px; transition: color var(--dur-fast); }
.topbar__phone:hover { color: var(--c-text); }

.status { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-dim); flex: none; }
.status.is-open .status__dot { background: var(--c-open); box-shadow: 0 0 0 3px rgba(76,195,138,.18); }
.status.is-open [data-status-text] { color: var(--c-text); }
.status--lg { font-size: 1rem; margin-bottom: var(--s-2); }

.nav { height: var(--nav-h); position: relative; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(11,11,12,.72);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.is-scrolled .nav::before, .menu-open .nav::before { opacity: 1; }
.nav__inner { height: 100%; display: flex; align-items: center; gap: var(--s-4); }

.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; padding-block: 8px; margin-right: auto; }
.wordmark__top { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 1.375rem; letter-spacing: -.01em; }
.wordmark__sub { font-size: .625rem; font-weight: 500; letter-spacing: .6em; color: var(--c-chrome); margin-top: 5px; padding-left: .12em; }

.nav__links { display: none; }
.nav__cta { display: none; }

.burger { width: 48px; height: 48px; margin-right: -12px; display: grid; place-items: center; border-radius: var(--radius-sm); }
.burger__lines { position: relative; width: 22px; height: 10px; }
.burger__lines span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--c-text); border-radius: 2px; transition: transform var(--dur) var(--ease-out); }
.burger__lines span:first-child { top: 0; }
.burger__lines span:last-child { bottom: 0; }
.menu-open .burger__lines span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .burger__lines span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--c-ink);
  padding-top: calc(var(--topbar-h) + var(--nav-h) + var(--s-4));
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  display: flex; overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__inner { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.menu__links a {
  display: block; padding-block: 10px;
  font-family: var(--f-display); font-weight: 850; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; letter-spacing: -.02em;
  transition: color var(--dur-fast);
}
.menu__links a:hover { color: var(--c-gold); }
.menu__actions { display: grid; gap: 12px; }
.menu__actions .btn { width: 100%; }

/* ---------- 6.1 Hero ---------- */
.hero { --mark-y: 36%; position: relative; height: 100vh; height: 100svh; min-height: 600px; background: var(--c-ink); overflow: hidden; }
.hero__stage { position: absolute; inset: 0; }

.hero__mask {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 0; transform-origin: 50% 50%;
  will-change: transform;
}
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 30%; }
@media (min-width: 768px) { .hero__media img { object-position: 70% 40%; } }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.7) 0%, rgba(11,11,12,.15) 30%, rgba(11,11,12,.35) 55%, rgba(11,11,12,.94) 100%);
}

.hero__mark {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--f-display); text-align: center;
}
.hero__word {
  position: absolute; left: 0; right: 0; bottom: calc(100% - var(--mark-y));
  display: flex; justify-content: center; align-items: flex-end;
  font-size: min(var(--fs-hero), 15vw); font-weight: 900; font-stretch: 125%;
  line-height: .8; letter-spacing: -.02em;
}
.hero__l {
  position: relative; display: inline-block;
  background-image: var(--tex-grain), var(--g-gold);
  background-size: 240px 240px, 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-top: .08em;
}
.hero__grp { display: inline-flex; align-items: flex-end; will-change: transform; }
.hero__space { width: .28em; }
.hero__kapper-in { display: inline-block; }
.crown {
  position: absolute; left: 50%; top: -.14em; width: .34em; height: .14em;
  transform: translateX(-50%);
  fill: none; stroke: var(--c-gold); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
  overflow: visible;
}
.crown use { vector-effect: non-scaling-stroke; }
.hero__kapper {
  position: absolute; left: 0; right: 0; top: calc(var(--mark-y) + 2.4vh);
  font-family: var(--f-body); font-weight: 500;
  font-size: clamp(.875rem, 1.9vw, 1.75rem); letter-spacing: .6em; padding-left: .6em;
  color: var(--c-chrome);
}

.hero__content {
  position: absolute; left: 0; right: 0; bottom: 0; margin-inline: auto;
  padding-bottom: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.hero__copy { max-width: 40rem; }
.hero__title {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.625rem, 3.2vw, 2.75rem); line-height: 1.02;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.hero .btn-row .btn { flex: 1 1 auto; }

.rating-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 48px; padding: 10px var(--s-2);
  border-radius: var(--radius-lg);
  background: rgba(20,20,22,.55);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), var(--shadow-card);
  font-size: var(--fs-small); color: var(--c-text);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.rating-chip strong { font-weight: 700; font-size: 1rem; }
.rating-chip:hover { transform: scale(1.02); box-shadow: var(--shadow-gold); }

/* Beginstaat animatie alleen als JS + motion actief is (anders direct eindtoestand) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero:not(.is-static) .hero__mask { opacity: 0; }
  .js .hero:not(.is-static) .hero__l,
  .js .hero:not(.is-static) .hero__kapper-in { opacity: 0; }
}
.hero.is-static .hero__mark { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__mark { display: none; }
}

/* ---------- 6.2 Trust ---------- */
.trust { background: var(--c-ink-2); position: relative; }
.trust__list { display: grid; grid-template-columns: 1fr 1fr; }
.trust__item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
}
.trust__item:nth-child(odd) { padding-left: 0; }
.trust__item:nth-child(even) { border-left: 1px solid var(--c-line); }
.trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }
.trust__item p { display: flex; flex-direction: column; line-height: 1.25; }
.trust__item strong { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 1.125rem; }
.trust__item span { color: var(--c-text-muted); font-size: var(--fs-small); }

.pole { height: 3px; overflow: hidden; position: relative; }
.pole::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 48px);
  background: repeating-linear-gradient(-45deg,
    var(--c-pole-red) 0 8px, #F4F1EA 8px 16px, var(--c-pole-blue) 16px 24px, #F4F1EA 24px 32px);
  background-size: 45.25px 100%;
  animation: pole 2.4s linear infinite;
}
@keyframes pole { to { transform: translateX(-45.25px); } }

/* ---------- 6.3 Prijzen (licht) ---------- */
.prices { background: var(--c-paper); color: var(--c-paper-ink); }
.prices .eyebrow { color: var(--c-gold-on-paper); }
.prices .lead { color: var(--c-paper-muted); margin-block: var(--s-3) var(--s-4); }
.prices :focus-visible { outline-color: var(--c-paper-ink); }
.prices__grid { display: grid; gap: var(--s-6); }
.prices__lists { display: grid; gap: var(--s-6); }
.price-group__title {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  font-size: var(--fs-h3); letter-spacing: -.01em;
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-paper-ink);
}
.price-row {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "dur price";
  align-items: center; column-gap: var(--s-2);
  padding: 14px var(--s-1); margin-inline: calc(var(--s-1) * -1);
  min-height: 64px;
  border-bottom: 1px solid var(--c-paper-line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.price-row__name { grid-area: name; font-weight: 500; }
.price-row__dur { grid-area: dur; font-size: var(--fs-small); color: var(--c-paper-muted); font-variant-numeric: tabular-nums; }
.price-row__lead { display: none; }
.price-row__dur--none { display: none; }
.price-row__price {
  grid-area: price; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: transform var(--dur) var(--ease-out);
}
.price-row__book {
  position: absolute; right: var(--s-1); top: 50%;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-small); font-weight: 600; color: var(--c-gold-on-paper);
  opacity: 0; transform: translate(-8px, -50%);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.price-row__book .icon { width: 16px; height: 16px; }
.price-row:hover, .price-row:focus-visible { background: rgba(21,20,18,.04); }
@media (hover: hover) {
  .price-row:hover .price-row__price, .price-row:focus-visible .price-row__price { transform: translateX(-76px); }
  .price-row:hover .price-row__book, .price-row:focus-visible .price-row__book { opacity: 1; transform: translate(0, -50%); }
}
.prices__note { font-size: var(--fs-small); color: var(--c-paper-muted); }

/* ---------- 6.4 Werk ---------- */
.filters { display: flex; gap: var(--s-1); overflow-x: auto; margin: 0 calc(var(--gutter) * -1) var(--s-4); padding: 4px var(--gutter); scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.pill {
  flex: none; min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill);
  font-size: 1rem; font-weight: 500; color: var(--c-text-muted);
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pill:hover { color: var(--c-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.pill[aria-pressed="true"] { background: var(--c-text); color: var(--c-ink); box-shadow: none; }

.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-flow: dense; margin-bottom: var(--s-4); }
.work__item { aspect-ratio: 4 / 5; }
.work__item[hidden] { display: none; }
.work__item--lg { grid-column: span 2; aspect-ratio: 1 / 1; }
.work__item--wide { grid-column: span 2; aspect-ratio: 8 / 5; }

.tile { position: relative; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--c-ink-2); isolation: isolate; }
.tile > picture, .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.tile__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--s-4) var(--s-2) 14px;
  background: linear-gradient(180deg, transparent, rgba(11,11,12,.85));
  font-size: var(--fs-small); font-weight: 500;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
@media (hover: hover) {
  .tile__label { opacity: 0; transform: translateY(8px); }
  .tile:hover .tile__label { opacity: 1; transform: none; }
  .tile:hover img { transform: scale(1.04); }
}


/* ---------- 6.5 De zaak ---------- */
.venue { padding-bottom: var(--s-8); }
.venue__grid { display: grid; gap: var(--s-6); align-items: center; }
.venue__media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card), 0 0 80px rgba(201,164,92,.08); }
.venue__media picture, .venue__media img { width: 100%; height: 100%; object-fit: cover; }
.venue__text .body-copy { margin-block: var(--s-3) var(--s-4); }
.features { display: grid; gap: 12px; }
.feature {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: 20px var(--s-3); border-radius: var(--radius);
  background: var(--c-ink-2); box-shadow: inset 0 0 0 1px var(--c-line);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.feature:hover { box-shadow: inset 0 0 0 1px rgba(201,164,92,.35); }
.feature__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.feature p { color: var(--c-text-muted); font-size: .9375rem; line-height: 1.5; }

.strip { margin-top: var(--s-8); }
.strip__track {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__item {
  flex: none; height: clamp(320px, 88vw, 420px); aspect-ratio: 4 / 5; scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden; background: var(--c-ink-2);
}
.strip__item--wide img { object-position: 62% 50%; }
.strip__item picture, .strip__item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 6.6 Team ---------- */
.team { background: var(--c-ink-2); }
.team__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.member > div { min-width: 0; }
.member {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2); border-radius: var(--radius);
  background: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.member__mono {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 1.125rem; letter-spacing: -.02em;
  color: var(--c-gold-light);
  background: radial-gradient(circle at 30% 25%, rgba(230,203,142,.18), rgba(201,164,92,.04) 70%);
  box-shadow: inset 0 0 0 1px rgba(201,164,92,.45);
}
.member:hover { box-shadow: inset 0 0 0 1px rgba(201,164,92,.5), var(--shadow-gold); }
.member__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.member__role { font-size: var(--fs-small); color: var(--c-text-muted); }

/* ---------- 6.7 Reviews ---------- */
.reviews__grid { display: grid; gap: var(--s-8); }
.score { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.score__num {
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(6rem, 18vw, 12rem); line-height: .8; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.score__meta { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; color: var(--c-text-muted); }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px var(--s-2); min-height: 44px; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(201,164,92,.4);
  font-size: var(--fs-small); font-weight: 600; color: var(--c-gold);
}
.badge .icon { width: 18px; height: 18px; }
.reviews__quotes { display: grid; gap: var(--s-6); align-content: start; }
.quote blockquote p {
  font-family: var(--f-accent); font-style: italic;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.15;
  text-wrap: balance;
}
.quote figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--c-text-muted); display: flex; align-items: center; gap: 12px; }
.quote figcaption::before { content: ""; width: 24px; height: 1px; background: var(--c-gold); }

/* ---------- 6.8 Bezoek ons ---------- */
.visit { background: var(--c-ink-2); }
.visit__grid { display: grid; gap: var(--s-6); }
.contact-list { display: grid; gap: var(--s-3); margin-block: var(--s-4); }
.contact-list__row { display: flex; gap: var(--s-2); }
.contact-list dt { padding-top: 2px; }
.contact-list dd { display: flex; flex-direction: column; align-items: flex-start; }
.contact-list__phone { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 1.375rem; font-variant-numeric: tabular-nums; min-height: 44px; display: inline-flex; align-items: center; margin-top: -8px; transition: color var(--dur-fast); }
.contact-list__phone:hover { color: var(--c-gold-light); }

.hours-block { padding: var(--s-3); border-radius: var(--radius-lg); background: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); }
.hours-block__title { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--s-2); }
.hours { width: 100%; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 10px 0; border-top: 1px solid var(--c-line); font-weight: 400; color: var(--c-text-muted); }
.hours th { text-align: left; position: relative; padding-left: 18px; }
.hours td { text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--c-text); font-weight: 600; }
.hours tr.is-today th::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c-gold); }

.map { position: relative; min-height: 360px; border-radius: var(--radius-lg); overflow: hidden; background: #111113; box-shadow: inset 0 0 0 1px var(--c-line); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.9) invert(.92) contrast(.9); }
.map__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-chrome); }
.map__pin {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -100%);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-gold); color: var(--c-ink); box-shadow: 0 0 0 10px rgba(201,164,92,.16), var(--shadow-card);
}
.map__pin .icon { width: 22px; height: 22px; stroke-width: 1.75; }
.map__card {
  position: absolute; left: var(--s-2); right: var(--s-2); bottom: var(--s-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  background: rgba(20,20,22,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.map__street { font-weight: 600; }
.map__hint { font-size: var(--fs-small); color: var(--c-text-muted); flex-basis: 100%; order: 2; }
.map__card .btn { order: 1; }

/* ---------- 6.9 Slot-CTA ---------- */
.cta-final {
  position: relative; overflow: hidden;
  padding-block: var(--s-16);
  text-align: center;
  background: var(--c-ink);
}
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--tex-grain), radial-gradient(60% 70% at 50% 110%, rgba(201,164,92,.28), transparent 70%);
  background-size: 240px 240px, 100% 100%;
  opacity: .22; pointer-events: none;
}
.cta-final__inner { position: relative; }
.cta-final__title { font-size: clamp(2.5rem, 8vw, 7rem); margin-bottom: var(--s-6); }
.cta-final__note { margin-top: var(--s-3); color: var(--c-text-muted); font-size: var(--fs-small); }

/* ---------- 6.10 Footer ---------- */
.footer { padding-block: var(--s-12) var(--s-4); border-top: 1px solid var(--c-line); }
.footer__mark { display: flex; flex-direction: column; line-height: .85; margin-bottom: var(--s-8); }
.footer__de { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(3.5rem, 13vw, 10rem); letter-spacing: -.02em; }
.footer__u { position: relative; display: inline-block; }
.footer__u .crown { top: -.1em; }
.footer__kapper { font-weight: 500; font-size: clamp(.875rem, 2.2vw, 1.75rem); letter-spacing: .6em; color: var(--c-chrome); margin-top: .5em; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); margin-bottom: var(--s-8); }
.footer__label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 12px; }
.footer__cols p, .footer__cols address { color: var(--c-text-muted); font-size: .9375rem; }
.footer__cols a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--dur-fast); }
.footer__cols a:hover { color: var(--c-text); }
.social { gap: 10px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-text-muted); }

/* ---------- Mobiele bottom bar ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-1);
  padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom));
  background: rgba(11,11,12,.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--c-line);
  transform: translateY(110%); visibility: hidden;
  transition: transform 400ms var(--ease-out), visibility 0s linear 400ms;
}
.mbar.is-visible { transform: none; visibility: visible; transition: transform 400ms var(--ease-out), visibility 0s; }
.mbar__btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill); font-weight: 600; font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.mbar__btn .icon { width: 18px; height: 18px; }
.mbar__btn--gold { background: var(--g-gold); color: var(--c-ink); box-shadow: none; }
body.has-mbar { padding-bottom: 72px; }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width: 600px) {
  .hero .btn-row .btn { flex: 0 0 auto; }
  .trust__list { grid-template-columns: repeat(4, 1fr); }
  .trust__item, .trust__item:nth-child(odd) { flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: var(--s-4) var(--s-2); }
  .trust__item:nth-child(-n+2) { border-bottom: 0; }
  .trust__item + .trust__item { border-left: 1px solid var(--c-line); }
  .trust__item p { align-items: center; }

  .price-row { grid-template-columns: auto 1fr auto 7.5rem; grid-template-areas: "name lead dur price"; }
  .price-row__lead { display: block; grid-area: lead; height: 1px; align-self: center; margin-top: 6px; background-image: radial-gradient(circle, rgba(21,20,18,.35) 1px, transparent 1.2px); background-size: 6px 2px; background-repeat: repeat-x; }
  .price-row__price { text-align: right; }
  .price-row__dur--none { display: block; }

  .work__grid { gap: var(--s-2); }
  .strip__item { height: clamp(360px, 52vw, 480px); }
  .strip__item--wide { aspect-ratio: 16 / 10; }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
  .team__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .section { padding-block: var(--s-16); }
  .hero { --mark-y: 44%; }
  .hero__content { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-bottom: var(--s-6); }
  .rating-chip { align-self: flex-end; flex-wrap: nowrap; }
  .map { min-height: 100%; }
  .map__hint { flex-basis: auto; order: 0; }
}

@media (min-width: 1024px) {
  .nav__links { display: flex; gap: var(--s-4); margin-right: var(--s-2); }
  .nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 48px; font-size: .9375rem; font-weight: 500; color: var(--c-text-muted); transition: color var(--dur-fast) var(--ease-out); }
  .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--c-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
  .nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--c-text); }
  .nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
  .nav__cta { display: inline-flex; }
  .burger, .menu { display: none !important; }
  .wordmark { margin-right: auto; }
  .mbar { display: none; }
  body.has-mbar { padding-bottom: 0; }

  .prices__grid { grid-template-columns: 5fr 7fr; gap: var(--s-12); align-items: start; }
  .prices__intro { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }

  .work__grid { grid-template-columns: repeat(4, 1fr); }
  .work__item--lg { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .work__item--wide { aspect-ratio: auto; }

  .venue__grid { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
  .features { gap: var(--s-2); }

  .strip__item, .strip__item--wide { height: clamp(420px, 40vw, 600px); }

  .team__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
  .member:hover { transform: translateY(-2px); }

  .reviews__grid { grid-template-columns: 5fr 7fr; gap: var(--s-12); align-items: center; }
  .visit__grid { grid-template-columns: 5fr 6fr; gap: var(--s-8); }
  .map { min-height: 560px; }
}

/* Strip met JS-scroll op desktop: native scroll uit, track wordt getransleerd */
.strip.is-driven { overflow: hidden; }
.strip.is-driven .strip__track { overflow: visible; scroll-snap-type: none; will-change: transform; }

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