/* ==========================================================================
   BARBERSHOP MARVORA — design tokens
   Palet: diepe warme zwart/bruin basis + brass-goud accent + rust-rood accent
   ========================================================================== */
   :root{
    --bg:            #15130F;
    --bg-elevated:   #1E1B15;
    --bg-elevated-2: #262119;
    --cream:         #F4EEE2;
    --muted:         #B6AC98;
    --muted-2:       #8A8172;
  
    --gold:          #C89A3E;
    --gold-light:    #E4BE6E;
    --gold-dark:     #8C6C28;
  
    --rust:          #B14732;
    --rust-light:    #D06246;
    --rust-dark:     #7C2F1F;
  
    --line:          rgba(244,238,226,0.12);
    --line-strong:   rgba(244,238,226,0.22);
  
    --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  
    --container: 1160px;
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 24px;
  
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  
    /* Hero-fotopositionering: zoom > 1 geeft ruimte om te verschuiven.
       --hero-img-shift: negatief = toont meer van de ONDERKANT van de foto,
       positief = toont meer van de BOVENKANT. 0 = gecentreerd. */
    --hero-img-zoom: 1.4;
    --hero-img-shift: -12%;
  }
  
  *, *::before, *::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: hidden; }
  
  body{
    margin: 0;
    background: var(--bg);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100%;
  }
  
  img{ max-width: 100%; display: block; }
  a{ color: inherit; text-decoration: none; }
  ul{ list-style: none; margin: 0; padding: 0; }
  h1,h2,h3,h4{ font-family: var(--font-display); letter-spacing: 0.01em; font-weight: 400; margin: 0; }
  
  .sr-only{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  
  .skip-link{
    position: absolute; left: -999px; top: 0; z-index: 999;
    background: var(--gold); color: var(--bg); padding: 10px 16px; border-radius: 0 0 8px 0;
  }
  .skip-link:focus{ left: 0; }
  
  :focus-visible{ outline: 2px solid var(--gold-light); outline-offset: 3px; }
  
  .section-inner{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .eyebrow{
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin: 0 0 10px;
  }
  .eyebrow-light{ color: var(--gold-light); }
  
  .section-head{ max-width: 640px; margin: 0 0 36px; }
  .section-head h2{ font-size: clamp(28px, 6vw, 42px); margin-bottom: 12px; }
  .section-lead{ color: var(--muted); font-size: 16px; max-width: 52ch; }
  .section-lead.light{ color: rgba(244,238,226,0.75); }
  
  .section{ padding: 72px 0; position: relative; }
  
  /* ==========================================================================
     BUTTONS
     ========================================================================== */
  .btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    padding: 13px 24px; border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
    cursor: pointer; white-space: nowrap;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn:active{ transform: translateY(0); }
  
  .btn-gold{ background: var(--gold); color: #211705; }
  .btn-gold:hover{ background: var(--gold-light); }
  
  .btn-rust{ background: var(--rust); color: var(--cream); }
  .btn-rust:hover{ background: var(--rust-light); }
  
  .btn-outline{ border-color: rgba(244,238,226,0.4); color: var(--cream); }
  .btn-outline:hover{ border-color: var(--cream); background: rgba(244,238,226,0.06); }
  
  .btn-outline-light{ border-color: rgba(244,238,226,0.35); color: var(--cream); background: transparent; }
  .btn-outline-light:hover{ background: rgba(244,238,226,0.08); }
  
  .btn-lg{ padding: 15px 30px; font-size: 16px; }
  .btn-block{ width: 100%; }
  
  /* ==========================================================================
     HEADER / NAV
     ========================================================================== */
  .site-header{
    position: fixed; top: 0; left: 0; right: 0; z-index: 500;
    background: transparent;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
    border-bottom: 1px solid transparent;
  }
  .site-header.scrolled{
    background: rgba(21,19,15,0.92);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--line);
  }
  .header-inner{
    max-width: var(--container); margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
  }
  .logo img{ height: 48px; width: auto; }
  
  .main-nav ul{ display: flex; gap: 28px; }
  .nav-link{
    font-size: 14px; font-weight: 500; color: var(--muted);
    position: relative; padding: 4px 0;
    transition: color 0.2s var(--ease);
  }
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background: var(--gold); transition: width 0.25s var(--ease);
  }
  .nav-link:hover, .nav-link.active{ color: var(--cream); }
  .nav-link:hover::after, .nav-link.active::after{ width: 100%; }
  
  .nav-cta{ padding: 10px 20px; font-size: 14px; }
  
  .hamburger{
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; background: transparent; border: none; cursor: pointer;
    padding: 0;
  }
  .hamburger span{
    display: block; width: 22px; height: 2px; background: var(--cream);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    margin: 0 auto;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  
  .mobile-menu{
    position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 84vw);
    background: var(--bg-elevated); border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform 0.35s var(--ease);
    z-index: 499; padding: 90px 28px 28px; display: flex; flex-direction: column; gap: 28px;
  }
  .mobile-menu.open{ transform: translateX(0); }
  .mobile-menu ul{ display: flex; flex-direction: column; gap: 6px; }
  .mobile-nav-link{ display: block; font-family: var(--font-display); font-size: 26px; padding: 10px 0; letter-spacing: 0.02em; color: var(--cream); border-bottom: 1px solid var(--line); }
  .mobile-menu-cta{ width: 100%; text-align: center; }
  .mobile-menu-info p{ margin: 0 0 8px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  
  .menu-backdrop{
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease); z-index: 498;
  }
  .menu-backdrop.open{ opacity: 1; pointer-events: auto; }
  
  /* ==========================================================================
     HERO
     ========================================================================== */
  .hero{
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 120px 20px 80px; overflow: hidden;
  }
  .hero-bg{ position: absolute; inset: 0; z-index: 0; }
  .hero-img{
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(var(--hero-img-zoom)) translateY(var(--hero-img-shift));
    transform-origin: center;
  }
  .hero-overlay{
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(21,19,15,0.55) 0%, rgba(21,19,15,0.75) 55%, rgba(21,19,15,0.96) 100%);
  }
  .hero-stripe{
    position: absolute; top: 0; right: -10%; width: 45%; height: 100%;
    background: linear-gradient(180deg, transparent, var(--gold) 45%, var(--rust) 100%);
    opacity: 0.06; transform: skewX(-12deg); z-index: 1;
  }
  
  .hero-content{ position: relative; z-index: 2; max-width: 720px; }
  .hero-content .eyebrow{ justify-content: center; display: flex; align-items: center; }
  .hero-content h1{
    font-size: clamp(44px, 11vw, 88px); line-height: 0.98; color: var(--cream);
    margin: 4px 0 18px; text-transform: uppercase;
  }
  .accent-text{ color: var(--gold); }
  .hero-sub{ font-size: 18px; color: var(--muted); max-width: 46ch; margin: 0 auto 30px; }
  .hero-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
  .hero-meta{ font-size: 13px; color: var(--muted-2); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .hero-meta-item{ display: inline-flex; align-items: center; gap: 6px; }
  .hero-meta-dot{ opacity: 0.5; }
  .hero-status.is-open{ color: var(--gold-light); font-weight: 600; transition: color 0.2s var(--ease); }
  .hero-status.is-open:hover{ color: var(--gold); }
  .hero-status .icon{ width: 14px; height: 14px; }
  
  .scroll-indicator{
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 26px; height: 42px; border: 1.5px solid rgba(244,238,226,0.4); border-radius: 20px;
  }
  .scroll-indicator span{
    position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px;
    background: var(--gold); border-radius: 2px; animation: scrollDot 1.8s infinite;
  }
  @keyframes scrollDot{ 0%{ opacity:1; transform: translateY(0);} 70%{opacity:0; transform: translateY(14px);} 100%{opacity:0;} }
  
  /* ==========================================================================
     REVEAL ANIMATIONS
     ========================================================================== */
  .reveal{ opacity: 0; will-change: transform, opacity; }
  .reveal[data-reveal="fade"]{ transition: opacity 0.7s var(--ease); }
  .reveal[data-reveal="fade-up"]{ transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal[data-reveal="slide-left"]{ transform: translateX(-36px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal[data-reveal="slide-right"]{ transform: translateX(36px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal[data-reveal="zoom"]{ transform: scale(0.92); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .reveal[data-reveal="stagger-up"]{ transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  
  .reveal.is-visible{ opacity: 1; transform: none; }
  
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
    .scroll-indicator span{ animation: none; }
  }
  
  /* ==========================================================================
     OVER MARVORA
     ========================================================================== */
  .over{ background: var(--bg); }
  .over-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .over-media{ position: relative; }
  .over-media img{ border-radius: var(--radius-md); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
  .over-media-badge{
    position: absolute; bottom: -18px; left: -18px;
    background: var(--gold); color: #211705; border-radius: var(--radius-sm);
    padding: 14px 18px; text-align: center; line-height: 1;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  }
  .over-media-badge strong{ display: block; font-family: var(--font-display); font-size: 30px; }
  .over-media-badge span{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  
  .over-text h2{ font-size: clamp(28px, 5vw, 40px); color: var(--cream); margin-bottom: 16px; }
  .over-text p{ color: var(--muted); max-width: 54ch; }
  
  .feature-list{ margin: 22px 0 26px; display: flex; flex-direction: column; gap: 11px; }
  .feature-list li{ display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--cream); }
  .feature-list i{ color: var(--gold); flex-shrink: 0; margin-top: 3px; }
  
  /* ==========================================================================
     DIENSTEN
     ========================================================================== */
  .diensten{ background: var(--bg-elevated); }
  .service-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (min-width: 1100px){
    .service-grid{ grid-template-columns: repeat(4, 1fr); }
  }
  .service-card{
    background: var(--bg-elevated-2); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 26px 24px; display: flex; flex-direction: column;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .service-card:hover{ border-color: var(--gold-dark); transform: translateY(-4px); }
  .service-card-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .service-icon{
    width: 44px; height: 44px; border-radius: 10px; background: rgba(200,154,62,0.14);
    color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-size: 20px;
  }
  .service-price{ font-family: var(--font-display); font-size: 24px; color: var(--gold); }
  .service-card h3{ font-size: 20px; color: var(--cream); font-family: var(--font-body); font-weight: 600; margin-bottom: 8px; }
  .service-card p{ color: var(--muted); font-size: 14px; margin: 0 0 18px; flex-grow: 1; }
  .service-link{
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
    color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .service-link i{ transition: transform 0.2s var(--ease); }
  .service-link:hover i{ transform: translateX(3px); }
  
  /* ==========================================================================
     GALERIJ
     ========================================================================== */
  .galerij{ background: var(--bg); padding-bottom: 0; }
  
  .filter-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .filter-chip{
    font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--muted);
    background: transparent; border: 1px solid var(--line-strong); border-radius: 30px;
    padding: 8px 16px; cursor: pointer; transition: all 0.2s var(--ease);
  }
  .filter-chip:hover{ color: var(--cream); border-color: var(--gold-dark); }
  .filter-chip.is-active{ background: var(--gold); color: #211705; border-color: var(--gold); }
  
  .gallery-grid{
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 6px;
    max-width: var(--container); margin: 24px auto 0; padding: 0 20px 72px;
  }
  .gallery-item{
    aspect-ratio: auto; overflow: hidden; border-radius: var(--radius-sm); position: relative;
    border: 0; padding: 0; cursor: pointer; grid-column: span 1; grid-row: span 1;
    opacity: 1; transform: scale(1);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  }
  .gallery-item.item-transition{ opacity: 0; transform: scale(0.88); }
  .gallery-item-wide{ grid-column: span 2; }
  .gallery-item-tall{ grid-row: span 2; }
  .gallery-item.is-hidden{ display: none; }
  .gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); display: block; }
  .gallery-item:hover img{ transform: scale(1.08); }
  .gallery-item::after{
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
    opacity: 0; transition: opacity 0.25s var(--ease);
  }
  .gallery-item:hover::after{ opacity: 1; }
  
  .gallery-cta{
    background: var(--bg-elevated-2); display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); cursor: default;
  }
  .gallery-cta a{ text-align: center; color: var(--gold-light); font-size: 12px; font-weight: 600; }
  .gallery-cta .icon{ margin: 0 auto 8px; display: block; }
  
  /* ---- Lightbox ---- */
  .lightbox{
    position: fixed; inset: 0; z-index: 800; background: rgba(10,9,7,0.94);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
    padding: 60px 20px;
  }
  .lightbox.is-open{ opacity: 1; pointer-events: auto; }
  .lightbox-figure{ max-width: 900px; max-height: 80vh; margin: 0; text-align: center; }
  .lightbox-figure img{ max-width: 100%; max-height: 72vh; border-radius: var(--radius-sm); margin: 0 auto; }
  .lightbox-figure figcaption{ color: var(--muted); font-size: 14px; margin-top: 14px; }
  .lightbox-close{
    position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(244,238,226,0.08); border: 1px solid var(--line-strong); color: var(--cream);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .lightbox-nav{
    position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
    background: rgba(244,238,226,0.08); border: 1px solid var(--line-strong); color: var(--cream);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .lightbox-prev{ left: 16px; }
  .lightbox-next{ right: 16px; }
  .lightbox-nav:hover, .lightbox-close:hover{ border-color: var(--gold); color: var(--gold-light); }
  
  /* ==========================================================================
     VOLG ONS
     ========================================================================== */
  .volgons{ background: var(--bg-elevated); }
  .follow-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .follow-card{
    display: block; background: var(--bg-elevated-2); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 24px; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .follow-card:hover{ border-color: var(--gold-dark); transform: translateY(-4px); }
  .follow-card-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .follow-card-head .icon{ width: 30px; height: 30px; color: var(--gold-light); }
  .follow-card-head strong{ display: block; font-size: 16px; color: var(--cream); }
  .follow-card-head span{ font-size: 13px; color: var(--muted); }
  .follow-thumbs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
  .follow-thumbs img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
  .follow-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; text-align: center; }
  .follow-stats div{ background: var(--bg-elevated); border-radius: 8px; padding: 12px 6px; }
  .follow-stats strong{ display: block; font-family: var(--font-display); font-size: 20px; color: var(--gold); }
  .follow-stats span{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .follow-cta{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gold-light); }
  .follow-cta .icon{ transition: transform 0.2s var(--ease); }
  .follow-card:hover .follow-cta .icon{ transform: translateX(3px); }
  
  /* ---- Compacte volg-kaarten + TikTok video-strook ---- */
  .follow-grid-compact{ grid-template-columns: 1fr 1fr; margin-bottom: 28px; }
  .follow-mini{
    display: flex; align-items: center; gap: 12px; background: var(--bg-elevated-2);
    border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .follow-mini:hover{ border-color: var(--gold-dark); transform: translateY(-2px); }
  .follow-mini > .icon:first-child{ width: 24px; height: 24px; color: var(--gold-light); flex-shrink: 0; }
  .follow-mini span{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .follow-mini strong{ font-size: 14px; color: var(--cream); font-weight: 600; }
  .follow-mini em{ font-size: 12px; color: var(--muted); font-style: normal; }
  .follow-mini-arrow{ color: var(--muted-2); flex-shrink: 0; transition: transform 0.2s var(--ease); }
  .follow-mini:hover .follow-mini-arrow{ transform: translateX(3px); color: var(--gold-light); }
  
  /* ==========================================================================
     WERKGEBIED
     ========================================================================== */
  .werkgebied{ background: var(--bg-elevated); }
  .chip-row{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
  .chip{
    font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: 30px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .chip-main, .chip.is-active{ background: var(--gold); color: #211705; border-color: var(--gold); font-weight: 700; }
  .chip:hover:not(.is-active){ border-color: var(--gold); color: var(--cream); }
  
  .map-embed{ border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); height: 320px; }
  .map-embed iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
  
  .town-panel{
    background: var(--bg-elevated-2); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 20px 24px; margin-bottom: 24px; min-height: 24px;
  }
  .town-panel p{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
  .town-panel p[hidden]{ display: none; }
  
  /* ==========================================================================
     FAQ
     ========================================================================== */
  .faq{ background: var(--bg); }
  .faq-list{ display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
  .faq-item{
    background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 4px 22px; transition: border-color 0.2s var(--ease);
  }
  .faq-item[open]{ border-color: var(--gold-dark); }
  .faq-item summary{
    list-style: none; cursor: pointer; padding: 18px 0; font-size: 16px; font-weight: 500; color: var(--cream);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .faq-item summary::-webkit-details-marker{ display: none; }
  .faq-caret{ color: var(--gold); transform: rotate(90deg); transition: transform 0.25s var(--ease); flex-shrink: 0; }
  .faq-item[open] .faq-caret{ transform: rotate(-90deg); }
  .faq-item p{ margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
  
  /* ==========================================================================
     BOEKEN / FRESHA
     ========================================================================== */
  .boeken{ background: linear-gradient(160deg, var(--rust-dark) 0%, #2b1810 55%, var(--bg) 100%); }
  .booking-cta{
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center; max-width: 480px; margin: 0 auto;
  }
  .booking-cta .btn{ width: 100%; }
  .booking-note{ font-size: 12px; color: rgba(244,238,226,0.6); margin: 0; }
  
  /* ==========================================================================
     FOOTER
     ========================================================================== */
  .site-footer{ background: var(--bg); padding: 64px 0 0; border-top: 1px solid var(--line); }
  .footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
  .footer-logo{ height: 56px; width: auto; margin-bottom: 16px; }
  .footer-col p{ color: var(--muted); font-size: 14px; margin: 0 0 14px; }
  .footer-col h4{ font-family: var(--font-body); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-light); margin-bottom: 18px; }
  .footer-col a{ transition: color 0.2s var(--ease); }
  .footer-col a:hover{ color: var(--gold-light); }
  .footer-col p a{ display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
  .footer-link{ display: inline-flex; align-items: center; gap: 6px; color: var(--gold-light); font-size: 13px; font-weight: 600; margin-top: 4px; }
  
  .social-row{ display: flex; gap: 12px; }
  .social-row a{
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .social-row a:hover{ border-color: var(--gold); color: var(--gold-light); }
  
  .hours-list{ display: flex; flex-direction: column; gap: 9px; }
  .hours-list li{ display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); padding-bottom: 9px; border-bottom: 1px solid var(--line); }
  .hours-list li span:first-child{ color: var(--cream); font-weight: 500; }
  .hours-list li.today{ color: var(--gold-light); }
  .hours-list li.today span:first-child{ color: var(--gold-light); }
  
  .footer-bottom{
    border-top: 1px solid var(--line); padding: 20px; display: flex; justify-content: space-between;
    max-width: var(--container); margin: 0 auto; font-size: 12px; color: var(--muted-2); flex-wrap: wrap; gap: 8px;
  }
  
  /* ==========================================================================
     STICKY MOBILE CTA
     ========================================================================== */
  .mobile-cta-bar{
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
    background: rgba(21,19,15,0.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px; align-items: center;
  }
  .mobile-cta-secondary{
    width: 46px; height: 46px; border-radius: var(--radius-sm); flex-shrink: 0;
    border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 19px;
  }
  .mobile-cta-primary{ flex: 1; text-align: center; }
  
  /* ==========================================================================
     ICONS — SVG-sprite lijnicons (professioneel, geen emoji)
     ========================================================================== */
  .icon{
    width: 1em; height: 1em;
    display: inline-block; vertical-align: -0.14em;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }
  .service-icon .icon{ width: 22px; height: 22px; }
  .social-row .icon{ width: 17px; height: 17px; }
  .gallery-cta .icon{ width: 26px; height: 26px; margin-bottom: 8px; }
  .feature-list .icon{ width: 16px; height: 16px; }
  .mobile-cta-secondary .icon{ width: 20px; height: 20px; }
  .follow-card .icon{ width: 26px; height: 26px; }
  .lightbox-close .icon, .lightbox-nav .icon{ width: 22px; height: 22px; stroke-width: 2; }
  
  /* ==========================================================================
     RESPONSIVE
     ========================================================================== */
  @media (max-width: 900px){
    .main-nav, .nav-cta{ display: none; }
    .hamburger{ display: flex; }
  
    .over-grid{ grid-template-columns: 1fr; gap: 40px; }
    .over-media{ order: -1; }
  
    .service-grid{ grid-template-columns: repeat(2, 1fr); }
  
    .gallery-grid{ grid-template-columns: repeat(3, 1fr); grid-auto-rows: 140px; }
    .follow-grid{ grid-template-columns: 1fr; }
  
    .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  
    .mobile-cta-bar{ display: flex; }
    body{ padding-bottom: 74px; }
  }
  
  @media (max-width: 560px){
    :root{
      /* Losse hero-fotopositie voor telefoonschermen — pas hier los aan */
      --hero-img-zoom: 1.55;
      --hero-img-shift: -20%;
    }
    .section{ padding: 56px 0; }
    .service-grid{ grid-template-columns: 1fr; }
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .gallery-item-wide{ grid-column: span 2; }
    .gallery-item-tall{ grid-row: span 1; }
    .hero-content h1{ font-size: clamp(38px, 13vw, 56px); }
    .over-media-badge{ left: 0; bottom: -14px; padding: 10px 14px; }
    .over-media-badge strong{ font-size: 24px; }
    .lightbox-nav{ width: 40px; height: 40px; }
    .lightbox-prev{ left: 6px; }
    .lightbox-next{ right: 6px; }
  }
  
  @media (max-width: 420px){
    .hero-actions{ flex-direction: column; width: 100%; }
    .hero-actions .btn{ width: 100%; }
    .hero-meta{ flex-direction: column; gap: 6px; }
    .hero-meta-dot{ display: none; }
  }
  
  @media (max-width: 480px){
    .follow-grid-compact{ grid-template-columns: 1fr; }
  }