/* ============================================================
   MUZIEKSTUDIO ALKMAAR — "RAUW & RECHT DOOR ZEE"
   Kinetic brutalism · mobile-first · brand: #0C0C0C / #F3F160 / #78B46E / #91B9F1
   Type: Anton (display) + Archivo (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --bg:      #0C0C0C;
  --panel:   #131311;
  --ink:     #F5F5F5;
  --body:    #C9C9C2;
  --mut:     #8F8F86;
  --line:    rgba(245,245,245,.16);
  --acid:    #F3F160;
  --grn:     #78B46E;
  --blu:     #91B9F1;
  --black:   #0C0C0C;
  --fd:      'Anton', Impact, sans-serif;
  --fb:      'Archivo', Helvetica, Arial, sans-serif;
  --ease:    cubic-bezier(.22,1,.36,1);
  --bord:    2px solid var(--ink);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--body);
  font-family:var(--fb); font-size:1rem; line-height:1.6;
  overflow-x:hidden;
  position:relative;
  padding-bottom:calc(64px + env(safe-area-inset-bottom)); /* ruimte voor sticky boekbalk mobiel */
}
@media (min-width:768px){ body{ padding-bottom:0; } }
img { max-width:100%; display:block; }
a { color:inherit; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--acid); color:var(--black); }

/* Grain overlay — bewust ABSOLUTE (niet fixed): iOS 26 Safari bemonstert
   het bovenste fixed element voor de statusbalkkleur; de header moet de
   enige vaste laag bovenaan zijn. Absolute scrollt mee en is ook sneller. */
body::before {
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.04;
}

/* ---------- Typografie ---------- */
h1,h2,h3,.disp {
  font-family:var(--fd); font-weight:400;
  text-transform:uppercase; color:var(--ink);
  line-height:.95; letter-spacing:.01em;
}
h1 { font-size:clamp(3.4rem, 13vw, 8.5rem); }
h2 { font-size:clamp(2.3rem, 7.5vw, 4.6rem); }
h3 { font-size:clamp(1.35rem, 4vw, 1.9rem); line-height:1.05; }
h4 { color:var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; }
p  { max-width:58ch; }
.acid { color:var(--acid); }
.grn  { color:var(--grn); }
.blu  { color:var(--blu); }
.outline {
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
}
@media (min-width:768px){ .outline{ -webkit-text-stroke:2px var(--ink);} }

/* kicker / label */
.kick {
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); margin-bottom:1.1rem;
}
.kick::before { content:""; width:22px; height:10px; background:var(--acid); display:inline-block; }
.kick.k-grn::before { background:var(--grn); }
.kick.k-blu::before { background:var(--blu); }

/* ---------- Layout ---------- */
.wrap { width:min(1180px, 100% - 2.5rem); margin-inline:auto; }
.sec  { padding:4.5rem 0; position:relative; }
@media (min-width:768px){ .sec{ padding:7rem 0; } }
.sec-line { border-top:var(--bord); }

/* Inversie-secties in de drie merkkleuren */
.sec-acid { background:var(--acid); color:#2a2a15; }
.sec-acid h1,.sec-acid h2,.sec-acid h3,.sec-acid h4,.sec-acid .kick { color:var(--black); }
.sec-acid .kick::before { background:var(--black); }
.sec-acid p { color:#2a2a15; }

.sec-grn { background:var(--grn); color:#16230f; }
.sec-grn h1,.sec-grn h2,.sec-grn h3,.sec-grn h4,.sec-grn .kick { color:var(--black); }
.sec-grn .kick::before { background:var(--black); }
.sec-grn p { color:#16230f; }

.sec-blu { background:var(--blu); color:#101a2e; }
.sec-blu h1,.sec-blu h2,.sec-blu h3,.sec-blu h4,.sec-blu .kick { color:var(--black); }
.sec-blu .kick::before { background:var(--black); }
.sec-blu p { color:#101a2e; }

.sec-grn strong, .sec-blu strong, .sec-acid strong { color:var(--black); }
.sec-blu .frame, .sec-grn .frame { border-color:var(--black); box-shadow:8px 8px 0 0 var(--black); }
.sec-blu .frame .f-tag, .sec-grn .frame .f-tag { border-color:var(--acid); }

.g2 { display:grid; gap:2.5rem; }
.g3 { display:grid; gap:1.25rem; }
.g4 { display:grid; gap:1.25rem; }
@media (min-width:700px){
  .g2 { grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
  .g3 { grid-template-columns:repeat(3,1fr); }
  .g4 { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){ .g4 { grid-template-columns:repeat(4,1fr); } }

/* ---------- Knoppen ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--fd); font-size:1.05rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.95rem 1.7rem; min-height:52px;
  text-decoration:none; border:var(--bord);
  transition:transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms, color 160ms;
  touch-action:manipulation; cursor:pointer;
}
.btn-acid { background:var(--acid); color:var(--black); border-color:var(--black); box-shadow:5px 5px 0 0 var(--ink); }
.btn-acid:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 0 var(--ink); }
.btn-acid:active { transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--black); }
.btn-blk { background:var(--black); color:var(--acid); border-color:var(--black); box-shadow:5px 5px 0 0 rgba(12,12,12,.35); }
.btn-blk:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 0 rgba(12,12,12,.45); }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline:3px solid var(--blu); outline-offset:3px;
}
.btns { display:flex; flex-wrap:wrap; gap:1rem; }

/* ---------- Navigatie ---------- */
.skip-link {
  position:absolute; left:-999px; top:0; z-index:3000;
  background:var(--acid); color:var(--black); padding:.7rem 1.2rem; font-weight:800;
}
.skip-link:focus { left:0; }

/* Header = het ENIGE solide fixed element bovenaan, met effen
   background-color — zo bemonstert iOS 26 Safari betrouwbaar de
   statusbalkkleur. Geen gradient, geen transparantie, geen blur. */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background-color:var(--bg);
  border-bottom:var(--bord);
  padding-top:env(safe-area-inset-top);
}
.nav-in {
  width:min(1320px,100% - 2rem); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-logo img { height:34px; width:auto; }
.nav-links { display:none; list-style:none; align-items:center; gap:1.8rem; }
.nav-links a {
  text-decoration:none; color:var(--ink);
  font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem 0; position:relative;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--acid); transition:width 200ms var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--acid); }
.nav-cta {
  background:var(--acid); color:var(--black) !important;
  padding:.6rem 1.2rem !important; border:2px solid var(--black);
  font-family:var(--fd); font-size:.95rem !important; letter-spacing:.05em !important;
  box-shadow:4px 4px 0 0 var(--ink);
  transition:transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.nav-cta:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--ink); }
.nav-cta::after { display:none !important; }
/* Hamburger */
.hbg {
  width:48px; height:48px; display:grid; place-items:center;
  background:transparent; border:var(--bord);
}
.hbg span { display:block; width:22px; height:2.5px; background:var(--ink); margin:2.5px 0; transition:transform 200ms var(--ease), opacity 150ms; }
@media (min-width:900px){ .nav-links{ display:flex; } .hbg{ display:none; } }

/* Fullscreen menu — acid flood */
.mob {
  position:fixed; inset:0; z-index:2000;
  background:var(--acid);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(2rem + env(safe-area-inset-top)) clamp(1.5rem,6vw,4rem) 2rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 420ms var(--ease), visibility 0s 420ms;
  visibility:hidden;
}
.mob.open { clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path 420ms var(--ease); }
.mob a {
  font-family:var(--fd); text-transform:uppercase; text-decoration:none;
  color:var(--black); font-size:clamp(2.2rem,9vw,4rem); line-height:1.14;
  border-bottom:2px solid rgba(12,12,12,.18);
  padding:.35rem 0;
  display:flex; justify-content:space-between; align-items:center;
  opacity:0; transform:translateY(18px);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease), padding-left 200ms var(--ease);
}
.mob a::after { content:"→"; font-size:.5em; opacity:0; transition:opacity 150ms; }
.mob a:hover { padding-left:.5rem; }
.mob a:hover::after { opacity:1; }
.mob.open a { opacity:1; transform:none; }
.mob.open a:nth-child(3){ transition-delay:60ms; }
.mob.open a:nth-child(4){ transition-delay:110ms; }
.mob.open a:nth-child(5){ transition-delay:160ms; }
.mob.open a:nth-child(6){ transition-delay:210ms; }
.mob.open a:nth-child(7){ transition-delay:260ms; }
.mob.open a:nth-child(8){ transition-delay:310ms; }
.mob.open a:nth-child(9){ transition-delay:360ms; }
.mob a.mob-book { border:3px solid var(--black); text-align:center; justify-content:center; margin-top:1.4rem; font-size:clamp(1.6rem,6vw,2.4rem); background:var(--black); color:var(--acid); padding:.6rem 1rem; }
.mob a.mob-book::after { display:none; }
.mob-x {
  position:absolute; top:.9rem; right:1rem;
  width:48px; height:48px; background:var(--black); color:var(--acid);
  border:none; font-size:1.3rem; line-height:1;
}
.mob-tag { font-weight:800; font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(12,12,12,.6); margin-bottom:1.2rem; }

/* ---------- Sticky boekbalk (mobiel) ----------
   Verborgen bij binnenkomst; schuift pas in beeld na scrollen (JS zet .show) */
.bookbar {
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  display:flex; min-height:64px;
  padding-bottom:env(safe-area-inset-bottom);
  border-top:3px solid var(--black);
  background:var(--black);
  transform:translate3d(0,110%,0);
  transition:transform 380ms var(--ease);
  will-change:transform;
}
.bookbar.show { transform:translate3d(0,0,0); }
.bookbar a {
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  text-decoration:none; font-family:var(--fd); text-transform:uppercase; letter-spacing:.04em;
  min-height:61px;
}
.bookbar .bb-book { flex:1; background:var(--acid); color:var(--black); font-size:1.15rem; }
.bookbar .bb-book small { font-family:var(--fb); font-weight:800; font-size:.68rem; letter-spacing:.1em; background:var(--black); color:var(--acid); padding:.2rem .5rem; }
.bookbar .bb-wa { width:72px; background:var(--black); color:var(--grn); border-left:3px solid var(--acid); }
.bookbar .bb-wa svg { width:24px; height:24px; }
@media (min-width:768px){ .bookbar{ display:none; } }

/* ---------- Marquee ---------- */
.mq {
  overflow:hidden; white-space:nowrap;
  border-top:var(--bord); border-bottom:var(--bord);
  background:var(--acid); color:var(--black);
  padding:.8rem 0; position:relative;
}
.mq.mq-dark { background:var(--bg); color:var(--ink); }
.mq.mq-grn { background:var(--grn); color:var(--black); }
.mq.mq-blu { background:var(--blu); color:var(--black); }
.mq-track { display:inline-flex; animation:mq 22s linear infinite; will-change:transform; }
.mq-track span {
  font-family:var(--fd); font-size:clamp(1.15rem,3.4vw,1.7rem); text-transform:uppercase;
  padding:0 1.3rem; display:inline-flex; align-items:center; gap:2.6rem;
}
.mq-track span::after { content:"✦"; font-size:.75em; }
@keyframes mq { to { transform:translateX(-50%); } }

/* ---------- Hero ---------- */
.hero {
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:6.5rem 0 0; position:relative; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(.72) brightness(.5); }
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,12,12,.55) 0%, rgba(12,12,12,.25) 45%, var(--bg) 96%);
}
.hero .wrap { position:relative; z-index:2; padding-bottom:2.6rem; }
.hero-sticker {
  position:absolute; z-index:3; right:clamp(.5rem,4vw,6rem); top:15vh;
  background:var(--acid); color:var(--black);
  border:3px solid var(--black); box-shadow:6px 6px 0 0 rgba(245,245,245,.9);
  font-family:var(--fd); text-transform:uppercase; text-align:center;
  padding:.9rem 1.1rem .7rem; transform:rotate(7deg);
  animation:stickerFloat 5s ease-in-out infinite;
  text-decoration:none;
}
.hero-sticker .hs-s { display:block; font-family:var(--fb); font-weight:800; font-size:.62rem; letter-spacing:.18em; }
.hero-sticker .hs-b { display:block; font-size:2.1rem; line-height:1; }
@keyframes stickerFloat { 0%,100%{ transform:rotate(7deg) translateY(0);} 50%{ transform:rotate(5deg) translateY(-8px);} }
@media (max-width:700px){
  .hero-sticker { top:78px; right:.7rem; padding:.55rem .7rem .45rem; border-width:2px; box-shadow:4px 4px 0 0 rgba(245,245,245,.9); }
  .hero-sticker .hs-s { font-size:.5rem; }
  .hero-sticker .hs-b { font-size:1.45rem; }
  .hero .kick { max-width:calc(100% - 130px); }
}
.hero h1 { margin:.4rem 0 1.3rem; }
.hero h1 .row { display:block; }
.hero p.lede { font-size:1.06rem; color:var(--ink); max-width:44ch; margin-bottom:1.8rem; font-weight:500; }

/* hero entry */
.h-in { opacity:0; transform:translate3d(0,26px,0); animation:hIn 650ms var(--ease) forwards; }
.h-in.d1{ animation-delay:80ms; } .h-in.d2{ animation-delay:180ms; }
.h-in.d3{ animation-delay:280ms; } .h-in.d4{ animation-delay:380ms; }
@keyframes hIn { to { opacity:1; transform:translate3d(0,0,0); } }
@media (max-width:700px){
  .h-in { transform:translate3d(0,16px,0); animation-duration:450ms; }
}

/* feiten-strip onder hero */
.facts { display:grid; grid-template-columns:1fr 1fr; border:var(--bord); background:var(--bg); }
@media (min-width:700px){ .facts{ grid-template-columns:repeat(4,1fr);} }
.fact { padding:1rem 1.1rem; border-right:var(--bord); border-bottom:var(--bord); }
.fact:nth-child(2n){ border-right:none; }
.fact:nth-child(3), .fact:nth-child(4){ border-bottom:none; }
@media (min-width:700px){
  .fact { border-bottom:none; }
  .fact:nth-child(2n){ border-right:var(--bord); }
  .fact:last-child{ border-right:none; }
}
.fact b { display:block; font-family:var(--fd); font-weight:400; font-size:1.7rem; color:var(--acid); line-height:1.1; }
.fact b.grn { color:var(--grn); }
.fact b.blu { color:var(--blu); }
.fact span { font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }

/* ---------- Scroll reveal ---------- */
.rv {
  opacity:0; transform:translate3d(0,28px,0);
  transition:opacity 550ms var(--ease), transform 550ms var(--ease);
  will-change:opacity, transform;
}
.rv.on { opacity:1; transform:translate3d(0,0,0); will-change:auto; }
.rv.d1{ transition-delay:70ms; } .rv.d2{ transition-delay:150ms; }
.rv.d3{ transition-delay:230ms; } .rv.d4{ transition-delay:310ms; }
/* Mobiel: kortere afstand en duur — voelt direct i.p.v. stroef */
@media (max-width:700px){
  .rv { transform:translate3d(0,16px,0); transition-duration:380ms; }
  .rv.d1{ transition-delay:40ms; } .rv.d2{ transition-delay:80ms; }
  .rv.d3{ transition-delay:120ms; } .rv.d4{ transition-delay:160ms; }
}

/* ---------- Dienst-kaarten (flood invert) ---------- */
.dc {
  border:var(--bord); background:var(--panel); padding:1.6rem 1.4rem 1.5rem;
  display:flex; flex-direction:column; gap:.8rem; min-height:230px;
  position:relative; overflow:hidden; text-decoration:none;
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.dc::before {
  content:""; position:absolute; inset:0; background:var(--acid);
  transform:translateY(101%); transition:transform 280ms var(--ease); z-index:0;
}
.dc:hover::before, .dc:focus-visible::before { transform:translateY(0); }
.dc:hover { transform:translate(-3px,-3px); box-shadow:6px 6px 0 0 var(--acid); }
.dc > * { position:relative; z-index:1; transition:color 200ms; }
.dc .dc-num { font-family:var(--fd); font-size:.95rem; color:var(--mut); }
.dc h3 { font-size:1.7rem; }
.dc p { font-size:.92rem; }
.dc .dc-go { margin-top:auto; font-weight:800; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acid); }
.dc:hover h3, .dc:hover .dc-num { color:var(--black); }
.dc:hover p { color:#2a2a15; }
.dc:hover .dc-go { color:var(--black); }

/* groene & blauwe kaartvarianten */
.dc.dc-grn::before { background:var(--grn); }
.dc.dc-grn:hover { box-shadow:6px 6px 0 0 var(--grn); }
.dc.dc-grn .dc-go { color:var(--grn); }
.dc.dc-grn:hover .dc-go { color:var(--black); }
.dc.dc-blu::before { background:var(--blu); }
.dc.dc-blu:hover { box-shadow:6px 6px 0 0 var(--blu); }
.dc.dc-blu .dc-go { color:var(--blu); }
.dc.dc-blu:hover .dc-go { color:var(--black); }

/* ---------- Tariefkaarten (op gekleurde secties) ---------- */
.sec-grn .tc { background:var(--grn); color:#16230f; }
.sec-blu .tc { background:var(--blu); color:#101a2e; }
.tc {
  border:2px solid var(--black); background:var(--acid); color:#2a2a15;
  padding:1.5rem 1.3rem; display:flex; flex-direction:column;
  box-shadow:5px 5px 0 0 var(--black);
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.tc:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 0 var(--black); }
.tc .tc-time { font-weight:800; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.tc h3 { margin:.3rem 0 .1rem; font-size:2rem; }
.tc .tc-sub { font-size:.85rem; margin-bottom:1rem; }
.tc .tc-price { font-family:var(--fd); font-size:3.2rem; line-height:1; color:var(--black); }
.tc .tc-btw { font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin-bottom:1.1rem; }
.tc ul { list-style:none; font-size:.86rem; margin-bottom:1.3rem; }
.tc ul li { padding:.42rem 0; border-bottom:1px solid rgba(12,12,12,.18); }
.tc ul li:last-child { border-bottom:none; }
.tc .btn { margin-top:auto; width:100%; }
.tc.tc-hot { position:relative; }
.tc.tc-hot::after {
  content:"Populair"; position:absolute; top:-14px; right:12px;
  background:var(--black); color:var(--acid);
  font-family:var(--fb); font-weight:800; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.35rem .7rem; transform:rotate(3deg);
}

/* donkere variant (abonnementen / podcast) */
.tc-dark { border:var(--bord); background:var(--panel); padding:1.6rem 1.4rem; display:flex; flex-direction:column; transition:transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.tc-dark:hover { transform:translate(-3px,-3px); box-shadow:7px 7px 0 0 var(--acid); }
.tc-dark .tc-price { font-family:var(--fd); font-size:2.9rem; line-height:1; color:var(--acid); margin:.9rem 0 .1rem; }
.tc-dark .tc-btw { font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:1rem; }
.tc-dark ul { list-style:none; font-size:.87rem; margin:0 0 1.3rem; }
.tc-dark ul li { padding:.45rem 0; border-bottom:1px solid var(--line); }
.tc-dark ul li:last-child { border-bottom:none; }
.tc-dark .btn { margin-top:auto; width:100%; }
.tc-dark.hot { border-color:var(--acid); }
.tc-dark.hot h3 { color:var(--acid); }

/* ---------- Foto's ---------- */
.frame {
  border:var(--bord); position:relative; overflow:hidden;
  box-shadow:8px 8px 0 0 var(--acid);
}
.frame.f-grn { box-shadow:8px 8px 0 0 var(--grn); }
.frame.f-blu { box-shadow:8px 8px 0 0 var(--blu); }
.frame img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform 700ms var(--ease), filter 400ms; filter:saturate(.85) contrast(1.04); }
.frame:hover img { transform:scale(1.045); filter:saturate(1) contrast(1.05); }
.frame .f-tag {
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--black); color:var(--acid);
  font-weight:800; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.45rem .8rem; border-top:2px solid var(--acid); border-right:2px solid var(--acid);
}
.frame.tall img { aspect-ratio:3/4; }
.frame.wide img { aspect-ratio:16/9; }

/* collage-grid studio */
.gal { display:grid; gap:1.4rem; grid-template-columns:1fr 1fr; }
.gal .frame:nth-child(3n) { transform:rotate(.6deg); }
.gal .frame:nth-child(3n+1) { transform:rotate(-.5deg); }
.gal .frame:hover { transform:rotate(0) translate(-2px,-2px); }
@media (min-width:900px){ .gal{ grid-template-columns:repeat(3,1fr);} }

/* ---------- Gear-lijst ---------- */
.gear { border:var(--bord); }
.gear-i { display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1.1rem; border-bottom:var(--bord); align-items:baseline; }
.gear-i:last-child { border-bottom:none; }
.gear-i span { font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); }
.gear-i strong { color:var(--ink); font-weight:700; font-size:.95rem; text-align:right; }

/* ---------- Stappen ---------- */
.step { border-top:4px solid var(--acid); padding-top:1rem; }
.step .st-n { font-family:var(--fd); font-size:2.6rem; color:var(--acid); line-height:1; }
.sec-acid .step, .sec-grn .step, .sec-blu .step { border-color:var(--black); }
.sec-acid .step .st-n, .sec-grn .step .st-n, .sec-blu .step .st-n { color:var(--black); }
.step h4 { margin:.4rem 0 .4rem; font-size:1.05rem; }
.step p { font-size:.9rem; }

/* ---------- Genre-tags ---------- */
.tags { display:flex; flex-wrap:wrap; gap:.6rem; }
.tags span {
  border:var(--bord); padding:.5rem 1.05rem;
  font-weight:800; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body);
  transition:background 150ms, color 150ms, transform 150ms var(--ease);
}
.tags span:hover { background:var(--acid); color:var(--black); border-color:var(--black); transform:rotate(-1.5deg); }
.sec-blu .tags span { border:2px solid var(--black); color:#101a2e; }
.sec-blu .tags span:hover { background:var(--black); color:var(--blu); }
.sec-grn .tags span { border:2px solid var(--black); color:#16230f; }
.sec-grn .tags span:hover { background:var(--black); color:var(--grn); }

/* ---------- FAQ ---------- */
.faq-item { border:var(--bord); border-bottom:none; background:var(--panel); }
.faq-item:last-child { border-bottom:var(--bord); }
.faq-q {
  width:100%; background:none; border:none; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--fb); font-weight:800; font-size:.98rem; text-align:left;
  padding:1.15rem 1.2rem; min-height:56px;
}
.faq-ic { font-family:var(--fd); font-size:1.5rem; color:var(--acid); transition:transform 250ms var(--ease); flex-shrink:0; }
.faq-item.open .faq-ic { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 320ms var(--ease); }
.faq-a p { padding:0 1.2rem 1.2rem; font-size:.93rem; }
.faq-item.open .faq-a { max-height:280px; }

/* ---------- CTA-blok ---------- */
.shout h2 { font-size:clamp(2.6rem,9vw,5.5rem); }

/* ---------- Spotify embeds (Gemaakt in MSA) ---------- */
.sp-embed { border:var(--bord); box-shadow:6px 6px 0 0 var(--grn); background:var(--panel); }
.sp-embed.sp-blu { box-shadow:6px 6px 0 0 var(--blu); }
.sp-embed iframe { display:block; width:100%; height:152px; border:0; }

/* ---------- Reviews ---------- */
.rev-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 2rem; }
.rev-score { font-family:var(--fd); font-size:clamp(3.5rem,10vw,6rem); color:var(--acid); line-height:1; }
.rev-stars { color:var(--acid); font-size:1.3rem; letter-spacing:.15em; }
.rev-sub { font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.rev-card {
  border:var(--bord); background:var(--panel); padding:1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.rev-card:hover { transform:translate(-3px,-3px); box-shadow:6px 6px 0 0 var(--blu); }
.rev-card .rq { font-family:var(--fd); font-size:2.6rem; line-height:.5; color:var(--blu); }
.rev-card p { font-size:.95rem; color:var(--ink); }
.rev-card footer { margin-top:auto; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
.rev-card footer .st { color:var(--acid); letter-spacing:.1em; }

/* ---------- Contact ---------- */
.ctc { border:var(--bord); background:var(--panel); padding:1.6rem 1.4rem; }
.ctc-row { display:flex; flex-direction:column; gap:.15rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.ctc-row:last-of-type { border-bottom:none; }
.ctc-lbl { font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
.ctc-val, .ctc-val a { color:var(--ink); font-weight:700; text-decoration:none; font-size:1.02rem; }
.ctc-val a:hover { color:var(--acid); }

/* form */
.fld { margin-bottom:1.15rem; }
.fld label { display:block; font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin-bottom:.45rem; }
.fld input, .fld select, .fld textarea {
  width:100%; background:var(--bg); border:var(--bord); color:var(--ink);
  font-family:var(--fb); font-size:1rem; padding:.85rem 1rem; border-radius:0;
  outline:none; transition:border-color 150ms, box-shadow 150ms;
  appearance:none; -webkit-appearance:none;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color:var(--acid); box-shadow:4px 4px 0 0 var(--acid); }
.fld textarea { resize:vertical; min-height:120px; }
.fld select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F3F160' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.f2 { display:grid; gap:0 1rem; }
@media (min-width:560px){ .f2{ grid-template-columns:1fr 1fr; } }

/* ---------- Footer ---------- */
footer { border-top:var(--bord); background:var(--bg); }
.ft-big {
  font-family:var(--fd); text-transform:uppercase; line-height:.92;
  font-size:clamp(2.6rem,10.5vw,8.5rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(245,245,245,.3);
  padding:2.5rem 0 0; user-select:none; white-space:nowrap; overflow:hidden;
}
.ft-grid { display:grid; gap:2rem; padding:2.5rem 0; }
@media (min-width:768px){ .ft-grid{ grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; } }
.ft-brand img { height:40px; margin-bottom:1rem; }
.ft-brand p { font-size:.9rem; max-width:32ch; }
.ft-col h4 { font-size:.78rem; letter-spacing:.2em; margin-bottom:.9rem; color:var(--acid); }
.ft-col h4.grn { color:var(--grn); }
.ft-col h4.blu { color:var(--blu); }
.ft-col ul { list-style:none; }
.ft-col a { color:var(--body); text-decoration:none; font-size:.92rem; display:inline-block; padding:.28rem 0; transition:color 150ms, transform 150ms var(--ease); }
.ft-col a:hover { color:var(--acid); transform:translateX(4px); }
.ft-bot {
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  border-top:1px solid var(--line); padding:1.3rem 0 1.6rem;
  font-size:.78rem; color:var(--mut);
}

/* ---------- Pagina-hero (subpagina's) ---------- */
.ph { padding:9.5rem 0 3.5rem; border-bottom:var(--bord); position:relative; overflow:hidden; }
.ph h1 { font-size:clamp(2.9rem,10.5vw,6.5rem); margin:.3rem 0 1rem; }
.ph p { color:var(--ink); font-size:1.05rem; max-width:52ch; }
.ph-wm {
  position:absolute; right:-2rem; bottom:-1.5rem; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--fd); text-transform:uppercase; line-height:1;
  font-size:clamp(7rem,22vw,17rem);
  color:transparent; -webkit-text-stroke:1px rgba(243,241,96,.14);
}
.ph .wrap { position:relative; z-index:1; }

/* ---------- Diversen ---------- */
.hr-acid { height:4px; background:var(--acid); border:none; width:64px; margin:1.2rem 0; }
.center { text-align:center; }
.mt1{margin-top:1rem;} .mt2{margin-top:2rem;} .mt3{margin-top:3rem;} .mb2{margin-bottom:2rem;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv, .h-in { opacity:1; transform:none; }
  .mq-track { animation:none; }
}