/* Barbier Zwartwit: donker, vet, hoog contrast, rood als enige accent */
:root{
  --bg:#0b0b0b;--fg:#f4f4f0;--muted:#a9a9a2;--surface:#151515;--surface-2:#111;--line:rgba(244,244,240,.18);
  --accent:#f4f4f0;--accent-fg:#0b0b0b;--red:#e5372b;--focus:#ffd400;
  --radius:0;--radius-sm:0;--radius-btn:0;
  --font-head:"Bebas Neue",Impact,"Arial Narrow",sans-serif;--font-body:"Archivo",system-ui,sans-serif;
  --shadow:8px 8px 0 var(--red);
  --header-bg:#0b0b0b;--footer-bg:#f4f4f0;--footer-fg:#0b0b0b;
}
::selection{background:var(--red);color:#fff}
h1,h2,h3{font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.logo{font-family:var(--font-head);font-size:1.9rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.logo b{font-weight:400;-webkit-text-stroke:1px var(--fg);color:transparent}
.site-header{border-bottom:2px solid var(--fg)}
.nav li a:not(.btn){text-transform:uppercase;font-weight:600;font-size:.82rem;letter-spacing:.12em}
.nav li a:not(.btn)::after{background:var(--red);height:3px}
.btn{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.85rem}
.btn:hover{box-shadow:5px 5px 0 var(--red);transform:translate(-3px,-3px)}
.btn-ghost{color:var(--fg)}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.eyebrow{color:var(--red);letter-spacing:.25em}
.lead{color:#cfcfc8}

/* Hero */
.bz-hero{min-height:calc(100svh - 110px);display:flex;flex-direction:column;justify-content:center;padding:3rem 0 6rem;background:
  radial-gradient(800px 500px at 85% 20%,rgba(229,55,43,.18),transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.035) 79px 80px),#0b0b0b}
.bz-wrap{position:relative;z-index:2}
.bz-hero h1{font-size:clamp(4.2rem,19vw,13rem);line-height:.82;margin-bottom:1.5rem}
.bz-hero h1 span{display:block}
.outline{color:transparent;-webkit-text-stroke:2px var(--fg);transition:color .5s}
.bz-hero h1:hover .outline{color:var(--red);-webkit-text-stroke-color:var(--red)}
.bz-row{display:grid;gap:1.5rem;max-width:880px}
@media (min-width:800px){.bz-row{grid-template-columns:1.3fr 1fr;align-items:end}}
.pole{position:absolute;right:clamp(16px,6vw,90px);top:12%;bottom:22%;width:clamp(26px,4vw,46px);border:3px solid var(--fg);border-radius:30px;overflow:hidden;z-index:1;display:none}
@media (min-width:700px){.pole{display:block}}
.pole span{position:absolute;inset:-200px 0 0;background:repeating-linear-gradient(-45deg,var(--red) 0 16px,#f4f4f0 16px 32px,#0b0b0b 32px 48px,#f4f4f0 48px 64px);animation:pole 2.4s linear infinite}
@keyframes pole{to{transform:translateY(90.5px)}}
.spin-badge{position:absolute;right:clamp(70px,13vw,190px);bottom:16%;width:clamp(110px,15vw,170px);z-index:1;display:none}
@media (min-width:900px){.spin-badge{display:block}}
.spin-badge .sb-bg{fill:var(--red)}
.spin-badge .sb-t{font:600 15px var(--font-body);letter-spacing:.2em;fill:#fff;animation:spin 14s linear infinite;transform-origin:100px 100px}
.spin-badge .sb-i{stroke:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.ticker{position:absolute;left:0;right:0;bottom:0;background:var(--fg);color:var(--bg);overflow:hidden;white-space:nowrap;border-top:2px solid var(--fg);z-index:2}
.ticker-track{display:inline-flex;animation:tick 26s linear infinite}
.ticker span{font:400 1.6rem/1 var(--font-head);letter-spacing:.06em;padding:.6rem 0;text-transform:uppercase}
@keyframes tick{to{transform:translateX(-50%)}}

/* Secties */
.sec h2{font-size:clamp(3rem,10vw,6rem)}
.sec-svc{border-bottom:2px solid var(--fg)}
.svc-grid{gap:0;counter-reset:svc;border:2px solid var(--fg)}
.svc{border:0;border-bottom:2px solid var(--fg);background:transparent;padding:1.75rem;position:relative;counter-increment:svc;overflow:hidden;z-index:0}
@media (min-width:640px){.svc{border-right:2px solid var(--fg)}.svc:nth-child(2n){border-right:0}.svc:nth-last-child(-n+2){border-bottom:0}}
@media (min-width:960px){.svc{border-bottom:0}.svc:nth-child(2n){border-right:2px solid var(--fg)}.svc:last-child{border-right:0}}
.svc:last-child{border-bottom:0}
.svc::before{content:"0" counter(svc);font:400 4rem/1 var(--font-head);color:var(--red);display:block;margin-bottom:.5rem}
.svc::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.svc:hover{transform:none;box-shadow:none;color:var(--bg)}
.svc:hover::after{transform:scaleY(1)}
.svc:hover p{color:#333}
.svc .ico{display:none}
.svc h3{font-size:2rem}
.prices-head{margin:clamp(3.5rem,8vw,6rem) 0 0}
.h-prices{font-size:clamp(2.4rem,7vw,4rem)}
.ptable caption{font:400 2.2rem/1 var(--font-head);text-transform:uppercase;border-bottom:3px solid var(--red);padding-bottom:.5rem;margin-bottom:.25rem}
.ptable tbody th{font-weight:600}
.ptable td:last-child{font:400 1.6rem/1 var(--font-head)}
.ptable tbody tr:hover{background:rgba(229,55,43,.12)}

/* Team */
.sec-alt{background:var(--fg);color:var(--bg);--muted:#4a4a46;--line:rgba(11,11,11,.2)}
.sec-alt .eyebrow{color:var(--red)}
.sec-alt .lead{color:#3a3a36}
.member{background:#fff;border:2px solid #0b0b0b;color:#0b0b0b}
.member:hover{box-shadow:8px 8px 0 var(--red);transform:translate(-4px,-4px)}
.member .role{color:var(--red);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.member h3{font-size:2.4rem}
.avatar{width:100%;height:auto;aspect-ratio:16/9;border-radius:0}
.avatar clipPath rect{rx:0}
.member:hover .avatar{transform:none}
.av-t{font-size:44px}
.tags li{border-color:#0b0b0b;color:#0b0b0b;border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* Info */
.hours th,.hours td{font-size:1.05rem}
.hours tr.is-today th,.hours tr.is-today td{color:var(--red)}
.map{border:2px solid var(--fg)}
.m-bg{fill:#151515}.m-blk rect{fill:#222}.m-park{fill:#1d1d1d;stroke:#444}.m-road path{stroke:#f4f4f0;stroke-width:4;fill:none;stroke-dasharray:12 8;animation:road 3s linear infinite}
@keyframes road{to{stroke-dashoffset:-40}}
.m-txt{font:400 15px var(--font-head);letter-spacing:.1em;fill:#f4f4f0}.m-pin path{fill:var(--red)}.m-dot{fill:#fff}

/* Booking */
.sec-book{background:var(--surface);border-top:2px solid var(--fg);border-bottom:2px solid var(--fg)}
.bk{border:2px solid var(--fg);box-shadow:10px 10px 0 var(--red);background:#0b0b0b}
.bk-step legend{font-size:clamp(2rem,6vw,2.8rem)}
.bk-opt{border-width:2px}
.bk-opt input{accent-color:var(--red)}
.bk-opt:has(input:checked){background:rgba(229,55,43,.15);border-color:var(--red)}
.bk-progress li::before{border-radius:0;height:6px}
.bk-progress li.is-done::before{background:var(--red)}
.chip{border-width:2px}
.chip .dn{font-size:1.8rem;font-weight:400}
.chip:has(input:checked){background:var(--red);border-color:var(--red);color:#fff}
.bk-done .tick{color:var(--red)}
.field input,.field select,.field textarea{background:#0b0b0b;border-width:2px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:none}
.check input{accent-color:var(--red)}
.bk-summary{background:#1b1b1b;border-left:4px solid var(--red)}
.bk-error,.f-err,.field [aria-invalid="true"]{color:#ff7a70;border-color:#ff7a70}
.status.ok{background:var(--red);color:#fff}

.contact-form{border:2px solid var(--fg);background:#0b0b0b}
.contact-form h3{font-size:2.2rem}
.contact-list svg{color:var(--red)}
.site-footer{border-top:6px solid var(--red)}
.site-footer h2{font-size:3rem}
.site-footer .btn{background:#0b0b0b;color:#f4f4f0;border-color:#0b0b0b}
.foot h3{font-family:var(--font-body);font-weight:800}
