/* =====================================================================
   BokFilms — stylesheet (donker/rood, cinematisch)
   Nagebouwd naar de huisstijl: accent #C0282E, achtergrond #191A1A,
   koppen in Poppins, tekst in Manrope.
   ===================================================================== */

:root {
  --accent:      #c0282e;   /* BokFilms rood */
  --accent-2:    #e0424a;   /* lichter rood */
  --accent-dark: #9e1f24;
  --bg:          #191a1a;   /* donkere achtergrond */
  --bg-2:        #121313;   /* nog donkerder (footer/kaarten) */
  --bg-3:        #232525;
  --ink:         #f4f4f5;   /* lichte tekst */
  --muted:       #a9a9b0;   /* grijze tekst */
  --line:        #333535;
  --maxw:        1400px;
  --radius:      16px;
  --shadow:      0 18px 50px rgba(0,0,0,.45);
  --font-head: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.1; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block; font-family: var(--font-head);
  font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 1rem;
}
.lead { font-size: 1.2rem; color: var(--muted); }
.text-muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: .9rem 1.6rem; border-radius: 999px; font-family: var(--font-head);
  font-weight: 600; border: 2px solid var(--accent); cursor: pointer;
  transition: transform .12s ease, background .2s ease; font-size: .98rem;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.25); }
.btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn.light { background: #fff; color: #191a1a; border-color: #fff; }
.btn.light:hover { background: #eee; border-color: #eee; }

/* =====================================================================
   Header — logo links, gecentreerd menu (één regel)
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(20,20,20,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { display: flex; align-items: center; gap: 1rem; padding: 12px 24px; max-width: 1360px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: auto; }
.wordmark { font-family: var(--font-head); color: #fff; font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1; }
.wordmark b { font-weight: 800; }
.wordmark .dot { color: var(--accent); }

.nav-center { flex: 1; display: flex; justify-content: center; }
.nav-links { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.nav-links > li > a, .nav-links > li > a.navtop {
  color: #e9e9ee; font-family: var(--font-head); font-size: .93rem; font-weight: 500;
  padding: .45rem .62rem; border-radius: 8px; display: block; white-space: nowrap; cursor: pointer;
}
.nav-links > li > a:hover, .nav-links > li:hover > a.navtop { color: #fff; text-decoration: none; }
.nav-links > li > a.active { color: #fff; border-bottom: 2px solid var(--accent); border-radius: 0; }

/* dropdown Diensten */
.has-drop { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: #1e1f1f; border: 1px solid var(--line); border-radius: 12px; padding: .5rem;
  min-width: 210px; opacity: 0; visibility: hidden; transition: .16s ease; box-shadow: var(--shadow);
  list-style: none; margin: 0; z-index: 50;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; color: #e4e4e8; padding: .5rem .8rem; border-radius: 8px; font-size: .92rem; font-family: var(--font-head); }
.dropdown a:hover { background: var(--accent); color: #fff; text-decoration: none; }

.nav-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: .4rem; font-size: 1.7rem; line-height: 1; margin-left: auto; }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav-center { position: absolute; left: 0; right: 0; top: 100%; background: #161717; display: none; padding: 8px 16px 18px; border-top: 1px solid rgba(255,255,255,.08); }
  .nav-center.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .nav-links > li > a, .nav-links > li > a.navtop { padding: .8rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: transparent; }
  .has-drop:hover .dropdown { transform: none; }
}

/* =====================================================================
   Rode golf-divider (bewegend) — golft aan boven- én onderkant
   ===================================================================== */
.wave { position: relative; display: block; width: 100%; height: 200px; overflow: hidden; line-height: 0; z-index: 3; }
.wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; }
.wave .back path { fill: var(--accent-dark); opacity: .6; }
.wave .front path { fill: var(--accent); }
.wave .back { animation: waveMove 26s linear infinite; }
.wave .front { animation: waveMove 15s linear infinite reverse; }
.wave.flip { transform: scaleY(-1); }
@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   Spotlight-achtergrond — donker met zacht ademende rode gloed (full-bleed)
   ===================================================================== */
.spotlight { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #241012 0%, #17100f 45%, var(--bg-2) 100%); }
.spotlight > .wrap { position: relative; z-index: 3; }
.sl-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sl-layer .sl { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; opacity: .5; }
.sl-layer .sl.a { width: 60vw; height: 60vw; left: -8vw; top: -18vw; background: radial-gradient(circle, rgba(192,40,46,.55), rgba(192,40,46,0) 62%); animation: breathe1 14s ease-in-out infinite alternate; }
.sl-layer .sl.b { width: 52vw; height: 52vw; right: -6vw; top: 8vw; background: radial-gradient(circle, rgba(224,66,74,.42), rgba(224,66,74,0) 60%); animation: breathe2 18s ease-in-out infinite alternate; }
.sl-layer .sl.c { width: 46vw; height: 46vw; left: 32vw; bottom: -20vw; background: radial-gradient(circle, rgba(158,31,36,.5), rgba(158,31,36,0) 62%); animation: breathe3 16s ease-in-out infinite alternate; }
@keyframes breathe1 { from { transform: scale(.9); opacity: .35; } to { transform: scale(1.18); opacity: .6; } }
@keyframes breathe2 { from { transform: scale(1.1); opacity: .55; } to { transform: scale(.85); opacity: .3; } }
@keyframes breathe3 { from { transform: scale(.95) translateX(-4vw); opacity: .3; } to { transform: scale(1.2) translateX(4vw); opacity: .55; } }
@media (prefers-reduced-motion: reduce){ .sl-layer .sl { animation: none; } }

/* zachte, onscherpe pluisjes (backlit bokeh) die van links naar rechts waaien */
.particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.particles i {
  position: absolute; left: -6%; display: block; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 40% 40%, rgba(255,230,224,.95), rgba(255,185,176,.3) 48%, rgba(255,150,150,0) 74%);
  will-change: transform, opacity; animation: gust1 9s linear infinite;
}
.particles i:nth-child(6n+1) { animation-name: gust1; }
.particles i:nth-child(6n+2) { animation-name: gust2; }
.particles i:nth-child(6n+3) { animation-name: gust3; }
.particles i:nth-child(6n+4) { animation-name: gust4; }
.particles i:nth-child(6n+5) { animation-name: gust5; }
.particles i:nth-child(6n)   { animation-name: gust6; }
.particles i:nth-child(1){top:78%;width:10px;height:10px;filter:blur(3px);animation-duration:13.6s;animation-delay:-1s}
.particles i:nth-child(2){top:40%;width:6px;height:6px;filter:blur(2px);animation-duration:18.7s;animation-delay:-6s}
.particles i:nth-child(3){top:88%;width:14px;height:14px;filter:blur(4.2px);animation-duration:11.9s;animation-delay:-3.5s}
.particles i:nth-child(4){top:20%;width:5px;height:5px;filter:blur(1.8px);animation-duration:20.4s;animation-delay:-9s}
.particles i:nth-child(5){top:62%;width:9px;height:9px;filter:blur(2.6px);animation-duration:15.3s;animation-delay:-2s}
.particles i:nth-child(6){top:12%;width:7px;height:7px;filter:blur(2px);animation-duration:17s;animation-delay:-7.5s}
.particles i:nth-child(7){top:84%;width:13px;height:13px;filter:blur(3.8px);animation-duration:11s;animation-delay:-4.5s}
.particles i:nth-child(8){top:34%;width:6px;height:6px;filter:blur(2px);animation-duration:19.6s;animation-delay:-10.5s}
.particles i:nth-child(9){top:70%;width:11px;height:11px;filter:blur(3px);animation-duration:14.5s;animation-delay:-1.5s}
.particles i:nth-child(10){top:18%;width:8px;height:8px;filter:blur(2.2px);animation-duration:17.8s;animation-delay:-8s}
.particles i:nth-child(11){top:90%;width:14px;height:14px;filter:blur(4px);animation-duration:12.8s;animation-delay:-5s}
.particles i:nth-child(12){top:48%;width:6px;height:6px;filter:blur(2px);animation-duration:20.4s;animation-delay:-11s}
.particles i:nth-child(13){top:26%;width:9px;height:9px;filter:blur(2.6px);animation-duration:16.2s;animation-delay:-3s}
.particles i:nth-child(14){top:74%;width:12px;height:12px;filter:blur(3.4px);animation-duration:11.9s;animation-delay:-6.5s}
.particles i:nth-child(15){top:38%;width:7px;height:7px;filter:blur(2px);animation-duration:18.7s;animation-delay:-2.5s}
.particles i:nth-child(16){top:86%;width:12px;height:12px;filter:blur(3.6px);animation-duration:13.6s;animation-delay:-9.5s}
.particles i:nth-child(17){top:56%;width:8px;height:8px;filter:blur(2.4px);animation-duration:17s;animation-delay:-4s}
.particles i:nth-child(18){top:66%;width:6px;height:6px;filter:blur(2px);animation-duration:10.2s;animation-delay:-7s}
.particles i:nth-child(19){top:30%;width:10px;height:10px;filter:blur(3px);animation-duration:15.3s;animation-delay:-1s}
.particles i:nth-child(20){top:52%;width:5px;height:5px;filter:blur(1.8px);animation-duration:20.4s;animation-delay:-10s}
@keyframes gust1 { 0%{transform:translate(0,0) scaleX(1.4);opacity:0} 9%{opacity:.9} 25%{transform:translate(30vw,-34px) scaleX(1.7)} 50%{transform:translate(58vw,22px) scaleX(1.8)} 75%{transform:translate(88vw,-26px) scaleX(1.7)} 86%{opacity:.75} 100%{transform:translate(118vw,30px) scaleX(1.5);opacity:0} }
@keyframes gust2 { 0%{transform:translate(0,0) scaleX(1.5);opacity:0} 10%{opacity:.85} 25%{transform:translate(30vw,40px) scaleX(1.9)} 50%{transform:translate(60vw,-32px) scaleX(2)} 75%{transform:translate(90vw,44px) scaleX(1.8)} 84%{opacity:.7} 100%{transform:translate(120vw,-28px) scaleX(1.6);opacity:0} }
@keyframes gust3 { 0%{transform:translate(0,0) scaleX(1.3);opacity:0} 8%{opacity:.95} 25%{transform:translate(28vw,-16px) scaleX(1.6)} 50%{transform:translate(56vw,26px) scaleX(1.7)} 75%{transform:translate(86vw,-14px) scaleX(1.6)} 88%{opacity:.8} 100%{transform:translate(116vw,34px) scaleX(1.45);opacity:0} }
@keyframes gust4 { 0%{transform:translate(0,0) scaleX(1.45);opacity:0} 9%{opacity:.88} 25%{transform:translate(32vw,-46px) scaleX(1.8)} 50%{transform:translate(62vw,-54px) scaleX(1.9)} 75%{transform:translate(92vw,-30px) scaleX(1.7)} 85%{opacity:.72} 100%{transform:translate(119vw,-10px) scaleX(1.5);opacity:0} }
@keyframes gust5 { 0%{transform:translate(0,0) scaleX(1.4);opacity:0} 10%{opacity:.9} 25%{transform:translate(30vw,42px) scaleX(1.7)} 50%{transform:translate(58vw,54px) scaleX(1.85)} 75%{transform:translate(88vw,24px) scaleX(1.7)} 86%{opacity:.76} 100%{transform:translate(118vw,-14px) scaleX(1.5);opacity:0} }
@keyframes gust6 { 0%{transform:translate(0,0) scaleX(1.35);opacity:0} 8%{opacity:.92} 25%{transform:translate(29vw,-24px) scaleX(1.65)} 50%{transform:translate(57vw,30px) scaleX(1.75)} 75%{transform:translate(87vw,-34px) scaleX(1.65)} 88%{opacity:.78} 100%{transform:translate(117vw,20px) scaleX(1.45);opacity:0} }
@media (prefers-reduced-motion: reduce){ .particles i { animation: none; opacity: .4; } }

/* =====================================================================
   Rode golf-achtergrond met heen-en-weer driftende artifacts
   ===================================================================== */
.redwaves { position: relative; overflow: hidden; }
.redwaves.full { background: linear-gradient(155deg, #2c0c0e 0%, #6f171b 38%, #c0282e 74%, #9e1f24 100%); }
.redwaves > .wrap { position: relative; z-index: 3; }
.rw-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rw-layer .wv { position: absolute; left: 0; width: 200%; height: 180%; }
.rw-layer .wv svg { width: 100%; height: 100%; }
.rw-layer .wv1 { top: -48%; animation: waveMove 42s linear infinite; }
.rw-layer .wv1 path { fill: #cf2126; opacity: .5; }
.rw-layer .wv2 { top: -28%; animation: waveMove 64s linear infinite reverse; }
.rw-layer .wv2 path { fill: #8f1418; opacity: .6; }
.rw-layer .wv3 { top: -8%; animation: waveMove 52s linear infinite; }
.rw-layer .wv3 path { fill: #d8302f; opacity: .42; }
.redwaves:not(.full) .rw-layer .wv { mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce){ .rw-layer .wv { animation: none; } }

/* leesbaarheid van accordeons/koppen op de volle rode achtergrond */
.redwaves.full .service > h3, .redwaves.full h2, .redwaves.full .section-head h2 { color: #fff; }
.redwaves.full .acc details { border-top-color: rgba(255,255,255,.22); }
.redwaves.full .acc details:last-child { border-bottom-color: rgba(255,255,255,.22); }
.redwaves.full .acc summary, .redwaves.full .acc summary::before { color: #fff; }
.redwaves.full .acc details p, .redwaves.full .acc details ul { color: rgba(255,255,255,.9); }
.redwaves.full .text-muted { color: rgba(255,255,255,.85); }

/* leesbaarheid op de spotlight-achtergrond */
.spotlight h2, .spotlight .section-head h2 { color: #fff; }
.spotlight .text-muted { color: rgba(255,255,255,.8); }
.acc.on-dark details { border-top-color: rgba(255,255,255,.18); }
.acc.on-dark details:last-child { border-bottom-color: rgba(255,255,255,.18); }
.acc.on-dark summary { color: #fff; }
.acc.on-dark summary::before { color: var(--accent-2); }
.acc.on-dark details p, .acc.on-dark details ul { color: rgba(255,255,255,.88); }

/* =====================================================================
   Hero — showreel begint direct onder het menu, rode golven erachter
   ===================================================================== */
.hero { position: relative; background: var(--bg); overflow: hidden; padding: 0; }
.hero > .hero-video-wrap { position: relative; z-index: 2; }
/* Iets kleiner en met flinke ronde hoeken onderin */
.hero-video-wrap {
  position: relative; width: 100%; aspect-ratio: 2.55 / 1; max-height: 60vh; background: #000; overflow: hidden;
  border-bottom-left-radius: clamp(64px, 11vw, 190px); border-bottom-right-radius: clamp(64px, 11vw, 190px);
}
.hero-video-wrap video, .hero-video-wrap .video-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video-wrap .hero-embed { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%) scale(1.35); border: 0; pointer-events: none; }
.hero-video-wrap .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce){ .hero-video-wrap .hero-poster { animation: none; } }
.video-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: radial-gradient(circle at 50% 40%, #3a1417 0%, #140b0c 60%, #0b0b0b 100%);
  color: #d98a8e; font-family: var(--font-head); text-align: center; padding: 1rem;
}
.video-ph .play { width: 74px; height: 74px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color:#fff; box-shadow: 0 0 0 10px rgba(192,40,46,.18); }

.about-intro { max-width: none; }
.about-intro h1 { margin: 0; }
/* rode streep precies onder de woorden "groeide uit tot BokFilms" */
.about-intro .uline { background: linear-gradient(var(--accent), var(--accent)) no-repeat left 100% / 100% 6px; padding-bottom: .14em; }

.hero-slim { padding: 0; }
.hero-slim .hero-inner {
  position: relative; min-height: 44vh; display: flex; align-items: flex-end;
  background-color: #0d0e0e; background-size: cover; background-position: center;
}
.hero-slim.short .hero-inner { min-height: 30vh; }
/* verloop onder de tekst: bij een lichte bannerfoto is een schaduw alleen
   niet genoeg om witte letters leesbaar te houden */
.hero-slim .hero-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.78) 100%);
}
.hero-slim .wrap { position: relative; z-index: 3; padding-top: 4rem; padding-bottom: 3rem; }
.hero-slim h1, .hero-slim .lead, .hero-slim .eyebrow { text-shadow: 0 2px 24px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.6); }
.hero-slim h1 { color: #fff; }
.hero-slim .lead { color: #f0f0f0; }

/* =====================================================================
   Stage-pagina + herbruikbare bewegende grain
   ===================================================================== */
.stage-page { position: relative; overflow: hidden; }
.stage-page > .wrap { position: relative; z-index: 2; }
.stage-page h1 { margin-bottom: 1.2rem; }
.stage-page h2 { margin-top: 2.4rem; margin-bottom: .8rem; }
.stage-page ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.stage-page ul li { margin-bottom: .5rem; }
/* Lagere cover-foto (± halve hoogte) met nette grain */
.stage-cover { position: relative; max-width: 1100px; aspect-ratio: 2.2 / 1; margin: 0 auto 2.6rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.stage-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }

/* Stage-video: opent op YouTube (embedden staat uit voor deze video) */
.video-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; aspect-ratio: 16/9; margin: 2.6rem 0 1rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000 center/cover no-repeat; text-decoration: none; }
.video-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); transition: background .2s ease; }
.video-link:hover::before { background: rgba(0,0,0,.4); }
.video-link:hover { text-decoration: none; }
.video-link .yt-play { position: relative; top: auto; left: auto; transform: none; z-index: 2; }
.video-link:hover .yt-play { transform: scale(1.08); }
.video-link .vl-label { position: relative; z-index: 2; color: #fff; font-family: var(--font-head); font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.7); }

/* De filmkorrel is eruit. Hij stond wel in de stylesheet maar werd nergens
   op de pagina's toegepast, dus visueel verandert er niets; het scheelt
   alleen twee draaiende animaties en wat gewicht. */

/* =====================================================================
   Secties
   ===================================================================== */
section { padding: 5rem 0; position: relative; }
section.soft { background: var(--bg-2); }
.section-head { max-width: 90ch; margin-bottom: 2.6rem; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 72ch; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img, .split-media .ph { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.portrait-hover img { transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease; will-change: transform; }
.portrait-hover:hover img { transform: scale(1.05) rotate(-1.6deg); box-shadow: 0 34px 70px rgba(0,0,0,.55); }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; gap: 1.6rem; } .split.reverse .split-media { order: 0; } }

.grid { display: grid; gap: 1.5rem; }
.grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.grid.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* placeholder blokjes */
.ph { background: var(--bg-3); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; color: #6f7070; font-size: .82rem; aspect-ratio: 16/10; border-radius: var(--radius); text-align: center; padding: 1rem; }

/* kaarten */
.card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; transition: transform .15s ease, border-color .2s ease; }
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card h3 { margin-bottom: .4rem; }
.card .price { font-family: var(--font-head); font-weight: 700; color: var(--accent-2); }
.card ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.card ul li { margin-bottom: .35rem; }
a.card:hover { text-decoration: none; }

/* =====================================================================
   USP-sectie
   ===================================================================== */
.usp { position: relative; overflow: hidden; }
.usp > .wrap { position: relative; z-index: 3; max-width: 1720px; }
/* home: bannervideo zit IN de rode sectie, zodat de ronde hoeken naadloos overlopen */
.hero-usp { padding-top: 0; }
.hero-usp .hero-video-wrap { position: relative; z-index: 2; margin: 0 auto 4.5rem; }

/* Service-kaarten (home) */
.services { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.2rem; align-items: start; }
@media (max-width: 900px){ .services { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.service { position: relative; }
.service .thumb {
  position: relative; border-radius: var(--radius); overflow: hidden; background: #202121; box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
}
.service .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.service:hover .thumb img { transform: scale(1.04); }
/* het plaatje en de kop linken naar de bijbehorende dienstenpagina */
.service a.thumb { display: block; text-decoration: none; }
.service a.thumb:hover { text-decoration: none; }
.service a.thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.service > h3 a.service-link { color: inherit; text-decoration: none; }
.service > h3 a.service-link:hover { color: var(--accent-2); text-decoration: none; }
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-7%,5%); }
  40% { transform: translate(5%,-7%); } 60% { transform: translate(-5%,4%); }
  80% { transform: translate(6%,7%); } 100% { transform: translate(-4%,-5%); }
}
.service > h3 { margin: 1.3rem 0 .7rem; font-size: clamp(1.35rem,1.9vw,1.65rem); min-height: 2.4em; }

/* (filmkorrel verwijderd voor optimalisatie) */

/* accordion */
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: .85rem .2rem; font-family: var(--font-head); font-weight: 500; display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before { content: "+"; color: var(--accent-2); font-weight: 700; width: 1rem; display: inline-block; }
.acc details[open] summary::before { content: "–"; }
.acc details p, .acc details ul { color: var(--muted); padding: 0 0 .9rem 1.6rem; margin: 0; font-size: .96rem; }
.acc details ul { padding-left: 2.6rem; }

/* =====================================================================
   Contact
   ===================================================================== */
.contact { background: var(--bg-2); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; gap: 2rem; } }
.field { margin-bottom: 1rem; }
.field label { display: block; font-family: var(--font-head); font-weight: 500; margin-bottom: .35rem; font-size: .92rem; color: var(--ink); }
.field small { color: var(--muted); font-weight: 400; }
.veld-help { margin: .4rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.field input:not([type=radio]):not([type=checkbox]), .field textarea, .field select {
  width: 100%; padding: .8rem .95rem; border: 1px solid var(--accent-dark); border-radius: 10px;
  font: inherit; color: #fff; background: rgba(192,40,46,.85);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.75); }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid #fff; }
.radios { display: grid; gap: .45rem; }
.radios label { display: flex; align-items: center; gap: .6rem; font-weight: 400; font-family: var(--font-body); color: var(--ink); }
.radios input[type=radio], .radios input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px){ .form-two { grid-template-columns: 1fr; } }
.contact-info ul { padding: 0; margin: 1rem 0 0; list-style: none; }
.contact-info li { margin-bottom: .5rem; }
.social a { display: inline-block; margin-right: .9rem; color: var(--muted); font-weight: 600; }
.social a:hover { color: #fff; }

/* =====================================================================
   Testimonials — peek-carousel (buren zichtbaar, vervaagd)
   ===================================================================== */
.rev-head h2 { white-space: nowrap; }
@media (max-width: 640px){ .rev-head h2 { white-space: normal; } }
.tcarousel { position: relative; }
.tcarousel .track {
  display: flex; gap: 1.5rem; overflow-x: auto;
  padding: 1rem calc(50% - 300px) 2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none;
}
.tcarousel .track:active { cursor: grabbing; }
.tcarousel .track::-webkit-scrollbar { display: none; }
.tcard {
  flex: 0 0 600px; max-width: 82vw; background: var(--accent);
  border-radius: var(--radius); padding: 2.6rem clamp(1.4rem,3vw,2.6rem);
  opacity: .38; transform: scale(.92); transition: opacity .35s ease, transform .35s ease; cursor: grab;
}
.tcard.is-active { opacity: 1; transform: scale(1); }
.tcard blockquote { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: #fff; line-height: 1.45; }
.tcard .by { margin: 1.3rem 0 0; font-weight: 600; color: rgba(255,255,255,.95); }
.tcard .by span { opacity: .8; font-weight: 400; }
.tdots { display: flex; gap: .5rem; justify-content: center; margin-top: .4rem; }
.tdots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #4a4a4a; cursor: pointer; padding: 0; }
.tdots button.on { background: var(--accent); }
@media (max-width: 700px){ .tcarousel .track { padding-left: 1rem; padding-right: 1rem; } .tcard { flex-basis: 84vw; } }

/* numbered list (drone) */
.numbered { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.numbered li { display: flex; gap: 1rem; align-items: flex-start; }
.numbered .n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color:#fff; font-family: var(--font-head); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95rem; }

/* voorbeeldvideo (facade) in een split-media */
.split-media .yt-facade { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

/* =====================================================================
   BokCreators — 3D iPhone die naar de muis draait, met echte schermshot
   ===================================================================== */
.phone3d { perspective: 720px; perspective-origin: 50% 42%; display: flex; justify-content: center; align-items: center; padding: 1.5rem 0; }
/* de telefoon wordt op maat gemaakt door het scherm (zelfde verhouding als de screenshot) */
.phone3d .phone {
  position: relative; width: min(300px, 82%); padding: 12px; border-radius: 46px;
  background: #0a0a0c; transform-style: preserve-3d; transform: rotateY(14deg) rotateX(-6deg); will-change: transform;
}
/* echte iPhone-look: titaniumrand, dubbele binnenrand, diepteschaduw + dikte-illusie */
.phone3d .phone.iphone {
  border: 3px solid #52555e;
  background: linear-gradient(150deg, #40434b 0%, #17181b 42%, #0a0a0c 100%);
  box-shadow:
    0 50px 100px rgba(0,0,0,.65),
    0 0 70px rgba(192,40,46,.14),
    18px 26px 40px rgba(0,0,0,.45),
    inset 0 0 0 6px #050506,
    inset 0 0 0 8px #2a2c33,
    inset 0 3px 5px rgba(255,255,255,.16),
    inset 0 -3px 8px rgba(0,0,0,.55);
}
/* zij- en aan/uitknop, iets naar buiten voor 3D-dikte */
.phone3d .phone.iphone::before { content: ""; position: absolute; left: -5px; top: 24%; width: 4px; height: 48px; border-radius: 3px; background: linear-gradient(90deg,#5a5d66,#2a2c31); box-shadow: 0 66px 0 #34363c, 0 128px 0 #34363c; transform: translateZ(-6px); }
.phone3d .phone.iphone::after { content: ""; position: absolute; right: -5px; top: 30%; width: 4px; height: 74px; border-radius: 3px; background: linear-gradient(270deg,#5a5d66,#2a2c31); transform: translateZ(-6px); }
/* scherm bepaalt de maat: exact de verhouding van de screenshot (645x1258) → niets afgesneden */
.phone3d .screen { position: relative; aspect-ratio: 645 / 1258; border-radius: 34px; overflow: hidden; background: #000; z-index: 1; }
.phone3d .screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* geen island over de screenshot (zou de handle bedekken) */
.phone3d .ip-island { display: none; }
/* het "glansje": schuine glasreflectie + warme edge-glow (glas en metaal), iets naar voren voor diepte */
.phone3d .glare { position: absolute; inset: 0; border-radius: 46px; pointer-events: none; z-index: 3; overflow: hidden; transform: translateZ(16px);
  background: linear-gradient(122deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.12) 13%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 100%); }
.phone3d .glare::after { content: ""; position: absolute; inset: 0; border-radius: 46px;
  background:
    radial-gradient(120% 80% at 116% 6%, rgba(224,66,74,.55), rgba(224,66,74,0) 42%),
    radial-gradient(90% 70% at -16% 102%, rgba(224,66,74,.32), rgba(224,66,74,0) 46%); }

/* =====================================================================
   Prijscalculator BokCreators (data-pcalc)
   ===================================================================== */
.pcalc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem; align-items: start; }
.pcalc [hidden] { display: none !important; }
@media (max-width: 820px){ .pcalc { grid-template-columns: 1fr; } }
.pcalc-controls { display: flex; flex-direction: column; gap: 1.5rem; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.pc-field { display: flex; flex-direction: column; gap: .55rem; }
.pc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pc-label { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0; }
.pc-box { align-self: flex-start; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; padding: .5rem 1.15rem; border-radius: 12px; line-height: 1; }
.pc-badge { background: rgba(192,40,46,.16); color: var(--accent-2); border: 1px solid var(--accent-dark); font-family: var(--font-head); font-weight: 700; font-size: .9rem; padding: .22rem .8rem; border-radius: 999px; white-space: nowrap; }
.pc-help { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.pcalc input[type=range] { width: 100%; accent-color: var(--accent); height: 6px; }
.pc-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); }
.pc-select { width: 100%; padding: .75rem .9rem; border: 1px solid var(--accent-dark); border-radius: 10px; font: inherit; color: #fff; background: rgba(192,40,46,.85); }
.pc-select:focus { outline: 2px solid #fff; }
.pc-channels { border-top: 1px dashed var(--line); padding-top: 1.2rem; }
/* keuzeknoppen naast elkaar: gebruikt op de BokCasts-calculator om te
   kiezen wie er opneemt, audio of video, en welk dagdeel */
.pc-seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-seg button { flex: 1 1 auto; padding: .7rem .9rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .92rem; color: #fff; background: rgba(255,255,255,.05);
  border: 1px solid var(--line); transition: background .18s ease, border-color .18s ease; }
.pc-seg button:hover { background: rgba(192,40,46,.22); }
.pc-seg button.is-sel { background: rgba(192,40,46,.85); border-color: var(--accent-dark); font-weight: 600; }
.pc-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* vast inbegrepen opties staan uitgevinkt-grijs maar tellen wel mee */
.pc-check input:disabled { opacity: .7; }
.pc-check:has(input:disabled) { color: var(--muted); }
.pc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .2rem; }
@media (max-width: 480px){ .pc-checks { grid-template-columns: 1fr; } }
.pc-check { display: flex; align-items: center; gap: .55rem; font-size: .92rem; font-family: var(--font-body); }
.pc-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }

.pcalc-out { position: sticky; top: 92px; background: linear-gradient(160deg, #2a0c0e 0%, #1a1112 100%); border: 1px solid var(--accent-dark); border-radius: var(--radius); padding: 1.8rem; color: #fff; box-shadow: var(--shadow); }
.pcalc-out h3 { color: #fff; margin: 0 0 1.1rem; }
.pcalc-out hr { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 1.1rem 0; }
.pc-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pc-line b { display: block; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: #fff; }
.pc-line > div span { display: block; font-size: .78rem; color: rgba(255,255,255,.68); line-height: 1.4; margin-top: .15rem; }
.pc-val { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: #fff; white-space: nowrap; }
.pc-big { display: flex; flex-direction: column; gap: .35rem; }
.pc-cap { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--accent-2); font-family: var(--font-head); font-weight: 600; }
.pc-amount { font-family: var(--font-head); font-weight: 800; font-size: 2.7rem; line-height: 1; color: #fff; }
.pc-note { font-size: .77rem; color: rgba(255,255,255,.62); line-height: 1.45; }
.pc-once .pc-amount { font-size: 1.7rem; }
.pc-once .pc-amount::before { content: "€"; }
.pc-cta h4 { margin: 0 0 .4rem; color: #fff; font-size: 1.05rem; }
.pc-cta p { font-size: .81rem; color: rgba(255,255,255,.72); line-height: 1.5; margin: 0 0 1.1rem; }

/* totaal video's per maand (onder de schuif) */
.pc-total { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: rgba(192,40,46,.14); border: 1px solid var(--accent-dark); border-radius: 10px; padding: .6rem .9rem; margin-top: .1rem; }
.pc-total span { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: #fff; }
.pc-total b { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--accent-2); }

/* eigen dropdown (geselecteerd = rood, rest neutraal) */
.pc-dd { position: relative; }
.pc-dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .78rem .95rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: #fff; font: inherit; font-family: var(--font-body); cursor: pointer; text-align: left; }
.pc-dd-btn:hover, .pc-dd.open .pc-dd-btn { border-color: var(--accent); }
.pc-dd-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--accent-2); flex: 0 0 auto; transition: transform .2s ease; }
.pc-dd.open .pc-dd-caret { transform: rotate(180deg); }
.pc-dd-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: .35rem; background: #1e1f1f; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: none; }
.pc-dd.open .pc-dd-list { display: block; }
.pc-dd-opt { padding: .62rem .75rem; border-radius: 8px; cursor: pointer; color: #dcdce0; font-size: .95rem; }
.pc-dd-opt:hover { background: var(--bg-3); color: #fff; }
.pc-dd-opt.is-sel { background: var(--accent); color: #fff; }

/* =====================================================================
   Fotografie — galerij met scroll-reveal + parallax (3 kolommen)
   ===================================================================== */
/* auto-balancerende masonry: kolommen eindigen op ongeveer dezelfde hoogte */
.ph-gallery { columns: 3 300px; column-gap: 16px; }
@media (max-width: 720px){ .ph-gallery { columns: 2 160px; } }
@media (max-width: 460px){ .ph-gallery { columns: 1; } }
.ph-gallery .reveal { break-inside: avoid; margin: 0 0 16px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.ph-gallery .reveal.in { opacity: 1; transform: none; }
.ph-gallery .reveal img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce){ .ph-gallery .reveal { opacity: 1; transform: none; transition: none; } }

/* =====================================================================
   Stage — snelle feiten
   ===================================================================== */
.facts { display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.6rem 0 2.2rem; }
@media (max-width:700px){ .facts { grid-template-columns: repeat(2,1fr); } }
@media (max-width:420px){ .facts { grid-template-columns: 1fr; } }
.fact { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .9rem 1rem; display:flex; flex-direction:column; gap:.15rem; transition: border-color .2s ease, transform .15s ease, background .2s ease; }
.fact:hover { border-color: var(--accent); transform: translateY(-3px); background: rgba(192,40,46,.1); }
.fact .fk { font-family: var(--font-head); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color: var(--accent-2); }
.fact .fv { font-weight:600; font-size:.95rem; }
/* inline radiokeuze (bv. aantal podcast-sprekers) */
.radios.radios-inline { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.radios.radios-inline label { gap: .4rem; }

/* team (De kudde) — simpel raster, foto met hover-swap */
.team-title { text-align: center; margin-bottom: 3rem; }
.team-title h1 { margin: 0; }
.members { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
@media (max-width: 900px){ .members { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .members { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }
.member .photo { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-3); }
.member .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 33%; transition: opacity .45s ease, transform .8s ease; }
.member .photo .hover { opacity: 0; }
.member .photo:hover .main { opacity: 0; }
.member .photo:hover .hover { opacity: 1; }
.member .photo.no-hover:hover .main { opacity: 1; }
.member h3 { margin: 1rem 0 .1rem; font-size: 1.25rem; }
/* rood op rood leest niet: op deze pagina een licht roze, dat houdt het
   onderscheid met de witte bio zonder aan leesbaarheid in te boeten */
.member .role { color: #ffd2d3; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
/* de bio's stonden in grijs; op deze pagina met de spotlights leest wit
   prettiger en houdt het geheel meer contrast */
.member p { margin-top: .5rem; color: rgba(255,255,255,.92); font-size: .95rem; }
/* Rens: hover-foto iets lager centreren (ogen niet te hoog) */
.member.is-rens .photo .hover { object-position: center 12%; }
/* spotlight-hover: een echte radial spotlight volgt de persoon; de rest van de
   pagina (behalve de navigatiebalk) dimt eromheen */
.member { transition: transform .3s ease; }
.members .member:hover { transform: translateY(-4px); }
.members .member:hover .photo { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 2px var(--accent); }
/* twee theaterspots: donkere overlay met twee uitgesneden lichtvlekken.
   De unie van beide cirkels is transparant (mask-composite: intersect, want
   elke laag is 0 binnen de cirkel en 1 erbuiten). Centra komen uit main.js. */
.kudde-spot { position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  --x1: 50%; --y1: 50%; --x2: 50%; --y2: 50%; --x3: 50%; --y3: 50%;
  /* staande ellips: een theaterspot op een persoon is hoger dan breed */
  --spot-w: 440px; --spot-h: 700px; }
.kudde-spot.on { opacity: 1; }
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .kudde-spot {
    background: rgba(0,0,0,.85);
    -webkit-mask-image: radial-gradient(ellipse var(--spot-w) var(--spot-h) at var(--x1) var(--y1), transparent 40%, #000 78%),
                        radial-gradient(ellipse var(--spot-w) var(--spot-h) at var(--x2) var(--y2), transparent 40%, #000 78%),
                        radial-gradient(ellipse var(--spot-w) var(--spot-h) at var(--x3) var(--y3), transparent 40%, #000 78%);
            mask-image: radial-gradient(ellipse var(--spot-w) var(--spot-h) at var(--x1) var(--y1), transparent 40%, #000 78%),
                        radial-gradient(ellipse var(--spot-w) var(--spot-h) at var(--x2) var(--y2), transparent 40%, #000 78%),
                        radial-gradient(ellipse var(--spot-w) var(--spot-h) at var(--x3) var(--y3), transparent 40%, #000 78%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
  }
}
@media (max-width: 700px){ .kudde-spot { --spot-w: 300px; --spot-h: 470px; } }
@media (prefers-reduced-motion: reduce){ .member { transition: none; } .kudde-spot { display: none; } }

/* portfolio */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters button { border: 1px solid var(--line); background: transparent; color: var(--ink); padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer; font-family: var(--font-head); font-weight: 500; font-size: .9rem; }
.filters button.active, .filters button:hover { background: var(--accent); color:#fff; border-color: var(--accent); }
.portfolio-item { border-radius: var(--radius); overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); }
.portfolio-item .thumb { aspect-ratio: 16/9; background: #2a2c2c center/cover no-repeat; position: relative; overflow: hidden; }
.portfolio-item .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portfolio-item .thumb .tag { position: absolute; z-index: 3; left: 12px; top: 12px; background: var(--accent); color:#fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .6rem; border-radius: 6px; font-family: var(--font-head); }
.portfolio-item .body { padding: 1.1rem 1.2rem 1.3rem; }
.portfolio-item h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.portfolio-item p { font-size: .93rem; color: var(--muted); margin: 0; }

/* portfolio — magazine/bento-raster met uitgelichte case */
/* Het werk mag breder dan de rest van de site: op een groot scherm bleef er
   anders veel lege ruimte naast staan. De rijen groeien mee met de breedte,
   zodat de tegels niet uitgerekt raken. */
.wrap-breed { max-width: min(1920px, 94vw); }
.pf-bento { display: grid; grid-template-columns: repeat(4,1fr);
  grid-auto-rows: clamp(200px, 17vw, 320px); gap: clamp(.8rem, 1vw, 1.4rem);
  grid-auto-flow: dense; }
.pf-item { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-3); margin: 0; border: 2px solid transparent; transition: border-color .2s ease, transform .15s ease; }
.pf-item.big { grid-column: span 2; grid-row: span 2; }
/* uitgelicht: de eerste case over de volle breedte */
.pf-item.hero { grid-column: span 4; grid-row: span 2; }
.pf-item.hero .pf-cap { padding: 1.6rem 1.8rem 1.8rem; }
.pf-item.hero .pf-cap h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.pf-item.hero .pf-cap p { max-height: 7em; opacity: .95; font-size: .95rem; max-width: 60ch; }
.pf-item.hero .pf-play .yt-play { width: 84px; height: 84px; }
.pf-item.wide { grid-column: span 2; }
.pf-item.tall { grid-row: span 2; }
.pf-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pf-item .pf-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: linear-gradient(150deg,#2a0d10,#7a1418); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.pf-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.86)); transition: background .3s ease; }
.pf-item:hover { border-color: var(--accent); transform: translateY(-4px); }
.pf-item:hover img { transform: scale(1.06); }
/* tegel met video: de hele tegel is een knop naar de theatermodus */
.pf-play { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent; cursor: pointer; }
.pf-play .yt-play { width: 58px; height: 58px; opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.pf-item.has-video:hover .pf-play .yt-play,
.pf-play:focus-visible .yt-play { opacity: 1; }
.pf-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.pf-item.big .pf-play .yt-play { width: 72px; height: 72px; }
/* op aanraakschermen is er geen hover, dus daar altijd tonen */
@media (hover: none){ .pf-play .yt-play { opacity: .9; } }

.pf-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.2rem 1.25rem; pointer-events: none; }
.pf-tag { display: inline-block; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 6px; margin-bottom: .5rem; }
.pf-cap h3 { color: #fff; margin: 0; font-size: 1.15rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.pf-cap p { color: rgba(255,255,255,.85); font-size: .86rem; margin: .35rem 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; }
.pf-item:hover .pf-cap p { max-height: 7em; opacity: 1; }
.pf-item.big .pf-cap h3 { font-size: 1.6rem; }
.pf-item.big .pf-cap p { max-height: 7em; opacity: .95; }
@media (max-width: 900px){ .pf-bento { grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; } .pf-item.big, .pf-item.wide, .pf-item.hero { grid-column: span 2; } .pf-item.tall { grid-row: span 1; } }
@media (max-width: 560px){ .pf-bento { grid-template-columns: 1fr; grid-auto-rows: 220px; } .pf-item.big, .pf-item.wide, .pf-item.hero { grid-column: span 1; } .pf-item.big { grid-row: span 1; } .pf-cap p { max-height: 7em; opacity: 1; } }

/* stagevideo in eigen player */
.stage-video-wrap { margin: 2.6rem 0 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.stage-video-wrap .yt-facade { aspect-ratio: 16/9; }

/* gallery — bredere foto's met meer ruimte */
.gallery { columns: 2 340px; column-gap: 18px; }
.gallery img, .gallery .ph { width: 100%; margin: 0 0 18px; border-radius: 10px; break-inside: avoid; aspect-ratio: auto; }
.gallery .ph { aspect-ratio: 3/4; }
/* fotografie-galerij: bijna schermbreed, drie kolommen */
.gallery-wrap { width: 100%; max-width: 2000px; margin: 0 auto; padding: 0 clamp(14px, 2vw, 40px); }
.gallery.three { columns: 3 300px; column-gap: 16px; }
.gallery.three img { margin: 0 0 16px; }
@media (max-width: 720px){ .gallery.three { columns: 2 160px; } }

/* BokBits: rode golven achter de afleveringen. Donkerder dan de home-variant,
   zodat de thumbnails er niet in wegvallen. */
.bokbits-sectie { background: linear-gradient(160deg, #240a0c 0%, #5d1418 42%, #8f1d21 78%, #6b1518 100%); }
.bokbits-sectie h2, .bokbits-sectie .section-head h2 { color: #fff; }
.bokbits-sectie .eyebrow { color: #f0a9ac; }
.bokbits-sectie .bokbit { background: rgba(15,10,10,.55); border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(2px); }
.bokbits-sectie .bokbit:hover { border-color: #fff; }
.bokbits-sectie .bokbit-body .ep { color: #f6bfc1; }
.bokbits-sectie .bokbit-body h3 { color: #fff; }

/* =====================================================================
   BokBits — de bandenkast
   De afleveringen staan als videobanden op een plank. Hover tilt er een
   uit, klikken kantelt hem in de speler erboven en laat zijn plek leeg.
   ===================================================================== */
/* speler en kast delen dezelfde breedte, zodat het één meubel wordt.
   --bb-breed en --bb-hoog zijn de maten van één band; de gleuf, de
   liggende band en de vlucht ernaartoe rekenen daar allemaal mee. */
.bokbits-sectie { --bb-breed: 60px; --bb-hoog: 212px; }
.bokbits-sectie .wrap > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.bb-speler { margin-bottom: 1.8rem; }
.bb-scherm { position: relative; aspect-ratio: 16/9; border-radius: 10px 10px 0 0; overflow: hidden;
  background: #0b0607; border: 3px solid rgba(0,0,0,.55); border-bottom: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06); }
.bb-beeld { position: absolute; inset: 0; background: #0b0607 center/cover no-repeat; }
/* De speler komt pas in beeld als hij echt iets te tonen heeft. Tot die
   tijd kijk je naar de thumbnail eronder, in plaats van naar het zwarte
   vlak waarmee YouTube zichzelf opstart. */
.bb-scherm iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3;
  opacity: 0; transition: opacity .25s ease; }
.bb-scherm iframe.zichtbaar { opacity: 1; }

/* aan- en uitgaan van de buis: een streep die zich open- of dichtvouwt */
.bb-flits { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 55%); }
.bb-scherm.aan .bb-beeld { animation: bbAan .5s cubic-bezier(.2,.9,.3,1); }
.bb-scherm.aan .bb-flits { animation: bbFlits .5s ease-out; }
.bb-scherm.uit .bb-beeld { animation: bbUit .38s cubic-bezier(.7,0,.9,.3) forwards; }
.bb-scherm.uit .bb-flits { animation: bbFlitsUit .38s ease-in; }
@keyframes bbAan { 0% { transform: scaleY(.01); filter: brightness(2.6); }
  55% { transform: scaleY(1); filter: brightness(1.7); } 100% { transform: scaleY(1); filter: none; } }
@keyframes bbFlits { 0% { opacity: 1; } 70% { opacity: .5; } 100% { opacity: 0; } }
@keyframes bbUit { 0% { transform: scaleY(1); } 70% { transform: scaleY(.012); filter: brightness(2.6); }
  100% { transform: scaleY(.012) scaleX(.4); opacity: 0; } }
@keyframes bbFlitsUit { 0% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } }

.bb-start { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  border: 0; background: rgba(0,0,0,.18); cursor: pointer; transition: background .2s ease; }
.bb-start:hover { background: rgba(0,0,0,.05); }
.bb-start[hidden] { display: none; }

/* ---- de recorder onder het scherm ---- */
.bb-deck { background: linear-gradient(180deg, #2b2223 0%, #1a1414 55%, #120e0f 100%);
  border: 3px solid rgba(0,0,0,.55); border-radius: 0 0 10px 10px; border-top: 0;
  padding: 12px 20px 12px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
/* De gleuf is maar een paar pixels ruimer dan de band zelf, zodat de band
   er precies in past en onderweg niet van maat verandert. */
.bb-gleuf { position: relative; width: calc(var(--bb-hoog) + 14px); height: calc(var(--bb-breed) + 12px);
  margin: 0 auto; border-radius: 4px; background: #070505;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07); }
.bb-ingelegd { position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--bb-breed); height: var(--bb-hoog);
  transform: translate(-50%, -50%) rotate(90deg);
  background: linear-gradient(90deg, #d12f35 0%, #a81f25 62%, #8c1a20 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,.6); cursor: default; }
.bb-ingelegd[hidden] { display: none; }
/* het uitwerp-duwtje: vóór het draaien, zodat hij recht omhoog komt */
.bb-gleuf.uitworp .bb-ingelegd { transform: translate(-50%, -50%) translateY(-18px) rotate(90deg);
  transition: transform .3s cubic-bezier(.2,.8,.3,1); }

.bb-fascia { display: flex; align-items: baseline; gap: .8rem; margin-top: 10px; }
.bb-lamp { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center;
  background: #4a3436; transition: background .2s ease, box-shadow .2s ease; }
.bb-lamp.aan { background: #ff3b42; box-shadow: 0 0 10px rgba(255,59,66,.9); }
.bb-info-nr { font-family: var(--font-head); font-weight: 700; color: #f6bfc1; font-size: 1rem; }
.bb-fascia h2 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.7rem); color: #fff; }

/* ---- de kast ---- */
.bb-kast-kop { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0 0 1rem; }
.bb-tel { font-family: var(--font-head); font-size: .78rem; color: rgba(255,255,255,.55); }
.bb-rek { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  padding: 26px 2px 0; margin: 0 -2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.bb-rek::-webkit-scrollbar { height: 6px; }
.bb-rek::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.bb-banden { list-style: none; display: flex; align-items: flex-end; gap: 6px; margin: 0; padding: 0; }

/* de plek in de kast; blijft staan als de band eruit is */
.bb-slot { position: relative; flex: none; display: flex; align-items: center; height: var(--bb-hoog); }
.bb-slot::before { content: ""; position: absolute; left: 0; top: 0;
  width: var(--bb-breed); height: 100%;
  border-radius: 3px; border: 1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.28);
  opacity: 0; transition: opacity .25s ease; }
.bb-slot.leeg::before { opacity: 1; }

/* de thumbnail die bij hoveren naast de band uitklapt en de rest opzijduwt */
.bb-kijk { flex: none; align-self: center; width: 0; height: 158px; margin-left: 0;
  overflow: hidden; border-radius: 4px;
  transition: width .3s cubic-bezier(.2,.8,.3,1), margin-left .3s; }
.bb-kijk-beeld { display: block; width: 280px; height: 100%; border-radius: 4px;
  background: #0b0607 center/cover no-repeat; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.bb-slot.kijken .bb-kijk { width: 280px; margin-left: 12px; }

.bb-band { flex: none; align-self: stretch; width: var(--bb-breed); padding: 10px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 0; border-radius: 3px; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(90deg, #7c1a1e 0%, #5e1316 62%, #4a0f12 100%);
  box-shadow: inset -4px 0 9px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, filter .22s ease; }
/* om en om iets anders, zodat het een rij losse objecten wordt */
.bb-slot:nth-child(even) .bb-band { background: linear-gradient(90deg, #6b1518 0%, #511114 62%, #3f0d0f 100%); }
/* de nieuwste steekt uit en is feller */
.bb-slot:first-child .bb-band { background: linear-gradient(90deg, #d12f35 0%, #a81f25 62%, #8c1a20 100%); transform: translateY(-12px); }

.bb-band:not(.bb-ingelegd):hover, .bb-band:focus-visible { transform: translateY(-26px); filter: brightness(1.12);
  box-shadow: inset -4px 0 9px rgba(0,0,0,.45), 0 18px 32px rgba(0,0,0,.5); }
.bb-slot:first-child .bb-band:hover, .bb-slot:first-child .bb-band:focus-visible { transform: translateY(-34px); }
.bb-band:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* de gekozen band moet vóór zijn buren langs, niet erachter */
.bb-slot.kijken, .bb-slot.actief { z-index: 20; }
.bb-slot.leeg .bb-band { opacity: 0; pointer-events: none; }

.bb-merk { font-family: var(--font-head); font-size: .52rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.72); }
.bb-label { flex: 1; width: 42px; background: #f3ece4; border-radius: 2px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.bb-label span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 0;
  font-size: .82rem; line-height: 1.1; color: #2b2020; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.bb-nr { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }

/* de vorige band zakt terug op zijn plek in de kast */
.bb-band.terug { animation: bbTerug .45s cubic-bezier(.3,.9,.3,1); }
@keyframes bbTerug { 0% { transform: translateY(-46px); opacity: .25; } 100% { opacity: 1; } }

.bb-plank { height: 8px; border-radius: 3px; margin-top: 5px;
  background: linear-gradient(180deg, #55393a, #2a1a1b);
  box-shadow: 0 8px 18px rgba(0,0,0,.45); }

/* de band die van de kast naar de gleuf reist: een echte kopie van de
   band, die alleen een kwartslag draait en niet van maat verandert */
.bb-vlieger { position: fixed; z-index: 400; pointer-events: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  transition: transform .9s cubic-bezier(.45,.05,.2,1); }

/* Op een telefoon moeten de speler en de kast samen op één scherm passen,
   anders zie je nooit waar de band naartoe gaat. Alles gaat dus strakker
   op elkaar en de banden worden korter. */
@media (max-width: 760px){
  .bokbits-sectie { --bb-breed: 44px; --bb-hoog: 150px; }
  .bokbits-sectie { padding-top: 2rem; padding-bottom: 2rem; }
  .bb-deck { padding: 8px 10px 8px; }
  .bb-speler { margin-bottom: .9rem; }
  .bb-fascia { margin-top: 7px; gap: .5rem; }
  .bb-fascia h2 { font-size: .98rem; }
  .bb-info-nr { font-size: .82rem; }
  .bb-kast-kop { margin-bottom: .5rem; }
  .bb-kast-kop .eyebrow { font-size: .62rem; }
  .bb-tel { font-size: .68rem; }
  .bb-rek { padding-top: 14px; }
  .bb-band { padding: 7px 0; gap: 5px; }
  .bb-merk { font-size: .4rem; }
  .bb-label { width: 30px; }
  .bb-label span { font-size: .68rem; padding: 6px 0; }
  .bb-nr { font-size: .82rem; }
  .bb-plank { height: 6px; }
  .bb-kijk-beeld, .bb-slot.kijken .bb-kijk { width: 180px; }
}
@media (prefers-reduced-motion: reduce){
  .bb-band, .bb-vlieger, .bb-kijk, .bb-gleuf.uitworp .bb-ingelegd { transition: none; }
  .bb-scherm.aan .bb-beeld, .bb-scherm.aan .bb-flits,
  .bb-scherm.uit .bb-beeld, .bb-scherm.uit .bb-flits { animation: none; }
  .bb-rek { scroll-behavior: auto; }
}

/* BokBits — afleveringen-showcase met video */
.bokbits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
@media (max-width: 900px){ .bokbits-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .bokbits-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.bokbit { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s ease, border-color .2s ease; }
.bokbit:hover { transform: translateY(-4px); border-color: var(--accent); }
.yt-facade { display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; cursor: pointer; background: #000 center/cover no-repeat; position: relative; }
.yt-facade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45)); transition: background .2s ease; }
.yt-facade:hover::before { background: rgba(0,0,0,.28); }
.yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0,0,0,.45); transition: transform .2s ease; }
.yt-play::after { content: ""; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-facade:hover .yt-play { transform: translate(-50%,-50%) scale(1.09); }
/* theatermodus: video's openen groot en gecentreerd, er speelt er altijd
   maar één tegelijk */
.vtheater { position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0,0,0,.92); opacity: 0; transition: opacity .25s ease; }
.vtheater.open { display: flex; }
.vtheater.show { opacity: 1; }
.vtheater-inner { width: min(1400px, 100%);
  /* breedte aftoppen zodat de 16:9-speler altijd in beeld past */
  max-width: calc((100vh - 10rem) * 16 / 9); }
.vtheater-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
  transform: scale(.96); transition: transform .25s ease; }
.vtheater.show .vtheater-frame { transform: none; }
.vtheater-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vtheater-cap { margin: .9rem 2px 0; color: #cfcfcf; font-family: var(--font-head);
  font-weight: 500; font-size: .95rem; }
.vtheater-cap:empty { display: none; }
.vtheater-close { position: absolute; top: 16px; right: 18px; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55);
  color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
  transition: background .2s ease, border-color .2s ease; }
.vtheater-close:hover { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce){
  .vtheater, .vtheater-frame { transition: none; }
  .vtheater-frame { transform: none; }
}

/* De BokBits-thumbnails hebben de titel in het beeld staan. Een afspeelknop
   in het midden valt daar precies overheen, dus die zetten we rechtsonder
   en maken hem iets kleiner. */
.bokbit .yt-play { top: auto; left: auto; right: 12px; bottom: 12px;
  transform: none; width: 46px; height: 46px; }
.bokbit .yt-play::after { border-width: 8px 0 8px 13px; margin-left: 3px; }
.bokbit .yt-facade:hover .yt-play { transform: scale(1.09); }

.bokbit iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
.bokbit-body { padding: 1rem 1.2rem 1.2rem; }
.bokbit-body .ep { color: var(--accent-2); font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.bokbit-body h3 { margin: .25rem 0 0; font-size: 1.15rem; }

/* ---------------------------------------------------------------------
   Studiopagina: ook de menubalk en de voettekst mee in het licht
   --------------------------------------------------------------------- */
body.page-studio { background: #faf6f1; }
/* de banner staat boven de lichte inhoud: accent en leesbaarheid meenemen */
body.page-studio .hero-slim .hero-inner::after {
  background: linear-gradient(180deg, rgba(40,28,20,.05) 0%, rgba(40,28,20,.35) 45%, rgba(40,28,20,.72) 100%);
}
body.page-studio .hero-slim .eyebrow { color: #f3d3b4; }
body.page-studio .hero-slim .btn { background: #b5734f; border-color: #b5734f; }
body.page-studio .hero-slim .btn:hover { background: #94593a; border-color: #94593a; }
body.page-studio .site-header {
  background: rgba(250,246,241,.86);
  border-bottom: 1px solid #e6dcd0;
}
/* het logo is wit; alleen op de lichte menubalk maken we het zwart.
   In de voettekst (die donker blijft) moet het wit blijven. */
body.page-studio .site-header .brand-logo { filter: brightness(0); opacity: .88; }
body.page-studio .nav-links > li > a { color: #4a423b; }
body.page-studio .nav-links > li > a:hover,
body.page-studio .nav-links > li:hover > a.navtop { color: #b5734f; }
body.page-studio .nav-links > li > a.active,
body.page-studio .nav-links > li > a.navtop.active { color: #b5734f; }
body.page-studio .nav-toggle { color: #4a423b; }
body.page-studio .dropdown { background: #fff; border-color: #e6dcd0; box-shadow: 0 18px 44px rgba(90,70,55,.18); }
body.page-studio .dropdown a { color: #4a423b; }
body.page-studio .dropdown a:hover { background: #b5734f; color: #fff; }
/* onderstreping van het actieve item volgt de nieuwe accentkleur */
body.page-studio .nav-links > li > a.active { border-bottom-color: #b5734f; }
@media (max-width: 900px){
  body.page-studio .nav-center { background: #faf6f1; }
  body.page-studio .nav-links > li > a,
  body.page-studio .nav-links > li > a.navtop { border-bottom-color: #e6dcd0; }
}

/* ---------------------------------------------------------------------
   Overgang tussen de donkere site en de lichte studiopagina
   --------------------------------------------------------------------- */
/* Zonsopgang: een warme gloed zwelt van onderaf op tot hij het scherm vult,
   en lost op de nieuwe pagina weer op. Terug naar de donkere site gebeurt
   hetzelfde in schemertinten. */
:root {
  --zon-warm: radial-gradient(circle at 50% 115%, #fff6e6 0%, #f6d9b0 34%, #e8c9a8 58%, rgba(232,201,168,0) 78%);
  --zon-donker: radial-gradient(circle at 50% 115%, #3c3d3d 0%, #232525 34%, #131414 58%, rgba(19,20,20,0) 78%);
}
.pt-zon {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  transform-origin: 50% 100%; transform: scale(.2); opacity: 0;
}
.pt-zon.naar-studio { background: var(--zon-warm); }
.pt-zon.naar-bok    { background: var(--zon-donker); }
.pt-zon.op { animation: ptZonOp .72s cubic-bezier(.3,.8,.3,1) forwards; }

/* aankomst: de gloed ligt er al overheen en dooft weg */
html.pt-arrive::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  transform-origin: 50% 100%; transform: scale(3.2);
  animation: ptZonWeg .85s ease .06s forwards;
}
html.pt-arrive.naar-studio::before { background: var(--zon-warm); }
html.pt-arrive.naar-bok::before    { background: var(--zon-donker); }

@keyframes ptZonOp  { from { transform: scale(.2); opacity: 0; } 55% { opacity: 1; } to { transform: scale(3.2); opacity: 1; } }
@keyframes ptZonWeg { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .pt-zon, html.pt-arrive::before { display: none; animation: none; }
}

/* =====================================================================
   Studio Sunny Days
   Deze pagina wijkt bewust af van de rest: licht en warm, in de sfeer van
   de daglichtstudio zelf. Alleen de variabelen worden omgezet, zodat alle
   bestaande onderdelen (kaarten, knoppen, koppen) vanzelf meebewegen.
   ===================================================================== */
.theme-studio {
  --accent:      #b5734f;   /* terracotta */
  --accent-2:    #a05f3c;
  --accent-dark: #94593a;
  --bg:          #faf6f1;   /* warm crème */
  --bg-2:        #f2e9df;
  --bg-3:        #ffffff;
  --ink:         #2b2724;
  --muted:       #6c625a;
  --line:        #e6dcd0;
  --shadow:      0 18px 50px rgba(90,70,55,.14);
  background: var(--bg);
  color: var(--ink);
}
.theme-studio h1, .theme-studio h2, .theme-studio h3, .theme-studio h4 { color: var(--ink); }
.theme-studio .btn { color: #fff; }
.theme-studio .card { box-shadow: 0 10px 30px rgba(90,70,55,.08); }
.theme-studio .card:hover { box-shadow: 0 18px 44px rgba(90,70,55,.16); }
/* de filmkorrel hoort bij de donkere huisstijl, niet bij een daglichtstudio */

/* strakker ritme dan de rest van de site: je scrolt nog steeds langs de
   foto's, maar je bent sneller bij de agenda */
.theme-studio section { padding: 3.4rem 0; }
.theme-studio .split { gap: 2.4rem; }
.theme-studio .section-head { margin-bottom: 1.6rem; }
.theme-studio .section-head.compact { margin-bottom: 1.4rem; }
.theme-studio .split-media img { max-height: 62vh; object-fit: cover; }

/* dezelfde golven als op de rest van de site, maar in zandtinten.
   Op een lichte ondergrond werkt multiply; screen zou alles wegbleken. */
.theme-studio .studio-waves { background: linear-gradient(160deg, #fdf8f1 0%, #f7e9d7 46%, #eed9bd 100%); }
.theme-studio .studio-waves .rw-layer .wv { mix-blend-mode: multiply; }
.theme-studio .studio-waves .rw-layer .wv1 path { fill: #e7c69f; opacity: .55; }
.theme-studio .studio-waves .rw-layer .wv2 path { fill: #d9b085; opacity: .45; }
.theme-studio .studio-waves .rw-layer .wv3 path { fill: #f3ddc3; opacity: .6; }

.studio-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
@media (max-width: 900px){ .studio-fac { grid-template-columns: 1fr; } }
.studio-fac ul { margin: 1rem 0 0; padding-left: 1.1rem; }
.studio-fac li { margin-bottom: .55rem; color: var(--muted); font-size: .95rem; }
/* de kop staat nu in dezelfde kolom als de lijst, dus die kolom is smal:
   één kolom leest daar prettiger dan twee */
.studio-fac-lijst li { break-inside: avoid; }
.studio-fac-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.studio-fac-imgs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(90,70,55,.12); }
.studio-fac-imgs img:first-child { grid-column: span 2; aspect-ratio: 16/10; }

/* wat je altijd krijgt: één keer noemen in plaats van drie keer onder
   elkaar. Scheelt op een telefoon twee schermen scrollen. */
/* geen kaartje: dat vecht met de drie kaarten erboven. Alleen een dun
   streepje als scheiding, verder gewoon tekst op de golven. */
.studio-inbegrepen { margin: 2.2rem auto 0; max-width: 760px; padding-top: 1.8rem;
  border-top: 1px solid rgba(120,90,60,.22); }
/* kop gecentreerd zoals de rest, maar de opsomming zelf links uitgelijnd:
   gecentreerde bullets zijn niet te scannen */
.studio-inbegrepen h3 { margin: 0 0 1rem; font-size: 1.05rem; text-align: center; }
.studio-inbegrepen ul { margin: 0 auto; padding-left: 1.1rem; columns: 2; column-gap: 2.2rem;
  max-width: 620px; }
.studio-inbegrepen li { break-inside: avoid; margin-bottom: .45rem; color: var(--muted); font-size: .94rem; }
@media (max-width: 620px){ .studio-inbegrepen ul { columns: 1; } }

.studio-card { display: flex; flex-direction: column; }
.studio-card-img { margin: -1.4rem -1.4rem 1.1rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.studio-card-img img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.studio-card:hover .studio-card-img img { transform: scale(1.04); }

/* het aanvraagblok in studiokleuren: dezelfde ademende lichtvlekken, maar
   dan als warme gloed op een crème ondergrond in plaats van rood op zwart */
.theme-studio .spotlight { background: radial-gradient(120% 90% at 50% 0%, #fdf6ec 0%, #f7ebdc 45%, #f2e9df 100%); }
.theme-studio .spotlight h2, .theme-studio .spotlight .section-head h2 { color: var(--ink); }
.theme-studio .spotlight .text-muted { color: var(--muted); }
.theme-studio .sl-layer .sl { mix-blend-mode: multiply; opacity: .38; filter: blur(80px); }
.theme-studio .sl-layer .sl.a { background: radial-gradient(circle, rgba(233,178,120,.75), rgba(233,178,120,0) 62%); }
.theme-studio .sl-layer .sl.b { background: radial-gradient(circle, rgba(244,205,160,.7), rgba(244,205,160,0) 60%); }
.theme-studio .sl-layer .sl.c { background: radial-gradient(circle, rgba(210,145,95,.6), rgba(210,145,95,0) 62%); }
.theme-studio .particles i { background: radial-gradient(circle at 40% 40%, rgba(255,236,208,.95), rgba(226,180,130,.45) 48%, rgba(210,150,100,0) 74%); }
.theme-studio .contact-info p, .theme-studio .contact-info li { color: var(--muted); }
.theme-studio .contact-info a { color: var(--accent-2); }
/* de invoervelden zijn in de huisstijl rood gevuld; hier warm en licht */
.theme-studio .field input:not([type=radio]):not([type=checkbox]),
.theme-studio .field textarea,
.theme-studio .field select {
  background: #fff; border-color: #dfd2c4; color: var(--ink);
}
.theme-studio .field input::placeholder,
.theme-studio .field textarea::placeholder { color: #a89c91; }
.theme-studio .field input:focus,
.theme-studio .field textarea:focus,
.theme-studio .field select:focus { outline: 2px solid var(--accent); }
.theme-studio .field label, .theme-studio .radios label { color: var(--ink); }
.theme-studio .field small { color: var(--muted); }
.theme-studio .btn.light { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-studio .btn.light:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* ---------------------------------------------------------------------
   Boekingswizard
   --------------------------------------------------------------------- */
/* de wizard heeft breedte nodig, dus daar geen tweekolomsindeling */
.theme-studio .contact-grid { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }

.wz-stap { margin-bottom: 2.2rem; }
.wz-stapkop { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.wz-stapkop span { display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: .82rem; }
.wz-hint { margin: -.5rem 0 .9rem; font-size: .88rem; color: var(--muted); }

.wz-agenda { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; }
.wz-agenda-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem;
  font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.wz-maand { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.wz-maand:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.wz-dagnamen, .wz-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wz-dagnamen { margin-bottom: 4px; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); text-align: center; }
.wz-dag { aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px;
  background: #f6efe6; color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.wz-dag:hover:not(:disabled) { background: var(--accent); color: #fff; }
.wz-dag.gekozen { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.wz-dag.bezet { background: repeating-linear-gradient(135deg,#efe3d6,#efe3d6 4px,#e5d5c4 4px,#e5d5c4 8px);
  color: #b3a496; cursor: not-allowed; }
.wz-dag.verleden { background: transparent; color: #cbbfb3; cursor: default; }
.wz-legenda { display: flex; gap: 1.2rem; margin: .9rem 0 0; font-size: .82rem; color: var(--muted); }
.wz-bol { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -2px; margin-right: .35rem; }
.wz-bol.vrij { background: #f6efe6; }
.wz-bol.bezet { background: repeating-linear-gradient(135deg,#efe3d6,#efe3d6 3px,#e5d5c4 3px,#e5d5c4 6px); }

.wz-dagen { display: grid; gap: .6rem; }
.wz-dagrij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .8rem 1rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); }
.wz-dagrij-naam { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.wz-duren { display: flex; gap: .5rem; flex-wrap: wrap; }
.wz-duur { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; }
.wz-duur small { color: var(--muted); margin-left: .2rem; }
.wz-duur:hover { border-color: var(--accent); }
.wz-duur.aan { background: var(--accent); border-color: var(--accent); color: #fff; }
.wz-duur.aan small { color: rgba(255,255,255,.85); }

.wz-pillen { display: flex; flex-wrap: wrap; gap: .6rem; }
.wz-pil { padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.wz-pil:hover { border-color: var(--accent); }
.wz-pil.aan { background: var(--accent); border-color: var(--accent); color: #fff; }

.wz-rollen { display: grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: .7rem; }
.wz-rol { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.wz-rol:hover { border-color: var(--accent); }
.wz-rol.aan { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.wz-rol-vlak { display: block; aspect-ratio: 4/3; background-size: cover; background-position: center; }
.wz-rol-naam { display: block; padding: .45rem .3rem; font-size: .82rem; }
/* lichte vlakken een randje geven, anders vallen ze weg tegen de kaart */
.wz-rol-vlak { box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
/* de muur is geen rol: streepje eronder als visueel onderscheid */
.wz-rol-muur .wz-rol-vlak { box-shadow: inset 0 0 0 1px #ded3c5; }
.wz-rol-muur .wz-rol-naam { color: var(--muted); }

.wz-opties { display: grid; gap: .7rem; }
.wz-optie { display: flex; gap: 1rem; align-items: stretch; padding: 0; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.wz-optie:hover { border-color: var(--accent); }
.wz-optie.aan { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.wz-optie-beeld { flex: none; width: 120px; background: #f2e6da center/cover no-repeat; }
@media (max-width: 560px){ .wz-optie-beeld { width: 84px; } }
.wz-optie-tekst { display: block; padding: .9rem 1rem .9rem 0; }
.wz-optie-kop { display: block; font-family: var(--font-head); font-weight: 600; }
.wz-optie-prijs { display: block; font-family: var(--font-head); font-weight: 700; color: var(--accent-2); }
.wz-optie-prijs small { font-weight: 500; color: var(--muted); font-size: .78rem; }
.wz-optie-desc { display: block; margin-top: .25rem; font-size: .86rem; color: var(--muted); }

.wz-teveel { margin: 1.4rem 0 0; padding: .9rem 1.1rem; border-radius: var(--radius);
  background: #fbeae4; border: 1px solid #e6bda8; color: #7a3b1e; font-size: .92rem; }
.wz-teveel[hidden] { display: none; }
.wz-teveel a { color: #7a3b1e; text-decoration: underline; }

.wz-totaal { margin: 2rem 0 1.4rem; padding: 1.2rem 1.4rem; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); }
.wz-regel { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0;
  font-size: .92rem; color: var(--muted); border-bottom: 1px solid #f0e7dc; }
.wz-regel span:last-child { color: var(--ink); white-space: nowrap; }
.wz-leeg { margin: 0; font-size: .9rem; color: var(--muted); }
.wz-som { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9rem;
  font-family: var(--font-head); font-weight: 600; }
.wz-som b { font-size: 1.7rem; color: var(--accent-2); }
.wz-btw { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); }

.studio-addon { font-size: 1.6rem; margin: .2rem 0 1.2rem; }
.studio-addon small { font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: .5rem; }

.studio-ref { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.4rem; padding: 1.8rem 2rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-3); }
.studio-ref h3 { margin: .3rem 0 .5rem; }
.studio-ref p { margin: 0; color: var(--muted); max-width: 62ch; }
@media (max-width: 700px){ .studio-ref { padding: 1.4rem; } }

/* SBB-keurmerk op de stagepagina */
.sbb { display: flex; align-items: center; gap: 1.2rem; margin: 2rem 0 0;
  padding: 1rem 1.3rem; border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  text-decoration: none; color: inherit; transition: border-color .2s ease, background .2s ease; }
.sbb:hover { text-decoration: none; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.11); }
/* geen wit plaatje achter het logo: dat komt uit de PNG zelf als die
   transparant is */
.sbb img { flex: none; width: 104px; height: auto; }
.sbb span { font-size: .95rem; color: rgba(255,255,255,.88); }
.sbb strong { color: #fff; }
@media (max-width: 560px){
  .sbb { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .sbb img { width: 84px; }
}

/* klantlogo's: rustige rij, gedempt tot je er overheen gaat */
.klanten { padding: 3.4rem 0; background: var(--bg-2); }
.klanten-kop { text-align: center; margin: 0 0 1.8rem; color: var(--muted);
  font-family: var(--font-head); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; }
/* Eén regel, hoeveel logo's er ook staan: de rij breekt niet af en de logo's
   krimpen mee zodat ze passen. */
.klanten-rij { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: clamp(1.2rem, 2.8vw, 3rem); }
.klanten-rij li { flex: 0 1 auto; min-width: 0; display: flex; justify-content: center; }
/* De aangeleverde logo's zijn wit, zwart én in kleur door elkaar. Een zwart
   logo verdwijnt op deze achtergrond, dus maken we ze allemaal wit. Dat geeft
   meteen een rustige, gelijkmatige rij in plaats van een bonte verzameling. */
/* max-height in plaats van een vaste hoogte: dan blijven de verhoudingen
   kloppen terwijl brede logo's toch kunnen krimpen om te passen. */
.klanten-rij img { width: auto; height: auto;
  max-height: clamp(30px, 3.6vw, 52px); max-width: 100%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .55; transition: opacity .25s ease; }
.klanten-rij img:hover { opacity: 1; }
/* op een telefoon wordt één regel onleesbaar klein, daar mag hij afbreken */
@media (max-width: 760px){
  .klanten { padding: 2.6rem 0; }
  .klanten-rij { flex-wrap: wrap; gap: 1.6rem 2rem; }
  .klanten-rij img { max-height: 26px; max-width: 120px; }
}

/* zichtbare focus voor wie met het toetsenbord navigeert */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 4px;
}

/* 404 */
.fout-404 { min-height: 58vh; display: grid; place-items: center; text-align: center; }
.fout-404 .code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 14vw, 9rem);
  line-height: 1; color: var(--accent); margin: 0; }
.fout-404 h1 { margin: .6rem 0 .8rem; }
.fout-404 p { color: var(--muted); max-width: 52ch; margin: 0 auto 1.6rem; }
.fout-404 .links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* notice / alert */
.notice { background: rgba(192,40,46,.12); border: 1px solid var(--accent-dark); color: #f0c9cb; border-radius: 10px; padding: 1rem 1.2rem; font-size: .95rem; }
.notice code { color:#fff; }
.alert { background: var(--accent); color:#fff; text-align: center; font-family: var(--font-head); font-weight: 600; padding: .9rem 1rem; }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--accent-dark), var(--accent)); color:#fff; text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 60ch; margin: 0 auto 1.4rem; }

/* =====================================================================
   Diensten — overzichtspagina: rode golven + grote tegels met titel in het midden
   ===================================================================== */
.diensten-hub { padding: 3.5rem clamp(14px, 2.2vw, 40px) 4.5rem; }
.diensten-head { text-align: center; max-width: none; margin: 0 auto 2.6rem; }
.diensten-head h1 { margin: 0; }
.diensten-hub .dienst-grid { position: relative; z-index: 3; }
.dienst-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; width: 100%; }
@media (max-width: 1100px){ .dienst-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px){ .dienst-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.dienst-tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-3); border: 2px solid transparent; transition: border-color .2s ease, transform .15s ease; }
.dienst-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dienst-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.86) 100%); }
.dienst-tile:hover img { transform: scale(1.07); }
.dienst-tile:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-4px); }
/* titel groot in het midden van de tegel */
.dt-title { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .7rem; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.95rem); letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0,0,0,.55); }
/* korte uitleg onderaan de tegel */
.dt-desc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1rem 1rem 1.2rem; color: rgba(255,255,255,.9); font-size: .84rem; line-height: 1.42; text-align: center; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--bg-2); color: var(--muted); padding: 3.5rem 0 2rem; border-top: 1px solid rgba(255,255,255,.06); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color:#fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.site-footer h4 { color:#fff; font-size: 1rem; margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; font-size: .95rem; }
.site-footer .foot-logo { height: 46px; margin-bottom: 1rem; }
.site-footer .legal a { color: var(--accent-2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.4rem; text-align: center; font-size: .85rem; color: #7c7c82; }
@media (max-width: 720px){ .footer-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   360°-viewer (dronepagina) — nu veel groter, bijna schermbreed
   ===================================================================== */
/* uit de wrap breken met negatieve marges links én rechts. Betrouwbaarder dan
   width:100vw, want dat telt op een desktop de schuifbalk mee en levert dan
   een streepje ruimte aan de zijkant op. */
.pano-full { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* touch-action: pan-y laat de browser verticaal scrollen, terwijl een
   horizontale veeg naar de viewer gaat om rond te kijken. Met "none" zat
   je op een telefoon vast in het beeld en kwam je de pagina niet voorbij. */
.pano-stage { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: grab; background: #0a0607; touch-action: pan-y; }
.pano-stage:active { cursor: grabbing; }
.pano-stage canvas { width: 100%; height: 100%; display: block; }
/* grote, bijna volledige breedte, hoge viewer */
.pano-stage.pano-big { aspect-ratio: auto; height: clamp(440px, 80vh, 920px); border-radius: 0; }
/* op een telefoon niet het halve scherm vullen: dan blijft er genoeg pagina
   zichtbaar om langs de viewer heen te kunnen scrollen */
@media (max-width: 700px){
  .pano-stage, .pano-stage.pano-big {
    height: auto; aspect-ratio: 4/5; max-height: 58vh;
    /* van rand tot rand: geen ronde hoeken en geen schaduw die ruimte suggereert */
    border-radius: 0; box-shadow: none;
  }
  .pano-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}
/* melding zolang het volledige 360-beeld nog binnenkomt */
.pano-laden { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center;
  justify-content: center; gap: .7rem; flex-wrap: wrap; text-align: center; padding: 1rem;
  background: #0a0607; color: rgba(255,255,255,.75);
  font-family: var(--font-head); font-size: .9rem; }
.pano-laden[hidden] { display: none; }
.pano-spin { width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.25); border-top-color: var(--accent);
  animation: panoSpin .9s linear infinite; }
@keyframes panoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .pano-spin { animation: none; } }

/* de tip past zich aan het apparaat aan */
.pano-hint-touch { display: none; }
@media (hover: none){
  .pano-hint-muis { display: none; }
  .pano-hint-touch { display: inline; }
}
.pano-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; font-family: var(--font-head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.4); padding: .4rem .9rem; border-radius: 20px; pointer-events: none; }