/* ==========================================================================
   The Barber House
   Ontworpen vanuit het interieur zelf: zwart, warm goud, de hexagon-LED aan
   het plafond en de verticale lamellen aan de wand. Alles beweegt, niets is
   een stilstaand kaartje.
   ========================================================================== */

:root{
  --ink:      #08080a;
  --ink-1:    #0d0d10;
  --ink-2:    #131317;
  --ink-3:    #1a1a20;
  --line:     #26262f;
  --line-2:   #33333d;

  --gold:     #c8a24a;
  --gold-lt:  #f2d68c;
  --gold-hi:  #fff3d2;
  --gold-dk:  #7e6222;

  --fg:       #e9e9ee;
  --fg-2:     #b6b6c2;
  --muted:    #7c7c89;

  --ok:       #4ec97f;
  --warn:     #e0a33c;
  --bad:      #e2564f;

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans:  "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

  --wrap: 1220px;
  --r:    14px;
  --r-sm: 9px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.06;font-weight:500}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink-1)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:3px solid var(--ink-1)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dk)}

/* Meeschalende marge: op een breed scherm blijft de inhoud van de rand af in
   plaats van er tegenaan te plakken, op een telefoon blijft het krap. */
.wrap{width:min(100% - clamp(32px,6.5vw,132px),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink);padding:12px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Filmisch korrelfilter: haalt de digitale platheid uit de zwarte vlakken.
   Bewust NIET geanimeerd. Een bewegende laag over het volledige scherm laat
   de compositor elke frame alles opnieuw samenstellen, en dat kostte de
   marquee zijn vloeiendheid. Statisch ziet er op .035 identiek uit. */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =======================================================================
   Herbruikbare bewegingen
   ======================================================================= */

/* Goudlicht dat over een oppervlak veegt. Loopt vanzelf en versnelt bij hover. */
@keyframes sweep{ 0%{transform:translateX(-140%) skewX(-18deg)} 100%{transform:translateX(340%) skewX(-18deg)} }
.sheen{position:relative;overflow:hidden;isolation:isolate}
.sheen::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:38%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,205,.16) 45%,rgba(255,240,205,.34) 50%,transparent);
  animation:sweep 5.5s var(--ease) infinite;animation-delay:var(--sd,0s);
}
.sheen:hover::after{animation-duration:1.15s}

/* Hexagon-LED ademhaling, precies het plafond van de zaak. */
@keyframes breathe{
  0%,100%{opacity:.32;filter:drop-shadow(0 0 3px rgba(255,244,220,.28))}
  50%    {opacity:.95;filter:drop-shadow(0 0 14px rgba(255,244,220,.7))}
}
@keyframes flicker{
  0%,19%,21%,23%,80%,100%{opacity:.95} 20%,22%{opacity:.42}
}
@keyframes drift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@keyframes rise{  from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(78,201,127,.5)} 70%{box-shadow:0 0 0 11px rgba(78,201,127,0)} 100%{box-shadow:0 0 0 0 rgba(78,201,127,0)} }
@keyframes spinSlow{ to{transform:rotate(360deg)} }

/* Scroll-onthulling. Stagger via --i. */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.rv-l.in{opacity:1;transform:none}

/* Regel voor regel oplichtende titel. */
.reveal-line{display:block;overflow:hidden}
.reveal-line > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
.in .reveal-line > span,.reveal-line.in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv,.rv-l{opacity:1;transform:none}
  .reveal-line > span{transform:none}
}

/* =======================================================================
   Typografie
   ======================================================================= */
.display{
  font-family:var(--serif);font-weight:500;letter-spacing:-.018em;line-height:.98;
  font-size:clamp(2.9rem,7.2vw,6.2rem);
}
.display em{font-style:italic;font-weight:400;color:var(--gold-lt)}
.h2{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.5rem);font-weight:500;letter-spacing:-.012em}
.h3{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:500}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.685rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  margin:0 0 20px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow.c::after{content:"";width:34px;height:1px;background:linear-gradient(270deg,transparent,var(--gold))}
.lead{font-size:clamp(1.03rem,1.5vw,1.2rem);color:var(--fg-2);max-width:56ch}
.muted{color:var(--muted)}
.gold{color:var(--gold-lt)}

/* =======================================================================
   Knoppen
   ======================================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:.855rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .32s var(--spring),box-shadow .32s var(--ease),border-color .32s var(--ease),color .32s var(--ease);
}
.btn.sm{padding:11px 20px;font-size:.75rem}
.btn.lg{padding:18px 38px;font-size:.9rem}
.btn:active{transform:translateY(1px) scale(.985)}

.btn-gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 46%,var(--gold-dk));color:#150f02;box-shadow:0 8px 26px -12px rgba(200,162,74,.75)}
.btn-gold::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-lt) 50%,var(--gold));
  transition:opacity .35s var(--ease);
}
.btn-gold::after{
  content:"";position:absolute;top:-70%;bottom:-70%;left:-45%;width:34%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-18deg);transition:left .62s var(--ease);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px -14px rgba(200,162,74,.95)}
.btn-gold:hover::before{opacity:1}
.btn-gold:hover::after{left:135%}

.btn-ghost{border-color:var(--line-2);color:var(--fg);background:rgba(255,255,255,.014);backdrop-filter:blur(6px)}
.btn-ghost::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(.9);
  background:radial-gradient(120% 160% at 50% 120%,rgba(200,162,74,.28),transparent 70%);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-lt);transform:translateY(-3px)}
.btn-ghost:hover::after{opacity:1;transform:scale(1)}

.btn-line{padding:0;border:0;border-radius:0;background:none;color:var(--gold-lt);text-transform:none;letter-spacing:.01em;font-size:.95rem}
.btn-line span{position:relative;padding-bottom:3px}
.btn-line span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn-line:hover span::after{transform:scaleX(1)}
.btn-line .arw{display:inline-block;transition:transform .4s var(--spring)}
.btn-line:hover .arw{transform:translateX(6px)}

.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}

/* =======================================================================
   Navigatie
   ======================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px 0;
  transition:padding .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.nav.stuck{padding:11px 0;background:rgba(8,8,10,.86);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--line)}
.nav.hide{transform:translateY(-102%);transition:transform .5s var(--ease)}
.nav-in{display:flex;align-items:center;gap:26px}

.mark{display:flex;align-items:center;gap:13px;margin-right:auto}
/* Het echte AC-monogram. Draait zachtjes mee en licht op bij hover. */
.mark-ac{
  width:40px;height:auto;flex:none;
  filter:drop-shadow(0 0 0 rgba(200,162,74,0));
  transition:transform .8s var(--spring),filter .6s var(--ease);
}
.mark:hover .mark-ac{transform:rotate(-8deg) scale(1.07);filter:drop-shadow(0 0 14px rgba(200,162,74,.6))}
.nav.stuck .mark-ac{width:34px}
.mark-ac,.foot-wordmark{transition-property:transform,filter,width}
.foot-wordmark{width:min(240px,72%);height:auto;margin-bottom:20px;filter:drop-shadow(0 4px 18px rgba(200,162,74,.16))}
.mark-tx{display:flex;flex-direction:column;line-height:1.12}
.mark-tx b{font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:.03em}
.mark-tx i{font-style:normal;font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;color:var(--muted)}

.nav-links{display:flex;gap:6px}
.nav-links a{
  position:relative;padding:9px 15px;border-radius:7px;
  font-size:.815rem;font-weight:500;letter-spacing:.045em;text-transform:uppercase;color:var(--fg-2);
  transition:color .3s var(--ease);
}
.nav-links a::before{
  content:"";position:absolute;inset:0;border-radius:7px;background:rgba(200,162,74,.09);
  transform:scale(.82);opacity:0;transition:transform .38s var(--spring),opacity .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);
}
.nav-links a:hover,.nav-links a.on{color:var(--gold-lt)}
.nav-links a:hover::before{transform:scale(1);opacity:1}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-act{display:flex;gap:10px}

.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line-2);border-radius:9px;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{
  position:absolute;left:50%;width:19px;height:1.5px;background:var(--fg);
  transition:transform .42s var(--spring),opacity .25s;
}
.burger span{top:50%;transform:translate(-50%,-50%)}
.burger span::before,.burger span::after{content:"";left:0;transform-origin:center}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);background:var(--gold)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);background:var(--gold)}

/* Let op: het hidden-attribuut wint het niet van een class-regel, dus nooit
   zomaar .mob{display:flex} zetten. Anders staat het paneel altijd open en
   legt het als zwart blok over de hero. */
.mob{display:none;flex-direction:column;background:rgba(8,8,10,.97);backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:10px 20px 24px;max-height:calc(100svh - 74px);overflow-y:auto;overscroll-behavior:contain}
.mob[hidden]{display:none!important}
.mob a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:1.05rem;opacity:0;transform:translateX(-16px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .25s}
.mob a:hover{color:var(--gold-lt)}
.mob.open a{opacity:1;transform:none}
.mob.open a:nth-child(1){transition-delay:.05s} .mob.open a:nth-child(2){transition-delay:.1s}
.mob.open a:nth-child(3){transition-delay:.15s} .mob.open a:nth-child(4){transition-delay:.2s}
.mob.open a:nth-child(5){transition-delay:.25s} .mob.open a:nth-child(6){transition-delay:.3s}
.mob.open a:nth-child(7){transition-delay:.35s}
.mob-call{color:var(--gold-lt);font-weight:600;border-bottom:0!important}

/* =======================================================================
   Hero
   ======================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:150px 0 0}
.hero-bg{position:absolute;inset:-6% 0 -12%;z-index:0;will-change:transform}
.hero-bg img,.hero-bg video{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
  filter:saturate(.88) contrast(1.1) brightness(.78);
  transform:scale(1.05);animation:heroIn 2.6s var(--ease) both;
}
/* De video krijgt een eigen laag zodat het schilderen ervan de rest van de
   pagina niet meesleept tijdens het scrollen. */
.hero-video{will-change:transform;backface-visibility:hidden}
@keyframes heroIn{from{transform:scale(1.16);opacity:0;filter:saturate(.5) brightness(.3)}
                  to{transform:scale(1.05);opacity:1;filter:saturate(.88) contrast(1.1) brightness(.78)}}

/* Donkere waas over de foto: het plafondlicht blijft leesbaar, de tekst wint. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.3) 26%,rgba(8,8,10,.58) 58%,rgba(8,8,10,.93) 84%,var(--ink) 100%),
    linear-gradient(95deg,rgba(8,8,10,.82) 0%,rgba(8,8,10,.44) 46%,transparent 76%);
}
/* Het echte LED-plafond zit in de foto. Hier ligt alleen een warme puls overheen. */
.hero-glow{
  position:absolute;top:-12%;left:50%;transform:translateX(-50%);
  width:120%;height:62%;z-index:1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 24%,rgba(255,248,226,.16),rgba(200,162,74,.07) 46%,transparent 72%);
  animation:breathe 7.5s ease-in-out infinite;
}
/* Het heroblok krijgt bovenop de wrap-marge aan BEIDE kanten extra lucht,
   zodat noch het merk links noch de cijferkolom rechts de schermrand raakt. */
.hero-in{position:relative;z-index:3;padding-bottom:76px;padding-inline:clamp(0px,2.6vw,58px);width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(28px,4vw,64px);align-items:end}

.hero h1{margin:0 0 26px}
.hero h1 .l1{color:var(--fg)}
.hero h1 .l2{color:var(--gold-lt);font-style:italic;font-weight:400}
.hero-sub{font-size:clamp(1.02rem,1.6vw,1.24rem);color:var(--fg-2);max-width:44ch;margin:0 0 34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;align-items:center}

/* Live status, met kloppend hart als de zaak open is. */
.status{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;letter-spacing:.05em;color:var(--muted);margin:0}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--bad);flex:none}
.status.is-open{color:var(--fg-2)}
.status.is-open .dot{background:var(--ok);animation:pulse 2.1s infinite}
.status i{font-style:normal;color:var(--muted)}

/* Zijkolom met de kerncijfers. De labels mogen nooit buiten de kolom vallen,
   dus de letterafstand krimpt mee met het scherm. */
.hero-stats{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line-2);padding-left:clamp(18px,2vw,26px);min-width:0}
.hero-stats div{padding:11px 0;min-width:0}
.hero-stats b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.4vw,2.1rem);font-weight:500;color:var(--gold-lt);line-height:1}
.hero-stats span{
  display:block;font-size:.66rem;letter-spacing:clamp(.1em,.6vw,.24em);
  text-transform:uppercase;color:var(--muted);line-height:1.45;
  overflow-wrap:anywhere;
}

/* Doorlopende band onderaan de hero.
   Geen backdrop-filter hier: dat dwingt de browser om elke frame het hele
   gebied opnieuw te filteren terwijl de tekst eronder beweegt, en dat is
   precies waar de haperingen vandaan kwamen. Vlakke achtergrond, en de rij
   krijgt een eigen compositorlaag. */
.ticker{position:relative;z-index:3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b0b0e;overflow:hidden;padding:15px 0}
.ticker-tr{
  display:flex;width:max-content;
  animation:drift 42s linear infinite;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;
}
.ticker:hover .ticker-tr{animation-play-state:paused}
.ticker-tr span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--serif);font-size:1.02rem;letter-spacing:.09em;color:var(--fg-2);white-space:nowrap}
.ticker-tr span::after{content:"";width:6px;height:7px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none}

/* =======================================================================
   Secties
   ======================================================================= */
.sec{position:relative;padding:clamp(78px,10vw,140px) 0}
.sec-alt{background:var(--ink-1)}
.sec-head{max-width:66ch;margin-bottom:56px}
.sec-head.c{margin-inline:auto;text-align:center}
.sec-head .h2{margin-bottom:18px}

/* Verticale lamellen, zoals de wandpanelen in de zaak. */
.slats{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(255,255,255,.023) 15px 16px);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.foot-slats{
  display:block;flex:1;height:20px;min-width:110px;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px);
  mask-image:linear-gradient(90deg,transparent,#000);
}
.hexfield{
  position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16z' fill='none' stroke='%23c8a24a' stroke-opacity='.11'/%3E%3C/svg%3E");
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
}

/* Licht dat de muis volgt over donkere secties. */
.spot{position:relative;isolation:isolate}
.spot::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(200,162,74,.09),transparent 62%);
  transition:opacity .55s var(--ease);
}
.spot:hover::before{opacity:1}

/* =======================================================================
   Diensten: een menukaart, geen roosterkaartjes
   ======================================================================= */
.menu{border-top:1px solid var(--line)}
.menu-row{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:20px;
  padding:26px 18px;border-bottom:1px solid var(--line);cursor:default;
  transition:background .45s var(--ease),padding-left .45s var(--ease);
}
.menu-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.menu-row::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(90deg,rgba(200,162,74,.07),transparent 55%);
  transition:opacity .45s var(--ease);
}
.menu-row:hover{background:rgba(255,255,255,.016);padding-left:30px}
.menu-row:hover::before{transform:scaleY(1)}
.menu-row:hover::after{opacity:1}

.menu-no{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.1em;transition:color .4s}
.menu-row:hover .menu-no{color:var(--gold)}
.menu-body h3{font-family:var(--serif);font-size:clamp(1.24rem,2.2vw,1.62rem);font-weight:500;margin-bottom:5px;transition:transform .5s var(--ease)}
.menu-row:hover .menu-body h3{transform:translateX(3px)}
.menu-body p{margin:0;font-size:.925rem;color:var(--muted);max-width:58ch;transition:color .45s}
.menu-row:hover .menu-body p{color:var(--fg-2)}
.menu-meta{display:flex;align-items:baseline;gap:20px;white-space:nowrap}
.menu-duur{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.menu-prijs{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:500;color:var(--gold-lt);transition:transform .5s var(--spring)}
.menu-row:hover .menu-prijs{transform:scale(1.09)}
/* Aanraderlabel: echte tekst in de HTML, want CSS content is niet te vertalen. */
.menu-body h3 .top-badge{
  display:inline-block;margin-left:12px;vertical-align:middle;white-space:nowrap;
  font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(200,162,74,.4);border-radius:4px;padding:3px 8px;
}

/* =======================================================================
   Productrek
   ======================================================================= */
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{
  position:relative;padding:9px 17px;border:1px solid var(--line-2);border-radius:20px;background:none;cursor:pointer;
  font-size:.735rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  transition:color .32s,border-color .32s,transform .32s var(--spring);overflow:hidden;
}
.filter::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.filter:hover{color:var(--gold-lt);border-color:var(--gold);transform:translateY(-2px)}
.filter.on{color:#150f02;border-color:var(--gold)}
.filter.on::before{transform:none}
.filter{z-index:0;isolation:isolate}

.rack{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.prod{
  position:relative;background:var(--ink-1);padding:0 0 24px;overflow:hidden;isolation:isolate;
  transition:background .5s var(--ease),transform .55s var(--ease),z-index 0s;
  animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*45ms);
}
.prod::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:radial-gradient(90% 70% at 50% 0%,var(--glow,rgba(200,162,74,.3)),transparent 68%);
  transition:opacity .55s var(--ease);
}
.prod:hover{background:var(--ink-2);z-index:2}
.prod:hover::before{opacity:.4}
.prod.hide{display:none}

.prod-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-2)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ease),filter .7s var(--ease);filter:brightness(.9) saturate(.96)}
.prod:hover .prod-img img{transform:scale(1.09) rotate(.6deg);filter:brightness(1.06) saturate(1.06)}
.prod-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(13,13,16,.94));
}
/* Lichtveeg over de pot, alsof de LED erover trekt. */
.prod-img::before{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-50%;width:32%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,244,215,.2),transparent);
  transform:skewX(-16deg);transition:left .85s var(--ease);
}
.prod:hover .prod-img::before{left:150%}

.prod-merk{
  position:absolute;top:13px;left:13px;z-index:3;
  font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  background:var(--gold);padding:4px 9px;border-radius:3px;
  transform:translateY(-6px);opacity:0;transition:transform .45s var(--spring),opacity .35s;
}
.prod:hover .prod-merk{transform:none;opacity:1}

.prod-body{position:relative;z-index:1;padding:20px 22px 0}
.prod-cat{font-size:.635rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.prod-body h3{font-family:var(--serif);font-size:1.09rem;font-weight:500;line-height:1.24;margin-bottom:9px}
.prod-body p{font-size:.845rem;line-height:1.62;color:var(--muted);margin:0 0 16px;transition:color .5s}
.prod:hover .prod-body p{color:var(--fg-2)}

/* Grip en glans als hexagon-pips die inschakelen bij hover. */
.pips{display:flex;flex-direction:column;gap:8px}
/* Het label moet meegroeien: "Parlaklık" is langer dan "Glans". */
.pip-row{display:flex;align-items:center;gap:10px;min-width:0}
.pip-row span{
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pip-row b{display:flex;gap:4px;flex:none;margin-left:auto}
.pip{width:11px;height:12px;background:var(--line-2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .4s var(--ease),transform .4s var(--spring);transition-delay:calc(var(--p,0)*55ms)}
.prod:hover .pip.on{background:linear-gradient(150deg,var(--gold-lt),var(--gold));transform:scale(1.16)}
.pip.on{background:var(--gold-dk)}
.prod-foot{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 0;margin-top:16px;border-top:1px solid var(--line);font-size:.74rem;color:var(--muted);letter-spacing:.06em}
.prod-foot em{font-style:normal;color:var(--fg-2)}

/* =======================================================================
   Opsomming met hexagon-nummers
   Gebruikt bij de drie stappen van de cadeaubon.
   ======================================================================= */
.rewards{display:grid;gap:12px;margin-top:30px}
.reward{
  position:relative;display:flex;align-items:center;gap:15px;padding:15px 18px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);overflow:hidden;
  transition:border-color .42s var(--ease),transform .42s var(--ease),background .42s;
}
.reward::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:center;transition:transform .45s var(--ease)}
.reward:hover{border-color:rgba(200,162,74,.45);transform:translateX(7px);background:var(--ink-3)}
.reward:hover::before{transform:scaleY(1)}
.reward i{
  width:34px;height:38px;flex:none;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:rgba(200,162,74,.14);color:var(--gold-lt);font-style:normal;font-family:var(--mono);font-size:.78rem;
  transition:background .45s,transform .5s var(--spring);
}
.reward:hover i{background:linear-gradient(150deg,var(--gold-lt),var(--gold));color:#150f02;transform:rotate(30deg)}
.reward b{display:block;font-size:.95rem;font-weight:600}
.reward small{display:block;color:var(--muted);font-size:.815rem;line-height:1.5}

/* =======================================================================
   Cadeaubon
   ======================================================================= */
.giftcard{
  position:relative;aspect-ratio:1.62;border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,#171319,#0b0b0e 55%,#1a1509);
  border:1px solid rgba(200,162,74,.34);
  display:flex;flex-direction:column;justify-content:space-between;padding:30px 30px 26px;
  box-shadow:0 40px 100px -55px rgba(0,0,0,.95);
  transition:transform .2s var(--ease),box-shadow .5s;
}
.giftcard::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.85;
  background:
    radial-gradient(70% 100% at 88% 0%,rgba(200,162,74,.2),transparent 62%),
    repeating-linear-gradient(115deg,transparent 0 26px,rgba(200,162,74,.05) 26px 27px);
}
.giftcard::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:36%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,243,210,.3),transparent);
  transform:skewX(-16deg);animation:sweep 6s var(--ease) infinite;
}
.giftcard > *{position:relative;z-index:2}
.giftcard:hover{box-shadow:0 50px 120px -50px rgba(200,162,74,.45)}
.gc-top{display:flex;justify-content:space-between;align-items:flex-start}
.gc-top b{font-family:var(--serif);font-size:1.16rem;letter-spacing:.06em}
.gc-top small{display:block;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.gc-val{font-family:var(--serif);font-size:clamp(2.6rem,6vw,3.9rem);font-weight:500;color:var(--gold-lt);line-height:1;letter-spacing:-.02em}
.gc-btm{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.gc-code{font-family:var(--mono);font-size:.83rem;letter-spacing:.22em;color:var(--fg-2)}
.gc-note{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}

/* Historiek van een bon: één doorlopende lijn met een hexagon per gebeurtenis. */
.tijdlijn{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.tijdlijn::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--gold-dk),var(--line) 60%,transparent);
}
.tijdlijn li{position:relative;padding:0 0 20px}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li::before{
  content:"";position:absolute;left:-26px;top:5px;width:11px;height:12px;
  background:var(--line-2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .4s var(--ease),transform .5s var(--spring);
}
.tijdlijn li:hover::before{transform:rotate(30deg) scale(1.2)}
.tijdlijn li[data-soort="ingewisseld"]::before,
.tijdlijn li[data-soort="keuze"]::before{background:linear-gradient(150deg,var(--gold-lt),var(--gold))}
.tijdlijn li[data-soort="correctie"]::before{background:var(--bad)}
.tijdlijn time{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.tijdlijn b{display:block;font-size:.94rem;font-weight:600;line-height:1.4}
.tijdlijn small{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}

/* =======================================================================
   Taalkeuze
   ======================================================================= */
.taalknop{
  position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ink-2);
  transition:border-color .35s var(--ease),background .35s,transform .35s var(--spring);
}
.taalknop input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.taalknop img{
  width:30px;height:20px;flex:none;border-radius:3px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  filter:saturate(.85);transition:filter .35s var(--ease),transform .4s var(--spring);
}
.taalknop span{font-size:.92rem;font-weight:500;color:var(--fg-2);transition:color .3s}
.taalknop:hover{border-color:var(--gold);transform:translateY(-2px)}
.taalknop:hover img{filter:saturate(1.1)}
.taalknop.on{border-color:var(--gold);background:var(--ink-3)}
.taalknop.on img{filter:saturate(1.15);transform:scale(1.06)}
.taalknop.on span{color:var(--gold-lt)}
.taalknop.on::after{
  content:"";position:absolute;right:13px;width:13px;height:15px;background:var(--gold);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.taalknop:focus-within{outline:2px solid var(--gold);outline-offset:3px}

/* Vlaggetjes in de navigatie en de voet. */
.taalwissel{display:inline-flex;align-items:center;gap:6px}
.taalwissel a{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:21px;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line-2);opacity:.45;
  transition:opacity .3s var(--ease),transform .35s var(--spring),box-shadow .3s;
}
.taalwissel a img{width:100%;height:100%;object-fit:cover}
.taalwissel a:hover{opacity:.9;transform:translateY(-2px)}
.taalwissel a.on{opacity:1;box-shadow:0 0 0 1px var(--gold)}

/* Saldobalk: hoeveel er nog op de bon staat. */
.saldo-balk{display:block;height:6px;border-radius:99px;background:var(--ink-3);overflow:hidden;position:relative}
.saldo-vul{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 45%,var(--gold-lt));
  transform-origin:left;animation:vullen 1.1s var(--ease) both;
}
@keyframes vullen{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Hele tabelrij klikbaar in het beheer. */
.rij-klik{cursor:pointer}

.amounts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.amount{
  position:relative;min-width:78px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--ink-2);cursor:pointer;overflow:hidden;isolation:isolate;
  font-family:var(--serif);font-size:1.24rem;color:var(--fg);
  transition:border-color .35s,color .35s,transform .35s var(--spring);
}
.amount::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(140deg,var(--gold-lt),var(--gold));transform:scale(.6);opacity:0;transition:transform .42s var(--spring),opacity .3s}
.amount:hover{border-color:var(--gold);transform:translateY(-3px)}
.amount.on{color:#150f02;border-color:var(--gold)}
.amount.on::before{transform:none;opacity:1}

/* =======================================================================
   Over / gallerij
   ======================================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,76px);align-items:center}
.frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:saturate(.9) contrast(1.06)}
.frame:hover img{transform:scale(1.05)}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(200,162,74,.2);border-radius:inherit;
  opacity:0;transition:opacity .5s var(--ease);
}
.frame:hover::after{opacity:1}
.frame-tall{aspect-ratio:.82}
.frame-wide{aspect-ratio:1.5}
.frame-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;
  background:linear-gradient(0deg,rgba(8,8,10,.94),transparent);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
  transform:translateY(8px);opacity:0;transition:transform .5s var(--ease),opacity .4s;
}
.frame:hover .frame-cap{transform:none;opacity:1}

.quote{
  position:relative;padding:34px 0 0;border-top:1px solid var(--line);margin-top:34px;
  font-family:var(--serif);font-size:clamp(1.16rem,2vw,1.5rem);font-style:italic;line-height:1.5;color:var(--fg-2);
}
.quote cite{display:block;margin-top:16px;font-family:var(--sans);font-style:normal;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

/* =======================================================================
   Contact
   ======================================================================= */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,70px)}
.info-row{
  display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
.info-row:hover{padding-left:12px}
.info-row dt{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding-top:5px}
.info-row dd{margin:0;font-size:1.02rem}
.info-row dd a{position:relative;transition:color .3s}
.info-row dd a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.info-row dd a:hover{color:var(--gold-lt)}
.info-row dd a:hover::after{transform:scaleX(1)}

.uren{width:100%;border-collapse:collapse;font-size:.9rem}
.uren th,.uren td{padding:9px 0;text-align:left;font-weight:400;color:var(--muted);border-bottom:1px solid var(--line);transition:color .4s}
.uren td{text-align:right;font-variant-numeric:tabular-nums}
.uren tr:hover th,.uren tr:hover td{color:var(--fg-2)}
.uren tr.nu th,.uren tr.nu td{color:var(--gold-lt);font-weight:600}
.uren tr.nu th::before{content:"";display:inline-block;width:6px;height:7px;margin-right:9px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* =======================================================================
   Formulieren
   ======================================================================= */
/* minmax(0,1fr) is hier essentieel: zonder die 0 krijgt een grid-item als
   min-width zijn INTRINSIEKE breedte, en een date-veld is intrinsiek breed.
   Dat duwde het hele formulier voorbij de rand van de kaart. */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.field{position:relative;display:grid;gap:8px;min-width:0}
.field > *{min-width:0;max-width:100%}
.field label{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .35s}
.field:focus-within label{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--fg);font-size:.98rem;transition:border-color .35s var(--ease),background .35s,box-shadow .35s;
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--line-2);background:var(--ink-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);background:var(--ink-3);
  box-shadow:0 0 0 3px rgba(200,162,74,.13);
}
.field textarea{resize:vertical;min-height:104px}
.field .hint{font-size:.78rem;color:var(--muted)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.9rem;color:var(--fg-2);line-height:1.5}
.check input{appearance:none;width:20px;height:22px;flex:none;margin-top:1px;background:var(--ink-2);border:1px solid var(--line-2);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .35s var(--ease),border-color .35s;cursor:pointer}
.check input:checked{background:linear-gradient(150deg,var(--gold-lt),var(--gold));border-color:var(--gold)}
.check:hover input{border-color:var(--gold)}

.note{padding:15px 18px;border-radius:var(--r-sm);font-size:.9rem;border:1px solid;animation:rise .5s var(--ease) both}
.note-ok{background:rgba(78,201,127,.09);border-color:rgba(78,201,127,.34);color:#a9e8c1}
.note-bad{background:rgba(226,86,79,.09);border-color:rgba(226,86,79,.34);color:#f0b0ac}
.note-info{background:rgba(200,162,74,.08);border-color:rgba(200,162,74,.3);color:var(--gold-lt)}

/* =======================================================================
   Portaal en beheer
   ======================================================================= */
body.app{background:var(--ink-1)}
body.app .nav{position:sticky;background:rgba(8,8,10,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:13px 0}
.app-wrap{width:min(100% - 40px,1180px);margin:38px auto 80px}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.panel + .panel{margin-top:20px}
.panel-hd{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.panel-hd h2{font-family:var(--serif);font-size:1.4rem;font-weight:500}

.auth{width:min(100% - 40px,440px);margin-inline:auto;margin-block:min(11vh,90px) 70px}
/* Bij het registreren staat er meer in de kaart, dus die mag breder. */
.auth.wide{width:min(100% - 40px,520px)}
.auth .panel{padding:34px}
.auth h1{font-family:var(--serif);font-size:1.85rem;font-weight:500;margin-bottom:8px}
.auth .sub{color:var(--muted);font-size:.94rem;margin-bottom:26px}
.auth-alt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);text-align:center}
.auth-alt a{color:var(--gold-lt)}
.auth-alt a:hover{text-decoration:underline}

.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:26px;border-bottom:1px solid var(--line)}
.tabs a{position:relative;padding:12px 17px;font-size:.83rem;font-weight:500;letter-spacing:.05em;color:var(--muted);transition:color .3s}
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .4s var(--ease)}
.tabs a:hover{color:var(--fg)}
.tabs a.on{color:var(--gold-lt)}
.tabs a.on::after,.tabs a:hover::after{transform:scaleX(1)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:24px}
.kpi{position:relative;padding:22px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);overflow:hidden;transition:border-color .4s,transform .4s var(--ease)}
.kpi::before{content:"";position:absolute;right:-20px;top:-20px;width:78px;height:86px;background:rgba(200,162,74,.06);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .7s var(--spring)}
.kpi:hover{border-color:rgba(200,162,74,.36);transform:translateY(-3px)}
.kpi:hover::before{transform:rotate(30deg) scale(1.1)}
.kpi b{display:block;font-family:var(--serif);font-size:2.15rem;font-weight:500;color:var(--gold-lt);line-height:1}
.kpi span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;padding:11px 12px;font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-2)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{transition:background .3s}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.tbl .r{text-align:right}
.tbl code{font-family:var(--mono);font-size:.85em;color:var(--gold-lt)}
.tbl-wrap{overflow-x:auto;margin:0 -12px}

.tag{display:inline-block;padding:4px 10px;border-radius:4px;font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid}
.tag-ok{color:#a9e8c1;border-color:rgba(78,201,127,.4);background:rgba(78,201,127,.09)}
.tag-warn{color:#f0cf95;border-color:rgba(224,163,60,.4);background:rgba(224,163,60,.09)}
.tag-off{color:var(--muted);border-color:var(--line-2);background:rgba(255,255,255,.02)}
.tag-gold{color:var(--gold-lt);border-color:rgba(200,162,74,.42);background:rgba(200,162,74,.1)}

.empty{padding:52px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;font-family:var(--serif);font-size:1.16rem;color:var(--fg-2);margin-bottom:7px}

/* =======================================================================
   Footer
   ======================================================================= */
.foot{position:relative;background:var(--ink);border-top:1px solid var(--line);padding:72px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px}
.foot h3{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin-bottom:11px}
.foot h4{font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:17px}
.foot-claim{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:16px}
.foot address{font-style:normal;font-size:.9rem;color:var(--fg-2);line-height:1.8;margin-bottom:14px}
.foot-links{font-size:.9rem;line-height:2;color:var(--muted);margin:0}
.foot-links a{position:relative;transition:color .3s,padding-left .35s var(--ease)}
.foot-links a::before{content:"";position:absolute;left:0;top:50%;width:5px;height:6px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:0;transform:translateY(-50%);transition:opacity .3s}
.foot-links a:hover{color:var(--gold-lt);padding-left:13px}
.foot-links a:hover::before{opacity:1}
.foot-btm{display:flex;align-items:center;gap:22px;padding-top:26px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}

/* =======================================================================
   Merk in beeld
   ======================================================================= */

/* Het wordmark opent de hero. Het licht loopt over de LETTERS zelf, niet over
   een rechthoek erboven: de veeg wordt gemaskeerd met het logo, zodat er nooit
   een grijze balk over het transparante deel valt. */
.hero-mark{position:relative;display:block;line-height:0;margin-bottom:30px;width:min(430px,74vw)}
.hero-mark img{
  width:100%;height:auto;
  filter:drop-shadow(0 8px 40px rgba(200,162,74,.28));
  animation:markIn 1.5s var(--ease) .25s both;
}
@keyframes markIn{from{opacity:0;transform:translateY(20px) scale(.96)}
                  to{opacity:1;transform:none}}
.hero-mark::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,252,242,.0) 44%,
    rgba(255,252,242,.85) 50%,
    rgba(255,252,242,.0) 56%,
    transparent 62%);
  background-size:280% 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:url("../img/merk/wordmark.png");
          mask-image:url("../img/merk/wordmark.png");
  -webkit-mask-size:100% 100%;  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:shimmer 6.5s cubic-bezier(.5,0,.5,1) 2s infinite;
}
@keyframes shimmer{
  0%      {background-position:190% 0}
  22%,100%{background-position:-90% 0}
}

.gc-mark{width:132px;height:auto;filter:drop-shadow(0 3px 14px rgba(200,162,74,.32))}
.seal{width:52px;height:auto;opacity:.92}

/* =======================================================================
   Cookiemelding
   ======================================================================= */
.cookiebar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  width:min(100% - 32px,760px);margin-inline:auto;
  padding:17px 20px;border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(13,13,16,.96);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95);
  transform:translateY(140%);opacity:0;
  transition:transform .75s var(--spring),opacity .5s var(--ease);
}
.cookiebar.show{transform:none;opacity:1}
.cookiebar p{margin:0;flex:1 1 320px;font-size:.855rem;line-height:1.6;color:var(--fg-2)}
.cookiebar b{color:var(--fg);font-weight:600}
.cookiebar a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.cookiebar a:hover{color:var(--gold-hi)}

/* =======================================================================
   Juridische pagina's
   ======================================================================= */
.doc{width:min(100% - 40px,760px);margin:clamp(120px,15vh,170px) auto 90px}
.doc h1{font-family:var(--serif);font-size:clamp(2.1rem,4.6vw,3rem);font-weight:500;margin-bottom:12px}
.doc .updated{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:44px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.doc h2{font-family:var(--serif);font-size:1.42rem;font-weight:500;color:var(--gold-lt);margin:44px 0 14px;scroll-margin-top:100px}
.doc h3{font-size:1rem;font-weight:600;margin:26px 0 8px}
.doc p,.doc li{color:var(--fg-2);font-size:.965rem;line-height:1.78}
.doc ul{padding-left:20px;margin:0 0 1em}
.doc li{margin-bottom:9px}
.doc li::marker{color:var(--gold)}
.doc a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.doc dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 1em;font-size:.94rem}
.doc dt{color:var(--muted);white-space:nowrap}
.doc dd{margin:0;color:var(--fg-2)}
.doc .box{padding:20px 22px;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r-sm);background:var(--ink-1);margin:0 0 1em}
.doc .box p:last-child{margin-bottom:0}
.doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.doc-toc a{
  padding:7px 14px;border:1px solid var(--line-2);border-radius:18px;text-decoration:none;
  font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  transition:color .3s,border-color .3s,transform .3s var(--spring);
}
.doc-toc a:hover{color:var(--gold-lt);border-color:var(--gold);transform:translateY(-2px)}

.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{position:relative;transition:color .3s}
.foot-legal a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.foot-legal a:hover{color:var(--gold-lt)}
.foot-legal a:hover::after{transform:scaleX(1)}

/* =======================================================================
   Responsief
   ======================================================================= */
@media (max-width:1000px){
  .split,.contact{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .hero-grid{grid-template-columns:1fr}
  .hero-stats{flex-direction:row;gap:30px;border-left:0;border-top:1px solid var(--line-2);padding:22px 0 0;margin-top:8px}
}
@media (max-width:860px){
  html{scroll-padding-top:74px}
  .nav-links,.nav-act{display:none}
  .burger{display:block}
  .mob:not([hidden]){display:flex}
  .menu-row{grid-template-columns:auto 1fr;gap:14px}
  .menu-meta{grid-column:1/-1;justify-content:space-between;padding-top:6px}

  /* Op een smal, hoog scherm snijdt cover de zaak weg. Iets meer naar de
     vloer kijken zodat de stoelen en het plafond allebei in beeld blijven. */
  .hero{min-height:88svh;padding-top:104px}
  .hero-in{padding-bottom:46px}
  .hero-bg img,.hero-bg video{object-position:center 56%;filter:saturate(.9) contrast(1.08) brightness(.86)}
  .hero::before{
    background:
      linear-gradient(180deg,rgba(8,8,10,.66) 0%,rgba(8,8,10,.2) 22%,rgba(8,8,10,.72) 56%,rgba(8,8,10,.96) 82%,var(--ink) 100%);
  }
  .hero-glow{height:44%}
  .hero-mark{margin-bottom:22px;width:min(320px,68vw)}
  .hero-in{padding-left:0}
}
@media (max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .field-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .rack{grid-template-columns:1fr 1fr}
  .prod-body{padding:15px 14px 0}
  .prod-foot{padding:13px 14px 0}
  .info-row{grid-template-columns:1fr;gap:5px}
}