:root{
    --ink:#0b0a08;
    --surface:#17130f;
    --surface-2:#1f1911;
    --line:rgba(201,151,79,.24);
    --line-strong:rgba(201,151,79,.4);
    --gold:#c9974f;
    --gold-bright:#e8c17f;
    --cream:#f2e9d8;
    --cream-dim:#a99c85;
    --red:#8f2c2e;
    --navy:#22395c;
    --shadow: 0 30px 60px -30px rgba(0,0,0,.7);
    --cursor-scissors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='20' height='20'%3E%3Cpath d='M256 192l-39.5-39.5c4.9-12.6 7.5-26.2 7.5-40.5C224 50.1 173.9 0 112 0S0 50.1 0 112s50.1 112 112 112c14.3 0 27.9-2.7 40.5-7.5L192 256l-39.5 39.5c-12.6-4.9-26.2-7.5-40.5-7.5C50.1 288 0 338.1 0 400s50.1 112 112 112s112-50.1 112-112c0-14.3-2.7-27.9-7.5-40.5L499.2 76.8c7.1-7.1 7.1-18.5 0-25.6c-28.3-28.3-74.1-28.3-102.4 0L256 192zm22.6 150.6L396.8 460.8c28.3 28.3 74.1 28.3 102.4 0c7.1-7.1 7.1-18.5 0-25.6L342.6 278.6l-64 64zM64 112a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm48 240a48 48 0 1 1 0 96 48 48 0 1 1 0-96z' fill='%23e8c17f' stroke='%230b0a08' stroke-width='14'/%3E%3C/svg%3E") 19 2, pointer;
    --cursor-scissors-closed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='20' height='20'%3E%3Cg fill='none' stroke='%230b0a08' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M12 6 L34 30'/%3E%3Cpath d='M18 3 L36 27'/%3E%3Cpath d='M35 29 L46 41'/%3E%3Cpath d='M35 29 L53 33'/%3E%3Ccircle cx='46' cy='41' r='8'/%3E%3Ccircle cx='53' cy='33' r='8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e8c17f' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 6 L34 30'/%3E%3Cpath d='M18 3 L36 27'/%3E%3Cpath d='M35 29 L46 41'/%3E%3Cpath d='M35 29 L53 33'/%3E%3Ccircle cx='46' cy='41' r='8'/%3E%3Ccircle cx='53' cy='33' r='8'/%3E%3C/g%3E%3Ccircle cx='35' cy='29' r='3' fill='%23e8c17f' stroke='%230b0a08' stroke-width='1.5'/%3E%3C/svg%3E") 5 1, pointer;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--ink);
    color:var(--cream);
    font-family:'Jost', 'Segoe UI', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    cursor:var(--cursor-scissors);
  }

  img{ display:block; max-width:100%; }

  h1,h2,h3{
    font-family:'Cinzel','Georgia',serif;
    font-weight:600;
    color:var(--cream);
    margin:0;
    text-wrap:balance;
  }

  p{ margin:0; }

  a{ color:inherit; }
  a, button, summary{ cursor:var(--cursor-scissors-closed); }

  .wrap{
    max-width:1140px;
    margin:0 auto;
    padding-inline:clamp(20px, 5vw, 56px);
  }

  .eyebrow{
    font-family:'Jost',sans-serif;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold);
  }

  /* ---------- Signature stripe divider (echoes the barber-pole crest) ---------- */
  .stripe{
    height:10px;
    background:repeating-linear-gradient(
      45deg,
      var(--cream) 0px, var(--cream) 14px,
      var(--red) 14px, var(--red) 28px,
      var(--navy) 28px, var(--navy) 42px
    );
    opacity:.9;
  }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed;
    inset:0 0 auto 0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px clamp(20px, 5vw, 56px);
    background:transparent;
    border-bottom:1px solid transparent;
    transition:background .35s ease, border-color .35s ease;
  }
  .nav.is-scrolled{
    background:rgba(11,10,8,.88);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
  }
  .nav-brand img{ height:34px; width:auto; }
  .nav-brand span{
    font-family:'Cinzel',serif;
    font-size:1rem;
    letter-spacing:.06em;
    color:var(--cream);
  }
  .nav-actions{ display:flex; align-items:center; gap:10px; }
  .icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    color:var(--gold-bright);
    text-decoration:none;
    transition:background .2s ease, transform .2s ease;
  }
  .icon-btn:hover{ background:var(--surface-2); transform:translateY(-1px); }
  .icon-btn svg{ width:16px; height:16px; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:min(94vh, 820px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
  }
  .hero video{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:-2;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(11,10,8,.55) 0%, rgba(11,10,8,.6) 40%, rgba(11,10,8,.92) 100%),
      radial-gradient(120% 90% at 50% 30%, rgba(11,10,8,.15), rgba(11,10,8,.75));
    z-index:-1;
  }
  .hero-inner{
    text-align:center;
    padding:140px 20px 64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
    animation:rise .9s ease both;
  }
  @media (prefers-reduced-motion: reduce){ .hero-inner{ animation:none; } }
  @keyframes rise{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .hero-crest{ width:min(150px, 34vw); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)); }
  .hero h1{
    font-size:clamp(1.7rem, 4vw, 2.6rem);
    letter-spacing:.03em;
  }
  .hero-tag{
    font-size:clamp(1rem, 2vw, 1.15rem);
    color:var(--cream-dim);
    max-width:34ch;
  }
  .badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--line-strong);
    padding:8px 18px;
    border-radius:999px;
    font-size:.78rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold-bright);
    background:rgba(201,151,79,.08);
  }
  .badge::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:var(--gold-bright);
  }

  .cta-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:6px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    border-radius:999px;
    font-family:'Jost',sans-serif;
    font-weight:500;
    font-size:.98rem;
    text-decoration:none;
    border:1px solid transparent;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn svg{ width:17px; height:17px; flex:none; }
  .btn-primary{
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    color:#211405;
    box-shadow:0 14px 30px -12px rgba(201,151,79,.55);
  }
  .btn-primary:hover{ box-shadow:0 18px 34px -12px rgba(201,151,79,.7); }
  .btn-ghost{
    background:transparent;
    border-color:var(--line-strong);
    color:var(--cream);
  }
  .btn-ghost:hover{ background:rgba(242,233,216,.06); border-color:var(--gold); }

  /* ---------- Sections ---------- */
  section{ padding:88px 0; }
  .section-head{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:44ch;
    margin-bottom:44px;
  }
  .section-head.center{ margin-inline:auto; text-align:center; align-items:center; }
  .section-head h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); }

  /* ---------- Intro / werkwijze ---------- */
  .intro{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .intro-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:56px;
    align-items:center;
  }
  .intro-quote{
    font-family:'Cinzel',serif;
    font-size:clamp(1.3rem, 2.4vw, 1.7rem);
    line-height:1.5;
    color:var(--gold-bright);
    text-wrap:balance;
  }
  .intro-body p{ color:var(--cream-dim); max-width:52ch; }
  .intro-body p + p{ margin-top:14px; }
  .intro-note{
    margin-top:24px;
    display:flex;
    gap:14px;
    padding:18px 20px;
    border:1px solid var(--line-strong);
    border-radius:12px;
    background:rgba(201,151,79,.06);
  }
  .intro-note svg{ width:22px; height:22px; flex:none; color:var(--gold); margin-top:2px; }
  .intro-note p{ font-size:.94rem; color:var(--cream-dim); }
  .intro-note strong{ color:var(--cream); }

  /* ---------- Diensten ---------- */
  .diensten-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:28px;
  }
  .dienst-card{
    padding:34px 26px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .dienst-card:hover{ border-color:var(--line-strong); background:var(--surface-2); transform:translateY(-4px); }
  .dienst-icon{
    width:60px; height:60px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 50% 35%, rgba(201,151,79,.16), transparent 70%);
  }
  .dienst-icon svg{ width:26px; height:26px; color:var(--gold-bright); }
  .dienst-card h3{ font-size:1.15rem; letter-spacing:.02em; }
  .dienst-card p{ color:var(--cream-dim); font-size:.95rem; }

  /* ---------- Sfeer / gallery ---------- */
  .gallery{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
  }
  .gallery a{
    display:block;
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:10px;
    border:1px solid var(--line);
  }
  .gallery img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .5s ease, filter .5s ease;
    filter:saturate(.92) contrast(1.02);
  }
  .gallery a:hover img{ transform:scale(1.06); filter:saturate(1.05) contrast(1.05); }
  .gallery a:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

  /* ---------- Lightbox ---------- */
  .lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:200;
    align-items:center;
    justify-content:center;
    padding:min(6vh, 56px) min(8vw, 88px);
    background:rgba(11,10,8,.93);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    animation:lightbox-fade .2s ease both;
  }
  .lightbox.is-open{ display:flex; }
  @media (prefers-reduced-motion: reduce){ .lightbox{ animation:none; } }
  @keyframes lightbox-fade{ from{ opacity:0; } to{ opacity:1; } }
  .lightbox-img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:6px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
    background:var(--surface);
  }
  .lightbox-nav[hidden]{ display:none; }
  .lightbox-close,
  .lightbox-nav{
    position:fixed;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:rgba(23,19,15,.7);
    color:var(--gold-bright);
    transition:background .2s ease, border-color .2s ease;
  }
  .lightbox-close svg,
  .lightbox-nav svg{ width:16px; height:16px; }
  .lightbox-close:hover,
  .lightbox-nav:hover{ background:var(--surface-2); border-color:var(--gold-bright); }
  .lightbox-close:focus-visible,
  .lightbox-nav:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
  .lightbox-close{ top:20px; right:20px; }
  .lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
  .lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
  @media (max-width: 640px){
    .lightbox{ padding:80px 16px; }
    .lightbox-close{ top:12px; right:12px; }
    .lightbox-prev{ left:12px; }
    .lightbox-next{ right:12px; }
  }

  /* ---------- Afspraak / contact ---------- */
  .afspraak{ background:var(--surface); border-top:1px solid var(--line); }
  .afspraak-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
  }
  .info-list{ display:flex; flex-direction:column; gap:22px; margin-top:22px; }
  .info-row{ display:flex; gap:14px; align-items:flex-start; }
  .info-row svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--gold); }
  .info-row div strong{ display:block; color:var(--cream); font-size:.95rem; margin-bottom:2px; }
  .info-row div span{ color:var(--cream-dim); font-size:.95rem; }
  .info-row a{ text-decoration:none; }
  .info-row a:hover{ color:var(--gold-bright); }
  .hours-list{ display:flex; flex-direction:column; gap:5px; margin-top:6px; font-variant-numeric:tabular-nums; }
  .hours-row{ display:flex; justify-content:space-between; gap:20px; max-width:280px; font-size:.95rem; }
  .hours-row span:first-child{ color:var(--cream-dim); }
  .hours-row span:last-child{ color:var(--cream); }
  .maps-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    font-size:.86rem;
    color:var(--gold-bright);
    text-decoration:none;
    border-bottom:1px solid var(--line-strong);
    padding-bottom:2px;
  }
  .maps-link:hover{ border-color:var(--gold-bright); }
  .maps-link svg{ width:11px; height:11px; }

  .contact-card{
    padding:36px 32px;
    border:1px solid var(--line-strong);
    border-radius:18px;
    background:linear-gradient(165deg, var(--surface-2), var(--surface));
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .contact-card h3{ font-size:1.3rem; }
  .contact-card p{ color:var(--cream-dim); font-size:.95rem; }
  .contact-card .btn{ width:100%; justify-content:center; }
  .contact-phone{
    text-align:center;
    font-family:'Cinzel',serif;
    font-size:1.15rem;
    letter-spacing:.05em;
    color:var(--gold-bright);
    text-decoration:none;
  }

  /* ---------- FAQ ---------- */
  .faq-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:740px;
    margin:0 auto;
  }
  .faq-item{
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    padding:2px 24px;
    transition:border-color .25s ease;
  }
  .faq-item:hover{ border-color:var(--line-strong); }
  .faq-item summary{
    list-style:none;
    padding:20px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-family:'Cinzel',serif;
    font-size:1rem;
    color:var(--cream);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+";
    flex:none;
    font-family:'Jost',sans-serif;
    font-size:1.4rem;
    line-height:1;
    color:var(--gold-bright);
    transition:transform .25s ease;
  }
  .faq-item[open] summary::after{ transform:rotate(45deg); }
  .faq-item summary:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:4px; border-radius:8px; }
  .faq-item p{
    margin-top:-6px;
    padding-bottom:22px;
    color:var(--cream-dim);
    font-size:.95rem;
    max-width:60ch;
  }

  /* ---------- Footer ---------- */
  footer{ padding:48px 0 36px; }
  .footer-grid{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    align-items:center;
    justify-content:space-between;
  }
  .footer-brand{ display:flex; align-items:center; gap:12px; }
  .footer-brand img{ height:38px; width:auto; }
  .footer-brand div{ font-family:'Cinzel',serif; font-size:.95rem; letter-spacing:.04em; }
  .footer-brand small{ display:block; font-family:'Jost',sans-serif; font-size:.78rem; letter-spacing:.02em; color:var(--cream-dim); margin-top:2px; }
  .footer-meta{ display:flex; gap:22px; flex-wrap:wrap; font-size:.85rem; color:var(--cream-dim); }
  .footer-meta a{ text-decoration:none; }
  .footer-meta a:hover{ color:var(--gold-bright); }
  .footer-copy{ margin-top:26px; font-size:.78rem; color:var(--cream-dim); text-align:center; }
  .footer-credit{ margin-top:8px; font-size:.72rem; color:var(--cream-dim); opacity:.65; text-align:center; }
  .footer-region-link{ margin-top:8px; text-align:center; }
  .footer-region-link a{ font-size:.72rem; color:var(--cream-dim); opacity:.65; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px; }
  .footer-region-link a:hover{ opacity:1; color:var(--gold-bright); }

  /* ---------- Location / region pages ---------- */
  .breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    font-size:.82rem;
    color:var(--cream-dim);
    margin-bottom:16px;
  }
  .breadcrumb a{ color:var(--cream-dim); text-decoration:none; }
  .breadcrumb a:hover{ color:var(--gold-bright); }
  .breadcrumb .sep{ opacity:.5; }
  .breadcrumb .current{ color:var(--gold-bright); }

  .page-hero{
    position:relative;
    padding:150px 0 76px;
    overflow:hidden;
    isolation:isolate;
    background-image:url('/assets/gallery-3.jpg');
    background-size:cover;
    background-position:center 30%;
  }
  .page-hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,10,8,.78) 0%, rgba(11,10,8,.85) 55%, rgba(11,10,8,.96) 100%);
    z-index:-1;
  }
  .page-hero .wrap{ max-width:760px; }
  .page-hero h1{ font-size:clamp(1.6rem, 3.6vw, 2.3rem); margin-top:8px; }
  .page-hero .lead{ color:var(--cream-dim); font-size:1.02rem; max-width:60ch; margin-top:14px; }
  .page-hero .cta-row{ justify-content:flex-start; margin-top:22px; }
  .page-hero .badge{ margin-top:18px; }

  .prose{ color:var(--cream-dim); max-width:68ch; }
  .prose + .prose{ margin-top:14px; }
  .content-block + .content-block{ margin-top:56px; }

  .pill-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
  .pill-link{
    display:inline-flex;
    align-items:center;
    padding:9px 18px;
    border-radius:999px;
    border:1px solid var(--line-strong);
    color:var(--cream);
    font-size:.86rem;
    text-decoration:none;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .pill-link:hover{ background:var(--surface-2); border-color:var(--gold-bright); color:var(--gold-bright); }

  .region-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
    gap:14px;
  }
  .region-grid a{
    display:block;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    text-decoration:none;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .region-grid a:hover{ border-color:var(--gold-bright); background:var(--surface-2); transform:translateY(-2px); }
  .region-grid a strong{ display:block; font-family:'Cinzel',serif; font-weight:600; font-size:1rem; color:var(--cream); }
  .region-grid a span{ display:block; margin-top:4px; font-size:.8rem; color:var(--cream-dim); }

  /* ---------- Responsive ---------- */
  @media (max-width: 880px){
    .intro-grid, .afspraak-grid{ grid-template-columns:1fr; gap:36px; }
    .gallery{ grid-template-columns:repeat(2, 1fr); }
    .nav-brand span{ display:none; }
  }
  @media (max-width: 520px){
    .diensten-grid{ grid-template-columns:1fr; }
    .gallery{ grid-template-columns:repeat(2, 1fr); }
    section{ padding:64px 0; }
    .cta-row{ flex-direction:column; align-items:stretch; }
    .cta-row .btn{ justify-content:center; }
  }