/* ── MENACE BARBERSHOP — MAIN STYLESHEET ── */

/*
 * STYLESHEET MAP
 * 01 Tokens / base
 * 02 Navigation / mobile menu
 * 03 Buttons / shared UI
 * 04 Homepage sections
 * 05 Team / services / reviews
 * 06 Page templates: About / Portfolio / Contact
 * 07 Book Now scroll choreography support CSS — do not edit without browser regression test
 * 08 Accessibility / stability guards
 */

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

:root {
  --black:  #07110d;
  --paper:  #eee9df;
  --muted:  #a99f8e;
  --line:   #24362e;
  --gold:   #c8882a;
  --gold2:  #e1ae43;
  --green:  #12382b;
  --green2: #1f5a44;
  --max:    1200px;
  --fd:     'Bebas Neue', Impact, sans-serif;
  --fb:     'Space Grotesk', system-ui, sans-serif;
  --nav:    76px;

  /* Component tokens — use these for new/refactored sections instead of one-off values. */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-hard: 5px 5px 0 #000;
  --shadow-hard-lg: 8px 8px 0 #000;
  --focus-ring: 0 0 0 3px rgba(225,174,67,.45);
  --card-padding: clamp(18px, 2.5vw, 28px);
  --section-padding: clamp(52px, 8vw, 108px);
  --nav-height: var(--nav);
  --radius-card: var(--radius-lg);
  --radius-button: var(--radius-sm);
  --shadow-card: var(--shadow-hard-lg);
  --section-gap: var(--section-padding);
  --button-height: 44px;
  --image-ratio-portrait: 4 / 5;
  --image-ratio-work: 4 / 5;
  --transition-fast: 160ms ease;
  --transition-med: 260ms ease;
  --border-soft: 1px solid rgba(238,233,223,.12);
  --card-bg: rgba(16,27,21,.82);
  --panel-bg: rgba(7,17,13,.92);
  --button-shadow: 5px 5px 0 #000;}

html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;}

/* Grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;}

a { color: inherit; text-decoration: none }
img, svg { display: block; max-width: 100% }

.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;}

/* ── NAV ── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 3vw, 42px);
  background: rgba(7,17,13,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(238,233,223,.11);}
.nav.is-scrolled { border-bottom-color: rgba(238,233,223,.18); }

.brand {
  display: flex;
  align-items: center;
  width: clamp(176px, 17vw, 248px);
  min-width: 156px;
  height: calc(var(--nav) - 18px);
  line-height: 0;}
.brand img,
.brand .nav-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6));}

.nav-links {
  display: flex;
  gap: clamp(18px, 2.5vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;}
.nav-links a {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b8af9f;
  font-weight: 500;
  transition: color .16s;}
.nav-links a:hover { color: var(--paper) }/* ── HERO ── */
.hero {
  min-height: 92svh;
  padding-top: var(--nav);
  position: relative;
  overflow: clip; /* clip knipt visueel maar vormt geen scroll-container; sticky-kinderen werken */
  background-color: var(--black);
  background-size: cover;
  background-position: center calc(50% + var(--hero-parallax-y, 0px));
  background-repeat: no-repeat;}

.hero::before {
  content: "";
  position: absolute;
  inset: var(--nav) 0 0;
  background:
    radial-gradient(circle at 76% 36%, rgba(200,145,45,.12), transparent 24%),
    linear-gradient(90deg, #07110d 0 34%, rgba(7,17,13,.88) 52%, rgba(7,17,13,.42) 100%);
  z-index: 1;
  pointer-events: none;}

.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, #07110d 86%);
  z-index: 3;
  pointer-events: none;}

.hero-inner {
  position: relative;
  z-index: 5;
  min-height: calc(92svh - var(--nav));
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  padding-block: 88px 54px;}

/* Hero copy layout: volledige grid-cel zodat Book Now choreography stabiel kan meten. */
.hero-copy {
  max-width: 760px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: visible;}

.eyebrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--gold2);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 22px;}
.eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--gold);}

.hero h1 {
  font-family: var(--fd);
  font-size: clamp(72px, 13vw, 152px);
  line-height: .82;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: var(--paper);
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 7px 9px 0 #000;}
.hero h1 small {
  display: block;
  font-size: .26em;
  letter-spacing: .36em;
  color: var(--gold);
  text-shadow: none;
  margin-top: 14px;}

.subline {
  margin: 28px 0 0;
  max-width: 600px;
  font-size: clamp(17px, 1.5vw, 22px);
  color: #e9e2d3;
  font-weight: 400;
  line-height: 1.55;}

.actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px 9px;
  font-family: var(--fd);
  font-size: 23px;
  letter-spacing: .08em;
  border: 1px solid #000;
  box-shadow: 5px 5px 0 #000;
  transition: .16s;
  text-transform: uppercase;
  cursor: pointer;}
.btn.primary { background: var(--green); color: var(--paper) }
.btn.secondary { background: var(--paper); color: #060606 }
.btn.ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(238,233,223,.22);
  box-shadow: none;}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 #000 }
.btn.ghost:hover { background: rgba(238,233,223,.08); box-shadow: none }

.social-mini {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  color: #cfc6b6;}
.social-mini a {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(200,145,45,.55);
  padding-bottom: 3px;
  transition: color .16s, border-color .16s;}
.social-mini a:hover { color: var(--gold2); border-color: var(--gold) }

/* ── TEKSTBAND ── */
.band {
  position: relative;
  background: #0b0b0a;
  border-block: 1px solid var(--line);
  overflow: hidden;
  z-index: 6;}
.band-track {
  display: flex;
  width: max-content;
  animation: roll 22s linear infinite;}
.band span {
  font-family: var(--fd);
  font-size: clamp(31px, 4vw, 52px);
  letter-spacing: .09em;
  color: #efe9db;
  padding: 12px 18px 7px;
  white-space: nowrap;
  opacity: .88;}
.band b { color: var(--gold); font-weight: 400 }
@keyframes roll { to { transform: translateX(-50%) } }

/* ── SECTIONS ── */
section.content {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: 88px 0;}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;}

.sec-kicker {
  font-size: 12px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;}

.sec-title {
  font-family: var(--fd);
  font-size: clamp(54px, 7vw, 96px);
  line-height: .84;
  letter-spacing: .03em;
  margin: .16em 0 0;
  color: var(--paper);}

.note {
  max-width: 480px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;}

/* ── QUICK GRID ── */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;}

.quick-card {
  background:
    radial-gradient(circle at 82% 22%, rgba(200,145,45,.12), transparent 30%),
    linear-gradient(135deg, rgba(31,78,59,.22), rgba(14,27,21,.96) 48%, rgba(8,17,13,.98));
  border: 1px solid rgba(200,145,45,.22);
  padding: 24px 24px 22px;
  min-height: 142px;
  position: relative;
  overflow: hidden;
  transition: .16s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;}
.quick-card:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 #000;
  border-color: var(--green2);}
.quick-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(200,145,45,.33);
  transform: rotate(12deg);
  z-index: -1;}
.quick-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.035);
  pointer-events: none;}
.quick-icon {
  position: absolute;
  right: 20px;
  top: 18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--gold2);
  opacity: .9;}
.quick-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(200,145,45,.16));}
.quick-card b {
  display: block;
  max-width: calc(100% - 62px);
  font-family: var(--fd);
  font-size: 34px;
  letter-spacing: .04em;
  line-height: .9;
  color: var(--paper);}
.quick-card span {
  display: block;
  margin-top: 28px;
  max-width: calc(100% - 38px);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;}

/* ── TEAM CARDS ── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;}

.card {
  background: #0e1b15;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4) }

.portrait {
  height: clamp(340px, 34vw, 460px);
  min-height: 340px;
  background:
    radial-gradient(circle at 50% 18%, rgba(200,145,45,.18), transparent 28%),
    linear-gradient(150deg, #13271e, #090f0c);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;}

.portrait-placeholder {
  width: 74%;
  height: 74%;
  opacity: .18;}

.card-info { padding: 22px }
.card-info h3 {
  font-family: var(--fd);
  font-size: 44px;
  line-height: .85;
  margin: 0;
  color: var(--paper);}
.card-info .role {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 8px 0 0;
  font-weight: 600;}
.card-info p {
  color: #aaa193;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;}

.team-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;}
.team-actions .btn {
  min-height: 42px;
  font-size: 18px;
  padding: 10px 14px 7px;
  box-shadow: 4px 4px 0 #000;}
.team-actions .btn.ghost { box-shadow: none }

/* ── HUB PANEL ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;}

.hub-panel {
  background: #0e1b15;
  border: 1px solid var(--line);
  padding: 30px;}

.hub-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;}

.hub-links a {
  border: 1px solid rgba(238,233,223,.14);
  padding: 16px;
  background: #07110d;
  font-family: var(--fd);
  font-size: 24px;
  line-height: .9;
  letter-spacing: .04em;
  transition: .16s;
  display: block;
  color: var(--paper);}
.hub-links a:hover {
  background: var(--green);
  box-shadow: 4px 4px 0 #000;
  color: var(--paper);}

.panel {
  background: #0e1b15;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;}
.panel.pad { padding: 32px }

.paper-panel {
  background: #ece6d8;
  color: #0b0a09;
  border: 1px solid #000;
  box-shadow: 8px 8px 0 #000;}
.paper-panel p { color: #2c2924; font-weight: 500 }

.quote {
  font-family: var(--fd);
  font-size: clamp(42px, 5vw, 68px);
  line-height: .9;
  margin: 0 0 20px;
  letter-spacing: .02em;
  color: #0b0a09;}
.quote .gold { color: #a7721d }

.small-label {
  display: inline-block;
  font-family: var(--fd);
  font-size: 23px;
  letter-spacing: .05em;
  background: var(--green);
  color: var(--paper);
  padding: 7px 12px 4px;
  margin-bottom: 18px;
  box-shadow: 4px 4px 0 #000;}

/* ── MINI MENU ── */
.mini-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;}

.mini-menu a {
  padding: 14px;
  border: 1px solid rgba(238,233,223,.12);
  color: #b8af9f;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .16em;
  text-align: center;
  transition: .14s;
  display: block;}
.mini-menu a:hover {
  background: var(--green);
  color: var(--paper);
  border-color: var(--green2);}

/* ── FINAL CTA ── */
.final-cta {
  background: var(--green);
  color: var(--paper);
  border: 1px solid #000;
  box-shadow: 8px 8px 0 #000;}
.final-cta h2 {
  font-family: var(--fd);
  font-size: clamp(54px, 6vw, 84px);
  line-height: .86;
  margin: 0 0 16px;
  color: var(--paper);
  text-shadow: 4px 4px 0 rgba(0,0,0,.4);}
.final-cta p {
  font-weight: 600;
  color: #d8ece4;
  max-width: 520px;}

/* ── FOOTER ── */
.footer {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 24px clamp(18px, 3vw, 42px);
  border-top: 1px solid var(--line);
  background: #050a08;
  color: #7d7464;
  font-size: 12px;}
.footer-brand { display: inline-flex; align-items: center; justify-content: flex-start; width: clamp(156px, 16vw, 220px); min-width: 132px; line-height: 0; }
.footer-brand img,
.footer-brand .footer-brand-logo { display: block; width: 100%; height: auto; max-height: 46px; object-fit: contain; object-position: left center; opacity: .82; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.footer-info {
  display: grid;
  gap: 7px;}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  color: #7d7464;
  line-height: 1.5;}
.footer-meta a,
.footer-meta span {
  color: #7d7464;}
.footer-meta a:hover { color: var(--paper); }
.footer-hours { display: inline-flex; flex-wrap: wrap; gap: 0 10px; }
.footer-hours span + span::before { content: "·"; margin-right: 10px; color: #4f473b; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px 20px;}
.footer-links a,
.footer-menu-list a {
  color: #7d7464;
  letter-spacing: .1em;
  font-size: 11px;
  text-transform: uppercase;
  transition: color .14s;}
.footer-links a:hover,
.footer-menu-list a:hover { color: var(--paper) }/* ── INNER PAGES ── */
.page-hero {
  padding-top: calc(var(--nav) + 60px);
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);}

/* Services page */
.service-list {
  background: #ece6d8;
  color: #0b0a09;
  border: 1px solid #000;
  box-shadow: 8px 8px 0 #000;}
.service {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #000;}
.service:last-child { border-bottom: 0 }
.service h3 {
  font-family: var(--fd);
  font-size: 36px;
  line-height: .9;
  margin: 0;
  letter-spacing: .03em;}
.service p {
  margin: 6px 0 0;
  color: #484238;
  font-size: 14px;
  font-weight: 600;}
.price {
  font-family: var(--fd);
  font-size: 54px;
  line-height: .8;
  color: var(--green);}

/* Reviews */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;}
.review {
  background: #0e1b15;
  border: 1px solid var(--line);
  padding: 22px;
  color: #c9c1b3;}
.review-name {
  font-family: var(--fd);
  font-size: 26px;
  color: var(--gold);
  font-weight: 400;
  margin: 0 0 6px;}
.review-stars {
  color: var(--gold2);
  font-size: 13px;
  letter-spacing: .1em;
  margin-bottom: 12px;}
.review p { font-size: 14px; color: #aaa193; margin: 0 }

/* Portfolio */
.work-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-auto-rows: 220px;
  gap: 16px;}
.work {
  background: #0e1b15;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;}
.work.big { grid-row: span 2 }
.work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;}
.work:hover img { transform: scale(1.04) }
.work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.65));
  pointer-events: none;}
.work-label {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  font-family: var(--fd);
  font-size: 22px;
  background: #ece6d8;
  color: #090908;
  padding: 5px 11px 2px;
  box-shadow: 4px 4px 0 #000;}

/* ── SCROLL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;}
.reveal.visible {
  opacity: 1;
  transform: none;}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .cards { grid-template-columns: 1fr 1fr }
  .reviews { grid-template-columns: 1fr 1fr }
}

@media (max-width: 960px) {
  .quick-grid { grid-template-columns: 1fr 1fr }
  .hub-links { grid-template-columns: 1fr 1fr }
  .mini-menu { grid-template-columns: 1fr 1fr }
  .contact { grid-template-columns: 1fr }
  .grid-2 { grid-template-columns: 1fr }
  .nav-links { display: none }body { padding-bottom: 80px }
  .hero { background-position: 64% center !important }
  .hero::before {
    background: linear-gradient(180deg, rgba(7,17,13,.20) 0%, rgba(7,17,13,.42) 42%, rgba(7,17,13,.90) 100%) !important;
  }
  .hero-inner { align-items: end !important }
  .hero-copy {
    background: rgba(7,17,13,.72);
    padding: 22px 18px 20px;
  }
}

@media (max-width: 768px) {
  .cards { grid-template-columns: 1fr }
  .reviews { grid-template-columns: 1fr }
  .work-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px }
  .work.big { grid-row: span 1 }
}

@media (max-width: 560px) {
  .quick-grid { grid-template-columns: 1fr }
  .hub-links { grid-template-columns: 1fr }
  .mini-menu { grid-template-columns: 1fr 1fr }
  .hero { min-height: 86svh; background-position: 67% center !important }
  .hero-inner { padding-block: 54px 36px }
  .actions .btn { width: 100% }
  .social-mini { gap: 14px }
  .hub-panel { padding: 22px }
  .nav { padding-right: 18px }.footer { flex-direction: column; text-align: center }
  .work-grid { grid-template-columns: 1fr }
}


/* ── WP NAV MENU INTEGRATIE ── */
/* WP voegt klassen toe aan <li> elementen — deze zorgen dat de stijl intact blijft */
.nav-links li            { list-style: none }
.nav-links li a          { /* erft van .nav-links a */ }

/* Actieve pagina-link markering */
.nav-links .current-menu-item > a,
.nav-links .current-page-ancestor > a,
.nav-links .current-menu-ancestor > a {
  color: var(--gold);}

/* ── PREFERS-REDUCED-MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .band-track {
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── SR-ONLY (visually hidden, still readable by screen readers/crawlers) ──
   !important op de kritieke eigenschappen is bewust (zelfde patroon als
   WordPress core .screen-reader-text): voorkomt dat een specifiekere
   regel elders (bv. ".hero h1") deze utility per ongeluk zichtbaar maakt. */
.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  white-space: nowrap !important;
}

/* ── SKIP TO CONTENT (WCAG 2.2 AA) ── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 20px;
  z-index: 9999;
  background: var(--green);
  color: var(--paper);
  font-family: var(--fd);
  font-size: 18px;
  letter-spacing: .06em;
  padding: 10px 18px 7px;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 #000;
  transition: top .1s;}
.skip-to-content:focus {
  top: 10px;
  outline: 2px solid var(--gold);
  outline-offset: 2px;}

/* ── PAGE LAYOUT HELPERS (vervangt inline styles) ── */
.page-padded { padding-top: var(--nav) }

/* Single team hero — vervangt inline style="display:grid..." */
.single-team-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;}
.single-team-role {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 8px 0 0;}
.single-team-actions { margin-top: 28px }
.single-team-portrait { height: 400px }
.single-team-bio { max-width: 680px }

/* Footer logo / tagline */
.footer-logo-text {
  font-family: var(--fd);
  font-size: 22px;
  letter-spacing: .1em;
  color: #7d7464;}
.footer-tagline { color: #a99f8c; font-weight: 800; letter-spacing: .04em; }

/* Nav logo fallback */
.nav-logo-text {
  font-family: var(--fd);
  font-size: 28px;
  letter-spacing: .1em;
  color: var(--paper);}

/* Review platform label */
.review-platform {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;}

/* ── RESPONSIVE: single-team-hero ── */
@media (max-width: 768px) {
  .single-team-hero {
    grid-template-columns: 1fr;
  }
  .single-team-portrait {
    height: 300px;
    order: -1; /* foto boven op mobiel */
  }
}

/* ── DIENSTEN TITLE (vervangt inline style op h2 in archive-diensten) ── */
.dienst-title {
  font-family: var(--fd);
  font-size: 36px;
  line-height: .9;
  margin: 0;
  letter-spacing: .03em;}

/* ── Horizontale barber/team carousel ── */
#team .cards {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 2px 22px;
  margin-inline: -2px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;}
#team .team-card {
  flex: 0 0 clamp(280px, 31vw, 380px);
  min-width: 0;
  scroll-snap-align: start;}
#team .cards::after {
  content: "";
  flex: 0 0 1px;}
@media (max-width: 768px) {
  #team .cards {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;
  }
  #team .team-card { flex-basis: min(84vw, 340px); }
}

/* ── Mobiel menu zichtbaar + toegankelijk ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;}
.nav-toggle {
  display: none;
  width: 46px;
  height: 44px;
  border: 1px solid rgba(238,233,223,.18);
  background: rgba(14,27,21,.92);
  color: var(--paper);
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;}
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: var(--nav);
    left: 16px;
    right: 16px;
    display: grid;
    gap: 0;
    padding: 10px;
    background: rgba(7,17,13,.98);
    border: 1px solid rgba(238,233,223,.14);
    box-shadow: 8px 8px 0 #000, 0 24px 60px rgba(0,0,0,.45);
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .nav.is-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .nav-links li { border-bottom: 1px solid rgba(238,233,223,.08); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a {
    display: block;
    padding: 16px 12px 14px;
    font-size: 13px;
    color: var(--paper);
  }
}
@media (max-width: 560px) {.brand { width: 152px; min-width: 132px; }
}

/* ── Gelijke knophoogte in horizontale team/barber cards ── */
#team .team-card {
  display: flex;
  flex-direction: column;}
#team .team-card .card-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;}
#team .team-card .team-actions {
  margin-top: auto;
  padding-top: 18px;}
#team .team-card .card-info > p {
  margin-bottom: 0;}


/* ── Meer en consistente ruimte voor barberfoto's ── */
#team .team-card {
  flex-basis: clamp(340px, 32vw, 440px);}
#team .team-card .portrait {
  height: clamp(360px, 34vw, 500px);
  min-height: 360px;
  aspect-ratio: 4 / 5;}
#team .team-card .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;}
@media (max-width: 768px) {
  #team .team-card { flex-basis: min(88vw, 390px); }
  #team .team-card .portrait {
    height: clamp(360px, 112vw, 470px);
    min-height: 360px;
  }
}


/* ── AUTO-SCROLL POLISH: barber/team strip ── */
#team .cards {
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  cursor: grab;}
#team .cards:active { cursor: grabbing; }
#team .cards:hover .team-card,
#team .cards:focus-within .team-card {
  animation-play-state: paused;}
#team .cards::-webkit-scrollbar { height: 8px; }
#team .cards::-webkit-scrollbar-track { background: rgba(238,233,223,.06); }
#team .cards::-webkit-scrollbar-thumb {
  background: rgba(200,136,42,.42);
  border-radius: 999px;}
@media (max-width: 768px) {
  #team .cards {
    scrollbar-width: none;
  }
  #team .cards::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #team .cards { scroll-behavior: auto; }
}


/* Team carousel sizing */
#team .cards.is-user-paused {
  scroll-snap-type: x mandatory;}
#team .team-card .portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 0;
  display: block;
  overflow: hidden;}
#team .team-card .portrait img,
#team .team-card .portrait picture,
#team .team-card .portrait svg {
  display: block;
  width: 100%;
  height: 100%;}
#team .team-card .portrait img {
  object-fit: cover;
  object-position: center top;
  max-width: none;}
@media (max-width: 768px) {
  #team .team-card .portrait {
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 960px) {
  :root { --nav: 64px; }
  .nav {
    height: var(--nav);
    padding-inline: 14px;
  }
  .brand { width: 150px; min-width: 126px; }
  .nav-toggle {
    width: 42px;
    height: 38px;
    box-shadow: 3px 3px 0 #000;
  }
}

@media (max-width: 560px) {
  :root { --nav: 64px; }
  .nav {
    padding-inline: 10px;
    border-bottom-width: 1px;
  }
  .brand { width: 122px; min-width: 112px; }
  .nav-toggle {
    width: 38px;
    height: 34px;
    gap: 4px;
  }
  .nav-toggle span { width: 20px; }
  .nav-links {
    left: 10px;
    right: 10px;
    padding: 6px;
    box-shadow: 5px 5px 0 #000, 0 18px 42px rgba(0,0,0,.44);
  }
  .nav-links a { padding: 12px 10px 10px; }
  .hero-copy { padding: 18px 14px 16px; }
}

@media (max-width: 760px) {
  body { padding-bottom: 0; }
}

/* ── HERO BOOK NOW — JS choreography base ── */

/* De originele knop in de hero: in de normale flow, niet sticky.
   Relative is bewust nodig zodat z-index werkt zonder de scroll-choreografie te verstoren. */
.menace-hero-book-now {
  position: relative !important;
  transform: none !important;
  z-index: 7;
  will-change: auto;}

/* hero-copy en actions: geen sticky, gewoon normaal */
.hero-copy .actions {
  position: static !important;
  overflow: visible !important;}

/* hero-copy: flex:1 zodat hij de volledige hero-hoogte vult
   (nodig voor de juiste layout, niet voor sticky) */
.hero-copy {
  flex: 1 !important;
  overflow: visible !important;}

.hero-inner {
  overflow: visible !important;}

/* ── BOOK NOW scroll choreography ─────────────────────────────
   Eén JS-clone regelt de fases:
   1. origineel in hero-flow
   2. fixed onder de navigatie zodra de knop de nav raakt
   3. docked naast logo zodra de hero volledig voorbij is
*/
.menace-hero-book-now.is-ghosted {
  opacity: 0 !important;
  pointer-events: none !important;}

.menace-book-choreo {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 120;
  margin: 0 !important;
  will-change: transform, width, height, opacity;
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    width .34s cubic-bezier(.22, 1, .36, 1),
    height .34s cubic-bezier(.22, 1, .36, 1),
    padding .34s cubic-bezier(.22, 1, .36, 1),
    font-size .34s cubic-bezier(.22, 1, .36, 1),
    box-shadow .18s ease,
    opacity .16s ease;}

.menace-book-choreo.is-hidden {
  opacity: 0;
  pointer-events: none;}

.menace-book-choreo.is-pinned {
  pointer-events: auto;}

.menace-book-choreo.is-docked {
  min-height: 42px;
  padding: 11px 18px 8px;
  font-size: clamp(17px, 1.15vw, 20px) !important;
  box-shadow: 4px 4px 0 #000;
  pointer-events: auto;}

.nav.has-book-docked .brand {
  padding-right: clamp(122px, 13vw, 168px);}

@media (max-width: 760px) {
  .menace-book-choreo.is-docked {
    min-height: 38px;
    padding: 9px 12px 7px;
    font-size: 16px !important;
    letter-spacing: .06em !important;
  }

  .nav.has-book-docked .brand {
    padding-right: 112px;
  }
}


/* Mobile nav hit area */
.nav-toggle {
  position: relative;
  min-width: 48px;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;}
.nav-toggle::before {
  content: "";
  position: absolute;
  inset: -8px;}
@media (max-width: 560px) {
  .nav-toggle {
    width: 44px;
    height: 42px;
    min-width: 44px;
    min-height: 42px;
  }
  .nav-toggle::before { inset: -10px; }
  .nav-links a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }
}

/* Barber social links */
.team-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;}
.team-socials a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 10px 7px;
  color: var(--muted);
  border: 1px solid rgba(238,233,223,.16);
  background: rgba(238,233,223,.04);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;}
.team-socials a:hover,
.team-socials a:focus-visible {
  color: var(--gold);
  border-color: rgba(200,136,42,.5);}
.single-team-socials { margin-top: 16px; }


/* Navbar image logo */
.nav .brand .nav-brand-logo {
  pointer-events: none;}
@media (max-width: 720px) {
  .brand {
    width: clamp(142px, 43vw, 184px) !important;
    min-width: 132px !important;
    height: calc(var(--nav) - 16px);
  }
  .brand img,
  .brand .nav-brand-logo {
    max-height: 46px;
  }
}
@media (max-width: 380px) {
  .brand {
    width: 132px !important;
    min-width: 124px !important;
  }
  .brand img,
  .brand .nav-brand-logo {
    max-height: 40px;
  }
}


/* Navbar logo sizing + finite team row */
.nav .brand {
  width: auto !important;
  min-width: 0 !important;
  max-width: min(252px, 34vw);
  height: var(--nav);
  flex: 0 0 auto;}
.nav .brand img,
.nav .brand .nav-brand-logo {
  width: auto !important;
  height: clamp(38px, 5.2vw, 50px) !important;
  max-height: calc(var(--nav) - 22px) !important;
  object-fit: contain;
  object-position: left center;}
#team .cards {
  scroll-snap-type: x mandatory;}
@media (max-width: 720px) {
  .nav .brand {
    max-width: min(188px, 42vw);
  }
  .nav .brand img,
  .nav .brand .nav-brand-logo {
    height: clamp(32px, 9vw, 40px) !important;
    max-height: calc(var(--nav) - 16px) !important;
  }
}
@media (max-width: 380px) {
  .nav .brand img,
  .nav .brand .nav-brand-logo {
    height: 34px !important;
  }
}


/* Mobile navbar sizing after scroll */
@media (max-width: 560px) {
  .nav {
    min-height: 64px;
    padding-inline: 12px;
  }
  .nav .brand {
    max-width: min(198px, 48vw);
    height: 64px;
  }
  .nav .brand img,
  .nav .brand .nav-brand-logo {
    height: clamp(38px, 10vw, 46px) !important;
    max-height: 48px !important;
  }
  .nav-toggle {
    width: 42px;
    height: 38px;
  }
}
@media (max-width: 380px) {
  .nav .brand {
    max-width: min(178px, 46vw);
  }
  .nav .brand img,
  .nav .brand .nav-brand-logo {
    height: clamp(36px, 10vw, 42px) !important;
    max-height: 44px !important;
  }
}

/* ── HORIZONTAL SCROLLER AFFORDANCE ── */
.menace-hscroll {
  position: relative;
  padding-inline: clamp(18px, 4vw, 42px);
  padding-bottom: 26px;}
.menace-hscroll-viewport {
  position: relative;}
.menace-hscroll-viewport::before,
.menace-hscroll-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(96px, 16vw);
  z-index: 3;
  pointer-events: none;
  transition: opacity .18s ease;}
.menace-hscroll-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--black) 0%, rgba(7,17,13,.88) 28%, rgba(7,17,13,0) 100%);
  opacity: 0;}
.menace-hscroll-viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--black) 0%, rgba(7,17,13,.88) 28%, rgba(7,17,13,0) 100%);}
.menace-hscroll.is-at-start .menace-hscroll-viewport::before { opacity: 0; }
.menace-hscroll:not(.is-at-start) .menace-hscroll-viewport::before { opacity: 1; }
.menace-hscroll.is-at-end .menace-hscroll-viewport::after { opacity: 0; }
.menace-hscroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 13px));
  z-index: 4;
  width: clamp(42px, 4vw, 52px);
  height: clamp(42px, 4vw, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(238,233,223,.14);
  background: rgba(7,17,13,.92);
  color: var(--paper);
  box-shadow: 6px 6px 0 #000;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;}
.menace-hscroll-btn:hover {
  transform: translateY(calc(-50% - 13px)) translate(-2px, -2px);
  border-color: rgba(200,136,42,.5);}
.menace-hscroll-btn:disabled {
  opacity: .45;
  cursor: default;}
.menace-hscroll-btn--prev { left: 0; }
.menace-hscroll-btn--next { right: 0; }
.menace-hscroll-btn span {
  font-size: 22px;
  line-height: 1;}
.menace-hscroll-indicator {
  position: relative;
  margin-top: 14px;
  height: 4px;
  width: min(240px, 38vw);
  border-radius: 999px;
  background: rgba(238,233,223,.10);
  overflow: hidden;}
.menace-hscroll-indicator span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 64px;
  border-radius: inherit;
  background: rgba(200,136,42,.7);
  transition: transform .12s linear, width .18s ease;}
.menace-hscroll .cards,
.menace-hscroll .about-team-strip {
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;}
@media (max-width: 768px) {
  .menace-hscroll {
    padding-inline: 0;
    padding-bottom: 22px;
  }
  .menace-hscroll-btn {
    width: 40px;
    height: 40px;
    transform: translateY(calc(-50% - 11px));
  }
  .menace-hscroll-btn:hover {
    transform: translateY(calc(-50% - 11px));
  }
  .menace-hscroll-btn--prev { left: 8px; }
  .menace-hscroll-btn--next { right: 8px; }
  /* Laat de fade aan de viewport vastzitten, niet aan de verschuivende track.
     Daardoor blijft de rand op mobiel exact gelijk met de carousel en ontstaat
     er geen harde verticale naad tijdens de load-nudge of automatische scroll. */
  .menace-hscroll-viewport {
    overflow: hidden;
    margin-inline: -20px;
  }
  .menace-hscroll-viewport::before,
  .menace-hscroll-viewport::after {
    display: block;
    width: 64px;
  }
  .menace-hscroll-viewport::before {
    left: 0;
    background: linear-gradient(90deg, var(--black) 0%, rgba(7,17,13,.92) 34%, rgba(7,17,13,0) 100%);
  }
  .menace-hscroll-viewport::after {
    right: 0;
    background: linear-gradient(270deg, var(--black) 0%, rgba(7,17,13,.92) 34%, rgba(7,17,13,0) 100%);
  }
  .menace-hscroll .cards,
  .menace-hscroll .about-team-strip {
    -webkit-mask-image: none;
    mask-image: none;
  }
  #team .menace-hscroll-viewport .cards {
    width: 100%;
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
  .menace-hscroll-indicator {
    width: min(160px, 46vw);
    margin-inline: 20px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menace-hscroll .cards,
  .menace-hscroll .about-team-strip {
    scroll-behavior: auto;
  }
}

@media (max-width: 760px) {
  .footer {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .footer-links { justify-content: flex-start; }
}

/* ── HOMEPAGE HERO: EDITORIAL CTA CLUSTER ── */
.hero--booking-only::before {
  background:
    radial-gradient(ellipse 520px 340px at 13% 62%,
      rgba(3,13,9,.78) 0%,
      rgba(3,13,9,.54) 34%,
      rgba(3,13,9,.22) 58%,
      transparent 76%),
    linear-gradient(180deg,
      rgba(7,17,13,.01) 0%,
      rgba(7,17,13,.03) 66%,
      rgba(7,17,13,.32) 100%);
}

.hero--booking-only .hero-inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0 clamp(54px, 5.8vw, 92px);
  align-items: stretch;
}

.hero--booking-only .hero-copy {
  position: relative;
  width: fit-content;
  min-width: min(100%, 320px);
  max-width: 360px;
  min-height: calc(92svh - var(--nav));
  padding: 0;
  background: transparent;
  justify-content: center;
  transform: translateY(13%);
}

.hero--booking-only .hero-kicker {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 18px;
  color: var(--gold2);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero--booking-only .hero-kicker::after {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--gold);
  opacity: .9;
}

.hero--booking-only .actions {
  position: relative !important;
  z-index: 2;
  margin: 0;
  padding: 0;
  align-items: center;
}

.hero--booking-only .menace-hero-book-now {
  width: fit-content;
  min-width: 0;
  min-height: 62px;
  padding: 17px 30px 13px;
  justify-content: flex-start;
  gap: 0;
  font-size: clamp(25px, 1.75vw, 30px);
  letter-spacing: .10em;
  text-align: left;
  box-shadow:
    5px 6px 0 rgba(0,0,0,.52),
    0 16px 36px rgba(0,0,0,.22);
}

.hero--booking-only .hero-seat-note {
  display: block;
  margin-top: 13px;
  color: rgba(238,233,223,.62);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .hero--booking-only::before {
    background:
      radial-gradient(ellipse 380px 290px at 19% 66%,
        rgba(3,13,9,.76) 0%,
        rgba(3,13,9,.48) 38%,
        rgba(3,13,9,.17) 64%,
        transparent 82%),
      linear-gradient(180deg,
        rgba(7,17,13,.01) 0%,
        rgba(7,17,13,.05) 62%,
        rgba(7,17,13,.36) 100%);
  }

  .hero--booking-only .hero-inner {
    padding-inline: 22px;
  }

  .hero--booking-only .hero-copy {
    min-width: 0;
    width: min(100%, 290px);
    transform: translateY(16%);
  }

  .hero--booking-only .hero-kicker {
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: .21em;
  }

  .hero--booking-only .menace-hero-book-now {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    min-height: 57px;
    padding: 15px 23px 11px;
    font-size: 24px;
    box-shadow:
      4px 5px 0 rgba(0,0,0,.52),
      0 13px 28px rgba(0,0,0,.21);
  }

  .hero--booking-only .hero-seat-note {
    margin-top: 12px;
    font-size: 9px;
    letter-spacing: .17em;
  }
}

/* ── HOMEPAGE SOCIAL + LOCATION CARDS ── */
.home-links-section .wrap {
  width: min(1480px, calc(100% - 40px));
}

.home-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-link-card {
  position: relative;
  min-width: 0;
  height: 148px;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: #08110d;
  border: 1px solid rgba(200,145,45,.18);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.home-link-card::after {
  content: "↗";
  position: absolute;
  right: 17px;
  bottom: 14px;
  z-index: 4;
  color: rgba(225,179,75,.78);
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .2s ease, transform .2s ease;
}

.home-link-card__visual,
.home-link-card__overlay,
.home-link-card__content {
  position: absolute;
  inset: 0;
}

.home-link-card__visual {
  z-index: 0;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.home-link-card__overlay {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,13,9,.78) 0%, rgba(5,13,9,.42) 52%, rgba(5,13,9,.10) 100%),
    linear-gradient(0deg, rgba(5,13,9,.48) 0%, rgba(5,13,9,.03) 72%);
}

.home-link-card__content {
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 18px 18px 16px;
}

.home-link-card__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 52px;
}

.home-link-card__copy strong {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(20px, 1.55vw, 27px);
  font-weight: 900;
  letter-spacing: .035em;
  line-height: .92;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,.62);
}

.home-link-card__copy span {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: rgba(240,233,216,.70);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.35;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,.72);
}

.home-link-card__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: var(--gold2);
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.62));
}

.home-link-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-link-card--instagram .home-link-card__visual {
  background:
    radial-gradient(ellipse at 8% 118%, rgba(164,91,64,.46), transparent 54%),
    radial-gradient(ellipse at 93% -18%, rgba(214,158,48,.29), transparent 46%),
    linear-gradient(125deg, #0d2118 0%, #173526 52%, #0b1a13 100%);
}

.home-link-card--instagram .home-link-card__visual::before,
.home-link-card--tiktok .home-link-card__visual::before {
  content: "";
  position: absolute;
  inset: -35%;
  opacity: .34;
  background: repeating-linear-gradient(117deg, transparent 0 21px, rgba(255,255,255,.025) 21px 22px);
  transform: rotate(-3deg);
}

.home-link-card--instagram .home-link-card__visual::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -58px;
  top: -72px;
  border: 1px solid rgba(225,179,75,.20);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(225,179,75,.055), 0 0 0 56px rgba(225,179,75,.032);
}

.home-link-card--tiktok .home-link-card__visual {
  background:
    radial-gradient(ellipse at 85% 18%, rgba(151,61,48,.31), transparent 44%),
    radial-gradient(ellipse at 62% 120%, rgba(45,132,99,.34), transparent 52%),
    linear-gradient(130deg, #0a1b14 0%, #183829 54%, #0c1e16 100%);
}

.home-link-card--tiktok .home-link-card__visual::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 90px;
  right: -60px;
  top: 20px;
  border-top: 1px solid rgba(225,179,75,.19);
  border-bottom: 1px solid rgba(225,179,75,.10);
  transform: rotate(-18deg);
}

.home-link-card__visual--map {
  background-color: #163126;
  background-image: url("../images/menace-map-bg.svg");
  background-position: center 46%;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-link-card--location .home-link-card__overlay {
  background:
    linear-gradient(90deg, rgba(3,15,10,.74) 0%, rgba(5,23,15,.42) 48%, rgba(8,29,19,.10) 100%),
    linear-gradient(0deg, rgba(3,13,9,.46) 0%, rgba(4,18,12,.03) 74%),
    linear-gradient(135deg, rgba(22,78,52,.18) 0%, rgba(63,87,45,.13) 58%, rgba(183,132,36,.07) 100%);
  box-shadow: inset 0 0 54px rgba(4,20,13,.18);
}

.home-link-card:hover,
.home-link-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(225,179,75,.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.22);
}

.home-link-card:hover .home-link-card__visual,
.home-link-card:focus-visible .home-link-card__visual {
  transform: scale(1.045);
  filter: brightness(1.06);
}

.home-link-card:hover::after,
.home-link-card:focus-visible::after {
  opacity: 1;
  transform: translate(0,0);
}

.home-link-card:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .home-links-section .wrap { width: min(100%, calc(100% - 24px)); }
  .home-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-link-card--location { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .home-links-section .wrap { width: min(100%, calc(100% - 20px)); }
  .home-links-grid { grid-template-columns: 1fr; gap: 9px; }
  .home-link-card,
  .home-link-card--location { grid-column: auto; height: 132px; }
  .home-link-card__content { padding: 16px 16px 14px; }
  .home-link-card__icon { top: 14px; right: 14px; width: 25px; height: 25px; }
  .home-link-card__copy strong { font-size: 21px; }
  .home-link-card__copy span { margin-top: 7px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-link-card,
  .home-link-card__visual,
  .home-link-card::after { transition: none; }
}

/* ── Homepage barber carousel position + discoverability nudge ── */
#team {
  padding-bottom: clamp(34px, 5vw, 72px);
}
#team .sec-head {
  margin-bottom: 12px;
}
.team-carousel-nudge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 2px 12px;
  color: var(--gold2);
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.team-carousel-nudge__arrow {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  animation: menace-carousel-nudge 1.25s ease-in-out infinite;
}
@keyframes menace-carousel-nudge {
  0%, 100% { transform: translateX(0); opacity: .58; }
  50% { transform: translateX(7px); opacity: 1; }
}
@media (max-width: 768px) {
  .team-carousel-nudge {
    justify-content: flex-start;
    margin-left: 0;
    margin-bottom: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-carousel-nudge__arrow { animation: none; }
}

/* V63.13 — natuurlijke swipe-preview bij laden */
.team-hscroll [data-menace-hscroll-track] {
  transform: translate3d(0, 0, 0);
}
.team-hscroll.is-load-nudging [data-menace-hscroll-track] {
  transition: transform .66s cubic-bezier(.22,.78,.24,1);
  will-change: transform;
}
.team-hscroll.is-load-nudge-pulled [data-menace-hscroll-track] {
  transform: translate3d(clamp(-92px, -15vw, -58px), 0, 0);
}
.team-hscroll.is-load-nudge-releasing [data-menace-hscroll-track] {
  transition-duration: .58s;
  transition-timing-function: cubic-bezier(.2,.9,.28,1.12);
  transform: translate3d(0, 0, 0);
}
.team-hscroll.is-load-nudging .team-carousel-nudge__arrow,
.team-hscroll.is-load-nudging + .team-carousel-nudge__arrow {
  animation-duration: .62s;
}
@media (prefers-reduced-motion: reduce) {
  .team-hscroll [data-menace-hscroll-track] {
    transition: none !important;
    transform: none !important;
  }
}

/* V63.29 — fade viewport altijd 20px buiten de barbercarousel */
#team .menace-hscroll-viewport {
  width: calc(100% + 40px);
  margin-inline: -20px;
  overflow: hidden;
}
#team .menace-hscroll-viewport > .cards {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
}


/* ── HOMEPAGE ANIMATED HERO ── */
.menace-animated-hero {
  position: absolute;
  inset: var(--nav) 0 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
.menace-animated-hero iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.hero--animated {
  background-image: none !important;
}
.hero--animated::before {
  background:
    radial-gradient(ellipse 520px 340px at 13% 62%, rgba(3,13,9,.68) 0%, rgba(3,13,9,.42) 38%, rgba(3,13,9,.12) 64%, transparent 82%),
    linear-gradient(180deg, rgba(7,17,13,.02) 0%, rgba(7,17,13,.03) 66%, rgba(7,17,13,.28) 100%);
}
@media (max-width: 760px) {
  .menace-animated-hero iframe {
    width: 178%;
    max-width: none;
    margin-left: -39%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menace-animated-hero iframe { display: none; }
  .hero--animated { background-color: #07110d; }
}