/* ================================================================
   BROOKLYN FADE — Index CSS v3
   Modern · Professional · Intuitive | Light & Dark mode
   ================================================================ */

/* ── Design tokens ── */
:root{
  --primary-beige:#E5DDD5;
  --secondary-beige:#D5CCC3;
  --accent-brown:#8B7355;
  --light-brown:#A69886;
  --dark-brown:#513d24;
  --bg:#FAF9F8;
  --surface:#FFFFFF;
  --text:#1A1614;
  --text-sub:#6B6460;
  --border:#EAE3DC;
  --sh-s:0 1px 4px rgba(0,0,0,.06);
  --sh-m:0 4px 16px rgba(0,0,0,.08);
  --sh-l:0 12px 40px rgba(0,0,0,.10);
  --tr:.28s cubic-bezier(.4,0,.2,1)
}

/* ── Dark mode tokens ── */
:root{
  --dark-bg-primary:#1a1614;
  --dark-bg-secondary:#242021;
  --dark-bg-tertiary:#2d2825;
  --dark-text-primary:#E5DDD5;
  --dark-text-secondary:#B8AFA7;
  --dark-accent-primary:#C4B5A5;
  --dark-accent-secondary:#8B7355;
  --dark-border:#3d3632;
  --dark-card-bg:#242021;
  --dark-hover:#2d2825;
  --dark-overlay:rgba(26,22,20,.95)
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
html,body{
  min-height:100vh;margin:0;padding:0;
  user-select:none;-webkit-user-select:none;
  -moz-user-select:none;-ms-user-select:none;
  font-family:'Quicksand',sans-serif
}
body{
  background-color:var(--bg);
  position:relative;overflow-x:hidden
}
body::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:-1;background-color:#FAF9F8;pointer-events:none
}

/* ── Scroll progress ── */
html{scrollbar-gutter:stable}

/* ── Navigation ── */
nav{
  position:fixed;width:100%;top:0;left:0;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:50;
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--tr)
}
nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.08)}

nav .text-gray-600{
  position:relative;color:var(--text-sub);
  font-weight:500;font-size:.925rem;
  text-decoration:none;
  transition:color var(--tr)
}
nav .text-gray-600::after{
  content:'';position:absolute;
  width:0;height:2px;bottom:-4px;left:0;
  background:var(--accent-brown);
  transition:width var(--tr)
}
nav .text-gray-600:hover{color:var(--text)}
nav .text-gray-600:hover::after{width:100%}

/* Desktop booking button in nav */
.nav-booking-btn{
  display:inline-flex;align-items:center;
  padding:.45rem 1.125rem;
  background:var(--accent-brown);
  color:#fff !important;
  border-radius:8px;
  font-weight:700;font-size:.875rem;
  text-decoration:none;
  transition:all var(--tr);
  white-space:nowrap;letter-spacing:.01em
}
.nav-booking-btn:hover{
  background:var(--dark-brown);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(139,115,85,.35)
}
.nav-booking-btn::after{display:none !important}

@media(min-width:1024px) and (max-width:1150px){
  nav .max-w-7xl{padding-left:1rem;padding-right:1rem}
  nav button{padding-left:.75rem;padding-right:.75rem}
}

/* ── Mobile nav ── */
.hamburger-button{
  width:30px;height:30px;
  position:relative;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;outline:none;padding:0
}
.hamburger-lines{width:26px;height:20px;position:relative;display:flex;flex-direction:column;justify-content:space-between}
.hamburger-lines .line{
  display:block;height:2px;width:100%;
  background:var(--accent-brown);
  border-radius:4px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  transform-origin:center
}
.hamburger-button.active .line1{transform:translateY(9px) rotate(45deg)}
.hamburger-button.active .line2{opacity:0;transform:translateX(-10px)}
.hamburger-button.active .line3{transform:translateY(-9px) rotate(-45deg)}
.hamburger-button:focus{outline:2px solid rgba(139,115,85,.4);outline-offset:2px;border-radius:4px}
.hamburger-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}

/* hamburger alias for old class names */
.menu-line{position:absolute;width:100%;height:2px;background-color:var(--accent-brown);transition:all .3s ease}
.menu-line:nth-child(1){top:25%}
.menu-line:nth-child(2){top:50%;transform:translateY(-50%)}
.menu-line:nth-child(3){bottom:25%}
.menu-active .menu-line:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-active .menu-line:nth-child(2){opacity:0}
.menu-active .menu-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

body.menu-open{overflow:hidden}

.menu-overlay{
  position:fixed;top:-130%;left:0;right:0;bottom:0;
  height:100vh;
  background:linear-gradient(135deg,rgba(229,221,213,.98) 0%,rgba(213,204,195,.98) 100%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:40;
  transition:top .5s cubic-bezier(.4,0,.2,1);
  padding-top:64px;overflow-y:auto
}
.menu-overlay.active{top:0}

.mobile-menu-items{
  padding:2rem;
  opacity:0;transform:translateY(-20px);
  transition:all .6s cubic-bezier(.4,0,.2,1) .2s;
  max-height:calc(100vh - 64px);overflow-y:auto
}
.menu-overlay.active .mobile-menu-items{opacity:1;transform:translateY(0)}

.mobile-menu-link{
  display:block;
  margin:.8rem 0;padding:0;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(139,115,85,.15);
  border-radius:1rem;
  transition:all .3s ease;
  position:relative;overflow:hidden;
  text-decoration:none
}
.mobile-menu-link span{
  display:flex;align-items:center;
  padding:.9em 1.1em;
  position:relative;z-index:1;
  color:var(--accent-brown)
}
.mobile-menu-link svg{width:1.2rem;height:1.2rem;margin-right:1rem;transition:transform .3s ease}
.mobile-menu-link:hover svg{transform:translateX(5px)}
.mobile-menu-link::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(139,115,85,.07),rgba(166,152,134,.07));
  transform:translateX(-100%);transition:transform .4s ease
}
.mobile-menu-link:hover::before{transform:translateX(0)}

/* ── Parallax blobs ── */
.parallax-decoration{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  pointer-events:none;z-index:0;overflow:hidden
}
.blob{
  position:absolute;
  background:rgba(139,115,85,.09);
  border-radius:50%;opacity:.7
}
.blob-1{width:150px;height:150px;left:10%;top:20%}
.blob-2{width:100px;height:100px;right:15%;top:30%}
.blob-3{width:120px;height:120px;left:25%;bottom:20%}
.blob-4{width:80px;height:80px;right:25%;bottom:30%}
.blob-5{width:90px;height:90px;left:40%;top:15%}
.blob-6{width:110px;height:110px;right:35%;top:45%}
.blob-7{width:130px;height:130px;left:20%;top:60%}
.blob-8{width:95px;height:95px;right:18%;bottom:15%}
.blob-9{width:140px;height:140px;left:50%;bottom:25%}
.blob-10{width:85px;height:85px;right:40%;top:10%}

@keyframes float1{0%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(30px,50px) rotate(120deg)}66%{transform:translate(-20px,-30px) rotate(240deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes float2{0%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(-40px,20px) rotate(-120deg)}66%{transform:translate(30px,-40px) rotate(-240deg)}100%{transform:translate(0,0) rotate(-360deg)}}
@keyframes float3{0%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(50px,-30px) rotate(180deg)}66%{transform:translate(-40px,40px) rotate(360deg)}100%{transform:translate(0,0) rotate(540deg)}}
@keyframes float4{0%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(-30px,-50px) rotate(-180deg)}66%{transform:translate(40px,30px) rotate(-360deg)}100%{transform:translate(0,0) rotate(-540deg)}}
.blob-1{animation:float1 20s infinite linear}.blob-2{animation:float2 25s infinite linear}.blob-3{animation:float3 22s infinite linear}.blob-4{animation:float4 28s infinite linear}.blob-5{animation:float1 24s infinite linear reverse}.blob-6{animation:float2 21s infinite linear reverse}.blob-7{animation:float3 27s infinite linear}.blob-8{animation:float4 23s infinite linear reverse}.blob-9{animation:float1 26s infinite linear}.blob-10{animation:float2 29s infinite linear reverse}

section,nav,.hero-slider{position:relative;z-index:1}

/* ── Hero Slider ── */
.hero-slider{
  position:relative;width:100%;
  aspect-ratio:16/9;min-height:500px;
  overflow:hidden;background-color:#000;
  display:block;contain:layout size
}

.slide{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  opacity:0;transform:translateX(100%);
  transition:transform .8s ease-in-out,opacity .8s ease-in-out;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  will-change:transform,opacity;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  contain:layout size
}
.slide.active{opacity:1;transform:translateX(0);z-index:2}
.slide.prev{opacity:1;transform:translateX(-100%);z-index:1}
.slide.next{opacity:1;transform:translateX(100%);z-index:1}

.slide-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 100%)
}

.slide-content{
  position:relative;z-index:10;
  text-align:center;max-width:820px;
  padding:0 3rem;margin:0 auto
}

.slide-title,.slide-description{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease-out,transform .7s ease-out
}
.slide.active .slide-title{opacity:1;transform:translateY(0);transition-delay:.3s}
.slide.active .slide-description{opacity:1;transform:translateY(0);transition-delay:.5s}
.slide.active .hero-cta-btn{opacity:1;transform:translateY(0);transition-delay:.65s}

.slide-title{
  color:#fff;font-size:2.6rem;font-weight:700;
  margin-bottom:1rem;line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.3)
}

.slide-description{
  color:rgba(255,255,255,.92);
  font-size:1.15rem;margin-bottom:1.75rem;
  text-shadow:0 1px 6px rgba(0,0,0,.3)
}

/* Hero CTA button */
.hero-cta-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.875rem 2rem;
  background:var(--accent-brown);color:#fff;
  border-radius:50px;
  font-family:'Quicksand',sans-serif;
  font-weight:700;font-size:1.05rem;
  text-decoration:none;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease-out,transform .7s ease-out,background .25s ease,box-shadow .25s ease !important
}
.hero-cta-btn:hover{
  background:var(--dark-brown);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  transform:translateY(-2px) !important
}

/* Hero nav dots */
.slider-nav{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:20
}
.slider-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.5);cursor:pointer;
  transition:all .3s ease
}
.slider-dot.active{background:#fff;transform:scale(1.25);width:24px;border-radius:5px}

/* Hero arrows */
.slider-arrows{
  position:absolute;width:100%;top:50%;transform:translateY(-50%);
  z-index:20;display:flex;justify-content:space-between;
  padding:0 20px;pointer-events:none
}
.slider-arrow{
  width:44px;height:44px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(4px);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all .3s ease;
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.25)
}
.slider-arrow:hover{background:rgba(255,255,255,.35)}

/* ── Scroll-reveal ── */
[data-scroll]{opacity:0;transform:translateY(20px);transition:all .6s ease}
[data-scroll].scroll-visible{opacity:1;transform:translateY(0)}

.service-title{transition-delay:.1s}
.service-description{transition-delay:.3s}
.service-list{transition-delay:.5s}
.service-sub-title{transition-delay:.15s}
.service-sub-text{transition-delay:.3s}
.price-title{transition-delay:.1s}

/* ── Over Ons section ── */
#over-ons .bg-white{
  border-radius:1.25rem;
  border:1px solid var(--border);
  box-shadow:var(--sh-s);
  padding:2.5rem !important
}
#over-ons h2{color:var(--text);font-size:1.75rem;font-weight:700;margin-bottom:1rem}
#over-ons p{color:var(--text-sub);line-height:1.75;font-size:1rem}

/* ── Services section ── */
.service-box-item{
  background:var(--surface);
  border-radius:1.25rem;
  border:1px solid var(--border);
  box-shadow:var(--sh-s);
  padding:2.25rem !important;
  transition:all var(--tr)
}
.service-box-item:hover{
  box-shadow:var(--sh-m);
  transform:translateY(-3px);
  border-color:rgba(139,115,85,.25)
}
.service-box-item img{opacity:.35;transition:opacity .3s ease;display:block;margin:0 auto 1rem}
.service-box-item:hover img{opacity:.55}

@media(min-width:768px){.services-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(4,1fr)}}

/* ── Team section ── */
.team-grid{display:flex;flex-wrap:wrap;gap:1.75rem;justify-content:center}

.team-member{
  opacity:0;transform:translateY(20px);
  transition:all .6s cubic-bezier(.4,0,.2,1);
  width:calc(100% - 2rem);max-width:500px;
  contain:layout paint;
  border-radius:1rem;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--sh-s)
}
.team-member.scroll-visible{opacity:1;transform:translateY(0)}
.team-member:hover{box-shadow:var(--sh-m);border-color:rgba(139,115,85,.2)}

.team-member .aspect-square{
  width:100%;aspect-ratio:1/1;
  overflow:hidden;border-radius:.75rem .75rem 0 0;
  contain:layout size paint;display:block;position:relative
}
.team-member .aspect-square img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
  transition:transform .5s ease
}
.team-member:hover .aspect-square img{transform:scale(1.04)}

.team-member .p-6{padding:1.5rem !important}

@media(min-width:640px){
  .team-member{width:calc(50% - 1rem);max-width:400px}
  .team-member:nth-child(1){transition-delay:.1s}
  .team-member:nth-child(2){transition-delay:.2s}
  .team-member:nth-child(3){transition-delay:.3s}
}
@media(min-width:1280px){.team-member{width:calc(25% - 1.5rem);max-width:300px}}
@media(max-width:639px){.team-member{max-width:400px}.team-grid{gap:1.25rem}}

/* ── Reviews section ── */
#beoordelingen .bg-white{
  border-radius:1.25rem;
  border:1px solid var(--border);
  box-shadow:var(--sh-s);
  transition:all var(--tr)
}
#beoordelingen .bg-white:hover{box-shadow:var(--sh-m);transform:translateY(-2px)}

/* Topics pill */
.bg-\[#F5F3F0\]{
  background:#F5F0EB !important;
  border-radius:50px;
  border:1px solid rgba(139,115,85,.15);
  transition:all .2s ease
}
.bg-\[#F5F3F0\]:hover{background:#EDE5DC !important;border-color:rgba(139,115,85,.3)}

/* ── Portfolio ── */
.portfolio-container{position:relative;width:100%;padding:0;overflow:hidden}
.portfolio-scroll{width:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.portfolio-track{display:flex;gap:20px;padding:60px 0;transform:translateX(0);transition:transform .5s ease}
.portfolio-item{
  position:relative;width:280px;height:280px;flex-shrink:0;
  border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:var(--sh-m);
  transition:all .6s cubic-bezier(.4,0,.2,1);
  transform-origin:center;aspect-ratio:1/1;
  contain:layout size paint
}
.portfolio-item img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:all .5s ease;display:block
}
.portfolio-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#fff;opacity:0;
  transform:translateY(100%);
  transition:all .5s ease
}
.portfolio-item.center-item{transform:scale(1.2);z-index:2;box-shadow:0 12px 40px rgba(139,115,85,.3)}
.portfolio-item.center-item .portfolio-overlay{opacity:1;transform:translateY(0)}
.portfolio-item.adjacent-item{transform:scale(1.1);z-index:1}

.scroll-button{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--accent-brown);color:#fff;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;z-index:10;opacity:.85;
  touch-action:manipulation;
  -webkit-touch-callout:none;user-select:none;
  -webkit-tap-highlight-color:transparent
}
.scroll-button:hover{opacity:1;background:var(--light-brown);transform:translateY(-50%) scale(1.05)}
.scroll-left{left:20px}
.scroll-right{right:20px}

@media(max-width:768px){.portfolio-container{padding:0}.portfolio-item{width:220px;height:220px;border-radius:10px}}
@media(max-width:480px){.portfolio-item{width:200px;height:200px}}

/* ── Pricing section ── */
.barber-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.barber-tabs::-webkit-scrollbar{display:none}

.barber-tab{
  position:relative;padding:.625rem 1.375rem;margin:0 .375rem;
  color:var(--accent-brown);
  background:transparent;
  border:2px solid transparent;
  border-radius:50px;
  font-weight:600;font-size:.9rem;
  transition:all .25s ease;cursor:pointer;font-family:'Quicksand',sans-serif
}
.barber-tab:hover{color:var(--dark-brown);background:rgba(139,115,85,.06)}
.barber-tab.active{color:var(--accent-brown);background:rgba(139,115,85,.1);border-color:rgba(139,115,85,.2)}
.barber-tab.active::after{width:60%}

.price-list{
  opacity:0;visibility:hidden;height:0;overflow:hidden;
  transition:all .5s cubic-bezier(.4,0,.2,1);
  transform:translateY(20px)
}
.price-list.active{opacity:1;visibility:visible;height:auto;transform:translateY(0)}

/* Price rows */
.divide-y>div{
  transition:background .2s ease;
  border-color:var(--border) !important
}
.hoverState:hover{background:#FAF7F4 !important}

/* Price card headers */
.bg-white.rounded-xl.shadow-sm.overflow-hidden{
  border:1px solid var(--border);
  box-shadow:var(--sh-s) !important;
  border-radius:1.25rem !important
}

.text-sm.font-semibold.text-\[#8B7355\]{
  font-size:.7rem !important;
  letter-spacing:.06em;
  font-weight:700
}

.text-sl{font-size:.88rem}
.text-xss{font-size:.62rem}
@media(max-width:640px){.barber-tab{padding:.5rem 1rem;margin:0 .25rem;font-size:.875rem}}

/* Animated price list items */
.price-list.active .divide-y>div:nth-child(1){animation-delay:.05s}
.price-list.active .divide-y>div:nth-child(2){animation-delay:.1s}
.price-list.active .divide-y>div:nth-child(3){animation-delay:.15s}
.price-list.active .divide-y>div:nth-child(4){animation-delay:.2s}
.price-list.active .divide-y>div:nth-child(5){animation-delay:.25s}
.price-list.active .divide-y>div:nth-child(6){animation-delay:.3s}
.price-list.active .divide-y>div:nth-child(7){animation-delay:.35s}
.price-list.active .divide-y>div:nth-child(8){animation-delay:.4s}
.price-list.active .divide-y>div:nth-child(9){animation-delay:.45s}
.price-list.active .divide-y>div:nth-child(10){animation-delay:.5s}

/* ── Best-sellers ── */
#bestsellers{background:#EFE8E1}

.bs-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}

.bs-card{
  flex:0 0 210px;width:210px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;overflow:hidden;
  box-shadow:var(--sh-s);
  transition:transform .22s ease,box-shadow .22s ease
}
.bs-card:hover{transform:translateY(-5px);box-shadow:var(--sh-l)}

.bs-img-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:#f5f0ec}
.bs-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;display:block}
.bs-card:hover .bs-img-wrap img{transform:scale(1.06)}

.bs-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(0,0,0,.1)}

.bs-badge{
  position:absolute;top:10px;right:10px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:100px;
  display:flex;align-items:center;gap:4px;
  background:#f59e0b;color:#000
}
.bs-badge--sale{background:#dc2626;color:#fff}

.bs-info{padding:1rem 1.25rem 1.25rem}
.bs-category{
  font-size:.7rem;font-weight:600;color:var(--accent-brown);
  text-transform:uppercase;letter-spacing:.07em;
  display:block;margin-bottom:5px
}
.bs-name{font-weight:700;color:#1a1a1a;font-size:.97rem;margin:0 0 .5rem;line-height:1.3}
.bs-price{font-size:1.2rem;font-weight:800;color:#1a1a1a}
.bs-price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bs-price-original{font-size:.9rem;font-weight:500;color:#9ca3af;text-decoration:line-through}
.bs-price-sale{font-size:1.2rem;font-weight:800;color:#dc2626}

.bs-section-label{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(245,158,11,.12);color:#92690a;
  border:1px solid rgba(245,158,11,.3);
  border-radius:100px;padding:5px 14px;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:1rem
}

@media(max-width:480px){.bs-card{flex:0 0 calc(50% - .75rem);width:calc(50% - .75rem)}}

/* ── Opening hours section ── */
.opening-hours{background:linear-gradient(135deg,#E5DDD5 0%,#FAF9F8 100%)}

.opening-hours .bottom-delay.bg-white{
  border-radius:1.25rem;border:1px solid var(--border);box-shadow:var(--sh-s)
}

/* ── Location section ── */
#locatie .bg-white{
  border-radius:1.25rem;border:1px solid var(--border);box-shadow:var(--sh-s)
}

#locatie .bg-\[#F5F3F0\]{
  background:#F5F0EB !important;
  border-radius:.875rem;
  border-left:4px solid var(--accent-brown) !important
}

/* Location CTA buttons */
.block.w-full.bg-black{
  background:var(--text) !important;
  border-radius:.625rem !important;
  font-weight:700 !important;
  transition:all .25s ease;
  font-family:'Quicksand',sans-serif
}
.block.w-full.bg-black:hover{background:#333 !important;transform:translateY(-1px)}

.block.w-full.bg-white.border.border-black{
  border-radius:.625rem !important;
  font-weight:600 !important;
  transition:all .25s ease;
  font-family:'Quicksand',sans-serif
}
.block.w-full.bg-white.border.border-black:hover{background:#f5f5f5 !important;transform:translateY(-1px)}

/* ── Gallery ── */
.gallery-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.gallery-item{
  width:100%;max-width:300px;aspect-ratio:1/1;
  opacity:0;transform:translateY(20px);
  transition:all .6s cubic-bezier(.4,0,.2,1);
  overflow:hidden;border-radius:.875rem;
  box-shadow:var(--sh-s)
}
.gallery-item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.05)}
@media(min-width:640px){.gallery-item{width:calc(50% - 1rem);max-width:300px}}
@media(min-width:1024px){.gallery-item{width:calc(25% - 1rem);max-width:300px}}
.gallery-item.scroll-visible{opacity:1;transform:translateY(0)}
@media(max-width:639px){.gallery-item{max-width:300px;margin-left:auto;margin-right:auto}}

/* ── Lightbox ── */
#gallery-lightbox{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
#gallery-lightbox.active{opacity:1;visibility:visible}

.lightbox{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:transparent;
  display:flex;justify-content:center;align-items:center;
  z-index:9999;visibility:hidden;opacity:0;
  transition:background .4s ease,visibility .4s ease,opacity .4s ease
}
.lightbox.active{
  visibility:visible;opacity:1;
  background:rgba(57,41,22,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.lightbox-info{
  position:fixed;bottom:50px;left:50%;transform:translateX(-50%);
  color:#fff;text-align:center;padding:10px;
  background:rgba(0,0,0,.7);border-radius:8px;
  max-width:80%;opacity:0;transition:all .4s ease
}
.lightbox.active .lightbox-info{opacity:1;transform:translateX(-50%) translateY(0)}
.lightbox-title{font-size:18px;font-weight:700;margin-bottom:5px}
.lightbox-description{font-size:14px}
@supports not (backdrop-filter:blur(10px)){.lightbox.active{background:rgba(139,115,85,.98)}}

.lightbox-content{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.85);opacity:0;
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s ease;
  padding:60px 0
}
.lightbox.active .lightbox-content{transform:scale(1);opacity:1}

.lightbox-image{
  max-width:90%;max-height:calc(100vh - 120px);
  object-fit:contain;
  box-shadow:0 16px 48px rgba(0,0,0,.4);
  border-radius:10px;transform:translateY(20px);
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s ease
}
.lightbox.active .lightbox-image{transform:translateY(0)}
.lightbox.transitioning .lightbox-image{opacity:0;transform:scale(.96)}

.lightbox-nav{
  position:absolute;width:100%;top:50%;left:0;
  transform:translateY(-50%);
  display:flex;justify-content:space-between;
  padding:0 20px;pointer-events:none;z-index:10
}
.lightbox-nav button{
  width:42px;height:42px;background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;pointer-events:auto;
  opacity:0;transform:translateX(-20px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 16px rgba(0,0,0,.18)
}
.lightbox-nav button:last-child{transform:translateX(20px)}
.lightbox.active .lightbox-nav button{opacity:1;transform:translateX(0)}
.lightbox-nav button:hover{background:#f8f8f8;transform:scale(1.08) !important}

.lightbox-close{
  position:fixed;top:15px;right:15px;
  width:38px;height:38px;background:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transform:rotate(-180deg) scale(.8);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 16px rgba(0,0,0,.18);z-index:10;color:#333;font-size:20px;border:none
}
.lightbox.active .lightbox-close{opacity:1;transform:rotate(0) scale(1)}
.lightbox-close:hover{background:#f8f8f8;transform:rotate(90deg) scale(1.1)}

.lightbox-counter{
  position:fixed;bottom:15px;left:50%;
  transform:translateX(-50%) translateY(20px);
  color:#fff;font-size:13px;
  padding:5px 12px;background:rgba(0,0,0,.65);
  border-radius:20px;opacity:0;
  transition:all .4s cubic-bezier(.4,0,.2,1)
}
.lightbox.active .lightbox-counter{opacity:1;transform:translateX(-50%) translateY(0)}
body.lightbox-open{padding-right:var(--scrollbar-width,0)}

@media(max-width:768px){
  .lightbox-content{padding:50px 0}
  .lightbox-image{max-height:calc(100vh - 100px);max-width:95%}
  .lightbox-nav{padding:0 15px}
  .lightbox-nav button{width:36px;height:36px}
  .lightbox-counter{bottom:10px;font-size:12px;padding:4px 10px}
}
@media(max-width:480px){
  .lightbox-content{padding:40px 0}
  .lightbox-nav{padding:0 10px}
  .lightbox-nav button{width:32px;height:32px}
  .lightbox-close{top:10px;right:10px;width:32px;height:32px;font-size:17px}
  .lightbox-image{max-width:98%}
}
@media(hover:none){
  .lightbox-nav button,.lightbox-close{opacity:1;transform:none}
  .lightbox-nav button:active,.lightbox-close:active{background:#f0f0f0;transform:scale(.95)}
}

/* ── Floating booking button ── */
.luxury-button{
  position:fixed;bottom:2rem;right:2rem;z-index:50;
  padding:.875rem 1.875rem;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:1rem;
  color:#fff;
  background:linear-gradient(135deg,var(--dark-brown) 0%,var(--accent-brown) 100%);
  border:none;border-radius:50px;
  box-shadow:0 8px 24px rgba(139,115,85,.35);
  transition:all .35s cubic-bezier(.175,.885,.32,1.275);
  transform:translateY(0);overflow:hidden;cursor:pointer;
  text-decoration:none;display:flex;align-items:center;gap:.875rem
}
.luxury-button::after{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:.55s
}
.luxury-button:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(139,115,85,.45);
  background:linear-gradient(135deg,var(--accent-brown) 0%,var(--dark-brown) 100%)
}
.luxury-button:hover::after{left:100%}
.luxury-button:active{transform:translateY(-1px)}

.luxury-button-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;min-width:1.5rem;
  background:rgba(255,255,255,.2);
  border-radius:50%;padding:.3rem;
  transition:transform .3s ease
}
.luxury-button:hover .luxury-button-icon{transform:rotate(15deg)}

@media(max-width:768px){.luxury-button{bottom:1.5rem;right:1.5rem;padding:.875rem 1.5rem;font-size:.9rem}}
@media(max-width:480px){.luxury-button{bottom:1rem;right:1rem;padding:.75rem 1.25rem;font-size:.875rem;gap:.625rem}}

@keyframes pulse-light{
  0%{box-shadow:0 0 0 0 rgba(139,115,85,.45)}
  70%{box-shadow:0 0 0 16px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@keyframes pulse-dark{
  0%{box-shadow:0 0 0 0 rgba(196,181,165,.5)}
  70%{box-shadow:0 0 0 16px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.luxury-button.pulse{animation:pulse-light 2.2s infinite}

/* ── Appointment modal (kept for compatibility) ── */
.appointment-modal{
  position:fixed;bottom:6rem;right:1rem;width:0;height:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:1rem;
  box-shadow:0 12px 40px rgba(139,115,85,.22);
  z-index:49;overflow:hidden;opacity:0;
  transition:all .4s cubic-bezier(.4,0,.2,1);
  transform-origin:bottom right;pointer-events:none
}
.appointment-modal.open{
  width:calc(100% - 30px);max-width:450px;
  height:-webkit-fill-available;max-height:80vh;
  opacity:1;pointer-events:auto;overflow-y:auto
}
.appointment-content{
  padding:1.5rem;opacity:0;
  transform:translateY(20px);
  transition:all .3s ease .1s
}
.appointment-modal.open .appointment-content{opacity:1;transform:translateY(0)}
.appointment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.appointment-header h2{font-size:1.5rem;color:var(--accent-brown);margin:0}
.appointment-close{
  background:none;border:none;font-size:1.5rem;color:var(--accent-brown);
  cursor:pointer;padding:.25rem .5rem;border-radius:.25rem;transition:background .3s
}
.appointment-close:hover{background:rgba(139,115,85,.1)}

#appointment-frame-container{
  position:relative;width:100%;height:calc(80vh - 70px);
  overflow-y:auto;-webkit-overflow-scrolling:touch
}
.appointment-frame{width:100%;height:100%;border:none;overflow-y:auto}
.loading-spinner-sm{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;
  border:4px solid rgba(139,115,85,.2);
  border-top:4px solid var(--accent-brown);
  animation:spinSm 1s linear infinite
}
@keyframes spinSm{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── Mobile hero ── */
@media(max-width:768px){
  .hero-slider{height:70vh;min-height:400px;aspect-ratio:auto}
  .slide-title{font-size:2rem;padding:1.5rem 0 0}
  .slide-description{font-size:1.05rem;padding:0 2rem}
  .hero-cta-btn{font-size:.9rem;padding:.75rem 1.5rem}
  .slider-arrow{width:36px;height:36px}
  .slider-arrows{padding:0 12px}
}
@media(max-width:480px){
  .hero-slider{height:70vh;min-height:350px;aspect-ratio:auto}
  .slide-title{font-size:1.5rem;padding:1.5rem 0 0}
  .slide-description{font-size:.9rem;padding:0 1.5rem}
  .hero-cta-btn{font-size:.875rem;padding:.625rem 1.25rem}
}

/* ── Review link ── */
.reviewLink{color:#000;font-weight:600;font-size:.875rem}

/* ── Gradient background ── */
.gradient-bg{background:linear-gradient(135deg,#E5DDD5 0%,#D5CCC3 100%)}

/* ── Form elements ── */
input,textarea,select{touch-action:manipulation;-webkit-text-size-adjust:100%}

/* ── Scroll animation stagger for team/services ── */
@media(min-width:640px){
  .service-box-item:nth-child(1){transition-delay:.05s}
  .service-box-item:nth-child(2){transition-delay:.15s}
  .service-box-item:nth-child(3){transition-delay:.25s}
  .service-box-item:nth-child(4){transition-delay:.35s}
  .service-box-item:nth-child(5){transition-delay:.45s}
  .service-box-item:nth-child(6){transition-delay:.55s}
  .service-box-item:nth-child(7){transition-delay:.65s}
  .service-box-item:nth-child(8){transition-delay:.75s}
  .team-member:nth-child(1){transition-delay:.1s}
  .team-member:nth-child(2){transition-delay:.2s}
  .team-member:nth-child(3){transition-delay:.3s}
  .team-member:nth-child(4){transition-delay:.4s}
  .team-member:nth-child(5){transition-delay:.5s}
  .team-member:nth-child(6){transition-delay:.6s}
  .team-member:nth-child(7){transition-delay:.7s}
  .team-member:nth-child(8){transition-delay:.8s}
  .team-member .team-delay:nth-child(1){transition-delay:.05s}
  .team-member .team-delay:nth-child(2){transition-delay:.1s}
  .team-member .team-delay:nth-child(3){transition-delay:.15s}
  .team-member .team-delay:nth-child(4){transition-delay:.2s}
  .team-member .team-delay:nth-child(5){transition-delay:.25s}
  .team-member .team-delay:nth-child(6){transition-delay:.3s}
  .team-member .team-delay:nth-child(7){transition-delay:.35s}
  .team-member .team-delay:nth-child(8){transition-delay:.4s}
  .bottom-delay:nth-child(1){transition-delay:.05s}
  .bottom-delay:nth-child(2){transition-delay:.2s}
}

/* ── Content visibility (performance) ── */
section:not(:first-of-type):not(.py-20){
  content-visibility:auto;
  contain-intrinsic-size:1px 1000px
}

/* ── Wiggle animation ── */
@keyframes wiggle{
  0%{transform:rotate(0deg)}15%{transform:rotate(-10deg)}30%{transform:rotate(8deg)}
  45%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0deg)}
}
.wiggle-infinite{animation:wiggle 2s cubic-bezier(.36,.07,.19,.97) infinite}

/* ── Dark mode ── */
@media(prefers-color-scheme:dark){
  html,body{background:var(--dark-bg-primary) !important;color:var(--dark-text-primary)}
  html{background:var(--dark-bg-primary) !important}
  body{background:var(--dark-bg-primary) !important;min-height:100vh !important}
  body::before{background:var(--dark-bg-primary)}

  nav{
    background:rgba(36,32,33,.96);
    border-bottom-color:var(--dark-border)
  }
  nav .text-gray-600{color:var(--dark-text-secondary)}
  nav .text-gray-600:hover{color:var(--dark-accent-primary)}
  nav .text-gray-600::after{background:var(--dark-accent-primary)}
  nav .text-\[#8B7355\]{color:var(--dark-accent-primary)}

  .nav-booking-btn{
    background:var(--dark-accent-secondary);
    box-shadow:none
  }
  .nav-booking-btn:hover{background:var(--dark-accent-primary)}

  section{position:relative;z-index:1}
  .parallax-decoration{z-index:0}
  .blob{background:rgba(196,181,165,.09)}

  .menu-overlay{background:linear-gradient(135deg,rgba(36,32,33,.98) 0%,rgba(45,40,37,.98) 100%)}
  .mobile-menu-link{background:rgba(45,40,37,.8);border-color:var(--dark-border)}
  .mobile-menu-link:hover{background:rgba(61,54,50,.8)}
  .mobile-menu-link span{color:var(--dark-text-primary)}

  .opening-hours{background:linear-gradient(135deg,var(--dark-bg-secondary) 0%,var(--dark-bg-primary) 100%)}

  .service-box-item,
  .team-member{background:var(--dark-card-bg);border-color:var(--dark-border)}
  .service-box-item:hover,.team-member:hover{box-shadow:0 8px 28px rgba(0,0,0,.35)}

  #over-ons .bg-white,
  #beoordelingen .bg-white,
  #locatie .bg-white,
  .opening-hours .bottom-delay.bg-white,
  .bg-white.rounded-xl.shadow-sm.overflow-hidden{
    background:var(--dark-card-bg) !important;
    border-color:var(--dark-border) !important
  }

  .text-gray-600,.text-gray-800{color:var(--dark-text-secondary)}
  .text-\[#8B7355\]{color:var(--dark-accent-primary)}
  .text-\[#000000\],.text-\[#282828\]{color:var(--dark-text-primary) !important}
  .font-bold.text-gray-800{color:var(--dark-text-primary)}
  .bg-white{background-color:#332e29 !important}

  .reviewLink{color:#fff !important}
  .price-list .hoverState:hover{background:#4F4740 !important}
  .hoverState:hover{background:var(--dark-hover) !important}
  .divide-y>div{border-color:var(--dark-border) !important}

  .portfolio-item{background:var(--dark-card-bg);box-shadow:0 4px 8px rgba(0,0,0,.25)}
  .portfolio-overlay{background:linear-gradient(transparent,rgba(26,22,20,.9))}
  .portfolio-item.center-item{box-shadow:0 12px 40px rgba(0,0,0,.4)}
  .scroll-button{background:var(--dark-accent-secondary)}
  .scroll-button:hover{background:var(--dark-accent-primary)}

  .lightbox.active{background:rgba(26,22,20,.95)}
  .lightbox-nav button,.lightbox-close{background:var(--dark-card-bg);color:var(--dark-text-primary)}
  .lightbox-nav button:hover,.lightbox-close:hover{background:var(--dark-hover)}

  .luxury-button{
    background:linear-gradient(135deg,var(--dark-accent-secondary) 0%,var(--dark-accent-primary) 100%);
    box-shadow:0 8px 24px rgba(0,0,0,.35)
  }
  .luxury-button.pulse{animation:pulse-dark 2.2s infinite}
  .luxury-button:hover{background:linear-gradient(135deg,var(--dark-accent-primary) 0%,var(--dark-accent-secondary) 100%)}

  .slider-dot{background:rgba(196,181,165,.3)}
  .slider-dot.active{background:var(--dark-accent-primary)}
  .slider-arrow{background:rgba(196,181,165,.18);border-color:rgba(255,255,255,.15)}
  .slider-arrow:hover{background:rgba(196,181,165,.35)}

  .mobile-social-link{background:var(--dark-card-bg)}
  .mobile-social-link:hover{background:var(--dark-hover)}
  .mobile-social-link svg{color:var(--dark-accent-primary)}

  .mobile-contact-info{background:rgba(255,255,255,.04)}
  .contact-item{background:rgba(255,255,255,.05)}

  nav,footer{transition:all .3s ease}

  input,textarea,select{
    background-color:var(--dark-card-bg);
    color:var(--dark-text-primary);
    border-color:var(--dark-border)
  }
  input:focus,textarea:focus,select:focus{
    border-color:var(--dark-accent-primary);
    outline-color:var(--dark-accent-primary)
  }

  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:var(--dark-bg-primary)}
  ::-webkit-scrollbar-thumb{background:var(--dark-accent-secondary);border-radius:5px}
  ::-webkit-scrollbar-thumb:hover{background:var(--dark-accent-primary)}

  section#diensten{background:linear-gradient(135deg,#25211C 0%,#1c1916 100%) !important}
  .border-gray-200{border-color:var(--dark-border)}

  .barber-tab{color:var(--dark-text-secondary)}
  .barber-tab:hover{background:rgba(196,181,165,.08)}
  .barber-tab.active{color:var(--dark-accent-primary);background:rgba(196,181,165,.12);border-color:rgba(196,181,165,.2)}
  .barber-tab::after{background:var(--dark-accent-primary)}

  #bestsellers{background:#1d1813}
  .bs-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);box-shadow:none}
  .bs-card:hover{box-shadow:0 16px 48px rgba(0,0,0,.4)}
  .bs-img-wrap{background:rgba(255,255,255,.04)}
  .bs-img-placeholder{color:rgba(255,255,255,.12)}
  .bs-category{color:rgba(255,255,255,.4)}
  .bs-name{color:#fff}
  .bs-price{color:#f59e0b}
  .bs-price-original{color:rgba(255,255,255,.35)}
  .bs-price-sale{color:#f87171}
  .bs-section-label{background:rgba(245,158,11,.15);color:#f59e0b;border-color:rgba(245,158,11,.25)}

  .price-list img,#diensten img,footer img{filter:invert(1) brightness(2)}

  .bg-\[#F5F3F0\]{background:rgba(255,255,255,.06) !important;border-color:var(--dark-border)}
  #locatie .bg-\[#F5F3F0\]{background:rgba(255,255,255,.05) !important;border-left-color:var(--dark-accent-secondary) !important}

  .block.w-full.bg-black{background:var(--dark-accent-primary) !important;color:var(--dark-bg-primary) !important}
  .block.w-full.bg-white.border.border-black{
    background:rgba(255,255,255,.1) !important;
    border-color:var(--dark-border) !important;
    color:var(--dark-text-primary) !important
  }

  .appointment-modal{background:rgba(36,32,33,.96)}
  .appointment-header h2{color:var(--dark-accent-primary)}
  .appointment-close{color:var(--dark-accent-primary)}
}

/* ── Hero slider layout fix ── */
.hero-slider{
  position:relative;width:100%;
  aspect-ratio:16/9;min-height:500px;
  overflow:hidden;background-color:#000;
  display:block;contain:layout size
}

/* ── Team member layout ── */
.team-member{
  opacity:0;transform:translateY(20px);
  transition:all .6s cubic-bezier(.4,0,.2,1);
  width:calc(100% - 2rem);max-width:500px;
  contain:layout paint
}
.team-member.scroll-visible{opacity:1;transform:translateY(0)}

.team-member .aspect-square{
  width:100%;aspect-ratio:1/1;overflow:hidden;
  border-radius:.75rem .75rem 0 0;
  contain:layout size paint;display:block;position:relative
}
.team-member .aspect-square img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;display:block
}